Documente Academic
Documente Profesional
Documente Cultură
Lucrare de atestat la
informatica
Profesor indrumator:
Stanciu Diana
Elev:
Chirita Alexandra
Anatomia omului
CUPRINS
Motivatia temei alese.........................................4
Despre HTML & CSS ........................................5
WPM....................................................................21
Index ...................................................................23
Screenshot .........................................................26
Bibliografie .......................................................30
Navy #000080
Olive #808000
Purple #800080
Red #ff0000
Silver #c0c0c0
Teal #008080
White #ffffff
Yellow #ffff00
Dimensiunile
Dimensiunile unor elemente prezente in documentul HTML se pot
preciza in trei moduri:
a.Dimensiunea absoluta este referita in pixeli. De exemplu o
exprimare de forma "width = 300" denota ca un anumit element are
latimea de 300 pixeli
b.Dimensiunea relativa (procentuala) este referita in procente.
Astfel textul "width = 50%" exprima faptul ca elementul referit va avea ca
latime jumatate din latimea disponibila a elementului in care este
incadrat.
c.Dimensiunea proportionala (multidimensiunea) este folosita
atunci cand doua sau mai multe elemente impart un anumit numar de
pixeli disponibili. Ea se exprima sub forma "i*", unde i este un numar
care arata cate "parti" din total sunt revendicate. De exemplu, pe un
spatiu de 60 de pixeli disponibili, dimensiunile notate 1*, 2*, 3*
insumeaza 6 unitati in care spatiul disponibil va fi impartit. Fiecare
unitate contine 10 pixeli. Astfel ca cele trei dimensiuni exprimate mai sus
reprezinta 10 pixeli, 20 pixeli si, respectiv, 30 pixeli.
Valori data-ora
Formatul pentru scrierea acestor valori este :
YYYY-MM-DDThh:mm:ssTZD
unde
YYYY - reprezinta anul scris cu 4 cifre
MM - reprezinta luna (Ianuarie = 01, .., Decembrie = 11)
DD - reprezinta ziua din luna, cu valori de la 01 la 31
T - ramane caracter scris cu litera mare pentru a marca inceputul scrierii
orei
hh - repreinta ora scrisa cu doua cifre, de la 00 la 23. Nu se admit
formulari care contin AM sau PM.
mm - reprezinta minutele cu valori intre 00 si 59.
ss - reprezinta secundele cu valori intre 00 si 59.
TZD - reprezinta precizarea fusului orar si poate lua urmatoarele valori:
"Z" pentru Coordinated Universal Time (UTC)
+hh:mm pentru un fus orar in avans cu hh ore si mm minute fata de
UTC.
-hh:mm pentru un fus orar in devans cu hh ore si mm minute fata de
UTC.
Exemplu:
2015
1994-11-05T08:15:30-05:00
Coduri de limbaje
Pentru a specifica limba in care un anumit text este scris se
foloseste atributul lang a carui valoare este codul de limbaj al tarii
respective. Codul de limbaj este alcatuit din doua parti:
Cod principal - cu ajutorul caruia se identifica tara in care limbaujul este
folosit
Subcod (optional) - specifica o versiune a limbajului respectiv
Cele doua componente vor fi separate de cracterul "-". Iata cateva
exemple:
en = limba engleza
en-US = limba engleza -varianta americana
fr = limba franceza
de = limba germana
it = limba italiana
es = limba spaniola
pt = limba portugheza
Structura unui document
Sectiunile unui document HTML
Un document HTML este impartit in trei sectiuni:
a.Sectiunea de informatii HTML
b.Sectiunea de antet a documentului
c.Corpul documentului
Controalele <HTML> si <HTML> incadreaza antetul si corpul
documentului .Ele comunica interpretorului HTML ca blocul de text
cuprins intre ele este scris si formatat in limbajul HTML standard.
Prezenta acestor etichete in document este optionala.Structura
explicata a unui document HTML:
<html>
<head>
<!--Sectiunea de antet a documentului cuprinde titlul documentului
si definirea tipului si a setului de caractere folosit -->
2015
2015
2015
paianjeni
sau
Exemplu:
motoare
de
cautare
Web.
<META
name="author"
content="Superman">
<META name="keywords" content="Sport, fotbal, FIFA">
Despre elementul LINK vom vorbi intr-unul din capitolele
urmatoare.
Corpul documentului
Corpul documentului este locul unde se plaseaza continutul
efectiv al documentului si este incadrat de controalele <BODY> si
</BODY>. Chiar daca marcarea corpului documentului cu cele doua
etichete este optionala, folosirea lor va determina o mai mare claritate in
impartirea
documentului
pe
sectiuni.
Controlul <BODY> poate sa contina atribute referitoare la
fondul si marginile documentului sau culoarea textului.
Astfel:
background = "imagine.jpeg" seteaza imaginea de fond a
documentului.
bgcolor = "#0000ff" seteaza culoare fondului documentului (Aqua).
In cazul in care ambele sunt prezente, browserul cauta fisierul
mentionat ca imagine de fond. Daca acesta exista, el va fi afisat si
multiplicat pentru a acoperi intreaga suprafata a documentului, culoarea
de fond fiind vizibila numai daca fondul imagini este transparent. Daca
nu, fondul documentului va fi dat de culoarea setata de catre bgcolor.
text = "#ff0000" seteaza culoarea textului existent in document.
Pentru a seta dimensiunile marginilor din stanga si de sus ale
documentului se folosesc atributele:
Pentru Internet Explorer:
topmargin - pentru marginea de sus
leftmargin - pentru marginea din stanga
Pentru Netscape Navigator:
marginheight - pentru marginea de sus
marginwidth - pentru marginea din stanga
Pentru Internet Explorer exista posibilitatea de a atasa unui
document un fond sonor. Aceasta se poate realiza prin folosirea in
antetul documentului a elementului BGSOUND. Doua dintre atributele
acestuia sunt foarte importante:
src - determina fisierul audio care va fi rulat de catre browser la
incarcarea documentului in fereastra
2015
2015
2015
2015
<H6>Element H6</H6>
Rigla orizontala
Pentru o mai vizibila impartire a corpului documentului se voloseste
rigla orizontala marcata cu controlul <HR>. Prezenta acestui control
produce desenarea unei linii orizontale subtiri pe toata latimea
documentului.
Dimensiunile riglei pot fi controlate cu ajutorul atributelor width si size,
care seteaza dimensiunile pe orizontala si, respectiv, pe vericala a liniei
in pagina. Pentru a elimina aspectul tridimensiunal al riglei se poate
utiliza optiunea noshade care elimina efectul de "umbrire" a riglei.
Exemplu:
rigle orizontale
<hr noshade>
<hr align="center" width="30%">
<hr align="center" width="50%">
<hr align="center" width="70%">
<hr align="center" width="90%">
<p>
<p>
<p>
<hr align="left" width="50%" size="20" color="#0000FF"></p>
<hr align="right" width="50%" size="20" color="#0000FF" ></p>
Controlul <Address>
Acest control este folosit de obicei la sfarsitul documentului pentru
a plasa informatii utile utilizatorului pentru a contacta autorul paginii sau
informatii de copyright.
Exemplu:
Folosirea elementului Address
<H1 align="center">Draga cititorule,</H1>
<p>Bla-bla-bla...
<p>Bla-bla-bla...
<p>Bla-bla-bla...
2015
<p align="right">
Cu drag, <b>Seful</b>!</p>
<hr>
<address>
Pentru recalmatii contactati-ne la<br>
invizibilii@nicaieri.com </address>
Controalele <DIV> si <SPAN>
Controlul <DIV> este folosit in document pentru a grupa intr-un
bloc "logic" o parte din continutul documentului in vederea atribuirii
unitare a caracteristicilor legate de stilul de prezentare, sau pentru a
identifica respectivul bloc de continut in vederea utilizarii lui de catre
scripturile prezente in document. Browserul va trece la line noua inainte
si dupa terminarea acestui marcaj.De asemenea acest controle se mai
poate folosi alaturi de proprietatile de stil pentru pozitionare pentru a
creea in cadrul documentului "straturi" de dimensiuni variabile ce pot fi
pozitionate in diferite locatii ale documentului, suprapuse, ascunse sau
expuse, in functie de necesitatile designer-ului.
Controlul <SPAN>are rolul de a "extrage" o portiune de
document - de obicei inclusa intr-un bloc marcat de controale HTML si
care, eventual, are specificate un anumit numar de atribute - pentru a o
identifica sau apentru a-i oferi un format de afisare diferit de restul
blocului din care face parte.
Exemplu:
identificarea blocurilor de text cu ajutorul elementelor Div si
Span
<div style="font-size:14;color:blue;background
color:yellow">Elementul Div</div>
<hr align="right" color="#0000ff"
width="50%">
<div style="color:red">
Certificatul de deces consemneaza la rubrica "Profesia" - fermier. Daca
ar fi fost numai
atat, azi nu s-ar mai
vorbi nimic de <span style =
"color:navy">Elementul Span</span>.
Folosirea atributului style
Ultimele versiuni ale limbajului HTML au optat in mod categorig
pentru despartirea continutului unui document HTML de forma in care
2015
este el prezentat. Acest lucru este posibil prin utilizarea foilor de stil, a
stilurilor definite in antetele documentului, sau prin gruparea
proprietatilor legate de forma de prezentare in cadrul unui singur atribut:
style.
Utilizarea acestuia in interiorul unui control HTML - aproape toate care
se pot gasi in interiorul corpului documentului, cu putine exceptii
(<Script> sau <Basefont>) se face respectand urmatorul tipar de scriere:
<element style ="proprietate:valoare ; proprietate:valoare;..."
unde :
-element este numele elementului folosit (ex: H1, Img,Table)
-proprietate este numele unei proprietati de stil. Aceste nume nu
coincid in totalitate cu numele proprietatilor marcajelor HTML. De
exemplu proprietatea face a morcajului Font devine font-family ca
proprietate de stil. Cele mai utilizate proprietati de stil vor fi prezentate in
lectia consacrata modelelor de stil.
-valoare este valoarea acordata proprietatii respective. Ea
trebuie sa corespunda valorilor posibile ale acestei proprietati.
Creatorii de documente HTML sunt puternic incurajati sa
foloseasca proprietatile de stil in locul setarii individuale a fiecarii
proprietati in cadrul marcajelor. Trebuie stiut, insa, ca versiunile mai
vechi ale programelor de explorare Web nu recunosc nici atributul style,
nici marcajul STYLE si nici referintele catre modelele de stil. De aceea,
inainte de a folosi una sau alta dintre variante trebuie sa faceti un calcul
exact al avantajelor si dezavantajelor pe care fiecare le implica.
Informatii tool-tip
Cea mai simpla forma de interactiune a documentului cu
utilizatorul o reprezinta afisarea unor informatii foarte scurte despre
elementele documentului atunci cand utilizatorul pozitioneaza mouse-ul
in
spatiul
ocupat
de
elementele
respective.
Pentru a realiza acest lucru se foloseste proprietatea de stil title,
valoarea ecestei proprietati fiind textul informativ afisat in dreptul
cursorului odata cu pozitionarea mouse-ului pe elementul care are
setata aceasta proprietate.
2015
Exemplu de cod :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
2015
<div id="header">
<h1>Titlu site</h1>
<p>descriere site</p>
</div> <!-- sfarsit header -->
<div id="continut">
<h1>Titlu articol</h1>
<p> acesta este continutul, iar acesta este un <a href="#">link</a>
</div> <!-- sfarsit continut -->
</div> <!-- sfarsit container -->
</body>
</html>
2015
2015
Codul indexului
Index.html
2015
/*----------Text Styles----------*/
.ws6 {font-size: 8px;}
.ws7 {font-size: 9.3px;}
.ws8 {font-size: 11px;}
.ws9 {font-size: 12px;}
.ws10 {font-size: 13px;}
.ws11 {font-size: 15px;}
.ws12 {font-size: 16px;}
.ws14 {font-size: 19px;}
.ws16 {font-size: 21px;}
.ws18 {font-size: 24px;}
.ws20 {font-size: 27px;}
.ws22 {font-size: 29px;}
.ws24 {font-size: 32px;}
.ws26 {font-size: 35px;}
.ws28 {font-size: 37px;}
.ws36 {font-size: 48px;}
.ws48 {font-size: 64px;}
.ws72 {font-size: 96px;}
.wpmd {font-size: 13px;font-family: Arial,Helvetica,Sans-Serif;font-style:
normal;font-weight: normal;}
/*----------Para Styles----------*/
DIV,UL,OL /* Left */
{
margin-top: 0px;
margin-bottom: 0px;
}
</style>
</head>
<body>
<div id="text2" style="position:absolute; overflow:hidden; left:179px;
top:79px; width:231px; height:65px; z-index:0">
<div class="wpmd">
<div align=center><font color="#FFFFFF" face="Tahoma"
class="ws12"><B>Anatomia omului by Chirita
Alexandra</B></font></div>
</div></div>
<div id="image1" style="position:absolute; overflow:hidden; left:12px;
top:30px; width:1194px; height:860px; z-index:1"><img
src="images/man_gavel_punch_red_white_8694_1920x1200.jpg" alt=""
title="" border=0 width=1194 height=860></div>
2015
Screenshot
Prezentare generala.html
2015
Sistemul nervos.html
2015
Sistemul osos.html
2015
BIBLIOGRAFIE
2015
1.
ro.wikipedia.org/wiki/Anatomiewww.wikipedia.c
om
2.
www.html.com
3.
www.uniterdc.com
4.
www.toptenz.net
5.
www.webpagemaker.com
2015