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. Stosowanie wpisanych, osadzonych i zewnętrzne arkuszy stylów.

Czym różni się Notepad++ od Notatnika

Notepad++ numeruje kolejne wiersze, a także wyróżnia kolorem znaczniki opisujące właściwy tekst,
co usprawnia śledzenie kodu. Program sygnalizuje również błędy w zapisie znaczników.

 

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>

Podstawowe znaczniki w języku HTML:

<br> – nowa linia

<hr> – pozioma linia

<a href> – hiperłącze (odsyłacz)

<b> – pogrubienie tekstu

<i> – pochylenie tekstu

<u> – podkreślenie tekstu

<strike> – przekreślenie tekstu

<sup> – indeks górny

<sub> – indeks dolny

<big> – duża czcionka

<small> – mała czcionka

<center> – wyśrodkowanie elementu

<font size> – wielkość czcionki

<font color> – kolor czcionki

<img src> – wstawianie obrazka

<title> – tytuł strony

<form> – wstawianie formularza

<input> – pole formularza

<table> – wstawianie tabeli

<tr> – wstawianie wiersza tabeli

<td> – wstawianie kolumny tabeli

<ol> – lista numerowana

<ul> – lista wypunktowana

<li> – element listy

W HTMLu można również wstawiać komentarze, które są ignorowane przez przeglądarki internetowe. Komentarz rozpoczyna się znakami <!– a kończy się znakami –>

 

DEFINIOWANIE STYLÓW W DOKUMENCIE HTML

Osadzanie styli:

Style wpisane:

dołącza się do poszczególnych znaczników HTML w dokumencie. Określają one sposób wyświetlania tylko tego elementu, którego dotyczy dany znacznik. Nie wpływają na sposób wyświetlania innych elementów, nawet tego samego typu. Metodę tę stosuje się, kiedy zachodzi konieczność wprowadzenia małych korekt w tekście. W przypadku określania stylów dla większej liczby znaczników używanie stylu wpisanego jest kłopotliwe i powoduje powstawanie obszernego kodu.

Przykład:

<p style="font-family: arial; font-size: 25px; color: #ffff00; background-color: #ff0000; padding: 6px; width: 100%; height: 25px;">  
Myślę, że najważniejsza informacja o mnie, będzie to, że ponad wszystko cenie sobie spokój.
</p>

<p style="width: 400px; margin-left: 80px; padding: 20px 20px 20px 50px; background-color: yellow;"> 
Wasz Kleofas
</p>

Widok:

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:

<head>
<title>Oadzone</title>
<style type="text/css">
.tekst {
    font-family: arial;
    font-size: 25px; 
    color: #ffff00;
    background-color: #ff0000;
    padding: 6px;
    width: 90%; 
    height: 25px;
    }
.podpis {
    width: 400px;
    margin-left: 80px; 
    padding: 20px 20px 20px 50px; 
    background-color: yellow;
    }
</style>
</head>

<body>
<p class="tekst">  
Myślę, że najważniejsza informacja o mnie, będzie to, że ponad wszystko cenie sobie spokój.
</p>
<p class="podpis">  
Wasz Kleofas
</p>
</body>

 

Style zewnętrzne:

to zwykły plik tekstowy z rozszerzeniem .css (np. mojstyl.css), w którym są zapisane definicje stylów. Oznacza to, że wystarczy zdefiniować style w jednym pliku i odwoływać się do niego we wszystkich dokumentach witryny, aby uzyskały one określony, jednakowy wygląd. W części nagłówka dokumentu HTML należy wpisać adres pliku stylu. Do tego celu wykorzystuje się znacznik <link>:

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

 

Przykład mojstyl.css

 

 

Praca z tekstem:

Cały ja, czyli prawda o mnie

Imię: Kleofas
Nazwisko: Słuszny
Miejscowość: Bładzigłowy

Urodziłem się pod koniec wieku. Wszyscy mówia: XX wiek - wiek szalony.
Ja jednak nie zdążyłem tego zauważyć, bo jakoś tak szybko nastał wiek XXI.
Czy ten nowy zasłuży sobie na lepsze miano?

Myślę, że najważniejsza informacja o mnie, będzie to, że ponad wszystko cenie sobie spokój.

Wasz Kleofas

Wygląd tekstu obrobionego:

 Zastosuj styl osadzony.

Utwórz 3 style:

naglowek:

  • czcionka – Times New Roman
  • wielkość: 24px
  • kolor: czerwony
  • grubość (weight) – pogrubiony (bold)
  • wyrównanie: wyśrodkowany

tekst:

  • czcionka: Verdana
  • odległość od lewej 300px (padding)
  • wielkość czcionki: 14px

podpis:

  • wyrównanie: do środka
  • styl czcionki kursywa (italic)

 

Praca z tekstem:

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

Efekt:

Plik css:

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

Sformatuj odpowiednio tekst w html.

Skip to content