Ako vytvoriť obrázok na pozadí v html. Ako nastaviť farbu pozadia v HTML. Základné nástroje pre nastavenie pozadia webových stránok

Od autora: Ahojte všetci. Farby pozadia a obrázky hrajú pri webdizajne obrovskú úlohu, pretože vám umožňujú navrhnúť akékoľvek prvky atraktívnejšie. Dnes sa pozrieme na to, ako urobiť pozadie v HTML.

Je možné použiť HTML na nastavenie pozadia?

Hneď poviem, že nie. Vo všeobecnosti nebolo html vytvorené na navrhovanie webových stránok. Len je to veľmi nepohodlné. Existuje napríklad atribút bgcolor, pomocou ktorého môžete nastaviť farbu pozadia, čo je však veľmi nepohodlné.

V súlade s tým budeme používať kaskádové štýly (CSS). Príležitostí na nastavenie pozadia je oveľa viac. Dnes sa pozrieme na tie najzákladnejšie.

Ako nastaviť pozadie pomocou css?

V prvom rade sa teda musíte rozhodnúť, ktorému prvku chcete nastaviť pozadie. To znamená, že musíme nájsť selektor, do ktorého napíšeme pravidlo. Napríklad, ak potrebujete nastaviť pozadie pre celú stránku ako celok, môžete to urobiť pomocou selektora tela a pre všetky bloky pomocou selektora div. No atď. Pozadie môže a malo by byť viazané na akékoľvek iné selektory: triedy štýlu, identifikátory atď.

Potom, čo ste sa rozhodli pre selektor, musíte napísať názov samotnej nehnuteľnosti. Ak chcete nastaviť farbu pozadia (konkrétne plnú farbu, nie gradient alebo obrázok), použite vlastnosť background-color. Za ním musíte vložiť dvojbodku a napísať samotnú farbu. Dá sa to urobiť rôznymi spôsobmi. Napríklad pomocou kľúčových slov, hexadecimálneho kódu, formátov rgb, rgba, hsl. Postačí akákoľvek metóda.

Najčastejšie používanou metódou je hexadecimálny kód. Na výber farieb môžete použiť program, ktorý zobrazí kód farby. Napríklad photoshop, farba alebo nejaký online nástroj. Podľa toho ako príklad napíšem všeobecné pozadie pre celú webovú stránku.

telo (farba pozadia: #D4E6B3; )

Tento kód je potrebné vložiť do sekcie hlavy. Je dôležité, aby boli súbory v rovnakom priečinku.

Obrázok ako pozadie

Pre obrázok použijem malú ikonu jazyka html:

Vytvorme prázdny blok s identifikátorom:

Dajme tomu explicitné rozmery a pozadie:

#bg( šírka: 400px; výška: 250px; obrázok na pozadí: url(html.png); )

Z tohto kódu môžete vidieť, že som použil novú vlastnosť - background-image. Je určený špeciálne na vloženie obrázka ako pozadia do html prvku. Pozrime sa, čo sa stalo:

Ak chcete zadať obrázok, musíte zadať kľúčové slovo url za dvojbodkou a potom uviesť cestu k súboru v zátvorkách. V tomto prípade je cesta špecifikovaná na základe skutočnosti, že obrázok je v rovnakom priečinku ako html dokument. Musíte tiež určiť formát obrázka.

Ak ste to urobili a pozadie sa v bloku stále nezobrazuje, znova skontrolujte, či ste správne napísali názov obrázka, či je správne nastavená cesta a prípona. Toto sú najčastejšie dôvody, prečo sa pozadie jednoducho nezobrazí, pretože prehliadač nemôže nájsť obrázok.

Ale všimli ste si jednu vec? Prehliadač vzal a znásobil obrázok v celom bloku. Takže, aby ste vedeli, toto je predvolené správanie obrázkov na pozadí - opakujú sa vertikálne a horizontálne, pokiaľ sa zmestia do bloku. Týmto správaním môžete ľahko ovládať. Na tento účel použite vlastnosť background-repeat, ktorá má 4 hlavné hodnoty:

Repeat – predvolená hodnota, obrázok sa opakuje na oboch stranách;

Repeat-x – opakuje sa len na osi x;

Repeat-y – opakuje sa iba pozdĺž osi y;

No-repeat – neopakuje sa vôbec;

Môžete napísať každú hodnotu a uvidíte, čo sa stane. Napíšem to takto:

background-repeat: repeat-x;

Teraz opakujte iba vodorovne. Ak nastavíte možnosť bez opakovania, bude tam iba jeden obrázok.

Skvelé, tu môžeme skončiť, keďže toto sú základné možnosti práce s pozadím, ale ukážem vám ešte 2 vlastnosti, ktoré vám umožnia získať väčšiu kontrolu.

Prostredníctvom opakovania boli dizajnéri rozloženia schopní vytvárať textúry pozadia a prechody pomocou jedného malého obrázka. Mohlo by to byť 30 x 10 pixelov alebo dokonca menšie. Alebo možno trochu viac. Obraz bol taký, že keď sa to opakovalo na jednej alebo aj na oboch stranách, nebolo vidieť žiadne prechody, takže výsledkom bolo jediné, bezproblémové pozadie. Mimochodom, tento prístup sa teraz oplatí použiť, ak chcete na svojom webe použiť ako pozadie súvislú textúru. Dnes sa už dá gradient implementovať pomocou metód css3, o tom si určite povieme neskôr.

Pozícia pozadia

V predvolenom nastavení bude obrázok na pozadí, pokiaľ nie je nastavený na opakovanie, v ľavom hornom rohu jeho bloku. Pozíciu je však možné jednoducho zmeniť pomocou vlastnosti background-position.

Môžete to nastaviť rôznymi spôsobmi. Jednou z možností je jednoducho uviesť strany, na ktorých by mal byť obrázok umiestnený:

pozadie-pozícia: vpravo hore;

To znamená, že vertikálne zostáva všetko rovnaké: obrázok na pozadí je umiestnený navrchu, ale horizontálne sme zmenili stranu vpravo, teda vpravo. Ďalším spôsobom nastavenia pozície je percentuálny podiel. V tomto prípade sa odpočítavanie v každom prípade začína od ľavého horného rohu. 100% - celý blok. Aby sme teda obrázok umiestnili presne do stredu, napíšeme ho takto:

pozícia pozadia: 50 % 50 %;

Pri polohovaní si zapamätajte jednu dôležitú vec – prvým parametrom je vždy horizontálna poloha a druhým je vertikálna poloha. Ak teda uvidíte hodnotu 80% 20%, môžete okamžite dospieť k záveru, že obrázok na pozadí sa posunie veľmi doprava, ale veľmi neklesne.

A nakoniec môžete určiť polohu v pixeloch. Všetko je po starom, len namiesto % bude px. V niektorých prípadoch môže byť takéto umiestnenie potrebné.

Stenografický zápis

Súhlaste s tým, že kód sa ukáže ako dosť ťažkopádny, ak je všetko nastavené tak, ako sme to urobili. Ukazuje sa, že je potrebné špecifikovať cestu k obrázku, opakovanie a polohu. Samozrejme, opakovanie a umiestnenie nie sú vždy potrebné, ale v každom prípade by bolo správnejšie použiť pre vlastnosť skrátený zápis. Vyzerá to takto:

pozadie: #333 url(bg.jpg) bez opakovania 50 % 50 %;

To znamená, že prvým krokom je v prípade potreby zaznamenať celkovú plnú farbu pozadia. Potom cesta k obrázku, opakovanie a poloha. Ak niektorý parameter nie je potrebný, jednoducho ho vynechajte. Súhlasíte, je to oveľa rýchlejšie a pohodlnejšie a výrazne znižujeme aj náš kód. Vo všeobecnosti radím, aby ste vždy písali v skrátenej forme, aj keď potrebujete uviesť iba farbu alebo obrázok.

Ovládanie veľkosti obrázka na pozadí

Náš súčasný obrázok nie je veľmi dobrý na demonštráciu ďalšieho triku, takže vezmem ďalší. Nech je to veľkosť bloku alebo väčšia. Predstavte si teda, že stojíte pred úlohou vytvoriť obrázok na pozadí tak, aby úplne nevyplnil svoj blok. A napríklad obrázok je ešte väčší ako veľkosť bloku.

Čo môžete urobiť v tomto prípade? Samozrejme, najjednoduchšou a najrozumnejšou možnosťou by bolo jednoducho zmenšiť obrázok, ale nie vždy je to možné. Povedzme, že je na serveri a momentálne nie je čas ani príležitosť to zredukovať. Problém je možné vyriešiť pomocou vlastnosti background-size, ktorú možno nazvať relatívne novou a ktorá vám umožňuje manipulovať s veľkosťou obrázka na pozadí a vlastne akéhokoľvek pozadia.

Takže môj obrázok teraz zaberá celý priestor v bloku, ale dám mu veľkosť pozadia:

veľkosť pozadia: 80 % 50 %;

Opäť platí, že prvý parameter nastavuje horizontálnu veľkosť, druhý - vertikálnu veľkosť. Vidíme, že všetko bolo aplikované správne - fotografia sa stala 80% šírky bloku na šírku a polovicu na výšku. Tu je potrebné len jedno upresnenie - nastavením veľkosti v percentách môžete ovplyvniť proporcie obrázka. Takže buďte opatrní, ak nechcete narušiť proporcie.

Ako môžete hádať, veľkosť pozadia môže byť špecifikovaná aj v pixeloch. Môžete použiť aj ďalšie dve kľúčové slová:

Obálka – obrázok bude zmenšený tak, aby aspoň na jednej strane úplne vyplnil blok.

Obsah – upraví veľkosť tak, aby sa obrázok úplne zmestil do bloku pri jeho maximálnej veľkosti.

Výhodou týchto hodnôt je, že nemenia proporcie obrazu, pričom ich ponechávajú rovnaké.

Mali by ste tiež pochopiť, že natiahnutie obrázka môže viesť k zhoršeniu jeho kvality. Môžem uviesť príklad zo života a reálnej praxe dispozičných dizajnérov. Každý vie a chápe, že pri navrhovaní pre stolné počítače je potrebné prispôsobiť stránku šírke hlavného monitora: 1280, 1366, 1920. Ak odfotíte obrázok na pozadí s veľkosťou povedzme 1280 x 200 a nedáte veľkosť pozadia, potom obrazovky s väčšou šírkou Objaví sa prázdne miesto, obrázok nevyplní celú šírku.

V 99% prípadov to web developerovi nevyhovuje, preto nastaví background-size: cover tak, aby sa obrázok vždy natiahol na maximálnu šírku okna. Je to dobrá technika, ale teraz budete čeliť problému, že používatelia so šírkou obrazovky 1920 pixelov môžu vidieť neoptimálnu kvalitu obrazu.

Pripomínam, že sa natiahne do maximálnej šírky. V súlade s tým sa kvalita automaticky zhorší. Jediným správnym riešením by bolo na začiatku použiť väčší obrázok – široký 1920 pixelov. Potom na najširších obrazovkách bude vo svojej prirodzenej veľkosti a na iných sa jednoducho postupne odreže, ale zároveň, ak je obrázok na pozadí správne vybraný, neovplyvní to vzhľad stránky.

Vo všeobecnosti je to len 1 príklad, ako využiť znalosti, ktoré ste získali v tomto článku, pri zostavovaní skutočných rozložení.

Priesvitné pozadie pomocou css

Ďalšou funkciou, ktorú je možné implementovať pomocou css, je priesvitné pozadie. To znamená, že cez toto pozadie bude možné vidieť, čo je za tým.

Ako príklad nastavím celú stránku ako pozadie k obrázku, ktorý sme použili skôr v príkladoch. Pre blok s identifikátorom bg, na ktorom vykonávame všetky naše experimenty, nastavíme pozadie pomocou formátu nastavenia farieb rgba.

Ako som už povedal, existuje veľa formátov na nastavenie farieb v CSS. Jedným z nich je rgb, pomerne známy formát pre tých, ktorí pracujú v grafických editoroch. Píše sa takto: rgb(17, 255, 34);

Prvá hodnota v zátvorkách je sýtosť červenej, potom zelenej a potom modrej. Hodnota môže byť číselná od 0 do 255. Formát rgba sa teda nelíši, pridáva sa iba jeden parameter - alfa kanál. Hodnota môže byť od 0 do 1, kde 0 je úplná priehľadnosť.

Ahojte všetci! Váš skromný sluha je s vami v kontakte s porciou užitočného a praktického materiálu na tému ako nastaviť pozadie pre webovú stránku. Toto je úplný začiatok v rozložení html a tu názorne ukážem na príklade, ako môžete vytvoriť krásne pozadie pre stránku, ktorá určite zaujme používateľa internetu a dodá originalitu.

Ak ste si všimli, väčšina online obchodníkov používa na svojich predajných a predplatiteľských stránkach jedinečné pozadie. Dnes budeme analyzovať technickú zložku tohto procesu.

Takže najprv potrebujeme, samozrejme, obrázok. Na zahraničnom internete je jedna veľmi dobrá stránka, kde sa dajú stiahnuť rôzne obrázky na pozadí webovej stránky. Je ich tam jednoducho obrovské množstvo. Stránka sa volá Subtle Patterns.

V zozname vyhľadávačov Google sa objavuje na prvom mieste, preto ho odporúčam do práce. Môžete tiež nájsť veľké množstvo iných stránok, ak zadáte do vyhľadávača niečo ako „vzory obrázkov na pozadí“, „stiahnutie obrázka na pozadí webu“ atď.

Ak nemáte problémy s anglickým jazykom, bez problémov mu porozumiete.

V tomto článku som si vybral tému a volá sa tvíd. Môžete si ho stiahnuť.

Takto to vyzerá v malej verzii na webe

Najprv vytvorte nový dokument v programe

A pred úpravou si ho určite uložte napríklad pod menom index.html a vytvorte priečinok v počítači, napríklad môžete vytvoriť priečinok „Moja stránka“ a umiestniť do neho náš indexový súbor (index.html), je lepšie vytvoriť priečinok v angličtine, aby sa prehliadač nezmýlil a nesprávne zobrazenie stránky.

Okrem toho musíte v hlavnom priečinku „moja stránka“ vytvoriť ďalšie dva podpriečinky, do jedného umiestnime všetky naše obrázky a bude sa nazývať „obrázky“ a do druhého pomenujeme „CSS“ (kaskádový štýl listy) a umiestnite tam súbor style.css

Teraz môžeme pracovať v našom dokumente. Ďalším krokom je vloženie prázdneho HTML kódu, takzvaného hlavného rámca, od ktorého to všetko začína. Môžete si ho stiahnuť priamo. Ďalej skopírujeme všetko z tohto súboru a prenesieme ho do nášho programového súboru. Konečný výsledok by mal byť niečo ako nasledovné

Vedľa názvu súboru si všimnete červenú disketu. Ak je teda červená, znamená to, že súbor nebol uložený, nezabudnite kliknúť na tlačidlo uloženia, aby sa disketa zmenila na modrú.

V značke title môžete zmeniť názov dokumentu, napríklad z neho urobiť „Moja prvá webová stránka“. A uistite sa, že vaša stránka je uložená v kódovaní UTF-8

V opačnom prípade, ak existuje iné kódovanie, napríklad windows-1251, potom sa text dokumentu v prehliadači zobrazí v hieroglyfoch. Kódovanie môžete zmeniť v časti „Kódovanie – Kódovanie v Utf-8 (bez kusovníka)“ na paneli nástrojov programu.

A nezabudnite uložiť každú akciu, ktorú vykonáme.

Teraz začnime vytvárať pozadie v našom dokumente. Hneď poviem, že všetky naše akcie na dizajne webovej stránky sa uskutočnia pomocou kaskádových štýlov nazývaných CSS, to znamená, že vytvoríme rám v html a dovedieme ho do krásneho štýlu a vzhľadu pomocou CSS.

Týmto spôsobom sa naučíte správne poradie akcií. Štýly by ste nemali riešiť priamo v html dokumente, je lepšie ich vložiť do samostatného dokumentu.

Aby sme to urobili, v našom programe Notepad++ vytvoríme ďalší súbor a nazveme ho Style.css a uložíme ho do nového priečinka css, ktorý sa bude nachádzať v zdieľanom priečinku „Moja stránka“

Skvelé! Aby náš prehliadač správne zobrazil stránku, musíme prepojiť šablónu so štýlmi s naším html dokumentom. Tu je návod, ako sa to robí

Zadáme priamo celý riadok vyššie. S týmto riadkom spájame náš štýlový list.
Teraz zadefinujeme obrázok na pozadí pre našu značku tela prostredníctvom šablóny štýlov. Za týmto účelom vytvoríme v dokumente style.css nasledujúcu štruktúru (stačí ju vziať a napísať do programového kódu)

Dovoľte mi to tu trochu vysvetliť. Atribút pozadia má mnoho hodnôt, z ktorých jedna je background-repeat, ktorá je zodpovedná za roztiahnutie nášho obrázka na pozadí pre webový dokument.

POZADIE – OPAKOVANIE:

REPEAT //(natiahnuť horizontálne a vertikálne) REPEAT-X // (natiahnuť len horizontálne) REPEAT-Y //(natiahnuť len vertikálne) NO-REPEAT //(neopakovať obrázok na pozadí)

V našom prípade replikujeme náš malý obrázok vertikálne aj horizontálne. Výsledkom je, že celá stránka je vyplnená naším obrázkom. Takto to vyzerá v prehliadači:

Špeciálne pre vás som urobil aj výber stránok, kde si môžete stiahnuť krásne pozadie stránky

Každá miestnosť bude vyzerať oveľa lepšie, ak bude jej podlaha pokrytá drahým perzským kobercom. Prečo je teda váš web horší? Možno je čas „pokryť“ podlahu drahým, elegantným ručne vyrobeným kobercom. Pozrime sa bližšie na to, ako vytvoriť pozadie pre webovú stránku:

Pozadie pre stránku

Stáva sa, že starý dizajn webovej stránky sa stal nudným. A chcem niečo nové a chutné. A nový dizajn bude rovnaký, ak si ho vyrobíte sami.

Ale úplne zmeniť celý dizajn zdroja svojpomocne je nevďačná úloha. A nie každý má na túto úlohu správne vycvičené ruky. Najjednoduchším spôsobom obnovenia starej šablóny je preto zmena farby pozadia zdroja alebo jeho obrázka na pozadí.

Existuje niekoľko spôsobov, ako zmeniť pozadie na webovej stránke. Na to sa využívajú možnosti CSS alebo html. Ale mnohé vlastnosti pre prácu s pozadím majú rovnaký názov a spôsob aplikácie v týchto webových technológiách.

Základy práce s pozadiami v html

Ako pozadie možno použiť niekoľko prvkov:

• Farba;
• Obrázok na pozadí;
• Obrázok textúry.

Pozrime sa na použitie každého z nich podrobnejšie.

Ak chcete nastaviť farbu pozadia lokality, použite vlastnosť background-color atribútu style. To znamená, že ak chcete nastaviť hlavnú farbu webovej stránky, musíte ju napísať do značky . Napríklad:

Pozadie webovej stránky #55D52B

Okrem hexadecimálneho farebného kódu je podporovaná hodnota vo formáte kľúčového slova alebo RGB. Príklady:

Pozadie webovej stránky rgb (23,113,44)

Pozadie webovej stránky zelené

Nastavenie farby pozadia pomocou kľúčových slov má v porovnaní s ostatnými dvoma spôsobmi množstvo obmedzení.

HTML podporuje iba 16 kľúčových slov na nastavenie farieb. Tu je niekoľko z nich: biela, červená, modrá, čierna, žltá a ďalšie.

Preto, aby ste nastavili pozadie pre html stránku, je lepšie použiť hexadecimálny alebo RGB formát.

Okrem výberu farieb sú k dispozícii aj ďalšie možnosti prispôsobenia. Ak je vlastnosť background-color nastavená na priehľadné , pozadie stránky sa stane priehľadným. Táto hodnota je predvolene priradená tejto vlastnosti.

Teraz sa pozrime na možnosti hypertextového jazyka na nastavenie obrázka na pozadí pre web. Dá sa to urobiť pomocou vlastnosti background-image.

Ako môžete vidieť z kódu, obrázok je prepojený prostredníctvom adresy URL uvedenej v zátvorkách. Nie všetky obrázky sú však také veľké, aby ich veľkosť zaplnila celú plochu obrazovky. Pozrime sa, ako sa zobrazí menší obrázok.

Predpokladajme, že vyvíjame webovú stránku o poézii a ako pozadie potrebujeme použiť obrázok Pegasa. Okrídlený kôň zosobní slobodu tvorivej myšlienky básnika!

Potrebujeme, aby sa obrázok raz zobrazil v strede obrazovky. Ale, bohužiaľ, prehliadač nerozumie našim vznešeným túžbam. A zobrazuje menší obrázok na pozadí stránky toľkokrát, koľkokrát sa do oblasti obrazovky zmestí:

Azda štyri usmievavé kone s krídlami budú pre básnikov priveľkou inšpiráciou. Preto zakazujeme klonovanie nášho Pegasa. Robíme to pomocou vlastnosti background-repeat. Možné hodnoty:

• repeat-x – zopakuje obrázok na pozadí vodorovne;
• repeat-y – vertikálne;
• opakovať – na oboch osiach;
• no-repeat – opakovanie je zakázané.

Spomedzi uvedených možností nás zaujíma posledná. Pred zmenou pozadia stránky ho používame v našom kóde:

Ale, samozrejme, bolo by lepšie, keby sa náš leták nachádzal v strede obrazovky. Vlastnosť background-position je presne určená na umiestnenie obrázka pozadia na stránke. Súradnice polohy môžete nastaviť niekoľkými spôsobmi:

• kľúčové slovo ( hore, dole, v strede, vľavo, vpravo);
• Percento – počítanie začína od ľavého horného rohu;
• V jednotkách merania (pixeloch).

Použime najjednoduchšiu možnosť centrovania:

Stáva sa, že pri posúvaní potrebujete opraviť polohu obrázka. Preto pred vytvorením obrázka ako pozadia stránky použite špeciálnu vlastnosť background-attachment . Hodnoty, ktoré akceptuje, sú:

• zvitok;


• pevné.

Potrebujeme poslednú hodnotu. Teraz bude náš príklad kódu vyzerať takto:

Webové stránky textúry pozadia

V prvom príklade sme ako pozadie použili veľkú a krásnu púštnu krajinu. Ale za takú krásu musíte zaplatiť v plnej výške. Hmotnosť obrazu vyrobeného vo vysokej kvalite môže dosiahnuť niekoľko megabajtov.

Tento objem žiadnym spôsobom neovplyvňuje rýchlosť načítania stránky prehliadača s vysokorýchlostným internetovým pripojením. Ale čo mobilný internet, pri jeho používaní načítanie niekoľkých „metrov“ zaberie veľa času?

Všetky tieto problémy sú vyriešené pomocou textúrovaného pozadia. Používa malý obrázok ako vzor textúry. Aj keď sa to mnohokrát opakuje, kresba sa načíta iba raz.

17.10.2015

Ešte nie

Ahojte všetci!
Pokračujme v učení základov HTML.
V tejto lekcii vám poviem a ukážem príklady ako urobiť pozadie z farby alebo obrázka na stránke HTML.
Je to celkom jednoduché!
Začnime farbou!
Myslím, že vám to neušlo, kde som vám povedal, ako zmeniť farbu textu a na konci článku som dal kódy pre rôzne farby a odtiene. Prečo som vám pripomenul túto lekciu? Áno, pretože existuje tabuľka s hotovými farebnými kódmi, vezmite si ich a hneď si ich precvičte v tejto lekcii.
Ako teda vytvoriť farbu pozadia v HTML...

Farba pozadia v HTML

Predvolená farba pozadia v dokumente HTML je biela. Ako nastaviť farbu podľa želania?
Pomôže nám v tom atribút „bgcolor“. Ak chcete maľovať na pozadie, pridajte tento atribút do značky „body“:

Alebo takto:

Tu je úplný HTML kód:

Text strany bude zelený a pozadie čierne.

Výsledok bude takýto:

Ak chcete vytvoriť pozadie z obrázka, pridajte atribút „background“ do značky „body“:

Vyplňte ľubovoľný obrázok, na ktorom je vaša webová stránka (v mojom príklade sa stránka volá „fon“ s príponou „.gif“):

Tu je úplný HTML kód:

Výsledok bude takýto:

Ak sa obrázok na pozadí nachádza v priečinku obrázkov alebo v inom priečinku, bude vyzerať takto:

Tu je úplný HTML kód:

Text stránky na krásnom pozadí.

To je na dnes všetko! Myslím, že lekcia nebola ťažká a všetko ste pochopili. Ak máte otázky, píšte do komentárov.
Teším sa na vás na ďalších lekciách.

Predchádzajúci príspevok
Ďalší záznam

Atribút sa používa na zobrazenie obrázka na stránke src. Src pochádzal zo zdroja, čo znamená Zdroj. Hodnota atribútu src je url Snímky.

Riadok vyššie znamená, že obrázok je v rovnakom adresári (priečinku) ako samotný html súbor, ktorý na tento obrázok odkazuje. Povedzme, že máte priečinok html, ktorý obsahuje index.html s vyššie uvedeným kódom a samotný obrázok s názvom obrázok.jpg.

V tomto prípade pri otváraní index.html Tento obrázok uvidíte vo svojom prehliadači. Ak ho máte niekde inde (priečinok vyššie alebo nižšie), tak namiesto neho uvidíte buď biele pole, alebo malý obdĺžnik s červeným krížikom (obrázok sa nepodarilo načítať).

atribúty značky img

src- adresa obrázka
šírka- šírka obrazu
výška- výška obrazu
titul- podpis, ktorý sa zobrazí, keď umiestnite kurzor myši na obrázok
alt- alternatívny text. Potrebný pre vyhľadávací robot a indexovanie obrázkov
hranica- hrúbka okraja obrázka. 0 - bez okraja, 1 - najtenší okraj atď.

Adresa vloženého obrázka (príklady)

Ak je súbor v priečinku vyššie, potom áno

Môžete tiež vložiť obrázok z inej lokality úplne bez toho, aby ste ho stiahli do svojho priečinka. Na to musíte mať stabilné internetové pripojenie a približne nasledujúci kód, v ktorom do adresy zadáte adresu obrázka na internete:

Obrázok na pozadí v HTML