Strona w języku
HTML
Język HTML jest najpopularniejszym językiem do tworzenia
stron www. Dokument HTML ma postać pliku tekstowego,
gdzie tekst przeplatany jest komendami ujętymi w nawiasy
ostre < >
Rozpoczęcie komendy <komenda>
Zakończenie komendy </komenda>
Plik HTML interpretowany jest przez dowolną przeglądarkę
internetową, która prezentuje dokument w jego
ostatecznym kształcie.
Strona w języku
HTML
Podstawowa struktura strony
Podstawowa struktura strony
<html>
<head>
<title>
Tytuł tworzonej przez nas strony
</title>
</head>
<body>
Treść jaką chcemy zamieścić na naszej stronie np.
Witaj na mojej stronie
</body>
</html>
N
a
g
łó
w
e
k
C
ia
ło
s
tr
o
n
y
Strona w języku
HTML
Wyjaśnienie struktury strony
Wyjaśnienie struktury strony
<html> - informuje przeglądarkę, iż od tego momentu oglądany dokument jest
zapisany w języku HTML, otwarcie dokumentu HTML
<head> - otwarcie części nagłówkowej strony
<title> - umożliwia nadanie tytułu przeglądanej stronie; tytuł jest wyświetlany
w górnej części okna, tj. w pasku tytułowym.
</title> - informuje przeglądarkę o tym, iż skończyliśmy podawać tytuł.
</head> - zamknięcie części nagłówkowej
<body> - sekcja w której zawarta jest główna część dokumentu „ciało strony”.
Witaj na mojej stronie - składa się na nią w tym przypadku tylko ta
linijka tekstu.
</body> - zamknięcie sekcji body.
</html> - zamknięcie całego dokumentu HTML.
Strona w języku
HTML
<br> - nowy wiersz, ta komenda działa jak Enter
<b> tekst </b> - zmienia czcionkę na pogrubioną
<i> tekst </i> - zmienia czcionkę na pochyloną (kursywa)
<u> tekst </u> - zmienia czcionkę na podkreśloną
<s> tekst </s> - przekreśla dany tekst
<sub> tekst </sub> - włączenie indeksu dolnego
<sup> tekst </sup> - włączenie indeksu górnego
Formatowanie
Formatowanie tekstu
Strona w języku
HTML
<font face=Arial CE”> ustawienie rodzaju czcionki </font>
<
font size=”7”> - ustawienie rozmiaru czcionki na 7 </font>
Język HTML oferuje tylko 7 stopni wielkości znaku, czyli od 1 do 7
<p align=”left”> tekst </p> - wyrównanie teksu do lewej strony
<p align=”right”> tekst </p> - wyrównanie teksu do prawej strony
<p align=”center”> tekst </p> - wyśrodkowanie tekstu
<p align=”justify”> tekst </p> - wyjustowanie tekstu
<body background=”tlo.jpg”> - ustawienie rysunku jako tło strony
Formatowanie
Formatowanie tekstu
Strona w języku
HTML
Kolory czcionki
Kolory czcionki
Do zmiany koloru czcionki służy komenda
<font color =”ang. nazwa koloru, lub kod koloru”> tekst </font>
PRZYKŁADOWA NAZWA
KOD KOLORU
”SILVER”
”#C0C0C”
”GRAY”
”#808080”
”RED”
”#800000”
”PURPLE
”#800080”
”PINK”
”#FF00FF”
”GREEN”
”#008000”
”LIME”
”#00FF00”
”YELLOW”
”#FFFF00”
”NAVY”
”#000080”
”BLUE”
”#0000FF”
”AQUA”
”#00FFFF”
Strona w języku
HTML
Rysunki na stronie
Rysunki na stronie
Do umieszczenia rysunku w tekście strony HTML używa się komendy <img>
Komenda <img> posiada wiele
atrybutów
, trzy najczęściej używane to:
src – atrybut, określający położenie pliku zawierającego wyświetlany rysunek
width – określa szerokość rysunku
height – określa długość rysunku
Aby umieścić rysunek na stronie internetowej należy użyć komendy:
<img src=”nazwa rysunku.jego rozszerzenie np. jpg”>
Strona w języku
HTML
<ul>
<li> Kot </li>
<li> Pies </li>
<li> Tygrys <li>
<li> Kolejne pozycje na liście
<li>
</ul>
• Kot
• Pies
• Tygrys
• Lew
Lista
Lista
wypunktowana
wypunktowana
Tworzenie listy wypunktowanej polega na objęciu wszystkich
pozycji listy parą znaczników <ul>
<li> pozycja listy </li>
Strona w języku
HTML
<ol>
<li> banany </li>
<li> wiśnie</li>
<li> śliwki <li>
<li> Kolejne pozycje na liście
<li>
</ol>
1. banany
2. wiśnie
3. śliwki
Lista numerowana
Lista numerowana
Tworzenie listy numerowanej polega na objęciu wszystkich
pozycji listy parą znaczników <ol>
<li> pozycja listy </li>
Strona w języku
HTML
Typowa tabela ma następującą budowę:
<table>
<tr>
<td> komórka </td>
<td> komórka </td>
</tr>
<tr>
<td> komórka </td>
<td> komórka </td>
</tr>
</table>
Tabele
Tabele
Strona w języku
HTML
Użyte w powyższym kodzie znaki oznaczają
kolejno:
<table>
-
definiuje tabelę
<tr>
-
definiuje rząd tabeli
<td>
-
definiuje komórkę w wierszu tabeli
Tabele
Tabele
Strona w języku
HTML
Odnośniki
Odnośniki
Odnośniki do innych stron
<a href =”adres strony” target=”top”>
Tekst
</a>
wyżej wymieniona strona załaduje się w tym samym
Oknie, ponieważ w składni jest predefiniowana nazwa okna „top”
<a href =”adres strony” target=”blank”>
Tekst
</a>
tutaj strona załaduje się w nowym oknie, ponieważ w składni jest
predefiniowana nazwa okna „blank”
Strona w języku
HTML
Odnośniki
Odnośniki
Odnośniki do pliku skompresowanego
Aby utworzyć link do jakiegoś pliku np. RAR należy użyć:
<a href=”
Klikniecie na tego typu link powoduje „ściągniecie” pliku na
dysk lokalny
Odnośniki do adresu e-mail
<a href=mailto:adres_email@adres.pl>Napisz do
mnie </a>
Na naszej stronie zobaczymy tekst Napisz do mnie. Kliknięcie w
niego spowoduje uruchomienie programu pocztowego, a w pole
adresata zostanie wpisany ww. adres e-mail.
