Recapitulare HTML CD PDF

HTML Recapitulare Competente Digitale
HTML HyperText Markup Language (Limbaj de marcare a HiperTextului)

Hipertext totalitatea resurselor sub forma imaginilor, textelor, clipurilor media, sunetelor existente
in spatiul Web
Un document HTML are doua parti : ANTET (<head>... </head>) si corpul documentului
(<body>..</body>).
Orice fisier html are urmatoarea structura:
<html>
<head>
<title>Titlul</title>
</head>
<body>
</body>
</html>
Tagul <body> permite stabilirea fundalului i a culorii hiperlinkurilor.
<body bgcolor="#ff0000"> - culoarea fundalului paginii devine rosie
<body background="fundal.jpg"> - pune o imagine n fundalul paginii
<body link="#ff0000" alink="#00ff00" vlink="#0000ff"> - stabilete culoarea linkurilor nevizitate i
vizitate.
Formatarea paragrafelor
n HTML delimitarea paragrafelor se realizeaz cu ajutorul tag-urilor <P> i </P>, eticheta de
sfrit fiind opional.
Tag-ul <P> admite atributele:
ALIGN = LEFT RIGHT CENTER JUSTIFY
TITLE
LANG
DIR
Pentru a stabili acelai mod de grupare pentru mai multe paragrafe, trebuie s le grupm ntrun singur bloc cu ajutorul tag-ului <DIV>.
Pentru a insera n document o linie vid se utilizeaz tag-ul <BR>.
Fiecare element structural al unui document, de obicei, este precedat de un paragraf titlu
(heading).
Documentele HTML pot fi structurate pe ase niveluri, n funcie de importana lor, existnd
ase etichete care definesc nivelul paragrafului titlu n structura documentului: <H1>, <H2>, <H3>,
<H4>, <H5>, <H6>. Etichetele de sfrit sunt obligatorii.
Tag-urile pentru paragrafe admit atributele: LANG, DIR, TITLE, ALIGN.
Aplicarea unor efecte asupra textului
Pentru a aplica unei zone de text un anumit efect, se ncadreaz textul ntre eticheta de nceput
i cea de sfrit, corespunztoare efectului respectiv.
Formatarea textului se poate face la nivel fizic utiliznd urmtoarele tag-uri:
<B> text </B>
Prof. Constantin Mihaela
aplic stilul bold textului.

1
<I> text </I>

<U> text </U>
<STRIKE>text</STRIKE>
<TT>text</TT>
aplic stilul nclinat textului.

aplic stilul subliniat textului.
produce "tierea" cu o linie a textului coninut
afieaz textul n fontul teletype (neproporional), nu este
cunoscut de toate browser-ele
In HTML se pot aplica i efecte logice, n concordan cu semnificaia textului respectiv:

afieaz textul cu dimensiune mai mare dect fontul de
<BIG>text</BIG>
baz
afieaz textul cu dimensiune mai mic dect fontul de
< SMALL>text</ SMALL >
baz
identific un termen de definiie i-l scrie cu caractere
<DFN>text</DFN>
diferite de textul nconjurtor
evideniaz textul specificat, de obicei prin scrierea italic
<EM>text</EM>
aplic unul dintre cele ase formate predefinite de antet
<Hn>text</Hn>
produce o evideniere pronunat a textului
<STRONG>text</STRONG>
mut textul selectat mai jos dect linia de baza a textului
precedent si aplic un font mai mic (face trecerea n indice
<SUB>text</SUB>
inferior)
mut textul selectat mai sus dect linia de baz a textului
precedent si aplic un font mai mic (face trecerea n indice
<SUP>text</SUP>
superior)
Utilizarea listelor
Utilizarea listelor este necesar pentru prezentarea informaiilor n mod structurat. Se pot utiliza
trei tipuri de liste:
1. Listele neordonate (Unordered List) Aceste liste sunt ncadrate ntre tag-urile <UL> i
</UL>, fiecare element al listei fiind precedat de tag-ul <LI> (List Item) care introduce
naintea elementului o bulin.
Selectarea simbolului care preced fiecare intrare n list se realizeaz cu ajutorul atributului
TYPE care poate avea valorile: disc, circle i square.
Ex. <ul type=square>.</ul>
2. Listele ordonate (Ordered List) Aceste liste sunt ncadrate ntre tag-urile <OL> i </OL>,
fiecare element al listei fiind precedat de tag-ul <LI>. Atributele acceptate de tag-ul OL sunt:
- TYPE=1|a|A|i|I care determin modul de numerotare a intrrilor n list i poate avea
valorile: 1 (pentru numerotare cu cifre arabe: 1, 2, 3,), a (intrrile n list vor fi precedate de literele
mici ale alfabetului latin: a, b, c , ), A (intrrile n list vor fi precedate de literele mari ale alfabetului
latin: A, B, C,), i (numerotarea se face cu cifre romane mici: i, ii, iii,), I (numerotarea se face cu
cifre romane mari: I, II, III,).
- START=numr stabilete numrul de la care s se nceap numerotarea listei. Valoarea
implicit este 1|a|A|i|I.
Pentru a modifica valoarea cu care este automat numerotat a intrrii n list se include n tagul <LI> corespunztore intrrii respective atributul:
- VALUE=numr unde numr reprezint valoarea de etichetare a intrrii n lista
respectiv.
3. Listele de definiii (Definition List) sunt cele n care intrrile sunt formate din dou
paragrafe: primul corespunztor termenului iar al doilea, identat, corespunztor definiiei termenului.
Crearea unei astfel de liste este marcat cu tag-urile <DL> i </DL>. Prin urmare o intrare n list va
avea dou componente:
- termenul marcat cu tag-ul <DT> (Definition Term) care poate conine doar elemente de
formatare inline.
- definiia termenului marcat cu tag-ul <DD> (Definition Description) care poate conine i
elemente de formatare la nivel de bloc.
TABELE
Aceste etichete au o mare utilizare deoarece tabele constituie structura care sta la baza
organizarii marii majoritati a paginilor web (inclusiv cea de fata).
Tabelul este format din linii si coloane impartind zona in celule. Fiecare celula pastreaza
informatia care va fi afisata. Pentru o afisare corecta a tabelului fiecare rand va avea acelasi numar de
celule. Daca dorim ca o celula sa fie goala vom introduce un spatiu gol (space) sau codul
echivalent .
Pentru inserarea unui tabel este folosita perechea de etichete <table> si </table>, pentru un
rand <tr> si </tr> iar pentru o celula <td> si </td>.
Tabele pot fi imbricate, adica in interior pot contine unul sau mai multe tabele.
Exemplu: tabel cu 2 coloane si 2 randuri, border 1, coloana 1 latime 80px, coloana 2 latime 160px,
fiecare celula are o alta culoare de fond (bgcolor)
HTML
<table border="1">
<tr><td width="80" bgcolor="red">rosu</td><td width="160"
bgcolor="yellow">galben</td></tr> <tr><td
bgcolor="white">alb</td><td bgcolor="green">verde</td></tr>
</table>
Afisare
rosu
galben
alb
verde
Atributele etichetei table sunt:

border = bordura (0 = lipsa bordura)
width = latimea tabelului
height = inaltimea tabelului
bgcolor = culoarea de fundal
background = imaginea de fundal (W3C invalid, folositi style)
cellspacing = distanta intre celule
cellpadding = distanta dintre marginea celulei si continut
Atributele etichetei td sunt:
align = aliniere pe orizontala a continutului (left=stanga, right=dreapta, center=centru)
valign = aliniere pe verticalala a continutului (top=sus, bottom=jos, middle=mijloc)
width = latimea celulei
height = inaltimea celulei
bgcolor = culoarea de fundal
background = imaginea de fundal (W3C invalid, folositi style)
colspan = uneste celula cu cea din dreapta ei

rowspan = uneste celula cu cea de sub ea
Inserarea legaturilor in documente HTML

Principala caracteristic a hipertextelor o constituie utilizarea legturilor (links). Un link este o
conexiune ctre o alt resurs Web (un alt hipertext sau o imagine, o secven video sau audio, un
program etc.), resurs care poate fi accesat din fereastra browser-ului printr-un simplu clic.
Limbajul HTML conine multiple elemente prin intermediul crora se poate crea o legtur
ctre resurse Web:
- IMG creeaz o legtur ctre o imagine;
- LINK specific legturi ctre resurse utile;
- A creeaz o legtur ctre o resurs Web ntr-un document HTML;
- APPLET creeaz o legtur ctre un program executabil pe calculatorul utilizatorului.
Elementul A
Pentru a crea un link ntr-un document HTML se utilizeaz tag-ul A (anchor - ancor). textul
scris ntre tag-ul de nceput <A> i cel de sfrit </A> va aprea evideniat n fereastra browser-ului:
subliniat, colorat n funcie de valorile atributelor LINK, VLINK, ALINK.
Atributele specifice elementului A sunt:
HREF = URL specific adresa resursei la care se face legtura;

NAME = ir_de_caractere asociaz un nume unic ancorei curente, astfel nct s poat constitui
inta unui alt link;
TITLE = ir_de_caractere asociaz un nume resursei la care se face legtura. Browser-ul va
afia titlul resursei cnd utilizatorul deplaseaz mouse-ul deasupra legturii.
Exemplu:
<a href="html_generalitati.htm">Limbajul HTML</a>
Observaii:
- se poate defini o ancor vid;
Exemplu:
<a name=Inceput></a>
<a href="#inceput">De la inceput</a>

-
pentru a specifica drept int o ancor dintr-un alt document se utilizeaz notaia:
adresa#nume_ancor;
Exemplu:
<a href="Linkuri.htm#element_A">Elementul A</a>
-
nu este permis utilizarea imbricat a legturilor;

protocolul care permite trimiterea unui mesaj e-mail dintr-un program de navigare este mailto:
mailto:adres-destinatar .
Elementul LINK
Spre deosebire de A elementul LINK poate fi plasat numai n antetul documentului (n
seciunea HEAD). Elementul LINK admite aceleai atribute ca i elementul A dar nu are etichet de
sfrit.
Elementul LINK permite furnizarea diferitor informaii cum ar fi cele despre autor, versiunile
n alte limbi ale documentului, versiuni anterioare etc.
Inserarea imaginilor in documente HTML
Elementul IMG permite inserarea imaginilor, APPLET permite inserarea de applet-uri scrise
n limbajul Java iar elementul OBJECT permite inserarea elementelor multimedia ntr-un document
HTML.
Elementul IMG
Elementul IMG permite inserarea imaginilor. Acesta nu are coninut i nu admite tag de
sfrit. Specificarea imaginii ce urmeaz a fi inserat se face prin intermediul atributului:
SRC = URL care specific adresa fiierului care conine imaginea. Cele ma utilizate formate de
imagini pentru pagini web sunt: .gif i .jpeg;
ALT = text specific un text alternativ care va fi afiat n locul imaginii de browser-ele care nu
pot vizualiza imagini;
HEIGHT = dimensiune nlimea imaginii;
WIDTH = dimensiune limea imaginii;
Dimensiunea poate fi exprimat n numr de pixeli sau procente (referitoare la spaiul disponibil i nu
la dimensiunea imaginii);
ALIGN = valoare specific modul de aliniere a imaginii n raport cu textul. Valoare pote fi:
TOP, MIDDLE, BOTTOM, LEFT, RIGHT;
BORDER = numar_pixeli specific grosimea chenarului n care va fi ncadrat imaginea;
HSPACE = dimensiune specific spaiul inserat n stnga i n dreapta imaginii;
VSPACE = dimensiune specific spaiul inserat n partea de sus i n partea de jos a imaginii.
Inserarea unei legaturi pe o imagine
Prin utilizarea elementului IMG drept coninut al elementului ancor <A> se poate insera n
document o legtur pe o imagine adic prin acionarea imaginii printr-un clic va fi accesat resursa
destinaie.
<a href="http://www.tutorialehtml.com">
<img src="../img/image.jpg"> </a>
Exemple:
Ex1. <html>
<head>

<title>The End</title>
</head>
<body>
<p><img src="Cat1.jpg" width="475" height="356"></p>
<p align="left"><b><font size="5">The End</font></b></p>
</body>
</html>
Ex. 2
Imagini pentru fondul unei pagini
O imagine poate fi utilizata pentru a stabili fondul unei pagini Web. In acest scop se foloseste
atributul background al etichetei <body>, avand ca valoare adresa URL a imaginii.
Imaginea se multiplica pe orizontala si pe verticala pana umple intregul ecran.
<html> <head><title> Pagina cu imagine de fond</title></head> <body background="w3.gif">
1<br>2<br>3<br>4<br> 5<br>6<br>7<br>8<br> 9<br> </body>
</html>
Alinierea unei imagini
Ex. 3
Alinierea unei imagini se poate face prin intermediul atributului align care poate lua urmatorele valori:
" left " - aliniere la stanga; celelalte componente sunt dispuse pe in partea dreapta;
" right " - aliniere la dreapta; celelalte componente sunt dispuse pe in partea stanga;
" top " - aliniere deasupra; partea de sus a imaginii se aliniaza cu partea de sus a textului ce precede
imaginea;
" middle " - aliniere la mijloc; mijlocul imaginii se aliniaza cu linia de baza a textului ce precede
imaginea.
" bottom " - aliniere la baza; partea de jos a imaginii se aliniaza cu linia de baza a textului.
<html>
<head><title> Alinierea unei imagini</title></head> <body> Alinieri:
<br> Pe verticala:
<img src="w3.gif" align="top">
La mijloc: <img src="w3.gif" align="center">
Jos: <img src="w3.gif" align="bottom"> Text dupa imagine.
</body>
</html>
Vizualizare exemplu:
Bibliografie:
1. Office 2013(Aplicatii pentru laborator Teorie/teste), Ed. Cygnus Suceava, 2013
2. http://html-tutor.net/
3. http://www.competentedigitale.ro/html/taguri.html

Recapitulare HTML CD PDF

Î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

Recapitulare HTML CD PDF

Încărcat de

Drepturi de autor:

Formate disponibile

HTML Recapitulare Competente Digitale

HTML HyperText Markup Language (Limbaj de marcare a HiperTextului)

aplic stilul bold textului.

HTML Recapitulare Competente Digitale

<I> text </I>

aplic stilul nclinat textului.

In HTML se pot aplica i efecte logice, n concordan cu semnificaia textului respectiv:

Prof. Constantin Mihaela

HTML Recapitulare Competente Digitale

Atributele etichetei table sunt:

HTML Recapitulare Competente Digitale

colspan = uneste celula cu cea din dreapta ei

Inserarea legaturilor in documente HTML

HREF = URL specific adresa resursei la care se face legtura;

<a href="#inceput">De la inceput</a>

nu este permis utilizarea imbricat a legturilor;

Prof. Constantin Mihaela

HTML Recapitulare Competente Digitale

HTML Recapitulare Competente Digitale

Imagini pentru fondul unei pagini

Prof. Constantin Mihaela

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