1.3 Strona w dobrym stylu

Data publikacji: 2025-09-15

Temat: Strona w dobrym stylu

Definiowanie kolorów.

Osadzanie w dokumencie HTML elementów graficznych.

Umieszczanie w dokumencie HTML znaków specjalnych niedostępnych z klawiatury.

Podstawowa struktura strony www

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Tytuł strony</title>
</head>
<body>
    <h1>Witaj na mojej stronie!</h1>
    <p>To jest przykładowy akapit tekstu.</p>
</body>
</html>

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

DEFINIOWANIE KOLORÓW

zobacz kolory w trybie szesnastkowym

OSADZANIE ELEMENTÓW GRAFICZNYCH W DOKUMENCIE HTML


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

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 lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Tytuł strony</title>
</head>
<body>
    <h1>Witaj na mojej stronie!</h1>
    <p>To jest przykładowy akapit tekstu.</p>
</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;

Podgląd html.

← Powrót