1 / 47

Wprowadzenie do tworzenia stron internetowych

Wprowadzenie do tworzenia stron internetowych. Szymon Bohdanowicz. Jak to działa, czyli kilka słów o architekturze(znów!). Klient czyli przeglądarka. Rozumie przesłaną treść i zamienia ją na określony obraz widziany przez użytkownika. Pozwala podejrzeć treść strony.

janice
Download Presentation

Wprowadzenie do tworzenia stron internetowych

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Wprowadzenie do tworzenia stron internetowych Szymon Bohdanowicz

  2. Jak to działa, czyli kilka słów o architekturze(znów!).

  3. Klient czyli przeglądarka. • Rozumie przesłaną treść i zamienia ją na określony obraz widziany przez użytkownika. • Pozwala podejrzeć treść strony. • Różne przeglądarki w różny sposób mogą wyświetlać(lub nie) określoną treść. • Przykłady: FireFox, IExplorer, Chrome, Opera itd.

  4. Edytory – czyli narzędzia do tworzenia stron. • Służą do edycji treści stron napisanych w html, css + dodatkowo mogą pomagać w pisaniu php, JavaScript itp. • Podpowiadają, sprawdzają poprawność, tworzą podgląd i jeszcze więcej. • Generalnie mamy do czynienia z dwoma różnymi typami edytorów: tradycyjne(tekstowe) i WYSIWYG (co widzisz to dostajesz)

  5. Tradycyjne • KED • Pajączek(płatny) • HateML • I wiele innych(np. Eclipse, NetBeans) WYSIWYG • FrontPage(SharePoint Designer) • Dreamweaver • I wiele innych

  6. WYSIWYG • Nie musisz znać html’a, css • Cały kod strony generuje się automatycznie • Wygodny (czas wcale nie) interfejs graficzny (przeciąganie komponentów) • Nie masz pełnej kontroli nad treścią • Duża nadprodukcja kodu • Częste błędy podczas wyświetlania • Problemy w sytuacji gdy stronę trzeba poprawić za pomocą edytora tekstowego

  7. Na zajęciach użyjemy KEDu • Jest lekki – nie zjada pamięci, nie muli • Jest wygodny - interfejs jest dość sensowny • Jest efektywny – wszystko wydaje się działać jak należy • Jest po polsku! • Jest za darmo! • Link do ściągnięcia na stronie: http://uslugiwedukacji.wikispaces.com/Tworzenie+stron+internetowych

  8. HTML – to trzeba znać! • O XMLu mówiliśmy -> xHtml(obecnie chyba popularniejszy) jest XMLem • Odpalamy przeglądarkę -> zakładka widok -> źródło strony – co tam widać?? • Kto zna? Co może o nim powiedzieć?

  9. Struktura strony <htmlxmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <metahttp-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <metaname="Description" content="Tu wpisz opis zawartości strony" /> <metaname="Keywords" content="Tu wpisz wyrazy kluczowe rozdzielone przecinkami" /> <title>Tu wpisz tytuł strony</title> </head> <body> Tu wpisuje się treść strony </body> </html> Szablon pustej strony.html

  10. Kodowanie po polsku • Standard kodowania wyznacza polska norma PN-91/T-42115, nazywana często ISO-8859-2 <metahttp-equiv="Content-Type" content="text/html; charset=iso-8859-2"> • Druga metoda - kodowanie Windows CP 1250 (windows-1250) - jest charakterystyczna dla MS Windows. Bardzo często powoduje pojawienie się problemów przy wyświetlaniu znaków. <metahttp-equiv="Content-Type" content="text/html; charset= windows-1250">

  11. Znaczniki = tagi = markery Większość ze znaczników to znaczniki obejmujące (parzyste), składające się ze znacznika otwierającego i zamykającego, na przykład: <H1> Instrukcja obsługi </H1> Tekst w tym obszarze zaznaczony jest jako nagłówek (header) pierwszego poziomu, czyli zostanie wyświetlony największą czcionką zdefiniowaną dla nagłówków. Istnieje sześć poziomów nagłówków w HTML-u: H1H2H3H4H5H6 Szablon z nagłówkami.html Szablon z nagłówkami.html

  12. Atrybuty znaczników Niektóre znaczniki występują pojedynczo, np.: • <hr> - tworzy linię poziomą, • <br> - wymusza przejście do następnego wiersza, • <img> - wstawia grafikę, • <meta> - dostarcza informacji o dokumencie. Znaczniki można zagnieżdżać, podobnie jak nawiasy w matematyce: <B><I> fragment tekstu </I></B> Wiele znaczników może lub musi posiadać określone atrybuty, np.: <FONT SIZE="4" COLOR="red">tekst </FONT> Atrybut COLOR może przyjmować różne wartości(angielskie słowa): aqua, brown, cyan, gold, gray, green, lime, magenta, maroon, navy, olive, orange, pink, plum, purple, itp. Lub kody (RGB) kolorów -> http://www.statom.pl/HTML/kolory.html

  13. Znaczniki META • W nagłówku dokumentu umieszcza się zwykle informacje ważne dla przeglądarek i wyszukiwarek – są to tzw. znaczniki META. • <metahttp-equiv="Content-Type" content="text/html;charset=iso-8859-2"> • <metahttp-equiv="Created" content="5-10-02"> • <metahttp-equiv="Content-Language" content="pl"> • <metaname="description" content="Podstawy HTML"> • <metaname="Author" content="Szymon Bohdanowicz"> • <metaname="keywords" content="HTML, strony WWW">

  14. Podstawowe znaczniki HTML jest językiem bezformatowym, w którym ignorowane są przejścia do nowego wiersza i wielokrotne spacje, zaś wymaganą strukturę dokumentu nadaje się za pomocą specjalnych znaczników. • <P>...</P> (paragraph) • <BR>(break) • <HR> (horizontal rule line) • <PRE>...</PRE> (preformatted) • <UL>...</UL> (unordered list) - tworzy listę wypunktowaną. • <OL>...</OL> (ordered list) - tworzy listę numerowaną. • <LI>...</LI> wprowadza element listy • <BLOCKQUOTE>...</BLOCKQUOTE> - cytat • <DIV>...</DIV> - grupuje tekst w jeden blok Szablon z listami.html Szablon z listami.html Szablon z podstawowymi tagami.html

  15. Wyróżnianie tekstu • <B>...</B> (bold) • <I>...</I> (italic) • <U>...</U> (underline) • <TT>...</TT> (teletype) • <EM>...</EM> - wyróżnienie • <STRONG>...</STRONG> - wyróżnienie silniejsze • <STRIKE>...</STRIKE> - przekreślenie tekstu • <SUB>...</SUB> - indeks dolny • <SUP>...</SUP> - indeks górny Szablon z formatowaniem tekstu.html

  16. Definiowanieczcionek • Rozmiar, kolorikrójczcionkimożnaokreślićzapomocąznacznika<FONT>...</FONT>ijegoatrybutów: • size - rozmiar czcionki (od 1 do 7, wartością domyślną jest 3) • color - kolor • face- krój Przykład: <fontcolor="navy" size="5"face="Helvetica"> jakiś tekst </font> • Można też używać bardziej uniwersalnych znaczników, takich jak: • <BIG>...</BIG> - powiększenie czcionki o 1 punkt, • <SMALL>...</ SMALL > - zmniejszenie czcionki o 1 punkt. Szablon z formatowaniem tekstu2.html

  17. Kolor tła Kolor tła określamy za pomocą atrybutu bgcolor znacznika <BODY>: • <BODY bgcolor = ”aqua”text = ”navy”> • <BODY bgcolor = ”#FFFF00 ”text = ”#FFFFFF ”> • <BODY bgcolor = rgb(255, 255, 0) text = rgb(255, 255, 255) > Tłem strony może być też tapeta zapisana w pliku graficznym, którego nazwę podaje się jako wartość atrybutu background: • <BODY background = ”tlo.gif”> • <BODY background = ”images/tlo.gif”> • <BODY background = ”../tlo.gif”> Szablon z tłem.html

  18. Wstawianie grafiki Znacznik <IMG> (image) umożliwia umieszczenie w dokumencie HTML grafiki in-line, tzn. jako element bieżącego wiersza. Nazwa pliku zawierającego obrazek podawana jest za pomocą atrybutu SRC (source). • <IMG src = ”foto.gif”> • <IMG src = ”foto.gif”alt = ”Tekst zastępczy”> • <IMG src = ”foto.gif” width=”120” height=”70”> • <IMG src = ”../images/foto.gif”> • <IMG src = ”http://www.adres.pl/foto.gif”> Przeglądarki akceptują jedynie grafikę zapisaną w odpowiednim formacie. Najczęściej jest to: • GIF • JPG • PNG Szablon z grafikami.html

  19. Wyrównanie grafiki Sposób rozmieszczenia tekstu wokół obrazka określany jest za pomocą atrybutu ALIGN znacznika<IMG>. Do pionowego zorientowania rysunku względem wiersza używane są następujące wartości: ALIGN = ”top” ALIGN = ”middle” ALIGN = ”bottom” Przykład: <imgsrc="foto.gif" align="middle">Ania na spacerze Do oblewania grafiki tekstem używane są wartości left, right: • ALIGN = ”left” - dosunięcie obrazka do lewej i otoczenie go tekstem z prawej strony, • ALIGN = ”right” - odwrotnie Szablon z grafikami.html

  20. Wstawianie odnośników Odnośniki – zwane potocznie linkami - to elementy interaktywne pozwalające na przemieszczanie się do innego miejsca, przy czym może to być miejsce na tej samej stronie, inna strona lub strona znajdująca się na odległym serwerze. Do tworzenia odnośników służy znacznik <A> (anchor – kotwica), którego podstawowym atrybutem jest href (Hypertext REFerence), określający adres odnośnika: <Ahref="URL"> tekst aktywny </A> Jeśli chcemy, aby elementem interaktywnym był obrazek, po prostu wstawiamy w odpowiednim miejscu znacznik <IMG> <Ahref="index.htm"><imgsrc="1.gif"border="0"> </A> Szablon z odnośnikami.html

  21. Tworzenie zakładek <Ahref="strona.htm#R_1"> Rozdział I </A> <Ahref="strona.htm#R_2"> Rozdział II </A> .............................................. .............................................. <Aname="R_1"></A><h2>Rozdział I</h2> .............................................. .............................................. <Aname="R_2"></A><h2>Rozdział II</h2> Znaczniki <A> umożliwiają tworzenia zakładek, czyli miejsc znajdujących się na tej samej stronie, do których może nastąpić przeskok hipertekstowy. Zdefiniowanie zakładki: <Aname="R_1"></A> Postać dnośnika: <Ahref="strona.htm#R_1">Rozdział I</A> Szablon z odnośnikami.html

  22. Tabele Tabele języka HTML są ważnym narzędziem służącym do kształtowania wyglądu strony; umożliwiają poprawne rozmieszczenie na stronie elementów, takich jak tekst, formularze czy grafika. Kod przykładowej tabeli wygląda następująco: <table border="4"width="100%"cellspacing="10"> <tr align="center"><td width="40">...</td> <td >...</td></tr> <tr><td>...</td> <td>...</td></tr> </table> Każdy wiersz tabeli określony jest parą znaczników <tr> i </tr> (table row). W wierszach, za pomocą znaczników <td> i </td> umieszcza się komórkiz danymi (table data), np.: <td><img src="obrazek.gif"></td> Szerokość kolumny tabelki zostaje dopasowana do szerokości najszerszej komórki w danej kolumnie, przy czym tabela ma tyle kolumn, ile komórek znajduje się w najdłuższym wierszu. Szablon z tabelką.html

  23. Formatowanie tabel • Obramowanie tabeli • <table border="4">...</table> • Szerokość i wysokość tabeli • <table width="600"height="300">...</table> • Kolor tła • <table bgcolor="yellow">...</table> • Odstęp między komórkami tabeli • <table cellspacing="8">...</table> • Odstęp między zawartością komórki a jej krawędzią • <table cellpadding="4">...</table> • Wyrównanie tabeli na stronie • <table align="center">...</table> Szablon z tabelką.html

  24. Rozpinanie komórek Do rozpinania komórek służą dwa atrybuty znacznika <td> colspan i rowspan Wartości tych atrybutów określają odpowiednio liczbę kolumn i liczbę wierszy, na których ma zostać rozpięta komórka. Na przykład: <table border bgcolor="yellow"width="600"> <tr><td rowspan="2">Nr<tdcolspan="2">Pomiary</tr> <tr><td>Seria 1<td>Seria 2</tr> <tr><td>1<td>123<td>121</tr> </table> Szablon z tabelką.html

  25. Tworzenie ramek Ramki umożliwiają podzielenie okna przeglądarki na mniejsze podokna i wyświetlenie w każdym z nich osobnej strony WWW. Aby zdefiniować układ ramek należy utworzyć nowy typ dokumentu HTML zwany FRAMESET. W takim dokumencie sekcja <body> zastąpiona jest sekcją <frameset> z odpowiednim atrybutem - rows lub cols, w zależności od tego czy ramka ma być pozioma czy pionowa. Następnie za pomocą polecenia frame z parametrem src, podajemy nazwę strony do wstawienia. Starsze przeglądarki (np. Lynx) w przypadku dokumentów frameset nie wyświetlają zwykle żadnej treści. Z tego względu w takich dokumentach należy umieścić sekcję <noframes> zawierającą alternatywną postać strony, lub odnośnik do wersji strony przeznaczonej dla przeglądarek tekstowych. Szablon z ramkami.html

  26. Zagnieżdżanie ramek Znaczniki <frameset> można zagnieżdżać, tworząc rozbudowane układy. <html> <head><title>Tytuł strony</title></head> <frameset rows="100,*"border="0"> <frame src="str1.htm"name="up" > <frameset cols="30%,*"> <frame src="str2.htm"name="menu" > <frame src="str3.htm"name="main" > </frameset> </frameset> </html> Szablon z ramkami.html

  27. Ramki docelowe Domyślnie dokument, do którego prowadzi łącze, zostaje wyświetlony w tym samym oknie co łącze. Jednak często łącze znajdujące się w jednej ramce powinno otwierać stronę w innej ramce należącej do układu. Aby wyświetlić nową stronę w danej ramce, po pierwsze należy przypisać tej ramce nazwę za pomocą atrybutu name w znaczniku <frame>: <frame src="default.htm"name="main"> Następnie za pomocą atrybutu target wskazujemy miejsce wyświetlania się nowej strony: <A href="nowa.htm"target="main"> Szablon z ramkami.html

  28. CSS – drugi krok obowiązkowy. • CSS - Cascading Style Sheets (z ang. Kaskadowe Arkusze Stylów) jest to specjalny język opracowany w celu stworzenia możliwości bardziej elastycznego zarządzania sposobem formatowania (wyglądem) elementów znajdujących się w dokumentach elektronicznych. • CSS nie może istnieć samodzielnie, gdyż jest ściśle powiązane z językiem opisu struktury dokumentów takim jak (X)HTML. CSS daje możliwość globalnego zarządzania formą prezentacji całej witryny internetowej. Szablon z najprostszym stylem.html

  29. Wstawienie arkusza CSS Stworzenie arkusza wewnętrznie: <HTML> <HEAD> <TITLE>Moja strona domowa</TITLE> <STYLE type="text/css"> H1 { color: red } P { color: blue } </STYLE> </HEAD> <BODY></BODY> </HTML> Odwołanie się do zewnętrznego akrusza: <HTML> <HEAD> <TITLE>Moja strona domowa</TITLE> <LINK rel="StyleSheet" type="text/css" href="mojstyl.css"> </HEAD> <BODY></BODY> </HTML>

  30. Reguły CSS • Reguła składa się z dwóch części • selektora (np. H1) • deklaracji (np. color:blue) • Deklaracja również składa się z dwóch części • właściwości (np. color) • wartości (np. blue) • np. H1{color:blue} Szablon z lokalnym css.html

  31. Selektory potomne(Descendantselectors) • dopasuje się do elementu, który jest dzieckiem innego elementu • przykład: chcemy żeby wyróżnienie (<em>)zmieniało kolor tekstu na różowy, wyjątkiem jest sytuacja gdy <em> znajduje się wewnątrz <h1> -> wtedy pomarańczowy: H1 { color: red } EM { color: pink} Sytuacja wyątkowa: <H1>To jest <EM>bardzo</EM> ważny tekst</H1> Roziwązanie: H1 EM{ color: orange} Szablon z lokalnym css.html

  32. Selektory klas(class selectors) • W języku HTML poszczególne elementy mogą posiadać atrybut class -> można z tego skorzystać tworząc arkusz sytlów • Przykład: .zielony { color : green } <H1 class="zielony">Zielony nagłówek</H1> P.czerwony.gruby { color: red; font-weight: bold } <P class="czerwony gruby maly"> Przykładowy tekst</P> Szablon z lokalnym css class.html

  33. Selektory identyfikatorów(ID selectors) • Każdy element HTML może mieć atrybut o nazwie id. Atrybut ten wyróżnia spośród innych to, że jego wartości są w obrębie dokumentu unikalne. • Przykład: reguła H1#chapter1 { text-align: center } dopasuje się do <H1 id="chapter1">...</H1> Szablon z lokalnym css id.html

  34. Pseudo-klasy • :link – link nieodwiedzony • :visited – link odwiedzony • :hover – myszka nad linkiem • :active – link aktywny • :focus – focus ustawiony na linka Szablon z lokalnym css pseudoklasy.html

  35. Własności kolorów i tła • color – kolor tekstu • P { color: red } • H1 { color: rgb(255,0,0) } • background-color – kolor tła • H1 { background-color: #F00 } • background-image – obrazek tła • BODY { background-image: url("marble.gif") } • P { background-image: none } Szablon z lokalnym css tlo.html

  36. Własności kolorów i tła • background-repeat – jak powtarzać obrazek • repeat – powtarzanie w pionie i w poziomie • repeat-x – powtarzanie w poziomie • repeat-y – powtarzanie w pionie • no-repeat – po prostu narysować • BODY { background-color: white; background-image: url(„lemur.jpg"); background-repeat: repeat-y; } Szablon z lokalnym css tlo.html

  37. Własności tekstu • text-indent- wcięcie akapitu • jednostki: długości lub procenty • P { text-indent: 3em } • text-align- wyrównywanie • wartości: left | right | center | justify • DIV.center { text-align: center } • text-decoration • wartości: none | underline | overline | line-through |blink • P { text-decoration: none } Szblon z lokalnym css tekst.html

  38. Własności tekstu • text-shadow • H1 { text-shadow: 0.2em 0.2em } • H2 { text-shadow: 3px 3px 5px red } • H2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px } • letter-spacing • wartości: normal lub długości • word-spacing • wartości: normal lub długości Szblon z lokalnym css tekst.html

  39. Kilka uwag • Jednostki • długości: • relatywne: • em – szerokość znaku M • ex – wysokość linii • px – 1 pixel • absolutne • in – cale (2.54 cm) • cm, mm • pt – punkty (1/72 cala) • pc – picas (12 pt) • procentowe: np. 120%

  40. Kilka uwag • kolorki • H1 { color: maroon } • P { color: #f00 } /* #rgb */ • P { color: #ff0000 } /* #rrggbb */ • P { color: rgb(255,0,0) } /* 0 - 255 */ • P { color: rgb(100%, 0%, 0%) } • napisy • "this is a 'string'" • "this is a \"string\"" • 'this is a "string"' • 'this is a \'string\''

  41. Zamiast ramek css • Wraz z pojawieniem się css w zasadzie zrezygnowano z używania ramek – zamiast tego stronę(strony całego serwisu) ustawia się za pomocą <div> i ich wysokości oraz szerokości(atrybuty height oraz weight) Szablon na div z css.html

  42. Czego nie robić??!! • http://www.burlingtonnews.net/burlington_ufo_center.html • http://www.ghostweb.com/ • http://www.wethepeoplefoundation.org/

  43. Co robić? • http://www.csszengarden.com/ • http://meadowquartet.com/index.html • Na początek szukać szablonów? Są ich tysiące np. http://www.darmowe-szablony.net/przegladaj/capsicum/html

  44. CMS • System zarządzania treścią (ang. Content Management System, CMS) jest to aplikacja internetowa lub ich zestaw, pozwalająca na łatwe utworzenie serwisu WWW oraz jego późniejszą aktualizację i rozbudowę przez redakcyjny personel nietechniczny. Kształtowanie treści i sposobu ich prezentacji w serwisie zarządzanym przez CMS odbywa się za pomocą prostych w obsłudze interfejsów użytkownika, zazwyczaj w postaci stron WWW zawierających rozbudowane formularze i moduły.(Wiki)

  45. Zalety CMS • Bez znajomości programowania (html, css, php itp.) dają możliwość stworzenia stosunkowo rozbudowanych serwisów. • Przyjazny interfejs użytkownika. • Darmowe i płatne komponenty i szablony. • Wsparcie społeczności.

  46. Przykłady CMS’ów • WordPress • Drupal • Joomla • I wiele wiele innych…

  47. Krótka prezentacja flash’a na eclipsie • Flash -> actionScript +mxml pozwalają na stworzenie estetycznej, inteligentnej, wszechstronnej aplikacji. • Potrzebny FlashPlayer -> specjalny silnik rozumiejący technologie flash -> nie ma html • Eclipse -> DUŻE środowisko programistyczne dla wielu jezyków ->wspiera również html’a, css

More Related