Szkielet dokumentu
Wstawienie obrazka
Ustawienie obrazka
<img src="Tu podaj względną ścieżkę dostępu do obrazka" alt="Tu podaj tekst alternatywny" align="ustawienie">
gdzie zamiast: „Tu podaj względną ścieżkę dostępu do obrazka” należy podać lokalizację na dysku, gdzie znajduje się żądany obrazek, a w miejsce „Tu podaj tekst alternatywny” wpisuje się krótką informację, która pojawi się w przypadku, kiedy obrazek nie zostanie wyświetlony.
Natomiast jako: „ustawienie” należy wpisać:
- left
- Obrazek będzie ustawiony po lewej stronie względem otaczającego go tekstu
- right
- Obrazek po prawej stronie względem tekstu
Odsyłacze internetowe
Odsyłacz do adresu internetowego
Składnia odsyłacza do adresu internetowego (w obrębie całego Internetu) jest następująca:
<a href="adres internetowy">opis odsyłacza</a>
Zasady wpisywania „opisu odsyłacza” są takie same jak w przypadku odsyłacza do podstrony.
Natomiast jako: „adres internetowy” należy wpisać adres miejsca w Internecie, gdzie chcemy się przenieść (np.: http://www.onet.pl).
Adres strony internetowej zawsze musi rozpoczynać się od http://
Odsyłacz taki jest przydatny, jeśli chcemy umieścić w swoim serwisie tzw. linki do dowolnych stron w obrębie całego Internetu. Jeśli surfując w sieci, trafimy na jakąś ciekawą stronę, możemy skopiować jej adres (z paska adresu przeglądarki) i umieścić w odsyłaczu. Dzięki temu wszyscy użytkownicy odwiedzający naszą witrynę, będą mogli przenieść się bezpośrednio do wskazanej strony, bez potrzeby wpisywania jej adresu.
Kolor tła i czcionki
Kolor tła oraz tekstu
<body bgcolor="kolor tła" text="kolor tekstu"> Tu jest właściwa treść strony </body>
Zamiast wyrazów „kolor tła” oraz „kolor tekstu” należy wpisać definicję koloru odpowiednio: tła strony oraz tekstu na całej stronie. Robi się to tak samo jak w przypadku czcionek.
Jeśli chcemy ustalić kolor tła oraz tekstu na całej stronie możemy użyć dodatkowych atrybutów dla znacznika <body>. Atrybuty te (bgcolor="..." oraz text="...") nie wpisujemy w miejscu właściwej treści strony – tak jak w przypadku znaczników – lecz wewnątrz znacznika otwierającego <body> (przed właściwą treścią) – tak jak pokazano powyżej – ponieważ nie są one oddzielnymi znacznikami tylko atrybutami. Należy również pamiętać, że na stronie może się znajdować tylko jeden znacznik <body>. Wszystkie atrybuty które się do niego odnoszą (jak na przykład dwa powyższe), wpisuje się do tego samego znacznika (otwierającego), a nie wstawia się nowego w innym miejscu strony.
Kolor tła oraz tekstu całej strony powinniśmy ustalać zawsze jednocześnie.
Nawet jeśli ustalimy kolor tekstu na całej stronie, możemy go później lokalnie (miejscowo) zmieniać za pomocą polecenia <font color="kolor">...</font> (zobacz: Kolor czcionki).
Tworzenie tabeli HTML
Tabela HTML
<table>
Kolejnym sposobem prezentowania i grupowania danych w języku Html jest tabela. Sposób prezentowania danych w tabeli html jest taki sam jak w każdej innej tabeli, którą znamy z życia codziennego.Tabele tworzymy przy użyciu elementu <table>.
<table> </table>
Tabela HTML – Wiersz
<tr>
Jednak, żeby tabela powstała, musimy do niej dodać jeszcze wiersze oraz umieścić tam komórki. Wiersze do tabeli dodajemy poprzez element <tr> (ang. table row – wiersz tabeli).
<table> <tr></tr> </table>
Tabela HTML – Komórka
<td>
Żeby nasza tabela była kompletna i poprawnie wyświetlała dane, należy jeszcze dodać do niej komórki. Komórki tabeli dodajemy poprzez element <td> (ang. table data, table cell – dane tabeli, komórka tabeli). Do rozwijania skrótu td powszechnie używa się table cell, jednak nazwa pochodzi od table data.
<table> <tr> <td>Treść</td> </tr> </table>
Nagłówek Tabeli HTML
<th>
Mamy już treść tabeli. Przydałoby się jeszcze oznaczyć czego dotyczą nasze dane. W tym celu posłużymy się nagłówkiem tabeli. Nagłówek taki uzyskujemy poprzez zastosowanie elementu <th> (ang. table heading). Element ten stosujemy tak jak zwykłą komórkę tabeli, czyli <td>. Nagłówki również umieszczamy w wierszach tabeli, czyli elementach <tr>.
1. Nagłówek Kolumny
<table> <tr> <th>Nagłówek kolumny</th> </tr> <tr> <td>wiersz</td> </tr> </table>
Łączenie komórek w HTML
Tabela HTML – Łączenie komórek
W przypadku, gdy jedna komórka odnosi się do więcej niż jednego nagłówka, możemy dokonać połączenia kilku komórek w jedną, żeby kilkukrotnie nie powtarzać jej wartości. Łączenie nie jest jednak najlepszym określeniem, w przypadku tabeli html. W zasadzie nie dokonujemy łączenia komórek, a zwiększenia ich rozpiętości w pionie lub poziomie.
Łączenie Komórek Kolumnami (w poziomie)
colspan
W celu zwiększenia rozpiętości poziomej komórki używamy atrybutu colspan(ang. column span – rozpiętość kolumnowa komórki). Atrybut ten przyjmuje wartości liczbowe, tzn. przekazujemy tam jaką rozpiętość kolumnową (czyli w poziomie) ma posiadać dana komórka tabeli.
1. Przykład z zastosowaniem atrybutucolspan
<table> <tr> <th></th> <th>Poniedziałek</th> <th>Wtorek</th> </tr> <tr> <th>18:00</th> <td>Kręgle</td> <td>Polo</td> </tr> <tr> <th>20:00</th> <td colspan="2">Basen i Sauna</td> </tr> </table>
| Poniedziałek | Wtorek | |
|---|---|---|
| 18:00 | Kręgle | Polo |
| 20:00 | Basen i Sauna | |
Łączenie Komórek Wierszami (w pionie)
rowspan
Rozpiętość komórek możemy podawać nie tylko w poziomie, ale również w pionie, łącząc kolejne wiersze. W tym celu posłużymy się atrybutem rowspan (ang. row span – rozpiętość wierszowa komórki). Atrybut ten działa analogicznie do poprzedniego, tylko tym razem zwiększając rozpiętość komórki w pionie.
1. Przykład z zastosowaniem atrybuturowspan
<table> <tr> <th></th> <th>Rodzaj</th> </tr> <tr> <th>Sharknado</th> <td rowspan="3">Horror</td> </tr> <tr> <th>Shartopussy</th> </tr> <tr> <th>Piranha 3DD</th> </tr> </table>
| Rodzaj | |
|---|---|
| Sharknado | Horror |
| Shartopussy | |
| Piranha 3DD |
Sekcje tabeli HTML
Tabela HTML – Sekcje
Każdą tabele można podzielić na trzy sekcje, które definiują nagłówek, ciało, a także stopkę tabeli. Taki podział może przydać się nam przy formatowaniu tabeli, gdy będziemy do niej dodawać zasady CSS. Jednak nie jest on konieczny do wprowadzenia. Jest to raczej kwestia semantyczna.
Tabela HTML – Sekcja nagłówka
<thead>
Sekcję nagłówkową oznaczymy elementem <thead> (ang. table head – sekcja nagłówkowa tabeli). Ten element przyda nam się przy oznaczaniu nazw kolumn przy użyciu elementu <th>.
Tabela HTML – Sekcja główna
<tbody>
W tzw. ciele tabeli znajdzie się jej główna treść, te nasze dane właściwe. Ciało tabeli oznaczymy elementem <tbody> (ang. table body – ciało tabeli).
Tabela HTML – Stopka
<tfoot>
Dane podsumowujące tabelę mogą znaleźć się w stopce tabeli. Sekcję tą oznaczymy elementem <tfoot> (ang. table footer – stopka tabeli).
Przykładowa tabela HTML
<table> <thead> <tr> <th scope="col">Rok</th> <th scope="col">Przychody</th> <th scope="col">Koszty</th> <th scope="col">Zysk</th> </tr> </thead> <tbody> <tr> <th scope="row">2013</th> <td>200'000</td> <td>150'000</td> <td>50'000</td> </tr> <tr> <th scope="row">2014</th> <td>500'000</td> <td>300'000</td> <td>200'000</td> </tr> </tbody> <tfoot> <tr> <th scope="row">Razem</th> <td>700'000</td> <td>450'000</td> <td>250'000</td> </tr> </tfoot> </table>
| Rok | Przychody | Koszty | Zysk |
|---|---|---|---|
| 2013 | 200’000 | 150’000 | 50’000 |
| 2014 | 500’000 | 300’000 | 200’000 |
| Razem | 700’000 | 450’000 | 250’000 |
To by było na tyle z tabel, jeśli chodzi o czysty html. Natomiast formatowaniem tabeli zajmiemy się podczas kursu CSS i tylko w ten sposób będziemy ją formatować.
Komendy HTML
|
|