Kurs HTML – Podstawy :: Lekcja 3

Kurs HTML – Podstawy :: Lekcja 3
27 Nov 2013

Witam po długiej przerwie, niestety nie było czasu na wypuszczenie kolejnych lekcji kursu, stąd to opóźnienie… Bez zbędnych tłumaczeń przejdźmy do kolejnej lekcji kursu w której uruchomimy sobie stronę “Hello World” i omówimy komentarze w HTML i CSS. Serdecznie zapraszam  😉

W poprzedniej lekcji omówiliśmy sobie najważniejsze elementy sekcji <head>. Skopiujmy sobie kod z ostatniej lekcji i zapiszmy go w nowym pliku, powiedzmy hello_world.html. Dla przypomnienia podaję kod

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8" />
	<title>Tytuł strony</title>
	<meta name="keywords" content="słowa kluczowe" />
	<meta name="description" content="opis strony">
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>

</body>
</html>

 

Po wywołaniu takiej strony oczywiście zobaczymy pusty ekran, bo nic nie dodaliśmy. Jak już wiesz, treści w języku HTML wpisujemy pomiędzy znacznikami <body> </body>  Wpisz teraz przykładową treść, powiedzmy “Witaj świecie”, zapisz i otwórz nasz plik za pomocą przeglądarki… Na ekranie zostanie Ci wyświetlony ten że napis.

 

Ok, skoro mamy już naszą stronę w HTML, przejdźmy do następnej części dzisiejszej lekcji, czyli do CSS’a. Utwórzmy sobie kolejny plik. Nazwijmy go style.css. Plik na razie jest pusty, za chwilę zajmiemy się jego wypełnianiem. Zanim to nastąpi, musimy go zaimplementować do naszej strony. Przejdźmy więc do pliku hello_world.html i dodajmy przed znacznik </head> Następujący kod:

<link rel="stylesheet" href="style.css">

Za pewne domyślasz się co zrobiliśmy, jeśli masz problem z odczytaniem tego kodu to już wyjaśniam. Tag <link> określa relację pomiędzy dokumentem a zasobem zewnętrznym, czyli naszym plikiem CSS i najczęściej służy właśnie do tego celu. Atrybut rel określa właśnie tą relację. Jest wymagany. atrybut href określa ścieżkę, czyli lokalizację do pliku stylów, czyli do naszego style.css. Z racji tego, że jest on w tym samym katalogu, wpisujemy po prostu jego nazwę. Dokładny opis tego znacznika znajdziesz tu: http://www.w3schools.com/tags/tag_link.asp

 

Ok, mamy już stworzony i dodany plik CSS. Zajmijmy się teraz jego wypełnieniem. Otwórzmy sobie plik style.css i wklejmy ten przykładowy kod:

html,body{
	margin:0;
	padding:0;
	font-size:28px;	
	color: red;
}

Jeśli jest Ci to mało znane kod poniżej powinien wyjaśnić ci dokładnie co ten kod robi.

selektor{
	właściwość: wartość;
	właściwość1: wartość1;
}

Ok. Zapisz zmiany i odśwież stronę. Jak widzisz strona została pozbawiona marginesów, wcięcia, napis nam znacznie urósł a kolor tekstu zmienił się na czerwony.

 

Wiesz jak już dodawać tekst do strony, umieszczać pliki css, wprowadzać w nich zmiany. Teraz przyszła pora na komentarze. Dlaczego jest to ważne? Ponieważ tworząc stronę dobrze się nimi wspierać aby nie pogubić się, nie popaść w chaos, czy też aby zostawić notkę dla kolejnego programisty. Jest to bardzo prosta sprawa, gdyż zarówno w HTML jak i CSS mamy tylko po 1 znaczniku komentarza.

W HTML’u wygląda to następująco:

<!-- To jest komentarz. Nie jest on wyświetlany na stronie, lecz w źródle -->

To jest zwykła treść

A w CSS’ie tak

/* To jest komentarz */
body{
	font-size:20px;
}

I tyle 🙂

Mam nadzieję, że już rozumiesz podstawowe zagadnienia z zakresu tworzenia plików HTML i CSS. Przed nami jeszcze długa droga i wątpię, że będę wszystko dokładnie omawiał. Tak więc jeśli czegoś nie zrozumiesz, to odsyłam cię na stronę http://www.w3schools.com/tags/default.asp, gdzie możesz przeczytać sobie wszystko na temat znaczników w języku HTML, ich tworzenia i edycji. W następnej lekcji zajmiemy się formatowaniem tekstu, a już teraz zapraszam Cię do zostawienia opinii bądź komentarza na temat tego wpisu, lub zadania pytania jeśli jakieś masz 🙂

Do usłyszenia w kolejnej lekcji