Klovy.pl – Twoje centrum wiedzy!
Related Articles
Witaj w 3 części nauki HTML
Tym razem poznamy także CSS!
Formularze HTML
Formularze są nieodłączną częścią interaktywnych stron internetowych. Pozwalają użytkownikom wprowadzać dane, wysyłać je i przetwarzać. Poniżej znajduje się prosty formularz HTML:
<form action=”/submit_form.php” method=”post”>
<label for=”name”>Imię:</label>
<input type=”text” id=”name” name=”name” required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<input type="submit" value="Wyślij">
</form>Wbudowane formularze i ich walidacja
HTML5 wprowadza wbudowane formularze, takie jak daty, adresy email czy numery telefonów, które ułatwiają użytkownikom wprowadzanie danych i automatyczną walidację. Na przykład:
<label for=”email”>Email:</label>
<input type=”email” id=”email” name=”email” required>
Więcej o formularzach w przyszłości, tutaj użyłem „<form action=”/submit_form.php” method=”post”>” z php, aby pokazać poprawne użycie formularza.
Atrybuty danych
Atrybuty danych (’data-’) pozwalają deweloperom przechowywać dodatkowe informacje w strukturze HTML, które mogą być używane przez skrypty JavaScript lub do zwiększenia semantyki strony. Na przykład:
Semantyka HTML5
HTML5 wprowadza wiele nowych semantycznych elementów, które lepiej opisują strukturę strony. Przykłady to <header>, <footer>, <nav>, <article>, <section> itp. Oto jak ich użyć, np.
<header>
<h1>Logo Strony</h1>
<nav>
<ul>
<li><a href=”#”>Strona główna</a></li>
<li><a href=”#”>O nas</a></li>
<li><a href=”#”>Kontakt</a></li>
</ul>
</nav>
</header>
<section>
<article>
<h2>Tytuł Artykułu</h2>
<p>Treść artykułu…</p>
</article>
</section>
<footer>
<p>© 2024 Nazwa Strony. Wszelkie prawa zastrzeżone.</p>
</footer>
Połączenie CSS z HTML
Aby dodać stylizację CSS do naszego dokumentu HTML, możemy wykorzystać kilka sposobów. Jednym z najpopularniejszych jest użycie elementu
a. Stylizacja za pomocą elementu <style>:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moja pierwsza strona</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
}
h1 {
color: #007bff;
}
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="container">
<h1>Witaj, świecie!</h1>
<p>To jest mój pierwszy paragraf na stronie internetowej.</p>
</div>
</body>
</html>
b. Stylizacja za pomocą zewnętrznego arkusza stylów:
W tym przypadku utwórz plik o rozszerzeniu .css, np. style.css, i odwołaj się do niego w pliku HTML za pomocą elementu :
HTML:<head>
<!-- Pozostałe elementy nagłówka -->
<link rel="stylesheet" href="style.css">
</head>
CSS:body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
}
h1 {
color: #007bff;
}
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
Zaawansowane Techniki CSS
Poza podstawowymi właściwościami CSS, istnieje wiele zaawansowanych technik, które mogą zostać wykorzystane do tworzenia bardziej dynamicznych i interaktywnych stron internetowych. Kilka z nich to:
- Flexbox i Grid: Elastyczne układanie elementów na stronie.
- Animacje i przejścia CSS: Dodawanie animacji i efektów przejścia do elementów HTML.
- CSS Preprocesory (np. Sass, Less): Ułatwiający pisanie i zarządzanie bardziej złożonymi stylami.
- Responsywne Projekty CSS: Dostosowywanie wyglądu strony do różnych urządzeń i rozmiarów ekranu.
Rozwijaj swoje umiejętności z nami!
