HTML

Od HLDS.pl
(Różnice między wersjami)
Skocz do: nawigacji, wyszukiwania
(Utworzył nową stronę „<h1>HTML - co to takiego?</h1> '''HTML''' to skrót od angielskiego HyperText Mark-up Language Jest to swoisty język programowania, który służy do "opisu stron". ...”)
 
 
Linia 21: Linia 21:
 
<ul><li>typów danych</ul>
 
<ul><li>typów danych</ul>
 
<ul><li>referencji znakowych</ul>
 
<ul><li>referencji znakowych</ul>
 +
 +
 +
<h1>Znaczniki</h1>
 +
 +
Poza zwykłym tekstem, na stronę możesz wprowadzić znaczniki. Znacznik jest to specjalny tekst, umieszczony w nawiasach ostrych, np: <pre><b> <u> <i></pre> etc... Jest on częścią składni języka HTML i pozwala sterować wyglądem strony. Dzięki niemu możesz np:
 +
 +
<ul><li>ustalić kolor tła</ul>
 +
<ul><li>tabelę</ul>
 +
<ul><li>rodzaj formatowania tekstu</ul>
 +
<ul><li>wstawić obrazek</ul>
 +
 +
 +
Znacznik nie jest widoczny na ekranie, widoczne są tylko efekty jego działania. Istnieją znaczniki otwierające (np.: < b >) oraz zamykające (np.: < /b >). Zauważ, że znacznik zamykający rozpoczyna się ukośnikiem (czyli znakiem: "/") i ma taką samą nazwę jak otwierający. Pomiędzy znacznikami otwierającym i zamykającym może znaleźć się jakiś tekst, który chcemy np. poddać formatowaniu (w tym przypadku będzie to '''wytłuszczenie''' tekstu i <u>podkreślenie</u>), np:
 +
 +
<pre><b>Ten tekst zostanie wytłuszczony.</b></pre>
 +
<pre><u>Ten tekst został podkreslony.</u></pre>
 +
 +
 +
{| WIDTH="100%" cellpadding="0" cellspacing="0" style="background-color: #f2fff2; border: solid 1px #bfffbf; padding: 5px;"
 +
| style="background-color: #c1ffc1; border: solid 1px #a0ffa0; border-bottom: 1px solid #888; padding: 5px;" | <font size="-1">UWAGA</font>
 +
|-
 +
|
 +
W języku XHTML wszystkie znaczniki muszą być pisane obowiązkowo małymi literami.
 +
|}
  
  
Linia 62: Linia 86:
  
 
Jeśli nie zastosujesz się do tych zaleceń, może się okazać, że po wprowadzeniu strony do Internetu, pliki takie nie wczytają się
 
Jeśli nie zastosujesz się do tych zaleceń, może się okazać, że po wprowadzeniu strony do Internetu, pliki takie nie wczytają się
 +
 +
 +
<h1>Co zrobić aby czytało Polskie znaki?</h1>
 +
 +
Wiele osób tworząc własne strony internetowe zapomina o prostej rzeczy, która jest bardzo przydatna przy pisaniu poradników, artykułów czy różnych bajerów dla użytkowników
 +
 +
Jak to zrobić ? W swoim edytorze HTML utwórz nową stronę i wklej na niej cały poniższy kod
 +
 +
<pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 +
<HTML>
 +
<HEAD>
 +
<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=iso-8859-2">
 +
</HEAD>
 +
<BODY>
 +
ą ć ę ł ń ó ś ź ż Ą Ć Ę Ł Ń Ó Ś Ź Ż
 +
</BODY>
 +
</HTML></pre>
 +
 +
{| WIDTH="100%" cellpadding="0" cellspacing="0" style="background-color: #f2fff2; border: solid 1px #bfffbf; padding: 5px;"
 +
| style="background-color: #c1ffc1; border: solid 1px #a0ffa0; border-bottom: 1px solid #888; padding: 5px;" | <font size="-1">UWAGA!</font>
 +
|-
 +
|
 +
Polskie litery, które znajdują się w trzeciej linijce od dołu, powinny być wpisane ręcznie z klawiatury a nie wklejone, ponadto należy pamiętać, że w niektórych edytorach HTML konieczne jest wybranie kodowania ISO-8859-2
 +
|}
 +
 +
 +
<h1>Odsyłacz do podstrony</h1>
 +
 +
Praktycznie na każdej stronie WWW spotyka się odsyłacze. Najczęściej stanowi je specjalnie wyróżniony krótki tekst (lub obrazek), po kliknięciu którego, następuje przeniesienie do innej strony. Każda podstrona jest osobnym plikiem HTML (z rozszerzeniem *.html lub *.htm) i zawiera treść
 +
 +
Aby umożliwić użytkownikowi swobodne przechodzenie pomiędzy podstronami naszego serwisu, trzeba je w jakiś sposób połączyć między sobą. Należy umieścić w wybranym miejscu odsyłacze do wszystkich podstron. Zwykle przeznacza się na to osobną stronę, która stanowi spis treści i zawiera ułożone kolejno odsyłacze do wszystkich podstron serwisu.
 +
 +
Kod:
 +
<pre><a href="ADRES STRONY NA JAKĄ MA PRZEKIEROWAĆ">OPIS STRONY</a></pre>
 +
 +
Przykład:
 +
<pre><a href="http://hlds.pl/HTML">HTML dla zielonych</a></pre>
 +
 +
 +
{| WIDTH="100%" cellpadding="0" cellspacing="0" style="background-color: #f2fff2; border: solid 1px #bfffbf; padding: 5px;"
 +
| style="background-color: #c1ffc1; border: solid 1px #a0ffa0; border-bottom: 1px solid #888; padding: 5px;" | <font size="-1">PAMIĘTAJ</font>
 +
|-
 +
|
 +
Adres strony internetowej zawsze musi rozpoczynać się od '''http://'''
 +
|}
 +
 +
 +
<h1>Wstawianie adresu E-MAIL</h1>
 +
 +
Jest to opcja dośc podobna do przekierowywania stron wystarczy dodac tylko jedno słowo '''mailto'''
 +
 +
<pre><a href="mailto:adres poczty e-mail">opis</a></pre>
 +
 +
Pamiętaj, że podanie swojego adresu na stronie WWW, może spowodować, że zaczną do Ciebie przychodzić niechciane wiadomości

Aktualna wersja na dzień 12:08, 21 lis 2010

Spis treści

HTML - co to takiego?

HTML to skrót od angielskiego HyperText Mark-up Language Jest to swoisty język programowania, który służy do "opisu stron". "Opis stron" to reguły określania wyglądu tekstu (wielkość, czcionka, pogrubienie, kursywa itd.). Najważniejszą cechą HTML jest to, że jest on kompatybilny z każdym systemem operacyjnym (Windows, MacOS, OS/2, rożne odmiany Unixa, itd.). Choć HTML jest językiem programowania, to jest on o niebo łatwiejszy od TurboPascala, czy C++ i można go opanować w kilka dni. Pierwsza, publicznie dostępna, specyfikacja języka HTML, nazwana HTML Tags (pol. Znaczniki HTML), została zamieszczona w Internecie przez Bernersa-Lee w 1991. Zawiera 22 znaczniki, tworzące początkowy, prosty szkielet HTML-a. Trzynaście z tych elementów istnieje do tej pory w specyfikacji HTML To wszystko, co powinieneś wiedzieć w skrócie o html'u


Komponenty języka HTML

Co to jest Komponent

niezależnie wytworzony, skompilowany (z ukrytymi szczegółami implementacyjnymi) moduł programowy, udostępniający swą funkcjonalność za pomocą jednoznacznie zdefiniowanego interfejsu, zdolny do współdziałania z większą całością (systemem) oraz innymi komponentami.


Język HTML składa się z kilku kluczowych komponentów:

  • znaczników i ich atrybutów
  • odwołań w postaci encji
  • deklaracji typu dokumentu
  • typów danych
  • referencji znakowych


Znaczniki

Poza zwykłym tekstem, na stronę możesz wprowadzić znaczniki. Znacznik jest to specjalny tekst, umieszczony w nawiasach ostrych, np: 
<b> <u> <i>
etc... Jest on częścią składni języka HTML i pozwala sterować wyglądem strony. Dzięki niemu możesz np:
  • ustalić kolor tła
  • tabelę
  • rodzaj formatowania tekstu
  • wstawić obrazek


Znacznik nie jest widoczny na ekranie, widoczne są tylko efekty jego działania. Istnieją znaczniki otwierające (np.: < b >) oraz zamykające (np.: < /b >). Zauważ, że znacznik zamykający rozpoczyna się ukośnikiem (czyli znakiem: "/") i ma taką samą nazwę jak otwierający. Pomiędzy znacznikami otwierającym i zamykającym może znaleźć się jakiś tekst, który chcemy np. poddać formatowaniu (w tym przypadku będzie to wytłuszczenie tekstu i podkreślenie), np: 

<b>Ten tekst zostanie wytłuszczony.</b>
<u>Ten tekst został podkreslony.</u>


UWAGA

W języku XHTML wszystkie znaczniki muszą być pisane obowiązkowo małymi literami.


Jak wygląda typowy dokument HTML

Stronę WWW tworzy się podobnie jak zwykły dokument tekstowy: po otwarciu edytora HTML, należy wybrać opcję z menu: Plik/Nowy. Teraz można już zacząć pisanie strony. ednak ponieważ dokument HTML nie jest całkowicie zwykłym plikiem tekstowym (zawiera hipertekst, osadzone obrazki i musi być poprawnie wyświetlany w różnych systemach operacyjnych dlatego wymyślono specjalny szablon dokumentu HTML, który powinien być przestrzegany. 

<!DOCTYPE html 
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
	<meta name="Description" content="Tu wpisz opis zawartości strony" />
	<meta name="Keywords" content="Tu wpisz wyrazy kluczowe rozdzielone przecinkami" />
	<title>Tu wpisz tytuł strony</title>
</head>
<body>

 Tu wpisuje się treść strony

</body>
</html>

Większość edytorów HTML przy tworzeniu nowego dokumentu automatycznie wpisuje swój własny szablon - zbliżony do powyższego. Jeśli chcesz, możesz z niego skorzystać, modyfikując opisane poniżej fragmenty. Proponuję jednak zastąpić go szablonem przedstawionym w tym rozdziale. Również w tym przypadku wszystkich zmian należy dokonywać bezpośrednio w trybie edycji kodu źródłowego HTML! Jeśli posiadasz edytor graficzny, musisz się do niego przełączyć, natomiast edytory tekstowe najczęściej posiadają tylko taki tryb - wtedy nie trzeba nic przełączać.


Co to są podstrony?

Praktycznie wszystkie serwisy internetowe składają się z pewnej liczby podstron, a nie tylko z jednej, bardzo długiej, strony głównej. Każda podstrona to po prostu osobny plik (z rozszerzeniem *.html lub *.htm), który tworzy się w taki sam sposób, jak stronę główną (przy użyciu szablonu przedstawionego powyżej) ułatwia to użytkownikowi nawigację oraz zapobiega niepotrzebnemu wczytywaniu całego serwisu od razu, co trwałoby prawdopodobnie bardzo długo.

W nazwach plików lepiej nie używać:
  • WIELKICH liter
  • polskich liter (ą, ć, ę, ż itp)
  • znaków specjalnych (\ / : * ? " < >)
  • spacji (jeśli musisz, w zamian używaj podkreślnika _)


Jeśli nie zastosujesz się do tych zaleceń, może się okazać, że po wprowadzeniu strony do Internetu, pliki takie nie wczytają się


Co zrobić aby czytało Polskie znaki?

Wiele osób tworząc własne strony internetowe zapomina o prostej rzeczy, która jest bardzo przydatna przy pisaniu poradników, artykułów czy różnych bajerów dla użytkowników

Jak to zrobić ? W swoim edytorze HTML utwórz nową stronę i wklej na niej cały poniższy kod 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=iso-8859-2">
</HEAD>
<BODY>
ą ć ę ł ń ó ś ź ż Ą Ć Ę Ł Ń Ó Ś Ź Ż
</BODY>
</HTML>
UWAGA!

Polskie litery, które znajdują się w trzeciej linijce od dołu, powinny być wpisane ręcznie z klawiatury a nie wklejone, ponadto należy pamiętać, że w niektórych edytorach HTML konieczne jest wybranie kodowania ISO-8859-2


Odsyłacz do podstrony

Praktycznie na każdej stronie WWW spotyka się odsyłacze. Najczęściej stanowi je specjalnie wyróżniony krótki tekst (lub obrazek), po kliknięciu którego, następuje przeniesienie do innej strony. Każda podstrona jest osobnym plikiem HTML (z rozszerzeniem *.html lub *.htm) i zawiera treść

Aby umożliwić użytkownikowi swobodne przechodzenie pomiędzy podstronami naszego serwisu, trzeba je w jakiś sposób połączyć między sobą. Należy umieścić w wybranym miejscu odsyłacze do wszystkich podstron. Zwykle przeznacza się na to osobną stronę, która stanowi spis treści i zawiera ułożone kolejno odsyłacze do wszystkich podstron serwisu.

Kod: 

<a href="ADRES STRONY NA JAKĄ MA PRZEKIEROWAĆ">OPIS STRONY</a>

Przykład: 

<a href="http://hlds.pl/HTML">HTML dla zielonych</a>


PAMIĘTAJ

Adres strony internetowej zawsze musi rozpoczynać się od http://


Wstawianie adresu E-MAIL

Jest to opcja dośc podobna do przekierowywania stron wystarczy dodac tylko jedno słowo mailto 

<a href="mailto:adres poczty e-mail">opis</a>

Pamiętaj, że podanie swojego adresu na stronie WWW, może spowodować, że zaczną do Ciebie przychodzić niechciane wiadomości

Źródło „http://hlds.pl/index.php?title=HTML&oldid=9692”
Osobiste
Przestrzenie nazw
Warianty
Działania
HLDS.pl - Menu:
Inne
IRC
Inne sekcje:
Znajomi:
Narzędzia