Zatim ćemo pogledati kako umetnuti sliku u HTML dokument i konfigurirati njezin prikaz. Za rad su vam potrebni samo gore navedeni editor i preglednik.

Ako još uvijek nemate Notepad++ ili imate problema s preuzimanjem i muči vas pitanje - kako umetnuti sliku u html u notepadu?

Odgovor je jednostavan, rad u običnoj bilježnici razlikuje se samo po tome što nema označavanje koda različite boje, za čitljivost i odvajanje koda od samog teksta.

Kako umetnuti sliku u HTML stranicu

Nakon instaliranja uređivača, in kontekstni izbornik Kada desnom tipkom miša kliknete bilo koju datoteku, pojavit će se odgovarajuća stavka.

Sada, da biste uredili takvu datoteku, samo pozovite kontekstni izbornik desnim klikom na nju, zatim "Uredi s Notepad++".

Testna stranica će se koristiti za promatranje rezultata promjena u kodu.

Da biste umetnuli sliku u html kod, koristite oznaku jednog retka img. Njegov glavni atribut je izvor fotografije.

To može biti bilo koja datoteka, na tvrdom disku ili poveznica na sliku koja postoji na mreži. Uokvireno oznakama < p> p>.

Za dodavanje fotografije morat ćete unijeti sljedeći redak:

Ovako će izgledati u editoru:

I ovako će se njegova prisutnost prikazati na stranici:

Src označava izvor slike. Dovoljan je jedan naziv datoteke ako je slikovna datoteka u istom html dokument imenici.

Ako se fotografija nalazi u drugom direktoriju, tada ćete morati navesti put do nje, počevši od mape u kojoj se nalazi html datoteka.

Savjet! Važno je uzeti u obzir da na putu do dana datoteka Fotografija ne smije sadržavati ćirilična slova. Osim toga, kada pišete naziv datoteke, važna su velika i mala slova.

Kao izvor možete koristiti ilustraciju s Interneta. Da biste to učinili, trebate samo naznačiti vezu na njega u atributu, umjesto lokacije na tvrdom disku.

Tablica formatiranja staze datoteke

Za promjenu veličine slike morat ćete dodati dva atributa: širina I visina. Vrijednost je oblikovana na isti način kao i za bilo koji atribut.

Nakon znaka jednakosti morate navesti veličinu u pikselima.

Ako je jasno dostupno zadane dimenzije ilustracija, bit će prikazana na stranici na sljedeći način:

Poravnavanje i uređivanje slike

Kako ubaciti fotografiju u html u centar? Da biste dodijelili položaj slike na stranici, koristite uskladiti, vezano za oznaku str.

Za njega je dopušteno nekoliko vrijednosti: centar(centar), lijevo(lijevi rub) i pravo(desni rub).

Evo kako slika izgleda na stranici, centrirana na desni rub.

Važno! Da biste dodijelili lokaciju fotografije u odnosu na tekst, a ne na stranicu, atribut align mora se koristiti u oznaci img. Vrijednosti su iste kao za atribut oznake.

Ovisno o postavljena vrijednost, slika će promijeniti svoj položaj u odnosu na tekst.

Za postavljanje slike u tekst samo unesite oznaku img(sa svim okvirom) u blok teksta V .

Za dodavanje obruba upotrijebite atribut obruba s numeričkom vrijednošću koja označava debljinu obruba u pikselima.

Za postavljanje okomitih i vodoravnih margina koristite vspace I hspace. Njihova brojčana vrijednost označava udaljenost od teksta do slike, izravno u pikselima.

U primjeru, atribut vspace vrijednost je postavljena na 50 piksela.

Vodoravna veličina ispune označit će udaljenost na kojoj će se tekst nalaziti prilikom prelamanja oko slike.

Još dva korisna atributa - alt I titula. Prvi postavlja alternativni tekst slika.

Uz to, ako se slika ne učita iz nekog razloga, umjesto nje će se prikazati tekst naveden u vrijednosti atributa.

Kako biste isprobali mogućnosti atributa, možete premjestiti datoteku iz direktorija navedenog u kodu.

Tekst naveden kao vrijednost atributa titula, prikazat će opis alata kada prijeđete mišem izravno preko slike. U kodu se njegov dizajn ne razlikuje od ostalih atributa.

Nakon osvježavanja stranice rezultat će biti ovakav:

Tablica atributa oznake img

Dodavanje slika na vašu web stranicu ili profil na društvenoj mreži je odličan način ukrasite svoju stranicu. HTML (Hypertext Markup Language) je drugačiji veliki iznos značajke web-razvoja, no kôd potreban za dodavanje slika prilično je jednostavan.

Dakle, kako umetnuti sliku u HTML?

Učitajte svoju sliku na besplatno mjesto za hosting slika kao što je Photobucket ili TinyPic, koje pružaju trajni pristup učitanoj datoteci. Nakon kopiranja, poveznica na sliku pojavit će se izravno na mjestu hostinga. Međutim, ako plaćate vrhunske usluge takve usluge, bolje je koristiti dodatne mogućnosti. Ovo je pouzdanije jer besplatni hosting slike slike se ponekad ne otvaraju zbog preopterećenosti. Nakon što ste sliku postavili na neki od online servisa, otvorite je na računalu novi dokument V uređivač teksta(na primjer, u Notepadu) ili idite na ploču za uređivanje željenu stranicu vaše stranice (gdje možete promijeniti HTML kôd).

Pisanje oznaka

Nastavljajući govoriti o tome kako umetnuti sliku u HTML, započnite s oznakom IMG. Nakon toga morate dodati razmak i kosu crtu prije završnog znaka. Dakle, morate odabrati sljedeću kombinaciju -< img />. Osim toga, dostupni su mnogi atributi, ali samo je jedan od njih apsolutno neophodan. Ovo je adresa ili URL vaše slike. Određuje se kako slijedi -< img src ="URL_вашей_картинки" / >.

Alternativni tekst

Zatim, kada pokušavate umetnuti sliku u HTML, morate dodati atribut Alt. Ovo definira alternativni tekst u slučaju da se slika ne uspije učitati. Ovaj tekst je također namijenjen slabovidnim korisnicima koji koriste čitače zaslona. Ako zadržite pokazivač miša iznad slike, alternativni tekst pojavit će se u opisu alata, ali ova je značajka dostupna samo u Internet Explorer. Da biste ga vidjeli u drugim aplikacijama, trebat će vam posebni dodaci. Da biste unijeli takav opis, unesite ga uz Alt. (Možete preskočiti ovaj korak ako želite). Ako koristite ovu funkciju, poveznica će izgledati ovako:

< img src ="URL_вашей_картинки" alt ="tekst_opisa" title ="Opis alata" />

Dimenzije i parametri slike

Nastavljajući slijediti upute za umetanje slike u HTML, možete dodatno odrediti veličinu slike pomoću atributa visine i širine u pikselima ili postocima. Imajte na umu da će se slika prikazati zbog promjene veličine prilikom učitavanja. Preglednik će i dalje u početku koristiti stvarnu veličinu slike. Iz tog razloga, ako je vaša slika prevelika, bolje je promijeniti joj veličinu pomoću programa za uređivanje fotografija, a ne samo adrese veze. Sada bi vaš kod mogao izgledati ovako:

< img src = "URL вашей картинки" alt = "tekst opisa alata" title = "Opis alata" height ="50%" width ="50%" />

< img src ="URL вашей картинки" alt ="tekst opisa alata" title ="Opis alata" height ="25px" width="50px" / >

Ostali atributi

Vrijednost za ove atribute je ili pozitivna vrijednost piksela ili postotak od originala (1-100%). Govoreći o tome kako umetnuti sliku u HTML, također se može primijetiti da se može postaviti bilo gdje na web stranici s atributom poravnanja - gore, dolje, sredina, desno, lijevo itd. Atribut HSPACE koristi se za vodoravno umetanje slika duž lijeve i desna strana, VSPACE - za utovar okomito između vrha i dno stranice i u vezi s drugim sadržajem. Ako govorimo općenito o HTML-u - kako umetnuti sliku i kako nadopuniti sadržaj stranice, glavna stvar je ne pretjerivati. Inače će vaš resurs izgledati nemarno i previše šareno. Za prikaz logotipa ili animacija GIF format htjeti najbolje rješenje, a za kvalitetne slike i fotografije prikladniji je JPEG format.

To omogućuje prikaz sadržaja druge stranice unutar jedne stranice. Na primjer:

Većina slika koje osoba vidi na web stranicama također je sadržaj s druge stranice. Evo, konkretno, adrese emotikona u .gif formatu:

Evo načina za dodavanje slike na web mjesto, što se može istaknuti ako pogledate kôd stranice:

HTML: oznaka
http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" alt="smajlić" height="30" width="30"> !}
CSS: svojstva i
CSS: pseudo elementi i
HTML: oznaka vektorska grafika
CSS: nema URL-a

Kako saznati adresu slike i kopirati je

Postoji nekoliko načina kopiranja adrese slike:

1. Zadržite kursor iznad fotografije i kliknite desna tipka mišem, u kontekstnom izborniku koji se pojavi od vas će se tražiti da kopirate URL, kliknite na traženu stavku.
   Sl.1 Ako pokažete na fotografiju i kliknete desnom tipkom miša, tada Mozilla Firefox Otvorit će se kontekstni izbornik sa sljedećim stavkama
2. Postavite pokazivač iznad fotografije, kliknite desnu tipku miša, u kontekstnom izborniku koji se pojavi od vas će se tražiti da proučite karakteristike fotografije, kliknite željenu stavku (na slici 1 pogledajte stavku "Informacije o slici" ; u Internet Exploreru pogledajte stavku "Svojstva"), u prozoru koji se otvori odaberite adresu slike,
   • Kliknite desnom tipkom miša i kliknite na "Kopiraj" u kontekstnom izborniku koji se pojavi.
   
   Sl.2 Ako pokažete na fotografiju u Mozilla Firefoxu, kliknete desnom tipkom miša, odaberete “Informacije o slici” u kontekstnom izborniku koji se pojavi, otvorit će se prozor u kojem možete vidjeti popis slika korištenih na stranici, njihove adresa, alternativni tekst (sadržaj u atributu alt), stvarna veličina i korišteno mjerilo
3. Postavite pokazivač iznad fotografije, kliknite desnu tipku miša, u kontekstnom izborniku koji se pojavi od vas će se tražiti da odete na stranicu sa slikom, kliknite željenu stavku (na slici 1 pogledajte stavku "Otvori sliku") . Otvorit će se stranica koja sadrži samo jednu sliku. U pune visine, ako je prethodno smanjen za ili sa koristeći CSS. Odaberite adresu stranice koja se otvara u adresna traka preglednik,
   • pritisnite kombinaciju tipki tipkovnica Ctrl+C.
   
   Sl.3 Ovako izgleda stranica s emotikonima.
   Njezin URL: http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif
4. Na dodirni uređaji(pametni telefon, tablet) držite prst preko fotografije dugo vremena bez pomicanja, u kontekstnom izborniku koji se pojavi od vas će se tražiti da odete na stranicu sa slikom, kliknite željenu stavku (može se zvati "Pogledaj sliku") . Otvorit će se stranica koja sadrži samo jednu sliku. U punoj visini ako je prethodno smanjena pomoću ili pomoću CSS-a. Zatim dugo pritisnite adresu u adresnoj traci preglednika. Nakon što se pojave klizači i odabere cijeli URL (ako je potrebno, klizači se mogu pomaknuti na potrebnu udaljenost), kliknite gumb "Kopiraj" na ploči koja se pojavi.
5. Zadržite pokazivač iznad fotografije, kliknite desnu tipku miša, u kontekstnom izborniku koji se pojavi od vas će se tražiti da odete na stranicu pozadinska slika, kliknite na traženu stavku. Otvorit će se stranica koja sadrži samo jednu sliku. Puna visina ako je prethodno smanjena pomoću CSS-a. Odaberite adresu stranice koja se otvara u adresnoj traci preglednika (vidi sl. 3),
   • Pritisnite desnu tipku miša i odaberite "Kopiraj" u kontekstnom izborniku koji se pojavi.
   • Pritisnite tipkovni prečac Ctrl + C.
   
   

Kako spremiti sliku

Postavite pokazivač iznad fotografije, kliknite desnu tipku miša, u kontekstnom izborniku koji se pojavi od vas će se tražiti da spremite sliku, kliknite željenu stavku (na slici 1 pogledajte stavku "Spremi sliku kao... ”), u prozoru koji se otvori odaberite mapu na računalu u koju će se crtež spremiti.

Ako je fotografija pozadinska slika, onda prvo morate otići na stranicu sa slikama (vidi sl. 3).

Kako dodati sliku na web stranicu

Najprije se slika mora prenijeti s vašeg računala na mjesto hostinga, u društvena mreža(U kontaktu s, Google+ itd.), Yandex.Disk ili Google.Disk, tako da slika ima svoju adresu na Internetu.

Ako postoji vizualni uređivač, tada je redoslijed radnji obično sljedeći:

1. postavite kursor miša na mjesto gdje bi se trebala pojaviti fotografija,
2. kliknite na ikonu sličnu ili na,
3. odaberite datoteku sa svog računala,
4. ako je moguće, ispunite alternativni tekst (tj. opis slike).

Rezultat: slika će biti umetnuta na stranicu stranice, i što je najvažnije, postavljena na poslužitelj web projekta. Sada će imati svoju adresu na internetu. A sada možete urediti kôd koji nudi vizualni uređivač na kartici "HTML", budući da vizualni uređivač često dodaje nepotrebne oznake, a mogućnosti HTML-a i CSS-a su neusporedivo veće.

Ako već postoji URL, ali s druge malo poznate stranice, onda je ipak bolje takvu fotografiju spremiti na svoje računalo i zatim je prenijeti na poslužitelj stranice, ako ovu radnju dopušteno od strane vlasnika fotografije, kako se ne bi kršila autorska prava, jer

• Neka mjesta mogu zabraniti korištenje adresa slika na drugim resursima (pročitajte više o zabrani hotlinkinga).
• stranice su kratkog vijeka i nakon nekog vremena s brisanjem web projekta, slika na vašoj stranici također će nestati, ostavljajući na svom mjestu najbolji mogući scenarij Samo zamjenski tekst.

Ako ne vizualni urednik, tada je redoslijed radnji obično sljedeći:

1. stvoriti mapu slika,
2. u mapi slike napravite .htaccess datoteku čiji će sadržaj biti # zatvorite pristup http://site.ru/image/ Opcije - Indeksi # zatvorite pristup http://site.ru/image/.htaccess red dopustiti, odbiti odbiti od svih
3. učitaj u mapu slika slika, koji se zove npr. plain.gif (ubuduće će se sve slike također učitavati u ovu mapu),
4. na HTML stranici koristite URL poput http://site.ru/image/plain.gif, na primjer, http://site.ru/image/plain.gif" alt="smajlić" height="30" width="30">!}

Pozdrav dragi čitatelji bloga! U ovom ćete članku saznati sve o kako umetnuti sliku na html stranica . Imate li nekoliko slika koje želite staviti na svoju stranicu ili želite staviti logo na svoju stranicu? Sve je ovo jednostavno. Nakon što pročitate ovaj članak, moći ćete bez ikakvih poteškoća umetati slike u svoje html stranice. Da bismo to učinili, detaljno ćemo govoriti o tome označiti i njegovih atributa, ukratko ćemo razmotriti formate grafičke datoteke, kao što su gif, jpeg i png, a također pogledajte nove HTML5 značajke koje olakšavaju umetanje videa i zvuka na vaše web mjesto.

Zbog činjenice da grafički podaci i html tekst ne mogu se kombinirati u jednoj datoteci; za njihov prikaz na stranici koristi se drugačiji pristup nego kod ostalih elemenata html stranica. Kao prvo, grafičke slike, a ostali multimedijski podaci pohranjuju se u zasebne datoteke. I da ih ugrade u web stranicu koju koriste posebne oznake, koji sadrže poveznice na ove zasebne datoteke. Konkretno, takva oznaka je označiti . Nakon što naiđe na takvu oznaku s adresom, preglednik prvo od web poslužitelja zatraži odgovarajuću datoteku sa slikom, audio ili video zapisom, a tek potom je prikaže na web stranici.

Pozivaju se sve grafičke slike i, općenito, svi podaci koji su pohranjeni u datotekama odvojenim od web stranice provedeno elementi stranice.

Prije umetanja slika i detaljnog gledanja oznake , vrijedi naučiti malo o grafičkim formatima.

Formati grafičkih slika.

Postoji mnogo različitih grafički formati, ali preglednici podržavaju samo nekoliko. Pogledajmo tri od njih.

1. JPEG format(Zajednička skupina stručnjaka za fotografiju). Prilično popularan format koji se koristi za pohranu slika. Podržava 24-bitnu boju i zadržava sve polutonove na fotografijama nepromijenjenima. Ali jpeg ne podržava prozirnost i iskrivljuje sitne detalje i tekst na slikama. JPEG se prvenstveno koristi za pohranjivanje fotografija. Datoteke ovog formata imaju jpg proširenja, jpe, jpeg.

2. GIF format(Format grafičke razmjene). Glavna prednost ovog formata je mogućnost pohranjivanja nekoliko slika odjednom u jednu datoteku. To vam omogućuje stvaranje cijelih animiranih videozapisa. Drugo, podržava transparentnost. Glavni nedostatak Podržava samo 256 boja, što nije dobro za pohranu fotografija. GIF se uglavnom koristi za pohranu logotipa, natpisa, slika s prozirnim područjima i sadrže tekst. Datoteke u ovom formatu imaju nastavak gif.

3. PNG format(Prijenosna mrežna grafika). Ovaj je format razvijen kao zamjena za naslijeđeni GIF i, u određenoj mjeri, JPEG. Podržava transparentnost, ali ne dopušta animaciju. Ovaj format ima png ekstenziju.

Prilikom izrade web stranica obično se koriste slike JPEG format ili GIF, ali ponekad se koristi PNG. Glavna stvar je razumjeti u kojim je slučajevima koji format bolje koristiti. Ukratko:

JPEG se najbolje koristi za pohranjivanje fotografija ili slika u sivim tonovima koje ne sadrže tekst;

• GIF se prvenstveno koristi za animaciju;
• PNG je format za sve ostalo (ikone, gumbe itd.).

Umetanje slika u html stranice

Dakle, kako umetnuti sliku na web stranicu? Možete umetnuti sliku koristeći single označiti . Preglednik postavlja sliku na mjesto na web stranici gdje nailazi na oznaku .

Kod za umetanje slika u html stranica izgleda ovako:

Ovaj html kod postavit će na web stranicu sliku pohranjenu u datoteci image.jpg koja se nalazi u istoj mapi kao i web stranica. Kao što ste možda primijetili, adresa slike je navedena u atribut src. Već sam ti rekao što je to. Dakle, atribut src potreban atribut, koji služi za označavanje adrese slikovne datoteke. Bez atributa src oznaka img je besmislena.

Evo još nekoliko primjera navođenja adrese datoteke sa slikom:

- ovaj html kod umetnut će sliku pod nazivom image.jpg na stranicu, koja je pohranjena u mapi sa slikama koja se nalazi u korijenu web stranice.

Atribut src može sadržavati ne samo relativne veze na slike. Budući da se slike pohranjuju na mreži zajedno s html stranicama, svaka slikovna datoteka ima svoj vlastiti URL. Stoga možete umetnuti url slike u atribut src. Na primjer:

Ovaj kod će umetnuti sliku sa stranice mysite.ru na stranicu. URL se obično koristi kada pokazujete na sliku na drugom mjestu. Za slike pohranjene na vašoj stranici bolje je koristiti relativne veze.

Označiti je inline element, pa ga je bolje smjestiti unutar blok elementa, na primjer unutar oznake

- stavak:

Vježbajmo i zalijepimo na našu stranicu prethodne članke o html slika. Napravit ću mapu “images” pored html datoteke svoje stranice i tamo postaviti slikovnu datoteku “bmw.jpg”, koja izgleda ovako:

Tada će html kod stranice s umetnutom slikom biti ovakav:

Web stranica o automobilima.

Dobro došli na našu web stranicu o automobilima. Ovdje ćete naći mnogo zanimljivih i korisnih članaka o automobilima, njihovim Tehničke specifikacije i značajke.

Znanstveni jezik automobil Ovaj:

Mehanička cesta bez staze vozilo s najmanje 4 kotača.

Klasifikacija automobila

Automobili su sljedećih vrsta:

• Putnički automobil;


• Teret;


• terenac;


• Lud;


• Pokupiti;


• Sportski;


• Utrke.

Sva prava pridržana. 2010
Web stranica o automobilima.

I pogledajte rezultat prikaza u pregledniku:

Kao što vidimo, nema ništa komplicirano u postavljanju slika na web stranice. Zatim, pogledajmo još nekoliko važnih atributa oznake. .

Atribut alt je rezervna opcija

Budući da se slikovne datoteke pohranjuju odvojeno od web stranica, preglednik mora učiniti nešto da ih dohvati. pojedinačne zahtjeve. Ali što ako na stranici ima puno slika, a brzina mrežne veze je niska, onda se učitava dodatne datoteke trebat će dosta vremena. A još je gore ako je slika izbrisana sa servera bez vašeg znanja.

U tim slučajevima, sama web stranica će se uspješno učitati, samo će se umjesto slika prikazati bijeli pravokutnici. Stoga, kako bismo korisniku rekli što je slika, . Pomoću ovog atributa određujete takozvani zamjenski tekst, koji će biti prikazan u praznom pravokutniku dok se slika ne učita:

A ovako to otprilike izgleda:

Postavite dimenzije slike

Još uvijek postoji nekoliko atributa oznake img o kojima biste trebali znati. Ovo je nekoliko atributa širina I visina. Možete ih koristiti za određivanje dimenzija slike:

širina="300" visina="200">

Oba atributa označavaju veličinu u piksela. Atribut širine govori pregledniku koliko bi slika trebala biti široka, a atribut visine koliko bi trebala biti visoka. Ova dva atributa mogu se koristiti zajedno ili odvojeno. Na primjer, ako navedete samo atribut širine, preglednik će automatski odabrati visinu proporcionalno navedenoj širini i također u slučaju korištenja samo atribut visine. Ako te atribute uopće ne navedete, preglednik će automatski odrediti veličinu slike prije nego što je prikaže na zaslonu. Samo je vrijedno napomenuti da će određivanje veličina slike malo ubrzati preglednik prilikom prikaza stranice.

To je sve o umetanju slika na stranice za sada, a zatim ćemo pogledati kako umetnuti audio ili video na web stranicu...

Umetanje videa i zvuka pomoću HTML 5

Nova html5 specifikacija uvodi nekoliko novih oznaka koje olakšavaju umetanje medijskih datoteka. To se prvenstveno odnosi na video i audio.

Umetnuti audio HTML5 pruža uparena oznaka Adresa datoteke u kojoj je pohranjen audio isječak naznačena je pomoću atributa src koji nam je već poznat:

Označiti

Audio isječak prema zadanim postavkama nije prikazan na web stranici. Ali ako u oznaci

Uparena oznaka koristi se za umetanje videozapisa na web stranicu . S ovom oznakom sve je isto kao i s oznakom

Nema se što više reći o umetanju slika i multimedije u html stranice. Nadam se da pitanje “Kako umetnuti sliku u html stranicu?” odgovorio sam ti. pa ću samo sažeti:

Za umetanje slika u html stranici koristeći jednu oznaku a u atributu navedite adresu datoteke sa slikom src: ;

• pomoću atribut alt označiti možete postaviti zamjenski tekst u slučaju da se slika ne učita;
• pomoću atributa širina I visina možete postaviti veličinu slike na web stranici;
• postoje uparene oznake za umetanje zvuka i videa u html5

Ako nešto nije jasno, pitajte u komentarima i ne zaboravite se pretplatiti na ažuriranja mog bloga. Vidimo se u sljedećim postovima!

Slike - možda su one te koje oblikuju naše Generalna ideja O svjetska mreža. Slažem se s tim grafičke informacije osoba općenito pamti puno bolje od teksta. Stoga su slike važan dio svake web stranice i svake web stranice. I zato vam želim reći kako umetnuti sliku u html.

Umetanje slike u html pomoću oznake

Sigurno znate da se sve naredbe u html-u izvršavaju pomoću oznaka. Pa smo osmislili vlastitu oznaku za slike - . Jednostruka je, odnosno nema završni dio.

Najvažnija stvar atribut img oznaka je src (izvor) – put do slike. U njega upisujete adresu na kojoj se slika nalazi. Može se napisati kao apsolutni ( web stranica/slike/slike2/slika.jpg) ili kao relativno ( slike/slike2/slika.jpg).

Oba puta vode do iste datoteke image.jpg koja se nalazi u mapi image2. Ono se pak nalazi u direktoriju slika, a ono je u korijenskoj mapi. Ako sve relativno zapišete, onda kada promijenite naziv domene svoje stranice, sve će ostati operativno. Na primjer, uređivač wordpressa umeće prema zadanim postavkama apsolutne adrese. Ali osobno neću mijenjati domenu i to mi odgovara.

Dodatni atributi i dizajn putem css-a

Dakle, skrenemo s teme.Za prikaz slike dovoljno je navesti atribut src, ali postoje mnogi drugi atributi za njen dizajn.

• širina i visina – širina i visina slike. Može se postaviti u odgovarajućim atributima u oznaci img
• align – poravnanje slike u odnosu na tekst. Prema zadanim postavkama poravnat je ulijevo. Možete ga staviti i desno i središte (desno, središte)
• alt – alternativni tekst koji će se prikazati ako je korisnik onemogućio prikaz slika u pregledniku. Korisno ga je ispuniti
• naslov je skoro isti. Neka vrsta opisa slike koja će se prikazati kada kursorom prijeđete iznad nje
• vspace i hspace – vertikalni i horizontalni razmak slike od ostatka sadržaja. Pažnja! Atributi su već zastarjeli i bolje je postaviti ove uvlake kroz stilski list
• klasa – klasa stila koja je priložena slici i na nju primjenjuje neke stilove

Ubaci ovako slatku sliku. Ovdje smo dodali klasu za pregled i sada joj pomoću css-a možemo pristupiti preko nje i odrediti bilo koji stil. Na primjer, ove:

Preview( padding: 20px; margin: 10px; border: 5px full orange; transform: skewX(10deg); box-shadow: 0 0 15px 10px purple )

Dopustite mi da to sažmem

Dakle, da biste prikazali sliku, samo trebate napisati oznaku img i uključiti atribut src u nju, koji određuje putanju do slike. Sve ostalo su dodatne značajke - poravnanje, dimenzije, alternativni tekst, rotacije, okviri itd.

I konačno, idealno bi sve ovo trebalo biti napisano kroz CSS. Odnosno, nemojte postavljati dimenzije u atributima, već dodajte dodatnu klasu stila na sliku, koja će odrediti dimenzije. Ista stvar s poravnanjem, koje se u css-u može učiniti pomoću svojstva poravnanja teksta, kao i plutajući blokovi float .