Atestat Informatica

CUPRINS
1. HTML
2. CSS
3. A.C.U.
3.1. Codul Sursă
3.2. Anexe
4. BIBLIOGRAFIE
1. HTML
Noţiuni de bază HTML este prescurtarea de la Hyper Text Mark-up Language şi este codul care
stă 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>. Browserul interpretează aceste etichete afişând rezultatul pe ecran.
HTML-ul nu este un limbaj case sensitiv (nu face deosebirea între litere mici şi mari). Pagina
principală a unui domeniu este fişierul index HTML. Această pagina este setată a fi afişată automat la
vizitarea unui domeniu.
De exemplu la vizitarea domeniului www.nume.ro este afişată pagina www.nume.ro/index.html.
Unele etichete permit utilizarea de atribute care pot avea anumite valori: <eticheta atribut-Valoare"> ...
</eticheta>.
Componenţa unui document HTML este:
1. versiunea HTML a documentului
2. zona head cu etichetele <head> </head>
3. zona body cu etichetele <body> </body> sau <frameset> </frameset> Versiunea HTML poate
fi: HTML 4.01 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN"
"http://www.w3.org/TR/html4/strict.dtd"> HTML 4.01 TrANSItional <!DOCTYPE HTML PUBLIC "-
//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
Toate paginile HTML încep şi se termină cu etichetele <html> şi </html>. În interiorul acestor
etichete găsim perechile <head>, </head> şi <body>, </body>.
head conţine titlul paginii între etichetele <title> şi </title>, descrieri de tip <meta>, stiluri pentru
formatarea textului, scripturi şi linkuri către fişiere externe (de exemplu scripturi, fişiere de tip CSS sau
favicon).
Etichetele de tip meta conţin cuvinte cheie, descrierea paginii, date despre autor, informaţii utile
motoarelor de căutare si au următorul format: <META NAME-'nume" CONTENT="continut">
Exemplu: link către un fişier extern CSS: <link rel="stylesheet" type="text/css" href-'css.css">
body găzduieşte practic toate etichetele afişate de browser pe ecran.
Exemplu: o pagină HTML cu titlul
Exemplu: iar conţinutul Conţinut pagina <html> <head> <title>Titlu</title> </head> <body>
Conţinut pagina </body> </html>
HTML este o formă de marcare orientată către prezentarea documentelor text pe o singură
pagină, utilizând 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 conţinutul unui document
poate fi adnotat cu diverse tipuri de metadate şi indicaţii de redare. Indicaţiile de redare pot varia de la
decoraţiuni minore ale textului, cum ar fi specificarea faptului că un anumit cuvânt trebuie subliniat sau că
o imagine trebuie introdusă, până la scripturi sofisticate, hărţi de imagini şi formulare,
Metadatele pot include informaţii despre titlul şi autorul documentului, informaţii structurale
despre cum este împărţit documentul m diferite segmente, paragrafe, liste, titluri etc. şi informaţii 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 utilizând un editor
de text simplu. Totuşi scrierea şi modificarea paginilor în acest fel solicită cunoştinţe solide de HTML şi
este consumatoare de timp. Editoarele grafice (de tip WYSIWYG) cum ar fi Macromedia Dreamweaver,
Adobe GoLive sau Microsoft Front Page permit ca paginile web să fie tratate asemănător cu documentele
Word, dar cu observaţia că aceste programe generează un cod HTML care este de multe ori de proastă
calitate. HTML se poate genera direct utilizând tehnologii de codare din partea serverului cum ar fi PHP,
JSP sau ASP. Multe aplicaţii ca sistemele de gestionare a conţinutului, wiki-uri şi forumuri web generează
pagini HTML.
HTML este de asemenea utilizat în e-mail. Majoritatea aplicaţiilor de e-mail 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 e-mail le blochează intenţionat.
Tipurile de elemente de marcare în HTML, sunt prezentate mai jos:

• Marcare structurala. Descrie scopul unui text.
De exemplu: <h1>Fotbal</h1>
Direcţionează browserul pentru a reda "Fotbal" ca pe cel mai important titlu. Marcarea structurală
nu are un anumit stil predefinit, dar cele mai multe browsere web au standardizat modul în care acestea
sunt afişate. De exemplu, titlurile importante (h1, h2, etc.) sunt aldine şi mai mari decât restul textului.
De notat ca "hi" este folosit doar o singură dată per pagină deoarece cu el este marcat titlul ei.
• Marcare pentru prezentare. Descrie cum apare un text, indiferent de funcţiile sale.
De exemplu: <b>îngroşat</b>
Va afişa textul "îngroşat" cu litere groase, aldine, Nota: HTML a început în ultimii ani să
înceapă să nu mai folosească acest gen de tag-uri pentru ca "b" nu dă sens paginii, pe când tag-ul
"strong" (adică strong emphasis) dă un înţeles paginii, şi mai important, asemenea tag-uri pentru
prezentare doar încarcă o pagină cu informaţii şi o fac astfel mai greu de încărcat, iar apoi dacă ataşezi
un document CSS la pagină, o singură modificare la CSS (de ex: de la "font-weight:italic" la "font-
weight:bold" va schimba tot textul selectat, şi de exemplu, link-urile vor trece de la text înclinat la text
îngroşat, plus că în CSS avem avantajul de a putea preciza cât de mari sau mici să fie literele în pixeli
«px», în puncte «pt», etc.) avem acelaşi efect ca şi când am avea de schimbat toate tag-urile de "i" de pe
pagina în tag-uri de "b", muncă care chiar şi la un website mic este enormă, ce să mai vorbim de unul de
genul wikipedia. Aşa că dacă dorim să începem o cariera în HTML sau un hobby (şi să avem succes) nu
trebuie să folosim aceste taguri, nu degeaba s-a inventat CSS-ul. « Marcare pentru hiperlink. Leagă
părţi ale unui document cu alte documente.
De exemplu: <a href="http://ro.wikipedia.org/">Wikipedia Românească</a>
M
<a href" http://www.faces.md/user/crengushor"> aici sunt eu</a> cel care a pus linkul ăsta. Va
reda Wikipedia romaneasca ca hiperlink către un URL specificat. • Elemente speciale (widget). Creează
obiecte, cum ar fi butoanele şi listele.
Doar marcatorii de prezentare (împreuna cu foile de stiluri - CSS) determină cum conţinutul din
interiorul marcatorului va fi prezentat. Ceilalţi marcatori spun browserului ce obiecte să redea sau ce
funcţii să execute.
2. CSS
Stilurile interne
Mai întâi vom aborda metoda stilurilor interne. Această metodă înseamnă ca veţi plasa codul
CSS în interiorul fiecărei pagini HTML pe care doriţi să folosiţi stilurile respective, între tagurile <head>
</head>. Acest lucru se face ca în exemplul ce urmează:
<head>
<title>titlu pagina</title> <style type="text/css">Aici se definesc stilurile CSS</style>
</head>
Folosind această metodă (stilurile interne), fiecare fişier (X)HTML va conţine codul CSS folosit
la stilizare. Asta înseamnă că atunci când dorim să facem o schimbare de stil (mărimea fontului, culoare,
etc.) va trebui să operăm modificarea în toate paginile ce conţin acel stil. Metoda descrisă până acum
este bună atunci când avem de stilizat doua, trei pagini, însă când avem de a face cu site-uri de zeci sau
sute de pagini este destul de neplăcut sa modificam toate paginile.
Stilurile externe
În continuare vom explora metoda stilurilor externe. Un fişier CSS extern poate fi realizat cu
orice editor simplu de text (Notepad, Wordpad, etc.) sau cu editoare avansate gen Dreamweaver. Fişierul
CSS nu conţine sub nici o formă cod (X)HTML, ci doar cod CSS. Fişierul trebuie salvat cu extensia .css.
Inserarea fişierului extern în paginile (X)HTML se face foarte uşor, prin plasarea unui link (legătura) în
secţiunea <head> </head> a fiecărei pagini pe care dorim să folosim stilul respectiv. Iată un exemplu de
inserare a unui fişier extern .css într-o pagina (X)HTML:
<link rel="stylesheet" type="text/css" href-'Calea către fişierul.css" />

sau putem folosi metoda de import după cum urmează:
l,
<style type= text/css">@import url (Calea către fişierul.css )</style>
Oricare dintre metode este bună şi se obţine plasând unul dintre codurile de mai sus în secţiunea
<head> </head> a paginii, după cum exemplificam mai jos:
<head>
<title> titlu pagina </title>
<link rel-'stylesheet" type="text/css" href-'stil.css"
/> </head>
sau
<head>
<title> titlu pagina </title>
<style type="text/css"> @import url (Calea către fişierul.css) </style>
</head>
Folosind metoda fişierelor CSS externe, toate paginile (X)HTML vor folosi acelaşi fişier de stil.
Asta înseamnă că dacă dorim să facem o schimbare care să aibă efect în toate paginile, este de ajuns să
modificăm un singur fişier, şi anume cel de stil (.css), şi efectul se va observa pe toate paginile (X)HTML
ce folosesc acel fişier. Astfel facem schimbări în tot site-ul, indiferent de câte pagini are, fără efort şi mai
ales foarte repede.
lată câteva motive pentru care această metodă este mai buna.
• Întreţinere mai uşoară

• Dimensiuni reduse ale paginilor
• Economie de bandă internet
• Flexibilitate
Ordinea cascadelor
În paragrafele de mai sus am explicat cum se foloseşte un fişier CSS fie că este intern sau
extern. Se înţelege că este deja ceea ce am explicat mai sus. Probabil vă întrebaţi dacă putem folosi
ambele metode? Răspunsul este DA. Putem folosi atât metoda stilurilor interne cât şi metoda stilurilor
externe. Totuşi, ar mai fi o posibilitate... Stilurile "în linie" (inline styles).
Deci, ce metodă este mai bună?

Având în vedere că v-am prezentat trei metode de folosire a stilurilor CSS, este normal să vă
întrebaţi care este cea mai bună, sau dacă folosim două metode în acelaşi timp, care este ordinea
folosirii lor pentru o interpretare corectă de către browsere ? Toate metodele, se vor executa în cascada,
într-o "pseudo-foaie de stil", în ordinea următoare:
 Stiluri in linie
 Foaie de stil internă
 Foaie de stil externă
Dacă ne referim la "care este mai bună", putem spune ca depinde de ceea ce ne-am propus
să realizăm/obţinem. Dacă avem o singură pagină pe care trebuie să o stilizăm, putem folosi metoda
stilurilor interne fără nici o problemă. Pe de alta parte, dacă avem de stilizat un număr mare de pagini, cel
mai bine este să folosim foile de stil externe. Modul în care vom implementa foile externe în paginile
noastre rămâne la latitudinea noastră, şi avem de ales între metoda cu link sau metoda cu ©import, după
cum am exemplificat mai sus.
Trebuie specificat însă că metoda importului (@import) va fi un pic mai greoaie, fiind posibil să
dureze o secundă, două, până se încarcă foaia de stil, timp în care conţinutul este afişat nestilizat.
Utilizatorii cu disabilităţi
Folosirea foilor de stil externe mai are un avantaj major, şi anume permit vizualizarea
conţinutului paginii HTML şi de către utilizatorii cu disabilităţi. De exemplu, utilizatorul respectiv, poate
renunţa la folosirea foii de stil pe care a definit-o, şi poate aplica o foaie de stil specială, a lui, care îl ajută
să vizualizeze pagina într-un mod facil. Poate mari fontul, poate schimba culorile, etc.
Probleme de browser
Pe măsura ce vom aprofunda folosirea CSS-ului, vom descoperi că nu toate browserele

interpretează la fel stilurile. CSS-ul va fi interpretat diferit de browsere, ceea ce va cauza dureri de cap.
Există totuşi metode de rezolvare a acestor metode pe care le vom explica la momentul potrivit.
3. A.C.U.
3.1 lndex.HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtdM>
<html xmlns-'http://www.w3.Org/1999/xhtml">
<head>
<meta http-equiv-'Content-Type" content="text/html; charset=utf-8" />
<title>Anatomia Corpului Uman</title>
<LINK media=screen href-'style.css" type=text/css rel=stylesheet>
<script type="text/javascript">

</script>
</head>
<body
onload="MM_preloadilmages(site/layout/sn_over.jpg, site/layout/sc_over.jpg, site/layout/sr_over.jpg,
site/layout/so_over.jpg, site/layout/sm_over.jpg, site/layout/sd_over.jpg, site/layout/sex_over.jpg) ">
<br />
<table width="1000" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td width="1000" height="120" align="center" valign="middle"><a href="index.html"><img
src="site/layout/head.jpg" border="0" /></a></td>
</tr> <tr>
<td>
<table width="1000" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td align-'center" valign="middle">
<table width="356" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="356" height="100" align="center" valign="middle">
<a href-'sn.html" onmouseout="MM_swaplmgRestore()"
onmouseover=''MM_swaplmage('sn','','site/layout/sn_over.jpg',1)''><img src="site/layout/sn.jpg"
name ="sn"width="356" height="100" border="0" id="sn" /></a>
</td>
</tr>
<tr>
<a href="se.html" onmouseout="MM_swaplmgRestore()"
onmouseover="MM_swaplmage('se',",'site/layout/se_over.jpg', 1 )"><img src="site/layout/se.jpg"
name=se width="356" height="100" border="0" id="se" /></a>
</td>
</tr>
<tr>
<a href="sc.htm!" onmouseout="MI\/l_swaplmgRestore()"
onmouseover=''MM_swaplmage('sc','','site/layout/sc_over.jpg',1)''><img src="site/layout/sc.jpg" name=sc
width="356" height="100" border="0" id="sc" /></a>
</td>
</tr>
<tr>
<a href="sr.html" onmouseout="MM_swaplmgRestore()"
onmouseover="MM_swaplmage('sr',",'site/layout/sr_over.jpg', 1 )"><img src="site/layout/sr.jpg" name='sr
width="356" height="100" border="0" id="sr" /></a>
</td>
</tr>
</tab!e>
</td>
<td align="center" valign="middle"><img src="site/layout/body.jpg" border="0" /></td>
<td align-'center" valign="middle">
<table width="356" a!ign="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<a href="so.html" onmouseout="MM_swaplmgRestore()"
onmouseover:="MM_swaplmage('so',",'site/layout/so_over.jpg'11 )"><img src="site/layout/so.jpg"
name=so width="356" height="100" border="0" id="so" /></a>
</td>
</tr>
<tr>
<a href="sm.html" onmouseout="MM_swaplmgRestore()"
onmouseover="MM_swaplmage('sm',",'site/layout/sm_over.jpg',1)"><img src="site/layout/sm.jpg"
name="sm" width="356" height="100" border="0" id="sm" /></a>
</td>
</tr>
<tr>
<td width="356" height-'100n aligrR"center" valign^'middle'
<a href-'sd htmr onmouseout=,,MM_swaplmgRestore()"
onmouseover=,,MM__swaplmage(isd',n,,site/layout/sd__over jpg', 1 )"><img src-'site/layout/sd.jpg"
name=sd width="356 height=100M border="0 id="sd" /></a>
</td>
</tr>
<tr>
<td width=M356" height-'100" align="center" valign="middle">
<a href="sex.html" onmouseout="MM_swaplmgRestore()M
onmouseover-MMM_swaplmage(,sex'/site/layout/sex_over jpg\1)"><img src=nsite/layout/sex.jpg"
name=sex" width=356" height="100" border=n0" id="sex" /></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width=1000" height="80" align»"center" valign="middle"><img src-"site/layout/bottom.jpg
border- 0/></td>
</tr>
</table>
</body>
</html>
3.2. Anexe
a).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
http//www w3 org/TR/xhtml 1 /DTD/xhtml 14ransitional.dtd>
<html xmlns-"http//www w3 org/1999/xhtml>
<head>
<meta http-equiv-'Content Type" content-'text/htmi; charset=utf-8 />
<title>Anatomia Corpului Uman - Sistemul Nervos</title>
<LINK media=screen href="style,css" type=text/css rel=stylesheet>
M
<script type-'text/javascript >

</script>
</head>
<body
onload-
'MM_preloadlmages('site/layout/layout2/sr_overjpg\'site/layout/layout2/so_overjpg\'site/layout/lay
out2/sr_over.jpg,site/layout2/so_over.jpg.site/layout.jpg\'site/layout/layout2/sex_overJpg\'site/layout/layout2
/neuronul_overJpg\'site/layout/layout2/over.jpg\'site/layout/layout2/sn2_overJpg\'site/layout/layout2/igiena_
overjpg\'site/layout/layout2/imag er.jpg')">
<table width="1000" cellpadding="0" cellspacing="0" align="center" border="0">
<tr>
<td width="1000" height="156" align="center" valign-'middle"><a href="index.html"><img
src="site/layout/layout2/head.jpg" border="0" /></a></td>
</tr>
<tr>
<td width-'1000" align-'center" valign="top">
<table width="1000" align="center" ceilpadding="0" cellspacing="0" border="0">
<tr>
<td width="165" align="center" valign="top">
<tr>
<img src="site/layout/layout2/sn_over.jpg" border="0" />
</td>
</tr>
<tr>
<a href="se.html" onmouseout="MM_swaplmgRestore()"
,
onmouseover=''MM_swaplmage('se','','site/layout/layout2/se_over.jpg ,1)''><img
src="site/layout/layout2/se.jpg" name="se" width="165" height="62" border="0" id="se" /></a>
</td>
</tr>
<tr>
<a href="sc.html" onmouseout="MM_swaplmgRestore()"
onmouseover=''MM_swaplmage('sc','','site/layout/layout2/sc_over.jpg',1)"><img
src="site/layout/layout2/sc.jpg" name="sc" width="165" height="62" border="0" id="sc" /></a>
</td>
</tr>
<tr>
<a href="sr.html" onmouseout="MM_swaplmgRestore()"
onmouseover=''MM_swaplmage('sr','','site/layout/layout2/sr_over.jpg',1)''><img
src="site/layout/layout2/sr.jpg" name="sr" width="165" height="62" border="0" id="sr" /></a>
</td>
</tr>
<tr>
<td width="165" height="63" align="center" valign="middle"> <a href="so.html"
onmouseout="MM_swaplmgRestore()"
onmouseover=''MM_swaplmage('so','','site/layout/layout2/so_over.jpg',1)''><img
src="site/layout/layout2/so.jpg" name="so" width="165" height="63" border="0" id="so" /></a>
</td>
</tr>
<tr>
<a href="sm.html" onmouseout="MM_swaplmgRestore()"
onmouseover=''MM_swaplmage('sm','','site/layout/layout2/sm_over.jpg',1)''><img
src="site/layout/layout2/sm.jpg" name="sm" width="165" height="63" border="0" id="sm" /></a>
</td>
</tr>
<tr>
<a href-'sd.html" onmouseout="MM_swaplmgRestore()"
,
onmouseover="MM_swaplmage('sd','','site/layout/layout2/sd_over.jpg ,1)''><img
src="site/layout/layout2/sd.jpg" name="sd" width="165" height="63" border="0" id="sd" /></a>
</td>
</tr>
<tr>
<a href="sex.html" onmouseout="MM_swaplmgRestore()"
onmouseover=''MM_swaplmage('sex',",'site/layout/layout2/sex_over.jpg',1)''><img
src="site/layout/layout2/sex.jpg" name="sex" width="165" height="62" border="0" id="sex" /></a>
</td>
</tr>
</table>
</td>
<td width="835" align="center" valign="top">
<tr>
<tr>
<a href="neuronul.html" onmouseout="MM_swaplmgRestore()"
onmouseover=''MM_swaplmage('neuronui'1",'site/layout/layout2/neuronul_over.jpg',1)''><img
src="site/layout/layout2/neuronul.jpg" name="neuronul" width="184" height="62" border="0" id="neuronul"
/></a>
</td>
<td width="152" height="62" align="center" valign="tniddle">
<a href-'creierul.htmr onmouseout="MM_swaplmgRestore()"
onmouseover=''MM_swaplmage('creierur,'','site/layout/layout2/creierul_over.jpg',1)''><img
src="site/layout/layout2/creierul.jpg" name="creieru!" width="152" height="62" border="0" id="creierul"
/></a>
</td>
<td width="152" height="62" align="center" vaiign="middle">
<a href="sn2.html" onmouseout="MM_swaplmgRestore()"
onmouseover=''MM_swaplmage('sn2','','site/layout/layout2/sn2_over.jpg',1)"><img
src="site/layout/layout2/sn2.jpg" name="sn2" width="152" height="62" border="0" id="sn2" /></a>
</td>
<a href="igiena_sn.html" onmouseout="MM_swaplmgRestore()"
onmouseover="MM_swaplmage('igiena','','site/layout/layout2/igiena_over.jpg',1)''><img
src="site/layout/layout2/igiena.jpg" name="igiena" width="152" height="62" border="0" id="igiena" /></a>
</td>
<a href="imagini_sn.html" onmouseout="MM_swaplmgRestore()"
onmouseover=''MM_swaplmage('imaginiV\'site/layout/layout2/imagini_overjpg\1)''><img
M
src="site/layout/layout2/imagini.jpg" name="imagini" width= 195" height="62" border="0" id="imagini"
/></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
i
<td width-"835" height-"14" a!ign""cente-" valign""middle"><img
src=site/layout/layout2/cont__head.jpg" border=0" /></td>
</tr>
<tr>
<td width="835" align- 'left" valign-'top
background="site/layout/layout2/cont-body jpg>
{
<table width- 800" align-'center" cellpadding-"0" cellspacing="0" border "0>
<tr>
<td width="800" align=center valign-'top" class-'conf >
<br />
<h1>Sistemul Nervos</n1><br /><br />
<center>
n
<img src-'site/sn/male.jpg border="0
/> &nbsp,
<img src="site/sn/female.jpg" border-'0 />
</center>
</td>
</tr>
</table>
</td>
</tr>
<tr>
M
<td width-'"835" height=17 align-'center" valign~"middie ><img
src=site/layout/layout2/cont_ bottom.jpg" border "0" /></t.d>
</tr>
</table>
</td>
</tr>
</table>
</td>
b). Butoane specifice:
BIBLIOGRAFIE
 HTML & CSS, Traian Anghel, Teora

Atestat Informatica

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Atestat Informatica

Încărcat de

Drepturi de autor:

Formate disponibile

CUPRINS

Tipurile de elemente de marcare în HTML, sunt prezentate mai jos:

<link rel="stylesheet" type="text/css" href-'Calea către fişierul.css" />

• Întreţinere mai uşoară

Deci, ce metodă este mai bună?

 Foaie de stil internă

 Foaie de stil externă

Pe măsura ce vom aprofunda folosirea CSS-ului, vom descoperi că nu toate browserele

S-ar putea să vă placă și