Wstęp do HTML/CSS: Tworzenie stron internetowych

Marek Hucz

Wstęp do HTML/CSS: Tworzenie stron internetowych

HTML, czyli HyperText Markup Language, to podstawowy język służący do tworzenia struktur stron internetowych. Używany jest do definiowania elementów takich jak nagłówki, akapity, listy, linki, obrazy i wiele innych komponentów, które składają się na kompletną stronę internetową. HTML stanowi szkielet każdej strony WWW, a dzięki jego strukturze możliwe jest przedstawienie informacji w sposób uporządkowany i czytelny.

Każdy dokument HTML rozpoczyna się od deklaracji typu dokumentu (<!DOCTYPE html>), która informuje przeglądarkę o wersji HTML, jakiej ma użyć do interpretacji strony. Następnie mamy otwierający znacznik <html>, który oznacza początek dokumentu HTML, a w jego ramach znajdują się dwa główne elementy: <head> i <body>.

Podstawowe Elementy HTML

Struktura Dokumentu HTML

  1. <!DOCTYPE html> – deklaracja typu dokumentu.
  2. <html> – znacznik otwierający cały dokument HTML.
  3. <head> – sekcja zawierająca meta informacje, takie jak tytuł strony (<title>), linki do plików CSS, skrypty JavaScript oraz meta tagi.
  4. <body> – główna zawartość strony, która jest wyświetlana użytkownikom.

Elementy Treści

  • Nagłówki (<h1> do <h6>): Nagłówki służą do organizowania treści na stronie. <h1> jest najważniejszym nagłówkiem, zazwyczaj używanym dla tytułu strony lub głównych sekcji, natomiast <h6> jest najmniej ważnym.
  • Akapity (<p>): Akapity są podstawowym sposobem prezentacji tekstu na stronie. Użycie <p> tworzy odstępy między blokami tekstu, co poprawia czytelność.
  • Listy (<ul>, <ol>, <li>): Listy są używane do prezentacji elementów w formie wypunktowanej (<ul>) lub numerowanej (<ol>). Każdy element listy znajduje się wewnątrz znacznika <li>.
  • Linki (<a>): Linki są jednym z najważniejszych elementów HTML, pozwalającym na nawigację między różnymi stronami internetowymi. Znacznik <a> zawiera atrybut href, który określa adres docelowy.
  • Obrazy (<img>): Obrazy są wstawiane na stronę za pomocą znacznika <img>, który zawiera atrybut src, wskazujący na lokalizację pliku graficznego.

Wprowadzenie do CSS

CSS, czyli Cascading Style Sheets, to język używany do opisywania wyglądu i formatowania strony stworzonej w HTML. Dzięki CSS możemy kontrolować takie aspekty jak kolory, czcionki, rozmieszczenie elementów na stronie, marginesy, odstępy, a także zaawansowane efekty wizualne, takie jak animacje.

Podstawy CSS

CSS składa się z selektorów i deklaracji. Selektory identyfikują, które elementy HTML mają być stylizowane, natomiast deklaracje definiują właściwości stylów, takie jak kolor tła czy wielkość czcionki.

Przykładowa reguła CSS:

p {
color: blue;
font-size: 16px;
}

W powyższym przykładzie selektor p odnosi się do wszystkich akapitów na stronie, a deklaracje wewnątrz nawiasów klamrowych ustalają kolor tekstu na niebieski oraz rozmiar czcionki na 16 pikseli.

Typy Selektorów

  • Selektory elementów: Stylizują wszystkie wystąpienia danego elementu HTML, np. p, h1, div.
  • Selektory klas (.): Stylizują elementy HTML z określoną klasą, np. .nazwa-klasy.
  • Selektory ID (#): Stylizują element HTML z określonym identyfikatorem, np. #nazwa-id.
  • Selektory atrybutów: Stylizują elementy HTML na podstawie określonego atrybutu, np. input[type="text"].

Model Pudełkowy CSS

Model pudełkowy to fundament zrozumienia, jak elementy są rozmieszczane na stronie. Każdy element HTML traktowany jest jako prostokątne pudełko składające się z:

  1. Content: Główna zawartość elementu.
  2. Padding: Przestrzeń między zawartością a obramowaniem.
  3. Border: Obramowanie wokół elementu.
  4. Margin: Przestrzeń na zewnątrz obramowania.

Model pudełkowy jest kluczowy do tworzenia estetycznych i funkcjonalnych układów stron.

© infoidea.eu