8. Fișe de lucru

1. Culoarea de fond - a unei pagini web

<body bgcolor = culoare>.

· cel putin 16 nume de culori: aqua, black, fuchsia, gray, green lime, maroon, navy, olive, purple, red, silver, teal, white si yellow.

· Prin constructia " #rrggbb " unde r (red), g (green), sau b (blue) sunt cifre hexazecimale si pot lua valorile: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C, d, D, e, E, f, F; se pot defini astfel 65536 de culori.

Încearcă: colorează fundalul paginii în galben

<body bgcolor=yellow>

2. Titluri – indică diferite tipuri de titluri (6 mărimi)

<h1></h1>;...;<h6></h6>

Încearcă: scrie în codul sursă următoarele

<h1>Titlul cu h1</h1>

<h2>Titlul cu h2</h2>

<h3>Titlul cu h3</h3>

<h4>Titlul cu h4</h4>

<h5>Titlul cu h5</h5>

<h6>Titlul cu h6</h6>

3. Paragraf <p> ... </p>

Încearcă: scrie primul paragraf să fie numele școlii

<p> Colegiul Tehnic ”C.D. Nenițescu” Baia Mare </p>

4. Un rand nou <br>

Încearcă: pentru exercițiul anterior pune localitatea pe rândul următor

5. Linie orizontala <hr>

Încearcă: pentru exercițiul anterior pune sub Baia Mare o linie orizontală

6. Stiluri font. Bold, Italic, Underline

· - Bold (ingrosat) <b> ... </b>

· - Italic (inclinat) <i> ... </i>

· - Underline (subliniat) <u> ... </u>

Încearcă: aplicați stilul îngroșat pentru paragraful al 2-lea

Încearcă: aplicați stilul italic pentru paragraful al 3-lea

Încearcă: aplicați stilul subliniat pentru paragraful al 4lea

7. Tag-ul <font> ... </font>

Un font este caracterizat de urmatoarele atribute:

· culoare (color); <font color="culoare">text</font>

· tipul sau stilul (face); <font face="nume font"> ex. arial

marimea (size); 1, 2, 3, 4, 5, 6, 7 (+nr pentru a mari dimensiunea fontului fata de valoarea curenta, -nr. pentru a micsora dimensiunea fontului fata de valoarea curenta. <font size="+2">text </font>

· marimea in puncte tipografice (point-size);

· grosime (weight) –nr întreg

· Valorile posibile pentru acest atribut sunt 100, … 900

8. Alinierea

<div align="valoare"> ... </div>

valoare= LEFT, RIGHT si CENTER

9. Liste

9.1 -liste neordonate

Un element des folosit in formarea listelor (neordonate) este <ul>.

· <ul> este elementul de început si dupa scrierea listei se incheie cu </ul>.

· <li> ... </li> reprezintă un marcaj ca un bullet.

- Sunt 3 tipuri de marcaje: disc, circle (cerc) si square (patrat)

- Tipul de marcaj care se doreste folosit se introduce prin atributul type in eticheta <ul>

<ul type="square">

<li>List item 1 ...</li>

<li>List item 2 ...</li>

<li>List item 3 ...</li>

</ul>

9.2 -liste ordonate

Un element folosit pentru formarea listelor (ordonate) este <ol>.

· - <ol> ... </ol> este un element de numerotare. Elementele din lista sunt numerotate automat.

· - Impreuna cu <ol> se foloseste <li> ... </li>

<ol>

<li>List item 1 ...</li>

<li>List item 2 ...</li>

<li>List item 3 ...</li>

</ol>

10. Imagini

· pentru a insera o imagine intr-o pagina, <img src="../../*.extensie">

<img> si src (de la "source"=sursa).

atrtibute

· chenar in jurul imaginii border al etichetei <img>.

· dimensiuni pe orizontala si verticala: width si height.

<img src="../../images/ubm1.jpg" border="5" width="350" height="25%" align="top">>

· Alinierea - align care poate lua urmatorele valori: left, right, top, middle, bottom

O legatura catre o pagina aflata in acelasi director se formeaza cu ajutorul etichetei <a> (de la "anchor"=ancora). Pentru a preciza pagina indicata de legatura se utilizeaza un atribut al etichetei<a> numit href, care ia valoare numele fisierului HTML aflat in acelasi director. Zona activa care devina sensibila la apasarea butonului stang al mouse-ului este formata din textul cuprins intre etichetele <a>...</a>.