Ostatnia aktualizacja 22 marca, 2023
Chcesz rozpocząć pracę w IT i widzisz się we frontendzie? Na początku drogi web developera będziesz się uczyć m.in., jak zrobić stronę – HTML to podstawa. Aby ruszyć dalej, musisz opanować podstawową strukturę znaczników. W poniższym tekście przeczytasz, jak się za to zabrać.
Jak zrobić stronę – HTML krok po kroku
Stworzenie najbardziej podstawowej strony internetowej w HTML-u jest bardzo proste. Oczywiście nie będzie ona wyglądać akceptowanie dla dzisiejszych standardów tworzenia witryn, jednak jest to już pierwszy krok do pogłębiania wiedzy w zakresu web developmentu.
Aby stworzyć stronę internetową w HTML-u, należy wykonać kilka kroków:
- Wybierz edytor kodu:
Możesz wybrać dowolny edytor kodu, który pozwoli Ci na tworzenie plików HTML. Dobre edytory kodu dla początkujących to między innymi: Notepad++, Sublime Text lub Visual Studio Code. Każdy z nich zawiera kolorową składnię i jest darmowy. - Stwórz plik HTML:
Utwórz nowy plik w edytorze kodu i zapisz go jako plik HTML z rozszerzeniem .html. Jest to to podstawowy element strony internetowej, który jest interpretowany przez przeglądarkę internetową. - Zdefiniuj strukturę strony:
W pliku HTML możesz zdefiniować strukturę strony, używając tagów HTML, takich jak <html>, <head> i <body>. Tag <html> definiuje początek i koniec dokumentu HTML, a tagi <head> i <body> definiują nagłówek i treść strony. Podstawowy kod będzie wyglądał następująco:
Dalsza edycja strony internetowej – treść i style
- Dodaj treść do strony:
Możesz dodać treść do strony, używając różnych tagów HTML, takich jak <h1> dla nagłówka, <p> dla tekstu, <img> dla obrazów, <a> dla linków itp. - Użyj styli CSS:
Aby nadać stronie atrakcyjny wygląd, możesz użyć styli CSS. CSS pozwala na zmianę koloru, czcionki, marginesów, tła itp. Style umieszcza się w sekcji nagłówka <head> lub w zewnętrznym pliku CSS, który jest odwoływany do pliku HTML. - Zapisz plik i wyświetl stronę:
Po ukończeniu tworzenia strony, zapisz plik HTML i otwórz go w przeglądarce internetowej, aby zobaczyć, jak wygląda Twoja strona. Możesz też opublikować stronę na serwerze, aby była dostępna dla innych użytkowników internetu.
Przykładowy kod HTML strony internetowej
Bardzo podstawowa strona internetowa nie będzie wyglądać tak, jak współczesne witryny w sieci. To dopiero punkt wyjścia do stworzenia bardziej złożonego projektu. Jak może wyglądać podstawowy, działający kod HTML do strony internetowej?
<!DOCTYPE html> <html> <head> <title>Moja strona internetowa</title> <style> body { background-color: lightblue; } h1 { color: white; text-align: center; } </style> </head> <body> <h1>Witaj na mojej stronie internetowej</h1> <p>To jest pierwszy paragraf.</p> <img src="obraz.jpg"> <a href="https://enterthecode.pl">Link do Enter The Code</a> </body> </html>
