HTML (Hypertext Markup Language) merupakan bahasa markup, bukan bahasa pemrograman. Bahasa markup adalah bahasa yang mengkombinasikan teks dan informasi tambahan mengenai teks tersebut. HTML merupakan dokumen standar yang digunakan untuk mendesain halaman web.
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>
1 komentar:
mksih boz
Posting Komentar