Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • TH B Tic Avansati B HTML

    Încărcat de

    lebaner
    17 vizualizări12 pagini

    Titlu original

    Th b Tic Avansati b HTML

    Drepturi de autor

    © Attribution Non-Commercial (BY-NC)

    Formate disponibile

    PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document

    Drepturi de autor:

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

    TH B Tic Avansati B HTML

    Încărcat de

    lebaner

    Drepturi de autor:

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

    HTML Concepte cheie. Crearea unei pagini HTML simpl.

    Introducere in HTML
    HyperText Markup Language (HTML) este un limbaj de marcare utilizat pentru crearea paginilor web. Scopul HTML este mai degraba prezentarea informatiilor paragrafe, fonturi, tabele s.a.m.d. decat descrierea semanticii documentului. HTML este o forma de marcare orientata catre prezentarea documentelor text pe o singura pagina, utilizand un software de redare specializat, numit agent utilizator HTML, cel mai bun exemplu de astfel de software fiind browserul web. HTML furnizeaza mijloacele prin care continutul unui document poate fi adnotat cu diverse tipuri de metadate si indicatii de redare. Indicatiile de redare pot varia de la decoratiuni minore ale textului, cum ar fi specificarea faptului ca un anumit cuvant trebuie subliniat sau ca o imagine trebuie introdusa, pana la scripturi sofisticate, harti de imagini si formulare. HTML-ul nu este un limbaj case sensitive (nu face deosebirea intre litere mici si mari). Pagina principala a unui domeniu este fisierul index.html respectiv index.htm Aceasta pagina este setata a fi afisata automat la vizitarea unui domeniu. De exemplu la vizitarea domeniului www.nume.ro este afisata pagina www.nume.ro/index.html.

    Structura documentului HTML


    Paginile HTML sunt formate din etichete sau tag-uri si au extensia .html sau .htm. In marea lor majoritate aceste etichete sunt pereche, una de deschidere <eticheta> si alta de inchidere </eticheta>. Mai exista si cazuri in care acestea nu se inchid. Atunci se foloseste <eticheta />, iar browserul interpreteaza aceste etichete afisand rezultatul pe ecran. Un document HTML se imparte in trei sectiuni:

    <html> - Orice document html se incepe cu marcajul html. Acest tag transmite browser-ului ca documentul respectiv este de fapt un document HTML , dand astfel indicatii asupra modului in care vor fi interpretate diferite partitii ale fisierului <head> - Cu acest marcaj se incepe cea de-a doua sectiune, care contine informatii ce nu se afiseaza in browser, cu exceptia marcajului <title> in care se specifica titlul paginii web si apare ca titlul ferestrei browser-ului. Marcajul <head> > contine descrieri de tip <meta>, stiluri pentru formatarea textului, scripturi si linkuri catre fisiere externe (de exemplu scripturi, fisiere de tip CSS sau favicon), etc. Etichetele de tip meta contin cuvinte cheie, descrierea paginii, date despre autor, informatii utile motoarelor de cautare si au urmatorul format: <META NAME="nume" CONTENT="continut">

    <body> - In interiorul acestui marcaj se afla tot continutul paginii web care va aparea in browser (text, imagini,etc.).

    Pentru a crea o pagina HTML simpla scrieti codul de mai jos intr-un editor de texte (Notepad) si apoi salvati-l intr-un fisier cu extensia .html (index.html). Pentru a o afisa, fisierul creat trebuie deschis cu un browser web(Mozilla Firefox, Internet Explorer).

    <html> <head> <title> Acesta este titlul paginii </title> </head> <body> Acesta este continutul paginii. </body> </html>

    Atribute HTML
    Atributele sunt ca o descriere pentru taguri, ele mereu au nume si o valoare. Un atribut se scrie sub forma: nume=valoare si se introduce in tag sub forma <tag nume=valoare></tag>. Printre acestea sunt tagurile de aliniere, de formatare a textului, a culorii diferitor elemente, pentru link-uri, etc. Ex: La tagul body putem sa adaugam atributul bgcolor cu valoarea yellow si atributul align cu valoarea center sub forma:
    <html> <head> <title> Acesta este titlul paginii </title> </head> <body bgcolor="yellow"> Acesta este continutul paginii. <h1 align="center"> Header central </h1> </body> </html>

    Daca puneti aceste tag-uri in pagina care ati creat-o veti observa ca fundalul ei devine galben iar headerul este aliniat central.

    Text HTML
    Textul se poate introduce si fara taguri. Dar daca se doreste un text de o anumita forma atunci acesta se introduce intre tag-uri ca cele de mai jos. <font> </font> - intre acestea se introduce textul care se doreste a fi afisat pe pagina (acest tag nu va schimba deloc forma textului). Acesta are trei atribute optionale: color, face si size. Astfel cu ajutorul lui se poate specifica culoarea textului, fontul si dimensiunea acestuia.

    <b></b> sau <strong></strong> - defineste text ingrosat <big></big> - defineste text mare <i></i> sau <em></em> - defineste text italic <u>...</u> - textul apare subliniat <s>...</s> - textul apare taiat Anteturile sunt folosite in general pentru evidentierea titlurilor (h - headings). In dependenta de numarul din dreptul numelui marcajului, variaza dimensiunea fontului. HTML adauga automat o linie goala in plus inainte si dupa un antet. <h1></h1> -defineste un antet de cea mai mare marime; <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> -defineste antetul de cea mai mica marime; Marcajul <p>...</p> specifica un paragraf. Marcajul <br> inseamna rand nou. Atunci cand se doreste ca o propozitie sa apara in rand nou, va trebui sa se includa acest marcaj(<br> e echivalentul lui "Enter" in Word, de exemplu.) El este nepereche, neavand nevoie de tag de inchidere. Tot ceea ce urmeaza in interiorul marcajului <code>...</code> specifica un fragment de cod. <!-- Acesta este un comentariu --> - cu acest tag se scrie un comentariu in codul html, comentariu ce este ignorat de browser. Pentru a vedea codul html se selecteaza View page source dup ace se apasa click dreapta pe o pagina web.
    <html> <head> <title> Acesta este titlul paginii </title> </head> <body> <h1> Titlul paginii </h1> <h3> Un titlu mai mic </h3> <p> Un text oarecare, un text oarecare, un text oarecare </p> <p align="center"> Paragraf aliniat la centru </p> <p align="right"> Paragraf aliniat la dreapta </p> <b> caractere ingrosate </b>, de asemenea <strong> caractere ingrosate </strong> <br> <i> caractere inclinate </i>, de asemenea <em> caractere inclinate </em> <br> <u> caractere subliniate </u> <br> <s> caractere taiate </s> <br> <!-- Acesta este un comentariu --> <font color="red" size="5" face="arial"> Font Arial, culoare rosie, dimensiunea 5. </font> </body> </html>

    Liste in HTML
    Exista trei tipuri de liste in HTML: 1. Liste de definitii 2. Liste neordonate 3. Liste ordonate Liste de definitii - se creaza cu ajutorul marcajelor: <dl>...</dl> - lista de definitii <dt>...</dt> - termenul definit <dd>...</dd> - definitia
    <dl> <dt><b>Ingrediente</b></dt> <dd>100g zahar</dd> <dd>50g faina</dd> <dd>3 oua</dd> <dt><b>Prepararea</b></dt> <dd>Se dau la mixer</dd> <dd>Se pun in cuptor pe 10 minute <br> la 150 grade</dd> </dl>

    Liste neordonate - se realizeaza cu ajutorul marcajelor: <ul>...</ul> - lista neordonata <li>...</li> - elementul listei
    <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul>

    Liste ordonate - se definesc cu ajutorul marcajelor: <ol>...</ol> - lista ordonata <li>...</li> - elementul listei
    <ol> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ol>

    Link-uri in HTML
    Link-urile (sau referintele) constituie un element fundamental in elaborarea unui site. In lipsa lor, siteul ar fi format doar dintr-o pagina de dimensiuni foarte mari. Un link se defineste cu ajutorul marcajului <a>...</a> care trebuie sa includa atributul href continand calea pana la fisierul destinatie. Exista doua tipuri de legaturi: interne si externe. Legatura interna este o legatura in interioul site-ului. Daca in interiorul unei pagini este definit link-ul Galerie care duce catre pagina galerie.html din cadrul aceluiasi site, atunci codul ar trebui sa aiba urmatoarea forma:
    <a href="galerie.html">Galerie<a>

    Legatura externa este o legatura care duce spre un site extern. Daca in interiorul unei pagini este definit link-ul Galerie care duce catre pagina galerie.html din cadrul site-ului www.altsite.ro, atunci codul ar trebui sa aiba urmatoarea forma:
    <a href="http://www.altsite.ro/galerie.html">Galerie<a>

    Implicit, dupa accesarea link-ului, pagina ceruta va fi afisata in fereastra curenta. In cazul cand se doreste ca pagina sa se deschida intr-o noua fereastra, marcajului <a> i se adauga atributul target=_blank.
    <a href=" http://www.altsite.ro/galerie.html" target="_blank">Galerie<a>

    Legaturile pot fi si catre alte tipuri de fisiere: imagini, fisiere audio, fisiere video.

    Imagini in HTML
    Imaginile in paginile web sunt foarte importante. Cu ajutorul lor site-ului prinde viata si capata atractivitate. Inserarea unei imagini in pagina se face cu ajutorul marcajului <img> care are ca atribute:

    src - fisierul imagine width - latimea imaginii height - inaltimea imaginii alt - valoarea acestuia este un text. Poate fi o descriere a imaginii sau paginii. Textul este afisat in browser doar atunci cand imaginea inca nu sa incarcat sau nu poate fi gasita. border - chenar. Poate lua valorile 1 (cu chenar) sau 0 (fara chenar). align - alinierea imaginii la dreapta - right, stanga - left, centru - center.

    Marcajul <img> nu este un marcaj cu pereche. Adaugarea la sfarstit a marcajului de genul </img> este inutila. O simpla imagine poate avea rol de link in cazul cand se include in interiorul marcajului <a>...</a>.
    <a href=galerie.html> <img src="(9).jpg" align="right" border="2" height="250" alt="Energie verde"> <p>Textul in partea stanga, imaginea in dreapta.</p> </a>

    Tabele in HTML
    Cu ajutorul tabelelor informatia capata o claritate mai mare. Deasemenea, importanta tabelelor se remarca si prin faptul ca acestea pot fi folosite la definirea structurii paginii (layout-ul), ex: headerul, meniul, footerul, etc. Desi in zilele noastrea aceasta numai este o practica obisnuita (locul ei fiind luat de CSS), totusi ramane ca o alternativa. Un tabel este compus din randuri si coloane si se se defineste cu ajutorul marcajului <table>, continand in sine definitiile randului - <tr> (tr - table row) si definitiile coloanei - <td> (td - table data). Cele mai uzuale attribute ale tabelului sunt urmatoarele:

    align - alinirea tabelului, valori posibile: left, center, right valign - alinierea pe verticala, valori posibile: top (sus), middle (mijloc), bottom (jos) width - latimea specificata in pixeli height - inaltimea specificata in pixeli bgcolor - culoarea de fundal border - chenar. In cazul cand border=0, chenarul este invizibil cellpadding - distanta dintre marginile celulelor si continutul acestora cellspacing - distanta dintre celulele unui table

    In afara de aceste atribute, exista inca doua atribute foarte importante ale marcajului <td>. Acestea sunt:

    colspan - numarul de coloane pe care se intinde celula rowspan - numarul de randuri pe care se intinde celula

    <table border="1" align="center" width="350"> <tr> <td rowspan="5" bgcolor="brown" align="center"><b> Browser </b></td> <td colspan="2" bgcolor="orange" align="center"> <b>Cota de piata</b></td> </tr> <tr> <td>Firefox</td> <td width="50">38.1</td> </tr> <tr> <td>Chrome</td> <td>33.4</td> </tr> <tr> <td>Internet explorer</td> <td>21.2</td> </tr> <tr> <td>Safari</td> <td>4.2</td> </tr> </table>

    Campuri in HTML
    Campurile reprezinta niste zone care au menirea de a prelua de la utilizator date, care ulterior sa fie prelucrate. Definirea unui camp se face prin intermediului marcajului <input />. Atributul type determina tipul campului, si poate lua valorile: text, password si file, pentru definirea unui camp de tip text, parola si respectiv fisier.

    <b>Adresa de e-mail:</b> <input type="text" name="email"/><br><br> <b>Parola:</b> <input type="password" name="parola"/><br><br> <b>Fisier:</b> <input type="file" name="fisier"/>

    Butoane in HTML
    Butoanele, ca si campurile, sunt definite prin intermediul marcajului <input />. <input type="button" /> defineste un buton. <input type="reset" /> defineste un buton de tip reset. El are menirea de a goli toate campurile unui formular. Pentru functionarea corecta, butonul reset trebuie sa fie inclus intr-un formular. <input type="submit" /> defineste un buton de tip submit. Butonul submit trebui sa fie inclus intr-un formular pentru ca sa fie functional si are menirea de a trimite toate datele dintr-un formular la server.
    <form> <input type="text" name="user"/><br><br> <input type="reset"/> <input type="submit" value="Submit"/> </form>

    Butoane radio in HTML


    Butoanele radio permit utilizatorului sa aleaga doar o singura optiune din cele disponibile. Pentru gruparea mai multor radio butoane intr-o singura categorie, fiecare camp trebuie sa fie definit cu acelasi nume. <input type="radio" /> defineste un buton radio. Pentru ca o optiune sa fie implicit selectata, trebuie sa se adauge atributul checked="yes" optiunii respective.
    <p> <b>Tip transfer</b> <br> Western Union: <input type="radio" name="transfer"/><br> PayPal: <input type="radio" name="transfer"/><br> Check:<input type="radio" name="transfer"/><br> </p> <p> <b>Valuta</b><br> USD: <input type="radio" name="valuta"/><br> EU: <input type="radio" name="valuta"/><br> </p>

    Checkbox-uri in HTML
    Checkbox-urile, la fel ca si radio butoanele ofera utilizatorului posibilitatea de a alege o optiune din mai multe variante. Spre deosebire de radio butoane, unde este permisa alegerea doar a unei singure optiuni, checkboxurile permit alegerea simultana a mai multor optiuni. <input type="checkbox" /> defineste un checkbox. Pentru ca o optiune sa fie implicit selectata, trebuie sa se adauge atributul checked="yes" optiunii respective.
    <p> <b>Limbi cunoscute</b> <br> Romana: <input type="checkbox" checked="yes" name="limba" value="Romana"/> <br> Engleza: <input type="checkbox" name="limba" value="Engleza"/> <br> Franceza: <input type="checkbox" name="limba" value="Franceza"/> </p>

    TextArea in HTML
    Un element de tip textarea defineste un camp de text cu mai multe linii. Campurile de acest fel sunt folosite de obicei pentru introducerea unor comentarii, scrierea unui mesaj sau in general atunci cand utilizatorul are nevoie de mai mult spatiu de exprimare. Definirea controlului are loc prin intermediul marcajelor <textarea> </textarea>. Dimensiunele campului textarea se specifica prin numarul de coloane si randuri cu ajutorul atributelor cols si respectiv rows.

    Atributul wrap specifica felul in care va reactiona textul atunci cand acesta va atinge sfarsitul liniei. Exista 3 valori pe care le poate lua acest atribut:

    soft - va plasa un enter la sfaritul fiecarei linii, dar nu va trimite la server caracterul enter (carriage return) hard - arata exact asa ca si "soft", insa spre deosebire de acesta, caracterul enter este trimis la server. off - Textul este afisat si trimis la server exact asa cum este scris.

    Alte doua attribute ale unui textarea sunt readonly si disabled. Readonly poate lua valorile "yes" sau "no". Cu ajutorul acestui atribut se specifica daca continutul campului de text va putea sau nu fi modicat. Disabled este asemanator lui readonly, deasemenea nu permite modificarea textului, insa spre deosebire de acesta, textul va fi afisat in gri. In asa fel utilizatorul va percepe vizual ca acel camp nu poate fi modificat. De mentionat ca textul dintr-un textarea definit cu "readonly" putea fi selectat cu mouse-ul, si ulterior copiat, pe cand "disabled" nu ofera aceasta posibilitate.
    <textarea rows="4" cols="22" wrap="soft" > Hello World! </textarea> <textarea rows="4" cols="22" wrap="hard" > Hello World! </textarea> <textarea rows="4" cols="22" wrap="off"> Hello World! </textarea> <p> <textarea rows="4" cols="30" readonly="yes" > Hello World! </textarea> <textarea rows="4" cols="30" disabled="yes" > Hello World! </textarea> </p>

    Select in HTML
    Tagul <select> este utilizat pentru crearea listelor (drop-down lists). Cu ajutorul tagului <option> din interiorul elementului <select> se definesc optiunile disponibile in lista. Implicit meniul va afisa primul element din lista. Pentru a afisa un alt element decat cel implicit, se va specifica atributul selected="yes" optiunii care dorim sa fie afisata prima in lista.

    Implicit doar 1 singur element din lista este vizibil, insa acest lucru se poate schimba cu ajutorul atributului size. Implicit se permite selectarea unui singur element din lista, insa este posibila selectarea mai multor elemente din cadrul aceleeasi liste. Pentru aceasta se va specifica atributul multiple="yes".
    Limba materna: <select> <option>Engleza</option> <option selected="yes">Romana</option> <option>Franceza</option> </select> <p> Limbi vorbite: <br> <select size="4" multiple="yes"> <option>Romana</option> <option>Engleza</option> <option>Franceza</option> <option>Germana</option> </select> </p>

    Formulare in HTML
    Formularele reprezinta o modalitate de comunicare intre utilizatori si server. Un formular se defineste cu ajutorul marcajului <form>, iar in interiorul acestuia se gasesc diferite campuri de introducere a datelor. Campurile unui formular destinate pentru introducerea datelor se definesc prin intermediul marcajului <input>. Pentru transmiterea informatiilor catre server se utilizeaza una din cele doua metode:
    metoda get - informatiile din formular sunt vizibile in URL metoda post- informatiile din formular nu sunt vizibile in URL

    Atributul action are ca valoare URL-ul careia ii vor fi transmise informatiile din formular, pentru prelucrare. Campurile unui formular sunt definite cu ajutorul marcajului <input> care poate lua urmatoarele atribute:

    type - tipul campului. Poate lua urmatoarele valori:


    o o o

    button - definirea unui buton checkbox - casute de bifat file - permite utilizatorului sa selecteze un fisier din calculatorul sau

    o o o o o o

    hidden - acest camp nu va aparea in formular, va fi invizibil. submit - informatiile din formular sunt trimise spre prelucrare la URL-ul indicat in action. password - acest camp se foloseste la introducerea parolei. Din motive de securitate se inlocuieste fiecare caracter tastat cu un asterix (*). radio - reprezinta un set de elemente cu un singur nume, din care se poate selecta doar unul. text - camp in care utilizatorul poate introduce text. reset - buton la apasarea careia se goleste formularul.

    name - numele elementului value - valoarea atributului elementului size - lungimea campului de tip text sau password maxlength - numarul maxim de caractere care pot fi introduse intr-un camp de tip text sau password disabled - dezactivarea unui element.
    <form action="mailto:AdresaTa@email.com" method="POST"> Nume:<br> <input type="text" name="name" size="25"><br> Email:<br> <input type="text" name="email" size="30"><br> Mesaj:<br> <textarea cols="30" rows="5"></textarea><br> <input type="submit" name="submit" value="Trimite"> <input type="reset" name="reset" value="Reseteaza"> </form>

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