Stwórz swoją pierwszą stronę internetową. Krok po kroku.

Strona internetowa krok po kroku
Strona internetowa krok po kroku

Znasz już podstawy HTML i CSS i podstawową strukturę kodu HTML? Pora wykorzystać zdobytą wiedzę w praktyce!

Do tworzenia stron internetowych wymagany jest edytor kodu. Jaki edytor do tworzenia stron internetowych? – link

 

Przystępujemy do tworzenia strony internetowej.

 

Krok 1

Utwórz folder. Znajdą się w nim wszystkie pliki naszej tworzonej strony internetowej. Nie ma znaczenia jak nazwiesz utworzony folder, możesz nazwać jak chcesz. Zalecane jest jednak posługiwać się takimi nazwami, które rzeczywiście opisują przeznaczenie folderu, pliku itp. Ułatwia nam to późniejszą pracę.

Utwórz folder
Utwórz folder

 

Krok 2

Otwórz folder w edytorze kodu. Jak to zrobić? Jeżeli korzystasz z Visual Studio Code, po uruchomieniu zobaczysz ekran startowy. Otwórz wcześniej utworzony folder klikając na Open Folder… i wybierając lokalizację.

Visual Studio Code - Ekran startowy
Visual Studio Code – Ekran startowy

 

Drugi sposób na otwarcie foldery to File > Open Folder…

File > Open Folder...
File > Open Folder…

 

Wybierz folder i potwierdź wybór.

Potwierdzenie wyboru folderu
Potwierdzenie wyboru folderu

 

Po wskazaniu lokalizacji folderu i zatwierdzeniu wyboru, zobaczysz po lewej stronie utworzony i wybrany wcześniej folder.

Otworzony folder
Otworzony folder

 

Krok 3

Pozostało jeszcze jedynie utworzyć nowy plik w naszym folderze. Utwórz plik i nadaj mu nazwę index.html. Index domyślnie oznacza główną stronę internetową. Rozszerzenie .html informuję o typie pliku. System wie wtedy jakiego programu użyć, by otworzyć plik. W naszym przypadku rozszerzenie HTML (HyperText Markup Language) – hipertekstowy język znaczników, czyli język za pomocą którego tworzymy strukturę strony. Pliki z rozszerzeniem .HTML domyślnie uruchamiane są przez przeglądarkę.

Nowy plik HTML
Nowy plik HTML

 

Krok 4

Ostatni etap tworzenia strony internetowej. Kod źródłowy. Visual Studio Code domyślnie posiada zainstalowaną wtyczkę Emmet. Stworzy on podstawową strukturę kodu HTML za nas. Wystarczy użyć i tab.

Budowanie podstawowej struktury strony za pomocą wtyczki Emmet
Budowanie podstawowej struktury strony za pomocą wtyczki Emmet

 

Podstawowy kod źródłowy strony internetowej, stworzony za pomocą wtyczki Emmet.

 

Krok 5

Umieść treść pomiędzy elementami body i zapisz plik. Wszystko co znajduje się pomiędzy <body> a </body>, zostanie wyświetlone w oknie przeglądarki.

Treść w znaczniku body
Treść w znaczniku body

Kod do skopiowania

 

Krok 6

Własnie utworzyłeś swoją stronę internetową. Zobacz ją. Przejdź do utworzonego wcześniej folderu i dwukrotnie kliknij na utworzony plik index.html. Strona otworzy się w oknie przeglądarki.

Gotowa strona internetowa
Gotowa strona internetowa

 

To wszystko. Właśnie utworzyłeś swoją pierwszą, prostą stronę internetową.

 

 

 

 

 

 

Dodaj komentarz

Twój adres email nie zostanie opublikowany.