Belajar HTML : Dasar (2) - Suka Code
Belajar HTML Dasar Part 2 - Halo sob sebelumnya saya sudah menjelaskan apa Itu HTML dan sejarah pada HTML. Nah sekarang Sobat akan saya kenalkan dengan dasar - dasar HTML. Tidak usah banyak bicara kita langsung ke pembahasan nya ya sobat.
HTML Document
Setiap kali Anda membuat dokumen atau file HTML, maka ada beberapa tag yang harus ada pada dokumen Anda karena tag - tag HTML ini merupakan tag dasar yang menjadi bagian dari struktur HTML. Tag - tag HTML tersebut adalah <!DOCTYPE html>, <html>, <head> dan <body>.
Mungkin sobat bingung dengan code-code di atas itu, kalau sobat bingung baiklah disini saya jawab jika sobat bingung.
Sebelum menjawab pertanyaan tersebut, ayo kita simak dulu penjelasan dari masing-masing tag HTML tersebut satu per satu.
Tag <!DOCTYPE>
Doctype atau DTD adalah singkatan dari Document Type Declaration yang berguna untuk memberitahu browser bahwa bahasa yang digunakan adalah HTML. Kalau misalnya DTD tidak Anda deklarasikan dalam membuat file HTML maka browser tetap akan membaca file HTML Sobat seolah-olah tidak ada sesuatu yang berubah. Tetapi kalau kita lihat dengan lebih mendetail maka fie HTML yang tidak ada DTD akan dijalankan oleh browser pada quirk mode.
Pada quirk mode, browser membaca halaman web sedikit berbeda karena tidak ditemukan deklarasi DTD di didalamnya dan browser mengidentifikasi bahwa halaman web Anda merupakan halaman yang usang, nah supaya tetap dapat ditampilkan dengan baik oleh browser, maka browser menggunakan quirk mode secara otomatis untuk menampilkan halaman web Anda
Tag <html>
Ini adalah tag pembuka di dalam semua halaman web. Tag-tag HTML harus bedara di diantara (diapit) oleh tag <html> ini.
Tag <head>
Tag <head> digunakan untuk mendefinisikan halaman, biasanya berisi tentang metatag dalam HTML, tag-tag CSS dan Javascript. Contoh yang paling mudah yaitu untuk memberi judul pada setiap halaman web, maka tag HTML yang digunakan adalah <title> nah tag <title>
ini diletakkan di antara tag <head> dan </head>.
Tag <body>
Tag-Tag HTML yang ada di dalam tag <body> inilah yang akan ditampilkan di browser, kalau Sobat sebelumnya sudah membaca tentang HTML Editor, maka Anda akan pahami bahwa hanya tag yang berada di antara tag <body> dan </body> yang akan ditampilkan di browser. Selain itu, ada juga tag pada <head> yang bisa ditampilkan oleh browser tapi tidak semua, salah satunya yaitu tag <title> yang tadi sudah kita bahas.
Perlu Sobat ingat bahwa tag-tag HTML memiliki pasangannya masing-masing yaitu tag pembuka dan tag penutupnya. Untuk membuat Sobat mudah lebih paham paham lagi, lihat penjelasan di bawah ini.
<tag pembuka>Ini adalah bagian yang ditampilkan di browser</tag penutup>
Contoh :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1> Belajar Dasar HTML bersama Suka Code </h1>
</body>
</html>
Silahkan copy dan pastekan di text editor kalian lalu kalian save diberinama bebas dan di kasih ektensi .html atau bisa juga .htm. Lalu sobat lihat hasil nya maka seperti ini.
HTML Heading
Untuk membuat heading di HTML, kita gunakan tag <h1> sampai <h6>.
<h1> menandakan bahwa text yang diapit dengan tag ini adalah text yang penting dan tag yang diapit <h6> kurang begitu penting.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>Belajar Dasar HTML bersama Suka Code</h1>
<h2>Belajar Dasar HTML bersama Suka Code</h2>
<h3>Belajar Dasar HTML bersama Suka Code</h3>
<h4>Belajar Dasar HTML bersama Suka Code</h4>
<h5>Belajar Dasar HTML bersama Suka Code</h5>
<h6>Belajar Dasar HTML bersama Suka Code</h6>
</body>
</html>
Silahkan copy dan pastekan di text editor kalian lalu kalian save dan kalian coba lihat hasil nya.
HTML Paragraf
Untuk membuat paragraf di HTML, tag yang digunakan adalah <p>. Contoh :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p>Belajar Dasar HTML bersama Suka Code</p>
</body>
</html>
Silakan coba di notepad, simpan dan buka di browser Anda. Lihat disitu, akan ada 2 paragraf yang ditampilkan.
HTML Link
Link adalah huruf, kata, kalimat atau gambar yang diapit dengan tag < a href="">dan </a>. Kalau Anda berusaha klik maka dia akan mengarahkan Anda ke object lain. Object yang saya maksud disini bisa saja halaman website (bisa milik Anda sendiri atau milik orang lain) dan bisa juga efek tertentu akan muncul jika Anda klik .
Contoh :
<a href="https://suka-code.blogspot.com/">Belajar Dasar HTML bersama Suka Code</a>
Sekarang coba Sobat ketik di Notepad, simpan dan buka di browser. Lalu klik tulisan "Belajar Dasar HTML bersama Suka Code" maka Sobat akan diarahkan menuju blog saya.
Anda bisa merubah tujuannya ke halaman profil facebook Anda dengan cara merubah isi dari attribute href dari https://suka-code.blogspot.com/ menjadi misalnya saja google.com. Sekarang kalau Anda coba lagi, maka akan diarahkan ke Google.
HTML Gambar
Jika Anda ingin menampilkan gambar, maka tag yang digunakan adalah <img>. Nah tag <img> memiliki beberapa atribut yaitu src yang merupakan source dari file, alt yang berarti alternatif jika gambar tidak muncul, width dan height yang merupakan ukuran dari gambar.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<img src="http://placehold.it/300x300?text=Suka Code" alt="Gambar" width="300" height="300">
</body>
</html>
Nah untuk mengetahui fungsi atribut alt, silakan Anda hapus tulisan "placehold.it" kemudian refresh browser Anda dan lihat apa yang muncul. Anda juga bisa saja merubah ukuran dari width dan heightnya.
Sekian tutorial Belajar HTML Dasar Part 2. Apa bila ada kritik dan saran jangan sungkam untuk komentar. Semoga bermanfaat buat sobat, kunjungi terus blog kami setiap hari bakal Update terus heheh.
Sumber : https://klikfadhil.blogspot.com/
Sumber : https://klikfadhil.blogspot.com/
Suka Code Blog adalah website dengan kumpulan konten seputar Game Development, Web Programming, Android Programming, Windows Programming, dan lain-lain.
Belum ada Komentar untuk "Belajar HTML : Dasar (2) - Suka Code"
Posting Komentar