Tym wpisem rozpoczynamy nową serię na temat technologii internetowych. Sami byliśmy początkującymi, dlatego znamy waszą perspektywę. Z tego powodu chcemy wam przekazać wiedzę w najbardziej przystępny sposób. Przeczytajcie artykuł i stwórzcie swoją pierwszą stronę internetową!
We wpisie między innymi:
- Struktura strony HTML
- Podstawowe tagi HTML
- Praktyczny przykład
Na końcu podaliśmy przykładowe pytania. (FAQ)
HTML – (ang. HyperText Markup Language) Każdy podstawowy plik HTML musi mieć rozszerzenie .html. Dodatkowo wymyślono nazwę dla pliku, dzięki której ten jest wyświetlany jako pierwszy przez przeglądarkę – index. Cała nazwa z rozszerzeniem wygląda następująco – index.html
Wewnątrz tego pliku musi znajdować się kod zaprezentowany poniżej.
Od razu możemy zauważyć specyficzny zapis w ostrych nawiasach <>. Są to tagi, które dzielimy na otwierające <html> i zamykające </html>. Dzięki takiemu zapisowi widzimy, gdzie dany element się zaczyna, a gdzie kończy. Właściwy kod umieszczamy pomiędzy tymi tagami.
<DOCTYPE html> – nie zalicza się do tagów, chociaż wygląda bardzo podobnie. Jest to instrukcja dla przeglądarki internetowej (np. Chrome, Opera, Mozilla itd.) o wersji html, w której wykonana jest strona.
<html></html> – między tymi tagami zawiera się cała nasza strona.
<head></head> – (ang. Głowa) między nimi stawiamy wszystko to, czego nie widać na stronie, ale w pewien sposób steruje stroną. Wyjątkiem od reguły wyświetlania jest tag <title></title>, który określa tytuł strony. Widoczny jest na zakładce (chrome).
<body></body>– między nimi stawiamy całą treść naszej strony.
- Oprócz wymaganych tagów, mamy również inne, z których możemy korzystać. Rozdzielimy to na dwie grupy. W jednej będą tagi, które umieszczamy między znacznikami otwierającym <head> i zamykającym </head>. W drugiej natomiast tagi, które postawimy między znacznikami otwierającym <body> i zamykającym </body>.Grupa <head>:<meta> – w tym tagu umieszcza się pewne ustawienia dla przeglądarki. Ten tag nie ma znacznika zamykającego, dlatego definiujemy swoje właściwości w tzw. atrybutach. Jednym z przykładów może być charset, który ustala kodowanie znaków. W tym wypadku wartość to UTF-8 – podaje się ją w cudzysłowiu. Dzięki takiemu zapisowi, przeglądarka będzie poprawnie wyświetlać polskie znaki.<meta charset=”UTF-8″>**(Sam możesz sprawdzić co się stanie kiedy nie dodamy tego tagu, a umieścimy na naszej stronie polskie znaki.)Grupa <body>:<p></p> (ang. Paragraph) między nimi umieszczamy akapit tekstu*
*W HTML5 czasami możemy pominąć tag zamykający </p>. Stwarza to problemy, dlatego zaleca się stawiać również zamykający tag.
<h1></h1> (ang. Heading) między nimi umieszczamy nagłówek. Cyfra (możliwa od 1 do 6) wskazuje hierarchię nagłówka. Im mniejsza, tym nagłówek będzie ważniejszy. Analogicznie nagłówek <h2></h2> może być podtytułem.
<hr> (ang. Heading rule) tworzy linię oddzielającą. Ten znacznik nie ma tagu zamykającego. Linia przyjmuje taką samą długość jak szerokość naszego akapitu. (wygląda na skomplikowane, ale w rzeczywistości sam zobaczysz jakie to łatwe)
<br> (ang. Break line) działa podobnie jak enter – przenosi dalszy tekst do nowej linii. W html tabulatory i entery nie zmieniają naszej treści, dlatego używa się tego tagu.
- No pięknie! Przebrnąłeś przez podstawy. Pora na część praktyczną – ta, która Ciebie powinna bardziej kręcić. ;)Zanim powiemy sobie o kodzie, chciałbym jeszcze wspomnieć o edytorze naszego kodu. Możesz używać notatnika, ale jest to bardzo niepraktyczne. Edytor koloruje nam składnię (kod), przez co czyni go przejrzystym. Dodatkowo ma wiele funkcji np. podpowiedzi. Najbardziej znane edytory to:
- Notepad++
- Visual Studio Code
- Atom
- Brackets
Wszystkie programy są darmowe. Który wybrać? Polecam spróbować każdego, ale to po jakimś czasie. Wybierz jeden na początek i używaj go. Ja aktualnie używam Visual Studio Code – wcześniej używałem Atom, a na samym początku Notepad++. Na dole zobaczysz kod. Możesz go przekopiować i zapisać u siebie lub pobrać plik niżej.
Gratuluję! Pierwsze koty za płoty! 😀
Pamiętaj, że bez treningu i dobrych nawyków nic nie osiągniemy. Mam dla Ciebie zadanie. Stwórz swoją prostą stronę na podstawie dzisiaj zdobytej wiedzy. Umieść na niej:
– tytuł jakiegoś wymyślonego artykułu
– akapity artykułu oddzielaj poziomymi liniami (w celu poćwiczenia)
– nadaj tytuł i podtytuł w tagach h1-h6
– oddzielaj paragrafy pustymi wierszami
– *sprawdź jak będzie wyglądała strona z polskimi znakami bez tagu <meta charset=”UTF-8″>
Dziękuję za Twoją uwagę i zapraszam Cię do kolejnego postu, który ukaże się już niebawem.
(FAQ) Możliwe pytania:
1) Dlaczego są takie dziwne odstępy między znacznikami?
Odp. To zapis, który ułatwia przeglądanie i analizowanie kodu.
2) Czy mogę stawiać tylko otwierający tag np. <head>?
Odp. Nie. Dzięki zamykającemu tagowi </head> przeglądarka wie, gdzie kończy się dana część kodu.
3) Czy jest więcej tagów?
Odp. Tak. Wyżej są pokazane tylko te, które wymagane są do tego, aby strona działała.
4) Czy mogę nie robić wcięć?
Odp. Można, ale po co utrudniać sobie pracę?
5) Zapisałem plik jako index.html i otwiera mi plik w notatniku zamiast w przeglądarce. Co robię źle?
Odp. Masz nie włączone pokazywanie rozszerzeń na komputerze. Wygoogluj sobie jak to włączyć i wtedy zmień rozszerzenie pliku na .html
6) Czy na stronie może być więcej niż jeden plik html?
Odp. Tak.
Studia: Wyższa Szkoła Ekonomii i Informatyki w Krakowie
Profil: “Informatyka i Ekonometria”
Specjalizacja: “Programowanie urządzeń mobilnych i aplikacji sieciowych”
Siatkówka (GeoVolley Team) na pozycji środkowego
Hobby:
Oprócz programowania i wszystkiego co z tym związane…
Filmy – od dawna pasjonuję się nie tylko oglądaniem filmów, ale także analizowaniem ich pod kątem stworzenia ( Mój link do filmweba) – w liceum dzięki profilowi z modułem filmowym mogłem wejść głębiej w szczegóły kadrów, ujęć itd.
Psychologia – niestety wciąż mam zbyt mało czasu na zagłębianie się w tą wiedzę 🙁
