03 lesson basic_html_part_2

Lecţia 3. Elemente HTML pentru gestionarea imaginilor, tabelelor, legăturilor între pagini

Jurnalism online. Note de curs. Sergiu Corlat, USM

Imagini pentru web

Deoarece viteza de încărcare a paginilor web depinde de cantitatea de date transmise, este important ca imaginile amplasate pe pagină să aibă un volum cât mai mic. Reducerea volumului se poate obţine prin 3 metode:1.Utilizarea formatelor grafice care permit comprimarea2.Micşorarea rezoluţiei imaginii3.Micşorarea dimensiunii imaginii

Formate grafice pentru web

1. Formatul jpeg. Probabil cel mai popular format grafic pentru web. Permite selectarea gradului de comprimare, astfel încât să se menţină un echilibru între calitate şi compresie. Fişierele au extensia *.jpg

2. Formatul gif. Permite atât compresia imaginilor, cât şi modelarea animaţiei prin alternarea a câteva imagini, stocate într-un singur fişier. Se foloseşte de obicei pentru banerele cu animaţie. Fişierele au extensia *.gif

3. Formatul png. Permite compresia imaginilor, fără pierderea calităţii imaginii. Fişierele au extensia *.png

Rezoluţia imaginii. Noţiuni de bază

width

height

pixelPixeli per inch (PPI) sau densitate de pixeli este măsura rezoluţiei dispozitivelor şi imaginilor în diverse contexte; PPI poate descrie rezoluţia, în pixeli, a imaginilor care urmează să fie prezentate într-un spaţiu specificat.

De exemplu, o imagine de 100x100 pixeli, care este tipărită într-un pătrat de 1 inch ar putea fi spus de a avea 100 dpi. (puncte per inch). Acest tip de rezoluţie este semnificativ atunci când descrie procesul de imprimare a unei imagini. Fotografii de calitate bună se obţin începând cu rezoluţia de 300 puncte per inch la imprimare.Pentru web se alege o rezoluţie de 72 sau 96 ppi.

Dimensiunile imaginii

În mod tradiţional dimensiunile imaginii se stabilesc în pixeli (liniar). De asemenea pot fi folosite şi alte unităţi de măsură, dar pixelii asigură compatibilitatea dimensiunilor imaginii cu rezoluţia ecranului. De exemplu, o cameră foto de 2MPx (2 Megapixeli) generează imagini cu dimensiunile 1600 x 1200 pixeli. O cameră web de 0.3 MPx permite crearea secvenţelor video cu dimensiunea cadrului de 640 x 480 pixeli.

Dacă imaginea pe care doriţi să o amplasaţi în pagină are dimensiuni mai mare de 1200 x 900 ea poate fi redimensionată (prin micşorare în orice editor grafic)

Inserarea imaginii în documentul HTML

Imaginile se includ în documentele web cu secvenţa nepereche<IMG ….>

Secvenţa <IMG > este însoţită de următoarele atribute:

SRC=“nume fişier imagine sau calea spre fişierul imagine”

ALT=“text alternativ”

WIDTH= X - lăţimea în pixeli

HEIGHT= X - înălţimea în pixeli

BORDER=X – contur de lăţimea X în jurul imaginiiNote1. În cazul când imaginea şi fişierul HTML se află în acelaşi dosar, se

indică doar numele fişierului imagine, în caz contrar – calea spre el2. Pentru plasarea imaginii într-o pagină din mediul web este suficientă

încărcarea ei ăn acest mediu cu ajutorul unui program client.

Exemplu.

<HTML> <body bgcolor=lightyellow> <H1> Imagini si text </H1> <H1> Caracteristica tehnica a vehiculului <font color=lightgreen face="Arial Black"> VAZ 2108 </font> </H1> <IMG SRC="imagini\16.jpg" align=right height=400 width=300> <P> Este unul din cele mai reusite modele ale vehiculelor de clasa medie pentru mijlocul anilor 80 a secolului trecut in spatiul postsovietic. Produsa la uzina de automobile din orasul Toliatti a castigat rapid piata sovietica de automobile, raminind si pana in prezent unul din cele mai populare si neperetentioase modele de autovehicul. </P> <UL> <LI> Capacitate motor – 1300 cm <sup> 3 </sup> <LI> Usi - 3 <LI> Viteza maxima - 160 km/h <LI> Consum mediu - 7 l / 100 km <LI> Numar de locuri - 5 <LI> Masa totala - 960 kg <LI> Dotare suplimentara - GPS </ul> </BODY> </html>

Legături între paginile web

Remarcă: Dacă în adresa de trecere nu este indicată calea la fişier, căutarea adresei se va face doar în dosarul curent!

În documentele HTML trecerea de la o pagină la alta se realizează prin secvenţa: < A HREF="[adresa de trecere]"> textul sau imaginea referinţă </A> Parametrul [adresa de trecere] poate fi de câteva tipuri. Cel mai simplu tip — numele altui document HTML la care se face trecerea.

Forma generală: <a href="nume Fisier">Comentariu </a>

Exemplu: < a href="index.html" > Trecere la index </a >

Acest fragment de text va genera apariţia în document a unui fragment marcat (de regulă - albastru,subliniat ex: Trecere la index). La apăsarea butonului stâng mouse pe acest fragment se va realiza trecerea la fişierul index.html.

Remarcă: În platformele web 2.0 crearea şi redactarea legăturilor se face semiautomat, sub controlul instrumentelor incorporate ale platformei.

Organizarea textului. Liste cu marcaje.

Liste cu marcaje:Delimitarea listei: <UL> … </UL>Selectarea tipului de marcaj: atributul TYPE= DISC | CIRCLE | SCUAREMarcarea elementelor listei <LI> … </LI>Exemplu, pentru a obţine lista:

Matematica; Informatica; Fizica; Chimia.

va fi nevoie de următoarea secvenţă HTML:

<UL TYPE=SQUARE> <LI> Matematica; <LI> Informatica; <LI> Fizica; <LI> Chimia.</UL>

Notă: secvenţa <LI> poate să nu fie închisă

Organizarea textului. Liste numerotate

Liste numerotate:Delimitarea listei: <OL> … </OL>Selectarea tipului de marcaj: atributul TYPE= 1 | A | a | I | iSetarea numărului de start al listei: atributul START= x (x – primul număr în listă) Marcarea elementelor listei <LI> … </LI>Exemplu, pentru a obţine lista:

1. Matematica; 2. Informatica; 3. Fizica; 4. Chimia.

va fi nevoie de următoarea secvenţă HTML:

<OL > <LI> Matematica; <LI> Informatica; <LI> Fizica; <LI> Chimia.</OL>

Notă: selectarea atributului Type=1 – numerotare cu cifre arabeType=I –cifre romane majusculeType=i –cifre romane minusculeType=A – numerotare lexicografică, majusculeType=a – numerotare lexicografică, minuscule

Organizarea textului. Liste de definiţii

Delimitarea listei: <DL> … </DL>Delimitarea noţiunii definite <DT> … </DT>Delimitarea definiţiei pentru noţiune <DD> … </DD>

Exemplu, pentru a obţine lista:

HTML Noţiunea HTML (HyperText Markup Language) se descifrează ca “Limbaj de marcare a

hipertextelor. Prima versiune a limbajului HTML a fost elaborată de colaboratorul Laboratorului European de Fizică a particulelor Elementare Tim Berners-Ly.

Document HTML Fişier text cu extensie *.html (În alte sisteme operaţionale denumirea fişierului e însoţită

de extensia *.html sau *.htm). <DL> <DT>HTML <DD>Noţiunea HTML (HyperText Markup Language) se descifrează ca “Limbaj de marcare a hipertextelor. Prima versiune a limbajului HTML a fost elaborată de colaboratorul Laboratorului European de Fizică a particulelor Elementare Tim Berners-Ly. <DT>Document HTML <DD>Fişier text cu extensie *.html (În alte sisteme operaţionale denumirea fişierului e însoţită de extensia *.htmll sau *.htm). </DL>

Notă: secvenţele <DT> şi <DD> pot să nu fie închise

Tabele. Elemente de structură

Tabelele sunt elemente pseudografice în care informaţia este stocată în celule aparte, fiecare celulă având caracteristicile sale proprii (dimensiunile, culoarea, formatul textului, ). De aici şi principala destinaţie – prezentarea structurată a textului.

Un tabel este determinat de următoarele secvenţe de control:

<TABLE> ... </TABLE> - începutul şi sfârşitul tabelului cu atributele

WIDTH - lăţimea tabelului. Poate fi indicată în puncte (pixeli) sau în procente de la lăţimea paginii: (WIDTH=500 – lăţimea de 500 puncte) (WIDTH=60% - 60% din lăţimea paginii).

BORDER – fixează lăţimea liniilor de separare între elementele tabelului şi pe perimetrul lui. Dacă atributul BORDER nu este indicat tabelul va apare fără linii de separare.

CELLSPACING – Fixează distanţa între frontierele a două celule alăturate în puncte. Exemplu(CELLSPACING=2). CELLPADDING Fixează distanţa dintre frontiera celulei şi textul din ea în puncte. Exemplu(CELLPADDING=10).

<CAPTION> ... </CAPTION> - titlul tabelului<TR> ... </TR> - începutul şi sfârşitul liniei de tabel<TD> ... </TD> - începutul şi celulei în linia de tabel

Exemplu<HTML> <Body> <H1>Un tabel elementar</H1> <TABLE BORDER=1>  <CAPTION>  Tabelul poate avea antet </CAPTION> <TR>  <TD>  Linia 1 Coloana 1 </TD>  <TD>  Linia 1 Coloana 2 </TD>  </TR>  <TR>  <TD>  Linia 2 Coloana 1 </TD>  <TD>  Linia 2 Coloana 2 </TD>  </TR> </TABLE> </BODY></HTML>

Elemente de control a liniilor şi celulelor

NOWRAP – tot conţinutul celulei va fi plasat fără ruperi într-un singur rând.COLSPAN - fixează "extinderea" celulei pe orizontală (cîte celule vecine vor fi „asimilate” de celula curentă).

Exemplu, COLSPAN=4 - celula se va extinde pe 4 coloane.

ROWSPAN - fixează "extinderea" celulei pe verticală (cîte rânduri vecine vor fi „asimilate” de celula curentă).

Exemplu ROWSPAN=2 – celula ocupă două linii.

ALIGN – fixează alinierea orizontală a textului în celulă.

VALIGN - Fixează alinierea verticală a textului (sau altor elemente) în celulă. Variante: VALIGN=TOP (după marginea de sus), VALIGN=MIDDLE (după mijloc), VALIGN=BOTTOM (după partea de jos).

WIDTH – fixează lăţimea celulei în puncte (pixeli). Exemplu (WIDTH=200).

HEIGHT - fixează înălţimea celulei în puncte (pixeli). Exemplu (HEIGHT=40).

Exemplu:

<HTML> <H1>Un tabel elementar cu elemente de formatare</H1><TABLE BORDER=2 width=800> <CAPTION align=bottom> Tabelul poate avea antet plasat sub el </CAPTION> <TR> <TD align=center colspan=8> <Font size=5 ><B>Municipiul</b> </font></TD> </TR><TR align=center> <TD colspan=2 > &nbsp </TD> <TD align=center colspan=2 > <b>Chisinau </b></TD><TD colspan=2 ><b> Balti </b> </TD> <TD colspan=2 > <b> Cahul </b></TD> </TR> <TR> <TD colspan=2 width=100 align=center valign=middle> Anul </TD><TD > Utilizatori total </TD> <TD > Cu acces Internet </TD> <TD > Utilizatori total </TD> <TD > Cu acces Internet </TD> <TD > Utilizatori total </TD> <TD > Cu acces Internet </TD></TR><TR align=right> <TD rowspan=3 width=100 > <A HREF="nokia.jpg"> <img src="nokia.jpg" width=100 height=100 > </A></TD> <TD> 1999</TD> <TD > 35 700 </TD> <TD > 20 000 </TD> <TD > 9 800 </TD> <TD > 1 300 </TD> <TD > 6 700</TD> <TD > 800 </TD> </TR><TR align=right> <TD> 2000</TD> <TD > 45 500 </TD> <TD > 26 100 </TD> <TD > 10 120 </TD><TD > 1 540 </TD> <TD > 9 400</TD> <TD > 950 </TD> </TR> <TR align=right> <TD> 2001</TD> <TD > 51 2500 </TD> <TD > 29 200 </TD> <TD > 11 260 </TD><TD > 1 800 </TD> <TD > 10 200</TD> <TD > 1 350 </TD> </TR> </TABLE> </BODY> </HTML>

Exemplu:

Resurse web

http://ro.wikipedia.org/wiki/Rezolu%C8%9Bie_digital%C4%83

http://ru.wikipedia.org/wiki/%D0%A0%D0%B0%D0%B7%D1%80%D0%B5%D1%88%D0%B5%D0%BD%D0%B8%D0%B5_(%D0%BA%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82%D0%B5%D1%80%D0%BD%D0%B0%D1%8F_%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D0%BA%D0%B0)









Activitate practică:

1. Deschideţi în portofoliul personal pagina “Elemente HTML”2. Inseraţi în pagină, în regimul de editare standard câteva

imagini. Treceţi în regimul HTML şi ajustaţi parametrii imaginilor: dimensiunile, conturul, alinierea.

3. Creaţi un tabel cu structură omogenă în regim de editare HTML.

4. Creaţi un tabel cu structură neomogenă în regim de editare HTML şi editaţi proprietăţile lui.

5. Creaţi în portofoliu pagina Linkuri utile şi adăugaţi pe ea legături la 5 – 10 situri a agenţiilor de ştiri din RM şi UE.

6. Salvaţi modificările efectuate în pagină.

03 lesson basic_html_part_2

Education

Transcript of 03 lesson basic_html_part_2