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>.