Atestat Razvan Parvulescu 1

ATESTAT LA INFORMATICǍ – MOTOCICLETE –
Ce Colegiul Național “Mihai Eminescu” Petroșani
LUCRARE PENTRU ATESTAREA

COMPETENŢELOR PROFESIONALE
Motociclete
Profesor coordonator: Elev:

Gaiță Lukacs Ioana Pârvulescu Răzvan-Marian
2020
1
Cuprins
 1. Motivație
 2. Prezentare site
- 2.1. Acasă
- 2.2. Modele de motociclete
- 2.3. Istorie motociclete
- 2.4. Galerie
- 2.5. Contact
 3. Limbajul HTML
 4. Despre soft-ul utilizat
 5. Resursele de hard și soft
 6. Codul sursă
2
1. Motivație
Site-ul “Motoare” a fost creat în HTML și este compatibil cu ultima versiune
a acestuia, HTML 5.
Codul site-ului a fost scris în aplicația Visual Studio Code iar pentru editarea
imaginilor folosite am utilizat Adobe Photoshop. Limbajul CSS a fost folosit în
combinație cu limbajul HTML pentru a da un aspect cât mai plăcut site-ului
compatibil cu toate browserele. Iar pe lângă CSS și HTML am folosit și JavaScript
pentru a da un feeling mai bun pentru user-experience.
Site-ul prezintă o interfață interactivă care face foarte ușoară navigarea
pentru cel care îl accesează. Rolul site-ului este multiplu, conține o parte
informativă despre diferite motoare, câteva imagini cu referință la ele dar și
istoria acestora. Site-ul se adresează tuturor celor care sunt interesați despre
motoare dar și pentru cei care sunt interesați să achiziționeze unul.
Recomand tuturor perosoanelor care sunt însetate de puțină adrenalină să

își cumpere o motocicletă după împlinirea vârstei de 18 ani deoarece
motocicletele prezintă o serie de particularități:
- datorită masei reduse, raportul putere/greutate este net în favoarea

motocicletelor, ceea ce explică accelerațiile mult mai rapide de care
acestea sunt capabile
- în timpul abordării unui viraj, un motociclist se află în imposibilitatea

practică de a frâna, fără să riște pierderea controlului vehiculului
deoarece aderența cauciucurilor este împărțită între tracțiune și forța
laterală (centripetă)
- schimbarea direcției de mers se face prin contra-virare (orientarea

ghidonului în direcția opusă curbei). La viteze mici (sub 15–20 km/h)
este suficientă orientarea ghidonului în direcția dorită, însă la viteze
mari este necesară obținerea unei înclinări în direcția curbei. Rotirea
ghidonului spre dreapta are că efect înclinarea și schimbarea direcției
de mers spre stânga, și invers. Acest lucru se datorează geometriei
3
sistemului de direcție și parțial forțelor giroscopice ce acționează asupra

roților
- în linie dreaptă distanța de oprire a motocicletei poate fi la fel de bună

că a unui autoturism, însă obținerea unei distanțe scurte de frânare
necesită mai multă îndemânare în cazul motocicletei sau existența unui
sistem automat. În alte situații decât în linie dreaptă motocicletă este
net dezavantajată.
În concluzie, consider că acest proiect reprezintă un bun mijloc de

informare prin care se poate trimite și un feedback prin intermediul tab-ului
Contact.
4
2. Prezentarea aplicației
1.1. INDEX.HTML
Pagina „index.html” reprezintă pagina cu care se deschide site-ul, dar
poate fi accesată în orice moment prin apăsarea motocicletei verzi, motocicleta
care este prezentă pe orice pagina. Această pagină conține informații pe scurt
despre motociclete, cum ar fi de ce este practică o motocicletă, ce reprezintă
libertatea pe o motocicletă. De asemenea, pagina conține un slide cu poze ce au
rolul de a înfrumuseța pagina.
Meniul principal este format din butoane realizate în CSS, iar butonul
„Modele” la prezența mouse-ului deasupra lui afișează un meniu de tip
„dropdown menu” care are ca rol simplificarea navigării pe site a vizitatorului.
5
1.2. MODELE.HTML

Submeniul „Modele” conține pagini cu informații despre unele dintre cele mai
importante motociclete. Paginile conțin informații altercate cu imagini, ce au rolul
de a face informația mai ușor de reținut. Acest meniu mai are încă 3 submeniuri
cu cele 3 tipuri de motoare. În acele pagini HTML se pot găsii diferite informații
despre modele.
6
1.3. ISTORIE.HTML
Pagina „Istorie motociclete” ofera informații despre istoria motocicletelor pentru

cei cu adevărat pasionați. Aspectul paginii este placut, imaginile fiind așezate într-
un mod interesant.
7
1.4. GALERIE.HTML
Pagina „Galerie” are același stil ca și restul paginilor și conține o galerie animată,
cu butoane și numerotare imagini. Imaginile sunt găsite pe google.com. În această
galerie puteți găsii diferite modele de motoare de la cele mai vechi până la cele
mai noi. Tot în această galerie se poate găsii și motocicleta mea.
8
1.5. CONTACT.HTML
Pagina „Contact” este perfectă pentru adevărații pasionați de motoare, pentru cei
care vor să afle alte informații în plus față de ce se prezintă in site.
9
2. Limbajul HTML
HTML (Hypertext Markup Language) este un limbaj creat în scopul de a

descrie, în mod text, formatul paginilor Web; fișierele create în acest limbaj vor fi
interpretate de navigatoare, care vor afișa paginile în forma dorită (cu texte
formatate, liste, tabele, formule, imagini, hiperlegături, obiecte multimedia etc.).
HTML a apărut ca o aplicație ISO standard (aparține standardului SGML - Standard
Generalized Markup Language, specializat pentru hipertext și adaptat la Web).
Așa cum se poate deduce din numele limbajului, HTML descrie caracteristicile
de format ale elementelor incluse prin procedee de marcare. Acestea pot fi
asemănate intuitiv cu marcajele folosite în tipografie pentru a indica scrierea unui
text cu un anumit tip de caractere. Fiecare element va fi introdus între două
marcaje ("tags", în limba engleză) - de început și sfârșit - (uzual) de forma
<marcaj>…</marcaj> . Caracterele speciale de delimitare a marcajelor "<", ">"
permit deosebirea acestora de textul propriu-zis. De exemplu, pentru textele
aldine (îngroșate), marcajul de început este<B> iar de sfârsit -</B> .
În informatică, limbajele de marcare sunt foarte convenabile fiindcă comenzile

lor pot fi interpretate simplu. LaTeX-ul, de exemplu, este tot un limbaj de
marcare; prin interpretarea fișierelor .tex descrise în acest limbaj se va genera
formatul dorit al documentelor pe diverse tipuri de sisteme de calcul (în cazul,
LaTeX-ului, se obține uzual format PostScript sau PDF). În schimb, procesoarele de
documente uzuale nu au un limbaj de marcare standardizat, care să ofere
compatibilitate între diverse tipuri de calculatoare și sisteme de operare. Astfel,
se poate spune că avantajele aplicării limbajelor de marcare constau în
portabilitate și flexibilitate: fișierele create cu ajutorul lor pot fi transferate pe
orice tip de sistem, unde vor fi interpretate cu ajutorul unor programe specifice.
De fapt, procesoarele de texte uzuale folosesc adesea procedee de marcare

pentru formatări (de exemplu, formatările de tip caracter din Word); în acest caz
însã, caracterele de control introduse sunt ascunse iar rezultatul editãrii este
direct vizibil ("What You See Is What You Get"). În schimb, în limbajele de marcare
- inclusiv HTML - marcajele sunt introduse în text, astfel încât acestea sunt
exclusiv succesiuni de caractere (litere, cifre, caractere speciale) - fișiere de tip
text.
10
Referitor la legãtura dintre procesoarele de documente uzuale și limbajul

HTML, mai trebuie menționat faptul cã ultimele versiuni ale editoarelor de
documente oferã facilitãți de salvare în format HTML - de exemplu, Word,
începând cu versiunea Microsoft Office '97. Mai mult, toate produsele incluse în
această gamã dedicatã biroticii (MS Office) oferã compatibilitate cu formatul
HTML.
Procesele de standardizare și de includere a comenzilor de marcare în fișierele
HTML permit navigatoarelor sã citeascã și sã formateze paginile Web, lucru foarte
important în condițiile în care ele conțin nu numai texte alb-negru, ci și culori,
imagini, hiperlegãturi, diverse obiecte. Practic, marcajele HTML asigurã controlul
asupra modului de afișare a obiectelor corespunzãtoare în cadrul programelor de
vizualizare a documentelor HTML - navigatoarele.
Limbajul HTML a evoluat în versiuni succesive, odatã cu evoluția protocolului
HTTP și a programelor de navigare. Astfel, HTML 1.0 era compatibil cu Mosaic,
primul program de navigare, dar dupã apariția unor navigatoare noi, a fost
necesarã introducerea unui standard oficial Internet pentru construirea paginilor
(HTML 2.0) și extinderea sa cu noi facilitãți: formule matematice, tabele, moduri
avansate de descriere a organizãrii paginilor (începând cu HTML 3.0).
Standardizarea oficialã a limbajului HTML a fost realizatã de consorțiul WWW
și dezvoltatã de diverși producãtori de soft (unii dintre aceștia urmãresc chiar
promovarea navigatoarelor proprii prin introducerea unor particularități în
formatele oficiale).
Paginile HTML se pot crea cu orice editor de texte de cãtre utilizatorii care
cunosc limbajul HTML sau, mai simplu, se pot utiliza editoare speciale, în care
obiectele se introduc interactiv iar codul HTML se genereazã automat. Având în
vedere cã și în acest caz este utilã cunoașterea marcajelor generate pentru
corectarea eventualelor erori (mai ales în cazul link-urilor), vom prezenta în
continuare entitãțile care se pot introduce în paginile HTML și marcajele
caracteristice acestora:
11
Elementele limbajului HTML
Toate obiectele HTML sunt introduse între marcaje care le definesc;

majoritatea acestora sunt de forma <tip_obiect> (la început) si </tip_obiect> (la
sfârsit). Tipul standard al obiectului poate fi specificat cu majuscule sau
minuscule; totuși, se recomandă utilizarea majusculelor fiindcă astfel marcajele
ies în evidență.
Majoritatea navigatoarelor permit vizualizarea paginii curente în formatul

sursă HTML (forma pe care o interpreteazã pentru afișarea paginii). La
interpretare, programele de navigare ignorã spațiile si <Enter>-urile, aplicând
formatarea specificatã.
Existã însã și marcaje cu parametri; acestea au forma <tip_obiect

param1=valoare1 param2=valoare2 …>. De exemplu, obiectele de tip imagine
sunt introduse cu delimitatorul <IMG>, care are diverși parametri. Pentru
definirea hiperlegãturilor se folosește marcajul <A>, care are de asemenea
parametri proprii.
Codurile de marcare HTML pot fi clasificate în următoarele categorii:
1. marcaje de bază - cele care delimiteazã pagina / documentul HTML, titlul

acesteia si corpul paginii;
2. marcaje pentru structurarea documentului - care permit introducerea de
subtitluri, paragrafe, linii de delimitare;
3. marcaje pentru formatarea textului si crearea listelor;
4. marcaje pentru crearea hiperlegăturilor (hyperlinks);
5. marcaje pentru introducerea de obiecte - tabele, formule, imagini sau
obiecte multimedia preluate din fișiere, formulare.
Vom descrie în paragrafele urmãtoare, elementele caracteristice fiecãreia din

aceste categorii.
Pentru structurarea si organizarea informațiilor din paginile web se pot utiliza

frame-uri (marcajul <FRAME>), prin care la un moment dat se afișeazã mai multe
ferestre conținând fiecare câte o pagină. Introducerea si gestiunea frame-urilor se
realizează foarte convenabil folosind editoarele HTML.
12
Mai menționãm faptul cã în ultimele versiuni ale limbajului HTML si ale

browser-elor s-a introdus posibilitatea integrãrii, respectiv lansãrii în execuție prin
navigator, a unor aplicații. Acestea sunt scrise în limbajul Java, un limbaj cu
caracteristici distribuite și obiectuale, adaptat programãrii în Web; ele se numesc
"applet"-uri și se introduc în sursele HTML cu marcajul <APP> sau <APPLET> .
Ultimele versiuni de editoare HTML permit introducerea interactivã a applet-
urilor Java.
Marcaje de bazã
O paginã Web este delimitatã de marcajele <HTML> și </HTML> care indicã

începutul și finalul documentului și conține:
 zonã de antet cuprinsã între marcajele: <HEAD> … </HEAD> și

 un corp delimitat de marcajele: <BODY> … </BODY>.
Zona de antet este utilizatã de cãtre programele de cãutare pe site-urile web și

permite specificarea titlului paginii care va fi afișat de navigator (nu apare propriu-
zis în conținutul paginii).
titlul, introdus în antet, este cuprins între marcajele <TITLE> … </TITLE>.
Astfel, o formã extrem de simplã a unui document HTML ar putea fi cea din
urmãtorul exemplu:
<HTML>
<HEAD> <TITLE>Titlul documentului </TITLE>
</HEAD>
<BODY>Document HTML foarte simplu</BODY>
</HTML>
Marcaje pentru structurarea documentului
Programele de navigare asigurã afișarea diferențiatã a unor titluri și

subtitluri pentru secțiunile paginii, dupã criteriile implementate în acest scop la
conceperea sa (litere mai mari sau mai mici, diverse culori, litere aldine sau
simple, unul sau mai multe rânduri libere dupã titlu etc.).
13
Titlurile de capitole sau subtitlurile sunt definite de marcajele <Hn>, unde n

este o cifrã între 1 si 6 care specificã nivelul titlului (1 este titlul principal iar 6
corespunde celui mai scãzut nivel). Astfel:
<H1> … </H1> indicã un subtitlu de nivelul 1
…
<H6> … </H6> indicã un subtitlu de nivelul 6.
Pentru separarea zonelor paginii se pot folosi treceri la:
 linie nouã - cu marcajul <BR>, eventual cu desenarea unei linii orizontale -

marcajul <HR>;
 paragraf nou - cu marcajul <P> (se insereazã o linie nouã și eventual se face
o indentare). Marcajul </P> desemneazã sfârșitul de paragraf dar este mai
rar folosit (se poate omite).
Marcaje pentru formatarea textului și crearea listelor
Formatãrile uzuale de texte permit scrierea cu caractere:
 aldine - în acest scop pentru acel text se aplicã marcajele <B>… </B>;
 cursive (italice) - pentru acel text se aplicã marcajele <I> … </I>;
 subliniate - textul se introduce între marcajele <U> …</U>.
Unele programe mai vechi de navigare nu permiteau reprezentarea acestor

formate; în acest caz, se aplicau alte moduri de evidențiere a textelor respective
(culori, video invers).
Alte tipuri de formatãri de caractere care se pot defini se referã la:
dimensiunea fonturilor și culori - se va utiliza marcajul cu parametri:
<FONT SIZE=x COLOR=y> … </FONT> , care indicã utilizarea unui font de

dimensiune x si culoare y.
 x poate fi un numãr între 1 și 12, indicând mãrimea exactã, sau un numãr cu

semn, indicând mãrimea relativã la dimensiunea curentã.
14
 y poate fi numele unei culori standard, specificatã în limba englezã și între

ghilimele, sau, eventual, descompunerea unei culori în componentele RGB,
sub formã hexazecimalã (câte douã cifre hexa pentru fiecare componentã).
Suplimentar, se pot crea pagini de stiluri, în care sã se defineascã stiluri logice,

modificabile ulterior; în acest scop, se folosesc marcajele <DN> - definiție, <EM> -
punere în evidențã, <STRONG> - accentuare puternicã.
Pentru tastaturile care suportã numai codurile ASCII, caracterele speciale se pot
crea folosind formatul &nume_caracter - de exemplu, è pentru e. Având
în vedere semnificația specială a caracterelor <, > și &, apariția lor în documente
trebuie specificatã sub forma caracterelor speciale: < , > , respectiv & .
Prezentãm în continuare un exemplu de document HTML, precum și modul

în care acesta este afișat de Netscape Navigator.
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">

<html>
<head>
<title>Pagină simplă</title>
</head>
<body>
<p>Acesta este un exemplu simplu de o
pagină HTML. Ea arată cum
pot apărea caractere <strong>bold</strong>, <em>italic</em>,
<font size="5">mai mari</font>,
<font size="1">mai mici</font>,
respectiv insera
o mică imagine
<img src="Handshake8114.gif"
width="20" height="14">.
</p>
</body>
</html>
15
În figura, se observã cã textul propriu-zis al documentului poate fi delimitat fațã

de codurile de marcare, iar formatarea textului din documentul HTML nu
corespunde cu cea afișatã de programul de vizualizare:
 textul este extins pentru a ocupa întregul ecran și este afișat cu un corp de
literã diferit fațã de sursa HTML;
 terminatorii de linie nu sunt respectați;
 spațiile albe suplimentare din documentul sursã sunt ignorate.
Introducerea obiectelor de tip imagine (marcajul <IMG>) este detaliatã mai jos.
Limbajul HTML permite definirea mai multor tipuri de liste și imbricarea lor
(includerea unor liste în altele), caz în care trebuie verificatã cu atenție
corespondența dintre marcajele de început și sfârșit pentru fiecare listã. Formatarea
listelor la afișarea paginii (introducerea bulinelor, numerotãrii etc.) se face de cãtre
programul de navigare.
Elementele listelor se introduc între marcajele <LI> … </LI> ("list item").

Modul de apariție al elementelor depinde de tipul de listã în care sunt incluse (cu
buline, numerotate etc.), determinat de marcajul specific.
Astfel, listele pot fi:
 neordonate (cu buline) - delimitate de marcajele <UL> … </UL> ("unordered

list"); elementele lor se afișeazã cu buline;
 ordonate (numerotate) - delimitate de marcajele <OL> … </OL> ("ordered
list"); elementele lor se vor numerota;
 de tip meniu - delimitate de marcajele <MENU> … </MENU>; elementele
acestor liste apar într-o reprezentare compactã pe ecran (multicoloanã);
16
 glosare (liste de definiții) delimitate de marcajele <DL> … </DL> ("definition

list"); elementele acestora au câte douã componente, introduse respectiv
cu marcajele <DT> (pentru nume) si <DD> (pentru semnificația asociatã);
 tabele scurte - create cu marcajul <DIR>.
Listele utilizate cel mai frecvent sunt cele ordonate și neordonate. Prezentãm
în continuare un exemplu simplu de paginã HTML care conține aceste tipuri de
liste.
<html>
<head>
<title>Pagina cu liste</title>
</head>
<body>
<p>Această pagină exemplifică crearea listelor</p>
<p>Cele mai uzual folosite tipuri de liste sunt:
<ul>
<li>neordonate</li>
<li>ordonate</li>
</ul>
<p>O listă ordonată este o lista numerotată:
<ol>
<li>primul element;</li>
<li>al doilea element...</li>
</ol>
</body>
</html>
17
Exemple de liste într-o paginã HTML
Marcaje pentru crearea hiperlegãturilor
Hiperlegãturile ("hyperlinks") se introduc cu marcajele <A> … </A> ("anchor")

aplicate asupra unui text sau a unei imagini. Ele se pot crea cãtre:
 adrese URL - astfel se asigurã accesul în cadrul procesului de navigare (prin

protocoale specifice), nu numai la paginile web, ci și la diverse servicii
Internet;
 fișiere / resurse locale adicã aflate pe același calculator cu pagină creatã -

link-uri locale ; acestea ar putea fi accesate și printr-un URL cu protocolul
"file" dar pentru mai multã simplitate, este suficientã specificarea numelui
și cãii fișierului local;
 o zonã din documentul HTML curent - link-uri interne.
În fiecare din aceste cazuri, un click pe textul sau imaginea respectivã va

determina activarea legãturii și afișarea prin intermediul navigatorului a resursei
asociate link-ului.
Resursa asociatã unei legãturi este descrisã prin parametrii marcajului <A>:
 HREF - permite asocierea unei adresei URL, crearea unei legãturi locale prin
specificarea numelui și cãii fișierului corespunzãtor sau a unei legãturi
18
interne documentului; este cel mai important parametru pentru

construirea de hiperlegãturi;
 NAME - numele hiperlegãturii sau al zonei dintr-o paginã cãtre care se face
referirea, în cazul unui link intern;
 METHODS - metodele de acces (acest parametru se utilizeazã doar în

prelucrãri speciale)
Astfel, un link local sau cãtre o adresã URL se poate defini pe un text cu: <A
HREF="resursa"> text </A>.
O legãturã internã cãtre o zonã a documentului curent se indicã folosind marcajul

<A NAME="nume-zona">.
Marcaje pentru introducerea de obiecte
Prima versiune de HTML (1.0) nu permitea descrierea tabelelor sau a

informațiilor formatate. Asemenea obiecte trebuiau create formatat și introduse
ca obiect deja formatat, cu marcajele <PRE>, </PRE>. Aceste marcaje indicau
navigatorului cã textul inclus trebuia afișat caracter cu caracter, fãrã vreo
intervenție de formatare. În versiunile ulterioare ale limbajului HTML, s-au
introdus însã facilitãți elegante de formatare, de includere a tabelelor și a altor
obiecte.
În HTML 3.0 s-au introdus obiectele de tip tabel, formate din linii orizontale
și coloane verticale la a căror intersecție se formeazã celulele. Acestea pot conține
intrãri diverse: texte, figuri sau chiar alte tabele. Se pot realiza reuniri de celule
(de exemplu, pentru titluri mai lungi). Atributele de formatare a tabelului
(aliniere, stilul chenarului și marginilor etc.) se definesc în proiectarea paginii dar
modul lor de afișare va depinde si de programul de navigare.
Tabelele se introduc între marcajele <TABLE> … </TABLE>, cãrora li se pot

atașa (opțional) parametrii BORDER si RULES. Un titlu pentru tabel se poate
introduce cu marcajul <CAPTION>. Fiecare coloanã se definește cu marcajul
<COL>, având ca parametru ALIGN - modul de aliniere a informațiilor din acea
coloanã (LEFT, CENTER, RIGHT).
Antetul tabelului se poate indica între marcajele <TH>…</TH> ("Table

Header"), pentru trecerea la o linie nouã se utilizeazã marcajul <TR> ("Table
19
Row") iar celulele individuale se marcheazã cu <TD> ("Table Data"), eventual cu

parametru de aliniere. Se mai pot specifica alinieri orizontale sau verticale ale
celulelor, grupãri de celule etc. Aceste marcaje permit navigatorului sã afișeze
diferențiat informațiile din tabel.
Prezentãm în continuare un exemplu simplu de tabel.
<HTML>
<HEAD>
<TITLE>Pagină cu tabel</TITLE>
</HEAD>
<BODY>
<H1>Aceasta pagina da un exemplu de folosire a unui tabel</H1>
<H3>Vanzari anuale:</H3>
<TABLE> <TH>1996</TH><TH>1997</TH><TH>1998</TH><TR>
<TD>125 milioane lei</TD><TD>160 milioane lei</TD><TD>231 milioane
lei</TD>
</TABLE>
</BODY>
</HTML>
Exemplu de tabel într-o paginã HTML
Mãrimea liniilor și a coloanelor poate fi controlatã suplimentar prin marcajele

<ROWSPAN=x> și respectiv <COLSPAN=y>, fiecare indicând mãrimea în "celule
normale". În plus, se poate indica trasarea unei margini pentru tabel, prin
marcajul <TABLE BORDER>.
20
Includerea imaginilor se face folosind marcajul <IMG>, care are parametri

specifici:
 SRC indicã (dupã semnul '=') URL-ul imaginii, respectiv calea fișierului dacã
acesta este local; uzual, se acceptã fișiere în format GIF sau JPEG;
 ALLIGN controleazã alinierea imaginii fațã de limita inferioarã a textului
(TOP, MIDDLE sau BOTTOM); este un parametru optional;
 ALT furnizeazã textul afișat în locul imaginii dacã utilizatorul dezactiveazã
opțiunea de afișare a imaginilor (parametru opțional);
 ISMAP este un indicator opțional pentru imaginile care sunt hãrți
selectabile.
Astfel, introducerea simplã a unei imagini se poate realiza cu <IMG

SRC="specificare-imagine">. Un exemplu de imagine inseratã într-o paginã HTML
este prezentat în figura de mai sus.Remarcãm faptul cã, utilizând parametri
specifici, marcajul <IMG> se poate folosi și pentru inserarea unor fișiere
multimedia, cum ar fi secvențele video. Având în vedere cã aceste operații se
realizeazã mai ușor folosind un editor HTML.
Formulare. HTML 1.0 permitea uzual doar transferarea informațiilor de la

furnizori cãtre utilizatori, transferul în sens invers fiind foarte dificil. Odatã cu
dezvoltarea Web-ului și mai ales cu utilizarea sa în scopuri comerciale și în diverse
alte domenii, s-a fãcut simțitã necesitatea comunicãrii în dublu sens pentru
preluãri de comenzi, completarea unor fișe de înregistrare, distribuirea de
produse soft, administrarea de chestionar, transmiterea unor informații personale
etc. Acestea au fost motivațiile introducerii formularelor în HTML 2.0.
Formularele conțin obiecte de control care permit utilizatorilor introducerea

de informații prin completarea unor câmpuri specifice (casete de text), prin
selectarea sau activarea unor opțiuni (comutatoare, grupuri sau liste de opțiuni).
Aceste informații vor fi transmise, dupã activarea butonului SUBMIT (echivalentã
cu tastarea lui <Enter>) proprietarului paginii, introduse în baze de date dedicate
și prelucrate cu aplicații specifice.
Formularele se introduc prin marcajelele <FORM> ... </FORM> , cãrora li se

atașeazã parametri specifici care definesc metodele de transmitere și tratare a
datelor. Un formular poate conține obiecte de control de diverse tipuri, definite
cu marcajul <INPUT> și o varietate de parametri care stabilesc, pentru obiectul
21
definit, tipul, dimensiunea și modul lui de afișare. Astfel, se pot crea câmpuri de
text (care vor fi completate cu texte de cãtre utilizator), liste de alternative,
comutatoare, grupuri de optiuni, butoane, hãrți active etc.
Datele preluate prin intermediul formularelor se trateazã conform

standardului CGI (Common Gateway Interface) prin intermediul unor programe
sau script-uri CGI. În plus, un asemenea script poate interacționa cu baza de date
creatã pentru realizarea unor acțiuni specifice (de exemplu, hãrțile active folosesc
script-uri CGI pentru a executa diferite acțiuni, în funcție de zona selectatã de
utilizator).
Script-urile CGI pot executa și alte operații decât prelucrarea formularelor,

producând ieșiri convenabile. Dacã o hiperlegãturã indicã spre un script CGI, la
selectarea legãturii se va executa script-ul (cu anumite variabile de context care
rețin diverse informații de stare). Script-ul va produce un fișier, de exemplu o
paginã web, care va fi interpretatã de navigator. Acest mecanism permite script-
urilor sã genereze, aproape instantaneu, pagini web care sã satisfacã diverse
cerințe ale utilizatorilor, furnizând anumite rãspunsuri așteptate în urma unor
acțiuni.
Crearea interactivã a formularelor, folosind produse soft specializate în

realizarea de pagini Web este relativ accesibilã pentru utilizatorii familiarizați cu
caracteristicile obiectelor de control specifice aplicațiilor soft dar tratarea
ulterioarã a informațiilor transmise necesitã cunoștințe de specialitate.
Numele, simbolurile și procedura de introducere interactivã dintr-un editor

HTML (de exemplu, Microsoft Front Page) a obiectelor de control sunt extrem de
apropiate de cele asociate obiectelor similare din formularele sau rapoartele
Microsoft Access. Pentru utilizatorii mai puțin avizați însã, crearea, chiar
interactivã, a formularelor este mai dificilã.
22
3. Despre soft-ul utilizat

Pentru realizarea acestui atestat am folosit programul Visual Studio Code. Un
program folositor deoarece oferă o temă neagră, accesarea unei console speciale,
folosirea unor instrumente de căutare, îmbinarea a mai multor pagini web pe un
ecran.
Avantajele acestui program:
IntelliSense.
Treceți dincolo de evidențierea sintaxelor și
completarea automată cu IntelliSense, care
oferă completări inteligente bazate pe tipuri
variabile, definiții de funcții și module
importate.
23
Tipărirea debugging-ului este un lucru din trecut.

Codul de depanare direct de la editor. Lansați sau atașați-vă la aplicațiile dvs. de rulare și
debutați cu puncte de pauză, stive de apeluri și o consolă interactivă.
Comenzi Git încorporate.

Lucrul cu Git și alți furnizori SCM nu a fost
niciodată mai ușor. Examinați diferențele,
etapizați fișierele și efectuați angajamente
direct de la editor. Apăsați și trageți de la
orice serviciu SCM găzduit.
Desfășurați-vă cu
încredere și ușurință.
Cu Microsoft Azure puteți să implementați
și să vă găzduiți site-urile React, Angular,
Vue, Node, Python (și multe altele!), Să
stocați și să interogați date relaționale și
bazate pe documente și la scară cu
computere fără server, toate cu ușurință,
toate din VS Code.
24
Meniul File
Acest meniu este folosit pentru a face fișiere noi dar și pentru a deschide fișiere
deja existente. Pe lângă acest lucru mai are și o opțiune de Auto-Save pentru
cazurile în care se întâmplă ceva cu calculatorul. De asemenea se pot face și
fișiere mai complexe cu ajutorul Workspace-ului.
25
Meniul Edit
Acest meniu este folosit ca și un înlocuitor pentru tastele rapide dar și pentru a
căuta anumite cuvinte cheie în fișier. Cu ajutorul acestui meniu putem adăuga
anumite comentarii fișierului nostru fără a strica structura codului.
26
Meniul View
Acest meniu este unul dintre cele mai folositoare pentru că acesta poate deschide
terminalul cu care putem intra în comenzile pentru GitHub. Dar si pentru a
modifica unele aparențe ale editorului.
27
Meniul Go
Un meniu foarte folositor deoarece putem găsii cu ușurință orice tip de caracter
de care avem nevoie cum ar fi: declarări, simboluri, referințe, implementări.
28
Meniul Debug
Cu ajutorul acestui meniu putem să ne corectăm mai ușor programul dar și să
adăugăm anumite configurații.
29
Meniul Terminal
Unul dintre cele mai importante meniuri deoarece prin acesta putem să accesăm
consola pentru GitHub.
Ce este GitHub?
Git sau GitHub este din ce în ce mai utilizat și cerut de toți angajatorii, fiind un
software care te ajută la versionarea codului tău. De exemplu, dacă vrei să
construiești pe baza a ceea ce ai lucrat până acum sau să aduci și alte persoane
30
care să contribuie la munca ta, nu poți tine codul pe calculatorul tău pentru că va
deveni dificil ca și alții să acceseze și să lucreze cu ceea ce tu ai făcut până la
momentul respectiv.
4. Resursele de hard și soft
Site-ul a fost realizat cu ajutorul programului Visual Studio Code dar și prin
Photoshop. Cerinţele de sistem ale programului nu sunt exagerate.
Resurse minime :
1) Hardware :
- Procesor (CPU) : 500 MHz +
- Memorie (RAM): 64 MB
- Spaţiu liber pe hard-disk : 30 MB
- Monitor :1024*768
- Un browser oarecare: Internet explorer(recomandat),Mozilla
2) Software :
- Sistem de operare : Windows 98/XP
Resurse recomandate:
1) Hardware :
- Procesor (CPU) : 1000 MHz +
- Memorie (RAM): 128 MB
31
- Spaţiu liber pe hard-disk : 30 MB

- Monitor : VGA 32-bit color (1024x768)
- Un browser oarecare: Internet explorer(recomandat) ,Mozilla
2) Software :
- Sistem de operare : Windows XP
5. Codul sursă
Site HTML – Explicație

INDEX.HTML
Meniul de navigație a fost creat cu ajutorul unor div-uri multiple, acele div-uri
având diferite funcții CSS incorporate. Cum ar fi: navbar navbar-default navbar-
fixed-top, container, navbar-header. De asemenea, butoanele au primit funcția de
redirect cu ajutorul comenzii <a href=””>, aceste butoane au fost incorporate în
meniu cu ajutorul listelor <li> si <ul>(comanda “ul” având diferite funcții CSS). Pe
lângă fișierele CSS, meniul mai conține și câteva modificări interne direct din
fișierul HTML fără a mai fi nevoie de alte funcții CSS. Acest meniu are și un buton
principal pentru întoarcerea înapoi la pagina de start, buton ilustrat cu ajutorul
unei imagini.
32
Următoarea parte din pagin principală este redarea imaginilor. Acesta redare
se numește redare de tip carusel și este făcută tot cu ajutorul div-urilor multiple.
Acele div-uri având la rândul lor alte funcții CSS. Butoanele acestei redări fiind
adăugate cu ajutorul listelor iar imaginile cu ajutorul tag-ului <img>.
Text-ul împreuna cu imaginile sunt create cu ajutorul unei funcții CSS ce

permite adăugarea lor pe acceași linie. Fără acestă funcție modul în care au fost
amplasate cele 2 obiecte este destul de dificil.
Iar în final se poate găsii un footer, acel footer fiind făcut doar pentru un
aspect mai plăcut al paginii.
33
MODELE.HTML
Cel mai important lucru din aceste 3 pagini este tabelul cu informații despre
motociclete. Acest tabel fiind creat cu ajutorul funcțiilor <table>, <tbody>, <tr>,
<th>, <abbr>, <td>. Unele din aceste tag-uri fiind puțin modificate față de starea
default pentru un aspect cât mai placut al paginii.
GALERIE.HTML
Imaginile din această pagină au fost puse pe acceași linie cu ajutorul unor
funcții CSS. Fără aceste funcții adăugarea lor era aprope de imposibil. Peste aceste
poze au fost aplicate anul de fabricație și numele motocicletelor aferente cu
ajutorul programului Photoshop CC 2019.
Toate aceste imagini au fost grupate cu ajutorul unui div general dar și cu
ajutorul unui tabel, tabelul a fost folosit pentru centrarea acestora.
34
CONTACT.HTML
Tot meniul a fost configurat cu ajutorul <div>-urilor, fiecare div având o
funcție CSS incorporată. De asemenea s-au
mai folosit si funcțiile <button> pentru
butoane dar si <li> respectiv <ul>. Text-ul
semi-transparent care ilustrează ce ar trebui
scris în câmpurile respective este adăugat cu
ajutorul unor acțiuni de tip <input>.
Fișirele CSS – Explicație
body {
background-image:url('../img/bg2.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
Funcția “body” este folosită pentru a seta un background general pentru toate
paginile site-ului.
p {
margin: 0 0 20px;
}
Funcția “p” este folosită pentru a seta un standard al paragrafelor.
.jumbotron {
35
background-color: transparent;
padding: 70px 0 0 0;
}
.footer {
margin-top: 0px;
padding: 0px 0;
}
Functia “jumpotron” este pentru a seta transparența a footer-ului.

video {
display: inline-block;
}
audio:not([controls]) {
display: none;
height: 0;
}
Cele doua funcții folosite pentru video.

h1 {
margin: 0.67em 0;
font-size: 2em;
}
Un stil mai aparte pentru H1.
button,
input {
line-height: normal;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
36
cursor: pointer;
-webkit-appearance: button;
}
button[disabled],
html input[disabled] {
cursor: default;
}
Funcții pentru butoane. Cu ajutorul acestora butoanele noastre pot funcționa mai
fluid.
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
a[href^="javascript:"]:after,
a[href^="#"]:after { content: ""; }
Apelare la JavaScript în interiorul unei funcții din CSS.
.table th {
background-color: #fff !important;
}
Proprietăți table.
body {
font-family: 'Belgrano';
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}
Proprietăți body.
.img-thumbnail {
display: inline-block;
height: auto;
max-width: 100%;
padding: 4px;
line-height: 1.428571429;
background-color: #ffffff;
37
border: 1px solid #dddddd;
border-radius: 4px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
Proprietăți/animație imagine thumbnail.
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
font-family: 'Belgrano';
font-weight: 500;
line-height: 1.1;
color: inherit;}
Setare a acelorași caracteristici pentru toate tag-urile H.
.page-header {
padding-bottom: 9px;
margin: 40px 0 20px;
border-bottom: 1px solid #eeeeee;
}
Proprietăți header.
.col-xs-offset-1 {
margin-left: 8.333333333333332%;
}
Setare de coeficienți XS în offset.
.btn:hover,
.btn:focus {
color: #333333;
text-decoration: none;
}
Setare a unei alte înfățișări ale butonului atunci cand este apăsat.
38
.glyphicon-floppy-saved:before {
content: "\e173";
}
.glyphicon-floppy-remove:before {
content: "\e174";
}
.glyphicon-floppy-save:before {
content: "\e175";
}
.glyphicon-floppy-open:before {
content: "\e176";
}
Adăugarea a mai multor iconițe în cazul în care este nevoie. Acestea se pot apela
într-un div special în fișierul HTML.
Fișierele HTML – Explicație


<link href="css/bootstrap.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Belgrano|
Courgette&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href="css/bootshape.css" rel="stylesheet">
Inițializarea fișierelor CSS pentru o citire mai ușoară.

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
</button>
39
<a class="navbar-brand" href="index.html"> <img src="logo-
principal.png" class="w3-round-small" style="width: 50px;height: 50px; padding-
top: -30px;"></a>
</div>
<nav role="navigation" class="collapse navbar-collapse navbar-right">
<ul class="navbar-nav nav">
<li class="dropdown">
<a data-toggle="dropdown" href="" class="dropdown-toggle">Modele<b c
lass="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="oras1.html">Yamaha</a></li>
<li><a href="oras2.html">Harley</a></li>
<li><a href="oras3.html">Kawasaki</a></li>
</ul>
</li>
<li><a href="istorie.html">Istorie motociclete</a></li>
<li><a href="galerie.html">Galerie</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</div>
Meniul pentru navigare.

<div class="jumbotron">
<div class="container">
<div class="col-xs-12">
<div id="carousel-example-generic" class="carousel slide" data-
ride="carousel">

<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" clas
s="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
</ol>

<div class="carousel-inner">
<div class="item active">
<img src="img/moto1carusel.jpg" alt="" style="width: 100%; height:
600px;">
<div class="carousel-caption">
40
</div>
</div>
<div class="item">
600px;">
</div>
</div>
<div class="item">
600px;">
</div>
</div>
<div class="item">
600px;">
</div>
</div>
<div class="item">
600px;">
</div>
</div>
</div>
Galeria de tip carusel.

<a class="left carousel-control" href="#carousel-example-generic" data
-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" dat
a-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
Cât și controalele pentru acesta. Controale făcute cu ajutorul JavaScript-ului.
41

<hr>
<div class="footer text-center" style="border-top-color: black">
<p>© Pârvulescu Răzvan</p>
</div>
Footer-ul. Găsit la sfarșitul fiecărei pagini.

<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootshape.js"></script>
jQuery – necesar pentru fișierele .js (JavaScript) cât și celelalte fișiere JavaScript.
INDEX.HTML

<div class="container" style="margin-bottom: 50px;padding-left: 80px;">
<div class="">

<div style="float: left;width: 60%">
<h3 class="">Pe sosele!</h3>
<p>Libertatea este adesea menţionată ca o atracţie, dar ce reprezintă li
bertatea? Comparat cu şofatul, mersul pe motocicletă oferă libertatea ce este co
nstrânsă de fizica celor 4 roţi ale maşinilor.</p>
<p>Ce putem spune despre cât de practică este o motocicletă? Cineva spun
ea că de-a lungul anilor a cărat „un curcan, scânduri, o grămadă de trandafiri,
nişte cârje şi un dulap”. Dar de câte ori chiar este utilizată capacitatea de în
cărcare a unui vehicul cu 4 roţi? Nu de multe ori, într-un asemenea vehicul se g
ăseşte o singură persoană, care strangulează circulaţia, risipeşte combustibil,
are timpi de reacţie mari şi este o cutie de oţel pe trei sferturi goală.
În cele din urmă, putem spune că motociclismul nu este preferat de mam
ele şi taţii de pretutindeni, datorită pericolului pe care îl presupune. Pe moto
cicletă eşti mult mai vulnerabil şi ar fi bine să accepţi acest lucru şi să cond
uci în consecinţă. În permanenţă trebuie să te consideri ca şi cum ai fi invizib
il în trafic, înconjurat de un ocean de maşini. Din acest motiv, mereu trebuie s
42
ă porţi echipament de protecţie adecvat temperaturii exterioare şi distanţei tra
seului.</p></div>
<div style="float: right;width: 40%;"><img src="img/kawasaki.png" style=
"max-height: 350px;margin-left: 100px; margin-top: -120px;"></div>
<div style="float: right;width: 40%;"><img src="img/harley.png" style="m
ax-height: 200px;margin-left: 150px; margin-top: -120px;"></div>
<div style="float: right;width: 40%;"><img src="img/yamaha.png" style="m
ax-height: 200px; width: 200px;margin-left: 170px; margin-top: 0px;"></div>
</div>

</div>
ISTORIE.HTML
<div class="container" style="margin-bottom: 50px;padding-left: 80px;margin-
top: 80px;">
<div style="width: 100%;height: 350px;">
<h1 class="">Istoria motocicletelor</h1>
<h3>Ce este o motociclea?</h3>
<div style="float: right;width: 70%;padding-left: 10px">

<p>Motocicleta este un vehicul motorizat cu două roți. Asemenea biciclet
ei, motocicleta se menține în poziție verticală când rulează în linie dreaptă, a
șa încât centrul de greutate să fie între roți. Schimbarea de direcție este real
izată de conducător. Ipoteza că vehiculele cu două roți stau drept datorită efec
tului giroscopic au fost infirmate.</p><p>
FConform OUG 195 Art.6 alin.(22) : motocicletă - autovehicul cu două roți, cu sa
u fără ataș, echipat cu un motor care are o capacitate cilindrică mai mare de 50
cm³ și/sau a cărui viteză maximă, prin construcție, depășește 45 km/h</p></div>
<div style="float: left;width: 30%;"><img src="img/ist1.jpg" style="max-
width:100%;max-height: 350px;"></div>
</div>
43

<h1 class="">Constructie</h1>
<h3>• Cadru</h3>
<p>Cadrul (șasiul) motocicletei este realizat prin sudură, din țevi de alu
miniu sau oțel. Motocicletele moderne folosesc motorul ca structură de rezistenț
ă a șasiului. Rezervorul de combustibil este plasat de obicei deasupra motorului
, întâlnindu-se însă motociclete cu rezervorul sub șa sau integrat în șasiu. Jan
tele pot fi spițate sau realizate în întregime din aluminiu, aliaje speciale sau
fibră de carbon.</p><p>
La exterior, cadrul este cel mai adesea acoperit de carene din material
plastic, în întregime sau parțial.</p>
<h3>• Suspensii</h3>
<p>Cea mai răspândită configurație pentru suspensia roților la motociclete
constă în două amortizoare telescopice pentru roata față si un amortizor pentru
bascula în care este montată roata din spate. Amortizoarele sunt hidraulice sau
cu gaz. Recent, acestea sunt montate cu tubul interior la capătul dinspre roată
(furca "upside-down") pentru a reduce inerția ansamblului și a îmbunătăți compor
tamentul pe drum denivelat.
Variante mai puțin tradiționale se întâlnesc la choppere și motocicletel
e BMW. Sistemul telelever folosit de BMW asigură o stabilitate mai mare a motoci
cletei la frânare.

Funcționarea și ajustarea corectă a suspensiei este esențială pentru con
trolul motocicletei, în special la viraje.</p>

<h3>• Frâne</h3>
<div style="float: left;width: 40%; margin-right: 20px;"><img sr
c="img/isto1.jpg" style="margin-left: 30px; margin-top: 0px;max-width: 400px; he
ight: 300px; width: 500px;"></div>
<p>În general motocicletele dispun de două sisteme de frânare independente
, însă în prezent mai multe motociclete oferă sisteme de frînare legate (aplicar
ea uneia dintre frîne o acționează și pe cealaltă) ca măsură de securitate. Frân
a roții față este acționată de un levier situat în partea dreaptă a ghidonului,
iar frâna roții spate este comandată de o pedală situată lângă scărița din dreap
ta. Toate motocicletele moderne dispun de unul sau două discuri de frână la roat
a față si un disc la roata spate. Motocicletele mai vechi folosesc frâne cu tamb
ur la roata spate. Acționarea frânelor este hidraulică in majoritatea cazurilor.
La actionarea brutala a franei fata, motocicleta se ridica pe roata spate si se
produce asa numitul 'stoppie';la actionarea brutala a franei spate,se produce fe
nomenul 'wobbling'.Oricare se produce,urmarile sunt grave in majoritatea cazuril
or. Frâna cea mai puternică este frâna roții față, care preia intre 70 și 100% d
in capacitatea de frânare pe o suprafață aderentă, datorită transferului de greu
tate. Proporția diferă și în funcție de tipul motocicletei.
44
Sisteme de tip ABS si de repartizare a forței de frânare pe cele două ro
ți gen Integral si partial-integral se pot întâlni din ce in ce mai des la motoc
iclete.</p>
<div style="float: right;width: 40%;"><img src="img/ist4.jpg" style="mar
gin-left: 30px; margin-top: 0px;max-width: 400px; height: 300px; width: 500px;
"></div>
<h3>• Motor</h3>
<p>Propulsia motocicletei este asigurată de un motor cu ardere internă, în
doi sau patru timpi. Prototipuri și serii limitate de motociclete cu motor diese
l există, dar nu sunt răspândite. Capacitatea cilindrică a motoarelor de motocic
letă este situată între 50cc și 2000cc. Motoarele în doi timpi sunt mai des întâ
lnite la motocicletele vechi sau la cele de performanță (un motor în doi timpi g
enereaza mai multă putere decât unul în patru timpi de aceeași cilindree).
Configurațiile întâlnite sunt foarte variate: monocilindru, doi până la
șase cilindri în V, doi până la patru cilindri în linie, montați transversal sau
longitudinal, doi cilindri orizontali opuși, etc.

Puterea dezvoltată de motor variază în funcție de tipul motocicletei, de
la 3-5 CP până la peste 200 CP. Motocicletele sportive de serie, accesibile publ
icului larg, pot avea un raport putere/greutate supraunitar.</p>
<h3>• Transmisie</h3>
<p>Ambreiajul motocicletelor este de obicei de tipul umed, cu ungere în ba
ia de ulei sau separată. Ambreiajul de tip uscat este și el destul de raspândit.
Cutia de viteze are cinci sau șase trepte de multiplicare.
Transmisia finală cea mai răspândită este cu lanț, mai rar cu cardan sau
curea de transmisie.</p>
</div>

CONTACT.HTML
<div class="container" style="margin-bottom: 0px;padding-left: 80px;margin-top:
100px;">
<center> <h1 class="">Contact</h1> </center>
</div>
<center><form action="contact.html" method="get">
45
<input id="papa" type="text" name="Nume" placeholder="Nume" style="width: 300p
x;margin:5px;"></br>
<input id="papa" type="text" name="Email" placeholder="Email" style="width: 300
px;margin:5px;" ><br>
<input id="papa" type="text" name="Subiect" placeholder="Subiect" style="width
: 300px;margin:5px;"><br>
<textarea id="papa" name="Mesaj" placeholder="Mesaj" style="height: 150px; widt
h: 300px; margin: 5px;"></textarea><br>
<input type="submit" value="Trimite" style="padding:10px;
margin:5px;">
</form></center>
<br>
<br>
<br>
<center><img src="img/contact.jpg"></center>
</div>
GALERIE.HTML
top: 100px; text-align: center;">
<h1 class="">Galerie motociclete</h1>
</div>
<div style="margin-bottom: 50px">
<table class="center">
<a href="img00.jpg" rel="" title=""><img src="thumb00.jpg" alt="" style="margi
n-right: 20px; height: 200px; float: left; width: 300px;"></a>
n-right: 20px; height: 200px; float: left; width: 300px;margin-left: 50px;"></a>
n-right: 20px; height: 200px; float: left; width: 300px;margin-left: 50px;"></a>
n-right: 20px; height: 200px; float: left; width: 300px;margin-top: 20px;"></a>
n-right: 20px; height: 200px; float: left; width: 300px;margin-left: 50px; margi
n-top: 20px;"></a>
46
n-right: 20px; height: 200px; float: left; width: 300px;margin-left: 50px; margi
n-top: 20px;"></a>
<a href="img06.jpg" rel="" title=""><img src="thumb06.jpg" alt="" style="mar
gin-right: 20px; height: 200px; float: left; width: 300px; margin-top: 20px;
"></a>
n-right: 20px; height: 200px; float: left; width: 300px;margin-left: 50px;margin
-top: 20px;"></a>
-top: 20px;"></a>
gin-right: 20px; height: 200px; float: left; width: 300px;margin-top: 20px;
"></a>
-top: 20px;"></a>
-top: 20px;"></a>
n-right: 20px; height: 200px; float: left; width: 300px;margin-top: 20px;"></a>
-top: 20px;"></a>
-top: 20px;"></a>
gin-right: 20px; height: 200px; float: left; width: 300px;margin-top: 20px;
"></a>
-top: 20px;"></a>
-top: 20px;"></a>
47
</table></div>
</div>
MARCA MOTOR1.HTML
top: 80px;">

<h1 class="">YAMAHA</h1>
<p>Yamaha Motor a luat fiinţă în iulie 1955, pe fondul unei lupte acerbe
pentru supravieţuire pe piaţa moto: la acea perioadă existau peste 150 de produc
ători de motociclete la nivel mondial! Denumirea iniţială a fost Nipon Gakki, ul
terior schimbându-şi numele în Yamaha Corporation. Piatra de temelie a fost pusă
de către Genichi Kawakami (1912-2002) prin demerarea producţiei modelului YA-1,
supranumit „Aka-tombo” (dragon zburător roşu). </p>
<p>Pentru producerea acestui prim model au fost folosite echipamente de
prim rang, utilizate la construcţia elicelor de avioane. Prima cursă la care a l
uat parte modelul YA-1, Mt. Fuji Ascent, a şi fost câştigat de acesta, rezultatu
l fiind o mare gură de oxigen pentru nou-născuta firmă niponă. În aceea perioadă
, salariul unui absolvent de facultate era la nivelul de 10.700 yeni, de aceea,
cu un preţ de 138.000 yeni, YA-1 a fost considerat un model extravagant. <
/p></div>
<div style="float: right;width: 60%;"><img src="img/yah1.jpg" style="mar
gin-left: 50px;margin-top: 50px;margin-bottom: 150px; width: 100%; height: 400px
;" ></div>
</div>

<h1 class="">PRIMELE MODELE</h1>
<div style="float: right;width: 60%">

<p>Primul model de 750 cm³ a fost realizat în 1972 şi s-a numit TX 750.
într-o perioadă în care motoarele multi-cilindru echipau în majoritate modelele
supersport mari de şosea, Yamaha a propus o abordare nouă: montarea unui astfel
de motor pe un şasiu mai uşor, care permitea o excelentă manevrabilitate şi perf
ormanţă pe măsură. Tehnologia utilizată a permis montarea în premieră mondială p
e o motocicletă a unei structuri anti-vibraţie împreună cu frâne cu discuri dubl
e şi cu primul cadru din aluminiu folosit vreodată pe un model de stradă. </p>
<p>Dimensiuni: L x l x h:2205x910x1165 [mm] <br>
Greutate: 210 kg <br>
48
Motor: 2 cilindri, răciţi cu aer, 30 HC-743 cc, 4 timpi <br>
Putere maximă: 63 CP/6500 rot/min <br>
Cuplu maxim: 7 kg – m / 6000 rot/min. </p></div>
<div style="float: left;width: 40%;"><img src="img/yah2.jpg" style="marg
in-top: 20px;max-width: 400px; height: 300px;"></div>
</div>
<p >Următorul pas la care ne-am oprit în dorinţa de a urmări linia super- sporti
velor Yamaha este în anul 1982, odată cu lansarea modelului XJ-650 Turbo. Era pe
ntru prima dată când se monta un sistem turbo pe un carburator, fapt care a atra
s atenţia la salonul Tokyo Motor Show. Împreună cu acest model, a fost prezentat
şi XJ 1100 Turbo, al cărei compresor era cuplat la un sistem de injecţie electro
nică. Design-ul XJ-urilor a fost rezultatul a sute de ore petrecute în wind-
tunnels, motocicleta fiind carenată pentru obţinerea unei rezistenţe la înaintar
e cât mai mici. </p>
<p>Yamaha XJ-650 Turbo (1982) <br>
Dimensiuni: L x l x h:2200x730x1355 [mm] <br>
Greutate: 230 kg <br>
Motor: 4 cilindri, răciţi cu aer, DOHC-653 cc, 4 timpi <br>
Putere maximă: 90 CP/9000 rot/min <br>
Cuplu maxim: 8,33 kg – m / 7000 rot/min. </p> </div>
<div style="float: right;width: 40%;"><img src="img/yah3.jpg" style="margin-
left: 30px; margin-top: 0px;max-width: 400px; height: 300px; width: 500px;
"></div>
</div>
<h1 class="">MODELE NOI</h1>
<table class="demo">

<tbody>
<tr>
<td><img src="img/yaht1.jpg" style="width: 100%"></td>
<td><h3>YAMAHA XSR900 2020 ($9,499)</h3></td>
</tr>
<tr>
<td><h3>YAMAHA XT1200ZE Super Ténéré ($19,940)</h3></td>
</tr>
<tr>
<td><h3>YAMAHA YS125 ($3,397)</h3></td>
49
</tr>
<tr>
<td><h3>YAMAHA FJR1300AS ($16,399)</h3></td>
</tr>
</tbody>
</table>
</div>
</div>
MARCA MOTOR2.HTML
<div class="container" style="margin-bottom: 50px;padding-left: 80px;margin-top:
80px;">

<h1 class="">HARLEY DAVIDSON</h1>
<p>Harley-Davidson, Inc., H-D sau Harley, este un producător american de
motociclete fondat în 1903 în Milwaukee, Wisconsin. A fost unul dintre cei doi m
ari producători americani de motociclete pentru a supraviețui Marii Depresiuni,
împreună cu indianul. Compania a supraviețuit numeroase acorduri de proprietate,
aranjamente subsidiare, perioade de sănătate economică slabă și calitatea produs
elor, precum și o concurență mondială intensă pentru a deveni unul dintre cei ma
i mari producători de motociclete din lume și un brand iconic cunoscut pe larg p
entru urmările sale loiale. Există cluburi și evenimente de proprietari în între
aga lume, precum și un muzeu sponsorizat de companie, axat pe brand.</p>
</div>
<div style="float: right;width: 60%;"><img src="img/har1.jpg" style="mar
gin-left: 50px;margin-top: 50px;margin-bottom: 150px; width: 600px; height: 300p
x;"></div>
<p></p>
</div>

<center><h1 class="">Motociclete cu specificatii</h1></center>
<div>

<p>"In the saddle, you breathe deeper, smile bigger, and your heart beat
s louder. Responsibilities blow off your back. A ride on a Harley-Davidson® moto
rcycle can make any weekend epic. It can turn a daily commute into an adrenaline
-fest. A Harley-Davidson blows things wide open. Pure freedom. As big and real a
s it gets." - Harley Davidson</p>
50
</div>
</div>
<table class="wikitable collapsible" style="width:90%; text-align:center; font-
size:90%; line-height: 1.1em; margin:auto; margin-top: -250px;" i
d="collapsibleTable0">
<tbody><tr>
<th colspan="14" style="height: 50px;font-size: 20px">Tabel cu specificatii</th>
</tr>
<tr>
<th>Modelul</th>
<th><abbr class="abbr" title="Ianuarie">2020 FORTY-EIGHT</abbr></th>
<th><abbr class="abbr" title="Februarie">2020 IRON 883™</abbr></th>
<th><abbr class="abbr" title="Martie">2020 IRON 1200™</abbr></th>
<th><abbr class="abbr" title="Aprilie">STREET ROD</abbr></th>
<th><abbr class="abbr" title="Aprilie">HARLEY-DAVIDSON STREET® 750</abbr></th>
<th><abbr class="abbr" title="Iunie">LLow Rider® S</abbr></th>
<th><abbr class="abbr" title="Iulie">2020 DELUXE</abbr></th>
<th><abbr class="abbr" title="August">2020 SOFTAIL SLIM®</abbr></th>
<th><abbr class="abbr" title="Septembrie">2020 ROAD GLIDE® LIMITED</abbr></th>
</tr>
MARCA MOTOR3.HTML
top: 80px;">
<h1 class="">Kawasaki</h1>

<p>Motocicletele Kawasaki sunt fabricate de divizia Motociclete și Motoa
re din Kawasaki Heavy Industries la fabricile din Japonia, Michigan, Filipine, I
ndia, Indonezia, Bangladesh și Thailanda.</p>
<p><b>MISIUNEA</b> noastra este de a oferi clientilor produse diversific
ate, brand-uri de renume international la preturile cele mai bune de pe piata, s
ervicii de calitate pentru operatiunile de garantie si post garantie, asistenta
si consultanta pentru cele mai bune alegeri, dar si produse nevonventionale ce s
e adreseaza segmentului direct vizat, cum ar fi autoutilitare de stingere a ince
ndiilor, autoutilitare paramedicale si alt tip de produse inovative ce se adrese
aza atat sectorului industrial si agricol, cat si sectorului public sau privat,
solutia perfecta de interventie rapida atunci cand autoutilitarele conventionale
nu pot accesa locatiile greu accesibile, in teren accidentat, zone noroioase, in
guste, de padure, conditii meteo nefavorabile sau de zapada abundenta.</p>
</div>
51
<div style="float: right;width: 60%;"><img src="img/haw1.jpg" style="hei
ght: 380px;margin-bottom: 150px;margin-left: 60px;"></div>
</div>

<h1 class="">Istoria Kawasaki</h1>
<div style="float: right;width: 60%">

<p>Kawasaki Aircraft a fabricat inițial motociclete sub numele Meguro, d
upă ce a cumpărat un producător de motociclete în dificultate, Meguro Manufactur
ing cu care au fost în parteneriat. Aceasta a devenit în cele din urmă Vânzări d
e Kawasaki Motor. Unele motociclete timpurii afișează pe rezervorul de combustib
il o emblemă cu „Avioanele Kawasaki”.</p>
<p> În 1962, inginerii Kawasaki au dezvoltat un motor în patru timpi pen
tru mașini mici. Apoi, unii dintre ingineri s-au transferat la fabrica Meguro pe
ntru a lucra la Meguro K1 și SG, un singur cilindru de 250 cc OHV. În 1963, Kawa
saki și Meguro s-au contopit pentru a forma Kawasaki Motorcycle Co., Ltd. Motoci
cletele Kawasaki din 1962 până în 1967 au folosit o emblemă care poate fi descri
să ca un steag în interiorul unei aripi.</p></div>
<div style="float: left;width: 40%;"><img src="img/kaw2.jpg" style="max-
width: 400px;height: 200px;"></div>
</div>
<p >Lucrările au continuat pe Meguro K1, o copie a gemenului vertical BSA A7 500
cc. și pe Kawasaki W1. K2 a fost exportat în SUA pentru un test ca răspuns la pi
ața americană în expansiune pentru motociclete în patru timpi. La început a fost
respinsă din cauza lipsei de putere. La mijlocul anilor 1960, Kawasaki exporta î
n sfârșit un număr moderat de motociclete. Kawasaki H1 Mach III în 1968, împreun
ă cu mai multe motociclete în stil enduro pentru a concura cu Yamaha, Suzuki și
Honda, au crescut vânzările de unități Kawasaki.</p>
<p>Divizia de motoare a lui Kawasaki, aflată într-un complex de birouri unic în
Grand Rapids, Michigan, consolidează proiecte de cercetare și dezvoltare pentru
motoare.</p>
<br/>
<div style="width: 100%;height: 680px; ">
<img src="img/kaw3.jpg" style="width: 100%">
</div>
</div>
52
Vă mulțumesc!
53
Profesor coordonator: Elev:

Gaiță Lukacs Ioana Pârvulescu Răzvan-Marian
54

Atestat Razvan Parvulescu 1

Î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 Razvan Parvulescu 1

Încărcat de

Drepturi de autor:

Formate disponibile

ATESTAT LA INFORMATICǍ – MOTOCICLETE –

Ce Colegiul Național “Mihai Eminescu” Petroșani

LUCRARE PENTRU ATESTAREA

Profesor coordonator: Elev:

Recomand tuturor perosoanelor care sunt însetate de puțină adrenalină să

- datorită masei reduse, raportul putere/greutate este net în favoarea

- în timpul abordării unui viraj, un motociclist se află în imposibilitatea

- schimbarea direcției de mers se face prin contra-virare (orientarea

sistemului de direcție și parțial forțelor giroscopice ce acționează asupra

- în linie dreaptă distanța de oprire a motocicletei poate fi la fel de bună

În concluzie, consider că acest proiect reprezintă un bun mijloc de

Pagina „Istorie motociclete” ofera informații despre istoria motocicletelor pentru

HTML (Hypertext Markup Language) este un limbaj creat în scopul de a

În informatică, limbajele de marcare sunt foarte convenabile fiindcă comenzile

De fapt, procesoarele de texte uzuale folosesc adesea procedee de marcare

Referitor la legãtura dintre procesoarele de documente uzuale și limbajul

Elementele limbajului HTML

Toate obiectele HTML sunt introduse între marcaje care le definesc;

Majoritatea navigatoarelor permit vizualizarea paginii curente în formatul

Existã însã și marcaje cu parametri; acestea au forma <tip_obiect

1. marcaje de bază - cele care delimiteazã pagina / documentul HTML, titlul

Vom descrie în paragrafele urmãtoare, elementele caracteristice fiecãreia din

Pentru structurarea si organizarea informațiilor din paginile web se pot utiliza

Mai menționãm faptul cã în ultimele versiuni ale limbajului HTML si ale

O paginã Web este delimitatã de marcajele <HTML> și </HTML> care indicã

 zonã de antet cuprinsã între marcajele: <HEAD> … </HEAD> și

Zona de antet este utilizatã de cãtre programele de cãutare pe site-urile web și

titlul, introdus în antet, este cuprins între marcajele <TITLE> … </TITLE>.

Marcaje pentru structurarea documentului

Programele de navigare asigurã afișarea diferențiatã a unor titluri și

Titlurile de capitole sau subtitlurile sunt definite de marcajele <Hn>, unde n

Pentru separarea zonelor paginii se pot folosi treceri la:

 linie nouã - cu marcajul <BR>, eventual cu desenarea unei linii orizontale -

Marcaje pentru formatarea textului și crearea listelor

Formatãrile uzuale de texte permit scrierea cu caractere:

Unele programe mai vechi de navigare nu permiteau reprezentarea acestor

Alte tipuri de formatãri de caractere care se pot defini se referã la:

dimensiunea fonturilor și culori - se va utiliza marcajul cu parametri:

<FONT SIZE=x COLOR=y> … </FONT> , care indicã utilizarea unui font de

 x poate fi un numãr între 1 și 12, indicând mãrimea exactã, sau un numãr cu

 y poate fi numele unei culori standard, specificatã în limba englezã și între

Suplimentar, se pot crea pagini de stiluri, în care sã se defineascã stiluri logice,

Prezentãm în continuare un exemplu de document HTML, precum și modul

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">

În figura, se observã cã textul propriu-zis al documentului poate fi delimitat fațã

Elementele listelor se introduc între marcajele <LI> … </LI> ("list item").

Astfel, listele pot fi:

 neordonate (cu buline) - delimitate de marcajele <UL> … </UL> ("unordered

 glosare (liste de definiții) delimitate de marcajele <DL> … </DL> ("definition

<p>Această pagină exemplifică crearea listelor</p>

<p>Cele mai uzual folosite tipuri de liste sunt:

<p>O listă ordonată este o lista numerotată:

Exemple de liste într-o paginã HTML

Marcaje pentru crearea hiperlegãturilor

Hiperlegãturile ("hyperlinks") se introduc cu marcajele <A> … </A> ("anchor")

 adrese URL - astfel se asigurã accesul în cadrul procesului de navigare (prin

 fișiere / resurse locale adicã aflate pe același calculator cu pagină creatã -

 o zonã din documentul HTML curent - link-uri interne.

În fiecare din aceste cazuri, un click pe textul sau imaginea respectivã va

interne documentului; este cel mai important parametru pentru

 METHODS - metodele de acces (acest parametru se utilizeazã doar în

O legãturã internã cãtre o zonã a documentului curent se indicã folosind marcajul

Marcaje pentru introducerea de obiecte