Podstawy technik sieciowych SKiBD
|
|
- Tadeusz Morawski
- 7 lat temu
- Przeglądów:
Transkrypt
1 Podstawy technik sieciowych SKiBD Wykład 4
2 Informacje wstępne
3 Koncepcja sieci WWW Sieć WWW (world wide web) została zaprojektowana w CERN przez Tima Bernes-Lee około 1989 roku Prototyp graficznej przeglądarki "Mosaic Marc Andreessen's Sieć składa się z serwerów udostępniających dokumenty hipertekstowe czyli zawierające odnośniki (links) do innych dokumentów na tym samym, lub na innych serwerach Dokumenty te są wyświetlane w przeglądarkach zainstalowanych na komputerach klientów sieci Połączenie jest realizowane automatycznie dzięki tłumaczeniu nazw serwerów na adresy IP przez serwery DNS 3
4 Koncepcja Adresowania w Sieci WWW URL (Universal Resource Locator) Protokół Numer portu Serwer Ścieżka Plik Budowa adresu serwera Serwer stron www Serwer wejściowy organizacji Domena główna Przykład http: :80 // /Serv10/ Index.html Budowa adresu serwera www. MChDelaware. com 4
5 Protokół http Strona Klienta Pobieranie informacji Dostarczanie informacji Pobieranie skróconej informacji Strona Serwera Domyślny dokument Wysyłanie statycznej informacji Dynamiczne generowanie informacji Przetwarzanie informacji otrzymanej od klienta Metody protokołu Get Post Header Sewer Index.html Skrypty CGI (Common Gateway Interface) i inne Interfejs do bazy danych 5
6 Dokumenty Statyczne Dane HTML Język opisu wyglądu i formatowania danych tekstowy Przeglądarki sieciowe mają wbudowany program interpretujący języki HTML Strony HTML są podstawowym składnikiem przesyłania informacji w sieci Odnośniki (globalne lub lokalne) pozwalają automatycznie przełączać dokumenty (globalny hipertekst) Dane XML Język opisu znaczenia danych HTML jest podzbiorem XML Niektóre przeglądarki umożliwiają wyświetlanie danych XML 6
7 Efekty dynamiczne (dhttp) Klient Animowana grafika Style kaskadowe CSS (Cascading Style Sheets) Skrypty JavaScripts Flash Applety Cookies XML XSL XHTML Serwer CGI PHP ASP (Active Server Pages VisualBasic) Basy Danych 7
8 Jak to wszystko działa? Programy CGI Serwer WWW Baza Danych SQL Przeglądarka Twardy dysk 8
9 Przeglądarki www Internet Explorer (Windows Mac OS) Mozilla Firefox (UNIX, Linux, Windows, Mac OS) Netscape Navigator (UNIX, Linux, Windows, Mac OS) Opera (Windows, Linux) Chrome Inne (Gozilla, Conqueror) Konieczność testowania witryny w kilku przeglądarkach! 9
10 Obiekty graficzne GIF, PNG Możliwość stosowania przezroczystości Mała objętość Ograniczenie do 256 kolorów JPG 16 mln kolorów Do prezentacji zdjęć (wiele kolorów) Zapis z kompresją stratną Brak przezroczystości Nie wolno przesadzać z grafiką! 10
11 HTML Prostota Małe możliwości (praktycznie ograniczone do formatowania tekstu i grafiki) Niewielka objętość kodu Interpretowany poprawnie przez wszystkie przeglądarki 11
12 DHTML = HTML+CSS+ skrypty Możliwość dynamicznego formatowania elementów Walidacja pól formularzy Rozbudowana interakcja z użytkownikiem CSS w standardzie HTML
13 XML Nowy standard formatowania tekstów Tworzenie własnych tagów określających sposób pozycjonowania obiektów Naturalna reprezentacja danych Elastyczność Łatwość wyszukiwania oraz przetwarzania 13
14 Języki skryptowe Javascript, VBScript, Ruby, Python Możliwość oprogramowania strony www Ograniczone możliwości Przerzucenie obliczeń na stronę klienta Różna interpretacja kodu przez różne przeglądarki Nie ma potrzeby kompilacji 14
15 Perl Wyrażenia regularne, tablice haszy ogromne możliwości przetwarzania danych Programów nie trzeba kompilować Prosta składnia Wszystkie zalety języka programowania wysokiego poziomu Tylko jako skrypty CGI (Po stronie serwera) 15
16 PHP Kod programu bezpośrednio w kodzie html Szybkość działania zależna od prędkości serwera Implementacja wielu interfejsów baz danych Dziwna składnia 16
17 C, C++ Tylko jako CGI po stronie serwera Trudności w przetwarzaniu tekstów Szybkość wykonywania Rozbudowany kod nawet dla prostych zadań Konieczność kompilacji 17
18 Java Język zaprojektowany do działania w środowisku przeglądarki www Praktycznie nieograniczone możliwości Konieczność posiadania w systemie środowiska maszyny wirtualnej javy. Długi kod programu Działanie po stronie serwera lub klienta Microsoft wycofał się ze wspierania Javy promując nowy język C# oraz platformę.net 18
19 Bazy danych Podstawowy środek do przechowywania i przetwarzania dużej ilości danych E-business, statystyka, składowanie wyników pomiarowych itd. Komunikacja za pośrednictwem SQL 19
20 Postgres, MySQL Duża szybkość i niezawodność Darmowe Wiele ogólnodostępnych narzędzi Popularne w systemach UNIX/Linux Niewielkie wymagania 20
21 Oracle, MS SQL Poważne zastosowania biznesowe Duże koszty licencji i użytkownia Możliwość przetwarzania ogromnych ilości danych Rozbudowana administracja serwerem bazy Stosunkowo wolne Zasobożerność 21
22 Inne technologie Flash, Shockwave Konieczne specjalistyczne programy komercyjne Znakomity do efektownych prezentacji Trudności we wprowadzaniu zmian Prawie niemożliwe programowanie RealPlayer Do przesyłania strumieni danych video, audio 22
23 Rzeczy, które warto wiedzieć... HTML nie jest językiem programowania Języki skryptowe mają mniejsze możliwości ale działają zwykle szybciej Dwie skrajności rozwoju Internetu maksimum efektów, lub maksimum suchej treści Niekomercyjne bazy danych niewiele ustępują dużym systemom Rozwój technologii i ustalanie standardów W3C 23
24 Tworzenie dokumentów w HTML
25 Tworzenie dokumentu HTML Dokument HTML jest zwykłym plikiem tekstowym, w którym znajdują się polecenia HTML. Dokument taki można utworzyć za pomocą najprostszego edytora tekstów, ręcznie dodając znaczniki Wiele specjalizowanych edytorów, które wydatnie ułatwiają konstruowanie dokumentu, wspomagając wprowadzanie poleceń. Osobiście polecam używanie edytorów tekstowych, a nie graficznych - lepsza kontrola nad tworzonym dokumentem 25
26 Programy w środowisku Windows Notatnik, Notatnik+ HomeSite, - jeden z najlepszych edytorów w tym środowisku Pajączek HotDog - silny, ale dość trudny w obsłudze WebEdit - jeden z najlepszych programów w tym środowisku WebPager Xpress - polski edytor, nieco słabszy od wyżej wymienionych, ale darmowy ezhtml - polski edytor, także darmowy 26
27 Dla początkujących Można się posłużyć graficznymi edytorami, Dla początkujących poleca się szczególnie darmowe edytory dołączone do przeglądarek Internet Explorer i Mozilla (Firefox). Do nauki języka HTML, warto się posługiwać edytorami tekstowymi 27
28 Dokument HTML Znaczniki (tags) tekst pomiędzy znakami < a > Tekst to słowa kluczowe i parametry Parametry mają wartość przypisamą po znaku = Znaczniki zamykające mają znak / po </ Sekcje ograniczone znacznikami otwierającym i zamykającym mogą zawierać inne sekcje ale nie mogą się przecinać Znaki < zapisajemy jako < a > > Przykłady Znacznik formatu dokumentu <HTML> Gruba linia pozioma <HR WIDTH=40> Początek i koniec akapitu <P>tekst akapitu</p> Zawieranie się sekcji <P>tekst <B>pogrubiony</B> i zwykły</p> Błąd <P>tekst <B>pogrubiony</P> ERROR</B> 28
29 Znaczniki HTML Polecenie (znacznik, tag) HTML jest specjalnym ciągiem znaków objętym nawiasami ostrymi. Gdybyśmy na przykład chcieli zaznaczyć jakiś fragment tekstu jako tytuł, moglibyśmy objąć go poleceniem <H1>treść tytułu</h1>. Wielkość liter jest obojętna - znaczniki wpisane małymi i wielkimi literami są interpretowane w ten sam sposób. Staranniej wykonane edytory HTML pozwalają nawet zdefiniować, czy polecenia HTML będą wpisywane małymi, czy wielkimi literami. 29
30 Szkielet dokumentu HTML 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ń. Cały dokument powinien być objęty parą znaczników <HTML> </HTML>. Między nimi powinna zaś się znaleźć para znaczników <HEAD> </HEAD>, która stanowi ramy dla informacji nagłówkowych. Pozostałe informacje powinny być objęte z kolei znacznikami <BODY> </BODY>. 30
31 Przykład bezpiecznego szkieletu HTML> <HEAD>informacje nagłówkowe</head> <BODY> właściwa treść (ciało) dokumentu </BODY> </HTML> 31
32 Jak wyświetlić dokument Lokalny Dokument HTML możemy obejrzeć w przeglądarce Albo Drag&Drop Albo wpisując ścieżkę w pole adresowe Na serwerze Dowiedzieć się gdzie jest katalog z dokumentami www Apache na linux-ie /usr/local/httpd/htdoc Samba na wsdg-linux1 wyświetla powyższą ścieżkę jako wsdglinux1www Nazwać dokument index.html i wstawić do katalogu z dokumentami www n.p. Do wsdglinux1www W przeglądarce wpisać http ://serwer lub
33 Tytuł strony 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: <HEAD> <TITLE>Kurs języka HTML - poradnik webmastera: HTML dla bardzo początkujących</title> </HEAD> 33
34 Informacja o stronie kodowej dokumentu Zalecane jest strony kodowej ISO (czyli ISO Latin 2). Jest to międzynarodowy standard, a "przy okazji" także Polska Norma. Należy sporządzać dokument w tym standardzie i zarazem opatrywać go informacją typu META. Jest ona umieszczana w ramach znaczników HEAD i wygląda następująco: <meta http-equiv="content-type" content="text/html; charset=iso "> 34
35 Standardowa osnowa <HTML> <HEAD> <meta http-equiv="content-type" content="text/html; charset=iso "> <TITLE>Tytuł strony</title> </HEAD> <BODY> właściwa treść (ciało) dokumentu </BODY> </HTML> 35
36 Polskie znaki w edytorach Czołowe polskie edytory HTML nie wymagają już stosowania odrębnych klawiatur i czcionek ekranowych, gdyż same automatycznie konwertują polskie znaki do wybranej przez nas strony kodowej. Edytory produkcji zachodniej (ISO ) Czcionki TrueType na polskiej stronie "ogonkowej", pod adresem Windows darmowe czcionki ekranowe PolskieStrony i PolskieStrony2, dostępne w serwisie Polska Strona Windowsowa HomeSite 2.5 (lub nowszy) należy zalecać używanie czcionki PolskieStrony2. Należy również używać nakładki klawiaturowej dla ISO Problem konwersji już istniejących dokumentów można załatwić za pomocą specjalnych programów 36
37 Kodowanie - podsumowanie (ISO ) Zaopatrz się w dowolną czcionkę ekranową w standardzie ISO , za pomocą której będziesz wyświetlać tekst dokumentu w edytorze HTML Używaj polskiej klawiatury w standardzie ISO Wstaw deklarację strony kodowej ISO w nagłówku dokumentu 37
38 Kodowanie - podsumowanie Windows-1250 Użyj dowolnej czcionki ekranowej w tym standardzie (jest ich sporo w Windows) Używaj standardowej klawiatury Windows Wstaw deklarację strony kodowej Windows-1250 w nagłówku dokumentu <meta http-equiv="content-type" content="text/html; charset=windows-1250"> 38
39 Kolor tła dokumentu Gdy w dokumencie znajduje się para znaczników <BODY> i </BODY>, możemy zdefiniować kolor tła dokumentu: <BODY BGCOLOR="kolor"> przy czym "kolor" może być podany imiennie (np. red, green, black, white) lub za pomocą wartości heksadecymalnych tak jak w przypadku koloru czcionki - #FF0000, #008000, #000000, #FFFFFF. Sugeruje się używanie wartości heksadecymalnych, jako bardziej uniwersalnych 39
40 Tytuły 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>. Ten drugi zawiera dodatkowo ukośnik (ang. slash). Wprowadzamy je za pomocą poleceń H1, H2 itd. 40
41 Akapit i wiersz 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. Zaleca się także konsekwentne stosowanie znacznika zamykającego </P>. Przykład: <P>To jest treść pierwszego akapitu</p> <P>To jest treść drugiego akapitu</p> 41
42 Przełamanie tekstu Chcemy przełamać tekst, nie wprowadzając przy tym znaku końca akapitu. Pojedyncze polecenie <BR> przenosi tekst o jeden wiersz w dół, nie wprowadzając dodatkowej interlinii. 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. 42
43 Pozioma linia Poziomą linie, wstawiamy za pomocą polecenia <HR> (ang. horizontal rule). Pozwala ono wyświetlić w dokumencie poziomą linię, na szerokość całej strony, rozdzielając nią logiczne fragmenty tekstu 43
44 Wykazy Aby utworzyć szkielet wykazu wypunktowanego, należy użyć polecenia <UL> </UL> (ang. unordered list). W ramach szkieletu znajdą się poszczególne punkty wykazu, które wprowadzamy za pomocą polecenia <LI> 44
45 Przykład wykazu <P>Dlaczego zajmuję się UFO?</P> <UL> <LI>Uważam, że UFO istnieje</li> <LI>Uważam, że pozaziemskie cywilizacje mogą nam pomóc</li> <LI>Uważam, że należy się przygotować na spotkanie</li> </UL> W efekcie uzyskamy: Dlaczego zajmuję się UFO? Uważam, że UFO istnieje Uważam, że pozaziemskie cywilizacje mogą nam pomóc Uważam, że należy się przygotować na spotkanie 45
46 Wykazy numerowane Gdy chcemy utworzyć wykaz numerowany, wówczas zamiast <UL> i </UL> możemy zastosować <OL> i </ OL> (ang. ordered list). Uzyskamy wówczas listę numerowaną za pomocą liczebników arabskich 1. Uważam, że pozaziemskie cywilizacje mogą nam pomóc 2. Uważam, że należy się przygotować na spotkanie 46
47 Atrybuty czcionki Atrybuty czcionki - pogrubienie (bold), pochylenie (italic) i podkreślenie (underlined). Przykłady <B>To jest tekst pogrubiony (bold)</b> <I>To jest tekst pochylony (italic, kursywa)</i> <U>To jest tekst podkreślony (underlined)</u> Choć wszystkie przeglądarki akceptują atrybuty czcionki, warto zauważyć, że np. Netscape Navigator 2 i 3 ignoruje podkreślenie, natomiast Netscape Communicator 4 już je widzi. 47
48 Odsyłacze Czytelnik dokumentu będzie za pomocą kliknięć myszką na odsyłaczach przenosić się do różnych miejsc w Internecie, skacząc np. z Polski do Japonii, z Japonii do USA, a stamtąd do Francji. Z jego punktu widzenia jest zupełnie obojętne, gdzie strony się znajdują. Dla niego ważny jest łatwy dostęp do informacji. Odsyłacz do innej strony jest tworzony za pomocą polecenia: <A HREF="adres.strony.internetowej">Jakaś nazwa tej strony</ A> Przykładowy adres mógłby wyglądać następująco: <A HREF=" główna AGH </A> 48
49 Odsyłacze uwagi Ukośnik (slash) na końcu adresu wymusza wczytanie strony domyślnej, zazwyczaj o nazwie index.html (lub index.htm - zależy to od typu serwera WWW). Zaleca się nadawanie stronie głównej serwisu nazwy index.htm lub index.html. Jest to powszechnie przyjęta praktyka w Internecie. W ostatnich latach stosuje się także default.htm lub default.html Na ekranie przeglądarki jest wyświetlany tekst, który znajduje się między znacznikami <A HREF="... "> i </ A>. Jest on domyślnie wyświetlany na niebiesko z podkreśleniem (możemy to jednak zmienić). 49
50 Adres poczty jako odsyłacz Stosujemy tutaj na przykład następujące polecenie: <A i nazwisko</a> Na przykład adres prowadzącego wykład można zakodować w postaci: <A HREF="mailto:kurowski@agh.edu.pl.">Prwadzący wykład z SKiBD</A> 50
51 Wielkość i kolor czcionki W dokumentach HTML stosuje się nieco inną definicję wielkości czcionki niż przyjęta w edytorach tekstów Podstawowa czcionka ma wielkość 3 jednostek (zazwyczaj 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. 51
52 Polecenie określające wielkość czcionki Nadanie wartości absolutnej <FONT SIZE="x">Tekst objęty definicją</font> x = Nadanie wartości względnej <FONT SIZE="+x">Tekst objęty definicją </FONT> <FONT SIZE="-x">Tekst objęty definicją </FONT> x = Gdy jakiś fragment tekstu obejmiemy definicją <FONT SIZE=+2> </FONT>, będzie on miał wielkość 5, gdyż dodajemy 2 jednostki do wielkości podstawowej. Gdy użyjemy polecenia <FONT SIZE=-1> </FONT>, tekst będzie miał wielkość 2. W ten sposób możemy manipulować wysokością czcionki w tekście. 52
53 Polecenie określające kolor czcionki Składnia polecenia <FONT COLOR="kolor">Tekst objęty poleceniem</font> Kolory możemy definiować w postaci tradycyjnej, a więc za pomocą wartości szesnastkowych (np. kolor biały ma wartość #FFFFFF, a czarny #000000), albo za pomocą ich nazw. Wszystkie popularne przeglądarki akceptują wartości heksadecymalne (w formacie RRGGBB, gdzie RR - składowa czerwona, GG - składowa zielona, BB - składowa niebieska). 53
54 Grafika na stronie Strony WWW zawierają zwykle grafikę, która bardzo urozmaica ich czytanie - pod warunkiem oczywiście, że korzystamy z graficznego systemu operacyjnego. Na stronach WWW są stosowane dwa podstawowe formaty bitowych plików graficznych - GIF i JPG (JPEG) - które są z założenia skompresowane (często nawet dziesięciokrotnie w stosunku do innych popularnych formatów. Grafikę możemy wprowadzić za pomocą polecenia: <IMG SRC="nazwa_pliku">, np..: <IMG SRC="../gambler/gambler.gif"> 54
55 Wstawienie grafiki do dokumentu Podstawowa konstrukcja ma następującą postać: <IMG SRC="plik_graficzny"> Wielkość obrazka możemy regulować za pomocą parametrów HEIGHT (wysokość) i WIDTH (szerokość). Na przykład: <IMG SRC="tucows.gif" HEIGHT=150> <IMG SRC="tucows.gif" WIDTH=200> <IMG SRC="tucows.gif" WIDTH=200 HEIGHT=50> Ramka <IMG SRC="tucows.gif" WIDTH=120 HEIGHT=160 BORDER=5> (border w pikselach) 55
56 Wstawienie grafiki do dokumentu Parametry VSPACE (vertical space) i HSPACE (horizontal space) pozwalają ustalić odległość obrazka, w pikselach, od oblewającego go tekstu: <IMG SRC="tucows.gif" HSPACE=50> <IMG SRC="tucows.gif" VSPACE=50> Odrębny, specjalny zespół parametrów, ALIGN=abc, steruje pozycją obrazka w stosunku do oblewającego go akapitu <IMG SRC="obrazek" ALIGN=abc> wartości parametru: right, left, top, bottom, middle 56
57 Wstawienie grafiki do dokumentu Jeśli chcemy, aby osoby korzystające z Internetu w trybie tekstowym wiedziały, co zawiera obrazek, możemy wstawić dodatkowo parametr ALT="informacja". Napis ten zostanie wyświetlony na ekranie przeglądarki tekstowej. Informacja jest ważna wówczas, gdy grafika zawiera odsyłacze do innych stron. Gdybyśmy chcieli umieścić obrazek na środku wiersza, musimy objąć go znacznikami <CENTER></ CENTER Obrazek można oczywiście umieścić w komórce tabeli, wstawiając między znacznikami komórki <TD></TD> definicję obrazka, co można wykorzystać do tworzenia efektownie wyglądających obramowań 57
58 Tablice Ogólne ramy tabeli <TABLE> </TABLE> Definicja tabeli musi być umieszczona między tymi dwoma znacznikami, które stanowią jej delimitery. W ich ramach są umieszczane definicje rzędów, definicje komórek w rzędach, konkretne dane w komórkach, tytuł tabeli i nagłówki wierszy i kolumn. Wiersz tabeli <TR> </TR> Wiersz tabeli jest jej konkretyzacją, a sam tworzy ramy dla komórek z danymi. W ramach <TABLE> </TABLE> można umieścić wiele kolejnych definicji wierszy <TR> </TR> <TABLE> <TR> </TR> <TR> </TR> <TR> </TR> </TABLE> 58
59 Tablice Komórka w wierszu <TD> </TD> Komórka zawiera konkretne dane. Między jej znacznikami można umieszczać tekst i grafikę. Konkretne komórki są umieszczane między znacznikami wybranego rzędu, na przykład: <TABLE> <TR> <TD> </TD><TD> </TD><TD> </TD></TR> <TR> <TD> </TD><TD> </TD><TD> </TD></TR> <TR> <TD> </TD><TD> </TD><TD> </TD></TR> </TABLE> 59
60 Obramowanie tablic Aby tabela zawierała naokoło obramowanie, wystarczy rozszerzyć definicję o parametr BORDER. Jeśli nie podamy szerokości obramowania, przyjmowana jest jej domyślna wartość. <TABLE BORDER> </TABLE> Gdybyśmy podali szerokość obramowania w pikselach, zostanie ona odpowiednio zinterpretowana przez przeglądarkę <TABLE BORDER=10> </TABLE> 60
61 Obramowanie i marginesy komórek Obramowanie komórek Aby komórki (nie tabela!) zawierały inne obramowanie niż domyślne, możemy użyć parametru CELLSPACING (de facto jest to odległość między komórkami). <TABLE BORDER CELLSPACING=8> </TABLE> Marginesy dla komórek Jeśli uznamy, że odstęp między zawartością komórki a jej obramowaniem jest zbyt mały, możemy użyć parametru CELLPADDING (domyślnie wynosi on 1). <TABLE BORDER CELLSPACING=5 CELLPADDING=15> </TABLE> 61
62 Szerokość i wysokość tablicy Dotychczas tworzone tablice, przybierały domyślną szerokość. Parametr WIDTH daje nam możliwość zdefiniowania szerokości tabeli i jest "silniejszy" od innych parametrów, które wpływają na <TABLE BORDER WIDTH=600> </TABLE> Zamiast wartości absolutnej w pikselach możemy także użyć wartości procentowej, np. pół szerokości ekranu przeglądarki. <TABLE BORDER WIDTH=50%> </TABLE> Możemy zdefiniować wysokość tablicy (nie wchodzi w skład HTML 4.0), podając parametr HEIGHT, wyrażony w pikselach lub procencie widocznej strony. W poniższym przykładzie zostały użyte parametry <TABLE BORDER WIDTH="50%" HEIGHT="30%"> 62
63 Szerokość komórki Parametr WIDTH możemy wykorzystać także de zdefiniowania szerokości komórki, umieszczając go w ramach definicji wybranej komórki, np. <TD WIDTH=100> </TD>. Można też podać wartość procentową, która odnosi się do szerokości komórki w ramach tabeli, a nie całego ekranu (akceptują ją Navigator i Internet Explorer, ale HTML 4.0 zaleca unikania tego polecenia). 63
64 Wyrównanie tablicy Parametr ALIGN pozwala wyrównać tabelę w stosunku do marginesów strony i oblewającego ją tekstu, na przykład: <TABLE BORDER ALIGN=right> </TABLE> <TABLE BORDER=10 ALIGN=left> </TABLE> 64
65 Poziome wyrównanie danych w komórkach Parametr ALIGN możemy także wykorzystać do poziomego wyrównania zawartości komórki - środkowania, justowania do lewej i justowania do prawej. Używamy wówczas odpowiednio konstrukcji <TD ALIGN=center></TD> <TD ALIGN=left> </TD> <TD ALIGN=right> </TD>. Wyrównanie jest wyraźnie widoczne, gdy samodzielnie zdefiniujemy szerokość komórki za pomocą WIDTH. 65
66 Pionowe wyrównanie danych w komórkach Parametr VALIGN (vertical) służy do pionowego wyrównania zawartości komórki - do górnego brzegu, do środka i do dolnego brzegu. Używamy wówczas odpowiednio konstrukcji: <TD VALIGN=top> </TD> <TD VALIGN=middle> </TD> <TD VALIGN=bottom> </TD>. Wyrównanie jest wyraźnie widoczne, gdy samodzielnie zdefiniujemy wysokość tabeli za pomocą HEIGTH. 66
67 Kolor dla tablicy Microsoft Internet Explorer i Nescape Communicator pozwalają wykorzystać kolor tła tabeli (HTML 4.0 zaleca rezygnowanie z tego polecenia na rzecz stylów). W tym celu należy w definicji tabeli dodać parametr <BGCOLOR=barwa>, np. <TABLE BORDER HEIGHT=200 BGCOLOR=yellow> Kolory - Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, Green, Purple, Silver, Yellow, Aqua Możemy również "pomalować" poszczególne komórki, wstawiając definicję koloru w ramach definicji komórek, np. TD BGCOLOR="barwa" - HTML 4.0 zaleca rezygnowanie z tego polecenia na rzecz stylów. Jako tła tabeli (czy wręcz poszczególnych komórek) można także użyć gotowego obrazka, stosując polecenie (HTML 4.0 nie przewiduje stosowania tego polecenia w tym kontekście - możemy jednak stosować style): <table background="nazwa_obrazka"> 67
68 Obramowanie tablicy Kolor obramowania tabeli Internet Explorer i Navigator interpretują także kolor obramowania tabeli. W definicji tabeli należy wstawić parametr <BORDERCOLOR=barwa>, np. <TABLE BORDER=5 BORDERCOLOR=red>. Odcień obramowania tabeli Internet Explorer i Navigator pozwalają określić kolor cienia obramowania tabeli. Możemy nadać odrębną barwę cieniowi lewemu i górnemu oraz odrębną prawemu i dolnemu. Na przykład: <TABLE BORDER=5 BORDERCOLORDARK=black BORDERCOLORLIGHT=white> 68
69 Cień w wierszu i komórce Definicję cienia możemy nawet zastosować w wierszu lub w pojedynczej komórce, na przykład: <TR BORDERCOLORDARK=red BORDERCOLORLIGHT=yellow> <TD BORDERCOLORDARK=red BORDERCOLORLIGHT=yellow> 69
70 Podpis pod tablicą Tablica powinna na ogół zawierać tytuł, wyjaśniający jej treść. Należy go umieścić zaraz za ogólną definicją tabeli. Na przykład: <TABLE BORDER WIDTH=300> <CAPTION ALIGN=top>Tytuł tabeli umieszczony u góry</caption> Microsoft Internet Explorer pozwala dodatkowo dosunąć podpis do lewej lub prawej strony, przy użyciu parametru VALIGN. Na przykład: <TABLE BORDER WIDTH=300> <CAPTION VALIGN=top ALIGN=left>Tytuł tabeli umieszczony u góry</caption> 70
71 Nagłówek wiersza i kolumny Domyślnie nagłówki są pokazywane za pomocą czcionki pogrubionej. Nagłówek jest definiowany za pomocą parzystego kodu <TH> </TH>. Tak więc, aby sporządzić tabelicę z wierszem nagłówków kolumn i wierszem danych, należy wprowadzić np. następujący kod: <TABLE BORDER CELLPADDING=10 WIDTH=400> <CAPTION>Wzrost produkcji w latach (w mln USD)</CAPTION> <TR bgcolor="gray"><th>1991</th> <TH>1992</TH><TH>1993</TH> <TH>1994</TH> <TH>1995</TH> </TR> <TR ALIGN=center><TD>1150</TD><TD>1240</TD><TD>1380</TD><TD>1 420</TD><TD>1550</TD></TR> </TABLE> 71
72 Łączenie komórek Komórki danych i nagłówków można ze sobą łączyć. Aby komórka w danym wierszu rozciągała się na x kolumn, należy użyć w jej definicji parametru <TD ROWSPAN=x>. Podobnie można łączyć komórki z nagłówkami <TD COLSPAN=x>. 72
73 Zagnieżdżanie tablic Możliwe jest zagnieżdżanie tablic w komórkach nadrzędnej tablicy. W tym celu należy utworzyć w zwykły sposób definicję tabeli w ramach definicji wybranej komórki tabeli nadrzędnej, czyli w ramach <TD> </TD>. 73
74 Tablice - nagłówek ciało i stopka Podobnie jak cały dokument, także i tablica może mieć swoją część nagłówkową, część główną i stopkę. Elementy te są (teoretycznie) przydatne przy określaniu wyglądu tabeli i wyświetlaniu tabeli: Wydzielenie nagłówka i stopki pozwoli wyświetlać zawsze na ekranie zawarte w nich informacje, gdy tabela przekracza wielkością ekran. Przewijana jest tylko główna część tabeli (dane), a informacje nagłówka i stopki pozostają cały czas widoczne. Analogicznie, gdybyśmy drukowali większą tabelę, która nie mieści się na jednej stronie druku, nagłówek i stopka tabeli będą drukowane na każdej kolejnej stronie, a zmieniać się będą oczywiście dane zawarte w BODY. Na razie ani Internet Explorer, ani Navigator nie interpretują w ten sposób nagłówka i stopki tabeli. Wydzielenie części tabeli pozwala, razem z grupami kolumn, definiować obramowanie. 74
75 Przykład struktury tablicy <TABLE WIDTH=50% BORDER=5 CELLPADDING=5> <THEAD>To jest część nagłówkowa</thead> <TBODY> <TR> <TD>Komórka 11</TD> </TR> <TR> <TD>Komórka 21</TD> </TR> </TBODY> <TFOOT>To jest stopka</tfoot> </TABLE> Znaczniki zamykające są opcjonalne we wszystkich trzech poleceniach. 75
76 Animacja (interpretowana jedynie przez Microsoft Internet Explorer ) Minimalna definicja Marquee ma postać <MARQUEE>Tekst animacji</marquee>. Dodatkowe parametry są wstawiane w ramach otwierającego znacznika, tj. <MARQUEE parametr> Animację można wstawiać także do komórki tabeli, między znaczniki <TD> </TD> Tekst może się poruszać na trzy sposoby BEHAVIOR=SCROLL powoduje, że tekst porusza się od jednego brzegu strony w kierunku drugiego, znika za nim i wypływa ponownie zza pierwszego brzegu. BEHAVIOR=ALTERNATE powoduje, że tekst wyrusza od pierwszego brzegu, dociera do drugiego i "odbija się", powracając w kierunku pierwszego. BEHAVIOR=SLIDE powoduje, że tekst wyrusza od pierwszego brzegu, dociera do drugiego i zatrzymuje się 76
77 Parametry animacji BGCOLOR=kolor pozwala określić kolor tła, czyli drogi, po której porusza się napis. Kolor można podać w postaci numerycznej lub słownej (16 barw). Opis słowny obejmuje: Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua. Początkowy kierunek ruchu jest określany za pomocą parametru DIRECTION=LEFT lub DIRECTION=RIGHT. Domyślny jest kierunek w lewo. Fizyczne wymiary drogi są wyznaczone przez parametry HEIGHT=x (wysokość) i WIDTH=y (szerokość). Można je wyrazić w pikselach lub procencie wysokości i szerokości ekranu. Parametr LOOP=x pozwoli powtórzyć ruch tekstu x razy 77
78 Parametry animacji Parametry HSPACE=x i VSPACE=y pozwalają określić odległość pola animacji w poziomie i/lub w pionie od sąsiadujących elementów, np. tekstu. Skoro możemy definiować kolor tła animacji, konieczna jest także niekiedy zmiana koloru tekstu animacji. Możemy również wprowadzić atrybuty tekstu - pogrubienie, pochylenie lub podkreślenie. Odpowiednie parametry należy wstawiać na zewnątrz definicji MARQUEE. Jak wiemy, definicja koloru fragmentu tekstu ma postać <FONT COLOR=kolor> Tekst </FONT>. Uwaga: akapity nad i pod animacją należy oddzielić od animacji znakiem końca akapitu <P> lub końca wiersza <BR>. 78
79 Parametry animacji Pola animacji można bezpośrednio ze sobą łączyć. Parametr SCROLLAMOUNT=x pozwala określić w pikselach skoki tekstu (ruch odbywa się skokami po x pikseli). Przy niewielkiej wartości ruch jest płynny i wolniejszy, przy dużych - nieco szarpany i szybszy. Parametr SCROLLDELAY=y pozwala określić w milisekundach odstępy czasowe między kolejnymi skokami = 1 sekunda. Parametr ALIGN=abc (top, middle, bottom) pozwala ustalić, gdzie (na jakiej wysokości pola) znajduje się tekst sąsiadujący z animacją. 79
80 Pobieranie informacji - formularze Formularz jest zawarty pomiędzy znacznikami <form>...a... </form> Znacznik <input name= nasza nazwa pola > wyświetla wejściowe pole tekstowe Znacznik <input type= submit > wyświetla przycisk wysyłający do serwera wypełnioną formę Do obsługi formy potrzebny jest skrypt na serwerze Przykład Kod HTML <form> <input name= input test 1 ><br> <input type= submit > </form> Do serwera zostanie wysłane File:///D /path/docwithform.htm?input+test+1 Spacja jest zastępowana przez + 80
81 CSS Kaskadowe Arkusz Stylów Najbardziej podstawowe cechy arkuszy stylów zestawione są poniżej: Nazwa CSS pochodzi od Cascading Style Sheets co oznacza Kaskadowe Arkusze Stylów. Style definiują to w jaki sposób pokazywana będzie zawartość strony definiowana przy pomocy składni HTML. Style są zapisane w Arkuszach Stylów. Zostały dodane do specyfikacji HTML 4.0 po to aby rozwiązać część problemów związanych z wyświetlaniem dokumentów. Zewnętrzne arkusze Stylów pozwalają na zdecydowane zmniejszenie ilości pracy związanej z prezentacją zawartości tworzonej witryny. Zewnętrzne arkusze stylów przechowywane są w plikach z rozszerzeniem CSS popularnie nazywanych plikami css. Style zdefiniowane kilkakrotnie (np. w różnych miejscach projektowanej witryny) stosowane są kaskadowo w celu uzyskania żądanego wyglądu witryny. 81
82 Podstawowe zalety arkuszy stylów Arkusze stylów definiują w jaki sposób prezentowana będzie zawartość opisywana przez konkretne elementy HTML. Zewnętrzne arkusze stylów pozwalają ponadto na zdefiniowanie dla konkretnych elementów HTML: sposobu ich prezentacji oraz zapisaniu tym ustawień w zewnętrznym pliku. Jeden plik definiujący sposób prezentacji zastosować dla wielu stron HTML ujednolicenie sposobu prezentacji całej grupy powiązanych se sobą stron HTML umożliwia błyskawiczne wprowadzanie zmian dotyczących prezentacji wszystkich dokumentów poprzez edycję pojedynczego pliku 82
83 Definiowanie arkuszy stylów wewnątrz dowolnego pojedynczego elementu HTML pozwala na lokalną zmianę prezentacji pojedynczego elementu w dokumencie. Nie ma wpływu na sposób prezentacji identycznego znacznika HTML użytego w innej części dokumentu. w części nagłówkowej pojedynczego dokumentu HTML (wewnątrz znacznika <head>) - ten sposób definicji stylu odnosi się do pojedynczego dokumentu HTML. w pliku zewnętrznym tzw. pliku CSS ma najszerszy zasięg i odnosi się do wszystkich dokumentów używających dany plik.css. 83
84 Kolejność stosowania stylów Style standardowo zdefiniowane w przeglądarce Zewnętrzne arkusze stylów Style wewnętrznie zdefiniowane dla konkretnej strony (wewnątrz znacznika <head>) Style zdefiniowane wewnętrznie dla konkretnego elementu HTML 84
85 Zewnętrzne arkusze stylów Zewnętrzne arkusze stylów idealnie nadają się do zdefiniowania formatowań wielu stron HTML jednocześnie Definicja stylu <head> <link rel="stylesheet" type="text/css" href="mojestyle.css" /> </head> Przykład zawartości pliku zewnętrznego hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} 85
86 Wewnętrzne arkusze stylów Wewnętrzne arkusze stylów powinny być używane w przypadku gdy jeden z dokumentów HTML tworzących witrynę w sieci Web z jakichś powodów posiada inne formatowania w porównaniu z innymi dokumentami. <head> <style type="text/css"> <!-- hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} --> </style> </head> 86
87 Definicja stylu w miejscu użycia Definicja stylu w miejscu użycia nie jest polecanym rozwiązaniem. Możliwość taka istnieje jedynie po to aby zmienić wartość pojedynczego elementu dla którego nie opłaca się definiować globalnych reguł. <p style="color: sienna; margin-left: 20px"> This is a paragraph </p> 87
88 Wybrane właściwości dostępne w arkuszach CSS Właściwości tła Właściwości elementów tekstowych Właściwości kroju pisma Właściwości obramowania Właściwości konturu Właściwości marginesów Właściwości dopełnienia Właściwości list Właściwości tabel Właściwości rozmiarów Właściwości pozycjonowania 88
HTML - podstawowe znaczniki
HTML - podstawowe znaczniki Strukturę dokumentu HTML możemy przedstawić następująco: Tytuł strony W niej zagnieżdżać będziemy pozostałe znaczniki.
Bardziej szczegółowo[ HTML ] Tabele. 1. Tabela, wiersze i kolumny
[ HTML ] Tabele 1. Tabela, wiersze i kolumny Opis tabeli znajdowad się powinien wewnątrz znaczników . W ich ramach umieszczone są definicje rzędów, komórek w rzędach oraz dane w komórkach.
Bardziej szczegółowoHTML (HyperText Markup Language) hipertekstowy język znaczników
HTML (HyperText Markup Language) hipertekstowy język znaczników Struktura dokumentu tytuł strony
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ółowoHTML (HyperText Markup Language)
HTML (HyperText Markup Language) Struktura dokumentu tytuł strony sekcja nagłówka Tutaj wpisujemy
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ółowoProgramowanie WEB PODSTAWY HTML
Programowanie WEB PODSTAWY HTML Najprostsza strona HTML tytuł strony To jest moja pierwsza strona WWW. tytuł strony
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ół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ół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ół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ół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ół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ół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ółowoCzęsto używanym elementem języka HTML są tabele, które wykorzystuje się do wygodnego rozmieszczania informacji i obrazów.
Tabele Często używanym elementem języka HTML są tabele, które wykorzystuje się do wygodnego rozmieszczania informacji i obrazów. Ramy tabeli Ramy tabeli tworzone są za pomocą polecenia: Cała zawartość
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ół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ół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ół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ółowoLABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH TABELE I FORMULARZE
LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH TABELE I FORMULARZE 1. TABELE 1.1. Definicja tabeli Definicja tabeli musi być umieszczona między znacznikami. W ich ramach umieszczane są definicje rzędów
Bardziej szczegółowo2 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ół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ół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ół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ół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ółowoPodstawy HTML. 2. Komendy ujęte są w nawiasy ostre - < > i występują najczęściej parami.
Podstawy HTML 1. HTML - to język formatowania dokumentów elektronicznych, który pozwala uformować tekst oraz połączyć go z grafiką. Dokument HTML ma postać pliku tekstowego, gdzie tekst przeplatany jest
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ółowoCelem ćwiczenia jest zapoznanie z językiem HTML i JavaScript, zasadami tworzenia stron WWW i umieszczania na nich skryptów w języku JavaScript.
Instrukcja laboratoryjna do ćwiczenia: 1. Cel ćwiczenia Strona internetowa w systemach unix-owych Celem ćwiczenia jest zapoznanie z językiem HTML i JavaScript, zasadami tworzenia stron WWW i umieszczania
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ół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ół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ółowoSpecyfikacja techniczna dot. mailingów HTML
Specyfikacja techniczna dot. mailingów HTML Informacje wstępne Wszystkie składniki mailingu (pliki graficzne, teksty, pliki HTML) muszą być przekazane do melog.com dwa dni albo maksymalnie dzień wcześniej
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ół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ół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ół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ółowoHyper 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ółowoJęzyki programowania wysokiego poziomu. HTML cz.2.
Języki programowania wysokiego poziomu HTML cz.2. Model pudełkowy HTML Elementy blokowe w tym table oraz div są wyświetlane według tzw. modelu pudełkowego: Zawartość Odstęp (padding) Obramowanie (border)
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ół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ółowoPierwsza 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ółowoTabela z komórkami nagłówkowymi (wyróżnionymi)
Tabela z komórkami nagłówkowymi (wyróżnionymi) Nagłówek poziomy ... ... Nagłówek pionowy ... ... Tytuł tabeli tytuł tabeli... gdzie
Bardziej szczegółowo2. Projektowanie stron WWW podstawowe informacje
1. Uczeń: Uczeń: 2. Projektowanie stron WWW podstawowe informacje a. 1. Cele lekcji i. a) Wiadomości zna podstawowe zasady tworzenia stron internetowych, rozróżnia tryb tekstowy tworzenia stron www od
Bardziej szczegółowo1. Przypisy, indeks i spisy.
1. Przypisy, indeks i spisy. (Wstaw Odwołanie Przypis dolny - ) (Wstaw Odwołanie Indeks i spisy - ) Przypisy dolne i końcowe w drukowanych dokumentach umożliwiają umieszczanie w dokumencie objaśnień, komentarzy
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ół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ółowoWidżety KIWIPortal. tworzenie umieszczanie na stronach internetowych opcje zaawansowane. Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.
Widżety KIWIPortal tworzenie umieszczanie na stronach internetowych opcje zaawansowane Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.3 Strona 1 z 17 1 SPIS TREŚCI 2 Metody osadzania widżetów... 3 2.1
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ółowoZakres treści Czas. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów
Aplikacje internetowe KL. III Rok szkolny: 011/01 Nr programu: 31[01]/T,SP/MENIS/004.06.14 Okres kształcenia: łącznie ok. 180 godz. lekcyjne Wojciech Borzyszkowski Zenon Kreft Moduł Bok wprowadzający Podstawy
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ółowoĆWICZENIA Z JĘZYKA HTML. 1. Znaczniki. 2. Struktura dokumentu HTML. 3. Tworzymy stronę WWW Podróże po stolicach Europy
Informatyka - podstawowe tematy WSzPWN - Język HTML, podstawy str. 1 ĆWICZENIA Z JĘZYKA HTML Struktura dokumentu, znaczniki, tabele, hiperłacza Być może trudno w to uwierzyć, jednak strony WWW są tekstem
Bardziej szczegółowoFormat 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ółowoobecnie tabeli nie stosuje się do budowy struktury witryny (stosuje się za to pozycjonowanie elementów i warstwy) faktycznie wymagają
Tabela obecnie tabeli nie stosuje się do budowy struktury witryny (stosuje się za to pozycjonowanie elementów i warstwy) tabel używa się wyłącznie do prezentacji tych danych, które tego tabel używa się
Bardziej szczegółowoCSS jest is an skrótem od Cascading Style Sheets (Kaskadowe Arkusze Stylów).
Co to jest CSS? CSS jest is an skrótem od Cascading Style Sheets (Kaskadowe Arkusze Stylów). Co mogę zrobić z CSS? CSS jest językiem stylu określającego układ graficzny dokumentów HTML. Na przykład, CSS
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ółowoI. 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ółowoE.14.1 Tworzenie stron internetowych / Krzysztof T. Czarkowski, Ilona Nowosad. Warszawa, Spis treści
E.14.1 Tworzenie stron internetowych / Krzysztof T. Czarkowski, Ilona Nowosad. Warszawa, 2014 Spis treści Przewodnik po podręczniku 8 Wstęp 10 1. Hipertekstowe języki znaczników 1.1. Elementy i znaczniki
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ółowoWYMAGANIA 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ółowoWybrane 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ółowo5-6. Struktura dokumentu html. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów
Aplikacje internetowe KL. III Rok szkolny: 013/01 Nr programu: 31[01]/T,SP/MENIS/00.06.1 Okres kształcenia: łącznie ok. 170 godz. lekcyjne Moduł Bok wprowadzający 1. Zapoznanie z programem nauczania i
Bardziej szczegółowoWymagania edukacyjne: Statyczne witryny internetowe (na podstawie programu nr 351203)
Wymagania edukacyjne: Statyczne witryny internetowe (na podstawie programu nr 351203) Technikum - kl. 3 Td, semestr 5 i 6 Ocena niedostateczna dopuszczająca Wymagania edukacyjne wobec ucznia: Uczeń nie
Bardziej szczegółowoURL: http://www.ecdl.pl
Syllabus WEBSTARTER wersja 1.0 Polskie Towarzystwo Informatyczne 2007 Copyright wersji angielskiej: Copyright wersji polskiej: The European Computer Driving Licence Foundation Ltd. Polskie Towarzystwo
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ółowoPodstawy technologii WWW
Podstawy technologii WWW Ćwiczenie 8 PHP, czyli poczatki nowej, dynamicznej znajomosci Na dzisiejszych zajęciach rozpoczniemy programowanie po stronie serwera w języku PHP. Po otrzymaniu żądania serwer
Bardziej szczegółowoPokaz slajdów na stronie internetowej
Pokaz slajdów na stronie internetowej... 1 Podpisy pod zdjęciami... 3 Publikacja pokazu slajdów w Internecie... 4 Generator strony Uczelni... 4 Funkcje dla zaawansowanych użytkowników... 5 Zmiana kolorów
Bardziej szczegółowoCSS - layout strony internetowej
www.math.uni.lodz.pl/ radmat Ćwiczenie 1 Proszę przy pomocy listy stworzyć menu pionowe o następujących własnościach: Ćwiczenie 1 Proszę przy pomocy listy stworzyć menu pionowe o następujących własnościach:
Bardziej szczegółowoMS Word 2010. Długi dokument. Praca z długim dokumentem. Kinga Sorkowska 2011-12-30
MS Word 2010 Długi dokument Praca z długim dokumentem Kinga Sorkowska 2011-12-30 Dodawanie strony tytułowej 1 W programie Microsoft Word udostępniono wygodną galerię wstępnie zdefiniowanych stron tytułowych.
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ółowoKaskadowość 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ółowoWprowadzenie 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ół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ół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ółowoProgramowanie 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ółowoO 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ół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ółowoZnaczniki zbudowane są ze znaków '< >', pomiędzy którymi znajduje się litera lub krótki tekst okreslający rodzaj znacznika.
Lekcja 1: Znaczniki Charakterystyczną cechą kodu HTML są tzw. znaczniki (tagi), które służą do formatowania wprowadzanych na stronę internetową treści, informując przeglądarkę jak powinna wyświetlić teksty
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ół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ółowoElementarz 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ółowoBazy danych i strony WWW
Bazy danych i strony WWW Obsługa baz danych poprzez strony WWW Niezbędne narzędzia: serwer baz danych np. MySQL serwer stron WWW np. Apache przeglądarka stron WWW interpretująca język HTML język skryptowy
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ółowoKonfiguracja szablonu i wystawienie pierwszej aukcji allegro
Konfiguracja szablonu i wystawienie pierwszej aukcji allegro Metod na wystawienie aukcji na allegro jest co najmniej 2. W pierwszej przechodzimy do zakładki MOJA SPRZEDAŻ, w USTAWIENIACH SPRZEDAŻY odnajdujemy
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ół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ół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ółowoSylabus Moduł 2: Przetwarzanie tekstów
Sylabus Moduł 2: Przetwarzanie tekstów Niniejsze opracowanie przeznaczone jest dla osób zamierzających zdać egzamin ECDL (European Computer Driving Licence) na poziomie podstawowym. Publikacja zawiera
Bardziej szczegółowoROZDZIAŁ 3 TWORZENIE STRONY INTERNETOWEJ Z WYKORZYSTANIEM JĘZYKA HTML
ROZDZIAŁ 3 TWORZENIE STRONY INTERNETOWEJ Z WYKORZYSTANIEM JĘZYKA HTML TEMAT 3.1 WPROWADZENIE DO ZNACZNIKÓW JĘZYKA HTML LEKCJA 23 1 9 9 10 15.5. HTML język WWW Protokoły TCP/IP zapewniają działanie sieci
Bardziej szczegółowoECDL/ICDL Przetwarzanie tekstów Moduł B3 Sylabus - wersja 5.0
ECDL/ICDL Przetwarzanie tekstów Moduł B3 Sylabus - wersja 5.0 Przeznaczenie sylabusa Dokument ten zawiera szczegółowy sylabus dla modułu ECDL/ICDL Przetwarzanie tekstów. Sylabus opisuje zakres wiedzy i
Bardziej szczegółowoNazwa 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ółowoKATEGORIA OBSZAR WIEDZY
Moduł 3 - Przetwarzanie tekstów - od kandydata wymaga się zaprezentowania umiejętności wykorzystywania programu do edycji tekstu. Kandydat powinien wykonać zadania o charakterze podstawowym związane z
Bardziej szczegółowoSpis treści CZĘŚĆ I JĘZYK SIECI 17. Wstęp 13. Rozdział 1 Wprowadzenie do HTML5 19. Rozdział 2 Znajomość znaczników HTML5 37
Spis treści Wstęp 13 CZĘŚĆ I JĘZYK SIECI 17 Rozdział 1 Wprowadzenie do HTML5 19 Tworzenie przy pomocy znaczników: przegląd 20.Wprowadzanie nowych elementów HTML5 21 Korzystanie z kontynuowanych znaczników
Bardziej szczegółowoZadanie 9. Projektowanie stron dokumentu
Zadanie 9. Projektowanie stron dokumentu Przygotowany dokument można: wydrukować i oprawić, zapisać jako strona sieci Web i opublikować w Internecie przekonwertować na format PDF i udostępnić w postaci
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ółowoDokumentacja WebMaster ver 1.0
1 Wstęp Dokumentacja WebMaster ver 1.0 Dokumentacja ta przeznaczona jest dla webmasterów, grafików, programistów. Przedstawia ona strukturę aplikacji SOTEeSKLEP, opisuje działanie oraz wyjaśnia m.in. jak
Bardziej szczegółowoZadanie 1. Stosowanie stylów
Zadanie 1. Stosowanie stylów Styl to zestaw elementów formatowania określających wygląd: tekstu atrybuty czcionki (tzw. styl znaku), akapitów np. wyrównanie tekstu, odstępy między wierszami, wcięcia, a
Bardziej szczegółowoZawartość specyfikacji:
Zawartość specyfikacji: Wielkość, waga i kodowanie Umieszczanie obrazków w kreacji Elementy niedopuszczalne Nazewnictwo plików Stopka mailingu Nie spełniam wymagań pracodawcy Waga, wielkość i kodowanie
Bardziej szczegółowo