sedhesrebsit.ru

Adăugați o imagine de fundal în HTML

Dacă doriți să adăugați o imagine la o pagină Web, aveți nevoie doar de HTML. Dacă doriți să utilizați o imagine ca fundal pentru o pagină Web, aveți nevoie atât de HTML, cât și de CSS. HTML reprezintă limbajul Hypertext Markup Language și este un cod care îi spune browserului ce trebuie afișat pe o pagină Web. CSS reprezintă foi de stil cascadă și este folosit pentru aspectul și aspectul unei pagini web. Aveți nevoie de o imagine de fundal dacă doriți să o utilizați pentru pagina dvs. web.

pași

Partea 1
Colectați-vă fișierele

Imagine cu denumirea 2627945 1 1
1
Creați un dosar pentru fișierul HTML și imaginea de fundal. Creați un dosar pe computer pe care îl puteți găsi cu ușurință din nou mai târziu.
  • Puteți da dosarului orice nume doriți, dar dacă lucrați cu HTML, este mai bine să dați nume de fișiere și foldere scurte care constau dintr-un singur cuvânt.
  • Image cu titlul 2627945 2 1
    2
    Puneți imaginea de fundal în folderul cu cod HTML. Plasați imaginea pe care doriți să o utilizați ca fundal în folderul cu cod HTML.
  • Imaginile simple cu un model discret și repetitiv sunt cel mai bine utilizate ca imagini de fundal, astfel încât să puteți citi textul din imagine.
  • Dacă nu aveți o imagine, puteți descărca un fundal gratuit undeva. Plasați imaginea în dosarul cu cod HTML pe care l-ați creat.
  • Image cu titlul 2627945 3 1
    3
    Creați un fișier HTML. Deschideți un editor de text și creați un fișier nou. Salvați fișierul ca index.html.
  • Puteți utiliza orice editor de text dorit, chiar și editoarele de text ale Windows (Notepad) și Mac OS X (TextEdit).
  • Dacă doriți să utilizați un editor de text special pentru codificare în HTML, faceți clic aici pentru a descărca Atom, un editor de text pentru Windows, Mac OS X și Linux.
  • Dacă utilizați TextEdit, faceți clic pe meniul Format și apoi pe Text simplu, înainte de a începe codarea în HTML. Această setare asigură faptul că fișierul HTML se încarcă corect în browserul web.
  • Procesoarele de text, cum ar fi Microsoft Word, nu sunt potrivite pentru codificarea în HTML deoarece adaugă caractere invizibile și formatare, astfel încât fișierul HTML nu este afișat corect într-un browser web.

    • Partea 2
    Scrierea fișierului HTML

    1
    Copiați și inserați codul HTML standard. Selectați și copiați codul HTML de mai jos și inserați-l în fișierul index.html deschis.
    Titlul paginii
  • 2
    Adăugați adresa URL a imaginii de fundal. Căutați regula în fișierul index.html fundal-imagine: url (" ") -. Plasați cursorul între paranteze, apoi tastați numele fișierului imaginii de fundal. Asigurați-vă că includeți extensia imaginii de fundal.
    Când ați terminat, ar trebui să arate astfel:
    fundal-imagine: url ("background.jpg") -
    Când utilizați un nume de fișier fără o cale sau o adresă URL, browserul web din dosarul paginii web va căuta imaginea cu acest nume. Dacă fișierul se află într-un alt folder din sistem, va trebui să adăugați calea completă la acel fișier.
  • 3
    Salvați fișierul HTML.

    • Partea 3
    Vizualizați fișierul HTML

    Image cu titlul 2627945 7 1
    1
    Deschideți fișierul HTML într-un browser web. Faceți clic dreapta pe index.html și apoi deschideți-l în browser-ul web la alegere.
    • Când browserul dvs. se deschide și nu vedeți imaginea, asigurați-vă că numele fișierului imaginii este scris corect în codul index.html.
    • Când browserul se deschide și vedeți codul HTML în locul imaginii de fundal, ați salvat fișierul index.html ca document text îmbogățit. Încercați să editați fișierul HTML într-un alt editor de text.
  • Image cu titlul 2627945 8 1
    2
    Editați fișierul HTML. În editorul de text plasați cursorul între etichete și tip Bună ziua!. Reîncărcați fereastra browserului pentru a vedea textul deasupra imaginii de fundal.

    • Partea 4
    A explicat codul HTML

    Image cu titlul 2627945 9 1
    1
    HTML și etichetele CSS. Codul HTML constă în etichete deschise și închise.-eticheta este eticheta deschisă a corpului și este eticheta corpului apropiat. Fiecare etichetă deschisă dintr-o pagină HTML are, de asemenea, nevoie de o etichetă apropiată pentru a afișa corect pagina.
  • Imagine cu denumirea 2627945 10 1
    2
    Eticheta DOCTYPE. Fiecare pagină HTML trebuie să înceapă cu una . Acest lucru face browserul web clar că este un fișier HTML.


  • Imagine cu denumirea 2627945 11 1
    3
    Editați fișierul HTML. În editorul de text plasați cursorul între-etichete și tip acolo "Bună ziua! Reîncărcați fereastra browserului pentru a vedea textul deasupra imaginii de fundal.
  • Image cu titlul 2627945 12 1
    4
    HTML și etichetele CSS. Codul HTML constă în etichete deschise și închise. -eticheta este eticheta deschisă a corpului și este eticheta corpului apropiat. Fiecare etichetă deschisă dintr-o pagină HTML are, de asemenea, nevoie de o etichetă apropiată pentru a afișa corect pagina.
  • Imagine cu titlul 2627945 13 1
    5
    Eticheta titlului. -eticheta este textul care apare în bara de titlu a ferestrei browserului dvs., lângă textul care apare într-o filă de browser.
  • Imaginea intitulată 2627945 14 1
    6
    Eticheta de stil.
  • Imaginea intitulată 2627945 15 1
    7
    Eticheta corporală. Orice text care este între -etichetele vor apărea ca text simplu, cu excepția cazului în cod HTML sau CSS.
  • Imaginea intitulată 2627945 16 1
    8
    Editați fișierul HTML. În editorul de text plasați cursorul între -etichete și tip acolo "Bună ziua!". Reîncărcați fereastra browserului pentru a vedea textul deasupra imaginii de fundal.

    • Partea 5
    A explicat codul CSS

    1
    Înțelegeți codul CSS. În codul index.HTML, codul CSS spune între
  • 2
    Vizualizați codul CSS.
    corpul {background-image: url ("background.jpg") -}
  • 3
    Din care părți există cod CSS. Stilurile CSS constau din două părți, selectorul și declarația.
    În exemplul este corp selectorul și
    fundal-imagine: url ("background.jpg") este declarația.
    Un selector poate fi orice etichetă HTML.
    Declarațiile sunt întotdeauna între brațele {}.
  • 4
    Ce este o declarație CSS. Declarația CSS constă din două părți, proprietatea și valoarea. Între bretele,
    background-image este (proprietatea) și proprietatea url ("background.jpg") este valoarea (valoarea).
    Proprietatea indică ce este exprimat într-un stil, iar valoarea indică măsura în care un stil este aplicat acelei proprietăți.
    Proprietatea și valoarea sunt întotdeauna separate printr-un colon.
    Declarațiile CSS se termină întotdeauna cu un punct și virgulă.
    • Distribuiți pe rețelele sociale:

    înrudit
    Descărcați toate imaginile dintr-o pagină web dintr-o datăDescărcați toate imaginile dintr-o pagină web dintr-o dată
    Exportați marcaje din FirefoxExportați marcaje din Firefox
    Modificați culoarea de fundal în Adobe IllustratorModificați culoarea de fundal în Adobe Illustrator
    Creați o pagină personalizată pe TumblrCreați o pagină personalizată pe Tumblr
    Adăugați o imagine cu HTMLAdăugați o imagine cu HTML
    Creați un link de descărcare pe site-ul dvs. webCreați un link de descărcare pe site-ul dvs. web
    Creați un meniu drop-down cu HTML și CSSCreați un meniu drop-down cu HTML și CSS
    Creați o pagină web simplă cu Windows NotepadCreați o pagină web simplă cu Windows Notepad
    Scrieți o pagină HTMLScrieți o pagină HTML
    Deschideți un fișier PHPDeschideți un fișier PHP
    » » Adăugați o imagine de fundal în HTML

    © 2011—2021 sedhesrebsit.ru