17.10.2015

ešte nie

Ahojte všetci!
Naďalej študujeme základy HTML.
V tejto lekcii poviem a zobrazí sa na príkladoch, ako urobiť pozadie Z farby alebo obrázkov na stránke HTML.
Všetko je celkom jednoduché!
Začnime z farby!
Myslím, že ste nenechali ujsť, kde som povedal, ako zmeniť farbu textu a na konci článku dal kódy rôznych farieb a odtieňov. Prečo som vám pripomenul túto lekciu? Áno, pretože tam je stôl s hotovými farebnými kódmi, vezmite ich a okamžite vykonajte v tejto lekcii.
Takže, ako urobiť farebné pozadie v html ...

Farebné pozadie v HTML

Farba pozadia v predvolenom dokumente HTML. Ako sa pýtať farbu, ak je to žiaduce?
To nám pomôže atribút "BGCOLOR". Ak chcete maľovať zadné pozadie, napíšte tento atribút "Telo" Tag:

Alebo tak:

Tu je plný HTML kód:

Text stránky bude zelený a čierne pozadie.

Výsledkom bude toto:

Ak chcete vytvoriť pozadie z obrázku, potom na tag "BODY", zaregistrujeme atribút "Bacground":

Vyplňte ľubovoľný obrázok, kde vaša webová stránka leží (v príklade, stránka sa nazýva "fon" s rozšírením ".gif"):

Tu je plný HTML kód:

Výsledkom bude toto:

Ak je obrázok pozadia uverejnený v priečinku obrázkov alebo v inom priečinku, bude to vyzerať takto:

Tu je plný HTML kód:

Text stránky na krásnom pozadí.

Dnes je to všetko! Myslím, že lekcia nebola zložitá a vy všetci ste pochopili. Ak máte otázky, napíšte v komentári.
Čakanie na vás v nasledujúcich hodinách.

Predchádzajúci príspevok
Nasledujúci príspevok

Dobrý deň všetkým, aby sa učili a učili sa niečo nové! Venuli ste niekedy pozornosť vzhľad Pri vývoji, ktoré tvorcovia boli leniví, aby vydali pozadie stránok? A obrátil som sa. Vyzerá to porážku. Často kvôli nedostatku zvyčajných separácií medzi rôzne druhy Informácie, ktoré je zmiešaná a jednoducho zmizne túžbu ďalej pozrieť sa na taký webový zdroj.

Aby sa takéto problémy nestalo, že som sa rozhodol napísať článok o téme: "Ako urobiť pozadie stránok v HTML". Po prečítaní publikácie sa naučíte, s akými nástrojmi môžete nastaviť návrh pozadia, ako urobiť pozadie pevné alebo meniace sa a oveľa viac, čo pomôže vytvoriť vaše webové stránky atraktívne. Teraz poďme začať!

Základné nástroje pre nastavenie webových stránok pozadia

Ak chcete nastaviť obrázok pozadia, vývojári webových jazykov poskytli pozadie atribútu. Je k dispozícii v a v CSS.

V jazyku Markup - toto je atribút tela tag a v tabuľkách štýlov - univerzálna nehnuteľnosťktorý umožňuje nastaviť až 5 vlastností zadného plánu v rovnakom čase. Pozadie je pomerne flexibilný prvok, ktorý môže byť použitý na úlohu pozadia ako farby, farebný obraz alebo dokonca animáciu.

Takže nainštalovať obrázok na pozadí cez html jednotku Dosť na napísanie tohto kódu: ...

A namiesto slov "adresa súboru" vložte cestu k obrázku.

Avšak, oznámenie! Ak vo forme pozadia chcete vidieť monochonové plátno špecifikované z palety farieb, potom sa to robí pomocou atribútu BGCOLOR.

Napríklad, ...

Pýtali sme sa na naše stránky.

Farby v CSS a HTML sú nastavené buď anglickým slovom (napríklad červeným), alebo špeciálnym kódom, ktorý sa skladá zo značiek # a šesť znakov po ňom (napríklad # FFDAB9).

Pri písaní druhej možnosti v špecializovaní softvérové \u200b\u200bprodukty Pre vývojárov sa paleta automaticky zobrazí pred vami. Ak ste sa práve začali učiť tieto webové jazyky, potom sa farebný kód môže prepchať na internete.

Pozadie ako nehnuteľnosť v kaskádových štýlových tabuľkách

Je nastavený alebo v samostatný súbor s štýlmi CSS alebo prvok

Na túto poznámku môžete zhrnúť našu prácu. Pridajte sa k radom mojich verných predplatiteľov, pýtajte sa, či je niečo nepochopiteľné, a nezaučnite odkaz na môj blog, a zdieľať ho s priateľmi. Želám vám príjemné učenie. BYE BYE!

S pozdravom, Roman Chuchev

Pri konfigurácii ľubovoľného miesta, okrem funkčnosti, dizajn je veľmi dôležitý. To je to, čo sa týka vášho vlastného štýlu a dizajnu spoločnosti alebo osoby, pre ktorú je vytvorená stránka. Prispôsobte si farbu pozadia a jeho obraz nebude pracovať podľa pokynov v tomto článku.

Otvor tvoj HTML súbor. pre poznámkový blok alebo iné textový editorNa ktorú ste zvyknutí. Užívajte napríklad primitívnu stránku stránky s minimálnym textom. Súbor môžete otvoriť pomocou ľubovoľného prehliadača.

Ak chcete začať, zmeňte farbu vášho pozadia, pretože ľudia s pomalým pripojením na internet nebudú okamžite schopné vidieť obraz pozadia stránky. Niekedy, kým sa obrázok nenačíta, môžu vidieť iba farbu vašej stránky.
Zadajte značku. Parameter BGCOLOR \u003d "*****", kde ***** je farebná šifrovaná šifrovaná. Môžete sa naučiť farby pre HTML grafický editorVýberom možnosti "pre web" buď na stránke https://colorscheme.ru/color-Names

Máte dosť na to, aby ste si vybrali farbu v palete kruhu a priradili jeho intenzitu na námestí. Vpravo zobrazíte dva kódy pre HTML. Skopírujte ich a vložte ich do notebooku.

Uveďte farbu a vloženie do kódu, uvidíte, či ste urobili všetko správne, prezeranie prijatej webovej stránky z prehliadača.

Teraz môžete prejsť na vloženie obrázka na pozadí. Umiestnite požadovaný obrázok do priečinka s kódom pre väčšie pohodlie. Opýtajte sa ho na meno latinské písmená.

Teraz zistite umiestnenie súboru kliknutím na to s pravou tlačidlom myši výberom "Otvoriť pomocou" reťazca a kliknutím na ľubovoľný prehliadač nainštalovaný v počítači.

Skopírujte adresu z vyhľadávacieho panela prehliadača.

Teraz v tag Zadajte reťazec:

• Štýl \u003d "pozadie-obrázok: URL (" Súbor: /// C: / ussers / pow_file.jpg ') "

Uložte súbor.

Skontrolujte svoju webovú stránku. Uvidíte, že pozadie je nahradené pod textom.

Upozorňujeme, že používatelia, ktorí majú väčšie rozlíšenie obrazovky, váš obrázok bude duplikovaný dole a doprava. Nebude to vyzerať dobre, ak obraz nie je monofónny. Ak chcete tento parameter opraviť, existujú špeciálne príkazy.

• pozadie-Opakovanie: "Hodnota". Možnosti vašej hodnoty môžu byť: "Repeat-X" - opakuje váš obrázok na pozadí a horizontálne a vertikálne. "REPEAT-Y" - Opakujte len vertikálne. "NO-REPEAT" - obrázok je zmrazený na mieste a neopakuje sa. "Priestor" - Celá strana bude vyplnená maximálny počet Kópie obrazu, extrémna bude brag. "Kolo" - rovnaká možnosť, ale na okrajoch obrazu budú úhľadne zmenšené;
• príloha na pozadí: "Hodnota". Ak namiesto slovného štítku nahrádzate, potom sa obrázok posúva s miestom. "Pevné" - pri rolovaní pozadia zostáva nezmenené;
• veľkosť pozadia: hodnota hodnoty2. Tu musia hodnoty brať množstvo v pixeloch. Napríklad: 100px 200px. Okrem pixelov sú hodnoty prijaté v percentách. Toto je parameter výplne obrazu. Okrem čísel môžete zadať dva parametre: "Obsahovať" - vyplní na stránke obrazom pozdĺž dlhej strany a "kryt" - vyplní stránku s obrázkom na šírku.

Vedieť základy vyplnenia pozadia stránky v HTML sú pripravení vytvoriť svoju prvú stránku.

V HTML, pozadie pre stránku nešpecifikuje, je napísané prostredníctvom štýlov CSS, ale je to len teoretická formalita. A teraz zistite, ako je toto pozadie definované.

Pozadie pre stránku alebo samostatný blok

Keďže implementovať tento cieľ potrebujeme súbor CSS, musíte ho vytvoriť a pripojiť sa k HTML. Toto je napísané v tomto článku. Potom môžete pokračovať v práci. Po prvé, musíte sa rozhodnúť, čo chcete nastaviť pozadie. Ak je celá stránka všeobecne, potom to tak môžete urobiť:

Telo (
Pozadia-farba: biela;
}

To znamená, že odvolávame na štítok tela, ktorá predstavuje celú stránku. Vlastnosť na pozadí sa používa na špecifikáciu farby pozadia. Ale čo ak potrebujete nastaviť kreslenie ako pozadie, a nie pevnú farbu? Potom stojí za to napísať takto:

Telo (
Pozadie - obrázok: URL (cesta k obrázku. Obrázok výkresu)
}

V prípade jasnosti navrhujem zvážiť všetko podrobnosti o príklade. Aby som to urobil, použijem taký obrázok:

Napríklad pozadia-obrázok: URL (comp.png). V tomto príklade sme sa pýtali obrázok na pozadí s názvom COMP (presne to, čo som to zavolal) formát pngktoré leží v rovnakom priečinku ako súbor CSS.
V HTML vytvorte ľubovoľný blok so špecifickými dimenziami, aby sme preukázali prácu vlastností CSS.

A tu pre neho štýly:

#Ct (
Pozadie - obrázok: URL (comp.png);
Šírka: 600px;
Výška: 400px;
}

To sme urobili:

Prečo je to? Faktom je, že v predvolenom nastavení prehliadač opakuje obraz toľkokrát, kým plne naplní blok. Niekedy je potrebné napríklad pri používaní bezšvíkových ornamentov, ale v našom prípade by mal byť jeden obrázok. Našťastie to môže byť veľmi jednoduché riadiť.

Opakovanie pozadia

Ak máte obrázok ako pozadie, potom sa štandardne bude opakovať horizontálne a vertikálne vyplniť celý priestor stránky. Ak ho chcete odstrániť, použije sa vlastnosť opakovania pozadia a jej neopaktovú hodnotu (neopakuje). Tam sú tiež hodnoty:

• REPEAT-X - Opakujte len horizontálne
• Opakované-y - len vertikálne

Pridám do vlastností nášho grafického pozadia:

Pozadia - opakovanie: bez opakovania;

Pozícia

Určenie pozície na pozadí určuje miesto, kde bude obraz. Tu sú nastavené dve hodnoty - horizontálne a vertikálne. Príklady: Pozícia pozadia: pravá spodná časť - poloha v pravom dolnom rohu, vľavo hore - v dolnej hornej časti (a tak predvolenom nastavení), 250px 500px - ofset od ľavej strany horný roh Právo na 250 pixelov a dole na 500.

Pozrime sa lepšie na príkladoch:

Pozícia pozadia: pravé pravé pravé;

Obrázok na pohyb na horný horný okraj. Tiež som dal žlté pozadie, aby som bol viditeľný pre jeho hrany.

pozícia pozadia: 50% 50%;

Obraz sa objavil presne v jeho bloku. Áno, to je tiež možné vďaka percentuálny podiel pozície.

pozícia pozadia: 70% 20%;

Pozadie sa posunie o 70% vodorovne a 20 vertikálne.

V pixeloch je tiež povolené nastaviť zápornú hodnotu pozície. Je prípustné, napríklad, keď používate veľký obraz-sprite a musíte dať do jednotky požadovanú časť tohto sprite.

Upevnenie pozadia

Stále sa mi páči jedna vlastnosť nazvaná pozadia. Má len dve hodnoty a prvý je predvolený (rolovanie). To znamená, že pri rolovaní stránky, pozadie sa tiež posúva a ak používate obrázok bez opakovania, potom nakoniec skončí a potom ide len s pevnou farbou.

Takže sa to nestane, pozadia-prílohy: pevné je predpísané a teraz je naše pozadie spoľahlivo opravené na mieste. To možno porovnať s tým, ako blok definuje pevné umiestnenie a nezmizne zo stránky pri jej rolovaní.

Skrátené nahrávanie všetkých tejto dobrých

Rozoberali sme veľa nehnuteľností, ktoré vám umožnia urobiť pozadie, ale ak sa používajú všetko, ukazuje ťažkopádny záznam. Je tu veľmi elegantné riešenie. Vlastnosť pozadia vám umožňuje písať cez medzery potrebujete nastavenia V tomto poradí:
Pozadie: Color Image Opakovanie upevňovacej polohy;
A teraz môže byť všetko napísané takto:

Pozadie: žltá adresa URL (comp.png) NO-REPEAT 20% 100PX;

Ak niektorý majetok nie je potrebný na určenie, potom sa jednoducho zníži (v našom prípade sme nezaznamenali prílohu na pozadí).

Veľa pozadia

A čo ak potrebujete niekoľko obrázkov na pozadí? To sa stane. Dnes CSS podporuje takúto príležitosť. Vyskúšajme. Vezmite takúto ikonu

Zavolal som jej notebook.

A tu je kód, ktorý vloží multiphone:

Pozadie: URL (comp.png) NO-REPEAT 20% 100PX,
URL (Laptop.png) NO-REPEAT 50% 50%;
Pozadia-farba: žltá;

Ako vidíte, stačí dať čiarku po prvom obrázku a predpísať nastavenia pre sekundu. Pevná farba v tomto prípade je lepšie nastaviť oddelene.

Rovnakým spôsobom môžete nahrávať ďalšie obrázky, ale nepreháňajte to - príliš veľa grafikou nie je veľmi dobrá.

To som chcel tento článok dokončiť. S pozadím môžete urobiť oveľa viac zaujímavých vecí, budem sa snažiť o nich písať v budúcnosti (a niečo už bolo napísané - napríklad). Študovať túto nehnuteľnosť.

Nastavte farbu pozadia a / alebo obrázok pre stránku alebo samostatnú položku je dostatočne jednoduchá. Hlavnou vecou je vedieť, kde a ako to môže byť vykonané, rovnako ako mať farebný kód a / alebo obrázok na pozadí. Je možné, že z tohto článku sa naučíte veľa nových vecí, ale vytvoril som ho konkrétne pre začiatočníkov. Preto bude všetko čo najkratšie a podrobnejšie súčasne. Hlavná vec je, že dostanete nielen všeobecný pohľad A pripravené príklady, ale aj pochopenie toho, ako urobiť pozadie v HTML.

Nastavenie pozadia v HTML Použite stredný dokty

A začnem so skutočnosťou, že Html5. Žiadna príležitosť sa opýtať. Táto funkcia sa rozhodla vydržať v CSS. Preto, ak plánujete použiť nižšie, a chcete získať platný (správny) kód, musíte zostať na druhu prechodu dokumentu. Ak to chcete urobiť, vaša webová stránka by mala začať s nasledujúcim riadkom:

Prechodný// en "" http://www.w3.org/tr/html4/loose.dtd "\u003e

Ak ste to prišli, poďme pochopiť, ako je pozadie vytvorené. A prvá vec je potrebné poznamenať - to je rozdiel medzi farba pozadia a obrázok pozadia. Na začiatku ide farba pozadiaktoré povodne všetky dostupné miesto alebo jeho prvok. Opakované na vrchole obrázok pozadia. Vizuálne to môže byť zobrazené nasledovne:

Doterajší stav techniky HTML a jej prvky

Druhá vec, ktorú potrebujete vedieť, je rozdiel medzi telo dokumentu a prvok dokumentu. Telo dokumentu Je uvedený v HTML kód webovej stránky tagy tela, ktorý obsahuje všetok obsah webovej stránky. Samozrejme, pozadie dokumentu dokumentu nemôže byť transparentné. Ak nie je zadané pozadie tela dokumentu, použije sa predvolená hodnota zadaná v nastaveniach prehliadača.

Prvky stránky sú vo vnútri tela. Je pozoruhodné, že môžete nastaviť farbu a / alebo obrázok na pozadí pomocou HTML na všetky prvky dokumentu. Napríklad obrázok pozadia môže byť špecifikovaný len pre tabuľky. V predvolenom nastavení majú zvyčajne transparentné pozadie.

Atribút BGCOLOR na vytvorenie farby pozadia

Aby sa opýtal farba pozadia Dokument alebo jeho prvky používa Atribút BGCOLOR, napríklad:

V tomto prípade sme nastavili farbu pozadia pre stránku ako celok. Ale príklad, ako nastaviť farbu pozadia pre stôl, v tabuľke Tabuľka:

Text s pozadím

Je pozoruhodné, že farba pozadia v tabuľke môže byť špecifikovaná aj pre riadky v TR a pre ich bunky v TD tag.

Ako zistiť farebný kód?

Pravdepodobne ste si už všimli, že farba v HTML je nastavená na špeciálne kódNapríklad: # ec008c. Aby ste zistili kód, ktorý potrebujete farbu, môžete použiť jeden z grafických editorov. Napríklad vo Photoshope môžete použiť " Nástroj Eyedropper."(Pipette), aby ste získali farbu z bodu na obrázku. Potom musíte kliknúť na výslednú farbu na paneli s nástrojmi av okne, ktoré sa otvorí " Farebný výber."(Vybrať farbu) Kopírovať farebný kód. \\ T

Upozorňujem na skutočnosť, že tento kód bude bez nápisu mriežky (#) na začiatku, toto znamenie bude potrebné pridať manuálne.

Môžete tiež použiť početné online služby, napr.:

• atď.

Ich princíp práce je ešte jednoduchší - kliknite na požadovanú farbu a získajte kód.

Atribút pozadia vytvoriť obrázok na pozadí

Ako aj v prípade farby pozadia av prípade obrázok pozadiaMusíte použiť špeciálny atribút, menovite pozadie, napríklad:

V tomto prípade sa pýtame obrázok na pozadí pre stránku ako celok. Je pozoruhodné, že kvôli obmedzeniam veľkosti obrazu sa bude opakovať, napríklad:

Keď vidíte, keď je opakovanie, prechod medzi obrázkami je viditeľný. Často sa používajú špeciálne obrázky, kde sa tento moment berie do úvahy.

Ale príklad, ako nastaviť obrázok na pozadí pre tabuľku, v tabuľke Tabuľka:

Text s pozadím

Je pozoruhodné, že obrázok pozadia môže byť nastavený len pre tabuľku ako celok a / alebo jeho samostatnú bunku. Pre reťazec to nebude fungovať.

Absolútna a relatívna cesta k obrázku na pozadí

Oddelene stojí za to platiť pozornosť obrázok adresy. V tomto prípade sa použije relatívna cesta k obrázku, t.j. Adresa je uvedená na umiestnení obrazového súboru do súboru webovej stránky. Táto možnosť nie je možné volať obzvlášť úspešný. Najlepšie je použiť absolútnu cestu k obrázku, t.j. jeho úplná adresa URL, napr.:

V tomto prípade nebudete mať sprievodné problémy. Pre viac o tom môžete čítať.

Poďme zhrnúť

Pomocou atribútov BGColor a pozadie je morálne zastarané, pretože pre platnosť HTML kódu budete musieť používať prechodný dokty. Ak chcete nastaviť farbu pozadia v HTML, používa špeciálne kódy, ktoré môžete zistiť v grafickom editore alebo pomocou špeciálnych online služieb. Obrázok pozadia je duplikovaný v chvostoch pridelenej plochy a leží na vrchole farby pozadia. Ak chcete zadať obrázok pozadia, je lepšie používať jeho úplnú adresu URL. Mám na tom všetko. Ďakujem za pozornosť. Veľa štastia!

V 22:37

Upravte správu