J Ę Z Y K  H T M L

[>>DOWNLOAD<<] Kurs HTML dla początkujących

1. Wprowadzenie

HTML jest językiem, w którym tworzy się strony internetowe - WWW (ang. World Wide Web). Charakteryzuje się tym, że nie trzeba go kompilować i jest tolerancyjny jeżeli chodzi o błędy składniowe. Aby zacząć programowanie w tym języku będą nam potrzebne: edytor tekstu np. Notatnik (Notepad) i przeglądarka internetowa np. Microsoft Internet Explorer, Netscap Navigator. Po napisaniu programu w edytorze tekstu należy go zapisać jako plik html lub htm. Do tworzenia stron można wykorzystać edytory WYSIWYG, czyli takie w których widzimy na ekranie cały dokument w formie rzeczywistej. Programy freeware to np. Front Page Express (dołączony do MS Internet Explorer ver. 5.0), Pajączek itp.

 

2. Struktura dokumentu HTML

Dokument HTML jest podzielony na dwie podstawowe sekcje: HEAD (głowę) i BODY (ciało), w sekcji head umieszcza się informacje dotyczące kodowania znaków, autora, materiałów na stronie, tytuł strony itp. Natomiast w sekcji body umieszcza się cały kod strony za pomocą znaczników w znakach mniejszości i większości <> np. <head>, <body>. Wszystkie znaczniki łącznie z sekcjami umieszczamy właśnie między tymi znakami. Wynika to z tego, że przeglądarka rozróżnia instrukcje dotyczące programu. Każdy znacznik kończy się znakiem / np. <head> </head>, czyli wyłączeniem danego polecenia.

3. Znaczniki języka HTML

W tym miejscu poznamy znaczniki języka HTML i ich znaczenie, nauczymy się wykorzystywać dodatkowe parametry znaczników.

Nazwa znacznika

Funkcja

Przykłady

<HTML> </HTML>

Pomiędzy te znaczniki należy wpisać całą zawartość naszej strony

-

<HEAD> </HEAD>

Definiuje sekcję head

-

<META> </META>

Definiuje informacje o dokumencie

<META NAME="Author" CONTENT="Szkoła">

<TITLE> </TITLE>

Tytuł główny dokumentu

<TITLE>Page by Szkoła</TITLE>

<BODY> </BODY>

Definiuje sekcję body

-

BGCOLOR

Wprowadza kolor tła (użycie w sekcji BODY)

<BODY BGCOLOR="orange">

<BGSOUND> </BGSOUND>

Ustawia podkład muzyczny

<BGSOUND SRC="muza.mid" LOOP="1">

<H1>, <H2>, <H3>, <H4>

</H1>, </H2>, </H3>, </H4>

Nagłówki 1,2,3 i 4 stopnia - czyli wielkość liter w nagłówku strony

<H1> IBM COMPUTER </H1

<P> </P>

Zaczyna nową linijkę tekstu - nowy akapit

<P> Tekst gazetki <P>

<HR> </HR>

Wstawia linię poziomą

<HR SIZE="2" COLOR="red">

<BR> </BR>

Wstawia pustą linię / przełamanie wiersza

Jestem <BR> Redaktor

<B>, <I>, <U>

</B>,</I>, </U>

Wstawia tekst pogrubiony, pochyły i podkreślony

<I><U> www.psp89.prv.pl </I></U>

<P ALIGN> </P>

Centruje lub przesuwa w lewo i prawo tekst i rysunki.

<P ALIGN="left"> Szkoła programuje! </P>

<A HREF> </A>

Wstawia odsyłacz (link) do jakiegoś elementu np. innej strony, miejsca (bookmark) lub pliku

<A HREF="www.psp89.prv.pl"> Strona Szkoły </A>

<FONT> </FONT>

Ustala rodzaj, kolor, wielkość czcionki

<FONT COLOR="blue" FACE="Courier" SIZE="5"> IBM PC </FONT>

<IMG> </IMG>

Wstawia rysunek, ustala ramkę wokół rys.

<IMG SRC="logo.gif" BORDER="2"></IMG>

<CENTER> </CENTER>

Wyśrodkowuje tekst i rysunki na całej stronie

<CENTER> Szkoła </CENTER>

<STRIKE> </STRIKE>

Przekreśla tekst

<STRIKE> Szkoła </STRIKE>

<STRONG> </STRONG>

Tekst mocno wyróżniony

<STRONG> Szkoła </STRONG>

<SMALL> </SMALL>

Tekst mały

<SMALL> Szkoła </SMALL>

<BIG> </BIG>

Tekst duży

<BIG> Szkoła </BIG>

<PRE> </PRE>

Tekst predefiniowany

<PRE> Szkoła </PRE>

<OL> </OL>

Lista numerowana

<OL> Szkoła </OL>

<UL> </UL>

Lista nienumerowana

<UL> Szkoła </UL>

<DL> </DL>

Lista definicyjna

<DL> Szkoła </DL>

<SUP> </SUP>

Indeks górny

<SUP> Szkoła </SUP>

<SUB> </SUB>

Indeks dolny

<SUB> Szkoła </SUB>

<LI> </LI>

Wypunktowanie

<LI> Szkoła </LI>

 <MARQUEE> </MARQUEE> (tylko IE)

Wprowadza przewijany tekst, posiada wiele metod przewijania.

<MARQUEE BEHAVIOR="alternate" BGCOLOR="red"> WWW.PSP.PRV.PL </MARQUEE>

<TABLE> </TABLE>

Wstawia tabelę, używa się go wraz ze znacznikami <TR> - wiersz, <TD> - komórka i <TH> - nagłowek

<TABLE BORDER="1" WIDTH="100"> <TR> <TD WIDTH ="50"> Szkoła </TD> <TD WIDTH ="50"> Dane </TD> </TR> <TR> <TD WIDTH ="50"> Opis </TD> </TR> </TABLE>

<FRAMESET> </FRAMESET>

Wstawia ramki, podaje się parametry FRAME, gdzie deklaruje się podział strony na obszary ramki, nazwę, źródło i inne opcje.

<FRAMESET><FRAME NAME="test" SRC="test.html" BORDER=1 SCROLLING=AUTO noresize></FRAMESET>

 

Resztę znaczników i wiele innych informacji znajdziecie w kursie html,
tu można go ściągnąć: kurs. zip (ok.858 KB)

4. Przykłady

Zamieszczam tu kilka przykładów napisanych przeze mnie.

Życzę wszystkim aby nauczyli się programować w HTML i stworzyli własne, świetne strony internetowe.

 

Pierwsza stronka - bardzo prosta (skopiuj poniższy fragment kodu html do notatnika, zapisz go jako index.htm):

<HTML>
<HEAD>
<TITLE>Moja strona domowa</TITLE>
</HEAD>
<BODY BGCOLOR="yellow">
<B>Witaj na mojej stronce! Przedstawię tu sposoby wyświetlania textu!</B>
<H2>Stosujemy nagłówek drugiego stopnia </H2>
<P>Teraz trochę wzorów ;-): </P>
a<SUP>2</SUP>+b<SUP>2</SUP>=c<SUP>2</SUP> - twierdzenie pitagorasa
H<SUB>2</SUB>O - cząsteczka wody<BR><BR>Breakuję - łamię wiersz<BR><BR><BIG>Cześć!</BIG><br>
Do zobaczenia.
</BODY>
</HTML>