Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Kids
Webdesign

Web Design pentru copii: Conţinut HTML

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Web Design for Kids.
Web Design for Kids: HTML Structure
Web Design for Kids: CSS

Romanian (Română) translation by Adelina Vasiliu (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).

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.

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:

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.

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>.

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>.

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.

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.

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.

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ă:

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>.

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 http://tutsplus.com/

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:

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!

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.

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ș!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.