09 – HTML, CSS – tekst i czcionka, identyfikatory i klasy.

1. Najpierw test: https://egzamin-informatyk.pl/testy-html-css-js-php/

2. Teraz zadanie:

Opis zadania

Stwórz prostą stronę internetową składającą się z pliku HTML oraz powiązanego arkusza CSS, która przedstawia krótki tekst informacyjny (np. paragraf powitania, nagłówek, cytat). Twoim celem jest:

1. użycie identyfikatorów (id) i klas (class) w HTML,

2. nadanie stylu tekstowi za pomocą CSS (czcionka, rozmiar, waga, styl),

3. wyraźne rozróżnienie stylów dla elementów oznaczonych różnymi klasami i identyfikatorami.

Wymagania techniczne

1. Struktura HTML

• Utwórz plik index.html.

• W pliku umieść co najmniej:

  • nagłówek (<h1>) zawierający tytuł strony, z przypisanym identyfikatorem main-title.

  • paragraf (<p>) z tekstem powitania lub opisu strony, z przypisaną klasą welcome-text.

  • paragraf lub blok tekstu (<div> albo <p>) ze stylizowanym cytatem, z klasą highlight i identyfikatorem quote.

  • span lub inny element inline, np. w środku paragrafu, z klasą small-note, zawierający dodatkową, mniejszą uwagę (np. „Uwaga: to jest wersja robocza”).

2. Arkusz CSS

• Utwórz plik styles.css i podłącz go w nagłówku HTML (<link rel="stylesheet" href="styles.css">).

• Zdefiniuj style dla następujących selektorów:

  Selektor	Wymagane style
  #main-title	font-family, font-size, font-weight, color
  .welcome-text	font-family, font-size, line-height
  #quote	font-style: italic, font-size, color
  .highlight	(jeśli używasz klasy highlight na tym samym elemencie co #quote, styl klasy ma być nieco inny niż w identyfikatorze — np. zmiana tła lub obramowania)
  .small-note	mniejsza czcionka, np. font-size: 0.8em lub small, oraz inny kolor (np. jaśniejszy lub kontrastujący)

Kryteria oceny

Podczas oceniania zadania (np. w kontekście egzaminu lub ćwiczenia) zwróć uwagę na:

1. Poprawność HTML i CSS: identyfikatory i klasy są użyte zgodnie z wymaganiami, bez literówek, selektory są dobrze sparowane.

2. Styl czcionki: różne elementy mają odpowiednio dobraną rodzinę czcionek, rozmiar, wagę lub styl.

3. Czytelność i estetyka: tekst jest czytelny, kolory i odstępy są estetyczne i spójne.

4. Modularność CSS: unikasz powielania tych samych właściwości – klasy i identyfikatory mają sens.