Materi Siswa HTML

HTML adalah tulang punggung halaman web. Dalam unit ini, kita akan melihat cara membangun struktur yang solid dan bermakna untuk halaman web.

Poin-Poin Penting

  • Siswa memahami struktur file HTML.
  • Siswa mengetahui cara menggunakan tag umum untuk membuat halaman web.

Apa Itu HTML?

HTML adalah singkatan dari HyperText Markup Language. Kode ini adalah kode yang kita gunakan untuk:

  • membuat dokumen yang disimpan di World Wide Web dan ditampilkan di browser.
  • memberikan struktur dasar untuk halaman web kita - kerangka halaman web.
  • memastikan pemuatan teks dan gambar yang tepat untuk ditampilkan oleh browser kita.

Kapan Kita Menggunakan HTML?

Setiap halaman web yang Anda lihat di World Wide Web ditulis menggunakan kode HTML. Tombol, gambar, formulir, bagian teks - semuanya adalah elemen yang dibuat dengan HTML.

Jika kita menganggap halaman web sebagai tubuh manusia, HTML adalah struktur tulang. Kita dapat menambahkan kulit dan pakaian ke tubuh menggunakan CSS, tetapi hanya setelah kita memiliki struktur kerangka tersebut.

HTML dalam Penggunaan

Inti HTML adalah elemen. Elemen dibuat dengan tag.

Sebagian besar elemen memiliki tag pembuka dan tag penutup:

<!-- opening tag -->
<p>

<!-- closing tag -->
</p>

Konten (teks atau bahkan elemen HTML lainnya) yang ingin Anda lihat di halaman web dapat ditempatkan di antara tag ini, seperti menyusun lapisan sandwich.

<p>The content that you write here will be seen on the web page</p>

<section>
  <p>This text is inside a paragraph within a section.</p>
</section>

Beberapa konten HTML dibuat dengan tag menutup sendiri yang tidak memerlukan tag penutup tambahan:

<img />
<link />

Hanya satu tag ini yang cukup karena tugas elemen ini adalah untuk menempatkan posisi dalam dokumen Anda - tidak seperti sebagian besar elemen HTML lainnya, elemen ini tidak dapat menyertakan elemen atau informasi lain di dalamnya.

Bagian-Bagian Elemen HTML

Contoh HTML

Kode ini akan ditampilkan di browser dan terlihat seperti gambar di bawah.

Kode Ini...

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>HTML Example</title>
</head>
<body>
  <h1>My Day In The Garden</h1>
  <section>
    <h2>Flora</h2>
    <p>I spent the morning drawing some of the daffodils that
    are inbloom.</p>
    <p>I picked a few tulips to put in a vase in the dining
    room.</p>
  </section>
  <section>
    <h2>Fauna</h2>
    <p>Today I spotted that hummingbird again, buzzing around
    the newly blooming tree.</p>
    <img
    src="https://media.gettyimages.com/photos/magentathroated-woodstar-feeding-from-flowers-picture-id853369596"
    alt="hummingbird"/>
  </section>
</body>

... Membuat Halaman Web Ini

Referensi HTML

Pembingkaian

Konteks & tujuan

HTML adalah singkatan dari Hyper Text Markup Language. Ini adalah cara untuk memberikan makna struktural pada teks. Hal ini memungkinkan komputer dan programmer menentukan dengan mudah tujuan dari potongan teks.

Anggap HTML sebagai kerangka halaman web - HTML menyediakan struktur dan konten, sementara JavaScript dan CSS menyediakan interaktivitas dan gaya.

Tujuan pembelajaran

Siswa akan dapat

  • membuat file HTML dan membukanya di editor dan browser
  • menyiapkan file HTML dengan struktur yang tepat
  • mencantumkan dan menggunakan beberapa tag umum untuk menambahkan struktur dan konten ke situs mereka

Memulai

Framing dan tujuan bagian

  • HTML ditulis di dalam file dengan ekstensi .html.
  • Anda dapat memberi nama apa pun pada file HTML, tetapi index.html adalah nama yang paling umum digunakan untuk halaman landing, kecuali jika developer memiliki alasan untuk mengonfigurasi server dengan cara lain.
# creating an html file on the command line
touch index.html
 
# opening your html file in your browser
open index.html

Tantangan mini

  1. Buat 3 file HTML tambahan dengan nama apa pun yang Anda inginkan.
  2. Buka salah satu file di editor teks dan browser Anda.

Struktur Halaman HTML

Framing dan tujuan bagian

Dokumen HTML harus selalu dimulai dengan struktur yang sama:

  • Tag DOCTYPE bersifat khusus dan tidak ditutup. Tag ini juga merupakan satu-satunya tag yang dapat memiliki nilai non-alfanumerik (huruf/angka).
  • <head> berisi informasi tentang situs Anda, tetapi bukan konten sebenarnya yang akan muncul di halaman.
  • <body> berisi semua konten halaman Anda yang akan benar-benar muncul di layar.
  • Tag yang akan Anda gunakan untuk membuat struktur halaman harus ditempatkan di antara tag <body>.
  • Di antara tag pembuka dan penutup, kita menyisipkan teks atau "konten" elemen. Hasil akhirnya akan terlihat seperti ini: <example-tag>Content Goes in here</example-tag>. Tag juga dapat ditempatkan di dalam tag lain.
  • Perhatikan bahwa saat menempatkan tag di dalam tag lain, Anda harus mengindentasi tag baru untuk menunjukkan bahwa tag tersebut adalah turunan dari tag induknya.

Kosakata

  • elemen - item (seperti gambar, paragraf, dan judul) yang dibuat dengan kode HTML.
  • tag - potongan kode yang menunjukkan awal dan akhir elemen tertentu.
  • turunan - elemen yang ada DI DALAM elemen lain.
  • induk - elemen yang BERISI elemen lain.

Contoh HTML

Catatan: berikut ini hanyalah contoh untuk referensi; Anda tidak perlu langsung memahaminya, tetapi ada baiknya untuk melihat seperti apa HTML yang diformat dengan baik.

<!-- Standard tag setup of an HTML document  -->
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Practice Website</title>
</head>
<body>
  <h1>My first website</h1>
  <section>
    <h2>Information about me</h2>
    <p>I am coding out my first website. This is a paragraph
    that I would write with information about my
    interests.</p>
  </section>
  <section>
    <h2>Things that I've learned in class</h2>
    <ul>
      <li>Command Line</li>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </section>
</body>
 
<!-- Nested elements  -->
<section>
  <p>I am the text that will show up on your website.</p>
</section>
<!-- The <section> is the parent element -->
<!-- The <p> is the child element -->

Tantangan mini

  1. Buka salah satu file yang Anda buat dan tambahkan struktur tag HTML dasar.
  2. Siapkan isi HTML untuk menampilkan silsilah keluarga Anda (atau silsilah keluarga orang lain). Gunakan tag section untuk menyimpan grup keluarga. Gunakan tag p untuk menahan anggota keluarga. Keluarga itu rumit, tetapi contohnya mungkin seperti ini:
<section>Jetson Family
  <div>George and Jane
    <p>Judy</p>
    <p>Elroy</p>
  </div>
  <p>Rosie the robot</p>
  <p>Astro the dog</p>
</section>

<!-- In this example, Judy and Elroy are the children of Jane and George. -->

Tag Umum

Framing dan tujuan bagian

Secara umum, kita tidak membuat jenis elemen kita sendiri. Sebagai gantinya, ada serangkaian elemen yang telah ditentukan sebelumnya dengan fungsi yang sudah terkait dengannya.

Lihat referensi HTML untuk perincian contoh blok kode

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Practice Website</title>
</head>
<body>
  <h1>My first website</h1>
  <br>
  <img
  src="https://media.gettyimages.com/photos/portrait-of-kitten-against-colored-background-picture-id903869076"
  alt="kitten with blue background">
  <hr>
  <section>
    <h2>Information about me</h2>
    <p>I am coding out my first website. This is a paragraph
    that I would write with information about my interests.</p>
    <h3>My favorite websites</h3>
      <ul>
        <li><a href="www.google.com">Google</a></li>
      </ul>
    <h3>My favorite books</h3>
      <section>
        <h4>Non-Fiction</h4>
        <ol>
          <li>Eloquent Javascript</li>
        </ol>
      </section>
      <section>
        <h4>Fiction</h4>
        <ol>
          <li>Hitchhiker's Guide to the Galaxy</li>
        </ol>
      </section>
  </section>
  <hr>
  <section>
    <h2>Things that I've learned in class</h2>
    <ul>
      <li>Command Line</li>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </section>
</body>

Tantangan mini

  1. Revisi semua konten di atas agar mencerminkan minat ANDA.
  2. Di salah satu file html kosong lainnya yang Anda buat di awal pelajaran, berpura-puralah Anda sedang menyiapkan artikel berita dengan judul, heading, dan sub-heading (tidak bisa memikirkan konten? Tulis tentang satu hari saat Anda bepergian. Pikirkan perjalanan singkat yang Anda lakukan, tempat yang Anda kunjungi, makanan yang Anda makan).
  3. Gunakan tag yang relevan dan tambahkan beberapa konten agar artikel berita Anda muncul di situs Anda.
  4. Pastikan konten Anda muncul di browser Anda.
  5. PERLUASAN: Buat formulir yang dapat diisi seseorang untuk mengirimkan komentar tentang artikel Anda. Meskipun belum berfungsi (kita belum menghubungkannya ke JavaScript), membuat formulir ini di HTML dapat menunjukkan langkah pertama dalam cara membuat formulir yang berfungsi.

Konteks

HTML adalah bahasa konten di World Wide Web.

Anda akan menggunakan Command Line untuk membuka dan menavigasi file HTML. File HTML Anda akan dilengkapi dengan gaya dan perilaku CSS yang ditulis menggunakan skrip JavaScript yang terdiri dari berbagai fungsi. File HTML juga akan menjadi template yang digunakan oleh Google App Engine dan diisi dari database.

HTML dalam Penggunaan

Mulai Menggunakan HTML

HTML ditulis di dalam file dengan ekstensi .html.

Melihat Halaman Anda

Untuk melihat pratinjau file HTML di Mac: Di command line, buka folder yang berisi halaman HTML Anda, lalu ketik open filename, dengan mengganti "filename" dengan nama file HTML Anda.

Sintaksis Umum

<tag>
  Content
</tag>

Elemen Bertingkat

Elemen HTML dapat ditempatkan di dalam elemen lain:

 <parent>
    <child>
      This content is inside of the child tag, which is inside of
      the parent tag. Keep an eye on indentation to see which is
      the parent and which is the child!
    </child>
  </parent>

Struktur Halaman HTML

Setiap halaman web memiliki struktur dasar yang sama. Tampilannya terlihat seperti ini:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>
  • <head> berisi informasi tentang situs Anda, tetapi bukan konten sebenarnya yang akan muncul di halaman (anggap saja sebagai 'otak' halaman web Anda).
  • <body> berisi semua konten halaman Anda yang akan benar-benar muncul di layar.

Elemen Umum

Gunakan elemen umum ini di dalam tag <body> dan </body> untuk menambahkan konten ke halaman.

Paragraf

Untuk membuat paragraf, gunakan tag pembuka dan penutup p:

<p>
  This is a paragraph about how great polar bears are. Aren't they just the best?
</p>

Komentar

Gunakan komentar untuk membuat kode Anda lebih mudah dibaca tanpa memengaruhi HTML yang dirender akhir.

<!-- This is a comment. It lives in the code as a note to yourself or
  to other developers, but is hidden when the HTML is rendered in the
  browser. -->

Judul

<!-- Different levels of headings. Use these for structuring
your page. <h1> is most important heading while <h6> is the
least important heading. -->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

<div> Umum

<div> The DIV tag exists to make "dividers" to keep your page
organized. Group other similar or related elements inside these.</div>

Daftar

Daftar item daftar, <li>, dibungkus dengan tag daftar tidak berurutan, <ul>, atau tag daftar berurutan, <ol>.

<!-- An unordered list - this will default to a bulleted list. -->
<ul>
  <li>first list item</li>
  <li>second list item</li>
</ul>
 
<!-- An ordered list - this will default to a numbered list. -->
<ol>
  <li>first list item</li>
  <li>second list item</li>
</ol>

Gambar

Tag <img> memerlukan penentuan alamat gambar menggunakan atribut src, dan atribut alt opsional digunakan untuk aksesibilitas, termasuk pembaca layar.

<!-- Image hosted elsewhere on the web -->
<img
 src="https://some.hostingsite.com/portrait-of-kitten-in-blue"
 alt="kitten with blue background">

<!-- Image hosted on your own site -->
<img src="img/kitten-blue-background.jpg" alt="Kitten in a donut">

Untuk hyperlink, tag <a> mengharuskan penentuan alamat tujuan hyperlink menggunakan atribut href.

<!-- External link  -->
<a href="https://www.google.com"></a>

<!-- Local link -->
<a href="footer.html"></a>

Garis Horizontal

<!-- This self-closing tag creates a line across your web page. -->
<hr>

Istirahat

<!-- This self-closing tag creates a line break between elements. -->
<br>

Formulir

<form> digunakan untuk mengumpulkan informasi dari pengguna. Agar <form> berfungsi, <form> perlu mengirim data yang dikumpulkannya ke suatu tempat untuk diproses atau ditangani. Oleh karena itu, <form> sering kali memerlukan atribut tambahan:

  • action - tujuan data formulir saat formulir dikirimkan
  • method - menunjukkan apakah data harus diproses menggunakan jenis permintaan GET atau POST.
<!-- a form that will send data to process.php via POST request -->
<form action="/process.php" method="post">

</form>

Input

<input> adalah elemen yang digunakan oleh <form> untuk mengumpulkan informasi.

Elemen <input> juga biasanya memiliki atribut name yang digunakan oleh database untuk mengidentifikasi kolom tempat data yang dikirimkan berada.

<form>
    <!-- a text box with the helper text "Full Name" -->
    <input type="text" name="fullName" placeholder="Full Name">
</form>

Elemen <input> sangat serbaguna: dengan menentukan atribut type, elemen ini dapat dirender sebagai kolom teks, pemilih tanggal gaya kalender, tombol pilihan, dropdown, dan lainnya. Anda dapat melihat beberapa dokumentasi eksternal untuk melihat daftar yang lebih lengkap.

Tips & Trik

  • Pelajari tag HTML yang tersedia dengan memeriksa kode halaman web untuk melihat tag yang telah digunakan developer lain untuk menambahkan sesuatu ke halaman web.
  • Jika Anda tidak dapat menemukan apa yang ingin ditambahkan, lihat Dokumentasi Developer. Berikut beberapa daftar semua elemen HTML yang mungkin ada https://www.w3schools.com/Tags/, https://developer.mozilla.org/en-US/docs/Web/HTML/Element, http://html-css-js.com/html/tags/
  • Saat menulis HTML, untuk elemen yang memerlukan tag pembuka dan penutup, sebaiknya buka dan tutup tag terlebih dahulu sebelum menambahkan konten di antara tag. Dengan demikian, Anda tidak akan memiliki tag yang tidak terhubung.
  • Untuk melihat dengan baik sifat bertingkat elemen HTML dalam kode Anda, indentasi elemen yang berada di dalam elemen lain. Hal ini akan membantu Anda mengenali struktur konten HTML dengan cepat.
  • Gunakan banyak komentar. Hal ini akan membantu Anda memecahkan masalah kode Anda sendiri dan akan membantu orang lain saat Anda meminta mereka untuk meninjaunya.
  • Referensi di web seperti html5boilerplate.com dapat membantu Anda memulai penulisan HTML dengan cepat.

Ringkasan Praktik Terbaik

  • Informasi tentang halaman web masuk ke <head> dokumen HTML: judul, metadata, link ke gaya, dll.
  • Informasi di halaman web masuk ke <body> dokumen HTML.
  • Ada banyak elemen yang dapat digunakan developer untuk membuat konten dokumen HTML, termasuk: <p>, <h1>-<h6>, <div>, <li>, <img>, <a>, <hr>, <br>, <!-- -->, dan lainnya.
  • Beberapa elemen memerlukan tag pembuka dan tag penutup: <p></p>.
  • Elemen lain tertutup sendiri, sehingga hanya memerlukan tag pembuka: <img>.
  • Tag dapat menyertakan atribut (src, alt, id, dll.) yang memberikan informasi lebih lanjut tentang cara elemen harus berperilaku: <img src="filename.png" alt="description">.
  • Komentar, <!-- -->, memberikan catatan kepada developer yang berguna untuk memahami fungsi bagian-bagian halaman web.
  • Gunakan Alat Developer bawaan di browser Anda untuk memeriksa kode HTML halaman web guna memeriksa cara halaman dibuat.

Pertanyaan 1

Manakah elemen berikut yang merupakan elemen turunan? (abaikan elemen body/html untuk tujuan latihan ini)

<h1>
  Welcome to the site!
</h1>
<p>
  Go to <a href="https://www.google.com">Google!</a>
</p>
  1. h1
  2. p
  3. a
  4. h1 dan p

Pertanyaan 2

Dalam dokumen HTML, __ masuk ke elemen <head> dan __ masuk ke elemen <body>.

  1. struktur, metadata
  2. metadata, struktur
  3. judul, konten yang lebih kecil
  4. header situs, konten utama situs

Pertanyaan 3

Manakah dari berikut ini yang bukan merupakan alasan yang baik untuk membuat indentasi pada elemen bertingkat?

  1. Penjorokan memudahkan untuk melihat elemen apa yang ada di dalam elemen lain
  2. Indentasi memudahkan orang membaca struktur halaman web
  3. Indentasi memudahkan bot/mesin telusur membaca struktur halaman web
  4. Membuat indentasi akan mempermudah identifikasi elemen saudara

Pertanyaan 4

Manakah dari berikut ini yang merupakan atribut elemen HTML?

<div class="sidebar">Sidebar goes here!</div>
  1. div
  2. class
  3. bilah sisi
  4. Sidebar goes here!

Pertanyaan 5

Berapa banyak atribut yang dimiliki elemen HTML berikut?

<input type="text" placeholder="username" name="username" />
  1. 0
  2. 1
  3. 2
  4. 3

Pertanyaan 6

Dalam cuplikan HTML berikut yang menunjukkan hubungan, elemen mana yang merupakan elemen induk?

<p>
        <b>Pomp</b> and <i>Circumstance</i>
</p>
  1. <p>
  2. <b>
  3. <i>

Pertanyaan 7

Berapa banyak elemen dalam cuplikan HTML berikut yang merupakan turunan dari elemen induk?

(Jangan menghitung elemen pembungkus <body> atau <html>)

<div>
  <h1>Buster's site</h1>
  <p>Buster is my dog.  He is a <i>very good dog</i>.  He is a
  Labrador retriever.  Read more about it
  <a href="https://dogtime.com/dog-breeds/labrador-retriever">
    here</a>.
  <p>
</div>
  1. 1
  2. 2
  3. 3
  4. 4

Pertanyaan 8

Meskipun beberapa browser akan merender cuplikan HTML berikut dengan benar, apa yang salah dengan cuplikan tersebut?

<img src=puppies.png width=400 />
  1. Tidak memiliki tag penutup
  2. Harus ada tanda kutip di sekitar nilai atribut
  3. Pencantuman atribut width juga memerlukan atribut height
  4. Atribut wajib tidak ada

Pertanyaan 1

Manakah elemen berikut yang merupakan elemen turunan? (abaikan elemen body/html untuk tujuan latihan ini)

<h1>
  Welcome to the site!
</h1>
<p>
  Go to <a href="https://www.google.com">Google!</a>
</p>

Elemen a adalah elemen turunan karena berada di dalam elemen lain.

Pertanyaan 2

Dalam dokumen HTML, __ masuk ke elemen <head> dan __ masuk ke elemen <body>.

metadata masuk ke elemen <head> dan struktur masuk ke elemen <body>. Tidak ada apa pun di elemen <head> yang akan terlihat di halaman web itu sendiri.

Pertanyaan 3

Manakah dari berikut ini yang bukan merupakan alasan yang baik untuk membuat indentasi pada elemen bertingkat?

Indentasi tidak mempermudah bot/mesin telusur membaca struktur halaman web. Saat membaca situs, bot dapat membaca kode HTML meskipun semuanya berada dalam satu baris.

Pertanyaan 4

Manakah dari berikut ini yang merupakan atribut elemen HTML?

<div class="sidebar">Sidebar goes here!</div>

class adalah atribut - atribut berada dalam elemen HTML dan biasanya memiliki (tetapi tidak harus memiliki) nilai.

Pertanyaan 5

Berapa banyak atribut yang dimiliki elemen HTML berikut?

<input type="text" placeholder="username" name="username" />

Elemen input di atas memiliki 3 atribut - type, placeholder, dan name.

Pertanyaan 6

Dalam cuplikan HTML berikut yang menunjukkan hubungan, elemen mana yang merupakan elemen induk?

<p>
        <b>Pomp</b> and <i>Circumstance</i>
</p>

<p> adalah elemen induk karena berisi elemen lain.

Pertanyaan 7

Berapa banyak elemen dalam cuplikan HTML berikut yang merupakan turunan dari elemen induk?

(Jangan menghitung elemen pembungkus <body> atau <html>)

<div>
  <h1>Buster's site</h1>
  <p>Buster is my dog.  He is a <i>very good dog</i>.  He is a
  Labrador retriever.  Read more about it
  <a href="https://dogtime.com/dog-breeds/labrador-retriever">
    here</a>.
  <p>
</div>

Ada 4 elemen turunan dalam cuplikan - pada dasarnya, elemen apa pun yang memiliki induk di atasnya, jadi apa pun kecuali elemen <div> - <h1>, <p>, <i>, <a>.

Pertanyaan 8

Meskipun beberapa browser akan merender cuplikan HTML berikut dengan benar, apa yang salah dengan cuplikan tersebut?

<img src=puppies.png width=400 />

Nilai atribut harus diapit tanda petik. <img /> adalah tag yang menutup sendiri, dan tidak memiliki atribut wajib. Anda dapat memiliki width tanpa height dan sebaliknya.