HTML Pentru Incepatori

La crearea unei pagini WEB se parcurg paii:
1. StartProgramsAccessoriesNOTEPAD.
2. Editarea codului surs ( a tag-urilor) n editorul de texte NOTEPAD.
3. Salvarea codului surs sub forma unui fiier cu extensia HTM sau HTML (obligatoriu).
Fiierul va fi salvat n folderul dvs.
4. Localizarea fiierului salvat la pasul 3 cu programul Windows Explorer (distinctiv acest
fiier va avea pictograma urmtoare:
5. Lansarea n execuie a fiierului cu extensia HTM sau HTML (pentru a vedea cum sunt
interpretate tag-urile scrise n Notepad pe Internet) dublu click pe fiier i astfel se va
deschide programul Internet Explorer.
6. Modificarea codului surs se va face n Notepad. Deschiderea fiierului pentru ai
modifica sursa se poate face:
a. NotepadFileOpen ...
b. Direct din fereastra ce s-a deschis la pasul 5 (fereastra Internet Explorer) astfel:
ViewSource (va deschide automat Notepad-ul).
Orice modificare adus codului surs trebuie salvat (FileSave). Pentru a vedea i pe
Internet modificarea fcut n Notepad trebuie, fie s repetm paii 4 i 5, fie s revenim
n fereastra Internet Explorer (ea este deja deschis vezi bara de START) i s alegem
din meniul ViewRefresh (sau aps tasta F5)
Observaie: Pentru o nou modificare a codului sursa se va repeta pasul 6.
TAG-uri UTILZATE
Structura general a unui fiier cu extensia HTM sau HTML este:
nceput i sfrit de
document html
Antetul documentului
Titlul
Corpul propriu-zis al
documetului
<html>
<head>
<title> </title>
</head>
<body>
..
..
..
</body>
</html>
Observaie: un tag se va scrie ntotdeauna ncadrat de semnele <
>. Efectul unui tag este

vizibil pna cnd acesta este nchis (Ex: <title> Prima pagina WEB</title> care permite scrierea
pe bara de titlu a programului Internet Explorer a textului Prima pagina WEB).
Tag-uri cu efect asupra ntregii pagini web
<body bgcolor = a Text = b Link = c Vlink = d Alink = e> - permite stabilirea unei culori de
fundal a paginii Web, culoarea implicit de scriere a textului, culoarea legturilor, culoarea
legturilor vizitate, culoarea legturilor de aciune.
Atributul BGCOLOR stabilete culoarea de fundal a paginii Web (Ex: <body bgcolor =
blue> - culoarea de fundal va fi albastr sau <body bgcolor = 804050> (formatul de culoare
este RRGGBB rou, verde, albastru) sau <body bgcolor = 15%85%95% > sau <body bgcolor =
aaffcc> (formatul hexazecimal))
Atributul TEXT permite stabilirea culorii implicite de scriere pe ntreaga pagin Web
(Ex: <body Text = red> tot textul pe pagina de Web va scris cu rou)
Atributul LINK permite stabilirea culorii unei legturi (vezi tag-urile de la legturi).
Implicit aceasta este albastr. (Ex: <body link = green> - legturile vor avea culoarea verde)
Atributul Vlink permite stabilirea culorii unei legturi vizitate (Ex: <body vlink = red>
un link vizitat va avea culoarea roie)
Atributul ALINK permite stabilirea culorii unei legturi de aciune, adic pna la
realizarea conexiunii stabilite de legtur (vezi tag-urile de la legturi) link-ul va avea culoarea
stabilit prin ALINK, iar dup realizarea conexiunii acesta culoare va devenii automat cea
specificat cu VLINK (Ex: <body alink = yellow> - un link n aciune va avea culoarea galben)
OBS. Un tag poate folosii toate atributele de care dispune sau numai o parte din acestea (Ex:
<body bgcolor = red text = yellow link = gray>
Dac dorim ca pe o pagin Web s avem ca fundal o poz, atunci n locul atributului
BGCOLOR din cadrul tag-ului <body bgcolor = a ......> vom folosii atributul BACKGROUND
urmnd a specifica adresa pozei respective (Ex: <body background = c:\student\poza.gif text =
red >
Tag-uri pentru formatarea caracterelor i aranjarea textului

 - permite scrierea caracterelor ngroat (bold)
 - permite scrierea caracterelor nclinat (italic)
 - permite scrierea caracterelor subliniat (underline)
<center> - permite alinierea pe centru a textului pe pagin
permite alinierea la stnga/dreapta/centru a textului pe pagin
<hr size = a color = b width = c align = left/right/center > - plaseaz o linie orizontal n
document.
Atributul SIZE definete grosimea liniei orizontale (Ex: <hr size = 3> linia va avea o
grosime de aproximativ 1 mm)
Atributul COLOR permite colorarea liniei orizontale (Ex: <hr color = red> - linia va
avea culoarea roie - sau color = 804050 (formatul de culoare este RRGGBB rou, verde,
albastru) sau color = 15%85%95% sau color = aaffcc (formatul hexazecimal))
Atributul WIDTH specific lungimea liniei orizontale (Ex: <hr width = 45%> - linia
orizontal o s ocupe numai 45% din suprafaa paginii web)
Atributul ALIGN permite specificarea modului de aliniere a liniei respective
(stnga/dreapta/centru)
 - ntrerupe linia curent i trece textul sau imaginea pe urmtoarea linie
 - ntrerupe linia curent i trece textul sau imaginea la paragraful urmtor
Obs. este echivalentul lui (de dou ori ).
 - permite stabilirea culorii de scriere a caracterelor, stabilirea
dimensiunii acestora, precum i stilul de scriere (Ex: Times New Roman, sau Arial)
Atributul COLOR permite colorarea caracterelor (Ex: textul va fi
scris cu albastru. Observaie: Acest parametru are prioritate fa de acelai atribut din tag-ul
<body text = b>. Aadar, dac se stabilete o culoarea a textului pe ntreaga pagin Web pe rou
- <body text=red> - i doresc s scriu un cuvnt cu ablastru atunci voi folosi tag-ul naintea cuvntului pe care doresc s-l scriu cu albastru. Acest fapt este posibil
deoarece tag-ul are prioritate fa de tag-ul <body text=red>.
Atributul SIZE stabilete dimensiunea de scriere a caracterelor. SIZE poate lua valori de
la 1 la 7 existnd un echivalent al acestora cu dimensiunile caracterelor din WORD 1 = 8pt / 2
= 10pt / 5 = 18pt / 7 = 36pt (Ex: scrie la o dimensiune a caracterelor de 8pt)
Atributul FACE permite specificarea stilului de scriere (Ex: - scrie
pe stilul Arial)
 - permite scrierea unor cuvinte la putere (Ex: 950 are ca efect - 950)
 - permite scrierea unor cuvinte ca indice (Ex: Xi are ca efect Xi)
<tt> - permite scrierea unui text monospaiat (Ex: <tt>Este cel mai bine</tt>
<address> - permite scrierea pe un anumit stil aunei adrese potale, a unui telefon
Tag-uri pentru includerea unei imagini n cadrul paginii Web
<img src = border = a width = c height = d align = left/right/center alt = > - acest tag
permite amplasare unei imagini n cadrul paginii Web
Atributul SRC este folosit pentru specificarea adresei (sursei) imaginii pe care dorim a o
plasa pe pagina Web (Ex: <img src=c:\student\poza.gif> - va plasa pe pagina de Web fiierul
poza.gif existent n folderul c:\student
Atributul BORDER permite stabilirea grosimii liniei ce va nconjura poza (Ex: <img
src=c:\student\poza.gif border = 3> - linia ce va nconjura poza va avea o grosime de
aproximativ 1 mm)
Atributul WIDTH permite stabilirea unei dimensiuni a imaginii pe orizontal (lungimea
pozei pe orizontal) (Ex: <img src=c:\student\poza.gif width = 150> - poza va avea o lungime
pe orizontal de aproximativ 5 cm)
Atributul HEIGHT permite stabilirea unei dimensiuni a imaginii pe vertical (lungimea
pozei pe vertical) (Ex: <img src=c:\student\poza.gif height = 300> - poza va avea o lungime
pe orizontal de aproximativ 10 cm)
Atributul ALIGN permite alinierea imaginii respective n cadrul paginii Web (Ex: <img
src=c:\student\poza.gif align = left> - poza va fi aliniat la stnga)
Atributul ALT permite scrierea unui text care va apare numai atunci cnd utilizatorul este
poziionat cu mouse-ul pe imaginea respectiv (Ex: <img src=c:\student\poza.gif align = left
alt = Poza aceasta este din secolul trecut>)
Tag-uri pentru realizarea de liste
<ol type = a start = b>
<li>Primul element din list
<li>Al doilea element din list
<li>Al treilea element din list
</ol>
- permite realizarea unei liste ordonate. O lista este ordonat dac elementele ei au o
numerotare n fa (ordonare). Atributul TYPE permite specificarea tipului de
numerotare al listei. Atributul START specific de la ct s nceap numerotarea n lista
Ex: <ol type = a start =1>
<li> Primul element din list
<li> Al doilea element din list
<li> Al treilea element din list
</ol>
Ex: <ol type = A start =3>

</ol>
Ex: <ol type = 1 start =5>
</ol>
Ex: <ol type = I start =3>
</ol>
<ul type = a>
<li>Primul element din list
<li>Al doilea element din list
<li>Al treilea element din list
</ul>
- permite realizarea unei liste neordonate. O lista este neordonat dac elementele ei nu au
o numerotare n fa (sunt neordonate), ci doar semne care s identifice elementul din
list
Atributul TYPE permite specificarea tipului de semn al elementului din list
Ex: <ul type = Square>
</ul>
Ex: <ul type = Disc>
</ul>
Ex: <ul type = Circle>
</ul>
<dl>
<dt>Student
<dd>O persoan nscris la o instituie de nvmnt superior
<dt>Profesor universitar
<dd>Cadru didactic la o instituie de nvmnt superior
</dl>
permite realizarea unei liste cu definiii. Tag-ul <dt> precizeaz termenul pe care vrem
s-l definim n cadrul listei cu definiii, iar tag-ul <dd> definete termenul pe care vrem
s-l definim.
Ex:
Tag-uri pentru realizarea legturilor

A.
Legtur intern - permite realizarea unei legturi n cadrul aceluiai fiier (de exemplu
de la cuprinsul unei cri ce cuprinde capitolele existente n cartea
respectiv s se relizeze o conexsiune ctre coninutul unui capitol)
<A href = a>textul sau imaginea de legtur</a>
- permite realizarea unei conexiuni ctre adresa specificat n atributul HREF dac
execut click stnga de mouse pe textul sau imaginea de legtur
Atributul HREF permite specificarea adresei conexiunii (unde anume s m

pozitioneze n cadrul fiierului respective).
Atributul textul sau imaginea de legtur permite specificarea textului sau imaginii pe
care o s dau click stnga de mouse pentru a ajunge la o alt pagin n cadrul aceluiai fiier.
Ex: presupunem c avem o carte pe Internet de 300 de pagini. Cuprinsul acesteia (care se
afl pe pagina 1) doresc a fi o punte de legtur ntre el i coninutul fiecrui capitol (adic dac
dau click stnga de mouse pe capitolul 3 s m poziioneze direct pe coninutul capitolului 3
care se afl, de exemplu la pagina 185. Cum voi proceda ?
1. Realizarea cuprinsului ca punte de legtur ntre el i coninutul fiecrui capitol
(pe pagina 1).
2. Deplasare la pagina 185 i realizarea unui semn de carte pentru a tii unde anume
s-mi poziioneze cursorul atunci cnd execut click stnga de mouse pe textul de
legtur
Ex:
Suntem pe pagina 1 i realizm curpinsul.
<A href=#Continutul capitolului 1>Capitolul 1</a>
Dup cum se observ Capitolul 3 a fost trecut ca text de legtur (vezi sintaxa tag-ului <A href
= . >..</A>) pentru a putea executa click stnga de mouse i a ne trimite apoi la pagina
185(conform enun exemplu).
#Continutul capitolului 3 este numele semnului de carte de la pagina 185. Aa am vrut s

numesc semnul de carte (puteam s-i dau orice alt nume cu spaii sau fr spaii, dar dac are
spaii atunci acest nume de semn de carte trebuie pus ntre ghilimele)
Deplasare la pagina 185 n cadrul crii respective. Aceast deplasare o realizm cu bara de
defilare sau cu tasta PageDown, deoarece acesta este locul n care vreau s m poziioneze cu
mouse-ul dup ce dau click pe textul de legtur.
La aceast pagin vom crea un semn de carte cu numele #Continutul capitolului 3 astfel: <A
name = #Continutul capitolului 3>
Dup ce am definit semnul de carte la pagina 185 putem s ne deplasm de la pagina 1 la
pagina 185 cu doar un click de mouse pe textul de legtur i numai este nevoie de tasta
PageDown sau de bara de defilare.
Obs: Fiierul HTML trebuie s aib cel puin 185 de pagini.
B. Legtur local permite realizarea unei conexiuni cu un fiier existent pe calculatorul local
<A href = a>text sau imagine de legtur</a>
Ex: <A href = c:\student\fisier.doc>Click aici</a> - dac executai click stnga de mouse pe
textul Click aici atunci se va realiza o conexiune cu fiierul fiier.doc existent pe c:\student.
Observaie: de data aceasta nu mai este nevoie de un semn de carte.
Dac ns avem dou fiiere cu extensia htm (fisierul1.htm i fisierul2.htm) i dorim s ne
deplasm din fiierul1.htm n fiierul2.htm la pagina 200, atunci n fiierul1.htm vom scrie:
<A href = c:\student\fisierul2.htm#Semnul de carte de la pagina 200>Ctre fiierul 2</a>
Observaie: La pagina 200 din fiierul2.htm voi merge i voi definii un semn de carte cu numele
Semnul de carte de la pagina 200. Astfel am realizat o legtur localo-intern.
C. Legtur extern permite realizarea unei conexiuni cu exteriorul (un site, un e-mail)
Ex: Legtur ctre un site
<A href = http://www.ase.ro>Vizitai site-ul A.S.E.</a> - permite realizarea unei conexiuni cu
site-ul Academiei de Studii Economice.
Ex: Legtur de transmitere a unui mesaj
<A href=mailto:Georgescu@yahoo.com> Georgescu Nicolae </A> - permite transmiterea
unei mesaj ctre csua potal a lui Georgescu Nicolae (numele este chiar text de legtur).
Observaie general: Pn acum tot ce am fcut nu ne permite ca pe o pagin de Web s tastm
ceva, ci doar s citim coninutul paginii respective. Cum vom proceda atunci cnd utilizatorul
dorete de exemplu s scrie un mesaj, sau dorete s completeze un formular electronic n care
trebuie s-i tasteze numele i prenumele, data naterii, domiciliu, .... etc direct de pe Internet
fr a mai fi nevoie s se deplaseze la sediul unei firme? Rspuns: utiliznd tag-uri care s
permit realizarea unor casete speciale de tastare. Aceste casete speciale de tastare se obin cu
tag-urile de realizare a formularelor.

HTML Pentru Incepatori

Î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 Pentru Incepatori

Încărcat de

Drepturi de autor:

Formate disponibile

La crearea unei pagini WEB se parcurg paii:

Observaie: un tag se va scrie ntotdeauna ncadrat de semnele <

>. Efectul unui tag este

Tag-uri pentru formatarea caracterelor i aranjarea textului

<li> Al treilea element din list

Tag-uri pentru realizarea legturilor

Atributul HREF permite specificarea adresei conexiunii (unde anume s m

#Continutul capitolului 3 este numele semnului de carte de la pagina 185. Aa am vrut s

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