Kuinka laittaa taustakuva html:ään. Taustaväri

Verkkosivuston luomiseksi tärkeä kysymys on, kuinka tehdä tausta html:llä. Tämä menettely sisältää tiettyjen tunnisteiden - koodisanojen ja kirjainten - käytön. Niiden ansiosta voit laittaa erilaisen taustan, tehdä siitä yksivärisen - täyttää sen tai laittaa minkä tahansa kuvan taustan tilalle. Tällaiset toimet ovat erittäin hyödyllisiä kaikille ulkoasun suunnittelijoille ja niille, jotka päättävät "pukea" verkkosivustonsa itse.

Taustan tekeminen

Ennen kuin teet verkkosivun taustan html:n, sinun on avattava sivun html-koodi tekstieditorissa. Sinun on muistettava, että sivun tagit on sijoitettu pystysuoraan. Sitten tagien väliin … , sinun on laitettava tunniste- Näitä tunnisteita tarvitaan selventämään tietyn verkkosivun elementtien tyyliä. Kolmen pisteen tilalle on kirjoitettava - body (tausta:) . Tämä on vaihtoehto, jonka avulla voit asettaa sivun taustalle erilaisia tyylejä. Voit tehdä väriasetustoiminnon kahdella tavalla. Ensimmäinen:

Body (background:#000000) – sivun taustan tulee nyt olla musta.

Tämä menetelmä sopii myös sekä värin että kuvan asettamiseen taustaksi. Kaksoispisteen jälkeen voit laittaa joko värikoodin tai linkin kuvaan. Tai voit käyttää menetelmää, joka tarkoittaa vain värin asettamista - tietyn sivun täyttöä. Kaksoispisteen jälkeen on kirjoitettava niin kutsuttu parametri - väri. Ja sen jälkeen laita itse värin koodi. Tämä menetelmä on hyvä, jos käytät sitä mallina. Kirjoita se muistiin ja tallenna se, ja tarvittaessa aseta väri ja laita se sivulle.

Voit laittaa kuvan tavallisen taustan sijaan. Jos sinun on selvitettävä: html:ssä, kuinka tehdä kuva taustaksi, on suoritettava samanlaiset toiminnot. Kirjoita tunnisteet, laita body (tausta: linkki kuvaan). Meidän on muistettava, että itse kuva voi olla missä tahansa. Ja Internetin verkkosivustolla, mutta on parasta luoda kansio asiakirjan juureen. Kansioon, johon kaikki tiedot sivuston sivusta tallennetaan, sinun on luotava toinen - kuville. Operaatio näyttää tältä:

Nyt valitsemasi kuva on koko sivuston sivun tausta. Toivomme, että ymmärrät taustan tekemisen html:llä. Yritä vain ja kaikki järjestyy varmasti!

Avaa HTML-sivutiedostosi muokkausta varten käyttämässäsi editorissa. Voit tehdä tämän napsauttamalla asiakirjaa hiiren kakkospainikkeella ja valitsemalla "Avaa sovelluksella" -osion.

HTML-tiedoston rakenne on sarja eri tasoisia ja eri tarkoituksiin tarkoitettuja kuvaajia. Sivun koodi alkaa yleensä tunnisteella . Tämän jälkeen on yleensä jakso , joka määrittää sivun otsikon ja CSS-koodin. Kun kahva on suljettu, sivun runko alkaa . Sivun taustakuvan asettamisen attribuutti on asetettu lisätaustaparametriksi tälle tunnisteelle. Koodi sivun taustan luomiseksi näyttää tältä:

Tässä tapauksessa kuvan polku voi olla URL-osoite (alkaa http://). Sijainti voidaan asettaa juurihakemistosta (/root/folder/background.jpg) tai suhteessa muokattavan HTML-dokumentin sijaintiin (esimerkiksi kansio/tausta.jpg).

Tallenna muutokset ja avaa sivu selaimessa. Voit tehdä tämän napsauttamalla hiiren kakkospainikkeella ja valitsemalla "Avaa sovelluksella". Ilmoita annettuun luetteloon sen ohjelman nimi, jota käytät Internet-sivujen katseluun. Jos taustaparametri on asetettu oikein, näet aiemmin määritetyn taustakuvan. Jos kuvaa ei näy, tarkista, että background-attribuutti on määritetty oikein ja taustatiedoston polku.

bgcolor-parametri

Voit määrittää taustavärin ilman kuvaa käyttämällä bgcolor-direktiiviä. Voit määrittää tämän attribuutin arvoksi englanninkielisen värinimen tai käyttää väriarvoa HTML-paletissa. Esimerkiksi:

Tämä koodi antaa sivulle sinisen taustan. Jos haluat määrittää värisävyn tai tarkemman värin, käytä HTML-paletin arvoja:

Tässä tapauksessa #002902 on väri, joka on annettava sivulle.

CSS-attribuutit

Voit myös asettaa taustan käyttämällä CSS-koodia asetuksissa :

CSS:n avulla voit myös määrittää sivulle taustakuvan taustakuvan kautta:

CSS:n ja HTML:n käyttö antaa samat tulokset, mutta sivun näyttöparametreja asetettaessa kannattaa käyttää CSS:ää.

Mitä tahansa verkkosivustoa luotaessa toiminnallisuuden lisäksi suunnittelu on erittäin tärkeää. Tämä määrittää tietyn yrityksen tai henkilön oman tyylin ja suunnittelun, jolle verkkosivustoa luodaan. Taustan värin ja kuvan mukauttaminen on helppoa noudattamalla tämän artikkelin ohjeita.

Avaa HTML-tiedosto Notepadilla tai millä tahansa muulla tekstieditorilla, johon olet tottunut. Otetaan esimerkiksi primitiivinen verkkosivusto, jossa on vähän tekstiä. Voit avata tiedoston millä tahansa selaimella.

Vaihda ensin taustasi väri, koska ihmiset, joilla on hidas Internet-yhteys, eivät näe heti sivuston taustakuvaa. Hetken aikaa, kun kuva latautuu, he näkevät vain sivustosi värin.
Syötä tagiin parametri bgcolor=”*****”, jossa ***** on värikoodi. Voit selvittää HTML:n värit missä tahansa graafisessa muokkausohjelmassa valitsemalla "webille" -vaihtoehdon tai verkkosivustolta https://colorscheme.ru/color-names

Sinun tarvitsee vain valita väri ympyräpaletista ja määrittää sen intensiteetti neliön sisällä. Oikealla näet kaksi html-koodia. Kopioi ne ja liitä ne muistilehtiöön.

Kun olet valinnut värin ja lisännyt sen koodiin, katso, teitkö kaiken oikein katsomalla tuloksena olevaa verkkosivua selaimesta.

Nyt voit aloittaa taustakuvan lisäämisen. Aseta haluamasi kuva koodikansioon käyttömukavuuden lisäämiseksi. Anna hänelle nimi latinalaisin kirjaimin.

Selvitä nyt tiedoston sijainti napsauttamalla sitä hiiren kakkospainikkeella, valitsemalla "Avaa sovelluksella" ja napsauttamalla mitä tahansa tietokoneellesi asennettua selainta.

Kopioi osoite selaimesi hakupalkista.

Nyt tagissa syötä rivi:

style=”background-image: url('file:///C:/Users/FILE_PATH.jpg')”

Tallenna tiedostosi.

Tarkista verkkosivusi. Näet, että tekstisi korvataan taustalla.

Huomaa, että käyttäjille, joilla on korkeampi näytön tarkkuus, kuvasi kopioidaan alas ja oikealle. Se ei näytä hyvältä, jos kuva ei ole yksivärinen. Tämän parametrin korjaamiseksi on olemassa erityisiä komentoja.

background-repeat : "Arvo." Vaihtoehdot arvollesi voisivat olla: "repeat-x" – toistaa taustakuvasi sekä vaaka- että pystysuunnassa. “repeat-y” – toisto vain pystysuunnassa. "ei toistoa" – kuva jäätyy paikalleen eikä toistu. "välilyönti" – koko sivu täytetään enimmäismäärällä kuvakopioita, uloimmat rajataan. "pyöreä" - sama vaihtoehto, mutta kuvan reunat skaalataan huolellisesti;
background-attachment: "Arvo". Jos korvaat tunnisteen "scroll" sanan Arvo sijasta, kuva vierii sivuston mukana. "kiinteä" - tausta pysyy muuttumattomana vierityksen aikana;
background-size: Arvo Arvo2. Tässä arvojen on oltava pikseleinä. Esimerkki: 100px 200px. Pikselien lisäksi hyväksytään prosenttiarvot. Tämä on vaihtoehto täyttää sivu kuvalla. Numeroiden lisäksi voit syöttää kaksi parametria: "contain" - täyttää sivun kuvalla pitkältä sivulta ja "cover" - täyttää sivun kuvalla leveydeltä.

Kun tiedät sivun täyttämisen HTML-taustalla perusteet, olet valmis luomaan ensimmäisen verkkosivustosi.

Oppitunti 7. Teksti- ja taustavärit HTML:ssä.

Päivämäärä: 2008-12-05

Kuinka asettaa taustan ja tekstin väri verkkosivulle?

Oletusarvoisesti tekstin ja yleensä minkä tahansa fontin väri verkkosivuilla on aina musta (#000000 ). Mutta voimme aina asettaa täysin minkä tahansa värin, josta pidämme ja näyttää kunnolliselta tai sopii paremmin tietyn sivuston suunnitteluun.

Aseta tekstin väri

HTML:ssä tekstin, fontin, taustan ja muiden elementtien väriä voidaan asettaa kahdella tavalla:

1. Menetelmä 1. Pareittain tageissa attribuutti on kirjoitettu joka ilmoittaa halutun värin nimen. Värin nimi on ilmoitettu englanniksi. Esimerkiksi verkkosivumme otsikon väri voidaan asettaa seuraavasti:

Kommentit tähän artikkeliin (oppitunti):

Andrei! Mikä upea sivusto sinulla on! Olen käyttänyt sitä säännöllisesti nyt toista viikkoa: tutkin oppituntejasi ja video-oppaitasi; Luen kirjallisuuttasi ja lataan ohjelmia; Otan ensimmäiset askeleeni web-ohjelmoinnin parissa! Ja mikä tärkeintä, pystyn siihen!!! Mutta en ole ollenkaan fyysikko, vaan sanoittaja! Ja jokainen, joka vierailee kirjallisella verkkosivustollani, voi vakuuttua tästä: "OLEG GUZIN RUNOT" Tietoni: sähköposti: [sähköposti suojattu] verkkosivusto: http://sites.google.com/site/stihiolegguz/

tarkista koodi huolellisesti

Yritin vaihtaa taustaväriä, mutta se ei toimi! Kuinka muuttaa taustaväriä?

Hyvää päivää kaikille, jotka haluavat oppia ja oppia jotain uutta! Oletko koskaan kiinnittänyt huomiota ulkonäköön, jonka kehittämisen aikana tekijät olivat liian laiskoja suunnittelemaan sivujen taustaa? Ja minä tein. Näyttää pahalta. Usein, koska erityyppisten tietojen välillä ei ole tavanomaista jakoa, se menee sekaisin, eikä sellaisesta verkkoresurssista yksinkertaisesti ole halua katsoa mitään pidemmälle.

Jotta minulle ei sattuisi tällaista katastrofia, päätin kirjoittaa artikkelin aiheesta: "Kuinka tehdä sivun tausta html:llä." Kun olet lukenut julkaisun, opit, mitä työkaluja voit käyttää taustasuunnittelun asettamiseen, miten taustan saa kiinteäksi tai muuttumaan ja paljon muuta, mikä auttaa tekemään sivustostasi houkuttelevan. Nyt aloitetaan!

Perustyökalut verkkosivujen taustan asettamiseen

Verkkokielen kehittäjät toimittivat taustakuvan määritteen taustakuvaksi. Se on saatavana sekä , että css-muodossa.

Sivunkuvauskielessä tämä on body-tunnisteen attribuutti, ja tyylisivuilla se on yleinen ominaisuus, jonka avulla voit määrittää enintään 5 taustaominaisuutta samanaikaisesti. Tausta on melko joustava elementti, jota voidaan käyttää taustan asettamiseen yksittäisen värin, värikuvan tai jopa animaation muodossa.

Joten taustakuvan asettaminen html-yksikön kautta kirjoita vain seuraava koodi: ... ja lisää kuvan polku sanan "tiedostoosoite" sijaan.

Huomaa kuitenkin! Jos haluat nähdä yksivärisen kankaan taustana väripaletin arvon määrittämänä, tämä tehdään käyttämällä bgcolor-attribuuttia.

Esimerkiksi, ..., olemme asettaneet sivustollemme mustan taustan.

CSS:n ja html:n värit määritellään joko englanninkielisellä sanalla (esim. red) tai erikoiskoodilla, joka koostuu #-merkistä ja kuudesta sen jälkeen merkitystä merkistä (esim. #FFDAB9).

Kun kirjoitat toisen vaihtoehdon kehittäjille tarkoitettuun erikoisohjelmistoon, paletti ilmestyy automaattisesti eteen. Jos olet juuri alkanut oppia näitä verkkokieliä, voit etsiä värikoodin Internetistä.