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.
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/
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 h1> ş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 br>. 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, , <%). În ceea ce priveşte instrucţiunea DOCTYPE (declaraţia), de obicei, aceasta arată astfel:
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
Transitional XHTML 1.0
Strict XHTML 1.0
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
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
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
, fiecare reprezentând un nou element al listei. De exemplu: 1 2
nigredo
3
albedo
citrinitas
4
rubedo
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
, 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
Având în vedere acest lucru, priviți următorul exemplu: 1
2
nigredo
3
albedo
4
citrinitas
5
rubedo
6 Afişarea în browser este următoarea:
Imaginea 5.4 - Afişarea unei liste neordonate în browser După cum putem observa, nu mai sunt afișate numerale ordinale, ci bullets (cerculețe negre). Nu toate browser-ele afișează același tip de bullets, în ceea ce privește dimensiunea și poziția lor, dar, în general, sunt similare. Ca și în cazul listelor ordonate, mai târziu putem schimba sau elimina cerculețele (utilizând limbajul CSS). Deoarece listele ordonate şi cele neordonate sunt atât de asemănătoare, printr-o simplă modificare a tag-ului listei în cod putem modifica tipul de listă dintr-una ordonată într-una neordonată şi invers.
43
Am menționat mai devreme, iar acum repetăm că este foarte important modul în care scriem codul. Trebuie să ne asigurăm că am deschis şi închis corect toate tag-urile, dar şi că acestea nu se intersectează. Un singur caracter greșit poate produce un adevărat haos pe pagina afișată. Mai există și așa-numitele liste incluse (embedded), care, spre deosebire de exemplele anterioare, au mai multe niveluri de elemente. Pentru a clarifica acest lucru, iată un exemplu: 1 2
nigredo 3
4
primo
5
secundo
6
7
albedo
8
citrinitas
9
rubedo
10
11 Iată cum arată acest cod în browser:
Imaginea 5.5 - Afişarea unei liste incluse în browser Dacă privim prezentarea exemplului nostru în browser, putem vedea primul nivel al elementului, în timp ce un element (nigredo) are propriile elemente incluse. Dacă analizăm cu atenţie codul, vedem că lista inclusă completă este situată în interiorul unui element din listă. În exemplul de mai sus, lista neordonată este inclusă tot într-o listă ul. Dar, de asemenea, putem include o listă ol într-o listă ul și invers. Atenţie! În timpul includerii unei liste noi, pentru al doilea nivel inseraţi întreaga listă în interiorul tag-ului li de nivel 1. Deci, pentru primul nivel inserăm începutul tag-ului
, introducem apoi textul primului nivel, inserăm întreaga listă a nivelului 2 şi abia apoi scriem
pentru al doilea nivel.
Atributul type pentru listele ul şi ol
44
Simbolul afișat în fața elementelor care alcătuiesc lista poate fi definit cu ajutorul regulilor CSS, după cum vom vedea mai târziu în acest curs, sau prin atributul HTML type aplicat pe listă în cadrul codului HTML. Am spus deja că HTML5 a eliminat această posibilitate şi că se recomandă exclusiv folosirea regulilor CSS pentru stilizare, atât pentru stilizarea listelor, cât şi pentru stilizarea altor elemente. Mai multe despre varianta CSS veţi descoperi în modulul 5. Pe de altă parte, dacă folosim xHTML sau HTML4, putem stiliza lista cu ajutorul, deja menţionatului, atribut type. Atributul type pentru liste neordonate (ul) poate avea următoarele valori:
circle - cerc; disc - disc; square - pătrat.
Pentru listele ordonate (ol), valorile pot fi:
A - majuscule; a - minuscule; I - cifre romane majuscule; i - cifre romane minuscule.
În cod, o listă neordonată poate arăta astfel: 1
2
mere
banane
3
zmeura
4
5 Datorită atributului type cu valoarea square, putem trage concluzia că această listă va avea elementele marcate cu pătrate. Vă reamintim că acest atribut este eliminat din HTML5 şi că trebuie folosite regulile CSS. Pe de altă parte, dacă, totuşi, inseraţi o astfel de stilizare HTML, browserul o va interpreta şi o va afişa corect chiar şi când lucrăm într-un document HTML5, însă pagina nu va fi validă.
Listele de definiţie Listele de definiție se utilizează mai rar, dar pot fi foarte utile. Cea mai frecventă utilizare este pentru paginile de întrebări frecvente (FAQ - Frequently Asked Questions), deoarece acestea sunt aproape întotdeauna sub formă de întrebări și răspunsuri, respectiv în perechi. Rețineți că elementele sunt alcătuite întodeauna din două părți, reprezentate de tag-urile
și
, iar lista în sine este marcată cu tag-ul
(definition list).
45
Iată un exemplu în HTML: 1 2
nigredo
3
a blackening or melanosis
4
albedo
5
a whitening or leucosis
citrinitas
6
a yellowing or xanthosis
7
rubedo
8
a reddening, purpling, or iosis
9
10 În browser, exemplul arată astfel:
Imaginea 5.6 - Afişarea listei de definiţie în browser După cum putem vedea din exemplu, codul pentru aceste liste este destul de diferit de cel al listelor ordonate și neordonate. Cu toate acestea, regulile de scriere a tag-urilor sunt întotdeauna aceleași.
Linkurile În cadrul acestei lecţii, vom învăţa cum să postăm linkurile (hyperlinkurile) în documentele HTML şi cum să le folosim. Vom vedea şi ce variante de linkuri există și în ce scopuri se utilizează. De asemenea, ne vom familiariza cu conceptele de căi relative și absolute.
Noţiunea de hyperlink Linkurile sau hyperlinkurile (engl. hyperlinks) ne permit conectarea şi trecerea de la o pagină la alta, precum şi legarea fişierelor, a adreselor de e-mail etc. Cu toții am utilizat linkuri pe internet, deoarece fără ele ar trebui ca de fiecare dată să introducem manual adresa pe care vrem să o deschidem. Practic, pe internet fiecare text pe care putem da clic este un link, indiferent dacă este vorba de un site precum Google și Facebook, un site al clubului
46
de fotbal preferat sau un site al unui magazin local. Însăși platforma pe care vă aflaţi în acest moment foloseşte linkuri pentru a trece de la o pagină la alta, pentru conectarea la multimedia etc.
URL Uniform Resource Locator sau, în varianta prescurtată, URL este, prin definiţie, un şir de caractere care definesc referinţa către o anumită resursă pe internet. Cu alte cuvinte, folosind un URL, creăm linkuri către elementele de pe internet. Există URL-uri absolute şi relative. Vom reveni la ele imediat în cele ce urmează.
Deci, în cod vedem tag-urile p şi a, precum şi atributul href cu URL-ul care duce la site-ul Google:
47
Imaginea 6.2 - Afişarea unui link (tag-ul a) În imaginea de mai sus, vedem tag-ul descompus în părţi. Textul, și anume conținutul linkului, este scris cu negru. Dintre toate detaliile prezentate aici, el este singurul element vizibil utilizatorului. Tag-ul , respectiv tag-ul de început şi de final, este scris cu roșu la fel ca şi celelalte tag-uri cu care ne-am întâlnit. Aici, noutatea este atributul href, adăugat în tag-ul de început (putem vedea că semnul mai mare, finalul tag-ului de început, este plasat după atribut). Atributul href este alcătuit din două părţi: numele atributului, care este întotdeauna acelaşi pentru toate linkurile (A), şi locaţia (URL), la care duce linkul (B). Desigur, nu trebuie să uităm nici semnul egal şi nici ghilimelele din jurul lui URL. Există mai multe tipuri diferite de linkuri. Toate aceste linkuri respectă aceeași structură, doar conţinutul atributelor este diferit (URL), respectiv ceea ce este scris între ghilimele.
Tipurile de linkuri Linkurile absolute Acest tip de linkuri se utilizează, de obicei, atunci când vrem să conectăm pagina noastră cu o pagină sau un material de pe un alt site. Linkurile absolute sunt probabil cel mai simplu de introdus, dar se pot dovedi și cele mai complicate în ceea ce privește o viitoare modificare. Oricum, în cazul acestui tip de link, importantă este doar pagina (sau alt element) la care duce linkul, în timp ce pagina pe care se află linkul este mai puţin importantă. De exemplu, dacă privim următorul cod: 1Google 2Facebook 3Twitter putem determina cu uşurinţă, respectând regulile sus-menţionate, că acestea sunt trei linkuri care duc la trei site-uri: Google, Facebook şi Twitter.
48
Ceea ce defineşte linkurile absolute este faptul că nu contează pe ce site sau pagină se află. Întotdeauna vor duce către site-urile specificate. Acest lucru se datorează faptului că am folosit URL-ul absolut menţionat mai devreme. În cazul acestui tip, conținutul URL-ului începe întotdeauna cu tipul de protocol, urmat de domeniu, apoi cu calea până la pagina concretă (de exemplu, http://www.link-academy.com/prijava.php). Dacă nu definim calea până la pagină, ci doar domeniul, se va deschide pagina de start a site-ului. Linkurile relative Spre deosebire de linkurile absolute, unde doar destinația contează, la linkurile relative este foarte importantă și locația linkului, adică de unde este direcționat vizitatorul site-ului. Asta se datorează faptului că acest tip de link creează o relație între punctul de start și punctul de final. Linkurile relative sunt, de obicei, utilizate pentru a crea conexiuni în cadrul unui site. Deşi acum linkurile absolute pot părea drept cea mai practică soluţie, de fapt e invers. Linkurile relative se folosesc întotdeauna pentru linkuri în cadrul site-urilor. Haideţi să vedem următorul exemplu de cod: 1Contact info După cum putem observa în exemplu, în cazul linkurilor relative, în atributul href, există un URL relativ. Cu alte cuvinte, adăugăm o cale relativă până la pagină (sau altă resursă). În acest exemplu concret, linkul postat va căuta pagina contact.us.html în același folder în care se află pagina cu linkul, deoarece, așa cum am mai menționat, acest tip de link se referă la locația inițială. Să vedem acum structura unui site:
49
Imaginea 6.3 - O parte din structura unui site web În imagine, observăm că site-ul HTMLcompany conține diferite pagini și foldere, în care este organizată structura. Principiul folderelor și al fișierelor este cunoscut din mediul sistemului de operare, aşa că trecem peste el. Ceea ce ne interesează acum este modul în care stabilim linkurile relative într-o asemenea structură.
50
Linkurile relative se inserează astfel: mai întâi scriem o cale relativă până la folderul dorit și apoi adăugăm numele resursei pe care o conectăm la el. După cum am menționat deja, dacă ambele pagini se află în același folder, scriem doar numele paginii. Să clarificăm printr-un exemplu. Iată câteva situații posibile: Situaţia 1 - Dacă vrem să postăm un link pe pagina de start a site-ului din exemplul de mai sus (marcat cu A), dar care să ducă la pagina john-doe.html (B, în exemplu), localizată în folderul ourteam, care, la rândul lui, se află în folderul about-us, vom scrie următoarele: 1link Linkul va deschide mai întâi folderul about-us, apoi folderul our-team şi în el va căuta pagina johndoe.html. Situaţia 2 – Dacă vrem să setăm un link pe pagina john-doe.html (B), dar care să ducă la pagina de start a site-ului (A) - deci o situaţie opusă celei anterioare -, vom scrie: 1link Deoarece pagina care conține linkul se află în subfoldere și trebuie să o conectăm cu o pagină aflată „mai sus”, mai întâi trebuie să ne întoarcem, adică să ieșim din ambele foldere până când ajungem la nivelul principal, rădăcina site-ului web, și aici trebuie să căutăm index.html. Când ieșim dintr-un folder, adăugăm de două ori semnul punct în loc de numele folderului. Situaţia 3 – Dacă vrem să setăm un link pe pagina john-doe.html (B), care să ducă la pagina din folderul services (C), vom scrie următoarele: 1link În acest caz, avem o combinaţie puțin mai complicată decât cele două situații anterioare, deoarece mai întâi trebuie să ieşim din ambele foldere în care se află pagina la care ne conectăm și abia apoi putem deschide folderul services, în care să căutăm pagina index.html. Dacă setăm un link la un folder, în loc să-l setăm la pagina site-ului, în el se va deschide pagina implicită (index.html), dacă există. De exemplu, ../../services/ va da acelaşi rezultat ca şi ../../services/index.html. Sau, în cazul linkurilor absolute, www.sample.com/about/ va da același rezultat ca www.sample.com/about/index.html. Notă: Linkurile din această lecţie, exemplele precum sample.com şi mysite.com, sunt doar exemple care nu direcţionează către site-uri adevărate, ci se folosesc doar pentru prezentarea modului de construire a linkurilor, iar acestea trebuie tratate ca atare.
51
Înțelegerea corectă a modului de funcționare a linkurilor relative este foarte importantă în procesul de creare a unui site. De asemenea, este foarte important ca toate resursele (pagini, fişiere etc.) necesare unui site să fie întotdeauna împreună. De exemplu, creați un site pe calculatorul dvs. (la nivel local). În el, veţi conecta cu linkuri relative toate paginile și fișierele necesare. Când folosim linkurile relative, nu trebuie să postăm site-ul pe internet de la început, deoarece se vor păstra legăturile dintre toate elementele. Luând în considerare toate acestea, putem concluziona următoarele: Toate fișierele relevante pentru site trebuie să se afle în cadrul folderului principal/rădăcină (root) a site-ului. Toate fișierele inutile, care nu sunt în niciun fel asociate cu site-ul, nu ar trebui să se afle în folderul root. Când mutăm site-ul pe un alt calculator, trebuie să îl postăm pe server etc., trebuie să copiem întregul folder root, pentru a evita apariția erorilor. Poate vă întrebați de ce nu folosim întotdeauna linkurile absolute. Există mai multe motive, dar cel mai important este ușurința de a face modificări. Astăzi, instrumentele moderne de lucru cu HTML și cu documente similare (cum ar fi Adobe Dreamweaver) urmează în mod automat toate linkurile din cadrul unui site și corectează/editează tot ce e nevoie, de obicei în cazurile în care schimbăm numele fișierelor, structura lor etc. Totuşi, principalul avantaj al linkurilor relative pentru toate linkurile din cadrul unui site este că linkurile relative creează linkuri într-un cerc închis al site-ului şi acestea nu vor fi deteriorate şi nici influenţate chiar şi atunci când site-ul, ca un întreg, este mutat într-un alt mediu. De exemplu, dacă am fi creat un site pe calculator şi dacă am fi mutat toate fişierele în folderul D:/Sites/First-site, în timp ce în cadrul site-ului avem 2 pagini: index.html şi info.html, linkul setat ca index.html, care ar fi dus la info.html, ar fi avut următorul aspect:
Este clar că fiecare link absolut, imediat după postarea site-ului pe server, ar fi trebuit să se modifice (deoarece pe server nu există partiţia D a harddiskului), în timp ce linkul relativ ar fi funcţionat normal, fără modificări. În acest context, imaginaţi-vă că aveţi mai multe sute sau mii de linkuri pe site şi câte probleme ar fi apărut dacă s-ar fi utilizat linkurile absolute. Linkurile relative în raport cu folderul root al site-ului Există şi linkuri care funcţionează precum cele relative, dar direcționează browser-ele să înceapă căutarea unei căi, începând de la nivelul root al site-ului. Pentru a scrie o astfel de cale, vom adăuga un forward slash în fața primului folder sau în fața numelui fișierului, ca în următorul exemplu: 1link Observaţi că am adăugat semnul / (forward slash) imediat după deschiderea atributului href. Aceste linkuri nu funcționează fără servere configurate corect.
Linkurile către fişiere Linkurile către fișiere se inserează în mod identic ca şi cele către paginile HTML din exemplele anterioare. Deci, un link către un fișier example.pdf arată astfel: 1link 2link
Linkurile de e-mail Există şi linkuri de e-mail care direcţionează spre adrese de e-mail. Este interesant că, în loc să deschidă o pagină, ele deschid programul de e-mail implicit al vizitatorilor paginii. Dacă acesta este, de exemplu, Microsoft Outlook, linkul va porni clientul de e-mail menționat, va deschide fereastra de dialog pentru noul e-mail și va introduce adresa pe care am specificat-o în câmpul to: . Totuşi, pot apărea probleme în cazul în care vizitatorul nu are setat un program de e-mail. Linkurile de e-mail se inserează astfel: 1email link
53
Observăm că singura diferență în raport cu linkurile anterioare este cuvântul-cheie mailto , urmat de respectiva adresă de e-mail. Dacă vrem, putem predefini şi titlul (subject) și/sau conținutul (body) e-mailului. Facem acest lucru adăugând semnul ? , urmat de cuvântul-cheie subject sau body, semnul egal, precum şi textul propriu-zis. Dacă adăugăm şi un alt parametru, atunci în loc de semnul ? punem &. Iată un exemplu: 1email link Aceste detalii nu înseamnă că utilizatorul nu va putea să schimbe mai târziu textul predefinit, ci doar reprezintă punctul de plecare pentru e-mail. Totuşi, astăzi linkurile de e-mail se folosesc tot mai rar, fiindcă pot crea confuzii pentru utilizatori şi astfel îşi pierd utilitatea. Linkul se inserează, în general, ca un simplu text sau textul linkului de e-mail se transformă într-o imagine (pentru ca utilizatorii/programele maliţioase să nu poată copia linkul şi să-l folosească pentru spam).
Named anchors (Ancorele denumite) Named anchors se folosesc atunci când vrem ca linkul să direcţioneze spre o parte exactă a paginii. În anumite cazuri, o pagină poate avea un conținut care necesită mult derularea (scroll) pe verticală pentru a găsi un anumit detaliu. Putem plasa named anchors oriunde pe pagină şi apoi setăm un link la ele, la secţiunea respectivă de pe pagină. De exemplu, Wikipedia (www.wikipedia.org) utilizează named anchors pentru a conecta anumite intrări de text cu referinţe aflate în partea de jos a paginii. Pentru fiecare referinţă este setat un named anchor, apoi sunt legate de intrările în text.
54
Imaginea 6.4 - Prezentarea unui Named anchor în Wikipedia Pentru a posta ancora, introducem tag-ul , dar, deoarece ancora nu este un link, nu duce nicăieri, ci doar indică locul respectiv, nu are un atribut href și nici conţinut. De exemplu: 1 Aceasta este doar o parte a procesului. Am setat un Named anchor care are un nume și nu este vizibilă în browser. Acum, ne rămâne să legăm această ancoră de aceeași pagină sau de o altă pagină. De exemplu, dacă vrem să legăm o ancoră de aceeași pagină, vom adăuga: 1link Pe de altă parte, dacă vrem să ne legăm de ancora de pe o altă pagină, vom adăuga: 1link Deci, un link clasic cu adăugarea unui Named anchor precedat de semnul #.
Imaginile Imaginile reprezintă o parte indispensabilă a site-urilor web moderne. Se spune că o imagine spune mai mult decât o mie de cuvinte, lucru adevărat cel puțin în cazul designului web. Era site-urilor simple a apus de mult. Înainte de a explica modul de introducere şi setare a imaginilor pe paginile noastre HTML, trebuie să facem o pauză și să clarificăm câteva detalii. Fiecare imagine pe care vrem să o postăm trebuie să fie pregătită pentru internet. Practica de a posta pe paginile noastre fotografii direct dintr-un aparat digital sau de pe internet nu este bună deloc.
55
Imaginile trebuie să aibă formatul adecvat Există doar trei formate de imagini pe care le putem utiliza astăzi pe paginile web. Acestea sunt JPG, GIF şi PNG. JPG (Joint Photographic Experts Group) foloseşte extensia .jpg sau .jpeg. Acest format nu suportă nici transparența (engl. Transparency), nici animația, dar este excelent pentru comprimarea fotografiilor, deoarece suportă milioane de culori. În programele de procesare a imaginilor, putem alege nivelul tolerat de degradare a calității în schimbul unei dimensiuni mai mici a fișierului. De fiecare dată când salvăm, se pierd anumite informaţii şi de aceea este recomandat să salvăm separat imaginile originalele. GIF (Graphics Interchange Format) este limitat la 256 de culori. GIF-urile sunt excelente pentru desene tehnice și pentru imagini mici (iconițe, thumbnails etc). GIF-urile pot memora 2, 4, 16 până la 256 de culori, așadar putem salva mult din dimensiune în momentul în care creăm fișierele. Fișierele GIF se comprimă pe orizontală, respectiv, dacă pixelul unei imagini GIF are o variație mică de culori în direcția orizontală, este mult mai ușor de redimensionat. Formatul GIF suportă transparența (cu multe restricții) și animația, ceea ce înseamnă că putem crea efectul de mişcare etc. În fazele inițiale ale dezvoltării animației pe internet, animațiile GIF se utilizau frecvent, chiar și atunci când nu erau absolut necesare. Astăzi, se folosesc tot mai puţin. PNG (Portable Network Graphic) este un format mai nou suportat de către toate browserele actuale și combină funcţionalitățile formatelor GIF și JPEG. Acest format raster pentru imagini foloseşte comprimarea fără pierderi. Utilizează RGB și sistemul de culori în tonurile gri. Există două tipuri de formate:
PNG-8, care conține informația pe 8 biți despre culori (asemănător cu GIF); PNG-24, care conține informația pe 24 de biţi despre culori (combină cele mai bune aspecte ale formatelor GIF și JPG).
PNG-8 nu suportă animația, dar suportă transparența mult mai bine decât GIF, în timp ce PNG-24 suportă o transparență şi mai bună şi oferă o calitate a imaginii mai bună decât JPG. Totuşi, fişierele PNG sunt mult mai mari, iar browser-ele mai vechi nu se descurcă prea bine cu ele (de exemplu, Internet Explorer 6 nu suportă PNG transparent). Dacă rezumăm toate cele trei tipuri, ajungem la următoarele concluzii:
JPG este cel mai bun pentru fotografii și imagini cu multe detalii; GIF este cel mai bun pentru imagini mici şi iconiţe; PNG combină cele mai bune aspecte ale formatelor GIF și JPG, dar în detrimentul dimensiunii fișierelor. Nu este suportat de browser-ele vechi, deşi încet, încet acest lucru devine irelevant, deoarece Internet Explorer 6 se foloseşte tot mai puțin.
56
Imaginea trebuie să aibă rezoluţia şi dimensiunile corespunzătoare Toate site-urile se afișează pe monitoarele calculatoarelor și ale altor dispozitive mobile. Afișarea pe monitoare este compusă din mici puncte, numite pixeli (engl. pixels). Fiecare imagine este, de asemenea, compusă din pixeli, iar termenul de rezoluţie indică numărul de pixeli (puncte) per inch (dots per inch - dpi). Rezoluția standard în care majoritatea monitoarelor afişează site-urile este de 72 dpi, așa că imaginile ar trebui salvate întotdeauna la această rezoluție. În afară de rezoluție, trebuie să avem grijă şi de dimensiuni, adică de lățimea (engl. Width) și înălțimea (engl. Height) imaginilor. Dimensiunile trebuie să fie aceleași în care se va afişa şi imaginea pe pagină. Dacă dimensiunile și/sau rezoluția sunt foarte diferite în imagine față de ceea ce apare pe pagină, va avea loc o degradare a imaginii și o afişare de slabă calitate. De aceea, este important să reţinem că imaginile trebuie mai întâi pregătite în Adobe Photoshop sau într-un instrument similar și abia apoi importate în documentul HTML.
Pentru a utiliza o imagine, trebuie să avem dreptul Deși acest aspect nu ține de partea tehnică și nu este strict legat de subiectul acestui curs, este, totuși, un aspect foarte important, adesea neglijat. Fiecare imagine este supusă legii drepturilor de autor/copyright și are întotdeauna un autor. Obligatoriu, trebuie să verificaţi în ce condiții şi sub ce licență a fost publicată acea lucrare și dacă aveți dreptul să o folosiţi. O greșeală frecventă a începătorilor este să caute pe Google images și să copieze imaginile direct, ceea ce, în majoritatea cazurilor, reprezintă o încălcare a drepturilor unui anumit autor. Deci, întotdeauna verificați licenţa imaginii și dacă vă este permis să o utilizaţi1. Pe de altă parte, există și site-uri specializate de distribuire a imaginilor, cum ar fi iStockPhoto, Fotolia, gettyimages, sxc.hu etc. Pentru majoritatea imaginilor, trebuie să plătiți, dar există şi imagini gratuite dacă aveți un buget limitat.
Organizarea structurii fişierelor Spre deosebire de multe fișiere utilizate în prezent, paginile HTML nu salvează fișierele cu imagini direct în fișierul HTML. De exemplu, dacă în Microsoft Word introducem un anumit text și câteva imagini, când le salvăm obținem un fișier doc. Dacă trimitem acel fișier unui prieten şi el îl deschide pe calculatorul său, textul şi imaginile vor fi acolo, deci se încarcă din fișier. În schimb, dacă introducem text și câteva imagini într-un document HTML, după ce îl salvăm obţinem un fișier HTML, în care imaginile nu sunt încorporate. Dacă am trimite acum fișierul HTML unui prieten, când îl va deschide pe calculatorul lui va vedea numai textul și un spațiu gol, fără imagini. Fișierul HTML a salvat pozițiile imaginilor, dimensiunile lor și a încercat să le afișeze, dar nu lea găsit deoarece nu fac parte din fișierul HTML şi nu au fost trimise niciodată. De aceea, este foarte important să organizăm structura site-ului într-un mod corespunzător. În lecțiile precedente, am menționat folderul root (principal) al site-ului. Vă recomandăm ca în cadrul
57
lui să creați un subfolder numit images sau un nume asemănător și să stocați toate imaginile acolo. Dacă site-ul este mare, cu multe materiale diferite, puteți să ramificați folderul în continuare. Ca şi în cazul linkurilor despre care am vorbit mai devreme, la fel şi imaginile pot fi apelate pentru a fi afișate fie printr-o cale absolută, fie printr-o cale relativă, dar imaginile ar trebui postate întotdeauna prin intermediul căilor relative. Dacă inserăm toate imaginile în cadrul folderului root al site-ului și le apelăm prin intermediul căilor relative, nicio imagine nu poate să se piardă din greşeală atunci când o trimitem sau o postăm pe site. După cum am mai menţionat, în cazul în care copiem întotdeauna întregul folder root şi dat fiind că sunt căile relative, totul va fi în regulă.
Adăugarea imaginilor Pentru a adăuga imagini pe o pagină HTML, folosim tag-ul . Acest tag este cu autoînchidere, respectiv nu are nici început și nici sfârșit, dar trebuie să conțină următoarele două atribute:
Src indică URL-ul din care se apelează imaginea (imaginea este întotdeauna în afara fişierului HTML);
Alt defineşte textul care va fi afișat vizitatorului site-ului dacă, indiferent de motiv, imaginea nu este afişată. În acest caz, textul menţionat va apărea în locul prevăzut pentru imagine. Totuşi, acesta nu ar trebui să descrie imaginea literal, ci doar să dea niște informații legate de scopul ei. De exemplu, textul alt al imaginii de avertizare nu ar trebui să fie: „Triunghi galben cu cadru negru și semn de exclamare”, ci „Avertizare!” sau ceva asemănător. Chiar și motoarele de căutare precum Google folosesc pentru indexare textul alt. Conform standardelor W3C, textul alt este obligatoriu pe o imagine.
Imaginea 7.1 - Reprezentarea tag-ului img în codul HTML cu atributele de bază Tag-ul din exemplu va apela imaginea image.jpg (A) din același folder în care se află şi fișierul HTML în sine. Dacă imaginea nu apare, în caseta goală va fi scris Alt text (B). Atenţie la faptul că tag-urile cu autoînchidere se scriu diferit în variantele HTML5 şi xHTML, aşadar diferă şi scrierea imaginilor, respectiv a tag-urilor img. În versiunea HTML5, scriem:
58
în timp ce în varianta xHTML scriem următoarele: În varianta xHTML, trebuie să avem un spaţiu gol şi o linie oblică în dreapta înainte de semnul mai mare. Varianta HTML5 ar fi acceptat ambele moduri de scriere, în timp ce o situaţie inversă nu ar fi fost posibilă.
Atributele opţionale ale tag-ului img:
Title – putem folosi acest atribut dacă vrem să introducem informații suplimentare despre o imagine. Majoritatea browser-elor moderne afișează textul ca un tooltip atunci când stăm cu mouse-ul deasupra imaginii. Width şi Height – lăţimea şi înălţimea imaginii în pixeli. Dacă nu sunt setate aceste atribute, browser-ul va încărca valorile din fișierul imaginii. În cazul în care sunt introduse, atributele ar trebui să reflecte starea reală, respectiv dacă avem o imagine logo.png cu înălţimea de 120 px (pixeli) și lăţimea de 300 px, tag-ul img ar putea arăta astfel în codul HTML: src=”logo.png”
alt=”Nume
companie”
width=”300”
height=”120”>
Într-un tag HTML, ordinea atributelor nu este importantă. Acest lucru se aplică şi la img, dar şi la alte tag-uri.
Align s-a utilizat pentru poziționarea imaginilor în raport cu elementele din jur. În propoziţia precedentă, am folosit timpul trecut deoarece acest atribut nu este recomandat în HTML5, dar şi în versiunile mai vechi ale limbajului HTML/xHTML. În locul lui vă recomandăm să utilizați regulile CSS de poziţionare. Deoarece imaginile sunt elemente inline (vom aborda acest subiect în curs), dacă le plasăm în interiorul unui paragraf, se vor comporta drept caractere ale textului conform setărilor implicite. Valorile standard ale acestui atribut sunt bottom, left, middle, right și top și alte câteva. Comportamentul lor se poate observa în imaginea de mai jos:
59
Imaginea 7.2 - Atributul align
Tabelele Structura tabelului Există mai multe tipuri de date care sunt mai uşor de reprezentat sub formă de tabel decât sub formă de text. De exemplu, rezultatele sportive, rapoartele financiare, orarele şi multe alte informaţii de pe site-uri sunt mai uşor de reprezentat prin tabele.
60
Tabelele trebuie utilizate pentru structurarea tabelară a datelor şi nu trebuie folosite greșit în vederea organizării elementelor, indiferent că este vorba de o pagină întreagă sau doar de o parte a acesteia. După cum deja ştim că fiecare parte a unei pagini HTML este, în esenţă, un text structurat într-un anumit mod, la fel şi tabelele respectă anumite reguli stricte. În limbajul HTML, tabelele sunt alcătuite din celule, pe care le marcăm cu td (table data), şi din rânduri, pe care le marcăm cu tr (table row) - acestea sunt conținute în cadrul tag-ului table, care înconjoară totul. Dacă sunteți obișnuiți să lucraţi în Microsoft Excel sau într-un program similar, vă veţi întreba poate unde se află coloanele şi cum sunt marcate. Totuşi, în limbajul HTML nu există termenul de coloană, ci toate celulele (td) sunt aranjate în ordine şi separate pe rânduri (tr). Observați imaginea de mai jos pentru a înțelege mai bine:
Imaginea 8.1 - Afişarea structurii tabelului Aceasta este reprezentarea unui tabel cu trei rânduri şi patru coloane, în total 12 celule. În imagine, este marcată şi ordinea în care sunt aranjate celulele. Când scriem tabele în limbajul HTML, trebuie să respectăm următorii paşi: 1. Deschidem tag-ul table; 2. Deschidem rândul tabelului (tr);
61
3. 4. 5. 6.
Scriem toate celulele (td), în acest caz - patru; Închidem rândul actual (tr); Deschidem următorul rând (tr); Scriem toate celulele (td).
Şi aşa mai departe, până când trecem prin toate rândurile şi ajungem la sfârşitul tabelului, unde închidem tag-ul table. În cod, un astfel de tabel ar arăta astfel: 1 2 3
4
1
5
2
3
6
4
7
8
9
5
10
6
7
11
8
12
13
14
9
10
15
11
16
12
17
18
19 20 Dacă analizăm acest cod, observăm paşii menţionaţi mai devreme. Mai întâi, am deschis tagul table şi imediat după el am deschis rândul tabelului (tag-ul tr). În cadrul lui, se află celulele în tag-urile lor (td). Apoi, închidem primul rând şi începem următorul. După el scriem al treilea rând, urmat de sfârşitul tabelului. Dacă trebuie să lăsăm o celulă goală (fără conţinut), totuși trebuie să scriem tag-ul td. În acest caz, codul creează un tabel foarte simplu, fără niciun fel de detalii vizuale. Nici tabelul în sine nu se vede, ci doar elementele din cadrul lui. Tabelele şi elementele acestora se pot stiliza prin limbajul CSS, care este, cu siguranţă, cea mai bună variantă, iar în HTML5 aceasta este singura variantă validă. În trecut, în versiunea xHTML puteam să folosim şi atribute în tabele, rânduri, dar şi în celule. Deşi acum sunt depăşite, fiind înlocuite de CSS, următoarele atribute pot fi postate pentru un tabel:
62
Atribut align
bgcolor
Valoare left center right rgb(x,x,x)
Descriere Alinierea tabelului
Culoarea fundalului
#xxxxxx numele culorii pixeli border cellpadding pixeli cellspacing pixeli void frame above below hsides lhs rhs vsides box border none rules groups rows cols all summary text pixeli width %
Grosimea liniei tabelului Spaţiul dintre conţinutul celulelor şi marginile lor Spaţiul dintre celule Defineşte marginile exterioare vizibile.
Defineşte marginile interioare vizibile.
Text care descrie, rezumă conţinutul tabelului. Lăţimea tabelului
Tabelul 8.1 Menţionăm, încă o dată, că aceste atribute sunt date doar informativ. Stilizarea tabelului o vom face prin CSS.
Celulele titlurilor Așa cum există tag-uri p pentru paragrafe, există şi tag-uri h pentru titluri și, în mod analog, pe lângă celulele obişnuite, există şi celule pentru titluri. În loc de td, tag-ul lor este th (table heading).
63
Priviți exemplul: 1 2 3
4
*
5
monday
6
tuesday
7
wednesday
8
thursday
friday
9
10
11
morning
12
13
14
15
16
17
evening
18
19
20
21
22
23
24
25 26 Celulele th sunt plasate pe primul rând şi în prima coloană. Atenţie la faptul că în tag-ul table sunt adăugate atribute pentru lăţimea (600px) şi pentru grosimea liniilor marginilor/border (1px). Întrun browser, acesta ar arăta astfel:
Imaginea 8.2 - Afișarea tabelului în browser Dacă mai devreme am spus că trebuie evitate atributele în codul din HTML5, de ce le-am inserat totuşi? Le-am inserat pentru a putea să afişăm tabelul, deoarece încă nu am abordat stilizarea CSS. Pe de altă parte, dacă aveţi nevoie de aceste atribute, le puteţi insera în HTML5. Browser-ul le va interpreta şi afişa în mod normal, deoarece îi sunt cunoscute din versiunile anterioare ale lui HTML, însă codul nu va fi unul valid.
64
Atributele td Unirea pe orizontală Dacă trebuie să unim anumite celule ale tabelului pe orizontală, pe prima celulă care trebuie unită vom pune atributul colspan, în care definim peste câte celule trebuie să se extindă. Imaginaţi-vă că celulele rămân întotdeauna separate, iar celula unită se extinde peste câteva astfel de celule. De aceea, trebuie să numărăm câte celule vor fi acoperite şi să introducem acest număr ca valoare a atributului colspan. De asemenea, eliminăm atributele td (sau th), care sunt în plus. De exemplu, priviți acest cod: 1 2
3
1
4
2
5
3
6
7
4
8
5
9
6
10
11
12 care va crea următorul tabel: 1 4
2 5
3 6
Însă, dacă vrem să unim celulele 4 şi 5, atunci trebuie să adăugăm atributul colspan cu valoarea 2 (deoarece unim două celule) și, de asemenea, trebuie să eliminăm întregul tag td al celulei 5. Codul va arăta astfel: 1
2
1
3
2
4
3
5
6
4
7
6
8
65
9
<span style="font-size: 14px;"> 10 11 1 2 3
4
6
Astfel, am specificat celulei 4 să acopere şi celula 5 și, practic, arată ca două tag-uri td. Fiecare rând dintr-un anumit tabel (tr) trebuie să aibă acelaşi număr de tag-uri td (sau th), excepţie făcând cazul în care utilizăm colspan, însă totalul trebuie să fie exact. Conţinutul tag-ului td care dispare trebuie transferat manual în celelalte tag-uri. Unirea pe verticală Dacă vrem să unim celulele pe verticală, utilizăm o tehnică similară celei prin care realizăm unirea pe orizontală, numai că în acest caz atributul este rowspan, în loc de colspan. Priviți exemplul: 1 2
3
1
4
2
5
3
6
7
4
8
5
9
6
10
11
12 Acest cod afişează următorul tabel: 1 4 Dacă schimbăm codul astfel: 1
2
1
3
2
2 5
3 6
66
3
4
5
6
5
7
6
8 9
10 11
obţinem următorul tabel: 1
2 5
3 6
Cele mai frecvente atribute din celule (xHTML) Cele mai frecvente atribute care apar în celule sunt align, respectiv valign. Cu ajutorul lor, putem adăuga alinierea pe orizontală (align), respectiv alinierea pe verticală (valign). De exemplu, putem scrie: 1... 2
3
4... Align poate avea valorile left, right şi center. După cum ne spun şi denumirile lor, se aliniază conţinutul la stânga, la dreapta sau în centrul/mijlocul celulei. Valign poate avea valorile: top, middle, bottom şi baseline. Denumirile lor ne spun unde va fi plasat conţinutul în cadrul celulei. Top plasează conţinutul în partea de sus a celulei, middle în mijloc, în timp ce bottom şi baseline au o menire aproape similară. În ce constă diferenţa? În faptul că bottom plasează întregul conţinut în partea de jos a celulei, în timp ce baseline plasează aceeaşi linie de bază imaginară, iar conţinutul este așezat pe ea. Baseline poate fi util dacă avem mai multe celule cu fonturi de diferite dimensiuni. Mai jos, avem următoarele imagini care ilustrează cele explicate:
Imaginea 8.3 - Valoarea Bottom a atributului valign
67
Imaginea 8.4 - Valoarea Baseline a atributului valign
Alte atribute Există şi alte atribute care pot fi utilizate în tag-urile (celulele) td, însă, practic, acestea sunt depășite. În HTML5, sunt chiar interzise. Totuşi, tot ce făceam cu ele în trecut putem face astăzi cu ajutorul regulilor CSS într-un mod mult mai simplu. Toate atributele tag-urilor td se găsesc la următorul link: http://www.w3schools.com/tags/tag_td.asp Avem o situaţie similară şi în cazul atributelor de pe rândurile tabelului (tr). Astăzi, nu se mai utilizează. Mai multe informaţii găsim la următorul link: http://www.w3schools.com/tags/tag_td.asp
Tabelele lungi Dacă avem nevoie de tabele foarte lungi sau complicate, putem ramifica părțile head, body şi footer ale tabelului. Termenii ne reamintesc de anumite părţi ale documentului HTML, însă similitudinea nu este foarte mare. Tag-ul se foloseşte pentru a marca antetele tabelului. Se introduc rândurile (tr), care alcătuiesc antetul. Acest tag merge la început. Tag-ul
se foloseşte pentru a introduce rândurile şi celulele obișnuite. Tag-ul se foloseşte pentru a marca partea de jos a tabelului. Se introduc rândurile şi celulele care merg la sfârşit. În general, browser-ele tratează toate cele trei părţi, respectiv celulele din cadrul lor, în acelaşi mod. Totuşi, separarea lor permite o stilizare diferită cu CSS. Pe lângă asta, se poate întâmpla uneori ca soluţiile CMS să separe partea head şi footer, pentru a le afișa întotdeauna. De asemenea, la tipărire, majoritatea browser-elor repetă head (antetul) şi footer (subsolul) pe fiecare pagină pentru o mai mare claritate. Iată cum arată în cod: 1 2 3
celula părţii head
68
4
5
celula părţii head
6
7 8
9
celula părţii footer
10
11
12
celula părţii footer
13 14 15
16
celula părţii body
17
18
celula părţii body
19
20 21
<span style="font-size: 14px;"> 22 23 24 25 26 Atenţie la ordinea tag-urilor! Ordinea este întotdeauna următoarea:
1. thead 2. tfoot 3. tbody Deşi poate părea mai logic ca mai întâi să inserăm conţinutul (tbody) şi apoi partea de jos a tabelului (tfoot), nu este cazul. Mai întâi, se inserează antetul, apoi partea de jos şi abia la sfârşit conţinutul. Indiferent de ordinea din cod, în reprezentarea din browser subsolul/footerul (tfoot) se va găsi întotdeauna în partea de jos a paginii (după tbody).
Prin urmare, este suficient să punem thead, tbody, respectiv tfoot în jurul tuturor rândurilor pe care vrem să le separăm. De reţinut este că trebuie să cuprindem rândul/rânduri întregi, adică mare atenţie la suprapunerea tag-urilor. De asemenea, dacă introducem aceste tag-uri suplimentare ale tabelului, trebuie să includem și toate rândurile (să nu rămână niciunul în exterior).
69
Formularele În cadrul acestei lecţii, ne vom familiariza cu formularele HTML şi vom face o comparaţie între formularele offline şi cele online.
Noţiunea de formulare HTML Formularele (engl. forms) reprezintă un instrument excelent pentru colectarea informaţiilor de la vizitatorii unui site web. Formularele permit utilizatorilor să trimită comentarii şi întrebări, să caute o anumită informaţie, să se înscrie pentru newsletter, să completeze aplicaţia online sau să introducă informaţii care înlesnesc cumpărarea unui produs. În cadrul acestei lecţii, ne vom familiariza cu formularele şi cu modul de introducere a acestora în pagină. Inițial, termenul de formular era utilizat pentru documentul tipărit, care conţinea câmpuri (spaţii goale) pentru introducerea datelor. Internetul a preluat acest concept şi a modificat formularele ca să funcționeze în mod digital.
Imaginea 9.1 - Exemplu de formulare clasice Sursa: http://en.wikipedia.org/wiki/File:Mantelb%C3%B6gen.JPG
70
Probabil cel mai cunoscut formular de pe web este cel de pe pagina de start a lui Google:
Imaginea 9.2 - Formularul de pe pagina de start a lui Google Formularul din imagine este cunoscut tuturor, deși este foarte simplu. Cu ajutorul acestui formular, introducem textul (cuvintele de căutare) într-un câmp text input, iar apoi, dând clic pe butonul submit (etichetat ca Google Search), transmitem datele.
Bazele formularelor Formularele în sine nu au nicio funcţionalitate, ci reprezintă doar un tip de şablon pentru colectarea informaţiilor. Când utilizatorul completează un formular de pe un site, datele colectate sunt transmise până la script-urile de pe o altă pagină, care va finaliza activitatea de colectare a datelor.
Imaginea 9.3 - Conceptul de funcţionare a formularului
71
Să exemplificăm toate acestea. Pagina contact.html conţine un formular în care utilizatorul introduce datele şi un mesaj. După ce utilizatorul trimite formularul, acesta apelează pagina contact_send.php, pe care se află un script, care procesează datele colectate şi le trimite prin email la adresa indicată. Acesta este doar un exemplu, script-ul poate trimite e-mailuri, poate scrie/citi datele din bază sau poate face alte lucruri definite. În acest exemplu, nu ne vom ocupa cu script-uri concrete. În general, acestea se scriu şi inserează prin limbajul PHP, care nu intră în tematica acestui curs, ci în cea a programării web. Noi ne vom ocupa de partea de HTML şi CSS, care ne vor ajuta să inserăm şi să stilizăm formulare. Pe de altă parte, chiar dacă nu cunoaşteţi limbajul PHP, pe internet se pot găsi diferite formulare PHP finalizate deja, care trebuie doar încorporate în HTML.
Tag-ul form Baza formularului web este tag-ul form. Acesta este doar un simplu element HTML cu atribute şi subelemente caracteristice. Astfel, în el introducem tot ceea ce vrem să trimitem serverului prin formularul respectiv. Fiecare formular (tag form) recunoaşte evenimentul submit. Acesta activează formularul şi transferă valorile acestuia către server. Să o luăm de la început. Tag-ul se scrie foarte simplu: 1 Totuşi, acest lucru nu este suficient pentru început. Fiecare formular trebuie să aibă următoarele atribute:
Action; Method; ID.
Putem adăuga name, enctype şi target. Deşi atributele menţionate nu sunt obligatorii în HTML5 (Action este obligatoriu în versiunile anterioare), fără acestea formularul nu ar fi avut sens. Action Fiecare formular conţine atributul action care indică script-urile la care vor fi transferate datele. În exemplul de mai sus, era vorba de pagina contact_send.php. Observăm că pagina-ţintă este de tip .php. Acest lucru este frecvent (.php, .asp, .jsp) deoarece procesarea parametrilor de server se poate efectua doar din script-urile de pe server. În cazul în care nu vrem să transmitem parametri către server, nu avem nevoie de formular.
72
Dacă omitem acest atribut, browser-ul va subînţelege că aceeaşi pagină care conține formularul va procesa și datele.
Method Atributul method defineşte modul în care vor fi transmise datele. Există două opţiuni, şi anume:
metoda GET - datele din formular sunt trimise serverului printr-un URL. Informaţiile transmise în acest mod sunt transparente şi supuse atacurilor din partea hackerilor. Deoarece un URL poate avea cel mult 8 192 de caractere, această metodă nu este adecvată pentru formulare mai lungi. De asemenea, putem ajunge la transliteraţie sau transcripţie, iar unele caractere se pot modifica sau pierde pe parcurs. metoda POST - această metodă împachetează datele formularului în cadrul cererii HTTP. Datele nu sunt codificate şi de aceea (deşi sunt mai sigure decât în cazul metodei GET) sunt supuse atacurilor din partea hackerilor. Aşadar, în cazul în care colectăm informaţii personale, precum nume de utilizator, parole sau numere de carduri de credit, trebuie să asigurăm o conexiune mai sigură până la un server sigur.
Name şi ID ID-ul se foloseşte pentru determinarea unică a elementului HTML pe o pagină în Document Object Model (prin JavaScript sau pentru stilizare prin CSS). ID-ul trebuie să fie unic. Name determină numele formularului. Este transmis serverului. Vă recomandăm să adăugați ambele atribute de la început. Ele pot avea aceeaşi valoare, ceea ce este, de asemenea, recomandat.
Enctype Atributul enctype determină cum vor fi codate (encoded) datele în momentul trimiterii către server. Valoarea implicită a acestui atribut este application/x-www-form-urlencoded. Nu trebuie să-l scriem sau să avem grijă de el. Ceea ce ne interesează este ca, în cazul în care vrem să încărcăm fişiere, enctype să aibă valoarea: multipart/form-data.
Target
73
Acest atribut este același ca și în cazul linkurilor. Am analizat detaliile în lecţia 6. Totul este identic, cu excepția faptului că în cazul linkurilor se deschide o pagină, iar la formular se deschide pagina/script-ul din atributul action. Dacă îl folosim pe formular, de obicei utilizăm valoarea _blank , deoarece astfel îi transmitem formularului că trebuie să deschidă script-ul din atributul action într-un nou tab sau într-o nouă fereastră (în funcţie de browser).
Inserarea unui formular Având în vedere toate cele menţionate mai sus, codul formularului nostru poate avea aspectul următor: action="script" method="post" name="formular_exemplu" 1
Astfel, am completat elementul de bază form. Dacă vrem să încărcăm fişiere prin formular şi/sau să deschidem formularul trimis într-un nou tab, vom introduce şi celelalte două atribute: action="script" method="post" name="formular_exemplu" 1<span style="font-size: 14px; text-align: justify;">
Deşi am introdus toate aceste elemente, avem doar cadrul gol al formularului, care nu înseamnă nimic. Trebuie să introducem și controalele formularului, care vor colecta datele.
Controalele formularului Controalele din formular sunt responsabile pentru colectarea şi trimiterea datelor. Acestea pot fi butoane de tip text, radio sau de bifare etc. În continuarea lecţiei, ne vom familiariza cu acestea. Input (text)
Tag-ul pe care îl întâlnim cel mai des în formulare este . Acesta este un tag cu autoînchidere, deoarece toţi parametrii lui sunt setați prin atribute. Acelaşi tag se foloseşte pentru mai multe controale diferite, însă este determinat de atributul type obligatoriu. Prin urmare, dacă vrem să introducem un câmp text simplu, vom introduce tag-ul input cu atributul type="text": 1
74
În exemplul codului, se poate vedea că am scris atributul type, precum şi atributul name, care este important pentru script-ul care primeşte datele. Prin atributul name, script-ul va şti cum să clasifice data. De asemenea, am adăugat şi o valoare ID, deşi nu este obligatorie. Mai putem adăuga și atributul maxlength, cu care determinăm numărul maxim de caractere. De exemplu, dacă vrem să limităm numărul posibil de caractere la 4, vom adăuga maxlength="4". De asemenea, mai devreme s-a folosit şi atributul size, cu care am determinat lăţimea câmpului. Acum, pentru asta folosim regulile CSS. Codul introdus anterior ar fi afişat acest detaliu pe pagina browser-ului:
Imaginea 9.4 - Câmpul Input text afișat în browser Mai exact, codul care ar fi afişat câmpul de mai sus ar fi fost următorul: 1 2 Fără tag-ul label adăugat, s-ar fi afişat doar câmpul fără textul din stânga lui. Tag-ul label nu trebuie să se afle imediat înainte de tag-ul input, însă de cele mai multe ori îl găsim în această poziție. Important este faptul că label posedă atributul for, care îl leagă de un anumit input. Atributul for al tag-ului input trebuie să fie același ca şi atributul ID al tag-ului input (sau al unui alt tag). Ambele tag-uri, şi input, şi label, sunt, conform naturii lor, tag-uri inline. Input (password) Tag-ul input se foloseşte tot pentru introducerea parolei (password). În acest caz, atributul type este adăugat pe password. Toate celelalte atribute sunt la fel ca și în cazul textului input. 1 În browser, s-ar fi afişat următoarele:
Imaginea 9.5 - Câmpul pentru inserarea parolei Observați că textul nu este afișat lângă control, deoarece nu am adăugat tag-ul label. Totuşi, putem face acest lucru foarte simplu, dacă adăugăm tag-ul label cu atributul for="pass".
75
Acest tip de câmp input ascunde caracterele introduse, însă nu garantează siguranţa în timpul trimiterii datelor. Pentru aceasta, avem nevoie de un server configurat corect şi de script-uri scrise corect. Textarea Acest tag creează un câmp textual ceva mai mare, care poate susţine și mai multe rânduri de text. Spre deosebire de câmpul input, textarea nu este un tag cu autoînchidere, aşadar necesită un început şi un sfârşit. Între acestea, se introduce textul care se va afişa în control după încărcarea paginii. Dacă utilizatorul nu îl şterge, acesta va fi transmis împreună cu datele. Haideţi să vedem un exemplu:
În browser, s-ar fi afişat:
Imaginea 9.6 - Câmpul Textarea în browser În acest tip de control, nu introducem atributul type, deoarece textarea își stabilește singur rolul. În cod, vedem textul introdus între tag-ul iniţial şi cel final, care se afişează în câmp după încărcarea paginii. Poate veți observa pe unele pagini mai vechi atributele cols şi rows, în care sunt introduse valori numerice fără unităţi. Acestea s-au utilizat în trecut pentru a determina lăţimea (cols) şi înălţimea (rows) acestui control. La fel ca şi la input, astăzi efectuăm acest lucru utilizând CSS şi nu mai avem nevoie de ele. Radio buttons (Butoanele radio) Butonul radio este un control destul de diferit din punct de vedere vizual față de controalele menţionate mai devreme, însă şi acesta se bazează pe tag-ul input. Este puțin mai complicat de scris, dar haideţi să vedem un exemplu în browser:
Imaginea 9.7 – Controale radio în browser
76
Cu siguranță, ați întâlnit controale radio în formulare. Ceea ce le caracterizează este faptul că nu
trebuie să introducem valori, ci doar să selectăm una dintre opţiunile oferite (putem selecta doar una singură). Pentru fiecare selecție, trebuie să creăm un tag input separat. Pentru ca browser-ul să ştie că există mai multe tag-uri input diferite (de tip radio) grupate împreună, trebuie să le acordăm acelaşi nume în atributul name. De aceea, utilizatorului nu îi va fi permis să aleagă mai multe opțiuni. Dacă selectează una, toate celelalte se dezactivează. Atributul type menționat mai devreme trebuie adăugat valorii radio în controlul radio. Valoarea ID trebuie să fie diferită pentru fiecare input, indiferent dacă atributul name este identic. Atributul value reprezintă o noutate şi cu ajutorul lui transmitem valoarea pe care a selectat-o utilizatorul. În exemplele precedente, am trimis doar textul, respectiv parola, iar aici transmitem conţinutul atributului value al butonului radio selectat. Codul pentru acest exemplu ar arăta astfel: 1 3 4 5 6 7 8 9 10 11 12 Dacă vrem ca, pe măsură ce pagina se încarcă, să fie indicată o valoare, vom adăuga atributul checked="checked" pe tag-ul ei input. Valoarea este întotdeauna aceeaşi. Putem adăuga acest atribut doar pe un input radio din grup. Bineînţeles, am adăugat şi tag-uri label, pentru a face deosebirea între butoanele radio. Aici se află şi câteva tag-uri br, care separă rândurile, deoarece toate elementele de aici sunt inline.
Câmpurile Checkbox Acest control este foarte similar cu controlul radio, însă se deosebeşte prin faptul că utilizatorul poate selecta mai multe valori în acelaşi grup. Să vedem exemplul din browser:
77
Imaginea 9.8 - Controale Checkbox în browser În timp ce codul ar fi următorul: 1 3 4 5 6 7 8 9 10 11 12 După cum putem vedea, totul este identic, doar atributul type este modificat. Astfel, am activat alegerea multiplă, unde valorile nu se anulează reciproc. Restul rămâne la fel ca în cazul butoanelor radio. Select (dropdown) Acest control permite utilizatorului să selecteze o valoare din meniul dropdown (derulant):
Imaginea 9.9 - Control dropdown activat în browser Se bazează pe tag-ul select, care conţine deja bine cunoscutele atribute name şi id. În cadrul tagului select menţionat, se află mai multe tag-uri option, în care introducem posibilele valori: 1<select name="country" id="country"> 2 3 4 5
78
6 7 Fiecare opțiune (option) este o valoare şi ca atare trebuie să conţină atributul value, deoarece asta transmitem serverului, respectiv script-urilor. La fel ca şi unele controale anterioare, putem alege valoarea care trebuie selectată în momentul încărcării paginii. În acest caz, putem adăuga atributul şi valoarea selected="selected" la opţiunea dorită (în exemplu, a fost adăugată celei de-a doua opţiuni - "Romania"). De asemenea, putem adăuga și tag-ul label dacă vrem şi îl putem lega de atributul for prin nume (name).
Elementul select Controlul select menţionat poate fi schimbat dacă tag-ului select îi adăugăm atributul size, iar ca valoare introducem un număr. Valoarea acestui număr determină înălţimea controlului şi numărul de opţiuni care vor fi afișate. Pentru a înţelege mai bine, observăm exemplul de mai jos:
Imaginea 9.10 - Select cu atributul size 3 În acest exemplu, în cod am adăugat size="3". Acum, nu mai este un meniu derulant, ci un câmp care afişează mai multe valori. Dacă numărul size este mai mic decât valorile disponibile, în partea dreaptă va apărea un scroll bar/bară de derulare (aici este dezactivată). Haideţi să vedem următorul cod: 1<select name="country" id="country" size="3"> 2 3 4 5 6 7 De asemenea, putem să activăm şi alegerea mai multor valori prin adăugarea atributului multiple="multiple". Pentru ca selectarea multiplă să funcționeze, este necesar şi un atribut size (într-un meniu derulant, nu poate exista selectare multiplă). Codul arată astfel: 1<select name="country" id="country" size="3" multiple="multiple">
79
2 3 4 5 6 7 Astfel, am permis selectarea mai multor opţiuni, cu condiția ca utilizatorul să țină apăsată tasta Control de pe tastatură (Ctrl), respectiv tasta Command (⌘) de pe tastatura calculatoarelor Mac, în timp ce efectuează selectarea multiplă. De aceea, trebuie să existe şi o notă, instrucţiune în acest sens, deoarece majoritatea utilizatorilor nu vor ști despre ce este vorba. În plus, uneori browser-ele au dificultăți cu un astfel de control select. Testaţi-l obligatoriu în toate browser-ele. Încărcarea fişierului Controlul care asigură încărcarea fişierelor prin intermediul formularelor este din nou input type, însă cu file type (type="file"): 1 În browser, se afişează următoarele:
Imaginea 9.11 - Controlul pentru încărcarea fişierelor Dacă folosim acest control, formularul trebuie să aibă metoda setată la POST, precum şi un enctype corect (menţionat mai devreme). Acest control este specific prin faptul că nu permite stilizarea. Nu putem stiliza în niciun fel butonul, câmpul etc. cu regulile CSS, ci aceste detalii depind de browser-ul care afişează formularul.
Butonul submit Butonul submit, respectiv controlul submit, cum este mai corect, se foloseşte pentru a trimite formulare şi date introduse unui server, unde vor fi procesate. Din nou se foloseşte bine cunoscutul input, dar cu atributul type setat la submit: 1
80
Name şi ID nu sunt obligatorii aici. Value, pe de altă parte, defineşte ceea ce va fi scris pe butonul respectiv. Dacă nu îl introducem, în unele browser-e va apărea Submit Query:
Imaginea 9.12 - Butonul submit din exemplul nostru Dacă vrem, în loc de butonul obișnuit putem utiliza o imagine. În acest caz, trebuie setat atributul type="image". Atunci, pe atributul input sunt permise atributele src, width, height şi alt, astfel încât să se comporte ca o imagine. Controlul Button Un control ceva mai nou este controlul button. La acest control, folosim tag-ul , care poate cuprinde mai multe elemente, de exemplu text şi imagine: 1
4 Câmpul Hidden Deşi ideea unui câmp ascuns în formular poate părea contradictorie, un astfel de control este posibil şi se utilizează chiar foarte des. Câmpul ascuns, după cum îi spune numele, nu este vizibil utilizatorului, însă se poate utiliza pentru salvarea temporară a unor date. Când spunem că nu este vizibil, ne referim la faptul că nu este afişat direct în browser, însă este vizibil în codul-sursă (source code), aşadar nu trebuie să postăm date sensibile. Haideţi să vedem exemplul din cod: 1 Controlul se foloseşte, de obicei, pentru a scrie anumite date în el în timpul încărcării paginii și pentru a le trimite apoi script-urilor. De exemplu, imaginaţi-vă un formular pentru sugestii şi comentarii de pe un site care vinde produse. Dacă utilizatorul este logat atunci când formularul este deschis, site-ul îi poate afișa ID-ul din baza de date în câmpul ascuns, iar utilizatorul nu trebuie să vadă acest lucru pe pagină. Când utilizatorul lasă un mesaj şi trimite formularul, ID-ul este trimis și el, ceea ce poate facilita sortarea, monitorizarea şi procesarea în continuare. Fieldset şi legend Dacă vrem să încadrăm o parte din formular şi să-i adăugăm un anumit titlu, putem face acest lucru cu ajutorul tag-ului fieldset cu care încadrăm toate controalele pe care le selectăm. Putem adăuga tag-ul legend imediat după ce deschidem tag-ul fieldset. În continuare, avem următorul exemplu:
81
1 2 12 În browser, acesta ar arăta astfel:
Imaginea 9.13 – Fieldset şi legend într-un exemplu
Fieldset este, în mod implicit, un element block type. Dacă aţi fi analizat cu atenţie codul în acest exemplu, aţi fi observat că tag-urile label sunt scrise în jurul controlului, în acest caz input. Acesta este un alt mod de a adăuga labels/etichete, deşi vă recomandăm să le scrieți separat, utilizând atributul for.
Controalele HTML5 HTML5 şi validarea Cred că aţi observat până acum că unele formulare de pe web includ validarea. Acesta este un principiu conform căruia formularul este verificat în sensul datelor introduse, a tipului de date etc. Acest lucru se realiza până acum cu ajutorul unui JavaScript applet, care se executa pe pagină. Astfel, se evita angajarea inutilă a serverului în cazul în care formularul nu era completat corect.
82
Imaginea 9.14 - Exemplu de formular cu validare. Sursa imaginii: http://www.drupal.org/ Până acum, validarea era efectuată de JavaScript, însă, odată cu apariţia limbajului HTML5, aceste opțiuni sunt încorporate în HTML: 1 În momentul în care a fost conceput acest curs, doar anumite browser-e suportau această opţiune, însă în viitor numărul lor va crește cu siguranţă. Noi variante HTML5 de input Versiunea HTML5 a adus şi variante noi ale controlului input. Unele dintre acestea sunt:
câmpul textual de căutare (search) - type="search" ; câmpul pentru dată - type="date" ; câmpul pentru URL - type="url" ; câmpul pentru e-mail - type="email" .
Nu trebuie să le explicăm în detaliu, deoarece ele setează câmpul astfel încât acesta să fie pregătit pentru introducerea conţinutului corespunzător. Afişarea şi funcţionalitatea le sunt influenţate de capacitatea browser-ului de a le procesa. Folosiţi-le cu atenţie şi testaţi-le!
83
HTML5 placeholder O altă noutate este opţiunea placeholder, care asigură afişarea textului înainte de interacţiunea cu utilizatorul. De exemplu, în câmpul de căutare putem să introducem: „Search...” Acest cuvânt ar fi dispărut imediat după ce câmpul ar fi fost focalizat (când utilizatorul dă clic pe câmp şi începe să introducă date). Este suficient să adăugăm atributul placeholder cu cuvântul dorit sau cu o propoziţie ca valoare. În continuare, avem şi un exemplu: <span style="font-
1size: 14px;">
Informaţiile despre pagină În cadrul acestei lecţii, vom aborda meta tag-urile care definesc informaţii suplimentare despre pagină. De asemenea, vom analiza atributele ID şi CLASS, pe care le setăm pe tag-urile HTML în scopul conectării cu regulile CSS şi cu codul JavaScript.
Meta tags (Meta tag-urile) Tag-urile <meta> se inserează în partea head a paginii, iar rolul lor este să ofere informaţii suplimentare despre pagina pe care se află. Totuşi, aceste informaţii nu sunt vizibile utilizatorului la prima vedere. Deoarece se află în partea head a paginii, nu apar în browser. Aceste informaţii sunt utilizate doar de browser-e pentru o afişare corectă şi de motoarele de căutare (Google și altele) pentru indexarea paginilor. De exemplu, cu un meta tag putem să definim enconding-ul paginii, aspect important pentru browser în ceea ce priveşte afişarea corectă a textelor. Cu ajutorul acestor tag-uri, putem introduce şi descrierea paginii, pe care o va folosi Google în momentul indexării paginii. Tag-ul <meta> este unul cu autoînchidere, deci nu are început şi sfârşit, iar toate informaţiile se află în cadrul atributelor de pe tag. Este important de menţionat că pentru toate meta tag-urile se utilizează practic acelaşi tag <meta> -, însă cu atribute diferite. Totuşi, nu putem combina mai multe atribute diferite într-un rând. Trebuie să deschidem un tag <meta> nou. Pentru a clarifica acest lucru, vom analiza următorul exemplu: 1
2 3
<meta name="description" content="Exemplul paginii pentru meta tag-uri">
În exemplul de mai sus, vedem începutul unei pagini HTML. Mai întâi, este scris doctype, apoi tag-ul HTML, după care este deschis tag-ul head şi în el sunt adăugate câteva meta tag-uri. Au fost adăugate 3 meta tag-uri. Dacă se foloseşte acelaşi tag (<meta>), cele trei se deosebesc după valoarea atributului. De obicei, se folosesc două atribute în fiecare meta tag, acestea fiind name şi content. Primul determină tipul de informaţie, în timp ce al doilea conține informaţia. Există şi excepţii de la această regulă, despre care vom vorbi în continuarea lecţiei. Meta tag-ul Description
Acest meta tag defineşte descrierea paginii. De obicei, este utilizat de motorul de căutare pentru a înţelege despre ce este vorba în pagină. Uneori, apare în rezultatele căutării. Trebuie să aibă până la 155 de caractere. 1<meta name="description" content="Exemplul paginii pentru meta tag-uri">
Haideţi să vedem un exemplu! Dacă tastăm în Google Smashing magazine, vom obţine următorul rezultat:
85
Imaginea 10.1 - Afişarea rezultatelor în motorul de căutare Google pentru cuvintele-cheie Smashing magazine Haideţi să vedem sursa paginii (Ctrl+U) la http://www.smashingmagazine.com/:
Imaginea 10.2 - Afişarea codului HTML al paginii http://www.smashingmagazine.com/ Vedem că descrierea oferită de Google în rezultatele căutării a fost încărcată din meta tag-ul description al paginii.
Meta tag-ul Keywords Se foloseşte pentru a introduce cuvintele-cheie (engl. Keywords), care descriu pagina. În cadrul atributului, elementele sunt separate prin virgulă. În trecut, motoarele de căutare acordau mai multă atenţie cuvintelor-cheie, în timp ce astăzi acestea își pierd importanţa, fiind chiar recomandat să nu le folosim: 1<meta name="keywords" content="HTML, Meta, HTML5, xHTML, lectie">
Meta tag-ul Robots Acest meta tag indică motoarelor de căutare care indexează paginile (numiţi roboţi) cum să trateze pagina. Putem scrie noindex, dacă nu vrem ca pagina noastră să apară în rezultatele căutării (nu este recomandat). Astfel, Google, Bing şi alte motoare, pur şi simplu, vor ignora această pagină şi se vor comporta ca și când ea nici nu ar exista. A doua opţiune este nofollow, care indică faptul că pagina trebuie indexată, însă va neglija toate linkurile care se află pe ea. Dacă vă întrebaţi de ce
86
sunt atât de importante linkurile, vă răspundem: deoarece roboţii găsesc pagini noi prin linkurile de pe alte pagini, navigând fără întrerupere pe internet. De exemplu: 1<meta name="robots" content="nofollow">
Tag-ul Title Deşi nu face parte dintr-un meta tag real, tag-ul title al paginii este deseori inclus în această categorie (nu foloseşte meta, ci propriul său tag title). Ne-am întâlnit deja cu el la începutul cursului. În el, introducem titlul (title) paginii, care este foarte important pentru motoare de căutare precum Google, Bing şi altele: 1Titlul paginii
Opinia expertului SEO despre meta tag-uri Deoarece meta tag-urile influenţează cel mai mult aspectul optimizării site-ului nostru pentru motoarele de căutare (Search Engine Optimization), iată ce spun experţii SEO despre acest subiect: Meta tag-urile, care se află în antetul paginii HTML, poate nu au un rol important atunci când
utilizatorul vizualizează un site, însă funcţia lor capătă o importanţă foarte mare pe pagina cu rezultatele căutării. Prin urmare, prin introducerea cuvintelor-cheie în motorul de căutare şi prin listarea rezultatelor căutării, toate site-urile sunt prezentate prin trei elemente standard: titlu, o scurtă descriere şi adresele URL. Titlul afişat reprezintă, de fapt, conţinutul aflat în tag-ul Meta Title. Dacă Meta Title al nostru conţine cuvintele-cheie pe care le-a introdus utilizatorul, ele vor fi marcate cu un font bolduit, ceea ce va evidenţia site-ul nostru ca fiind o sursă relevantă de informaţii pentru utilizator. Cele mai bune rezultate se obțin folosind tag-ul Meta Title, cu o lungime totală de până la 70 de caractere şi cu un conţinut de cuvinte-cheie în forma în care utilizatorii le introduc în câmpul de căutare. Bineînţeles, motorul de căutare preia următorul principiu similar, conţinutul descrierii paginii din tag-ul Meta Description. Valoarea tag-ului Meta Description nu se află în cuvintele-cheie. De fapt, s-a confirmat faptul că pagina noastră nu va avea o poziţie mai bună dacă tag-ul Meta Description conţine cuvintele-cheie dorite. Adevărata valoare a tag-ului Meta Description stă în abilitatea de a influența acţiunea utilizatorului. Având în vedere că motorul de căutare ne oferă opţiunea de a ne prezenta printr-o singură propoziție, ar trebui să o utilizăm la maxim și să-i afişăm utilizatorului ceea ce poate obţine de la pagina noastră; trebuie să menţionăm avantajele pe care le oferim şi să-i dăm un motiv să ne aleagă tocmai pe noi dintre toate site-urile listate.
87
În trecut, tag-ul Meta Keywords permitea poziționarea mai bună prin introducerea unui număr cât mai mare de cuvinte-cheie, însă astăzi situația nu mai este aceeași. Abuzul de acest tag a făcut ca toate motoarele de căutare să-l respingă complet ca parametru de (clasificare) ranking. Sfatul nostru este să nu folosiţi tag-ul Meta Keywords, deoarece nu vă va fi de niciun folos din punct de vedere SEO, dar veţi ajuta concurenţa să vadă ce cuvinte-cheie folosiți pentru a ieși în evidenţă. Concurenţa nu trebuie decât să deschidă codul-sursă al paginii dvs., pentru a vedea direct ce cuvinte-cheie fac obiectul angajamentului dvs. SEO este o ştiinţă de sine stătătoare, iar o abordare mai detaliată a acestei teme depăşeşte sfera acestui curs.
Atributul ID Fiecare element HTML poate să conţină un atribut ID. El se foloseşte pentru a determina un element în mod unic și concret. Aceasta înseamnă că pe o anumită pagină HTML poate exista doar un singur element cu o anumită valoare ID. Poate fi repetat într-un alt document. Valoarea atributului ID poate să conţină litere/caractere de text (minuscule şi majuscule), anumite semne şi numere. Totuşi, trebuie să înceapă cu o literă. Se scrie ca orice alt atribut HTML în tagul HTML de început:
Acesta este un titlu caruia ii este adaugat un
1ID
Astăzi, ID-ul se foloseşte cel mai des pentru stilizarea CSS şi pentru programarea JavaScript. CSS poate folosi ID-ul pentru a aplica o anumită regulă CSS doar pe un singur element (vom vedea mai târziu cum funcționează CSS). De asemenea, JavaScript foloseşte ID-ul într-un mod similar, pentru a conecta anumite elemente ale paginii cu codul său. Simpla adăugare a atributului ID pe un element nu va influenţa afişarea acestuia. Îi adaugă doar o etichetă, practic un nume pe care îl putem folosi mai târziu, dacă este necesar. ID-ul se mai numeşte şi atribut global (global attribute), deoarece se poate aplica pe orice element.
Atributul CLASS Atributul CLASS este foarte similar cu atributul ID menționat anterior, singura diferenţă constând în faptul că acesta poate apărea de mai multe ori pe aceeași pagină HTML. Uneori, este util să etichetăm mai multe elemente cu aceeaşi clasă (CLASS), pentru a le stiliza pe toate deodată cu CSS. Cu alte cuvinte, adăugăm o clasă pe mai multe elemente şi le stilizăm pe toate dintr-odată în CSS.
88
De asemenea, o altă diferenţă în raport cu ID-ul constă în faptul că un element poate conţine în acelaşi timp mai multe clase. Le scriem pe toate într-un singur atribut CLASS, însă le separăm printr-un spaţiu gol. Mai jos, analizăm exemplul: 1
Primul paragraf
2
Al doilea paragraf
3
Al treilea paragraf
4
Al patrulea paragraf
În acest exemplu, putem atribui aceeaşi regulă CSS tuturor celor patru paragrafe şi putem adăuga o altă descriere doar pentru al treilea paragraf (prin clasa separat). O întrebare care se pune frecvent este: Cum stabilim dacă vom folosi atributul ID sau atributul CLASS şi când trebuie să le folosim? Răspunsul nu poate fi simplu şi nici nu există doar unul corect. După cum am menţionat deja, atributele ID şi CLASS doar determină sau distanţează un element de mediul său. În diferite circumstanţe, adăugăm atribute diferite. De asemenea, diferiţi autori vor proceda diferit în situaţii identice, însă vor obţine probabil acelaşi rezultat. Pentru moment, nu vă bateți capul cu această problemă, reţineţi doar regulile şi diferenţele dintre atributele ID şi CLASS, iar totul vă va fi mult mai clar când vom folosi regulile CSS. Modul 5 Bazele CSS
În lecţiile precedente, ne-am familiarizat doar cu limbajul HTML şi cu proprietăţile sale. Am învățat cum să adăugăm conţinut în pagini, iar acum ne vom familiariza cu CSS, cu regulile sale de bază şi cu stilizarea elementelor.
Ce este CSS? CSS (Cascading Style Sheets) este un limbaj care se foloseşte pentru descrierea semanticii de prezentare a documentului scris într-un limbaj descriptiv (markup language). Cu alte cuvinte, acesta descrie, respectiv ordonează aspectul şi formatarea oricărui element de pe pagină. Regulile CSS ne permit să stilizăm elementele HTML şi alte documente. CSS a apărut mult mai târziu după HTML. La început, paginile HTML nu erau stilizate din punct de vedere vizual. Apoi, tag-urile HTML le-am folosit pentru stilizare, însă totul s-a dovedit a fi mult prea complicat şi ineficient. De aceea, a fost conceput limbajul CSS, care permite structurii HTML să afişeze conţinutul, iar CSS-ului să îl stilizeze. La început, mulţi autori au combinat stilizarea HTML şi CSS, însă în zilele noastre, când CSS a ajuns la maturitate, putem respecta în totalitate regula de separare a conţinutului (HTML) de stilizare (CSS). CSS ne permite să creăm niște reguli (descriptions), cu ajutorul cărora vom stiliza anumite elemente. De exemplu, cu CSS putem specifica faptul ca fundalul unei pagini să fie albastru, iar
89
textul roșu cu font Arial. De asemenea, putem seta ca toate paragrafele să aibă diferite tipuri de margini etc. În CSS, nu scriem tag-uri şi nici nu adăugăm conţinut HTML. CSS se foloseşte doar pentru ordonarea şi stilizarea conţinutului în HTML şi a altor documente. CSS este separat de limbajul HTML şi de tag-urile sale. Dacă avem o pagină HTML, nu mai trebuie să corectăm codul respectiv pentru a introduce codul CSS. Pe acesta îl introducem fie întrun fişier separat (cu extensia .css), fie în partea head a documentului HTML. Mai târziu, vom explica în detaliu aspecte legate de cum şi unde se scrie CSS.
Cum funcţionează CSS-ul? Pentru a înțelege cum funcționează limbajul CSS, trebuie să ne imaginăm că în jurul fiecărui element de pe pagină există un cadru (box) invizibil. Utilizând CSS, putem crea reguli, cu ajutorul cărora stilizăm cadrul respectiv, dar şi elementele din el. Sintaxa CSS constă în regula CSS (CSS Rule). Regulile CSS sunt alcătuite în mod obligatoriu din două părţi: selectorul (selector) şi declaraţia (declaration). Selectorul indică elementul (sau, dacă sunt mai multe, le separăm prin virgulă) la care se referă respectiva regulă CSS. Declaraţia implementează stilizarea pentru elementul la care se referă regula CSS. Când creăm o regulă CSS, plasăm selectorul, apoi introducem un spaţiu gol şi apoi punem paranteze acolade, după care introducem declaraţia, ca în exemplul de mai jos: 1h1 { color:red; } Exemplul codului de mai sus reprezintă o regulă CSS simplă. Declaraţiile sunt, de asemenea, alcătuite din două părţi: proprietate (property) şi valoare (value). Scriem proprietatea, apoi două puncte (:), apoi valoarea. În aceeaşi regulă, putem scrie mai multe declaraţii și trebuie doar să le separăm prin punct şi virgulă (;). Haideţi să vedem un exemplu! Dacă vrem ca paragrafele paginii noastre să aibă fontul Tahoma şi dimensiunea de 12 px, vom scrie următoarele: 1p { 2 3 4}
font-family:Tahoma; font-size:12px;
90
În acest exemplu, am plasat selectorul p, ceea ce înseamnă că regula respectivă se referă doar la paragrafele din document (la tag-urile
din HTML). Am pus paranteze acolade şi între ele două declaraţii care selectează fontul (font family) şi dimensiunea textului (font size). Observaţi că între proprietate şi valoare în declaraţie stă întotdeauna semnul : (fără spaţii), iar după declaraţie stă întotdeauna semnul ; (care indică sfârşitul valorii). Trebuie menţionat că noile rânduri şi spaţii nu au un rol important în limbajul CSS, însă trebuie respectată o anumită structură pentru a menține claritatea codului. De obicei, scriem selectorul şi paranteza deschisă pe un singur rând. Apoi, pe următoarele rânduri introducem toate declaraţiile (câte una pe fiecare rând), pentru ca la sfârşit să închidem paranteza pe noul rând, ca în exemplul de mai sus. Selectorii CSS fac diferența între minuscule şi majuscule (sunt case sensitive), aşadar trebuie să acordăm atenție acestui aspect. Anumite proprietăţi pot avea mai multe valori (separate prin virgulă) sau mai multe grupuri de valori (separate prin spaţii goale) sau pot conţine un string (text). În acest caz, valoarea se scrie între ghilimele. Putem combina aceste metode de scriere. Haideţi să vedem exemple pentru astfel de cazuri: 1p { 2 3 4}
font-family:”Times New Roman”, Arial; margin:10px 0 0 0;
Înainte de a continua, reţineţi termenii menţionaţi până acum în cadrul acestei lecţii, deoarece vom reveni la ei. Prin urmare: limbajul CSS este alcătuit din reguli. Fiecare regulă este alcătuită din selector şi declaraţie. Declaraţia este alcătuită din proprietate şi valoare.
Modalitatea de scriere a unei reguli CSS Am menţionat că CSS este separat de codul HTML, de aceea există trei opțiuni de plasare a acestuia, din care două se folosesc în mod activ. CSS-ul extern După cum îi spune și numele, CSS-ul extern se află în afara documentului HTML, într-un fişier separat. Cea mai simplă versiune este cea în care avem un fişier HTML, iar lângă el, un fişier CSS. Este suficient să introducem un anumit tag în partea head a fişierului HTML, tag care va conecta fişierul CSS extern. Pe de altă parte, în fişierul CSS scriem doar regulile. În fişierele CSS, nu trebuie să apară nicio parte a limbajului HTML. Spre deosebire de fişierele HTML, fişierele CSS sunt alcătuite doar din reguli CSS.
91
Tag-ul pentru legarea regulilor CSS în partea head a paginii este . La fel ca și alte tag-uri (de exemplu, meta tag-ul), acest tag nu are conţinut, fiind cu autoînchidere. Toate valorile se află în atributele sale de pe tag. În cazul tag-ului , aceste atribute sunt:
href – defineşte calea până la fişierul CSS extern. Poate fi relativă sau absolută. Vă recomandăm să setați căi relative şi să vă asigurați ca fişierele site-ului să fie întotdeauna împreună şi în aceleaşi relaţii. Am întâlnit deja acest atribut şi în tag-ul img, cu o funcţie similară (calea până la imagine). type – defineşte tipul de document la care ne legăm, deoarece tag-ul se poate folosi şi în alte scopuri, deşi în ultimul timp se foloseşte doar pentru CSS. Setăm: ”text/css”. rel – defineşte relaţia dintre fişierul HTML şi cel legat, adică fişierul extern. Setăm: ”stylesheet”.
Iată un exemplu de fişier CSS extern legat, mai exact un exemplu de început de pagină HTML, care arată astfel: 1 2 3
4CSS extern 5 6 7... 8 Nu uitați că acest tag se pune întotdeauna în cadrul părţii head a fişierului HTML şi, practic, este întotdeauna identic, numai calea până la fişier fiind diferită:
Imaginea 11.1 - Pagini HTML şi fişiere CSS externe
92
Într-un singur document HTML, pot exista mai multe fişiere CSS legate1. În acest caz, vom adăuga câte un tag pentru fiecare fişier CSS extern. Vă reamintim că un fişier CSS poate stoca un număr nelimitat de reguli, însă o parte dintre autori separă grupurile de reguli CSS în diferite fişiere, pentru o organizare mai uşoară. Pe de altă parte, un fişier CSS poate fi apelat, încărcat de mai multe fişiere HTML diferite. Astfel, cu acelaşi fişier putem stiliza aceleaşi elemente de pe diferite pagini. CSS-ul intern Spre deosebire de CSS-ul extern, CSS-ul intern se află direct în documentul HTML, mai exact în partea head. În loc să punem un tag ca mai sus, putem adăuga tag-ul <style>, iar în cadrul lui să scriem direct regulile CSS. Iată un exemplu: 1 2 3 4 CSS intern 5 <style type=”text/css”> 6 p { font-family:Tahoma; 7 font-size:12px; 8 } 9 10 11 12... 13 În acest mod, practic am încorporat întregul fişier CSS în structura paginii HTML. În afara tagului <style>, se află o pagină HTML şi aici sunt valabile regulile ei. Pe de altă parte, în cadrul acestui tag se află regulile CSS şi sunt valabile regulile limbajului CSS:
Imaginea 11.2 - CSS-ul intern încorporat în pagina HTML
CSS-ul extern vs. CSS-ul intern
93
Se pune întrebarea ce CSS ar trebui să utilizăm, cel extern sau cel intern. Aproape întotdeauna este mai practic să utilizăm CSS-ul extern. Iată doar câteva motive:
Putem folosi aceleaşi reguli CSS pentru mai multe pagini diferite, în loc să le repetăm în mod inutil; Deoarece nu există repetiții ale codului, paginile sunt mai ușoare și se încarcă mai repede (CSS se încarcă doar pe prima); Putem separa conţinutul de stilizare; Putem schimba regulile CSS într-un singur loc, ceea ce va influenţa imediat toate paginile legate; Navigăm mai uşor în codul CSS, care este separat de HTML.
Inline CSS Am menţionat că există trei moduri de a scrie codul CSS. În afară de CSS-ul extern şi intern, există şi modul de scriere inline. Acesta se deosebeşte prin faptul că selectorul este omis, iar CSS-ul se scrie direct în tag-ul HTML, la fel ca atributul. Acest mod de scriere este permis doar în variantele stricte ale documentelor și este o relicvă din trecut. În CSS inline, adăugăm atributul style (pe tag-ul HTML pe care vrem să-l stilizăm) și în el scriem între ghilimele proprietăţile şi valorile, ca mai devreme. Din cauza specificităţii acestei versiuni, regula pe care o introducem se referă doar la un singur element. De aceea, scrierea stilurilor inline nu este practică, iar modificările ulterioare sunt și mai dificile. Vom analiza următorul exemplu: 1... 2
First paragraph
3
My paragraph
4
Third paragraph
... 5 Astfel, am stilizat un singur paragraf de text - al doilea. Dacă am fi vrut să le stilizăm pe toate, ar fi trebuit să le adăugăm și lor atributul style şi aceste proprietăţi şi valori. Este mai uşor să adăugăm CSS-ul extern sau intern şi să stilizăm toate paragrafele cu o singură regulă. Poate că vă întrebați în acest moment cum putem stiliza doar un singur paragraf dacă asta vrem cu adevărat, respectiv să-l evidențiem pe unul dintre ele? În astfel de cazuri sau în cazuri similare, nu vom folosi stilizarea inline, ci vom folosi selectori mai complecşi decât simplul p, după cum vom vedea în continuare.
94
Tipurile de selectori CSS Există diferite tipuri de selectori, cu ajutorul cărora putem ţinti aproape fiecare element de pe pagină. De noi depinde ce mod vom folosi în funcţie de situaţie. Interesant este faptul că nu există un singur mod adecvat, ci mai multe. În paragraful de mai sus, vorbind despre selectori, am folosit cuvântul a ţinti. Cuvântul face parte din jargon, respectiv din vocabularul experților CSS. Deşi ar fi mai corect să spunem: „această regulă stilizează elementul determinat de selectorul x”, spunem mai frecvent: „această regulă ţinteşte elementul x”. Acest mod de exprimare a devenit o regulă nescrisă, deoarece pleacă de la faptul că selectorii separă doar anumite elemente dintr-o mulţime de alte elemente şi le ţinteşte doar pe acelea. Analizaţi tabelul de mai jos, în care sunt prezentate tipurile de selectori: Explicaţie Ţinteşte toate elementele de pe pagină. Ţinteşte , precum şi toate elementele
şi
de pe pagină. † Ţinteşte elementul cu valoarea ID marcată. ID ‡ Ţinteşte elementul cu valoarea CLASS marcată. CLASS Ţinteşte toate elementele aflate în cadrul