Filologia Nowogrecka, I rok 16 lutego 2011 r. Natalia Kotsyba

Podstawy, czyli pierwsza strona WWW w 15 minut Paweł Wimmer HTML dla początkujących poczatkujacych poczatkujacych Interaktywny podręcznik HTML z ćwiczeniami online: Oficjalna strona konsorcjum WWW i podręczniki Natalia Kotsyba --- Podstawy HTML 2

XHTML, XML (Extended Meta Language), JavaScript (dodatek), PHP (Personal Home Page) i wiele innych ale wszystko się zaczyna od HTML (Hyper Text Meta Language) dawniej SGML (Structured General Meta Language) NB: najprostsza strona HTML do jest dowolny plik tekstowy z rozszerzeniem.html Nazwa pliku nie powinna zawierać spacji, polskich znaków diakrytycznych czy innych znaków specjalnych Domyślna nazwa pliku w katalogu to index.html Jak podejrzeć źródło html? W Firerox Mozilla poprzez kombinację klawiszy Ctrl+U albo przez menu widok zobacz źródło w innych przeglądarkach internetowych Natalia Kotsyba --- Podstawy HTML 3

Pajączek NxG - w tej chwili wybór numer 1 dla polskiego webmastera, program komercyjny. Oferuje wersje profesjonalną i standardową, w odmianie osobistej (do użytku niekomercyjnego) lub komercyjnej. Moim zdaniem to najlepszy tekstowy edytor HTML i XHTML na świecie. Pajączek NxG CoreEditor - polski, komercyjny edytor, porównywalny z Pajączkiem, obsługujący także XHTML. Edytor jest następcą bezpłatnego edHTML. CoreEditor kED - polski, darmowy edytor, szybki i konfigurowalny, obsługujący XHTML kED HateML Pro - polski, darmowy edytor z obsługą (X)HTML. HateML Pro Tiger98 i TigerII Millenium - komercyjny polski edytor, jednak już bardzo wiekowy. Tiger98 i TigerII Millenium TigerII MiniPad - darmowy notatnik, wygodny do szybkich poprawek. TigerII MiniPad edHTML - polski, darmowy edytor; jego następcą jest CoreEditor. edHTML Website Pro - polski, darmowy edytor; los nieznany (?). Website Pro Zajączek PHP - polski, darmowy edytor, z dobrą obsługą PHP. Zajączek PHP Ager Web Edytor - polski, darmowy edytor ze wsparciem dla PHP i JavaScript. Ager Web Edytor Extra Page - darmowy polski edytor, jednak piszący w "starym stylu". Extra Page ezHTML - polski edytor, także darmowy - chyba nie jest już rozwijany. ezHTML HTML-Kit - bardzo silny amerykański edytor, z ogromną liczbą pluginów, darmowy. HTML-Kit 1'st Page jeden z najpotężniejszych programów webmasterskich, darmowy. 1'st Page 2000 ACE HTML Freeware - darmowy, anglojęzyczny edytor, z obsługą stron kodowych. ACE HTML Freeware (źródło: Paweł Wimmer Kurs języka HTML - poradnik webmastera)Paweł Wimmer no i zwykły notatnik, Notepad Natalia Kotsyba --- Podstawy HTML 4

MS Front Page Joomla! Wiki i wiele innych Pozwalają na przełączenie się z widoku skryptu HTML na widok gotowej strony Natalia Kotsyba --- Podstawy HTML 5

kod HTML składa się ze znaczników (ang. tags), które umieszczamy w nawiasach ostrych Niemal każdy znacznik HTML musi zostać zamknięty Znacznik otwierający wygląda tak: natomiast zamykający: Natalia Kotsyba --- Podstawy HTML 6

Całość strony powinna być otoczona znacznikami i W środku mamy: (głowa) zawiera informacje o stronie, np. jej tytuł, kodowanie, odnośniki do stylów albo same style, itd. (ciało) zawiera treść, tzn. samą stronę Strona może mieć tylko jedną głowę i jedne ciało, ich kolejność i zawartość nie powinny być mieszane Natalia Kotsyba --- Podstawy HTML 7

Pierwsza Strona Przykładowy tekst Natalia Kotsyba --- Podstawy HTML 8

Natalia Kotsyba --- Podstawy HTML 9

Przestrzenie pomiędzy znacznikami otwierającym i zamykającym nazywamy sekcjami. W sekcjach można umieszczać inne znaczniki i tekst. Pierwsza linijka powyższego kodu (zwanego kodem HTML) przedstawia informację o dokumencie. Mówi ona o tym jaką wersje HTML-a zastosowaliśmy. Jest to potrzebne do dalszej interpretacji dokumentu. Następnie widzimy znacznik otwierający. Sygnalizuje on rozpoczęcie kodu HTML w dokumencie. W tej sekcji umieszczamy całą resztę kodu HTML. Na końcu dokumentu znajdziemy znacznik zamykający. Kolejną rzeczą jest sekcja. W niej zawieramy informacje o dokumencie – w tym przypadku o kodowaniu znaków i tytule dokumentu, który zawsze zobaczymy na pasku przeglądarki. W sekcji head możemy umieścić także informacje o autorze dokumentu (czyli strony HTML), opis dokumentu czy słowa kluczowe. Po tym przychodzi sekcja. Obejmuje ona to, co chcemy umieścić na naszej stronie – czyli informacje o tekście, wstawianych grafikach itp. W sekcji body utworzyliśmy akapit za pomocą znaczników, w którego sekcji umieściliśmy nasz tekst Natalia Kotsyba --- Podstawy HTML 10

tytuł strony, wyświetlany na górnej belce przeglądarki służą do definiowania niektórych zachowań przeglądarek i innych agentów www, np. sposobu interpretowania znaków narodowych (jak np.: ą, ę, à, ò, ù, ì), definiowania słów kluczowych opisujących zawartość strony Przykład. Fragment sekcji HEAD strony głównej serwisu rockmetal.pl (rock i metal po polsku)... NB: polecam użycie kodowania bardziej uniwersalnego, niż iso , czyli Unikodu: Natalia Kotsyba --- Podstawy HTML 11

może zawierać m.in. następujące elementy: (od ang. division fragment), (od image obrazek), (od paragraph akapit), (od header nagłówek), (od anchor kotwica), (horizontal ruler, linia pozioma), (tabela). Dla każdego z tych elementów możemy zdefiniować w kodzie różne cechy, np. rozmiar, kolor, tło, obramowanie, itd., w zależności od typu elementu. Jeżeli nie zdefiniujemy wartości atrybutu, to przeglądarka wyświetli wartość domyślną. Np. domyślny kolor tekstu to czarny, domyślny kolor tła – biały, itd. Jeżeli chcemy zdefiniować kilka atrybutów (cech) dla tego samego elementu, wpisujemy je w środku otwierającego znacznika elementu i rozdzielamy spacją. W zamykającym znaczniku nie musimy powtarzać nazw atrybutów. Np. tekst o kolorze czerwonym, rozmiarze czcionki 12px, Helvetika: NASZ TEKST color, size i face to są atrybuty elementu ; "red", "12px", "helvetika" to są niektóre możliwe wartości tych atrybutów Natalia Kotsyba --- Podstawy HTML 12

(bold) pogrubienie (italic) kursywa (underline) podkreślenie definicja czcionki color="white|black|red|green|orange|purple|....|000000|...|FFFFFF" size=1|...|7|+1|...|+7|-1|...|-7 face=arial ce, helvetica ce, arial, helvetica, sans-serif, (header) nagłówki "mała" czcionka "duża" czcionka (paragraph) akapit align="right|left|center|justify" (break) wymuszenie łamania linii (non-breaking space) zapobiega łamaniu linii pomiędzy dwoma słowami (preformatted text) zachowuje nie-HTMLowe formatowanie tekstu, tzn. końce linii, znaki tabulacji (horizontal ruler) linia pozioma align="right|left|center|justify; size= 1|2|3|... wysokość w pikselach width=1|2|3|...|100%|... długość w pikselach, lub procentach szerokości elementu zawierającego linię Natalia Kotsyba --- Podstawy HTML 13

Należy także pamiętać o kolejności wstawiania znaczników. Nie wolno ich "mieszać". Lorem ipsum, dolor sit amet To jest poprawny zapis. Natomiast Lorem ipsum dolor sit amet już nie jest poprawny Natalia Kotsyba --- Podstawy HTML 14

name=tryhtml_formatting name=tryhtml_formatting Natalia Kotsyba --- Podstawy HTML 15

Tło (ang. background) może być atrybutem całej strony (tzn. ciała) albo któregoś z jej elementów, np. tabeli czy jej pojedynczych wierszy, kolumn czy komórek, ale także może otaczać tekst. (ścieżka relatywna) (ścieżka absolutna) Żeby uczynić tło nieruchomym (działa w Internet Explorerze), tzn. podczas przewijania strony na ekranie przesuwa się tylko tekst, a tło pozostaje nieruchome, do znacznika BODY należy wstawić atrybut BGPROPERTIES=FIXED: Więcej o kolorach i ich kodach: Natalia Kotsyba --- Podstawy HTML 16

Natalia Kotsyba --- Podstawy HTML 17

Jeżeli chcemy zmienić kolor tekstu można wstawić do znacznika BODY któryś z poniższych atrybutów: TEXT – określa kolor tekstu na stronie LINK – określa kolor tekstu połączeń (standardowo oznaczone kolorem niebieskim) VLINK – określa kolor połączeń, które zostały przynajmniej raz wybrane (visited link) ALINK – określa kolor tekstu połączeń, na których został naciśnięty, ale jeszcze nie zwolniony przycisk myszy (połączenie aktywne, active link)- standardowo takie połączenia są wyświetlane na czerwono Natalia Kotsyba --- Podstawy HTML 18

Jeżeli do zmiany koloru używa sie znacznika BODY przekształcenia te dotyczą całego tekstu. Istnieje jednak możliwość zmiany barwy pojedynczego znaku. Do tego służy m.in. znacznik, który pozwala na zmianę rozmiaru, rodzaju i koloru czcionki, objętego para znaczników TEKST Np.: Gdy pójdziemy dziś wieczorem, pokolorujemy miasto na kolor CZERWONY Oczywiście atrybut color może być wykorzystany w znaczniku łącznie z SIZE i NAME Natalia Kotsyba --- Podstawy HTML 19

Dwa rodzaje konstrukcji odsyłaczowych: do etykiet i do stron Etykieta (zwana też zakładką lub kotwicą - ang. anchor) jest znakiem, swoistą elektroniczną zakładką, podobną do zakładek w książce, która zaznacza jakieś miejsce w tekście. Odsyłaczem jest konstrukcja, która wskazuje pewne miejsce w Internecie i pozwala skoczyć do niego za pomocą kliknięcia na niej myszką. Tekst, na którym należy kliknąć Przykład: Tutaj znajdziesz miesięcznik PC World Komputer Natalia Kotsyba --- Podstawy HTML 20

Tekst Uwaga na znak # oddzielający nazwę strony od nazwy etykiety. Jeśli tworzymy odsyłacz do etykiety na tej samej stronie, wystarczy użyć samej nazwy etykiety, czyli: Tekst, na którym należy kliknąć Natalia Kotsyba --- Podstawy HTML 21

Tutaj kliknij Wyślij pocztę Natalia Kotsyba --- Podstawy HTML 22

Odsyłacz do innej strony HTML (w tym samym katalogu): Edytor Pajączek Odsyłacz do innej strony w katalogu podrzędnym Inna strona Odsyłacz do strony w innym katalogu, równorzędnym w hierarchii: Jeszc ze inna strona Dwie kropki w adresie nakazują przeglądarce "zajrzeć wyżej" w hierarchii katalogów, "zejść" do nowego katalogu i przywołać żądaną stronę Natalia Kotsyba --- Podstawy HTML 23

Obrazek może być traktowany jako część ciągu tekstowego albo zostać wyniesionym w lewo czy w prawo za pomocą atrybutu align Natalia Kotsyba --- Podstawy HTML 24

Na określenie w jakiej odległości powinien znaleźć się od tekstu pozwalają atrybuty HSPACE i VSPACE HSPACE – określa odległość z prawej i lewej strony obrazu ( w pikselach), a VSPACE- od górnej i dolnej krawędzi obrazu Atrybuty jednak są uznawane za przestarzałe i zamiast nich należy raczej stosować arkusze stylów Natalia Kotsyba --- Podstawy HTML 25

<ahref<img srcwidthheight altborder Przećwicz na asp asp Natalia Kotsyba --- Podstawy HTML 26

uszeregowane informacje nieuszeregowane informacje definicje Różne rodzaje list mogą być zagnieżdżane (np. lista wypunktowana wewnątrz numerowanej). Przykład. Implementacja listy nieuporządkowanej (wypunktowanej) przedstawionej wyżej. uszeregowane informacje nieuporządkowane informacje definicje Znacznik (unordered list) definiuje listę, znaczniki (list item) – jej elementy Natalia Kotsyba --- Podstawy HTML 27

Listę uporządkowaną (numerowaną) można stworzyć przy użyciu znacznika (ordered list). Przykładem listy numerowanej może być przepis kulinarny, np.: 1. Do filiżanki wsyp łyżeczkę suchych liści herbacianych. 2. Zalej gotującą wodą. 3. Dodaj mleka, cukru lub cytryny do smaku. Przykład. Implementacja listy numerowanej przedstawionej wyżej. Do filiżanki wsyp łyżeczkę suchych liści herbacianych. Zalej gotującą wodą. Dodaj mleka, cukru lub cytryny do smaku Natalia Kotsyba --- Podstawy HTML 28

Listy definicji ( ) zasadniczo składają się z par nazwa-definicja (znaczniki i ) Przykład. Lista definicji Kałuża Akwen wodny pozbawiony znaczenia strategicznego. Łyżka Ręczny manipulator żywieniowy. może być zdefiniowana w HTML jako: Kałuża Akwen wodny pozbawiony znaczenia strategicznego. Łyżka Ręczny manipulator żywieniowy Natalia Kotsyba --- Podstawy HTML 29

(unordered list) lista wypunktowana type="disc|square|circle" (ordered list) lista numerowana type="1|a|A|i|I" wskazuje na sposób numerowania; poszczególne typy oznaczają kolejno: cyfry arabskie, małe litery alfabetu łacińskiego, duże litery alfabetu łacińskiego, małe cyfry rzymskie, duże cyfry rzymskie start=1|2|3|... numer pierwszego elementu listy (list item) element listy value=1|2|3|... numer aktualnego elementu listy (definition list) lista definicji (definition term) termin (definition description) definicja Natalia Kotsyba --- Podstawy HTML 30

Które z elementów wymienionych w zadaniu domowym są częścią sekcji, a które należą do ? Natalia Kotsyba --- Podstawy HTML 31