HTML contine cateva tag-uri utile pentru asezarea continutului in pagina. Prin acestea textul este mai usor de citit si evidentiat.
Elementele pentru marcatori si numerotare
Un element des folosit in formarea listelor (neordonate) este <ul>.
- - <ul> este elementul de început si dupa scrierea listei se incheie cu </ul>.
- - Majoritatea elementelor pentru marcatori si numerotare sunt compuse din unu sau mai multe elemente <li> ... </li> (list element). Fara atributul "type" specificat in "<ul>" acestea prezintă un marcaj ca un bullet.
Mai jos puteti vedea exemplu.
<!DOCTYPE html>
<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<ul>
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</ul>
</body>
</html>
- Sunt 3 tipuri de marcaje:
disc, circle (
cerc) si
square (
patrat)
- Tipul de marcaj care se doreste folosit se introduce cu proprietatea CSS:
list-style-type in "style".
- Exemplu:
<!DOCTYPE html>
<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<ul style="list-style-type: square;">
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</ul>
</body>
</html>
Un alt element folosit pentru formarea listelor (ordonate numeric) este
<ol>.
<!DOCTYPE html>
<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<ol>
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</ol>
</body>
</html>
Sunt mai multe tipuri de numerotare care pot fi folosite. Acestea sunt controlate de atributul "
type" care este adaugat in elementul
<ol>, le puteti vetea mai jos:
- - type="1" - stil: 1, 2, 3, ...
- - type="a" - stil: a, b, c, ...
- - type="i" - stil: i, ii, iii, ...
- - type="I" - stil: I, II, III, ...
De asemenea se poate specifica numarul de inceput al numerotarii printr-o valoare data atributului:
start.
Se poate inversa numerotare aplicand atributul:
reversed.
Exemplu:
<!DOCTYPE html>
<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<ol type="a">
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</ol>
- Alta lista, start 3, inversa:
<ol type="I" start="3" reversed>
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</ol>
</body>
</html>
Alte elemente pentru asezarea textului in pagina
Alte elemente pentru asezarea textului sunt: tag-ul <dl>, care cuprinde in el elementele <dt> si <dd>
- - <dl> ... </dl> este folosit (impreuna cu "dt" si "dd") pentru definirea si incadrarea unei liste de definitii.
- - <dt> ... </dt> Defineste elementul din lista. Fiecare tip de astfel de element trebuie precedad de unul sau mai multe elemente <dd> ... </dd>, folosite pentru descrierea elementului definit.
Aceste elemente ajuta pentru a da un aspect ordonat si placut textului si a putea face o separare mai buna a continutului.
In urmatorul exemplu puteti vedea cum se folosesc aceste elemente :
<!DOCTYPE html>
<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd> - Hyper Text Markup Language</dd>
<dd> - Limbaj pentru pagini web</dd>
<dt>Dog</dt>
<dd>dog = caine</dd>
<dd>animal de casa</dd>
</dl>
</body>
</html>
Pentru o eficienta mai buna se pot combina elementele de marcaj si numerotare, introducand elementele
<ul> si
<ol> imbricate (
unele in celelalte) impreuna cu elementele
<li>
Exemplu:
<!DOCTYPE html>
<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<ul type="square">
<li> List item 1 ... </li>
<li> List item 2 ...
<ol type="a" start="3">
<li> Alt List item ... </li>
<li> Alt List item ... </li>
</ol></li>
<li> List item 5 ... </li>
</ul>
</body>
</html>
- Observati ca tot ce contine "<ol> ... </ol>" este adaugat in cadrul unui "<li> </li>".
Un Test simplu in fiecare zi
HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag creaza un text ingrosat?
<q> <strong> <em><p>Adresa: <strong>http://CoursesWeb.net/</strong> - Tutoriale.</p>
Care din aceste coduri CSS afiseaza textul ingrosat?
text-size: 18px; font-style: italic; font-weight: 800;#id {
font-weight: 800;
}Ce functie JavaScript apeleaza o alta functie, in mod repetat, la un anumit interval de timp?
setInterval() setTimeout() push()function someFunction() { alert("CoursesWeb.net"); }
setInterval("someFunction()", 2000);Clic pe variabila definita corect in PHP.
var vname = 8; $vname = 8; $vname == 8;$vname = 8;
echo $vname;
Care din urmatoarele forme ale verbului "travel" (a calatori) e la timpul Prezent Perfect?
have traveled shall travel had traveledWe have traveled in space.
- Noi am calatorit (deja) in spatiu.
Care din urmatoarele forme ale verbului "pintar" (a picta) se foloseste la Trecutul Imperfect?
ir a pintar pintaba pintóLa niña pintaba un arco iris.
- Fetita picta un curcubeu.