LABORATOR LA HTML I CSS

Cuprins
1. CAIET DE SARCINI
1
3. MODALITATEA DE EVALUARE 2
4. PROCESUL DE REZOLVARE CONSTA DIN MAI MULI PASI: 2
5. FABULA SARCINII /EXEMPLU/ 3
6. MODUL DE EVALUARE A NOTEI PENTRU LABORATOR 4
Anexa 1 Lista temelor/ subiectelor 4
ANEXA 2 Basic HTML Elements /doar cu titlu de Facilitare. A nu se considera obligator!!/ 5
Basic HTML Elements /doar cu titlu de Facilitare. A nu se considera obligator!!/ 8

1. CAIET DE SARCINI

Fiecare student are un set de 7 sarcini la compartimentul HTML i

CSS, pentru Tema/subiectul selectat/selectat (Vedei lista n
Anexa 1), n care se cere: in mod consecvent, algoritmic gndit
corect, a dezvolta o pagina Web i a pune-o in aplicare, utiliznd
etichetele de baz ale HTML i CSS, pentru a obine experiena de
utilizare creativ a lor.

Fiecare sarcin 1-7, este un exemplu precis al a ceea ce trebuie s fie

executat la pasul concret. Textul pentru paginile pe care urmeaz s
le creai vor fi preluate din Tema/subiectul selectat/selectat (Vedei
lista n Anexa 1). Grafica, pentru sarcin, o gsii din Internet sau o
elaborai singuri. Pentru crearea si editarea paginii Web utilizai
Notepad++ sau alt editor la discreia Dvs.

Not: Se va aprecia in mod DEOSEBIT, propria viziune i

expunere a Fabulei, Temei/subiectului selectate/selectat n
ncercarea de a diversifica cit mai mult subiectul si a utiliza o
gam ct mai larg de elemente HTML, CSS pentru a elabora
pagina Web.

2. MODALITATEA DE PREZENTARE A RAPORTULUI

I. Document Word, format electronic. /Raportul va

conine: Tema/subiectul selectat/selectat. Descrierea
Fabulei (Vezi exemplul de mai jos). Tabelar de prezentat
succint elementele utilizate din HTML, CSS.
II. Codul tuturor programelor pentru paii 1-7 (al 7-lea, varianta
final). Varianta FINAL de Fabul, dac ea a fost modificat,

5
 pentru a cuprinde cte mai multe elemente de structur
HTML, CSS/. Prezentare la orele de Laborator a rezultatelor
lucrrii cu sarcina executat.
Not: Pagina Dvs. Web urmeaz s conin cte mai multe
elemente, in ordinea importanei lor /a vedea Tabel: Punctaj la
lucrare si Anexa 2/

3. MODALITATEA DE EVALUARE

Pagina Dvs. Web urmeaz s conin cte mai multe elemente HTML
i CSS, in ordinea importanei lor /a vedea Tabel: Punctaj la lucrare
si Anexa 1/

4. PROCESUL DE REZOLVARE CONSTA DIN MAI MULI PASI:

Not: Urmeaz s fie prezentate toate codurile de program,

adic 7!

PASUL 1, Elaborati pagina Web utiliznd doar etichetele HTML

pentru formatarea textului.

PASUL 2, Elaborati pagina Web utiliznd etichetele HTML pentru

formatarea textului n care va trebui s includei imagini grafice n i
corect s setai modurile de aranjament a imagini i textului

PASUL 3, Elaborati pagina Web utiliznd etichetele HTML n aa

mod nct s compunei un tabel necomplicat, evident ajustnd sau
chiar modificnd continutul Fabulei la acest nou element de structura
a paginii Web.

PASUL 4, Elaborati pagina Web utiliznd etichetele HTML n aa

mod nct s aveti incluse referine /link-uri/ relative, att la alte
documente/fisiere HTML, ct i referine absolute la link-uri de pe
site-urile existente n Internet.

PASUL 5, Elaborati pagina Web utiliznd etichetele HTML n aa

mod nct s aveti inclus pe document o bar de navigare simpl, care
va necesita nu numai s plasai eticheta n locurile potrivite ale
paginii, dar s utilizai un tabel pentru a crea o nou structur a
paginii HTML

5
 PASUL 6, Elaborati pagina Web utiliznd etichetele HTML n aa
mod nct s utilizati CSS-ul pe document, nct pagina s obin o
alt nfiare, care s nu poat fi aranjat utiliznd abordrile
standard ale HTML.

PASUL 7. (complexitate sporit), Elaborati pagina Web utiliznd

etichetele HTML n aa mod nct s utilizati toate instrumentele
HTML, pentru ca pagina web s fie una atractiv i prietenoas
pentru utilizator.

5. FABULA SARCINII /EXEMPLU/

S se elaboreze o pagin Web, pentru povestea ..

CAPRA CU TREI IEZI / folosind Rezumatul, sau varianta
deplin/
Not: pentru sarcini tip poveti apalai la Internet pentru a
cuta Rezumatul ei.

Era odat o capr care avea trei iezi. Cel mare i cel mijlociu
erau tare obraznici, dar cel mic era harnic i cuminte.

ntr-o zi, capra spuse iezilor c trebuie s mearg n

pdure dup ceva de mncare, iar ei s stea cumini n cas, s se
joace, dar s nu dea drumul la u nimnui, pn cnd nu vor auzi
cntecul ei de ntoarcere.

Lupul a stat ascuns n dosul casei, a auzit tot ce a vorbit

capra cu ieziorii i atepta ca mama lor s plece, dorind s stea de
vorb cu cei mici.

A btut lupul n u, a nceput s cnte cu glasul lui gros,

dar nu i-a dat nimeni drumul pn cnd nu s-a dus la fierar s-i
ascut limba i dinii.

S-a ntors aadar la iezi, a cntat din nou, reuind s-i

pcleasc pe cei mai mari dintre ei. Iezii au crezut c se vor juca,
aa cum fceau de obicei cu mama capr. Cum nu se mai jucaser de
mult, din pricin c mama era mereu ocupat cu treburile
gospodreti, s-au bucurat i au deschis ua fr s se gndeasc la
vreo primejdie. S-au ascuns totui. De ce? De dragul jocului sau de
team?

5
 S-au ascuns: unul dup u, altul sub covat i cel mic n
horn. Singur, iedul cel mic a scpat de gura flmnd a cumtrului
lup, dar numai el a tiut ct a tremurat

Capra s-a napoiat acas i iedul cel mic i-a povestit cu

lacrimi n ochi ce s-a ntmplat.

Cei doi au hotrt s fac un praznic pentru iezii mncai

de lup i s-l invite i pe lup, ca s-i poat rzbuna.

Dar fiecare i gsete naul! Capra i iedul mic i

pregtiser lupului o capcan: un scaun de cear aezat pe o
rogojin sub care aprinseser focul. Cnd scaunul de cear s-a topit,
lupul s-a prbuit n flcri.

6. MODUL DE EVALUARE A NOTEI PENTRU LABORATOR

1. Elementele documentului.
2. Elementele corpului.
/Heading-uri, paragrafe, rind, linie, aliniere./
3. Elemente de stil i aspect. /Culori, Nume de culori Formatare
text, Liste, Marcatori i numerotare/
4. Elementul de ancorare: legturi i obiective denumite.
5. Elementul de imagine, adugare imagini/hri.
6. Elemente de list.Tabele.
7. Link-uri, Efecte de miscare
8. Cadre/Frame. Formulare,
9. Stiluri CSS, DIV i SPAN,
10. Audio, video, Elemente speciale din HTML 5
11. Coninut. Prezentare.

Tabel: Punctaj la lucrare

Numr 1 2 3 4 5 6 7 8 9 10 11
% din not 2 3 4 6 8 10 12 15 15 15 10
100%
Nota Pin la 50% 5
ntre 50%- 60% 6
ntre 60% - 70% 7
ntre 70% - 80% 8

5
 ntre 80% - 90% 9
Dup 90% 10

Anexa 1 Lista temelor/ subiectelor

POVETI DE ION CREANG

1. Fata babei i fata moneagului
2. Pungua cu doi bani
3. Capra cu trei iezi
4. Povestea lui Harap-Alb
5. Povestea lui Stan-Pitul
6. Soacra cu trei nurori
7. Ursul pclit de vulpe
8. Dnil Prepeleac
9. Povestea porcului
10.Ivan Turbinc
11.Pcal
12.Acul i barosul
13.Cinci pini
14.Inul i cmea
15.Povestea unui om lene
16.Ion Roat i Cuza-Vod
17.Mo Ion Roat i Unirea
18.Prostia omeneasc (Poveste)
19.Mo Nichifor Cocariul
20.Amintiri din copilrie I
POVETI DE FRAII GRIMM
21.Alb-ca-Zpada i cei apte pitici
22.Scufia Roie
23.Cenureasa
24.Muzicanii din Bremen
25.Frumoasa adormit
26.Pzitoarea de gte
27.Pomul cu merele de aur
28.Regina albinelor
29.Ploaia de stele
30.Csua din pdure
31.Prinul fermecat
32.Prichindel

5
 33.Gsca de aur
34.Bunicul i nepotul
35.Fata moului cea cuminte i harnic i fata babei cea hain i urt
POVETI DE HC ANDERSEN
36.Hainele cele noi ale mpratului
37.Povestea unui gt de sticl
38.Soldelul de plumb
39.Lebedele
40.Privighetoarea
41.Prinesa i mazrea
POVETI DE MIHAI EMINESCU
42.Ft-Frumos din lacrim
43.Clin-Nebunul
44.Frumoasa lumii
45.Borta-vntului
46.Finul-lui-Dumnezeu
POVETI PETRE ISPIRESCU
47.Tineree fr btrnee i via fr de moarte
48.Sarea n bucate
49.Balaurul cel cu apte capete
50.Cei trei frai mprai
51.Luceafrul de ziu i luceafrul de noapte
52.Lupul cel nzdrvan i Ft-Frumos
53.Cele dousprezece fete de mprat i palatul cel fermecat
54.Ft-Frumos cu prul de aur
55.Fata sracului cea istea
POVETI DE EMILIA PLUGARU
56.Mriorul
57.Culorile
58.Vnztorul de vise
59.Cluul zburtor
60.Cadoul de Crciun
61.A venit Primvara!
POVETI DE IOAN SLAVICI
62.Doi fei cu stea n frunte
63.Boierul i Pcal
64.Pcal n satul lui
65.Ileana cea ireat
66.Spaima zmeilor
67.Floria din codru
POVETI DE BARBU TEFNESCU DELAVRANCEA
68.Bunicul

5
 69.Bunica
70.Sorcova
ALTE SUBIECTE:
71.O zi de odihna la pescuit
72.O zi de odihna la p[dure
73.O cltorie la munte
74.O cltorie pe Nistru
75.mpreun cu familia la srbtorile de iarn
76.La cursul de prelegeri Bazele de date modelarea, abordarea INPUT-OUTPUT
77.La cursul de prelegeri Bazele de date modelarea, abordarea OUTPUT-INPUT
78.La cursul de prelegeri Bazele de date modelarea, tipul de modele.
79.La cursul de prelegeri Bazele de date Normalizarea, cele 4 forme normale.
80.La cursul de prelegeri Bazele de date relaii intre tabele n bazele de date
81.La cursul de prelegeri Bazele de date normalizate/operaionale Regulile lui
E.F.CODD
82.La cursul de prelegeri Matematica Computaionala, tema Relatii, 2 operatii
Reuniunea si Diferena
83.La cursul de prelegeri MC, tema Relatii, 2 operatii Intersectia si Produsul
Cartezian
84.La cursul de prelegeri MC, tema Relatii, 2 operatii Proiectia si Selectia
85.La cursul de prelegeri MC, tema Relatii, 2 operatii Reuniunea si Diferena
86.La cursul de prelegeri MC, tema Relatii, JOIN-ul General
87.La cursul de prelegeri MC, grafuri Euleriene
88.La cursul de prelegeri MC, grafuri Hamiltoniene
89.Grafuri n procesul decizional
90.Metode interactive de nvmnt
91.Ce este calculatorul? /Istorie hazlie/
92.Copilria mea
93.Eu in adolescent
94.Cea mai interesant istorie din viata mea
95.Legende. /ex. a rindunicii, povestea zilelor sptmnii/
96.Obiceiuri. /de Crciun, de Pati, la nuni, la cumetrii/
97.Glume, bancuri cu calculatoarele.
98.Istorii hazlii cu copii CE SPUN COPIII?
99.Adam si Eva
100. Ce este iubirea

5
 ANEXA 2 Basic HTML Elements /doar cu titlu de Facilitare. A
nu se considera obligator!!/

eticheta semnificatie
<!-- ??? --> comentariu
<!DOCTYPE ...>tipul documentului
<a ...> legatura (link)
<area> arie, folosita la hartile de imagini
<b> bold, text ingrosat
<bgsound> adauga paginii muzica de fond
<big> font marit
<body ...> corpul paginii, contine informatia ce va fi afisata
<br> sfarsit de rand
<caption ...> "titlul" tabelului
<code> text continand cod de computer
<cite> citat (text italic)
<dd> descrierea definitiei
<del> text taiat cu o linie orizontala
<div> formateaza un sir de caractere
<dl> lista de definitii
<dt> termen dintr-o lista de definitii
<em> text evidentiat
<font ...> font
<form ...> formular
<frame ...> cadru
<frameset ...> defineste blocul compus din cadre
<h1 ...> header sau titlu (de la h1 la h6)
<head> defineste antetul paginii HTML
<hr ...> introduce o linie orizontala
<html> anunta ca blocul este tip HTML
<i> text italic
<iframe ...> fereastra in-line
<img ...> imagine
<input ...> element (camp) al formularului
<kbd> text introdus de la tastatura
<li ...> termen al listei
<link ...> legatura

5
 <meta> metainformatii despre pagina
<noframes> text alternativ pentru cadru
<ol> lista ordonata
<option ...> element al listei de selectii
<p ...> paragraf nou
<pre ...> text preformatat
<select ...> lista de selectii din formular
<samp> mostra de cod
<span> formateaza mai multe elemente
<small> font micsorat
<strong> text ingrosat
<sub> text indice
<sup> text exponent
<table ...> tabel
<td ...> celula a tabelului
<textarea> camp din formular in care se introduce text
<th> headerul tabelului
<title> titlul paginii HTML
<tr ...> rand al tabelului
<tt> text monospatiat
<u> text subliniat
<ul> lista neordonata

5
 Basic HTML Elements /doar cu titlu de Facilitare. A nu se considera obligator!!/

TAG Element name Explanation Attributes

HTML Example View HTML

Contents

1. Document Elements
2. Body Elements
3. Style and Appearance Elements
4. Anchor Element: Links and Named Targets
5. Image Element
6. List Elements
7. Other Elements

Document Elements

HTML HTML Tells browser that the included text is Element includes Head,
in HTML format Body, and other elements

5
 <HTML>
<HEAD></HEAD>
<BODY>
</BODY>
</HTML>
HEAD Header Includes 'header', non-displaying Element can include Title,
information about the document, like Meta, Base and other
the TITLE and other descriptive tags elements
<HEAD>
<TITLE>Basic
HTML Elements</TITLE>
</HEAD>
TITLE Document Title Title that appears in Browser header
and on bookmark lists. Should be
concise and meaningful.
<TITLE>Basic HTML [see top of this page]
Elements</TITLE>
BODY Document Body Defines the content of the document. BGCOLOR, BACKGROUND,
TEXT, LINK, ALINK, VLINK
<BODY> </BODY> See the background of this page

Body Elements

5
 H1 Heading Text of the Element is a section ALIGN
H2 heading. Headings are numbered
H3 and displayed in order of
H4 decreasing importance. Headings
H5 are separate paragraphs.
H6 Page Name
<H1 ALIGN="CENTER">Page Name</H1>
<H2>Section Heading</H2> Section Heading
P Paragraph Defines paragraphs in the ALIGN
document. Usually paragraphs
<P>First paragraph, no content.</P> First paragraph, no content.
<P>Second paragraph, slightly more Second paragraph, slightly more content
content here.</P> here.
BR Break or Line Break Puts a single break in the middle
of a paragraph, list item, etc.
<P>First paragraph, <BR> no First paragraph,
content.</P> no content.
HR Horizontal Rule Runs a horizontal line across the SIZE
page (or table cell) WIDTH
<HR SIZE="10" WIDTH="50%">
DIV Division Defines a particular section of the ALIGN
document. Used to spread VALIGN,
document attributes across a etc
whole section.

5
 <DIV ALIGN="RIGHT">
</DIV>
BLOCKQUOTE Block Quote Displays a block of text quoted
from another document. Usually
indented on all four sides.
<BLOCKQUOTE>Far off in a distant Far off in a distant backwater of the
backwater of the unfashionable end of the unfashionable end of the western spiral arm
western spiral arm of the of the galaxy...
galaxy....</BLOCKQUOTE>
PRE Preformatted Text Uses formatting (spacing, tabs,
carriage returns, breaks, etc.)
exactly as in the plain ASCII text
of the document. Usually displays
in a fixed font, such as Courier.
<PRE>User Services Begins User Services Begins
Here</PRE> Here

Style and Appearance Elements

STRONG Strong emphasis (logical formatting). Very important text.

Generally displays as Bold.
<STRONG>Very Very Important
Important</STRONG>
EM Emphasis (logical formatting) Important text. Generally
displays as Italic

5
 <EM>Important information</EM> Important information
CITE Citation Title of a cited work. Generally displays as
Italic
<CITE>Huckleberry Finn,</CITE>, by Huckleberry Finn, by Mark Twain
Mark Twain.
CODE Computer Code Indicates computer code, such as
programming languages, computer commands,
etc. Usually displays in a fixed font.
<CODE>cd cd /ahome/userid/public/www-data
/ahome/userid/public/www-
data</CODE>
B Bold Displays text as bold.
<B>Bloody, bold and resolute</B> Bloody, bold and resolute
I Italic Displays text as italic
<I>Caveat emptor</I>: let the buyer Caveat emptor: let the buyer beware!
beware!
U Underline Shows text as underlined (not supported by
older versions of Netscape).
<U>Underlined Text</U> Underlined Text
TT Fixed font Displays text in a 'fixed' font (in which each
letter is the same size, such as Courier)--
similar to PRE , CODE, etc.
<TT>Fixed Text</TT> Fixed Text

5
 FONT Font appearance. Sets relative or absolute font size, font color. SIZE
COLOR
<FONT SIZE="+2" Colored text
COLOR="#bb4732">Colored
text</FONT>

Anchor Element: Links and Named Targets

A Hypertext link (Special case of the Anchor Allows the user to NAME, REL, REV
HREF="URL" element) retrieve the document URN,TITLE,TARGET
at the specified URL
by clicking on the
contents of the
element. (Usually
displayed as blue and
underlined.) The URL
may include a named
target.
Go to <A Go to named anchor section.
HREF="htmlchart.html#named_target">
named anchor section</A>
A Named Anchor, or target Sets a HREF, REL, REV
NAME="name" 'target'/'anchor' which URN,TITLE,TARGET
hypertext links can
point to.

5
 <A NAME="named_target">Named Named Target
Target</A>

Image Element

IMG Image Displays an 'inline' (embedded in the document) SOURCE, ALT,

image in the document. Source (SRC="") gives HEIGHT,
the full or partial URL of the image file to use; WIDTH,
ALT gives the alternative/caption text for the BORDER
image
<IMG SRC="/icons/mthawk.gif"
ALT="Lehigh mountain hawk">

List Elements

UL Unordered List Bullet List. Items in the list are LI elements. TYPE
Lists can be nested.
<UL> First Item
<LI>First Item
<LI>Second Item Second Item
</UL>
OL Ordered List Numberd (or lettered) list. TYPE
Items in the list are LI elements.
Lists can be nested.

5
 <OL TYPE="A"> A. First Item
<LI>First Item
<LI>Second Item B. Second Item
</OL>
LI List item An item in a bullet or numbered list.
List items can include other lists (nesting lists), line breaks,
and other HTML tags.
Close tags </LI> are optional.
<UL> List item One
<LI>List item One
o Niggle One
<UL>
<LI>Niggle One o Niggle Two
<LI>Niggle Two
</UL> List item Two
<LI>List item Two
</UL>
DL Descriptive List or A list of terms with definitions or entries with annotations.
Definition List Contains DT and DD elements.
DT elements are the 'terms' or main entries
DD elements are the definitions or annotations.

5
 <DL> Hack
<DT>Hack To program skillfully.
<DD>To program skillfully. Crack
<DT>Crack To break into a computer system.
<DD>To break into a computer
system
</DL>
DT Term in Definiton list In an annotated list, the item or term being annotated
<DL> Hack
<DT>Hack To program skillfully.
<DD>To program skillfully
</DL>
DD Definition in Definition list In an annotated list, the annotation or definition
<DL> Hack
<DT>Hack 1. [v.] to program skillfully
<DD>
<OL> 2. [n.,archaic] a makeshift, a kludge
<LI>[v.]to program skillfully
<LI>[n.,archaic]a makeshift,
a kludge
</OL>
</DD>
</DL>

Other Elements

5
 <!-- Comment Inserts a 'comment' which does not display on the browser screen, but can
--> be seen in the file itself when viewing the source or editing the HTML.
<!-- This is a
comment -->

created 9/97 by JAH

Surse:

1. INTERNET.

5
5
5