Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Curs HTML

    Încărcat de

    NYILAS ROBERT
    18 vizualizări8 pagini
    curs HTML

    Titlu original

    curs HTML

    Drepturi de autor

    © © All Rights Reserved

    Formate disponibile

    DOC, PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    curs HTML

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca DOC, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    18 vizualizări8 pagini

    Curs HTML

    Încărcat de

    NYILAS ROBERT
    curs HTML

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca DOC, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 8

    LIMBAJUL HTML

    HTML este prescurtarea de la Hypertext Markup Language, ceea ce reprezinta de fapt limbajul
    pe care browserele de internet il inteleg si cu ajutorul lui pot fi afisate paginile web.

    Invatarea limbajului HTML este foarte usoara, nu ai nevoie decat de urmatoarele:


    • sa stii sa utilizezi un editor de text (ex: Notepad etc.)
    • sa ai cel putin un browser de internet (ex: Microsoft Internet Explorer, Netscape Comunicator
    etc.)

    Despre tag-uri
    Tag-urile nu sunt altceva decat niste marcaje sau etichete pe care limbajul HTML le foloseste
    alaturi de texte pentru a ajuta browser-ul de internet sa afiseze corect continutul paginii web.
    Aceste tag-uri (etichete) pot fi de doua feluri:
    - tag-uri pereche (un tag de inceput si unul de incheiere). Exemple: <HTML> si
    </HTML>; <TITLE> si </TITLE>; <HEAD> si </HEAD>;
    - tag-uri singulare (nu au un tag de incheiere) Exemple: <HR>, <BR>.

    Tag-urile au atribute (ex. <body bgcolor=”red”>). Atributele au valori: =”red”


    Structura: <tag atribut1=”valoare”, atribut2=”valoare”>

    Structura de baza a unui document: EXEMPLU


    <HTML>
    <HEAD>
    <TITLE>Prima mea pagina web</TITLE>
    </HEAD>
    <BODY>
    Bine ai venit!<BR>
    Vom invata impreuna limbajul HTML. Aceasta este prima mea pagina web!<BR>
    </BODY>
    </HTML>

    Salvarea paginii web:


    File – save as – file name – introducem numele paginii cu extensia html(ex: nume.html)

    Inserarea şi formatarea unui text: corp de literă, mărime, stil, culoare –


    obţinerea culorii

    Tag –uri: <br> -trece pe alt rand


    <p> paragraf </p> cu atributul: align=center, left, right, justify
    Corpul documentului: <body> cu atributele: bgcolor –culoare fond
    background – imaginea de fundalul al paginii

    ex. <BODY BACKGROUND=”../Poze/background1.jpg”>

    1
    Formatarea textului: <FONT> cu atributele: color, face, size,
    ex. <FONT COLOR=”green” FACE=”arial” SIZE=”3”>…text.…</FONT>
    Stilul textului <B>Text bold</B>
    <I>Text italic</I>
    <U>Text subliniat</U>
    <CENTER>Text centrat</CENTER>

    Pentru titluri: Atunci cand avem nevoie sa folosim un titlu putem apela la tag-urile <H1>,
    <H2>, <H3>, <H4>, <H5>, <H6>. (au si tag-uri de incheiere).
    Ex. <H1 align=”left”> textul titlului </H1>.
    Tag-urile <H1> si </H1> - caracterele cele mai mari
    <H6> si </H6> - caracterele cele mai mici.

    Tag-urile acestea accepta atributul ALIGN cu ajutorul caruia titlul va putea fi aliniat la stanga, la
    centru sau la dreapta.

    Linie orizontala <HR>:


    ex. <HR COLOR="red" WIDTH="50%" SIZE="5%" ALIGN="center">
    (WIDTH="50%"- cu o lungime de jumatate din valoarea implicita; SIZE="5%" – putin mai
    groasa decat valoarea implicita)

    Inserarea unei imagini – modificarea proprietăţilor imaginii: poziţionare,


    dimensiuni, încadrare în text

    Adaugarea imaginilor in paginile web


    Browserele recunosc, in cadrul paginilor web, mai multe formate ale imaginilor. Cele mai
    raspandite sunt cele cu extensia .gif si cele care au una din terminatiile .jpg sau .jpeg.
    <IMG SRC="numeleimaginii.extensie">
    Atentie la extensie. Nu uita sa scrii si extensia imaginii pentru ca altfel imaginea nu va fi
    afisata de browser.

    Pentru o functionare corecta vom utiliza una din urmatoarele linii de cod prin care ii vom
    spune browser-ului ca imaginea se afla in folder-ul Poze:
    <IMG SRC=”../Poze/bebe.jpg”>

    Daca vrei ca imaginea sa fie incadrata de un chenar, foloseste atributul BORDER al tag-ului
    <IMG>. Acest atribut are ca valoare numere intregi pozitive.
    ex. <IMG SRC=”../Poze/bebe.jpg” BORDER=5>

    Folosirea imaginilor alaturi de texte


    Pentru a alinia o imagine vom folosi atributul ALIGN al tag-ului <IMG>. Atributul ALIGN poate
    avea una dintre valorile: left sau right, aliniere la stanga sau la dreapta paginii.
    ex. <IMG SRC="../Poze/euro.jpg" BORDER=5 ALIGN=left>

    Daca vrei ca textul sa fie afisat la o anumita distanta de imagine, foloseste atributele HSPACE
    (spatiu pe orizontala) si VSPACE (spatiu pe verticala). Valorile acestor atribute trebuie sa fie
    numere intregi, care reprezinta de fapt distanta in pixeli dintre imagine si text.
    ex. <IMG SRC=”../Poze/euro.jpg” BORDER=5 ALIGN=”left” HSPACE=50 VSPACE=20>

    2
    Formatarea unui fundal sau a unei teme
    Acum in codul paginii imagini.html din folder-ul Pagini adauga tag-ului <BODY> atributul
    BACKGROUND dupa cum urmeaza:
    ex. <BODY BACKGROUND=”../Poze/background1.jpg”>

    Realizarea unei legături pe un text

    Legatura catre o alta pagina


    <A HREF=numelepaginii.html>Textul legaturii</A>
    Fie urmatoarea structura:

    - pentru a adauga o legatura in cadrul unei pagini HTML din directorul Contabilitate
    catre o pagina HTML din directorul Firma 1, vom folosi urmatoarea valoare a atributului
    HREF:
    <A HREF="Firma 1/numelepaginii.html">Text link</A>

    - pentru a adauga o legatura in cadrul unei pagini HTML din directorul Site catre o pagina
    HTML din directorul Carti, vom folosi urmatoarea valoare a atributului HREF:
    <A HREF="Documente/Carti/numelepaginii.html">Text link</A>

    - pentru a adauga o legatura in cadrul unei pagini HTML din directorul Matematica catre o
    pagina HTML din directorul Scoala, vom folosi urmatoarea valoare a atributului HREF:
    <A HREF="../numelepaginii.html">Text link</A>

    - pentru a adauga o legatura in cadrul unei pagini HTML din directorul Bilanturi catre o
    pagina HTML din directorul Site, vom folosi urmatoarea valoare a atributului HREF:
    <A HREF="../../numelepaginii.html">Text link</A>

    - pentru a adauga o legatura in cadrul unei pagini HTML din directorul Servici catre o
    pagina HTML din directorul Matematica, vom folosi urmatoarea valoare a atributului
    HREF:
    <A HREF="../../Scoala/Matematica/numelepaginii.html">Text link</A>

    - pentru a adauga o legatura in cadrul unei pagini HTML din directorul Firma 2 catre o
    3
    pagina HTML din directorul Firma 3, vom folosi urmatoarea valoare a atributului HREF:
    <A HREF="../Firma 3/numelepaginii.html">Text link</A>
    Legatura catre un site
    <A HREF="adresa site-ului">Textul legaturii</A>
    Atunci cand utilizatorii paginii tale web vor trece cursorul mouse-ului deasupra legaturilor, sa
    apara o mica nota explicativa,
    <BR><A HREF="http://www.evz.ro" TARGET="_blank" TITLE="Ziarul Evenimentul
    Zilei">Evenimentul Zilei</A>

    Legatura catre o sectiune de pagina - atunci cand avem de-a face cu pagini mai lungi,

    Fiecare titlu al sectiunii trebuie definit ca ancora:


    <A NAME="#ancora1">Titlul primei sectiuni</A>
    <A NAME="#ancora2">Titlul sectiunii a doua</A>
    <A NAME="#ancora3">Titlul sectiunii a treia</A>

    Legaturile catre ancorele din cadrul aceleiasi pagini HTML vor avea urmatoarea forma:
    <A NAME="#ancora1">Legatura catre prima sectiune</A>
    <A NAME="#ancora2">Legatura catre a doua sectiune</A>
    <A NAME="#ancora3">Legatura catre a treia sectiune</A>

    Legaturile catre ancore din cadrul altei pagini HTML vor avea urmatoarea forma:
    <A NAME="numelepaginii.html#ancora1">Legatura catre prima sectiune</A>
    <A NAME="numelepaginii.html#ancora2">Legatura catre a doua sectiune</A>
    <A NAME="numelepaginii.html#ancora3">Legatura catre a treia sectiune</A>

    ex. <A HREF="#intrebarea2">2. Ce este un curs online?</A><BR><BR><BR>

    Legatura catre o adresa de e-mail


    <A HREF="mailto:adresa de e-mail">Trimite-mi un e-mail</A>

    Utilizarea unei imagini ca legatura


    <A HREF=numepagina.html><IMG SRC="adresaimaginii"</A>
    ex. <A HREF=intrebari.html><IMG SRC="../Poze/intreb.jpg"></A>

    Cum pot schimba culorile legaturilor?


    Fiecare legatura din cadrul unei pagini web are trei culori:
    • o culoare pentru legaturile nevizitate (nu a fost efectuat nici un click pe ele)
    • o culoare pentru legaturile vizitate (s-a efectuat cel putin un click pe ele)
    • o culoare pentru legaturile active (atunci cand cursorul mouse-ului se afla deasupra lor)

    Pentru fiecare culoare, din cele trei de mai sus, exista cate un atribut al tag-ului </BODY> cu
    ajutorul caruia putem schimba culoarea implicita:
    • LINK pentru legaturile nevizitate
    • VLINK pentru legaturile vizitate
    • ALINK pentru legaturile active
    ex. <BODY LINK=”#FF0000” VLINK=”#000000” ALINK=”FF9600”>

    4
    Inserarea unui tabel; Formatarea tabelului
    Crearea unui tabel
    Pentru a crea un tabel, trebuie sa folosim tag-urile <TABLE> si </TABLE>. Tot ce va fi scris
    intre aceste tag-uri va forma un tabel. Dupa tag-ul <TABLE> urmeaza tag-ul <TR> care vine de
    la "Table Row" (randul tabelului) si reprezinta introducerea unui rand in cadrul tabelului. Tot ce
    va fi scris intre tag-urile <TR> si </TR> va forma un rand al tabelului. Dupa crearea unui rand,
    trebuie sa adaugam in cadrul acestuia, cateva celule, cu ajutorul tag-urilor <TD> si </TD>.
    ex. <HTML>
    <HEAD>
    <TITLE>Primul tabel</TITLE>
    </HEAD>
    <BODY>
    <TABLE>
    <TR>
    <TD><B>Nume</B></TD>
    <TD><B>Prenume</B></TD>
    <TD><B>Nota</B></TD>
    </TR>
    <TR>
    <TD>Ionescu</TD>
    <TD>Bogdan</TD>
    <TD>7</TD>
    </TR>
    <TR>
    <TD>Stancu</TD>
    <TD>George</TD>
    <TD>9</TD>
    </TR>
    <TR>
    <TD>Dumitrescu</TD>
    <TD>Alexandra</TD>
    <TD>10</TD>
    </TR>
    <TR>
    <TD>Marin</TD>
    <TD>Paul</TD>
    <TD>8</TD>
    </TR>
    <TR>
    <TD>Ivanov</TD>
    <TD>Mihaela</TD>
    <TD>9</TD>
    </TR>
    </TABLE>
    </BODY>
    </HTML>

    5
    Proprietatile tabelelor

    Pentru ca liniile unui tabel sa fie vizibile tag-ul <TABLE> trebuie sa fie insosit de atributul
    BORDER (1 sau 0)avand valoarea egala cu cel putin 1. In plus, poti schimba culoarea
    liniilor unui tabel folosind atributul BORDERCOLOR insotit de codul culorii dorite.
    <TABLE BORDER="1" BORDERCOLOR="red">

    Pentru a stabili dimensiunea unui tabel, unui rand sau a unei celule, folosim atributele WIDTH
    pentru latime si/sau HEIGHT pentru inaltime. Pentru alinierea datelor din cadrul tabelului
    folosim atributul ALIGN cu una dintre valorile "left", "center" sau "right". Pentru a alinia datele
    tabelului pe verticala folosim atributul VALIGN insotit de una dintre valorile "top", "middle" sau
    "bottom".

    Pentru a schimba culoarea unei celule, unui rand sau chiar a intregului tabel folosim atributul
    BGCOLOR impreuna cu codul culorii alese.

    Folosirea tabelelor ca plan al unei pagini web


    In plus fata de notiunile invatate pana acum in aceasta lectie, mai trebuie sa retinem inca doua
    atribute foarte importante ale tag-ului <TD>: COLSPAN (numarul de coloane pe care se intinde
    celula) si ROWSPAN (numarul de linii pe care se intinde celula). De exemplu pentru crearea
    tabelului urmator:

    am folosit pentru celula rosie atributul COLSPAN="2",


    deoarece se intinde pe doua coloane, iar pentru celula albastra
    am folosit atributul ROWSPAN="3" deoarece se intinde pe
    trei randuri

    Modalităţi de depozitare a paginilor

    Folosirea cadrelor intr-o pagina web


    Cu ajutorul cadrelor putem imparti o pagina web in mai multe zone, iar apoi putem stabili ce
    pagina va fi afisata in fiecare zona.
    Pentru a imparti o pagina web in mai multe cadre, trebuie sa folosim, inainte de tag-ul <BODY>,
    tag-ul <FRAMESET> insotit de unul dintre atributele <COLS> sau <ROWS>, pentru a
    defini exact cum va fi impartita pagina respectiva. Astfel pentru a imparti pagina in doua
    cadre orizontale vom folosi urmatoarea linie de cod:
    <FRAMESET ROWS="70%,*">
    Se folosesc procente pentru a defini marimea randurilor sau a coloanelor care vor forma cadrele.
    In exemplul de mai sus, primul cadrul va avea 70% din inaltimea paginii, iar al doilea cadru
    restul, adica "*" sau 30%.

    6
    Liste neordonate (UL)
    Fiecare element al listei trebuie introdus de tag-ul <LI>.
    ex. <UL>text
    <LI>text
    <LI>text
    <LI> text
    <LI>text
    <LI> text
    </UL>

    pentru cercuri goale:


    <UL TYPE=circle> text
    pentru patrate pline:
    <UL TYPE=square>text

    Liste ordonate (OL)


    Listele ordonate se formeaza cu ajutorul tag-urilor <OL> si </OL>, denumirea acestora venind
    din limba engleza „ordered list” care inseamna lista ordonata. La fel ca si la listele neordonate,
    fiecare element trebuie introdus de tag-ul <LI>.

    ex. <OL>text
    <LI>text
    <LI>text
    <LI> text
    <LI>text
    <LI>text
    </OL>
    pentru litere mari:
    <OL TYPE=A> text
    pentru litere mici:
    <OL TYPE=a>text
    pentru cifre romane mici:
    <OL TYPE=i>text
    pentru cifre romane mari:
    <OL TYPE=I>text

    DENUMIR CASTANIU MAROON


    CULOARE
    E VERDE GREEN
    NEGRU BLACK GALBEN YELLOW
    ALB WHITE ALBASTR
    ROŞU RED BLUE
    U
    ARGINTIU SILVER VERNIL LIME
    GRI GRAY MĂSLINIU OLIVE
    ALBASTR
    NAVY
    U MARIN

    7
    ______________________________________________________________________________
    prof. Tanu Cocuţa

    S-ar putea să vă placă și