Unduh PDF
Unduh PDF
Artikel wikiHow ini akan mengajarkan kepada Anda cara membuat halaman web menggunakan HTML. Beberapa elemen yang Anda bisa tambahkan ke halaman web, di antaranya, teks, tautan, dan gambar.
Langkah
-
Buka program penyunting teks sederhana. Pada komputer Windows, program penyunting teks sederhana yang tersedia adalah Notepad. Sementara itu, para pengguna komputer Mac bisa menggunakan program bernama TextEdit:
- Windows – Klik menu “ Start ” , tikkan notepad , dan klik “ Notepad ”.
- Mac – Klik Spotlight , tikkan textedit , dan klik “ TextEdit ” pada hasil pencarian.
-
Pahami penanda-penanda HTML. Saat menulis kode HTML, elemen-elemen pada halaman ditandai dengan penanda pembuka (<>) dan penanda penutup (</>). Teks atau kode khusus untuk elemen ditambahkan di antara kedua penanda tersebut.
- Sebagai contoh, paragraf dapat dibuat dengan mengetikkan penanda pembuka paragraf ( <p> ), memasukkan teks paragraf yang Anda inginkan, kemudian menyisipkan penanda penutup paragraf </p> .
- Setiap baris kode harus ditambahkan ke barisnya tersendiri sehingga Anda perlu menekan tombol ↵ Enter setelah selesai menulis kode.
-
Tinjau format dasar HTML. Pada setiap dokumen HTML yang Anda buat, awali dokumen dengan penanda " document type " atau jenis dokumen ( <!DOCTYPE html> ), penanda HTML ( <html> ), dan penanda “ BODY ” atau bagian utama halaman ( <body> ). Anda juga harus mengakhiri dokumen dengan penanda “ BODY ” penutup dan penanda HTML penutup. Sebagai contoh:
-
<!DOCTYPE html> -
<html> -
<body> -
</body> -
</html>
-
-
Coba pelajari CSS . CSS adalah bahasa yang berperan sebagai pelengkap HTML. Bahasa ini mencakup format halaman (mis. warna, teks rata tengah, dan lain-lain) dan aspek-aspek visual lainnya pada halaman web.Iklan
-
Lakukan pengaturan awal terlebih dahulu. Tambahkan teks atau kode HTML awal ke dokumen:
-
<!DOCTYPE html> -
<html> -
<body>
-
-
Buat judul halaman. Segmen ini juga dikenal sebagai “kepala” atau “ head ” dan menentukan teks yang ditampilkan pada tab peramban. Tambahkan kode berikut ke dokumen untuk membuat judul dan pastikan Anda mengganti "Judul Halaman" dengan judul yang diinginkan:
-
<head> -
<title>Judul Halaman</title> -
</head>
-
-
Tambahkan tajuk. Tikkan <h1>Teks</h1> dan tekan ↵ Enter . Anda bisa menempatkan teks yang diinginkan di antara penanda
<h1>dan</h1>.- Tajuk dapat dibuat “bertumpuk” pada halaman. Untuk setiap tajuk yang Anda ingin gunakan setelah tajuk pertama, cukup naikkan angka pada penanda (mis. untuk tajuk kedua, gunakan kode
<h2></h2>).
- Tajuk dapat dibuat “bertumpuk” pada halaman. Untuk setiap tajuk yang Anda ingin gunakan setelah tajuk pertama, cukup naikkan angka pada penanda (mis. untuk tajuk kedua, gunakan kode
-
Buat paragraf. Tikkan <p>Teks</p> dan tekan tombol ↵ Enter , serta pastikan Anda mengganti "Teks" dengan teks paragraf yang diinginkan.
- Anda bisa menambahkan teks pada baris baru dengan mengulangi penanda
<p></p>untuk setiap teks atau paragraf.
- Anda bisa menambahkan teks pada baris baru dengan mengulangi penanda
-
Ulangi proses penambahan tajuk dan paragraf. Anda bisa menambahkan tajuk dan paragraf ke halaman web sebanyak yang diinginkan.
-
Tambahkan pemisah pada halaman. Tikkan <br>Teks</br> dan tekan ↵ Enter . Penanda ini berfungsi membuat “sekat” atau pemisah antarparagraf jika Anda ingin memisahkan bagian-bagian tertentu.
-
Atur format teks paragraf. Anda bisa menggunakan beragam penanda di dalam penanda
<p></p>(sebagai contoh,<p><em></em></p>) untuk menentukan format teks:-
<em>teks</em>- Penanda ini berfungsi membuat teks miring . -
<strong>teks</strong>- Penanda ini berfungsi membuat teks tebal . -
<ins>teks</ins>- Penanda ini berfungsi membuat teks bergaris bawah. -
<del>teks</del>- Penanda ini berfungsi membuat teks yang dicoret. -
<small>teks</small>- Penanda ini berfungsi membuat teks berukuran kecil. -
<!---teks--->- Penanda ini berfungsi membuat teks yang tak terlihat. Biasanya, kode ini digunakan untuk menambahkan catatan pada halaman web.
-
-
Tambahkan penanda “ BODY ” dan HTML penutup. Setelah selesai menambahkan teks, tikkan </body> dan tekan ↵ Enter , kemudian tikkan </html> untuk menutup dokumen. Setelah secara teknis tulisan Anda selesai, Anda bisa menambahkan elemen lain seperti tautan, poin, dan gambar ke dokumen.Iklan
-
Cari bagian halaman yang Anda ingin tambahi tautan. Jika Anda ingin menambahkan tautan di tengah paragraf pada halaman, misalnya, kunjungi paragraf tersebut dan cari kata atau frasa yang Anda ingin gunakan sebagai tautan.
-
Salin URL situs web tujuan. Kunjungi situs web yang Anda ingin tautkan, kemudian pilih alamatnya pada bilah di bagian atas jendela dan tekan pintasan Ctrl + C (Windows) atau ⌘ Command + C (Mac).
-
Masukkan penanda pembuka tautan. Tikkan <a href=> pada ruang tepat sebelum kata atau frasa yang Anda ingin gunakan sebagai tautan.
-
Tempelkan URL situs. Klik ruang di antara penanda
href=dan>, kemudian tekan pintasan Ctrl + V (Windows) atau ⌘ Command + V (Mac). Tautan akan ditampilkan di samping penandahref=.- Sebagai contoh, jika Anda ingin membuat tautan ke YouTube, Anda akan melihat kode
<a href=https://www.youtube.com/>.
- Sebagai contoh, jika Anda ingin membuat tautan ke YouTube, Anda akan melihat kode
-
Tambahkan penanda penutup tautan. Di akhir teks yang Anda ingin gunakan sebagai tautan, tikkan </a> . Sebagai contoh, pada kalimat/teks "Ikuti saya di Twitter", Anda ingin membuat tautan ke Twitter dan menggunakan kata "Twitter" sebagai tautan. Kode yang perlu ditambahkan akan tampak seperti ini:
-
<a href=https://www.twitter.com/>Twitter</a>
-
-
Tambahkan penanda ID. Penanda ini memungkinkan Anda untuk menautkan satu teks ke segmen lain di paragraf yang berbeda pada halaman yang sama. Untuk membuat penanda ID:
- Ganti penanda
<p>dengan <p id=text> - Cari teks yang Anda ingin gunakan sebagai tautan.
- Tikkan <a href=#teks> sebelum teks. Pastikan teks setelah tagar ("#") sama dengan teks yang ditambahkan setelah kode "id=".
- Tikkan </a> setelah teks.
Iklan - Ganti penanda
-
Cari bagian yang Anda ingin tambahi daftar poin. Elemen ini cocok untuk menyebutkan informasi atau membuat langkah-langkah yang lebih terkelola/teratur. Setelah Anda menemukan paragraf yang pada bagian bawahnya Anda ingin tambahi daftar poin, beralihlah ke langkah selanjutnya.
-
Tambahkan pemisah halaman. Di atas bagian yang Anda ingin tambahi daftar poin, tikkan <br> dan tekan ↵ Enter .
-
Buat entri poin pertama. Tikkan <li>teks</li> dan tekan ↵ Enter . Pastikan Anda mengganti "teks" dengan teks entri poin yang diinginkan.
-
Tambahkan lebih banyak entri poin. Selama Anda mengapit teks dengan penanda
<li></li>, tulisan yang diapit penanda akan diformat sebagai entri poin. -
Buat subpoin. Tikkan <ul>teks</ul> dan tekan ↵ Enter . Teks yang diapit penanda tersebut akan ditampilkan lebih menjorok ke dalam di bawah poin sebelumnya (poin induk).
- Teks dengan penanda
<ul></ul>tidak akan memiliki titik atau simbol poin pada bagian awalnya.
- Teks dengan penanda
-
Akhiri pemisah halaman. Jika Anda sebelumnya menggunakan pemisah halaman, tikkan </br> dan tekan ↵ Enter . Daftar poin Anda akan ditampilkan secara terpisah dari elemen-elemen lainnya pada halaman.Iklan
-
Cari bagian yang Anda ingin tambahi gambar. Gambar akan ditampilkan di halaman web pada bagian apa pun yang ditambahi kode gambar.
-
Buat penanda gambar. Tikkan
<img, tetapi jangan langsung menekan tombol ↵ Enter . Karena penanda gambar atau " image " sendiri sudah menjadi penanda yang lengkap, Anda tidak membutuhkan penanda penutup. -
Tambahkan penanda sumber atau " source ". Tikkan src= setelah penanda
<img. Pastikan Anda menyisipkan spasi di antara kode "img" dan "src". -
Masukkan alamat gambar. Salin URL gambar yang Anda ingin tambahkan, kemudian tempelkan tepat setelah penanda sumber.
-
Tambahkan penanda gaya atau " style ". Tikkan style= , kemudian masukkan width:px;height:px .
-
Masukkan dimensi gambar. Tikkan lebar gambar (dalam satuan piksel) setelah kata " width: ", kemudian masukkan tinggi gambar (juga dalam satuan piksel) setelah kata " height: ".
-
Masukkan deskripsi alternatif. Teks ini akan ditampilkan jika gambar gagal dimuat. Untuk menambahkan deskripsi, tikkan alt= dan masukkan deskripsi yang diinginkan.
-
Tutup penanda gambar. Sisipkan kurung sudut > setelah karakter/huruf terakhir pada deskripsi alternatif untuk menutup penanda.
-
Tinjau kode gambar. Kode akan tampak seperti ini:
-
<img src=https://www.w3schools.com/w3css/img_fjords.jpg style=width:600px;height:400px alt=Fjord>
Iklan -
-
Klik File . Tombol ini berada di pojok kiri atas jendela Notepad. Menu drop-down akan ditampilkan setelahnya.
-
Klik Save As… . Opsi ini berada di bagian atas menu drop-down “ File ”.
-
Tentukan lokasi penyimpanan dokumen. Klik folder di sisi kiri jendela penelusuran berkas (mis. “ Desktop ”).
-
Masukkan nama untuk berkas HTML. Tikkan nama yang Anda ingin gunakan, diikuti ekstensi .html pada kolom " File name ".
- Jika Anda ingin menggunakan nama "anabul", misalnya, tikkan anabul.html .
-
Klik kotak drop-down " Save as type ". Menu drop-down akan ditampilkan setelahnya.
-
Klik All Files . Opsi ini berada pada menu drop-down .
-
Klik Save . Tombol ini berada di pojok kanan bawah jendela. Berkas teks akan disimpan sebagai halaman HTML setelahnya.
- Anda bisa membuka berkas halaman ini pada sebagian besar peramban dengan mengeklik dan menyeret berkas ke jendela peramban yang terbuka.
Iklan
-
Klik TextEdit . Tombol ini berada di pojok kiri atas layar. Menu drop-down akan ditampilkan.
-
Klik Preferences… . Opsi ini berada di bagian atas menu drop-down . Jendela “ Preferences ” akan dibuka.
-
Klik tab Open and Save . Tab ini berada di bagian atas halaman.
-
Hapus centang dari kotak " Add ".txt" extension to plain text files ". Kotak ini berada di bawah judul " When Saving a File ".
-
Tutup jendela “ Preferences ”. Klik lingkaran merah di pojok kiri atas jendela untuk menutupnya.
-
Klik Format . Tombol menu ini berada di atas layar.
-
Klik Make Plain Text . Opsi ini berada pada menu drop-down .
-
Klik File . Tombol ini berada di pojok kiri atas layar.
-
Klik Save . Opsi ini berada di bagian atas menu drop-down .
-
Masukkan nama untuk berkas HTML. Ganti nama pada kolom " Save As " dengan nama apa pun yang diinginkan, diikuti ekstensi .html .
- Sebagai contoh, jika Anda ingin membuat dokumen bernama "situs_webku", tikkan situs_webku.html .
-
Klik Save . Dokumen HTML akan disimpan ke lokasi penyimpanan utama komputer (mis. “ Desktop ”).
- Anda bisa membuka berkas halaman HTML pada sebagian besar peramban dengan mengeklik dan menyeret berkas ke jendela peramban yang terbuka.
Iklan
Tips
- Penggunaan program penyunting kode khusus seperti Notepad++ membuat pengetikan kode HTML menjadi lebih mudah dan intuitif dibandingkan penggunaan program seperti Notepad atau TextEdit.
Iklan
Peringatan
- Selalu periksa kembali kode sebelum Anda mengunggahnya ke situs aktif.
Iklan
Iklan
