HTML-perusteet - Kuvien näyttäminen

• Saattaa 18, 2024

Kun verkkosivustosi teksti on lähetetty ja muotoiltu mieleiseesi, on aika maustaa sivu muutamalla kuvalla. Kuvien lisäksi, että kuvat lisäävät väriä ja elämää sivuillesi, voit käyttää niitä myös tekstitehosteiden luomiseen, mikä olisi vaikeaa tai mahdotonta tehdä normaalin tekstin ja muotoilun kanssa. Esimerkiksi fonttivalinnat rajoittuvat tyypillisesti siihen pieneen määrään fontteja, joiden varmuudesta voit olla varma, että olet asennettu kävijöiden tietokoneisiin, koska jos heillä ei ole kirjasinta asennettuna, he eivät näe sitä sivustossasi! Aina kun lähetät tekstiä, jota ei voi käyttää kirjasimessa, vierailijoiden tietokoneet tekevät siitä minkä tahansa käytettävissä olevan kirjasintyylin, joka on lähinnä tyyliä, mikä voi usein tuhota verkkosivustosi suunnitteluun.

Toisaalta, jos käytät kuvankäsittelyohjelmaa tekstin sieppaamiseen hienolla kirjasimella ja postitat sen GIF- tai JPEG-tiedoksi sivustollesi, kuka tahansa kävijä näkee sen tarkalleen haluamallasi tavalla - koska nyt se on pikemminkin teksti tekstistä kuin pikemminkin itse teksti. Tämän avulla voit vapaasti käyttää mielikuvituksellisia fontteja otsikoihisi ja ryhmitellä niitä epätavallisilla tavoilla.

Kuvien näyttämiseen käytetty perustunniste on seuraava:



Yllä oleva koodi toimii täydellisesti HTML-muodossa. Jos käytät XHTML-tiedostoa tai haluat olla varma, että sivustosi on XHTML-valmis, sinun tulee lisätä vinoviiva sulkeaksesi tunniste, koska XHTML: ssä et voi käyttää avoimia tunnisteita:



'Src' on lyhyt lähde, ja käytät sitä määrittämään tiedostosi polulle kuvaasi - toisin sanoen kertoa selaimellesi, mistä kuva löytyy sivustoltasi. Jos pidät kuvia samassa kansiossa kuin Web-sivusi, sinun ei tarvitse lisätä kansiota 'src' -tekstiin - voit kirjoittaa vain kuvatiedoston nimen.

Kun olet määrittänyt kuvalähteen, voit parantaa tätä peruskehystä useilla valinnaisilla määritteillä saadaksesi parhaan hyödyn kuvista. Yksi ominaisuus, jota sinun tulisi melkein aina käyttää, on 'alt' -attribuutti. Tämän avulla voit määrittää, minkä tekstin selaimen pitäisi näyttää, jos se ei pysty kuvaan kuvaasi jostain syystä. Alt-teksti valmistellaan seuraavasti:



Toinen hyödyllinen ominaisuusjoukko on 'leveys' ja 'korkeus' -tunnisteet. Niiden avulla voit näyttää kuvia, joiden koko on eri kuin todellisen kuvan koon. Voit käyttää niitä kuvan säätämiseen, jotta se sopii täydellisesti sivusi kokonaisuuteen. Yleensä on kuitenkin edullista muuttaa todellista kuvan kokoa kuvankäsittelyohjelmilla ja lähettää kuva sitten verkkoon kahdesta syystä. Ensinnäkin, kuvankäsittelyohjelma antaa melkein aina parempana tuloksen kuin koon muuttaminen käsin. Toiseksi, leveys- ja korkeus-tunnisteiden muuttaminen ei muuta kuvan todellista tiedostokokoa, joten jos sinulla on valtava kuva, joka näytetään pikkukuvana, kuvan lataaminen vie yhtä kauan ja pureskellaan samalla tavalla. paljon kaistaa, kuin olisit osoittanut sen täysikokoisena.

Kun määrität kuvan koon, voit ilmoittaa korkeuden, leveyden tai molemmat. Koot määritetään pikselillä, kuten alla näet:



Voit myös "kohdistaa" kuviasi, jotta ne toimivat sujuvasti tekstin virtauksen kanssa. Jos valitset kohdistuksen vasemmalle, teksti alkaa kuvan oikealta puolelta. Jos valitset oikean kohdistuksen, kuva näkyy sivun oikealla puolella ja teksti tulee kuvan vasemmalle puolelle ja murtuu sitten uudelle riville.

Kuvan kohdistus asetetaan seuraavasti:



Voit myös asettaa kohdistuksen arvoksi "yläosa", "alaosa" tai "keskimmäinen", jotta kuva riviin tulee joko rivin ylä- tai alaosaan. Jos et määritä kohdistusta, kuvan oletusarvo on alhaalta.

Sivuhuomautuksena voit sisällyttää kuvasi määritteet (src, kohdistaa, alt jne.) Missä tahansa järjestyksessä kuvatunnisteisiin. Henkilökohtainen mielestäni on luetella ensin 'src' -ominaisuus, koska se on alkeellisin ominaisuus ja se on sisällytettävä jokaiseen kuvatunnisteeseen, mutta voit käyttää mitä tahansa sekvenssiä, joka tuntuu sinulle luonnollisimmalta.

Video-Ohjeita: HTML Opas Suomeksi | Osa 1 - Perusteet (Saattaa 2024).