Zasady tworzenia stron internetowych 7K

Dzisiaj nauczysz się, jak stworzyć swoją pierwszą stronę internetową w języku HTML – bez instalowania żadnych programów.
Wystarczy przeglądarka i darmowy edytor online
https://www.programiz.com/html/online-compiler/

Co to jest strona internetowa?

Strona internetowa to dokument tekstowy zapisany w specjalnym języku – HTML.
Każda strona ma swoją strukturę, czyli układ znaczników, które mówią przeglądarce, jak ma wyświetlić treść.
Taki dokument można otworzyć w przeglądarce (np. Chrome, Edge, Firefox) i zobaczyć go tak, jak widzą inne osoby w internecie.

Jak działa HTML?

HTML to skrót od HyperText Markup Language – język znaczników używany do tworzenia stron WWW.
Każdy znacznik ma budowę:

Na przykład:

<p>To jest mój pierwszy akapit.</p>

– <p> oznacza akapit (ang. paragraph),
– przeglądarka wyświetla tylko tekst pomiędzy znacznikami.

Przykład użycia znacznik z atrybutem określającego jego działanie.

Przykład realizacji ćwiczenia

gdzie:

<!DOCTYPE html> – informacja dla przeglądarki o standardzie dokumentu (HTML5),

<meta charset="UTF-8"> – ustawia kodowanie znaków (umożliwia poprawne wyświetlanie polskich liter),

<title> – tytuł strony widoczny na karcie przeglądarki,

<h1> – nagłówek główny,

<p> – akapity opisujące wybraną dyscyplinę sportu.

Ćwiczenie 1. Moja pierwsza strona WWW

Otwórz Programiz HTML Online Compiler.
Wklej poniższy kod po lewej stronie:

<!DOCTYPE html>
<html>
<head>
  <title>Moja pierwsza strona</title>
</head>
<body>
  <h1>Witaj na mojej stronie!</h1>
  <p>To jest mój pierwszy akapit w języku HTML.</p>
</body>
</html>

Kliknij przycisk Run i zobacz, co się pojawi po prawej stronie.
Zmień tytuł strony w znaczniku <title> na swoje imię.
Dopisz jeszcze jeden akapit, np. o czym będzie Twoja strona.

Ćwiczenie 2. Formatowanie tekstu

Znaczniki HTML pozwalają wyróżniać tekst – pogrubiać, kursywą, podkreślać itp.
Dodaj poniższy fragment kodu do sekcji <body>:

<h2>O mnie</h2>
<p><b>Jestem uczniem klasy 7.</b> Lubię informatykę i programowanie.</p>
<p><i>Uczę się języka HTML, aby tworzyć własne strony internetowe.</i></p>
<p>Moje zainteresowania to: <u>sport, muzyka, gry komputerowe.</u></p>

Kliknij Run i sprawdź, jak zmienia się wygląd tekstu.
Dodaj własny akapit, np. o ulubionej grze, filmie lub zwierzaku.

Ćwiczenie 3. Strona o sporcie

Spróbuj stworzyć stronę według poniższego przykładu:

<!DOCTYPE html>
<html>
<head>
  <title>Moja ulubiona dyscyplina sportu</title>
</head>
<body>
  <h1>Moja ulubiona dyscyplina sportu</h1>
  <h2>Piłka nożna</h2>

  <p>Piłka nożna to najpopularniejszy sport na świecie.</p>
  <p>Do gry potrzebna jest piłka i dwie bramki. Grają dwie drużyny po 11 zawodników.</p>
  
  <p><b>Najważniejsze zasady:</b></p>
  <ul>
    <li>Nie dotykaj piłki rękami (poza bramkarzem).</li>
    <li>Wygrywa drużyna, która strzeli więcej goli.</li>
    <li>Mecz trwa 90 minut.</li>
  </ul>
</body>
</html>

Uruchom stronę i obejrzyj efekt.
Zmień temat sportu (np. koszykówka, pływanie, siatkówka, taniec).

Formatowanie tekstu na stronie

Ćwiczenie 4. Formatowanie tekstu na stronie WWW

Kolor i styl

Dodaj kolor tła i tekstu, dopisując atrybut style w znaczniku <body>:

<body style="background-color: lightblue; color: darkblue;">

Możesz też poeksperymentować:

lightgreen
pink
yellow
white

Co warto zapamiętać

Każda strona HTML ma znaczniki <html>, <head> i <body>.
Znaczniki otwierają się i zamykają, np. <p>…</p>.
Tytuł strony widoczny jest na pasku przeglądarki (znacznik <title>).
Znaczniki formatowania (<b>, <i>, <u>, <h1>–<h6>) zmieniają wygląd tekstu.
Atrybuty, np. style, pozwalają zmieniać kolor, rozmiar lub układ tekstu.

Przykładowy schemat strony internetowej.

Zadanie końcowe

Stwórz własną stronę o tytule:
„Mój ulubiony przedmiot szkolny”

Na stronie umieść:

co najmniej 3 nagłówki (<h1>, <h2>, <h3>),
2 akapity tekstu,
listę punktowaną,
tekst zapisany pogrubieniem i kursywą.

Uruchom stronę w Programiz i zobacz, jak wygląda efekt.
Możesz zrobić zrzut ekranu lub skopiować link do swojej pracy.