HTML-komento kuvan lisäämiseksi. HTML-tunnisteet kuvien, kuvien lisäämiseen HTML:ään

Hei kaikki!!! Tässä artikkelissa opit lisäämään kuvan HTML-dokumenttiin. Se ei ole ollenkaan vaikeaa. Mutta ensin haluaisin antaa sinulle suosituksia verkkosivun kuvista.

Neuvoja: Kun sijoitat kuvia web-sivulle, älä hurahdu animoituihin kuviin, sillä se kääntää lukijan huomion pois tärkeimmästä asiasta - tekstistä. Parempaa käyttöä tavallinen kuva ei animaatiota.
Yritä käyttää ainutlaatuisia kuvia verkkosivuillasi. Miten tehdä ainutlaatuinen kuva voit lukea ja ottaa kauniita kuvia Sinä pystyt .

Aloitetaan.

Kuinka lisätä kuva html:ään?
Joten, kuten sanoin, tässä ei ole mitään monimutkaista, lisää tämä html-koodi.

kartinka on kuvan nimi
jpg on kuvan jatke. Pääte voi olla gif, png, bmp.

Jos kuva sijaitsee kuvakansiossa, kuvan polku on seuraava:

kuvat - sen kansion nimi, jossa kuva sijaitsee "kartinka.jpg".

Jos kuva on toisella sivustolla, koodi on seuraava:

https://www.site on sivuston osoite.

Esimerkki :

Voit tehdä tämän liittämällä kuvan linkkielementin väliin:

Attribuutit kuville

ALIGN – tämä määrite on suunniteltu käärimään tai kohdistamaan kuva vaakasuoraan.
vasemmalle - Tasattu vasemmalle, teksti virtaa oikealle.
oikein - Tasattu oikealle, teksti virtaa vasemmalle.

Tulos :

oikea kohdistus

HSPACE - vaakatila kuvasta (pikseleinä).
VSPACE - pystysuora tila kuvasta (pikseleinä).

Tulos :

sisennykset kuvasta

HEIGHT - kuvan korkeus (pikseliä).
WIDTH - kuvan leveys (pikseliä).

Tulos :

TITLE - Tämä on kuvan otsikko. Otsikko tulee näkyviin, jos viet hiiren osoittimen kuvan päälle.

title=" Hei kaikille - sivusto!!!!}">

Tulos :

otsikkokuva

BORDER - tämä määrite vastaa kuvan ympärillä olevan reunuksen koosta. Kehykset ilmestyvät tällaisissa tapauksissa, kun teet kuvasta linkin. Jos asennat nolla-arvo BORDER-attribuutti, reunaa ei näytetä.

Tulos :

Ja jos muutat rajan merkitys 5. päivänä:

Tulos :

Mitä tahansa kuvaa voidaan käyttää taustana. Voit tehdä tämän lisäämällä background-attribuutin body-tunnisteeseen.

background="oma_tausta.jpg">

Tekstiä voidaan näyttää kuvan taustalla.

Esimerkki :

Tulos :

Kuva taustana

Tähän huomautukseen voisin lopettaa aiheen "Kuvan lisääminen HTML:ään", mutta tiedän, että monet ovat kiinnostuneita kysymyksestä kuvan keskittämisestä.
Keskittääksesi kuvan, sinun tarvitsee vain käyttää tätä temppua:

Siinä nyt kaikki varmaa. Jatketaan seuraavaan oppituntiin.

Asettamista varten kuvat HTML-muodossa Kaksi pääasiallista käytettyä muotoa ovat GIF ja JPEG. GIF-muoto voi tallentaa yksinkertainen animaatio(dynaamiset bannerit), JPEG sopii erinomaisesti kuville, joissa on paljon värejä, kuten valokuville. Kolmas verkkografiikan muoto on PNG-muodossa, mutta sitä ei käytetä laajasti web-suunnittelussa. Mikä tahansa kuva sisään GIF-muodot tai JPEG on lisätty web-sivulle käyttämällä tunnistetta, sulkevaa tunnistetta ei ole.

Attribuutin kautta src kuvatiedoston osoite (URL) on määritelty, ts. selain löytää haluttu kuva sivustohakemistossa tässä määritteessä määritettyä polkua (URL) pitkin. Mukavuuden vuoksi kaikki sivuston kuvat ovat mukana erillinen kansio, yleensä nimellä kuva. Ota esimerkiksi mikä tahansa kuva, mieluiten pienimuotoinen, ja tallenna se luotuun kansiokuvaan nimellä primer.jpg. Seuraavaksi viitataan siihen koulutusta varten.

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

src="image/primer.jpg" >

Seuraavaksi tarkastellaan, kuinka kuva lisätään HTML-dokumenttiin ja määritetään sen näyttö. Toimiaksesi tarvitset vain yllä mainitun editorin ja selaimen.

Jos sinulla ei vieläkään ole Notepad++:a tai sinulla on ongelmia sen lataamisessa ja sinua kiusaa kysymys - kuinka lisätä kuva html-tiedostoon Notepadissa?

Vastaus on yksinkertainen, tavallisessa muistikirjassa työskentely eroaa vain siinä, että se ei korosta koodia eri väreillä luettavuuden ja koodin erottamisen vuoksi itse tekstistä.

Kuinka lisätä kuva HTML-sivulle

Muokkausohjelman asennuksen jälkeen vastaava kohde tulee näkyviin kontekstivalikkoon, joka tulee näkyviin, kun napsautat mitä tahansa tiedostoa hiiren kakkospainikkeella.

Jos haluat muokata tällaista tiedostoa, soita kontekstivalikko Napsauta sitä hiiren kakkospainikkeella ja sitten "Muokkaa Notepad++:lla".

Testisivua käytetään koodin muutosten tulosten tarkkailuun.

Jos haluat lisätä kuvan html-koodiin, käytä yksirivistä tunnistetta img. Sen tärkein ominaisuus on valokuvan lähde.

Tämä voi olla mikä tahansa tiedosto, kiintolevyllä tai linkki verkossa olevaan kuvaan. Kehystetty tunnisteilla < p> p>.

Valokuvan lisäämiseksi sinun on kirjoitettava seuraava rivi:

Tältä se näyttää editorissa:

Ja näin sen läsnäolo näkyy sivulla:

Src osoittaa kuvan lähteen. Yksi tiedostonimi riittää, jos kuvatiedosto on samassa html-dokumentti hakemistoja.

Jos valokuva sijaitsee toisessa hakemistossa, sinun on määritettävä polku siihen alkaen kansiosta, jossa html-tiedosto sijaitsee.

Neuvoja! On tärkeää ottaa huomioon, että tietyn valokuvatiedoston polku ei saa sisältää kyrillisiä merkkejä. Lisäksi tiedoston nimeä kirjoitettaessa kirjainkoko on tärkeä.

Voit käyttää lähteenä Internetistä saatua kuvaa. Tätä varten sinun tarvitsee vain ilmoittaa linkki siihen attribuutissa kiintolevyn sijainnin sijaan.

Tiedostopolun muotoilutaulukko

Jos haluat muuttaa kuvan kokoa, sinun on lisättävä kaksi attribuuttia: leveys Ja korkeus. Arvo muotoillaan samalla tavalla kuin mikä tahansa attribuutti.

Yhtävyysmerkin jälkeen sinun on määritettävä koko pikseleinä.

Jos saatavilla selvästi annetut mitat kuvassa, se näytetään sivulla seuraavasti:

Kuvan tasaus ja muokkaaminen

Kuinka lisätä valokuva html-tiedostoon keskelle? Voit määrittää kuvan sijainnin sivulla käyttämällä kohdistaa, joka liittyy tunnisteeseen s.

Sille sallitaan useita arvoja: keskusta(keskusta), vasemmalle(vasen reuna) ja oikein(oikea reuna).

Tältä kuva näyttää sivulla oikean reunan keskellä.

Tärkeä! Jotta kuvan sijainti voidaan määrittää suhteessa tekstiin sivun sijaan, img-tunnisteessa on käytettävä align-attribuuttia. Arvot ovat samat kuin tag-attribuutissa.

Riippuen aseta arvo, kuva muuttaa sijaintiaan tekstiin nähden.

Jos haluat sijoittaa kuvan tekstiin, kirjoita vain tunniste img(kaiken kehyksen kanssa) sisään tekstilohko V .

Voit lisätä reunuksen käyttämällä border-attribuuttia, jossa on numeerinen arvo, joka ilmaisee reunuksen paksuuden pikseleinä.

Aseta pysty- ja vaakasuorat sisennykset käyttämällä vspace Ja hspace. Niiden numeerinen arvo tarkoittaa etäisyyttä tekstistä kuvaan suoraan pikseleinä.

Esimerkissä attribuutti vspace arvoksi on asetettu 50 pikseliä.

Vaakasuuntainen täytekoko ilmaisee etäisyyden, jolle teksti sijoitetaan, kun se kääritään kuvan ympärille.

Kaksi muuta hyödyllistä attribuuttia - alt Ja otsikko. Ensimmäinen asettuu vaihtoehtoinen teksti kuva.

Sen avulla, jos kuva ei jostain syystä lataudu, sen sijaan näytetään attribuutin arvossa määritetty teksti.

Voit kokeilla attribuutin ominaisuuksia siirtämällä tiedoston koodissa määritetystä hakemistosta.

Attribuuttiarvoksi määritetty teksti otsikko, näyttää työkaluvihjeen, kun siirrät hiiren suoraan kuvan päälle. Koodissa sen muotoilu ei eroa muista määritteistä.

Sivun päivityksen jälkeen tulos on seuraava:

Tunnisteen ominaisuustaulukko img

Kuvat – ehkä ne ovat niitä, jotka muokkaavat meitä yleinen idea O maailmanlaajuinen verkko. Yhtä mieltä siitä graafista tietoa ihminen muistaa yleensä paljon paremmin kuin tekstin. Siksi kuvat ovat tärkeä osa mitä tahansa verkkosivustoa ja mitä tahansa verkkosivua. Ja siksi haluan kertoa sinulle, kuinka voit lisätä kuvan html:ään.

Kuvan lisääminen html-muodossa tagin avulla

Tiedät varmasti, että kaikki html:n komennot suoritetaan tagien avulla. Joten keksimme kuville oman tunnisteen - . Se on yksittäinen, eli siinä ei ole sulkevaa osaa.

Tärkein asia img-attribuutti tag on src (lähde) – kuvan polku. Kirjoitat siihen osoitteen, jossa kuva sijaitsee. Se voidaan kirjoittaa absoluuttiseksi ( website/images/images2/image.jpg) tai sukulaisena ( images/images2/image.jpg).

Molemmat polut johtavat samaan image.jpg-tiedostoon, joka sijaitsee image2-kansiossa. Se puolestaan ​​on kuvahakemistossa ja se juurikansiossa. Jos kirjoitat kaiken suhteellisen muistiin, kaikki pysyy toiminnassa, kun muutat sivustosi verkkotunnusta. Esimerkiksi, wordpress-editori oletuksena lisää absoluuttiset osoitteet. Mutta henkilökohtaisesti en aio vaihtaa verkkotunnusta ja se sopii minulle.

Lisäominaisuudet ja suunnittelu css:n kautta

Poistutaanpa siis aiheesta Kuvan näyttämiseksi riittää, että määrität src-attribuutin, mutta sen suunnittelussa on monia muita määritteitä.

• leveys ja korkeus – kuvan leveys ja korkeus. Se voidaan asettaa vastaavilla img-tunnisteen määritteillä
• align – kuvan tasaus tekstiin nähden. Oletuksena se on tasattu vasemmalle. Voit myös laittaa sen oikealle ja keskelle (oikealle, keskelle)
• alt – vaihtoehtoinen teksti, joka näytetään, jos käyttäjä on poistanut kuvien näyttämisen käytöstä selaimessa. On hyödyllistä täyttää se
• otsikko on melkein sama. Eräänlainen kuvaus kuvasta, joka tulee näkyviin, kun siirrät osoittimen sen päälle
• vspace ja hspace – kuvan pysty- ja vaakatila muusta sisällöstä. Huomio! Attribuutit ovat jo vanhentuneita, ja on parempi asettaa nämä sisennykset tyylisivun kautta
• luokka – tyyliluokka, joka liitetään kuvaan ja soveltaa siihen joitain tyylejä

Lisää niin söpö kuva. Täällä olemme lisänneet esikatseluluokan ja nyt css:llä voimme käyttää sitä sen kautta ja määrittää kaikki tyylit. Esimerkiksi nämä:

Esikatselu (täyte: 20px; marginaali: 10px; reunus: 5px kiinteä oranssi; muunnos: vinoX(10de); laatikkovarjo: 0 0 15px 10px violetti )

Anna minun tehdä yhteenveto

Joten kuvan näyttämiseksi sinun tarvitsee vain kirjoittaa img-tunniste ja lisää siihen src-attribuutti, joka määrittää kuvan polun. Kaikki muu on lisäominaisuuksia- kohdistus, mitat, vaihtoehtoinen teksti, kierrokset, kehykset jne.

Ja lopuksi, ihannetapauksessa kaikki tämä tulisi kirjoittaa CSS:n kautta. Eli älä aseta määritteisiin mittoja, vaan lisää kuvaan ylimääräinen tyyliluokka, joka määrittää mitat. Sama asia kohdistuksen kanssa, joka css:ssä voidaan tehdä käyttämällä tekstin tasausominaisuudet, sekä kelluvat lohkot kelluvat .

26.06.2015

Hei kaikki!
Jatkamme ahkerasti HTML:n perusteiden opiskelua.
Tällä oppitunnilla kerron sinulle, kuinka lisätä kuva HTML:ään-asiakirja, kuinka tehdä kuva taustaksi, kuvan koko, tekstin kiertäminen kuvan ympärille, kuvan kohdistaminen. Kaikki luetellut mahdollisuudet Vahvistan sitä esimerkeillä ja tuloksilla.
Joten verkkosivuilla olevat kuvat voivat olla joko taustalla tai tavallisia. Mitä eroa on taustakuvalla ja tavallisella kuvalla?

Taustakuva sijoitettu taustaksi, jonka päälle voit lisätä muita kuvia, tekstiä, taulukoita jne.

Normaali kuva hylkii muut sivun elementit (muut kuvat, teksti, taulukot jne.). Esimerkkiä käyttämällä näet ja ymmärrät kaiken.
Web-sivuilla on suositeltavaa käyttää seuraavia muotoja: JPEG kuvia(JPG), GIF ja PNG.

○ Kuinka tehdä kuva taustaksiHTML

Kuvan tekeminen tagin taustaksi sinun on määritettävä "tausta"-attribuutti:

Katsotaan nyt täysi esimerkki. Lisää kuvatiedosto "fon.jpg" HTML-tiedoston viereen.

ja lisää tämä koodi HTML-tiedostoon:

Jpg">

Tulos tulee olemaan tällainen:

Huomio

Väärä nimi:

Oikea nimi:

○ Kuinka lisätä kuvaHTML

Jos haluat lisätä kuvan HTML-dokumenttiin, käytä tunnistetta "src"-parametrilla, joka määrittää kuvan polun tai osoitteen.

Katsotaanpa nyt koko esimerkkiä. Lisää kuvatiedosto “kartinka.jpg” HTML-tiedoston viereen ja kirjoita tämä koodi HTML-tiedostoon:

Hei, tämä on ensimmäinen sivuni sivustolla.

Tulos tulee olemaan tällainen:

Huomio: Kuvan nimi on kirjoitettava latinaksi, muuten kuvaa ei näytetä.

Väärä nimi:

Oikea nimi:

Luulen, että olet ymmärtänyt kaiken tähän asti. Yritetään nyt yhdistää nämä kaksi esimerkkiä. Luodaan verkkosivulle tausta, lisätään kuva ja teksti.

Jpg">

○ Kuinka lisätä kuva, jos se on kansiossa "img"tai"kuvat"?

Jos kuva on "img"- tai "images"-kansiossa, sinun on määritettävä polku HTML-tiedostosta "img"- tai "images"-kansioon ja kirjoitettava sitten kuvan nimi tarkenteella. Se näyttää tältä:

Jos kuva on toisella sivustolla tai blogissa, sinun on ilmoitettava sivuston osoite ja tarvittaessa kansio, jossa kuva sijaitsee. No, tietenkin, sinun on ilmoitettava kuvan nimi sen laajennuksella.

Edellinen viesti
Seuraava sisääntulo