html

Post on 16-Mar-2016

48 Views

Category:

Documents

0 Downloads

Preview:

Click to see full reader

DESCRIPTION

HTML. Hypertext Hypermedia World Wide Web Browser Inserarea imaginilor Introducerea legăturilor în pagina web Tagul body. Hypertext. - PowerPoint PPT Presentation

TRANSCRIPT

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>

top related