HTML adalah bahasa markup
untuk menggambarkan dokumen web ( halaman web ) .HTML singkatan dari Hyper Text
Markup Language.Sebuah bahasa markup adalah seperangkat tag markup.Dokumen HTML
dijelaskan oleh tag HTML.Setiap tag HTML menjelaskan isi dokumen yang berbeda.Contoh
HTML yang sederhana:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Tanggal
30</h1>
<p>Tanggal
30</p>
</html>
|
Hasilnya:
Tanggal
30
Tanggal 30
|
Penjelasan:
- Teks antara < html > dan < / html > menggambarkan sebuah dokumen HTML
- Teks antara < head> dan < / head> memberikan informasi tentang dokumen
- Teks antara < title> dan < / title> memberikan judul untuk dokumen
- Teks antara < body> dan < / body> menggambarkan isi halaman yang terlihat
- Teks antara < h1 > dan < / h1 > menggambarkan judul
-
Teks antara < p > dan < / p > menggambarkan sebuah paragraf
Dengan menggunakan
deskripsi ini , web browser dapat menampilkan dokumen dengan judul dan paragraf.
HTML Tag
HTML Tag adalah kata kunci ( nama tag ) yang dikelilingi oleh kurung sudut :
< tagname
> konten < / tagname >
- HTML Tag biasanya datang berpasangan seperti < p > dan < / p >
- Tag pertama dalam pasangan adalah tag awal , tag kedua adalah tag akhir
- Tag akhir ditulis seperti tag awal , tetapi dengan garis miring sebelum nama tag
Tag awal
sering disebut tag pembuka dan tag akhir sering disebut tag penutup.
HTML Pos
Judul HTML
didefinisikan dengan < h1 > sampai < h6 > tag :
<html>
<body>
<h1>MELODRAMATIC
1</h1>
<h2>MELODRAMATIC
2</h2>
<h3>MELODRAMATIC
3</h3>
<h4>MELODRAMATIC
4</h4>
<h5>MELODRAMATIC
5</h5>
<h6>MELODRAMATIC
6</h6>
</body>
</html>
|
Hasilnya:
MELODRAMATIC 1
MELODRAMATIC 2
MELODRAMATIC 3
MELODRAMATIC 4
MELODRAMATIC 5
MELODRAMATIC 6
|
HTML Paragraf
Paragraf
HTML didefinisikan dengan tag <p> :
<html>
<body>
<p>Tanggal 30.</p>
<p>Tanggal 30.</p>
<p>Tanggal 30.</p>
</body>
</html>
|
Hasilnya:
Tanggal 30.
Tanggal
30.
Tanggal
30.
|
HTML Aturan Horizontal
Tag < hr > menciptakan garis horizontal
dalam sebuah halaman HTML.
Contoh :
<html>
<body>
<p>Tanggal 30</p>
<hr>
<p>Tanggal 30</p>
<hr>
<p>Tanggal 30</p>
</body>
</html>
|
Hasilnya :
Tanggal 30
Tanggal 30
Tanggal 30
|
HTML Text Size
Properti font-size mendefinisikan ukuran teks yang
akan digunakan untuk elemen HTML :
Contoh :
<html>
<body>
<h1
style="font-size:200%">
Tanggal
30</h1>
<p
style="font-size:100%">
Tanggal
30</p>
</body>
</html>
|
Hasilnya:
Tanggal 30
Tanggal 30
|
HTML Format
HTML
menggunakan unsur-unsur seperti < b > dan < i > untuk memformat
output, seperti teks tebal atau miring .
HTML Bold (Tebal)
HTML Bold <
b > mendefinisikan teks tebal.
Contoh:
<html>
<body>
<p>Tanggal 30 normal</p>
<p><b>Tanggal 30
Tebal</b></p>
</body>
</html>
|
Hasilnya:
Tanggal
30 normal
Tanggal 30 Tebal
|
HTML Italic (Miring)
HTML < i
> mendefinisikan teks miring.
Contoh:
<html>
<body>
<p>Tanggal 30 normal</p>
<p><i>Tanggal 30
miring</i></p></body>
</html>
|
Hasilnya:
Tanggal
30 normal
Tanggal 30 miring
|
Daftar HTML
HTML dapat
memiliki daftar Unordered, daftar Memerintahkan, atau Deskripsi daftar:
Daftar HTML unordered
Daftar
unordered dimulai dengan <ul> tag. Setiap item daftar dimulai dengan
<li> tag.Daftar item akan ditandai dengan peluru (lingkaran hitam kecil).
Contoh:
<html>
<body>
<h2>Daftar</h2>
<ul>
<li>Tanggal</li>
<li>Tiga</li>
<li>Puluh</li>
</ul>
</body>
</html>
|
Hasilnya:
Daftar
·
Tanggal
·
Tiga
·
Puluh
|
Unordered HTML List - The Style Attribute
- Disc
Contoh:
<html>
<body>
<h2>Lingkaran Bulat Hitam(asli dari program)</h2>
<ul style="list-style-type:disc">
<li>Tanggal</li>
<li>Tiga</li>
<li>Puluh</li>
</ul>
</body>
</html>
|
Hasilnya:
Lingkaran Bulat Hitam
· Tanggal
· Tiga
· Puluh
|
- Circle
Contoh:
<html>
<body>
<h2>Lingkaran Bulat Putih</h2>
<ul style="list-style-type:circle"> <li>Tanggal</li>
<li>Tiga</li>
<li>Puluh</li>
</ul>
</body>
</html>
|
Hasilnya:
Lingkaran Bulat Putih
o Tanggal
o Tiga
o Puluh
|
- SQUARE
Contoh:
<html>
<body>
<h2>Kotak Hitam</h2>
<ul style="list-style-type:square">
<li>Tanggal</li>
<li>Tiga</li>
<li>Puluh</li>
</ul>
</body>
</html>
|
Hasilnya:
Kotak Hitam
§ Tanggal
§ Tiga
§ Puluh
|
No comments:
Post a Comment