HTML

Źródło: Markus Spiske / Pexels

HTML (HyperText Markup Language) to język służący do tworzenia stron internetowych. Jest to język znaczników, co oznacza, że ​​służy do definiowania struktury i treści strony internetowej. Zawiera on tagi, które definiują różne elementy strony, takie jak nagłówki, paragrafy, obrazy i hiperłącza. HTML jest podstawowym językiem używanym do tworzenia stron internetowych i jest stosowany w połączeniu z innymi językami, takimi jak CSS i JavaScript.

Zadania sprawdzające znajomość HTML

1. Jak stworzyć nagłówek z tytułem strony?

W HTML wyróżniamy 6 rodzajów nagłówków: od <h1> do <h6>. Jako, że tytuł jest głównym elementem na stronie – zastosujemy w tym przypadku nagłówek <h1>

<h1>Tytuł Twojej strony</h1>

2. Jak dodać link do innej strony internetowej?

Aby dodać link do innej strony internetowej w HTML, możesz użyć tagu <a> (anchor) i atrybutu href, jak pokazano poniżej:

<a href=„https://www.innastrona.pl”>Tekst odnośnika</a>

3. Jak dodać obraz do strony internetowej?

Aby dodać obraz do strony internetowej w HTML, możesz użyć tagu <img> i atrybutu src, jak pokazano poniżej:

<img src=”sciezka/do/obrazka.jpg” alt=”Tekst alternatywny” width=”500″ height=”300″ />

4. Jak utworzyć listę punktowaną?

Aby utworzyć listę punktowaną w HTML, możesz użyć tagu <ul> (unordered list) i tagu <li> (list item), jak pokazano poniżej:

<ul>
     <li>Pierwszy punkt</li>
     <li>Drugi punkt</li>
     <li>Trzeci punkt</li>
</ul>

5. Formularz rejestracji użytkownika

Stwórz formularz rejestracji użytkownika, który będzie składał się z pól: imię, nazwisko, adres e-mail, hasło oraz przycisku „Zarejestruj się”. Zadbaj o poprawne oznaczenie pól formularza oraz o walidację pól (np. adres e-mail powinien zawierać znak „@”).

<form>
     <label for=”imie”>Imię:</label>
     <input type=”text” id=”imie” name=”imie” required>

     <label for=”nazwisko”>Nazwisko:</label>
     <input type=”text” id=”nazwisko” name=”nazwisko” required>

     <label for=”email”>Adres e-mail:</label>
     <input type=”email” id=”email” name=”email” required>

     <label for=”haslo”>Hasło:</label>
     <input type=”password” id=”haslo” name=”haslo” required>

     <input type=”submit” value=”Zarejestruj się”>
</form>

Wyjaśnienie:

W powyższym kodzie HTML utworzono formularz, który składa się z pięciu pól. Każde pole jest opisane przez etykietę (element label), która jest połączona z odpowiednim polem za pomocą atrybutu for, który wskazuje na id pola.

Pierwsze cztery pola są wymagane (required), co oznacza, że formularz nie zostanie wysłany, jeśli użytkownik nie uzupełni wszystkich wymaganych pól.

Pole e-mail ma typ email, co powoduje, że przeglądarka będzie sprawdzała, czy wartość wpisana przez użytkownika jest poprawnym adresem e-mail.

Ostatnie pole to przycisk „Zarejestruj się” (input type="submit"), który umożliwia wysłanie formularza.