10 Etichete - HTML

HTML – elemente utile
HTML este prescurtarea de la Hyper Text Mark-up Language si este codul care stă la baza creării paginilor web. Paginile HTML
contin elemente (etichete) si au extensia .html sau .htm.
Unele etichete permit utilizarea de atribute care pot avea anumite valori:
<eticheta atribut="valoare"> ... </eticheta>
Componenta unui document HTML este:
1. versiunea HTML a documentului
2. zona head cu etichetele <head> </head>
3. zona body cu etichetele <body> </body> sau <frameset> </frameset>
Un site util pentru început
https://www.w3schools.com/html/
O parte dintre tag-urile utile
<p> </p> introduce un paragraf
<pre> </pre> introduce textul preformatat
<font size=nr color=culoare face=nume font> text</font> formatează textul: dimensiune, culoare, font
<h1>text tip titlu1</h1> inserează un text tip titlu
<i>text</i> stil cursiv
<b>text</b> stil aldin
<u>text</u> text subliniat
<big> text</big> crește dimensiunea textului comparativ cu

cel anterior din pagină
<small> text</small> micșorează dimensiunea textului comparativ

cu cel anterior din pagină
text<sub>indice inferior</sub> pune indice inferior
text<sup>indice superior</sup> pune indice superior
<br> introduce rând nou

<hr [size=n] [width=n] [align=left | right | center] [noshade]> trasează o linie orizontală de separare,
care poate avea următoarele caracteristici:
grosime (size), lungime (width), aliniere (align)
şi fără umbră (noshade).
<em>text</em> text cursiv /evidențiere
<strong>text</strong> text îngroșat
<mark>text</mark> marchează cu fundal textul
<ins>text</ins> subliniază textul
<del>text</del> afișează un text tăiat
<q>text</q> afișează textul între ghilimele
<blockquote> text</blockquote> textul este afișat indentat
<address> afișează textul cu caractere italice

text
</address>
<cite>text</cite> permite scrierea cursiva a textului în vederea marcării
<kbd>text(tastatura)</kbd> text cu scriere spațiată
<tt> text (teleprinter)</tt> text cu scriere spațiată

Alte diacritice:
Ă- Ă ă - ă Î - Î î - î Ş - Ş ş - ş Ţ - Ţ ţ - ţ Â - Â â - â
Alte caractere:
Spaţiu Mai mic < Mai mare > Copyright © Ghilimele " Ampersand &
Un sfert ¼ ¼ O jumatate ½ ½ Trei sfarturi ¾ ¾ Grade °
<div> </div> Tag-ul < div > defineste o sectiune sau o diviziune intr-un
document HTML.
Tag-ul < div > este adesea utilizat pentru a grupa elemente
“bloc” formatate cu stiluri.
Font, culoare, dimensiune
<font size=nr color=culoare sau cod face=font> text</font>
• Culori font
Culoarea se poate preciza în două moduri:
– printr-un nume de culoare. <font color=red>Culoare.</font>
– printr-o constantă dată conform standardului de culoare RGB (Red, Green, Blue). Ea se poate formata astfel:
#rrggbb, unde r, g si b sunt cifre hexazecimale. (ex. #000000 negru; #FFFFFF alb; #FF0000 roșu)Se utilizează
atributul color.
<font color="#1234fa">Culoare.</font>
• Fontul
– pentru scrierea unui text într-o pagină pot fi folosite mai multe fonturi. Se pot introduce mai multe fonturi
separate prin virgulă. Se utilizează atributul font
<font face = " Arial, serif, monospace ">
• Mărimea fontului
– Pentru mărimea unui font se utilizează atributul size . Valorile acestui atribut pot fi:
– 1, 2, 3, 4, 5, 6, 7 ( 1 pentru cel mai mic font si 7 pentru cel mai mare);
– +1, +2, etc. pentru a mari dimensiunea fontului cu 1, 2, etc. față de valoarea curentă;
– -1, -2, etc. pentru a micşora dimensiunea fontului cu 1, 2, etc. față de valoarea curentă;
<font size="6">Fonturi de marime 6.</font>
Linie orizontală
<hr align=tip width=valoare size=valoare color=nume>
align=aliniere: center, left, right
width=valoare (specifică lungimea (în procente sau pixeli) liniei ex. 50%)
size=valoare (grosimea liniei exprimată în pixeli ex. 3)
color=nume culoarea liniei
Liste
Tagul <UL></UL> permite introducerea unei liste neordonate. Elementele listei se introduc cu tagul <LI> care este de tip container,
dar </LI> este opţional.
Etichetele <UL> şi <LI> permit atributul type cu valorile circle, disc, square.
Exemplu
<UL type="circle">Arbori
<LI type="square">Fag
<LI>Stejar
<LI>Mesteacan
<LI>Frasin
</UL>
Obs. Cercul este plasat doar la elementele Stejar, Mesteacăn şi Frasin.
Tagul <OL></OL> permite introducerea unei liste ordonate. Elementele listei se introduc cu tagul <LI> care este de tip container, dar
</LI> este opţional. De asemenea este permis atributul type cu valorile ”A” pentru A, B, C…, ”a” pentru a b, c…, ”I” pentru I, II, III, ”i”
pentru i, ii, iii, …., 1 pentru 1, 2, 3,….
De asemenea este permis atributul start=”valoare” de unde începe lista.
Tagul <Li> permite atributul value=”valoare” stabileste valoare pentru elemental respective.
Tagurile <DL></DL>, <DT>, <DD> (</DT>, </DD>) permit introducerea unor liste de definiţii. Acestea sunt reprezentate doar pe
două nivele, dar nu sunt marcate ca în cazul anterior.
Aceste liste permit realizarea listelor de imagini.
<DL>
<DT>teatru
<DD>text1
<DD>text2
</DL>
Legături Pentru a crea un link folosim eticheta <a> si </a> ce poate
<a href="adresa-fisier" target="_blank" title="titlu"> avea atributele:
href - adresa fişierului destinaţie
Putem folosi şi adresa URL, fiind adresa completă a paginii target - în ce fereastră se va deschide fişierul destinaţie
<a href="http://www.numesite.ro/fisier.html"> title - o mică descriere asociată legaturii, ce se afişează în
momentul în care mouse-ul se afla deasupra legăturii
Ancore
Acestea sunt puncte de reper (ancore) pentru o deplasare mai
uşoară în cazul unor pagini HTML lungi sau către un loc anume aflat Adresa fişierului destinaţie poate fi exprimată astfel:
într-o altă pagină. nume fisier, dacă se află în acelaşi folder cu pagina curentă
Ancora se defineşte tot între etichetele <a> si </a> dar cu atributul Atributul target poate lua valorile:
name. Pentru a face trimitere către ancora se introduce un link cu _blank pagina va fi încărcată într-o nouă fereastră
atributul href având ca valoare denumirea ancorei. _parent pagina va fi încărcată în fereastra parinte
_top pagina va fi încărcată în fereastra top a cadrului
<a name="nume">Ancora</a> _self pagina va fi încărcată în aceeaşi fereastră
<a href="#nume">Inapoi la ancora</a>
Către ancoră din altă pagină

<a href="pagina.html#nume">Inapoi la ancora din pagina.html</a>
Link din imagine
Putem folosi şi o imagine pentru un link.
<a href="adresa fisier[pagină]"><img src="nume fisir imagine"
width="100" height="75" alt="text care se aplică" border="1"></a>
<TABLE > <TABLE ></TABLE > - inserează tabelul
<TR> <TR> - inserează linia
<TD> celula11</TD> <TD> - inserează celula şi conţinutul acesteia: text, imagine.
<TD> celula12</TD> Tagul <TH> - permite inserarea antetului de tabel (cap
</TR> de tabel). El poate înlocui <TD> pe prima linie.
<TR> Atribute premise de tagurile tabelului:
<TD> celula21</TD> - border – marchează dimensiunea marginilor.
<TD>celula22</TD> Valoarea 0 ridică marginile tabelului (nu mai apar)
</TR> - align – aliniază tabelul în pagină
</TABLE> - width – lăţimea celulei
- height – înălţimea celulei
- vspace şi hspace – stabileşte distanţa faţă de ceea ce
înconjoară tabelul
<TABLE border="3" bgcolor="lime" bordercolor="red" align="left"  cellspacing="valoare" – stabileşte distanţa dintre cellule.
width="50%" height="60" hspace="10" vspace="10" cellspacing="6"  cellpadding="valoare" – distanţa dintre conţinut şi
cellpadding="10" > marginile celulei
<TR>  bgcolor="nume culoare" – culoarea de background
<TD> celula11(orice text si sau imagine -  bordercolor="nume culoare" – stabileşte culoarea
element introdus in celula) bordurilor
<TD> celula12(orice text si sau imagine -
element introdus in celula)
<TR>
</TABLE>
<TABLE border="3" width="50%" height="50"><CAPTION <CAPTION align="tip aliniere">Text pentruTitlu – permite
align="top">Titlu tabel introducerea unui titlu tabelului. Tip aliniere poate fi: top,
<TR> bottom, left, right
<TH> celula11(orice text) Tagul <TH> - permite inserarea antetului de tabel (cap de
<TH> celula12(orice text) tabel)
<TH> celula12(orice text)
<TR>
element introdus in celula) <TD>
celula23(orice text si sau imagine - element introdus in celula)
</TABLE>
text in miscare
<marquee direction="right">TEXT</marquee>
Text in miscare - alternativ
<marquee behavior="alternate">TEXT</marquee>
-coboara
<marquee direction="down">TEXT</marquee>
-la direction mai putem scrie: up, left
- de jos in sus alternativ
<marquee direction="up" behavior="alternate">TEXT</marquee>
-De sus in jos alternativ si de la stanga la dreapta in acelasi timp. Se va obtine o miscare in ziz-zag a textului.
<marquee behavior="alternate" direction="up" width="80%"><marquee irection="right">TEXT</marquee></marquee>
Fotografie. Folosind scripturile de mai sus se pot introduce si fotografii cu sau fara text. Acestea vor fi introduse conform
exemplului urmator.
<marquee>Text <img src="imagine.gif" width="88" height="31" alt="Tutoriale in limba romana"
border="0"></marquee>
Tagul ce permite inserarea unei imagini într-o pagină web este:
<IMG src=”nume imagine.extensie”>
Atribute specifice acestui tag:
align=”tip aliniere”
Tip aliniere poate fi: left, right, bottom (aliniere la bază), top (se aliniază cu prima linie din text), middle (aliniere la
mijloc)
Left, right, bottom permit ca textul să fie dispus în jurul imaginii. Top şi middle nu permit ca textul să fie dispus în jurul
imaginii.
Pentru a centra o imagine putem utiliza una dintre etichetele <CENTER></CENTER> sau <DIV></DIV>
<CENTER><IMG src=”nume imagine”></CENTER>
Sau
<DIV align=”center”> ><IMG src=”nume imagine”></DIV>
alt=”text” permite ca în cazul în care imaginea nu se încarcă sau se încarcă greu sau când cursorul este peste imagine să
apară textul scris în tributul alt.
width=”lăţime” (putem stabili lăţimea imaginii)
height=”înălţime” (putem stabili înălţimea imaginii)
hspace=”distanţa”
vspace=”distanţa”
border=”valoare” daca este 0 anulează bordura existentă.
Cele două atribute hspace, vspace ajută la stabilirea distanţei între imagine şi elementele din jurul ei pe orizontală,
respectiv vertical. Distanţa se stabileşte în pixeli.
O imagine poate fi inserată ca fundal pentru pagină
<BODY background=”nume imagine”> </BODY>
Pe o imagine putem stabili o legătură către un alt element
<A href=”nume_pagina.html”>
<IMG src=”nume_imagine_legatura”></A>
1 HTML> <TITLE>text</TITLE> - numele ce dorim să apară în browser
<HEAD> Elementul BASE
<TITLE>text</TITLE> Tagul <BASE href=”adresa”>
<BASE href=”d:/fotografii/”> Are rolul de a preciza o adresă pentru resurse. Acest tag se scrie în zona HEAD
</HEAD> Obs. Practice se formează D:/fotografii/copil.jpg
<BODY> Analog putem scrie şi o dresă de internet:
…….. <BASE href=”http:/www.paginadeinformare.ro/”
<IMG src=”copil.jpg”>
</BODY>
</HTML>
2 Elementul META
Este folosit pentru a furniza motoarelor de căutare informaţii cu privire la site-ul nostrum. Informaţiile conţinute de acest
tag nu sunt afişate de browser, dar este importantsă fie folosit pentru ca informaţiile conţinute de site-ul nostru să fie
accesibile.
Tagil <META> se găseşte în HEAD
În antet se pot găsi mai multe elemente META
Atributele sale sunt:
NAME – pentru el se pot utiliza câteva cuvinte cheie considerate de noi
CONTENT – are un conţinut variabil în funcţie de valoarea trecută pentru NAME
Exemplu:
Dacă dorim să specificăm numele autorului
<META NAME=”AUTHOR” CONTENT=”Alexandru Ionescu”>
Dacă dorim să specificăm titlul unui document:
<META NAME=”TITLE” CONTENT=”Creşterea păsărilor domestice”>
Dacă dorim să specificăm o înşiruire de cuvinte cheie, după care să fie recunoscut site-ul nostru:
<META NAME=”KEYWORDS” CONTENT=”pasare, domestic, curte,om, gaina”>
De menţionat că se trece forma singular a cuvântului pentru a afişa ţi dacă se face căutare după forma plural a cuvântului
Pentru căutări avansate, ca de exemplu după limbă:
<META NAME=”LANGUAGE” CONTENT=”RO”>
Pentru a afişa textul pe care mtorul de căutare să-l afişeze la listarea paginilor
<META NAME=”DESCRIPTION” CONTENT=”Sait-ul acesta este dedicat creşterii păsărilor domestice”>
Dacă acest lucru nu este trecut motorul de căutare va afişa primele rânduri din pagină.
OBS. Să nu se introducă cuvinte ce nu se regăsesc în fişierul HTML şi de asemenea să nu se repete cuvintele.
3 Elementul SCRIPT – este folosit pentru introducerea de secvenţe program în cadrul paginilor WEB (ex. JavaScript)
4 <HTML> <ADDRESS></ADDRESS> permite trimiterea unui mesaj la
<HEAD> adresa specificată.
</HEAD> Comandă deschiderea Outlook-ului.
<BODY>
<H1 align="center"> Cum trimitem un mail </H1>
<ADDRESS><A href="mailto:adresa_email"> Putet scrie
aici</A></ADDRESS>
</BODY>
</HTML>
Versiunea HTML poate fi:

HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
II. CADRE (FRAMES)
Cu ajutorul cadrelor puteţi afişa mai multe documente HTML în aceeaşi fereastră de browser. Fiecare document HTML este numit
cadru (frame) şieste independent de celelalte documente deschise în fereastră.
Dezavantajele utilizării cadrelor trebuie să ţinem evidenţa mai multor documente HTML, iar pagina principal conține doar împărțirea
ferestrei.
Tagul frameset
- Tagul <frameset> defineşte cum este împărţită fereastra în cadre
- Fiecare frameset defineşte un set de linii sau un set de coloane
- Valoarea liniilor/coloanelor reprezintă porţiunea de ecran pe care o va ocupa fiecare linie/coloană.
Taguri pentru cadre
<frameset> - Defineşte un set de cadre
<frame> - Defineşte un cadru
<noframes>- Defineşte o secţiune fără cadre pentru browserele care nu recunosc cadrele
1)
Se creează pagina principală în care se fac apoi <HTML>
legăturile către paginile care se încarcă în ea în cadrele <FRAMESET cols="20%, *" bordercolor="green">
definite (fiecare cadru are o pagină construită anterior <FRAME src="pagina_a.html" noresize>
către care se face legătura) <FRAME src="pagina_b.html" name="cadru_dreapta"
Împărțim fereastra în două coloane: cea din stânga noresize>
ocupă 20%, iar cea din dreapta restul. </FRAMESET>
În fiecare se încarcă câte o pagină creată special </HTML>
pentru aceasta
2)
Se creează pagina principală (index.html) în care se <HTML>
fac apoi legăturile către paginile care se încarcă în ea în <FRAMESET rows="20%, *" bordercolor="green">
cadrele definite (fiecare cadru are o pagină construită <FRAME src="sus.html" noresize>
anterior către care se face legătura) <FRAMESET cols="20%, *" bordercolor="green">
Aici împărțim fereastra mai întâi în două linii (cea <FRAME src="cuprins.html" noresize>
de sus ocupă 20%, iar cea de jos restul) <FRAME src="central.html" name="cadru_dreapta"
Apoi împărțim a doua linie în două coloane. noresize>
Pentru fiecare dintre cele 3 zone ale ferestrei </FRAMESET>
creăm trei pagini pe care le încărcăm. </FRAMESET>
</HTML>

10 Etichete - HTML

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

10 Etichete - HTML

Încărcat de

Drepturi de autor:

Formate disponibile

HTML – elemente utile

<pre> </pre> introduce textul preformatat

<h1>text tip titlu1</h1> inserează un text tip titlu

<i>text</i> stil cursiv

<b>text</b> stil aldin

<u>text</u> text subliniat

<big> text</big> crește dimensiunea textului comparativ cu

<small> text</small> micșorează dimensiunea textului comparativ

text<sub>indice inferior</sub> pune indice inferior

text<sup>indice superior</sup> pune indice superior

<br> introduce rând nou

<em>text</em> text cursiv /evidențiere

<strong>text</strong> text îngroșat

<mark>text</mark> marchează cu fundal textul

<ins>text</ins> subliniază textul

<del>text</del> afișează un text tăiat

<q>text</q> afișează textul între ghilimele

<blockquote> text</blockquote> textul este afișat indentat

<address> afișează textul cu caractere italice

<cite>text</cite> permite scrierea cursiva a textului în vederea marcării

<kbd>text(tastatura)</kbd> text cu scriere spațiată

<tt> text (teleprinter)</tt> text cu scriere spațiată

Către ancoră din altă pagină

Versiunea HTML poate fi:

S-ar putea să vă placă și