| <HTML> </HTML> | Defineste un fisier in format Web |
| <HEAD> </HEAD> | Antetul documentului |
| <TITLE> </TITLE> | Titlul documentului |
| <BODY> </BODY> | Corpul paginii HTML |
| BGCOLOR = culoare | Culoarea de fond a paginii |
| TEXT=culoare | Culoarea textului pe pagina |
| LINK=culoare | Culoarea legaturilor nevizitate din pagina |
| VLINK=culoare | Culoarea legaturilor vizitate din pagina |
| ALINK=culoare | Culoarea legaturilor pe durata clicului executat de utilizator |
| BACKGROUND = url | Imaginea de fond pentru pagina |
| <P> | Paragraf |
| <Hn> </Hn> | Nivel de subtitlu al documentului (n = 1-6) |
| <FONT> </FONT> | Specifica atribute ale textului incadrat |
| SIZE=n | Dimensiunea textului este 1-7 |
| FACE="a,b" | Specifica fontul: a, daca este disponibil, sau b |
| COLOR=s | Culoarea textului: fie un nume de culoare , fie o valoare RGB |
| <BR> | Linie noua |
| <PRE> </PRE> | Informatie preformatata |
| <!-- --> | Comentariu HTML |
| <CENTER> </CENTER> | Centreaza materialul in pagina |
| <HR> | Rigla orizontala |
| SIZE=x | Inaltimea riglei in pixeli |
| WIDTH=x | Latimea riglei in pixeli sau in procente |
| NOSHADE | Dezactiveaza afisarea umbrei pentru rigla orizontala |
| ALIGN=x | Alinierea riglei orizontala in pagina (left, center, right) |
| COLOR=x | Culoarea riglei orizontale(numai pentru IE) |
| <A> </A> | Marcaj de tip ancora |
| HREF=url | Referinta hipertext |
| HREF=#nume | Referinta catre o ancora interna |
| Name=nume | Definitia unei ancore interne |
| <DD> | Descriere definitie |
| <DL> </DL> | Lista de tip definitie |
| <DT> | Termen de definitie |
| <LI> | Element de lista |
| <OL> | Lista ordonata (numerotata) |
| TYPE=tip | Tipul numerotarii. Valori posibile: A, a, I, i, 1 |
| START=x | Numarul de inceput al listei ordonate |
| <UL | Lista neordonata (marcata) |
| TYPE=forma | Forma marcajului. Valori posibile: circle, square, disc. |
| <B> </B> | Afiseaza text cu caractere aldine |
| <I> </I> | Afiseaza text cu caractere cursive |
| <U> </U> | Afiseaza text subliniat |
| <TT> </TT> | Text cu font monospatiu |
| <CITE> </CITE> | Citare bibliografica |
| <CODE> </CODE> | Listing de program |
| <EM> </EM> | Stil logic de evidentiere |
| <KBD> </KBD> | Text de la tastatura |
| <STRONG> </STRONG> | Evidentiere logica puternica |
| <VAR> </VAR> | Program sau variabila |
| <BASEFONT SIZE = n> | Specifica dimensiunea implicita a fontului din pagina |
| <FRAMESET> </FRAMESET> | Definirea redactarii paginii |
| COLS=x | Numarul si marimea relativa a coloanelor |
| ROWS=x | Numarul si marimea relativa a liniilor |
| BORDER=x | Specifica starea "on" (activa) sau "off" (inactiva) pentru chenarul cadrului FRAMESET (1 sau 0) |
| FRAMEBORDER = x | Specifica marimea chenarului |
| FRAMESPACING = x | Marimea spatiului dintre doua cadre adiacente |
| <FRAME> | Definitia unui anumit cadru |
| SRC=url | URL-ul sursa pentru cadru |
| NAME=nume | Numele cadrului (utilizat impreuna cu TARGET=nume ca parte componenta a marcajului de tip ancora <a> |
| SCROLLING=scrl | Defineste optiunea barei de derulare.Valori posibile: on(activa), off(inactiva), auto (automat) |
| FRAMEBORDER=x | Marimea chenarului din jurul cadrului |
| MARGINHEIGHT=x | Spatiul suplimentar de deasupra si dedesubtul unui anumit cadru |
| MARGINWIDTH=x | Spatiu suplimetar la stanga si la dreapta unui anumit cadru |
| <NOFRAMES> </NOFRAMES> | Sectiunea de pagina afisata pentru utilizatorii care nu pot vedea un cadru |
| <IFRAME> | Cadru intern (numai pentru (IE) |
| SRC=url | Sursa cadrului |
| NAME=s | Numele ferestrei (util pentru TARGET) |
| HEIGHT=x | Inaltimea cadrului inglobat |
| WIDTH=x | Latimea cadrului inglobat |
| <TABLE> </TABLE> | Tabel HTML |
| BORDER=x | Chenarul tabelului |
| CELLPADDING=x | Spatiul suplimentar in cadrul celulelor tabelului |
| CELLSPACING=x | Spatiul suplimentar intre celulele tabelului |
| WIDTH=x | Latimea impusa tabelului |
| FRAME=valoare | Ajustarea fina a tabelului |
| RULES=valoare | Ajustarea fina a riglelor tabelului |
| BORDERCOLOR = culoare | Specifica culoarea chenarului tabelului |
| BORDERCOLORLIGHT = culoare | Cea mai deschisa culoare din cele doua culori specificate |
| BORDERCOLORDARK = culoare | Cea mai inchisa culoare din cele doua culori specificate |
| ALIGN=left | Aliniaza tabelul la marginea din stanga a paginii, iar textul curge in partea dreapta |
| ALIGN=right | Aliniaza tabelul la marginea din dreapta a paginii, iar textul curge in partea stanga |
| HSPACE=x | Spatiu suplimetar pe orizontala in jurul tabelului |
| VSPACE=x | Spatiu suplimetar pe verticala in jurul tabelului |
| COLS=x | Specifica numarul de coloane ale unui tabel |
| <COLGROUP> </COLGROUP> | Defineste un set de definitii de coloane cu ajutorul marcajului <col> |
| <COL WIDTH=x> | Defineste latimea unei coloane exprimata in pixeli |
| <THEAD> </THEAD> | Defineste titlul tabelului |
| <BODY> </TBODY> | Defineste corpul tabelului |
| <TR </TR> | Linie de tabel |
| BGCOLOR=culoare | Specifica culoarea de fond pentru intreaga linie |
| ALIGN=aliniere | Alinierea celulelor de pe linia curenta (left, center, right) |
| <TD </TD> | Celula de date a tabelului |
| BGCOLOR=culoare | Specifica culoarea de fond pentru celula de date |
| COLSPAN=x | Numarul de coloane pe care se intinde celula curenta de date |
| ROWSPAN=x | Numarul de linii pe care se intinde celula curenta de date |
| ALIGN=aliniere | Alinierea materialului din cadrul celulei de date.Valori posibile: (left, right, center) |
| VALIGN=aliniere | Alinierea pe verticala a materialului din cadrul celulei de date.Valori posibile: (top, bottom, middle) |
| BACKGROUND=url | Specifica imaginea de fond pentru celula tabelului |
| NOWRAP | Nu permite despartirea textului pe linii in cadrul unei celule |
| ALIGN=baseline | Aliniaza celule de date cu linia de baza a textului adiacent |
| ALIGN=caracter | Aliniaza o coloana fata de un anumit caracter (caracterul prestabilit este ".") |
| ALIGN=justify | Aliniaza atat marginea din stanga cat si marginea din dreapta a unui text |
| <IMG | Marcajul de introducere a imaginilor |
| SRC=url | Sursa fisierului grafic |
| ALT=text | Textul alternativ de afisat, daca este necesar |
| ALIGN=aliniere | Alinierea imaginii in pagina. Valori posibile: top (sus), middle(in mijloc), bottom (jos), left (in stanga), right (la dreapta) |
| HEIGHT=x | Inaltimea imaginii (in pixeli) |
| WIDTH=x | Latimea imaginii |
| BORDER=x | Chenarul din jurul imaginii, atunci cand aceasta este utilizata ca hiperlegatura |
| HSPACE=x | Spatiul suplimentar pe orizontala din jurul imaginii (in pixeli) |
| VSPACE=x | Spatiul suplimentar pe verticala din jurul imaginii (in pixeli) |
| <FORM> </FORM> | Formular HTML activ |
| ACTION=url | Programul CGI de pe serverul care receptioneaza datele |
| METHOD=metoda | Modul in care datele sunt transmise serverului(GET sau POST) |
| <INPUT | Camp de text sau alte date de intrare |
| TYPE=optiune | Tipul campului de intrare
<INPUT>. Valori posibile: text,password,checkbox,hidden,file, radio,submit,reset,image. |
| NAME=nume | Numele simbolic al valorii campului |
| VALUE=valoare | Continutul prestabilit al campului de text |
| CHECKED= optiune | Buton/caseta marcata in mod prestabilit |
| SIZE=x | Numarul de caractere al unui camp de text |
| SIZE=x | Numarul maxim de caractere acceptate |
| <SELECT> </SELECT> | Grup de casete de validare |
| NAME=nume | Numele simbolic al valorii campului |
| SIZE=x | Numarul de articole de meniu care se afiseaza odata (prestabilit=1) |
| MULTIPLE=x | Permite selectia unor articole de meniu multiple |
| <OPTION | Alegerea particulara intr-un domeniu <SELECT> |
| VALUE=valoare | Valoarea rezultanta a acestei selectii din meniu |
| <TEXTAREA> </TEXTAREA> | Camp de intare de tip text pe linii multiple |
| NAME=nume | Numele simbolic al valorii campului |
| ROWS=x | Numarul de linii al casetei de text |
| COLS=x | Numarul de coloane (caractere) pe linie al casetei de text |
| <FIELDSET> </FIELDSET> | Imparte formularul in parti logice |
| <LEGEND> </LEGEND> | Numele asociat setului de campuri (fieldset) |
| ALIGN=s | Specifica alinierea legendei (explicatiei) afisate (top,bottom,left,right) |
| TABINDEX=x | Specifica ordinea elementelor atunci cand utilizatorul apasa tasta Tab |
| ACCESKEY=c | Specifica tasta care asigura comanda rapida de la tastatura asociata unui anumit element |
| DISABLED | Elementul este inactiv, dar este afisat pe ecran |
| READONLY | Elementul este afisat pe ecran dar nu poate fi editat |
| & | & ampersand |
| � | tilda |
| < | mai mic (less than) |
| > | mai mare (greater than) |
| Š | simbolul de copyright |
| Ž | simbolul pentru marca inregistrata |
| á | a mic cu accent ascutit (acute) |
| â | a mic cu accent circumflex |
| ń | n mic cu tilda |
| ř | o mic barat (slash) |
| <STYLE> </STYLE> | Specifica informatii referitoare modelul de stiluri |
| TYPE=val | Tipul modelului de stiluri. De regula "text/css" |
| <SCRIPT> </SCRIPT> | Include un script de regula Javascript, in pagina Web |
| LANGUAGE=limbaj | Limbajul utilizat |
| EVENT=eveniment | Eveniment care declanseaza executia unor scripturi specifice |
| FOR=numeobiect | Numele obiectului din pagina asupra caruia actioneaza scriptul |
<div
align="center">text</div> sau <center>text</center>
- Aliniaza textul la mijlocul paginii.<div
align="left">text</div> - Aliniaza textul in stanga paginii.<div
align="right">text</div> - Aliniaza textul in dreapta paginii.<a href="link-ul
dorit">text</a><a href="link"
onClick="javascript:window.open('link', 'pop1win', 'toolbar=no
scrollbars=yes,width=500,height=200')">Text</a><a href="link-ul unde vrei sa
trimita imaginea">
<img src="Link-ul unde se afla imaginea" width="Aici puneti lungimea
care sa o aiba imaginea (masura e in PX)" height="Aici puneti latimea
care sa o aiba imaginea (masura e in PX)" alt="Aici puneti textul care
doriti sa apara cand se pune cursorul pe imagine (Pentru IE)"
title="Aici puneti textul care doriti sa apara cand se pune cursorul pe
imagine" border="0"/></a><blink>text</blink> -
Palpaie textul<marquee>Text</marquee>
- se misca textul de la dreapta spre stanga<marquee scrollamount=1
direction="down" loop=true>text</marquee> - se misca textul de
sus in jos<marquee scrollamount=3
direction=right loop=true behavior=alternate>text</marquee> -
se misca textul dintr-o parte in alta<img src="Link-ul unde se
afla imaginea" width="Aici puneti lungimea care sa o aiba imaginea
(masura e in PX)" height="Aici puneti latimea care sa o aiba imaginea
(masura e in PX)" alt="Aici puneti textul care doriti sa apara cand se
pune cursorul pe imagine (Pentru IE)" title="Aici puneti textul care
doriti sa apara cand se pune cursorul pe imagine" border="0"/><img src="Link-ul unde se
afla imaginea"/> - varianta simpla<span style="color: codul
culorii dorite">Text</span> - lasa spatiu intre
cuvinte
<br> - trece pe un rand nou<b>text</b> - pentru
scris boldat<i>text</i> - pentru
scris cursiv<u>text</u> - pentru
scris subliniat
Principalele elemente in HTML sumt <html>, <head>, <title> si <body>. Iata si un exemplu simplu de construire a unei pagini HTML.
<html>
<head>
<title>Prima mea pagina
web folosind cateva coduri HTML!</title>
</head>
<body>
Salut Gasca! Aici voi pune mai tarziu continutul! Si
voi realiza o pagina simpla folosind HTML
</body>
</html>
<p>Acesta este un simplu paragraf in HTML</p>
<p align="left">Acesta este un paragraf aliniat la stanga</p>
Pe langa atributul align putem folosi pentru a alinia elementele HTML urmatoarele valori: left, right center si justify.
<h1>Acesta este tag-ul HTML pentru cel mai mare titlu</h1>
Alte tipuri de titluri in HTML: h2, h3, h4, h5, h6. Unde h1 este cel mai mare si h6 cel mai mic.
<br /> este un salt in linie in HTML - spatiul intre br si slesh face diferenta intre cod valid XHTML si un cod dezordonat.
<hr /> se foloseste pentru a desena o linie orizontala in HTML - spatiul intre hr si slesh face diferenta intre cod valid XHTML si un cod dezordonat.
O lista simpla in HTML este de forma
<ol>
<li>Primul element HTML din lista
</li>
<li>Al doilea element HTML din lista</li>
<li>Al
treilea element HTML din lista</li>
</ol>
Lista de mai sus este o lista ordonata. Alte tipuri de liste in HTML sunt liste neordonata si lista de definitii.
<a href="http://www.tutorialehtml.com/" title="HTML 5" target="_blank" >Html 5</a>
<a href="#top">Mergi la inceput</a> (<a name="top"></a>)
<a href="mailto:admin@exemplu.com" >Nelamuriri aici</a>
<a href="http://www.tutorialehtml.com/" title="HTML 5" target="_blank" ><img src="img/html_image.jpg" alt="HTML 5" /></a>
Au fost exemplificate mai sus un link normal in HTML, un link folosit pentru a lega doua sectiuni in aceasi pagina, un link email si un link imagine. Desi nu se mai foloseste in HTML dar merita mentionat.
<base href="http://www.tutorialehtml.com/">
Base href a fost scos din indexul tagurilor in HTML 5
<img src="img//html_image.jpg" alt="Html Image" width="100" height="50" align="center" />
Va recomand alinierea cu ajutorul CSS. La fel si stabilirea dimensiunilor imaginii. Ceea ce ar transforma codul HTML de mai sus in:
<img src="img//html_image.jpg" alt="Html Image" style="width:100px; height:50px; margin:auto;" />
Am adaugat mai jos codul HTML folosit pentru a crea un simplu formular. Acesta este doar formularul HTML folosit de user pentru a introduce informatia dorita. Nu uita ca pentru procesarea acestor informatii, o data ce se face click pe butonul submit al formularului HTML, informatia va fi procesata de catre un fisier.php si eventual urcata in baza de date sau trimisa pe email.
<form method="post" name="formular" action="fisier_care_proceseaza_formularul_html.php">
.................campurile de text care vor prelua informatia.........
<input type="submit" value="Trimite">
<input type="reset" value="Sterge" />
</form>
Aveti mai jos atasate codurile HTML folosite pentru campuri de text in functie de cerinte.
<input type="text" size="10" maxlength="40" name="nume"> - camp de text normal
<input type="password" size="10" maxlength="10" name="parola"> - parola
<input type="radio" name="culoare" value="rosu"> - buton radio
<input type="checkbox" name="da" value="da"> - casuta de bifat
<select name="limbajdeprogramare"> - meniu drop-down
<option>Html
4.1</option>
<option>Html 5</option>
</select>
Structura de baza a unui tabel in HTML este urmatoarea..
<table>
<tr>
<th>Column
1</th>
<th>Column 2</th>
</tr>
<tr>
<td>Row
1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr>
<td>Row
2 Cell 1</td>
<td>Row 2 Cell 2</td>
</tr>
</table>
Iata folosirea atributului bgcolor in HTML. Scopul lui este acela de a stabili o culoare de fond.
<body bgcolor="#efefef">
<div bgcolor="#888888">
<table bgcolor="#000000"> - etc.
Puntru a pune o imagine background vom folosi urmatorul cod HTML.
<table background="img/pattern.jpg">
<!-- Acesta este un comentariu simplu in Html -->
Pentru a insera muzica intr-un document.html vom folosi folosi urmatorul rand HTML.
<embed src="tu si tuborg.mp3" hidden="false" autostart="false" loop="false" volume="60" width="144" height="60" />
Pentru a insera un video intr-un document.html vom folosi urmatoarea bucata de cod HTML.
<object width="425" height="344">
<param
name="movie"
value="http://www.youtube.com/v/UAq8qHNWMNw&hl=en&fs=1"></param>
<param
name="allowFullScreen" value="true"></param>
<embed
src="http://www.youtube.com/v/UAq8qHNWMNw&hl=en&fs=1"
type="application/x-shockwave-flash" allowfullscreen="true" width="425"
height="344">
</embed>
</object>
<b>text ingrosat in html</b>
<strong>text
ingrosat in html</strong>
<i>italic</i>
<em>emphasized</em>
<blockquote>blockquote</blockquote>
<address>address</address>
<sub>indice!</sub>
<sup>exponential!</sup>
<del>text taiat</del>
Exemplul de mai jos este campul folosit pentru a urca un fisier pe server. Tine minte ca este doar partea HTML a formularului.
<form method="post" action="fisier_care_proceseaza_formularul_html.php">
<input type="hidden" name="MAX_FILE_SIZE" value="500" />
<input type="file" />
<input type="submit" value="Trimite">
<input type="reset" value="Sterge" />
</form>
Pentru mai multe informatii accesati urmatorul link: http://www.tutorialehtml.com/