() translation by (you can also view the original English article)
Bine ați venit la a treia lecție din seria Web Design pentru copii, Structura HTML!
Vom învăța cum să scriem structura sitului nostru folosind HTML. Aceasta structură ne va pregăti pentru conținutul site-ului, pe care îl vom adăuga în lecția următoare.
Dacă am compara activitatea de web design cu o clădire (cum este clădirea Tuts+ Town!), atunci HTML ar fi ca fundația sau cadrul său, baza pe care orice altceva este construit.
Important! Fișierele pe care le vom crea în această lecție pot fi descărcate aici.
Ce este HTML mai exact?
Am vorbit deja de mai multe ori despre HTML în această serie, dar nu am spus ce este exact, altceva decât un „limbaj secret super cool”. Webul este despre limbaje şi comunicare, iar HTML este o parte importantă din această lume.
HyperText Markup Language, HTML, este un limbaj care marchează conţinutul unui site pentru ca un browser să îl înţeleagă şi să îl afişeze. Oferă structură unui fişier text obişnuit pe care un browser altfel nu ar fi capabil să citească.
De exemplu, nu putem tasta un paragraf în editoarele noastre de text și să ne așteptăm ca un browser să știe că este un paragraf. Textul paragrafului trebuie să fie înăuntrul marcajelor corecte HTML pentru paragraf sau mai precis în elementul p (textul care apare evidențiat aici este pentru a arata că p este și cod)
Elemente
HTML este construit din elemente care au înțelesuri importante, cum ar fi elementul paragraf menţionat mai sus. Fiecare element are o etichetă (tag) de deschidere (începutul) şi de încheiere (sfârşitul), cu conţinut între cele două.
Aceste taguri de deschidere şi închidere pentru fiecare element sunt scrise în paranteze ascuțite (ca acestea: < >), iar tagul de închidere are și o bară oblică (astfel: < / >).
Planificarea unei structuri
În cursul anterior am întocmit designul nostru de site şi acum este timpul să se pregătească structura, sau cadrul acestui proiect.
Vom începe acest lucru adăugând unele note generale imaginii sitelui pentru a obţine o impresie mai bună despre cum trebuie sa îl alcătuim.
În cadrul elementului body (corp) al fișierului html vom avea mai multe elemente primare: un header (antet), o parte principală main și un footer(subsol).
Pregătirea documentelor
De asemenea, am vorbit în lecţia precedentă despre cum să gândim fişierele pentru site, aşa că acum vom aplica aceste cunoștințe!
- În primul rând, crează un folder numit „tutsfolder”.
- Acum este timpul să deschidem acel editor de text, care este gata şi aşteaptă ca ceva uimitor să se întâmple.
- Apoi, crează un document nou cu acest editor (de obicei prin selectarea File > New File) şi salvează-l ca „index.html" în „tutsfolder”.
Țineți minte: „index” este numele de fişier şi „.html” este extensia, care ne spune tipul de fişier.
Site-urile web pot cuprinde multe, multe pagini, astfel încât pagina principală este întotdeauna numită „index.html” pentru a spune „Hei, de aici începe totul!”
Acum, hai în cele din urmă să scriem puțin cod HTML.
Construirea unei structuri
Acum putem adăuga structura noastră. Din nou, gândește-te la construcția unei clădiri, avem nevoie de un cadru bine plasat.
Vom începe codul HTML prin a scrie <! DOCTYPE html > care spune browserului „Hei, acesta este un document HTML!”
1 |
<!DOCTYPE html>
|
Apoi, dedesubt, avem nevoie de elementul <html>:
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
|
4 |
</html>
|
Orice altceva va fi inclus sau cuibărit (nested) în acest element.
Numai puțin. Nesting?
"Ca în cuibul unei păsari?" Ei bine, mai degrabă ca niște păpuși rusești sau ca să revenim la tema noastră cu orașul, ca niște clădiri cuibărite unele într-altele. Nesting este ceea ce se întâmplă atunci când punem un element în altul (relația copil-părinte).
Codul scurt de mai jos arată un paragraf element în interiorul elementul body, pentru că locuiește între tagurile sale de închidere și deschidere.
1 |
<body>
|
2 |
<p>This paragraph element is nested inside the body element.</p> |
3 |
</body>
|
Facem mai uşor de citit codul din fişierul nostru HTML prin împingerea elementelor nested mai la dreapta. Ca aici:
OK, înapoi la treabă...
Head
Acum, în interiorul elementului html vom dori sa adăugăm elementul head.
Head va conţine title de pe pagina noastră, care va apărea sus în browser. Există multe elemente nested!
1 |
<html>
|
2 |
<head>
|
3 |
<title>Tuts Town</title> |
4 |
</head>
|
5 |
</html>
|
O mare parte din ceea ce este inclus în head într-un document HTML nu apare pe site, dar în schimb ajută motoarele de căutare, precum Google, să înțeleagă despre ce este vorba în site.
De asemenea, mai târziu atunci când vom crea un nou fişier pentru a adăuga stiluri, vom conecta aceste două documente printr-un link adăugat în head. Așadar, este un fel de centru de control în spatele scenei pe care vizitatorii nu îl vor vedea în cea mai mare parte.
Body
Tot ce va fi vizibil din browser în site-ul nostru, va fi nested în interiorul body, şi aici într-adevăr începe distracţia!
Header
Elementul header este diferit de head, despre care am vorbit deja. Header locuiește în body și în general conține tot ce vedem în partea de sus a site-ului.
Primul obiect vizibil sus este un header (antet) care conţine un text şi o imagine a oraşului Tuts +.
1 |
<html>
|
2 |
<head>
|
3 |
<title>Tuts Town</title> |
4 |
</head>
|
5 |
<body>
|
6 |
<header></header>
|
7 |
</body>
|
8 |
</html>
|
Noi doar vom adăuga acum elementul header pentru a ne pregăti pentru conținutul ce urmează a fi adăugat.
Partea principală
Partea principală a site-ului oraşului Tuts + conţine informaţiile cele mai importante. Lista de afaceri din oraș este obiectul de interes a site-ului web, Așadar, acest conţinut va rezida într-un element numit main.
În lecţia următoare - când vom adăuga conţinut - vom vorbi despre părinți mai mici (cum ar fi cele trei grupuri diferite: Sleep (somn, se referă la hoteluri), Food (hrană, se referă la restaurante) şi Shop (magazine) din acest părinte mai mare main.
Footerul (Partea de Subsol)
Footer este partea de jos a site-ului. De obicei, vom vedea unele link-uri aici, cum ar fi pentru Facebook și Twitter, sau un text mic ce anunţă cine a creat site-ul.
Vom adăuga o propoziţie spunând cu mândrie că am ajuns cu site-ul până la elementul footer.
1 |
<footer> </footer> |
Țineți minte: în acest moment suntem încă la adăugarea de elemente care sunt plasate în interiorul body.
Recapitulare finală
Acum, să facem o revizie finală a structurii noastre HTML până acum.
Putem uita cu ușurință să închidem tag-uri, fapt ce aduce unele erori pe site-ul nostru. Vrem să ne asigurăm că închidem fiecare tag pe care l-am folosit.
Pare ca totul este închis! E timp să începem să adăugăm conţinut la această structură foarte solidă pe care am creat-o.
Observație rapidă asupra comentariilor
HTML ne permite să scriem comentarii utile atunci când lucrăm. Aceste comentarii nu apar pe site-ul nostru, dar sunt geniale pentru adăugarea de mici informaţii de ajutor pentru alți designeri care se uită la codul nostru.
1 |
<!-- Anything in between these set of symbols is a comment that our browser cannot read, sort of like a little secret for designers only. -->
|
Fișierul HTML pentru această lecție (pe care îl puteți descărca de aici) are mai multe comentarii ce ne ajută să îl înțelegem mai bine.
Bravo!
În această lecție am învățat ce este HTML, ce sunt elementele, cum să ne includem (nest) unele în altele, și despre cum să setăm o structură simplă HTML cu niște elemente comune ce vor servi ca și părinte pentru altele.
În următoarea lecție, vom adăuga text și imagini la noua noastră structură.
Ne vedem prin oraș!
