Pievienojiet attēlu ar HTML

Autors: Christy White
Radīšanas Datums: 4 Maijs 2021
Atjaunināšanas Datums: 1 Jūlijs 2024
Anonim
15: How to Insert Images Using HTML and CSS | Learn HTML and CSS | HTML Tutorial | Basics of CSS
Video: 15: How to Insert Images Using HTML and CSS | Learn HTML and CSS | HTML Tutorial | Basics of CSS

Saturs

Attēlu pievienošana vietnei vai sociālā tīkla profilam ir lielisks veids, kā saģērbt savu tīmekļa lapu. HTML (HyperText Markup Language) ir daudz funkciju, lai izveidotu tīmekļa lapas, taču par laimi kods, kas jums jāpievieno attēliem, nav pārāk grūts.

Lai soli

1. metode no 1: attēlu ievietošana ar HTML

  1. Augšupielādējiet savu attēlu bezmaksas mitināšanas vietnē, piemēram, Photobucket vai TinyPic, kas ļauj ātri sasaistīt. Karstā sasaiste ļauj tieši saistīt attēlu ar vietnes serveri; daži pakalpojumu sniedzēji to ir aizlieguši, jo karstā sasaiste izmanto to joslas platumu un aizņem vietu viņu serveros.
    • Ja jums ir apmaksāts mitināšanas konts, augšupielādējiet attēlus tieši tajā serverī, kurā atrodas jūsu vietne. Tas vienmēr ir uzticamāks nekā bezmaksas vietne, un tam nemaz nav jābūt dārgam.
  2. Atveriet jaunu dokumentu teksta redaktorā (piem.,, Notepad / Notepad) vai atveriet lapu savā vietnē / profilā, kur varat tieši mainīt HTML kodu.
  3. Sāciet ar img tagu. The img tags ir tukšs, tas nozīmē, ka noslēguma tags nav vajadzīgs. Tomēr XHTML validācijai jūs joprojām varat ievietot atstarpi un slīpsvītru tās priekšā lielāks nekā zīmi.
    • img />
  4. Ir daudz pieejamo atribūtu, taču nepieciešams tikai viens:src. Tā ir jūsu attēla atrašanās vieta / adrese vai arī URL.
    • img src = "attēla URL" />
  5. Tālāk jums tas jādara alt pievienot atribūtu. Tas parāda alternatīvu tekstu gadījumā, ja attēlu neizdodas ielādēt. Tas ir arī pakalpojums vājredzīgajiem, kas izmanto ekrāna lasītājus.
    • Ja virzāt kursoru virs attēla, šis teksts tiek parādīts arī kā rīka padoms, taču tas notiek tikai programmā Internet Explorer. Risinājums, kas darbojas ar visām pārlūkprogrammām (Firefox un citi.) ir tam nosaukums atribūts, ko izmantot papildus alt. (Pēdējo varat izlaist, ja nevēlaties, lai attēlam būtu padoms.)

Kā piemērs:img src = "Attēla URL" alt = "Tikai gadījumā" title = "Rīka padoms" />


  1. Tagad jūs varētu norādīt attēla lielumu ar augstums un platums atribūtu un norādot pikseļus vai procentus. Ņemiet vērā, ka šādā veidā mainot izmērus, tiek mainīts tikai skata lielums, nevis paša attēla lielums. Lai saīsinātu attēla ielādes laiku, labāk, jo īpaši ar lieliem attēliem, tos iepriekš mainīt, izmantojot fotoattēlu rediģēšanas programmatūru vai tiešsaistes pakalpojumu, piemēram, PicResize.com.
    • img src = "attēla URL" alt = "katram gadījumam" title = "rīka padoms" height = "50%" width = "50%" />
    • img src = "attēla URL" alt = "katram gadījumam" title = "rīka padoms" height = "25px" width = "50px" />

Padomi

  • Šo atribūtu vērtība tiek norādīta pikseļos vai procentos no 1 līdz 100%.
  • Attēlu var ievietot jebkurā tīmekļa lapas vietā, izmantojot dažādus formatēšanas atribūtus, piemēram, augšējo, apakšējo, vidējo, labo, kreiso utt.
  • Atribūtu hspace izmanto, lai ievietotu horizontālu atstarpi attēla kreisajā un labajā pusē, savukārt vspace atribūtu izmanto, lai atbrīvotu vietu attēlu un citu objektu augšdaļā un apakšdaļā.
  • Neļaujieties pārāk daudz ar attēliem. Tas izskatās netīrs un neprofesionāls.
  • GIF attēli ir piemēroti logotipiem vai karikatūrām, taču šis faila tips ir mazāk piemērots fotoattēliem un citiem attēliem ar daudzām krāsām.
    • GIF attēli atbalsta tikai 8 bitu krāsas, ne vairāk kā 256 krāsas attēlam. Tāpēc ir sagaidāms, ka 16 vai 24 bitu krāsainas ilustrācijas vai fotoattēla reproducēšana nebūs tik laba.
    • GIF attēli atbalsta arī pārredzamību. Ir iespējama viena daļa caurspīdīguma, kas nozīmē, ka vienu krāsu var padarīt caurspīdīgu.
    • Pārsliešanu atbalsta arī GIF attēli, kas nozīmē, ka vietnes apmeklētājs gūs priekšstatu par to, kā attēls izskatīsies, pirms tas tiks pilnībā ielādēts.
    • GIF formāts atbalsta arī animāciju.
  • Pārliecinieties, vai URL norāda attēla faila formātu (.webp .gif utt.).

Brīdinājumi

  • Nelietojiet Hotlink!