Structura fiecărei pagini HTML
Orice website, fie că este un site de prezentare sau un complex editor video, conține aceeași structură de bază cu mai multe elemente descriptive și nu numai.
#Structura de bază
Fiecare pagină web este alcătuită din următoarele elemente principale:
- <!DOCTYPE html> îi specifică browserului că acest document este de tipul HTML
- <html> este elementul părinte al fiecărei pagini
- <head> și <body> sunt descendenți ai elementului <html> și vor fi definiți o singură dată
<!DOCTYPE html>
<html>
<head>
<!--
...
-->
</head>
<body>
<!--
...
-->
</body>
</html>#Elementul <head>
În <head> vom introduce elemente ce ne descriu website-ul, precum:
- titlul paginii
- autorul
- descrierea
<head>
<title> FrontEnd.ro - Învață de la comunitatea open-source </title>
<meta name="author" content="Alexandru Păvăloi">
<meta
name="description"
content="Vrei să înveți FrontEnd? Aici ai parte
de tutoriale gratuite și o comunitate de developeri care te vor ajuta să devii mai bun."
>
</head>Titlul va apărea în tabul browserului, iar împreuna cu descrierea le vom vedea și în motoarele de căutare. Spre exemplu, uite cum arată site-ul nostru în urma unei căutări pe Google:
Mai mult, via taguri <meta> putem controla cum apare site-ul când e distribuit pe rețele sociale precum Facebook, LinkedIn etc. Adică noi ca și programatori alegem ce imagine, titlu și descriere vor vedea utilizatorii acestor site-uri:
Ca să obținem rezultatul de mai sus, am folosit următoarele taguri în <head>:
<meta property="og:type" content="website" />
<meta property="og:url" content="https://FrontEnd.ro" />
<meta
property="og:title"
content="FrontEnd.ro - Învață de la comunitatea open-source"
/>
<meta
property="og:description"
content="Vrei să înveți FrontEnd? Aici ai parte
de tutoriale gratuite și o comunitate de developeri care te vor ajuta să devii mai bun." />
<meta property="og:image" content="https://frontend.ro/main-seo-image.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />Valorile pentru property="" și content="" din codul de mai sus sunt specifice standardului Open Graph.
Dar asta nu e tot. În <head> vom adăuga și linkuri spre alte resurse folosite de site-ul nostru. De exemplu: foi de stiluri CSS, fișiere JavaScript etc.
<link rel="stylesheet" href="/css/styles.css" />
<script src="/js/script.js"></script>
Nu uita că poți să vezi codul oricărui website prin Click Dreapta -> View Page Source
#Elementul <body>
De la sine prin denumirea lui, elementul body (trupul) este responsabil pentru conținutul care-l vedem și cu care interacționăm efectiv în website.
Aici vom adăuga toate elementele de care are nevoie pagina noastră: texte, butoane, imagini, video-uri, liste, tabele, șamd. Practic, aproape toate elementele HTML pot fi adăugate aici, cu câteva excepții.
<body>
<header>
<a href="https://FrontEnd.ro">
FrontEnd.ro
</a>
</header>
<main>
<h1> Învață FrontEnd</h1>
<ul>
<li> HTML </li>
<li> CSS </li>
<li> JS </li>
</ul>
</main>
</body>Mai sus e un mic demo la elementul<body>ce conține un link, titlu si o lista ordonată.
#Rezumat
În <head> adăugam două tipuri de elemente:
- Elemente descriptive, care ne dau informații despre site/aplicație și sunt utile pentru SEO (search engine optimiation), inclusiv rețelele sociale
- Linkuri către resurse folosite de site-ul nostru precum: foi de stiluri CSS, fisiere JavaScript, imagini și fonturi pentu a îmbunătăți performanța, etc.
În <body> adăugăm elementele ce fac parte efectiv din site-ul nostru, și cu care vor interacționa utilizatorii. Aproape toate elementele HTML (cu câteva excepții) vor fi adăugate aici.