Notiuni de baza cu HTML + CSS

Acest scurt indrumar este destinat persoanelor care incep sa studieze pentru prima data CSS.

El nu ofera cunostinte adanci despre CSS. Indrumarul explica pur si simplu cum sa creezi un fisier HTML, un fisier CSS si cum sa le faci sa functioneze impreuna. Dupa ce veti citi acest articol, va veti putea continua studiul cu alte indrumare de instruire pentru a obtine informatii despre particularitatile mult mai importante ale HTML si CSS. Sau puteti trece la studiul materialului in redactoare interactive HTML sau CSS, care va vor ajuta sa creati site-uri.

PASUL 1: scris codul HTML

Pentru acest articol propun sa se utilizeze programele cele mai simple, de exemplu, Notepad Windows, TextEdit pentru Mac sau KEdit pentru KDE se potrivesc pe deplin sarcinii. Imediat ce veti intelege principiile de baza, veti putea utiliza instrumente de elaborare mai avansate, de exemplu astfel de programe comerciale precum Style Master sau DreamWeaver. Insa pentru crearea primului fisier CSS nu trebuie sa va abateti catre o multime de posibilitati largi.

Nu utilizati astfel de redactoare de texte precum Microsoft Word sau OpenOffice. Aceste programe creeaza de obicei fisiere care nu pot fi citite de browsere. Pentru fisierele HTML si CSS avem nevoie de fisiere text obisnuite fara nici un fel de format.

Primul pas consta in deschiderea unui geam gol a redactorului de texte (Notepad, TextEdit, KEdit sau oricare dintre cele pe care le preferati ) si tastarea in acesta a urmatorului text:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
 <title>My first styled page</title>
</head>

<body>

<!-- Site navigation menu -->
<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>

<!-- Main content -->
<h1>My first styled page</h1>

<p>Welcome to my styled page!

<p>It lacks images, but at least it has style.
And it has links, even if they don't go
anywhere&hellip;

<p>There should be more here, but I don't know
what yet.

<!-- Sign and date the page, it's only polite! -->
<address>Made 5 April 2004<br>
 by myself.</address>

</body>
</html>

Nu trebuie neaparat sa tastati textul, puteti pur si simplu sa copiati textul din aceasta pagina si sa dati „paste” in redactor.

(Daca utilizati TextEdit la Mackintosh, nu uitati sa-i indicati lui TextEdit, ca acesta este intr-adevar un fisier text simplu, deschizand meniul Format si alegand optiunea „Make plain text”).

Atentie! Primul rand al fisierului nostru HTML ii spune browserului despre tipul actului (DOCTYPE inseamna DOCument TYPE). IN cazul nostru este vorba de HTML versiunea 4.01.

Cuvintele intre < si > se numesc tag-uri si precum puteti observa, documentul se contine intre tag-urile <html> si </html>. Intre <head> and </head> se afla diferite informatii, care nu se reflecta in document. De exemplu, acolo se afla titlul documentului. Mai tarziu vom adauga acolo si legatura cu fisierul CSS.

Tag-ul <body> este locul continutului documentului. In principiul, tot ce se afla in interiorul acestui tag cu exceptia textului dintre , este comentariu, se va evidentia pe ecran. Comentariile sunt ignorate de catre browser.

Tagul <ul> in exemplul nostru reflecta “lista neordonata” (Unordered List), adica lista a carei elemente nu sunt numerotate. Tag-urile <li> incep „elementele listei” (List Item). Tagul <p> este „paragraf”. Iar tagul <a> - “ancora” (Anchor), cu ajutorul careia se creeaza hyperlink-urile.

Codul HTML in redactorul KEdit.

Atentie! Daca doriti sa aflati ce fel de tag-uri exista in parantezele <…>, atunci puteti studia Inceputul lucrului cu HTML. Mai intai insa sa spunem cateva cuvinte despre structura paginii noastre HTML.

Tagul „ul” este o lista care consta dintr-un link pentru fiecare element al listei. Aceasta structura ne va servi in calitate de „navigare” pe siteul nostru, legand cu noi alte pagini ale siteului nostru ipotetic. Se presupune ca toate paginile siteului nostru vor avea un meniu asemanator sau identic.
Elementele „h1” si „p” confera continutul unic fiecarei pagini, in timp ce semnatura („address”) de jos se va repeta iarasi pe toate paginile.

Observati faptul ca eu nu am inchis elementele „li” si „p”. In HTML (dar nu in XHTML), se poate omite tagurile care inchid </li> si </p>, fapt pe care l-am si facut in acest caz, pentru ca textul sa fie mai simplu. Dvs. insa le puteti adauga, in caz ca considerati acest fapt necesar.

Sa presupunem ca aceasta pagina va fi una dintre paginile unui Web site, compus din cateva pagini asemanatoare. Precum am cazut de acord, aceasta pagina va contine linkurile catre alte pagini ale siteului nostru ipotetic, continutul unic si semnatura.

Alegeti „Salvati ca…” sau “Save As…” din meniul coborator File, indicati folderul pentru salvarea fisierului (de exemplu Desktop) si salvati acest fisier ca „mypage.html”. Nu inchideti editorul de texte, vom mai avea nevoie de el.

(In cazul in care utilizati TextEdit pentru Mac OS X cu versiunea mai mica de 10.4, veti vedea optiunea “Don't append the .txt extension” in casuta de dialog “Save as". Alegeti aceasta optiune deoarece denumirea fisierului „mypage.html” deja include extensia. Versiunile mai noi ale TextEdit vor inlocui extensia .html in mod automat).

In continuare deschideti fisierul in browser. Puteti face acest lucru in felul urmator: cautati fisierul cu ajutorul managerului de fisiere (Explorer, Windows Explorer, Finder sau Konqueror) si dati click (o data sau de doua ori) pe el. In cazul in care ati procedat precum s-a aratat, numele fisierului va fi „mypage.html”. Trebuie sa se deschida fisierul in browserul instalat in mod implicit. (In caz ca nu se intampla acest lucru, deschideti browserul si trageti fisierul in casuta sa).

Precum vedeti, pagina este destul de plicticoasa...

PASUL 2: modificam culorile

Este posibil sa vedeti un oarecare text negru pe fundal alb, acest fapt depinde insa de configurarea browserului. Pentru ca pagina sa arate mai stilata, putem face foarte usor un lucru simplu, adica sa adaugam culoare. (Lasati casuta (gemuletul) browserului deschis pentru ca noi ne vom mai intoarce la ea)

Vom incepe cu stilurile, incorporate in fisierul HTML. Mai tarziu vom pune stilurile CSS si trasarea (marcarea) HTML in fisiere diferite. Pastrarea in mod separat este buna datorita faptului, ca este mai usor sa utilizezi aceleasi stiluri pentru o multime de fisiere HTML: Dvs. trebuie sa scrieti stilurile CSS doar o singura data. La acest pas insa vom lasa totul intr-un fisier.

Trebuie sa adaugam elementul <style> la fisierul HTML. Determinarea stilurilor va fi in interiorul acestui tag. Ne intoarcem la redactor si adaugam urmatoarele cinci randuri la titlul codului HTML intre tag-urile <head> si </head>. Randurile care trebuie adaugate sunt evidentiate cu rosu (de la 5 pana la 9).

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
 <title>My first styled page</title>
 <style type="text/css">
 body {
 color: purple;
 background-color: #d8da3d }
 </style>
</head>
<body>

Primul rand ii spune browserului ca acesta este tabelul cu stiluri si ca ea este scrisa la CSS (“text/css”). Cel de al doilea rand spune, ca aplicam stilul pentru elementul „body”. Cel de al treilea rand stabileste culoarea textului ca fiind purpurie, iar urmatorul stabileste culoarea fundalului ca fiind de o nuanta galben-verde.

Atentie! Tabelele stilurilor CSS se creeaza conform regulilor. Fiecare regula consta din trei parti:

selectorul (in exemplul nostru: „body”), care arata faptul in care parte a documentului sa se aplice regula;
proprietatea (in exemplul nostru proprietati sunt 'color' si 'background-color'), care arata ce anume instalam la acest element, selectat de catre selector;
si semnificatia ('purple' si '#d8da3d'), care stabileste semnificatia atributului.

Exemplul nostru arata, ca regulile pot fi combinate. Am stabilit doua proprietati, la fel le puteam seta separat:

body { color: purple }
body { background-color: #d8da3d }

insa pentru ca ambele reguli se refera la body, noi am scris “body” o singura data si am asezat proprietatile si semnificatiile impreuna. Pentru mai multe informatii despre selectoare, vizualizati capitolul 2 din Lie & Bos.

Fundalul elementului body este de asemenea fundalul intregului document. Noi nu am desemnat alte elemente (p, li, address…) ale fundalului, astfel incat implicit acestea nu in au (sau este transparent). Proprietatea 'color' stabileste culoarea textului elementului body, dar toate celelalte elemente in interiorul body mosteneste aceasta culoare, pana atunci pana cand pentru ele nu se va stabili alta sub forma de alta regula. (Vom adauga mai tarziu alte culori).

Acum salvati acest fisier (utilizati comanda “Salveaza” sau “Save” din meniul File) si comutati-va inapoi in browser. Daca veti apasa butonul “reincarca” sau „refresh”, atunci imaginea se va schimba din pagina „plictisitoare” cu alta pagina colorata (dar totusi inca monotona). In afara de linkurile de sus, tot textul trebuie sa fie purpuriu pe fundal galben-verde.

Acum browserul arata pagina careia i-am adaugat culoare.

Atentie! In CSS culorile pot fi setate in cateva moduri. Exemplul nostru arata doua dintre ele: dupa nume (“purple”) si dupa codul hexadecimal (“#d8da3d”). Exista aproximativ 140 de denumiri de culori si 16 hexadecimal de semnificatii. Adaugand atingerea stilului explicam detaliile referitoare la aceste coduri.

PASUL 3: modificam fontul

Inca un lucru pe care putem sa-l facem este diferenta de font a diferitelor elemente din pagina. Haideti sa scriem cu font „Georgia” tot textul, cu exceptia titlurilor, pe care le vom scrie cu “Helvetica.”

Pentru ca pe Web niciodata nu poti fi pe deplin sigur de faptul, care fonturi sunt instalate in calculatoarele vizitatorilor, vom adauga moduri alternative de prezentare: daca Georgia nu va fi gasit, vom utiliza Times New Roman sau Times, iar daca nici acesta nu va fi gasit, atunci browserul poate lua orice font cu marcare. In cazul in care lipseste Helvetica, putem incerca sa utilizam Geneva, Arial sau SunSans-Regular pentru ca acestea sunt foarte asemanatoare ca desen, iar daca utilizatorii nu au aceste fonturi, atunci browserul poate alege orice alt font fara marcare.

In redactorul de text adaugati urmatoarele randuri (randurile 7-8 si 11-13):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
 <title>My first styled page</title>
 <style type="text/css">
 body {
 font-family: Georgia, "Times New Roman",
 Times, serif;
color: purple;
background-color: #d8da3d }
h1 {
 font-family: Helvetica, Geneva, Arial,
 SunSans-Regular, sans-serif }
</style>
</head>
<body>

Daca veti salva din nou fisierul si veti apasa “reincarca” sau “refresh” in browser, atunci veti avea diferite fonturi pentru titluri si text.

Acum fontul titlurilor si fontul textului de baza difera.

PASUL 4: adaugam navigarea

Lista deasupra paginii HTML reprezinta navigatia pe siteu. Multe siteuri au meniul de navigare in partea de sus a paginii sa pe partile laterale ale continutului. Pagina noastra nu va fi nici ea o exceptie. Vom aseza meniul in partea stanga, pentru ca acest fapt este mai placut, decat in partea de sus.

Navigatia este deja in pagina. Este lista <ul> de sus. Linkurile nu lucreaza, pentru sa „siteul” nostru inca este format doar dintr-o singura pagina, acest fapt inca nu are importanta in acest moment. Bineintels, in cazul unui siteu adevarat nu trebuie sa existe linkuri care nu functioneaza.

Trebuie sa mutam lista in stanga si sa mutam celalalt continut putin in dreapta, pentru a crea spatiu pentru el. Proprietatile CSS pe care le vom utiliza in acest sens - 'padding-left' (pentru mutarea textului) si 'position', 'left' si 'top' (pentru mutarea meniului).

Exista si alte cai. Daca veti cauta termenii „coloana” sau “machetare” in pagina studiind CSS, veti gasi cateva modele gata de utilizare. Pentru siteul nostru insa si acesta este bun.

In casuta (gemuletul) redactorului adaugati urmatoarele randuri la fisierul HTML (randurile 7 si 12-16):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
 <title>My first styled page</title>
 <style type="text/css">
 body {
 padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
 position: absolute;
 top: 2em;
 left: 1em;
 width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
</style>
</head>
<body>

Daca veti salva din nou fisierul si il veti „reincarca” in browser, atunci lista linkurilor va aparea in partea stanga fata de textul de baza. Asta arata deja mai interesant, adevarat?

Spre deosebire de fisierul precedent, in acesta textul de baza s-a mutat in partea dreapta, iar navigatia in partea stanga.

Atentie! Proprietatea 'position: absolute' spune ca elementul ul este situat independent de orice text precedent sau care va urma acestui element, iar proprietatile 'left' si 'top' desemneaza aceasta amplasare. In cazul nostru este 2em sus si 1em de la marginea stanga a casutei.

'2em' desemneaza 2 ori pe distanta egala dimensiunii fontului curent. Adica daca meniul este reflectat cu font 12 puncte, atunci 2em va fi egal cu 24 puncte. `em` este o unitate foarte utila de masurare in CSS, pentru ca se poate adapta in mod automat fontului, utilizat de catre browser. Majoritatea browserelor au posibilitatea de modificare a dimensiunii fontului: puteti incerca sa mariti sau sa micsorati dimensiunea si veti vedea, ca meniul se va modifica in functie de dimensiunea fontului, indiferent de ce se va intampla, daca am fi aratat alineatul in pixeli.

PASUL 5: impodobim linkurile

Meniul de navigare arata in continuare ca o lista, in loc de meniu. Haideti sa-l stilizam. Vom inlatura markerii listelor si vom muta elementele in partea stranga, unde au fost markerii. La fel vom desena fiecare element din lista pe fundal alb in patratul sau negru(de ce? pur si simplu, pentru ca putem).

De asemenea nu am spus ce lucoare trebuie sa aiba linkurile, asa ca haideti sa adaugam si aceasta proprietate: albastre vor fi linkurile pe care utilizatorul inca nu le-a vizualizat, iar purpurii vor fi acelea pe care deja le-a vizitat. (gandurile 13-15 si 23-33):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
 <title>My first styled page</title>
 <style type="text/css">
 body {
 padding-left: 11em;
 font-family: Georgia, "Times New Roman",
 Times, serif;
 color: purple;
 background-color: #d8da3d }
 ul.navbar {
 list-style-type: none;
 padding: 0;
 margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
 background: white;
 margin: 0.5em 0;
 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>
[etc.]

Atentie! De obicei browserele evidentiaza hiperlinkurile cu culoare si le subliniaza. De obicei culorile sunt asemanatoare culorilor pe care le-am aratat: albastru pentru linkurile pe care utilizatorul inca nu le-a deschis (sau le-a deschis mult timp in urma), purpuriu pentru paginile pe care inca nu el-a vizualizat.

In HTML hiperlinkurile se creeaza cu tagurile <a> pentru ca pentru indicarea culorii trebuie sa cream o regula in CSS pentru “a”. Pentru a distinge linkurile vizitate si cele nevizitate, CSS ofera doua “pseudo-clase” (:link si :visited). Se numesc “pseudo-clase” pentru a face distinctia cu atributele, care se indica in HTML in mod direct, adica in cazul nostru class="navbar".

PASUL 6: adaugam linii orizontale

ПUltimul adaos in tabelul nostru al stilurilor va fi dunga orizontala pentru impartirea textului si a semnaturii in partea de jos. Utilizam proprietatea 'border-top' pentru a adauga linia intrerupta deasupra elementului <address> (randurile 34-37):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
 <title>My first styled page</title>
 <style type="text/css">
 body {
 padding-left: 11em;
 font-family: Georgia, "Times New Roman",
 Times, serif;
 color: purple;
 background-color: #d8da3d }
 ul.navbar {
 list-style-type: none;
 padding: 0;
 margin: 0;
 position: absolute;
 top: 2em;
 left: 1em;
 width: 9em }
 h1 {
 font-family: Helvetica, Geneva, Arial,
 SunSans-Regular, sans-serif }
 ul.navbar li {
 background: white;
 margin: 0.5em 0;
 padding: 0.3em;
 border-right: 1em solid black }
 ul.navbar a {
 text-decoration: none }
 a:link {
 color: blue }
 a:visited {
 color: purple }
 address {
 margin-top: 1em;
 padding-top: 1em;
 border-top: thin dotted }
</style>
</head>
<body>

Acum structurarea (perfectarea) noastra este incheiata. Hadeti sa scoatem tabelul stilurilor intr-un fisier separat, astfel incat fisierele separate sa poata utiliza acelasi tabel al stilurilor, ca si primul fisier.

PASUL 7: CSS extern

Acum avem fisierul HTML cu un tabel incorporat al stilurilor. Daca insa fisierul nostru se va mari, vom avea nevoie de mai multe pagini, care vor utiliza acelasi stil de perfectare. Exista o metoda mai buna, decat introducerea tabelului in fiecare pagina, putem scoate stilurile intr-un fisier separat, catre care vor indica toate paginile. Pentru crearea unui fisier separat a tabelului stilurilor avem nevoie un alt document de text gol. Puteti alege punctul „Nou” sau „New” din meniul “File" in redactor, pentru crearea fisierului gol. (In cazul in care utilizati TextEdit, nu uitati sa-l faceti cu cel de texte din nou, utilizand meniul Format).

Apoi taiati si introduceti tot continutul in interior <style> din HTML in aceasta noua casuta (gemulet). Nu copiati elementele trasarii (marcarii) <style> si </style>. Acestea apartin codului HTML, iar nu in CSS. In noua casuta (gemulet) Dvs. trebuie sa aveti tabelul complet al stilurilor:

body {
 padding-left: 11em;
 font-family: Georgia, "Times New Roman",
 Times, serif;
 color: purple;
 background-color: #d8da3d }
ul.navbar {
 list-style-type: none;
 padding: 0;
 margin: 0;
 position: absolute;
 top: 2em;
 left: 1em;
 width: 9em }
h1 {
 font-family: Helvetica, Geneva, Arial,
 SunSans-Regular, sans-serif }
ul.navbar li {
 background: white;
 margin: 0.5em 0;
 padding: 0.3em;
 border-right: 1em solid black }
ul.navbar a {
 text-decoration: none }
a:link {
 color: blue }
a:visited {
 color: purple }
address {
 margin-top: 1em;
 padding-top: 1em;
 border-top: thin dotted }

Alegeti “Save as…” din meniul „File", asigurati-va ca sunteti in acelasi director / folder ca si fisierul mypage.html, si pastrati tabelul stilurilor cu denumirea de “mystyle.css”.

Acum trebuie sa va intoarceti la codul HTML. Inlaturati tot continutul de la <style> pana la </style> inclusiv si inlocuiti cele inlaturate cu elementul <link> precum se arata (randul 5):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
 <title>My first styled page</title>
 <link rel="stylesheet" href="mystyle.css">
</head>
<body>
[etc.]

O astfel de constructie va spune browserului faptul, ca tabelul stilurilor se afla in fisierul sub denumirea “mystyle.css”, si pentru ca directorul nu este amintit, browserul va cauta acest fisier tot acolo unde se afla fisierul HTML.

Daca veti salva fisierul si il veti reincarca in browser, trebuie sa nu se modifice nimic: pagina va utiliza in continuare aceeasi structurare (perfectare) ca si prima data, dar de aceasta data structurarea se va pastra in fisierul extern.

Rezultatul final

Urmatorul pas consta in faptul sa asezam ambele fisiere mypage.html si mystyle.css pe siteul Dvs. (Bineinteles ca este posibil sa doriti sa le modificati putin…) Cum sa asezati fisierul pe siteu depinde de providerul Dvs. de internet.

De formare CSS Notiuni de baza cu HTML + CSS