Każdy, kto zaczyna swoją przygodę z tworzeniem stron internetowych czy chociaż blogowaniem, powinien poznać podstawowe kody HTML. Są właściwie niezbędne, żeby stworzyć swoje miejsce w sieci, nawet jeśli korzysta się z systemów CMS (system zarządzania treścią). Na szczęście podstawowe tajniki HTML-a nie są trudne i w krótkim czasie można się przekonać, że ten kod nie gryzie. Poznaj podstawowe kody HTML.
HTML czyli Hypertext Markup Language jest językiem znaczników, którego używa się do tworzenia stron internetowych. Może mieć wpływ zarówno na strukturę witryny, jak i jej zawartość. Wbrew dosyć powszechnej opinii HTML nie jest językiem programowania. Najtrafniejszym określeniem jest właśnie język znaczników, ponieważ dzięki tzw. tagom, pozwala na odpowiednie przygotowanie strony pod kątem jej wyglądu i funkcjonalności.
Prototypowe wręcz wersje HTML powstawały jeszcze w latach 80. ubiegłego wieku. Za datę publikacji pierwszej oficjalnej wersji przyjmuje się rok 1991, a kolejne odsłony kodu pojawiały się dosyć dynamicznie w kolejnych latach. Dopiero końcówka 1997 i początek 1998 roku przyniosły wersję, która stała się standardem na kilka lat – HTML 4.0. Od 2014 roku rekomendowanym językiem stał się HTML 5 i tak jest do dziś.
Jak już wcześniej wspomniałem HTML opiera się na tagach. Składają się one ze znacznika otwierającego, zamykającego, a także jego zawartości, która może zawierać również atrybuty. Przykładowo, chcąc stworzyć akapit lub paragraf, dany tekst w kodzie HTML powinien wyglądać tak:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta name="Description" content="Opis strony widoczny w wyszukiwarkach" />
<meta name="Keywords" content="Słowa kluczowe widoczne dla wyszukiwarek" />
<meta charset="utf-8">
<title>Tytuł strony w wyszukiwarce</title>
</head>
<body>
Treść strona widoczna dla użytkownika.
</body>
</html>
Znacznik <!DOCTYPE html> informuje przeglądarkę, że dokument zgodny jest ze standardem HTML5. Powinien znaleźć się na początku kodu danej strony. Następnie konieczne jest ustawienie języka polskiego, do czego wykorzystasz znacznik <html lang=”pl”>.
Element <head> zawiera informacje o stronie, które przeznaczone są dla przeglądarek i wyszukiwarek. W powyższym przykładzie są to: opis strony, słowa kluczowe oraz język kodowania. Ale na bardziej zaawansowanych witrynach można rozbudować go jeszcze np. o styl CSS czy użyte skrypty. Możliwości jest bardzo dużo, a każda dodatkowa informacja może wpłynąć na sposób wyświetlania strony czy jej wyniki w wyszukiwarkach. Jest to jednak bardzo ogólne stwierdzenie i rozwinięcie zasługuje na zupełnie osobny artykuł. Skupmy się na podstawach.
W znaczniku <body> wprowadza się zawartość strony, jaka wyświetli się użytkownikowi. W tym wypadku będzie to jedno zdanie. Koniecznie zwróć uwagę na wszystkie znaki znajdujące się wewnątrz tagu: znaki równości, cudzysłowy, slash w tagu zamykającym czy spacje pomiędzy atrybutami. Nawet minimalny błąd sprawi, że treść na stronie nie wyświetli się poprawnie.
A jak wygląda rozbudowana i profesjonalna strona? Kod możesz podejrzeć, klikając prawym przyciskiem myszy w dowolnym miejscu strony i wybrać z listy Wyświetl źródło strony. Na przykładzie tego artykułu widać, że kod jest bardzo złożony. Ale spokojnie, nie musisz wprowadzać go ręcznie od początku do końca – wystarczy zastosować gotowy system CMS, o którym pisałem już przy okazji tekstu o tworzeniu stron internetowych.
Wróćmy jednak do HTML-a, bo mimo gotowych rozwiązań, jego znajomość znacznie ułatwi prowadzenie strony internetowej. Pora poznać najważniejsze znaczniki HTML.
Poniżej znajdziesz najważniejsze tagi, które pozwolą Ci odpowiednio sformatować tekst:
<h1>Nagłówek pierwszego rzędu</h1>
<h2>Nagłówek drugiego rzędu</h2>
<h3>Nagłówek trzeciego rzędu</h3>
<b>pogrubiony tekst</b>
<i>pochylony tekst</i>
<u>podkreślony tekst</u>
Przykładowy tekst<br>
A tutaj fragment, który pojawi się niżej
<center>Wyśrodkowany tekst</center>
<strong>Premiera Football Managera 2022 zaplanowana jest na 9 listopada 2021 roku.</strong> W najpopularniejszego managera piłkarskiego zagramy na PC, urządzeniach mobilnych, konsolach Xbox oraz Nintendo Switch. Gra nie trafi na PlayStation.
By wstawić obraz na stronę, użyj następującego kodu:
<img src="https://adresstrony.pl/moje-zdjecie.jpg" alt="Moje zdjęcie">
W takim tagu znajdują się dwa atrybuty: img src – adres obrazka oraz alt – tekst, jaki wyświetli się gdy z jakiegoś powodu nie uda się wczytać grafiki. Tekst alternatywny przydaje się też osobom z wadami wzroku, które korzystają ze specjalnych czytników. Dlatego trzeba zadbać o to, by opis zawierał wszystkie informacje o obrazku. Podane w przykładzie Moje zdjęcie nic nie powie czytelnikowi i warto byłoby po krótce opisać, co na tym zdjęciu się znajduje.
Linki są jednymi z najważniejszych elementów strony. Dlatego trzeba wiedzieć, w jaki sposób wstawiać je na stronę w kodzie HTML.
<a href="https://geex.x-kom.pl">Przejdź do portalu Geex</a>
Tag z linkiem składa się z trzech elementów:
Lista na stronie przyda się do wypunktowania ważnych informacji. W kodzie HTML możesz stworzyć listę uporządkowaną lub nieuporządkowaną. Każdy punkt może być poprzedzony cyfrą, literą lub znakiem.
W celu stworzenia listy uporządkowanej skorzystaj z tagu <ol>, a każda kolejna pozycja powinna rozpoczynać się od <li>. Tag bez atrybutu utworzy listę numerowaną. Jeśli zależy Ci na liście, której kolejne pozycje będą zgodne z literami alfabatu, rozpocznij ją tagiem <ol type=”a”>, a gdy mają to być cyfry rzymskie, odpowiedni będzie tag <ol type=”i”>.
<ol>
<li>pozycja pierwsza
<li>pozycja druga
<li>pozycja trzecia
</ol>
<ol type="a">
<li>pozycja pierwsza
<li>pozycja druga
<li>pozycja trzecia
</ol>
<ol type="i">
<li>pozycja pierwsza
<li>pozycja druga
<li>pozycja trzecia
</ol>
Ten typ listy przyda się, jeśli kolejność nie ma znaczenia, np. w celu wypunktowania ważnych informacji. By taką listę stworzyć, skorzystaj z tagu <ul>. Standardowo punktorem jest kropka, ale styl można zmieniać. Wtedy przyda się tag z atrybutem: <ul type=”circle”> – koło, <ul type=”square”> – kwadrat.
<ul>
<li>pierwsza pozycja</li>
<li>druga pozycja</li>
<li>trzecia pozycja</li>
</ul>
W jednej liście możliwe jest również zagnieżdżenie kolejnej, w celu stworzenia podpunktów. Szczególnie zwróć uwagę na umiejscowienie znaczników <li> oraz </li>, by lista wyświetlała się poprawnie. W przykładzie wykorzystane są też style.
<ul type="disc">
<li>pierwsza pozycja</li>
<li>druga pozycja
<ul type="square">
<li>pierwszy podpunkt</li>
<li>drugi podpunkt</li>
<li>trzeci podpunkt</li>
</ul>
</li>
<li>trzecia pozycja</li>
</ul>
Możesz także zagnieżdżać listy nieuporządkowane w uporządkowanych i odwrotnie.
<ul>
<li>pierwsza pozycja</li>
<li>druga pozycja
<ol>
<li>pierwszy podpunkt</li>
<li>drugi podpunkt</li>
<li>trzeci podpunkt</li>
</ol>
</li>
<li>trzecia pozycja</li>
</ul>
<ol>
<li>pierwsza pozycja</li>
<li>druga pozycja
<ul>
<li>pierwszy podpunkt</li>
<li>drugi podpunkt</li>
<li>trzeci podpunkt</li>
</ul>
</li>
<li>trzecia pozycja</li>
</ol>
Tabele przydadzą się do czytelnego przedstawiania danych na stronie. Niezbędny do ich stworzenia jest znacznik <table>. Następnie tabele musisz podzielić na wiersze – <tr> oraz kolumny – <td>. Przykład najprostszej tabeli znajdziesz poniżej:
<table>
<tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
<tr>
<td>5</td> <td>6</td> <td>7</td> <td>8</td>
</tr>
<tr>
<td>9</td> <td>10</td> <td>11</td> <td>12</td>
</tr>
</table>
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
By tabela była bardziej przejrzysta, warto nadać jej odpowiednie parametry. Możesz wykorzystać takie atrybuty jak: cellspacing – szerokość krawędzi komórek, cellpading – odległość tekstu od krawędzi komórki, border – szerokość obramowania tabeli, frame – typ obramowania tabeli, width – szerokość tabeli (w procentach lub pikselach), height – wysokość tabeli (również w procentach lub pikselach) align – wyrównanie tekstu czy bgcolor – kolor tła. Są to najbardziej podstawowe i najczęściej spotykane parametry.
<table cellspacing="2" border="2">
<tr bgcolor="DDEF81">
<td width="50%">50%</td><td width="25%">25%</td><td width="25%">25%</td>
</tr>
<tr>
<td width="50%">50%</td><td width="25%">25%</td><td width="25%">25%</td>
</tr>
</table>
| 50% | 25% | 25% |
| 50% | 25% | 25% |
Przydatne może być również łączenie kolumn, ponieważ przedstawione dane mogą być wtedy bardziej czytelne. W tym celu skorzystaj z atrybutów colspan – poziomo lub rowspan – pionowo. Wartość jaką wpiszesz, będzie liczbą kolejnych scalonych komórek.
<table border="1">
<tr>
<td rowspan="2">1</td><td>2</td><td>3</td><td>4</td>
</tr>
<tr>
<td>5</td><td>6</td><td>7</td>
</tr>
</table>
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 |
<table border="1">
<tr>
<td colspan="2">1</td><td>2</td>
</tr>
<tr>
<td>3</td><td>4</td><td>5</td>
</tr>
</table>
| 1 | 2 | |
| 3 | 4 | 5 |
Oczywiście są to przykłady najprostszych tabel. Bardziej zaawansowane stworzysz, nadając im więcej parametrów.
Dowiedz się więcej, jeśli planujesz stworzyć swoje miejsce w sieci:
bardzo ciekawe
Super, ciesze sie aksamitnie to wygląda. Zabieram sie za czytanie
przydatne
super!! bardzo czytelna i łatwa w zrozumieniu strona:)
Wreszcie coś fajnie pokazane z podstaw . Dzięki
super, pomogła mi bo jestem zielony w temacie. pozdrawiam
Witam prowadzę radio internetowe i chciałbym ulepszyć ramówkę wygląd i stylizacje czy mogę liczyć na pomoc? dziękuje.
hej chcialnym prosić pomoc
ok
dok