Examen de atestat

Documentaie pentru proba practic

Istorie - Mituri - Curiozitati

Vatafu Marian
Prof. Coord. Dragomir Adelin
Colegiul National "Mihai Viteazul" Slobozia

Cuprins :
1. Motivul alegerii temei pag. 3
2. Structura aplicatiei pag. 4-7
3. Continutul siteului
4. Limbajul HTML pag. 9-19
5. CSS
6. Bibliografie

1. Motivul alegerii temei

Am ales aceasta tema din cauza faptului ca nicaieri in lume nu mai exista un
oras cu asemenea concentratie de cladiri istorice de toate felurile si de toate
varstele ca in Roma ( ruine antice si medievale, Panteonul, biserici si bazilici
baroce, cladiri renascentiste, monumente neoclasice, Vaticanul ,Bazilica San
Pietro ). M-a fascinat ideea de a rezuma istoria orasului stat in cateva pagini si
de a oferi cititorilor o idee despre puterea unui imperiu condus de lideri
legendari precum Caesar.

2. Structura aplicaiei
Programul contine o forma principala alcatuita din mai multe butoane precum:

Pagina Acasa contine o scurta descriere a Romei Antice, situare, perioada

ocupata in istorie, dar si 4 poze, 3 dintre ele aratand artefacte lasate in urma de
artistii imperiului iar a 4-a poza intruchipand un general roman.
Pagina Intemeiere contine detalii despre intemeierea Romei si 3 poze care
despre miturile legate de intemeiere.
Pagina Armata contine detalii despre organizarea soldatilor sub forma
legiunilor, cohortelor si trupelor auxiliare.
Pagina Organizarea sociala prezinta forma de organizare a societatii dar si
detalii despre cetatenia romana.
Pagina Mituri listeaza mituri precum : Degetul orientat in sus, Atia si a ei
viata,Romanii purtau toga,Si tu, Brutus?, Toti gladiatorii erau barbati, etc.
Pagina Contact contine detalii despre autorul realizarii proiectului dar si o zona
de a lasa feedback.

Coninutul site-ului

Site-ul auto-acum conine 47 de fiiere diferite si anume:

7 de fiiere .html reprezentnd cele 7 de pagini ale site-ului.
1 fiier .css reprezentnd foaia de stil (stylesheet).
39 de imagini si pictograme in format .jpg, si .png.
Organizarea site-ului pe foldere si fisiere:

Folder principal
7 fiiere HTML si un folder style
Folder style:
39 fisiere imagine si un fisier css;

Denumirea paginilor:
index - pagina principala
Contine frame-ul tuturor celorlalte pagini : Menu bar, content header, sidebar,
header si footer.
Logo/Header :
Contine numele proiectului, al autorului, clasa si liceului de provenienta.
<div id="main">
<div id="header">
<div id="logo">
<div id="logo_text">
<h1><a href="index.html">Roma <span
class="logo_colour">Antica</span></a></h1>
<h2>Vatafu Marian Cornel </h2>

<h3>Clasa a XIIa D CNMV Slobozia</h3>

</div>
</div>
Menu bar :
<div id="menubar">
<ul id="menu">

<li class="selected"><a href="index.html">Acasa</a></li>

<li><a href="intemeiere.html">Intemeiere</a></li>
<li><a href="detalii.html">Armata</a></li>
<li><a href="sociala.html">Organizarea sociala</a></li>
<li><a href="mituri.html">Mituri</a></li>
<li><a href="zei.html">Zei</a></li>
<li><a href="contact.html">Contact</a></li>

</ul>
</div>
</div>
Sidebar care contine detalii precum "Oficii si titluri onorifice" :
<div id="sidebar_container">
<div class="sidebar">
<div class="sidebar_top"></div>
<div class="sidebar_item">

<h3>Oficii si titluri onorifice</h3>

<p>Pontifex Maximus, Legatus, Dux, Officium,

Praefectus, Vicarius, Vigintisexviri,
Magister Militum, Imperator, Princeps senatus, Imparat,
August, Cezar, Tetrarh
<span class="center"><img src="style/poza5.png" alt="example
graphic" /></span></p>
</div>
<div class="sidebar_base"></div>
</div>
Pentru forma fara colturi, meniul sidebar a fost impartit in 3 parti : top, base si
corpul dreptunghiular propriu zis.
Sidebar cu linkuri folositoare :
<div class="sidebar">
<div class="sidebar_top"></div>
<div class="sidebar_item">
<h3>Linkuri folositoare</h3>
<ul>
<li><a href="http://ro.wikipedia.org/w/index.phpttitle=Istoria_militar
%C4%83_a_Romei_antice&action=edit&redlink=1">Istoria militara a
Romei</a></li>
<li><a href="http://ro.wikipedia.org/wiki/List%C4%83_de_c
%C4%83r%C8%9Bi_despre_Roma_antic%C4%83">Carti despre Roma
antica</a></li>
<li><a href="http://www.descopera.ro/cultura/2685019-top-10-miturifalse-despre-romani-si-roma-antica">Mituri despre Roma Antica</a></li>
<li><a href="http://www.historia.ro/exclusiv_web/general/articol/cuminceput-roma-regalitatea">Regalitatea in Roma</a></li>

</ul>
</div>
<div class="sidebar_base"></div>
</div>
Sidebar Search :
<div class="sidebar">
<div class="sidebar_top"></div>
<div class="sidebar_item">
<h3>Search</h3>
<form method="post" action="#" id="search_form">
<p>
<input class="search" type="text" name="search_field"
value="Introdu cuvant....." />
<input name="search" type="image" style="border: 0; margin: 0 0
-9px 5px;" src="style/search.png" alt="Search" title="Search" />
</p>
</form>
</div>
<div class="sidebar_base"></div>
</div>
</div>
Footer :
Contine linkuri catre paginile proiectului
<div id="content_footer"></div>
<div id="footer">

<p><a href="index.html">Acasa</a> | <a

href="intemeiere.html">Intemeiere</a> | <a href="detalii.html">Armata</a> |
<a href="sociala.html">Organizarea sociala</a> | <a
href="mituri.html">Mituri</a> | <a href="zei.html">Zei</a></p> | <a
href="contact.html">Contact</a> |

</div>
</div>
Inserarea imaginilor :
Au fost folosite 3 coduri diferentiate prin pozitia ocupata in pagina :
<span class="left"><img src="style/poza16.png" alt="example graphic"
/></span>
<span class="center"><img src="style/poza16.png" alt="example graphic"
/></span>
<span class="right"><img src="style/poza16.png" alt="example graphic"
/></span>
Example grafic este titlul pictogramei care apare in cazul unei completari
gresite de cod.
detalii, intemeiere, contact, zei, sociala,mituri - pagini secundare care
contin informatii diverse, titlul fiecareia fiind sugestiv.

4. Limbajul HTML
Ce este un site web?

Noiunea site web provine din expresia englez web site i desemneaz o
grup de pagini web multimedia (coninnd texte, imagini fixe, animaii .a.),
accesibile n Internet n principiu oriicui, de obicei pe o tem anume, i care
sunt conectate ntre ele prin aa-numite hiperlinkuri.

Diversele site-uri web pot fi create de ctre o organizaie, o persoan

particular, instituii publice etc.
De obicei un site web este administrat (creat, ntreinut i actualizat) de
ctre un aa-numit webmaster, dar exist i alte posibiliti:
site-ul web se actualizeaz automat i permanent pe baza unei baze de
date;
paginile sale se creeaz n mod dinamic i automat n funcie de aciunea
utilizatorului n cadrul unei aplicaii web;
site-ul web se creeaz i e administrat chiar de ctre utilizatorii si vezi Web 2.0.

Un site web este alctuit de regul din mai multe pagini web.
O pagin web este un document creat cu ajutorul limbajului de
marcare HTML i (opional) limbaje de programare cum ar fi PHP, ASP .a.
fiind accesibil vizitatorilor prin intermediul protocolului HTTP, care transfer
informaia de la server la browser. Pagina web se numete aa deoarece, afiat
pe un monitor, ea se aseamn cu o pagin de ziar: de obicei paginile web au o
lime care ncape n ntregime pe ecran. n schimb, pagina poate fi chiar mult
mai nalt (adnc) dect nlimea ecranului, ea putnd fi totui uor afiat cu
ajutorul funciilor normale ale mausului i browserului folosite, prin "tragere" n
sus i n jos. De asemenea, un site web poate fi vizualizat pe orice dispozitiv
conectat la Internet capabil s afieze informaii prin intermediul protocolului
HTTP (unele telefoane mobile, PDA-uri, etc.).
Un site alctuit din mai multe pagini are de obicei o pagin iniial sau
principal numit homepage, de la care pleac legturi ctre paginile interioare,
secundare. Structurile i schemele de "navigare" din interiorul site-urilor web
sunt foarte diferite, n funcie de scopurile, dorinele i posibilitile ofertantului
de informaii. De obicei aceast homepage este chiar pagina de start a site-ului,

pe care ofertantul de informaii n web o face cunoscut la public drept punct de

plecare pentru ntregul site web al su.

Ce este HTML?
HyperText Markup Language (HTML) este un limbaj de marcare utilizat
pentru crearea paginilor web ce pot fi afiate ntr-un browser (sau navigator).
Scopul HTML este mai degrab prezentarea informaiilor paragrafe, fonturi,
tabele .a.m.d. dect descrierea semanticii documentului.
HTML este o form de marcare orientat ctre prezentarea documentelor
text pe o singura pagin, utiliznd un software de redare specializat, numit agent
utilizator HTML, cel mai bun exemplu de astfel de software fiind browserul
web. HTML furnizeaz mijloacele prin care coninutul unui document poate fi
adnotat cu diverse tipuri de metadate i indicaii de redare. Indicaiile de redare
pot varia de la decoraiuni minore ale textului, cum ar fi specificarea faptului c
un anumit cuvnt trebuie subliniat sau c o imagine trebuie introdus, pn la
scripturi sofisticate, hri de imagini i formulare. Metadatele pot include
informaii despre titlul i autorul documentului, informaii structurale despre
cum este mprit documentul n diferite segmente, paragrafe, liste, titluri etc. i
informaii cruciale care permit ca documentul s poat fi legat de alte
documente pentru a forma astfel hiperlink-uri (sau web-ul).
HTML este un format text proiectat pentru a putea fi citit i editat de
oameni utiliznd un editor de text simplu. Totui scrierea i modificarea
paginilor n acest fel solicit cunotine solide de HTML i este consumatoare
de timp. Editoarele grafice (de tip WYSIWYG) cum ar fi Macromedia
Dreamweaver, Adobe HYPERLINK "http://ro.wikipedia.org/w/index.php?
title=Adobe_GoLive&action=edit&redlink=1"GoLive sau Microsoft
HYPERLINK
"http://ro.wikipedia.org/wiki/Microsoft_FrontPage"FrontPagepermit ca paginile
web sa fie tratate asemntor cu documetele Word, dar cu observaia c aceste
programe genereaz un cod HTML care este de multe ori de proast calitate.

HTML se poate genera direct utiliznd tehnologii de codare din partea

serverului cum ar fi PHP, JSP sau ASP. Multe aplicaii ca sistemele de
gestionare a coninutului, wiki-uri i forumuri web genereaz pagini HTML.
HTML este de asemenea utilizat n e-mail. Majoritatea aplicaiilor de email folosesc un editor HTML ncorporat pentru compunerea e-mail-urilor i un
motor de prezentare a e-mail-urilor de acest tip. Folosirea e-mail-urilor HTML
este un subiect controversat i multe liste de mail le blocheaz intenionat.
HTML este prescurtarea de la Hyper Text Mark-up Language si este
codul care sta la baza paginilor web.
Paginile HTML sunt formate din etichete sau tag-uri i au extensia
.html sau .htm. n marea lor majoritate aceste etichete sunt pereche, una de
deschidere <eticheta> i alta de nchidere </eticheta>, mai exist i cazuri n
care nu se nchid, atunci se folosete
<eticheta />. Navigatorul web interpreteaz aceste etichete afind rezultatul pe
ecran. HTML-ul este un limbaj care nu face deosebire ntre litere majuscule i
minuscule.
Pagina principala a unui domeniu este fisierul index.html respectiv
index.htm. Aceast pagin este setat a fi afiat automat la vizitarea unui
domeniu.
De exemplu la vizitarea domeniului www.nume.ro este afiat pagina
www.nume.ro/index.html.
Unele etichete permit utilizarea de atribute care pot avea anumite valori:
<eticheta atribut="valoare"> ... </eticheta>

Componena unui document HTML este:

versiunea HTML a documentului
zona head cu etichetele <head> </head>

 zona body cu etichetele <body> </body> sau <frameset> </frameset>

Versiunea HTML poate fi:

HTML 4.01 Strict
HTML 4.01 Transitional
HTML 4.01 Frameset
HTML 5

Toate paginile HTML ncep i se termin cu etichetele <html> i </html>.

n interiorul acestor etichete gsim
perechile <head>, </head> i <body>, </body>.
head conine titlul paginii ntre etichetele <title> i </title>, descrieri de
tip <meta>, stiluri pentru formatarea textului, script-uri i legturi ctre fisiere
externe (de exemplu script-uri, fiiere de tip CSS sau favicon).
Etichetele de tip meta conin cuvinte cheie, descrierea paginii, date despre
autor, informaii utile motoarelor de cutare i au urmtorul format:
<META NAME="nume" CONTENT="continut">
Exemplu: link ctre un fisier extern CSS:
<link rel="stylesheet" type="text/css" href="css.css">
body gzduiete practic toate etichetele afiate de browser pe ecran.
Exemplu: o pagin HTML cu titlul Exemplu iar coninutul Coninut
pagin
<html>
<head>
<title>Exemplu</title>
</head>

<body>
Continut pagina
</body>
</html>

5. CSS

CSS (Cascading Style Sheets) este un standard pentru formatarea

elementelor unui document HTML. Stilurile se pot ataa elementelor HTML
prin intermediul unor fiiere 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 reprezint un upgrade ce aduce cteva atribute noi i ajut la
dezvoltarea noilor concepte in webdesign.
Unele dintre cele mai importante segmente (module) noi adugate acestui
standard pentru formatarea elementelor HTML aduc un plus considerabil in
dezvoltarea activiti webdesign.

Mai jos sunt prezente in list cele mai importante modulele adugate in
CSS3:
Selectors
Box Model
Backgrounds and Borders
Image Values and Replaced Content
Text Effects
2D/3D Transformations
Animations
Multiple Column Layout
User Interface
Dei au aprut unele deficiente de compatibilitate intre browsere,
majoritatea proprietilor CSS3 au fost implementate cu succes in variantele
browserelor noi.

Exemplu CSS3 border-radius:

div {
border: 2px solid #333333;
padding: 10px 40px;
background: #dddddd;
width: 300px;
border-radius:25px;
}

Elementul HTML div este definit de urmatoarele proprieti CSS:

dimensiunea in lungime este redat de valoarea in pixeli a proprietii width,
folosete 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 coluri.

6.Bibliografie
http://ro.wikipedia.org/wiki/Roma_Antic%C4%83
http://ro.wikipedia.org/wiki/Categorie:Mitologia_roman%C4%83
http://ro.wikipedia.org/wiki/Categorie:Civiliza%C8%9Bii
https://g1b2i3.wordpress.com/2009/04/21/intemeierea-romeilegenda-luiromulus-si-remus/
http://istorie-edu.ro/istorie-universala/Roma/roma_06osoc.html
http://ro.wikipedia.org/wiki/Armata_roman%C4%83