Kurs HTML CSS

Najważniejsze zagadnienia

(X)HTML (eXtended HyperText Markup Language) to system znaczników definiujących elementy na stronie i tworzących strukturę dokumentu do użycia w Internecie. HTML pozwala opisać strukturę informacji zawartych wewnątrz strony internetowej, nadając znaczenie poszczególnym fragmentom tekstu – formując hiperłącza, akapity, nagłówki, listy – oraz pozwala na osadzanie w tekście dokumentu obrazków lub multimediów. Do szczegółowego opisu formatowania akapitów, nagłówków, użytych czcionek i kolorów, zalecane jest wykorzystywanie kaskadowych arkuszy stylów. Pozwala to na rozdzielenie struktury dokumentu od jego formatowania. Ważną cechą HTML-u, która przyczyniła się do popularności systemu WWW oraz Internetu, jest niezależność od systemu operacyjnego i wykorzystywanego sprzętu komputerowego.

Typy znaczników języka HTML

Strukturalne
opisują logiczną strukturę tekstu, np. <h2>Golf</h2> nadaje znaczenie wyrazowi „Golf” i traktuje go jako nagłówek drugiego stopnia. Podczas renderowania (wyświetlania) zostanie on zaprezentowany przez przeglądarkę w sposób wyróżniony (np. większą i pogrubioną czcionką).
Znaczniki strukturalne nie definiują sposobu wyświetlania elementu, jednak większość przeglądarek ma wbudowane style, których domyślnie używa, gdy do dokumentu nie jest dołączony żaden kaskadowy arkusz stylów CSS.
Prezentacyjne
opisują wygląd poszczególnych elementów, np. <b>lama</b> powoduje, że „lama” zostanie wyświetlona pogrubioną czcionką. Nie daje jednak żadnych wskazówek urządzeniom nie potrafiącym wyświetlić pogrubionego tekstu (takim jak syntezatory mowy, czytający daną stronę na głos). W przypadku <b>pogrubienia</b> oraz <i>pochylenia</i> istnieją równoważne znaczniki, mające podobną lub taką samą formę wizualną, ale posiadające naturę semantyczną. Są to odpowiednio <strong>silne wzmocnienie znaczenia</strong> oraz <em>wzmocnienie znaczenia</em>. W tym przypadku łatwiej określić zachowanie syntezatora mowy podczas interpretacji takich znaczników np. poprzez mocniejsze zaakcentowanie danego wyrażenia.
Znaczniki semantyczne nie są jednak stuprocentowymi odpowiednikami znaczników prezentacyjnych. Istnieją sytuacje, gdy tylko wizualnie chcemy wyróżnić daną część tekstu. Nie jest pożądane, aby syntezator mowy wzmacniał znaczenie np. tytułu książki w trakcie czytania strony, podczas gdy wizualnie warto byłoby taki tytuł wyróżnić czcionką pochyłą dla poprawienia czytelności tekstu.
Większość znaczników prezentacyjnych w specyfikacji HTML 4.0 oznaczono jako przestarzałe na rzecz kaskadowych arkuszy stylów CSS.
Hipertekstowe
zawierają linki do innych dokumentów lub innych części tego samego dokumentu. HTML aż do wersji XHTML 1.1 wymaga do utworzenia hiperłącza elementu o nazwie anchor (kotwica), zapisywanego w postaci: <a>Wikipedia</a>. Oprócz tego atrybut href musi zwierać poprawny adres URL. Następujący kod HTML <a href=”http://pl.wikipedia.org/”>Wikipedia</a> wyświetli ciąg znaków „Wikipedia” jako hiperłącze.

CSS

CSS (Cascading Style Sheets) został stworzony w celu oddzielenia struktury dokumentu od formy jego prezentacji. Separacja ta zwiększa zakres dostępności witryny, zmniejsza zawiłość dokumentu oraz ułatwia wprowadzanie zmian w strukturze dokumentu. CSS ułatwia także zmiany w renderowaniu strony w zależności od obsługiwanego medium (ekran, palmtop, dokument w druku, czytnik ekranowy). Stosowanie zewnętrznych arkuszy CSS daje możliwość zmiany wyglądu wielu stron jednocześnie bez ingerowania w sam kod (X)HTML, ponieważ arkusze stylów mogą być wspólne dla wielu dokumentów.

Umieszczanie stylów w dokumencie

Styl wewnątrzliniowy

Metoda inline (styl wewnątrzliniowy), nie jest polecana, ponieważ jest to styl o dużej ważności i nie można go przesłonić ani stylami zagnieżdżonymi w nagłówku, ani stylami zewnętrznymi.

Przykład:

<p style="color:blue;">Akapit na niebiesko</p>

Arkusz zagnieżdżony

Jest to arkusz umieszczony wewnątrz znacznika style w części nagłówkowej strony (wewnątrz znacznika <head>) Jego formatowanie przesłania style zewnętrzne i obejmuje cały dokument, o ile nie jest przesłonięte stylami śródliniowymi.

Przykład:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Przykład działania CSS</title>
		<!-- początek stylu zagnieżdżonego... -->
		<style type="text/css">
			p {font-weight:bold;}
		</style>
		<!-- ...a tu jego koniec -->
	</head>
	<body>
		<p>Paragraf pogrubiony przez arkusz zagnieżdżony.</p>
	</body>
</html>

Arkusz zewnętrzny

Najbardziej zalecany. Polega na umieszczeniu definicji stylów w oddzielnym pliku o rozszerzeniu .css, a w dokumencie go używającym umieszczeniu instrukcji importującej w części nagłówkowej strony.

W HTML arkusz zewnętrzny jest dołączany przez element <link>. Ma on trzy atrybuty: rel informuje przeglądarkę o rodzaju linkowanego zasobu, type wskazuje rodzaj arkusza stylu. Atrybut href zawiera adres URL zewnętrznego arkusza stylów.

<head>
	<title>Przykład działania CSS</title>
	<link rel="stylesheet" type="text/css" href="styl.css" />
</head>

Innym, nowszym sposobem jest skorzystanie z dyrektywy @import w arkuszu zagnieżdżonym w nagłówku <head>:

<style type="text/css">
	@import url('styl.css');
	/* pozostałe atrybuty */
</style>

Zaletą takiego rozwiązania jest kompletne oddzielenie kodu zawartości od wyglądu. Ponadto przypisanie jednego arkusza do wielu dokumentów oznacza łatwiejszą kontrolę nad wyglądem całości serwisu. Wystarczy zmodyfikować jeden plik .css a znajdzie to odbicie we wszystkich dokumentach w których jest dołączony.

Arkusz stylów

Na bardzo ogólnym poziomie, plik CSS składa się z listy selektorów oraz przyporządkowanych do nich stylów.

selektor {własność/atrybut: wartość;}
body {background-color: green;}

Między klamrami, po selektorze, definiujemy styl elementu. Opisujemy go ciągami: atrybut – wartość. Wartości atrybutom przypisuje się znakiem dwukropka. Należy jednak pamiętać by po przypisaniu wartości parametrowi np.

font-weight: bold

oddzielić go od kolejnych wartości średnikiem

font-weight:bold;

w przeciwnym przypadku dalszy ciąg pliku zostanie potraktowany jako wartość tego elementu. Najlepiej po każdym średniku przejść do nowej linii – zwiększy to czytelność pliku i ułatwi późniejsze modyfikacje.

p	{
	font-weight: bold;
	font-family: verdana, arial, sans-serif;
	color: navy;
	}

Dziedziczenie

W typowym arkuszu stylów nie przypisuje się wszystkich właściwości wszystkim elementom (np. ustawia się preferowany krój liter tylko dla <body>). Pozostałe elementy otrzymują swoje właściwości przez dziedziczenie, czyli przekazanie właściwości z elementu-rodzica do elementu-dziecka. Ale nie wszystkie właściwości są domyślnie dziedziczone. Dziedziczone są m.in. krój liter i wielkość pisma, ale tło i obramowanie — już nie. A niektóre elementy (takie jak znacznik a) nie dziedziczą większości formatów po elementach-rodzicach.

Kaskada

Od kaskady pochodzi nazwa Cascading Style Sheet. Kaskadowość definiuje hierarchię źródeł stylów. W pierwszej kolejności brane są pod uwagę style pochodzące z arkusza zewnętrznego. Te z kolei mogą zostać nadpisane przez style zdefiniowane w arkuszu zagnieżdżonym. Style zdefiniowane ‚inline’ znajdują się na końcu tego „łańcuszka”, jako znajdujące się najbliżej opisywanego elementu strony. Jeśli kilka reguł pasuje do danego elementu w dokumencie, to właściwości z najważniejszych reguł przykryją właściwości z mniej ważnych.

Kolory

red  - czerwony (nazwa koloru z palety kolorów bezpiecznych WWW)
navy - granatowy
rgb(10,250,0) - jasny odcień zieleni w zapisie RGB (red, green, blue)
rgb(0,0,0) - czarny
rgb(255,255,255) - biały
#ffffff - biały (zapis szesnastkowy pełny)
#fff    - biały (zapis szesnastkowy skrócony)
#000000 - czarny (zapis szesnastkowy pełny)
#000 - czarny (zapis szesnastkowy skrócony)
#F0D01F - złoty (zapis szesnastkowy pełny, bez możliwości skrócenia)

Model pudełkowy (polowy, blokowy)

Dla elementów CSS generowane są bloki, które składają się z: zawartości elemetu, marginesu (zewnętrznego), obramowania i marginesu wewnętrznego (dopełnienia). Szerokości marginesu, obramowania i dopełnienia są dodawane do szerokości elemenu. Przykład: utworzyliśmy akapit o szerokości 400px i dołożyliśmy mu margines 10px (ze wszystkich stron), ramkę grubości 1px i dopełnienie (margines wewnętrzny) szerokości 5px. Całkowita szerokość akapitu wynosi 400px+10px*2+1px*2+5px*2=432px. Ma to znaczenie przy budowaniu układów elementów na stronie.

Opływanie elementów

Elementy blokowe mogą być olywane przez następujące po nich elementy. Opływanie uzyskuje się przez użycie właściwości float: left/right;. Element zbliża się do wybranej krawędzi ekranu, a pozostałe elementy opływają go.

Wyłączanie otaczania można uzyskać przez clear: both;

Klasy

Klasy pozwalają na różnicowanie elementów. Możemy przypisywać klasy do konkretnych znaczników HTML lub tworzyć klasy niezwiązane, które można przypisac do każdego elementu.

Przykład klasy:

p.podpis {color: navy;}
.wyroznienie (font-weight: bold;)

Wywołanie klasy w html:

<p>To jest wyrózniony akapit</p>

Identyfikatory

Identyfikatory – podobnie jak klasy – pozwalają na róznicownaie elementów. Z tą róznica jednak, że o ile klasy w jednym dokumencie moga sie wielkorotnie powtarzać, to identyfikator powinien być niepowtarzalny i wskazywać na tylko jeden element. Dość powrzechnie uzywa się identyfikatorów w połączeniu ze znacznikiem div do budowania układów dokumentów.

Przykład identyfikatora:

h1#tytul {color: red;}
#stopka (font-weight: bolder;)

Wywołanie identyfikatora w html:

<h1 id="tytul">To jest akapit tytułowy</h1>

listy

dl Lista definicji

Lista definicji jest dwupoziomową listą, pozwalajaca na dość wygodne objaśnienie terminów (np. słownikowych). W skład listy wchodzą znaczniki dl (otwierajacy i zamykający), dt (termin do opisania) i dd (wyjaśnienie terminu).

ul Lista punktowana (nieuporządkowana) i ol Lista numerowana (uporządkowana)

Listy: punktowana i numerowana mają identyczną strukturę i różną się jedynie znakiem wypunktowania akapitów. W liście ul sa to zwykle kropki (za pomoca stylów mozna przypisać inny znak); w listach ol (numerowanych) akapity sa oznaczonen numerami arabskimi. Ale równiez można bez problemu zmieniać rodzaj numeracji. W obydwu tych listach akapity punktowane/numerowane oznacza się znacznikiem li.

Tagi , , , , , .Dodaj do zakładek Link.

Komentarze są wyłączone.