Tutorial HTML- Lectia 2

 
Ce sunt atributele HTML?
Atributele sunt proprietati ale tagurilor. Acestea vor fi puse numai in tagul de inceput si va spune browseru-lui ce valoare are respectivul tag. Daca nu punem atribute, browser-ul va lua in considerare valorile implicite ale tag-ului respectiv.
Acum pentru a intelege cum sta treaba cu atributele, va voi da cateva exemple…
 
Atributul BGCOLOR se foloseste impreuna cu tagul <body> si indica  ce culoare va avea fundalul paginii web. Fundalul unei pagini web, are in mod normal culoare alba , dar hai sa-l facem noi portocaliu.
Pentru aceasta culoare vom folosi pentru atributul BGCOLOR codul culorii orange:#FF9900 si vom scrie:
<body bgcolor=”#FF9900″>
Sau mai simplu putem seta aceasi culoare si in varianta:
<body bgcolor=”orange”>
Folosind codul culorii sau scriind numele culorii in engleza, vom realiza acelasi lucru.
 
Acum ne vom ocupa de textul paginii noastre. Mesajul „Salut” il vom face sa fie scris cu albastru in loc de negru si sa fie scris cu litere mai mari decat restul textului, dar si pozitionat pe mijloc. Pentru asta vom folosi tagul FONT insotit de unele atribute:
<font color=”#0000FF” size=”6″>
Salut!
</font><br>
In acest cod pentru culoarea albastru am folosit codul #0000FF dar la fel de bine putem scrie si bleu.
 

Textul urmator „Aceasta este prima mea pagina web, urmeaza sa invat mai multe!” il vom alinia la centru, ii vom seta culoarea rosie si marimea 6 . Pentru aceasta vom scrie codul:

<p align=”center”>

<font color=”red” size=”6″>

Aceasta este prima mea pagina web, urmeaza sa invat mai multe!

</font>

</p>

Unde tagul <p> va incepe un nou paragraf iar atributul align il va alinea la centru.

Linii in HTML

Daca vrei sa trasezi o linieorizontala, va trebui sa apelezi la tagul <HR> care vine de la HORIZONTAL RULE (linie orizontala). Daca nu ii asociem acestui tag nici un atribut, vom obtine o linie orizontala cat latimea paginii web.
 
Pentru a-i asocia cateva proprietati liniei noastre, putem asocia tagului <hr> atributele ALIGN– pentru alinierea liniei, COLOR– pentru culoarea liniei, SIZE- pentru grosimea liniei si WIDTH– pentru lungimea liniei.
In continuare vom trasa o linie rosie (COLOR=”#FF0000#”) cu o lungime de jumatate din valoarea implicita(WIDTH=”50%”) si mai groasa cu 5% decat valoarea implicita(SIZE=”5%”) si aliniata in centrul paginii(ALIGN=”CENTER”). Codul liniei va arata asa:
<hr color=”#FF0000#” width=”50%” size=”5%” align=”center”>
Acum vom folosi cele doua linii de mai sus in cadrul paginii noastre. Linia simpla o vom folosi la sfarsit, iar linia rosie o vom folosi dupa mesajul „Salut!”.
Noul cod al paginii va fi:
<html>
<head>
<title>Tutorial HTML</title>
</head>
<body bgcolor=”#FF9900″>
<font color=”#0000FF” size=”6″>
Salut!
</font><br><hr color=”#FF0000#” width=”50%” size=”5%” align=”center”><br>
<p align=”center”><font color=”red” size=”6″>

Aceasta este prima mea pagina web, urmeaza sa invat mai multe!

</font>

</p>

<hr>
</body>
</html>

Deschide notepad si introdu codul de mai sus. Salveazal cu ce nume vrei tu dar nu uita de extensia .html (de exemplu paginaweb.html). Dupa salvare il deschizi in browser-ul de internet si va trebui sa arate asa.
 
In tabelul urmator vor fi prezentate cele mai utilizate taguri impreuna cu cele mai importante atribute ale lor.
 

 tag

 atribut

Valoare atribut

Descriere

<A>

Pentru legaturi (A= Ancora)

href

URL

Adresa legaturii

target

_blank
_self
_parent
_top

Unde sa se deschida legatura

<B>

Text bold (ingrosat)

<BODY>

Cuprinsul documentului

background

adresa imaginii

Imaginea de fond

bgcolor

cod culoare
nume culoare

Culoarea fondului

leftmargin

procent din
latimea paginii
numar de pixeli

Distanta dintre marginea din stanga a
ferestrei browserului si marginea din
stanga a paginii

topmargin

procent din
inaltimea paginii
numar de pixeli

Distanta dintre marginea de sus a
ferestrei browserului si marginea de sus
a paginii

text

cod culoare
nume culoare

Culoarea textului

alink

cod culoare
nume culoare

Culoarea legaturilor active (atunci cand
mouse-ul se afla deasupra lor)

link

cod culoare
nume culoare

Culoarea legaturilor nevizitate (nu s-a
efectuat nici un click pe ele)

vlink

cod culoare
nume culoare

Culoarea legaturilor vizitate
(s-a efectuat cel putin un click pe ele)

<BR>

Sfarsitul randului

<CENTER>

Afisarea in centrul paginii

<FONT>

Fontul textului

color

cod culoare
nume culoare

Culoarea fontului

face

nume font

Tipul fontului

size

un numar
de la 1 la 7

Marimea fontului

<FORM>

Formular interactiv

action

URL

Adresa scriptului care prelucreaza datele
din cadrul formularului

method

GET
POST

Metoda de prelucrare a datelor
formularului

<FRAME>

Cadru (fereastra)

frameborder

1 sau 0

Cadrul are sau nu are chenar

marginheight

numar de pixeli

Spatiu deasupra si sub un cadru

marginwidth

numar de pixeli

Spatiu la stanga si la dreapta unui cadru

src

URL

Sursa cadrului

<FRAMESET>

Multime de ferestre

cols

procent din
latimea paginii
numar de pixeli

numarul si marimea relativa a coloanelor

rows

procent din
inaltimea paginii
numar de pixeli

numarul si marimea relativa a randurilor

H1, H2, H3,
H4, H5, H6

Pentru marimea titlului-H1 cea mai mare 

marime, H6 cea mai mica marime

align

left
center
right
justify

Alinierea titlului

<HEAD>

Antetul documentului

<HR>

Linie orizontala

align

left
center
right

Alinierea orizontala a liniei

color

cod culoare
nume culoare

Culoarea liniei

size

numar de pixeli

Inaltimea liniei

width

procent din
latimea paginii
numar de pixeli

Latimea liniei

<HTML>

Document HTML

<I>

Text italic (inclinat)

<IMG>

Adaugarea unei imagini

align

left
right
top
middle
bottom

Alinierea imaginii in pagina: left (stanga)
sau right (dreapta)
Alinierea elementelor din jurul imaginii:
top (sus), middle (mijloc), bottom (jos)

alt

text

Text ce va fi afisat in locul imaginii, in
cazul in care, aceasta nu este afisata

border

numar de pixeli

Marimea chenarului din jurul imaginii

height

procent
numar de pixeli

Inaltimea imaginii

hspace

numar de pixeli

Spatiu pe orizontala in jurul imaginii

src

URL

Adresa imaginii

vspace

numar de pixeli

Spatiu pe verticala in jurul imaginii

width

procent
numar de pixeli

Latimea imaginii

<INPUT>

Element al formularului

maxlength

numar

Numar maxim de caractere

name

date de tip
caracter

Numele elementului formularului

size

numar

Marimea elementului formularului

src

URL

Adresa pentru o imagine

type

text
password
checkbox
radio
submit
reset
file
hidden
image
button

Tip input

value

date de tip
caracter

Valoare input

<LI>

Element al unei liste

<META>

Metainformatii

content

text

Descrie valoarea atributului name

name

author

Autor

description

Descriere

keywords

Cuvinte cheie

<OL>

Lista ordonata

start

numar

Cu ce valoare incepe numerotarea

type

A, a, I, i, 1

Tipul numerotarii: A, a, I, i, 1 (implicit)

<P>

Paragraf

align

left
center
right
justify

Alinierea paragrafului

<SELECT>

Lista de selectii

multiple

Permite selectia mai multor elemente

name

date de tip
caracter

Numele listei de selectii

size

numar

Numarul de elemente ale listei

<STRONG>

Text evidentiat

<SUB>

Text indice

<SUP>

Text exponent

<TABLE>

Tabel

align

left
center
right

Alinierea tabelului

background

URL

Imaginea de fond pentru tabel

bgcolor

cod culoare
nume culoare

Culoarea fondului pentru tabel

border

procent
numar de pixeli

Chenarul tabelului

bordercolor

cod culoare
nume culoare

Culoarea chenarului

cellpadding

numar de pixeli

Spatiu intre continutul celulelor tabelului si
marginile lor

cellspacing

numar de pixeli

Spatiu intre celulele tabelului

cols

numar

Numarul de coloane ale unui tabel

hspace

numar de pixeli

Spatiu pe orizontala in jurul tabelului

vspace

numar de pixeli

Spatiu pe verticala in jurul tabelului

width

procent
numar de pixeli

Latimea tabelului

<TD>

Celula de tabel

align

left
center
right

Alinierea continutului celulei pe orizontala

background

URL

Imaginea de fond pentru celula

bgcolor

cod culoare
nume culoare

Culoarea fondului pentru celula

colspan

numar

Numarul de coloane pe care se intinde
celula

height

numar de pixeli

Inaltimea celulei

rowspan

numar

Numarul de linii pe care se intinde celula

valign

top
middle
bottom

Alinierea continutului celulei pe verticala

width

numar de pixeli

Latimea celulei

<TEXTAREA>

Camp de editare multilinie

cols

numar

Numarul de coloane

name

date de tip
caracter

Numele campului de editare multilinie

rows

numar

Numarul de randuri

<TITLE>

Titlu document

<TR>

Rand tabel

align

left
center
right

Alinierea continutului celulelor
pe orizontala

bgcolor

cod culoare
nume culoare

Culoarea fondului pentru tot randul

valign

top
middle
bottom

Alinierea continutului celulelor pe verticala

<U>

Text subliniat

<UL>

Lista neordonata

type

circle
disc
square

Forma marcajului

Leave a Reply

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *