Struktur Dokumen HTML
Dokumen HTML harus diawali dengan tag <html> dan ditutup dengan tag </html> . selain itu dokumen HTML juga memiliki tiga pasang tag yang merupakan bagian utama HTML.
- Tag <head> dan </head>: digunakan untuk menyatakan informasi mengenai dokumen HTML
- Tag <title> dan </title>: digunakan untuk member judul pada title browser.
- Tag <body> dan </body>: digunakan untuk menyatakan seluruh isi pada halaman HTML, baik dalam bentuk teks, garis, gambar, table dan sebagainya.
Elemen HTML
Selain bagian utama diatas, dokumen HTML juga memiliki elemen-elemen lain yang dapat digunakan.
- Penulisan komentar: dinyatakan dengan tag <!-- dan diakhiri dengan tag -->
- Heading: didefinisikan menggunakan tag <hn> dan diakhiri dengan </hn>, dimana n menyatakan tipe heading dengan nilai 1-6. Elemen heading menyediakan atribut align yang dapat digunakan untuk mengatur posisi teks. <h1 align=”right”>teks</h1>
- Paragraph: dipresentasikan dengan tag <p>. Elemen paragraph ini juga memilii atribut align yang digunakan untuk menentukan paragraph tersebut rata kiri, rata tengah, atau rata kanan. <p align=”left”>
- Baris baru: pembuatan baris baru tidak harus selalu dengan paragraph. Sebagai gantiya gunakan tag line break <br/>
- Fontase: digunakan untuk mengatur font. Seperti ketebalan, huruf miring, garis bawah dan lain-lain. Berikut contoh fontase:
- <strong> dan </strong>: digunakan untuk mencetak huruf tebal.
- <i> dan </i>: digunakan untuk mencetak huruf miring.
- <u>dan </u>: digunakan untuk mencetak huruf bergaris bawah.
- Preformatted text: digunakan untuk menampilkan teks apa adanya. Dinyatakan dengan pasangan tag <pre> dan </pre>.
- Garis horizontal: dinyatakan dengan pasangan tag <hr> dan </hr>.
- List: html mendukung list dalam bentuk terurut (ordered, dinyatakan dengan <ol> dan </ol>, tak terurut (unordered, dinyatakan dengan <ul> dan </ul>, dan definisi (definition, dinyatakan dengan <dl> dan </dl>. Untuk setiap bentuk list ini dinyatakan melalui tag <li> dan </li> yang mempresentasikan list item.
- Pewarnaan: digunakan untuk memberi warna pada background. Dinyatakan dengan atribut bgcolor pada tag <body>. Atribut ini dapat diisi dengan nama warna atau kode heksa decimal. Selain itu background juga dapat diisi dengan gambar, yakni dengan atribut background dan sebutkan nama gambarnya.
- Gambar: untuk menyisipkan gamabar HTML menyediakan tag <img> yang didukung sejumlah atribut.
Halaman Web Sederhana
Dari penjelasan diatas, berikut ini contoh kode untuk membuat halaman HTML sederhana.
<! DOCTYPE html PUBLIC "--//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en" lang="en">
<head>
<title>Membuat Halaman Web Sederhana</title>
</head>
<br/>
<br/>
<body background="http://localhost/modul-1/Background.jpg">
<h1 align="center">Halaman Web Sederhana</h1>
<br/>
<img src="http://localhost/modul-1/bebek.gif" border=2 align="left"/>
<hr color="blue"/>
<p>
<font color="blue"/>
<strong>
lorem ipsum dolor sit amet, consecture adipisicing elit sed do eiusmod tempor incididunt it laborre et dolore mafna aliqua.
<br/>
lorem ipsum dolor sit amet, <i>consecteture adipisicing elit sed do eiusmod tempor incididunt</i> it labore et dolore magna aliqua.
<br/>
lorem ipsum dolor sit amet, consecteture adipisicing elit sed do eiusmod tempor incididunt it labore et dolore magna aliqua.
<br/>
<br/>
<u>lorem ipsum dolor sit amet, consecteture adipisicing elit sed do eiusmod tempor incididunt it labore et dolore magna aliqua.</u>
<br/>
lorem ipsum dolor sit amet, consecteture adipisicing elit sed do eiusmod tempor incididunt it labore et dolore magna aliqua.
<br/>
<ol>
<li>lorem ipsum dolor sit amet, consecteture adipisicing elit sed do eiusmod tempor incididunt it labore et dolore magna aliqua.</li>
<br/>
<li>lorem ipsum dolor sit amet, consecteture adipisicing elit sed do eiusmod tempor incididunt it labore et dolore magna aliqua.</li>
</ol>
</strong>
</font>
<hr color="blue"/>
<br/>
<hr color="blue" width="200" align="right"/>
<br/>
<img src="http://localhost/modul-1/muslimah.jpg" border=3 align="right"/>
</body>
0 komentar:
Posting Komentar