home > cursuri > curs-html-incepatori-parte-2.php

Curs HTML ! Ghid HTML pentru incepatori

19 Martie 2011 de Mihail Alin

in aceasta secunda parte o sa invatam cum sa formatam textul pe pagina si cum sa adaugam o culoare de background.

male autor
Autor :   Mihail Alin
Important!! : Textul si imaginile continute in acest curs sunt propietatea Rotuts.com si nu pot fi copiate/refolosite pe alte pagini/e-books fara acordul nostru.

Deja stim structura unei pagini web, acum haideti sa incepem sa formatam un pic pagina si textul, codul de mai jos, este, codul html din prima parte a acestui curs html :

<html>
<head>
	<title>Invata HTML cu ajutorul acestui ghid</title>
</head>
<body>
  Acum invat Cod HTML
</body>
</html>

Adaugam o culoare de fundal pe pagina.

<html>
<head>
	<title>Invata HTML cu ajutorul acestui ghid</title>
</head>
<body bgcolor="#33FFCC">
  Acum invat Cod HTML
</body>
</html>

Probabil deja v-ati dat seama ca etichetei <body> i-am adaugat propietatea bgcolor="#33FFCC".Bgcolor este prescurtarea de la background color iar #33FFCC este codul hexadecimal pentru culoarea albastru deschis.De asemenea HTML suporta denumirea culorilor in engleza, nu pentru toate , dar pentru destul de multe, cum ar fi : red, blue, green etc. .
Trebuie mentionat ca, in ziua de azi prezentarea paginilor nu se mai formateaza cu HTML ci cu CSS , dar aceste exemple sunt pentru a putea invata html, chiar daca nu le mai folosim, tot trebuie sa le stim.



HTML nu tine cont de spatii, deci in cazul in care vrem sa facem un salt de linie, daca in NotePad apasam tasta Enter pentru a face acest salt, atunci cand rulam pagina in navigator , acest salt nu o sa fie vizibil.Pentru a face un salt de linie in HTML folosim eticheta &br/>.
NOTA: aceasta eticheta nu are eticheta de inchidere ci se inchide din prima , deci corect este <br/> nu <br> </br>..

<html>
<head>
	<title>Invata HTML cu ajutorul acestui ghid</title>
</head>
<body bgcolor="#33FFCC">
  Acum invat Cod HTML <br/>
  Acum am sarit o linie.
</body>
</html>

Ok haideti sa trecem la formatarea textului pe pagina, pentru formatarea textului avem la dispozitie destule etichete , dar cele mai importante ar fi : paragraf <p>, ingrosat <b>, heading <h1> , <h2> , <h3> , etc. , lista neordonata <ul>, lista ordonata <ol>, continutul listei/ list items <li>.

<html>
<head>
	<title>Invata HTML cu ajutorul acestui ghid</title>
</head>
<body bgcolor="#33FFCC">
Acum invat Cod HTML <br/>
Acum am sarit o linie.

<p>Acesta este un paragraf</p>
<b>Acest text este ingrosat</b><br/>
<h1>Acest text este un header</h1>
<h2>Si acest text este un header , dar mai mic</h1>

<ul>Lista neordonata
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>In ziua de azi, listele sunt folosite in special pentru a face meniuri sau bare de navigare</li>
</ul>

<ol>Lista ordonata
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ol>
</body>
</html>

Probabil v-ati dat seama ca dupa paragraf <p> si header <h1>,<h2> nu am adaugat eticheta <br/> pentru a face saltul de linie si va intrebati de ce? Pentru ca paragraful si headerul ocupa toata latimea paginii, orice element trece automat sub respectivele.
Paragraful este probabil cea mai folosita eticheta HTML deoarece textul trebuie sa fie intr-o astfel de eticheta pentru ordine si formatare pe pagina.


Listele din exemplul de mai sus s-ar vedea asa :
- Lista ordonata :

    Lista ordonata
  1. Tutoriale HTML
  2. Invata HTML
  3. Ghid HTML

- Lista neordonata :

    Lista neordonata
  • Item 1
  • Item 2
  • Item 3
  • In ziua de azi, listele sunt folosite in special pentru a face meniuri sau bare de navigare


Mai sunt si alte etichete pentru formatarea textului , dar nu sunt chiar asa de folosite :
- italic text : <i> </i>

<i>Text italic :D </i>

Textul de mai sus s-ar vedea asa : Text italic :D

- text subliniat : <u> </u>

<u>Text subliniat :D </u>

Textul de mai sus s-ar vedea asa : Text subliniat :D

- text la masina : <tt> </tt>

<tt>Text batut la masina :D </tt>

Textul de mai sus s-ar vedea asa : Text batut la masina :D


Atributuri

Pentru a centra textul putem folosi eticheta <center> dar o metoda mai propice ar fi adaugarea unui atribut la eticheta :

<nume eticheta atribut="valoare">Textul care este afectat</eticheta>

Exemplu :

<p align="right">Text aliniat la dreapta</p>

Asa s-ar vedea acum textul :

Text aliniat la dreapta

<p> este eticheta , align este atributul iar right este valoarea data atributului.
Putem schimba right cu "left" sau "center" , dar "left" nu este nevoie deoarece textul se aliniaza la stanga automat.Incet incet incepem sa invatam HTML :).



In urmatoarea parte din seria Ghid HTML pentru incepatori vorbim despre cum putem centra textul, marquee, comentarii si marimea fonturilor.Apasa pe urmatorul link pentru a te duce la urmatoarea parte Ghid HTML pentru incepatori partea a 3-a sau intoarce-te la prima parte Ghid HTML pentru incepatori prima parte.



Daca doriti puteti downloada pagina HTML rezultanta in urma acestei parti din ghidul HTML :


download rezultatul acestui curs ghid HTML


Da si tu un like
  


Daca ti-a fost folositor acest tutorial/articol, poti copia urmatorul cod pe pagina ta

Spune-le prietenilor tai despre acest tutorial/articol
Nume:
Email:
Email-ul prietenului tau:
Mesajul:

Comenturi

0 comenturi pana acum... (posteaza si tu)

Comentarii:

Nume:

Email:

Comentariu:


 

*Intrebare de verificare : Raspunde la intrebarea din imaginea de mai jos ...

 
HINT : Raspunsul este din 6 litere, incepe cu r si se termina cu s


 


Important:
E-mailul nu va fi vizibil si NU va fi folosit de catre rotuts.com .
Nu sunt permise linkuri catre alte pagini.
Va rugam , comentariile sa ramana strict relationate cu topicul.
Comentariile considerate ofensive sau care nu au nici o legatura cu topicul vor fi sterse(trolling).

Folosirea codului HTML nu este permisa.
Puteti folosi BBcode pentru a va formata textul.