W tej lekcji stworzymy pierwszą stronę www, na przykładzie której przedstawię schemat konstrukcji szablonu, równocześnie stanowi ona wstęp do dalszej pracy nad właściwym już projektem.
Zacznę od wprowadzenia do ogólnej struktury witryny internetowej, na koniec tej lekcji przygotujemy pierwszy dokument html, który następnie podejrzymy w przeglądarce internetowej.
Jeśli potrzebujesz więcej szczegółów dotyczących budowy określonych znaczników zapraszam na kurs html oraz kurs css.
Jak zatem wygląda baza strony internetowej?
Struktura dokumentu HTML
Dokument strony internetowe jest zawarty pomiędzy znacznikami html. W części head umieszczamy informacje, które nie będą widoczne w oknie głównego projektu. Znajdzie się tam m.in tytuł strony (wyświetlany na pasku przeglądarki internetowej) oraz ścieżka do pliku css definiującego wygląd strony internetowej. Z kolei w body znajdzie się właściwa część strony, która zostanie wyświetlona na ekranie użytkownika.
<html>
<head>
<title>Tytuł strony</title>
</head>
<body>
<p>To jest nasza nowa strona internetowa.</p>
</body>
</html>Pliki html oraz css można przygotować w dowolnym edytorze tekstowym np. Notatniku.
Rozbudowa naszej strony HTML
Dodamy kilka sekcji, które umożliwią nam lepsze rozplanowanie układu strony. Posłużymy się przyjętym dla standardu html5 układem strony, który w miarę zdobywania wiedzy będzie można dowolnie rozbudować o nowe znaczniki. Na początku dodamy header – w nim możemy umieścić logo, menu. Poniżej będą dwie kolumny: section – opis strony, aside – kolumna prawa. Na dole stopka – footer (może zawierać dane kontaktowe, informacje o stronie).
<html>
<head>
<title>Tytuł strony</title>
<link rel="stylesheet" href="styl.css" type="text/css" />
</head>
<body>
<header><p>header</p></header>
<section><article><p>To jest nasza nowa strona
internetowa.</p></article></section>
<aside><p>aside</p></aside>
<footer><p>footer</p></footer>
</body>
</html>Dokument CSS – wygląd strony
W sekcji head naszego dokumentu html dodajemy ścieżkę do pliku css, który następnie przygotujemy.
<link rel="stylesheet" href="styl.css" type="text/css" /><html>
<head>
<title>Tytuł strony</title>
<link rel="stylesheet" href="styl.css" type="text/css" />
</head>
<body>
<p>To jest nasza nowa strona internetowa.</p>
</body>
</html>W pliku styl.css definiujemy wygląd dokumentu html. Poniżej określimy formatowanie dla poszczególnych elementów na stronie – header, section, aside, footer, p. Będzie to:
- tło (background)
- długość (height)
- szerokość (width)
- opływanie (float)
- float: left (po lewej)
- float: right (po prawej)
- font (czcionka)
- color (kolor czcionki)
- text-align (wyśrodkowanie)
header { background: yellow; width:100%; height: 100px; }
section { background: green; width:70%; height: 100px; float: left; }
aside { background: orange; width:30%; height: 100px; float: right; }
footer { background: blue; width:100%; height: 100px; clear: both; }
p { font: 14px Arial, sans-serif; color: red; text-align: center; }Dokładne znaczenie i budowa znaczników zostały omówione w kursie html i kursie css.
Tak przygotowane pliki zapisujemy – html jako index.html, css jako styl.css. Teraz możemy otworzyć stronę w przeglądarce internetowej.
Efekt pracy
header
To jest nasza nowa strona internetowa.
aside
W kolejnych lekcjach przystąpimy do wykonania kompletnej strony www od podstaw i umieścimy ją w internecie. W następnej lekcji zaczniemy od opracowania koncepcji projektu.