Content
<!doctype html> <html>
<head>
<meta charset="utf-8">
<meta name="description" content="Tu wpisz opis zawartości strony">
<title>Tu wpisz tytuł strony</title>
</head>
<body>
Tu wpisuje się treść strony
<span style="color: green">SZKOŁA JEST OK</span>
</body>
</html>
Mariusz robi herbatę bo się spóźnia
Mariusz robi herbatę bo się spóźnia
Mariusz robi herbatę bo się spóźnia
Mariusz robi herbatę bo się spóźnia
Mariusz robi herbatę bo się spóźnia
Mariusz robi herbatę bo się spóźnia
Kolor czcionki
W jaki sposób zmienić kolor czcionki na stronie WWW?
<span style="color: kolor">Tu wpisz tekst</span>
W jaki sposób zmienić rodzaj czcionki na stronie WWW?
<span style="font-family: rodzaj">Tu wpisz tekst</span>lub<span style="font-family: rodzaj1, rodzaj2, rodzaj3...">Tu wpisz tekst</span>
gdzie jako "kolor" można wpisać:
Wielkość czcionki
W jaki sposób zmienić rozmiar czcionki na stronie WWW?
<span style="font-size: rozmiar">Tu wpisz tekst</span>
gdzie jako "rozmiar" należy wpisać:
xx-small
Czcionka najmniejsza
x-small
Czcionka bardzo mała
small
Czcionka mała
medium
Czcionka średnia
large
Czcionka duża
x-large
Czcionka bardzo duża
xx-large
Czcionka największa
Przykład:
Czcionka o rozmiarze
xx-small
Czcionka o rozmiarze
x-small
Czcionka o rozmiarze
small
(domyślna)
Czcionka o rozmiarze
medium
Czcionka o rozmiarze
large
Czcionka o rozmiarze
x-large
Czcionka o rozmiarze
xx-large
Wyrównanie tekstu do lewej strony (domyślnie)
<p style="text-align: left">Treść akapitu</p>lub po prostu<p>Treść akapitu</p>
Wyrównanie tekstu do prawej
<p style="text-align: right">Treść akapitu</p>
Wyśrodkowanie tekstu
<p style="text-align: center">Treść akapitu</p>
Justowanie tekstu (wyrównanie do obu marginesów jednocześnie)
<p style="text-align: justify">Treść akapitu</p>
Wykaz <UL, OL, LI>
Jak wprowadzić na stronę wykaz: wypunktowanie (lista nieuporządkowana) lub numerowanie (lista uporządkowana)?
(lista wyliczeniowa)
wyświetlanie: w bloku
Wypunktowanie (podstawowy) - lista nieuporządkowana
<ul> <li>Punkt pierwszy</li> <li>Punkt drugi</li> <li>Punkt trzeci</li> </ul>
Zwracam uwagę, że w obrębie wykazu tekst i inne elementy można wstawiać tylko wewnątrz znaczników punktów wykazu, a nie poza nimi! Zatem poniższy kod będzie nieprawidłowy:
<ul> Wykaz...
<br>
<br>
</ul>
Przykład:
- Punkt pierwszy
- Punkt drugi
- Punkt trzeci
Wykaz numerowany (podstawowy) - lista uporządkowana
<ol> <li>Punkt pierwszy</li> <li>Punkt drugi</li> <li>Punkt trzeci</li> </ol>
Przykład:
- Punkt pierwszy
- Punkt drugi
- Punkt trzeci
Wykaz numerowany - różne typy
<ol type="rodzaj numeracji"> <li>Punkt pierwszy</li> <li>Punkt drugi</li> <li>Punkt trzeci</li> </ol>
gdzie jako "rodzaj numeracji" należy podać:
- "1" (domyślny) - numeracja według liczb arabskich
- "I" - według dużych liczb rzymskich
- "i" - według małych liczb rzymskich
- "a" - według małych liter
- "A" - według dużych liter
Przykład:
<ol type="1"> (domyślny)
- Punkt pierwszy
- Punkt drugi
- Punkt trzeci
<ol type="I">
- Punkt pierwszy
- Punkt drugi
- Punkt trzeci
<ol type="i">
- Punkt pierwszy
- Punkt drugi
- Punkt trzeci
<ol type="A">
- Punkt pierwszy
- Punkt drugi
- Punkt trzeci
<ol type="a">
- Punkt pierwszy
- Punkt drugi
- Punkt trzeci
Wykaz numerowany z podaniem początkowego numeru
<ol start="n"> <li>Punkt pierwszy</li> <li>Punkt drugi</li> <li>Punkt trzeci</li> </ol>
gdzie jako "n" należy podać liczbę, od której ma się rozpocząć numerowanie.
Wartość atrybutu START zawsze musi być liczbą, nawet jeśli numerowanie następuje według liter!
Przykład:
Zmiana numerowania "w trakcie"
<ol> <li>Punkt pierwszy</li> <li value="n">Punkt drugi</li> <li>Punkt trzeci</li> </ol>
Ramki lokalne <IFRAME> #
Jak wstawić ramkę (okienko, widżet) bezpośrednio w treści strony WWW?
pływające (ang. inline)
<iframe src="lokalizacja"> <a href="lokalizacja">Tekst alternatywny</a> </iframe>
gdzie jako "lokalizacja" należy podać adres strony albo lokalizację na dysku, gdzie znajduje się strona, która na ma zostać wczytana do ramki.
Natomiast "Tekst alternatywny" wyświetli się tylko w przeglądarkach, które nie obsługują ramek lokalnych.
Ramki lokalne są umieszczane bezpośrednio na stronie w postaci pojedynczych okienek o różnych rozmiarach. Dzięki temu możemy do takiej ramki wczytywać inne dokumenty [zobacz: Wstęp].
Jeśli nie określimy koloru tła dokumentu wczytywanego do ramki lokalnej, przeglądarka może przyjąć dla niego kolor tła strony, na której wstawiona jest ramka.
Pomiędzy znacznikiem otwierającym <iframe...> a zamykającym </iframe> można umieścić dowolny kod, który wyświetli się tylko w sytuacji, jeśli przeglądarka nie obsługuje ramek lokalnych. Najłatwiej podać po prostu odsyłacz do tej samej strony, którą wczytujemy do ramki. Wtedy użytkownicy niekompatybilnych przeglądarek będą mogli przynajmniej bezpośrednio do niej przejść. Oczywiście zamiast odnośnika można również wstawić jakąś alternatywną treść, przeznaczoną do przeglądania bez ramek.
W przypadku ramek lokalnych stosuje się dodatkowe atrybuty:
- Rozmiar ramki:<iframe src="lokalizacja" width="x" height="y">...</iframe>lub<iframe src="lokalizacja" width="x%" height="y%">...</iframe>
gdzie "x" oznacza szerokość w pikselach, a "y" oznacza wysokość (również w pikselach). Natomiast "x%" oznacza szerokość w procentach całego ekranu (bądź elementu nadrzędnego posiadającego ustalone wymiary), a "y%" oznacza wysokość (również w procentach).
Jeżeli zawartość ramki będzie większa niż jej rozmiary, przeglądarka wyświetli suwaki do przewijania jej treści.
Przykład:
width="**50%**" height="**200**"
Niestety Twoja przeglądarka nie obsługuje ramek&nbsp;:-(
Nazwa ramki:
<iframe src="lokalizacja" name="Tu wpisz nazwę ramki">...</iframe>
Jak wstawić tabelkę na stronę WWW?
<table>
<tr>
<td>...</td> <td>...</td>
</tr>
<tr> <td>...</td> <td>...</td>
</tr>
</table>
Jest to najprostsza tabela, gdzie:
<table>...</table>
jest znacznikiem tabeli
<tr>...</tr>
jest znacznikiem wiersza
<td>...</td>
jest znacznikiem pojedynczej komórki
W miejsce kropek należy wpisać treść poszczególnych komórek tabeli.
Powyższe polecenia tworzą tabelę, złożoną z dwóch kolumn i dwóch wierszy (razem cztery komórki). Jeśli to konieczne, możliwe jest dodanie nowych kolumn (poprzez wpisanie dodatkowych znaczników <td>...</td>) lub wierszy (znaczniki <tr>...</tr>). Należy przy tym zauważyć, że komórki tabeli (<td>...</td>) znajdują się wewnątrz znacznków wierszy (<tr>...</tr>)! Liczba komórek w każdym wierszu powinna być taka sama.
Zwracam uwagę, że w obrębie tabeli tekst i inne elementy można wstawiać tylko wewnątrz znaczników komórek i ewentualnie tytułu tabeli, a nie poza nimi! Poza obrębem tych znaczników można umieszczać tylko ściśle określone elementy, które zostaną szczegółowo opisane w tym rozdziale. Zatem poniższy kod będzie nieprawidłowy:
HTML / Tabele
Komórki nagłówkowe <TH>
Jak powinno się tworzyć nagłówek tabeli?
Nagłówek poziomy
<table> <tr> <th>...</th> <th>...</th> </tr> <tr> <td>...</td> <td>...</td> </tr> <tr> <td>...</td> <td>...</td> </tr> </table>
Nagłówek pionowy
<table> <tr> <th>...</th> <td>...</td> <td>...</td> </tr> <tr> <th>...</th> <td>...</td> <td>...</td> </tr> </table>
Nagłówek mieszany
<table>
<tr> <th></th> <th>...</th> <th>...</th>
</tr>
<tr> <th>...</th> <td>...</td> <td>...</td>
</tr>
<tr> <th>...</th> <td>...</td> <td>...</td>
</tr>
</table>
ODSYŁACZE
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>
Łączenie parametrów
W jaki sposób zmienić wygląd tekstu na stronie WWW?
Wszystkie powyższe parametry (atrybuty i znaczniki) dotyczące tekstu można łączyć, np. po wpisaniu w edytorze:
<p style="text-align: center"><span style="font-size: large; color: red"><b><i><u> To jest jakiś tekst </u></i></b></span></p>
| black | (czarny) | |
| white | (biały) | |
| silver | (srebrny) | |
| gray | (szary) | |
| maroon | (kasztanowy) | |
| red | (czerwony) | |
| purple | (purpurowy) | |
| fuchsia | (fuksja) | |
| green | (zielony) | |
| lime | (limonowy) | |
| olive | (oliwkowy) | |
| yellow | (żółty) | |
| navy | (granatowy) | |
| blue | (niebieski) | |
| teal | (zielonomodry) | |
| aqua | (akwamaryna) |