Tłumacz: Andrew Osobka
Lokalizacja: http://tlumaczenia-angielski.info/tlumaczenia/Overview.html

Dokument ten jest tłumaczeniem i może zawierać błędy. Ma on jedynie charakter informacyjny. Oryginalna wersja dokumentu znajduje się na witrynie W3C http://www.w3.org/MarkUp/Guide/

Niniejszy dokument jest chroniony prawami autorskimi należącymi do W3C, MIT, ERCIM, KEIO.

 Dave Raggett Początek z HTML

Dave Raggett, rewizja: 24 maja 2005 roku.

Artykuł ten jest tylko małym wprowadzeniem do HTML. Co to jest HTML? Jest to specjalny rodzaj dokumentu tekstowego używanego do prezentacji tekstu i grafiki. Tekst zawiera znaczniki takie jak <p> do wskazania początku paragrafu. Dokumenty HTML nazywane są bardzo często "stronami internetowymi". Przeglądarki wydobywją strony internetowe z serwerów, które mogą być w każdym miejscu na świecie.

Wielu ludzi nadal pisze kodem HTML używając takich narzędzi jak NotePad na Windows lub TextEdit na systemach Mac. Niniejszy przewodnik pozwoli ci zabrać się do pracy. Nawet jeśli nie zamierzasz edytować HTML bezpośrednio i planujesz wykorzystanie edytorów HTML takich jak Netscape Composer czy Amaya (należący do W3C), przewodnik ten pomoże ci zrozumieć ideę na tyle, że będziesz mógł lepiej wykorzystywać takie narzędzia i będziesz wiedział co zrobić aby twoje dokumenty HTML były dostępne dla dużej liczby przeglądarek. Kiedy poczujesz się pewniej w podstawach tworzenia HTML, może będziesz chciał dowiedzieć się jak dodać trochę stylu używając CSS oraz spróbować innych rzeczy opisanych na mojej stronie na temat zaawansowanego HTML

p.s. dobrym sposobem nauki jest podppatrzenie jak inni zakodowali swoje strony w HTML. Aby to zrobić naciśnij na opcję Widok w przegłądarce i wybierz "Źródło". W niektórych przeglądarkach należy nacisną na opcję "Plik" i wtedy znaleźć "Żródło". Zrób to z tą stroną i zobacz jak zastosowałem pomysły, którę tutaj opisuję. Wyrobisz sobie oko i będziesz mógł patrzeć krytycznie jako, że wiele stron wygłąda naprawdę nie za dobrze "pod maską"!

Użytkownicy Mac przed zapisaniem pliku z końcówką ".html" będą musieli upewnić się, że dokument jest sformatowany jako "plain text". W TextEdit, można ustawić to w opcji "Format" "Make Plain Text" .

Niniejsza strona nauczy cię :

Jeśli szukasz czegoś innego, spróbuj stronę z zaawansowanym HTML.

Zacznij od tytułu

Każdy dokument HTML musi mieć tytuł. Oto przykład tego co należy napisć:

<title>Mój pierwszy dokument HTML</title>

Zmień tekst "Mój pierwszy dokument HTML t" na dowolny tytuł, który ci odpowiada. Tekst tytułu jest poprzedzony znacznikiem początkowym <title> a kończy się znacznikiem zamykającym </title>. Tytuł powinien być umieszczony na początku dokumentu.

Aby to wybróbować napisz powyższy kod w edytorze tekstowym i zapisz go jako "test.html" a następnie otwórz plik przeglądarką. Jeśli końcówką pliku (rozszerzeniem) jest ".html" lub ".htm", przeglądarka rozpoznaje plik jako HTML. Większość przeglądarek pokazuje tytuł na samej górze okna przeglądarki lub pasku zadań Widnows.

Dodaj nagłówki i paragrafy

Jeśli już kiedyś używałeś Microsoft Word, to jesteś zaznajomiony z budową stylu w nagłówkach, które wykazują różny stopień ważności. W HTML istniej sześć rodzajów nagłówków. H1 jest najważniejszy, H2 troszeczkę mniej i dak dalej aż do H6, który jest najmniej ważny.

Oto przykład jak dodawać ważny nagłówek:

<h1>Ważny nagłówek</h1>

a teraz mniej ważny:

<h2>Trochę mniej ważny nagłowek</h2>

Każdy paragraf, który piszesz powinien zaczynać się od znacznika <p>. Paragraf zamykjący </p> jest opcjonalny, w przeciwiństwie do końcowych znaczników elementów takich jk nagłówki. Na przykład:

<p>Mój pierwszy paragraf</p>

<p>Drugi pargraf.</p>

Dodaj trochę akcentu

Można kcentować jedno lub więcej słów znacznikiem <em>, np:

To jest bardzo <em>interesujący</em> temat!

Dodaj obrazy do swojej strony

Można używać obrazów lub zdjęć do wyróżnienia stron i lepszego przekazania wiadomości. Prostym sposobem dodawania obrazu jest użycie znacznika <img>.Załóżmy, że posiadasz plik zdjęcia nazwany "peter.jpg" w tym samym folderze co twój dokument HTML. Zdjęcie ma wymiary: szerokość -200 pikseli i wysokość - 150 pikseli.

<img src="peter.jpg" width="200" height="150">

Atrybut src wskazuje plik zdjęcia. Szerokość i wysokość nie są konieczne, ale pomagają wyświtlić stronę o wiele szybciej. Czegoś jeszcze brakuje! Ludzie, którzy nie widzą zdjęcia potrzebują opisu, który pojawia się w jego miejsce. Można to zrobić w następujący sposób:

<img src="peter.jpg" width="200" height="150"
alt="Mój kolega Peter">

Atrybut alt jest używany do opisu tak jak i w tym wypadku : "Mój kolega Peter". Bardziej złożone zdjęcia mogą wymagać dłuższych opisów. Powiedzmy, że taki opis istnieje w pliku nazwanym "peter.html". Możesz zastosować atrybut longdesc w następujący sposób:

<img src="peter.jpg" width="200" height="150"
alt="Mój kolega Peter" longdesc="peter.html">

Obrazy mogą być tworzone na różne sposoby, na przykład, przy użyciu kamery cyfrowej, mogą być skanowane, lub tworzone w programach. Większość wyszukiwarek rozumie format GIF i JPEG, nowsze przeglądarki także rozumieją format PNG. Aby uniknąć długiego czasu ładowania strony należy unikać dużych zdjęć.

Ogólnie mówiąc, JPEG jest najlepszym formatem do zdjęć, GIF i PNG są dobre do grafiki artystycznej płaskich powierzni kolorów, linii i tekstu.

Dodaj odnośniki do innych stron

Co czyni Internet efektywnym to zdolność definiowania linków prowadzących z jednej srony do drugiej i przechodzenie do stron jednym kliknięciem myszki. Jedno kliknięcie może zaprowadzić cię na drugi koniec świata!

Linki są definiowane znacznikiem <a>. Zdefiniujmy link do strony, która jest plikiem o nazwie "peter.html":

To jest odnośnik <a href="peter.html">Strona Petera</a>.

Tekst pomiędzy <a> i </a> jest napisem pokazującym się na odnośniku. Zazwyczaj pojawia się on na niebiesko i jest podkreślony.

Aby zamieścić odnośnik do innej witryny, należy podać dokładny adres (potocznie zwany URL), na przykład, aby zmieścić odnośnik do witryny W3C (www.w3c.org) mależy napisać:

To jest odnośnik do <a href="http://www.w3.org/">W3C</a>.

Można przekształcić obraz w odnośnik, np: następujkący obraz logo pozwala na kliknięcie i przejście do strony głównej firmy:

<a href="/"><img src="logo.gif" alt="strona główna"></a>

Trzy rodzaje list

HTML wspeira trzy rodzaje list. pierwszy rodzaj to wypunktowanie, często nazywane listą nie uporządkowaną. Używa ona znaczników <ul> i <li>, np:

<ul>
  <li>pierwsza pozycja</li>

  <li>druga pozycja</li>

  <li>trzecia pozycja</li>
</ul>

Zauważ, że zawsze należy zakończyć listę znacznikiem </ul>, ale </li> jest opcjonalne i można je pominąć. Drugi rodzj listy to numerowanie, często nazwane listą porządkową. Używa ona znaczników <ol> i <li>. Np:

<ol>
  <li>Pozycja jeden</li>

  <li>Pozycja dwa</li>

  <li>Pozycja trzy</li>
</ol>

Tak jak w wypadku poprzedniej zawsze należy ją zakończyć znacznikiem </ol>, ale znaczniki </li>są opcjonalne i mogą być pomijane.

Trzecim rodzajem jest lista definicji. Pozwala ona na wyszczególnienie terminów i definicji. Zaczyna się ona od znacznika <dl> i kończy znacznikiem </dl>. Każdy termin zaczyna się od znacznika <dt> a każda definicja od <dd>. Na przykład:

<dl>
  <dt>Pierwszy termmin</dt>
  <dd>Jego definicja</dd>

  <dt>Drugi termin</dt>
  <dd>Jego definicja</dd>

  <dt>Trzeci termin</dt>
  <dd>Jego definicja</dd>
</dl>

Znaczniki końcowe </dt> i </dd> są opcjonalne i mogą być pominięte. Zauważ, że listy mogą zawierać inne listy, jedną w drugiej. aNa przykład:

<ol>
  <li>Pozycja jeden</li>

  <li>
    Pzycja Dwa
  <ul>
      <li>Pierwsza pozycja wewnątrz</li>
      <li>Druga pozycja wewnątrz</li>
    </ul>
  </li>

  <li>Pozycja trzy</li>
</ol>

Można także używać zdjęć i nagłówków w dłuższych pozycjach listy.

HTML ma także znacznik head i body

Jeśli użyjesz opcje przeglądania kodu w twoiej przeglądarce ( zobacz Widok lub Plik) możesz zobaczyc strukturę strony internetowej. Dokument generalnie zaczyna się od deklaracji wersji HTML, która jest zastosowana a następnie znacznika <html>po krtórym pojawia się <head>. Znaczniki <html> ... </html> działają jak szuflada w której znajduje się dokument, a <body> ... </body> zawiera znaczniki i treść dokumentu. Oto szablon, który można skopiować i wkleić do edytora aby stworzyć własną stronę:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title> wymień na swój własny tytuł </title>
</head>
<body>

wstaw własną treść

</body>
</html>

Sprzątanie kodu

Dogodnym sposobem automatycznej naprawy błedów jest wykorzystanie HTML Tidy , który czyni kod bardziej czytelnym i łatwiejszy do edycji. Polecam używanie Tidy za każdym razem kiedy edytujesz kod. Tidy jest narzędziem pomocnym w czyszczeniu kodu tworzonego przez narzędzia edytorskie mające "złe przyzwyczajenia". Tidy jest dostępny dla wielu systemów operacyjnych ze strony TidyLib Sourceforge i jest również zintegrowany z wieloma edytorami HTML.

Dalsze informacje

Jeśli chcesz poczytać więcej, przygotowałem kilka dodatkowych materiałów na temat zaawansowanego HTML i dodawania stylu.

Rekomendacja W3C HTML 4.0 jest autorytatywną specyfikacją HTML. Jednakże jest to specyfikacja techniczna. Mniej techniczne źródło informacji dostępne jest w mojej książce poświęconej HTML, np:"Raggett on HTML 4", opublikowanej w 1998 przez Addison Wesley. XHTML 1.0 jest obecnie Rekomendacją W3C.

Powodzenia i zabierz się do pisania!

Dave Raggett <[email protected]>

Copyright © 1994-2003 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply. Your interactions with this site are in accordance with our public and Member privacy statements.