Kurs HTML i CSS.
Wstawianie rysunków na stronę www.
Dołożyłem wszelkich starań, aby strona nie zawierała błędów,
ale nikt nie jest nieomylny...
 

Lekcja 7 - Wstawianie rysunków

Pliki graficzne używane na stronach www mają trzy formaty zapisu: GIF, JPEG, PNG
Aby umieścić rysunek na stronie www należy użyć znacznika <img> z atrybutami: src oraz alt. Atrybut src określa nazwę pliku oraz jego lokalizację (ścieżkę dostępu), a atrybut alt określa tekst, jaki pojawi się na stronie, gdy na obrazku umieścimy kursor myszy. Poniżej mamy kod HTML pokazujący sposób użycia znacznika <img> 

<html>
<head>
<title>Zapraszam na moją wspaniałą stronę!</title>
<style type="text/css">
body{
background-color: #ffffff;
text-align: left;
}
h1{font-size: 16px;
color: navy;
} 
p{font-size: 12px;
color: #000000;
}
</style>
</head>
<body>

<h1>Pierwsza próba wstawienia rysunku</h1>


<img src="orka2.jpg" alt="Orka czyli nauczanie fizyki">


<p>Lorem ipsum dolor sit amet, 
<br>consectetur adipisicing elit, sed do eiusmod tempor incididunt 
<br>ut labore et dolore magna aliqua. 
<br>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
<br>ex ea commodo consequat. 
<br>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
dolore eu fugiat nulla pariatur. 
<br>Excepteur sint occaecat cupidatat non proident, 
<br>sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</body>
</html>

Nasz rysunek nazywa się orka2.jpg, a tekst alternatywny (który pojawi się po najechaniu kursorem na rysunek)
to: Orka czyli nauczanie fizyki

Efekt działania znacznika <img> zobaczycie na tej stronie

W znaczniku <img> występują też atrybuty: width (szerokość rysunku) oraz height (wysokość rysunku).
Jeśli chcemy, aby rysunek był przesunięty do lewej strony okna przeglądarki i był otaczany tekstem, to należy użyć
polecenia CSS img {float: left;}
Poniżej mamy kod HTML z ostatnimi poprawkami: 

<html>
<head>
<title>Zapraszam na moją wspaniałą stronę!</title>
<style type="text/css">
body{
background-color: #ffffff;
text-align: left;
}
h1{font-size: 16px;
color: navy;
} 
p{font-size: 12px;
color: #000000;
}
img{float: left;}
</style>
</head>
<body>

<h1>Pierwsza próba wstawienia rysunku</h1>


<img src="orka2.jpg" width="218" height="90" alt="Orka czyli nauczanie fizyki">


<p>Lorem ipsum dolor sit amet, 
<br>consectetur adipisicing elit, sed do eiusmod tempor incididunt 
<br>ut labore et dolore magna aliqua. 
<br>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
<br>ex ea commodo consequat. 
<br>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
dolore eu fugiat nulla pariatur. 
<br>Excepteur sint occaecat cupidatat non proident, 
<br>sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</body>
</html>

Tak wygląda strona po poprawkach

ćwiczenie 1

Przekopiuj kod HTML z pierwszego schematu z tej lekcji do Notatnika i zapisz plik pod nazwą trzeci.html w utworzonym na lekcji pierwszej folderze. W internecie znajdź sobie obrazek np. konia. Zapisz ten obrazek w tym samym folderze, w którym masz plik trzeci.html. Następnie w kodzie HTML pliku trzeci.html dokonaj zmiany, zastępując nazwę orka2.jpg nazwą swojego zapisanego zdjęcia.
Zapisz zmiany.

ćwiczenie 2

Co należy zmienić w poleceniu img {float: left;}, aby rysunek był przesunięty do prawej strony okna przeglądarki?
Dokonaj odpowiedniej zmiany w kodzie HTML.

lekcja 6 na początek strony lekcja 8

Ostatnia aktualizacja: 16 listopada, 2008
Copyright © 2010 by Jerzy Grabek, kontakt: fizyka4you@wp.pl