Indrumar HTML+CSS Tema de Casa

Tutorial CSS incepand cu HTML + CSS
Cuprins
• 1. Introducere in HTML
• 2. Adaugarea culorilor
• 3. Adaugarea fonturilors
• 4. Bara de navigare
• 5. Stiluri de link-uri
• 6. Linie orizontala
• 7. Stilul Extern CSS
• 8. Crearea fisierelor separate
• 9. Rezultatul final
• Lecturi viitoare
Acest tutorial se adreseaza celor care vor sa inceapa sa utilizeze formatul CSS si nu au
mai scris niciodata o pagina Web cu acest stil. Astfel vei putea invata baza HTML-ului,
pentru a fi capabil sa realizezi propriile tale pagini web.
Nu explica amanuntit formatul CSS, ci doar cum sa creezi un fisier HTML, un fisier CSS
si cum pot fi facute aceastea sa lucreze impreuna. Dupa aceea, se pot utiliza multe alte
tutoriale pentru adaugarea altor particularitati pentru fisierele HTML si CSS. Sau se pot
utiliza programe specializate de editare HTML sau CSS, care ajuta la crearea siturilor
complexe.
La sfarsitul tutorialului, veti realiza un fisier HTML, o pagina HTML ordonata si cu

culori, totul cu ajutorul limbajului CSS.
Sectiunile ce contin semnul de “atentie!” la inceput indica faptul ca acesta este un

material cu notiuni mai avansate fata de cel din restul textului.
Daca deja esti familiarizat cu XML, atunci HTML ti se va parea usor de invatat. Va
sfatuim sa nu cititi tot acest tutorial dintr-o data, ci sa petreceti un sfert sau o jumatate de
ora parcurgand cateva lectii dupa care sa reflectati asupra informatiei citite si sa apoi sa
treceti la lucru.
Pregatire pentru HTML
Crearea documentelor in HTML nu este dificila. Pentru inceput nu vei avea nevoie decat
de Notepad++ si putina dedicatie. Daca esti nou in domeniu si nu ai parcurs inca Ghidul
incepatorului, este indicat sa petreci cateva minute citindul.
Pagini Web
1
Paginile web au multe intrebuintari. Aici sunt explicate cateva dintre argumente:
• Cea mai simpla cale de a raspandii informatii pe internet

• O alta forma de a-ti amplifica afacerea
• Poti face cunoscut lumi ca ai ceva de spus intr-o pagina personala
Cuvinte de retinut
• Tag - folosit pentru a specifica regiuni ale documentului HTML, pe care le va

interpreta ulterior browser-ul. Tag-urile vor avea aceasta infatisare: <tag>
• Element - este un tag complet, avand un <tag> de deschidere si unul de inchidere
</tag>.
• Attribute - este folosit pentru a modifica valoarea unui element in HTML. De
obicei un element are mai multe atribute.
Deocamdata trebuie doar sa retii ca un tag este o comanda pe care browser-ul o

interpreteaza, ca un element este un tag complet iar un atribut personalizeaza si modifica
un element in HTML.
Step 1: Scrierea unui document HTML

Pentru acest tutorial se va utiliza doar un simplu editor de text, si anume, Notepad++.
Odata intelese principiile, se pot utiliza alte programe specializate cum ar fi Style Master,
Dreamweaver sau GoLive. Dar pentru inceput, la scrierea primei pagini in format CSS,
este bine sa nu fie distrasa atentia de prea multe particularitati.
• Deschide Notepad++ si copiaza urmatorul cod:
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE> Pagina mea WEB</TITLE>
<STYLE type="text/css">
h1 { color: red }
</STYLE>
</HEAD>
<BODY>
<H1> Pagina mea WEB </H1>
<P>Numele meu este (nume student) si sunt student al Facultatii de
Ingineria Sistemelor Biotehnice.
<P><img SRC="IMG_1420.jpg" WIDTH="300" HEIGHT="254">
</BODY>
</HTML>
Salveaza fisierul cu numele PaginaMea.html si vizualizeaza-l in Browserul de Internet.
Elemente HTML
2
Elementele de HTML au multe ranguri. Tot ceea ce se vede, paragrafurile, bannerele,
link-urile de navigare la dreapta si la stanga paginii, sunt toate elemente ale acestei
pagini.
Un element are trei parti: un tag de deschidere, continutul elementului si tag-ul de

inchidere.
1. <p> - tag-ul pentru deschiderea unui paragraf.

2. Continutul elementului - paragraful propriu-zis.
3. </p> - tag-ul de inchidere.
***Nota:
Toate paginile web vor avea cel putin elementele de baza: html, head, title si body.
<html>element...</html>
Un document HTML intotdeauna va incepe si va termina cu un tag <html> si respectiv

</html>. Aceasta este structura standard a unui HTML.
Elementul <head>
Elementul <head> este cel care urmeaza. Atata timp cand il pui intre html si body totul ar
trebuii sa fie OK. "Head" nu are nici o functie vizibila, asa ca vom discuta despre acest
aspect in tutorialele ulterioare. Totusi vreau sa mentionez ca <head> poate oferi
browserului informatii foarte utile. Se pot insera aici printre altele coduri Javascript sau
CSS.
Daca vei salva documentul si vei incerca sa dai un refresh la pagina intiala din browser
nu vei nota nici o diferenta. Ai putina rabdare, in continuare vom studia cateva elemente
vizibile.
Elementul <title>
Pentru ca totul sa iasa bine trebuie sa pui tag-ul title inauntrul celui de head. Ceea ce vei
scrie intre cele doua tag-uri title (<title> si </title>) va putea fi vizualizat ca si numele
browser-ului, de obicei in partea din stanga sus. Vei putea vede titlul dupa cum am mai
spus in partea din stanga sus la marea majoritate a browser-elor
Elementul <body>
Elementul body este cel care defineste inceperea continutului pagini propriu-zise (titluri,
paragrafuri, fotografii, muzica si orice altceva). Dupa cum poti vedea in meniul de la
stanga, vom trata pe rand toate aceste elemnte de continut.
Deocamdata tot ce trebuie sa retii este ca body incapsuleaza tot continutul paginii. Daca
ai facut totul bine, vei putea vedea prima ta pagina web. Poti pune orice nume doresti,
3
doar tine minte ca numele descriptive sunt cele mai usor de gasit ulterior. Vizualizeaza
acum toata isprava, dupa care te invit sa parcurgi urmatoarea sectiune.
Prima linie a unui fisier HTML ii spune browser-ului ce tip de HTML este
(DOCTYPE inseamna DOCument TYPE). In acest caz, acesta este un document HTML
versiunea 4.01.
• Step 1. Deschide Notepad++ si copiaza urmatorul cod:
<html>
<head>
<title>Primul meu stil de pagina</title>
</head>
<body>


<ul class="navbar">
<li><a href="index.html">Home page</a>
<li><a href="musings.html">Musings</a>
<li><a href="town.html">My town</a>
<li><a href="links.html">Links</a>
</ul>

<h1> Primul meu stil de pagina </h1>
<p> Bine ati venit pe pagina mea!
<p>Lipsesc imaginile, dar in sfarsit am un stil de pagina.

Si am si link-uri, chiar daca nu duc nicaieri deocamdata;
<p>Aici trebuie sa existe mai multe lucruri, dar deocamdata nu prea stiu
ce.


<address> 25 Aprilie 2009<br>
Realizat de mine.</address>
</body>
</html>
Salveaza fisierul cu numele PrimaPagina1.html si vizualizeaza-l in Browserul de

Internet.
Tagul <body> este locul unde se duce textul actual al documenului. In principiu, orice se
afla in interiorul acestui tag va fi afisat, exceptand textul din interiorul , care
serveste drept comentariu pentru noi insine. Browser-ul il va ignora.
In tag-urile din exemplu, <ul> introduce “Unordered List”, o lista in care itemi sunt
nenumerotati. Tag-ul <li> este inceputul listei de itemi“List Item”. Tag-ul <p> este un
4
“Paragraf”, iar <a> reprezinta o ancora “Anchor“, care este folosita pentru crearea unui
hyperlink.
HTML pune la dispozitie trei tipuri de liste. <ol> va afisa o lista ordonata in timp ce <ul>
una neordonata, iar pentru a realiza o lista de defnitii se foloseste <dl>. Foloseste
atributele type si start pentru a realiza lista cea mai potrivita cerintelor tale.
• <ul> - unsorted list, buline

• <ol> - ordered list, numere
• <dl> - definition list, lista de definitii.
HTML - Liste nenumerotate
O lista nenumerotate se creaza cu ajutorul tagului <ul>. Listele nenumerotate deasemenea

sunt de mai multe tipuri si anume, patratele, buline si cerculete.Valoarea standard redata
de majoritatea browser-elor sunt bulinele.
Lista ordonata (numerotata)
Se foloseste tag-ul <ol>pentru a incepe o lista ordonata. Prin punerea <li></li> (list item)
intre tagurile <ol> si </ol> se semnalizeaza browser-ului elementele listei.
Dupa cum se poate vedea, pagina nu este chiar aratoasa …
5
Step 2: Adaugarea culorilor
Exista trei feluri distincte de a defini o culoare. Cea mai simpla metoda este aceea de a
numi culorile (in engleza). De exemplu: black, white, red, green, si blue. Am alaturat mai
jos numele de culori care sunt suportate in HTML.
HTML - Sistemul de culori RGB
Acest cod de culori nu este recomandat, deoarece Internet Explorer este singurul Browser
care suporta valorile RGB in HTML. RGB este prescurtarea pentru: Red, Green, Blue.
Fiecare dintre aceste culori poate lua orice valoare intre 0 (nu coloreaza deloc) si 255 (in
totalitate acea culoare). Daca folosesti un browser ca re nu este Internet Explorer nu vei
avea nici un rezultat.
HTML - Sistemul de culori hexazecimal
Sistemul hexazecimal este destul de dificil la prima vedere. Cu toate aceste te asigur ca
odata cu trecerea timpului, si cu putina practica, il vei intelege pe deplin. Sistemul de
culori hexazecimal este sistemul standard pentru toate browser-ele web. Este de incredere
si este compatibil nu numai in aplicatiile web.
Sistemul hexazecimal este o reprezentare de 6 caractere de culoare. Primele doua

caractere (RR) reprezinta valoarea rosu (red), urmatoarele doua (GG) sunt verde (green),
iar ultimele doua (BB) sunt albastru (blue).
Vom incepe cu un stil de pagina incastrat in interiorul fisierului HTML. Mai tarziu, vom
realiza fisiere separate HTML si CSS. Separarea fisierelor este benefica, deoarece face
mai usoara utilizarea aceluiasi stil de pagina pentru mai multe fisiere HTML: trebuie
indicat stilul paginii doar odata. Dar pentru acest pas, vom pastra totul intr-o singura
pagina.
Trebuie sa adaugam un element <style>fisierului HTML. Stilul paginii va fi in interiorul

acestui element. Asadar, vom merge inapoi in ferestra editorului si adaugam urmatoarele
linii in elementul head al fisierului HTML. Liniile ce trebuie adaugate sunt marcate cu
rosu (liniile 4 – 8).
<html>
<head>
<title> Primul meu stil de pagina </title>
<style type="text/css">
body {
color: purple;
background-color: #d8da3d }
</style>
</head>
6
<body>
<ul class="navbar">
</ul>


ce.

</body>
</html>

Internet.
Prima linie introdusa spune ca acesta este un stil de pagina si de aceea este scris in format
CSS (“text/css”). A doua linie spune ca stilul este adaugat elementului “body”. Cea de-a
treia linie seteaza in rosu culoarea textului iar urmatoarea linie seteaza in galben-verde
culoarea fundalului.
Stilul paginilor in format CSS este realizat de reguli. Fiecare regula are trei parti:
1. selectorul (in exemplu: “body”), care spune browser-ului care parte a

documentului este afectata de regula;
2. proprietatea (in exemplu, 'color' si 'background-color' sunt ambele proprietati),
care specifica ce aspect al traseului este reglat;
3. valoarea ('purple' si '#d8da3d'), care da valoarea proprietatii stilului.
Exemplul arată că regulile pot fi combinate. S-au stabilit două proprietăţi, astfel încât am
putut s-au realiza două reguli separate:
body { color: purple }

body { background-color: #d8da3d }
7
dar din moment ce ambele reguli afectează elementul “body”, am scris "corp", doar o
dată şi am pus proprietăţile şi valorile împreună. Pentru mai multe informaţii despre
Selectoare, a se vedea capitolul 2 din Lie & Bos.
Culoarea de fond a elementului “body”va fi, de asemenea, culoarea de fond a întregului

document. Nu am dat nici unuia din celelalte elemente (p, li, adresa ...) un fundal explicit,
astfel încât, în mod implicit nu vor avea nici unul (sau: va fi transparent). Proprietatea
"culoare" seteaza culoarea textului pentru elementul “corp”, iar toate celelalte elemente
din interiorul “corpului”, moştenesc aceasta culoare, cu excepţia cazului în care în mod
explicit aceste proprietati sunt suprascrise. (Vom adăuga alte culori mai târziu.)
How one browser shows the page now that some colors have been added.
Culorile pot fi specificate în CSS în mai multe moduri. Acest exemplu arată două dintre
ele: prin nume ( "violet") şi prin codul hexazecimal ( "# d8da3d"). Există aproximativ
140 de nume de culori, in timp ce codurile hexazecimale permit peste 16 milioane de
culori. Adding a touch of style explică mai multe despre aceste coduri.
Step 3: Adaugarea fonturilor

Tag-ul <font> este folosit pentru a modifica tipul de text, marimea si culoare. Foloseste
atributele "size","color", si "face" pentru a personaliza textul. Foloseste tag-ul <basefont>
pentru a seta culoarea marimea si stilul intregului tau text. In general tag-urile "font" si
8
"basefont" nu se folosesc prea mult, in general se foloseste css-ul pentru a stabili
atributele textului.
Un alt lucru care este uşor de făcut, este de a face distincţie între fonturi pentru diferite
elemente ale paginii. Deci, hai sa setam textul cu un font "Georgia", cu excepţia celui din
rubrica H1, pe care il vom seta cu font "Helvetica".
Pe Web, nu puteţi fi niciodată sigur ce fonturi au pe computerele lor cititorii

dumneavoastră, asa ca vom adăuga unele alternative: dacă Georgia nu este disponibil,
Times New Roman sau Times, sunt, de asemenea foarte bune, şi, dacă tot nu sunt, atunci
browser-ul mai poate utiliza orice alte font cu serifs. Dacă Helvetica este absent, Geneva,
Arial şi SunSans-Regular sunt destul de asemănătoare ca formă, şi dacă nici una dintre
aceste nu lucreaza, browser-ul are posibilitatea de a alege orice alt font care este mai mic
decat serif.
In editorul de text se adauga urmatoarele linii (liniile 6-7 si 10-12):
• Step 3. Deschide Notepad++ si copiaza urmatorul cod::
<html>
<head>
body {
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
</style>
</head>
<body>
<ul class="navbar">
</ul>


9
ce.

</body>
</html>

Internet.
Dacă salvaţi fişierul din nou şi apăsaţi pe "Reîncărcare" în browser nu ar trebui să fie
acum fonturi diferite pentru rubrica H1 şi alte texte.
Acum, textul principal are un alt font fata de rubrica H1.
10
Step 4: Adaugarea unui meniu de navigare
Lista din partea de sus a paginii HTML este menita să devină un meniu de navigare.
Multe site-uri Web au un fel de meniu pe partea de sus sau pe partea laterală a paginii. Si
această pagină trebuie să aibă de asemenea unul. Noi il vom pune pe partea stanga, pentru
ca este un pic mai interesant decât cel de la început ...
Meniul este deja în pagina HTML. Acesta este lista <ul> în partea de sus. Legăturile din
aceasta lista nu funcţionează, deoarece "site-ul Web" realizat până în prezent constă doar
într-o singură pagină, dar asta nu contează acum. La un adevarat site Web, desigur, in
meniu nu ar trebui să fie orice legături.
Deci, avem nevoie sa trecem lista mai la stânga şi sa mutam restul de text un pic la
dreapta, pentru a face loc pentru meniu. Proprietăţile formatului CSS pe care le folosim
pentru aceasta sunt "padding-left" (pentru a muta corpul de text) şi "position", "left" şi
"top" (pentru a deplasa meniul). Există şi alte modalităţi de a face acest lucru. Dacă vă
uitaţi pe "coloana" sau "schema" de pe pagina Learning CSS, veţi găsi mai multe
şabloane gata de executie. Dar acesta e O.K. pentru scopurile noastre.
În fereastra editorului, adăugaţi următoarele linii la fişierul HTML (liniile 6 şi 11-15):
<html>
<head>
body {
padding-left: 11em;
Times, serif;
color: purple;
ul.navbar {
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
</style>
</head>
<body>
<ul class="navbar">
11
</ul>


ce.

Realizat de mine:</address>
</body>
</html>

Internet.
Dacă salvaţi fişierul din nou şi il reîncărcaţi în browser, ar trebui să aibă în prezent lista
de link-uri in partea stânga a textului principal. Acum deja pare mult mai interesant, nu?
Textul principal a fost mutat mai la dreapta, precum şi lista de link-uri care este în
prezent în partea stângă a acestuia, în loc de mai sus.
12
În 'position: absolute' , se spune ca elementul “ul” este poziţionat independent de
orice alt text care vine înainte sau după în document iar "left" şi "top" indică faptul că
aceea este pozitia. În acest caz, 2em de la început şi 1em din partea stângă a ferestrei.
In cazul în care meniul este afişat cu un font de 12 puncte, atunci "2em" este de 24 de
puncte. “Em”este o unitate foarte utila în CSS, deoarece aceasta poate să se adapteze în
mod automat fontului pe care cititorul se întâmplă să-l utilizeze. Majoritatea browserelor
au un meniu pentru creşterea sau reducerea dimensiunii fonturilor.
Step 5: Stiluri de linkuri

Meniul de navigare încă arată ca o listă, în loc de un meniu. Să adăugam un stil pentru
acesta. Vom elimina bulinele bin lista şi vom muta elementele în stânga, în locul în care
au fost bulinele. De asemenea, vom da fiecarui element propriul fundal alb şi un pătrat
negru. (De ce? Fără nici un motiv, doar pentru că putem.)
Nu am spus ce culori ar trebui să fie pentru link-uri, deci haideţi să adaugam, de

asemenea: albastru pentru link-urile pe care utilizatorul nu le-a văzut încă şi violet pentru
link-urile deja vizitate (liniile 12-14 şi 22-32):
• Step 5. Deschide Notepad++ si copiaza urmatorul cod::
<html>
<head>
body {
padding-left: 11em;
Times, serif;
color: purple;
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
ul.navbar li {
background: white;
margin: 0.5em 0;
13
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
</style>
</head>
<body>
<ul class="navbar">
</ul>


ce.

</body>
</html>

Internet.
Tradiţional, browser-ul arata hyperlink-urile subliniate şi cu culori. De obicei,

culorile sunt similare cu ceea ce am specificat aici: albastru pentru link-uri către pagini
care nu au fost vizitate încă (sau vizitate cu mult timp în urmă), violet pentru pagini pe
care le-aţi văzut deja.
În HTML, hiperlegăturile sunt create cu <a> elemente, astfel încât ca să se specifice tipul
de culori, avem nevoie sa adăugam o regulă de stil pentru "a". Pentru a face diferenţa
între link-urile vizitate şi nevizitate, CSS prevede două "pseudo-clase" (:link şi :visited).
Ele sunt denumite "pseudo-clase" pentru a le deosebi de clasa de atribute care apar în
HTML direct, de exemplu, de clasa = "navbar" în exemplul nostru.
14
Step 6: Adaugarea unei linii orizontale
In general se foloseste tag-ul <hr/> pentru a crea o linie orizontala. Acest tag este similar
celui de linebreak <br/>. Dupa cum se va vedea, tot ceea ce face acest tag este sa
deseneze o linie orizontala separand diferite zone ale continutului sau pur si simplu
decoreaza pagina. Folosita cu iscusinta poate da rezultate destul de neasteptate.
Rezultatul final, in plus pe stilul de pagina, este o regulă pe orizontală creata pentru a
separa textul de semnatura din partea de jos. Vom utiliza "border-top" pentru a adăuga o
linie punctată deasupra elementului <address> (liniile 33-36):
<html>
<head>
body {
15
padding-left: 11em;
Times, serif;
color: purple;
ul.navbar {
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
ul.navbar a {
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
</style>
</head>
<body>
<ul class="navbar">
</ul>


ce.

16
</body>
</html>

Internet.
Acum stilul nostru de pagina este complet. Apoi, vom vedea cum se salveaza stilul
paginii intr-un fisier separat, astfel ca si alte pagini sa foloseasca acest stil de pagina.
Step 7: Salvarea stilului paginii intr-un fisier separat

Stilurile definite în interiorul unui bloc <style>...</style> pot fi transferate într-un fişier
extern existând astfel posibilitatea asocierii lor mai multor fişiere HTML.
Pentru a utiliza un stil definit într-un fişier extern se procedează astfel:
1. Se crează un fişier care să conţină numai descrierea stilurilor şi se salvează cu extensia

".css". Conţinutul acestui fişier coincide cu conţinutul unui bloc <style>...</style>, fără
ca aceşti delimitatori să fie incluşi.
2. În fişierul HTML care utilizează stilurile definite în fişierul creat la punctul 1, se
include în blocul <head>...</head> o etichetă <link>, având trei atribute:
- atributul "rel" cu valoarea "stylesheet";

- atributul "type" cu valoarea "text/css".
- atributul "href" având ca valoare adresa URL a fişierului creat la punctul 1;
Stilurile definite din fişierul CSS extern se activează ca şi cum ar fi stiluri definite în
fişierul HTML curent într-un bloc <style>...</style>.
În prezent avem un fişier HTML cu un stil de pagina încorporat. Dar, dacă site-ul nostru a
crescut, probabil, am dori mai multe pagini cu acelaşi stil de pagina. Nu există o metodă
mai bună decât copierea paginii de stil în fiecare fisier: dacă am pune în pagina de stil
într-un fişier separat, toate paginile pot puncta aceasta.
Pentru a crea un fişier pagina de stil avem nevoie un alt fişier de text gol. Puteţi alege
"New" din meniul File din editor, pentru a crea o fereastra goala. Apoi cut şi paste tot ce
este în interiorul elementului <style> din fişierul HTML în noua fereastră. Nu copiaţi şi
<style> </ style> înşişi. Acestea aparţin HTML, nu si formatului CSS. Noua fereastra
redactata, ar trebui să aibă acum pagina de stil completa.
body {
padding-left: 11em;
Times, serif;
17
color: purple;
ul.navbar {
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
ul.navbar a {
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
h3 {text-shadow: 0.1em 0.1em #333}
div.figure1 {
float: left;
width: 35%;
border: thin silver solid;
margin: 0.5em;
padding: 0.5em;
}
div.figure p {
text-align: center;
font-style: italic;
font-size: smaller;
text-indent: 0;
}
img.scaled {
width: 100%;
}
div.banner{
margin-top: 10em;
padding-top: 10em;
font-style: italic;
font-size: smaller;
}
Salveaza fisierul cu numele StilulMeu.css.
18
Cand alegeţi "Save As ..." din meniul File, asiguraţi-vă că sunt în acelaşi director
/ folder ca PrimaPagina.html, de pagina de stil salvata ca "StilulMeu.css".
Acum du-te inapoi la fereastra cu codul HTML. Stergeţi tot de la tag-ul <style> până la
</ style> şi inclusiv eticheta şi se realizeaza înlocuirea acestuia cu un element <link>,
după cum urmează (linia 4):
Iată un fişier HTML cu un CSS extern:
<html>
<head>
<link rel="stylesheet" href="StilulMeu.css">
</head>
<body>
<ul class="navbar">
</ul>


ce.

</body>
</html>

Internet.
Aceasta va spune browser-ului ca pagina de stil, se găseşte în fişierul numit

"StilulMeu.css" şi deoarece nu este menţionat directorul, browser-ul va cauta în acelaşi
director unde a găsit de fişierul HTML.
19
Dacă salvaţi fişierul HTML şi-l reîncărcaţi în browser, nu ar trebui să vedeţi nici o
schimbare: pagina este în acelaşi stil, dar acum, stilul provine dintr-un fişier extern.
Step 8: Crearea fisierelor separate de legatura

<html>
<head>
<title> Orasul Meu</title>
</head>
<body>
<ul class="navbar">
<li><a href="PrimulMeuSite.html">Home page</a>
<li><a href="Pasiuni.html">Pasiuni</a>
<li><a href="OrasulMeu.html">Orasul meu</a>
<li><a href="Orar.html">Orar</a>
20
<li><a href="CV.pdf">Curriculum Vitae</a>
<li><a href="http://isb.pub.ro/">Links</a>
</ul>
<h1>Acesta este orasul meu</h1>
<p>Bine ati venit in Orasul Meu!
<div class="figure1">
<p><img class="scaled" src="st-tropez.jpg"
alt="St. Tropez">
<p>Saint Tropez and its fort in the evening sun<p/>
<a href="http://www.ot-saint-tropez.com/">Apasa aici</a>
</div>
</body>
</html>
Salveaza fisierul cu numele OrasulMeu.html si vizualizeaza-l in Browserul de Internet.
<html>
<head>
<title> Pasiuni</title>
</head>
<body>
<ul class="navbar">
<li><a href="CV.html">Curriculum Vitae</a>
</ul>
<div class="figure">
<p><img src="eiffel.jpg" width="116"
height="200" alt="Eiffel tower">
<p>Scale model of the Eiffel tower in Parc Mini-France</p>
<p><img src="Photo.jpg" width="300"
height="200" alt="Photo ">
<p>Scale model of the romanian village </p>
</div>
<div class="banner">
<p>
<a href="../../../"><img alt="W3C" src="../../../Icons/w3c_home"></a>
<a href="../../../Consortium/Activities">Activities</a>
<a href="../../../TR/">Tech. reports</a>
<a href="../../../Help/siteindex">Site index</a>
<a href="../../../Consortium/Translation/">Translations</a>
<a href="../../../Status">Software</a>
<a href="http://search.w3.org/">Search</a>
<em>Nearby:</em>
21
<a href="../../">Style</a>
<a href="../../CSS/">CSS</a>
<a href="./">tips & tricks</a>
</div>
</body>
</html>
Salveaza fisierul cu numele Pasiuni.html si vizualizeaza-l in Browserul de Internet.
<html>
<head>
<title>Orarul meu</title>
</head>
<body>
<ul class="navbar">
<li><a href="CV.html">Curriculum Vitae</a>
</ul>
<h1> Orar grupa 714 </h1>
<p> Acesta este programul meu de scoala!
<table width="100%" border="1">

<col align="center"></col>
<col align="center"></c>
<thead color="green">
<tr>
<th> Ora </th>
<th>Luni</th>
<th>Marti</th>
<th>Miercuri</th>
<th>Joi</th>
<th>Vineri</th>
</tr>
</thead>
<tbody color="blue" height="50px">
<tr align="center">
<td> 08.00-10.00 </td>
<td> </td>
<td> Programare </td>
<td> T. materialelor – curs </td>
<td> T.M./Programare </td>
22
<td> Desen tehnic/Programare </td>
</tr>
<tr align="center">
<td> 10.00-12.00 </td>
<td> Desen tehnic</td>
<td> Fizica </td>
<td> Analiza matematica II – curs </td>
<td> </td>
<td> Mecanica - curs </tdd>
</tr>
<tr align="center">
<td> 12.00-14.00 </td>
<td> Sport</td>
<td> </td>
<td> Fizica I – curs</td>
<td> </td>
<td> T. P. M. – curs </tdd>
</tr>
<tr align="center">
<td> 14.00-16.00 </td>
<td> T.P.M.</td>
<td> </td>
<td> </td>
<td> </td>
<td> </tdd>
</tr>
<tr align="center">
<td> 16.00-18.00 </td>
<td> </td>
<td>Analiza matematica </td>
<td> </td>
<td> Engleza </td>
<td> </tdd>
</tr>
<tr align="center">
<td> 18.00-20.00 </td>
<td> Mecanica </td>
<td> PEDAGOGIE -curs (op) </td>
<td> </td>
<td> </td>
<td> </tdd>
</tr>
</tbody>
<tfoot color="red">
<tr>
<td> </td>
<td> </td>
</tr>
</tfoot>
</table>
</body>
</html>
23
Salveaza fisierul cu numele Orar.html si vizualizeaza-l in Browserul de Internet.
Rezultatul final
Urmatorul pas este de a pune toate fisierele realizate in legatura pe site-ul Web. (Bine, dar
este posibil sa fie necesar sa le schimbati un pic mai intai…). Dar cum o veti face,
depinde de provider-ul vostru de Internet.
Step 9: Rezultatul Final

<html>
<head>
<title> Primul meu site WEB </title>
</head>
<body>
<ul class="navbar">
<li><a href="CV_meu.pdf">Curriculum Vitae</a>
24
</ul>

<p> Nu mai lipsesc imaginile, in sfarsit am un stil de pagina.

Si am si link-uri;
ce.
<P><img SRC="DSCN2824.jpg" WIDTH="300" HEIGHT="254"> </p>


<font color="WHITE"><marquee direction="left"
style="background:purple">Realizat de Andreea Cristea</marquee></font>
</address>
<form
method="get" action="mailto:adresa_mea@yahoo.com" >
<p>Nume</p>
<input type="text" name="autor" size="24" class="form" id="input1" />
<p>URL</p>
<input type="text" name="url_autor" value="http://" size="24"
class="form" id="input2" />
<p>Adresa de mail</p>
<input type="text" name="email_autor" size="24" class="form" id="input3"
/>
<p>Comentariu</p>
<textarea name="comentariu" rows="4" cols="40" class="form"
id="input4"></textarea>
<input type="hidden" name="id_site" value="646" />
<input type="submit" value="Trimite email " />
</form>
</body>
</html>
Salveaza fisierul cu numele PrimulMeuSite.html si vizualizeaza in Browser-ul de

Internet.
Lecturi viitoare
Pentru introducerea in formatul CSS, vezi chapter 2 din Lie & Bos, sau Dave Raggett's
intro to CSS.
25
BIBLIOGRAFIE SELECTIVA
1) HTML Tutorials; http://www.w3schools.com/

2) Starting with HTML + CSS; http://www.w3.org/Style/CSS/learning
3) Ghidul Incepatorului in HTML; http://www.tutorialehtml.com/
4) HTML Tutoriale; http://tutorialweb.wordpress.com/html-tutorial/
26

Indrumar HTML+CSS Tema de Casa

Î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

Indrumar HTML+CSS Tema de Casa

Încărcat de

Drepturi de autor:

Formate disponibile

Tutorial CSS incepand cu HTML + CSS

La sfarsitul tutorialului, veti realiza un fisier HTML, o pagina HTML ordonata si cu

Sectiunile ce contin semnul de “atentie!” la inceput indica faptul ca acesta este un

Pregatire pentru HTML

• Cea mai simpla cale de a raspandii informatii pe internet

• Tag - folosit pentru a specifica regiuni ale documentului HTML, pe care le va

Deocamdata trebuie doar sa retii ca un tag este o comanda pe care browser-ul o

Step 1: Scrierea unui document HTML

• Deschide Notepad++ si copiaza urmatorul cod:

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN"

Salveaza fisierul cu numele PaginaMea.html si vizualizeaza-l in Browserul de Internet.

Un element are trei parti: un tag de deschidere, continutul elementului si tag-ul de

1. <p> - tag-ul pentru deschiderea unui paragraf.

Un document HTML intotdeauna va incepe si va termina cu un tag <html> si respectiv

• Step 1. Deschide Notepad++ si copiaza urmatorul cod:

<p> Bine ati venit pe pagina mea!

<p>Lipsesc imaginile, dar in sfarsit am un stil de pagina.

Salveaza fisierul cu numele PrimaPagina1.html si vizualizeaza-l in Browserul de

• <ul> - unsorted list, buline

HTML - Liste nenumerotate

O lista nenumerotate se creaza cu ajutorul tagului <ul>. Listele nenumerotate deasemenea

Lista ordonata (numerotata)

Dupa cum se poate vedea, pagina nu este chiar aratoasa …

HTML - Sistemul de culori RGB

HTML - Sistemul de culori hexazecimal

Sistemul hexazecimal este o reprezentare de 6 caractere de culoare. Primele doua

Trebuie sa adaugam un element <style>fisierului HTML. Stilul paginii va fi in interiorul

• Step 2. Deschide Notepad++ si copiaza urmatorul cod:

<p> Bine ati venit pe pagina mea!

<p>Lipsesc imaginile, dar in sfarsit am un stil de pagina.

Salveaza fisierul cu numele PrimaPagina2.html si vizualizeaza-l in Browserul de

1. selectorul (in exemplu: “body”), care spune browser-ului care parte a

body { color: purple }

Culoarea de fond a elementului “body”va fi, de asemenea, culoarea de fond a întregului

Step 3: Adaugarea fonturilor

Pe Web, nu puteţi fi niciodată sigur ce fonturi au pe computerele lor cititorii

In editorul de text se adauga urmatoarele linii (liniile 6-7 si 10-12):

• Step 3. Deschide Notepad++ si copiaza urmatorul cod::

<p> Bine ati venit pe pagina mea!

<p>Lipsesc imaginile, dar in sfarsit am un stil de pagina.

Salveaza fisierul cu numele PrimaPagina3.html si vizualizeaza-l in Browserul de

Acum, textul principal are un alt font fata de rubrica H1.

În fereastra editorului, adăugaţi următoarele linii la fişierul HTML (liniile 6 şi 11-15):

• Step 4. Deschide Notepad++ si copiaza urmatorul cod:

<p> Bine ati venit pe pagina mea!

<p>Lipsesc imaginile, dar in sfarsit am un stil de pagina.

Salveaza fisierul cu numele PrimaPagina4.html si vizualizeaza-l in Browserul de

Step 5: Stiluri de linkuri

Nu am spus ce culori ar trebui să fie pentru link-uri, deci haideţi să adaugam, de

• Step 5. Deschide Notepad++ si copiaza urmatorul cod::

<p> Bine ati venit pe pagina mea!

<p>Lipsesc imaginile, dar in sfarsit am un stil de pagina.

Salveaza fisierul cu numele PrimaPagina5.html si vizualizeaza-l in Browserul de

Tradiţional, browser-ul arata hyperlink-urile subliniate şi cu culori. De obicei,