Jak zrobić stronę internetową HTML ?

Niezależnie od tego czy chcesz się nauczyć programowania w HTML bo robisz to w szkole, na studiach na zaliczenie, czy jesteś drobnym przedsiębiorcą który chce uruchomić swoją prostą stronę internetową za darmo ten materiał pozwoli ci wejść w tajniki HTMLa od absolutnych podstaw.

Niestety smutna prawda jest taka że HTML, generalnie budowa stron internetowych w samym HTMLu odchodzi powoli do lamusa gdyż jest to już mało perspektywiczna technologia wypierana od dawna przez języki tj. PHP, nie mniej jednak przy odrobinie samozaparcia jesteś w stanie za darmo zbudować sobie najprostszą stronę internetową w HTML samodzielnie.

Co będzie potrzebne do stworzenia strony HTML za darmo ?

Zwykły notatnik systemowy jaki mamy w Windows, ale mówiąc szczerze do tego celu znacznie lepszy będzie Notatnik ++ który też jest darmowy , pobierzesz go sobie z internetu. Ja z racji wykonywanego zawodu pracuję na MacOS (znacznie większa stabilność niż platforma Windows) dlatego nie mam tu windowsowego notatnika i nie mogę też zainstalować Notatnika ++, ale mam coś podobnego do Notatnika ++ o nazwie „CotEditir” i nim się w tym przykładzie posłużę co nie zmienia faktu że aby robić to co ja możesz iść po najmniejszej linii oporu wykorzystując wbudowany w Windows Notatnik.

Jak zrobić stronę internetową w HTML ?

Stwórz pliki strony internetowej

Musisz utworzyć sobie plik który musi mieć taką nazwę – index.html on dlatego musi mieć taką nazwę aby po wgraniu na serwer był on właściwie zinterpretowany przez jego mechanizmy i jeśli ktoś wpisze w przeglądarce internetowej adres twojej strony internetowej –  nazwatwojejdomeny.pl – aby wyświetliła się zawartość tego pliku na ekranie użytkownika.

Kolejnym plikiem strony internetowej który musisz utworzyć jest style.css – jest to plik w którym będziemy „stylizowali” swoją stronę internetową czyli zmieniali jej kolorystykę, tła ,sterowali rozmieszczeniem elementów na stronie internetowej.

Na początku w pliku index.html musimy zdefiniować typ dokumentu który tworzymy , kolejnym elementem jest tzw. HEAD czyli sekcja w której definiujemy nasz arkusz styli, sposób kodowania strony umieszczamy m.in znacznik TITLE czyli tytuł strony, generalnie w sekcji HEAD można umieścić wiele różnych elementów ale w tym artykule skoncentrujemy się na absolutnych podstawach.

na tą chwilę gdybyśmy załadowali taki plik na serwer ,zakładając że mamy już wykupioną domenę no to po otwarciu strony zobaczylibyśmy pustą stronę, ale spokojnie (: to dopiero początek.

Czas na wykorzystanie znacznika DIV

Każda witryna internetowa ma pewne elementy stałe, mówimy o tym co widzi internauta otwierający naszą stronę tj. header w którym jest najczęściej logotyp, menu, poprzez sekcję BODY gdzie jest treść naszej strony, skończywszy na FOOTERze który jest tzw. stopką strony. Do tworzenia tego typu elementów możemy użyć właśnie elementu blokowego – DIV

DIV jest w takim potocznym rozumieniu czymś na kształt kontenera na treści.

Do tworzenia elementów MENU twojej strony internetowej wykorzystujesz element tutaj wpisujesz nazwę swojego pliku html z pełną ścieżką dostępową

Dalszy kod HTML twojej nowej strony internetowej może wyglądać już tj poniżej.

Mamy już wypełnioną i sekcję HEAD i sekcję BODY w jakąś treść którą narazie jest menu naszej strony
Spójrzmy zatem jak wygląda – narazie nie wygląda zbyt imponująco bo ma tylko MENU które nie jest jeszcze ostylowane przez arkusz CSS

Dodajmy zatem teraz jakąś treść do naszej strony internetowej oraz stopkę

Mamy już bardzo prostą stronę główną z sekcją header , body i footer czyli nagłówkiem w którym mamy deklaracje podstawowych elementów strony, body w którym mamy menu naszej strony treść strony głównej oraz zawartość tzw. stopki strony

Póki co wygląda to dość blado, ożywmy zatem nasz projekt dodając mu pewne elementy w arkuszu styli „style.css”

Myślę że warto byłoby naszej stronie internetowej dać jakieś marginesy bo treść która na niej jest umieszczona nie wygląda najlepiej i odrobinę popracować nad sekcją menu oraz stopki naszej strony internetowej

Jak widzisz wejście w tematykę programowania HTML/CSS nie jest trudne i stworzenie bardzo prostej strony HTML nie jest trudne, niech cię nie zwiedzie to jak prosto ona teraz wygląda ponieważ strony zbudowane w HTML/CSS mogą wyglądać tj. np. ta

ale do tego aby budować tak efektowne i nowoczesne strony internetowe w HTMLu wymagane jest przebrnięcie przez pełny kurs HTML /CSS jednym z najlepszych miejsc do nauki HTMLa i CSSa mogę polecić stronę Pana Mirosława Zelenta który masz TUTAJ

Jeżeli chcesz otrzymywać newsletter w którym będą powiadomienia o nowych artykułach tego typu na naszym blogu, mozesz się do niego zapisać tutaj, jest on bezpłatny, niezobowiązujący do czegokolwiek (:

Jeśli myslisz dopiero nad uruchomieniem własnej strony internetowej i chcesz aby to ktoś zrobił dobrze, aby strona dała ci pełną elastyczność w implementowaniu zmian które niesie „prawo unijne” – skontaktuj się ze mną za pośrednictwem poniższego formularza kontaktowego – rozmowa nic nie kosztuje.