Kuvat. Kuvitettu opetusohjelma verkkografiikasta Kuvien lisääminen Web-sivulle

Tag sisältää pakollisen src-attribuutin, jonka arvo on kuvan absoluuttinen tai suhteellinen polku:

Tagille Seuraavat attribuutit ovat käytettävissä:

Attribuutti	Kuvaus, hyväksytty arvo
alt	Alt-attribuutti lisää vaihtoehtoista tekstiä kuvaan. Näytetään paikassa, jossa kuva näkyy ennen sen lataamista tai kun grafiikka on poistettu käytöstä, ja näkyy myös työkaluvihjeenä, kun hiiren osoitinta viedään kuvan päälle. Syntaksi: alt="kuvan kuvaus" . !}
risteytys	Crossorigin-attribuutin avulla voit ladata kuvia toisen verkkotunnuksen resursseista CORS-pyyntöjen avulla. CORS-pyynnöillä kankaalle ladattuja kuvia voidaan käyttää uudelleen. Sallitut arvot: anonyymi - Cross-alkuperän pyyntö tehdään HTTP-otsikon avulla, eikä valtuustietoja lähetetä. Jos palvelin ei anna tunnistetietoja palvelimelle, jolta sisältöä pyydetään, kuva vioittuu ja sen käyttöä rajoitetaan. use-credentials — Cross-origin-pyyntö suoritetaan välittämällä valtuustiedot. Syntaksi: crossorigin="anonymous" .
korkeus	height-attribuutti määrittää kuvan korkeuden px. Syntaksi: height="300" .
ismap	Ismap-attribuutti osoittaa, että kuva on osa palvelimella olevaa karttakuvaa (karttakuva on kuva, jossa on napsautettavat alueet). Kun napsautat karttakuvaa, koordinaatit lähetetään palvelimelle URL-kyselymerkkijonona. Ismap-attribuutti on sallittu vain, jos elementti on elementin jälkeläinen kelvollisen href-attribuutin kanssa. Syntaksi: ismap.
longdesc	Laajennettu kuvan kuvauksen URL-osoite, joka täydentää alt-attribuuttia. Syntaksi: longdesc="http://www.example.com/description.txt" .
src	Attribuutti src määrittää kuvan polun. Syntaksi: src="kukka.jpg" .
koot	Asettaa kuvakoon näyttöasetusten mukaan. Toimii vain, kun srcset-attribuutti on määritetty. Attribuutin arvo on yksi tai useampi pilkuilla erotettu merkkijono.
srcset	Luo luettelon kuvalähteistä, jotka valitaan näytön resoluution perusteella. Voidaan käyttää yhdessä attribuutin src kanssa tai sen sijaan. Attribuutin arvo on yksi tai useampi pilkuilla erotettu merkkijono.
käyttökartta	Usemap-attribuutti määrittää kuvan kuvakartaksi. Arvon tulee alkaa #-symbolilla. Arvo liittyy tunnisteen nimen tai id-attribuutin arvoon
leveys	Leveysattribuutti määrittää kuvan leveyden pikselinä. Syntaksi: width="500" .

1.1. Kuvan osoite

Kuvan osoite voidaan määrittää kokonaisuudessaan (absoluuttinen URL), esimerkiksi:
url (http://anysite.ru/images/anyphoto.png)

Tai suhteellisen polun kautta asiakirja tai juurihakemisto verkkosivusto:
url(../images/anyphoto.png) - suhteellinen polku asiakirjasta,
url(/images/anyphoto.png) - suhteellinen polku juurihakemistosta.

Tämä tulkitaan seuraavasti:
../ - tarkoittaa siirtymistä yhden tason ylöspäin juurihakemistoon,
kuvat/ - siirry kuvien kansioon,
anyphoto.png - osoittaa kuvatiedostoon.

1.2. Kuvan mitat

Ilman kuvan mittoja, piirustus näytetään sivulla sen todellisessa koossa. Voit muokata kuvan mittoja leveys- ja korkeusmääritteillä. Jos vain yksi määritteistä on määritetty, toinen lasketaan automaattisesti kuvan mittasuhteiden säilyttämiseksi.

1.3. Graafiset tiedostomuodot

JPEG-muodossa (Yhteinen valokuvausasiantuntijaryhmä). JPEG-kuvat sopivat ihanteellisesti valokuviin ja voivat sisältää miljoonia eri värejä. Kuvat tiivistyvät paremmin kuin GIF-kuvat, mutta teksti ja suuret yksiväriset alueet voivat muuttua tahroiksi.

GIF-muoto (Graphics Interchange Format). Ihanteellinen sellaisten kuvien pakkaamiseen, joissa on tasavärisiä alueita, kuten logoja. GIF-kuvien avulla voit asettaa yhden värin läpinäkyväksi, jolloin verkkosivun tausta näkyy läpi osan kuvasta. GIF-tiedostot voivat myös sisältää yksinkertainen animaatio. GIF-kuvat sisältävät vain 256 sävyä, mikä saa kuvat näyttämään läikkyviltä ja väriltään epärealistisilta, kuten julisteet.

PNG-muodossa (Kannettava verkkografiikka). Sisältää GIF- ja JPEG-muotojen parhaat ominaisuudet. Sisältää 256 väriä ja mahdollistaa yhden värin tekemisen läpinäkyväksi samalla kun kuvat pakataan sisään pienempi koko kuin GIF-tiedosto.

APNG-muodossa (Animoitu kannettava verkkografiikka). PNG-muotoon perustuva kuvamuoto. Voit tallentaa animaatioita ja tukee myös läpinäkyvyyttä.

SVG-muoto (Skaalautuva vektorigrafiikka). SVG-piirustus koostuu joukosta XML-muodossa kuvattuja geometrisia muotoja: viiva, ellipsi, polygoni jne. Sekä staattista että animoitua grafiikkaa tuetaan. Ominaisuussarja sisältää erilaisia ​​muunnoksia, alfamaskit, suodatintehosteet, kyky käyttää malleja. SVG-kuvien kokoa voidaan muuttaa laadun heikkenemättä.

BMP-muoto (Bittikarttakuva). Se on pakkaamaton (alkuperäinen) bittikarttakuva, jonka malli on suorakaiteen muotoinen pikselien ruudukko. Bittikarttatiedosto koostuu otsikosta, paletista ja grafiikkatiedoista. Otsikko tallentaa tietoja graafisesta kuvasta ja tiedostosta (pikselin syvyys, korkeus, leveys ja värien lukumäärä). Paletti näkyy vain niissä bittikarttatiedostoissa, jotka sisältävät palettikuvia (8 tai vähemmän) ja koostuvat enintään 256 elementistä. Graafiset tiedot edustavat itse kuvaa. Värisyvyys tässä muodossa voi olla 1, 2, 4, 8, 16, 24, 32, 48 bittiä pikseliä kohden.

ICO muoto (Windows-kuvake). Tiedostokuvakkeen tallennusmuoto Microsoft Windows. Windows-kuvaketta käytetään myös kuvakkeena Internet-sivustoilla. Se on tämän muotoinen kuva, joka näkyy selaimessa verkkosivuston osoitteen tai kirjanmerkin vieressä. Yksi ICO-tiedosto sisältää yhden tai useamman kuvakkeen, joiden koko ja väri voidaan asettaa erikseen. Kuvakkeen koko voi olla mikä tahansa, mutta yleisimpiä ovat neliön muotoiset kuvakkeet, joiden sivut ovat 16, 32 ja 48 pikseliä.

2. Merkitse

Tag

Tunnisteella on käytettävissä name-attribuutti, joka määrittää kartan nimen. Tunnisteen name-attribuutin arvo

Elementti

3. Merkitse

Tag kuvaa vain yhden aktiivisen alueen osana asiakaspuolen kuvakarttaa. Elementillä ei ole sulkevaa tunnistetta. Jos yksi aktiivinen alue on päällekkäinen toisen kanssa, ensimmäinen linkki alueluettelosta otetaan käyttöön.

4. Esimerkki kuvakartan luomisesta

1) Merkitse alkuperäinen kuva halutun muotoisiksi aktiivisille alueille. Alueiden koordinaatit voidaan laskea kuvankäsittelyohjelmalla, esim. Adobe Photoshop tai Maali.

2) Aseta kortin nimi lisäämällä se tagiin

Jpg" alt="flowers_foto" width="680" height="383" usemap="#flowers"> !}
Riisi. 2. Esimerkki kuvakartan luomisesta, kun napsautat hiiren osoitinta kukan päällä, siirryt sivulle, jolla on kuvaus

Tässä opetusohjelmassa tarkastellaan web-sivun koristelua lisäämällä siihen grafiikkaa. Tutustumme yleisimpiin kuvaformaatteihin, selvitämme millä tunnisteella kuvia lisätään sivulle sekä ymmärrämme vaihtoehtoiset merkinnät sekä tekstin ja grafiikan kohdistus. Tutustumme myös kuvien perusominaisuuksiin ja opimme säätämään kuvan leveyttä ja korkeutta. Seuraavaksi muutama sana kuvien käyttämisestä linkkeinä ja mitä kuvien pikkukuvat ovat. Lopuksi tässä on joitain yleisiä vinkkejä grafiikan käyttämiseen verkkosivulla.

Kuvien lisääminen verkkosivulle
Jos verkkosivulla ei ole muuta kuin tekstitietoa, se saattaa vaikuttaa mielenkiintoiselta jollekulle siinä esitettyjen tietojen ansiosta, mutta on epätodennäköistä, että kukaan uskaltaisi kutsua sitä houkuttelevaksi. Kuvien lisääminen verkkosivulle on erittäin helppoa. Grafiikan lisääminen, joka voi antaa sivulle ammattimaisen ilmeen, vaatii jonkin verran tietoa. Siitä tämän päivän oppitunnilla on kyse.

Internetin kaksi yleisimmin käytettyä kuvamuotoa ovat GIF ja JPEG. JPEG-ryhmän (Joint Photographic Experts Group) kehittämää ja nimeämää muotoa käytetään yleensä kuvien, kuten valokuvien, tallentamiseen, joissa värisiirtymät ovat tasaiset.

Lähes kaikki muut graafiset elementit on tallennettu GIF-muotoon (Graphics Interchange Format) - grafiikan vaihtomuotoon. Tällä hetkellä on olemassa toinen uusi grafiikkamuoto, josta on tulossa yhä suositumpi: PNG (Portable Network Graphics). Sen odotetaan korvaavan lopulta GIF-muodon. Älä kuitenkaan kiirehdi tallentamaan kaikkia grafiikkatiedostojasi tähän muotoon, koska kaikki selaimet eivät vielä tue sitä.

Kaikki kuvat lisätään verkkosivulle käyttämällä samaa tunnistetta, jota kutsutaan kuvan lähdetunnisteeksi . Todennäköisesti voit nyt itse päättää sen tämä merkintä koostuu varsinaisesta tunnisteesta , sen attribuutti (scr) ja tämän attribuutin arvo (location). Koska scr-attribuutin käyttö on kuitenkin pakollista, on kätevämpää puhua tästä merkinnästä yhtenä yleisenä tagina. Olet ehkä myös huomannut, että kuvan lähdetunnisteessa ei ole vastaavaa lopputunnistetta. Tämä on erillinen, itsenäinen tunniste, joten älä unohda lisätä perään kauttaviivaa: .

#1058;D XHTML 1.0 Transitional//FI" "http://www.w3.org/TR/xhtml1/DТD/xhtml1/transitional.dtd"> Ensimmäiset kuvat e> Tämä kuva lisättiin ensimmäiselle web-sivulleni.r >

Vaihtoehtoisten tekstitysten lisääminen
Internetissä matkustaessasi olet luultavasti huomannut useammin kuin kerran erilaisia ​​​​kirjoituksia, jotka tulevat näkyviin, kun viet hiiren osoittimen web-sivun graafisen elementin päälle. Nämä tarrat tarjoavat yleensä lisätietoja itse kuvasta tai sen käyttämästä sivun alueesta.

Alla oleva esimerkki HTML-koodista näyttää, kuinka alt-attribuutti lisätään tagin sisään . Kuten attribuutti src, alt-attribuutti kertoo selaimelle lisätietoja kuvasta, ja sitä voidaan myös aina käyttää tunnisteen kanssa .

Alt-attribuutti määrittää vaihtoehtoisen tekstin verkkosivulle lisätylle graafiselle elementille. Tätä tekstiä kutsutaan vaihtoehtoiseksi tekstiksi, koska se voi näkyä näytöllä vaihtoehtona itse kuvalle. Alt-attribuutilla on toinen erittäin tärkeä tarkoitus. Monet Internetin vierailijat, jotka käyttävät alhaisia ​​tiedonsiirtonopeuksia, saattavat ohjeistaa selaimiaan olemaan lataamatta tai näyttämättä graafista tietoa. Tämän ansiosta he voivat ladata verkkosivuja nopeammin tietokoneilleen.

Muista myös, että kaikki selaimet eivät pysty näyttämään grafiikkaa ikkunoissaan. Esimerkiksi Lynx-selain ei tue tätä ominaisuutta ollenkaan. Siten alt-attribuutin avulla web-suunnittelija voi olla varma, että jos hänen verkkosivunsa vierailija ei näe kuvaa näytöllään, hän näkee ainakin tuohon kuvaan lisätyt tekstitiedot.

Vaikka alt-attribuutti voidaan määrittää jokaiselle tunnisteelle , ole varovainen, ettet määritä joillekin graafisia elementtejä tekstiviestejä, jotka eivät vastaa niitä. Ei esimerkiksi ole järkevää lisätä vaihtoehtoisia tekstitunnisteita erilaisia ​​elementtejä verkkosivun ulkoinen suunnittelu. Tällaisten virheiden välttämiseksi voit määrittää tällaisten elementtien alt-attribuutin tyhjäksi arvoksi (alt=""). Jos et aseta muita attribuuttiarvoja, selain hahmontaa kuvan alkuperäisessä koossa ja kohdistaa kuvan yläreunan viereisen tekstijonon yläreunaan. Voit muuttaa näitä molempia vaihtoehtoja käyttämällä tyylisivutunnisteita.

Kuvan attribuutit
Tagille Mukana on attribuutteja, joiden avulla voit muuttaa kuvan kokoa. Jotkut näistä määritteistä on lueteltu alla.
korkeus— Määritetään pikseleinä tai prosentteina — Määrittää kuvan korkeuden
leveys— Määritetty pikseleinä tai prosentteina — Määrittää kuvan leveyden.

Kuvan korkeuden ja leveyden säätö
Web-sivulle sijoitetun kuvan mitat voidaan määrittää korkeus- ja leveysmääritteillä. Näiden attribuuttien arvot määritetään joko kiinteänä pikselien lukumääränä tai prosentteina sivun koosta. Katso alla olevaa HTML-koodia. Ensimmäisessä tunnisteessa alkuperäisen kuvan mitat, jotka olet jo nähnyt tämän oppitunnin aiemmissa piirustuksissa, on asetettu 60 pikseliin pystysuunnassa ja 60 pikselissä vaakasuunnassa. Toisessa tunnisteessa saman kuvan leveydeksi asetetaan 6 % sivun leveydestä ja korkeudeksi 10 % sivun korkeudesta. Kuvassa näkyy, miltä nämä molemmat kuvat näyttävät selainikkunassa.

Kun se näyttää kuvaa ikkunassaan, selain käsittelee yhtä hyvin pikseleinä ja prosentteina määritettyjä arvoja. Ota kuitenkin huomioon, että verkkosivusi vierailijoiden tietokoneet voivat olla asetettuna erilaiselle näytön tarkkuudelle kuin asennettu. näyttöäsi varten. Mitä tästä seuraa? Esimerkiksi näytön resoluutioksi on asetettu 800x600. Edellisessä esimerkissä verkkosivulle lisättävän grafiikan leveydeksi asetettiin 6 % sivun leveydestä, mikä tällä resoluutiolla olisi 48 pikseliä. Jos katsot samaa kuvaa näytöllä, jonka resoluutio on 1024x800, määritetty 6 % sivun leveydestä vastaa 61 pikselin leveyttä.

Kun muutat kuvan kokoa, muista asettaa molemmat arvot vastaamaan sen korkeutta ja leveyttä. Jos muutat vain yhtä näistä arvoista, itse kuva näkyy pysty- tai vaakasuunnassa venytettynä näytöllä. Vaihtoehtoinen vaihtoehto koostuu kuvan koon säätämisestä graafisen editorin avulla.

Voit luoda illuusion enemmän nopea lataus Kuvat. Riippumatta siitä, onko kuvan kokoa muutettu vai ei, anna aina arvot korkeus- ja leveysmääritteille, koska ne kertovat selaimelle tärkeitä tietoja siitä, kuinka paljon tilaa sivulle tulisi varata. tästä piirroksesta. Tässä tapauksessa selain voi määrittää kuvalle tarvittavan tilan ja jatkaa sivun muiden elementtien rakentamista pysäyttämättä itse kuvan lataamista. Tällä tavalla sivu näyttää latautuvan nopeammin, koska vierailijoiden ei tarvitse odottaa kuvan latautumista kokonaan, ennen kuin he näkevät vihdoin muita sivulla esitettyjä tietoja.

Jos todella tarvitset kuvan viemään tietyn määrän tilaa sivun leveydeltä, käytä prosenttiarvoja. Tässä tapauksessa minkä tahansa näytön näytöllä kuva vie saman osan sivusta kuin näytölläsi. Jos haluat itse kuvan resoluution (sen koon pikseleinä) pysyvän vakiona, käytä pikseleinä ilmaistuja arvoja.

Tekstin ja grafiikan kohdistaminen
Tag align -attribuutti voit kohdistaa kuvan oikealle (arvo oikealle) tai vasemmalle ( vasen arvo) tekstirivin reuna. Esimerkkejä tämän määritteen käytöstä on esitetty kuvassa.

Samaa määritettä voidaan käyttää myös kuvan tasaamiseen pystysuunnassa (jälleen suhteessa tekstimerkkijonoon). Se voi ottaa kolme muuta arvoa: ylhäältä, alhaalta ja keskeltä. Jos tasaa-attribuutti on asetettu yläreunaan, kuvan yläreuna tasataan ympäröivän tekstin yläreunan kanssa. Jos tasausmäärite on asetettu alas, kuvan alareuna tasataan ympäröivän tekstin alareunan kanssa. Jos align-attribuutti on asetettu keskelle, kuvan keskikohta tasataan tekstirivin keskelle.

Kuvien käyttäminen linkkeinä
Kuvat sopivat muuhunkin kuin web-sivujen suunnitteluun. Niitä voidaan menestyksekkäästi käyttää hyperlinkkeinä muihin asiakirjoihin. SISÄÄN HTML annettu tehtävä ratkaistaan ​​yksinkertaisesti, koska kuvat muutetaan hyperlinkeiksi täsmälleen samalla tavalla kuin kirjoitukset. Tätä varten sinun on myös lisättävä tunniste, joka sisältää verkkosivun elementin, josta tulee linkki toiseen asiakirjaan. Jos siis hyperlinkkiä halutaan seurata kuvan napsautuksen jälkeen, tagin tulee sisältää kyseisen kuvan tunniste.

Tässä tapauksessa, kun verkkosivun vierailija vie hiiren tämän kuvan päälle, tekstiviesti "Tämä on omakuvani!" tulee näkyviin kursorin viereen. Kuvaa napsauttamalla avautuu DOC2.htm-dokumentti, johon hyperlinkki osoittaa.

Pikkukuvat
Toinen yleinen tapa käyttää HTML:n kykyä luoda hyperlinkkejä on käyttää joitain kuvia linkkien tekemiseen muihin. Miksi tämä on välttämätöntä? Tosiasia on, että Web-sivulla julkaistavien kuvien koko on usein liian suuri, eikä ole takeita siitä, että vierailijoilla on kärsivällisyyttä odottaa niiden latautumista. Tällaisissa tapauksissa alkuperäisestä kuvasta luodaan pienempi kopio, jota kutsutaan pikkukuvaksi, jonka selain voi ladata paljon nopeammin. Jos vierailija on kiinnostunut kuvasta ja haluaa ladata siitä täydellisen kopion, hänen tarvitsee vain klikata tätä pikkukuvaa. Tältä vastaavat HTML-koodit näyttävät.

Kuten näet, thumbnail.jpg-kuvan napsauttaminen avaa toisen kuvatiedoston (image.jpg). Tekstimerkkijono, annettu alt-attribuutin arvona, kertoo vierailijalle, kuinka pääkuva avataan.

Kuvien onnistuneen käytön salaisuudet
Kuvat ovat mielenkiintoisia ja houkuttelevia, tarjoavat paljon visuaalista tietoa ja niitä on erittäin helppo lisätä verkkosivuille, mutta sinun tulee silti noudattaa joitain seuraavista säännöistä, jos haluat todella luoda sivuston, josta tulee suosittu Internetin käyttäjien keskuudessa.

Mitä suurempi kuvatiedoston koko on, sitä kauemmin sen lataaminen käyttäjän tietokoneelle kestää. Koska useimmat Internetin vierailijat käyttävät edelleen hitaita viestintäkanavia päästäkseen verkkoon, läpijuoksu, ladattujen tiedostojen koko on heille edelleen olennaisen tärkeä. Muista ottaa tämä huomioon ja yritä sijoittaa kuvat verkkosivuillesi mahdollisimman pieninä.

Yksittäisen kuvan tiedostokoolla ei ole merkitystä, vaan myös koko kuvan tiedostokoolla. HTML-dokumentti. Mitä enemmän kuvia lisäät verkkosivulle, jopa pieniä, sitä suurempi on lopullisen asiakirjan tiedostokoko. Esikatsele sivuasi eri selaimet ja arvioi, kuinka kauan kunkin selaimen lataaminen kestää.

Koska alt-attribuutti on niin tärkeä (on suositeltavaa määrittää se jokaiselle tunnisteelle , ole varovainen käyttäessäsi sitä. Varmista, että tekstiviestin sisältö vastaa aina itse kuvaa, muuten sivusi kävijät voivat joutua harhaan. Sama pätee käänteisesti: varmista, että kuvat vastaavat verkkosivulla esitettyä tekstitietoa. Valokuva lentokoneesta olisi sopiva lentomatkailua käsittelevälle verkkosivustolle, mutta täysin sopimaton villieläimiä käsittelevälle verkkosivustolle.

Voit löytää monia mielenkiintoisia kuvia Internetistä ja tallentaa ne helposti tietokoneellesi. Monet näistä kuvista ovat kuitenkin tekijänoikeudella suojattuja. Jos löydät kaupalliselta sivustolta pitävän kuvan, tarkista, onko siellä tekijänoikeusilmoituksia ja onko kuva vapaasti käytettävissä.

Jos verkkosivulla oleva kuva ei ole tekijänoikeudella suojattu, voit kopioida sen tietokoneesi muistiin. Voit tehdä tämän napsauttamalla tätä kuvaa oikealla painikkeella hiirellä ja valitse avautuvasta valikosta Tallenna kuva nimellä -komento. Kun olet tallentanut kuvan tietokoneellesi, voit käyttää sitä edelleen kuten mitä tahansa muuta kuvaa.

Hei rakkaat blogin lukijat! Tässä artikkelissa opit kaiken miten kuva lisätään html-sivu . Onko sinulla useita kuvia, jotka haluat laittaa sivullesi vai haluatko laittaa logon sivustollesi? Kaikki tämä on helppoa. Kun olet lukenut tämän artikkelin, voit lisätä kuvia html-sivuillesi ilman vaikeuksia. Tätä varten puhumme yksityiskohtaisesti img-tunniste ja sen attribuutteja, tarkastelemme nopeasti graafisia tiedostomuotoja, kuten gif, jpeg ja png, sekä uusia HTML5-ominaisuuksia, jotka helpottavat videon ja äänen lisäämistä sivustoosi.

Koska grafiikkaa ja html-tekstiä ei voi yhdistää yhdeksi tiedostoksi, ne näkyvät sivustolla eri tavalla kuin html-sivujen muut elementit. Ensinnäkin graafiset kuvat ja muut multimediatiedot tallennetaan erillisiin tiedostoihin. Ja niiden upottamiseen verkkosivulle käytetään erityisiä tunnisteita, jotka sisältävät linkkejä näihin yksittäisiin tiedostoihin. Erityisesti tällainen tunniste on img-tunniste. Kun selain on kohdannut tällaisen osoitteen sisältävän tunnisteen, se pyytää ensin vastaavaa kuvaa, ääntä tai videota sisältävää tiedostoa Web-palvelimelta ja näyttää sen vasta sitten Web-sivulla.

Kaikki graafiset kuvat ja yleensä kaikki tiedot, jotka on tallennettu verkkosivusta erillään oleviin tiedostoihin, kutsutaan toteutettu sivun elementtejä.

Ennen kuin lisäät kuvia ja katsot "img" -tunnistetta yksityiskohtaisesti, kannattaa oppia hieman grafiikkamuodoista.

Graafiset kuvamuodot.

Grafiikkamuotoja on monia erilaisia, mutta selaimet tukevat vain muutamia. Katsotaanpa kolmea niistä.

1. JPEG-muodossa(Yhteinen valokuvausasiantuntijaryhmä). Melko suosittu muoto, jota käytetään kuvien tallentamiseen. Tukee 24-bittisiä värejä ja pitää kaikki valokuvien rasterit muuttumattomina. Mutta jpeg ei tue läpinäkyvyyttä ja vääristää kuvien pieniä yksityiskohtia ja tekstiä. JPEG-tiedostoa käytetään ensisijaisesti valokuvien tallentamiseen. Tässä muodossa olevien tiedostojen tunniste on jpg, jpe, jpeg.

2. GIF-muoto(Graphics Interchange Format). Tämän muodon tärkein etu on kyky tallentaa useita kuvia kerralla yhteen tiedostoon. Tämän avulla voit luoda kokonaisia ​​animoituja videoita. Toiseksi se tukee avoimuutta. Suurin haittapuoli on, että se tukee vain 256 väriä, mikä ei sovellu valokuvien tallentamiseen. GIF:iä käytetään pääasiassa logojen, bannerien, kuvien, joissa on läpinäkyviä alueita ja tekstiä, tallentamiseen. Tässä muodossa olevilla tiedostoilla on tunniste gif.

3. PNG-muodossa(Kannettava verkkografiikka). Tämä muoto kehitettiin korvaamaan vanhat GIF-tiedostot ja jossain määrin JPEG. Tukee läpinäkyvyyttä, mutta ei salli animaatiota. Tämä muoto on png-laajennus.

Web-sivustoja luodessaan he käyttävät yleensä kuvia JPEG- tai GIF-muodossa, mutta joskus he käyttävät PNG-muotoa. Tärkeintä on ymmärtää, missä tapauksissa mitä muotoa on parempi käyttää. Lyhyesti:

JPEG sopii parhaiten valokuvien tai harmaasävykuvien tallentamiseen, jotka eivät sisällä tekstiä;

• GIF-tiedostoa käytetään ensisijaisesti animaatioissa;
• PNG on kaiken muun muoto (kuvakkeet, painikkeet jne.).

Kuvien lisääminen html-sivuille

Joten kuinka lisäät kuvan verkkosivulle? Voit lisätä kuvan käyttämällä yksittäistä img-tunniste. Selain sijoittaa kuvan Web-sivun kohtaan, jossa se kohtaa img-tunnisteen.

Koodi kuvien lisäämiseksi html:ään sivu näyttää tältä:

Tämä html-koodi sijoittaa verkkosivulle image.jpg-tiedostoon tallennetun kuvan, joka sijaitsee samassa kansiossa kuin verkkosivu. Kuten olet ehkä huomannut, kuvan osoite on merkitty src-attribuutti. Kerroin jo mikä se on. Joten src-attribuutti on pakollinen attribuutti, joka ilmaisee kuvan sisältävän tiedoston osoitteen. Ilman src-attribuuttia img-tunniste on merkityksetön.

Tässä on muutama esimerkki lisää tiedoston osoitteen määrittämisestä kuvalla:

Tämä html-koodi lisää kuvan kuva.jpg-nimiselle sivulle, joka tallennetaan verkkosivuston juuressa olevaan kuvat-kansioon.

Attribuutti src voi sisältää muutakin kuin vain suhteellisia linkkejä kuviin. Koska kuvat tallennetaan verkkoon html-sivujen ohella, jokaisella kuvatiedostolla on oma URL-osoite. Siksi voit lisätä kuvan URL-osoitteen src-määritteeseen. Esimerkiksi:

Tämä koodi lisää sivulle kuvan sivustolta mysite.ru. URL-osoitetta käytetään yleensä, kun osoitat toisella sivustolla olevaan kuvaan. Sivustollesi tallennettujen kuvien kohdalla on parempi käyttää suhteellisia linkkejä.

Img-tunniste on rivielementti, joten se on parempi sijoittaa lohkoelementin sisään, esimerkiksi "P" -tunnisteen sisään - kappale:

Harjoitellaan ja liitetään sivullemme aiemmista artikkeleista aiheesta html kuva. Luon "images" -kansion sivuni html-tiedoston viereen ja sijoitan sinne "bmw.jpg" -kuvatiedoston, joka näyttää tältä:

Sitten lisätyn kuvan sisältävän sivun html-koodi on seuraava:

Ja katso näyttötulosta selaimessa:

Kuten näemme, kuvien sijoittamisessa web-sivuille ei ole mitään monimutkaista. Seuraavaksi tarkastellaan muutamia muita tärkeitä "img"-tunnisteen attribuutteja.

Alt-attribuutti on varavaihtoehto

Koska kuvatiedostot tallennetaan erillään verkkosivuista, selaimen on tehtävä erilliset pyynnöt niiden hakemiseksi. Mutta entä jos sivulla on paljon kuvia ja verkkoyhteyden nopeus on alhainen, lisätiedostojen lataaminen vie huomattavasti aikaa. Ja vielä pahempaa, jos kuva poistettiin palvelimelta tietämättäsi.

Näissä tapauksissa itse web-sivu latautuu onnistuneesti, kuvien sijaan näytetään vain valkoisia suorakulmioita. Siksi kertoaksesi käyttäjälle, mikä kuva on, . Tällä määritteellä määrität ns. korvaustekstin, joka näkyy tyhjänä suorakulmiona, kunnes kuva ladataan:

Ja suunnilleen tältä se näyttää:

Aseta kuvan mitat

On vielä pari img tag -attribuuttia, joista sinun pitäisi tietää. Tämä on pari attribuuttia leveys Ja korkeus. Voit käyttää näitä määrittämään kuvan mitat:

Molemmat määritteet osoittavat koon pikseliä. Leveys-attribuutti kertoo selaimelle, kuinka leveä kuvan tulee olla, ja height-attribuutti kuinka korkea sen tulee olla. Näitä kahta attribuuttia voidaan käyttää yhdessä tai erikseen. Jos esimerkiksi määrität vain leveysattribuutin, selain valitsee automaattisesti korkeuden suhteessa määritettyyn leveyteen ja myös jos käytetään vain korkeusattribuuttia. Jos et määritä näitä määritteitä ollenkaan, selain määrittää automaattisesti kuvan koon ennen sen näyttämistä näytöllä. On vain syytä huomata, että kuvakokojen määrittäminen nopeuttaa hieman selainta sivua näytettäessä.

Toistaiseksi tässä on kyse kuvien lisäämisestä sivuille, sitten tarkastellaan kuinka lisätä ääntä tai videota verkkosivustolle...

Videon ja äänen lisääminen HTML 5:n avulla

Uusi html5-spesifikaatio sisältää useita uusia tunnisteita, jotka tekevät mediatiedostojen upottamisesta erittäin helppoa. Tämä koskee ensisijaisesti videota ja ääntä.

Asettaa audio HTML5 tarjoaa parillisen tagin AUDIO. Sen tiedoston osoite, johon äänileike on tallennettu, osoitetaan meille jo tutulla src-attribuutilla:

"Audio" -tunniste luo lohkoelementin sivulle. Oletusarvoisesti selain ei toista äänileikettä. Jotta se voi tehdä tämän, sinun on määritettävä erityinen attribuutti äänitunnisteeseen automaattinen toisto. Erikoinen, koska sillä ei ole väliä. Pelkästään tämän attribuutin läsnäolo tunnisteessa riittää, jotta se tulee voimaan.

Oletusarvoisesti äänileikettä ei näytetä verkkosivulla. Mutta jos laitat attribuutin ilman arvoa "audio" -tunnisteeseen säätimet, selain näyttää äänileikkeen toiston säätimet Web-sivun paikassa, johon äänitunniste on sijoitettu. Niissä on toisto/taukopainike, toistopalkki ja äänenvoimakkuuden säädin.

Useimmat Web-sivut sisältävät grafiikkaa. Sen avulla voit esittää tiedot värikkäästi ja selkeästi. Monissa tapauksissa on parempi näyttää kuva kuin antaa pitkä tekstikuvaus.

On kaksi tapaa sijoittaa grafiikkaa sivulle:

• yksittäisten kuvien lisääminen;
• taustan täyttäminen kuvalla.

Joka tapauksessa graafinen kuva otetaan tiedostosta.

Grafiikan lisääminen

Graafisen kuvan lisääminen tiedostosta sivulle graafinen muoto valmistettu tagilla (englanniksi, kuva - kuva), joka ilmoittaa tiedoston osoitteen SRC-attribuutin argumenttina:

< IMG SRC = "адрес_графического_файла" >

Graafisen tiedoston osoite on joko URL-osoite tai tiedoston nimi, mahdollisesti polulla. Jos esimerkiksi haluat näyttää graafisen tiedoston logotip.jpg, sinun tulee kirjoittaa tunniste:

< IMG SRC = "logotip.jpg" >

Voit lisätä tagissa olevan graafisen kuvan siirtonopeutta voit käyttää attribuuttia ( lisäparametri) LOWSRC, joka ottaa grafiikkatiedoston osoitteen argumenttina. Voit luoda kaksi grafiikkatiedostoa: yksi (esimerkiksi logo.jpg) sisältää korkearesoluutioisen kuvan ja toinen (esim. logo.gif) matalaresoluutioisen kuvan. Sitten tagi:

< IMG SRC = "logotip.jpg" LOWSRC = "logotip.gif" >

...ohjeistaa selainta lataamaan ensin logo.gif-tiedoston ja korvaamaan sen sitten logo.jpg-tiedostolla, kun se vastaanotetaan.

Toinen tapa nopeuttaa grafiikan lataamista on määrittää sen suorakaiteen muotoisen alueen koko, johon grafiikka sijoitetaan attribuuttien avulla. LEVEYS(leveys) ja KORKEUS(korkeus), mitattuna pikseleinä. Jos määrität nämä attribuutit, selain varaa ensin tilan grafiikalle, valmistelee asiakirjan asettelun, näyttää tekstin ja vasta sitten lataa grafiikan. Huomaa, että selain pakkaa tai venyttää kuvaa niin, että se mahtuu määritettyyn kehyskokoon. Esimerkki kuvan mittojen määrittämisestä:

< IMG SRC = "logotip.gif" WIDTH = 40 HEIGHT = 20 >

Grafiikka käytetään yleensä yhdessä tekstin kanssa, joten tekstin ja grafiikan kohdistamisen ongelma syntyy. Tämä ongelma ratkaistaan ​​määritteen avulla KOHDISTAA tag käyttämällä erilaisia ​​argumentteja. Saatamme esimerkiksi haluta tekstin virtaavan kuvan ympärillä oikealle tai vasemmalle. Yleensä kuva on upotettu tiiviisti tekstiin, mikä voi olla rumaa. Tämän välttämiseksi voit asettaa tyhjät marginaalit kuvan ympärille. Kentät luodaan attribuuttien avulla VSPACE ylä- ja alamarginaalille ja Н Space tagin sivumarginaaleja varten . Näiden määritteiden argumentit määritetään numeroina, jotka määrittävät kenttien koon pikseleinä. Jos haluat peruuttaa tekstin rivityksen grafiikan ympärille, käytä tunnistetta
.

Seuraava tagi asettaa logo.jpg-tiedoston grafiikan käärimään oikealle (kuva sijoittuu tekstin vasemmalle puolelle):

< IMG SRC = "logotip.jpg" ALIGN = LEFT >

Jos haluat sijoittaa kuvan tekstin oikealle puolelle, tarvitset määritteen KOHDISTAA määritä argumentti OIKEIN:

< IMG SRC = "logotip.jpg" ALIGN = RIGHT >

Jos haluat asettaa kuvan ympärille reunukset, sinun on kirjoitettava tagi, kuten:

< IMG SRC = "logotip.jpg" ALIGN = LEFT HSPACE = 20 VSPACE = 10 >

Tässä numerot 20 ja 10 määrittävät kenttien koon.

Katsotaanpa esimerkkiä jakaminen grafiikkaa ja tekstejä. Avaa Muistio ( tekstieditori Muistio) Windows. Kirjoita siihen HTML-koodi käyttämällä yllä mainittuja tageja. Alla on ohjelma, joka tulostaa tekstiä ja grafiikkaa. Voit käyttää mitä tahansa tiedostojasi grafiikkatiedostona. Tässä käytetty tiedosto on logotip.gif.

< HTML >

< HEAD >

< TITLE >Harjoitus 1< / TITLE >

< / HEAD >

< BODY BGCOLOR = "YELLOW" >

< IMG SRC = "logotip.gif " ALIGN = LEFT >

< H1 >Teksti kiertyy oikeanpuoleisen grafiikan ympärille< / H1 >

Laajat mahdollisuudet kuvien (sekä muiden elementtien) tarkkaan sijoittamiseen sivulla tarjoavat taulukoita Ja tyylejä. Nämä HTML-elementtejä keskustellaan myöhemmin. Voit esimerkiksi määrittää taulukon ilman näkyviä kehyksiä ja sijoittaa kuvia, tekstejä ja muita elementtejä tämän taulukon soluihin.