Ako vložíte obrázok na webovú stránku Aký je kód?

Tu je rozpis toho, ako umiestniť obrázok na web pomocou HTML, spolu s vysvetleniami a príkladmi:

1. `

`` `

* `src` atribút: Toto je najdôležitejšia časť. Určuje URL alebo cestu k súboru, kde sa nachádza obrázok.

* Príklad: `src =" images/my-image.jpg "` (ak je obrázok v priečinku s názvom 'Images' vo vašej webovej stránke).

* `alt` atribút: To je rozhodujúce pre prístupnosť a SEO. Poskytuje alternatívny text, ktorý popisuje obrázok pre používateľov, ktorí ho nemôžu vidieť (napr. Čítačky obrazovky).

* Príklad: `alt =" Krásny západ slnka nad oceánom "`

2. Bežné formáty obrazu

* jpeg (`.jpg` alebo` .jpeg`): Skvelé pre fotografie a obrázky s množstvom farieb a detailov.

* png (`.png`): Podporuje transparentnosť (zmiznutie pozadia) a je ideálna pre logá, ikony a grafiku s ostrými hranami.

* gif (`.gif`): Podporuje animáciu a dá sa použiť na jednoduché animácie alebo logá.

3. Veľkosť a optimalizácia obrázka

* Veľkosť: Optimalizujte obrázky pre používanie webu ich komprimovaním. Nástroje ako [https://tinypng.com/Ω(https://tinypng.com/) alebo [https://www.iloveimg.com/compress-imagefar -Báza) môže pomôcť.

* rozmery: Zadajte šírku a výšku obrázka pomocou atribútov „Width“ a „výšky“, aby ste zabránili problémom s rozložením pri načítaní obrázka.

4. Príklady

Príklad 1:Jednoduchý obrázok

`` `html

Moja webová stránka

`` `

Príklad 2:Obrázok s responzívnym správaním

`` `html

Moja webová stránka

`` `

* Atribút `width =" 100%"` robí obraz zaberá celú šírku svojho kontajnera, takže reaguje na rôzne veľkosti obrazovky.

5. Umiestnenie obrázkov do textu

Obrázky môžete umiestniť priamo do svojho textu, napríklad pred alebo po odseku, napríklad:

`` `html

Toto je odsek textu.

A tu je viac textu.

`` `

Kľúčové body:

* Image Cesta: Uistite sa, že cesta obrazu v atribúte `SRC` je správna v porovnaní s umiestnením vášho súboru HTML.

* Alternatívny text: Nikdy nezabudnite na atribút `alt`. Je to rozhodujúce pre prístupnosť a SEO.

* Optimalizácia obrázka: Uistite sa, že vaše obrázky sú optimalizované pre používanie webu. Menšie veľkosti súborov vedú k rýchlejším časom načítania.

Dajte mi vedieť, ak máte nejaké ďalšie otázky týkajúce sa obrázkov v HTML!

• Predchádzajúca strana: Ako odovzdáte obrázok na wiki? 
• Ďalšia strana: No