[HTML] CAPITOLUL I - INTRODUCEREA IN lumea HTML-ului Parta I

Deidara

Lumea codingului

CAPITOLUL I - INTRODUCEREA IN MULțIMEA HTML-ULUI Parta I

Pentru inceput Lumea codingului ca vi un fel de carte nu-i pot spune carte despre tutoriale de web-development si poate si stil ma mai gandesc.

voi posta întâia parte care vor vi o serie de tutoriale html si cu momentul voi trece la css, php, javascript, ajax si xml (cam acestea sunt limbajele stapanite de mine si despre care va voi invata.)

=======================================================================================

Sa trecem la Treaba...

Html vine de la HyperText Markup Language (HTML) si este un limbaj de marcare NU PROGRAMARE!!!!
html este CLIENT SIDE NU SERVER SIDE asta inseamna ca nu avem necesitate de un web-server pe pc-ul nostru
pentru a coda in html si/sau sa incercam codul.

Totusi pentru a rula html pe calculatorul nostru avem nevoie de un browser
(va recomand Mozilla Fiefox si Google Chrome)

Download Mozilla Fiefox de aici
Download Google Chrome de aici

Pentru inceput o sa va invat sa faceti un mic fiser html.

Sa incepem.

1. Mergem La start, selectam control panel si in control panel cautam folder options, deschidem folder options
mergem la view iar in lista de la view mergem in jos so cautam Hide extensions for known file types
debifam casuta (asta daca e bifata), daca e debifata lasati-o asa bun dam apllay si ok.

Cale: start->control panel-> folder options->view->Hide extensions for known file types.

2. Dupa ce-am facut pasul acesta facem un nou director in pc: de favorit undeva la-ndemana sa zicem in D:\,
facem directorul si il numim Lectii html in acest director vom face un nou fiser notepad pe care il redenumim
primul_meu_fiser.html. Acum il deschidem cu notepad. Eu folosesc Notepad++ de cand m-am apucat de coding adica de multi ani ..si vi-l recomand si voua
foloseste putine resurse si arata codul in diverse culori in functie de taguri si asta e un lucru bun ca va sar in ochi
anumite randuri de cod.

Download Notepad++ de aici
Sa revenim deci deschidem fiserul si scriem in el

Cod:

<html>
<head>
<title>Primul meu Fiser HTML</title>
</head>
<body>
Acesta este Primul meu fiser HTML!
</body>
</html>

salvam si descidem fierul cu un browser vom observa ca ne-a aparut un text mai întocmai

Acesta este Primul meu fiser HTML!

Acuma va voi explica cateva taguri html cele mai utilizate taguri

3. Taguri HTML

3.1 Paragraful

Paragrafele sunt definite cu tag-ul <p>

Cod:

<p>Acesta este un paragraf</p>
<p>Acesta este un alt paragraf</p>

3.2 Rubricile

Rubricile sunt definite cu tag-uri de la <h1> la <h6>. <h1> defineste cea mai mare rubrica. <h6> defineste cea mai mica rubrica.

Cod:

<h1>Aceasta este o rubrica</h1>
<h2>Aceasta este o rubrica</h2>
<h3>Aceasta este o rubrica</h3>
<h4>Aceasta este o rubrica</h4>
<h5>Aceasta este o rubrica</h5>
<h6>Aceasta este o rubrica</h6>

NOTA: CAND DESCHIDETI UN TAG NU UITATI SA-L INCHIDETI, un tag se inchide cu / ex <html></html>
majoritatea browserurile accepta sa nu inchzi codul dar pe vitor cand te uiti peste el si sa-l intelegi mai bine e recomandat sa nu iti sa inchizi vreun tag.

3.3 Linia de pauza

Linia de pauza <br> poate fi este utilizata cand doriti sa incepeti un nou rand fara sa incepeti un nou alineat.

Cod:
<p> <br> Aceasta este un para <br> graf cu linie de pauza </ p>

3.4 Linia Orizontala

Linia orizontala este definita prin tagul <hr> si poate fi utilizata oricand doriti intr-un paragraf intr-un div etc.

Cod:
<p> Acesta este o line orizontala <hr> Si un text <b>bold</b></p>

3.4 Div-urile

Div tag-ul defineste o divizare sau o sectiune dintr-un document. Div-ul poate fi folosit intre mai numeroase taguri poti introduce un div intr-un div, paragraf, tabel etc.

partea ce-a mai frumoasa la divuri este ca pot fi manipulate cu usurinta cu susținerea la css (cascading style sheets) poti sa-l aliniezi oriunde in pagina
poti sa-l faci de ce dimeniune vrei sa suprapui 2 divuri, Eu personal la creerea unui nou site folosesc numa divuri tocmai din aceste motive.
multi programatori folosesc divurile va pot spune ca un site facut de un programator cu experienta si profesionist este facut in totalitate numa din divuri.

Cod:
<div>Acesta este un text intr-un div</div>

Cod:
<div align="left">Acesta este un text intr-un div aliniat in componentă stanga</div>
- la acest div ve-ti vedea ca cu ajutorul lui align am asezat divul in bucată stanga a paginii.
Cod:
<div align="center">Acesta este un text intr-un div aliniat in centru</div>
- iar acesta este in centru paginii.
Cod:
<div align="right">Acesta este un text intr-un div aliniat in porțiunea dreapta</div>
- acest div este aliniat in partea dreapta a paginii.

Cam atata cu cele mai folosite taguri html, haideti sa incercam ce-am parcurs pina acuma intr-o singura pagina html.

vom incepe prin a deschide pagina cu un editor de texte si scriem asa:

Cod:

<html>
<head>
<title>Pagina HTML cu cele mai folostie taguri</title>
</head>
<body>
<p>Acesta este un paragraf.</p>
<hr>
<p>Acesta este ce-l de-al 2-lea paragraf. Despartit de întâiul paragaraf cu ajutorul unei linii orizontale.</p>
<h1> TITLU 1</h1>

<p>Vom observa un text scris mare si ingrosat. in continuare vom folosi celalate taguri H adica de la 2 la 6<p>

<h2>Aceasta este o rubrica scrisa cu h2</h2>
<h3>Aceasta este o rubrica scrisa cu h3</h3>
<h4>Aceasta este o rubrica scrisa cu h4</h4>
<h5>Aceasta este o rubrica scrisa cu h5</h5>
<h6>Aceasta este o rubrica scrisa cu h6</h6>
<div align="ceter">Acesta este un div <br> care este despartit cu ajutorul tagului BR si este situat pe mijlocul paginii noastre</div>
<div align="left">Div aliniat in fracțiune stanga a paginii.</div>
<div align="right">Div aliniat in partea dreapta a paginii.</div>
</body>
</html>

Cam astea sunt cele mai folosite taguri html in continuare va voi arata cum sa introduceti o poză intr-o pagina cum sa faceti un link cum
sa faceti o lista cu obiecte si o lista cu toate tagurile de formatare a textului in html in partea a doua a tutorialului care cred ca o voi posta maie.

Copyright © Posobescu Razvan- 2008. Toate drepturile rezervate.

Citat:

Din respect petru munca si efortul depus daca vreti acest tutorial va rog sa ma anuntati personal.
_________________
[url=http://iilegal.myforum.ro/regulament-forum-vt2.html]Citeste[/url] Regulamentul General
[url=http://iilegal.myforum.ro/license-vt448.html]Citeste[/url] licenta
NU ma cautati pe mail pentru ca nu va voi ajuta, va ajut doar aici pe forum.