L2 - Teme

Servicii Internet www.euroqual.pub.
ro
Teme
1. Folosind orice editor de texte (Notepad de exemplu), creați un fișier pe care îl veți salva sub numele
lucrarea2.html în folder-ul alocat stației unde lucrați. Transferați în acest fișier (prin Copy & Paste)
codul HTML de mai jos:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
2. Stabiliți pentru pagină titlul "Lucrarea 2 - HTML" (marcajul <title>).

R:
<title>Lucrarea 2 - HTML</title>
3. Folosind marcajele pentru Headings (titluri și subtitluri), introduceți:

- titlul lucrării, "Aplicatii in limbajul HTML" (marcajul <h1>);
- subtitlurile "Formatare text", "Imagini", "Legături", "Simboluri", "Tabele" (marcajul
<h2>), care vor reprezenta cele 5 capitole ale paginii.
R:
<h1>Aplicatii in limbajul HTML</h1>
<h2>Formatare text</h2>
<h2>Imagini</h2>
<h2>Legaturi</h2>
<h2>Simboluri</h2>
<h2>Tabele</h2>
4. În Capitolul "Formatare text":
4.1. Introduceți textul "Liste:" urmat de 2 liste, una ordonată (marcajul <ol>) și una neordonată
(marcajul <ul>), sub forma:
1. Element 1
2. Element 2
 Element 2.1
 Element 2.2
 Element 2.3
3. Element 3
Alegeți modul de numerotare pentru prima listă sub forma: a, b, c (în loc de 1, 2, 3), iar pentru a doua
conform modelului (disc).
R:
Liste:
<ol>
<li>Element 1</li>
<li>Element 2
<ul>
<li>Element 2.1</li>
1
Servicii Internet www.euroqual.pub.ro
</ul>
</li>
<li>Element 3</li>
</ol>
Pentru schimbarea modului de numerotare se folosește <ol type="a"> în locul listei ordonate implicite
și <ul type= "disc"> pentru lista neordonată.
4.2. Introduceți următoarele texte și formatați-le conform modelului (îngroșat - marcajul <b>, înclinat
- marcajul <i>, subliniat - marcajul <u>, exponent - marcajul <sup> sau indice - marcajul <sub>):
Caractere ingrosate Caractere inclinate Caractere subliniate Caractere subliniate si inclinate
Caractere inclinate si ingrosate Caractere scrise la exponent si la indice
R:
<b>Caractere ingrosate</b> <i>Caractere inclinate</i> <u>Caractere subliniate <i>Caractere
subliniate si inclinate</i></u> <i><b>Caractere inclinate si ingrosate</b></i> Caractere scrise la
<sup>exponent</sup> si la <sub>indice</sub>
4.3. Folosiți marcajul <br> (Break) pentru a introduce întreruperi de linie în textul de mai sus (fiecare
stil va începe pe linie nouă). Folosiți apoi marcajul <p> (Paragraph) pentru ca ultimul rând din textul
de mai sus să fie aliniat la centrul paginii.
R:
<b>Caractere ingrosate</b><br>
<i>Caractere inclinate</i><br>
<u>Caractere subliniate</u><br>
<u><i>Caractere subliniate si inclinate</i></u><br>
<i><b>Caractere inclinate si ingrosate</b></i>
<p align="center">Caractere scrise la <sup>exponent</sup> si la <sub>indice</sub></p>
4.4. Modificați fontul aplicat textului de mai jos (fiecare nume de font să fie scris cu fontul
corespunzător), folosind marcajul <font> și atributul face.
Arial Times New Roman C o u r i e r Verdana Tahoma
R:
<font face="Arial">Arial</font> <font face="Times New Roman">Times New Roman</font>
<font face="Courier"> Courier</font> <font face="Verdana">Verdana</font> <font
face="Tahoma">Tahoma</font>
4.5. Modificați dimensiunile textului de mai sus astfel: "Arial" -> dimensiune 1; "Times New Roman"
-> dimensiune 3; "Courier" -> dimensiune 4; "Verdana" -> dimensiune 5; "Tahoma" -> dimensiune
7, folosind marcajul <font> și atributul size.

R:
<p><font face="Arial" size="1">Arial</font> <font face="Times New Roman" size="3">Times
New Roman</font> <font face="Courier" size="4">Courier</font> <font face="Verdana"
size="5">Verdana</font> <font face= "Tahoma" size="7">Tahoma</font></p>
4.6. Modificați culorile textului de mai sus astfel: "Arial" -> roșu (Red); "Times New Roman" ->
verde (Green); "Courier" -> albastru (Blue); "Verdana" -> maro (Maroon sau #800000); "Tahoma" -
> orice altă culoare la alegere (de exemplu, culoarea dată de codul #ABCDEF), folosind marcajul
<font> și atributul color (vedeți Anexa 1. Codul culorilor, pag. 17 din L2 - Limbajul HTML.pdf).
2

R:
<font face="Arial" size="1" color="red">Arial</font> <font face="Times New Roman" size="3"
color="green"> Times New Roman</font> <font face="Courier" size="4"
color="blue">Courier</font> <font face="Verdana" size="5" color="#800000">Verdana</font>
<font face="Tahoma" size="7" color="#ABCDEF">Tahoma</font>
4.7. Schimbați fundalul paginii: întâi aplicați culoarea Silver (cod #C0C0C0), apoi imaginea din
fișierul fundal.gif. Căutați în Internet o imagine de fundal și inserați pe fundal această imagine
folosind adresa sa URL. Ce protocol este folosit pentru accesarea acestei resurse online?
R:
În marcajul <body> de la începutul fișierului (marcajul <body> există o singură dată într-un document
HTML) se adaugă atributul bgcolor pentru a schimba culoarea de fundal, respectiv atributul
background pentru a aplica o imagine pe fundal:
<body bgcolor="#C0C0C0">
<body background="fundal.gif">
Un posibil exemplu pentru o imagine online:
<body background="https://image.freepik.com/free-vector/abstract-background-with-a-watercolor-
texture_1048-2144.jpg">
Protocolul folosit în acest caz pentru accesarea imaginii este HTTPS (Hypertext Transfer Protocol
Secure).
4.8. Adăugați la sfârșitul textului de la punctul 4.6. o linie orizontală (marcajul <hr> - Horizontal
Rule) ca separator vizual între capitole. Opțional puteți folosi atributele size sau color pentru a
modifica grosimea, respectiv culoarea liniei.
R:
<hr size="1" color="#0000FF">
5. În Capitolul "Imagini":
5.1. Folosind marcajul <img>, inserați în pagină imaginea "windowsxp.jpg". Adăugați un chenar de
grosime 3 pixeli în jurul imaginii (marcajul <img>, atributul border). Ce dimensiuni are imaginea
folosită (lățime x înălțime)?
R:
<img src="windowsxp.jpg" border="3">
Click dreapta pe imagine și din meniul contextual se alege View Image Info (Firefox) / Inspect
element (Google Chrome) / Properties (Internet Explorer). Imaginea are dimensiunile de 250x150 px.
5.2. Stabiliți pentru imagine succesiv lățimea de 125 pixeli și înălțimea 50 pixeli (marcajul <img>,
atributele width, height). Folosiți apoi simultan cele 2 atribute. Observații.
R:
<img src="windowsxp.jpg" width="125">
<img src="windowsxp.jpg" height="50">
<img src="windowsxp.jpg" width="125" height="50">
În ultimul caz, când se folosesc simultan cele 2 atribute, se observă deformarea imaginii. Pentru
păstrarea proporțiilor fie se folosește doar un atribut (width sau height), fie ambele cu o
redimensionare proporționată (de exemplu, width="50" și height="30").
3
6. În Capitolul "Legături":
6.1. Creați legături (hyperlinks) către:

- o pagină Web locală, din același folder unde este salvată pagina curentă: "Pagina 1"
(pag1.html);
- o pagină Web locală, dintr-un subfolder al folderului unde este salvată pagina curentă:
"Pagina 2" (subdir/pag2.html);
- un alt tip de fișier: "Imagine" (windowsxp.jpg), "Fisier text" (subdir/text.txt), "Fisier
PDF" (PDF.pdf);
- pagina de start a unui site, care să se deschidă într-un nou tab al browserului (o nouă
fereastră): "Universitatea Politehnica din Bucuresti" (www.pub.ro);
- o pagină din structura unui site, care să se deschidă într-un nou tab al browserului (o
nouă fereastră): "Studenti anul 1" (www.electronica.pub.ro/index.php/studenti/anul-i);
- o adresă e-mail: "Contact" (user@example.com).
R:
<a href="pag1.html">Pagina 1</a>
<a href="subdir/pag2.html">Pagina 2</a>
<a href="windowsxp.jpg">Imagine</a>
<a href="subdir/text.txt">Fisier text</a>
<a href="PDF.pdf">Fisier PDF</a>
<a href="http://www.pub.ro" target="_blank">Universitatea Politehnica din Bucuresti</a>
<a href="http://www.electronica.pub.ro/index.php/studenti/anul-i" target="_blank">Studenti anul
I</a>
<a href="mailto:user@example.com">Contact</a>
6.2. Stabiliți următoarele culori: TEAL (cod #008080) pentru toate link-urile din această pagină, RED
(cod #FF0000) pentru linkurile vizitate și BLUE (cod #0000FF) pentru linkurile active.
R:
În <body> se adaugă atributele link, vlink, alink:
<body link="teal" vlink="red" alink="#0000FF">
7. În Capitolul "Simboluri": ținând cont de modul de inserare a unor caractere speciale și simboluri
în codul HTML (vedeți Anexa 2. Seturi de caractere, pag. 21 din L2 - Limbajul HTML.pdf),
introduceți următoarele 3 rânduri:
Textul "<marcaj>" poate fi afisat daca se foloseste sintaxa <marcaj>.
1 £ = 1.44 € = 195 ¥
În acest text se afișează diacritice.
R:
Textul "<marcaj>" poate fi afisat daca se foloseste sintaxa <marcaj>.
Rândul 2 se poate transfera prin Copy & Paste în Notepad sau se pot introduce expresiile:
1 £ = 1.44 € = 195 ¥
Pentru a scrie al 3-lea rând se poate folosi:
În acest text se afișează diacritice.
Browserele moderne identifică automat tipul de codare a paginii, însă pentru versiunile mai vechi se
declară în zona <head> setul de caractere folosit:
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
8. În Capitolul "Tabele":
8.1. Folosind marcajele și atributele specifice, creați următorul tabel (lățime 500 pixeli). Aliniați
tabelul la centrul paginii și textul față de marginile celulelor, atât pe orizontală, cât și pe verticală.
Alegeți culorile pentru textul Celula 1 și fundalul celulei 2.
4
Celula 1
Celula 2
Celula 4 Celula 5 Celula 3
R:
<table border="1" cellspacing="1" cellpadding="3" align="center" width="500">
<tr>
<td colspan="3" align="center"><font color="#FF0000">Celula 1</font></td>
</tr>
<tr>
<td colspan="2" bgcolor="#FFFF00" align="right">Celula 2</td>
<td rowspan="2" align="center" valign="bottom">Celula 3</td>
</tr>
<tr>
<td>Celula 4</td>
<td>Celula 5</td>
</tr>
</table>
8.2. Adăugați o nouă linie la sfârșitul tabelului, care să conțină 3 celule.

R:
Înainte de marcajul </table> se adaugă:
<tr>
<td>Celula 6</td>
<td>Celula 7</td>
<td>Celula 8</td>
</tr>
8.3. Inserați în celula 6 imaginea windowsxp.jpg (presupunând că se află în același folder cu pagina
salvată) ca hyperlink către ea însăși (în momentul în care se dă click pe imagine, browserul să afișeze
această imagine, windowsxp.jpg).
R:
<td>Celula 6 <a href="windowsxp.jpg"><img src="windowsxp.jpg"></a></td>
9. Creați Cuprinsul paginii Web astfel: la începutul paginii, după titlul "Aplicatii in limbajul HTML",
introduceți pe 5 rânduri succesive textele "Capitolul 1", "Capitolul 2", "Capitolul 3", "Capitolul 4",
"Capitolul 5". Creați hyperlink-uri pe aceste capitole astfel încât la click pe "Capitolul 1", browserul
să "sară" la capitolul "Formatare text", "Capitolul 2" să producă un salt spre capitolul "Imagini" etc.
R:
La începutul fiecărui capitol (există în pagină 5 capitole/subtitluri, vedeți punctul 3) se introduc
etichete sub forma:
<a name="cap1"><h2>Formatare text</h2></a>
<a name="cap2"><h2>Imagini</h2></a>
<a name="cap3"><h2>Legaturi</h2></a>
<a name="cap4"><h2>Simboluri</h2></a>
<a name="cap5"><h2>Tabele</h2></a>
Cuprinsul se realizează introducând după titlul "Aplicatii in limbajul HTML", următoarele expresii:
<a href="#cap1">Capitolul 1</a><br>

L2 - Teme

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

L2 - Teme

Încărcat de

Drepturi de autor:

Formate disponibile

Servicii Internet www.euroqual.pub.

2. Stabiliți pentru pagină titlul "Lucrarea 2 - HTML" (marcajul <title>).

3. Folosind marcajele pentru Headings (titluri și subtitluri), introduceți:

4. În Capitolul "Formatare text":

Arial Times New Roman C o u r i e r Verdana Tahoma

Arial Times New Roman C o u r i e r Verdana Tahoma

6.1. Creați legături (hyperlinks) către:

8.2. Adăugați o nouă linie la sfârșitul tabelului, care să conțină 3 celule.

S-ar putea să vă placă și