HTML-materi-2 : Element

Bagi yang baru pertama kali bergabung belajar bareng tentang HTML di blog ini, silakan baca dulu : Berkenalan dengan HTML.

Kali ini kita akan belajar mengenai element di HTML. Sesuai yang telah disampaikan pada materi sebelumnya, struktur element HTML adalah sebagai berikut :

<tagname>Content dituliskan di sini...</tagname>

Heading

HTML heading merupakan salah satu contoh element. HTML heading didefinisikan dengan tag <h1> sampai dengan <h6> dengan <h1> adalah heading terbesar (dan diasumsikan heading terpenting).

Contoh 1 :

<!DOCTYPE html>
<html>
    <body>
        <h1>Ini adalah heading 1</h1>
        <h2>Ini adalah heading 2</h2>
        <h3>Ini adalah heading 3</h3>
        <h4>Ini adalah heading 4</h4>
        <h5>Ini adalah heading 5</h5>
        <h6>Ini adalah heading 6</h6>
    </body>
</html>

Hasilnya :

Paragraf

HTML paragraf diidentifikasi dengan tag <p>.

Contoh 2 :

<!DOCTYPE html>
<html>
    <body>
        <p>Ini adalah paragraf ke-1</p>
        <p>Ini adalah paragraf ke-2</p>
        <p>Ini adalah paragraf ke-3</p>
        <p>Ini adalah paragraf ke-4</p>
    </body>
</html>

Hasilnya :

Link

HTML link didefinisikan dengan <a>

Alamat link yang dituju dicantumkan dalam attribute href. Attribute digunakan untuk menyediakan informasi tambahan mengenai HTML element.

Notasinya :

<a href="link-address">Content...</a>

Contoh 3 :

<!DOCTYPE html>
<html>
    <body>
        <h2>HTML Link</h2>
        <p>Berikut contoh HTML link :</p>
        <a href="https://blogisnanto.blogspot.com/">Blog Berbagi Inspirasi</a>
    </body>
</html>

Hasilnya :

Ketika link Blog Berbagi Inspirasi diklik, maka akan terbuka blog yang dimaksud. Link inilah yang disebut sebagai hypertext sedangkan tag dan attribute disebut sebagai markup. Inilah dasar penamaan HTML.

Image

HTML image didefinisikan dengan tag <img>.

Tambahan informasi yang dicantumkan dalam attribute adalah :

sumber file (source) : src
teks alternatif : alt
lebar : width
tinggi : height

Contoh 4 :

<!DOCTYPE html>
<html>
    <body>
        <h2>HTML Image</h2>
        <p>Contoh HTML Image :</p>
        <img src="html.png" alt="https://blogisnanto.blogspot.com" width="400" height="250">
    </body>
</html>

Hasilnya :

Break

Break didefinisikan dengan tag <br> merepresentasikan "enter". <br> merupakan contoh empty element (elemen kosong), yaitu elemen yang tidak memiliki konten.

Contoh 5 :

<!DOCTYPE html>
<html>
    <body>
        <h2>Contoh line break</h2>
        <p>Baris ke-1<br>Baris ke-2<br>Baris ke-3<br>Baris ke-4</p>
    </body>
</html>

Hasilnya :

Demikian mengenai element pada HTML. Silakan dicoba dan dikembangkan contoh-contoh di atas. Apa yang disampaikan sekedar sebagai gambaran, diperlukan improvement lebih jauh lagi dari teman-teman.

Semoga bermanfaat.

HTML-materi-2 : Element

Heading

Paragraf

Link

Image

Break

0 Response to "HTML-materi-2 : Element"

Post a Comment