HTML - Elementong Kepala
Panimula sa HTML Head
Mabuhay, mga nanginginang web developer! Ngayon, tayo ay magliligid sa isa sa mga pinaka-mahalagang bagian ng isang dokumento ng HTML na madalas ay hindi napapansin: ang elementong <head>. Isipin mo ang <head> bilang likod ng tanghalan ng iyong webpage. Hindi ito lumalabas sa entablado, ngunit ito ay lubos na mahalaga upang matiyak na maayos ang lahat ng bagay.
Noong una ko pa sinimulang magturo ng HTML, sinasabi ko sa aking mga mag-aaral na ang <head> ay tulad ng utak ng iyong webpage. Ito ay naglalaman ng lahat ng mahahalagang impormasyon na tumutulong sa mga browser na maunawaan at maipapakita ng tamang paraan ang iyong nilalaman. Ilang tao ang magiging kasama mo sa pag eksplorasyon ng elementong ito!
Ano ang Elementong Kepala ng HTML?
Ang elementong <head> ay isang kontener para sa metadata (data tungkol sa data) at inilalagay sa pagitan ng tag <html> at tag <body>. Ang metadata ay hindi ipinapakita sa pahina ngunit maipasok sa makina.
Hinaharap natin ang pangkaraniwang istraktura ng isang dokumento ng HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Dati ang metadata dito -->
</head>
<body>
<!-- Nakikitang nilalaman dito -->
</body>
</html>Sa halimbang ito, lahat ng nasa pagitan ng <head> at </head> ay itinuturing na bahagi ng seksyon ng head.
HTML Header Elements
Ngayon, tayo ay titingnan ang ilang pinaka-karaniwang mga elementong matatagpuan sa loob ng <head>. Ginagamit ko ang mga ito bilang suporta sa mga aktor sa aming produksyon ng webpage.
1. Ang Title Element
Ang elementong <title> ay maaaring ang pinaka-mahalagang isa sa loob ng <head>. Itó ay tinitukoy ang pamagat ng pahina ng HTML, na ipinapakita sa toolbar ng browser o tab ng pahina.
<head>
<title>Ang Aking Unang Webpage</title>
</head>Ang kodigo na ito ay ipapakita ang "Ang Aking Unang Webpage" sa tab ng browser. Tulad ng pagbibigay ng name tag sa iyong webpage!
2. Ang Meta Element
Ang elementong <meta> ay ginagamit upang tukuyin ang iba't ibang uri ng metadata. Ito ay tulad ng pag-iwan ng mga tala para sa browser at mga search engine.
Character Encoding
<head>
<meta charset="UTF-8">
</head>Itó ay sinasabi sa browser kung anong character encoding ang gagamitin para sa dokumento ng HTML. Ang UTF-8 ay isang pangkalahatang character encoding na kayang ipakita ang anumang character.
Viewport
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>Ang meta tag na ito ay lubos na mahalaga para sa responsive web design. Itó ay nagsisigurado na ang iyong webpage ay magiging mabuting tingnan sa lahat ng mga device, mula sa kompyuter ng desktop hanggang sa mga smartphone.
Description
<head>
<meta name="description" content="Isang paunang gabay sa mga elementong head ng HTML">
</head>Itó ay nagbibigay ng maikling paglalarawan ng iyong pahina, na maaaring gamitin ng mga search engine sa mga resulta ng pagsasaliksik.
3. Ang Link Element
Ang elementong <link> ay pinaka-karaniwang ginagamit upang maglakip sa panlabas na mga stylesheet.
<head>
<link rel="stylesheet" href="styles.css">
</head>Ang linya na ito ay sinasabi sa browser na i-load at gamitin ang CSS file na pinangalanang "styles.css" upang istilisa ang iyong webpage.
4. Ang Style Element
Ang elementong <style> ay ginagamit upang tukuyin ang panloob na CSS.
<head>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
</style>
</head>Ang kodigo na ito ay nagtatakda ng font family para sa buong katawan ng iyong webpage at nagbibigay ng liwanag na kulay Griyego sa background.
5. Ang Script Element
Ang elementong <script> ay ginagamit upang mag-implantahan o mag-refer sa code ng JavaScript.
<head>
<script>
function greet() {
alert('Hello, World!');
}
</script>
</head>Ang script na ito ay nagdefini ng isang function na nagpapakita ng isang alert kapag tinatawag. Maaari mo ring maglakip sa panlabas na mga file ng JavaScript:
<head>
<script src="script.js"></script>
</head>Pagpapasama ng Lahat
Ngayon na natin naipaliwanag ang mga pangunahing aktor sa aming <head>, tayo ay makikita kung paano gumagana sila ng magkakasama sa isang kumpletong halimbang:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ang Aking Pahina ng Kapansin-pansin</title>
<meta name="description" content="Isang pagpapakita ng mga elementong head ng HTML">
<link rel="stylesheet" href="styles.css">
<style>
body {
font-family: 'Helvetica', sans-serif;
}
</style>
<script src="script.js"></script>
</head>
<body>
<h1>Mabuhay sa Aking Pahina ng Kapansin-pansin!</h1>
<!-- Iba pang nilalaman ng katawan -->
</body>
</html>Sa halimbang ito, natin ang lahat ng elementong pinag-usapan. Ang bawat isa ay naglalaro ng mahalagang papel sa pagpapakita at komportamento ng iyong webpage.
Talaan ng Karaniwang HTML Head Elements
Hinaharap natin ang isang talaan na sumusumaryo ng karaniwang HTML head elements na natin pinag-usapan:
| Element | Layunin | Halimbang |
|---|---|---|
<title> |
Tinitukoy ang pamagat ng pahina | <title>Ang Aking Pahina</title> |
<meta> |
Nagbibigay ng metadata | <meta charset="UTF-8"> |
<link> |
Maglilipat sa panlabas na mga mapagkukunan | <link rel="stylesheet" href="styles.css"> |
<style> |
Nagtatakda ng panloob na CSS | <style>body { color: blue; }</style> |
<script> |
Magimplantahan o mag-refer sa JavaScript | <script src="script.js"></script> |
Konklusyon
At doon na tayo, mga tao! Natin ang nakadiving sa elementong <head> ng HTML at ang kanyang nilalaman. Paalala, habang ang <head> ay hindi lumalabas sa iyong webpage, ito ay nagtatrabaho nang marahas sa likod upang matiyak na maayos ang lahat ng bagay.
Bilang patuloy ka sa iyong paglalakbay sa web development, makikita mo ang maraming paraan upang gamitin ang <head> element upang mapabuti ang iyong webpages. Magpatuloy ka sa pagsusuri, magpatuloy ka sa pag-aaral, at higit sa lahat, magkaroon ka ng masaya sa ginagawa!
Magpakailan man, mga hinaharap na web wizard!
Credits: Image by storyset