Home - qdidactic.com
Didactica si proiecte didacticeBani si dezvoltarea cariereiStiinta  si proiecte tehniceIstorie si biografiiSanatate si medicinaDezvoltare personala
referate stiintaSa fii al doilea inseamna sa fii primul care pierde - Ayrton Senna





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

<del>

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


Orange

#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 -| contact
Adauga document |- pune-ti documente online -| adauga-document
Termeni & conditii de utilizare |- politica de cookies si de confidentialitate -| termeni
Copyright © |- 2024 - Toate drepturile rezervate -| copyright