D

html

css

Jak zrobić stronę w HTML i CSS - Kodowanie HTML

Kurs tworzenia strony www html css

W tej lekcji zajmiemy się już pracą nad naszym głównym projektem tego kursu.

Dokument HTML to plik tekstowy, w którym zdefiniujemy strukturę strony internetowej.

Zanim rozpoczniemy pracę musimy uruchomić program, w którym będziemy pisać stronę. Do tego celu wystarczy najprostszy dostępny w naszym systemie edytor tekstowy np. notatnik.

Na początku zdefiniujemy znaczniki, które są niezbędne do prawidłowego wyświetlania zawartości pliku html5 (ta część jest obowiązkowa dla każdej podstrony).

<!DOCTYPE HTML>

Następnie określimy język strony.

<html lang="pl">

Przechodzimy do części head w której zaczniemy od zdefiniowania kodowania strony (ten wpis odpowiada za wyświetlanie polskich znaków na stronie).

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Kolejne dwie linie mają wpływ na pozycjonowanie strony - description (wpisujemy opis naszej strony), keywords (słowa kluczowe).

<meta name="description" content="" />
<meta name="keywords" content="" />

Później wypełniamy znacznik title - tytuł strony.

<title>Tytuł strony</title>

Zanim zamkniemy znacznik head musimy jeszcze podać ścieżkę do dokumentu CSS, w którym zdefiniujemy wygląd strony. Dodatkowo możemy podać ścieżkę do favicon (obrazek wyświetlany na pasku adresu przeglądarki).

<link rel="stylesheet" href="styl.css" type="text/css" />

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

</head>

Układ strony głównej HTML5

Teraz przejdziemy do przygotowania struktury dokumentu strony głównej.

header
nav
section
article
section
article
footer

Poszczególne elementy strony będą zawarte pomiędzy znacznikami body. Otwieramy znacznik body a następnie header, w którym znajdzie się logo będące jednocześnie linkiem do strony głównej. Poniżej możemy dodać slogan opisujący zawartości witryny. Niżej umieścimy przyciski nawigacji - "Strona główna" (domyślnie index.html), "O firmie", "Oferta", "Kontakt".

<body>

<header>
<div class="content">
<h1><a href="index.html">Nazwa/Logo</a></h1>
<p>Slogan/hasło reklamowe</p>
<nav>
<ul>
<li><a id="currentpage" href="index.html">Start</a></li>
<li><a href="o-firmie.html">O firmie</a></li>
<li><a href="oferta.html">Oferta</a></li>
<li class="last"><a href="kontakt.html">Kontakt</a></li>
</ul>
</nav>
</div>
</header>

W powyższym kodzie pojawiły się nowe znaczniki:

<div> - służy do utworzenia nowego bloku
<p> - akapit
<ul> <li> </li> </ul> - lista
<a href="o-firmie.html">O fimrie</a> - link, gdzie o-firmie.html oznacza
miejsce, do którego zostaniemy przeniesieni po kliknięciu na ten element

Pamiętajmy, że każdy otwarty znacznik musi zostać zamknięty.

Przykład
<p> </p>

Dodatkowo mamy tutaj do czynienia z identyfikatorem - id oraz klasą - class. Umożliwi nam do odwołanie się bezpośrednio w arkuszu stylów do atrybutu id i class, dzięki czemu będziemy mogli nadać indywidualne właściwości poszczególnym elementom.

Po sekcji header zajmiemy się częścią section.

<div id="main">

<div class="content">

<img src=""images/baner.jpg" alt="" title="" />
<div class="text"><h3>Nagłówek opisujący naszą ofertę.</h3>
<p>Szczegółowy opis.</p></div>

<section class="left">

<article>
<h2>O firmie</h2>
<p>Szczegółowy opis.</p>
<a class="wiecej" href="o-firmie.html">więcej</a>
</article>
</section>

<section class="right">

<article>
<h2>Oferta</h2>
<p>Szczegółowy opis</p>
<a class="wiecej" href="oferta.html">więcej</a>
</article>
</section>

</div>
</div>

Powyższy kod umożliwi wygenerowanie na stronie zaczynając od góry obrazka będącego banerem, poniżej pojawi się sekcja z opisem naszej oferty, działalności.

Pod banerem znajdą się dwa bloki. W lewym będzie informacja o firmie, naszej działalności. W prawym lista z odnośnikami do oferty.

Wstawianie obrazka na stronę:

<img src="images/baner.jpg" alt="opis obrazka" title="tytuł obrazka" />

Zapis ten definiuje ścieżkę do katalogu images, w którym znajdują się poszczególne grafiki.

Pozostała nam jeszcze do przygotowania stopka - footer

<footer>

<div class="content">

<ul>
<li><strong>Kontakt:</strong> ul. Firmowa 2a, 12-345 Miasto</li>
<li class="center"><strong>Telefon:</strong> 12 345-67-89</li>
<li><strong>Mail:</strong><a href="mailto:mail@mail.pl">mail@mail.pl</a>
</li>
</ul>

<div class="copyright">
<p>copyright © 2013 <a href="index.html">nazwa/logo</a></p>
</div>

</div>

</footer>

Pogrubienie tekstu

Przykład
<strong>Pogrubiony tekst</strong>

Na koniec pamiętajmy o zamknięciu znaczników otwierających dokument HTML5 - body i html.

</body>
</html>

Tak przygotowany plik zapisujemy - jeśli korzystamy z notatnika to z górnego menu "Plik" wybieramy "Zapisz jako" i w polu "Nazwa pliku" wpisujemy index.html, czyli dokument strony głównej.

Układ podstron HTML5

Struktura podstrony będzie różniła się modułem - section względem strony głównej. Zamiast dwóch boksów będzie jeden centralny.

header
nav
section
article
footer
<div id="main">

<div class="content">

<section class="article">
<article>
<h2>O firmie</h2>
<h4>Szczegółowy opis</h4>
<ul>
<li>lista</li>
<li>lista</li>
<li>lista</li>
</ul>
</article>
</section>

</div>

</div>

Dokument podstrony zapisujemy z dowolną nazwą, najlepiej odpowiadającą jego zawartości np. oferta.html. Dla każdej podstrony musimy zastosować unikalne nazewnictwo.

Tak przygotowany plik możemy już oglądać w przeglądarce internetowej. Na razie jest to surowy szablon. W kolejnej lekcji zajmiemy się formatowaniem wyglądu poszczególnych sekcji w css.

comments powered by Disqus

Do góry