docMałgorzata Piotrowska (malgosia@cts
download 
Reklamacja Transkrypt
Małgorzata Piotrowska (malgosia@cts
Małgorzata Piotrowska Strony WWW Wprowadzenie do tworzenia stron WWW w html Język HTML (HyperText Markup Language) opracowano oraz po raz pierwszy zastosowano w dokumentach hipertekstowych na przełomie lat osiemdziesiątych – w CERN (Centre European de la Rechereche Nucleaire), w Genewie. Hipertekst – to metoda prezentacji i język programowania umożliwiający bezpośredni (skojarzeniowy) dostęp do dokumentów oraz plików przez tzw. linki (powiązania). Dokument HTML jest prostym dokumentem tekstowym, w którym umieszczono tzw. etykiety (tags) struktury dokumentu oraz etykiety formatujące. Przeglądarka napotykając w tekście etykietę odpowiednio ją interpretuje. Przykład etykiety formatującej czcionkę: <p ALIGN=right> <b> Uwaga. </b> Przeczytaj ostrzeżenie poniżej. </p > para etykiet <p> </p> oznacza akapit , a parametr ALIGN=right – wyrównanie tekstu do prawej; para etykiet <B> oraz </B> oznacza wytłuszczenie (bold) zawartego między nimi tekstu, Powyższy wiersz kodu HTML zostanie zinterpretowany przez przeglądarkę jako: Uwaga. Przeczytaj ostrzeżenie poniżej. I w takiej postaci wyświetlony na ekranie. Dokument HTML – ogólna budowa: W pierwszym wierszu umieszczana jest na ogół deklaracja typu dokumentu HTML (tu: wersja 4.0). Zawiera ona informacje potrzebne przeglądarce internetowej do odczytania strony. Cały dokument mieści się między etykietami: <HTML> a </HTML>. Składa się z dwóch wyróżnionych części: Małgorzata Piotrowska Strony WWW I/ Nagłówka między etykietami: <HEAD> a </HEAD>. Informacja z nagłówka nie jest wyświetlana w głównym oknie przeglądarki. Tylko tytuł zdefiniowany przez etykietę <TITLE> pojawi się na paskach tytułu w oknach przeglądarek oraz w zakładkach (bookmarks). Etykieta <META> definiuje takie dodatkowe informacje jak autor strony, użyte narzędzia czy słowa kluczowe. Bardzo ważną dla prawidłowego wyświetlania tekstu definicją nagłówka jest definicja kodowania polskich znaków: <meta http-equiv="content-type" content="text/html; charset=windows-1250"> lub <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> II/ Części głównej ograniczonej etykietami <BODY> i </BODY>. Tylko informacje z głównej części mogą być wyświetlone – w zadeklarowanej formie – na ekranie komputera. Wygląd strony to przede wszystkim rozmieszczenie elementów, tabelki, tła, grafika, ewentualne efekty multimedialne. Strony WWW są przeglądane przy pomocy różnych przeglądarek i w różnych systemach operacyjnych. Ważne jest by wyglądały ona wszędzie tak samo, a przynajmniej podobnie – w granicach tolerancji. Dlatego zawsze powinno się efekty naszej pracy sprawdzac w paru różnych przeglądarkach Należy zachować spójność (zgodność formalną i merytoryczną) wszystkich materiałów marketingowych. Strony WWW, ulotki, cenniki, wizytówki itp. itd. powinny tworzyć pewną jednolitą, harmonijną całość. Grafika, zdjęcia, tekst powinny być starannie dobrane i odpowiednio przygotowane do publikacji na stronie WWW. Strona nie może ładować się zbyt długo. Bo co z tego, że jest tam wspaniała trójwymiarowa animacja lub film, jeżeli użytkownik straci cierpliwość na długo zanim zdążymy mu się tak atrakcyjnie przedstawić. Lepiej film czy galerię zdjęć umieścić na innej stronie niż główna i pozwolić na uruchamianie „na życzenie” przez odwiedzającego stronę. Od momentu kliknięcia na adresie internetowym do momentu wyświetlenia pełnej pierwszej strony na ekranie komputera przeciętnego użytkownika Internetu nie powinno minąć więcej niż kilka, kilkanaście sekund. Dobrze przyjąć założenie, że wielkość pojedynczej strony – nie powinna przekroczyć 50 kB, a maksymalna wielkość obrazka – 12 kB. Zdjęcia - by zapewnić odpowiednią jakość obrazu przy względnie małej wielkości pliku – korzysta się najczęściej z formatu jpeg. Zdjęcia trzeba odpowiednio „spreparować” – dlatego przygotowanie odpowiednich dla witryny fotografii najlepiej zlecić fachowcom. Jeżeli zależy nam na umieszczeniu większej ilości zdjęć – najlepiej umieścić na dedykowanej stronie tzw. galerię zdjęć – odpowiednio podpisane miniaturki fotografii. Dopiero po kliknięciu myszką na wybranej miniaturce – ładowane jest zdjęcie dużego formatu. animacje, filmy wideo - proste animacje można wykonać na przykład przy użyciu programu Gif Movie Gear (www.gamani.com). Przypomina to trochę samodzielne tworzenie filmu animowanego – klatka po klatce. Jeżeli animacja czy film uruchamiana jest automatycznie – powinna się szybko skończyć – po jednorazowym „odegraniu”. Bardziej wyrafinowane możliwości dają narzędzia firmy Macromedia (www.macromedia.com) czy użycie języka Java (wymaga umiejętności programowania w tym języku) albo VRML – języka modelowania rzeczywistości wirtualnej. Koniecznie należy przestrzegać praw autorskich! Darmowe elementy, które mogą pomóc uatrakcyjnić stronę znaleźć można np. pod adresami: www.sxc.hu, www.freesitetemplates.com, czy www.tucows.icm.edu.pl Małgorzata Piotrowska Strony WWW Przykład etykiety HTML umieszczającej obrazek (przygotowane zdjęcie) na stronie: <img src=” sciezka_do_pliku_grafiki” width=25% height=25% align=right alt=" zdjecie kwiatu fiołka">" border="0" > width= szerokość obrazka. Można pominąć - jeśli tak zrobimy to obrazek będzie naturalnych rozmiarów. A jeśli nie to ustalamy szerokość w pikselach - podajemy ilość pikseli lub np. w procentach - jak w przykładzie. height= wysokość obrazka (również można pominąć). alt= nie jest wymagany, lecz może uatrakcyjnić stronę. Jeśli zastosujemy go, to po najechaniu myszką na obrazek, pojawi się napis, o treści taką jaką zdefiniowaliśmy align = określa położenie obrazka. Wartości: left - wyrównuje do lewej; right - wyrównuje do prawej center - umieszcza obrazek na środku dostępnej powierzchni border="0" - określa grubość obramowania obrazka. Gdy ustalimy 0 to obramowanie nie wyświetli się. Dając wartość różną od 0, można zdefiniować kolor obramowania atrybutem: bordercolor= „#ffffffff” Zastosowanie tego przykładu spowoduje iż obramowanie będzie miało biały kolor. Dodatkowo można użyć jeszcze dwóch parametrów, określających odległość obrazka od tekstu: w poziomie: hspace =” ” w pionie: vspac= ” ” Zamiast pracowicie formatowac każdy akapit - można zdefiniowac klasy stylów dla całej witryny, czy pojedynczej strony. Wtedy po prostu – wywołujemy „na żadanie” wybrany, wcześniej zdefiniowany styl; przechowywany w innym miejscu. Jeżeli nic nie podamy – przyjmowany jest styl klasy domyślnej. Klasy stylów akapitów zdefiniowane przez Krzyśka Gotowickiego dla Tezeusza: <p class="AFCOETitle"> styl dla głównego tytułu strony </p> <p class="BoldGold"> podtytuł , śródtytuły</p> lub <p class="BoldBlue"> podtytuł, śródtytuły</p> p class="BoldBlack">Wprowadzenia , wybrane fragmenty tekstów tzw. Lead: NIE NADUŻYWAC! </p> <p class="BoldGreyMedium"> Komentarze, uwagi redaktora, wprowadzenia, nazwiska autorów "złotych mysli", nazwiska autorów tekstów </p> <p class="text_small">Podpisy pod obrazkami, drobne przypisy, gdzie ukazał się tekst, itd. </p> Znacznik <p ..> oznacza cały akapit więc powyższe przykłady dotyczą stylu całych akapitów (nawet jak jest to jedno słowo). Jeżeli chcemy wyróżnić słowa w tekście- należy używać znaczników bezpośrednich <b>bold </b>oraz <i>italic </i>.: <b>znacznik b </b> <i>znacznik i </i>
