Home >Documents >Ini›iere ®n programare web - .3. Inserarea imaginilor Exemplu: •Right...

Ini›iere ®n programare web - .3. Inserarea imaginilor Exemplu: •Right...

Date post:29-Aug-2019
Category:
View:217 times
Download:0 times
Share this document with a friend
Transcript:
  • Inițiere în programare web

    Colegiul National Ecaterina Teodoroiu din Targu Jiu

    Adrian Runceanu 2016

  • copyright@www.adrian.runceanu.ro

    Limbajul HTML (partea II)

    25.10.2016 2Tehnologii Web

  • copyright@www.adrian.runceanu.ro

    Aspecte generale ale HTML

    Atribute HTML  Elementele HTML pot avea atribute:

    1. Atribute obligatorii 2. Atribute opţionale

    Atributele furnizează informaţii suplimentare despre un anumit element HTML

    Atributele sunt specificate în eticheta de start a unui element HTML

    Atributele sunt specificate prin intermediul perechii nume/valoare:

    nume="valoare“ Exemplu:

    Acest paragraf este aliniat la

    stanga.

    25.10.2016 3Tehnologii Web

  • copyright@www.adrian.runceanu.ro

    Aspecte generale ale HTML

    Atribute HTML (continuare) Reguli XHTML, XML şi versiuni viitoare de HTML

    1. Toate elementele HTML trebuie închise

    2. Elementele vide se închid prin adăugarea semnului “/” în eticheta de start (exemplu:
    se scrie corect

    3. Etichetele HTML sunt scrise cu minuscule, deşi ele nu sunt “case sensitive”

    25.10.2016 4Tehnologii Web

  • copyright@www.adrian.runceanu.ro

    Aspecte generale ale HTML

    25.10.2016 5Tehnologii Web

    Etichete(tag-uri) de bază Semnificatie

    Specifica un document de tip HTML

    Specifica corpul unui document HTML

    to Specifica titlul unei secţiuni din document

    Specifica un paragraf


    Specifica trecerea la linie nouă

    Specifica un comentariu

  • copyright@www.adrian.runceanu.ro

    Aspecte generale ale HTML

    25.10.2016 6Tehnologii Web

    Elemente de tip informatie Semnificatie

    Defineşte informaţii despre documentul HTML

    Defineşte titlul documentului

    Defineşte informaţii despre documentul HTML

    Defineşte adresa predefinită sau ţinta predefinită pentru toate legăturile din pagină

    Specifica legatura catre fisierul CSS (care defineste stilurile de formatare)

  • copyright@www.adrian.runceanu.ro

    Limbajul HTML (partea II)

    3. Inserarea imaginilor 4. Inserarea legăturilor în documente HTML

    4.1. Elementul a 4.2. Elementul link 4.3. Elementul base

    5. Liste 5.1. Lista ordonată 5.2. Lista neordonată 5.3. Lista de tip definiţie 5.4. Utilizari speciale ale listelor

    25.10.2016 7Tehnologii Web

  • copyright@www.adrian.runceanu.ro

    3. Inserarea imaginilor

    Imaginile sunt stocate in fisiere cu diverse formate. Formatele acceptate de browsere pentru fisierele imagine sunt:

    • GIF (Graphics Interchange Format) cu extensia .gif • JpEG (Joint photographic Experts Group) cu extensia .jpeg sau .jpg • XpM (X pixMap) cu extensia .xmp • XBM (X BitMap) cu extensia .xbm • BMp (BitMap) cu extensia .bmp (numai cu Internet Explorer) • TIFF (Tagged Image File Format) cu extensia .tif sau .tiff • PNG (Portable Network Graphic) cu extensia .png

    Cele mai raspandite formate sunt: – GIF (8 biti pentru o culoare, 256 culori posibile) si – JPEG (24 biti pentru o culoare, 16777216 de culori posibile).

    25.10.2016 8Tehnologii Web

  • copyright@www.adrian.runceanu.ro

    3. Inserarea imaginilor

    Adresa URL a unei imagini URL ("Uniform Resourse Locator") =

    identificator unic al resursei este un standard folosit in identificarea unica a unei resurse in Internet.

    Toate imaginile cu care vom lucra vor avea adresa URL exprimata in functie de directorul ce contine documentul HTML care face referire la imagine.

    25.10.2016 9Tehnologii Web

  • copyright@www.adrian.runceanu.ro

    3. Inserarea imaginilor

    URL concatenează trei elemente:

    1. Serviciul (protocolul) Internet utilizat pentru accesarea resursei

    2. Identificatorul calculatorului care stochează resursa (host-ul sau gazda)

    3. Identificatorul resursei (fişierului) pe calculatorul gazdă (server)

    25.10.2016 10Tehnologii Web

  • copyright@www.adrian.runceanu.ro

    3. Inserarea imaginilor

    1. Serviciul (protocolul) Internet utilizat pentru accesarea resursei

    Există mai multe metode (protocoale) de acces la informaţia stocată pe un calculator conectat la Internet şi respectiv mai mulţi identificatori de servicii (protocoale): a) http:// protocolul de transfer bazat pe hipertext

    (Hyper Text Transfer Protocol) b) ftp:// protocolul de transfer de fişiere (File Transfer

    Protocol) c) file:// pentru accesul la fişierele stocate pe

    calculatorul local 25.10.2016 11Tehnologii Web

  • copyright@www.adrian.runceanu.ro

    3. Inserarea imaginilor

    2. Identificatorul calculatorului care stochează resursa (host-ul sau gazda) este format din:

    nume_calculator.domeniu_internet

    unde domeniu_internet reprezintă o ramură din structura arborescentă a internetului. Exemple: www.utgjiu.ro www.adrian.runceanu.ro www.scoaladeinformatica.ro

    25.10.2016 12Tehnologii Web

    http://www.utgjiu.ro/ http://www.adrian.runceanu.ro/ http://www.scoaladeinformatica.ro/

  • copyright@www.adrian.runceanu.ro

    3. Inserarea imaginilor

    3. Identificatorul resursei (fişierului) pe calculatorul gazdă (server) Acesta se compune din:  / - reprezintă directorul rădăcină  Cale_relativa / - reprezintă calea relativă spre

    directorul în care se găseşte fişierul destinaţie Nume_fişier - numele fişierului destinaţie  #nume_ancoră - numele unei ancore definite în

    fişierul destinaţie prin . Acest ultim termen este corect pentru metoda de acces http://.

    25.10.2016 13Tehnologii Web

  • copyright@www.adrian.runceanu.ro

    3. Inserarea imaginilor

    3. Identificatorul resursei (fişierului) pe calculatorul gazdă (server) - continuare Exemplu: http://www.runceanu.ro/adrian/index.html#ancora1 unde:  http:// - specifică protocolul utilizat www.runceanu.ro – specifică sistemul numit www

    din domeniul runceanu.ro  /adrian/index.html – reprezintă calea relativă spre

    fişier  #ancora1 – reprezintă o ancoră în fişierul destinaţie

    începând cu care se va afişa pagina în browser 25.10.2016 14Tehnologii Web

    http://www.runceanu.ro/adrian/index.html#ancora1

  • copyright@www.adrian.runceanu.ro

    3. Inserarea imaginilor

    Inserarea imaginilor se poate face cu ajutorul urmatoarelor tag-uri:

    1. - Defineşte o imagine

    2. - Defineşte harta unei imagini

    3. - Defineşte o zonă în cadrul hărţii unei imagini

    25.10.2016 15Tehnologii Web

  • copyright@www.adrian.runceanu.ro

    3. Inserarea imaginilor

    Elementul img se utilizează pentru a ataşa unei pagini o imagine.

    Forma generală a acestui element este:

    Atributele sunt: 1. SRC - identifică fişierul care conţine imaginea respectivă (de tip .jpg, .gif etc.).

    25.10.2016 16Tehnologii Web

  • copyright@www.adrian.runceanu.ro

    3. Inserarea imaginilor

    • În această etapă învăţăm să creăm paginile pe propriul calculator, fără a fi conectaţi la internet.

    • Prin urmare, fişierul care conţine imaginea se va găsi într-un folder oarecare (în exemplul următor el se găseşte în acelaşi folder în care găsim şi fisierul cu extensia .html (cel care conţine pagina).

    • Din acest motiv, sursa nu conţine şi calea, dar, dacă este cazul, calea poate fi conţinută.

    25.10.2016 17Tehnologii Web

  • copyright@www.adrian.runceanu.ro

    3. Inserarea imaginilor

    2. ALIGN - tipul de aliniere - reţine una din valorile de mai jos şi specifică browser-ului modul în care va alinia imaginea în raport cu textul:

    Right, Left, Top, Middle, Bottom Fie fişierul text de mai jos (scris în Notepad).

    • Observăm că am scris un prim paragraf care nu conţine nici o imagine.

    • Apoi, am scris un paragraf care, la început, conţine o imagine apoi text.

    • În final, avem un paragraf numai cu text.

    25.10.2016 18Tehnologii Web

  • 3. Inserarea imaginilor Exemplu:

    • Right – dacă ALIGN reţine această valoare, imaginea se aliniază în dreapta, iar textul care urmează este scris în locul rămas.

    Un paragraf asezat inaintea imaginii

    Se observă cum se aliniează imaginii în al doilea paragraf

    alt text este scris pentru a evidentia alinierea !!

    25.10.2016 19Tehnologii Web

  • 3. Inserarea imaginilor

    • Top – numai primul rând al textului este scris în dreapta imaginii, în partea de sus.

    • Apoi, textul continuă după imagine, ocupând întreaga lăţime a ecranului.

    25.10.2016 20Tehnologii Web

  • 3. Inserarea imaginilor

    • Left – dacă ALIGN reţine această valoare, imaginea se aliniază în stânga, iar textul care urmează este scris în locul rămas.

    25.10.2016 21Tehnologii Web

  • 3. Inserarea imaginilor

    • Middle – numai primul rând al textului este scris în dreapta imaginii, la jumătatea înălţimii ei.

    • Apoi, textul continuă după imagine, ocupând întreaga lăţime a ecranului.

    25.10.2016 22Tehnologii Web

  • 3. Inserarea imaginilor

Embed Size (px)
Recommended