Website = colectie de pagini web, legate intre ele prin hiperlink-uri (site-ul se lanseaza
cu pagina de start, index.html)
Pentru realizarea unui website bazat pe HTML si CSS (Cascading Style Sheets), se creaza
o structura arborescenta de directoare care vor contine resursele site-ului (imagini,
fisiere auxiliare txt, pdf etc.) In directorul radacina al site-ului se vor salva index.html,
style.css si celelalte pagini web care formeaza site-ul.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Numele paginii care va apare in tab-ul browser-ului</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
......
</body>
</html>
Formatarea caracterelor
<FRAMESET>
Definirea redactarii paginii
</FRAMESET>
COLS=x Numarul si marimea relativa a coloanelor
ROWS=x Numarul si marimea relativa a liniilor
Specifica starea "on" (activa) sau "off" (inactiva) pentru
BORDER=x
chenarul cadrului FRAMESET (1 sau 0)
FRAMEBORDER = x Specifica marimea chenarului
FRAMESPACING = x Marimea spatiului dintre doua cadre adiacente
<FRAME> Definitia unui anumit cadru
SRC=url URL-ul sursa pentru cadru
Numele cadrului (utilizat impreuna cu TARGET=nume ca
NAME=nume
parte componenta a marcajului de tip ancora <a>
Defineste optiunea barei de derulare.Valori posibile:
SCROLLING=scrl
on(activa), off(inactiva), auto (automat)
FRAMEBORDER=x Marimea chenarului din jurul cadrului
Spatiul suplimentar de deasupra si dedesubtul unui
MARGINHEIGHT=x
anumit cadru
Spatiu suplimetar la stanga si la dreapta unui anumit
MARGINWIDTH=x
cadru
<NOFRAMES> Sectiunea de pagina afisata pentru utilizatorii care nu pot
</NOFRAMES> vedea un cadru
<IFRAME> Cadru intern (numai pentru (IE)
SRC=url Sursa cadrului
NAME=s Numele ferestrei (util pentru TARGET)
HEIGHT=x Inaltimea cadrului inglobat
WIDTH=x Latimea cadrului inglobat
Adaugarea imaginilor
<FORM>
Formular HTML activ
</FORM>
ACTION=url Programul CGI de pe serverul care receptioneaza datele
Modul in care datele sunt transmise serverului(GET sau
METHOD=metoda
POST)
<INPUT Camp de text sau alte date de intrare
Tipul campului de intrare <INPUT>. Valori posibile:
TYPE=optiune text,password,checkbox,hidden,file,
radio,submit,reset,image.
NAME=nume Numele simbolic al valorii campului
VALUE=valoare Continutul prestabilit al campului de text
CHECKED= optiune Buton/caseta marcata in mod prestabilit
SIZE=x Numarul de caractere al unui camp de text
SIZE=x Numarul maxim de caractere acceptate
<SELECT>
Grup de casete de validare
</SELECT>
NAME=nume Numele simbolic al valorii campului
Numarul de articole de meniu care se afiseaza odata
SIZE=x
(prestabilit=1)
MULTIPLE=x Permite selectia unor articole de meniu multiple
<OPTION Alegerea particulara intr-un domeniu <SELECT>
VALUE=valoare Valoarea rezultanta a acestei selectii din meniu
<TEXTAREA>
Camp de intare de tip text pe linii multiple
</TEXTAREA>
NAME=nume Numele simbolic al valorii campului
ROWS=x Numarul de linii al casetei de text
COLS=x Numarul de coloane (caractere) pe linie al casetei de text
<FIELDSET>
Imparte formularul in parti logice
</FIELDSET>
<LEGEND>
Numele asociat setului de campuri (fieldset)
</LEGEND>
Specifica alinierea legendei (explicatiei) afisate
ALIGN=s
(top,bottom,left,right)
Specifica ordinea elementelor atunci cand utilizatorul
TABINDEX=x
apasa tasta Tab
Specifica tasta care asigura comanda rapida de la
ACCESKEY=c
tastatura asociata unui anumit element
DISABLED Elementul este inactiv, dar este afisat pe ecran
READONLY Elementul este afisat pe ecran dar nu poate fi editat
Carcatere speciale
HTML avansat
<STYLE>
Specifica informatii referitoare modelul de stiluri
</STYLE>
TYPE=val Tipul modelului de stiluri. De regula "text/css"
<SCRIPT> Include un script de regula Javascript, in pagina Web
</SCRIPT>
LANGUAGE=limbaj Limbajul utilizat
Eveniment care declanseaza executia unor scripturi
EVENT=eveniment
specifice
Numele obiectului din pagina asupra caruia actioneaza
FOR=numeobiect
scriptul
DIV
- Tag-ul DIV creaza sectiuni de blocuri in pagina, al caror forma si grafica de continut pot
fi manipulate pentru fiecare separat. Are doar un singur atribut HTML, align (pt. aliniere
pe orizontala) care poate avea urmatoarele valori: left (stanga), right (dreapta), center
(centru), justify (distanta textului fata de margini egala).
Tag-ul <div></div> este unul din cele mai folosite elemente HTML, aceasta deoarece in
combinatie cu proprietati CSS poate crea efecte grafice deosebite, iar in interiorul lui pot
fi incluse oricare elemente HTML: tabele, formulare, marcatori, linii sau alte DIV-uri.
Cadrul in care acestea sunt adaugate poate avea propriul fundal (background), lungime,
inaltime si margini cu diferite linii.
Iata un exemplu in care avem 2 div-uri, unul contine un formular iar celalalt o lista
"<ul></ul>", fiecare DIV cu proria culoare de fundal, dimensiuni stabilite si margini
diferite.
- In atributul "style" sunt specificate proprietatile CSS care stabilesc aspectul grafic al fiecarui DIV
(lungime in pixeli, fundal si bordura).
Acest cod va afisa intr-o pagina web urmatorul rezultat:
Nume:
E-mail:
Trimite
Alt DIV
Linie 1
Linie 2
Linie 3
Un alt aspect important este si faptul ca putem pozitiona continutul din interiorul tag-ului <div>
</div> oriunde in pagina, folosind proprietati CSS precum:
position - care poate lua valorile: static, relative, fixed sau absolute (pt. mai multe
detalii vezi Pozitionare CSS).
margin - care stabileste distanta dintre marginea cadrului sectiunii (blocul) DIV si
elementele din jurul lui (pt. mai multe detalii vezi Margini si chenare CSS).
Iata un exemplu in care, prin folosirea mai multor DIV-uri pozitionate suprapus, putem afisa in
pagina un titlu cu aspect grafic deosebit. Codul este urmatorul:
In acest exemplu avem un prim DIV cu atributul "style" in care avem o proprietate de pozitionare
relativa (pt. a pozitiona toate celelalte elemente pe care el le incadreaza dupa contextul scris
anterior) si o alta proprietate pentru marimea textului. In interiorul acestui DIV avem alte 3 div-
uri, pozitionate absolut si care incadreaza fiecare cate un text identic. Prin pozitionarea absoluta
div-urile se suprapun, la o distanta stabilita de proprietatile "margin-top" si "margin-left", iar prin
culoare diferita (cu proprietatea "color") data textului din fiecare "div" va apare in pagina web
urmatorul rezultat: