Dlaczego warto tworzyć stronę internetową w HTML
Kiedy pojawia się potrzeba stworzenia własnej strony, początkujący webmasterzy zazwyczaj wybierają spośród kilku opcji, gdzie nie trzeba pracować z kodem. Może to być jeden z wielu systemów CMS lub kreatory online. Rzadko kto jest gotów zająć się ręcznie napisanym kodem HTML, ponieważ jest to trudniejsze.
Ale tak naprawdę istnieje jeden sposób, aby poradzić sobie z tym zadaniem, mając przynajmniej przybliżone pojęcie o tym, jak działa język znaczników — pobrać gotowy kod HTML strony i trochę go edytować pod swoje potrzeby. Pracując z szablonem, otrzymujesz gotową strukturę, stylizacje (czcionki, kolory, rozmieszczenie elementów), działające skrypty JS (przyciski, menu, formularze kontaktowe). W tym przypadku wystarczy tylko wymienić treść — wstawić swoje obrazy i teksty.
Do tego potrzeba trochę uwagi i wiedzy, ale dostosowanie gotowego szablonu jest całkowicie dostępne dla nowicjuszy. Takie doświadczenie będzie przydatne dla tych, którzy interesują się kodowaniem, a także dla stworzenia własnej strony o najprostszej formie — strony docelowej lub wizytówki. Statyczny HTML jest bardziej opłacalny dla małych stron niż rozwój w CMS, ponieważ systemy zarządzania treścią zajmują znacznie więcej miejsca. Korzystanie z silnika z dużą ilością kodu PHP i zestawem różnych modułów dla strony docelowej — nie jest zbyt opłacalne. Strona HTML wymaga bardzo mało zasobów na hostingu, dlatego jeśli celem jest stworzenie strony na jedną stronę — to najlepsza opcja.
Przeczytaj także: TOP-3 CMS do tworzenia sklepu internetowego
Zaczynamy pracę. Najpierw trzeba znaleźć dobry szablon (płatny lub darmowy) i pobrać go na swój komputer w formie pliku zip.
Do jego dostosowania można użyć dwóch opcji:
-
Edycja na komputerze, a następnie przesłanie gotowej strony na hosting.
-
Przesłanie strony na hosting i edytowanie w menedżerze plików.
Pójdziemy pierwszą drogą, aby potencjalni użytkownicy nie zobaczyli niedokończonej strony.
Jak otworzyć gotowy kod strony HTML w notatniku do edycji
Rozpakuj archiwum na swoim komputerze i wejdź do folderu. Zobaczysz mniej więcej taki widok — katalogi z kodem JS i CSS, obrazkami (images) oraz głównymi stronami. Wśród nich trzeba wybrać index.html — to strona, od której zaczyna się uruchamianie strony. W przypadku strony jednostronicowej będzie to jedyny plik w formacie HTML. W naszym przykładzie strona ma kilka sekcji, więc i plików jest więcej.
System już przypisał pliki HTML do Google Chrome, więc będą się one automatycznie otwierać w tej przeglądarce. Można od razu zobaczyć, jak będzie wyglądać główna strona szablonu w sieci (na razie widzisz ją tylko ty).
Aby edytować stronę, otworzymy ją za pomocą prawego przycisku myszy w innym programie. Jeśli jesteś początkującym programistą, prawdopodobnie masz już specjalne oprogramowanie, takie jak Subline lub Visual Studio Code. Ale ten przewodnik jest tworzony dla amatorów, więc załóżmy, że nie masz takiego programu. Kod HTML strony świetnie edytuje się w standardowym notatniku lub WordPad, więc otworzymy go przez notatnik.
Nie zapomnij wybrać opcji Format => Zawijanie wierszy, aby widzieć cały kod w jednym oknie. Oto taki widok mniej więcej uzyskasz.
Podstawowe tagi HTML
Aby wymienić elementy, trzeba najpierw znaleźć je w kodzie. W tym celu należy znać podstawowe tagi, w których znajduje się treść różnych typów:
-
div — uniwersalny kontener do grupowania bloków treści;
-
H1, H2, H3… H6 — nagłówki;
-
li — element listy;
-
p — akapit tekstowy;
-
a href — link;
-
img — obraz.
Ogólnie tagów jest znacznie więcej, ale na razie to wystarczy. Należy również rozumieć, gdzie zaczyna się i kończy zawartość tagu.
Tag otwierający ma postać < p >, tag zamykający jest do niego podobny, ale z ukośnikiem < /p >. To znaczy, że akapit tekstowy powinien znajdować się między nimi.
«Lorem ipsum» i wszystko, co następuje po nim w łacinie, oznacza w «programistycznym» języku «dowolny tekst» lub po prostu «bla-bla-bla». Używa się go, gdy trzeba zobaczyć, jak będzie wyglądać blok tekstowy, ale treści jeszcze nie ma.
Przeczytaj także: Uczyć się programować samodzielnie czy iść na kursy deweloperów — co wybrać?
Zamiana bloków tekstowych w szablonie
Spróbujmy zamienić nagłówek i główny tekst na stronie.
Nagłówek «Welcome To Beauty Class» łatwo znaleźć po tagu < h2 > (duży nagłówek drugiego rzędu). A główny tekst jest wyróżniony na niebiesko, abyś zobaczył, gdzie się zaczyna i kończy.
Zamiast tekstu wstawiasz swój, klikasz w notatniku Plik => Zapisz i odświeżasz przeglądarkę, aby sprawdzić wynik. Jak widzisz, nasz tekst się zmienił.
Czym jest narzędzie dla deweloperów w przeglądarce i jak je otworzyć
Jeśli nie rozumiesz, w którym tagu znajduje się element lub jak się nazywa, skorzystaj z narzędzi dla deweloperów w przeglądarce.
Jak otworzyć w Chrome narzędzia dewelopera:
-
Kliknij prawym przyciskiem myszy na elemencie i wybierz z listy «Sprawdź».
-
Naciśnij klawisz F12 na klawiaturze i wybierz punkt Elements.
-
Wejdź do menu przeglądarki w prawym górnym rogu => Inne narzędzia => Narzędzia dewelopera.
Aby zobaczyć nazwę i tag elementu, kliknij go ponownie prawym przyciskiem myszy i wybierz «Sprawdź».
Na przykład, ten obraz ma adres images/image_01.jpg, gdzie images — to nazwa folderu, a /image_01.jpg — nazwa pliku.
Zamiana obrazów w kodzie HTML
Zamieńmy obrazek. Należy to zrobić w dwóch miejscach — w folderze i w kodzie. Jak to w ogóle działa?
Obrazów nie ma w znacznikach — leżą w folderze images. W kodzie podany jest ich ścieżka w postaci miejsca, w którym znajduje się obrazek, oraz jego nazwy. Kiedy widzisz zdjęcie na stronie, kod HTML po prostu pokazuje ci plik z folderu.
Dlatego, aby zamienić lub dodać obraz, należy przesłać go do folderu images i wpisać ścieżkę w kodzie.
Znak «ukośnik» oznacza folder, a ostatnia nazwa w cudzysłowie zawsze powinna odnosić się do pliku.
Na przykład, jeśli mamy folder images, a w nim jest folder banners, w którym znajduje się obraz main-picture.jpg, to ścieżka będzie wyglądać tak:
«images/banners/main-picture.jpg»
Ale pamiętaj, że lepiej nie robić zbyt wielu zagnieżdżeń.
Jest też prostszy sposób na wstawienie swoich zdjęć: jeśli przesłasz obraz o tej samej nazwie do folderu, automatycznie zastąpi on ten na stronie bez zbędnej edycji znaczników. Spróbujmy tej opcji.
Zamieniamy w folderze z obrazami istniejące zdjęcie na inne (u nas będzie to zdjęcie kota) o tej samej nazwie image_01.jpg. Upewnij się, że rozszerzenia są również takie same. Jeśli nazwy są identyczne, ale oryginalny obraz miał rozszerzenie .jpg, a ty dodałeś w formacie .webp — obrazy nie zostaną zamienione na stronie.
Jeśli konieczne jest przesłanie obrazków w innym formacie, to nazwę trzeba wpisać na nowo w kodzie. Ale nasze zdjęcie zamieniło się bez edycji znaczników.
Należy zauważyć, że twórcy darmowych szablonów nie zawsze określają rozmiar obrazów w stylach, dlatego czasami trzeba je dostosować ręcznie. Nasze zdjęcie zostało dostosowane do rozmiaru wszystkich pozostałych w edytorze graficznym Figma.
W ten sposób możesz zamienić całą treść na swoją, uzyskać unikalną stronę i śmiało z niej korzystać. Jeśli znasz CSS — dostosuj projekt za pomocą kolorów lub czcionek.
Przeczytaj także: Top-10 ukraińskich kanałów YouTube o IT
Co należy wiedzieć o pracy z kodem HTML
Oferujemy kilka wskazówek dotyczących pracy z znacznikami, które mogą być przydatne dla nowicjuszy:
-
Elementy w kodzie znaczników są umieszczane w tej samej kolejności, co na stronie. To znaczy, że jeśli element jest na górze, to będzie na początku kodu, jeśli na dole — to na końcu.
-
Element w kodzie można znaleźć również po jego treści. Na przykład, trzeba znaleźć przycisk z napisem «Blog», znajdujący się w górnym menu. Naciśnij w notatniku CTRL+F i wpisz słowo «Blog», a zobaczysz go w kodzie.
-
Dla kodu ważny jest każdy znak. Jeśli coś «zepsułeś», może to oznaczać, że został usunięty lub niewłaściwie dodany jakiś symbol — cudzysłów, kropka lub nawet spacja, która również ma znaczenie.
-
Staraj się nie edytować i nie usuwać innych części kodu, jeśli nie rozumiesz, co to jest. W nim jest wiele powiązań z plikami JS i CSS, a usuwając jakiś link, ryzykujesz pozostanie bez stylów lub interaktywnych elementów.
-
U deweloperów istnieją niepisane zasady — nazywać pliki w kodzie angielskimi słowami, które bezpośrednio określają sam rodzaj treści, a nie jej zawartość. To znaczy, że obrazek często nazywa się image lub picture, a wideo będzie nazywane po prostu: video_1. To bardzo ułatwia pracę z znacznikami i pomaga innym deweloperom szybko zrozumieć, co jest napisane w kodzie.
Przesyłanie gotowej strony na hosting
Nasza strona jest gotowa i czas ją przenieść na domenę i hosting. Pokażemy ci, jak to zrobić w panelu Cityhost.ua, ale zasada jest podobna dla innych dostawców. Nie będziemy opisywać procesu zakupu usług, a mieć na uwadze, że już kupiłeś hosting i powiązałeś z nim zarejestrowaną domenę.
Na początku trzeba dostać się do wnętrza strony, co można zrobić za pomocą FTP. Ale nie będziemy pracować z dużymi plikami, więc do tego zadania wystarczy menedżer plików.
Zaloguj się na swoje konto na stronie Cityhost i otwórz zakładkę Hosting 2.0 => Zarządzanie => Otwórz w menedżerze plików.
Na stronie jest teraz pusto, ale na nowym hostingu zazwyczaj znajduje się «baner zastępczy» w postaci pliku php – można go usunąć.
Zarchiwizuj swoją stronę w plik zip i prześlij ją na hosting za pomocą przycisku «Prześlij plik».
Następnie trzeba rozpakować folder za pomocą przycisku «Wydobądź archiwum». Po rozpakowaniu archiwum najlepiej od razu usunąć. 
Kolejnym krokiem jest przeniesienie wszystkich plików z folderu do katalogu głównego za pomocą procedury Wytnij — Wklej. Pliki, szczególnie index.html, powinny znajdować się na pierwszym poziomie, w przeciwnym razie użytkownicy ich nie zobaczą na domenie. Po tym usuń główny folder, jest już pusty.
I to wszystko. Strona jest już opublikowana w internecie — teraz można wpisać swoją domenę w pasku wyszukiwania przeglądarki i przeglądać zasoby internetowe. Aby ją edytować, wystarczy otworzyć odpowiedni plik na hostingu i edytować go tam, nie ma potrzeby za każdym razem przesyłać strony na nowo.
Podobał Ci się artykuł? Powiedz o nim znajomym: 
