|
home page priv msg forum sieci newbie obrona windows linux i inne systemy hardware software delphi, pascal, vb c, c++, assembler inne języki php, sql, js, xml forum projektów matura z informatyki hydepark bazar strona śmietnik artykuły newbie/faq sieci obrona windows linux i inne systemy programowanie webmasters irc/komunikatory hardware felietony inne download archiwum newsów strona rejestracja kanał IRC kanały rss faq/dokumentacja squad |
|
| użytkownicy | |
| 0 użytkowników online ostatni zarejestrowany: ginekolog | |
Kategorie -> Webmasters -> Kierunek XHTML !
| Autor artykułu | |||
| Data wysłania: 2005-09-23 19:12 Czytań: 4278 Komentarze [19] |  | JohnySpot friend [offline] [dołączył] | [profil] [pm] [email] [gg] [www] |
| Kierunek XHTML ! | |||
0. Wstęp
Każdy pamięta czasy kiedy to nie wiedząc jeszcze dlaczego i po co... na płycie z czasopismem komputerowym dumnie widniał napis "Pajączek". Nie jeden z nas zainstalował zapewne tą aplikację, aby przekonać się, że nie mamy zielonego pojęcia po co nam służy. Inni zajrzeli do menu Pomocy i odnaleźli "Heljonowski" Kurs HTML-a. Od tej pory zaczęła się wielka przygoda. Inni być może, zainteresowanie pakietem MS-OFFICE...uruchomili Front-Paga i zaczęli śmiecić w obszarze roboczym, publikując swoje bohomazy pozwalali ujrzeć światło dzienne swojej wesołejtwórczości. Dziś chyba rzadziej, niż kiedyś zdarza się nam widywać strony "domowe". Przyzwyczailiśmy się już do ładnych, zaprojektowanych serwisów / CMS-ów... Życie wielu z nas to badzIEwie ... a każda ambitniejsza osoba mająca odwagę spojrzeć na swoje arcydzieło pod np. Netscapem... załamywała ręce... i odinstalowywała przeglądarkę, lub też robiła dwie wersje strony. Dziś czasy się zmieniły.... Ilość dostępnych przeglądarek drastycznie się zmieniła. Problemy zaczęłyby więc urastać do robieniu 10ciu wersji strony. A wielu z nas, do tej pory nie stosuje poprawnej składni HTML-a... Może więc warto przyjrzeć się technologii XXI wieku ... XHTML...
1. XHTML
XHTML to jakby oczekiwana wersja HTML-a 5. Powstał On z dwóch powodów...
a) Brak zgodności ze standardami wielu przeglądarek...
b) XML
XHTML to jakby połączenie tego co dobre z HTML-a i wkroczenie bucikiem w kierunku XML-a... a zarazem standard mający zapewnić kompatybilność wyglądu strony pod wszystkimi przeglądarkami. Nie różni się on znacznie od HTML-a. Trzeba tylko kierować się sztywnymi zasadami pisząc dokument. Składnia XHTML-a jest IDENTYCZNA jak HTML-a, poza małymi zmianami posiada te same znaczniki, dlatego każdy poprawnie napisany kurs HTML-a jest jak najbardziej użyteczny przy nauce XHTML-a. O czym jednak należy pamiętać ? Oto kilka priorytetowych zasad:
1) Na początku każdego pliku musi znajdować się prolog XML-a:
Kod:
<?php
echo '<?phpxml version="1.0" encoding="utf-8"? />';
?>
2) Później musi znaleść się specyfikacja DTD wersji XHTML-a
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
A następnie rozpoczęcie dokumentu XHTML
Kod:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
Od teraz istnieją pewne zasady:
3) Wszytki znaczniki zamykamy nawet BR i IMG... jeżeli znacznik posiada znacznik zamykający zamykamy go naturalnie:
Kod:
<p>Ten znacznik jest zamknięty</p>
Jeżeli nie zamykamy w jednym znaczniku w następujący sposób:
Kod:
<img src="" alt="" />
<input type="text" name="pole" />
4) Nie mieszamy zamykania znaczników (ŹLE):
Kod:
<i>Ala ma <b>kota</i> a kot <u>ma Alę</b></u>
(DOBRZE)
Kod:
<i>Ala ma</i><b><i>kota</i><b/><b> a kot </b><b><u>ma Alę</u></b>
5) Wszystkie znaczniki piszemy małymi literami:
Kod:
Nie ma <IMG /> <P /> <HTML></HTML> i <BODY></BODY>
Ale jest <img /> <p /> <html></html> i <body></body>
6) Zlikwidowano kilka znaczników HTML-a... obowiązuje też zasada, że nie używa się "właściwości" obiektów, ale stronę formatuje się na MAX-a w CSS-ie... Co to oznacza. To oznacza, że taki znacznik jak nie istnieje... takie rzeczy trzeba opisywać np. tak: .
Tak samo nie ma już w znaczniku text, link, vlink, alink, bgcolor.... Wszystko opisujemy w CSS. Stosuj CSS wszędzie gdzie się tylko da.
7) Ta uwaga pojawia się tutaj chociaż nie jest obowiązkiem stosowania jej przy XHTML-u, to jest bardzo cenną uwagą. Layout-ów nie robi się na tabelkach ! Od tego jest znacznik ...
8) Do pozycjonowania div-ów używamy w CSS właściwości "float" i "clear" ... najczęściej używane to:
Float: left; - wyrównuje do lewej
Float: right; - wyrównuje do prawej;
Clear: both; - powoduje "wycentrowanie" ( w języku potocznym )
9) Wszystkie wartości muszą być zawarte w symbolach " i ".
Kod:
<img src="obrazek.jpg" alt="ble ble" />
10) Nie używamy w dokumencie znaków "<", ">" i "&" (kilku innych też).. zastępujemy je encjami:
"&" - &
"<" - <
">" - >
11)Skrypty i style wstawiamy w stylu zgodnym z XML-em czyli:
Kod:
<script type="text/javascript">
<![CDATA[
Ciało skryptu
]]>
</script>
Kod:
<style type="text/css">
<![CDATA[
styl
]]>
</style>
2) Jeżeli mamy pisać w PHP (index.php) problem z prologiem XML rozwiązujemy:
Kod:
<?php
echo '<?xml version="1.0" encoding="utf-8"?>';
?>
13) Przy prologu XML jak zwykle pojawia się problem z badziewiem bo wpada w tryb Quirks więc bez namysłu warto jest napisać taki skrypcik...
Kod:
<?php
#Uruchamiam buforowanie w celu możliwości manipulowania nagłówkami
ob_start();
#Manipulujemy nagłówkami
if (strpos(@$_SERVER['HTTP_ACCEPT'],'application/xhtml+xml') !== false) {
header('Content-type: application/xhtml+xml');
echo '<?xml version="1.0" encoding="utf-8"?>';
} else {
header('Content-type: text/html; charset=utf-8' );
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="all" href="style/main.css" />
<title>7 Włocławska Drużyna Harcerska "Silva"</title>
</head>
<body>
[...]
</body>
</html>
<?php
ob_end_flush();
?>
Dzięki temu, większość przeglądarek będzie właściwie interpretowało stronę.
14) Prawidłowa struktura formularza wygląda następująco...
Kod:
<form action="" method="post">
<fieldset>
<input type="hidden" name="akcja" value="walue" />
<legend>Opis</legend>
<div
<label >Opis pola
<input type="text" name="pole" /></label>
</div>
<div>
<label>Treść
<textarea name="tresc" cols="40" rows="40"></textarea></label>
</div>
</fieldset>
<div>
<input type="submit" name="wyslij" value="Walue" />
</div>
</form>
Poprawione po poście frea-ka
Wkładanie formularzy w tabelkę nie jest jednak karygodnym błędem.
15) Menu też nie robimy na tabelce. Używamy do tego odpowiednio wystylizowanej w CSS listy
16) Pewne znaczniki muszą być zaopatrzone w pewne właściwości np. znacznik
17) Czasami bywa tak, że coś wygląda źle np. (zazwyczaj) pod IE... a we wszystkich innych przeglądarkach dobrze. Co wtedy ? Należy stosować tzw.. hacki. Najlepszy do zastosowania to:
Kod:
<!--[if IE]><link rel="stylesheet" href="badzIEwie.css" type="text/css" media="screen" /><![endif]-->
Co powduje załadowanie innego stylu jeżeli przeglądarką jest IE
18) Nie ma JS ... w XHTML-u używamy DOM... kurs dom znajduje się na jednej ze stron podanych w linkach.
19) Często w IE pojawiają się jakieś odstępy przy obrazkach ...czasami sprawę załatwia:
Kod:
img {
vertical-align: top;
}
A zamiast:
Kod:
<img />
<img />
<img />
Użyć:
Kod:
<img /><img /><img />
Czyli zlikwidować wszystkie białe znaki z nimi są problemy.
20) Jest to chyba dobra okazja aby powiedzieć coś o kodowaniu. Narzędzia Microsoftu aby rozpoznać pliki kodowane w UTF-8 zapisuje niewidzialny znak "BOM" na początku, który nie pozwala wczytać przeglądarkom nagłówków. Czasami widać ten znak w przeglądarkach jako: "ďťż".
21) W czym pisać. To nie ma w gruncie rzeczy znaczenia, w czym Ci wygodnie, ja używam EditPlus-a. Jest szybki i ładnie koloruje składnię. Rzecz gustu.
22) Jakiej przeglądarki używać ? mam na swoim kompie IE 4.0/5.01/5.5/6 Opere, FF, Netscapa... Najlepiej strony robić pod Operą... Jeżeli strona wygląda ładnie pod operą, to trzeba poprawiać ją tylko pod IE 5/4 czasami pod IE 6...wszędzie indziej wygląda glanc (oczywiście zdarzają się wyjątki potwierdzające regułę)... Pyzatym opera posiada Opcję walidacji dokumentu. Nad zgodnością ze standardami czuwa W3C Org... walidowanie dokumentów, to sprawdzanie czy wszystko dobrze się napisało. Jest to trudne przy dokumentach PHP, ale Opera bardzo to ułatwia. Wystarcz otworzyć stronę i kliknąć:
[CTRL]+[ALT]+[V] ... a otworzy się validator W3C i pokaże nam błędy na naszej stronie.
23) Skąd mieć wszystkie wersje IE ? Są dostępne na stronie:
[ www ]
[ www ]
[ www ]
24) Semantyka. Czasami dokument jest napisany "poprawnie", jednak nadal istnieją pewne zasady, których mechanizm validacji nie wychwyci. To tak jak błąd gramatyczny w Wordzie (np. przecinek)... Cała semantyka wręcz genialnie wytłumaczona jest na [ www ]
25) Przydatne linki:
W tym temacie musnąłem tylko temat. Zainteresowanym polecam następujące strony:
[ www ]
[ www ]
[ www ]
[ www ]
[ www ] (biblia polskiego Internetu !!)
[ www ]
[ www ]
[ www ]
[ www ]
[ www ]
[ www ]
[ www ] (tutaj opis DOM)
[ www ] (walidator Opery)
[ www ] (walidator CSS)
engine & gfx by konrad_vme
GZIP enabled