Dasar-dasar HTML
Dalam artikel ini, kami menjelaskan dasar-dasar HTML.
Ini menjelaskan tag utama seperti deklarasi DOCTYPE, tag <html>, <head>, dan <body>. Ini juga menjelaskan tag, atribut, dan karakter khusus.
YouTube Video
Dasar-dasar HTML
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Basics of HTML</title>
7 </head>
8 <body>
9 <!-- Main content wrapped in the main tag -->
10 <main>
11 <!-- Main heading -->
12 <h1>What is HTML?</h1>
13 <!-- Example of a paragraph -->
14 <p>HTML is the language used to create the basic structure of web pages.</p>
15 </main>
16 </body>
17</html>-
<!DOCTYPE html>Di awal berkas, kita mendeklarasikan bahwa ini adalah dokumen HTML5, yang menunjukkan bahwa ini mengikuti aturan HTML5.
-
<html>Tag
<html>adalah elemen terluar dalam dokumen HTML yang membungkus seluruh konten. Setiap berkas HTML hanya memiliki satu tag<html>, dan semua tag lainnya bersarang di dalam tag ini.lang="en"di dalam tag pembuka<html>disebut atribut dan memberi tahu browser bahwa dokumen ini ditulis dalam bahasa Inggris. Ini membantu memberi tahu pembaca layar dan mesin pencari tentang bahasa dokumen. -
<head>Tag
<head>mendefinisikan metadata (informasi) untuk halaman. Ini termasuk judul halaman, enkoding karakter, dan pengaturan desain responsif. Desain responsif mengacu pada metode yang dirancang untuk situs web atau aplikasi agar dapat beradaptasi dan tampil dengan baik pada berbagai perangkat dan ukuran layar. Ini memungkinkan pengguna untuk melihat konten dengan nyaman di berbagai perangkat seperti smartphone, tablet, dan komputer desktop.<meta charset="UTF-8">menetapkan pengkodean karakter dokumen ke UTF-8.<meta name="viewport" content="width=device-width, initial-scale=1.0">adalah pengaturan yang mengoptimalkan tampilan untuk perangkat mobile. Halaman menyesuaikan dengan lebar layar perangkat.<title>mewakili judul halaman yang ditampilkan di tab browser. Dalam contoh ini, judul 'Dasar-dasar HTML' ditetapkan. -
<body>Tag
<body>berisi bagian yang menampilkan konten kepada pengguna. Di dalam tag ini, teks, gambar, tautan, dll. ditulis. -
<main>Tag
<main>mewakili konten utama halaman. Ini termasuk judul dan paragraf. -
<h1>Tag
<h1>mewakili judul paling penting di halaman. Umumnya tag<main>dan<h1>digunakan hanya sekali dalam dokumen. -
<p>Tag
<p>mewakili sebuah paragraf. -
<!-- Comment -->Anda dapat menulis komentar dalam HTML dengan format ini. Karena HTML sisi klien dapat dilihat oleh siapa saja, jangan sertakan informasi sensitif seperti kata sandi atau kunci API dalam komentar.
HTML memiliki banyak tag, tetapi perhatikan poin-poin berikut di sini. Sebuah berkas HTML terdiri dari deklarasi DOCTYPE dan satu tag <html>. Tag <html> mengandung satu tag <head> dan satu tag <body>. Dalam HTML, semua tag terkandung di dalam tag <html>, mengekspresikan struktur teks melalui hubungan induk, anak, dan saudara, mirip dengan struktur pohon. Saat menulis HTML, fokus juga pada struktur dokumen.
Tag dan Atribut
Selanjutnya, mari kita lihat tag dan atribut HTML.
1<!-- Opening tag and closing tag -->
2<div>Content</div>
3
4<!-- Self-closing tag -->
5<br>
6
7<!-- Nested tag -->
8<div>
9 <div>Nested Content</div>
10</div>
11
12<!-- Attribute -->
13<div id="main">
14 <div>Nested Content</div>
15</div>
16
17<!-- Tag : <div> -->
18<!-- Element : <div>Content</div> -->Tag dilampirkan dalam tanda kurung siku (<, >) dan biasanya terdiri dari sepasang tag pembuka dan penutup. Namun, ada juga tag tunggal, seperti tag <meta> dan <img>, yang tidak mengandung konten. Tag tunggal tidak memerlukan tag penutup.
Tag dapat memiliki atribut, yang memberikan informasi tambahan pada tag. Atribut ditulis di dalam tag pembuka dalam format attributeName="value".
Di sini, <div> disebut sebagai tag, dan <div>Content</div> disebut sebagai elemen.
1<div id="header">
2 <ul class="menu">
3 <li>Home</li>
4 <li style="display: hidden;">Unvisible Menu Item</li>
5 </ul>
6</div>Atribut umum dalam HTML termasuk id, class, dan style. Atribut id digunakan untuk memberi elemen pengenal unik, dan hanya bisa ada satu elemen dengan id yang sama pada halaman tersebut. Ini berguna saat memanipulasi elemen tertentu dengan JavaScript atau CSS. Atribut class memungkinkan Anda untuk mengelompokkan beberapa elemen dengan CSS atau JavaScript dengan menetapkan nama kelas. Anda dapat menetapkan kelas yang sama ke beberapa elemen, memungkinkan gaya untuk dibagikan. Atribut style menentukan gaya CSS sebaris untuk elemen. Biasanya, gaya didefinisikan dalam stylesheet eksternal atau dalam tag <style>, tetapi atribut ini digunakan ketika Anda ingin menentukan gaya langsung untuk elemen individu.
Karakter khusus dalam HTML
Selanjutnya, mari kita lihat karakter khusus dalam HTML.
Dalam HTML, terdapat karakter khusus yang digunakan untuk menampilkan simbol dan karakter tertentu. Karakter khusus ini disebut entitas. Karakter khusus dimulai dengan & (ampersand), diikuti oleh nama atau nomor, dan diakhiri dengan ; (titik koma).
Karakter khusus representatif dalam HTML
Berikut adalah beberapa karakter khusus yang umum.
| Display | Entity Name | Entity Number | Description |
|---|---|---|---|
& |
& |
& |
Ampersand (&) |
< |
< |
< |
Less-than sign (<) |
> |
> |
> |
Greater-than sign (>) |
" |
" |
" |
Double quotation mark (") |
' |
' |
' |
Apostrophe (') |
| © | © |
© |
Copyright symbol (©) |
| € | € |
€ |
Euro symbol (€) |
| ¥ | ¥ |
¥ |
Japanese Yen symbol (¥) |
| ¢ | ¢ |
¢ |
Cent symbol (¢) |
| £ | £ |
£ |
Pound symbol (£) |
|
|
  |
Non-breaking space (space) |
Contoh penggunaan karakter khusus dalam HTML
Khususnya, tanda kurung siku (<, >) dan tanda kutip ganda harus digunakan dengan benar dalam HTML.
Tanda kurung sudut (<, >) dan tanda kutip ganda harus diwakili sebagai karakter khusus dalam HTML, seperti yang ditunjukkan di bawah ini.
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Basics of HTML</title>
7 </head>
8 <body>
9 <!-- Main content wrapped in the main tag -->
10 <main>
11 <!-- Main heading -->
12 <h1>What is HTML?</h1>
13 <!-- Example of a paragraph -->
14 <p>
15 HTML is the language used to create the basic structure of web pages.<br>
16 It defines the content and layout of a webpage using various elements such as headings, paragraphs, and lists.
17 </p>
18 <hr>
19 <h2>Basic Elements of HTML</h2>
20 <div>
21 HTML elements are used to organize and display content on a web page.
22 They include tags for text, images, links, and more.
23 </div>
24 <hr>
25 <ul>
26 <li>Headings (e.g., <h1>, <h2>)</li>
27 <li>Paragraphs (<p>)</li>
28 <li>Links (<a>)</li>
29 <li>Lists (<ul>, <ol>)</li>
30 <li>Images (<img>)</li>
31 </ul>
32 <hr>
33- <h3>About '<h1>' tag and '<h2>' tag</h3>
34+ <h3>About '<h1>' tag and '<h2>' tag</h3>
35 <img src="image.png"
36- alt="This is an example of "image"">
37+ alt="This is an example of "image"">
38 </main>
39 </body>
40</html>
Versi HTML
Mari kita lihat versi HTML di sini.
Versi HTML telah berevolusi untuk mendefinisikan struktur dan fungsionalitas halaman web. Berikut adalah versi utamanya:.
-
HTML 1.0 (1993)
Versi HTML pertama hanya memiliki fitur markup yang sangat dasar. Versi ini mendefinisikan elemen seperti tautan, judul, paragraf, dan daftar.
-
HTML 2.0 (1995)
Versi standar pertama, dengan lebih banyak elemen ditambahkan, termasuk dukungan untuk formulir dan tabel.
-
HTML 3.2 (1997)
Lebih banyak fitur tata letak ditambahkan, memungkinkan penyematan elemen gaya dan skrip. Selain itu, tata letak menggunakan elemen
<table>menjadi umum. -
HTML 4.01 (1999)
Pemisahan struktur dan presentasi berkembang, dan CSS diperkenalkan. Pembuatan situs yang sesuai standar menjadi direkomendasikan. Selain itu, internasionalisasi dan aksesibilitas dokumen telah ditingkatkan.
-
HTML5 (2014)
Versi utama terbaru, memperkenalkan dukungan untuk video dan audio, canvas, penyimpanan lokal, geolokasi, dan API baru lainnya. Ini ramah seluler, memungkinkan pengembangan aplikasi web yang lebih interaktif.
HTML5.2 adalah versi HTML yang direkomendasikan pada tahun 2017, dan merupakan versi yang ditingkatkan dari HTML5. Sejak HTML5.2, ini terus diperbarui sebagai Standar Hidup HTML, daripada memiliki nomor versi statis.
HTML telah berkembang melalui versi-versi ini, berkembang menjadi teknologi web yang lebih fleksibel dan kuat.
Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.