 |
|
 |  |
| Aeronautica | Comunicatii | Drept | Informatica | Nutritie | Sociologie |
| Tehnica mecanica |
Html
|
Qdidactic » stiinta & tehnica » informatica » html HTML - structura unui document html - heading-uri, paragrafe, formatul textului |
HTML - structura unui document html - heading-uri, paragrafe, formatul textului
Introducere
Pagina principala trebuie denumita index.html, majoritatea serverelor recunosc pagina principala dupa aceasta denumire. Pentru a crea acest fisier deschideti Notepad si salvati fisierul cu numele index.html. Acest fisier 'index.html' il puteti deschide cu orice Browser de internet. Pentru a vedea sau edita codul html dintr-un document HTML nu trebuie decat sa dati click dreapta si sa selectati View Source.
Codul HTML este format din elemente de marcare numite tag-uri (etichete). Tag-urile se scriu intre semnele '<' si '>'. De exemplu tag-ul <p> da comanda de deschiderea unui paragraf, iar tag-ul </p> da comanda de inchidere a paragrafului. Tag-ul <b> da comanda de a incepe scrierea cu caractere Bold, iar tag-ul </b> da comanda de a opri scrierea cu caractere Bold.
Exemplu:
<p>Acesta este un paragraf</p>
Exemplu:
<p>Aceste este un <b>paragraf</b></p>
Unde cuvantul
'paragraf' este scris cu caractere Bold.
Exista deasemenea si elemente care nu necesita sau nu au
tag-uri de sfarsit sau incheiere, in general pentru ca nu au un
continut pe care sa il incadreze. Ex '<br />' care face
referire la trecerea la un nou rand. Trecerea la un nou rand in HTML nu se face apasand tasta Enter ci
folosind tagul <br />. HTML nu face distinctie intre literele mari si
literele mici , deci <BR /> , <Br /> sau
<br /> desemneaza acelasi element . Dar este de preferat sa folositi
litere mici .
Continutul fiecarui document
HTML trebuie scris intre tag-urile <html> si </html>
.
Deci tag-ul <html> este primul tag din orice
document HTML iar tag-ul </html> este intotdeauna
ultimul tag dintr-un document HTML.
<html>
..Continutul paginii .
</html>
Structura unui document
Documentele HTML au doua parti 'head' si 'body' . Prima parte Head-ul este delimitat de Tag-urile <head> si </head> si contine informatii de identificare a paginii precum si titlul paginii delimitat de tag-urile <title> si </title> ( Acesta va aparea pe bara de titlu a paginii ). Si o a doua parte Body-ul , delimitat de tag-urile <body> si </body>, body-ul este partea cea mai mare a documentului unde se va gasi continutul paginii.
<html>
<head>
<title>Titlu</title>
</head>
<body>
..Continutul paginii
</body>
</html>
Nota: Aceste Tag-uri vor aparea doar o singura data intr-un document HTML.
Heading-uri
Heading-urile sunt unele dintre cele mai importante tag-uri .Titlurile si subtitlurile documentelor se vor marca cu Heading-uri. Tag-urile de deschidere pt Heading sunt <h1>,<h2><h6> iar tag-urile de inchidere </h1>,</h2></h6>. Cifrele reprezentand marimea , 1 fiind cel mai mare iar 6 cel mai mic .
Exemplu:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Nota: Folositi heading-urile pentru titluri. Nu folositi heading-uri pentru a face textul mare sau bold.
Paragrafe
Paragrafele se folosesc foarte mult in HTML . Tag-urile pt paragrafe sunt <p> pt deschiderea paragrafului si </p> pt inchiderea paragrafului.
<p>Acesta este un paragraf</p>
Daca doriti sa treceti la un nou rand, fara a folosi un alt paragraf, folositi tag-ul <br />.
<p>Acest text este<br />scris pe<br />trei randuri</p>
Heading-urile si paragrafele suporta atribute de aliniere in pagina: Aliniere stanga, in centru, la dreapta.
Exemplu:
<h3 align='left'>Aliniere stanga</h3>
<p align='center'>Aliniere centru</p>
<p align='right'>ALiniere Drepata</p>
Formatul textului
In documentele pe care le veti crea veti folosi diferite stiluri de text pentru a pune in evidenta anumite cuvinte sau pentru a le acorda o seminficatie dorita. Cel mai usor mod de a marca un anumit stil corespunzator unor cuvinte sau a unui text in documentul dumneavoastra este de a folosi Tag-uri ca <b>,<i> si <u> care modifica stilul fontului, in tabelul de mai jos gasiti o lista cu stiluri de text:
|
Tag |
Descriere |
|
<b> |
Bold |
|
<i> |
Italics |
|
<u> |
Subliniat |
|
<em> |
Emphasized |
|
<small> |
Small |
|
<strong> |
Strong |
|
<sup> |
Superscripted |
|
<sub> |
Subscripted |
|
< |
Deleted |
Nota: Toate aceste tag-uri necesita tag-uri de inchidere.
Culoarea si modelul
Pt dimensiunea, culoarea si modelul corpului de litera folosim tag-ul <font> si </font>.
<font color='#ff0000' size='2' face='arial'>Text</font>
Color:
Folosit pt a stabili culoarea textului marcat. Valorile acestei proprietati se pot scrie fie cu ajutorul codului
hexazecimal al culorii, fie cu ajutorul numelui culorii respective.
|
<font
color='#FF0000'>Text</font>
<font color='red'>Text</font>
Despre culori puteti afla mai multe la capitolul Culori
Size:
Folosit pentru a specifica dimensiunea fontului utilizat si poate lua valori de
la 1 la 7.
<font size='3'>Text</font>
Face:
Folosit pentru alegerea corpului de litera utilizat.
<font
face='Arial'>Text</font>
<font face='Impact'>Text</font>
Linii Orizontale
Liniile orizontale sunt folosite pentru a separa anumite arii intr-o pagina web. Tag-ul pentru o linie orizontala este <hr />. Acestui tag i se pot adauga anumite atribute ca : Width (lungimea liniei), Size (pentru linie ingrosata dar transparenta) sau Noshade (pentru linie ingrosata plina).
Exemple :
<hr width='300px' />
<hr width='30%' />
<hr size='5' />
<hr noshade='noshade' />
Se pot folosii si mai multe atribute untr-un singur tag :
<hr width='200px' size='3' noshade='noshade' />
Comentariile
In cadrul documentului HTML
puteti face comentarii, care nu vor fi afisate de catre browser.
Comentariile sunt incadrate de marcajele '<!--' si
'-->'.
Exemplu:
<!-- Acesta este un comentariu.-->
<!-- Acesta este un comentariu
pe
doua randuri.-->
Culori
Am vazut in capitolul anterior ca textele din paginile HTML pot avea diverse culori cu un tag de tipul <font color='#00FF00'>Text</font>. Va voi prezenta in continuare sistemul de codificare a culorilor pentru paginile web. Valorile atributelor referitoare la culorile textului, fondului sau ale altor elemente se pot exprima fie prin codul hexazecimal al culorii respective, fie prin numele unei culorii ( Red, blue, yellowetc).
Exemplu:
<p>
<font color='#000000'>Acest text
este negru</font><br />
<font color='red'>Acest text este rosu</font><br />
<font color='yelllow'>Acest text este galben</font><br
/>
<font color='green'>Acest text este verde</font> <br
/>
<font color='#0000FF'>Acest text este
albastru</font><br />
</p>
Exista 16.7 milioane de culori
diferite in sistemul de culori hexadecimal (hex) incepand de la #FFFFFF care este Alb, pana la #000000 care este Negru.
Fiecare cod hexadecimal este impartit in 3 grupe :
-#XXxxxx - Tenta de rosu
-#xxXXxx - Tenta de verde
-#xxxxXX - Tenta de albastru
Acordand ponderi exprimate prin aceste numere in baza 16
culorilor rosu, verde si albastru (RGB sau Red, Green, Blue) se poate obtine
orice culoare. Cea mai mica valoare care poate fi data este 0 (hex 00)
iar cea mai mare este 255 (hex FF).
Dar este de preferat ca atunci cand utilizati culori sa apelati la una din culorile standard.
Iata un tabel cu nume si coduri pentru cateva culori :
|
Nume culoare |
Hexadecimal |
Culoare |
|
White |
#FFFFFF |
|
|
Black |
|
|
|
Red |
#FF0000 |
|
|
|
#FFA500 |
|
|
Yellow |
#FFFF00 |
|
|
Green |
#00FF00 |
|
|
Blue |
#0000FF |
|
|
Indigo |
#4B0082 |
|
|
Violet |
#EE80EE |
|
|
Brown |
|
|
|
Cyan |
#00FFFF |
|
|
Pink |
#FFC0CB |
|
|
Purple |
|
|
|
Grey |
|
|
|
Mangeta |
#FF00FF |
|
Folosind acelasi sistem vom putea specifica culoarea de fundal (background) a unei pagini web, in cadrul tag-ului <body> despre care v-am vorbit la inceputul acestui curs:
<body bgcolor='#00FF00'>
<body bgcolor='green'>
Tag-ul <body> mai poate
contine si alte informatii legate de culori, ca de exemplu culoarea cu care vor
fi afisate link-urile catre alte pagini folosind atributele LINK si VLINK .
-LINK este culoare pentru link.
-VLINK este culoare pentru link-urile deja vizitate.
<body bgcolor=#808080 link=#00FF00 vlink=#0000FF>
Dar despre link-uri vom vorbi mai multe in capitolul Link-uri.
Liste
De multe ori, in redactarea
unui text ajungem in punctul in care trebuie sa
enumeram un set de elemente. Prezentarea acestora trebuie realizata in asa fel
incat relatiile dintre ele, sau dintre ele si eventualele
'subelemente' sa fie cat mai clar exprimate
din punct de vedere vizual. Pentru aceasta se folosesc
diferitele tipuri de liste.
Listele sunt de trei feluri: Neordonate, Ordonate si Liste de Definitii.
Liste neordonate
Lista neordonata (nenumerotata)este probabil cea mai folosita in cadrul documentelor HTML. Pentru a marca inceputul si sfarsitul unei liste neordonate se foloseste tag-ul <ul> pentru deschidere si </ul> pentru inchiderea listei, iar pentru fiecare element prezentat in lista se folosesc tag-urile <li> si </li>.
Exemple
<h3>Lista neordonata 1</h3>
<ul>
<li>Ianuarie</li>
<li>Februarie</li>
<li>Martie</li>
<li>Aprilie</li>
</ul>
<h3>Lista neordonata 2</h3>
<ul type='circle'>
<li>Pixuri</li>
<ul type='square'>
<li>Albastre</li>
<li>Negre</li>
<li>Verzi</li>
</ul>
<li>Rigle</li>
<li>Mine</li>
</ul>
Cu ajutorul
atributului Type putem schimba marcajul elementelor din lista, dupa cum ati
vazut in exemplul de mai sus.
Valorile posibile pentru Type sunt:
- Disc - Disc
- Circle - Cerc
- Square - patrat
Liste Ordonate
Diferenta intre lista neordonata si cea ordonata este faptul ca listele ordonate atribuie ca marcaj fiecarui element un numar sau o litera. Pentru a marca inceputul si sfarsitul unei liste ordonate(numerotate) se foloseste tag-ul <ol> pentru deschidere si </ol> pentru inchiderea listei, iar pentru fiecare element prezentat in lista se folosesc la fel ca la listele neordonate tag-urile <li> si </li>.
Exemplu:
<h3>Lista ordonata</h3>
<ol>
<li>Creioane</li>
<li>Carioci</li>
<li>Pixuri</li>
<ol type='a'>
<li>Albastre</li>
<li>Negre</li>
</ol>
<li>Rigle</li>
</ol>
La fel ca la lista neordonata cu ajutorul
atributului Type putem schimba marcajul elementelor din lista.
Valorile posibile pentru Type sunt:
1 - Pentru cifre arabe - 1,2,3
i - Pentru cifre romane mici - i,ii,iii
I - Pentru cifre romane mari- I,II,III
a - Pentru litere mici - a,b,c
A - Pentru litere mari - A,B,C
Liste de definitii
O lista de definitii este o lista de elemente carora li se pot adauga o
descriere.
Pentru a marca inceputul si sfarsitul unei liste de definitii
se foloses tag-urile <dl> si </dl>. Pentru termenul de
definit se folosesc tag-urile <dt> si </dt> ,
iar pentru descrierea definitiei tag-urile <dd> si </dd>.
Exemplu:
<h4>Lista de definitii</h4>
<dl>
<dt>Tag</dt>
<dd>Element de marcare in
HTML</dd>
<dt>Head</dt>
<dd>Contine informatiile de
identificare a paginii</dd>
<dt>Body</dt>
<dd>Cuprinde continutul
paginii</dd>
</dl>
Tabele
Tabelele sunt unele din
cele mai provocatoare lucruri din codul HTML. Nu sunt greu de creat si de folosit dar au un cod mai lung si necesita mai multa atentie.
Tabele incep cu tag-ul <table> si se inchid cu tag-ul
</table>. Fiecare rand din tabel este
definit cu tag-urile <tr> si </tr>, in fiecare rand al tabelului se
gasesc casute care sunt definite de tag-urile <td> si </td>.
De multe ori veti avea nevoie de un titlu al coloanei,
pentru acesta se folosesc tag-urile <th> si </th>.
Exemplu:
<table border=1>
<tr>
<th>Titlu 1</th><th>Titlu
2</th><th>Titlu 3</th>
</tr>
<tr>
<td>Casuta 1</td><td>Casuta
2</td><td>Casuta 3</td>
</tr>
<tr>
<td>Casuta 4</td><td>Casuta
5</td><td>Casuta 6</td>
</tr>
</table>
Tag-urile de definire a
tabelelor pot avea diverse atribute, pentru formatarea tabelului.
Astfel, tag-ul <table> poate avea urmatoarele atribute:
- width=n sau width=n% - acesta specifica lungimea intregului tabel in pixeli
width='400' sau in procente fata de lungimea intregii ferestre
width='80%' .
- height=n sau height=n% - similar cu width, dar
pentru inaltimea intregului tabel.
exemple: height='200' sau
height='70%' .
- border=n - daca n este 0 atunci tabelul nu va avea
cadru (linii de delimitare a celulelor).
Daca n este 1 atunci acesta va avea cadru, daca nu
specificam atributul border atunci tabelul nu va avea cadru.
- cellspacing=n - specifica spatiul dintre casute, in
pixeli.
- cellpadding=n - specifica spatiul dintre marginea
unei casute si continutul acesteia, in pixeli.
- align='left'|'center'|'right' - pentru pozitia
textului in casuta ( <td
align='center'> ).
Exemplu:
<table width='500'
height='50%' border=1 cellpadding=1 cellspacing=10>
<tr>
<th>Titlu 1</th><th>Titlu 2</th><th>Titlu
3</th>
</tr>
<tr>
<td>Casuta 1</td><td>Casuta 2</td><td>Casuta
3</td>
</tr>
<tr>
<td>Casuta 4</td><td>Casuta 5</td><td>Casuta
6</td>
</tr>
</table>
Dupa cum ati vazut in exemplul de mai sus, se pot folosii mai multe atribute in cadrul aceluiasi tag <table>.
Adaugarea atributului rowspan='n' tag-ului
<td> permite acelei casute sa se intinda pe n
randuri.
Adaugarea atributului colspan=n tag-ului <td> permite acelei
casute sa se intinda pe n coloane.
<table border=1>
<tr>
<td>Casuta 1</td><td>Casuta 2</td><td
rowspan='2>Casuta' 3&6</td>
</tr>
<tr>
<td>Casuta 4</td><td>Casuta 5</td>
</tr>
</table>
<table border=1>
<tr>
<td>Casuta 1</td><td>Casuta 2</td><td>Casuta
3</td>
</tr>
<tr>
<td colspan=3 align='center'>Casuta 4,5,6</td>
</tr>
</table>
Link-uri
Un element foarte
important intr-o pagina web il constituie link-urile. Este foarte util sa adaugati un link intr-o pagina iar atunci cand dati click
pe el sa fiti trimis in alta pagina sau in alta parte a aceleiasi pagini sau
chiar catre alt site. Pentru link-uri se foloseste tag-ul <a
href='locatie'> si tag-ul de inchidere </a>, tot ceea ce veti scrie intre aceste doua tag-uri va aparea in pagina colorat
si subliniat. In momentul in care veti face click pe acel text browser-ul va fi trimis catre acea locatie.
Si o imagine sau un buton se poate folosi drept link,
dar despre asta vom vorbi la capitolul Imagini.
Exemplu:
Apasati <a href='Pagina 2.html'>aici</a> pentru pagina 2.
Atributul target:
<a href='https://notepad-plus.sourceforge.net/uk/site.htm' target='_blank'>Notepad++</a>
Dupa cum puteti vedea in
exemplul de mai sus am adaugat si atributul target='_blank'. Va voi
prezenta doua valori pentru Target care sunt simple si foarte utile:
target='_blank' - pentru a deschide link-ul intr-o ferestra noua,
astfel incat vizitatorul nu trebuie sa paraseasca pagina dumneavoastra.
target='_self' - pentru a deschide link-ul
in aceeasi fereastra.
O alta varianta este posiblitatea transmiterii unui e-mail. Astfel, codul de mai jos afiseaza 'Contact !', text care prin apasare va deschide o fereastra pentru transmiterea unui mesaj la adresa electronica a destinatarului mesajului.
<a href='mailto:contact@gmail.com'>Contact !</a>
Tot cu ajutorul link-urilor puteti da posibilitatea vizitatorului sa salveze de pe site-ul dumneavoastra un fisier sau o arhiva:
<a href='program.rar'>Salveaza programul.</a>
Pentru inceput este bine ca toate documentele HTML, imaginile si alte
fisiere sa fie in acelasi director cu locatia documentului index.html. Astfel
incat, atunci cand puneti link-urile sa nu fie nevoie
sa introduceti toata locatia documentului ci doar denumirea.
In cazul in care fisierul se gaseste in alt director atunci se foloseste:
<a href='director/program.rar'>Salveaza programul.</a>
Imagini
Puteti adauga
paginii dumneavoastre imagini. Tag-ul folosit pentru a
adauga o imagine este
<img scr='imagine.jpg'>. Acest tag nu are tag de inchidere.
Exemplu:
<img scr='imagine.jpg'>
Este recomandata adaugarea atributelor height si width, acestea permit imaginii sa aiba diferite dimensiuni.
<img scr='imagine.jpg' height='200' width='100'>
Deasemenea folosirea atributului border=n unde n este grosimea chenarului din jurul pozei in pixeli.
<img scr='imagine.jpg' height='200' width='100' border='3'>
O imagine poate fi aliniata, astfel incat textul sa poata fi scris in staga sau in dreapta imaginii. Folosind atributul align='left | right'.
<p>
<img scr='imagine.jpg' height='200'
width='100' border='3' align='right'>
Aceasta imagine este aliniata drepata si permite
scrierea textului in partea stanga a imaginii.
</p>
Aceasta imagine este aliniata drepata si permite scrierea textului in partea stanga a imaginii.
O imagine se poate folosi si
drept link, asta inseamna ca in momentul unui click pe imaginea respectiva
sunteti trimis catre o alta pagina. Acest lucru este foarte usor de facut, intre tag-urile de adaugare link
(<a href='adresa'> si </a>) se pun tag-urile de adaugare
imagine.
Exemplu:
<a href='https://www.google.com' target='_Blank'><img scr='imagine.jpg'></a>
O imagine poate fi folosita si ca fundal (Background) pentru pagina de internet. Pentru aceasta se introduce atributul background in cadrul tag-ului <body>.
Exemplu:
<body background='imagine.jpg'>
| Contact |- ia legatura cu noi -| |  |
| Adauga document |- pune-ti documente online -| |  |
| Termeni & conditii de utilizare |- politica de cookies si de confidentialitate -| |  |
| Copyright © |- 2024 - Toate drepturile rezervate -| |  |
