EliteHackers
SALUT 2022!! NE-AM MUTAT PE DISCORD ! Vrei să inviți un prieten? [T]eoria [H]aosului [C]ontrolat - https://discord.com/invite/U4HBCHzm7r Acesta aste link-ul oficial al acestui server. 		Lista Forumurilor Pe Tematici
EliteHackers | Reguli | Inregistrare | Login

POZE ELITEHACKERS

Nu sunteti logat. 		Nou pe simpatie:
sayler_moon_19 la Simpatie.ro
Femeie
25 ani
Bacau
cauta Barbat
26 - 46 ani
EliteHackers / Web Design / Codul HTML In Romana Pentru Incepatori Moderat de Ad_Infinitum, AntiKiler, Puscas_marin, codebreacker13, r3v
Autor
Mesaj Pagini: 1
Exploit
Administrator

Din: I'm from everywhere..
Inregistrat: acum 19 ani
Postari: 600
Lecţia 1: Structura unui document HTML. Notiuni de baza.

1.1 Ce este HTML?

HTML (HyperText Markup Language) a fost dezvoltat initial de Tim Berners-Lee in anul 1989, ca urmare a necesitatii de publicare a informatiilor la nivel global. Pe parcursul anilor, limbajul a evoluat (HTML 3.0, HTML 3.2, HTML 4 si cel mai recent HTML 4.01), fiecare versiune oferind noi facilitati.
Se remarca cateva trasaturi cum ar fi:

• independenta de platforma (modul de afisare al unui document este acelasi, indiferent de computerul pe care se realizeaza afisarea);

• structurarea formatarii;

• posibilitatile hypertext (orice cuvant, imagine sau alt element al documentului vizualizat de utilizator poate face referinta la un alt document, ceea ce usureaza navigarea in cadrul aceluiasi document sau intre documente diferite).

HTML un limbaj simplu, compus din coduri speciale (marcaje) care se insereaza intr-un text pentru a adauga informatii despre formatare. Este derivat din SGML (Standard Generalized Markup Language), un sistem pentru definirea tipurilor de documente structurate, destinat sa reprezinte instante ale acestor tipuri de documente. La baza SGML si a HTML se afla acelasi principiu: descrierea continutului unui document se face intr-un fisier text obisnuit (ASCII). S-a urmarit ca aceste fisiere sa fie editabile cu aplicatii software nepretentioase (ex. NotePad, WordPad).

In cadrul unui document HTML un marcaj (tag, in limba engleza) va avea forma <nume_marcaj> Parantezele unghiulare sunt elementele care indica prezenta unui marcaj; numele marcajelor poate fi scris oricum, limbajul nefiind senzitiv la literele mari/mici (case sensitive). Unele marcaje permit utilizarea unor atribute care se vor scrie in marcajul de inceput:

<nume_marcaj optiune1=valoare1 optiune2=valoare2 ...>
................
</nume_marcaj>

!!! DE RETINUT !!!

Exista doua tipuri de marcaje:

- individuale (ex. <br>)
- perechi (ex. <p>...</p>) - de mentionat ca sfarsitul unui marcaj este indicat prin utilizarea caracterului '/' in fata numelui de marcaj
In functie de modul de formatare a paginii, avem marcaje de tip:

- block: este afisat sub elementul anterior (ex. <p>)
- inline: este afisat dupa elementul anterior (ex. <span>)
- table: este afisat sub forma unui tabel

Marcajele perechi pot fi imbricate:
<nume_marcaj1>
<nume_marcaj2>
................
</nume_marcaj2>
</nume_marcaj1>

Browserele vor ignora marcajele si optiunile pe care nu le recunosc.

1.2 Structura unui document HTML

Un document HTML 4 are urmatoare structura:
1. O linie continand versiunea HTML
2. Sectiunea HEAD, delimitata de marcajele <HEAD> </HEAD>
3. Sectiunea BODY, delimitata de marcajele <BODY> </BODY> sau <FRAMESET> </FRAMESET>

!!! DE RETINUT !!!

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
     <title>Prima mea pagina web</title>
   </head>
   <body>
     ...........
   </body>
</html>

Un document HTML valid contine declaratia versiunii HTML utilizate. Declaratia se face prin intermediul DTD (document type definition). Pe scurt, fisierul DTD contine definitiile marcajelor din versiunea respectiva de HTML.
HTML 4.01 specifica 3 variante DTD :

• HTML 4.01 Strict DTD include toate elementele si atributele care nu sunt "invechite" (elemente si atribute a caror utilizare nu este recomandata deoarece se doreste renuntarea la acestea pe viitor) sau care nu apar in documentele ce contin cadre.

• HTML 4.01 Transitional DTD include Strict DTD plus elementele si atributele "invechite".

• HTML 4.01 Frameset DTD include Transitional DTD plus cadrele (frames).

HTML 4.01 Strict DTD

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional DTD

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset DTD

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

1.2.1 Sectiunea HEAD

Cuprinde informatii care nu vor fi afisate in browser, cu exceptia marcajului <title>.
Marcajul <title> este obligatoriu si poate apare doar in sectiunea HEAD. El va contine un titlu relevant pentru pagina, fiind deosebit de important pentru motoarele de cautare.
Alte marcaje care apar in sectiune HEAD:

• <META> - poate contine cuvinte cheie, o descriere a paginii, numele autorului paginii, frecventa (teoretica) cu care motoarele de cautare ar trebui sa reindexeze pagina, etc. Declaratiile META implica in general declararea unei proprietati si a valorii asociate acelei proprietati.

<META NAME="nume" CONTENT="continut">

Declararea setului de caractere se face astfel:

<META http-equiv="Content-Type" content="text/html; charset=set_caractere">

!!!DE TETINUT!!!

Precizarea setului de caractere face posibila afisarea in browserul utilizatorului a caracterelor specifice unor limbi precum romana, rusa, araba, etc.

• <style> - cascading style sheets - stiluri pentru formatarea textului din documentul HTML.

Code:

style type="text/css">...</style>

• <script> - scripturi JavaScript sau VBScript

Code:

<script language="JavaScript1.2" type="text/javascript" src="lib.js"></script>

• <base> - stabileste URL-ul de "baza" al documentului. Toate referintele (<a href=""></a>, respectiv <img src="">) din documentul respectiv vor fi deschise relativ la marcajul <base>.

Code:

<head>
   <base href="http://www.xprim.ro/index.php" target="_top">
</head>

• <link> - stabileste o legatura cu un document extern, spre exemplu un fisier de definitii CSS

Code:

<link rel="stylesheet" href="stiluri.css" type="text/css">

EXEMPLU:

Sectiunea HEAD a unui document HTML poate arata in felul urmator:

Code:

<head>
     <title>Titlul paginii mele</title>
     <META http-equiv="Content-Type" content="text/html; 
     charset=windows-1250"> 
     <META name="author" content="Popescu Ion">
     <META name="copyright" content="© 2003 InsideMedia">
     <META name="keywords" content="curs, html, gratuit, elearning">
     <link rel="stylesheet" href="stiluri.css" type="text/css">
</head>

1.2.2 Sectiunea BODY

Este inclusa intre marcajele <body>...... </body>
<BODY [ BACKGROUND="adresa_imagine"] [ BGCOLOR="#rrggbb"|"culoare"] [ TEXT="#rrggbb"|"culoare"] [ LINK="#rrggbb"|"culoare"] [ VLINK="#rrggbb"|"culoare"] [ ALINK="#rrggbb"|"culoare"] [ LEFTMARGIN=marg_st] [ TOPMARGIN=marg_top]>
................
continut document
.................
</BODY>

Marcajul de sfarsit (</BODY>) nu este obligatoriu
In sectiunea BODY se gaseste informatia care va fi afisata in browser (text, imagini, etc.) (<body>.... </body>).

!!!DE TETINUT!!!

LEFTMARGIN si TOPMARGIN sunt extensii Microsoft (nu functioneaza decat in Internet Explorer 3+).

• LEFTMARGIN precizeaza, ξn pixeli, marginea stanga a documentului (distanta dintre fereastra si continutul documentului);

• TOPMARGIN precizeaza, in pixeli, marginea de sus a documentului (distanta dintre fereastra si continutul documentului)

Ca in orice limbaj de programare in HTML exista posibilitatea de a introduce comentarii, folosind marcajul

<!-- .... textul comentariului -->

EXEMPLU:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
     <title>Titlul paginii mele</title>
     <META http-equiv="Content-Type" content="text/html; 
     charset=windows-1250"> 
     <META name="author" content="Popescu Ion">
     <META name="copyright" content="© 2003 InsideMedia">
     <META name="keywords" content="curs, html, gratuit, elearning">
     <link rel="stylesheet" href="stiluri.css" type="text/css">
</head>
<body bgcolor="#999999" leftmargin=0 topmargin=0>
        <!--Aceasta linie nu va fi afisata in browser -->
         <p>text text text text text text text text text text </p>
         <p>alt text alt text alt text alt text alt text </p>

</body>
</html>

In exemplul de mai sus a aparut un nou marcaj <p> (paragraf). Alaturi de el trebuie mentionate marcajele <h1>, <h2>, <h3>, <h4>, <h5>, <h6> (headings - toate necesita marcaj de inchidere) care sunt folosite in general pentru evidentierea titlurilor. (exemplu)
Pentru formatarea textului pot fi folosite si marcajele:

• <b>...</b> - caractere ingrosate

• <i>...</i> - caractere inclinate

• <u>...</u> - caractere subliniate

• <s>...</s> - caractere "taiate"

• <pre>...</pre> - marcajul de informatie preformatata
       Conserva toata caracterele si spatierile de linii
       Utilizeaza un font diferit (Courier)
• <sup>...</sup> - exponent

• <sub>...</sub> - indice

• <br> - "rupe" textul, trecand pe o linie noua - poate apare oriunde in text

• <hr> - traseaza o linie subtire orizontala

Acest exemplu evidentieaza efectele marcajelor mentionate mai sus.
Marcajul <font>...</font> ofera posibilitatea modificarii dimensiunii, culorii si a tipului de font utilizat (exemplu)
Ultimele 2 marcaje asupra carora ne vom opri in aceasta lectie sunt marcajele <span> si <div>(ambele necesita marcaj de inchidere):.

• <span> este un marcaj de tip "inline". Se foloseste in general in interiorul marcajelor de tip "block" (ex. <p>) in combinatie cu stilurile CSS, pentru a impune o formatare diferita de restul continutului din marcajul "block" respectiv (exemplu).

• Spre deosebire de <span>, marcajul <div> este de tip "block". Se foloseste in general pentru pozitionare in cadrul documentului si pentru specificarea unor proprietati CSS care sa fie aplicate textului din interiorul lui (exemplu).

Code:

<DIV [ ALIGN="left|center|right"] style="..">
.................................
</DIV>

EXEMPLU:

1. Conform specificatiilor HTML 4.01, este recomandata folosirea marcajului <div> pentru centrarea textului, in locul marcajului <center> exemplu.

2. <div> poate fi folosit ca un container pentru alte elemente de tip "block".
Exemplu: se pot include 2 sau mai multe paragrafe intr-un marcaj <div>, insa pentru a se evita formatarea explicita pe fiecare paragraf in parte (ex. fontul), se va defini stilul de formatare pentru marcajul <div>, stil care va fi preluat de paragrafele mentionate.

_______________________________________
...:::Only God Can Judge Me:::...
pus acum 18 ani
   
Exploit
Administrator

Din: I'm from everywhere..
Inregistrat: acum 19 ani
Postari: 600
Lectia 2: Liste si referinte

2.1 Liste

HTML ofera mai multe mecanisme pentru specificarea listelor de informatii. Exista 3 tipuri de liste, fiecare tip trebuie sa includa cel putin un element:

1. Liste de tip definitie
2. Liste ordonate (numerotate)
3. Liste neordonate (marcate)

2.1.1 Liste de tip definitie

Unul dintre cele mai obisnuite elemente in paginile HTML este un set de definitii, referinte sau indexuri. Un exemplu concret il reprezinta glosarele; cuvintele sunt listate alfabetic, insotite de definitiile termenilor respectivi.
Lista de tip definitie este introdusa de marcajele:

• <dl>...</dl> - lista definitii (definition list)
• <dt> - termenul definit (definition term)
• <dd> - definitie (definition)

Exemplu:

Code:

<html>
    <head>
        <title>Lista de tip definitie</title>
    </head>
    <body>
        <dl>
             <dt>Applet Java
             <dd>Aplicatie Java inclusa intr-un document HTML
             <dt>Cookie
             <dd>Mecanism de comunicare intre client si server
             <dt>Domeniu
             <dd>Nume unic prin care se identifica un site pe Internet
        </dl>
    </body>
</html>

2.1.2 Liste neordonate

Sunt introduse de marcajele:

• <ul>...</ul> - lista neordonata (unordered list)
• <li> - element lista

Exemplu:

Code:

<html>
    <head>
        <title>Lista neordonata</title>
    </head>
    <body>
        <p>In HTML sunt disponibile 3 tipuri de liste:</p>
        <ul type="square">
             <li>liste de tip definitie
             <li>liste neordonate
             <li>liste ordonate
        </ul>
    </body>
</html>

Atributul square precizeaza tipul maracatorului

2.1.3 Liste ordonate

Sunt introduse de marcajele:

• <ol>...</ol> - lista ordonata (ordered list)
• <li> - element lista

Exemplu:

Code:

<html>
    <head>
        <title>Lista ordonata</title>
    </head>
    <body>
        <p>In HTML sunt disponibile 3 tipuri de liste:
        <ol start="2">
             <li>liste de tip definitie
             <li>liste neordonate
             <li>liste ordonate
        </ol>
    </body>
</html>

Atributul start seteaza numarul de inceput pentru primul element al listei ordonate.
Diferenta dintre listele ordonate si cele neordonate consta in inlocuirea punctelor din enumerare cu numere. Vizualizand in browser exemplele mentionate anterior, vei intelege diferentele in modul de afisare a fiecarui tip de lista.

2.2 Referinte (link-uri)

Marcajul HTML principal pentru introducerea referintelor catre alte pagini HTML sau catre elemente din cadrul aceleiasi pagini web este <a>. El trebuie sa contina atribute, in caz contrar neafectand formatarea documentului.

Code:

Exemplul urmator nu va afecta formatarea documentului:
[i]<a>Aici</a>[/i] ar trebui sa fie un link !

Pentru a activa linkul de mai sus vom adauga atributul href.

Code:

Exemplul urmator arata formatarea documentului:
[i]<a href="pagina.html">Aici</a>[/i] este un link !

Referintele pot fi absolute (ex. <a href="http://www.domeniu.ro/pagina.html">http://www.domeniu.ro/pagina.html<a> sau relative (ex. <a href="pagina.html">pagina.html<a>).
Referintele relative sunt folosite in interiorul siturilor. Ele functioneaza pe baza faptului ca browserul adauga automat numele domeniului la fiecare referinta (presupunand ca exista o pagina la adresa http://www.hostx.ro/director/pagina.html si o referinta relativa catre pagina2.html, browserul va construi referinta http://www.hostx.ro/director/pagina2.html in momentul in care pagina2.html este solicitata)
Referintele absolute le vei folosi atunci cand vrei sa trimiti utilizatorul pe un alt site (domeniu); pot fi folosite si in interiorul unui site, insa va implica un efort mai mare in scrierea paginilor (pe scurt, ai mai mult de tastat), iar in cazul in care muti situl pe un alt domeniu vei fi nevoit sa re-editezi toate referintele.
Referintele pot fi catre pagini html, dar si catre alte tipuri de fisiere (imagini, fisiere audio, video, documente in alte formate, etc.)

Exemplu:

Code:

Presupunem ca ai un site cu urmatoare structura de directoare:
/director1
/director2

Pentru a apela o pagina HTML aflata in director2 dintr-o pagina aflata in director1 voi folosi urmatoarea secventa: 
<a href="../director2/pagina.html">Un link oarecare</a>
Pentru a apela o pagina HTML aflata in director1 dintr-o pagina aflata in radacina (nivelul superior al sitului) voi folosi urmatoarea secventa: 
<a href="director1/pagina.html">Un link oarecare</a>

2.2.1 Ancore

Pana acum am prezentat modul de realizare a referintelor externe, catre alte pagini sau catre alte situri. Ce se intampla insa in cazul in care avem un document de dimensiuni mari si vrem sa introducem referinte catre anumite sectiuni ale sale? Solutia consta in utilizarea ancorelor.

!!! De Retinut !!!

Code:

Ancorele asigura usurinta in navigare in paginile de dimensiuni mari.
O ancora are urmatorul format 
<a name="nume_ancora">...</a>
Numele ancorelor nu poate contine spatii si trebuie sa fie unic in pagina respectiva !

!!! De Retinut !!!

Code:

In exemplul urmator vei vedea o greseala posibila in atribuirea numelui ancorelor:
<a name="xxx">...</a>
<a name="XXX">...</a>
In HTML xxx si XXX inseamna acelasi lucru!

Odata definita ancora trebuie definita si legatura activa catre ancora respectiva. Ea va fi o referinta hypertext in formatul urmator: <a href="#nume_ancora">Link catre ancora</a>

Trebuie retinut ca exista posibilitatea de a crea referinte catre ancore aflate in documente externe: <a href="pagina.htm#nume_ancora">Link catre ancora externa</a>

_______________________________________
...:::Only God Can Judge Me:::...
pus acum 18 ani
   
Exploit
Administrator

Din: I'm from everywhere..
Inregistrat: acum 19 ani
Postari: 600
Lecţia 3: Imagini si sunete

3.1 De ce imagini ?

   In principal, utilizarea imaginilor (pozelor) in cadrul paginilor HTML are ca scop imbunatatirea modului de transmitere a mesajului catre utilizatori. Imagineaza-ti cum ar arata un site fara imagini !
   O pagina in care imaginile sunt combinate cu textul poate transmite un mesaj mult mai bine decat o pagina care contine doar text. Selectarea imaginilor care vor fi utilizate este foarte importanta; cateva imagini care "clipesc" nu sunt suficiente pentru a face o pagina atractiva.

3.2 Ce trebuie sa stiu despre imagini ?

Inainte de a introduce o imagine intr-un document HTML este necesar sa iti pui cateva intrebari:

•    imaginea aceasta da "valoare" paginii mele?
        o    dupa cum spuneam mai sus, simpla inserare in pagina a unor imagini care nu au nici o legatura cu mesajul transmis in pagina nu este suficienta. Faptul ca o imagine sau mai multe "arata bine" nu este suficient pentru a face o pagina atractiva.

•    pot sa "imprumut" imaginea?
        o    Voi incepe prin a spune ca NU exista imagini fara copyright (drepturi de autor). Exista imagini care sunt oferite gratuit sau cu consimtamantul autorului (proprietarului), insa majoritatea sunt oferite contra cost (din motive lesne de inteles). Desi in cazul siturilor personale(non-profit) este improbabil sa verifice cineva provenienta imaginilor, in cazul siturilor comerciale riscul de a fi dat in judecata (chiar si in Romania) este real.
        o    Nu te baza pe faptul ca nu stii provenienta imaginii. In fata legii "nu stiu" nu este valabil. Responsabilitatea in a determina cui ii apartine imaginea respectiva iti apartine in intregime.

•    Ce dimensiunea are imaginea?
        o    Pentru utilizatorii care folosesc conexiuni dial-up, paginile care contin imagini de dimensiuni mari (> 25-30 k) se vor incarca in browser foarte greu. Multi se vor plictisi asteptand incarcarea paginii si vor abandona vizualizarea paginii.

•    culorile sunt "portabile"?
        o    Problema importanta este modul de afisare a culorilor pe diferite computere, sisteme de operare sau browsere. Sunt convins ca nu ai vrea ca fundalul rosu al unei imagini afisate in browserul tau sa arate roz pe un Mac, spre exemplu. Pentru a elimina aceasta problema au fost stabilite anumite culori care arata la fel indiferent de computer, sistem de operare, etc. Poti vedea aceasta lista impreuna cu codurile lor in format hexa.

Tableta Culori #1 -

Tableta Culori #2 -

•    Ce format de imagine sa folosesc?
        o    Exista foarte multe formate de fisiere grafice (psd, png, jpg, pcx, bmp, gif, wmf, etc.). Doar cateva sunt universal recunoscute de browsere:
                    GIF - GRAPHICS INTERCHANGE FORMAT - este un format de compresie fara pierdere de calitate.
                    JPG - format introdus de JOINT PHOTOGRAPHIC EXPERT GROUP - este un format de compresie cu pierdere de calitate. Atentie insa: prin salvarea repetata a unei imagini, ea va pierde din calitate, devenind in final inutilizabila.
                    PNG - PORTABLE NETWORK GRAPHIC - este un format de compresie fara pierdere de calitate. Are in general dimensiuni mai mari decat primele doua formate mentionate.

3.3 Cum se introduce o imagine intr-o pagina HTML?

Introducerea unei imagini intr-o pagina HTML se face prin marcajul <img>

Exemplu:

Code:

<html>
    <head>
        <title>Pagina mea</title>
    </head>
    <body>
        <img src="imagine.gif">
    </body>
</html>

Atributul src specifica locatia imaginii. Alaturi de src, marcajul <img> are urmatoarele atribute:

•    alt - specifica un text alternativ pentru cazul in care imaginea nu poate fi afisata. Este important si pentru motoarele de cautare.
•    border - traseaza un chenar in jurul imaginii.
•    width, height - specifica latimea, respectiv inaltimea imaginii. Nu sunt obligatorii, insa utilizarea lor este recomandata deoarece va reduce timpul de procesare a paginii web de catre browser.
•    hspace, vspace - specifica spatiul care va fi pastrat in jurul unei imagini.

Exemplu:

Code:

<html>
    <head>
        <title>Pagina cu imagine</title>
    </head>
    <body>
          <img src="imagine.gif" width="100" height="100" border="0" 
         hspace="10" vspace="10">
    </body>
</html>

In general, atunci cand este inserata o imagine intr-un text, acesta este aliniat in partea inferioara a imaginii. Va ramane un spatiu neutilizat, dupa cum ai vazut probabil in exemplul de mai sus. Pentru evitarea "pierderii" acestui spatiu poti folosi atributul align, cu valorile left, right.

Exemplu:

Code:

<html>
    <head>
        <title>Pagina cu imagine</title>
    </head>
    <body>
          <img src="imagine.gif" width="100" height="100" border="0" 
         hspace="10" vspace="10" align="left">
    </body>
</html>

Exercitii:

1. Realizeaza o pagina HTML (folosind NotePad) care sa contina una sau mai multe imagini, alaturi de un text pe care sa il formatezi folosind marcajele studiate in primele doua lectii. Modifica valorile atributelor marcajului <img> si vizualizeaza pagina in browser.

3.4 Inserarea de fisiere audio in paginile HTML

In general, inserarea de fisiere audio in paginile HTML nu este recomandata (bineinteles exista si exceptii). Dimensiunile mari, timpul mare de download precum si "agresarea" utilizatorului cu o melodie care se repeta la infinit sunt cateva din argumentele contra. In acelasi timp noile tehnologii (ex. FLASH) largesc posibilitatile, existand multe pagini web care combina in mod fericit parte audio cu cea vizuala.
Referindu-ma strict la posibilitatile HTML, introducerea de secvente audio se poate face in doua modalitati:

         •    Sub forma unei referinte(link)
         •    Prin intermediul marcajelor embed sau bgsound

Exemplu:

Code:

<html>
    <head>
        <title>Inserare referinta audio</title>
    </head>
    <body>
        Apasa pe linkul de mai jos.
          <a href="sunet.au"> 
          Fisierul audio va fi rulat intr-o aplicatie instalata 
          in calculatorul tau (ex. Media Player)
    </body>
</html>

Exemplu:

Code:

<html>
    <head>
        <title>Inserare secventa audio cu embed</title>
    </head>
    <body>
          <embed src="aaa.wav" width="200" height="200">         
    </body>
</html>

Exista trei formate de fisiere care sunt recomandate pentru utilizarea cu acest marcaj: wav, au si midi. Daca esti interesat de fisierele midi iti recomand sau. Atentie insa la drepturile de autor!

Marcajul embed are urmatoarele atribute:
     •         Autostart - daca este setat true, fisierul audio va fi rulat imediat dupa incarcarea paginii HTML
     •         Hidden - daca este setat true, interfata pentru rularea fisierului audio nu va fi afisata
     •         Loop - daca este setat true, secventa audio va fi reluata la "nesfarsit"
     •         Volume - seteaza volumul cu care va fi redata secventa audio

Exemplu:

Code:

<html>
    <head>
        <title>Inserare secventa audio cu embed</title>
    </head>
    <body>
          <embed src="aaa.wav" width="200" height="200" 
          autostart=false hidden=false loop=true volume=50>         
    </body>
</html>

Marcajul bgsound va rula o secventa audio in fundal. Este o extensie Microsoft, deci va functiona numai in Internet Explorer.

Exemplu:

Code:

<html>
    <head>
        <title>Inserare secventa audio cu bgsound</title>
    </head>
    <body>
          <bgsound src="aaa.wav" loop=10>         
    </body>
</html>

In HTML 4 embed este inlocuit de marcajul object care va fi insa prezentat in ultima lectie.

Exercitii:

1. Cauta pe Internet o secventa audio in format midi. Realizeaza apoi o pagina HTML (folosind NotePad) care sa includa aceasta secventa audio. Modifica valorile atributelor marcajului <embed> si vizualizeaza pagina in browser.

_______________________________________
...:::Only God Can Judge Me:::...
pus acum 17 ani
   
Exploit
Administrator

Din: I'm from everywhere..
Inregistrat: acum 19 ani
Postari: 600
Lecţia 4: Tabele

    Prezentarea datelor sub forma de tabele prezinta avantaje din punct de vedere al claritatii si sistematizarii. Marcajele HTML dedicate formatarii tabelelor permit operatiuni asemanatoare celor din procesoarele de texte (ex. MS Word).

    Definirea unui tabel in HTML se face folosind perechea de marcaje <table>...</table>. Prin intermediul acestei perechi de marcaje se definesc atribute valabile pentru intregul tabel. Majoritatea acestor atribute pot fi insa redefinite pentru anumite celule ale tabelului.

De Retinut:

Code:

<table [border=n] 
[frame=above|below|border|box|hsides|vsides|lhs|rhs|void] 
[rules=none|groups|rows|cols|all] [width=abs|rel]  
[height=abs|rel] [bgcolor="#rrggbb"] [bordercolor="#rrggbb"] 
[bordercolorlight="#rrggbb"] [bordercolordark="#rrggbb"] 
[background="URL-imagine"] [cellspacing=n] [cellpadding=n] 
[align=left|center|right] [valign=top|middle|bottom] 
[summary="sumar"]>
...
</table>

Semnificatiile atributelor marcajului <table> sunt:
       •    border - specifica grosimea chenarului tabelului. Daca are valoarea 0 sau atributul lipseste, tabelul nu va avea chenar.
       •    frame - defineste modul de afisare a chenarului exterior. Functioneaza in prezenta atributului "border". Atributul frame poate avea urmatoarele valori:
          o    above - afiseaza latura superioara a chenarului;
          o    below - afiseaza latura inferioara a chenarului;
          o    border - afiseaza chenarul complet;
          o    box - afiseaza chenarul complet (la fel ca si border);
          o    hsides - afiseaza partile inferioara, respectiv superioara ale chenarului;
          o    vsides - afiseaza partile laterale (stanga, dreapta) ale chenarului;
          o    lhs - afiseaza latura stanga a chenarului;
          o    rhs - afiseaza latura dreapta a chenarului;
          o    void - fara bordura exterioara.
       •    rules - defineste modul de afisare a chenarului interior dintre celulele tabelului. Functioneaza in prezenta atributului "border". Atributul rules poate avea urmatoarele valori:
          o    none - nu se afiseaza chenar interior;
          o    groups - afiseaza chenar intre grupurile de celule definite de thead, tbody, colgroup, col, tfoot;
          o    rows - afiseaza chenar ξntre linii;
          o    cols - afiseaza chenar ξntre coloane;
          o    all - afiseaza chenar intre toate celule interioare.
       •    width, height - specifica latimea, respectiv inaltimea tabelului. In cazul in care valorile specificate nu sunt suficiente pentru afisarea continutului celulelor, valorile vor fi modificate automat de catre browser astfel incat tot continutul sa fie afisat. Valorile se pot exprima absolut, in pixeli, sau relativ la latimea ecranului (width), respectiv la inaltimea ecranului (height). Trebuie mentionat ca atributul "height" nu face parte din specificatiile HTML.
Este recomandat sa lasi browserul sa calculeze valoarea pentru "height" in functie de continutul tabelului.
       •    bgcolor - specifica culoarea pentru fundalul tabelului.
       •    bordercolor - specifica culoarea chenarului.
       •    bordercolorlight, bordercolordark - sunt atribute utilizate pentru a crea un efect 3D asupra chenarului. Este recomandata folosirea de culori complementare pentru a obtine efectul scontat. Sunt extensii Microsoft.
       •    background - URL-ul imaginii care va fi utilizata ca fundal al tabelului. In cazul in care dimensiunile imaginii sunt mai mici decat cele ale tabelului, ea va fi repetata astfel incat sa acopere intregul fundal al tabelului. Este extensie Microsoft.
       •    cellspacing - specifica distanta dintre celule.
       •    cellpadding - specifica marginea interioara a celulelor.
       •    align - specifica alinierea pe orizontala a tabelului (stanga|centru|dreapta).
       •    valign - specifica alinierea pe verticala a tabelului (sus|mijloc|jos).
       •    summary - o descriere a tabelului, de obicei pentru browsere non-vizuale.


De Retinut:

Code:

Cea mai simpla forma a unui tabel se prezinta astfel:
<table>
    <tr>
        <td>....</td>
        <td>....</td>
    </tr>
    <tr>
        <td>....</td>
        <td>....</td>
    </tr>
</table>
O forma mai complexa a unui tabel este: 
<table>
    <thead>
        <tr>
        <th>Nr. Crt</th>
        <th>Nume Autor</th>
        <th>Denumire Lucrare</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
        <tr>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
    </tbody>
</table>

De Retinut:

Code:

•    [b]<thead>...</thead>[/b] este un marcaj care contine unul sau mai multe randuri de celule care reprezinta antetul tabelului. Poate aparea o singura data in cadrul unui tabel. 
•    [b]<tbody>...</tbody>[/b] este un marcaj care contine unul sau mai multe randuri de celule. Pot fi definite mai multe astfel de sectiuni in cadrul aceluiasi tabel (ex. in cazul in care exista stiluri de formatare diferite pentru sectiuni diferite ale tabelului). 
•    [b]<tfoot>...</tfoot>[/b] este un marcaj care contine unul sau mai multe randuri de celule care reprezinta subsolul tabelului. Poate aparea o singura data in cadrul unui tabel. Este obligatoriu sa apara inaintea marcajului [b]<tbody>[/b].

Exemplu:

Code:

Continutul fiecarei celule poate fi formatat individual: 
<table>
    <tr>
        <th><font color=black>Col 1</font></th>
        <th><font color=red>Col 2</font></th>
    </tr>
    <tr>
        <td><center>Celula 1.1</center></td>
        <td><i>Celula 1.2</i></td>
    </tr>
    <tr>
        <td><s>Celula 2.1</s></td>
        <td><font color=blue>Celula 2.2</font></td>
        </tr>
</table>
In cazul in care vrei ca tabelul din exemplul anterior sa fie afisat cu chenar: 

<table border=1>
    <tr>
        <th>Col 1</th>
        <th><font color=red>Col 2</th>
    </tr>
    <tr>
        <td><center>Celula 1.1</center></td>
        <td><i>Celula 1.2</i></td>
    </tr>
    <tr>
        <td><s>Celula 2.1</s></td>
        <td><font color=blue>Celula 2.2</font></td>
    </tr>
</table>

Un alt marcaj care poate aparea in cadrul unui tabel este <caption>. Are urmatoarea sintaxa:

De Retinut:

Code:

<caption [align=top|bottom|left|center|right] [valign=top|bottom]>
...
</caption>

Marcajul caption adauga o scurta descriere (titlu) a tabelului. Poate fi utilizat numai in cadrul unui marcaj <table>, imediat dupa acesta.
Are urmatoarele atribute:
       •    align - in mod normal browser-ul va afisa titlul aliniat central si deasupra/dedesubtul tabelului. In HTML 4.0 atributul align a fost abandonat in favoarea formatarii prin CSS (text-align si vertical-align).
       •    valign - precizeaza pozitia titlului in raport cu tabelul (sus/jos).

Exemplu:

Code:

<table border=1 cellspacing=0 cellpadding=1 width="100%" 
align="left">
    <caption valign=top>Exemplu utilizare caption </caption>
    <tr>
    <th>
        <font color=black>Col 1</font>
    </th>
    <th>
        <font color=red>Coloana 2</font>
    </th>
    </tr>
    <tr>
        <td>
            <center>Celula 1.1</center>
        </td>
        <td>
            <i>Celula 1.2</i>
        </td>
    </tr>
    <tr>
        <td>
            <s>Celula 2.1</s>
        </td>
        <td>
            <font color=blue>Celula 2.2</font>
        </td>
    </tr>
</table>

Marcajul <tr> defineste o linie intr-un tabel. Are urmatoarea sintaxa:

De Retinut:

Code:

<tr [align=left|center|right] [valign=top|middle|bottom|baseline] 
[bgcolor="#rrggbb"|culoare] [bordercolor="#rrggbb"|culoare] 
[bordercolorlight="#rrggbb"|culoare] 
[bordercolorlight="#rrggbb"|culoare]>
....
</tr>

Poate avea urmatoarele atribute:
       •    align - specifica modul in care va fi aliniat pe orizontala continutul liniei de tabel.
       •    valign - specifica modul in care va fi aliniat pe verticala continutul liniei de tabel.
       •    bgcolor - specifica culoarea pentru fundalul liniei de tabel.
       •    bordercolor - specifica culoarea chenarului celulelor din linie de tabel.
       •    bordercolorlight, bordercolordark - sunt atribute utilizate pentru a create un efect 3D asupra chenarului de tabel.
     Marcajul <th> defineste o celula din antetul tabelului. Sintaxa este:

De Retinut:

Code:

<th [align=left|center|right] [valign=top|middle|bottom|baseline] 
[background="url-imagine"] [colspan=n] [rowspan=m] 
[bgcolor="#rrggbb"|culoare] [bordercolor="#rrggbb"|culoare] 
[bordercolorlight="#rrggbb"|culoare] 
[bordercolordark="#rrggbb"|culoare] [nowrap] [abbr="text"]>
....
</th>

Poate avea urmatoarele atribute:
       •    align, valign - indica alinierea orizontala si verticala a continutului celule, in celula.
       •    colspan - specifica numarul de coloane peste care se intinde celula curenta spre dreapta.
       •    rowspan - specifica numarul de linii peste care se intinde celula curenta in jos.
       •    nowrap - impiedica "ruperea" textului din celula pe mai multe linii.
       •    bgcolor, background, bordercolor, bordercolorlight, bordercolorlight - au efecte similare celor mentionate mai sus.

Exemplu:

Code:

<table border=1 cellspacing=0 cellpadding=1 width="100%" 
align="left">
<caption valign=top>Exemplu tabel </caption>
    <thead>
        <tr>
            <th>
                <font color=black>Col 1</font>
            </th>
            <th>
                <font color=red>Coloana 2
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><center>Celula 1.1</center>;</td>
            <td><i>Celula 1.2</i></td>
        </tr>
        <tr>
            <td><s>Celula 2.1</s></td>
            <td><font color=blue>Celula 2.2</td>
        </tr>
    </tbody>
</table>

Marcajul <td> defineste o celula din tabel.


De Retinut:

Code:

Are urmatoarea sintaxa:
<td [align=left|center|right] [valign=top|middle|bottom|baseline] 
[background="url-imagine"] [colspan=n] [rowspan=n] 
[bgcolor="#rrggbb"|culoare] [bordercolor="#rrggbb"|culoare] 
[bordercolorlight="#rrggbb"|culoare] [bordercolordark="#rrggbb"|culoare] 
[nowrap] [abbr="text"]>
...
</td>

Atributele marcajului <td> au efecte similare cu cele prezentate mai sus, in cazul marcajului <th>.
      Ultimele atribute pe care le voi prezenta sunt colspan si rowspan. Ele extind o celula pe mai multe coloane, respectiv linii ale tabelului.

Exemplu:

Code:

Exemplu utilizare colspan: 
<table border=1 cellspacing=0 cellpadding=1 width="100%" 
align="left">
<caption valign=top>Exemplu tabel </caption>
        <tr>
            <td><center>Celula 1.1</center></td>
            <td><i>Celula 1.2</i></td>
        </tr>
        <tr>
            <td colspan="2"><s>Celula 2.1</s></td>
        </tr>
</table>
Exemplu utilzare rowspan: 
<table border=1 cellspacing=0 cellpadding=1 width="100%" 
align="left">
<caption valign=top>Exemplu tabel </caption>
        <tr>
            <td rowspan="2"><center>Celula 1.1</center></td>
            <td><i>Celula 1.2</i></td>
        </tr>
        <tr>
            <td ><s>Celula 2.2</s></td>
        </tr>
</table>

Probabil ca multi se vor intreba de ce am prezentat atat de multe marcaje si atribute. In cele mai multe cazuri, marcajele <table>, <tr>, <td> sunt suficiente pentru a construi un tabel. Pe masura ce paginile HTML pe care le vei realiza vor deveni mai complexe, vei vedea singur de ce marcaje sau atribute ai nevoie. Succes !



Exercitii:

1. Realizeaza (folosind NotePad) un tabel cu latimea 80%, chenar 1, aliniat la dreapta in browser si avand cel putin 4 randuri a cate 3 celule, fiecare celula cu un fundal diferit. Incearca apoi sa modifici acest tabel combinand doua coloane.

_______________________________________
...:::Only God Can Judge Me:::...
pus acum 17 ani
   
Pagini: 1  

Mergi la