[Html]Cum sa faci o pagina html partea 1

by **MeG@DaN** Wed Nov 02, 2011 12:31 pm

In limbajul de programare web orice document incepe cu tipul fisiserului. In cazul acesta tagul <html> care ne indica inceputul documentului si tagul <html /> care indica sfarsitul documentului. Intre aceste 2 taguri se mai pot pune si alte taguri cum ar fi <head>; <title>; <meta>; <body>. O forma de baza a unui fisier html ar fi sub forma:

Code:: <html> <head> <title> <title /> <head /> <body> <body /> <html />

Un fisier html se imparte in 2 parti principate: 1 sectiunea head unde se introduc taguri de genu <title> <meta> <script> <link>(spre style.css sau fav.ico) si 2 sectiunea body unde se introduce continutul ce va fi afisat in browser. taguri folosite des: <img> <div> <ul> <li> <table> <h1> <h2>.....<h6> <a href> etc.

Pentru inceput vom face o pagina in care sa scrie "aceasta este prima mea pagina html"
. Inainte de a creea fisierul verifica daca este bifata optiunea sa
arate extensia fisierelor. Daca da Sari peste pasul asta.
Intra in My Compute selecteaza din bara de sus tools Folder options

selecteaza al 2-lea tab View si sa fie debifata optiunea Hide extensions for knownd file types si da ok. Acuma creeaza un fisiert text unde vrei prin click dreapta new si seleteaza text document .

Ti-a aparut un fisier New Text Document.txt . In loc de acestea redenumeste-l in index.html si editeaza-l cu un editor de text (poti folosi si notepad dar nu se vad calumea tag-urile eu recomand notepad ++) si scrie in el urmatoarele:

Code:: <html> <head> <title>Prima mea pagina</title> </head> <body> Aceasta este prima mea pagina html </body> </html>

Salveaza si da dublu click pe pagina. Vei observa ca am introdus tag-ul
<title> care a dat un nume paginii. Acuma sa incercam sa facem un
text normal, unul boldit(ingrosat), italic si unul boldit si italic. in
loc de ceea ce am scris in partea de body a fisierului html vom scrie:

Code:: <html> <head> <title>Prima mea pagina</title> </head> <body> Aceasta este prima mea pagina html Text boldit text italic text italic si ingrosat </body> </html>

Am folosit tagul pentru a incepe un rand nou,  pentru a scrie ingrosat,  pentru italic si 
pentru italic si ingrosat. Salveaza pagina si deschide fisierul in
browser. Acuma paote te intrebi de ce am numit fisierul html index.html , raspunsul e simplu: pentru ca daca pui acest fisier pe un domeniu [You must be registered and logged in to see this link.] acest fisier va fi "pagina principala"
. Sa zicem ca vrei sa pui o imagine si dedesupt sa pui un text sau o descriere vei scrie:

Code:: <html> <head> <title>Prima mea pagina</title> </head> <body> <img src="imagine.jpg"> Descriere pentru imagine </body> </html>

Cand specifici calea catre imagine ar fi de preferat ca imaginea sa fie
in acelasi loc cu fisierul. Daca imaginea este intr-un fisier imagini atunci codul pentru acesta ar fi
<img src="imagini/imagine.jpg">. Atentie daca folosesti program sa nu fie de forma <img src="file:///C|/Documents and Settings/Vlad/My Documents/imagine.jpg"> deoarece daca il pui pe un server aceasta imagine nu va fi aratata deoarece nu va stii de unde sa ia imaginea.

Daca spre exemplu vreau ca imaginea mea sa aiba o descriere codul va arata astfel:

Code:: <html> <head> <title>Prima mea pagina</title> </head> <body> <img src="imagine.jpg" alt="descriere pentru imagine"> Descriere pentru imagine <img src="imagine.jpg"> </body> </html>

Si ca rezultat cand vizualizezi pagina si pui cursorul peste imagine va
aparea un tooltip (descrierea care am introdus-o mai sus).

Acuma sa zicem ca vrei sa ai pagina principala index.html si o pagina contact.html (creeaza un fisier text si redenumeste-l contact.html)cu legaturi (linkuri/hyperlink) intre ele, codul va arata astfel:

Code:: <html> <head> <title>Prima mea pagina</title> </head> <body> <a href="index.html">Pagina principala</a> | <a href="contact.html">Pagina de contact </a> <img src="imagine.jpg" alt="descriere pentru imagine"> Descriere pentru imagine </body> </html>

Aici e valabil ca sila poze, daca pagina contact.html este in alt fisier (fisier/contact.html) atunci in loc de
<a href="contact.html">Pagina de contact </a>

vom avea <a href="fisier/contact.html">Pagina de contact </a>
. Acum ai fisierul index.html si contact.html cu legaturi
intre ele. De precizat este ca pe pagina d contact continutul poate fi
diferit. de exemplu avem pagina index.html cu o imagine si o descriere

Code:: <html> <head> <title>Prima mea pagina</title> </head> <body> <a href="index.html">Pagina principala</a> | <a href="contact.html">Pagina de contact </a> <img src="imagine.jpg" alt="descriere pentru imagine"> Descriere pentru imagine </body> </html> [code] Si pagina [b]contact.html[/b] cu date despre contact [/code] <html> <head> <title>Prima mea pagina</title> </head> <body> <a href="index.html">Pagina principala</a> | <a href="contact.html">Pagina de contact </a> Nume: Poescu Prenume: Alexandur Mail: [You must be registered and logged in to see this link.] </body> </html>

In tutorialele urmatoare voi vorbi despre cum sa iti faci un site intreg
cu mai multe pagini cu legaturi intre ele si in final sa faci un site
de la a la z [Html]Cum sa faci o pagina html partea 1 3

[Html]Cum sa faci o pagina html partea 1 3