Kurs tworzenia stron www: xhtml/css cz 1
Autor: admin 
Komentarzy: 0 
Odwiedzin: 135225 Dodany: 2010-01-09 18:47:58
Celem kursu jest stworzenie od poczatku, w całości strony internetowej posługując się językiem xhtml, arkuszami styli css.
Kursanci samodzielnie napiszą stronę dla abstrakcyjnej firmy reklamowej.
Ponieważ celem kursu jest nauka praktycznego posługiwania się językiem xhtml i css nie będziemy przywiązywać większej uwagi do projektu graficznego strony. Niemniej jednak należy wspomnieć, że właśnie od niego rozpoczyna się prace nad stroną www. Projetk graficzny to pierwszy etap, jeżeli masz zdolności graficzne możesz go wykonać samodzielnie (np za pomocą programu www.gimp.pl) , lub skorzystać z usług grafika :)
My skupimy się jednak na samym kodowaniu, grafiki, które będą potrzebne do stworzenia powyższej strony można pobrać tutaj.
(Podczas pracy składacza pliki graficzne przygotowuje składacz wycinając je z projektu graficznego, na podstawie, którego tworzy kod).
Ok. mamy już grafiki. Na początek przygotujmy sobie odpowiednie miejsce pracy (Organizacja to podstawa). Wybieramy miejsce na swoim komputerze, gdzie chcemy trzymać naszą stronę. Tworzymy tam katalog, np. moja_stronka, a w nim odpowiednio pliki i podkatalogi:
Trzeba też wybrać edytor z którego będziemy korzystać do pisania kodu. Teoretycznie może to być dowolny edytor tekstu, gdzie wpisujemy wszystkie polecenia, dotyczące formatowania tekstu, wstawiania grafiki i inne. Jednak pisanie strony w zwykłym edytorze tekstu, byłoby bardzo uciążliwe. Dlatego powstało wiele wyspecjalizowanych edytorów, które ułatwią, przyspieszą i uprzyjemnią pracę webdeweloperów. Są to m. in. Pajączek, CoreEditor, Ager Web Edytor, EdHTML i wiele innych. Będziemy pracować w edytorze PSPad. Posiada on wiele pomocnych funkcji, jest darmowym programem, dostępnym w polskiej wersji językowej. Strona domowa www.pspad.com.
W pierwszej części kursu wypadałoby napisać co to jest ten xhtml i css, ale myślę, że o tym może każdy poczytać na wiki:
http://pl.wikipedia.org/wiki/Html
http://pl.wikipedia.org/wiki/XHTML
http://pl.wikipedia.org/wiki/Css
Nam wystarczy, że są to języki za pomocą, których "mówimy" przeglądarkom internetowym jak ma wyglądać strona www.
Xhtml - przekazuje strukturę i treść strony
Css - opisuje jej wygląd ( kolory, szerokości itp)
Ramy dokumenu:
Stronę WWW tworzy się podobnie jak zwykły dokument tekstowy: po otwarciu edytora HTML (PSPAd), należy wybrać opcję z menu: Plik/Nowy i dalej wybieramy rozrzeszenie xhtml. Ponieważ dokument HTML nie jest całkowicie zwykłym plikiem tekstowym , dlatego wymyślono specjalny szablon dokumentu XHTML, który powinien być przestrzegany. Korzystając z edytora PSPad, po wybraniu rodzaju pliku - html, problem ram rozwiązuje się sam, edytor sam je dodaje. A oto przykładowe ramy:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Description" content="Tu podaj opis twojej strony" /> <meta name="Keywords" content="wyraz1, wyraz2, wyraz3..." /> <meta name="Author" content="Tu wpisz swoje imię i nazwisko" /> <meta http-equiv="Content-Language" content="język" /> <link rel="Shortcut icon" href="adres ikony" /> <link href="style.css" rel="stylesheet" type="text/css" media="screen,print" /> <link rel="stylesheet" type="text/css" href="print.css" media="print" />
<title>Moja pierwsza strona</title>
</head>
<body>
Tu wpisuje się treść strony
</body>
</html>
Pogrubione elementy są konieczne, pozostałe można pominąć. Jednak aby nie ryzykować wystąpienia krzaczków na stronie zamiast naszych polskich znaków, trzeba pamiętać o ustawieniu kodowania:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Będziemy używać "utf-8", opcjonalnie można użyć "iso-8859-2" jednak "utf-8" jest bardziej uniwersalne. Należy jeszcze pamiętać aby ustawić właściwy format w naszym edytorze, w PSPadzie:
Format->UTF-8
Opis pozostałych meta-elementów:
<meta name="Description" content="Tu podaj opis twojej strony" /> <meta name="Keywords" content="wyraz1, wyraz2, wyraz3..." /> <meta name="Author" content="Tu wpisz swoje imię i nazwisko" />
"Description" - opis naszej strony internetowej np. "Orion - oferujemy kursy komputerowe, językowe, szkolenia pracowników".
"Keywords" - słowa kluczowe, po których wyszukiwarki, takie jak GOOGLE znajdują naszą stronę np. "kursy, szkolenia, kursy językowe, nauka, doszkalanie".
"Author" - wykonawca strony internetowej.
<meta http-equiv="Content-Language" content="język" />
Określamy język w jakim piszemy stronę, w naszym przypadku jest to "pl".
<link rel="Shortcut icon" href="adres ikony" />
Shortcut icon - obrazeczek jaki pojawia się przy adresie strony w wyszukiwarce.
<link href="style.css" rel="stylesheet" type="text/css" media="screen,print" /> <link rel="stylesheet" type="text/css" href="print.css" media="print" />
Dołączamy zewnętrzne pliki z opisem styli, oczym szerzej później.
<title>Moja pierwsza strona</title>
Komentarze