Slide 12. Etapele procesului de dezvoltare a unei interfee
web
web
www.tic.diferite.ro Tehnologia informaiei i a comunicaiilor
[email protected]
Site web = pagini web multimedia (conin:texte,imagini,animaii),
conectate prin hiperlinkuri
O pagin web = un document creat cu ajutorul limbajului de marcare
HTML
( Hypertext Markup Language ) i limbaje de programare(ex. PHP),
transmis vizitatorilor
prin intermediul protocolului HTTP, care transfer informaia de la
server la browser.
Web design = procesul de realizare al unui site web, de la
structura i interfaa grafic
i pân la finalizare, introducând date care alctuiesc coninutul
(text, fiiere, imagini)
La început, fiecare site web se accesa prin indicarea adresei sale
numerice specifice
(adresa IP, de ex. 155.284.317.027)
Ulterior pentru site-urile web s-au introdus i numele de domenii,
care permit indicarea
adresei respective prin cuvinte sau nume uor de reinut (de exemplu
www.edu.ro. )
Adresele de site-uri web trebuie s fie clar stabilite, unice în
lume.
Tim Berners Lee a fost primul designer web, publicând primul site
din istorie în 1991.
Programatorul englez este inventator al limbajului HTML (prima
versiune în 1989 ) i al
WWW-ului. Este director al Consoriului WWW (World Wide Web
Consortium),
organizaie care tuteleaz standardele Webului.
1. Aspecte generale ale proiectrii interfeelor web
www.tic.diferite.ro Tehnologia informaiei i a comunicaiilor
[email protected]
Noiunea de standarde web reprezint un termen general pentru
standardele formale i alte
tehnici specifice care definesc i descriu aspecte ale World Wide
Web.
Termenul a fost frecvent asociat cu tendina de însuire a celor mai
bune practici
standardizate pentru designul, construirea i dezvoltarea paginilor
web folosind aceste
metode. Organizaia ce coordoneaz aceste standarde este World Wide
Web Consortium.
Un site web
• este administrat (creat, întreinut i actualizat) de ctre un
webmaster (persoan /grup
de persoane care se îngrijete de editarea i meninerea actual a unui
site web)
• se actualizeaz automat i permanent pe baza unei baze de
date;
• paginile sale se creeaz în mod dinamic i automat în funcie de
aciunea
utilizatorului în cadrul unei aplicaii web;
• se creeaz i e administrat chiar de ctre utilizatorii si
Un site alctuit din mai multe pagini are de obicei o pagin iniial /
principal numit
homepage(index), de la care pleac legturi ctre paginile interioare,
secundare
Cele mai utilizate documente Web sunt documentele HTML.
HTML este un limbaj destinat descrierii statice a paginilor
web
1. Aspecte generale ale proiectrii interfeelor web
www.tic.diferite.ro Tehnologia informaiei i a comunicaiilor
[email protected]
Tipuri de site-uri Web
Dupa modul in care au fost construite exista 2 tipuri principale de
site-uri.
1. Site-urile statice, care contin doar fisiere HTML si CSS,
imagini si text
Acestea sunt cele mai simple site-uri, pentru ca nu necesita
cunostinte avansate de
programare.
Acest tip de site-uri este potrivit pentru prezentarea unei firme
mici
2. Site-urile web dinamice, bazate pe baze de date PHP sau MySQL,
recomandat pentru
pagini complexe, de genul portalurilor de stiri, blog-urilor
1. Aspecte generale ale proiectrii interfeelor web
www.tic.diferite.ro Tehnologia informaiei i a comunicaiilor
[email protected]
Dupa scopul utilizarii site-urile web sunt de mai multe
categorii:
• Site-uri de prezentare (5-10 pagini în care se prezint o firm, un
produs, un serviciu)
• Site-uri de prezentare corporate (prezentarea activitii
companiilor mari, multe pagini)
• Site-uri de informare (sunt create pentru a prezenta informaii pe
o anumit tem)
• Site-uri de campanie publicitara (în aplicatii de animatie
Flash,promoveaz un serviciu)
• Site-uri de continut generat de utilizatori ( exemplu
www.YouTube.com)
• Site-uri retele sociale. (www.facebook.com)
• Site-uri de stiri (apartin institutiilor /pot fi alctuite din
tiri colectate de la teri furnizori)
• Bloguri (Site-uri web create de o singura persoana, ce scrie des
articole pe diverse teme)
• Magazine online (create pentru a servi comerului online)
• Portaluri (exemplu www.k.ro, www.yahoo.com –conin mai multe
tipuri de informaii)
• Motoare de cautare (utilizate pentru a cuta informaii în WWW, ex-
www.google.com)
1. Aspecte generale ale proiectrii interfeelor web
www.tic.diferite.ro Tehnologia informaiei i a comunicaiilor
[email protected]
Structura site-ului
imaginea se afl în folder-ul Poze:
dac pagina va fi salvata în subfolderul Pagini i
imaginea va fi în subfolderul Poze.
dac pagina va fi salvata în folderul Site i
imaginea va fi în subfolderul Poze.
Crearea paginilor web se realizeaz
– Cu limbajul html (dezavantaj: trebuie cunoscute anumite comenzi
care descriu tot ce
va aprea în pagina web)
– Cu programe specializate (avantaj: nu necesit cunoaterea amnunit
a limbajului
html, ci doar a unor principii de proiectarea paginilor web ),
permit vizualizarea
codului html generat automat-FrontPage, Dreamweaver, SharePoint
Designer, Flash
– Prin salvarea unor fiiere Word, Excel, PowerPoint în format web
page
– On-line sub îndrumarea unor site-uri
1. Aspecte generale ale proiectrii interfeelor web
www.tic.diferite.ro Tehnologia informaiei i a comunicaiilor
[email protected]
HTML este pur si simplu un DTD(Document Type Definitions), deci o
aplicatie a SGML
(Standard Generalized Markup Language ) -o specificare pentru
descrierea altor formate
Standardul oficial HTML este World Wide Web Consortiu (W3C)
Documentele HTML sunt documente în format ASCII,pot fi create cu
orice editor de texte
Au fost îns dezvoltate editoare specializate care permit editarea
într-un fel de WYSIWYG
WYSIWYG ( “What You See Is What You Get.” )
= rezultatul pe care îl obinei este chiar ceea ce se vede
WYSIWYG desemneaz în general o trstur pozitiv a unui program care
afieaz
materialul în lucru într-o form identic / foarte apropiat de forma
produsului final.
Se refer în general
– la cele de grafic (de exemplu: Adobe Photoshop)
– la editoarele HTML (Dreamweaver)
Cele mai apreciate caracteristici ale formatului HTML sunt:
– independena fa de platform ( acelai document HTML e afiat la fel
pe diferite PC-uri )
– referinele (un cuvânt, o fraz, o imagine sau orice alt element al
paginii Web.), simplific
nagivarea printr-un document mare i/sau prin mulimea documentelor
unui site
– formatarea structurat (permite convertirea acestora dintr-un
format în altul precum i
interogarea unor baze de date din aceste documente.)
Prin element al unui document HTML vom înelege orice component a
structurii
documentului: tabel, paragraf, list, titlu, buton, caset de text,
imagine etc.
Etichete (marcaje /tags)= cuvinte-cheie utilizate pentru a marca
elementele fiierului HTML
Un tag HTML are forma general: <TAG>...</TAG>
Etichetele, de regul, sunt pereche pentru încadrarea unui
element.
Un document HTML contine taguri (marcaje).
– a) taguri de tip pereche exemplu: <html>…</html> ,
<body>…</body>
– b) taguri singulare exemplu: <br> (trecere la rand nou) ,
<hr> (linie orizontala)
De reinut c limbajul HTML nu face diferen dintre literele mari i
mici;
(etichetele sunt scrise cu minuscule)
1. Aspecte generale ale proiectrii interfeelor web
www.tic.diferite.ro Tehnologia informaiei i a comunicaiilor
[email protected]
<html>
<head>
</head>
<body>
</body>
</html>
1. Aspecte generale ale proiectrii interfeelor web
Structura unei pagini din cadrul unui site web O etichet poate fi
scris atat cu litere mici, cât i cu litere mari. <HTML> =
<HtmL> = <html> Caracterele 'spaiu' i 'CR/LF' ce apar
între etichete sunt ignorate de ctre browser. Toate paginile web
vor avea cel puin elementele de baza: html, head, title si body.
Aceasta este structura standard a unui HTML.
Ordinea deschiderii i a închiderii tag-urilor este foarte
important. Dac un tag este deschis într-un altul, de exemplu body
este deschis în html atunci acel tag (body) este cel care trebuie
închis înaintea celui de-al doilea tag (html). www.tic.diferite.ro
Tehnologia informaiei i a comunicaiilor
[email protected]
Elemente HTML imbricate i elemente HTML vide
• Marea majoritate a elementelor HTML pot fi imbricate (pot conine
alte elemente HTML)
• Elementele HTML ce nu au coninut se numesc elemente vide.
Elementele vide pot fi închise in eticheta de start. <br>
=> <br />
• Toate elementele HTML trebuie închise
Atribute HTML (elementele HTML pot avea atribute )
o Atribute obligatorii
o Atribute opionale
• Atributele furnizeaz informaii suplimentare despre un anumit
element HTML
• Atributele sunt specificate în eticheta de start a unui element
HTML
• Atributele sunt specificate prin intermediul perechilor
nume/valoare: nume="valoare“
O pagin web poate conine urmtoarele elemente:
• text ; liste (ordonate, neordonate, de definiii); tabele;
imagini; harti de imagini; sunete;
animatie; cadre; filme; butoane; casete de dialog si casete
combinate; ferestre
1. Aspecte generale ale proiectrii interfeelor web
www.tic.diferite.ro Tehnologia informaiei i a comunicaiilor
[email protected]
Etapele crearii unei pagini HTML:
1. Se creaza un nou fisier de text: deschidem editorul de text
(Notepad, Wordpad sau Word)
si eventual apelam meniul File – New.
2. Introducem in fisier textul si etichetele HTML necesare.
3. Salvam fisierul ca pagina web(numele fiierului cu extensia .htm
sau .html )
4. Incarcam pagina in browser, pentru a vedea cum arata daca o
publicam pe Internet.
OBSERVATII:
• Nu se folosesc comenzile programului pentru formatare (ex:
centrarea paragrafelor),
deoarece browserul nu va tine cont de ele - pentru el nu conteaza
decat etichetele HTML.
• Nu se salveaza fisierul în formatul nativ al procesorului de
texte (ex: .txt, .doc, etc.),
• Se folosesc numai nume de fisier cu litere mici – in caz contrar,
serverul web poate sa
nu identifice corect pagina. De exemplu, majoritatea serverelor web
(calculatoare care
stocheaza pagini web) cred ca index.html si INDEX.HTML sunt fisiere
diferite.
• Nu se folosesc spatii: Desi browserul Internet Explorer
interpreteaza corect spatiile din
numele fisierelor, alte browsere nu fac acest lucru (ex: Netscape).
Daca trebuie separate
cuvintele din numele fisierelor si directoarelor, folosim un
underscore sau un minus
1. Aspecte generale ale proiectrii interfeelor web
www.tic.diferite.ro Tehnologia informaiei i a comunicaiilor
[email protected]
1. Stabilirea scopului site-ului
Pentru a putea identifica nevoile utilizatorilor e nevoie de
stabilirea cu precizie a scopului
site-ului web. Se stabilete un set de obiective ce vor fi atinse
prin dezvoltarea acestuia.
Structurarea site-ului i stabilirea designului acestuia se face în
concordan cu nevoile i
ateptrile potenialilor vizitatori (gradul de instruire în domeniul
IT al vizitatorilor)
Categorii de utilizatori
• Utilizatorii novici si cei ocazionali – vor fi atrasi de
structura clara a siteului i de navigarea facil în cadrul
structurii informaionale furnizate.
– Pagina de primire trebuie s aib un design atractiv i s ofere de
la prima privire o imagine general privind
informaia ce poate fi gsit aici.
– Studii efectuate de specialiti relev faptul c mai putin de 10%
din cititorii unei pagini Web deruleaza
documentul pentru a vedea partea inferioara a paginii.
• Utilizatorii frecventi si expertii – apreciaz accesul rapid i
acurateea informaiilor obinute
– nu au rbdare s utilizeze meniuri grafice complicate, care se
încarc relativ greu;
• Utililizatorii internationali si utilizatorii cu dizabilitati. –
faciliti pt utilizatori din alte ri: traduceri în limbile de larg
circulaie internaional
– faciliti de accesibilizare a siteului: posibilitatea schimbri
dimensiunii fontului, ataarea de texte explicative elementelor
grafice, realizarea de scurtturi pentru accesul la elementele
importante
2. Etapele procesului de dezvoltare a unei interfee web
www.tic.diferite.ro Tehnologia informaiei i a comunicaiilor
[email protected]
2. Stabilirea cerintelor
• Proiectarea site-ului nu poate fi realizat fr un dialog eficient
între echipa de
dezvoltatori i beneficiarul proiectului.
Cerinele pot fi împrite în 3 categorii:
• Cerine absolut necesare (sunt obligatoriu de implementat), care
se refer la
funcionalitile indispensabile pentru acel site.
• Cerine optionale (cuprinde cerinele care vor fi incluse dup prima
evaluare a siteului)
• Cerinte ce pot fi / vor fi implementate ulterior (cuprinde
cerinele ce vor fi implementate,
într-o versiune ulterioara, mai ales dac necesitatea acestora va fi
probata în practic,
dup lansarea siteului)
3. Aspecte generale ale proiectarii interfetei Web
Caracteristicile componentelor interfeei i interaciunea acestora cu
vizitatorul contribuie la
crearea unei identiti proprii a site-ului, a unei uniti în aspect,
design i funcionalitate.
2. Etapele procesului de dezvoltare a unei interfee web
www.tic.diferite.ro Tehnologia informaiei i a comunicaiilor
[email protected]
Aspecte de care proiectantul interfeei web trebuie s in cont
• Tipul designului ( ierarhizarea informaiei i aspectul
general)
Ierarhizarea informaiei în capitole, subcapitole i seciuni,
indexarea, notele de subsol,
cuprinsul, trimiterile bibliografice.
Un design bine conceput va furniza utilizatorilor posibilitatea
navigarii rapide în structura
de documente a site-ului.
Utilizatorii trebuie s se poat întoarce întotdeauna la pagina de
start i la oricare din
punctele importante de navigare.
Cuprinsul, meniurile bine structurate i hrile ce descriu structura
site-ului dau utilizatorului
sigurana c tiu unde se afl în structura hipertext.
Elementele de navigare trebuie s aib o zon fix în cadrul oricrei
pagini a site-ului, s
aib aceeai structur i aspect identic.
2. Etapele procesului de dezvoltare a unei interfee web
www.tic.diferite.ro Tehnologia informaiei i a comunicaiilor
[email protected]
Aspecte de care proiectantul interfeei web trebuie s in cont
• Context
Pentru a realiza un context consistent, proiectantul site-ului Web
trebuie s ierarhizeze
informaia în funcie de relevana acesteia: structura liniara pentru
informaia cu acelai grad
de relevan, hiperlegaturi ctre informaiile subordonate, ctre
cuprins, glosare de termeni
sau indexuri de notiuni.
Utilizatorul va trebui s aiba permanent la dispozitie elementele de
navigare care sa-i permita
parcurgerea materialului in ordinea prestabilita.
• Accesul direct si rapid
Pentru a atrage utilizatorii experi i utilizatorii care s devin
vizitatori frecveni.
Pe lang proiectarea atent a meniurilor i listelor de opiuni, va
trebui s inem cont i de
viteza de încrcare a paginilor site-ului, realizând un compromis
între paginile cu elemente
multimedia i cele cu informaii de tip text.
Alegerea se va face i în funcie de calitile serverului ce va gzdui
site-ul Web
2. Etapele procesului de dezvoltare a unei interfee web
www.tic.diferite.ro Tehnologia informaiei i a comunicaiilor
[email protected]
Aspecte de care proiectantul interfeei web trebuie s in cont
• Stabilitatea interfeei
Elementele de interaciune cu utilizatorul fiind puine, utilizate
consecvent, în toate paginile.
O interfa consistent este aceea care determin crearea unui traseu
mental vizitatorului.
Un set de reguli aplicate consecvent în toate paginile site-ului
dau caracterul de stabilitate
interfeei proiectate
Stabilitatea unui site se manifest i prin meninerea unei bune
funcionri de-a lungul
existenei sale.
• Accesibilitatea site-ului
Se refer la capacitatea acestuia de a oferi servicii de calitate
unei game largi de utilizatori.
De exemplu, nu toi vizitatorii vor putea beneficia de bogia
multimedia oferita de site, fie
pentru c nu le permite conexiunea Internet, fie pentru c au
dizabiliti
Proiectantul trebuie s gândeasc interfaa astfel încat i aceste
categorii de
utilizatori s aib acces la informaie.
2. Etapele procesului de dezvoltare a unei interfee web
www.tic.diferite.ro Tehnologia informaiei i a comunicaiilor
[email protected]
Aspecte de care proiectantul interfeei web trebuie s in cont
• Contactul cu utilizatorul
Trebuie s fie permanent, pentru a putea cunoate dorinele i
trebuinele acestora.
La nivel minimal, interfaa site-ului trebuie s conin, în fiecare
pagina, o legatur ctre
pagina ce conine datele de contact ale organizaiei ce deine site-ul
i ale persoanei sau
departamentului care îl administreaz.
oferite de site-ul respectiv, eventual se realizeaz prin
intermediul unui formular online,
sondaje de opinie.
4. Concluzii
Etapa ce urmeaz proiectrii i evalurii interfeei este cea de
implementare a interfeei
utilizând limbajele stabilite în etapa de analiza a
cerinelor.
Etapa de testare a interfeei poate determina reiterearea întregului
proces de proiectare
în vederea eliminrii erorilor i a extinderii aplicaiei cu noi
funcionaliti.
2. Etapele procesului de dezvoltare a unei interfee web
www.tic.diferite.ro Tehnologia informaiei i a comunicaiilor
[email protected]
Etape pentru încrcarea site-ului
Primul lucru - trebuie s stabilim tipul de site de care avem
nevoie.
Acest lucru se face în funcie de afacerea pe care o deinem i de
scopul crerii site-ului.
Urmatorul pas este achiziionarea unui domeniu.
Numele domeniului va reprezenta business-ul nostru i este important
s fie scurt,
descriptiv i uor de memorat.
Urmatorul pas este achiziionarea hosting-ul (gzduirea
site-ului).
Hosting-ul înseamn o perioada de timp în care închiriem un spaiu de
gzduire pe
discurile de stocare ale unui server care deine o conexiune
permanent la internet.
Urmeaz construirea site-ului în sine.
Este nevoie de o persoana care s se ocupe de design-ul site-ului,
imagini, text i limbaj de
programare.
Optimizarea site-ului pentru motoarele de cautre este foarte
important.
Orice site, indiferent de cât de bine arat sau este fcut, nu
reprezint nici o
valoare sau folos dac nu poate fi gsit pe internet.
2. Etapele procesului de dezvoltare a unei interfee web
www.tic.diferite.ro Tehnologia informaiei i a comunicaiilor
[email protected]
• Editoare de texte si de calcul tabelar :
Word , Excel (salveaza documente ca pagini web)
• Editoare de HTML:
Microsoft Visual Studio Community, Microsoft SharePoint Designer,
Front Page Editor
• Editoare online:
• Editoare de imagini: Adobe Photoshop
Extensii de fiiere care rein imagini sunt: .bmp, .pcx, .gif, .jpg,
.tif, .cdr, .dwg, .ppt
Acestea corespund diferitelor editoare grafice dintre care cele mai
cunoscute enumeram
Paint pentru prelucrarea imaginilor bitmap i CorelDraw pentru
prelucrarea celor vectoriale.
Cele mai cunoscute editoare HTML sunt editorul Netscape, creat de
firma
Netscape Communications si Front Page Editor, creat de firma
Microsoft.
3. Instrumente de lucru pentru crearea site-urilor Web
www.tic.diferite.ro Tehnologia informaiei i a comunicaiilor
[email protected]
Obinerea unei pagini web din word:
• se editeaz un fiier Word în mod obinuit, cu text,imagini, tabele
i celelalte faciliti
cunoscute, chiar i hiperlinkuri
Opiunea este prezent i în PowerPoint sau Excel
pagina va fi salvat cu extensia “html” sau “htm”.
3. Instrumente de lucru pentru crearea site-urilor Web
www.tic.diferite.ro Tehnologia informaiei i a comunicaiilor
[email protected]
Interfaa SharePoint Designer
www.tic.diferite.ro Tehnologia informaiei i a comunicaiilor
[email protected]
Crearea paginilor web on-line
www.tic.diferite.ro Tehnologia informaiei i a comunicaiilor
[email protected]
Pagina web poate fi deschis în 2 moduri
– Cu clic stânga se deschide în modul “vizualizare” , adic în
browser
– Cu clic dreapta i selectarea editorului Notepad sau a programului
cu care a fost creat se
deschide în modul “editare”
• O pagin web scris cu limbajul html poate fi deschis i modificat i
cu alt program
(Word, SharePoint Designer, FrontPage)
Codul surs al paginii web
– atunci când este deschis în browser, se d clic dreapta i Vezi
sursa paginii (View source)
– atunci când este deschis în editare, de exemplu în FrontPage, se
selecteaz Split / Code
3. Instrumente de lucru pentru crearea site-urilor Web
www.tic.diferite.ro Tehnologia informaiei i a comunicaiilor
[email protected]
<!-- --> Comenatriu HTML
<HEAD> </HEAD> Antetul documentului
<TITLE> </TITLE> Titlul documentului
Corpul paginii HTML contine elementele vizibile ale unei pagini
web
BGCOLOR = culoare (Culoarea de fond a paginii)
BACKGROUND = url (Imaginea de fond pentru pagin)
TEXT=culoare (Culoarea textului pe pagin)
LINK=culoare (Culoarea legturiilor nevizitate din pagin)
VLINK=culoare (Culoarea legturiilor vizitate din pagin)
ALINK=culoare (Culoarea legturiilor pe durata clicului executat de
utilizator)
<P> </P> Paragraf <p
align="left|right|center|justify">
<Hn> <Hn> Nivel de subtitlu al documentului (n =
1-6)
<FONT> </FONT>
SIZE=n (Dimensiunea textului este 1-7)
FACE="a,b“ (font_familySpecific fontul: a, dac este disponibil, sau
b)
COLOR=s (Culoarea textului: fie un nume de culoare, fie o valoare
RGB)
<A> </A>
Name=nume (Definiia unei ancore interne)
<HR> Rigl orizontal SIZE=x (înlime); ALIGN=x (aliniere:
left,center,right);
WIDTH=x (lime); COLOR=x (culoare doar pt IE)
<sub></sub> Tagul subscript. Exp: H2O se scrie
H<sub>2</sub>O
<sup></sup> Text exponenial, superscript. Exp: 23 se
scrie 2<sup>3</sup>
<PRE> </PRE> Informaie preformatat
Sectiunea <head> - definete informaii despre documentul
HTML
• <title> - definete titlul documentului ( ce apare în bara
de titlu de la browsere)
• <link> - element ce definete o legtur între un document i o
resurs extern
• <script> - element unde se pot defini coduri
JavaScript
• <style> - element utilizat pentru a defini informatii de
spre stil
• <base > - element ce contine URL-ul default pentru toate
link-urile
• <meta> - definete informaii despre documentul HTML
<meta charset="UTF-8">
<meta name="description" content=“Site ce contine diferite
informatii despre TIC">
<meta name="keywords" content=“TIC, competente digitale,
cursuri">
<meta name="author" content=“Gabriela">
<meta http-equiv="refresh" content="30"> refresh document la
30s
• Informaiile definite cu eticheta nu sunt afiate pe pagina web, ci
sunt disponibile
motoarelor de cutare sau altor servicii web
• Informaiile definite pot fi de tipul: nume autor, cuvinte cheie,
descrierea paginii
Tag-uri de baz în HTML
CSS (Cascading Style Sheets)
• CSS reprezint foi de stil cascad.
• CSS descrie modul în care elementele HTML vor fi afiate pe ecran,
pe hârtie sau pe
alte suporturi media.
• CSS poate fi adugat la elemente HTML în 3 moduri:
– Inline - utilizând atributul style în elemente HTML
– Intern - utilizând un element <style> în seciunea
<head>
– Extern - prin utilizarea unui fiier extern CSS
Tag-uri de baz în HTML
www.tic.diferite.ro Tehnologia informaiei i a comunicaiilor
[email protected]
Marcaje pentru liste
<DD> Descriere definiie
<DT> Termen de definiie
<LI> Element de list
posibile: A, a, I, i, 1
START=x Numrul de început al
listei ordonate
www.tic.diferite.ro Tehnologia informaiei i a comunicaiilor
[email protected]
Formatarea caracterelor
aldine
cursive
<TT> </TT> Text cu font monospaiu
<CITE> </CITE> Citare bibliografic
<STRONG>
</STRONG>
<BASEFONT SIZE
headere)
www.tic.diferite.ro Tehnologia informaiei i a comunicaiilor
[email protected]
Adugarea imaginilor
SRC=url Sursa fiierului grafic
ALT=text Textul alternativ de afiat, dac este
necesar
posibile: top (sus), middle (în mijloc),
bottom (jos), left (în stânga), right (la
dreapta)
WIDTH=x Limea imaginii
hiperlegtur
jurul imaginii (în pixeli)
jurul imaginii (în pixeli)
www.tic.diferite.ro Tehnologia informaiei i a comunicaiilor
[email protected]
Marcaje pentru tabele
CELLSPACING=x Spaiul suplimentar între celulele tabelului
WIDTH=x Limea impus tabelului
BORDERCOLOR =
culoare Specific culoarea chenarului tabelului
ALIGN=left | right Aliniaz tabelul la marginea din stânga / dreapta
a
paginii, iar textul curge în partea dreapt/stâng
BORDER-COLLAPSE=
chenar sau din chenare individuale
HSPACE=x Spaiu suplimetar pe orizontal în jurul tabelului
VSPACE=x Spaiu suplimetar pe vertical în jurul tabelului
COLS=x Specific numrul de coloane ale unui tabel
<COLGROUP>
</COLGROUP>
marcajului <col>
<COL WIDTH=x> Definete limea unei coloane exprimat în
pixeli
<THEAD> </THEAD> Definete titlul tabelului
<TBODY> </TBODY> Definete corpul tabelului
<FOOT></TFOOT> Defineste subsolul tabelului
Tag-uri de baz în HTML
Marcaje pentru tabele
BGCOLOR= culoare Specific culoarea de fond pentru întreaga
linie
ALIGN=aliniere Alinierea celulelor de pe linia curent (left,
center,
right)
BGCOLOR= culoare Specific culoarea de fond pentru celula de
date
COLSPAN=x Numrul de coloane pe care se întinde celula
curent de date
ROWSPAN=x Numrul de linii pe care se întinde celula curent
de date
date.Valori posibile: (left, right, center)
VALIGN=aliniere
celulei de date.Valori posibile: (top, bottom,
middle)
unei celule
ALIGN=baseline |
caracter | justify
Aliniaz celule de date cu linia de baz a textului
adiacent
(caracterul prestabilit e ".")
dreapta a unui text
www.tic.diferite.ro Tehnologia informaiei i a comunicaiilor
[email protected]
HTML – Frames Pagina Generica
• In general frame-urile se folosesc pentru a afisa un meniu pe de
o parte iar continutul pe
de o alta parte. Atunci cand cineva da un clik pe un link din meniu
se va deschide o alta
pagina in partea de continut. Vom exempifica toate acestea cu
ajutorul codului urmator:
• frameset - Este tagul care stabileste caracteristicile
frame-ului. Frame-urile individuale
vor fi definite i nauntrul lui.
• frameset cols="#%, *" - "Cols" stabileste inaltime pe care
fiecareframe o va avea. In
exemplul anterion am stabilit ca primul frame (meniul) va ocupa 30%
din suprafata
afisata, si am folosit semnul " * " pentru a indica browser-ului ca
in restul paginii ramase
se va afisa continutul paginii.
• frame src="" - adresa fisierelor care vor fi afisate ca meniu si
respectiv continut.
Exemplu 1
Exemplu 2
www.tic.diferite.ro Tehnologia informaiei i a comunicaiilor
[email protected]
HTML - Frame- Adaugarea unui banner sau Titlu
• Folositi codul urmator:
• frameset rows="#%, *"- "rows" stabileste inaltimea fiecarui frame
care va fi afisat.
In exemplul anterior am ales ca primul frame va fi 20% iar restul
de spatiu ramas va fi
impartit intre menu.html si content.html.
Tag-uri de baz în HTML
www.tic.diferite.ro Tehnologia informaiei i a comunicaiilor
[email protected]
Marcaje pentru cadre
COLS=x Numrul i mrimea relativ a coloanelor
ROWS=x Numrul i mrimea relativ a liniilor
BORDER=x Specific starea "on" (activ) sau "off" (inactiv) pentru
chenarul cadrului
FRAMESET (1 sau 0)
FRAMESPACING = x Mrimea spaiului dintre dou cadre adiacente
<FRAME> Definiia unui anumit cadru
SRC=url URL-ul surs pentru cadru
NAME=nume Numele cadrului (utilizat împreun cu TARGET=nume ca
parte
component a marcajului de tip ancor<a>
SCROLLING=scrl Definete opiunea barei de derulare.Valori posibile:
on(activ),
off(inactiv), auto (automat)
FRAMEBORDER=x Mrimea chenarului din jurul cadrului
MARGINHEIGHT=x Spaiul suplimentar de deasupra i dedesubtul unui
anumit cadru
MARGINWIDTH=x Spaiu suplimetar la stânga i la dreapta unui anumit
cadru
<NOFRAMES> </NOFRAMES> Seciunea de pagin afiat pentru
utilizatorii care nu pot vedea un cadru
<IFRAME> Cadru intern (numai pentru IE)
SRC=url Sursa cadrului
HEIGHT=x Întimea cadrului înglobat
WIDTH=x Limea cadrului înglobat
Tag-uri de baz în HTML
Tabel diacritice
• Limba român folosete cinci litere cu semne diacritice: , â, î, ,
.
• Aspectul i denumirea acestor semne sunt artate în tabelul de mai
jos.
• cciul
 â Î î accent circumflex;
virgul, plasat sub literele corespunztoare s, S, t, T.
valoare cod
â
Â
î
Î
www.tic.diferite.ro Tehnologia informaiei i a comunicaiilor
[email protected]
Concluzii
Limbajul HTML este un limbaj ce permite descrierea paginilor
web.
• HTML = Hyper Text Markup Language
• HTML nu este un limbaj de programare, ci un limbaj de
descriere
• Un limbaj de descriere = un set de etichete de descriere
• HTML utilizeaz etichete de descriere pentru a defini pagini
web
• Extensia .HTM sau .HTML
• Culegerea datelor necesare,ierarhizarea informaiilor,realizarea i
documentarea
aplicaiei;
• Proiectarea i realizarea designului general al documentului
hipermedia, utilizând
formatare text la nivel de caracter, paragraf, seciune, inserarea
hiperlegturilor, listelor,
tabelelor, cadrelor, obiectelor hipermedia: imagini, secvene audio
i video;
• Modaliti de adaptare a prezentrii aplicaiei realizate la
scopurile prezentrii;
• Publicare i testare;