Informatyka - podstawy HTML, SZKOŁA, Informatyka

0x01 graphic

Sprawdź te miejsca

NCSA Beginner's Guide to HTML
Complete HTML Guide
"How do they do that with HTML?"
Getting the colors hex values -- warto je znać
Elated Toolbox - masa darmowych obrazków do wykorzystania przy tworzeniu strony domowej

0x01 graphic
<>
SPIS TREŚCI

	Główne komendy HTML
	Komendy formatowania tekstu
	Komendy formatowania paragrafu
	Definicje kolorów
	Listy
	Dowiązania, odwołania (hyperlinks)
	Mailto protokół
	Obrazki
	Tabele
	Ramy
	Mapy obrazów
	Formularze

0x01 graphic

Główne komendy HTML
HTML start i koniec dokumentu	<HTML> ... </HTML>
nagłówek dokumentu	<head> ... </head>
treść dokumentu	<body> ... </body>
sekcje dokumentu	<div> ... </div>
nagłówki	<h1> ... </h1> <h2> ... </h2> ::::::::::::::::::::: <h6> ... </h6> Pamiętaj: h1 - największe, h6 - najmniejsze
tytuł	<title> ... </title>
komentarz	<!--..... -->

Atrybuty komendy <BODY > pozwalają ustalić następujące własności dla wyświetlania infornmacji:

BGCOLOR = "#hex_number" lub "colorname" (kolor tła)
BACKGROUND ="graphics_file_name_reference"(plik tapety)
TEXT = "#hex_number" lub "colorname" (kolor tekstu)
LINK = "#hex_number" lub "colorname" (kolor dowiązań)
VLINK = "#hex_number" lub "colorname"(kolor miejsc odwiedzonych)
ALINK = "#hex_number" lub "colorname"(aktywny kolor dowiązania)

Przykład:
<BODY BGCOLOR="#FFFFFF" LINK="#0000FF" VLINK="#FF00DD" ALINK="#FF0000" >
czy
<BODY BACKGROUND="bgd.gif" LINK="#0000FF" VLINK="#FF00DD" ALINK="#FF0000" >

0x01 graphic

Komendy <H1> do <H6> nagłówków mogą mieć atrybut dopasowania:

ALIGN = LEFT, ALIGN = CENTER, ALIGN = RIGHT

Przykład:
<H2 ALIGN=RIGHT> To jest nagłówek dopasowany do prawej krawędzi </H2 > i wygląda to tak:

To jest nagłówek dopasowany do prawej krawędzi

0x01 graphic

[spis treści]

Komendy formatowania tekstu
czcionka rozmiar/kolor	<font>... </font>
wyróżnienie	<em> ... </em>
italiki	<i> ... </i>
wytłuszczenie	<b> ... </b>
podkreślenie	<u > ... </u>
powiększenie	<big> ... </big>
pomniejszenie	<small> ... </small>
_{indeks dolny}	<sub> ... </sub>
indeks górny	<super> ... </super>
~~przekreślone~~	<strike> ... </strike>
cytowanie	<cite> ... </cite>

Sama komenda <FONT > nic nie znaczy. Umożliwia ustalenie co najmniej jednego ATRYBUTU:

SIZE = N (N liczba od 1 do 7; 1 to najmniejsza czcionka, 7 to największa czcionka, domyślnie zazwyczaj 3.
FACE = nazwa_czcionki, taka jak FONT="HELVETICA", czy FONT="HELVETICA, VERDANA, ARIAL" (jesli helvetica jest nie dostępna, to użyj verdana; jeśli verdana jest nie dostępna, to użyj arial).
COLOR = "#hex_liczbar", taka jak np.: "#FF00FF", czy jeden ze zdefiniowanych kolorów np.: FONT="BLUE".

0x01 graphic

[spis treści ]

Komendy formatowania paragrafu
paragraf	<p> ... </p>
koniec linii	<br>
pozioma linia	<hr>
preformatowany tekst	<pre> ... </pre>
blok	<blockquote> ... </blockquote>

Pozioma linia <HR> posiada ARTYBUTY:

WIDTH=n% (szerokość w % części okna)
SIZE = pixels
NOSHADE
ALIGN = LEFT, or ALIGN = CENTER, or ALIGN=RIGHT

Przykład:
<HR width=33% align=CENTER> wyprodukuje:

0x01 graphic

<HR WIDTH=50% align=RIGHT >wyprodukuje:

0x01 graphic

[spis treści]

0x01 graphic
Definicje kolorów HTML 3.2

Kolor	Numer hexagonalny
AQUA	#00FFFF
BLACK	#000000
BLUE	#0000FF
FUCHSIA	#FF00FF
GRAY	#808080
GREEN	#008000
LIME	#00FF00
MARRON	#800000
NAVY	#000080
OLIVE	#808000
PURPLE	#800080
RED	#FF0000
SILVER	#C0C0C0
TEAL	#008080
WHITE	#FFFFFF
YELLOW	#FFFF00

0x01 graphic

[spis treści]

0x01 graphic
Listy
Uporządkowana lista zaczyna się od <ol> i kończy na </ol> . Jeśli specjalne komendy listy nie będą użyte, to zawartość listy będzie dosunięta do lewej strony. Każda komenda <li> produkuje element listy. Na przykład:

Komendy:

<ol>
<li> pozycja 1
<li> pozycja 2
<li> kolejna pozycja
</ol>

produkują:

pozycja 1
pozycja 2
kolejna pozycja

0x01 graphic

Nieuporządkowana lista zaczyna się od <ul> i kończy na </ul>. Pozostałe zasady są identyczne, jak w liście uporządkowanej. Komendy:

<ul>
<li> temat 1
<li> inny temat
<li> kolejny temat
<li> jeszcze inny temat
</ul>

wyprodukują:

temat 1
inny temat
kolejny temat
jeszcze jeden temat

0x01 graphic

[spis treści]

0x01 graphic
Dołączenia, dowiązania, odwołania (Hyperlink-i)
Istotnym elementem strony domowej są odwołania, przywiązania (HYPERLINK-i) do innych stron domowych. Hyperlink tworzy się komendą : <A > i zamyka komendą </A> (od ANCHOR czyli haczyk, kotwica). Cokolwiek jest umieszczone między tymi komendami jest "hot" - gorące, czułe na kliknięcie na nim. Oczywiscie, jesli poza komendą <A >nic więcej nie ma, to nic się nie dzieje na kliknięcie. Komenda <A > ma ATRYBUT zwany HREF (hyperlink reference), którym określa się adres, dokąd ma nastąpić połączenie. Adres ma określoną formę tzw. adres URL (Uniform Resource Locator):

HREF= "address"

0x01 graphic

Przy absolutnym adresowaniu cały adres ULR musi być wpisany:
Przykład:
HREF = "http://www.bsu.edu/classes/czerwinska/CS110"
Przy adresowaniu względnym :

HREF="file1.html" - oznacza, że plik o nazwie "file1.html" jest w tym samym katalogu, co plik wyjściowy (ten plik, z którego poł ączenie startuje)
HREF = "/images/file2.html" - oznacza, że plik o nazwie "file2.html istnieje w podkatalogu (o nazwie "images") katalogu, w którym jest plik wyjściowy.
HREF = "../file3.html" - oznacza, że plik o nazwie "file3.html" istnieje w katalogu nadrzędnym do katalogu w którym jest plik wyjściowy.

Hyperlinki mogą wskazywać na:

całkowicie odrębne strony domowe (HREF="URL")
inne miejsce w tej samej stronie (HREF="#anchorname")
określone miejsce w innej stronie (HREF="URL#anchorname")

Przykłady:

Przykład 1 (przywiązania do innego dokumentu):

Komendy HTML:

Kliknij <A HREF = "http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html"> tutaj </A> a połączysz się z przewodnikiem po HTML-ach

Wynik:

Kliknij tutaj a połączysz się z przewodnikiem po HTML-ach.

Przykład 2 (przywiązanie do innego miejsca w tym dokumencie):

Document index.html

Komendy HTML

Wynik na ekranie

<HTML >
:
:
Wybierz temat z listy:
<UL>
<LI> <A HREF = "#jeden">Temat A </A >
<LI> <A HREF = "#dwa"> Temat B </A >
<LI> <A HREF = "#trzy"> Temat C </A>
</UL>
:
:
<A NAME="jeden"></A >
Tu zaczyna się temat A:
:
<A NAME="dwa"></A>
tu początek dla tematu B...

<A NAME="trzy"></A>
TematC jest tutaj...:
</HTML>

:
:
Wybierz temat z listy::

:
:
Tu zaczyna sie temat A:
:
:
tu poczatek dla tematu B...
:
TematC jest tutaj.....

Przykład 3: (łączenie do określonego miejsca w innym dokumencie)

Dokument index.html

Kod HTML

Rezultat:

<HTML>
:
:
Wybierz temat z listy:
(to są fikcyjne adresy, takie dla poćwiczenia)
<UL>
<LI><A HREF = http://www.microsoft.com/docum.html#users">Temat A </A>
<LI><A HREF = "http://www.oracle.com/refer.html#dbm"> Temat B </A>
<LI><A HREF = "http://www.sun.com/workshop.html#hardware"> Temat C </A>
</UL>
:
:
</HTML>

:
Wybierz temat z listy:
(to są fikcyjne adresy, takie dla poćwiczenia)

:
:

0x01 graphic

Pierwsze połączenie powinno Cię przenieść do określonego miejsca w dokumencie docum.html znajdującego się na komputerze Microsoft'a. To specyficzne miejsce jest określone po adresie dokumentu.
Analogicznie będzie, jeśli twoj wybór padnie na Temat b czy Temat c.

0x01 graphic

[spis treści]

0x01 graphic
Specjalne połączenie: protokół MAILTO
Przykład użycia połączenia, aby przesłać list e-mail:
Komenda HTML:

Wyślij do mnie <A HREF="mailto:fizdm@univ.gda.pl"list>. </A >
Produkuje wynik:

Wyślij do mnie list.

0x01 graphic

[spis treści]

0x01 graphic
Obrazki

Aby w dokument HTML włączyć obrazek nalezy użyć komendy <IMG >:
<IMG SRC="adres_pliku_z_obrazkiem"> przy czym
adres_pliku_z_obrazkiem - to absolutna lub względna nazwa pliku graficznego (pliku typu GIF lub JPG).

Atrybuty wyświetlania obrazka:

ALT = "alternatywny tekst" - tekst, który pojawi się w wyświetlarce,jeśli obrazek nie może być wyświetlony.
WIDTH = w pikselach - szerokość obrazka
HEIGHT= w pikselach - wysokość obrazka
ALIGN = TOP lub MIDDLE lub BOTTOM - pozycja umieszczenia PIERWSZRJ linii tekstu względem obrazka
ALIGN = LEFT lub RIGHT lub ABSCENTER - określenie, czy łamanie teksu ma być z lewej, z prawej czy z dołu
HSPACE = w pikselach - ile pustych pikseli ma być zostawione wokół obrazka z lewej i z prawej strony
VSPACE = w pikselach - ile pustych pikseli ma być zostawione wokół obrazka z góry i z dołu
BORDER = w pikselach - szerokość ramki wokół obrazka.

Obrazek jako połączenie
Obrazek może być umieszczony pomiędzy komendami <A and </A i jest wówczas "gorący" - jest połączeniem.
Na przykład, następująca komenda
Możesz kliknąć na <A HREF="http://www.univ.gda.pl"> <IMG SRC="home.gif" BORDER=0 HEIGHT=21 WIDTH=76 ALIGN=ABSCENTER> <A > aby znaleć się na stronie domowej UG.

Daje wynik:
Możesz kliknąć na aby znaleć się na stronie domowej UG.

Aby usunąć ramkę wokół obrazka (ustawioną domyślnie), użyj atrybutu BORDER=0

Obrazki wykorzystuje sie także do tworzenia tła dla całego dokumentu. Wówczas pojawia się atrybut komendy BODY :
<BODY BACGROUND="nazwa_pliku_z_obrazkiem">, przy czym plik z obrazkiem MUSI byc typu GIF lub JPG .

0x01 graphic

[spis treści]

0x01 graphic
Tabele
<TABLE> i </TABLE> komenda pozwalająca organizować wyświetlany tekst i obrazki w postaci tabeli.
Do budowania tabeli służą następujące komendy:

<TR>-- tworzy nowy wiersz (</TR> nie jest konieczne); atrybuty komendy: <TR ALIGN=CENTER (lub LEFT lub RIGHT) VALIGN=TOP (lub MIDDLE lub BOTTOM)>
<TH> -- tworzy nagłówek (</TH> nie jest konieczne); attrybuty: <TH ALIGN= CENTER (lub LEFT lub RIGHT) VALIGN=TOP (lub MIDDLE lub BOTTOM)>
<TD> -- tworzy dane do jednej komórki (</TD> nie jest konieczne); attrybuty <TD ALIGN=CENTER (lub LEFT lub RIGHT) VALIGN=TOP (lub MIDDLE lub BOTTOM)>

Przykład:

Aby utworzyć poniższą tabelę

nagłówek1

nagłówek2

nagłówek3

dane1

dane2

dane3

dane5

dane6

Trzeba napisać następujący zestaw komend:

<TABLE>
<TR>
<TH> <B> nagłówek1 </B> </TH>
<TH> <B> nagłówek2 </B> </TH>
<TH> <B> nagłówek3 </B> </TH>
</TR>
<TR>
<TD> dane1 </TD>
<TD> dane2 </TD>
<TD> dane3 </TD>
</TR>
<TR>
<TD> dane4 </TD>
<TD> dane5 </TD>
<TD> dane6 </TD>
</TR>
</TABLE>

Ramka dla tabeli

<TABLE BORDER=pixels> - atrybut tabeli, który określa grubość otaczającej ramki w pikselach. Aby zmienić grubość tej ramki wewnętrz tabeli należy użyc komendy CELLSPACING w otoczeniu komendy <TABLE >.
Aby dołozyć przestrzeni po obu stronach zawartości każdek komórki nalezy użyć atrybutu CELLPADDING w otoczeniu komendy <TABLE> .

Na przykład:
Komenda
<TABLE BORDER = 2 CELLSPACING = 5 CELLPADDING=10 > produkuje in a table with the external tabelę o zewnętrznej ramce o szerokości 2 pikseli i wewnętrznej ramce pomiędzy komórkami o szerokości 5 pikseli; pusta przestrzeń po obu stronach zawartości komórek jest 10 pikseli szeroka.

Ustawienie tabeli na stronie <TABLE ALIGN = LEFT lub RIGHT lub CENTER >-ustawia całą tabelę na lewo do prawego lube centruje na stronie
Ustawienie szerokości tabeli może być określone albo w procentach (szerokości strony) albo w pikselach. Na przykład:
<TABLE WIDTH=100% > oznacza, że tabela zajmuje całe okno.
natomiast
<TABLE WIDTH=250> oznacza, że tabela zajmuje 250 pikseli.
Ustawienie koloru dla komórki:
kolor tła komorki jest określany atrybutem BGCOLOR w otoczeniu komendy <TR> lub <TD> czy <TH>.
Na przkład: <TR BGCOLOR="#CCCCCC" > czyni szare tło dla całego wiersza tabeli.
Łączenie kolumn lub wierszy
Atrybuty ROWSPAN oraz COLSPAN określone w komendzie <TD> specyfikują aktualne ułożenie kolumn i wierszy.
Przykład 1.
Tabela jest następująca:

Kontynent	Eksport w ostatnich dwóch latach
Australia	35.7	35.3
Ameryka	127.2	152.9

i uzyskuje się ją komendami:
<table border=1 cellspacing=3 cellpadding=5 >
<tr>
<th> <b>Kontynent </b> </th>
<th colspan=2><b>Eksport w ostatnich dwóch latach</b></th>
<tr>
<td bgcolor="#FFFFCC"Australia</td>
<td>35.7</td>
<td>35.3</td>
<tr>
<td bgcolor="#99FF99">Ameryka</td>
<td>127.2</td>
<td>152.9</td>
</table>
Przykład 2:
Tabelę, która wugląda następująco:

Jeden	Dwa
Jeden		Trzy
Cztery	Pięć

... uzyskuje się komendami:
<TABLE BORDER CELLPADDING=3 CELLSPACING=3 >
<TR>
<TD ROWSPAN=2> Jeden </TD>
<TD> Dwa </TD>
<TR>
<TD> Trzy </TD>
<TR>
<TD> Cztery </TD>
<TD Pięć </TD>
</TABLE>
Opisy do tabel
Mamy do tego komendę <CAPTION ALIGN=TOP or BOTTOM> określa, gdzie, to jest na dole czy na gorze tabeli, ma znaleć się opis tabeli.
Na przykład. Oto zestaw komend umieszczający opis tabeli pod tabelą:
<TABLE>
<CAPTION ALIGN=BOTTOM> <B> Komendy podstawowe HTML </B></CAPTION>
<TR>
:::::
</TABLE>
[spis treści]
Ramy
Ramy (ang. FRAMES) umożliwiają wyświetlanie wielu różnych dokumentów www w jednym oknie. Poszczególne strony są wyświetlane w ramach. Głowny dokument zawiera jedynie definicje, jak te strony są uporządkowane. Więcej informacji na temat wprwadzania ram można tu znaleć.
[spis treści]
Mapy obrazkowe
Mapy obrazkowe to takie obrazki, które mają powiązania do wielu dokumentów; każde dowiązanie jest przyczepione do określonego fragmentu obrazka.
Na przykład, następujący obrazek zawiera 3 rożne powiązania (nazwane: Poprzedni, Home, Następny)

Liczby w nawiasach oznaczają współrzędne (x,y) punktow względem obrazka. Każdy obrazek ma współrzędne (0,0) w swoim lewym-górnym rogu. Wartość x rośnie z lewa w prawo , a wartość y z góry do dołu.
Mamy dwa rodzaje map obrazkowych:

server-side mapy obrazkowe (o tych nie będziemy tu mowić)
client-side mapy obrazkowe

Oba typy map działają na tej samej zasadzie: współrzędnym pewnego kszałtu podstawowego: okręgu, prostokąta, wielokąta, są przypisane odpowiednie adresy URL.
Mamy następujące sposoby definiowania obszarów:

Aby określić prostokąt używa się współrzędnych jego dwóch wierzchołków: lewego-górnego i prawego-dolnego. W naszym przypadku będą to liczby: 48,3,174,51.
Aby określić kołowy obszar używa się współrzędnych środka okręgu i jego promienia. Będą więc to trzy liczby: x_c, y_c, r.
Aby określić wielokąt (np. trójkąt) nalezy podać kolejno współrzędne wszystkich wierzchołków. Na przykład trójkąt Poprzedni będzie okreslony przez zestaw liczb: 2,24,48,3,48,51.

W języki HTML mapę obrazkową można określć się następujacymi komendami:

Pierwsze komendy powyższego przykładu wyprodukują:

0x08 graphic
0x01 graphic

PAMIĘTAJ: jeśli użyte kształy pokrywają się, podaj współrzędne w porządku kształtów: od najmniejszego do największego.

0x01 graphic

[spis treści]

Formularze

Komendy tworzenie formularzy używa się, aby:

umożliwić oglądaczowi dokumentu www wprowadzenie informacji
określić środki, jakimi wprowadzona wprowadzona jest przekazywana dalej i czemu informacja ta ma służyć

Podstawowa struktura do tworzenia formularza to:
<FORM >
Nazwisko: <INPUT TYPE="TEXT" NAME="LastName" VALUE=" " SIZE = 40 >
Hasło: <INPUT TYPE ="PASSWORD" NAME="haslo">
lubisz króliki? <INPUT TYPE="CHECKBOX" NAME="krolik" VALUE="YES" CHECKED >
Czy masz samochód? <INPUT TYPE="RADIO" NAME="auto" VALUE="zagraniczny"> zagraniczn
<INPUT TYPE="RADIO" NAME="auto" VALUE="nasz" >nasz
<INPUT TYPE="RADIO" NAME="auto" VALUE="nie" >nie mam
Jak często myślisz o Studium Podstaw Informatyki <SELECT NAME="Ile" >
<OPTION VALUE="zawsze">Bez przerwy
<OPTION VALUE="troche"> Czasem
<OPTION VALUE="nic"> Nie mysle
</SELECT >
<!-- zauważ, że komenda <SELECT> może mieć wiele atrybutów, aby umożliwić więcej niz jeden wybór --
Napisz coś do mnie <INPUT TYPE="TEXTAREA" NAME="essey" ROWS=10 COLS=60 >
</FORM >

Powyższe komendy produkują:

Początek formularza

Zestaw podstawowych pól do wprowadzania informacji:

Nazwisko:

hasło:

lubisz króliki?

Jaki masz samochód?
Zagraniczny
Nasz
Nie mam
Ile razy dziennie myślisz o Studium Podstaw Informatyki?

Napisz coś do mnie