Cum să remediați o imagine de fundal în HTML

Dacă doriți să adăugați o imagine la pagina dvs. de Web, tot ce aveți nevoie este HTML. Dacă doriți să setați o imagine ca fundal pe pagina dvs. web, aveți nevoie de HTML și CSS. HTML înseamnă "limbajul de markup hipertext" și este codul care le spune browserelor ce ar trebui să apară pe o pagină web. CSS înseamnă "cascadele de stil" și este folosit pentru a schimba aspectul și designul unei pagini web. Pentru a începe, veți avea nevoie de imaginea de fundal pe care doriți să o utilizați în pagina dvs. web.

conținut

Pași
Partea 1configurați fișierele
Partea 2scrieți fișierul html
Partea 3afișați fișierul html
Partea 4Înțelegeți codul html
Partea 5Înțelegeți codul css

pași

Partea 1
Configurați fișierele

Creați un dosar pentru a salva fișierul HTML și imaginea de fundal. Creați un dosar pe computer și dați-i un nume care vă permite să îl identificați cu ușurință.

Puteți să o numiți așa cum doriți, dar din moment ce veți lucra cu HTML, este mai bine să vă obișnuiți să alegeți nume scurte, cu un singur cuvânt, pentru fișierele și folderele dvs.

Plasați imaginea de fundal în folderul HTML. Găsiți imaginea pe care doriți să o utilizați ca fundal și salvați-o în folderul dvs. HTML.

În general, este recomandabil să utilizați imagini simple cu modele netede și repetitive ca o imagine de fundal, astfel încât textul care se află deasupra fundalului să poată fi citit cu ușurință.

Dacă nu aveți o imagine, puteți descărca o imagine de fundal gratuită de pe Internet. Dacă doriți să descărcați o imagine, asigurați-vă că ați salvat-o în folderul HTML.

Creați un fișier HTML. Deschideți un editor de text și creați un fișier nou. Salvați fișierul cu numele index.html.

Puteți utiliza editorul de text dorit, inclusiv editorii de text care vin împreună cu sistemul de operare (Notepad în cazul Windows și TextEdit în cazul Mac).

Dacă doriți să utilizați un editor de text special creat pentru a lucra cu HTML, faceți clic aici pentru a descărca Atom, un editor de text care funcționează cu sistemele de operare Windows, Mac OS X și Linux.

Dacă intenționați să utilizați TextEdit, înainte de a începe să scrieți fișierul HTML, faceți clic pe meniu "format" apoi selectați "Conversia la textul normal" (sau "Conversia în text simplu"). În acest fel, vă veți asigura că fișierul dvs. HTML este încărcat corect într-un browser web.

Procesoarele de text, cum ar fi Microsoft Word, nu sunt o alegere bună pentru scrierea codului HTML deoarece adaugă caractere invizibile și formatare. Aceste caractere pot strica fișierul HTML și nu îl pot afișa corect într-un browser web.

Partea 2
Scrieți fișierul HTML

Copiați și inserați următorul cod HTML standard. Selectați și copiați codul prezentat mai jos și apoi lipiți-l în fișierul index.html deschis.

Titlul paginii

Adăugați adresa URL a imaginii. Căutați fișierul index.html pentru linie fundal-imagine: url (" ") -. Plasați cursorul între paranteze și scrieți numele fișierului care conține imaginea de fundal. Asigurați-vă că includeți extensia fișierului imagine.

Când termini, ar trebui să arăți astfel:
fundal-imagine: url ("imagendefondo.jpg") -

De fiecare dată când utilizați un nume de fișier fără calea sau adresa URL, browserul web va căuta imaginea în dosarul în care este stocată pagina Web. Dacă fișierul se află într-un alt folder din sistem, va trebui să adăugați calea completă a fișierului.

Salvați fișierul HTML.

Partea 3
Afișați fișierul HTML

Deschideți fișierul HTML pe un server web. Faceți clic dreapta pe fișierul index.html și selectați opțiunea de deschidere utilizând browserul web dorit.

Dacă imaginea nu apare când deschideți browserul, asigurați-vă că numele imaginii este scris corect în fereastra editorului de text unde ați creat index.html.
Dacă atunci când deschideți browserul în loc să apară imaginea pe care apare codul HTML, înseamnă că fișierul index.html a fost salvat ca un document de text îmbogățit. Încercați să editați codul HTML cu un alt editor de text.

Editați fișierul HTML. În fereastra editorului de text, plasați cursorul între etichete și și apoi scrie "Bună ziua!". Actualizați fereastra browserului pentru a vedea dacă textul apare deasupra imaginii de fundal.

Partea 4
Înțelegeți codul HTML

Aflați cum să utilizați etichete HTML și CSS. Codul HTML constă din etichete de deschidere și închidere. Eticheta este eticheta de deschidere a corpului paginii și Eticheta de închidere. În HTML, toate etichetele de deschidere trebuie să aibă eticheta de închidere corespunzătoare pentru ca pagina să fie afișată corect.

Aflați ce semnifică eticheta DOCTYPE. Toate paginile HTML bine scrise ar trebui să înceapă cu . Aceasta este ceea ce spune browser-ului că fișierul HTML este un fișier HTML.

Aflați cum să utilizați eticheta titlului. Eticheta apare în bara de titlu a ferestrei browserului și este, de asemenea, afișată în filele browserului.

Aflați cum să utilizați eticheta de stil. Eticheta

Aflați cum să utilizați eticheta corporală. Tot textul care apare scris între etichete acesta va apărea ca scris, cu excepția cazului în care acesta este codul HTML sau CSS.

Partea 5
Înțelegeți codul CSS

Aflați cum să utilizați codul CSS. În fișierul index.html, tot codul CSS găsit între etichete

Respectați următorul cod CSS.

corpul {background-image: url ("imagendefondo.jpg") -}

Aflați cum să identificați părțile din codul CSS. Fișele de stil CSS sunt compuse din două părți: un selector și o declarație.

În exemplu, este selectorul și fundal-imagine: url ("imagendefondo.jpg") Aceasta este declarația.

Selectorii pot fi etichete HTML.

Declarațiile intră întotdeauna în brațe ({}).

Acesta include declarațiile CSS. Declarațiile CSS, la rândul lor, sunt împărțite în două părți: o proprietate și o valoare. În exemplul anterior, în cadrul a ceea ce este între chei, background-image este proprietatea și url ("imagendefondo.jpg") Este valoarea.

Proprietatea este responsabilă pentru specificarea obiectului care urmează să fie formatat, iar valoarea descrie modul în care se aplică stilul proprietății.

Proprietatea și valoarea sunt întotdeauna separate printr-un colon (:).

Declarațiile CSS se termină întotdeauna într-un punct și virgulă (-).

Distribuiți pe rețelele sociale:

înrudit