HTML 1 Formatari

EDITAREA PAGINILOR WEB CU HTML
FORMATARI
1. HTML - NOŢIUNI DE BAZA

HTML este prescurtarea de la Hyper Text Mark-up Language si este codul care sta la baza paginilor
web. Paginile HTML conţin elemente (etichete) si au extensia .html sau .htm.
Editarea unui astfel de fişier se poate face cu Notepad sau cu un Notepad++.
Elementele sunt încadrate de tag-uri. Tag-urile sunt simbolurile care marchează începutul si
sfârşitul unui element.
Tag-ul pentru început este < iar pentru sfârşit este >.
In marea lor majoritate elementele sunt pereche, una de deschidere <eticheta> si alta de închidere
</eticheta>. Browserul interpretează aceste etichete afişând rezultatul pe ecran. Există și elemente
singulare (fără pereche).
Elemente pereche Elemente singulare

<HTML> şi </HTML> 
<HEAD> şi </HEAD> <HR>
 şi <IMG>
HTML nu este un limbaj case sensitive (nu face deosebirea intre litere mici si mari).
Unele etichete permit utilizarea de atribute care pot avea anumite valori:
<eticheta atribut="valoare"> ... </eticheta>
2. STRUCTURA UNUI DOCUMENT HTML

Un document HTML este delimitat de etichetele <HTML> şi </HTML> şi este format din:
 Antetul documentului, delimitat de etichetele <HEAD> şi </HEAD> care conţine informaţii
referitoare la document cum ar fi: titlul documentului, autorul acestuia, etc.
 Corpul documentului, care conţine textul propriu-zis al documentului, precum şi informaţii
referitoare la formatarea acestuia, delimitat de etichetele <BODY> şi </BODY>.
Astfel, structura generală a unui document HTML:

<!DOCTYPE HTML>
<HTML>
<HEAD>
……….. antetul documentului ……….
</HEAD>
<BODY>
………… corpul documentului
</BODY>
</HTML>
Zona HEAD conţine titlul paginii intre etichetele <TITLE> si </TITLE>, descrieri de tip <META>, stiluri
pentru formatarea textului, scripturi şi linkuri catre fişiere externe (de exemplu scripturi Javascript,
fisiere de tip CSS).
Conţinutul etichetei TITLE este afişat de browser pe cea mai de sus linie (banda albastra de sus).
Etichetele de tip META conţin cuvinte cheie, descrierea paginii, date despre autor, informaţii utile
motoarelor de căutare si au următorul format:
<META NAME="nume" CONTENT="continut">
Zona BODY găzduieşte practic toate etichetele afişate de browser pe ecran.
3. ATRIBUTELE ELEMENTULUI BODY

BACKGROUND –Stabilește o imagine de fundal
BGCOLOR - Stabileşte culoarea fundalului documentului
TEXT - Stabileşte culoarea implicită a textului
LINK - Culoarea pentru link-urile nevizitate
VLINK - Culoarea pentru link-urile vizitate
ALINK - Culoarea link-ului activ
■ Exemplul 1
<HTML>
<HEAD>
<TITLE> Acesta este Titlul documentului </TITLE>
</HEAD>
<BODY BGCOLOR=”#808080” TEXT=”000080” >
 Acesta este un text ALBASTRU MARIN (000080) 
 Fundalul documentului este GRI (808080) 
</BODY>
</HTML>
4. CULORI
Culorile pot fi specificate:
 utilizând denumiri predefinite (din limba engleză): aqua, black, blue, fuchsia, gray, green,
lime, maroon, navy, olive, purple, red, silver, teal, white, yellow.
 construind culori proprii prin combinarea a trei culori de bază roşu, verde şi albastru. În
acest caz specificarea unei culori se face indicând în ordinea roşu, verde, albastru trei valori
hexazecimale cuprinse între 00 şi FF:
Negru Black #000000 VERDE GREEN #008000

Alb White #FFFFFF GALBEN YELLOW #FFFF00
Roşu Red #FF0000 ALBASTRU BLUE #0000FF
Argintiu Silver #C0C0C0 VERNIL LIME #00FF00
Gri Gray #808080 MĂSLINIU OLIVE #808000
Castaniu Maroon #800000 ALBASTRU NAVY #000080
MARIN
5. FORMATAREA TEXTULUI
Formatarea textului se poate face
 la nivel de bloc (paragraf)
 la nivel de caracter
5.1. FORMATAREA PARAGRAFELOR

Prin paragraf în Word se înţelege o porţiune de text cuprinse între două caractere ENTER.
În HTML delimitarea paragrafelor se face cu ajutorul etichetelor şi 
5.1.1. ALINIEREA UNUI PARAGRAF
ALIGN = LEFT | CENTER | JUSTIFY | RIGHT
■ Exemplul 2
<html>
<head>
<title>Alinierea paragrafelor</title>
</head>
<body>
 Acesta este un text ALINIAT DREAPTA 
 Acesta este un text ALINIAT STANGA 
</body>
</html>
5.1.2. FORMATAREA UNUI GRUP DE PARAGRAFE

Pentru a stabili acelaşi mod de aliniere pentru un grup de paragrafe, acestea se vor grupa într-un
bloc cu ajutorul etichetei <DIV>
■ Exemplul 3
<html>
<head> <title>Alinierea paragrafelor</title></head>
<body>
<DIV ALIGN = ”LEFT”>
 Acesta este ALINIAT STANGA 
 Acesta este tot ALINIAT STANGA 
</DIV>
</body>
</html>
5.1.3. INSERAREA UNEI LINII VIDE

Inserarea unei linii vide sau trecerea pe rândul următor (rând gol) se realizează cu eticheta 
■ Exemplul 4
<html>
<head>
<title>eticheta </title>
</head>
<body>
 primul paragraf. vor urma trei randuri goale
 
 al doilea paragraf de dupa cele trei randuri goale
</body>
</html>
5.1.4. UTILIZAREA PARAGRAFELOR TITLU
Documentele HTML pot fi structurate pe 6 niveluri, existând 6 etichete care definesc nivelul
paragrafului titlu în structura documentului.
Cele 6 etichete sunt <H1>, <H2>, …<H6>
Exemplul 5
<HTML>
<HEAD>
<TITLE>Acesta este Titlul documentului</TITLE>
</HEAD>
<BODY BGCOLOR=#808080 TEXT=000080 >
<H1> CAPITOLUL 1</H1>
<H2> Subcapitolul 1.1. </H2>
<H3> Sectiunea 1.2.1. </H3>
<H1> CAPITOLUL 2</H1>
</BODY>
</HTML>
5.1.5. LINIILE ORIZONTALE

Liniile orizontale se introduc utilizând eticheta <HR>
Atributele etichetei <HR> sunt:
ALIGN – valori posibile left, center, right
WIDTH – valori posibile:
- un număr pozitiv reprezentând lungimea în pixeli
- un procent de la 1% la 100%
SIZE – grosimea în pixeli
NOSHADE – fără umbră
COLOR – culoarea liniei
■ Exemplul 6
<html>
<head>
<title>Linii orizontale</title>
</head>
<body>
<hr color="#FF0000" width="200" align="right" >
<hr color="#0000FF" width="400" align="center" >
<hr size="8" noshade width="50%">
</body>
</html>
5.2. FORMATAREA LA NIVEL DE CARACTER
Formatarea textului la nivel de caracter se realizează cu ajutorul etichetei 
5.2.1. ATRIBUTELE ETICHETEI FONT

SIZE = ”Valoare”
COLOR = ”Culoare”
FACE = ”Font”
■ Exemplul 7
<html>
<head>
<title> eticheta FONT </title>
</head>
<body>
 arial, rosu +4
 Times new roman,
albastru 4
Verdana verde
-3
fantasy verde +3
cursive rosu +3
</body>
</html>
MĂRIMEA LITEREI
Mărimea fontului se stabileşte utilizând atributul size.
Valorile posibile sunt:
 1, 2, 3, 4, 5, 6, 7 (valoarea prestabilită este 3)
 +1, +2, …, +6, -1, -2, …, -6 pentru a mări sau micşora valoarea prestabilită
TIPUL LITEREI (FONTUL)

Tipul literei se stabileşte utilizând atributul face
Pentru a utiliza un tip de literă, se poate utiliza:
 Numele unui tip de literă generic, recomand: ”SERIF”, ”SANS-SERIF”, ”CURSIVE”, ”FANTASY”,
”MONOSPACE”
 O listă de nume de tipuri de literă separate prin virgule. Într-un astfel de caz, browser-ul va
utiliza fie primul nume de tip de literă cunoscut, fie parametrii să prestabiliţi. Ultimul nume
din listă trebuie să fie un nume de de tip de literă generic recomandat.
CULOAREA LITEREI
Culoarea fontului se stabileşte utilizând atributul color.
■ Exemplul 8
<html>
<head>
<title> CULORI</title>
</head>
<body>
 black 
 blue 
 green 
 red 
 teal 
</body>
</html>
5.2.2. APLICAREA UNOR EFECTE ASUPRA TEXTULUI

■ Exemplul 9
<html>
<head> <title>Stiluri fizice de text</title> </head>
<body>
 ingrosat 
 inclinat
 subliniat 
<BIG> mai mare </BIG>
 mai mic 
<STRIKE> taiat </STRIKE>
 Bold si inclinat +6
</body>
</html>
5.2.3. UTILIZAREA INDICILOR SI EXPONENŢILOR

Pentru a plasa un text ca indice (SUBSCRIPT) acest text se va încadra între etichetele
 şi 
Pentru a plasa un text ca indice (SUPERSCRIPT) acest text se va încadra între etichetele
 şi 
■ Exemplul 10
<html>
<head>
<title>Stiluri fizice de text</title>
</head>
<body>
 FORMA GENERALA A ECUATIEI DE GRADUL II 
 <h2> A*X 2 +B*X+ C = 0 </H2> 
 <h3> x 1 = (- B + sqrt (D)) / 2 * A </h3>
 <h3> x 2 = (- B - sqrt (D)) / 2 * A </h3>
</body>
</html>

HTML 1 Formatari

Încărcat de

Informații document

Titlu original

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 1 Formatari

Încărcat de

Drepturi de autor:

Formate disponibile

EDITAREA PAGINILOR WEB CU HTML

1. HTML - NOŢIUNI DE BAZA

Editarea unui astfel de fişier se poate face cu Notepad sau cu un Notepad++.

Elemente pereche Elemente singulare

<eticheta atribut="valoare"> ... </eticheta>

2. STRUCTURA UNUI DOCUMENT HTML

Astfel, structura generală a unui document HTML:

Zona BODY găzduieşte practic toate etichetele afişate de browser pe ecran.

3. ATRIBUTELE ELEMENTULUI BODY

Negru Black #000000 VERDE GREEN #008000

5.1. FORMATAREA PARAGRAFELOR

5.1.2. FORMATAREA UNUI GRUP DE PARAGRAFE

5.1.3. INSERAREA UNEI LINII VIDE

5.1.5. LINIILE ORIZONTALE

5.2.1. ATRIBUTELE ETICHETEI FONT

TIPUL LITEREI (FONTUL)

5.2.2. APLICAREA UNOR EFECTE ASUPRA TEXTULUI

5.2.3. UTILIZAREA INDICILOR SI EXPONENŢILOR

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