Html Tag: Apa itu HTML?

HTML (Hypertext Markup Language) adalah bahasa pemrograman standar yang digunakan sebagian besar website di dunia. Dalam proses pembuatan website, HTML berperan sebagai tulang punggung yang harus diketahui dan dikuasai oleh setiap web developer. Sekarang, dengan semakin terbukanya akses ke internet, keterampilan untuk membuat website dengan HTML semakin penting bagi siapa saja yang mencari karir di bidang teknologi.

HTML adalah markup language yang terdiri dari elemen-elemen, atribut, dan teks. Markup language berfungsi untuk menunjukkan bagaimana teks yang dimasukkan akan diinterpretasikan oleh browser. Hal tersebut dipengaruhi oleh elemen HTML yang digunakan.

Dalam HTML, keseluruhan cuplikan yang ditulis terstruktur di dalam tags. Tag sendiri adalah kode yang ditempatkan di dalam tanda kurung siku <>. Ada dua jenis tag, yaitu tag pembuka dan tag penutup. Hanya tag pembuka yang diawali dengan karakter garis miring seperti <p>, sedangkan tag penutup selalu diawali dengan karakter garis miring dan ditandai dengan karakter slash </p>.

Tag selanjutnya adalah tag <li> yang digunakan untuk membuat list. li adalah kependekan dari list item. List sendiri terbagi menjadi dua jenis, yaitu numbered list dan bullet list. Numbered list adalah daftar yang diberi nomor, sedangkan bullet list adalah daftar yang diberi simbol seperti titik atau lainnya.

Untuk menggunakan tag <li>, bisa menyertakan tag induk yang cocok seperti <ul> atau <ol>. Ul adalah singkatan dari unordered list (bullet list), sedangkan ol adalah singkatan dari ordered list (numbered list). Berikut adalah contoh penggunaannya:

    
        <ul>
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    

Kode di atas akan menghasilkan bullet list dengan 3 list item yang ditampilkan pada browser.

Agar list item berupa numbered list, tag <ol> dapat digunakan. Pada dasarnya, penggunaan tag <ol> dan tag <ul> sama, hanya saja tampilan list item berbeda. Berikut adalah contoh penggunaannya:

    
        <ol>
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ol>
    

Dalam implementasinya, developer sering menggunakan perpaduan kedua jenis list tersebut demi menghasilkan desain yang lebih menarik pada website.

Saat mengembangkan website, HTML disatukan dengan CSS (Cascading Style Sheets) dan JavaScript untuk menciptakan website yang interaktif dan menarik. HTML sendiri lebih sering digunakan sebagai bahasa markup statis, sedangkan CSS digunakan sebagai bahasa styling, dan JavaScript sebagai bahasa pemrograman yang lebih kompleks.

Dalam rangka meningkatkan keterampilan pengembangan web, penting untuk menguasai HTML sebagai dasar dalam membuat website yang solid dan menarik bagi pengunjung.

Html Tag: Struktur dasar HTML

HTML terdiri dari tag atau tanda, setiap tag tersebut memiliki fungsi untuk membangun suatu halaman web. Pemrograman HTML sangat diperlukan dalam pembuatan website. Selain itu, pemrograman HTML juga digunakan sebagai dasar untuk membuat tampilan website. Nah, untuk memulai pemrograman HTML, ada beberapa tag yang harus dipahami. Salah satunya adalah tag struktur dasar HTML yang sering dipakai sebagai dasar dalam pembuatan website.

Apa itu tag Struktur Dasar HTML?

Tag Struktur Dasar HTML adalah dasar dari pembangunan website. Tag ini dipakai untuk menentukan struktur dasar dari dokumen HTML. Dokumen HTML dibangun berdasarkan tag Struktur Dasar HTML, sebagai contoh: tag html, head, dan body. Tag ini juga memungkinkan untuk menentukan bahasa yang dipakai dalam dokumentasi.

HTML sendiri terdiri dari tag pembuka dan tag penutup, dalam hati mempunyai aturan yang sama dalam menutup atau menutup suatu tag. Berikut ini adalah penjelasan dari 3 tag struktur dasar HTML yang sering dipakai.

tag HTML

Tag html adalah tag yang dibutuhkan dalam pembuatan website, karena tag ini berfungsi untuk menginformasikan bahwa halaman website tersebut akan dibuat dengan menggunakan bahasa HTML. Pemakaian tag html dalam lembar kerja HTML dapat diletakkan pada bagian awal kode dengan format:

< h t m l >

< / h t m l >

tag head

Tag head adalah tag penunjuk letak bagian kepala HTML yang berisi informasi penting dari dokumen HTML. Isi dari tag head ini berupa metadata, link ke berkas CSS, dan informasi penting lainnya. Dalam lembar kerja HTML, tag head biasanya diletakkan di bagian atas setelah tag html. Contoh penggunaan tag head dalam lembar kerja HTML adalah sebagai berikut:

< h e a d >
< t i t l e > Judul Document < / T i t l e >
< / h e a d >

tag body

Tag body merupakan tag penunjuk sebuah halaman HTML, di sini tempat untuk menambahkan elemen yang muncul di halaman website. Misalnya, header, gambar, link, navigasi, paragraf, footer, dan lain-lain. Dalam lembar kerja HTML, elemen-elemen HTML diletakkan di dalam tag body. Contoh penggunaan tag body dalam lembar kerja HTML adalah sebagai berikut:

< b o d y >
< Kode lainnya >
< / b o d y >

Kesimpulan

Dengan mengenal beberapa tag struktur dasar HTML seperti tag html, tag head, dan tag body, maka pembuatan tampilan website yang responsif dan menarik pun dapat tercipta . Tag-tag dasar HTML ini sangat penting dan sering dipakai dalam pembuatan website. Tidak hanya itu, dengan beberapa dasar pemrograman HTML kita juga bisa membangun halaman web sesuai dengan tuntutan bisnis dan selera kreatif. Sekali lagi, pembelajaran HTML ini adalah langkah awal untuk menjadi web developer yang sukses.

Html Tag: Elemen dasar HTML

HTML atau Hyper Text Markup Language merupakan bahasa pemrograman yang digunakan untuk membuat dan mendesain halaman web. HTML memanfaatkan tag untuk mengatur tampilan sebuah website, tag disimpan dalam kurung siku seperti tanda `[]`. Sebagai pemula yang baru belajar HTML, ada beberapa tag dasar yang perlu diketahui. Berikut ini beberapa elemen dasar HTML yang perlu Anda ketahui saat membuat website.

1. Tag ``

Sebelum memulai menulis tag HTML, sebuah dokumen HTML harus dimulai dengan menambahkan tag ``. Tag ini memberitahukan kepada web browser bahwa dokumen tersebut merupakan sebuah dokumen HTML. Tag ini harus ditempatkan di awal dokumen HTML dan sebelum tag html pertama.

2. Tag `` dan ``

Setelah menambahkan tag ``, selanjutnya pembuatan dokumen HTML dimulai dengan menambahkan tag `` dan `

`. Tag `` digunakan untuk menandakan awal dokumen HTML, sedangkan tag `` menyimpan informasi umum tentang dokumen seperti judul halaman, deskripsi, dan informasi metadata lainnya. Tag `` tidak akan ditampilkan pada halaman web, namun sangat diperlukan untuk menambahkan beberapa tag seperti tag `title`, `meta`, dan `link`.

3. Tag `` dan isi

Setelah membuat tag `

`, selanjutnya kita dapat menambahkan tag ``dan isi tulisan pada halaman web. Tag `` mengandung seluruh konten atau isi halaman web dan dituliskan setelah tag ``. Penggunaan tag `` sangat penting untuk menuliskan semua informasi pada halaman web, seperti paragraf, gambar, tabel, dll.

Salah satu tag lain yang perlu diketahui yaitu tag `

` yang digunakan untuk menuliskan paragraf atau teks pada halaman web. Tag `

` memungkinkan kita untuk memisahkan setiap paragraf secara terpisah. Setelah itu, kita dapat menambahkan tag `

` hingga `

` untuk memberi tingkat prioritas penulisan pada halaman web kita, dimana tag `

` memberikan tingkat prioritas tertinggi dan `

` memberikan tingkat prioritas terendah.

4. Tag `` untuk menambahkan gambar

Gambar atau foto merupakan elemen yang sangat penting dalam halaman web. Untuk menambahkan gambar, gunakan tag `` yang berisi atribut `src` untuk menunjukkan alamat link gambar, dan atribut `alt` untuk menunjukkan teks alternatif jika gambar tidak bisa dimuat. Selain itu, tag `` juga dapat ditambahkan atribut lebar dan tinggi untuk menyesuaikan ukuran gambar pada halaman web.

5. Tag `` untuk menambahkan hyperlink

Hyperlink atau tautan merupakan tautan antara satu halaman web ke halaman web lainnya. Untuk menambahkan hyperlink pada teks, gunakan tag `` dimana atribut `href` digunakan untuk menghasilkan tautan yang dapat diklik. Teks yang diberi hyperlink harus diberi tag `` pada bagian depan dan belakang teks, sebagai penanda hyperlink tersebut.

Dalam pembuatan sebuah website, elemen dasar HTML tersebut sangat diperlukan. Anda dapat mempelajari HTML lebih dalam dengan menggunakan tag-tag HTML yang lebih kompleks, untuk menjadikan tampilan website Anda menjadi lebih dinamis dan menarik.

Html Tag: Attribut HTML

HTML atau singkatan dari Hypertext Markup Language adalah bahasa markah yang digunakan untuk membangun suatu halaman web atau website. Dalam HTML, semua elemen yang dibangun mempunyai atribut yang berfungsi untuk mengatur tampilan, ukuran, posisi dan warna dari suatu elemen tersebut.

Terdiri dari berbagai macam atribut yang dapat digunakan pada setiap tag HTML, atribut ini dituliskan di dalam tag bersama dengan sifat atau value atribut yang diinginkan. Ada beberapa tag HTML yang sering digunakan bersama dengan atributnya di Indonesia, yaitu:

1. href
Merupakan atribut yang digunakan pada tag “a” untuk menentukan link yang akan ditampilkan. Biasanya, atribut ini digunakan saat membuat hyperlink pada suatu halaman web. Contoh:

<a href=”https://www.google.com”>Link ke Google</a>

Akan menghasilkan tampilan:

Link ke Google

2. alt
Atribut ini digunakan pada tag “img” dan akan menampilkan suatu teks alternatif dari gambar yang ditampilkan jika gambar tersebut gagal dimuat atau jika pengguna menggunakan aplikasi teks. Ini juga bermanfaat bagi pengguna internet yang mempunyai gangguan penglihatan, karena mereka tidak dapat melihat gambar dengan jelas. Contoh:

<img src=”https://contoh-gambar.jpg” alt=”Contoh gambar”>

Akan menghasilkan tampilan:

3. width
Atribut width digunakan pada tag “table” untuk menentukan lebar tabel yang akan ditampilkan. Contoh:

<table width=”50%”><tr><td>Kolom 1</td><td>Kolom 2</td></tr></table>

Akan menghasilkan tampilan:

Kolom 1

Kolom 2

4. style
Atribut “style” digunakan pada hampir semua tag HTML dan dianggap sebagai atribut paling fleksibel. Atribut ini memungkinkan pengguna HTML membuat efek visual pada suatu halaman web dengan menentukan properti CSS. Properti CSS yang dapat digunakan melalui atribut style adalah warna latar belakang, warna teks, besar dan jenis huruf, inden, dan banyak lagi. Contoh:

<p style=”color: blue; font-size: 20px”>Paragraf dengan style</p>

Akan menghasilkan tampilan:

Paragraf dengan style

Dalam membuat halaman web, tentunya dibutuhkan penggunaan atribut-atribut HTML agar halaman web yang dibuat dapat tampil sesuai dengan keinginan. Dalam menggunakan atribut, perlu diperhatikan properti yang diisikan dan juga tag HTML apa yang digunakan, agar tampilan web terlihat semakin menarik dan terstruktur. Semoga bermanfaat!

HTML Tag: Penggunaan Tag li dalam HTML

HTML atau Hypertext Markup Language adalah bahasa dasar yang digunakan untuk membuat halaman web. Salah satu tag yang penting dalam HTML adalah tag li atau list item. Tag ini digunakan untuk menampilkan daftar item dalam bentuk unordered list atau ordered list.

1. Unordered List

Unordered list adalah daftar item yang tidak diurutkan berdasarkan nomor atau huruf. Daftar ini biasanya ditampilkan dengan bullet atau tanda bintang pada awal setiap item. Tag ul digunakan untuk mengelompokkan list item dalam bentuk unordered list. Setiap list item diawali dengan tag li.

Contoh penggunaan tag li dalam HTML:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

Output:

• Item 1
• Item 2
• Item 3
• Item 4

1. Ordered List

Ordered list adalah daftar item yang diurutkan berdasarkan nomor atau huruf. Daftar ini biasanya ditampilkan dengan angka atau huruf pada awal setiap item. Tag ol digunakan untuk mengelompokkan list item dalam bentuk ordered list. Setiap list item diawali dengan tag li.

Contoh penggunaan tag li dalam HTML:

<ol>
  <li>Pertama</li>
  <li>Kedua</li>
  <li>Ketiga</li>
  <li>Keempat</li>
</ol>

Output:

1. Pertama
2. Kedua
3. Ketiga
4. Keempat

1. Nested List

Nested list adalah daftar item yang disusun dalam hierarki. List item yang memiliki sub-item akan disusun dalam bentuk nested list. Tag ul atau ol dapat digunakan sebagai parent element dan tag li sebagai child element.

Contoh penggunaan tag li dalam HTML:

<ol>
  <li>Pertama</li>
  <li>
    Kedua
    <ul>
      <li>1</li>
      <li>2</li>
    </ul>
  </li>
  <li>Ketiga</li>
</ol>

Output:

1. Pertama
2. Kedua
   • 1
   • 2
3. Ketiga

1. Pengaturan Tampilan List

Kita dapat mengatur tampilan list dengan menggunakan CSS atau Cascading Style Sheets. Beberapa properti CSS yang dapat digunakan antara lain:

• list-style-type: untuk mengatur jenis tanda pada list (contoh: disc, circle, square, decimal, lower-roman)
• list-style-position: untuk mengatur posisi tanda pada list (contoh: inside, outside)
• list-style-image: untuk mengganti tanda pada list dengan gambar

Contoh:

/* mengatur tampilan ordered list */
ol {
  list-style-type: lower-roman;
  list-style-position: inside;
}

/* mengatur tampilan unordered list */
ul {
  list-style-type: square;
  list-style-image: url('gambar-tanda.png');
}

Berikut adalah contoh tampilan dari pengaturan CSS tersebut:

1. Pertama
2. Kedua
   1. Satu
   2. Dua
3. Ketiga

• Item 1
• Item 2
• Item 3
• Item 4

1. Kesimpulan

Tag li sangat penting dalam HTML karena digunakan untuk menampilkan daftar item dalam bentuk unordered list atau ordered list. Kita dapat melakukan pengaturan tampilan pada list menggunakan CSS dengan properti seperti list-style-type, list-style-position, dan list-style-image.