Sunteți pe pagina 1din 13

AUTOR : Inf.

GHEORGHE BOGDAN - DRAGOS

E-mail : bogdan992@yahoo.com

Telefon : 0729.171.776
NOTA AUTORULUI

Aceasta carte incearca sa va introduca intr-o lume facinata a programarii la nivel mediu .

Pentru a putea concepe o pagina web , trebuie sa asimilati cunostintele din aceasta carte !

Cartea este conceputa pentru incepatori !

Copyright 2008-2009 , Autor : Inf. Gheorghe Bogdan Dragos


CUPRINS

Pagina 3 ...... Introducere in HTML

Pagina 4 ........ Salvari , extensii ,etc....

Pagina 5 – 6 – 7 – 8 – 9 ........... Liste , tabele , elemente intalnite in liste , liste de definitii ,

Pagina 9 – 10 – 11 ....TABELE SI FORMATAREA SCRISULUI COLORAT , TERMENI SI DEFINITII

Pagina 11 ........... Adăugarea referinţelor şi legăturilor , Adăugare legături către ţinte din cadrul paginilor

Pagina 12 ............ Adăugare legături către ţinte din cadrul paginilor Web

Pagina 13 ............ Test de evaluare a cunostintelor


PROGRAMAREA IN HTML

Html este un limbaj de programare .Ca toate limbajele de programare acesta are si o functionalitate , limbajul html
ne ajuta pe noi la constructia paginilor web . Html nu este singulul limbaj de programare folosit in crearea de pagini
web , aici mai putem adauga multe altele cum ar fi JAVA , PHP , CSS , FLASH , etc….

Un document html poate fi scris cu mai multe utilitare cum ar fi : Notepad ; Word ; WordPad , sau in editoare
speciale complexe cu multe instrumente pentru o pagina web . Cum ar fi : NetScape composer ; Hot Meta .

Structuri

La baza unei pagini web , avem un cod sursa care contine : - tag-uri
- etichete
- marcaje

Tag-uri pot fi de tip bloc (pereche) , adica acolo unde incepe sectiunea de date si totodata si deschiderea , aici avem
si inchiderea sectiunii de date declarate in codul sursa . Acestea se numesc tag-uri .

exemplu :

<html>…………..</html>

</…> - inchidere sectiune


<…> - deschidere sectiune

Singulare de tipul “br” , sau (break) acest tag este folosit la lucrul cu liniile . Acesta face ca un grup de cuvinte de
pe o linie sa poata fi pus pe mai multe linii .

exemplu :
linia1…………………………ANA<br>ARE MULTE MERE
linia 2……………………………. ARE MULTE<br>MERE
linia 3…………………………….. MERE

O pagiana standard poate fi formatata dintr-un bloc extern cum ar fi : <html> …..</html>
<html> reprezinta inceputul bloc-ului sau a sectiunii , iar </html> reprezinta sfarsit-ul blocului / sectiunii .
Aici mai sunt doua mari si foarte importante bloc-uri : antet-ul <head> ………. </head> si corpul
<body> …… </body>
Pentru a afisa pe pagina web un text sau mai multe , trebuie sa folosim un tag de preformatare
<pre> …… </pre> .
SALVARI SI EXTENSIILE HTML

Extensii : (*htm) sau (*html) ; sau


(*php) daca si numai daca ati scris pagina intr-un cod sursa php care trebuie sa genereze un cod html

Exemplu :

<html>
<head>
<title>Titlul primei pagini</title>
</head>
<body>
<pre>
ANA ARE MERE MULTE
MAMA ARE MERE MULTE
</pre>
</html>
</body>

Efecte la textul in html

Exemplu :

<i> textul scris </i>


<u>textul scris </u>
<b>textul scris </b>
<big> textul scris</big>
<small>textul scris</small>
<strike>textul scris</strike>

Un text poate avea efecte combinate cum ar fi : italic si boldat ; italic subliniat ; boldat subliniat ; mare subliniat ;
boldat mare , etc…. gama de combinatii nu se termina aici , mai sunt multe alte combinatii .

Exemplu :

<i><u>textul scris<u></i>
<u><s>textul scris <s></u>
<b><u>textul scris </u></b>
Textul poate avea mai multe marimi , aceste marimi in limbajul html se noteaza cu “ H sau h “ , h semnificand
inaltimea literelor

Exemplu :

<H1> ana are mere </H1>


Indicativul H , specific inaltimii tine cont si de cifra precedenta , care arata cat de inalte sa fie literele

<H1> ana are mere </H1> , h1 scrie cu caractere foarte mari inaltimea in programarea limbajului html este notata cu
indicative numerice de la 1 la 5 , dar trebuie sa tinem cont ca inaltimea scade de la 1 catre 5.

<H5> ana are mere </H5> , h5 este cel mai mic scris fata de h1

Sintaxele de text cu marimi sau efecte se icadreaza dupa sectiunea “<body> “. La sintaxele de marime a textului sau a
caracterelor din text se pot adauga diferite efecte combinate pentru a modifica tipul de scris .

Exemplu :

<H1><U><I>TEXTUL MEU </H1></U></I> , aceasta combinatie afiseaza TEXTUL MEU cu marime H1 inclinat
si subliniat , deci de aici tragem concluzia ca se pot combina comenziile de marire a textului cu efectele de stiluri de
scriere .

Alte tipuri de scrisuri :

<sup>……</sup> - acest tip de scris este pentru marcarea textului ca exponent


<sub>…….</sub> - acest tip de scris este pentu marcarea textului ca indice
<small>…..</small> - acest tip de scris este pentru scrierea micsorata .

Exemplu :

<sup><i>an</sup></i> - aici va afisa “an” ca exponent cu scris de tipul italic (inclinat)


<small><i>ana are mere</small></i> - aici va afisa “ana are mere” cu scris micsorat de tip italic

Liste in html

Exista mai multe tip-uri de liste :

-Liste ordonate
-Liste neordonate cu buline sau fara
-Liste de definitie

Sa incepem prin a va arata ansamblul de sinaxe pentru listele ordonate . Aceste liste sunt liste cu numerotare adica
fiecare rand scris de dumneavoastra intr-o lista are un numar in fata :
Exemplu :

<OL COMPACT START=1 TYPE=1>


<LI>primul element
<LI>al doilea element
<LI>al treilea element
<LI>al patrulea element
</OL>

Liste ordonate in sursa html :

<HTML>
<HEAD>
<TITLE>LISTA ORDONATA </TITLE>
</HEAD>
<BODY>
<OL COMPACT START=1 TYPE=1>
<LI>primul element
<LI>al doilea element
<LI>al treilea element
<LI>al patrulea element
</OL>
</BODY>
</HTML>

Listele neordonate :

Aceste liste pot fi cu buline sau fara , adica fiecare linie scrisa in lista sa aiba o bulina in fata
Structura interna a acestor liste este cu mult diferita listelor ordonate , deoarece listele ordonate nu au in componenta
lor semen inaintea liniei scrise ci au caractere numerice .

Exemplu :

<UL COMPACT TYPE=disk>


<LI>AN
<UL COMPACT TYPE=square>
<LI>AN 1
<LI>AN 2
<LI>AN 3
</UL>
<LI>textul scris 1
<LI>textul scris 2
<LI>textul scris 3
</UL>
Liste neordonate in sursa html :

<HTML>
<HEAD>
<TITLE>LISTE NEORDONATE </TITLE>
</HEAD>
<BODY>
<UL COMPACT TYPE=disk>
<LI>AN
<UL COMPACT TYPE=square>
<LI>AN 1
<LI>AN 2
<LI>AN 3
</UL>
<LI>textul scris 1
<LI>textul scris 2
<LI>textul scris 3
</UL>
</BODY>
</HTML>

Elemente intalnite in liste :

VALUE = indicã valoarea numericã


TYPE = permite sã se fixeze stilul pentru buline sau pentru numerotãri

Liste de definitii :

<DL COMPACT>
<DT>ANA</DT>
<DD>fata femeie</DD>
<DT>CAR </DT>
<DD><OL><LI>autoturism , masina de transport ;
<LI>auto
</OL>
<DT>AUTO </DT>
<DD><OL><LI>AUTO <LI>Autoturism</OL></DD>
<DT>text </DT>
<DD>text ; scris ; sriere </DD>
<DT>textulet </DT>
<DD>diminutiv</DD>
</DL>
Lista definitii in sursa html :

<HTML>
<HEAD>
<TITLE>LISTE NEORDONATE </TITLE>
</HEAD>
<BODY>
<DL COMPACT>
<DT>ANA</DT>
<DD>fata femeie</DD>
<DT>CAR </DT>
<DD><OL><LI>autoturism , masina de transport ;
<LI>auto
</OL>
<DT>AUTo </DT>
<DD><OL><LI>AUTO <LI>Autoturism</OL></DD>
<DT>text </DT>
<DD>text ; scris ; sriere </DD>
<DT>textulet </DT>
<DD>diminutiv</DD>
</DL>
</BODY>
</HTML>

Acestea fiind spuse , vom trece la o structura noua adica tabele si scheme de scrisuri pe culori . In acest capitol vom
invata despre diferite stiluri de tabele , si diferite stiluri de culori care le vom aplica in combinatia cu scrisul de diferite
feluri .

TABELE SI FORMATAREA SCRISULUI COLORAT

Pentru a creea un tabel in limbajul Html , despre care totodata si vorbim , mai intai va trebui sa folosim
diferite sintaxe cum ar fi :

Sintaxa pentru a putea insera un rand : <tr>...</tr> reprezinta table row , adica rand de tabel
Sintaxa pentru a putea insera un tabel : <table>...</table> reprezinta table = tabel
Un rand este format din mai multe celule ce contin diferite date si diferite stiluri de caractere .
Sintaxa pentru o celula de date : <td>..</td>. Reprezinta table data = date de tabel
Pentru a putea intelege mai bine ce putem face cu sintaxele de mai sus , in urmatoarele randuri , voi arata cum
se face un tabel simplu de mici dimensiuni .
Exemplu de tabel simplu :

<html>
<head><title>tabelex_2</title></head>
<body><h1 align="center">Acesta este un tabel </h1><hr>
<table border="4">
<tr> <td>ANA </td><td>ANA </td></tr>
<tr> <td>Traian </td><td>Traian </td></tr>
<tr> <td>Balcescu </td><td>Balcescu </td></tr>
<tr> <td>Badea </td><td>Badea </td></tr>
</table>
</body>
</html>

In urmatoarele tabele va voi arata mai multe sintaxe folositoare


In urmatorul tabel vom folosi bgcolor pentru a colora tabelul si celulele acestuia diferit

Exemplu de tabel colorat :

<html>
<head><title>Tabel colorat</title></head>
<body><h1 align="center">Tabel colorat </h1><hr>
<table border="8" bgcolor="blue">
<tr> <td>AB </td><td bgcolor="red">ABC</td></tr>
<tr bgcolor="green"> <td>ABCD </td><td bgcolor="yellow">ABCDE</td></tr>
<tr bgcolor="cyan"> <td>ABCDEF </td><td>ABCDEFG </td></tr>
<tr> <td>ABCDEFGH</td> <td bgcolor="white">ABCDEFGHI </td></tr>
</table>
</body>
</html>

Pentru a putea sa punem celula langa celula fara separatii cu bordure si linii vom folosi urmatoarele sintaxe :

Cellspacing - folosita pentru definirea distantei dintre celulele vecine

<html>
<head><title>Tabel cu celule alipite</title></head>
<body><h1 align="center">Tabel celule alipite </h1><hr>
<table cellspacing="2">
<tr> <td bgcolor="gray">ABA </td><td bgcolor="red">TERRA </td></tr>
<tr bgcolor="blue"> <td>TORNA </td><td bgcolor="green">TOOB</td></tr>
</table>
</body>
</html>
TERMENI SI DEFINITII

Poate de multe ori v-ati intrebat ce este o hiper legatura sau ati mai auzit de expresia Hiperlink , aceste doua mari “ “
“probleme “ , sunt niste legaturi spre o cale anume , codul de mai jos face o legatura spre un fisier de tip (*.zip)
Studiati cu atentie codul sursa si observati ca un link intr-o pagina se aplica cu sintaxa : <a href="">

De exemplu :

<html>
<head>
<title> Legaturi catre fisiere oarecare</title>
</head>
<body>
<h3>Legaturi catre fisiere oarecare</h3><br>
<a href="abc.zip">
Link catre fisierul fisier.zip
</body>
</html>

1.3. Adăugarea referinţelor şi legăturilor


1.3.1.Referinţe către alte pagini Web
Marcajul principal utilizat este cel ancoră <A > împreună cu perechea sa </A>, care trebuie să conţină atribute fără care
acest marcaj nu are sens şi nu afectează formatarea informaţiei.Atributul care trebuie specificat este cel de referinţă hipertext
HREF=”valoare”. Valoarea poate fi vida dar atributul trebuie specificat pentru ca lagătura să apară activă în programul de
navigare.
Ex.
Puteti vizita <A HREF=”http://www.whitehouse.gov/”> Casa Alba on line!</A>

1.3.2.Referirea informaţiilor non-Web


Se realizează pur şi simplu folosind un URL adecvat care utilizează următoarea formă generală:
serviciu://numegazda (:port)-director (si nume fisier)
unde serviciul paote lua valorile
http protocol de transfer hipertext
mailto adresa de postă electronică
telnet telnet către un sistem aflat la distanţă
ftp fisier arhivă ftp
news server-ul de stiri usenet
Ex. Utilzare locaţie gopher a Comisiei pt. protectia consumatorilor şi respectiv mailto pentru trimitere mesaje...
<A HREF=http://www.google.ro GOOGLE </A>
<I>Am omis ceva? <A HREF=mailto:bobg@yahoo.com> Trimite un mesaj!</A><I>

Marcaj HTML Marcaj închidere Semnificaţie


<A> </A> Marcaj de tip ancora
<HREF>=url Referinta hipertext
1.4.Referinţe interne în cadrul documentelor
1.4. 1.Definirea ţintelor într-un document Web
Una din problemele cu care se confruntă proiectanţii de pagini Web este când este optimă plasarea unui document într-un
fişier unic HTML şi cînd e optimă organizarea sa ca un set de fişiere. O regulă empirică utilizată este următoarea – separarea
paginilor prin puncte logice de salt şi minimizarea timpului de încărcare pentru cititori.
Ţintele salturilor sunt cunoscute sub nume de ancore de nume. Marcajul HTML pentru un punct-ancora este o variantă a
marcajului <A> de tip <A nume=valoare> unde valoarea poate fi orice secvenţă de caractere, numere, semne de punctuaţie. Unele
programe de navigare impun ca toate caracterele din ancoră să fie litere mici- testaţi restricţiile !!
Ancorele sunt destinaţii din cadrul paginii curente şi nu legături către exterior textul nu este scos în evidenţă în nici un fel.
Acest marcaj trebuie închis cu marcajul pereche </A>.
1.4.2.Adăugare legături către ţinte din cadrul paginilor Web
Marcajul care defineşte un salt la o legătură activă din cadrul documentului este tot o variantă a marcajului <A> caz în
care atributul necesar este o referinţă de tip hipertext de tip HREF dar URL-ul este înlocuit de numele ancorei în faţa căruia se
utilizează simbolul diez(#).
Ex. Utilizare referinta prin creare pagina cu reguli ce trebuie respectate la realizarea unei pagini Web
<A NAME=”Ghid”>
<CENTER>
<H1> Reguli pt. proiectare pagini Web</H1></A>
<Font SIZE=2>
<a href=#Regula1>Regula 1</a> |
<a href=#Regula2>Regula 2</a> |
<a href=#Regula3>Regula 3</a> |
<a href=#Regula4>Regula 4</a>
</Font>
<p>
</CENTER>
<BLOCKQUOTE>
<DL>
<A NAME=”Regula1”>
<DT><B>Regula #1:</A>
<DD>Intelege intentiile utilizatorului si modul in care utilizeaza paginile Web si apoi concentreaza-te asupra modului de
proiectare in functie de necesitatile si interesul acestora</B>
</DL><DL>
<A NAME=”Regula2”>
<DT><B>Regula #2:</A>
<DD>Sa fi cumpatat cu elementele grafice </B>
</DL><DL>
<A NAME=”Regula3”>
<DT><B>Regula #3:</A>
<DD>Paginile chiar cele care includ elemente grafice nu trebuie sa se incarce in mai mult de 30 de secunde</B>
</DL><DL>
<A NAME=”Regula4”>
<DT><B>Regula #4:</A>
<DD> Minimizeaza paleta de culori</B>
</DL></BLOCKQUOTE>

Test – Limbajul HTML


1. Ce este limbajul HTML?
a. un pseudocod pentru scrierea programelor;
b. un limbaj de marcare utilizat pe Web;
c. un cod vizualizat cu ajutorul unui limbaj de programare;
2. Care sunt marcajele obligatorii într-un document HTML?
a. <HTML>, <TITLE>, <HEAD>, <BODY>;
b. <HTML>, <A HREF>, <B>, <BODY>;
c. <HTML>, <I>, <IMC SRC>, <TITLE>;
3. Care din afirmaţiile de mai jos sunt adevărate:
a. „În spatele” unei pagini Web se află un cod sursă;
b. pot crea pagini Web cu ajutorul programului Excel;
c. pot crea pagini Web cu ajutorul programelor Word şi Power Point;
4. Ce este o hiperlegătura?
a. o imagine;
b. codul sursă;
c. o legătură pentru deplasarea la o locaţie dată;
5. Care este marcajul corect pentru realizarea unei hiperlegături?
a. <IMC SRC>;
b. <BODY COLOR>;
c. < A HREF =”TINTA”> text </A>;
6. Care din tipurile de liste de mai jos sunt acceptate de limbajul HTML?
a. liste numerotate şi nenumerotate;
b. liste de tip glosar;
c. liste multi-coloană de tip director;
7. Ce tipuri de imagini pot fi prelucrate de HTML în realizarea paginilor Web?
a. GIF, JPEG;
b. PNG;
c. XMB, XPM;
8. Declararea unui formular se face cu ajutorul marcajului:
a. <FORM ACTION =”URL”>;
b. <ISINDEX>;
c. <FORM> </FORM>;
9. Marcajele necesare creării unui tabel sunt:
a. <TABLE> </TABLE>, <TR>, <CAPTIONA>;
b. <TABLE> </TABLE>, <TH/D COLSPAN=N>, <TH/D ROWSPAN=N>, <CAPTION>;
c. <TABLE> </TABLE>, <TD>, <TH>;