PROIECT PENTRU OBŢINEREA ATESTĂRII

PROFESIONALE ÎN INFORMATICĂ
TEMA: Wimbledon Tennis Championships

Profesor coordonator: Stan Mihaela

Elev: Petrea Daniela
Clasa a XII a A
Galați,Mai 2020
 Cuprins

1. Tema proiectului
2. Motivația alegerii temei
3. Structura și conținutul proiectului
4. Cerințe hardware și software
5. Generalități despre limbajul HTML
6. Bibliografie
 1. Tema proiectului
Lucrarea de fata are ca tema prezentarea turneului de tenis Wimbledon. Din meniul
principal putem alege :
 Home
 About
 News
 Image gallery
2. Motivația alegerii temei
 3. Generalități despre limbajul HTML

HTML (Hypertext Markup Language) este un limbaj creat în scopul de a descrie, în mod
text, formatul paginilor Web; fisierele create în acest limbaj vor fi interpretate de navigatoare,
care vor afisa paginile în forma doritã (cu texte formatate, liste, tabele, formule, imagini,
hiperlegãturi, obiecte multimedia etc.). HTML a apãrut ca o aplicatie ISO standard (apartine
standardului SGML - Standard Generalized Markup Language, specializat pentru hipertext si
adaptat la Web).

Asa cum se poate deduce din numele limbajului, HTML descrie caracteristicile de format
ale elementelor incluse prin procedee de marcare. Acestea pot fi asemãnate intuitiv cu
marcajele folosite în tipografie pentru a indica scrierea unui text cu un anumit tip de
caractere. Fiecare element va fi introdus între douã marcaje ("tags", în limba englezã) - de
început si sfârsit - (uzual) de forma <marcaj> … </marcaj>. Caracterele speciale de
delimitare a marcajelor "<", ">" permit deosebirea acestora de textul propriu-zis. De
exemplu, pentru textele aldine (îngrosate), marcajul de început este <B> iar de sfârsit - </B>.

Procesele de standardizare si de includere a comenzilor de marcare în fisierele HTML

permit navigatoarelor sã citeascã si sã formateze paginile Web, lucru foarte important în
conditiile în care ele contin nu numai texte alb-negru, ci si culori, imagini, hiperlegãturi,
diverse obiecte. Practic, marcajele HTML asigurã controlul asupra modului de afisare a
obiectelor corespunzãtoare în cadrul programelor de vizualizare a documentelor HTML -
navigatoarele.

Limbajul HTML a evoluat în versiuni succesive, odatã cu evolutia protocolului HTTP si a

programelor de navigare. Astfel, HTML 1.0 era compatibil cu Mosaic, primul program de
navigare, dar dupã aparitia unor navigatoare noi, a fost necesarã introducerea unui standard
oficial Internet pentru construirea paginilor (HTML 2.0) si extinderea sa cu noi facilitãti:
formule matematice, tabele, moduri avansate de descriere a organizãrii paginilor (începând cu
HTML 3.0).

Standardizarea oficialã a limbajului HTML a fost realizatã de consortiul WWW si

dezvoltatã de diversi producãtori de soft (unii dintre acestia urmãresc chiar promovarea
navigatoarelor proprii prin introducerea unor particularitãti în formatele oficiale).

Paginile HTML se pot crea cu orice editor de texte de cãtre utilizatorii care cunosc
limbajul HTML sau, mai simplu, se pot utiliza editoare speciale, în care obiectele se introduc
interactiv iar codul HTML se genereazã automat.

Elementele limbajului HTML

Toate obiectele HTML sunt introduse între marcaje care le definesc; majoritatea
acestora sunt de forma <tip_obiect> (la început) si </tip_obiect> (la sfârsit). Tipul standard al
obiectului poate fi specificat cu majuscule sau minuscule; totusi, se recomandã utilizarea
majusculelor fiindcã astfel marcajele ies în evidentã.
 Majoritatea navigatoarelor permit vizualizarea paginii curente în formatul sursã
HTML (forma pe care o interpreteazã pentru afisarea paginii). La interpretare, programele de
navigare ignorã spatiile si <Enter>-urile, aplicând formatarea specificatã.

Existã însã si marcaje cu parametri; acestea au forma <tip_obiect param1=valoare1

param2=valoare2 …>. De exemplu, obiectele de tip imagine sunt introduse cu delimitatorul
<IMG>, care are diversi parametri. Pentru definirea hiperlegãturilor se foloseste marcajul
<A>, care are de asemenea parametri proprii.
Codurile de marcare HTML pot fi clasificate în urmãtoarele categorii:

1. marcaje de bazã - cele care delimiteazã pagina / documentul HTML, titlul acesteia si
corpul paginii;
2. marcaje pentru structurarea documentului - care permit introducerea de subtitluri,
paragrafe, linii de delimitare;
3. marcaje pentru formatarea textului si crearea listelor;
4. marcaje pentru crearea hiperlegãturilor (hyperlinks);
5. marcaje pentru introducerea de obiecte - tabele, formule, imagini sau obiecte
multimedia preluate din fisiere, formulare.

Vom descrie în paragrafele urmãtoare, elementele caracteristice fiecãreia din aceste

categorii.

Pentru structurarea si organizarea informatiilor din paginile web se pot utiliza frame-uri
(marcajul <FRAME>), prin care la un moment dat se afiseazã mai multe ferestre continând
fiecare câte o paginã. Introducerea si gestiunea frame-urilor se realizeazã foarte convenabil
folosind editoarele HTML.

Mai mentionãm faptul cã în ultimele versiuni ale limbajului HTML si ale browser-elor s-a
introdus posibilitatea integrãrii, respectiv lansãrii în executie prin navigator, a unor aplicatii.
Acestea sunt scrise în limbajul Java, un limbaj cu caracteristici distribuite si obiectuale,
adaptat programãrii în Web; ele se numesc "applet"-uri si se introduc în sursele HTML cu
marcajul <APP> sau <APPLET> . Ultimele versiuni de editoare HTML permit introducerea
interactivã a applet-urilor Java.

Marcaje de bazã

O paginã Web este delimitatã de marcajele <HTML> si </HTML> care indicã începutul si
finalul documentului si contine:

 zonã de antet cuprinsã între marcajele:     <HEAD> … </HEAD> si

 un corp delimitat de marcajele:             <BODY> … </BODY>.

Zona de antet este utilizatã de cãtre programele de cãutare pe site-urile web si permite
specificarea titlului paginii care va fi afisat de navigator (nu apare propriu-zis în continutul
paginii).

titlul, introdus în antet, este cuprins între marcajele <TITLE> … </TITLE>.

Astfel, o formã extrem de simplã a unui document HTML ar putea fi cea din
urmãtorul exemplu:
<HTML>
<HEAD> <TITLE>Titlul documentului </TITLE>
</HEAD>
<BODY>Document HTML foarte simplu</BODY>
</HTML>

Marcaje pentru structurarea documentului

Programele de navigare asigurã afisarea diferentiatã a unot titluri si subtitluri pentru

sectiunile paginii, dupã criteriile implementate în acest scop la conceperea sa (litere mai mari
sau mai mici, diverse culori, litere aldine sau simple, unul sau mai multe rânduri libere dupã
titlu etc.).

Titlurile de capitole sau subtitlurile sunt definite de marcajele <Hn>, unde n este o
cifrã între 1 si 6 care specificã nivelul titlului (1 este titlul principal iar 6 corespunde celui
mai scãzut nivel). Astfel:
<H1> … </H1>    indicã un subtitlu de nivelul 1
…
<H6> … </H6>    indicã un subtitlu de nivelul 6.

Pentru separarea zonelor paginii se pot folosi treceri la:

 linie nouã - cu marcajul <BR>, eventual cu desenarea unei linii orizontale - marcajul
<HR>;
 paragraf nou - cu marcajul <P> (se insereazã o linie nouã si eventual se face o
indentare). Marcajul </P> desemneazã sfârsitul de paragraf dar este mai rar folosit (se
poate omite).

Marcaje pentru formatarea textului si crearea listelor

Formatãrile uzuale de texte permit scrierea cu caractere:

 aldine - în acest scop pentru acel text se aplicã marcajele     <B>… </B>;
 cursive (italice) - pentru acel text se aplicã marcajele    <I> … </I>;
 subliniate - textul se introduce între marcajele    <U> …</U>.

Unele programe mai vechi de navigare nu permiteau reprezentarea acestor formate; în

acest caz, se aplicau alte moduri de evidentiere a textelor respective (culori, video invers).

Alte tipuri de formatãri de caractere care se pot defini se referã la:

dimensiunea fonturilor si culori - se va utiliza marcajul cu parametri:

<FONT SIZE=x COLOR=y> … </FONT> , care indicã utilizarea unui font de dimensiune x
si culoare y.

 x poate fi un numãr între 1 si 12, indicând mãrimea exactã, sau un numãr cu semn,
indicând mãrimea relativã la dimensiunea curentã.
  y poate fi numele unei culori standard, specificatã în limba englezã si între ghilimele,
sau, eventual, descompunerea unei culori în componentele RGB, sub formã
hexazecimalã (câte douã cifre hexa pentru fiecare componentã).

Suplimentar, se pot crea pagini de stiluri, în care sã se defineascã stiluri logice, modificabile
ulterior; în acest scop, se folosesc marcajele <DN> - definitie, <EM> - punere în evidentã,
<STRONG> - accentuare puternicã.

Pentru tastaturile care suportã numai codurile ASCII, caracterele speciale se pot crea folosind
formatul &nume_caracter - de exemplu, &egrave; pentru e. Având în vedere semnificatia
specialã a caracterelor <, > si &, aparitia lor în documente trebuie specificatã sub forma
caracterelor speciale: &lt; , &gt; , respectiv &amp; .

Prezentãm în continuare un exemplu de document HTML, precum si modul în care

acesta este afisat de Netscape Navigator.

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">

<html>

<head>
<title>Pagina simpla</title>
</head>

<body>
<p>Acesta este un exemplu simplu de o
pagina HTML. Ea arata cum
pot aparea caractere <strong>bold</strong>, <em>italic</em>,
<font size="5">mai mari</font>,
<font size="1">mai mici</font>,
respectiv insera
o mica imagine
<img src="Handshake8114.gif"
width="20" height="14">.
</p>
</body>

</html>

În figura, se observã cã textul propriu-zis al documentului poate fi delimitat fatã de

codurile de marcare, iar formatarea textului din documentul HTML nu corespunde cu cea
afisatã de programul de vizualizare:
  textul este extins pentru a ocupa întregul ecran si este afisat cu un corp de literã diferit
fatã de sursa HTML;
 terminatorii de linie nu sunt respectati;
 spatiile albe suplimentare din documentul sursã sunt ignorate.

Introducerea obiectelor de tip imagine (marcajul <IMG>) este detaliatã mai jos.

Limbajul HTML permite definirea mai multor tipuri de liste si imbricarea lor
(includerea unor liste în altele), caz în care trebuie verificatã cu atentie corespondenta dintre
marcajele de început si sfârsit pentru fiecare listã. Formatarea listelor la afisarea paginii
(introducerea bulinelor, numerotãrii etc.) se face de cãtre programul de navigare.

Elementele listelor se introduc între marcajele <LI> … </LI> ("list item"). Modul de
aparitie al elementelor depinde de tipul de listã în care sunt incluse (cu buline, numerotate
etc.), determinat de marcajul specific.

Astfel, listele pot fi:

 neordonate (cu buline) - delimitate de marcajele <UL> … </UL> ("unordered list");

elementele lor se afiseazã cu buline;
 ordonate (numerotate) - delimitate de marcajele <OL> … </OL> ("ordered list");
elementele lor se vor numerota;
 de tip meniu - delimitate de marcajele <MENU> … </MENU>; elementele acestor
liste apar într-o reprezentare compactã pe ecran (multicoloanã);
 glosare (liste de definitii) delimitate de marcajele <DL> … </DL> ("definition list");
elementele acestora au câte douã componente, introduse respectiv cu marcajele <DT>
(pentru nume) si <DD> (pentru semnificatia asociatã);
 tabele scurte - create cu marcajul <DIR>.

Listele utilizate cel mai frecvent sunt cele ordonate si neordonate. Prezentãm în
continuare un exemplu simplu de paginã HTML care contine aceste tipuri de liste.

<html>

<head>
<title>Pagina cu liste</title>
</head>

<body>

<p>Aceasta pagina exemplifica crearea listelor</p>

<p>Cele mai uzual folosite tipuri de liste sunt:

<ul>
<li>neordonate</li>
<li>ordonate</li>
</ul>

<p>O lista ordonata este o lista numerotata:

<ol>
<li>primul element;</li>
<li>al doilea element...</li>
</ol>

</body>
</html>

Exemple de liste într-o paginã HTML

Marcaje pentru crearea hiperlegãturilor

Hiperlegãturile ("hyperlinks") se introduc cu marcajele <A> … </A> ("anchor") aplicate

asupra unui text sau a unei imagini. Ele se pot crea cãtre:

 adrese URL - astfel se asigurã accesul în cadrul procesului de navigare (prin

protocoale specifice), nu numai la paginile web, ci si la diverse servicii Internet;

 fisiere / resurse locale adicã aflate pe acelasi calculator cu pagina creatã - link-uri
locale ; acestea ar putea fi accesate si printr-un URL cu protocolul "file" dar pentru
mai multã simplitate, este suficientã specificarea numelui si cãii fisierului local;

 o zonã din documentul HTML curent - link-uri interne.

În fiecare din aceste cazuri, un click pe textul sau imaginea respectivã va determina activarea
legãturii si afisarea prin intermediul navigatorului a resursei asociate link-ului.

Resursa asociatã unei legãturi este descrisã prin parametrii marcajului <A>:

 HREF - permite asocierea unei adresei URL, crearea unei legãturi locale prin
specificarea numelui si cãii fisierului corespunzãtor sau a unei legãturi interne
documentului; este cel mai important parametru pentru construirea de hiperlegãturi;

 NAME - numele hiperlegãturii sau al zonei dintr-o paginã cãtre care se face referirea,
în cazul unui link intern;
  METHODS - metodele de acces (acest parametru se utilizeazã doar în prelucrãri
speciale).
Astfel, un link local sau cãtre o adresã URL se poate defini pe un text cu: <A
HREF="resursa"> text </A>.

O legãturã internã cãtre o zonã a documentului curent se indicã folosind marcajul <A
NAME="nume-zona">.

Marcaje pentru introducerea de obiecte

Prima versiune de HTML (1.0) nu permitea descrierea tabelelor sau a informatiilor

formatate. Asemenea obiecte trebuiau create formatat si introduse ca obiect deja formatat, cu
marcajele <PRE>, </PRE>. Aceste marcaje indicau navigatorului cã textul inclus trebuia
afisat caracter cu caracter, fãrã vreo interventie de formatare. În versiunile ulterioare ale
limbajului HTML, s-au introdus însã facilitãti elegante de formatare, de includere a tabelelor
si a altor obiecte.

În HTML 3.0 s-au introdus obiectele de tip tabel, formate din linii orizontale si
coloane verticale la a cãror intersectie se formeazã celulele. Acestea pot contine intrãri
diverse: texte, figuri sau chiar alte tabele. Se pot realiza reuniri de celule (de exemplu, pentru
titluri mai lungi). Atributele de formatare a tabelului (aliniere, stilul chenarului si marginilor
etc.) se definesc în proiectarea paginii dar modul lor de afisare va depinde si de programul de
navigare.

Tabelele se introduc între marcajele <TABLE> … </TABLE>, cãrora li se pot atasa

(optional) parametrii BORDER si RULES. Un titlu pentru tabel se poate introduce cu
marcajul <CAPTION>. Fiecare coloanã se defineste cu marcajul <COL>, având ca parametru
ALIGN - modul de aliniere a informatiilor din acea coloanã (LEFT, CENTER, RIGHT).

Antetul tabelului se poate indica între marcajele <TH>…</TH> ("Table Header"),

pentru trecerea la o linie nouã se utilizeazã marcajul <TR> ("Table Row") iar celulele
individuale se marcheazã cu <TD> ("Table Data"), eventual cu parametru de aliniere. Se mai
pot specifica alinieri orizontale sau verticale ale celulelor, grupãri de celule etc. Aceste
marcaje permit navigatorului sã afiseze diferentiat informatiile din tabel.

Prezentãm în continuare un exemplu simplu de tabel.

<HTML>
<HEAD>
<TITLE>Pagina cu tabel</TITLE>
</HEAD>
<BODY>
<H1>Aceasta pagina da un exemplu de folosire a unui tabel</H1>
<H3>Vanzari anuale:</H3>
<TABLE> <TH>1996</TH><TH>1997</TH><TH>1998</TH><TR>
<TD>125 milioane lei</TD><TD>160 milioane lei</TD><TD>231 milioane lei</TD>
</TABLE>
</BODY>
</HTML>
 Exemplu de tabel într-o paginã HTML

Mãrimea liniilor si a coloanelor poate fi controlatã suplimentar prin marcajele

<ROWSPAN=x> si respectiv <COLSPAN=y>, fiecare indicând mãrimea în "celule
normale". În plus, se poate indica trasarea unei margini pentru tabel, prin marcajul <TABLE
BORDER>.

Includerea imaginilor se face folosind marcajul <IMG>, care are parametri specifici:

 SRC indicã (dupã semnul '=') URL-ul imaginii, respectiv calea fisierului dacã acesta
este local; uzual, se acceptã fisiere în format GIF sau JPEG;
 ALLIGN controleazã alinierea imaginii fatã de limita inferioarã a textului (TOP,
MIDDLE sau BOTTOM); este un parametru optional;
 ALT furnizeazã textul afisat în locul imaginii dacã utilizatorul dezactiveazã optiunea
de afisare a imaginilor (parametru optional);
 ISMAP este un indicator optional pentru imaginile care sunt hãrti selectabile.

Astfel, introducerea simplã a unei imagini se poate realiza cu <IMG SRC="specificare-

imagine">. Un exemplu de imagine inseratã într-o paginã HTML este prezentat în figura de
mai sus.
Remarcãm faptul cã, utilizând parametri specifici, marcajul <IMG> se poate folosi si pentru
inserarea unor fisiere multimedia, cum ar fi secventele video. Având în vedere cã aceste
operatii se realizeazã mai usor folsind un editor HTML.
 4. Cerințe hardware și software

Fiind realizat in HTML, functionarea corecta depinde de foarte putini factori la

nivel hardware.
Configuratia minima necesara :
 procesor la 133MHz
 min. 32 MB RAM (de preferat cel putin 64 MB)
 o placa vidoe care sa suporte mai mult de 256 de culori (optional pentru o
afisare corecta a detaliilor)

Este necesara o versiune a browser-ului care sa permita recunoasterea tuturor

comenzilor ( testul a fost facut cu Internet Explorer 6.0 ), si de asemenea este obligatoriu un
flash player, sau un « patch » pentru flash.
Conditii de testare: proiectul a fost facut si testat pe un
PC AMD Athlon 1700MHz, la 256 MB DDRAM, sistem de operare MS Windows Xp.
 5. Structura și conținutul proiectului

Editoarele de text simple sunt programele de bază, și cele mai folosite, pentru editarea
paginii web. Avantajul folosirii lor este simplitatea, pentru creare paginii web sunt necesare
câteva din codurile invizibile ale limbajului HTML, astfel se crează documente rapid și usor,
în plus ocupă foarte puțin spațiu și resurse de memorie, acestea însă necesită cunoașterea
limbajului HTML. Dintre editoarele de text cunoscute cel mai utilizateste NotePad , care a
fost folosit și pentru această aplicație.

Aplicația a fost realizată în cea mai mare parte în limbajul HTML, prin programare direct
în cod sursă, dar a fost utilizat și CSS.

În primul rând (table row) este prezentat meniul animat,din care poti alege: Home, About,
News și Image gallery.

1. Home - HOME.html.
În această pagină este
prezentată o pagină de
titlul cu logo-ul turneului
de tenis.
2. About - ABOUT.html
În aceasta pagina sunt
prezentate curiozități
despre Wimbledon, dar și
un videoclip ce rezumă
istoria prestigiosului
turneu de tenis.

3. News - NEWS.html
În această pagină sunt prezentate ultimele noutăți referitoare la anularea ediției din
acest an al turneului

4. Image gallery – IMAGE GALLERY.html

În această pagină se prezintă imagini de la turneul de tenis din trecut până în prezent.
Codul sursă al paginii ‘HOME.html’ :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
Wimbledon
</title>
</head>
<center>
<body>
<style type="text/css">
body {
background-image: url("images/vertical07a.jpg");
background-repeat: no-repeat;
background-size: cover;
}

</style>
<img src="images/index1.png" alt="Wimbledon Logo" width="200" height="200"
align="left"><br>
&nbsp; <br>
<hr>
<h3 align="right">
<font face="cinzel" size="6">
<a class="scroll" href="HOME.html"><font face="Lato" color="#00b300">
HOME| </a></font>
<a class="scroll" href="ABOUT.html"><font face="Lato" color="#00b300">
ABOUT| </a></font>
<a class="scroll" href="NEWS.html"><font face="Lato" color="#00b300">
NEWS| </a></font>
<a class="scroll" href="IMAGE GALLERY.html"><font face="Lato"
color="#00b300"> IMAGE GALLERY| </a></font>
</font>
</h3><hr>
 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<h1 align="center">
<font face="Lato" color="#38cf3a" size="7">
WIMBLEDON TENNIS CHAMPIONSHIPS
</font>
</h1>
<h3 align="center">
<font face="Lato" color="#3bdb3d" size="5">
~ held at the All England Club in Wimbledon, London ~
</font></h3><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<hr>
<footer><strong><font face="Lato" color="#00b300">Project realized by Petrea
Daniela</font></strong></footer>
<hr>
</body>
</html>

Codul sursă al paginii ‘ABOUT.html’ :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
Wimbledon
</title>
</head>
<center>
<body>
<style type="text/css">
body {
background-image: url(images/vertical08a.jpg);
background-repeat: no-repeat;
background-size: cover;
}
</style>
<img src="images/index1.png" alt="Wimbledon Logo" width="200" height="200"
align="left"><br>
&nbsp; <br>
<hr>
<h3 align="right">
<font face="cinzel" size="6">
<a class="scroll" href="HOME.html"><font face="Lato" color="#065c08">
HOME| </a></font>
<a class="scroll" href="ABOUT.html"><font face="Lato" color="#065c08">
ABOUT| </a></font>
<a class="scroll" href="NEWS.html"><font face="Lato" color="#065c08">
NEWS| </a></font>
 <a class="scroll" href="IMAGE GALLERY.html"><font face="Lato"
color="#065c08"> IMAGE GALLERY| </a></font>
</font>
</h3>
<div class="desc" align="right"><img src="images/linie.png" width="605"
height="120"></div>
<h1 align="center"><font face="Lato" color="#333300" size="7"><strong>Wimbledon
Championships: all you need to know</strong></h1>
<div class="desc" align="center"><font face="Lato" color="#333300"
size="5"><strong>There is surely no tennis event&nbsp;quite so thrilling and watched the
world over as Wimbledon.The Championships normally start&nbsp;in the last week of June
and run&nbsp;for 2 weeks. Here are&nbsp;10 juicy&nbsp;facts about Wimbledon that you
may not know...</strong></div>
<p style="text-align: center;"><span style="color: #008080;"><strong><video
controls="controls" width="1440" height="720">
<source src="images/1.mp4" type="video/mp4" /></video></strong></span></p>
<li style="text-align: center;"><font face="Lato" color="#333300"
size="5">&nbsp;Wimbledon is the <strong>world&rsquo;s oldest tennis
tournament</strong>, established at the All England Croquet and Lawn Tennis Club (now
often referred to as AELTC) in 1877.</font></h1></ul>
<img src="images/linie.png" width="605" height="120"> </p>
<li style="text-align: center;"><font face="Lato" color="#333300" size="5">The All
England Croquet and Lawn Tennis Club hosted the first tournament in 1877, during the reign
of <strong>Queen Victoria</strong>.</span></li>
<img src="images/linie.png" width="605" height="120"> </p>
<li style="text-align: center;"><font face="Lato" color="#333300" size="5">The
<strong>first televised airing</strong> of The Championships, Wimbledon was by the BBC
on 21 June 1937.</span></li>
<img src="images/linie.png" width="605" height="120"> </p>
<li style="text-align: center;"><font face="Lato" color="#333300" size="5">The courts are
sown with 100% perennial ryegrass and Wimbledon is the <strong>only Grand Slam event in
the world played on grass</strong>.</span></li>
<img src="images/linie.png" width="605" height="120"> </p>
<li style="text-align: center;"><font face="Lato" color="#333300" size="5">Centre Court is
now fitted with a <strong>retractable roof</strong> to help avoid rain delays that have been
an infamous feature of&nbsp;the tournament throughout its history.</span></li>
<img src="images/linie.png" width="605" height="120"> </p>
<li style="text-align: center;"><font face="Lato" color="#333300" size="5">Champions
receive a <strong>3/4-size replica of their trophy</strong>.</span></li>
<img src="images/linie.png" width="605" height="120"> </p>
<li style="text-align: center;"><font face="Lato" color="#333300" size="5">Wimbledon is
synonymous with strawberries. That&rsquo;s why, every year, over <strong>140,000 bowls
of strawberries and cream</strong> are dished out for the spectators and players.</span></li>
<img src="images/linie.png" width="605" height="120"> </p>
<li style="text-align: center;"><font face="Lato" color="#333300" size="5">Wimbledon
rules state that all players must be dressed almost entirely in <strong>white</strong>.
Umpires can ask a player to change if they don&rsquo;t meet the dress code.</span></li>
<img src="images/linie.png" width="605" height="120"> </p>
<li style="text-align: center;"><font face="Lato" color="#333300" size="5">Tennis balls
weren&rsquo;t always yellow. The originally <strong>white balls </strong>were replaced in
1986 so that they could be seen more easily on television.</span></li>
<img src="images/linie.png" width="605" height="120"> </p>
<li style="text-align: center;"><font face="Lato" color="#333300" size="5">Players take the
most famous court, Centre Court, at the All England Club beneath an excerpt from
<strong>Rudyard Kipling</strong>'s poem <strong>"If"</strong> that reads:</span>
<div class="desc" align="center"><font face="Lato" color="#333300" size="5"><em>If you
can meet with Triumph and Disaster</em></div>
<div class="desc" align="center"><font face="Lato" color="#333300" size="5"><em>And
treat those two impostors just the same</em></div>
<img src="images/linie.png" width="605" height="120"> </p> </td>
<hr>
<footer><strong><font face="Cambria" color="#149916">Project realized by Petrea
Daniela</font></strong></footer>
<hr>
</body>
</html>

Codul sursă al paginii ‘NEWS.html’ :

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<link rel="stylesheet" href="assets/css/main.css" />

<title>

Wimbledon

</title>

</head>

<center>

<body>

<style type="text/css">

body {

background-image: url(images/vertical09a.jpg);

background-repeat: no-repeat;
 background-size: cover;

</style>

<img src="images/index1.png" alt="Wimbledon Logo" width="200" height="200"

align="left"><br>

&nbsp; <br>

<hr>

<h3 align="right">

<font face="cinzel" size="6">

<a class="scroll" href="HOME.html"><font face="Lato" color="#00b300">

HOME| </a></font>

<a class="scroll" href="ABOUT.html"><font face="Lato" color="#00b300">

ABOUT| </a></font>

<a class="scroll" href="NEWS.html"><font face="Lato" color="#00b300">

NEWS| </a></font>

<a class="scroll" href="IMAGE GALLERY.html"><font face="Lato"

color="#00b300"> IMAGE GALLERY| </a></font>

</font>

</h3><hr>

<section id="banner">

<div class="inner">

<header>

<h1>Cancellation of The Championships 2020</h1>

<p>~SAFETY FIRST~</p>

</header>

</div></section>

<section class="wrapper style1">

<div class="inner">

<div class="flex flex-2">

<div class="col col1">

<div class="image round fit">

<img src="images/pic01.jpg" alt="" />

</div>

</div>

<div class="col col2">

<h3>First Wimbledon cancellation since the Second World War</h3>

<p>It is with great regret that the Main Board of the All England Club (AELTC) and the
Committee of Management of The Championships have today decided that The
Championships 2020 will be cancelled due to public health concerns linked to the
coronavirus epidemic.</p>

<p>Wimbledon has previously only been cancelled due to World War 1 and World War 2,
with 1945 being the last year in which the event was not held.The 134th Championships will
instead be staged from 28 June to 11 July 2021.</p>

</div>

</div>

</div>

</section>

<section class="wrapper style3">

<div class="inner">

<div class="flex flex-2">

<div class="col col2">

<h3>Players react to Wimbledon cancellation</h3>

<p><font color="#065c08" size="3">WTA stars quickly took to social media to say 'see you
next year' to Wimbledon, including defending champion Simona Halep, who shared an
optimistic message: "We are going through something bigger than tennis and Wimbledon
will be back!"</p></font>

<p><font color="#065c08" size="3"> "It will always be the tournament of my life", said
defending doubles champion Barbora Strycova.Two-time Wimbledon champion Petra
Kvitova says it's 'definitely a tough one to take'.</p></font>
<p><font color="#065c08" size="3"> Former champion Angelique Kerber reflected,"There
are more important things that we have to focus on right now. " We're all 'Shooked'- former
World No.1 - and six-time Wimbledon winner - Serena Williams reacts. </p></font>

<p><font color="#065c08" size="3">"Devastated",tweeted the eight-times Wimbledon

singles winner Federer, adding:"I can't wait to come back next year. It only makes us
appreciate our sport even more during these times."</p></font>

</div>

<div class="col col1 first">

<div class="image round fit">

<img src="images/pic02.jpg" alt="" />

</div>

</div>

</div>

</div>

</section>

<div class="image round fit">

<img src="images/banner1.jpg" align="center">

</div>

</div>

</div>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/><br /><br /><br /><br /><br />

<hr>

<footer><strong><font face="Cambria" color="#149916">Project realized by Petrea

Daniela</font></strong></footer>

<hr>

</body>

</html>
Codul sursă al paginii ‘IMAGE GALLERY.html’ :

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>

Wimbledon

</title>

</head>

<center>

<body>

<style type="text/css">

body {

background-image: url(images/vertical06a.jpg);

background-repeat: no-repeat;

background-size: cover;

</style>

<img src="images/index1.png" alt="Wimbledon Logo" width="200" height="200"

align="left"><br>

&nbsp; <br>

<hr>

<h3 align="right">

<font face="cinzel" size="6">

<a class="scroll" href="HOME.html"><font face="Lato" color="#00b300">

HOME| </a></font>

<a class="scroll" href="ABOUT.html"><font face="Lato" color="#00b300">

ABOUT| </a></font>
 <a class="scroll" href="NEWS.html"><font face="Lato" color="#00b300">
NEWS| </a></font>

<a class="scroll" href="IMAGE GALLERY.html"><font face="Lato"

color="#00b300"> IMAGE GALLERY| </a></font>

</font>

</h3><hr>

<br>

<h1 align="center">

<font face="Cambria" color="#149916" size="7">

Wimbledon in pictures through the years

</font>

</h1>

<table align="centre">

<tr>

<td>

<img src="images/01.jpg" height="350" width="400"/>

<div class="desc" align="centre"><font face="Cambria" color="#065c08"

size="2"><b>In 1883,the first ever international match was played at Wimbledon between
twins William and Ernest Renshaw of England,and Clarence M.and J.S.Clark of the
U.S.</div>

</div></font></b>

</td>

<td>

<img src="images/02.jpg" height="350" width="400"/>

<div class="desc" align="center"><font face="Cambria" color="#065c08"

size="2"><b> Player Ethel Larcombe competes in the women's singles competition in
1914.</div>

</div></font></b>

</td>
 <td>

<img src="images/03.jpg" height="350" width="400"/>

<div class="desc" align="center"> <font face="Cambria" color="#065c08"

size="2"><b>Rene Lacoste of France plays against J.O. Anderson of Australia during the
1925 men's semifinals.</div>

</div></font></b>

</td>

</tr>

<tr>

<td>

<img src="images/04.jpg" height="350" width="400"/>

<div class="desc"align="center"><font face="Cambria" color="#065c08"

size="2"><b>Champion Dorothea Lambert Chambers bows in the presence of King George
V and Queen Mary during the opening ceremony for Wimbledon's jubilee year, 1926.</div>

</div></font></b>

</td>

<td>

<img src="images/05.jpg" height="350" width="400"/>

<div class="desc" align="center"> <font face="Cambria" color="#065c08"

size="2"><b>Tennis partners Evelyn Colyer and P.D. Spence compete in a mixed doubles
match in 1926. </div>

</div></font></b>

</td>

<td>

<img src="images/06.jpg" height="350" width="400"/>

<div class="desc" align="center"><font face="Cambria" color="#065c08"

size="2"><b> Players Helen Wills and Elizabeth Ryan are greeted by a swarm of
photographers on the court in 1928.</div>

</div></font></b>

</td>
 </tr>

<tr>

<td>

<img src="images/07.jpg" height="350" width="400"/>

<div class="desc" align="center"><font face="Cambria" color="#065c08"

size="2"><b> Wimbledon's center court suffered bomb damage durning World War II, but
was fully restored, with additional seating, by 1949. </div>

</div></font></b>

</td>

<td>

<img src="images/08.jpg" height="350" width="400"/>

<div class="desc" align="center"><font face="Cambria" color="#065c08"

size="2"><b> After a professional tennis career of nearly 25 years, Billie Jean King retired
with 39 Grand Slam titles to her name. </div>

</div></font></b>

</td>

<td>

<img src="images/09.jpg" height="350" width="400"/>

<div class="desc" align="center"><font face="Cambria" color="#065c08"

size="2"><b> Queen Elizabeth II praised Virginia Wade for winning Wimbledon.Virginia
Wade was the last British woman to win the women's singles title at Wimbledon. </div>

</div></font></b>

</td>

</tr>

<tr>

<td>

<img src="images/010.jpg" height="350" width="400"/>

<div class="desc" align="center"><font face="Cambria" color="#065c08"

size="2"><b> Andre Agassi won his first and only Wimbledon title in 1992. </div>

</div></font></b>
 </td>

<td>

<img src="images/011.jpg" height="350" width="400"/>

<div class="desc" align="center"><font face="Cambria" color="#065c08"

size="2"><b> The 2009 Wimbledon final between Roger Federer and Andy Roddick was the
longest Grand Slam final ever, with a Federer winning after a fifth set of 16-14. </div>

</div></font></b>

</td>

<td>

<img src="images/012.jpg" height="350" width="400"/>

<div class="desc" align="center"><font face="Cambria" color="#065c08"

size="2"><b> Simona Halep wins Wimbledon as she crushes Serena Williams in stunning
display in 2019. </div>

</div></font></b>

</td>

</tr>

</table>

</body>

<br>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/><br /><br /><br /><br /><br /><br /><br />

<hr>

<footer><strong><font face="Cambria" color="#149916">Project realized by Petrea

Daniela</font></strong></footer>

<hr>

</body>

</html>
 6. Bibliografie

 https://www.britain-magazine.com/features/region/england/london/a-history-of-
wimbledon-tennis/
 https://www.wtatennis.com/tournament/904/wimbledon

 https://www.historic-uk.com/CultureUK/The-History-of-the-Wimbledon-Tennis-
Championships/

 https://en.wikipedia.org/wiki/The_Championships,_Wimbledon

 https://www.britain-magazine.com/features/region/england/london/a-history-of-
wimbledon-tennis/

 https://www.britannica.com/sports/Wimbledon-Championships

 https://www.wimbledon.com/en_GB/news/index.html

 https://www.creeaza.com/referate/informatica/baze-de-date/Documentatie-
proiect-atestat-i551.php

 https://www.youtube.com/watch?v=KXNnYDnE97c

 http://qnimate.com/creating-a-slider-using-html-and-css-only/