Politechnika Gdańska
Wydział Elektroniki, Telekomunikacji i Informatyki
Języki programowania wysokiego poziomu (JPWP)
Opracowanie:
dr inż. Mariusz Kaczmarek
Katedra Inżynierii Biomedycznej
Gdańsk, 2004
Opis ćwiczenia laboratoryjnego – JPWP
Wymagania dotyczące uczestników ćwiczenia:
- znajomość podstaw programowania strukturalnego (C),
- znajomość podstaw programowania obiektowego (C++),
- znajomość podstaw programowania w języku JAVA (pierwsze dwa wykłady);
- znajomość podstaw HTML i CSS (Zapoznać się z treścią wprowadzenia do HTML, dostępnego w folderze d:\cw4\html\index.html, na stronie WWW zasobów przedmiotu).
- umiejętność twórczego myślenia.
Stosowane technologie i narzędzia w ćwiczeniu:
- Przeglądarka internetowa obsługująca HTML,
- Edytor HTML, np. Pajaczek,
- Konsola systemu operacyjnego (konsola/terminal DOS, WIN).
Materiały wprowadzające i pomocnicze:
- Specyfikacja języka HTML i jego dialektów – www.w3c.org, i in.
- Materiały i wiedza z wykładów;
- Jacek Rumiński, Programowanie uniwersalne, Jacek Rumiński/ACTEN, Gdańsk 2004.
Cel laboratorium:
Celem ćwiczenia jest praktyczne zapoznanie studentów z podstawą wykorzystywania języków znaczników HTML oraz XHTML. Zaprezentowane zostaną zasadnicze elementy specyfikacji języka HTML 4.0, w tym: zasady konstrukcji dokumentu dobrze sformułowanego, sprawdzanie poprawności dokumentu, poprawności kodowania polskich znaków diaktrycznych. Po realizacji ćwiczenia student powinien zdobyć podstawową umiejętność samodzielnego napisania i zweryfikowania dokumentów HTML (serwisów www).
2. PRZEBIEG LABORATORIUM
Ramowy program ćwiczenia (łączny czas pracy 2h15min – 3 godziny lekcyjne):
I. Wprowadzenie kierownika ćwiczenia. Zapoznanie się uczestników ze środowiskiem, przegląd dokumentacji (10 min.).
II. Utworzenie dokumentu HTML - własnego CV. (35 min).
III. Utworzenie schematu stylów dokumentu (CSS) dla powyższego dokumentu HTML. Sprawdzenie poprawności dokumentu. (35 min).
IV. Utworzenie dokumentu HTML zawierającego elementy interakcji z użytkownikiem przeglądarki www. (30 min).
V. Utworzenie dokumentu XHTML (30 min).
I.
Do realizacji ćwiczenie potrzebne będą następujące programy:
- Przeglądarka internetowa obsługująca HTML (IE, Netscape,
- Edytor HTML, np. Pajączek 2.1,
Utworzyć dokument HTML własnego CV. Dokument powinien charakteryzować się przejrzystością prezentowanych treści. Należy zatem zadbać o odpowiednią oprawę graficzną: kolory tła, czcionek; prezentacje w tabelach, miejsca na umieszczenie fotografii. Zapisać dokument w pliku, np. imie_nazwisko.html. Następnie dokonać sprawdzenia, czy zapisany dokument jest dobrze sformułowany. Można tego dokonać przykładowo posługując się programami MS IE 6.0 lub Netscape (wersja 7 i późniejsze).
Wprowadzić świadomie błąd składni własnego dokumentu HTML, w celu sprawdzenia w jaki sposób program (przeglądarka) reaguje na błędy w dokumencie HTML.
III. Utworzenie schematu stylów dokumentu (CSS) dla powyższego dokumentu HTML. Sprawdzić poprawność wyświetlania dokumentu z wykorzystaniem pliku CSS. Na bazie stworzonego CV utworzyć swoje hipotetyczne CV absolwenta WETI PG wykorzystując do formatowania prezentacji utworzony poprzednio arkusz CSS (35 min).
Utworzyć dokument HTML zawierający elementy interakcji z użytkownikiem Internetu (przeglądarki www). Wykorzystać do pomocy tekst kursu html:formularze.
Przykładowy dokument html z interakcją (podaj_dane.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type"
content="text/html; charset=iso-8859-2">
<title>Pogaduchy internetowe- ankieta samochodowa</title>
</head>
<body>
<form action="..." method="get">
Samochód:
<select>
<option>Fiat Punto</option>
<option>Skoda Fabia</option>
<option>Renault Megane II</option>
<option>Ford Focus</option>
<option>Inne</option>
</select>
<br>
Nadwozie:
<input type="radio" name="nadwozie" value="h"> hatchback
<input type="radio" name="nadwozie" value="c"> Combi<br>
Pojemność silnika:
<input type="radio" name="silnik" value="1.0"> 1.0
<input type="radio" name="silnik" value="1.2"> 1.2
<input type="radio" name="silnik" value="1.4"> 1.4
<input type="radio" name="silnik" value="i"> inna<br>
Dodatki:
<input type="checkbox" name="dodatki" value="ABS"> ABS
<input type="checkbox" name="dodatki" value="Wspomaganie"> Wspomaganie kierownicy
<input type="checkbox" name="dodatki" value="Poduszka"> Poduszka powietrzna
<input type="checkbox" name="dodatki" value="i"> inne<br>
<textarea name="tekst" rows="5" cols="25"> Uwagi eksploatacyjne: </textarea><br>
<button type="reset" name="reset"> skasuj
<hr width="30">dane </button> <input type="submit"
value=" wyślij dane ">
</form>
</body>
</html>
Przetwórz dokument hipotetyczne CV z wersji HTML do wersji HXTML zgodnie z poniższymi uwagami. Sprawdź narzędziem xmlvalid poprawność dokumentu xhtml.
XHTML 1.0 - następca języka HTML
Język HTML od wersji 4.01 nie jest już dalej rozwijany - zastąpił go XHTML, obecnie w wersji 1.1 (jednak tekst dotyczy łatwiejszej do opisania wersji XHTML 1.0). Nazwa brzmi może groźnie, jednak jest on niemal identyczny jak HTML 4.01, którego dobrze znasz z mojego kursu. Kilka nowych reguł bardzo łatwo można opanować i już po chwili będziesz w stanie pisać strony zgodne z językiem XHTML. Po co więc powstał nowy język? Dla wygody. HTML został znormalizowany aby mógł być zgodny z językiem XML, który określa zasady tworzenia innych języków używanych w elektronicznych publikacjach.
Pisząc nowe strony dobrze jest stosować się do zasad określonych w XHTMLu, jednak jeżeli chcesz nadal używać tylko języka HTML 4.01 nic nie stoi na przeszkodzie aby zapomnieć o tym tekście zaraz po jego przeczytaniu. Nowe przeglądarki stron WWW będą cały czas obsługiwać HTML na równi z XHTMLem - przynajmniej w najbliższej przyszłości. Miliony dokumentów na całym świecie zostały napisane w języku HTML - nikt nie będzie ich nagle przerabiał do XHTMLa, bo byłaby to czynność pozbawiona sensu. Warto jednak znać różnice pomiędzy językami.
Deklaracja dokumentu
Każda strona w języku XHTML musi zaczynać się od określenia wersji języka XML (obecnie jest to wersja 1.0) i sposobu kodowania znaków. Dla języka polskiego będzie to iso-8859-2:
<?xml version="1.0" encoding="iso-8859-2"?>
Zwróć uwagę na znak zapytania (nie ukośnik), "zamykający" wersję XML. Następnie trzeba zadeklarować odpowiednią definicję DTD, czyli określić reguły języka. Musimy wybrać jedną z trzech wersji.
1. Strict: strona będzie napisana zgodnie z deklarowanym standardem i nie dopuszcza innych elementów. Trudno jest napisać taką stronę, ale właśnie do takiego ideału dążymy...
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
2. Transitional: strona będzie napisana zgodnie z deklarowanym standardem, ale dopuszczalne są też inne elementy, np. ze starego języka HTML. W większości wypadków dobrze jest użyć tej właśnie definicji...
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
3. Frames: strona będzie napisana zgodnie z deklarowanym standardem, ale dopuszczalne są też inne elementy, np. ze starego języka HTML. Ten wariant stosuje się gdy witryna zawiera ramki.
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"DTD/xhtml1-frameset.dtd">
Powyższe polecenia przypominają element !DOCTYPE z języka HTML.
Trzeba również określić tzw. przestrzeń nazw. W języku XML sami decydujemy jaką rolę pełnią wszystkie polecenia i ich atrybuty. Każdy element języka HTML może mieć wiele znaczeń, więc trzeba poinformować przeglądarkę co ma zrobić gdy natrafi np. na element img lub jak zareagować na atrybut src. W tym celu definiuje się przestrzeń nazw, gdzie określone są sposoby użycia poszczególnych poleceń. Odpowiedzialny jest za to atrybut xmlns (czyli XML namespace). Dla języka XHTML będzie to następujący fragment kodu:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Szablon strony
Znając już podstawowe elementy możemy utworzyć szablon strony. Nie różni się on bardzo od szablonu w języku HTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<title>Tytuł strony</title>
<p>Przykładowy akapit</p>
Czas na szczegóły...
1. Zagnieżdżanie. W języku XHTML istotna jest kolejność otwierania i zamykania tagów. W HTML również powinniśmy o tym pamiętać, ale tutaj ma to kluczowe znaczenie. Nie można napisać:
To <b>nie jest poprawna <i>kolejność</b> elementów</i> - są skrzyżowane!
Trzeba też pamiętać, aby element A nie zawierał innych elementów A. PRE nie może zawierać elementów IMG, BIG, SUB, SUP, SMALL i OBJECT. BUTTON nie może zawierać elementów INPUT, SELECT, TEXTAREA, LABEL, BUTTON, FORM, FIELDSET, IFRAME i ISINDEX. LABEL nie może zawierać innych elementów LABEL, a FORM nie może zawierać innych elementów FORM.
2. Zamykanie znaczników. Każdy znacznik musi być zamknięty, nawet jeżeli nie ma znaczników zamykających. Brzmi to może dziwnie, bo jak zamknąć element <br>? Jest na to sposób - wystarczy użyć go w postaci <br />, podobnie jak np. <img src="zdjecie.jpg" />. Pamiętaj o spacji przed ukośnikiem, bo niektóre współczesne przeglądarki mogą mieć problem gdy odstępu nie będzie.
3. Wielkość liter. Wszystkie elementy i atrybuty muszą być zapisywane z małych liter. Wielkość znaków w XHTML ma duże znaczenie, więc co innego znaczy <B> (to nie jest pogrubienie), a co innego <b> (to jest pogrubienie). W całym kursie stosuję duże litery dla atrybutów aby kurs był bardziej czytelny. W XHTMLu większość poleceń pisana jest z użyciem małych liter.
4. Cudzysłów. Wszystkie atrybuty muszą być zapisane w cudzysłowach. Błędem jest napisanie <table align=left width=100>. Prawidłowo powinno być: <table align="left" width="100">.
5. Atrybuty puste. W HTML stosowane są atrybuty puste (logiczne), np. <hr noshade>. W XHTMLu muszą mieć przypisane wartości. Ponieważ nie mają wartości, przypisuje się im własną nazwę. Po zamianie na XHTML przykład wygląda tak: <hr noshade="noshade" />.
6. Znaki specjalne. Trzeba uważać przy stosowaniu znaków < i & w skryptach i deklaracjach CSS. Najlepiej zastępować je poprzez < i &.
7. Skrypty. Każdy skrypt powinien być "otoczony" przez następującą strukturę:
<SCRIPT language="javascript">
<![CDATA[
dopiero tutaj umieść skrypt
]]>
</script>
8. Atrybut ID Zamiast atrybutu name stosuj id. Atrybut name nie jest zalecany i nie powinno się go używać w XHTML. Jeżeli używasz atrybutu name, uzupełnij element o atrybut id o takiej samej wartości.
3. ZASADY OCENIANIA
Podstawą oceny jest opracowany w czasie ćwiczenia zbiór plików HTML, XHTML i CSS. Zbiór ten należy dostarczyć prowadzącemu w formie przez niego wskazanej.
4. UWAGI DODATKOWE
Instrukcja dostępna jest w wersji elektronicznej. Wszelkich informacji udziela prowadzący ćwiczenie.
Mariusz Kaczmarek, Katedra Inżynierii Biomedycznej, WETI, PG, 2004
bartek0419