Notatki do wykładu Język HTML i podstawy CSS dr Jacek Tarasiuk WFiIS, AGH wersja 2006 Spis treści Język HTML...1 Rodzaje dokumentów HTML...1 Budowa dokumentu HTML...1 Zestawienie znaczników...2 Szkielet Strony...2 Znaczniki Sekcji HEAD...2 Formatowanie Tekstu...2 Czcionki i Kroje Pisma...3 Listy...4 Tabele...5 Grafika i multimedia...6 Odnośniki...6 Ramki...7 Program ezhtml 2...8 Ekran roboczy programu...8 Menu programu...8 Kilka porad praktycznych...8 Dodatek A...9
Uznanie autorstwa-użycie niekomercyjne 2.0 Polska http://creativecommons.org/licenses/by-nc/2.0/pl/
HTML i podstawy CSS JĘZYK HTML Tu w przyszłości będzie kilka słów o HTMLu. Rodzaje dokumentów HTML O typie dokumentu decyduje jego prolog. Jest to pierwsza linijka tekstu w dokumencie HTML. W zależności od rodzaju dokumentu może mieć ona jedną z poniższych postaci: Dokument w standardzie HTML 4.01 w wersji STRICT <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> Dokument w standardzie HTML 4.01 w wersji TRANSITIONAL <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> Dokument w standardzie HTML 4.01 w wersji FRAMESET <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/tr/html4/frameset.dtd"> Istnieją również inne rodzaje dokumentów. Są to na przykład dokumenty zgodne ze starszymi wersjami specyfikacji HTML lub dokumenty zgodne ze specyfikacją XHTML. Te pierwsze w zasadzie są już bezużyteczne, te drugie nie wchodzą w zakres kursu. Budowa dokumentu HTML Dokument HTML jest plikiem tekstowym. Można go stworzyć w dowolnym edytorze tekstu. Cała treść dokumentu ujęta jest w znaczniki. Każdy obszar dokumentu rozpoczyna się znacznikiem postaci <nazwa znacznika>, a kończy znacznikiem zamykającym postaci </nazwa znacznika>. Należy pamiętać aby zawsze znaczniki zamykać w odwrotnej kolejności niż się je otwiera. Na przykład następująca sekwencja jest prawidłowa: <a><b></b><c></c></a>, a taka sekwencja: <a><b><c></b></c></a> jest nieprawidłowa. Znaczniki można pisać małymi i dużymi literami (osobiście zalecam używanie małych liter). Minimalny dokument HTML ma postać: <html> <head> sekcja nagłówkowa </head> <body> ciało dokumentu </body> </html> W sekcji nagłówkowej znajdą się informacje nie wyświetlane na stronie skierowane do przeglądarek internetowych, wyszukiwarek alby tych, którzy będą oglądali kod naszej strony. Ciało dokumentu Jacek Tarasiuk 2006 1
Notatki do wykładu zawiera wszystkie treści, które mają zostać wyświetlone. Dla wygody w kodzie strony można wykonywać wcięcia. Nie mają one wpływu na sposób wyświetlania strony. Zestawienie znaczników Szkielet Strony html Rozpoczyna dokument html. head body bgcolor background text link alink vlink Rozpoczyna nagłówek dokumentu. Typowe informacje umieszczane w nagłówku opisano w Dodatku A. Rozpoczyna sekcję treści dokumentu. Kolor tła. Obrazek umieszczony w tle. Kolor tekstu. Kolor odnośników. Kolor aktywnego odnośnika. Kolor użytego odnośnika. Znaczniki Sekcji HEAD title meta Tytuł strony. Informacje nagłówkowe (patrz Dodatek B). link styli. rel Odnośnik do zewnętrznego pliku najczęsciej zawierającego ikonę lub arkusz shortcut icon np: <link rel="shortcut icon" href="favicon.ico"> stylesheet np: <link rel="stylesheet" type="text/css" href="styles.css" /> base Adres bazowy serwisu. Formatowanie Tekstu p Otwiera paragraf. h1-h6 Definiuje nagłówek 1,..., 6 poziomu. br clear Przełamuje linię. Umieszcza elementy sąsiadujące poniżej linii przełamania. hr noshade size Wstawia poziomą kreskę odzielającą paragrafy. Bez cienia. Grubość linii. 2 Materiał publikowany na licencji Creative Commons
HTML i podstawy CSS Szerokość linii. pre Blok preformatowany. Szerokość bloku wyrażona w znakach. blockquote cite Wstawia blok cytatu. Źródło cytatu. q cite Cytat w obrębie linii. Źródło cytatu. address Formatowanie danych adresowych. center Centruje blok na stronie. div Definiuje blok w dokumencie. span Definiuje blok w linii tekstu. fieldset Tworzy obramowanie wokół grupy elementów. top, bottom, left, right legend Dodje tytuł do obramowania stworzonego przy użyciu fieldset. bdo dir Określa kierunek pisania tekstu. rtl lub ltr <!-- --> Komentarz. Czcionki i Kroje Pisma b Pogrubienie. i Pochylenie (italic). u Podkreślenie. tt Czcionka zbliżona do maszynowej (maszyna do pisania). strike Tekst przekreślony. sub Indeks dolny. sup Indeks górny. Jacek Tarasiuk 2006 3
Notatki do wykładu big Zwiększenie rozmiaru czcionki. small cite Zmniejszenie rozmiaru czcionki. Czcionka tekstu cytowanego. dfn Czcionka tekstu definicji. del ins Tekst usunięty. Tekst wstawiony. acronym strong em code Akronim np. <acronym title="platforma Obywatelska">PO</acronym> Tekst silnie wyróżniony. Tekst wyróżniony. Linie kodu programu. kbd samp var font color face size basefont color face size Tekst wprowadzony z klawiatury. Tekst będący przykładem czegoś, próbką. Zmienne. Definiuje rodzaj czcionki. kolor rodzaj rozmiar Czcionka bazowa. kolor rodzaj rozmiar ul Listy compact type Lista nieuporządkowana. Zmniejsza odstępy między liniami. disc, round, circle, square li value type Element listy. Numer w liście numerowanej. disc, round, circle, square 4 Materiał publikowany na licencji Creative Commons
HTML i podstawy CSS ol compact type start Lista numerowana. Zmniejsza odstępy między liniami. Liczby arabskie, liczby rzymskie, litery. Liczba określająca początek numeracji. menu Lista zwierająca elementy menu. dir Lista katalogowa o elementach nie dłuższych niż 20 znaków. dl dt Lista definicyjna. Hasło listy definicyjnej. dd Objaśnienie definicji. Tabele table bgcolor border cellpadding cellspacing frame rules tbody v Tworzy w dokumencie tabelę. left, center, right Kolor tła. Grubość obramowania. Odległość obramowania od zawartości komórki. Odległość pomiędzy komórkami. above, below, hsides Sposób grupowania komórek. Szerokość tabeli. Przewijana część dużej tabeli. top, bottom, middle, baseline td bgcolor colspan height nowrap rowspan v Definiuje komórkę w tabeli. Kolor tła. Liczba połączonych komórek w poziomie. Wysokość komórki. Zakaz łamania wiersza w komórce. Liczba połączonych komórek w pionie. top, bottom, middle, baseline Szerokość komórki. th bgcolor colspan height nowrap rowspan v Definiuje komórke nagłówka w tabeli. Kolor tła. Liczba połączonych komórek w poziomie. Wysokość komórki. Zakaz łamania wiersza w komórce. Liczba połączonych komórek w pionie. top, bottom, middle, baseline Szerokość komórki. tr bgcolor Definiuje wiersz w tabeli. Kolor tła. Jacek Tarasiuk 2006 5
Notatki do wykładu v top, bottom, middle, baseline caption Wstawia podpis tabeli. left, center, right thead Definiuje nagłówek tabeli. v top, bottom, middle, baseline tfoot v Definiuje stopkę w tabeli. top, bottom, middle, baseline Grafika i multimedia img alt src border height hspace ismap usemap vspace Wstawia do dokumentu obrazek. Alternatywny tekst dla obrazka. Adres wskazujący na obrazek. top, bottom, left, right Grubość obramowania. Wysokość obrazka. Odstęp w poziomie od tekstu. Podział obrazka na fragmenty będące odsyłaczami. Adres mapy odsyłaczy nałożonej na obrazek. Odstęp w pionie od tekstu. Szerokość obrazka. object archive border classid codebase codetype data declare height hspace name standby type usemap vspace param name type value valuetype Wstawia do dokumentu obiekt określonego typu. top, bottom, left, right Lista ładowanych zasobów Grubość ramki wokół obiektu Klasa obiektu Adres bazowy serwisu. Typ obiektu Dane obiektu Deklaracja obiektu Wysokość obiektu. Odstęp w pionie od tekstu. Nazwa obiektu. Tekst wyświetlany podczas ładowania. Typ danych. Mapa elementu. Odstęp w poziomie od tekstu. Szerokość obiektu. Określa parametry wstawianego obiektu. Nazwa parametru. Typ danych. Wartość. Typ wartości. a Odnośniki href Odnośnik wskazujący inne miejsce w: dokumencie, na stronie, w Internecie. Adres dokumentu. 6 Materiał publikowany na licencji Creative Commons
HTML i podstawy CSS name target Nazwa etykiety. _blank, _self, _top, _parent area href alt shape coords map id name Obszar mapy będący odnośnikiem. Adres bazowy. Tekst alternatywny. rect, circle, poly Współrzędne obszaru. Mapa będąca zbiorem odnośników. Identyfikator mapy. Nazwa mapy. Ramki frame Utworzenie ramki. frameborder Z ramką (1) lub bez ramki (0). marginheight Margines ramki w pionie. margin Margines ramki w poziomie. name Nazwa ramki. noresize Zakaz zmiany rozmiarów ramki. scrolling yes, no, auto src Adres dokumentu wstawianego w ramkę. frameset cols rows Definiuje szkielet ramek. Liczba ramek w pionie. Liczba ramek w poziomie. iframe top, bottom, left, right frameborder Z ramką (1) lub bez ramki (0). height Wysokość ramki. marginheight Margines ramki w pionie. margin Margines ramki w poziomie. name Nazwa ramki. scrolling yes, no, auto src Adres dokumentu wstawianego w ramkę. Szerokość ramki. noframes Tekst wyświetlany w przeglądarkach nieobsługujących ramek. Jacek Tarasiuk 2006 7
Notatki do wykładu PROGRAM EZHTML 2 asdasd asdasd Ekran roboczy programu sdafsdfds dsfsdfsdf Menu programu dfsdfsdf dfsdfds Kilka porad praktycznych fsdfsdf dssdf 8 Materiał publikowany na licencji Creative Commons
HTML i podstawy CSS DODATEK A sdfsdf sdfsdf <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta name ="description" content="jakaś tam treść"> <meta name="keywords" content="jakieś wyrazy kluczowe"> <meta http-equiv="content-language" content="pl"> <meta name="author" content="imię i nazwisko"> <meta name="generator" content="nazwa edytora"> <meta http-equiv="expires" content="data i czas"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="refresh" content="x"> <meta http-equiv="refresh" content="x; URL=http://.../strona.html"> <meta http-equiv="creation-date" content="tue, 04 Dec 1993 21:29:02 GMT"> <meta name="robots" content="dyrektywa"> dyrektywa: index, noindex, follow, nofollow Jacek Tarasiuk 2006 9