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: &lt; i &gt;. 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>&lt;b&gt;...&lt;/b&gt;</span> - pogrubienie tekstu. Zamiast znaczników HTML można użyć stylu CSS. &lt;span style="font-weight:bold;"&gt;...&lt;/span&gt;</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 />&copy; 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>&lt;b&gt;...&lt;/b&gt;</span> - pogrubienie tekstu. Zamiast znaczników HTML można użyć stylu CSS. &lt;span style="font-weight:bold;"&gt;...&lt;/span&gt;</p>
      <p class="prawa"><b>tekst pogrubiony</b></p><br />
      <p class="lewa"><span>&lt;strong&gt;...&lt;/strong&gt;</span> - pogrubienie tekstu. Zamiast znaczników HTML można użyć stylu CSS. &lt;span style="font-weight:bold;"&gt;...&lt;/span&gt;</p>
      <p class="prawa"><strong>tekst pogrubiony</strong></p><br />
      <p class="lewa"><span>&lt;i&gt;...&lt;/i&gt;</span> - pochylenie tekstu. Zamiast znaczników HTML można użyć stylu CSS. &lt;span style="font-style:italic;"&gt;...&lt;/span&gt;</p>
      <p class="prawa"><i>tekst pochylony</i></p><br />
      <p class="lewa"><span>&lt;em&gt;...&lt;/em&gt;</span> - pochylenie tekstu. Zamiast znaczników HTML można użyć stylu CSS. &lt;span style="font-style:italic;"&gt;...&lt;/span&gt;</p>
      <p class="prawa"><em>tekst pochylony</em></p><br />
      <p class="lewa"><span>&lt;u&gt;...&lt;/u&gt;</span> - podkreślenie tekstu. Zamiast znaczników HTML można użyć stylu CSS. &lt;span style="text-decoration: underline;"&gt;...&lt;/span&gt;</p>
      <p class="prawa"><u>tekst podkreślony</u></p><br />
      <p class="lewa"><span>&lt;u&gt;&lt;i&gt;&lt;b&gt;...&lt;/b&gt;&lt;/i&gt;&lt;/u&gt;</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 />&copy; 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.

reveal-a

reveal-a

×

reveal-b

reveal-b

×

reveal-c

reveal-c

×