Struktur Dan Aturan Penulisan HTML
Penulisan script HTML diawali dengan <html> dan diakhiri dengan </html>.
Dalam penulisannya, tag HTML diapit dengan dua karakter kurung siku “<“ dan “>”.
Jika dalam suatu tag terdapat tag lagi maka penulisan tag akhir tidak boleh bersilang dan harus berurutan.
Contoh:
<b><i>huruf tebal dan miring </i></b>.
Tag HTML tidak case sensitive.
Struktur HTML dibagi menjadi dua bagian, yaitu:
Bagian Kepala (head)
Memuat informasi mengenai kepala dokumen.
Bagian Badan (body)
Memuat informasi mengenai badan dokumen.
Struktur Utama Penulisan HTML
<html>
<head>
<!-- Bagian Head --!>
</head>
<body>
<!-- Bagian Body --!>
</body>
</html>
Contoh:
<html>
<head>
<title> belajar html </title>
</head>
<body>
Belajar HTML dengan mudah
</body>
</html>
Bagian Head
Judul
Merupakan judul dari suatu dokumen HTML.
<title>…judul…</title>
URL
Merupakan tag yang menyatakan URP asal suatu dokumen HTML.
<base href=“…..”>
LINK
Merupakan tag untuk menghubungkan antara dokumen dengan dokumen lainnya.
<link href=“…..”>
STYLE
Merupakan tag yang mendefinisikan style dari dokumen HTML
<style =“ ….”>
Format Teks
Font
Tag font memiliki beberapa tag macam nilai, di antaranya:
1. “face” atau jenis font
2. “size” atau ukuran font
3. “color” atau warna font
4. “style” atau style font
Contoh:
<font face=“verdana” size=“4px” color=“green” style=“background-color:”#0066CC”> teks dokumen </font>
Paragraf
Paragraf digunakan untuk membuat teks dokumen yang berbentuk paragraf.
<p> teks dalam paragraf </p>
Perataan
digunakan untuk mengatur perataan teks dalam sebuah paragraf dalam dokumen web yang dibuat.
<align= …..> teks
Nilai dari perataan adalah
a. Rata kanan = Right
b. Rata kiri = Left
c. Rata tengah = Center
d. Rata kanan-kiri = Justify
Line Break
adalah pemenggalan atau pemutusan kalimat.
1. <hr>
Property yang di miliki <hr> adalah
a. align untuk perataan garis
b. size untuk ukuran dari garis
c. color untuk warna garis
d. width untuk lebar garis
<hr align=“…” size=“…” color=“…” width=“…”>
2. <br> untuk pemenggalan baris dalam sebuah kalimat.
<p> kalimat satu <br> kalimat dua <br></p>
Komentar
digunakan untuk memberikan komentar dalam dokumen web yang tidak akan ditampilkan dalam browser.
<!-- Komentar --!>
Format Heading
Heading dalam HTML sama seperti dalam Ms. Word.
<H1> sampai dengan level heading 6 atau <H6>
Contoh:
<html>
<head>
<title>Web Blog System</title>
</head>
<body>
<h1> format teks </h1>
<font face =“verdana” size=“4 px” color=“green” style=“background-color:”#0066CC”>format teks </p>
<hr align=“center” size=“2” color=“red”>
<p align=“left”>format teks1<br>format teks2 <br></p>
<!-- format teks --!>
</body>
</html>
Daftar
Digunakan untuk menampilkan informasi-informasi dalam bentuk opsi.
Membuat daftar tak berurutan
Sintaks:
<UL>.....</UL>: untuk membuat daftar tak berurutan
<LI>…….</LI> : isi daftar pilihan
Membuat daftar berurutan
Sintaks:
<OL>…..</OL>
<LI>……</LI>
Contoh:
<html>
<head>
<title>Penggunaan Daftar</title>
</head>
<body>
Daftar belanjaan:
<ul>
<li>bawang putih
<li>bawang merah
<li> cabe
</ul>
Yang Tidak Dibeli
<ol type=a>
<li>kecambah
<li>daging kuda
<li> daging semut
</body>
</html>
Dalam penulisannya, tag HTML diapit dengan dua karakter kurung siku “<“ dan “>”.
Jika dalam suatu tag terdapat tag lagi maka penulisan tag akhir tidak boleh bersilang dan harus berurutan.
Contoh:
<b><i>huruf tebal dan miring </i></b>.
Tag HTML tidak case sensitive.
Struktur HTML dibagi menjadi dua bagian, yaitu:
Bagian Kepala (head)
Memuat informasi mengenai kepala dokumen.
Bagian Badan (body)
Memuat informasi mengenai badan dokumen.
Struktur Utama Penulisan HTML
<html>
<head>
<!-- Bagian Head --!>
</head>
<body>
<!-- Bagian Body --!>
</body>
</html>
Contoh:
<html>
<head>
<title> belajar html </title>
</head>
<body>
Belajar HTML dengan mudah
</body>
</html>
Bagian Head
Judul
Merupakan judul dari suatu dokumen HTML.
<title>…judul…</title>
URL
Merupakan tag yang menyatakan URP asal suatu dokumen HTML.
<base href=“…..”>
LINK
Merupakan tag untuk menghubungkan antara dokumen dengan dokumen lainnya.
<link href=“…..”>
STYLE
Merupakan tag yang mendefinisikan style dari dokumen HTML
<style =“ ….”>
Format Teks
Font
Tag font memiliki beberapa tag macam nilai, di antaranya:
1. “face” atau jenis font
2. “size” atau ukuran font
3. “color” atau warna font
4. “style” atau style font
Contoh:
<font face=“verdana” size=“4px” color=“green” style=“background-color:”#0066CC”> teks dokumen </font>
Paragraf
Paragraf digunakan untuk membuat teks dokumen yang berbentuk paragraf.
<p> teks dalam paragraf </p>
Perataan
digunakan untuk mengatur perataan teks dalam sebuah paragraf dalam dokumen web yang dibuat.
<align= …..> teks
Nilai dari perataan adalah
a. Rata kanan = Right
b. Rata kiri = Left
c. Rata tengah = Center
d. Rata kanan-kiri = Justify
Line Break
adalah pemenggalan atau pemutusan kalimat.
1. <hr>
Property yang di miliki <hr> adalah
a. align untuk perataan garis
b. size untuk ukuran dari garis
c. color untuk warna garis
d. width untuk lebar garis
<hr align=“…” size=“…” color=“…” width=“…”>
2. <br> untuk pemenggalan baris dalam sebuah kalimat.
<p> kalimat satu <br> kalimat dua <br></p>
Komentar
digunakan untuk memberikan komentar dalam dokumen web yang tidak akan ditampilkan dalam browser.
<!-- Komentar --!>
Format Heading
Heading dalam HTML sama seperti dalam Ms. Word.
<H1> sampai dengan level heading 6 atau <H6>
Contoh:
<html>
<head>
<title>Web Blog System</title>
</head>
<body>
<h1> format teks </h1>
<font face =“verdana” size=“4 px” color=“green” style=“background-color:”#0066CC”>format teks </p>
<hr align=“center” size=“2” color=“red”>
<p align=“left”>format teks1<br>format teks2 <br></p>
<!-- format teks --!>
</body>
</html>
Daftar
Digunakan untuk menampilkan informasi-informasi dalam bentuk opsi.
Membuat daftar tak berurutan
Sintaks:
<UL>.....</UL>: untuk membuat daftar tak berurutan
<LI>…….</LI> : isi daftar pilihan
Membuat daftar berurutan
Sintaks:
<OL>…..</OL>
<LI>……</LI>
Contoh:
<html>
<head>
<title>Penggunaan Daftar</title>
</head>
<body>
Daftar belanjaan:
<ul>
<li>bawang putih
<li>bawang merah
<li> cabe
</ul>
Yang Tidak Dibeli
<ol type=a>
<li>kecambah
<li>daging kuda
<li> daging semut
</body>
</html>
0 komentar