DifiTsi.com

Introduceți o imagine de fundal în HTML

Dacă doriți să adăugați o imagine la o pagină web, tot ce aveți nevoie este 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 înseamnă Hypertext Markup Language și este un cod care spune unui browser ce trebuie afișat pe o pagină Web. CSS înseamnă foi de stil cascadă și se utilizează pentru a schimba aspectul și designul unui site Web. Aveți nevoie de o imagine de fundal pe care doriți să o utilizați pentru site-ul dvs. web.

metodă

Partea 1
Organizați-vă fișierele

Imagine cu denumirea 2627945 1 1
1
Creați un dosar cu fișierul HTML și imaginea de fundal. Creați și denumiți un folder pe computer pe care îl puteți găsi cu ușurință mai târziu.
  • Puteți numi dosarul așa cum doriți, dar dacă lucrați cu HTML, este mai bine să vă obișnuiți să denumiți dosarele și fișierele cu nume scurte fără spații.
  • Image cu titlul 2627945 2 1
    2
    Puneți imaginea de fundal în dosarul HTML. Puneți imaginea pe care doriți să o utilizați ca fundal în folderul HTML.
  • Imaginile simple, cu un model luminos și repetat, sunt cele mai potrivite ca imagini de fundal, astfel încât să puteți citi textul peste ele.
  • Dacă nu aveți o fotografie, puteți descărca o imagine de fundal gratuită. Când descărcați o imagine, puneți-o în noul folder HTML creat.
  • Image cu titlul 2627945 3 1
    3
    Creați un fișier HTML. Deschideți un editor de text și deschideți un fișier nou. Salvați fișierul ca index.html.
  • Puteți utiliza orice editor de text, inclusiv editorii de text de sistem pentru Windows, Notepad și Mac OS X, TextEdit.
  • Dacă doriți să utilizați un editor de text special pentru HTML, atunci faceți clic aici, pentru a descărca Atom, un editor de text care funcționează pe Windows, Mac OS X și Linux.
  • Dacă utilizați TextEdit, înainte de a începe să scrieți fișierul HTML, faceți clic pe meniul Format și apoi pe "Creare text simplu". Această setare asigură încărcarea corectă a fișierului HTML într-un browser web.
  • Procesoarele de text precum Microsoft Word nu sunt mari la scrierea codului HTML deoarece adaugă caractere invizibile și formatare care pot distruge fișierul HTML astfel încât să nu se afișeze corect într-un browser Web.

    • Partea 2
    Scrieți fișierul HTML

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

    • Partea 3
    Verificaț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 fișierul index.html și deschideți-l într-un browser web la alegere.
    • Dacă browserul se deschide și nu puteți vedea imaginea, asigurați-vă că numele este scris corect în fereastra editorului de text index.html.
    • Dacă browserul se deschide și veți vedea cod HTML în locul imaginii de fundal, fișierul index.html a fost salvat ca document text îmbogățit (rtf). Este posibil să î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 fereastra editorului de text, deplasați cursorul între -Etichete și apoi tastați Bună ziua!. Reîncărcați fereastra browserului astfel încât să puteți vedea textul din fața imaginii de fundal.

    • Partea 4
    Înțelegeți codul HTML

    Image cu titlul 2627945 9 1
    1
    HTML și etichetele CSS. Codul HTML este format din etichete de început și sfârșit. Ziua este ziua de început și este ziua de încheiere. Fiecare etichetă de început de pe o pagină HTML necesită o etichetă de sfârșit pentru ca pagina să fie redată corect.
  • Imagine cu denumirea 2627945 10 1
    2
    Eticheta DOCTYPE. Orice program HTML bun ar trebui să vină cu începe. Acest lucru indică browserului web că fișierul HTML este un fișier HTML.


  • Imagine cu denumirea 2627945 11 1
    3
    Eticheta html. Întregul conținut al site-ului se află între etichete și .
  • Image cu titlul 2627945 12 1
    4
    Eticheta capului. -Etichetele conțin conținut care nu este afișat pe site. Codul CSS este adesea în -Zonă pentru a descrie ce ar trebui să arate pagina.
  • Imagine cu titlul 2627945 13 1
    5
    Eticheta titlului. -Eticheta conține textul care apare în bara de titlu a ferestrei browserului și fila browser.
  • Imaginea intitulată 2627945 14 1
    6
    Eticheta de stil.
  • Imaginea intitulată 2627945 15 1
    7
    Eticheta corporală. Textul dintre -Etichetele standuri, apare ca text scris, cu excepția cazului în cod HTML sau CSS.
  • Imaginea intitulată 2627945 16 1
    8
    Schimbați fișierul HTML. Mutați cursorul între fereastra de text și apoi tastați "salut lume!". Reîncărcați browserul și veți putea vedea textul din partea superioară a imaginii de fundal.

    • Partea 5
    Codul CSS

    1
    cod CSS. În fișierul index.html, codul CSS spune între
  • 2
    Verificați codul CSS.
    corpul {background-image: url ("background.jpg") -}
  • 3
    Părțile din codul 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.
    Fiecare etichetă HTML poate fi un selector.
    Declarațiile stau întotdeauna între brațele curbate {}.
  • 4
    Declarația CSS. Declarația CSS constă din două părți, proprietatea și valoarea. În brațele acopere este
    background-image proprietatea și URL-ul ( "background.jpg") valoarea.
    Proprietatea descrie ceea ce este reprezentat și valoarea descrie modul în care este afișată proprietatea.
    Eigenscahft și valoarea sunt întotdeauna separate printr-un colon (:).
    Codul CSS se termină întotdeauna cu un punct și virgulă (-).
    • Distribuiți pe rețelele sociale:

    înrudit