HyperText Markup Language
De la Wikipedia, enciclopedia liberă
HyperText Markup Language (HTML) este un limbaj de marcare utilizat pentru crearea paginilor web ce pot fi afişate într-un browser (sau navigator). Scopul HTML este mai degrabă prezentarea informaţiilor – paragrafe, fonturi, tabele ş.a.m.d. – decât descrierea semanticii documentului.
Specificaţiile HTML sunt dictate de World Wide Web Consortium (W3C).
Cuprins |
[modifică] Introducere
HTML este o formă de marcare orientată către prezentarea documentelor text pe o singura pagină, utilizând un software de redare specializat, numit agent utilizator HTML, cel mai bun exemplu de astfel de software fiind browserul web. HTML furnizează mijloacele prin care conţinutul unui document poate fi adnotat cu diverse tipuri de metadate şi indicaţii de redare. Indicaţiile de redare pot varia de la decoraţiuni minore ale textului, cum ar fi specificarea faptului că un anumit cuvânt trebuie subliniat sau că o imagine trebuie introdusă, până la scripturi sofisticate, hărţi de imagini şi formulare. Metadatele pot include informaţii despre titlul şi autorul documentului, informaţii structurale despre cum este împărţit documentul în diferite segmente, paragrafe, liste, titluri etc. şi informaţii cruciale care permit ca documentul să poată fi legat de alte documente pentru a forma astfel hiperlink-uri (sau web-ul).
HTML este un format text proiectat pentru a putea fi citit şi editat de oameni utilizând un editor de text simplu. Totuşi scrierea şi modificarea paginilor în acest fel solicită cunoştinţe solide de HTML şi este consumatoare de timp. Editoarele grafice (de tip WYSIWYG) cum ar fi Macromedia Dreamweaver, Adobe GoLive sau Microsoft FrontPage permit ca paginile web sa fie tratate asemănător cu documetele Word, dar cu observaţia că aceste programe generează un cod HTML care este de multe ori de proastă calitate.
HTML se poate genera direct utilizând tehnologii de codare din partea serverului cum ar fi PHP, JSP sau ASP. Multe aplicaţii ca sistemele de gestionare a conţinutului, wiki-uri şi forumuri web generează pagini HTML.
HTML este de asemenea utilizat în e-mail. Majoritatea aplicaţiilor de e-mail folosesc un editor HTML încorporat pentru compunerea e-mail-urilor şi un motor de prezentare a e-mail-urilor de acest tip. Folosirea e-mail-urilor HTML este un subiect controversat şi multe liste de mail le blochează intenţionat.
[modifică] Elementele de marcare
Mai jos sunt tipurile de elemente de marcare în HTML:
- Marcare structurală. Descrie scopul unui text. De exemplu:
-
<h1>Fotbal</h1>
- Direcţioneaza browserul pentru a reda "Fotbal" ca pe cel mai important titlu. Marcarea structurală nu are un anumit stil predefinit, dar cele mai multe browsere web au standardizat modul în care acestea sunt afişate. De exemplu, titlurile importante (h1, h2, etc.) sunt aldine şi mai mari decât restul textului.De notat că "h1" este folosit doar o singură dată per pagină deoarece cu el este marcat titlul ei.
- Marcare pentru prezentare. Descrie cum apare un text, indiferent de funcţiile sale. De exemplu:
-
<b>îngroşat</b>
- Va afişa textul "îngroşat" cu litere groase, aldine.Notă: Html a inceput în ultimii ani să înceapă să nu mai folosească acest gen de tag-uri pentru că "b" nu dă sens paginii, pe când tag-ul "strong" (adică strong emphasis) dă un înţeles paginii, şi mai important, asemenea tag-uri pentru prezentare doar încarcă o pagină cu informaţii şi o fac astfel mai greu de încărcat, iar apoi dacă ataşezi un document CSS la pagină, o singură modificare la CSS (de ex: de la "font-weight:italic" la "font-weight:bold" va schimba tot textul selectat, şi de exemplu, link-urile vor trece de la text înclinat la text îngroşat, plus că în CSS avem avantajul de a putea preciza cât de mari sau mici să fie literele în pixeli «px», în puncte «pt», etc.)avem acelaşi efect ca şi cănd am avea de schimbat toate tag-urile de "i" de pe pagină în tag-uri de "b", muncă care chiar şi la un website mic este enormă, ce să mai vorbim de unul de genul wikipedia. Aşa că dacă vreţi să începeţi o carieră în html sau un hobby (şi să aveţi succes) nu folosiţi aceste taguri, nu degeaba s-a inventat CSS-ul.
- Marcare pentru hiperlink. Leagă părţi ale unui document cu alte documente. De exemplu:
-
<a href="http://ro.wikipedia.org/">Wikipedia Românească</a>
<a href="http://www.faces.md/user/crengushor"> aici sunt eu</a> cel care a pus linkul asta.
- Va reda Wikipedia românească ca hiperlink către un URL specificat.
- Elemente speciale (widget). Creează obiecte, cum ar fi butoanele şi listele.
Doar marcatorii de prezentare (împreună cu foile de stiluri - CSS) determină cum conţinutul din interiorul marcatorului va fi prezentat. Ceilalţi marcatori spun browserului ce obiecte să redea sau ce funcţii să execute.
[modifică] Tag-uri
Orice fişier html are următoarea structură
<html> <head> <title>Titlul</title> </head> <body> </body> <head> </html> Între tagurile <body></body> se scriu celelalte "instrucţiuni". Tagul <body> permite stabilirea fundalului si a culorii hiperlinkurilor. <body bgcolor="#ff0000"> - culoarea fundalului paginii devine rosie <body background="fundal.jpg"> - pune o imagine în fundalul paginii <body link="#ff0000" alink="#00ff00" vlink="#0000ff"> - stabileşte culoarea linkurilor nevizitate şi vizitate.
[modifică] Un document simplu
Să începem cu un document simplu: Scrie acest cod într-un editor de text oarecare (Notepad de exemplu) şi salvează-l cu numele de index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ro">
<head>
<title>Un document simplu</title>
</head>
<body>
<p>Textul documentului îl scrii aici!</p>
</body>
</html>
[modifică] Exemplu - Sistemul periodic al lui Mendeleev
<HTML> <HEAD> <TITLE>SISTEMUL PERIODIC AL ELEMENTELOR</TITLE> </HEAD> <BODY> <CENTER> <H2>Sistemul periodic al elementelor (Tabelul periodic al lui Mendeleev).</H2> <table cellpadding="6" cellspacing="2"> <TR> <TD BGCOLOR=#FFAAFF align="center" title="Hidrogen">H</TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD BGCOLOR=#00FFFF align="center" title="Heliu">He</TD> </TR> <TR> <TD BGCOLOR=#00FF00 align="center" title="Litiu">Li</TD> <TD BGCOLOR=#CCCCC align="center" title="Beriliu">Be</TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD BGCOLOR=#0099FF align="center" title="Bor">B</TD> <TD BGCOLOR=#FFAAFF align="center" title="Carbon">C</TD> <TD BGCOLOR=#FFAAFF align="center" title="Azot">N</TD> <TD BGCOLOR=#FFAAFF align="center" title="Oxigen">O</TD> <TD BGCOLOR=#AABB22 align="center" title="Fluor">F</TD> <TD BGCOLOR=#00FFFF align="center" title="Neon">Ne</TD> </TR> <TR> <TD BGCOLOR=#00FF00 align="center" title="Sodiu">Na</TD> <TD BGCOLOR=#CCCCCC align="center" title="Magneziu">Mg</TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD BGCOLOR=#FFBBBB align="center" title="Aluminiu">Al</TD> <TD BGCOLOR=#0099FF align="center" title="Siliciu">Si</TD> <TD BGCOLOR=#FFAAFF align="center" title="Fosfor">P</TD> <TD BGCOLOR=#FFAAFF align="center" title="Sulf">S</TD> <TD BGCOLOR=#AABB22 align="center" title="Clor">Cl</TD> <TD BGCOLOR=#00FFFF align="center" title="Argon">Ar</TD> </TR> <TR><TD BGCOLOR=#00FF00 align="center" title="Potasiu">K</TD> <TD BGCOLOR=#CCCCCC align="center" title="Calciu">Ca</TD> <TD BGCOLOR=#00CCCC align="center" title="Scandiu">Sc</TD> <TD BGCOLOR=#00CCCC align="center" title="Titan">Ti</TD> <TD BGCOLOR=#00CCCC align="center" title="Vanadiu">V</TD> <TD BGCOLOR=#00CCCC align="center" title="Crom">Cr</TD> <TD BGCOLOR=#00CCCC align="center" title="Mangan">Mn</TD> <TD BGCOLOR=#00CCCC align="center" title="Fier">Fe</TD> <TD BGCOLOR=#00CCCC align="center" title="Cobalt">Co</TD> <TD BGCOLOR=#00CCCC align="center" title="Nichel">Ni</TD> <TD BGCOLOR=#00CCCC align="center" title="Cupru">Cu</TD> <TD BGCOLOR=#00CCCC align="center" title="Zinc">Zn</TD> <TD BGCOLOR=#FFBBBB align="center" title="Galiu">Ga</TD> <TD BGCOLOR=#0099FF align="center" title="Germaniu">Ge</TD> <TD BGCOLOR=#0099FF align="center" title="Arsenic">As</TD> <TD BGCOLOR=#FFAAFF align="center" title="Seleniu">Se</TD> <TD BGCOLOR=#AABB22 align="center" title="Brom">Br</TD> <TD BGCOLOR=#00FFFF align="center" title="Kripton">Kr</TD> </TR> <TR> <TD BGCOLOR=#00FF00 align="center" title="Rubidiu">Rb</TD> <TD BGCOLOR=#CCCCCC align="center" title="Stronþiu">Sr</TD> <TD BGCOLOR=#00CCCC align="center" title="Ytriu">Y</TD> <TD BGCOLOR=#00CCCC align="center" title="Zirconiu">Zr</TD> <TD BGCOLOR=#00CCCC align="center" title="Niobiu">Nb</TD> <TD BGCOLOR=#00CCCC align="center" title="Molibden">Mo</TD> <TD BGCOLOR=#00CCCC align="center" title="Techneþiu">Tc</TD> <TD BGCOLOR=#00CCCC align="center" title="Ruteniu">Ru</TD> <TD BGCOLOR=#00CCCC align="center" title="Rodiu">Rh</TD> <TD BGCOLOR=#00CCCC align="center" title="Paladiu">Pd</TD> <TD BGCOLOR=#00CCCC align="center" title="Argint">Ag</TD> <TD BGCOLOR=#00CCCC align="center" title="Cadmiu">Cd</TD> <TD BGCOLOR=#FFBBBB align="center" title="Indiu">In</TD> <TD BGCOLOR=#FFBBBB align="center" title="Staniu">Sn</TD> <TD BGCOLOR=#0099FF align="center" title="Antimoniu">Sb</TD> <TD BGCOLOR=#0099FF align="center" title="Telur">Te</TD> <TD BGCOLOR=#AABB22 align="center" title="Iod">I</TD> <TD BGCOLOR=#00FFFF align="center" title="Xenon">Xe</TD> </TR> <TR> <TD BGCOLOR=#00FF00 align="center" title="Cesiu">Cs</TD> <TD BGCOLOR=#CCCCCC align="center" title="Bariu">Ba</TD> <TD></TD> <TD BGCOLOR=#00CCCC align="center" title="Hafniu">Hf</TD> <TD BGCOLOR=#00CCCC align="center" title="Tantal">Ta</TD> <TD BGCOLOR=#00CCCC align="center" title="Wolfram">W</TD> <TD BGCOLOR=#00CCCC align="center" title="Reniu">Re</TD> <TD BGCOLOR=#00CCCC align="center" title="Osmiu">Os</TD> <TD BGCOLOR=#00CCCC align="center" title="Iridiu">Ir</TD> <TD BGCOLOR=#00CCCC align="center" title="Platina">Pt</TD> <TD BGCOLOR=#00CCCC align="center" title="Aur">Au</TD> <TD BGCOLOR=#00CCCC align="center" title="Mercur">Hg</TD> <TD BGCOLOR=#FFBBBB align="center" title="Taliu">Tl</TD> <TD BGCOLOR=#FFBBBB align="center" title="Plumb">Pb</TD> <TD BGCOLOR=#FFBBBB align="center" title="Bismut">Bi</TD> <TD BGCOLOR=#0099FF align="center" title="Poloniu">Po</TD> <TD BGCOLOR=#AABB22 align="center" title="Astatiniu">At</TD> <TD BGCOLOR=#00FFFF align="center" title="Radon">Rn</TD> </TR> <TR> <TD BGCOLOR=#00FF00 align="center" title="Franciu">Fr</TD> <TD BGCOLOR=#CCCCCC align="center" title="Radiu">Ra</TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> </TR> <TR> <TD></TD> <TD></TD> <TD></TD> <TD BGCOLOR=#EEEE00 align="center" title="Lantan">La</TD> <TD BGCOLOR=#EEEE00 align="center" title="Ceriu">Ce</TD> <TD BGCOLOR=#EEEE00 align="center" title="Praseodim">Pr</TD> <TD BGCOLOR=#EEEE00 align="center" title="Neodim">Nd</TD> <TD BGCOLOR=#EEEE00 align="center" title="Promeþiu">Pm</TD> <TD BGCOLOR=#EEEE00 align="center" title="Samariu">Sm</TD> <TD BGCOLOR=#EEEE00 align="center" title="Europiu">Eu</TD> <TD BGCOLOR=#EEEE00 align="center" title="Gadoliniu">Gd</TD> <TD BGCOLOR=#EEEE00 align="center" title="Terbiu">Tb</TD> <TD BGCOLOR=#EEEE00 align="center" title="Disprosiu">Dy</TD> <TD BGCOLOR=#EEEE00 align="center" title="Holmiu">Ho</TD> <TD BGCOLOR=#EEEE00 align="center" title="Erbiu">Er</TD> <TD BGCOLOR=#EEEE00 align="center" title="Tuliu">Tm</TD> <TD BGCOLOR=#EEEE00 align="center" title="Yterbiu">Yb</TD> <TD BGCOLOR=#EEEE00 align="center" title="Luteþiu">Lu</TD> </TR> <TR> <TD></TD> <TD></TD> <TD></TD> <TD BGCOLOR=#00CC44 align="center" title="Actiniu">Ac</TD> <TD BGCOLOR=#00CC44 align="center" title="Toriu">Th</TD> <TD BGCOLOR=#00CC44 align="center" title="Protactiniu">Pa</TD> <TD BGCOLOR=#00CC44 align="center" title="Uraniu">U</TD> <TD BGCOLOR=#00CC44 align="center" title="Neptuniu">Np</TD> <TD BGCOLOR=#00CC44 align="center" title="Plutoniu">Pu</TD> <TD BGCOLOR=#00CC44 align="center" title="Americiu">Am</TD> <TD BGCOLOR=#00CC44 align="center" title="Curiu">Cm</TD> <TD BGCOLOR=#00CC44 align="center" title="Berkeliu">Bk</TD> <TD BGCOLOR=#00CC44 align="center" title="Californiu">Cf</TD> <TD BGCOLOR=#00CC44 align="center" title="Einsteiniu">Es</TD> <TD BGCOLOR=#00CC44 align="center" title="Fermiu">Fm</TD> <TD BGCOLOR=#00CC44 align="center" title="Mendeleeviu">Md</TD> <TD BGCOLOR=#00CC44 align="center" title="Nobeliu">No</TD> <TD BGCOLOR=#00CC44 align="center" title="Lawrenþiu">Lr</TD> </TR> <TABLE><BR> <TABLE> <TR> <TD BGCOLOR=#FFAAFF WIDTH="40"></TD><TD>Nemetale</TD> <TD BGCOLOR=#0099FF WIDTH="40"></TD><TD>Metaloizi</TD> </TR> <TR> <TD BGCOLOR=#00FF00 WIDTH="40"></TD><TD>Metale alcaline</TD> <TD BGCOLOR=#AABB22 WIDTH="40"></TD><TD>Halogeni</TD> </TR> <TR> <TD BGCOLOR=#CCCCC WIDTH="40"></TD><TD>Metale alcalino pãmântoase</TD> <TD BGCOLOR=#00FFFF WIDTH="40"></TD><TD>Gaze nobile</TD> </TR> <TR> <TD BGCOLOR=#00CCCC WIDTH="40"></TD><TD>Metale de tranziþie</TD> <TD BGCOLOR=#EEEE00 WIDTH="40"></TD><TD>Lantanide</TD> </TR> <TR> <TD BGCOLOR=#FFBBBB WIDTH="40"></TD><TD>Metale de post-tranziþie</TD> <TD BGCOLOR=#00CC44 WIDTH="40"></TD><TD>Actinide</TD> </TR> </TABLE> </CENTER> </BODY> </HTML>
[modifică] Cum arată în browser
Sistemul periodic al elementelor (Tabelul periodic al lui Mendeleev).
| H | He | ||||||||||||||||
| Li | Be | B | C | N | O | F | Ne | ||||||||||
| Na | Mg | Al | Si | P | S | Cl | Ar | ||||||||||
| K | Ca | Sc | Ti | V | Cr | Mn | Fe | Co | Ni | Cu | Zn | Ga | Ge | As | Se | Br | Kr |
| Rb | Sr | Y | Zr | Nb | Mo | Tc | Ru | Rh | Pd | Ag | Cd | In | Sn | Sb | Te | I | Xe |
| Cs | Ba | Hf | Ta | W | Re | Os | Ir | Pt | Au | Hg | Tl | Pb | Bi | Po | At | Rn | |
| Fr | Ra | ||||||||||||||||
| La | Ce | Pr | Nd | Pm | Sm | Eu | Gd | Tb | Dy | Ho | Er | Tm | Yb | Lu | |||
| Ac | Th | Pa | U | Np | Pu | Am | Cm | Bk | Cf | Es | Fm | Md | No | Lr |
| Nemetale | Metaloizi | ||
| Metale alcaline | Halogeni | ||
| Metale alcalino pãmântoase | Gaze nobile | ||
| Metale de tranziþie | Lantanide | ||
| Metale de post-tranziþie | Actinide |
Acum deschide fişierul cu un browser web şi vei vedea o pagină cu titlul "Un document simplu" în care scrie Textul documentului îl scrii aici!
[modifică] Vezi şi
[modifică] Legături externe
- Tutorial HTML în limba română
- Tutoriale HTML si template-uri gratuite
- Afla tot ce trebuie sa stii despre HTML