Element HTML

De la Wikipedia, enciclopedia liberă.
Salt la navigare Salt la căutare

Un element HTML, în informatică , de asemenea , de multe ori numit un tag HTML, indică o structură într - un HTML de documente și o metodă de sortare a conținutului ierarhic. Mai precis, acesta este un SGML element care satisface cerințele unuia sau mai multor HTML DTD - uri .

Descriere

Elementele pot reprezenta titluri, paragrafe, hyperlink - uri , liste, formulare obiecte, media încorporate, și diverse alte structuri.

Elementele goale sunt închise prin adăugarea unui „/”, ca în închiderea etichetelor. Pentru compatibilitate acesta este recomandat pentru a pune un spațiu înainte de bar. [1]

Unele elemente, cu toate că nu figurează în nici un DTD oficial, sunt susținute de unele browsere web și utilizate de pagini web . Astfel de elemente pot fi ignorate sau afișate necorespunzător de browserele care nu le acceptă.

Tipuri

Elementele HTML constau în general din patru părți:

  • o etichetă de deschidere care definește începutul unui element;
  • unul sau mai multe atribute ale acelui element cu valorile lor respective;
  • conținutul de informații care urmează fie afișate;
  • o etichetă de închidere: este opțional pentru mai multe elemente, în foarte puține cazuri , un „element gol“ nu are conținut sau eticheta de închidere. XHTML elemente trebuie să fie întotdeauna închise.

Cuibărit

Multe elemente HTML pot fi „ imbricate “. Cuibărirea este mai ușor de înțeles prin exemple:

<p>You<em>rock</em></p>

are <em> elementul în interiorul unui <p> Element. Situația se poate complica, de exemplu

<h1>Children that <em>do <span style="color:red">not</span> clean up</em> their rooms</h1>

Puteți adăuga elemente cât doriți, dar etichetele trebuie închise în ordinea inversă în care au fost deschise.

Gresit
<p>Lucy kissed <em>Jimmy</p></em>
Corect
<p>Lucy kissed <em>Jimmy</em></p>

Capacitatea de a cuib este guvernat de anumite reguli care definesc dacă un element este bloc de nivel sau inline .

Elemente ale structurii documentului

<html>...</html>
Delimiteaza un document HTML ( în loc de un XML document sau altul). Aceste etichete sunt opționale în HTML, dar este posibil ca unele browsere și alte utilitare să nu recunoască documentul fără ele.
<head>...</head>
Delimitează secțiunea antet a documentului care conține informații despre pagină. Aceste etichete sunt opționale în HTML; dacă se omite existența antetului poate fi dedusă în alte moduri.
<body>...</body>
Delimitează corpul documentului care conține conținutul afișat pe pagină. La fel ca <html> si <head> tag - uri nu sunt necesare în cazul în care documentul este în HTML.

Elemente la nivel de bloc și elemente în linie

Boxmodel
Box-model este o cutie care învelește fiecare element HTML [2] .

Un element de nivel de bloc , de obicei , începe o nouă linie în timp ce un element de linie , de obicei , nu. Un element de nivel bloc poate conține și alte elemente ale ambelor blocuri de nivel și de tip inline în timp ce un element inline poate conține numai alte elemente de tip inline. Exemple de elemente de nivel bloc sunt paragrafe, liste, tabele, pozițiile și containerul generale <div> . Elementele de bloc sunt elemente cu un container dreptunghiular format din conținut, căptușeală, bordură și căptușeală exterioară (margine). Puteți specifica dimensiunea sa cu CSS . Elementele inline (de exemplu STRONG, ITALIC și UNDERLINE ") nu creează blocuri, sunt afișate pe aceeași linie cu conținutul etichetei adiacente. Lățimea și înălțimea elementului" inline "depind doar de conținutul său, nu puteți specifica dimensiunea cu CSS.

Elemente antet în HTML 4.01

Pictogramă lupă mgx2.svg Același subiect în detaliu: Meta tag - uri .
<title>...</title>
Indică titlul paginii. Acest element este necesar în fiecare document HTML și XHTML. Diferite agentii utilizator si sisteme de operare afișa titlul în mod diferit. Browsere web afișa , de obicei , în bara de titlu atunci când fereastra este deschisă și în sistemul tava atunci când acesta este redus la minimum. Poate fi numele implicit atunci când salvați pagina sau altceva. Spre deosebire de alte etichete, elementul din titlu nu vă permite să conțină alte etichete. Browserele vor afișa etichetele incluse așa cum sunt. De exemplu , <title>My <b>first</b> pagina </ title> va fi afișat ca "My <b> prima </ b> pagina de web", și nu ca "Prima mea pagina de web".
<meta>...</meta>
Ea delimiteaza metadatele și pot fi folosite pentru a specifica descrierea paginii, cuvintele cheie și o anumită formă <meta http-equiv="foo"> este folosit pentru a specifica comenzi pentru a fi trimise ca un antet HTTP.
<link>
<link /> (în XTML)
Specificați orice tip de link pentru un document, cum ar fi linkurile anterioare și următoare sau versiunile alternative. Este mai comună pentru a conecta un extern Foaie de stil la pagina, după cum urmează:
<link rel="stylesheet" type="text/css" href=" url ">
<base>
<base/> (în XTML)
Specifică valorile de bază pentru linkuri, cum ar fi țintă sau țintă.
<script>...</script>
Folosit pentru a include JavaScript sau alte script - uri din document.
<style>...</style>
Specificați o foaie de stil pentru documentul [1] , de obicei:
<style type="text/css">...</style>
cu date de stil sau referințe precum
/*<![CDATA[*/ @import " url "; @import " url "; /*]]>*/

Elementele corpului definite în HTML 4.01

Toate etichetele corpului nu sunt elemente la nivel de bloc și nu pot fi conținute într-un element în linie.

Titluri

de la <h1></h1> la <h6></h6>
Titluri (sau titluri) la diferite niveluri. Utilizați <h1> pentru nivelul maxim antet (secțiunea principală), <h2> pentru nivelul următor de mai jos (subsecțiunea), <h3> pentru un nivel sub cel precedent, și așa mai departe. Cel mai scăzut nivel al antetului este <h6> .
Cele mai multe browsere web va afișa <h1> ca text mare , cu un alt font și <h6> ca text cu litere aldine mic , dar acest comportament poate fi schimbat cu foi de stil CSS. Elementele antetului nu se pot utiliza numai pentru crearea de text mare sau îndrăzneț - descriu, de asemenea, structura și organizarea documentului. Unele programe le folosesc pentru a genera indicii și schițe.

Text structurat

Multe elemente HTML sunt concepute pentru a schimba structura sau semnificația textului. Unele sunt la nivel de bloc, dar cele mai multe sunt în linie și pot fi incluse în fluxul normal de text.

La nivel de bloc

<p>...</p>
Creați un paragraf. În HTML, eticheta de închidere nu este opțională.
<blockquote>...</blockquote>
Creează un citat, afișat convențional indentat, dar nu conceput pentru a indenta textul. Poate adăuga automat citate. cite atribut poate furniza sursa și trebuie să fie un plin URL .
<pre>...</pre>
Creați text pre-formatat. Textul este afișat cu un font non proporționată exact așa cum a fost scris în fișierul ( a se vedea art ASCII ). Cu CSS: {white-space: pre}
<address>...</address>
Folosit pentru a delimita informațiile despre adresă.

În linie

<em>...</em>
<strong>...</strong>
Accentul (afișat convențional în italice) și un accent puternic ( în mod convențional cu caractere aldine).
<q>...</q>
Un scurt citat. Poate fi afișat cu ghilimele. Citatele pot fi cuibărite. cite atribut poate furniza sursa trebuie să fie un plin URL .
<code>...</code>
O bucată de cod. Convențional afișat într - un font monospaced Esempio di codice. de Esempio di codice.
<del>...</del>
Text șters. Afișat strikethrough: Text șters.
<ins>...</ins>
Text introdus. Adesea folosit pentru a identifica textul care înlocuiește <del> text. Afișat subliniat: Text introdus.
<cite>...</cite>
Citare. Referință la o citare a unei surse sau a unui element din text. ISCED a fost acceptată în HTML 2.0 [3] .
<dfn>...</dfn>
<samp>...</samp>
<kbd>...</kbd>
<var>...</var>
Definiție, eșantion de text, introducere tastatură, variabilă. Acestea sunt similare cu <code> , dar poate avea un sens mai specific.
<sub>...</sub>
<sup>...</sup>
Crearea unui text sau subscript Apice. CSS echivalent: {vertical-align: sub} sau {vertical-align: super}

Liste

<dl>...</dl>
Creați o listă de descrieri, constând din perechi de termeni (sau nume) și descrierea (sau valoarea) acestora.
<dt>...</dt>
Creați un termen din lista de descrieri.
<dd>...</dd>
Creați o descriere a listei de descrieri.
<ol>...</ol>
<ul>...</ul>
Creați, respectiv, o listă ordonată (numerotată) sau nesortată (cu marcatori).

Pentru ul , The type atribut poate fi folosit pentru a specifica tipul de numerotare dar CSS oferă mai mult control: {list-style-type: foo} [ Cum? ], Care implicit este araba unul. Pentru ul , CSS poate fi folosit pentru a defini marker lista: {list-style-type: foo} . Markerul implicit este un punct înnegrit

<li>...</li>
Creați un element de listă în liste ordonate sau neordonate
<dir>...</dir> (învechită)
Delimitați lista de un folder. Scoase din uz în favoarea <ul> .
<menu>...</menu> (învechită)
Creați o listă de meniu. Ar trebui să fie mai concis decât o <ul> lista, dar nu este bine susținută. Scoase din uz în favoarea <ul> .

Exemple de liste

Liste sortate

Pentru a crea o listă ordonată în HTML, utilizați un ol element de care conține un li element pentru fiecare dintre elementele din listă. De exemplu:

Cod HTML
 <ol>
    <li> Ioan </li>
    <li> Luca </li>
    <li> Marco </li>
    <li> Giacomo </li>
</ol>
  1. Ioan
  2. Luca
  3. Marco
  4. Giacomo

Numerotarea standard utilizează sistemul arab, dar puteți alege , de asemenea, literele alfabetului latin modern , sau numerotarea romană , atât litere mari și mici. Pentru a seta tipul de numerotare, pur și simplu atribuie primul termen de numerotare la type atributul ol . De exemplu:

Codul cu setările implicite de type (1) Litere mici (a) Literele majuscule (A) Cifre romane minuscule (i) Cifre romane majuscule (I)
 <ol type = "1">
    <li> Luca </li>
    <li> Marco </li>
    <li> Carlo </li>
</ol>
  1. Luca
  2. Marco
  3. Carlo
  1. Luca
  2. Marco
  3. Carlo
  1. Luca
  2. Marco
  3. Carlo
  1. Luca
  2. Marco
  3. Carlo

De start atribut, pe de altă parte, vă permite să specificați punctul de plecare al numerotarea, utilă, de exemplu, atunci când doriți să opriți temporar lista. Intr-adevar:

HTML code, cu setările implicite de start (1) Începeți de la 8 Începeți de la 26
 <ol type = "a" start = "1">
    <li> Luca </li>
    <li> Marco </li>
    <li> Carlo </li>
</ol>
  1. Luca
  2. Marco
  3. Carlo
  1. Luca
  2. Marco
  3. Carlo
Liste neordonate

Neordonate (numite , de asemenea , liste cu marcatori) trebuie să fie creat cu un ul element de care va conține, ca și pentru listele ordonate, un li elementul. Lista neordonată este implicită în stilul unei liste cu marcatori cu cercuri umplute. De exemplu:

Cod HTML
 <ul>
    <li> Ioan </li>
    <li> Luca </li>
    <li> Marco </li>
    <li> Giacomo </li>
</ul>
  • Ioan
  • Luca
  • Marco
  • Giacomo

type atribut de ul poate face indicii ale elementelor individuale iau trei stiluri diferite: cu valoarea disc o listă cu marcatori cu cercuri pline vor fi create ca cel implicit, cu valoarea circle cercurilor vor fi de aceeași mărime , dar gol și în cele din urmă cu square o listă cu marcatori cu pătrate mici umplute vor fi create. Deoarece nu există nici un tip de ordine interpretare, de start nu este furnizat atributul.

Cod cu implicit type (disc)
 <ul type = "disc">
    <li> Luca </li>
    <li> Marco </li>
    <li> Carlo </li>
</ul>
  • Luca
  • Marco
  • Carlo

Mese

<table>...</table>
Creați un tabel
<tr>...</tr>
Creați un rând într-un tabel
<th>...</th>
Creați o celulă de antet într-un rând; conținutul este de obicei afișat cu caractere aldine și centrat
<td>...</td>
Creați o celulă de date într-un tabel.
<colgroup>...</colgroup>
Specifică un grup de coloane într-un tabel.
<col> ( <col /> in XHTML)
Specificați atributele pentru o coloană.
<caption>...</caption>
Specificați un titlu pentru întregul tabel.
<thead>...</thead>
Specifică antetul tabelului. Această secțiune poate fi repetată dacă tabelul este împărțit în mai multe pagini (în tipar sau alte tipuri posibile de tipărire).
<tbody>...</tbody>
Specifică partea principală a tabelului.
<tfoot>...</tfoot>
Specifică partea de jos a tabelului. La fel ca <thead> , Această secțiune poate fi repetată dacă tabelul este împărțit în mai multe pagini (în imprimat sau alte tipuri posibile de imprimare).

Formulare

HTML poate defini doar forma format, intrări de utilizator sunt procesate de către un client - side sau server-side limbaj de scripting .

<form>...</form>
Creați un formular.
<select name="foo">...</select>
Creați un meniu listă din care utilizatorul poate alege un singur element. Poate fi afișat ca un meniu derulant.
<option>...</option>
Creați un element de meniu.
<input type="checkbox">
Creați o casetă de selectare.
<input type="radio">
Creați un buton radio; dacă mai multe butoane radio au același nume, utilizatorul poate selecta doar unul.
<input type="submit" value="NAME">
Creați un buton de trimitere.
<input type="image" border=0 name="NAME" src="name.gif">
Creați un buton de trimitere utilizând o imagine.
<input type="reset">
Creați un buton de resetare care restabilește valorile modulului la valorile inițiale.
<input type="text">
Creați o casetă de text cu o singură linie. Dimensiunea setează lungimea cutiei. Maxlength setează numărul maxim de caractere care pot fi introduse (poate fi mai mare decât Size).
<textarea>...</textarea>
Creează un set zonă de text multilinie de cols (coloane) și rows (rânduri) atribute. Textul dintre etichete va apărea în zona de text la încărcarea paginii.

Alte elemente

<span>...</span>
Creați o diviziune logică pe linie. Vă permite să atribuiți un id sau o clasă porțiunilor de text, care pot fi utilizate cu CSS.
<div>...</div>
Creați un nivel logic la nivel de bloc. Mai ales pentru utilizarea CSS.
<center>...</center> (învechită)
Creați și un bloc de text centrat. Deșucheat în favoarea <div> cu aliniere centrata definite în CSS.
<hr>
<hr /> (în XHTML)
Inserează o linie orizontală.
<object>...</object>
Include un obiect de pe pagina de tipul specificat de type . Acesta poate fi orice obiect MIME că browser - ul recunoaște, cum ar fi o pagină de încorporat ( a se vedea <iframe>), un plug-in , cum ar fi Flash , sau un fișier audio.
<param>...<param/> (în XHTML)
Această etichetă apare doar în interiorul object elementului și stabilește parametrii pentru obiectul , cum ar fi lățimea, înălțimea sau URL a conținutului.
<embed>...</embed> (neoficial)
Invocă un plug-in Manager pentru tipul specificat de type . Folosit pentru a include fișiere flash, fișiere audio. neoficial, <object> este de preferat.
<noembed>...</noembed> (neoficial)
Specifică o alternativă dacă obiectul inclus nu poate fi afișat.
<applet>...</applet> (neoficial)
Include un applet Java pe pagină. Neoficial, <object> este de preferat.

Formatare

Pictogramă lupă mgx2.svg Același subiect în detaliu: CSS .
<b>...</b> (învechită)
Utilizați caractere aldine. Echivalent CSS: {font-weight: bold}
<i>...</i>
Utilizați italice. Echivalent CSS: {font-style: italic}
<big>...</big>
Crearea de text mai mare. Echivalent CSS: {font-size: larger} .
<small>...</small>
Crearea mai mici de text .css echivalent: {font-size: smaller}
<s>...</s> și <strike>...</strike> (învechită)
Text clar: Cleared Echivalent CSS:. {text-decoration: line-through}
<tt>...</tt>
Utilizați o macchina da scrivere de macchina da scrivere font (fonturi de dimensiuni fixe neproporționale). CSS echivalent: {font-family: monospace}
<u>...</u> (învechită)
Folosiți un font subliniat. Echivalent CSS: {text-decoration: underline}
<font [color= color ,] [size= size ,] [face= face ]>...</font> (învechită)
Tag considerate caduce în favoarea CSS [4] , se poate specifica culoarea textului prin color atributul, tipul cu face și absolută sau relativă size cu size

Exemple:

  1. <font color="green">text</font> creează text de culoare verde.
  2. <font color="#1f4099">text</font> creează textul de culoare hex # 1f4099.
  3. <font size="4">text</font> creează textul de dimensiune 4. Dimensiunea variază de la 1 la 7. Dimensiunea standard este 2, cu excepția cazului în care este specificat în <<body> sau alte etichete.
  4. <font size="+1">text</font> creează text cu o dimensiune a crescut cu 1 în comparație cu dimensiunea standard. . <font size="-1">text</font> este exact opusul.
  5. <face="Courier">text</font> afișează textul în fontul Courier.

CSS echivalent pentru atributele textului:

  • <font size="N"> chibrituri {font-size: Ypx} (specificația HTML nu definește relația dintre "N" mărime și "Y" dimensiune pixeli).
  • <font color="red"> chibrituri {color: red}
  • <font face="Courier"> chibrituri {font-family: Courier}

Culori

Pictogramă lupă mgx2.svg Același subiect în detaliu: culori Web .

Culorile Web sunt culori utilizate în afișarea paginilor web de pe World Wide Web și în metodele pentru descrierea și specificând aceste culori. Culorile pot fi specificate ca un RGB triplet sau în hex format (un triplet hex) sau , în unele cazuri , după numele lor comune în engleză. Un instrument de alegere a culorii sau a altor software - ul grafic este adesea folosit pentru a genera valori de culoare. Un exemplu: #0099CC (un tip de albastru , care poate fi , de asemenea , #0099CC Pacific Blue ).

Legături și ancore

Pictogramă lupă mgx2.svg Același subiect în detaliu: Anchor .
<a>...</a>
Creează un element care devine o ancoră, care poate fi atât sursa și destinația unui hyperlink .
Cu href set atribut la o adresă URL, ancora devine originea unui hyperlink către o altă resursă (sau la un alt punct pe aceeași pagină);
În mod alternativ (și , uneori , în același timp), cu name (sau id atribut) ancora devine ținta unui hyperlink dintr -o altă resursă, care ca un semn de carte se va derula pagina la acel punct. Un URL poate indica faptul că destinația cu un identificator fragment (adăugând simbolul „#“ urmat de numele ancorei la sfârșitul URL) în URL - ul.
Fiecare element poate fi transformat într - o ancoră prin id atributul astfel încât folosind <a name="foo"> nu este necesară.
Mai mult, title atribut poate fi setat pentru a da o scurtă informație despre hyperlink.
<a href=" URL " title=" testo in aiuto "> Etichetta collegamento </a>
Când cursorul este deasupra link - ul, de obicei , se transformă într - o mână cu degetul arătător întins în multe grafice browsere , iar textul conținut în title apare atribut într - o cutie specială până când mișcarea cursorului.
Unele browsere afișează text alternativ în același mod, dar acest lucru este tehnic greșit.

Galerie de imagini

<img...>
<img... /> (în XHTML)
Include o imagine cu src atributul, alt oferă text alternativ , în cazul în care imaginea nu poate fi afișată. Alt este conceput ca text alternativ, deși unele browsere îl afișează ca un indiciu; title atribut este indiciu.

Variat

<br>
<br/> (în XHTML)
Specifică o întrerupere de linie.
Exemplu de formă a zonei pe o imagine. În partea de sus sunt indicate zonele care pot fi făcute clic de utilizator, în partea de jos ceea ce vede utilizatorul.
Exemplu de etichetă <map> pe o imagine. În partea de sus sunt indicate zonele care pot fi făcute clic de utilizator, în partea de jos ceea ce vede utilizatorul. Acesta din urmă le va observa doar atunci când se deplasează peste ele cu mouse-ul
<map>...</map>
Specifică o hartă a clientului, care sunt zone pe care utilizatorul poate face clic.
<area>
<area/> (în XHTML)
Specifică o zonă pe o hartă.
<blink>...</blink> (non-standard, descurajata)
Text intermitent. Acesta poate fi , alternativ , redat cu {text-decoration: blink} directivă stil
<marquee>...</marquee> (descurajata)
Tag - ul Depreciată [5] , creează efectul de text defilare. Nu are echivalent în directivele de stil. Atributele sunt:
behaviour : indică tipul de mișcare a textului, acesta își poate asuma următoarele valori:
scroll : textul a ajuns la sfârșitul anului se repetă de la început într - un mod continuu;
slide : textul a ajuns la stațiile de capăt;
alternate : textul a ajuns la ricoșează de capăt și se duce înapoi.
direction : indică direcția de deplasare, poate fi:
left : la stânga;
right : la dreapta;
up : în sus;
down : în jos.
loop : indică numărul de ori mișcarea trebuie să se repete. Dacă nu este specificat, este egal cu infinitul.
scrollamount : indică viteza de deplasare. Numărul este exprimat în pixeli pe secundă.
Utilizarea JavaScript, este posibil să se obțină efectul de blocare / repornire derulând eveniment atributele asociate cu onmouseover , onmouseout , onfocus și onblur onfocus apelarea metodelor this.stop() și this.start() .
<!--...-->
Include un comentariu. Aceasta este o etichetă SGML și nu se limitează la HTML, astfel că poate apărea oriunde în document, chiar înainte sau după DTD - ul </html> . Tot conținutul inserat între eticheta de deschidere <!-- și eticheta de închidere --> nu este afișat.
<hr>
<hr/> (în XHTML)
Această etichetă este utilizată pentru a crea linii de separare. Este posibil să se creeze linii de diferite dimensiuni și culori datorită atributelor width (pentru lungime), height (înălțime) și color , învechite și folosirea directivelor de stil echivalente.
Exemple:
<hr width = "400" height = "10"> (învechită) sau
<hr style="width: 400px; height: 10px;" /> (Directiva cu stil) generează:

<hr width = "50%" height = "2"> (învechită) sau
<hr style="width: 50%; height: 2px;" /> (Directiva cu stil) generează:

<hr color = "red" width = "200" height = "2"> (învechită) sau
<hr style="background-color: red; width: 200px; height: 2px;" /> (Directiva cu stil) generează:

Cadru

Pictogramă lupă mgx2.svg Același subiect în detaliu: iframe și Frameset .

Cadrele, în „cadre” italiene, vă permit să structurați documentul HTML în subdocumente pe care browserul le gestionează ca ferestre separate. De exemplu, un meniu de navigare poate fi întotdeauna menținut fix și vizibil într-un prim cadru poziționat pe marginea stângă a paginii, flancat de un al doilea cadru care cuprinde conținutul principal glisant. În frame Elementele trebuie să fie incluse în interiorul unui frameset element care înlocuiește body și documentul HTML în sine trebuie să fie declarat ca Frameset. Cu alte cuvinte, un html element poate conține un head și un body (în cazul documentelor stricte sau tranzitorii) sau, alternativ, un head și un frameset . [6] Cadrele sunt parte a standardului Frameset HTML 4.0, în timp ce în HTML5 acestea au fost depreciate [7] [8] .

<frameset>...</frameset>
Delimitați setul de cadre. Dispunerea cadrelor este dată de o listă separată prin virgulă în rows și cols atribute.
<frame>...</frame>
Include un singur cadru sau regiune în cadrul cadrului. Un alt document legat prin intermediul src atribut apare în interiorul.
<noframes>...</noframes>
Conține un normală a body elementului cu copii , care va apărea în browser - ul web care nu suporta frame - uri
<iframe>...</iframe>
Un cadru inline special, care poate fi introdus în interiorul unui normală a body elementului. Ea are multe atribute comune cu img element, dar încorporări un alt document HTML în locul unei imagini.

RDFa

RDFa (Resource Description Framework in Attributes) este o recomandare W3C care adaugă o serie de extensii la nivel de atribut la HTML, XHTML și diverse tipuri de documente bazate pe XML pentru a încorpora metadate bogate în documente web. Cartografierea modelului de date RDF permite utilizarea acestuia pentru a încorpora subiectul -expresii RDF-obiect în cadrul documentelor XHTML. De asemenea, permite extragerea modelelor RDF triplate de către agenții de utilizator conformi.

Comunitatea RDFa are un site wiki la instrumente gazdă, exemple și tutoriale [9] .

Esență

Esența RDFa este de a furniza un set de atribute care pot fi utilizate pentru a transporta metadatele într-un limbaj XML (de aici și „a” din RDFa).

Aceste atribute sunt:

despre
un URI sau CURIE care specifică resursa cu care se ocupă metadatele lor
rel și rev
specificând o relație și, respectiv, o relație inversă cu o altă resursă
src, href și resursă
specificând resursa partenerului
proprietate
specificarea unei proprietăți pentru conținutul unui element sau resursă partener
conţinut
atribut opțional care suprascrie conținutul elementului atunci când se utilizează atributul proprietate
tip de date
atribut opțional care specifică tipul de date al textului specificat pentru utilizare cu atributul proprietate
tip de
atribut opțional care specifică tipul (tipurile) RDF al subiectului sau resursei partenerului (resursa la care se referă metadatele).

Beneficii

Există cinci „principii de metadate interoperabile“ îndeplinite de RDFa [10] .

  • Independența editorului: fiecare site își poate folosi propriile standarde
  • Reutilizarea datelor: datele nu sunt duplicate. Nu este nevoie de secțiuni XML și HTML separate pentru același conținut.
  • Autoconținere: HTML și RDF sunt separate
  • Modularitatea schemei: atributele sunt reutilizabile

Mai mult, RDFa pot beneficia de accesibilitatea web ca mai multe informații sunt disponibile pentru tehnologia de asistență [11] .

Exemplu

 <Div xmlns: dc = "http://purl.org/dc/elements/1.1/" 
   despre = "http://www.example.com/books/wikinomics">
  În ultima sa carte
  <Proprietate interval = "dc: title"> Wikinomics </ span>,
   <= Proprietate durata "DC: creatorul"> Don Tapscott </ span>
  explică schimbările profunde ale tehnologiei,
  demografie și afaceri.
  Cartea ar trebui publicată în
  <= Proprietate durata "dc: data" content = "2006-10-01"> octombrie 2006 </ span>.
</ div >

HTML5

Pictogramă lupă mgx2.svg Același subiect în detaliu: HTML5 .
TAG [12] DOMENIU DE APLICARE
Noi elemente structurale și semantice
Antet
Comparație între pagina de bază HTML4 și 5
Comparație între pagina de bază HTML4 și 5
Subsol
Secțiune
Nav
Articolul (în cazul articolelor de pe pagina)
În afară (conținut legat de principal)
Hgroup Grupați etichetele de antet
<figure> și <figcaption> Subtitrări pentru conținut
Încorporare Introduceți conținut interactiv sau multimedia
Rubin Specificați adnotările Ruby
Wbr Browserul poate insera o linie nouă
<comandă> și <meniu> Acestea definesc bare de instrumente sau meniuri contextuale
<detalii> și <sumar> Widget de informații pentru utilizatori
marcă Parte a unui text marcat sau evidențiat de utilizator
<timp> și pubdate și datetime atribute 24 de ore sau o dată în calendarul gregorian
Metru Măsură scalară a unui interval cunoscut sau a unei valori fracționare
Progres Starea finalizării unei sarcini
Imagine Container pentru imagini
Microdate Atributele semantice pot fi specificate pentru fiecare etichetă HTML
Atribute noi și tipuri de intrare pentru formulare
autofocus, substituent și formă
formă
Autofocusul în acest caz este în roșu. Tipurile de intrare sunt echivalente cu spațiile care trebuie completate (în acest caz există „e-mail”). Substituentul este exemplul de text al fiecărui spațiu
Tipul de intrare: tel
Tipul de intrare: căutare
Tipul de intrare: URL
Tipul de introducere: e-mail
Tipul de intrare: număr
Tipul de intrare: interval
Tipul de intrare: culoare
Datalist Completare automată pe un element de formular
Completare automată Permite sau interzice browserului să completeze câmpurile

a formularului automat

Minim maxim Acestea definesc valoarea minimă și maximă permisă
Multiplu Permite utilizatorului să introducă mai multe valori pentru aceeași intrare
Model Verificați dacă valoarea introdusă respectă anumite reguli
Necesar Este obligatorie completarea unui spațiu al formularului
Etapa Acesta definește distanța dintre o valoare și următoarea
keygen Generator de chei numerice într-un formular
ieșire Returnează rezultatul unui calcul
API pentru aplicații web
Aplicații web offline (fișier „.manifest”) După prima sesiune de navigare online,

unele obiecte vor rămâne, de asemenea, accesibile

în absența unei conexiuni de rețea.

API de baze de date indexate Creați și manipulați o bază de date în browser
API WebStorage De exemplu, le puteți menține deschise în același timp

două conturi sociale sau de e-mail pe același browser și fiecare navigare

pe primul va rezulta deconectarea celui de-al doilea și invers

API Web Workers Acestea permit executarea unor bucăți de cod JavaScript

fără a afecta performanța paginii web

API WebSocket Acestea stabilesc și mențin o conexiune de date între browsere

și server de la distanță pe care să trimiteți mesaje

în ambele sensuri

Tragere și plasare Glisați și fixați obiecte
API de geolocalizare Geolocalizare
Multimedia
SVG și MathML Imagini vectoriale și formule matematice
Canvas / WebGL API-uri potrivite pentru desenarea liniilor, cercurilor, dreptunghiurilor, imaginilor și obiectelor 3D
Video Fișiere video Inserție (anterior numai realizabile cu Adobe Flash )
Audio Introduceți fișiere audio
Elemente HTML4 depreciate
Elemente HTML4 depreciate

Haml

Haml (HTML Abstraction Markup Language) este un sistem de șablon conceput pentru a evita scrierea de cod în linie într - un document de web și de a face curat HTML. Haml oferă flexibilitatea de a avea un conținut HTML dinamic. Similar cu alte limbaje web, cum ar fi PHP, ASP, JSP și sisteme de șabloane precum eRuby, Haml încorporează, de asemenea, un anumit cod care rulează în runtime și generează cod HTML pentru a oferi un conținut dinamic. Pentru a rula codul Haml, fișierele trebuie să aibă o extensie .haml. Aceste fișiere sunt similare cu fișiere .erb sau eRuby care , de asemenea ajutor Codul Incorporat Ruby atunci când în curs de dezvoltare a unei aplicatii web [13] .

Exemplu

Haml folosește indentarea spațiului (două spații) pentru cuibărire și amploarea etichetei. Acesta acționează ca un înlocuitor pentru perechile de etichete open-end, făcându-l uscat și mai curat. Următorul exemplu compară sintaxa Haml și eRuby (Ruby încorporat), împreună cu ieșirea HTML.

Haml ERB HTML
 % div .categorie 
   % div .rețete 
       % h1 = rețetă. Nume 
       % h3 = rețetă. categorie 
   % div 
       % h4 = rețetă. Descriere
<div class = "category"> 
    <div class = "recipes"> 
        <h1> <% = rețetă. nume%> </ h1> 
        <h3> <% = rețetă. categoria%> </ h3> 
    </ div> 
    <div> 
        <h4> <% = rețetă. descriere%> </ h4> 
    <
</ div>
<div class = "category"> 
    <div class = "recipes"> 
        <h1> Cookie </ h1> 
        <h3> Desert </ h3> 
    </ div> 
    <div> 
        <h4> Pe bază de paste și zahăr. De obicei, are o formă circulară și are în jur de 400 de calorii. </ h4> 
    </ div> 
</ div>

Notă

  1. ^ A b Conform recomandărilor Anexa C. Linii directoare de compatibilitate W3C HTML
  2. ^ CSS Box model , la www.w3schools.com. Adus la 31 ianuarie 2021.
  3. ^ RFC 1866 - Hypertext Markup Language - 2.0
  4. ^ - HTML: Limbaj de marcare HyperText | MDN , la developer.mozilla.org . Adus la 4 februarie 2021 .
  5. ^ Javascript - De ce este depreciată și ceea ce este cea mai bună alternativă? , Pe Stack Overflow. Adus de 05 februarie 2021.
  6. ^ ( EN ) HTML 4.01 Specification, Frames , su www.w3.org , W3C, 24 dicembre 1999. URL consultato il 14 giugno 2014 .
  7. ^ - HTML: HyperText Markup Language | MDN , su developer.mozilla.org . URL consultato il 5 febbraio 2021 .
  8. ^ 3 Reasons You Might Not Want To Use Iframes , su www.ostraining.com . URL consultato il 5 febbraio 2021 .
  9. ^ RDFa / Tools , su rdfa.info .
  10. ^ Building Interoperable Web Metadata
  11. ^ RDFa – Implications for Accessibility – Standards Schmandards , su standards-schmandards.com .
  12. ^ HTML5: guida completa , su HTML.it . URL consultato il 29 gennaio 2021 .
  13. ^ Haml , su haml.info . URL consultato il 4 febbraio 2021 .

Voci correlate

Collegamenti esterni

Internet Portale Internet : accedi alle voci di Wikipedia che trattano di internet