Latihan - Menambahkan HTML dasar ke aplikasi web Anda

10 menit

Saat ini, situs web Anda memiliki file HTML kosong. Mari kita tambahkan beberapa kode! Tujuannya adalah untuk menggunakan bahasa markup (HTML) untuk menjelaskan halaman web yang harus ditampilkan browser pelanggan Anda. Bukankah menyenangkan memiliki template awal? Editor dapat dengan mudah mengisi beberapa boilerplate umum atau struktur HTML untuk Anda.

Di unit ini, Anda menambahkan konten HTML dasar, membuka halaman HTML di browser, dan melihat alat pengembang terlebih dahulu.

Menambahkan beberapa kode HTML

Visual Studio Code menyediakan dukungan dasar untuk pemrograman HTML secara langsung. Ada penyorotan sintaksis, penyelesaian cerdas dengan IntelliSense, dan pemformatan yang dapat disesuaikan.

Buka folder situs web Anda di Visual Studio Code, lalu buka index.html file dengan memilihnya di Explorer.
Di halaman index.html, ketik html:5, lalu pilih Enter. Kode template HTML5 ditambahkan ke file.

Catatan

Jika kode templat HTML5 tidak ditambahkan ke index.html file, coba tutup dan buka kembali file.

Edit kode templat sehingga menyerupan berikut ini. Kemudian simpan file dengan menekan Control+S di Windows atau Command+S di macOS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

Ada versi HTML yang berbeda. Doctype <!DOCTYPE html> menunjukkan dokumen HTML ini berisi kode HTML5.

Meskipun kita tidak akan mempelajari secara mendalam arti dari semua elemen HTML, kita ingin menunjukkan beberapa item penting. Tag meta menunjukkan informasi metadata yang biasanya tidak terlihat oleh penampil kecuali mereka melihat kode sumber di browser mereka. Elemen atau tag Meta memberikan informasi deskriptif tentang halaman web. Misalnya, mereka membantu mesin cari memproses informasi mana di halaman web Anda untuk kembali dalam hasil pencarian.

Set karakter (charset) untuk UTF-8 mungkin tampak tidak signifikan, tetapi sangat penting untuk menetapkan bagaimana komputer menafsirkan karakter. Jika metadata untuk tataan karakter hilang, itu dapat menyebabkan keamanan yang disusupi. Ada sedikit riwayat dan informasi teknis di balik atribut charset, tetapi yang penting mengambil alih dari latihan ini adalah bahwa boilerplate Visual Studio Code menyediakan beberapa default yang masuk akal.

Mengedit kepala

Elemen <head> dalam kode HTML Anda berisi informasi tentang situs web Anda yang tidak terlihat di dalam tab browser.

Metadata menentukan data tentang dokumen HTML, seperti tataan karakter, skrip, dan browser tempat halaman web dibuka.

Judul halaman web muncul di bagian atas jendela browser, dan signifikan dalam banyak hal. Misalnya, judul digunakan oleh dan ditampilkan di mesin cari. Mari kita tambahkan judul.

Penting

Selanjutnya, elipsis (...) menunjukkan bahwa kode yang dideklarasikan sebelumnya mendahului atau mengikuti. Harus ada cukup kode yang disediakan sebagai konteks untuk membuat perubahan yang diperlukan atau memperbarui pekerjaan Anda, tetapi Anda tidak boleh menyalin dan menempelkan elipsis ke dalam kode Anda.

Di penyunting, ubah elemen <title> sehingga terlihat menyerupai contoh berikut.

...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple website</title>
...

Untuk menerapkan gaya ke elemen HTML di halaman web, Anda dapat menulis kode CSS langsung di kepala halaman web. Menulis CSS di halaman HTML disebut CSS internal. Namun, ini adalah praktik terbaik untuk memisahkan struktur HTML dan gaya CSS. Memiliki halaman CSS terpisah disebut CSS eksternal. Kode cenderung lebih mudah dibaca ketika ringkas dan terpisah. Anda bisa menggunakan satu atau beberapa lembar gaya eksternal untuk melayani beberapa halaman web. Daripada memperbarui setiap halaman HTML dengan kode CSS yang direplikasi, Anda dapat membuat perubahan pada satu file CSS dan menerapkan pembaruan tersebut ke semua halaman web dependen. Mari kita tautkan ke file CSS eksternal.

Di editor Visual Studio Code, tambahkan baris kosong setelah <title> elemen, ketik link, lalu pilih Enter. Visual Studio Code harus menambahkan baris berikut ke file Anda index.html .
```
<link rel="stylesheet" href="">
```

Perbarui href= ke href="main.css", dan simpan file dengan menekan Control+S di Windows atau Command+S di macOS.

...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple website</title>
  <link rel="stylesheet" href="main.css">
</head>
...

Mengedit isi

Mari kita mulai mengisi elemen <body> sekarang.

Elemen berisi <body> konten situs web Anda yang terlihat oleh pelanggan Anda di browser mereka.

<body> Di dalam elemen , tambahkan elemen judul<h1>, diikuti oleh , lalu buat daftar<p>tidak berurut yang berisi beberapa elemen item<ul> daftar.

Edit kode Anda, atau salin dan tempel, sehingga terlihat seperti contoh berikut.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple website</title>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <h1>Task List</h1>
    <p id="msg">Current tasks:</p>
    <ul>
      <li class="list">Add visual styles</li>
      <li class="list">Add light and dark themes</li>
      <li>Enable switching the theme</li>
    </ul>
  </body>
</html>

Anda dapat menggunakan atribut ID (digunakan dalam <p> elemen) untuk menata satu elemen, sementara atribut kelas (digunakan dalam <li> elemen) adalah untuk menata semua elemen dari kelas yang sama.

Sebelum langkah berikutnya, pastikan file Anda disimpan dengan menekan Control+S atau Command+S.

Membuka di browser

Anda bisa mempratinjau halaman web Anda secara lokal dengan membuka file HTML di browser. Browser Anda mengarah ke jalur file lokal, bukan alamat situs web yang diawali dengan https://, yang akan terlihat mirip dengan C:/dev/simple-website/index.html.

Untuk mempratinjau menggunakan Visual Studio Code, klik index.html kanan dan pilih Buka Di Browser Default, atau pilih index.html file dan gunakan pintasan keyboard Alt+B.

Penting

Jika Anda mengalami masalah, pastikan Anda langsung mengklik kanan ikon nama file atau teks. Jika dialog Visual Studio Code muncul, pilih Ya, saya mempercayai penulis; ini adalah fitur Kepercayaan Ruang Kerja yang memungkinkan Anda memutuskan apakah folder proyek Anda harus mengizinkan atau membatasi eksekusi kode otomatis. Anda baru saja membuat file, sehingga aman.

Halaman web akan terbuka di browser default Anda.

Menampilkan halaman menggunakan alat pengembang

Anda bisa memeriksa halaman web dengan menggunakan alat pengembang di browser Anda. Mari kita coba.

Buka Alat Pengembang dengan mengeklik kanan di halaman web dan memilih Periksa, atau coba pintasan berikut:
- Tekan pintasan untuk Alat Pengembang, yaitu F12.
- Tekan Ctrl+Shift+I di Windows dan Linux atau Option+Command+I di Mac.
Pintasan ini berfungsi di Microsoft Edge, Chrome, dan Firefox. Jika Anda menggunakan Safari, lihat Alat Pengembangan Web. Saat diinstal, pilih > Safari, lalu pilih Tingkat Lanjut. Di bagian bawah panel, centang kotak Tampilkan menu Kembangkan di bilah menu. Pilih Kembangkan > Tampilkan Web Inspector. Untuk informasi selengkapnya, periksa dokumentasi Safari Web Inspector.

Untuk mempelajari selengkapnya tentang membuka Alat Pengembang dan fitur utama yang tersedia, lihat Gambaran Umum artikel DevTools.
Pilih tab Elemen.
Gerakkan mouse Anda ke atas elemen HTML yang ditampilkan di tab Elemen, dan luaskan konten berbagai elemen.

Tab Elemen di alat pengembang menunjukkan kepada Anda model objek dokumen (DOM) seperti yang dirender di browser. Saat melakukan debug, sering kali penting untuk melihat bagaimana browser menginterpretasikan kode sumber Anda.

Memeriksa halaman di browser menyediakan berbagai macam informasi yang berguna dan bisa membantu Anda memecahkan masalah. Anda juga dapat melihat detail CSS dengan pemeriksa, seperti yang akan Anda lihat di bagian berikutnya.

Saran dan Komentar

Apakah halaman ini membantu?