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.
Sebagai
tambahan, untuk mencetak karakter yang merupakan tag, kita perlu menggunakan
entitas. Contohnya, karakter < dinyatakan dengan < dan karakter >
dinyatakan dengan >.
- 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.
<html>
<head>
<title>Membuat
Halaman Web Sederhana</title>
</head>
<br/>
<br/>
<body bgcolor="red">
<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>
</html>
</html>
0 komentar:
Posting Komentar