Języki programowania wysokiego poziomu (JPWP)
Ćwiczenie 4:
Języki znaczników: HTML, XHTML
Opracowanie:
dr inż. Mariusz Kaczmarek
Katedra Inżynierii Biomedycznej
Gdańsk, 2004
1. WPROWADZENIE. CEL LABORATORIUM.
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).
Wprowadzenie kierownika ćwiczenia. Zapoznanie się uczestników ze środowiskiem, przegląd dokumentacji (10 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,
Konsola systemu operacyjnego (konsola/terminal DOS, WIN).
Utworzenie dokumentu HTML - własnego CV. (35 min).
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).
IV. Utworzenie dokumentu HTML zawierającego elementy interakcji z użytkownikiem przeglądarki www. (30 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>
V. Utworzenie dokumentu XHTML (30 min).
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...
<!DOCTYPE html
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.
<!DOCTYPE html
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.
<?xml version="1.0" encoding="iso-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tytuł strony</title>
</head>
<body>
<p>Przykładowy akapit</p>
</body>
</html>
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.
BAZY DANYCH Instrukcja laboratoryjna, cz. II
Opis ćwiczenia laboratoryjnego - JPWP
Mariusz Kaczmarek, Katedra Inżynierii Biomedycznej, WETI, PG, 2004
Politechnika Gdańska
Wydział Elektroniki, Telekomunikacji i Informatyki
Wyszukiwarka
Podobne podstrony:
instrukcja jpwp cw 5, Studia - informatyka, materialy, JAVA
instrukcja labchem, Instrukcja bezpieczeństwa i higieny pracy dotycząca wymagań i pracy w laboratori
MSIB Instrukcja do Cw Lab krystalizacja
Instrukcja do ćw 18 Montaż i demontaż magazynu składowania MPS
Instrukcja do ćw 06 Sterowanie pracą silnika indukcyjnego za pomocą falownika
Zestaw ćw nr 10, zestawy ćwicze gimnastycznych, zestawy ćwiczeń gimnastycznych
INSTRUKCJA BEZPIECZEŃSTWA l HIGIENY PRACY DOTYCZĄCA OBSŁUGI, instrukcje BHP
Instrukcja wykonania ćw HP2
Biofizyka instrukcja do cw nr 23
Biofizyka instrukcja do cw nr 0 Nieznany (2)
Wymagania dotyczące pomieszczeń i urządzeń higieniczno, BHP
instrukcje do ćw mięso, mięso
wymagania dotycz, BHP Moje, SZKOLA, Semestr I
Instrukcja do ćw 15 Montaż i uruchomienie układu nawrotnego silnika indukcyjnego
Biofizyka instrukcja do cw nr 09
więcej podobnych podstron