HTML (Training pentru BOSCH)

Conținut:

- Înțelegelerea standardelor
- Structura HTML și etichetele/tagurile de bază
- Uniform Resource Locator (URL)
- HTML5: Simplificare, redefinire, organizare, semantică+, extindere

Curs de formare şi dezvoltare profesională în Informatică. Studii postuniversitare.

Înțelegelerea standardelor

HTML pentru structură
CSS pentru prezentare

HTML5- și CSS - specificațiile sunt menținute și actualizate de către World Wide Web Consortium (W3C).

Evoluția HTML

- un document informal CERN care conține 18 etichete HTML
- HTML 2.0 ca standard (+ încărcare de fișiere bazate pe formular, tabele, hărți de imagine pe partea de client, internaționalizare)
- HTML 3.2 (s-a renunțat în întregime la formulele de matematică & blink-ul Netscape-lui și elementul marquee al Microsoft au fost omise)
- HTML 4.0 (Strict, Transitional, Frameset)
- HTML 4.01
- XHTML 1.0
- XHTML 1.1
- HTML5

Elemente de structură HTML

Specificațiile HTML sunt menținute și actualizate de World Wide Web Consortium (W3C).

Elemente de structură HTML: <title>

obligatoriu (required);
afișate în bara de titlu & în marcajele utilizatorului (Bookmarks) sau lista de preferințe ale utilizatorului (Favorites list);
poate îmbunătăți accesibilitatea (accessibility), deoarece acesta este primul lucru pe care o persoană îl aude când utilizează un cititor de ecran;
Motoarele de căutare se bazează în mare măsură pe titlurile documentelor.

Specificațiile HTML sunt menținute și actualizate de World Wide Web Consortium (W3C).

Marcare Semantică

Scopul (X)HTML-lui este de a da înțelesul și structura conținutului.
Alegeți elementul (X)HTML care conține cea mai semnificativă descriere a conținutului!

Specificațiile HTML sunt menținute și actualizate de World Wide Web Consortium (W3C).

Tag-uri de marcare a textului

Specificațiile HTML sunt menținute și actualizate de World Wide Web Consortium (W3C).

Specificațiile HTML sunt menținute și actualizate de World Wide Web Consortium (W3C).

Elemente generice

div
span

Identificarea elementelor:

atributul id - utilizat pentru identificare
atributul class - folosit pentru a grupa elemente similare

Specificațiile HTML sunt menținute și actualizate de World Wide Web Consortium (W3C).

Elemente de structură HTML: link-uri

Atributul href - specificarea adresei URL:

URL-uri absolute
URL-uri relative

Specificațiile HTML sunt menținute și actualizate de World Wide Web Consortium (W3C).

Uniform Resource Locator (URL)

- este un tip de Uniform Resource Identifier (URI);
- este termenul generic pentru toate tipurile de nume și adrese care se referă la obiecte de pe World Wide Web.

Beyond Google. Rethink your hunting methods. Prezentare pe Slideshare.

URL explamation, moz.com & SEO Cheat Sheet: Anatomy of A URL, Dr. Peter J. Meyers, 6 October 2009.

URL Anatomy with SEO Tips, by Benjamin Patch, February 10, 2015

Elemente de structură HTML: imagini

Atributul src - spune browser-ului locația fișierului imagine

Atributul alt - conține un text alternativ care va fi afișat dacă imaginea nu este disponibilă

Specificațiile HTML sunt menținute și actualizate de World Wide Web Consortium (W3C).

Din tutorialul HTML de pe W3 school

Elemente <numeTag>Coninut ...</numeTag>
Atribute nume="valoare"
Stiluri CSS (inline) - stilurile discutate: background-color, color, font-family, font-size, text-align;
Formatare a textului: , , , , , , , <ins>, <del>, .

Din tutorialul HTML de pe W3 school

Elemente de citare: <blockquote>,<q>, <abbr>, <address>, <cite> și <bdo>;
Comentarii: 
Culori -specificate cu nume de culori predefinite sau cu valori RGB (sau RGBA), HEXazecimal sau HSL (sau HSLA).

Din tutorialul HTML de pe W3 school

CSS
- inline <numeTag style="proprietate:valoare;"></numeTag>
- interne folosind elementul <style> în secțiunea <head>
- externe folosind elementul <link> în secțiunea <head>

Din tutorialul HTML de pe W3 school

Linkuri: <a href="url">link text</a>
- atributul href - specificarea unei resurse web folosind adresarea URL;
- atributul target cu valorile _self, _blank, _parent, _top;
- stilizarea unui link folosind: :link, :visited, :hover și :active.
- salt în pagină la un bookmark (adică la un element cu un anumit id) folosind href="#valoareID".

Din tutorialul HTML de pe W3 school

Imagini: <img src="poza.jpg" alt="descriere poză">
- atributul src - specificarea unui fișier imagine folosind adresarea URL;
- atributul alt - de ce este obligatoriu și unde se folosește acest text;
- atributele width și height;
- Imagine folosită ca și link <a href="..."><img src="..." alt="..."></a>
- Imagini de fundal:

HTML (Training pentru BOSCH), Curs 4

Conținut:

Înțelegelerea standardelor

Evoluția HTML

Elemente de structură HTML

Elemente de structură HTML: <title>

Marcare Semantică

Tag-uri de marcare a textului

Elemente generice

Elemente de structură HTML: link-uri

Uniform Resource Locator (URL)

Elemente de structură HTML: imagini

Din tutorialul HTML de pe W3 school

Din tutorialul HTML de pe W3 school

Din tutorialul HTML de pe W3 school

Din tutorialul HTML de pe W3 school

Din tutorialul HTML de pe W3 school

Sfârșit