1.3 Strona w dobrym stylu

PrzezKarol

TEMAT: Strona w dobrym stylu

  1. Definiowanie kolorów.
  2. Osadzanie w dokumencie HTML elementów graficznych.
  3. Umieszczanie w dokumencie HTML znaków specjalnych niedostępnych z klawiatury.

Podstawowa struktura strony www

<!doctype html>
<html>
     <head>
          <meta charset="UTF-8" />
          <link rel="stylesheet" href="mojstyl.css" type="text/css">
          <title>Tytuł strony...</title> 
     </head> 
     <body> 
          Główna treść dokumentu 
     </body> 
</html>

DEFINIOWANIE KOLORÓW

zobacz kolory w trybie szesnastkowym

OSADZANIE ELEMENTÓW GRAFICZNYCH W DOKUMENCIE HTML

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ę”

Osadzenie grafiki:

<img src="ona.jpg" style="height: 90px; float: right; margin-right: 20px" title="Babulejka">

<img src="on.jpg" style="height: 90px; float:left; margin-left: 20px; margin-right: 200px" title="Babulej">

pobierz grafikę – ON i ONA

Styl css

article {
               border: 3px double #003800;
               padding: 0;
               width: 516px;
              }
      p.tytuł {
               background-color: #008D00;
               color: #FFFFE9;
               padding: 8px;
               width: 500px;
               font-size: 16pt;
               font-family: "Times New Roman";
              }
            p {
               width: 500px;
               font-size: 12pt;
               font-family: arial;
               color: #000094;
               padding: 10px;
               margin: 0;
              }

Efekt:

STYLE ZEWNĘTRZNE

ĆWICZENIE

Chcemy uzyskać następujący efekt:

 
Podstawowa struktura strony www

<!doctype html>
<html>
     <head>
          <meta charset="UTF-8" />
          <link rel="stylesheet" href="mojstyl.css" type="text/css">
          <title>Tytuł strony...</title> 
     </head> 
     <body> 
          Główna treść dokumentu 
     </body> 
</html>

Tekst:

Bambo
Julian Tuwim

Murzynek Bambo w Afryce mieszka,
czarną ma skórę ten nasz koleżka.

Uczy się pilnie przez całe ranki
Ze swej murzyńskiej pierwszej czytanki.

A gdy do domu ze szkoły wraca,
Psoci, figluje - to jego praca.

Aż mama krzyczy: "Bambo, łobuzie!"
A Bambo czarną nadyma buzię...

Szerokość obrazka 200 px

Style:

p
czcionka:  "Courier New", Courier, monospace;
wielkość czcionki: 12px;

tytul
czcionka: Georgia, "Times New Roman", Times, serif;
wielkość czcionki: 36px;
czcionka - pogrubiona (bold);
kolor: #F00;

autor 
czcionka: Tahoma, Geneva, sans-serif;
rozmiar: 12px;
wygląd czcionki: italic;

pierwsza
czcionka: Arial, Helvetica, sans-serif;
rozmiar czcionki: 14px;
wielkość znaków: uppercase; (text-transform)
kolor:#F00;
położenie: right;
szerokość bloku: 1024px;

druga
czcionka: "Comic Sans MS", cursive;
rozmiar: 24px;
położenie: wyśrodkowane;
kolor: #C00;
położenie: 10px; (padding)

trzecia 
czcionka: Tahoma, Geneva, sans-serif;
rozmiar: 18px;
czcionka - pogrubiona: (bold font-weight);
kolor: #003;
dekoracja tekstu: podkreślenie;
kolor tła: #CF0;
szerokość bloku: 300px;
odległość: 30px;

czwarta 
czcionka: Arial, Helvetica, sans-serif;
kolor tła: #9F9;
wyrównanie tekstu: center;
odległości między wyrazami: 20px;
odległość: 3px; (padding)
szerokość bloku: 600px;
rozmiar czcionki: 18px;
wielkość znaków: capitalize; (text-transform)
kolor: #900;

obrazek
opływ: prawa; (float)
odległość: 30px;

Obrazek do pobrania

 

Plik html oraz css tutaj do pobrania.

 

Podobne wpisy