Aby utrwalić sobie poznane dotąd polecenia HTML i zrozumieć stosowanie styli CSS stworzymy naszą pierwszą stronę. Dla przykładu stwórzmy sobie stronę, na której po lewej stronie będziemy mieli definicje poznanych na poprzedniej lekcji znaczników HTML, a po prawej przykłady stosowania tych znaczników. Dodatkowo. Chcemy, żeby znaczniki były wyświetlane w kolorze pomarańczowym i były pogrubione, opis znaczników był w kolorze jasno szarym, a przykład w kolorze białym. Nagłówki stwórzmy sobie w odcieniach zieleni. Dodatkowo chcemy, żeby nasza strona była obramowana i tekst był odsunięty 10pikseli od brzegów strony. Jej tło było czarne, ale w 20% przenikało tło występujące poza obramowaniem strony. Z kolei to tło zewnętrzne było tęczowe. Dodatkowo, jak w każdej prawdziwej stronie stworzymy sobie stopkę z nazwiskiem autora strony.
1. Sparametryzujemy sobie nasz znacznik <body>, który definiuje tło całej strony:
<body style="margin:5%;background-image:linear-gradient(to bottom, #f00 0%, #ff8000 10%, #ff0 20%, #80ff00 30%,#0f0 40%,#0080ff 50%,#0ff 60%, #8000ff 70%, #f0f 80%, #ff0080 90%, #f00 100%);">
Tęczowe tło. Specjalnie wybrałem taki przykład, bo komuś może się przydać to tło do innych projektów.
2. Teraz musimy sobie zdefiniować nasz blok tekstowy, w którym będziemy mieć całą naszą stronę. Użyjemy polecenia <div>
<div style="background-color:rgba(0,0,0,0.8);border: 1px solid rgba(255,255,176,0.5);padding:10px;color:#aaa;}
3. Style nagłówków
<style>
h1 {color:#0f0;text-align:center;}
h2 {color:#0a0;}
h3 {color:#050;}
</style>
4. Styl znaczników
<style>
span {color:#f60;font-weight:bold;}
</style>
5. Nie znamy jeszcze tabel, a chcemy mieć 2 kolumny. W lewej opis znacznika, a w prawej przykład. Znów możemy sobie zdefiniować style znacznika p. Osobno dla lewej i osobno dla prawej kolumny. Prawą i lewą stronę rozróżnimy za pomocą klas. Klasy definiujemy jako znacznik+kropka+nazwa klasy, a w treści umieszczamy znacznik z nazwą klasy <p class="klasa">
<style>
p.lewa {float:left;width:67%;margin:0px;}
p.prawa {float:right;width:67%;color:white;margin:0px;}
br {clear:both;}
</style>
6. Teraz możemy już tworzyć treść naszej strony. Znaczniki będziemy zamykać w <span>, a lewą i prawą kolumnę z znacznik <p>. Musimy jeszcze pamiętać o znakach specjalnych. Jeśli chcemy wyświetlić znak większości i mniejszości musimy je zastąpić przez: < i >. Jeśli tego nie zrobimy znacznik się nie wyświetli tylko wykona.
<h1>Kurs HTML</h1>
<h2>Formatowanie tekstu</h2>
<h3>Wyróżnianie tekstu</h3>
<p class="lewa"><span><b>...</b></span> - pogrubienie tekstu. Zamiast znaczników HTML można użyć stylu CSS. <span style="font-weight:bold;">...</span></p>
<p class="prawa"><b>tekst pogrubiony</b></p><br /><br />
7. Tak samo formatujemy opisy kolejnych znaczników.
8. Teraz robimy stopkę. Ładnie powinna wyglądać na gradientowej, szarej belce.
<div style="background-image:linear-gradient(to bottom, #888 0%, #444 100%);text-align:center;"><br />© 2015 Imię i Nazwisko<br /><br /></div>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-Strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head lang="pl" xml:lang="pl" dir="ltr">
<base href="http://moja-domena.pl" />
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="author" content="Tu wpisz swoje imię i nazwisko" />
<meta name="description" content="To jest moja pierwsza strona. Prawda, że niezła?">
<meta name="keywords" content="ćwiczenia, kurs, xhtml, html, css" />
<meta name="Robots" content="index,follow" />
<title>Imię i nazwisko - strona prywatna</title>
<style>
p.lewa {float:left;width:67%;margin:0px;}
p.prawa {float:right;width:33%;color:white;margin:0px;}
h1 {color:#0f0;text-align:center;}
h2 {color:#0a0;}
h3 {color:#050;}
br {clear:both;}
span {color:#f60;font-weight:bold;}
</style>
</head>
<body style="margin:5%;background-image:linear-gradient(to bottom, #f00 0%, #ff8000 10%, #ff0 20%, #80ff00 30%,#0f0 40%,#0080ff 50%,#0ff 60%, #8000ff 70%, #f0f 80%, #ff0080 90%, #f00 100%);">
<div style="background-color:rgba(0,0,0,0.8);border: 1px solid rgba(255,255,176,0.5);padding:10px;color:#aaa;">
<h1>Kurs HTML</h1>
<h2>Formatowanie tekstu</h2>
<h3>Wyróżnianie tekstu</h3>
<p class="lewa"><span><b>...</b></span> - pogrubienie tekstu. Zamiast znaczników HTML można użyć stylu CSS. <span style="font-weight:bold;">...</span></p>
<p class="prawa"><b>tekst pogrubiony</b></p><br />
<p class="lewa"><span><strong>...</strong></span> - pogrubienie tekstu. Zamiast znaczników HTML można użyć stylu CSS. <span style="font-weight:bold;">...</span></p>
<p class="prawa"><strong>tekst pogrubiony</strong></p><br />
<p class="lewa"><span><i>...</i></span> - pochylenie tekstu. Zamiast znaczników HTML można użyć stylu CSS. <span style="font-style:italic;">...</span></p>
<p class="prawa"><i>tekst pochylony</i></p><br />
<p class="lewa"><span><em>...</em></span> - pochylenie tekstu. Zamiast znaczników HTML można użyć stylu CSS. <span style="font-style:italic;">...</span></p>
<p class="prawa"><em>tekst pochylony</em></p><br />
<p class="lewa"><span><u>...</u></span> - podkreślenie tekstu. Zamiast znaczników HTML można użyć stylu CSS. <span style="text-decoration: underline;">...</span></p>
<p class="prawa"><u>tekst podkreślony</u></p><br />
<p class="lewa"><span><u><i><b>...</b></i></u></span> - Dekorowanie tekstu można łączyć.
<p class="prawa"><u><i><b>tekst podkreślony, pogrubiony i pochylony</b></i></u></p><br />
</div>
<div style="background-image:linear-gradient(to bottom, #888 0%, #444 100%);text-align:center;"><br />© 2015 Imię i Nazwisko<br /><br /></div>
</body>
</html>
W przykładzie wykorzystałem tylko kilka znaczników z poprzedniej lekcji. Proponuję by chętni przećwiczyli budowanie tej strony wykorzystując opisy pozostałych znaczników i przy okazji zobaczyli w jaki sposób wpływają one na wygląd tekstu.
