Jak to zrobić w HTML-u i CSS?
Temat: Jak to zrobić w HTML-u i CSS?
- Programy do tworzenia stron internetowych.
- Struktura dokumentu HTML.
- Definiowanie styli w dokumencie HTML.
- 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 (bold)
<i> – pochylenie tekstu (italic)
<u> – podkreślenie tekstu (underline)
<strike> – przekreślenie tekstu
<margin> – margines
<sup> – indeks górny
<sub> – indeks dolny
<big> – duża czcionka
<small> – mała czcionka
<center> – wyśrodkowanie elementu
<font-size> – wielkość czcionki
<font-family> – krój czcionki
<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
Zastosuj:
– porubienia (b)
– kursywa (i) (italic)
– margines (margin:100px)
– kolor (color)
– czcionki – arial, verdana oraz Monotype Corsiva
– nagłówek (h1)
– wielkość czcionki wg akapitu: imię: 20px, urodziłem: 24px, Myślę: 24px, wasz: 20px
Użyj atrybutu style, który umieszczamy wewnątrz znaczników np:
<p style="font-size: 25px; font-family: Arial;"> jakiś tekst </p>
Wygląd tekstu obrobionego:
Dla chętnych
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)
koniec
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.
