Ostatnia aktualizacja 5 stycznia, 2024
Zapoznaj się z kompleksową pigułką wiedzy, dzięki której poznasz podstawowe komendy HTML. Uczymy, jak napisać kod niezbędny do tworzenia różnorodnych elementów na stronie internetowej. HTML umożliwia definiowanie struktury oraz zawartości wizualnej strony, od prostych akapitów tekstu po zaawansowane formularze i hiperłącza. Zapoznając się z tym przewodnikiem, odkryjesz fundamentalne bloki konstrukcyjne HTML, które są pierwszym krokiem w podróży każdego aspirującego web developera.
Podstawowe komendy HTML
Podstawową strukturę dokumentu HTML tworzą znaczniki <html>, <head> oraz <body>.
<!DOCTYPE html>
<html>
<head>
<title>Tytuł Strony</title>
</head>
<body>
Zawartość strony
</body>
</html>
Nagłówki (<h1> do <h6>) służą do definiowania tytułów i podtytułów.
<h1>Największy Nagłówek</h1>
<h2>Nagłówek Poziomu Drugiego</h2>Element <p> służy do tworzenia akapitów, a <br> do wstawiania przerw w linii.
<p>To jest akapit tekstu.</p>
<p>To jest inny akapit.<br>Z przerwą w linii.</p>Hiperłącza i obrazy
Znacznik <a> umożliwia tworzenie hiperłączy.
<a href="https://www.przyklad.com">Odwiedź tę stronę</a>Znacznik <img> służy do wstawiania obrazów.
<img src="obraz.jpg" alt="Opis obrazu">Listy – komendy HTML można łączyć z CSS-em
Użyj <ul> dla listy wypunktowanej.
<ul>
<li>Element listy</li>
<li>Inny element</li>
</ul>Listy wypunktowane są niezwykle wszechstronne w zastosowaniu. Idealnie nadają się do prezentowania cech produktu, kroków w instrukcjach, czy nawet do tworzenia menu nawigacyjnego na stronie.
Dzięki CSS-owi można łatwo modyfikować stylistykę list, w tym kształt i kolor punktora. Pozwala to na dostosowanie wyglądu listy do ogólnej estetyki strony. Dodatkowo, listy wypunktowane mogą być zagnieżdżane, co umożliwia tworzenie struktur hierarchicznych, takich jak podmenu lub skomplikowane katalogi informacji. Jest to jeden z podstawowych elementów strukturalnych w HTML-u.
W połączeniu z CSS-em otwiera szerokie możliwości dla projektantów i programistów stron internetowych, umożliwiając im tworzenie intuicyjnych i estetycznie przyjemnych interfejsów użytkownika.
Poniższy przykład obrazuje sposób zmiany punktorów na kwadraty, koloru tekstu oraz modyfikację odstępów.
ul.custom-list {
list-style-type: square; /* Zmiana kształtu punktorów na kwadraty */
color: blue; /* Kolor tekstu w liście */
padding-left: 20px; /* Odstęp od lewej krawędzi */
}Można również ostylować poszczególne elementy listy w postaci odstępów, rozmiaru fontu czy wysokości linii tekstu.
ul.custom-list li {
margin-bottom: 10px; /* Odstęp między elementami listy */
font-size: 16px; /* Rozmiar fontu elementów listy */
line-height: 1.6; /* Wysokość linii tekstu */
}Formularze
Formularze są niezwykle ważne w interakcji użytkowników ze stroną internetową. Umożliwiają zbieranie informacji, przesyłanie danych, logowanie, rejestracje i wiele innych funkcji. Element <form> służy do tworzenia formularzy na stronie.
<form action="submit.php">
Imię: <input type="text" name="name">
<input type="submit" value="Wyślij">
</form>Oto rozszerzony przykład, który obejmuje różne typy pól i ustawienia:
<form action="submit.php" method="post">
<label for="name">Imię:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="pwd">Hasło:</label>
<input type="password" id="pwd" name="password" minlength="8" required>
<label for="dob">Data Urodzenia:</label>
<input type="date" id="dob" name="dob">
<label for="country">Kraj:</label>
<select id="country" name="country">
<option value="polska">Polska</option>
<option value="usa">USA</option>
<option value="niemcy">Niemcy</option>
</select>
<input type="submit" value="Wyślij">
</form>W tym przykładzie, oprócz standardowego pola tekstowego dla imienia, dodaliśmy pole typu email, które wymaga wpisania poprawnego adresu email oraz pole na hasło, które ma ustawioną minimalną długość.
Stworzyliśmy również pole na datę urodzenia oraz rozwijane menu do wyboru kraju. Każde pole posiada etykietę (<label>), co jest dobrą praktyką pod względem dostępności i użyteczności formularzy.
Atrybut for w etykietach odpowiada atrybutowi id w polach formularza i tworzy wyraźny związek między etykietą a odpowiednim polem. Dodatkowo, atrybut method w znaczniku <form> określa metodę przesyłania danych, tutaj jako post. Jest to preferowany sposób przy przesyłaniu wrażliwych danych.
Formularze można stylizowć i zarządzać nimi przy użyciu CSS-a i JavaScript-u, aby zapewnić lepszą interakcję użytkownika oraz bezpieczeństwo danych.
Dziękujemy, że przeczytałaś/eś nasz artykuł. Obserwuj EnterTheCode.pl w Wiadomościach Google, aby być na bieżąco.
Czytaj także:
