Dodajemy grafikę i tło do naszej strony internetowej w języku HTML

Dodajemy grafikę i tło

do naszej strony internetowej

 w języku HTML


Lekcja przeznaczona dla klasy 7

Czas: 30 min



KROK 1

Utwórz na pulpicie folder "STRONA INTERNETOWA" i przenieś tam plik zawierający stronę, którą utworzyłeś na poprzednich zajęciach.


KROK 2

Na stronie www.pixabay.com znajdź grafikę, która ilustruje twoje zwierzątko. Zapisz grafikę w folderze "STRONA INTERNETOWA" - z rozszerzeniem .jpg lub .png


KROK 3

Otwórz w NotePad++ stronę, którą utworzyłeś na poprzednich zajęciach i w kodzie dodaj informację o grafice, któa ma się tam wyświetlać. Podajesz dokładną nazwę i rozszerzenie:

<img src="tygrys.png">

Jeśli chcemy umieścić obrazek pod tekstem pamiętajmy o znaczniku <br>

<br><img src="tygrys.png">


KROK 4

Zapisz swój poprawiony plik pod inną nazwą np. "STRONA Z OBRAZEM"


KROK 5

Wywołaj stronę w  przeglądarce i zobacz efekt.


 


 KROK 6

Przenieś obraz na prawą stronę strony:

do znacznika <img> należy dodać atrybut align z wartością right:


<img src="tygrys.png"align="right">


KROK 7

Zapisz pracę pod nową nazwą np. "STRONA Z OBRAZEM PO PRAWEJ":


KROK 8

Zmieniamy wielkość obrazu:

Potrzebujemy dwóch kolejnych atrybutów, a wartość wyrażamy w pixelach.

<img src="tygrys.png"width="600" height="400"align="right">


KROK 9

Zapisz stronę pod nową nazwą np. "STRONA Z OBRAZEM PO PRAWEJ ZMNIEJSZONA"


KROK 10

Dodajemy tło do naszej strony i zmieniamy kolor czcionki:

w kodzie pod znacznikiem <body> wpisujemy następujące polecenie:

<body bgcolor="wybieramykolor" text="wybieramykolor">




KROK 11

Zapisz gotową stronę swoim imieniem i nazwiskiem a następnie prześlij mi gotowy plik przez MS Teams do folderu STRONA ZE ZDJECIEM


Komentarze

Prześlij komentarz

Popularne posty