{"id":1281,"date":"2014-06-09T15:34:19","date_gmt":"2014-06-09T15:34:19","guid":{"rendered":"http:\/\/katarzyna.klessa.pl\/?page_id=1281"},"modified":"2016-06-13T17:02:01","modified_gmt":"2016-06-13T17:02:01","slug":"prezentacja-wynikow-ankiety-on-line-w-html","status":"publish","type":"page","link":"http:\/\/katarzyna.klessa.pl\/?page_id=1281","title":{"rendered":"Prezentacja wynik\u00f3w ankiety on-line w postaci HTML"},"content":{"rendered":"

Powr\u00f3t do: Teaching<\/a> -> Informatyka. Edukacja informatyczna<\/a> <\/small><\/p>\n

\u0106wiczenia<\/strong><\/h2>\n

1. Przygotowanie, narz\u0119dzia, materia\u0142y<\/h3>\n

W \u0107wiczeniach prosz\u0119 wykorzysta\u0107 program Notepad 2 (najpierw sprawdzi\u0107 czy jest na komputerze, je\u015bli nie prosz\u0119 znale\u017a\u0107 aplikacj\u0119 tutaj:\u00a0http:\/\/sourceforge.net\/<\/a>\u00a0np. tu:\u00a0http:\/\/sourceforge.net\/projects\/notepad2\/?source=directory<\/a>) oraz raport dotycz\u0105cy Pa\u0144stwa ankiety on-line.<\/p>\n

Prosz\u0119 pobra\u0107 materia\u0142y<\/strong>: tutaj <\/a>oraz tutaj (css)<\/a> i zapisa\u0107 na dysku z zachowaniem struktury katalog\u00f3w. W paczce .zip znajduj\u0105 si\u0119: pliki index.html oraz wykresy_imie.html, trzy przyk\u0142adowe obrazki oraz katalog ze stylami o nazwie ‘css’. Pa\u0144stwa zadaniem w tym bloku jest wprowadzenie zmian do tych plik\u00f3w wg instrukcji jak ni\u017cej. Przy wprowadzaniu zmian nale\u017cy zachowa\u0107 szczeg\u00f3ln\u0105 ostro\u017cno\u015b\u0107 przy zmianach tag\u00f3w, ich nawias\u00f3w itp., ka\u017cde usuni\u0119cie nawiasu (< i\/lub >) mo\u017ce powodowa\u0107 du\u017ce zmiany w dokumencie. Przy wprowadzaniu zmian w nazwach plik\u00f3w, np. obrazk\u00f3w, nale\u017cy pami\u0119ta\u0107, \u017ce wielko\u015b\u0107 liter ma znaczenie oraz \u017ce w nazwach plik\u00f3w lepiej unika\u0107 polskich czcionek i spacji (zast\u0105pi\u0107 je podkre\u015blnikiem).<\/p>\n

Og\u00f3lne informacje o podstawowych tagach HTML i stylach CSS mo\u017cna znale\u017a\u0107\u00a0tutaj<\/a> oraz w (wielu) poradnikach internetowych, np.\u00a0http:\/\/www.kurshtml.edu.pl\/<\/a>oraz\u00a0http:\/\/www.w3schools.com\/html\/DEFAULT.asp<\/a><\/p>\n

2. Zmiany\u00a0dotycz\u0105ce pliku index.html<\/em><\/h3>\n

Zmiany dotycz\u0105ce pliku index.html (czyli “startowym” pliku Pa\u0144stwa strony; pliku strony g\u0142\u00f3wnej):<\/p>\n

w cz\u0119\u015bci nag\u0142\u00f3wkowej (<head><\/span>) nale\u017cy:<\/p>\n

zmieni\u0107 tytu\u0142 <\/span>strony (zamiast ‘imie’ wpisujemy nasze imi\u0119), opis <\/span>(description) oraz s\u0142owa kluczowe <\/span>(keywords), tak aby pasowa\u0142y do naszej zawarto\u015bci;<\/p>\n

w cz\u0119\u015bci g\u0142\u00f3wnej (<body><\/span>) nale\u017cy:<\/p>\n

wstawi\u0107 nasze w\u0142asne opisy <\/span>wynik\u00f3w z raportu; mo\u017cna stosowa\u0107 dowoln\u0105 liczb\u0119 paragraf\u00f3w tekstu (minimum 2). Znaki pocz\u0105tku i ko\u0144ca paragrafu to <p><\/p>. Znak nowej linii to <br>;<\/p>\n

zmieni\u0107 nazw\u0119 w odsy\u0142aczu do podstrony<\/span> (obecna nazwa to\u00a0wykresy_imie.html , prosz\u0119 zamiast ‘imie’ wpisa\u0107 swoje imi\u0119);<\/p>\n

zmodyfikowa\u0107 adresy w\u00a0linkach\u00a0do stron zewn\u0119trznych<\/span> w Internecie (w tej chwili s\u0105 tam linki przyk\u0142adowe). Nowe linki powinny nawi\u0105zywa\u0107 do tematyki ankiety albo wskazywa\u0107 na stron\u0119\/y naszej Uczelni.<\/p>\n

 <\/p>\n

3. Zmiany dotycz\u0105ce pliku\u00a0wykresy_imie.html<\/em><\/h3>\n

Zmiany dotycz\u0105ce pliku\u00a0wykresy_imie.html (plik podstrony)<\/p>\n

zmieni\u0107 nazw\u0119 <\/span>pliku (obecna nazwa to\u00a0wykresy_imie.html , prosz\u0119 zamiast ‘imie’ wpisa\u0107 swoje imi\u0119, nazwa powinna by\u0107 pisana identycznie jak w odsy\u0142aczu do podstrony w pliku index.html);<\/p>\n

skopiowa\u0107<\/span> zmodyfikowan\u0105 przez Pa\u0144stwa cz\u0119\u015b\u0107 nag\u0142\u00f3wkow\u0105 (od tagu <head<\/span>> do <\/head<\/span>>)\u00a0z pliku index.html (oba pliki .html to pliki tej samej strony, dlatego maj\u0105 t\u0119 sam\u0105 cz\u0119\u015b\u0107 nag\u0142\u00f3wkow\u0105 opisuj\u0105c\u0105 metadane dla Pa\u0144stwa strony)<\/p>\n

przygotowa\u0107 co najmniej 2 obrazki<\/span> (jeden z nich powinien by\u0107 wykresem wynik\u00f3w Pa\u0144stwa ankiety\u00a0(drugi mo\u017ce by\u0107 tak\u017ce wykresem lub innym obrazkiem\/zdj\u0119ciem nawi\u0105zuj\u0105cym tematycznie do tematyki ankiety) i zapisa\u0107 je w katalogu strony<\/p>\n

prosz\u0119 nazwa\u0107<\/span> pliki obrazk\u00f3w tak, aby by\u0142y one identyczne jak te w wierszach wskazuj\u0105cych na obrazki w pliku .html (mo\u017cna nazwa\u0107 je tak jak istniej\u0105ce obrazki, nadpisuj\u0105c tamte lub nada\u0107 im nowe nazwy i w\u00f3wczas zaktualizowa\u0107 odpowiednio nazwy w pliku .html)<\/p>\n

 <\/p>\n

4. Zmiany w pliku style.css<\/em><\/h3>\n

Zmiany w pliku style.css (plik odpowiadaj\u0105cy za wygl\u0105d strony: jej kolorystyk\u0119, kroje czcionek, obramowania itd., nazywany arkuszem styl\u00f3w – style sheet<\/span>):<\/p>\n

W pliku css znajduj\u0105 si\u0119 elementy, odpowiadaj\u0105ce tagom z dokument\u00f3w HTML. Zmieniaj\u0105c warto\u015bci dla parametr\u00f3w w nawiasach klamrowych, mo\u017cemy zmieni\u0107 wygl\u0105d naszych obu dokument\u00f3w HTML jednocze\u015bnie. Zasada dzia\u0142ania styl\u00f3w jest podobna jak w Open\/Libre Office czy innych edytorach tekstu: zmieniamy warto\u015b\u0107 w stylach i dzia\u0142a ona na wszystkie wyst\u0105pienia danego element\u00f3w w tek\u015bcie. Tak samo tutaj – gdy zmienimy wygl\u0105d t\u0142a (element body, warto\u015b\u0107 dla ‘background-color’) w pliku ze stylami – zmieni si\u0119 on we wszystkich naszych podstronach, tych, gdzie wpisali\u015bmy w nag\u0142\u00f3wku strony\u00a0(<head<\/span>>) linijk\u0119:\u00a0<link rel=”stylesheet” type=”text\/css” href=”css\/style.css” \/><\/p>\n

Pa\u0144stwa zadaniem jest dokonanie modyfikacji w arkuszu styl\u00f3w<\/span>, tak aby strona wygl\u0105da\u0142a inaczej ni\u017c po \u015bci\u0105gni\u0119ciu jej na potrzeby zaj\u0119\u0107;<\/p>\n

przyk\u0142adowa lista element\u00f3w i warto\u015bci<\/span> mog\u0105cych wyst\u0119powa\u0107 w arkuszach styl\u00f3w css jest np.\u00a0tutaj<\/a>.<\/p>\n

paleta kolor\u00f3w dla HTML<\/span>, kolory oznacza si\u0119 numerami w kodzie szesnastkowym, gdzie ka\u017cda para cyfr odpowiada warto\u015bciom RGB – red, green, blue \u00a0(wpisuj\u0105c numery w odpowiednie miejsca dotycz\u0105ce ustawie\u0144 kolor\u00f3w w arkuszu style.css zmieniamy kolory wy\u015bwietlane na stronie), np.\u00a0http:\/\/www.w3schools.com\/html\/html_colors.asp<\/a> lub\u00a0http:\/\/www.kurshtml.edu.pl\/html\/wykaz_kolorow,kolory.html<\/a><\/p>\n

Obja\u015bnienia dla zawarto\u015bci pliku style.css:<\/p>\n

body <\/strong><\/span>-informacje dla cz\u0119\u015bci g\u0142\u00f3wnej okna strony, np. t\u0142o, czcionki, marginesy\u00a0(dotyczy wszystkiego co w plikach HTML uj\u0119te jest w tagi <body><\/body>)<\/p>\n

p <\/strong><\/span>– wygl\u0105d paragrafu tekstu (dotyczy wszystkiego co w plikach HTML uj\u0119te jest w tagi <p><\/p>)<\/p>\n

h1<\/span><\/strong> – wygl\u0105d dla:\u00a0nag\u0142\u00f3wek poziomu 1 – najwi\u0119kszy\u00a0(dotyczy wszystkiego co w plikach HTML uj\u0119te jest w tagi <h1><\/h1>)<\/p>\n

h2<\/span><\/strong> – wygl\u0105d\u00a0dla:\u00a0nag\u0142\u00f3wek poziomu 2\u00a0(dotyczy wszystkiego co w plikach HTML uj\u0119te jest w tagi <h2><\/h2>)<\/p>\n

h3<\/span><\/strong> – wygl\u0105d\u00a0dla:\u00a0nag\u0142\u00f3wek poziomu 3\u00a0(dotyczy wszystkiego co w plikach HTML uj\u0119te jest w tagi <h3><\/h3>)<\/p>\n

a <\/span><\/strong>– wygl\u0105d\u00a0dla:\u00a0odsy\u0142acze\/linki (dotyczy wszystkiego co w plikach HTML uj\u0119te jest w tagi <a><\/a>)<\/p>\n

a<\/strong>:<\/span>hover <\/span>–\u00a0wygl\u0105d\u00a0dla:odsy\u0142acz\/link, na kt\u00f3ry nadjedziemy myszk\u0105, bez klikania (dotyczy r\u00f3wnie\u017c zawarto\u015bci uj\u0119tej w tagi\u00a0<a><\/a>, ale w szczeg\u00f3lnych przypadkach)<\/p>\n

a<\/strong>:<\/span>visited <\/span>–\u00a0wygl\u0105d\u00a0dla:\u00a0odsy\u0142acz\/link wcze\u015bniej odwiedzony – mo\u017ce mie\u0107 inny kolor ni\u017c standardowe linki \u00a0(dotyczy r\u00f3wnie\u017c zawarto\u015bci uj\u0119tej w tagi\u00a0<a><\/a>, ale w szczeg\u00f3lnych przypadkach)<\/p>\n

img<\/span><\/strong> –\u00a0wygl\u0105d\u00a0dla obrazk\u00f3w, ich ramki i marginesy\u00a0(dotyczy wszystkiego co w plikach HTML uj\u0119te jest w tagi <img><\/img>)<\/span><\/p>\n


\n<\/span><\/p>\n

Zaliczenie bloku<\/h3>\n

Prosz\u0119 spakowa\u0107 ca\u0142y folder z wszystkimi plikami strony i przes\u0142a\u0107 mailem na adres klessa at amu.edu.pl.<\/p>\n","protected":false},"excerpt":{"rendered":"

Powr\u00f3t do: Teaching -> Informatyka. Edukacja informatyczna \u0106wiczenia 1. Przygotowanie, narz\u0119dzia, materia\u0142y W \u0107wiczeniach prosz\u0119 wykorzysta\u0107 program Notepad 2 (najpierw sprawdzi\u0107 czy jest na komputerze, je\u015bli nie prosz\u0119 znale\u017a\u0107 aplikacj\u0119 tutaj:\u00a0http:\/\/sourceforge.net\/\u00a0np. tu:\u00a0http:\/\/sourceforge.net\/projects\/notepad2\/?source=directory) oraz raport dotycz\u0105cy Pa\u0144stwa ankiety on-line. Prosz\u0119 pobra\u0107 materia\u0142y: tutaj oraz tutaj (css) i zapisa\u0107 na dysku z… Continue reading → <\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":650,"menu_order":1,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-1281","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/katarzyna.klessa.pl\/index.php?rest_route=\/wp\/v2\/pages\/1281","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/katarzyna.klessa.pl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/katarzyna.klessa.pl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/katarzyna.klessa.pl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/katarzyna.klessa.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1281"}],"version-history":[{"count":32,"href":"http:\/\/katarzyna.klessa.pl\/index.php?rest_route=\/wp\/v2\/pages\/1281\/revisions"}],"predecessor-version":[{"id":2394,"href":"http:\/\/katarzyna.klessa.pl\/index.php?rest_route=\/wp\/v2\/pages\/1281\/revisions\/2394"}],"up":[{"embeddable":true,"href":"http:\/\/katarzyna.klessa.pl\/index.php?rest_route=\/wp\/v2\/pages\/650"}],"wp:attachment":[{"href":"http:\/\/katarzyna.klessa.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}