Poradnik dla początkujących
Ten post jest dla Aleksander K żeby miał 100000000000000 wejść na bloga.
Czego nauczysz się w tym tutorialu?
Podstaw HTML, CSS i JavaScriptu, których używa się do tworzenia stron internetowych. Można tego użyć także do projektowania różnych gadżetów/pluginów na bloga jeśli niektórzy z was byli by zainteresowani ;)
Czy to trudne?
Opisałem wszystko tak szczegółowo, że aż sam się dziwię do jakiego poziomu ja się zniżam xD Więc nie.
Co będzie potrzebne
- Dowolny program który potrafi edytować i zapisywać tekst. Osobiście do edycji HTML lubię Sublime Text 2 albo Visual Studio
- Przeglądarka (np. Firefox, Chrome, IE)
Pomoc:
- PPM znaczy: Prawy Przycisk Myszy, co z kolei oznacza, że musisz kliknąć PPM na coś ;)
- Żeby utworzyć plik tekstowy, wystarczy kliknąć PPM (np. na pulpit) wybrać z menu Nowy -> plik tekstowy.
- Żeby otworzyć plik w przeglądarce, kliknij na niego PPM -> otwórz za pomocą -> [wybierz jakiś program, np. firefox]
- Zeby edytować plik tekstowy, kliknij na niego PPM -> otwórz za pomocą -> [wybierz jakiś program, np. notatnik, Sublime Text 2 itp.]
- Rozszerzenie to część nazwy pliku występująca po kropce. W pliku "sciaganamatme.txt" rozszerzeniem będzie txt. Żeby zmienić rozszerzenie, wystarczy kliknąć PPM i wybrać z menu "zmień nazwę" i zmienić tekst po kropce.
Krok 1: HTML
HTML to w skrócie język, używany do projektowania szkieletu strony.
W Windowsie, żeby utworzyć plik HTML, wystarczy że utworzysz dokument tekstowy i zmienisz rozszerzenie na “.html” (napisałem jak to zrobić wyżej w dziale "Pomoc").
Możesz teraz otworzyć ten plik w dowolnym edytorze tekstu (pomoc wyżej) i wkleić ten kod:
<html>
<body><!-- To jest komentarz. Nie pojawi się on w przeglądarce. Możesz tu sobie pisać co chcesz (jakieś notatki np) -->
<h1>Moja pierwsza strona WWW</h1>
Jakis losowy tekst
</body>
</html>
Żeby zobaczyć efekt, otwórz ten plik za pomocą dowolnej przeglądarki internetowej.
Powinno to wyglądać tak:
Krok 2: jak to działa?
Utworzony przez ciebie plik, to nic innego jak zbiór instrukcji. Tak jak np. w przepisie na ciasto, żeby osiągnąć zamierzony efekt, trzeba wykonać wszystkie instrukcje po kolei. Ty piszesz, "przepis na stronę", przeglądarka natomiast wykona, linijka po linijce, wszystko co jej każesz.
Żeby wszystko było jasne: <html> to znacznik. Istnieją dwa rodzaje znaczników:
Wyobraź sobie przepis na dekorację tortu. W HTML'u wyglądałoby to tak:
<górna_część_tortu>
<napis>Wszystkiego najlepszego</napis>
<swieczka>1</swieczka>
<swieczka>2</swieczka>
</górna_część_tortu>
Wytłumaczę wszystko linijka po linijce:
Wróćmy więc do kodu, który wstawiłeś w punkcie 1 wkleić do pliku HTML. Oto co robią poszczególne znaczniki:
Żeby wszystko było jasne: <html> to znacznik. Istnieją dwa rodzaje znaczników:
- <jakas_nazwa> - rozpoczęcie wykonywania instrukcji
- </jakas_nazwa> - zakończenie
Wyobraź sobie przepis na dekorację tortu. W HTML'u wyglądałoby to tak:
<górna_część_tortu>
<napis>Wszystkiego najlepszego</napis>
<swieczka>1</swieczka>
<swieczka>2</swieczka>
</górna_część_tortu>
Wytłumaczę wszystko linijka po linijce:
- Informujemy, że interesuje nas górna część tortu
- Informujemy, że chcemy dodać napis, wpisujemy treść, po czym kończymy operację dodawania napisu (znacznikiem ze znaczkiem "/" (slash))
- Jako że to 12 urodziny, chcemy dodać świeczki-numerki, więc wstawiamy tą przedstawiającą numer 1
- a potem numer 2
- Nie zamierzamy już nic więcej wstawiać, więc kończymy akcję
Wróćmy więc do kodu, który wstawiłeś w punkcie 1 wkleić do pliku HTML. Oto co robią poszczególne znaczniki:
- <html> - informujesz przeglądarkę że odczytuje plik HTML
- <body>- informujesz, że chcesz wyświetlić jakieś rzeczy. Wszystko co napiszesz po tym znaczniku, będzie widoczne dla użytkownika twojej strony (z wyjątkiem komentarzy)
- <!-- - komentarz. Jeżeli przeglądarka to odczyta, pominie wszystko, dopóki nie zobaczy tego: “-->”. Tutaj możesz sobie pisać co chcesz, tu będą się znajdowały informacje dla ciebie.
- <h1> - tekst który pojawi się po tym znaczniku będzie pisany dużą czcionką
Pisałem przed chwilą, że <body> oznacza że przeglądarka ma zacząć rysować. Używając </body> informujemy że już nie chcemy tego robić. Kończymy działanie tego znacznika. To samo tyczy się wszystkich innych. Pisząc <h1> chcemy żeby tekst był napisany dużą czcionką, kiedy użyjemy </h1>, informujemy że już tego nie chcemy.
Każdy znacznik musi mieć swój koniec, musi być kiedyś zamknięty. Inaczej przeglądarka wywali błąd.
Spróbuj wpisać jakiś tekst między znacznikami <h1> oraz wpisz coś poza nimi. Zapisz plik i otwórz w przeglądarce. Zauważysz, że to co wpisałeś między <h1>, w przeglądarce widnieje jako duży tekst. To co napisałeś poza nim, jest małym tekstem (nie kazałeś nic zrobić przeglądarce, więc użyła ustawień domyślnych)
Spróbuj wpisać jakiś tekst między znacznikami <h1> oraz wpisz coś poza nimi. Zapisz plik i otwórz w przeglądarce. Zauważysz, że to co wpisałeś między <h1>, w przeglądarce widnieje jako duży tekst. To co napisałeś poza nim, jest małym tekstem (nie kazałeś nic zrobić przeglądarce, więc użyła ustawień domyślnych)
Krok 3: ułatwianie sobie życia
Wszystkie popularne przeglądarki mogą ci pomóc w tworzeniu strony WWW. Otwórz w przeglądarce plik HTML który utworzyłeś (PPM na pliku, otwórz za pomocą...). Jeżeli używasz Firefoxa, wciśnij Ctrl+Shift+K, jeżeli Chrome - Ctrl+Shift+C.
Używając Firefoxa zobaczysz coś takiego:
To jest narzędzie dla programisty. Zobaczysz tam kod swojej strony. Kliknij np. na <h1>, a zobaczysz że przeglądarka podświetli tekst napisany dużą czcionką. Możesz kliknąć w każdą część tego kodu, dzięki temu możesz zobaczyć jak co działa. Przeglądarka zawsze wskaże ci co narysowała, zaraz po tym jak zobaczyła tą linijkę kodu.
Jeżeli chcesz zobaczyć jak działa jakiś obiekt na stronie, ale nie wiesz gdzie znajduje się w kodzie, kliknij na przycisk który zaznaczyłem numerem 1, a następnie na dowolny obiekt.
To narzędzie działa na każdej stronie WWW, więc bez problemu możesz podpatrzyć jak działają profesjonalne strony i podwędzić im fajne rozwiązania ;)
Krok 4: atrybuty znaczników
Każdemu znacznikowi możesz przypisać atrybuty, żeby dostosować go do swoich potrzeb. Przykładowo:
<font color="blue">Ten tekst jest niebieski</font>
Tworzymy znacznik. <font> informuje że będziemy coś zmieniać w czcionce tekstu. Dodaliśmy tu atrybut color. Poinformowaliśmy przeglądarkę, że color jest równy “blue”, co oznacza że chcemy żeby był niebieski. Możemy używać dowolnych kolorów (po angielsku).
Pamiętaj, żeby tekst się wyświetlił, musisz wkleić tą linijkę wewnątrz <body> </body> (logiczne: wpisując <body> każesz przeglądarce wyświetlać rzeczy. Jeśli nie powiesz przeglądarce że ma coś wyświetlić, uzna że nie chcesz tego robić, więc tego nie wyświetli)
Atrybutów może być bardzo dużo, np.:
<font id="jakistekst" size="12" color="red">Tekst</font>
I mogą pojawiać się w dowolnej kolejności
Krok 5: co dalej?
Oczywiście na tym możliwości się nie kończą ;) Twój tekst możesz kolorować, pogrubiać, pochylać, możesz tworzyć tabelki, wstawiać obrazki. Jak to zrobić? Istnieje dużo stron ze spisami funkcji. Przykładowo ta strona jest po polsku. W rozwijanym menu, możesz wybrać co chcesz osiągnąć, a strona podpowie jakich znaczników powinieneś użyć. Tutaj możesz wybrać sobie dowolny znacznik i poczytać co on może zrobić. Wejdź na tą stronę i obejrzyj sobie znaczniki i ich działanie. Każdego z nich możesz wstawić do twojej strony www (do twojego pliku html).
PS: jak coś jest źle to piszcie
PS: jak coś jest źle to piszcie
Łoł, niesamowity post, ten autor to geniusz :P
OdpowiedzUsuńTen komentarz został usunięty przez autora.
UsuńNic kompletnie nie rozumiem. Za trudne. 0 gifów, 0 wszystkiego. Źle zrobiłeś ten poradnik. Napisałeś "poradnik dla początkujących", a dla mnie początkującego jest jak poradnik dla zaawansowanych ☺
UsuńChcemy więcej
UsuńŚwietny wpis, muszę częściej zaglądać na ten blog :*
OdpowiedzUsuńPanie Piotrze, niestety zamieszczone w poradniku obrazy są zbyt szerokie w porównaniu do wymiarów bloga, proszę nad tym popracować kolejnym razem, ponieważ moje oczy płaczą.
OdpowiedzUsuń