Tag-urile nu sunt altceva decat niste marcaje sau
etichete pe care limbajul HTML le foloseste alaturi de texte pentru a ajuta browser-ul de internet sa afiseze corect continutul paginii web.
Aceste tag-uri (etichete) pot fi de doua feluri:
taguri
pereche (un tag de inceput si unul de incheiere). Exemple: <HTML>
si </HTML>; <TITLE> si </TITLE>; <HEAD> si </HEAD>
taguri singulare (nu au un tag de incheiere) Exemple: <HR>, <BR>
Sa vedem tag-urile de baza pe care
trebuie sa le contina un document HTML: <HTML> - cu acest tag incepe orice document HTML. Prin folosirea acestui tag ii spunem browser-ului ca este vorba de un fisier HTML pentru a il putea
afisa.
<HEAD> - intre aceste tag-uri sunt trecute, pe langa titlul paginii, diverse informatii folositoare pentru browser-ul de
internet, informatii pe care le vom descoperi pe parcursul acestui curs.
</HEAD> - acesta este tag-ul de incheiere al tag-
ului <HEAD>
<TITLE> - cu ajutorul acestei perechi de tag-uri vei putea da un titlu documentului tau. Astfel, textul pe care il vei scrie intre aceste tag-uri
va fi afisat in bara de titlu a documentului.
</TITLE>
- este tag-ul de incheiere al tag-ului <TITLE>. Arata sfarsitul titlului documentului.
<BODY> - odata cu acest tag incepe continutul paginii web.
Tot ce vei scrie intre tag-urile <BODY> si </BODY> va fi afisat, de catre browser, pe ecranul monitorului.
</BODY> - ii spui browser-ului ca ai terminat de scris
continutul paginii. Tot ceea ce vei scrie dupa acest tag nu va mai fi afisat.
</HTML> - este tag-ul de incheiere al tag-ului
<HTML>. Codul oricarui document se termina cu acest tag.
Tag-urile (etichetele) pot fi scrise atat cu litere mari cat si cu litere mici.
Nu uita atunci cand scrii codul unei pagini web sa inchizi toate tag-urile pe care le-ai deschis. Pentru a fi sigur ca nu uiti incearca sa te obisnuiesti sa scrii dupa fiecare tag si tag-ul de incheiere (la tag-urile
pereche), scriind apoi continutul intre ele. O alta solutie pentru a nu uita sa inchizi vreun tag, este sa folosesti la scrierea codului, un editor HTML (atunci cand
vrei sa folosesti un tag, editorul va scrie automat si tag-ul de incheiere).
Acum va trebui sa pui in
practica
notiunile invatate si sa realizezi prima ta pagina web. Sa vedem deci, cum va trebui sa arate aceasta prima pagina. Mai intai trebuie sa deschizi
editorul de
texte (Notepad sau WordPad daca folosesti Windows).
Acum sa trecem la scrierea codului.
Nu trebuie
sa te sperii, vei vedea cat de usor este.
Vom incepe cu tag-ul <HTML>. Pentru a nu uita de tag-ul de inchidere este bine sa-l pui si pe acesta tot la inceput. In continuare vin tag-urile
<HEAD> si </HEAD>. Apoi intre cele doua tag-uri vom pune
perechea de
tag-uri <TITLE>
si </TITLE>. Intre aceste
tag-uri
punem titlul paginii: Prima mea pagina web. Urmeaza tag-urile <BODY>si </BODY>. Ce vom scrie intre ele va fi afisat in browserul de internet.
Iata cum
ar trebui sa
arate codul HTML:
<HTML> <HEAD> <TITLE>
Prima mea pagina
web</TITLE> </HEAD>
<BODY> Bine ai venit!<BR> Vom invata impreuna limbajul HTML. Aceasta este prima mea pagina web! </BODY> </HTML>
Am
folosit tag-ul
<BR> pentru a trece pe urmatorul rand. Astfel ii spunem browser-ului ca ce va fi scris dupa
tag-ul
<BR> va trebui afisat pe urmatorul rand. Tag-ul <BR> nu are un tag de inchidere.
Dupa ce am scris codul, va trebui sa salvam
documentul cu
extensia .html sau .htm. Din meniul File alege optiunea Save
As, iar apoi denumeste documentul asa cum vrei, dar cu una din
extensiile de mai
sus. Apasa butonul Save. Ai acum un document html, care reprezinta prima ta pagina web.
Intra in
fisierul unde ai salvat documentul si deschide-l.
Pentru a vedea codul unei pagini web scrise cu HTML alege din meniul
View al browserului optiunea Source
(in functie de browser
poate sa
difere modul in care poti vedea sursa unei pagini web).
Lucrul cu diacritice.
Oricine a creat un website în limba română probabil știe că uneori diacriticele nu pot fi introduse direct de la tastatură sau nu apar
corect dacă sunt introduse din taste.
În aceaste situații există diverse soluții însă cea mai simplă este de a introduce diacriticele cu ajutorul unor coduri HTML.
Mai jos puteți vedea în tabel codul
HTML aferent fiecărei litere cu semn diacritic.
ă
ă
â
â
î
î
ş
ş
ţ
ţ
Ă
Ă
Â
Â
Î
Î
Ş
Ş
Ţ
Ţ
Obiceiul unora de a scrie fără diacritice a apărut inițial din dificultatea relativ ridicată
de a redacta texte cu semnele diacritice corecte în anii 1980-1990. Din păcate ceea ce a început ca o problemă autentică a fost împământenit de
facto pe Internet în asemenea măsură încât și astăzi există nenumărate site-uri, chiar ale unor instituții cu pretenții, care publică textele fără
diacritice.
In aceasta lectie vom invata despre atributele tag-urilor. Dar mai intai sa vedem ce
sunt atributele.
Ce sunt atributele HTML?
Atributele pot fi
definite ca niste proprietati ale tag-urilor. Atributele se pun numai in tag-ul de inceput. Daca un tag nu are nici un atribut, atunci browser-ul va lua in
considerare valorile implicite ale tag-ului respectiv. Pentru a intelege mai bine notiunea de atribut sa vedem cateva exemple.
Atributul BGCOLOR care se foloseste cu tag-ul <BODY> indica ce culoare va avea fondul viitoarei pagini web. Fondul unei pagini web are in mod implicit culoarea alba, dar sa
spunem ca vrem ca fondul paginii noastre sa fie portocaliu.
In acest caz vom folosi pentru atributul BGCOLOR codul culorii ALBASTRE (BLUE).
<BODY BGCOLOR="BLUE">
Sa luam codul paginii web din lectia
trecuta si sa-i aplicam tag-ului BODY atributul BGCOLOR. Vom obtine urmatorul rezultat: exemplu3.html
Acum sa ne ocupam de textul paginii noastre.
Mesajul "Bine ai venit!" sa spunem, de exemplu, ca am vrea sa fie scris cu albastru in loc de negru, care este valoarea implicita si sa fie scris cu litere mai
mari decat restul textului. Pentru a scrie astfel textul, vom folosi tag-ul FONT insotit
de unele atribute astfel:
<FONT
COLOR="BLUE" SIZE="6"> Bine ai venit! </FONT><BR>
Textul urmator "Vom invata impreuna limbajul HTML. Aceasta este
prima mea pagina web!", daca dorim doar sa aiba culoarea rosie, vom folosi numai atributul COLOR pentru tag-ul <FONT>, restul proprietatilor fiind cele
implicite:
<FONT COLOR="BLUE">
Vom invata impreuna limbajul HTML. Aceasta este prima mea pagina web! </FONT>
Prin folosirea liniilor de cod de mai sus in cadrul codului nostru, pagina web initiala va
arata astfel: exemplu4.html. Mai multe despre texte vom invata impreuna in lectia 4: Formatarea textului in HTML
Atunci cand vrem sa trasam o linie, folosim tag-ul <HR> care vine de la
Horizontal Rule care inseamna linie orizontala. Daca nu ii asociem acestui tag nici un atribut atunci vom obtine o line orizontala cat latimea paginii web.
Daca vrem sa folosim propriile noastre proprietati pentru trasarea unei linii orizontale vom apela la atributele tag-ului <HR>. Aceste atribute sunt urmatoarele: ALIGN - pentru alinierea liniei, COLOR - pentru culoarea
liniei, SIZE - pentru grosimea liniei si WIDTH - pentru lungimea liniei.
Pentru a trasa o linie rosie (COLOR="BLUE"), cu o lungime de jumatate din valoarea implicita (WIDTH="50%"
) si putin mai groasa decat cea implicita (SIZE="5%") ce va fi aliniata in centrul paginii
(ALIGN="center"), vom folosi urmatoarea linie de cod:
Acum sa folosim 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 "Bine ai venit!". Noul cod HTML al paginii noastre va fi urmatorul:
<HTML> <HEAD> <TITLE>Prima mea pagina web</TITLE> </HEAD> <BODY BGCOLOR="BLUE"> <FONT COLOR="RED" SIZE="6">
Bine ai venit! </FONT><BR> <HR COLOR="RED" WIDTH="25%" SIZE="5%" ALIGN="left">
<BR> <FONT
COLOR="GREEN"> Vom invata impreuna limbajul HTML. Aceasta este prima mea pagina web! </FONT> <HR> </BODY> </HTML>
Salveaza pagina cu ce nume vrei tu. Nu uita de extensia .html sau .htm.
In aceasta lectie vom vorbi despre culori, mai precis despre codurile si numele culorilor. Acest curs, asa cum s-a mai spus, este pentru cei care vor
sa invete limbajul HTML intr-un mod cat mai usor si placut in acelasi timp. De aceea, nu vom intra in foarte multe detalii si ne vom referi, in cadrul acestei
lectii, strict la modul cum se poate schimba culoarea fondului sau textului unei pagini web. De asemenea vei gasi in sectiunea a treia a lectiei si un tabel cu
numele si codurile culorilor cele mai folosite.
Culoarea fondului
unei pagini web
Asa cum am vazut si in lectia precedenta nu trebuie ca fondul paginii tale sa fie alb. Poti opta pentru ce culoare vrei cu ajutorul
atributului BGCOLOR al tag-ului <BODY>.
Tot ce trebuie sa faci este sa cauti in tabelul cu nume si coduri de culori din cadrul acestei lectii, sa alegi una care-ti
place si sa-i scrii numele sau codul in cadrul atributului BGCOLOR. Sa vedem un
exemplu:
Vreau ca pagina mea sa aiba fondul de culoare deschisa. Pentru a ma decide ma uit la culorile din tabelul cu nume si coduri de culori. Mi-a
atras atentia culoarea aqua care are codul #00FFFF. Acest cod il scriu in locul celui de la lectia 3:
Culoarea textului in cadrul unei pagini html
se poate schimba folosind atributul COLOR (culoare) al tag-ului <FONT>. De altfel un prim exemplu despre cum putem schimba culoarea textului unei pagini web
am vazut in lectia precedenta.
In lectia 3, am ales culorile albastru si rosu pentru text. Sa spunem ca vrem ca tot textul sa fie scris cu albastru inchis
si verde. Atunci in loc de codul culorii albastru (#0000FF) si respectiv rosu (#FF0000) vom folosi codul #00008B (albastru inchis) si codul #008000 (verde) in
atributul COLOR al tag-ului <FONT>. Astfel codul HTML al paginii noastre va fi urmatorul:
<HTML> <HEAD> <TITLE>Prima mea pagina web</TITLE>
</HEAD> <BODY
BGCOLOR="#00FFFF"> <FONT COLOR="#00008B" SIZE="6"> Bine ai
venit! </FONT><BR> <HR COLOR="#FF0000" WIDTH="25%" SIZE="5%" ALIGN="left"> <BR> <FONT COLOR="#008000">
Vom invata impreuna limbajul HTML. Aceasta este prima mea pagina web! </FONT> <HR> </BODY> </HTML>
Salveaza pagina cu numele de culori.html. Nu uita sa scrii si tu si sa verifici codul HTML al fiecarui exemplu al acestui curs. Daca nu ai
facut nici o greseala, la exemplul de mai sus, pagina web ar trebui sa arate astfel: exemplu7.html
Nume si coduri de culori sigure
In continuare vom vedea ce inseamna culori sigure. Sunt acele culori care vor fi afisate de
majoritatea browserele. Daca, de exemplu, pentru fondul paginii tale web ai folosit o anumita culoare, dar nu ai verificat sa vezi daca aceasta face parte din
culorile sigure, atunci exista posibilitatea ca unii dintre utilizatorii paginii tale sa vada o cu totul alta culoare.
Sa vedem cele mai importante culori care
sunt recunoscute de majoritatea browserelor:
In aceasta lectie ne vom "juca" cu textele din cadrul paginilor web, vom vedea cum
pot fi ele formatate.
Titluri in HTML
Atunci cand avem nevoie
sa folosim un titlu in cadrul paginii noastre web putem apela la tag-urile <H1>,
<H2>, <H3>,
<H4>, <H5>,
<H6>. Cu ajutorul acestor tag-uri, care au si tag-uri de incheiere, vom scrie titlurile din cadrul
paginilor noastre web. Astfel in cadrul codului HTML vom folosi tag-ul <H1>, de
exemplu, urmat de textul titlului, iar la sfarsit vom folosi tag-ul de incheiere </H1>.
Tag-urile <H1> si </H1> permit scrierea unui titlu cu caracterele cele mai mari in timp ce textul incadrat de tag-urile <H6> si </H6> va fi afisat
cu caracterele cele mai mici, dupa cum urmeaza:
Acesta este un titlu cu
<H1>
Acesta este un titlu cu <H2>
Acesta este un titlu cu <H3>
Acesta este un titlu cu <H4>
Acesta este un titlu
cu <H5>
Acesta este un titlu cu <H6>
Tag-urile
acestea accepta atributul ALIGN cu ajutorul caruia titlul va putea fi aliniat la stanga,
la centru sau la dreapta.
Etichete HTML pentru formatarea
textului
Am vazut in sectiunea precedenta cum arata titlurile. In continuare vor fi prezentate diverse moduri de formatare a unui text.
Pentru
alegerea caracteristicilor unui text, putem folosi tag-ul <FONT>. Acest tag accepta
mai multe atribute (color, face, size) care ne vor ajuta in formatarea textelor. Atributul COLOR se refera la culoarea textului ce va fi incadrat de tag-urile <FONT> si </FONT>, atributul FACE arata tipul fontului, iar atributul SIZE arata marimea fontului.
Pentru a alege culoarea textului, trebuie sa consulti mai intai tabelul de culori, iar apoi, atunci cand
te-ai hotarat ce culoare vei folosi, sa scrii codul sau numele acelei culori ca valoare a atributului COLOR.
vor avea urmatorul rezultat: ecursuri.ro - cursuri
online gratuite
<FONT COLOR="#FF0000">Totul la ecursuri.ro este gratuit</FONT>
va afisa in cadrul browserului de internet: Totul la ecursuri.ro este gratuit
La tipul fontului, la fel ca si la culori, este bine sa folosesti un font care se afla pe majoritatea calculatoarelor, pentru ca daca folosesti un font mai putin
utlizat, multi utilizatori nu vor putea vedea textele din cadrul paginilor tale cu acelasi font. Cele mai folosite fonturi pentru paginile web sunt urmatoarele:
Acest text a fost scris cu fontul "arial" Acest text
a fost scris cu fontul "times new roman" Acest text a fost scris cu fontul "courier new" Acest text a fost scris cu fontul "verdana" Acest text a fost scris cu fontul
"helvetica"
<FONT COLOR="#000000" FACE="Arial"<Acest text ...</FONT>
Pentru a schimba dimensiunea implicita a fontului,
vom folosi una din valorile atributului size. Acesta poate lua una din valorile 1,2,3,4,5,6,7 (1 pentru cea mai mica dimensiune si 7 pentru cea mai mare):
Iata si celelalte dimensiuni (de la 6 la 1): www.ecursuri.ro www.ecursuri.ro www.ecursuri.ro www.ecursuri.ro www.ecursuri.ro www.ecursuri.ro
Daca vrem ca textul nostru sa fie
scris cu caractere ingrosate, folosim perechea de etichete <B> si </B>
<B>Text bold</B>
Text bold
Pentru ca textul sa fie scris cu caractere
italice, folosim perechea de etichete <I> si </I>
<I>Text italic</I>
Text
italic
Pentru ca textul sa fie subliniat, folosim perechea de
etichete <U> si </U>
<U>
Text subliniat</U>
Text subliniat
Daca vrem ca textul sa fie afisat in centrul paginii putem folosi
perechea de etichete <CENTER> si </CENTER>
<CENTER>Text centrat</CENTER>
Text centrat
Atunci cand vrem ca textul din
cadrul paginii noastre web sa fie afisat pe mai multe randuri vom folosi unul din tag-urile <BR>
sau <P>. Tag-ul <BR> nu are tag de incheiere, in timp ce tag-ul <P>
are tag de incheiere, insa nu este obligatoriu.
Tag-ul <BR>
vine de la line break (intrerupere de linie) si l-am mai folosit in cadrul acestui curs. Asa cum am vazut si pana acum este folosit pentru a face
trecerea de la o linie la alta.
Tag-ul <P> vine de la cuvantul paragraf si se deosebeste de tag-ul <BR> prin faptul ca prin utilizarea lui nu numai ca se trece pe urmatorul rand, dar se si lasa un rand liber intre texte. Sa revenim la
exemplul de mai sus. Se vor folosi ambele tag-uri, <BR> si <P>, pentru a se vedea diferenta dinre ele.
Până acum ai învăţat cum să foloseşti decât texte şi culori în cadrul paginilor web. În aceasta lecţie vei învăţa despre imagini, care alese cu
grijă, vor da
un plus design-ului paginilor tale.
Aşa cum ai văzut, la majoritatea site-urilor, imaginile dau o notă aparte paginilor web. Pentru a folosi
imagini şi în cadrul paginilor tale web trebuie să
foloseşti tag-ul <IMG> însoţit de atributul SRC (source) care indică adresa sau calea către imaginea pe care vrei să o folosesti. Forma generală a acestui
tag va fi:
<IMG SRC="
numeleimaginii.extensie" width=300 height=400 ALT="text afişat până la încărcarea imaginii">
Atentie la extensie! Nu uita sa scrii si extensia imaginii pentru ca altfel
imaginea nu
va fi afisata de browser.
Este bine ca atunci cand vrei sa faci un site, sa tii toate fisierele (pagini HTML, imagini etc.) in cadrul aceluiasi
folder. Daca
vei folosi in codul HTML al paginilor site-ului tau linia de cod de mai sus, imaginea va fi afisata doar daca pagina respectiva va fi in acelasi folder
cu imaginea
pe care vrei sa o folosesti. In caz contrar imaginea nu va fi afisata. Valorile atributelor widthşi
height pot fi exprimate şi în procente (width="50%"). Sa scriem codul unei pagini web care sa contina o imagine. Luam ca
exemplu
imaginea de mai jos pe care o salvam astfel:
Click pe imagine
Se va deschide un nou tab (pagina) cu imaginea
Click
dreapta pe imagine si alege din meniul care apare: Save Image As)
Salveaza imaginea cu numele invat-
html.jpg in acelasi folder cu pagina web pe care o vom face in continuare.
Salveaza
pagina cu
numele imagini.html Pentru o functionare corecta vom utiliza una din urmatoarele linii de cod prin care ii vom spune browser-
ului ca
imaginea se afla in folder-ul Poze:
Navigarea in cadrul site-urilor este posibila cu ajutorul link-
urilor (legăturilor).
In aceasta lecție vei învață cum sa folosești diferite tipuri de legături in
cadrul site-ului tău.
Legătura către o altă pagină
Pentru a folosi legături in paginile web pe care le vei face,
trebuie sa folosești
perechea de tag- uri <A> si </A> . Numele acestor
tag-uri vine de la cuvântul anchor care se traduce ancora.
Tag-ul <A> va trebui folosit împreună cu atributul HREF. Linia de cod
pentru inserarea unei legături in cadrul unei pagini web va avea următoarea
forma:
<A HREF="numelepaginii.html">Textul legăturii</A>
Daca pagina respectiva se afla in același folder cu pagina pe care se afla legătura
atunci nu sunt necesare ghilimelele. Sa vedem împreună, cum poți adaugă o legătura
într-o pagina web din folderul Pagini către pagina imagini.html din
același folder. Deschide editorul de texte (de exemplu: Notepad) si scrie următorul
cod HTML:
După ce ai văzut cum se folosesc legăturile către alte pagini
html locale
acum vom vedea împreună cum putem adaugă o legătură către un site particular.
Trebuie sa folosești următoarea linie de cod:
<A HREF="adresa site-ului">Textul legăturii</A>
Sa facem o pagina web care sa conțină legături către site-uri ale unor ziare
din Romania. Scrie următorul cod HTML:
Salvează pagina cu numele de ziare.html in
directorul Pagini.
Să se creeze o pagină HTML care să conțină titlul Prima mea pagină Web . Pagina va trebui să conțină o poezie scrisă cu culoarea albastră, trei link-uri (spre YAHOO, FACEBOOK, GOOGLE) și cinci imagini conform modelului de mai jos. Soluția se va depune sub forma unei arhive ZIP și va conține inclusiv cele cinci imagini.
