html
DESCRIPTION
HTML. Hypertext Hypermedia World Wide Web Browser Inserarea imaginilor Introducerea legăturilor în pagina web Tagul body. Hypertext. - PowerPoint PPT PresentationTRANSCRIPT
HTMLHTMLHypertextHypertextHypermediaHypermediaWorld Wide WebWorld Wide WebBrowserBrowserInserarea imaginilorInserarea imaginilorIntroducerea legăturilor în pagina webIntroducerea legăturilor în pagina webTagul bodyTagul body
HypertextHypertext
Este un material sub formEste un material sub formă de text sau ă de text sau imagine, interconectat întro manieră imagine, interconectat întro manieră complexă, nesecvenţială de asociaţii, în complexă, nesecvenţială de asociaţii, în care utilizatorul poate naviga , căuta care utilizatorul poate naviga , căuta informaţii referitoare la un obiect.informaţii referitoare la un obiect.
HypermediaHypermedia
Este un termen aproape sinonim celui de Este un termen aproape sinonim celui de hypertext, singura deosebire fiind faptul că hypertext, singura deosebire fiind faptul că subliniază prezenţa şi a unor elemente care subliniază prezenţa şi a unor elemente care nu sunt de tip text, cum ar fi animaţii, nu sunt de tip text, cum ar fi animaţii, secvenţe sonore sau secvenţe video.secvenţe sonore sau secvenţe video.
World Wide WebWorld Wide Web(Web)(Web)
Ansamblul documentelor de natură Ansamblul documentelor de natură hypertextdistribuite die pe Internet , fie în hypertextdistribuite die pe Internet , fie în reţele locale. Aceste documente distribuite reţele locale. Aceste documente distribuite pe Web(numite şi pagini web) sunt scrise în pe Web(numite şi pagini web) sunt scrise în limbajul HTML.limbajul HTML.
BrowserBrowser
Aplicaţie (client) care permite unui utilizator Aplicaţie (client) care permite unui utilizator să vizualizeze documente HTML de pe să vizualizeze documente HTML de pe Web, să navigheze urmărind legăturile Web, să navigheze urmărind legăturile dintre ele şi să transfere fişiere. Aceste dintre ele şi să transfere fişiere. Aceste aplicaţii afişează atât textul cât şi grafica din aplicaţii afişează atât textul cât şi grafica din aceste documente, redau fişierele audio şi aceste documente, redau fişierele audio şi video înglobate în documente.video înglobate în documente.
DefiniţieDefiniţie
Un document html este o succesiune de blocuri de informaţie . Aceste blocuri pot fi incluse unul în altul. Un bloc este delimitat de simboluri speciale, numite tag –uri
Exemple : <html>, <head>,<title>,<body> </html>, </head>,</title>,</body>
Inserarea imaginilorInserarea imaginilor
FiFişierele GIF-şierele GIF- sunt imagini ce folosesc cel sunt imagini ce folosesc cel mult 256 culori şi sunt indicate pentru mult 256 culori şi sunt indicate pentru imagini de dimensiuni mici (ca dimensiune a imagini de dimensiuni mici (ca dimensiune a fişierului, nu ca suprafaţă) care nu necesită fişierului, nu ca suprafaţă) care nu necesită o adâncime mare de culoare. Aceste este o adâncime mare de culoare. Aceste este formatul cel mai răspândit pe web.formatul cel mai răspândit pe web.
Facilităţi ale formatului GIFFacilităţi ale formatului GIF
Imagini întreţesute, adică imagini care apar Imagini întreţesute, adică imagini care apar integral în pagina web, dar,pe măsură ce integral în pagina web, dar,pe măsură ce sunt încărcate , claritatea lor creştesunt încărcate , claritatea lor creşte
Imagini transparente, care nu au culoare de Imagini transparente, care nu au culoare de fond , astfel încât ceea ce se află în spatele fond , astfel încât ceea ce se află în spatele devine parţial vizibildevine parţial vizibil
Imagini animate- fişiere imagine speciale ce Imagini animate- fişiere imagine speciale ce conţin o succesiune de imagini afişate conţin o succesiune de imagini afişate periodic în pagina webperiodic în pagina web
Fişierele JPGFişierele JPG
Sunt imagini ce folosesc până la 16,7 Sunt imagini ce folosesc până la 16,7 milioane de culori şi de aceea sunt indicate milioane de culori şi de aceea sunt indicate pentru imagini mai fine, ce necesită claritate, pentru imagini mai fine, ce necesită claritate, adâncime, dar aceste imaginiau, de obicei, adâncime, dar aceste imaginiau, de obicei, şi dimensiuni mai mari şi atunci se încarcă şi dimensiuni mai mari şi atunci se încarcă mai greu.mai greu.
TagTag--ul ul <<IMGIMG>>
< img src = “…” alt = “……” < img src = “…” alt = “……” border = “…...”width = “…...” border = “…...”width = “…...” height =“…….” align =“…….” >height =“…….” align =“…….” >
SRCSRC== Stabil Stabileşte sursa(source) imaginii ce trebuie eşte sursa(source) imaginii ce trebuie încărcatăîncărcată
ALT= stabileşte textul(de obicei explicativ) ce va fi ALT= stabileşte textul(de obicei explicativ) ce va fi afişat de browser atunci când vizitatorul plasează afişat de browser atunci când vizitatorul plasează pointer-ul mouse-ului deasupra imaginiipointer-ul mouse-ului deasupra imaginii
BORDER = dimensiunea bordurii ce va fi desenat BORDER = dimensiunea bordurii ce va fi desenat în jurul imaginiiîn jurul imaginii
WIDTH = lungimea în pixeli a imagiinii dacă WIDTH = lungimea în pixeli a imagiinii dacă cunoaşteţicunoaşteţi
HEIGHT=înălţimea în pixeli a imaginii dacă HEIGHT=înălţimea în pixeli a imaginii dacă cunoaşteţicunoaşteţi
ALIGN= stabileşte alinierea imaginii în cadrul ALIGN= stabileşte alinierea imaginii în cadrul paginii web (left, right, top, middle, bottom)paginii web (left, right, top, middle, bottom)
Introducerea legăturilor în pagina webIntroducerea legăturilor în pagina web Crearea de legături între paginile HTMLCrearea de legături între paginile HTML<a href = “…….” >text sau imagine pe post de <a href = “…….” >text sau imagine pe post de
link </a>link </a>EX: <a href = “pagina2.html” >cEX: <a href = “pagina2.html” >căătre pagina 2 tre pagina 2
</a></a>
Crearea ancorelorCrearea ancorelor <a name=“nume_ancora”> text pe <a name=“nume_ancora”> text pe
post de ancora</a>post de ancora</a> <a href=“#nume_ancora”>mergi la <a href=“#nume_ancora”>mergi la
….</a>….</a>EX : <a name=“top”> inceputul EX : <a name=“top”> inceputul
paginii</a>paginii</a> <a href=“#top”> mergi la inceputul <a href=“#top”> mergi la inceputul
paginii </a>paginii </a>
Link-uri externe la diverse site-uriLink-uri externe la diverse site-uri
<a href=“http://www.edu.ro”>Ministerul <a href=“http://www.edu.ro”>Ministerul Educatiei</a>Educatiei</a>
Atenţie:Atenţie:Trebuie sTrebuie săă preci precizăm protocolul zăm protocolul httphttp
Tagul Tagul <body>cu atribute noi<body>cu atribute noi
<body text =“…..” bgcolor=“……” <body text =“…..” bgcolor=“……” background=“….” link=“…..” background=“….” link=“…..” alink=“…..” vlink=“…..”> alink=“…..” vlink=“…..”> …….</body>…….</body>
TEXT= specificTEXT= specifică culoarea generală pentru ă culoarea generală pentru textul din pagină fie prin numele ei fie prin textul din pagină fie prin numele ei fie prin cod - asta numai cod - asta numai dacdacă nu avem (ă nu avem (<<font font color=“…..”color=“…..”>>))
BGCOLOR = culoare fundal paginăBGCOLOR = culoare fundal pagină BACKGROUND = imagine pentru fundalul BACKGROUND = imagine pentru fundalul
paginiipaginii LINK = specifică culoarea pentru link-uriLINK = specifică culoarea pentru link-uri ALINK = specifică culoarea pentru link-urile ALINK = specifică culoarea pentru link-urile
activeactive VLINK = specifică culoarea pentru link-urile VLINK = specifică culoarea pentru link-urile
vizitatevizitate
Sunete Sunete în pagina WEBîn pagina WEB
• Ca muzică de fundalCa muzică de fundal• Ca element al paginiiCa element al paginii• De multe ori este folosit un program De multe ori este folosit un program
suplimentar numit aplicaţie helper (plug - in)suplimentar numit aplicaţie helper (plug - in)
Tipuri de fişiere de sunet pentru Tipuri de fişiere de sunet pentru WEBWEB
Extensii:Extensii:.midi ; .mid ; waw ; au ; aif ; aiff ; mp3 ; mpeg; ra ; .midi ; .mid ; waw ; au ; aif ; aiff ; mp3 ; mpeg; ra ;
ram ; rpm ; swa ram ; rpm ; swa Ex:Ex: <<a hrefa href=”beatles.mid”>Asculta !</a>=”beatles.mid”>Asculta !</a>
<bgsound src= “eminem.mp3” loop=“infinite”><bgsound src= “eminem.mp3” loop=“infinite”>
Atributele elementulu bgsoundAtributele elementulu bgsound
Src=locatia fisierului de Src=locatia fisierului de sunetsunet
VolumeVolume == regreglleazează volumul ă volumul (0; -1000)(0; -1000)
loop loop = “infinite” sau “n”= “infinite” sau “n”
Inserarea unui video -clipInserarea unui video -clip
Extensii:Extensii: .mpeg ; .mpg ; .avi; .mov.mpeg ; .mpg ; .avi; .mov Ex:Ex: <a href=“8miles.avi”>videoclip</a><a href=“8miles.avi”>videoclip</a>
Inserarea video –Inserarea video – clip-ului direct clip-ului direct în pagina WEBîn pagina WEB<img dynsrc=“aliensong.mpg” loop =“3” <img dynsrc=“aliensong.mpg” loop =“3”
start= “mouseover” src=“planet.gif” start= “mouseover” src=“planet.gif” alt=“aliensong” controls>alt=“aliensong” controls>
Dynsrc= URL-ul fisierului video- clipDynsrc= URL-ul fisierului video- clipLoop= nr.de repetLoop= nr.de repetări (infinite sau n)ări (infinite sau n)Start Start =momentul in care incepe video- clipul=momentul in care incepe video- clipul(fileopen sau mouseover)(fileopen sau mouseover)Controls= defineste controlul playback ce Controls= defineste controlul playback ce
apare in fata imaginiiapare in fata imaginiiLoopdelay= stabileste intervalul de Loopdelay= stabileste intervalul de
timp(milisec)intre doua reluari succesivetimp(milisec)intre doua reluari succesive
Elementul ObjectElementul Object
<object data=“8miles.avi” <object data=“8miles.avi” type=“video/msvideo” height=“150” type=“video/msvideo” height=“150” width=“150”><param name=“autostart” width=“150”><param name=“autostart” value=“true”>Trebuie instalat un plug -value=“true”>Trebuie instalat un plug -in<object>in<object>