Aspectul paginilor web: etichete și atribute

Pentru a adăuga conținut la pagina noastră, vom configura fișierul nostru cu o structură de bază. În primul rând, vom folosi etichete pentru a identifica informațiile despre unde încep și se termină părțile paginii noastre. Vom face acest lucru utilizând primul nostru set de etichete, <html> și </html>. Ne referim la acestea ca un set pentru că ambele folosesc același cuvânt predefinit (HTML), iar acesta din urmă folosește bara oblică inversă (/) pentru a indica faptul că marchează încheierea acelui set de etichete. Acțiunea de a plasa un set de etichete în jurul conținutului și a altor coduri este adesea numită „împachetare” a ceea ce este între etichete. Aceasta este o modalitate bună de a crea o imagine mentală a ceea ce faci.

În continuare, vom mai pune câteva etichete și apoi vom salva fișierul și vom vedea câteva rezultate. Între etichetele dvs. HTML (denumite în mod obișnuit „înăuntru”), adăugați un set gol de etichete etichetat cap și un altul etichetat corp. Apoi creați încă două seturi etichetate antet și subsol în interiorul etichetelor corp. Fișierul rezultat ar trebui să arate astfel:

Acum vom adăuga niște spațieri și omniprezentul Hello World între încheierea antetului și începutul etichetelor noastre de subsol:

<html>
<head>
</head>
<body>
<header>
</header>
Hello World
</footer>
<footer>
</body>
</html>

Acum putem vedea mai bine modul în care elementele pot fi plasate unul în celălalt, numit imbricare. Dacă salvăm din nou fișierul și facem dublu clic pe pictograma fișierului nostru din dosarul nostru de documente pentru a-l deschide, ar trebui să se deschidă în browserul implicit al computerului dvs. ca o pagină albă cu Hello World în colțul din stânga sus. Felicitări! Tocmai ați creat prima pagină web. Înainte de a întreba, totuși, cu excepția cazului în care v-ați creat propriul server, nu veți putea afișa pagina dvs. pentru altcineva decât dacă acesta se află pe computerul dvs. sau dacă îi trimiteți fișierele pe care le-ați creat. Întrucât este necesar doar browserul pentru a vedea rezultatul fișierelor HTML, JavaScript și CSS, vom putea să vedem paginile noastre fără un server până la exemplele PHP mai târziu.

Pe măsură ce continuăm să facem modificări, vă puteți menține editorul și browserul deschise în același timp. După ce salvați fișierul în editorul de text, puteți pur și simplu să reîmprospătați pagina din browser pentru a vedea modificările.

NOTE SUPLIMENTARE: Pe măsură ce studiem elementele HTML, rețineți că browserele vor face tot posibilul pentru a se adapta la greșeli precum etichetele lipsă. Diferitele browsere vor reacționa la aceste probleme în felul lor, așa că doar pentru că apare corect într-un browser nu înseamnă că va fi și în atele.

Unele etichete, cum ar fi cele pentru includerea imaginilor, nu au nevoie de o etichetă de închidere pentru a funcționa, deoarece nu este necesar conținut în interiorul etichetelor. În acest caz, pur și simplu folosim eticheta în sine acolo unde dorim. În versiunile mai vechi de HTML, una dintre diferențele dintre tipurile de document a fost modul în care am închis elementele de etichetă unică. HTML, de exemplu, necesita o pauză scrisă ca <br/> în timp ce un document XHTML necesita <br/>. HMTL5 va recunoaște oricare dintre acestea.

Sursa: Michael Mendez, The Missing Link – An Introduction to Web Development and Programming (CC BY-NC-SA 3.0 License), Published by Open SUNY Textbooks, Milne Library (IITG PI), State University of New York at Geneseo. Traducere de Nicolae Sfetcu

Articol publicat sub licență CC BY-NC-SA 3.0