+ All Categories
Home > Business > Info an 2 introducere in html

Info an 2 introducere in html

Date post: 08-Aug-2015
Category:
Upload: andreieduard
View: 56 times
Download: 2 times
Share this document with a friend
21
LIMBAJUL HTML (HYPERTEXT MARKUP LANGUAGE)
Transcript
Page 1: Info an 2  introducere in html

LIMBAJUL HTML (HYPERTEXT

MARKUP LANGUAGE)

Page 2: Info an 2  introducere in html

Caracteristici generale:

• documentele HTML sunt exclusiv de tip text (ASCII); prin urmare ele pot fi editate direct, prin comenzi specifice sistemului de operare folosit. Se poate utiliza orice editor de texte;

• documentele descrise în HTML pot fi vizualizate cu ajutorul unor aplicaţii speciale denumite browsere, care lucrează pe diferite tipuri de sisteme de calcul; prin urmare, documentelor HTML sunt independente de platforma de lucru.

• HTML utilizează pentru descrierea documentelor Web etichete (denumite si tag-uri) specifice pentru fiecare element descris; etichetele stabilesc atât structura documentului, cât şi aspectul acestuia.

Page 3: Info an 2  introducere in html

Structura unui document HTML

<HTML>

<HEAD>

... antetul documentului ...

</HEAD>

<BODY atribute >

... corpul documentului ...

</BODY>

</HTML>

c0.html

Page 4: Info an 2  introducere in html

metode de realizare a paginilor WEB :

Folosind un editor de texte obişnuit se scrie conţinutul paginii într-un fişier text care se salvează cu extensia HTML sau HTM. Apoi, folosind un browser se încarcă pagina locală realizată.

Folosind un editor specializat în realizarea paginilor de WEB. Există mai multe editoare de pagini de WEB, care generează codul paginii (adică nu trebuie să scrie utilizatorul întregul cod sursă al paginii) şi oferă şi facilităţi suplimentare. Cele mai cunoscute sunt Macromedia DreamWeaver, FrontPage şi Netscape Composer.

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

Page 5: Info an 2  introducere in html

Elementul <BODY > admite următoarele atribute:

• BACKGROUND=URL

• BGCOLOR=culoare

• TEXT=culoare

• LINK=culoare (link-urile nevizitate)

• VLINK=culoare (link-urile vizitate)

• ALINK=culoare (link-ul activ - cel asupra căruia este plasat cursorul mouse-ului).

• Poziţionarea conţinutului paginii Web faţă de marginile ferestrei browserului se poate face cu ajutorul a două atribute ale etichetei <body>:

"Leftmargin" (stabileşte distanţa dintre marginea stângă a ferestrei browserului şi marginea stângă a conţinutului paginii);

"Topmargin" (stabileşte distanţa dintre marginea de sus a ferestrei browserului şi marginea de sus a conţinutului paginii);

Page 6: Info an 2  introducere in html

Comentarii HTML :

• <! şi se termină cu ->.

Exemplu: <! Acesta e un comentariu. Browser-ul nu îl "vede"! ->

Formatarea textului :

• nivel de bloc (block-level) sau

• la nivel de caracter (text-level sau inline).

Formatarea paragrafelor :

<P > Paragraful 1 </P>

<P> Paragraful 2

Page 7: Info an 2  introducere in html

Cel mai utilizat atribut pentru eticheta <P> este ALIGN

ALIGN = LEFT | CENTER | RIGHT | JUSTIFY

Pentru a stabili acelaşi mod de aliniere pentru mai multe paragrafe, se vor grupa într-un singur bloc, cu ajutorul etichetei <DIV> : <DIV ALIGN="RIGHT">

<P>... primul paragraf ... <P> <P>... al doilea paragraf ... <P> ... al treilea paragraf ...

Utilizarea paragrafelor titlu :

• Documentele HTML pot fi structurate pe şase niveluri, existând şase etichete care definesc nivelul paragrafului titlu în structura documentului: <H1>, <H2>, <H3>, <H4>, <H5>, <H6>. Etichetele de sfârşit sunt obligatorii.

Page 8: Info an 2  introducere in html

Linii orizontale <hr>

• atribute ale etichetei <hr>:

1. "align" ce permite alinierea orizontală a liniei. Valorile posibile sunt "left","center" şi "right";

2. "width" permite alegerea lungimii liniei;

3. "size" permite alegerea grosimii liniei;

4. "noshade" când este prezent do linie fără umbră;

5. "color" permite definirea culorii liniei.

Page 9: Info an 2  introducere in html

Blocuri CENTER

• Blocul introdus de etichetele <center>...</center> aliniază centrat toate elementele pe care le conţine.

• Blocuri DIV (delimitare şi formatare bloc text ) <div>...</div>

<html>

<head>

<title>Blocul DIV</title>

</head

<body>

Aceasta linie este o linie normala.Urmatorul bloc este aliniat la dreapta.

<div align="right">

O singura linie.O singura linie.O singura linie.O singura linie.<br>

O singura linie.O singura linie.O singura linie.O singura linie.<br>

O singura linie.O singura linie.O singura linie.O singura linie.<br>

</div>

<div align="center">

Bloc aliniat pe centru.Bloc aliniat pe centru.<br>

Bloc aliniat pe centru.Bloc aliniat pe centru.<br>

Bloc aliniat pe centru.Bloc aliniat pe centru.<br>

</div>

</body>

</html>

Page 10: Info an 2  introducere in html

Formatarea la nivel de caracter

<FONT> </FONT>

• Atributele admise de eticheta <FONT> sunt:

SIZE = valoare

COLOR = culoare

FACE = listă_fonturi (defineşte o listă de fonturi separate prin virgulă, dintre care browser-ul îl va alege pe primul disponibil in ordinea preferinţelor. Dacă nici unul din fonturile din listă nu este instalat pe calculatorul utilizatorului, browser-ul va utiliza fontul implicit)

• Dacă autorul documentului nu precizează setul de caractere folosit, browser-ul va utiliza setul de caractere transmis de către server, Serverul transmite modul de codificare a caracterelor prin intermediul parametrului charset al câmpului Content-Type al protocolului HTTP. • Cele mai utilizate seturi de caractere sunt ISO-8859-1 (pentru documente din Europa Occidentală), ISO-8859-2 (pentru documente din Europa Centrală şi de Est), SHIFTJIS sau EUCJP (pentru documente in limba japoneză), ISO-8859-5 (pentru documente cu litere chirilice) etc.

Specificarea caracterelor dintr-un set de caractere care nu au un corespondent pe tastatură se poate face în două moduri:

• Prin intermediul codului numeric asociat caracterului astfel: &#D ; unde D este un număr zecimal care reprezintă codul Unicode al caracterului.

• Prin intermediul unor referinţe speciale, asociate unor caractere mai frecvent folosite.

Page 11: Info an 2  introducere in html

Utilizarea caracterelor speciale

•codurile HTML pentru cele mai folosite

caractere si simboluri, care nu se gasesc pe

tastatura calculatorului:

• Aplicarea unor efecte asupra texlului

<I> </I>

<U> </U>

<B> </B>

<BIG> </BIG>

<SMALL> </SMALL>

<STRIKE> </STRIKE>

<EM> Textul este accentuat, scos în evidenţă </EM>

<STRONG> Textul este mai accentuat, puternic scos în evidenţă

</STRONG>

<CITE> Textul reprezinta o referire la o carte, revista, articol etc </CITE>

Page 12: Info an 2  introducere in html

Utilizarea indicilor şi a exponenţilor

<SUB> </SUB>

<SUP> </SUP>

exemplu:

<P> H <SUB>2</SUB>O

<P> E = me <SUP>2</SUP>

• Efect

Page 13: Info an 2  introducere in html

Utilizarea textului preformatat

<PRE> </PRE>

Utilizarea listelor

• Listele neordonate (Unordered Lisl) sunt încadrate de etichetele <UL> si </UL>. Fiecare intrare in listă (List Item) este precedată de eticheta <LI>

• Crearea unei liste ordonate (Ordered List) se face încadrând intrările din listă între etichetele pereche <OL> şi </OL>

Page 14: Info an 2  introducere in html

Crearea unei liste de definiţii se realizează cu ajutorul etichetelor pereche <DL> şi </DL>, între care vor fi încadrate intrările în listă. În acest caz, o intrare în listă este constituită din două părţi: un termen (etichetat cu <dt> - Definition Term), care poate conţine doar elemente de formatare inline şi o definiţie (etichetată cu <DD> - Definition Description), care poate conţine elemente de formatare la nivel de bloc.

De exemplu:

Descriere

<DL> <DT> Liste ordonate.

<DD> Elementele listei trebuie parcurse in ordinea numerotarii.

<P> <DT> Liste Neordonate

<DD> Elementele listei nu trebuie parcurse in ordine.

<P> <DT> Liste de definitii.

<DD> Elementele listei au doua parti: termenul si descrierea sa.

</DL>

Efect

Page 15: Info an 2  introducere in html

Inserarea legăturilor în documente HTML

Limbajul HTML conţine multiple elemente prin intermediul cărora se poate crea o legătură către resurse Web:

• IMG (creează o legătură către o imagine),

• LINK (specifică legături către resurse utile),

• A (creează o legătură către o resursă Web într-un document

HTML),

• APPLET (creează o legătură către un program executabil pe calculatorul utilizatorului).

Page 16: Info an 2  introducere in html

Elementul A Atributele specifice elementului A sunt:

• HREF = URL , specifică adresa resursei la care se face legătura.

• NAME = şir-de-caractere, asociază un nume ancorei curente, astfel încât să poată constitui ţinta unui alt link. Numele trebuie să fie unic în cadrul documentului.

• TITLE = şir-de-caractere, asociază un nume resursei la care se face legătura. Browser-ul va putea afişa titlul resursei când utilizatorul deplasează mouse-ul deasupra legăturii.

Page 17: Info an 2  introducere in html

Elementul LINK

• Ca şi elementul A, elementul LINK permite specificarea unor legături către alte documente. Spre deosebire de A, elementul LINK poate fi plasat numai în antetul documentului (în secţiunea HEAD), deci prin urmare corespunzător acestui element nu se afişează nimic în pagina vizualizată de către browser.

• Din punct de vedere sintactic, elementul LINK admite aceleaşi atribute ca şi elementul A, dar nu admite etichetă de sfârşit.

Page 18: Info an 2  introducere in html

Elementul BASE

• Specificarea adreselor resurselor Web la care se creează legături în documente HTML prin adresele URL specificate în mod relativ. <BASE HREF=URL>

Page 19: Info an 2  introducere in html

Inserarea imaginilor in documente HTML

Elementul IMG

atribute:

SRC = URL

ALT = text

HEIGHT = defineşte înălţimea imaginii WIDTH = defineşte lăţimea imaginii ALIGN = valoare

(TOP MIDDLE BOTTOM LEFT RIGHT)

Page 20: Info an 2  introducere in html

Inserarea unei legături pe o imagine

• Prin utilizarea elementului IMG drept conţinut al elementului ancoră <A> avem posibilitatea de a insera în document o legătură pe o imagine: prin acţionarea imaginii printr-un clic va fi accesată resursa destinaţie (cea la care am creat legătura).

• Descriere

<A HREF="poza.htm"> <IMG SRC="Clint.gif" HEIGHT=273 WIDTH=148 ALT="Clint"> </A>

• Efect

Page 21: Info an 2  introducere in html

END.


Recommended