Technologie internetowe - Język HTML
1. Język HTML - służy do opisania struktury informacji zawartych wewnątrz strony internetowej, nadając odpowiednie znaczenie semantyczne poszczególnym fragmentom tekstu np. formując hiperłącza, akapity, nagłówki, listy, oraz osadza w tekście dokumentu obiekty plikowe, na przykład multimedia, lub elementy baz danych, np. interaktywne formularze danych.
2. HTML5 jest najnowszą wersją HTMLa. W tej wersji zostały dodane nowe elementy usprawniające tworzenie serwisów i aplikacji internetowych, doprecyzowanie niejasności w specyfikacji HTML 4, dotyczących przede wszystkim sposobu obsługi błędów. Dzięki HTML-owi 5 obsługa błędów ma być ta sama we wszystkich przeglądarkach, czyli zły element będzie działać w każdej przeglądarce albo żadnej. HTML5 stawia na semantykę (np. div -> header, main, article, aside, footer, nav).
Różnice w stosunku do HTML4:
- nowe tagi
- nowe typy pól "input"
- nowe atrybuty, elementy formularzy
- możliwość osadzenia MathML i SVG bezpośrednio w dokumencie
- brak elementów prezentacyjnych
- nie ma elementów przestarzałych
3. Znacznik to wyrażenie zawierające się pomiędzy nawiasami ostrymi np. <p> (znacznik otwarcia), </p> (znacznik zamknięcia). Składa się z lewego nawiasu, (w przypadku zamknięcia) forward slash, wyrażenia, prawy nawias. Białe znaki zawarte w tekście wewnątrz elementu domyślnie nie są interpretowane przez przeglądarkę. Znacznik <br> służy do przeniesienia tekstu do kolejnej linii.
4. Zapis <!DOCTYPE html> informuje przeglądarkę, że jest to dokument html.
5. Deklaracji języka html dokonujemy znacznikiem <html>. Ten znacznik zamieszcza się pod znacznikiem deklaracji dokumentu. Pomiędzy <html> i </html> umieszczany jest język html.
6. Pomiędzy znacznikami <head> i </head> zamieszcza się maszynowo odczytywane informacje takie jak tytuł strony, język, którym będziemy się posługiwać, meta dane o dokumencie itp.
7. Pomiędzy znacznikami <body> oraz </body> lokujemy wszystkie informacje, które chcielibyśmy umieścić na stronie.
8. Meta tagi to dane informujące przeglądarkę o ustawieniach strony internetowej i dlatego wszystkie meta tagi trafią do sekcji <head>
np.
<meta charset="utf-8"> (polskie znaki)
9. Szkielet strony HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tytuł strony</title>
</head>
<body>
Strona internetowa
</body>
</html>
10. Podstawowe naczniki:
- Nagłówki tworzymy używając elementów od <h1>do<h6>. Cyfry od 1do 6 oznaczają hierarchię nagłówków, zaczynając od 1 jako najważniejszego w hierarchii.
- <p> - paragraf
- <strong> lub <b> - wyraz pogrubiony
- <em> lub <i> - wyraz pochylony
- <small> - wyraz pomniejszony
- <mark> - podświetlony wyraz
- <sup> - indeks górny
- <sub> - indeks dolny
11. Do grupowania treści w html’u używamy list.
- lista uporządkowana (elementy posiadają pewną numerację) - <ol>
- lista nieuporządkowana (elementy listy to po prostu kolejne jej podpunkty) - <ul>
- lista definicji - <dl>
<li> to zarówno w liście uporządkowanej, jak i nieuporządkowanej element listy.
W listach definicji pomiędzy znacznikami <dt> wpisujemy pojęcie, natomiast pomiędzy <dd> treść definicji.
np.
<ol>
<li>element listy</li>
<li>element listy</li>
</ol>
<dl>
<dt>Pojęcie</dt>
<dd>Definicja</dd>
</dl>
W listach można zagnieżdżać inne listy.
np.
<ul>
<li>Pierwszy</li>
<li>Drugi
<ul>
<li>Element 2.1</li>
<li>Element 2.2</li>
</ul>
</li>
<li>Trzeci</li>
</ul>
12. W folderze, w którym umieszcza się plik html możemy umieszczać także pliki zewnętrzne np. pliki multimedialne: filmy, grafika, zdjęcia, a także pliki w innych językach, np. CSS, PHP, JavaScript.
- <a> zapisywanie linków (np. z atrybutem href ->
Atrybuty danego elementu zawsze zapisujemy w znaczniku otwierającym. Element od atrybutu oddzielamy spacją. Przypisanie własności do atrybutu odbywa się poprzez znak = (równa się), a wartość przypisuje się pomiędzy znakami cudzysłowu ("").. Pomiędzy <a> i </a> wpisujemy tekst, który ma się wyświetlić na stronie (po kliknięciu przeniesie nas na daną stronę).
Inne atrybuty do tego znacznika:
- target (atrybut pozwala określić w jakim miejscu ma być otwarty nowy link np. "_self" - otwiera link w tym samym oknie / karcie (wartość domyślna) lub "_blank" - otwiera link w nowej karcie. Wartość domyślna, czyli taka, która wykona się domyślnie, jeżeli nie ustawimy innej wartości atrybutu target.
Link do sekcji:
np.
<a href="#first">Pierwszy paragraf</a>
Po kliknięciu na powyższy link strona przeniesie nas do odpowiedniej sekcji na tej samej stronie (musi być określony ID tak jak poniżej)
<p id="first">Tekst paragrafu</p>
Linki do podstron:
<a href="kontakt/index.html">Kontakt</a> (kontakt to folder, w którym umieszczony jest plik index.html, czyli plik html z naszą podstroną). Powrót do strony głównej powinien nastąpić poprzez dwie kropki. Czyli:
Zapis linków na stronie głównej.
<a href="#">Strona Główna</a>
<a href="kontakt/index.html">Kontakt</a>
Zapis linków na podstronie kontakt.
<a href="../index.html">Strona Główna</a>
<a href="#">Kontakt</a>
- <img> - dodanie zdjęcia na stronie (nie potrzebuje znacznika zamykającego). W atrybucie src podaje się źródło zdjęcia z rozszerzeniem. Jednymi z bardziej istotnych atrybutów elementu <img> są parametry jego rozmiaru, czyli szerokość (ang. width) oraz wysokość (ang. height). We właściwości alt możemy ustawić co powinno wyświetlić się, gdy nie wyświetli się obraz.
np.
<img src=„grafika.png" alt="Grafika nie wyświetliła się" width="170" height="56">
- <table> rozpoczyna tabelę, <tr> definiuje każdy jej wiersz, <td> i <th> każdą komórkę w wierszu (<th> -> element wytłuszczony w tabeli).
Odstępy między komórkami tworzącymi tabelę uzyskamy przy pomocy atrybutu (dla table) cellspacing="n".
Łączenie komórek w wierszu: w znaczniku <td> definiujemy atrybut colspan="n" (n to ilość sąsiednich komórek do połączenia).
Łączenie komórek w kolumnie: w znaczniku <td> definiujemy atrybut rowspan="n" (n to ilość sąsiednich komórek do połączenia).
Wyrównywanie zawartości komórek: atrybut align (w poziomie), valign (w pionie) w znaczniku <td>
np.
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>