Zatim, pogledajmo kako umetnuti sliku u html dokument i prilagoditi njegov prikaz. Za rad vam je potreban samo gore pomenuti editor i pretraživač.

Ako, ipak, nemate Notepad ++ ili postoji problem sa preuzimanjem i muči vas pitanje - kako ubaciti sliku u html u notepad?

Odgovor je jednostavan, rad u običnom notepadu razlikuje se samo po tome što mu nedostaje isticanje koda različite boje, za čitljivost i odvajanje koda od samog teksta.

Kako umetnuti sliku u HTML stranicu

Nakon instalacije uređivača, kontekstni meni, padajući meni desnim klikom na bilo koju datoteku, pojavit će se odgovarajuća stavka.

Sada, da biste uredili takvu datoteku, dovoljno je pozvati kontekstni meni tako što ćete kliknuti desnim tasterom miša na njega, a zatim "Edit with Notepad++".

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

Za umetanje slike u html kod koristi se jedna inline oznaka img. Njegov glavni atribut je izvor fotografije.

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

Da dodate fotografiju, potrebno je da unesete sledeći red:

Ovako će to izgledati u editoru:

A ovako će biti prikazan na stranici:

src označava izvor slike. Jedno ime datoteke je dovoljno ako se datoteka slike nalazi u istom html dokument imenike.

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

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

Kao izvor možete koristiti ilustraciju s mreže. Da biste to učinili, trebate samo navesti vezu do njega u atributu, umjesto lokacije na tvrdom disku.

Tablica formata putanje datoteke

Da biste promijenili veličinu slike, morate dodati dva atributa: širina i visina. Vrijednost je formatirana na isti način kao i za bilo koji atribut.

Nakon znaka jednakosti, morate odrediti veličinu u pikselima.

Ako je jasno date dimenzije ilustracija, prikazana na stranici će biti kako slijedi:

Poravnavanje i uređivanje slike

Kako umetnuti fotografiju u html u centar? Da biste dodelili poziciju slike na stranici, koristite poravnati vezano za oznaku str.

Ima nekoliko mogućih vrijednosti: centar(Centar), lijevo(lijeva ivica) i u pravu(desna ivica).

Ovako izgleda slika na stranici, poravnata po sredini i desnoj margini.

Bitan! Da biste dodijelili položaj fotografije u odnosu na tekst, a ne na stranicu, na img tag-u se mora koristiti atribut align. Vrijednosti su iste kao i za p tag atribut.

U zavisnosti od postavljena vrijednost, slika će promijeniti svoju poziciju u odnosu na tekst.

Da biste postavili sliku u tekst, samo unesite oznaku img(sa svim kadriranjem) tekstualni blok u .

Da biste dodali okvir, koristite atribut granice s numeričkom vrijednošću koja označava debljinu okvira u pikselima.

Za postavljanje vertikalnih i horizontalnih margina koristite vspace i hspace. Njihova brojčana vrijednost označava udaljenost od teksta do slike, direktno u pikselima.

U primjeru atributa vspace postavljeno na 50 piksela.

Veličina horizontalnog paddinga će pokazati udaljenost koju će tekst biti kada se omota oko slike.

Još dva korisna atributa - alt i naslov. Prvi setovi alternativni tekst slika.

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

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

Tekst naveden kao vrijednost atributa naslov, će prikazati opis alata kada direktno pređete mišem preko slike. U kodu, njegov izgled se ne razlikuje od ostalih atributa.

Nakon osvježavanja stranice, rezultat će izgledati ovako:

Tabela 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 velika količina značajke web razvoja, dok je kod potreban za dodavanje slika prilično jednostavan.

Dakle, kako umetnuti sliku u HTML?

Prenesite svoju sliku na besplatni sajt za hostovanje slika kao što je Photobucket ili TinyPic, koji omogućava stalni pristup učitanoj datoteci. Nakon kopiranja link na sliku će se pojaviti direktno na web lokaciji za hosting. Međutim, ako plaćate premium usluge takve usluge, bolje je koristiti dodatne funkcije. Ovo je pouzdanije jer besplatni hosting slike slike se ponekad ne otvaraju zbog preopterećenja. Nakon što ste "uploadali" sliku na neki od online servisa, otvorite je na svom računaru novi dokument in uređivač teksta(na primjer, u Notepadu) ili idite na panel za uređivanje željenu stranicu svoju web lokaciju (gdje možete promijeniti HTML kod).

Pisanje oznaka

Nastavljajući sa umetanjem slike u HTML, počnite sa IMG oznakom. Nakon toga morate dodati razmak i kosu crtu prije završnog znaka. Dakle, morate birati sljedeću kombinaciju -< img />. Osim toga, postoji mnogo dostupnih atributa, ali samo jedan od njih je apsolutno neophodan. Ovo je adresa ili URL vaše slike. Specificira se na sljedeći način -< img src ="URL_вашей_картинки" / >.

Alternativni tekst

Zatim, kada pokušavate da umetnete sliku u HTML, morate dodati atribut Alt. Ovo definira alternativni tekst u slučaju da se slika ne učita. Takav tekst je namijenjen i slabovidnim korisnicima koji koriste čitače ekrana. Prelazak miša preko slike će prikazati zamjenski tekst u opisu alata, međutim ova funkcija je dostupna samo u Internet Explorer. Da biste ga vidjeli u drugim aplikacijama, trebat će vam posebni dodaci. Da biste unijeli takav opis alata, unesite ga pored Alt. (Ovaj korak možete opciono preskočiti). Ako koristite ovu funkciju, link će izgledati ovako:

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

Dimenzije i parametri slike

Nastavljajući s uputama kako umetnuti sliku u HTML, možete dodatno odrediti veličinu slike koristeći atribute visine i širine specificirane u pikselima ili procentima. Imajte na umu da će slika biti prikazana zbog promjene veličine prilikom učitavanja. Pregledač ć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 softvera za uređivanje fotografija, a ne samo u URL-u veze. Sada bi vaš kod mogao izgledati otprilike ovako:

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

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

Ostali atributi

Vrijednost za ove atribute je ili pozitivna vrijednost piksela ili postotak originala (1-100%). Govoreći o tome kako umetnuti sliku u HTML, također se može primijetiti da se ona može postaviti bilo gdje na web stranici sa atributom poravnanja - vrh, dno, sredina, desno, lijevo, itd. Atribut HSPACE se koristi za umetanje slika vodoravno na lijevo i desna strana, VSPACE - za utovar okomito između vrha i dnu stranice i drugi sadržaj. Ako govorimo općenito o HTML-u - kako umetnuti sliku i kako dopuniti sadržaj stranice, glavna stvar je ne pretjerivati. Inače će vaš resurs izgledati neuredno i previše "raznobojno". Za prikaz logotipa ili animacija gif formatće najbolje rješenje, a za slike i fotografije visokog kvaliteta prikladniji je JPEG format.

Ovo omogućava da se unutar jedne stranice prikaže sadržaj druge stranice. Na primjer:

Većina slika koje osoba vidi na stranicama također je sadržaj druge stranice. Ovdje je posebno adresa emotikona u .gif formatu:

A evo i načina za dodavanje slike na web mjesto, koji se mogu razlikovati ako pogledate kod stranice:

HTML: oznaka
http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" alt="(!LANG:smiley" height="30" width="30"> !}
CSS: svojstva i
CSS: pseudoelementi i
HTML: oznaka vektorska grafika
CSS: Nema URL-a

Kako pronaći adresu slike i kopirati je

Postoji nekoliko načina da kopirate adresu slike:

1. Zadržite pokazivač miša preko fotografije, kliknite na desni ključ miša, u kontekstualnom meniju koji se pojavi, od vas će biti zatraženo da kopirate URL, kliknite na potrebnu stavku.
   Sl.1 Ako zadržite pokazivač miša iznad fotografije i kliknete na desnu tipku miša, zatim u Mozilla Firefox otvoriće se kontekstni meni sa sledećim stavkama
2. Pomerite kursor preko fotografije, pritisnite desnu tipku miša, u kontekstualnom meniju koji se pojavi od vas će se tražiti da proučite karakteristike fotografije, kliknite na potrebnu stavku (na slici 1, pogledajte stavku "Informacije o slici" ; u Internet Exploreru pogledajte stavku “Svojstva”), u prozoru koji se otvori odaberite adresu slike,
   • desnim klikom miša, u kontekstnom izborniku koji se pojavi kliknite na stavku "Kopiraj".
   
   Slika 2 Ako zadržite pokazivač miša iznad fotografije u Mozilla Firefox-u, pritisnite desnu tipku miša, odaberite stavku “Informacije o slici” u kontekstualnom meniju koji se pojavi, otvorit će se prozor u kojem možete vidjeti listu slika korištenih na stranici, njihovu adresu, alternativni tekst (sadržaj u atributu alt), stvarnu veličinu i razmjer koji se koristi
3. Pređite kursorom preko fotografije, pritisnite desnu tipku miša, u kontekstualnom meniju koji se pojavi, od vas će se tražiti da odete na stranicu sa slikom, kliknite na potrebnu stavku (na slici 1, pogledajte stavku "Otvori sliku") . Otvara se stranica koja sadrži samo jednu sliku. AT puna visina ako je prethodno smanjen sa ili sa koristeći CSS. Označite adresu stranice koja se otvara adresna traka Pretraživač,
   • pritisnite kombinaciju tastera Ctrl tastatura+C.
   
   Sl.3 Ovako izgleda stranica sa smajlijem.
   Njen 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 bez pomeranja, u kontekstualnom meniju koji se pojavi od vas će se tražiti da odete na stranicu sa slikom, kliknite na potrebnu stavku (može se zvati "Prikaži sliku" ). Otvara se stranica koja sadrži samo jednu sliku. Puna visina ako je prethodno smanjena sa ili sa CSS-om. Zatim dugo pritisnite adresu u adresnoj traci pretraživača. Nakon što se klizači pojave i cijeli URL je odabran (ako je potrebno, klizači se mogu razmaknuti na potrebnu udaljenost), kliknite na dugme "Kopiraj" na panelu koji se pojavi.
5. Pređite kursorom preko fotografije, pritisnite desnu tipku miša, u kontekstualnom meniju koji se pojavi, od vas će se tražiti da odete na stranicu pozadinska slika, kliknite na željenu stavku. Otvara se stranica koja sadrži samo jednu sliku. Puna visina ako je prethodno smanjena pomoću CSS-a. Označite adresu otvorene stranice u adresnoj traci pretraživača (vidi sliku 3),
   • pritisnite desnu tipku miša, u kontekstnom izborniku koji se pojavi odaberite stavku "Kopiraj".
   • pritisnite prečicu na tastaturi Ctrl + C.
   
   

Kako sačuvati sliku

Pomerite kursor preko fotografije, pritisnite desnu tipku miša, u kontekstualnom meniju koji se pojavi, od vas će biti zatraženo da sačuvate sliku, kliknite na potrebnu stavku (na slici 1, pogledajte "Sačuvaj sliku kao..." stavku), u prozoru koji se otvori izaberite fasciklu na računaru u koju će crtež biti sačuvan.

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

Kako dodati sliku na web stranicu

Prvo, slika mora biti postavljena sa računara na hosting stranicu, u socijalna mreža(U kontaktu sa, Google+ itd.), Yandex.Disk ili Google.Disk, tako da slika ima svoju adresu na internetu.

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

1. postavite kursor miša na mjesto gdje bi se fotografija trebala pojaviti,
2. kliknite na ikonu sličnu ili ,
3. izaberite fajl sa računara
4. ako je moguće, popunite alternativni tekst (aka opis slike).

Zaključak: slika će biti umetnuta na stranicu stranice, i što je najvažnije, učitana na server web projekta. Sada će imati svoju adresu na internetu. A sada možete ispraviti kod koji je dao vizualni uređivač na kartici "HTML", pošto vizualni uređivač često dodaje nepotrebne oznake, a mogućnosti HTML-a i CSS-a su neuporedivo veće.

Ako URL već postoji, ali drugog malo poznatog sajta, onda je ipak bolje da takvu fotografiju sačuvate na računar, a zatim da je otpremite na server sajta, ako ovu akciju dozvoljeno od strane vlasnika fotografije, kako se ne bi kršila autorska prava, kao

• neke stranice mogu zabraniti korištenje adrese slika na drugim resursima (više o zabrani hotlinkinga).
• stranice su kratkog vijeka i nakon nekog vremena uklanjanjem web projekta, slika na vašoj stranici će također nestati, ostavljajući umjesto sebe u najbolji slucaj samo alternativni tekst.

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

1. kreirajte folder sa slikama,
2. kreirajte .htaccess datoteku u folderu sa slikama, čiji će sadržaj biti # zatvorite pristup http://site.ru/image/ Opcije-Indeksi # zatvorite pristup http://site.ru/image/.htaccess naredi dozvoli, zabrani odbije od svih
3. otpremi u folder image image, koji se zove, recimo, plain.gif (ubuduće će sve slike takođe biti postavljene u ovaj folder),
4. na HTML stranici koristite URL kao što je http://site.ru/image/plain.gif , na primjer, http://site.ru/image/plain.gif" alt="(!LANG:smiley" height="30" width="30">!}

Pozdrav dragi čitaoci bloga! U ovom članku ćete naučiti sve o tome kako umetnuti sliku html stranica . Da li imate neke slike koje želite da stavite na svoju stranicu ili želite da postavite logo na svoju stranicu? Sve ovo je lako. Nakon što pročitate ovaj članak, moći ćete bez poteškoća umetati slike u svoje html stranice. Da bismo to učinili, detaljno ćemo razgovarati o tome tag i njegove atribute, pogledajmo na brzinu formate grafičke datoteke, kao što su gif, jpeg i png, kao i nove HTML5 funkcije koje olakšavaju ugrađivanje videa i zvuka na vašu web lokaciju.

Zbog grafike i html tekst ne mogu se kombinovati u jednu datoteku, za njihovo prikazivanje na sajtu se koristi drugačiji pristup nego kod drugih elemenata html stranica. Primarno, grafičke slike, a ostali multimedijalni podaci se pohranjuju u zasebne datoteke. A da biste ih ugradili u web stranicu, koristite posebne oznake koji sadrže veze do ovih pojedinačni fajlovi. Konkretno, ova oznaka je tag . Nakon što naiđe na takvu oznaku sa adresom, pretraživač prvo traži odgovarajuću datoteku sa slikom, audio ili video zapisom od web servera, a tek onda je prikazuje na web stranici.

Sve grafičke slike i, općenito, svi podaci koji su pohranjeni u datotekama odvojenim od web stranice se nazivaju ugrađen elementi stranice.

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

Formati grafičkih slika.

Postoji mnogo različitih grafički formati, ali pretraživači podržavaju samo nekoliko. Razmotrimo tri od njih.

1. JPEG format(Zajednička grupa fotografskih eksperata). Prilično popularan format koji se koristi za pohranjivanje slika. Podržava 24-bitnu boju i održava sve srednje tonove netaknutim na fotografijama. Ali jpeg ne podržava transparentnost i iskrivljuje fine detalje i tekst na slikama. JPEG se uglavnom koristi za pohranjivanje fotografija. Fajlovi ovog formata su jpg ekstenzije, jpe, jpeg.

2. GIF format(Format za razmjenu grafike). Glavna prednost ovog formata je mogućnost pohranjivanja nekoliko slika odjednom u jednu datoteku. Omogućava vam da kreirate čitave animirane video zapise. Drugo, podržava transparentnost. Glavni nedostatak podržava samo 256 boja, što nije dobro za čuvanje fotografija. GIF se uglavnom koristi za pohranjivanje logotipa, banera, slika s prozirnim područjima i koji sadrže tekst. Datoteke ovog formata imaju ekstenziju gif.

3. PNG format(Prijenosna mrežna grafika). Ovaj format je razvijen kao zamjena za zastarjeli GIF i, u određenoj mjeri, JPEG. Podržava transparentnost, ali ne dozvoljava 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 slučajevima je koji format bolje koristiti. Ukratko, onda:

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, dugmad, itd.).

Umetanje slika u html stranice

Dakle, kako umetnuti sliku u web stranicu? Umetanje slike omogućava pojedinačno tag . Pretraživač postavlja sliku na mjesto na web stranici gdje nailazi na oznaku .

Kod za ugradnju slike u html stranica izgleda ovako:

Ovaj html kod će postaviti na web stranicu sliku pohranjenu u datoteci image.jpg, koja se nalazi u istom folderu sa web stranicom. Kao što ste možda primijetili, adresa slike je naznačena u src atribut. Šta je to već sam rekao. Dakle, atribut src potreban atribut, koji se koristi za određivanje adrese datoteke slike. Bez src atributa, oznaka img nema značenje..

Navest ću još nekoliko primjera navođenja adrese datoteke sa slikom:

- ovaj html kod će umetnuti sliku na stranicu pod nazivom image.jpg, koja je pohranjena u mapu slika koja se nalazi u korijenu web stranice.

Atribut src može sadržavati ne samo relativne veze na slikama. Pošto se slike pohranjuju na webu zajedno sa html stranicama, svaka datoteka slike ima svoj vlastiti URL. Stoga se url adresa slike može umetnuti u atribut src. Na primjer:

Ovaj kod će umetnuti sliku sa mysite.ru na stranicu. URL adresa se obično koristi ako pokazujete na sliku koja se nalazi na drugoj stranici. Za slike pohranjene na vašoj web lokaciji, najbolje je koristiti relativne veze.

Tag je inline element, pa ga je bolje staviti unutar blok elementa, na primjer unutar oznake

- stav:

Vježbajmo i zalijepimo na našu stranicu iz prethodnih članaka o html slika. Napravit ću folder “images” pored html datoteke moje stranice i tamo staviti datoteku slike “bmw.jpg” koja izgleda ovako:

Tada će html kod stranice sa umetnutom slikom izgledati ovako:

Web stranica o automobilima.

Dobrodošli na našu automobilsku stranicu. Ovdje ćete naći mnogo zanimljivih i korisnih članaka o automobilima, o njima tehničke specifikacije i karakteristike.

naučni jezik automobil Ovo:

Mehanički motor bez kolosijeka vozilo sa najmanje 4 točka.

Klasifikacija automobila

Automobili su sljedećih tipova:

• Passenger;


• Cargo;


• SUV;


• Buggy;


• Pokupiti;


• Sport;


• Racing.

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

I gledamo rezultat prikaza u pretraživaču:

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

alt atribut - kao rezervni

Pošto se slikovne datoteke pohranjuju odvojeno od web stranica, da bi ih dobio, mora učiniti pretraživač individualni zahtjevi. Ali šta ako na stranici ima puno slika, a brzina mrežne veze je niska, za preuzimanje dodatni fajloviće biti potrebno dosta vremena. I još gore ako je slika uklonjena sa servera bez vašeg znanja.

U tim slučajevima, sama web stranica će se uspješno učitati, umjesto slika bit će prikazani samo bijeli pravokutnici. Stoga, kako bi informirali korisnika o tome što je slika, . Ovim atributom se specificira tzv. zamjenski tekst, koji će biti prikazan u praznom pravokutniku dok se slika ne učita:

A ovako to izgleda:

Podesite dimenzije slike

Još uvijek postoji nekoliko atributa oznake img kojih biste trebali biti svjesni. Ovo je par atributa širina i visina. Možete ih koristiti da odredite dimenzije slike:

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

Oba atributa označavaju veličinu u piksela. Atribut širine govori pretraživaču koliko bi slika trebala biti široka, a atribut visine koliko bi trebala biti visoka. Ova dva atributa se mogu koristiti zajedno ili odvojeno. Na primjer, ako navedete samo atribut širine, tada će pretraživač automatski prilagoditi visinu proporcionalno navedenoj širini, a također i u slučaju korištenja samo atribut visine. Ako uopće ne navedete ove atribute, pretraživač će automatski odrediti veličinu slike prije nego što je prikaže na ekranu. Važno je samo napomenuti da će određivanje veličine slika malo ubrzati pretraživač prilikom prikazivanja stranice.

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

Ugradite video i audio sa HTML 5

Nova html5 specifikacija ima neke nove oznake koje olakšavaju ugrađivanje medijskih datoteka. Ovo se prvenstveno odnosi na video i audio.

Za umetak audio HTML5 pruža pair tag Adresa datoteke u kojoj je pohranjen audio snimak je naznačena pomoću već poznatog src atributa:

Tag

Podrazumevano, audio snimak se ni na koji način ne prikazuje na web stranici. Ali ako je u oznaci

Oznaka za par je namijenjena za umetanje video zapisa na web stranicu . Sa ovom oznakom je sve isto kao i sa oznakom

O umetanju slika i multimedije na html stranice nema puno više da se priča. Nadam se da je pitanje Kako umetnuti sliku u html stranicu? Odgovorio sam ti. pa samo da rezimiramo:

za ugraditi slike u html stranica koristeći jednu oznaku i navedite adresu datoteke sa slikom u atributu src: ;

• preko alt atribut tag možete postaviti zamjenski tekst u slučaju da se slika ne učita;
• koristeći atribute širina i visina možete podesiti veličinu slike na web stranici;
• za umetanje audio i video zapisa u html5 postoje uparene oznake

Ako nešto nije jasno, pitajte u komentarima i ne zaboravite se pretplatiti na ažuriranja mog bloga. Vidimo se u narednim objavama!

Slike - možda one čine naše opšta ideja o svjetske mreže. Slažem se sa tim grafičke informacije osoba općenito pamti mnogo bolje od teksta. Stoga su slike važan dio svake stranice i svake web stranice. I zato želim da vam kažem kako da ubacite sliku u html.

Umetnite sliku u html koristeći tag

Sigurno znate da se sve naredbe u html-u izvode pomoću oznaka. Za slike su smislili svoju oznaku - . Jednostruka je, odnosno nema završni dio.

Najvažniji img atribut tag je src (izvor) - put do slike. U njemu upisujete adresu na kojoj se nalazi slika. Može se napisati kao apsolutno ( site/images/images2/image.jpg) ili kao relativna ( images/images2/image.jpg).

Oba ova puta vode do iste datoteke image.jpg, koja se nalazi u folderu image2. Taj se, pak, nalazi u direktoriju slika, a onaj u korijenskom folderu. Ako napišete sve relativno, onda kada promijenite naziv domene vaše stranice, sve će ostati operativno. Na primjer, wordpress editor podrazumevano umeće apsolutne adrese. Ali lično neću da menjam domen i odgovara mi.

Dodatni atributi i stilovi putem css-a

Dakle, skrenuti pažnju sa teme.Da bi se slika prikazala, dovoljno je navesti src atribut za nju, ali postoji mnogo drugih atributa za njen dizajn.

• širina i visina su širina i visina slike. Može se postaviti u odgovarajućim atributima u img tag-u
• align - poravnanje slike u odnosu na tekst. Podrazumevano je poravnat ulijevo (lijevo). Možete ga staviti i na desno i u centar (desno, u sredini)
• alt - alternativni tekst koji će se prikazati ako je korisnik onemogućio slike u pretraživaču. Dobro je popuniti.
• naslov je skoro isti. Neka vrsta opisa slike, koja će se prikazati kada pređete mišem preko nje
• vspace i hspace - vertikalno i horizontalno uvlačenje slike od ostatka sadržaja. Pažnja! Atributi su već zastarjeli i bolje je postaviti ove uvlake kroz stilski list
• class - klasa stila koja je pridružena slici i na nju primjenjuje neke stilove

Stavili smo tako slatku sliku. Ovdje smo okačili preview klasu i sada sa css-om kroz nju možemo se pozvati na nju i propisati bilo koje stilove. Na primjer, ove:

Pregled( padding: 20px; margina: 10px; granica: 5px puna narandžasta; transformacija: skewX(10deg); box-shadow: 0 0 15px 10px ljubičasta )

Dozvolite mi da sumiram

Dakle, da biste prikazali sliku, trebate samo napisati img tag i postaviti src atribut u njemu, koji postavlja putanju do slike. Sve ostalo su dodatne karakteristike - poravnanje, dimenzije, alternativni tekst, rotacije, okviri itd.

I na kraju, idealno, sve ovo treba da bude napisano preko CSS-a. Odnosno, ne postavljajte dimenzije u atributima, već okačite dodatnu stilsku klasu na sliku, koja će odrediti dimenzije. Isto je i sa poravnanjem, kojim se u css-u može uraditi svojstva poravnanja teksta, kao i plutajući blokovi.