Tworzenie stron www jest bardzo przydatną umiejętnością. W końcu to właśnie strona internetowa jest podstawą marketingu internetowego każdej firmy. Praktycznie każdy może zrobić prostą stronę internetową, poświęcając trochę czasu. Choć w języku html nie da się stworzyć sklepu internetowego czy rozbudowanej, responsywnej platformy, to możliwe jest stworzenie prostej strony internetowej. Kod html stanowi bazę, dlatego warto nauczyć się tego języka. Czym jest HTML? Jak stworzyć krok po kroku prostą stronę internetową w języku html? Odpowiedzi znajdziesz w artykule.
Podstawową funkcją HTML jest określenie struktury oraz układu strony internetowej. HTML opisuje w kodzie strony treści oraz obrazy, które się na niej pojawią.
Chcąc opisać podstawy języka html najlepiej zacząć od definicji. HTML to skrót pochodzący od słów HyperText Markup Language. Choć przy pomocy html można zrobić prostą stronę internetową, to nie należy nazywać go językiem programowania. HTML określa się jako język znaczników.
Znaczniki html nazywane również tagami zazwyczaj zbudowane są z tagu otwierającego
. Jedyną różnicą jest dodanie ukośnika w tagu zamykającym. Jakich znaczników używa się najczęściej, tworząc stronę html?
Przy tworzeniu stron internetowych wykorzystuje się przede wszystkim znaczniki odpowiadające za strukturę strony www. Znaczniki te to
oraz . Zarówno
Kolejnymi bardzo ważnymi znacznikami są tagi od
do
, przy pomocy których tworzy się nagłówki. Nagłówek H1 jest największy i określa główny temat witryn internetowych. Można wykorzystać go tylko raz na jednej podstronie. Nagłówki od H2 do H6 mogą być używane wielokrotnie. Tworząc własną stronę internetową, warto używać nagłówków. Ułatwiają użytkownikom zapoznanie się z treściami oraz wyżej pozycjonują stronę www dla osób szukających zbliżonych fraz przez wyszukiwarkę.
Tworzenie stron www nie może odbyć się bez tekstów, które dodaje się w znacznikach
, określających paragraf tekstu. Na przykład opis strony musi być zawarty w takich znacznikach.
Kolejne popularne znaczniki używane na stronach internetowych to tagi tworzące listy. Listy nieuporządkowane, czyli i uporządkowane wpływają na wygląd strony i bardziej przejrzysty dla użytkownika dostęp do treści. Za ich pomocą tworzy się również nawigację na stronie.
Znacznik odwołuje się do linków zarówno wewnątrz jednej strony, jak i odnośnik do zewnętrznych witryn internetowych.
Oczywiście znaczników html używanych do tworzenia witryny internetowej jest zdecydowanie więcej. Przedstawiliśmy tylko zarys najczęściej używanych podczas kodowania stron www.
Chcąc zrobić stronę internetową według najnowszych standardów, należy zbudować jej strukturę za pomocą znaczników HTML5. W trakcie pisania kodu konieczne jest dodanie znaczników tj.
,
, ,
,
oraz
. Dzięki temu strona internetowa html jest dopasowana do najnowszych, światowych praktyk tworzenia stron internetowych.
Bardzo ważną informacją jest fakt, że do tworzenia nowoczesnych stron www nie wystarczy sam język html. HTML nie daje możliwości stworzenia rozbudowanej i funkcjonalnej strony internetowej. Natomiast daje on niezwykle ważne fundamenty dla każdej tworzonej strony.
Przy robieniu sklepu internetowego lub strony będącej wizytówką firmy potrzebna jest wiedza co najmniej z zakresu HTML, CSS oraz Java Script. Korzystając z tego zestawu tworzenia stron internetowych, możesz zbudować ciekawą witrynę. W skrócie można powiedzieć, że HTML odpowiada za strukturę strony, CSS za wygląd strony www i jej poszczególnych elementów, a Java Script za animacje i interaktywność strony.
Firmy programistyczne tworzące profesjonalne strony internetowe korzystają z najnowszych technologii, aby tworzone witryny działały poprawnie w każdej przeglądarce internetowej.
Przy pomocy odpowiednich narzędzi i kodu są w stanie stworzyć stronę responsywną. Responsywność oznacza, że strona internetowa wyświetla się poprawnie na każdym urządzeniu - od największych monitorów do małych urządzeń mobilnych.
Do stworzenia prostej strony www nie są potrzebne żadne skomplikowane narzędzia. Pierwszą stronę internetową html stworzysz przy pomocy notatnika oraz przeglądarki. Jak zrobić stronę internetową w notatniku? Poniżej stworzyliśmy krótki poradnik krok po kroku, dzięki któremu zrobisz własną stronę internetową.
Proces tworzenia strony internetowej należy rozpocząć od stworzenia folderu, który zawierać będzie wszystkie pliki dotyczące tworzonej strony internetowej. Stworzenie odpowiedniej struktury plików ma kluczowe znaczenie podczas umieszczania witryny w Internecie.
Jak zrobić stronę internetową w notatniku? Kod html, z którego powstanie strona należy zapisać w dowolnym edytorze tekstu. Możesz skorzystać właśnie z najprostszego notatnika lub worda. Osoby profesjonalnie zajmujące się tworzeniem witryn w Internecie korzystają z programów zawierających edytor kodu, np. Notepad++ lub Visual Studio Code.
Kod html strony internetowej zawsze zawarty jest w pliku tekstowym o nazwie "index.html". Index.html przypisany jest jedynie stronie głównej. Podstrony muszą posiadać osobne pliki o innej nazwie, oczywiście z rozszerzeniem html. Pozwala to utworzyć stronę internetową z podstronami.
Tworząc strukturę strony internetowej, należy wiedzieć, że kod html posiada dwie części: sekcjęoraz.
Sekcjastrony internetowej zawiera informacje niewidoczne wizualnie dla użytkownika. Doprecyzowany jest tutaj m.in. język, w którym będą publikowane treści na stronie, ale też informacje o sposobie kodowania znaków (UTF-8 dla języka polskiego). Sekcjato również miejsce, w którym załącza się dodatkowe arkusze, np. style w CSS czy czcionki z Google Fonts.
Wszystkie treści na stronie dodaje się w sekcji. Zawiera ona wszystkie widoczne na stronie elementy, tj. teksty, obrazy , nagłówki h1-h6, linki . Znaczniki opisywane wyżej tj.
Aby uatrakcyjnić wygląd strony internetowej w przeglądarce, należy dodać style CSS. Konieczne jest utworzenie pliku o nazwie style.css w folderze poświęconym stronie.
W CSS można zmienić kolor tła, używając background lub kolor tekstu za pomocą color. W CSS określisz rozmiar czcionki (font-size) oraz jej grubość (font-weight). Tekst wyśrodkujesz dzięki text-align.
CSS jest bardzo rozbudowanym narzędziem stylowania stron internetowych, które umożliwia nawet zrobienie animacji. W niniejszym artykule tylko nakreślamy, jak wizualnie uatrakcyjnić prostą stronę internetową.