Tworzenie strony internetowej
Download
Report
Transcript Tworzenie strony internetowej
Tworzenie
strony internetowej
© Jacek Śmietański, Kraków 2006
Etapy powstawania strony
Projektowanie
Tworzenie kodu HTML
Umieszczenie strony na serwerze
Testy i ewentualne poprawki
Język HTML
Strona internetowa jest dokumentem tekstowym
zapisanym w języku znacznikowym HTML
(ang. HyperText Markup Language ).
Znaczniki to napisy otoczone znakami < i >. Wyznaczają
one strukturę oraz sposób prezentacji dokumentu.
Przykład:
-znaczniki otwierające: <STRONG>, <P>, <td>, <body>
-znaczniki zamykające: </STRONG>, </p>, </td>, </BODY>
Wielkość liter w kodzie znacznika nie ma żadnego znaczenia.
Szablon dokumentu
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso-8859-2">
<META NAME="Description" CONTENT="Tu wpisz opis zawartości strony">
<META NAME="Keywords" CONTENT="Tu wpisz wyrazy kluczowe rozdzielone
przecinkami">
<META NAME="Author" CONTENT="Tu wpisz swoje imię i nazwisko">
<META HTTP-EQUIV="Content-Language" CONTENT="pl">
<TITLE>Tu wpisz tytuł strony</TITLE>
</HEAD>
<BODY>
Tu wpisuje się treść strony
</BODY>
</HTML>
Definicja typu dokumentu
Znacznik <!DOCTYPE> informuje przeglądarkę, w jakiej
wersji standardu języka HTML została utworzona
strona. Należy go umieścić na samym początku
dokumentu, przed znacznikiem <HTML>.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Powyższy kod oznacza stronę napisaną zgodnie ze
standardem HTML 4.01, dopuszcza jednak znaczniki
zdeprecjonowane (obecne w starszych wersjach HTML, obecnie
niezalecane).
Znaczniki META
Znaczniki <META> umieszczamy w nagłówku strony, tj.
pomiędzy znacznikami <HEAD>, a </HEAD>. Opisują
one stronę (słowa kluczowe, kodowanie znaków).
<META NAME="Description" CONTENT="Tu wpisz opis zawartości strony">
<META NAME="Keywords" CONTENT="Tu wpisz wyrazy kluczowe rozdzielone
przecinkami">
<META NAME="Author" CONTENT="Tu wpisz swoje imię i nazwisko">
<META HTTP-EQUIV="Content-Language" CONTENT="pl">
Słowa kluczowe (keywords) oraz opis strony
(description) informują wyszukiwarki o jej tematyce,
ułatwiają odnalezienie Twojej witryny.
Kodowanie
Poniższy znacznik <META> określa kodowanie strony
zdodnie ze standardem ISO-8859-2. Umożliwia on
poprawne wyświetlanie znaków charakterystycznych
dla polszczyzny.
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso-8859-2">
Uwaga! Polskie znaki muszą być odpowiednio zakodowane w
dokumencie. Większość polskich edytorów HTML automatycznie
dokonuje odpowiedniego przekodowania. Jeśli jednak tak nie jest,
musisz użyć specjalnego programu kodującego.
Tytuł strony
Tytuł trony umieszczamy wewnątrz nagłówka, pomiędzy
znacznikami <TITLE> i </TITLE>.
<TITLE>Strona o zającach</TITLE>
Tytuł strony pokazuje się w opisie okna przeglądarki, jest też główną
informacją wyświetlaną przez wyszukiwarki.
Ciało dokumentu
Zasadniczą treść dokumentu, czyli to co będzie się
wyświetlało na stronie, wpisujesz wewnątrz znacznika
<BODY>, tj. pomiędzy: <BODY> i </BODY>.
Akapit
Akapit wyznaczają znaczniki <P> i </P>
Przejście do nowej linii (w obrębie tego samego
akapitu) wymusza znacznik <br> (w tym przypadku nie
używamy znacznika zamykającego).
Tytuły oznaczamy znacznikami nagłówków: <h1> </h1>,
<h2> </h2>, ...
Łącze
Odnośniki do innych dokumentów tworzymy używając
znacznika <A>. Parametr HREF=”” określa adres, na
który wskazuje odsyłacz (adres ten wpisujesz wewnątrz
cudzysłowia).
Treść, która będzie linkiem (odsyłaczem) należy
umieścić wewnątrz tagu <A> (pomiędzy znacznikiem
otwierającym, a zamykającym).
Przykład:
<A HREF=”http://www.farmacja.cm-uj.krakow.pl”>Farmacja</A>
Farmacja
Obrazek
W miejscu, w którym chcemy umieścić obrazek
wpisujemy tag <IMG> z parametrem SRC=””. Parametr
ten określa lokalizację pliku z obrazkiem.
<IMG SRC=”mojezdjecie.jpg” ALT=”to ja”>
Tekst określony parametrem alt będzie się pojawiał w przeglądarkach
tekstowych (nie wyświetlających grafiki). Inne, opcjonalne, parametry to
(m.in.) width – szerokość obrazka height – wysokość, title – tytuł obrazka,
hspace, vspace - marginesy, border – grubość obramowania.
Tabela
Tabelę definiuje znacznik <TABLE>
Wiersz tabeli: <TR>
Komórka: <TD>
Style
Styl to potężne narzędzie decydujące o wyglądzie
naszego dokumentu. Tutaj określamy formatowanie
poszczególnych elementów.
Przykład:
Określenie stylu akapitu wewnątrz nagłówka dokumentu (przed
znacznikiem zamykającym </HEAD>). Styl ten będzie zastosowany do
wszystkich akapitów w dokumencie.
<style type="text/css">
p { font-family: Arial; font-size: 12pt; text-align: justify }
</style>
Edytory i kursy
Dokument HTML można edytować w dowolnym
edytorze, warto jednak korzystać ze specjalnie w tym
celu stworzonych programów, które zdecydowanie
ułatwiają pracę nad kodem.
W sieci jest mnóstwo kursów i opisów poszczególnych
elementów języka. Przykładowe odnośniki:
http://www.biofizyk.pl
http://www.kurshtml.boo.pl/
Wysyłanie strony na serwer
Wszystkie pliki związane z Twoją witryną internetową
muszą znaleźć się w Twoim katalogu domowym w folderze
public_html
W pracowni Twoje konto oznaczone jest jako dysk H:\
możez też zalogować się bezpośrednio w systemie Linux.
Z domu możesz połączyć się z serwerem za pomocą
dowolnego programu obsługującego SFTP (np. putty,
WinSCP).
Prawa dostępu
Twój katalog domowy, folder public_html oraz wszystkie
jego podfoldery muszą mieć nadane prawa wejścia
(wykonywania) dla wszystkich.
Natomiast wszystkim plikom na Twojej stronie należy nadać
prawo odczytu dla wszystkich.
Nikomu poza sobą nie udostępniaj prawa zapisu (chyba, że dla danego
pliku jest taka konieczność)
Uwagi końcowe
W nazwach pliku nie używaj znaku odstępu (spacja) oraz
znaków charakterystycznech dla polszczyzny. Niektóre
przeglądarki mogą nie czytać takich stron.
Zadanie
Twoim zadaniem jest utworzenie strony internetowej (o dowolnej
tematyce), która:
składa się z przynajmniej kilku (>3) podstron powiązanych ze sobą
aktywnymi łączami
zawiera przynajmniej jeden aktywny odnośnik do strony zewnętrznej
zawiera przynajmniej jeden własnoręcznie wykonany obrazek
poprawnie wyświetla znaki charakterystyczne dla polszczyzny
(kodowanie według standardu ISO 8859-2)
znajduje się na Twoim koncie uczelnianym (adres strony:
http://www.farmacja.cm-uj.krakow.pl/~twójlogin) i jest dostępna dla
wszystkich użytkowników
jest ciekawa, estetyczna, bez błędów gramatycznych i językowych