air_g3org3
Administrator
 Inregistrat: acum 14 ani
Postari: 734
|
|
Acest sir de tutoriale este conceput pentru a-ti oferi putina experienta, pentru ca tu sa fii capabil sa citesti si sa scrii in HTML, sa poti salva corect documentele si sa poti, dupa aceea sa vizualizezi toata "osteneala" intr-un browser web. Din pacate aceasta pagina nu detine o rubrica pentru a te invata sa folosesti functiile de baza ale unui calculator, asa ca in acest sens poti sa ceri ajutorul unui prieten pentru a putea fii initiat in urmatoarele:
Sa stii ce este un notepad si cum se foloseste
Sa stii sa deschizi un fisier folosind Internet Explorer (sau oricare alt browser la alegere)
Sa stii cum se face si ce este un copy/paste
________________________________________
Prima pagina web
Pentru inceput copiaza urmatorul cod HTML in notepad. Asigurate ca operatiunea sa executat corect, in caz contrar pagina nu va functiona.
Code:
<html>
<head>
</head>
<body> <h2>Prima mea pagina web!</h2>
</body>
</html> |
Codul de mai sus, este tot ceea ce iti trebuie pentru a crea o pagina web de baza. Acum poti salva documentul in notepad selectand din meniul File, optiunea Save As. In fereastra care se deschide, selecteaza All Files. Vom da un nume fisierului, de exemplu "index.html", fara ghilimele. Verifica de doua ori inainte de a apasa butonul Save. O sa te rog sa incerci sa iti aduci aminte unde ai salvat fisierul deoarece vom lucra cu acest fisier ceva mai tarziu.
________________________________________
Vizualizarea primei pagini web - Browsers
Pentru a putea vedea pagina, va trebuii sa folosesti un browser. Browser-ele sunt programele de internet care interpreteaza codurile HTML, asemanatoare cu acelea pe care le-ai copiat si salvat in notepad. Acestea transforma codul HTML intr-o pagina web care poate fi citita de orice internaut. Cele mai folosite browsere sunt:
Internet Explorer
FireFox
Σpera
Netscape Navegator
Vizualizarea primei pagini
Pentru a putea vizualiza pagina web, trebuie sa deschizi fisierul "index.html" intr-un browser. In acest sens, deschide o noua fereastra de Internet Explorer si urmareste intructiunile:
1. Din File selecteaza Open
2. Click pe Browse pentru a deschide un Windows Explorer
3. Iti aduci aminte unde ai salvat fisierul? Foarte bine, acolo trebuie sa te duci.
4. Cand l-ai gasit dai dublu click pe el pentru a-l deschide.
Felicitari! Tocmai ai vazut prima ta pagina web.
Tags in HTML
Acum ca deja ai creat prima ta pagina web, ar trebuii sa examinam cateva segmante ale fisierului "index.html". Cu siguranta ai vazut ca exista un model in aranjatea comenzilor, niste cuvinte care sunt incercuite de "<" si ">", acestea sunt tag-urile de HTML
Un exemplu de tag in HTML este <body>. Tag-ul <body> spune browser-ului, unde incepe continutul paginii web. <body> este deasemenea un exemplu de tag care ar trebuii sa existe in absolut orice pagina web.
Tag-uri de baza in HTML
Sa mai aruncam o privire asupre codului. O pagina web are in componenta doua elemente de baza. Daca vei incerca sa creezi o pagina fara cele doua tag-uri, vei avea probleme.
<html>
<body>
Continutul paginii va fi aici
</body>
</html>
Primul tag se numeste <html> si este cel care ii spune browser-ului ca a inceput un cod in HTML. Cel de-al doilea tag, <body>, spune browser-ului ca aici incepe partea vizibila sau continutul paginii.
Inchiderea tag-urilor in HTML
Poate ai observat deja inca doua tag-uri asemanatoare la sfarsitul documentului, </body> si </html>. Acestea sunt tag-urile de inchidere. </body>, da de stire browser-ului, ca sa incheiat continulul pagini, iar </html> ca s-a incheiat documentul HTML.
Slesh "/" este pus innaintea numelui tag-ului si spune browserului ca ar dori sa inchee respectiva functie. Deci <tag> este folosit pentru a incepe o functie, iar </tag> pentru a o incheia.
Ordinea tag-urilor - Foarte important
Ordinea deschiderii si a inchiderii tag-urilor este foarte importanta. Daca un tag este deschis intr-un altul, de exemplu body este deschis in html atunci acel tag (body) este cel care trebuie inchis inaintea celui de-al doilea tag (html).
Am inchis mai intai body pentru ca a fost cel care s-a deschis cel mai recent. Aceasta regula si anume deschiderea si inchiderea tag-urilor se aplica la toate celelalte taguri ale documentelor HTML.
Cea de-a doua pagina
Probabil ca ai nevoie de timp si de mai multe incercari perntru a te acomoda cu aceste reguli, asa ca cel mai bine ar fi sa exersam in continuare cu o a doua pagina web. Copiaza acest cod in notepad, asa cum ai facut si prima data.
<html>
<head>
<title>Pagina mea! </title>
</head>
<body>
<h2>Bine ati venit.</h2>
<p>Foarte curand voi face o pagina care va va da pe spate pe toti!</p>
</body>
</html>
Dupa ce te-ai asigurat ca totul e facut conform indicatiilor anterioare, poti salva documentul. Ai putea chiar sa-l salvezi cu acelasi nume ca si cel anterior, si anume "index.html". S-ar putea sa te intrebe daca vrei sa salvezi peste documentul anterior, poti sa dai linistit OK, nu vom mai avea nevoie de celalalt document. Cand ai terminat, mergi mai departe si citeste urmatorul tutorial.
Concluzie
In exemplul anterior au fost introduse cateva tag-uri noi. Vom incerca sa dam o definitie acesstora, pentru a putea incepe in lectia urmatoare, adevaratul Tutorial HTML.Tagurile despre care vorbeam sunt: <head>, <title>, <h2> si <p>.
Exemplul in discutie:
<html>
<head>
<title>Pagina mea! </title>
</head>
<body>
<h2>Bine a-ti venit.</h2>
<p>Foarte curand voi face o pagina care va v-a da pe spate pe toti!</p>
</body>
</html>
<head>
Acest tag urmeaza imediat dupa <html> si este folosit pentru a indica browser-ului, informatii utile precum: titlul pagini, continulul (folosit de motoarele de cautare vechi) si multe altele
________________________________________
<title>
Se pune intre <head> si </head>. Acest tag este cel care da numele pagini. Numele va fi afisat in browser, de obicei in partea stanga sus. In exemplul anterior titlul era "Pagina mea!" si va fi afisat ca si titlul browserului.
________________________________________
<h2>
Acesta este titlul care apre in pagina, inainte de continut si va fi mai mare decat litera de continut. <h2> inseamna ca e cea de-a doua marime a literei intre cel sase care exista. <h1> este cea mai mare iar <h6> va fi cea mai mica.
________________________________________
<p>
Este tag-ul care marcheaza deschiderea si incheerea unui paragraf. Asa ca atunci cand vei incepe un paragraf asigurate ca ai pus <p> la inceput si </p> la sfarsit.
________________________________________
Continua sa inveti - Tutorial HTML
Acum ca ai inteles baza etichetelor in HTML si cum acestea functioneaza, poti sa mergi ma departe incepand sa citesti sectiunea Tutorial HTML.Aici vei invata toate etichetele si atributele HTML, cum sa le folosesti si cum sa construiesti o pagina web functionala.
Tutorial HTML
Daca deja esti familiarizat cu XML, atunci HTML ti se va parea usor de invatat. Va safatuim sa nu cititi tot acest tutorial dintr-o data, ci sa petreceti un sfert sau o jumatate de ora parcurgand cateva lectii dupa care sa reflectari asupra informatiei citite si sa practicati.
Pregatire pentru HTML
Crearea documentelor in HTML nu este dificil. Pentru inceput vei avea nevoie decat de notepad si putina dedicatie.
Pagini Web
Paginile web au multe intrebuintari. Aici sunt explicate cateva dintre argumente:
Cea mai simpla cale de a raspandii informatii pe internet
Poti face cunoscut lumi ca ai ceva de spus intr-o pagina personala
Cuvinte de retinut
Tag - folosit pentru a specifica regiuni ale documentului HTML, pe care le va interpreta ulterior browser-ul. Tag-urile vor avea aceasta infatisare: <tag>
Element - este un tag complet, avand un <tag> de deschidere si unul de inchidere </tag>.
Attribute - este folosit pentru a modifica valoarea unui element in HTML. De obicei un element are mai multe atribute.
Deocamdata trebuie doar sa retii ca un tag este o comanda pe care browser-ul o interpreteaza, ca un element este un tag complet iar un atribut personalizeaza si modifica un element in HTML.
Elemente HTML
Elementele de HTML au multe ranguri.
Un element are trei parti: un tag de deschidere, continutul elementului si tag-ul de inchidere.
1. <p> - tag-ul pentru deschiderea unui paragraf.
2. Continutul elementului - paragraful propriu-zis.
3. </p> - tag-ul de inchidere.
***Nota:
Toate paginile web vor avea cel putin elementele de baza: html, head, title si body.
<html>element...</html>
Un document HTML intotdeauna va incepe si va termina cu un tag <html> si respectiv </html>. Aceasta este spructura standard a unui HTML.
Deschide te rog Notepad si copiaza urmatorul cod:
<html>
</html>
Salveaza documentul di meniul File / Save As. Selecteaza All Files si denumeste fisierul nou creeat, "index.html". Apasa Save. Deschide acum fisierul intr-un browser pentru a avea posibilitatea sa dam refresh (F5).
Daca ai facut totul bine vei putea vedea prima ta pagina web, complet alba!
Elementul <head>
Elementu <head> este cel care urmeaza. Atata timp cand il pui intre html si body totul ar trebuii sa fie OK. "Head" nu are nici o functie vizibila, asa ca vom discuta despre acest aspect in tutorialele ulterioare. Totusi vreau sa mentionez ca <head> poate oferi browserului informatii foarte utile. Se pot insera aici printre altele coduri Javascript sau CSS.
Deocamdata insa il vom lasa gol cu exceptia faptului ca vom introduce urmatorul element pe lista, dar mai intai sa aruncam o privire fara el:
<html>
<head>
</head>
</html>
Daca vei salva documentul si vei incerca sa dai un refresh la pagina intiala din browser nu vei nota nici o diferenta. Ai putina rabdare, in continuare vom studia cateva elemente vizibile.
Elementul <title>
Pentru ca totul sa iasa bine trebuie sa pui tag-ul title inauntrul celui de head. Ceea ce vei scrie intre cele doua tag-uri title (<title> si </title> va putea fi vizualizat ca si numele browser-ului, de obicei in partea din stanga sus. Alaturat avem si codul sursa:
<html>
<head>
<title> Prima mea pagina web!</title>
</head>
</html>
Salveazal acum fisierul si deschide-l in browser. Vei putea vede titlul dupa cum am mai spu sin partea din stanga sus la marea majorilate a browser-elor
Poti pune orice nume doresti, daoar tine minte ca numele descriptive sunt cele mai usor de gasit ulterior
Elementul <body>
Elementul body este cel care defineste inceperea continutului pagini propriu-zise (titluri paragrafuri ftografii muzica si orice altceva). Dupa cum poti vedea in meniul de la stanga, vom trata pe rand toate aceste elemnte de continut.
Deocamdata tot ce trebuie sa retii este ca body incapsuleaza tot continutul paginii.
<html>
<head>
<title> Prima mea pagina web!</title>
</head>
<body>
Salut Gasca! Aici voi pune mai tarziu continutul!
</body>
</html>
Vizualizeaza acum toata isprava.
Html Tags - Introducere
Un browser citeste absolut tot ceea ce ai scris in documentul HTML. De fiecare data cand gaseste un tag il va trata ca atare si il va reda, ca de exemplu un paragraf, un titlu un tabel sau orice altceva. Tagurile au trei parti dupa cum am mai spus deschiderea, continutul si inchiderea.
Dupa cum vei putea invata mai departe exista sute de taguri HTML. Absolut toate elementele care vor fi redate de un browser au nevoie de un tag sau doua.
<openingtag>Continut</closingtag>
<p>Exemplu un paragraf</p>
Tag-urile se scriu cu litere mici. Acesta este standardul de scriere in XHTML si Dynamic HTML.
Alaturat sunt cateva exemple de taguri in HTML.
<body>Actioneaza ca o capsula asupra continutului.
<p>Paragraf</p>
<h2>Titlu (heading)</h2>
<b>Ingrosat (bold)</b>
<i>Inclinat (italic)</i>
</body>
________________________________________
Exceptii - Tag-uri care nu au nevoie de inchidere
Exista cateva tag-uri care nu indeplinesc modelul anterior aratat. Motivul este ca in realitate aceste tag-uri nu au nevoie de nuci un continut. Datorita acestui fapt se va folosi o maniera modificat de criere a acestor taguri.
Cel mai simplu exemplu este "linebreak"
<br/>
Acest tag a imbinat cele doua taguri, de deschidere si de inchidere, intro forma mult mai simpla si mai eficace de folosit. Line break se foloseste pentru a spune browser-ului ca vrem sa coboram cu o linie mai jos, fara insa a incheia paragraful.
Urmand acest exemplu si alte tag-uri au fost modificate pentru o scriere mai simpla si mai rapida.
<img src="../img/image.jpg" /> -- Image Tag --
<br /> -- Line Break Tag --
<input type="text" size="12" /> -- Input Field --
Vizualizare
-- Line Break --
Dupa cum poti vedea borowser-ul este capabil sa reproduca aceasta imagine atata timp cat furnizam locatia cu ajutorul atributului "scr". Mai multe despre aceasta in tutorialul urmator.
Atribute HTML
Atributele sunt folosite pentru a personaliza tag-urile. Ce vreau sa spun? Ca la un moment dat vei vrea sa redimensionezi o imagine sau un tabel sau sa schimbi culoarea de fond. Toate acestea sunt posibile cu ajutorul atributelor.
Cele mai multe tag-uri au propriile lor atribute. Vom vorbi despre aceasta pe masura ce introducem in discutie un nou tag. Acum insa vom vorbi despre un set de atribute generice care se pot folosi cu majoritatea tag-urilor.
Atributele se introduc intre parantezele unghiulare (<> ale tag-ului de deschidere.
Atributele "class" si "id" in HTML
Aceste doua atribute sunt foarte asemanatoare. Ele nu au un rol direct in formatarea elementelor si mai degraba sunt utile in spatele scenei cu ajutorul CSS. Vom vorbi despre rolul acestora la momentul potrivit, atunci cand vom studia sintaxa si funcia lor in CSS
Idea este ca atunci cand vrei sa stabilesti o clasa de tag-uri pentru a fi folosite mai tarziu ca ajutorul CSS, sa poti diferentia intre doua tag-uri identice dar cu atribute diferite. Priveste exempul alaturat.
<p id="italicsparagraph">Paragraph type 1, inclinat </p>
<p id="boldparagraph">Paragraph type 2, ingrosat </p>
Vizualizare
Paragraph type 1, inclinat
Paragraph type 2, ingrosat
________________________________________
HTML - Atributul "name"
"name" este ceva mai diferit fat de "id" si "class". Punand un nume unui element, acesta devine o variabila de script pentru Javascript, ASP si PHP. Cel mai des este intalnit in formulare si alte campuri de text interactive.
<input type="text" name="TextField" />
Vizualizare
Acest atribut nu are nici un afect asupra redarii casutei de text, cu toate ca in background detine un rol foarte important.
________________________________________
HTML - Atributul "title"
Acest atribut este folosit foarte putin fata de cat ar trebuii, el adauga un titlu (un pop-up) oricarui continut al unui element. Acest atribut nu ar trebui uitat. Poti denumi aproape orice si oricum doresti. Vizualizarea titlului apare atunci cand ne oprim co mausul cateva secunde deasupra contnutului.
<h2 title="Eu sunt un atribut title!">Un Titlu Oarecare</h2>
Vizualizare
Un Titlu Oarecare
Treci cu mausul peste titlul de mai sus ca sa vezi magia atributului "title". Acest atribut va oferi site-ului tau multa interactiune cu cei ce te vor vizita. Nu il trece cu vederea.
________________________________________
HTML - Atributul "align"
Daca vrei sa aliniezi in mod diferit anumite elemente ale pagini tale, atunci ai la dispozitie atributul align. Poti alinia la stanga (left(, dreapta (right) sau la la mijlocul (center) pagini aproape orice element. Prin default elementele se aliniaza la stanga, esceptand atuci cand se specifica o alta aliniere.
<h2 align="center">Titlu centrat </h2>
Vizualizare
Titlu centrat
Alete exemple:
<h2 align="left">Titlu aliniat la stanga </h2>
<h2 align="center">Titlu centrat </h2>
<h2 align="right">Titlu aliniat la dreapta </h2>
Vizualizare
Titlu aliniat la stanga
Titlu centrat
Titlu aliniat la dreapta
________________________________________
Valori standard pentru atribute
Multora dintere tag-uri li se atribuie, valori standard. Asta inseamna ca daca nu specifici un alt atribut, browser-ul o va face pentru tine. De exemplu un paragraf se va alinia singur la stanga, exceptand atunci cand specifici altfel; la fel si elementele unui tabel. Pe masura ce vei exersa vei intelege mai multe despre valorile default ale unor tag-uri
________________________________________
Atribute generice
Retine ca atributele sunt folosite pentru a personaliza elementele unei pagini web. Am alturat aici cateva dintre atributele cele mai comune, folosite in HTML:
Attribute Options Function
align right, left, center Aliniere orizontala
valign top, middle, bottom Aliniere verticala
bgcolor numeric, hexidecimal, sau valoare RGB Un background in spatele elementului
background URL O imagine in spatele elementului
id Definit de user Numeste un element care se va folosi cu CSS
class Definit de user Clasifica un element care se va folosi cu CSS
width Valoare numerica Specifica latimea unui tabel, imagine, sau casute de tabel.
height Valoare numerica Specifica inaltimea unui tabel, imagine, sau casute de tabel.
title Definit de user "Pop-up". Afiseaza un titlu pentru un element stabilit.
Atributul de paragraf <p>
Paragraful este un elemet de baza in editare de text. Tag-ul pentru paragraf este <p>. Acesta va plasa o linie goala deasupra si dedesuptul textului pentru a fi evidentiat, iar browser-ul il va interpreta ca atare.
<p>Paragraful este un elemet de baza in...</p>
<p>Acesta va plasa o linie goala deasupra si...</p>
Vizualizare
Paragraful este un elemet de baza in editare de text. Tag-ul pentru paragraf este <p>.
Acesta va plasa o linie goala deasupra si dedesuptul textului pentru a fi evidentiat, iar browser-ul il va interpreta ca atare.
HTML - Paragraf incadrat, justify
Paragrafele se pot formata aproximatix la fel de simplu ca si intr-un editor de texte. Incadrarea din exemplul alaturat s-a facut cu ajutorul atributului justify.
<p align="justify">Paragraful este un elemet de baza in...</p>
Vizualizare
Paragraful este un elemet de baza in editare de text. Tag-ul pentru paragraf este <p>. Acesta va plasa o linie goala deasupra si dedesuptul textului pentru a fi evidentiat, iar browser-ul il va interpreta ca atare.
________________________________________
HTML - Paragraf centrat, center
<p align="center">Paragraful este un elemet de baza in...</p>
Vizualizare
Paragraful este un elemet de baza in editare de text. Tag-ul pentru paragraf este <p>. Acesta va plasa o linie goala deasupra si dedesuptul textului pentru a fi evidentiat, iar browser-ul il va interpreta ca atare.
In acest exemplu fiecare linie a paragrafului a fost centrata la mijlocul randului de redare.
________________________________________
HTML - Paragraf aliniat la dreapta, right
<p align="right">Paragraful este un elemet de baza in...</p>
Vizualizare
Paragraful este un elemet de baza in editare de text. Tag-ul pentru paragraf este <p>. Acesta va plasa o linie goala deasupra si dedesuptul textului pentru a fi evidentiat, iar browser-ul il va interpreta ca atare.
HTML - Titluri 1:6 (Headings)
Un titlu in HTML este exact ceea ce pare: un titlu adevarat, sau un subtitlu. Atunci cand plasezi un text intr-un tag <h1>, textul va fi afisat ingrosat, iar dimensiunea literei va fi dat de numarul heading-ului. Titlurile pot avea dimensiuni de la de la 1 la 6 unde 1 este cea mai mare dimensiune si repectiv 6, cea mai mica.
Code:
<body>
<h1>Headings</h1>
<h2>are</h2>
<h3>great</h3>
<h4>for</h4>
<h5>titles</h5>
<h6>and subtitles</h6>
</body> |
Vizualizare
Poti obserba ca fiecare titlu are cate un "linebreak" innainte si dupa. De fiecare data cand punem un headind, browser-ul va reda automat de la sine un salt in linie inaintea lui si deasemenea dupa.
HTML - Exemplu Practic
Sa luam acum un exemplu simplu si sa practicam un pic pentru ca informatia sa fie inteleasa pe deplin. Ar fi de preferat sa te obisnuiesti cu acesti termeni inainte de a continua.
<h2 align="center">HTML - Titluri 1:6 (Headings) </h2>
<p>Un titlu in HTML este exact ceea ce pare: un titlu adevarat, sau un ...</p>
<p>Un titlu in HTML este exact ceea ce pare: un titlu adevarat, sau un ...</p>
Vizualizare
HTML - Titluri 1:6 (Headings)
Un titlu in HTML este exact ceea ce pare: un titlu adevarat, sau un subtitlu. Atunci cand plasezi un text intr-un tag <h1>, textul va fi afisat ingrosat, iar dimensiunea literei va fi dat de numarul heading-ului. Titlurile pot avea dimensiuni de la de la 1 la 6 unde 1 este cea mai mare dimensiune si repectiv 6, cea mai mica.
Un titlu in HTML este exact ceea ce pare: un titlu adevarat, sau un subtitlu. Atunci cand plasezi un text intr-un tag <h1>, textul va fi afisat ingrosat, iar dimensiunea literei va fi dat de numarul heading-ului. Titlurile pot avea dimensiuni de la de la 1 la 6 unde 1 este cea mai mare dimensiune si repectiv 6, cea mai mica.
Line break - Salt in linie
Un salt in line este diferit fata de celelalte tag-uri pe care le-am studiat pana acum. Plasarea acestuia in codul sursa al documentului, va incheia randul respectiv si va cobora cu o linie mai jos, lasand un spatiu mai mic in comparatie cu cel de paragraf. Se foloseste in paragraf dupa cum poti observa in exemplul de mai jos.
<p>
Ion Ionescu <br />
Calea Victoriei No.1 <br />
Bucuresti, Romania <br />
</p>
Vizualizare
Ion Ionescu
Calea Victoriei No.1
Bucuresti, Romania
Deasemenea se poate folosi pentru a evidentia o semnatura ca de exemplu la sfarsitul unei scrisori.
<p>
Multumesc anticipat,<br />
<br />
<br />
Ion Ionescu <br />
Vice Presedinte
</p>
Vizualizare
Multumesc anticipat,
Ion Ionescu
Vice Presedinte
HTML - Horizontal Rule (linie orizontala)
Foloseste <hr/> pentru a crea o linie orizontala. Acest tag esste similar celui de linebreak.
<hr/>
Folosestele
<hr/><hr/>
Cu
<hr/>
Moderatie
<hr/>
Vizualizare
________________________________________Folosestele
________________________________________________________________________________Cu
________________________________________Moderatie
________________________________________
Dand la o parte acest exemplu exagerat linia orizontala poate deveni utila in diferite circumstante, precum poti vedea in exemplul de mai jos: o nota de subsol.
<hr />
<p>1. "The Hobbit", JRR Tolkein.<br />
2. "The Fellowship of the Ring" JRR Tolkein.</p>
Vizualizare
________________________________________
1. "The Hobbit", JRR Tolkein.
2. "The Fellowship of the Ring" JRR Tolkein.
Dupa cum poti vedea, tot ceea ce face acest tag este sa deseneze o linie orizontala separand diferite zone ale continutului sau pur si simplu decoreaza. Folosita cu iscusinta poate da rezultate destul de neasteptate.
HTML - Liste
HTML pune la dispozitie trei tipuri de liste. <ol> va afisa o lista ordonata in timp ce <ul> una neordonata, iar pentru a realiza o lista de defnitii se foloseste <dl>. Foloseste atributele type si start pentru a realiza lista cea mai potrivita cerintelor tale.
<ul> - unsorted list, buline
<ol> - ordered list, numere
<dl> - definition list, lista de definitii.
________________________________________
HTML - Lista ordonata
Foloseste tag-ul <ol>pentru a incepe o lista ordonata. Prin punerea <li></li> (list item) intre tagurile <ol> si </ol> semnalizezi browser-ului elementele listei.
<h4 align="center">Oviective</h4>
<ol>
<li>S gasesc o slujba </li>
<li>Sa iau bani multi </li>
<li>Sa ma mut in alt oras </li>
</ol>
Vizualizare
Oviective
1. S gasesc o slujba
2. Sa iau bani multi
3. Sa ma mut in alt oras
Poti incepe lista cu orice alt numar doresti specificandu-l insa cu ajutorul atributului start.
<h4 align="center">Oviective</h4>
<ol start="4" >
<li>S gasesc o slujba </li>
<li>Sa iau bani multi </li>
<li>Sa ma mut in alt oras </li>
</ol>
Vizualizare
Oviective
4. S gasesc o slujba
5. Sa iau bani multi
6. Sa ma mut in alt oras
Acest element nu face nimic iesit din comun dar este destul de folositor uneori.
________________________________________
HTML - Alte tipuri de liste ordonate
In afara de modelul mai sus aratat mai sunt alte patru tipuri de liste ordonate. In locul cifrelor arabe poti folosi cifre romane sau la fel de bine litere iar in ambele cazuri pot fi folosite litere mici sau majuscule. Foloseste atributul type pentru a modifica tipul numerotarii.
<ol type="a">
<ol type="A">
<ol type="i">
<ol type="I">
Vizualizare
Litere mici Majuscule Numere romane cu litere mici Numere romane cu majuscula
a. Un loc de munca
b. Bani
c. Alt oras A. Un loc de munca
B. Bani
C. Alt oras i. Un loc de munca
ii. Bani
iii. Alt oras I. Un loc de munca
II. Bani
III. Alt oras
________________________________________
Liste nesortate
Creaza o lista nesortata cu ajutorul tagului <ul>. Listele nesortate deasemenea sunt de mai multe tipuri si anume, patratele buline si cerculete.Valoarea standard redata de majoritatea browser-elor sunt bulinele
<h4 align="center">lista de cumparaturi </h4>
<ul> <li>lapte</li>
<li>branza</li>
<li>oua</li>
<li>zahar</li>
</ul>
Am alaturat ceva mai jos un exemplu despre cum arata si celelalte tipuri de liste neordonate.
<ul type="square">
<ul type="disc">
<ul type="circle">
________________________________________
HTML - Lista de definitii
Deasemene poti face liste de definitii folosind tag-ul <dl>. Aceasta lista reda cuvantul deasupra definitiei. Este indicat sa ingrosam cuvantu pentru a fi mai bine evidentiat.
<dl>
<dt><b>Fromage</b>
</dt> <dd>Cuvant francez pentru branza .</dd>
<dt><b>Voiture</b></dt>
<dd>Cuvant francez pentru masina</dd>
</dt>
HTML - Elemente de format
Pe masura ce vei adauga din ce in ce mai mult text pagini tale, vei avea nevoie de noi elemente pentru al formata in functie de gustul si necesitati. In tutorialul despre atribute am vorbit despre, modalitati de a adauga un plus elementelor dorite. Acete tag-uri de formatare pot face elementele, ingrosate inclinate subliniate taiate dar nu numai.
<p>Exemplu de <b>Bold Text</b></p>
<p>Exemplu de <em>Emphasized Text</em></p>
<p>Exemplu de <strong>Strong Text</strong></p>
<p>Exemplu de <i>Italic Text</i></p>
<p>Exemplu de <sup>superscripted Text</sup></p>
<p>Exemplu de <sub>subscripted Text</sub></p>
<p>Exemplu de <del>struckthrough Text</del></p>
<p>Exemplu de <code>Computer Code Text</code></p>
Vizualizare
Exemplu de Bold Text
Exemplu de Emphasized Text
Exemplu de Strong Text
Exemplu de Italic Text
Exemplu de superscripted Text
Exemplu de subscripted Text
Exemplu de
Exemplu de Computer Code Text
________________________________________
HTML - Cum sa folosesti tag-urile de formatare
Aceste tag-uri ar trebuii utilizare cu moderatie. Ceea ce vreau sa spun este ca este indicat sa le folosesti pentru a ingrosa sau inclina de exemplu un cuvant sau doua intr-un paragraf. Atunci cand vrei sa le folosesti de exemplu cu un intreg paagraf, cel mai bine este sa apelelezi la CSS. Oricum acesta nu este decat un sfat, in final decizia iti apartine tie si le poti folosi dupa cum experienta iti indica.
HTML - Coduri de culori
Exista trei feluri distincte de a defini o culoare. Cea mai simpla metoda este aceea de a numi culorile (in engleza). De exemplu: black, white, red, green, si blue. Am alaturat mai jos numele de culori care sunt suportate in HTML.
________________________________________
HTML - Sistemul de culori RGB
Acest cod de culori nu este recomandat, deoarece Intenet Explorer este singurul Browser care suporta valorile RGB in HTML.
RGB este prescurtarea pentru: Red, Green, Blue. Fiecare dintre aceste culori poate lua orice valoare intre 0 (nu coloreaza deloc) si 255 (in totalitate acea culoare). Am alaturat mai jos forma de scriere a culorilor in RGB. Daca folosesti un browser ca re nu este Internet Explorer nu vei avea nici un rezultat.
________________________________________
HTML - Sistemul de culori hexazecimal
Sistemul hexazecimal este destul de dificil la prima vedere. Cu toate aceste te asigur ca odata cu trecerea timpului, si cu putina practica, il vei intelege pe deplin. Sistemul de culori hexazecimal este sistemul standard pentru toate browser-ele web. Este de incredere si este compatibil nu numai in aplicatiile web.
Sistemul hexazecimal este o reprezentare de 6 caractere de culoare. Primele doua caractere (RR) reprezinta valoarea rosu (red), urmatoarele doua (GG) sunt verde (green), iar ultimele doua (B sunt albastru (blue).
bgcolor="#RRGGBB"
________________________________________
HTML - Coduri de culoare - Ruperea codului
Tavelul urmator arata cum, mai exact, literele sunt integrate in sistemul hexazecimal, marind a****el posibilitatile de combinare.
Zecimal
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Hexazecimal
0 1 2 3 4 5 6 7 8 9 A B C D E F
In acest fel posibilitatile cresc iar sistemul poate avea 16 valori.
Un exemplu de cod hexazecimal ar fi:
bgcolor="#FFFFFF"
Litera "F" este valoarea maxima pe care o poate avea sistemul. La intalnirea acestui cod un browser va afisa culoare alb. In cazul in care vrei sa afli valoarea numerica a acestei culori avem formula urmatoare:
(15 * 16) + (15) = 255
Formula este foarte simpla. Se ia prima valoare a lui "F" sau 15 si se inmulteste cu 16 si se adauga celei de-a doua valoare 15. Rezultatul este 255, valoarea maxima pe care o poate avea o culoare primara.
bgcolor="#CC7005"
CC(RR - Red)
(12 * 16) + (12) = 204
70(GG - Green)
(7 * 16) + (0) = 112
05(BB - Blue)
(0 * 16) + (5) = 5
________________________________________
True Colors
Sistemul hexazecimal este cel mai utilizal pentru crearea paginilor. Acesta este compatibil cu majoritatea browser-elor, in acest fel interfata pagini web nu va fi distorsionata. Pentru a adauga o nota de siguranta foloseste culorile imperechiata (true colors) precum: "#0011EE", "#44HHFF", sau "#117788. Conform statisticilor acestea nu vor fi schimbate indiferent de browser.
Am alaturat mai jos un tabel cu aceste culor.
Pentru simplificarea tabelului am folorit o metoda simplificata de afisare. Tine minte in acest sub-capitol vorbim de culori imperechiate, asa ca de exemplu culoarea reprezentata ca fiind 369 este de fapt 33 66 99 iar FFC va fi FF FF CC.
[
________________________________________
*Cele mai sigure culori HTML
Cu toate ca aceste culori (true colors) de mai sus, sunt cele recomadate pentru a fi folosite de catre webmasteri, a fost demonstrat ca doar 22 dintre cele 216 culori sunt cu adevarat sigure si nu vor fi in absolot modificate in reprezentare de catre nici un browser. In tabelul de mai sus culorile cu adevarat sigure au fost reprezentate cu un asterix ( * ) in fata.
HTML - Font si Basefont
Tag-ul <font> este folost pentru a modifica tipul de text, marimea si culoare. Foloseste atributele "size", "color", si "face" pentru a personaliza textul. Foloseste tag-ul <basefont> pentru a seta culoarea marimea si stilul intregului tau text.
In general tag-urile "font" si "basefont" nu se folosesc prea mult, in general se foloseste css-ul pentru a stabili atributele textului.
Marimea Font-ului
________________________________________
Seteaza marimea font-ului tau cu ajutorul atributului size al tagului font. Sunt acceptate valori intre 1 (cea mai mica) si 7 (cea mai mare). Valoarea standard a unui text normal este 3.
<p>
<font size="5">Acesta este un font de marime 5 </font>
</p>
Vizualizare
Acesta este un font de marime 5
________________________________________
Culoarea fontului
Seteaza culoarea textului
<font color="#990000">This text is hexcolor #990000</font>
<br />
<font color="red">This text is red</font>
This text is hexcolor #990000
This text is red
________________________________________
Font Face
Alege un stil de litera folosind tag-ul fontface. Poti alege orice font ai instalat, cu toate acestea, alege cu grija deoarece utilizatorul aflat pe pagina ta nuva putea vizualiza fontul respectiv daca nu il are instalat. Acesta va vedea in schimb font-ul default si anume Times New Roman. Solutia ar fi sa alegi mai multe font-uri asemanatoare ca aspect.
<p>
<font face="Bookman Old Style, Book Antiqua, Garamond">This paragraph has had its font...</font>
<p>
This paragraph has had its font formatted by the font tag!
________________________________________
Basefont
Cu ajutorul tag-ului basefont vei putea stabili valoare default a font-ului in pagina ta web. Recomandam sa specifici un basefont in cazul in care vei utiliza font-ul in HTML. Avem alaturat un model.
<html> <body>
<basefont size="2" color="green">
<p>This paragraph has had its font...</p>
<p>This paragraph has had its font...</p>
<p>This paragraph has had its font...</p>
</basefont>
</body> </html>
This paragraph has had its font formatted by the basefont tag!
This paragraph has had its font formatted by the basefont tag!
This paragraph has had its font formatted by the basefont tag!
Cu toate acestea, basefont este oarecum depasit, este foarte probabil ca in viitorul apropiat sa nu se mai lucreze cu el, trecanduse in acest fel definitiv configurarea cu ajutorul CSS.
________________________________________
Atribute
Attribute= "Value" Description
size= "Num. Value 1-7" Size of your text, 7 is biggest
color= "rgb,name,or hexidecimal" Change font color
face= "name of font" Change the font type
________________________________________
Inceputul "Ca la carte"
<p>
<font size="7" face="Georgia, Arial" color="maroon">C</font>ustomize your font to achieve a desired look.
</p>
Customize your font to achieve a desired look.
HTML - Hypertext Reference / href
Atributul href numeste legatura catre o alta pagina web. De fapt este locul unde va fi dus user-ul care va executa un click pe linkul respectiv.
Linkurile pot fi de trei tipuri:
interne - catre locuri specifice din pagina (anchors)
locale - catre alte pagini dar pe acelasi domeniu
globale - catre alte domeni in afara site-ului
Internal - href="#anchorname"
Local - href="../img/foto.jpg"
Global - href="http://www.tutorialehtml.com/"
________________________________________
HTML - Llink-uri text
Pentru a seta inceputul si sfarsitul unui anchor se poate folosi <a></a>. Alege tipul de atribut care iti trebuie si punel in interiorul tagului. en exemoplu simplu ar fi:
<a href="http://www.tutorialehtml.com" target="_blank" >Zizix Tutoriale </a>
Vizualizare
Zizix Tutoriale
________________________________________
HTML - Target-uri de link
Atributul target spune browser-ului daca trebuie sa deschida noua pagina intr-o noua fereastra sau in aceeasi fereastra.
target=" _blank" Deschide o noua fereastra
_self" Deschide pagina in aceeasi fereastra
_parent" Deschide noua pagina intr-un frame superior linkului
_top" deschide noua pagina in acelasi browser anuland toate frame-urile
Exemplu de mai jos arata cum se poate deschide o pagina intr-o noua fereastra a browserului. In acest fel putem ramane pe pagina de tutoriale si deschidem o noua pagina de navigare.
<a href="http://www.google.com/" target="_blank" >Google </a>
Vizualizare
Google
________________________________________
HTML - Anchor
Este folosit pentru a lega doua sectiuni ale aceleiasi pagini. In acest sens va trebuii sa dam un nume sectiunilor, dar pentru aceasta cel mai indicat ar fi sa aruncam o privire exemplului urmator.
<h1>HTML - Hypertext Reference / href<a name="top"></a></h1>
<h2>HTML - Llink-uri text<a name="text"></a></h2>
<h2>HTML - Link-uri de e-mail<a name="email"></a> </h2>
Mai departe trebuie sa formulam codul link-ului punand innaintea numelui anchor-ului semnul diez (#). Urmareste exemplul pentru mai buna intelegere.
<a href="#top">Mergi la inceput </a>
<a href="#text">Invata despre link-uri text </a>
<a href="#email">Invata despre adrese de e-mail </a>
Vizualizare
Mergi la inceput
Invata despre link-uri text
Invata despre adrese de e-mail
________________________________________
HTML - Link-uri de e-mail
Crearea unui link de email este foarte simplu. Daca vrei ca cineva sa iti scrie un email cel mai bine ar fi sa sa ii pui la dispozitie un link cu email-ul tau si deasemenea un subiect prestabilit.
<a href="mailto: ?subject=Nelamuriri " >Nelamuriri aici </a>
Vizualizare
Nelamuriri aici
In cazul in care un subiect nu este de ajuns si vrei sa adaugi ceva si la continutul email-ului, o poti face cu ajutorul urmatorului cod:
<a href="mailto: ?subject=Nelamuriri&body=Scrie aici daca ai nelamuriri " >Nelamuriri aici </a>
Vizualizare
Nelamuriri aici
________________________________________
HTML - Link-uri de download
Forma unui link de download este exact aceeasi ca a unui link normal de text. Problema intervine atunci cand vrem sa punem o fotografie. Cea mai buna solutie ar fi sa folosim un tumbnail cu un link, dar vom discuta aceasta problema mai pe larg in lectia urmatoare.
<a href="http://www.tutorialehtml.com/htmlT/text.zip">Text Document</a>
________________________________________
HTML - LInk-uri default / Link-uri de baza
Folosesta tag-ul <base> in interiorul elementului head pentru a seta un link de baza. Acesta este necesar in cazul in care ai pe undeva un link care nu functioneaza corect sau a carui destinatie numai exista. Link-ul de baza redirectioneaza user-ul la adresa specificata. In mod normal se redirectioneaza catre pagina de start, dar este acceptata oricare alta pagina, eventual o pagina special facuta acestui scop.
<head>
<base href="http://www.tutorialehtml.com/">
</head>
HTML - Entitati / Simboluri
In HTML "entitati" este un numele tehnic pentru "simboluri". Cateva simboluri precum copyright, trademark, si multe altele, unele dintre ele disponibile pe tastatura, au nevoie de o scriere speciala.
Incepe cu semnul "end" - &
Dupa care vom scrie numele semnului - copy
SI la sfarsit "punct si virgula" - ;
Copyright
Foloseste © pentru a realiza- © - Simbolul Copyright.
________________________________________
Spatii multiple si <>
Dupa cum am spus si in lectia despre paragrafuri, un browser va recunoaste un singur spatiu, indiferent de cat de multe tastezi intr-un cod de HTML. Exista insa o entitate care poate fi introdusa pentru a afisa mai mult de un spatiu.
<p> In acesta fraza au fost introdese mai multe spatii.<p>
Vizualizare
In acesta fraza au fost introdese mai multe spatii.
Pentru a realiza comenzi in HTML sunt folosite simbolurile "mai mult" si "mai putin". Pentru a fi afisate in browser va trebuii sa folosim o entitate.
<p>
Mai putin - < <br/>
Mai mult - > <br />
Tagul head - <head>
</p>
Vizualizare
Mai putin - <
Mai mult - >
Tagul head - <head>
HTML - Crearea de link-uri tip e-mail
Crearea de link-uri tip e-mail este foarte simpla. Trebuie mentionat insa ca atunci cand vei pune un link tip e-mail pe o pagina publica, este foarte usor pentru un expert sa il gaseasca pentru al folosi mai tarziu, in vederea trimiteri de mesaje spam.
O metoda diferita, care scade riscul spam-ului este acea de a implementarea unui formular e-mail in continutul paginii tale.
________________________________________
HTML - Link-uri de e-mail
Crearea unui link de email este foarte simplu. Daca vrei ca cineva sa iti scrie un email cel mai bine ar fi sa sa ii pui la dispozitie un link cu email-ul tau si deasemenea un subiect prestabilit.
<a href="mailto: ?subject=Nelamuriri " >Nelamuriri aici </a>
Vizualizare
Nelamuriri aici
In cazul in care un subiect nu este de ajuns si vrei sa adaugi ceva si la continutul email-ului, o poti face cu ajutorul urmatorului cod:
<a href="mailto: ?subject=Nelamuriri&body=Scrie aici daca ai nelamuriri " >Nelamuriri aici </a>
Vizualizare
Nelamuriri aici
HTML - Inserarea de imagini
Imaginile sunt foarte importante intr-o pagina web. De aceea este recomandat sa le folosesti in mod corect. Inserarea lor se face cu ajutorul tag-ului <img/>.
<img src="../img/image.jpg" />
Vizualizare
________________________________________
HTML - img src
"src" este prescurtarea pentru "source" (sursa). Acest atribut se foloseste pentru a indica locatia fotografiei. Dupa cum am explicat in capitolul destinat linkurilor se poate folosi orice tip de URL pentru a indica adresa fisierului.
Sursa Locala Descriere
src="image.jpg" fotografia este situata pe acelasi nivel cu fisierul .html
src="../image.jpg" fotografia este situata pe un nivel anterior fisierului .html.
src="../img/image.jpg" fotografia este situata in folderul "img" pe nivelui anterior fisierului .html
Se poate folosi deasemenea adresa completa a fotografie. De exemplu scr="http://www.tutorialehtml.com/img/image.jpg". Acest model de URL nu este recomandat deoarece la schimbarea domeniului va trebui sa schimbi deasemenea si adresele tuturor fotografiilor. Sau in cazul in care imaginea este stocata pe un alt domeniu scr="http://www.domeniu.com/image.jpg".
Faptul de a stoca imaginea pe un domeniu alternativ, prezinta un mare avantaj in cazul in care dispui de un spatiu limitat pe domeniul pe care este stocat fisierul .html.
________________________________________
HTML - Atribute alternative pentru imagini
Atributul "alt" este folosit pentru a afisa un text in locul imagini, in cazul in care browser-ul pentru un oarecare motiv nu poate afisa imaginea sau in cazul in care un user are deselectata functia "ShowImage".
<img src="http://example.com/folder/image.jpg" alt="Imagine Albastra "/>
Vizualizare
________________________________________
HTML - inaltimea si latimea unei imagini
Pentru a stabili inaltimea si latimea unei imagini sunt folosite atributele height si widith.
<img src="../img/image.jpg" alt="Imagine Albastra" width="100" height="50" />
Vizualizare
________________________________________
HTML - Alinierea orizontala si verticala a unei imagini
In acest sens, sunt folosite atributele align si valign. Obtiunile oferite de aceste atribute sunt:
1. Align (orizontal)
right
left
center
2.Valigh (vertical)
top
bottom
center
Am atasat alaturat si un exemplu:
<p>Acesta este primul paragraf ...</p>
<p>
<img src="../img/image.jpg" align="left">
Acesta este cel deal doilea paragraf...
</p>
<p>Acesta este cel de-al treilea paragraf...</p>
Vizualizare
Acesta este primul paragraf, este doar un exemplu pentru a putea intelege mai bine alinierea unei imagini.
Acesta este cel deal doilea paragraf, Imaginea va fi afisata alaturat in partea dreapta, acesta este cel deal doilea paragraf, Imaginea va fi afisata alaturat in partea dreapta, acesta este cel deal doilea paragraf, Imaginea va fi afisata alaturat in partea dreapta, acesta este cel deal doilea paragraf, Imaginea va fi afisata alaturat in partea dreapta,
Acesta este cel de-al treilea paragraf si ultimul, el nu contine nimic dar l-am pus pentru ca "da bine".
________________________________________
HTML - Folosirea imaginilor ca link
Aceasta este doar o introducere, vom trata acest subiect mai pe larg intr-un tutorial urmator. Imaginile sunt foarte utile pentru link-uri si se pot forma cu ajutorul codului urmator:
<a href="http://www.tutorialehtml.com">
<img src="../img/image.jpg"> </a>
Vizualizare
Imaginea de mai sus te va trimite la pagina de start. O poti schimba cu pagina ta de start si vei obtine o imagine cu cu un link catre pagina ta de start.
________________________________________
HTML - Tumbnails
Tumbnails-urile sunt versinui in miniatura (mult mai putini kilobytes) a unor imagini care in realitate sunt mult mai mari si cu o calitate sporita. Pentru a realiza un tumbnail, salveza imaginea intr-o calitate mult mai scazuta cu dimensiuni reduse. Fa apoi aceasa imagine un link ce va conduce la imaginea initiala de de dimensiuni sporite.
<a href="../img/fereastra.jpg"> <img src="../img/tumb_fereastra.jpg"> </a>
Vizualizare
HTML - Link-uri imagine
Cu ajutorul imaginilor poti da putina viata unei pagini web. Transformarea unei imagini intr-un link nu este nicidecum dificila. Trebuie doar sa introduci sursa imagini in interiorul tag-ului de link.
<a href="http://www.tutorialehtml.com"><img src="../img/image.jpg"></a>
Vizualizare
In general prin default majoritatea browser-elor adauga o margine fotografiei folosite drept link, pentru a fi mai usor diferentiata de o fotografie normala.
Pentru a nu avea probleme de vizualizari diferite in functie de browser putem seta marginea la o valoare definita.
<a href="http://www.tutorialehtml.com"><img src="../img/image.jpg" border="0"></a>
Vizualizare
________________________________________
HTML - Tumbnails
Tumbnails-urile sunt versinui in miniatura (mult mai putini kilobytes) a unor imagini care in realitate sunt mult mai mari si cu o calitate sporita. Pentru a realiza un tumbnail, salveza imaginea intr-o calitate mult mai scazuta cu dimensiuni reduse. Fa apoi aceasa imagine un link ce va conduce la imaginea initiala de de dimensiuni sporite.
<a href="../img/fereastra.jpg"> <img src="../img/tumb_fereastra.jpg"> </a>
Vizualizare
HTML - Formulare
Formularele sunt una dintre unetele cele mai importante, folosite de un webmaster pentru a obtine informatii importante despre un internaut, informatii precum email, nume, adressa, telefon sau orice alte informaii.
In functie de necesitati infoarmatia poate fi procesata si stocata intr-un fisier, se pot realiza statistici, formulare de inscriere sau abonamente la informatia prezentata in pagina ta si multe altele.
HTML - Campuri de text
Inainte sa intram in detalii t
________________________________________
rebuie expunem putin bazele unui formular. Campurile de text au cateva atribute care trebuiesc mentionate inca de la inceput:
type - Determina tipul campului de text. De exemplu: text, trimite, sau parola.
name - Atribuie un nume campului pentru a pute face referire la el mai tarziu
size - Seteaza marimea campului.
maxlength - valoarea maxima de caractere ce pot fi introduse.
<form method="post" action="mailto: ">
Name: <input type="text" size="10" maxlength="40" name="name"> <br />
Password: <input type="password" size="10" maxlength="10" name="password">
</form>
Vizualizare
Name:
Password:
NU folosi acest cod. Datele din formular nu vor fi criptate si nu vor fi sigure din punct de vedere al securitatii.
________________________________________
HTML - Formular de email
Sa adaugam acum si butonul de trimitere. In general, butonul de "trimitere" ar trebuii sa fie ultimul si sa aibe atributul name definit ca "Trimite". "Send", "Submit" sau ceva asemanator. Acest nume va fi numele butonului.
Va trebui deasemenea sa specificam o destinatie a datelor introduse in formular la fel ca si modul de transfer. Aceasta se poate face agaugand urmatoarele atribute formularului.
method - Vom folosi metoda "post". Aceasta trimite formularul cu informatia introdusa fara sa afiseze detalli userului.
action - Acesta va fi folosit pentru a specifica URL-ul unde va fi trimisa informatia.
<form method="post" action="mailto: ">
Name: <input type="text" size="10" maxlength="40" name="name"> <br />
Password: <input type="password" size="10" maxlength="10" name="password"><br />
<input type="submit" value="Send"> </form>
Vizualizare
Name:
Password:
Trebuie doar sa schimbi adresa de e-mail cu una valabila pentru ca formularul sa functioneze corect.
________________________________________
HTML - Butoane Radio
Butoanele Radio sunt foarte po***re, utile si usor de folosit. Cel mai intalnit exemplu a fi o intrebare cu multiple variante de raspuns. Atributele care ar trebuii cunoscute sunt urmatoarele.
value - specifica ceea ce va fi trimis in cazul in care un user selecteaza un anume buton. Doar o singura valoare va fi trimissa.
name - decide carui set de butoane apartine butonul selectat.
<form method="post" action="mailto: ">
Ce tip de pantofi porti ? <br />
Culoare:
<input type="radio" name="culoare" value="inchis">Inchis
<input type="radio" name="culoare" value="deschis">Deschis <br />
Marime:
<input type="radio" name="marime" value="mica">Mica
<input type="radio" name="marime" value="medie">Medie
<input type="radio" name="marime" value="mare">Mare <br />
<input type="submit" value="Email Myself"> </form>
Vizualizare
Ce tip de pantofi porti ?
Culoare: Inchis Deschis
Marime: Mica Medie Mare
In cazul in care vei inlocuii adresa de email cu a ta vei primi un email cu: "marime alege) culoarealege)".
________________________________________
HTML - Checkbox
Cu ajutorul CheckBox-urilor userul are posibilitatea de a alege unul, doua sau mai multe variante de raspuns. Atributele name si value se folosesc la fel ca si pentru butoanele radio.
<form method="post" action="mailto: ">
<p>Ce culoare de pantofi preferi ? </p> <p>
<input type="checkbox" name="pantofi" value="negru">Negru simplu <br/>
<input type="checkbox" name="pantofi" value="alb">Alb simplu <br/>
<input type="checkbox" name="pantofi" value="gri">Nuante de gri <br/>
<input type="checkbox" name="pantofi" value="alb negru ">Alb cu negru <br/>
<input type="submit" value="Email Myself"></p> </form>
Vizualizare
Ce culoare de pantofi preferi ?
Negru simplu
Alb simplu
Nuante de gri
Alb cu negru
________________________________________
HTML - Alte tipuri de formulare de liste
Un alt model de formular tip lista este urmatorul, in care userul selecteaza o anumita linie care va fi trimisa ca si optiunea aleasa.
<form method="post" action="mailto: ">
Preferinte muzicale
<select multiple name="music" size="4">
<option value="emo" selected>Emo</option>
<option value="metal/rock" >Metal/Rock</option>
<option value="hiphop" >Hip Hop</option>
<option value="ska" >Ska</option>
<option value="jazz" >Jazz</option>
<option value="country" >Country</option>
<option value="classical" >Classical</option>
<option value="alternative" >Alternative</option>
<option value="oldies" >Oldies</option>
<option value="techno" >Techno</option>
</select>
<input type="submit" value="Email Yourself"> </form>
Vizualizare
Preferinte muzicale
Un alt model de formular este meniul "dropdown". Acesta va fi afisat ca si un camp, care va afisa o lista atunci cand este executat un clik asupra lui.
<form method="post" action="mailto: ">
Nivel de studii?
<select name="studii">
<option>Alege</option>
<option>Scoala Generala </option>
<option>Liceu</option>
<option>Postliceala</option>
<option>Facultate</option>
<option>Doctorat</option>
<input type="submit" value="Email Yourself">
</select>
</form>
Vizualizare
Nivel de studii?
________________________________________
HTML - formular de upload
Mai intai de toate trebuie mentionat ca acest formular este doar interfata, partea vizibila cu care un user va putea interactiona.. Pentru a face un formular complet de upload sunt necesare cunostinte de PHP si PERL iar javascriptul este si el binevenit.
Un formular de upload este compus din mai multe parti. Vom incepe prin a stabili marimea fisierului pe care il vom uploada. Acest lucru se face cu ajutorul unui cam ascuns. In continuare vom crea campul propriu-zis in care userul va putea scrie adresa fisierului sau pur si simplu sa sa dea browse pentru a deschide o fereastra windows explore.
<input type="hidden" name="MAX_FILE_SIZE" value="100" /> <input name="file" type="file" />
Vizualizare
________________________________________
HTML - Zone de text, Comentarii
In general zonele de text sunt foosite pentru a trimite comentarii. Blogurile si forumurile sunt principalele tipuri de pagini web care folosesc aceste optinui. Totusi exista multe alte tipuri de situri care folosesc zonele de text pentru a afla parerea userilor despre un anumit aspect.
Pentru a crea o zona de text vom specifica mai intaii atributele rows si cols in interiorul tag-ului <textarea>. "Rows" va stabilii innaltime campului in linii de caractere iar "cols" lungimea unei linii in caractere. In exemplul urmator exista 5 linii a cate 20 de caractere. De asemenea strebuie specificat unul dintre atributele tagului wrap, acestea sunt:
wrap=
1. "off"
2. "virtual"
3. "physical"
Vom insista mai mult pe explicarea acestor valori in tutorialul destinat campurilor de text
<form method="post" action="mailto: "> <textarea rows="5" cols="20" wrap="physical" name="comments">
Scrie un comentariu
</textarea> <input type="submit" value="Email Yourself"> </form>
Vizualizare
Deasemenea trebuie specificat ca ceea ce vei scrie intre tagul de deschidere si cel de inchidere va apare in interiorul zonei de text. In acest caz a fost folosita o invitatie predefinita: "Scrie un comentariu"
HTML - Tabele
Tabelele pot aparea dificile la inceput, dar cu putina rabdare si practica vei vedea ca nu sunt asa cum par. Tagul <table> este folosit pentru a deschide un tabel. Inauntrul acestui tag vom gasi alte doua taguri tipice <tr> (liniile tabelului) si <td> (coloanele tabelului). Dar cea mai buna explicatie ar fi in momentul de fata un exemplu:
<table border="1">
<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr> <tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
</table>
Vizualizare
Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2
Continutul va fi plasat in interiorul casutelor tabelului. O casuta este ceea ce se afla intre <td> si </td>. Atributul border stabileste latimea marginii tabelului.
________________________________________
HTML - Tabele asimetrice
Pentru a forma tabele asimetrice vom folosi "rowspan" pentru a traversa mai mute linii si "colspan" pentru a traversa mai multe coloane. Deasemenea daca vrem ca prima linie sa serveasca de titluri pentru toate coloanele vom folosi tagul <th>. Acestea vor fi scrise cu litere ingrosate dupa cum vom vedea in exemplu urmator:
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
Vizualizare
Column 1 Column 2 Column 3
Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3
Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1
________________________________________
HTML - Spatierea celulelor
Cu ajutorul atributelor "cellpadding" si "cellspacing" vom defini distanta dintre celule. "cellspacing" stabileste marimea marginii, iar "cellpandding" stabileste distanta dintre margine si continut. In exemplu urmator a fost adaugata deasemenea putina culoare.
<table border="1" cellspacing="10"
bgcolor="rgb(0,255,0)">
<tr>
<th>Column 1</th> <th>Column 2</th>
</tr>
<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr> <tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
</table>
VIzualizare
Vizualizeaza acest exemplu intr-o fereastra noua.
Pentru a face mai bine diferenta vom elimina marginea din exemplu anterior.
<table border="1" cellpadding="10"
bgcolor="rgb(0,255,0)">
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr> <tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
</table>
Vizualizare
Vizualizeaza acest exemplu intr-o fereastra noua.
Distanta intre celule si dimensiunea margini va fi inerpretata de browser in pixeli. Conform acestei "legi" o valoare de 10 sunt de fapt 10 pixeli. Acest atribut nu este singurul care foloseste ca unitate de masura, pixeli, dar vom invata despre celelalte pe masura ce vom innainta in urmatoarele tutoriale.
HTML - Bgcolor
Atributul "bgcolor" este folosit pentru a stabilii fondul de culoare al unui paragraf, tabel sau alte componente ale HTML. Este recomandata folosirea cu moderatie a acestui tag. Se recomanda in schimb stabilirea culorilor de fond si a stilurilor de text normal sau de linkuri, cu ajutorul CSS.
<"numetag" bgcolor="valoare">
Aceasta este un model de cum se va folosi atributul bgcolor in interiorul unui tag.
<body bgcolor="Silver">
<p>Am stabilit culoarea ...</p>
</body>
Vizualizare
Vizualizeaza acest exemplu intr-o fereastra noua.
________________________________________
HTML - Adauga culoare tabelelor
Acest exemplu arata cum sa colorezi un tabel de diverse culori, folosint atributul "bgcolor".
<table>
<tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr>
<tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr>
<tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr>
<tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr>
<tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr>
<tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr>
</table>
Vizualizare
Vizualizeaza acest exemplu intr-o fereastra noua.
________________________________________
HTML - Font si background impreuna
Mai intai de toate vom pune in practica un exemplu de o tabla de scoruri facand un joc de culori pentru a evidentia anumite aspecte.
<table bgcolor="#000000">
<tr><td bgcolor="#009900">
<font color="#FFFF00" align="right">Steaua</font></td>
<td><font color="#FFFFFF">27</font></td></tr>
<tr><td bgcolor="#0000FF">
<font color="#DDDDDD" align="right">Dinamo</font></td>
<td><font color="#FFFFFF">20</font></td></tr>
</table>
Vizualizare
Vizualizeaza acest exemplu intr-o fereastra noua.
Exemplu de paragraf colorat pe fond gri
<table bgcolor="#777777">
<tr><td>
<p><font face="Monotype Corsiva, Verdana" size="4" color="#00FF00"> This paragraph tag has... </font></p>
</td></tr>
</table>
+++++++++++++++++++++ SURSA:FILELIST +++++++++++++++++++++
_______________________________________
Pot patrunde in orice sistem informatic si pot fura orice date. Pot sa ma uit in computerul tau si nici macar n-o sa stii ca am fost acolo
|
|
