peperonity.net
Welcome, guest. You are not logged in.
Log in or join for free!
 
Stay logged in
Forgot login details?

Login
Stay logged in

For free!
Get started!

Text page


pro street logo
razor07.peperonity.net

|~[Tutorial HTML]~|

Acest tutorial te va invata cum sa iti scrii propriile pagini web in limbaj HTML. Nu ai nevoie de vreun editor special pentru a folosi acest ghid, orice editor de text este perfect atata timp cat stii sa il folosesti. Invatand HTML vei avea mai mult control asupra aspectului paginei tale web, si vei descoperi cu usurinta cai pentru a imbunatati chiar mai mult aspectul paginei web. HTML este un limbaj independent de platforma pe care ruleaza adica nu se schimba de la un calculator la altul sau de la un program la altul. Cele mai intalnite editoare HTML sunt Notepad pentru Windows si Pico pentru Linux. Pentru salvare in format HTML selectati in editor "all format" si la numele documentului adaugati terminatia ".html", aceasta in cazul in care editorul nu are optiune de a selecta direct extensia HTML. Pentru ca pagina ta web sa poata fi vazuta in WWW trebuie pusa pe un server, pentru inceput daca nu aveti deja un server setat acasa sau un host, cautati host gratis care pot oferi indeajuns de Dupa ce v-ati gasit un host pentru a va plasa site-ul sau pagina web, trebuie sa incepeti crearea paginilor. Cand lucrezi cu HTML este foarte indicat de a avea 2 copii a documentului. O copie trebuie sa fie pe spatiul alocat de host iar a doua pe hard-ul dumneavoastra, astfel problemele cu caderile de curent, pierderea conexiunii la internet neafectand munca dumneavoastra. Recomand crearea unui director pe hard disk pentru a pune in el documentele HTML, imaginile , sunetele care doriti sa apra pe site. mult Pagina principala trebuie denumita "index.html", majoritatea serverelor fiind setate sa recunoasca pagina principala dupa aceasta denumire. In cazul in care "index.html" nu functioneaza ca pagina principala, contactati persoana care administreaza server-ul si intrebati-l ce denumire are server-ul setata pentru a recunoaste pagina principalaspatiu pentru Pagina pe care o vizionezi acum este un document HTML, vezi link-ul "html2.html" unde "html2" este denumirea pe care i-am dat-o acestei pagini web iar".html" este extensia documentului.
Intr-un document HTML poti avea caractere bold, italice, mici si mari.

Pentru a crea propozitia de mai sus, codul HTML va arata asa:

Intr-un document HTML poti avea caractere <b>bold</b> , <i>italice</i>, <font size=-2>mici</font> si <font size=+2>mari</font>

Bine, bine...dar ce inseamna aceste "<" si ">" ? Cand scrii un anumit lucru intre aceste doua semne, creezi un lucru cunoscut sub numele de tag. De exemplu, tagul <b> da comanda de a incepe scriere cu caractere bold, si tagul </b> da comanda de a opri scrierea cu caractere bold. Tagul cu semnul slash(/) este cunoscut ca tag de inchidere. Cele mai multe taguri necesita si un tag de inchidere, dar nu toate. Tagurile formeaza intreaga structura a unui document HTML.


<b>Acest text are caractere bold.</b> ,
<b> este tag de deschidere iar </b> este tag de inchidere.

Sa incercam un mic exercitiu:

#1:Eu <b>invat</b> html. = Eu invat html.
#2:Eu <b>invat<b> html. = Eu invat html.
in a doua propozitie este o greseala, care este? Cu siguranta ai observat lipsa (/) din al doilea tag al propozitiei 2, astfel browser-ul neavand comanda de a inchide textul scris bold.
inceput. Documentele HTML sunt fisiere ce contin texte, si care primesc extensia .htm, .html, .shtml. Documentele HTML au doua parti, "head"-ul si "body"-ul. "Body" este partea mai mare a documentului in care se va gasi continutul paginii."Head"-ul unui document contine titlul acelui document si o scurta descriere.

Structura unui document HTML, exemplu:

<html>
<head><title>Titlul aici</title></head>
<body>Continut pagina aici</body>
</html>

Pentru a intelege mai bine si usura munca, poti lasa spatii intre liniile documentului.

Nota: Spatiile libere vor fi ignorate de catre browser in momentul interpretarii.

Tot ceea ce se gaseste intre tagurile title va fi titlul documentului, acesta va aprea in momentul vizionarii documentului in susul paginii in bara pentru titlu (in stanga butoanelor de minimalizare/maximalizare/inchidere ale paginii).
Heading-urile sunt unele dintre cele mai importante taguri din continutul(body) al unui document HTML. Tagul de deschidere pentru heading este <hn> si cel de inchidere fiind </hn> unde "n" reprezinta marimea heading-ului; acesta variand de la 1 la 6 (1 fiind cel mai mare iar 6 cel mai mic).

Exemple:


Coyotul pregateste capcane. {Heading 1}
sursa: <h1> Coyotul pregateste capcane. {Heading 1}</h1>


Coyotul pregateste capcane. {Heading 2}
sursa: <h2> Coyotul pregateste capcane. {Heading 2}</h2>


Coyotul pregateste capcane. {Heading 3}
sursa: <h3> Coyotul pregateste capcane. {Heading 3}</h3>


Coyotul pregateste capcane. {Heading 4}
sursa: <h4> Coyotul pregateste capcane. {Heading 4}</h4>


Coyotul pregateste capcane. {Heading 5}
sursa: <h5> Coyotul pregateste capcane. {Heading 5}</h5>


Coyotul pregateste capcane. {Heading 6}
sursa: <h6> Coyotul pregateste capcane. {Heading 6}</h6>Liniile orizontale sunt folosite pentru a separa diferite arii intr-o pagina web. Tagul pentru linie orizontala este <hr>, aceasta comanda nu are tag de inchidere. I se pot adauga acetui tag diferite atribute, ca: width=n (pentru lungimea liniei) sau width=n% (pentru lungimea liniei raportate la toata lungimea ecranului), size=n (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.

Exemle:

--------------------------------------------------------------------------------

<hr width=50>

--------------------------------------------------------------------------------

<hr width=40%>

--------------------------------------------------------------------------------

<hr size=8>

--------------------------------------------------------------------------------

<hr noshade>

Nota:Se pot folosi mai multe atribute intr-un tag.

--------------------------------------------------------------------------------

<hr width=60% size=12 noshade>Paragrafele se folosesc destul de des in HTML, la fel ca in scriera unei povesti, carti, etc..Tagul de deschidere pentru paragraf este <p>, iar cel de inchidere este </p>. Tagul de inchidere pentru paragraf nu este intotdeauna necesar dar se recomanda folosirea lui.

Exemplu:(o perla de la BAC)

In "Sobieschi si romanii" autorul descrie cum o mina de plaiesi au rezistat asediului perfid al puternicei armate din Iasi. In final, plaiesii, se predau in mod eroic, lasind cetatea neamtului.


Sursa: <p> In "Sobieschi si romanii" autorul descrie cum o mina de plaiesi au rezistat asediului perfid al puternicei armate din Iasi. In final, plaiesii, se predau in mod eroic, lasind cetatea neamtului.</p>

O pagina web fara un format anume al textului va arata plictisitoare. De aceea se folosesc aceste taguri pentru text(bold, italice, subliniat).Cateva taguri cunoscute pentru formatul textului sunt <b> si </b> pentru bold, <i> si </i> pentru italice, <u> si </u> pentru subliniat. Pentru dimensiunea textului se folosesc tagurile <font size=n> si </font>.

Exemplu:
Ema este o fata foarte frumoasa.

Sursa:<b>Ema</b> <i>este</i> <u>o fata</u> <font size=+2>foarte frumoasa.</font>Multe taguri suporta atribute de aliniere in pagina; aliniere la stanga, in centru, la dreapta. Atributul align se ataseaza tagului de deschidere inaintea semnului >.

Exemple:

Aliniere stanga

<h2 align=left>Aliniere stanga</h2>


Aliniere centru

<h2 align=center>Aliniere centru</h2>


Aliniere dreapta

<h2 align=right>Aliniere dreapta</h2>

Tagul pentru sfarsit de rand este <br>. Acest tag nu are un altul pentru inchidere.

Exemplu fara tag de sfarsit de rand:
O cafea. Doua Cafele. Trei cafele.
Sursa:
O cafea.
Doua cafele.
Trei cafele.

Exemplu cu tag de sfarsit de rand:
O cafea.
Doua cafele.
Trei cafele.
Sursa:
O cafea.<br>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 href="locatie"> 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:
Viziteaza Autosite!
Sursa:
Viziteaza <a href="http://www.autosite.ro/">Autosite</a>!

Daca link-ul este catre o pagina care se afla in acelasi director cu pagina curenta, nu mai ai nevoie sa introduci url-ul, doar numele paginii. Spre exemplu, daca ai o pagina care se numeste publicitate.html, poti folosi codul <a href="publicitate.html">Publicitate</a>

De retinut:link-urile sunt folosite pentru a naviga de la o pagina la alta, dar pot fi folosite si pentru trimiterea mail-urilor.
Exemplu:
Trimite un email la WebMaster!
Sursa:
Trimite un email la <a href="mailto:emgos_@hotmail.com">WebMaster</a>!

Tagului de deschidere i se pot atasa atributul target="_blank" pentru ca link-ul sa se deschida intr-o noua pagina.
Exemplu:
Trimite un email la WebMaster!
Sursa:
Trimite un email la <a href="mailto:emgos_@hotmail.com" target="_blank">WebMaster</a>!
Poti adauga paginii tale de web imagini, atata timp cat acestea sunt in format .gif, .jpg, .jpeg. Nu se poate folosi formatul .bmp! Tagul pentru a adauga o imagine este <img src="locatie">. Este recomandat adaugarea atributelor height si width, acestea permitand imaginii sa aiba diferite dimensiuni. Este de asemenea recomandat folosirea atributului alt="descrierea imaginii", acesta in momentul suprapunerii cursorului mouse-ului cu imaginea indica descrierea imaginii. Tagul pentru adaugare imagine nu are si un tag de inchidere!Sursa:
<img src="masina.jpg" width=200 ...


This page:




Help/FAQ | Terms | Imprint
Home People Pictures Videos Sites Blogs Chat
Top
.