Tema:Structura generală a unui
document HTML.
Formatarea textului.
� - Este un set de coduri logice care constituie apariţia unui document web si a informatiilor pe care le deţine.
Codurile sunt scrise intre "<" (paranteza deschisa) si ">" (paranteza inchisa), cu toate ca nu sunt chiar
paranteze, aşa se numesc si arata aşa: < >.
� Exemplu: <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 "<".
Exemplu: <FONT> ... </FONT>
- Primul cuvânt care apare înăuntru "<" se numeşte element sau eticheta HTML si spune browser-ului 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>
� - La început un element HTML cuprinde (înconjoară ) datele documentului. Acest element conţine
doua sub-elemente principale: HEAD si BODY. In HEAD se poate adauga titlul paginii web si alte
elemente numite metatag-uri, precum si scripturi JavaScript si stil-uri CSS. In BODY se adauga
continutul documentului care va fi afisat in pagina web.
<html>
<head>
<title>Titlu Documentului</title>
</head>
<body>
Continutul paginii
</body>
</html>
� Mentionam citeva dintre atributele etichetei <BODY>
1)bgcolor=‘’orange”-culoarea fundalului paginii.
2)text=‘’blue”-culoarea textului.
3)leftmargin=‘’120”-stabileste distanta in pixeli dintre marginea stinga a
ferestrei programului si marginea stinga a continutului paginii.
4)topmargin=‘’240”-stabileste distanta in pixeli dintre marginea de sus a
ferestrei programului de explorare si marginea de sus a continutul paginii.
6)background-ca fundal o imagine
Ex:<body bgcolor=‘’orange" text=‘’blue">
Clasa XII
</body>
Formatarea textului
� Nivelurile de titlu.
� Pentru titluri din continutul documentului HTML este indicat folosirea etichetelor <Hn>, (headings)
unde ‘n' este un numar intre 1 si 6.
� - In cadrul elementului BODY, elementele Headings sunt folosite ca titluri sau pentru o mai buna
impartire a continutului paginii.
� - Mărimea textului înconjurat de elementul Heading variază de la foarte mare, in <H1> pana la
foarte mic in <H6>.
Exemplu:
Cod HTML Cum apare in pagina
<html>
<head>
<title>Titlu documentului</title>
</head>
<body>
<h1>Heading 1</h1>
Heading 1
Heading 2
<h2>Heading 2</h2> Heading 3
<h3>Heading 3</h3> Heading 4
Heading 5
<h4>Heading 4</h4> Heading 6
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
2. Paragraf <p> ... </p>
Cod HTML Cum apare in pagina
<html>
<head>
<title>Titlu documentului</title>
</head>
Paragraf 1
<body>
Paragraf 2
<p>Paragraf 1</p>
Paragraf 3
<p>Paragraf 2</p>
Paragraf 4
<p>Paragraf 3</p>
<p>Paragraf 4</p>
</body>
</html>
3. Un nou rand <br>
Cod HTML Cum apare in pagina
<html>
<head>
<title>Titlu documentului</title>
</head>
<body>
Heading 1
<h1>Heading 1</h1> Paragraf 1
<p>Paragraf 1<br> Linie 2
Linie 2<br> Linie 3
Linie 3<br> ...
... </p> Paragraf 2
<p>Paragraf 2</p>
</body>
</html>
4. Linie orizontala <hr>
- SIZE = latimea liniei, in pixeli (standard este 2)
- WIDTH = lungii liniei, in pixeli sau procente din lungimea afisarii paginii (standard 100%)
- NOSHADE = afiseaza linia fara a avea un aspect 3D
- ALIGN = aliniaza linia (Left, Center, Right), adica Stanga, Centru sau Dreapta paginii ( Standard centru)
- COLOR = seteaza culoarea liniei
Cod HTML Cum apare in pagina
<html>
<head>
<title>Titlu documentului</title>
</head>
<body>
<h1>Heading 1</h1>
Heading 1
<p>Paragraf 1<br> Paragraf 1
Linie 2<br> Linie 2
Linie 3<br> Linie 3
... </p> ...
<hr> Paragraf 2
<hr color="#1111fe" size="4" width="50%">
<p>Paragraf 2</p>
</body>
</html>
HTML contine mai multe elemente, tag-uri si atribute, pentru afisarea textului in mai multe
formate cu aspecte grafice diferite.
1. Tag-ul <FONT> ... </FONT>
� Exemplu:
� <font color="#00dd00">Acest text are culoarea
verde</font>
Tema 2
Sunt două categorii de stiluri:
[Link] fizice-stabileste forma textului
[Link] logice-marchiază textul în funcție de semnificația lui.
Stiluri fizice:
� Elemente des folosite pentru formatul textului sunt:
� - Bold (ingrosat) <b> ... </b>
� - Italic (inclinat) <i> ... </i>
� - Underline (subliniat) <u> ... </u>-
� <strike> Text taiat </strike>
� - <big> Prezinta textul intr-un font mare </big>
� - <small> Prezinta textul intr-un font mic </small>
� - <sub> Afisaza textul in pozitia subscript </sub>
� - <sup> Aseaza textul in pozitia superscript </sup>
Exemplu:
<html>
<head>
<title>Titlu documentului</title>
</head>
<body>
<p>
<strike> Text taiat </strike><br>
<big> Prezinta textul intr-un font mare </big><br>
<small> Prezinta textul intr-un font mic </small><br>
<sub> Aseaza textul in pozitia subscript </sub> normal
<sup> Aseaza textul in pozitia superscript </sup><br>
</p>
</body>
</html>
Stiluri logice:
•- <dfn> Defineste exemplu de termen inchis </dfn>
•- <code> Folosit pentru extragerea unui cod de program </code>
•- <samp> Folosit pentru simple productii de programe, scripturi , etc. </samp>
•- <kbd> Folosit pentru text care va fi scris de utilizator </kbd>
•- <var> Folosit pentru variabile sau argumente de comenzi </var>
Exemplu:
<html>
<head>
<title>Titlu documentului</title>
</head>
<body>
<p>
<dfn> Definite exemplu de termen inchis </dfn><br>
<code> Folosit pentru extragerea unui cod de program </code><br>
<samp> Folosit pentru simple productii de programe, scripturi , etc. </samp><br>
<kbd> Folosit pentru text care va fi scris de utilizator </kbd><br>
<var> Folosit pentru variabile sau argumente de comenzi </var><br>
</p>
</body>
</html>
Definite exemplu de termen inchis
Folosit pentru extragerea unui cod de program
Folosit pentru simple productii de programe, scripturi , etc.
Folosit pentru text care va fi scris de utilizator
Folosit pentru variabile sau argumente de comenzi