LICEUL TEHNOLOGIC “ION NISTOR”

REALIZAREA
UNUI SITE
DESPRE ANGLIA

COORDONATOR: CANDIDAT:BUTA ALEXANDRA

SESIUNEA MAI 2014

 Scurta istorie a HTML

Hypertext
Prin hiprEertext se întelege un document (evident în sensul utilizat în informatica: fisier
creat printr-un editor, procesor etc) care contine, pe lânga text (continutul clasic al unui
document), graficã, imagini, animatie, înregistrãri audio, legãturi cãtre alte documente. Un
hipertext poate fi gândit într-un spatiu cu mai multe dimensiuni, fiecare axã reprezentând un alt
mijloc de comunicare: text, audio, video etc.
Conceptul de hypertext a apãrut în iulie 1945 când Vannevar Bush a imaginat, în
articolul As we may think, scris pentru Atlantic Monthly, o masina care putea opera cu texte si
grafice on-line.
În 1960, Th.H. Nelson (Computer Lib/Dream Machines) a unit termenul de hipertext cu
cel de hipermedia, lucrarea lui influentând introducerea Web. În anii 1970, Nelson a initiat
proiectul XANADU, orientat cãtre biblioteci digitale si sisteme hipertext, proiect nefinalizat însã.
Dupã anii 1980, aparitia sistemelor de help în produsele Apple si Microsoft, sisteme care
permit utilizatorilor sã navigheze prin selectãri de butoane sau termeni, au fãcut ca notiunea de
hipertext sã devinã una obisnuitã, desi hipertextele respective nu aveau o complexitate foarte
mare.
Hipertextul permite pãrãsirea modului traditional de citire a unui document: linie dupã
linie, paginã dupã paginã etc. Legãturile activate produc o desfãsurare a documentului dupã
nevoile utilizatorului plus posibilitatea de pãstrare a atentiei cititorului prin utilizarea legãturilor
grafice, audio etc.
World Wide Web
World Wide Web, sau WWW, sau Web a apãrut la sfârsitul anilor '80 când cercetãtorii
de la CERN, Laboratorul European pentru fizica particulelor, au dezvoltat o retea pentru a avea
acces mai usor la documentele produse de diversele laboratoare. În 1990, ei au introdus un
browser doar pentru texte si au dezvoltat HTML. În 1991 au implementat Web la CERN.
În 1992 cercetãtorii de la CERN au introdus Web în comunitatea Internet si aceasta a
început revolutia (S.E. Eddy - HTML in plain English).
Ceea ce diferentiazã WWW de celealte componente ale Internet-ului este tocmai
hipertextul, care si-a gãsit în Web calea idealã de exprimare. Toate documentele accesibile în
Web sunt legate între ele indiferent de serverul pe care sunt memorate si indiferent de locul
geografic unde sunt.

1
 Trecerea de la un document la altul, de la un subiect la altul, de la un loc la altul etc
produce o impresie puternicã asupra utilizatorului, îi dã acestuia certitudinea cã totul este
potrivit intereselor lui, potrivit ritmului propriu de întelegere.
HTML
HTML, sau HyperText Markup Language, a fost proiectat sã poatã opera cu
functionalitãtile multimedia ale WWW.
Limbajul de marcare permite transformarea oricãrui text într-un hipertext prin
introducerea unor marcaje, care vor indica modul cum se efectueaza legãturile documentului,
cum vor apãrea paginile documentului etc. Un document HTML poate fi fãcut public dacã este
pe un calculator care are acces la Internet. Un document fãcut public poate fi vãzut din orice
punct al Internet-ului. Desi nu este optiunea cea mai fericitã, vom utiliza cuvantul tag pentru
marcaj.
SGML, Standard Generalized Markup Language, pãrintele HTML-ului, a devenit, în 1986,
standard ISO. Fiecare document SGML are asociat o definire a tipului de document (DTD) care
defineste regulile pentru continutul documentului. Fiecare versiune de HTML a fost definitã
într-un DTD.
HTML 1.0 si HTML+ au apãrut în 1990, respectiv 1993. 
HTML 2.0, apãrut în 1994, a fost prima versiune standardizatã. Ea contine 49 de taguri.
HTML 3.0 a apãrut în 1995. Versiunea cuprindea extensii importante, cum ar fi marcaje pentru
notatii matematice, bannere etc. În prezent nu mai este utilizat.
HTML 3.2, introdus în 1996, este considerat ca succesorul versiunii 2.0, incorporând o serie de
taguri din HTML 3.0 ca si extensii Netscape.
Pe lânga versiunea standardizatã, o serie de firme producãtoare de browsere
(programele care permit vizualizarea documentelor) au creat propriile extensii. Sunt cunoscute
extensiile Netscape si Microsoft, cele doua mari firme care-si disputã piata, extensii dintre care
se vor alege cu sigurantã extensiile pentru versiunile ulterioare de HTML.
Legaturi utile:
SGML - D. Connolly este o listã de legãturi ce privesc SGML: învãtare, utilizare, grupuri
de discutie, unelte si software etc.
SGML - SoftQuad cuprinde legãturi multiple cãtre diverse resurse SGML.
HTML 2.0 - Referinta DTD contine legãturi cãtre toate tagurile versiunii 2.0.
HTML 3.2 - Introducere contine legãturi pentru structura HTML 3.2.
HTML 3.2 - taguri este o listã de legãturi cãtre toate tagurile versiunii HTML 3.2.

2
 CSS

CSS (Cascading Style Sheets) este un standard pentru formatarea elementelor unui
document HTML. Stilurile se pot atașa elementelor HTML prin intermediul unor fișiere externe
sau în cadrul documentului, prin elementul <style> și/sau atributul style. CSS se poate utiliza și
pentru formatarea elementelor XHTML, XML și SVGL.

CSS3
CSS3 reprezintă un upgrade ce aduce câteva atribute noi și ajută la dezvoltarea noilor
concepte in webdesign.
Unele dintre cele mai importante segmente (module) noi adăugate acestui standard
pentru formatarea elementelor HTML aduc un plus considerabil in dezvoltarea activități
webdesign.
Mai jos sunt prezente in listă cele mai importante modulele adăugate in CSS3:
1. Selectors
2. Box Model
3. Backgrounds and Borders
4. Image Values and Replaced Content
5. Text Effects
6. 2D/3D Transformations
7. Animations
8. Multiple Column Layout
9. User Interface
Deși au apărut unele deficiente de compatibilitate intre browsere, majoritatea
proprietăților CSS3 au fost implementate cu succes in variantele browserelor noi.
CSS3 - Borduri
Acum CSS3 oferă posibilitatea de a crea borduri cu colțurile rotunjite fară a folosi
elemente grafice de fundal așa cum se folosea anterior acestui upgrade.
Proprietatea CSS3 border-radius definește prin valorile exprimate in pixeli cat de
rotunjite vor fi colțurile unui element HTML sau unei imagini. Fiecare colț poate avea o alta
valoare exprimată in pixeli diferită de un alt colț al aceluiași element. Prin urmare putem folosi
pana la 4 valori diferite atribuite unui element HTML sau imagine.

3
 Exemplu:

border-radius: 5px ;
- definește valoarea de 5px radius pentru toate cele 4 colțuri ale elementului.
border-radius: 5px 7px 12px 4px;
- aceste valori multiple definesc cat de mult vor fi rotunjite colțurile elementului HTML,
iar pentru fiecare colt este specificata valorarea. Colțul stanga-sus are valoarea border-radius
de 5px, colțul dreapta-sus are valoarea border-radius de 7px, colțul dreapta-jos al elementului
HTML are valoarea de 12px iar colțul din stanga-jos are valoarea de 4px.
CSS3 - Borduri Rotunjite - Optimizat
Varianta ne-comprimată sau ne-optimizată:
border-radius-left: 5px;
border-radius-right: 7px;
border-radius-top: 12px;
border-radius-bottom: 4px;
Varianta mimificată, compresată/optimizată:
border-radius: 5px 7px 12px 4px;
Ambele variante sunt corecte și acceptate de clientul browser.
CSS3 - Borduri Rotunjite - Compatibilitate Browser
Pentru compatibilitatea cu diferite browsere se folosesc prefixe: -webkit- , -moz- , -o-
Compatibilitate: Internet Explorer (IE) - 0.9 , Chrome folosește prefixul -webkit- pentru
4,0 , Firefox folosește prefixul -moz- pentru versiunea 3.0, Safari folosește prefixul -webkit-
pentru versiunea 3.1, Opera 10.5 prefix -o-

Exemplu CSS3 border-radius:

div {
border: 2px solid #333333;
padding: 10px 40px;
background: #dddddd;

4
 width: 300px;
border-radius:25px;
}

Elementul HTML div este definit de urmatoarele proprietăți CSS: dimensiunea in

lungime este redată de valoarea in pixeli a proprietății width, folosește o bordură de 2 pixeli, o
bordură solidă de culoare gri-inchis definită de caloarea HEX #333333. Culoarea de fundal este
gri deschis definită de HEX #dddddd. Bordura rotunjită este de 25 pixeli pentru toate cele 4
colțuri.

HTML 5

HTML5 este un limbaj pentru structurarea și prezentarea conținutului pentru World

Wide Web, o tehnologie nucleu pentru Internet propusă inițial pentru software-ul Opera.

Este a cincea revizuire a standardului HTML (creat în 1990 și standardizat ca HTML4 din
1997) și din octombrie 2011 este în curs de dezvoltare. Obiectivele sale principale au fost acelea
de a îmbunătăți limbajul cu un suport pentru cele mai recente apariții multimedia în același
timp menținândul ușor de citit de oameni și bine înțeles de computere și device-uri (browsere
web, parsere, etc.). HTML5 își propune să însumeze nu numai HTML4, dar și XHTML1 și
DOM2HTML (îndeosebi JavaScript).
Urmărind predecesorii săi imediați HTML 4.01 și XHTML 1.1, HTML5 este un răspuns la
observația că HTML și XHTML utilizate în comun pe World Wide Web sunt un amestec de
caracteristici introduse de specificații diferite, împreuna cu acestea mai sunt și caracteristicile
diferite aduse de software, de browsere, și multe erori de sintaxă în documnentele web
existente.
Astfel, HTML5 devine o încercare de a defini un singur limbaj de marcare care poate fi
scris în oricare dintre sintaxele HTML sau/și XHTML. Acesta include modele detaliate de
prelucrare pentru a încuraja mai multe implementări interoperabile; extinde, îmbunătățește și
raționalizează disponibilitățile pentru documentele web și introduce marcarea și aplicații API
(application programming interfaces) pentru aplicații web complexe. Din aceste motive, HTML5
este un posibil candidat pentru aplicațiile de platforme mobile. Multe caracteristici ale HTML5
au fost create din considerarea că va trebui să devină capabil să ruleze pe dispozitive cum ar fi
smart-phonurile sau tabletele.
În special, HTML5 aduce multe noi caracteristici sintactice. Acestea cuprind elemente ca
<video>, <audio>, <header> și <canvas> elemente HTML, precum și integrarea conținutului SVG
care a înlocuiește utilizarea tag-ului generic <object>. Aceste noutăți sunt proiectate pentru a

5
facilita includerea și manipularea în web a conținuturilor multimedia și grafice fără a fi nevoie să
se recurgă la proprietățile de plugin și API.
Alte noi elemente ca <section>, <article>, <header>, și <nav> sunt proiectate să
îmbunătățească conținutul semantic al documentelor. Noi atribute au fost introduse în același
scop, în același timp unele elemente și atribute au fost îndepărtate. Unele elemente ca <a>,
<cite> și <menu> au fost schimbate, redefinite și standardizate. API-urile și DOM-urile
(document object model) sunt certitudini și sunt părți fundamentale în specificațiile HTML5.
HTML5, de asemenea, definește in câteva detalii prelucrările necesare pentru
documentele invalide, astfel încât sintaxa erorilor va fi tratată uniform de toate browserele
cunoscute.

Sursa paginii principale

Aici am construit scheletul site-ului. Pentru fiecare zona din pagina am utilizat DIV-uri care sunt
formatate si pozitionate cu CSS in fisierul stil.css.

<!doctype html><--Declaratia pentru noul standard HTML 5-->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="stil.css"/>
<title>Londra - un oras de vis</title> <!--titlul-->
</head>
<body>
<div id="pagina"> <!--corpul paginii-->
<div class="BaraDeNavigare"><a href="index.html">Acasă</a></div> <!--bara de
navigare-->
<div class="BaraDeNavigare"><a href="despre.html">Despre</a></div>
<div class="BaraDeNavigare"><a href="istoric.html">Istoric</a></div>
<div class="BaraDeNavigare"><a href="actual.html">Actual</a></div>
<div class="BaraDeNavigare"><a href="informatii.html">Informatii</a></div>
</div>

6
 <div id="imagineaPrincipala"> <!--imaginea din antet-->
<div class="imagine">
<div id="titlulAntetului">- Un oras de vis -</div> <!--titlul zonei-->

</div>
</div>
<div class="Continut"> <!--partea de sub-antet-->
<div class="interior">
<div class="TitluContinut">Londra (în engleză London) este capitala Angliei și a
Regatului Unit.</div><br /><br /> <!--titlul articolului-->
<div class="TextContinut">

<div class="videoclip"><iframe src="http://player.vimeo.com/video/83354237?

title=0&amp;byline=0&amp;portrait=0" width="500" height="281" frameborder="0"
webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div> <!--cod de
incorporare de pe site-ul VIMEO-->
</div>

</div>
<div id="subsol"><a>Eleva cutare</a></div> <!--subsolul paginii-->
</body>
</html>

7
Sursa fisierului stil.css.

/* Stil realizat de eleva ..................... */

body { /*formatare stil corp*/

margin: 0;

padding: 0;

text-align: left;

font-family:"Adobe Garamond Pro Bold", Georgia, "Times New Roman", Times, serif;

font-size: 13px;

color: #061C37;

background: #014D5D url(background.png);

background-repeat:repeat-x;

{ /*formatare stil general*/

margin: 0 auto 0 auto;

text-align:left;}

.continut

padding:2px;

padding-bottom: 10px;

width:700px;

height:auto;

border: 1px solid #fff;

border-radius:15px;

box-shadow: 10px 10px 5px #fff;

8
}

#pagina

{ /*formatarea diviziunii "pagina"*/

display: block;

height:auto;

position: relative;

overflow: hidden;

width: 670px;

border-radius:15px;

.BaraDeNavigare

{ /*formatarea clasei de diviziune "BaraDeNavigare"*/

text-align:center;

position:relative;

margin-top:15px;

margin-bottom: 15px;

font-size:16px;

margin-left:5px;

width:121px;

height: 35px;

line-height: 35px;

float:left;

color:#CEEAEE;

font-family:"Adobe Garamond Pro Bold", Georgia, "Times New Roman", Times, serif;

9
.BaraDeNavigare a

{/*formatarea tagului "a"*/

text-align:center;

text-decoration:none;

border-bottom:none;

color:#0C5Aff;

display: block;

width:121px;

height: 35px;

line-height: 35px;

background-color: #bdddfa;

.BaraDeNavigare a:hover

{/*formatarea planarii tagului "a"*/

text-align:center;

border-bottom:none;

color:#fff;

display: block;

width:121px;

height: 35px;

line-height: 35px;

background-color: #6699ff;

10
#imagineaPrincipala

{/*formatarea imaginii din antet*/

width:670px;

height:345px;

background-color:#FFFFFF;

#imagineaPrincipala .imagine

{/*formatarea clasei de diviziune "imagine"*/

position: relative;

width:650px;

height:325px;

top:10px;

background-image:url(london.jpg);

background-repeat:no-repeat;

margin-left:15px;

#titlulAntetului

{/*formatarea textului din titlu*/

position:relative;

top:30px;

left:40px;

font-size:13px;

color:#FFFFFF;

font-family:"Adobe Garamond Pro Bold", "Britannic Bold";

11
.Continut

{/*formatarea continutului paginii*/

width:670px;

height:auto;

background-color:#FFFFFF;

margin-top:10px;

.Continut .interior

{/*formatarea clasei de diviziune "interior"*/

position:relative;

width:650px;

height:auto;

top:10px;

margin-left:10px;

background-image:url(fundal_intern.png);

background-repeat:repeat-x;

padding-bottom:35px;

.TitluContinut

{/*formatarea titlului din continut*/

font-size:19px;

margin-bottom:0px;

padding-top:18px;

margin-left:15px;

margin-top:15px;

12
.TextContinut

{/*formatarea textului continut*/

font-size:13px;

line-height:24px;

margin-left:13px;

margin-right:13px;

.galerie

{/*formatarea galeriei de imagini*/

position: relative;

margin-left: 200px;

.iconita img

{/*formatarea iconitelor din galerie*/

border: 1px solid white;

margin: 0 5px 5px 0;

.iconita:hover

{/*formatarea planarii iconitelor*/

background-color: transparent;

.iconita:hover img

{/*formatarea tagului img*/

13
border: 1px solid blue;

.iconita span

{ /*Stil pentru imaginile marite*/

position: absolute;

background-color: lightyellow;

padding: 5px;

left: -1px;

border: 1px dashed gray;

visibility: hidden;

color: black;

text-decoration: none;

.iconita span img

{ /*Stil pentru imaginile marite*/

border-width: 0;

padding: 2px;

.iconita:hover span

{ /*Stil pentru imaginile marite*/

visibility: visible;

top: 0;

left: 230px; /* distanta dintre imaginea statica si cea redimensionata */

z-index: 50;

14
.videoclip

{/*formatarea videoclipului*/

margin-left: 60px;

#subsol

{/*formatarea subsolului*/

width: 670px;

height:16px;

background: url(subsol.png) no-repeat;

text-align:center;

font-size:9px;

font-family:Arial, Helvetica, sans-serif;

color:#386172;

padding-top:5px;

#subsol a

{/*formatarea tagului a din subsol*/

text-decoration:none;

font-size:9px;

color:#386172;

html, body { /*formatarea textului din corpul paginii*/

text-align: center;

15
p {text-align: left;

text-indent: 20px;}

Pagina istoric in care exista o mica galerie foto.

<!doctype html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<link rel="stylesheet" type="text/css" href="stil.css"/>

<title>Londra - un oras de vis</title>

</head>

<body>

<div id="pagina">

<div class="BaraDeNavigare"><a href="index.html">Acasă</a></div>

<div class="BaraDeNavigare"><a href="despre.html">Despre</a></div>

<div class="BaraDeNavigare"><a href="istoric.html">Istoric</a></div>

<div class="BaraDeNavigare"><a href="actual.html">Actual</a></div>

<div class="BaraDeNavigare"><a href="informatii.html">Informatii</a></div>

</div>

<div id="imagineaPrincipala">

<div class="imagine">

<div id="titlulAntetului">- Un oras de vis -</div>

</div>

</div>

<div class="Continut">

<div class="interior">

<div class="TitluContinut">Istorie</div><br /><br />

16
 <div class="TextContinut"><p>La origini, Londra a fost o așezare celtă. În 43 d.Hr. romanii au
fondat orașul Londinium, iar numele acestuia se pare că a dat și numele nativ al orașului, London, deși
unele date recente arată că London ar putea fi de origine celtă. În 61 d.Hr., noul oraș roman este
asediat, prădat și ars pînă la temelii de către răsculații celți conduși de regina Boadicea.</p><br />

<p>După căderea Imperiului Roman, Londinium a fost abandonat; la vest de acesta a apărut în
secolul al VII-lea o așezare saxonă cu numele Lundenwic, pe locul unde azi se află Aldwych. La începutul
secolului al X-lea vechea cetate romană a fost reocupată. Inițial Westminster era un oraș distinct, însă în
cele din urmă Londra și Westminster s-au integrat și au evoluat împreună, devenind cel mai mare oraș al
Angliei, iar din secolul al XII-lea și capitală a regatului.</p><br />

<p>Între secolele al XVI-lea și al XX-lea, Londra a înflorit, fiind capitală a Imperiului Britanic. Marele
incendiu din 1666 a distrus o mare parte a orașului. Reconstrucția a durat peste 10 ani și a fost condusă
de Sir Christopher Wren, care, cu acea ocazie, a proiectat și construit multe din clădirile emblematice ale
Londrei de astăzi, așa cum ar fi spre exemplu Catedrala Sf. Paul. Creșterea orașului s-a accelerat în
secolul al XVIII-lea, astfel că la începtul anilor 1800 Londra era cel mai mare oraș al lumii.</p><br />

<p>Bombardamentele naziste din timpul celui de-al doilea război mondial au condus, pe lîngă
pierderea a peste 30.000 de vieți, la distrugerea multor clădiri vechi. Reconstrucția din următoarele
decenii a dat prilejul folosirii a numeroase stiluri arhitectonice moderne, care dau orașului pe alocuri un
caracter eclectic.</p><br />

<p>Londra a fost o țintă a atacurilor teroriste ale IRA, iar mai recent a suferit o serie de atentate
asupra sistemului de transport, soldate cu 52 de morți și atribuite grupării islamiste al-Qaeda.</p>

</div>

<div class="galerie">

<a class="iconita"><img src="galerie/ist1.jpg" width="100px" height="75px" border="0" /><span><img

src="galerie/ist1.jpg" /><br /></span></a>

<a class="iconita"><img src="galerie/ist2.jpg" width="100px" height="75px" border="0" /><span><img

src="galerie/ist2.jpg" /><br /></span></a><br />

<a class="iconita"><img src="galerie/ist3.jpg" width="100px" height="75px" border="0" /><span><img

src="galerie/ist3.jpg" /><br /></span></a>

<a class="iconita"><img src="galerie/ist4.jpg" width="100px" height="75px" border="0" /><span><img

src="galerie/ist4.jpg" /><br /></span></a></div>

</div>

</div>

17
 <div id="subsol"><a>Eleva cutare</a></div>

</body>

</html>

Obs:Pagina actual.html are codul foarte asemanator cu cel de mai sus.

18
Bibliografie
http://www.w3schools.com

http://www.cssgalery.com

http://www.wikipedia.com

http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/

19