Raportul Lucrarilor de Laborator la T.r

Raportul Lucrarilor de Laborator la T.r

Byadmin ianuarie 1, 2024

Introducere

HTML reprezinta unul din primele elemente fundamentale ale WWW ( World Wide Web ) ( Hypertext Markup Language ), care descrie formatul primar in care documentele sint distribuite si vazute pe Web. Multe din trasaturile lui, cum ar fi independenta fata de platforma, structurarea formatarii si legaturile hipertext, fac din el un foarte bun format pentru documentele Internet si Web.

Astfel prioritățile si facilitatile oferite de HTML vor contribui la îndeplinirea sarcinii lucrarii, care consta in elaborarea unei pagini web ce va prezenta date privitoare la activitatea literara a scriitorilor si poetilor literaturii noastre.

Realizara sarcinii se va indeplini prin intermediul codurilor HTML, CSS si Java Script. Datele privitoare la scriitori si poeti sint incadrate in zece fisiere HTML si un fisier CSS. Dinamica in pagina este asigurata prin inermediul codurilor JavaScript. Deci, lucrara dată constituie o sinteza a posibilitatilor oferite de HTML care este in continua perfectionare, completare si nu in ultimul rind-evolutie.

I. HTML-Notiuni de baza

I.1 HTML

HTML a fost dezvoltat initial de Tim Berners-Lee la CERN in 1989. El permite transportul de informatie prin retea de la diferite computere datorita trasaturilor sale: independenta de platforma, posibilitati hypertext si structurarea documentelor.

Structura unui document HTML:

<html>
<head><title> titlul paginii</title>
</head>
<body>
</body>
</html>

Blocuri de text

<address>…</address>- Inserarea unei adrese

<pre>…</pre> -Caracterul " spatiu " va fi luat in considerare de browser

<p>…</p> – Blocuri paragraf ,cu ajutorul etichetei paragraf este posibil trecerea la o linie noua si permite: inserarea unui spatiu suplimentar inainte si dupa de blocul paragraf, alinierea textului cu ajutorul atributului align.

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>. -Blocuri de titlu

<nobr>…</nobr> Blocul de text cuprins intre etichetele va fi afisat pe o singura linie.

<div>…</div>- Blocul de text ce permite alinierea stinga, dreapta, centru :

Stiluri pentru blocurile de text

<b>…</b> – Un bloc de text va aparea in pagina evidentiat.<i>…</i>
<big>…</big>-Textul va fi scris cu carcatere mai mari cu o unitate decat cele curente. <small>…</small>-Textul va fi scris cu carcatere mai mici cu o unitate decat cele curente.
<i>…</i> -Textul va fi scris cu carcatere cursive

<u>…</u> -Insera unui bloc de caractere subliniate

<sub>…</sub>- Insereaza secvente de text aliniate ca indice (sub-script) sau ca exponent (super-script) si respectiv-<sup>…</sup>.

Atributele fontului

culoare (stabilita prin atributul color);

Sunt disponibile cel putin 16 nume de culori: aqua, black, fuchsia, gray, green lime, maroon, navy, olive, purple, red, silver, teal, white si yellow.

Prin constructia " #rrggbb " unde r (red), g (green), sau b (blue) sunt cifre hexazecimale si pot lua valorile: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C, d, D, e, E, f, F.

tipul sau stilul (stabilit prin atributul face);

Exista cinci familii generice de fonturi care sunt de regula disponibile pe toate calculatoarele utilizatorilor: serif, sans serif, cursive, monospace si fantasy.

marimea (definita prin atributul size);

Valorile acestui atribut pot fi:

1, 2, 3, 4, 5, 6, 7 ( 1 pentru cel mai mic font si 7 pentru cel mai mare);

+1, +2, etc. pentru a mari dimensiunea fontului cu 1, 2, etc. fata de valoarea curenta;

-1, -2, etc. pentru a micsora dimensiunea fontului cu 1, 2, etc. fata de valoarea curenta.

marimea in puncte tipografice (stabilita prin atributul point-size);

Acest atribut functioneaza numai cu Netscape Communicator.

grosime (definita prin atributul weight).

Imagini

Imaginile sunt stocate in fisiere cu diverse formate. Formatele acceptat de browsere pentru fisierele imagine sunt:

GIF (Graphics Interchange Format) cu extensia .gif;

JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau .jpg;

XPM (X PixMap) cu extensia .xmp;

XBM (X BitMap) cu extensia .xbm;

BMP (BitMap) cu extensia .bmp (numai cu Internet Explorer);

TIFF (Tagged Image File Format) cu extensia .tif sau .tiff;

<img src="sursa imaginii "> …-introducerea unei imagini in documentul HTML

<img border= numar intreg>- adauga chenar in jurul imaginii.
width si height. – modificarea dimensiuniile prestabilite ale unei imagini.

align : left , right ,top , middle, bottom.-alinierea unei imagini.

hspace si vspace-precizeaza distanta in pixeli pe orizontala , respectiv pe verticala, dintre imagine si restul elementelor din pagina.

Legaturi

Lagaturile (link-urile) reprezinta partea cea mai importanta a unei pagini Web.Ele transforma un text obisnuit in hipertext sau hiperlegatura, care premite trecerea rapida de la o informatie aflata pe un anumit server la alta informatie memorata pe un alt server aflat oriunde in lume. Legaturile sunt zone active intr-o pagina Web, adica zone de pe ecran sensibile la apasarea butonului stang al mouse-ului.

O legatura catre o pagina aflata in acelasi director

O legatura catre o pagina aflata in acelasi director se formeaza cu ajutorul etichetei <a> (de la "anchor"=ancora).
Pentru a preciza pagina indicata de legatura se utilizeaza un atribut al etichetei <a> numit href, care ia valoare numele fisierului HTML aflat in acelasi director.

Ancore

Intr-o pagina foarte lunga pot exista puncte de reper catre care se definesc legaturi.
O ancora se defineste de asemenea prin eticheta <a>. Pentru a defini ancora se utilizeaza atributul name care primeste ca valoare un nume atribuit ancorei (de exemplu "leg1").
Pentru a insera o legatura catre "leg1" definita in aceeasi pagina se utilizeaza eticheta <a> avand atributul href de valoare "#leg1".
Pentru a introduce o legatura catre o ancora definita in alt document (alta pagina) aflat in acelasi director, atributul href primeste o valoare de forma "nume_fisier.html#nume_ancora".

Ancore definite prin atributul id

Atributul id este un atribut universal ,adica poate fi atasat oricarui element al unei pagini Web.
Acest atribut va inlocui complet atributul name, care putea fi atasat numai anumitor elemente.
Atributul id primeste ca valoare un nume (de exemplu "id1") care identifica in mod unic un element. Atributul id poate fi utilizat pe post de ancora intr-o pagina Web conform sintaxei:
<eticheta id = "id1"> … </eticheta>
<a href = "#id1" >Link catre elementul "id1" </a>

Alegerea culorilor pentru legaturi

In mod prestabilit se utilizeaza trei culori pentru legaturi: Aceste atribute pot fi stabilite cu ajutorul a trei atribute ale etichetei <body>:

link pentru legaturile nevizitate;

vlink pentru legaturile vizitate;

alink pentru legaturile active

Liste

Unul din cele mai obisnuite elemente din documentele cu mai multe pagini este un set de definitii, referinte sau indexuri. Glosarele sunt exemple clasice in acest sens; cuvintele sunt listate in ordine alfabetica, urmate de definitii ale termenilor respectivi.

Liste de definitii

<dl>…</dl>-marcaje pentru lista de definitii

<dt> -Initierea uni termen al listei

<dd> – Initierea definitiei unui termen .

Liste neordonate

<ul>…</ul>-bloc pentru scrierea listei neordonate

<li> -Initierea fiecarui element al listei .

Valorile atributului type:

"circle"

"disc"

"square"

Liste ordonate

<ol>…</ol> -o lista ordonata de elemente .

<li> -Initierea fiecarui element al listei .

Valorile atributului type:

" A " pentru ordonare de tipul A , B , C , D etc. ( litere mari );

" a " pentru ordonare de tipul a , b , c , d etc. ( litere mici );

" I " pentru ordonare de tipul I , II , III , IV etc. ( cifre romane mari );

" i " pentru ordonare de tipul i , ii , iii , iv etc. ( cifre romane mici );

" 1 " pentru ordonare de tipul 1 , 2 , 3 , 4 etc. ( cifre arabe – optiune prestabilita)

Tabele

Tabelele ne permit sa cream o retea dreptunghiulara de domenii, fiecare domeniu avand propriile optiuni pentru culoarea fondului, culoarea textului, alinierea textului etc.
<table>…</table>.- Inserarea unei tabel .

<tr>…</tr>-Inserarea unei rand intr-un tabel.

<td>..</td>- Inserarea unei celule intr-un tabel.

<table align="left"sau"right"sau"center">Alinierea tabelului la stinga sau dreapta sau centru.

<table bgcolor>-Definirea culorilor de fond pentru un tabel.

<table cellspacing >-Defineste distanta dintre doua celule vecine.

<table cellpading >-Defineste distanta dintre celula si continutul ei.

<table width= » » height= » » >-Defineste latimea si inaltimea tabelului
<tr bgcolor >- Definirea culorilor de fond pentru un rind.

<td bgcolor >- Definirea culorilor de fond pentru o celula.

<td width= height=>-Latimea si inaltimea celulei.

<td align=" left" , "center ", "right" , "char" >-Alinierea pe orizontala a continutului celulei.

<td valign=" baseline", " bottom "," middle ", " top ">Alinierea pe vertricala a continutului. <table frame=””> permite specificarea partilor din chenarul unui tabel care vor fi afisate.

void – elimina toate muchiile exterioare ale tabelului;

above – afiseaza o muchie in partea superioara a cadrului tabelului;

below – afiseaza o muchie in partea inferioara a cadrului tabelului;

hsides – afiseaza cate o muchie in partea superioara si inferioara cadrului tabelului;

lhs – afiseaza o muchie in partea din stanga a cadrului tabelului;

rhs – afiseaza o muchie in partea din dreapta a cadrului tabelului;

vsides – afiseaza o muchie in partea din stanga si din dreapta a cadrului tabelului;

box – afiseaza o muchie pe toate laturile cadrului tabelului;

border – afiseaza o muchie pe toate laturile cadrului tabelului;

<table rules= > Permite alegerea unor delimitatori pentru celulele unui tabel.

none – elimina toate muchiile interioare ale tabelului;

groups – afiseaza muchii orizontale intre toate grupurile din tabel.Grupurile sunt specificate prin elementele <thead>, <tbody>, <tfoot>si <colgroup>.

rows – afiseaza muchii orizontale intre toate liniile tabelului;

cols – afiseaza muchii verticale intre toate coloanele tabelului;

all – afiseaza muchii intre toate liniile si coloanele;

Ferestere in HTML

Ferestrele sau (cadrele) ne permit sa definim in fereastra browserului subferstre in care sa fie incarcate documente HTML diferite.Ferestrele sunt definite intr-un fisier HTML special , in care blocul <body>…</body> este inlocuit de blocul <frameset>…</frameset>.
In interiorul acestui bloc, fiecare cadru este introdus prin eticheta <frame>.

Un atribut obligatoriu al etichetei <frame> este src, care primeste ca valoare adresa URL a documentului HTML care va fi incarcat in acel frame. Definirea cadrelor se face prin impartirea ferstrelor (si a subferestrelor) in linii si coloane:

impartirea unei ferstre intr-un numar de subferestre de tip coloana se face cu ajutorul atributului cols al etichetei <frameset> ce descrie acea fereastra;

impartirae unei ferestre intr-un numar de subferestre de tip linie se face cu ajutorul atributului rows al etichetei <frameset> ce descrie acea fereastra;

Valoare atributelor cols si rows este o lista de elemente separate prin virgula , care descriu modul in care se face impartirea ferestrei.

Formulare

Un formular este un ansamblu de zone active alcatuit din butoane ,casete de selectie,campuri de editare etc. Formularele va asigura construirea unori pagini Web care permit utilizatorilor sa introduca efectiv informatii si sa le transmita serverului.

<form> si </form>-Definirea unui formular.

<input type="text" name="Numele" size=""></input> camp de editare de tip text

<input type="text" name="Password"> </input>camp de editare ce nu afiseaza caracterele in clar,ci numai caractere *

<input type="radio" name="Nume "> Text</input>Butoanele radio permit alegerea unei singure variante din mai multe posibile.

<input type="checkbox" name="nume_selectare" -permite selectarea sau deselctarea unei optiuni sau a mai multor.
<option value="Valoare "> – introduce o lista de selectie ce permite aleagerea a unui sau mai multe elemente dintr-o lista finita. Elementele listei sunt incluse cu eticheta <option>.

<textarea name="Nume_cimp _editare " cols=".." rows=".." wrap="…"> …</textarea> Include in formular campuri de editare multilinie.

<input type="reset" value="valoare_buton"> reseteaza datele din formular

<input type="submit" value=" valoare_buton "> Creaza un buton de expediere a formularului

I.2 CSS

CSS este un acronim provenind din Cascading Style Sheets, care insemna “foi de stil in cascada”. Css nu este definit ca un nou limbaj, ci ca un mecanism care permite formatarea documentului HTML. Folosind CSS obtinem urmatoarele avantaje :

Un control fin asupra paginii web.

Ecaderea dimensiunii in octeti a paginii web, atunci cin codul Css se afla in alt fisier extern.

Ofera o flexibilitate sporita, modificind fisierul Css, modificam simultan toate paginile web in care cesta este inclus.

Permite elaborarea unor efecte mai sophisticate comparative cu HTML.

Css-ul prezinta si dezavantaje:Pagina Css poate arata diferit in diferite navigatoare, deoarece nu toate browserele interpreteaza Css-ul.

Stiluri dedicate

Aceste stiluri se aplica blocurilor de text pentru care sunt definite. De exemplu:

<style>

h1 {text-align:center; color:red;}

</style>

Toate titlurile care apar in fgisier ca fiind de marime 1 vor fi de culoare rosie si centrate.
Daca dorim ca acelasi stil sa fie utilizat de catre mai multe elemente (de ex. "h1", "h2", si "p") atunci se utilizeaza o lista acestor elemente, separate prin virgula:

<style>

h1, h2, p {text-align:center; color:red;}

</style>

Clase de stiluri

Aceste stiluri permit definirea unui stil general si folosirea lui oriunde este necesar. Exemplu:
Definim o clasa de stiluri "ac" (albastru si centrat) in interiorul blocului <style>…</style>, aflat la randul lui in blocul <head>…</head>:

<html>

<head><title>clasa de stiluri dedicata</title>

<body> <p>Acesta este un paragraf normal

<br> <p class=ac>Acesta este un paragraf albastru si centrat</body></html>

Stiluri " identificate "

Toate elementele unui document admite un atribut universal numit id. Atributul id poate identifica stilul utilizat de un element.

Daca dorim ca un stil " identificat " sa fie aplicabil numai pentru anumite elemente ale documentului ( de exemplu "h2") atunci in constructia selectorului va aparea acest element (de exemplu "h2#ac").

Stiluri in-line

Stilurile in-line sunt definite chiar in eticheta ce initiaza blocul in care dorim sa se aplice aceste stiluri. Pentru aceasta se utilizeaza atributul universal style (comun practic tuturor etichetelor ce par intr-un document HTML).Valoarea data atributului style este tocmai descrierea stilului, cuprinsa nu intre acolade {..} ci intre ghilimele "…".
<h2 style = " color: red; text-align: center;">

Acest header de marimea 2 este de culoare rosie si este centrat.</h2>

Stiluri definite in fisiere externe

Stilurile definite in interiorul unui bloc <style>…</style> pot fi transferate intr-un fisier extern existand astfel posibilitatea utilizarii lor in mai multe fisiere HTML. Astfel se va crea un fisier care sa contina numai descrierea stilurilor si se salveaza cu extensia .css sau .html., iar in blocul <head>…</head> se include :<link rel=styleSheet href= nume_fisier.CSS

Gestionarea cursorului

style="cursor :e-resize"-Reseteaza cursorul la pozitionarea sa pe un element al pagii. Comanda poate fi inclusa in diferite etichete.Valorile cursorului pot fi (Vezi tabele)

I.3 JavaScript

JavaScript este un nou limbaj de scripting ca este dezvoltat de Netscape. Cu ajutorul JavaScript putem creea cu usurinta pagini web interactive.

Crearea ferestrelor

Deschiderea unei noi ferestre de browser este una dintre proprietatile extraordinare ale JavaScript. Putem sa incarcam fie un document nou (de exemplu un document HTML) in noua fereastra, fie putem crea un nou document. Mai intai vom vedea cum puteti deschide o noua fereastra, incarca o pagina HTLM in aceasta fereastra si apoi sa o inchideti la loc.
Urmatorul script deschide o noua fereastra browser si incarce o pagina oarecare:

<head>

function openWin() {

myWin= open("bla.htm");}

</script>

</head>

<body>

<form>

</form>

</body>

Inchiderea ferestrei

Puteti inchide ferestrele prin intermediul JavaScript. Pentru acesta trebuie sa folositi metode close().

function closeIt() {

close();}

</script>

<form>

</form>

Afisarea textului pe bara de stare poate fi usor utilizata in combinatie cu legaturile hipertext. In loc ca bara de stare sa afiseze locatia web a paginii din link este posibil ca pe bara de stare sa aveti o descriere a paginii urmatoare.

<a href="don.htm"

onMouseOver="window.status='click me!'; return true;"

onMouseOut="window.status=''page">link</a>

Aici utilizam onMouseOver si onMouseOut pentru a detecta cand pointerul mouseului trece deasupra legaturii (linkului).

<SCRIPT LANGUAGE="JavaScript">…</SCRIPT>-este un element care specifica instructiunile Java Script pe care le executa bowserul.

alert(" Mesajul !");-functia data creaza o caseta simpla de dialog unde e expus textul dintre ghilimele.

Date- obiect ce returneaza data curenta a sistemului.

String-memoreaza si manipuleaza un sir de caractere.

document.write("….");-introducerea unui text.

prompt()-functie ce permite crearea unei casete de dialog prin care se pot introduce date de la tastatura.

eval()-functie ce permite calcularea unei expresii.

for(variabila; conditie1; conditie2) -ciclu ce se executa atita timp cit conditia e adevarata.

…. ;

while(conditie)-ciclu ce se executa aita timp cit conditia este falsa.

{

….}

II. Taguri Utilizate

Taguri CSS

<div class=x > …</div>- in interiorul instructiuniei se va scrie portiunea de document asupra caruia vor avea actiune instructiunile selectorului x.

style=" cursor:n-resize"- indica ce forma va lua cursorul pozitionindu-se pe diferite obiecte

body {background-image:url(d:/HTML/HTML_lab/….jpg);}-punerea unei imagini ca fundal.

background-attachement:fixed;- fixarea fundalului

background-color:…;-culoarea fundalului

background-repeat- indica daca fundalul sse va repeat sau nu in dependenta de valorile ce le primeste( repeat, repeat-x, repeat-y,no-repeat).

background-position="…", are valori(top, center, bottom,left,right, cit si procente)- pozitia fundalului .

<img class="s" src="… " style="float:right;"-imagine aliniata la dreapta.

color:black;- culoarea fontului

background:deepskyblue;-culoarea fondului pe care e scris textul

font-size: 20px;-marimea rtextului

font-weight:900;-grosimea textului

word-spacing:1cm;-distanta dintre cuvinte

letter-spacing:0.3 cm;-distanta dintre litere

text-transform:uppercase;-text scris cu litere mari, alte valori sunt(lowercase, capitalize)

text-align:center;-alinierea textului

font-family: -familia fontului

font-style: stillul fontului (normal, italic, bold..);

text-decoration 🙁 none, blink,linethrough, overline);

filter:alpha(Opacity= incetosarea text la dreapta rindului, Finish Opacity=la stinga, Style= tipul incetosarii); -stabileste un filtru.

filter:shadow(color=… –culoarea umbrei, Directon=…-directia umbrei);

Taguri HTML

<body bgcolor=culoare>- Permite alegerea unei culor pentru fondul paginii.

<b>…</b> – Text inclus intre delimitatorii va aparea in pagina cu caractere aldine.

<basefont size = numar color = culoare style = font> – Atributele etichetei date indica marimea, culoarea si fontul textului.

<big>…</big> -Textul din bloc va fi scris cu carcatere mai mari cu o unitate decat cele curente

<p> …</p>-un paragrapf de text.

<div>… </div>-bloc de text ce admite sublocuri.

<img src="w3.gif">-Inserarea unei imagini ce se afla in acelsi directoriu.
<img src="w3.gif" border="…" width="…" height="…%">- attributele etichetei <img>.
<a href="Blaga.html"> Lucian Blaga</a>- crearea unei legaturi.

<ul>

<il> I element al listei </il>- crearea listei neordonate.

. . .

</ul>

<table>…</table> -Inserarea unui tabel.

<tr>…</tr>- inserarea unui rand intr-un tabel

<td>..</td>- inserarea unei celule in rind.

<table border=”0”>-tabelul va fi fara chenar.

<caption align="top" > -atasarea unui titlu si pozitionarea lui.

Atributele lui <table>

– align="left" alinierea tabelului la stinga

– bgcolor=#ffccdd culoarea fondului tabelului

– cellspacing="" Distanta dintre doua celule vecine .

– cellpadding="" Distanta dintre marginea unei celule si continutul.

-width latimea tabelului.

– height inaltimea tabelului.

frame -specifica partile chenarului unui tabel care vor fi afisate.
rules- alegerea unor delimitatori pentru celulele unui tabel.

width pentru latime si height pentru inaltime unei celule.

</form>-Definirea unui formular. – formeaza un buton cu numele Poeziile lui L. Blaga, cind se face clik pe le se deschide alta fereastra.

Taguri JavaScript

<SCRIPT LANGUAGE="JavaScript">…</SCRIPT>-este un element care specifica instructiunile Java Script pe care le executa bowserul.

alert(" Mesajul !");-functia data creaza o caseta simpla de dialog unde e expus textul dintre ghilimele.

Date()-returneaza data curenta a =sistemului;

getHours()-returneaza ora.

getMinutes()-returneaza minutele.

getSeconds()-returneaza secundele.

getMonth()-returneaza luna.

getYear()-returneaza-anul

open ()-metoda ale obiectului window ,deschide o fereastranoua.

close() – metoda ale obiectului window de inchidere a unei ferestre ale browserului.

Urmatorul fragment de program insereaza in documentul HTML o imagine ce va alterna cu alta atunci cind cursorul se pozitioneaza pe imagine.

Urmatorul fragment de program insereaza in documentul HTML doua imagi una se suprapune cu alta.

Urmatorul fragment permite vizualizarea succesiva a imginilor peirn accesarea unui link.

var num=1

img1 = new Image () img1.src = "eminescu1.jpg"

img2 = new Image () img2.src = "eminescu2.jpg"

img3 = new Image () img3.src = "eminescu3.jpg"

function slideshow() {num=num+1 if (num==4){num=1}

document.poet.src=eval("img"+num+".src")}</SCRIPT></head>

Urmatorul fragment de program ce permite sa scriem pe bara de stare atunci cind pozitionam cursorul pe un anumit obiect(cazul dat-linc).

onMouseOver="window.status='Vizualizati poeziile lui Grigore Vieru';

return true"

onMouseOut="window.status='pentru IESIRE accesati butonul stinga sus'; return true"></form>

Listingul programului:

Index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!– DW6 –>

<head>

<title>Троя /Troy/: все о фильме – рецензия, кадры, обои, отзывы, саундтрек</title>

<!–

.стиль1 {

font-size: 24px;

font-weight: bold;

font-family: "Book Antiqua";

}

.стиль2 {

font-size: 14px;

font-weight: bold;

font-family: "Book Antiqua";

}

.стиль3 {

font-size: 14px;

font-family: "Book Antiqua";

font-weight: bold;

font-style: italic;

color: #CC3300;

}

.стиль4 {

font-size: 12px;

font-family: "Book Antiqua";

}

.стиль11 {

color: #FFFFFF;

font-size: 18px;

font-family: "Book Antiqua";

}

.стиль13 {

font-size: 14px;

font-family: "Book Antiqua";

font-style: italic;

}

–>

</style>

</head>

</tr>

<td nowrap="nowrap" colspan="4" id="tagline" valign="top"><div align="center" class="стиль2">официальный сайт фильма</div></td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

 <br />

</div></td>

</tr>

<tr>

<tr>

<td width="155" height="40"><a href="javascript:;">О фильме</a></td>

</tr>

<tr>

<td width="155" height="40"><a href="rev.html">Мнения</a></td>

</tr>

<tr>

<td width="155" height="40"><a href="kadr.html">Кадры</a></td>

</tr>

<tr>

</tr>

<tr>

<td width="155" height="40"><a href="ost.html">Саундтреки</a></td>

</tr>

<tr>

<td width="155" height="40"><a href="other.html">Другое</a></td>

</tr>

</table></td>

<tr>

<td height="41" class="pageName стиль4"><div align="center">Два мира будут воевать за честь и власть. Тысячи умрут за славу. И за любовь нация сгорит до тла!</div></td>

</tr>

<tr>

</tr>

</table>

<p> В древней Греции страсть, вспыхнувшая между Парисом, наследным принцем Трои, и Еленой, королевой Спарты, положила начало войне, чуть не уничтожившей цивилизацию. Парис крадет Елену у её законного мужа, Менелая. За честь Менелая вступается его брат, микенский царь Агамемнон, вокруг которого сплотились все народы Греции. Их цель – вернуть прекрасную Елену.</p>

<p>Но цели Агамемнона шире – победив Трою, он окончательно утвердит превосходство своей империи. Однако окруженная мощными стенами, защищаемая армией, которой руководит царь Приам, а возглавляет могучий Гектор, Троя не сдастся просто так. Одержать победу над этой цитаделью может лишь один человек – Ахилл, величайший на свете воин.</p>

<p align="center" class="стиль11">Страна:</p>

<p align="center"> Великобритания, Мальта, США</p>

<p align="center" class="стиль11"> Режиссер:</p>

<p align="center"> Вольфганг Петерсен</p>

<span class="стиль11">В ролях:</span></p>

Брэд Питт, Дайан Крюгер, Эрик Бана, Орландо Блум, Шон Бин, Брайн Кокс, Джулиан Гловер, Натан Джонс, Адони Маропис, Джейкоб Смит, Брендан Глисон, Гаррет Хедланд, Питер О`Тул, Роуз Бирн и др.</p>

<span class="стиль11">Сценарий: </span></p>

<p align="center">Дэвид Бениофф, по произведению Гомера<br />

<br />

</p>

<tr>

<td colspan="3" id="sidebarHeader" class="sidebarHeader" align="center"><p class="subHeader">Мировая премьера: </p>

</tr>

<tr>

<span class="стиль3">Бюджет: $ 185 млн.</span><br />

</p>

<span class="стиль3">Продолжительность: </span></p>

</span><br />

</p>

<br />

</tr>

</table>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Ost.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!– DW6 –>

<head>

<title>Троя:Саундтреки</title>

<!–

.стиль2 {font-size: 24px;

font-weight: bold;

font-family: "Book Antiqua";

}

.стиль3 {font-size: 14px;

font-weight: bold;

font-family: "Book Antiqua";

}

.стиль4 {font-size: 36px}

.стиль4 {font-size: 14px}

.стиль6 {font-family: "Book Antiqua"}

.стиль8 {

font-family: "Book Antiqua";

font-size: 36px;

color: #FFFFFF;

}

.стиль9 {

color: #FFFFFF

}

.стиль10 {color: #D4D0C8}

–>

</style>

</head>

</tr>

<td height="57" nowrap="nowrap" id="tagline" valign="top"><div align="center"><span class="стиль3">официальный сайт фильма</span></div></td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<pre class="стиль6"><span class="sidebarHeader стиль4"><a href="index.html" class="стиль4">О фильме </a></span><span class="sidebarHeader стиль3"><a href="index.html"><span class="стиль4"> </span></a><span class="стиль4"><a href="rev.html">Мнения</a></span> <a href="kadr.html" class="стиль4">Кадры </a><a href="wall.html">Обои </a> <a href="other.html">Другое</a><a href="javascript:;" class="стиль4"></a></span></pre>

</div>

<pre class="стиль8"> Саундтреки </pre>

</div></td>

</tr>

</table>

<tr>

<td width="367" bordercolor="#CCCCCC"><div align="center" class="стиль9">Название</div></td>

<td width="83"><div align="center" class="стиль9">Время</div></td>

<td width="85"><div align="center" class="стиль9">Размер</div></td>

</tr>

<tr>

<td><div align="left">3200 Years Ago</div></td>

</tr>

<tr>

</tr>

<tr>

<td bordercolor="#CCCCCC"><div align="left">Achilles Leads The Myrmidons</div></td>

</tr>

<tr>

<td bordercolor="#CCCCCC"><div align="left" class="стиль10">The Temple Of Poseidon</div></td>

</tr>

<tr>

<td bordercolor="#CCCCCC"><div align="left">The Night Before</div></td>

</tr>

<tr>

<td bordercolor="#CCCCCC"><div align="left" class="стиль10">The Greek Army And Its Defeat</div></td>

</tr>

<tr>

<td bordercolor="#CCCCCC"><div align="left">Briseis And Achilles</div></td>

</tr>

<tr>

<td bordercolor="#CCCCCC"><div align="left" class="стиль10">The Trojans Attack</div></td>

</tr>

<tr>

<td bordercolor="#CCCCCC"><div align="left">Hector`s Death</div></td>

</tr>

<tr>

<td bordercolor="#CCCCCC"><div align="left" class="стиль10">The Wooden Horse And The Saking Of Troy</div></td>

</tr>

<tr>

<td bordercolor="#CCCCCC"><div align="left">Through The Fires, Achilles… And Immortality</div></td>

</tr>

<tr>

<td bordercolor="#CCCCCC"> <div align="left" class="стиль10">Remember Me (Performed By John Groban With Tanja Tzarovska)</div></td>

</tr>

</table>

<br />

</div>

</body>

</html>

Kadr.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!– DW6 –>

<head>

<title>Троя:Кадры из фильма</title>

<!–

.стиль2 {font-size: 24px;

font-weight: bold;

font-family: "Book Antiqua";

}

.стиль3 {font-size: 14px;

font-weight: bold;

font-family: "Book Antiqua";

}

.стиль4 {font-size: 36px}

.стиль4 {font-size: 14px}

.стиль6 {font-family: "Book Antiqua"}

.стиль11 {

font-size: 14px;

font-weight: bold;

font-family: Georgia, "Times New Roman", Times, serif;

}

.стиль12 {

color: #FFFFFF;

font-size: 36px;

font-family: "Book Antiqua";

}

–>

</style>

</head>

</tr>

<td height="57" colspan="2" valign="top" nowrap="nowrap" id="tagline"><div align="center"><span class="стиль3">официальный сайт фильма</span></div></td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<pre><span class="стиль11"><a href="index.html">О фильме</a> <a href="rev.html">Мнения</a> <a href="ost.html">Саундтреки</a> <a href="wall.html">Обои</a> <a href="other.html">Другое</a></span></pre>

</div>

<pre class="стиль12"> Кадры

</pre>

<tr>

</tr>

</table>

<tr>

</tr>

<tr>

</tr>

</table>

</div> </td>

</tr>

</table>

<br />

</body>

</html>

Wall.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!– DW6 –>

<head>

<!–

.стиль1 { font-size: 24px;

font-weight: bold;

font-family: "Book Antiqua";

}

.стиль2 { font-size: 14px;

font-weight: bold;

font-family: "Book Antiqua";

}

.стиль3 {font-size: 36px}

.стиль4 {font-size: 14px}

.стиль6 {font-family: "Book Antiqua"}

.стиль8 {

font-size: 36px;

font-family: "Book Antiqua";

color: #FFFFFF;

}

–>

</style>

</head>

</tr>

<td height="57" nowrap="nowrap" id="tagline" valign="top"><div align="center"><span class="стиль2">официальный сайт фильма</span></div></td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<pre class="стиль6"><span class="sidebarHeader стиль4"><a href="index.html" class="стиль4">О фильме</a></span><span class="sidebarHeader стиль3"><a href="index.html"><span class="стиль4"> </span></a><span class="стиль4"><a href="rev.html">Мнения</a></span> <a href="kadr.html" class="стиль4">Кадры</a> <a href="ost.html" class="стиль4">Саундтреки</a> <a href="other.html" class="стиль4">Другое</a></span>

</pre>

</div></td>

</tr>

<tr>

<tr>

</tr>

<tr>

</tr>

<tr>

1024 x 768</div></td>

1024 x 768</div></td>

1024 x 768</div></td>

1024 x 768</div></td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

1024 x 768</div></td>

1024 x 768</div></td>

1024 x 768</div></td>

1024 x 768</div></td>

</tr>

<tr>

</tr>

</table> </td>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Other.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!– DW6 –>

<head>

<title>Троя:Другое</title>

<!–

.стиль1 {font-size: 24px;

font-weight: bold;

font-family: "Book Antiqua";

}

.стиль2 {font-size: 14px;

font-weight: bold;

font-family: "Book Antiqua";

}

.стиль3 {font-size: 36px}

.стиль4 {font-size: 14px}

.стиль6 {font-family: "Book Antiqua"}

.стиль8 {font-size: 36px; font-family: "Book Antiqua"; color: #FFFFFF;}

.стиль9 {

font-family: Tahoma;

}

.стиль10 {

font-family: Tahoma;

font-size: 16px;

font-weight: bold;

color: #FFFFFF;

}

.стиль14 {color: #99CCFF}

.стиль15 {color: #FFFFFF}

–>

</style>

</head>

</tr>

<td height="57" nowrap="nowrap" colspan="2" id="tagline" valign="top"><div align="center"><span class="стиль2">официальный сайт фильма</span><br />

</div></td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<pre><span class="стиль6"><span class="sidebarHeader стиль4"><a href="index.html" class="стиль4">О фильме </a></span><span class="sidebarHeader стиль3"><a href="index.html"><span class="стиль4"> </span></a><span class="стиль4"><a href="rev.html">Мнения</a></span> <a href="kadr.html" class="стиль4">Кадры </a><a href="wall.html">Обои</a> <a href="ost.html" class="стиль4">Саундтреки</a></span></span>

</pre>

</div>

</tr>

<tr>

<p class="стиль8">Другое</p>

</div>

<tr>

<div align="left"><span class="стиль10">Интересные факты о фильме: </span></div>

</div></td>

<td width="460" class="subHeader"><span class="стиль10">Награды</span></td>

</tr>

<tr>

<td rowspan="5" align="left" valign="top" class="bodyText"><p class="bodyText">- Съемки начались 22 апреля в Лондоне (там снимались все павильонные сцены). Ряд батальных сцен первоначально планировалось снимать в Марокко, но после начала войны студия категорически отказалась отправлять съемочную группу в мусульманскую страну, и поэтому вместо Марокко сражение было снято в Мексике, в Лос-Кабос. </p>

<p>Если на Мальте киношникам повезло с погодой, то в Мексике их преследовали ураганы и ливни; последний ураган обрушился на съемочную площадку, когда работа была почти завершена. Из-за этого работа над фильмом затянулась. Бюджет, который весной 2003 года оценивался в 180 миллионов долларов, к осени явно перевалил за $200 миллионов, правда, никаких официальных данных об этом нет. </p>

<p>- “Есть старое изречение, что война раскрывает в людях все самое хорошее и плохое”, – размышляет продюсер и режиссер Вольфган Петерсон. “Война – беда для всех вовлеченных”. </p>

<p>- “Я не думаю, что какой-нибудь писатель смог бы так ясно и безошибочно описать все ужасы войны как Гомер”, – говорил Петерсон. “В его работах, человеческую драму затмевает жестокость сражений”. </p>

<p>- За последние 3.000 лет в нашем мире многое изменилось. Набор актеров Петерсона должен был подлинно передать драму античной жизни. Кастинг на роль непобедимого Ахилла был одним из ключевых. Чтобы вдохнуть в легенду жизнь, кинопроизводители пригласили Брэда Пита. “Брэд обладает достаточным талантом и магнетизмом, для этой роли”, – говорил Петерсон. </p>

<p>- Петерсон гордится подбором актеров собранных для этого фильма. “Нам повезло, мы удачно объединили работу молодых актеров, чьи звезды уже начинают восходить, вместе с известными актерами”,- говорил режиссер. </p>

<p>- Работа по воссозданию античного мира началась в Лондоне, затем переместилась на маленький остров государства Мальта. Съемки планировалось проводить на нескольких пляжах, в море, на утесах и на окраинах города, а также в городе Троя, сооруженном в форте Рикасол на площади десяти акров. </p>

<p>- В Мексике съемки приобрели грандиозный масштаб; мили открытых пляжей послужили зоной высадки и плацдармом для военного лагеря греческой армии. Храм Аполлона возвышается над полем битвы, где столкнулись армии 50,000 на 30,000 человек. Для съемок этой сцены были задействованы в хореографической битве несколько тысяч вооруженных и костюмированных статистов, впоследствии “умноженные” компьютерно до необходимых масштабов. </p>

<p>- Ради фильма “Троя” режиссер Вольфганг Петерсен отказался от предложенного проекта “Бэтман против Супермэна”, а Брэд Питт оставил проект “Фонтан”.</p></td>

<td align="left" valign="top" class="bodyText"><p class="bodyText">Oскар, 2005 год <br />

Номинации (1):</p>

<p class="стиль9"> * Лучшие костюмы</p>

<p class="стиль9">Премия канала «MTV», 2005 год <br />

Номинации (2):</p>

<p class="стиль9"> * Лучшая драка<br />

* Лучшая мужская роль (Брэд Питт)</p> <p> </p></td>

</tr>

<tr>

</tr>

<tr>

<td align="left" valign="top" class="bodyText"><p class="bodyText стиль14"><strong>Тро́я</strong> (греч. Τροία, Τροίη, хетт. <em>Taruisa</em>; тур. <em>Truva</em>), иначе называемая <strong>Илио́н</strong> (греч. Ἴλιον, хетт. <em>Wilusa</em>) — древнее укреплённое поселение в Малой Азии, у побережья Эгейского моря, недалеко от входа в пролив Дарданеллы. Это город, воспетый в поэме «Илиада», автором которой считается Гомер. События, воспетые Гомером, в нынешнем представлении историков, относятся к крито-микенской эпохе (Троя VII). Народ, населявший Трою, в древнегреческих источниках именуется тевками.</p></td>

</tr>

<tr>

<td align="left" valign="top" class="стиль10">Название</td>

</tr>

<tr>

<td align="left" valign="top" class="bodyText"><p>Имя «Троя» фигурирует в хеттских архивах как Таруиша. На египетской стеле времен Рамзеса III упомянута его победа над морским народом «турша». Это название часто сопоставляют с народом «тереш», упомянутым несколько ранее на знаменитой стелле Мернептаха. Единства в мнениях о том, были ли эти пришельцы троянцами, в научном мире не наблюдается.</p>

<p>Прежде высказывались соображения, что термины «Троя» и «Илион» могли обозначать различные города одного и того же древнего государства, либо один из этих терминов мог обозначать столицу, а другой — собственно государство, и «слились» в один термин лишь в «Илиаде». Такая точка зрения не лишена оснований, поскольку в «Илиаде», в свою очередь, выделяются фрагменты с параллельными сюжетами, то есть, возможно, восходящие к различным пересказам одного и того же сюжета; к тому же, «Илиада» возникла много столетий спустя после событий Троянской войны, когда многие детали могли забыться</p>

</tr>

<tr>

<td height="26" class="bodyText стиль9">По материалам сайта –

<a href="http://www.cinema.vrn.ru" class="стиль15">http://www.cinema.vrn.ru</a></td>

<td align="left" valign="top" class="bodyText стиль9">Материал из Википедии – <a href="http://ru.wikipedia.org" class="стиль15">http://ru.wikipedia.org</a></td>

</tr>

</table></td>

</tr>

<tr>

</tr>

</table>

<br />

</body>

</html>

ScreenShots:

Concluzii

Lucrarea data constituie in sine o reprezentare a cunostintelor privitoare la crearea documentelor HTML, cunostinte si deprinderi acumulate pe parcursul studiului de jumatate de an la disciplina produse soft. Astfel la realizarea sarcinii, care consta in elaborarea documentelor HTML ce vor contine informatii privitoare la descrierea filmului ,am utilizat tabele, imagini, coduri CSS si JavaScript necesare pentru formatarea documentului HTML. Codurile CSS sunt incluse in fisier aparte, iar cele JavaScript sunt in documentul HTML.

Lucrarea este alcatuita din 5 fisire HTML ce contin informatii despre: filmul „Troy”, imagini etc.

Astfel realizarea lucrării mi-a permis să obțin cunoștințele și deprinderile practice ce pot fi aplicate la crearea altor documente HTML a caror continut tine si de alte domenii .

Copyright Notice

© Licențiada.org respectă drepturile de proprietate intelectuală și așteaptă ca toți utilizatorii să facă același lucru. Dacă consideri că un conținut de pe site încalcă drepturile tale de autor, te rugăm să trimiți o notificare DMCA.

Acest articol: Raportul Lucrarilor de Laborator la T.r (ID: 150317)

Dacă considerați că acest conținut vă încalcă drepturile de autor, vă rugăm să depuneți o cerere pe pagina noastră Copyright Takedown.

Raportul Lucrarilor de Laborator la T.r

Copyright Notice

Aplicatie de Detectie Si Diagnosticare a Defectelor Bazata pe Estimarea Parametrilor

Dezvoltarea Unei Aplicatii Web Folosind Mvc

Studiu Privind Sistemul de Gestiune al Bazelor de Date

Strategii de Implementare a Retelelor Vpn

Determinanti Si Sisteme de Ecuatii Liniare

Organisme la Nivel National cu Atributii In Domeniul Securitatii Cibernetice

Copyright Notice

Similar Posts