HTML pamati - attēlu parādīšana

• Maijs 5, 2024

Kad jūsu vietnes teksts ir ievietots un formatēts pēc jūsu vēlmēm, ir pienācis laiks papildināt lapu ar dažiem attēliem. Attēli var ne tikai pievienot lapām krāsu un dzīvi, bet arī izmantot tās, lai ģenerētu teksta efektus, ko būtu grūti vai neiespējami izdarīt ar parasto tekstu un formatējumu. Piemēram, jūsu fontu izvēle parasti tiek ierobežota ar nelielu fontu skaitu, par kuru var būt pārliecināts, ka esat instalējis apmeklētāju datoros, jo, ja viņiem nav instalēta fonta, viņi to nevar redzēt jūsu vietnē! Katru reizi, kad jūs ievietojat tekstu nepieejamā fontā, apmeklētāju datori to padarīs pieejamo, vistuvākajā stilā pieejamo fontu, kas bieži var sagraut jūsu vietnes dizainu.

No otras puses, ja jūs izmantojat attēlu rediģēšanas programmu, lai attēlotu tekstu iedomātā fontā un publicētu to savā vietnē GIF vai JPEG formātā, jebkurš apmeklētājs to redzēs tieši tā, kā jūs iecerējāt - jo tas tagad ir teksta attēls, nevis pats teksts. Tas var atbrīvot jūs no galveņu izdomātiem fontiem un sagrupēt tos neparastā veidā.

Attēlu parādīšanai izmantotā pamata tags:



Iepriekš minētais kods lieliski darbosies HTML. Ja jūs izmantojat XHTML vai vēlaties būt pārliecināts, ka jūsu vietne ir gatava XHTML, pievienojiet slīpsvītru, lai aizvērtu tagu, jo XHTML nevar izmantot beztermiņa tagus:



“Src” ir īss avota avots, un jūs to izmantosit, lai norādītu faila ceļu uz jūsu attēlu - citiem vārdiem sakot, lai norādītu pārlūkprogrammai, kur attēls ir atrodams jūsu vietnē. Ja attēlus glabājat tajā pašā mapē kā Web lapas, mape nav jāuzskaita tekstā 'src' - varat vienkārši ievadīt attēla faila nosaukumu.

Kad esat norādījis attēla avotu, varat uzlabot šo pamata ietvaru ar dažādiem izvēles atribūtiem, lai maksimāli izmantotu savus attēlus. Viens atribūts, kuru gandrīz vienmēr vajadzētu izmantot, ir atribūts “alt”. Tas ļauj jums norādīt, kādu tekstu vajadzētu parādīt pārlūkprogrammai, ja tā kādu iemeslu dēļ nevar parādīt jūsu attēlu. “Alt” tekstu sagatavo šādi:



Vēl viens noderīgs atribūtu komplekts ir tagi “platums” un “augstums”. Tas ļauj parādīt attēlus, kas atšķiras no faktiskā attēla izmēra. Varat tos izmantot, lai savu tēlu pārveidotu tā, lai tas lieliski iekļautos jūsu lapas vispārējā noformējumā. Tomēr parasti ir ieteicams mainīt faktisko attēla izmēru, izmantojot attēlu rediģēšanas programmas, un pēc tam ievietot attēlu tiešsaistē divu iemeslu dēļ. Pirmkārt, attēlu rediģēšanas programmatūra gandrīz vienmēr sniegs labāku rezultātu, nekā izmēra pielāgošana ar roku. Otrkārt, mainot tagus “platums” un “augstums”, nemainās faktiskais attēla faila lielums, tāpēc, ja jums ir milzīgs attēls, kuru parādāt kā sīktēlu, attēla ielādēšana prasīs tikpat ilgu laiku un tiks sakostis tieši tāpat daudz joslas platuma, it kā jūs būtu to parādījis pilnā izmērā.

Norādot attēla izmēru, var uzskaitīt augstumu, platumu vai abus. Izmēri tiek norādīti pēc pikseļa, kā redzat zemāk:



Varat arī "saskaņot" savus attēlus, lai tie vienmērīgi darbotos ar jūsu teksta plūsmu. Ja izvēlaties līdzinājumu pa kreisi, teksts sāksies attēla labajā pusē. Ja izvēlaties pareizo izlīdzināšanu, attēls tiks parādīts lapas labajā pusē, un teksts parādīsies attēla kreisajā pusē un pēc tam tiks pārtraukts jaunā rindā.

Attēla izlīdzināšana tiek iestatīta šādi:



Varat arī iestatīt izlīdzināšanu uz “augšējo”, “apakšu” vai “vidējo”, lai attēls būtu sakārtots teksta līnijas augšpusē vai apakšā. Ja nenorādīsit izlīdzināšanu, attēla noklusējuma vērtība būs “apakšā”.

Kā blakuspiezīmi attēla tagos jebkurā secībā varat iekļaut savus attēla atribūtus (src, izlīdzināt, alt utt.). Mana personīgā izvēle ir vispirms uzskaitīt atribūtu “src”, jo tas ir visvienkāršākais atribūts, un tas jāiekļauj katrā attēla tagā, taču jūs varat izmantot jebkuru secību, kas jums šķiet visdabiskākā.

Video Instrukcijas: Kā izveidot savu mājaslapu-1 Daļa:HTML pamati (Maijs 2024).