Kurs html dla początkujących (1)

Kurs html – samouczek html dzięki któremu poznasz podstawy

Pobierz raport darmowy – podstawowy kurs html

Czym jest język html?  Jest to język który opisuje wygląd zewnętrzny strony internetowej.
Czy przy pomocy  języka html można stworzyć stronę www – odpowiedź brzmi i tak i nie. Obecnie html/css właściwie nie służy do tworzenia stron. Raczej służy do projektowania wyglądu zewnętrznego strony, szaty graficznej, motywów tzw. skórek. Strona taka będzie stroną statyczną.

Obecnie żyjemy w dobie Web 2.0, która ponoć się zbliża do końca ale jeszcze się nie skończyła. Jaka jest różnica między Web 1.0 a Web 2.0?

Strony internetowe Web 1.0 były (i są nadal) tworzone przez webdesignerów, zaś użytkownicy mogli je oglądać czyta i nic więcej. Taką stronę można zrobić przy pomocy html/css.

Web 2.0 są to strony, w którzch tworzeniu  aktywnie biorą udział użytkownicy. Po zalogowaniu sie użytkownik może dodać własną treść do strony. Są to takie serwisy jak:

  • media społecznościowe jak Facebook lub YouTube,
  • social bookmarking np. wykop.pl gdzie ludzie dodają ciekawe linki
  • blogi gdzie oglądający mogą wpisywać własne komentarze
  • i różne inne

Takie strony muszą być oparte o oprogramowanie działające na serwerze, przeważnie napisane w języku php. W tym przypadku html/css tylko tworzy szatę graficzną takiej strony. Dlatego obecnie aby posiadać własną stronę www nie trzeba się uczyć html/css. Wystarczy ściągnąć i zainstalowac oprogramowanie np. wordpress, joomla lub inne.

Jak zrobić stronę www w html
Aby zrobić stronę www wystarczy ją napisać w zwykłym notatnku windows przy pomocy języka html. Strona www posiada  tzw. źródło  – czyli zwykły plik tekstowy, który musi być zapisany z rozszerzeniem .htm lub .html aby przeglądarka odczytała go i wyświetliła jako stronę www.

Żeby się zorientować o co chodzi otwórz sobie dowolną stronę www np. w przeglądarce google chrome, następnie kliknij gdziekolwiek prawym przyciskiem myszy i z opcji, które się pojawią wybierz “wyświetl źródło strony”.
Zobaczysz wtedy zwykły plik tekstowy,  w którym tekst otoczony jest różnego rodzaj znacznikami znajdującymi się w znakach < >. Znaczniki te opisują jak ma wyglądać tekst na stronie www.
Prócz tego znaczniki nic nie robią, tylko mówią przeglądarce jak ma wyświetlać dany tekst lub obrazek.

Ok, od razu zacznijmy eksperymentować. Nie musisz na razie korzystać z serwera, gdyż zwykłą stronę w html możesz zrobić i obejrzeć na dysku. Wystarczy do tego jakiś edytor tekstu – notatnik windows, edit pad, editpad++. W żadnym wypadku nie używaj Worda ani żadnego rozbudowanego edytora tekstu.

Każdy plik tekstowy z rozszerzeniem .htm lub .html zostanie uznany  przez przeglądarkę za stronę www i poprawnie odczytany.

Strony internetowe mogą mieć też rozszerzenie .php ale są to strony korzystające z oprogramowania napisanego w języku php. To oprogramownanie działa na serwerze, dlatego aby taką stronę wyświetlić musisz ją przesłać na serwer obsługujący php lub zainstalować na dysku specjalne środowisko imitujące serwer. Ale to nie jest tematem tego kursu.

Cwiczenie 1
Otwórz notatnik windows, utwórz nowy plik, wpisz w nim cokolwiek np. ala ma kota i zapisz go pod nazwą jakąkolwiek np. index z rozszerzeniem .htm. A teraz otwórz tę stronę w jakiejś przeglądarce. Strona się pojawia i jest na niej twoje zdanie.

A teraz wklej do tego pliku jakiś większy tekst – zrób ładne odstępy miedzy wierszami, zapisz i obejrzyj ponownie.

Tekst jest zbity, bez żadnych akapitów, odstępów itp.

I teraz widzisz do czego są potrzebne znaczniki html/css. Aby tekst ładnie sformatować, zrobić akapity, odstępy, listy punktowane, pogrubienia, kolory itp potrzebne są znaczniki html/css.

Wygląda to tak, że każdy fragment tekstu, ,który chcemy sformatować, musi być otoczony znaczkami. Czyli musi mieć na początku i na końcu znaczniki. Przeglądarka będzie wiedziała, że tekst od znacznika początkowego do znacznika końcowego ma się wyświetlić tak jak tego wymaga dany znacznik.

<znacznik> ala ma kota </znacznik>

Znaczkiki otoczone są < >, zaś końcowy znaczkim ma jeszcze ukośnik </ >.

Ćwiczenie 2
Jakikolwiek fragment tekstu otocz znaczkami <b> a na końcu </b>
Odśwież go w przeglądarce i zobaczysz że ten fragment jest pogrubiony.

Znaczników html jest w gruncie rzeczy dość mało i praktycznie nie da sie zrobić ładnej strony tylko w samym html.
Ponadto wraz z wejściem w życie css, wiele znacznikow wyszło z użycia. One jeszcze pokutują i przeglądarki czytają je, ale praktycznie nie powinno się ich używać.

Co to jest css?
Jest to język opisu znaczników! Każdy znacznik można bardzo dokładnie opisać.

Obowiązuje zasada, że strona www musi zawierać tylko niezbędne elementy, zaś cały opis jej wyglądu znajduje się w osobnym pliku czyli stylach css. Do znaczników dodaje się klasy lub identyfikatory z jakąś nazwą. W pliku style.css te klasy lub idy są opisane. W ten sposób kod strony jest przejrzysty.

 

5 Comments
  1. Witam! Wiedza tu opisana jest w bardzo rzeczowy i przystepny sposob i na dodatek darmowa,pokazana jest rowniez na przykladach tak jak dla mnie laika komputerowego jest to cos wspanialego .Dziekuje bardzo i zycze samych sukcesow!:)

  2. To jest to, czego szukałam: jak krowie na rowie! Super

  3. Narazie jest wszystko ładnie opisane, liczę na to w kolejnych cześciach gdzie będzie pokazane jak zrobić styll.css ( grafike ) chodzi mi o jakieś proste buttony z napisami 😛

  4. Kurs bardzo przedatny, szczególnie dla osób chcących się nauczyć tworzenia stron www

  5. Kurs bardzo przedatny, szczególnie dla osób chcących nauczyć się tworzenia stron www

Leave a reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.