6. Tag Lanjutan HTML

Pada materi ini beberapa akan mengulangi pada bab tag dasar HTML, gpp ya...

1. Tag heading, umumnya ada h1, h2, h3, h4, h5, dan h6

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

2. Paragraf

<p>ini adalah paragraf pertama</p>
<p>ini adalah paragraf kedua</p>

3. ganti baris

ini teks baris pertama
<br />
ini teks baris kedua

4. teks format

<p>Menulis link ke <a href="http://google.com">google.com</a>.</p>
<p><small>menggunakan teks small atau kecil.</small></p>
<p>Teks dengan format <strong>tebal</strong>.</p>
<p>Teks dengan format <em>miring</em>.</p>
<p>Tag abbr dengan title <abbr title="attribute">attr</abbr>.</p>
<p>Ini adalah <sub>subscripted</sub> text.</p>
<p>Ini adalah <sup>superscripted</sup> text.</p>
<p>Kalau saya <ins>masukkan</ins> text.</p>
<p>Eh, kalau mau <del>dicoret</del> teksnya.</p>
<p>Ini <mark>Tandai</mark> teksnya</p>

5. warna teks

<p style="color: #888">warna muted</p>
<p style="color: #008cba">warna agak biru</p>
<p style="color: #E99002">warna agak kuning</p>
<p style="color: #F04124">warna agak merah</p>
<p style="color: #43ac6a">warna agak hijau</p>
<p style="background-color: #43ac6a;color:white;padding:5px">teks dengan background</p>
<p style="border: 1px solid #43ac6a;padding:5px">teks dengan border</p>

6. list atau daftar

List dengan <b>ul</b>
<ul>
    <li>list pertama</li>
    <li>list kedua</li>
    <li>list ketiga</li>
</ul>
<hr />
List dengan <b>ol</b>
<ol>
    <li>list pertama</li>
    <li>list kedua</li>
    <li>list ketiga</li>
</ol>

7. Menampilkan gambar

<img src="http://rasupe.com/f/src/tut_html/539363_4398865377038_1848987734_n.jpg" width="100">

8. membuat tabel

<table border="1">
    <tr>
        <th style="background-color: #43ac6a;color:white;padding:5px">Table heade, Kolom 1</th>
        <th style="background-color: #43ac6a;color:white;padding:5px">Table header, Kolom 2</th>
        <th style="background-color: #43ac6a;color:white;padding:5px">Table header, Kolom 3</th>
    </tr>
    <tr>
        <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
        <td>Baris 1, Kolom 3</td>
    </tr>
    <tr>
        <td>Baris 2, Kolom 1</td>
        <td>Baris 2, Kolom 2</td>
        <td> Baris 2, Kolom 3</td>
    </tr>
    <tr>
        <td> Baris 3, Kolom 1</td>
        <td> Baris 3, Kolom 2</td>
        <td> Baris 3, Kolom 3</td>
    </tr>
    <tr>
        <td> Baris 4, Kolom 1</td>
        <td> Baris 4, Kolom 2</td>
        <td> Baris 4, Kolom 3</td>
    </tr>
</table>

9. Ukuran font

<font size = "1">Font size = "1"</font><br />
<font size = "2">Font size = "2"</font><br />
<font size = "3">Font size = "3"</font><br />
<font size = "4">Font size = "4"</font><br />
<font size = "5">Font size = "5"</font><br />
<font size = "6">Font size = "6"</font><br />
<font size = "7">Font size = "7"</font><br />
<p style="font-size:25px">Font size = 25px</p>

10. Jenis font

<font face = "Times New Roman" size = "5">Times New Roman</font><br />
<font face = "Verdana" size = "5">Verdana</font><br />
<font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br />
<font face = "WildWest" size = "5">WildWest</font><br />
<font face = "Bedrock" size = "5">Bedrock</font><br />
<p style="font-family:arial">ARIAL</p>

11. Teks berjalan

<marquee>contoh marquee, teks jalan</marquee>
<marquee width="50%">contoh marquee, teks jalan 50%</marquee>
<marquee direction = "right">Jalan ke kanan</marquee>
<marquee direction = "up">Jalan ke atas</marquee>

 

Silahkan diketik kode di atas, lalu jalankan. Jika digabung hasilnya seperti di bawah ini:

Mudah bukaaaan..... mari lanjut...