HTML. Barbara Kołodziejczak
|
|
- Teresa Aleksandra Gajda
- 8 lat temu
- Przeglądów:
Transkrypt
1 HTML HTML (ang. Hyper Text Markup Language, pl. hipertekstowy język znaczników), to język składający się ze znaczników (ang. tags) oraz reguł ich poprawnego stosowania (gramatyki, syntaktyki), stosowany do pisania stron WWW. 1
2 EDYTOR Dokument HTML jest zwykłym plikiem tekstowym, w którym znajdują się polecenia HTML. Wynika stąd, że dokument taki można utworzyć za pomocą najprostszego edytora tekstów, ręcznie dodając znaczniki. Metoda taka, choć skuteczna, byłaby jednak zbyt uciążliwa. Dlatego na rynku pojawiło się już wiele specjalizowanych edytorów, które wydatnie ułatwiają konstruowanie dokumentu, wspomagając wprowadzanie poleceń. Są to zazwyczaj programy klasy shareware, aczkolwiek znajdziemy też sporo programów komercyjnych i całkowicie bezpłatnych (freeware). 2
3 Struktura dokumentu Dokument HTML jest zwykłym dokumentem tekstowym o ustalonym kodowaniu znaków składającym się z elementów /tagów/ znaczników. Element zwykle składa się z trzech części: a) znacznika początkowego (w formie <znacznik>), b) zawartości elementu (tekst lub inne elementy), c) znacznika końcowego (w formie </znacznik>) Znacznik nie jest widoczny na ekranie, widoczne są tylko efekty jego działania (np. wstawienie obrazka). 3
4 Struktura dokumentu W języku XHTML wszystkie znaczniki muszą być pisane obowiązkowo małymi literami. Dlatego zalecam już od początku uczyć się właśnie tej zasady! Znaczniki mogą też mieć przypisane atrybuty precyzujące opis danego elementu. Atrybuty wraz z ich wartościami wpisuje się wewnątrz znacznika początkowego : <znacznik atrybut="wartość" atrybut2="wartość2"... atrybutn="wartośćn"> 4
5 OSNOWA DOKUMENTU Wszystkie polecenia powinny się znaleźć w pewnych standardowych ramach. Zostało przyjęte, że dokument HTML zawiera szkielet, który stanowi osnowę dla wszystkich innych poleceń. Spotyka się wprawdzie w Internecie strony, które szkieletu nie zawierają (czasem tylko jego część), ale odradzamy taką praktykę, gdyż w pewnych okolicznościach może ona zaowocować niespodziewanymi efektami. 5
6 OSNOWA DOKUMENTU Wygląda to następująco: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > <html xmlns=" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <meta name="description" content="tu wpisz opis zawartości strony" /> <meta name="keywords" content="tu wpisz wyrazy kluczowe rozdzielone przecinkami" /> <title>tu wpisz tytuł strony</title> </head> <body> Tu wpisuje się treść strony </body> </html> Większość edytorów HTML przy tworzeniu nowego dokumentu automatycznie wpisuje własny szablon dokumentu (jak powyżej lub zbliżony) 6
7 OSNOWA DOKUMENTU Pierwszy znacznik <!DOCTYPE html PUBLIC to deklaracja typu dokumentu (DTD - document type declaration) określająca poziom użytego na stronie języka HTML. Może występować w 3 wersjach: 1. Strict DTD - (ścisła) zawiera wszystkie elementy i atrybuty, które nie są zdeprecjonowane (nie deprecated) oraz nie pojawiają się w dokumentach z ramkami (ponadto nie obejmuje elementu IFRAME ani atrybutu target="...") <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> lub <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " 7
8 OSNOWA DOKUMENTU 2. Transitional DTD - (przejściowa) lub inaczej loose DTD ("luźna") - zawiera wszystko co w Strict DTD plus elementy i atrybuty zdeprecjonowane oraz element IFRAME i atrybut target="... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 3. Frameset DTD - (dla ramek) zawiera wszystko co w Transitional DTD plus elementy odnoszące się do ramek: FRAME, FRAMESET oraz NOFRAMES (używane na stronach startowych ramek) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> lub <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " 8
9 POLECENIE <title> Między znacznikami <head> i </head> powinno się znaleźć polecenie <title> </title>. <head> <title>tytuł strony</title> </head> TITLE nie oznacza wcale tytułu na stronie. Zawarta między tymi znacznikami treść ukaże się w pasku tytułowym przeglądarki, a nie w dokumencie. Na przykład: <head> <title>kurs języka HTML - poradnik webmastera: HTML dla bardzo początkujących</title> </head> 9
10 ZADANIE 1 Plik szablon.html otwórz w edytorze ked. Skopiuj poniższy tekst między znaczniki <title> i </title> i zapisz plik pod nazwą zadanie1.html. Otwórz plik przy pomocy przeglądarki Internet Explorer lub Firefox i zaobserwuj gdzie pojawił się tekst Podstawy języka HTML - poradnik webmastera: HTML dla bardzo początkujących". Tekst do skopiowania Podstawy języka HTML - poradnik webmastera: HTML dla bardzo początkujących 10
11 INFORMACJA META Drugim bardzo ważnym elementem jest informacja o stronie kodowej dokumentu. Zaleca się stosowanie strony kodowej ISO (czyli ISO Latin 2). Jest to międzynarodowy standard, a "przy okazji" także Polska Norma. Zapis informacji wygląda następująco: <meta http-equiv="content-type" content="text/html; charset=iso "> Można też stosować zapis: <meta http-equiv="content-language" content="pl" /> 11
12 ZADANIE 2 Wróć do edytora ked i popraw w pliku zadanie1.html ustawienia dotyczące języka - w znaczniku meta zmień stronę kodową charset=iso na charset=iso W treści strony wprowadź polskie znaki diakrytyczne. Zapisz plik i sprawdź, czy polskie litery są poprawnie wyświetlane w przeglądarce. 12
13 KOLOR TŁA DOKUMENTU Gdy w dokumencie znajduje się para znaczników <body> i </body>, możemy zdefiniować kolor tła dokumentu. Gdybyśmy tego nie uczynili, tło będzie miało taki kolor, jaki został domyślnie przyjęty w przeglądarce WWW (zazwyczaj biały). Możemy wstawić polecenie: <body bgcolor="kolor"> przy czym "kolor" może być podany imiennie (np. red, green, black, white) lub za pomocą wartości heksadecymalnych (szesnastkowych), tak jak w przypadku koloru czcionki - #FF0000, #008000, #000000, #FFFFFF. Sugerujemy używanie wartości heksadecymalnych, jako bardziej uniwersalnych (tabela kolorów) 13
14 KOLOR TŁA DOKUMENTU Atrybut bgcolor jest zdeprecjonowany przez specyfikację HTML zaleca się stosowanie stylów. Lepiej zatem użyć polecenia: <body style="background-color: kolor; "> Pamiętaj, że nie powinno się używać barw bardzo jaskrawych jako kolory tła. Sprawiają one, że oczy szybko się męczą i dodatkowo zaciemniają treść strony. Dodatkowo należy pamiętać, aby na ustalonym kolorze tła, tekst był dobrze widoczny. 14
15 ZADANIE 3 Otwórz plik zadanie1.html i zapisz go pod nazwą zadanie3.html. Pomiędzy znacznikami <body> </body> zdefiniuj kolor żółty tła strony i obejrzyj efekt w przeglądarce. Następnie zdefiniuj inny kolor przy pomocy kodu RGB. Skorzystaj z tabeli kolorów. 15
16 OBRAZ JAKO TŁO DOKUMENTU Tłem dokumentu może być również obraz. Należy pamiętać, żeby obrazek w tle nie był zbyt jaskrawy. Spowoduje to tylko zaciemnienie zawartości strony i utrudni czytanie. Postać polecenia: <body style="background-image: url(ścieżka dostępu do obrazka/nazwa_obrazka);"> Jako "ścieżka dostępu do obrazka" należy podać miejsce, gdzie znajduje się obrazek (jeśli jest to inny katalog niż ten w którym zapisaliśmy stronę). Dzięki atrybutowi background-repeat możliwe jest powtarzanie obrazka w pionie lub poziomie. Zainteresowanym polecam stronę kursu html: 16
17 ZADANIE 4 Otwórz plik zadanie3.html i zapisz go pod nazwą zadanie4.html. Pomiędzy znacznikami <body> </body> zdefiniuj obrazkowe tło strony. Jako tło wykorzystaj plik kotschred.jpg z folderu grafika. Obejrzyj efekt w przeglądarce. 17
18 Tytuł W dokumentach często wprowadzamy tytuły. Służy do tego polecenie <hn> </hn>. Znak h oznacza header, natomiast cyfra n to stopień tytułu (mamy ich sześć). Polecenie wprowadzające tytuł stopnia pierwszego składa się ze znacznika otwierającego <h1> i zamykającego </h1>. Jak wspomnieliśmy wyżej, dysponujemy sześcioma stopniami tytułów, różniącymi się w przeglądarce wielkością znaków. Wprowadzamy je za pomocą poleceń h1, h2 itd. 18
19 Tytuł Tytuł stopnia pierwszego Tytuł stopnia drugiego Tytuł stopnia trzeciego Tytuł stopnia czwartego Tytuł stopnia piątego Tytuł stopnia szóstego 19
20 ZADANIE 5 Otwórz plik zadanie3.html i zapisz pod nazwą zadanie5.html. Pomiędzy znacznikami body zdefiniuj tytuły stopnia od 1 do 6. 20
21 AKAPIT I WIERSZ Jak wprowadzać do dokumentu "zwykły" tekst? W zasadzie każdy tekst, który nie jest objęty specjalnym znacznikiem, jest interpretowany jako "masa tekstowa". Gdybyśmy jednak 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 i wyświetli jednolity blok tekstu. Aby naprawdę rozdzielić akapity, należy się posłużyć poleceniem <p> (p = paragraph), które wstawi interlinie między poszczególne fragmenty tekstu. Znacznik akapitu zamykamy ma postać </p>. 21
22 AKAPIT I WIERSZ Przykład: <p>to jest treść pierwszego akapitu</p> <p>to jest treść drugiego akapitu</p> 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ół wprowadzając dodatkową interlinię. To jest pierwszy wiersz <br /> To jest drugi wiersz <br /> To jest trzeci wiersz <br /> To jest czwarty wiersz <br /> Ponadto polecenie <br /> ma jeszcze jedną zaletę. Napisanie kilku kolejnych <br /> pozwala poszerzyć pionowy odstęp między elementami. 22
23 ZADANIE 6 Otwórz plik zadanie5.html i zapisz go pod nazwą zadanie6.html. Pomiędzy znacznikami <body> </body> pozostaw tylko tytuł pierwszego poziomu, a pod nim wklej teksty z pliku teksty.txt. Teksty podziel na 4 akapity oddzielone jedną linią odstępu. 23
24 POZIOMA LINIA Następnym, 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ę rozdzielając nią logiczne fragmenty tekstu, dzięki czemu strona jest bardziej przejrzysta. Linii możemy nadać atrybuty: o grubość w pikselach <hr size= 5 /> o długość określoną w pikselach <hr width= 300 /> o lub w procencie szerokości strony <hr width= 50% /> o wyrównanie na stronie (domyślnie na środku) <hr align= left /> Atrybuty można łączyć, np.: <hr align= right size= 8 width= 200 color= red /> 24
25 ZADANIE 7 Otwórz plik zadanie6.html Między akapity wstaw poziomą linię o następującym formatowaniu: o linia 1: o grubości 4px, w kolorze brązowym, 100% szerokości strony, o linia 2: o grubości 2 px, w kolorze zielonym, 50% szerokości strony, wyrównana do prawej strony, o linia 3: o grubości 10px, w kolorze czerwonym, szerokości 300px, wyrównana do lewej strony. Zapisz plik jako zadanie7.html. 25
26 ATRYBUTY CZCIONKI Gdyby autorowi strony znudził się tekst, w którym czcionka ma ten sam kolor i wielkość, zawsze może się posłużyć dodatkowymi poleceniami, zmieniającymi obie cechy. W dokumentach HTML stosuje się nieco inną definicję wielkości czcionki niż przyjęta w edytorach tekstów. Podstawowa czcionka ma wielkość 3 jednostek (nie mylić z wielkością w punktach typograficznych) i jest zazwyczaj wyświetlana w przeglądarkach WWW jako czcionka punktowa. Przeglądarki pozwalają na ogół zdefiniować, jaka wartość punktowa odpowiada czcionce o wielkości 3. W dokumencie możemy stosować czcionkę o wielkości od 1 do 7. Im większa wartość, tym większa czcionka w przeglądarce. 26
27 ATRYBUTY CZCIONKI Atrybuty czcionki Rozmiar, kolor, tło i krój czcionki można określić w stylach znacznika <p>...</p> o o o o font-size - rozmiar czcionki można podać w wielkościach absolutnych (od xx-small do xx-large), punktach - pt, pikselach - px i jednostkach metrycznych, np. 1cm color - kolor czcionki background-color kolor tła font-family - krój czcionki Przykład <p style= color: navy; background-color: gray; font-size: 15pt; font-family:helvetica;"> jakiś tekst </p> 27
28 WYRÓŻNIANIE TEKSTU Wciąż można korzystać ze starych znaczników wyróżniania tekstu: o <b> tekst pogrubiony </b> o <i> tekst pochylony </i> o <u> tekst podkreślony </u> o <strike> tekst przekreślony </strike> o <tt> tekst maszynowy </tt> o <sup> indeks górny </sup> o <sub> indeks dolny </sub> o <blink> tekst migający </blink> 28
29 WYRÓŻNIANIE TEKSTU Wyróżnienie tekstu o text-decoration: dekoracja gdzie jako "dekoracja" należy podać: none - bez zmian underline - podkreślenie line-through - przekreślenie overline - nadkreślenie blink - migotanie tekstu (tylko Netscape/Mozilla/Firefox i Opera 7) Przykład <p style= color: navy; font-size: 15pt; font-decoration: underline;"> jakiś tekst </p> 29
30 WYRÓŻNIANIE TEKSTU Wyróżnienie tekstu wygląd czcionki o font-style: wartości gdzie jako wartości" można podać: normal - bez zmian italic - kursywa oblique - pochylony Przykład <p style= color: black; font-style: italic; > jakiś tekst </p> 30
31 WYRÓŻNIANIE TEKSTU Wyróżnienie tekstu grubość czcionki o font-weight: wartości gdzie jako wartości" można podać: normal bold - pogrubiona wartość liczbowa 100, 200,, 900 Przykład <p style= color: grey; font-weight: bold; > jakiś tekst </p> 31
32 WYRÓWNANIE TEKSTU Wyrównanie tekstu z użyciem styli ma postać: o text-align: wyrównanie gdzie jako wyrównanie" należy podać: left - wyrównanie tekstu do lewego marginesu (domyślnie) right - wyrównanie do prawego marginesu center - do środka (wyśrodkowanie) justify - do obu marginesów jednocześnie (justowanie) Przykład <p style= color: blue; text-align: justify; font-decoration: underline;"> jakiś tekst </p> 32
33 ZADANIE 8 Otwórz plik zadanie7.html i zapisz go pod nazwą zadanie8.html. Korzystając ze styli nadaj akapitom następujące formatowanie: o akapit 1: czcionka Times New Roman, rozmiar small, kolor tekstu biały, tło niebieskie, wyrównanie tekstu do lewej strony, test pogrubiony; o akapit 2: czcionka Arial, rozmiar 14 pt, kolor tekstu czerwony, tło szare, wyrównanie tekstu do prawej strony, tekst pochylony; o akapit 3: czcionka Courier, rozmiar 0.5cm, kolor tekstu zielony, tło żółte, wyrównanie do obu marginesów (tekst wyjustowany), tekst podkreślony. 33
34 ZADANIE 9 Otwórz plik zadanie8.html i zapisz pod nazwą zadanie9.html. o Wpisz dowolny tekst i nadaj mu formatowanie indeksu dolnego. o Wpisz dowolny tekst i nadaj mu formatowanie indeksu górnego. o Wstaw tekst z pliku kod.txt i otocz go znacznikami <pre> </pre>. Obejrzyj efekt w przeglądarce. Znacznik <pre> wprowadza tekst preformatowany, czyli napisany czcionką monotypiczną (o stałej szerokości znaku), który uwzględnia dodatkowe spacje, tabulację i znaki końca linii (nie trzeba stosować znaczników <br />) oraz nie jest automatycznie zawijany. 34
35 CYTATY o Odniesienie do źródła <cite>...</cite> Zwykle jest napisany kursywą. Można w nim umieścić np. imię i nazwisko autora, którego cytujemy (ale nie sam cytat!) albo tytuł książki, do której się odnosimy. o Krótki cytat <q>...</q> Umieszcza się w nim treść krótkich cytatów, które nie zawierają żadnych akapitów. Przeglądarki zwykle automatycznie ujmują tekst tego znacznika w znaki cudzysłowu. o Blok cytatu <blockquote>...</blockquote> Stosowany do dłuższych cytatów z kilkoma paragrafami. 35
36 ZADANIE 10 Otwórz plik zadanie9.html i zapisz go pod nazwą zadanie10.html. Akapit 4 zawiera kocie przesądy i przysłowie o kotach. Wykonaj następujące polecenia: o Tytuły Kocie przesądy i Przysłowie o kotach otocz znacznikami <cite> </cite>. o Pierwszy cytat umieść w znaczniku krótkiego cytatu <q>...</q>. o Drugi cytat umieść w znaczniku bloku cytatu <blockquote>...</blockquote>. 36
37 Grafika na stronie Grafika i inne elementy multimedialne są jednymi z najbardziej charakterystycznych elementów WWW, ubarwiając i uprzyjemniając pracę w Sieci, ale także dostarczając sporej dawki informacji. Zręczne wykorzystywanie grafiki czy dźwięku podczas tworzenia dokumentu internetowego jest umiejętnością niezmiernie przydatną, choć należy pamiętać, że to właśnie te elementy są główną przyczyną ogromnego wzrostu ruchu w Sieci. Konieczne jest zatem wybranie złotego środka między estetyką i nośnością informacyjną grafiki z jednej, a realiami technicznymi z drugiej strony. Pamiętajmy też, że trzeba zachować należny umiar ze względu na estetykę strony - nadmiar multimediów po prostu razi. Wiele ciekawych efektów graficznych można dziś osiągnąć za pomocą stylów, bez udziału samej grafiki. 37
38 Grafika na stronie W Internecie zostały przyjęte trzy podstawowe standardy graficzne GIF, JPG, a w ostatnich latach także PNG (Portable Network Graphics) które charakteryzują się znaczną kompresją, a tym samym relatywnie niewielkimi rozmiarami plików graficznych. W ostatnim okresie spotyka się też grafiki w wektorowym, opartym na XML, formacie SVG (Scalable Vector Graphics). Ten typ grafiki obsługuje natywnie Opera i Firefox. 38
39 Grafika na stronie Grafikę możemy wprowadzić za pomocą polecenia: <img src="nazwa_pliku" alt= " nazwa alternatywna " /> W najprostszym przypadku, gdy obrazek znajduje się w tym samym katalogu co dokument, wystarczy podać jego nazwę. Gdy grafiki gromadzimy w odrębnym katalogu, konieczne jest podanie ścieżki dostępu. <img src="/ścieżka_dostępu/nazwa_pliku " alt=" nazwa alternatywna" /> Na przykład: <img src="grafika/obrazek_1.jpg" alt= "obrazek" /> 39
40 Wielkość obrazka Przeglądarka automatycznie odczytuje właściwą wysokość i szerokość ilustracji, ale zazwyczaj w edytorach HTML wielkości te są jawnie wstawiane. <img src="grafika/kot.jpg" width="342" height="353" alt=" kotek" /> Możemy też ręcznie zmienić wielkość obrazka, podając arbitralnie inne rozmiary <img src="grafika/kot.jpg" width= "200" height= "150" alt="kotek" /> Należy przy tym pamiętać, ze zmniejszenie rozmiarów w definicji nie wpływa na wielkość pobieranego obrazka - jest on pobierany w oryginalnym rozmiarze, a następnie zmniejszany przez przeglądarkę. 40
41 Obramowanie obrazka Obramowanie obrazka określa się w stylach podając np. rodzaj linii, jej grubość i kolor. Styl obramowania o border-style: styl obramowania gdzie jako styl obramowania można podać: none, dotted, dashed, solid, double, groove, ridge, inset, outset Przykład <img src="grafika/kot.jpg" style="border-style: solid; border-width: 2px; border-color: red; " /> 41
42 Obramowanie obrazka Grubość obramowania o border-width: wartość gdzie jako wartość można podać: thin (cienkie), medium (średnie), thick (grube), wartość w jednostkach Grubość obramowania o border-color: kolor Przykład <img src="grafika/kot.jpg" style="border-style: double; border-width: thin; border-color: blue; " /> 42
43 ZADANIE 11 Otwórz plik zadanie10.html i zapisz go pod nazwą zadanie11.html. Z folderu grafika wstaw trzy pliki graficzne przed trzema pierwszymi akapitami. Nadaj obrazkom następujące formatowanie: obraz1.jpg wymiary 256x192, obramowanie grube, kropkowane w kolorze zielonym, obraz2.jpg wymiary 288x216, podwójne obramowanie szerokości 6px w kolorze ciemnoniebieskim, obraz3.jpg wymiary 160x120, obramowanie cienkie, kreskowane w kolorze fioletowym. 43
44 Otaczanie obrazka Dodatkową przestrzeń w poziomie i w pionie między grafiką a sąsiadującymi elementami otrzymujemy dodając w stylach marginesy: o globalne margin, o cząstkowe: margin-top, margin-bottom, margin-left, margin-right. Przykład <img src="grafika/kot.jpg" style="margin-left: 50px; margin-right: 50px;" /> 44
45 Pozycjonowanie obrazka Pozycjonowanie grafiki przy prawym lub lewym marginesie strony (lub nadrzędnego bloku) uzyskamy stosując w stylach atrybut float. o float: wartość gdzie jako wartość można podać: left - grafika wyrównana do lewego marginesu right - grafika wyrównana do prawego marginesu Grafika jest swobodnie oblewana z lewej strony przy definicji float: right i z prawej strony przy definicji float: left. Przykład <img src= "grafika/kot.jpg" style=" float: left;" /> 45
46 Pozycjonowanie pionowe Do pionowego pozycjonowania elementów względem siebie wykorzystujemy polecenie stylów vertical-align, które zastąpiło przestarzały atrybut align. o vertical-align: wartość gdzie jako wartość można podać: top, middle, bottom Przykład <img src="grafika/kot.jpg" style=" vertical-align: bottom;" /> 46
47 ZADANIE 12 Plik zadanie11.html zapisz pod nazwą zadanie12.html. Usuń tło pod tekstem z pierwszych trzech akapitów. Teksty wyrównaj do obu marginesów (justify). Obrazkom z poprzedniego zadania nadaj następujące formatowanie: obraz1.jpg wyrównanie do lewego marginesu, prawy i dolny margines wokół grafiki wynosi 30px, obraz2.jpg wyrównanie do prawego marginesu, lewy i dolny margines wokół grafiki wynosi 15px, obraz3.jpg wyrównanie do lewego marginesu, wyrównanie względem tekstu w pionie do dołu (bottom). 47
48 Na stronie można umieszczać również tzw. mapy obrazkowe, czyli obrazy ze zdefiniowanymi obszarami, których kliknięcia powoduje wyświetlenie innego pliku. Są to tzw. hot-spots. Definicja obrazka będącego mapą: Definicja obszarów hot-spots: <map name="mapa1"> <img src="obraz.gif" usemap="#mapa1" /> <area shape="circle" coords="193,86,36" href= plik1.html" > <area shape="rect" coords="114,96,161,157" href= plik2.html" > <area shape="poly" coords="92,72,153,94,144,37" href= plik3.html" > <area shape="circle" coords="92,132,24" href= plik4.html" > </map> Mapy odsyłaczy 48
49 Mapy odsyłaczy usemap informuje przeglądarkę, że obrazek "obraz.gif" jest mapowany, i że mapa nosi nazwę "mapa1". Polecenie map zapoczątkowuje definicję mapy. Wiersze <area shape definiują cztery kolejne fragmenty mapy odsyłaczy. Kształty obszarów aktywnych określa atrybut shape i może przyjmować wartości: rect prostokąt circle koło poly wielokąt href stanowi przywołanie jakiegoś dokumentu HTML. Ostatni wiersz </map> stanowi zakończenie definicji mapy. 49
50 Mapy odsyłaczy coords informuje o współrzędnych aktywnego obszaru i w zależności od kształtu oznacza: shape="rect" coords="114,96,161,157" pierwsze dwie liczby 114,96 podają lewy górny róg prostokąta, a dwie następne 161,157 prawy dolny shape="circle" coords="193,86,36" pierwsze dwie liczby informują o położeniu środka okręgu, ostatnia - o długości promienia shape="poly" coords="92,72,153,94,144,37" przynajmniej trzy pary współrzędnych definiujących "rogi" obszaru Aplikacja on-line pozwalająca tworzyć mapy odsyłaczy: 50
51 ZADANIE 13 Plik zadanie12.html zapisz pod nazwą zadanie13.html. Na końcu pliku zadanie 13.html wstaw obrazek obraz4.jpg i utwórz na nim mapę obrazkową. Miejsca aktywne, różnych kształtów umieść na psich łepkach. Odsyłacze powinny prowadzić do: rocznica-urodzin-schrodingera/ Do odczytania współrzędnych na obrazie możesz użyć programu Paint. 51
HTML (HyperText Markup Language) hipertekstowy język znaczników
HTML (HyperText Markup Language) hipertekstowy język znaczników Struktura dokumentu tytuł strony
Bardziej szczegółowoKrótki przegląd własności języka CSS
Krótki przegląd własności języka CSS Stosując arkusze stylów CSS, w sposób wyraźny oddziela się formatowanie dokumentu XHTML od jego warstwy znaczeniowej umieszczonej w sekcji . Niżej zestawiono
Bardziej szczegółowoProgramowanie WEB PODSTAWY HTML
Programowanie WEB PODSTAWY HTML Najprostsza strona HTML tytuł strony To jest moja pierwsza strona WWW. tytuł strony
Bardziej szczegółowoI. Wstawianie rysunków
I. Wstawianie rysunków Wstawiane rysunku Bez parametrów: Tekst alternatywny Tytuł obrazka
Bardziej szczegółowoDzię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ółowoI. 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ółowoHTML 1. Gimnazjum nr 1 w Barcinie gimbarcin.pl
HTML 1 Gimnazjum nr 1 w Barcinie UWAGA: UTWÓRZ FOLDER HTML, a w nim HTML-1 dla pierwszego ćwiczenia. Imię_ nazwisko_html-1.html z dysku J: w folderze HTML 1. Tło strony - Jednolity kolor:
Bardziej szczegółowoJustyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie
Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie Scenariusz lekcji informatyki klasa II gimnazjum Temat : Strona WWW pierwsze
Bardziej szczegółowowww.fwrl.pl/szkolenie
STRONA www.fwrl.pl/szkolenie MS WORD HTML HTML i dostarczają informację dla silnika przeglądarki o tym jak ma być zbudowana i wyświetlona strona HTML HTML HTML (warstwa logiczna co i gdzie ma być) (wastwa
Bardziej szczegółowoHTML (HyperText Markup Language)
HTML (HyperText Markup Language) Struktura dokumentu tytuł strony sekcja nagłówka Tutaj wpisujemy
Bardziej szczegółowoZnaczniki języka HTML
www.math.uni.lodz.pl/ radmat Elementy inline ... Elementy inline ... ... Elementy inline ... ... ... Elementy inline
Bardziej szczegółowoza 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ółowoCel 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ółowoHTML. HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych
HTML HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych HTML zdefiniowanie sposobu wizualnej prezentacji dokumentu w przeglądarce
Bardziej szczegółowozmiana koloru tła <body bgcolor = kolor > tło obrazkowe <body background= ścieżka dostępu do obrazka >
tytuł dokumentu treść dokumentu
Bardziej szczegółowoOczywiś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ółowoCel 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ółowoEdukacja 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ółowoStruktura 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ółowoWykł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ółowoCSS - 2. Właściwości tekstu, czcionek
CSS - 2 Właściwości tekstu, czcionek Właściwości tekstu Służą do nadawania określonego wyglądu tekstowi:» color» direction» letter-spacing» text-align» text-decoration» text-indent» text-shadow» text-transform»
Bardziej szczegółowoProjekty 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ółowoTworzenie 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ółowoHTML 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ółowoZa 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ółowoBox model: Content. Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości.
Box model Box model: Content Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości. Box model: Padding Content Content - obszar zawartości określany jest za pomocą deklaracji
Bardziej szczegółowoDanuta 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ółowoprzygotował: mgr Szymon Szewczyk PODSTAWY
S t r o n a 1 PODSTAWY Każdy dokument musi być w całości zawarty między znacznikami - i (większość znaczników musi być odwołana ). Dokument HTML a składa się z dwóch części: - głowy
Bardziej szczegółowoHTML umożliwia zapis treści dokumentu i równocześnie opis jego układu graficznego.
HTML HTML umożliwia zapis treści dokumentu i równocześnie opis jego układu graficznego. Dokument HTML to plik tekstowy, z ewentualnymi załącznikami, w którym znajduje się tekstowa treść przeplatana z rozkazami
Bardziej szczegółowop { 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ółowoLaboratorium 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ółowoPodstawy HTML. Tworzenie stron internetowych. Tomasz Piłka. Ucz się, jak gdybyś miał żyć wiecznie, żyj jak gdybyś miał umrzeć jutro
Tworzenie stron internetowych Ucz się, jak gdybyś miał żyć wiecznie, żyj jak gdybyś miał umrzeć jutro Św. Izydor z Sewilli Podstawy HTML Tomasz Piłka HTML historycznie HTML (Hypertext Markup Language)
Bardziej szczegółowoWitryny 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ółowoZdefiniowane 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ółowoKrok 1: Stylizowanie plakatu
HTML & CSS 1 Wanted! Każdy Klub Kodowania musi być zarejestrowany. Zarejestrowane kluby można zobaczyć na mapie na stronie codeclubworld.org - jeżeli nie ma tam twojego klubu sprawdź na stronie jumpto.cc/18cplpy
Bardziej szczegółowoCSS pozwala przypisać poszczególnym elementom na. grubość, rozmiar czcionki, kolor tła, odległości między
Cascading Style Sheets CSS CSS pozwala przypisać poszczególnym elementom na stronie (HTML/XML) takie właściwości jak rodzaj, grubość, rozmiar czcionki, kolor tła, odległości między elementami, ich obramowania,
Bardziej szczegółowoPrzedmiot: 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ółowoTworzenie 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ółowoTWORZENIE 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Ź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ółowoPodstawy 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ółowoTworzenie 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ółowoKaskadowe arkusze stylów cz. 2
Formatowanie wyglądu tekstu Właściwości związane z czcionką Wybór czcionki Tworzenie czcionki pochyłej Pogrubianie czcionki Określanie wielkości czcionki Wykorzystanie kapitalików Określanie wysokości
Bardziej szczegółowoJę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ółowoModuł 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ółowoTabele. Przykład 15a.htm. <HTML><HEAD><TITLE> Cennik</TITLE></HEAD><BODY><H3>Cennik</H3> <TABLE BORDER="1"> <TR>
Tabele Autorem niniejszego skryptu jest dr inż. Robert Kolud Tabele w HTML to nie tylko praktyczny sposób na przedstawianie zestawień informacji. Znacznie częściej jednak tabele są wygodnym narzędziem
Bardziej szczegółowoModel blokowy. Model blokowy w CSS
Model blokowy Model blokowy w CSS opisuje bloki, które są generowane dla elementów HTML. Model blokowy zawiera także dokładne opcje związane z ustawieniem maginesu zewnętrznego, wewnętrznego, obramowania
Bardziej szczegółowoCzcionki. Rodzina czcionki [font-family]
Czcionki W tej lekcji nauczysz się o czcionkach i jak nimi manipulować przy pomocy CSS. Omówimy także pewien problem, gdzie wybrana czcionka jest przedstawiana na stronie tylko gdy jest ona zainstalowana
Bardziej szczegółowoLABORATORIUM 3 WSTĘP DO SIECI TELEINFORMATYCZNYCH CSS CECHY WYBRANYCH SELEKTORÓW
LABORATORIUM 3 WSTĘP DO SIECI TELEINFORMATYCZNYCH CSS CECHY WYBRANYCH SELEKTORÓW 1. Definicja tła Tło elementu HTML można definiować w CSS korzystając z następujących cech: background-color background-image
Bardziej szczegółowoKASKADOWE ARKUSZE STYLÓW CSS (ang. Cascading Style Sheets)
Sieci Komputerowe i Technologie Internetowe Materiał pomocniczy na podstawie fragmentu wykładu: KASKADOWE ARKUSZE STYLÓW CSS (ang. Cascading Style Sheets) Opracowanego przez dr inż. Dariusza Trawickiego
Bardziej szczegółowoPo 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ółowoZaawansowana 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ółowouż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ółowoJę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ółowoWykł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Ćw. IV. Tworzenie stron internetowych. Podstawy projektowania, wprowadzenie do języka HTML
Ćw. IV. Tworzenie stron internetowych. Podstawy projektowania, wprowadzenie do języka HTML Zad.1 Zapoznaj się z poniŝszymi artykułami dotyczącymi projektowania stron WWW:. http://galeria.muzykaduszy.pl/zasady.php
Bardziej szczegółowoĆ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ółowoProste kody html do szybkiego stosowania.
Proste kody html do szybkiego stosowania. Często, w trakcie pracy z blogiem czy portalem zachodzi potrzeba umieszczenia grafiki, linku zaszytego w grafice czy innych podobnych. Szczególnie w widgetach
Bardziej szczegółowoPodstawowe 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ółowoPrzy wstawianiu znacznika zamykającego nie przepisujemy już atrybutów.
JĘZYK - HTML Hipertekst - możliwośd przechodzenia między różnymi fragmentami tego samego lub różnych dokumentów, które zostały ze sobą powiązane. Jest systemem odnośników (tzw. Skrótów), działających na
Bardziej szczegółowoCSS. 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ółowoLABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH. PODSTAWY JĘZYKA HTML (HyperText Markup Language)
LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH PODSTAWY JĘZYKA HTML (HyperText Markup Language) 1. STRUKTURA DOKUMENTU HTML Dokument HTML jest zwykłym nie skonwertowanym tekstem, z tak zwanymi znacznikami
Bardziej szczegółowoTworzenie i edycja dokumentów w aplikacji Word.
Tworzenie i edycja dokumentów w aplikacji Word. Polskie litery, czyli ąłóęśźżń, itd. uzyskujemy naciskając prawy klawisz Alt i jednocześnie literę najbardziej zbliżoną wyglądem do szukanej. Np. ł uzyskujemy
Bardziej szczegółowoĆw.4 Dokumenty HTML Przy pomocy języka znaczników opisać można strukturę witryny internetowej, postać i wygląd jej elementów.
Ćw.4 Dokumenty HTML Przy pomocy języka znaczników opisać można strukturę witryny internetowej, postać i wygląd jej elementów. Znaczniki HTML (tagi) postać ogólna: zawartość
Bardziej szczegółowoProjektowanie aplikacji internetowych. CSS w akcji
Projektowanie aplikacji internetowych CSS w akcji Tak to ma wyglądać Strona : 2 Założenie Treść strony ma być oddzielona od informacji o jej wyglądzie. Kod HTML nie powinien zawierać żadnych informacji
Bardziej szczegółowoYoung 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ółowoEGZAMIN 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ółowoLaboratorium numer 1
Laboratorium numer 1 Podstawy HTML część I: HTML (ang. HyperText Markup Language) hipertekstowy język znaczników, obecnie szeroko wykorzystywany do tworzenia stron internetowych. HTML pozwala opisać strukturę
Bardziej szczegółowoABC 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ółowoWprowadzenie do języka HTML
Radosław Rudnicki (joix@mat.umk.pl) 05.09.2009 r. Wprowadzenie do języka HTML Do tworzenia stron internetowych wystarczy użyd zwykłego Notatnika oferowanego przez system Windows, czy dowolny inny system
Bardziej szczegółowoProgramy 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ółowoe r T i H M r e n L T n
s e r T t w o i H M r e o T n w z n L Podstawy 1. Nawigacja na stronie jest niezwykle istotna, powinna być możliwie jak najprostsza. Pamiętajmy, że im mniej kroków do celu tym lepiej. 2. Projekt graficzny
Bardziej szczegółowoMoż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ółowoKurs 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ółowoZnaczniki fizyczne i logiczne czcionki
Znaczniki fizyczne i logiczne czcionki Znaczniki fizyczne - atrybuty Znaczniki fizyczne działają w podobny sposób jak atrybuty czcionek w edytorze tekstów. Czcionka pogrubiona To jest czcionka
Bardziej szczegółowoEdytor tekstu OpenOffice Writer Podstawy
Edytor tekstu OpenOffice Writer Podstawy OpenOffice to darmowy zaawansowany pakiet biurowy, w skład którego wchodzą następujące programy: edytor tekstu Writer, arkusz kalkulacyjny Calc, program do tworzenia
Bardziej szczegółowoOdsył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Ćwiczenie 4 - Tabele
Ćwiczenie 4 - Tabele W ćwiczeniu tym zajmujemy się tabelami. Tabele moŝna wykorzystywać do róŝnych celów. W tabelach moŝna prezentować dane i je wyliczać, moŝna ustalić określony układ treści i stworzyć
Bardziej szczegółowoEGZAMIN 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ółowoTworzenie 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ółowoSTRONY 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ółowoJę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ółowoPodstawy HTML i CSS. Wydział Matematyki, Informatyki i Ekonometrii Uniwersytet Zielonogórski
Podstawy HTML i CSS Grzegorz Arkit Wydział Matematyki, Informatyki i Ekonometrii Uniwersytet Zielonogórski 13 października 2016 G. Arkit (WMIiE) Podstawy HTML i CSS 13 października 2016 1 / 20 Informacja
Bardziej szczegółowoKaskadowe 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ółowoEDYCJA TEKSTU MS WORDPAD
EDYCJA TEKSTU MS WORDPAD EDYCJA TEKSTU - MS WORDPAD WordPad (ryc. 1 ang. miejsce na słowa) to bardzo przydatny program do edycji i pisania tekstów, który dodatkowo dostępny jest w każdym systemie z rodziny
Bardziej szczegółowoUwaga: 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ółowoSterBox. Przygotowanie Strony Użytkownika
Przygotowanie Strony Użytkownika Sterbox od wersji 2.1.1 obsługuje dwie strony użytkownika umożliwiające sterowanie z kontrolą stanów. Rozpoczynając tworzenie strony potrzebujemy programu do tworzenia
Bardziej szczegółowoUkłady witryn internetowych
1. CEL ĆWICZENIA Celem ćwiczenia jest zapoznanie się z możliwościami kaskadowych arkuszy stylów CSS w zakresie kontrolowania położenia elementów na stronie. 2. MATERIAŁ NAUCZANIA W normalnym układzie opartym
Bardziej szczegółowoPodstawowe zasady edytowania dokumentów w Szkole Podstawowej w Wietlinie
Podstawowe zasady edytowania dokumentów w Szkole Podstawowej w Wietlinie Informacje ogólne dotyczące tekstu 1. Pamiętaj o podziale tekstu na akapity (zwłaszcza wtedy, kiedy tekst jest rozległy). Akapit
Bardziej szczegółowoPodstawy (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ółowoStrony 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ółowoPrzepis. Wstęp HTML & CSS. W tym projekcie nauczycie się, jak stworzyć stronę internetową ze swoim ulubionym przepisem. Zadania do wykonania
HTML & CSS 1 Przepis Każdy Klub Kodowania musi być zarejestrowany. Zarejestrowane kluby można zobaczyć na mapie na stronie codeclubworld.org - jeżeli nie ma tam twojego klubu sprawdź na stronie jumpto.cc/18cplpy
Bardziej szczegółowoLab.1. Praca z tekstem: stosowanie arkuszy stylów w dokumentach OO oraz HTML/CSS
Lab.1. Praca z tekstem: stosowanie arkuszy stylów w dokumentach OO oraz HTML/CSS Cel ćwiczenia: zapoznanie się z pojęciem stylów w dokumentach. Umiejętność stosowania stylów do automatycznego przygotowania
Bardziej szczegółowoWykład 2 Tabele i ramki 1. Tabele 1.1. Podstawy budowy tabel na stronach WWW
Wykład 2 Tabele i ramki 1. Tabele 1.1. Podstawy budowy tabel na stronach WWW Rys.1. Przykład prostej tabeli zawierającej kalendarz na miesiąc marzec ... definiuje tabelę Atrybuty: border
Bardziej szczegółowoFormatowanie czcionki polega na zmianie jej wyglądu, np. kroju i stylu pisma, wielkości,
Zadanie 1 Formatowanie czcionki polega na zmianie jej wyglądu, np. kroju i stylu pisma, wielkości, koloru, dodaniu efektów specjalnych. Otwórz dokument edytora tekstowego Word następnie przepisz zdania
Bardziej szczegółowoTest z przedmiotu. Witryny i aplikacje internetowe
Test z przedmiotu Witryny i aplikacje internetowe Tylko jedna odpowiedź jest poprawna!!! Zadanie 1 Kod języka HTML przedstawi tabelę składającą się z dwóch
Bardziej szczegółowoMoż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ółowoTekst 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