Essentials of HyperText Markup Language · Lesson 3
Ang HTML Page
Ang basic structure ng isang HTML page
Ang HTML Page
Ang basic structure ng isang HTML page
- Overview
- Ang HTML Document Type Declaration
- Ang root element:
<html></html> - Para sa metadata:
<head></head> - Ang
<meta>Tag - Ang
<title></title>Tag - Ang
<body></body>Tag - Summary
Dahil matibay o resilient ang HTML, kaya nitong hulaan kung ano ang ibig sabhin ng isang HTML document kahit may mga errors ito. Iyan ang dahilan kung bakit may lumalabas pa rin sa browser kahit hindi buo ang HTML document sa mga examples natin sa nakaraang lesson.
Hindi buo? Ibig sabihin mali ang itinuro mo last time?
Oo, hindi buo ang HTML document natin. Tama naman iyon, pero kailangan nating ilagay sa HTML ang buong structure ng isang document.
Overview
Ito ang isang starting template ng isang kumpletong HTML document:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title ng Website Mo</title>
</head>
<body>
<h1>Headline 1</h1>
<p>This is a paragraph</p>
</body>
</html>
Medyo marami tayong bagong tags dito. Isa-isahin natin sila.
Ang HTML Document Type Declaration
Sa unang line, makikita natin ang kakaibang tag na ito:
<!DOCTYPE html>
Ang tag na ito ay isang Document Type Declaration, or in short, . Basically, isa itong declaration na nagsasabi sa browser kung aling version ng HTML ang gamit natin. Kapag nilagay natin ang <!DOCTYPE html>, sinasabi natin sa browser na latest version ang gusto nating gamitin. May iba pang mga Document Type Declaration, pero hindi na mahalaga iyon ngayon kasi latest na ang gusto nating gamitin.
Ang root element: <html></html>
Ang <html></html>, tinatawag din na root element, ang nagre-represent sa buong HTML page. Ginagamit ito ng CSS at JavaScript, kaya mahalaga na mayroon nito.
Para sa metadata: <head></head>
Sa <head></head> tag nakalagay ang metadata. Kasama rito ang character set na ginagamit ng isang webpage, ang title at description ng HTML page mo, at iba pa. Basically, dito nakalagay ang lahat ng information tungkol sa webpage mo na hindi kailangang makita ng user, o browser lang ang makakakita.
Ang <meta> Tag
Ang <meta> tag ang isa sa mga HTML tags na may pinakamaraming kayang gawin. Sa example natin, mayroon itong additional na syntax (charset="utf-8"). Pag-uusapan natin kung ano iyan sa mga susunod na lesson. Pero sa ngayon, ang kailangan mo lang malaman ay ginagamit iyan para maging maayos ang character set na gagamitin ng browser para i-display ang HTML page mo.
Ang <title></title> Tag
Ang <title></title> tag ang nagsasabi sa browser kung ano ang title ng webpage mo. Ito rin ang idi-display sa browser tab, sa bookmarks, at sa iba pang lugar na puwedeng mag-appear ang webpage mo. Ginagamit din ito ng search engines kapag dini-display ang webpage mo sa search results, pati na sa mga social networking sites kapag may nag-share nito.
Ang <body></body> Tag
Sa <body></body> tag nakalagay ang lahat ng content ng webpage natin. So basically, dito natin ilalagay ang HTML elements na ginawa natin sa nakaraang lesson.
Summary
Mula sa lesson na ito hanggang sa pinakahuling lesson, ito na ang template na gagamitin natin kapag gumagawa tayo ng bagong webpages.
