Hjemmesidebakgrunn i html. For de som vil vite bedre
Mange nybegynnere layoutdesignere, som bare fordyper seg i essensen av å lage nettsteder, lurer ofte på hvordan man gjør bakgrunnen til et bilde i html. Og selv om noen mennesker kan finne ut av denne oppgaven, oppstår det fortsatt problemer når du strekker bildet over hele skjermens bredde. Samtidig vil jeg at siden skal vises likt på alle nettlesere, så kravet til kryss-nettlesere må oppfylles. Du kan angi bakgrunnen på to måter: ved å bruke CSS-stil. Alle velger mest for seg selv beste alternativet. Selvfølgelig er CSS-stil mye mer praktisk, fordi koden er lagret i egen fil og tar ikke opp ekstra kolonner i hovedkodene til nettstedet, men først vil vi vurdere en enkel metode for å installere et bilde på bakgrunnen til nettstedet.
Grunnleggende HTML-koder for å lage en bakgrunn
Så, la oss gå videre til spørsmålet, bakgrunn i html på hele skjermen. For at nettstedet skal se vakkert ut, må du forstå én ting: viktig detalj: lett nok å gjøre gradient bakgrunn eller mal det i en solid farge, men hvis du trenger å sette inn et bilde i bakgrunnen, vil det ikke strekke seg over hele skjermens bredde. Til å begynne med må du velge et bilde eller lage et design selv med utvidelsen som siden din skal vises i. Bare etter bakgrunnsbilde ferdig, flytt den til en mappe kalt "Bilder". I den vil vi lagre alle brukte bilder, animasjoner og annet grafiske filer. Denne mappen skal være i rotkatalogen med alle html-filene dine. Nå kan du gå videre til koden. Det er flere alternativer for å skrive kode som vil endre bakgrunnen til et bilde.
- Skriv tag-attributt.
- Gjennom CSS-stil i HTML-kode.
- Skriv CSS-stil i en egen fil.
Hvordan du gjør bakgrunnen til et bilde i HTML er opp til deg, men jeg vil gjerne si noen ord om hvordan det ville vært mest optimalt. Den første metoden, ved å bruke skriving gjennom et tag-attributt, har lenge vært utdatert. Det andre alternativet brukes i svært sjeldne tilfeller, bare fordi mye av den samme koden er oppnådd. Og det tredje alternativet er det vanligste og mest effektive. Her HTML eksempler tagger:
- Den første måten å skrive på er gjennom tag-attributtet (body) i index.htm-filen. Den er skrevet i følgende form: (body background= "Folder_name/Image_name.extension")(/body). Det vil si hvis vi har et bilde som heter "Bilde" og JPG-utvidelse, og vi kalte mappen "Bilder", så vil HTML-kodeoppføringen se slik ut: (body background="Images/Picture.jpg")... (/body).
- Den andre opptaksmetoden påvirker CSS-stilen, men er skrevet i samme fil kalt index.htm. (body style="background: url("../Images/Picture.jpg")").
- Og den tredje opptaksmetoden er laget i to filer. I et dokument kalt index.htm er følgende linje skrevet: (head)(link rel="stylesheet" type="text/css" href="Path_to_CSS_file")(/head). Og i stilfilen kalt style.css skriver vi allerede: body (bakgrunn: url(Images/Picture.jpg")).
Vi har diskutert hvordan du lager et bakgrunnsbilde i HTML. Nå må du forstå hvordan du strekker bildet over hele skjermens bredde.
Måter å strekke et bakgrunnsbilde til vinduets bredde
La oss forestille oss skjermen vår i prosentform. Det viser seg at hele bredden og lengden på skjermen vil være 100 % x 100 %. Vi må strekke bildet til denne bredden. La oss legge til en linje i bildeoppføringen i style.css-filen, som vil strekke bildet til hele bredden og lengden på skjermen. Hvordan skrives dette i CSS-stil? Det er enkelt!
bakgrunn: url(Images/Picture.jpg")
bakgrunnsstørrelse: 100 %; /* denne oppføringen passer for de fleste moderne nettlesere */
Så vi fant ut hvordan vi kunne lage et bilde som bakgrunn i html for å fylle hele skjermen. Det er også en måte å skrive i index.htm-filen. Selv om denne metoden er utdatert, er det nødvendig for nybegynnere å kjenne og forstå den. I (head)(style) div ( background-size: cover; ) (/style) (/head)-taggen betyr denne oppføringen at vi tildeler en spesiell blokk for bakgrunnen, som vil bli plassert over hele bredden av vindu. Vi så på 2 måter å lage en nettsidebakgrunn på html bilde slik at bildet strekker seg over hele bredden av skjermen i enhver moderne nettleser.
Hvordan lage en fast bakgrunn
Hvis du bestemmer deg for å bruke et bilde som bakgrunn for en fremtidig nettressurs, trenger du bare å finne ut hvordan du gjør det urørlig slik at det ikke strekker seg i lengden og ødelegger det estetiske utseendet. Det er lett nok å skrive dette lille tillegget med hjelp. Du må legge til én setning i style.css-filen etter bakgrunn: url(Images/Picture.jpg") fixed; eller i stedet legge til en egen linje etter semikolon - posisjon: fixed. Dermed vil bakgrunnsbildet ditt bli ubevegelig. Under Når du blar gjennom innholdet på nettstedet, vil du se det tekststrenger flytte, men bakgrunnen forblir på plass. Så du har lært hvordan du lager et bakgrunnsbilde i HTML på flere måter.
Arbeide med en tabell i HTML
Mange uerfarne webutviklere, når de står overfor tabeller og blokker, forstår ofte ikke hvordan man lager et bilde som tabellbakgrunn i HTML. Som alle CSS-stiler er dette webprogrammeringsspråket ganske enkelt. Og løsningen på et slikt problem ville være å skrive et par linjer med kode. Du burde allerede kunne den skriften tabellrader og kolonner er utpekt som henholdsvis tagger (tr) og (td). For å lage tabellbakgrunnen i form av et bilde, må du legge til en enkel setning til (tabell), (tr) eller (td)-taggen som indikerer en lenke til bildet: bakgrunn = URL til bildet. For klarhets skyld, la oss gi et par eksempler.
Tabeller med et bilde i stedet for en bakgrunn: HTML-eksempler
La oss tegne en 2x3 tabell og gjøre bakgrunnen til et bilde som er lagret i «Bilder»-mappen: (tabellbakgrunn = «Bilder/Bilde.jpg») (tr) (td)1(/td) (td)2(/td) (td) 3)(/td)(/tr) (tr)(td)4(/td) (td)5(/td) (td)6(/td)(/tr) (/tabell). På denne måten vil bordet vårt males inn i bakgrunnen av bildet.
La oss nå tegne den samme platen med dimensjonene 2x3, men sett inn et bilde i kolonnene nummerert 1, 4, 5 og 6. (tabell)(tr)(td bakgrunn = “Bilder/Bilde.jpg”)1(/td) (td) )2 (/td) (td)3(/td)(/tr) (tr)(td background = “Images/Picture.jpg”)4(/td) (td background = “Images/Picture.jpg”) 5( /td) (td bakgrunn = “Images/Picture.jpg”)6(/td) (/tr) (/tabell). Etter visning ser vi at bakgrunnen bare vises i de cellene vi har registrert oss i, og ikke i hele tabellen.
Nettstedets kompatibilitet på tvers av nettlesere
Det er også noe slikt som kompatibilitet på tvers av nettlesere for en nettressurs. Dette betyr at sidene vil vises like riktig i forskjellige typer og nettleserversjoner. I dette tilfellet må du justere HTML-koden og CSS-stilen til de nødvendige nettleserne. I tillegg, i den moderne æra av smarttelefonutvikling, prøver mange webutviklere å lage nettsteder tilpasset mobilversjoner og under en datamaskinvisning.
Bakgrunnsfarge er nok viktig element hvilken som helst nettside. For det første setter den ønsket stemning og generell stemning på nettstedet, og for det andre letter det oppfatningen av teksten.
Bakgrunnsfargen til en nettside er satt ved å bruke bgcolor-attributtet til taggen
.Eksempel 1: Endre bakgrunnsfargen
Fargen kan angis som en heksadesimal verdi eller ved navnet.
Til tross for at du kan spesifisere hvilken som helst farge for bakgrunnen, bruker de fleste nettsteder hvit bakgrunn og svarte bokstaver, som det mest etablerte alternativet.
Bakgrunnsbilde
Du kan bruke et hvilket som helst passende bilde som bakgrunn. Bakgrunnen skal ikke distrahere oppmerksomheten fra teksten, men skal passe godt sammen fargevalg nettsider og være små i størrelse for å lastes raskt. Hvis du etter alt det ovennevnte fortsatt ønsker å legge til et bakgrunnsbilde på siden, bør du bruke bakgrunnsattributtet til taggen
.Eksempel 2: Legge til bakgrunnsbilde
Hvis bildet mindre størrelse skjerm, vil den bli gjengitt horisontalt og vertikalt.
Fordi tapetet lastes saktere enn bakgrunnsfarge, kan det vise seg at teksten ikke vil være lesbar på en stund før bildene er lastet inn. Det samme kan skje hvis bilder er deaktivert i nettleseren. Derfor anbefales det å alltid sette bakgrunnsfargen sammen med bakgrunnsbildet (eksempel 3).
Eksempel 3: Bruk av bakgrunnsbilde og bakgrunnsfarge
Fast bakgrunn
Som standard, når du bruker rullefeltet, flyttes bakgrunnsbildet med innholdet på nettsiden. Internet Explorer lar deg gjøre bakgrunnen urørlig ved å bruke bgproperties ="fixed " tag-attributtet
.Eksempel 4: Sette en fast bakgrunn
Ved å spesifisere bgproperties-attributtet, som vist i eksempel 4, vil bakgrunnsbildet på nettsiden forbli stasjonært, men tekst, grafikk og andre elementer vil bevege seg med rullefeltet.
Når du setter opp et nettsted, i tillegg til funksjonalitet, er design veldig viktig. Dette er det som setter stilen og designet til et bestemt selskap eller person som nettsiden lages for. Det er enkelt å tilpasse bakgrunnsfargen og bildet ved å følge instruksjonene i denne artikkelen.
Åpne din HTML-fil ved hjelp av en notisblokk eller noe annet tekstredigerer, som du er vant til. La oss for eksempel ta en primitiv nettside med et minimum av tekst. Du kan åpne filen ved å bruke hvilken som helst nettleser.
Skriv inn i taggen parameter bgcolor="*****", der ***** er fargekoden. Du kan finne ut fargene for HTML i hvilken som helst grafisk redaktør ved å velge alternativet "for web" eller på nettstedet https://colorscheme.ru/color-names
- style="background-image: url('file:///C:/Users/FILE_PATH.jpg')"
Vær oppmerksom på at brukere med høyere oppløsning skjermen, vil bildet ditt dupliseres nedover og til høyre. Det vil ikke se bra ut hvis bildet ikke er monokromatisk. Det er spesielle kommandoer for å korrigere denne parameteren.
- background-repeat : "Verdi." Alternativer for verdien kan være: «repeat-x» – gjentar bakgrunnsbildet ditt både horisontalt og vertikalt. "repeat-y" - repetisjon kun vertikalt. «no-repeat» – bildet er frosset på plass og gjentas ikke. "mellomrom" – hele siden vil bli fylt maksimalt antall kopier av bildet, vil de ytterste beskjæres. "rund" - det samme alternativet, men kantene på bildet vil bli nøye skalert;
- bakgrunnsvedlegg: «Verdi». Hvis du erstatter "scroll"-taggen i stedet for ordet Value, vil bildet rulle sammen med nettstedet. "fast" - bakgrunnen forblir uendret når du ruller;
- bakgrunnsstørrelse: Verdi Verdi2. Her må verdiene ha en verdi i piksler. For eksempel: 100px 200px. I tillegg til piksler aksepteres prosentverdier. Dette er et alternativ for å fylle siden med et bilde. I tillegg til tall kan du angi to parametere: «contain» – fyller siden med et bilde langs langsiden og «cover» – fyller siden med et bilde langs bredden.
Når du vet det grunnleggende om å fylle en side med bakgrunn i HTML, er du klar til å lage ditt første nettsted.
Moderne nettlesere lar deg legge til et element vilkårlig nummer bakgrunnsbilder, som viser parameterne for hver bakgrunn atskilt med komma. Det er nok å bruke den universelle bakgrunnsegenskapen og spesifisere en bakgrunn for den først og en andre atskilt med komma.
Hvordan strekke bakgrunnen til hele vinduets bredde?
For å skalere bakgrunnen, bruk egenskapen bakgrunnsstørrelse; sett verdien til 100 %, så vil bakgrunnen oppta hele bredden av nettleservinduet. For eldre versjoner av nettlesere bør du bruke spesifikke egenskaper med prefikser, som vist i eksempel 1.
Hvordan legge til et bakgrunnsbilde på en nettside?
For å legge til et bakgrunnsbilde på en nettside, sett banen til bildet innenfor url-verdien til bakgrunnsstilegenskapen, som igjen legges til kroppsvelgeren.
Er det mulig å lage en animert bakgrunn?
Animasjon er en ganske kraftig teknikk som kan bringe ethvert dokument til live, så det er ikke overraskende at Flash-teknologi, som legger til tegneserier på nettsider, og interaktive, har blitt ekstremt populær. Grafisk format GIF støtter også enkel animasjon ved sekvensiell endring av rammer. Så ved å bruke et bilde i dette formatet er det ikke bare mulig å animere individuelle bilder, men også bakgrunnen til en nettside eller et spesifikt element.
Først må du lage et animert bilde i GIF-format hva kan du bruke det til? Adobe-programmet Photoshop eller annet egnet for dette formålet. Det finnes også biblioteker med ferdige animerte filer som kan brukes som bakgrunnsbilde. Deretter legges bildet til som bakgrunn ved å bruke bakgrunnsstilegenskapen, som vist i eksempel 1.
Hvordan sette et bakgrunnsbilde nederst til høyre på siden?
For å kontrollere posisjonen til bakgrunnsbildet på siden, brukes; den setter samtidig de horisontale og vertikale koordinatene til bildet. For å avbryte repetisjon av et bakgrunnsbilde, bruk bakgrunnsposisjon-egenskapen med verdien no-repeat .
Hvordan kan jeg forhindre at bakgrunnen gjentar seg?
Som standard gjentas bakgrunnsbildet horisontalt og vertikalt, og danner en mosaikk over hele feltet på nettsiden. Denne bakgrunnsatferden er imidlertid ikke alltid nødvendig, spesielt når du plasserer et enkelt bilde, så å legge til en verdi uten gjentakelse til egenskapen for bakgrunnsstil vil hjelpe.
Hvordan kan jeg få bakgrunnen til å gjenta bare vertikalt?
Bakgrunnsrepetisjon er vanligvis nødvendig for å lage dekorative linjer eller gradienter som er knyttet til høyden på et nettsideelement eller vindu. I slike tilfeller gir gjentakelse av bakgrunnen vertikalt et konsistent bilde, uavhengig av størrelsen på elementene. Bare først bør du sørge for at bakgrunnsbildet gjentas uten sømmer.
I denne opplæringen lærer du hvordan du endrer bakgrunnen og tekstfargen til ethvert element på en HTML-side. Generelt, i HTML-språk Noen tagger har spesielle attributter som endrer farge, for eksempel bgcolor (bakgrunnsfarge). Men for det første er disse attributtene foreldet (jeg tror du husker hva det betyr), og for det andre, som jeg allerede har sagt, er det ikke alle tagger som har dem. Så la oss si at du ønsket å endre bakgrunnsfargen til et tekstavsnitt. Og hvordan vil du gjøre dette, fordi taggen
Finnes det ingen slik egenskap? Derfor, som i tidligere leksjoner, vil vi bruke stiler (CSS), det vil si den universelle stilattributten, som lar oss endre fargen hvor vi vil.
Hvordan kan du spesifisere en farge?
Farger i HTML (og CSS) kan spesifiseres på flere måter, jeg vil vise deg de mest populære og vanlige:
- Fargenavn- HTML har en stor liste og for å indikere en farge, er det nok å skrive navnet på engelsk, for eksempel: rød, grønn, blå.
- HEX fargekode– Absolutt hvilken som helst farge kan oppnås ved å blande tre grunnfarger i forskjellige proporsjoner – rød, grønn og blå. HEX-koden er tre par heksadesimale verdier ansvarlig for antallet av disse fargene i hver farge. Fargekoden må innledes med et hash-tegn (#), for eksempel: #FF8C00, #CC3300, og så videre.
Tidligere ble det anbefalt å bruke bare HTML i HTML , som garantert vises identisk i alle nettlesere og på alle skjermer. Men i dag er det ikke nødvendig å begrense deg til det, siden både nettlesere og skjermer lenge har lært å vise en mye større liste over farger på riktig måte. Men jeg anbefaler ikke at du spesifiserer farger etter navn; faktum er at mange nettlesere fortsatt forbinder forskjellige farger med samme navn. Derfor vil jeg i denne opplæringen alltid bruke HEX-fargekoder.
Hvordan endre tekstfarge?
For å endre tekstfargen i et element på en HTML-side, må du spesifisere stilattributtet inne i taggen. Generell syntaks neste:
<тег style= "farge:fargenavn" >... - spesifisere tekstfargen ved navn.
<тег style= "farge:#HEX-kode" >... - spesifisere tekstfargen med kode.
Og som vanlig, for å endre tekstfargen på hele siden, spesifiser du bare stilattributtet i taggen
. Og hvis du trenger å endre skriftfargen for et tekststykke, kan du legge det inn i en tag og bruk attributtet på det.Eksempel på endring av tekstfarge
Rød titteltekst
Blå avsnittstekst.
Grønn kursiv. Rød tekst.
Resultat i nettleser
Hvordan endre bakgrunnsfargen?
Bakgrunnsfargen til et sideelement kan også endres ved å bruke stilattributtet. Den generelle syntaksen er:
<тег stil= "bakgrunn:fargenavn">... - spesifisere bakgrunnsfargen ved navn.
<тег style= "bakgrunn:#HEX-kode" >... - spesifisere bakgrunnsfargen med kode.
Eksempel på endring av bakgrunnsfarge
Tittel.
Avsnitt.
Miniatyrbilde. Ren tekst.
Resultat i nettleser
Tittel.
Avsnitt.
Miniatyrbilde. Ren tekst.
Når du endrer bakgrunnsfargen til elementene, blir det veldig tydelig hvor bredt hvert av dem faktisk opptar. Som du kan se, blokkelementer koder, som avsnitt og overskrifter, tar vanligvis opp hele den tilgjengelige bredden, selv om de inneholder svært lite tekst, men innebygde koder er like brede som innholdet. Forresten, det siste avsnittet i eksemplet opptar også hele bredden, det er bare at bakgrunnen er gjennomsiktig, så bakgrunnen på siden er synlig gjennom den. Generelt er bakgrunnen til alle elementene på siden der det ikke er eksplisitt angitt gjennomsiktig, det er alt.
Hjemmelekser.
- Lag en tittel for artikkelen og dens to seksjoner. Skriv ett avsnitt i begynnelsen av artikkelen og hver del.
- Sett Courier-skriftstørrelsen til 16px på hele siden, 22px for artikkeltittelen og 19px for underoverskriftene.
- La artikkeltittelen ha en tekstfarge på #0000CC, og underoverskriftene har en tekstfarge på #CC3366.
- Fremheve bakgrunnsfarge#66CC33 to ord i andre avsnitt. Og i tredje avsnitt, i samme farge, men med ett understreket ord.
- Ikke glem at du kan gruppere stilattributtverdier ved å plassere et semikolon (;) mellom dem.