Pobierz prezentację
Pobieranie prezentacji. Proszę czekać
OpublikowałWeronika Bednarczyk Został zmieniony 8 lat temu
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
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> 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?!
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
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
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
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
Podobne prezentacje
© 2024 SlidePlayer.pl Inc.
All rights reserved.