Hei rakkaat lukijat blogi! Tässä artikkelissa opit kaiken miten kuva lisätään html-sivu . Onko sinulla 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 tag ja sen attribuutit, katso nopeasti graafisia tiedostomuotoja, kuten gif, jpeg ja png, ja tutustu uusiin HTML5-ominaisuuksiin, joiden avulla videon ja äänen upottaminen sivustoosi on helppoa.

Koska grafiikka ja html tekstiä ei voida yhdistää yhdeksi tiedostoksi, ne näytetään sivustolla eri tavalla kuin muiden html-sivujen elementtien kanssa. Ensinnäkin, graafisia kuvia, ja muut multimediatiedot tallennetaan erillisiin tiedostoihin. Ja upottaakseen ne web-sivulle he käyttävät erityisiä tunnisteita, jotka sisältävät linkkejä näihin yksittäisiä tiedostoja. Erityisesti tämä tagi on tag . 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 upotettu sivun elementtejä.

Ennen kuin lisäät kuvia ja tarkistat tagin yksityiskohtaisesti , kannattaa oppia hieman graafisista formaateista.

Graafiset kuvamuodot.

Niitä on monia erilaisia graafisia formaatteja, mutta selaimet tukevat vain muutamia. Tarkastellaanpa 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 keskisävyt ennallaan. Mutta jpeg ei tue läpinäkyvyyttä ja vääristää kuvien hienoja yksityiskohtia ja tekstiä. JPEG-tiedostoja käytetään pääasiassa valokuvien tallentamiseen. Tämän muodon tiedostot ovat jpg laajennuksia, jpe, jpeg.

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

3. PNG-muodossa(Kannettava verkkografiikka). Tämä muoto kehitettiin korvaamaan vanhentunut GIF 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 kumpaa muotoa on parempi käyttää. Lyhyesti siis:

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

• GIF-tiedostoa käytetään pääasiassa animaatioissa;
• PNG on muoto kaikelle muulle (kuvakkeet, painikkeet jne.).

Kuvien lisääminen html-sivuille

Joten kuinka lisäät kuvan verkkosivulle? Lisää kuva mahdollistaa yhden tag . Selain sijoittaa kuvan Web-sivun kohtaan, jossa se kohtaa tunnisteen .

Kuvan upotuskoodi html:ään sivu näyttää tältä:

Tämä html-koodi sijoittaa verkkosivulle image.jpg-tiedostoon tallennetun kuvan, joka sijaitsee samassa kansiossa web-sivun kanssa. Kuten olet ehkä huomannut, kuvan osoite on merkitty src-attribuutti. Mitä se on, olen jo sanonut. Joten src-attribuutti on pakollinen attribuutti, joka määrittää kuvatiedoston osoitteen. Ilman src-attribuuttia img-tagilla ei ole merkitystä..

Annan vielä muutaman esimerkin 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ää paitsi suhteellisia linkkejä kuvien päällä. Koska kuvat tallennetaan verkkoon html-sivujen ohella, jokaisella kuvatiedostolla on oma URL-osoite. Siksi kuvan url-osoite voidaan lisätä src-attribuuttiin. Esimerkiksi:

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

Tag on rivielementti, joten se on parempi sijoittaa lohkoelementin sisään, esimerkiksi tagin sisään

- kohta:

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

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

Autoja käsittelevä sivusto.

Tervetuloa autosivustollemme. Täältä löydät monia mielenkiintoisia ja hyödyllisiä artikkeleita autoista, niistä tekniset tiedot ja ominaisuuksia.

tieteellinen kieli auto Tämä:

Mekaaninen moottori telaton tie ajoneuvoa vähintään 4 pyörällä.

---

Auton luokitus

Autoja on seuraavan tyyppisiä:

• Matkustaja;


• Rahti;


• SUV;


• Buginen;


• Noukkia;


• Urheilu;


• Kilpa.

Kaikki oikeudet pidätetään. 2010
Autoja käsittelevä sivusto.

Ja katsomme näytön tulosta selaimessa:

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

alt-attribuutti - varavaihtoehtona

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, lataa lisätiedostoja vie huomattavan paljon 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, jotta käyttäjä saisi tietoa siitä, mikä kuva on, . Tällä attribuutilla määritetään niin sanottu korvaava teksti, joka näkyy tyhjässä suorakulmiossa, kunnes kuva ladataan:

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

Aseta kuvan mitat

On vielä pari img tag -attribuuttia, jotka sinun tulee olla tietoisia. Tämä on ominaisuuspari leveys Ja korkeus. Voit käyttää niitä määrittämään kuvan mitat:

leveys="300" korkeus="200">

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 säätää korkeutta automaattisesti 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ä kuvakoon määrittäminen nopeuttaa hieman selainta sivua näytettäessä.

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

Upota video ja ääni HTML 5:llä

SISÄÄN uusi spesifikaatio html5:ssä on joitain uusia tunnisteita, jotka tekevät mediatiedostojen upottamisesta erittäin helppoa. Tämä koskee ensisijaisesti videota ja ääntä.

Lisäystä varten audio HTML5 tarjoaa parimerkki Sen tiedoston osoite, johon äänileike on tallennettu, ilmaistaan ​​käyttämällä jo tuttua src-attribuuttia:

Tag

Ääniotosta ei oletusarvoisesti näytetä verkkosivulla millään tavalla. Mutta jos tagissa

Paritunniste on tarkoitettu videon lisäämiseen verkkosivulle. . Tämän tagin kanssa kaikki on sama kuin tagilla

Kuvien ja multimedian lisäämisestä html-sivuille ei ole paljon puhuttavaa. Toivottavasti kysymys Kuinka lisätä kuva html-sivulle? vastasin sinulle. joten yhteenvetona:

varten upota kuvat html:ään sivu yhdellä tunnisteella ja määritä sen tiedoston osoite, jonka attribuutissa on kuva src: ;

• käyttämällä alt-attribuutti tag voit asettaa korvaavan tekstin, jos kuva ei lataudu;
• attribuutteja käyttämällä leveys Ja korkeus voit määrittää web-sivulla olevan kuvan koon;
• äänen ja videon lisäämiseksi html5:een on parilliset tagit

Jos jokin on epäselvää, kysy kommenteissa ja älä unohda tilata blogipäivitykseni. Nähdään seuraavissa postauksissa!

Asettamista varten kuvat HTML-muodossa Kaksi päämuotoa ovat GIF ja JPEG. GIF-muoto voi tallentaa itsensä yksinkertaisin animaatio(dynaamiset bannerit), JPEG sopii erinomaisesti kuville, joissa on paljon värejä, kuten valokuville. Kolmas verkkografiikan muoto on PNG-muoto, mutta sitä ei ole käytetty laajasti web-suunnittelussa. Kaikki GIF- tai JPEG-muodossa olevat kuvat lisätään verkkosivulle tunnisteen avulla, sulkutunnistetta ei ole.

SRC-attribuutti

Attribuutin mukaan src kuvan sisältävän tiedoston osoite (URL) asetetaan, ts. selain löytää halutun kuvan sivustohakemistosta tässä määritteessä määritettyä polkua (URL-osoite) pitkin. Mukavuuden vuoksi kaikki sivuston kuvat ovat erillisessä kansiossa, joka on yleensä nimetty kuva. Ota esimerkiksi mikä tahansa kuva, mieluiten pieni, ja tallenna se luotuun kuvakansioon nimellä primer.jpg. Seuraavaksi viitataan siihen koulutusta varten.

No, yritetäänkö lisätä kuva sivulle? Kirjoitamme koodin (polku on URL, se kirjoitetaan kuvien kansion sijainnin mukaan):

src="image/example.jpg" >

Mitä ilman et voi luoda verkkosivustoa: ∼ ∼

Kaikki, mitä tästä miehestä tiedetään, on
että hän ei joutunut vankilaan, mutta miksi hän ei vankilaan, on tuntematon.
Mark Twain.

Tämä on oppitunti aiheesta kuinka lisätä kuva html:ään, miten se järjestetään, miten tekstiä kääritään kuvan ympärille jne. Onhan tiedossa, että kuvat tekevät sivustosta houkuttelevamman ja eroavan muista resursseista, joten tunnisteen ja sen attribuuttien käyttö on erittäin hyödyllistä moderni Internet. Mutta tärkeintä tässä on suhteellisuudentaju!

Liiallinen grafiikka saa html-sivun raskaammaksi ja pidentää vastaavasti sen latausaikaa. Lisäksi läsnäolo suuri numero kuvat häiritsevät kävijöitä sivuston pääsisällöstä (ellei tietysti grafiikka ole sivuston pääsisältö). Ole siis varovainen ja käytä vain siellä, missä sitä tarvitset. Ja tulet olemaan onnellinen!

Oppitunnilla aiheesta puhuin jo siitä, kuinka voit käyttää kuvia html-dokumentin taustana. Nyt puhutaan siitä, kuinka grafiikkaa käytetään html-sivun "yläkerroksessa".

§ 1. Kuvan lisääminen

Lisää kuvia HTML:ään käyttämällä tunnistetta img Kanssa pakollinen attribuutti SRC. Tämä attribuutti kertoo selaimelle polun kuvatiedostoon. Nuo. lisätäksesi kuvan nimeltä logo.jpg tiettyyn paikkaan sivulla (edellyttäen, että sekä sivu että kuva sijaitsevat yhdessä kansiossa(hakemisto)) sinun on lisättävä seuraava html-koodi tähän paikkaan:

src="logo.jpg">

Jos kuva ja sivu sijaitsevat eri hakemistoja (kansioita), sinun on määritettävä kuvan polku suhteellisesti sivuja. Esimerkiksi, jos html-sivu sijaitsee hakemisto- (kansio) -sivustolla, samassa hakemistossa (kansiossa) on alihakemisto (kansio) kuvat, jossa kuvamme logo.jpg sijaitsee, sinun on lisättävä se. kirjoittaa näin:

images/logo.jpg">

Ja et voi kärsiä ja huomauttaa koko osoite Kuvia. Esimerkiksi näin:

http://www.png">

Jälkimmäisessä tapauksessa selain näyttää koodin seuraavasti:

Huomautus. Jos kuva sijaitsee tietokoneellasi, ja haluat lisätä sen web-sivulle, niin siitä ei tule mitään. Tätä varten kuva on ensin siirrettävä johonkin paikkaan internetissä(Esimerkiksi, ). Ja määritä koko osoite sivukoodissa tähän paikkaan kuvan kanssa.

Pakollisen attribuutin lisäksi SRC tagissa img On olemassa muutama valinnainen attribuutti. Tarkastellaanpa niitä tarkemmin.

§ 2. Kuvan koon määrittäminen

Aloitetaan määritteistä, joiden avulla voit määrittää kuvan mitat(tarkemmin sanottuna, merkitse sivuille paikka näille kokoille). Täällä he ovat:

• leveys- kuvan leveys pikseleinä tai prosentteina;


• korkeus- kuvan korkeus pikseleinä tai prosentteina.

Jos näitä määritteitä käytetään, se varaa ensin tilan grafiikalle, valmistelee asiakirjan asettelun, näyttää tekstin ja lataa vasta sitten kuvan. Samanaikaisesti se sijoittaa kuvan valitun kokoiseen suorakulmioon, vaikka kuvan todellinen leveys ja korkeus olisivat suurempia (pakkaa) tai pienempiä (venytyksiä). Jos näitä määritteitä ei käytetä, selain lataa kuvan välittömästi ja tekstin ja muiden sitä seuraavien elementtien tulostus viivästyy.

Kuvien leveys ja korkeus voidaan määrittää sekä pikseleinä (tässä tapauksessa kuvan koko on vakio näytön resoluutiosta riippumatta) tai prosentteina (kuvan koko riippuu käyttäjän näytön resoluutiosta). Esimerkiksi:

width="50" height="20">

width="10%" height="5%">

§ 3. Vaihtoehtoinen teksti

Jos käyttäjä on poistanut kuvien näyttämisen selaimen asetuksista, voit kuvan sijaan näyttää vaihtoehtoista tekstiä, joka selittäisi millaista grafiikkaa tässä pitäisi olla. Tämä saavutetaan käyttämällä attribuuttia ALT:

Tässä tapauksessa selain varaa sivulle tilaa kuvalle, mutta itse kuvan sijaan se näyttää tekstin, jonka kirjoitat attribuutin arvoon ALT:

Tämä tapahtuu jälleen, jos käyttäjä on poistanut grafiikan näyttämisen käytöstä. Muussa tapauksessa kuva piilottaa vaihtoehtoisen tekstin.

§ 4. Kuvan kohdistus

Sinulle jo tutun attribuutin avulla kohdistaa voit hallita kuvien kohdistusta suhteessa muihin html-sivun elementteihin. Attribuutti kohdistaa on useita merkityksiä, mutta olemme eniten Tämä hetki Olen kiinnostunut kahdesta:

• vasemmalle- kuva sijaitsee sivun vasemmassa reunassa ja teksti kiertyy kuvan ympärille oikealla;


• oikein- kuva sijaitsee sivun oikeassa reunassa ja teksti ja muut elementit kietoutuvat kuvan ympärille vasemmalla.

Esimerkiksi HTML-koodi

selain näyttää näin

Ja tämä HTML-koodi:

näyttää tältä:

Voit lopettaa tekstin rivittymisen kuvan ympärille käyttämällä tunnistetta BR(tuttu meille viimeisestä aiheesta). Tag BR on attribuutti asia selvä, joka voi ottaa kolme arvoa:

• vasemmalle- lopettaa tekstin rivittäminen vasemmalle tasattujen kuvien ympärille;


• oikein- lopeta tekstin kiertyminen oikealle tasattujen kuvien ympärille;


• kaikki- lopeta tekstin rivittäminen kuvien ympärille tasattuina sekä vasemmalle että oikealle.

Kun surffaat Internetissä, näet varmasti monilla sivustoilla erilaisia ​​kuvia, bannerit, valokuvat, grafiikat. Tänään opimme lisäämään kuvia HTML-sivulle.

Kuvan lisääminen tapahtuu kahdessa vaiheessa: ensin valmistetaan grafiikkatiedosto oikea koko ja muoto, ja sitten se lisätään verkkosivulle tunnisteen kautta: . Itse HTML-dokumentti on tarkoitettu vain näyttämään vaadittu kuva muuttamatta sitä.

Kuvien valmistelussa on otettava huomioon muutama seikka.

1. Koska verkkosivu ladataan verkon kautta, tärkeä tekijä on koko ("paino") graafinen tiedosto upotettu verkkodokumenttiin. Mitä pienempi se on, sitä nopeammin kuva näkyy.

2. Usein fyysiset mitat kuvien (leveys ja korkeus) leveyttä ja korkeutta on rajoitettava (pienennetty). Aseta leveydeksi esimerkiksi enintään 700–800 pikseliä. Muussa tapauksessa koko kuva ei mahdu selainikkunaan ja näkyviin tulee vierityspalkkeja.

Graafiset muodot verkkosivustoille

On olemassa kaksi päämuotoa, joita käytetään laajimmin verkkografiikassa: gif Ja JPEG. Ominaisuudet, kuten: monipuolisuus, monipuolisuus, pieni tilavuus lähdetiedostot riittävän kanssa hyvä laatu, ovat palvelleet näitä muotoja hyvä palvelu, mikä määrittelee ne tehokkaasti verkkokuvien standardiksi.

On olemassa toinen muoto: PNG, jota myös selaimet tukevat kuvia lisättäessä, ja sitä on saatavana kahdessa eri muodossa: PNG-8 Ja PNG-24. Suosio kuitenkin PNG-muodossa tunnustuksessaan huomattavasti huonompi GIF-muodot ja JPEG.

Yleensä he luovat kuvia (kuvia) varten erillinen kansio juurihakemistossa ja kaikki sivuston kuvat lisätään siihen. Joskus tällaisia ​​kansioita on useita (jos sivuston rakenne vaatii sitä tai sinun on helpompi navigoida). Tätä kansiota kutsutaan yleisimmin seuraavasti: img tai kuvia (Kuvat). Kirjoita verkkosivun koodiin täysi polku grafiikkatiedostoon (jossa kuva on) sekä nimi annettu tiedosto(kuvat), jotka haluat lisätä html-dokumenttiin.

Koodin kirjoittaminen kuvan upottamiseksi verkkosivulle

Jos haluat lisätä kuvia HTML-dokumenttiin, käytä kohdassa määritettyä rakennetta Listaus 8.1. Tämä koodi lisätään oikeaan paikkaan verkkosivulla (missä haluat nähdä kuvan).

Autoille omistetulle we-sivullemme valmistelin ja lisäsin kaksi kuvaa. Näet ensimmäisen kuvan upotuskoodin listauksessa 8.1.

Listaus 8.1.

Sivuston web-sivulle ensimmäinen lisätty kuva näyttää tältä:

Ja nyt kommentoin tarkemmin mitä siihen on kirjoitettu Listaus 8.1.

Itse kuva "lisätään" käyttämällä tagia: img src. Koko kirjoitus näyttää tältä: img src="img/mers1.jpg", Missä "img/mers1.jpg"- osoittaa, että kuvamme on kansiossa: img ja grafiikkatiedoston (kuvan) nimi: mers1.jpg.

Periaatteessa tämä riittää jo kuvan lisäämiseen verkkosivulle, loput parametrit ovat valinnaisia, mutta silti suosittelen, että määrität ne aina, Muussa tapauksessa kuva voi altistua geometrisille vääristymille..

Katsotaanpa lisävaihtoehtoja:

border="0"- osoittaa, että kuvan ympärillä ei ole kehystä, yritä muuttaa 0 toiseksi numeroksi, esimerkiksi numeroon 1 , - vastaa kuvaa ympäröivän kehyksen paksuutta 1 pikseli, 2 - vastaa kuvan ympärillä olevan kehyksen paksuutta kahdessa pikselissä jne.

Tärkeä! Jos aiot tehdä kuvasta linkin, muista määrittää arvo: border="0".

leveys="400"– osoittaa, että kuvan leveys on: 400 pikseliä(laittaa todellinen hahmo kuviesi leveys).

korkeus="209"- määrittää, että kuvan korkeus on: 209 pikseliä(laita kuviesi todellinen korkeus).

Jos et määritä parametreja: leveys Ja korkeus, kuva saattaa saada geometrisen vääristymän.

hspace="20"- ilmaisee 20 pikselin kuvan ympärillä olevan tekstin sisennyksen.

align="left"- tämä on sinulle jo tuttu tunniste ... .. Aivan oikein, se tarkoittaa vasemmalle tasattuna, se voi myös saada arvon: oikein- oikea kohdistus.

alt="Auto edestä" !}- tähän kirjoitetaan vaihtoehtoinen teksti, joka tulee näkyviin, kun hiiri viedään kuvan päälle.

Täsmälleen samalla tavalla "lisäämme" toisen kuvan verkkosivulle, sillä ainoa ero on, että se on tasattu oikealle.

Kommentit tähän artikkeliin (oppitunti):

Voitko kertoa minulle tarkalleen missä minun täytyy luoda img-kansio?

Img-kansio on vain tavanomainen nimi, voit kutsua sitä miksi haluat, jos vain ymmärrät myöhemmin. Voit luoda sen missä tahansa. Yksinkertaisuuden vuoksi luo se juurihakemistoon ja laita kaikki kuvat sinne.

Tosiasia on, että kuvaa ei näytetä, vain kirjoitus. Mikä voi olla vialla? Kiitos.

Katso tarkkaan yllä olevaa listausta 8.1. Ota se kokonaan itsellesi. Tee juurihakemistoon (jossa kaikki sivustosi HTML-tiedostot sijaitsevat) kansio img . Sijoita kaikki kuvasi tähän kansioon. Muuta listassa mers1.jpg tiedostosi nimeksi. Muuta leveys- ja korkeusarvoiksi todelliset mitat tiedostosi. Onnea.

Kiitos paljon, kaikki sujui.

Hei Minulla on sama tilanne kuin edellisellä puhujalla: Kirjoitan koodin kuten sinun, vaihdan vain tiedoston nimeä: mers.1 / jpeg sijaan laitan joukkoon Mercedes / jpeg. Sivulle tulee vain ikkuna, jossa on teksti "Auton edestä", eikä kuvaa ole. Mielestäni selain ei löydä kuvan polkua tai se ei ole oikein rekisteröity. TÄSSÄ ON MINUN KOODINI: b

Katso tarkasti img/mercedes/jpeg-koodiasi. Ymmärsit oikein, että selain ei löydä polkua grafiikkatiedostoon. 2. Tiedoston nimi on virheellinen, katso kuinka minulla on mers1.jpg

No, kopioin koodin ja liitin soikeaan ilman kuvaa ovaaliin yläreunassa on linkki!

Hei!Ongelma on sama, loin kansion nimeltä img samaan paikkaan kuin sivuston dokumentit, tähän kansioon tallennetaan kuvat nimellä 1.jpg, kirjoitan kaiken kuten esimerkissäsi.

Jos huomaat kuvani olevan img-kansiossa

Erittäin hyödyllinen artikkeli aloittelijoille "web-mastereille". Ainoa huomautus "alt"-attribuutille. Suhteessa artikkelin kuvaan annetaan seuraava tulkinta: "alt="Näkymä edessä olevasta autosta" – здесь прописывается альтернативный текст который высвечивается при наведении мыши на картинку." Не совсем точно: для рисунка - это прорегатива атрибута title. alt - альтернативный текст, который отобразится, если у пользователя графика отключена или картинка не загрузилась; title - атрибут, позволяющий отображать всплывающее пояснение к картинке при наведении на неё курсора.!}

tässä on minun koodini MIKSI KUVA ON SIVULLA, KUN SEN TEHTÄVÄ ON KESKELLÄ?

Ja jos otan kuvan jonkun muun sivustolta, eikö se ole tekijänoikeusrikkomus?

Selitä miksi asettelussa HTML-dokumentti palvelimelle kuvien tilalla ovat tyhjiä tiloja kehyksessä. Vaikka ennen laskelmaa kuvat olivat sellaisia ​​kuin pitikin.

Dmitry, ei ole ihmeitä, teit virheen jossain, tarkista kaikki polut kuviin, ts. miten kuvat kirjoitetaan koodiin.

tämä on minun koodini, kaikki paitsi kuva paljastetaan sivulla, olen yrittänyt koko päivän millään tavalla, mutta ei mitään. kerro minulle mitä tehdä

AndreyK, katso kirjeeni. En voi lisätä kuvaa millään tavalla, kirjoitan kaiken oikein, mutta en mitenkään, vain kehys ja kirjoitus paljastuvat

Elvira, luin kirjeesi, samoin kuin kaikki muut kommentit ja kirjeet. Mutta mihin vastata ... isoisän kylään ???

En tiedä miksi kaikilla on kiire!? sinun ei tarvitse kopioida koodeja, vaan liittää ne, vaan kirjoittaa ne itse ja kaikki toimii .. tässä on kuvani teksti

Kopioin tietosi, liitin arvoni - siellä on kuva. Seuraavaksi ajelen samaa asiaa (manuaalisesti) alla, ei ole kuvia - mitä ihmettä?

AndreyK kerro minulle missä on virhe? kuinka moni yritti se ei toimi ((

Andrey, kerro miksi et näe kuvaa. Minun koodini: Siinä on kuvateksti, mutta ei kuvaa. Osoitteeni: [sähköposti suojattu] Kiitos.

Kesti myös kauan, mutta se toimi! Todellakin, imj-kansio on avattava HTML-dokumentissa.

Kokeilen ehdottomasti, kiitos

iiiiiiiiiuuuuuuuuuuuuuuuuuuuum my

Minäkin kärsin pitkään, kävi ilmi, että kuvineen kansion pitäisi olla samassa paikassa kuin index.html, kiitos Elena

Andrei liitän:

Andrei liitän: eikä minulla ole asiakirjassa kuvaa, vain kirjoitus!!! Osoitteeni on: [sähköposti suojattu]

koodini... ei myöskään kuvaa. Img-kansio on samassa kansiossa kuin hakemisto... apua kiitos. [sähköposti suojattu] Kiitos!

No en tiedä. Olen lukenut kaikki kommentit. Olen yrittänyt kaikkea. Kopioin ja liitin tietoni. Mikään ei toimi. Kuvien kansio (img) on ​​samassa paikassa kuin index.html. Mutta kuvaa ei ole. Sen sijaan punainen risti ja kirjoitus.Työskentelen IE-selaimella. Tässä on mitä syötin:

Katsoin oppitunnilla sivun HTML-koodia kuvan sijaan: Sivulla oleva koodi eroaa tiedoissa olevasta. Miksi? ja muuten sivulla koodi "mers1.jpg" on alleviivattu. Kopiointi alleviivauksella epäonnistui. Olen myös yrittänyt laittaa sitä. Ei vieläkään kuvaa. Mikä hätänä?

Kysymme itseltämme, vastaamme itsellemme. Pitkään aikaan kuvaa ei ole lisätty. Kävi ilmi: 1, src-tunnisteen sijaan minulla oli srk 2. Hämmentyin, kun tein polun kuvaan. Nimesin kansion uudelleen IMG:ksi ja kaikki toimi. Vietin tähän melkein kaksi päivää, mutta se oli sen arvoista.

Rakkautta, mutta nyt muistat sen loppuelämäsi :) Vitsailen tietysti, älä loukkaannu. Mutta vakavasti, jos henkilö ei jätä paluuosoitetta, minun on melkein mahdotonta auttaa häntä.

Hei, voitko kertoa minulle kuinka sijoittaa yksi kuva päälle, toinen alle vasemmalle ja kolmas alaoikealle))))

........... mikä on virheeni, että kuva puuttuu?

Kaikki on oikein koodissa, jos mikään ei ole sekaisin, kaiken pitäisi toimia. Mutta kirjoita tiedoston nimi (kuva) Englanninkieliset kirjaimet. Monet palvelimet eivät hyväksy latinaa.

Mutta tässä on outoa ... kun kutsuin kansiota eri nimillä, kuva ei halunnut näkyä millään tavalla, vaikka polku oli kirjoitettu oikein. Heti kun soitin IMG:lle, ilmestyin heti. Mikä on juju?

Marina, ei ole temppua tai provokaatiota :). Listauksen koodissa 8.1. on ilmoitettu, että tämä kuva on kansiossa: img. Jos muutat isäntäsi kuvien kansion nimeä, vaihda se sitten luettelossa, se on koko temppu.

Yritän lisätä kuvan!!! Kirjoitan kaiken muistilehtiön kautta, teen kaiken oikein, ehkä se ei ole sen arvoista muistilehtiön kautta ??

Ja avaan kaiken uusimmassa mozilla fire foxissa))

Kuvani polku on C:Documents and SettingsdenisDesktopkoffevinogradwwwImg ja itse kuvan nimi on gif, nimi sisältää myös 1.gif...teen tämän muistilehtiössä

teki ja koko polku ei tule ulos mozilla ei näe valokuvan expolerin kohokohtia punaisella ristillä

Dennis, nimeä uudelleen img-kansio img:ssä, ts. Kaikki isot kirjaimet ja nimeä myös polku uudelleen. Monet palvelimet eivät näytä isoja kirjaimia oikein.

Minulla on edelleen sama kysymys: miksi ei kuvia, vaan vain kirjoitus. Tein sivustolle erillisen kansion: se sisältää web-sivun ja kuvan. Lisätty: APUA MIKÄ ON VIRHE POSTINI: [sähköposti suojattu]

Miten teet kuvan niin, että sitä voi suurentaa tai pienentää?

Jostain syystä kuva ei myöskään keskity minulle. Mikä on saalis?.. Koodi on:

Työskentely kuvien kanssa HTML:ssä (kuvien lisääminen, koon muuttaminen, linkin tekeminen kuvasta).

Kuvan lisääminen

Pariton tagi käytetään kuvan lisäämiseen html-dokumenttiin. , joka sijoitetaan asiakirjaan, johon kuva lisätään. Tällä tunnisteella on vaadittu parametri src, jonka arvo määrittää polun haluttu kuva verkkosivustosi hakemistossa.

Esimerkiksi kuvan sijoittaminen sivulle:

oikeaan paikkaan asiakirjassa sijoitetaan rivi:

Tämä antaa selaimelle tietää, että sivuston juurihakemistossa www.omasivusto.fi siellä on alihakemisto img 1.png

Tässä olemme määrittäneet koko polun (tai absoluuttinen osoite) kuvaan. Ja voit määritellä suhteellinen osoite Kuvat:

Selain tulkitsee tämän rivin seuraavasti: hakemistossa, jossa tämä html-dokumentti sijaitsee, on alihakemisto img, se sisältää kuvan nimeltä 1.png, joka tulee sijoittaa sivulle.

Ja tässä on esimerkki suhteellisen kuvan osoitteen määrittämisestä, jos sivustollasi on enemmän kuin monimutkainen rakenne ja edellinen esimerkki ei sovi:

Selain tulkitsee tällaisen rivin seuraavasti: merkkien yhdistelmä ../ tarkoittaa, että hakemistosta, jossa annettu html-dokumentti sijaitsee, sinun on mentävä yksi taso ylöspäin; ja sitten, kuten edellisessä esimerkissä: hakemistossa, johon päädyimme, on alihakemisto img, se sisältää kuvan nimeltä 1.png, joka tulee sijoittaa sivulle.

Turvallisuussyistä on suositeltavaa määrittää kuvan suhteellinen osoite, paitsi silloin, kun sijoitat kuvan toisella sivustolla sijaitsevalle sivullesi.

Kuvan mitat

Jokaisen kuvan koko määräytyy kahdella parametrilla: leveys ja korkeus. Tag Siellä on vastaavat vaihtoehdot: leveys Ja korkeus. Nämä parametrit saavat arvot pikseleinä (px).

Voit kysyä todelliset mitat Kuvat:

Tämä on valinnaista, mutta hyödyllistä, koska. nopeuttaa hieman selaimen sivun latausprosessia (selaimen ei tarvitse laskea näitä arvoja itse). Jos kuvan mitat asetetaan välittömästi tunnisteparametreihin , sitten alla annettu kuva sivulle varataan paikka, eikä sivun rakenne muutu latautuessa - teksti esimerkiksi hyppää.

Ja voit suurentaa tai pienentää kuvaa määrittämällä parametreja leveys Ja korkeus muita arvoja. Lisäksi, jos haluat muuttaa suhteellisesti molempia parametreja, riittää, että määrität vain yhdelle niistä uuden arvon ja jätät toisen pois. Selain laskee sen automaattisesti.

Esimerkiksi suurentaaksemme kuvaamme 1,5-kertaisesti, voimme kirjoittaa:

tai

Tuloksena on yksi:

Lisää vaihtoehtoja leveys Ja korkeus voi ottaa arvot prosentteina. Mutta! Huomaa, että nämä ovat prosentteja selainikkunan koosta. Tässä tapauksessa voit myös määrittää vain yhden parametrin ja jättää toisen pois.

Jos esimerkiksi haluamme kuvan olevan tasan puolet sivumme leveydestä, kirjoitamme seuraavasti:

Ja saamme:

Kehys kuvan ympärille

Tag on vielä yksi valinnainen parametri rajaa. Sen avulla voit asettaa kuvan ympärillä olevan kehyksen paksuuden. Oletusarvoisesti kuvan reunuksen paksuus on nolla, ts. ei kehystä.

Esimerkiksi näin voimme lisätä 3 pikselin paksuisen reunuksen kuvaamme:

Tämä selain näyttää meille:

Kehyksen väri vastaa sivulla olevan tekstin väriä, joka on asetettu parametrilla teksti tag (Katso oppitunti 6. Sivun ominaisuudet - body tag -asetukset), se on oletuksena musta.

Ja jos et halua nähdä kehystä, pakota parametri siihen rajaa tyhjä arvo:

Vaihtoehtoinen teksti

Vaihtoehtoinen teksti selain näyttää kuvan tilalla, kunnes se latautuu. Tai kuvan sijaan, jos se jostain syystä ei näy.

Milloin ja jos kuva ladattiin, vaihtoehtoinen teksti tulee näkyviin, kun viet hiiren osoittimen saman kuvan päälle.

Käytä parametria lisätäksesi vaihtoehtoista tekstiä alt tag , jolle on määritetty merkkijonoarvo, joka on välttämättä lainausmerkeissä.

Voit luoda monirivistä vaihtoehtoista tekstiä.

Voit tehdä tämän lisäämällä rivinvaihdon html-dokumenttiin.

teksti">

Kuvan kohdistus

Kuvassa, kuten kappaleessa, on käsite kohdistus suhteessa tekstiin ja muihin sivulla oleviin kuviin. Voit myös määrittää kohdistustyypin parametrilla kohdistaa tag .

Alla on taulukko mahdollisista parametriarvoista kohdistaa:

Vaihtoehdot teksti alkuun, alkuun, keskellä, häpeä, perusviiva, pohja aseta kuvan pystysuuntainen kohdistus. Ja parametrit vasemmalle Ja oikein kerro selaimelle, kummalla puolella tekstin tulee olla virtaa ympäriinsä kuva.

Täyte kuvan ympärillä

Voit estää tekstin rivittymisen liian lähelle kuvaa asettamalla kuvan ympärille täytön. Voit tehdä tämän parametrien avulla hspace(sisennykset vasemmalle ja oikealle) ja vspace(sisennys ylä- ja alapuolella) -tunniste .

Seuraava esimerkki havainnollistaa tapausta, jossa teksti kiertyy kuvan ympärille kuvan ollessa tasattu vasemmalle ja täytetty 5 pikselillä:

Tukholman kaupungissa, tavallisimmalla kadulla, tavallisimmassa talossa asuu tavallisin ruotsalainen perhe nimeltä Svanteson. Tämä perhe koostuu tavallisimmasta isästä, tavallisimmasta äidistä ja kolmesta tavallisimmasta lapsesta - Bosse, Betan ja Kid.

Tässä on tulos selaimessa:

Tukholman kaupungissa, tavallisimmalla kadulla, tavallisimmassa talossa asuu tavallisin ruotsalainen perhe nimeltä Svanteson. Tämä perhe koostuu tavallisimmasta isästä, tavallisimmasta äidistä ja kolmesta tavallisimmasta lapsesta - Bosse, Betan ja Kid.

Kuvan jakaminen osiin

On tapauksia, joissa on tarpeen sijoittaa sivulle iso kuva. Mutta sitten sivun latautuminen kestää kauan. Mitä tehdä?

Yksi mahdollisista ulospääsy tilanteesta - leikkaa kuva osiin ja aseta se sivulle taulukon avulla. Ja jotta kuva näyttäisi kokonaiselta, on tarpeen poistaa taulukon reuna ja kaikki sisennykset solujen sisällä ja välillä. Nuo. määrittää asianmukaiset tunnisteparametrit

nolla-arvot: border="0", soluväli = "0", cellpadding="0".

Seuraavassa esimerkissä jaamme kuvan 4 osaan. Tältä taulukko näyttää:

Ja tässä tulos: