Jak Vložit Obrázek Na Web

Obsah:

Jak Vložit Obrázek Na Web
Jak Vložit Obrázek Na Web

Video: Jak Vložit Obrázek Na Web

Video: Jak Vložit Obrázek Na Web
Video: How To Embed Images in HTML - IMG Tag Explained - Tutorial for Beginners 2024, Smět
Anonim

Prohlížeč zobrazí vše, co návštěvník uvidí na stránkách, na základě podrobných pokynů zaslaných serverem. Tyto pokyny se nazývají html-kód stránky a jsou tvořeny samostatnými „značkami“, které popisují typ, vzhled a umístění každého prvku zvlášť. Chcete-li na stránku umístit jakýkoli nový prvek (například obrázek), musíte do jeho zdrojového kódu přidat odpovídající instrukci - značku. Zvažte nejjednodušší způsob, jak to udělat.

Vkládání obrázku na stránku
Vkládání obrázku na stránku

Instrukce

Krok 1

Pokud používáte jakýkoli systém pro správu obsahu, je velmi pravděpodobné, že obsahuje editor stránek. Nejprve musíte v tomto editoru otevřít požadovanou stránku. Dále - možnosti jsou možné. V nejlepším případě bude mít editor stránek „vizuální režim“, jinými slovy - „režim WYSIWYG“(Co vidíte, to dostanete - „to, co vidíte, to dostanete“). V tomto režimu nebudete vůbec muset řešit původní html kód! Stránka v editoru bude vypadat stejně jako na webu, stačí poklepat myší na požadované místo a stisknout tlačítko „vložit obrázek“na panelu editoru.

Krok 2

Ve výsledku se otevře dialogové okno, ve kterém musíte vybrat požadovaný obrázek. Pokud jste jej ještě nenahráli, je zde také tlačítko pro výběr obrázku v počítači a jeho nahrání na server. Kromě toho v tomto dialogovém okně můžete nastavit barvu a šířku rámečku kolem obrázku, vzdálenost a barvu výplně mezi rámečkem a obrázkem, text popisku. Zde není nutné zadávat rozměry, ale z důvodu urychlení načítání stránky a zabránění zkreslení designu je stále lepší to udělat. Když jsou vyplněna všechna požadovaná pole dialogového okna, klikněte na „OK“a poté uložte upravenou stránku.

Dialogové okno Vložit obrázek
Dialogové okno Vložit obrázek

Krok 3

Vzhledem k tomu, že pro řídicí systémy neexistuje jediný standard, může se postup pro vložení obrázku ve vizuálním režimu vašeho systému mírně lišit, ale princip bude stejný. Ze stejného důvodu se režim WYSIWYG nemusí objevit v systému správy vašeho webu. Pak musíte ještě upravit zdrojový kód stránky v HTML (HyperText Markup Language - „hypertext markup language“). Budete muset vložit značku na správné místo v kódu, který řekne prohlížeči, aby zde zobrazil obrázek. V nejjednodušší podobě by to mělo vypadat takto: Zde je „relativní adresa“obrázku - na této adrese by měl prohlížeč kontaktovat server, aby z něj získal soubor obrázku. Pokud je adresa relativní, pak prohlížeč předpokládá, že soubor je ve stejné složce serveru jako samotná stránka (nebo v podsložce). Abychom se ale nemýlili, je lepší zadat „absolutní adresu“- například takto: Přirozeně, aby server mohl obrázek najít a odeslat do prohlížeče, měl by být nahrán na zadanou umístění. Nejjednodušší způsob, jak to udělat, je prostřednictvím správce souborů, který je v každém systému pro správu obsahu, stejně jako v ovládacím panelu vaší hostitelské společnosti. Můžete to udělat také pomocí protokolu FTP (File Transfer Protocol - „file transfer protocol“), pomocí speciálního programu - FTP-client. Existuje mnoho z nich, placených i bezplatných - například Cute FTP, FlashFXP, WS FTP atd. Instalace, zvládnutí a konfigurace programu samozřejmě bude nějakou dobu trvat, takže správce souborů pro stahování všeho, co potřebujete, prostřednictvím prohlížeč je jednodušší volba.

Krok 4

Kromě adresy ve značce html obrázku můžete zadat další informace - „atributy“značky. Například atribut alt="Image" obsahuje text popisku, který se objeví, když podržíte kurzor myši nad obrázkem: Může být nahrazen - atributem title: - Velikost obdélníku, ve kterém má prohlížeč fungovat. zobrazit obrázek je nastaven atributy šířky a výšky: - Atribut ohraničení určuje šířku ohraničení kolem obrázku (v pixelech): Pokud je z obrázku vytvořen odkaz, prohlížeč kolem něj nakreslí modrý rámeček. Chcete-li se toho zbavit, nastavte hodnotu ohraničení na nulu: - Další dva atributy obsahují informace o míře odsazení obrázku od sousedních prvků (z řádků textu, jiných obrázků atd.) - hspace nastaví velikost odsazení vodorovně (vlevo a vpravo), vspace - svisle (dole a nahoře):

Doporučuje: