design

Do czego służy HTML i CSS?

Głównym zadaniem języka HTML jest poinformowanie przeglądarki, jak wyświetlać treść na stronie. Chodzi tu o ustalenie, który element ma być listą punktowaną, który nagłówkiem, który obrazkiem, a który zwykłym paragrafem. Do napisania prostej strony internetowej wystarczy nam zwykły edytor tekstowy, ponieważ aby plik był prawidłowo otwierany przez przeglądarkę, wystarczy go zapisać z rozszerzeniem *.html.

Jak to działa?

Przeglądarka internetowa przeszukuje plik, który otwiera i sprawdza, czy istnieją w nim odpowiednie tagi precyzujące rodzaj elementów do wyświetlenia. Następnie sprawdza, czy są zdefiniowane jakieś style, które mówią o zmienionym wyglądzie tych elementów. Jeśli nie, to zawartość pliku zostaje wyświetlona na ekranie monitora w wersji surowej korzystając ze stylów które przeglądarka ma wbudowane.

Stąd, jeśli planujemy dodać na stronie nagłówek i paragraf, elementy te będą się od siebie różnić nawet jeśli wszystko co napiszemy to:

index html raw

1. Surowa wersja pliku, bez żadnych stylów użytkownika.

Szkielet dokumentu HTML i najważniejsze elementy pliku.

Są setki tagów do opisu dokumentu, więc mowa o tych, które są najważniejsze może skończyć się bólem głowy, ale nie zamierzam się tym przejmować. Jeśli mam wybrać najważniejsze elementy dokumentu html, to wybieram te, które są w każdym pliku. Poniżej pokrótce opiszę szkielet dokumentu html, o co chodzi w każdym z elementów i do czego każdy z nich służy.

html scaffold

2. Najważniejsze elementy pliku Html wraz z opisem.

  1. <!DOCTYPE html> – można się domyśleć, że jest to typ dokumentu, który zamierzamy utworzyć. Nas interesuje teraz tylko to, że jest to HTML. Niemniej, może tu się pojawić także XHTML, MathML, DTD i kilka innych. Aktualną listę typów dokumentów można znaleźć na w3c.org.
  2. <head></head> – wewnątrz tych tagów należy precyzować wszystkie informacje o witrynie dla wyszukiwarek i portali społecznościowych, tytuł witryny widoczny w karcie przeglądarki, załączać style css oraz skrypty javScript.
  3. <body></body> – ciało witryny. Jak sama nazwa wskazuje, wewnątrz <body> wszucane jest wszystko, co wyświetlane jest w ekranie przeglądarki.

Style CSS.

Tutaj dopiero do akcji wchodzą style. Kiedy treść strony już jest załadowana, przeglądarka sprawdza, podstawowe style są zmienione. Jeśli tak, bazując na nich dostosowuje wygląd witryny.

Style umieszcza się wewnątrz tagów:

Bazując na przykładzie powyżej, chcąc zmienić wygląd nagłówka i paragrafu wystarczy w dowolnym miejscu na stronie dorzucić tag <style> i opisać wygląd elementów.

Jeśli wpiszesz powyższy kod do swojego pliku html, zapiszesz zmiany i odświeżysz przeglądarkę, nagłówek będzie wyglądał jak paragraf, a paragraf jak nagłówek.

index html styled

3. Zamienione paragrafu i nagłówka.

Pliki zewnętrzne

Na pewno każdy słyszał, o wrzucaniu stylów i skryptów do zewnętrznych plików. Takie rozwiązanie ma kilka bardzo ważnych zalet:

  1. Porządek – po wrzuceniu stylów do osobnych plików, łatwiej jest zarządzać kodem. Nie musisz wtedy przewijać przez setki linii kodu, kiedy chcesz zmienić h1 na h2.
  2. Bezpieczeństwo – Nawet w momencie, gdy przyjdzie nam usunąć plik html i napisać go od początku, style nie przepadną.
  3. Nie powtarzaj kodu – Jeśli masz witrynę składającą się z 5 podstron, to dodając style w każdym z pięciu plików html powtarzasz większość kodu odpowiedzialnego za style. I przy każdej zmianie, choćby i koloru tekstu, musisz wprowadzać te zmiany w każdym z nich. Wyodrębnienie stylów do osobnego pliku pozwala na wykorzystanie tego samego kodu wiele razy.

Aby przenieść style do osobnego pliku, należy utworzyć w tym samym katalogu co dokument html plik *.css i wpisać w części <head> dokumentu ścieżkę dostępu do niego, dzięki czemu przeglądarka będzie wiedziała, skąd pobrać style przy ładowaniu strony:

„rel” (ang. relative) – informuje przeglądarkę z jakim typem liku mamy do czynienia, a „href” to względna ścieżka dostępu do pliku.

Kiedy masz już utworzony plik, przenieś kod zawarty wewnątrz znaczników <style></style> do pliku *.css. Od tej pory wszystkie zmiany powiązane z wyglądem umieszczaj w osobnym pliku, zaś w HTML umieszczaj tylko zawartość witryny.

Klasy i identyfikatory.

Podczas tworzenia dokumentu, dość szybko się zdarzy, że będziesz potrzebować bardziej sprecyzowanych stylów. Na przykład chcąc wyświetlić komunikat o prawidłowym zakończeniu jakiejś akcji, dobrze będzie ustalić kolor tekstu na zielony, jednak wyświetlając komunikat o błędzie, intuicyjnym kolorem jest czerwony. Wykorzystam do tego tag <span>.

Niestety stylizując jedynie element <span> style zawsze będą się odwoływać do obu z nich. Aby nadać im osobne style, należy je jakoś odróżnić, na przykład nadając różne klasy.

Od teraz możesz zmienić style każdego z nich, definiując wygląd nie na podstawie nazw tagów, ale nazw klas.

Kropka przed nazwą klasy oznacza, że stylizujemy właśnie klasę. Znak # przed nazwą oznacza style dla identyfikatora. Powyższy przykład można zapisać też w ten sposób:

ID versus CLASS

Podstawową różnicą identyfikatora i klasy jest to, że dla przeglądarki ID jest ważniejsze. Dodatkowo na stronie powinien być tylko jeden element o danym ID, zaś elementów z tą samą klasą może być wiele. Dlatego dla powyższego przykładu klasa sprawdzi się lepiej.

Oto cała teoria, którą powinien znać każdy, kto chce zostać projektantem witryn internetowych. Całkowite podstawy HTML oraz języka CSS. Opisałem szkielet dokumentu html, dodawanie stylów do pliku, oraz klasy i identyfikatory elementów.

Jeśli przez to przebrnęliście zapraszam na ZADANIE NR 1 . – GRID SYSTEM.

A jeśli artykuł się podobał lub jeśli masz pytania, to zostaw komentarz poniżej, udostępnij, polub, albo po prostu czytaj dalej :).

Pin It on Pinterest

Share This
Sekrety Produktywności

Sekrety Produktywności

DARMOWE szkolenie mailingowe! 10 porad jak zwiększyć produktywność w programowaniu.

Dziękujemy za zapisanie się na kurs. Wkrótce otrzymasz wiadomość email z potwierdzeniem zapisu.

FreshMail.pl