1F4R (Tech)Zdalne Lekcje

Informatyka 1F4R

4-05-2020

Temat: Strony internetowe – rozdzielanie wyglądu od treści.

Celem lekcji jest poznanie sposobów uatrakcyjniania wyglądu tworzonych stron internetowych.

  1. Zapoznaj się z dokumentem Kaskadowe arkusze stylów
  2. Wykonaj poniższe polecenia:


Zdanie
do wykonania.

Skopiuj do swojego komputera cały folder CSS  z udostępnionego dysku https://drive.google.com/drive/folders/1HnYlTyIzpOoyWU9p60eqrlaMfZQ5KhxH?usp=sharing Zapoznaj się z jego zawartością. Otwórz pliki mickiewicz.html, slowacki.html i norwid.html.

Zwróć szczególną uwagę na wygląd stron.

W katalogu CSS utwórz teraz plik tekstowy o nazwie arkusz.css (możesz do tego użyć systemowego Notatnika).

Następnie edytuj plik slowacki.html i w pierwszej linii dopisz
<link rel=”Stylesheet” type=”text/css” href=”arkusz.css” />

Postąp analogicznie z dokumentami mickiewicz.html i norwid.html.

W pliku arkusz.css wprowadź poniższą składnię, następnie zapisz zmiany i odśwież slowacki.html.

h1
{
font-size: 28px;
font-family: Arial;
font-weight: bold;
color: red;
letter-spacing: 2px;
text-align: center;
}

W ten sposób dokonaliśmy formatowania wszystkich elementów zapisanych stylem nagłówkowym pierwszego poziomu (h1).

Następnie dopisz w arkuszu następujący kod:

h2

{

font-size: 24px;

font-family: Arial;

font-weight: bold;

color: red;

letter-spacing: 2px;

text-align: center;

font-style: italic;

}

Dzięki powyższemu będą formatowane elementy zapisane stylem nagłówkowym drugiego poziomu (h2).

Następnie zmieńmy położenie zdjęć pisarzy. Dopiszmy więc do arkusza kod:

img

{

float: left;

width: 200px
margin: 30px
}

Ustalmy teraz cechy tła strony. Dopiszmy do arkusza kod:

body
{
background-image: url (tlo.gif);
margin-left: 100px;
margin-right: 100px;
}

Kod ten spowoduje ustalenie marginesów (lewego i prawego) na 100 pikseli w całym dokumencie oraz umieszczenie pliku tlo.gif jako tła strony.

Obejrzyj wyniki swojej pracy w każdym z plików pisarzy.

Opublikował Leszek Koczkodaj