HTML & CSS | Part 2

Bekerja Dengan Konten HTML

Diambil dari Penjelasan camp.114
https://youtu.be/OZ3ESpSEGZc

Sebelumnya kita membahas dasar dari html , kali ini kita akan membahas tentang elemen html yang lebih yang dapat digunakan untuk membuat konten berbasis text.

Heading <h1>..</h6>

Di sesi sebelumnya kita sudah menggunakan tag ini <h1> dan <h4>.

<h1> Test </h1>
<h2> Test </h2>
<h3> Test </h3>
<h4> Test </h4>
<h5> Test </h5>
<h6> Test </h6>

Paragraphs <p> </p>

Paragraph adalah salahsatu element penting dalam membangun konten berbasis text. tag ini bekerja dengan memerintahkan browser untuk memberi satu spasi pad sebelum dan sesudah tag <p>

<main>
    <section>
        <h1>Emery Tak Kapok Melatih di Liga Inggris</h1>
        <p>Pelatih Spanyol Unai Emery masih menjalani karier yang cukup sulit di Arsenal. Meski begitu, Emery
            mengaku mau-mau saja melatih lagi di Liga Inggris.</p>
    </section>
    <section>
        <h1>Angkat Trofi di Stadion Kosong Akan Terasa Aneh Bagi Liverpool</h1>
        <p>Liverpool sedikit lagi akan menjuarai Liga Inggris musim ini. Namun jika hal itu terjadi, The Reds
            kemungkinan akan merayakannya di stadion kosong.</p>
    </section>
</main>

Line Breake <br> & Horizontal Rule <hr>

Karena pada sesi sebelumnya kita telah menggunakan line break, maka sekalian saja kita bahas<br> tag artinya membuat satu line breake, tag <hr> mempunyai fungsi yang sedikit mirip, tag <hr> ini akan membuat line break tetapi dengan menambahkan garis horizontal diantara pemisahan baris.

<main>
    <section>
        <h1>Emery Tak Kapok Melatih di Liga Inggris</h1>
        <br>
        <p>Pelatih Spanyol Unai Emery masih menjalani karier yang cukup sulit di Arsenal. Meski begitu, Emery mengaku mau-mau saja melatih lagi di Liga Inggris.</p>
    </section>
    <hr>
    <section>
        <h1>Angkat Trofi di Stadion Kosong Akan Terasa Aneh Bagi Liverpool</h1>
        <br>
        <p>Liverpool sedikit lagi akan menjuarai Liga Inggris musim ini. Namun jika hal itu terjadi, The Reds
            kemungkinan akan merayakannya di stadion kosong.</p>
    </section>
</main>

List

Digunakan untuk membangun konten bebasis list,yang termasuk dalam elemen list ini adalah tag tag berikut ini :

• <ol> ordered list

• <ul> unordered list

• <li> list item

• <dl> definition list

• <dt> definition term

• <dd> definition data

sekarang kita akan membahas tag <li> <ol> dan <ul>, tag-tag ini digunakan untuk membangun item list ciri khasnya adalahmenggunakan notasi dot untuk unoreder atau angka untuk ordered list, peggunaanya seperti contoh berikut :

<p>penggunaan unordered list:</p>
<ol>
  <li>buku</li>
  <li>pensil</li>
  <li>tas</li>
</ol>

<p>penggunaan unordered list:</p>
<ul>
  <li>buku</li>
  <li>pensil</li>
  <li>tas</li>
</ul>

Tag-tag dalam kategori ini mempunyai attribute :

• unorder
  • type : defaultnya bullet type (disc, circle, square)
• ordered
  • type : ordering dari list (1, A, a, I, or i)
  • reversed : urutan (backward)
  • start : menentukan angka awal (for number type)

Sekarang kita akan membahas tag-tag selanjutnya yaitu <dl> <dt> dan <dd>, tag tag ini digunakan untuk membangun list dengan koten dan deskripsi yang berhubungan misal seperti daftarpustaka pada buku, seperti :

<dl>
                    <dt>
                        <strong>Emery Tak Kapok Melatih di Liga Inggris</strong>
                    </dt>
                    <dd>
                        <p>Pelatih Spanyol Unai Emery masih menjalani karier
                            yang cukup sulit di Arsenal. Meski begitu, Emery
                            mengaku mau-mau saja melatih lagi di Liga Inggris.</p>
                    </dd>


                    <dt>
                        <strong>Angkat Trofi di Stadion Kosong Akan Terasa Aneh Bagi Liverpool</strong>
                    </dt>
                    <dd>
                        <p>Liverpool sedikit lagi akan menjuarai Liga Inggris
                            musim ini. Namun jika hal itu terjadi, The Reds
                            kemungkinan akan merayakannya di stadion kosong.</p>
                    </dd>
                </dl>