Projektowanie strony internetowej w języku HTML

Projektowanie strony internetowej w języku HTML

Krok 1. Przygotowanie do pracy

Dokument HTML jest zwykłym plikiem tekstowym, w którym znajdują się polecenia
HTML. Wynika stąd, że dokument taki można utworzyć za pomocą najprostszego

edytora tekstów - jak Notatnik w Windows - ręcznie wpisując znaczniki.

1. Uruchomić program Notatnik dostępny w grupie Akcesoria.

W pliku tym umieszczane będą polecenia języka HTML. Każde polecenie
umieszczane jest w nawiasach „trójkątnych” (tzn. znak mniejszości i większości) i
składa się z dwóch części: znacznika otwierającego i znacznika zamykającego, np.

<h1>...</h1>. Polecenie w znaczniku zamykającym rozpoczyna się od znaku
slash (/). Polecenia można wpisywać zarówno małymi jak i dużymi literami.

Zalecane są małe litery. Znaczniki mogą posiadać atrybuty.

Krok 2. Tworzenie struktury dokumentu

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="Content-type" content="text/html; charset=windows-1250">

<meta name="Description" content="

pis zawartości strony

<meta name="Keywords" content="

Słowa

kluczowe rozdzielone przecinkami

<meta name ="Author" content="

ię i nazwisko autora

ytuł strony

</title>

</head>

<body>

Treść strony

</body>

</html>

Cała treść która znajduje się pomiędzy <head> oraz </head> (w szablonie
powyżej) jest nazywana nagłówkiem dokumentu (treść nagłówkowa), natomiast

wszystko pomiędzy <body> oraz </body> stanowi tzw. ciało dokumentu (treść
właściwa).

Linia:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

oznacza, że dokument jest zgodny ze specyfikacją HTML 4.0.1

W żadnym wypadku nie należy pomijać czwartej linijki od góry (w powyższym

szablonie), tzn.:

<meta http-equiv ="Content-type" content="text/html; charset=iso-8859-2">

Jest to deklaracja strony kodowej rozpoznawanej przez praktycznie wszystkie
przeglądarki.

1. Przekopiować do Notatnika podany powyżej wzorzec struktury dokumentu.

2. Wprowadzić – w odpowiednich polach – opis strony, słowa kluczowe oraz

swoje imię i nazwisko. Jako tytuł strony podać np. Moja strona o
mikroprocesorze.

3. Zapisać wstępny projekt strony tworząc na pulpicie plik Moja_strona.html.
4. Obejrzeć stronę w przeglądarce poprzez kliknięcie na umieszczonej na

pulpicie ikonie pliku Moja_strona.html.

Krok 3. Wpisywanie tekstu i paragrafy

Jeśli chcemy umieścić na stronie WWW zwykły tekst, możemy wpisać go

bezpośrednio z klawiatury - w miejsce właściwej treści dokumentu. Nie trzeba przy
tym stosować żadnych dodatkowych poleceń.

Gdybyśmy jednak wpisali dłuższy

fragment tekstu, rozdzielając w edytorze akapity za pomocą klawisza Enter,

przeglądarka zignoruje znaki końca wierszy i akapitów w edytorze i wyświetli
jednolity blok tekstu. Aby rozdzielić akapity, należy się posłużyć poleceniem <p> (p

= paragraph). Zalecane jest także konsekwentne stosowanie znacznika
zamykającego </p>.

Atrybuty znacznika <p>:

Tekst

</p>

akapit wyrównany do lewej

Tekst

</p>

akapit wyrównany do prawej

<p style="text-align: center; ">

Tekst

</p> akapit

wyśrodkowany

Tekst

</p> akapit wyrównany do obu

marginesów

Można przełamać tekst, nie wprowadzając przy tym znaku końca akapitu. Możemy

wówczas zastosować pojedyncze polecenie <br>, które przenosi tekst o jeden
wiersz w dół, choć nie wprowadza dodatkowej interlinii.

Znacznik <br> nie ma

znacznika zamykającego (to jeden z nielicznych wyjątków).

Można także wstawiać znak tzw. niełamliwej spacji  , który pozwala wstawić

kilka kolejnych spacji.

1. Jako treść strony umieścić w Notatniku poniższe akapity (np. przez

skopiowanie).

2. Początek każdego akapitu zaznaczyć znacznikiem <p>, zaś koniec </p>.
3. Nie wprowadzać żadnego dodatkowego formatowania tekstu.

4. Plik ponownie zapisać na pulpicie.
5. Wyświetlić stronę w przeglądarce.

Cechy mikroprocesora
Mikroprocesor jest układem scalonym o stałej, uniwersalnej architekturze.

Sposób jego działania określa informacja zapisana w pamięci układu. Sekwencja
rozkazów stanowi program działania. kolejność wykonywanych rozkazów zależy

od ich umieszczenia w programie (w kolejnych komórkach pamięci). Zmiana
kolejności wykonania może być wynikiem działania programu (rozkaz skoku),

systemu operacyjnego lub operatora. Realizacja konkretnego problemu polega
na wymianie oprogramowania i ewentualnie układów wejścia / wyjścia.
Historia rozwoju mikroprocesorów rozpoczęła się w roku 1971, kiedy to powstał

pierwszy układ 4-bitowy o nazwie Intel 4004.
Obecnie do największych producentów mikroprocesorów należą firmy: Intel,

Motorola oraz AMD.

Parametry mikroprocesora
długość słowa - liczba bitów przetwarzanych podczas wykonywania pojedynczej

operacji
częstotliwość zegara - pozwala na wyliczenie czasu wykonania pojedynczego
cyklu pracy

lista rozkazów
inne: architektura, technologia, rodzaj złącza, nominalne napięcie pracy, pamięć

podręczna cache.

Budowa mikroprocesora
rejestry:

licznik rozkazów - wskazuje adres komórki pamięci, w której jest zapisany kod

kolejnej operacji
rejestr rozkazów - zawiera kod operacji, jaka jest wykonywana w jednym cyklu
pracy

rejestry uniwersalne ogólnego przeznaczenia do przechowywania dowolnych
danych

inne rejestry (np. rejestr stanu, wskaźnik stosu)
ALU (jednostka arytmetyczno – logiczna, arytmometr) – uniwersalny układ

kombinacyjny, który wykonuje operacje arytmetyczne, logiczne oraz przesunięć
układ sterowania.

Cykl pracy mikroprocesora

Realizując program, system mikroprocesorowy wykonuje pewne powtarzające
się czynności, polegające na cyklicznym pobieraniu rozkazów z pamięci,
dekodowaniu ich, a następnie realizacji.

Pobieranie kolejnego rozkazu z pamięci składa się z następujących etapów:
przesłanie licznika rozkazów do rejestru adresowego pamięci

pobranie rozkazu z pamięci spod adresu wskazywanego przez licznik rozkazów
przesłanie odczytanego kodu rozkazu do rejestru rozkazów

zwiększenie licznika rozkazów o jeden
Dalej następuje wykonanie rozkazu (wykonanie operacji określonej przez jej

kod).

Krok 4. Komentarze

<!--

Komentarz

-->

Powyższe polecenie pozwala wstawiać do dokumentu komentarz autora. Treść

komentarza nie będzie wyświetlana na ekranie, ale stanowi dodatkową informację
dla samego autora lub osoby czytającej, która przegląda kod źródłowy dokumentu.

Krok 5. Tytuły

Do wprowadzania tytułów służy polecenie <hx> </hx>. Znak h oznacza heading,

natomiast x to stopień tytułu. Dostępnych jest 6 wielkości tytułów (x może
przyjmować wartości od 1 do 6). Im większa wartość x tym litery tytułu mniejsze.

Polecenie wprowadzające tytuł stopnia pierwszego składa się ze znacznika
otwierającego <h1> i zamykającego </h1>.

Każdemu tytułowi można nadać dodatkowy atrybut style.

<h1 style="text-align: center; ">

Tytuł

</h1> Tytuł wyśrodkowany

<h1 style="text-align: left;”>

Tytuł

< /h1>

Tytuł wyrównany do lewej

<h1 style="text-align: right;”>

Tytuł

< /h1>

Tytuł wyrównany do prawej

1. Na początku strony (w pierwszej linii bloku <body>) umieścić tytuł strony:

Mikroprocesor. Użyć znacznika <h1>.

2. Tytuł wyśrodkować na stronie.

3. Poniżej umieścić podtytuł: Budowa i zasada działania. Użyć znacznika <h2>.
4. Podtytuł wyśrodkować na stronie.

5.  Tytułowi każdego paragrafu nadać formę tytułu. Użyć znacznika <h4>.
6.  Plik ponownie zapisać na pulpicie.
7.  Wyświetlić stronę w przeglądarce.

Krok 6. Pozioma linia

Poziomą linię wstawiamy za pomocą polecenia <hr> (ang. horizontal rule). Pozwala
ono wyświetlić w dokumencie poziomą linię, na szerokość całej strony czy bloku,

rozdzielając nią logiczne fragmenty tekstu, dzięki czemu strona jest bardziej
przejrzysta.

1. Umieścić poziome linie pomiędzy paragrafami.

2. Plik ponownie zapisać na pulpicie.
3. Wyświetlić stronę w przeglądarce.

Krok 7. Wykazy (listy) nienumerowane

Aby utworzyć szkielet wykazu wypunktowanego, należy użyć polecenia <ul>
</ul> (ang. unordered list). W ramach szkieletu znajdą się poszczególne punkty

wykazu, które wprowadzamy za pomocą polecenia <li> </li>.

Pierwszy punkt listy

</li>

<li>

Drugi punkt listy

</li>

<li>

Trzeci punkt listy

</li>

</ul>

1. Drugiemu i czwartemu paragrafowi nadać format listy nienumerowanej.

2. Plik ponownie zapisać na pulpicie.
3. Wyświetlić stronę w przeglądarce.

Krok 8. Listy numerowane

Gdy chcemy utworzyć wykaz numerowany, wówczas zamiast <ul> i </ul>

możemy zastosować <ol> i </ol> (ang. ordered list). Uzyskamy wówczas listę
numerowaną za pomocą cyfr arabskich.

1. Trzeciemu paragrafowi nadać format kombinowanej listy numerowanej i

nienumerowanej.

2. Plik ponownie zapisać na pulpicie.

3. Wyświetlić stronę w przeglądarce.

Krok 9. Atrybuty czcionki

Atrybuty czcionki zmieniamy dodając odpowiednie parametry do znaczników, np.
<a> lub <p>. Użycie atrybutów znacznika <a> umożliwia zmianę stylu np.

jednego słowa w tekście lub nawet jednej litery (mieszczonej pomiędzy znacznika
<a> oraz </a>). Jeżeli chcemy zmienić styl paragrafu dodajemy odpowiednie

znaczniki do znacznika <p>. Do jednego znacznika można dodać wiele parametrów,
oddzielając je średnikami.

Kolor czcionki w paragrafie zmieniamy np. poprzez dodanie atrybutu color do
znacznika <p>. Polecenie może przykładowo przyjąć postać:

<p style="color: kolor; ">

Tekst paragrafu

</p>

W polu kolor można używać następujących kolorów:

black (czarny)
white (biały)

silver (srebrny)

gray (szary)
maroon (kasztanowy)

red (czerwony)
purple (purpurowy)

fuchsia (fuksja)

green (zielony)
lime (limonowy)

olive (oliwkowy)

yellow (żółty)
navy (granatowy)

blue (niebieski)
teal (zielonomodry)

aqua (akwamaryna)

Wielkość czcionki w paragrafie zmieniamy poleceniem:

<p style="font-size: wielkość">

Tekst paragrafu

</p>

zaś styl np. jednego słowa poleceniem:

<a style="font-size: wielkość">

Tekst

</a>

W polu wielkość można użyć następujących określeń wielkości:
xx-small, x-small, small , medium, x-large, xx-large.

Krój czcionki w paragrafie zmieniamy poleceniem:

<p style="font-family: czcionka; ">

Tekst paragrafu

</p>

W polu czcionka można przykładowo użyć następujących określeń kroju czcionki:

Arial, Verdana, Times New Roman, itp.

Styl czcionki

w paragrafie

zmieniamy poleceniem:

<p style="font-style: styl; ">

Tekst paragrafu

</p>

Do dyspozycji mamy trzy style czcionki: normal, italic i oblique.

Inny sposób nadawania czcionce odpowiedniego stylu

Czcionka wyróżniona (emfaza, czyli pochylona): <em>

Tekst

</em>

Czcionka mocna wyróżniona pogrubiona: <strong>

Tekst

</strong>

1. Zmienić kolor tytułu i podtytuł strony na granatowy.

2. Zmienić tytuły paragrafów na niebieski.
3. Zmienić kolory w paragrafie Parametry mikroprocesora według poniższego

wzoru (użyć odpowiedniego atrybutu znacznika <a>).

4. Wprowadzić czcionkę pogrubioną w paragrafie Budowa mikroprocesora

według poniższego wzoru (użyć odpowiedniego atrybutu znacznika

<strong>).

5. Plik ponownie zapisać na pulpicie.

6. Wyświetlić stronę w przeglądarce.

Krok 10. Odsyłacze i etykiety

Za pomocą odsyłaczy hipertekstowych wiążemy ze sobą rozmaite zasoby w World

Wide Web, dzięki czemu możemy za pomocą kliknięć przenosić się w inne miejsca w
Internecie lub w tym samej witrynie, pobierać pliki, uruchamiać pocztę itd.

Można wyróżnić cztery rodzaje odsyłaczy: do etykiet, do stron, do skrzynki poczty

elektronicznej oraz odsyłacz obrazkowy.

Etykieta (zwana też zakładką lub kotwicą - ang. anchor) jest rodzajem
elektronicznej zakładki. Gdy utworzymy etykietę, będziemy mogli się odwoływać nie
tylko do zawierającej ją strony, ale i do konkretnego miejsca na stronie.

Konstrukcja etykiety jest następująca:
<a name="nazwa_etykiety"> </a>

Jeśli tworzymy odsyłacz do etykiety na tej samej stronie, wystarczy użyć samej
nazwy etykiety, czyli:

<a href="#nazwa_etykiety">

Tekst

</a>

Uwaga: należy zwrócić uwagę na wielkość liter w etykiecie. Gdy etykieta rozpoczyna

się z wielkiej litery, także odsyłacz powinien zawierać nazwę etykiety pisaną z
wielkiej litery.

Odsyłacz do stron wskazuje pewne miejsce w Internecie i pozwala skoczyć do niego
za pomocą kliknięcia na niej myszką.

<a href="adres strony internetowej">

Tekst

</a>

Gdy utworzymy odsyłacz, ciąg znaków

Tekst

będzie zaznaczony innym kolorem,

zazwyczaj niebieskim, i podkreślony. Gdy przesuniemy kursor myszki nad odsyłacz,
kursor przyjmie postać rączki, natomiast w wierszu statusu przeglądarki powinna

się pojawić nazwa strony, która wskazuje link. Kliknięcie spowoduje
natychmiastowy skok do wskazanego miejsca.

Drugim ważnym odsyłaczem jest adres poczty elektronicznej. Stosujemy tutaj na
przykład następujące polecenie:

<a href="mailto:autor@adres.emailowy">

Imię i nazwisko

</a>

Napis mailto daje sygnał przeglądarce WWW, że ma uruchomić pocztę

elektroniczną. Przesunięcie kursora myszki nad tekst

Imię i nazwisko

wyświetli w

pasku stanu adres poczty elektronicznej, kliknięcie myszką natomiast spowoduje

uruchomienie modułu pocztowego, w którym czytelnik strony będzie mógł
zredagować list do autora.

Odsyłacz obrazkowy

Wszystkie odsyłacze przedstawione do tej pory, miały postać tekstową. Jeśli chcesz
umieścić w swoim serwisie np. menu z obrazkowymi przyciskami, należy w tym celu

użyć następującego polecenia:
<a href="adres"><img src="nazwa_pliku" border="0"></a>

gdzie jako adres można podać:

- ścieżkę dostępu do dowolnej podstrony danej strony

- adres internetowy (poprzedzony przez "http://")
- adres poczty elektronicznej (poprzedzony przez "mailto:")

1. Przed każdym paragrafem umieścić etykietę (np. <a name="et1"> </a>).

2. Na początku strony (po tytule i podtytule) umieścić listę odsyłaczy, która

umożliwi szybkie przejście do poszczególnych paragrafów tworzonego
serwisu. Użyć znacznika np. <a href="#et1">Cechy

mikroprocesora</a>.

3. W paragrafie Cechy mikroprocesora umieścić odsyłacze do stron

internetowych producentów mikroprocesorów: (

WWW.intel.com

WWW.motorola.com

WWW.amd.com

4. Plik ponownie zapisać na pulpicie.
5. Wyświetlić stronę w przeglądarce.

6. Sprawdzić czy działają odsyłacze do etykiet.
7. Sprawdzić czy działają odsyłacze do stron firm produkujących

mikroprocesory.

Krok 11. Grafika

Grafikę możemy wprowadzić za pomocą polecenia:
<img src="nazwa_pliku" alt="nazwa alternatywna">

W najprostszym przypadku, gdy obrazek znajduje się w tym samym katalogu co
dokument, wystarczy podać jego nazwę. Gdy grafiki gromadzimy na serwerze w

odrębnym katalogu, konieczne jest podanie ścieżki dostępu. Na przykład:
<img src="../podkatalog/grafika.jpg" alt="nazwa alternatywna">

Tekst nazwa alternatywna zostanie wyświetlony po przesunięciu kursora w pole

rysunku.

Uwaga! Znacznik <img src="..."> nie posiada znacznika zamykającego.

Atrybuty znacznika <img>

Przeglądarka automatycznie odczytuje właściwą wysokość i szerokość rysunku, ale

często wielkości te są jawnie wstawiane za pomocą atrybutów height oraz width.
Przykładowy sposób podanie wielkości rysunku 300 na 400 pikseli:

<img src="nazwa_pliku" width="

300

" height="

400

" alt="nazwa

alternatywna">

Dodatkową przestrzeń w poziomie i w pionie między grafiką a sąsiadującymi

elementami tworzymy za pomocą atrybutów: margin (margines globalny) lub
margin-top,

margin-bottom,

margin-left,

margin-right (marginesy

cząstkowe). Przykładowy sposób podania wielkości lewego i prawego marginesu (50

pikseli):
<img src="nazwa_pliku" alt="nazwa alternatywna" style="margin-left:

px;

margin-right:

px; „>

Obramowanie programujemy dodając atrybut border, przykładowo czerwona
ramka o szerokości 5 pikseli:

<img src="nazwa_pliku" alt="nazwa alternatywna" style="border:

red

solid; ">

Należy zwrócić uwagę, że grafika nie jest elementem blokowym, zajmującym na
wyłączność miejsce w wierszu, lecz tzw. zastępowanym, i możliwe jest ustawienie

kilku grafik obok siebie.

1. W paragrafie Budowa mikroprocesora umieścić rysunek Budowa.jpg. Jako

nazwę alternatywną przyjąć: Budowa mikroprocesora.

2. Dodać paragraf zatytułowany: Przykłady mikroprocesorów.
3. W paragrafie umieścić obok siebie trzy zdjęcia (rysunki) mikroprocesorów.

Są one dostępne w plikach: Intel1.jpg, Intel2.jpg, Intel3.jpg.

4. Jako nazwy alternatywne podać kolejno: Intel 4004, Intel Pentium, Intel Duo

Core.

5. Dla pierwszego obrazka wprowadzić odsyłacz obrazkowy do strony:

http://www.intel.com.

6. Plik ponownie zapisać na pulpicie.
7. Wyświetlić stronę w przeglądarce.

8. Sprawdzić czy działa odsyłacz obrazkowy.

Krok 12. Tabele

Ramy tabeli tworzone są za pomocą polecenia:

<table> </table>
Cała zawartość tabeli musi być umieszczona między tymi dwoma znacznikami. W

ich ramach są umieszczane definicje wierszy, definicje komórek w wierszach,
konkretne dane w komórkach, tytuł tabeli i nagłówki wierszy i kolumn.

Wiersze w tabeli
Wiersze tabeli wprowadzamy za pomocą polecenia:

<tr> </tr>
Wiersz tabeli tworzy ramy dla komórek z danymi. W ramach <table> </table>

można umieścić wiele kolejnych definicji wierszy <tr> </tr>.

Komórki w wierszu
Komórki tabeli wprowadzamy za pomocą polecenia:

<td> </td>

Komórka zawiera już konkretne dane. Między jej znacznikami można umieszczać

tekst i grafikę. Konkretne komórki są umieszczane między znacznikami wybranego
wiersza, na przykład (

aii

oznacza zawartość komórki):

<table>

<tr><td>

a11

</td><td>

a12

</td><td>

a13

</td></tr>

<tr><td>

a21

</td><td>

a22

</td><td>

a23

</td></tr>

<tr><td>

a31

</td><td>

a32

</td><td>

a33

</td></tr>

</table>

Obramowanie tabeli

Aby tabela zawierała naokoło obramowanie, wystarczy rozszerzyć definicję o
atrybut border. Jeśli nie podamy szerokości obramowania, przyjmowana jest jej

domyślna wartość.
<table border> </table>
Gdybyśmy podali szerokość obramowania w pikselach, zostanie ona odpowiednio

zinterpretowana przez przeglądarkę, na przykład:
<table border="10"> </table>

Szerokość tabeli

Szerokość komórki jest określana za pomocą stylów:
<td style="width: 150px; ">

Zawartość komórki

</td>

Formatowanie w komórkach

Atrybut align wykorzystuje się także do poziomego wyrównania zawartości komórki

(a nawet całego wiersza tr) - środkowania, justowania do lewej i justowania do
prawej, z użyciem wartości center, left i right.

<td align="left">

Zawartość komórki

</td>

<td align="center">

Zawartość komórki

</td>

<td align="right">

Zawartość komórki

</td>

1.  Dodać paragraf zatytułowany: Parametry przykładowych mikroprocesorów.
2.  W paragrafie tym umieścić tabelę według poniższego wzoru.
3.  Plik ponownie zapisać na pulpicie.

4. Wyświetlić stronę w przeglądarce.
5. Na końcu strony umieścić informacje o autorze strony i odsyłacz do skrzynki

poczty elektronicznej autora.

6. Uzupełnić listę odsyłaczy do paragrafów na początku strony i wprowadzić

odpowiednie etykiety.

7. Plik ponownie zapisać na pulpicie.

8. Wyświetlić stronę w przeglądarce.
9. Sprawdzić czy działa odsyłacz do skrzynki poczty elektronicznej.

Document Outline