C4 Dezv Apl Web 2021

Imagini
Tipuri de fişiere, care pot fi folosite în

cadrul paginilor web:
• GIF – (Graphic Interchange Format), a fost introdus de

Compuserve. Oferă o compresie fără pierderi, maxim 256 de
culori (adâncime de culoare de 8 biţi). Pot fi animate şi pot
avea un fundal transparent, ceea ce le face uşor de plasat în
pagină.
• JPEG (Joint Photographic Expert Group) – oferă o
compresie variabilă. Este utilizat adesea pentru fotografii
cu adâncime de culoare de 24 de biţi. Are ca rezultat
pierderea detaliilor fotografiei. Nu are transparenţă.
• PNG – (Portable Network Graphic) este un format mai nou
care se aseamănă cu GIF, dar este mult mai flexibil. Permite
adâncimi de culoare de 8 sau 24 de biţi, fără animaţie.
• SWF - format flash, permite animaţie ce poate fi
vizualizată în browser
<img src="numele imaginii.extensie">
• Observaţie
Imaginea va fi afişată doar dacă
pagina respectivă va fi în acelaşi
folder cu imaginea pe care doriţi să o
folosiţi.
În caz contrar imaginea nu va fi
afişată.
Atribute
• alt= text specifică un text alternativ,
care va fi afişat de browserele ce nu pot
vizualiza imagini ;
• height= dimensiune (în pixeli sau %)
defineşte înălţimea imaginii ;
• width= dimensiune (în pixeli sau %)
defineşte lăţimea imaginii ;
• border = număr – imaginea va fi
încadrată de un chenar cu grosimea
specificată în număr de pixeli ;
Atribute
• hspace = dimensiune, specifică spaţiul inserat în
stânga şi în dreapta imaginii ;
• vspace = dimensiune, specifică spaţiul inserat în
partea de sus şi în partea de jos a imaginii ;
• align= valoare, specifică modul de aliniere a
imaginii în raport cu textul. Valoarea poate fi:
– top (partea de sus a imaginii este aliniată în raport cu
textul);
– middle (imaginea este aliniată centrat în raport cu
textul);
– bottom (aliniere la bază; partea de jos a imaginii se
aliniază cu linia de bază a textului);
– left (imaginea este aliniată la marginea din stânga a
paginii);
– right (imaginea este aliniată la marginea din dreapta a
paginii).
<html><head><title>Exemple de pozitionare a
imaginii</title></head>
<body>
<h3>Inserarea imaginii in document</h3>
Un exemplu de pozitionarea implicita a textului
<img src="poze/mai.jpg" width="100" height="100" border="1"
alt="">
este la baza imaginii
<p>Pozitionarea textului
<img src="poze/canta.jpg" width="100" height="100"
border="0" alt="exemplu" align="middle"> pe centrul imaginii
<p>Pozitionarea textului la baza superioara
<img src="Poze/pc.png" width="100" height="100" border="0"
alt="exemplu" align="top"> a imaginii
</body></html>
<html><head><title>Exemple de pozitionare a imaginii</title></head>
<body>
<h3>Inserarea imaginii in document</h3>
<img src="Poze/doi.jpg" width="100" height="100" border="0" align="left"
alt="">
Imaginea este <br>
pozitionata in stanga documentului, lasand textul<br>
sa ocupe spatiul liber din dreapta.<br clear="left">
Acest pasaj este fortat sa coboare sub imagine!
<p>
<hr>
<img src="poze/unu.jpg" width="100" height="100" border="0" align="right"
alt="">
Imaginea este <br>
pozitionata in dreapta documentului, lasand textul sa ocupe spatiul liber din
stanga.<br clear="right">
Acest pasaj este fortat sa coboare sub imagine!
</body>
</html>
<HTML><HEAD><TITLE>Exemplu</TITLE>
<BODY><FONT face=”Times New Roman” color=#0000ff>
<CENTER><B>Introducere</B></CENTER></FONT><BR>
<IMG hspace=20 src="jump.gif" align=left vspace=20 border=2>
<FONT face=”Arial” color=#ff0000>Se va realiza analiza, în
regim permanent, a circuitelor alimentate în curent
alternativ. Se vor deduce ecuatiile caracteristice ale
elementelor ideale R, L si C functie de amplitudinile în
complex si se va prezenta conceptul de impedanta complexa.
Se vor analiza circuitele RL serie si RC serie,
determinânduse tensiunile si curentii prin metoda
amplitudinilor complexe. Generalizarea conectarii
impedantelor se va face prin deducerea din conectarea
rezistentelor.</FONT>
<BR></BODY></HTML>
<HTML>
<HEAD>
<TITLE>Lista personalizata</TITLE>
</HEAD>
<BODY>
<UL>
<p>Universitatea <b>Aurel Vlaicu</b> are urmatoarele facultati::
</p>
<IMG SRC="hexa.gif"> &nbspFacultatea de Stiinte Exacte
<BR><IMG SRC="hexa.gif"> &nbspFIATPM
<IMG SRC="hexa.gif"> &nbspFacultatea de Stiinte Umaniste
<BR>
<IMG SRC="hexa.gif"> &nbspFacultatea de Inginerie
<BR>
<IMG SRC="hexa.gif"> &nbspFacultatea de Stiinte Economice
</p>
</UL>
</BODY></HTML>
Utilizarea unei imagini ca legătură
Dacă doriţi să utilizaţi o imagine ca legătură va trebui

scrieţi adresa imaginii între tag-urile <a> … </a>
<a href=fisier.html><img src="adresa imaginii"</a>
Exemplu 1
<html>
<head>
<title> Imagini folosite ca legaturi</title>
</head>
<body><h4>Imagine folosita ca legaturi</h4>
Un text oarecare.<a href="index.html">
<img src="Poze/info.gif"></a>
Un text oarecare.
</body></html>
URL relativ
• Dacă fişierul curent este
"index.html", pentru a referi
fişierul "poza3.gif" se foloseşte
expresia "Poze/ poza3.gif.
• Daca fişierul curent este
"poza3.gif" pentru a referi
fişierul "index.html" se
foloseşte expresia
"../index.html".
• Daca fişierul curent este
"poza1.gif", pentru a referi
fişierul "fisier2.html" se
foloseşte expresia
"../Ing/fisier2.html".
Hărţi de imagini
Permit ca diferite zone ale unei
imagini să fie definite drept legături
către alte diverse pagini Web
Etape
1. Definirea unei imagini ca “hartă de
imagini”
<img> cu atrib:
src=URL-ul imaginii folosite
usemap=#numele_hărţii
2. Definirea hărţii
<map> ….</map>
Atrib:
name=numele_hărţii (obligatoriu)
Zonele hărţii vor fi definite cu tag-ul <area>
ce are 3 atrib obligatorii
• Shape=rect, poly, circle, default
• Coords
• Href=URL-ul paginii indicate de legătura
zonei respective
• [target] numele unei instanţe a
browserului în care va fi afişată
pagina către care indică legătura
zonei respective.
Inserarea sunetelor și
a videoclipurilor
• Suportul pentru sunete, animaţii şi video este tratat în
mod diferit de browsere.
• Unele elemente pot fi manevrate intern, altele necesită
anumite plug-in-uri, în vreme ce altele pot solicita
activarea anumitor controale ActiveX.
• Elementele multimedia (precum sunetele şi video) sunt
stocate în fişiere media.
• Modalitatea cea mai simplă de a determina tipul unui
fişier media este de a analiza extensia fişierului
respectiv .
Formatul fişierelor multimedia
ce conţin sunete
• Formatul MIDI (Musical Instrument Digital Interface) este un format ce
permite transmiterea de informaţii muzicale între dispozitive electronice
muzicale (precum sintetizatoare) şi plăcile de sunet ale calculatoarelor
• Fişierele de tip MIDI au extensia .mid sau .midi.
• Fişierele MIDI nu conţin sunete, ci un set de instrucţiuni digitale muzicale
(note muzicale) care pot fi interpretate de plăcile de sunet ale
calculatoarelor.
Avantaje
• mărimea mică a acestor fişiere
• este foarte flexibil
• acest format este suportat de majoritatea sistemelor de operare şi de cele
mai populare browsere
Dezavantaje la acest tip de fişiere constă în faptul că
• nu pot stoca muzică (în toată complexitatea ei), ci doar note muzicale.
Formatul RealAudio
•fişierele de tip RealAudio au extensia .rm sau .ram
•a fost dezvoltat pentru Internet de către Real Media.
•acest format suportă chiar şi video.
•permite difuzarea de informaţii audio (muzică on-line,
Internet radio) cu lăţime de bandă joasă. Din cauza
acestei lăţimi de bandă, calitatea este, de cele mai multe
ori, slabă.
Formatul AU
• fişierele au extensia .au.
• dezvoltat de către Sun Microsystems
• este suportat de majoritatea sistemelor de
operare.
Formatul AIFF (Audio Interchange File Format)
• au extensia .aif sau .aiff.
• dezvoltat de către Apple.
• nu sunt suportate de toate browser-ele.
Formatul SND (Sound)

• au extensia .snd
• dezvoltat de către Apple
• nu sunt suportate de toate browserele.
Formatul WAVE
•WAVE (waveform) a fost dezvoltat de către IBM
şi Microsoft.
•este un format suportat de toate computerele pe
care rulează Windows şi este recunoscut de
majoritatea browserelor.
•fişierele de tip WAVE au extensia .wav.
Formatul MP3
• sunt de fapt fişiere MPEG, dezvoltate iniţial
pentru video de către Moving Pictures Experts
Group.
• fişierele MP3 reprezintă partea de sunet dintr-un
fişier video în format MPEG.
• sistemul de codificare MP3 combină o bună
compresie (ce duce la fişiere mici) cu o calitate
înaltă.
Formatul MP4
• MP4 nu este o evolutie a MP3
• este un container de clipuri video şi multe alte formate
de mass-media
• MP4 este cel mai frecvent utilizat pentru a stoca
formate video și audio, dar poate fi de asemenea utilizat
pentru a stoca și subtitrări, imagini statice,
și streaming pe internet.
• MP4 este un format protejat care folosește tehnologia
DRM (Digital Rights Management) pentru a restricționa
copierea.
Inserarea fișierelor audio
Tag-ul <audio> se foloseste pt. a adăuga sunet în pagină.

Atribute:
•autoplay autoplay="autoplay" – sunetul va începe automat.
•controls (controls="controls") - controalele audio (play/ pauză, etc.)
vor fi afișate.
•loop (loop="loop") - muzica va începe din nou după ce se termină.
•src (src="url") - adresa URL a fișierului audio.
•Elementul <audio> foloseste tag-ul <source> ca să specifice sursa
fișierului audio și fișiere alternative pentru diferențele dintre browsere
(tipul de codec recunoscut)
<!DOCTYPE html>
<html>
<body>
<audio controls="controls">
<source src="audio/melodie.mp3"
type="audio/mpeg " >
Browser-ul nu suporta elementul audio.
</audio>
</body> </html>
Formatul fişierelor multimedia ce conţin video
Formatul AVI (Audio Video Interleave)

•a fost dezvoltat de către Microsoft.
•suportat de toate computerele pe care rulează Windows
•este recunoscut de majoritatea browsere-lor.
•deşi este un format des întâlnit pe Internet, nu este
întotdeauna suportat de calculatoarele cu sisteme de
operare non-Windows.
•fişierele au extensia .avi.
• Formatul Windows Media
• a fost dezvoltat de către Microsoft și este unul

suportat de toate computerele pe care rulează
Windows,
• dar nu este suportat de calculatoarele cu sisteme de
operare non-Windows decât în urma instalării unor
extra componente (playere specializate).
• fişierele au extensia .wmv.
Formatul MPEG (Moving Pictures Expert Group)
•este unul dintre cele mai populare formate folosite pe

Internet.
•este suportat de majoritatea sistemelor de operare şi de
cele mai populare browsere
•fişierele de tip MPEG au extensia .mpg sau .mpeg.
Formatul QuickTime
•fişierele de tip QuickTime au extensia .mov sau .qtm.
•a fost dezvoltat de către Apple
•nu poate rula pe platformele Windows fără instalarea
unui player specializat.
Formatul RealVideo
•a fost dezvoltat pentru Internet de către Real Media
•formatul permite difuzarea de informaţii video (video on-
line, Internet video) cu lăţime de bandă joasă. Din cauza
acestei lăţimi de bandă, calitatea este, de cele mai multe
ori, slabă.
•fişierele au extensia .rm sau .ram.
<video> - folosit pt. a adauga în pagina web video clipuri și alt
conținut video.
Atribute:
•autoplay (autoplay="autoplay") - videoclip-ul va începe automat.
•controls (controls="controls") - butoanele de control vor fi afișate.
•height (height="pixeli") – înălțimea player-ului, în pixeli.
•width (width="pixeli") - lungimea player-ului, în pixeli.
•muted (muted="muted") - sunetul din film va fi pe mut, nu e redat.
•poster (poster="URL") - specifică o imagine care să fie afișată în
timp ce filmul se încarcă, sau până când e apasăt butonul play. Dacă
acest atribut nu e adăugat, va fi afișat primul cadru din film.
•loop (loop="loop")
•src (src="url") - adresa URL a fisierului video.
<source>- sursa fișierului video

Fișiere video de pe Youtube
Codul ce trebuie inserat se găsește accesând

Share » Embed.
Ex.
<!DOCTYPE html>
<html>
<body>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/ItaFff2Y2O0"
frameborder="0" allowfullscreen></iframe>
</body>
</html>
HTML5 embed tag
<embed> se folosește pentru a adăuga în pagina aplicații
cu conținut interactiv, cum sunt prezentările flash SWF,
plug-inuri, sau fișiere cu imagini.
Poate să folosească atributele:
•height (height="pixeli") - Inaltimea cadrului in care este
afișat conținutul, in pixeli.
•width (width="pixeli") - Lungimea cadrului in care este
afișat conținutul, in pixeli.
•type (type="MIME_type") - Tipul MIME al conținutului.
•src (src="url") - Adresa URL a fișierului.
Ex.
<embed src="flash_game.swf" height=“150" width="150“/>

C4 Dezv Apl Web 2021

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

C4 Dezv Apl Web 2021

Încărcat de

Drepturi de autor:

Formate disponibile

Imagini

Tipuri de fişiere, care pot fi folosite în

• GIF – (Graphic Interchange Format), a fost introdus de

Dacă doriţi să utilizaţi o imagine ca legătură va trebui

Formatul SND (Sound)

Tag-ul <audio> se foloseste pt. a adăuga sunet în pagină.

Formatul AVI (Audio Video Interleave)

• a fost dezvoltat de către Microsoft și este unul

•este unul dintre cele mai populare formate folosite pe

<source>- sursa fișierului video

Codul ce trebuie inserat se găsește accesând

S-ar putea să vă placă și