Lekcja 2 – Jak to zrobić w HTML-u i CSS?

Temat: Jak to zrobić w HTML-u i CSS?

  1. Programy do tworzenia stron internetowych,
  2. Struktura dokumentu HTML,
  3. Definiowanie styli w dokumencie HTML,
  4. Wpisanie; osadzenie zewnętrznych arkuszy stylów.

Program do pisania stron www:

dział download – NOTEPAD++

Wygląd dokumentu HTML:

<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Transitional//EN” „http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
 <link rel=”stylesheet” href=”mojstyl.css” type=”text/css”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Dokument bez tytułu</title>
</head>

<body>
</body>
</html>

  • <!DOCTYPE html>
    Informacja dla przeglądarki, że dokument napisano z zastosowaniem języka HTML 5.
  • <html>
    Znacznik rozpoczynający dokument HTML.
  • <head>
    Początek części nagłówkowej z informacjami dla przeglądarki oraz wyszukiwarek.
  • <meta charset="…">
    Informacja dla przeglądarki o standardzie kodowania znaków.
  • <meta name="description"content="…">
    Informacja dla wyszukiwarki zawierająca krótki opis strony.
  • <meta name="keywords"content="…">
    Informacja dla wyszukiwarki zawierająca oddzielone przecinkami słowa kluczowe związane z tematem danej strony.
  • <title>…</title>
    Informacja dla wyszukiwarki zawierająca tytuł strony.
  • </head>
    Koniec części nagłówkowej dokumentu.
  • <body>
    Początek właściwej treści dokumentu.
  • </body>
    Koniec treści dokumentu.
  • </html>
    Koniec dokumentu HTML.

DEFINIOWANIE STYLÓW W DOKUMENCIE HTML

Ostylowanie, np. kroju czcionki, umieszczono wewnątrz znaczników za pomocą atrybutu style=” „. Jeśli chcesz zastosować krój Arial, należy napisać style=”font-family: Arial”. Kolejne właściwości i wartości wewnątrz cudzysłowu oddziela się średnikami. Jednostki zapisuje się bez odstępu, a nazwy składające się z kilku wyrazów wstawia się w apostrofy proste.

Przykład:

<body style=”font-family: Arial; font-size: 11pt; margin: 80px;”> – osadzenie odnoszące się do całego stylu body

<h1 style=”text-align: center; color: red;”>Cały ja</h1> – istnieje sześć stopni nagłówków; nagłówek stopnia 1 jest największy, a nagłówek stopnia 6 – najmniejszy.

<p style=”text-align: center; font-style: italic;”>(jeszcze o mnie usłyszycie) Wasz Kleo </p>
Ten akapit ostylowano przez zdefiniowanie sposóbu wyrównania tekstu w poziomie (do środka) oraz stylu czcionki (kursywa).

Jeśli chcemy zmienić kolor fragmentu tekstu, to mamy do dyspozycji znacznik <span> oraz możliwość określenia stylu.

Normalny tekst. <span style=”color: blue”>Ten tekst będzie wyświetlany w kolorze niebieskim</span>. Normalny tekst.

<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Transitional//EN” „http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<link rel=”stylesheet” href=”mojstyl.css” type=”text/css”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Dokument bez tytułu</title>
</head>
<body>
Cały ja
imię: Kleofas
nazwisko: Słuszny
miejsce zamieszkania: Błądzigłowy

Urodziłem się na początku XXI wieku. Wszyscy mówią , że to wiek szalony.
Uważnie obserwuję otaczający mnie świat i coraz częściej dochodzę do wniosku,
że trudno zaprzeczyć tej opini.

Jaki będzie świat za 50 lat? Niestety, tego nie wiem. Chciałbym jednak czynnie
uczestniczyć w jego kształtowaniu.

Myślę, że najważnieszą informacją o mnie będzie ta, że ponad wszystko cenię
sobie spokój.

(jeszcze o mnie usłyszycie) Wasz Kleo
</body>
</html>

 

Kolejny przykład osadzenia stylów:

<h1 style=”font-family: arial; font-size: 25px; color: #ffff00;

background-color: #ff0000; padding: 6px; width: 100%; height: 25px;”>

   Tytuł artykułu

</h1>

<h2 style=”font-family: arial; font-size: 11pt; color: black; background-color: silver; padding: 4px; width: 200px;”>

  Podtytuł

</h2>

<p style=”width: 400px; margin-left: 80px;

  padding: 20px 20px 20px 50px; background-color: yellow;”>

  Akapit zawierający dowolny tekst. Tekst dowolny w akapicie.

  Akapit zawierający dowolny tekst. Tekst dowolny w akapicie.

  Akapit zawierający dowolny tekst. Tekst dowolny w akapicie.

</p>

 

Style osadzone umieszcza się w części nagłówkowej dokumentu. W tym przypadku wystarczy raz zdefiniować styl dla określonego elementu, a w całym dokumencie będzie on obowiązywał dla wszystkich elementów tego samego typu. Jeśli witryna składa się z kilku dokumentów, to w każdym z nich trzeba powtarzać definicję stylu.

Przykład:

Tekst:

Babulej i Babulejka
Jan Brzechwa

Pod Oszmianą nad Wilejką
Żył Babulej z Babulejką,
Ona była czarodziejką,
On – rzecz prosta – czarodziejem
I jadali mak z olejem
Babulejka z Babulejem.

Babulejka raz powiada:
„Babuleju, tak się składa,
Że mam starą koźlą skórę
Odwieźć dziś na Łysą Górę”.

 

ZAPIS W HEAD:

Padding – odstęp wewnątrz elementu

Przykładowy zapis w części head:

(…)

  <style>

    article {

    border: 3px double #003800;

    padding: 0;

    width: 616px;

  }

  p.tytuł {

    background-color: #008D00;

    color: #FFFFE9;

    padding: 8px;

    width: 600px;

    font-size: 16pt;

    font-family: „Times New Roman”;

  }

  p {

    width: 600px;

    font-size: 12pt;

    font-family: arial;

    color: #000094;

    padding: 10px;

    margin: 0;

  }

  </style>

Zapis w BODY

(…)

  <article>

  <p class=”tytuł”>

    Babulej i Babulejka<br><span style=”font-size: 10pt;”>

    <i>Jan Brzechwa</i></span>

  </p>

  <p>

    Pod Oszmianą nad Wilejką<br> Żył Babulej z Babulejką,<br>

    Ona była czarodziejką,<br> On – rzecz prosta – czarodziejem<br>

    I jadali mak z olejem<br>Babulejka z Babulejem.<br>

  </p>

  <p>

    Babulejka raz powiada:<br>

    „Babuleju, tak się składa,<br>

    Że mam starą koźlą skórę<br>

    Odwieźć dziś na Łysą Górę”.<br>

  </p>

  </article>

 (…)

 

Znaczniki:

 

Ćwiczenie:

zadanie

Zastosować – pogrubienie tekstu, kursywa, podkreślenie, tło dla wybranego tekstu, zmienić czcionkę oraz jej kolor, wielkość czcionki. Tekst wyrównany do lewej, prawej, wyjustowany oraz do środka. Zastosuj Padding 20px