HTML Rezumat

Lecia 1
ntroducere
Creat n Elvetia n anul 1989, HTML este utilizat pentru crearea paginilor Web. Utilizarea HTML propune scrierea textului, tabelelor si referintelor la imaginile incadrate in pagina web, iar apoi se adauga tag-urile HTML pentru a descrie amplasarea elementelor in pagina. Paginile Web pot fi vizionate prin intermediul unor programe speciale, numite browsere, care sunt capabile sa interpreteze limbajul HTML. Prima versiune a HTML continea mai putin de 30 de tag-uri. Odata cu dezvoltarea webului, au aparut mai multe idei pentru mbunatatirea acestuia. n cea mai recenta versiune sunt mai putin de o suta de tag-uri de baza HTML.
Structura unui document

Pentru definirea stucturii unui document folosim urmatoarele tag-uri:
<html>...</html> <head>...</head> <body>...</body>
<html> <head> <title>Titlul documentului din antet</title> </head> <body> <h1>Titlul principal al documentului</h1> <p>Un paragraf scurt.</p> </body> </html>
Antet (Heading)
Pentru definirea titlurilor dintr-un document putem folosii tag-urile <h1>, <h2>,... <h6>. <html> <head> <title>Titluri de document</title> </head> <body> <h1>Titlul principal al documentului H1</h1> <h2>Subtitlu H2</h2> <h3>Subsubtitlu H3</h3> <h4>Subsubtitlu H4</h4> <h5>Subsubtitlu H5</h5> <h6>Ultima varianta de subsubtitlu H6</h6> </body> </html>
Lecia 2
Paragraf (Paragraph)
Pentru definirea paragrafelor dintr-un document putem folosii tag-ul <p>. Tagul <p> admite urmatorul atribut: align (left, right, center, justify)
<html> <head> <title>Paragrafe</title> </head> <body> <h1 align=center>Paragrafe</h1> <p>Paragraf 1 Paragraf 1 Paragraf 1...</p> <p align=center>Paragraf 2 aliniat centrat Paragraf 2 aliniat centrat Paragraf 2 aliniat centrat...</p> <p align=right>Paragraf 3 aliniat la dreapta cu intrerupere de linie <br> Paragraf 3 aliniat la dreapta cu intrerupere de linie Paragraf 3 aliniat la dreapta cu intrerupere de linie ...</p> </body> </html>
Font (Font)
Tagul <font> admite urmatoarele atribute: size (absolut 1, 2, , 7 sau relativ +1, +2, -4,) face (Courier New, Times New Roman, Arial,) color (red, white, sau #fa56c3, numere hexazecimale de forma #rrggbb)
Tabelul urmator prezinta principalele nume de culori si reprezentarile lor hexazecimale. Black Teal Blue Navy Lime White Purple Yellow "#000000" "#008080" "#0000FF" "#000080" "#00FF00" "#FFFFFF" "#800080" "#FFFF00" Olive Red Maroon Gray Fuchsia Green Silver Aqua "#808000" "#FF0000" "#800000" "#808080" "#FF00FF" "#008000" "#C0C0C0" "#00FFFF"
<html> <head> <title>Fonturi</title> </head> <body> <h1 align=center>Fonturi</h1> <p>Paragraf 1 cu font Times New Roman ...</p> <p align=center><font face=Arial>Paragraf 2 aliniat centrat cu font de tip Arial Paragraf 2 aliniat centrat cu font de tip Arial Paragraf 2 aliniat centrat cu font de tip Arial...</font></p> <p align=center><font face=Arial size=5 color=#ff4488>Paragraf 3 aliniat la dreapta cu font de tip Arial, de dimensiune 5, roz Paragraf 3 aliniat la dreapta cu font de tip Arial, de dimensiune 5, roz <font size=2>Paragraf 3 aliniat la dreapta cu font de tip Arial, de dimensiune 3, roz...</font></font></p> </body> </html>
Aplicare de efecte asupra textului

Avem urmatoarele tag-uri cu efectele asociate: <b> (bold, text aldin, ingrosat) <i> (italic, text cursiv, inclinat) <u>(underlined, text subliniat) <sub> si <sup> (subsript, indice si supersript, exponent)
<html> <head> <title>Efecte de text</title> </head> <body> <h1>Efecte de text</h1> <font size=6><b>Text de dimensiune 6 ingrosat</b></font><br> <font size=5>Text de dimensiune 5 <b><i>Text de dimensiune 5 inclinat si ingrosat</i></b></font><br> <font size=4>Text de dimensiune 4 <sub>Text de dimensiune 4 indice</sub> Text de dimensiune 4</font><br> </body> </html>
Lecia 3
Caractere speciale
Prezentam cateva caractere speciale (cele mai utilizate). Aceste caractere trebuie inlocuite prin codurile date deoarecel ele au semnificatii specifice in limbajul HTML: & (ampersant, semnul &) < (less then, semnul mai mic <) > (greater then, semnul mai mare >) "(quotacion, semnul de ghilimele ) (non-breaking space, spatiu)
Imagini
Pentru a insera imagini in document folosim tag-ul <img>. Acest tag are urmatoarele atribute: src (source, este obligatori si specifica sursa imaginii) alt (text alternativ afisat in cazul neincarcarii imaginii) height (inaltimea imaginii in pixeli) width (latimea imaginii in pixeli) border (grosimea chenarului in pixeli)
<html> <head> <title>Inserare de imagini</title> </head> <body> <h1>Inserare de imagini</h1> <h2>Imagine distorsionata la (650x90)</h2> <img src=sunset.jpg width=650 height=90> <p>Fisierul specificat "sunset.jpg" trebuie sa fie in acelasi director cu fisierul HTML (referire relativa)</p> <h2>Imagine redimensionata la (200x150)</h2> <img src=d:/poze/sunset.jpg width=200 border=4> <p>Fisierul specificat "sunset.jpg" se gaseste in directorul poze de pe discul D (referire absoluta)</p> </body> </html>
Legaturi (Anchor)
Pentru a insera legaturi (Hyper Refferece) intr-un document folosim tag-ul <a>. Acest tag are atributul oblicatoriu href, care specifica URL-ul (Uniform Resource Locator) catre documentul HTML referit. Exista urmatoarele variante de utilizare <a href=fisier.html>FISIER</a> (referire la un alt fisier HTML) <a href=http://yahoo.com>YAHOO</a> (referire la o resursa WEB) <a href=#nume>SALT LA TAGUL NUME</a> (referire la aceelasi document HTML, salt la zona marcata cu ajutorul etichetei nume: <a name=nume>AICI SE FACE SALTUL</a>)
Linii de delimitare (Hair line)

Pentru a insera o line de delimitare in document folosim tag-ul <hr> cu urmatoarele atribute: size (marime) width (latime) color (culoare) align (left, right, center)
<html> <head> <title>Legaturi si linii de delimitare</title> </head> <body> <h1>Legaturi si linii de delimitare</h1> <font face="Verdana" size=4> <p>Bine ati venit pe pagina mea de Web!</p> <hr width="400"> <p>In acest text am inserat o legatura catre site-ul YAHOO: <a href="http://yahoo.com">YAHOOOOO</a></p> <p>In acest text am inserat o legatura catre motorul de cautare GOOGLE: <a href="http://google.ro">GOOOOOGLE</a>. Pe urmatoare imagine este deasemenea inserata o legatura catre motorul de cautare GOOGLE:</p> <hr width="300" color=red size=3 align=left> <a href="http://google.ro"> <img src="images/sunset.jpg" width=200 border=4> </a> </font> </body> </html>
Lecia 4
Liste
Pentru a insera liste in document putem folosim urmatoarele tag-uri: <ul> (unordered list, lista cu marcatori) <ol> (ordered list, lista numerotata)
Lista cu marcatori Lista cu marcatori permite utilizarea atributului type cu valorile (disc (implicit), circle, square) , fiecare element din lista este introdus de tag-ul <li> (list item). Lista numerotata Lista numeroata permite utilizarea atributului type cu valorile (1 (implicit), a, A, i, I), 1 pentru cifre, a-A pentru numerotare alfabetica si i-I pentru cifre romane. Atributul start defineste valoarea initiala pentru numerotarea listei. <html> <head> <title>Lista cu marcatori</title> </head> <body> <h1>Liste</h1> <h2>Liste cu marcatori</h2> <font face="Verdana" size=4> <ul type="square"> <li>unu unu unu</li> <li>doi doi doi</li> <li>trei trei trei</li> </ul> </font> <ul> <li type="square">unu unu unu</li> <li type="circle">doi doi doi</li> <li type="disc">trei trei trei</li> </ul> <h2>Lista numerotata</h2> <ol type=A start=3> <li>unu unu unu</li> <li>doi doi doi</li> <li>trei trei trei</li> <li>patru patru patru</li> </ol> </body> </html>
Tabele
Pentru a insera un tabel in document trebuie sa folosim urmatoarele tag-uri: <table> (definire tabel) <tr> (definire linie de tabel) <td> (definire celula de tabel) <th> (definire celula antet (prima linie din de tabel))
Tagul <table> admite urmatoarele atribute (cele mai importante): width (latime tabel) border (bordura tabel) bgcolor (culoare de fundal) cellspacing (distanta dintre celule) cellpadding (distanta intre marginea celulei si continut)
<html> <head> <title>Tabele</title> </head> <body> <h1>Tabele</h1> <h2>Primul tabel cu cellpadding</h2> <table border="1" cellpadding="10"> <tr><th>antet 1</th><th>antet mai lung 2</th><th>antet 3</th></tr> <tr><td>cell 21</td><td>cell 22</td><td>cell 23</td></tr> <tr><td>cell 31</td><td>cell 32</td><td>cell 33</td></tr> </table> <h2>Tabelul al doilea cu cellspacing si fundal</h2> <table border="1" cellspacing="10" bgcolor=lightgrey> <tr><th>antet 1</th><th>antet mai lung 2</th><th>antet 3</th></tr> <tr><td>cell 21</td><td>cell 22</td><td>cell 23</td></tr> <tr><td>cell 31</td><td>cell 32</td><td>cell 33</td></tr> </table> </body> </html>
Pentru imbina celulele putem folosii urmatoarele doua atribute: colspan (intindere pe orizontala, cuprinde mai multe coloane din tabel) rowspan (intindere pe verticala, cuprinde mai multe randuri din tabel)
<html> <head> <title>Tabele</title> </head> <body> <h1>Tabele</h1> <h2>Primul tabel cu celule imbinate colorate</h2> <table border="1"> <tr><th>antet 1</th><th>antet mai lung 2</th><th>antet 3</th></tr> <tr><td>cell 21</td><td colspan="2" bgcolor="skyblue">cell 22 si 23</td></tr> <tr><td rowspan="2" bgcolor="yellow">cell 31 si 41</td><td>cell 32</td><td>cell 33</td></tr> <tr><td>cell 42</td><td>cell 43</td></tr> </table> <h2>Tabelul al doilea formatat frumos</h2> <table border="0"> <tr bgcolor="salmon"><th width="130">antet 1</th><th width="130">antet mai lung 2</th><th width="130">antet 3</th></tr> <tr bgcolor="lightgrey"><td>cell 21</td><td>cell 22</td><td>cell 23</td></tr> <tr><td>cell 31</td><td>cell 32</td><td>cell 33</td></tr> <tr bgcolor="lightgrey"><td>cell 41</td><td>cell 42</td><td>cell 43</td></tr> </table> </body> </html>

HTML Rezumat

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

HTML Rezumat

Încărcat de

Drepturi de autor:

Formate disponibile

Lecia 1

Structura unui document

<html>...</html> <head>...</head> <body>...</body>

Aplicare de efecte asupra textului

Linii de delimitare (Hair line)

S-ar putea să vă placă și