Salah satu komponen dasar HTML adalah paragraf. Gunakan tag "<p>" dan "</p>" untuk mendefinisikan paragraf. Misalnya:
<p>Ini adalah sebuah paragraf. </p>
Hyperlink adalah tautan ke halaman atau situs lain. Gunakan tag "<a href=''>" dan "</a>" untuk membuat hyperlink, dimana atribut href menentukan URL link. Misalnya:
<a href="https://www.jb51.net">Ini adalah tautannya</a>
Gambar dapat meningkatkan dampak visual suatu halaman dan menyampaikan lebih banyak informasi. Sisipkan gambar menggunakan tag "<img src='' alt=''/>", di mana atribut src menentukan jalur ke file gambar dan atribut alt berisi teks alternatif yang ditampilkan ketika gambar tidak dapat ditampilkan. Misalnya:
<img src="image.jpg" alt="Gambar yang indah">
Tabel adalah cara utama menyajikan data pada halaman web. Gunakan tag "<table>", "<tr>" dan "<td>" untuk menentukan masing-masing tabel, baris, dan sel. Misalnya:
<tabel> <tr> <td>Baris pertama, kolom pertama</td> <td>Baris pertama, kolom kedua</td> </tr> <tr> <td>Baris kedua, kolom pertama</td> <td>Baris kedua, kolom kedua</td> </tr> </tabel>
Gunakan tag "<ul>" atau "<ol>" untuk membuat daftar tidak berurutan atau berurutan, lalu gunakan tag "<li>" untuk menentukan item daftar. Misalnya:
<ul> <li>Daftar item 1</li> <li>Daftar item 2</li> </ul> <ol> <li>Daftar item 1</li> <li>Daftar item 2</li> </ol>
Formulir adalah komponen yang digunakan untuk mengumpulkan masukan pengguna. Gunakan tag "<form>" untuk membuat formulir dan tag "<input>" untuk menentukan kolom input. Misalnya:
<formulir tindakan = "kirim.php" metode = "posting"> <label for="nama pengguna">Nama pengguna:</label> <input type="teks" nama="nama pengguna" id="nama pengguna"> <label for="password">Sandi:</label> <masukan tipe='kata sandi' nama='kata sandi' id='kata sandi'> <input type="kirim" value="Kirim"> </bentuk>
CSS dapat digunakan untuk mengontrol tampilan dan tata letak halaman web. Gaya CSS dapat ditambahkan ke dokumen HTML menggunakan tag "<style>". Misalnya:
<gaya>
tubuh {
warna latar belakang: #f2f2f2;
}
jam1 {
warna: biru;
perataan teks: tengah;
}
</gaya>Cuplikan kode di atas hanyalah puncak gunung es dalam bahasa HTML. Namun, mereka dapat membantu Anda membangun struktur dan gaya halaman web dasar, dan memberi Anda inspirasi untuk pembelajaran lebih lanjut. Sekarang, cobalah membuat website Anda sendiri menggunakan kode HTML berikut!
Pernyataan Dokumentasi HTML5
<!DOCTYPEhtml>
Blok kode di atas adalah deklarasi dokumen HTML5, yang menyatakan bahwa halaman web saat ini ditulis sesuai dengan standar HTML5.
Saat menulis halaman web, pastikan untuk menulis deklarasi dokumen HTML5 di bagian atas halaman web. Jika Anda tidak menulis deklarasi dokumen, beberapa browser akan memasuki mode aneh. Setelah memasuki mode aneh, browser akan mengurai halaman dan halaman tidak akan ditampilkan secara normal. Oleh karena itu, untuk menghindari memasuki mode ini, Anda harus menulis pernyataan dokumen.
Deklarasi dokumen yang umum digunakan
HTML5
<!DOCTYPEhtml>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transisi//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transisi//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Catatan: <!DOCTYPE> bukan tag HTML. Ini memberikan browser informasi (pernyataan) tentang versi HTML apa yang ditulis.
Agar kompatibel dengan beberapa halaman lama, browser memiliki dua mode penguraian:
Mode Standar Mode Standar
Mode Quirks, mode aneh
Mode aneh akan menghasilkan perilaku yang tidak dapat diprediksi saat mengurai halaman web, dan kita harus menghindari terjadinya mode aneh.
Tipe file <HTML></HTML> (ditempatkan di awal dan akhir file)
Judul dokumen <TITLE></TITLE> (harus ditempatkan di blok "Header")
Header <HEAD></HEAD> (informasi deskriptif, seperti "topik")
Gaya <BODY></BODY> (badan dokumen)
Judul <H?></H?> (dari 1 hingga 6, ada enam level pilihan)
Perataan judul <H?ALIGN=LEFT|CENTER|RIGHT></H?>
Bedakan <DIV></DIV>
Perataan yang dibedakan <DIVALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>
Blok kutipan <BLOCKQUOTE></BLOCKQUOTE> (biasanya menjorok ke dalam)
Penekanan <EM></EM> (biasanya ditampilkan dalam huruf miring)
Penekanan khusus pada <STRONG></STRONG> (biasanya ditampilkan dalam huruf tebal)
Kutipan <CITE></CITE> (biasanya dicetak miring)
Kode <CODE></CODE> (untuk menampilkan kode sumber)
Contoh<SAMP></SAMP>
Masukan papan ketik<KBD></KBD>
Variabel<VAR></VAR>
Definisikan <DFN></DFN> (tidak disediakan oleh beberapa browser)
Alamat<ADDRESS></ADDRESS>
Karakter besar<BIG></BIG>
Cetakan kecil<SMALL></SMALL>
Tebal<B></B>
miring<I></I>
Intinya <U></U> (beberapa browser masih tidak menyediakannya)
Coret <S></S> (beberapa browser masih tidak menyediakannya)
Subskrip<SUB></SUB>
Superskrip <SUP></SUP>
Mesin ketik <TT></TT> (ditampilkan dalam font spasi tunggal)
Format yang telah ditentukan <PRE></PRE> (mempertahankan ukuran spasi dalam file)
Lebar format <PRE WIDTH=?></PRE> yang telah diformat sebelumnya (dalam karakter)
Sejajarkan dengan <CENTER></CENTER> (teks dan gambar dapat diterima)
Shine <BLINK></BLINK> (tag yang paling banyak diolok-olok)
Ukuran font <FONTSIZE=?></FONT> (dari 1 hingga 7)
Ubah ukuran font <FONTSIZE=+|-?></FONT>
Ukuran font dasar <BASEFONTSIZE=?> (dari 1 hingga 7; defaultnya adalah 3)
Warna font<FONTCOLOR="#$$"></FONT> ($$ adalah kode warna)
1) Tekstur: <img src="alamat gambar">
2) Bergabunglah dengan tautan: <a href="Alamat terkait yang akan dihubungkan">Tulis kata-kata yang ingin Anda tulis</a>
3) Buka tautan di jendela baru: <a href="Alamat terkait" target="_blank">Tulis kata-kata yang ingin Anda tulis</a>
4) Font seluler (marquee): <marquee>Tulis kata-kata yang ingin Anda tulis</marquee>
5) Font tebal: <b>Tulis kata-kata yang ingin Anda tulis</b>
6) Font miring: <i>Tulis kata-kata yang ingin Anda tulis</i>
7) Garis bawah font: <u>Tulis kata-kata yang ingin Anda tulis</u>
8) Font dicoret: <s>Tulis kata-kata yang ingin Anda tulis</s>
9) Perbesar ukuran font: <big>Tulis kata yang ingin Anda tulis</big>
10) Kontrol ukuran font: <h1>Tulis kata yang ingin Anda tulis</h1> (ukuran font bisa dari h1-h5, h1 terbesar, h5 terkecil)
11) Ubah warna font: <font color="#value">Tulis kata yang ingin Anda tulis</font> (nilainya antara 000000 dan ffffff (16-bit heksadesimal)
12) Hilangkan garis bawah pada sambungan: <a href="Related address" style="text-decoration:none">Tulis kata-kata yang ingin Anda tulis</a>
13) Posting musik: <embed src="Alamat musik" width="Width" height="Height" autostart=false>
14) Tempelkan flash: <embed src="alamat flash" width="width" height="height">
15) Tempel file video: <img dynsrc="alamat file" width="width" height="height" start=mouseover>
16) Jeda baris:<br>
17) Paragraf: <p>Paragraf</p>
18) Gaya teks asli: <pre>Teks</pre>
19) Ubah latar belakang postingan: <body background="background image address">
20) Memperbaiki latar belakang postingan yang tidak bergulir dengan bilah gulir: <body background="Alamat gambar latar belakang" bodybgproperties=fixed>
21) Sesuaikan warna latar belakang postingan: <body bgcolor="#value">(lihat 10 untuk nilainya)
22) Posting musik latar: <bgsound="Alamat musik latar" loop=infinite>
23) Posting halaman web: <iframe.src="Alamat Terkait" width="Width" height="Height"></iframe>