Curs 1 HTML

Limbajul HTML- Static webpages

Style
Legaturi- Link
Liste
 Internet versus World Wide Web
Internet


Schimb de informatii -> calculatoarele sunt inter-conectate ->
retele de calculatoare.

Inter-retele sunt retele de calculatoare conectate intre ele
(retele de retele de calculatoare) – Internet.

World Wide Web Set de servicii sau metode de acces la informatia

stocata pe un calculator prin intermediul retelei internet:

FTP (File Transfer Protocol) pentru transferul fisierelor

Telnet pentru accesul de la distanta la resursele unui calculator

Electronic Mail de mesagerie electronica (e-mail)

World Wide Web este o alta metoda (serviciu) de acces la
informatia stocata pe un calculator aflat oriunde in lume -
Distribuit, Interactiv, Dinamic
 Serviciul World Wide Web

World Wide Web (WEB) - reprezinta un spatiu informational alcatuit

din resurse situate in locatii cunoscute sub numele de noduri.

Nodurile sunt utilizate prin intermediul unui sistem hypertext

folosind modul de identificare URL(Uniform Resource Locator).
 Terminologie Web
IP address: fiecare calculator de pe internet are o unica adresa, numita IP
Internet Protocol adress, o serie de 4 numere intre 0 si 255 , separate de puncte,
adica in formatul _._._._ (4 byte =4 bilioane adrese IP)

TCP/IP: reteaua internet dispune de mijloace de dirijare a pachetelor astfel

încat acestea sa ajunga la destinaţie -Internet Protocol (IP). Reteaua Internet
dispune de mijloace de corectie a erorilor de transmitere a pachetelor -
Transfer Control Protocol (TCP).

DNS: Domain Name System: este un sistem folosit in Interent pentru a traduce
numele domeniilor (ex: www.romtelecom.ro) in adresa IP corespunzatoare.

URL:Uniform Resource Locator un standard de identificare si accesare a

resurselor din Internet. URL concatenează trei elemente:
Nume Protocol Internet utilizat pentru accesarea resursei:
http:// sau ftp:// sau file:// - pentru accesul la fisierele stocate pe calculatorul
local.
Nume Server/Domeniu identificatorul calculatorului care stochează resursa,
format din: nume_calculator.domeniu_internet
Indicator de cale si nume_fisierului destinaţie
Exemplu: http://www.pub.ro/news/index.html
 Terminologie Web

Routers/gateways – directioneaza datele intre adresa IP sursa si adresa IP

destinatie (maxim 30 redirectionari)

Comanda : traceroute www.cnn.co.jp

Listeaza toate numele de domeniu ale routerelor prin care trec datele.

3 masuratori de timp independente (cat a durat ca datele sa ajunga la router) –

proportionale cu distanta fizica intre aceste routere.
 Terminologie Web
Web Page: fisiere speciale ce pot fi interpretate de anumite aplicatii si
contin pe langa text si imagini, filme, sunete, link-uri si a caror extensie
este .html sau .htm.

Web Site: colectie organizata de fisiere (pagini Web), vizibile de

toata lumea formeaza un site web.

Web Server : calculator care ruleaza in permanenta o aplicatie

speciala (httpd) si gazduieste mai multe site-uri web.
Ex:Apache Server, Microsoft Web Server, Oracle Web Server.

Browser: aplicatie care permite vizualizarea paginilor de web, sa

navigheze urmand legaturile dintre ele si sa transfere fisiere redand astfel
toata informatia text, grafica, video si audio inglobata in aceste
documente.
Ex: Internet Explorer, Netscape Navigator, Chrome, Opera, Mozila.
 Accesam un Web Site ?
UTILIZATOR

URL­ul
Afişează paginii Web

Solicită conectarea la server

BROWSER WEB SERVER WEB

Transmite fişierul


Browser de pe calculatorul client se conecteza la un server local (DNS)

Cere adresa IP a paginii de web respective

DNS intoarce clientului adresa IP a paginii respective, de exemplu 1.2.3.4

Clientul trimite o cerere sa afle ce calculator din Internet are adresa 1.2.3.4

Gateways sau Routers: directioneaza date, similar cu sistemul postal

Webserver-ul de pe calculatorul cu adresa 1.2.3.4 recunoaste cererea si trimite fisierul
paginii de web.

Transferul se realizeaza printr protocol de transfer: Hyper Text Transfer Protocol (HTTP)
 In ce limbaj e scrisa o pagina de web ?

Incarcam in Browser o pagina oarecare

CTRL+U sau View/PageSource

HTML -codul sursa

(1989) Tim Berners-Lee a scris primul draft pentru un sistem numit

"World Wide Web"

(1990) Tim Berners-Lee a scris primul browser si primul server WEB

elaborand specificatiile pentru URL, HTTP, HTML, XML, CSS,
XHTML

(1994) Tim Berners-Lee a creat World Wide Web Consortium W3C

(2017) - Sir Tim Berners-Lee primesteTuring Award

“The Web is considered one of the most influential computing
innovations in history”.
 HTML

HTML inseamna Hyper Text Markup Language

HTML nu este un limbaj de programare. Nu utilizeaza
instructiuni (ca C-ul/ Pascal-ul), nici comenzi ca (FoxPro-
ul). HTML este un schelet care da paginii de web o
structura.

HTML limbaj de marcaje (de descriere) semntice, are o
anumita sintaxa bazata pe etichete/ tags. <> </>

Continutul documentului descris prin diferite tag HTML

Fisiere HTML = Pagini Web
 HTML


HyperText inseamna text asociat cu link-uri – referiri
catre o noua pagina de web.

MarkupLanguage e un limbaj de comunicare in care text-
ul e asociat cu link-uri, imagini, tabele, liste etc.

CSS - Cascading Style Sheets limbaj folosit pentru a
descrie prezentarea – style unui document scris in HTML

Retineti ! HTML - scheletul CSS – hainele, machiajul
 Cum edităm o Pagina de Web ?
Orice editor de text poate fi folosit pentru a crea pagini Web.

Unele editoare de text oferă mai multe facilități pentru verificarea erorilor,
colorarea sintaxelor și salvarea unor tipuri de scriere prin completarea
lucrurilor pentru dvs :
Sublime Text – foarte popular cu dezvoltatorii (necesită de curbă de învățare)
Notepad – peWindows PC
Visual Studio - pe Windows PC
TextEdit - pe Mac, dar asigurați-vă că salvați ca text simplu, nu ca fișier .rtf sau
.doc.
XCode - dezvoltatorii de Mac pot fi familiarizați cu XCode
BlueGriffon este un editor de conținut WYSIWYG ("Ceea ce vezi este ceea ce
primești") pentru World Wide Web. Powered by Gecko, motorul de randare al
Firefox, este o soluție modernă și robustă de editare a paginilor Web în
conformitate cu cele mai recente standarde Web.
Atom este un alt editor de platforme, creat de GitHub.
Vim sau Emacs sunt editorae excelente pe care Web-ul a fost construit, dar dacă
nu sunteți deja familiarizat cu acestea, nu este timpul să încerca ți.
 Editoare Online

JsBin - http://jsbin.com/ - instrument open source pentru depanarea

dezvoltării în colaborare. Acest instrument este foarte simplu, trebuie doar să
deschideți să examinați codul, să examinați rezultatul etc, pute ți modifica
exemplele după cum doriți, de asemenea, le puteți modifica / clona / salva /
împărtăși.

Tutorialele (sau pe YouTube):

http://code.tutsplus.com/tutorials/javascript-tools-of-the-trade-jsbin--net-36843)

Rețineți că este întotdeauna mai bine să vă conectați (este gratuit) dacă nu dori ți
să pierdeți contribuția / munca personală.
 Editoare Online
CodePen - https://codepen.io/ este un editor de cod HTML, CSS, JavaScript
cu care previzualizări codul în browser. Ajută la testarea dispozitivelor
încrucișate, programarea în pereche.

CodePen este un serviciu excelent, puteți începe a coda imediat, deoarece nu vă

cere să descărcați nimic și îl puteți accesa, împreună cu proiectele dvs. salvate
de la orice browser web.

Un articol interesat dacă utilizați CodePen:

10 Cool Things You Can Do with CodePen and JavaScript [Chris Coyier, 13
iunie 2016]:

https://www.sitepoint.com/cool-things-codepen-javascript/

Există multe alte instrumente folositoare, cum ar fi JSFiddle și Dabblet

(instrumentul Lea Verou folosit pe larg pentru CSS).
 Cum modificam o Pagina de Web
Manual, lansati in executie editorul de text Notepad sau Visual Studio


– Start→Programs→Accessories→Notepad
– Introduceţi textul.
– Daca salvam fisierul cu numele index.html, devine pagina default a
browser-ului accesand-o prin double click. Putem salva fisierul si sub alt
nume, dar cu extensia .html sau .htm

sau


Cu ajutorul editoarelor HTML precum Visual Studio, Homesite, Adobe
Golive, Microsoft Frontpage, Macromedia Dreamweaver (aplicaţia cea mai
apreciata de profesionisti), CoffeeCup HTML Editor, Netscape Composer.

Porniti browser-ul Microsoft Internet Explorer;



– File→Open si deschideti fisierul salvat cu extensia .html

– Pentru a aduce modificari fisierului, executati click-dreapta pe suprafata
acestuia si din meniul contextual alegeti View Source si veti obtine codul-
sursa. Dupa modificare fisierului, salvati-l.
 HTML – notiuni de limbaj

HTML este un text semantic adnotat folosind un limbaj
special pentru a adauga noi specificatii textului.

Tag – incep cu caracterul < si se incheie cu caracterul >
<item> - inceputul unei secvente
</ item > - sfarsitul unei secvente
< item /> - gol/ vid

Element – structura ce cuprinde un tag de început și de
sfârșit sau un tag vid
<item> text text </item>
<item / >
Informația cuprinsă intre tag-urile de început și sfâr și se
numește continutul elementului.
 Structura generala a Paginilor de Web

<!DOCTYPE html>
<html>
<head> <!-- Acesta e antetul doar, cateva
etichete sunt permise in aceasta parte -->
<title> Titlul documentului </title>
</head>
<body> <!--Continutul actual al paginii, text,
imagini, link-uri, tabele -->
</body>
</html>
 Tag-ul comentariu

Browser-ul nu afiseaza/interpreteaza comentariile si spatiile

libere din documentele HTML.

Comentariile incep cu tag-ul <!- -, pot contine orice caracter si se

termina cu tag-ul -- >.

<!-- Acesta este un comentariu -->

Ca regula generala trebuie plasat fiecare comentariu pe o linie

separata şi este preferabil sa se evite in interiorul comentariului
utilizarea caracterelor speciale de tipul <, >, & sau ! Nu este
indicat să se includă alte tag-uri HTML între tag-urile de
comentariu.
 Versiuni HTML
HTML 1.0 (1991) – notiunea de hypertext (un document poate
referi alt document). Primul browser Mosaic

HTML 2.0 (1995) - tabele, image maps, incarcarea fisierelor,

limbaj international. Browser-re Netscape si Internet Explorer

HTML 3.0-3.2 (1997) – frame-uri, applets, text in jurul imaginilor,

elemente de text, JavaScript si elemente de CSS

HTML 4.0- 4.01(1999) – s-a inlaturat formatarea specifica

browserului, accent pe CSS

XHTML 1.0 (2000) – standardizare.

HTML5 (2014) – noi elemente si atribute. Standardul viitorului.

 XHTML

Browser : calculatoare, telefoane mobile, diverse dispozitive mici

Initial limbajul HTML a fost conceput astfel incat prin tag-uri sa se
defineasca continutul si nicidecum tag-urile sa fie folosite pentru
formatarea documentului, font, color, size etc. - XHTML
XHTML- versiunea mai “curata” si mai stricata a limbajului
HTML 4.01

XHTML Extensible HyperText Markup Languge


XML Extensible Markup Language limbaj de marcare destinat sa
transporte si stocheaze date, nu are tag-uri predefinite, poate fi
interpretat atat de oameni cat si de masini.

Combinatie intre HTML (doar afiseaza) si XML(doar descrie)

Nu foarte diferit de versiunea HTML 4.01
 HTML versus XHTML
XHTML elementele obligatorii:

<! DOCTYPE html>

<html>
<head>
<title> </title>
</head>
<body>
.....
</body>
</html>
 HTML versus XHTML


XHTML elementele trebuie inchise corect (s-a adaugat un spatiu
liber inainte />)

XHTML documentul trebuie sa aiba un singur element radacina
<html>

XHTML elementele trebuie sa fie scrise cu litere mici

XHTML elementele trebuie sa fie “properly nested” corect
imbricate

XHTML numele atributelor trebuie scrise cu litere mici (width),
iar valorile atributelor intre “” . Minimizarea atributelor e
interzisa(<option selected=”selected”/>,
<input disabled=”disabled” /> )

XHTML impatit in 32 Module- seturi bine definite de elemente ce
pot fi folosite separat in diverse aparate mici sau aplicatii mai
complexe.
 W3C Validare
De peste 15 ani, W3C a dezvoltat și găzduiește unelte gratuite și
open source folosite în fiecare zi de milioane de dezvoltatori web și
designeri web:
Validatorul W3C https://validator.w3.org/ verifică validitatea
marcării diferitelor formate de documente web, cum ar fi HTML
https://validator.w3.org/docs/help.html#validation_basics

Validatorul CSS verifică documente CSS (Cascading Style Sheets)

și documente (X)HTML care utilizează foi de stil CSS.
https://jigsaw.w3.org/css-validator/

Unicorn este validatorul unificat al W3C, care vă ajută să

îmbunătățiți calitatea paginilor Web prin efectuarea unei varietăți de
verificări. Unicorn colectează rezultatele validatorilor HTML și CSS,
precum și alte servicii utile, precum internaționalizarea, feedurile
RSS / Atom și anteturile http.
 HTML 4 versus HTML 5

HTML5 este noul standard din 2014 suportat de toate browserele

HTML5 noile elemente vor fi bazate pe HTML, CSS and
JavaScript (eliminarea/inlocuirea unor elemente HTML4/HTML5)
Exemplu: <acronym> / <abbr>

HTML5 trebuie sa fie independent de „device”

HTML5 reduce necesitatea plugins externe (ex: Flash)

HTML5 mai multe elemente pentru inlocuirea scripturilor

In HTML5 declaratia <!DOCTYPE html> obligatorie!

In HTML5 declaratia de encodare a caracterelor simplificata

<head>
<meta charset="UTF-8">
</head>
 HTML 5

HTML5 introduce elemente noi pentru o mai buna manipulare si

structura, pentru desenare si pentru continutul media:

• Semantice (8): <header>, <footer>, <article> ,<section>, <nav>,

<main>, <aside> si <figure>
• Multimedia <video> and <audio>
• Controale noi pentru: calendar, date, time, email, url, search
• Grafice <svg> si <canvas>

HTML5 API's (Application Programming Interfaces):

Geolocation , Drag and Drop ,Local Storage, Application Cache ,

Web Workers , SSE
 HTML5
Toate documentele trebuie sa aiba obligatoriu Document Type
Definition (DTD), adica o declaratie <!DOCTYPE html>

- este intotdeauna in prima linie a documentului, inainte de <html>

- <!DOCTYPE html > nu e un tag al limbajului HTML

este o instructiune pentru browser, set de reguli ptr a afisa corect
informatia.

- declaratia <!DOCTYPE html> NU este case sensitive.

Exemplu HTML4:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 HTML -tags
Tag-uri/etichetele:
<numeTag> continut </numeTag>

cuvinte cheie sau NumeTag, delimitate de paranteze
unghiulare, de ex: <p>, <html>, <h1>

de obicei sunt in pereche, tag de inceput / deschidere
<body> si tag de sfarsit/inchidere </body>

Tag-ul de deschidere poate avea un set de atribute ce
adauga informatie:

<NumeTag Atribute=”valoare”> Textul afectat de acest

tag </NumeTag>
 HTML -tags
Element tot ceea ce e cuprins intre <NumeTag> DA </NumeTag>
Tag-urile sunt de 2 feluri:

elemente vide au efect imediat in punctul din document in
care apar, deschidem si inchidem imediat <NumeTag />,
Exemplu: <br /> Insereaza o linie noua
<hr /> Inserează o linie orizontala in locul in care apare
<img src="poza.gif" /> Specifica inserarea unei imagini.

elemente nevide sunt in pereche, de inceput si de sfarsit, intre
care apare textul afectat. Ele au efect numai asupra textului inclus
între ele
Exemplu: <i>Acest text va fi afişat italic</i>

Tag-urile pot si imbricate: pot fi utilizate şi în interiorul altor tag-

uri
<Tag1><Tag2>Textul afectat de tag</Tag2></Tag1>
 HTML -atributul tag-ului
Atributele adauga informatie modificand comportamentul unui tag

Atributele au nume si pot lua anumite valori, avnd sintaxa:

NumeAtribute=”valoare”

Atributele sunt intotdeauna specificate in tag-ul de inceput

Dacă în tag există mai multe atribute, ele trebuie separate prin
spaţiu.
<NumeTag NumeAtribut="Valoare">Textul afectat de tag
</NumeTag>
Exemplu:<img src="poza.gif" alt="Nu s-a gasit poza.gif" />

Intotdeauna se folosesc " " , doar in cazuri speciale folositi ' '
Exemplu: <p title='John "ShotGun" Nelson'> Porecla John </p>
 HTML5 -atributul tag-ului

Oricare din aceste variante este acceptabila in HTML5:

Empty <input type="text" value="Vasile" disabled>

Unquoted <input type="text" value=Vasile>

Double-quoted <input type="text" value="Vasile Stanescu">

Single-quoted <input type="text" value='Vasile Stanescu'>

 Reprezentare Hexazecimala a Culorilor

<body bgcolor=”blue”> <!--varianta depasita--> </body>

Valoarea poate fi : “red”, “green”, “blue”, “yellow” etc...ptr alte
nuante folositi reprezentarea numerelor in hexazecimal.

O culoare reprezentata in hexazecimal are nevoie de 3 octeti: o

combinatie de Red, Green, Blue - RGB
(0..255,0..255,0..255) – 255*255*255 = 16 milioane de culori
Exemplu: negru #000000 RGB(0,0,0)
alb #ffffff RGB(255,255,255)
rosiatic #600000 RGB(96,0,0)
gri #606060 RGB(96,96,96)

In HTML reprezentarea hexazecimala incepe cu #.

 Structura generala a Paginilor de Web

<!DOCTYPE html>
<html>
<head>
<title> Titlul documentului </title>
<meta charset="UTF-8">
</head>
<body> <!--Continutul actual al paginii, text,
imagini, link-uri, tabele -->
</body>
</html>
 Setul de caractere HTML
Pentru a afisa corect limbajul HTML, browserul trebuie sa stie
ce set de caractere sa foloseasca:

ASCII suporta numerele (0-9), litere (A-Z), si cateva caractere

speciale: ! $ + - ( ) @ < > .
ANSI (Windows-1252) setul de caractere Windows. Suporta
256 coduri de caractere diferite.
ISO-8859-1 set de caractere ptr HTML4. Suporta 256 coduri
de caractere diferite.
Deoarece ANSI si ISO erau limitate, setul de caractere UTF-8
este folosit in HTML5.
UTF-8 (Unicode) acopera aproape toate caracterele si
simbolurile din lume.
 <meta> HTML4 vs HTML5

Pentru a afisa corect limbajul HTML, browserul trebuie sa stie

ce set de caractere sa foloseasca:

HTML4 : <meta http-equiv="Content-Type"

content="text/html;charset=ISO-8859-1">

HTML5: <meta charset="UTF-8">

 Entitati HTML

Caracterele rezervate limbajul HTML (<, >, & ) trebuie

inlocuite cu entitati HTML.

Caracterele care nu sunt pe tastatura pot fi inlocuite cu entitati

Sintaxa : &nume_entitate sau &#numar_entitate

Exemple: < &lt &#60 ; > &gt &#62;

Entitatea HTML non-breaking space: &nbsp; adauga un

spatiu liber (nu trecerea la o noua linie )
 Simboluri HTML

Simbolurile matematice, tehnice nu sunt pe tastatura, deci ele

pot fi inlocuite cu entitati HTML.

Exemple:

∀ &#8704; &forall; ORICARE

∃ &#8707; &exist; EXISTA
∈ &#8712; &isin; APARTINE
∑ &#8721; &sum; SUMA

Γ &#915; &Gamma; GAMA

→ &#8594; &rarr;
€ &#8364; &euro; EURO
 Prima mea Pagina de Web

<!DOCTYPE html>
<html>
<head>
<title> Cursul de informatica </title>
<meta charset="UTF-8">
</head>
<body> Tag-ul title este obligatoriu ptr orice HTML
deoarece: defineste titlul in tab-ul browser-ului,
furnizeaza titlul cand pagina e adaugata in Favorites,
afiseaza titlul in paginile rezultate in procesul de search
</body>
</html>
 Structura elementul <head> </head>

Acest element contine informatii despre document (date despre
date), cum ar fi titlul său, cuvinte cheie utilizabile de motoarele de
cautare, descrierea documentului si style-sheet-uri asociate/utilizate

Aceste metadate nu sunt afisate de browser

Poate contine urmatoarele tags:
<title> titlul documentului
<link> defineste relatiile documentului propriu-zis cu alte
documente auxiliare
<base> defineste o adresa de default si un default target
(adica unde sa se deschida link-ul) pentru toate link-
urile dintr-o pagina
<meta> defineste un set de „metadate“=date auxiliare
utilizate in diverse alte scopuri: cuvinte cheie, autor,)
<script> defineste un script client-side (secventa de
instructiuni ce se executa în client)
<style> defineste stilurile de document (style-sheet) folosite
in document
 Structura - elementul <body> </body>
Elementele ce apar în corpul unui document sunt de tip bloc ,
tip inline sau tip nedefinit (pot fi atat inline cat si block).Tipul
elementului defineste modul de afisare.
Elemente de tip bloc:
întotdeauna ocupa întregul spațiu disponibil pe ecran
continutul elementului pe o linie noua
 Structura - elementul <body> </body>
Elementele de tip bloc :
-containere de text:
<main>, <article>, <aside>, <footer>, <header>
<p> definirea unui paragraf
<div>definirea unei diviziuni logice de text
<pre>definirea unui text preformatat
<blockquote>definirea unui citat de dimensiuni mari
<address> definirea unui informatii specifice de adresa
<br />
<button>, <canvas>, <caption>
-tip header <h1..h6>
-definesc (sau sunt strans legate de) liste <dd>, <dl> <dt>
-definesc tabelele
-alte elemente
<form> definirea unui formular pentru a introduce date
<frameset> definirea unui „frameset“
 Structura - elementul <body> </body>
Elemente de tip inline:
întotdeauna ocupa doar spațiul necesar pe ecran
mai multe elemente pe o linie, dacă nu încap se face „ wrap” - unul
în continuarea celuilalt
 Structura - elementul <body> </body>
Elemente de tip inline:
-de marcare logica a proprietatilor unei portiuni de text
<em> text scos in evidenta
<strong>text puternic scos in evidenta, etc
-de marcare fizică a proprietăţilor unei porţiuni de text
<i>italic
<b>bold
<s>subliniat
- de marcare a proprietatilor speciale ale unei portiuni de text
<a> anchor (ancoră, legătură hypertext)
<img> imagine
<bdo> redefinirea directiei in care se citeste textul
- de definire a controalelor din interiorul unui formular
<select> lista de selectie
<textarea> camp de introducere a unui text
<label> eticheta unui camp
<button> buton
<option> lista de selectie a unor optiuni de meniu
 Elemente bloc vs. inline

Elementele de tip block intotdeauna adauga o linie noua si ocupa
toata latimea disponibila
<div>, <h1>...<h6>, <p> si <form>

Elemente inline ocupa spatiul minim necesar
<span>, <img>, <a>

Exemple:
<div style="background-color:#670067; color:white;
padding:20px;">
<h3> Literatura universala</h3>
<p> Alegeti o carte din literatura japoneza </p>
</div>

<h1> Ce<span style="color:red">carte</span> citesti? </h1>

 Structura - elementul <body> </body>

Elemente de tip nedefinit (pot fi atat inline cat si block).

Daca sunt utilizate ca elemente inline (adică sunt in interiorul unui
alt element inline) ele nu trebuie sa contina nici un element de tip
bloc:
<map> definirea unei imagini senzitive (prelucrata client-side)
<area> zona activa inauntrul unei imagine senzitive
<param> definirea parametrilor unuiobiect sau applet Java
<del> defineste text sters
<ins> defineste text inserat
<object> includerea unui obiect
<script> includerea unui script client-side
<iframe> definirea unei frame inline (in punctul în care apare
elementul)
 Tag-uri de tip bloc/
Titlu de capitol/sectiune <h1>
HTML construit pe baza ierarhie de informatii


Tag heading <h1>..</h1> ... <h6>..</h6> - 6 nivele de titluri
Browsers adauga automat o linie goala inainte si dupa aceste tag-uri.

Exemplu:
<body>
<h1> CEO- Titlu de marimea cea mai mare</h1>
<h2> VP- …. </h2>
<h3 >Director - Titlu de marimea mijlocie</h3>
<h6> Secretara - Titlu de marimea cea mai mica</h6>
</body>
</html>

Atributele de alieniere “right”,”left“,”center” sunt depasite

Search engines folosesc tagul heading pentru a indexa structura
documentului HTML.
 Tag-uri de tip bloc/ Containere de text
tag-ul Paragraf <p>

Tag-ul <p> si </p> face trecerea la un paragraf nou
Browser-ul adauga automat o linie goala inainte si dupa titlu.
<p> Continutul paragrafului </p>

In combinatie cu tag-ul <br/> se realizeaza trecerea la o linie noua
Exemplu:
<html>
<head><title>Exemplul de Paragraf</title></head>
<body>
<p>Un<br />a para<br />graf intrerupt</p>
<p> Numarul de linii dintr-un paragraf depinde de
marimea ferestrei browser-ului.Daca redimensionam fereastra browser-
ului, nr de linii ale paragrafului se schimba. </p>
</body>
</html>
 Tag-uri de tip bloc/ Containere logice
tag-ul <div>

Tag-ul <div> si </div> folosit la formatarea şi delimitarea unui
bloc de text.
Browser-ul adauga automat o linie goala inainte si dupa titlu.

Atributul style afiseaza o sectiune/ bloc de text albastru-verzui
Exemplu:
<html>
<head><title>Exemplul de Div</title></head>
<body>
<h3>Un titlu oarecare</h3>
<p>Un paragraf oarecare</p>
<div style=" background-color:#66ff99;color:#3C00F4;">
<h3>Text scris in culoarea setata</h3>
<p>Textul e format dintr-un titlu si un paragraf.</p>
</div>
</body>
</html>
 Tag-uri de tip bloc/ Text Preformatat tag-ul <pre>


Tag-ul <pre> si </pre> folosit la afisarea unui bloc de text ca in
codul sursa, toate spatiile goale vor fi afisate.
Folosit pentru afisarea codului programelor, a poeziilor
Exemplu:
<html>
<head><title>Text Preformatat</title></head>
<body>
<pre>
<b>A venit, a venit toamna </b>
<i>Acopera-mi inima cu ceva</i>
</pre>
</body>
</html>
 Tag-uri de tip bloc/ Indentare tag-ul <blockquote>

Tag-ul <blockquote> si </blockquote> folosit la afisarea
citatelor lungi. Blocul de text e indentat cu un TAB fata de ambele
margini (stanga si dreapta) ale spaţiului disponibil (pagina, celula
de tabel, etc.)

Tag-ul <q> si </q> folosit la afisarea citatelor scurte (adauga „”)
Exemplu:
<html>
<head><title>Citate</title></head>
<body>
Textul urmator este indentat:
<blockquote>Acest bloc de text este indentat cu un TAB fata de
ambele margini ale paginii.</blockquote>
<q> Cogito ergo sum</q>
</body>
</html>
 HTML5 elemente semantice
Elementele semantice funcționează identic ca cele de tip bloc, dar
cu noi posibilități de administrare și modificare a aplicației web –
se poate infera informație din pagina (puteți face search doar într-
un anumit element):

<header> , <footer> , <nav>, <section>, <article> , <aside>,

<details>, <figure>, <figcaption>, <main>, <mark>,
<summary>, < time>

Avantaje: abilitatea de a utiliza CSS pentru a proiecta elementul

semantic direct, fără a necesita clase suplimentare CSS.
Exemple: flexbox în CSS pentru a pune elementul <aside> de o
parte, pe partea dreaptă a paginii web.
CSS Media Queries pentru a re-aranja elementele semantice pentru
un browser mobil.
 HTML5 <header> <section> <main> <footer>
<header> defineste sectiunea din partea de sus a paginii sau un set
de link-uri de navigatie (poate contine tag <h1>-<h6>, logo,
icoane).Un document poate avea mai multe elemente <header>
<header> nu poate fi plasat in tag-urile <footer>, <address> sau in
alt tag <header>.
<footer> defineste sectiunea din partea de jos a paginii (autor,
copyright, contact, diverse link-uri) . Un document poate avea
mai multe elemente <footer>.
<main> defineste continutul principal al documentului si trebuie
sa fie doar un singur element <main> in document. Informatia
din interior trebuie sa fie unica, nu trebuie sa se repete in zonele
laterale, link-uri de navigatie sau in formulare de search.<main>
nu e un descendant din <article>, <aside>, <footer>,
<header> ,<nav>
<section> defineste o sectiune in document, cum ar fi capitole,
headers, footers, sau orice alta sectiune a documentului.
 HTML5 <article> <aside>
<article> o sectiune de sine statatoare, poate fi distribuita
independent de restul site-ului. Pot exista mai multe elemente
<article> in acelasi document. Folosit in postari pe blog, forum
comentarii:
Exemplu:
<article>
<h1>Google Chrome</h1>
<p>Google Chrome is a free, open-source web browser
developed by Google, released in 2008.</p>
</article>

<aside> defineste continut suplimentar si e in raport cu continutul

din jur
 HTML5 <time>

Microformats – metadate care sunt machine- readeble, pot adauga

CSS sau JavaScript pe aceste elemente

Exemplu:
<body>
<p> Aveți următoarea programare
<time datetime="2015-12-13T08:30:00-05:00">
<strong>12 Decembrie la 08:30 AM</strong>
</time>.
</p>
</body>

Am adaugat informație care poate fi prelucrata, chiar dacă nu e

nicio diferența în afisare. Pot face search după <time> și pot
adauga informația în aplicația de calendar.
 HTML5 <figure> <figcaption>

Elementul <figure> marcheaza o poza/imagine/grafic in document

Elementul <figcaption> adauga explicatie figurii

<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304"
height="228" />
<figcaption>Fig1. - A view of the pulpit rock Norway.</figcaption>
</figure>

Pot aplica CSS pe elemetul <figure> pentru a-l stiliza si sa pastrez

acelasi stil pe toate imaginile din pagina/site.
 Tag-uri de tip inline/ tag-uri logice


Indica doar cum anume sa fie utilizat textul marcat NU si cum
anume sa fie afiasat - asemanatoare tag-urilor folosite la
marcarea paragrafelor sau titlurilor.

Tag-urile stilurilor logice indica doar faptul ca textul este o
definitie, o bucată de cod sau doar o portiune de text care trebuie
scoasa in evidenţă in raport cu contextul.

Tag-urile stilurilor logice nu sunt invechite, dar obtinem efect
mai bun cu CSS
 Tag-uri de tip inline/ tag-uri logice

<em>Text accentuat</em>
<strong>Text puternic accentuat</strong>
<dfn>Definitie (cuvant care va fi definit)</dfn>
<code>Secvenţă de cod afişată cu font fix (ex Courier)</code>
<samp>Esantion, similar cu code</samp>
<kbd> Text tastat de utilizator</kbd>
<var>Variabila</var>
<cite>Citatie</cite>
<acronym title=”Org Nat Unite”>O.N.U. </acronym> HTML4
<abbr>O abreviere </abbr> HTML5
<mark> Text marcat</mark>
<ins>Un text subliniat)</ins>
<del>Text marcat ca sters </del>
_{Text scris ca indice}
^{Acesta e un exponent}
 Tag-uri de tip inline/ tag-uri fizice

Indica browser-ului cum anume sa fie afisat textul marcat.

Utilizarea stilurilor fizice are neajunsul ca daca browser-ul nu
poate afisa acel stil el il va substitui cu un altul.

Tag-urile stilurilor fizice nu sunt invechite, dar obtinem efect mai
bun cu CSS
<b> Text ingrosat (aldin)</b>
<i> Textul italic (cursiv) </i>
<u> Text subliniat </u>
<big> Text afisat cu un font mai mare decat restul </big>
<small> Text afisat cu un font mai mic decat restul </small>
<tt> Text monospatiat </tt>

Imbricare
<p><b>bold</b>, <i>italic</i>, <b><i>bold italic</i></b>,
<tt>teletype text</tt>, si <big>big</big> si
<small>small</small> text.
 Legaturi/link-uri <a>

Legatura/link-ul (hyperlink-ul) - constructie de baza - poate fi
definita ca o conexiune de la o resursa Web la alta.

Legatura/link are doua capete zise si ancore - sursa/destinatie si o
directie. Ancora destinatie poate fi orice resursa Web :un
document HTML, un element din interiorul unui document
HTML, o imagine, un clip, un sunet, un program, etc.

Tag-ul <a> si </a> defineste un (hyper)link.

Implicit link-urile apar in toate browserele asa:
- un link ne-vizitat este subliniat si albastru
- un link vizitat este subliniat si purple
- un link active este subliniat si rosu
 Atributele tag-ului <a> - partea I

name - marcheaza destinatia legaturii, folosit, de obicei, pentru
navigarea în cadrul aceleiaşi pagini.

href - URL-ul fisierului. Adresa poate fi absoluta sau relativa.

type indica tipul fisierului ( .html, audio, video etc. )

title furnizeaza o scurta descriere a fisierului.

target precizeaza fereastra in care va fi incarcat fisierul. Acest
atribut accepta urmatoarele valori:
"_blank" : fisierul se incarca intr-o noua fereastra, fara nume
"_self" : fisierul se incarcă in frame-ul/cadrul curent
"_top" : fisierul se incarca in intreaga fereastra a browser-ului
"_parent": fisierul se incarca in fereastra parinte a ferestrei care
contine link-ul
accesskey ia o valoare care este un caracter. Link-ul poate fi accesat
apasand simultan tasta "Alt" si tasta corespunzatoare caracterului
respectiv.
 Atributele tag-ului <a> - partea II


Atributele shape si coords specifica forma si coordonatele unui
link. Ofera posibilitate utilizatorului sa specifice o harta de imagini
senzitive (client-side image maps, prin intermediul elementului
<object>), un numar oarecare de zone in interiorul unei imagini si un
set de documente/resurse catre care sa indice fiecare zona anterior
definita.
Aceste atribute accepta valorile:
-rect - regiune dreptunghiulară, coords="left, top, right, bottom"
-circle - cerc, coords="center-x, center-y, radius"
-poly - un poligon, coords="x1, y1, x2, y2, ..., xN, yN"
-default - specifica intreaga imagine, sau ce a ramas nedefinit
 Atributele tag-ului <a> - partea III


Coordonatele sunt relativ la coltul stanga sus al imaginii. (0,0)

Coordonatele pot fi exprimate in pixeli sau procente.

O rază a unui cerc data ca procent este calculata relativ la cea mai
mica dimensiune a imaginii/obiectului (latimea sau inaltimea).

Daca doua sau mai multe regiuni se suprapun are prioritate cea
definita intîi.

Pentru a crea imagini de harti care merg in toate browserele folositi
elementul <area> inauntrul elementului <map>.
 Tag-ului <map> <area> si <img>
Atributul usemap este asociat cu atributul name (sau id-ul)
elementului <map> si creaza o relatie de legatura intre elementul
<img> si <map>.

Exemplu:
<img src="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap" />

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm"
alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm"
alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm"
alt="Venus">
</map>
 Tag-ul <a>


Tag-ul <a> poate fi folosit in doua moduri
link destinatie
ancora

Link destinatie se creaza o legatura catre alt document folosind

atributul href si a carui valoare este adresa altui site sau
fisier.
<a href=”http://www.romlit.ro/”>Revista Romania Literara</a>
<a href="contact.html">Contact</a>
<a href="/cale/orice.html">Vizit Romania</a>
 Exemple Tag-ului <a>


<a href="http://www.romlit.ro/" target=”_blank”>
htpp://www.google.com/</a>
Atentie! Link-ul apare http://www.google.com/ dar ancora e la
site-ul www.romlit.ro ce se deschide intr-o noua fereastra fara
nume


Mail to link: <a href="mailto:webmaster@example.com">Send
e-mail</a>
Link-ul apare Send e-mail, si se initiaza protocolul de transfer
mailto si nu http.
 Exemple Tag-ului <a>

O imagine ca link:

<p>Aceasta e sigla ziarului RomaniaLiterara:

<a href="http://www.hotnews.ro">
<img src="logo_romlit.gif" width="50" height="50"/> </a>
</p>

Un link catre o imagine:

<a href="../images/me.jpg">Poza mea</a>

Link-ul apare Poza mea si se acceseaza imaginea me.jpg din
directorul/images.
 Tag-ul <a>
Folosind atributul id se creeaza o ancora, o legatura intre un anumit
punct al unui document şi un alt anumit punct al aceluiaşi
document sau al altui document.
Salt inauntrul aceluiasi document:
<a id="cuvînt_cheie">Paragraf tintă</a>
<a href="#cuvant_cheie"> Ancora e paragraful tinta</a>
Exemplu:<h2><a id=”C2”>Capitolul 2</a></h2>
<p> ba bla bla</p>

<p><a href="#C2"> Ancora e Capitolul 2</a></p>
Salt inauntrul altui document:
<a href="/cale/doc.html#cuvint_cheie">Salt la paragraful
dorit</a>
Exemplu:<h2><a id=”capitol3”>Capitolul 3</a></h2>
<a href="carte.html#capitol3">Capitolul 3</a>
 HTML5 <nav>

<nav> defineste link-uri de navigatie

Exemplu:
<nav>
<a href="www.braila.ro">Braila</a> |
<a href="www.brasov.ro">Brasov</a> |
<a href="www.const.ro">Constanta</a> |
<a href="www.cluj.ro">Cluj</a>
</nav>

Nu toate link-urile unui document trebuie sa fie in interiorul

elemetului <nav>

Elementul <nav> e principalul bloc de navigatie.

 Liste

Exista trei tipuri standard de liste:


neordonate <ul> </ul>

ordonate <ol> </ol>

liste de definiţii (glosar) <dl> </dl>
 Liste

Exista trei tipuri standard de liste:


neordonate <ul> </ul>

ordonate <ol> </ol>

liste de definiţii (glosar) <dl> </dl>
 Liste Neordonate <ul>
Fiecare element este introdus in lista cu ajutorul tag-ului <li> </li>

<ul type=”value”>
<li> Primul element al listei neordonate</li>
<li> Al doilea element </li>
<li> A1 treilea element</li>
</ul>

Browser-ul afiseaza elementele listei:


nenumerotate

afisate identat, unele sub altele

precedate de un semn specific definit de atributul type care
poate avea valorile: disc (cerc umplut/plin) , square, diamond
circle circumferinta unui cerc

Listele neordonate pot contine text, line breaks, imagini, links, alte
liste, etc.
 Liste Neordonate Imbricate
Se insereaza o noua lista in interiorul primei liste.
Exemplu:
<html>
<body>
<ul>
<li>Salate</li>
<li>Aperitiv</li>
<li>Ciorba
<ul>
<li>De burta</li>
<li>De perisoare</li>
</ul>
</li>
<li>Desert</li>
</ul>
</body>
</html>
 Liste Ordonate <ol>

Fiecare element este introdus in lista cu ajutorul tag-ului <li>

<ol type=”value”>
<li> Primul element al listei neordonate</li>
<li> Al doilea element </li>
<li> A1 treilea element</li>
</ol>

Browserul numeroteaza elementele listei secvential cu numere sau

litere in functie de valoarea „A” „a” atributului type.

Listele ordonate pot contine text, line breaks, imagini, links, alte
liste, etc.
 Liste Ordonate Imbricate


Se insereaza o noua lista in interiorul primei liste.


Se pot insera liste neordonate in interiorul celor ordonate si
viceversa.


Felul în care apar afişate listele imbricate diferă mult de la un
browser la altul.
 Liste de definitii/ glosar <dl>
Fiecare element este introdus in lista cu ajutorul tag-ului <dt> -
termeni ce trebuie definiti, iar definitiile corespunzatoare se fac
cu tag-ul <dd>.

<dl>
<dt> Termen care urmează să fie definit </dt>
<dd> Definiţia termenului </dd>
<dt> Alt termen </dt>
<dd> Altă definiţie </dd>
</dl>
Elementele listei pot contine text, line breaks, imagini, links, alte
liste, etc.
Browserul numeroteaza elementele listei secvential cu numere sau
litere in functie de valoarea „A” „a” atributului type.
 Exemplu legaturi tip ancora in liste
<h1> Meniu </h1>
<ol type=”I”>
<li><a href="#Sal">Salate</a></li>
<li>Aperitive
<ul type=”disc”>
<li>Calde</li>
<li>Reci </li>
</ul>
</li>
<li>Ciorbe</li>
<li><a name="desert">Desert</a></li>
</ol>
<h2><a name="Sal">Salate</a></h2>
<p>Salata Cezar, Salata greceasca, Salata asortata</p>
<h2>Aperitive</h2>
<p>Calde:<br/>Cascaval pane<br/>Creier pane<br/></p>
<h2><a href="http://www.lacena.ro/Meniu_Desert.html#desert">Desert</a></h2>
</body>
</html>
 Atributele Standard

Atribute standard sunt:

title - specifica o extra informatie pentru un element. Ia valoarea text.

style - specifica stilul inline pentru un element. Ia valoarea definitie_stil.

id - specifica un id unic pentru un element. Ia valoarea nume_id . Nu

poate incepe cu o cifra.

class- specifica un nume de clasa pentru un element. Se foloseste cel mai

des in style sheet. Ia valoarea nume_clasa.
HTML4 atributele standard NU se folosesc pentru elementele:
<base>, <head>, <html>, <meta>, <param>,<script>, <style> si <title>.

HTML5 atributele standard sunt folosite pentru orice element

 Atributele tag-urilor

Exemplu

<NumeTag style="atribut:valoare; atribut:valoare;”>

Textul afectat </NumeTag>

Numele si valorile atributelor trebuie scrise cu litere mici !

Folosirea acestuia introduce numeroase probleme legate de
accesibilitatea pe diverse platforme
 Atributele Globale
accesskey - specifica o combinatie de taste pentru activarea/focus unui
elementet. <element accesskey="character"> In HTML 4.01 poate fi
folosit doar pentru elementele: <a>, <area>, <button>, <input>, <label>,
<legend>, si <textarea>.
dir - specifica directia in care sa fie afisat continutul unui element.
<element dir="ltr|rtl|auto"> In HTML 4.01, nu poate fi folosit pentru
elementele: <base>, <br>, <frame>, <frameset>, <hr>, <iframe>,
<param>, si <script>.
tabindex - specifica ordinea pentru navigare ( tasta TAB) pentru un
element. <element tabindex="number"> In HTML 4.01, poate fi folosit
doar pentru elementele: <a>, <area>, <button>, <input>, <object>,
<select>, si <textarea>.
lang - specifica limba de afisare pentru un element. <element
lang="language_code"> In HTML 4.01, nu poate fi folosit pentru:
<base>, <br>, <frame>, <frameset>, <hr>, <iframe>, <param>, si
<script>.

In HTML5 aceste atribute globale sunt folosite pentru orice element.

 Atributele Globale HTML5
contenteditable - specifica daca continutul unui elementet se poate edita
sau nu. Suportat de majoritatea browser-elor.
<element contenteditable="true|false|inherit">
hidden - specifica daca continutul unui element sa fie afisat sau nu.
Suportat de majoritatea browser-elor cu exceptia IE.
<element hidden="hidden">
spellcheck - specifica daca continutul unui element sa fie verificat sau nu
Suportat de majoritatea browser-elor cu exceptia IE si Firefox.
<element spellcheck="true|false">.
draggable - specifica daca un element poate fi manipulat sau nu. Suportat
de majoritatea browser-elor cu exceptia IE si Opera.
<element draggable="true|false|auto">
dropzone - specifica daca elementele „dragged” pot fi copiate/mutate/link
sau nu. Nu este suportat de niciun browser inca.
<element dropzone="copy|move|link">
contextmenu - specificat pentru elementul <p>, apare la right-click.
Nu este suportat de niciun browser inca.
<element contextmenu="menu_id">
 Atributele Eveniment Globale
Evenimentele definesc actiuni si permit executarea scripturilor in browser.

Executarea unui JavaScript cand utilizatorul click/ apasa o tasta pe un

anumit element.
Evenimente pentru elementul <body>:
HTML4 &5 : onbeforeprint, onafterprint, onload, onunload, onresize
<body onresize="showMsg()">
HTML5 : ononline, onoffline, onresize, onundo, onredo, onpopstate,
etc
Evenimente ptr tastatura:
HTML4 & 5: onkeydown, onkeypress onkeyup
Evenimente ptr mouse:
HTML4 & 5: onclick, ondblclick, onmousedown, onmouseup,
onmousemove, onmouseover, onmouseout.
<p onmousedown="mouseDown()">Click the text!</p>

Evenimentele ptr tastatura si mouse nu pot fi folosite pentru elementele:

<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>,
<script>, <style>, <title>.
 Atributul Style


Formatarea tag-urilor a fost introdus cu HTML 4.0

Formatarea poate fi adaugata inline, intern si extern folosind un
fisier separat - style sheets CSS.

Inline
<Numetag style="atribut:valoare; atribut:valoare;”> Textul
afectat</NumeTag>
Exemplu:
<html>
<body style="background-color:#606099;">
<p style="font-family:times;color:green"> Text in Times si
verde</p>
</body></html>
 Atributul Style- inline

Exemplu:
<html>
<body style="background-color:#3a3b3c;">
<h3 style="background-color:#ff0000;font-
family:arial;">Acesta e un titlu de capitol pe fond rosu si
cu font arial </h3>
<p style="background-color:#0010ff;text-align:right;font-
size:40px;”> Acesta e un paragraf pe fond bleu si
marimea fontului de 40pixeli</p>
</body>
</html>

Nu lasati spatiu intre valoare si unitati, adica 40px si nu 40 px!

IE accepta, dar FireFox si Opera nu.
 Tag-ul Style- intern

Tag-ul <style> este folosit sa defineasca formatarea informatiei
pentru un singur document HTML, specificand cum sa fie afisate
elemetele in browser.

Tag-ul <style> se afla intotdeauna in sectiunea < head>.

Tag-ul <style> accepta atributele globale, eveniment si atributele
standard: type si media

Atributul type este obligatoriu, defineste continutul elementului
style si are singura valoare posibila "text/css".
<head>
<style type="text/css">
NumeTag {atribut:valoare}
NumeTag{atribut:valoare}
NumeTag{atribut:valoare}
</style>
</head>
 Tag-ul Style- intern

Tag-ul <style> este folosit sa defineasca formatarea informatiei
pentru un singur document HTML, specificand cum sa fie afisate
elemetele in browser.

Tag-ul <style> se afla intotdeauna in sectiunea < head>.

Tag-ul <style> accepta atributele globale, eveniment si atributele
standard: type si media

Atributul type este obligatoriu, defineste continutul elementului
style si are singura valoare posibila "text/css".
<head>
<style type="text/css">
NumeTag {atribut:valoare}
NumeTag{atribut:valoare}
NumeTag{atribut:valoare}
</style>
</head>
 Tag-ul Style- intern
Exemplu:
<html>
<head>
<style type="text/css" >
h3,p {background-color:#007890;}
div { font-family:arial;color:blue; font-size:20px;}
body {color:#ff00c0;}
</style>
</head>
<body>
<h3>Header 1</h3>
<div>A paragraph.</div>
<p> orice text </p>
</body>
</html>
 Style extern – in fisier CSS

Un fiser extern - style sheet este ideal cand formatarea se aplica mai
multor pagini. Modificand doar fisierul extern putem sa schimbam
formatarea intregului Web site.

Fiecare pagina de web trebuie sa faca referinta la fisierul extern
folosind tag-ul <link> .

Tag-ul <link> se afla intotdeauna in sectiunea head si are
atributele:
-rel – specifica relatia dintre documentul HTML si resursa, care
poate fi :contents, index, chapter, copyright, stylesheet etc.
-type – tipul MIME (Internet media type) al resursei referite
-href – adresa URL a resursei cu care se face legatura

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
 Style invechit – ASA NU!
<!DOCTYPE html>
<html>
<head>
<title>HTML URAT</title>
</head>
<body bgcolor="lightblue">
<p align="right">
<font face="Consolas" size="62px" color="purple">
<strong>Demo</strong> <em>Text</em>
</font>
<center>
Sample Text
</center>
</p>
</body>
</html>
 Bibliografie


HTML prin exemple – Tudor Gugoniu, Ed.Teora 2002

HTML, XHTML,CSS si XML prin exemple – Tudor Gugoniu,
Ed.Teora 2005

Crearea paginilor Web – Ned Suell, Ed. Teora 2002

Totul despre HTML 4 – Rick Darnell, Ed Teora.

http://www.w3schools.com/html/default.asp
 Idei ?

<blink> orice text </blink>

<marquee> un text ce se misca de la dreapta la stanga

</marquee>

<marquee scrollamount=1 direction=down loop=true>text ce se

misca de sus in jos </marquee>