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="
O
pis zawartości strony
">
<meta name="Keywords" content="
Słowa
kluczowe rozdzielone przecinkami
">
<meta name ="Author" content="
Im
ię i nazwisko autora
">
<meta http-equiv ="Content-Language" content="pl">
<title>
T
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.
1
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>:
<p style="text-align: left; ">
Tekst
</p>
akapit wyrównany do lewej
<p style="text-align: right; ">
Tekst
</p>
akapit wyrównany do prawej
<p style="text-align: center; ">
Tekst
</p> akapit
wyśrodkowany
<p style="text-align: justify; ">
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:
2
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.
3
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>.
<ul>
<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.
4
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:
5
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.
6
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.
7
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: (
,
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">
8
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:
50
px;
margin-right:
50
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:
5
px
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>
9
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.
10
11
Document Outline
- Krok 1. Przygotowanie do pracy
- Krok 2. Tworzenie struktury dokumentu
- Krok 3. Wpisywanie tekstu i paragrafy
- Krok 5. Tytuły
- Krok 6. Pozioma linia
- Krok 7. Wykazy (listy) nienumerowane
- Krok 10. Odsyłacze i etykiety
Wyszukiwarka
Podobne podstrony:
Projekt strony internetowej
Cechy projektowanej strony internetowej (1)
Projekt strony internetowej
Cechy projektowanej strony internetowej (1)
projekty 3 id 400866 Nieznany
kse projekt id 252149 Nieznany
0001 Ważne strony internetowe
potrafie korzystac z internetu Nieznany (7)
projekt inzynierski wskazowki w Nieznany
posrednik internetowy Nieznany
projekt29 id 400291 Nieznany
projektMOS id 400412 Nieznany
Projektowanie zwrotnic glosniko Nieznany (3)
Gruszecki,P Podlaczamy Interne Nieznany
potrafie korzystac z internetu Nieznany (6)
Projekt zaliczeniowy Sprawozdan Nieznany
projektowanie stron internetowych
07 projektowanie skladuid 6941 Nieznany (2)
więcej podobnych podstron