©║º•DarkZone•º║®

m|nu · Vizitator

1.Ce este html??

HTML este prescurtarea de la Hyper Text Mark-up Language si este codul care sta la baza paginilor web. Paginile HTML sunt formate din etichete sau tag-uri si au extensia .html sau .htm.

2.In ce se scrie html??

Puteti scrie astfel de fisiere cu Notepad sau cel mai indicat cu un editor specializat care va indica si numarul liniilor, lucru util la depanarea codului HTML. Verificati ca nu aveti extensiile ascunse (My Computer -> Tools -> Folder Options -> View -> debifati Hide extensions for known file types). Pentru a putea crea fisiere html dati clic dreapta New -> Text Document, apoi il redenumiti nume.html.
Personal eu folosesc PhpEdit care te va ajuta si atunci cand vei invata php.Downloadati-l de aici : http://www.waterproof.fr/products/PHPEdit/download.php !

3.Componenta unui document html

1. versiunea html ce poate fi :
HTML 4.01 Strict
<DOCTYPE>
HTML 4.01 Transitional
<DOCTYPE>
HTML 4.01 Frameset
<DOCTYPE>

2. zona head cu etichetele <head> </head>
3. zona body cu etichetle <body></body> sau <frameset></frameset>
4. De retinut este ca toate paginile html incep cu tagul <html> si se termina cu </html>

4.Prima pagina html

Sa luam urmatorul exemplu :

Quote
<html>
<head>
<title>Titlu paginii</title>
</head>
<body>
Continut paginii voastre
</body>
</html>

Salvati sub extensia html si vizualizati!!!Sa analizam !!

Observam :
1. <html> -acest tag arata ca avem de a face cu o pagina html,</html> iar acesta inchida tagul<html>
2. Apoi observam tagurile<head></head> .Acesta este headarul cu informatii.Aceste informatii nu sunt afisate!
3. Urmeaza tagurile <title></title> Intre acestea se va scrie titlul pagini.
4. Intre tagurile <body></body> se scrie codul html.

5.Taguri uzuale

1.Tagul

Cu acesta vei putea sa scrii textul ingrosat.
Exemplu :

Quote
<html>
<head>
<title>Scris ingrosat</title>
</head>
<body>
Acesta este un text ingrosat!!
</body>
</html>

Salvati sub numele : ingrosat.html si vizualizati !

2.Tagul <h1></h1>…<h6></h6>

Acest tag mareste textul (cel mai mare fiind <h1></h1> sau micsoreaza textul (cel mai mic fiind <h6></h6>

Exemplu :
Quote
<html>
<head>
<title>Tagurile <h></h></title>
</head>
<body>
<h1>Acesta este un text!</h1>
<h2>Acesta este un text!</h2>
<h3>Acesta este un text!</h3>
<h4>Acesta este un text!</h4>
<h5>Acesta este un text!</h5>
<h6>Acesta este un text!</h6>
</body>
</html>
Salvati sub numele :headere.html si vizualizati !

3.Tagul <hr>

Acesta creeaza linii orizontale pentru a separa diferite zone intr-o pagina web. I se pot
adauga acetui tag diferite atribute, ca: width=x (pentru lungimea liniei) sau
width=x% (pentru lungimea liniei raportate la toata lungimea ecranului), size=x
(pentru linie ingrosata dar transparenta) si noshade (pentru linie ingrosta plina). Un
tag <hr> fara atribute va fi interpretat ca linia sa aiba toata lungimea paginei.

Exemplu :

Quote
<html>
<head>
<title>Linia orizontala</title>
</head>
<body>
<hr>
<hr>
<hr>
<hr>
<hr>
</body>
</html>
De retinut: Se pot folosi mai multe atribute intr-un tag.

3.Tagul

Acest tag subliniaza textul cuprins intre
Exemplu :

Quote
<html>
<head>
<title>Text subliniat</title>
</head>
<body>
Ma numesc Andrei
</body>
</html>

Salvati sub numele : subliniat.html si vizualizati !

6.Imagini,linkuri,sunete

1.Linkuri
Link-urile sunt esenta webului, fara acestea paginile unui sit nu ar avea
legatura intre ele. Pentru a adauga un link se foloseste tagul de deschidere <a> si tagul de inchidere </a>. Tot ce va aparea intre aceste doua taguri
va fi subliniat si colorat, iar in momentul click-ului pe acel text, browser-ul va fi
trimis spre locatia data.

Exemplu :

Quote
<html>
<head>
<title>Site</title>
</head>
<body>
Apasa <a>aici</a> si vei fi redirectionat catre google!
</body>
</html>
2.Imagini

<img>

3.Sunete

Structura acestui tag este:

<embed></embed>

Daca vrei ca sunetul sa inceapa automat la deschiderea paginii seteaza
autoplay=true, daca nu vrei ca sunetul sa inceapa automat seteaza autoplay=false.
Daca nu vrei ca player-ul sa apara in pagina seteaza hidden=true. Daca vrei ca
sunetul sa se auda in mod repetat seteaza loop=true. Volumul se seteaza pe o scara
de la 1 la 100 .Valoarea predefinita este 50.

6. Liste

<li>
Indicã un element dintr-o listã (ne)numerotatã.
Exemplu:
<li>
Acest tag suportã atributele:
• Atributul type: poate lua valorile disc, circle, square sau A, A, I, i, 1. Folosit ?n listele nenumerotate.
• Atributul value: precizeazã valoarea numericã a elementului din listã considerat. Folosit ?n listele numerotate.

<ol>
Listã numerotatã (ordonata).
Exemplul 1:
<ol>
Atributul start precizeazã valoarea de la care pleacã numerotarea elementelor din listã.

<ul>
Listã nenumerotatã (neordonata).
Exemplul 1:
Quote
<ul>
<li>Cirese
<li>Visine
<li>Pepene
</ul>
Are loc afisarea urmãtoarei liste:
• Cirese
• Visine
• Pepene
Atributul type mai poate lua valorile disc sau circle.
Exemplul 2:
Quote
<ul>
Fructe
<li>Mere
<li>Pere
<li>Citrice
<ol>
<li>Lamai
<li>Mandarine
</ol>
</ul>
Aceastã secventã de cod produce ?ncuibarea unei liste cu citrice ?n lista cu fructe:

Fructe
• Mere
• Pere
• Citrice
1. Lamai
2. Mandarine

5. Despre tabele

<table>
Tag-urile <table>,<td> si <tr> sunt singurele tag-uri indispensabile realizãrii unui tabel. Orice tabel va incepe cu <table> si se va incheia cu </table>. Tag-ul <table> suporta mai multe atribute.
Exemplu:
<table>
Efect: aparitia ( dupã completarea codului ) unui tabel cu fundalul rosu, cu un chenar albastru av?nd grosimea de 5 pixeli. Tabelul va fi plasat ?n dreapta paginii; distanta dintre celule va fi de 10 pixeli, iar distanta dintre text si marginea celulei de 5 pixeli. Inãltimea tabelului ar trebui sã fie de 20 de pixeli, dar browserele rareori tin seama de atributul height.
• Atributul bgcolor a setat culoarea fundalului.
• Atributul width poate fi exprimat procentual ( ca mai sus ) sau in valoare absoluta ( in pixeli ) si stabileste cat din latimea paginii va ocupa tabelul.
• Atributul border stabileste grosimea chenarului.
• Atributul bordercolor stabileste culoarea chenarului.
• Atributul cellspacing stabileste distanta dintre celule.
• Atributul cellpadding stabileste distanta dintre continutul unei celule si marginea celulei.
• Atributul align produce alinierea tabelului la dreapta, la stanga sau in centrul paginii.
• Atributul height stabileste inaltimea tabelului. In acest exemplu, ia valoarea de 10 pixeli, dar poate fi stabilit si in procente din inaltimea ferestrei.

<tr>
Orice linie din tabel va fi marcata prin <tr> la inceput si prin </tr> la sfarsit. O linie poate contine una sau mai multe celule. Tabelele au acelasi numar de celule pe fiecare linie/coloana. Nu sunt permise tabelele in forma de L, T etc. Pot exista insa celule goale ( sau continand doar &ampnbsp; ).

<td>
Orice celula e delimitata de tag-urile <td> si </td>. Fiecare celula poate avea alta culoare de fundal. O celula poate contine alt tabel care poate contine alt tabel etc. Desigur, o celula poate contine atat text cat si imagini. In interiorul acestui tag, ca si in interiorul tag-ului anterior, poate fi introdus atributul align, acesta putand lua valorile left, right, center, middle, bottom. Acest atribut seteaza alinierea textului din celula respectiva..

1.Exemple tabele

---------------------------------------------
Quote
Telefon gratis
<table>
<tr>
<td>
telefon<br>mobil<br>gratuit gratuit gratuit gratuit
</td>
</tr>
</table>
Telefon gratis
---------------------------------------------
Secventa de cod de mai sus produce afisarea tabelului de mai jos, care contine o singura celula. Tabelul are acelasi fundal ca si pagina ?n care e inclus. Chenarul are grosimea de 5 pixeli. Textul e aliniat la stanga, aceasta fiind setarea implicita

Observatie: Tabelul nostru apare dupã textul "Telefon gratis". Tabelul e afisat ?n mod automat pe r?ndul urmãtor, ?n st?nga paginii, fãrã sã fie necesarã prezenta unui <br>. Similar, textul ce urmeazã tabelului e afisat automat pe r?ndul urmãtor.

Culoarea chenarului a fost stabilitã de browser. Dacã dorim sã stabilim noi culoarea chenarului, vom folosi atributul bordercolor. Scriind <table>

2. <Tbody>, <Caption>, <Colgroup>

Intre etichetele <th> si </th> este cuprins header-ul tabelului.

Exemplu:
---------------------------------------------------------------------------
Quote
<table>
<tr> <th>Clasa a XI-a E</th></tr>
<tr><td>Fete</td><td>Baieti</td></tr>
<tr><td>15</td><td>14</td></tr>
<table>
----------------------------------------------------------------------------
Atributul axis stabileste ca numele header-ului este "Elevi", nume ce poate fi pronuntat de un sintetizator de voce pentru uzul unei persoane handicapate sau ocupate cu alte activitati. Aceasta secventa de cod va produce afisarea urmatorului tabel:

Clase a XI-a E
Fete Baieti
15 14

<thead>

Grupeaza linii in header-ul unui tabel. E un container, asa ca se foloseste ( dar nu obligatoriu ) eticheta de inchidere </thead>.

<tbody>

Grupeaza linii in corpul unui tabel. E un container care are obligatoriu eticheta de inchidere.

<tfoot>

Grupeaza linii intr-un footer. E un container, ca si precedentele etichete.

<caption>

Acest tag produce afisarea unui text deasupra tabelului sau sub tabel.
Exemplu:

Quote
<caption>Productie</caption>
<caption>Fructe</caption>
<tr><td>Mere</td><td>Pere</td></tr>
<tr><td>150 kg</td><td>140 kg</td></tr>
<table>

Aceasta secventa de cod va produce afisarea urmatorului tabel, in care sunt prezente doua elemente header. In IE 5.5, primul va aparea deasupra tabelului si al doilea ( cel ?n a c?rui eticheta am precizat: align=bottom ) sub tabel. In Netscape Navigator 4.75, ambele elemente header vor aparea deasupra tabelului.

Fructe Evident, poate lipsi oricare dintre elementele caption.

<colgroup>
Intr-un tabel, coloanele pot avea latimi diferite, iar textul poate fi aliniat in mod diferit. Tag-ul discutat acum realizeaza asemenea performante.
Exemplu:
<colgroup>
Primele 3 coloane au latimea de 20 pixeli si alinierea textului se face la stanga. Atributul span ia o valoare egala cu numarul coloanelor implicate.

Observatie: Dupã cum ati observat, tabelele de mai sus au fost folosite pentru dispunerea datelor. Totusi, in pagina web, tabelul are un rol important: rolul de machetã a paginii. Mai exact, informatia oricãrei pagini web e dispusã ?ntr-un tabel invizibil, pe mai multe coloane, tabel ce joacã rol de machetã. Puteti studia detaliat acest lucru intr?nd pe diverse pagini web si citindu-le sursele. Fac exceptie, de putin timp, paginile care folosesc div-uri pentru dispunerea informatii.

2. Frames

1.Avantaje/dezavantaje

Avantajele folosirii cadrelor:
o cadrele usureazã navigarea prin pagini
o usureazã operatiunile de actualizare si de ?ntretinere a sitului
o ?ncãrcarea continutului e mai rapidã, deoarece partea fixã se ?ncarcã doar la ?nceput, nu la fiecare click
o informatia importantã ( o reclamã sau adresã de contact etc.) poate fi pastrata tot timpul sub ochii vizitatorului
Dezavantaje:
* Paginile cu frames prezinta adesea aspecte diferite ?n navigatoare diferite si la rezolutii diferite
* Se reduce spatiul de afisare.
* Indexarea sitului de cãtre unele ( nu prea multe ) motoare de cãutare e anevoioasã. Dupã indexare, surferii ce ajung ?n situl dvs folosind un motor de cãutare vor ajunge, de fapt, ?ntr-unul din fisierele componente ale paginii principale, eveniment generator de disconfort pentru surfer, din multiple motive ( design-ul, lipsa link-urilor etc ). O solutie a fost furnizata de dl. Emanuel Baruch, cu urmatorul rezultat: “cand cineva deschide o astfel de pagina, browser-ul o va reincarca incluzand-o in frameset-ul din care trebuie sa faca parte. Acest script este o combinatie JavaScript-PHP, asadar va functiona doar pe serverele care ofera aceasta facilitate”. Puteti gasi codul necesar in articolul “Seturi de cadre (frameset-uri) avansate cu Javascript si PHP” publicat de dl. Emanuel Baruch in revista “PC Magazine” nr. 1 din 2003, pag. 96 sau la adresa pcmagazine.ro/pcmag5-1/ipro3.shtml
* Bookmarking-ul ( trecerea pagini la Favorites ) e dificil.

2. <frameset>, <frame> ,<noframe>

<frameset>
Acest tag divide fereastra ?n subspa?ii dreptunghiulare numite cadre (=frames). Tag-ul <frameset> urmeazǎ tag-ului </head> ?i ?nlocuie?te tag-ul <body>. Atribute:
• Atributul rows precizeazǎ spa?iul ce va fi ocupat de fiecare r?nd. Se exprimǎ ?n pixeli sau ?n procente. Varianta procentelor e cea recomandabilǎ, deoarece monitoarele au dimensiuni diferite.
• Atributul cols precizeazǎ spa?iul ce va fi ocupat de fiecare coloanǎ. Similar atributului rows.

<frame>
Acest tag define?te fiecare cadru. Are urmǎtoarele atribute:
• Atributul name - precizeazǎ numele cadrului curent.
• Atributul src are ca valoare un URL. Acesta poate apar?ine unui fi?ier HTML, unui fi?ier video, unei imagini ( .gif, .jpg etc ) sau unui alt obiect. Totu?i, ultimele 3 variante nu sunt recomandabile. Pentru ca fi?ierul video etc. sǎ fie accesibil persoanelor cu handicap ?i sǎ fie mai bine indexat de motoarele de cǎutare, e de dorit sǎ fie introdus ?ntr-un fi?ier html. Acesta va constitui con?inutul cadrului.
• Atributul longdesc are drept valoare URL-ul unde se aflǎ descrierea detaliatǎ a con?inutului cadrului. Rar folosit.
• Atributul frameborder poate lua valoarea 1 ( cea implicitǎ ) sau 0. Dacǎ luǎm frameborder="0", cadrul nu va avea margine. In caz contrar, va avea.
• Atributul noresize nu ia valori. Prezen?a sa ?n cadrul tag-ului discutat nu e recomandabilǎ, deoarece face ca vizitatorul sǎ nu-?i poatǎ regla dimansiunile cadrelor dupǎ gust.
• Atributul scroll poate lua una dintre valorile: yes|no|auto. Folosindu-l, putem determina apari?ia/dispari?ia barei de scroll a cadrului.
• Atributele marginwidth, marginheight seteazǎ distan?a dintre text ?i marginea cadrului.

<noframe>
Unele browsere nu suportǎ cadrele. Acestora li se adreseazǎ un mesaj cuprins ?ntre tag-urile <noframes> ?i </noframes>. Mesajul e vizibil numai c?nd cadrele nu sunt afi?ate. Totu?i, browserele moderne nu au aceastǎ problemǎ.

3.Exemple de frame

Impǎr?irea pe verticalǎ a unei pagini ?n douǎ cadre numite stanga ?i dreapta se face astfel:
Quote
<html>
<head><title>index.html</title></head>
<frameset>
<frame>
<frame>
</frameset>
</html>
• Tag-ul <frameset> precizeazǎ cǎ pagina se ?mparte ?n doua coloane. Prima coloanǎ urmeazǎ sǎ ocupe 20% din suprafa?a monitorului, iar a doua restul. In loc de procent, putem pune dimensiunea pe orizontalǎ a ferestrei (?n pixeli ), dar acest lucru nu e recomandabil, deoarece pagina dvs. va fi vizualizatǎ la rezolu?ii diferite.
• Tag-ul urmǎtor se referǎ la fereastra care poartǎ numele sugestiv de "stanga" ?i ?n care va fi afi?at fi?ierul sta.htm. Aceastǎ fereastrǎ nu poate fi redimensionatǎ, lucru stabilit prin atributul noresize. Dacǎ acesta lipse?te, fereastra poate fi redimensionatǎ. Pentru bara de scroll, s-a preferat valoarea auto. Alte valori posibile sunt yes ?i no.
• Tag-ul care urmeazǎ se referǎ la fereastra din dreapta, numitǎ "dreapta". In aceastǎ fereastrǎ va fi ?ncǎrcat fi?ierul dre.htm. G?ndi?i-vǎ la ferestrele din componen?a paginii ca la douǎ farfurii goale numite "stanga" ?i "dreapta", ?n care urmeazǎ sǎ se punǎ fi?ierul sta.htm, respectiv dre.htm.
• Executa?i click-dreapta pe suprafa?a ferestrei din st?nga, apoi "View source". Ve?i ob?ine astfel sursa fi?ierului sta.htm. Se observǎ cǎ, ?n interiorul fiecǎrui link, existǎ atributul target, cǎruia i s-a atribuit valoarea "dreapta". Aceasta indicǎ faptul cǎ fi?ierul-?intǎ va fi ?ncǎrcat ?n partea din dreapta a paginii, a?a cum e normal. Dacǎ acest atribut lipse?te, fi?ierul-?intǎ va fi ?ncǎrcat ?n fereastra-apelantǎ ( "stanga" ), ceea ce nu e de dorit.
Exemplul 2:

Quote
<html>
<head><title>index.html</title></head>
<frameset>
<frame>
<frame>
<frame>
<noframes>
Despre cadre (frames) in HTML
</noframes>
</frameset>
</html>

Aceastǎ secven?ǎ de cod ?mparte pagina ?n trei ferestre orizontale, numite "sus", "centru" si "jos". La ?ncǎrcarea fi?ierului index.html, ?n aceste trei ferestre vor fi ?ncǎrcate fi?ierele x,y ?i z. Ferestrele de sus ?i de jos nu vor avea bara de scroll, iar cea de la mijloc va avea numai dacǎ este cazul. Browserele care nu suportǎ cadre vor afi?a doar:
Despre cadre (frames)in HTML
Exemplul 3:

Quote
<html>
<head><title>index.html</title></head>
<frameset>
<frame>
<frameset>
<frame>
<frame>
</frameset>
<frame>
</frameset>
</html>

• Fereastra de sus are dimensiunea de 100 pixeli ?i se numeste "sus". In aceastǎ fereastrǎ, va fi afi?at fi?ierul a.htm.
• Fereastra de jos are dimensiunea de 40 pixeli, se nume?te "jos" ?i va con?ine fi?ierul d.htm.
• Fereastra de la mijloc e ?mpar?itǎ ?n alte doua ferestre, care poartǎ numele de "stanga" ?i "dreapta".
Prima va ocupa 50 de pixeli din dimensiunea pe orizontalǎ a paginii, iar cealaltǎ restul; vor afi?a con?inutul fi?ierelor c.htm ?i d.htm. Nici o fereastrǎ nu prezintǎ bara de scroll, cu excep?ia ferestrei "dreapta".

4.<iframe>

Un cadru poate fi introdus ?n interiorul unei pagini obi?nuite, folosind tag-ul <iframe>. Acest tag e suportat doar de Internet Explorer.
Exemplul 1:
Quote
<iframe> </iframe>

Noua fereatrǎ are ?n.l?imea de 140 de pixeli ?i va ocupa 30% din lǎ?imea elementului ?n care se aflã (?n cazul nostru, o celulã a unui tabel invizibil). In interiorul ferestrei, va apǎrea con?inutul fi?ierului a.htm. Avantajul folosirii acestui tag e faptul cǎ permite afi?area con?inutului unui fi?ier extern, dimensiunea ?n kB a paginii principale rǎm?n?nd redusǎ

Exemplul 2:
Quote
<iframe> 
Bine a?i venit ?n pagina mea !
Vota?i-ne ?n top100.ro !
</iframe>
 Bine ati venit ?n pagina mea !<br> Votati-ne ?n top100.ro !

Atributele tag-ului <iframe>:
• Atributul src precizeazǎ adresa paginii ce va fi ?ncǎrcatǎ ? fereastra astfel definitǎ.
• Atributele width ?i height definesc lǎrgimea ?i ?nǎl?imea ferestrei. exprimate ?n pixeli. Atributul width se poate exprima ?i ?n procente.
• Atributul name precizeazǎ numele ferestrei deschise astfel.
• Atributul longdesc ia o valoare care e URL-ul paginii unde gǎsi?i o descriere mai lungǎ a con?inutului ferestrei.
• Atributul frameborder poate lua douǎ valori: 0 ?i 1. Valoarea 1 e valoarea implicitǎ; ?n acest caz, fereastra va avea margine.
• Atributul align poate lua una dintre valorile: top|middle|bottom|left|right. In acest fel, se stabile?te pozi?ia noii ferestre.
• Atributul scrolling poate lua una dintre valorile: yes|no|auto. Scriind scrolling=auto, fereastra va avea bara de scroll doar dacǎ va fi necesar.
• Atributele marginwidth ?i marginheight iau valori numerice care exprimǎ distan?a ( ?n pixeli ) dintre textul din noua fereastrǎ ?i marginile acesteia.

Observa?ii:
• O asemenea fereastrǎ poate fi realizatǎ ?i folosind CSS. Diferente:
Din pacate nu ma pricep la CSS dar cand voi invata voi veni cu completari!!
• Tag-ul <iframe> are multe ?n comun cu tag-ul <object>. Acesta din urmǎ e ?nsǎ suportat mai mult dec?t <iframe> de browsere ?i e inclus ?i ?n HTML 4.0 Strict.
• In fisierul afisat cu <iframe>, serverul-gazdã introduce bannere, ca si ?n pagina principalã. Practic, ?n pagina pe care o aveti sub ochi, se aflã 3 r?nduri de bannere. De aceea, tag-ul <iframe> e recomandat numai ?n siturile cu webhosting-ul platit.