Viss, kas ir zināms par šo cilvēku, ir
ka viņš nebija cietumā, bet kāpēc viņš nebija cietumā, nav zināms.
Marks Tvens.

Šī ir mācība par kā ievietot attēlu HTML, kā to noformēt, kā aptīt tekstu ap attēlu utt. Galu galā ir zināms, ka attēli padara vietni pievilcīgāku un atšķirīgu no citiem resursiem, tāpēc iespēja izmantot tagu un tā atribūtus ir ļoti noderīga mūsdienu internetā. Bet galvenais šeit ir mēra izjūta!

Grafikas pārpalikums padarīs html lapu smagāku un attiecīgi palielinās tās ielādes laiku. Turklāt liela skaita attēlu klātbūtne novērsīs apmeklētāju uzmanību no galvenā vietnes satura (ja vien, protams, grafika nav vietnes galvenais saturs). Tāpēc saglabājiet to ar mēru un izmantojiet to tikai tur, kur tas ir nepieciešams. Un tu būsi laimīgs!

Nodarbībā par es jau runāju par to, kā attēlus var izmantot kā HTML dokumenta fonu. Tagad parunāsim par to, kā grafika tiek izmantota html lapas “augšējā slānī”.

§ 1. Kā ievietot attēlu

Lai ievietotu attēlus HTML, izmantojiet tagu IMG Ar obligāti atribūts SRC. Šis atribūts norāda pārlūkprogrammai ceļu uz attēla failu. Tie. lai ievietotu attēlu ar nosaukumu logo.jpg uz noteiktu vietu lapā (ar nosacījumu, ka atrodas gan lapa, gan attēls vienā mapē(direktorijā)) šajā vietā ir jāievieto šāds html kods:

src="logo.jpg">

Ja attēls un lapa atrodas savādāk direktorijus (mapes), tad jānorāda ceļš uz attēlu relatīvi lapas. Piemēram, ja direktorija (mapes) vietnē atrodas html lapa, tajā pašā direktorijā (mapē) ir apakšdirektorija (mapes) attēli, kurā atrodas mūsu attēls logo.jpg, tad, lai to ievietotu, ir nepieciešams rakstiet šādi:

images/logo.jpg">

Vai arī jums nav jāuztraucas un jānorāda pilna attēla adrese. Piemēram, šādi:

http://www..png">

Pēdējā gadījumā pārlūkprogramma parādīs kodu šādi:

Piezīme. Ja attēls atrodas savā datorā, bet vēlaties to ievietot uz interneta lapu, tad nekas nesanāks. Lai to izdarītu, vispirms ir jāpārvieto attēls uz kādu vietu internetā(Piemēram, ). Un lapas kodā norādiet pilnu adresi līdz šim brīdim ar attēlu.

Papildus nepieciešamajam atribūtam SRC pie birkas IMG Ir vēl daži izvēles atribūti. Apskatīsim tos tuvāk.

§ 2. Attēla izmēra norādīšana

Sāksim ar atribūtiem, kas ļauj iestatīt attēla izmēri(precīzāk, lapās atzīmējiet vietu šiem izmēriem). Šeit tie ir:

• platums- attēla platums pikseļos vai procentos;


• augstums- attēla augstums pikseļos vai procentos.

Ja tiek izmantoti šie atribūti, tas vispirms atvēlēs vietu grafikai, sagatavos dokumenta izkārtojumu, parādīs tekstu un tikai pēc tam ielādēs attēlu. Tajā pašā laikā tas ievietos attēlu izvēlētā izmēra taisnstūrī, pat ja attēla faktiskais platums un augstums ir lielāki (saspiest) vai mazāki (stiept). Gadījumā, ja šie atribūti netiek izmantoti, pārlūkprogramma nekavējoties ielādēs attēlu, un teksta un citu tam sekojošo elementu parādīšana tiks aizkavēta.

Attēlu platumu un augstumu var norādīt gan pikseļos (attēla izmērs būs nemainīgs neatkarīgi no ekrāna izšķirtspējas), gan procentos (attēla izmērs būs atkarīgs no lietotāja ekrāna izšķirtspējas). Piemēram:

platums = "50" augstums = "20">

platums = "10%" augstums = "5%">

§ 3. Alternatīvais teksts

Ja lietotājs pārlūkprogrammas iestatījumos ir atspējojis attēlu parādīšanu, tad attēla vietā var tikt parādīts alternatīvs teksts, kas izskaidrotu, kādai grafikai tur jābūt. Tas tiek panākts, izmantojot atribūtu ALT:

Šajā gadījumā pārlūkprogramma rezervēs vietu lapā attēlam, bet paša attēla vietā tā parādīs tekstu, kuru ierakstāt atribūta vērtībā ALT:

Es atkārtoju, tas notiks, ja lietotājs ir atspējojis grafikas displeju. Ja nē, attēls paslēps alternatīvo tekstu.

§ 4. Attēla līdzināšana

Izmantojot jau zināmu atribūtu izlīdzināt jūs varat kontrolēt attēlu izlīdzināšanu attiecībā pret citiem html lapas elementiem. Pie atribūta izlīdzināt Ir vairākas nozīmes, bet šobrīd mūs visvairāk interesē divas:

• pa kreisi- attēls atrodas lapas kreisajā malā, un teksts plūst ap attēlu labajā pusē;


• pa labi- attēls atrodas lapas labajā malā, un teksts un citi elementi plūst ap attēlu kreisajā pusē.

Piemēram, HTML kods

pārlūkprogramma rādīs šādi

Un šis HTML kods:

izskatīsies šādi:

Lai apturētu teksta aptīšanu ap attēlu, varat izmantot tagu BR(mums pazīstams no iepriekšējās sadaļas par). Pie birkas BR ir atribūts skaidrs, kam var būt trīs vērtības:

• pa kreisi- pārtraukt teksta aptīšanu ap pa kreisi līdzinātiem attēliem;


• pa labi- pārtraukt teksta ietīšanu ap attēliem, kas līdzināti pa labi;


• visi- pārtraukt teksta ietīšanu ap attēliem, kas līdzināti gan pa kreisi, gan pa labi.

HTML tags, kas atbild par attēla parādīšanu

• HTML attēls Var būt jebkurš attēls PNG, JPEG un GIF formātā.
• HTML kods attēlam ko nosaka tags .
• HTML attēls var būt tīmekļa lapas fons.
• HTML attēls var definēt kā hipersaiti.

Mapē D\My_first_site\ vai jebkurā citā mapē, kurā ir fails index.html, ievietojiet attēlu ar paplašinājumu, piemēram, .jpg, nosauciet to pēc savas izvēles, piemēram, xxx.

Attēla ievietošana lapas HTML kodā:

Tag - nesapārots. Pievērsiet uzmanību tam, kā tas ir aizvērts.

Atribūti un vērtības

• - nepieciešams, tas norāda attēla avotu.
• alt="" - definē alternatīvu tekstu, komentāru, ko nolasa meklēšanas robots, analizējot tīmekļa lapas saturu. Tas arī ir jānorāda.
• width="" - norāda attēla platumu pikseļos.
• height="" - norāda attēla augstumu pikseļos.

Norādiet faktiskos izmērus – tā saglabāsiet sākotnējo attēla kvalitāti.

Tīmekļa izstrādei ir izmantojami trīs formātu attēli: PNG (.png), JPEG (.jpg) un GIF (.gif). Adobe Photoshop ir specializēts rīks tīmekļa vietņu grafikas izveidei. To var izmantot, lai pārveidotu vienu attēla formātu citā.

HTML attēls | Horizontālās un vertikālās piemales

vai horizontālais un vertikālais attālums starp attēlu un tekstu

Rezultāts:

Atribūti un vērtības

• hspace="" - nosaka horizontālais attālums starp attēlu un tekstu.
• vspace="" - definē vertikālais attālums starp attēlu un tekstu.

HTML fona attēls

vai lapas fons, ko nosaka attēls

Mums ir šāds attēls:

Rakstīsim kodu atsevišķai lapai:

Fona un fona attēla atribūti ir apskatīti .

Attēla ievietošana un tā secība → ../images/primer-img.jpg → sk.

HTML attēls - saite

Koda piemērs:

border="0" - atceļ grafiskās saites apmali.

vai visi iespējamie veidi, kā centrēt attēlus

Koda piemērs:

Kam šeit jāpievērš uzmanība? → Pirmkārt, tas, ka ir norādīti izmēri - tas paātrina attēla ielādi. Otrkārt, tiek norādīti alt="" atribūti, ko arī ļoti vēlams darīt pat tad, ja nav alternatīva teksta. Pirmajā gadījumā tika noteikts centrējums HTML parametrs, bet otrajā - izmantojot kaskādes stila lapu lineāro iekļaušanu.

Vizuālā daļa ir viens no svarīgākajiem aspektiem, strādājot ar vietnēm. Tas, protams, ir zemāks par funkcionalitāti, taču nevajadzētu to atlaidi pirms laika. Šodien mēs runāsim par to, kā instalēt HTML attēlu savā vietnē. Vai šai iespējai ir tikai viena vai vairākas? Kā es varu ievietot HTML attēlu savā vietnē, lai citi lietotāji to varētu redzēt? Ko šim nolūkam labāk izmantot – serveri vai datoru? Kas ir HTML? Šo saīsinājumu var atšifrēt šādi: hiperteksta dokumenta iezīmēšanas valoda.

Izmantojot šo valodu, tiek veidots topošās vietnes pamats. Šeit ir izstrādāts arī visu galveno vietnes elementu izvietojums. Tad šeit tiek konfigurēti php faili, kas ir atbildīgi par datu pārsūtīšanu un kaskādes stila lapas. Jebkuras tīmekļa lapas pamatā ir HTML. Varat arī veikt attēla korekcijas, izmantojot šo valodu. Šo darbību var veikt arī citos veidos, taču, ja nepieciešams nodrošināt kāda vienkārša objekta sākotnējo ielādi, labāk to izmantot. Sāksim izpētīt problēmu, kas saistīta ar HTML attēla ievietošanu.

Kā lietot img tagu?

Pāriesim pie grafikas izmantošanas jautājuma. Kā HTML dokumentā var ievietot attēlu? Pirmkārt, šī darbība nozīmē faila ievietošanu kā atsevišķu lapas objektu. Šim papildinājumam tiek izmantots tags img. Šis tags attiecas uz iekļautiem elementiem, kas satur aizstājamu saturu. Tas ietver tikai četras hiperteksta iezīmēšanas valodas daļas. Viens no tiem ir src, augstums, platums. Mēs par tiem runāsim tālāk. Citas daļas ir objekts, iegults, iframe. Tags darbojas tā, it kā tam būtu iekļauts elements. Atšķirība ir tāda, ka tiek izmantots un parādīts svešs ārējais saturs. Šajā gadījumā ir jābūt trešās puses failam, kas tiks ielādēts. Ja jums ir jautājumi par fona attēla atjaunošanu HTML, labāk tos uzreiz atmest. Tas tiks parādīts tikai tad, kad darbojas dators, kurā atrodas attēls.

Izmantojot atribūtu src

Mēs strādājam pie jautājuma par grafiskā attēla ievietošanu HTML dokumentā. Lai norādītu ceļu uz attēlu, kas tiks ielādēts, izmantojiet src. Vispārējā shēma ir šāda: jums ir jāizmanto šis atribūts, vienādības zīme un jāievada adrese. Kad pārlūkprogramma HTML parsēšanas laikā sasniedz tagu, tā izveidos apgabalu, kurā tiks parādīts iekļautais elements. Ārējais fails tajā tiks ielādēts nākotnē. Šajā ceļā nevajadzētu būt kļūdām, jo ​​​​tā programma tiks virzīta. Ja šī programma neatrod failu, tiks parādīta kļūdas ikona, kas neizskatās īpaši estētiski.
Lai ievietotu attēlu tabulā HTML dokumentā, jums ir jāieraksta viss nepieciešamais kods vajadzīgajā šūnā.

Attēla iestatījumi

Tagad jūs zināt, kā ievietot attēlu HTML. Izdomāsim, kā to var konfigurēt. Kad fails sāk lejupielādēt lietotāja datorā, attēla izmērs tiks automātiski noteikts. Ja faila sākotnējie parametri neatbilst vēlamajiem, tad šajā gadījumā var palīdzēt platuma un augstuma parametri, kas norādīti pikseļos. Kods šajā gadījumā tiks rakstīts šādi: src un pēc tam faila adrese. Līdzīga instrukcija arī norāda platumu un nosaka platumu, kam vajadzētu būt. Pēdējais parametrs ir augstums un augstums. Diezgan bieži tīmekļa pārziņi pieļauj šādu kļūdu: viņi augšupielādē serverī vienu lielu failu, kura izmērs sasniedz vairākus MB. Pēc tam tiek uzrakstīts ceļš un attēls tiek pielāgots vēlamajam izmēram. Tādējādi lietotājs var redzēt, kā mazs attēls tiek ielādēts ļoti lēni. No malas tas neizskatās īpaši pievilcīgi.

Ieteikumi darbam

Lai izvairītos no negatīviem aspektiem savā darbā, mēģiniet iepriekš samazināt attēla izmēru. Protams, ja neesat pilnīgi pārliecināts, kādi parametri ir jāizmanto pievilcīgam izskatam, varat vienkārši izveidot kopiju un mēģināt ar to eksperimentēt. Jums arī jābūt īpaši uzmanīgam, optimizējot attēla svaru. Ir nepieciešams samazināt grafisko failu svaru, nezaudējot kvalitāti, konvertējot failus uz citiem paplašinājumiem, izmantojot īpašas programmas un tiešsaistes pakalpojumus. To novērtēs ne tikai vietnes lietotāji, bet arī tīmekļa pārzinis. Šādi faili aizņems mazāk vietas jūsu mitināšanā un tiks ielādēti ātrāk.

Ierakstīšanas iespēju piemērs

Apsvērsim, kā norādīt ceļu uz attēlu.

1. Iestatiet tikai faila nosaukumu;
2. Norādiet lokālajā datorā (serverī) esošā attēla adresi;
3. Detalizēts ceļš uz faila atrašanās vietu, kas atrodas citā resursdatorā.

Ja izmantojat piemēru no pirmā punkta, attēlam jāatrodas tajā pašā direktorijā. Otrajā gadījumā atrašanās vieta ir apakšmape attiecībā pret pašreizējo lapu. Trešajā piemērā ir norādīts absolūtais ceļš, kurā var atrast meklēto attēlu. Pēdējā gadījumā ir vērts pievērst uzmanību šādam punktam: attēls var atrasties jebkurā serverī, ja šāda izmantošana nav aizliegta htaccess failā, bet, ja tas tiek izdzēsts no turienes, attēls jūsu vietnē pazudīs. HTML valodas īpatnība ir tāda, ka ir nepieciešams tikai iezīmēšanas dokuments. Visus pārējos komponentus var lejupielādēt no trešo pušu serveriem. Šīs metodes bieži izmanto, lai palielinātu lejupielādes ātrumu. Šeit jums jāzina, kā izmantot šo rīku.

Alt un titula mērķis

Ko darīt, ja kāda iemesla dēļ grafiskais fails netiek ielādēts kopā ar HTML dokumentu? Ja tas ir uzrakstīts nepareizi, jums ir jāizmanto alt atribūts. Šis atribūts veic attēla alternatīvas atveidošanas uzdevumu. Pieņemsim, ka grafika netiek ielādēta, bet pārlūkprogramma joprojām izveidos attēla apgabalu. Tas ir nepieciešams arī gadījumos, kad lietotājs gaida ielādi un viņam ir jāparāda, ka programma gatavojas pieņemt grafiku. Lai rādītu pavadošo tekstu, jāizmanto atribūts title. Tas būtībā ir tikai rīka padoms, un to var izmantot gandrīz jebkurā redzamā HTML elementā. Tas ir labi, jo tas palīdz noskaidrot dažus konkrētus aspektus. Šajā apakšpozīcijā norādīto divu atribūtu lietojums ir šāds: pēc augstuma iepriekš aplūkotajam piemēram vispirms tiek pievienots alt un pēc tam nosaukums. Šie atribūti var kalpot ne tikai apmeklētāja ērtību nodrošināšanai. Tie var arī pozitīvi ietekmēt vietnes reklamēšanu. Šī iemesla dēļ tajos pastāvīgi jāizmanto atslēgvārdi. Tas uzlabos resursa rangu meklētājprogrammu attēlu pakalpojumos un vietņu vērtējumos. Tomēr visā, kas jums nepieciešams, ir jāievēro racionalitāte un piesardzība.

Attēlu izlīdzināšana

Izlīdzināšanas atribūts tika ieviests visiem četriem iepriekš minētajiem iezīmēšanas valodas elementiem. Izmantojot šo atribūtu, jūs varat viegli mainīt attēla atrašanās vietu. Pēc noklusējuma tas ir izlīdzināts apakšā. par to ir atbildīgs apakšējais. Kā veikt augšējo izlīdzināšanu? Lai to izdarītu, jums jāizmanto augšdaļa. Praksē tas izskatīsies šādi: aiz atribūta src, kur lietotājs norāda attēla adresi, tiek pievienots atribūts align un tā vērtība. Rindā, kurā atrodas attēls, tas tiks līdzināts augšējai malai. Kā centrēt attēlu HTML? Ir vēl viena attēla izlīdzināšanas iespēja: vidū. Šīs funkcijas izmantošana principiāli neko nemainīs.

Izmantojot šo kodu, attēls tiks līdzināts pa vidu. Varat likt tekstam plūst ap attēlu. Šim nolūkam tiek izmantoti kreisās un labās puses atribūti. Šādos gadījumos attēls kļūst peldošs. Shift pa kreisi izskatās tāpat kā citas pareizrakstības. Izmantojot pareizo atribūtu, tiek iegūts līdzīgs rezultāts, taču ar vienu atšķirību: attēls tiks novietots labajā pusē. Šo struktūru izmantošanai ir savas īpatnības. Piemēram, viena no svarīgām problēmām ir teksta pārāk tuvu attēlam. Rezultātā tiek radīts tā sauktais pielipšanas efekts, kas ir ļoti nepatīkams acīm. To var labot, izmantojot HTML kodu vai kaskādes stila lapu. Šādām izmaiņām ir jāizmanto atribūti hspace un vspace. Pirmais iestata piemales labajā un kreisajā pusē, bet otrais nosaka piemales apakšā un augšpusē.

Kā iestatīt fonu

Ievietojot attēlu HTML vietnes lapā, fona atribūts ir ļoti noderīgs. Šis atribūts ir daļa no ķermeņa elementa. Mērķis ir iestatīt ceļu uz grafisko failu, kuram ir jāaizpilda atsevišķa šūna, tabula vai lapa. Šī objekta izmantošana praksē izskatās šādi: izmantotā attēla adrese tiek rakstīta kā bodybackground parametra vērtība. Šādā veidā iestatītais fona attēls tiks atkārtots pa abscisu un ordinātu asīm, sākot no augšējā kreisā stūra.

Mēs ceram, ka šis raksts jums būs noderīgs. Priecīgu lasīšanu!

Attēli uzreiz ļauj mums saprast, cik interesanta mums var būt dotā vietne vai raksts, tie rada noskaņu un var atklāt tēmu jaunā veidā. Dažreiz viena fotogrāfija ir tūkstoš vārdu vērts.

Bet jums nevajadzētu tajās piedalīties, ja jums nav Instagram vai tiešsaistes veikala. Ir vēlams, lai attēli:

• bija informatīvi
• atbilst jūsu vietnes krāsu shēmai
• bija piemēroti

Ja jums nav piemērota fotoattēla, varat izmantot t.s photostock (fotobanka) - vieta, kur tiek glabātas daudzas fotogrāfijas, ilustrācijas un vektorgrafikas. Tādu resursu ir ļoti daudz, iespējams, esat pat dzirdējuši par vienu no lielākajiem - Shutterstock, taču lejupielādes tur ir maksas.

Tiem, kam nepatīk pārmaksāt, raksta beigās esam sagatavojuši bonuss- saraksts ar vairākām foto bankām, kurās varat lejupielādēt milzīgu daudzumu augstas kvalitātes skaistu materiālu pilnīgi bez maksas :)

Attēlu formāti

Vispasaules tīmeklī galvenokārt tiek izmantoti 3 veidu attēli:

gif(Grafikas apmaiņas formāts - attēlu apmaiņas formāts)

Šis ir pirmais formāts, ko sāka izmantot internetā. Šī formāta priekšrocības ir pieejamība animācijas un maza izmēra, lapa tiek ielādēta ātri. Turklāt tas atbalsta caurspīdīgumu. Trūkums - tikai lietots 256 krāsas(tāpēc patiesībā izmērs ir mazs), t.i. to nevar izmantot pilnkrāsu attēliem.

jpeg, aka jpg(Apvienotā fotogrāfiju ekspertu grupa - Apvienotā fotogrāfiju ekspertu grupa - tas ir attīstības organizācijas nosaukums)

piemērots pilnkrāsu augstas kvalitātes attēlu veidošanai, fotogrāfijas. Šādu attēlu izmērs ir liels, tāpēc tie parasti rada lielu slodzi serverim. Ja nepieciešams saspiest JPEG (lai attēla svars būtu mazāks), mēs iesakām ņemt gala attēla izmēru daudzkārtējs ar astoņiem , tāpēc kvalitātes zudums būs minimāls.

png(Pārnēsājamā tīkla grafika — Portatīvā tīkla grafika. Izrunā tāpat kā ping, t.i. )

šis formāts sākotnēji tika izstrādāts tīmeklim, t.i. Attēls parasti sver maz un nepalēninās lapas ielādes laikā. Šis formāts tika izveidots, lai aizstātu novecojušo gif, taču atšķirībā no tā tas neatbalsta animāciju. Png-8, tāpat kā gif, izmanto tikai 256 krāsas. Formāts png-24 atbalsta 16 miljonus krāsu, lai gan tas jau ir diezgan smags. Png-32 satur tādu pašu krāsu skaitu kā png-24, turklāt tas ļauj iegūt attēlu ar caurspīdīgu fonu , un varat pielāgot caurspīdīguma pakāpi. Samazinot png izmēru, krāsu kvalitāte nezaudē.

Apkoposim

gif- animācijai

jpeg- fotogrāfijām

png- ikonām, pogām, foniem, logotipiem, ekrānuzņēmumiem, zīmējumiem, tekstiem, fotogrāfijām ar caurspīdīgu fonu

Attēla ievietošana html failā

Lai lapai pievienotu attēlu, izmantojiet tagu (no angļu valodas attēla - attēls, attēls).Šī ir viena atzīme, un tai nav nepieciešama beigu atzīme. Šajā tagā ir ietverti atribūti.

Atribūts src(no angļu avota - avots) norāda ceļu uz failu (vietu, kur atrodas attēls). Ja attēls atrodas jūsu datorā (vietne joprojām tiek izstrādāta) vai jūsu serverī, izmantojiet relatīvu saiti. Ja attēls ir no tīkla, tad ir nepieciešama absolūta saite. Kā to izdarīt, lasiet rakstā "Saites".

Tātad, lai pievienotu attēlu savai tīmekļa lapai, jums jāievada šāds kods:

alt atribūts(no angļu valodas alternatīva - alternatīva) norāda tekstu, ko lietotājs redzēs, ja attēls netiks ielādēts. Ceļš ir nepareizi norādīts, bilde ir izdzēsta, slikts internets - var būt daudz iemeslu, un ir vēlams, lai persona saprastu, kas slēpjas aiz šīs nīstās ikonas.

Meklētājprogrammas pievērš īpašu uzmanību, lai nodrošinātu, ka šis atribūts ir aizpildīts. Un html validators (resurss koda pareizības pārbaudei) Alt atribūta neesamību uztvers kā kļūdu. Ja visi atribūti tiks aizpildīti, un, ja iespējams, saturēs arī atslēgvārdus – ievērojami palielināsies jūsu vietnes redzamība, t.i. tas tiks rādīts biežāk meklējumos. Tas ir no SEO jomas, un šajā posmā mums pietiek zināt, ka šāds atribūts ir, un “dzīvajā” vietnē tas ir jāaizpilda. Kamēr vietne atrodas mūsu diskā, to var atstāt tukšu.

Tālāk esošajā piemērā mēs apzināti norādījām attēlam neeksistējošu ceļu, lai jūs varētu redzēt, kā darbojas alt atribūts

Attēlu augstums un platums

Varat arī iestatīt attēla augstumu un platumu, ja sākotnējais attēls ir piem. vairāk nekā vajag.

HTML5 ieteicams to izdarīt, izmantojot CSS vai stila atribūts , kā šis:

Šajā piemērā mēs paņēmām 30% no platuma, nevis no sākotnējā attēla, bet gan no pārlūkprogrammas loga izmēra. Ja platums = 100%, attēls tiek atvērts visā pārlūkprogrammas platumā. Atcerieties šo funkciju procentiem, kā mērvienības.

Starp citu, ja mēs būtu uzrakstījuši tikai platumu, rezultāts būtu tāds pats, mēģiniet:

< img src = "https://site/tutorials/wp-content/uploads/2016/07/panda.jpg" alt = "panda kokā" stils = "platums: 30%;" >

Varat arī iestatīt platumu un augstumu pikseļi. Mūsu pandas gadījumā, kuras sākotnējie izmēri ir 1196 x 796 pikseļi, lai dzīvnieks neciestu, kad tiek saspiests, mums ir jāsaglabā proporcijas, un šeit jūs nevarat iztikt bez kalkulatora. Pieņemsim, ka mēs vēlamies samazināt attēla izmēru 3 reizes, tad mums ir jāiestata izmēri uz 399 x 265 pikseļiem.

Lūdzu, ņemiet vērā, ka, ja mēs palielinām attēlu proporcionāli, tad pietiek, piemēram, norādīt tikai vienu parametru. platums. Viedā pārlūkprogramma pati aprēķinās attēla pilno izmēru.

Mēģiniet palaist šo kodu un skatiet rezultātu:

< img src = "https://site/tutorials/wp-content/uploads/2016/07/panda.jpg" alt = "panda kokā" stils = "platums: 399 pikseļi;" >

Vienmēr iestatiet attēla izmērus. Parasti attēlu ielāde prasa ilgāku laiku nekā pārējā html koda ielāde. Ja pārlūkprogramma zina, cik daudz vietas rezervēt attēliem, tā var turpināt vietnes ielādi, negaidot attēlu ielādi.

Nedaudz naftalīna

Ja gadās ķerties pie HTML-4 vai pat agrāk izveidotas vietnes koda, pamanīsit, ka attēlu izmēri tiek iestatīti, izmantojot īpašus platuma atribūti Un augstums. Šī metode ir novecojusi, lai gan joprojām ir spēkā HTML5. Tomēr mēs iesakām izmantot stilu, jo Platuma un augstuma atribūtus var ietekmēt iekšējie vai ārējie stili, kas darbosies pārlūkprogrammā vai jūsu CSS failā. Mēs to aplūkosim sīkāk, aplūkojot CSS, bet pagaidām apskatiet piemēru, kā stili ietekmē augstuma un platuma atribūtus.

Šajā logā ir 3 cilnes: pirmajā redzat html kodu, otrajā CSS kodā un pēdējā - kā vienmēr rezultāts. Tas darbojas tā, it kā pirmā cilne būtu fails index.html, otrā - style.css fails, bet trešā - pārlūkprogramma. Tātad tagad mūsu CSS saka, ka visu elementu ar img tagu platums ir 100%. Platuma un augstuma atribūtu noklusējuma izmēri ir norādīti pikseļos, tāpēc šeit nav jāpievieno nekādas vienības.

Rezultātu atšķirība ir acīmredzama :)

Arī vecākās html versijās tika izmantoti šādi atribūti:

izlīdzināt, kas tika izmantots attēla līdzināšanai horizontāli vai vertikāli.

hspace- atkāpe attēla kreisajā un labajā pusē apkārtējam saturam (piemēram, tekstam vai blakus esošam attēlam)

vspace- atkāpe augšā un apakšā no attēla uz saturu ap to.

robeža- iestatiet rāmja biezumu ap attēlu (pēc noklusējuma tas ir nulle)

Mūsdienās visas šīs manipulācijas (un daudz kas cits) tiek veiktas, izmantojot CSS, tāpēc mēs nolēmām jūs ar to šeit neapgrūtināt. Ja jūs joprojām interesē, kā strādāt ar šiem atribūtiem, rakstiet komentāros, mēs pievienosim šo preci :)

Attēla ievietošana kodā

No kurienes mēs ievietojam savu tagu atkarīgs no tā, kā tas tiks parādīts pārlūkprogrammā.

Piemērs Nr. 1 — pirms rindkopas:

Tādi elementi kā

UN

atsaukties uz bloka elementi . Tie vienmēr sākas ar jaunu līniju un aizņem visu pieejamo pārlūkprogrammas loga platumu. Ja jūs pirmo vietu , un pēc tā bloka elementu, piemēram, rindkopu, tas tiks pārvietots uz nākamo rindiņu.

Piemērs Nr.2 - rindkopas sākumā

Šis ir iekļauts elements, tas iekļaujas bloka elementā un nesāk jaunu rindu. Iepriekš minētajā piemērā teksts tiek apvilkts ap attēlu, jo kods reģistrēts iekšā

Paraksti ilustrācijām

Lai lapā atzīmētu vai parakstītu fotoattēlu, izmantojiet tagu

(no angļu valodas figūras - zīmējums). Šis tags norāda, ka tajā tiks ievietots tāds saturs kā ilustrācijas, fotogrāfijas, diagrammas utt.

Tag