1 HTML + CSS = strony internetowe Krzysztof Geras

2 FAKTY I MITY Czym nie jest HTML: ● programem do tworzenia stron internetowych, ● interpreterem skryptów.

3 FAKTY I MITY Co to jest HTML: ● Hyper Text Markup Language (hipertekstowy język znaczników), ● język składający się ze znaczników oraz reguł ich poprawnego stosowania, stosowany do pisania stron WWW

4 Jak stworzyć stronę WWW w dużym skrócie 1. Otworzyć notatnik (lub inny edytor). 2. Wpisać treść. 3. Zapisać z rozszerzeniem.htm lub.html. 4. Umieścić na serwerze.

5 ?

6 Tu wstaw tytuł strony Bazy danych to najciekawszy przedmiot na MIMie! Wariant języka HTML Informacja dla przeglądarki, że to HTML Nagłówek Informacja o kodowaniu (języku) Tytuł To, co widać w przeglądarce

7 Instrukcje HTML to zawsze (prawie) pary...

8 Jak dodać link? super stronka http://www.mimuw.edu.pl/~walen http://www.mimuw.edu.pl/~walen

9 Jak dodać obrazek (wycentrowany)?

10 Jak formatować tekst?... nowy paragraf przejście do następnej linii.. tytuł stopnia pierwszego... pogrubienie... pochylenie... podkreślenie... przekreślenie... lista wypunktowana... lista numerowana... zmiana koloru czcionki... zmiana rozmiaru czcionki, od 1 do 7

11 Jak dodać formularz? pole tekstowe pole z hasłem checkbox radiobox programowanie obiektowe bazy danych lista rozwijana bd obszar tekstowy przycisk wysyłania

12 Jak dodać słowa kluczowe?

13 Po co komu css i jakieś standardy?!

14

15

16

17

18 FAKTY I MITY CSS: ● Cascading Style Sheets (kaskadowe arkusze stylów), ● język służący do opisu sposobu wyświetlania stron WWW, ● rozdzielenie struktury i prezentacji dokumentów, ● wszystkie polecenia dotyczące formatowania można umieścić w jednym miejscu.

19 Jak stworzyć styl? Bazy Danych Selektor - to, co zamierzamy stylizować, np. p, h1. Cecha - jakie cechy, np. color. Wartość - jak, w przypadku kolor np. navy, green.

20 Jak zwiększyć zakres stylu?... Span – formatuje elementy wyświetlane w linii. Div – formatuje elementy wyświetlane wewnątrz całego bloku, wewnątrz, którego mogą być inne znaczniki

21 Jak zwiększyć zakres stylu? selektor { cecha: wartość; cecha2: wartość2... } selektor2 { cecha: wartość; cecha2: wartość2... } Rozszerza formatowanie na całą stronę

22 Jak zwiększyć zakres stylu? Rozszerza formatowanie na wszystkie strony, w których umieścimy link do arkusza

23 Jeszcze inaczej Alternatywne arkusze stylów do zmieniania w przeglądarce Import zewnętrznego arkusza stylów @import url(adres zewnętrznego arkusza stylów);

24 Kaskadowość ● Styl lokalny (inline) Styl lokalny ● Rozciąganie stylu (SPAN) Rozciąganie stylu ● Wydzielone bloki (DIV) Wydzielone bloki ● Wewnętrzny arkusz stylów Wewnętrzny arkusz stylów ● Import stylów do wewnętrznego arkusza Import stylów ● Zewnętrzny arkusz stylów Zewnętrzny arkusz stylów ● Import stylów do zewnętrznego arkusza Import stylów

25 Jak sprawdzić czy strona jest zgodna ze standardami? validator.w3.org www.validome.org lub program Tidy: tidy.sourceforge.net

26

27

28 HTML w3.org/TR/REC-html40/ CSS w3.org/TR/REC-CSS2/ SPECYFIKACJE

29 EDYTORY Tekstowe ● Notatnik (lub linuksowe odpowiedniki) ● EdHTML (Windows) binboy.sphere.pl/index.php?show=download&p2=968 ● Nvu nvu.com

30

31 Wysiwyg (what you see is what you get) EDYTORY ● Adobe Dreamweaver (Windows, MacOS) $399 lub adobe.com/go/trydreamweaver ● SeaMonkey seamonkey-project.org ● Nvu nvu.com

32

33 PRZYSZŁOŚĆ ● XHTML (Extensible HyperText Markup Language) - dokumenty pisane w XHTML są zgodne z XML ● HTML 5

34 Kursy, tutoriale itp. ● webmaster.helion.pl/kurshtml ● html.webinside.pl ● kurshtml.boo.pl ● signs.pl/html ● oswd.org (gotowe szablony) ● newsgator.com/download/products/ts3lite.ex e (TopStyle - edytor css) ● www.mimuw.edu.pl/~sroka/archiwalne/2007b d/lab7/index.html

35 students.mimuw.edu.pl/~kg248264/htmlcss_Krzysztof_Geras.odp