Pora zacząć coś widzieć i jakiś enter by się przydał. Więc zacznijmy od kolejnego taga który nie ma taga zamykającego jest to. Tag jest tagiem nowej linii, oznacza to że wszystko co się znajdzie za tagiem będzie w nowej linii. A oto przykładowy kod:
<!DOCTYPE html>
<html lang="pl">
<head>
<title>tytuł strony</title>
<meta charset="UTF-8">
<meta name="keywords" content="słowo1, słowo2, słowo3">
<meta name="description" content="Opis strony">
</head>
<body>
jakiś <br> tekst <br> widoczny <br> na <br> stronie
</body>
</html> Pora na coś ciekawszego czyli nagłówki. Nagłówek to tag i on jak widać posiada już tag zamykający cyfra 1 oznacza jego stopień a mamy ich 6 od 1 do 6 i im większy stopień tym mniejszy tekst. A oto przykładowy kod:
<!DOCTYPE html>
<html lang="pl">
<head>
<title>tytuł strony</title>
<meta charset="UTF-8">
<meta name="keywords" content="słowo1, słowo2, słowo3">
<meta name="description" content="Opis strony">
</head>
<body>
<h1>nagłówek 1</h1>
<h2>nagłówek 2</h2>
<h4>nagłówek 4</h4>
jakiś <br> tekst <br> widoczny <br> na <br> stronie
<h6>ostatni nagłówek</h6>
</body>
</html> A to jego rezultat, warto zauważyć że po nagłówkach nie trzeba dawać taga bo nagłówek automatycznie przechodzi do kolejnej linijki:
Poza nagłówkami mamy jeszcze paragrafy czyli tag . Oznaczają one jakąś sekcję. Podobnie jak w przypadku nagłówków nie musimy ich oddzielać tagiem. A oto przykładowy kod:
<!DOCTYPE html>
<html lang="pl">
<head>
<title>tytuł strony</title>
<meta charset="UTF-8">
<meta name="keywords" content="słowo1, słowo2, słowo3">
<meta name="description" content="Opis strony">
</head>
<body>
<h1>nagłówek 1</h1>
<p>jakiś tekst</p> widoczny <p>na stronie</p>
</body>
</html> A oto jak on wygląda na stronie, warto zwrócić uwagę na to że wyraz „widoczny” nie znajduje się wewnątrz taga a jest w oddzielnej linii, tak samo było by gdyby zastąpić tagi nagłówkami:
Na sam koniec może coś bardziej zaawansowanego a mianowicie pora na tag . Jest to nic innego jak hiperłącze zwane potocznie linkiem. Posiada on jeden główny atrybut czyli href=””, oznacza on adres docelowy na jaki ma nas przenieść po kliknięciu w jego zawartość. Posiada on też atrybut target=”” który określa gdzie ma być otwarta nowa karta
A oto przykładowy kod:
<!DOCTYPE html>
<html>
<head lang="pl">
<title>tytuł strony</title>
<meta charset="UTF-8">
<meta name="keywords" content="słowo1, słowo2, słowo3">
<meta name="description" content="Opis strony">
</head>
<body>
<h1>nagłówek 1</h1>
<p>jakiś tekst</p>
<a href="https://google.com"> link bez atrybutu tagreg
</a>
<a href="https://google.com" target="_blank"> link z
target _blank </a>
</body>
</html> A oto jego rezultat lecz warto zwrócić uwagę że w odróżnieniu od nagłówków i paragrafów tag nie przenosi do kolejnej linijki jak i atrybut href wymaga podania odpowiedniego protokołu na początku linku dla stron jest to „https://” lub „http://”:
Kolejnym z tagów jest <img> który jest odpowiedzialny za wyświetlanie obrazów na stronie. Posiada on 4 parametry src=”” który wskazuje źródło obrazu, height=”” width=”” oznaczające wysokość i szerokość zdjęcia oraz alt=”” oznaczające tekst alternatywny wyświetlany w miejscu zdjęcia jeśli nie można go załadować.
A oto przykładowy kod
<!DOCTYPE html>
<html>
<head lang="pl">
<title>tytuł strony</title>
<meta charset="UTF-8">
<meta name="keywords" content="słowo1, słowo2, słowo3">
<meta name="description" content="Opis strony">
</head>
<body>
<h1>nagłówek 1</h1>
<p>gdy uda się załadować obraz</p>
<img src="../imgs/jinx.jpg" height="100px" width="200px"
alt="tu powinien być obraz">
<p>gdy nie uda się załadować obrazu</p>
<img src="fikcyjna ścieżka.png" height="100px"
width="200px" alt="tu powinien być obraz">
</body>
</html>