HTML - Panduan Cepat

HTML adalah singkatan dari Hypertext Markup Language, dan ini adalah bahasa yang paling banyak digunakan untuk menulis Halaman Web.

Hypertextmengacu pada cara di mana halaman Web (dokumen HTML) ditautkan bersama. Jadi, tautan yang tersedia di halaman web disebut Hypertext.
Seperti namanya, HTML adalah file Markup Language yang berarti Anda menggunakan HTML untuk sekadar "menandai" dokumen teks dengan tag yang memberi tahu browser Web cara menyusunnya untuk ditampilkan.

Awalnya HTML dikembangkan dengan maksud untuk mendefinisikan struktur dokumen seperti heading, paragraf, list, dan lain sebagainya untuk memudahkan dalam berbagi informasi ilmiah antar peneliti.

Sekarang, HTML banyak digunakan untuk memformat halaman web dengan bantuan berbagai tag yang tersedia dalam bahasa HTML.

Dokumen HTML Dasar

Dalam bentuknya yang paling sederhana, berikut adalah contoh dokumen HTML -

<!DOCTYPE html>
<html>

   <head>
      <title>This is document title</title>
   </head>
	
   <body>
      <h1>This is a heading</h1>
      <p>Document content goes here.....</p>
   </body>
	
</html>

Tag HTML

Seperti yang dikatakan sebelumnya, HTML adalah bahasa markup dan menggunakan berbagai tag untuk memformat konten. Tag ini ditutup dengan kawat gigi sudut<Tag Name>. Kecuali beberapa tag, sebagian besar tag memiliki tag penutup yang sesuai. Sebagai contoh,<html> memiliki tag penutupnya </html> dan <body> tag memiliki tag penutupnya </body> tag dll.

Contoh dokumen HTML di atas menggunakan tag berikut -

Sr Tidak	Tag & Deskripsi
1	<!DOCTYPE...> Tag ini mendefinisikan jenis dokumen dan versi HTML.
2	<html> Tag ini membungkus dokumen HTML lengkap dan terutama terdiri dari header dokumen yang diwakili oleh <head> ... </head> dan badan dokumen yang diwakili oleh tag <body> ... </body>.
3	<head> Tag ini mewakili header dokumen yang dapat menyimpan tag HTML lain seperti <title>, <link> dll.
4	<title> Tag <title> digunakan di dalam tag <head> untuk menyebutkan judul dokumen.
5	<body> Tag ini mewakili badan dokumen yang menyimpan tag HTML lain seperti <h1>, <div>, <p> dll.
6	<h1> Tag ini mewakili tajuk.
7	<p> Tag ini mewakili sebuah paragraf.

Untuk mempelajari HTML, Anda perlu mempelajari berbagai tag dan memahami bagaimana perilakunya, saat memformat dokumen tekstual. Mempelajari HTML itu sederhana karena pengguna harus mempelajari penggunaan berbagai tag untuk memformat teks atau gambar untuk membuat halaman web yang indah.

World Wide Web Consortium (W3C) merekomendasikan untuk menggunakan tag huruf kecil mulai dari HTML 4.

Struktur Dokumen HTML

Dokumen HTML biasa akan memiliki struktur berikut -

<html>
   
   <head>
      Document header related tags
   </head>
   
   <body>
      Document body related tags
   </body>
   
</html>

Kita akan mempelajari semua tag header dan body di bab-bab selanjutnya, tetapi untuk sekarang mari kita lihat apa itu tag deklarasi dokumen.

Deklarasi <! DOCTYPE>

Tag deklarasi <! DOCTYPE> digunakan oleh browser web untuk memahami versi HTML yang digunakan dalam dokumen. Versi HTML saat ini adalah 5 dan menggunakan pernyataan berikut -

<!DOCTYPE html>

Ada banyak jenis deklarasi lain yang dapat digunakan dalam dokumen HTML tergantung pada versi HTML yang digunakan. Kita akan melihat detail lebih lanjut tentang ini saat membahas tag <! DOCTYPE ...> bersama dengan tag HTML lainnya.

Tag Judul

Dokumen apa pun dimulai dengan judul. Anda dapat menggunakan ukuran yang berbeda untuk heading Anda. HTML juga memiliki enam level heading, yang menggunakan elemen<h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>. Saat menampilkan heading apa pun, browser menambahkan satu baris sebelum dan satu baris setelah heading itu.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Heading Example</title>
   </head>
	
   <body>
      <h1>This is heading 1</h1>
      <h2>This is heading 2</h2>
      <h3>This is heading 3</h3>
      <h4>This is heading 4</h4>
      <h5>This is heading 5</h5>
      <h6>This is heading 6</h6>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Tag Paragraf

Itu <p>tag menawarkan cara untuk menyusun teks Anda menjadi paragraf yang berbeda. Setiap paragraf teks harus berada di antara tag pembuka <p> dan penutup </p> seperti yang ditunjukkan di bawah ini pada contoh -

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Paragraph Example</title>
   </head>
	
   <body>
      <p>Here is a first paragraph of text.</p>
      <p>Here is a second paragraph of text.</p>
      <p>Here is a third paragraph of text.</p>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Tag Jeda Baris

Kapanpun Anda menggunakan <br />elemen, apa pun yang mengikutinya dimulai dari baris berikutnya. Tag ini adalah contoh dari sebuahempty elemen, di mana Anda tidak perlu membuka dan menutup tag, karena tidak ada apa-apa di antara keduanya.

Tag <br /> memiliki spasi di antara karakter brdan garis miring ke depan. Jika Anda menghilangkan spasi ini, browser lama akan mengalami masalah dalam menampilkan jeda baris, sedangkan jika Anda melewatkan karakter garis miring dan hanya menggunakan <br> itu tidak valid dalam XHTML.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Line Break  Example</title>
   </head>
	
   <body>
      <p>Hello<br />
         You delivered your assignment ontime.<br />
         Thanks<br />
         Mahnaz</p>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Konten Centering

Kamu dapat memakai <center> tag untuk meletakkan konten apa pun di tengah halaman atau sel tabel apa pun.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Centring Content Example</title>
   </head>
	
   <body>
      <p>This text is not in the center.</p>
      
      <center>
         <p>This text is in the center.</p>
      </center>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Garis Horizontal

Garis horizontal digunakan untuk memecah bagian dokumen secara visual. Itu<hr> tag membuat garis dari posisi saat ini dalam dokumen ke margin kanan dan memutus garis yang sesuai.

Misalnya, Anda mungkin ingin memberi garis di antara dua paragraf seperti pada contoh di bawah ini -

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Horizontal Line Example</title>
   </head>
	
   <body>
      <p>This is paragraph one and should be on top</p>
      <hr />
      <p>This is paragraph two and should be at bottom</p>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Lagi <hr /> tag adalah contoh dari empty elemen, di mana Anda tidak perlu membuka dan menutup tag, karena tidak ada apa-apa di antara keduanya.

Itu <hr /> elemen memiliki spasi di antara karakter hrdan garis miring ke depan. Jika Anda menghilangkan spasi ini, browser lama akan kesulitan menampilkan garis horizontal, sedangkan jika Anda melewatkan karakter garis miring dan hanya menggunakan<hr> itu tidak valid dalam XHTML

Pertahankan Pemformatan

Terkadang, Anda ingin teks Anda mengikuti format persis seperti yang tertulis di dokumen HTML. Dalam kasus ini, Anda dapat menggunakan tag yang telah diformat sebelumnya<pre>.

Teks apa pun di antara pembukaan <pre> tag dan penutupnya </pre> tag akan mempertahankan pemformatan dokumen sumber.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Preserve Formatting Example</title>
   </head>
	
   <body>
      <pre>
         function testFunction( strText ){
            alert (strText)
         }
      </pre>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Coba gunakan kode yang sama tanpa menyimpannya di dalam <pre>...</pre> tag

Spasi Nonbreaking

Misalkan Anda ingin menggunakan frase "12 Angry Men." Di sini, Anda tidak ingin browser membagi "12, Angry" dan "Men" menjadi dua baris -

An example of this technique appears in the movie "12 Angry Men."

Jika Anda tidak ingin browser klien merusak teks, Anda harus menggunakan entitas spasi nonbreaking  bukannya ruang normal. Misalnya, saat membuat kode "12 Angry Men" dalam sebuah paragraf, Anda harus menggunakan sesuatu yang mirip dengan kode berikut -

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Nonbreaking Spaces Example</title>
   </head>
	
   <body>
      <p>An example of this technique appears in the movie "12&nbsp;Angry&nbsp;Men."</p>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Sebuah HTML elementditentukan oleh tag awal. Jika elemen berisi konten lain, itu diakhiri dengan tag penutup, di mana nama elemen diawali dengan garis miring seperti yang ditunjukkan di bawah ini dengan beberapa tag -

Mulai Tag	Kandungan	Tag Akhir
<p>	Ini adalah konten paragraf.	</p>
<h1>	Ini adalah konten judul.	</h1>
<div>	Ini adalah konten divisi.	</div>
<br />

Jadi disini <p>....</p> adalah elemen HTML, <h1>...</h1>adalah elemen HTML lainnya. Ada beberapa elemen HTML yang tidak perlu ditutup, seperti<img.../>, <hr /> dan <br />elemen. Ini dikenal sebagaivoid elements.

Dokumen HTML terdiri dari pohon elemen-elemen ini dan mereka menentukan bagaimana dokumen HTML harus dibuat, dan jenis konten apa yang harus ditempatkan di bagian mana dari dokumen HTML.

Tag HTML vs. Elemen

Elemen HTML ditentukan oleh tag awal . Jika elemen berisi konten lain, itu diakhiri dengan tag penutup .

Sebagai contoh, <p> adalah tag awal dari sebuah paragraf dan </p> adalah tag penutup dari paragraf yang sama tetapi <p>This is paragraph</p> adalah elemen paragraf.

Elemen HTML Bersarang

Sangat diperbolehkan untuk menyimpan satu elemen HTML di dalam elemen HTML lain -

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Nested Elements Example</title>
   </head>
	
   <body>
      <h1>This is <i>italic</i> heading</h1>
      <p>This is <u>underlined</u> paragraph</p>
   </body>
	
</html>

Ini akan menampilkan hasil berikut -

Kami telah melihat beberapa tag HTML dan penggunaannya seperti tag heading <h1>, <h2>, tag paragraf <p>dan tag lainnya. Sejauh ini kami telah menggunakannya dalam bentuk yang paling sederhana, tetapi sebagian besar tag HTML juga dapat memiliki atribut, yang merupakan bit informasi tambahan.

Atribut digunakan untuk menentukan karakteristik elemen HTML dan ditempatkan di dalam tag pembuka elemen. Semua atribut terdiri dari dua bagian - aname dan a value

Itu nameadalah properti yang ingin Anda tetapkan. Misalnya paragraf<p> elemen dalam contoh membawa atribut bernama align, yang bisa Anda gunakan untuk menunjukkan perataan paragraf di halaman.
Itu valueadalah apa yang Anda inginkan agar nilai properti ditetapkan dan selalu dimasukkan dalam kutipan. Contoh di bawah ini menunjukkan tiga nilai yang mungkin dari atribut align: left, center dan right.

Nama atribut dan nilai atribut tidak membedakan huruf besar / kecil. Namun, World Wide Web Consortium (W3C) merekomendasikan atribut huruf kecil / nilai atribut dalam rekomendasi HTML 4 mereka.

Contoh

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>Align Attribute  Example</title> 
   </head>
	
   <body> 
      <p align = "left">This is left aligned</p> 
      <p align = "center">This is center aligned</p> 
      <p align = "right">This is right aligned</p> 
   </body>
	
</html>

Ini akan menampilkan hasil berikut -

Atribut Inti

Empat atribut inti yang dapat digunakan pada sebagian besar elemen HTML (meskipun tidak semua) adalah -

Id
Title
Class
Style

Atribut Id

Itu idatribut dari sebuah tag HTML dapat digunakan untuk mengidentifikasi secara unik setiap elemen dalam halaman HTML. Ada dua alasan utama Anda mungkin ingin menggunakan atribut id pada sebuah elemen -

Jika sebuah elemen membawa atribut id sebagai pengenal unik, dimungkinkan untuk mengidentifikasi hanya elemen itu dan isinya.
Jika Anda memiliki dua elemen dengan nama yang sama dalam sebuah halaman Web (atau style sheet), Anda dapat menggunakan atribut id untuk membedakan antara elemen yang memiliki nama yang sama.

Kami akan membahas style sheet dalam tutorial terpisah. Untuk saat ini, mari gunakan atribut id untuk membedakan dua elemen paragraf seperti yang ditunjukkan di bawah ini.

Example

<p id = "html">This para explains what is HTML</p>
<p id = "css">This para explains what is Cascading Style Sheet</p>

Atribut judul

Itu titleatribut memberikan judul yang disarankan untuk elemen tersebut. Mereka sintaks untuktitle atribut serupa seperti yang dijelaskan untuk id atribut -

Perilaku atribut ini akan bergantung pada elemen yang membawanya, meskipun sering ditampilkan sebagai tooltip saat kursor datang ke atas elemen atau saat elemen sedang dimuat.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>The title Attribute Example</title>
   </head>
	
   <body>
      <h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Sekarang coba arahkan kursor ke atas "Contoh Tag Judul" dan Anda akan melihat bahwa judul apa pun yang Anda gunakan dalam kode Anda muncul sebagai keterangan alat kursor.

Atribut kelas

Itu classatribut digunakan untuk mengasosiasikan elemen dengan style sheet, dan menentukan kelas elemen. Anda akan mempelajari lebih lanjut tentang penggunaan atribut class ketika Anda akan mempelajari Cascading Style Sheet (CSS). Jadi untuk saat ini Anda bisa menghindarinya.

Nilai atribut juga dapat berupa daftar nama kelas yang dipisahkan spasi. Misalnya -

class = "className1 className2 className3"

Atribut gaya

Atribut style memungkinkan Anda menentukan aturan Cascading Style Sheet (CSS) di dalam elemen.

<!DOCTYPE html>
<html>

   <head>
      <title>The style Attribute</title>
   </head>
	
   <body>
      <p style = "font-family:arial; color:#FF0000;">Some text...</p>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Pada titik ini, kami tidak mempelajari CSS, jadi mari kita lanjutkan tanpa terlalu memikirkan CSS. Di sini, Anda perlu memahami apa itu atribut HTML dan bagaimana atribut tersebut dapat digunakan saat memformat konten.

Atribut Internasionalisasi

Ada tiga atribut internasionalisasi, yang tersedia untuk sebagian besar (meskipun tidak semua) elemen XHTML.

dir
lang
xml:lang

Atribut dir

Itu diratribut memungkinkan Anda untuk menunjukkan ke browser tentang arah teks harus mengalir. Atribut dir dapat mengambil salah satu dari dua nilai, seperti yang Anda lihat pada tabel berikut -

Nilai	Berarti
ltr	Kiri ke kanan (nilai default)
rtl	Kanan ke kiri (untuk bahasa seperti Ibrani atau Arab yang dibaca dari kanan ke kiri)

Example

<!DOCTYPE html>
<html dir = "rtl">

   <head>
      <title>Display Directions</title>
   </head>
	
   <body>
      This is how IE 5 renders right-to-left directed text.
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Saat atribut dir digunakan dalam tag <html>, ini menentukan bagaimana teks akan disajikan dalam seluruh dokumen. Saat digunakan dalam tag lain, ini mengontrol arah teks hanya untuk konten tag itu.

Atribut lang

Itu langatribut memungkinkan Anda untuk menunjukkan bahasa utama yang digunakan dalam dokumen, tetapi atribut ini disimpan dalam HTML hanya untuk kompatibilitas mundur dengan versi HTML sebelumnya. Atribut ini telah diganti denganxml:lang atribut dalam dokumen XHTML baru.

Nilai atribut lang adalah kode bahasa dua karakter standar ISO-639. MemeriksaHTML Language Codes: ISO 639 untuk daftar lengkap kode bahasa.

Example

<!DOCTYPE html>
<html lang = "en">

   <head>
      <title>English Language Page</title>
   </head>

   <body>
      This page is using English Language
   </body>

</html>

Ini akan menghasilkan hasil sebagai berikut -

Atribut xml: lang

The xml: lang atribut adalah pengganti XHTML untuk lang atribut. Nilai atribut xml: lang harus kode negara ISO-639 seperti yang disebutkan di bagian sebelumnya.

Atribut Generik

Berikut adalah tabel dari beberapa atribut lain yang mudah digunakan dengan banyak tag HTML.

Atribut	Pilihan	Fungsi
meluruskan	kanan, kiri, tengah	Meratakan tag secara horizontal
valign	atas, tengah, bawah	Meratakan tag secara vertikal dalam elemen HTML.
bgcolor.dll	numerik, heksadesimal, nilai RGB	Menempatkan warna latar belakang di belakang elemen
Latar Belakang	URL	Menempatkan gambar latar belakang di belakang elemen
Indo	Ditetapkan pengguna	Memberi nama elemen untuk digunakan dengan Cascading Style Sheets.
kelas	Ditetapkan pengguna	Mengklasifikasikan elemen untuk digunakan dengan Cascading Style Sheets.
lebar	Nilai angka	Menentukan lebar tabel, gambar, atau sel tabel.
tinggi	Nilai angka	Menentukan tinggi tabel, gambar, atau sel tabel.
judul	Ditetapkan pengguna	Judul elemen "Pop-up".

Kita akan melihat contoh terkait karena kita akan melanjutkan untuk mempelajari tag HTML lainnya. Untuk daftar lengkap Tag HTML dan atribut terkait, silakan periksa referensi ke Daftar Tag HTML .

Jika Anda menggunakan pengolah kata, Anda harus terbiasa dengan kemampuan membuat teks tebal, miring, atau bergaris bawah; ini hanya tiga dari sepuluh opsi yang tersedia untuk menunjukkan bagaimana teks dapat muncul dalam HTML dan XHTML.

Teks tebal

Apa pun yang muncul di dalam <b>...</b> elemen, ditampilkan dengan huruf tebal seperti yang ditunjukkan di bawah ini -

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Bold Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <b>bold</b> typeface.</p>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Teks Miring

Apa pun yang muncul di dalam <i>...</i> elemen ditampilkan dalam huruf miring seperti yang ditunjukkan di bawah ini -

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Italic Text Example</title>
   </head>
	
   <body>
      <p>The following word uses an <i>italicized</i> typeface.</p>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Teks yang Digarisbawahi

Apa pun yang muncul di dalam <u>...</u> elemen, ditampilkan dengan garis bawah seperti yang ditunjukkan di bawah ini -

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Underlined Text Example</title>
   </head>
	
   <body>
      <p>The following word uses an <u>underlined</u> typeface.</p>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Teks Teguran

Apa pun yang muncul di dalam <strike>...</strike> elemen ditampilkan dengan coretan, yang merupakan garis tipis melalui teks seperti yang ditunjukkan di bawah ini -

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Strike Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <strike>strikethrough</strike> typeface.</p>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Font spasi tunggal

Isi dari file <tt>...</tt>elemen ditulis dengan font monospace. Sebagian besar fonta dikenal sebagai font dengan lebar variabel karena huruf yang berbeda memiliki lebar yang berbeda (misalnya, huruf 'm' lebih lebar daripada huruf 'i'). Namun, dalam font monospace, setiap huruf memiliki lebar yang sama.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Monospaced Font Example</title>
   </head>
	
   <body>
      <p>The following word uses a <tt>monospaced</tt> typeface.</p>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Teks Superskrip

Isi dari file <sup>...</sup>elemen ditulis dalam superskrip; ukuran font yang digunakan sama dengan ukuran karakter yang mengelilinginya tetapi ditampilkan setengah tinggi karakter di atas karakter lainnya.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Superscript Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <sup>superscript</sup> typeface.</p>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Teks Subskrip

Isi dari file <sub>...</sub>elemen ditulis dalam subskrip; ukuran font yang digunakan sama dengan karakter yang mengelilinginya, tetapi ditampilkan setengah tinggi karakter di bawah karakter lainnya.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Subscript Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <sub>subscript</sub> typeface.</p>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Teks yang Disisipkan

Apa pun yang muncul di dalam <ins>...</ins> elemen ditampilkan sebagai teks yang disisipkan.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Inserted Text Example</title>
   </head>
	
   <body>
      <p>I want to drink <del>cola</del> <ins>wine</ins></p>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Teks yang Dihapus

Apa pun yang muncul di dalam <del>...</del> elemen, ditampilkan sebagai teks yang dihapus.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Deleted Text Example</title>
   </head>
	
   <body>
      <p>I want to drink <del>cola</del> <ins>wine</ins></p>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Teks Lebih Besar

Isi dari <big>...</big> elemen ditampilkan satu ukuran font lebih besar dari teks lainnya di sekitarnya seperti yang ditunjukkan di bawah ini -

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Larger Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <big>big</big> typeface.</p>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Teks Lebih Kecil

Isi dari <small>...</small> elemen ditampilkan satu ukuran font lebih kecil dari sisa teks di sekitarnya seperti yang ditunjukkan di bawah ini -

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Smaller Text Example</title>
   </head>

   <body>
      <p>The following word uses a <small>small</small> typeface.</p>
   </body>

</html>

Ini akan menghasilkan hasil sebagai berikut -

Mengelompokkan Konten

Itu <div> dan <span> elemen memungkinkan Anda untuk mengelompokkan beberapa elemen untuk membuat bagian atau subbagian halaman.

Misalnya, Anda mungkin ingin meletakkan semua catatan kaki pada halaman dalam elemen <div> untuk menunjukkan bahwa semua elemen di dalam elemen <div> berhubungan dengan catatan kaki. Anda kemudian dapat melampirkan gaya ke elemen <div> ini sehingga muncul menggunakan serangkaian aturan gaya khusus.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Div Tag Example</title>
   </head>
	
   <body>
      <div id = "menu" align = "middle" >
         <a href = "/index.htm">HOME</a> | 
         <a href = "/about/contact_us.htm">CONTACT</a> | 
         <a href = "/about/index.htm">ABOUT</a>
      </div>

      <div id = "content" align = "left" >
         <h5>Content Articles</h5>
         <p>Actual content goes here.....</p>
      </div>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Elemen <span>, di sisi lain, dapat digunakan untuk mengelompokkan elemen sebaris saja. Jadi, jika Anda memiliki bagian dari kalimat atau paragraf yang ingin Anda kelompokkan, Anda bisa menggunakan elemen <span> sebagai berikut.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Span Tag Example</title>
   </head>
	
   <body>
      <p>This is the example of <span style = "color:green">span tag</span>
         and the <span style = "color:red">div tag</span> alongwith CSS</p>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Tag ini biasanya digunakan dengan CSS untuk memungkinkan Anda melampirkan gaya ke bagian halaman.

Tag frase telah dikosongkan untuk tujuan tertentu, meskipun mereka ditampilkan dengan cara yang sama seperti tag dasar lainnya <b>, <i>, <pre>, dan <tt>, Anda telah melihat di bab sebelumnya. Bab ini akan memandu Anda mempelajari semua tag frase penting, jadi mari kita mulai melihatnya satu per satu.

Teks yang Ditekankan

Apa pun yang muncul di dalam <em>...</em> elemen ditampilkan sebagai teks yang ditekankan.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Emphasized Text Example</title>
   </head>
	
   <body>
      <p>The following word uses an <em>emphasized</em> typeface.</p>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Teks yang Ditandai

Apa pun yang muncul dengan-dalam <mark>...</mark> elemen, ditampilkan sebagai ditandai dengan tinta kuning.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Marked Text Example</title>
   </head>
	
   <body>
      <p>The following word has been <mark>marked</mark> with yellow</p>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Teks Kuat

Apa pun yang muncul di dalam <strong>...</strong> elemen ditampilkan sebagai teks penting.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Strong Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <strong>strong</strong> typeface.</p>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Singkatan Teks

Anda dapat menyingkat teks dengan meletakkannya di dalam tag pembuka <abbr> dan penutup </abbr>. Jika ada, atribut title [judul] harus berisi deskripsi lengkap ini dan tidak ada yang lain.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Text Abbreviation</title>
   </head>
	
   <body>
      <p>My best friend's name is  <abbr title = "Abhishek">Abhy</abbr>.</p>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Elemen Akronim

Itu <acronym> elemen memungkinkan Anda untuk menunjukkan bahwa teks antara tag <acronym> dan </acronym> adalah akronim.

Saat ini, browser utama tidak mengubah tampilan konten dari elemen <acronym>.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Acronym Example</title>
   </head>
	
   <body>
      <p>This chapter covers marking up text in <acronym>XHTML</acronym>.</p>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Arah Teks

Itu <bdo>...</bdo> elemen adalah singkatan dari Bi-Directional Override dan digunakan untuk mengganti arah teks saat ini.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Text Direction Example</title>
   </head>

   <body>
      <p>This text will go left to right.</p>
      <p><bdo dir = "rtl">This text will go right to left.</bdo></p>
   </body>

</html>

Ini akan menghasilkan hasil sebagai berikut -

Ketentuan Khusus

Itu <dfn>...</dfn>elemen (atau Elemen Definisi HTML) memungkinkan Anda untuk menentukan bahwa Anda memperkenalkan istilah khusus. Penggunaannya mirip dengan kata miring di tengah-tengah paragraf.

Biasanya, Anda akan menggunakan elemen <dfn> saat pertama kali Anda memperkenalkan istilah kunci. Peramban terbaru merender konten elemen <dfn> dengan font miring.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Special Terms Example</title>
   </head>
	
   <body>
      <p>The following word is a <dfn>special</dfn> term.</p>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Mengutip Teks

Ketika Anda ingin mengutip suatu bagian dari sumber lain, Anda harus meletakkannya di antaranya <blockquote>...</blockquote> tag.

Teks di dalam elemen <blockquote> biasanya menjorok dari tepi kiri dan kanan teks di sekitarnya, dan terkadang menggunakan font miring.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Blockquote Example</title>
   </head>
	
   <body>
      <p>The following description of XHTML is taken from the W3C Web site:</p>

      <blockquote>XHTML 1.0 is the W3C's first Recommendation for XHTML,following on 
         from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.</blockquote>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Kutipan Singkat

Itu <q>...</q> elemen digunakan saat Anda ingin menambahkan tanda kutip ganda dalam kalimat.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Double Quote Example</title>
   </head>
	
   <body>
      <p>Amit is in Spain, <q>I think I am wrong</q>.</p>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Kutipan Teks

Jika Anda mengutip teks, Anda dapat menunjukkan sumber yang menempatkannya di antara pembukaan <cite> tag dan penutup </cite> menandai

Seperti yang Anda harapkan dalam publikasi cetak, konten elemen <cite> ditampilkan dalam teks miring secara default.

Contoh

<!DOCTYPE html>
<html>
   
   <head>
      <title>Citations Example</title>
   </head>
   
   <body>
      <p>This HTML tutorial is derived from <cite>W3 Standard for HTML</cite>.</p>
   </body>
   
</html>

Ini akan menghasilkan hasil sebagai berikut -

Kode Komputer

Kode pemrograman apa pun yang muncul di halaman Web harus ditempatkan di dalamnya <code>...</code>tag. Biasanya konten elemen <code> disajikan dalam font monospace, seperti kode di kebanyakan buku pemrograman.

Contoh

<!DOCTYPE html>
<html>
   
   <head>
      <title>Computer Code Example</title>
   </head>
   
   <body>
      <p>Regular text. <code>This is code.</code> Regular text.</p>
   </body>
   
</html>

Ini akan menghasilkan hasil sebagai berikut -

Teks Keyboard

Saat Anda berbicara tentang komputer, jika Anda ingin memberi tahu pembaca untuk memasukkan beberapa teks, Anda dapat menggunakan <kbd>...</kbd> elemen untuk menunjukkan apa yang harus diketik, seperti dalam contoh ini.

Contoh

<!DOCTYPE html>
<html>
   
   <head>
      <title>Keyboard Text Example</title>
   </head>
   
   <body>
      <p>Regular text. <kbd>This is inside kbd element</kbd> Regular text.</p>
   </body>
   
</html>

Ini akan menghasilkan hasil sebagai berikut -

Variabel Pemrograman

Elemen ini biasanya digunakan bersama dengan <pre> dan <code> elemen untuk menunjukkan bahwa konten elemen itu adalah variabel.

Contoh

<!DOCTYPE html>
<html>
   
   <head>
      <title>Variable Text Example</title>
   </head>
   
   <body>
      <p><code>document.write("<var>user-name</var>")</code></p>
   </body>
   
</html>

Ini akan menghasilkan hasil sebagai berikut -

Keluaran Program

Itu <samp>...</samp> elemen menunjukkan contoh keluaran dari suatu program, dan skrip dll. Sekali lagi, ini terutama digunakan saat mendokumentasikan konsep pemrograman atau pengkodean.

Contoh

<!DOCTYPE html>
<html>
   
   <head>
      <title>Program Output Example</title>
   </head>
   
   <body>
      <p>Result produced by the program is <samp>Hello World!</samp></p>
   </body>
   
</html>

Ini akan menghasilkan hasil sebagai berikut -

Teks Alamat

Itu <address>...</address> elemen digunakan untuk memuat alamat apa pun.

Contoh

<!DOCTYPE html>
<html>
   
   <head>
      <title>Address Example</title>
   </head>
   
   <body>
      <address>388A, Road No 22, Jubilee Hills -  Hyderabad</address>
   </body>
   
</html>

Ini akan menghasilkan hasil sebagai berikut -

HTML memungkinkan Anda menentukan metadata - informasi penting tambahan tentang dokumen dalam berbagai cara. Elemen META dapat digunakan untuk memasukkan pasangan nama / nilai yang menggambarkan properti dokumen HTML, seperti penulis, tanggal kedaluwarsa, daftar kata kunci, penulis dokumen, dll.

Itu <meta>tag digunakan untuk memberikan informasi tambahan tersebut. Tag ini adalah elemen kosong sehingga tidak memiliki tag penutup tetapi membawa informasi di dalam atributnya.

Anda dapat memasukkan satu atau lebih tag meta dalam dokumen Anda berdasarkan informasi apa yang ingin Anda simpan di dokumen Anda, tetapi secara umum, tag meta tidak memengaruhi tampilan fisik dokumen jadi dari sudut pandang tampilan, tidak masalah jika Anda menyertakannya. mereka atau tidak.

Menambahkan Tag Meta ke Dokumen Anda

Anda dapat menambahkan metadata ke halaman web Anda dengan menempatkan tag <meta> di dalam header dokumen yang diwakili oleh <head> dan </head>tag. Sebuah tag meta dapat memiliki atribut berikut selain atribut inti -

Sr Tidak	Atribut & Deskripsi
1	Name Nama properti. Bisa apa saja. Contohnya termasuk, kata kunci, deskripsi, penulis, direvisi, generator dll.
2	content Menentukan nilai properti.
3	scheme Menentukan skema untuk menafsirkan nilai properti (seperti yang dideklarasikan di atribut konten).
4	http-equiv Digunakan untuk header pesan tanggapan http. Misalnya, http-equiv dapat digunakan untuk menyegarkan halaman atau menyetel cookie. Nilainya mencakup tipe konten, kedaluwarsa, penyegaran, dan set-cookie.

Menentukan Kata Kunci

Anda dapat menggunakan tag <meta> untuk menentukan kata kunci penting yang terkait dengan dokumen dan kemudian kata kunci ini digunakan oleh mesin pencari saat mengindeks halaman web Anda untuk tujuan pencarian.

Contoh

Berikut adalah contoh, di mana kita menambahkan HTML, Meta Tag, Metadata sebagai kata kunci penting tentang dokumen.

<!DOCTYPE html>
<html>
   
   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
   </head>
   
   <body>
      <p>Hello HTML5!</p>
   </body>
   
</html>

Ini akan menghasilkan hasil sebagai berikut -

Deskripsi Dokumen

Anda dapat menggunakan tag <meta> untuk memberikan penjelasan singkat tentang dokumen tersebut. Ini lagi-lagi dapat digunakan oleh berbagai mesin pencari saat mengindeks halaman web Anda untuk tujuan pencarian.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
   
</html>

Tanggal Revisi Dokumen

Anda dapat menggunakan tag <meta> untuk memberikan informasi tentang kapan terakhir kali dokumen diperbarui. Informasi ini dapat digunakan oleh berbagai browser web sambil menyegarkan halaman web Anda.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

Menyegarkan Dokumen

Tag <meta> dapat digunakan untuk menentukan durasi setelah halaman web Anda akan terus menyegarkan secara otomatis.

Contoh

Jika Anda ingin halaman Anda tetap segar setelah setiap 5 detik, gunakan sintaks berikut.

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
      <meta http-equiv = "refresh" content = "5" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

Pengalihan Halaman

Anda dapat menggunakan tag <meta> untuk mengarahkan halaman Anda ke halaman web lain. Anda juga dapat menentukan durasi jika Anda ingin mengarahkan ulang halaman setelah beberapa detik.

Contoh

Berikut ini adalah contoh pengalihan halaman saat ini ke halaman lain setelah 5 detik. Jika Anda ingin mengalihkan halaman dengan segera, jangan tentukan atribut konten .

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
      <meta http-equiv = "refresh" content = "5; url = http://www.tutorialspoint.com" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

Mengatur Cookies

Cookie adalah data, disimpan dalam file teks kecil di komputer Anda dan dipertukarkan antara browser web dan server web untuk melacak berbagai informasi berdasarkan kebutuhan aplikasi web Anda.

Anda dapat menggunakan tag <meta> untuk menyimpan cookie di sisi klien dan nanti informasi ini dapat digunakan oleh Server Web untuk melacak pengunjung situs.

Contoh

Berikut ini adalah contoh pengalihan halaman saat ini ke halaman lain setelah 5 detik. Jika Anda ingin mengalihkan halaman dengan segera, jangan tentukan atribut konten .

<!DOCTYPE html>
<html>
   <head>
      <title>Meta Tags Example</title>
      <meta http-equiv = "cookie" content = "userid = xyz; expires = Wednesday, 08-Aug-15 23:59:59 GMT;" />
         
   </head>
   <body>
      <p>Hello HTML5!</p>
   </body>
</html>

Jika Anda tidak menyertakan tanggal dan waktu kedaluwarsa, cookie dianggap sebagai cookie sesi dan akan dihapus saat pengguna keluar dari browser.

Note- Anda dapat memeriksa tutorial PHP dan Cookie untuk detail lengkap tentang Cookie.

Mengatur Nama Penulis

Anda dapat mengatur nama penulis di halaman web menggunakan tag meta. Lihat contoh di bawah -

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "author" content = "Mahnaz Mohtashim" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

Tentukan Kumpulan Karakter

Anda dapat menggunakan tag <meta> untuk menentukan kumpulan karakter yang digunakan dalam halaman web.

Contoh

Secara default, server Web dan browser Web menggunakan pengkodean ISO-8859-1 (Latin1) untuk memproses halaman Web. Berikut adalah contoh untuk mengatur pengkodean UTF-8 -

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "author" content = "Mahnaz Mohtashim" />
      <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

Untuk menyajikan halaman statis dengan karakter Cina tradisional, halaman web harus berisi tag <meta> untuk menyetel pengkodean Big5 -

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "author" content = "Mahnaz Mohtashim" />
      <meta http-equiv = "Content-Type" content = "text/html; charset = Big5" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

Komentar adalah sepotong kode yang diabaikan oleh browser web mana pun. Menambahkan komentar ke dalam kode HTML Anda merupakan praktik yang baik, terutama dalam dokumen yang kompleks, untuk menunjukkan bagian dokumen, dan catatan lain apa pun kepada siapa pun yang melihat kode tersebut. Komentar membantu Anda dan orang lain memahami kode Anda dan meningkatkan keterbacaan kode.

Komentar HTML ditempatkan di antaranya tag. Jadi, konten apa pun yang ditempatkan dengan tag-in <! - ... -> akan diperlakukan sebagai komentar dan akan diabaikan sepenuhnya oleh browser.

Contoh

<!DOCTYPE html>
<html>

   <head>  <!-- Document Header Starts -->
      <title>This is document title</title>
   </head> <!-- Document Header Ends -->
	
   <body>
      <p>Document content goes here.....</p>
   </body>
	
</html>

Ini akan menghasilkan hasil berikut tanpa menampilkan konten yang diberikan sebagai bagian dari komentar -

Komentar Valid vs Invalid

Komentar tidak bersarang, artinya komentar tidak dapat dimasukkan ke dalam komentar lain. Kedua, urutan tanda hubung ganda "-" mungkin tidak muncul di dalam komentar kecuali sebagai bagian dari penutup -> tag. Anda juga harus memastikan bahwa tidak ada spasi di awal string komentar.

Contoh

Di sini, komentar yang diberikan adalah komentar yang valid dan akan dihapus oleh browser.

<!DOCTYPE html>
<html>

   <head>
      <title>Valid Comment Example</title>
   </head>
	
   <body>
      <!--   This is valid comment -->
      <p>Document content goes here.....</p>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Namun, baris berikut bukanlah komentar yang valid dan akan ditampilkan oleh browser. Ini karena ada spasi antara kurung siku kiri dan tanda seru.

<!DOCTYPE html>
<html>

   <head>  
      <title>Invalid Comment Example</title>
   </head>
	
   <body>
      < !--   This is not a valid comment -->
      <p>Document content goes here.....</p>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Komentar Multiline

Sejauh ini kami telah melihat komentar baris tunggal, tetapi HTML juga mendukung komentar multi-baris.

Anda dapat mengomentari beberapa baris dengan tag awal khusus <! - dan tag penutup -> ditempatkan sebelum baris pertama dan akhir baris terakhir seperti yang ditunjukkan pada contoh di bawah ini.

Contoh

<!DOCTYPE html>
<html>

   <head>  
      <title>Multiline Comments</title>
   </head> 
	
   <body>
      <!-- 
         This is a multiline comment and it can
         span through as many as lines you like.
      -->
      
      <p>Document content goes here.....</p>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Komentar Bersyarat

Komentar bersyarat hanya berfungsi di Internet Explorer (IE) pada Windows tetapi diabaikan oleh browser lain. Mereka didukung dari Explorer 5 dan seterusnya, dan Anda dapat menggunakannya untuk memberikan instruksi bersyarat ke berbagai versi IE.

Contoh

<!DOCTYPE html>
<html>

   <head>  
      <title>Conditional Comments</title>

      <!--[if IE 6]>
         Special instructions for IE 6 here
      <![endif]-->
   </head> 
   
   <body>
      <p>Document content goes here.....</p>
   </body>
	
</html>

Anda akan menemukan situasi di mana Anda perlu menerapkan lembar gaya yang berbeda berdasarkan versi Internet Explorer yang berbeda, dalam situasi seperti itu komentar bersyarat akan sangat membantu.

Menggunakan Tag Komentar

Ada beberapa browser yang mendukung tag <comment> untuk mengomentari bagian dari kode HTML.

Note- Tag <comment> tidak digunakan lagi di HTML5. Jangan gunakan elemen ini.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Using Comment Tag</title>
   </head>
	
   <body>
      <p>This is <comment>not</comment> Internet Explorer.</p>
   </body>
	
</html>

Jika Anda menggunakan IE, maka akan menghasilkan hasil sebagai berikut -

Tetapi jika Anda tidak menggunakan IE, maka itu akan menghasilkan hasil sebagai berikut -

Kode Skrip Komentar

Meskipun Anda akan mempelajari JavaScript dengan HTML, dalam tutorial terpisah, tetapi di sini Anda harus membuat catatan bahwa jika Anda menggunakan Java Script atau VB Script dalam kode HTML Anda, maka disarankan untuk meletakkan kode skrip itu di dalam komentar HTML yang tepat agar lama browser dapat bekerja dengan baik.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Commenting Script Code</title>
      
      <script>
         <!-- 
            document.write("Hello World!")
         //-->
      </script>
   </head>
	
   <body>
      <p>Hello , World!</p>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Lembar Gaya Berkomentar

Meskipun Anda akan belajar menggunakan style sheets dengan HTML dalam tutorial terpisah, tetapi di sini Anda harus membuat catatan bahwa jika Anda menggunakan Cascading Style Sheet (CSS) dalam kode HTML Anda, maka disarankan untuk meletakkan kode style sheet itu di dalam komentar HTML yang tepat. agar browser lama dapat bekerja dengan baik.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Commenting Style Sheets</title>
      
      <style>
         <!--
            .example {
               border:1px solid #4a7d49;
            }
         //-->
      </style>
   </head>
	
   <body>
      <div class = "example">Hello , World!</div>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Gambar sangat penting untuk mempercantik sekaligus untuk menggambarkan banyak konsep kompleks dengan cara yang sederhana di halaman web Anda. Tutorial ini akan memandu Anda melalui langkah-langkah sederhana untuk menggunakan gambar di halaman web Anda.

Sisipkan Gambar

Anda dapat memasukkan gambar apa pun di halaman web Anda dengan menggunakan <img>menandai. Berikut ini adalah sintaks sederhana untuk menggunakan tag ini.

<img src = "Image URL" ... attributes-list/>

Tag <img> adalah tag kosong yang artinya hanya dapat berisi daftar atribut dan tidak memiliki tag penutup.

Contoh

Untuk mencoba contoh berikut, mari simpan file HTML test.htm dan file gambar test.png di direktori yang sama -

<!DOCTYPE html>
<html>

   <head>
      <title>Using Image in Webpage</title>
   </head>
	
   <body>
      <p>Simple Image Insert</p>
      <img src = "/html/images/test.png" alt = "Test Image" />
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Anda dapat menggunakan file gambar PNG, JPEG atau GIF berdasarkan kenyamanan Anda, tetapi pastikan Anda menentukan nama file gambar yang benar di srcatribut. Nama gambar selalu peka huruf besar / kecil.

Itu alt atribut adalah atribut wajib yang menentukan teks alternatif untuk gambar, jika gambar tidak dapat ditampilkan.

Atur Lokasi Gambar

Biasanya kami menyimpan semua gambar di direktori terpisah. Jadi mari kita simpan file HTML test.htm di direktori home kita dan buat subdirektoriimages di dalam direktori home tempat kita akan menyimpan image test.png kita.

Contoh

Dengan asumsi lokasi gambar kita adalah "image / test.png", coba contoh berikut -

<!DOCTYPE html>
<html>

   <head>
      <title>Using Image in Webpage</title>
   </head>
	
   <body>
      <p>Simple Image Insert</p>
      <img src = "/html/images/test.png" alt = "Test Image" />
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Atur Lebar / Tinggi Gambar

Anda dapat mengatur lebar dan tinggi gambar berdasarkan kebutuhan Anda menggunakan width dan heightatribut. Anda dapat menentukan lebar dan tinggi gambar dalam piksel atau persentase dari ukuran sebenarnya.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Set Image Width and Height</title>
   </head>
	
   <body>
      <p>Setting image width and height</p>
      <img src = "/html/images/test.png" alt = "Test Image" width = "150" height = "100"/>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Atur Perbatasan Gambar

Secara default, gambar akan memiliki border di sekitarnya, Anda dapat menentukan ketebalan border dalam bentuk piksel menggunakan atribut border. Ketebalan 0 berarti, tidak ada batas di sekeliling gambar.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Set Image Border</title>
   </head>
	
   <body>
      <p>Setting image Border</p>
      <img src = "/html/images/test.png" alt = "Test Image" border = "3"/>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Atur Image Alignment

Secara default, gambar akan sejajar di sisi kiri halaman, tetapi Anda dapat menggunakan align atribut untuk mengaturnya di tengah atau kanan.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Set Image Alignment</title>
   </head>
	
   <body>
      <p>Setting image Alignment</p>
      <img src = "/html/images/test.png" alt = "Test Image" border = "3" align = "right"/>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Grafik Web Gratis

Untuk Grafik Web Gratis termasuk pola, Anda dapat melihat Grafik Web Gratis

Tabel HTML memungkinkan penulis web untuk mengatur data seperti teks, gambar, tautan, tabel lain, dll. Ke dalam baris dan kolom sel.

Tabel HTML dibuat menggunakan <table> tag di mana <tr> tag digunakan untuk membuat baris tabel dan <td>tag digunakan untuk membuat sel data. Elemen di bawah <td> biasa dan rata kiri secara default

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Tables</title>
   </head>
	
   <body>
      <table border = "1">
         <tr>
            <td>Row 1, Column 1</td>
            <td>Row 1, Column 2</td>
         </tr>
         
         <tr>
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2</td>
         </tr>
      </table>
      
   </body>
</html>

Ini akan menghasilkan hasil sebagai berikut -

Di sini borderadalah atribut dari tag <table> dan digunakan untuk memberi batas di semua sel. Jika Anda tidak membutuhkan border, maka Anda dapat menggunakan border = "0".

Judul Tabel

Judul tabel dapat ditentukan menggunakan <th>menandai. Tag ini akan menggantikan tag <td>, yang digunakan untuk merepresentasikan data cell yang sebenarnya. Biasanya Anda akan meletakkan baris teratas sebagai judul tabel seperti yang ditunjukkan di bawah ini, jika tidak, Anda dapat menggunakan elemen <th> di baris mana pun. Judul, yang didefinisikan dalam tag <th> ditengahkan dan dicetak tebal secara default.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Header</title>
   </head>
	
   <body>
      <table border = "1">
         <tr>
            <th>Name</th>
            <th>Salary</th>
         </tr>
         <tr>
            <td>Ramesh Raman</td>
            <td>5000</td>
         </tr>
         
         <tr>
            <td>Shabbir Hussein</td>
            <td>7000</td>
         </tr>
      </table>
   </body>
   
</html>

Ini akan menghasilkan hasil sebagai berikut -

Atribut Cellpadding dan Cellspacing

Ada dua atribut yang disebut cellpadding dan cellspacing yang akan Anda gunakan untuk mengatur white space di sel tabel Anda. Atribut cellspacing mendefinisikan spasi antar sel tabel, sedangkan cellpadding mewakili jarak antara batas sel dan konten di dalam sel.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Cellpadding</title>
   </head>
	
   <body>
      <table border = "1" cellpadding = "5" cellspacing = "5">
         <tr>
            <th>Name</th>
            <th>Salary</th>
         </tr>
         <tr>
            <td>Ramesh Raman</td>
            <td>5000</td>
         </tr>
         <tr>
            <td>Shabbir Hussein</td>
            <td>7000</td>
         </tr>
      </table>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Atribut Colspan dan Rowspan

Anda akan menggunakan colspanatribut jika Anda ingin menggabungkan dua atau lebih kolom menjadi satu kolom. Cara serupa yang akan Anda gunakanrowspan jika Anda ingin menggabungkan dua baris atau lebih.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Colspan/Rowspan</title>
   </head>
	
   <body>
      <table border = "1">
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
         </tr>
         <tr>
            <td rowspan = "2">Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td>
            <td>Row 1 Cell 3</td>
         </tr>
         <tr>
            <td>Row 2 Cell 2</td>
            <td>Row 2 Cell 3</td>
         </tr>
         <tr>
            <td colspan = "3">Row 3 Cell 1</td>
         </tr>
      </table>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Latar Belakang Tabel

Anda dapat mengatur latar belakang tabel menggunakan salah satu dari dua cara berikut -

bgcolor atribut - Anda dapat mengatur warna latar belakang untuk seluruh tabel atau hanya untuk satu sel.
background atribut - Anda dapat mengatur gambar latar belakang untuk seluruh tabel atau hanya untuk satu sel.

Anda juga dapat mengatur warna batas juga menggunakan bordercolor atribut.

Note- Atribut bgcolor , background , dan bordercolor tidak digunakan lagi di HTML5. Jangan gunakan atribut ini.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Background</title>
   </head>
	
   <body>
      <table border = "1" bordercolor = "green" bgcolor = "yellow">
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
         </tr>
         <tr>
            <td rowspan = "2">Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td>
            <td>Row 1 Cell 3</td>
         </tr>
         <tr>
            <td>Row 2 Cell 2</td>
            <td>Row 2 Cell 3</td>
         </tr>
         <tr>
            <td colspan = "3">Row 3 Cell 1</td>
         </tr>
      </table>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Berikut adalah contoh penggunaan backgroundatribut. Di sini kita akan menggunakan gambar yang tersedia di direktori / images.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Background</title>
   </head>
	
   <body>
      <table border = "1" bordercolor = "green" background = "/images/test.png">
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
         </tr>
         <tr>
            <td rowspan = "2">Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td><td>Row 1 Cell 3</td>
         </tr>
         <tr>
            <td>Row 2 Cell 2</td>
            <td>Row 2 Cell 3</td>
         </tr>
         <tr>
            <td colspan = "3">Row 3 Cell 1</td>
         </tr>
      </table>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut. Di sini gambar latar belakang tidak berlaku untuk header tabel.

Tinggi dan Lebar Meja

Anda dapat mengatur lebar dan tinggi tabel menggunakan width dan heightatribut. Anda dapat menentukan lebar atau tinggi tabel dalam bentuk piksel atau dalam persentase area layar yang tersedia.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Width/Height</title>
   </head>
	
   <body>
      <table border = "1" width = "400" height = "150">
         <tr>
            <td>Row 1, Column 1</td>
            <td>Row 1, Column 2</td>
         </tr>
         
         <tr>
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2</td>
         </tr>
      </table>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Keterangan Tabel

Itu captiontag akan berfungsi sebagai judul atau penjelasan untuk tabel dan muncul di bagian atas tabel. Tag ini tidak digunakan lagi pada versi HTML / XHTML yang lebih baru.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Caption</title>
   </head>
	
   <body>
      <table border = "1" width = "100%">
         <caption>This is the caption</caption>
         
         <tr>
            <td>row 1, column 1</td><td>row 1, columnn 2</td>
         </tr>
         
         <tr>
            <td>row 2, column 1</td><td>row 2, columnn 2</td>
         </tr>
      </table>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Header Tabel, Isi, dan Footer

Tabel dapat dibagi menjadi tiga bagian - header, body, dan foot. Kepala dan kaki agak mirip dengan header dan footer dalam dokumen yang diproses kata yang tetap sama untuk setiap halaman, sedangkan isi adalah pemegang konten utama tabel.

Tiga elemen untuk memisahkan kepala, badan, dan kaki tabel adalah -

<thead> - untuk membuat tajuk tabel terpisah.
<tbody> - untuk menunjukkan bagian utama tabel.
<tfoot> - untuk membuat footer tabel terpisah.

Sebuah tabel dapat berisi beberapa elemen <tbody> untuk menunjukkan halaman atau grup data yang berbeda. Tetapi perlu dicatat bahwa tag <thead> dan <tfoot> harus muncul sebelum <tbody>

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table</title>
   </head>
	
   <body>
      <table border = "1" width = "100%">
         <thead>
            <tr>
               <td colspan = "4">This is the head of the table</td>
            </tr>
         </thead>
         
         <tfoot>
            <tr>
               <td colspan = "4">This is the foot of the table</td>
            </tr>
         </tfoot>
         
         <tbody>
            <tr>
               <td>Cell 1</td>
               <td>Cell 2</td>
               <td>Cell 3</td>
               <td>Cell 4</td>
            </tr>
         </tbody>
         
      </table>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Tabel Bersarang

Anda dapat menggunakan satu tabel di dalam tabel lain. Tidak hanya tabel, Anda dapat menggunakan hampir semua tag di dalam tag data tabel <td>.

Contoh

Berikut adalah contoh penggunaan tabel lain dan tag lain di dalam sel tabel.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table</title>
   </head>
	
   <body>
      <table border = "1" width = "100%">
         
         <tr>
            <td>
               <table border = "1" width = "100%">
                  <tr>
                     <th>Name</th>
                     <th>Salary</th>
                  </tr>
                  <tr>
                     <td>Ramesh Raman</td>
                     <td>5000</td>
                  </tr>
                  <tr>
                     <td>Shabbir Hussein</td>
                     <td>7000</td>
                  </tr>
               </table>
            </td>
         </tr>
         
      </table>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

HTML menawarkan tiga cara kepada penulis web untuk menentukan daftar informasi. Semua daftar harus berisi satu atau lebih elemen daftar. Daftar mungkin berisi -

<ul>- Daftar yang tidak berurutan. Ini akan mencantumkan item menggunakan peluru biasa.
<ol>- Daftar yang dipesan. Ini akan menggunakan skema angka yang berbeda untuk mencantumkan item Anda.
<dl>- Daftar definisi. Ini mengatur item Anda dengan cara yang sama seperti yang diatur dalam kamus.

Daftar HTML Unordered

Daftar tidak berurutan adalah kumpulan item terkait yang tidak memiliki urutan atau urutan khusus. Daftar ini dibuat dengan menggunakan HTML<ul>menandai. Setiap item dalam daftar ditandai dengan poin.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>
	
   <body>
      <ul>
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>
   
</html>

Ini akan menghasilkan hasil sebagai berikut -

Jenis Atribut

Kamu dapat memakai typeatribut untuk tag <ul> untuk menentukan jenis peluru yang Anda suka. Secara default, ini adalah disk. Berikut adalah opsi yang memungkinkan -

<ul type = "square">
<ul type = "disc">
<ul type = "circle">

Contoh

Berikut adalah contoh di mana kami menggunakan <ul type = "square">

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>

   <body>
      <ul type = "square">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>

</html>

Ini akan menghasilkan hasil sebagai berikut -

Contoh

Berikut adalah contoh di mana kami menggunakan <ul type = "disc"> -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>
	
   <body>
      <ul type = "disc">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>

</html>

Ini akan menghasilkan hasil sebagai berikut -

Contoh

Berikut adalah contoh di mana kami menggunakan <ul type = "circle"> -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>

   <body>
      <ul type = "circle">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Daftar Urutan HTML

Jika Anda diminta untuk meletakkan item Anda dalam daftar bernomor alih-alih berpoin, maka daftar urutan HTML akan digunakan. Daftar ini dibuat dengan menggunakan<ol>menandai. Penomoran dimulai dari satu dan bertambah satu untuk setiap elemen daftar berurutan yang diberi tag <li>.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>

   <body>
      <ol>
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>

</html>

Ini akan menghasilkan hasil sebagai berikut -

Jenis Atribut

Kamu dapat memakai typeatribut untuk tag <ol> untuk menentukan jenis penomoran yang Anda suka. Secara default, ini adalah angka. Berikut adalah opsi yang memungkinkan -

<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.

Contoh

Berikut adalah contoh di mana kami menggunakan <ol type = "1">

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>

   <body>
      <ol type = "1">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>

</html>

Ini akan menghasilkan hasil sebagai berikut -

Contoh

Berikut adalah contoh di mana kami menggunakan <ol type = "I">

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "I">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Contoh

Berikut adalah contoh di mana kami menggunakan <ol type = "i">

<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "i">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Contoh

Berikut adalah contoh di mana kami menggunakan <ol type = "A">

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "A">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Contoh

Berikut adalah contoh di mana kami menggunakan <ol type = "a">

<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "a">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Atribut awal

Kamu dapat memakai startatribut untuk tag <ol> untuk menentukan titik awal penomoran yang Anda butuhkan. Berikut adalah opsi yang memungkinkan -

<ol type = "1" start = "4">    - Numerals starts with 4.
<ol type = "I" start = "4">    - Numerals starts with IV.
<ol type = "i" start = "4">    - Numerals starts with iv.
<ol type = "a" start = "4">    - Letters starts with d.
<ol type = "A" start = "4">    - Letters starts with D.

Contoh

Berikut adalah contoh di mana kami menggunakan <ol type = "i" start = "4">

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "i" start = "4">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Daftar Definisi HTML

HTML dan XHTML mendukung gaya daftar yang disebut definition listsdimana entri terdaftar seperti dalam kamus atau ensiklopedia. Daftar definisi adalah cara ideal untuk menyajikan glosarium, daftar istilah, atau daftar nama / nilai lainnya.

Daftar Definisi menggunakan tiga tag berikut.

<dl> - Mendefinisikan awal dari daftar
<dt> - Sebuah istilah
<dd> - Definisi istilah
</dl> - Mendefinisikan akhir dari daftar

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Definition List</title>
   </head>
	
   <body>
      <dl>
         <dt><b>HTML</b></dt>
         <dd>This stands for Hyper Text Markup Language</dd>
         <dt><b>HTTP</b></dt>
         <dd>This stands for Hyper Text Transfer Protocol</dd>
      </dl>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Halaman web dapat berisi berbagai link yang membawa Anda langsung ke halaman lain dan bahkan bagian tertentu dari halaman tertentu. Tautan ini dikenal sebagai hyperlink.

Hyperlink memungkinkan pengunjung untuk menavigasi di antara situs Web dengan mengklik kata, frasa, dan gambar. Dengan demikian Anda dapat membuat hyperlink menggunakan teks atau gambar yang tersedia di halaman web.

Note- Saya menyarankan Anda untuk mengikuti tutorial singkat tentang Memahami URL

Menghubungkan Dokumen

Tautan ditentukan menggunakan tag HTML <a>. Tag ini disebutanchor tagdan apa pun di antara tag pembuka <a> dan penutup </a> menjadi bagian dari tautan dan pengguna dapat mengeklik bagian itu untuk membuka dokumen tertaut. Berikut ini adalah sintaks sederhana untuk menggunakan tag <a>.

<a href = "Document URL" ... attributes-list>Link Text</a>

Contoh

Mari kita coba contoh berikut yang menautkan http://www.tutorialspoint.com di halaman Anda -

<!DOCTYPE html>
<html>
   
   <head>
      <title>Hyperlink Example</title>
   </head>
	
   <body>
      <p>Click following link</p>
      <a href = "https://www.tutorialspoint.com" target = "_self">Tutorials Point</a>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut, di mana Anda dapat mengklik link yang dibuat untuk membuka halaman utama Tutorial Point (dalam contoh ini).

Atribut target

Kami telah menggunakan targetatribut dalam contoh kita sebelumnya. Atribut ini digunakan untuk menentukan lokasi di mana dokumen terkait dibuka. Berikut adalah opsi yang memungkinkan -

Sr Tidak	Opsi & Deskripsi
1	_blank Membuka dokumen terkait di jendela atau tab baru.
2	_self Membuka dokumen terkait dalam bingkai yang sama.
3	_parent Membuka dokumen terkait di bingkai induk.
4	_top Membuka dokumen terkait di seluruh badan jendela.
5	targetframe Membuka dokumen terkait dalam targetframe bernama .

Contoh

Coba contoh berikut untuk memahami perbedaan dasar dalam beberapa opsi yang diberikan untuk atribut target.

<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
      <base href = "https://www.tutorialspoint.com/">
   </head>
	
   <body>
      <p>Click any of the following links</p>
      <a href = "/html/index.htm" target = "_blank">Opens in New</a> |
      <a href = "/html/index.htm" target = "_self">Opens in Self</a> |
      <a href = "/html/index.htm" target = "_parent">Opens in Parent</a> |
      <a href = "/html/index.htm" target = "_top">Opens in Body</a>
   </body>

</html>

Ini akan menghasilkan hasil sebagai berikut, di mana Anda dapat mengklik tautan berbeda untuk memahami perbedaan antara berbagai opsi yang diberikan untuk atribut target.

Penggunaan Jalur Basis

Saat Anda menautkan dokumen HTML yang terkait dengan situs web yang sama, Anda tidak perlu memberikan URL lengkap untuk setiap tautan. Anda bisa menyingkirkannya jika Anda menggunakan<base>tag di header dokumen HTML Anda. Tag ini digunakan untuk memberikan jalur dasar untuk semua tautan. Jadi browser Anda akan menggabungkan jalur relatif yang diberikan ke jalur dasar ini dan akan membuat URL lengkap.

Contoh

Contoh berikut menggunakan tag <base> untuk menentukan URL dasar dan kemudian kita dapat menggunakan jalur relatif ke semua tautan alih-alih memberikan URL lengkap untuk setiap tautan.

<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
      <base href = "https://www.tutorialspoint.com/">
   </head>
	
   <body>
      <p>Click following link</p>
      <a href = "/html/index.htm" target = "_blank">HTML Tutorial</a>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut, di mana Anda dapat mengklik tautan yang dihasilkan HTML Tutorial untuk membuka tutorial HTML.

Sekarang URL yang diberikan <a href = "/html/index.htm" dianggap sebagai <ahref = "http://www.tutorialspoint.com/html/index.htm"

Menautkan ke Bagian Halaman

Anda dapat membuat link ke bagian tertentu dari halaman web tertentu dengan menggunakan nameatribut. Ini adalah proses dua langkah.

Note- Atribut name tidak digunakan lagi di HTML5. Jangan gunakan atribut ini. Gunakan atribut id dan title sebagai gantinya.

Pertama buat link ke tempat yang ingin Anda jangkau dengan-di halaman web dan beri nama menggunakan tag <a ...> sebagai berikut -

<h1>HTML Text Links <a name = "top"></a></h1>

Langkah kedua adalah membuat hyperlink untuk menautkan dokumen dan tempat yang ingin Anda jangkau -

<a href = "/html/html_text_links.htm#top">Go to the Top</a>

Ini akan menghasilkan tautan berikut, di mana Anda dapat mengklik tautan yang dihasilkan Go to the Top untuk mencapai bagian atas tutorial Link Teks HTML.

Go to the Top

Mengatur Warna Tautan

Anda dapat mengatur warna tautan Anda, tautan aktif dan tautan yang dikunjungi menggunakan link, alink dan vlink atribut dari tag <body>.

Contoh

Simpan yang berikut ini di test.htm dan buka di browser web apa pun untuk melihat caranya link, alink dan vlink atribut bekerja.

<!DOCTYPE html>
<html>
   
   <head>
      <title>Hyperlink Example</title>
      <base href = "https://www.tutorialspoint.com/">
   </head>
	
   <body alink = "#54A250" link = "#040404" vlink = "#F40633">
      <p>Click following link</p>
      <a href = "/html/index.htm" target = "_blank" >HTML Tutorial</a>
   </body>
   
</html>

Ini akan menghasilkan hasil sebagai berikut. Cukup periksa warna tautan sebelum mengkliknya, selanjutnya periksa warnanya ketika Anda mengaktifkannya dan ketika tautan tersebut telah dikunjungi.

Unduh Tautan

Anda dapat membuat tautan teks agar file PDF, atau DOC atau ZIP Anda dapat diunduh. Ini sangat sederhana; Anda hanya perlu memberikan URL lengkap dari file yang dapat diunduh sebagai berikut -

<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
   </head>
	
   <body>
      <a href = "https://www.tutorialspoint.com/page.pdf">Download PDF File</a>
   </body>
	
</html>

Ini akan menghasilkan tautan berikut dan akan digunakan untuk mengunduh file.

Kotak Dialog Download File

Kadang-kadang diinginkan bahwa Anda ingin memberikan pilihan di mana pengguna akan mengklik link dan itu akan memunculkan kotak "File Download" ke pengguna alih-alih menampilkan konten yang sebenarnya. Ini sangat mudah dan dapat dilakukan dengan menggunakan header HTTP dalam respons HTTP Anda.

Misalnya, jika Anda ingin membuat file Filename file yang dapat diunduh dari tautan yang diberikan maka sintaksnya adalah sebagai berikut.

#!/usr/bin/perl

# Additional HTTP Header
print "Content-Type:application/octet-stream; name = \"FileName\"\r\n";
print "Content-Disposition:attachment; filename = \"FileName\"\r\n\n";

# Open the target file and list down its content as follows
open( FILE, "<FileName" );

while(read(FILE, $buffer, 100)){ print("$buffer");
}

Note- Untuk detail lebih lanjut tentang program PERL CGI, lihat tutorial PERL dan CGI .

Kami telah melihat cara membuat tautan hypertext menggunakan teks dan kami juga mempelajari cara menggunakan gambar di halaman web kami. Sekarang, kita akan belajar bagaimana menggunakan gambar untuk membuat hyperlink.

Contoh

Sangat mudah untuk menggunakan gambar sebagai hyperlink. Kami hanya perlu menggunakan gambar di dalam hyperlink di tempat teks seperti yang ditunjukkan di bawah ini -

<!DOCTYPE html>
<html>

   <head>
      <title>Image Hyperlink Example</title>
   </head>
	
   <body>
      <p>Click following link</p>
      <a href = "https://www.tutorialspoint.com" target = "_self"> 
         <img src = "/images/logo.png" alt = "Tutorials Point" border = "0"/> 
      </a>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut, di mana Anda dapat mengklik gambar untuk membuka halaman utama Tutorial Point.

Ini adalah cara paling sederhana untuk membuat hyperlink menggunakan gambar. Selanjutnya kita akan melihat bagaimana kita dapat membuat Tautan Gambar Sensitif-Mouse.

Gambar Sensitif Mouse

Standar HTML dan XHTML menyediakan fitur yang memungkinkan Anda menyematkan banyak tautan berbeda di dalam satu gambar. Anda dapat membuat tautan berbeda pada satu gambar berdasarkan koordinat berbeda yang tersedia pada gambar. Setelah tautan berbeda dilampirkan ke koordinat yang berbeda, kita dapat mengklik bagian gambar yang berbeda untuk membuka dokumen target. Gambar yang sensitif terhadap mouse seperti itu dikenal sebagai peta gambar.

Ada dua cara untuk membuat peta gambar -

Server-side image maps - Ini diaktifkan oleh ismap atribut dari tag <img> dan membutuhkan akses ke server dan aplikasi pemrosesan peta gambar terkait.
Client-side image maps - Ini dibuat dengan usemap atribut dari tag <img>, bersama dengan tag <map> dan <arei> yang sesuai.

Peta Gambar Sisi Server

Di sini Anda cukup meletakkan gambar Anda di dalam hyperlink dan gunakan ismapatribut yang membuatnya menjadi gambar khusus dan ketika pengguna mengklik suatu tempat di dalam gambar, browser meneruskan koordinat penunjuk mouse bersama dengan URL yang ditentukan dalam tag <a> ke server web. Server menggunakan koordinat penunjuk mouse untuk menentukan dokumen mana yang akan dikirim kembali ke browser.

Ketika ismap digunakan, atribut href dari tag <a> yang berisi harus berisi URL aplikasi server seperti cgi atau skrip PHP dll. Untuk memproses permintaan yang masuk berdasarkan koordinat yang diteruskan.

Koordinat posisi mouse adalah piksel layar yang dihitung dari sudut kiri atas gambar, dimulai dengan (0,0). Koordinat, diawali dengan tanda tanya, ditambahkan ke akhir URL.

Misalnya, jika pengguna mengklik 20 piksel di atas dan 30 piksel ke bawah dari sudut kiri atas gambar berikut -

Yang telah dihasilkan oleh potongan kode berikut -

<!DOCTYPE html>
<html>

   <head>
      <title>ISMAP Hyperlink Example</title>
   </head>
	
   <body>
      <p>Click following link</p>
      
      <a href = "/cgi-bin/ismap.cgi" target = "_self"> 
         <img ismap src = "/images/logo.png" alt = "Tutorials Point" border = "0"/> 
      </a>
   </body>
	
</html>

Kemudian browser mengirimkan parameter pencarian berikut ke server web yang dapat diproses oleh ismap.cgi script atau map file dan Anda dapat menautkan dokumen apa pun yang Anda suka ke koordinat ini -

/cgi-bin/ismap.cgi?20,30

Dengan cara ini Anda dapat menetapkan tautan yang berbeda ke koordinat gambar yang berbeda dan ketika koordinat tersebut diklik, Anda dapat membuka dokumen terkait yang sesuai. Untuk mempelajari lebih lanjut tentangismapatribut, Anda dapat memeriksa Bagaimana menggunakan Image ismap?

Note- Anda akan belajar pemrograman CGI ketika Anda akan mempelajari pemrograman Perl. Anda dapat menulis skrip Anda untuk memproses koordinat yang diteruskan ini menggunakan PHP atau skrip lainnya juga. Untuk saat ini, mari berkonsentrasi mempelajari HTML dan nanti Anda dapat mengunjungi kembali bagian ini.

Peta Gambar Sisi Klien

Peta gambar sisi klien diaktifkan oleh usemap atribut dari tag <img /> dan ditentukan oleh tag ekstensi <map> dan <arei> khusus.

Gambar yang akan membentuk peta dimasukkan ke dalam halaman menggunakan tag <img /> sebagai gambar normal, kecuali itu membawa atribut tambahan yang disebut usemap. Nilai dari atribut usemap adalah nilai yang akan digunakan dalam tag <map> untuk menghubungkan tag peta dan gambar. <map> bersama dengan tag <arei> mendefinisikan semua koordinat gambar dan tautan terkait.

Tag <arei> di dalam tag peta, menentukan bentuk dan koordinat untuk menentukan batas dari setiap hotspot yang dapat diklik yang tersedia pada gambar. Berikut contoh dari peta gambar -

<!DOCTYPE html>
<html>

   <head>
      <title>USEMAP Hyperlink Example</title>
   </head>
	
   <body>
      <p>Search and click the hotspot</p>
      <img src = /images/html.gif alt = "HTML Map" border = "0" usemap = "#html"/>
      <!-- Create  Mappings -->
      
      <map name = "html">
         <area shape = "circle" coords = "80,80,20" 
            href = "/css/index.htm" alt = "CSS Link" target = "_self" />
         
         <area shape = "rect" coords = "5,5,40,40" alt = "jQuery Link" 
            href = "/jquery/index.htm" target = "_self" />
      </map>
   </body>
   
</html>

Ini akan menghasilkan hasil sebagai berikut -

Sistem koordinasi

Nilai sebenarnya dari coord sangat bergantung pada bentuk yang dimaksud. Berikut ringkasannya, diikuti dengan contoh terperinci -

rect = x₁ , y₁ , x₂ , y₂

x ₁ dan y ₁ adalah koordinat dari sudut kiri atas persegi panjang; x ₂ dan y ₂ adalah koordinat pojok kanan bawah.
circle = x_c , y_c , radius

x _c dan y _c adalah koordinat dari pusat lingkaran, dan jari-jari adalah jari-jari lingkaran. Sebuah lingkaran yang berpusat pada 200,50 dengan radius 25 akan memiliki atribut coords = "200,50,25"
poly = x₁ , y₁ , x₂ , y₂ , x₃ , y₃ , ... x_n , y_n

Berbagai pasangan xy mendefinisikan simpul (titik) dari poligon, dengan "garis" yang ditarik dari satu titik ke titik berikutnya. Poligon berbentuk berlian dengan titik teratasnya pada 20,20 dan 40 piksel pada titik terlebar akan memiliki atribut coords = "20,20,40,40,20,60,0,40" .

Semua koordinat relatif terhadap sudut kiri atas gambar (0,0). Setiap bentuk memiliki URL terkait. Anda dapat menggunakan perangkat lunak gambar apa pun untuk mengetahui koordinat berbagai posisi.

Tidaklah sulit untuk menempatkan tautan email HTML di halaman web Anda, tetapi ini dapat menyebabkan masalah spam yang tidak perlu untuk akun email Anda. Ada orang, yang dapat menjalankan program untuk memanen jenis email ini dan kemudian menggunakannya untuk melakukan spamming dengan berbagai cara.

Anda dapat memiliki opsi lain untuk memfasilitasi orang untuk mengirimi Anda email. Salah satu opsinya adalah menggunakan formulir HTML untuk mengumpulkan data pengguna dan kemudian menggunakan skrip PHP atau CGI untuk mengirim email.

Contoh sederhana, periksa Formulir Hubungi Kami . Kami menerima umpan balik pengguna menggunakan formulir ini dan kemudian kami menggunakan satu program CGI yang mengumpulkan informasi ini dan mengirimi kami email ke ID email yang diberikan.

Note- Anda akan belajar tentang Formulir HTML dalam Formulir HTML dan Anda akan belajar tentang CGI di tutorial kami yang lainPerl CGI Programming.

Tag Email HTML

HTML <a>tag memberi Anda opsi untuk menentukan alamat email untuk mengirim email. Saat menggunakan tag <a> sebagai tag email, Anda akan menggunakanmailto: email addressbersama dengan atribut href . Berikut ini adalah sintaks menggunakanmailto daripada menggunakan http.

<a href = "mailto: [email protected]">Send Email</a>

Kode ini akan menghasilkan tautan berikut yang dapat Anda gunakan untuk mengirim email.

Send Email

Sekarang, jika pengguna mengklik link ini, itu akan meluncurkan satu Klien Email (seperti Lotus Notes, Outlook Express dll.) Yang diinstal di komputer pengguna Anda. Ada risiko lain untuk menggunakan opsi ini untuk mengirim email karena jika pengguna tidak memiliki klien email yang diinstal di komputer mereka, maka tidak mungkin untuk mengirim email.

Pengaturan Default

Anda dapat menentukan subjek email default dan badan email bersama dengan alamat email Anda. Berikut adalah contoh penggunaan subjek dan isi default.

<a href = "mailto:[email protected]?subject = Feedback&body = Message">
Send Feedback
</a>

Kode ini akan menghasilkan tautan berikut yang dapat Anda gunakan untuk mengirim email.

Send Feedback

Frame HTML digunakan untuk membagi jendela browser Anda menjadi beberapa bagian di mana setiap bagian dapat memuat dokumen HTML terpisah. Kumpulan bingkai di jendela browser dikenal sebagai frameset. Jendela dibagi menjadi bingkai dengan cara yang sama seperti tabel diatur: menjadi baris dan kolom.

Kekurangan Frame

Ada beberapa kekurangan dalam menggunakan bingkai, jadi tidak pernah disarankan untuk menggunakan bingkai di halaman web Anda -

Beberapa perangkat yang lebih kecil sering kali tidak dapat menangani bingkai karena layarnya tidak cukup besar untuk dibagi.
Terkadang halaman Anda akan ditampilkan secara berbeda di komputer yang berbeda karena resolusi layar yang berbeda.
Tombol kembali di browser mungkin tidak berfungsi sesuai harapan pengguna.
Masih sedikit browser yang tidak mendukung teknologi frame.

Membuat Bingkai

Untuk menggunakan frame pada halaman kita menggunakan tag <frameset> daripada tag <body>. Tag <frameset> mendefinisikan, bagaimana membagi jendela menjadi beberapa bingkai. Iturows atribut dari tag <frameset> mendefinisikan bingkai horizontal dan colsatribut mendefinisikan bingkai vertikal. Setiap frame ditunjukkan oleh tag <frame> dan menentukan dokumen HTML mana yang akan dibuka ke dalam frame.

Note- Tag <frame> tidak lagi digunakan di HTML5. Jangan gunakan elemen ini.

Contoh

Berikut adalah contoh untuk membuat tiga bingkai horizontal -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Frames</title>
   </head>
	
   <frameset rows = "10%,80%,10%">
      <frame name = "top" src = "/html/top_frame.htm" />
      <frame name = "main" src = "/html/main_frame.htm" />
      <frame name = "bottom" src = "/html/bottom_frame.htm" />
   
      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
      
   </frameset>
   
</html>

Ini akan menghasilkan hasil sebagai berikut -

Contoh

Mari kita letakkan contoh di atas sebagai berikut, di sini kita mengganti atribut baris dengan kolom dan mengubah lebarnya. Ini akan membuat ketiga frame secara vertikal -

<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML Frames</title>
   </head>
   
   <frameset cols = "25%,50%,25%">
      <frame name = "left" src = "/html/top_frame.htm" />
      <frame name = "center" src = "/html/main_frame.htm" />
      <frame name = "right" src = "/html/bottom_frame.htm" />
      
      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
   </frameset>
   
</html>

Ini akan menghasilkan hasil sebagai berikut -

Atribut Tag <frameset>

Berikut adalah atribut penting dari tag <frameset> -

Sr Tidak	Atribut & Deskripsi
1	cols Menentukan berapa banyak kolom yang ada di frameset dan ukuran setiap kolom. Anda dapat menentukan lebar setiap kolom dengan salah satu dari empat cara - Nilai mutlak dalam piksel. Misalnya, untuk membuat tiga bingkai vertikal, gunakan kolom = "100, 500, 100" . Persentase dari jendela browser. Misalnya, untuk membuat tiga bingkai vertikal, gunakan kolom = "10%, 80%, 10%" . Menggunakan simbol wildcard. Misalnya, untuk membuat tiga bingkai vertikal, gunakan kolom = "10%, , 10%"* . Dalam kasus ini, karakter pengganti mengambil sisa jendela. Sebagai lebar relatif dari jendela browser. Misalnya, untuk membuat tiga bingkai vertikal, gunakan kolom = "3 , 2 , 1 "* . Ini adalah alternatif persentase. Anda dapat menggunakan lebar relatif dari jendela browser. Di sini jendela dibagi menjadi enam: kolom pertama mengisi setengah dari jendela, yang kedua mengambil sepertiga, dan yang ketiga mengambil sepertiga.
2	rows Atribut ini bekerja seperti atribut cols dan mengambil nilai yang sama, tetapi digunakan untuk menentukan baris dalam rangkaian bingkai. Misalnya, untuk membuat dua bingkai horizontal, gunakan baris = "10%, 90%" . Anda dapat menentukan tinggi setiap baris dengan cara yang sama seperti yang dijelaskan di atas untuk kolom.
3	border Atribut ini menentukan lebar perbatasan setiap frame dalam piksel. Misalnya, border = "5". Nilai nol berarti tidak ada batas.
4	frameborder Atribut ini menentukan apakah batas tiga dimensi harus ditampilkan di antara bingkai. Atribut ini mengambil nilai 1 (ya) atau 0 (tidak). Misalnya frameborder = "0" tidak menentukan batas.
5	framespacing Atribut ini menentukan jumlah ruang antara frame dalam sebuah frameset. Ini bisa mengambil nilai integer apa pun. Misalnya framespacing = "10" berarti harus ada jarak 10 piksel di antara setiap frame.

Atribut Tag <frame>

Berikut adalah atribut penting dari tag <frame> -

Sr Tidak	Atribut & Deskripsi
1	src Atribut ini digunakan untuk memberi nama file yang harus dimuat dalam bingkai. Nilainya bisa URL apa saja. Misalnya, src = "/html/top_frame.htm" akan memuat file HTML yang tersedia di direktori html.
2	name Atribut ini memungkinkan Anda memberi nama pada bingkai. Ini digunakan untuk menunjukkan ke bingkai mana dokumen harus dimuat. Hal ini sangat penting ketika Anda ingin membuat tautan dalam satu bingkai yang memuat halaman ke bingkai lain, dalam hal ini bingkai kedua memerlukan nama untuk mengidentifikasi dirinya sebagai target tautan.
3	frameborder Atribut ini menentukan apakah tepi bingkai itu ditampilkan atau tidak; itu menimpa nilai yang diberikan dalam atribut frameborder pada tag <frameset> jika ada, dan ini dapat mengambil nilai baik 1 (ya) atau 0 (tidak).
4	marginwidth Atribut ini memungkinkan Anda menentukan lebar ruang antara kiri dan kanan batas bingkai dan konten bingkai. Nilainya diberikan dalam piksel. Misalnya marginwidth = "10".
5	marginheight Atribut ini memungkinkan Anda untuk menentukan ketinggian ruang antara batas atas dan bawah bingkai serta isinya. Nilainya diberikan dalam piksel. Misalnya marginheight = "10".
6	noresize Secara default, Anda dapat mengubah ukuran bingkai apa pun dengan mengklik dan menyeret di tepi bingkai. Atribut noresize mencegah pengguna mengubah ukuran frame. Misalnya noresize = "noresize".
7	scrolling Atribut ini mengontrol tampilan scrollbar yang muncul di bingkai. Ini mengambil nilai "ya", "tidak" atau "otomatis". Misalnya scrolling = "no" berarti tidak boleh memiliki scroll bar.
8	longdesc Atribut ini memungkinkan Anda memberikan link ke halaman lain yang berisi deskripsi panjang tentang konten frame. Misalnya longdesc = "framedescription.htm"

Dukungan Browser untuk Bingkai

Jika pengguna menggunakan browser lama atau browser apa pun, yang tidak mendukung frame, elemen <noframes> harus ditampilkan kepada pengguna.

Jadi Anda harus menempatkan elemen <body> di dalam elemen <noframes> karena elemen <frameset> seharusnya menggantikan elemen <body>, tetapi jika browser tidak memahami elemen <frameset> maka browser harus memahami apa yang ada di dalam <body> elemen yang terkandung dalam elemen <noframes>.

Anda dapat memberikan pesan yang bagus untuk pengguna Anda yang memiliki browser lama. Misalnya, Maaf !! browser Anda tidak mendukung bingkai. seperti yang ditunjukkan pada contoh di atas.

Nama bingkai dan atribut target

Salah satu penggunaan bingkai yang paling populer adalah menempatkan bilah navigasi dalam satu bingkai dan kemudian memuat halaman utama ke bingkai terpisah.

Mari kita lihat contoh berikut di mana file test.htm memiliki kode berikut -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Target Frames</title>
   </head>
	
   <frameset cols = "200, *">
      <frame src = "/html/menu.htm" name = "menu_page" />
      <frame src = "/html/main.htm" name = "main_page" />
      
      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
   </frameset>
	
</html>

Di sini, kami telah membuat dua kolom untuk diisi dengan dua bingkai. Bingkai pertama berukuran lebar 200 piksel dan akan berisi bilah menu navigasi yang diterapkan olehmenu.htmmengajukan. Kolom kedua mengisi ruang yang tersisa dan akan berisi bagian utama halaman dan diimplementasikan olehmain.htmmengajukan. Untuk ketiga tautan yang tersedia di bilah menu, kami telah menyebutkan bingkai target sebagaimain_page, jadi setiap kali Anda mengklik salah satu tautan di bilah menu, tautan yang tersedia akan terbuka di halaman utama.

Berikut ini adalah konten file menu.htm

<!DOCTYPE html>
<html>

   <body bgcolor = "#4a7d49">
      <a href = "http://www.google.com" target = "main_page">Google</a>
      <br />
      <br />
      
      <a href = "http://www.microsoft.com" target = "main_page">Microsoft</a>
      <br />
      <br />
      
      <a href = "http://news.bbc.co.uk" target = "main_page">BBC News</a>
   </body>
	
</html>

Berikut ini adalah konten file main.htm -

<!DOCTYPE html>
<html>

   <body bgcolor = "#b5dcb3">
      <h3>This is main page and content from any link will be displayed here.</h3>
      <p>So now click any link and see the result.</p>
   </body>
	
</html>

Saat kami memuat test.htm file, itu menghasilkan hasil sebagai berikut -

Sekarang Anda dapat mencoba mengklik tautan yang tersedia di panel kiri dan melihat hasilnya. The targetattribute juga dapat mengambil salah satu dari nilai berikut -

Sr Tidak	Opsi & Deskripsi
1	_self Memuat halaman ke dalam bingkai saat ini.
2	_blank Memuat halaman ke dalam jendela browser baru. Membuka jendela baru.
3	_parent Memuat halaman ke dalam jendela induk, yang dalam kasus satu frameset adalah jendela browser utama.
4	_top Memuat halaman ke jendela browser, menggantikan bingkai apa pun saat ini.
5	targetframe Memuat halaman ke dalam targetframe bernama.

Anda dapat menentukan bingkai sebaris dengan tag HTML <iframe>. Tag <iframe> entah bagaimana tidak terkait dengan tag <frameset>, sebaliknya, ini bisa muncul di manapun dalam dokumen Anda. Tag <iframe> mendefinisikan wilayah persegi panjang di dalam dokumen di mana browser dapat menampilkan dokumen terpisah, termasuk scrollbar dan batas. Bingkai sebaris digunakan untuk menyematkan dokumen lain di dalam dokumen HTML saat ini.

Itu src atribut digunakan untuk menentukan URL dari dokumen yang menempati bingkai sebaris.

Contoh

Berikut adalah contoh untuk menunjukkan bagaimana menggunakan <iframe> -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Iframes</title>
   </head>
	
   <body>
      <p>Document content goes here...</p>
      
      <iframe src = "/html/menu.htm" width = "555" height = "200">
         Sorry your browser does not support inline frames.
      </iframe>
      
      <p>Document content also go here...</p>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Atribut Tag <Iframe>

Sebagian besar atribut tag <iframe>, termasuk name, class, frameborder, id, longdesc, marginheight, marginwidth, name, scrolling, style, dan title berperilaku persis seperti atribut terkait untuk tag <frame>.

Note- Frameborder , marginwidth , longdesc , scrolling , atribut marginheight tidak digunakan lagi di HTML5. Jangan gunakan atribut ini.

Sr Tidak	Atribut & Deskripsi
1	src Atribut ini digunakan untuk memberi nama file yang harus dimuat dalam bingkai. Nilainya bisa URL apa saja. Misalnya, src = "/html/top_frame.htm" akan memuat file HTML yang tersedia di direktori html.
2	name Atribut ini memungkinkan Anda memberi nama pada bingkai. Ini digunakan untuk menunjukkan ke bingkai mana dokumen harus dimuat. Hal ini sangat penting ketika Anda ingin membuat tautan dalam satu bingkai yang memuat halaman ke bingkai lain, dalam hal ini bingkai kedua memerlukan nama untuk mengidentifikasi dirinya sebagai target tautan.
3	frameborder Atribut ini menentukan apakah tepi bingkai itu ditampilkan atau tidak; itu menimpa nilai yang diberikan dalam atribut frameborder pada tag <frameset> jika ada, dan ini dapat mengambil nilai baik 1 (ya) atau 0 (tidak).
4	marginwidth Atribut ini memungkinkan Anda menentukan lebar ruang antara kiri dan kanan batas bingkai dan konten bingkai. Nilainya diberikan dalam piksel. Misalnya marginwidth = "10".
5	marginheight Atribut ini memungkinkan Anda untuk menentukan ketinggian ruang antara batas atas dan bawah bingkai serta isinya. Nilainya diberikan dalam piksel. Misalnya marginheight = "10".
6	height Atribut ini menentukan tinggi <iframe>.
7	scrolling Atribut ini mengontrol tampilan scrollbar yang muncul di bingkai. Ini mengambil nilai "ya", "tidak" atau "otomatis". Misalnya scrolling = "no" berarti tidak boleh memiliki scroll bar.
8	longdesc Atribut ini memungkinkan Anda memberikan link ke halaman lain yang berisi deskripsi panjang tentang konten frame. Misalnya longdesc = "framedescription.htm"
9	width Atribut ini menentukan lebar <iframe>.

Semua elemen HTML dapat dikategorikan menjadi dua kategori (a) Elemen Level Blok (b)Elemen Inline.

Elemen Blok

Elemen blok muncul di layar seolah-olah mereka memiliki jeda baris sebelum dan sesudahnya. Misalnya, <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote>, dan <address> semuanya adalah elemen tingkat blok. Mereka semua memulai di baris baru mereka sendiri, dan apa pun yang mengikuti mereka muncul di baris barunya sendiri.

Elemen Inline

Sebaliknya, elemen sebaris dapat muncul dalam kalimat dan tidak harus muncul di baris baru sendiri. <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, < code>, <cite>, <dfn>, <kbd>, dan <var> semuanya adalah elemen inline.

Mengelompokkan Elemen HTML

Ada dua tag penting yang sering kami gunakan untuk mengelompokkan berbagai tag HTML lainnya (i) tag <div> dan (ii) tag <span>

Tag <div>

Ini adalah tag level blok yang sangat penting yang memainkan peran besar dalam mengelompokkan berbagai tag HTML lainnya dan menerapkan CSS pada sekelompok elemen. Bahkan sekarang tag <div> dapat digunakan untuk membuat tata letak halaman web di mana kita mendefinisikan bagian yang berbeda (Kiri, Kanan, Atas dll.) Dari halaman menggunakan tag <div>. Tag ini tidak memberikan perubahan visual apa pun pada pemblokiran tetapi ini memiliki arti yang lebih jika digunakan dengan CSS.

Contoh

Berikut adalah contoh sederhana dari tag <div>. Kami akan mempelajari Cascading Style Sheet (CSS) dalam bab terpisah tetapi kami menggunakannya di sini untuk menunjukkan penggunaan tag <div> -

<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML div Tag</title>
   </head>
	
   <body>
      <!-- First group of tags -->
      <div style = "color:red">
         <h4>This is first group</h4>
         <p>Following is a list of vegetables</p>
         
         <ul>
            <li>Beetroot</li>
            <li>Ginger</li>
            <li>Potato</li>
            <li>Radish</li>
         </ul>
      </div>

      <!-- Second group of tags -->
      <div style = "color:green">
         <h4>This is second group</h4>
         <p>Following is a list of fruits</p>
         
         <ul>
            <li>Apple</li>
            <li>Banana</li>
            <li>Mango</li>
            <li>Strawberry</li>
         </ul>
      </div>
   </body>
   
</html>

Ini akan menghasilkan hasil sebagai berikut -

Tag <span>

HTML <span> adalah elemen inline dan dapat digunakan untuk mengelompokkan elemen inline dalam dokumen HTML. Tag ini juga tidak memberikan perubahan visual apa pun pada blok tetapi memiliki lebih banyak arti ketika digunakan dengan CSS.

Perbedaan antara tag <span> dan tag <div> adalah bahwa tag <span> digunakan dengan elemen sebaris sedangkan tag <div> digunakan dengan elemen level blok.

Contoh

Berikut adalah contoh sederhana dari tag <span>. Kita akan mempelajari Cascading Style Sheet (CSS) dalam bab terpisah tetapi kita menggunakannya di sini untuk menunjukkan penggunaan tag <span> -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML span Tag</title>
   </head>
	
   <body>
      <p>This is <span style = "color:red">red</span> and this is
         <span style = "color:green">green</span></p>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Secara default, latar belakang halaman web Anda berwarna putih. Anda mungkin tidak menyukainya, tapi jangan khawatir. HTML memberi Anda dua cara berikut untuk menghias latar belakang halaman web Anda.

Latar Belakang HTML dengan Warna
Latar Belakang HTML dengan Gambar

Sekarang mari kita lihat kedua pendekatan tersebut satu per satu menggunakan contoh yang sesuai.

Latar Belakang Html dengan Warna

Itu bgcolor atribut digunakan untuk mengontrol latar belakang elemen HTML, khususnya badan halaman dan latar belakang tabel.

Note- Atribut bgcolor tidak digunakan lagi di HTML5. Jangan gunakan atribut ini.

Berikut adalah sintaks untuk menggunakan atribut bgcolor dengan tag HTML apa pun.

<tagname bgcolor = "color_value"...>

Nilai_warna ini dapat diberikan dalam salah satu format berikut -

<!-- Format 1 - Use color name -->
<table bgcolor = "lime" >
 
<!-- Format 2 - Use hex value -->
<table bgcolor = "#f1f1f1" >
 
<!-- Format 3 - Use color value in RGB terms -->
<table bgcolor = "rgb(0,0,120)" >

Contoh

Berikut adalah contoh untuk mengatur latar belakang tag HTML -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Background Colors</title>
   </head>
	
   <body>
      <!-- Format 1 - Use color name -->
      <table bgcolor = "yellow" width = "100%">
         <tr>
            <td>
               This background is yellow
            </td>
         </tr>
      </table>
 
      <!-- Format 2 - Use hex value -->
      <table bgcolor = "#6666FF" width = "100%">
         <tr>
            <td>
               This background is sky blue
            </td>
         </tr>
      </table>
 
      <!-- Format 3 - Use color value in RGB terms -->
      <table bgcolor = "rgb(255,0,255)" width = "100%">
         <tr>
            <td>
               This background is green
            </td>
         </tr>
      </table>
   </body>
   
</html>

Ini akan menghasilkan hasil sebagai berikut -

Latar Belakang Html dengan Gambar

Itu backgroundAtribut juga dapat digunakan untuk mengontrol latar belakang elemen HTML, khususnya badan halaman dan latar belakang tabel. Anda dapat menentukan gambar untuk mengatur latar belakang halaman atau tabel HTML Anda.

Note- Atribut latar belakang tidak digunakan lagi di HTML5. Jangan gunakan atribut ini.

Berikut adalah sintaks untuk menggunakan atribut background dengan tag HTML apa pun.

Note- Atribut latar belakang tidak digunakan lagi dan disarankan untuk menggunakan Lembar Gaya untuk pengaturan latar belakang.

<tagname background = "Image URL"...>

Format gambar yang paling sering digunakan adalah gambar JPEG, GIF dan PNG.

Contoh

Berikut adalah contoh untuk mengatur gambar latar belakang sebuah tabel.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Background Images</title>
   </head>
	
   <body>
      <!-- Set table background -->
      <table background = "/images/html.gif" width = "100%" height = "100">
         <tr><td>
            This background is filled up with HTML image.
         </td></tr>
      </table>
   </body>
   
</html>

Ini akan menghasilkan hasil sebagai berikut -

Latar Belakang Berpola & Transparan

Anda mungkin pernah melihat banyak pola atau background transparan di berbagai website. Ini secara sederhana dapat dicapai dengan menggunakan gambar berpola atau gambar transparan di latar belakang.

Disarankan bahwa saat membuat pola atau gambar GIF atau PNG transparan, gunakan dimensi sekecil mungkin bahkan sekecil 1x1 untuk menghindari pemuatan yang lambat.

Contoh

Berikut adalah contoh untuk mengatur pola latar belakang tabel -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Background Images</title>
   </head>
	
   <body>
      <!-- Set a table background using pattern -->
      <table background = "/images/pattern1.gif" width = "100%" height = "100">
         <tr>
            <td>
               This background is filled up with a pattern image.
            </td>
         </tr>
      </table>

      <!-- Another example on table background using pattern -->
      <table background = "/images/pattern2.gif" width = "100%" height = "100">
         <tr>
            <td>
               This background is filled up with a pattern image.
            </td>
         </tr>
      </table>
   </body>
   
</html>

Ini akan menghasilkan hasil sebagai berikut -

Warna sangat penting untuk memberikan tampilan dan nuansa yang bagus pada situs web Anda. Anda dapat menentukan warna pada tingkat halaman menggunakan tag <body> atau Anda dapat mengatur warna untuk masing-masing tag menggunakanbgcolor atribut.

Tag <body> memiliki atribut berikut yang dapat digunakan untuk menyetel warna berbeda -

bgcolor - mengatur warna untuk latar belakang halaman.
text - mengatur warna untuk teks tubuh.
alink - mengatur warna untuk tautan aktif atau tautan yang dipilih.
link - mengatur warna untuk teks yang ditautkan.
vlink- menetapkan warna untuk tautan yang dikunjungi - yaitu, untuk teks tertaut yang telah Anda klik.

Metode Pengodean Warna HTML

Ada tiga metode berbeda untuk mengatur warna di halaman web Anda -

Color names - Anda dapat menentukan nama warna secara langsung seperti hijau, biru atau merah.
Hex codes - Kode enam digit yang mewakili jumlah warna merah, hijau, dan biru.
Color decimal or percentage values - Nilai ini ditentukan menggunakan properti rgb ().

Sekarang kita akan melihat skema pewarnaan ini satu per satu.

Warna HTML - Nama Warna

Anda dapat menentukan langsung nama warna untuk mengatur teks atau warna latar belakang. W3C telah membuat daftar 16 nama warna dasar yang akan divalidasi dengan validator HTML tetapi ada lebih dari 200 nama warna berbeda yang didukung oleh browser utama.

Note- Periksa daftar lengkap Nama Warna HTML.

W3C Standard 16 Warna

Berikut adalah daftar nama W3C Standar 16 Warna dan disarankan untuk menggunakannya.

Hitam	Abu-abu	Perak	putih
Kuning	jeruk nipis	Aqua	Fuchsia
Merah	hijau	Biru	Ungu
Merah tua	Zaitun	Angkatan laut	Teal

Contoh

Berikut adalah contoh untuk mengatur latar belakang tag HTML dengan nama warna -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Colors by Name</title>
   </head>
	
   <body text = "blue" bgcolor = "green">
      <p>Use different color names for for body and table and see the result.</p>
      
      <table bgcolor = "black">
         <tr>
            <td>
               <font color = "white">This text will appear white on black background.</font>
            </td>
         </tr>
      </table>
   </body>
   
</html>

Warna HTML - Kode Hex

Heksadesimal adalah representasi 6 digit dari sebuah warna. Dua digit pertama (RR) mewakili nilai merah, dua digit berikutnya adalah nilai hijau (GG), dan yang terakhir adalah nilai biru (BB).

Nilai heksadesimal dapat diambil dari perangkat lunak grafis apa pun seperti Adobe Photoshop, Paintshop Pro, atau MS Paint.

Setiap kode heksadesimal akan diawali dengan tanda pagar atau tanda pagar #. Berikut adalah daftar beberapa warna menggunakan notasi heksadesimal.

Warna	Warna HEX
	# 000000
	# FF0000
	# 00FF00
	# 0000FF
	# FFFF00
	# 00FFFF
	# FF00FF
	# C0C0C0
	#FFFFFF

Contoh

Berikut adalah contoh untuk mengatur latar belakang tag HTML dengan kode warna dalam heksadesimal -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Colors by Hex</title>
   </head>
	
   <body text = "#0000FF" bgcolor = "#00FF00">
      <p>Use different color hexa for for body and table and see the result.</p>
      
      <table bgcolor = "#000000">
         <tr>
            <td>
               <font color = "#FFFFFF">This text will appear white on black background.</font>
            </td>
         </tr>
      </table>
   </body>
   
</html>

Warna HTML - Nilai RGB

Nilai warna ini ditentukan menggunakan rgb( )Properti. Properti ini mengambil tiga nilai, masing-masing untuk merah, hijau, dan biru. Nilainya dapat berupa bilangan bulat antara 0 dan 255 atau persentase.

Note - Semua browser tidak mendukung properti warna rgb () jadi disarankan untuk tidak menggunakannya.

Berikut adalah daftar untuk menunjukkan beberapa warna menggunakan nilai RGB.

Warna	Warna RGB
	rgb (0,0,0)
	rgb (255,0,0)
	rgb (0,255,0)
	rgb (0,0,255)
	rgb (255.255,0)
	rgb (0,255,255)
	rgb (255,0.255)
	rgb (192.192.192)
	rgb (255.255.255)

Contoh

Berikut adalah contoh untuk mengatur latar belakang tag HTML dengan kode warna menggunakan nilai rgb () -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Colors by RGB code</title>
   </head>
	
   <body text = "rgb(0,0,255)" bgcolor = "rgb(0,255,0)">
      <p>Use different color code for for body and table and see the result.</p>
      
      <table bgcolor = "rgb(0,0,0)">
         <tr>
            <td>
               <font color = "rgb(255,255,255)">This text will appear white on black background.</font>
            </td>
         </tr>
      </table>
   </body>
   
</html>

Warna Aman Browser

Berikut adalah daftar 216 warna yang seharusnya paling aman dan warna yang tidak tergantung komputer. Warna-warna ini sangat dari kode hexa 000000 sampai FFFFFF dan mereka akan didukung oleh semua komputer yang memiliki palet warna 256.

000000	000033	000066	000099	0000CC	0000FF
003300	003333	003366	003399	0033CC	0033FF
006600	006633	006666	006699	0066CC	0066FF
009900	009933	009966	009999	0099CC	0099FF
00CC00	00CC33	00CC66	00CC99	00CCCC	00CCFF
00FF00	00FF33	00FF66	00FF99	00FFCC	00FFFF
330000	330033	330066	330099	3300CC	3300FF
333300	333333	333366	333399	3333CC	3333FF
336600	336633	336666	336699	3366CC	3366FF
339900	339933	339966	339999	3399CC	3399FF
33CC00	33CC33	33CC66	33CC99	33CCCC	33CCFF
33FF00	33FF33	33FF66	33FF99	33FFCC	33FFFF
660000	660033	660066	660099	6600CC	6600FF
663300	663333	663366	663399	6633CC	6633FF
666600	666633	666666	666699	6666CC	6666FF
669900	669933	669966	669999	6699CC	6699FF
66CC00	66CC33	66CC66	66CC99	66CCCC	66CCFF
66FF00	66FF33	66FF66	66FF99	66FFCC	66FFFF
990000	990033	990066	990099	9900CC	9900FF
993300	993333	993366	993399	9933CC	9933FF
996600	996633	996666	996699	9966CC	9966FF
999900	999933	999966	999999	9999CC	9999FF
99CC00	99CC33	99CC66	99CC99	99CCCC	99CCFF
99FF00	99FF33	99FF66	99FF99	99FFCC	99FFFF
CC0000	CC0033	CC0066	CC0099	CC00CC	CC00FF
CC3300	CC3333	CC3366	CC3399	CC33CC	CC33FF
CC6600	CC6633	CC6666	CC6699	CC66CC	CC66FF
CC9900	CC9933	CC9966	CC9999	CC99CC	CC99FF
CCCC00	CCCC33	CCCC66	CCCC99	Karib	CCCCFF
CCFF00	CCFF33	CCFF66	CCFF99	CCFFCC	CCFFFF
FF0000	FF0033	FF0066	FF0099	FF00CC	FF00FF
FF3300	FF3333	FF3366	FF3399	FF33CC	FF33FF
FF6600	FF6633	FF6666	FF6699	FF66CC	FF66FF
FF9900	FF9933	FF9966	FF9999	FF99CC	FF99FF
FFCC00	FFCC33	FFCC66	FFCC99	FFCCCC	FFCCFF
FFFF00	FFFF33	FFFF66	FFFF99	FFFFCC	FFFFFF

Font memainkan peran yang sangat penting dalam membuat situs web lebih ramah pengguna dan meningkatkan keterbacaan konten. Bentuk dan warna font sepenuhnya bergantung pada komputer dan browser yang digunakan untuk melihat halaman Anda, tetapi Anda dapat menggunakan HTML<font>tag untuk menambahkan gaya, ukuran, dan warna pada teks di situs web Anda. Anda dapat menggunakan file<basefont> tag untuk menyetel semua teks Anda ke ukuran, wajah, dan warna yang sama.

Tag font memiliki tiga atribut yang disebut size, color, dan faceuntuk menyesuaikan font Anda. Untuk mengubah salah satu atribut font kapan saja dalam halaman web Anda, cukup gunakan tag <font>. Teks berikut akan tetap berubah sampai Anda menutup dengan tag </font>. Anda dapat mengubah satu atau semua atribut font dalam satu tag <font>.

Note-The huruf dan basefont tag usang dan itu seharusnya dihapus dalam versi masa depan dari HTML. Jadi sebaiknya tidak digunakan, disarankan untuk menggunakan gaya CSS untuk memanipulasi font Anda. Namun tetap untuk tujuan pembelajaran, bab ini akan menjelaskan tag font dan basefont secara detail.

Atur Ukuran Font

Anda dapat mengatur ukuran font konten menggunakan sizeatribut. Kisaran nilai yang diterima adalah dari 1 (terkecil) hingga 7 (terbesar). Ukuran default font adalah 3.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Setting Font Size</title>
   </head>

   <body>
      <font size = "1">Font size = "1"</font><br />
      <font size = "2">Font size = "2"</font><br />
      <font size = "3">Font size = "3"</font><br />
      <font size = "4">Font size = "4"</font><br />
      <font size = "5">Font size = "5"</font><br />
      <font size = "6">Font size = "6"</font><br />
      <font size = "7">Font size = "7"</font>
   </body>

</html>

Ini akan menghasilkan hasil sebagai berikut -

Ukuran Font Relatif

Anda dapat menentukan berapa banyak ukuran yang lebih besar atau berapa banyak ukuran yang lebih kecil dari ukuran font standar yang seharusnya. Anda dapat menentukannya seperti<font size = "+n"> atau <font size = "−n">

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Relative Font Size</title>
   </head>

   <body>
      <font size = "-1">Font size = "-1"</font><br />
      <font size = "+1">Font size = "+1"</font><br />
      <font size = "+2">Font size = "+2"</font><br />
      <font size = "+3">Font size = "+3"</font><br />
      <font size = "+4">Font size = "+4"</font>
   </body>

</html>

Ini akan menghasilkan hasil sebagai berikut -

Mengatur Font Face

Anda dapat menyetel tampilan font menggunakan atribut wajah tetapi perlu diketahui bahwa jika pengguna yang melihat halaman tidak menginstal font, mereka tidak akan dapat melihatnya. Sebaliknya pengguna akan melihat tampilan font default yang berlaku untuk komputer pengguna.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Font Face</title>
   </head>

   <body>
      <font face = "Times New Roman" size = "5">Times New Roman</font><br />
      <font face = "Verdana" size = "5">Verdana</font><br />
      <font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br />
      <font face = "WildWest" size = "5">WildWest</font><br />
      <font face = "Bedrock" size = "5">Bedrock</font><br />
   </body>

</html>

Ini akan menghasilkan hasil sebagai berikut -

Tentukan tampilan font alternatif

Seorang pengunjung hanya akan dapat melihat font Anda jika mereka menginstal font itu di komputer mereka. Jadi, dimungkinkan untuk menentukan dua atau lebih alternatif jenis huruf dengan membuat daftar nama jenis huruf, dipisahkan oleh koma.

<font face = "arial,helvetica">
<font face = "Lucida Calligraphy,Comic Sans MS,Lucida Console">

Saat halaman Anda dimuat, browser mereka akan menampilkan font pertama yang tersedia. Jika tidak ada font yang diinstal, maka itu akan menampilkan font default Times New Roman .

Note - Periksa daftar lengkap HTML Standard Fonts.

Mengatur Warna Font

Anda dapat mengatur warna font apa pun yang Anda suka menggunakan atribut color . Anda dapat menentukan warna yang Anda inginkan dengan nama warna atau kode heksadesimal untuk warna tersebut.

Note - Anda dapat memeriksa daftar lengkap HTML Color Name with Codes.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Setting Font Color</title>
   </head>
	
   <body>
      <font color = "#FF00FF">This text is in pink</font><br />
      <font color = "red">This text is red</font>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Elemen <basefont>

Elemen <basefont> seharusnya mengatur ukuran font default, warna, dan jenis huruf untuk setiap bagian dari dokumen yang tidak terdapat dalam tag <font>. Anda dapat menggunakan elemen <font> untuk mengganti pengaturan <basefont>.

Tag <basefont> juga mengambil atribut color, size dan face dan ini akan mendukung pengaturan font relatif dengan memberi ukuran nilai +1 untuk ukuran yang lebih besar atau −2 untuk dua ukuran yang lebih kecil.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Setting Basefont Color</title>
   </head>
	
   <body>
      <basefont face = "arial, verdana, sans-serif" size = "2" color = "#ff0000">
      <p>This is the page's default font.</p>
      <h2>Example of the &lt;basefont&gt; Element</h2>
      
      <p><font size = "+2" color = "darkgray">
            This is darkgray text with two sizes larger
         </font>
      </p>

      <p><font face = "courier" size = "-1" color = "#000000">
            It is a courier font, a size smaller and black in color.
         </font>
      </p>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Formulir HTML diperlukan, bila Anda ingin mengumpulkan beberapa data dari pengunjung situs. Misalnya, selama pendaftaran pengguna Anda ingin mengumpulkan informasi seperti nama, alamat email, kartu kredit, dll.

Formulir akan mengambil masukan dari pengunjung situs dan kemudian akan mempostingnya ke aplikasi back-end seperti CGI, ASP Script atau skrip PHP dll. Aplikasi back-end akan melakukan pemrosesan yang diperlukan pada data yang diteruskan berdasarkan logika bisnis yang ditentukan di dalamnya aplikasi.

Ada berbagai elemen formulir yang tersedia seperti bidang teks, bidang textarea, menu drop-down, tombol radio, kotak centang, dll.

HTML <form> tag digunakan untuk membuat formulir HTML dan memiliki sintaks berikut -

<form action = "Script URL" method = "GET|POST">
   form elements like input, textarea etc.
</form>

Atribut Formulir

Selain atribut umum, berikut adalah daftar atribut formulir yang paling sering digunakan -

Sr Tidak	Atribut & Deskripsi
1	action Skrip backend siap untuk memproses data yang Anda lewati.
2	method Metode yang akan digunakan untuk mengunggah data. Yang paling sering digunakan adalah metode GET dan POST.
3	target Tentukan jendela atau bingkai target tempat hasil skrip akan ditampilkan. Dibutuhkan nilai seperti _blank, _self, _parent dll.
4	enctype Anda dapat menggunakan atribut enctype untuk menentukan bagaimana browser mengkodekan data sebelum mengirimkannya ke server. Nilai yang memungkinkan adalah - application/x-www-form-urlencoded - Ini adalah metode standar yang digunakan sebagian besar formulir dalam skenario sederhana. mutlipart/form-data - Ini digunakan ketika Anda ingin mengunggah data biner dalam bentuk file seperti gambar, file kata dll.

Note- Anda dapat merujuk ke Perl & CGI untuk detail tentang cara kerja unggahan data formulir.

Kontrol Formulir HTML

Ada berbagai jenis kontrol formulir yang dapat Anda gunakan untuk mengumpulkan data menggunakan formulir HTML -

Kontrol Input Teks
Kontrol Kotak Centang
Kontrol Kotak Radio
Pilih Kontrol Kotak
File Pilih kotak
Kontrol Tersembunyi
Tombol yang Dapat Diklik
Tombol Kirim dan Atur Ulang

Kontrol Input Teks

Ada tiga jenis input teks yang digunakan pada formulir -

Single-line text input controls- Kontrol ini digunakan untuk item yang hanya memerlukan satu baris input pengguna, seperti kotak pencarian atau nama. Mereka dibuat menggunakan HTML<input> menandai.
Password input controls- Ini juga merupakan input teks satu baris tetapi menutupi karakter segera setelah pengguna memasukkannya. Mereka juga dibuat menggunakan tag HTMl <input>.
Multi-line text input controls- Ini digunakan ketika pengguna diminta untuk memberikan detail yang mungkin lebih panjang dari satu kalimat. Kontrol masukan multi-baris dibuat menggunakan HTML<textarea> menandai.

Kontrol masukan teks satu baris

Kontrol ini digunakan untuk item yang hanya memerlukan satu baris input pengguna, seperti kotak pencarian atau nama. Mereka dibuat menggunakan tag <input> HTML.

Contoh

Berikut adalah contoh dasar input teks satu baris yang digunakan untuk mengambil nama depan dan nama belakang -

<!DOCTYPE html>
<html>

   <head>
      <title>Text Input Control</title>
   </head>
	
   <body>
      <form >
         First name: <input type = "text" name = "first_name" />
         <br>
         Last name: <input type = "text" name = "last_name" />
      </form>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Atribut

Berikut adalah daftar atribut tag <input> untuk membuat kolom teks.

Sr Tidak	Atribut & Deskripsi
1	type Menunjukkan jenis kontrol masukan dan untuk kontrol masukan teks itu akan disetel text.
2	name Digunakan untuk memberi nama pada kontrol yang dikirim ke server untuk dikenali dan mendapatkan nilainya.
3	value Ini dapat digunakan untuk memberikan nilai awal di dalam kontrol.
4	size Memungkinkan untuk menentukan lebar dari kontrol input teks dalam hal karakter.
5	maxlength Memungkinkan untuk menentukan jumlah karakter maksimum yang dapat dimasukkan pengguna ke dalam kotak teks.

Kontrol masukan kata sandi

Ini juga merupakan input teks satu baris tetapi menutupi karakter segera setelah pengguna memasukkannya. Mereka juga dibuat menggunakan tag <input> HTML tetapi atribut tipe disetel kepassword.

Contoh

Berikut adalah contoh dasar dari input kata sandi satu baris yang digunakan untuk mengambil kata sandi pengguna -

<!DOCTYPE html>
<html>

   <head>
      <title>Password Input Control</title>
   </head>
	
   <body>
      <form >
         User ID : <input type = "text" name = "user_id" />
         <br>
         Password: <input type = "password" name = "password" />
      </form>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Atribut

Berikut adalah daftar atribut tag <input> untuk membuat field password.

Sr Tidak	Atribut & Deskripsi
1	type Menunjukkan jenis kontrol masukan dan untuk kontrol masukan kata sandi akan diatur ke password.
2	name Digunakan untuk memberi nama pada kontrol yang dikirim ke server untuk dikenali dan mendapatkan nilainya.
3	value Ini dapat digunakan untuk memberikan nilai awal di dalam kontrol.
4	size Memungkinkan untuk menentukan lebar dari kontrol input teks dalam hal karakter.
5	maxlength Memungkinkan untuk menentukan jumlah karakter maksimum yang dapat dimasukkan pengguna ke dalam kotak teks.

Kontrol Input Teks Beberapa Baris

Ini digunakan ketika pengguna diminta untuk memberikan detail yang mungkin lebih panjang dari satu kalimat. Kontrol input multi-baris dibuat menggunakan tag HTML <textarei>.

Contoh

Berikut adalah contoh dasar input teks multi-baris yang digunakan untuk mengambil deskripsi item -

<!DOCTYPE html>
<html>

   <head>
      <title>Multiple-Line Input Control</title>
   </head>
	
   <body>
      <form>
         Description : <br />
         <textarea rows = "5" cols = "50" name = "description">
            Enter description here...
         </textarea>
      </form>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Atribut

Berikut adalah daftar atribut dari tag <textarei>.

Sr Tidak	Atribut & Deskripsi
1	name Digunakan untuk memberi nama pada kontrol yang dikirim ke server untuk dikenali dan mendapatkan nilainya.
2	rows Menunjukkan jumlah baris kotak area teks.
3	cols Menunjukkan jumlah kolom kotak area teks

Kontrol Kotak Centang

Kotak centang digunakan ketika lebih dari satu opsi diperlukan untuk dipilih. Mereka juga dibuat menggunakan tag <input> HTML tetapi atribut tipe disetel kecheckbox..

Contoh

Berikut adalah contoh kode HTML untuk formulir dengan dua kotak centang -

<!DOCTYPE html>
<html>

   <head>
      <title>Checkbox Control</title>
   </head>
	
   <body>
      <form>
         <input type = "checkbox" name = "maths" value = "on"> Maths
         <input type = "checkbox" name = "physics" value = "on"> Physics
      </form>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Atribut

Berikut adalah daftar atribut untuk tag <checkbox>.

Sr Tidak	Atribut & Deskripsi
1	type Menunjukkan jenis kontrol masukan dan untuk kontrol masukan kotak centang itu akan diatur ke checkbox..
2	name Digunakan untuk memberi nama pada kontrol yang dikirim ke server untuk dikenali dan mendapatkan nilainya.
3	value Nilai yang akan digunakan jika kotak centang dipilih.
4	checked Setel ke centang jika Anda ingin memilihnya secara default.

Kontrol Tombol Radio

Tombol radio digunakan ketika dari banyak pilihan, hanya satu pilihan yang diperlukan untuk dipilih. Mereka juga dibuat menggunakan tag <input> HTML tetapi atribut tipe disetel keradio.

Contoh

Berikut adalah contoh kode HTML untuk formulir dengan dua tombol radio -

<!DOCTYPE html>
<html>

   <head>
      <title>Radio Box Control</title>
   </head>

   <body>
      <form>
         <input type = "radio" name = "subject" value = "maths"> Maths
         <input type = "radio" name = "subject" value = "physics"> Physics
      </form>
   </body>

</html>

Ini akan menghasilkan hasil sebagai berikut -

Atribut

Berikut adalah daftar atribut untuk tombol radio.

Sr Tidak	Atribut & Deskripsi
1	type Menunjukkan jenis kontrol input dan untuk kontrol input kotak centang itu akan diatur ke radio.
2	name Digunakan untuk memberi nama pada kontrol yang dikirim ke server untuk dikenali dan mendapatkan nilainya.
3	value Nilai yang akan digunakan jika kotak radio dipilih.
4	checked Setel ke centang jika Anda ingin memilihnya secara default.

Pilih Kontrol Kotak

Kotak pilih, juga disebut kotak drop-down yang menyediakan opsi untuk mendaftar berbagai opsi dalam bentuk daftar drop-down, dari mana pengguna dapat memilih satu atau lebih opsi.

Contoh

Berikut adalah contoh kode HTML untuk formulir dengan satu kotak drop-down

<!DOCTYPE html>
<html>

   <head>
      <title>Select Box Control</title>
   </head>
	
   <body>
      <form>
         <select name = "dropdown">
            <option value = "Maths" selected>Maths</option>
            <option value = "Physics">Physics</option>
         </select>
      </form>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Atribut

Berikut adalah daftar atribut penting dari tag <select> -

Sr Tidak	Atribut & Deskripsi
1	name Digunakan untuk memberi nama pada kontrol yang dikirim ke server untuk dikenali dan mendapatkan nilainya.
2	size Ini dapat digunakan untuk menampilkan kotak daftar gulir.
3	multiple Jika disetel ke "beberapa" maka memungkinkan pengguna untuk memilih beberapa item dari menu.

Berikut adalah daftar atribut penting dari tag <option> -

Sr Tidak	Atribut & Deskripsi
1	value Nilai yang akan digunakan jika opsi di kotak kotak pilih dipilih.
2	selected Menentukan bahwa opsi ini harus menjadi nilai yang dipilih pertama kali saat halaman dimuat.
3	label Cara alternatif untuk memberi label opsi

Kotak Unggah File

Jika Anda ingin mengizinkan pengguna untuk mengunggah file ke situs web Anda, Anda akan perlu menggunakan kotak unggah file, juga dikenal sebagai kotak pilih file. Ini juga dibuat menggunakan elemen <input> tetapi atribut type disetel kefile.

Contoh

Berikut adalah contoh kode HTML untuk formulir dengan satu kotak unggah file -

<!DOCTYPE html>
<html>

   <head>
      <title>File Upload Box</title>
   </head>

   <body>
      <form>
         <input type = "file" name = "fileupload" accept = "image/*" />
      </form>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Atribut

Berikut adalah daftar atribut penting dari kotak unggah file -

Sr Tidak	Atribut & Deskripsi
1	name Digunakan untuk memberi nama pada kontrol yang dikirim ke server untuk dikenali dan mendapatkan nilainya.
2	accept Menentukan jenis file yang diterima server.

Kontrol Tombol

Ada berbagai cara dalam HTML untuk membuat tombol yang dapat diklik. Anda juga dapat membuat tombol yang dapat diklik menggunakan tag <input> dengan menyetel atribut type-nya kebutton. Atribut type dapat mengambil nilai berikut -

Sr Tidak	Jenis & Deskripsi
1	submit Ini membuat tombol yang secara otomatis mengirimkan formulir.
2	reset Ini membuat tombol yang secara otomatis mengatur ulang kontrol formulir ke nilai awalnya.
3	button Ini membuat tombol yang digunakan untuk memicu skrip sisi klien saat pengguna mengklik tombol itu.
4	image Ini membuat tombol yang dapat diklik tetapi kita dapat menggunakan gambar sebagai latar belakang tombol.

Contoh

Berikut adalah contoh kode HTML untuk formulir dengan tiga jenis tombol -

<!DOCTYPE html>
<html>

   <head>
      <title>File Upload Box</title>
   </head>
	
   <body>
      <form>
         <input type = "submit" name = "submit" value = "Submit" />
         <input type = "reset" name = "reset"  value = "Reset" />
         <input type = "button" name = "ok" value = "OK" />
         <input type = "image" name = "imagebutton" src = "/html/images/logo.png" />
      </form>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Kontrol Formulir Tersembunyi

Kontrol formulir tersembunyi digunakan untuk menyembunyikan data di dalam halaman yang nantinya dapat didorong ke server. Kontrol ini bersembunyi di dalam kode dan tidak muncul di halaman sebenarnya. Misalnya, formulir tersembunyi berikut digunakan untuk menyimpan nomor halaman saat ini. Ketika pengguna akan mengklik halaman berikutnya maka nilai kontrol tersembunyi akan dikirim ke server web dan di sana akan memutuskan halaman mana yang akan ditampilkan berikutnya berdasarkan halaman saat ini yang dilewati.

Contoh

Berikut adalah contoh kode HTML untuk menunjukkan penggunaan kontrol tersembunyi -

<!DOCTYPE html>
<html>

   <head>
      <title>File Upload Box</title>
   </head>

   <body>
      <form>
         <p>This is page 10</p>
         <input type = "hidden" name = "pagename" value = "10" />
         <input type = "submit" name = "submit" value = "Submit" />
         <input type = "reset" name = "reset"  value = "Reset" />
      </form>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Terkadang Anda perlu menambahkan musik atau video ke halaman web Anda. Cara termudah untuk menambahkan video atau suara ke situs web Anda adalah dengan menyertakan tag HTML khusus yang disebut<embed>. Tag ini menyebabkan browser itu sendiri menyertakan kontrol untuk multimedia yang secara otomatis disediakan browser mendukung tag <embed> dan jenis media yang diberikan.

Anda juga bisa menyertakan file <noembed>tag untuk browser yang tidak mengenali tag <embed>. Anda dapat, misalnya, menggunakan <embed> untuk menampilkan film pilihan Anda, dan<noembed> untuk menampilkan gambar JPG tunggal jika browser tidak mendukung tag <embed>.

Contoh

Berikut adalah contoh sederhana untuk memutar file midi yang disematkan -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML embed Tag</title>
   </head>
	
   <body>
      <embed src = "/html/yourfile.mid" width = "100%" height = "60" >
         <noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed>
      </embed>
   </body>

</html>

Atribut Tag <embed>

Berikut adalah daftar atribut penting yang dapat digunakan dengan tag <embed>.

Note−Atribut align dan autostart tidak digunakan lagi di HTML5. Jangan gunakan atribut ini.

Sr Tidak	Atribut & Deskripsi
1	align Menentukan cara meratakan objek. Ini dapat diatur ke tengah, kiri atau kanan .
2	autostart Atribut boolean ini menunjukkan apakah media harus dimulai secara otomatis. Anda dapat menyetelnya menjadi benar atau salah.
3	loop Menentukan apakah suara harus dimainkan terus menerus (setel loop ke true), beberapa kali (nilai positif) atau tidak sama sekali (salah)
4	playcount Menentukan berapa kali memainkan suara. Ini adalah opsi alternatif untuk loop jika Anda menggunakan IE.
5	hidden Menentukan apakah objek multimedia harus ditampilkan di halaman. Nilai salah berarti tidak dan nilai benar berarti ya.
6	width Lebar objek dalam piksel
7	height Ketinggian objek dalam piksel
8	name Nama yang digunakan untuk mereferensikan objek.
9	src URL objek yang akan disematkan.
10	volume Mengontrol volume suara. Bisa dari 0 (mati) hingga 100 (volume penuh).

Jenis Video yang Didukung

Anda dapat menggunakan berbagai jenis media seperti film Flash (.swf), AVI (.avi), dan jenis file MOV (.mov) di dalam tag embed.

.swf files - adalah jenis file yang dibuat oleh program Flash Macromedia.
.wmv files - adalah jenis file Media Video Microsoft Window.
.mov files - adalah format Film Waktu Cepat Apple.
.mpeg files - adalah file film yang dibuat oleh Moving Pictures Expert Group.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML embed Tag</title>
   </head>

   <body>
      <embed src = "/html/yourfile.swf" width = "200" height = "200" >
         <noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed>
      </embed>
   </body>

</html>

Ini akan menghasilkan hasil sebagai berikut -

Audio Latar Belakang

Anda bisa menggunakan HTML <bgsound>tag untuk memutar trek suara di latar belakang laman web Anda. Tag ini hanya didukung oleh Internet Explorer dan sebagian besar browser lain mengabaikan tag ini. Ini mengunduh dan memainkan file audio ketika dokumen host pertama kali diunduh oleh pengguna dan ditampilkan. File suara latar belakang juga akan diputar ulang setiap kali pengguna menyegarkan browser.

Note- Tag bgsound tidak digunakan lagi dan seharusnya dihapus di versi HTML mendatang. Jadi sebaiknya tidak digunakan, disarankan untuk menggunakan audio tag HTML5 untuk menambahkan suara. Namun tetap untuk tujuan pembelajaran, bab ini akan menjelaskan tag bgsound secara detail.

Tag ini hanya memiliki dua atribut loop dan src . Kedua atribut ini memiliki arti yang sama seperti yang dijelaskan di atas.

Berikut adalah contoh sederhana untuk memainkan file midi kecil -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML embed Tag</title>
   </head>
	
   <body>
      <bgsound src = "/html/yourfile.mid">
         <noembed><img src = "yourimage.gif" ></noembed>
      </bgsound>
   </body>
	
</html>

Ini akan menghasilkan layar kosong. Tag ini tidak menampilkan komponen apa pun dan tetap tersembunyi.

Internet Explorer juga dapat menangani hanya tiga file format suara yang berbeda - wav, format asli untuk PC; au, format asli untuk kebanyakan workstation Unix; dan MIDI, skema pengkodean musik universal.

Tag Objek HTML

HTML 4 memperkenalkan <object>elemen, yang menawarkan solusi serba guna untuk penyertaan objek umum. Itu<object> elemen memungkinkan penulis HTML untuk menentukan semua yang dibutuhkan oleh suatu objek untuk presentasi oleh agen pengguna.

Berikut beberapa contoh -

Contoh 1

Anda dapat menyematkan dokumen HTML dalam dokumen HTML itu sendiri sebagai berikut -

<object data = "data/test.htm" type = "text/html" width = "300" height = "200">
   alt : <a href = "data/test.htm">test.htm</a>
</object>

Di sini atribut alt akan muncul jika browser tidak mendukung tag objek .

Contoh - 2

Anda dapat menyematkan dokumen PDF dalam dokumen HTML sebagai berikut -

<object data = "data/test.pdf" type = "application/pdf" width = "300" height = "200">
   alt : <a href = "data/test.pdf">test.htm</a>
</object>

Contoh - 3

Anda dapat menentukan beberapa parameter yang terkait dengan dokumen dengan <param>menandai. Berikut adalah contoh untuk menyematkan file wav -

<object data = "data/test.wav" type = "audio/x-wav" width = "200" height = "20">
   <param name = "src" value = "data/test.wav">
   <param name = "autoplay" value = "false">
   <param name = "autoStart" value = "0">
   alt : <a href = "data/test.wav">test.wav</a>
</object>

Contoh - 4

Anda dapat menambahkan dokumen flash sebagai berikut -

<object classid = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id = "penguin" 
   codebase = "someplace/swflash.cab" width = "200" height = "300">
   
   <param name = "movie" value = "flash/penguin.swf" />
   <param name = "quality" value = "high" />
   <img src = "penguin.jpg" width = "200" height = "300" alt = "Penguin" />
</object>

Contoh - 5

Anda dapat menambahkan applet java ke dalam dokumen HTML sebagai berikut -

<object classid = "clsid:8ad9c840-044e-11d1-b3e9-00805f499d93" 
   width = "200" height = "200">
   <param name = "code" value = "applet.class">
</object>

Itu classidatribut mengidentifikasi versi Java Plug-in yang akan digunakan. Anda dapat menggunakan atribut basis kode opsional untuk menentukan apakah dan bagaimana mendownload JRE.

HTML marquee adalah bagian teks bergulir yang ditampilkan secara horizontal atau vertikal ke bawah halaman web Anda tergantung pada pengaturan. Ini dibuat dengan menggunakan tag <marquees> HTML.

Note- Tag <marquee> tidak digunakan lagi di HTML5. Jangan gunakan elemen ini, sebagai gantinya Anda dapat menggunakan JavaScript dan CSS untuk membuat efek seperti itu.

Sintaksis

Sintaks sederhana untuk menggunakan tag <marquee> HTML adalah sebagai berikut -

<marquee attribute_name = "attribute_value"....more attributes>
   One or more lines or text message or image
</marquee>

Atribut Tag <marquee>

Berikut adalah daftar atribut penting yang dapat digunakan dengan tag <marquee>.

Sr Tidak	Atribut & Deskripsi
1	width Ini menentukan lebar tenda. Ini bisa berupa nilai seperti 10 atau 20% dll.
2	height Ini menentukan ketinggian tenda. Ini bisa berupa nilai seperti 10 atau 20% dll.
3	direction Ini menentukan ke arah mana marquee harus menggulir. Ini bisa berupa nilai seperti atas, bawah, kiri atau kanan .
4	behavior Ini menentukan jenis scrolling marquee. Ini dapat memiliki nilai seperti scroll, slide, dan alternatif .
5	scrolldelay Ini menentukan berapa lama penundaan di antara setiap lompatan. Ini akan memiliki nilai seperti 10 dll.
6	scrollamount Ini menentukan kecepatan teks marquee. Ini dapat memiliki nilai seperti 10 dll.
7	loop Ini menentukan berapa kali melakukan loop. Nilai defaultnya adalah INFINITE, yang berarti marquee berputar tanpa henti.
8	bgcolor Ini menentukan warna latar belakang dalam hal nama warna atau nilai hex warna.
9	hspace Ini menentukan ruang horizontal di sekitar tenda. Ini bisa berupa nilai seperti 10 atau 20% dll.
10	vspace Ini menentukan ruang vertikal di sekitar marquee. Ini bisa berupa nilai seperti 10 atau 20% dll.

Berikut adalah beberapa contoh untuk menunjukkan penggunaan tag marquee.

Contoh - 1

<!DOCTYPE html>
<html>

   <head>
      <title>HTML marquee Tag</title>
   </head>
	
   <body>
      <marquee>This is basic example of marquee</marquee>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Contoh - 2

<!DOCTYPE html>
<html>

   <head>
      <title>HTML marquee Tag</title>
   </head>
	
   <body>
      <marquee width = "50%">This example will take only 50% width</marquee>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Contoh - 3

<!DOCTYPE html>
<html>

   <head>
      <title>HTML marquee Tag</title>
   </head>

   <body>
      <marquee direction = "right">This text will scroll from left to right</marquee>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Contoh - 4

<!DOCTYPE html>
<html>

   <head>
      <title>HTML marquee Tag</title>
   </head>
	
   <body>
      <marquee direction = "up">This text will scroll from bottom to up</marquee>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Kami telah mempelajari bahwa dokumen HTML biasa akan memiliki struktur berikut -

Document declaration tag 
<html>
   
   <head>
      Document header related tags
   </head>

   <body>
      Document body related tags
   </body>
   
</html>

Bab ini akan memberikan sedikit lebih banyak detail tentang bagian header yang diwakili oleh tag HTML <head>. Tag <head> adalah wadah dari berbagai tag penting seperti tag <title>, <meta>, <link>, <base>, <style>, <script>, dan <noscript>.

Tag <title> HTML

Tag HTML <title> digunakan untuk menentukan judul dokumen HTML. Berikut adalah contoh untuk memberi judul pada dokumen HTML -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Title Tag Example</title>
   </head>

   <body>
      <p>Hello, World!</p>
   </body>

</html>

Ini akan menghasilkan hasil sebagai berikut -

Tag <meta> HTML

Tag HTML <meta> digunakan untuk menyediakan metadata tentang dokumen HTML yang meliputi informasi tentang halaman kedaluwarsa, pembuat halaman, daftar kata kunci, deskripsi halaman dll.

Berikut adalah beberapa penggunaan penting dari tag <meta> di dalam dokumen HTML -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Meta Tag Example</title>

      <!-- Provide list of keywords -->
      <meta name = "keywords" content = "C, C++, Java, PHP, Perl, Python">

      <!-- Provide description of the page -->
      <meta name = "description" content = "Simply Easy Learning by Tutorials Point">

      <!-- Author information -->
      <meta name = "author" content = "Tutorials Point">

      <!-- Page content type -->
      <meta http-equiv = "content-type" content = "text/html; charset = UTF-8">

      <!-- Page refreshing delay -->
      <meta http-equiv = "refresh" content = "30">

      <!-- Page expiry -->
      <meta http-equiv = "expires" content = "Wed, 21 June 2006 14:25:27 GMT">

      <!-- Tag to tell robots not to index the content of a page -->
      <meta name = "robots" content = "noindex, nofollow">

   </head>

   <body>
      <p>Hello, World!</p>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Tag <base> HTML

Tag <base> HTML digunakan untuk menentukan URL dasar untuk semua URL relatif dalam sebuah halaman, yang berarti semua URL lainnya akan digabungkan menjadi URL dasar saat mencari item tertentu.

Misalnya, semua halaman dan gambar yang diberikan akan dicari setelah mengawali URL yang diberikan dengan URL dasar http://www.tutorialspoint.com/ directory -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Base Tag Example</title>
      <base href = "https://www.tutorialspoint.com/" />
   </head>

   <body>
      <img src = "/images/logo.png" alt = "Logo Image"/>
      <a href = "/html/index.htm" title = "HTML Tutorial"/>HTML Tutorial</a> 
   </body>

</html>

Ini akan menghasilkan hasil sebagai berikut -

Tetapi jika Anda mengubah URL dasar ke yang lain, misalnya, jika URL dasar adalah http://www.tutorialspoint.com/home maka gambar dan tautan lain yang diberikan akan menjadi seperti http://www.tutorialspoint.com/home/images /logo.png dan http://www.tutorialspoint.com/html/index.htm

Tag <link> HTML

Tag <link> HTML digunakan untuk menentukan hubungan antara dokumen saat ini dan sumber daya eksternal. Berikut adalah contoh untuk menautkan file lembar gaya eksternal yang tersedia dicss sub-direktori dalam root web -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML link Tag Example</title>
      <base href = "https://www.tutorialspoint.com/" />
      <link rel = "stylesheet" type = "text/css" href = "/css/style.css">
   </head>
	
   <body>
      <p>Hello, World!</p>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Tag HTML <style>

Tag HTML <style> digunakan untuk menentukan style sheet untuk dokumen HTML saat ini. Berikut adalah contoh untuk mendefinisikan beberapa aturan style sheet di dalam tag <style> -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML style Tag Example</title>
      <base href = "https://www.tutorialspoint.com/" />
      
      <style type = "text/css">
         .myclass {
            background-color: #aaa;
            padding: 10px;
         }
      </style>
   </head>
	
   <body>
      <p class = "myclass">Hello, World!</p>
   </body>

</html>

Ini akan menghasilkan hasil sebagai berikut -

Note- Untuk mempelajari tentang cara kerja Cascading Style Sheet, silakan periksa tutorial terpisah yang tersedia di css

Tag <script> HTML

Tag <script> HTML digunakan untuk menyertakan file skrip eksternal atau untuk menentukan skrip internal untuk dokumen HTML. Berikut adalah contoh di mana kami menggunakan JavaScript untuk mendefinisikan fungsi JavaScript sederhana -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML script Tag Example</title>
      <base href = "http://www.tutorialspoint.com/" />
      
      <script type = "text/JavaScript">
         function Hello() {
            alert("Hello, World");
         }
      </script>
   </head>

   <body>
      <input type = "button" onclick = "Hello();" name = "ok" value = "OK"  />
   </body>

</html>

Ini akan menghasilkan hasil sebagai berikut, di mana Anda dapat mencoba mengklik tombol yang diberikan -

Note- Untuk mempelajari tentang cara kerja JavaScript, silakan periksa tutorial terpisah yang tersedia di javascript

Cascading Style Sheets (CSS) menjelaskan bagaimana dokumen disajikan pada layar, dalam cetakan, atau mungkin bagaimana mereka diucapkan. W3C secara aktif mempromosikan penggunaan style sheets di Web sejak konsorsium didirikan pada tahun 1994.

Cascading Style Sheets (CSS) memberikan alternatif yang mudah dan efektif untuk menentukan berbagai atribut untuk tag HTML. Dengan menggunakan CSS, Anda dapat menentukan sejumlah properti gaya untuk elemen HTML tertentu. Setiap properti memiliki nama dan nilai, dipisahkan oleh titik dua (:). Setiap deklarasi properti dipisahkan oleh titik koma (;).

Contoh

Pertama mari kita pertimbangkan contoh dokumen HTML yang menggunakan tag <font> dan atribut terkait untuk menentukan warna teks dan ukuran font -

Note- Tag font tidak digunakan lagi dan seharusnya dihapus pada versi HTML mendatang. Jadi sebaiknya tidak digunakan, disarankan untuk menggunakan gaya CSS untuk memanipulasi font Anda. Namun tetap untuk tujuan pembelajaran, bab ini akan bekerja dengan contoh penggunaan tag font.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML CSS</title>
   </head>
	
   <body>
      <p><font color = "green" size = "5">Hello, World!</font></p>
   </body>

</html>

Kita dapat menulis ulang contoh di atas dengan bantuan Style Sheet sebagai berikut -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML CSS</title>
   </head>

   <body>
      <p style = "color:green; font-size:24px;" >Hello, World!</p>
   </body>

</html>

Ini akan menghasilkan hasil sebagai berikut -

Anda dapat menggunakan CSS dengan tiga cara di dokumen HTML Anda -

External Style Sheet - Tentukan aturan style sheet dalam file .css terpisah dan kemudian sertakan file tersebut dalam dokumen HTML Anda menggunakan tag <link> HTML.
Internal Style Sheet - Tentukan aturan style sheet di bagian header dokumen HTML menggunakan tag <style>.
Inline Style Sheet - Tentukan aturan style sheet secara langsung bersama dengan elemen HTML yang digunakan style atribut.

Mari kita lihat ketiga kasus satu per satu dengan bantuan contoh yang sesuai.

Lembar Gaya Eksternal

Jika Anda perlu menggunakan lembar gaya Anda untuk berbagai halaman, maka selalu disarankan untuk menentukan lembar gaya umum dalam file terpisah. File lembar gaya bertingkat akan memiliki ekstensi sebagai.css dan itu akan dimasukkan dalam file HTML menggunakan tag <link>.

Contoh

Pertimbangkan kita mendefinisikan file lembar gaya style.css yang memiliki aturan berikut -

.red {
   color: red;
}
.thick {
   font-size:20px;
}
.green {
   color:green;
}

Di sini kami mendefinisikan tiga aturan CSS yang akan berlaku untuk tiga kelas berbeda yang ditentukan untuk tag HTML. Saya sarankan Anda tidak perlu memikirkan bagaimana aturan ini didefinisikan karena Anda akan mempelajarinya saat mempelajari CSS. Sekarang mari kita gunakan file CSS eksternal di atas dalam dokumen HTML berikut -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML External CSS</title>
      <link rel = "stylesheet" type = "text/css" href = "/html/style.css">
   </head>

   <body>
      <p class = "red">This is red</p>
      <p class = "thick">This is thick</p>
      <p class = "green">This is green</p>
      <p class = "thick green">This is thick and green</p>
   </body>

</html>

Ini akan menghasilkan hasil sebagai berikut -

Style Sheet Internal

Jika Anda ingin menerapkan aturan Style Sheet ke satu dokumen saja, maka Anda dapat menyertakan aturan tersebut di bagian header dokumen HTML menggunakan tag <style>.

Aturan yang ditentukan dalam lembar gaya internal menggantikan aturan yang ditentukan dalam file CSS eksternal.

Contoh

Mari kita tulis ulang contoh di atas sekali lagi, tetapi di sini kita akan menulis aturan style sheet dalam dokumen HTML yang sama menggunakan tag <style> -

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>HTML Internal CSS</title> 
      
      <style type = "text/css"> 
         .red { 
            color: red; 
         } 
         .thick{ 
            font-size:20px; 
         } 
         .green { 
            color:green; 
         } 
      </style> 
   </head>
	
   <body> 
      <p class = "red">This is red</p>  
      <p class = "thick">This is thick</p>  
      <p class = "green">This is green</p>  
      <p class = "thick green">This is thick and green</p> 
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Style Sheet Inline

Anda dapat menerapkan aturan lembar gaya secara langsung ke elemen HTML apa pun menggunakan styleatribut dari tag yang relevan. Ini harus dilakukan hanya jika Anda tertarik untuk membuat perubahan tertentu pada elemen HTML saja.

Aturan yang ditentukan sejajar dengan elemen menggantikan aturan yang ditentukan dalam file CSS eksternal serta aturan yang ditentukan dalam elemen <style>.

Contoh

Mari kita tulis ulang contoh di atas sekali lagi, tetapi di sini kita akan menulis aturan style sheet bersama dengan elemen HTML yang digunakan style atribut elemen tersebut.

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>HTML Inline CSS</title> 
   </head>
 
   <body> 
      <p style = "color:red;">This is red</p>  
      <p style = "font-size:20px;">This is thick</p>  
      <p style = "color:green;">This is green</p>  
      <p style = "color:green;font-size:20px;">This is thick and green</p> 
   </body>
 
</html>

Ini akan menghasilkan hasil sebagai berikut -

SEBUAH scriptadalah bagian kecil dari program yang dapat menambahkan interaktivitas ke situs web Anda. Misalnya, skrip dapat menghasilkan pesan kotak peringatan pop-up, atau menyediakan menu tarik-turun. Skrip ini dapat ditulis menggunakan JavaScript atau VBScript.

Anda dapat menulis berbagai fungsi kecil, yang disebut penangan peristiwa menggunakan salah satu bahasa skrip, lalu Anda dapat memicu fungsi tersebut menggunakan atribut HTML.

Hanya sekarang-a-hari JavaScript dan kerangka kerja terkait digunakan oleh sebagian besar pengembang web, VBScript bahkan tidak didukung oleh berbagai browser utama.

Anda dapat menyimpan kode JavaScript dalam file terpisah dan kemudian memasukkannya kapan pun diperlukan, atau Anda dapat menentukan fungsionalitas di dalam dokumen HTML itu sendiri. Mari kita lihat kedua kasus satu per satu dengan contoh yang sesuai.

JavaScript Eksternal

Jika Anda akan menentukan fungsionalitas yang akan digunakan dalam berbagai dokumen HTML, maka lebih baik untuk menyimpan fungsionalitas tersebut dalam file JavaScript terpisah dan kemudian memasukkan file tersebut ke dalam dokumen HTML Anda. File JavaScript akan memiliki ekstensi sebagai.js dan itu akan dimasukkan dalam file HTML menggunakan tag <script>.

Contoh

Pertimbangkan kami mendefinisikan fungsi kecil menggunakan JavaScript di script.js yang memiliki kode berikut -

function Hello() {
   alert("Hello, World");
}

Sekarang mari kita gunakan file JavaScript eksternal di atas dalam dokumen HTML berikut -

<!DOCTYPE html>
<html>

   <head>
      <title>Javascript External Script</title>
      <script src = "/html/script.js" type = "text/javascript"/></script>
   </head>

   <body>
      <input type = "button" onclick = "Hello();" name = "ok" value = "Click Me" />
   </body>

</html>

Ini akan menghasilkan hasil sebagai berikut, di mana Anda dapat mencoba mengklik tombol yang diberikan -

Skrip Internal

Anda dapat menulis kode script Anda langsung ke dalam dokumen HTML Anda. Biasanya kami menyimpan kode skrip di header dokumen menggunakan tag <script>, jika tidak tidak ada batasan dan Anda dapat meletakkan kode sumber Anda di mana saja di dokumen tetapi di dalam tag <script>.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>JavaScript Internal Script</title>
      <base href = "https://www.tutorialspoint.com/" />
      
      <script type = "text/JavaScript">
         function Hello() {
            alert("Hello, World");
         }
      </script>
   </head>

   <body>
      <input type = "button" onclick = "Hello();" name = "ok" value = "Click Me" />
   </body>

</html>

Ini akan menghasilkan hasil sebagai berikut, di mana Anda dapat mencoba mengklik tombol yang diberikan -

Penangan Acara

Penangan acara tidak lain adalah fungsi yang didefinisikan sederhana yang dapat dipanggil terhadap acara mouse atau keyboard apa pun. Anda dapat menentukan logika bisnis Anda di dalam event handler Anda yang dapat bervariasi dari satu hingga 1000 kode baris.

Contoh berikut menjelaskan bagaimana menulis sebuah event handler. Mari tulis satu fungsi sederhana EventHandler () di header dokumen. Kami akan memanggil fungsi ini ketika ada pengguna yang mengarahkan mouse ke paragraf.

<!DOCTYPE html>
<html>

   <head>
      <title>Event Handlers Example</title>
      <base href = "https://www.tutorialspoint.com/" />
      
      <script type = "text/JavaScript">
         function EventHandler() {
            alert("I'm event handler!!");
         }
      </script>
   </head>

   <body>
      <p onmouseover = "EventHandler();">Bring your mouse here to see an alert</p>
   </body>

</html>

Sekarang Ini akan menghasilkan hasil sebagai berikut. Arahkan mouse Anda ke atas garis ini dan lihat hasilnya -

Sembunyikan Skrip dari Browser Lama

Meskipun sebagian besar (jika tidak semua) browser saat ini mendukung JavaScript, namun beberapa browser lama tidak. Jika browser tidak mendukung JavaScript, alih-alih menjalankan skrip Anda, itu akan menampilkan kode kepada pengguna. Untuk mencegahnya, Anda cukup menempatkan komentar HTML di sekitar skrip seperti yang ditunjukkan di bawah ini.

JavaScript Example:
<script type = "text/JavaScript">
   <!--
      document.write("Hello JavaScript!");
   //-->
</script>

VBScript Example:
<script type = "text/vbscript">
   <!--
      document.write("Hello VBScript!")
   '-->
</script>

Elemen <noscript>

Anda juga dapat memberikan info alternatif kepada pengguna yang browsernya tidak mendukung skrip dan bagi pengguna yang telah menonaktifkan opsi skrip di browser mereka. Anda dapat melakukannya dengan menggunakan<noscript> menandai.

JavaScript Example:
<script type = "text/JavaScript">
   <!--
      document.write("Hello JavaScript!");
   //-->
</script>

<noscript>Your browser does not support JavaScript!</noscript>

VBScript Example:
<script type = "text/vbscript">
   <!--
      document.write("Hello VBScript!")
   '-->
</script>

<noscript>Your browser does not support VBScript!</noscript>

Bahasa Skrip Default

Mungkin ada situasi ketika Anda akan menyertakan beberapa file skrip dan akhirnya menggunakan beberapa tag <script>. Anda dapat menentukan bahasa skrip default untuk semua tag skrip Anda . Ini menyelamatkan Anda dari menentukan bahasa setiap kali Anda menggunakan tag script di dalam halaman. Di bawah ini contohnya -

<meta http-equiv = "Content-Script-Type" content = "text/JavaScript" />

Perhatikan bahwa Anda masih dapat mengganti default dengan menentukan bahasa di dalam tag script.

Tata letak halaman web sangat penting untuk memberikan tampilan yang lebih baik ke situs web Anda. Butuh banyak waktu untuk mendesain tata letak situs web dengan tampilan dan nuansa yang bagus.

Sekarang-a-hari, semua situs web modern menggunakan kerangka kerja berbasis CSS dan JavaScript untuk menghasilkan situs web yang responsif dan dinamis tetapi Anda dapat membuat tata letak yang baik menggunakan tabel HTML sederhana atau tag divisi yang dikombinasikan dengan tag pemformatan lainnya. Bab ini akan memberi Anda beberapa contoh tentang cara membuat tata letak yang sederhana namun berfungsi untuk halaman web Anda menggunakan HTML murni dan atributnya.

Tata Letak HTML - Menggunakan Tabel

Cara paling sederhana dan paling populer untuk membuat tata letak adalah menggunakan tag HTML <table>. Tabel ini disusun dalam kolom dan baris, sehingga Anda dapat memanfaatkan baris dan kolom ini sesuka Anda.

Contoh

Misalnya, contoh tata letak HTML berikut dibuat menggunakan tabel dengan 3 baris dan 2 kolom tetapi kolom header dan footer mencakup kedua kolom menggunakan atribut colspan -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Layout using Tables</title>
   </head>

   <body>
      <table width = "100%" border = "0">
         
         <tr>
            <td colspan = "2" bgcolor = "#b5dcb3">
               <h1>This is Web Page Main title</h1>
            </td>
         </tr>
         <tr valign = "top">
            <td bgcolor = "#aaa" width = "50">
               <b>Main Menu</b><br />
               HTML<br />
               PHP<br />
               PERL...
            </td>
            
            <td bgcolor = "#eee" width = "100" height = "200">
               Technical and Managerial Tutorials
            </td>
         </tr>
         <tr>
            <td colspan = "2" bgcolor = "#b5dcb3">
               <center>
                  Copyright © 2007 Tutorialspoint.com
               </center>
            </td>
         </tr>
         
      </table>
   </body>

</html>

Ini akan menghasilkan hasil sebagai berikut -

Tata Letak Beberapa Kolom - Menggunakan Tabel

Anda dapat mendesain halaman web Anda untuk menempatkan konten web Anda di beberapa halaman. Anda dapat menyimpan konten Anda di kolom tengah dan Anda dapat menggunakan kolom kiri untuk menggunakan menu dan kolom kanan dapat digunakan untuk memasang iklan atau beberapa hal lainnya. Tata letak ini akan sangat mirip dengan yang kita miliki di situs web tutorialspoint.com.

Contoh

Berikut adalah contoh untuk membuat tata letak tiga kolom -

<!DOCTYPE html>
<html>

   <head>
      <title>Three Column HTML Layout</title>
   </head>

   <body>
      <table width = "100%" border = "0">
         
         <tr valign = "top">
            <td bgcolor = "#aaa" width = "20%">
               <b>Main Menu</b><br />
               HTML<br />
               PHP<br />
               PERL...
            </td>
				
            <td bgcolor = "#b5dcb3" height = "200" width = "60%">
               Technical and Managerial Tutorials
            </td>
				
            <td bgcolor = "#aaa" width = "20%">
               <b>Right Menu</b><br />
               HTML<br />
               PHP<br />
               PERL...
            </td>
         </tr>
         
      <table>
   </body>

</html>

Ini akan menghasilkan hasil sebagai berikut -

Tata Letak HTML - Menggunakan DIV, SPAN

Elemen <div> adalah elemen level blok yang digunakan untuk mengelompokkan elemen HTML. Meskipun tag <div> adalah elemen level blok, elemen HTML <span> digunakan untuk mengelompokkan elemen pada level sebaris.

Meskipun kita dapat mencapai tata letak yang cukup bagus dengan tabel HTML, tetapi tabel tidak benar-benar dirancang sebagai alat tata letak. Tabel lebih cocok untuk menyajikan data tabular.

Note - Contoh ini menggunakan Cascading Style Sheet (CSS), jadi sebelum memahami contoh ini, Anda harus memiliki pemahaman yang lebih baik tentang cara kerja CSS.

Contoh

Di sini kita akan mencoba untuk mencapai hasil yang sama menggunakan tag <div> bersama dengan CSS, apapun yang telah Anda capai dengan menggunakan tag <table> pada contoh sebelumnya.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Layouts using DIV, SPAN</title>
   </head>

   <body>
      <div style = "width:100%">
		
         <div style = "background-color:#b5dcb3; width:100%">
            <h1>This is Web Page Main title</h1>
         </div>
			
         <div style = "background-color:#aaa; height:200px; width:100px; float:left;">
            <div><b>Main Menu</b></div>
            HTML<br />
            PHP<br />
            PERL...
         </div>
			
         <div style = "background-color:#eee; height:200px; width:350px; float:left;" >
            <p>Technical and Managerial Tutorials</p>
         </div>
		
         <div style = "background-color:#aaa; height:200px; width:100px; float:right;">
            <div><b>Right Menu</b></div>
            HTML<br />
            PHP<br />
            PERL...
         </div>
			
         <div style = "background-color:#b5dcb3; clear:both">
            <center>
               Copyright © 2007 Tutorialspoint.com
            </center>
         </div>
			
      </div>
   </body>

</html>

Ini akan menghasilkan hasil sebagai berikut -

Anda dapat membuat tata letak yang lebih baik menggunakan DIV, SPAN bersama dengan CSS. Untuk informasi lebih lanjut tentang CSS, silakan lihat Tutorial CSS.