Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • HTML Tag-Uri de Baza

    Încărcat de

    George Ungureanu
    13 vizualizări10 pagini
    sd

    Titlu original

    HTML Tag-uri de Baza

    Drepturi de autor

    © Attribution Non-Commercial (BY-NC)

    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
    sd

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca DOC, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    13 vizualizări10 pagini

    HTML Tag-Uri de Baza

    Încărcat de

    George Ungureanu
    sd

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca DOC, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 10

    HTML (Hyper Text Markup Language) limbaj de descriere a paginilor Web Website = colectie de pagini web, legate intre

    e ele prin hiperlink-uri (site-ul se lanseaza cu pagina de start, index.html) Pentru realizarea unui website bazat pe HTML si CSS (Cascading Style Sheets), se creaza o structura arborescenta de directoare care vor contine resursele site-ului (imagini, fisiere auxiliare txt, pdf etc.) In directorul radacina al site-ului se vor salva index.html, style.css si celelalte pagini web care formeaza site-ul. Structura unui document html <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Numele paginii care va apare in tab-ul browser-ului</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="default.css" rel="stylesheet" type="text/css" /> </head> <body> ...... </body> </html> Resurse de documentare: http://www.w3schools.com, http://www.marplo.net/curs_css/ HTML - Marcaje (tag-uri) de baza <HTML> </HTML> <HEAD> </HEAD> <TITLE> </TITLE> <BODY> </BODY> BGCOLOR = culoare TEXT=culoare LINK=culoare VLINK=culoare ALINK=culoare BACKGROUND = url <P> <Hn> <Hn> Defineste un fisier in format Web Antetul documentului Tilul documentului Corpul paginii HTML Culoarea de fond a paginii Culoarea textului pe paginii Culoarea legaturiilor nevizitate din paginii Culoarea legaturiilor vizitate din paginii Culoarea legaturiilor pe durata clicului exacutat de utilizator Imaginea de fond pentru pagina Paragraf Nivel de subtitlu al documentului (n = 1-6)

    <FONT> </FONT> SIZE=n FACE="a,b" COLOR=s <BR> <PRE> </PRE> <!-<CENTER> </CENTER> <HR> SIZE=x WIDTH=x NOSHADE ALIGN=x COLOR=x <A> </A> HREF=url HREF=#nume Name=nume -->

    Specifica atribute ale textului incadrat Dimensiunea textului este 1-7 Specifica fontul: a, daca este disponibil, sau b Culoarea textului: fie un nume de culoare , fie o valoare RGB Linie noua Informatie preformatata Comenatriu HTML Centreaza materialul in pagina Rigla orizontala Inaltimea riglei in pixeli Latimea riglei in pixeli sau in procente Dezactiveaza afisarea umbrei pentru rigla orizontala Alinierea riglei orizontala in pagina (left, center, right) Culoarea riglei orizontale(numai pentru IE) Marcaj de tip ancora (link) Referinta hipertext Referinta catre o ancora interna Definitia unei ancore interne

    Marcaje pentru liste

    <DD> <DL> </DL> <DT> <LI> <OL TYPE=tip START=x

    Descriere definitie Lista de tip definitie Termen de definitie Element de lista Lista ordonata (numerotata) Tipul numerotarii. Valori posibile: A, a, I, i, 1 Numarul de inceput al listei ordonate

    <UL TYPE=forma

    Lista neordonata (marcata) Forma marcajului. Valori posibile: circle, square, disc.

    Formatarea caracterelor

    <B> </B> <I> </I> <U> </U> <TT> </TT> <CITE> </CITE> <CODE> </CODE> <EM> </EM> <KBD> </KBD> <STRONG> </STRONG> <VAR> </VAR>

    Afiseaza text cu caractere aldine Afiseaza text cu caractere cursive Afiseaza text subliniat Text cu font monospatiu Citare bibliogarfica Listing de program Stil logic de evidentiere Text de la tastatura Evidentiere logica puternica Program sau variabila

    <BASEFONT SIZE = n> Specifica dimensiunea implicita a fontului din pagina

    Marcaje pentru cadre

    <FRAMESET> </FRAMESET> COLS=x ROWS=x BORDER=x FRAMEBORDER = x FRAMESPACING = x <FRAME> SRC=url NAME=nume SCROLLING=scrl

    Definirea redactarii paginii Numarul si marimea relativa a coloanelor Numarul si marimea relativa a liniilor Specifica starea "on" (activa) sau "off" (inactiva) pentru chenarul cadrului FRAMESET (1 sau 0) Specifica marimea chenarului Marimea spatiului dintre doua cadre adiacente Definitia unui anumit cadru URL-ul sursa pentru cadru Numele cadrului (utilizat impreuna cu TARGET=nume ca parte componenta a marcajului de tip ancora <a> Defineste optiunea barei de derulare.Valori posibile:

    on(activa), off(inactiva), auto (automat) FRAMEBORDER=x MARGINHEIGHT=x MARGINWIDTH=x <NOFRAMES> </NOFRAMES> <IFRAME> SRC=url NAME=s HEIGHT=x WIDTH=x Marimea chenarului din jurul cadrului Spatiul suplimentar de deasupra si dedesubtul unui anumit cadru Spatiu suplimetar la stanga si la dreapta unui anumit cadru Sectiunea de pagina afisata pentru utilizatorii care nu pot vedea un cadru Cadru intern (numai pentru (IE) Sursa cadrului Numele ferestrei (util pentru TARGET) Inaltimea cadrului inglobat Latimea cadrului inglobat

    Marcaje pentru tabele

    <TABLE> </TABLE> Tabel HTML BORDER=x CELLPADDING=x CELLSPACING=x WIDTH=x FRAME=valoare RULES=valoare BORDERCOLOR = culoare BORDERCOLORLIGHT = culoare BORDERCOLORDARK = culoare ALIGN=left ALIGN=right HSPACE=x Chenarul tabelului Spatiul suplimentar in cadrul celulelor tabelului Spatiul suplimentar intre celulele tabelului Latimea impusa tabelului Ajustarea fina a tabelului Ajustarea fina a riglelor tabelului Specifica culoarea chenarului tabelului Cea mai deschisa culoare din cele doua culori specificate Cea mai inchisa culoare din cele doua culori specificate Aliniaza tabelul la marginea din stanga a paginii, iar textul curge in partea dreapta Aliniaza tabelul la marginea din dreapta a paginii, iar textul curge in partea stanga Spatiu suplimetar pe orizontala in jurul tabelului

    VSPACE=x COLS=x <COLGROUP> </COLGROUP> <COL WIDTH=x> <THEAD> </THEAD>

    Spatiu suplimetar pe verticala in jurul tabelului Specifica numarul de coloane ale unui tabel Defineste un set de definitii de coloane cu ajutorul marcajului <col> Defineste latimea unei coloane exprimata in pixeli Defineste titlul tabelului

    <BODY> </TBODY> Defineste corpul tabelului <TR </TR> BGCOLOR=culoare ALIGN=aliniere <TD </TD> BGCOLOR=culoare COLSPAN=x ROWSPAN=x ALIGN=aliniere VALIGN=aliniere BACKGROUND=url NOWRAP ALIGN=baseline ALIGN=caracter ALIGN=justify Linie de tabel Specifica culoarea de fond pentru intreaga linie Alinierea celulelor de pe linia curenta (left, center, right) Celula de date a tabelului Specifica culoarea de fond pentru celula de date Numarul de coloane pe care se intinde celula curenta de date Numarul de linii pe care se intinde celula curenta de date Alinierea materialului din cadrul celulei de date.Valori posibile: (left, right, center) Alinierea pe verticala a materialului din cadrul celulei de date.Valori posibile: (top, bottom, middle) Specifica imaginea de fond pentru celula tabelului Nu permite despartirea textului pe linii in cadrul unei celule Aliniaza celule de date cu linia de baza a textului adiacent Aliniaza o coloana fata de un anumit carcater (caracterul prestabilit este ".") Aliniaza atat marginea din stanga cat si marginea din dreapta a unui text

    Adaugarea imaginilor

    <IMG SRC=url

    Marcajul de introducere a imaginilor Sursa fisierului grafic

    ALT=text

    Textul alternativ de afisat, daca este necesar

    ALIGN=alini Alinierea imaginii in pagina. Valori posibile: top (sus), middle(in ere mijloc), bottom (jos), left (in stanga), right (la dreapta) HEIGHT=x WIDTH=x BORDER=x HSPACE=x VSPACE=x Inaltimea imaginii (in pixeli) Latimea imaginii Chenarul din jurul imaginii, atunci cand aceasta este utilizata ca hiperlegatura Spatiul suplimentar pe orizontala din jurul imaginii (in pixeli) Spatiul suplimentar pe verticala din jurul imaginii (in pixeli)

    Marcaje pentru formulare

    <FORM> </FORM> ACTION=url METHOD=metoda <INPUT TYPE=optiune NAME=nume VALUE=valoare

    Formular HTML activ Programul CGI de pe serverul care receptioneaza datele Modul in care datele sunt transmise serverului(GET sau POST) Camp de text sau alte date de intrare Tipul campului de intrare <INPUT>. Valori posibile: text,password,checkbox,hidden,file, radio,submit,reset,image. Numele simbolic al valorii campului Continutul prestabilit al campului de text

    CHECKED= optiune Buton/caseta marcata in mod prestabilit SIZE=x SIZE=x <SELECT> </SELECT> NAME=nume SIZE=x MULTIPLE=x <OPTION VALUE=valoare Numarul de caractere al unui camp de text Numarul maxim de caractere acceptate Grup de casete de validare Numele simbolic al valorii campului Numarul de articole de meniu care se afiseaza odata (prestabilit=1) Permite selectia unor articole de meniu multiple Alegerea particulara intr-un domeniu <SELECT> Valoarea rezultanta a acestei selectii din meniu

    <TEXTAREA> </TEXTAREA> NAME=nume ROWS=x COLS=x <FIELDSET> </FIELDSET> <LEGEND> </LEGEND> ALIGN=s TABINDEX=x ACCESKEY=c DISABLED READONLY

    Camp de intare de tip text pe linii multiple Numele simbolic al valorii campului Numarul de linii al casetei de text Numarul de coloane (caractere) pe linie al casetei de text Imparte formularul in parti logice Numele asociat setului de campuri (fieldset) Specifica alinierea legendei (explicatiei) afisate (top,bottom,left,right) Specifica ordinea elementelor atunci cand utilizatorul apasa tasta Tab Specifica tasta care asigura comanda rapida de la tastatura asociata unui anumit element Elementul este inactiv, dar este afisat pe ecran Elementul este afisat pe ecran dar nu poate fi editat

    Carcatere speciale

    & < >

    &amp; ampersand tilda mai mic (less than) mai mare (greater than) simbolul de copyright simbolul pentru marca inregistrata a mic cu accent ascutit (acute) a mic cu accent circiumflex n mic cu tilda o mic barat (slash)

    HTML avansat

    <STYLE>

    Specifica informatii referitoare modelul de stiluri

    </STYLE> TYPE=val <SCRIPT> </SCRIPT> LANGUAGE=limbaj EVENT=eveniment FOR=numeobiect Tipul modelului de stiluri. De regula "text/css" Include un script de regula Javascript, in pagina Web Limbajul utilizat Eveniment care declanseaza executia unor scripturi specifice Numele obiectului din pagina asupra caruia actioneaza scriptul

    DIV
    - Tag-ul DIV creaza sectiuni de blocuri in pagina, al caror forma si grafica de continut pot fi manipulate pentru fiecare separat. Are doar un singur atribut HTML, align (pt. aliniere pe orizontala) care poate avea urmatoarele valori: left (stanga), right (dreapta), center (centru), justify (distanta textului fata de margini egala). Tag-ul <div></div> este unul din cele mai folosite elemente HTML, aceasta deoarece in combinatie cu proprietati CSS poate crea efecte grafice deosebite, iar in interiorul lui pot fi incluse oricare elemente HTML: tabele, formulare, marcatori, linii sau alte DIV-uri. Cadrul in care acestea sunt adaugate poate avea propriul fundal (background), lungime, inaltime si margini cu diferite linii. Iata un exemplu in care avem 2 div-uri, unul contine un formular iar celalalt o lista "<ul></ul>", fiecare DIV cu proria culoare de fundal, dimensiuni stabilite si margini diferite.
    <div style="width:250px; background:#aaee88; border:1px solid blue;"> <form action="" method="post"> Nume: <input type="text"></input><br> E-mail:<input type="text"></input><br> <input type="submit" value="Trimite"></input> </form> </div> Alt DIV <div style="width:180px; background:#88aafe; border:5px outset #888888;"> <ul> <li>Linie 1</li> <li>Linie 2</li> <li>Linie 3</li> </ul> </div> - In atributul "style" sunt specificate proprietatile CSS care stabilesc aspectul grafic al fiecarui DIV (lungime in pixeli, fundal si bordura). Acest cod va afisa intr-o pagina web urmatorul rezultat:

    Nume: E-mail:
    Trimite

    Alt DIV

    Linie 1 Linie 2

    Linie 3

    Un alt aspect important este si faptul ca putem pozitiona continutul din interiorul tag-ului <div> </div> oriunde in pagina, folosind proprietati CSS precum:

    position - care poate lua valorile: static, relative, fixed sau absolute (pt. mai multe detalii vezi Pozitionare CSS). margin - care stabileste distanta dintre marginea cadrului sectiunii (blocul) DIV si elementele din jurul lui (pt. mai multe detalii vezi Margini si chenare CSS).

    Iata un exemplu in care, prin folosirea mai multor DIV-uri pozitionate suprapus, putem afisa in pagina un titlu cu aspect grafic deosebit. Codul este urmatorul: <div style="position:relative; font-size:21px;"> <div style="position:absolute; margin-top:-1; margin-left:-2; color:white;">Titlu Exemplu</div> <div style="position:absolute; margin-top:1; margin-left:2; color:black;">Titlu - Exemplu</div> <div style="position:absolute; margin-top:0; margin-left:0; color:silver;">Titlu - Exemplu</div> </div> In acest exemplu avem un prim DIV cu atributul "style" in care avem o proprietate de pozitionare relativa (pt. a pozitiona toate celelalte elemente pe care el le incadreaza dupa contextul scris anterior) si o alta proprietate pentru marimea textului. In interiorul acestui DIV avem alte 3 divuri, pozitionate absolut si care incadreaza fiecare cate un text identic. Prin pozitionarea absoluta div-urile se suprapun, la o distanta stabilita de proprietatile "margin-top" si "margin-left", iar prin culoare diferita (cu proprietatea "color") data textului din fiecare "div" va apare in pagina web urmatorul rezultat:

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