Jak dodać obraz tła w HTML: 13 kroków

Aby dodać obraz do strony internetowej, będziesz potrzebować HTML, a wymagane jest zdjęcie strony internetowej, HTML i CSS. HTML (Hypertext Marking Language) jest znormalizowany język znakowania dokumentów, który wskazuje przeglądarkę do wyświetlenia na stronie internetowej. CSS (Tabele stylu kaskadowe) jest językiem opisu wyglądu dokumentu, który służy do zmiany wyglądu i układu strony internetowej. Będziesz potrzebował obrazu, który jest ustawiony jako tło strony internetowej.

Kroki

Część 1 z 5:

Jak utworzyć folder i plik

jeden. Utwórz folder do przechowywania pliku i obrazu tła HTML. Nazwa folderu nazwy, dla której łatwo będzie znaleźć.

Nazwa folderu może być dowolna, ale lepiej, jeśli składa się z jednego krótkiego słowa.

2. Skopiuj obraz tła do utworzonego folderu.

Jeśli nie jesteś bardzo ostrożny, jak Twoja witryna zostanie otwarta na starych urządzeniach lub urządzeniach z wolnym połączeniem internetowym, użyj obrazu wyższej rozdzielczości. Jako tło odpowiednie jest obraz z prostym powtarzającym się wzorem, ponieważ tekst będzie wyłączony.

Jeśli nie masz obrazu, pobierz go za darmo w Internecie i skopiuj do utworzonego folderu.

3. Utwórz plik HTML. Otwórz edytor tekstu, a następnie utworzyć nowy plik. Zapisz go jako indeks.Html.

Możesz użyć dowolnego edytora tekstu, na przykład, notatnik w systemie Windows lub TextEdit w Mac OS X.

Jeśli chcesz użyć edytora tekstu do pracy z HTML, Pobierz Edytor Atom, który obsługuje okna, MacO i Linux.

Jeśli używasz TextEdit przed rozpoczęciem pisania kodu HTML, otwórz menu "Format" i wybierz "Konwertuj na tekst prosty". W takim przypadku plik HTML zostanie poprawnie załadowany w przeglądarce internetowej.

Potężni edytory tekstu, takie jak Microsoft Word, nie są zbyt dobrze dostosowane do pisania kodu HTML, ponieważ dodają niewidzialne znaki i formatowanie, które mogą uniemożliwić prawidłowy wyświetlanie zawartości pliku HTML w przeglądarce internetowej.

Część 2 z 5:

Jak napisać kod HTML

jeden. Skopiuj i wklej standardowy kod HTML. Podświetl i skopiuj kod HTML poniżej, a następnie wstaw go do otwartego indeksu plików.Html.

Tytuł strony {Background-Image: URL (" ") -}

2. Dodaj obraz tła URL. W pliku indeksu.HTML Znajdź ciąg Background-Image: URL (" ")-. Umieść kursor wewnątrz wsporników, a następnie wprowadź nazwę pliku obrazu tła. Pamiętaj, aby określić rozszerzenie obrazu pliku.

Background-Image: URL ("tło.jpg")-

Jeśli po prostu wprowadź nazwę pliku (bez jego adresu URL lub do niego), przeglądarka internetowa wyszuka zdjęcie w folderze z plikiem HTML. Jeśli obraz jest w innym folderze, wprowadź pełną ścieżkę do pliku.

Zapisz plik HTML. Obraz zatytułowany 2627945 6 1

Część 3 z 5:

Jak wyświetlić plik HTML

jeden. Otwórz plik HTML w przeglądarce internetowej. Kliknij prawym przyciskiem myszy plik indeksu.HTML i otwórz go w wybranej przeglądarce internetowej.

Jeśli żądany obraz nie został otwarty w przeglądarce, sprawdź nazwę pliku z obrazem poprawnie w oknie edytora tekstu.
Jeśli w przeglądarce internetowej pojawi się kod HTML, a nie obraz tła, plik indeksu.HTML został zapisany jako dokument w formacie RTF. W takim przypadku edytuj plik HTML w innym edytorze tekstu.

2. Wprowadź zmiany w pliku HTML. W oknie edytora tekstu umieść kursor między tagami i wejdź do "cześć, świat!". Odśwież stronę w przeglądarce, aby wprowadzić tekst został wyświetlony na tle obrazu.

Część 4 z 5:

Jak zrozumieć kod HTML

jeden. Pamiętaj, jakie są tagi w HTML i CSS. Kod HTML składa się z tagów otwarcia i zamykania. Na przykład tag otwiera się również - Zamknięcie. Na każdym znaczniku otwierania należy poprawnie załadować odpowiedni znacznik zamykania.

2. Pamiętaj o tagu Doctor. Wysokiej jakości kod HTML musi rozpocząć się . Ten tag informuje przeglądarkę internetową, którą plik HTML jest plikiem HTML.

3. Wprowadź zmiany w pliku HTML. W oknie edytora tekstu umieść kursor między tagami i wejdź do "cześć, świat!". Odśwież stronę w przeglądarce, aby wprowadzić tekst został wyświetlony na tle obrazu.

cztery. Pamiętaj, jakie są tagi w HTML i CSS. Kod HTML składa się z tagów otwarcia i zamykania. Na przykład tag otwiera się również - Zamknięcie. Na każdym znaczniku otwierania należy poprawnie załadować odpowiedni znacznik zamykania.

pięć. Pamiętaj o tagie . Zawiera tekst wyświetlany w pasku tytułu okna przeglądarki, a także tekst wyświetlany na karcie przeglądarki.

6. Pamiętaj o tagie Wskazuje zawartość CSS. Wszystko, co jest między tagami

7. Pamiętaj o tagie . Dowolny tekst znajdujący się między tagami , zostanie wyświetlony jako wprowadzony (jeśli nie jest kodem HTML lub CSS).

osiem. Wprowadź zmiany w pliku HTML. W oknie edytora tekstu umieść kursor między tagami i wejdź do "cześć, świat!". Odśwież stronę w przeglądarce, aby wprowadzić tekst został wyświetlony na tle obrazu.

Część 5 z 5:

Jak zrozumieć kod CSS

jeden. Oblicz kod CSS. W pliku indeksu.Kod CSS HTML znajdujący się między tagami

2. Wyświetl kod CSS.

Ciało {Background-Image: URL ("tło.jpg") -}

cztery. Zapamiętaj części CSS Code. Style CSS składają się z dwóch części: selektor i ogłoszeń.

Ciało

Background-Image: URL ("tło.jpg")

Selektor może być dowolnym znacznikiem HTML.

Reklamy zawsze składają się w kręconych klamrach {}.

pięć. Pamiętaj, jakiego ogłoszenia CSS. CSS AD składa się z dwóch części: Właściwości i wartości. Treść w nawiasach kręconych
zdjęcie w tle jest nieruchomością jak URL ("tło.jpg") jest znaczeniem.

Nieruchomość opisuje temat (w naszym przykładzie jest to wzór tła), a wartość to styl elementu (w naszym przykładzie jest obrazem z obrazem).

Właściwość i wartość są zawsze oddzielone dwukropkiem (:).

Reklamy CSS zawsze kończą się średnikiem (-).