HTML contine mai multe elemente, tag-uri si atribute, pentru afisarea textului in mai multe formate cu aspecte grafice diferite.
Aliniere text
Alinierea textului se poate face cu proprietatea css text-align:valoare; in style, unde "valoare" poate fi: left (stanga), center (centru) sau right (dreapta). Modul implicit e "left".
<div style="text-align:center;"> Continutul de aici va fi aliniat pe centru Div-ului. </div>
Marimea, fontul si culoarea textului
In atributul style se pot adauga proprietati CSS prin care puteti modifica aspectul textului, cum sunt tipul fontului folosit, marimea si culoarea textului.
- - Marimea textului poate fi modificata cu proprietatea css font-size:valoare;, unde "valoare" poate fi in pixeli (px), procente (%) sau "em".
- Exemplu :
<div style='font-size:20px;'>Text cu marimea 20px.</div>
- - Tipul fontului poate fi modificat cu proprietatea css font-family:'tip_font';, unde 'tip_font' e tipul fontului (Arial, Calibri, Verdona, etc.).
- Exemplu :
<div style="font-family:'Arial Black';">Text cu font Arial Black.</div>
- - Culoarea textului poate fi modificata cu proprietatea css color:culoarea;.
- Exemplu :
<div style='color:#00c000; font-size:20px;'>Text cu marimea 20px si culoare verde.</div>
Bold, Italic, Underline si alte elemente
Elemente des folosite pentru formatul textului sunt:
- - Bold (ingrosat) <b> ... </b>
- - Italic (inclinat) <i> ... </i>
- - Underline (subliniat) <u> ... </u>
Exemple:
<b> Bold </b>
<i> Italic </i>
<u> Underline </u>
Alte elemente folosite pentru formatul textului sunt:
- - <pre>Performated</pre> - Textul incadrat de elementul PRE este prezentat intr-un singur font, oricare ar fi atributul FACE. Spatiile mai lungi si liniile necesare sunt prezentate aşa cum sunt scrise in NotePad, ne mai fiind nevoie de alte elemente adiţionale, cum ar fi <br> pentru o noua linie si pentru mai mult spaţiu intre cuvinte.
- - <em> Accentuare (Emphasis) </em> - Browser-ul de obicei arata acest element ca italic
- - <strong> Strong </strong> - Browser-ul de obicei arata acest element ca bold.
- - <cite> Citatie </cite> - Reprezinta o citatie din document.
Mai jos puteti vedea câteva exemple de coduri si modul lor de afisare in browser.
<!DOCTYPE html>
<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<div>
<span style="font-size:19px;">Font 19px.</span> - normal - <span style="font-size:12px;">Marime font 12px.</span><br>
<b>Bold</b>- <i> Italic </i> - <u> Subliniat </u> -
<span style="color:#fb0000"> Colorat </span><br>
<em>Accentut em</em> - <strong> Strong </strong><br>
<cite> Citatie </cite>
</div>
</body>
</html>
Alte tag-uri HTML pentru formatul textului
- - <del> Text taiat </del>
- - <small> Prezinta textul intr-un font mic </small>
- - <sub> Afisaza textul in pozitia subscript </sub>
- - <sup> Aseaza textul in pozitia superscript </sup>
In continuare puteti vedea un exemplu cu aceste coduri de mai sus si felul cum sunt afisate de browser.
<!DOCTYPE html>
<html>
<head>
<title>Titlu documentului</title>
</head>
<body>
<p>
<del> Text taiat </del><br>
<small> Prezinta textul intr-un font mic </small><br>
<sub> Aseaza textul in pozitia subscript </sub> normal
<sup> Aseaza textul in pozitia superscript </sup><br>
</p>
</body>
</html>
- Urmatoarele elemente pentru format sunt folosite mai rar si sunt pentru documente cu aplicatii tehnice
- - <dfn> Defineste exemplu de termen inchis </dfn>
- - <code> Folosit pentru text de cod </code>
- - <samp> Folosit pentru simple productii de programe, scripturi , etc. </samp>
- - <kbd> Folosit pentru text care va fi scris de utilizator </kbd>
- - <var> Pentru indicare variabile de program </var>
In continuare puteti vedea un exemplu cu aceste coduri de mai sus si felul cum sunt afisate de browser.
<!DOCTYPE html>
<html>
<head>
<title>Titlu documentului</title>
</head>
<body>
<p>
<dfn>dfk - exemplu de termen inchis </dfn><br>
<code>code - Folosit pentru cod de program </code><br>
<samp>samp - simple productii de programe, scripturi , etc. </samp><br>
<kbd>kbd - pentru text care va fi scris de utilizator </kbd><br>
<var>var - variabile de program </var><br>
</p>
</body>
</html>
- Alte elemente pentru formatul textului:
- - <q> ... </q> - Folosit pentru citate scurte.
- - <blockquote> ... </blockquote> - Folosit pentru incadrarea de citate mai lungi, creaza spatiu pentru text. Pentru a crea mai mult spatiu puteti adauga de mai multe ori acest element.
- - <address> ... </address> - Cu acest element se specifica informatii cum ar fi autorul documentului si detalii pentru contact.
In continuare puteti vedea un exemplu cu aceste coduri de mai sus si felul cum sunt afisate de browser.
<!DOCTYPE html>
<html>
<head>
<title>Titlu documentului</title>
</head>
<body>
<q>Daca vrei si crezi, orice este posibil.</q>
<blockquote>
Bucuriile neimpartasite pot aduce tristete iar suferinta impartasita poate sa aduca bucurie. <br>
Aceasta este prima zi din restul vietii tale.
</blockquote>
<div style="text-align:center;">
<address>180 Attwell Dr. Suite 130 <br> Toronto, ON <br> M9W 6A9</address>
</div>
</body>
</html>
Un Test simplu in fiecare zi
HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce atribut e folosit in tag-ul <img> pentru adresa imaginii?
href src rel<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Care din aceste coduri CSS ascunde elementul in pagina?
display: none; display: inline; position: relative;#id {
display: none;
}Ce instructiune opreste executia lui while() sau for() ?
continue prompt() breakfor(var i = 0; i< 8; i++) {
if(i > 1) break;
alert(i);
}Indicati functia utilizata pentru a crea constante.
define() include() defined()define("CONSTANT_NAME", "value");
echo CONSTANT_NAME;Care este forma de plural a substativului "class" (clasa)?
classes clases clasisThis school has three classes.
- Scoala asta are trei clase.
Care este pluralul substativului "voz" (voce)?
vose voze vocesEscuché dos voces.
- Am auzit doua voci.