Limbajul HTML

Limbajul de marcare HTML
Cu limbajul HTML (Hyper Text Markup Language) poti construi pagini web care pot fi
deschise cu un browser de Internet (Microsoft Internet Explorer, Mozilla Firefox, Google
Chrome
etc.). Pag web au extensia .html sau .htm si mai intai sunt scrise in editorul de texte
NotePad si salvate cu extensia .txt (de ex. nume_fisier.txt). Apoi resalvate (comanda
Salvare ca) cu extensia .html sau .htm.
Este un set de coduri logice scrise intre "<" (paranteza deschisa) si ">" (paranteza
inchisa), cu
toate ca nu sunt chiar paranteze, aşa se numesc si arata aşa: < >. <BODY> sau <FONT>
Cele mai multe elemente (numite si tag-uri) au un element (tag) de deschidere si un
element de închidere distins prin "/" in interiorul parantezei deschise "<". <FONT> ...
</FONT>
Primul cuvânt care apare înăuntru "<" se numeşte element sau eticheta HTML si spune
browserului
sa facă ceva, precum <FONT>
- Cuvintele care urmeaza după element in interiorul "< >"se numesc atribute care
descriu proprietăţile elementului. Cum ar fi : culoarea, mărimea, etc.
- Atributele sunt separate prin spatiu si urmate de semnul egal "=", dupa care sunt scrise,
intre
ghilimele (" ") valorile atributelor.
- Astfel, o eticheta HTML poate contine elementul de identificare, atribute si valori. - In
urmatorul exemplu elementul este FONT atributul COLOR si valoarea BLUE: <FONT
COLOR="BLUE">Acest text va fi albastru</FONT>
Structura generala a unui document HTML
<html>
<head> marcajul HEAD de deschidere - de aici incepe antetul paginii
<title> Titlu Documentului
aici se scriu cateva cuvinte (nu oricare!!!) despre continutul paginii - aceste cuvinte vor
apare pe
bara de titlu a browserului; daca pagina este adaugata intr-o lista favorita, ele apar ca nume
al
paginii
</title>
</head> aici se termina antetul paginii; cea ce este in antet nu apare in fereastra
browserului
<body> incepe corpul documentului, de aici este adaugat continutul care va apare in pagina
web
Continutul paginii
</body> indica sfarsitul corpului documentului
</html>
LIMBAJUL HTML
FORMATAREA LA NIVEL DE CUVANT
- CULOARE: <font color=”red”> cuvant </font> Se va colora cu rosu textul
”cuvant” - Dimensiune: <font size=”1”> TEXT </font>
- FONT/tip de scriere a textului : <font face=”arial”> TEXT </font>
- Trecerea pe un rand nou: Text <br>
- STIL:
o Italic (cursiv, inclinat): <i>Text</i>
o Bold (aldin, ingrosat): <b>Text</b>
o Underline (subliniat): <u>Text</u>
o Sectionat (strike): <s>Text</s>
o Indice : <sub>Text</sub>
o Exponent: <sup>Text</sup>
- BLOCURI PARAGRAF: <p>Text</p>
- BLOCURI DE TEXT: <p>Text</p>
- BLOCURI PREFORMATATE: <div> Text </div>
- Caractere marite: <big> Text </big>
- Caractere micsorate: <small> Text </small>
FORMATAREA PARAGRAFULUI
- CULOARE: <font color=”red”> <p>TEXT </p></font> rezulta TEXT colorat cu rosu -
Dimensiune: <font size=”1”> <p>TE XT </p> </font> ; valorile pot fi de la 1 (cel mai mic) la
7 (cel
mai mare)
- FONT :<font face=”arial”> <p>TEXT </p> </font>
- Trecerea pe un rand nou: <p>TEXT </p><br>
- STIL:
o Italic (cursive, inclinat): <i><p>TEXT </p></i>
o Bold (aldin, ingrosat): <b><p>TEXT </p></b>
o Underline (subliniat): <u><p>TEXT </p></u>
o Sectionat (strike): <s><p>TEXT </p></s>
LISTE
o LISTE NEORDONATE
<ul>Avantajele serviciului World Wide Web:
<li>multimedia, adica contin informatii sub forma de text, imagini, sunete, filme </li>
<li>sunt interactive, adica raspund la cererile utilizatorului </li>
<li>sunt indepenedente de platform hardware si software </li>
</ul>
Diverse tipuri de liste neordonate se declara astfel :
<ul type=”circle”> - pentru cerc
<ul type=”disc”> - pentru disc plin
<ul type=”square”> - pentru patrat
o LISTE ORDONATE
<ol>Avantajele serviciului World Wide Web:
<li>multimedia, adica contin infromatii sub forma de text, imagini, sunete, filme
</li> <li>sunt interactive, adica raspund la cererile utilizatorului </li>
<li>sunt indepenedente de platform hardware si software </li>
</ol>
Diverse tipuri de liste ordonate se declara astfel :
- <ol type=”A”> - pentru de ordonare de tipul A, B, C, D
- <ol type=”a”> - pentru de ordonare de tipul a, b, c, d
- <ol type=”I”> - pentru de ordonare de tipul I, II, III, IV
- <ol type=”i”> - pentru de ordonare de tipul i, ii, iii, iv
- <ol type=”1”> - pentru de ordonare de tipul 1, 2, 3, 4
Sa inceapa cu o anumita valoare lista:
- <ol type=”A” start=”2”> - pentru de ordonare de tipul litere mari incepand cu B, C, D
- <ol type=”a” start=”3”> - pentru de ordonare de tipul litere mici incepand cu c, d, e, f -
<ol type=”1” start=”4”> - pentru de ordonare de tipul cifre arabe incapand cu 4, 5, 6, 7
IMAGINI
o Inserarea unei imagini: <img src=”calculator.jpg”>
o Chenarul unei imagini: <img src=”calculator.jpg” border=”2”> bordura de grosime 2
o Dimensionarea unei imagini, latimea si inaltimea: <img src=”calculator.jpg”
width=”200” height=”100”>; <img src=”calculator.jpg” width=”20%” height=”10%”> o
Alinierea unei imagini: <img src=”calculator.jpg” align=”top”>
o Imagini pentru fondul unei pagini Web: <body background=”calculator.jpg”> o Imagini
folosite ca legaturi: <a href=”calculator.png”> <img src=”calculator.jpg”> </a>
FORMATAREA PAGINII
o Marginile paginii web: <body leftmargin=”100” topmargin=”200”>
o Culoarea de fond: <body bgcolor=”red”>
o Culoarea textului:<body text=”green”>
o Atribute multiple: fond si text <body bgcolor=”red” text=”green”>
TABELE
o Inserarea unui tabel
<table>
<tr>
<td>Fructe</td>
<td>Pret</td>
</tr>
<tr>
<td>Portocale </td>
<td>4 </td>
</tr>
<tr>
<td>Kiwi </td>
<td>3 </td>
</tr>
</table>
Fructe Pret
Portocale 4
kiwi 3
o alinierea unui tabel: <table align=”right”></table>
<table align=”left”></table>
<table align=”center”></table>
o Chenarul unui tabel: <table border=”1”></table>
o Culoarea de fond a unui tabel: <table bgcolor=”green”></table>
<tr bgcolor=”green”>
o Dimensionarea unui tabel: <table width=”300”
height=”50%”></table> o Titlul unui tabel: <caption></caption>
LINKURI (LEGATURI)
o Prin intermediul unui cuvant
Legatura catre o pagina web
<a href=”internet.html”>TEXT</a>
Legatura catre un site
<a href=”http://www.google.ro”> TEXT </a>
<a href=”http://www.yahoo.com”> TEXT </a>
<a href=”http://www.edu.ro”> TEXT </a>
Legatura catre un fisier
<a href=”laborator.doc”> TEXT </a>
<a href=”laborator.xls”> TEXT </a>
<a href=”laborator.ppt”> TEXT </a>
<a href=”laborator.txt”> TEXT </a>
Legatura catre o imagine
<a href=”calculator.jpg”> TEXT </a>
<a href=”calculator.bmp”> TEXT </a>
<a href=”calculator.gif”> TEXT </a>
<a href=”calculator.tiff”> TEXT </a>
<a href=”calculator.png”> TEXT </a>
o Prin intermediul unei imagini
Legatura catre o pagina web
<a href=”internet.html”> <img src=”calculator.jpg”> </a>
Legatura catre un site
<a href=”http://www.google.ro”> <img src=”calculator.jpg”> </a>
<a href=”http://www.yahoo.com”> <img src=”calculator.jpg”> </a>
<a href=”http://www.edu.ro”> <img src=”calculator.jpg”> </a>
Legatura catre un fisier
<a href=”laborator.doc”> <img src=”calculator.jpg”> </a>
<a href=”laborator.xls”> <img src=”calculator.jpg”> </a>
<a href=”laborator.ppt”> <img src=”calculator.jpg”> </a>
<a href=”laborator.txt”> <img src=”calculator.jpg”> </a>
Legatura catre o imagine
<a href=”calculator.jpg”> <img src=”calculator.jpg”> </a>
<a href=”calculator.bmp”> <img src=”calculator.jpg”> </a>
<a href=”calculator.gif”> <img src=”calculator.jpg”> </a>
<a href=”calculator.tiff”> <img src=”calculator.jpg”> </a>
<a href=”calculator.png”> <img src=”calculator.jpg”> </a>

Limbajul HTML

Î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

Limbajul HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Limbajul de marcare HTML

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