Cum se adaugă o imagine de fundal în HTML: 13 pași

Pentru a adăuga o imagine pe o pagină web, veți avea nevoie de HTML și să faceți o imagine a unei pagini web, sunt necesare HTML și CSS. HTML (Limba de marcare hipertext) este un limbaj standard de marcare a documentelor care indică afișarea browserului pe pagina web. CSS (mese de stil cascading) este o limbă de descriere a aspectului unui document care este utilizat pentru a schimba aspectul și aspectul unei pagini web. Veți avea nevoie de o imagine pe care ați setat-o ca fundal a paginii web.

Pași

Partea 1 din 5:

Cum se creează un dosar și un fișier

unu. Creați un dosar pentru stocarea unui fișier HTML și a imaginii de fundal. Nume Numele dosarului pentru care va fi ușor de găsit.

Numele dosarului poate fi orice, dar mai bine dacă este alcătuit dintr-un cuvânt scurt.

2. Copiați imaginea de fundal în dosarul creat.

Dacă nu sunteți foarte atent cu privire la modul în care site-ul dvs. se va deschide pe dispozitive vechi sau dispozitive cu o conexiune la internet lentă, utilizați o imagine de rezoluție mai mare. Ca fundal, o imagine cu un model simplu de repetare este potrivită, deoarece textul va fi clar pe acesta.

Dacă nu aveți o imagine, descărcați-o gratuit pe Internet și copiați în dosarul creat.

3. Creați un fișier HTML. Deschideți un editor de text și apoi creați un nou fișier. Salvați-l ca index.HTML.

Puteți utiliza orice editor de text, de exemplu, Notepad în Windows sau Textedit în Mac OS X.

Dacă doriți să utilizați un editor de text pentru a lucra cu HTML, Descărcați editorul atomului, care suportă Windows, MacOS și Linux.

Dacă utilizați Textedit Înainte de a începe să scrieți codul HTML, deschideți meniul "Format" și selectați "Conversia la textul simplu". În acest caz, fișierul HTML va fi încărcat corect într-un browser web.

Editorii puternici de text, cum ar fi Microsoft Word, nu sunt foarte potriviți pentru scrierea codului HTML, deoarece acestea adaugă caractere invizibile și formatare, care pot împiedica afișarea corectă a conținutului fișierului HTML în browserul Web.

Partea 2 din 5:

Cum să scrieți un cod HTML

unu. Copiați și lipiți codul HTML standard. Evidențiați și copiați codul HTML de mai jos și apoi introduceți-l într-un index de fișiere deschise.HTML.

Titlul paginii {Imaginea de fundal: URL (" ") -}

2. Adăugați imaginea de fundal URL. În fișierul index.HTML Găsiți un șir Imaginea de fundal: URL (" ")-. Puneți cursorul în interiorul parantezelor și apoi introduceți numele fișierului imagine de fundal. Asigurați-vă că specificați extensia imaginii de fișier.

Imaginea de fundal: URL ("fundal.jpg")-

Dacă introduceți pur și simplu numele fișierului (fără adresa URL sau calea către acesta), browserul web va căuta o imagine într-un dosar cu un fișier HTML. Dacă imaginea se află într-un alt dosar, introduceți calea completă către fișier.

Salvați fișierul HTML. Imagine intitulată 2627945 6 1

Partea 3 din 5:

Cum să vizualizați un fișier HTML

unu. Deschideți un fișier HTML într-un browser web. Faceți clic dreapta pe fișierul index.HTML și deschideți-l în browserul Web selectat.

Dacă imaginea dorită nu a fost deschisă în browser, verificați numele fișierului cu imaginea corect în fereastra editorului de text.
Dacă în browserul web apare un cod HTML și nu imaginea de fundal, fișierul index.HTML a fost salvat ca document în format RTF. În acest caz, editați fișierul HTML într-un alt editor de text.

2. Efectuați modificări într-un fișier HTML. În fereastra editorului de text, plasați cursorul între etichete și intrați "Bună, Lumea!". Actualizați pagina din browser, astfel încât textul introdus să fie afișat pe fundalul imaginii.

Partea 4 din 5:

Cum să înțelegeți codul HTML

unu. Amintiți ce sunt etichetele din HTML și CSS. Codul HTML constă în deschiderea și închiderea etichetelor. De exemplu, etichetă se deschide și ea - închiderea. Pe fiecare etichetă de deschidere ar trebui să aibă eticheta corespunzătoare de închidere a paginii web încărcate corect.

2. Amintiți-vă de eticheta Doctype. Codul HTML de înaltă calitate trebuie să înceapă cu . Această etichetă informează browserul web că fișierul HTML este un fișier HTML.

3. Efectuați modificări într-un fișier HTML. În fereastra editorului de text, plasați cursorul între etichete și intrați "Bună, Lumea!". Actualizați pagina din browser, astfel încât textul introdus să fie afișat pe fundalul imaginii.

4. Amintiți ce sunt etichetele din HTML și CSS. Codul HTML constă în deschiderea și închiderea etichetelor. De exemplu, etichetă se deschide și ea - închiderea. Pe fiecare etichetă de deschidere ar trebui să aibă eticheta corespunzătoare de închidere a paginii web încărcate corect.

cinci. Amintiți-vă de etichetă . Acesta conține text care este afișat în bara de titlu al ferestrei browserului, precum și textul afișat în fila Browser.

6. Amintiți-vă de etichetă Indică conținutul CSS. Tot ce este între etichete

7. Amintiți-vă de etichetă . Orice text situat între etichete , va fi afișat așa cum este introdus (dacă nu este cod HTML sau CSS).

opt. Efectuați modificări într-un fișier HTML. În fereastra editorului de text, plasați cursorul între etichete și intrați "Bună, Lumea!". Actualizați pagina din browser, astfel încât textul introdus să fie afișat pe fundalul imaginii.

Partea 5 din 5:

Cum să înțelegeți codul CSS

unu. Calculați codul CSS. În fișierul index.Codul CSS HTML situat între etichete

2. Vizualizați codul CSS.

Corp {Imaginea de fundal: URL ("fundal.jpg") -}

4. Amintiți-vă piesele codului CSS. Stilurile CSS constau din două părți: selector și anunțuri.

Corp

Imaginea de fundal: URL ("fundal.jpg")

Selectorul poate fi orice etichetă HTML.

Anunțurile constau întotdeauna în brațe curly {}.

cinci. Amintiți-vă ce anunț CSS. CSS AD constă din două părți: proprietăți și valori. Conținutul în paranteze curbate
imagine de fundal este o proprietate ca URL ("fundal.jpg") este un sens.

Proprietatea descrie subiectul (în exemplul nostru este un model de fundal), iar valoarea este stilul elementului (în exemplul nostru este o imagine cu o imagine).

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

Anunțurile CSS se termină întotdeauna cu un punct și virgulă (-).