Creaza Un Site

Subiect: Creaza Un Site Lun Mar 01, 2010 9:40 am

Consortiul World Wide Web, W3, a definit si standardizat specificatiile HTML 4.0 si a versiunilor anterioare (1, 1.1, 2.0, 3.2); fiecare versiune a adus instructiuni (numite si controale, marcaje, tag - uri) noi fata de versiunea anterioara. La randul lor si producatorii browserelor realizeaza noi versiuni care sa "inteleaga" noile marcaje; ei introduc uneori si marcaje proprii, in plus fata de specificatiile standard, pe care le "intelege" doar browserul lor.

Pentru a prinde curaj si a vedea modul de lucru, sa construim o pagina simpla.

Instructiuni, atribute, exemple :
[*]Forma generala a unui fisier HTML
[*]Formatarea textului si a caracterelor (1)(2)
[*]Harti de imagini
[*]Imagini
[*]Liste
[*]Facilitarea gasirii paginii de catre motoarele de cautare

a) Forma generala a unui fisier HTML
Cod:
<html>

- marcajul HTML de deschidere - indica faptul ca informatia care urmeaza este scrisa in limbajul HTML
Cod:
<head>

- marcajul HEAD de deschidere - de aici incepe antetul paginii
Cod:
<title>Titlul paginii</title>

- marcajele pereche TITLE - aici se scriu cateva cuvinte sugestive despre continutul paginii - aceste cuvinte vor apare pe bara de titlu a browserului; daca pagina este adaugata intr-o lista favorita, ele apar ca nume al paginii.
Cod:
<meta name = "keywords"
content = "... o lista de cuvinte ...">
<meta name = "description"
content = "... o fraza sugestiva ...">
... alte instructiuni: JavaScript,
CSS, etc. ...

- ajuta motoarele de cautare la gasirea paginii, etc. - ne vom ocupa mai tarziu de ele;
!!! - valorile unor atribute, de exemplu "keywords", trebuie incadrate cu ghilimele duble, drepte ( " ) obtinute cu Shift + tasta de langa Enter, nu ( ' ) sau ( ` ).
Cod:
</head>

- marcajul HEAD de inchidere - aici se termina antetul paginii; tot ce este in antet nu apare in fereastra browserului
Cod:
<body>

- marcajul BODY de deschidere - incepe corpul documentului
Cod:
...
...
...

- tot ceea ce apare aici va fi afisat in fereastra browserului, dar trebuie formatat cu HTML
Cod:
</body>

- marcajul BODY de inchidere - indica sfarsitul corpului documentului
Cod:
</html>

- marcajul HTML de inchidere

Dupa cum puteti observa, instructiunile HTML (numite si controale, marcaje sau tag-uri) incep cu o paranteza unghiulara deschisa < urmata imediat de numele instructiunii, unul sau mai multe atribute ale instructiunii (optional), apoi de o paranteza unghiulara inchisa >.
Majoritatea instructiunilor sunt perechi; cea de inceput se numeste marcaj de deschidere si este de forma:
<nume_instructiune atribut = valoare_atribut>
iar cea de sfarsit marcaj de inchidere si nu contine atribute sau spatii; este de forma:
</nume_instructiune>.
NU sunt permise spatii decat intre nume_instructiune si atribut. Tot ce se gaseste intre marcajul de deschidere si cel de inchidere va avea caracteristicile marcajului respectiv.
Browserul ignora marcajele pe care nu le intelege si pe cele scrise gresit.

b) Formatarea textului si a caracterelor 1
Cod:


- Comentariu in codul sursa; nu este afisat de browser
Cod:
 

-afiseaza textul cu litere aldine (ingrosate)
Cod:
 

- fiseaza textul cu litere italice (inclinate)
Cod:
 

-afiseaza textul subliniat (subliniat)
Cod:
 

- afiseaza textul ca indice superior
Cod:
 

- afiseaza textul ca indice inferior
Cod:
< tt > < / tt >

- text cu font monospatiu
Cod:
< big > < / big >

- text cu font marit + bold
Cod:
< pre atribute >
< / pre >

- fiseaza pe linie noua textul preformatat, ca in codul sursa, dar ia in considerare instructiunile html

Atribute

Cod:
width =

- latimea liniilor cu text preformatat (numar caractere); se pare ca este ignorata;
Cod:
cols =

- latimea liniilor cu text preformatat (cols=coloane=numar caractere);
Cod:
wrap

- atributul wrap se pare ca este ignorat de unele browsere (ex. IE5.5)
Cod:
< xmp >
< / xmp >

- afiseaza pe linie noua textul preformatat, ca in codul sursa, dar nu ia in considerare instructiunile html
Cod:
< strike > < / strike >

- afiseaza textul taiat
Cod:
 

- evidentiere logica puternica
Cod:
 

- stil logic de evidentiere
Cod:
< address >
< / address >

- informatii despre adresa si autor
Cod:
< cite > < / cite >

- citare bibliografica
Cod:
< dfn > < / dfn >

- definitie de cuvant
Cod:
< var > < / var >

- program sau variabila
Cod:
< code > < / code >

- listing de program
Cod:
< kbd > < / kbd >

- text de la tastatura
Cod:
< samp > < / samp >

- exemplu de date introduse de utilizator
Cod:
< q > < / q >

ar fi trebuit "sa aiba un efect asemanator instructiunii BLOCKQUOTE"

b) Formatarea textului si a caracterelor 2
1.
Cod:

Atribute

Cod:
size = i

- marimea fontului: i = 1, 2, ... , 7; 1 = mic, 7 = mare
Cod:
color =

- culoarea poate fi data prin numele ei sau prin valoarea RGB
Cod:
face =
" font1 , font2 , ..."

- o lista de minim 2 fonturi:
font1 = un font specific sistemelor Windows,
font2 = un font specific echivalent sistemelor Macintosh;
daca nu gaseste instalat nici unul din ele, va afisa textul cu fontul proportional predefinit

2.
Cod:
< basefont atribute >
< / basefont >

Atribute

Cod:
size = i

- marimea fontului implicit al intregii pagini: i = 1, 2, ... , 7; 1 = mic, 7 = mare;
fontul implicit are marimea 3;
nu are influenta asupra textului din interiorul tabelelor
Cod:
color =

- culoarea poate fi data prin numele ei sau prin valoarea RGB
are influenta si asupra instructiunii <hi> </hi> dar nu in interiorul tabelelor

3.
Cod:
< h i > < / h i >

- este folosit pentru titluri in document; i = 1, 2, 3, 4, 5, 6;
Cod:
< center >
< / center >

- textul

este indentat cu un TAB fata de ambele margini (stanga si dreapta) ale spatiului disponibil (pagina, celula de tabel, etc.)
Cod:
 

- forteaza trecerea pe linie noua

Atribute

Cod:
clear =

- left, right sau all: trece la linie noua cand marginea din stanga (left), dreapta (right) sau ambele margini (all) ale ecranului sunt libere, de ex. pentru a aduce un text sub o imagine care nu ocupa intreaga latime a spatiului disponibil

4.
Cod:



- paragraf nou (aliniat implicit la stanga daca nu este in interiorul unui marcaj care face o alta aliniere, de ex. CENTER)

Atribute

Cod:
align =

- aliniat la stanga (left), - este alinierea implicita, deci nu este necesar decat in interiorul unui marcaj care face o alta aliniere, de ex. CENTER

aliniat pe centru (center),

- pentru ambele margini aliniate (justify); observati spatiul din dreapta dintre text si marginea tabelului si distanta dintre cuvinte, care este reglata astfel incat marginea din dreapta a textului sa nu fie neregulata. Sesizati diferenta fata de paragrafele cu align = left sau fara align de mai sus.
Cod:
class =

- specifica un anume stil de text
Cod:
type = " text/css "
style = ...

- specifica un anume stil de text

5.
Cod:
< div atribute >
< / div >

- marcaj pentru blocuri de text (aliniat implicit la stanga daca nu este in interiorul unui marcaj care face o alta aliniere, de ex. CENTER)

Atribute

Cod:
align =

- aliniat la stanga (left), - este alinierea implicita, deci nu este necesar decat in interiorul unui marcaj care face o alta aliniere, de ex. CENTER

aliniat pe centru (center)

- pentru ambele margini aliniate (justify); observati spatiul din dreapta dintre text si marginea tabelului si distanta dintre cuvinte, care este reglata astfel incat marginea din dreapta a textului sa nu fie neregulata. Sesizati diferenta fata de paragrafele cu align = left sau fara align de mai sus.
Deosebirea dintre p si div consta in faptul ca prima lasa un spatiu mai mare deasupra si dedesubtul paragrafului, pe cand div lasa spatiul egal cu cel dintre randuri.

6.
Cod:
< hr atribute >

- rigla orizontala

Atribute

Cod:
noshade

- elimina umbra riglei
Cod:
size = z

- z = inaltimea riglei (in pixeli)
Cod:
width = x

- x = latimea riglei, in pixeli sau procente din spatiul disponibil (pagina, celula de tabel, etc.); aliniaza implicit pe centru
Cod:
align =

- alinierea riglei in pagina(left,center,right)
Cod:
color =

- culoarea (data prin nume sau valoarea RGB)

7.
Cod:
< body atribute >
< /body >

- defineste inceputul si sfarsitul corpului documentului HTML

Atribute

Cod:
bgcolor =

-culoarea fondului paginii (data prin nume sau valoarea RGB)
Cod:
background =

- url - ul (adresa si numele) imaginii de fond a paginii
Cod:
text =

- culoarea textului (nume culoare sau valoare RGB)
Cod:
link =

- culoarea legaturilor nevizitate din pagina (nume sau RGB)
Cod:
vlink =

- culoarea legaturilor vizitate din pagina (nume sau RGB)
Cod:
alink =

- culoarea legaturilor in timpul click - ului (nume sau RGB)
Cod:
leftmargin =

- indentarea intregului material din pagina fata de marginea din stanga (pixeli)
Cod:
rightmargin =

- indentarea intregului material din pagina fata de marginea din dreapta (pixeli)
Cod:
topmargin =

- deplasarea intregului material din pagina fata de marginea de sus (pixeli)
Cod:
bgproperties =

- primeste doar valoarea "fixed"; daca derulam pagina, fondul ramane fix

c) Harti de imagini
Sunt imagini care sunt "impartite" in mai multe zone, in functie de zona pe care se executa click, browserul afiseaza o alta pagina.
De exemplu, pe un site dedicat turismului am putea avea pe pagina principala o imagine care reprezinta harta tarii (in care definim zonele dupa conturul judetelor); in cazul unui click in zona Brasov se incarca o pagina care descrie diverse obiective turistice din judet si/sau contine o imagine a hartii judetului, pe care definim alte zone in jurul localitatilor, iar un click pe o localitate ar duce la alta pagina care descrie obiectivele turistice din localitate.
O harta de imagini ar putea fi folosita si pentru navigarea in cadrul unui site: daca avem mai multe butoane de navigare grupate se poate folosi o imagine care reprezinta toate butoanele - mai multe imagini se incarca mai incet decat o imagine cu dimensiunea egala cu suma celorlalte (kb) deoarece comunicarea cu serverul (cand se cere imaginea) se face o singura data.
Pana aici numai avantaje; dezavantajul major este ca un vizitator care are browserul setat sa nu incarce imagini pentru a naviga mai repede nu va intelege mai nimic (putem totusi folosi marcajul alt de specificare a textului alternativ pentru imagini).
1.
Cod:
< img atribute >

- marcaj de includere a imaginilor

Atribute

Cod:
ismap

- specifica faptul ca este o harta de imagine pe server (se foloseste mai rar; de obicei folosim harti de imagine la client)
Cod:
usemap = " nume_harta "

- specifica harta de imagine la client
Cod:
lowscr = " url "

- imaginea de rezolutie scazuta care se incarca prima (doar pentru Netscape)

2.
Cod:
< map atribute >
< / map >

- specifica regiunile unei harti de imagine la client

Atribute

Cod:
name = " nume_harta "

- numele hartii de imagine (corespunzator atributului USEMAP al marcajului <IMG>)

3.
Cod:
< area atribute >

- defineste o regiune a unei harti de imagine

Atribute

Cod:
shape = " forma "

- forma regiunii: rect sau rectangle (dreptunghi), circle sau circ (cerc), point (punct), poly sau polygon (poligon)
!!! Netscape 4.51 nu a "inteles" decat circle, nu si circ
Cod:
coords = " coordonate "

coordonatele unei regiuni (in pixeli); se calculeaza in functie de coltul din stanga sus al imaginii (care are coordonatele (0, 0), adica x = 0, y = 0); variaza in functie de SHAPE = forma regiunii:
- pentru rect (dreptunghi) se dau coordonatele colturilor din stg. sus si dr. jos ale regiunii
- pentru circ (cerc) se dau coordonatele centrului cercului si raza
- pentru point (punct) se dau coordonatele punctului
- pentru poly (poligon) se dau coordonatele colturilor poligonului
Cod:
href = " url "

- URL - ul asociat regiunii specificate din cadrul imaginii; in cazul unui clic pe acea regiune se incarca pagina specificata prin URL
Cod:
alt = " text "

- textul alternativ asociat regiunii specificate din cadrul imaginii; apare plasand mouse-ul deasupra regiunii respective sau celor cu browserul setat sa nu incarce imagini
!!! Netscape 4.51 nu a afisat decat primul text dat cu alt

d) Imagini
Cod:
< img atribute >

- marcajul de includere a imaginii

Atribute

Cod:
src = " url "

- adresa fisierului grafic (url absolut sau relativ)
Cod:
alt = " text "

- textul alternativ care este afisat celor care navigheaza fara imagini
Cod:
align =

- alinierea imaginii in pagina: right (dreapta), left (stanga = implicit)
alinierea elementelor din jurul imaginii: top (sus), middle (mijloc), bottom (jos)
Cod:
height =

- inaltimea imaginii (in pixeli sau %)
Cod:
width =

- latimea imaginii (in pixeli sau %)
Cod:
border =

- marimea chenarului din jurul imaginii (in pixeli)
Cod:
hspace =

- spatiu pe orizontala in jurul imaginii (in pixeli)
Cod:
vspace =

- spatiu pe verticala in jurul imaginii (in pixeli)

d) Liste
Liste de tip definitie
Cod:
<dl>
</dl>

- lista de tip definitie
Cod:
<dt>

- termen de definitie
Cod:
<dd>

- descriere de definitie

Liste neordonate (marcate)
1.
Cod:
<ul atribute>
</ul>

- lista neordonata (marcata)

Atribute

Cod:
type=

- forma marcajului: circle, square, disc (implicit)

2.
Cod:
<li>

- element de lista

Liste odonate (numerotate)
1.
Cod:
<ol atribute>
</ol>

- lista ordonata (numerotata)

Atribute

Cod:
type=

- tipul numerotarii: A, a, I, i, 1 (implicit)
Cod:
start=

- cu a cat-a valoare incepe (implicit cu prima)
2.
Cod:
<li>

- element de lista

e) Facilitarea gasirii paginii de catre motoarele de cautare
Cod:
<title>
</title>

- marcajele pereche TITLE - aici dam titlul: cateva cuvinte sugestive despre continutul paginii - aceste cuvinte vor apare pe bara de titlu a browserului; daca pagina este adaugata intr-o lista favorita sau listata ca rezultat al unei cautari, ele apar ca nume al paginii.
Cod:
<meta atribute>

Atribute

Cod:
name =

- keywords, description, author, ...
Cod:
content =

- descrie valoarea lui name

In general in antetul unei pagini web, intre marcajele <HEAD> si </HEAD>, exista mai multe marcaje META, cu atribute name - content perechi. Exemplu:
<html><head><title>Titlul dorit</title>
<meta content="text/html; charset=windows-1252" http-equiv=Content-Type>
indica browserului ca este un fisier HTML;
charset stabileste tipul de caractere (in general windows-1252), dar exista si altele
<meta name=keywords content="o lista de cuvinte, separate prin virgula">
pagina va fi listata de un motor de cautare (la care ati inscris deja site-ul) in cazul unei cautari in care s-au folosit cuvinte din aceasta lista
<meta name=description content="O fraza care descrie pe scurt continutul paginii">

in cazul unei cautari dupa cuvinte-cheie, motorul de cautare ne da o lista de pagini; pentru fiecare pagina (site) din lista apare titlul ei (dat cu marcajul TITLE) urmat de o fraza (cea de la name=description content="o fraza care descrie ..."); daca nu avem in marcajul META acea fraza, motorul va indexa dupa prima fraza din pagina; tot ea va fi data la o eventuala cautare
<meta name=author content="numele dvs., e-mail, etc">
nu este neaparat necesara
</head><body> .... </body></html>

[ iNfo ] Am sarit peste Referinte (legaturi), Tabele, Cadre (frame-uri), Caractere speciale, Stiluri de text - formatare avansata a textului

END