Document A Tie

Colegiul Naional de Informatic
Proiect pentru atestarea competenelor profesionale la

informatic
Materiale de construcii
- pagini web
Profesor coordonator, Elev,

Gheorghe Manolache Adrian Hogea
Clasa a XII-a D
- Mai 2017 -
Cuprins
1. Argument3
2. Prezentarea limbajului utilizat (HTML i CSS)...4
2.1. Introducere internet, site-uri web i HTML...4
2.2. Paragrafe i atribute ale unui tag...5
2.3. Elemente care permit formatarea textului.5
2.4. Imagini.6
2.5. Hyperlinks7
2.6. CSS (Cascading Style Sheets)..7
3. Mod de implementare8
4. Mod de utilizare...37
4.1. Pagina Acas.37
4.2. Pagina Materiale38
4.3. Paginile despre material38
4.4. Pagina Despre39
5. Resurse hardware i software39
6. Concluzii...40
7. Bibliografie...41
2
1. Argument
Poate v ntrebai de ce am ales aceast tem, materiale de construcii. Ei bine, avnd n

vedere domeniul n care vreau s profesez, inginer constructor, aceast tem mi s-a prut cea
mai potrivit. ncurajat de ideea c domeniul construciior este unul de viitor, am ales s scriu
despre esena construciilor. Lucrurile pe care Mama Natur ni le ofer i pe care muli dintre
noi le considerm banale, sunt transformate de inginerul constructor n capodopere. Consider
c informaiile pe care am reuit s le sintetizez i s le redau ntr-o form ct mai plcut m
vor ajuta mai departe n cariera mea.
3
2. Prezentarea limbajului utilizat (HTML i CSS)
2.1. Introducere internet, site-uri web i HTML
Ce este internetul ?
Internetul este o reea de ntindere mondial care cuprinde o vast colecie de informaii i
resurse disponibile prin intermediul calculatorului. Internetul a fost descris ca o colecie larg
de reele legate sau ca o reea de reele. Amndou descrierile sunt relativ exacte, ntr-un
fel, dar sunt insuficiente pentru a arta complet ce anume este Internetul n realitate.
Pentru o anume comunitate tiinific, s-ar putea descrie Internetul ca pe un instrument de
cercetare esenial i indispensabil. Prin Internet se poate obine acces la cele mai avansate
faciliti de cercetare din lume. Acolo se poate discuta despre cercetarea i necesitile
fiecruia, cu alte persoane care lucreaz la aceleai probleme, n aceleai scopuri. Se poate
avea acces la faciliti de calcul avansate, supercalculatoarele fiind astfel la dispoziia
oamenilor de tiin i a cercettorilor.
n fine, pentru managerii industriei i comerului, Internetul ar putea fi mijlocul de acces la
o comunitate similar, cu care se pot face direct afaceri sau schimba informaii, ceea ce poate
avea o influen direct asupra produselor i planurilor de marketing viitoare.
n toate aceste descrieri se observ o tem care se repet comunitatea Internet i
instrumentul care este Internet. Aceti doi termeni sunt cei mai potrivii pentru a descrie ceea
ce reprezint Internetul. Este un nou mod de a vedea o comunitate vast i larg dispersat, cu
muli membri.
Fiecare membru poate cuta s ating diferite scopuri prin diferite mijloace, folosind
instrumentele oferite de Internet pentru a uura dezvoltarea acestora.
Ce este un site-web ?
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
mouse-ului 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.
4
Ce este HTML ?
Unul din primele elemente fundamentale ale WWW ( World Wide Web ) este HTML
(Hypertext Markup Language), care descrie formatul primar n care documentele sunt
distribuite i vzute pe Web. Multe din trsturile lui, cum ar fi independena fa de
platform, structurarea formatrii i legturile hypertext, fac din el un foarte bun format
pentru documentele Internet i Web.
HTML 2.0, elaborat n Iunie 1994, este standardul pe care ar trebui s-l suporte toate
browserele curente -- inclusiv cele mod text. HTML 2.0 reflect concepia original a HTML
c un limbaj de marcare independent de obiectele existente pentru aezarea lor n pagin, n
loc de a specifica exact cum ar trebui s arate acestea. Dac dorii s fii siguri c toi
vizitatorii vor vedea paginile aa cum trebuie, folosii tagurile HTML 2.0.
Specificaia HTML 3.0, enunat n 1995, a ncercat s dezvolte HTML 2.0 prin adugarea
unor faciliti precum tabelele i un mai mare control asupra textului din jurul imaginilor.
Documentele HTML sunt documente n format ASCII i prin urmare pot fi create cu orice
editor de text. Au fost ns dezvoltate editoare specializate care permit editarea ntr-un fel de
WYSIWYG dei nu se poate vorbi de WYSIWYG atta vreme ct navigatoarele afieaz
acelai document oarecum diferit, n funcie de platforma pe care ruleaz. Au fost de
asemenea dezvoltate convertoare care permit formatarea HTML a documentelor generate (i
formatate) cu alte editoare. Evident conversiile nu pot pstra dect parial formatrile
anterioare deoarece limbajul HTML este nc incomplet.
2.2. Paragrafe i atribute ale unui tag
Paragraful este un elemet de baza n editare de text. Tag-ul pentru paragraf este <p>.
Acesta va plasa o linie goal deasupra i dedesuptul textului pentru a fi evideniat, iar
browser-ul l va interpreta ca atare.
Atributele sunt folosite pentru a personaliza tag-urile. Ce vreau s spun? C la un moment
dat vei vrea s redimensionezi o imagine sau un tabel sau s schimbi culoarea de fond. Toate
acestea sunt posibile cu ajutorul atributelor.
Atributele class i id sunt foarte asemntoare. Ele nu au un rol direct n formatarea
elementelor i mai degrab sunt utile n spatele scenei cu ajutorul CSS. Idea este c atunci
cnd vrei s stabileti o clas de tag-uri pentru a fi folosite mai trziu cu ajutorul CSS, s poi
diferenia ntre dou tag-uri identice dar cu atribute diferite.
Atributul title este folosit foarte puin fa de ct ar trebuii, el adaugnd un titlu (un pop-
up) oricrui coninut al unui element. Acest atribut nu ar trebui uitat. Poi denumi aproape
orice i oricum doreti. Vizualizarea titlului apare atunci cnd ne oprim cu mouse-ul cteva
secunde deasupra connutului.
2.3. Elemente care permit formatarea textului
Un font este caracterizat de urmtoarele atribute:

culoare (stabilit prin atributul color);
tipul sau stilul (stabilit prin atributul face);
mrimea (definit prin atributul size);
mrimea in puncte tipografice (stabilit prin atributul point-size);
grosime (definit prin atributul weight).
5
Toate aceste atribute aparin etichetei <font>, care permite inserarea de blocuri de texte
personalizate.
Culori
O culoare poate fi precizat n dou moduri:
printr-un nume de culoare.
printr-o constant conform standardului de culoare RGB (Red, Green, Blue).
Pentru a scrie un fragment de text cu caractere de o anumit culoare se ncadreaz acest

fragment ntre delimitatorii <font>...</font> avnd stabilit atributul color la valoarea necesara.
De exemplu : <font color=red>fragment de text de culoare roie</font>
Familia fontului
Pentru a scrie un text ntr-o pagin pot fi folosite mai multe fonturi (stiluri de caractere).
Exist cinci familii generice de fonturi care sunt de regul disponibile pe toate calculatoarele
utilizatorilor: serif, sans serif, cursive, monospace i fantasy.
Tipul de font necesar poate fi stabilit prin atributul face al etichetei <font>.
Pot fi introduse mai multe fonturi separate prin virgul. De exemplu : <font face = "
Arial, serif, monospace ">
Mrimea fontului
Pentru a stabili mrimea unui font se utilizeaz atributul size al etichetei <font>. Valorile
acestui atribut pot fi:
1, 2, 3, 4, 5, 6, 7 ( 1 pentru cel mai mic font i 7 pentru cel mai mare);
+1, +2, etc. pentru a mri dimensiunea fontului cu 1, 2, etc. fa de valoarea curent;
-1, -2, etc. pentru a micora dimensiunea fontului cu 1, 2, etc. fa de valoarea curent.
Grosimea unui font

Grosimea unui caracter poate fi definit cu ajutorul atributului weight al etichetei <font>.
Valorile posibile pentru acest atribut sunt 100, 200, 300, 400, 500, 600, 700, 800 si 900 (100
pentru fontul cel mai subire si 900 pentru cel mai gros).
2.4. Imagini
Folosirea imaginilor sporete atractivitatea i designul paginii, duce la o mai bun

inelegere a mesajului, dar trebuie luat n considerare i faptul c excesul de imagini va duce
la ncrcarea greoaie a site-ului. Exist numeroase formate grafice, dar cele mai rspndite
sunt:
GIF (Graphics Interchange Format);
JPEG (Joint Photographic Expert Group);
PNG (Portable Network Graphic Format Grafic portabil n reea).
O adres relativ identific locaia unei imagini, descriind o cale relativ la directorul
curent unde se afl fiierul imagine. Adresele relative se refer la localizarea fiierului
imagine de pe calculatorul personal i are sintaxa: cale/nume_fiier.
Toate imaginile cu care vom lucra vor avea adresa URL exprimat n funcie de directorul
ce conine documentul HTML care face referire la imagine, adic adres relativ.
Imaginile se inseraez n pagini cu ajutorul tag-ului <img>, care este un element inline,
adic poate fi inserat oriunde n pagin. Sintaxa acestui element este: <img atribute>.
6
2.5. Hyperlinks
n HTML, un link este numit hyperlink. Acesta are rolul ca, odata apsat, s ne
redirectioneze ctre alt document. Cnd mutm cursorul mouse-ului peste un hyperlink acesta
se va transforma intr-o mic mn.
n HTML hyperlink-urile sunt definite prin tag-ul <a>.
Atributul <href> specific adresa de destinaie.
2.6. CSS (Cascading Style Sheets)
CSS este un limbaj (style language) care definete "layout-ul" pentru documentele HTML.
CSS acoper culori, font-uri, margini (borders), linii, nlime, lime, imagini de fundal,
poziii avansate i multe alte opiuni.
HTML este de multe ori folosit necorespunzator pentru a crea layoutul site-urilor de
internet. CSS ofer mai multe opiuni, este mai exact i sofisticat. n plus, este suportat de
toate browserele actuale.
Care este diferena dintre HTML i CSS ?
HTML este folosit pentru a structura coninutul n timp ce CSS este folosit pentru a
formata coninutul.
n perioada de nceput a web-ului, HTML era folosit numai pentru structurarea textului.
Textul se putea marca cu taguri precum <hl> si <p> pentru a marca titlul sau un paragraf.
Odat cu creterea popularitii web-ului, designerii au nceput s caute diferite posibiliti de
a aduga layout documentelor online. Pentru a raspunde acestor cerine, productorii de
browsere (n acea vreme Microsoft i Netscape) au inventat noi taguri HTML precum <font>
care difer fa de tagurile originale HTML prin faptul c definesc layoutul i nu structura.
Acest lucru a dus i la o situaie unde tagurile originale de structur ca <table> s fie
folosite necorespunztor pe pagini de layout. Multe taguri noi de layout precum <blink> erau
recunoscute numai de unele browsere. O formul comun ce aprea pe site-uri era "Avei
nevoie de browserul X pentru a vedea aceast pagin". CSS a fost inventat pentru a remedia
aceast situaie, furnizndu-le designerilor faciliti sofisticate pentru editarea layoutului,
suportate de toate browserele.
n acelai timp, separarea site-urilor de prezentare pentru documente de coninutul
documentelor, uureaz foarte mult intreinerea lor.
Ce avantaje aduce CSS?
CSS a reprezentat un element revoluionar n lumea web-designului.
Beneficiile concrete includ:

- controlarea layoutului documentelor dintr-o singur pagin de stiluri,
- control mai exact al layoutului,
- aplicare de layouturi diferite pentru tipuri media diferite (ecran, printare, etc),
- tehnici numeroase i sofisticate.
7
3. Mod de implementare
n acest capitol voi prezenta pas cu pas modul in care am realizat pagina web,
intitulat ,,Materiale de construcii. Pe parcursul lucrrii, toate informaiile referitoare la
materialele de construcii vor fi sintetizare prin cuvantul INFORMAIE.
Pentru nceput, am realizat pagina principal a site-ului, intitulata acas.html. Dup
modelul acestei pagini vor fi realizate i restul, cu mici modificri, pentru o ncadrare mai
bun i mai plcut a informaiilor. Aceasta cuprinde titlul, butoanele de redireionare
(Acas, Materiale i Despre) i un citat motivaional, incadrat elegant intr-un dreptunghi alb
semi-transparent.
Mai jos putei vedea codurile HTML i CSS ale paginii acas.html :
HTML
<html>
<head>
<title>MC | Acasă</title>
</head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
<body>
<div id="Container">
<div id="Titlu">
<a href="index.html"><div class="Titlu">MATERIALE DE
CONSTRUCŢII</div></a>
</div>
<div id="Menu">
<a href="acasa.html"><div class="Acasa">ACASĂ</div></a>
<a href="materiale.html"><div class="Materiale">MATERIALE</div></a>
<a href="despre.html"><div class="Despre">DESPRE</div></a>
</div>
<div id="MainBody">
<div id="CadruCitat">
<div class="Citat">Un om de succes este acela care poate construi o fundaţie
solidă cu cărămizile pe care alţii le aruncă n el.</div>
<div class="Autor">David Charles Brink</div>
</div>
</div>
<div id="Footer">
</div>
</div>
CSS
8
body #Menu
{ {
position:relative; width:500px;
background-image: height:40px;
url("imagini/fundal.jpg"); background-color:#;666;
overflow: auto; margin-top:20px;
background-repeat: no-repeat; margin-left:500px;
background-size: cover; text-align:center;
overflow-y:scroll; }
}
.Acasa
#Container {
{ font-family:"Arial Black";
width:1000px; font-size:30px;
height:auto; color:#ffffff;
margin-left:auto; float:left;
margin-right:auto; }
margin-top:40px;
margin-bottom:40px; .Materiale
} {
font-family:"Arial Black";
#Titlu font-size:30px;
{ color:#ffffff;
width:1000px; float:left;
height:90px; margin-left:30px;
background-color:#558C89; }
box-shadow: 1px 1px 20px 0px
rgba(54,54,54,1); .Despre
} {
font-family:"Arial Black";
.Titlu font-size:30px;
{ color:#ffffff;
font-family:"Arial Black"; float:right;
color:#ffffff; }
float:left;
font-size:60px; #MainBody
margin-left:10px; {
margin-top:1px; width:1000px;
} height:700px;
#CadruCitat margin-top:20px;
{ box-shadow:;1px 1px 20px 0px
width:1000px; rgba(54,54,54,1);
height:700px; }
background-color:rgba(255,255,255,0.1);
}
.Citat
9
{
font-family:"Arial";
font-size:20px;
color:#ffffff;
margin-left:80px;
margin-top:70px;
margin-right:30px;
float:left;
}
.Autor
{
font-size:20px;
color:#ffffff;
margin-left:600px;
margin-top:20px;
float:left;
}
#Footer
{
height:60px;
background-color:#74AFAD;
clear:both;
margin-top:30px;
box-shadow: 1px 1px 20px 0px
rgba(54,54,54,1);
}
Rezultat
10
Pagina material.html este mprit n dou seciuni : partea din stnga conine lista cu cele
zece materiale de construcii pe care eu am ales s vi le prezint i partea din dreapta care
sintetizeaz informaii generale legate de fiecare material.
Mai jos putei vedea codurile HTML i CSS ale paginii materiale.html :
HTML
<html>
<head>
<title>MC | Materiale</title>
</head>
<body>
<div id="Titlu">
</div>
<div id="Menu">
</div>
<div id="ContainerMateriale">
<div id="Lista">
<div id="CadruCuie">
<a href="cuie.html"><div class="Cuie">Cuie</div></a>
</div>
<div id="CadruCaramida">
<a href="caramida.html"><div
class="Caramida">Cărămidă</div></a>
</div>
<div id="CadruCiment">
11
<a href="ciment.html"><div class="Ciment">Ciment</div></a>
</div>
<div id="CadruTigla">
<a href="tigla.html"><div class="Tigla">Ţiglă</div></a>
</div>
<div id="CadruLemn">
<a href="lemn.html"><div class="Lemn">Lemn</div></a>
</div>
<div id="CadruFierbeton">
<a href="fier beton.html"><div class="Fierbeton">Fier Beton</div></a>
</div>
<div id="CadruNisip">
<a href="nisip.html"><div class="Nisip">Nisip</div></a>
</div>
<div id="CadruPietris">
<a href="pietris.html"><div class="Pietris">Pietriş</div></a>
</div>
<div id="CadruVataMinerala">
<a href="vataminerala.html"><div class="VataMinerala">Vată
Minerală</div></a>
</div>
<div id="CadruPolistiren">
<a href="polistiren.html"><div class="Polistiren">Polistiren</div></a>
</div>
</div>
<div id="Info2">
<div id="CadruInfo2">
<p>INFORMAIE</p>
</div>
</div>
</div>
<div id="Footer">
</div>
</div>
CSS
body #Container
{ {
position:relative; width:1000px;
background-image: height:auto;
url("imagini/fundal.jpg"); margin-left:auto;
overflow: auto; margin-right:auto;
background-repeat: no-repeat; margin-top:40px;
background-size: cover; margin-bottom:40px;
overflow-y:scroll; }
}
#Titlu .Despre
{ {
12
width:1000px; font-family:"Arial Black";
height:90px; font-size:30px;
background-color:#558C89; color:#ffffff;
box-shadow: 1px 1px 20px 0px float:right;
rgba(54,54,54,1); }
}
#MainBody
{
.Titlu width:1000px;
{ height:700px;
font-family:"Arial Black"; margin-top:20px;
color:#ffffff; box-shadow:;1px 1px 20px 0px
float:left; rgba(54,54,54,1);
font-size:60px; }
margin-left:10px;
margin-top:1px; #ContainerMateriale
} {
width:1000px;
#Menu height:700px;
{ background-color:#;558C89;
width:500px; margin-top:20px;
height:40px; }
background-color:#;666;
margin-top:20px; #Lista
margin-left:500px; {
text-align:center; width:200px;
} height:690px;
background-color:;#558C89;
.Acasa float:left;
{ border-style: solid;
font-family:"Arial Black"; border-top-color:#74AFAD;
font-size:30px; border-top-width:5px;
color:#ffffff; border-left-width:0px;
float:left; border-right-width:0px;
} border-bottom-width:5px;
border-bottom-color:#74AFAD;
.Materiale box-shadow:; 1px 1px 20px 0px
{ rgba(54,54,54,1);
font-family:"Arial Black"; }
font-size:30px;
color:#ffffff; #CadruCuie
float:left; {
margin-left:30px; margin-top:25px;
} width:200px;
height:50px;
}
#CadruCaramida #CadruPietris
{ {
13
margin-top:15px; margin-top:15px;
width:200px; width:200px;
height:50px; height:50px;
background-color:rgba(255,255,255,0.1); background-color:rgba(255,255,255,0.1);
} }
#CadruCiment #CadruVataMinerala
{ {
width:200px; width:200px;
height:50px; height:50px;
background-color:rgba(255,255,255,0.1); background-color:rgba(255,255,255,0.1);
} }
#CadruPolistiren
#CadruTigla {
{ margin-top:15px;
width:200px; height:50px;
height:50px; background-color:rgba(255,255,255,0.1);
background-color:rgba(255,255,255,0.1); }
}
#Info
#CadruLemn {
{ width:780px;
margin-top:15px; height:700px;
width:200px; background-color:;#ffffff;
height:50px; float:right;
} }
#CadruFierbeton #CadruInfo
{ {
width:200px; height:690px;
height:50px; background-color:rgba(255,255,255,0.1);
background-color:rgba(255,255,255,0.1); border-style: solid;
} border-top-color:#74AFAD;
border-top-width:5px;
#CadruNisip border-left-width:0px;
{ border-right-width:0px;
margin-top:15px; border-bottom-width:5px;
width:200px; border-bottom-color:#74AFAD;
height:50px; overflow-y:scroll;
background-color:rgba(255,255,255,0.1); }
}
#Info2 p4
{ {
14
width:780px; font-family:"Arial";
height:690px; font-size:20px;
background-color:;#ffffff; color:#ffffff;
float:right; margin-left:200px;
}#CadruInfo2 margin-top:35px;
{ }
width:780px;
height:690px; #Footer
background-color:rgba(255,255,255,0.1); {
border-style: solid; height:60px;
border-top-color:#74AFAD; background-color:#74AFAD;
border-top-width:5px; clear:both;
border-left-width:0px; margin-top:30px;
border-right-width:0px; box-shadow: 1px 1px 20px 0px
border-bottom-width:5px; rgba(54,54,54,1);
border-bottom-color:#74AFAD; }
}
.Cuie
p {
{ font-family:"Arial";
font-family:"Arial"; font-size:20px;
font-size:20px; color:#ffffff;
color:#ffffff; margin-left:70px;
margin-left:25px; float:left;
margin-right:30px; }
}
.Caramida
p2 {
}
.Ciment
p3 {
}
.Tigla .VataMinerala
{ {
15
font-family:"Arial"; font-family:"Arial";
font-size:20px; font-size:20px;
color:#ffffff; color:#ffffff;
margin-left:70px; margin-left:30px;
float:left; float:left;
} }
.Lemn .Polistiren
{ {
font-family:"Arial"; font-family:"Arial";
font-size:20px; font-size:20px;
color:#ffffff; color:#ffffff;
margin-left:70px; margin-left:50px;
float:left; float:left;
} }
.Fierbeton
{
font-size:20px;
color:#ffffff;
margin-left:55px;
margin-top:15px;
float:left;
}
.Nisip
{
font-size:20px;
color:#ffffff;
margin-left:70px;
margin-top:15px;
float:left;
}
.Pietris
{
font-size:20px;
color:#ffffff;
margin-left:70px;
margin-top:15px;
float:left;
}
Avnd n vedere c CSS-ul din materiale.html se repet i la elementele care constituie lista, l
voi nota cu [CSS], pentru a nu obosi cititorul.
16
Rezultat
n continuare am creat fiecare pagin din lista de materiale. Prima pagin din list se numete
cuie.html i prezint informaii referitoare la aspect i modele.
Design-ul este similar ( simplu i plcut ).
Mai jos putei vedea codurile HTML i CSS ale paginii cuie.html :
HTML
<html>
<head>
<title>MC | Cuie</title>
</head>
<body>
<div id="Titlu">
</div>
<div id="Menu">
</div>
<div id="Lista">
</div>
17
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Minerală</div></a>
</div>
</div>
</div>
<div id="Info">
<div id="CadruInfo">
<p>INFORMAIE</p>
<img src="imagini/cuie.jpg" alt="Cuie" id="PozaCuie">
</div>
</div>
</div>
<div id="Footer">
</div>
</div>
CSS
[CSS]
#PozaCuie
{
margin-top:-1240px;
margin-left:100px;
}
Rezultat
18
A doua pagin din list este carmid.html. Aceasta surprinde informatii generale despre tipul
de cramizi i proprietile acestora.
Mai jos putei vedea codurile HTML i CSS ale paginii crmid.html :
HTML
<html>
<head>
<title>MC | Cărămidă</title>
</head>
<body>
<div id="Titlu">
</div>
<div id="Menu">
</div>
<div id="Lista">
</div>
</div>
19
</div>
</div>
</div>
</div>
</div>
</div>
Minerală</div></a>
</div>
</div>
</div>
<div id="Info">
<p>INFORMAIE</p>
<img src="imagini/caramida3.jpg" alt="Caramida" id="PozaCaramida">
</div>
</div>
</div>
<div id="Footer">
</div>
</div>
CSS
[CSS]
#PozaCaramida
{
margin-top:-1420px;
margin-left:130px;
}
Rezultat
20
A treia pagin se numete ciment.html.
Mai jos putei vedea codurile HTML i CSS ale paginii ciment.html :
HTML
<html>
<head>
<title>MC | Ciment</title>
</head>
<body>
<div id="Titlu">
</div>
<div id="Menu">
</div>
<div id="Lista">
</div>
</div>
21
</div>
</div>
</div>
</div>
</div>
</div>
Minerală</div></a>
</div>
</div>
</div>
<div id="Info">
<p>INFORMAIE</p>
<img src="imagini/ciment2.jpg" alt="Ciment" id="PozaCiment">
</div>
</div>
</div>
<div id="Footer">
</div>
</div>
CSS
[CSS]
#PozaCiment
{
margin-top:-1100px;
margin-left:130px;
}
Rezultat
22
A patra pagin se numete igl.html i consider ca este un material foarte cunoscut i totodat
foarte folosit de mult lume.
Mai jos putei vedea codurile HTML i CSS ale paginii igl.html :
HTML
<html>
<head>
<title>MC | Ţiglă</title>
</head>
<body>
<div id="Titlu">
</div>
<div id="Menu">
</div>
<div id="Lista">
</div>
</div>
23
</div>
</div>
</div>
</div>
</div>
</div>
Minerală</div></a>
</div>
</div>
</div>
<div id="Info">
<p>INFORMAIE</p>
<img src="imagini/tigla2.jpg" alt="Tigla" id="PozaTigla">
</div>
</div>
</div>
<div id="Footer">
</div>
</div>
CSS
[CSS]
#PozaTigla
{
margin-top:-1280px;
margin-left:130px;
}
Rezultat
24
A cincea pagin atinge un subiect delicat, deoarece defririle nu sunt benefice, dar lemnul
este necesar pentru ridicarea unei cldiri rezistente.
Mai jos putei vedea codurile HTML i CSS ale paginii lemn.html :
HTML
<html>
<head>
<title>MC | Lemn</title>
</head>
<body>
<div id="Titlu">
</div>
<div id="Menu">
</div>
<div id="Lista">
</div>
</div>
25
</div>
</div>
</div>
</div>
</div>
</div>
Minerală</div></a>
</div>
</div>
</div>
<div id="Info">
<p>INFORMAIE</p>
<img src="imagini/lemn2.jpg" alt="Lemn" id="PozaLemn">
</div>
</div>
</div>
<div id="Footer">
</div>
</div>
CSS
[CSS]
#PozaTigla
{
margin-top:-1280px;
margin-left:130px;
}
Rezultat
26
Un alt element important n rezistena i sigurana lucrrii, este fierul beton. Noiunile de baz
sunt adunate in pagina fier beton.html
Mai jos putei vedea codurile HTML i CSS ale paginii fier beton.html :
HTML
<html>
<head>
<title>MC | Fier beton</title>
</head>
<body>
<div id="Titlu">
</div>
<div id="Menu">
</div>
<div id="Lista">
</div>
</div>
27
</div>
</div>
</div>
</div>
</div>
</div>
Minerală</div></a>
</div>
</div>
</div>
<div id="Info">
<p>INFORMAIE</p>
<img src="imagini/fier2.jpg" alt="Fier" id="PozaFier">
</div>
</div>
</div>
<div id="Footer">
</div>
</div>
CSS
[CSS]
#PozaFier
{
margin-top:-450px;
margin-left:130px;
}
Rezultat
28
n a aptea pagin, nisip.html, am prezentat unul dintre materialele de baz n construcii i
anume nisipul.
Mai jos putei vedea codurile HTML i CSS ale paginii nisip.html :
HTML
<html>
<head>
<title>MC | Nisip</title>
</head>
<body>
<div id="Titlu">
</div>
<div id="Menu">
</div>
<div id="Lista">
</div>
</div>
29
</div>
</div>
</div>
</div>
</div>
</div>
Minerală</div></a>
</div>
</div>
</div>
<div id="Info">
<p>INFORMAIE</p>
<img src="imagini/nisip2.jpg" alt="Nisip" id="PozaNisip">
</div>
</div>
</div>
<div id="Footer">
</div>
</div>
CSS
[CSS]
#PozaNisip
{
margin-top:-960px;
margin-left:130px;
}
Rezultat
30
A opta pagin din lista de materiale se numete pietri.html.
Mai jos putei vedea codurile HTML i CSS ale paginii pietri.html :
HTML
<html>
<head>
<title>MC | Pietriş</title>
</head>
<body>
<div id="Titlu">
</div>
<div id="Menu">
</div>
<div id="Lista">
</div>
</div>
31
</div>
</div>
</div>
</div>
</div>
</div>
Minerală</div></a>
</div>
</div>
</div>
<div id="Info">
<p>INFORMAIE</p>
<img src="imagini/pietris2.jpg" alt="Pietris" id="PozaPietris">
</div>
</div>
</div>
<div id="Footer">
</div>
</div>
CSS
[CSS]
#PozaPietris
{
margin-top:-680px;
margin-left:130px;
}
Rezultat
32
Vata mineral ocup i ea un loc important n categoria materialelor de construcii, aa c am
prezentat-o n pagina vatmineral.html.
Mai jos putei vedea codurile HTML i CSS ale paginii vatmineral.html:
HTML
<html>
<head>
<title>MC | Vată Minerală</title>
</head>
<body>
<div id="Titlu">
</div>
<div id="Menu">
</div>
<div id="Lista">
</div>
</div>
33
</div>
</div>
</div>
</div>
</div>
</div>
Minerală</div></a>
</div>
</div>
</div>
<div id="Info">
<p><INFORMAIE</p>
<img src="imagini/vataminerala2.jpg" alt="Vata minerala" id="PozaVataminerala">
</div>
</div>
</div>
<div id="Footer">
</div>
</div>
CSS
[CSS]
#PozaVataminerala
{
margin-top:-2040px;
margin-left:130px;
}
Rezultat
34
Ultima pagin conine un material foarte important, mai exact polistirenul.
Mai jos putei vedea codurile HTML i CSS ale paginii polistiren.html:
HTML
<html>
<head>
<title>MC | Polistiren</title>
</head>
<body>
<div id="Titlu">
</div>
<div id="Menu">
</div>
<div id="Lista">
</div>
</div>
35
</div>
</div>
</div>
</div>
</div>
</div>
Minerală</div></a>
</div>
</div>
</div>
<div id="Info">
<p>INFORMAIE</p>
<img src="imagini/polistiren2.jpg" alt="Polistiren" id="PozaPolistiren">
</div>
</div>
</div>
<div id="Footer">
</div>
</div>
CSS
[CSS]
#PozaPolistiren
{
margin-top:-1030px;
margin-left:130px;
}
Rezultat
36
4. Mod de utilizare
4.1. Pagina Acas
Pagina Acas este i pagina de nceput. Aceasta conine titlul, bara de navigaie i un citat
motivational care este incadrat intr-un dreptunghi alb semi-transparent. Aceast pagin nu
ofer foarte multe informaii, ea fiind gndit pentru a-l familiariza pe navigator cu site-ul
web. Pentru a reveni la pagina Acas, tot ce trebuie sa facem este s apsm pe butonul
,,ACAS sau pe titlu.
4.2. Pagina Materiale
37
Pe aceast pagin, navigatorul este informat n legtur cu ce sunt materialele de
construcie i are posibilitatea de a citi n parte, despre cele zece materiale prezentate ( cuie,
crmid, ciment, igl, lemn, fier beton, nisip, pietri, vat mineral i polistiren )
Dac dorim s ne informm despre un anumit material, l cutm n list i dm click pe
numele lui.
4.3. Paginile despre materiale
Deoarece modul de utilizare este acelai in toate paginile n care sunt prezentate
materialele, atunci voi prezenta doar o singr pagin, de exemplu, igla.
Pentru a ne bucura de intregul coninut al acestei pagini, tot ce trebuie sa facem este s
folosim bara de scroll care se afl n vecintatea textului ( este evideniat de un cerc ).
4.4. Pagina Despre
38
Aceast pagin ofer navigatorului posibilitatea de a vedea cine a realizat acest site, cu ce
scop, de la ce liceu provine i de ce profesor a fost coordonat pe parcursul realizarii
proiectului.
5. Resurse hardware i software
Pentru a rula pagina web, recomand urmatoarele resurse software i hardware :

- Windows 7 sau mai recent;
- 512 MB de memorie RAM;
- 400 MB de memorie pe disc;
- Opera sau alt browser;
- notepad;
6. Concluzii
39
n concluzie, pot spune ca acest proiect m-a ajutat sa-mi aprofundez cunotinele
referitoare la limbajul HTML i CSS. Pe lang acest lucru, informaiile pe care am reuit s le
sintetizez i s le prezint intr-o form ct mai placut i ct mai interesant, imi vor fi de folos
pe parcursul cariei mele i sper c v vor ajuta i pe dumneavoastr. Sper ca aceast lucrare s
m ajute i n viitor, poate la un proiect la facultate.
7. Bibliografie
1. Eugen Stanciu, CSS: Tehnici eseniale, editura Chip

40
2. Mark Pilgrim, HTML 5. Ghidul nceptorului, editura Polirom
3. http://www.mase-plastice.ro/dictionar/p/ps.html
4. https://ro.wikipedia.org/wiki
5. https://media.imopedia.ro/stiri-imobiliare/nisip-constructii-viata-moderna-23284.html
6. https://www.constructii-neamt.ro/materiale-constructii/greutate-otel-beton/
7. http://ciobanu.cich.md/lectii_view.php?id=1
8. http://www.e-learn.ro/tutorial/css/ce-este-css-a/67/1/37.htm
9. http://www.consumredus.ro/posts/ce-este-vata-minerala-bazaltica.html
41

Document A Tie

Î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

Document A Tie

Încărcat de

Drepturi de autor:

Formate disponibile

Colegiul Naional de Informatic

Proiect pentru atestarea competenelor profesionale la

Profesor coordonator, Elev,

Poate v ntrebai de ce am ales aceast tem, materiale de construcii. Ei bine, avnd n

2.1. Introducere internet, site-uri web i HTML

2.2. Paragrafe i atribute ale unui tag

2.3. Elemente care permit formatarea textului

Un font este caracterizat de urmtoarele atribute:

Pentru a scrie un fragment de text cu caractere de o anumit culoare se ncadreaz acest

Grosimea unui font

Folosirea imaginilor sporete atractivitatea i designul paginii, duce la o mai bun

2.6. CSS (Cascading Style Sheets)

Care este diferena dintre HTML i CSS ?

Ce avantaje aduce CSS?

CSS a reprezentat un element revoluionar n lumea web-designului.

Beneficiile concrete includ:

4.1. Pagina Acas

4.2. Pagina Materiale

4.3. Paginile despre materiale

4.4. Pagina Despre

5. Resurse hardware i software

Pentru a rula pagina web, recomand urmatoarele resurse software i hardware :

1. Eugen Stanciu, CSS: Tehnici eseniale, editura Chip

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