Podstawy tworzenia stron internetowych

Podstawy tworzenia stron internetowych — język HTML oraz style CSS — to praktyczny temat matury rozszerzonej z informatyki, wprowadzający ucznia w mechanikę budowy współczesnych stron WWW od strony strukturalnej i wizualnej.

Lekcja rozpoczyna się od znaczników semantycznych HTML5, takich jak `<nav>` — element przeznaczony specjalnie do bloków nawigacyjnych, w odróżnieniu od bardziej ogólnych znaczników jak `<section>` (ogólna sekcja), `<header>` (nagłówek) czy `<article>` (niezależna treść). Uczeń poznaje też podstawowe znaczniki strukturalne: `<ul>` dla list nieuporządkowanych (wypunktowanych) i `<ol>` dla list uporządkowanych (numerowanych), a także atrybuty kluczowe dla dostępności strony — `href` w znaczniku `<a>` (wskazujący adres docelowy hiperłącza) oraz `alt` w znaczniku `<img>` (tekst alternatywny wyświetlany, gdy obraz nie może zostać załadowany).

Druga część materiału koncentruje się na CSS — języku stylów odpowiedzialnym za wygląd strony. Kluczowym tematem jest rozróżnianie typów selektorów: selektory klas (poprzedzone kropką, np. `.menu`), selektory ID (poprzedzone hashem, np. `#header`) oraz selektory typu (np. `p`, bez prefiksu). Uczeń ćwiczy też bardziej zaawansowaną składnię — selektor potomka (`.container p`), wybierający wszystkie elementy `<p>` zagnieżdżone wewnątrz elementu o klasie `container`.

Materiał omawia właściwości CSS odpowiedzialne za typografię — `font-size`, `font-family` oraz `font-weight` bezpośrednio wpływają na wygląd czcionki, w odróżnieniu od `text-align`, która dotyczy wyrównania tekstu, a nie samej czcionki. Uczeń poznaje też dopuszczalne jednostki miary dla rozmiaru czcionki w CSS: piksele (`px`), jednostkę względną `em` oraz procenty (`%`) — w przeciwieństwie do `deg`, stosowanej wyłącznie w transformacjach kątowych.

Ten zestaw pytań i fiszek buduje solidne podstawy budowy stron internetowych — od struktury dokumentu HTML po podstawową stylizację CSS — niezbędne kompetencje na egzaminie maturalnym z informatyki i w praktycznym web developmencie.

  • Uczeń rozpoznaje semantyczne znaczniki HTML5 (nav, section, header, article) i ich przeznaczenie
  • Uczeń stosuje znaczniki list uporządkowanych i nieuporządkowanych (ol, ul)
  • Uczeń zna kluczowe atrybuty HTML: href w znaczniku a oraz alt w znaczniku img
  • Uczeń rozróżnia selektory CSS: klasy (.), ID (#) i typu elementu
  • Uczeń stosuje selektor potomka do wybierania zagnieżdżonych elementów
  • Uczeń rozróżnia właściwości CSS dotyczące czcionki od właściwości wyrównania tekstu
  • Uczeń zna dopuszczalne jednostki miary dla rozmiaru czcionki w CSS (px, em, %)

Materiał tematyczny (bez dokumentu źródłowego): podstawy tworzenia stron internetowych — język HTML (znaczniki, struktura dokumentu, listy, tabele, hiperłącza, obrazy) oraz podstawy CSS (selektory, style, właściwości kolorów i czcionek), zgodnie z zakresem matury rozszerzonej z informatyki.

Przykładowe pytanie

Który z wymienionych znaczników HTML5 służy do definiowania sekcji nawigacyjnej strony?

Zobacz odpowiedź

<nav>

Znacznik <nav> jest semantycznym elementem HTML5 przeznaczonym do bloków nawigacyjnych. Pozostałe znaczniki służą do innych celów: <section> to ogólna sekcja, <header> to nagłówek, a <article> to niezależna treść.

Spróbuj tego quizu →Podejdź do tego egzaminu →Powtórz te fiszki →

← Informatyka

↑ Matura