Dzięki prostemu przykładowi dowiemy się jak umieścić logo Facebooka na stronie internetowej. Skorzystamy w przykładzie z pliku facebook-icon.png, pobranego ze strony internetowej http://www.iconarchive.com. Końcowy rezultat przykładu (Listing 1, Listing 2), został przedstawiony na rysunku 1.
Listing 1. Zawartość pliku index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Facebook na strone html</title>
<link href="/style.css" media="all" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="facebook-box">
<a href="#" title="Facebook na strone html" target="_blank">
<img alt="Facebook na strone html" src="/facebook-icon.png" />
</a>
</div>
</body>
</html>
Listing 2. Fragment pliku style.css
...
div#facebook-box {
/* Tło ustawione na biały kolor. */
background-color: #FFFFFF;
/* Wysoka liczba, aby inne warstwy zawsze były niżej. */
z-index: 1982;
/* Wysokość pliku PNG. */
height: 48px;
/* Szerokość pliku PNG. */
width: 48px;
/* Plik zawsze będzie widoczny na stronie 100 pikseli od góry, */
/* nawet podczas przewijania strony. */
position: absolute;
/* Logo umieszczone przy lewej krawędzi przeglądarki, 0 pikseli. */
left: 0px;
/* Logo umieszczone 100 pikseli od góry w oknie przeglądarki. */
top: 100px;
/* Margines wewnętrzny usunięty. */
padding:0;
/* Margines zewnętrzny usunięty. */
margin:0;
/* Zaokrąglenie rogów obramowania zgodnie z plikiem PNG. */
border-top-right-radius: 12px;
border-bottom-right-radius:12px;
/* Kolor pobrany z pliku PNG. */
border:1px solid #2489DB;
}
Rys. 1. Logo Facebook na stronie internetowej
Materiały do artykułu można znaleźć w pliku logo-facebook-na-stronie.zip – kodowanie plików tekstowych UTF-8, znaki końca linii (Unix). Plik PNG nie został umieszczony w pliku zip, należy go pobrać ze strony http://www.iconarchive.com/.
Wybrane książki:
- Laura Lemay, Rafe Colburn, Jennifer Kyrnin: HTML, CSS i JavaScript dla każdego. Wydanie VII, Wydawnictwo Helion, 2016.
- Jon Duckett: HTML i CSS. Zaprojektuj i zbuduj witrynę WWW. Podręcznik Front End Developera, Wydawnictwo Helion, 2014.