Ako pridať obrázok na pozadí v HTML: 13 Kroky

Ak chcete pridať obrázok na webovú stránku, budete potrebovať HTML a na vytvorenie obrazu webovej stránky, HTML a CSS sú potrebné. HTML (Hypertextový značkovací jazyk) je štandardizovaný jazyk označovania dokumentov, ktorý označuje prehliadač na zobrazenie na webovej stránke. CSS (Cascading štýl tabuľky) je popisový jazyk vzhľadu dokumentu, ktorý sa používa na zmenu vzhľadu a usporiadania webovej stránky. Budete potrebovať obrázok, ktorý ste nastavili ako pozadie webovej stránky.

Kroky

Časť 1 z 5:

Ako vytvoriť priečinok a súbor

jeden. Vytvorte priečinok na ukladanie htmlového súboru a obrázku na pozadí. Názov mena priečinka, pre ktorý sa dá ľahko nájsť.

Názov priečinka môže byť akýkoľvek, ale lepší, ak sa skladá z jedného krátkeho slova.

2. Skopírujte obrázok na pozadí do vytvoreného priečinka.

Ak nie ste veľmi opatrní, ako sa vaša stránka otvorí na starých zariadeniach alebo zariadeniach s pomalým pripojením na Internet, použite obrázok s vyšším rozlíšením. Ako pozadie je vhodný obraz s jednoduchým opakovaným vzorom, pretože text bude jasný.

Ak nemáte obrázok, stiahnite si ho zadarmo na internete a skopírujte do vytvoreného priečinka.

3. Vytvorte súbor HTML. Otvorte textový editor a potom vytvorte nový súbor. Uložte ho ako index.Html.

Môžete použiť akýkoľvek textový editor, napríklad poznámkový blok v systéme Windows alebo TextEdit v systéme Mac OS X.

Ak chcete použiť textový editor na prácu s HTML, Stiahnite si editor ATOM, ktorý podporuje Windows, MacOS a Linux.

Ak použijete textedit pred spustením zápisu HTML kódu, otvorte ponuku "Formát" a vyberte "Konvertovať na jednoduchý text". V tomto prípade bude súbor HTML správne načítaný do webového prehliadača.

Výkonné textové editory, ako napríklad Microsoft Word, nie sú veľmi vhodné na písanie HTML kód, pretože pridávajú neviditeľné znaky a formátovanie, ktoré môžu zabrániť správnemu zobrazeniu obsahu súboru HTML vo webovom prehliadači.

Časť 2 z 5:

Ako napísať kód HTML

jeden. Skopírujte a prilepte štandardný kód HTML. Zvýraznite a skopírujte HTML kód nižšie a potom ho vložte do indexu otvoreného súboru.Html.

Názov stránky {pozadí-obrázok: URL (" ") -}

2. Pridajte obrázok na pozadí URL. V Indexovom súbore.Html nájsť reťazec Pozadie - obrázok: URL (" ")-. Vložte kurzor do zátvoriek a potom zadajte názov súboru obrázkov na pozadí. Určite zobrazenie rozšírenia obrazu súborov.

Pozadie - obrázok: URL ("pozadie.jpg")-

Ak jednoducho zadáte názov súboru (bez jeho adresy URL alebo cesta), webový prehliadač vyhľadá obrázok v priečinku s htmlovým súborom. Ak je obrázok v inom priečinku, zadajte úplnú cestu k súboru.

Uložte súbor HTML. Obrázok s názvom 2627945 6 1

Časť 3 z 5:

Ako zobraziť súbor HTML

jeden. Otvorte súbor HTML vo webovom prehliadači. Kliknite pravým tlačidlom myši na indexový súbor.HTML a otvorte ho vo zvolenom webovom prehliadači.

Ak sa v prehliadači otvoril požadovaný obrázok, skontrolujte názov súboru s obrázkom správne v okne Editor textu.
Ak sa v webovom prehliadači zobrazí kód HTML, a nie obrázok na pozadí, súbor indexu.HTML bol uložený ako dokument vo formáte RTF. V tomto prípade upravte súbor HTML v inom textovom editore.

2. Vykonajte zmeny v súbore HTML. V okne Editor textu umiestnite kurzor medzi tagy a zadajte "Ahoj, svet!". Obnovte stránku v prehliadači, aby sa zadaný text zobrazí na pozadí obrázka.

Časť 4 z 5:

Ako porozumieť HTML kód

jeden. Pamätajte si, aké sú tagy v HTML a CSS. Kód HTML pozostáva z otváracích a zatváracích značiek. Napríklad tag je otvorenie - zatvorenie. Na každom otváracej značke by mal mať zodpovedajúcu uzatvárací značku na webovú stránku správne načítanú.

2. Zapamätajte si DOCTYPE TAGE. Vysoko kvalitný kód HTML musí začínať . Táto značka informuje webový prehliadač, že súbor HTML je súbor HTML.

3. Vykonajte zmeny v súbore HTML. V okne Editor textu umiestnite kurzor medzi tagy a zadajte "Ahoj, svet!". Obnovte stránku v prehliadači, aby sa zadaný text zobrazí na pozadí obrázka.

4. Pamätajte si, aké sú tagy v HTML a CSS. Kód HTML pozostáva z otváracích a zatváracích značiek. Napríklad tag je otvorenie - zatvorenie. Na každom otváracej značke by mal mať zodpovedajúcu uzatvárací značku na webovú stránku správne načítanú.

päť. Zapamätať si tag . Obsahuje text, ktorý sa zobrazí v záhlaví okna prehliadača, ako aj text zobrazený na karte prehliadača.

6. Zapamätať si tag Označuje obsah CSS. Všetko, čo je medzi tagmi

7. Zapamätať si tag . Akýkoľvek text umiestnený medzi tagmi , sa zobrazí podľa zadania (ak nie je HTML alebo CSS kód).

osem. Vykonajte zmeny v súbore HTML. V okne Editor textu umiestnite kurzor medzi tagy a zadajte "Ahoj, svet!". Obnovte stránku v prehliadači, aby sa zadaný text zobrazí na pozadí obrázka.

Časť 5 z 5:

Ako porozumieť CSS kód

jeden. Vypočítajte CSS kód. V Indexovom súbore.HTML CSS kód umiestnený medzi tagmi

2. Zobraziť kód CSS.

Telo {pozadí-obrázok: URL ("pozadie.jpg") -}

4. Zapamätajte si diely CSS. Štýly CSS sa skladajú z dvoch častí: voličom a oznámeniami.

Telo

Pozadie - obrázok: URL ("pozadie.jpg")

Volič môže byť ľubovoľná značka HTML.

Reklamy vždy spočívajú v kučeravých zátvorkách {}.

päť. Pamätajte si, aké oznámenie CSS. CSS reklama sa skladá z dvoch častí: vlastností a hodnôt. Obsah v kučeravých zátvorkách
Obrázok pozadia je majetok ako URL ("pozadie.jpg") je význam.

Nehnuteľnosť popisuje predmet (v našom príklade je to vzor pozadia) a hodnota je štýlom položky (v našom príklade je obrázok s obrázkom).

Nehnuteľnosť a hodnota sú vždy oddelené hrubým písmom (:).

Reklamy CSS vždy skončia bodkočiarkou (-).