<p> </ p> <p id= identyfikator > </p>

Transkrypt

1 Znacznik HTML jest specjalnym ciągiem znaków objętym nawiasami kątowymi. Schemat zapisu znacznika: <znacznik_otwierający atrybut> </ znacznik_zamykający> przykład <p> </ p> p - od paragraph służy do wstawiania interlinii między akapitami tekstu znacznik otwierający może zawierać atrybut, który umieszczamy wewnątrz nawiasu kątowego przykład <p id= identyfikator > </p> nazwy znaczników oraz atrybuty wpisujemy małymi literami odwołując się do nazwy pliku, wpisujemy jego nazwę dokładnie tak jak ona wygląda wartości atrybutów wpisujemy używając cudzysłowu znaczniki zamykające nigdy nie zawierają dodatkowych parametrów

2 znaczniki, z nielicznymi wyjątkami, występują w parach wyjątki w XHTML: <br /> <hr /> <img /> <meta /> <link /> <base /> bezpośrednio przed znakiem / dodaj spację spacje: <znacznik_otwierający atrybut= wartość_atrybutu > </ znacznik_zamykający> tu nie ma spacji tu jest spacja tu nie ma spacji

3 Kilka zasad: nigdy nie krzyżuj znaczników <p> coś tam <em> coś tam </em> </p> zawsze zamykaj wszystkie znaczniki wpisując znaczniki i atrybuty, zawsze używaj małych liter używaj cudzysłowów dla wszystkich atrybutów <table border= 1 >

4 Polecany szkielet dokumentu Cały dokument powinien być objęty parą znaczników <html> </html> Między nimi powinna zaś się znaleźć para znaczników <head> </head> która stanowi ramy dla informacji nagłówkowych. Pozostałe informacje powinny być objęte znacznikami <body> </body>

5 Wygląda to następująco: <html> <head> informacje nagłówkowe </head> <body> właściwa treść (ciało) dokumentu </body> </html> Taki szkielet dokumentu jest "bezpieczny" i nie niesie ze sobą ryzyka jakichś niespodzianek.

6 Struktura dokumentu Określamy zgodność ze specyfikacją pierwszy wpis to prolog określa wersję języka XML oraz sposób kodowania znaków: <?xml version= 1.0 encoding= iso ?> określamy rodzaj używanego do tworzenia strony języka: <!DOCTYPE html PUBLIC -//W3W//DTD XHTML 1.0 Strict//EN przygotowaliśmy stronę wykorzystującą wyłącznie język XHTML i ściśle trzymamy się zaleceń specyfikacji. Uwaga: wielkie litery w deklaracji DTD (Document Type Definition) są konieczne!

7 Ramy dokumentu XHTML <html xmlns= xml:lang= pl lang= pl > </html> dodatkowe argumenty służą do określenia znaczenia poszczególnych dodatkowe argumenty służą do określenia znaczenia poszczególnych znaczników wykorzystywanych w kodzie strony

8 Nagłówek strony określa para znaczników <head> </head> tu są elementy ważne dla konstrukcji strony mamy więc : <?xml version= 1.0 encoding= iso ?> <!DOCTYPE html PUBLIC -//W3W//DTD XHTML 1.0 Strict//EN <html xmlns= xml:lang= pl lang= pl > </html> <head> </head>

9 Jakie informacje umieszczamy w nagłówku strony czyli wewnątrz znacznika <head></head>: polskie znaki standard to ISO stosujemy edytor z modułem konwersji w locie (np. ked)! wstawiamy w sposób tradycyjny tzn. w formacie Windows 1250 a potem konwersja za pomocą programów-konwertorów jeśli na stronie używamy języków kilku krajów to stosujemy Unicode ( Stosuje się UTF-7, UTF-8 lub UTF-16 tzn. format 7-, 8- lub 16-bitowy. jeśli korzystamy ze strony kodowej ISO to piszemy: <meta http-equiv= Content-Type content= text/html; charset=iso /> jeśli korzystamy ze strony kodowej Windows 1250 to piszemy: <meta http-equiv= Content-Type content= text/html; charset=windows-1250 /> jeśli korzystamy ze strony kodowej Unicode UTF-8 to piszemy: <meta http-equiv= Content-Type content= text/html; charset=utf-8 />

10 tytuł dokumentu znacznik: <title>nazwa mojej strony</title> wstawia tytuł strony widoczny na pasku tytułu przeglądarki słowa kluczowe i opis strony wyszukiwarki znajdują strony w Internecie korzystając z tytułu strony, słów kluczowych (keywords) i opisu strony (description) znaczniki: <meta name= keywords content= słowa kluczowe rozdzielone przecinkami /> <meta name= description content= krótki opis strony /> jedno, dwa zdania na temat zawartości strony, które pojawią się jako wynik szukania. Na ich podstawie internauta decyduje czy strona jest warta odwiedzenia

11 inne elementy nagłówka te, które nie pojawiają się na stronie i maja charakter czysto informacyjny informacje o autorze strony <meta name= author content= Twoje nazwisko /> lub <meta name= copyright content= nazwisko osoby majacej prawa autorskie do strony /> informacje o narzędziu użytym do tworzenia strony <meta name= generator content= ked /> informacje o języku strony <meta name= language content= pl /> możemy wprowadzić i inne informacje, ale musimy zachować strukturę znacznika, czyli <meta name= content= /> tu wpisujemy nazwę atrybutu tu wpisujemy wartość atrybutu

12 znacznik <meta /> z atrybutem http-equiv np. aby odświeżać dokument co x sekund <meta http-equiv= refresh content= x /> aby przenieść internautę po upływie x sekund pod nowy adres zadeklarowany w sekcji url. Zastosowanie: zmieniliśmy adres naszej strony ale chcemy zachować jej fanów więc pod starym adresem umieszczamy plik indeks.html z deklaracją: <meta http-equiv= refresh content= x: url= /> aby podać adres autora witryny <meta http-equiv= reply-to content= adres autora /> aby podać datę wykonania strony <meta http-equiv= creation-date content= data wykonania />

13 znacznik <base /> określa bazowy adres dla dokumentu i wszystkich odnośników znajdujących się w jego treści (przydatne przy zmianie adresu strony) <base href= /> znacznik <link /> możemy dzięki niemu np. dołączyć zewnętrzny arkusz stylów <link rel= stylesheet href= nazwa.css type= text/css /> możemy też dołączyć w ten sposób zewnętrzny plik zawierający JavaScript np. plik skrypt.js Przydatne gdy ten skrypt jest wykonywany na każdej stronie naszej witryny komentarze nie wyświetlają się na stronie, maja nam pomagać, np. w edycji strony <! - - tu wpisuję komentarz do mojej strony- - >

14 mamy więc : <?xml version= 1.0 encoding= iso ?> <!DOCTYPE html PUBLIC -//W3W//DTD XHTML 1.0 Strict//EN <html xmlns= xml:lang= pl lang= pl > <head> <meta http-equiv= Content-Type content= text/html; charset= iso /> <meta name= keywords content= słowa kluczowe rozdzielone przecinkami /> <meta name= description content= krótki opis strony /> <meta name= copyright content= Twoje nazwisko /> <meta name= author content= Twoje nazwisko /> <title>nazwa mojej strony</title> <link rel= stylesheet href= nazwa.css type= text/css /> </html> </head>

15 zaczynamy bawić się programem ked instalujemy program i uruchamiamy go na pasku narzędzi odszukujemy przycisk Utwórz nowy plik, klikamy strzałkę z jego lewej strony i wybieramy szablon tworzonego dokumentu np. XHTML 1.0 Strict teraz wprowadzamy swoje poprawki do wyświetlonej treści i dopisujemy co trzeba w miejscach, gdzie występują kwadratowe nawiasy (usuwamy zarówno te nawiasy jak i ich zawartość) jeśli ręcznie dopisujemy znaczniki to program nam pomaga: po wpisaniu pełnego znacznika otwierającego automatycznie doda znacznik zamykający wyświetli okno z podpowiedziami dotyczącymi dostępnych atrybutów po wpisaniu nazwy atrybutu automatycznie wstawi cudzysłów

16 To co używamy w ciele dokumentu czyli wewnątrz znacznika <body> </body> Elementy służące do prezentacji tekstu to: nagłówki akapity cytaty indeksy górne i dolne znaczniki łamania wiersza poziome linie znacznik <div> </div> służą one do nadania poszczególnym elementom określonej formy (dokładne formatowanie takiego elementu jest oddzielone od języka XHTML i weszło w skład CSS)

17 nagłówki W dokumentach często wprowadzamy nagłówki. Służy do tego polecenie <hx> </hx> Znak h oznacza heading, natomiast x to stopień nagłówka (mamy sześć stopni). Stopień 1, czyli <h1> </h1>, definiuje największy nagłówek Stopień 6, czyli <h6> </h6>, definiuje nagłówek najmniejszy Uwaga: znaczniki w przeglądarce WWW nie są wyświetlane. Są one jedynie interpretowane, tzn. pozwalają "w locie" formatować tekst.

18 Wprowadźmy nagłówki za pomocą poleceń h1, h2 itd. <body> <h1>tytuł stopnia pierwszego</h1> <h2>tytuł stopnia drugiego</h2> <h3>tytuł stopnia trzeciego</h3> <h4>tytuł stopnia czwartego</h4> <h5>tytuł stopnia piątego</h5> <h6>tytuł stopnia szóstego</h6> </body>

19 I efekt: Tytuł stopnia pierwszego Tytuł stopnia drugiego Tytuł stopnia trzeciego Tytuł stopnia czwartego Tytuł stopnia piątego Tytuł stopnia szóstego

20 Akapit i wiersz Gdybyśmy wpisali dłuższy fragment tekstu, rozdzielając w edytorze akapity za pomocą klawisza Enter, przeglądarka zignoruje znaki końca wierszy i akapitów w edytorze i wyświetli jednolity blok tekstu. Aby rozdzielić akapity, należy posłużyć się poleceniem <p> tu wpisuję treść akapitu </p> (p = paragraph) Strona może zawierać dowolną liczbę akapitów, a każdy z nich jest oddzielony od pozostałych pustym wierszem. Przerwa ta jest automatycznie wstawiana przez przeglądarkę do jej kontroli musimy użyć CSS. Aby wprowadzić wcięcie pierwszego wiersza akapitu też musimy użyć CSS.

21 Nie nadużywaj możliwości tworzenia wielu akapitów W praktyce internauta przegląda tylko zawartość dwóch pierwszych ekranów monitora. Jeśli publikujemy dużą ilość tekstu, lepiej podzielić go na kilka części Przykład: <p>to jest treść pierwszego akapitu</p> <p>to jest treść drugiego akapitu</p> Rezultat: To jest treść pierwszego akapitu To jest treść drugiego akapitu

22 Cytaty aby zacytować większy fragment tekstu w kodzie strony używamy znacznika <blockquote> tu wpisujemy treść cytatu -- ten tekst będzie nieznacznie wcięty w porównaniu do pozostałych akapitów </blockquote> Aby cytować wewnątrz bloku tekstu stosujemy znacznik <q> tu wpisujemy treść cytatu </q> ten tekst będzie ujęty w cudzysłów do obu znaczników można dodać atrybut cite pozwala on na określenie adresu strony, z której pochodzi cytowany tekst, np. <blockquote cite= > </blockquote>

23 Indeks górny i dolny możemy wymusić prezentację fragmentu tekstu jako indeksu górnego lub dolnego <sup> </sup> <sub> </sub> np. <p>e=mc<sup>2</sup></p> <p>e=mc<sub>2</sub></p> E=mc 2 E=mc 2

24 Łamanie wierszy Niekiedy zdarza się, że chcemy przełamać tekst, nie wprowadzając przy tym znaku końca akapitu. Możemy wówczas zastosować pojedyncze polecenie <br />, które przenosi tekst o jeden wiersz w dół, lecz nie wprowadza dodatkowej interlinii. Przykład: To jest pierwszy wiersz< br />To jest drugi wiersz< br /> To jest trzeci wiersz< br /> Rezultat: To jest pierwszy wiersz To jest drugi wiersz To jest trzeci wiersz

25 Wyróżnienie tekstu aby pogrubić tekst <strong> </strong> aby pochylić tekst <em> </em> aby zastosować czcionkę o stałej szerokości <code> </code> Twarda spacja przeglądarka ignoruje wielokrotne znaki spacji wpisywane z klawiatury i wyświetli tylko jeden znak spacji Aby wymusić dodatkową spację musimy wstawić znak twardej spacji &nbsp

26 Przykład: To jest tekst normalny <strong>to jest tekst pogrubiony</strong> <em>to jest tekst pochylony</em> Rezultat: To jest tekst normalny To jest tekst pogrubiony To jest tekst pochylony

27 Znacznik DIV element <div > </div> jest odpowiedzialny za grupowanie znaczników dzięki temu elementowi można tworzyć warstwy w dokumencie XHTML i pracować na nich oraz rozciągać działanie zdefiniowanego za pomocą CSS stylu na większą liczbę znaczników <div> <p>pierwszy blok tekstu</p> <p> drugi blok teksty</p> <h1>nagłówek stopnia pierwszego</h1> </div> będzie później

28 Pozioma linia Często spotykanym elementem jest pozioma linia, którą wstawiamy za pomocą polecenia <hr> (ang. horizontal rule). Pozwala ono wyświetlić w dokumencie poziomą linię, na szerokość całej strony czy bloku, rozdzielając nią logiczne fragmenty tekstu, dzięki czemu strona jest bardziej przejrzysta. Przykład: <hr> Rezultat:

29 Formatowanie tekstu za pomocą edytora ked wprowadzasz nazwę znacznika, np. <p naciskasz spację edytor podpowie Ci jaki atrybut powinien być następny po wprowadzeniu kompletnego znacznika otwierającego edytor doda automatycznie znacznik zamykający kursor pozostanie pomiędzy znacznikiem otwierającym a zamykającym możesz więc zacząć wprowadzać tekst inny sposób wprowadzasz tekst zaznaczysz go na pasku narzędzi klikniesz potrzebny znacznik np. akapit dodawanie twardej spacji: naciśnij klawisze Ctrl+spacja

30 jeśli potrzebnego znacznika nie ma na pasku narzędzi, to po wprowadzeniu i oznaczeniu formatowanego tekstu kliknij zakładkę Ściąga (lewa kolumna) na liście odszukaj potrzebny znacznik i zaznacz go (kliknięcie lewym przyciskiem myszy) kliknij przycisk Wstaw całość

31 listy Na stronach WWW powszechnie stosuje się listy (ang. list). Są to po prostu systematyczne wyliczenia jakichś punktów, które w przeciwieństwie do tekstu o charakterze opisowym w skondensowany sposób prezentują jakąś myśl czy zespół zagadnień. Mamy trzy rodzaje list 1. listy punktowane 2. listy numerowane 3. listy definicji

32 Lista wypunktowana Aby utworzyć szkielet listy wypunktowanej, należy użyć polecenia <ul> </ul> (ang. unordered list) Poszczególne punkty listy wprowadzamy dalej za pomocą polecenia <li> </li>

33 Przykład: <p>dlaczego zajmuję się UFO?</p> <ul> <li>uważam, że UFO istnieje</li> <li>uważam, że pozaziemskie cywilizacje mogą nam pomóc</li> <li>uważam, że należy się przygotować na spotkanie</li> </ul> Rezultat: Dlaczego zajmuję się UFO? Uważam, że UFO istnieje Uważam, że pozaziemskie cywilizacje mogą nam pomóc Uważam, że należy się przygotować na spotkanie

34 Lista numerowana Gdy chcemy utworzyć wykaz numerowany, wówczas stosujemy parę wskaźników <ol> </ol> (ang. ordered list) oraz <li> </li> Uzyskamy wówczas listę numerowaną za pomocą liczeb arabskich Przykład: <p>dlaczego zajmuję się UFO?</p> <ol> <li>uważam, że UFO istnieje</li> <li>uważam, że pozaziemskie cywilizacje mogą nam pomóc</li> <li>uważam, że należy się przygotować na spotkanie</li> </ol>

35 Rezultat: Dlaczego zajmuję się UFO? 1.Uważam, że UFO istnieje 2.Uważam, że pozaziemskie cywilizacje mogą nam pomóc 3.Uważam, że należy się przygotować na spotkanie

36 lista definicji stosowane znaczniki <dl> </dl> <dt> </dt> <dd> </dd> Przykład: <dl> <dt>słowo definiowane</dt> <dd>opis słowa definiowanego</dd> <dt>kolejne słowo definiowane</dt> <dd>opis kolejnego słowa definiowanego</dd> <dt>jeszcze jedno słowo definiowane</dt> <dd>opis nowego słowa definiowanego</dd> <dt>ostatnie słowo definiowane</dt> <dd>opis ostatniego słowa definiowanego</dd> </dl>

37 Rezultat: Słowo definiowane opis słowa definiowanego Kolejne słowo definiowane opis kolejnego słowa definiowanego Jeszcze jedno słowo definiowane opis nowego słowa definiowanego Ostatnie słowo definiowane opis ostatniego słowa definiowanego

38 listy zagnieżdżone chcemy np. umieścić listę zawierającą podpunkty Zagnieżdżenie polega na umieszczeniu wewnątrz jednego elementu innego znacznika, np. w liście umieszczamy jeszcze jedną listę Przykład: <ol> <li>produkty mleczne <ul> <li>mleko 3,2%</li> <li>jogurt malinowy</li> <li>śmietanka do kawy</li> </ul> </li> <li>owoce <ul> <li>jabłka</li> <li>cytrusy <ul> <li>pomarańcze</li> <li>mandarynki</li> </ul> </li> <li>brzoskwinie</li> <ul> </li> </ol>

39 Rezultat: 1. Produkty mleczne o mleko 3,2% o jogurt malinowy o śmietanka do kawy 2. Owoce o jabłka o cytrusy pomarańcze mandarynki o brzoskwinie

40 Tworzenie list za pomocą edytora ked W przypadku list wypunktowanych i numerowanych wystarczy wprowadzić wszystkie pozycje listy zaznaczyć je kliknąć odpowiedni przycisk na pasku narzędzi W przypadku list zagnieżdżonych lub definicji należy wprowadzić strukturę list ręcznie, czyli wpisujemy odpowiednie znaczniki otwierające (znaczniki zamykające dodawane są automatycznie) musimy pamiętać o zasadach zagnieżdżania

41 Grafika na stronie www Strony WWW zawierają zwykle grafikę, która bardzo urozmaica ich czytanie - pod warunkiem oczywiście, że korzystamy z graficznego systemu operacyjnego. Niektórzy autorzy stron tak się zatracają w ozdabianiu stron, że zapominają o przepustowości łączy internetowych. Gdy czytelnik strony nie wyłączy w swojej przeglądarce funkcji wczytywania grafiki, może stracić dużo czasu i nerwów, oczekując na wczytanie tak spreparowanej strony. Warto z umiarem stosować graficzne ozdobniki, zwłaszcza gdy nie niosą żadnych istotnych treści.

42 Na stronach WWW są stosowane trzy podstawowe formaty bitowych plików graficznych GIF, JPG (JPEG) i PNG które są z założenia skompresowane (często nawet dziesięciokrotnie w stosunku do innych popularnych formatów), a więc zajmują znacznie mniej miejsca niż grafiki w innych formatach. Dzięki temu transmisja strony trwa znacznie krócej.

43 GIF (ang. Graphics Interchange Format) to format pliku graficznego z kompresją bezstratną stworzony w 1987 roku przez firmę CompuServe. Pliki tego typu są powszechnie używane na stronach WWW, gdyż pozwalają na tworzenie animacji z paletą 256 kolorów i dwustanową przezroczystością. Wadą formatu GIF jest brak możliwości zapisu plików graficznych w formacie True color. Wady tej pozbawiony jest konkurencyjny format PNG

44 JPEG (wym. dżej-peg lub jotpeg) to standard kompresji statycznych obrazów rastrowych, przeznaczony głównie do przetwarzania obrazów naturalnych (zdjęć satelitarnych, pejzaży, portretów itp.), charakteryzujących się płynnymi przejściami barw oraz brakiem lub małą ilością ostrych krawędzi i drobnych detali. Motywacją do powstania tego standardu było ujednolicenie algorytmów kompresji obrazów monochromatycznych i kolorowych. Algorytm kompresji używany przez JPEG jest algorytmem stratnym, tzn. w czasie jego wykonywania tracona jest bezpowrotnie część pierwotnej informacji.

45 PNG (ang. Portable Network Graphics) to format plików graficznych oraz system bezstratnej kompresji danych graficznych. PNG został opracowany jako następca GIF w 1995 roku.

46 Grafikę możemy wprowadzić za pomocą polecenia: <img /> które posiada atrybuty src i alt src określa źródło czyli obrazek jaki chcemy wstawić alt definiuje alternatywny tekst dla przeglądarek nieobsługujących grafiki bądź dla przeglądarek, w których użytkownik wyłączył wyświetlanie grafiki <img src="nazwa_pliku" alt="nazwa alternatywna /> unix (linux) rozróżnia wielkość liter!! a 95% serwerów internetowych to maszyny uniksowe nazwy powinny być więc wpisywane dokładnie tak jak nazwano plik, np. jest różnica między plikami psinka.jpg i Psinka.jpg

47 Przykład: <img src= psinka.jpg" alt= Psinka w tulipanach />

48 nazwy plików nie powinny zawierać polskich znaków oraz spacji jeżeli chcemy aby plik miał nazwę dwuczłonową, to zamiast spacji używamy znaku podkreślenia _ Oreślenie wielkości obrazka width i height <img src= psinka.jpg" alt= Psinka w tulipanach height= 64 width= 94 />

49 Osadzanie grafiki za pomocą edytora ked Umieszczasz kursor w odpowiednim miejscu dokumentu i klikam odpowiednią ikonę na pasku narzędzi w nowym okienku wybierasz nazwę obrazka z listy wypełniam pole Opis(alt) wypełniam pole Opis(title) opis pojawiający się w postaci chmurki wypełniam pola szerokość i wysokość naciskam przycisk wstaw Warto utworzyć sobie katalog, w którym będziesz przechowywać pliki tworzonej strony

50 W najprostszym przypadku, gdy obrazek znajduje się w tym samym katalogu co dokument, wystarczy podać jego nazwę. Gdy grafiki gromadzimy na serwerze w odrębnym katalogu, konieczne jest podanie ścieżki dostępu. Przykład: <img src="../podkatalog/grafika.jpg "alt="nazwa alternatywna">