HTML (HyperText Markup Language) i CSS (Cascading Style Sheets) to dwa podstawowe filary tworzenia stron internetowych. HTML odpowiada za strukturę i treść, a CSS za wygląd i prezentację. Odpowiednie zrozumienie ich ról oraz zasad współpracy pozwala tworzyć funkcjonalne i atrakcyjne strony www.
HTML — fundament każdej strony internetowej
HTML to język znaczników, za pomocą którego opisuje się strukturę informacji na stronie. Znacznikami (tagami) wskazujemy przeglądarce, czym są poszczególne fragmenty treści, np. nagłówkami, akapitami, obrazami czy listami.
Przykładowe zastosowanie HTML:
<!DOCTYPE html>
<html>
<head>
<title>Moja pierwsza strona</title>
</head>
<body>
<h1>Witamy na stronie!</h1>
<p>To jest przykładowy akapit.</p>
<img src="avatar.png" alt="Avatar użytkownika">
<ul>
<li>Pierwszy element listy</li>
<li>Drugi element listy</li>
</ul>
</body>
</html>
Wyjaśnienie powyższego kodu:
- <h1> – główny nagłówek strony;
- <p> – akapit tekstu;
- <img> – osadzenie obrazu;
- <ul> oraz <li> – tworzenie list nieuporządkowanych.
HTML sam w sobie nie nadaje stronie koloru, nie określa rozmiaru czcionek ani nie ustawia elementów w kolumnach. Dba jedynie o to, „co jest czym” na stronie.
CSS — wygląd i stylizacja witryn
CSS to specjalny język przeznaczony do definiowania wyglądu (stylów) elementów HTML. Dzięki niemu zmienisz kolory, rozmiary czcionek, marginesy, rozmieszczenie motywów i inne cechy wizualne strony.
Przykładowa definicja CSS:
body { background-color: #f0f0f0; font-family: Arial, sans-serif; }
h1 { color: #0055aa; text-align: center; }
img { border-radius: 50%; width: 120px; }
Ten fragment CSS:
- Ustawia jasnoszare tło i czcionkę dla całej strony,
- zmienia kolor i wyśrodkowanie nagłówka,
- zaokrągla obrazek i ustawia jego rozmiar.
Stosując CSS można:
- precyzyjnie określać kolory tła i tekstów,
- ustawiać odstępy, marginesy i ramki,
- tworzyć responsywne układy (dostosowujące się do różnych ekranów),
- dodawać animacje, efekty przejścia, gradienty oraz cienie.
Różnice w skrócie
| Cecha | Html | Css |
|---|---|---|
| Przeznaczenie | Treść i struktura strony | Wygląd i prezentacja elementów |
| Format | Język znaczników (tagów) | Język arkuszy stylów |
| Przykład | <h1>Wiadomość</h1> |
h1 { color: red; font-size: 32px; } |
| Możliwości | Osadzanie tekstów, obrazów, linków | Zmiana kolorów, układów, animacji |
Przykład zastosowania HTML i CSS w praktyce
Odpowiednia współpraca HTML i CSS pozwala uzyskać profesjonalny efekt.
Kod HTML
<div class="karta-produktu">
<img src="produkt.jpg" alt="Przykładowy produkt">
<h2>Nazwa produktu</h2>
<p>Krótkie podsumowanie oferty.</p>
<button>Kup teraz</button>
</div>
Kod CSS
.karta-produktu {
border: 1px solid #dddddd;
padding: 20px;
background: #fff;
width: 300px;
border-radius: 10px;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.karta-produktu img {
width: 100%;
border-radius: 10px;
}
.karta-produktu button {
background-color: #0057b7;
color: #fff;
border: none;
padding: 10px 18px;
border-radius: 5px;
cursor: pointer;
}
W powyższym przykładzie:
- HTML buduje strukturę (produkt składa się z obrazu, tytułu, opisu i przycisku),
- CSS wpływa na kolorystykę, rozmiary, marginesy, kształty i efekty wizualne.
Podsumowanie roli HTML i CSS w projektowaniu stron
- Html jest odpowiedzialny za semantykę – informuje, czym są poszczególne elementy (np. menu, nagłówek, obraz, lista);
- Css umożliwia pełną kontrolę nad wizualną stroną projektu – od prostych modyfikacji kolorów po złożone układy responsywne, animacje i efekty specjalne.
Rozdzielenie tych dwóch technologii pozwala projektować nowoczesne, estetyczne i dostępne strony internetowe, które łatwo rozbudowywać i utrzymywać.
Znajomość zarówno HTML, jak i CSS to klucz do tworzenia własnych witryn internetowych, sklepów, blogów czy portfolio online.
