Poradnik · 02 marca, 2022 · 2 minuty czytania
Na początek warto zastanowić się czym dokładnie jest HTML. Z języka angielskiego HyperText Markup Language czyli hipertekstowy język znaczników to nic innego jak kod który pozwala Poradnik jak zrobić prostą stronę internetową w HTML i CSS krok po kroku. Dodatkowo kilka darmowych szablonów HTML na twoją stronę www.ać dokładnie stronę internetową oraz to co powinno zostać wyświetlone użytkownikowi. Kod dzielimy na dwie podstawowe sekcje:
Sekcja head odpowiada nam o meta danych strony, zawiera takie informacje jak Prosta strona internetowa w HTML i CSS - PORADNIK szablony strony, kto jest autorem, mówi o języku oraz wskazuje miejsce do np kodu odpowiedzialnego za wygląd strony .css
Drugą sekcją jest sekcja body od której bezpośrednio zależy wyświetlona treść na komputerze użytkownika. To w body ustalmy jakie są nagłówki strony (w przypadku naszej strony główny nagłówek to: Prosta strona internetowa w html, poradnik), następnie mamy informacje o reszcie tekstów, w tej sekcji dodajemy również zdjęcia i inne rzeczy które chcemy wyświetlić.
Więcej informacji o stronach internetowych
Wystarczy praktyki, przejdźmy do konkretów bo są one znacznie łatwiejsze niż uczenie się na pamięć co gdzie możemy umieścić w kodzie. Na start będziemy działać na podanym niżej podstawowym szablonie kodu html:
<!DOCTYPE html>
<html>
<head>
<title>Prosta strona internetowa w HTML i CSS - PORADNIK szablony twojej strony</title>
<meta name="description" content="Poradnik jak zrobić prostą stronę internetową w HTML i CSS krok po kroku. Dodatkowo kilka darmowych szablonów HTML na twoją stronę www. twojej strony">
</head>
<body>
tekst
</body>
</html>
Dobrze, teraz warto dodać coś co chociaż minimalnie ożywi naszą stronę. W sekcji body dodaj taki kod
<div>
<img src="sciezkapliku" width="100%" alt="Francja">
<h1>Paryż, stolica Francji </h1>
<p>Tekst który chcesz dodać.</p>
</div>
Przykładowy tekst którym chcemy podpisać nasz obrazek.
Warto też dodać, że strony to nie sam HTML, jest on wspomagany CSS który odpowiada za wygląd strony. Najpierw powiedzmy sobie jak dodać plik .css tak aby nasza strona go widziała. Dodanie CSS w HTML sekcji head:
<link rel="stylesheet" href="index.css">
Teraz dodajmy do naszego h1 klasę dzięki której będziemy mogli zmieniać jego parametry wyglądu
<h1 class="naglowekH1">Paryż, stolica Francji </h1>
Teraz w pliku index.css zmienmy kolor naszego nagłówka na czerwony a następnie zwiększmy ogległość od obrazka i tekstu
.naglowekH1{
color: red;
padding-top: 20px;
padding-bottom: 20px;
}
Przykładowy tekst którym chcemy podpisać nasz obrazek.
<!DOCTYPE html>
<html>
<head>
<title>Strona w budowie</title>
<meta name="description" content="Przepraszamy za problemy, Strona w budowie">
</head>
<body>
<div style="text-align: center; padding-top: 15%; height: 100vh;">
<h1>Strona w budowie</h1>
<p>Przepraszamy za utrudnienia</p>
</div>
<section>
<div>
<p>Pomoc techniczna: <a style="color: #ffffff; font-size: 12px; font-weight: 800; text-decoration: none;" title="Strony Internetowe Warszawa" href="https://artleit.com/" target="_blank">artleit.com</a></p>
</div>
</section>
</body>
</html>