Modul Ajar Informatika SMA - Pengenalan HTML

Apa itu HTML?
HTML adalah bahasa markup standar untuk membuat halaman website. Bahasa ini
berfungsi untuk membuat struktur website hingga menyusun format teks dan gambar
pada halaman web.

Cara kerja HTML
Aturan pertama penulisan code HTML adalah mengapit teks dengan tag. Tag dapat
memberikan makna kepada teks seperti pada judul atau tautan.
Sebagian besar element HTML memerlukan sepasang tag, yaitu tag pembuka dan tag
penutup.
Kode
<h1> Hello World! </h1>
<p> SMA Islam Diponegoro </p>
Tampilan browser
Hello World!
SMA Islam Diponegoro

Tag HTML
Tag Deskripsi
<html> ... </html> Menandai awal dan akhir dari dokumen HTML.
<head> ... </head> Bagian yang berisi informasi tentang halaman, seperti judul yang ditampilkan di
browser dan tautan ke CSS.
<title> ... </title> Digunakan di dalam elemen <head> untuk menentukan judul halaman yang akan
ditampilkan di bilah judul peramban.
<body> ... </body> Berisi konten yang akan ditampilkan kepada pengguna, seperti teks, gambar,
tautan, formulir, dan lainnya.
<h1> ... </h1>,
<h2> ... </h2>, dst
Menandai judul atau kepala bagian (heading).
<p> ... </p> Memformat teks menjadi paragraf.
<img src=“...”> Menyisipkan gambar dalam halaman.
<a href=“...”> Membuat tautan atau link ke halaman lain.

Struktur HTML
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>

Tag Judul
Heading biasa digunakan untuk membuat judul pada halaman web.
Tag yang digunakan adalah <Hn> dengan nilai n antara 1 sampai dengan 6.
Semakin besar nilai n maka semakin kecil huruf yang tercetak.
<h1> ... </h1>
<h2> ... </h2>
<h3> ... </h3>
<h4> ... </h4>
<h5> ... </h5>
<h6> ... </h6>

Tag Paragraf
Untuk membuat paragraph pada halaman web gunakan tag <p>….</p>.
<p> Ini adalah contoh tag paragraf </p>

Latihan 1
Buatlah halaman HTML pertama dengan nama file latihan1.html dengan skrip seperti dibawah:
<html>
<head>
<title>Halaman Latihan 1</title>
</head>
<body>
<h1>Hello World!</h1>
<p>Tulisan HTML Pertamaku</p>
</body>
</html>

List HTML
List merupakan bentuk yang umum yang biasa digunakan untuk menguraikan daftar
sesuatu.
Jenis-jenis list dalam HTML ada dua:
1. Unordered List (Bulleted List)
2. Ordered List (Numbering List)

Unordered List
Unordered List (Bulleted List) adalah suatu daftar yang tidak memperhatikan
urutan dari item-item pada daftar tsb.
Untuk membuat Bulleted List kita gunakan tag <ul>…</ul> dan tag <li>…</li> yang
menyatakan daftar item.
<ul>
<li> item 1 </li>
<li> item 2 </li>
<ul>

Unordered List
<ul>
<li>Item pertama</li>
<li>Item kedua</li>
<ul>
<li>sub item pertama</li>
<li>sub item kedua</li>
<ul>
<li>sub sub item pertama</li>
<li>sub sub item kedua</li>
<li>sub sub item ketiga</li>
</ul>
</ul>
</ul>

Ordered List
Ordered List (Numbering List) adalah suatu daftar yang diawali dengan nomor yang
berurutan.
Untuk membuat Numbered List gunakanlah tag <OL>…</OL> dan tag <LI>…</LI>
yang menyatakan daftar item.
<ol>
<li> item 1 </li>
<li> item 2 </li>
<ol>

Ordered List
<ol>
<li>Item kedua</li>
<ol>
<ol>
</ol>
</ol>
</ol>

Latihan 2
Ketikkan skrip yang digunakan sebagai contoh tadi ke dalam file HTML-mu
Ordered list
<ol>
<li>Item kedua</li>
<ol>
<ol>
</ol>
</ol>
</ol>
Unordered list
<ul>
<li>Item kedua</li>
<ul>
<ul>
</ul>
</ul>
</ul>

Menyisipkan Gambar
Untuk menyisipkan gambar pada sebuah halaman web gunakan tag <IMG SRC =
“NAMA FILE GAMBAR”>
Memiliki atribut ALT yang digunakan sebagai tampilan gambar apabila gambar tidak
dapat ditampilkan.
Contoh: <IMG SRC=“gambar.jpg” alt=“Gedung SMA Islam Diponegoro” >
<img src=“nama file gambar” alt=“nama alternatif gambar”>

Menyisipkan Gambar
<img src=“kucing.jpg” alt=“Foto Kucing”> <img src=“kucing.jpg” alt=“Foto Kucing”>
Jika gambar tidak ditemukan

Latihan 3
Buat halaman HTML dengan konten seperti berikut

Modul Ajar Informatika SMA - Pengenalan HTML

More Related Content

Similar to Modul Ajar Informatika SMA - Pengenalan HTML

Modul Ajar Informatika SMA - Pengenalan HTML