Creati un site de la 0 folosind HTML (Tutorial)

2
433
Creati un site de la 0 folosind HTML (Tutorial)
Ti-a placut acest articol? Acorda-i o nota

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 cautarea) Forma generala a unui fisier HTML
    
    

    – 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

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

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

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

    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)

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

    < hr atribute >

    – rigla orizontala

    Atribute
    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

    Atribute
    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

    Atribute
    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

    Atribute
    name = " nume_harta "

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

    3.

    < area atribute >

    – defineste o regiune a unei harti de imagine

    Atribute
    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

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

    Atribute
    type=

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

    2.

    
    

    – element de lista

    Liste odonate (numerotate)
    1.

    
    

    – lista ordonata (numerotata)

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

    
    
    Atribute
    name =

    – keywords, description, author, …

    content =

2 COMENTARII

LĂSAȚI UN MESAJ