Jak zacząć tworzenie strony internetowej w HTML krok po kroku?

Zbudowanie strony internetowej od podstaw nie jest aż tak trudnym zadaniem jak mogłoby się wydawać. Nawet osoby bez doświadczenia mogą bez problemu wykonać swoją pierwszą witrynę z wykorzystaniem języka HTML. Oto poradnik jak rozpocząć samodzielne tworzenie stron internetowych w HTML krok po kroku.

1. Od czego zacząć tworzenie strony internetowej?

   Technologie niezbędne do zbudowania strony internetowej

2. Dlaczego warto stworzyć stronę internetową w HTML?

   Czym właściwie jest język HTML?

3. Jak zbudować stronę www krok po kroku?

   Szkielet strony internetowej

   Grafika na stronie

   Tworzenie nagłówków H1-Hx

Od czego zacząć tworzenie stron internetowych

Obecnie posiadanie profesjonalnej strony internetowej to konieczność. Wykonanie strony można zlecić webmasterowi lub stworzyć ją samemu. Stworzenie prostej strony www od podstaw nie jest aż tak trudnym zadaniem jak mogłoby się wydawać. Osoby, które chcą stworzyć własną stronę internetową lub dopiero zaczynają przygodę z programowaniem, mogą rozpocząć samodzielne tworzenie stron internetowych, wykorzystując do tego HTML. Język ten jest na tyle prosty, że każdy bez względu na doświadczenie będzie w stanie stworzyć za jego pomocą stronę od podstaw. 

Jest też możliwość zbudowania strony bez dużej znajomości języka HTML. Możemy tego dokonać dzięki kreatorom, inaczej mówiąc, w sieci dostępne są specjalne programy do tworzenia stron internetowych –> zobacz opis. Nie uzyskami dzięki nim profesjonalnej strony, lecz do zabawy wystarczy.

Technologie niezbędne do zbudowania strony internetowej

Istnieje wiele możliwości na stworzenie strony internetowej, od kreatorów stron internetowych, po zaawansowane systemy, które wymagają wiedzy programistycznej. Do zbudowania strony internetowej można wykorzystywać różne języki programowania (one generują kod HTML np.:. PHP), frameworki i bazy danych w zależności od stopnia skomplikowania projektu strony, celu, jaki chcemy osiągnąć, a także naszych umiejętności. Jakie są najpopularniejsze technologie tworzenia stron? Oto kilka przykładów rozwiązań, które są najczęściej wykorzystywane do projektowania witryn i co możemy za ich pomocą osiągnąć: 

Technologie wykorzystywane po stronie przeglądarki.

• HTML - to język, dzięki któremu można z łatwością nadać odpowiednią strukturę treści na stronie. Umożliwia on m.in. podział tekstu na akapity, tworzenie list, podpunktów, paragrafów, itd. HTML jest na tyle prostym językiem, że wystarczy poznać jego podstawy, aby móc zacząć tworzenie pierwszej strony internetowej. 

• CSS - nazwa ta odnosi się do kaskadowego arkusza stylów, który jest powszechnie wykorzystywany do stylizacji witryny. Inaczej mówiąc, CSS jest odpowiedzialny za wszelkie aspekty wizualne na stronie. Za jego pomocą można  zmienić kolor tekstu, tła lub dodać elementy dekoracyjne, np. obrazy, grafikę, animacje. 

• Java Script (tzw. język skryptowy) - nadaje stronie interakcji i dynamiki. Java Script to język programowania, który jest odpowiedzialny za dodatkowe efekty podczas przejść pomiędzy poszczególnymi elementami. Uruchamia różne akcje na stronie po naciśnięciu przycisków, np. podczas wypełniania formularza kontaktowego. 

Podsumowując, język HTML odpowiada za szkielet strony, za jej wygląd style CSS, a interakcje możemy stworzyć za pomocą JavaScript. W naszym poradniku skupimy się na stworzeniu statycznej strony jedynie za pomocą HTML. Jeżeli jednak komuś zależy na dynamicznej stronie oraz aspektach wizualnych, warto połączyć technologie i zastosować dodatkowo style CSS oraz język JavaScript.

Dlaczego warto stworzyć stronę internetową w HTML

HTML to podstawowy język powszechnie wykorzystywany do projektowana statycznych stron internetowych. Jest to idealne rozwiązanie dla początkujących ze względu na niski próg wejścia, czy brak wymagań sprzętowych. Dlaczego jeszcze warto zdecydować się na stworzenie strony za pomocą języka HTML? Oto główne korzyści:

Oszczędność czasu

Chociaż nauczenie się wszystkich aspektów tworzenia stron w HTML ze szczegółami może zająć dużo czasu, istnieją sposoby na przyspieszenie tego procesu. Aby stworzyć amatorską stronę internetową w kilka minut, można wykorzystać gotowe szablony stron. Dzięki temu nie trzeba projektować strony od zera. Wystarczy jedynie podmienić poszczególne elementy, jak grafiki, czy zdjęcia. 

Brak wymagań sprzętowych

Jednym z największych plusów korzystania z HTML jest brak większych wymagań sprzętowych. Możemy zaprojektować stronę na zwykłym komputerze, bez konieczności instalowania serwera http. Nie jest też potrzebne żadne specjalistyczne oprogramowanie – do napisania kodu wystarczy najprostszy dokument tekstowy typu notatnik oraz przeglądarka internetowa.

Dobrze zoptymalizowana strona

Strony stworzone w HTML z reguły zwierają jedynie niezbędne elementy, co sprawia, ze mało ważą i szybko się wczytują, co pozytywnie wpływa na ich optymalizację. Dobrze zoptymalizowana strona będzie przyjazna dla wyszukiwarek, co przekłada się na jej widoczność oraz wysoką pozycję w rankingach Google. 

Czym właściwie jest HTML 

Czym tak naprawdę jest język HTML i czemu służy? Skrót pochodzi od nazwy Hyper Text Markup Language, co tłumaczymy jako język znaczników hipertekstu. Warto podkreślić, że HTML to nie język programowania, lecz – jak nazwa wskazuje – język znaczników (ang. markup language). Głównym zastosowaniem języka HTML jest edycja tekstu, który ma się znajdować na stronie. W przeciwieństwie do zwykłych innych technologii HTML umożliwia całkowitą kontrolę nad ostatecznym wyglądem contentu na stronie. W skład HTML wchodzą znaczniki (tzw. tagi), za pomocą których nadajemy treściom na stronie określone właściwości. Dzięki znacznikom możemy decydować o tym, jak cała zawartość strony będzie się prezentować w poszczególnych miejscach i fragmentach. Tagi umożliwiają m.in. przekształcenie słów lub obrazów w linki odnoszące do innych witryn, zmianę rodzaju i wielkości czcionki, oznaczenie tekstu kursywą, pogrubienie lub wyrównanie.

Możliwości HTML

W jaki sposób przebiega projektowanie stron i edycja tekstu za pomocą języka HTML?

1. Fragmenty treści, którym chcemy nadać specjalne właściwości, wkładamy w nawiasy, i oznaczamy słowami (Markup Language), które określą specjalne atrybuty tekstu.
2. Następnie, po wczytaniu i zinterpretowaniu przez przeglądarkę, treść z oznaczeniami (HyperText) automatycznie wyświetla się na stronie w odpowiedni sposób. 

Oto przykładowy efekt, jaki możemy osiągnąć, korzystając z HTML:

• Tworzenie paragrafów

Jeśli chcesz utworzyć z wybranego zdania paragraf, wystarczy zastosować odpowiednie tagi:

Oto przykładowe zdanie

W tym przypadku ”p” to znacznik paragrafu. Oznacza to, ze tekst pomiędzy klamrą rozpoczynającą ”p” oraz klamrą kończącą ”/p” będzie się na stronie prezentować jako osobny paragraf. 

Aby dalej modyfikować tekst, wystarczy dodawać kolejne atrybuty. Jeżeli chcemy, żeby powyższe zdanie wyświetlało się, np. w kolorze niebieskim, wykorzystujemy w tym celu atrybut style, który zmienia kolor czcionki. 

Przykładowo:

niebieski tekst

Po zastosowaniu tego atrybutu, na stronie wyświetli się niebieski tekst.

Oczywiście najlepiej takie zadania realizować w osobnym pliku przeznaczonym na style CSS. Wówczas w pliku z rozszerzeniem .css wpisujemy p{color:blue;}. Style CSS to osobny temat, wiec na ta chwilę nie będziemy o tym pisać.

Jak zbudować stronę internetową w HTML krok po kroku

W tym poradniku omówimy, jak szybko stworzyć prostą stronę internetową wykorzystując podstawy znajomości języka HTML. Nie będą potrzebne narzędzia deweloperskie, ani specjalistyczne oprogramowania, a jedynie prosty edytor tekstu. Wyjaśniamy krok po kroku anatomię dokumentu HTML.

Krok 1: Szkielet strony

Do pliku tekstowy z rozszerzeniem .html lub .htm wpisujemy poniższy kod z przykładową treścią w środku:

Oto moja strona internetowa

Przyjrzyjmy się bliżej, co oznacza powyższy fragment kodu:

Tworzenie każdej strony internetowej należy zacząć od tego znacznika. Ta linijka kodu z kluczowym słowem html zapewnia, że rodzaj dokumentu, w jakim będziemy tworzyć stronę to właśnie HTML.

Są to przykłady otwierających i zamykających znaczników, które determinują, w którym miejscu poszczególny tag się zaczyna, a w którym kończy. Różnią się od siebie jedynie symbolem /. 

Kolejne tagi: head (głowa) oraz body (ciało), tak jak powyższe znaczniki, również posiadają  znacznik otwierający i zamykający. W znaczniku head zamieszczamy kluczowe informacje, które opisują stronę, ale same w sobie nie są jej zawartością np. tytuł strony lub odnośniki do rodzajów czcionek. Z kolei w body umieszczamy już całą zawartość witryny, czyli treść, linki, zdjęcia, itd. 

Oto moja strona internetowa

Znacznik title, jak sama nazwa wskazuje, służy do określenia tytułu strony. Wyświetla się w belce przeglądarki internetowej oraz jest bardzo ważnym elementem rankingowym pod względem pozycjonowania. 

Krok 2: Grafika na stronie 

Zanim zamiesić na swojej stronie zdjęcia, pamiętaj, aby zadbać o ich najwyższą jakość. Upewnij się więc co do rozmiaru pliku i stopnia kompresji. Grafikę wstawiamy w następujący sposób: 

Atrybut src to inaczej źródło (source), które wskazuje ścieżkę do pliku grafiki graficznego. Aby zapewnić odpowiednie proporcje wyświetlanej grafiki, możemy też ustawić jej szerokość (width) i wysokość (height).

Atrybut alt (ang. alternative) określa jaki tekst powinien pojawić się na stronie, jeśli użytkownikowi nie został z jakiegoś powodu wyświetlony obraz. Jest to bardzo ważne pod kątem pozycjonowania grafiki w Google. Aby strona była zgodna z zasadami SEO, należy zawsze pamiętać o dodawaniu alternatywnych opisów obrazków. Odpowiedni opis zdjęcia pozwoli na polepszeniu trafności wyszukiwań w wyszukiwarce zdjęć / grafik  Google.

Krok 3: Tworzenie nagłówków H1-Hx

Podział tekstu na nagłówki nadaje treści odpowiednio czytelną strukturę. I chociaż HTML daje możliwość tworzenia sześciu poziomów nagłówków, w praktyce z reguły są wykorzystywane maksymalnie 3 lub 4. 

Nagłówek

Nagłówek2

Nagłówek3

Nagłówek4

Warto pamiętać, że stosowanie nagłówków nie pełni jedynie funkcji dekoracyjnej w tekście. Stosowanie nagłówków jest istotne pod kątem SEO, dlatego nie należy, np. pomijać poszczególnych poziomów.

Używając standardowych znaczników https://www.w3schools.com/tags/default.asp  jesteśmy w stanie zrobić stronę w html.

Podsumowanie

Używając samego języka HTML, nie jesteśmy w stanie stworzyć zaawansowanej witryny internetowej. Do uzyskania profesjonalnego wyglądu potrzebujemy poznać więcej języków które mają swoje przeznaczenie. Część z nich używamy wyłącznie po stronie serwera, część po stronie przeglądarki. Jedne są językami programowania, inne są językami strukturalnymi.  W naszym artykule: programowanie stron internetowych poznasz szczegóły!!!

Pierwsze kroki budowania witryny z wykorzystaniem języka HTML nie są wcale skomplikowane. Wystarczy zajrzeć do internetowych przewodników i podążać za instrukcjami krok po kroku, aby uzyskać efekt profesjonalnej strony internetowej. A jeśli potrzebujesz przygotowania projektu witryny przez specjalistów, poznaj nasze kompleksowe usługi dotyczące tworzenia stron internetowych. 

Artykuły które mogą Cię zainteresować:

• Ewolucja języka HTML
• Technologie do tworzenia stron internetowych
• 8 podstawowych zasad tworzenia strony internetowej
• Na co zwrócić uwagę przy tworzeniu strony internetowej
• Aplikacje do tworzenia stron www
• Testy A/B stron www
• Czym zajmuje się Web Desinger
• Proces tworzenia strony www