HTML-Introducere
HTML - XHTML - XML
Tim Berners-Lee a publicat in 1991 un document numit "HTML Tags". HTML a fost dezvoltat de World Wide Web Consortium(W3C) si Web Hypertext Application Technology Working Group in 1993.
Primul standard a fost reprezentat de HTML 2.0 in 1995 si apoi HTML 4.0 in 1997 ultimul devenind stabil si universal acceptat inclusiv de producatorii de browsere care pina atunci aveau chiar si tag-uri proprii.
HyperText Markup Language (HTML) este un limbaj de marcare utilizat pentru crearea paginilor web ce pot fi afisate într-un browser (sau navigator). Scopul HTML este mai degraba prezentarea informatiilor - paragrafe, fonturi, tabele etc..
Prima versiune a fost lansata in 1993 si cea mai recenta la 4 februarie 2014(HTML 5).
In 2007 W3C a adoptat specificatiile HTML5 dezvoltate de WHATWG in cadrul Web Application 1.0.
In prezent sunt dezvoltate doua versiuni HTML:
-una de catre W3C respectiv HTML 5.2 si apoi probabil HTML
5.3, etc,
-una de catre WHATWG numita simplu HTML cu update-uri si revizii constante.
HTML5 este acum de fapt o colectie de module individuale cu specificatii diferite orientate catre dezvoltarea de aplicatii.
Principalele site-uri care ofera informatii detaliate despre HTML:
HTML formeaza impreuna cu CSS si Javascript o triada, o piatra de temelie a tehnologiilor de baza folosite in World Wide Web pentru Front-End-Development.
Fara HTML nu exista site-uri web. CSS controleaza cum arata o pagina web, Javascript controleaza modul in care se comporta o pagina web iar HTML reprezinta structura de baza. Daca indepartam structura HTML a unei pagini web acea pagina, practic nu mai exista.
In schimb o pagina web ce contine doar cod HTML poate exista. De aceea limbajul de marcare HTML este primul limbaj ce trebuie invatat si absolut indispensabil.
eXtensible HyperText Markup Language, sau XHTML, este un limbaj de marcare ce are aceleasi capabilitati
expresive ca si HTML, dar cu o sintaxa mai stricta.
Acesta a fost elaborat de W3C in anii 2000.
XHTML poate fi considerat ca încrucisarea dintre HTML si XML, în multe privinte, fiind o reformulare a HTML în XML. XHTML 1.0 a devenit o recomandare World Wide Web Consortium (W3C) pe data de 26 ianuarie 2000.
Extensible Markup Language (XML) este un meta-limbaj de marcare recomandat de Consortiul Web pentru crearea de alte limbaje de marcare, cum ar fi XHTML, RDF, RSS, MathML, SVG, OWL etc.
Aceste limbaje formeaza familia de limbaje XML.
Meta-limbajul XML este o simplificare a limbajului SGML (din care se trage si HTML) si a fost proiectat în scopul transferului de date între aplicatii pe internet si descriere structurilor date.
XML este acum si un model de stocare a datelor nestructurate si semi-structurate în cadrul bazelor de date native XML. Datele XML pot fi utilizate în limbajul HTML, permit o identificare rapida a documentelor cu ajutorul motoarelor de cautare.
Cu ajutorul codurilor javascript, php etc., fisierele XML pot fi înglobate în paginile de internet, cel mai elocvent exemplu este sitemul RSS care foloseste un fisier XML pentru a transporta informatiile dintr-o pagina web catre mai multe pagini web.
Ce este si ce nu este HTML?
HTML este un limbaj de marcare, care defineste structura continutului unui site.
HTML nu este un limbaj de programare.
HTML este limbajul de marcare pe care îl folosim pentru a structura si a da sens continutului web, de exemplu, definind paragrafe, titluri si tabele de date, sau încadrând în pagina imagini si videoclipuri.
Limbajul HTML este usor de invatat si se bazeaza pe folosirea de tag-uri sau etichete pentru a defini diferite elemente in pagina si modul in care diferite elemente lucreaza intre ele, (<p> este pentru paragraf, <nav> pentru navigare, etc)..
O eticheta HTML este definita de obicei ca un set de caractere care constituie o comanda formatata pentru o pagina Web. La baza codului HTML, etichetele ofera instructiunile pentru continutul vizual de pe Web.
Sa ne uitam la urmatoarea linie de continut:
Pisica mea este foarte mofturoasa.
Daca dorim ca aceasta linie de text sa fie de sine statatoare, am putea specifica faptul ca este un paragraf, inchizind linia in etichete de paragraf, astfel:
<p>Pisica mea este foarte mofturoasa.</p>
Anatomia unui element HTML
Sa analizam paragraful de mai sus in detaliu.
Elementul de mai sus este alcatuit din urmatoarele componente:
- Eticheta de deschidere(care marcheaza inceputul unui element), reprezentata de numele elementului(in acest caz p), infasurat in paranteze unghiulare;
- Eticheta de inchidere(care marcheaza sfirsitul elementului), are in plus o bara oblica inainte de numele elementului. Omiterea inchiderii unui element, este o greseala frecventa comisa de incepatori si poate duce la rezultate ciudate;
- Continutul elementului, care in acest caz este reprezentat de textul in sine;
- Elementul, este reprezentat de eticheta de deschidere, cea de inchidere si continutul aflat intre etichete.
Elementele HTML pot avea atribute, care arata cam asa:
Atributele contin informatii despre element, informatii care nu vor fi afisate in pagina. In acest caz, class, este numele atributului, iar nota este valoarea atributului.
Atributul class actioneaza ca un identificator al elementului, care poate fi utilizat pentru a targheta elementul cu informatii de stil(pentru a personaliza elementul cu ajutorul CSS).
Un atribut ar trebui sa contina intotdeauna urmatoarele componente:
- Un spatiu, intre acesta si numele elementului(sau atributul anterior, daca acesta are mai multe);
- Numele atributului urmat de semnul egal;
- Valoarea atributului in ghilimele.
Elemente imbricate - Nested Elements
Puteti pune elemente HTML in interiorul altor elemente HTML, respectind o serie de reguli.
De exemplu, daca dorim sa evidentiem un anumit lucru, cum ar fi faptul ca, "Pisica mea este foarte mofturoasa", am putea "infasura" cuvintul foarte, intr-un element <strong>, ceea ce inseamna o subliniere puternica.
<p>Pisica mea este <strong>foarte</strong> mofturoasa.</p>
Atentie! Trebuie sa va asigurati ca elementele sunt imbricate corespunzator. Ultimul element deschis este primul care va fi inchis.
In urmatorul exemplu am comis o greseala, care sa demonstreze o imbricare incorecta:
<p>Pisica mea este <strong>foarte</p> mofturoasa.</strong>
Daca totusi apare o greseala de acest tip, browserul va incerca sa afiseze continutul, dar rezultatul poate fi unul neasteptat. In unele situatii, continutul nu va fi afisat deloc.
Elemente goale
Unele elemente nu au continut si se numesc elemente goale. Un exemplu de element fara continut este elementul <img>
<img src="imagine.jpg" alt="imagine-test">
Elementul img, contine doua atribute, dar nu exista o eticheta de inchidere </img> si niciun continut intern, pentru ca un element img, nu infasoara continut pentru a-l afecta in vreun fel. Scopul elementului este de a afisa o imagine in pagina, in locul in care apare.
Anatomia unui document HTML
Acum vom analiza modul in care, elementele individuale sunt combinate pentru a forma o intreaga pagina HTML.
Sa revedem codul introdus in prima noastra pagina index.html:
Aici, avem urmatoarele elemente:
- <!DOCTYPE html> - Este nevoie de aceasta declaratie pentru a spune browserului web ce versiune de HTML este folosita, pentru ca acesta sa stie cum sa redea continutul paginii. Pe vremea cind HTML era copil, cam prin 1992, DOCTYPE, trebuia sa actioneze ca un link, spre un set de reguli, pe care pagina HTML trebuia sa le respecte, pentru a fi considerata o pagina buna, valida. Astazi declaratia doctype, este mult mai simpla si este absolut necesara pentru a asigura un comportament corect al documentului. Asta este tot ce trebuie sa stiti deocamdata.
- <html></html> - Acest element infasoara tot continutul unei pagini si mai este numit uneori, element radacina.
- <head></head> - Acest element, este ca un container pentru o serie intreaga de elemente, pe care doriti sa le includeti in pagina, fara a fi afisate utilizatorilor. Acest element include titlul paginii intre etichetele <title></title>, etichetele <meta>, poate contine cod CSS, scripturi si link-uri catre fisiere externe.
- <meta charset="utf-8"> - Acest element, defineste setul de caractere ca fiind utf-8, pe care documentul il va utiliza si care include majoritatea caracterelor din marea majoritate a limbilor scrise. Standard character encoding charset="utf-8" este necesar pentru fiecare pagina si informeaza user agent(browserul web) despre formatul de date folosit si acesta alege codarea potrivita pentru a reda site-ul). Acest sistem de codare este urmaşul codului ASCII, care avea 128 caractere şi a codului ISO-8859-1 de 256 caractere(utilizat de HTML4).
- <title></title> - Acest element seteaza titlul paginii, titlu care apare in fila browserului in care este incarcata pagina.
- <body></body> - Acest element infasoara tot continutul, pe care doriti sa-l afisati catre utilizatori(text, imagini, videoclipuri, etc.).
Imagini
Sa revenim acum la elementul img.
Asa cum am precizat deja, acest element include o imagine in pagina, in pozitia in care apare in documentul HTML. Face acest lucru prin intermediul atributului src(source = sursa), care contine calea catre fisierul imagine.
<img src="imagine.jpg" alt="imagine-test">
Am inclus si atributul alt(alternative), care contine textul descriptiv al imaginii, pentru utilizatorii care nu pot vedea imaginea, probabil din urmatoarele motive:
- Au deficiente de vedere si folosesc cititoare de ecran pentrua asculta textul alternativ.
- Ceva a mers prost si imaginea nu a fost incarcata in pagina.
Incercati sa schimbati in mod deliberat, calea catre fisierul imagine, cu una gresita, apoi salvati si incarcati pagina in browser.
<img src="cale-gresita/star.svg" alt="imagine-test">
Textul descriptiv, introdus cu ajutorul atributului alt, trebuie sa descrie cit mai corect ce reprezinta imaginea. De exemplu, daca afisam o imagine ce reprezinta un anumit peisaj din Maramures, textul alternativ ar trebui sa fie: "Peisaj superb din Maramures", sau alte variante care sa descrie cit mai fidel ce reprezinta imaginea.
Marcarea textului in pagina
In continuare va voi prezenta citeva din cele mai importante elemente HTML, utilizate pentru marcarea textului in pagina.
Titlurile - Headings
Titlurile sau elementele de antet, va permit sa specificati ca anumite parti ale continutului sunt titluri sau subtitluri. La fel ca intr-o carte care are un titlu principal si subtitluri pentru diverse capitole, tot asa poate fi structurata si o pagina web.
Un document HTML poate contine 6 niveluri de titlu, de la h1 la h6, dar in mod frecvent veti utiliza doar primele 3-4.
<h1>Titlu principal</h1>
<h2>Titlu secundar</h2>
<h3>Subtitlu unu</h3>
<h4>Subtitlu doi</h4>
Acum, adaugati un titlu h1 in pagina index.html, chiar deasupra elementului img.
☞ Veti constata ca titlul H1 are un stil implicit. Nu utilizati elementele de titlu, pentru a face ca textul sa apara mai mare si mai ingrosat. Pentru acest lucru vom utiliza CSS.
Acum pagina la care lucram ar trebui sa arate astfel:
Paragrafele - Paragraphs
Cum am explicat deja, elementele <p>, sunt utilizate pentru a marca textul obisnuit.
Acum, adaugati 2-3 paragrafe, direct sub elementul img si salvati. Programatorii folosesc in aceste situatii, text "Lorem Ipsum".
Lorem Ipsum este "dummy text", text standard folosit pentru a avea continut in pagina si pentru a vedea cu aproximatie cum va arata site-ul la final.
Cautati pe Google "Lorem Ipsum" si veti gasi mai multe site-uri din care puteti copia si folosi text de "umplutura".
Acum, pagina la care lucram, ar trebui sa arate cam asa:
Listele - Lists
O mare parte din continutul web, este reprezentat de liste, iar HTML are elemente speciale pentru acestea.
Cele mai comune tipuri de liste, sunt:
- Liste neordonate-Unordered lists - sunt liste in care ordinea articolelor nu conteaza(cum este o lista de cumparaturi) si sunt infasurate intr-un element <ul>.
- Liste ordonate-Ordered lists - sunt liste in care ordinea conteaza(o reteta, de exemplu) si sunt infasurate intr-un element <ol>.
Fiecare element din lista, este plasat in interiorul unui element <li>
De exemplu, am putea sa transformam o parte din urmatorul paragraf, intr-o lista,
<p>La acest curs, vom invata despre HTML, CSS si Javascript, pentru a deveni buni designeri si programatori.</p>
astfel:
<p>La acest curs, vom invata despre:</p>
<ul>
<li>HTML,</li>
<li>CSS,</li>
<li>Javascript,</li>
</ul>
<p>pentru a deveni buni designeri si programatori.</p>
Incercati sa adaugati o lista neordonata sau ordonata in pagina index.html, astfel incit sa arate cam asa:
Link-urile - Links
Fara link-uri nu ar exista web-ul si cu asta am spus tot despre importanta acestora.
Pentru a crea un link(o legatura), utilizam elementul <a> - "a", fiind abrevierea pentru anchor(ancora).
Pentru a crea un link urmati acesti pasi:
- Alegeti ceva text. Eu am ales: "Primul meu site".
- Infasurati textul intr-un element a.
<a>Primul meu site</a>
- Adaugati atributul href astfel:
<a href="">Primul meu site</a>
- Completati valoarea atributului href, cu adresa web la care doriti sa faceti trimitere, astfel:
<a href="https://google.com">Primul meu site</a>
Acum, adaugati cel putin un link, in pagina index.html.
Este posibil sa obtineti rezultate neasteptate, daca omiteti partea https:// sau http://, numita protocol. Dupa crearea unui link, faceti click pe acesta, pentru a va asigura ca face trimitere exact acolo unde doriti.
☞ Atributul href, reprezinta abrevierea pentru hypertext reference(referinta pentru hipertext).
Concluzie
Daca ati respectat toate instructiunile de pina acum, atunci pagina dvs., index.html, ar trebui sa arate cam asa: