HTML 1

Clasa a XII-a
HTML
LIMBAJUL HTML HTML (HyperText Markup Language) este limbajul utilizat n World Wide Web pentru descrierea hipertextelor. HTML nu este un limbaj de programare propriu-zis, ci doar un limbaj de descriere, coninnd elemente ce permit construirea paginilor Web. Limbajul HTML este derivat din SGML (Standard Generalized Markup Language limbaj standard generalizat de marcare) dar este mult mai simplu fiind destinat numai paginilor web, avnd caracteristici specifice limbajelor descriptive: - documentele HTML sunt de tip text (ASCII) putnd fi create cu orice editor de texte (Notepad, Wordpad); - documentele HTML pot fi vizualizate cu diferite browser-e i sunt independente de platforma de lucru; - HTML utilizeaz pentru descrierea documentelor web tag-uri (etichete sau marcaje) specifice pentru fiecare element descris, tag-urile stabilesc att structura documentului ct i aspectul acestuia. Un tag este un identificator care furnizeaz browserului instruciuni de formatare a documentului. Etichetele HTML sunt ncadrate ntre paranteze unghiulare < >, <tag> eticheta de nceput i </tag> eticheta de sfrit. Efectul corespunztor etichetei este aplicat textului dintre eticheta de nceput i cea de sfrit. Unele elemente admit atribute ce conin informaii suplimentare despre coninutul elementelor. Atributele se precizeaz n cadrul tag-ului de nceput, se separa prin spaii i se precizeaz sub forma: atribut=valoare.
1
Clasa a XII-a
HTML
Structura unui document HTML Un document HTML este delimitat de perechea de etichete <HTML> i </HTML> i este constituit din: A. antetul documentului delimitat de tag-urile <HEAD> i </HEAD>, conine informaii generale despre document cum ar fi: titlul documentului cel care va fi afiat n bara de titlu a ferestrei browser-ului i este delimitat de tag-urile <TITLE> i </TITLE>; pentru alte informaii suplimentare se utilizeaz eticheta <META> admite atributele: o NAME conine un ir de caractere ce reprezint numele proprietii (Author, Keywords, Description) o CONTENT conine valoarea asociat proprietii respective (ntre ) corpul documentului delimitat de tag-urile <BODY> i </BODY> sau <FRAMESET> i </FRAMESET>, conine textul propriu-zis al documentului i elementele de formatare ale acestuia. Elementul BODY admite urmtoarele atribute: BACKGROUND=URL URL este un ir de caractere ce reprezint adresa Web a unei imagini care va fi utilizat de browser ca fundal (background) pentru document. BGCOLOR=culoare color stabilete culoarea fundalului documentului (BackGround Color). n HTML culorile se pot specifica n dou moduri: utiliznd denumirile predefinite, cele mai uzuale sunt: red, maroon, yellow, green, lime,
B.
2
Clasa a XII-a
HTML
teal, olive, aqua, blue, navy, purple, fuchsia, black (este culoarea implicita), gray, silver, white; utiliznd codul culorii ( #rrggbb ) dat n formatul hexazecimal RGB: rr reprezint rou (de la 00 la FF); gg reprezint verde (de la 00 la FF); bb reprezint albastru (de la 00 la FF); aceste valori reprezentnd contribuia fiecrei culori de baz la culoarea creat. TEXT=culoare stabilete culoarea textului. LINK=culoare stabilete culoarea cu care vor fi marcate n text link-urile nevizitate. VLINK=culoare stabilete culoarea cu care vor fi marcate n text link-urile vizitate. ALINK=culoare stabilete culoarea cu care va fi marcat n text link-ul activ. LANG=cod-limba lang specific limba n care este redactat documentul (pentru motoarele de cutare, sintetizatoare de voce etc.) cum ar fi: en, fr, el, ro etc. DIR=LTR RTL specific direcia de scriere a textului: LTR de la stnga la dreapta (Left To Right) sau RTL de la dreapta la stnga (Right to Left). Comentariile HTML sunt texte pe care browser-ul nu le va afia. Acestea ncep cu <! i se termin cu ->. <!Acesta este un comentariu. Browser-ul nu il vede->
Clasa a XII-a
HTML
Laborator 1 a) prima.html <HTML> <HEAD> <TITLE> Prima mea pagina Web </TITLE> <META NAME="Author" CONTENT="numele meu"> <META NAME="Description" CONTENT="Proiectarea paginilor Web"> <META NAME="Keywords" CONTENT="HTML, CSS"> </HEAD> <BODY BGCOLOR=GRAY TEXT=NAVY> <I> <B> Aceasta este prima mea pagina Web </B> </I> </BODY> </HTML> b)culori.html <HTML> <HEAD> <TITLE> Test de culoare </TITLE> </HEAD> <BODY BGCOLOR=#777777> <FONT COLOR=#000000> Test de culoare </FONT> <BR><FONT COLOR=#111111> Test de culoare </FONT>
4
Clasa a XII-a
HTML
<BR><FONT COLOR=#222222> Test de culoare </FONT> <BR><FONT COLOR=#333333> Test de culoare </FONT> <BR><FONT COLOR=#444444> Test de culoare </FONT> <BR><FONT COLOR=#555555> Test de culoare </FONT> <BR><FONT COLOR=#666666> Test de culoare </FONT> <BR><FONT COLOR=#777777> Test de culoare </FONT> <BR><FONT COLOR=#888888> Test de culoare </FONT> <BR><FONT COLOR=#999999> Test de culoare </FONT> <BR><FONT COLOR=#AAAAAA> Test de culoare </FONT> <BR><FONT COLOR=#BBBBBB> Test de culoare </FONT> <BR><FONT COLOR=#CCCCCC> Test de culoare </FONT> <BR><FONT COLOR=#DDDDDD> Test de culoare </FONT> <BR><FONT COLOR=#EEEEEE> Test de culoare </FONT> <BR><FONT COLOR=#FFFFFF> Test de culoare </FONT> </BODY> </HTML>
Clasa a XII-a
HTML
Formatarea textului Formatarea textului care apare ntr-un documente HTML se poate face: - la nivel de bloc (bloc-level) pot conine i alte elemente de formatare i ncep de la linie nou; - la nivel de caracter conin doar text sau alte elemente de formatare la nivel de caracter. Gruparea mai multor elemente HTML la nivel de bloc se realizeaz cu ajutorul tag-urilor <DIV> i </DIV>. Pentru gruparea mai multor elemente dintr-un bloc la nivel de caracter (inline) se utilizeaz tag-urile <SPAN> i </SPAN>. Formatarea paragrafelor n HTML delimitarea paragrafelor se realizeaz cu ajutorul tag-urilor <P> i </P>, eticheta de sfrit fiind opional. Tag-ul <P> admite atributele: ALIGN = LEFT RIGHT CENTER JUSTIFY TITLE LANG DIR Pentru a stabili acelai mod de grupare pentru mai multe paragrafe, trebuie s le grupm ntr-un singur bloc cu ajutorul tag-ului <DIV>. Pentru a insera n document o linie vid se utilizeaz tag-ul <BR>.
Clasa a XII-a
HTML
Utilizarea paragrafelor titlu Fiecare element structural al unui document, de obicei, este precedat de un paragraf titlu (heading). Documentele HTML pot fi structurate pe ase niveluri, n funcie de importana lor, existnd ase etichete care definesc nivelul paragrafului titlu n structura documentului: <H1>, <H2>, <H3>, <H4>, <H5>, <H6>. Etichetele de sfrit sunt obligatorii. Tag-urile pentru paragrafe admit atributele: LANG, DIR, TITLE, ALIGN. Formatarea la nivel de caracter Precizarea informaiilor referitoare la fontul utilizat de browser pentru vizualizarea textului se realizeaz cu ajutorul tag-urilor <FONT> i </FONT>. Atributele admise de eticheta <FONT> sunt: SIZE = valoare - stabilete dimensiunea caracterelor. Valoarea dimensiunii poate fi specificat: n mod absolut valori naturale ntre 1 i 7; relativ la dimensiunea curent a caracterelor cu +n sau n mai mari sau mai mici. COLOR = culoare FACE = lista_fonturi definete o list de fonturi separate prin virgul, dintre care browser-ul l va alege pe primul disponibil n ordinea preferinelor (altfel va utiliza fontul implicit). Dimensiunea implicit a fontului se poate modifica utiliznd tag-ul <BASEFONT> sub forma:
7
Clasa a XII-a
HTML
<BASEFONT SIZE=4>
Clasa a XII-a
HTML
Laborator 2
<html> <head> <title>Limbajul HTML - Generalitati</title> <meta name="Author" content="Cerasela Grigoras"> <meta name="Description" content="Manual de HTML. Generalitati"> <meta name="Keywords" content="HTML, generalitati, invata"></head> <body> <p><b>HTML</b> (<i>HyperText Markup Language</i>) este limbajul utilizat in <i>World Wide Web</i> pentru descrierea hipertextelor. <b>HTML</b> nu este un limbaj de programare propriu-zis, ci doar un limbaj de descriere, continand elemente ce permit construirea paginilor <i>Web</i>. </p> <p>Limbajul HTML este derivat din <b>SGML</b> (<i>Standard Generalized Markup Language</i> - limbaj standard generalizat de marcare) dar este mult mai simplu fiind destinat numai paginilor <i>web</i>, avand caracteristici specifice limbajelor descriptive: </p> <ul> <li>documentele <b>HTML</b> sunt de tip text (ASCII) putand fi create cu orice editor de texte (<i>Notepad, Wordpad</i>); </li> <li>documentele HTML pot fi vizualizate cu diferite browser-e si sunt independente de platforma de lucru; </li> <li>HTML utilizeaza pentru descrierea documentelor web <i>tag</i>-uri (etichete sau marcaje) specifice pentru fiecare element descris, tag-urile stabilesc atat stabilesc atat structura documentului cat si aspectul acestuia. </li> </ul> <p>Un tag este un identificator care furnizeaza browser-ului instructiuni de formatare a documentului. Etichetele <b>HTML</b> sunt incadrate intre paranteze unghiulare <b>< ></b>, <b><tag></b> - eticheta de inceput si <b></tag></b> - eticheta de sfarsit. Efectul corespunzator etichetei este aplicat textului dintre eticheta de inceput si cea de sfarsit. Unele elemente admit atribute ce contin informatii suplimentare despre continutul elementelor. Atributele se precizeaza in cadrul tag-ului de inceput, se separa prin spatii si se precizeaza sub forma: </p> <p align="center"><b>atribut=valoare</b></p>
a)
generalitati.html
Clasa a XII-a
</body> </html>
HTML
index.html
<html> <head> <title>Limbajul HTML</title> <meta name="Author" content="Cerasela Grigoras"> <meta name="Description" content="Manual de HTML"> <meta name="Keywords" content="HTML, CSS, invata"> </head> <body bgcolor="#C0C0C0" link="#006699" vlink="#0066FF" alink="#CC3399"> <h1 align="center"><a href="html_generalitati.htm"><font face="Arial" color="#003366">Limbajul HTML</font></a></h1> <hr> <h2 align="left">Structura unui document HTML</h2> <h4 align="left">Laborator 1</h4> <hr> <h2 align="left">Formatarea textului</h2> <h3 align="left">Formatarea paragrafelor</h3> <h3 align="left">Utilizarea paragrafelor titlu</h3> <h3 align="left">Formatarea la nivel de caracter</h3> <h4 align="left">Laborator 2</h4> <h3 align="left">Utilizarea seturilor de caractere</h3> <h3 align="left">Aplicarea unor efecte asupra textului</h3> <h3 align="left">Utilizarea citatelor </h3> <h3 align="left">Utilizarea indicilor si exponenetilor</h3> <h3 align="left">Utilizarea textului preformatat</h3> <h4 align="left">Laborator 3</h4> <h3 align="left">Utilizarea listelor</h3> <h4 align="left">Laborator 4</h4> <hr> <h2 align="left">Inserarea legaturilor in documente HTML</h2> <hr> <h2 align="left">Inserarea imaginilor in documente HTML</h2> </body> </html>
10
Clasa a XII-a
HTML
Utilizarea seturilor de caractere Codul ASCII s-a dovedit a fi insuficient pentru reprezentarea informaiilor pe Web. Prin urmare au fost standardizate i alte seturi de caractere. Specificarea setului de caractere utilizat de un document HTML se poate face cu ajutorul etichetei <META>. De exemplu pentru a specifica faptul c documentul utilizeaz diacritice se specific n antetul documentului urmtoarea declaraie: <meta http-equiv="Content-Language" content="ro"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> prin atributul HTTP-EQUIV se pot specifica informaii asociate cmpurilor din antetul protocolului HTTP. n cazul de mai sus valoarea asociat cmpului numit Content-Type este "text/html; charset=windows-1250" Specificarea caracterelor care nu au corespondent pe tastatur se poarte face n dou moduri: a) Prin intermediul codului numeric asociat astfel: &#D unde D reprezint codul Unicode al caracterului. Exemple: â Â î Î reprezint reprezint reprezint reprezint
11
Clasa a XII-a
HTML
b) Prin intermediul unor referine speciale, asociate unor caractere folosite frecvent. Exemple: â Â < > &amp &quot reprezint reprezint reprezint reprezint reprezint reprezint < > &
Aplicarea unor efecte asupra textului Pentru a aplica unei zone de text un anumit efect, se ncadreaz textul ntre eticheta de nceput i cea de sfrit, corespunztoare efectului respectiv. Formatarea textului se poate face la nivel fizic utiliznd urmtoarele tag-uri: <B> text </B> <I> text </I> <U> text </U> <STRIKE>text</STRIKE> <TT>text</TT>
aplic stilul bold textului. aplic stilul nclinat textului. aplic stilul subliniat textului. produce "tierea" cu o linie a textului coninut afieaz textul n fontul teletype (neproporional), nu este cunoscut de toate browserele
12
Clasa a XII-a
HTML
n HTML se pot aplica i efecte logice, n concordan cu semnificaia textului respectiv:
afieaz textul cu dimensiune mai mare dect fontul de baz afieaz textul cu dimensiune < SMALL>text</ SMALL > mai mic dect fontul de baz identific un termen de definiie i-l scrie cu caractere <DFN>text</DFN> diferite de textul nconjurtor evideniaz textul specificat, <EM>text</EM> de obicei prin scrierea italic aplic unul dintre cele ase <Hn>text</Hn> formate predefinite de antet aplic textului menionat un font similar intrrii de la <KBD>text</KBD> tastatur, deci un font neproporional aplic textului din container un font asemntor ieirii de <SAMP>text</SAMP> calculator (neproporional). produce o evideniere <STRONG>text</STRONG> pronunat a textului mut textul selectat mai jos dect linia de baza a textului precedent si aplic un font mai <SUB>text</SUB> mic (face trecerea n indice inferior) mut textul selectat mai sus dect linia de baz a textului precedent si aplic un font mai <SUP>text</SUP> mic (face trecerea n indice superior)
<BIG>text</BIG>
13
Clasa a XII-a
HTML
Formatarea la nivel de comunicare se face cu ajutorul tag-urilor: <ADDRESS [ALIGN=left| center|right]> text </ADDRESS> <CITE>text</CITE>
permite vizualizarea unei informatii de adres, uzual o adres de e-mail indic o referin, cum ar fi un nume de carte, articol, numele unui autor. Referin este difereniat fat de textul curent aplic textului un font neproporional precum cel de calculator (clasic) aplic textului un font similar ieirilor de calculator, este utilizat pentru compatibilitate cu versiuni mai vechi produce o evideniere a textului, uzual prin trecerea n italice.
<CODE>text</CODE> <LISTING>text</LISTING> <VAR>text</VAR>
Utilizarea citatelor n documente HTML Pentru inserarea de citate exist dou etichete: <BLOCKQUOTE> utilizate pentru citate lungi i <Q> utilizate pentru citate scurte care nu conin mai multe paragrafe. Ambele necesit etichet de sfrit, textul cuprins ntre cele dou etichete fiind un citat.
14
Clasa a XII-a
HTML
Utilizarea textului preformatat Prin utilizarea elementului PRE se specific browser-ului faptul c textul scris ntre eticheta de nceput i cea de sfrit este preformatat adic browser-ul va respecta ntocmai modul de spaiere, de identare, structura liniilor i dimensiunea fontului. Prin intermediul atributului WIDTH se specific numrul maxim de caractere pe linie. Laborator 3 ncadrai n documente HTML elementele prezentate mai sus i vizualizai-le n browser. <P>H<SUB>2</SUB>O <HR> <P>E=mc<SUP>2</SUP> <HR> <STRIKE>Textul este scris taiat.</STRIKE> <HR> <EM>Textul este accentuat.</EM> <HR> <PRE WIDTH=25> 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 </PRE> <HR>
15
Clasa a XII-a
HTML
<BLOCKQUOTE> <p><STRONG>CREDINŢA</STRONG> </p> <pre> Cnd teama vede zidul Credinta vede calea; Cnd teama simte bezna Credinta simte zarea; Cnd teama trege n jos Credinta n sus - mereu; Cnd teama ntreaba: "Cine? " Credinta spune: "EU!". </pre> </BLOCKQUOTE>
16
Clasa a XII-a
HTML
Utilizarea listelor Utilizarea listelor este necesar pentru prezentarea informaiilor n mod structurat. Se pot utiliza trei tipuri de liste: 1. Listele neordonate (Unordered List) sunt utilizate atunci cnd exist o legtur ntre elementele listei dar nu se impune o anumit ordine a lor. Aceste liste sunt ncadrate ntre tag-urile <UL> i </UL>, fiecare element al listei fiind precedat de tag-ul <LI> (List Item) care introduce naintea elementului o bulin. La imbricarea listelor neordonate introduse prin UL, nivelele diferite vor fi difereniate prin buline de tipuri diferite. Selectarea simbolului care preced fiecare intrare n list se realizeaz cu ajutorul atributului TYPE care poate avea valorile: disc, circle i square. Atributul COMPACT arat c distana dintre bulin i text poate fi redus (este posibil ca aceast opiune s nu funcioneze pe orice browser). 2. Listele ordonate (Ordered List) sunt utilizate atunci cnd elementele listei trebuie prezentate ntr-o anumit ordine. Aceste liste sunt ncadrate ntre tag-urile <OL> i </OL>, fiecare element al listei fiind precedat de tag-ul <LI>. Atributele acceptate de tag-ul OL sunt: - TYPE=1|a|A|i|I care determin modul de numerotare a intrrilor n list i poate avea valorile: 1 (pentru numerotare cu cifre arabe: 1, 2, 3,), a (intrrile n list vor fi precedate de literele mici ale alfabetului latin: a, b, c , ), A (intrrile n list vor fi precedate de literele mari ale alfabetului latin: A, B, C,), i (numerotarea se
17
Clasa a XII-a
HTML
face cu cifre romane mici: i, ii, iii,), I (numerotarea se face cu cifre romane mari: I, II, III,). - START=numr stabilete numrul de la care s se nceap numerotarea listei. Valoarea implicit este 1| a|A|i|I. Pentru a modifica valoarea cu care este automat numerotat a intrrii n list se include n tag-ul <LI> corespunztore intrrii respective atributul: - VALUE=numr unde numr reprezint valoarea de etichetare a intrrii n lista respectiv. 3. Listele de definiii (Definition List) sunt cele n care intrrile sunt formate din dou paragrafe: primul corespunztor termenului iar al doilea, identat, corespunztor definiiei termenului. Crearea unei astfel de liste este marcat cu tag-urile <DL> i </DL>. Prin urmare o intrare n list va avea dou componente: - termenul marcat cu tag-ul <DT> (Definition Term) care poate conine doar elemente de formatare inline. - definiia termenului marcat cu tag-ul <DD> (Definition Description) care poate conine i elemente de formatare la nivel de bloc.
18
Clasa a XII-a
HTML
Laborator 4 ncadrai n documente HTML prezentate mai sus i vizualizai-le n browser. <UL COMPACT TYPE=disk> <LI>element principal <UL COMPACT TYPE=square> <LI>element secundar <LI>element secundar <LI>element secundar </UL> <LI>element principal <LI>element principal <LI>element principal </UL> <OL COMPACT START=1 TYPE=1> <LI>primul element <UL COMPACT TYPE=square> <LI>element secundar <LI>element secundar <LI>element secundar </UL> <LI>al doilea element <LI>al treilea element <LI>al patrulea element </OL> elementele
19
Clasa a XII-a
HTML
<DL COMPACT> <DT>habaner</DT> <DD>dans popular cubanez, cu miscare moderat</DD> <DT>habitaclu</DT> <DD><OL> <LI>locas special al compasului pe o nav <LI>spatiu ntr-un avion, ntr-o main pentru echipaj, cltori etc. </OL> ..... <DT>happy-end</DT> <DD>sfrit fericit</DD> </DL>
20
Clasa a XII-a
HTML
Inserarea tabelelor in documente HTML Tabelele permit organizarea informaiilor ntr-un document HTML. Inserarea unui tabel se face prin intermediul tag-urilor <TABLE> i </TABLE>. Tag-ul TABLE admite urmtoarele atribute: SUMARRY = text specific o descriere a rolului i structurii tabelului, aceste informaii nu sunt vizualizate n pagina Web; ALIGN = LEFT RIGHT CENTER specific alinierea tabelului n document; WIDTH = valoare specific limea ntregului tabel; valoarea poate fi specificat n numr de pixeli sau n procente; HEIGHT = valoare specific nlimea ntregului tabel; valoarea poate fi specificat n numr de pixeli sau n procente; BORDER = valoare specific n numr de pixeli grosimea liniei chenarului din jurul tabel; COLS = valoare specific numrul de coloane ale tabelului; CELLSPACING = valoare specific spaiul dintre celule i spaiul dintre celule i marginea tabelului; CELLPADING = valoare specific spaiul dintre chenarul celulei i spaiul coninutul ei; valoarea poate fi specificat n numr de pixeli sau n procente; Coninutul elementului TABLE este constituit din liniile tabelului. Specificarea unei linii se realizeaz cu ajutorul elementului TR (Table Row), ntre eticheta de nceput <TR> i cea de sfrit </TR> (opional) fiind descrise celulele de pe linia respectiv.
21
Clasa a XII-a
HTML
Exemplu:
<TABLE> <TR> continutul primei linii <TR> continutul celei de a doua linii </TR> </TABLE>
Specificarea celulelor care constituie o linie se realizeaz prin intermediul elementelor TH (Table Header), pentru celulele care constituie antetul tabelului (capul de tabel), respectiv TD (Table Data) pentru celulele care conin informaiile din tabel. Elementele TH i TD admit urmtoarele atribute: ROWSPAN = numr_de_linii specific numrul de linii acoperite de celula respectiv; valoarea implicit este 1; valoarea 0 semnific faptul c aceast celul acoper toate liniile ncepnd cu cea curent; COLSPAN = numr_de_coloane specific numrul de coloane acoperite de celula respectiv; valoarea implicit este 1; valoarea 0 semnific faptul c aceast celul acoper toate coloanele ncepnd cu cea curent; WIDTH = valoare specific limea celulei n numr de pixeli; HEIGHT = valoare specific nlimea celulei n numr de pixeli;
22
Clasa a XII-a
HTML
Laborator 5
<html> <head> <meta name="Description" content="Inserarea tabelelor"> <title>Laborator 5</title> </head> <body> <table border="2" width="50%" align="center"> <tr> <th colspan="5" bgcolor="#AAFFFF"><b>ORAR</b></th> </tr> <tr> <th>Luni</th> <th>Marti</th> <th>Miercuri</th> <th>Joi</th> <th>Vineri</th> </tr> <tr> <td>Matematica</td> <td>E</td> <td>Geografie</td> <td>Desen Tehnic</td> <td rowspan="2">Informatica-TAC</td> </tr> <tr> <td>Fizica</td> <td rowspan="2">LB. Romana</td> <td>B</td> <td>D</td> </tr> <tr> <td>M</td> <td>I</td> <td>E</td> <td>B</td> </tr> <tr> <td>L</td> <td>C</td> <td>B</td> <td>I</td> <td>B</td> </tr> </table> </body> </html>
23
Clasa a XII-a
HTML
24
Clasa a XII-a
HTML
Inserarea legaturilor in documente HTML Principala caracteristic a hipertextelor o constituie utilizarea legturilor (links). Un 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. Limbajul HTML conine multiple elemente prin intermediul crora se poate crea o legtur ctre resurse Web: IMG creeaz o legtur ctre o imagine; LINK specific legturi ctre resurse utile; A creeaz o legtur ctre o resurs Web ntr-un document HTML; APPLET creeaz o legtur ctre un program executabil pe calculatorul utilizatorului. Elementul A Pentru a crea un link ntr-un document HTML se utilizeaz tag-ul A (anchor - ancor). textul scris ntre tagul de nceput <A> i cel de sfrit </A> va aprea evideniat n fereastra browser-ului: subliniat, colorat n funcie de valorile atributelor LINK, VLINK, ALINK. Atributele specifice elementului A sunt: HREF = URL specific adresa resursei la care se face legtura; NAME = ir_de_caractere asociaz un nume unic ancorei curente, astfel nct s poat constitui inta unui alt link;
25
Clasa a XII-a
HTML
TITLE = ir_de_caractere asociaz un nume resursei la care se face legtura. Browser-ul va afia titlul resursei cnd utilizatorul deplaseaz mouse-ul deasupra legturii. Exemplu: Observaii: se poate defini o ancor vid; Exemplu:
<a href="html_generalitati.htm">Limbajul HTML</a>
<a name=Inceput></a> <a href="#inceput">De la inceput</a>
pentru a specifica drept int o ancor dintr-un alt document se utilizeaz notaia: adresa#nume_ancor; Exemplu:
<a href="Linkuri.htm#element_A">Elementul A</a>
nu este permis utilizarea imbricat a legturilor; protocolul care permite trimiterea unui mesaj e-mail dintr-un program de navigare este mailto: mailto:adres-destinatar . Elementul LINK Spre deosebire de A elementul LINK poate fi plasat numai n antetul documentului (n seciunea HEAD). Elementul LINK admite aceleai atribute ca i elementul A dar nu are etichet de sfrit. Elementul LINK permite furnizarea diferitor informaii cum ar fi cele despre autor, versiunile n alte limbi ale documentului, versiuni anterioare etc.
26
Clasa a XII-a
HTML
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. <BASE HREF=URL> Url-ul trebuie s fie specificat n mod absolut (calea lung). Elementul BASE este plasat n antetul documentului i nu are tag de sfrit.
27
Clasa a XII-a
HTML
<html> <head> <title>Limbajul HTML</title> <meta name="Description" content="Index"> </head> <body bgcolor="#C0C0C0" link="#006699" vlink="#0066FF" link="#CC3399"> <h1 align="center"><a href="html_generalitati.htm"><font face="Arial" color="#003366">Limbajul HTML</font></a></h1> <hr> <h2 align="left"><a href="Structura.htm">Structura unui document HTML</a></h2> <h4 align="left"><a href="lab 1.htm">Laborator 1</a></h4> <hr> <h2 align="left"><a href="Formatare_text.htm">Formatarea textului</a></h2> <ul> <li><h3 align="left"><a href="Formatare_text.htm#format_paragraf">Formatarea paragrafelor</a></h3> </li> <li><h3 align="left"><a href="Formatare_text.htm#paragraf_titlu">Utilizarea paragrafelor titlu</a></h3></li> <li> <h3 align="left"><a href="Formatare_text.htm#format_caracter">Formatarea la nivel de caracter</a></h3></li></ul> <h3 align="left"><a href="lab 2.htm">Laborator 2</a></h3> <ul> <li><h3 align="left"><a href="Formatare_text.htm#set_caracter">Utilizarea seturilor de caractere</a></h3> </li> <li><h3 align="left"><a href="Formatare_text.htm#aplic_efect">Aplicarea unor efecte asupra textului</a></h3> </li> <li><h3 align="left"><a href="Formatare_text.htm#utiliz_citat">Utilizarea citatelor</a> </h3> </li> <li><h3 align="left"><a href="Formatare_text.htm#text_preformatat">Utilizarea textului preformatat</a></h3> </li></ul> <h4 align="left"><a href="lab 3.htm">Laborator 3</a></h4> <ul> <li><h3 align="left"><a href="Formatare_text.htm#utiliz_liste">Utilizarea listelor</a></h3> </li></ul> <h4 align="left"><a href="lab%204.htm">Laborator 4</a></h4> <hr> .. </body></html>
Laborator 6
28
Clasa a XII-a
HTML
Inserarea imaginilor in documente HTML Elementul IMG permite inserarea imaginilor, APPLET permite inserarea de applet-uri scrise n limbajul Java iar elementul OBJECT permite inserarea elementelor multimedia ntr-un document HTML. Elementul IMG Elementul IMG permite inserarea imaginilor. Acesta nu are coninut i nu admite tag de sfrit. Specificarea imaginii ce urmeaz a fi inserat se face prin intermediul atributului: SRC = URL care specific adresa fiierului care conine imaginea. Cele ma utilizate formate de imagini pentru pagini web sunt: .gif i .jpeg; ALT = text specific un text alternativ care va fi afiat n locul imaginii de browserele care nu pot vizualiza imagini; HEIGHT = dimensiune nlimea imaginii; WIDTH = dimensiune limea imaginii; Dimensiunea poate fi exprimat n numr de pixeli sau procente (referitoare la spaiul disponibil i nu la dimensiunea imaginii); ALIGN = valoare specific modul de aliniere a imaginii n raport cu textul. Valoare pote fi: TOP, MIDDLE, BOTTOM, LEFT, RIGHT;
29
Clasa a XII-a
HTML
BORDER = numar_pixeli specific grosimea chenarului n care va fi ncadrat imaginea; HSPACE = dimensiune specific spaiul inserat n stnga i n dreapta imaginii; VSPACE = dimensiune specific spaiul inserat n partea de sus i n partea de jos a imaginii. Inserarea unei legaturi pe o imagine
Prin utilizarea elementului IMG drept coninut al elementului ancor <A> se poate insera n document o legtur pe o imagine adic prin acionarea imaginii printrun clic va fi accesat resursa destinaie.
30
Clasa a XII-a
HTML
Laborator 7
a) Lab 7 end.html <html> <head> <title>The End</title> </head> <body> <p><img src="Cat1.jpg" width="475" height="356"></p> <p align="left"><b><font size="5">The End</font></b></p> </body> </html> b) Lab 7.html <html> <head> <title>Mouse</title> </head> <body> <p align="center"><a href="lab %207%20end.htm"><img border="1" src="mouseaero.jpg" width="500" height="360"></a></p> <p align="center"> </p> <p align="center"><font size="5"><b><i>Mouse-ul zburator</i></b></font></p> </body> </html> Observaie: %20 spaiu
31
Clasa a XII-a
HTML
CUPRINS
LIMBAJUL HTML..............................................................................1 Structura unui document HTML.......................................................2 Laborator 1....................................................................................4 Formatarea textului..............................................................................6 Formatarea paragrafelor.....................................................................6 Utilizarea paragrafelor titlu................................................................7 Formatarea la nivel de caracter..........................................................7 Laborator 2....................................................................................9 Utilizarea seturilor de caractere........................................................11 Aplicarea unor efecte asupra textului...............................................12 Utilizarea citatelor n documente HTML.........................................14 Utilizarea textului preformatat.........................................................15 Laborator 3..................................................................................15 Utilizarea listelor..............................................................................17 Laborator 4..................................................................................19 Inserarea tabelelor in documente HTML........................................21 Laborator 5..................................................................................23 Inserarea legaturilor in documente HTML.....................................25 Elementul A......................................................................................25 Elementul LINK...............................................................................26 Elementul BASE...............................................................................27 Laborator 6..................................................................................28 Inserarea imaginilor in documente HTML.....................................29 Elementul IMG.................................................................................29 Inserarea unei legaturi pe o imagine................................................30 Laborator 7..................................................................................31 CUPRINS.............................................................................................32
32
Clasa a XII-a
HTML
33

HTML 1

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML 1

Uploaded by

Copyright:

Available Formats

Clasa a XII-a

n HTML se pot aplica i efecte logice, n concordan cu semnificaia textului respectiv:

<CODE>text</CODE> <LISTING>text</LISTING> <VAR>text</VAR>

<a href="html_generalitati.htm">Limbajul HTML</a>

<a name=Inceput></a> <a href="#inceput">De la inceput</a>

<a href="Linkuri.htm#element_A">Elementul A</a>

You might also like