10 Code Dasar HTML yang Harus Anda Ketahui

Meskipun situs web modern umumnya dibangun dengan antarmuka yang ramah pengguna, penting untuk mengetahui beberapa HTML dasar, terutama bagi pemula. Jika Anda mengetahui code dasar contoh HTML berikut (dan beberapa tambahan), Anda akan dapat membuat halaman web dasar dari awal atau mengubah kode yang dibuat oleh aplikasi seperti WordPress.

Kami telah memberikan contoh kode HTML dengan output untuk sebagian besar tag. Jika Anda ingin melihatnya beraksi, unduh sampel file HTML di akhir artikel. Anda dapat bermain dengannya di editor teks dan memuatnya di browser untuk melihat apa yang dilakukan perubahan Anda.

1. <html>

Ini adalah tag lain yang memberi tahu peramban bahwa ia membaca HTML. Tag <html> tepat setelah tag DOCTYPE, dan Anda menutupnya dengan tag </html> tepat di akhir file Anda. Semua hal lain dalam dokumen Anda berada di antara tag-tag ini.

2. <head>

Tag <head> memulai bagian tajuk dari file Anda. Hal-hal yang masuk di sini tidak muncul di halaman web Anda. Sebaliknya, ini berisi metadata untuk mesin pencari, dan info untuk browser Anda. Untuk halaman dasar, tag <head> akan berisi judul Anda, dan hanya itu saja. Tetapi ada beberapa hal lain yang dapat Anda sertakan, yang akan kami bahas sebentar lagi.

3. <title>

Tag ini menentukan judul halaman Anda. Yang perlu Anda lakukan adalah memasukkan judul Anda di tag dan menutupnya, seperti ini (saya juga menyertakan tag header):

<head>
<title> Situs Web Saya </title>
</head>

Itulah nama yang akan ditampilkan sebagai judul tab saat dibuka di browser.

4. <body>

Setelah Anda menutup bagian header, Anda sampai ke tubuh. Anda membuka ini dengan tag <body>, dan menutupnya dengan tag </body>. Itu tepat di akhir file Anda, tepat sebelum tag </html>.

Semua konten halaman web Anda masuk di antara tag-tag ini. Sesederhana kedengarannya:

<body>
Semua yang Anda inginkan ditampilkan di halaman Anda.
</body>

5. <h1>

Tag <h1> menentukan header level-satu pada halaman Anda. Ini biasanya akan menjadi judul, dan idealnya hanya ada satu di setiap halaman.

<h2> mendefinisikan level-dua header seperti header bagian, <h3> tingkat-tiga sub-header, dan seterusnya, turun ke <h6>. Sebagai contoh, nama-nama tag dalam artikel ini adalah header level-dua.

<h1> Header Besar dan Penting </h1>
<h2> Header Sedikit Kurang Besar </h2>
<h3> Sub-Judul </h3>

Hasil:

Seperti yang Anda lihat, mereka menjadi lebih kecil di setiap level.

6. <p>

Tag paragraf memulai paragraf baru. Ini biasanya memasukkan dua jeda baris.

Lihat, misalnya, pada jeda antara baris sebelumnya dan yang ini. Itulah yang akan dilakukan tag <p>.

<p> Paragraf pertama Anda. </p>
<p> Paragraf kedua Anda. </p>

Hasil:

Paragraf pertama Anda.

Paragraf kedua Anda.

Anda juga dapat menggunakan gaya CSS di tag paragraf Anda, seperti ini yang mengubah ukuran teks:

<p style = “font-size: 120%;”> 20% teks lebih besar </p>

Hasil:

20% teks lebih besar

7. <br>

Tag istirahat baris menyisipkan istirahat baris tunggal:

<p> Baris pertama. Situs
Baris kedua (dekat dengan yang pertama). </p>

Hasil:

Baris pertama.

Baris kedua (dekat dengan yang pertama).

Bekerja dengan cara serupa adalah tag <hr>. Ini menarik garis horizontal pada halaman Anda dan bagus untuk memisahkan bagian teks.

8. <strong>

Tag ini mendefinisikan teks penting. Secara umum, itu berarti huruf tebal. Namun, dimungkinkan untuk menggunakan CSS untuk membuat <strong> tampilan teks berbeda.

Namun, Anda dapat menggunakan <strong> untuk mencetak teks dengan aman.

<strong> Hal yang sangat penting yang ingin Anda katakan. </strong>

Hasil:

Hal yang sangat penting yang ingin Anda katakan.

Jika Anda terbiasa dengan tag <b> untuk teks tebal, Anda masih bisa menggunakannya. Tidak ada jaminan itu akan terus berfungsi dalam versi HTML yang akan datang, tetapi untuk saat ini, ia berfungsi.

9. <em>

Seperti <b> dan <strong>, <em> dan <i> terkait. <Em> tag mengidentifikasi menekankan teks, yang umumnya berarti akan mendapatkan dicetak miring. Sekali lagi, ada kemungkinan bahwa CSS akan membuat tampilan teks yang ditekankan berbeda.

<em> Baris yang ditekankan. </em>

Hasil:

Sebuah menekankan line.

Tag <i> masih berfungsi, tapi sekali lagi, itu mungkin akan ditinggalkan dalam versi HTML yang akan datang.

10. <ul>

Daftar yang tidak terurut jauh lebih sederhana daripada yang dipesan. Ini hanya daftar bullet.

<ul>
<Li> Butir pertama </ li>
<li> Item kedua </li>
<li> Item ketiga </li>
</ul>

Hasil:

item pertama
kedua barang
Item ketiga

daftar unordered juga memiliki “tipe” atribut, dan Anda dapat mengaturnya untuk “disc,” “lingkaran” atau “persegi.”

Share this:

Related posts:

Leave a Reply Cancel reply