proiectarea documentelor hipermedia

37
Proiectarea documentelor hipermedia

Upload: others

Post on 29-Mar-2022

17 views

Category:

Documents


0 download

TRANSCRIPT

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;