Artikel saya kali ini merupakan lanjutan dari artikel yang sebelumnya yaitu Struktur Dasar HTML dalam Pembuatan Website. Bagi anda yang belum membacanya silahkan dibaca dulu agar tidak menjadi bingung nantinya.
File HTML dibawah merupakan file yang sama yang kita gunakan pada artikel sebelumnya yang merupakan bentuk kode HTML yang sangat dasar sekali.Tulisan ini sangatlah cocok untuk para pemula yang ingin belajar membuat website.
Coba kita perhatikan kode HTML dibawah ini, dimana saya akan memberikan warna pada setiap tagnya.
Hal ini kita lakukan agar anda akan lebih cepat mengerti dan membedakan lokasi dan cara peletakan tag kode html saja. Pemberian warna ini hanya kita berlakukan di sini saja, hal ini tidak kita lakukan pada waktu menuliskan kode program pada waktu pembuatan website anda.
<html>
<body>
<h1>Di sini judul pertama</h1>
<h2> Di sini judul kedua</h2>
<h3> Di sini judul ketiga</h3>
<p>Di sini meletakkan paragraf atau kalimat yang pertama.</p>
<p> Di sini meletakkan paragraf atau kalimat yang kedua.</p>
<a href=" http://plaza-tutorial.blogspot.com/ ">Di sini membuat link</a>
<img src="plaza-tutorial.blogspot.com.jpg" alt="Baris ini untuk membuat gambar" width="200" height="160">
</body>
</html>
Berikut penjelasan dari kode program yang ada di atas:
Kode atau tag tersebut memberikan informasi kepada web browser bahwa mulai dari tag pembuka <html> sampai pada tag penutup </html> merupakan bagian yang harus dibaca web browser sebagai sebuah website atau isi dari html.
Tag <body> dan </body> ini memberikan informasi kepada web browser bahwa dari mulai tag pembuka <body> sampai pada tag penutup </body> merupakan badan dari halaman website tersebut.
Tah h1, h2 dan h3 yang saya beri warna hijau merupakan tag heading atau judul yang memberikan informasi dan perintah kepada web browser untuk menampilkan isi dari website dalam bentuk h1 (heading1) dan selanjutnya h2 (heading2) dan h3 (heading3).
Heading1 (h1) ukuranya lebih besar dari heading2 (h2) dan heading2 (h2) lebih besar dari heading3 (h3), demikian seterusnya sampai heading6 (h6).
Tag <p> (paragrap) yang saya beri warna orange merupakan tag yang juga digunakan diantara tag pembuka <body> dan tag penutup </body>.
Yang terakhir adalah kode html yang berwarna hita. Tag ini akan kita bahas pada tulisan saya yang berikutnya yaitu membuat link dan memasukkan gambar dalam halaman website.
File HTML dibawah merupakan file yang sama yang kita gunakan pada artikel sebelumnya yang merupakan bentuk kode HTML yang sangat dasar sekali.Tulisan ini sangatlah cocok untuk para pemula yang ingin belajar membuat website.
Coba kita perhatikan kode HTML dibawah ini, dimana saya akan memberikan warna pada setiap tagnya.
Hal ini kita lakukan agar anda akan lebih cepat mengerti dan membedakan lokasi dan cara peletakan tag kode html saja. Pemberian warna ini hanya kita berlakukan di sini saja, hal ini tidak kita lakukan pada waktu menuliskan kode program pada waktu pembuatan website anda.
<html>
<body>
<h1>Di sini judul pertama</h1>
<h2> Di sini judul kedua</h2>
<h3> Di sini judul ketiga</h3>
<p>Di sini meletakkan paragraf atau kalimat yang pertama.</p>
<p> Di sini meletakkan paragraf atau kalimat yang kedua.</p>
<a href=" http://plaza-tutorial.blogspot.com/ ">Di sini membuat link</a>
<img src="plaza-tutorial.blogspot.com.jpg" alt="Baris ini untuk membuat gambar" width="200" height="160">
</body>
</html>
Berikut penjelasan dari kode program yang ada di atas:
Bagian tag HTML
Saya memberikan warna merah pada tag HTML pembuka dan penutup <html></html>. Tag pembuka diletakkan di paling awal kode dan tag penutup diletakkan di paling akhir semua kode.
Kode atau tag tersebut memberikan informasi kepada web browser bahwa mulai dari tag pembuka <html> sampai pada tag penutup </html> merupakan bagian yang harus dibaca web browser sebagai sebuah website atau isi dari html.
Bagian tag Body
Tag pembuka <body> dan tag penutup </body> saya berikan dengan menggunakan warna biru. Dari kode yang tertera diatas bisa kita lihat bagaimana cara meletakkan tag body tersebut.
Tag <body> dan </body> ini memberikan informasi kepada web browser bahwa dari mulai tag pembuka <body> sampai pada tag penutup </body> merupakan badan dari halaman website tersebut.
Didalam badan website inilah isi atau konten dari web diletakkan, seperti artikel text, gambar dan lain-lain.
Tag h1, h2, h3 dan p
Tag h1, h2, h3 dan p merupakan tag yang dipakai untuk mengisi badan dari sebuah website dimana tag-tag ini nantinya akan diletakkan diantara tag <body> dan tag </body>.
Tah h1, h2 dan h3 yang saya beri warna hijau merupakan tag heading atau judul yang memberikan informasi dan perintah kepada web browser untuk menampilkan isi dari website dalam bentuk h1 (heading1) dan selanjutnya h2 (heading2) dan h3 (heading3).
Heading1 (h1) ukuranya lebih besar dari heading2 (h2) dan heading2 (h2) lebih besar dari heading3 (h3), demikian seterusnya sampai heading6 (h6).
Tag <p> (paragrap) yang saya beri warna orange merupakan tag yang juga digunakan diantara tag pembuka <body> dan tag penutup </body>.
Tag in memberikan informasi atau perintah kepada web browser bahwa kalimat atau text yang berada diantara tag pembuka<p> dan tag penutup </p> akan ditampilkan dalam bentuk paragrap.
Yang terakhir adalah kode html yang berwarna hita. Tag ini akan kita bahas pada tulisan saya yang berikutnya yaitu membuat link dan memasukkan gambar dalam halaman website.