HTML + CSS = strony internetowe Krzysztof Geras

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

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

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.

?

<meta http-equiv="content-type" content="text/html; charset=iso "> 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

Instrukcje HTML to zawsze (prawie) pary...

Jak dodać link? super stronka

Jak dodać obrazek (wycentrowany)?

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

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

Jak dodać słowa kluczowe?

Po co komu css i jakieś standardy?!

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.

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.

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

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

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

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

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

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

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

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

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

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

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) ● d/lab7/index.html

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