C2 Web

Universitatea Constantin Brncui din Trgu-Jiu Facultatea de Inginerie Departamentul de Automatic, Energie i Mediu
Tehnologii Web
Lector univ. dr. Adrian Runceanu
Curs 2
Limbajul Html (partea II)
Tehnologii Web
3. Inserarea imaginilor 4. Inserarea legturilor n documente HTML 4.1. Elementul A 4.2. Elementul LINK 4.3. Elementul BASE 5. Liste 5.1. Lista ordonat 5.2. Lista neordonat 5.3. Lista de tip definiie 5.4. Utilizari speciale ale listelor
3 Tehnologii WEB - curs
3. Inserarea imaginilor

Imaginile sunt stocate in fisiere cu diverse formate. Formatele acceptat de browsere pentru fisierele imagine sunt: GIF (Graphics Interchange Format) cu extensia .gif JpEG (Joint photographic Experts Group) cu extensia .jpeg sau .jpg XpM (X pixMap) cu extensia .xmp XBM (X BitMap) cu extensia .xbm BMp (BitMap) cu extensia .bmp (numai cu Internet Explorer) TIFF (Tagged Image File Format) cu extensia .tif sau .tiff PNG (Portable Network Graphic) cu extensia .png Cele mai raspandite formate sunt: GIF (8 biti pentru o culoare, 256 culori posibile) si JpEG (24 biti pentru o culoare, 16777216 de culori posibile).
Tehnologii WEB - curs
Adresa URL a unei imagini URL ("Uniform Resourse Locator) = identificator unic al resursei este un standard folosit in identificarea unica a unei resurse in Internet. Toate imaginile cu care vom lucra vor avea adresa URL exprimata in functie de directorul ce contine documentul HTML care face referire la imagine.
Elementul img se utilizeaz pentru a ataa unei pagini o imagine. Vom folosi tag-ul <img>. Forma general a acestui element este: Atributele sunt: <img atribute> SRC identific fiierul care conine imaginea respectiv (de tip .jpg, .gif etc.).
n
aceast etap nvm s crem paginile pe propriul calculator, fr a fi conectai la internet. Prin urmare, fiierul care conine imaginea se va gsi ntr-un folder oarecare (n exemplul urmtor el se gsete n acelai folder n care gsim i fisierul cu extensia .html (cel care conine pagina). Din acest motiv, sursa nu conine i calea, dar, dac este cazul, calea poate fi coninut.
ALIGN -tipul de aliniere - reine una din valorile de mai jos i specific browser-ului modul n care va alinia imaginea n raport cu textul: Right, Left, Top, Middle, Bottom Fie fiierul text de mai jos (scris n Notepad). Observm c am scris un prim paragraf care nu conine nici o imagine. Apoi, am scris un paragraf care, la nceput, conine o imagine apoi text. n final, avem un paragraf numai cu text.
Exemplu:
<p> Un paragraf asezat inaintea imaginii</p> <p> <img src=mihai24.jpg align=right> Se observ cum se alinieaz imaginii n al doilea paragraf </p> <p> alt text este scris pentru a evidentia alinierea !!</p>
Right dac ALIGN reine aceast valoare, imaginea se aliniaz n dreapta, iar textul care urmeaz este scris n locul rmas.
Top numai primul rnd al textului este scris n dreapta imaginii, n partea de sus. Apoi, textul continu dup imagine, ocupnd ntreaga lime a ecranului.
10
Left dac ALIGN reine aceast valoare, imaginea se aliniaz n stnga, iar textul care urmeaz este scris n locul rmas.
11
Middle numai primul rnd al textului este scris n dreapta imaginii, la jumtatea nlimii ei. Apoi, textul continu dup imagine, ocupnd ntreaga lime a ecranului.
12
Bottom numai primul rnd al textului este scris n dreapta imaginii, n partea de jos. Apoi, textul continua dupa imagine, ocupand intreaga latime a ecranului.
13
alt="nume" - exist posibilitatea ca imaginea s nu se poat ncrca. pentru astfel de situaii este folosit parametrul ALT, unde nume conine un text (alternativ) care va fi afiat n locul imaginii. Exemplu: Fie tag-ul img urmtor i presupunem c imaginea nu se afieaz. <img src=mihai24.jpg alt =Mihai > lat ce apare:
height="numar pixeli" - nlimea imaginii. width="numar pixeli" - limea imaginii. border ="nr_pixeli" - Opional, imaginea poate fi nconjurat de un chenar.
<img src=mihai.jpg"> <img src="mihai.jpg" border=5> hspace="nr_pixeli"- determin distana minim care separ imaginea de celelalte obiecte pe orizontal. vspace="nr_pixeli"- determin distana minim care separa imaginea de celelalte obiecte pe vertical.
Tehnologii Web
4. Inserarea legturilor n documente HTML

Principala
caracteristic a hipertextelor o constituie utilizarea legturilor (links). link este o conexiune ctre o alt resurs Web (un alt hipertext sau o imagine, o secven video sau audio, un program etc.), resurs care poate fi accesat din fereastra browser-ului printr-un simplu clic.
Un
17
4. Inserarea legturilor n documente HTML

Limbajul HTML conine multiple elemente prin intermediul crora se poate crea o legtur ctre resurse Web: 1. img (creeaz o legtur ctre o imagine) 2. LINK (specific legturi ctre resurse utile) 3. A (creeaz o legtur ctre o resurs Web ntr-un document HTML) 4. Applet (creeaz o legtur ctre un program executabil pe calculatorul utilizatorului)
18
Tehnologii Web
4.1. Elementul A
pentru
a insera un link ntr-un document HTML se utilizeaz elementul A (anchor - ancor). Textul cuprins ntre eticheta de nceput <A> i cea de sfrit </A> va aprea evideniat n fereastra browser-ului: subliniat, colorat n funcie de valorile atributelor LINK, VLINK, ALINK sau n funcie de modul de configurare a browser-ului.
20
4.1. Elementul A
Atributele specifice elementului A sunt: href = URL specific adresa resursei la care se face legtura.
name = ir-de-caractere
asociaz un nume ancorei curente, astfel nct 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 legtura. Browser-ul va putea afia titlul resursei cnd utilizatorul deplaseaz mouse-ul deasupra legturii.
4.1. Elementul A
Exemplu 1: Descriere
Informaii suplimentare in <A HREF="cap5. htm" > Capitolul 5 - Inserarea legaturilor in documente HTML </A>.
Efect
n acest exemplu a fost creat un link ctre documentul HTML cap5.htm. Observai c adresa resursei int a fost specificat relativ la locaia curent.
4.1. Elementul A
<A name="ucb" href="http://www.utgjiu.ro"> Universitatea "Constantin Brancusi" Targu-Jiu </A>
Efect
n acest exemplu, adresa resursei destinaie (pagina Web a Universitatii Constantin Brancusi din Targu-Jiu) a fost specificat n mod absolut. Aceast ancor a fost denumit ucb.
4.1. Elementul A
<A NAME="nceput"></A> <A HREF="#Inceput">Ia-o de la nceput!</A>
....
Efect

n exemplul de mai sus am definit o ancor vid, pe care am denumit-o nceput. La sfritul documentului am inserat o legtur ctre ancora nceput, care permite utilizatorul s revin n poziia acestei ancore. Observai c n acest ultim caz, pentru specificarea adresei am utilizat caracterul #, urmat de numele ancorei.
Tehnologii WEB - curs 24
4.1. Elementul A
Exemplu 4:
Descriere calculatoare. Cap. Legaturi in documente HTML.</A> Efect

n acest exemplu am definit o legtur ctre documentul HTML Curs.htm. Prin activarea acestei legturi se va deschide n fereastra browser-ului documentul Curs.htm, la ancora denumit Link. Observai c pentru a specifica drept int o ancor dintr-un alt document se utilizeaz notaia: adres#nume-ancora.
<A HREF="Curs.htm#Link"> Curs Retele de
4.1. Elementul A
Exercitiu: Creai o legtur astfel nct acionnd printr-un clic pe numele unei persoane s i putei scrie un mesaj e-mail. Solutie: protocolul care permite trimiterea unui mesaj e-mail dintr-un program de navigare se numete mailto. prin urmare, URL-ul destinaie const din mailto: adres-destinatar.
26
Tehnologii Web
4.2. Elementul LINK

Ca i elementul A, elementul LINK permite specificarea unor legturi ctre alte documente. Spre deosebire de A, elementul LINK poate fi plasat numai n antetul documentului (n seciunea HEAD), deci prin urmare corespunztor acestui element nu se afieaz nimic n pagina vizualizat de ctre browser. Din punct de vedere sintactic, elementul LINK admite aceleai atribute ca i elementul A, dar nu admite etichet de sfrit.
28
4.2. Elementul LINK

prin utilizarea elementului LINK pot fi furnizate diferite informaii, cum ar fi informaii despre autor, informaii despre versiunile anterioare ale documentului sau versiuni n alte limbi etc. Exemplu:
<HEAD> <TITLE> Capitolul 7 </TITLE> <LINK TITLE = "Author" HREF = "utgjiu.ro/ing"> <LINK TITLE = "previous Version" KREF = "../last/man1.htm"> </HEAD>
29
Tehnologii Web
4.3. Elementul BASE

Specificarea
adreselor resurselor Web la care se creeaz legturi n documente HTML se poate face att n mod absolut, ct i n mod relativ. n cazul specificrii relative a adreselor, se consider implicit c adresa de baz este locaia curent. prin intermediul elementului BASE exist posibilitatea de a specifica explicit adresa de baz a URL-urilor specificate n mod relativ.
4.3. Elementul BASE

<BASE HREF=URL>
Valoarea
atributului URL al etichetei <BASE> trebuie s fie o adres specificat n mod absolut. Observai c elementul BASE nu admite etichet de sfrit. Dac apare, elementul BASE trebuie plasat n antetul documentului HTML.
4.3. Elementul BASE

Exemplu:
<HTML> <HEAD> <TITLE> Cuprins </TITLE> <BASE HREF="http://www.utgjiu.ro/ing"> </HEAD> <BODY> ... <A HKEF="curs/cap1.htm"> Capitolul 1 </A> ... </BODY> </HTML> n exemplu am definit adresa de baz http://www.utgjiu.ro/ing.
prin urmare, prin activarea legturii Capitolul 1, browser-ul va ncrca documentul de la adresa http://www.utgjiu.ro/ing/curs/cap1.htm
33
Tehnologii Web
5.Liste
n HTML exista posibilitatea ca anumite enunuri s fie numerotate sau marcate ntr-un anumit fel. O astfel de organizare poart numele de list. n HTML se pot descrie trei tipuri de liste: 1. liste ordonate, n care elementele sunt numerotate 2. liste neordonate, n care elementele sunt marcate de asa natura nct nu se sugereaz o anumit ordine a lor 3. liste de tip definitie
Tehnologii WEB - curs 35
5.Liste
Mai jos putei observa cele trei tipuri de liste:
1. Ora 2. Comun 3. Sat Ora Ora Zeci de mii de familii de oameni Comun Cteva mii de familii de oameni Sat Cteva sute de familii de oameni Lista ordonat Lista neordonat Lista de tip definiie
Comun Sat
36
Tehnologii Web
5.1. Lista ordonat

1. Elementul OL (Ordered Lists) creeaz o list ordonat. Elementele listei sunt trecute ntre tag-urile <OL> i </OL>. 2. Elementul LI (List Item) descrie un element al listei. Tag-ul obligatoriu este cel de nceput <LI>, iar cel de sfrit este facultativ: </LI>. Elementul OL are atributul type. Valorile pe care le poate lua acest atribut, sunt: <OL type = a> <OL type = i> <OL type = A> <OL type = l> <OL type = 1>
5.1. Lista ordonat

Exemplu:
<p> primul exemplu de lista : </p> <ol> <li> Sectia de Automatica si Informatica Aplicata;</li> <li> Sectia de Enegetica; </li> <li> Sectia de Mecanica; </li> <li> Sectia de Ingineria Mediului; </li> </ol>
Efect:
39
Tehnologii Web
5.2. Lista neordonat

Elementul
UL (Unordered Lists) descrie o list neordonat. Elementele listei sunt cuprinse ntre tag-urile <UL> i </UL>. Elementul UL are atributul type. Valorile pe care le poate lua acest atribut, sunt: <UL type = cyrcle> <UL type = disc> <UL type = square>

Exemplu:
<p> Tipuri de calculatoare: </p> <ul> <li> IBM; </li> <li> COMPAQ; </li> <li> APPLE; </li> <li> SUN; </li> </ul>
Efect:

Se pot construi si liste imbricate, dupa cum urmeaza din exemplul urmator:
<ol type = I > <li> Exemplul 1 </li> <ul type=disc> <li> Varianta A </li> <li> Varianta B </li> <li> Varianta C </li> <li> Varianta D </li> </ul> <li> Exemplul 2 </li> <ul type=square> <li> Varianta A </li> <li> Varianta B </li> <li> Varianta C </li> <li> Varianta D </li> </ul> </ol>
44
Tehnologii Web
5.3. Lista de tip definiie

1. Elementul DL (Definition Lists) are rolul de a descrie o list de definiii. El folosete tag-urile <DL> </DL>. 2. Elementul DT (Definition Term) definete termenul din list care trebuie descris. El utilizeaz tag-ul <DT>. 3. Elementul DD (Definition Description) are rolul de a reine descrierea termenului. El utilizeaz tag-ul <DD>.
46
5.3. Lista de tip definiie

Exemplu:
<DL> <DT> internet <DD> retele locale interconetate prin acelasi protocol <DT> internet account <DD> cont pentru internet <DT> internet address <DD> adresa de internet </DL>
Efect:
47
Tehnologii Web
5.4. Utilizari speciale ale listelor

Daca intr-o lista, in loc de elementele acesteia introduse prin <li>, se insereaza un bloc de text, aceasta va fi indentat ( intocmai ca elementele unei liste).
<html> <head><title>liste_exemplu</title></head> <body> <h1>Un bloc de text indentat</h1><hr> <ol> Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. </ol> </body> </html>

In exemplul urmator lista de definitii are itemii <dt> si <dd> multipli. <html> <head><title>liste_exemplu</title></head> <body> <h1 align="center">O lista de definitii speciala</h1><hr> <dl>program <dt><b>Luni</b> <dt><b>Marti</b> <dt><b>Miercuri</b> <dd><i>Ora 9.00.</i>Insciere <dd><i>Ora 11.00.</i>Audieri <dd><i>Ora 13.30.</i>Raspunsuri </dl> </body> </html>

Ultimul exemplu este o lista neordonata personalizata care utilizeaza pe post de elemente imagini si texte.
<html> <head><title>liste_exemplu</title></head> <body> <h1>O lista personalizata</h1><hr> <ul>Tipuri de masini Volkswagen sunt:<br> <li> <img src="images/reddot1.gif">Golf<br> </li> <li> <img src="images/reddot2.gif">Jetta<br> </li> <li> <img src="images/reddot3.gif">Passat<br> </li> <li> <img src="images/reddot4.gif">Bora<br> </li> <li> <img src="images/reddot5.gif">Corrado<br> </li> <li> <img src="images/reddot6.gif">Transporter<br></li> </ul> </body> 51 Tehnologii WEB - curs </html>
ntrebri?
52

C2 Web

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

C2 Web

Încărcat de

Drepturi de autor:

Formate disponibile

Universitatea Constantin Brncui din Trgu-Jiu Facultatea de Inginerie Departamentul de Automatic, Energie i Mediu

Lector univ. dr. Adrian Runceanu

Limbajul Html (partea II)

Tehnologii WEB - curs

8 Tehnologii WEB - curs

Tehnologii WEB - curs

Tehnologii WEB - curs

Tehnologii WEB - curs

Tehnologii WEB - curs

Tehnologii WEB - curs

14 Tehnologii WEB - curs

4. Inserarea legturilor n documente HTML

Tehnologii WEB - curs

4. Inserarea legturilor n documente HTML

Tehnologii WEB - curs

Tehnologii WEB - curs

Descriere calculatoare. Cap. Legaturi in documente HTML.</A> Efect

<A HREF="Curs.htm#Link"> Curs Retele de

Tehnologii WEB - curs

4.2. Elementul LINK

Tehnologii WEB - curs

4.2. Elementul LINK

Tehnologii WEB - curs

4.3. Elementul BASE

4.3. Elementul BASE

4.3. Elementul BASE

Tehnologii WEB - curs

Tehnologii WEB - curs

5.1. Lista ordonat

5.1. Lista ordonat

Tehnologii WEB - curs

5.2. Lista neordonat

5.2. Lista neordonat

42 Tehnologii WEB - curs

5.2. Lista neordonat

43 Tehnologii WEB - curs

5.2. Lista neordonat

Tehnologii WEB - curs

5.3. Lista de tip definiie

Tehnologii WEB - curs

5.3. Lista de tip definiie

Tehnologii WEB - curs

5.4. Utilizari speciale ale listelor

5.4. Utilizari speciale ale listelor

5.4. Utilizari speciale ale listelor

Tehnologii WEB - curs

S-ar putea să vă placă și