Assalamualaikum wr wb
Setelah kemarin kita membahas mengenai struktur dasar pada HTML, sekarang kita akan membahas mengenai tag-tag yang ada pada HTML. Untuk lebih jelasnya langsung saja kita bahas mengenai tag yang ada pada HTML.
Berikut ini adalah tabel tag-tag HTML dan fungsinya:
Tag Utama
Tag
|
Atribut
|
Deskripsi
|
<html> </html>
|
Baris paling atas dari setiap file HTML
| |
<head> </head>
|
Informasi umum dari sebuah halaman web
| |
<title> </title>
|
Judul dari sebuah halaman web. Terdapat pada head
| |
<body> </body>
|
Background
Bgcolor
Bgsound
Font
Link
Alink
Vlink
Top margin
Left margin
Margin height
Margin width
|
Settingan atribut untuk seluruh dokumen
|
Contoh penggunaan:
<html>
<head>
<title>Blog Tutorial CatatanKu</title>
</head>
<body>
WebSite Tutorial CatatanKu
</body>
</html>
Hasil:
Modifikasi Teks
Tag
|
Deskripsi
|
<b> </b>
|
Bold (Untuk menebalkan teks)
|
<i> </i>
|
Italic (Untuk memiringkan teks)
|
<u> </u>
|
Underline (Memberikan garis bawah pada teks)
|
<pre> </pre>
|
Preformatted teks (untuk memberikan pengaruh terhadap penggunaan tombol Enter, Tab, Spasi (lebih dari 1 spasi) pada halaman web)
|
<h1> </h1>
|
Header 1 (ukuran teks judul pada tingkat 1)
|
<h2> </h2>
|
Header 2 (ukuran teks judul pada tingkat 2)
|
<h3> </h3>
|
Header 3 (ukuran teks judul pada tingkat 3)
|
<h4> </h4>
|
Header 4 (ukuran teks judul pada tingkat 4)
|
<h5> </h5>
|
Header 5 (ukuran teks judul pada tingkat 5)
|
<h6> </h6>
|
Header 6 (ukuran teks judul pada tingkat 6)
|
<sub> </sub>
|
Subscript (memberikan efek pangkat di bawah)
|
<sup> </sup>
|
Superscript (memberikan efek pangkat di atas)
|
<small> </small>
|
Untuk mengecilkan huruf
|
<big> </big>
|
Untuk membesarkan huruf
|
<s> </s>
|
Untuk memberikan coretan pada teks
|
<tt> </tt>
|
Memberikan efek mesin tik pada teks
|
Contoh penggunaan:
<html>
<head>
<title>Blog Tutorila CatatanKu</title>
</head>
<body>
<h1>Contoh menggunakan header 1</h1>
<h2>Contoh menggunakan header 2</h2>
<h3>Contoh menggunakan header 3</h3>
<h4>Contoh menggunakan header 4</h4>
<h5>Contoh menggunakan header 5</h5>
<h6>Contoh menggunakan header 6</h6>
<pre>
ini merupakan contoh sebuah paragraf menggunakan tag < p r e > dan
terdapat tag-tag lain didalamnya seperti:
tag <b>. . .</b> => untuk <b>menebalkan</b> teks
tag <i>. . .</i> => untuk <i>memiringkan</i> teks
tag <u>. . .</u> => untuk <u>menggarisbawahi</u> teks
tag <sup>. . .</sup> => membuat teks super<sup>script</sup>
tag <sub>. . .</sub> => membuat teks sub<sub>script</sub>
tag <small>. . .</small> => untuk <small>mengecilkan</small> teks
tag <big>. . .</big> => untuk <big>membesarkan</big> teks
tag <s>. . .</s> => untuk <s>mencoret</s> teks
tag <tt>. . .</tt> => memberikan efek font <tt>mesin tik</tt>
dengan menggunakan
E
N
T
E
R
untuk berpindah ke baris selanjutnya atau untuk memberikan jarak
dan tab untuk membuat jarak seperti i n i.
</pre>
</body>
</html>
Hasil:
Font
Tag
|
Atribut
|
Deskripsi
|
<font> </font>
|
Color
Size
face
|
Mengubah gaya huruf dalam halaman web
|
Size => untuk mengatur ukuran suatu teks.
Color => untuk mengatur warna pada teks, pendefinisian warna dapat dilakukan dengan dua cara yaitu, melalui nama warna atau menggunakan nilai RGB warna.
Face => untuk mengubah jenis font.
Contoh penggunaan:
<html>
<head>
<title>Blog Tutorial CatatanKu</title>
</head>
<body>
color menggunakan nama warna
<hr color="red">
<font color="green" size="20pt" face="Arial"> WebSite Tutorial CatatanKu </font>
<br> <hr color="red"> <br>
color menggunakan nilai RGB warna
<hr color="#ff0000">
<font color="#8A2BE2" size="20pt" face="Arial"> WebSite Tutorial CatatanKu</font>
<hr color="#ff0000">
</body>
</html>
Hasil:
Sekian postingan kali ini, selengkapnya akan dibahas pada postingan selanjutnya. Semoga bermanfaat dan seperti biasa jangan lupa bahagia.
0 komentar