CLI, HTML, & CSS
HTML

HTML

HTML adalah singkatan dari Hyper Text Markup Language. HTML adalah bahasa markup standar untuk membuat halaman web. HTML menggambarkan struktur halaman web secara semantik dan dapat digunakan sebagai dasar dari sebuah website. HTML berisi elemen-elemen HTML yang menyatakan bagian-bagian dari sebuah halaman web. Elemen HTML terdiri dari tag-tag HTML yang dikelilingi oleh tanda kurung siku, contohnya: <html>.

Struktur Dasar HTML

Berikut adalah struktur dasar HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Judul Halaman</title>
  </head>
  <body>
    <h1>Heading 1</h1>
    <p>Paragraf 1</p>
  </body>
</html>

Penjelasan:

  • <!DOCTYPE html>: Deklarasi tipe dokumen HTML.
  • <html>: Elemen HTML yang menyatakan awal dan akhir dari sebuah dokumen HTML.
  • <head>: Elemen HTML yang menyatakan informasi mengenai dokumen HTML.
  • <title>: Elemen HTML yang menyatakan judul dari dokumen HTML.
  • <body>: Elemen HTML yang menyatakan isi dari dokumen HTML.
  • <h1>: Elemen HTML yang menyatakan heading 1.
  • <p>: Elemen HTML yang menyatakan paragraf.

Notes: Elemen-elemen yang berada di dalam elemen <head> tidak akan ditampilkan di browser, sedangkan elemen-elemen yang berada di dalam elemen <body> akan ditampilkan di browser.

Elemen HTML

Elemen HTML adalah bagian-bagian dari sebuah halaman web. Elemen HTML terdiri dari tag-tag HTML yang dikelilingi oleh tanda kurung siku, contohnya: <html>. Berikut adalah beberapa elemen HTML:

  • <div>: Elemen HTML yang menyatakan sebuah divisi/container dari sebuah halaman web.
  • <h1>: Elemen HTML yang menyatakan heading 1.
  • <p>: Elemen HTML yang menyatakan paragraf.
  • <a>: Elemen HTML yang menyatakan hyperlink.
  • <img>: Elemen HTML yang menyatakan gambar.
  • <ul>: Elemen HTML yang menyatakan unordered list.
  • <ol>: Elemen HTML yang menyatakan ordered list.
  • <li>: Elemen HTML yang menyatakan list item.

Headings

Heading adalah judul dari sebuah halaman web. Heading terdiri dari 6 level, yaitu : <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>. <h1> adalah heading dengan level terbesar, sedangkan <h6> adalah heading dengan level terkecil. Berikut adalah contoh penggunaan heading:

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

Contoh hasil:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

     

Paragraph

Paragraf adalah sebuah teks yang terdiri dari beberapa kalimat. Paragraf ditandai dengan elemen <p>. Berikut adalah contoh penggunaan paragraf:

<p>Paragraf 1</p>
<p>Paragraf 2</p>

Contoh hasil:

   

Paragraf 1

Paragraf 2

Hyperlink

Hyperlink adalah sebuah teks yang dapat diklik untuk menuju ke halaman web lain. Hyperlink ditandai dengan elemen <a>. Hyperlink memiliki atribut href, yaitu atribut yang menyatakan alamat dari halaman web yang dituju. Berikut adalah contoh penggunaan hyperlink:

<a href="https://www.google.com">Google</a>

Contoh hasil:

Image/Gambar

Gambar ditandai dengan elemen <img>. Gambar memiliki atribut src, yaitu atribut yang menyatakan alamat dari gambar. Berikut adalah contoh penggunaan gambar:

<img src="https://picsum.photos/200/300" />

Contoh hasil:

List

List adalah sebuah daftar. List terdiri dari 2 jenis, yaitu unordered list dan ordered list. Unordered list ditandai dengan elemen <ul>, sedangkan ordered list ditandai dengan elemen <ol>. List item ditandai dengan elemen <li>. Berikut adalah contoh penggunaan list:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
</ol>

Contoh hasil:

  • Item 1
  • Item 2
  1. Item 1
  2. Item 2

Input dan Textarea

Input adalah sebuah elemen HTML yang menyatakan sebuah inputan. Input terdiri dari beberapa jenis, yaitu text, password, checkbox, radio, number, dan lain-lain. Input ditandai dengan elemen <input>. Textarea adalah sebuah elemen HTML yang menyatakan sebuah inputan berupa teks yang memiliki banyak baris. Textarea ditandai dengan elemen <textarea>. Berikut adalah contoh penggunaan input dan textarea:

<input type="text" />
<input type="password" />
<input type="checkbox" />
<input type="radio" />
<input type="number" />
<textarea></textarea>
// dan masih banyak jenis `input type`.

Semantic html

Semantic HTML adalah HTML yang memberikan makna pada konten yang ada di dalamnya. Semantic HTML dapat meningkatkan SEO dan aksesibilitas. Berikut adalah beberapa elemen HTML yang termasuk ke dalam semantic HTML:

  • <header>: Elemen HTML yang menyatakan header dari sebuah halaman web.
  • <nav>: Elemen HTML yang menyatakan navigasi dari sebuah halaman web.
  • <main>: Elemen HTML yang menyatakan konten utama dari sebuah halaman web.
  • <article>: Elemen HTML yang menyatakan artikel dari sebuah halaman web.
  • <section>: Elemen HTML yang menyatakan bagian dari sebuah halaman web.
  • <aside>: Elemen HTML yang menyatakan konten tambahan dari sebuah halaman web.
  • <footer>: Elemen HTML yang menyatakan footer dari sebuah halaman web.

Contoh penggunaan:

<header>
  <h1>Header</h1>
</header>
 
<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>
 
<main>
  <article>
    <h2>Article 1</h2>
    <p>Paragraf 1</p>
  </article>
  <article>
    <h2>Article 2</h2>
    <p>Paragraf 2</p>
  </article>
 
  <section>
    <h2>Section 1</h2>
    <p>Paragraf 3</p>
 
    <section>
      <h2>Section 2</h2>
      <p>Paragraf 4</p>
 
      <aside>
        <h2>Aside</h2>
        <p>Paragraf 5</p>
      </aside>
    </section>
  </section>
</main>
 
<footer>
  <p>Footer</p>
</footer>

HTML Attributes

Atribut adalah sebuah informasi tambahan yang diberikan pada elemen HTML. Atribut terdiri dari nama dan nilai. Atribut ditulis di dalam tag HTML. Berikut adalah contoh penggunaan atribut:

<img src="https://picsum.photos/200/300" />
<a href="https://www.google.com">Google</a>

Prinsip penggunaan atribut

  • Nama atribut ditulis di dalam tag HTML.
  • Nama atribut ditulis diikuti dengan tanda sama dengan (=).
  • Nama atribut ditulis diikuti dengan nilai atribut dan di masukkan ke dalam double quote ("value").
  • Nama atribut dan nilai atribut dipisahkan dengan tanda spasi.

Attribute Global

Atribut global adalah atribut yang dapat digunakan pada semua elemen HTML. Berikut adalah beberapa atribut global:

  • class: Atribut yang menyatakan nama class dari sebuah elemen HTML.
  • id: Atribut yang menyatakan id dari sebuah elemen HTML.
  • style: Atribut yang menyatakan style dari sebuah elemen HTML.
  • title: Atribut yang menyatakan judul dari sebuah elemen HTML.

Contoh penggunaan atribut global:

<p class="paragraph" id="paragraph" style="color: red;" title="Judul">
  Paragraf
</p>

Attribute Event

Atribut event adalah atribut yang dapat digunakan untuk menambahkan event handler pada sebuah elemen HTML. Berikut adalah beberapa atribut event:

  • onclick: Atribut yang menyatakan event handler ketika elemen HTML diklik.
  • onchange: Atribut yang menyatakan event handler ketika nilai dari elemen HTML berubah.
  • onmouseover: Atribut yang menyatakan event handler ketika kursor berada di atas elemen HTML.
  • onmouseout: Atribut yang menyatakan event handler ketika kursor tidak berada di atas elemen HTML.

Contoh penggunaan atribut event:

<button onclick="alert('Hello World!')">Click Me!</button>

Contoh hasil:

Pembahasan tentang event ini akan lebih lanjut dibahas di bab JavaScript.

CLICSS