vineri, 30 octombrie 2015

30.10.2015



UNITATEA DE INVATARE: Instrumente de lucru pentru crearea site-urilor Web

HTML – elemente de baza


  • Elemente de marcare
  • Formatari
  • Organizarea textului
HTML (HyperText Markup Language) este un limbaj folosit pentru crearea paginilor Web. 
In general, HTML este usor de utilizat, fiind bazat pe un elemente numite tag-uri. 
HTML foloseste aceste elemente pentru introducerea imaginilor si a linkurilor, pentru a modifica fontul curent,etc.

Un tag consta dintr-o litera sau cuvant rezervat intre parantezele unghiulare < si >. 
Iata cateva exemple:
Tag
Efect
<b>
text
<i>
text
<p>
Creeaza paragraf nou
<img>
Insereaza o poza
Majoritatea comenzilor HTML sunt alcatuite din doua tag-uri:
 unul de inceput si unul de sfarsit, cu deosebirea ca tag-ul de sfarsit contine caracterul / dupa <. Codul de mai jos:
Acesta este un <b>exemplu</b>.
va aparea pe pagina astfel:    Acesta este un exemplu.

Structura unei pagini HTML
Majoritatea paginilor Web au cateva lucruri in comun, cum ar fi sectiunile head si body, marcate prin tag-urile: <head> si respectiv <body>. Anumite informatii despre pagina, cum ar fi titlul, se scriu in sectiunea head, iar continutul propriu-zis al paginii - in body. De asemenea, fiecare pagina HTML incepe si se termina cu tag-ul <html> (</html>).

Iata structura de baza a unei pagini HTML:
<html>
<head>
    (titlu, alte informatii....)
</head>
<body>
    (Continutul paginii - text, imagini)
</body>
</html>
Daca vizualizezi aceasta pagina intr-un browser, nu vei vedea nimic, deoarece pagina nu contine deocamdata text sau imagini.

Pentru a da paginii un titlu oarecare, vom folosi tag-ul <title>, inserat intre: <head> si:</head>.
<html>
<head>
<title>Pagina mea !</title>
</head>
<body>
</body>
</html>
In bara de sus a browserului va aparea textul: Pagina mea!

Inserarea textului
Daca vrei ca textul tau sa apara sub forma de paragrafe, in sectiunea <body> poti folosi tag-ul <p> (paragraph).
<html>
<head>
<title>Pagina mea !</title>
</head>
<body>
<p>Aceasta este prima mea pagina de web !</p>
</body>
</html>
Felicitari! Ai creat prima ta pagina Web.

Noi tag-uri
In continuare poti folosi tag-urile HTML pentru a imbunatati aspectul paginii.

De exemplu, tag-urile <b> .... </b> sau <strong> .... </strong> au ca efect ingrosarea textului (bold).
Aceasta este <b>prima</b> pagina construita de mine!
apare in felul urmator:

Aceasta este prima pagina construita de mine!

Pentru a centra textul, se foloseste tot tag-ul <p> cu atributul align="center":
<p align="center"> Aceasta este  <b>prima</b> pagina construita de mine!</p>
Pentru a schimba culoarea de fundal (background) in negru si a textului in alb, in tag-ul body trebuie specificat bgcolor="#000000" si respectiv text="#FFFFFF".
<body bgcolor="#000000" text="#FFFFFF">
Codul HTML va arata astfel:
<html>
<head>
<title>Pagina mea !</title>
</head>
<body bgcolor="#000000" text="#FFFFFF">
<p align="center"> Aceasta este  <b>prima</b> pagina construita de mine!</p>
</body>
</html>
Incearca in continuare sa modifici pagina adaugand noi paragrafe si schimband culoarea de fundal sau culoarea textului.
<HTML> </HTML>
Defineşte un fişier în format Web
<HEAD> </HEAD>
Antetul documentului
<TITLE> </TITLE>
Tilul documentului
<BODY> </BODY>
Corpul paginii HTML
BGCOLOR = culoare
Culoarea de fond a paginii
TEXT=culoare
Culoarea textului pe pagină

<P>
Paragraf


<FONT> </FONT>
Specifică atribute ale textului încadrat
SIZE=n
Dimensiunea textului este 1-7
FACE="a,b"
Specifică fontul: a, dacă este disponibil, sau b
COLOR=s
Culoarea textului: fie un nume de culoare, fie o valoare RGB
<BR>
Linie nouă


<!-- -->
Comenatriu HTML
<CENTER> </CENTER>
Centrează materialul în pagină
<HR>
Riglă orizontală
SIZE=x
Înălţimea riglei în pixeli
WIDTH=x
Lăţimea riglei în pixeli sau în procente
NOSHADE
Dezactivează afişarea umbrei pentru rigla orizontală
ALIGN=x
Alinierea riglei orizontale în pagina (left, center, right)
COLOR=x
Culoarea riglei orizontale (numai pentru IE)


<sup></sup>
Text exponenţial, superscript. Exp: 23 se scrie 2<sup>3</sup>
<sub></sub>
Tagul subscript. Exp: H2O se scrie H<sub>2</sub>O
Formatarea caracterelor
<B> </B>
Afişează text cu caractere aldine
<I> </I>
Afişează text cu caractere cursive
<U> </U>
Afişează text subliniat
<TT> </TT>
Text cu font monospaţiu
<CITE> </CITE>
Citare bibliografică
<CODE> </CODE>
Listing de program
<EM> </EM>
Stil logic de evidenţiere
<KBD> </KBD>
Text de la tastatură
<STRONG> </STRONG>
Evidenţiere logică puternică
<VAR> </VAR>
Program sau variabilă
<BASEFONT SIZE = n>
Specifică dimensiunea implicită a fontului din pagină


Tabel diacritice
Limba română foloseşte cinci litere cu semne diacritice: ă, â, î, ş, ţ. Aspectul şi denumirea acestor semne sunt arătate în tabelul de mai jos.
Ă ă căciulă
 â Î î accent circumflex;
ş Ş ţ Ţ virgulă, plasată sub literele corespunzătoare s, S, t, T.

valoarecod
ă&#259;
Ă&#258;
â&#226;
Â&#194;
î&#238;
Î&#206;
ş&#351;
Ş&#350;
ţ&#355;
Ţ&#354;



Marcaje pentru liste
<DD>
Descriere definiţie
<DL> </DL>
Lista de tip definiţie
<DT>
Termen de definiţie
<LI>
Element de listă
<OL>
Listă ordonată (numerotată)
TYPE=tip
Tipul numerotării. Valori posibile: A, a, I, i, 1
START=x
Numărul de început al listei ordonate
<UL>
Listă neordonată (marcată)
TYPE=formă
Forma marcajului. Valori posibile: circle, square, disc.

Marcaje pentru cadre
<FRAMESET> </FRAMESET>Definirea redactării paginii
COLS=xNumărul şi mărimea relativă a coloanelor
ROWS=xNumărul şi mărimea relativă a liniilor
BORDER=xSpecifică starea "on" (activă) sau "off" (inactivă) pentru chenarul cadrului FRAMESET (1 sau 0)
FRAMEBORDER = xSpecifică mărimea chenarului
FRAMESPACING = xMărimea spaţiului dintre două cadre adiacente
<FRAME>Definiţia unui anumit cadru
SRC=urlURL-ul sursă pentru cadru
NAME=numeNumele cadrului (utilizat împreună cu TARGET=nume ca parte componentă a marcajului de tip ancoră<a>
SCROLLING=scrlDefineşte opţiunea barei de derulare.Valori posibile: on(activă), off(inactivă), auto (automat)
FRAMEBORDER=xMărimea chenarului din jurul cadrului
MARGINHEIGHT=xSpaţiul suplimentar de deasupra şi dedesubtul unui anumit cadru
MARGINWIDTH=xSpaţiu suplimetar la stânga şi la dreapta unui anumit cadru
<NOFRAMES> </NOFRAMES>Secţiunea de pagină afişată pentru utilizatorii care nu pot vedea un cadru
<IFRAME>Cadru intern (numai pentru IE)
SRC=urlSursa cadrului
NAME=sNumele ferestrei (util pentru TARGET)
HEIGHT=xÎnăţtimea cadrului înglobat
WIDTH=xLăţimea cadrului înglobat

Marcaje pentru tabele
<TABLE> </TABLE>Tabel HTML
BORDER=xChenarul tabelului
CELLPADDING=xSpaţiul suplimentar în cadrul celulelor tabelului
CELLSPACING=xSpaţiul suplimentar între celulele tabelului
WIDTH=xLăţimea impusă tabelului
FRAME=valoareAjustarea fină a tabelului
RULES=valoareAjustarea fină a riglelor tabelului
BORDERCOLOR = culoareSpecifică culoarea chenarului tabelului
BORDERCOLORLIGHT = culoareCea mai deschisă culoare din cele două culori specificate
BORDERCOLORDARK = culoareCea mai închisă culoare din cele două culori specificate
ALIGN=leftAliniază tabelul la marginea din stânga a paginii, iar textul curge în partea dreaptă
ALIGN=rightAliniază tabelul la marginea din dreapta a paginii, iar textul curge în partea stângă
HSPACE=xSpaţiu suplimetar pe orizontală în jurul tabelului
VSPACE=xSpaţiu suplimetar pe verticală în jurul tabelului
COLS=xSpecifică numărul de coloane ale unui tabel
<COLGROUP> </COLGROUP>Defineşte un set de definiţii de coloane cu ajutorul marcajului <col>
<COL WIDTH=x>Defineşte lăţimea unei coloane exprimată în pixeli
<THEAD> </THEAD>Defineşte titlul tabelului
<BODY> </TBODY>Defineşte corpul tabelului
<TR> </TR>Linie de tabel
BGCOLOR=culoareSpecifică culoarea de fond pentru întreaga linie
ALIGN=aliniereAlinierea celulelor de pe linia curentă (left, center, right)
<TD> </TD>Celula de date a tabelului
BGCOLOR=culoareSpecifică culoarea de fond pentru celula de date
COLSPAN=xNumărul de coloane pe care se întinde celula curentă de date
ROWSPAN=xNumărul de linii pe care se întinde celula curentă de date
ALIGN=aliniereAlinierea materialului din cadrul celulei de date.Valori posibile: (left, right, center)
VALIGN=aliniereAlinierea pe verticală a materialului din cadrul celulei de date.Valori posibile: (top, bottom, middle)
BACKGROUND=urlSpecifică imaginea de fond pentru celula tabelului
NOWRAPNu permite despărţirea textului pe linii în cadrul unei celule
ALIGN=baselineAliniază celule de date cu linia de bază a textului adiacent
ALIGN=caracterAliniază o coloană faţă de un anumit carcater (caracterul prestabilit este ".")
ALIGN=justifyAliniază atât marginea din stânga cât şi marginea din dreapta a unui text

Adăugarea imaginilor
<IMG >Marcajul de introducere a imaginilor
SRC=urlSursa fişierului grafic
ALT=textTextul alternativ de afişat, dacă este necesar
ALIGN=aliniereAlinierea imaginii în pagină. Valori posibile: top (sus), middle (în mijloc), bottom (jos), left (în stânga), right (la dreapta)
HEIGHT=xÎnălţimea imaginii (în pixeli)
WIDTH=xLăţimea imaginii
BORDER=xChenarul din jurul imaginii, atunci când aceasta este utilizată ca hiperlegătură
HSPACE=xSpaţiul suplimentar pe orizontală din jurul imaginii (în pixeli)
VSPACE=xSpaţiul suplimentar pe verticală din jurul imaginii (în pixeli)























Niciun comentariu:

Trimiteți un comentariu