Tehnici Web

Nu esti logat.

Laboratorul 1

(Deadline: 10.12.2017 23:59:59)

Daca nu sunteti logati exercitiile nu se mai afiseaza.

Daca nu sunteti logati exercitiile nu se mai afiseaza.

Intrebari introductive

Design

Cum alegem culorile

Trebuie sa existe un contrast bun intre culoarea fundalului si cea a fontului.

Codificarea culorilor:

Citeste si: http://www.w3schools.com/tags/ref_colornames.asp

Codificarea rgb (Red, Green, Blue)
Provine din faptul ca monitoarele emit pe fiecare pixel (locatie atomica de pe ecran) trei culori(rosu, verde, albastru) de intensitati diferite care se suprapun formand o singura culoare compusa.

Mai multe despre contraste si alegerea culorilor gasiti aici: http://www.worqx.com/color/index.htm

Ce fel de background folosim?
Background-ul nu trebuie sa aiba culori prea puternice.
Folositi urmatoarele imagini pe post de background: (care din ele e mai buna?)
background flori culori puternice

background flori culori slabe


Background-ul poate fi si animat. Folositi urmatoarea imagine ca background:
background ploaie animat

Intr-un proiect real ar fi buna aceasta imagine ca background? De ce?

Editoare

Scriptul html poate fi scris folosind cele mai simple editoare de text, precum notepad pana la cele mai complexe HTMLeditoare precum Adobe Dreamweaver (de tip WYSIWYG).
O lista cu editoare HTML gasiti la http://en.wikipedia.org/wiki/List_of_HTML_editors La laborator este bine sa lucrati in:
http://www.crimsoneditor.com
(selectati Document -> Syntax Type -> HTML Document)
http://www.notepad-plus-plus.org
(selectati Language -> H -> HTML)
(pentru autocomplete selectati Settings -> Preferences... -> tabul cu Backup/Auto-Completition si bifati casutele corespunzatoare)

Extensii

Extensiile cu care putem salva un fisier html sunt: htm, html.

Exemple de site-uri

Comentati urmatoarele site-uri:

Cateva site-uri cu un design nu tocmai recomandat:

Site-uri cu design care se potriveste bine cu tema site-ului:

Urmatoarele site-uri(sau sectiuni de site-uri) au aceeasi tematica (vanzare de oglinzi care maresc imaginea):

Grup 1:

Grup 2:

Structura unui document html

Schema de mai jos se refera la structura generala a un fisier html.

structura pagina html

Exista doua tipuri de taguri:

Tagurile html nu sunt case senzitive. Deci putem scrie si <html> si <HTML> si chiar <hTmL>, desi ultima varianta chiar nu e recomandata :).

Atentie, nu inserati spatii intre numele tagului si <,</,>,/>.

Un document html are de fapt o structura arborescenta. Tagurile reprezinta nodurile arborelui. Daca in cadrul informatiei unui tag bloc, exista un alt tag. Atunci primul tag este nodul parinte al celui de-al doilea tag. Iar al doilea tag este copilul(fiul) primului tag. De exemplu, tagul <head> este fiu al tagului <html>
structura arbore pagina html

Tagul <html>...</html>

Incepe si respectiv termina un document html.

Un atribut important pentru html este lang, prin care se specifica limba implicita a documentului. Este recomandat ca eventualele zone de text scrise in alta limba decat cea definita ca implicita sa fie incadrate intr-un alt element in care a fost setat atributul lang la limba corespunzatoare. Setarea corecta a limbii va permite diverselor aplicatii sa interpreteze pagina mai usor: de exemplu aplicatii destinate celor cu probleme de vedere: aplicatii care citesc (prin intermediul unei voci automate) pagina respectiva pentru utilizatori. Chiar si browserele sau motoarele de cautare se pot folosi de aceasta informatie, chiar daca majoritatea pot detecta automat limba in care e scris documentul. Deci pentru o mai buna interpretare si prezentare a paginii web, folositi acest atribut.

O lista completa cu codurile limbilor gasiti la
http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry, sau cu cele mai folosite la
http://www.w3schools.com/tags/ref_language_codes.asp

Conform W3C, pentru specificarea unui dialect apartinand unei limbi, valoarea atributul va fi: cod_limba-cod_tara, de exemplu en-US.

Pentru specificarea unui fragment dintr-o limba experimentala (limba construita intr-un anume scop si nu limba care e vorbita intr-o cutare zona geografica, de un anume popor), se foloseste codificarea: x-nume_limba, de exemplu :

<html lang="x-sindarin">
<body>
<p>I eneth nîn Irina.</p>
<p>Man i eneth lîn?</p>
</body>
</html>

Tagul <head>...</head>

Contine antetul fisierului html. In cadrul acestuia se specifica metainformatii despre pagina: autorul, cuvintele cheie, descrierea, titlul paginii, faviconul, fisierele de stil folosite etc.

Tagul <body>...</body>

Contine corpul paginii web. In el se vor scrie toate elementele afisabile: imagini, paragrafe, tabele.

Tipuri de metainformatii. Subelementele specifice tagului head

Tagul link

Este folosit pentru a specifica o legatura intre fisierul html curent si un alt fisier. Atentie, a nu se confunda cu tagul <a> care este folosit pentru navigare si este un element afisabil (deci, apartinand elementului body).

Cand folosim tagul link de obicei specificam 3 atribute importante

Faviconuri

Un favicon este o imagine mica, reprezentativa pentru pagina html. Il putem observa pe tab-ul de browser inaintea titlui tabului (atentie, unele browsere nu afiseaza faviconul daca pagina web e locala, ci doar faviconurile paginilor de pe net). De asemenea faviconul mai poate fi vazut si in bookmarks in dreptul paginilor memorate in lista.

Rolul lui e de a facilita recunoasterea paginii in lista de taburi deschise sau in bookmarks. Este ca o sigla, reprezentativa pentru site.

Puteti citi mai multe aici:http://en.wikipedia.org/wiki/Favicon

Un favicon pe un tab arata asa:
exemplu favicon

Cum putem crea un favicon?

Exista multe editoare grafice in care pot fi create faviconuri. De exemplu, puteti folosi aplicatia online de la http://www.favicon.cc/. Aceasta va permite sa creati inclusiv un favion animat. Totusi faviconurile animate sunt, in general, de evitat pentru a nu distrage atentia utilizatorului si a-l deranja. Nu toate browserele suporta favicon animat.

Cum inseram un favicon intr-o pagina web?
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico"/>

Tagul <title>...</title>

Va contine titlul documentului (care apare ca titlu de tab, in browser). Tagul title poate sa apara o singura data in pagina.

Ce inseamna metadata? Tagul <meta>

http://en.wikipedia.org/wiki/Metadata
Exemplu de folosire: http://www.w3schools.com/tags/tag_meta.asp
Lista tipurilor de metadate (si multe alte informatii utile despre metadate): http://www.metatags.org/
http://www.w3schools.com/tags/ref_charactersets.asp
http://la.remifa.so/unicode/unicode.php
Charset-uri

Charset-ul ISO-8859-1: http://www.w3schools.com/tags/ref_entities.asp
Site-uri cu coduri pentru caractere:
http://www.codetable.net/entitiesinhtml

Despre DOCTYPE

Cuvantul DOCTYPE vine de la "document type declaration" si cum ii spune si numele declara tipul de document (HTML), cu alte cuvinte ce versiune de HTML este folosita (XHTML-strict, frameuri, HTML5 etc). La ce este util si cine foloseste aceasta informatie? Browserele, sau validatoarele HTML vor evalua pagina conform specificatiilor doctype-ului. Browserul are nevoie de doctype pentru a sti cum sa afiseze corect anumite elemente (de exemplu tagul <menu> are sensuri diferite in variantele vechi de HTML, fata de HTML5; browserul fara doctype-ul corespunzator nu va sti la care sens ne-am referit). Sunt diverse taguri sau proprietati CSS care nu vor functiona chiar deloc fara DOCTYPE. DOCTYPE-ul indica si ce elemente sunt permise sau nu, de exemplu un DOCTYPE pentru XHTML-strict va face ca validatorul HTML sa dea eroare la tagurile deprecated, sau un DOCTYPE pentru HTML5 va indica faptul ca frameurile nu mai sunt permise. Uneori browserele afiseaza si tagurile "nepermise" contrar DOCTYPE-ului insa nu trebuie sa va bazati pe asta, ori sunt buguri, ori s-a ales asa pe motive de compatibilitate, insa alte browsere vor respecta DOCTYPE-ul si va veti trezi ca site-ul vostru se afiseaza foarte diferit in browsere diferite (uneori cu efecte dezastruoase asupra aspectului si functionalitatii). Practic DOCTYPE-ul indica DTD-ul folosit. Un DTD (Document Type Definition) contine definitiile tagurilor, cu proprietatile lor (daca e tag singular sau necesita taguri de deschidere-inchidere, ce atribute are, in ce relatie se afla cu alte taguri etc.); acestea sunt de fapt regulile de sintaxa si de stuctura ale documentului.

Doctype-ul trebuie sa fie prima linie din documentul HTML.

Un exemplu de DOCTYPE (pentru HTML5):

<!DOCTYPE html>

Ce se intampla daca nu folosim doctype? Ori e invalid/incomplet? Browserul va interpreta pagina in Quirks mode. Multe browsere folosesc aceasta tehnica. In acest mod ele asigura compatibilitatea cu paginile mai vechi, majoritatea scrise in vremea cand browserele inca nu se aliniasera la standarde (fie ca nu apucasera sa le implementeze, fie ca browserul aparuse inaintea standardului) si aveau fiecare modul propriu de a interpreta paginile web (nu ca n-ar avea si in zi de astazi).

Sintaxa unui DOCTYPE pentru HTML4 si XHTML:

<!DOCTYPE elem_top_level disponibilitatea FPI-ul [optional URI-ul pt DTD]>

Exemplu:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Elementul top-level pentru paginile web va fi html, el fiind de fapt elementul radacina, primul care apare in document. Urmatoarea parte a doctype-ului (disponibilitatea) se refera la tipul de dtd, daca e SYSTEM poate fi un DTD specific unui sistem inchis (un DTD privat, cu niste taguri custom) si trebuie urmat de linkul catre acel DTD (pare ciudat dar asta pentru ca DOCTYPE tine si de XML), daca are valoare PUBLIC atunci e un DTD vizibil de catre toata lumea si trebuie urmat de FPI (Formal Public Identifier) prin care se indica DTD-ul asociat, care va fi folosit (de aceea URI-ul pentru DTD este optional). Un FPI are urmatorul format: inreg//organizatie//tip_doc label//limba. Primul parametru, inreg, poate avea valorile + (compania este inregistrata ISO) sau - (daca nu e inregistrata). Urmatorul parametru e numele organizatiei (de exemplu W3C). A treia secventa e formata din doua parti separate prin spatiu, tip_doc, adica tipul de limbaj de definire folosit (de exemplu DTD), iar labelul indica efectiv ce DTD e folosit (exemplu: HTML 4.01 Frameset). Ultima parte a FPI-ului este limba in care a fost scris DTD-ul.

Declarare DOCTYPE:
http://www.w3schools.com/tags/tag_doctype.asp

Pentru a intelege mai bine ce inseamna doctype, puteti citi:

Comentarii HTML

Un comentariu are urmatoarea sintaxa: <!-- comentariu -->

Este bine ca atunci cand faceti pagini web sa scrieti la inceput cateva informatii despre care considerati ca ar putea fi utile. De asemenea inserati comentarii in cadrul paginii web de fiecare data cand simtiti ca ar fi bune niste explicatii, dar care sa nu apara afisate in continutul paginii. Comentariile sunt foarte utile, chiar necesare, mai ales daca stiti ca veti reveni asupra paginii respective, ori daca lucrati in echipa si alti membri vor avea de efectuat modificari asupra ei.

Observatie: Spatiile
Inserati in fisierul html mai multe caractere spatiu si tab-uri (intre doua cuvinte), respectiv mai multe linii noi (intre alte doua cuvinte). Ce observati?
Mai multe spatii vor fi interpretate ca unul singur. Linia noua nu e luata in considerare. Pentru a insera o linie noua folosim tagul <br/>
Cum putem face daca dorim totusi mai multe spatii consecutive?

Taguri de sectionare

Observatie: tagul body de asemenea este tag de sectionare, acesta delimitand sectiunea principala (continutul afisabil al paginii).

Tagul <section>...</section>

Acest element reprezinta o sectiune generica a unui document, o portiune de text cu o tema clara, de cele mai multe ori cu propriul sau heading , dar subordonata temei generale a documentului (spre deosebire de article care are continut independent). Cel mai bun exemplu il reprezinta capitolele de carti.

Mai multe detalii:
http://webdesign.about.com/od/html5tags/a/when-to-use-section-element.htm

Tagul <nav>...</nav>

Defineste o sectiune a paginii dedicata navigarii. Pot fi linkuri catre zone din aceeasi pagina (ancore), sau pagini diferite. Asa cum este precizat in standard, nu orice grup de linkuri ar trebui puse intr-un element de tip nav, ci doar seturi de linkuri care reprezinta cu adevarat o sectiune importanta de navigatie, cum ar fi meniul unei pagini. Pot exista mai multe elemente nav pe pagina, de exemplu poate exista un nav pentru meniul site-ului si un nav pentru navigarea in pagina curenta.

Mai multe detalii:

Tagul <article>...</article>

Defineste un articol. Conform specificatiilor w3c, articolul este un element cu continut de sine statator, ce poate fi distribuit ori folosit independent de restul site-ului, precum o postare intr-un forum, un articol de revista online, un articol de blog etc.

Poate avea propriul sau antet si paragraf de subsol. De asemenea, fiind un continut independent, poate avea propriul sau titlu de tip h1.

Nu are efecte vizuale (in afara de povestea cu h1).

Mai multe detalii:

Tagul <aside>...</aside>

Este un tag de sectionare, si cuprinde text care iese putin din context (nu se incadreaza in cursul textului, e cumva separat, ca o paranteza, un apropo) insa care totusi are legatura cu textul (continut tangential). De exemplu: o nota de subsol.

De exemplu:

<h1> Iar o zi grea de luni</h1>
<p>
Azi am invatat toata ziua la TW.
</p>
<aside>
<p>TW vine de la tehnici web este materia unde discutam depsre [...]</p>
</aside>
<p>Nu mai pot de oboseala, cred ca ma duc sa ma uit la un film si apoi sa dorm.
</p>

Tagurile heading <h1>...</h1> - <h6>...</h6>

Tagul h1- este de obicei vazut ca fiind titlul paginii, deoarece este headerul cu cea mai mare importanta. Multi spun ca se recomanda sa existe doar un singur element de acest fel pe pagina, dar pot exista exceptii (de exemplu folosirea unui h1 in cadrul unui element de sectionare a continutul, precum article, pe langa h1-ul propriu paginii).

Ce parere are un angajat google despre mai multe h1-uri pe pagina:
http://www.youtube.com/watch?v=GIn5qJKU8VM

Dupa cum vedeti afirma ca este ok sa fie mai multe astfel de taguri daca este absolut necesar, insa in niciun caz sa nu fie folosit in mod abuziv. Totusi, autorul articolului accesibil in linkul de mai jos a facut un test in legatura cu numarul de aparitii pe pagina a lui h1. Atunci cand avea doua h1 pe pagina, site-ul sarea ca rank de la 4 direct la 93, probabil in urma penalizari date de motorul de cautare. In momentul in care a sters al doilea h1 site-ul a ramas in top 5. Pe de alta parte, daca veti citi articolul, h1-ul respectiv avea un continut formatat cu span, si unii incearca sa foloseasca h1 pentru text pe care il formateaza sa apara ca text normal de paragraf pentru a introduce cat mai multe cuvinte cheie intr-un element cu pondere mai mare. De aceea autorul articolului pune in vedere si faptul ca motivul ar putea fi penalizarea automata a unui site cu h1 ce contine span imbricat. Oricum site-ul de standarde al W3c afirma clar faptul ca un h1 trebuie folosit pentru titlul cel mai important, de cel mai inalt nivel:
http://www.w3.org/QA/Tips/Use_h1_for_Title

In continuare parerile sunt impartite, in legatura cu efectul mai multor h1-uri pe aceeasi pagina, majoritatea totusi considera ca e mai sigur sa se evite acest lucru, in afara de exceptia mentionata mai sus.

Tagul <header>...</header>

Tagul header, cum ii spune si numele, se refera la antetul unui document. Atentie, a nu se confunda cu tagul head. Conform specificatiilor, de obicei cuprinde o zona de titlu, o parte introductiva, elemente de navigatie (meniu, link-uri stil cuprins de carte etc.), logo-uri. Elementul header nu e el insusi o sectiune ci este inceputul unei sectiuni. Nu are efecte vizuale, rolul sau fiind doar semantic. Un element header nu poate contine un alt element header ori footer. Pot exista mai multe taguri header in document insa ele vor reprezenta antetul celui mai apropiat element parinte de tip sectiune (practic, in arborele HTML cel mai de jos stramos). Astfel putem avea header pentru articol, sectiune etc. sau pentru intreaga pagina, cand cel mai apropiat parinte e elementul body.

Mai multe detalii:

Tagul <footer>...</footer>

Defineste subsolul unei pagini, unei sectiuni. Conform specificatiilor, el poate contine: autorii textului, legaturi catre documente asemanatoare,date de copyright, date de contact (care vor fi incadrate si de tagul address). Elementul footer nu e el insusi o sectiune ci este sfarsitul unei sectiuni. Nu are efecte vizuale, rolul sau fiind doar semantic. Un element footer nu poate contine un alt element header ori footer. Se obisnuieste sa fie la sfarsitul documentului insa nu e obligatoriu. Pot exista mai multe taguri footer in document insa ele vor reprezenta informatiile de subsol ale celui mai apropiat element parinte de tip sectiune (practic, in arborele HTML cel mai de jos stramos). Astfel putem avea footer pentru articol, sectiune etc. sau pentru intreaga pagina, cand cel mai apropiat parinte e elementul body.

Mai multe detalii:

Taguri de grupare

Tagul <p>...</p>

Insereaza un paragraf (cu linie noua, la final)

Tagul <div>...</div>

Defineste, cum ii spune si numele, o diviziune in pagina. Implicit, fiind element de tip bloc, lasa o linie noua inainte si dupa continutul sau. De obicei se foloseste pentru formatarea paginilor (crearea layout-urilor bazate pe divuri), asociindu-i-se un stil CSS.

Tagul <pre></pre>

Text preformatat. Pastreaza formatul, spatierile (mai multe spatii, linii noi, tab-uri). Schimba font-ul intr-unul monotype

Tagul <blockquote>...</blockquote>

Este un citat incadrat intr-un element de tip bloc, si de obicei se foloseste pentru fragmente mai lungi. Sursa citatului poate fi precizata cu ajutorul atributului cite.

Tagul <hr/>

Insereaza o linie orizontala despartitoare.

Liste

Tagurile <ol></ol> si <ul></ul>

Definesc o lista ordonata, respectiv una neordonata.

Exemplu:

<ol type="I" start="5">
    <li>element din lista</li>
    <li>element din lista</li>
    <li>element din lista</li>
</ol>
  1. element din lista
  2. element din lista
  3. element din lista
<ul>
    <li>un ceva</li>
    <li>inca un ceva</li>
    <li>si inca un ceva</li>
</ul>
  • un ceva
  • inca un ceva
  • si inca un ceva

Tagul <li></li>

Tagul <li></li> defineste un element din lista. Numele lui este o abreviere pentru list item.

Tagurile <dl></dl>,<dt></dt>,<dd></dd>

Reprezinta in ordine: tagul de specificare a unei liste de definitii, tagul de specificare al termenului de definit, si tagul care incadreaza descrierea termenului.

Exemplu:
<dl>
    <dt>pisica</dt>
    <dd>entitate care miauna</dd>
    <dt>soarece</dt>
    <dd>entitate care chitaie pana e prins de entitatea care miauna</dd>
    <dt>dulau</dt>
    <dd>entitate care atunci cand maraie nu mai are curaj nimeni sa miaune ori sa chitaie...</dd>
</dl>
pisica
entitate care miauna
soarece
entitate care chitaie pana e prins de entitatea care miauna
dulau
entitate care atunci cand maraie nu mai are curaj nimeni sa miaune ori sa chitaie...

Tabele

Sunt folosite pentru a enumera diverse informatii, pentru a grupa date intr-un format ordonat, pentru a arata datele unor experimente sau analize etc. Totodata sunt folosite si pentru a alinia diversele elemente (in acest caz, folosindu-se de obicei, un tabel fara border). Inainte erau folosite pentru a realiza alinierea intregii pagini. Insa acest tip de structurare a paginii avea mai multe dezavantaje:

  • un tabel se defineste cu ajutorul a destul de multe taguri, facand codul mai greu de urmarit si de intretinut
  • control limitat asupra dimensionarii si pozitionarii celulelor
  • o pagina aliniata cu ajutorul unui tabel e greu de modificat sau de extins

Din cauza acestor dezavantaje s-a renuntat in timp la designul cu ajutorul tabelelor, layout-urile fiind acum realizate cu ajutorul divurilor sau, incepand cu standardul html5, cu ajutorul diverselor taguri de tip container de text, precum header, footer, nav, etc.

Tagul <table></table>

Delimiteaza continutul unui tabel. In interiorul elementului table se vor defini toate subelementele specifice tabelului.

Tagul <caption></caption>

Contine titlul(sau descrierea) tabelului. Poate fi vazut cu sensul de text explicativ.

Tagurile <thead></thead>, <tfoot></tfoot>, <tbody></tbody>

Delimiteaza capul tabelului, finalul tabelului si respectiv continutul acestuia. Tagul <thead> trebuie sa fie inainte de <tbody> si <tfoot>.

Tagul <tr></tr>

Tagul <tr> (table row) defineste un rand dintr-un tabel. Un rand poate contine mai multe celule.

Tagurile <td></td>,<th></th>

Tagul <td> (table data) defineste celule normale de tabel. Tagul <th> (table heading) e folosit pentru a defini celule header (care vin cu un format implicit, si anume textul e centrat si scris cu litere aldine). Aceste dou tipuri de taguri trebuie neaparat incluse intr-un rand de tabel: <tr>.

Surse bibliografice:

Taguri semantice inline (text-level semantics)

Tagul <b>

Tagul <b>, conform specificatiilor e folosit pentru a atrage atentia asupra unui fragment de text, fara a-i da o importanta deosebita si fara a implica o schimbare de tonalitate in citirea textelor (indicatia referitoare la schimbarea de tonalitate e importanta, de exemplu, pentru o aplicatie destinata utilizatorilor cu probleme de vedere, care citeste continutul paginii).

Tagul <u>

Nu se mai foloseste doar pentru simpla subliniere a textului (rolul prezentational pe care il avea inainte de HTML5). Tagul <u> se foloseste in situatii speciale care necesita subliniere, si care nu reprezinta doar o forma de stil aleasa pentru pagina:

  • marcarea numelor proprii chinezesti
  • sublinirea unui cuvant sau a unei sintagme gresite in urma verificarii sintaxei (de exemplu un site care contine o aplicate de syntax checking)

Sursa: http://html5doctor.com/u-element/

Tagul <i>

Tagul <i> e folosit pentru a evidentia anumiti termeni speciali sau o zona de text pronuntata cu un alt ton. Poate fi folosit pentru termeni stiintifici, tehnici, termeni in alte limbi sau pentru accentuarea unor cuvinte, pentru delimitarea numelor unor entitati. De exemplu:

Cuvantul <i>pisica</i> este un substantiv.<br>
Numele stiintific al pisicii salbatice este <i>Felis silvestris</i>.<br>
Tagul &lt;font&gt; este <i lang="en">deprecated</i>.

care va afisa:

Cuvantul pisica este un substantiv.
Numele stiintific al pisicii salbatice este Felis silvestris.
Tagul <font>...</font> este deprecated.

Observati folosirea atributului lang pentru termenul strain. O lista cu codurile pentru toate limbile gasiti pe site-ul w3schools.

Surse:
Tagul <s>...</s>

Asa cum e specificat in standard, tagul <s> va fi folosit pentru text care nu mai e corect sau care nu mai are relevanta pentru text. Diferenta fata de tagul <del> este ca del denota un continut sters dintr-un document care a fost vizibil anterior, si asupra caruia s-a facut o modificare (stergerea textului cu pricina). Practic del e folosit pentru a indica eliminarea totala a informatiei, fiind urmata chiar de republicarea documentului fara acel text, spre deosebire de textul scris intr-un element <s> care se doreste a fi pastrat in continuare in text chiar daca nu mai e valabil, pentru a indica schimbarea, trecerea de la o stare la alta (de exemplu <s> poate fi folosit pe un pret updatat:

fundite pentru pisici numai 5.9 RON 2.9 RON (reducere aplicata doar saptamana aceasta)

Observati, de asemenea, diferenta dintre:

Regulament (versiunea 5):
<ol>
<li>Nu se intra in laboratorul de chimie fara a fi insotiti de un cadru didactic.</li>
<li>Nimeni nu va lua sticlute dulapiorul cu substante, in timpul orei, <s>cu exceptia laborantului.</s><ins>(modificat 05.10.2013)
si profesorii de chimie vor avea acces la dulapior</ins></li>
<li>Laboratorul de informatica poate fi folosit de catre elevi si in afara orelor.</li>
</ol>

Se afiseaza astfel:

Regulament (versiunea 5):
  1. Nu se intra in laboratorul de chimie fara a fi insotiti de un cadru didactic.
  2. Nimeni nu va lua sticlute dulapiorul cu substante, in timpul orei, cu exceptia laborantului.(modificat 05.10.2013) si profesorii de chimie vor avea acces la dulapior
  3. Laboratorul de informatica poate fi folosit de catre elevi si in afara orelor.

Aici se vede faptul ca daca am elimina textul taiat s-ar pierde sensul, adica nu am mai sti ca si laborantul are totusi acces. Ideea in exemplul de mai sus era de a spune cu nu doar laborantul are acces acolo, ci de acum inainte si profesorii. Deci informatia ca inainte doar laborantul avea acces, trebuie sa ramana pentru a transmite imaginea completa a situatiei.

Insa daca exemplul arata asa:

<div class="output">
Regulament (versiunea 5, modificari):
<ol>
<li>Nu se intra in laboratorul de chimie fara a fi insotiti de un cadru didactic.</li>
<li>Nimeni nu va lua sticlute dulapiorul cu substante, in timpul orei, cu exceptia laborantului.</li>
<li><del>Laboratorul de informatica poate fi folosit de catre elevi si in afara orelor.</del></li>
</ol>

si se afiseaza asa:

Regulament (versiunea 5, modificari):
  1. Nu se intra in laboratorul de chimie fara a fi insotiti de un cadru didactic.
  2. Nimeni nu va lua sticlute dulapiorul cu substante, in timpul orei, cu exceptia laborantului.
  3. Laboratorul de informatica poate fi folosit de catre elevi si in afara orelor.

inseamna ca a treia regula pur si simplu va fi eliminata din text, in viitor. In urmatoarea versiune afisata a regulamentului, ea nu va mai exista si pentru moment este scrisa aici doar pentru a notifica faptul ca regula aceasta a disparut.

Surse:

Tagul <q>...</q>

Defineste un citat scurt (sursa poate fi precizata cu atributul cite). In general va avea ca efect vizual incadrarea intre ghilimele a citatului (insa versiuni mai vehi de IE nu afiseaza ghilimelele). Este un element de tip inline.

Atentie, nu folositi acest tag doar pentru afisarea ghilimelelor, ci folositi-l in scopul precizat, de citat. Pentru ghilimelele de exprimare, de exemplu in sintagma ce "bine" arati astazi, folositi caracterele &quot;("ghilimele drepte") sau &ldquo; si &rdquo;(“ghilimele curbate, de deschidere si inchidere”)

O comparatie intre cite, q si blockquote o gasiti aici

Tagul <br/>

Insereaza o linie noua.

Nu folositi acest tag pentru a crea spatii intre zonele text. Pentru acest scop avem tagul <p>. Folosind tagul <p> obtinem si spatierea dorita intre paragrafe, dar si o structurare mai buna a documentului.

Daca aveti nevoie de spatii mai mari, folositi CSS (de exemplu, ajutandu-va de proprietatea margin).

Tagul <a></a>

Tagul <a> si-a dobandit numele de fapt de la cuvantul anchor.

Tagul a este folosit pentru a introduce o legatura (un link) catre un alt fisier( nu neaparat tot html), URL-ul fisierului respectiv fiind specificat ca valoare a atributului href. Un alt atribut important este target care specifica locul in care se va deschide pagina (in cadrul paginii curente, inclocuind documentul, sau intr-o fereastra noua, sau intr-un anume frame in cazul cand folosim asa ceva).

Acest tag poate indica un link extern cum s-a mai vazut, insa de asemenea si un link intern, in pagina. Aceasta se poate realiza dupa ce s-au setat in pagina anumite puncte de reper catre care putem pune un link. Aceste puncte de reper se seteaza ori tot cu tagul a urmat de atributul name (<a name="anc1">aici</a>), ori prin intermediul atributului id. Tagul <a>, cu atributul name, nu va avea niciun efect vizual, doar pune un "stegulet" acolo. Indicat insa este sa se foloseasca varianta cu id-ul, deoarece varianta cu atributul name al lui a este invechita.

Ca sa ne referim apoi la acel punct din document, trebuie sa creem un link deci tagul <a> impreuna cu atributul href:

<a href="#anc1">link catre anc1</a>.

Asa cum e scris mai sus linkul pointeaza in interiorul paginii, datorita lui # care simbolizeaza pagina curenta. Ce urmeaza dupa # e locul anume din pagina unde trebuie sa se duca browserul. De obicei cand facem click pe un astfel de link, browserul va afisa elementul ancorat, primul pe ecran (in sensul ca va face scroll pana ajunge primul rand afisat), insa daca nu are destul continut dupa el, il poate afisa si undeva la mijlocul zonei vizibile din pagina (deoarece nu poate sa introduca linii noi sau altceva ca sa-l aduca sus), practic oferind sfarsitul paginii.

Se poate defini un link catre o ancora din alta pagina (functioneaza la fel doar ca va face scroll pana la elementul anc1 din altapagina.html):
<a href="altapagina.html#anc1">link catre anc1</a>.

Definirea unui "stegulet" se poate face si prin atributul id, care in general poate fi continut de orice element. De exemplu daca avem in pagina headerul:

<h2 id="cap4">Capitolul 4</h2>.

atunci linkul (in cadrul paginii) catre acest h2 va fi:

<a href="#cap4">clik aici pentru capitolul 4</a>.
URI Schemes
  • sintaxa, in general, e de forma nume_schema:parametru
  • nu toate numele de schema sunt protocoale
  • se pot pune direct in bara de adrese a browseului, sau ca valori pentru atributul href al tagului <a>

Mai multe detalii:
http://en.wikipedia.org/wiki/URI_scheme

Tagul <bdo>...</bdo>

Vine de la Bi-Directional Override. Este folosit pentru a schimba directia de scris a textului. Acest lucru se poate face cu ajutorul atributului dir (care poate avea valorile rtl (right to left) sau ltr (left to right - cum e si implicit)).

Diverse alte taguri:

<tt></tt>, <sub></sub>, <sup></sup>, <em></em>, <strong></strong>, <ins></ins>, <del></del>, <cite></cite>, <address></address>, <samp></samp>, <code></code>, <kbd></kbd>, <var></var>, <dfn></dfn>.

Tagul <abbr>...</abbr>

Sunt folosite pentru a explica semnificatia unei abrevieri, respectiv a unui acronim. Explicatia se pune in atributul title.

Inainte se folosea si tagul <acronym>...</acronym> echivalent cu abbr. In HTML5 <acronym> este deprecated.

Tagul <img />

Introduce o imagine in pagina. Sursa imaginii (calea fisierului) este data cu ajutorului atributului src (poate fi o imagine externa site-ului sau locala, calea poate fi atat relativa cat si absoluta).

Tagul <dir></dir>

Acest tag creaza o lista de nume de directoare. Elementele din cadrul listei se vor introduce tot cu ajutorul tagurilor <li></li>. Pe ecran se va afisa similar cu o lista neordonata. Acest tag, insa, spre deosebire de lista neordonata nu permite schimbarea tipului bulletului. El este deprecated in HTML4 si nu mai e acceptat in HTML5.

Tagul <menu></menu>

Acest tag creaza o lista de nume de directoare. Se aseamana cu <dir> in sensul ca elementele din cadrul listei se vor introduce tot cu ajutorul tagurilor <li></li>, iar pe ecran se va afisa similar cu o lista neordonata si nici aici nu exista optinunea de schimbare a tipului bulletului. El este deprecated in HTML4 dar i-a fost reinnoita specificatia in HTML5, insa deocamdata noua specificatie nu este implementata de majoritatea browserelor.

Tagul <iframe></iframe>

Defineste un inline frame. Sursa paginii deschise in iframe se da ca valoare atributului src, exact ca si pentru frame. Continutul acestui element de obieci e un text de atentionare care se va afisa in browserele care nu suporta iframe-uri.

Imagini harta

Sunt imagini pe care s-au definit anumite zone cu rol de link. Aceste zone pot fi sub forma de cerc, dreptunghi sau poligon. Imaginea se introduce in pagina in mod obisnuit folosind tagul <img>. Harta se defineste cu ajutorul tagului <map>. Tagul <area> se poate gasi doar intr-un map si defineste suprafata de harta pe care se va pune linkul. Ca si in cazul tagului <a>, tagul <area> poate avea atributele href si target care indica adresa paginii si fereastra in care aceasta se va deschide. Legatura dintre <map> si <img> se realizeaza setand valoarea atributului name al map-ului si punand exact aceeasi valoare precedata de un diez in atributul usemap al lui <img>.

Taguri structurale HTML 5

Aici puteti gasi specificatiile HTML5

Tagul <hgroup>...</hgroup>

Acest tag a fost eliminat din standard.

Este folosit in cazul in care vrem sa grupam mai multe headere sub o forma unitara. Poate contine numai elemente de tip h1-h6.

De exemplu daca folosim h1 ca titlu si h2 ca subtitlu va fi nevoie de hgroup, deoarece h2 e legat ca sens de h1, este o continuare a acestuia.

Exemplu:

<hgroup>
<h1>Matematica distractiva</h1>
<h2>O pagina web pentru cei care vor sa descopere partea amuzanta si vesela a matematicii :)</h2>
</hgroup>
<!--Mai jos se poate folosi hgroup? -->
<h3>Capitolul 1</h3>
<h4>Ha, ha, I lied! :D Ecutatii diferentiale!</h4>
<p>Ecuatiile diferentiale se definesc astfel.... etc.</p>

Dar intr-o pagina unde h1 e titlu, iar sub el e un h2 dar cu rol de titlu de capitol (de subsectiune) atunci hggroup nu se mai poate folosi. De exemplu:

<h1>Alimente sanatoase</h1>
<h2>Rosiile</h2>
<p>S-a observat ca rosiile .... etc.</p>
<h2>Varza</h2>
<p>Varza este printre cele mai .... etc.</p>

"Rosiile" este titlu de sine statator pentru un fragment de pagina, si deci chiar daca apare imediat sub h1 nu va fi grupat cu acesta.

Mai multe detalii:
http://html5doctor.com/the-hgroup-element/

Tagul hgroup a fost scos din standardul html5

Mai multe detalii despre cum puteti sa scrieti un titlu cu subtitlu gasiti la http://www.w3.org/html/wg/drafts/html/master/common-idioms.html#sub-head.

Tagul <main>...</main>

Conform specificatiilor, tagul main trebuie sa cuprinda continutul specific al paginii. Adica sa nu integreze elemente care se repeta pagina de pagina in cadrul site-ului ci doar continutul ce tine de pagina curenta. Prin urmare, tagul main trebuie sa apara doar o singura data pe pagina. El nu poate fi inclus in elementele: article, aside, footer, header, nav.

Surse:

Taguri de formatare in HTML 4 (carora li s-a adaugat un rol semantic in HTML5)

O parte dintre tagurile prezentate mai sus aveau un rol diferit in HTML4: aveau doar un rol de formatare si nu veneau cu o informatie despre semnificatia textului din interiorul lor. De aceea, daca intalniti pagini mai vechi care par ca folosesc aceste taguri in mod necorespunzator, observati doctype-ul: cel mai probabil acele pagini sunt scrise intr-o versiune veche a standardului,de exemplu: HTML4, XHTML 1.0 etc.

Tagurile <b>...</b>,<i>...</i>, <u>...</u> si <s>...</s>

Aceste taguri au pe rand rolul de a reda caractere aldine, italice, subliniate si respectiv taiate. Pana la html5, ele aveau intr-adevar doar rol de formatare, fara a da informatii efective despre text. Insa in cadrul noului standard li s-a impus si o nuanta semantica. Astfel pentru cazurile in care chiar nu exista nicio nuanta semantica ci se doreste doar o anumita formatare, se va folosi css.

Tagurile <big>...</big> si <small>...</small>

In standardele mai vechi de HTML aceste taguri erau folosite pentru a obtine caractere mai mari si respectiv mai mici decat fontul default.
Tagul <big> este deprecated in HTML5 si veti folosi css cu proprietatea font-size pentru a obtine efectul de litere mai mari. Tagul <small> insa, nu a fost eliminat deoarece a capatat un rol semantic in HTML5. Tagul small, conform standardului, este folosit pentru ceea ce s-ar fi pus in small print intr-un document tiparit: comentarii scurte asupra textului, completari/detalii - ca un fel de "paranteze", informatii de copyright, indicarea sursei infomatiilor, restrictii legale etc.

Tagul <svg>...</svg>

Permite integrarea de continut svg (scallable vector graphics) intr-o pagina html. Cu ajutorul acestuia puteti desena diverse forme geometrice (cercuri, dreptunghiuri etc.), puteti realiza animatii cu ajutorul elementelor desenate etc. Pentru a delimita zona de desenare (dimensiunea svg-ului) trebuie folosite atributele width si height (cu valorile corespunzatoare latimii si inaltimii elementului svg).

Cateva taguri svg:

Surse:

Tagul <mark>...</mark>

Realizeaza un highlight asupra continutului cuprins pentru a aduce atentia asupra acestuia.

Tagul <time>...</time>

Poate contine o data, o ora etc. La un moment dat a fost sters din specificatii fiind inlocuit cu tagul <data> dar apoi s-a revenit la el si a fost redefinit. Tagul, asociat cu atributul datetime poate specifica orice imformatie temorala in partea de continut, urmand ca in atributul datetime sa fie trecuta data si ora exacta, conform urmatorului format YYYY:MM:DD(T sau spatiu)HH:MM:SSS.SSS(+/-)TimpUTC. De exemplu in Bucuresti e UTC+3, asa ca am putea scrie:

Ionel i-a trimis lui Gigel un SMS <time datetime="2012-10-18T05:50:34.123+03:00">azi, dimineata devreme</time>.

Se poate inlocui T-ul cu spatiu. (T-ul vine de la timp, arata ca dupa data urmeaza si ora efectiva).

Ionel i-a trimis lui Gigel un SMS <time datetime="2012-10-18 05:50:34.123+03:00">azi, dimineata devreme</time>.

De asemenea pot exista mai putine informatii in datetime (poate Gigel nu stie cate secunde si milisecunde erau cand a prmit SMS-ul si nici nu vrea sa identifice zona de timp UTC).

Ionel i-a trimis lui Gigel un SMS <time datetime="2012-10-18 05:50">azi, dimineata devreme</time>.

De asemenea se poate pastra doar data.

Ionel i-a trimis lui Gigel un SMS <time datetime="2012-10-18">azi</time>.

Mai multe detalii:

Tagurile <figure>...</figure> si <figcaption>...</figcaption>

Asa cum este mentionat in specificatii, tagul figure insereaza un element la care se face referire din cadrul continutului principal, precum o digrama, o ilustratie, o poza etc. Un figure poate avea si o descriere aferenta, care se introduce cu ajutorul lui figcaption (acest tag trebuie sa fie inserat in continutul lui figure).

Tagul <wbr>

Numele tagului vine de la sintagma wordbreak. Acesta este inserat in cuvinte foarte lungi si in cazul in care cuvantul nu are spatiu in containerul sau se va desparti in doua acolo unde este un astfel de tag.
Atentie, deocmadata tagul nu este implementat de Internet Explorer.
Sa vedem un exemplu:

Miau<wbr>Miau<wbr>Miaaaau<wbr>Miau!<wbr>Miaaaau
In div-ul de mai jos este scris exact acest cod. Observati ca ultima parte a cuvantului e deja separata (apare pe linia a doua) fiindca nu a incaput in latimea divului. Veniti cu cursorul pe dreptunghi; acesta va incepe sa-si micsoreze latimea si veti vedea cum pe rand cuvantul se desparte acolo unde exista tagul <wbr> (evident, exemplul va merge doar pe Chrome, Firefox si Opera).
MiauMiauMiaaaauMiau!Miaaaau

Tagul <progress>...</progress>

Tagul progress este folosit pentru a arata gradul de completare al unui task. Cu ajutorul atributelor max si value se poate specifica valoarea maxima pentru task, si cat din el a fost realizat. Poate avea stare definita (cand cele doua atribute sunt setate), sau nedefinita (cand niciunul din atribute nu e setat, sau, in unele browsere, cand doar unul din atribute e setat, insa, daca vreti sa fie afisat cu stare nedefinita e mai sigur sa nu aveti setat niciunul din cele doua atribute).

Exemplu de afisare: Text care se afiseaza daca browserul nu suporta tagul progress.

Surse:

Taguri media,pentru continut embedded

Tagul <video> </video>

Acest tag este folosit pentru a introduce un fisier video in pagina, asa cum se poate observa in exemplu. El poate cuprinde si text drept continut (ma refer la textNodes, nu la elemente de tip source sau track), insa acest text in mod normal nu va afisat; in schimb va aparea pe ecran daca browserul folosit nu ofera inca suport pentru acest tag. Putem folosi acest fapt pentru a atentiona utilizatorul ca era acolo un element video dar care nu poatefi redat, de exemplu: <video controls="controls">
Continutul video nu poate fi afisat, deoarece browserul nu recunoaste acest tag.
<!--ar urma niste elemente de tip source -->
</video>

Tagul <audio> </audio>

Acest tag este folosit pentru a introduce un fisier audio in pagina, asa cum se poate observa in exemplu. Acesta, ca si video poate avea text drept continut, insa acest text in mod normal nu va afisat, va aparea pe ecran doar in cazul browserelor care nu au implementat acest tag.

Tagul <source>

Este un tag ce se gaseste doar in interiorul altor taguri media, precum audio si video, nefiind un element de sine statator. Acesta specifica mai multe alternative (in mai multe formaturi, de exemplu pentru video, in mp4 si in ogv) ale fisierului media respectiv. Este important de setat atributul type care indica tipul MIME al fisierului fiindca in felul acesta browserul poate determina daca suporta formatul precizat inainte de a descarca fisierul (ceea ce elimina, deci, un download inutil, in cazul in care formatul nu e acceptat).

MathML

Cum ati putea deduce si din nume este un markup language pentru formule, expresii matematice.

Mai multe informatii gasiti la:
http://www.w3.org/Math/
http://www.w3.org/TR/MathML3/

Despre taguri:
http://www.w3.org/TR/MathML3/chapter3.html

MathML functioneaza deocamdata doar in Firefox si Safari (ultimele versiuni). un tabel exact cu browserele care au implementat MathML aveti la http://caniuse.com/mathml. Deocamdata suportul pentru MathML este foarte restrans, de aceea pentru formule matematice care trebuie introduse in site-uri se vor folosi in continuare imagini. De asemenea se poate folosi display-mathml care pemite afisarea formulelor matematice, dar care e inca in varianta alpha: http://code.google.com/p/display-mathml/ . Pentru a-l putea folosi, veti da copy-paste la cele doua linii de cod de pe site in sectiunea head a paginii.

Cateva taguri pe care le vom folosi:

tagul <math></math>
elementul math este radacina unui element de timp MathML; practic indica inceputul definirii unei formule.
tagul <mi></mi>
definesc un identificator
tagul <mo></mo>
definesc un operator
tagul <mn></mn>
definesc un numar
tagul <mrow></mrow>
realizeaza o grupare pe linie(orizontala) a unui set de expresii
tagul <mtable></mtable>
defineste o matrice si are drept componente tagurile <mtr></mtr> si <mtd></mtd> care definesc randurile, respectiv celulele (de pe acele randuri) din matrice. Foarte asemanator cu table, tr si td din HTML.
tagul <msub></msub>
defineste un indice
tagul <msup></msup>
defineste o putere

Atentie, nu se pot insera taguri html in zona de definire a formulei matematice (adica intre <math></math>). Orice identificator, numar, operator trebuie incadrat de tagurile specifice (nu veti scrie pe undeva pur si simplu 2+a, de exemplu, ci pentru expresia aceasta se vor folosi un <mn>, un <mo> si un <mi>, iar apoi depinde de formula mare din care face parte aceasta subformula, pot fi in final incadrate toate de un <mrow> - dati exemplu de un caz cand trebuie folosit mrow si unul in care nu trebuie).

HTML5 inca in lucru

Atentie, in cazul tagurilor HTML5 inca se mai lucreaza la specificatii si cu timpul se pot schimba (cum s-a intamplat, de exemplu, in cazul tagului aside; in afara de sensul de continut legat de text dar cu informatii relativ de sine statatoare, a primit si rolul de continut secundarin pagina). E bine ca pana se termina complet lucrul la standardizarea acestora sa verificati mereu daca sunt noutati.

Taguri si atribute deprecated

Tagurile si atributele deprecated sunt taguri care provin din versiuni mai vechi de html, si care nu ar mai trebui folosite. Ele au fost inlocutie cu alte tehnologii (alte taguri, obtinerea efectului lor prin stil css etc.)

Atribute prezentationale

Nota: Cuvantul prezentational e un anglicism, expresia vine de la presentational attributes insa veti gasi acest termen in multe carti si tutoriale scrise in limba romana. Atributele prezentationale sunt atribute care determina caracteristici ale modulului de afisare al elementului (culoarea textului, fundal, aliniere etc). Urmatoarele atribute ale tagului body nu mai sunt considerate a fi de actualitate cu toate ca sunt suportate de catre browsere. (Au fost inlocuite de CSS) Vom arunca o privire asupra lor pentru a sti despre ce e vorba in caz ca soarta nemiloasa ne va pune fata in fata cu codul unei pagini web mai vechi. (pe care sa mai fim nevoiti si sa o modificam):

Tagul <font></font>

Tagul font este folosit pentru formatarea continutului (setarea unei anumite culori - atributul color, a unei dimensiuni de font - size, tipul de font - face). El este deprecated in HTML4 si nici macar nu mai e acceptat in HTML5, prezentand foarte multe dezavantaje fata de formatarea prin CSS (de aceea nu va fi folosit decat in primul laborator, ca sa vedeti cum functioneaza). Atentie, atributul size nu reprezinta dimensiunea in pixeli asa cum ati putea crede la o prima vedere. Atributul size poate avea valori intregi intre 1 si 7 inclusiv. Insa nu se poate cunoaste cu siguranta dimensiunea textului in pixeli, acest aspect e lasat la latitudinea browserului, care va decide cat de mare sa afiseze textul, avand grija doar ca dimensiunea 1 sa fie mai mica decat dimnesiunea 2 etc. Un articol care explica mai in detaliu acest aspect gasiti aici.

<font color="lightblue" size="5" face="Comic Sans MS">text formatat</font>
va afisa:

Tagul <center></center>

Centreaza in pagina elementele cuprinse in continutul sau. El este deprecated in HTML4 si nu mai e acceptat in HTML5.

Tagurile <s>...</s> si <strike>...</strike>

Caractere taiate cu o linie. Tagul <s> e pur si simplu forma abreviata a lui strike. Tagul <strike> este deprecated in HTML4 si nu mai este acceptat nici in HTML5.

Frame-uri

Sunt deprecated in HTML5.

Tagurile <frameset></frameset> si <frame />

Frame-urile permit deschiderea mai multor pagini web in paralel(in aceeasi fereastra). Tagul frameset defineste un set de frame-uri aranjate sub forma de randuri, coloane. Se poate obtine si o forma mixta (si randuri si coloane).

Tagul <noframes></noframes>

Folosit pentru a afisa un mesaj catre utilizatorii al caror browser nu suporta frame-uri.

Tagul <iframe></iframe>

Defineste un inline frame. Sursa paginii deschise in iframe se da ca valoare atributului src, exact ca si pentru frame. Continutul acestui element de obieci e un text de atentionare care se va afisa in browserele care nu suporta iframe-uri.

Spre deosebire de celalalt tip de frame-uri, nu este deprecated, de aceea a fost descris mai sus.

Avantaje si dezavantaje in a folosi frame-uri:
http://www.mediacollege.com/internet/html/frames/pros-cons.html

Taguri ce vor fi detaliate mai tarziu

In afara de tagurile prezentate in acest laborator mai sunt cateva taguri html pe care le vom discuta mai tarziu, cand vom vorbi despre css si javascript. Aceste taguri sunt:

Html5 outliner

Pentru a verifica structura corecta a documentului html, il puteti testa cu un outliner pentru html5. Un outliner va afisa structura pe capitole, subcapitole etc. conform utilizarii tagurilor de sectionarea si a heading-urilor. Outlinerele folosesc in general acelasi algoritm de impartire logica pe sectiuni pe care o folosesc si crawlerele sau alte navigatoare automate (user-agents). Aceasta impartire le este utila pentru a "intelege" mai bine textul si pentru a-l indexa ca atare (crawlers), ori pentru a culege diverse alte informatii din el (in cazul altor tipuri de user-agents).
Un astfel de tool gasiti la http://gsnedders.html5.org/outliner/. Algoritmul standard de outlining (impartire logica pe sectiuni) specificat de w3c il gasiti la http://www.w3.org/TR/html5/sections.html#outline

Taguri neimplementate inca

Alte taguri HTML5 care au acoperire prea mica in randul populatiei browserelor si pe care nu le vom face din acest motiv la laborator (ca deocamdatan-avem ce vedea la ele),insa vor fi mentionate aici:<details>, <summary>, <command>, <track>, <bdi>. <dialog>.

Alte articole despre html

Teme