Mic ghid
HTML

Acest Mic ghid HTML, doreste sa prezinte intr-un mod cat mai simplu primii pasi in realizarea unei pagini Web. Se vrea sa fie un rezumat, ce traseaza doar directia ce trebuie urmata pentru a jongla cu instructiunile limbajului HTML si se adreseaza celor ce descifreaza de curand aceste notiuni. Dezvoltarea acestui ghid depinde in mare masura de tine, fapt concretiat prin trimiterea observatiilor dumneavoastra, critice, catre webmaster.

Tabla de Materii

  1. Limbajul de marcare Hipertext (HTML)
    • Ce inseamna HTML ?
  2. Marcaje de pagina Web
    • <HTML>
    • <HEAD>
    • <TITLE>
    • <BODY>
    Marcajul Body
    • BACKGROUND=""
    • BGCOLOR=""
    • LINK=""
    • ALINK=""
    • VLINK=""
  3. Definirea fonturilor, marimea si stilul lor
    • Font
    • size=
    • color=""
    • face
    • h1 - h6
    • Paragraf
    • Rigla orizontala
    • Linie noua
  4. Culori
      ="color"
      ="hexegetimal"
  5. Alinieri
    • P ALIGN=""
    • ALIGN=
    • CENTER
    • LEFT
    • RIGHT
  6. Link-uri interne, externe, de pagina si Mailto
    • Link intern
    • Link extern
    • Link de pagina
    • Link de tip Mailto
  7. Imagini
    • Align
    • Alt
    • Height
    • Width
  8. Tabele
    • Table
    • bgcolor
    • BORDER
    • CELLPADDING=
    • CELLSPACE=
    • width=""
    • align=
    • td
    • tr
  9. Forme
    • Form
    • Method=""
    • ACTION=""
    • INPUT..
    • MAXLENGTH=
    • CHECKED
    • NAME=""
    • SIZE=""
    • VALUE=""
    • OPTION
    • SELECTED
    • TEXTAREA
    • COLS=
    • NAME=""
    • ROWS=

Limbajul de marcare Hipertext (HTML)

HTML reprezinta prescurtarea de la Hyper Text Markup Language. Este un limbaj cu ajutorul careia se pot crea documente format Web pentru prezentare in reteaua Internet. Limbajul HTML a ajuns in prezent la versiunea 4.0. Nu este un limbaj complex, dar cere o viziune de ansamblu clara, precum si un simt artistic deosebit. Odata cunoscute functiunile comenzilor, nu ramane decat ca imaginatia sa va indrume pentru a crea pagini Web atragatoare.

Tabla de Materii

Marcaj de pagina Web

Un document Web, este un fisier de tip text caracterizat printr-o serie de comenzi de intrare si de iesire ce marcheaza inceputul si sfarsitul fisierului.

<HTML>
<HEAD>
<TITLE> titlul documentului
</TITLE>
</HEAD>
<BODY...>

(corpul executabil al documentului)

</BODY>
</HTML>

Marcajul de baza pentru recunoasterea unui document afisabil de tip Web este <HTML> Acest marcaj este recunoscut de Browser. Informatii referitoare la document se pot introduce in antetul sau intre marcajele <HEAD> si </HEAD>. Printre aceste informatii se numara si titlul documentului introdus intre marcajele <TITLE> si </TITLE>. Este de retinut ca aceste informatii nu sunt afisate de Browser ci ele sunt folositoare doar pentru uzul programatorului. Corpul de instructiuni afisabile ale documentului este cuprins intre marcajele <BODY> si </BODY>. Marcajul de indica sfarsitul documentului Web este </HTML>

Tabla de Materii

Marcajul Body :

Corpul cu comenzi de afisare pentru Browser este delimitat de marcajul <BODY> si </BODY>. Acest marcaj este insotit de atribute ce definesc caracteristicile generale de afisare ale documentului. Ele stabilesc culoarea de fond a paginii, culoarea textului, link-ului vizitat si a celui nevizitat.

<BODY....>
  • BACKGROUND="fisier.gif" Imaginea de fond pentru pagina.
  • BGCOLOR="" Culoarea de fond a paginii (RGB sau numele culorii).
  • TEXT="" Culoarea textului pe pagina (RGB sau numele culorii).
  • LINK="" Culoarea Link-ului nevizitat (RGB sau numele culorii).
  • VLINK="" Culoarea Link-ului vizitat (RGB sau numele culorii).
  • ALINK="" Culoarea Link-ului activ (RGB sau numele culorii).
  • BGPROPERTIES="fixed | none" Proprietati Background (scrolling sau fixa).
(corpul executabil al documentului)

</BODY....>

Tabla de Materii

Definirea fonturilor, marimea si stilul lor

Pentru definirea fontului folosit pentru afisare si atributele acestuia se foloseste marcajele <FONT..> si </FONT..>. Atributele definesc denumirea fontul utilizat, culoarea fontului, marimea acestuia (domeniu +/- intre 1:7) si stilul acestuia.
Nivelul de organizare al subtitlurilor se definesc intre marcajele <Hn> si </Hn> cu valori intre 1:6. In cadrul documentelor afisate pe Browser, se pot trasa rigle orizontale, cu ajutorul marcajului <Hr..>. Pentru organizarea textelor afisate se folosesc marcaje de paragraf <P>, si marcaje de linie noua <BR>.

  • <FONT..> fontul de baza utilizat
    • color="" culoarea fontului
    • size=+/- marimea fontului, -7 domeniu +7
    • face="" stilul fontului
    </FONT>

      • <H1> - <H6> Definirea subtitlurilor
      • </H1> - </H6 nivele de organizare a subtitlurilor
      • <HR..> Rigla orizontala
        size=+/- Marimea riglei orizontale (un numar)
      • <P> Paragra nou
      • <BR> Linie noua

    Tabla de Materii

    Culori

    In format HTML, definirea culorilor se poate face in doua moduri. Fie prin denumirea directa a culorii folosite, fie prin descrierea acesteia in format hexagetimal. Astfel culoarea neagra poate fi defita fie color="FFFFFF" fie color="black". Mai jos regasiti cateva culori uzuale si transpunerea lor in valori hexa.

    nume culoare - - valoare hexa
    black (negru) "000000"
    white (alb) "FFFFFF"
    red (rosu) "FF0000"
    green (verde) "00FF00"
    blue (albastru) "0000FF"
    yellow (galben) "FFFF00"
    purple (violet) "FF00FF"

    Tabla de Materii

    Alinieri

    In aceasta parte a ghidului ne referim la alinierile imaginilor, textelor, tabelelor, etc. Aceste alinieri se fac relativ usor, prin folosirea in cadrul comenilor specifice tipului de articol afisat, a atributului align cu valori specifice pentru aliniere: center, left sau right.
    Pentru centrarea unui paragraf de exemplu:

    <p align="right | left | center">

    Tabla de Materii

    Link-uri interne, externe, de pagina si Mailto
    Navigarea intr-un Site Web cu pagini multiple, accesarea altor Site-uri Web, salturile in cadrul aceleiasi pagini ale documentului Web se fac cu ajutorul link-urilor. Acestea reprezinta adresa la care se face saltul. Alt tip este Link-ul Mailto cu ajutorul careia se pot transmite mesaje mail catre adrese predestinatem.

    • <a href="mailto:adresa@email.com> email me </a> transmite email catre adresa@email.com

    • <a href="http://www.nume_pagina.com"> numele paginii </a> trimitere catre o pagina externa Site-ului.
      <a href="nume_fisier.html"> numele fisierului </a> trimitere catre o pagina interna Site-ului dv.

    • <a name="nume_ancora"> numele paginii </a> trimiterea catre o ancora in cadrul paginii.
      <a href="#nume_ancora"> numele ancorii </a> Link ancora.

      Tabla de Materii

      Imagini
      Este foarte simplu de adus imagini in cadrul unei paginii web. Instructiunea de afisarea este asemanatoare cu adresa da Link. Ea este insotita de atribute de aliniere, incadrare border si e inlocuire cu text, asta pentru cazul in care nu poate fi incarcata imaginea.

      <IMG...> marcaj de afisare imagine in pagina ta.
      • src="nume_imagine.gif/jpg" specifica imaginea afisata.
      • align="center | left | right" alinierea imaginii pe oriontala.
      • valign="top | middle | bottom" alinierea imaginii pe verticala.
      • border="" imagine cu border
      • alt="[image name]" text afisat in cazul in care imaginea nu se poate incarca
      </img>

      Tabla de Materii

      Tabele
      Un nou set de intructiuni HTML este <Table..> si </Table..>. Acestea delimiteaza setul de instructiuni specifice formatarii afisarii informatiilor pe mai multe coloane si linii. Printr-o corecta folosire a acestor instructiuni se obtin tabele, ce pot fi la randul lor parte din alte tabele.

      <Table..> Marcaj inceput de Tabel.
      • align= Aliniere in cadrul tabelului.
      • BGCOLOR="" Culoarea de fond a tabelului (RGB sau nume culoare).
      • BORDER= Caracteristica de incadrare a tabelului.
      • CELLPADDING= Spatiu suplimentar in cadrul celulelor tabelului.
      • CELLSPACING= Spatiu suplimentar intre celulele tabelului.
      • WIDTH= Lungimea impusa tabelului (in pixeli sau procentual).

      • <tr..> Marcaj de creare a unei linii de tabel.
        • BGCOLOR="" culoare de fond pentru intrega linie (RGB sau nume culoare).
        • VALIGN= Aliniere pe verticala.
        • ALIGN= Alinierea celulelor pe linia curenta.
      • <td> Marcaj inceput de celula.

        Informatii incluse in celula.

      • </td> Marcaj sfarsit de celula.
      • </tr> Marcaj sfarsit de linie

        </table> Marcaj sfarsit de tabel

      Tabla de Materii

      Forme

      Formele par cele mai dificile instructiuni ale limbajului HTML. Aceasta problema va fi atinsa si in alte articole de pe acest Site. O simpla prezentare a formelor este descrisa in cele ce urmeaza.

      <FORM....> Marcaj inceput de forma.
      • ACTION="" actiune rezultanta a formei(ex: mailto:adresa@email).
      • METHOD="post sau get" Modul in care sunt transmise datele serverului.

      • <INPUT...> Camp de introducere date.
        • NAME="" Numele simbolic al valorii campului.
        • SIZE= Numarul de caractere al unui camp.
        • MAXLENGTH= Numarul maxim de caractere acceptate.
        • TYPE="text, password, checkbox, hidden, file, radio, submit, reset, sau imagine" tipul campului de intrare.
        • CHECKED Buton/caseta marcata in mod prestabilit

      • <Select> Marcaj grup de casete de validare.
        • <OPTION..> Alegere particulara intr-un domeniu.
        • SELECTED indica valoarea default a alegerii.
        • SIZE= Numarul de articole de meniu.
      • </SELECT> Marcaj sfarsit de validare.

      • <TEXTAREA..> Marcaj camp de intrare de tip text pe linii multiple.
        • COLS= Numar de coloane.
        • ROWS= Numar de linii.
        • NAME="" Numale simbolic al valorii campului.
      • </TEXTAREA> Marcaj sfarsit de camp de tip TEXTAREA.

      </FORM> Sfarsit de formular.

      Tabla de Materii

    • © Copyright, Adrian Chiriac