Link Academy - Introducere în Html şi Css.docx

  • Uploaded by: Vasile Sentiment
  • 0
  • 0
  • May 2020
  • PDF

This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA


Overview

Download & View Link Academy - Introducere în Html şi Css.docx as PDF for free.

More details

  • Words: 38,638
  • Pages: 164
1

LINK Academy eLearning Introducere în HTML şi CSS Descrierea cursului În cadrul cursului „Introducere în HTML şi CSS”, vă veţi familiariza cu elementele de bază ale limbajelor HTML şi CSS. Vom clarifica noţiunile de bază ale scrierii şi construirii unui cod HTML, respectiv a unui cod CSS. Veţi afla cum puteți scrie pagini HTML, cum se setează şi se scriu tag-urile, cum se pot introduce textul, imaginile, listele, linkurile, tabelele şi alte elemente care alcătuiesc conţinutul paginilor. Veţi învăţa ce înseamnă o regulă CSS, din ce este alcătuită, însă şi cum şi unde se plasează. Apoi, veţi afla cum puteţi folosi regulile CSS şi influenţa diferite elemente.

Scopul cursului Obiectivul cursului este să învăţaţi cum să creaţi, cu ajutorul limbajelor HTML şi CSS, documente pentru web. Veţi învăţa elementele de bază ale HTML-ului şi CSS-ului şi cum să scrieţi un cod clar şi accesibil. De asemenea, veţi învăţa cum să creaţi şi să stilizaţi corect paginile. După finalizarea acestui curs, veţi avea o bază excelentă pentru dezvoltarea ulterioară în vederea perfecţionării în domeniul designului web şi/sau în domeniul programării web.

Lecţie introductivă Unitate: 1 din 17 00:17:46 +Rezumat

În această lecţie, ne vom familiariza cu noţiunile de bază ale limbajelor HTML şi CSS, dar şi cu cele ale internetului în general.

Ce este HTML? HTML este acronimul de la HyperText Markup Language1, care reprezintă un limbaj descriptiv cu ajutorul căruia putem crea pagini web, respectiv cu care putem aranja elementele paginilor web. HTML este un limbaj descriptiv, deşi uneori poate fi numit greşit limbaj de programare. Dacă am deschide o pagină HTML folosind un Notepad, în Windows, sau instrumentul TextEdit, în sistemul Mac, aceasta se deschide şi apare codul html (text). Pe de altă parte, atunci când deschidem aceeaşi pagină într-un browser web, el o interpretează şi o afişează în mod adecvat.

2

Istoric Limbajul HTML a fost creat de Tim Berners-Lee în anul 1990, pe atunci angajat la CERN. În paralel, a fost creat şi primul browser web. În acea perioadă, exista internetul, dar într-o formă foarte diferită de cea care există astăzi. În acea etapă inițială de dezvoltare, HTML a permis colaborarea mai ușoară pe proiecte între colaboratori aflați la distanțe mari unii de alții. Cu ajutorul lui HTML, putem transmite un simplu cod (text) de la sursă la destinatar, al cărui browser interpretează codul într-un document cu sens.

Imaginea 1.1 - Calculatorul lui Berners-Lee, numit NeXT, care se folosea ca primul server web din lume. Sursa imaginii: http://en.wikipedia.org/wiki/File:First_Web_Server.jpg Astăzi, HTML este foarte diferit de versiunea sa iniţială, dar păstrează elementele de bază. Berners-Lee nu și-a protejat limbajul HTML prin drepturi de autor, ci l-a lansat ca și open source. De-a lungul anilor, a fost îmbunătățit în mod constant. Apoi, a fost înfiinţat W3C (World Wide Web Consortium – http://www.w3.org/), care se ocupă cu standardizarea și îmbunătățirea limbajului HTML și a altor standarde. De asemenea, în anul 2004 a fost înfiinţat şi WHATWG (Web Hypertext Application Technology Working Group – http://www.whatwg.org/) de către

3

angajații unor companii din domeniul web-ului, precum Apple, Mozilla, Opera şi multe altele, toate acestea ca reacție la modul foarte lent în care W3C dezvolta tehnologii noi. Astăzi, W3C şi WHATWG sunt două dintre cele mai importante agenții implicate în viitorul internetului. În momentul de faţă, versiunea actuală şi cea recomandată a limbajului HTML este HTML5, care pe data de 28 octombrie 2014 a obţinut statusul de W3C Recommendation. Aceasta înseamnă că HTML, după o lungă perioadă de timp, a devenit un standard recomandat pentru toate site-urile noi şi putem spune că este publicată versiunea sa finală. Întreaga specificaţie a limbajului şi detaliile se pot găsi la următorul link: http://www.w3.org/TR/html5/

Imaginea 1.2 - Logoul limbajului HTML5 Sursa imaginii: http://en.wikipedia.org/wiki/File:HTML5-logo.svg

Ce este CSS? CSS (acronimul de la Cascading Style Sheets) este un limbaj de stilizare (style sheet), care se foloseşte pentru descrierea semanticii de prezentare a documentului scris în limbajul descriptiv (markup language). Mai simplu, dacă ignorăm definiţia formală, am putea spune că CSS descrie, respectiv aranjează aspectul şi formatarea oricărui element de pe pagină. Vă întrebaţi, probabil, de ce CSS nu are aceeaşi funcţie ca și HTML. Deși o astfel de întrebare poate părea logică la prima vedere, HTML şi CSS au scopuri complet diferite, dar se completează foarte bine. HTML înglobează conţinutul, în timp ce CSS îl aranjează. Putem face o analogie între programatori și designeri. Fiecare încearcă să dovedească că profesia lui este cea mai importantă, însă în realitate nu pot exista unii fără alţii. Un site creat doar de un programator va funcționa, dar numai alți programatori vor putea să-l citească. Un site creat doar de un designer probabil că nu va funcționa deloc, dar cel puţin va arăta bine. Așadar, aşa cum colaborarea dintre designeri şi

4

programatori are drept rezultat un site ideal, la fel şi legătura dintre HTML şi CSS este combinația câștigătoare pentru paginile web. HTML singur, separat de CSS, are anumite reguli şi opțiuni de stilizare, dar acestea ar trebui evitate. Trebuie să lăsăm în seama stilurilor CSS tot ce ține de stilizarea elementelor. Istorie Rădăcinile limbajului style sheets datează de la începutul anilor '80, odată cu apariția lui SGML (Standard Generalized Markup Language). CSS a fost dezvoltat la sfârșitul anilor '90, iar din anul 2000 a început să fie utilizat intensiv. După cum am menționat deja, HTML nu a fost creat ca un mediu vizual, ci ca un limbaj utilizat de programatori și alți experți pentru a face schimb de informații în timpul lucrului la proiecte. Aşa a apărut nevoia de a aranja vizual pagina HTML. Făcând parte din W3C, au fost propuse nouă limbaje de style sheets diferite. Au fost selectate două, din fuzionarea cărora a apărut CSS-ul așa cum îl știm astăzi. În momentul de faţă, putem spune că versiunea actuală este CSS3, însă afirmația este parţial corectă. În trecut, şi limbajul CSS se marca cu numere, inclusiv şi versiunea CSS3. În momentul de faţă, dar şi în anii care vin, nu vom mai avea versiuni noi ale întregului limbaj (nu vor mai apărea niciodată CSS4 sau CSS5, de exemplu), ci fiecare modul (parte a limbajului) se va dezvolta în ritmul său. Este clar că anumite versiuni nu vor mai fi practice (cel puţin când este vorba de limbajul CSS) şi de aceea această terminologie va fi abandonată, deşi astăzi este la modă discuția despre HTML5 şi CSS3. Pentru mai multe informaţii, accesaţi acest post de pe următorul blog: http://www.xanthir.com/b4Ko0

Câteva noţiuni de bază Deşi următoarele noţiuni vă sunt probabil cunoscute, este util să le recapitulăm înainte de a continua. Ce este internetul? Internetul este rețeaua tuturor rețelelor. El conectează milioane de calculatoare la nivel global, formând astfel o rețea globală. Cu ajutorul internetului, un calculator poate comunica cu un alt calculator aflat oriunde în lume, atâta timp cât ambele sunt conectate la internet. Informațiile circulă pe internet prin intermediul diferitor metode (protocoale). Ca părți ale internetului funcţionează diferite servicii, cum ar fi WWW (World Wide Web), e-mail, FTP şi multe altele. Ce este WWW (World Wide Web)? Deși majoritatea oamenilor pun semnul egal între sus-menționatul internet şi WWW, aceste două noţiuni nu reprezintă în niciun caz același lucru. World Wide Web sau, prescurtat, WWW este un model de acces la informații utilizând internetul ca mediu. WWW folosește protocolul HTTP, unul dintre limbajele utilizate pe internet. WWW este folosit de browser-ele care accesează site-urile web.

5

În cazul în care diferența dintre internet și WWW vă este în continuare neclară, imaginați-vă internetul ca rețeaua de drumuri a unei țări, iar WWW ca sistemul de transport cu autobuze ale aceleiași țări. În calitate de utilizatori, noi putem folosi autobuzul pentru a călători în diferite părți ale țării, putem apela la diferite companii de transport și diferite tipuri de servicii etc. Însă, pe de altă parte, rețeaua de drumuri (internetul) poate fi utilizată și de alte vehicule, nu doar de autobuze (WWW). Browser-ul web Oamenii accesează internetul prin intermediul unui tip de software, denumit browser web sau doar browser. Cele mai populare browser-e din zilele noastre sunt Chrome, Firefox, Internet Explorer, Opera şi Safari. Utilizatorii accesează site-urile introducând URL-ul corect al site-ului, urmând un link de pe altă pagină sau prin intermediul unui semn de carte (bookmark). Browser-ele propriuzise sunt actualizate regulat în pas cu noutățile, dar nu putem fi niciodată siguri dacă utilizatorul sau vizitatorul site-ului nostru are cea mai nouă versiune sau dacă utilizează în continuare Internet Explorer 7, de exemplu, care a fost lansat în anul 2006 şi care nu suportă majoritatea tehnicilor moderne. Aceasta este una dintre problemele de bază ale design-ului web modern şi, în general, ale dezvoltării site-urilor. Pe de altă parte, noi putem folosi cele mai moderne tehnici pe care le suportă limbajele HTML şi CSS, însă, dacă pornim un site în browser-ul apărut înainte de apariţia noilor tehnici moderne, este clar că browser-ul vechi nu le va putea citi şi nici interpreta în mod corect.

Imaginea 1.3 - Logourile celor mai populare browser-e din prezent. Sursa imaginii: techglobex.blogspot.com

Serverele web

6

Serverele web sunt calculatoare specializate, conectate în permanenţă la internet, având drept scop accesul utilizatorilor la site-uri. Atunci când un utilizator, respectiv browser, solicită un anumit site web, el este direcţionat prin internet către un calculator denumit server web sau, pe scurt, server, care conţine site-ul căutat. Cum funcţionează www? Atunci când introducem adresa dorită în browser, folosind sistemul DNS (Domain Name System), browser-ul primește informația despre adresa IP a serverului web, respectiv a site-ului care trebuie încărcat. Adresa IP este adresa corectă a site-ului web dorit. Cu alte cuvinte, folosim URL-ul (adresa site-ului) pentru a ne aminti mai ușor, în timp ce calculatoarele găsesc site-urile cu ajutorul adreselor IP. De exemplu, este mai ușor să reținem www.google.com, decât adresa IP: 74.125.224.72, deși, dacă tastăm acest IP în browser, vom obține același rezultat (puteţi să deschideți orice browser și să introduceți în bara de adrese adresa IP menționată mai devreme sub formă de: http://74.125.224.72/ și se va deschide Google). Odată ce browser-ul primeşte informaţia despre adresa IP a site-ului de la serverul DNS, o accesează, deschide folderul root (rădăcină) şi caută index.html (sau default.html), pentru ca apoi să-l afişeze utilizatorului:

Imaginea 1.4 - Accesarea unui site

7

Ce vedem pe un site? Atunci când un utilizator deschide un site într-un browser, se afișează o pagină în felul următor: browser-ul preia HTML și CSS de pe server și interpretează acel cod într-un conținut cu sens, pregătit în mod adecvat din punct de vedere vizual. Majoritatea site-urilor din zilele noastre conţin şi imagini, clipuri video/audio, diferite scripturi şi alte elemente multimedia. Toate aceste elemente stau la baza experienței de utilizare a site-ului (sau, cum se mai numeşte în mod popular, UX User experience). Ce se află în spatele unui site? Majoritatea utilizatorilor nu văd niciodată HTML-ul şi CSS-ul din care este alcătuit un site. Browser-ul traduce tot ce primeşte de la server, inclusiv HTML, CSS, JavaScript și așa mai departe, în conținutul care va fi afișat utilizatorului:

Imaginea 1.5 – Site-ul http://www.adobe.com/ – reprezentarea codului HTML (în stânga) şi reprezentarea pe care o vede un utilizator în browser (în dreapta)

8

Puteţi încerca şi singuri să vizualizați pagini-sursă (HTML) pe un site. În majoritatea browser-elor, scurtătura este Ctrl+U (în Internet Explorer, daţi clic dreapta pe pagină și apoi clic pe View source (Vizualizați sursa)). Va apărea codul HTML care, dacă nu l-aţi mai întâlnit, probabil nu va avea niciun sens pentru dvs. și despre care veți crede probabil că nu-l veţi stăpâni niciodată. Printre programatorii şi dezvoltatorii web, circulă o glumă care spune că aceștia sunt la fel ca personajele din filmul Matrix, adică se uită la cod și văd lumea reală. Ceea ce vreau să subliniez este faptul că, după ce veți parcurge câteva lecții, vă veți da seama şi singuri că HTML și CSS sunt limbaje foarte ușor de înțeles, deoarece respectă un anumit set de reguli. După ce veți lucra un timp cu limbajele HTML/CSS, veți avea propriul moment de Evrika!2 , după care, cu siguranță, vă veţi întreba cum de ați putut vreodată crede că sunt confuze. Site-urile sunt alcătuite doar din limbaje HTML şi CSS? Toate site-urile web din zilele noastre sunt, de fapt, tipuri de limbaje HTML. Chiar și site-urile realizate integral în Flash sau într-un instrument similar necesită ca măcar o mică parte din ele să fi fost scrisă în HTML, pentru a putea fi afișată în browser. Putem spune că HTML reprezintă baza întregului web. De aceea, Tim Berners-Lee este considerat creatorul lui WWW. Totuşi, HTML este doar un limbaj de marcare/descriptiv, iar simplitatea sa (inerentă) a contribuit la popularitatea şi acceptarea sa generală. Pe de altă parte, nu poate funcţiona singur. Astăzi, multe alte limbaje de programare, care permit interactivitatea și existența unui conținut dinamic, sunt adăugate la o bază alcătuită din HTML. Cele mai populare limbaje de programare de pe web sunt PHP, Python, Java, ASP.NET, Javascript, AJAX, de care sunt sigur că ați auzit, dar și multe altele. Toate acestea lucrează în simbioză cu HTML. Pentru a prezenta toate acestea într-un mod mai ilustrativ, consultați paginile de contact de pe web, înregistrarea pe diferite site-uri folosind user/pass, comentariile de pe Facebook, încărcarea dinamică a noilor tweet-uri pe Twitter aproape fiecare interacțiune dintre site şi utilizator se bazează pe un limbaj de programare, deoarece HTML nu poate face acest lucru. O pagină realizată doar în HTML/CSS nu ar putea exista. Vom exemplifica acest lucru mai jos. În imaginea următoare, putem vedea un formular de introducere a unui comentariu:

9

Imaginea 1.6 - Formular pentru introducerea comentariilor pe una dintre paginile site-ului http://www.smashingmagazine.com/ În acest exemplu concret, HTML este responsabil de plasarea antetului, a textului, a trei câmpuri de introducere a datelor și a unui buton de validare. CSS stilizează culoarea, fontul și dimensiunea antetului şi a textului, defineşte spațiul dintre rânduri și câmpuri, rotunjimea unghiurilor câmpului, culoarea de fundal a butonului, precum și lățimea și înălțimea sa etc. Practic, tot ceea ce vedem. Dacă ne-am opri aici, formularul ar arăta exact ca în imagine, dar dacă am introduce un comentariu și dacă am valida aceasta cu un clic pe buton, nu s-ar întâmpla nimic, deoarece HTML şi CSS nu pot procesa datele introduse. De aceea, în acest scop se utilizează limbajul PHP, care va colecta datele din formular, le va procesa (adică va trimite comentariul la administratorul paginii site-ului pentru confirmare și, eventual, pentru postare), iar, la final, va afișa noua pagină pentru a informa vizitatorul că comentariul a fost salvat. Desigur, această nouă pagină este alcătuită din nou din HTML şi CSS.

10

Ajungem la concluzia că HTML şi CSS împreună cu limbajele de programare sunt strâns legate şi interconectate pe paginile web moderne. După aceste observaţii introductive care v-au creat o imagine generală, cred că sunteţi pregătiţi să mergem mai departe. În acest curs, ne vom ocupa de limbajele HTML și CSS, în timp ce despre design web și programare vom învăţa în alte cursuri. Continuăm cu tag-urile HTML.

Structura paginilor HTML În această lecţie, vom analiza structura de bază a documentelor HTML şi vom învăţa cum se setează şi aplică tag-urile HTML, ca bază a limbajului HTML.

Structura de bază Structura tuturor paginilor HTML este definită în mod strict. Elementul constitutiv de bază este tag-ul HTML. Tag-urile se află peste tot, iar fiecare element trebuie să fie inclus într-un tag. De exemplu, să privim mai întâi o pagină scurtă de text în instrumentul Microsoft Word:

Imaginea 2.1 - Text scris în programul Microsoft Word

11

În imagine, putem vedea un document structurat corect. Începe cu un titlu, căruia i-a fost atribuit stilul Heading 1. Apoi, urmează un paragraf de text normal, obișnuit. După aceea, urmează un titlu de nivel inferior (Heading 2), două paragrafe de text și un al alt titlu de nivel secundar (Heading 2) și așa mai departe. Titlurile pe niveluri structurează documentul și creează un flux cu sens. Acelaşi text poate fi transferat şi pe o pagină web, care ar putea să arate ca în imaginea de mai jos:

Imaginea 2.2 - Acelaşi text din exemplul precedent afișat pe o pagină HTML Observăm că textul arată aproximativ la fel. La început, avem titlul Heading 1 și textul introductiv, precum și titlul Heading 2 etc. Pentru a obține o astfel de structură, trebuie să introducem un anumit cod HTML, care arată astfel:

12

Imaginea 2.3 - Pagină HTML (incompletă) – prezentarea codului Culoarea roşie indică existența codului HTML, în timp ce textul de pe pagină este negru. Concluzia la care probabil ați ajuns şi singuri este că în documentele HTML există părţi vizibile utilizatorului și părţi care nu îi sunt vizibile1. Acele părţi care nu sunt vizibile determină și fac diferența între elementele paginii. Să analizăm mai bine exemplul anterior. Există câteva elemente. Fiecare are propriul tag de început şi de sfârşit:

13

Imaginea 2.4 - Pagină HTML (incompletă) – reprezentarea codului și secţiunile marcate În imaginea de mai sus, avem aceeaşi pagină, dar cu secțiunile clar marcate. Observăm următoarele elemente: … La început şi la sfârşit este un tag html, respectiv tag-ul de început şi cel de final. Ele înconjoară toate elementele şi indică faptul că tot ce se află între ele este cod html. ... Imediat după tag-ul html de început, respectiv după cel de final, se află tag-urile body de început și de final. Tot ce se află între ele, va fi afișat în fereastra browser-ului web.

...

Tag-urile h1 de început şi de final încadrează titlul primului nivel (Heading1).

14

Un

... paragraf

de



text

se

află

între

tag-urile

p

(p

...

de

la

paragraph/paragraf).



La fel ca şi tag-urile h1 şi p, tag-ul h2 de început şi de final încadrează titlul celui de-al doilea nivel (Heading2). Imaginați-vă tag-urile ca pe nişte cadre (containere), care ne oferă informații despre conținutul aflat între tag-ul de început și cel de final. În continuare, vom detalia tipurile de tag-uri și modurile în care acestea se aplică.

Tag-ul HTML Până acum am menţionat tag-urile ca fiind elementele structurale principale ale unui document HTML (pagină) şi am văzut structura unui document simplu, în care apar anumite tag-uri. Acum, vom explica ce este un tag HTML şi cum se inserează acesta. Elementele (tag-urile) sunt alcătuite din 3 părţi:   

tag-ul HTML de început; tag-ul HTML de final; conţinutul dintre ele (unele tag-uri nu au niciun conţinut).

Deseori, în locul cuvântului element se foloseşte cuvântul tag. În acest context, întregul element (tag-ul de început + conținut + tag-ul de final) se marchează doar ca tag. Astfel, putem spune ceva de genul: „Deschidem tag-ul p, introducem conținutul și închidem tag-ul”.

15

Imaginea 2.5 - Tag-uri HTML de început şi final A. Tag-ul HTML de început; B. Tag-ul HTML de final; C. Semnele mai mic şi mai mare se folosesc pentru a indica începutul, respectiv sfârşitul tag-ului; D. Caracterul sau caracterele care indică tipul tag-ului; E. Linia oblică (forward slash) indică tag-ul HTML de final. Deci, având în vedere tot ceea ce am menţionat până acum, fiecare element începe cu un tag HTML de început. Mai întâi, scriem semnul mai mic, apoi unul sau mai multe caractere care indică tipul tag-ului (caracterele nu sunt arbitrare) şi semnul mai mare. Urmează conţinutul tag-ului. În cele din urmă, scriem tag-ul HTML de final, care constă din semnul mai mic, un slash, caractere repetitive care indică tipul tag-ului și semnul mai mare. Toate, cu anumite excepții, respectă această regulă. Acum, dacă revenim la acea parte a codului din exemplul de la începutul lecţiei şi îl privim:

Imaginea 2.6 - Tag-ul h1 putem observa exact aceste elemente despre care am vorbit. Tag-ul HTML de început este

, unde, între semnele mai mic și mai mare, au fost introduse două caractere h1 care indică clar titlul (Heading1). Conţinutul elementului este Lorem ipsum dolor sit amet. Tag-ul HTML de final este şi îl recunoaştem ca tag final datorită simbolului liniuță oblică / (slash). Vă reamintim că întregul rând este un singur element (sau tag).

Reguli de bază pentru scrierea limbajului HTML Când scriem tag-uri, trebuie să respectăm două reguli de bază: 1. Prima regulă Un tag (element) poate cuprinde un număr nelimitat de alte tag-uri, dar toate tag-urile trebuie finalizate în cadrul tag-ului în care au fost create. Să vedem un exemplu. Exemplul este unul corect:

Imaginea 2.7 - Elementele p şi strong plasate corect

16

În timp ce următorul exemplu nu este corect:

Imaginea 2.8 - Elementele p şi strong plasate greşit În primul exemplu, tag-ul p conține un tag strong deschis şi închis, după care tag-ul p se termină. În al doilea exemplu, este o eroare, deoarece tag-urile se intersectează, tag-ul strong nu este finalizat înainte de tag-ul p pus într-un cadru, ceea ce este o greșeală. Aceste tipuri de erori pot apărea uneori atunci când combinăm documentul finalizat cu aplicaţia de design (WYSIWYG) şi cu introducerea manuală a codului HTML, care sunt destul de greu de localizat în documentele mai mari. Cea mai bună măsură de prevenţie este introducerea atentă a tag-urilor. 2. A doua regulă Fiecare tag de început trebuie să aibă şi un tag de final. Respectiv, dacă vom începe un anumit element (tag), trebuie să-l şi încheiem undeva. Nu putem începe, de exemplu, cu tag-ul h1 pentru titlu, ci introducem conținutul (textul titlului) și continuăm cu paragrafele de text. Înainte de paragraf, în acest exemplu trebuie să închidem tag-ul h1 și abia apoi să continuăm.

Tag-urile cu autoînchidere Majoritatea elementelor se scriu așa cum am menționat, dar există şi așa-numitele tag-uri cu autoînchidere. Tag-urile cu autoînchidere sunt cele care încep și se termină în același timp. De exemplu, semnul pentru întreruperea/separarea unui rând în cadrul unui paragraf este
(br de la comanda break). Acest tag nu are conţinut și, dacă am respecta regulile de mai sus, ar trebui să-l scriem ca
. Deoarece acest lucru nu este necesar (şi incorect pe deasupra), tagurile vor fi scrise doar ca
sau
. În varianta HTML, tag-urile cu autoînchidere se scriu <x> (la fel ca şi tag-urile de început, fără cele finale), în timp ce în varianta xHTML trebuie scrise așa: <x /> (o combinație a tag-urilor de început și de final). Având acest lucru în vedere, să privim un exemplu de tag-uri normale și cu autoînchidere:

Imaginea 2.9 - Element p scris corect - deschis şi închis -, precum şi tag-ul br cu autoînchidere

17

Observăm tag-ul p de început și de final, care formează elementul p și conține un paragraf de text. În cadrul tag-ului p, se află un tag cu autoînchidere br, care indică faptul că în acel loc rândul se întrerupe. Atunci când browser-ul întâmpină o problemă legată de aceste două reguli, respectiv un cod incorect, el încearcă totuşi să-l afișeze presupunând unele detalii și corectând codul pe cât posibil în timpul afișării acestuia. În astfel de cazuri, pot apărea diferite situaţii neprevăzute și probabil o afișare diferită în browser-e diverse. Aici, la tag-urile cu autoînchidere, am menţionat HTML şi xHTML şi diferenţele de scriere. În general, întreaga bază a scrierii limbajului HTML şi xHTML este identică, în afară de unele mici diferenţe. În cadrul acestui curs, vom aborda în primul rând varianta HTML5, însă vom menţiona şi versiunile mai vechi.

Atributele tag-urilor HTML Tag-urile în sine, respectiv tag-urile de început ale elementelor, pot include atribute care conţin informaţii suplimentare. Atributele sunt formate din două părți: din numele atributului și din valoarea atributului. Acestea se scriu pe tag-ul de început al elementului și sunt separate de caracterul tipului de tag printr-un spațiu. Numele atributului se scrie cu minuscule, apoi se pune semnul egal, după care între ghilimele se inserează valoarea atributului. Spațiile sunt interzise în interiorul structurii atributului. Iată un exemplu:

Imaginea 2.10 - Atributul class de deasupra elementului p Numele atributului este etichetat cu A, în timp ce valoarea atributului cu B. Numele atributelor nu sunt arbitrare și există reguli conform cărora anumite atribute sunt utilizate în tag-uri diferite. Atributele pot fi opţionale sau obligatorii, asta în funcţie de tag şi de atribut. În exemplul din imagine, paragrafului i-a fost adăugată o clasă folosind numele atributului class. Un singur tag poate avea un atribut, mai multe atribute sau niciunul. HTML5 permite scrierea numelor atributelor cu majuscule (uppercase), precum şi omiterea ghilimelelor în jurul valorii atributului, dar acest lucru nu este recomandat deoarece poate cauza erori.

18

Crearea primei pagini HTML şi tag-urile de bază În lecția precedentă, ne-am familiarizat cu elementele de bază ale limbajului HTML. Acum, vom vedea care sunt părțile de bază ale documentelor HTML și vom crea prima noastră pagină. De asemenea, vom învăţa şi variantele existente ale limbajului şi cum şi când le putem aplica. Vom afla şi ce este doctype şi cum se foloseşte acesta.

Tag-urile de bază ale paginii HTML Paginile HTML nu se scriu la întâmplare, ci respectă o structură definită cu precizie. Trei tag-uri sunt obligatorii, deci trebuie neapărat inserate în bază - , şi . În HTML5, aceste tag-uri se pot şi omite pentru a obţine o structură mai liberă a limbajului, însă nu este recomandabil.

Imaginea 3.1 - Tag-ul HTML Am întâlnit acest tag în lecția precedentă. Tag-ul HTML de început se află la începutul documentului HTML, în timp ce tag-ul HTML de final se află întotdeauna la sfârșitul documentului. Practic, acest lucru înseamnă că întregul conținut al documentului HTML complet se află în cadrul acestui tag. Tot ceea ce se găseşte în cadrul tag-ului (între începutul şi sfârşitul tag-ului html) reprezintă partea paginii HTML. Nu mai putem scrie nimic înainte sau după el, în afară de o excepţie, despre care vom vorbi într-una din lecţiile viitoare. De asemenea, acest element apare doar o singură dată pe pagină.

Imaginea 3.2 -Tag-ul head Tag-ul head trebuie scris imediat după deschiderea tag-ului menţionat mai devreme. În tag-ul head, se află elemente care nu sunt vizibile în mod direct pe pagină. De exemplu, în partea head inserăm meta tag-urile folosite de motoarele de căutare când indexăm paginile. De asemenea, aici plasăm şi linkuri către fișiere CSS externe și către alte fișiere etc.

19

Imaginea 3.3 - Tag-ul body Tag-ul body urmează imediat după tag-ul head și conține tot ceea ce este vizibil direct pe pagină. O greșeală frecventă a începătorilor este că dublează acest tag sau o parte a acestuia, atunci când editează paginile sau când copiază părți ale unei pagini pe altă pagină. Structura de bază a tuturor paginilor HTML conţine aceste tag-uri, iar codul poate arăta astfel: 1 2 3 4 5 6 respectiv tag-ul html conține elementele head şi body:

Imaginea 3.4 - Trei tag-uri de bază ale paginilor HTML Reţineţi că toate celelalte elemente, tot codul suplimentar se află fie în elementul head, fie în elementul body. Tag-urile nu trebuie scrise direct în HTML. De asemenea, reţineţi că elementele html, head și body apar doar o singură dată și întotdeauna în ordinea prezentată mai sus.

20

Prima noastră pagină HTML Deoarece deja am asimilat câteva cunoștințe, haideţi să creăm prima noastră pagină HTML. CSSul îl lăsăm pentru mai târziu. Dacă utilizaţi Windows, deschideți Notepad, iar dacă utilizaţi Mac, deschideți TextEdit. Deşi aplicaţiile menţionate sunt suficiente pentru acest curs, vă recomandăm să mai instalaţi şi să folosiţi Notepad++ (Windows) - http://notepad-plus-plus.org/, respectiv TextWrangler (Mac) http://www.barebones.com/products/textwrangler/. Desigur, puteți utiliza şi editoare de text mai avansate, cum ar fi Dreamweaver sau Eclipse, dar nu îi recomandăm chiar de la început. Într-un cuvânt, codul HTML poate fi editat în orice editor de text. După ce aţi pornit editorul de text, introduceţi următorul cod: 1 2 3 My first HTML page 4 5

Hello!

6

I am HTML document.

7 8 9 Îl puteţi copia direct de aici sau îl puteţi tasta singuri. Dacă îl împărțim în elemente, observăm elementele html, head șibody pe care le-am menționat mai devreme în lecție. În continuare, în head se află elementul title (element obligatoriu), care va fi vizibil într-un tab din browser. În secțiunea body, se află elementele h1 și p, care reprezintă titlul și un paragraf al textului. Cu aceste tag-uri de text şi cu restul tag-urilor ne vom ocupa în următoarele lecţii. Salvați pagina undeva pe calculator, introduceți numele, dar asigurați-vă că nu o salvați ca document txt (care este setarea de bază, implicită în toate editoarele de text), ci ca fișier html. Nu uitați că toate fișierele html au extensia .html sau .htm. Dacă priviţi următoarea imagine, veţi vedea fereastra de dialog Save as a instrumentului Notepad++, în care html a fost selectat ca tip de fişier:

21

Imaginea 3.5 - Salvarea paginii noastre în Notepad++ (Windows) În caz că lucraţi pe calculatoare Mac şi în TextWrangler, fereastra de dialog va arăta astfel:

22

Imaginea 3.6 – Salvarea paginii noastre - TextWrangler (Mac) Salvaţi fişierul ca html fie prin alegerea tipului de fişier (Notepad++), fie prin tastarea manuală a extensiei .html la sfârşitul numelui (Notepad++ şi TextWrangler). Acum, puteţi localiza fişierul pe harddisk şi îl puteţi porni. Se va deschide browser-ul web setat ca implicit, care va afişa pagina noastră. Vom obţine ceva similar următoarei imagini:

23

Imaginea 3.7 – Afişarea paginii noastre în browser-ul Chrome Puteți afișa codul paginii și din browser. Daţi clic dreapta pe pagină și din meniul derulant selectaţi View page source, respectiv View source (în funcție de browser). Se va afișa același cod pe care tocmai l-aţi introdus în editor. Din această fereastră de dialog a browser-ului, codul nu poate fi schimbat, dar este util atunci când doriți să vizualizați HTML-ul unei alte pagini pe care nu ați creat-o dvs. Să privim exemplele unor site-uri populare precum Wikipedia (wikipedia.org) şi Amazon (amazon.com). Dacă deschidem sursa site-ului Wikipedia, vom observa că şi această pagină are tag-urile de bază , , chiar dacă are și foarte multe rânduri ale altui cod. Principalele tag-uri menţionate sunt marcate în imaginile de mai jos cu roşu:

24

Imaginea 3.8 - Exemplu de cod a site-ului www.wikipedia.org

25

Imaginea 3.9 - Exemplu de cod pentru site-ul www.wikipedia.org

Variantele limbajului HTML HTML s-a dezvoltat de-a lungul anilor, așa că astăzi avem mai multe versiuni actuale. Deşi poate nu se deosebesc la prima vedere, cu siguranţă există diferenţe şi acestea influenţează drastic modul de scriere a codului, respectiv modul de creare a documentelor noastre, însă şi modul în care vor fi reprezentate documentele respective. Fiecare versiune nouă a limbajului HTML aducea anumite îmbunătăţiri şi elemente noi, în timp ce unele elemente vechi şi anumite reguli erau eliminate. În general, limbajul HTML a crescut şi a fost îmbunătăţit odată cu apariția versiunilor noi, ceea ce implică şi actuala versiune HTML5. Totuşi, în paralel, din versiunea menţionată este eliminată practic întreaga stilizare HTML. Astăzi, putem spune că avem 3 versiuni actuale (cu unele variante ale acestora). HTML 4 Această variantă a fost publicată în anul 1997, ceea ce în domeniul designului web reprezintă o perioadă de timp destul de lungă. HTML4 suportă o anumită stilizare direct prin HTML. În acest scop, există tag-uri precum center, font şi altele. Totuşi, astăzi, pentru fiecare stilizare se utilizează

26

CSS. Practic, HTML4 nici nu se mai foloseşte, însă se poate recunoaşte pe unele site-uri mai vechi. Recomandarea noastră este să nu creaţi pagini noi în HTML4.

xHTML 1 Publicat în anul 2000, xHTML1 reprezintă o combinaţie a limbajului HTML4 şi XML, de unde a şi primit numele de xHTML. Pe baza limbajului HTML4, sunt adăugate unele reguli foarte importante, dar şi mult mai stricte din XML, în care intră şi următoarele:    

fiecare element (tag) trebuie să aibă un tag de deschidere şi unul de închidere, excepţie fiind elementele cu autoînchidere (precum ); numele atributelor în tag-uri trebuie scrise cu minuscule; toate atributele din tag-uri trebuie să aibă valori inserate între ghilimele; sunt interzise unele tag-uri din HTML4.

xHTML a permis ca documentele scrise în acest standard să poată funcţiona uşor cu instrumentele prevăzute pentru XML. De asemenea, xHTML a asigurat şi implementarea elementelor în alte formate care se bazează pe XML, precum SVG, MathML şi altele. Există trei tipuri de xHTML, şi anume:  



Strict XHTML 1.0 – noile reguli XML introduse trebuie respectate în totalitate; Transitional XHTML 1.0 – în acest tip, este permis un mod de scriere mai liber al documentelor. Este permisă utilizarea tag-urilor care nu se mai folosesc, precum center şi font, de exemplu. Din denumirea acestui tip (transitional - tranziţional, de trecere), putem concluziona că acesta este conceput ca un tip tranziţional, temporar, însă în continuare se foloseşte împreună cu varianta strict. XHTML1.0 Frameset – această variantă nu se mai foloseşte deloc, însă ea presupunea definirea regiunilor, a frame-urilor pe pagină, în care apoi erau încărcate imagini separate.

xHTML (strict şi transitional) era în urmă cu un an un standard care se folosea foarte des. Totuşi, de când a apărut versiunea stabilă de HTML5, acesta a devenit lider, pentru ca în octombrie 2014 să fie finalizată versiunea care obţine totodată şi statusul Recommendation, aşadar putem spune că xHTML nu se va mai folosi. HTML5 După cum am menţionat deja, HTML5 este standardul momentan recomandat pentru crearea documentelor HTML. Tot ceea ce vom crea în cadrul acestui curs vom crea în această versiune. Dezvoltarea continuă nu este oprită, chiar dimpotrivă, dezvoltarea versiunii 5.1 avansează foarte bine şi publicarea acesteia se anunţă pentru anul 2016. Trebuie să menţionăm şi că HTML5 este deja implementat în toate browser-ele moderne de pe

27

calculatoare (versiunile actuale), dar şi pe dispozitivele mobile şi pe alte dispozitive. De exemplu, Android, iOS şi Windows Phone, cele mai populare sisteme de operare, deja suportă HTML5. Totuşi, trebuie să avem grijă ca paginile noastre să fie accesibile şi vizibile în mod corect şi în browser-e mai vechi, chiar dacă acest lucru necesită scrierea elementelor suplimentare. Se poate întâmpla ca unele elemente avansate să nu fie deloc vizibile în vechile browser-e (deoarece nu suportă HTML5), însă nu putem permite ca pagina să nu se afişeze deloc sau să nu fie funcţională. Această problemă apare la calculatoarele pe care sunt instalate browser-e mai vechi. De exemplu, Microsoft Internet Explorer 8, lansat în anul 2009, şi Internet Explorer 7, din anul 2006, nu suportă specificaţiile HTML5, dar sunt browser-e care încă se mai folosesc (nu într-o măsură mare, dar sunt totuşi prezente pe piaţă). Am văzut ce variante de limbaj există. Pentru determinarea variantei pe care o folosim, avem la dispoziţie Doctype-ul de la începutul paginii.

Doctype Fiecare document trebuie să posede o declaraţie (în care se găsesc datele despre document şi caracteristicile limbajului) şi un element root, sub care se găseşte structura documentului. Când este vorba de HTML, declaraţia, de obicei, implică versiunea limbajului şi adresa fişierului în care se găseşte definiţia pentru acest limbaj. Declaraţia se numeşte Document Type Declaration şi se găseşte la începutul fiecărei paginii HTML în „tag”-ul DOCTYPE. Motivul pentru care am introdus cuvântul tag între ghilimele este că acest DOCTYPE, de fapt, nu este un tag HTML adevărat, ci este o instrucţiune dată browser-ului (din cauza semnului ! după deschiderea tag-ului). Instrucţiunea poate fi dată şi serverului web, dar o recunoaştem (ca şi instrucţiunea browser-ului), în aşa fel încât la începutul său conţine caractere speciale (de exemplu,
1"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Acest exemplu defineşte pagina ca xHTML 1.0 transitional menţionat mai devreme sau ca: 1 Ce defineşte pagina ca HTML5? La ce se foloseşte definiţia tipului de document? DOCTYPE se poate imagina ca gramatica documentului HTML. La început, declarăm ce DTD, adică ce set de reguli vom folosi. Dacă respectăm regulile respective şi dacă pagina noastră este creată conform acestora şi nu există erori în cod, atunci putem spune că documentul nostru este valid. Regulile provin din versiunile limbajului HTML menţionate mai devreme.

28

Cu alte cuvinte, la începutul documentului, noi definim singuri dacă vrem să creăm HTML5, xHTML1 transitional sau al treilea tip de pagină. Când determinăm aceasta, în continuare respectăm regulile stabilite pentru versiunea aleasă. Documentul este valid dacă în el nu avem erori. Erorile pot include şi utilizarea unei anumite reguli dintr-o altă versiune care nu este suportată în versiunea pe care o utilizăm. De exemplu, în xHTML am putut să folosim atributul cellspacing în tag-ul tabelului, în timp ce acest atribut concret este eliminat din HTML5. Dacă scriem atributul în xHTML, codul va fi valid, în timp ce, dacă îl scriem în HTML5, codul nu va fi valid (indiferent dacă browserul l-a recunoscut sau nu). Tabelele şi detaliile legate de acestea vor fi abordate mai târziu în acest curs.

Imaginea 3.10 - W3C Validator

Validitatea documentului se poate verifica pe site-ul W3C, creat tocmai cu acest scop (http://validator.w3.org/). Când la adresa respectivă inserăm linkul URL până la site sau încărcăm o pagină sau o parte din pagină, validatorul va verifica erorile în cod (precum tag-urile care nu sunt închise, atributele care lipsesc şi altele), dar va verifica şi dacă codul este în concordanță cu DTDul pe care l-am setat. De exemplu, dacă folosim varianta xHTML strict şi introducem tag-ul font care este interzis în această variantă, validatorul va semnala existenţa unei erori. Totuşi, dacă folosim xHTML transitional, atunci nu va fi semnalată nicio eroare. Validatorul nu este atotputernic şi nu ne va corecta erorile, dar ne informează şi ne arată unde am greşit, pentru a putea să corectăm ceea ce nu este corect scris.

Variantele Doctype Analog variantelor HTML, respectiv variantelor limbajului xHTML disponibile, există mai multe varinte de declaraţii Doctype.

HTML4

29
1Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

Transitional XHTML 1.0
1Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Strict XHTML 1.0
1Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML5 La această variantă, Doctype este foarte mult simplificat, aşadar scriem doar: 1 Acestea nu trebuie învăţate pe de rost, ci le copiaţi doar la începutul noului document. Dacă folosiţi un instrument mai avansat, precum, de exemplu, Adobe Dreamweaver, în timp ce creaţi documentul nou puteţi să alegeţi tipul de document, iar Dreamweaver se va ocupa de Doctype:

30

Imaginea 3.11 - Alegerea Doctype în timpul creării documentului HTML în instrumentul Dreamweaver

XMLNS Mai devreme, am menţionat că la începutul documentului inserăm tag-ul . Acesta urmează imediat după Doctype. Dacă folosim o versiune mai veche de xHTML, atunci pagina goală va arăta astfel: 1 3 4 5 Nov dokument 6 7 8 9 10 Atenţie la acest exemplu de pagină xHTML! Ştim că este xHTML, fiindcă putem vedea în primul rând în Doctype. Ceea ce observăm este existenţa atributului xmlns în tag-ul HTML. Acest atribut este necesar în variantele xHTML, deoarece defineşte namespace-ul necesar în fişierele xml (ceea ce după structura şi regulile sale este şi xHTML). În general, vom folosi HTML5, aşadar acest detaliu nu ne va fi necesar. Dacă observăm doar acest rând, vedem că acesta este un tag html clasic pe care l-am folosit deja, dar în plus avem şi acest atribut xmlns: 1 Ca material suplimentar al acestei lecţii, aveţi la dispoziţie o arhivă ZIP cu un doctype inclus, dar şi cu alte elemente de bază pentru cele mai des folosite variante de HTML. Puteți descărca arhiva de la următorul link: http://www1.link-elearning.com/linkdl/coursefiles/690/UHIC_10_dodatni_mat.zip. Meta pentru utf8 Un detaliu foarte important, care, deseori, se poate anticipa, este setarea lui encoding, respectiv inserarea lui meta tag, care va determina modul în care browser-ul trebuie să citească pagina noastră şi cum să afişeze caracterele/literele specifice unei limbi. Se recomandă ca encoding-ul să fie setat întotdeauna la utf-8. În caz contrar, caracterele specifice limbii române/diacriticele (ă, î, ş, ţ, â şi altele) s-ar fi pierdut în totalitate, dar în special ar fi putut

31

apărea probleme dacă s-ar fi folosit, de exemplu, alfabetul chirilic. Utf-8 rezolvă problema limbii şi suportă aproape toate limbile active şi recunoscute. De aceea, în partea head (pentru HTML5) inserăm întotdeauna: 1<meta charset="utf-8"> În timp ce pentru xHTML inserăm următoarele: 1<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Acesta este meta tag-ul care defineşte encoding-ul. Nu trebuie să-l memorăm, ci îl copiem întotdeauna în aceeaşi formă în partea head. După cum puteţi observa, şi meta tag-ul pentru encoding este simplificat în versiunea HTML5. Când la sfârşitul acestei lecţii analizăm toate cele spuse, baza paginii noaste HTML5 va arăta astfel: 1 2 3 4 5 <meta charset="UTF-8"> HTML5 6 7 8 9 10 11 12 <span style="font-size: 14px;"> 13

Textul În lecția precedentă, am discutat despre procesul de creare a unei pagini simple şi despre cele trei tag-uri de bază ale limbajului HTML (html, head şi body). În această lecţie, vom detalia cele mai frecvent utilizate tag-uri în limbajul HTML.

Titlurile (headings) Cu titluri ne-am întâlnit deja în lecțiile precedente. Pe lângă faptul că marchează diferite părți ale textului, titlurile servesc la structurarea corectă a documentului.

32

Exemplu de titluri în limbajul HTML: 1

Lorem ipsum dolor sit amet

2

Lorem ipsum dolor sit amet

3

Lorem ipsum dolor sit amet

4

Lorem ipsum dolor sit amet

5
Lorem ipsum dolor sit amet
6

Lorem ipsum dolor sit amet


şi afişarea acestora în browser:

Imaginea 4.1 – Tag-urile heading afişate în browser (de la h1 la h6) Este important să reținem cât mai multe detalii când vine vorba de titluri: • În titluri, putem pune doar un text scurt, concis. Nu putem seta texte, imagini întregi etc. Deși această regulă pare logică, astfel de greşeli apar de multe ori. • Trebuie să respectăm ierarhia corectă a titlurilor. h1 se utilizează pentru titlurile principale, h2 pentru subtitluri. Dacă trebuie să mai ramificăm textul în continuare (după h2), folosim subtitlurile h3 etc. Dar nu putem plasa un subtitlu h4 imediat după h1 sau, de exemplu, un h1 după h2. • Titlurile nu se folosesc pentru a mări dimensiunea textului și/sau pentru a seta formatul bold. Pe baza setărilor implicite, imediat după ce unui anumit text îi inserăm marcajul pentru titlu (adică tag-ul heading), acestui text i se măreşte fontul în mod automat şi devine unul îngroșat.

33

Paragrafele (Paragraphs) Paragrafele reprezintă ceea ce, de obicei, numim text obişnuit. Ca și în cazul titlurilor, putem crea paragrafele înconjurând textul cu un tag p de început și unul de final. Conform principalelor valori implicite, browser-ul afișează fiecare paragraf pe un rând nou şi adaugă un anumit spaţiu înainte şi după fiecare paragraf. Exemplu de paragraf în limbajul HTML1: 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

2eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 3minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 4ex ea commodo consequat.

5

Duis aute irure dolor in reprehenderit in voluptate velit esse 6cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat 7 8

cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.



și afişarea acestuia în browser:

Imaginea 4.2 - Exemplu de două paragrafe în browser

Bold Efectul bold (îngroșarea caracterelor), aşa cum poate presupuneți deja, se adaugă cu ajutorul unui tag adecvat. Interesant este faptul că putem posta una dintre aceste două variante, mai exact tag-ul sau <strong> și vom obține aproape același efect. Spun aproape acelaşi efect, pentru că se

34

diferențiază într-un punct foarte important. Pentru a înțelege mai bine acest lucru, trebuie să facem o mică paranteză și să explicăm mai întâi conceptul de semantică. Semantica este, în general, ştiinţa despre sensul cuvintelor2. În contextul designului web şi al limbajului HTML pe care le studiem aici, semantica se referă la marcarea funcţională a elementelor. Dacă ne referim în special la tag-urile sau <strong>, primul va posta doar varianta îngroșată a fontului peste caracterele marcate, în timp ce <strong> va defini partea marcată ca fiind separată, importantă, evidenţiată. În ambele cazuri, toate browser-ele moderne afișează fontul bold în acelaşi fel, dar <strong> indică diferitor intrumente software, site-uri şi reader-e că acea parte a textului este evidenţiată. În urma tuturor celor menţionate, este mai bine să utilizăm varianta <strong>, deoarece, în afară de aspectul vizual, aceasta are şi o utilizare funcţională. De exemplu, atunci când Google, respectiv serviciul său automatizat, indexează paginile, va fi omis, respectiv va fi tratat ca un text obișnuit, în timp ce <strong> va fi luat în considerare ca o parte mai importantă a textului. Exemplu de formatare bold (strong) în limbajul HTML:

Lorem ipsum <strong>dolor sit amet,consectetur adipisicing

1elit.



şi afişarea acesteia în browser:

Imaginea 4.3 - Afişarea paragrafului cu partea strong În exemplul de mai sus, observăm că este inserat un paragraf de text şi că o parte a sa este marcată (înrămată) cu un nou tag strong. În reprezentarea din browser, partea din textul respectiv este afişată cu varianta bold a fontului. Dacă am fi folosit varianta cu tag-ul b, am fi obţinut acelaşi efect, cel puţin este vorba de aspectul vizual: Aici, am menţionat termenul de semantică şi am explicat că, prin intermediul ei, transmitem în designul web semnificaţia ascunsă a elementelor. Utilizarea elementelor semantice nu este obligatorie, însă poate fi utilă într-o măsură mai mică sau mai mare. Concret, utilizarea tag-ului b în loc de tag-ul strong nu va aduce beneficii foarte mari, însă poate cauza erori.

Italic În ceea ce privește varianta de scriere cu italice, avem o situație similară cu cea a formatului bold de mai sus. Putem folosi fie tag-urile , fie tag-urile <em>. În mod analog, primul va posta doar

35

versiunea italic a fontului, în timp ce tag-ul <em> va posta și sensul semantic. Tag-ul <em> menționat indică faptul că textul din interiorul lui este puţin diferit și se evidențiază de restul propoziţiei. Em este prescurtarea de la cuvântul englezesc Emphasize, care înseamnă a sublinia, a accentua. Exemplu de formatare italic (em) în limbajul HTML: 1

Duis aute irure <em>dolor in reprehenderit



şi afişarea acesteia în browser:

Imaginea 4.4 - Afişarea paragrafului cu partea cu italice După cum am explicat deja, formatarea bold şi italic se poate insera foarte simplu, utilizând tag-uri corespunzătoare în textele noastre. Acesta nu este singurul mod de a avea formatarea bold şi italic. Folosind regulile CSS, pe care le vom aborda mai târziu în curs, putem, de asemenea, să stilizăm textul în diferite moduri, acestea fiind chiar şi mai uşoare decât stilizarea prin tag-uri.

Sup şi sub Uneori, în texte avem nevoie de caractere pe care trebuie să le poziționăm deasupra, respectiv sub rândul principal/linia de bază (base line), în special în formule. Pentru astfel de detalii, folosim tag-urile <sup>, respectiv <sub>. Sup este prescurtarea de la superscript, iar sub de la subscript. Iată un exemplu pentru sup (în primul rând) şi sub (în al doilea rând): 1

E = MC<sup>2

2 3

CO<sub>2 + H<sub>2O = H<sub>2CO<sub>3



şi afişarea în browser:

Imaginea 4.5 - Afişarea tag-urilor sup şi sub

36

Codul din al doilea exemplu vi se poate părea puţin confuz din cauza numărului de tag-uri, dar, dacă îl descompuneţi în părți, veți vedea că, de fapt, este foarte simplu. De exemplu, priviți aceeași parte scrisă astfel: 1



2

CO<sub>2

3

+

4

H<sub>2O

5

= H<sub>2CO<sub>3

6 7



Nu este mai simplu? Totul stă în felul în care privim detaliile. Creierul nostru este obișnuit cu texte clasice (ca să spunem așa) și conectează părţile textului în unități logice. La limbajul HTML, lucrurile stau puțin altfel. Codul de mai sus va da acelaşi rezultat pentru că noile rânduri şi spaţii introduse în el nu joacă un rol semnificativ.

Br Am menționat deja că la sfârșitul și începutul unui paragraf nou se adaugă un rând nou. Însă, uneori vrem să întrerupem rândul în mijlocul paragrafului, fără să creăm un paragraf nou. Putem face acest lucru prin simpla adăugare a unui tag, probabil că deja bănuiţi, de întrerupere a rândului, care are marcajul
în HTML, respectiv
în varianta xHTML. Datorită specificităţii acestui element (nu are propriul conţinut), nu scriem tag-ul de început şi cel de final, ci doar unul, care este în acelaşi timp şi de început, şi de sfârşit. Acesta este unul dintre tag-urile cu autoînchidere pe care le-am menționat deja. Br este prescurtarea de la cuvântul englezesc break (a întrerupe). Dacă ați folosit opţiunea shift + enter în Microsoft Word sau într-un instrument similar, atunci acest principiu vă este cunoscut deja. Exemplu de tag HTML
: 1

Excepteur sint occaecat,
cupidatat non proident, sunt in culpa 2qui officia deserunt mollit anim id est laborum



37

şi afişarea acestuia în browser:

Imaginea

4.6

-

Afișarea

întreruperii

unui

paragraf

în

browser

De ce să utilizăm acest tag? Ar părea întotdeauna mai logic să întrerupem textul printr-un paragraf nou, dar se poate întâmpla să fi setat, de exemplu, un stil CSS specific pentru paragraf, precum şi un spaţiu mai mare înainte sau după. Poate că vrem să păstrăm o parte din text împreună, dar, totuşi, pe un rând nou. Utilizarea acestui tag nu este obligatorie. Browser-ul va muta singur continuarea textului într-un rând nou, în acelaşi paragraf, în caz că ajungem la sfârşitul paginii/la sfârşitul elementului înconjurător. Break se foloseşte doar atunci când vrem o anumită separare de text într-un anumit loc din textul respectiv.

Hr Hr este un tag care funcționează similar cu tag-ul br sus-menționat, în sensul că se scrie doar o singură dată ca
în varianta limbajului HTML, respectiv ca
în varianta xHTML, însă are o funcție cu totul diferită. Acest tag adaugă o linie orizontală în text. Hr este prescurtarea de la englezescul horizontal rule (linie orizontală). În ultimul timp, se utilizează din ce în ce mai rar, dar uneori poate fi util. Exemplu de tag
între două paragrafe în limbajul HTML: 1 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim

3ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 4ex ea commodo consequat.

5
6

Duis aute irure dolor in reprehenderit in voluptate velit esse 7cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat 8 9

cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.



şi afişarea acestuia în browser:

38

Imaginea 4.7 - Afișarea tag-ului
în browser între două paragrafe

Caracterele speciale Pentru afişarea caracterelor speciale, folosim instrucţiuni HTML corespunzătoare. Acestea încep întotdeauna cu semnul & şi se termină cu semnul ; . Dacă inserăm unul dintre caracterele speciale, în cod inserăm ceva pe care browser-ul îl afişează într-un mod diferit. De exemplu, dacă în cod am fi scris următoarele: 1

Copyright © LINKgroup



în browser am fi obţinut acest rezultat:

Imaginea 4.8 - Prezentarea caracterului înlocuitor în text Caracterele înlocuitoare pot fi uneori foarte utile. În tabelul de mai jos, puteţi vedea unele dintre cele mai des folosite caractere, iar mai multe detalii despre acestea le găsiţi la următorul link: http://www.w3schools.com/html/html_entities.asp Instrucţiune HTML

Aspectul pe pagina HTML (non breaking space)

< > &

< > &

39

© »

© »

Tabelul 4.1

Observaţii despre spaţiile albe (white-space) Deseori, utilizatorii obișnuiți să lucreze (greşit) în Word sau într-un instrument similar utilizează spaţii albe multiple pentru poziţionarea textului. Acest lucru este greșit din mai multe motive, pe care nu le vom detalia acum, dar rețineți că în limbajul HTML nu putem scrie mai multe spații albe. Între două caractere, poate exista numai un singur spațiu obişnuit. În cazul în care adăugăm mai multe spații, utilizatorul va vedea doar unul. Pentru poziţionarea elementelor, se utilizează diferite moduri. Pur și simplu, HTML elimină toate spațiile albe multiple şi lasă doar unul. Situația este asemănătoare cu cea a rândurilor din cod. Noile rânduri nu fac nicio diferență. Putem crea o pagină întreagă pe un singur rând sau putem folosi mii de rânduri. Imaginea afișată nu va fi diferită. Important este să scriem tag-uri complete, adică fără spații între caracterele < și >.

Listele În această lecţie, vom defini noţiunea de liste și modul în care le putem utiliza pe web. Ne vom familiariza și cu tag-urile utilizate pentru liste.

Noţiunea de listă Când spunem listă, ne referim, de obicei, la simpla structurare vizuală a conținutului în unități cu sens. Acest lucru este, cu siguranță, corect, însă în HTML listele pot însemna mult mai mult. O listă poate fi folosită pentru a separa anumite unităţi, pentru a grupa mai multe linkuri într-un întreg, pentru a acorda prioritate anumitor elemente etc. Listele nu trebuie să arate aşa cum ni le imaginăm. Pot avea un aspect complet diferit. În acest caz, utilizatorul nici nu observă că vizualizează un conținut structurat sub formă de listă. De exemplu, un număr mare de sesiuni de navigare (meniuri principale) pe site-uri sunt create astăzi cu ajutorul listelor stilizate sub formă de meniuri derulante:

40

Imaginea 5.1 - Prezentarea unei liste tipice pe o pagină Wikipedia

Imaginea 5.2 - Prezentarea listei într-o formă puțin mai diferită În primul exemplu, în imagine putem vedea o utilizare standard a listei, aşa-numitele liste neordonate, în care textul este structurat în unităţi cu sens și elemente individuale folosind bullets, adică cerculețe negre. O astfel de afișare a listei este mult mai clară decât un paragraf de text obişnuit. În al doilea exemplu, vedem harta de navigare a unui site, de asemenea realizată cu ajutorul listelor neordonate. Totuşi, această listă este foarte diferită din punct de vedere vizual, pentru că s-au

41

utilizat regulile CSS. Elementele sunt plasate orizontal, unul lângă altul, iar lista conține şi elemente embedded (inserate), care apar pe verticală atunci când poziționăm mouse-ul deasupra elementului respectiv. Totuşi, ambele liste din exemple au aceeași structură HTML, doar stilizarea diferă, afişare vizuală pentru care este responsabil CSS. Putem concluziona că listele HTML se folosesc (în general) pentru structurarea conținutului textual. Afișarea vizuală însă poate fi diferită de ceea ce, în mod tradițional, considerăm listă. În continuarea lecției, ne vom familiariza în detaliu cu modul de structurare a unei liste.

Tipurile de liste Există trei tipuri de liste: 

Ordered (liste ordonate) sunt liste ale căror elemente sunt marcate cu un tip de element ordonat. De obicei, numerele, cifrele romane, literele alfabetului etc.



Unordered (liste neordonate) sunt liste ale căror elemente sunt marcate cu diferite elemente - pătrate, cercuri, liniuțe etc. Spre deosebire de listele ordonate, aici ordinea elementelor nu este importantă.



Definition (liste de definiţie) sunt liste ale căror elemente sunt alcătuite din două părţi, text şi definiţie. Sunt utile pentru a crea întrebări şi răspunsuri, deoarece sunt întotdeauna formate din perechi. Astăzi, acest tip se foloseşte din ce în ce mai puţin.

Listele ordonate Pentru a indica listele ordonate, folosim tag-ul
    . Ca și în cazul tag-urilor menţionate mai devreme, scriem un tag ol de început şi un tag ol de final, după care, în interiorul acestuia, scriem noi tag-uri
  1. , fiecare reprezentând un nou element al listei. De exemplu: 1
      2
    1. nigredo
    2. 3
    3. albedo
    4. citrinitas
    5. 4
    6. rubedo
    7. 5
    6 Observăm că la începutul listei se află un tag de început
      , după care urmează elementele individuale ale listei încadrate de tag-ul
    1. , iar în final lista se încheie cu
    . Având o astfel de structură, tag-ul listei cuprinde toate elementele introduse, iar browser-ul știe că toate elementele sunt conectate într-un întreg. Conform valorilor implicite, în browser această listă arată astfel:

    42

    Imaginea 5.3 - Afişarea unei liste ordonate în browser Ceea ce este important şi ce trebuie să rețineți este că numeralele ordinale nu au fost introduse manual în elemente, deși apar în reprezentare. Când afișăm listele ordonate, browser-ul adaugă un numeral ordinal în faţa fiecărui element. Desigur, după cum vom vedea mai târziu în timpul cursului, când vorbim despre limbajul CSS, aceste numere pot fi înlăturate dacă dorim sau le putem schimba în cifre romane, în litere ale alfabetului etc.

    Listele neordonate Listele neordonate au o structură foarte asemănătoare cu cea a listelor ordonate menţionate mai devreme. Diferenţa constă în tag-ul folosit. În cazul listelor neordonate, tag-ul folosit este