() translation by (you can also view the original English article)
Bine ați venit la a patra lecție din seria Web Design pentru copii, Conţinut HTML.
În lecţia de dinainte, am trecut în cele din urmă la codare prin construirea structurii fişierului nostru HTML cu unele elemente HTML. Acum vom adăuga conţinut în această structură.
Tineți minte: fișierele finale ale acestei lecții pot fi dowlodate aici. Şi dacă te blochezi cu ceva, pune întrebări în zona de comentarii, în partea de jos a acestei pagini!
Părinți, părinți, părinți
Vom vorbi mult despre părinți (recipiente) atunci când vrem să construim un site web, astfel încât este important să înţelegem cum funcționează.
Tot conţinutul de care avem nevoie, va trebui să fie plasat în interiorul tipului corect de părinte HTML. Părinții sunt organizați ca elemente HTML. Fiecare element are o semnificație specială pentru browser, ajutându-l să înțeleagă tot ce conține pagina.
Ilustrația de mai sus ne arată cum o clădire conține totul: ferestre, o uşă şi un ceas. Una dintre ferestre acţionează tot ca părinte (recipient) pentru un designer al orașului Tuts+.
Adăugarea de conţinut
Acum, că avem structura realizată, putem umple aceste elemente părinte cu conținut. Toate elementele adăugate în fișier în lecţia precedentă ne-au ajutat să ne organizăm – ne-au oferit un loc unde să inserăm textul şi imaginile noastre.
Să începem de sus!
Header
Aşa cum am vorbit, headerul (antetul) este partea foarte de sus a unui site web şi are propriul său element, , care este primul element nested în body (este în relație de copil față de body, care îi este părinte).
1 |
<body>
|
2 |
<header> </header> |
3 |
</body>
|
Headerul conţine, în general, o introducere şi o navigare (un mod de a găsi alte locuri în site). Site-ul nostru are un titlu primitor şi o imagine drăguță, aşa că hai să le adăugăm!
Heading
Avem nevoie să adăugăm „Bine ați venit în orașul Tuts+” în pagină, care este headingul (titlul) principal al site-ului.
Există şase niveluri diferite de headinguri pentru un site; h1 este cel mai important, h6 este cel puţin important. În HTML textul pentru headinguri este scris cu ajutorul tagurilor: <h1>, <h2>, <h3>, <h4>, <h5> sau <h6>.
„Bine aţi venit în oraşul Tuts+” este principalul nostru heading (este foarte important), aşa că vom tasta acest text între tagul de deschidere şi cel de închidere al elementului h1.
1 |
<header>
|
2 |
<h1>Welcome To Tuts+ Town</h1> |
3 |
</header>
|
Browserul va recunoaşte acum acest text ca fiind headingul nostru introductiv.
Imaginea oraşului
De asemenea, în header, avem o imagine frumoasă a oraşului nostru.
În folderul nostru principal „tutstown”, trebuie să creezi un alt folder, „imagini”, şi să salvezi toate imaginile acolo.
Imaginile sunt adăugate cu ajutorul unui element <img>. Înăuntrul acestui tag avem nevoie sa dăm locația imaginii, sau sursa, asfel:
1 |
<img src="images/townheader.svg" |
Vezi semnul / după src="images"? Am vrut să spunem „caută în folderul imagini / un fişier numit townheader.svg”.
Apoi, înainte de a închide <img>, vom include o descriere, folosind un atribut alt.
1 |
<img src="images/townheader.svg" alt="An illustration of Tuts Town tower." /> |
Atributele pot fi adăugate elementelor care ajută în continuare să le explice, sau le spune cum să lucreze. Anumite atribute lucrează în cadrul anumitor elemente. Un element <img> va avea întotdeauna un src şi un atribut alt.
Important! Un element de <img> are tag de inchidere inclus. Acest lucru înseamnă doar că tagul de deschidere este și tag de închidere:
Hai să aruncăm o privire!
În acest moment, putem deschide site-ul nostru în browser, pentru a vedea ceea ce am făcut până acum! Găsește folderul „tutstown” şi dublu-clic pe „index.html”. Acest lucru ar trebui să deschidă pagina în browser.
Este site-ul nostru! Nu există prea mult conținut acum, dar suntem pe cale să schimbăm asta. De acum, ori de câte ori dorești să vezi modificările în browser, salvează fişierul HTML şi apoi dă refresh (folosind acel cerc mic cu o pictogramă săgeată sus) din fereastra browserului.
De asemenea, vei observa că nu putem vedea încă norii, pentru că nu am adăugat fundalul galben. Vom discuta despre culorile de fundal, poziţionare şi dimensionare în lecţia următoare, atunci când trecem la CSS.
Secțiunea Main
Secțiunea principală (main) a site-ului include marea parte a informației. Vom plasa conţinutul super util despre orașul nostru în cadrul acestui element <main>.
1 |
<body>
|
2 |
<header>
|
3 |
<h1>Welcome To Tuts+ Town</h1> |
4 |
<img src="images/townheader.svg" alt="An illustration of Tuts Town tower." /> |
5 |
</header>
|
6 |
<main>
|
7 |
</main>
|
8 |
</body>
|
Secţiuni
Avem trei grupuri corelate pe site-ul nostru, pe care le vom organiza în trei secţiuni. O secţiune este o porțiune separată din site ce conţine informaţii şi are propriul său element: <section>.
1 |
<main>
|
2 |
<section> </section> |
3 |
<section> </section> |
4 |
<section> </section> |
5 |
</main>
|
Mai multe structurare!
În secţiunile noastre, avem mai multe cadre mai mici de construit, elemente-părinte care vor conține text, lângă imagini.
Hai sa facem câte o secțiune. Fiecare secţiune are o imagine în interior şi un element care conţine text.
Să aruncăm o privire asupra structurii, înainte de a adăuga efectiv conținutul.
1 |
<section>
|
2 |
<img /> |
3 |
<div>
|
4 |
</div>
|
5 |
</section>
|
Am vorbit mai devreme despre adăugarea de imagini. Această imagine va fi adăugată în acelaşi mod ca imaginea din header, dar numele şi descrierea vor fi diferite.
1 |
<img src="images/townsleep.svg" alt="Illustration of a Tuts Town hotel." /> |
Div
Un element <div> poate fi element-părinte, dar este mai general. Permite să grupăm părți din pagină, atunci când niciun alt element nu pare potrivit.
1 |
<div>
|
2 |
<img /> |
3 |
<div>
|
4 |
<!-- A heading and shop list will be added here -->
|
5 |
</div>
|
6 |
</div>
|
Headingul şi lista de magazine vor fi plasate în acest <div>.
Heading
Putem vedea că fiecare secţiune are un heading mic: Sleep (somn, se referă la hoteluri), Food (hrană, se referă la restaurante) şi Shop (magazine). Aceste titluri introduc listele mici de dedesubt. Am folosit deja un <h1> pentru introducerea din partea de sus a paginii, deci pentru acestea putem folosi <h2>, după cum urmează:
1 |
<section>
|
2 |
<img src="images/townsleep.svg" alt="Illustration of a Tuts Town hotel." /> |
3 |
<div>
|
4 |
<h2>Sleep</h2> |
5 |
</div>
|
6 |
</section>
|
Liste
Există două tipuri de liste HTML, ordonate (cu numere) şi neordonate (cu puncte bullet în loc de cifre). Ambele moduri sunt într-adevăr utile pentru a lista date care au ceva în comun, şi fiecare secţiune a site-ului nostru conţine o scurtă listă neordonată (<ul>) cu două puncte (itemi).
Înăuntrul fiecărei liste sunt itemi de listă. Aceștia sunt itemii care alcătuiesc lista noastră şi sunt scriși între taguri <li>.
1 |
<ul>
|
2 |
<li></li>
|
3 |
<li></li>
|
4 |
</ul>
|
Linkuri
Listele pe care le-am adăugat sunt menite să fie linkuri (legături) către site-uri diferite de magazine, astfel încât vizitatorii să dea clic pe ele pentru a obţine mai multe informaţii. Pentru a transforma un cuvânt (sau cuvinte) într-un link pe care să se dea clic, avem nevoie să scriem acest cuvânt între taguri anchor. Un element anchor arată astfel:<a>.
Similar cu modul în care elementul <img> are atribute speciale, tagul de deschidere <a> va trebui să conţină un atribut care să includă adresa web a site-ului unde vrem ca utilizatorul să fie trimis - acesta este atributul href.
Următorul cod ne oferă un link conectat la cuvântul „aici”, care duce utilizatorul la https://tutsplus.com/
1 |
For more tutorials click <a href="https://tutsplus.com/">here</a>. |
Exact în această manieră vom adăuga linkuri la lista noastră, amplasând fiecare nume de magazin într-un anchor. Ambele taguri anchor de deschidere şi închidere vor fi în itemul de listă, <li>. Singura diferenţă este că acestea nu sunt magazine reale, cu site-uri reale, și de aceea vom pune un # pentru valoarea href, iar făcând clic pe acesta nu ne va duce la un alt site.
Aici vedem cum arată primul magazin listat:
1 |
<ul>
|
2 |
<li><a href="#">The Snooze Inn</a></li> |
3 |
</ul>
|
Am creat o listă neordonată, un item de listă în această listă, şi apoi am plasat numele de magazin într-un tag anchor. Este de ținut minte că nu am aplicat niciun stil încă, așadar acum previzualizarea va arăta linkuri în mod implicit albastru, în loc de portocaliu.
Închiderea secțiunii
Odată ce avem secțiunea completă va trebui să repeți aceşti paşi exact, pentru ultimele două secţiuni. De fiecare dată avem nevoie să facem modificările de conţinut; structura HTML va fi aceeaşi pentru toate cele trei secţiuni, dar textul şi imaginile vor fi diferite.
Acum, să revedem codul pentru toate cele trei secţiuni - este mult de făcut!
1 |
<main>
|
2 |
<section>
|
3 |
<img src="images/townsleep.svg" alt="Illustration of a Tuts Town hotel." /> |
4 |
<div>
|
5 |
<h2>Sleep</h2> |
6 |
<ul>
|
7 |
<li>
|
8 |
<a href="#">The Snooze Inn</a> |
9 |
</li>
|
10 |
<li>
|
11 |
<a href="#">Zzz Hotel</a> |
12 |
</li>
|
13 |
</ul>
|
14 |
</div>
|
15 |
</section>
|
16 |
|
17 |
<section>
|
18 |
<img src="images/townfood.svg" alt="Illustration of a Tuts Town restaurant." /> |
19 |
<div>
|
20 |
<h2>Food</h2> |
21 |
<ul>
|
22 |
<li>
|
23 |
<a href="#">Just Cookies</a> |
24 |
</li>
|
25 |
<li>
|
26 |
<a href="#">Cake Too</a> |
27 |
</li>
|
28 |
</ul>
|
29 |
</div>
|
30 |
</section>
|
31 |
|
32 |
<section>
|
33 |
<img src="images/townshop.svg" alt="Illustration of a Tuts Town store." /> |
34 |
<div>
|
35 |
<h2>Shop</h2> |
36 |
<ul>
|
37 |
<li>
|
38 |
<a href="#">Puppy Parade</a> |
39 |
</li>
|
40 |
<li>
|
41 |
<a href="#">Cool Kittens</a> |
42 |
</li>
|
43 |
</ul>
|
44 |
</div>
|
45 |
</section>
|
46 |
</main>
|
Footer
Un <footer> (partea de subsol) va fi primul element după închiderea tagului <main>; acesta nu va fi în interiorul acestuia.
Putem adăuga apoi elementul nostru de subsol la pagină, care va fi la acelaşi nivel cu main, deoarece ambele sunt în interiorul body.
Singurul conținut pe care îl vom avea în footer este o propoziție despre cine a făcut site-ul (adică noi!) Acest conţinut va fi scris într-un element <p>(paragraf), care este în footer.
1 |
<footer>
|
2 |
<p>Created with enthusiasm by caring residents.</p> |
3 |
</footer>
|
Previzualizare completă
Ai salvat emoţionat documentul HTML şi ai dat refresh în browser, în timp ce lucrăm? Și eu la fel! Să aruncăm o privire finală înainte de a încheia:
O recapitulare a elementelor utilizate
Am vorbit despre o mulţime de elemente diferite aici, deci hai să revizuim rapid ce am folosit în fişierul nostru HTML:
<html> | Deţine toate date noastre HTML |
<head> | Locul in care punem informaţii despre site |
<title> | Titlul site-ului web |
<body> | Deţine tot conţinutul paginii |
<header> | Conține mesajul nostru de bun-venit |
<h1>şi <h2> | Headinguri |
<img> | Aducerea unei imagini în pagină |
<main> | Conținutul principal |
<section> | Împarte pagina în secțiuni |
<div> | Un container (părinte) general |
<ul> | O listă neordonată de lucruri |
<li> | Un item de listă într-o listă |
<a> | Folosit pentru a face o legătură |
<footer> | Conținutul din subsol |
Concluzie
În acest curs, am aflat despre cum să conectăm conţinut la structura HTML super robustă, pe care am facut-o de la 0 (bine, folosind un computer).
Apoi vom învăţa cum să aplicăm stil acestei pagini pentru a o face drăguță și cât mai primitoare, dar și mai uşor de citit şi utilizat.
Ne vedem prin oraș!
