Strona w języku HTML

Download Report

Transcript Strona w języku HTML 

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
Ciało strony Nagłówek
<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>
Strona w języku HTML
Wyjaśnienie struktury strony
<html>
<head>
- informuje przeglądarkę, iż od tego momentu oglądany dokument jest
zapisany w języku HTML, otwarcie dokumentu HTML
- 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
Formatowanie tekstu
<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
Strona w języku HTML
Formatowanie tekstu
<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
Strona w języku HTML
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
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
Lista wypunktowana
• Kot
• Pies
• Tygrys
• Lew
<ul>
<li> Kot </li>
<li> Pies </li>
<li> Tygrys <li>
<li> Kolejne pozycje na liście <li>
</ul>
Tworzenie listy wypunktowanej polega na objęciu wszystkich
pozycji listy parą znaczników <ul>
<li> pozycja listy </li>
Strona w języku HTML
Lista numerowana
1. banany
2. wiśnie
3. śliwki
<ol>
<li> banany </li>
<li> wiśnie</li>
<li> śliwki <li>
<li> Kolejne pozycje na liście <li>
</ol>
Tworzenie listy numerowanej polega na objęciu wszystkich
pozycji listy parą znaczników <ol>
<li> pozycja listy </li>
Strona w języku HTML
Tabele
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>
Strona w języku HTML
Tabele
Użyte w powyższym kodzie znaki oznaczają kolejno:
<table> -
definiuje tabelę
<tr>
- definiuje rząd tabeli
<td>
- definiuje komórkę w wierszu tabeli
Strona w języku HTML
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 do pliku skompresowanego
Aby utworzyć link do jakiegoś pliku np. RAR należy użyć:
<a href=”http://www.adres.pl/plik.exe”>
Klikniecie na tego typu link powoduje „ściągniecie” pliku na dysk
lokalny
Odnośniki do adresu e-mail
<a href=mailto:[email protected]>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.