Limbajul HTML


    Serviciul World Wide Web (WWW sau 3W) este cel mai utilizat serviciu din Internet, bazele acestuia fiind puse in 1989 de catre Tim Berners Lee de la CERN (Centrul European pentru Fizica Nucleara) din Geneva.
    Solutia de baza era ideea de a face legatura între documente via "hipertext". Hipertext înseamna, a marca sirurile de text sau alte obiecte si de a le lega cu alte obiecte, care ar putea fi din punct de vedere fizic la mare distanta de obiectul original.
    Când legatura este selectata, cineva poate "sari" la documentul legat. În acest fel este posibil de a lega un numar nelimitat de documente între ele într-o structura web ne-ierarhica. Pentru a putea deosebi aceste documente si pentru a le regasi, fiecare are o adresa unica (URL) Unique Resource Locator. URL-urile constau într-un protocol de transmitere (în cazul WWW-ului acesta este Hypertext Transfer Protocol - http), urmat de www (în cele mai multe cazuri) si de domeniu (de exemplu numele serverului si numele paginii). Vezi http://www.info-portal.ro/articol/istoria-internetului/269/1/0/
    HTML, sau HyperText Markup Language, a fost proiectat să poată opera cu functionalitătile multimedia ale WWW.
    Limbajul de marcare permite transformarea oricărui text într-un hipertext prin introducerea unor marcaje, care vor indica modul cum se efectueaza legăturile documentului, cum vor apărea paginile documentului etc.
    Un document HTML poate fi făcut public dacă este pe un calculator care are acces la Internet.
    Un document făcut public poate fi văzut din orice punct al Internet-ului.Vezi http://thor.info.uaic.ro/~val/istoric.html

    Utilizarea limbajului HTML

    HTML este prescurtarea de la HyperText Markup Language, limbajul utilizat în World Wide Web pentru descrierea hipertextelor. HTML nu este un limbaj de programare propriu-zis, ci doar un limbaj de descriere, continând elemente ce permit construirea paginilor Web.

  • Procesul client-server

        

        Procesul client-server la solicitarea unei pagini HTML statice .

  • Browsere de Internet

        

  • Sintaxa limbajului HTML

        Pentru a putea fi transmise prin INTERNET documentele trebuie sa fie realizate sau convertite in fisiere de tip HTML.
        Fisierele de tip HTML pot fi transmise prin INTERNET de "Serverele HTML".
         La destinatie browserele convertesc fisierele HTML si le afiseaza sub forma documentului initial.
        HTML (acronim de la HyperText Markup Language) este un limbaj de descriere a documentelor. Specificatiile acestui limbaj definesc o serie de TAG-uri( marcatori) si regulile de utilizare a acestora pentru a putea descrie documentele. Un marcator (sau tag) este cuprins între caracterele < si >
        Formatul general al unei instructiuni HTML
        Formatul general al unui fisier HTML


        Un fisier HTML este structurat pe doua parti:
    • antet (head)
    • continut (body)
    <HTML>
    <HEAD>
    <TITLE>Titlul documentului</TITLE>
    </HEAD>
    <BODY>
    ...
    Instructiuni HTML
    ...
    </BODY>
    </HTML>


        Marcatorul < body > admite urmatoarele atribute:     Exemplu:     
    <body bgcolor="yellow" text="red" link="blue" vlink="pink" alink="magenta">

        În HTML culorile se pot specifica în doua moduri :

  • Inserarea textelor in pagini HTML

         Marcatori referitori la texte


         Rand nou (CR)

        Marcatorul: <BR>
         Linie orizontala

        Marcatorul: <HR>


        Marcatori pentru texte

        Marcatorul <H>

        Pentru text de marime H4 :

    Text de marime H4

    <H4> Text de marime H4 </H4>


    Marcatorul <I>

    Pentru text inclinat :
    Text inclinat
    <I> Text inclinat </I>
    Marcatorul <Center>
    Pentru text centrat:
    Text centrat

    <Center> Text centrat </Center>


         Exemple de tipuri de texte care pot fi inserate in paginile WEB

    Text obisnuit
    Text obisnuit centrat
    Text obisnuit "bold"
    Text obisnuit centrat "bold"
    Text obisnuit "inclinat"
    Text obisnuit centrat "inclinat"

        Sursa paginii


        Sa realizam o pagina web care foloseste texte de diferite marimi

    Text de marimea h1

    Text de marimea h2

    Text de marimea h3

    Text de marimea h4

    Text de marimea h5
    Text de marimea h6

        Sursa paginii



        Marcatorii pot fi combinati intre ei. Putem obtine diverse tipuri de texte prin imbricarea unor marcatori in alti marcatori

    Text "inclinat" de marimea h3

    Text centrat de marimea h2


        Sursa paginii



        Un alt exemplu de imbricare a marcatorilor:

    Text centrat "inclinat" de marimea h3

    Text centrat "inclinat" de marimea h4


        Sursa paginii



  • Texte dinamice

    Marcatorul < Marquee >

    Pentru text dinamic :
    Text dinamic
    < marquee width=" valoare % " > Text dinamic < /marquee >


         In cazul in care se utilizeaza width= , textul se desfasoare pe o portiune prestabilita din pagina.


    Text marquee width=50%


        Sursa paginii



    Utlilizarea listelor

        Listele sunt deseori folosite in paginile WEB pentru a realiza opratia de operatiile de "Numbering" si "Bullets" existente in editoarele de texte.

  • Marcatori pentru definirea listelor

        

    Marcatorul <OL>

    Pentru liste numerotate
    <OL>
       <LI> Text linia 1 </LI>
       <LI> Text linia 2 </LI>
       <LI> Text linia 3 </LI>
         .
         .
         .
       <LI> Text linia n </LI>
    </OL>

    Marcatorul <UL>

    Pentru liste nenumerotate
    <UL>
       <LI> Text linia 1 </LI>
       <LI> Text linia 2 </LI>
       <LI> Text linia 3 </LI>
         .
         .
         .
       <LI> Text linia n </LI>
    </UL>

    Marcatorul <DL>

    Pentru liste de definitii
    <DL>
       <DT> Termen 1 de definit </DT>
          <DD> Def. termen 1 </DD>
       <DT> Termen 2 de definit </DT>
          <DD> Def. termen 2 </DD>
         .
         .
         .
       <DT> Termen n de definit </DT>
          <DD> Def. termen n </DD>
    </DL>


  • Exemple de utilizare a listelor


         Liste numerotate

    Liste numerotate

    1. Romania
    2. Franta
    3. Germania
    4. Italia
    5. Grecia
    6. Anglia

        Sursa paginii


         Liste nenumerotate

    Liste nenumerotate

    • Romania
    • Franta
    • Italia
    • Grecia
    • Germania
    • Anglia

        Sursa paginii


         Liste de definitii

    Liste de definitii

    Romania
    -tara latina
    Egipt
    -tara araba
    Cehia
    -tara slava

        Sursa paginii


         Liste imbricate

    Liste imbricate

    1. Romania
      • Bucuresti
        • B-dul Victoriei
        • Igoanei
        • B-dul Aviatorilor
        • Ana Ipatescu
      • Brasov
      • Cluj-Napoca
      • Tg.Mures
        • B-dul 1848
        • Pandurilor
        • Calarasilor
        • Magurei
      • Alba-Iulia
    2. Spania
    3. Italia

        Sursa paginii



    Imagini in pagini WEB

  • Inserarea imaginilor
    Afisarea imaginii la dimensiunile cu care a fost creata imaginea
    <IMG SRC="Nume_imagine.extensie">

    Afisarea imaginii la dimensiuni impuse Ex: 150 X 125 pixeli
    <IMG SRC="Nume_imagine.extensie" width=150 , height=125 >

    Afisarea imaginii la dimensiuni impuse in procente fata de dimensiunile ferestrei in care se afiseaza imaginea.
    Exemplu 50 % x 25 %
    <IMG SRC="Nume_imagine.extensie" width=50% , height=25% >

    Afisarea imaginii cu chenar
    <IMG SRC="Nume_imagine.extensie" width=150 , height=125 , border=1>

    Afisarea imaginii aliniata (Top, Middle, Bottom)
    <IMG SRC="Nume_imagine.extensie" width=150 , height=125 , ALIGN=TOP >


    Afisarea imaginii la dimensiunile cu care a fost creata imaginea

        Sursa paginii


    Afisarea imaginii la dimensiuni impuse Ex: 150 X 125 pixeli


        Sursa paginii


    Afisarea imaginii la dimensiuni impuse in procente fata de dimensiunile ferestrei in care se afiseaza imaginea.
    Exemplu 25 % x 40 %



        Sursa paginii



        Marcatorul de imagine poate fi imbricat in cadrul altor marcatori. Se poate imbrica de exemplu un marcator de imagine in marcatorul marquee obtinandu-se efectul de mai jos. Marquee
    -Sa realizam o pagina WEB asemnatoare cu pagina din figura de jos:

        Sursa paginii


    -Folosind atributul ALIGN, sa realizam o pagina WEB asemnatoare cu pagina din figura de jos:

        Sursa paginii



    Legaturi

  • Legaturi cu alte documente
    <A HREF="Document"> Text activ</A>
    <A HREF="Document.html"> Text activ</A> <A HREF="dir/subdir/Document.html"> Text activ</A>
    <A HREF="../Document.html"> Text activ</A> <A HREF="../../Document.html"> Text activ</A>
    <A HREF="Cuvant cheie"> Text activ</A>
    <A HREF="Document.html#cuvant_cheie"> Text activ</A>
    <A HREF="http://www.adresa"> Text activ</A>

    Legaturi locale

    Legatura spre pagina modemuri

    Modemuri, Fax-modemuri

        Sursa paginii

    Legaturi interne

    Legatura spre diferite locuri in pagina

    Imprim. cu ace
    Imprim. cu cerneala
    Imprim. laser

        Sursa paginii

    Legaturi indepartate

    Legatura spre pagina universitatii

    UMFST

        Sursa paginii

    Liste imbricate si legaturi


        Sursa paginii



    Imagini senzitive

  • Link-uri prin imagini
        Imbricand un marcator pentru imagini intr-un marcator pentru legaturi, obtinem link-uri in care in loc de un text activ, avem o imagine activa (senzitiva), care prin click de pe mouse furnizeaza o legatura spre pagina dorita.
        Sa realizam o astfel de legatura intr-o pagina web


        Putem sa avem simultan si text activ si imagine senzitiva



  • Meniuri grafice
        Imaginile senzitive se folosesc deseori pentru a realiza meniuri mai placute, combinand grafica si text.



    Tabele

  • Inserarea tabelelor in pagini WEB

    Tabel cu n linii si n coloane

    <Table>
       < TR >
          <TD> Celula 11 </TD>
          <TD> Celula 12 </TD>
          .
          .
          .
          <TD> Celula 1N </TD>
       </TR>
       <TR>
          <TD> Celula 21 </TD>
          <TD> Celula 22 </TD>
          .
          .
          .
          <TD> Celula 2N </TD>
       </TR>
       .
       .
       .
       <TR>
          <TD> Celula N1 </TD>
          <TD> Celula N2 </TD>
          .
          .
          .
       </TR>
    </Table>

    Exemplu tabel cu 3 coloane si 3 randuri

    <Table>
       <TR>
          <TD> Celula 11 </TD>
          <TD> Celula 12 </TD>
          <TD> Celula 13 </TD>
       </TR>
       <TR>
          <TD> Celula 21 </TD>
          <TD> Celula 22 </TD>
          <TD> Celula 23 </TD>
       </TR>
       <TR>
          <TD> Celula 31 </TD>
          <TD> Celula 32 </TD>
          <TD> Celula 33 </TD>
       </TR>
    </Table>

    Exemplu tabel cu 3 coloane si 4 randuri

    <Table>
       <TR>
          <TD> Celula 11 </TD>
          <TD> Celula 12 </TD>
          <TD> Celula 13 </TD>
       </TR>
       <TR>
          <TD> Celula 21 </TD>
          <TD> Celula 22 </TD>
          <TD> Celula 23 </TD>
       </TR>
       <TR>
          <TD> Celula 31 </TD>
          <TD> Celula 32 </TD>
          <TD> Celula 33 </TD>
       </TR>
       <TR>
          <TD> Celula 41 </TD>
          <TD> Celula 42 </TD>
          <TD> Celula 43 </TD>
       </TR>
    </Table>


    Bucuresti B-dul Victoriei Igoanei B-dul Aviatorilor Ana Ipatescu
    Brasov B-dul 1848 Pandurilor Calarasilor Magurei
    Cluj Motilor Martasti Grigoresu Pata


        Sursa paginii



        Celulele si coloanele pot fi unite folosind parametrul colspan respectiv rowspan . Tabelul de jos a fost realizat prin utilizarea atributelor colspan si rowspan

    Tablouri - celule si coloane unite
    Cap de tabel
    - x - - 1 - - 2 - - 3 - - 4 -
    -1- 11
    21     		12 13 & 14
    -2- 22 23 24
    -3- 31 32 & 33 & 34


        Sursa paginii


    -Sa realizam o pagina WEB asemnatoare cu pagina din figura de jos:


        Pentru a putea plasa diferite elemente in locuri diferite in pagina se defineste un tabel imaginar cu atatea celule cate elemente cuprinde pagina, urmand ca fiecare element sa se plaseze in celula corespunzatoare. Pentru inceput se seteaza border=1.


        Sursa paginii



        La sfarsit se seteaza border=0 si avem pagina finala.

        Tabel de 12 imagini grupate pe 2 linii si 6 coloane


        Sursa paginii



         Tabel de 12 imagini grupate pe 3 linii si 4 coloane


        Sursa paginii



         Tabel de 3 linii si 4 coloane avand background imagini


        Sursa paginii

        Avem posibilitatea sa definim background-ul si culoarea caracterelor in fiecare celula.
        Sa realizam o aplicatie cu tabele ce contin celule si texte de diferite culori.


        Folosindu-ne de posibilitatea de a seta culoarea pentru fiecare celula, aa realizam o aplicatie care deseneaza o tabla de sah. Celulele sunt patratele de pe tabla de sah. Aceste patrate nu trebuie sa contina text, numai spatii albe. Spatiile albe , le scriem cu caractere speciale nbsp.


        Metoda nu este prea eficienta. Aplicatia se rezolva mult mai simplu folosind limbaje de scriptare.     De multe ori se intalnesc in pagini chenare subtiri de diferite culori
        Iata o modalitate de a le realiza utilizand marcatorul <table>



  • Utilizarea div-urilor

        Pentru a grupa diverse elemente in cadrul unei pagini se utilizeaza marcatorul div
        Prin parametrul id se poate declara un nume unic prin intermediul caruia se poate accesa zona din cadrul zonei delimitate de marcatorul div
        Accesarea zonei delimitate de marcatorul div se face utilizand diverse limbaje de programare specifice tehnologiilor web.
        Prin parametrul style se poate declara stilul intregii zone delimitate de marcatorul div
        In continuare este prezentat un exemplu de utilizare a marcatorului div avand parametrul id="exempl" si style="color:#00FF00"


        Codul de mai sus este interpretat de browser astfel:


    Text size=3
    Text bold

    Text h3



  • SVG

         Pentru a realiza grafica in pagini WEB se utilizeaza marcatorul SVG (Scalable Vector Graphics)
         Vom utiliza in continuare marcatorul SVG cu diferite atribute pentru a trasa diferite forme geometrice in pagina WEB.

        Trasarea unei linii:



    Browser-ul d-voastra nu suporta SVG.


        Trasarea unui poligon:



    Browser-ul d-voastra nu suporta SVG.


        Trasarea unui dreptungi:



    Browser-ul d-voastra nu suporta SVG.


        Trasarea unui cerc:



    Browser-ul d-voastra nu suporta SVG.


  • Schitarea unei pagini WEB dinamice

        Vom schita in continuare o pagina WEB .Plasarea principalelor elemente in pagina se va realiza prin intermediul tabelelor
        Sursa acestei pagini o puteti vedea mai jos


    Utilizarea formularelor HTML

        Formularele sunt elemente cu ajutorul carora se pot crea pagini web interactive. Formularele contin o serie de elemente interactive care permit interactiunea cu utilizatorul paginii, in vederea colectarii de date si obtiuni de la acesta. Datele astfel obtinute sunt transmise unei aplicatii de tip server-side care le va prelucra si va transmite informatii inapoi spre client. Un formular poate contine elemente speciale – elemente de control (controls) – cum ar fi:
  • Adaugarea unui fomular

        Adaugarea unui fomular într-un document HTML se face folosind marcatorul < FORM > < /FORM > .
        Formatul general < FORM > ACTION="actiune" METHOD="metoda" < /FORM >
        Atributele marcatorului FORM     De exemplu daca realizam un formular care cefre datele unui utilizator vom defini un form de genul:



        Elementul cel mai frecvent intalnit in cadrul form-urilor este marcatorul < INPUT > . El permite amplasarea mai multor tipuri de controale care permit interactiunea cu utilizatorul.

  • Marcatorul < INPUT >

        Forma generala < INPUT TYPE="tip" NAME="nume" VALUE="valoare" > unde:
        TYPE = sir_de_caractere - specifica tipul de control
        NAME = sir_de_caractere - asociaza elementului de control un nume.
        VALUE = sir_de_caractere - specifica valoarea initiala a elementului de control.
        Atributul TYPE se refera la o gama larga de controale cum ar fi:

  • Elemente text

         –Campurile de tip text se folosesc pentru introducerea în formular a unui text pe o singura linie .
        Sa realizam un form care cere numele prenumele si adresa de mail



  • Elemente password

        Pentru a introduce parole se utilizeaza elemente de tip password. Sa completam form-ul precedent cu un camp care cere parola.



  • Elemente textarea

        Elementul TEXTAREA permite inserarea unui câmp text constituit din mai multe linii. Acest lucru se realizeaza cu atributul: ROWS = numar_de_linii. Pe fiecare linie se poate specifica numarul maxim de caractere prin atributul : COLS = numar_de_caractere Exemplu : introducerea unei zone de 5 linii si 60 de coloane pentru a da posibilitatea utilizatorului sa scrie un text.





  • Butoane de validare (checkboxes)

         – sunt butoane care permit utilizatorului sa selecteze sau nu anumite optiuni, prin activarea (sau dezactivarea) butoanelor asociate. Butoanele de validare pot fi incluse în formular prin intermediul elementului INPUT.


  • Butoane radio

         – sunt butoane de selectie cu excludere (adica utilizatorul poate selecta doar una dintre optiuni). Acestea se includ în formular prin elementul INPUT.


  • Butoane de comanda

         Butoane de comanda, se introduc în formulare prin intermediul elementelor BUTTON si INPUT avand functii diverse :     Utilizand elementele amintite mai sus, sa schitam un form care cere datele personale si le trimite spre aplicatia server-side



  • Elementul SELECT

        Prin intermediul elementului SELECT se pot introduce într-un formular liste de selectie.
        Atributele elementului SELECT sunt :
        Sa introducem intr-un form un element de selectie din lista care sa ne permita selectarea sectiei.

        Daca vrem sa facem selectii multiple trebuie sa utilizam atributul "multiple".


  • Elementul FILE

         - se foloseste atunci când dorim sa specificam un fisier ce va fi transmis porin intermediul formularului:
        Atributele elementului FILE sunt :
        Sa realizam un form care permite cautarea unui fisier si trimiterea lui .


  • Elemente de control ascunse (hidden)

         – nu sunt vizualizate în browser, dar permit autorului formularului sa transmita, o data cu informatiile înscrise în formular, si alte informatii utile. Se insereaza în formular cu INPUT.
        Sa reluam formul anterior care permite cautarea unui fisier si trimiterea lui dar trimite si diverse date spre aplicatia server-side, informatii care nu sunt vizibile pe form.


  • Frames (cadre)

        Cu ajutorul frames-urilor se pot afisa mai multe pagini web in acelasi browser.
        Putem deci sa definim în fereastra browserului subferestre (cadre) în care sa fie încarcate documente HTML diferite. Frames-urile sunt definite într-un fisier HTML unde blocul < body > ...< /body > este înlocuit de blocul < frameset >...< /frameset >. În interiorul acestui bloc, fiecare cadru este introdus prin eticheta < frame >.
        Structura fisierului in care se definesc frame-urilr este:
    <HTML>
    <HEAD>
    <TITLE>Titlul documentului</TITLE>
    </HEAD>
    < FRAMESET >
    < FRAME src="nume document" >
    < /FRAMESET> >
    </HTML>

        In cadrul unui "frameset" poat fi imbricati alti marcatori "frameset"

  • Definirea frames-urilor

        Definirea frames-urilor se face prin împartirea ferestrelor în linii si coloane, utilizand atributele marcatorului < frameset > astfel:     Sa realizam o pagina web cu trei frame-uri mixte. Prima agina va fi împartita în doua subferestre de tip coloana, dupa care a doua subfereastra este împartita în doua subferestre de tip linie. In fiecare frame se va afisa cate un document html.



         Sursa acestei pagini fiind fisierul html de mai jos:


        Frames-urile se folosesc in general pentru a realiza pagini web in care sa avem elemente stabile in pagina si zone de continut. Meniurile si zonele de reclame se pozitioneaza in astfel de frames-uri plasate de obicei in zonele laterale. Continutul se afiseaza in tot zone de tip frame dar plasate central. Se poate naviga in farme-ul continut avand totodata frame-urile meniu si reclame tot timpul pe ecran. Mai jos este prezentata imaginea unei astfel de pagini.



        Pagina de sus, se lanseaza prin lansarea fisierului "fr_v2.html" prezentat mai jos:


        In momentul definirii frame-ului, se precizeaza si fisierul sursa care trebuie incarcat. Pentru frame-ul din stanga, s-a definit < frame src="meniu_fr.html" > . Pentru frame-ul din dreapta, s-a utilizat < frame src="l_html.html#ims" name="frame_dr" > . In acest caz, s-a precizat si numele frame-ului respectiv "frame_dr" in vederea afisarii ulterioare, in acest frame a altor fisiere dupa cum se poate vedea in fisierul "meniu_fr":


        Continutul fisierului "stop.html" fiind :


    Revenirea din frame-uri se face cu optiunea stop. In cadrul fisierului stop.html s-a utilizeaza atributul _parent .
    < a href ="l_html.html" target ="_parent"> Stop < /a>


        Valori pentru atributul target al etichetei < frame >     Pe langa atributul target mai exista o serie de atribute care pot fi setate cum ar fi:
  • Iframe - Inline frame

        Un Iframe este specificat prin intermediul blocului < iframe > ...</iframe>.
        Un Iframe se insereaza într-o pagina Web în mod asemanator cu o imagine sau în modul în care se specifica marcatorul < frame >, astfel: < iframe src="l_html.html" height=40% width=50%> < /iframe> deschide un freame de dimensiunile height=40% width=50% relative la zona curenta in care se gaseste acest marcator.
        Sa utilizam acest marcator pentru a afisa inntr-o fereastra separata site-ul "UPM"



         Atributele acceptate de eticheta <iframe> sunt în parte preluate de la marcatorii <frame> si < frameset>, cum ar fi: src, border, frameborder, bordercolor, marginheight, marginwidth, scrolling, name, noresize; sau de la marcatorul < img > vspace, hspace, align, width, height;
        Folosind marcatorul iframe putem reproiecta schita web-siteului creat anterior astfel incat ea sa devina dinamica:



    Schitarea unui WEB-site

    Meniu

  • Imprimante cu jet
  • Imprimante laser
  • Scanere
    •
    Baza paginii