Crearea listelor in HTML
In aceasta lectie vei invata cum poti folosi listele in pagina ta web. Listele pe care le poti crea cu ajutorul limbajului HTML sunt de
urmatoarele tipuri: liste neordonate, liste ordonate si liste de definitii. Sa le luam pe rand.
Liste neordonate (UL)
Inainte de vorbi despre listele neordonate sa vedem, mai intai, cum arata una:
Firma noastra va ofera urmatoarele servicii:
printare
printare
indosariere
xerox
tehnoredactare
Pentru a putea face o lista neordonata trebuie sa folosim tag-urile <UL> si </UL> (denumirea acestor tag-uri vine de la "unordered list" care
inseamna in limba engleza lista neordonata). Fiecare element al listei trebuie introdus de tag-ul <LI>. Ca sa intelegi mai bine sa vedem
impreuna cum arata codul HTML pentru lista de mai sus:
<HTML>
<HEAD>
<TITLE>Liste neordonate</TITLE>
</HEAD>
<BODY>
<UL>Firma noastra va ofera urmatoarele servicii:
<LI>printare
<LI>laminare
<LI>indosariere
<LI>xerox
<LI>tehnoredactare</UL>
</BODY>
</HTML>
Salveaza pagina cu numele de [Link] in directorul Pagini. Pentru a vedea cum ar trebui sa arate aceasta pagina: click aici
Cu ajutorul atributului TYPE, putem schimba cercul plin din fata fiecarui element. Acesta este folosit in mod implicit atunci cand folosim o
lista neordonata. Astfel, prin atribuirea unei valori atributului TYPE, vom putea face ca elementele listei sa fie precedate de un patrat sau de
un cerc gol.
Pentru a vedea rezultatele, inlocuieste linia a 6-a din codul HTML de mai sus cu una din urmatoarele linii de cod:
o pentru cercuri goale:
<UL TYPE=circle>Firma noastra va ofera urmatoarele servicii:
o
Salveaza pagina cu numele de [Link] in directorul Pagini. Vezi rezultatul: click aici
pentru patrate pline:
<UL TYPE=square>Firma noastra va ofera urmatoarele servicii:
Salveaza pagina cu numele de [Link] in directorul Pagini. Vezi rezultatul: click aici
Nu uita! Pentru a invata limbajul HTML trebuie sa scrii codul de la fiecare exemplu si sa vezi daca obtii aceleasi rezultate ca cele din cadrul
cursului.
Liste ordonate (OL)
Am vazut cum putem folosi listele neordonate in cadrul paginilor web. Lista urmatoare pastreaza continutul celei de mai sus insa este o lista
ordonata (ordered list). Sa vedem diferenta:
Firma noastra va ofera urmatoarele servicii:
1. printare
2. printare
3. indosariere
4. xerox
5. tehnoredactare
Listele ordonate se formeaza cu ajutorul tag-urilor <OL> si </OL>, denumirea acestora venind din limba engleza "ordered list" care
inseamna lista ordonata. La fel ca si la listele neordonate, fiecare element trebuie introdus de tag-ul <LI>.
Iata codul pentru lista ordonata de mai sus:
<HTML>
<HEAD>
<TITLE>Liste ordonate</TITLE>
</HEAD>
<BODY>
<OL>Firma noastra va ofera urmatoarele servicii:
<LI>printare
<LI>laminare
<LI>indosariere
<LI>xerox
<LI>tehnoredactare</OL>
</BODY>
</HTML>
Salveaza pagina cu numele de [Link] in directorul Pagini. Pentru a vedea cum ar trebui sa arate aceasta pagina: click aici
Ca si in cazul listelor neordonate, si la listele ordonate, atributul TYPE are o valoare implicita, asa cum am vazut in exemplul de mai sus:
numerele. In loc de numere putem folosi si alte caractere. Pentru a folosi aceste caractere este de ajuns sa utilizam atributul TYPE cu
valoarea potrivita.
Pentru a vedea rezultatele, inlocuieste linia a 6-a din codul HTML de mai sus cu una din urmatoarele linii de cod:
A. pentru litere mari:
<OL TYPE=A>Firma noastra va ofera urmatoarele servicii:
B.
Salveaza pagina cu numele de [Link] in directorul Pagini. Vezi rezultatul: click aici
c. pentru litere mici:
<OL TYPE=a>Firma noastra va ofera urmatoarele servicii:
d.
Salveaza pagina cu numele de [Link] in directorul Pagini. Vezi rezultatul: click aici
v. pentru cifre romane mici:
<OL TYPE=i>Firma noastra va ofera urmatoarele servicii:
vi.
Salveaza pagina cu numele de [Link] in directorul Pagini. Vezi rezultatul: click aici
VII. pentru cifre romane mari:
<OL TYPE=I>Firma noastra va ofera urmatoarele servicii:
VIII.
Salveaza pagina cu numele de [Link] in directorul Pagini. Vezi rezultatul: click aici
Pe langa atributul TYPE, pentru tag-ul <OL> mai putem folosi si atributul START. Acest atribut este folosit atunci cand vrem sa schimbam
valoarea initiala, de exemplu daca vrem sa incepem de la 4, in cazul numerelor, sau de la D, in cazul literelor mari, etc. Forma generala a
acestui atribut este START=n, unde n este un numar natural. Sa vedem un exemplu:
<HTML>
<HEAD>
<TITLE>Liste ordonate</TITLE>
</HEAD>
<BODY>
<OL TYPE=A START=4>In vacanta de vara am vizitat urmatoarele orase:
<LI>Roma
<LI>Viena
<LI>Londra
<LI>Paris
<LI>Praga
</OL>
</BODY>
</HTML>
Codul de mai sus va afisa in cadrul browser-ului urmatoarea lista ordonata: click aici
Liste de definitii (DL)
Pentru a forma liste de definitii trebuie sa folosesti tag-urile <DL> si </DL> (denumirea lor vine de la "definition list" = lista de definitii).
Iata cum arata o lista de definitii:
Teorema lui Pitagora
In orice triunghi dreptunghic suma patratelor catetelor este egala cu patratul ipotenuzei.
Teorema catetei
In orice triunghi dreptunghic patratul catetei este egal cu produsul dintre ipotenuza si proiectia catetei pe ipotenuza.
Teorema inaltimii
In orice triunghi dreptunghic patratul inaltimii este egal cu produsul proiectiilor celor doua catete pe ipotenuza.
Fiecare element al unei liste de definitii va trebui introdus de tag-ul <DT> (Definition Term), iar apoi fiecare definitie va fi precedata de tag-
ul <DD> (Definition Definition).
Codul listei de mai sus este urmatorul:
<HTML>
<HEAD>
<TITLE>Liste definitii</TITLE>
</HEAD>
<BODY>
<DL>
<DT><B>Teorema lui Pitagora</B>
<DD>In orice triunghi dreptunghic suma patratelor catetelor este egala cu patratul ipotenuzei.
<DT><B>Teorema catetei</B>
<DD>In orice triunghi dreptunghic patratul catetei este egal cu produsul dintre ipotenuza si proiectia catetei pe ipotenuza.
<DT><B>Teorema inaltimii</B>
<DD>In orice triunghi dreptunghic patratul inaltimii este egal cu produsul proiectiilor celor doua catete pe ipotenuza.
</DL>
</BODY>
</HTML>
Salveaza pagina cu numele de [Link] in folderul Pagini. Vezi cum arata aceasta pagina: click aici
Personalizarea listelor
Daca vrei ca in loc de simbolurile folosite in mod prestabilit pentru elementele listelor sa fie afisate propriile imagini, in loc de tag-ul <LI>
cu care introducem fiecare element al listei vom adauga imaginea dorita cu ajutorul tag-ului <IMG>.
Pentru a intelege mai bine sa luam un exemplu. Salveaza mai intai imaginea de mai jos in directorul Poze cu numele de [Link] (click pe
imagine si din pagina care se deschide click dreapta pe imagine, iar apoi alege din meniul care apare optiunea Save Image As):
Acum sa scriem codul unei pagini web ce va contine o lista cu persoanele din cadrul departamentului Contabilitate al unei firme:
<HTML>
<HEAD>
<TITLE>Lista personal</TITLE>
</HEAD>
<BODY>
<UL>Lista persoanelor care sunt angajate in cadrul departamentului CONTABILITATE:
<BR><BR><IMG SRC="../Poze/[Link]">Gheorghe Maria
<BR><BR><IMG SRC="../Poze/[Link]">Prodan Eugenia
<BR><BR><IMG SRC="../Poze/[Link]">Matac Marian
<BR><BR><IMG SRC="../Poze/[Link]">Neacsu Elena
<BR><BR><IMG SRC="../Poze/[Link]">Ionescu Violeta
<BR><BR><IMG SRC="../Poze/[Link]">Manea Cristina
<BR><BR><IMG SRC="../Poze/[Link]">Ionita Laura
<BR><BR><IMG SRC="../Poze/[Link]">Serbanescu Mihaela
<BR><BR><IMG SRC="../Poze/[Link]">Craciun Dorina
<BR><BR><IMG SRC="../Poze/[Link]">Neagu Emil
</UL>
</BODY>
</HTML>
Salveaza pagina in directorul Pagini cu numele de [Link].
Daca totul a iesit asa cum trebuie pagina ta ar trebui sa arate astfel: click aici
Exercitii
1. Scrie codul HTML al unei pagini web care sa contina urmatoarea lista:
Michael Schumacher
Jenson Button
Sebastian Vettel
Fernando Alonso
Lewis Hamilton
Mark Webber
Rubens Barrichello
Felipe Massa
Vitaly Petrov
Nico Rosberg
In loc de semnul din fata fiecarui pilot foloseste urmatoarea imagine:
Salveaza imaginea cu numele [Link], in directorul Poze (click pe imagine si din pagina care se deschide click dreapta pe imagine, iar apoi
alege din meniul care apare optiunea Save Image As).
Salveaza pagina HTML in directorul Pagini, cu numele [Link]. Pagina ta ar trebui sa arate astfel: click aici
2. Folosind notiunile invatate pana acum, incearca sa scrii codul urmatoarei pagini HTML, pe care salveaz-o cu numele [Link]: click
aici
Pentru a te verifica, dupa ce ai deschis pagina, alege din meniul View, optiunea Page Source (in functie de browser pot sa difere denumirile)
L2. LEGATURI HTML
1. Noțiunea de hiperlegătură
Hiperlegătura (linkul) permite trecerea de la o pagină web la alta sau la o resursă (fișier, imagine, director).
2. Eticheta HTML <a>
<a href="adresa">Textul legăturii</a>
Exemplu: Figura 1 conține un link spre motorul de căutare [Link], iar figura 2 codul sursă asociat. Atributul href specifică adresa de
destinație a linkului ([Link] Această adresare este una absolută, prin specificarea intregii adrese.
<!DOCTYPE html>
<html>
<body>
<h2>Linkuri HTML</h2>
<p><a href="[Link] motorul de căutare</a></p>
</body>
</html>
3. Atribute importante
href – adresa destinației
target="_blank" – deschide linkul într-o filă nouă
title – afișează un mesaj la poziționarea cursorului
4. Tipuri de legături
absolute – conțin adresa completă ([Link]
relative – se raportează la fișierul curent-Exemplu de adresă relativă: <a href=”nume_fiș[Link]”>Text care asigură legătura
</a>
către fișiere
către directoare
Un fișier referit se poate afla in alt dosar decat
fișierul curent sau in același dosar cu fișierul curent, caz in care e suficient să i se atribuie lui href numele
și extensia fișierului referit.
Pentru o mai bună organizare a unui site este indicată organizarea fișierelor in diverse directoare.
Legături către directoare care din punct de vedere ierarhic se află sub cel curent
Pentru a face o legătură la un fișier aflat intr-un director ierarhic situat sub cel curent, se trec
toate directoarele, incepand de la cel curent in jos, pană la directorul părinte al fișierului, după care
se trece numele fișierului și extensia.
5. Exemple
<a href="[Link]
<a href="imagini/[Link]">Imagine Delta</a>
<html>
<body>
<h2>Linkuri HTML</h2>
<p><a href="[Link] motorul de căutare</a></p>
<a href="imagini/[Link]">Imagine Delta</a>
</body>
</html>
Exemplu -Legături către directoare care din punct de vedere ierarhic se află deasupra celui curent
Exemplu:
<!DOCTYPE html>
<html>
<body>
<h2>Linkuri HTML</h2>
<p><a href="[Link] motor ANEXA – SCHITA LECTIEI
Lectia:3 Inserarea si formatarea imaginilor in pagini web (HTML)
1. Ce sunt imaginile intr-o pagina web?
Imaginile sunt fisiere grafice (ex: JPG, PNG, GIF) care pot fi afisate intr-o pagina web pentru a face continutul mai clar, mai
atractiv si mai usor de inteles.
Imaginile nu sunt “scrise” in fisierul HTML, ci sunt incarcate dintr-un folder al proiectului.
2. Eticheta folosita pentru imagini: <img>
Inserarea unei imagini se face cu eticheta:
<img>
Aceasta este o eticheta fara inchidere (nu se scrie </img>).
3. Atributul src (sursa imaginii)
Atributul src indica locatia imaginii care trebuie afisata.
Exemplu:
<img src="imagini/[Link]">
📌 Observatie importanta:
Daca nu este specificata corect calea, imaginea nu se va incarca.
4. Atributul alt (text alternativ)
Atributul alt afiseaza un text in locul imaginii atunci cand:
imaginea lipseste,
calea este gresita,
conexiunea este slaba,
browserul nu poate incarca imaginea.
Exemplu:
<img src="imagini/[Link]" alt="Delta Dunarii ">
5. Dimensiunea imaginii: width si height
Dimensiunea unei imagini poate fi modificata direct in HTML prin:
width = latimea imaginii
height = inaltimea imaginii
Exemplu:
<img src="imagini/[Link]" alt="delta Dunarii" width="500" height="300">
📌 Dimensiunile sunt exprimate in pixeli.
6. Atributul align (alinierea imaginii)
Atributul align stabileste modul de aliniere a imaginii fata de text.
Valori uzuale:
left (stanga)
right (dreapta)
middle (aliniere pe mijloc)
Exemplu:
<p>
<img src="imagini/[Link]" alt="Delta Dunarii" align="left">
Acesta este un paragraf de text.
</p>
7. Atribute suplimentare
In unele exemple se pot intalni si atribute precum:
border (chenar)
hspace (spatiu orizontal)
vspace (spatiu vertical)
Exemplu:
<img src="imagini/[Link]" alt="Flori perene" border="2" hspace="10" vspace="10">
📌 Observatie: In HTML5 aceste atribute sunt considerate invechite, iar formatarea se face recomandat prin CSS.
CSS (Cascading Style Sheets) este un limbaj de stilizare folosit pentru a controla aspectul vizual al paginilor web create cu HTML,
definind culori, fonturi, layout și animații, separând astfel conținutul de prezentare, ceea ce permite design responsiv și o gestionare mai
ușoară a stilurilor pe multiple pagini
8. Exemplu complet
<!DOCTYPE html>
<html>
<head>
<title>Imagini in HTML</title>
</head>
<body>
<h1>Inserarea imaginilor</h1>
<p>Mai jos este o imagine inserata din folderul imagini:</p>
<img src="imagini/[Link]" alt="Peisaj" width="400" height="250">
</body>
</html>
9. Concluzie
Pentru inserarea corecta a imaginilor intr-o pagina web se foloseste:
eticheta <img>
atributul src pentru calea imaginii
atributul alt pentru descriere
atributele width si height pentru dimensiune
optional align pentru pozitionare
ul de căutare</a></p>
<a href="imagini/[Link]">Imagine Delta</a><br>
<a href="..\..\cls%205/internet\[Link]">legaturi catre alte directoare sau fisiere</a>
</body>
</html>