- Dla dokumentów HTML wyróŝniamy 2 rodzaje DTD: Transitional (przejściowa) Frameset (ramkowa) Język XHTML i CSS. 28 lutego 2010 Strona 1

Wielkość: px
Rozpocząć pokaz od strony:

Download "- Dla dokumentów HTML wyróŝniamy 2 rodzaje DTD: Transitional (przejściowa) Frameset (ramkowa) Język XHTML i CSS. 28 lutego 2010 Strona 1"

Transkrypt

1 HTML HTML (Hyper Text Markup Language) jest implementacją języka SGML (Standard Generalized Markup Language). Język SGML słuŝy do tworzenia dokumentów, opisujących strukturę dokumentu. HTML jest językiem znaczników słuŝącym do: opisu struktury dokumentu formatowania tekstu łączenia grafiki, dźwięku, video itd. oddzielenia struktury dokumentów od prezentacji (stosuje się dwa typy plików: ze strukturą dokumentów i arkusze stylów, które pozwalają tę samą strukturę dokumentów prezentować na wiele sposobów). Metaznaczniki stanowią podstawę budowy dokumentu HTML i opisują strukturę dokumentu oraz format dokumentu. Standardy HTML HTML 2.0 HTML 3.2 (1996) HTML 4.0 (1997) HTML 4.01 (1999) - XHTML (na bazie XML i HTML) Budowa dokumentu HTML i XHTML składa się z dwóch głównych części: znacznika otwierającego i zamykającego head, oraz znacznika otwierającego i zamykającego body, natomiast całość jest zawarta w znaczniku html, nad którym jest umieszczony DTD (Document Type Definition - Definicja Typu Dokumentu), oraz w przypadku XHTML tzw. prolog. - Dla dokumentów HTML wyróŝniamy 2 rodzaje DTD: Transitional (przejściowa) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " Frameset (ramkowa) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " 28 lutego 2010 Strona 1

2 - Dla dokumentów XHTML 1.0: Strict (ścisła) wyklucza wszelkie elementy prezentacyjne, które specyfikacja HTML 4 uznaje za schyłkowe (deprecated). Wersja Strict jest okrojonym HTML 4, przedkładającym strukturę nad prezentację. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Transitional (przejściowa) dla dokumentów zawierających elementy i atrybuty HTML, łącznie ze schyłkowymi (prezentacyjne). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Frameset (ramkowa) dla strony zawierającej ramki. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " - Dla dokumentu XHTML 1.1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " 28 lutego 2010 Strona 2

3 Kiedy serwer wysyła dokument do oprogramowania uŝytkownika (np.: przeglądarki), to wysyła on równieŝ pewne informacje w polu Content- Type w nagłówku HTTP dotyczące formatu dokumentu. Informacje te są wyraŝone przy uŝyciu etykiety MIME type. Oto przykład nagłówka HTTP dla dokumentu HTML przy uŝyciu MIME type 'text/html'. Proszę zauwaŝyć, Ŝe informacja w Content-Type moŝe równieŝ wyrazić kodowanie znaków dokumentu. HTTP/ OK Date: Wed, 05 Nov :46:04 GMT Server: Apache/ (Unix) PHP/4.2.3 Content-Location: CSS2-REC.en.html Vary: negotiate,accept-language,accept-charset TCN: choice P3P: policyref= Cache-Control: max-age=21600 Expires: Wed, 05 Nov :46:04 GMT Last-Modified: Tue, 12 May :18:49 GMT ETag: "3558cac9;36f99e2b" Accept-Ranges: bytes Content-Length: Connection: close Content-Type: text/html; charset=utf-8 Content-Language: en Serwer wysyła pliki HTML 4.01 z text/html jako MIME type. HTML jest aplikacją SGML. Jets to bardziej skomplikowane w przypadku XHTML 1.0, który jest oparty na XML. Wielu woli uŝywać XHTML z powodu korzyści jakie XML wnosi w edytowanie lub przetwarzanie dokumentów. Jednak w większości przeglądarek brakuje wsparcia dla plików XML, wiele plików XHTML 1.0 jest wysyłanych z text/html MIME type. W takim przypadku, aplikacje uŝytkownika traktują plik jako HTML. XHTML 1.0 moŝna równieŝ wysyłać jako XML, a XHTML 1.1 jest zawsze wysyłane jako XML. Aby wysłać XHTML jako XML naleŝy zastosować MIME types application/xhtml+xml, application/xml lub text/xml. W3C zaleca aby 28 lutego 2010 Strona 3

4 wysyłać XHTML jako XML stosując tylko pierwszy z typów MIME - mianowicie application/xhtml+xml. Fakt, Ŝe XHTML moŝe być wysyłany jako HTML lub XML, robi róŝnicę w sposobie w jakim informacja o kodowaniu jest deklarowana. <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xml:lang="en" lang="en" xml ns=" <head> Dokumenty XHTML Dokument XHTML jest dokumentem tekstowym, który zawiera znaki o ustalonym kodowaniu, składającym się z elementów (tagów/znaczników) pisanych małymi literami. Element składa się z trzech części: znacznika początku (w formie <znacznik>) zawartości elementu (tekst i/lub inne elementy) znacznika końca (w formie </znacznik>) Elementy muszą mieć przypisane atrybuty określające znaczenie danego elementu. Atrybuty wraz z ich wartościami umieszczonymi w cudzysłowach wpisuje się wewnątrz znacznika początkowego (<znacznik atrybut="wartość">). W języku XHTML kaŝdy znacznik musi posiadać znacznik końca, co nie obowiązywało w wielu znacznikach w HTML. Język XHTML wywodzi się z połączenia języka HTML ze ścisłymi zasadami języka XML. kaŝdy znacznik powinien być pisany małymi literami, kaŝdy znacznik, który rozpoczynasz powinien mieć znacznik kończący (czyli jak rozpoczniesz akapit znacznikiem <p> to musisz go zakończyć znacznikiem </p>), jeŝeli znacznik nie ma odpowiednika zamykającego, stosujemy tak zwane samozakończenie, czyli na przykład znacznik oznaczający przejście do następnej linii oznaczany jest przez <br />, a znacznik oznaczający poziomą linię rozdzielającą oznaczany jest przez <hr />. 28 lutego 2010 Strona 4

5 Jednym z głównych błędów jest uznanie języka XHTML kolejną wersją HTMLa. Na dodatek, błąd ten wyolbrzymiany jest przez fakt, iŝ Microsoft Internet Explorer wspiera obsługę XHTML, ale tylko, jeśli dokument ma typ MIME text/html, natomiast nie potrafi obsłuŝyć rekomendowanego typu application/xhtml+xml. Kiedy strona XHTML posiada typ MIME text/html, uznawana jest przez wszystkie przeglądarki jakby była niczym więcej niŝ stroną HTML. JednakŜe, jeśli strona XHTML posiada MIME text/xml lub application/xhtml+xml, musi ona być traktowana jako dokument XML który musi być zgodny ze ścisłymi standardami tworzenia i wyświetlania XML-a. Poprawny dokument XHTML jest aplikacją XML i jako taki wymusza od autora do bycia zgodnym ze ścisłymi zasadami tworzenia XHTML-a, między innymi: 1. Surowe znaki < i & nie są dozwolone chyba, Ŝe są wewnątrz sekcji CDATA (<!CDATA[[... ]]>). 2. Komentarze (<!... >) nie mogą zawierać podwójnych myślników ( ). 3. Zawartość wewnątrz komentarzy (<!... >) moŝe być zignorowana. Metaznaczniki <meta> - opcjonalne polecenie usprawniające funkcjonowanie witryny w sieci, które bardziej szczegółowo informuje o zawartości dokumentu, np. dla celów katalogowych czy indeksów, wykorzystywanych przez odpowiednie programy, np. wyszukiwarki sieciowe lub przeglądarki internetowe Zawiera ono trzy atrybuty: http-equiv, name i content w kombinacji pierwszy z trzecim lub drugi z trzecim. http-equiv definiuje zmienne systemowe, natomiast name - zmienne uŝytkownika. Przykłady: 1) <meta http-equiv="content-type" content="text/html; charset= windows-1250 "/> Strona kodowa, opis strony, wyrazy kluczowe, autor strony. Standard wyświetlania automatycznie przyjęty przez wyszukiwarkę i koniecznie zastosowany podczas edycji strony w edytorze. 28 lutego 2010 Strona 5

6 2) <meta name ="description" content=" treść "/> Polecenie opisuje zawartość strony. Znaleziona strona będzie zatytułowana za pomocą title i opisana za pomocą content ( znaków, lub wyrazów). 3) <meta name="keywords" content="wyrazy kluczowe..."/> Polecenie informuje o wyrazach kluczowych dokumentu, zwracając przykładową wartość keywords: HTML, znaczniki itp. (do 1000 znaków). Ułatwia to pracę sieciowym programom indeksująco-wyszukiwawczym i zwiększa szansę znalezienia strony przez innych uŝytkowników. 4) <meta name="author" content="imię i nazwisko"/> Polecenie informuje o autorze strony. 5) <meta http-equiv="content-language" content="pl"/> Polecenie informuje o języku strony. Niektóre przeglądarki korzystają z niego przy precyzowaniu zapytań. Dla języka angielskiego uŝyjemy en, dla amerykańskiego angielskiego en-us, dla niemieckiego de, dla francuskiego fr, dla rosyjskiego "ru" itd. 28 lutego 2010 Strona 6

7 Przykład poprawnego dokumentu HTML plik1.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>tytuł strony</title> <meta name="description" content="opis strony"> <meta name="keywords" content="slowa kluczowe"> <meta name="author" content="autor strony"> <meta name="robots" content="all"> <link rel="stylesheet" href="lokalizacja arkusza styli" type="text/css"> </head> <body> <p>zawartość strony</p> </body> </html> Przykład poprawnego dokumentu XHTML plik2.html <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>tytuł strony</title> <meta name="description" content="opis strony" /> <meta name="keywords" content="slowa kluczowe" /> <meta name="author" content="autor strony" /> <meta name="robots" content="all" /> </head> <body> <p>zawartość strony</p> </body> </html> 28 lutego 2010 Strona 7

8 Elementy blokowe ADDRESS - element definiuje informacje o autorze strony WWW BLOCKQUOTE - element definiuje wydzielony blok tekstu BR - element definiuje przełamanie akapitu CENTER - element definiuje połoŝenie centralne DIV - element definiuje i grupuje elementy oraz ich atrybuty H1 - element definiuje nagłówek i jego wielkość (największy) H2 - element definiuje nagłówek i jego wielkość H3 - element definiuje nagłówek i jego wielkość H4 - element definiuje nagłówek i jego wielkość H5 - element definiuje nagłówek i jego wielkość H6 - element definiuje nagłówek i jego wielkość (najmniejszy) HR - element definiuje linię poziomą P - element definiuje akapit PRE - element definiuje tekst, w którym zachowane są białe znaki plik3.html <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>tytuł strony</title> <meta name="description" content="opis strony" /> <meta name="keywords" content="slowa kluczowe" /> <meta name="author" content="autor strony" /> <meta name="robots" content="all" /> </head> <body> <h1 style="text-align: right; ">śródtytuł wyrównany do prawego marginesu</h1> <h2 style="letter-spacing: 1mm; border: 3px double; padding: 10px; ">Obramowany śródtytuł z literami co 1mm</h2> <h1 style="font-variant: small-caps; text-align: center; color: darkseagreen; background-color: black; ">Śródtytuł w kolorze darkseagreen na tle black</h1> </body> </html> W starszych wersjach HTML stosowano szereg atrybutów, które zachowały się jeszcze w HTML 4 i XHTML 1.0, ale tylko w wersjach Transition i Frameset, natomiast w wersji Strict są to atrybuty uznane za przestarzałe, zaś w XHTML 1.1 juŝ w ogóle nie istnieją. Są to atrybuty noshade (pozbawienie cieniowania), width (szerokość), size (grubość) i align (poziome wyrównanie). Formatowanie poziomych linii zostało przeniesione do stylów CSS. <pre> </pre> plik4.html 28 lutego 2010 Strona 8

9 <div> </div> Polecenie div (blok, sekcja) jest jednym z najbardziej fundamentalnym poleceń języka HTML, które odgrywa kluczową rolę w grupowaniu wielu róŝnych elementów i pozycjonowaniu większych fragmentów dokumentu. Na blokach formatowanych za pomocą kaskadowych arkuszy stylów oparte są dziś nowoczesne układy stron (ang. layouty). Polecenie pozwala wydzielić większy blok w dokumencie, np. fragment tekstu, grafikę czy wykaz (nawet kilka róŝnych elementów jednocześnie), a następnie nadać mu jakiś rodzaj formatowania, np. środkowanie lub dosunięcie do prawego marginesu, nadanie koloru itd. plik5.html <span> </span> Jest elementem wydzielającym jakiś fragment dokumentu, ale w przeciwieństwie do polecenia div pełni tę rolę jako element liniowy, np. pozwala wydzielić fragment akapitu i nadać mu za pomocą stylów specjalne formatowanie, jak pogrubienie tekstu w kolorze niebieskim albo pochylenie tekstu na zielonym tle. Listy DD - element definiuje wyjaśnienie hasła dla listy definicji DIR - element definiuje listę zawierającą elementy w wielu kolumnach DL - element definiuje listę definicji DT - element definiuje hasło dla listy definicji LI - element definiuje nowy element listy MENU - element definiuje listę zawierającą elementy w jednej kolumnie OL - element definiuje listę numerowaną UL - element definiuje listę zwykłą Lista uporządkowana i nieuporządkowana plik6.html Listy definicji stosuje się w przypadku gdy podawane są terminy wraz z ich objaśnieniami. Listy te róŝnią się od poprzednich tym, Ŝe pojedynczy element listy składa się z dwóch części: wyraŝenia (<dt>) oraz opisu (<dd>). plik7.html Kaskadowe arkusze stylów (z ang. Cascading Style Sheets, CSS) to język słuŝący do opisu formy prezentacji (wyświetlania) stron WWW stworzonych przy pomocy języka znaczników. Arkusz stylów CSS to lista dyrektyw 28 lutego 2010 Strona 9

10 (tzw. reguł) ustalających w jaki sposób ma zostać wyświetlana przez przeglądarkę internetową zawartość wybranego elementu (lub elementów) XHTML lub XML. MoŜna w ten sposób opisać wszystkie pojęcia odpowiedzialne za prezentację elementów dokumentów internetowych, takie jak rodzina czcionek, kolor tekstu, marginesy, odstęp międzywierszowy lub nawet pozycja danego elementu względem innych elementów bądź okna przeglądarki. Wykorzystanie arkuszy stylów daje znacznie większe moŝliwości pozycjonowania elementów na stronie, niŝ oferuje sam XHTML. CSS został stworzony w celu odseparowania struktury dokumentu od formy jego prezentacji. Separacja ta zwiększa zakres dostępności witryny, zmniejsza zawiłość dokumentu, ułatwia wprowadzanie zmian w strukturze dokumentu a takŝe zwiększa dostępność pozwalając na tworzenie układów strony bez uŝywania tabel. CSS ułatwia takŝe zmienianie renderowania strony w zaleŝności od obsługiwanego medium (ekran, palm top, dokument do druku, czytnik ekranowy). Stosowanie zewnętrznych arkuszy CSS daje moŝliwość zmiany wyglądu wielu stron na raz bez ingerowania w sam kod XHTML, poniewaŝ arkusze mogą być wspólne dla wielu dokumentów. CSS 1 jest w pełni obsługiwany przez przeglądarki oparte na silniku Gecko (np. Firefox), KHTML (min. Safari, Konqueror) oraz Presto (Opera). Silniki te są takŝe bliskie pełnej obsługi CSS 2.1. Internet Explorer do wersji 5.5 posiadał niecałkowitą i pełną błędów obsługę CSS1 oraz nielicznych elementów nowszych wersji. IE 6 renderując w trybie standardów obsługuje poprawnie prawie całość CSS1, jednak obsługa CSS 2.1 nadal pozostawia wiele do Ŝyczenia. Nazwa "kaskadowe arkusze stylów" wynika z faktu, iŝ gdy reguły CSS wykluczają się wzajemnie w arkuszu zewnętrznym, arkuszu wewnętrznym oraz na poziomie elementów HTML, priorytet stylów ustalany jest hierarchicznie. Przyjęto, Ŝe oddziaływanie stylów z arkuszy zewnętrznych moŝe być modyfikowane przez style zdefiniowane w nagłówku dokumentu, te zaś mogą być modyfikowane przez reguły zdefiniowane bezpośrednio w ciele dokumentu. Pierwszeństwo mają zatem style zdefiniowane "bliŝej" formatowanego elementu. Kolejność interpretacji reguł formatujących dany element przez przeglądarkę przedstawia się następująco: 1. Domyślny arkusz przeglądarki WWW (niezaleŝny od autora strony) 28 lutego 2010 Strona 10

11 2. Domyślny arkusz uŝytkownika przeglądarki (jak wyŝej) 3. Zewnętrzne arkusze stylów 4. Definicje stylów w nagłówku dokumentu 5. Definicje stylów w atrybucie style elementu Ten model działania pokazuje, w jaki sposób działa kaskada stylów. Między stylami z róŝnych źródeł nie muszą z resztą wcale występować Ŝadne konflikty - wszystkie style uzupełnią się, tworząc jeden wielki "wirtualny" styl. Składnia CSS składa się z trzech części: Selektora określa do jakiego elementu/znacznika odnosi się dana reguła Właściwości jest to zdefiniowany w specyfikacji znacznik, najczęściej angielskie słowo lub jego fragment (np. kolor tła = background-color, obramowanie = border itp.) Wartości właściwości styl nadawany właściwości, w przypadku koloru tła moŝe być # wartość barwy czarnej lub rozmiar czcionki 12px. Do kaŝdego selektora moŝna przypisać wiele własności, a kaŝda z tych własności moŝe mieć niezaleŝne wartości. Własność i przypisana jej wartość oddzielone są dwukropkiem i zawarte w nawiasach klamrowych. Jeśli dany selektor ma przypisaną więcej niŝ jedną wartość, są one oddzielone średnikiem. Jeśli własność ma więcej niŝ jedną wartość oddzielone są one przecinkami. Wartości zawierające więcej niŝ jedno słowo muszą być otoczone cudzysłowami. Oprócz selektorów oznaczających znaczniki XHTML (takie jak h1, h2, p, img) moŝemy przydzielić im ID lub klasę. Dzięki temu moŝemy nadać więcej niŝ jeden styl dla kaŝdego elementu XHTML. 28 lutego 2010 Strona 11

12 Dołączanie CSS do dokumentu XHTML Wewnątrz znacznika style plik8.html <style type="text/css"><!-- h1, td { color: green; }.naglowek { color: red; font-size:16px; }.pogrubiony { font-weight: bold; } --></style> Wszystkie tytuły h1 i komórki tabeli td będą miały kolor zielony (color: green;) Nagłówek ma mieć czerwony kolor (color: red;) i wielkość 16 pikseli (font-size: 16px;). Styl pogrubiony będzie tylko pogrubiony (font-weight: bold;). Dowolny element HTML, który ma mieć styl naglowek powinien mieć atrybut class z nazwą naszego stylu (ale juŝ bez kropki): <p class="naglowek">nagłówek strony</p> <div class="naglowek">inny nagłówek strony</div> <a href=" class="naglowek">duŝy link</a> Dodając przed kropką nazwę elementu XHTML, moŝesz ograniczyć działanie tego stylu tylko do wybranych poleceń języka XHTML. Zastosujmy pogrubienie tylko w akapitach: p.pogrubiony { font-weight: bold; } #zielony { color: green; } Tym razem odwołanie do stylu nie następuje przez podanie atrybutu class, ale przez identyfikator elementu, czyli atrybut id. MoŜna ograniczyć zakres działania stylu dla wybranego elementu dodając jego nazwę przed definicją stylu: p#zielony { color: green; } Zewnętrzny plik <link rel="stylesheet" type="text/css" href="./style.css" />p plik9.html, style.css Z drzewem dokumentu związana jest własność dziedziczności stylów. Polega ona na tym, Ŝe elementy leŝące niŝej w hierarchii (potomkowie), jeśli nie zaznaczymy inaczej, dziedziczą (przejmują) atrybuty formatowania, które zostały nadane ich przodkom. Niestety w niektórych przeglądarkach internetowych zdarza się błędna interpretacja dziedziczenia stylów. Dlatego zawsze sprawdzaj w praktyce zastosowanie tej własności. Problemy stwarzają 28 lutego 2010 Strona 12

13 np. elementy tabeli: nawet jeśli zdefiniujemy określoną wielkość czcionki dla elementu wyŝej w hierarchii, w Internet Explorerze 5 nie spowoduje to zmiany tej własności w poszczególnych komórkach (TD) ani w tytule tabeli (CAPTION). Natomiast w MSIE 6 wszystko jest w porządku, ale nie w trybie Quirks. Selektor potomka ol ul { color: red } KaŜdy element listy nienumerowanej (ul), który znajdzie się wewnątrz listy numerowanej (ol), będzie miał automatycznie nadany kolor czerwony. Selektor dziecka (bezpośrednio pod rodzicem) p > b { color: red } Jeśli bezpośrednio wewnątrz znacznika p (akapit) znajdzie się znacznik b (czyli pogrubienie tekstu), to zostanie on automatycznie napisany czcionką koloru czerwonego. Selektor braci i + b { color: red } Jeśli wewnątrz tego samego znacznika (rodzica), będą znajdowały się po sobie znaczniki i oraz b, to ten drugi uzyska określone atrybuty. Selektor atrybutu zawierającego określony wyraz p[title~="jest"] { color: orange } KaŜdy akapit, któremu został nadany atrybut title="..." o wartości, w której występuje wyraz "jest", powinien mieć kolor pomarańczowy. plik11.html, style11.css 28 lutego 2010 Strona 13

14 Wzór Znaczenie Opis Selektory elementów * Kojarzy każdy element. Selektor uniwersalny E Kojarzy każdy element E (element typu E). Selektor typu E F Kojarzy każdy element F, który jest potomkiem elementu E. Selektor potomka E > F Kojarzy każdy element F, który jest dzieckiem elementu E. Selektor dziecka E + F Kojarzy każdy element F bezpośrednio poprzedzany przez element E. Selektor braci Selektory atrybutów E[atr] E[atr="wart"] Kojarzy każdy element E z ustawionym atrybutem "atr" (na jakąkolwiek wartość). Kojarzy każdy element E, którego atrybut "atr" ma wartość dokładnie "wart". Prosty selektor atrybutu Selektor atrybutu o określonej wartości E[atr~="wart"] Kojarzy każdy element E, którego wartość atrybutu "atr" jest listą oddzielonych spacjami wartości, a jedna z nich ma dokładnie wartość "wart". Selektor atrybutu zawierającego określony wyraz E[lang ="en"] Kojarzy każdy element E, którego atrybut "lang" ma rozdzieloną łącznikami listę wartości, zaczynającą się (z lewej strony) od "en". Selektor atrybutu zawierającego łączniki Selektory specjalne DIV.wart Tylko HTML. To samo co DIV[class~="wart"]. Klasy selektorów E#ident Kojarzy każdy element E z identyfikatorem ID równym "ident". Selektor identyfikatora Selektory pseudoelementów P:first-line Kojarzy pierwszą linię akapitu P. Pierwsza linia P:first-letter Kojarzy pierwszą literę akapitu P. Pierwsza litera 28 lutego 2010 Strona 14

15 Wzór Znaczenie Opis E:before Wstawia treść przed zawartością elementu E. Przed... E:after Wstawia treść po zawartości elementu E. Po... Selektory pseudoklas E:first-child Kojarzy element E, jeśli E jest pierwszym dzieckiem jego rodzica. Pierwsze dziecko E:link E:visited Kojarzy element E, jeżeli E jest kotwicą hiperlinku (odsyłaczem), której cel (strona docelowa) jeszcze nie został odwiedzony (:link) lub został już odwiedzony (:visited). Odsyłacz podstawowy Odsyłacz odwiedzony E:active E:hover E:focus Kojarzy E podczas pewnych akcji użytkownika (:active - aktywacja, :hover - wskazanie, :focus - zogniskowanie). Aktywacja Wskazanie myszką Zogniskowanie E:lang(c). Kojarzy element typu E, jeżeli jest napisany w języku c (np.: pl - polski, en - angielski). Atrybut języka Pozycjonowanie określa pozycję elementu w stosunku do sąsiadujących elementów, do nadrzędnego pojemnika oraz w stosunku do okna przeglądarki pozycjonowanie.html 28 lutego 2010 Strona 15

Źródła. cript/1.5/reference/ Ruby on Rails: http://www.rubyonrails.org/ AJAX: http://www.adaptivepath.com/publications/e ssays/archives/000385.

Źródła. cript/1.5/reference/ Ruby on Rails: http://www.rubyonrails.org/ AJAX: http://www.adaptivepath.com/publications/e ssays/archives/000385. Źródła CSS: http://www.csszengarden.com/ XHTML: http://www.xhtml.org/ XML: http://www.w3.org/xml/ PHP: http://www.php.net/ JavaScript: http://devedgetemp.mozilla.org/library/manuals/2000/javas cript/1.5/reference/

Bardziej szczegółowo

Podstawy (X)HTML i CSS

Podstawy (X)HTML i CSS Inżynierskie podejście do budowania stron WWW momat@man.poznan.pl 2005-04-11 1 Hyper Text Markup Language Standardy W3C Przegląd znaczników Przegląd znaczników XHTML 2 Cascading Style Sheets Łączenie z

Bardziej szczegółowo

HTML podstawowe polecenia

HTML podstawowe polecenia HTML podstawowe polecenia Szkielet dokumentu:

Bardziej szczegółowo

Wykład 1: HTML (XHTML) Michał Drabik

Wykład 1: HTML (XHTML) Michał Drabik Wykład 1: HTML (XHTML) Michał Drabik 1 Czyli to wszystko co trzeba wiedzieć aby zacząć tworzyć strony internetowe. 2 HTML 4 HTML = HyperText Markup Language Hipertekstowy język znaczników umożliwiający

Bardziej szczegółowo

Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css.

Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css. Kaskadowe arkusze stylów CSS Geneza - oddzielenie struktury dokumentu HTML od reguł prezentacji - poszerzenie samego HTML Korzyści - przejrzystość dokumentów - łatwe zarządzanie stylem (wyglądem) serwisu

Bardziej szczegółowo

Język (X)HTML. Podstawowe znaczniki i parametry. dr Konrad Dominas / UAM

Język (X)HTML. Podstawowe znaczniki i parametry. dr Konrad Dominas / UAM Język (X)HTML Podstawowe znaczniki i parametry Szablon dokumentu (X)HTML

Bardziej szczegółowo

Tworzenie stron internetowych w kodzie HTML Cz 7

Tworzenie stron internetowych w kodzie HTML Cz 7 Tworzenie stron internetowych w kodzie HTML Cz 7 7. Ramki 7.1. Wstęp Przykład: Oto przykładowy wygląd strony startowej ramek: PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd">

Bardziej szczegółowo

Ćwiczenie 9 - CSS i wstawianie CSS

Ćwiczenie 9 - CSS i wstawianie CSS Ćwiczenie 9 - CSS i wstawianie CSS Wprowadzenie: Od tego ćwiczenia zajmować się będziemy CSS czyli Kaskadowymi Arkuszami Stylów (Cascading Style Sheets). CSS stanowią uzupełnienie dla HTML-a. HTML odpowiada

Bardziej szczegółowo

HTML (HyperText Markup Language) hipertekstowy język znaczników

HTML (HyperText Markup Language) hipertekstowy język znaczników HTML (HyperText Markup Language) hipertekstowy język znaczników Struktura dokumentu tytuł strony

Bardziej szczegółowo

Kaskadowe arkusze stylów (CSS)

Kaskadowe arkusze stylów (CSS) Kaskadowe arkusze stylów (CSS) CSS (Cascading Style Sheets) jest to język opisujący sposób, w jaki przeglądarki mają wyświetlać zawartość odpowiednich elementów HTML. Kaskadowe arkusze stylów służą do

Bardziej szczegółowo

Zaawansowana Pracownia Komputerowa - Ćwiczenia. Krzysztof Miernik

Zaawansowana Pracownia Komputerowa - Ćwiczenia. Krzysztof Miernik Zaawansowana Pracownia Komputerowa - Ćwiczenia Krzysztof Miernik HTML - Podstawowe Informacje HTML to hipertekstowy język znaczników (ang. HyperText Markup Language) służacy do tworzenia stron internetowych

Bardziej szczegółowo

Young Programmer: HTML+PHP. Dr inż. Małgorzata Janik, Zajęcia #2

Young Programmer: HTML+PHP. Dr inż. Małgorzata Janik, Zajęcia #2 Young Programmer: HTML+PHP Dr inż. Małgorzata Janik, Zajęcia #2 Ramowy program warsztatów Zajęcia 1: Zajęcia wprowadzające, HTML Zajęcia 2: Style CSS (tabele i kaskadowe arkusze stylów) Zajęcia 3: Podstawy

Bardziej szczegółowo

Tworzenie Stron Internetowych. odcinek 7

Tworzenie Stron Internetowych. odcinek 7 Tworzenie Stron Internetowych odcinek 7 CSS dziedziczenie Drzewo dokumentu Drzewo dokumentu to hierarchia elementów umieszczonych w dokumencie źródłowym HTML. Każdy element w takim drzewie ma dokładnie

Bardziej szczegółowo

Tworzenie Stron Internetowych. odcinek 5

Tworzenie Stron Internetowych. odcinek 5 Tworzenie Stron Internetowych odcinek 5 Nagłówek zawiera podstawowe informacje o dokumencie, takie jak: tytuł strony (obowiązkowy) metainformacje/metadane (obowiązkowa deklaracja

Bardziej szczegółowo

Wprowadzenie do HTML, CSS, JavaScript, PHP. Kurs 18.11 2008 22 12. 2008

Wprowadzenie do HTML, CSS, JavaScript, PHP. Kurs 18.11 2008 22 12. 2008 Wprowadzenie do HTML, CSS, JavaScript, PHP Kurs 18.11 2008 22 12. 2008 Narzędzia do tworzenia i utrzymania dokumentów web owych Edytory HTML Server WWW i baz danych Przeglądarka internetowa kompilator

Bardziej szczegółowo

Programowanie WEB PODSTAWY HTML

Programowanie WEB PODSTAWY HTML Programowanie WEB PODSTAWY HTML Najprostsza strona HTML tytuł strony To jest moja pierwsza strona WWW. tytuł strony

Bardziej szczegółowo

Elementarz HTML i CSS

Elementarz HTML i CSS Elementarz HTML i CSS Znaczniki przydatne w pracy redaktora stron internetowych 1 Elementarz HTML i CSS Znaczniki przydatne w pracy redaktora stron internetowych Treść, korekta, skład i oprawa graficzna

Bardziej szczegółowo

Kurs HTML 4.01 TI 312[01]

Kurs HTML 4.01 TI 312[01] TI 312[01] Spis treści 1. Wiadomości ogólne... 3 2. Wersje języka HTML... 3 3. Minimalna struktura dokumentu... 3 4. Deklaracje DOCTYPE... 3 5. Lista znaczników, atrybutów i zdarzeń... 4 5.1 Lista atrybutów

Bardziej szczegółowo

XHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania.

XHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania. XHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania. Reformuje on znane zasady języka HTML 4 w taki sposób, aby były zgodne z XML (HTML przetłumaczony na XML).

Bardziej szczegółowo

Cel ogólny lekcji: Wprowadzenie do tworzenia stron WWW w języku HTML. Wprowadzenie pojęć: strona WWW, język HTML, dokument HTML.

Cel ogólny lekcji: Wprowadzenie do tworzenia stron WWW w języku HTML. Wprowadzenie pojęć: strona WWW, język HTML, dokument HTML. Piotr Chojnacki IV rok, informatyka chemiczna Liceum Ogólnokształcące Nr I we Wrocławiu Wrocław dn. 23 lutego 2006 roku Czas trwania zajęć: 45 minut, przedmiot: TI Temat lekcji: Pierwsze kroki w języku

Bardziej szczegółowo

HTML (HyperText Markup Language)

HTML (HyperText Markup Language) HTML (HyperText Markup Language) Struktura dokumentu tytuł strony sekcja nagłówka Tutaj wpisujemy

Bardziej szczegółowo

Struktura języka HTML ZNACZNIKI. Oto bardzo prosta strona WWW wyświetlona w przeglądarce: A tak wygląda kod źródłowy takiej strony:

Struktura języka HTML ZNACZNIKI. Oto bardzo prosta strona WWW wyświetlona w przeglądarce: A tak wygląda kod źródłowy takiej strony: Struktura języka HTML ZNACZNIKI Oto bardzo prosta strona WWW wyświetlona w przeglądarce: Rysunek 1: Przykładowa strona wyświetlona w przeglądarce A tak wygląda kod źródłowy takiej strony: Rysunek 2: Kod

Bardziej szczegółowo

Wykład 1 Wprowadzenie do HTML

Wykład 1 Wprowadzenie do HTML Wykład 1 Wprowadzenie do HTML 1. Sieć WWW (World Wide Web) Sieć WWW jest internetowym systemem informacyjnym o charakterze: (1) hipertekstowym, (2) globalnym, (3) interaktywnym (np. zastosowanie formularzy)

Bardziej szczegółowo

p { color: yellow; font-weight:bold; }

p { color: yellow; font-weight:bold; } Barbara Łukawska, Adam Krechowicz, Tomasz Michno Ćwiczenie nr 13: CSS Wstęp Cascading Style Sheets (Kaskadowe Arkusze Styli, w skrócie CSS) jest językiem, który opisuje sposób w jaki będzie wyświetlana

Bardziej szczegółowo

XHTML Budowa strony WWW

XHTML Budowa strony WWW XHTML Budowa strony WWW Wydział Fizyki Politechnika Warszawska 2019 dr inż. Marzena Sala-Tefelska Założenie strony www na serwerze student 1. Tworzymy główny plik o nazwie index.html (plik tekstowy). UWAGA!:

Bardziej szczegółowo

Strony WWW - podstawy języka HTML

Strony WWW - podstawy języka HTML Strony WWW - podstawy języka HTML Jacek Krzaczkowski 2004 r. HTML (Hyper Text Markup Language) jest językiem opisu dokumentu używanym do tworzenia stron WWW. Znaczniki języka HTML informują przeglądarkę

Bardziej szczegółowo

Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp.

Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp. Style CSS Wstęp Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp. Podstawową zaletą i zadaniem stylów jest oddzielenie

Bardziej szczegółowo

Programowanie internetowe

Programowanie internetowe Programowanie internetowe Wykład 1 HTML mgr inż. Michał Wojtera email: mwojtera@dmcs.pl Plan wykładu Organizacja zajęć Zakres przedmiotu Literatura Zawartość wykładu Wprowadzenie AMP / LAMP Podstawy HTML

Bardziej szczegółowo

ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści

ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop. 2012 Spis treści Wstęp 9 1 HTML 5 i XHTML w pytaniach i odpowiedziach 13 Co to jest HTML 5? 13 Co to jest XHTML? 15 Czy strony utworzone w HTML

Bardziej szczegółowo

Tworzenie Stron Internetowych. odcinek 6

Tworzenie Stron Internetowych. odcinek 6 Tworzenie Stron Internetowych odcinek 6 CSS kaskadowe arkusze stylów CSS (Cascading Style Sheets), czyli Kaskadowe Arkusze Stylów "stylów" "arkusze" Reguły opisujące wygląd dokumentu opisanego za pomocą

Bardziej szczegółowo

Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np. <BR>

Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np. <BR> Język html to język znaczników inaczej tagów, czyli słów lub skrótów pochodzących z języka angielskiego ujętych w nawiasy ostrokątne , np.. . W większości przypadków spotykamy znaczniki początku (inaczej

Bardziej szczegółowo

używane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów

używane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów opracowanie I. K. używane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów ISO-8859-2 - norma międzynarodowa określająca sposób kodowania

Bardziej szczegółowo

Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06. Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional).

Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06. Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional). Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06 Moduł 4. Style Zajęcia poświęcone będą kaskadowym arkuszom stylów (por. slajdy 18.-27. z wykładu 2.) Wiele uwagi poświęcaliśmy do tej pory planowaniu szkieletu

Bardziej szczegółowo

Wykład 1 TINT. Wprowadzenie do XHTML. Zofia Kruczkiewicz

Wykład 1 TINT. Wprowadzenie do XHTML. Zofia Kruczkiewicz Wykład 1 TINT Wprowadzenie do XHTML Zofia Kruczkiewicz Sieć WWW (World Wide Web) Sieć WWW jest internetowym systemem informacyjnym o charakterze: hipertekstowym, globalnym, interaktywnym (np. zastosowanie

Bardziej szczegółowo

Po zakończeniu rozważań na temat World Wide Web, poznaniu zasad organizacji witryn WWW, przeczytaniu kilkudziesięciu stron i poznaniu wielu nowych

Po zakończeniu rozważań na temat World Wide Web, poznaniu zasad organizacji witryn WWW, przeczytaniu kilkudziesięciu stron i poznaniu wielu nowych rk Po zakończeniu rozważań na temat World Wide Web, poznaniu zasad organizacji witryn WWW, przeczytaniu kilkudziesięciu stron i poznaniu wielu nowych pojęć, prawdopodobnie zastanawiasz się, kiedy zaczniesz

Bardziej szczegółowo

CSS. Kaskadowe Arkusze Stylów

CSS. Kaskadowe Arkusze Stylów CSS Kaskadowe Arkusze Stylów CSS CSS = Cascading Style Sheets Style określają sposób wyświetlania zawartości elementów HTML Arkusz stylów jest zbiorem takich reguł Pojawiły się w HTML 4.0 by rozwiązać

Bardziej szczegółowo

<html> </html> <body> </body> <p> [</p>] <br> <html> <head> </head> <body> </body> </html> Materiały dydaktyczne 1/5

<html> </html> <body> </body> <p> [</p>] <br> <html> <head> </head> <body> </body> </html> Materiały dydaktyczne 1/5 PODSTAWOWE INFORMACJE HTML (HyperText Mark-up Language) język programowanie, który pozwala na publikowanie treści w sieci WWW. Nie jest to klasyczny język liniowy (w HTML mamy dostęp w każdym miejscu do

Bardziej szczegółowo

za pomocą: definiujemy:

za pomocą: definiujemy: HTML CSS za pomocą: języka HTML arkusza CSS definiujemy: szkielet strony wygląd strony Struktura dokumentu html - znaczniki Znaczniki wyznaczają rodzaj zawartości. element strony

Bardziej szczegółowo

STRONY INTERNETOWE mgr inż. Adrian Zapała

STRONY INTERNETOWE mgr inż. Adrian Zapała 1 STRONY INTERNETOWE mgr inż. Adrian Zapała STRONY INTERNETOWE Rodzaje stron internetowych statyczne (statyczny HTML + CSS) dynamiczne (PHP, ASP, technologie Flash) 2 JĘZYKI STRON WWW HTML (ang. HyperText

Bardziej szczegółowo

Podstawowe znaczniki języka HTML.

Podstawowe znaczniki języka HTML. Podstawowe znaczniki języka HTML. Struktura dokumentu. Sposób użycia i dokumentu. Między nimi umieszczana jest cała treść dokumentu. Sposób użycia Sekcja HEAD zawiera podstawowe

Bardziej szczegółowo

Kaskadowość stylów określa pierwszeństwo w oddziaływaniu na te same elementy strony różnych stylów.

Kaskadowość stylów określa pierwszeństwo w oddziaływaniu na te same elementy strony różnych stylów. Kaskadowe arkusze stylów Kaskadowe arkusze stylów CSS (Cascading Style Sheets) służą do definiowania sposobu wyświetlania elementów HTML. Pozwalają np. określać rozmiar i kolor czcionki, definiować odstępy

Bardziej szczegółowo

Witryny i aplikacje internetowe

Witryny i aplikacje internetowe Test z przedmiotu Witryny i aplikacje internetowe Zadanie 1 Kod języka HTML przedstawi tabelę składającą się z dwóch

Bardziej szczegółowo

Ćwiczenie 10 - Selektory

Ćwiczenie 10 - Selektory Ćwiczenie 10 - Selektory Wprowadzenie: W tym ćwiczeniu uwaga skupiona będzie na selektorach, czyli tych elementach w kodzie źródłowym dokumentu HTML, którym będą przypisywane atrybuty formatowania, zmieniające

Bardziej szczegółowo

Cel ogólny lekcji: Wprowadzenie dodatkowych znaczników. Wprowadzenie odsyłacza, tabeli, listy numerowanej i wypunktowanej.

Cel ogólny lekcji: Wprowadzenie dodatkowych znaczników. Wprowadzenie odsyłacza, tabeli, listy numerowanej i wypunktowanej. Piotr Chojnacki IV rok, informatyka chemiczna Liceum Ogólnokształcące Nr I we Wrocławiu Wrocław dn. 26 lutego 2006 roku Czas trwania zajęć: 90 minut, przedmiot: TI Temat lekcji: Tworzenie strony internetowej

Bardziej szczegółowo

Tworzenie stron internetowych w kodzie HTML Cz 5

Tworzenie stron internetowych w kodzie HTML Cz 5 Tworzenie stron internetowych w kodzie HTML Cz 5 5. Tabele 5.1. Struktura tabeli 5.1.1 Odcięcia Microsoft Internet Explorer 7.0 niepoprawnie interpretuje białe znaki w komórkach tabeli w przypadku tworzenia

Bardziej szczegółowo

Za pomocą atrybutu ROWS moŝemy dokonać podziału ekranu w poziomie. Odpowiedni kod powinien wyglądać następująco:

Za pomocą atrybutu ROWS moŝemy dokonać podziału ekranu w poziomie. Odpowiedni kod powinien wyglądać następująco: 1 1. Ramki Najbardziej elastycznym sposobem budowania stron jest uŝycie ramek. Ułatwiają one nawigowanie w wielostronicowych dokumentach HTML, poprzez podział ekranu na kilka obszarów. KaŜdy z nich zawiera

Bardziej szczegółowo

rk HTML 4 a 5 różnice

rk HTML 4 a 5 różnice rk HTML 4 a 5 różnice kompatybilność Pierwszym dużym plusem języka HTML 5 jest to, że jest zdefiniowany w sposób umożliwiający kompatybilność wstecz. Składnia Przykład dokumentu podporządkowującego się

Bardziej szczegółowo

Ćwiczenie 2 Tekst podstawowe znaczniki.

Ćwiczenie 2 Tekst podstawowe znaczniki. Ćwiczenie 2 Tekst podstawowe znaczniki. Ćwiczenie 2 poświęcone jest formatowaniu tekstu za pomocą znaczników. AŜeby uzyskać poŝądany wygląd tekstu musimy posłuŝyć się określonymi znacznikami. Ćwiczenie

Bardziej szczegółowo

Dokument hipertekstowy

Dokument hipertekstowy Dokument hipertekstowy Laboratorium 4 CSS mgr inż. Krzysztof Wróbel Katedra Lingwistyki Komputerowej Cel poznanie konceptu stylów tworzenie różnych typów reguł stylów Style służą do zmiany wyglądu elementów

Bardziej szczegółowo

Przedmiot: Grafika komputerowa i projektowanie stron WWW

Przedmiot: Grafika komputerowa i projektowanie stron WWW KARKONOSKA PAŃSTWOWA SZKOŁA WYŻSZA Kierunek: Dziennikarstwo i komunikacja społeczna Przedmiot: Grafika komputerowa i projektowanie stron WWW 1 opracował: dr inż. Jerzy Januszewicz HTML (HyperText Markup

Bardziej szczegółowo

Tekst podstawowe znaczniki

Tekst podstawowe znaczniki Wyświetlanie Tekst podstawowe znaczniki Język HTML przewiduje dwa podstawowe modele wyświetlania treści znaczników: w bloku - podczas wyświetlania bloku w przeglądarce, automatycznie dodawane są znaki

Bardziej szczegółowo

Ćwiczenie 1 Deklarowanie metainformacji.

Ćwiczenie 1 Deklarowanie metainformacji. Zadania do wykonania: Ćwiczenie 1 Deklarowanie metainformacji. Ćwiczenie 1 poświęcone jest wypełnieniu części dokumentu HTML. Umieszczamy w niej wszystkie informacje dodatkowe interpretowane przez

Bardziej szczegółowo

Programy dedykowane do edycji stron internetowych dzielą się na dwa rodzaje:

Programy dedykowane do edycji stron internetowych dzielą się na dwa rodzaje: HTML - język www. 1. HTML i XHTML HTML (Hypertext Markup Language - hipertekstowy język znaczników) to język opisu stron internetowych, przeznaczony do tworzenia dokumentów tekstowych w formacie zrozumiałym

Bardziej szczegółowo

TWORZENIE STRON WWW. Zasady opisu stron w języku HTML:

TWORZENIE STRON WWW. Zasady opisu stron w języku HTML: TWORZENIE STRON WWW Strony WWW definiowane są za pomocą języków opisu stron. Najpopularniejszym językiem tego typu jest język HTML (Hyper Text Markup Language). Zasady opisu stron w języku HTML: - opis

Bardziej szczegółowo

Można też ściągnąć np. z: http://portableapps.com/apps/development/notepadpp_portable

Można też ściągnąć np. z: http://portableapps.com/apps/development/notepadpp_portable W zadaniach można używać programu Notepad++ (jest wygodny, ponieważ m.in. koloruje składnię i uzupełnia funkcje) albo też jakiegoś innego edytora zainstalowanego w systemie (np. notatnika). Najnowszą,

Bardziej szczegółowo

Tworzenie Stron Internetowych. odcinek 6

Tworzenie Stron Internetowych. odcinek 6 Tworzenie Stron Internetowych odcinek 6 CSS kaskadowe arkusze stylów CSS (Cascading Style Sheets), czyli Kaskadowe Arkusze Stylów "stylów" "arkusze" Reguły opisujące wygląd dokumentu opisanego za pomocą

Bardziej szczegółowo

I. Formatowanie tekstu i wygląd strony

I. Formatowanie tekstu i wygląd strony I. Formatowanie tekstu i wygląd strony Akapit: ... aby wyrównać tekst do lewego marginesu aby wyrównać tekst do prawego marginesu:

Bardziej szczegółowo

Narzędzia informatyczne w językoznawstwie

Narzędzia informatyczne w językoznawstwie Narzędzia informatyczne w językoznawstwie HTML i XHTML Marcin Junczys-Dowmunt junczys@amu.edu.pl Zakład Logiki Stosowanej http://www.logic.amu.edu.pl 17. października 2007 Marcin Junczys-Dowmunt Narzędzia

Bardziej szczegółowo

PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński

PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński PROGRAMOWANIE HTML W składni języka HTML wykorzystuje się charakterystyczne znaczniki. Każdy z nich zaczyna się i kończy ostrokątnym nawiasem a pomiędzy nimi znajduje się wyrażenie html. Rozróżniamy znaczniki

Bardziej szczegółowo

Można też ściągnąć np. z: http://portableapps.com/apps/development/notepadpp_portable

Można też ściągnąć np. z: http://portableapps.com/apps/development/notepadpp_portable W zadaniach można używać programu Notepad++ (jest wygodny, ponieważ m.in. koloruje składnię i uzupełnia funkcje) albo też jakiegoś innego edytora zainstalowanego w systemie (np. notatnika). Najnowszą,

Bardziej szczegółowo

O stronach www, html itp..

O stronach www, html itp.. O stronach www, html itp.. Prosty wstęp do podstawowych technik spotykanych w internecie 09.01.2015 M. Rad Plan wykładu Html Przykład Strona www Xhtml Css Php Js HTML HTML - (ang. HyperText Markup Language)

Bardziej szczegółowo

HTML jak zrobić prostą stronę www

HTML jak zrobić prostą stronę www HTML jak zrobić prostą stronę www Z tej prezentacji dowiemy się: - co to jest HTML - jak znając podstawy HTML'a zrobić prostą stronę Co to jest HTML? HTML = HyperText Markup Language, czyli język znaczników

Bardziej szczegółowo

Hyper Text Markup Language

Hyper Text Markup Language Podstawy projektowania dokumentów WWW Język znaczników HTML Hyper Text Markup Language Język słuŝący do zapisu dokumentów WWW. Opisuje wygląd dokumentu i definiuje łączniki hipertekstowe, pozwalające na

Bardziej szczegółowo

Podstawy tworzenia stron internetowych

Podstawy tworzenia stron internetowych Podstawy tworzenia stron internetowych HTML Wstęp Do edycji stron HTML (Hyper Text Markup Language) można wykorzystać dowolny edytor tekstowy (np. Notatnik) umożliwiający edycję zwykłych plików tekstowych.

Bardziej szczegółowo

Języki programowania wysokiego poziomu. HTML cz.1.

Języki programowania wysokiego poziomu. HTML cz.1. Języki programowania wysokiego poziomu HTML cz.1. Struktura dokumentu html Dokument HTML ma postać:

Bardziej szczegółowo

Jednostki miar stosowane w CSS

Jednostki miar stosowane w CSS Wprowadzenie CSS (ang. Cascading Style Sheets) jest językiem służącym do opisu sposobu prezentowania informacji na stronach WWW, który został opracowany przez organizację W3C. Często skrót ten tłumaczony

Bardziej szczegółowo

Podstawy HTML i styli CSS. selektor {właściwość1: wartość1; właściwość2: wartość2}

Podstawy HTML i styli CSS. selektor {właściwość1: wartość1; właściwość2: wartość2} Kaskadowe arkusze stylów (CSS) W trakcie projektowania własnego serwisu w języku HTML napotkamy problem z określeniem precyzyjnego pozycjonowania tekstu i grafiki oraz elastycznym formatowaniem tekstu.

Bardziej szczegółowo

Blok dokumentu. <div> </div>

Blok dokumentu. <div> </div> Blok dokumentu Polecenie div (blok, sekcja) jest jednym z najbardziej fundamentalnym poleceń języka HTML, które odgrywa kluczową rolę w grupowaniu wielu różnych elementów i pozycjonowaniu większych fragmentów

Bardziej szczegółowo

Wykład 2 TINT. XHTML tabele i ramki. Zofia Kruczkiewicz

Wykład 2 TINT. XHTML tabele i ramki. Zofia Kruczkiewicz Wykład 2 TINT XHTML tabele i ramki Zofia Kruczkiewicz 1. Tabele 1.1. Przykład tabeli zawierającej kalendarz na miesiąc marzec ... definiuje tabelę Atrybuty: border ="" obramowanie tabeli,

Bardziej szczegółowo

Politechnika Gdańska Wydział Elektrotechniki i Automatyki Kierunek: Automatyka i Robotyka Studia stacjonarne I stopnia: rok I, semestr II

Politechnika Gdańska Wydział Elektrotechniki i Automatyki Kierunek: Automatyka i Robotyka Studia stacjonarne I stopnia: rok I, semestr II SIECI KOPMPUTEROWE I TECHNOLOGIE INTERNETOWE (SKiTI) Wykład 11 Wprowadzenie do (X)HTML Politechnika Gdańska Wydział Elektrotechniki i Automatyki Kierunek: Automatyka i Robotyka Studia stacjonarne I stopnia:

Bardziej szczegółowo

2 Podstawy tworzenia stron internetowych

2 Podstawy tworzenia stron internetowych 2 Podstawy tworzenia stron internetowych 2.1. HTML5 i struktura dokumentu Podstawą działania wszystkich stron internetowych jest język HTML (Hypertext Markup Language) hipertekstowy język znaczników. Dokument

Bardziej szczegółowo

PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński

PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński PROGRAMOWANIE KASKADOWE ARKUSZE STYLÓW CASCADING STYLE SHEETS Za pomocą HTML tworzymy strukturę dokumentu, jego elementy oraz treść CSS służy do opisu wyglądu struktury dokumentu, elementów oraz treści

Bardziej szczegółowo

Podstawy JavaScript ćwiczenia

Podstawy JavaScript ćwiczenia Podstawy JavaScript ćwiczenia Kontekst:

Bardziej szczegółowo

Systemy internetowe Wykład 2 CSS

Systemy internetowe Wykład 2 CSS Systemy internetowe Wykład 2 CSS CSS - definicja CSS (Cascading Style Sheets) kaskadowe arkusze stylów CSS - język opisujący w jaki sposób elementy HTML będą wyświetlane na ekranie komputera, tabletu,

Bardziej szczegółowo

Projekty z Technologii Informacyjnych

Projekty z Technologii Informacyjnych Projekty z Technologii Informacyjnych Zad. 1. Opracuj prezentację w programie PowerPoint lub podobnym na zadany temat. Prezentacja powinna być przeznaczona do prezentowania w czasie ok. 10 minut. Zad.

Bardziej szczegółowo

WYMAGANIA EDUKACYJNE. Witryny i Aplikacje Internetowe klasa I

WYMAGANIA EDUKACYJNE. Witryny i Aplikacje Internetowe klasa I WYMAGANIA EDUKACYJNE Witryny i Aplikacje Internetowe klasa I Dopuszczający definiuje pojęcia: witryna, portal, wortal, struktura witryny internetowej; opisuje rodzaje grafiki statycznej wymienia i charakteryzuje

Bardziej szczegółowo

Nazwa implementacji: CSS i box model. Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie.

Nazwa implementacji: CSS i box model. Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie. Nazwa implementacji: CSS i box model Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie. Wprowadzenie CSS (kaskadowe arkusze stylów, ang. Cascading

Bardziej szczegółowo

CSS Kaskadowe Arkusze Stylów

CSS Kaskadowe Arkusze Stylów Wprowadzenie CSS Kaskadowe Arkusze Stylów CSS (ang. Cascading Style Sheets, kaskadowe arkusze stylów) są językiem opisu stylów używanym do opisu prezentacji dokumentu napisanego w HTML-u lub XML-u (włączając

Bardziej szczegółowo

Odsyłacze. Style nagłówkowe

Odsyłacze. Style nagłówkowe Odsyłacze ... polecenie odsyłcza do dokumentu wskazywanego przez url. Dodatkowym parametrem jest opcja TARGET="...", która wskazuje na miejsce otwarcia wskazywanego dokumentu, a jej parametrami

Bardziej szczegółowo

Format HTML. Wybrane działy Informatyki Stosowanej. Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty

Format HTML. Wybrane działy Informatyki Stosowanej. Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty Wybrane działy Informatyki Stosowanej Format HTML Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty dr hab. inż. Andrzej Czerepicki 2019 Definicja HTML HyperText Markup Language

Bardziej szczegółowo

Akademia Techniczno-Humanistyczna w Bielsku-Białej

Akademia Techniczno-Humanistyczna w Bielsku-Białej Akademia Techniczno-Humanistyczna w Bielsku-Białej Wydział Budowy Maszyn i Informatyki Laboratorium z sieci komputerowych Ćwiczenie numer: 8 Temat ćwiczenia: Tworzenie stron WWW (HTML, skrypty CSS). 1.

Bardziej szczegółowo

LABORATORIUM 5 WSTĘP DO SIECI TELEINFORMATYCZNYCH WPROWADZENIE DO XML I XSLT

LABORATORIUM 5 WSTĘP DO SIECI TELEINFORMATYCZNYCH WPROWADZENIE DO XML I XSLT LABORATORIUM 5 WSTĘP DO SIECI TELEINFORMATYCZNYCH WPROWADZENIE DO XML I XSLT 1. Wstęp XML (Extensible Markup Language Rozszerzalny Język Znaczników) to język formalny przeznaczony do reprezentowania danych

Bardziej szczegółowo

Uwaga: znaczniki <body> </body> nie powinny byd umieszczane na stronie zawierającej ramki, w ramach FRAMESET.

Uwaga: znaczniki <body> </body> nie powinny byd umieszczane na stronie zawierającej ramki, w ramach FRAMESET. * HTML + Wstęp do HTML Dokument HTML jest plikiem tekstowym, który zawiera znaczniki, zwane inaczej tagami, i stanowią język HTML. Same składają się z nawiasów kątowych, między którymi znajdują się ściśle

Bardziej szczegółowo

Technologie Informacyjne

Technologie Informacyjne Technologie Informacyjne Wykªad 6 Paweª Witkowski MIM UW Wiosna 2013 P. Witkowski (MIM UW) Technologie Informacyjne Wiosna 2013 1 / 18 HTML HyperText Markup Language J zyk oparty na znacznikach Opisuje

Bardziej szczegółowo

Pierwsza strona internetowa

Pierwsza strona internetowa HTML i CSS Pierwsza strona internetowa Rozpoczynając pracę na swoim komputerze powinieneś posiadać: dowolny edytor tekstowy (np. Notatnik), dostęp do Internetu, Microsoft Visual Studio. Podstawy formatowania

Bardziej szczegółowo

Języki programowania wysokiego poziomu WWW

Języki programowania wysokiego poziomu WWW Języki programowania wysokiego poziomu WWW Zawartość Protokół HTTP Języki HTML i XHTML Struktura dokumentu html: DTD i rodzaje html; xhtml Nagłówek html - kodowanie znaków, język Ciało html Sposób formatowania

Bardziej szczegółowo

Języki programowania wysokiego poziomu. CSS Wskazówki

Języki programowania wysokiego poziomu. CSS Wskazówki Języki programowania wysokiego poziomu CSS Wskazówki CSS powinno się projektować hierarchicznie, zaczynając od elementów ogólniejszych, kończąc na szczegółowych - Źle: p.mid { text-align: center; p { color:

Bardziej szczegółowo

Tworzenie Stron Internetowych. odcinek 5

Tworzenie Stron Internetowych. odcinek 5 Tworzenie Stron Internetowych odcinek 5 Nagłówek zawiera podstawowe informacje o dokumencie, takie jak: tytuł strony (obowiązkowy) metainformacje/metadane (obowiązkowa deklaracja

Bardziej szczegółowo

EGZAMIN POTWIERDZAJĄCY KWALIFIKACJE W ZAWODZIE Rok 2016 CZĘŚĆ PRAKTYCZNA

EGZAMIN POTWIERDZAJĄCY KWALIFIKACJE W ZAWODZIE Rok 2016 CZĘŚĆ PRAKTYCZNA Arkusz zawiera informacje prawnie Układ graficzny CKE 2016 chronione do momentu rozpoczęcia egzaminu CENTRALNA KOMISJA EGZAMINACYJNA Nazwa kwalifikacji: Twmzenie aplikacji internetowych i baz danych oraz

Bardziej szczegółowo

Tworzenie stron internetowych w oparciu o język HTML

Tworzenie stron internetowych w oparciu o język HTML Ćwiczenie 1 Temat: Tworzenie stron internetowych w oparciu o język HTML Cel ćwiczenia: Celem ćwiczenia jest zapoznanie studenta z technologią tworzenia stron internetowych z wykorzystaniem języka HTML.

Bardziej szczegółowo

LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH

LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH KASKADOWE ARKUSZE STYLÓW (Cascading Style Sheets) 1. Wprowadzenie Selektory należą do kluczowych pojęć, wskazują obiekty, którym przypisujemy jakiś zestaw

Bardziej szczegółowo

WITRYNY I APLIKACJE INTERNETOWE

WITRYNY I APLIKACJE INTERNETOWE WITRYNY I APLIKACJE INTERNETOWE TECHNIKUM INFORMATYCZNE wg programu 351203 KLASA II 3 godz. tygodniowo 90 godziny Liczba godzin w cyklu kształcenia 180 rok szkolny 2013/2014 Sylwia Płonka 2. W 1980 fizyk

Bardziej szczegółowo

Wybrane znaczniki HTML

Wybrane znaczniki HTML Wybrane znaczniki HTML Struktura dokumentu HTML informacje o dokumencie i plikach zewnętrznych zawartość wyświetlana w przeglądarce wraz z tagami formatującymi

Bardziej szczegółowo

AUDYT DOSTĘPNOŚCI STRONY INTERNETOWEJ

AUDYT DOSTĘPNOŚCI STRONY INTERNETOWEJ Poznań, 2012-10-04 AUDYT DOSTĘPNOŚCI STRONY INTERNETOWEJ NAZWA ADRES STRONY ILOŚĆ BŁĘDÓW WCAG 33 ILOŚĆ OSTRZEŻEŃ WCAG 3 TYP DOKUMENTU UŻYTY FORMAT (X)HTML JĘZYK OWANIE STRONY Urząd Marszałkowski Województwa

Bardziej szczegółowo

Język HTML i podstawy CSS

Język HTML i podstawy CSS 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

Bardziej szczegółowo

Moduł IV Internet Tworzenie stron www

Moduł IV Internet Tworzenie stron www Ze strony internetowej www.kaze.zut.edu.pl z folderu BUDOWA JACHTÓW pobierz i zapisz je do własnego folderu następujące pliki: znak_drogowy.png, morze.jpg, logo_ecdl.gif, logobj.png ZADANIE 1 Podstawy

Bardziej szczegółowo

I. Dlaczego standardy kodowania mailingów są istotne?

I. Dlaczego standardy kodowania mailingów są istotne? 1 Tabela zawartości: I. Dlaczego standardy kodowania mailingów są istotne? 3 II. Budowa nagłówka wiadomości. 4 III. Style kaskadowe CSS. 4 IV. Elementarna budowa szablonu. 6 V. Podsumowanie. 9 2 I. Dlaczego

Bardziej szczegółowo

Laboratorium 1: Szablon strony w HTML5

Laboratorium 1: Szablon strony w HTML5 Laboratorium 1: Szablon strony w HTML5 Czas realizacji: 2 godziny Kurs: WYK01_HTML.pdf, WYK02_CSS.pdf Pliki:, Edytor: http://www.sublimetext.com/ stabilna wersja 2 (portable) Ćwiczenie 1. Szablon strony

Bardziej szczegółowo

Edukacja na odległość

Edukacja na odległość Ćwiczenie 2. Edukacja na odległość Obsługa konta WWW na serwerze Linuksowym Tworzenie portalu edukacyjnego o określonej, wybranej przez studenta tematyce naukowej. Cel ćwiczenia: Projektowanie strony czołowej

Bardziej szczegółowo