cursuri cursuri cursuri cursuri cursuri cursuri
cursuri
cursuri
cursuri
Cursuri    Tutoriale    Teste    Jocuri
 
 
cursuri Am uitat utilizatorul cursuri Am uitat parola
cursuri online Cursuri online
Cursuri online gratuite
cursuri online Tutoriale
Cum sa faci orice
cursuri online Teste online
Testeaza-ti cunostintele
cursuri online Revista
Aboneaza-te gratuit
cursuri online Jocuri
Jocuri educative
cursuri online Inregistreaza-te
Intra in comunitate
eCursuri » Cursuri online » Tehnologia informatiei » HTML pe intelesul tuturor » Lectia 4
Formatarea textului in HTML
88036 afisari
In aceasta lectie ne vom "juca" cu textele din cadrul paginilor web, vom vedea cum pot fi ele formatate.

Titluri in HTML

Atunci cand avem nevoie sa folosim un titlu in cadrul paginii noastre web putem apela la tag-urile <H1>, <H2>, <H3>, <H4>, <H5>, <H6>. Cu ajutorul acestor tag-uri, care au si tag-uri de incheiere, vom scrie titlurile din cadrul paginilor noastre web. Astfel in cadrul codului HTML vom folosi tag-ul <H1>, de exemplu, urmat de textul titlului, iar la sfarsit vom folosi tag-ul de incheiere </H1>. Tag-urile <H1> si </H1> permit scrierea unui titlu cu caracterele cele mai mari in timp ce textul incadrat de tag-urile <H6> si </H6> va fi afisat cu caracterele cele mai mici, dupa cum urmeaza:

Acesta este un titlu cu <H1>

Acesta este un titlu cu <H2>

Acesta este un titlu cu <H3>

Acesta este un titlu cu <H4>

Acesta este un titlu cu <H5>

Acesta este un titlu cu <H6>

Tag-urile acestea accepta atributul ALIGN cu ajutorul caruia titlul va putea fi aliniat la stanga, la centru sau la dreapta.

Etichete HTML pentru formatarea textului

Am vazut in sectiunea precedenta cum arata titlurile. In continuare vor fi prezentate diverse moduri de formatare a unui text.

Pentru alegerea caracteristicilor unui text, putem folosi tag-ul <FONT>. Acest tag accepta mai multe atribute (color, face, size) care ne vor ajuta in formatarea textelor. Atributul COLOR se refera la culoarea textului ce va fi incadrat de tag-urile <FONT> si </FONT>, atributul FACE arata tipul fontului, iar atributul SIZE arata marimea fontului.

Pentru a alege culoarea textului, trebuie sa consulti mai intai tabelul de culori, iar apoi, atunci cand te-ai hotarat ce culoare vei folosi, sa scrii codul sau numele acelei culori ca valoare a atributului COLOR.

De exemplu, liniile de cod:
<FONT COLOR="CornflowerBlue">ecursuri.ro - cursuri online gratuite</FONT>
sau
<FONT COLOR="#6495ED">ecursuri.ro - cursuri online gratuite</FONT>

vor avea urmatorul rezultat:
ecursuri.ro - cursuri online gratuite

<FONT COLOR="#FF0000">Totul la ecursuri.ro este gratuit</FONT>

va afisa in cadrul browserului de internet:
Totul la ecursuri.ro este gratuit

La tipul fontului, la fel ca si la culori, este bine sa folosesti un font care se afla pe majoritatea calculatoarelor, pentru ca daca folosesti un font mai putin utlizat, multi utilizatori nu vor putea vedea textele din cadrul paginilor tale cu acelasi font. Cele mai folosite fonturi pentru paginile web sunt urmatoarele:

Acest text a fost scris cu fontul "arial"
Acest text a fost scris cu fontul "times new roman"
Acest text a fost scris cu fontul "courier new"
Acest text a fost scris cu fontul "verdana"
Acest text a fost scris cu fontul "helvetica"

<FONT COLOR="#000000" FACE="Arial"<Acest text ...</FONT>

Pentru a schimba dimensiunea implicita a fontului, vom folosi una din valorile atributului size. Acesta poate lua una din valorile 1,2,3,4,5,6,7 (1 pentru cea mai mica dimensiune si 7 pentru cea mai mare):

<FONT COLOR="#FFA500" FACE="Arial" SIZE="7">www.ecursuri.ro</FONT>

www.ecursuri.ro

Iata si celelalte dimensiuni (de la 6 la 1):
www.ecursuri.ro
www.ecursuri.ro
www.ecursuri.ro
www.ecursuri.ro
www.ecursuri.ro
www.ecursuri.ro

Daca vrem ca textul nostru sa fie scris cu caractere ingrosate, folosim perechea de etichete <B> si </B>
<B>Text bold</B>
Text bold

Pentru ca textul sa fie scris cu caractere italice, folosim perechea de etichete <I> si </I>
<I>Text italic</I>
Text italic

Pentru ca textul sa fie subliniat, folosim perechea de etichete <U> si </U>
<U>Text subliniat</U>
Text subliniat

Daca vrem ca textul sa fie afisat in centrul paginii putem folosi perechea de etichete <CENTER> si </CENTER>
<CENTER>Text centrat</CENTER>
Text centrat


Atunci cand vrem ca textul din cadrul paginii noastre web sa fie afisat pe mai multe randuri vom folosi unul din tag-urile <BR> sau <P>. Tag-ul <BR> nu are tag de incheiere, in timp ce tag-ul <P> are tag de incheiere, insa nu este obligatoriu.

Tag-ul <BR> vine de la line break (intrerupere de linie) si l-am mai folosit in cadrul acestui curs. Asa cum am vazut si pana acum este folosit pentru a face trecerea de la o linie la alta.

Astfel sa presupunem ca avem urmatorul cod HTML:
<HTML>
<HEAD>
<TITLE>Eticheta <BR></TITLE>
</HEAD>
<BODY>
Invat limbajul HTML. Exersez limbajul HTML. Stiu limbajul HTML.
</BODY>
</HTML>

Acest cod va avea ca rezultat:

Invat limbajul HTML. Exersez limbajul HTML. Stiu limbajul HTML.

Acum sa folosim eticheta <BR> in cadrul codului:
<HTML>
<HEAD>
<TITLE>Eticheta <BR></TITLE>
</HEAD>
<BODY>
Invat limbajul HTML.<BR>Exersez limbajul HTML.<BR>Stiu limbajul HTML.
</BODY>
</HTML>

Iata diferenta:

Invat limbajul HTML.
Exersez limbajul HTML.
Stiu limbajul HTML.

Tag-ul <P> vine de la cuvantul paragraf si se deosebeste de tag-ul <BR> prin faptul ca prin utilizarea lui nu numai ca se trece pe urmatorul rand, dar se si lasa un rand liber intre texte. Sa revenim la exemplul de mai sus. Se vor folosi ambele tag-uri, <BR> si <P>, pentru a se vedea diferenta dinre ele.

Pentru a citi continuarea lectiei trebuie sa fii membru eCursuri.ro

Intra in contul tau sau inregistreaza-te GRATUIT (dreapta sus)
« Despre culori HTML Adaugarea imaginilor in paginile HTML »
61 comentarii
ssimona 23 iulie 2011, 19:21 1
de ce nu se poate vizualiza mai departe? de la pct 5....
  1    Raspunde
lucian.iordache 23 iulie 2011, 21:41 2
@ssimona: Nu au fost prelucrate inca toate lectiile pentru noua varianta a site-ului. Imediat ce vor fi corectate si prelucrate, vor fi publicate pe site.
  -7    Raspunde
alexionut6 06 august 2011, 19:24 3
Cand vor fi prelucrate celelalte lectii pentru noua varianta a site-ului???
  -3    Raspunde
admin 06 august 2011, 20:29 4
@alexionut6: saptamana viitoare vor fi publicate noi lectii din cadrul cursului
  -4    Raspunde
alexionut6 07 august 2011, 12:18 5
@admin: merci de raspuns...sa inteleg ca nu vor mai fi adaptate vechile lectii la noua varianta a siteului ci vor fi publicate altele noi??
  -4    Raspunde
admin 08 august 2011, 16:14 6
@alexionut6: Nu, vor fi prelucrate vechile lectii pentru versiunea noua a site-ului. Unde este cazul vor fi completate cu notiuni noi.
  2    Raspunde
BogdanTaz 19 octombrie 2011, 10:53 7
deci pana acum cursul e perfect..chiar inveti usor..un curs de JAVA nu aveti?:D
  -4    Raspunde
costeltg-jiu 08 noiembrie 2011, 19:54 8
foarte bun cursul. este explicat pe intelesul tuturor.
  -2    Raspunde
AndreeaS17 13 noiembrie 2011, 16:54 9
Super tare cursul, sincer, m-ati salvat! :)
O singura intrebare, cum pun alineat?
  -3    Raspunde
Rapunzell 08 iunie 2015, 14:45 10
@AndreeaS17: usor!doar pui cuvantul intre <u>si</u>
  0    Raspunde
Rapunzell 08 iunie 2015, 14:47 11
@AndreeaS17: doar dai space!Scuze pentru raspunsul gresit!!!!!!!!!
  0    Raspunde
Rapunzell 22 iunie 2015, 15:27 12
@AndreeaS17: a aliniat!Nu stiu!
  0    Raspunde
AndreeaS17 13 noiembrie 2011, 18:33 13
Am gasit :">
  -1    Raspunde
teneida 21 noiembrie 2011, 13:48 14
este foarte util cursul!!!!!!!!am o mica intrebare :se pot crea jocuri cu html?
  -1    Raspunde
Rapunzell 08 iunie 2015, 14:48 15
@teneida: nu cred,nu stiu.Intreabal pe Lucian!
  0    Raspunde
Xsky 12 decembrie 2011, 21:32 16
foarte tare ai putea baga si unu cu java? La scoala nam inteles nimik si aici chiar mi se pare destul de simplu.Mersi mult pentru eforturi
  -2    Raspunde
Lucian.Iordache 13 decembrie 2011, 23:38 17
@Xsky: Java nu stiu, dar retinem ideea si vedem ce se poate face ca in curand sa fie si un curs de Java pe eCursuri.ro
  -1    Raspunde
2na 07 ianuarie 2012, 18:36 18
Buna seara!
Se poate face ceva sa nu mai apara diferente intre literele normale si diacritice? Sunt ceva mai mari si mai ingrosate. Multumesc!
  -6    Raspunde
victorcroitor1 11 ianuarie 2012, 10:52 19
@2na: Pentru diacritice sunt necesare coduri speciale, le poti gasi aici http://www.ecursuri.ro/cursuri-online/formatarea-textului-in-html.html
  -4    Raspunde
2na 11 ianuarie 2012, 11:21 20
@victorcroitor1: Poate nu m-am exprimat corect. Cunosc codurile pt. diacritice si le folosesc. Problema este rezultatul in urma inserarii lor in text. La vizualizarea paginii, diacriticile se vad mai mari si mai ingrosate decat restul textului.
Ex: sȧ ne perfecţionȧm pe zi...
Multumesc pt. raspuns.
  0    Raspunde
Rapunzell 01 noiembrie 2015, 11:17 21
@victorcroitor1: Cum lai pus????????????????????????????????!!!!!!!!!!!!!!!!!!!!!
  0    Raspunde
vyo_cirstea 16 ianuarie 2012, 00:42 22
super acest curs
  -4    Raspunde
2na 17 ianuarie 2012, 01:04 23
Am rezolvat-o! Foloseam alte coduri. Aveam o lista cu ele, luate de pe net. Pt. "ȧ", in loc de ă, aveam ȧ si iesea tot un "ȧ" dar mai mare si bolduit.
  -4    Raspunde
2na 17 ianuarie 2012, 01:09 24
Scuze :))Eu am scris codurile literelor ..
Aveam codul 551 in loc de 259.
  -5    Raspunde
Dan03 25 ianuarie 2012, 11:32 25
Este foarte util acest curs si foarte bun,
mar interesa daca aveti in vedere,in viitorul apropiat si un curs,pentru un limbaj de programare pe intelesul tuturor,sau pentru incepatori C++, sau altele.
  -2    Raspunde
Alch0oL 11 martie 2012, 19:34 26
Daca ai invatat HTML , iti recomand CSS apoi PHP.
  -2    Raspunde
Rapunzell 22 iunie 2015, 15:29 27
@Alch0oL: ce sunt CSS si PHP
  0    Raspunde
Rapunzell 01 noiembrie 2015, 11:15 28
@Alch0oL: AAAAAAAAAAAAAAAAAAA! CSS te ajuta la facut frumos paginile iar PHP te ajuta sa faci jocuri!!!!!!!!!!1
  0    Raspunde
Ilie@@ 04 aprilie 2012, 21:01 29
Cum pot gasi codurile pentru celelate tipuri de caractere, infara de italic si .... ?
  0    Raspunde
Rapunzell 08 iunie 2015, 14:51 30
@Ilie@@: subliniat sau ingrosat.
  0    Raspunde
sagace 08 aprilie 2012, 16:28 31
atunci cand folosim <h1>text aici</h1>, nu se modifica marimea scrisului.
  -2    Raspunde
Rapunzell 01 noiembrie 2015, 11:16 32
@sagace: caca ce spui tu!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  0    Raspunde
brw 18 iunie 2012, 14:07 33
Nu am inteles foarte clar care este diferenta intre atribute si etichete. Daca poate sa-mi raspunda cineva...cu exemple, va rog, multumesc
  3    Raspunde
KeanuReeves 25 iunie 2012, 12:20 34
Scrie aici comentariul tau
  0    Raspunde
KeanuReeves 25 iunie 2012, 12:22 35
Foarte util cursul.M-aş bucura şi mai mult dacă aţi face un curs de iniţiere pentru începători în C++ la fel de bine explicat ca şi acesta.
  1    Raspunde
denis_sergiu2000 25 august 2012, 16:00 36
Foarte buna treaba faceti voi aici..Si un curs de .CSS ar fi de vis.
  1    Raspunde
iasama 13 decembrie 2012, 09:27 37
Este chiar foarte util acest site e chiar foarte tare.
  1    Raspunde
eugenia.isac 25 decembrie 2012, 15:08 38
Merci pt ajutor! (Y)
  1    Raspunde
lao 03 februarie 2013, 19:59 39
felicitari ai avut o super ideie
  2    Raspunde
alex.florin.96 12 februarie 2013, 13:32 40
multam pt ajutor e chiar foarte explicit si simplu in acelasi timp ma ajutat mult
  1    Raspunde
irinutza67 26 februarie 2013, 13:01 41
Felicitari!
Un curs usor digerabil de catre toate categoriile de varsta.
  1    Raspunde
xclaudiu 11 martie 2013, 23:00 42
Hei? pot cum pot muta textul? vreau sa-l pozitionez si nu pot. Am asa:

<FONT COLOR="fdfbf2" FACE="Mongolian Baiti" SIZE="3">Acasa</FONT>
  1    Raspunde
lucibarbone 06 aprilie 2013, 12:00 43
Scrie aici comentariul tau
  1    Raspunde
lucibarbone 06 aprilie 2013, 12:03 44
Multumim.Intradevar este un curs din care am invatat ceva.Sunte-ti cei mai buni.Bravo!
  0    Raspunde
Bogdan92 07 aprilie 2013, 16:31 45
am si eu o mica problema.am de pus intr-un site html o operatie matematica cu fractie.se poate realiza?va rog ajutatima
multumesc anticipat
  0    Raspunde
ddany3ll 05 iunie 2013, 11:43 46
am si eu o problema. puteti sami spuneti si mie cum se pune radicalul in html??
  -4    Raspunde
chis_f@yahoo.com 06 ianuarie 2014, 15:18 47
Exista vre-un tag pentru lasarea aliniatului?
  0    Raspunde
ERTYNICKY 06 aprilie 2014, 13:11 48
buna ziua. multumesc frumos pentru curs.
  0    Raspunde
Niga 24 iulie 2014, 14:15 49
&nbsp=aliniat insa il pun inainte de bine sau dupa caci nu mia esit. Va ROG
  0    Raspunde
Niga 24 iulie 2014, 14:21 50
Gata am rezolvat. Trebuia mai multa atentie la citit.:>
  0    Raspunde
mirelaelenes 21 septembrie 2014, 16:26 51
multumesc! foarte bun acest curs.
  0    Raspunde
cristinailieyuki 21 noiembrie 2014, 01:39 52
mii de multumiri pentru acest curs :)
  0    Raspunde
Korean-Lover 29 ianuarie 2015, 17:55 53
Am si eu o intrebare, cum fac sa salvez lectiile ( cu tot cu exemple, fonturi etc ) in PC ca sa le pot baga pe un stick sa le scot la cineva care are imprimanta?
  0    Raspunde
Rapunzell 08 iunie 2015, 14:55 54
@Korean-Lover: Nu se poate!
  0    Raspunde
Rapunzell 08 iunie 2015, 14:54 55
e foarte bun cursul!Dar am o intrebare:Nu reusesc sa pun imaginile din curs!Tu cum ai reusit, Lucian?
  0    Raspunde
StefanDan 21 octombrie 2015, 08:35 56
Foarte explicit cursul acesta. Multumesc!
  0    Raspunde
Rapunzell 01 noiembrie 2015, 11:01 57
part cursu!!!!!!!!!!!!!!!!!!!!!!!!
  0    Raspunde
Coyote.Wild 08 iunie 2016, 19:01 58
<HTML>
<HEAD>
<TITLE>Eticheta <BR></TITLE>
</HEAD>
<BODY>
Invat limbajul HTML. Exersez limbajul HTML. Stiu limbajul HTML.
</BODY>
</HTML>

Tag-ul <BR> dintre Tag-urile <TITLE> are rol ca si Head-er sau e pus din greseala?
  0    Raspunde
ClaudiaT 20 septembrie 2016, 11:01 59
Care este diferenta <H1>...<H6> si <FONT SIZE="1,2...7"? Multumesc!
  0    Raspunde
cvermesan 28 noiembrie 2016, 21:38 60
Va rog sa ma ajutati cu clarificare. Am observant pe parcursul cursului, referiri la tag-uri care au sau nu un tag de inchidere si deasemenea referire la tag-uri care nu sunt urmate de un tag de incjidere.
Exemplu:

"Atunci cand vrem ca textul din cadrul paginii noastre web sa fie afisat pe mai multe randuri vom folosi unul din tag-urile <BR> sau <P>. Tag-ul <BR> nu are tag de incheiere, in timp ce tag-ul <P> are tag de incheiere, insa nu este obligatoriu."

Daca este posibil va raog sa-mi spuneti o regula sau o definitie ori clasificare cuprinzatoare.

Multumesc
  0    Raspunde
gabush86 29 decembrie 2016, 22:52 61
tagurile H1-H6 nu primesc si atribute precum color sau face? am incercat si nu merge. doar align?
  0    Raspunde
Adauga comentariu

Pentru a adauga comentarii trebuie sa fii membru eCursuri.ro

Intra in contul tau sau inregistreaza-te GRATUIT (dreapta sus)
Publicitate
Cuprinsul cursului
1. Structura unui document HTML
2. Despre atribute HTML
3. Despre culori HTML
4. Formatarea textului in HTML
5. Adaugarea imaginilor in paginile HTML
6. Crearea legaturilor in HTML
7. Crearea listelor in HTML
8. Tabele in HTML
9. Folosirea cadrelor intr-o pagina web
10. Crearea formularelor folosind HTML
11. Realizarea unui site in HTML
Cursuri noi Top cursuri
Curs de legislatie rutiera

7 lectii online
Excel prin exemple

10 lectii online
Windows XP prin exemple

10 lectii online
Infiintarea unei firme

6 lectii online
Gramatica limbii engleze

27 lectii online
Introducere in e-Business

25 lectii online
Curs de Machiaj

13 lectii online
Curs de Fashion

17 lectii online
Curs de Barman

10 lectii online
HTML pe intelesul tuturor

11 lectii online
cursuri
Copyright © 2005-2011 - eCursuri.ro - toate drepturile rezervate - E-mail: contact@ecursuri.ro