Podstawy HTML i CSS

Kto i jak tworzy strony internetowe ?

Strony internetowe tworzy programista (webmaster). Praca webmastera polega na pisaniu kodu źródłowego strony, czyli przy pomocy określonego języka programowania opisuje zestaw instrukcji jakie powinna wykonać przeglądarka, komputer czy serwer. Wszystkie strony internetowe są tworzone przy użyciu języków HTML i CSS. Przeglądarki WWW są programami, które interpretują kod strony WWW napisany w HTML i CSS i wyświetlają zawartość na ekranach, w sposób przystępny dla człowieka, według instrukcji napisanych przez programistę.

 

Tak wygląda podstawowy kod źródłowy strony internetowej widziany oczami programisty

 

 

A tak wygląda strona po przetworzeniu kodu źródłowego strony przez przeglądarkę

 


HTML i CSS

Istnieje kilka wersji języków HTML i CSS. Obecnie najnowszymi wersjami obu tych języków jest HTMl5 i CSS3.

HTML (HyperText Markup Language) – hipertekstowy język znaczników. Znacznik jest to specjalny tekst, umieszczony w nawiasach ostrych. Za pomocą znaczników HTML opisujemy strukturę strony.

 

Analiza znaczników

 

 

Poszczególny znacznik składa się z znacznika otwierającego oraz znacznika zamykającego. Każdy znacznik przekazuje przeglądarce WWW pewne informacje. W tym przypadku znacznikiem (elementem) jest h1. Element h1 oznacza największy nagłówek na stronie. Tekst pomiędzy znacznikiem otwierającym a zamykającym będzie interpretowany jako nagłówek.

 

Znacznik (tag) otwierający – budowa

<h1>

  • lewy nawias kątowy (znak mniejszości)
  • znak (w tym przypadku h1, oznaczający największy nagłówek)
  • prawy nawias kątowy (znak większości)

Znacznik (tag) zamykającybudowa

</h1>

  • lewy nawias kątowy (znak mniejszości)
  • znak ukośnika
  • znak (w tym przypadku h1, oznaczający największy nagłówek)
  • prawy nawias kątowy (znak większości)

 


 

CSS (Cascading Style Sheets) – Kaskadowe arkusze stylów, język pozwalający tworzyć reguły określające wygląd elementów na stronie. Za pomocą CSS możemy określić kolor tła, rozmiar czcionki czy ukrywać elementy na stronie.

 

Analiza reguł CSS

 

 

Reguły CSS składają się z dwóch części: selektora i deklaracji. Z kolei deklaracje składają się z właściwości i wartości.

  • Selektor – określa do jakiego elementu odnosi się reguła
  • Deklaracja – wskazuje w jaki sposób przeglądarka ma wyświetlić na stronie element.
  • Właściwość – wskazuje konkretny aspekt wyglądu elementu, który chcemy oscylować (np. tło)
  • Wartość – wskazuje konkretnie ustawienie wybranej właściwości  (np. czerwony)

W powyższym przykładzie odnosimy się selektorem do elementu body, czyli do ciała strony. Pomiędzy parą nawiasów klamrowych zapisujemy deklarację. Deklarujemy wygląd właściwości „background-color”, czyli wygląd koloru tła. Po dwukropku zapisujemy konkretną wartość właściwości w naszym przypadku jako „red”, czyli czerwony.

 

Efekt naszej deklaracji.

 

 

Możemy przypisać kilka deklaracji jednemu selektorowi. Należy wtedy pamiętać by były one oddzielone od siebie średnikiem.

 

Przykład kilku deklaracji oddzielonych średnikiem

 

W powyższym przykładzie przypisaliśmy selektorowi body dwie deklaracje. Pierwsza odnosi się bez zmian do koloru tła, druga zaś do koloru czcionki.

 

Oto co zobaczymy teraz na stronie

 

 

Prawda, że łatwe ? 🙂

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *