Pangunahing Kaalaman sa HTML
Sa artikulong ito, ipapaliwanag namin ang mga pangunahing kaalaman sa HTML.
Ipinaliwanag nito ang mga pangunahing tag tulad ng DOCTYPE declaration, <html>, <head>, at <body> na mga tag. Inilalarawan din nito ang mga tag, attributes, at special characters.
YouTube Video
Pangunahing Kaalaman sa 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>Sa simula ng file, ideklara natin na ito ay isang dokumento ng HTML5, na nagmumungkahi na sumusunod ito sa mga patakaran ng HTML5.
-
<html>Ang
<html>tag ay ang pinakalabas na elemento sa isang HTML dokumento na bumabalot sa buong nilalaman. Ang bawat HTML file ay naglalaman lamang ng isang<html>tag, at ang lahat ng iba pang mga tag ay nakapaloob sa loob ng tag na ito. Anglang="en"sa loob ng panimulang<html>tag ay tinatawag na katangian at ipinapahayag nito sa browser na ang dokumento ay nakasulat sa Ingles. Ito ay tumutulong upang ipaalam sa mga screen reader at mga search engine ang wika ng dokumento. -
<head>Ang
<head>tag ay nagtatakda ng metadata (impormasyon) para sa pahina. Kasama rito ang pamagat ng pahina, pag-encode ng karakter, at mga setting ng responsive na disenyo. Ang tumutugong disenyo ay tumutukoy sa isang metodo na idinisenyo para sa mga website o app upang umangkop at maipakita ng maayos sa iba't ibang device at laki ng screen. Ito ay nagpapahintulot sa mga gumagamit na kumportableng makita ang nilalaman sa iba't ibang device gaya ng mga smartphone, tablet, at desktop.Ang
<meta charset="UTF-8">ay nagtatakda ng pag-encode ng karakter ng dokumento sa UTF-8.Ang
<meta name="viewport" content="width=device-width, initial-scale=1.0">ay isang setting na nag-o-optimize ng display para sa mga mobile device. Inaangkop ng pahina ang sarili sa lapad ng screen ng device.Ang
<title>ay kumakatawan sa pamagat ng pahina na ipinapakita sa tab ng browser. Sa halimbawang ito, ang pamagat na 'Basics of HTML' ay itinatakda. -
<body>Ang
<body>tag ay naglalaman ng bahagi na nagpapakita ng nilalaman sa mga gumagamit. Sa loob ng tag na ito, nakasulat ang teksto, mga imahe, mga link, atbp. -
<main>Ang
<main>tag ay kumakatawan sa pangunahing nilalaman ng pahina. Kasama dito ang mga pamagat at talata. -
<h1>Ang
<h1>tag ay kumakatawan sa pinakamahalagang pamagat sa pahina. Karaniwan lamang na gamitin ang<main>at<h1>tag nang isang beses sa isang dokumento. -
<p>Ang
<p>tag ay kumakatawan sa isang talata. -
<!-- Comment -->Maaari kang magsulat ng mga komento sa HTML gamit ang format na ito. Dahil ang client-side HTML ay maaaring makita ng kahit sino, huwag maglagay ng sensitibong impormasyon tulad ng mga password o API key sa mga komento.
Maraming tag ang HTML, ngunit bigyang-pansin ang mga sumusunod na punto dito. Ang isang HTML file ay binubuo ng isang DOCTYPE na deklarasyon at isang <html> tag. Ang <html> tag ay naglalaman ng isang <head> tag at isang <body> tag. Sa HTML, ang lahat ng mga tag ay nakapaloob sa loob ng <html> tag, na nagpapahayag ng istraktura ng teksto sa pamamagitan ng mga relasyon ng magulang, anak, at magkapatid, katulad ng isang istraktura ng puno. Kapag nagsusulat ng HTML, magtuon din ng pansin sa istruktura ng dokumento.
Mga Tag at Katangian
Susunod, tingnan natin ang mga HTML tag at katangian.
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> -->Ang mga tag ay nakapaloob sa mga angle bracket (<, >) at kadalasang binubuo ng pares ng pagbubukas at pagsasara ng tag. Gayunpaman, mayroon ding mga single na tag, tulad ng <meta> tag at <img> tag, na hindi naglalaman ng nilalaman. Ang mga single na tag ay hindi nangangailangan ng closing tag.
Ang mga tag ay maaaring magkaroon ng mga attributes, na naglalaman ng karagdagang impormasyon sa tag. Ang mga attributes ay isinusulat sa loob ng opening tag sa format na attributeName="value".
Dito, ang <div> ay tinutukoy bilang isang tag, at ang <div>Content</div> bilang isang elemento.
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>Kasama sa mga karaniwang attribute sa HTML ang id, class, at style. Ang id attribute ay ginagamit upang bigyan ang isang elemento ng natatanging identifier, at maaari lamang magkaroon ng isang elemento na may parehong id sa isang pahina. Ito ay kapaki-pakinabang kapag nagma-manipula ng mga partikular na elemento gamit ang JavaScript o CSS. Ang class attribute ay nagbibigay-daan sa iyo na pagsama-samahin ang maraming elemento gamit ang CSS o JavaScript sa pamamagitan ng pagtatalaga ng pangalan ng klase. Maaari mong itakda ang parehong klase sa maraming elemento, na nagpapahintulot na magbahagi ng mga estilo. Ang style attribute ay nagpapahiwatig ng inline na CSS style para sa isang elemento. Karaniwang ang mga estilo ay tinutukoy sa isang external stylesheet o sa loob ng <style> tag, ngunit ginagamit ang attribute na ito kapag nais mong tukuyin ang mga estilo direkta para sa mga indibidwal na elemento.
Mga espesyal na karakter sa HTML
Susunod, tingnan natin ang mga espesyal na karakter sa HTML.
Sa HTML, may mga espesyal na karakter na ginagamit upang ipakita ang tiyak na mga simbolo at karakter. Ang mga espesyal na karakter na ito ay tinatawag na entity. Ang mga espesyal na karakter ay nagsisimula sa & (ampersand), kasunod ng isang pangalan o numero at nagtatapos sa ; (semicolon).
Mga kinatawang espesyal na karakter sa HTML
Narito ang ilang karaniwang espesyal na karakter.
| 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) |
Mga halimbawa ng paggamit ng espesyal na karakter sa HTML
Lalo na, ang angle brackets (<, >) at dobleng panipi ay kailangan gamitin ng tama sa HTML.
Ang mga angle bracket (<, >) at double quotation marks ay dapat na kinakatawan bilang mga espesyal na karakter sa HTML, tulad ng ipinapakita sa ibaba.
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>
Mga Bersyon ng HTML
Tingnan natin dito ang mga bersyon ng HTML.
Ang mga bersyon ng HTML ay nag-evolve upang tukuyin ang istruktura at functionality ng mga web page. Narito ang mga pangunahing bersyon:.
-
HTML 1.0 (1993)
Ang unang bersyon ng HTML ay may napaka-basic na markup features lamang. Ito ay nagtukoy ng mga elemento gaya ng links, headings, talata, at listahan.
-
HTML 2.0 (1995)
Ang unang standardized na bersyon, na may mas maraming elemento, kabilang ang suporta para sa mga forms at tables.
-
HTML 3.2 (1997)
Mas maraming layout features ang idinagdag, na nagbibigay-daan sa paggamit ng style elements at scripts. Dagdag pa, ang paggamit ng layout gamit ang
<table>element ay naging karaniwan. -
HTML 4.01 (1999)
Ang paghihiwalay ng istruktura at presentasyon ay umunlad, at ipinakilala ang CSS. Ang paggawa ng mga standards-compliant na site ay naging inirerekomenda. Bukod dito, ang internationalization at accessibility ng mga dokumento ay pinahusay.
-
HTML5 (2014)
Ang pinakabagong pangunahing bersyon, na nagpakilala ng suporta para sa video at audio, canvas, local storage, geolocation, at iba pang bagong APIs. Ito ay mobile-friendly, na nagbibigay-daan para sa pagbuo ng mas interactive na web applications.
Ang HTML5.2 ay isang bersyon ng HTML na inirekomenda noong 2017, at isang pinabuting bersyon ng HTML5. Mula noong HTML5.2, ito ay patuloy na ina-update bilang HTML Living Standard, imbes na may static na numero ng bersyon.
Ang HTML ay umunlad sa pamamagitan ng mga bersyong ito, na naging mas flexible at makapangyarihang teknolohiya sa web.
Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.