Cara Membuat Halaman Web Sederhana Dengan HTML

Artikel How.com.vn ini akan mengajarkan kepada Anda cara membuat halaman web sederhana menggunakan kode HTML (hypertext markup language). HTML adalah salah satu komponen inti world wide web atau “www” yang membentuk struktur halaman web. Setelah halaman dibuat, Anda bisa menyimpannya sebagai dokumen HTML dan meninjaunya melalui peramban. Pembuat halaman HTML bisa dilakukan menggunakan program penyunting teks dasar yang tersedia pada komputer Windows dan Mac.

Bagian 1

Bagian 1 dari 6:

Menambahkan Segmen Kepala Dokumen HTML

Unduh PDF

1
Buka program penyunting teks. Jika Anda menggunakan komputer Windows, biasanya Anda dapat memilih Notepad atau Notepad++. Untuk para pengguna MacOS, Anda bisa menggunakan TextEdit:
- Windows – Buka menu “Start”
  , tikkan notepad (atau notepad++), kemudian klik “Notepad” atau "Notepad++ or sublime" di bagian atas jendela “Start”.
- MacOS – Klik ikon “Spotlight”
  , tikkan textedit, dan klik dua kali “TextEdit” di bagian atas hasil pencarian.
- ChromeOS – Buka launcher kemudian klik Text (ikonnya bertuliskan Code Pad)
Perintah ini memberi tahu peramban bahwa dokumen yang dibuka merupakan dokumen HTML.
Penanda ini merupakan penanda pembuka kode HTML.
Penanda ini berfungsi membuka segmen kepala dokumen. Konten atau informasi yang ditambahkan ke segmen kepala HTML biasanya tidak ditampilkan pada halaman web. Informasi ini mencakup judul, metadata, lembar gaya (style sheet) CSS, dan elemen atau bahasa skrip lainnya.^{[1]XTeliti sumber}
Penanda ini berfungsi menambahkan judul pada halaman.
Anda bisa memasukkan judul apa pun yang diinginkan untuk halaman web.
Penanda ini berfungsi menutup penanda judul.
8
Tikkan </head> dan tekan tombol ↵ Enter. Penanda ini merupakan penutup segmen kepala dokumen. Pada tahap ini, dokumen HTML Anda akan tampak seperti ini :
```
<!DOCTYPE html><html><head><title>Halaman Webku</title></head>
```
Iklan

Bagian 2

Bagian 2 dari 6:

Menambahkan Segmen Tubuh dan Teks ke Dokumen HTML

Unduh PDF

Penanda ini berfungsi membuka segmen tubuh/inti dokumen HTML. Apa pun yang ditambahkan pada segmen ini akan ditampilkan di halaman web.
Penanda ini berfungsi menambahkan tajuk pada dokumen HTML. Tajuk merupakan teks tebal besar yang biasanya ditampilkan di bagian atas dokumen HTML.
Anda bisa memasukkan judul halaman atau sapaan bagi para pengunjung halaman.
4
Tikkan </h1> setelah tajuk dan tekan tombol ↵ Enter. Penanda tersebut berfungsi menutup penanda pembuat tajuk.
- Tambahkan tajuk tambahan. Ada enam jenis tajuk yang bisa dibuat menggunakan penanda <h1></h1> hingga <h6></h6>. Penanda-penanda tersebut berfungsi membuat tajuk dengan beragam ukuran. Sebagai contoh, untuk membuat tiga tajuk dengan ukuran yang berbeda secara berturut-turut, Anda bisa menggunakan kode seperti ini:
  <h1>Selamat Datang di Halaman Webku!</h1><h2>Hai! Namaku Budi.</h2><h3>Semoga kamu menyukai halaman ini.</h3>
- Tajuk menunjukkan prioritas atau tingkat kepentingan teks. Namun, perlu diingat bahwa Anda tidak perlu menggunakan tajuk dengan tingkat atau ukuran terbesar jika ingin menggunakan tajuk dengan ukuran yang lebih kecil. Biasanya, pengguna bisa langsung menggunakan penajukan “H3” meskipun dokumen tidak memuat penajukan “H1”.
Penanda ini berfungsi membuka paragraf. Teks yang dimuat dalam paragraf akan ditampilkan dalam ukuran normal.
Anda bisa memasukkan deskripsi halaman web atau informasi lain yang ingin dibagikan kepada para pengunjung halaman.
7
Tikkan </p> setelah teks dan tekan tombol ↵ Enter. Penanda ini berfungsi menutup paragraf. Berikut adalah contoh segmen paragraf pada dokumen HTML:
```
<p>Ini paragrafku.</p>
```
- Anda bisa menambahkan beberapa baris paragraf secara berurutan untuk membuat rangkaian paragraf dalam satu tajuk.
- Anda bisa mengubah warna teks dengan mengapitnya menggunakan penanda <font color="warna"> dan </font>. Pastikan Anda mengetikkan nama warna (dalam bahasa Inggris) yang ingin digunakan pada elemen "warna" (tetap apit nama warna dengan tanda kutip). Dengan penanda yang sama, Anda juga bisa mengubah warna teks lainnya (mis. tajuk) menjadi warna lain. Sebagai contoh, untuk mengubah warna teks pada paragraf menjadi biru, gunakan kode berikut: <p><font color="blue">Paus adalah makhluk yang sangat besar.</font></p>
- Anda bisa menebalkan, memiringkan, dan memformat teks dengan kode HTML. Berikut adalah beberapa contoh pemformatan teks menggunakan penanda HTML:^{[2]XTeliti sumber}
  <b>Teks tebal</b><i>Teks miring</i><u>Teks bergaris bawah</u><sub>Teks subskrip</sub><sup>Teks superskrip</sup>
- Jika Anda ingin menebalkan dan memiringkan teks untuk menonjolkan informasi tertentu, dan bukan sekadar “menghias” teks, gunakan penanda <strong> dan <em> sebagai pengganti penanda <b> dan <i>. Dengan demikian, halaman Anda lebih mudah diproses dan “dipahami” saat diakses melalui teknologi atau fitur seperti pembaca layar (screen reader) ^{[3]XTeliti sumber} atau mode pembaca pada beberapa peramban^{[4]XTeliti sumber}.
Iklan

Bagian 3

Bagian 3 dari 6:

Menambahkan Elemen Tambahan ke Dokumen HTML

Unduh PDF

1
Tambahkan gambar ke halaman. Anda bisa menambahkan gambar ke dokumen HTML dengan langkah-langkah berikut:
- Tikkan <img src= untuk membuka penanda gambar.
- Salin dan tempelkan URL gambar setelah tanda "=" (apit URL dengan tanda kutip).
- Tikkan > setelah URL untuk menutup penanda gambar. Sebagai contoh, jika URL gambar yang akan digunakan adalah "http://www.mypicture.com/lake", masukkan kode sebagai berikut:
  <img src="http://www.mypicture.com/lake.jpg">
2
Tautkan teks ke halaman lain. Anda bisa menambahkan tautan ke dokumen HTML dengan langkah-langkah berikut:
- Tikkan <a href= untuk membuka penanda tautan.
- Salin dan tempelkan URL setelah tanda "=" (apit URL dengan tanda kutip).
- Tikkan > setelah URL untuk menutup perintah tautan HTML.
- Masukkan teks yang ingin ditambahi tautan setelah tanda kurung penutup.
- Tikkan </a> setelah teks untuk menutup penanda tautan HTML.^{[5]XTeliti sumber} Berikut adalah contoh kode HTML untuk tautan ke situs Facebook.
  <a href="https://www.facebook.com">Facebook</a>.
Anda bisa menambahkan baris baru dengan mengetikkan penanda <br> pada dokumen. Penanda ini berfungsi membuat baris kosong yang dapat digunakan untuk memisahkan beragam segmen halaman.
Iklan

Bagian 4

Bagian 4 dari 6:

Mengubah Warna

Unduh PDF

Organisasi "World Wide Web Consortium" (W3C) mengelola daftar warna resmi yang bisa ditemukan di https://www.w3.org/wiki/CSS/Properties/color/keywords. Masing-masing warna memiliki nama resmi, enam digit kode heksadesimal, dan angka desimal. Anda bisa menggunakan salah satunya untuk menambahkan elemen warna ke halaman web. Sebagai contoh, di sini kami akan menggunakan nama resmi warna.
2
Atur warna latar dengan penanda <body>. Sekarang, tambahkan atribut style ke penanda tersebut. Katakan Anda ingin mengubah warna latar seluruh halaman menjadi lavender:
- <body style="background-color:lavender;">
3
Atur warna teks penanda lain. Anda juga bisa menggunakan atribut style untuk menentukan warna teks yang Anda inginkan dalam penanda tertentu. Misalnya, katakan Anda ingin membuat teks dalam salah satu penanda <p> menjadi midnightblue:
- <p style="color:midnightblue;">
- Perubahan warna ini hanya akan terjadi pada teks dalam penanda <p>. Setelah itu, jika Anda membuat penanda baru <p>, dan ingin warnanya juga midnightblue, Anda harus membuat memasukkan atribut style juga di sana.
4
Atur warna latar pada kepala paragraf. Sama seperti mengatur warna latar pada penanda di tubuh dokumen, Anda juga bisa mengatur warna pada penanda lain. Katakan Anda ingin membuat warna latar <p> menjadi lightgrey, dan warna latar pada kepala H1 menjadi lightskyblue, Anda bisa menggunakan:
- <p style="background-color:lightgrey;">
- <h1 style="background-color:lightskyblue;">
Iklan

Bagian 5

Bagian 5 dari 6:

Menutup Dokumen HTML

Unduh PDF

Setelah selesai menambahkan semua teks, gambar, atau elemen lain ke bagian tubuh dokumen, tambahkan penanda ini di akhir dokumen HTML untuk menutup bagian tersebut.

Tambahkan penanda ini di bawah penanda penutup bagian tubuh, di akhir dokumen HTML. Penanda ini memberi tahu peramban bahwa tidak ada lagi kode HTML setelah penanda tersebut. Secara keseluruhan, dokumen HTML Anda akan tampak seperti ini:

<!DOCTYPE html><html><head><title>Halaman Penggemar How.com.vn</title></head><body><h1>Selamat Datang di Halamanku!</h1><p>Ini adalah halaman penggemar How.com.vn. Selamat menikmati!</p><h2>Tanggal Penting</h2><p><i>15 Januari 2019</i> - Ulang Tahun How.com.vn</p><h2>Tautan</h2><p>Berikut adalah tautan menuju situs How.com.vn: <a href="http://www.wikihow.com">How.com.vn</a></p></body></html>

Bagian 6

Bagian 6 dari 6:

Menyimpan dan Membuka Halaman Web

Unduh PDF

1
Ubah format dokumen menjadi dokumen teks polos atau plain text (untuk pengguna Mac saja). Klik menu “Format” di atas layar, kemudian pilih “Make Plain Text” pada menu drop-down.
- Langkah ini tidak perlu (atau tidak bisa) dilakukan pada komputer Windows.
Opsi ini berada pada bilah menu di atas layar.
3
Klik Save as. Tombol ini berada pada menu drop-down di bawah opsi "File".
- Sebagai alternatif, Anda bisa menggunakan pintasan Ctrl+S (Windows) atau ⌘ Command+S (Mac).
Tikkan nama yang Anda inginkan untuk dokumen pada kolom "File name" (Windows) atau "Name" (Mac).
5
Ganti jenis berkas dokumen. Anda perlu mengubah format dokumen dari berkas teks menjadi berkas HTML. Ikuti langkah-langkah berikut untuk mengubahnya:
- Windows – Klik kotak drop-down "Save as type", pilih “All Files”, dan tikkan .html di ujung nama berkas.
- Mac – Ganti ekstensi .txt di ujung nama berkas dengan .html.
- ChromeOS – Klik tombol "Save as". Beri nama berkas sesuai keinginan kemudian akhiri dengan .html.
6
Klik Save. Tombol ini berada di bagian bawah jendela. Setelah itu, berkas HTML akan dibuat.
- Berkas HTML biasanya dibuka menggunakan peramban web utama komputer.
Pada tahap ini, Anda sudah bisa membuka berkas HTML pada peramban untuk meninjau halaman web yang dibuat.
8
Buka dokumen HTML pada peramban. Anda biasanya dapat mengeklik dua kali dokumen untuk membukanya. Jika galat muncul saat Anda mencoba membukanya, ikuti langkah-langkah berikut:
- Windows – Klik kanan dokumen, pilih “Open with”, dan klik peramban yang ingin digunakan.
- Mac – Klik dokumen satu kali, klik menu “File”, pilih “Open With”, dan pilih peramban yang ingin digunakan.
9
Sunting dokumen jika perlu. Anda mungkin melihat galat pada halaman. Untuk mengubah atau menanganinya, Anda bisa menyunting teks dokumen:
- Pada komputer Windows, klik kanan dokumen dan pilih “Edit” pada menu drop-down (jika Anda memasang Notepad++ pada komputer, opsi tersebut berlabel “Edit with Notepad++”).
- Pada komputer Mac, klik dokumen untuk memilihnya, pilih “File”, pilih “Open With”, dan klik “TextEdit”. Anda juga dapat menyeret dokumen HTML ke jendela TextEdit secara langsung.
- Di Chromebook, tutup aplikasi "Text", buka "Files", cari berkas kemudian klik.
Iklan

Tips

Penanda penutup harus selalu ditempatkan setelah penanda pembuka yang sesuai. Sebagai contoh, penanda <tag1><tag2> harus ditutup dengan penanda </tag2></tag1>.
Anda bisa menampilkan teks bergerak (ke arah samping) pada situs dengan penanda <marquee></marquee>. Namun, perlu diingat bahwa penanda ini mungkin tidak dikenali oleh beberapa peramban.
Kebanyakan orang menggunakan Notepad++ untuk menulis dan menyusun kode HTML.
Jika Anda ingin meratatengahkan gambar pada halaman, tikkan kode <class="center"> setelah nama/URL gambar pada penanda “img” (mis. <img src="URL" class="center">).

Peringatan

Ada baiknya Anda melakukan hosting gambar sendiri pada layanan seperti Imgur atau semacamnya jika ingin mengunggah gambar ke halaman web. Pengunggahan gambar milik orang lain dapat dianggap sebagai pelanggaran hak cipta.