Creati un site de la 0 folosind HTML (Tutorial)

– marcajul HTML de deschidere – indica faptul ca informatia care urmeaza este scrisa in limbajul HTML

– marcajul HEAD de deschidere – de aici incepe antetul paginii

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

  ... 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 ( ` ).

– marcajul HEAD de inchidere – aici se termina antetul paginii; tot ce este in antet nu apare in fereastra browserului

– marcajul BODY de deschidere – incepe corpul documentului

... ... ...

– tot ceea ce apare aici va fi afisat in fereastra browserului, dar trebuie formatat cu HTML

– marcajul BODY de inchidere – indica sfarsitul corpului documentului

– marcajul HTML de inchidere

Dupa cum puteti observa, instructiunile HTML (numite si controale, marcaje sau tag-uri) incep cu o paranteza unghiulara deschisa .
Majoritatea instructiunilor sunt perechi; cea de inceput se numeste marcaj de deschidere si este de forma:

iar cea de sfarsit marcaj de inchidere si nu contine atribute sau spatii; este de forma:
.
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

<!-- comentariu -->

– Comentariu in codul sursa; nu este afisat de browser

< b > < / b >

-afiseaza textul cu litere aldine (ingrosate)

< i > < / i >

– fiseaza textul cu litere italice (inclinate)

< u > < / u >

-afiseaza textul subliniat (subliniat)

< sup > < / sup >

– afiseaza textul ca indice superior

< sub > < / sub >

– afiseaza textul ca indice inferior

< tt > < / tt >

– text cu font monospatiu

< big > < / big >

– text cu font marit + bold

< pre atribute > < / pre >

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

width =

– latimea liniilor cu text preformatat (numar caractere); se pare ca este ignorata;

cols =

– latimea liniilor cu text preformatat (cols=coloane=numar caractere);

wrap

– atributul wrap se pare ca este ignorat de unele browsere (ex. IE5.5)

< xmp > < / xmp >

– afiseaza pe linie noua textul preformatat, ca in codul sursa, dar nu ia in considerare instructiunile html

< strike > < / strike >

– afiseaza textul taiat

< strong > < / strong >

– evidentiere logica puternica

< em > < / em>

– stil logic de evidentiere

< address > < / address >

– informatii despre adresa si autor

< cite > < / cite >

– citare bibliografica

< dfn > < / dfn >

– definitie de cuvant

< var > < / var >

– program sau variabila

< code > < / code >

– listing de program

< kbd > < / kbd >

– text de la tastatura

< samp > < / samp >

– exemplu de date introduse de utilizator

< q > < / q >

ar fi trebuit „sa aiba un efect asemanator instructiunii BLOCKQUOTE”

b) Formatarea textului si a caracterelor 2
1.

< font atribute > < /font >

size = i

– marimea fontului: i = 1, 2, … , 7; 1 = mic, 7 = mare

color =

– culoarea poate fi data prin numele ei sau prin valoarea RGB

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.

< basefont atribute > < / basefont >

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

color =

– culoarea poate fi data prin numele ei sau prin valoarea RGB
are influenta si asupra instructiunii dar nu in interiorul tabelelor

3.

< h i > < / h i >

– este folosit pentru titluri in document; i = 1, 2, 3, 4, 5, 6;

< center > < / center >

– textul

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

< br atribute >

– forteaza trecerea pe linie noua

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.

< p atribute > < / p >

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

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

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

class =

– specifica un anume stil de text

type = " text/css " style = ...

– specifica un anume stil de text

5.

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

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

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

< hr atribute >

– rigla orizontala

noshade

– elimina umbra riglei

size = z

– z = inaltimea riglei (in pixeli)

width = x

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

align =

– alinierea riglei in pagina(left,center,right)

color =

– culoarea (data prin nume sau valoarea RGB)

7.

< body atribute > < /body >

– defineste inceputul si sfarsitul corpului documentului HTML

bgcolor =

-culoarea fondului paginii (data prin nume sau valoarea RGB)

background =

– url – ul (adresa si numele) imaginii de fond a paginii

text =

– culoarea textului (nume culoare sau valoare RGB)

link =

– culoarea legaturilor nevizitate din pagina (nume sau RGB)

vlink =

– culoarea legaturilor vizitate din pagina (nume sau RGB)

alink =

– culoarea legaturilor in timpul click – ului (nume sau RGB)

leftmargin =

– indentarea intregului material din pagina fata de marginea din stanga (pixeli)

rightmargin =

– indentarea intregului material din pagina fata de marginea din dreapta (pixeli)

topmargin =

– deplasarea intregului material din pagina fata de marginea de sus (pixeli)

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.

< img atribute >

– marcaj de includere a imaginilor

ismap

– specifica faptul ca este o harta de imagine pe server (se foloseste mai rar; de obicei folosim harti de imagine la client)

usemap = " nume_harta "

– specifica harta de imagine la client

lowscr = " url "

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

2.

< map atribute > < / map >

– specifica regiunile unei harti de imagine la client

name = " nume_harta "

– numele hartii de imagine (corespunzator atributului USEMAP al marcajului )

3.

< area atribute >

– defineste o regiune a unei harti de imagine

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

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

href = " url "

– URL – ul asociat regiunii specificate din cadrul imaginii; in cazul unui clic pe acea regiune se incarca pagina specificata prin URL

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

< img atribute >

– marcajul de includere a imaginii

src = " url "

– adresa fisierului grafic (url absolut sau relativ)

alt = " text "

– textul alternativ care este afisat celor care navigheaza fara imagini

align =

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

height =

– inaltimea imaginii (in pixeli sau %)

width =

– latimea imaginii (in pixeli sau %)

border =

– marimea chenarului din jurul imaginii (in pixeli)

hspace =

– spatiu pe orizontala in jurul imaginii (in pixeli)

vspace =

– spatiu pe verticala in jurul imaginii (in pixeli)

d) Liste
Liste de tip definitie

– lista de tip definitie

– termen de definitie

– descriere de definitie

Liste neordonate (marcate)
1.

– lista neordonata (marcata)

type=

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

2.

– element de lista

Liste odonate (numerotate)
1.

– lista ordonata (numerotata)

type=

– tipul numerotarii: A, a, I, i, 1 (implicit)

start=

– cu a cat-a valoare incepe (implicit cu prima)
2.

– element de lista

e) Facilitarea gasirii paginii de catre motoarele de cautare

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

name =

– keywords, description, author, …

content =