instruire asistatĂ de - runceanu.ro · structura unui document html 2. "construind"...

INSTRUIRE ASISTATĂ DE CALCULATOR

Universitatea “Constantin Brâncuşi” din Târgu-JiuDepartamentul pentru Pregătirea Personalului

Didactic

Lect.dr. Adrian Runceanu

[email protected]

Curs 3

Limbajul HTML(partea I)

04.12.2014 Instruire asistată de calculator 2

[email protected]

Limbajul HTML

1. Limbajul HTML. Noţiuni introductive2. Formatarea textului

2.1. Formatarea paragrafelor2.2. Utilizarea paragrafelor titlu2.3. Formatarea la nivel de caracter2.4. Aplicarea unor efecte asupra textului2.5. Grosimea unui font


[email protected]

1. Limbajul HTML

• HTML este prescurtarea de la HyperTextMarkup Language, limbajul utilizat înprotocolul World Wide Web pentrudescrierea hipertextelor.

• HTML nu este un limbaj de programarepropriu-zis, ci doar un limbaj de descriere,conţinând elemente ce permit construireapaginilor Web.


[email protected]

1. Limbajul HTML

• Documentele HTML sunt exclusiv de tiptext (ASCII); prin urmare ele pot fi editatedirect, prin comenzi specifice sistemului deoperare folosit.

• De exemplu, pentru crearea unuidocument HTML în Windows XP se poateutiliza unul din editoarele de texte incluseîn sistemul de operare (Notepad,Wordpad) sau orice alt editor de texte.


[email protected]

1. Limbajul HTML

• Documentele descrise în HTML pot fi vizualizate cuajutorul unor aplicaţii speciale denumite browser-e,care lucrează pe diferite tipuri de sisteme de calcul;– prin urmare, documentele HTML sunt independente

de platforma de lucru.

• HTML utilizează pentru descrierea documentelorWeb etichete (denumite şi tag-uri) specifice pentrufiecare element descris;– etichetele stabilesc atât structura documentului, cât şi

aspectul acestuia.


[email protected]

1. Limbajul HTML

• O etichetă (tag) este un identificator care furnizează browser-ului instrucţiuni de formatare a documentului.

• Pentru a fi delimitate, etichetele HTML suntîncadrate între paranteze unghiulare (‘<’ ‘>’).


[email protected]

1. Structura unui document html

Un document HTML este delimitat de perechea deetichetele <html> şi </html> şi este constituit din:

a) Antetul documentului, delimitat de etichetele<head> şi </head>, care conţine informaţiigenerale referitoare la document, cum ar fi titluldocumentului, autorul acestuia, versiuneadocumentului, etc.

b) Corpul documentului, care conţine textul propriu-zis al documentului, precum şi elementelespecifice de descriere a formatului acestuia.


[email protected]


• În antet este recomandat să precizaţi titluldocumentului, care va fi afişat în bara titlu aferestrei browser-ului.

• Pentru a preciza titlul documentului, care nupoate depăşi 64 de caractere, se utilizează însecţiunea antet etichetele pereche <title> şi</title>, între care se scrie titluldocumentului.


[email protected]

1. Structura unui document htmlDe exemplu:

Putem scrie aceste etichete în aplicaţia Notepad:

<html>

<head><title> Introducere in limbajul html </title>

</head>. . . .


[email protected]


Apoi putem vizualiza rezultatul în (de exemplu)browser-ul Mozilla Firefox:


[email protected]


Corpul documentului poate fi delimitat de:

etichetele <body> şi </body>

sau (în cazul în care este descrisă structura cadrelor din document) de etichetele pereche <frameset> şi </frameset>.


[email protected]


Astfel, structura generală a unui document HTMLpoate fi:

<html><head>

. . . antetul documentului . . .</head >

<body>. . . corpul documentului . . .

</body></html>


[email protected]


Exemplu:Pasul 1: Lansaţi în execuţie editorul de texte Notepad şi

introduceţi următorul text, care reprezintă descrierea în limbaj html a unei pagini Web foarte simple:

<html>

<head>

<title> Prima mea pagina Web </title>

</head>

<body bgcolor=GREEN text=BLACK>

<i> <b>

Scriu in fereastra browser-ului un text negru pe fond verde...

</i> </b>

</body>

</html>


[email protected]


Pasul 2: Salvaţi documentul cu numele Prim.html,utilizând opţiunea Save As din meniul File!

Pasul 3: Lansaţi în execuţie Internet Explorer.Vizualizaţi pagina Web creată, apelând opţiuneaOpen . . . din meniul File al ferestrei browser-ului(în fereastra de dialog care va apărea pe ecrantrebuie să specificaţi complet pagina pe care doriţisă o vizualizaţi - deci introduceţi calea, numele şiextensia fişierului ce o conţine).


[email protected]


Rezultatul este următorul:


[email protected]


Elementul <body> admite următoarele atribute

• URL este un şir de caractere ce reprezintă adresa Web a unei imagini care va fi utilizată de către browser ca fundal (background) pentru document.

• Dacă imaginea nu ocupa întreaga zonă din fereastra browser-ului destinată vizualizării paginii respective, ea va fi multiplicată, ca într-un mozaic.

BACKGROUND=URL


[email protected]


• Atributul BGCOLOR (BackGround COLOR)stabileşte culoarea fundalului (culoarea zonei dinfereastra browser-ului în care este vizualizatdocumentul).În HTML culorile se pot specifica în două moduri:

1. utilizând denumiri predefinite asociate unor culori(de exemplu RED semnificând roşu, GREEN verde, BLUE albastru, etc.);

BGCOLOR=culoare


[email protected]


2. "construind" culori proprii prin combinarea a treiculori de baza - roşu, verde şi albastru (modelul RGB).

În acest caz, specificarea unei culori se faceindicând în ordinea roşu, verde, albastru trei valorihexazecimale cuprinse între 00 şi FF, câte unapentru fiecare culoare de bază, astfel: #rrggbb.

Se poate specifica culoarea roşie fie prin denumireapredefinită: BGCOLOR=RED, fie utilizând valoareaRGB: BGCOLOR=#FF0000.


[email protected]


• Atributul TEXT stabileşte culoarea textului.

• Atributul LINK stabileşte culoarea cu care vorfi marcate în text link-urile nevizitate.

TEXT = culoare

LINK = culoare


[email protected]


• Atributul VLINK stabileşte culoarea cu care vor fi marcate în text link-urile vizitate.

• Atributul ALINK stabileşte culoarea cu care va fi marcat în text link-ul activ (cel asupra căruia este plasat cursorul mouse-ului).

VLINK = culoare

ALINK = culoare



EXERCIŢIU:

Editaţi şi vizualizaţi următoarea paginăWeb, în care acelaşi text este scris pe un fond gri în nuanţe care variază de la negrucătre alb.


[email protected]


<html>

<head> <title> Test de culoare </title> </head>

<body bgcolor=#777777>

<font COLOR=#000000> Test de culoare </font>










<font COLOR=#AAAAAA> Test de culoare </font>

<font COLOR=#BBBBBB> Test de culoare </font>

<font COLOR=#CCCCCC> Test de culoare </font>

<font COLOR=#DDDDDD> Test de culoare </font>

<font COLOR=#EEEEEE> Test de culoare </font>

<font COLOR=#FFFFFF> Test de culoare </font>

</body>

</html>


Comentarii HTMLÎn cadrul unui document este bine să inserati

comentarii, pe care browser-ul nu le va afisa, dar care pot fi utile celor care citesc sau editeaza documenrul.

Comentariile HTML incep cu <! şi se termina cu ->. De exemplu,

<! Acesta e un comentariu. Browser-ul nu îl "vede"! ->

Comentariile pot fi inserate oriunde în document!Ce se întâmplă dacă greşim ?

Nimic! Mai exact, nimic grav! Browser-ele ignorăelementele care nu respectă sintaxa HTML şi nu le interpretează.


[email protected]

Limbajul HTML




[email protected]

2. Formatarea textului

Formatarea textului care apare în corpul unui document HTML se poate face la:

1. nivel de bloc (block-level) 2. sau la nivel de caracter (text-level sau inline)Diferenţele principale dintre cele două tipuri de formatare

sunt: • elementele de formatare la nivel de bloc pot conţine alte

elemente de formatare (la nivel de bloc sau la nivel de caracter), în timp ce elementele de formatare la nivel de caracter conţin doar text sau alte elemente de formatare la nivel de caracter;

• elementele de formatare la nivel de bloc încep de obicei de la linie nouă.04.12.2014 Instruire asistată de calculator 26

[email protected]

2. Formatarea textului

• Gruparea mai multor elemente HTML la nivel debloc se realizează cu ajutorul etichetelor <div> şi</div>.

• Pentru gruparea mai multor elemente dintr-unbloc la nivel de caracter (inline) se utilizeazăperechea de etichete <span> şi </span>.

• Gruparea mai multor elemente prin <div> sau<span> va fi deosebit de utilă dacă veţi apela lafacilităţile oferite de stilurile de formatare text(stilurile CSS), deoarece veţi putea aplica acelaşistil simultan tuturor elementelor din grup.


[email protected]

Limbajul HTML

1. Limbajul HTML. Noţiuni introductive.2. Formatarea textului



[email protected]

2.1.Formatarea paragrafelor• În tehnoredactare, prin paragraf se înţelege o zonă

de text cuprinsă între două caractere de trecere la linie noua denumite NewLine sau Enter.

• În HTML, delimitarea paragrafelor se realizează cu ajutorul etichetei <p>, eticheta de sfârşit </p> fiind opţională.Descriere:

Efect:

<p> Paragraful 1 </p><p> Paragraful 2 </p>. . .

Paragraful 1Paragraful 2. . .


[email protected]

2.1.Formatarea paragrafelor

Cel mai utilizat atribut admis de eticheta<p> este align, care stabileşte modul dealiniere stânga - dreapta a textuluiparagrafului.

align = LEFT | CENTER | RIGHT | JUSTIFY


[email protected]


Se observă că atributul align admite patru valoripredefinite:LEFT - textul este aliniat la marginea din stângaRIGHT - textul este aliniat la marginea din dreaptaCENTER - textul este centrat (plasat la egală distanţă demarginea din stânga şi cea din dreapta)JUSTIFY - textul este aliniat şi la stânga şi la dreapta (prinmărirea spaţiului între cuvinte)

Valoarea implicită a modului de aliniere a textuluidepinde de direcţia acestuia:

dacă textul este scris de la stânga la dreapta, valoareaimplicită a modului de aliniere este LEFT

dacă textul este scris de la dreapta la stânga, valoareaimplicită a modului de aliniere este RIGHT


[email protected]

2.1.Formatarea paragrafelorExemplu:Descriere:

<p align=CENTER> Alinierea paragrafelor </p><p align=LEFT> Primul paragraf este aliniat la stânga </p><p align=RIGHT> Al doilea paragraf este aliniat la dreapta</p><p align=JUSTIFY> Al treilea paragraf este aliniat la stânga şila dreapta, prin mărirea spatiilor dintre cuvintele de pe aceeaşilinie. </p><p> Ultimul paragraf utilizează modul implicit de aliniere - încazul nostru stânga, deoarece direcţia textului este LTR. </p>


[email protected]


Efect:

Alinierea paragrafelorPrimul paragraf este aliniat la stânga

Al doilea paragraf este aliniat la dreaptaAl treilea paragraf este aliniat la stânga şi la dreapta,prin mărirea spatiilor dintre cuvintele de pe aceeaşilinie.Ultimul paragraf utilizează modul implicit de aliniere -în cazul nostru Stânga, deoarece direcţia textului esteLTR.


[email protected]


Pentru a stabili acelaşi mod de aliniere pentru mai multe paragrafe, trebuie să le grupăm într-un singur bloc, cu ajutorul etichetei <div>:

<div align=”RIGHT”><p> . . . Primul paragraf . . . </p><p> . . . al doilea paragraf . . . </p><p> . . . al treilea paragraf . . . </p>

</div>


[email protected]


Observatie:• Nu utilizaţi etichete <p> </p> fără conţinut,

deoarece majoritatea browser-elor le ignoră.

• Dacă doriţi să inseraţi într-un documentHTML o linie vidă, utilizaţi eticheta <br/>.

• Aceasta va genera un marcaj de sfârşit delinie (caracterele ASCII Carriage Return / LineFeed).


[email protected]

Limbajul HTML




[email protected]

2.2. Utilizarea paragrafelor titlu

Documentele HTML pot fi structurate pe şase niveluri, existând şase etichete care definesc nivelul paragrafului titlu în structura documentului:

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>.Etichetele de sfârşit sunt obligatorii.• Nivelul delimitat de etichetele <h1> şi </h1> este cel

mai important, iar nivelul delimitat de etichetele <h6> şi </h6> cel mai puţin important.

• Browser-ul vizualizează de obicei paragrafele titlu mai importante cu litere mai mari decât cele mai puţin importante.


[email protected]

2.2. Utilizarea paragrafelor titluExemplu

<html><head> <title> Titlu </title> </head>

<body><h1> Internet si retele de calculatoare </h1><p> În acest document discutam despre INTERNET</p><h2> Retele de calculatoare </h2><p> În aceasta secţiune analizam principalele tipuri de retele </p><h3> Retea de tip BUS </h3><p> Retea de tip TOKEN-RING</p><h4> Retea de tip magistrala </h4><p> Protocol TCP/IP </p><h5> Configurarea modem-ului</h5><p> Conectarea la distanta ca terminal </p><h6> Aplicatia TELNET</h6><p> Limbajul html </p><p> . . . </p></body></html>


[email protected]

2.2. Utilizarea paragrafelor titlu

Efect:

Internet si retele de calculatoare

În acest document discutam despre INTERNETRetele de calculatoare

În aceasta sectiune analizam principalele tipuri de reteleRetea de tip BUS

Retea de tip TOKEN-RINGRetea de tip magistrala

Protocol TCP/IP

Configurarea modem-ului

Conectarea la distanta ca terminal

Aplicatia TELNET

Limbajul html

. . .

h1

h6


[email protected]

Limbajul HTML




[email protected]

2.3. Formatarea la nivel de caracter

Un font este caracterizat de urmatoarele atribute:

culoare (stabilita prin atributul color)

tipul sau stilul (stabilit prin atributul face)

marimea (definita prin atributul size)

marimea in puncte tipografice (stabilita prin

atributul point-size)

grosime (definita prin atributul weight)

Toate aceste atribute apartin etichetei, care permite

inserarea de blocuri de texte personalizate.


[email protected]


Precizarea informaţiilor referitoare la fontulutilizat de browser pentru vizualizareatextului se realizează cu ajutorul etichetelorpereche <font> şi </font>.

Dacă în document nu sunt precizate nici unfel de informaţii referitoare la font, browser-ul va utiliza fontul său implicit.


[email protected]

2.3. Formatarea la nivel de caracterAtributele admise de eticheta <font> sunt:

stabileşte dimensiunea caracterelor. • Valoarea dimensiunii fontului poate fi specificată:

– în mod absolut (un număr natural cuprins între 1 şi 7) – sau relativ la dimensiunea curentă a caracterelor:

• dacă valoarea este +n, caracterele vor fi cu n mărimi mai mari

• dacă valoarea este -n, caracterele vor fi cu n mărimi mai mici

• Dimensiunea efectivă cu care sunt vizualizate caracterele depinde de browser.

SIZE = valoare


[email protected]


stabileşte culoarea textului.

• defineşte o listă de fonturi separate prin virgulă, dintre care browser-ul îl va alege pe primul disponibil în ordinea preferinţelor.

• Dacă nici unul din fonturile din listă nu este instalat pe calculatorul utilizatorului, browser-ul va utiliza fontul implicit.

COLOR = culoare

FACE = listă_fonturi


[email protected]


<p align=center> Text de diferite dimensiuni cu fontul COURIER NEW </p><p> <font SIZE=1 FACE=COURIER NEW> font COURIER NEW cu dimensiune 1 </font></p><p> <font SIZE=2 FACE=COURIER NEW> font COURIER NEW cu dimensiune 2 </font></p><p> <font SIZE=3 FACE=COURIER NEW> font COURIER NEW cu dimensiune 3 </font></p><p> <font SIZE=4 FACE=COURIER NEW> font COURIER NEW cu dimensiune 4 </font></p><p> <font SIZE=5 FACE=COURIER NEW> font COURIER NEW cu dimensiune 5 </font></p><p> <font SIZE=6 FACE=COURIER NEW> font COURIER NEW cu dimensiune 6 </font></p><p> <font SIZE=7 FACE=COURIER NEW> font COURIER NEW cu dimensiune 7 </font></p><p> <font FACE=COURIER NEW> font COURIER NEW cu dimensiune implicita </font></p><p> <font SIZE=+2 FACE=COURIER NEW> font COURIER NEW cu dimensiune cu 2 marimi maimare decat dimensiunea implicita </font></p><p align=CENTER> Text de diferite dimensiuni cu fontul Arial </font></p><p> <font SIZE=3 FACE=Arial> font Arial cu dimensiune 3 </font></p><p> <font SIZE=1 FACE=Arial> font Arial cu dimensiune 1 </font></p><p> <font FACE=Arial> font Arial cu dimensiune implicita </font></p><p> <font SIZE=-2 FACE=Arial> font Arial cu dimensiune cu doua marimi mai mica decatdimensiunea implicita </font></p>


[email protected]

Limbajul HTML




[email protected]

2.4. Aplicarea unor efecte asupra textului

Pentru a aplica unei zone un anumit efect, se incadreazatextul între eticheta de început şi cea de sfârşit, corespunzatoare efectului respectiv.

Cele mai utilizate efecte ce se pot aplica asupta textului înHTML sunt:

<I> Textul este scris cursiv </I>

<U> Textul este scris subliniat </U>

<B> Textul este scris ingrosat </B>

<BIG> Textul este scris mai mare </BIG>

<SMALL> Textul este scris mai mic </SMALL>

<STRIKE> Textul este scris taiat </STRIKE>04.12.2014 Instruire asistată de calculator 47

[email protected]

Limbajul HTML




[email protected]

2.5. Grosimea unui font

Grosimea unui caracter poate fi definita cu ajutorul atributului weight al etichetei.

Valorile posibile pentru acest atribut sunt 100, 200, 300, 400, 500, 600, 700, 800 si 900 (100 pentru fontul cel mai subtire si 900 pentru cel mai gros).

<html><head>

<title> Grosimea fontului</title></head>

<body>Aceste linie este scrisa cu caractere normale. <br/><font weight="100">fonturi de grosime 100.</font> <br/><font weight="500">fonturi de grosime 500.</font> <br/><font weight="900">fonturi de grosime 900.</font>

</body></html>


[email protected]

Întrebări?


instruire asistatĂ de - runceanu.ro · structura unui document html 2. "construind"...

Documents