| CATEGORII DOCUMENTE |
Limbajul HTML
HyperText Markup Language (HTML) este un limbaj pentru descrierea structurii unui document Web. Fiecare element din structura documentului este marcat prin cuvinte cheie cu semantica bine precizata numite tag-uri. Cu mici exceptii tag-urile se prezinta in perechi, indicand inceputul (tag-ul de intrare) si sfarsitul (tag-ul de iesire) marcarii elementului structural. Sintaxa:
tag de intrare: <cuvant cheie>
tag de iesire pereche: </cuvant cheie>
Toate tag-urile vor fi analizate si interpretate de browser-e si pe baza lor, genereaza documentul web pentru a fi afisat.
Structura generala a unei pagini HTML
O pagina HTML contine incepe si se sfarseste in mod obligatoriu cu perechea de tag-uri: <html> </html>. Dupa aceste tag-uri, browser-ul recunoaste inceptul si sfarsitul paginii html.
In continuare, o pagina HTML contine doua parti:
antetul marcat prin tag-urile <head> si </head> ce contine de obicei titlul paginii html. Titlul este un text marcat prin tag-urile <title> si </title>.
continutul sau corpul paginii html care este cuprins intre tag-urile <body> si </body> si care contine toate elementele ce vor forma documentul web: text, imagini, legaturi, etc.
Nota. Exista editoare de documente html (ca HTML-Kit), care la crearea unui document nou, aplica sablonul descris mai sus:
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>
<html>
<head>
<title>Untitled</title>
</head>
<body>
</body>
</html>
Exercitiu.
a) Deschideti editorul HTML-Kit si creati o pagina noua html. Stergeti textul Untitled si in locul lui scrieti: Recapitulare-Partea I, iar in sectiunea body scrieti urmatorul text: Ecuatii si inecuatii de gradul intai Forma generala a ecuatiei de gradul intai este ax+b=0, a!=0
b) Previzualizati pagina html. Ce observati?
c) Salvati pagina in fisierul "PagAlg1.html" intr-un folder cu numele vostru.
Paragrafe si stiluri de scriere (headings)
Trecerea la un rand nou se face folosind tag-ul <br>. Nota: Acest tag nu are tag pereche.
Exercitiu. Modificati pagina html anterioara astfel incat rezultatul sa fie urmatorul:
Ecuatii
si inecuatii de gradul intai
Forma generala a ecuatiei de gradul intai este
ax+b=0, a!=0
Mai multe linii de text formeaza un paragraf. Un paragraf este marcat prin tag-urile: <p> si </p>.
Exercitiu. Modificati pagina anterioara astfel incat textul din body sa formeze un singur paragraf.
In HTML sunt definite sase stiluri de scriere. Ele sunt indicate prin tag-urile <H?> si </H?> unde caracterul ? va contine o cifra intre 1 si 6 in functie de dimensiunea caracterelor: 1 este cel mai mare, ., 6 este cel mai mic.
Exercitiu
a) Sa se aplice stilul H2 textului: Ecuatii si inecuatii de gradul intai.
b) Sa se insereze inaintea primei linii de continut urmatorul text:
Ecuatii de gradul intai si de gradul al doilea
caruia sa i se aplice stilul H1.
Inserarea caracterelor speciale
Exista o serie de caractere care nu pot fi gasite pe tastatura si trebuie sa fie inserate intr-un document hipertext. Un astfel de caracter se specifica prin codul sau prefixat de grupul de caractere &# si postfixat de . In urmatorul tabel prezentam codurile unor caractere speciale des folosite:
|
Caracter |
Cod |
|
∞ |
|
|
≥ |
|
|
≤ |
|
|
≠ |
|
|
s |
≡ |
|
∩ |
|
|
∪ |
|
|
≌ |
|
|
→ |
Liste
In HTML exista trei tipuri de liste: ordonate, neordonate si de tip glosar.
Liste ordonate
Intr-o lista ordonata, fiecare element al unei liste este precedat de cate o cifra urmata de un punct. Cifra indica pozitia elementului in lista. In Html orice lista ordonata este delimitata de tag-urile: <ol> si </ol>. Fiecare element din lista este prefixat de tag-ul <li> si se incheie cu </li>.
Exercitiu. Sa se realizeze urmatoarea lista:
Daca a si b sunt numere, atunci:
<ol>
<li> |a|>=0; </li>
<li> |a|=0 daca si numai daca a=0;</li>
<li> |ab|=|a|*|b|;</li>
<li> |a+b|<=|a|+|b|.</li>
</ol>
Observatie: Cifrele nu sunt specificate de realizatorul paginii Html. Ele sunt completate automat de browser.
Liste neordonate
Fiecare element al unei liste neordonata este precedata de un caracter care nu simbolizeaza o ordine. Intreaga lista este cuprinsa intre tag-urile <ul> si </ul>. In schimb, ca si in cazul listelor ordonate, fiecare element al liste este marcat de <li> si </li>.
Exercitiu. Transformati lista anterioara intr-o lista neordonata.
Liste de tip glosar
Acest tip de lista are particularitatea ca fiecare element al liste este format din doua componente: termen si definitie. Acestea sunt afisate pe linii separate, iar definitiile sunt deplasate la dreapta.
Intreaga lista este delimitata de tag-urile <dl> si</dl>. Fiecare termen este delimitat de tag-urile <dt> </dt>. Fiecare definitie este incadrata de tag-urile <dd> </dd>.
Exercitiu. Realizati o pagina Web salvata in fisierul Pagina2.html ce contine urmatoarea lista de tip glosar:
Adrese la care gasiti informatii despre browser-e:
<dl>
<dt> Internet Explorer</dt>
<dd> https://www.microsoft.com/window/ie/default.htm</dd>
<dt> Nescape Communicator</dt>
<dd> https://www.netscape.com/computing/download/index.html</dd>
</dl>
Atributele tag-urilor
Unele tag-uri au atribute care permit furnizarea de informatii suplimentare sau modificarea optiunilor implicite. Forma generala a unui atribut este nume_atribut="valoare".
Atributul type al tag-ului de intrare <ol> arata caracterul ce va fi folosit pentru numerotarea elementelor listei.Valoarea implicita a atributului type este 1, adica numeroteaza cu cifre arabe. Urmatorul tabel contine valorile atributului type.
|
Valoare |
Semnificatie |
|
Cifre arabe |
|
|
I |
Cifre romane majuscule |
|
i |
Cifre romane mici |
|
A |
Litere mari |
|
a |
Litere mici |
Exercitiu . Sa se realizeze urmatoarea lista:
Sa consideram cele patru cazuri posibile:
<ol type=i>
<li> Daca a>0 si b>0 atunci a+b>0. Deci |a+b|=|a|+|b|.</li>
<li> Daca a<0 si b>0 atunci a+b<0. In acest caz|a|=-a, |b|=-b, |a+b|=-(a+b) si deci |a+b|=|a|+|b|.</li>
<li> Daca a>0 si b<0, atunci |a|=a si |b|=-b. In aceasta situatie avem, sau a+b>=0 sau a+b<0. Daca a+b>=0, atunci<br>
|a+b|=a+b<=a=|a|<=|a|+|b|;<br>
iar daca a+b<0, atunci<br>
|a+b|=-a-b=-a+|b|<=|b|<=|a|+|b|.</li>
<li> Analog, se demonstreaza cazul a<0 si b>0.</li>
</ol>
Atributul start al tag-ului de intrare <ol> indica valoarea de la care se incepe numerotarea elementelor listei. Implicit, valoarea este egala cu 1.
Exercitiu. Sa se modifice lista anterioara astfel incat numerotarea incepe de la 4.
Atributul value al tag-ului <li> specifica valoarea cu care este marcat elementul respectiv in lista. Valoarea implicita este 1.
Exercitiu. Sa se realizeze urmatoarea lista:
In Html exista trei tipuri de liste:
Nota. Listele pot fi imbricate, adica sa contina alte liste.
Legaturi
Referirea paginilor in interiorul unui site
Pentru a crea o legatura trebuie sa scriem urmatoarea sintaxa:
<a href="adresa url a paginii destinatie"> hot-spot</a>
Hot-spot este o secventa (un text sau o imagine) aflata in pagina sursa a carei activare determina saltul in pagina destinatie. Daca cele doua pagini (fisiere) se afla in acelasi folder, calea relativa nu mai este necesara. Modificati continutul fisierului Pagina2.html adaugand urmatorul text:
Din aceasta pagina puteti ajunge la server-ele Web ale catorva universitati din tara:
<ul>
<li><a href="https://www.univ-ovidius.ro"> Universitatea "Ovidius" Constanta </a></li>
<li> <a href="https://www.utt.ro"> Universitatea "Politehnica" Timisoara </a></li>
<li> <a href="https://www.pub.ro"> Universitatea "Politehnica" Bucuresti </a></li>
<li> <a href="https://www.utcluj.ro"> Universitatea Tehnica Cluj-Napoca </a></li>
</ul>
Exercitiu. Sa se creeze urmatoarea pagina Html memorata in fisierul PagPrincipala.html.
In momentul in care se executa un clic
pe textul "Ecuatii si inecuatii de gradul intai" se va deschide pagina
continuta in fisierul PagAlg1.html. Pentru aceasta, creati o legatura intre cele
doua pagini, in care hot spot-ul este "Ecuatii si inecuatii de gradul intai".
Exercitiu. Sa se realizeze un link intre pagina principala si fisierul Ecuatii2.pdf cu elementul de legatura "Ecuatii si inecuatii de gradul intai". Adica, atunci cand utilizatorul executa un click pe elementul de legatura sa se deschida fisierul Ecuatii2.pdf.
In general, paginile sursa si destinatie nu se afla in acelasi folder. Ne vom referi la folder-ul sursa, folder-ul ce contine fisierul sursa si folder-ul destinatie pe cel care contine fisierul destinatie.
Nota. Legaturile create pana acum realizeaza salt la inceputul paginilor destinatie.
Crearea semnelor de carte (bookmark)
Daca vrem ca saltul unei legaturi sa se faca intr-o anumita locatie al paginii destinatie, trebuie sa denumim acea locatie.
D. Un semn de carte este un nume atribuit unei locatii a unei pagini.
Pentru a crea un semn de carte trebuie sa folosim sintaxa: <a name="numeSemnCarte"> </a>
Un semn de carte se refera in pagina sursa prin numeFisier#numeSemnCarte.
Exercitiu. Sa se modifice legatura anterioara astfel incat saltul sa se realizeze inaintea textului "Sa consideram cele patru cazuri posibile:" din pagina PagAlg1.html.
Pasi:
<a href='PagAlg1.html#cazuri'> Ecuatii si inecuatii de gradul intai</a>
Culori
Identificarea culorii
Pentru a aplica o culoare intr-o pagina Web, trebuie mai intai s-o identificam. Exista doua moduri de a identifica o culoare: prin nume si prin cod (numar) hexazecimal.
Majoritatea browser-elor recunosc urmatoarele culori referite prin nume:
Black Navy Blue
White Purple Teal
Green Gray Lime
Maroon Red Aqua
Olive Yellow Fuchsia
De exemplu, culoarea de fond a paginii html poate fi modificata astfel: <body bgcolor="Yellow">
Daca vrem sa folosim o alta culoare trebuie sa o specificam prin codul sau hexazecimal. Pentru a forma o culoare, calculatorul foloseste schema RGB (Red Green Blue), adica prin combinarea a trei culori: rosu, verde si albastru. Fiecare dintre cele trei culori ia valori intre 0 si 255. De exemplu, combinatia 000000 reprezinta nonculoarea negru.
Fiecare valoare este reprezentata hexazecimal, adica este scrisa in baza 16. Sistemul de numeratie in baza 16 este:
|
Baza 10 | ||||||||||||||||
|
Baza 16 |
A |
B |
C |
D |
E |
F |
Transformarea unui numar mai mare decat 15 in baza 16 se fac prin impartiri succcesive la 16 si concatenarea resturilor obtinute.
Aplicarea culorii
Asadar, se alege culoarea dorita cu ajutorul unui editor de imagine sau cu editorul HTML-Kit care afiseaza spectrul culorii si indica codurile culorilor componente si fiecare dintre coduri se transforma in baza 16.
Culoarea scrierii textului unui heading se poate modifica utilizand atributul style al tag-ului H? Si specificand in subatributul color al acestuia. De exemplu, daca vrem ca toate textele scrise cu heading 1 sa fie scrise cu rosu atunci scriem <H1 style='color: #ff0000'>.
Culoarea de fond poate fi schimbata utilizand atributul bgcolor al tag-ului <body>.
Exercitiu. Sa se aplice culoarea de fond beige pentru pagina PagAlg1.html.
Pentru a schimba culorile la nivelul intregului text al documentului folosind urmatoarele atribute ale tag-ului body:
text pentru culoarea intregului text, mai putin a legaturilor;
link controleaza culoarea acelor legaturi care nu au fost inca accesate;
vlink controleaza culoarea acelor legaturi care au fost accesate;
alink controleaza culoarea legaturilor in momentul in care butonul mouse-ului a fost apasat cand cursorul lui se afla deasupra legaturilor dar nu a fost eliberat.
Exercitiu. Sa se aplice culoarea galbena legaturilor care nu au fost accesate.
<body bgcolor='#f5f5dc' link='#ffff00'>
Formatarea textului
Modificarea fontului
Se realizeaza cu tag-urile <font> text </font>. Tag-ul font are urmatoarele atribute:
name specifica numele font-ului ce va fi aplicat textului dintre cele 2 tag-uri.
size - dimensiunea font-ului. Valoarea variaza intre 1 si 7. Valoarea implicita este 3. Valoarea se poate specifica in functie de "distanta" relativa fata de valoarea implicita. In ultimul caz, valorile atributului size variaza intre -3 si +4.
color - culoarea in care vor fi scrise caracterele textului.
Exercitiu. Sa se aplice urmatorului text: "Valoarea absoluta a numarului" font-ul Arial de dimensiune 3, iar culoarea caracterelor va fi rosu. Dati doua solutii.
Aparitia unui text asa cum a fost scris in sursa (cu tab-urile, new line-urile inserate) se realizeaza prin incadrarea textului intre tagurile <pre> si </pre>.
Aplicarea unui stil asupra unui text
In urmatorul tabel prezentam tag-urile de stil ce pot fi aplicate asupra unui text:
|
Tag-uri de stil |
Semnificatie |
|
<b> </b> |
Bold-at |
|
<strong> </strong> |
Evidentiat (de obicei prin bold-are) |
|
<i> </i> |
Italic |
|
<em> </em> |
Evidentiat (de obicei prin inclinare) |
|
<u> </u> |
Subliniat |
|
<s> </s> |
Taiat |
Exercitiu. Sa se aplice tag-urile de stil in fisierul PagAlg1.html.
Modificarea inaltimii caracterelor unui text
|
Tag-uri |
Semnificatie |
|
<big> </big> |
Mareste inaltimea caracterelor |
|
<small> </small> |
Micsoreaza inaltimea caracterelor |
|
<sup> </sup> |
Realizeaza scrierea cu exponent |
|
<sub> </sub> |
Realizeaza scrierea cu indice |
Exercitiu. Sa se aplice tag-urile de mai sus in fisierul PagAlg1.html.
Alinierea unui text
Alinierea unui paragraf sau heading se realizeaza folosindu-se atributul align al lui <p> sau <h?>. Atributul align ia una din urmatoarele valori: center left right si justify
Exercitiu. Sa se alinieze primele 3 paragrafe ale textului la stanga si la dreapta.
Alinierea unui bloc de text oarecare se realizeaza cu tag-urile <div> bloc de text </div>. Tag-ul div are atributul align care ia una din valorile de mai sus.
Centrarea unui text oarecare se realizeaza si prin tag-urile <center> text </text>.
Exercitiu. Sa se centreze ecuatiile paragraf in pagina.
Utilizarea imaginilor
Pentru a vizualiza o imagine intr-o pagina Web ea trebuie sa fi fost memorata mai intai intr-un fisier separat memorat pe disc. Editoarele grafice (Mayura, Paint Shop Pro, Corel Draw) permit crearea fisierelor grafice de diferite formate. Browser-ele recunosc tipurile GIF (fisiere cu extensia .gif) si JPEG (fisiere cu extensia .jpeg sau .jpg).
Inserarea unei imagini
Se realizeaza cu tag-ul <img>. Acest tag are urmatoarele atribute:
src - indica URL-ul fisierului ce contine imaginea ce va fi inserata
alt - textul ce va apare in locul imaginii daca aceasta nu poate fi incarcata
align - alinierea imaginii in raport cu textul paragrafului in care este plasata. Initial, imaginea este plasata la baza textului in care imaginea este inserata (align="bottom"). Alte valori: top, middle, left si right.
Exercitiu. Sa se construiasca toate figurile fisierului PagAlg1.pdf si sa fie memorate in folder-ul Figuri al folder-ului curent. Apoi, figurile vor fi inserate in fisierul PagAlg1.html astfel incat etichetele lor vor fi bookmark-uri. In fine, vor fi create link-uri de la anumite secvente de text (FiguraI.1.) catre etichetele figurilor.
Exercitiu.
Fiecare pagina diferita de cea principala trebuie sa ofere posibilitatea de a
reveni in pagina principala. Pentru a aceasta, fisierul PagAlg1.html se va
incheia cu un link catre pagina principala: Revenire in pagina principala
<div align='right'>
<a href='PagPrincipala.html'>
<img src='Figuri//home.gif'> <u>Revenire pagina principala</u>
</a>
</div>
|
Politica de confidentialitate | Termeni si conditii de utilizare |
Vizualizari: 1052
Importanta: 
Termeni si conditii de utilizare | Contact
© SCRIGROUP 2024 . All rights reserved
