Podstawy tworzenia stron WWW w HTML5

Wielkość: px
Rozpocząć pokaz od strony:

Download "Podstawy tworzenia stron WWW w HTML5"

Transkrypt

1 Podstawy tworzenia stron WWW w HTML5 Mariusz Różycki wersja

2 2

3 Spis treści 0 Wprowadzenie Lista zmian O skrypcie Dla osób, które coś już umieją Nieco teorii protokół HTTP Przydatne narzędzia Edytory Przeglądarki internetowe Pierwsza strona Automatyczne łamanie linii Ręczne łamanie linii Znacznik <br> Znacznik <p> Podstawowe formatowanie tekstu Znaczniki <b>, <i>, <u> Znaczniki <strong> i <em> Podstawowe elementy strony internetowej Nagłówki Odnośniki Obrazki Listy Listy wypunktowane Listy numerowane Listy wielopoziomowe

4 4 SPIS TREŚCI 4 Struktura dokumentu HTML Znaczniki <!doctype> i <html> Ciało dokumentu Nagłówek dokumentu Tytuł Kodowanie znaków Bloki Znacznik <div> Znacznik <header> Znacznik <nav> Znacznik <article> Znacznik <section> Znacznik <aside> Znacznik <footer> Podstawy CSS Kolory Kolor tła Kolor czcionki Obramowanie Czcionki Wygląd Rozmiar Znacznik <span> Marginesy Marginesy wewnętrzne Marginesy zewnętrzne Zewnętrzny arkusz stylu Selektory Klasy Identyfikatory

5 Rozdział 0 Wprowadzenie 0.1 Lista zmian Skrypt ten nie jest kompletny i będzie powoli aktualizowany. Wszystkie większe zmiany wprowadzane w kolejnych wersjach będą umieszczane na tej liście. Jeżei znajdziesz w tekście jakiś błąd, napisz na poprawione listingi kodu uzupełnione puste sekcje rozdziału Wprowadzenie napisany wstęp do rozdziału Struktura dokumentu HTML5 zmieniona numeracja rozdziałów (od zera) pierwsza wersja skryptu ustalona wstępna struktura kursu napisane rozdziały O skrypcie Skrypt ten został przygotowany z myślą o osobach, których dotychczasowy kontakt z tworzeniem stron WWW jest znikomy. Stąd też wszystkie zagadnienia staram się opisywać jak najdokładniej i wyjaśniać wszelkie wątpliwości. Osoby, których wiedza na tematy tutaj opisane jest niewielka, powinny po prostu czytać kolejno wszystkie rozdziały tego skryptu. Warto również 5

6 6 ROZDZIAŁ 0. WPROWADZENIE starać się wykorzystywać zdobytą wiedzę w praktyce. Po zakończeniu każdego rozdziału można odłożyć skrypt na bok i starać się zbudować (lub w przypadku późniejszych rozdziałów rozbudować) własne, proste strony. Każdy rozdział tego skryptu wymaga znajomości jedynie tego, co znajduje się przed nim nie jest wymagana żadna dodatkowa wiedza ani szukanie informacji z innych źródeł. Mimo to czasem odnośniki do innych kursów mogą się pojawić i, choć nie jest to konieczne, warto się z nimi zapoznać. Korzystanie z różnych źródeł w nauce programowania i podobnych umiejętności z reguły jest dobrym pomysłem. Należy jednak uważać przy szukaniu dodatkowych źródeł na własną rękę. Informacje zawarte w tym skrypcie zgodne są z założeniami HTML5, podczas gdy wiele kursów w internecie wciąż bazuje na starszych specyfikacjach. O ile sam sposób pisania i ogólne założenia nie różnią się aż tak bardzo, o tyle w szczegółach różne wersje (x)html różnią się od siebie na tyle, że ich mieszanie nie jest dobrym pomysłem. Zdaję sobie sprawę, że nie wszystkie elementy HTML5 są prawidłowo interpretowane przez wszystkie przeglądarki. W tym skrypcie jednak skupiam się na podstawowych zagadnieniach z tego zakresu. Wszystkie nowe wersje popularnych przeglądarek bez problemu interpretują używane tutaj elementy tego języka. 0.3 Dla osób, które coś już umieją Uwaga! W tej sekcji mogę odnosić się do rodziałów lub sekcji tego skryptu, które jeszcze nie zostały napisane! Jeżeli już wcześniej miałeś do czynienia z tworzeniem stron WWW przy użyciu HTML, zacznij od przejrzenia spisu treści. W momencie, w którym natkniesz się na zagadnienie, które wydaje ci się nowe zacznij czytanie skryptu od początku rozdziału, w którym to zagadnienie jest opisane. Innym sposobem na rozpoczęcie pracy z tymi materiałami, w przypadku kiedy coś już umiesz, jest przeglądanie listingów kodu. Znajdują się one wewnątrz czarnych ramek, dlatego nie powinieneś mieć problemu z ich odnalezieniem przy pobieżnym przeglądaniu skryptu. Gdy natkniesz się na kod, którego nie rozumiesz lub nie wiesz jak będzie działał przeczytaj od początku sekcję, w której się on znajduje. Niezależnie od tego, którą strategię wybierzesz, jeżeli nie miałeś wcześniej do czynienia z HTML5, od rozdziału Struktura dokumentu HTML5 włącznie powinieneś dokładnie zapoznawać się z całym materiałym. Jeżeli miałeś już wcześniej kontakt z podstawami specyfikacji HTML5,

7 0.4. NIECO TEORII PROTOKÓŁ HTTP 7 możesz jedynie pobieżnie przejrzeć skrypt w poszukiwaniu zagadnień, których nie znasz lub nie do końca rozumiesz. Jeżeli nic takiego tutaj nie znajdziesz, a będziesz chciał nauczyć się więcej, możesz zaczekać aż skrypt zostanie poszerzony o nowe treści. Dobrym pomysłem będzie skontaktowanie się bezpośrednio ze mną, być może będę w stanie wskazać ci, gdzie powinieneś udać się po więcej informacji. 0.4 Nieco teorii protokół HTTP Poprzednio omówiliśmy działanie sieci komputerowych. Powiedzieliśmy sobie, że dane w sieci przesyłane są za pomocą pakietów, które zawierają pewne dane. Dane te różnią się w zależności od tego, w jakim celu się porozumiewamy i w jakim celu. Strony internetowe również wczytywane są za pomocą pakietów wczytywanych z serwera. Korzysta się wtedy z protokołu HTTP. Możemy za jego pomocą przesyłać różne pliki, jednak podstawowym nośnikiem danych w tym protokole są pliki HTML. Pliki HTML zawierają opis układu, zawartości i wyglądu strony internetowej. Mogą być dynamicznie generowane po stronie serwera, na przykład za pomocą skryptów PHP, czy CGI. W przypadku prostych stron internetowych nie ma jednak potrzeby stosowania tego rozwiązania. Tworzy się wtedy statyczne pliki HTML i umieszcza je na serwerze w takiej postaci są potem wysyłane do użytkowników. Tworzeniem takich właśnie plików będziemy się zajmować w tym kursie. 0.5 Przydatne narzędzia Uwaga! Ta sekcja jest tylko zalążkiem, w przyszłości może pojawić się tu więcej informacji Edytory Aby tworzyć strony internetowe potrzebujemy jakiegoś edytora tekstowego. Nie nada się tutaj raczej MS Word, potrzebujemy programu, który operuje na zwykłych plikach tekstowych. Możliwe jest tworzenie stron internetowych w Windowsowym Notatniku, jednak jest to mało wygodne. Dobrym wyborem może być za to program Notepad++, który co prawda nie posiada zbyt wielu opcji ułatwiających

8 8 ROZDZIAŁ 0. WPROWADZENIE pisanie w HTMLu, jednak zajmuje niewiele miejsca i dla osób zaczynających przygodę z HTML będzie wystarczający. Dla osób pracujących na Linuksie, jednak niezbyt zapoznanych z tym systemem, dobrym wyborem powinien być edytor tekstu wbudowany w używaną dystrybucję. Może być to Gedit, Kate, czy inne podobne. Dla użytkowników obu tych systemów dostępne są także edytory vim oraz emacs, są one jednak przeznaczone dla zawansowanych użytkowników i mogą odstraszyć początkujących. Innym dobrym edytorem, niestety płatnym, choć można z niego korzystać za darmo z pewnymi ograniczeniami, jest Sublime Text, dostępny zarówno na Windowsie jak i Linuksie. Istnieją również rozwiązania dedykowane dla tworzenia stron WWW. Przykładem może być NetBeans, jednak używanie go do nauki HTML to trochę jak strzelanie do muchy z armaty. Jest to bowiem dość rozbudowane środowisko do tworzenia aplikacji webowych i większośc jego funkcji jest zbędnych na tym etapie. Odradzam używanie programu Zajączek, dawniej (i obecnie w wielu polskich szkołach, niestety) bardzo popularnego. Jest on od wielu lat nierozwijany, przez to przestarzały i może sprawiać wiele problemów, szczególnie na nowych systemach Przeglądarki internetowe Nie jest możliwe tworzenie stron WWW bez posiadania przeglądarki internetowej. Na pewno używasz w tym momencie któregoś z dostępnych rozwiązań, nie będę więc rozpisywał się na ich temat. Na tym etapie nauki nie potrzebujesz też używać kilku z nich. Warto jednak pamiętać, że różne przeglądarki mogą różnie interpretować ten sam kod. Dlatego w przyszłości może okazać się, że dobrym pomysłem będzie zainstalowanie kilku przeglądarek i testowanie, czy strona wygląda poprawnie na każdej z nich. Wtedy należy zaopatrzyć się nie tylko w IE, czy twoją ulubioną przeglądarkę. Przyda się Firefox, Chrome, może nawet Safari.

9 Rozdział 1 Pierwsza strona Najprostszy plik HTML zawiera po prostu tekst, tak jak pliki TXT. Istotne jest jednak, aby taki plik posiadał rozszerzenie.html (lub.htm), aby został odpowiednio zinterpretowany przez przeglądarkę. Czas otworzyć nasz edytor. Wpiszmy tam następujący tekst: 1 To jest moja pierwsza strona internetowa. I zapiszmy go w pliku index.html. Nazwa ta jest ogólnie przyjętą nazwą dla strony głównej i jest w pierwszej kolejności wczytywana przez serwery. W naszym wypadku nie ma to więkzego znaczenia (nie umieszczamy strony internetowej na serwerze), jednak lepiej przyzwyczajać się do przyjętych zwyczajów, ponieważ może być to przydatne w przyszłości. Teraz możemy otworzyć stworzony właśnie plik używając dowolnej przeglądarki internetowej. Typ pliku.html powinien być domyślnie skojarzony z jedną z zainstalowanych na komputerze przeglądarek, dlatego z reguły wystarczy dwukrotnie kliknąć na ikonę pliku. Naszym oczom ukaże się tekst, tak jak byśmy się spodziewali, który umieściliśmy w pliku index.html. Strona ta nie wygląda zbyt okazale czy bogato, nie jest też zgodna ze standardami HTML, jednak pierwszy krok ku tworzeniu stron internetowych został wykonany! 1.1 Automatyczne łamanie linii Wróćmy do edytora. Spróbujmy umieścić więcej tekstu na naszej stronie. 1 To jest moja pierwsza strona internetowa. Wygląda nieco ascetycznie, jednak stworzyłem ją całkiem sam i dzięki temu nauczyłem się czegoś nowego. 9

10 10 ROZDZIAŁ 1. PIERWSZA STRONA Zwróćmy uwagę, że przeglądarka domyślnie złamie linie naszego tekstu tak, aby całość mieściła się w szerokości okna przeglądarki. Dzięki temu nie musimy martwić się o właściwe rozmieszczenie tekstu. 1.2 Ręczne łamanie linii Co jednak, gdybyśmy chcieli w pewnym momencie zacząć pisać od nowej linii? Spróbujmy po prostu wstawić znak nowej linii w naszym pliku. Okaże się, że tekst nie zostanie złamany tam, gdzie byśmy sobie tego życzyli. Aby ręcznie złamać tekst w wybranym przez nas miejscu musimy zastosować mechanizmy, których dostarcza nam HTML Znacznik <br> Musimy umieścić w tekście coś, co nazywa się znacznikiem. Znacznik to element języka HTML, który służy do opisu wyglądu logicznej struktury dokumentu (czasem, chociaż rzadko, jej wyglądu). Znacznikiem służącym do łamania linii jest <br> (od ang. BReak line). Spróbujmy umieścić go w kodzie naszej strony: 1 To jest moja pierwsza strona internetowa. <br > 2 Wygląda nieco ascetycznie, jednak stworzyłem ją całkiem sam i dzięki temu nauczyłem się czegoś nowego. Gdy teraz otworzymy naszą stronę zauważymy, że w miejscu, gdzie umieściliśmy znacznik <br>, tekst został przeniesiony do nowej linii Znacznik <p> Ten sposób jednak nie należy do zbytnio eleganckich. Dokument HTML z założenia powinien służyć do opisu logicznej struktury dokumentu, a nie jej wyglądu (do tego służą inne mechanizmy). Lepszym rozwiązaniem jest podział tekstu na akapity. Aby wydzielić z tekstu akapit, należy fragment tekstu umieścić między znacznikami <p> i </p> (od ang. Paragraph). Zwróć uwagę, że te dwa znaczniki są bardzo podobne, różni je tylko znak ukośnika na początku. Nie jest to przypadkowe. Znaczniki te występują w parach: pierwszy z nich rozpoczyna akapit (jest znacznikiem otwierającym), drugi z nich zaś kończy akapit (jest znacznikiem zamykającym). Większość znaczników w HTML działa właśnie w ten sposób, jedynie nieliczne z nich występują pojedynczo i nie zawierają znaczników zamykających (jak na przykład znacznik <br>). Podzielmy tekst na naszej stronie na akapity:

11 1.2. RĘCZNE ŁAMANIE LINII 11 1 <p >To jest moja pierwsza strona internetowa. </ p > 2 <p > Wygląda nieco ascetycznie, jednak stworzyłem ją całkiem sam i dzięki temu nauczyłem się czegoś nowego.</p> Zwróć uwagę, że teraz między liniami tekstu pojawiła się niewielka przerwa. Domyślnie przeglądarki internetowe tak właśnie wyświetlają akapity. Możemy to zmienić przy użyciu stylów, tym zajmiemy się jednak nieco później. Style są także jednym z głównych powodów, dla których podział tekstu na akapity jest bardziej preferowany niż ręczne łamanie linii dają nam one dużo większe możliwości zmiany wyglądu.

12 12 ROZDZIAŁ 1. PIERWSZA STRONA

13 Rozdział 2 Podstawowe formatowanie tekstu 2.1 Znaczniki <b>, <i>, <u> Przyszedł czas na lekkie urozmaicenie wyglądu naszej strony. Zaczniemy od podstawowego formatowania tekstu. Do dyspozycji mamy kilka znaczników, takich jak <b> (pogrubienie, od ang. Bold), <i> (kursywa, od ang. Italics), <u> (podkreślenie, od ang. Underline). Są to oczywiście znaczniki, które występują w parach razem z tagami zamykającymi. Wypróbujmy je na naszej stronie: 1 <p >To jest moja <b > pierwsza </ b > strona internetowa. </ p > 2 <p > Wygląda <i > nieco </ i > ascetycznie, jednak stworzyłem ją całkiem sam i dzięki temu nauczyłem się czegoś <u>nowego </u>.</p> Kiedy otworzyy nową wersję naszej strony w przeglądarce, zauważymy, że słowo pierwsza zostało pogrubione, nieco zapisane kursywą, a nowego podkreślone. Uwaga! Znaczniki można zagnieżdżać (to znaczy umieszczać jeden w drugim), ale nie należy ich krzyżować! Wszystkie znaczniki należy zamykać w kolejności odwrotnej do ich otwarcia. Oznacza to, że zapis <b>przykładowy <i>krótki</b> tekst</i>, nawet jeżeli zostanie zinterpretowany przez przeglądarkę tak, jak można by się tego spodziewać, jest nieprawidłowy i nie należy nigdy go używać! 13

14 14 ROZDZIAŁ 2. PODSTAWOWE FORMATOWANIE TEKSTU 2.2 Znaczniki <strong> i <em> Tak jak wspominałem wcześniej, dokument HTML z założenia powinien opisywać logiczną strukturę strony, a nie jej wygląd. Trzy wyżej opisane znaczniki służą opisowi wyłącznie wyglądu. Pomimo tego, że w teorii można ich wygląd zmienić, w praktyce nie jest to zalecane. Dlatego istnieją dwa inne znaczniki: silny akcent (<strong>) i emfaza (<em>, od ang. EMphasis). Domyślnie pierwszy z nich produkuje pogrubiony tekst, a drugi kursywę, jednak ich wygląd można dowolnie modyfikować przy użyciu stylów. Zwróć uwagę, że nie ma podobnego znacznika produkującego podkreślenie. Nie wynika to z faktu, że twórcy przeglądarek podkreślenia nie lubią (chociaż faktem jest, że jego nadmierne stosowanie spowalnia tempo czytania). Chodzi o to, że <strong> i <em>, nie są znacznikami pogrubienia i podkreślenia, ale silnego i nieco słabszego akcentu. To jedynie ich domyślny wygląd (z różnych przyczyn) odpowiada tym dwóm formatowaniom.

15 Rozdział 3 Podstawowe elementy strony internetowej 3.1 Nagłówki Warto byłoby do naszej strony dodać jakiś nagłówek. Tutaj sytuacja jest bardzo prosta. Służy do tego znacznik <h1> (od ang. Header), który oczywiście występuje w parze z odpowiednim nagłówkiem zamykającym. Dodajmy taki nagłówek do naszej strony. 1 <h1 > Moja pierwsza strona </ h1 > 2 <p >To jest moja <b > pierwsza </ b > strona internetowa. </ p > 3 <p > Wygląda <i > nieco </ i > ascetycznie, jednak stworzyłem ją całkiem sam i dzięki temu nauczyłem się czegoś <u>nowego </u>.</p> Kiedy odświeżymy naszą stronę zauważymy, że na samej górze pojawił się napis Moja pierwsza strona napisany dużo większą i pogrubioną czcionką. Oczywiście jest to jedynie domyślny wygląd nagłówka i przy użyciu stylów można go zmienić. Może rodzić się pytanie, skąd ta cyfra 1 w nazwie znacznika? Odpowiedź jest bardzo prosta ponieważ jest to nagłówek pierwszego stopnia. HTML udostępnia aż 6 różnych stopni nagłówków od <h1> do <h6>. W praktyce rzadko używa się ich wszystkich, nawet <h4> nie zdarza się często. Warto jednak wiedzieć, że są. Wykorzystajmy więc tę możliwość i podzielmy naszą stronę na kilka podsekcji, z których każda będzie miała swój nagłówek. 1 <h1 > Moja pierwsza strona </ h1 > 2 <h2 >O mnie </h2 > 15

16 16ROZDZIAŁ 3. PODSTAWOWE ELEMENTY STRONY INTERNETOWEJ 3 <p > Nazywam się Mariusz Różycki. Interesuję się informatyką. Aby poszerzać swoją wiedzę w tej dziedzinie, we wrześniu 2012 roku rozpocząłem studia na Uniwersytecie Cambridge. </ p > 4 5 <h2 >O stronie </h2 > 6 <p >To jest moja <b > pierwsza </ b > strona internetowa. </ p > 7 <p > Wygląda <i > nieco </ i > ascetycznie, jednak stworzyłem ją całkiem sam i dzięki temu nauczyłem się czegoś <u>nowego </u>.</p> 8 9 <h2 > Kontakt </h2 > 10 <p>mój adres e- mail to mar. com </p> 3.2 Odnośniki Przydatną rzeczą do umieszczenia na stronie internetowej są odnośniki czy to do innych stron internetowych, czy po prostu podstron naszej własnej strony, czasem także do innego miejsca na tej samej podstronie. Nauczmy się je umieszczać w kodzie HTML. Służy do tego znacznik <a> (od ang. Anchor). Jednak samo umieszczenie adresu innej strony między parą tych znaczników nie utworzy nam działającego odnośnika. Należy do znacznika dodać atrybut, który wskaże, gdzie dany link ma nas przekierowywać. Atrybuty umieszcza się wewnątrz znacznika otwierającego. Najpierw piszemy nazwę atrybutu, później znak =, a na końcu, w cudzysłowach, wartość atrybutu. Atrybut odpowiadający za źródło odnośnika nazywa się href, a jego wartość to po prostu adres strony. Brzmieć to może jak czarna magia, ale wygląda dość prosto. Na przykład odnośnik do strony Google.com wyglądać będzie tak: 1 <a href =" http :// google. com ">Google. com </a> To, co umieścimy między znacznikami, pojawi się na stronie jako odnośnik. Pamiętać należy o dodaniu na początku adresu odnośnika. W przeciwnym razie adres zostanie zinterpretowany jako lokalny i nie będzie prowadził tam, gdzie byśmy sobie tego zażyczyli. Dodajmy link do naszej strony internetowej: 1 <h1 > Moja pierwsza strona </ h1 > 2 <h2 >O mnie </h2 >

17 3.3. OBRAZKI 17 3 <p > Nazywam się Mariusz Różycki. Interesuję się informatyką. Aby poszerzać swoją wiedzę w tej dziedzinie, we wrześniu 2012 roku rozpocząłem studia na <a href =" http :// www. cam.ac.uk">uniwersytecie Cambridge </a>.</p> 4 5 <h2 >O stronie </h2 > 6 <p >To jest moja <b > pierwsza </ b > strona internetowa. </ p > 7 <p > Wygląda <i > nieco </ i > ascetycznie, jednak stworzyłem ją całkiem sam i dzięki temu nauczyłem się czegoś <u>nowego </u>.</p> 8 9 <h2 > Kontakt </h2 > 10 <p>mój adres e- mail to mar. com </p> Możemy również sprawić, żeby adres był klikalny i powodował otwarcie okna nowej wiadomości (z wpisanym naszym adresem w polu adresata) klienta poczty. W tym celu adres wewnątrz atrybutu href należy poprzedzić słowem mailto z dwukropkiem na końcu (bez ukośników), na przykład 1 <a href =" mailto : mar. com ">Napisz do mnie!</a> Nie jest jednak zalecane umieszczanie tego typu odnośników na ogólnie dostępnych stronach, ponieważ taki adres może zostać (i dość szybko zostanie) odczytany przez boty i umieszczony na spamlistach, przez co dostawać będziecie mnóstwo niechcianej poczty. 3.3 Obrazki Do uzupełnienia 3.4 Listy Kolejnym elementem, który możemy dodać do naszej strony jest lista. Może być wypunktowana, może być numerowana. Nauczmy się dodawać i jedne i drugie Listy wypunktowane Na pierwszy ogień pójdą listy wypunktowane. Nowością w tym wypadku będzie fakt, że do jej stworzenia potrzebujemy dwóch znaczników. Pierwszy

18 18ROZDZIAŁ 3. PODSTAWOWE ELEMENTY STRONY INTERNETOWEJ z nich obejmuje całą listę wszystkie jej elementy. Drugi służy do oznaczania pojedynczych elementów. Tym pierwszym jest <ul> (od ang. Unordered List), drugim natomiast <li> (od ang. List Item). Lista wypunktowana w naszym kodzie wyglądać będzie na przykład tak: 1 <ul > 2 <li > pierwszy element </li > 3 <li >drugi element </li > 4 <li > trzeci element </li > 5 </ul > Uwaga! Chociaż nie ma obowiązku zamykania znaczników <li> (jest to oczywiste, że tam, gdzie zaczyna się następny element listy, tam kończy się poprzedni), to jednak polecam je zamykać. Jest to dobry zwyczaj, dokument zapisany w ten sposób wygląda lepiej. Podobnie wcięcia elementów listy nie są obowiązkowe (w rzeczywistości można je nawet umieścić w jednej linii), jednak zwiększają czytelność kodu. Dodajmy do naszej strony listę zainteresowań: 2 <h2 >O mnie </h2 > 3 <p > Nazywam się Mariusz Różycki. Interesuję się informatyką. Aby poszerzać swoją wiedzę w tej dziedzinie, we wrześniu 2012 roku rozpocząłem studia na <a href =" http :// www. cam.ac.uk">uniwersytecie Cambridge </a>.</p> 4 <p > Oprócz informatyki mam także kilka innych zainteresowań : 5 <ul > 6 <li > gry karciane i papierowe RPG </ li > 7 <li > gra na saksofonie i śpiew </ li > 8 <li > kaligrafia i projektowanie koszulek </ li > 9 </ul > 10 </p> Listy numerowane W podobny sposób tworzy się listy numerowane. Jedyną różnicą jest to, że znacznikiem okalającym całą listę jest tym razem <ol> (od ang. Ordered List). Element listy nadal oznaczamy znacznikiem <li>. Wykorzystajmy listę numerowaną do rozbudowania sekcji Kontakt : 13 <h2 > Kontakt </h2 > 14 <p > Można skontaktować się ze mną na kilka sposobów :

19 3.4. LISTY <ol > 16 <li > przez pocztę elektroniczną : mar. com </li > 17 <li > przez telefon : </ li > 18 <li > uderzając w rynnę 3 razy </ li > 19 </ol > 20 </p> Listy wielopoziomowe Listy można w sobie zagnieżdżać, tworząc listy wielopoziomowe. Wystarczy umieścić jedną listę wewnątrz drugiej. 13 <h2 > Kontakt </h2 > 14 <p > Można skontaktować się ze mną na kilka sposobów : 15 <ol > 16 <li > przez pocztę elektroniczną </ li > 17 <ul > 18 <li >mar. com </li > 19 <li > </li > 20 </ul > 21 <li > przez telefon : </ li > 22 <li > uderzając w rynnę </ li > 23 <ol > 24 <li > najpierw 3 razy, aby zainicjować połączenie </ li > 25 <li > następnie 5 razy szybko, 3 wolniej i 2 szybko, aby wybrać mój numer telefonii rynnowej </ li > 26 <li >na końcu wybić wiadomość kodem Morse a </ li > 27 </ol > 28 </ol > 29 </p> Oczywiście można mieszać różne typy list, zależnie od potrzeb. Można też zagnieździć więcej niż 2 listy, tworząc w ten sposób listę mającą więcej poziomów.

20 20ROZDZIAŁ 3. PODSTAWOWE ELEMENTY STRONY INTERNETOWEJ

21 Rozdział 4 Struktura dokumentu HTML5 W poprzednich rozdziałach zajmowaliśmy się jedynie treścią i układem naszej strony internetowej. Nasz dokument HTML nie zawierał niczego poza tym, co ma znaleźć się w oknie przeglądarki. Mimo że pliki te były prawidłowo wyświetlane, to same w sobie nie były do końca poprawnie napisane. Specyfikacja HTML, nie tylko w wersji 5, ale także w poprzednich, przewiduje dla dokumentu HTML pewną ustaloną strukturę. Warto jest się jej trzymać, bowiem nie powstała ona bez powodu. Nie tylko porządkuje kod, ale także daje nam pewne możliwości, które w innym przypadku są niedostępne. Przykładowy, prosty dokument HTML zachowujący tę strukturę wygląda tak: 1 <! doctype html > 2 <html > 3 <head > 4 <title > Strona WWW </ title > 5 <meta charset ="utf -8"> 6 </ head > 7 <body > 8 <h1 >Moja strona WWW </h1 > 9 <p >To jest moja strona WWW </ p > 10 </ body > 11 </ html > Przejdźmy do omówienia poszczególnych jej elementów. 21

22 22 ROZDZIAŁ 4. STRUKTURA DOKUMENTU HTML5 4.1 Znaczniki <!doctype> i <html> 4.2 Ciało dokumentu 4.3 Nagłówek dokumentu Tytuł Kodowanie znaków

23 Rozdział 5 Bloki 5.1 Znacznik <div> 5.2 Znacznik <header> 5.3 Znacznik <nav> 5.4 Znacznik <article> 5.5 Znacznik <section> 5.6 Znacznik <aside> 5.7 Znacznik <footer> 23

24 24 ROZDZIAŁ 5. BLOKI

25 Rozdział 6 Podstawy CSS 6.1 Kolory Kolor tła Kolor czcionki Obramowanie 6.2 Czcionki Wygląd Rozmiar Znacznik <span> 6.3 Marginesy Marginesy wewnętrzne Marginesy zewnętrzne 6.4 Zewnętrzny arkusz stylu Selektory Klasy Identyfikatory 25

2 Podstawy tworzenia stron internetowych

2 Podstawy tworzenia stron internetowych 2 Podstawy tworzenia stron internetowych 2.1. HTML5 i struktura dokumentu Podstawą działania wszystkich stron internetowych jest język HTML (Hypertext Markup Language) hipertekstowy język znaczników. Dokument

Bardziej szczegółowo

Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np.

Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np. <BR> Język html to język znaczników inaczej tagów, czyli słów lub skrótów pochodzących z języka angielskiego ujętych w nawiasy ostrokątne , np.. . W większości przypadków spotykamy znaczniki początku (inaczej

Bardziej szczegółowo

Struktura języka HTML ZNACZNIKI. Oto bardzo prosta strona WWW wyświetlona w przeglądarce: A tak wygląda kod źródłowy takiej strony:

Struktura języka HTML ZNACZNIKI. Oto bardzo prosta strona WWW wyświetlona w przeglądarce: A tak wygląda kod źródłowy takiej strony: Struktura języka HTML ZNACZNIKI Oto bardzo prosta strona WWW wyświetlona w przeglądarce: Rysunek 1: Przykładowa strona wyświetlona w przeglądarce A tak wygląda kod źródłowy takiej strony: Rysunek 2: Kod

Bardziej szczegółowo

Wymagania edukacyjne: Statyczne witryny internetowe (na podstawie programu nr 351203)

Wymagania edukacyjne: Statyczne witryny internetowe (na podstawie programu nr 351203) Wymagania edukacyjne: Statyczne witryny internetowe (na podstawie programu nr 351203) Technikum - kl. 3 Td, semestr 5 i 6 Ocena niedostateczna dopuszczająca Wymagania edukacyjne wobec ucznia: Uczeń nie

Bardziej szczegółowo

Zaawansowana Pracownia Komputerowa - Ćwiczenia. Krzysztof Miernik

Zaawansowana Pracownia Komputerowa - Ćwiczenia. Krzysztof Miernik Zaawansowana Pracownia Komputerowa - Ćwiczenia Krzysztof Miernik HTML - Podstawowe Informacje HTML to hipertekstowy język znaczników (ang. HyperText Markup Language) służacy do tworzenia stron internetowych

Bardziej szczegółowo

ĆWICZENIA Z JĘZYKA HTML. 1. Znaczniki. 2. Struktura dokumentu HTML. 3. Tworzymy stronę WWW Podróże po stolicach Europy

ĆWICZENIA Z JĘZYKA HTML. 1. Znaczniki. 2. Struktura dokumentu HTML. 3. Tworzymy stronę WWW Podróże po stolicach Europy Informatyka - podstawowe tematy WSzPWN - Język HTML, podstawy str. 1 ĆWICZENIA Z JĘZYKA HTML Struktura dokumentu, znaczniki, tabele, hiperłacza Być może trudno w to uwierzyć, jednak strony WWW są tekstem

Bardziej szczegółowo

Lab.1. Praca z tekstem: stosowanie arkuszy stylów w dokumentach OO oraz HTML/CSS

Lab.1. Praca z tekstem: stosowanie arkuszy stylów w dokumentach OO oraz HTML/CSS Lab.1. Praca z tekstem: stosowanie arkuszy stylów w dokumentach OO oraz HTML/CSS Cel ćwiczenia: zapoznanie się z pojęciem stylów w dokumentach. Umiejętność stosowania stylów do automatycznego przygotowania

Bardziej szczegółowo

Jak posługiwać się edytorem treści

Jak posługiwać się edytorem treści Jak posługiwać się edytorem treści Edytor CKE jest bardzo prostym narzędziem pomagającym osobom niezaznajomionym z językiem HTML w tworzeniu interaktywnych treści stron internetowych. Razem z praktyka

Bardziej szczegółowo

2. Projektowanie stron WWW podstawowe informacje

2. Projektowanie stron WWW podstawowe informacje 1. Uczeń: Uczeń: 2. Projektowanie stron WWW podstawowe informacje a. 1. Cele lekcji i. a) Wiadomości zna podstawowe zasady tworzenia stron internetowych, rozróżnia tryb tekstowy tworzenia stron www od

Bardziej szczegółowo

Zakres treści Czas. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów

Zakres treści Czas. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów Aplikacje internetowe KL. III Rok szkolny: 011/01 Nr programu: 31[01]/T,SP/MENIS/004.06.14 Okres kształcenia: łącznie ok. 180 godz. lekcyjne Wojciech Borzyszkowski Zenon Kreft Moduł Bok wprowadzający Podstawy

Bardziej szczegółowo

XHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania.

XHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania. XHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania. Reformuje on znane zasady języka HTML 4 w taki sposób, aby były zgodne z XML (HTML przetłumaczony na XML).

Bardziej szczegółowo

Rozdział 5: Style tekstu

Rozdział 5: Style tekstu 5. STYLE TEKSTU Posługując się edytorem MS Word trudno nie korzystać z możliwości jaką daje szybkie formatowanie z użyciem stylów. Stylem określa się zestaw parametrów formatowych, któremu nadano określoną

Bardziej szczegółowo

Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie

Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie Scenariusz lekcji informatyki klasa II gimnazjum Temat : Strona WWW pierwsze

Bardziej szczegółowo

za pomocą: definiujemy:

za pomocą: definiujemy: HTML CSS za pomocą: języka HTML arkusza CSS definiujemy: szkielet strony wygląd strony Struktura dokumentu html - znaczniki Znaczniki wyznaczają rodzaj zawartości. element strony

Bardziej szczegółowo

SIECI KOMPUTEROWE I TECHNOLOGIE INTERNETOWE

SIECI KOMPUTEROWE I TECHNOLOGIE INTERNETOWE Politechnika Gdańska Wydział Elektrotechniki i Automatyki Katedra Inżynierii Systemów Sterowania SIECI KOMPUTEROWE I TECHNOLOGIE INTERNETOWE Temat: Prosty serwis internetowy oparty o zestaw powiązanych

Bardziej szczegółowo

I. Formatowanie tekstu i wygląd strony

I. Formatowanie tekstu i wygląd strony I. Formatowanie tekstu i wygląd strony Akapit: ... aby wyrównać tekst do lewego marginesu aby wyrównać tekst do prawego marginesu:

Bardziej szczegółowo

Podstawy tworzenia stron internetowych

Podstawy tworzenia stron internetowych Podstawy tworzenia stron internetowych HTML Wstęp Do edycji stron HTML (Hyper Text Markup Language) można wykorzystać dowolny edytor tekstowy (np. Notatnik) umożliwiający edycję zwykłych plików tekstowych.

Bardziej szczegółowo

HTML5 Nowe znaczniki header nav article section aside footer

HTML5 Nowe znaczniki header nav article section aside footer Specyfikacja HTML5 wprowadza nowe znaczniki pozwalające w łatwy i intuicyjny sposób budować szkielet strony, który przez zmniejszenie ilości kodu jest czytelniejszy i łatwiejszy w utrzymaniu, pozwala poza

Bardziej szczegółowo

Tematy lekcji informatyki klasa 4a luty/marzec 2013

Tematy lekcji informatyki klasa 4a luty/marzec 2013 Tematy lekcji informatyki klasa 4a luty/marzec 2013 temat 11. z podręcznika (str. 116-120) Jak uruchomić edytor tekstu MS Word 2007? ćwiczenia 2-5 (str. 117-120); Co to jest przycisk Office? W jaki sposób

Bardziej szczegółowo

5-6. Struktura dokumentu html. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów

5-6. Struktura dokumentu html. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów Aplikacje internetowe KL. III Rok szkolny: 013/01 Nr programu: 31[01]/T,SP/MENIS/00.06.1 Okres kształcenia: łącznie ok. 170 godz. lekcyjne Moduł Bok wprowadzający 1. Zapoznanie z programem nauczania i

Bardziej szczegółowo

HTML (HyperText Markup Language) hipertekstowy język znaczników

HTML (HyperText Markup Language) hipertekstowy język znaczników HTML (HyperText Markup Language) hipertekstowy język znaczników Struktura dokumentu tytuł strony

Bardziej szczegółowo

Programowanie WEB PODSTAWY HTML

Programowanie WEB PODSTAWY HTML Programowanie WEB PODSTAWY HTML Najprostsza strona HTML tytuł strony To jest moja pierwsza strona WWW. tytuł strony

Bardziej szczegółowo

MS Word 2010. Długi dokument. Praca z długim dokumentem. Kinga Sorkowska 2011-12-30

MS Word 2010. Długi dokument. Praca z długim dokumentem. Kinga Sorkowska 2011-12-30 MS Word 2010 Długi dokument Praca z długim dokumentem Kinga Sorkowska 2011-12-30 Dodawanie strony tytułowej 1 W programie Microsoft Word udostępniono wygodną galerię wstępnie zdefiniowanych stron tytułowych.

Bardziej szczegółowo

rk HTML 4 a 5 różnice

rk HTML 4 a 5 różnice rk HTML 4 a 5 różnice kompatybilność Pierwszym dużym plusem języka HTML 5 jest to, że jest zdefiniowany w sposób umożliwiający kompatybilność wstecz. Składnia Przykład dokumentu podporządkowującego się

Bardziej szczegółowo

Ćw. IV. Tworzenie stron internetowych. Podstawy projektowania, wprowadzenie do języka HTML

Ćw. IV. Tworzenie stron internetowych. Podstawy projektowania, wprowadzenie do języka HTML Ćw. IV. Tworzenie stron internetowych. Podstawy projektowania, wprowadzenie do języka HTML Zad.1 Zapoznaj się z poniŝszymi artykułami dotyczącymi projektowania stron WWW:. http://galeria.muzykaduszy.pl/zasady.php

Bardziej szczegółowo

Konfiguracja szablonu i wystawienie pierwszej aukcji allegro

Konfiguracja szablonu i wystawienie pierwszej aukcji allegro Konfiguracja szablonu i wystawienie pierwszej aukcji allegro Metod na wystawienie aukcji na allegro jest co najmniej 2. W pierwszej przechodzimy do zakładki MOJA SPRZEDAŻ, w USTAWIENIACH SPRZEDAŻY odnajdujemy

Bardziej szczegółowo

Masz pomysł na lepszy wygląd?

Masz pomysł na lepszy wygląd? Właśnie zrobiłem świetne narzędzie dla ludzi z wyobraźnią i wyczuciem smaku :) No właśnie mogę się pochwalić nowym narzędziem, jakie zrobiłem w panelu (do tego są potrzebne uprawnienia, jak ktoś zna się

Bardziej szczegółowo

Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06. Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional).

Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06. Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional). Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06 Moduł 4. Style Zajęcia poświęcone będą kaskadowym arkuszom stylów (por. slajdy 18.-27. z wykładu 2.) Wiele uwagi poświęcaliśmy do tej pory planowaniu szkieletu

Bardziej szczegółowo

Tworzenie Stron Internetowych. odcinek 5

Tworzenie Stron Internetowych. odcinek 5 Tworzenie Stron Internetowych odcinek 5 Nagłówek zawiera podstawowe informacje o dokumencie, takie jak: tytuł strony (obowiązkowy) metainformacje/metadane (obowiązkowa deklaracja

Bardziej szczegółowo

Pokaz slajdów na stronie internetowej

Pokaz slajdów na stronie internetowej Pokaz slajdów na stronie internetowej... 1 Podpisy pod zdjęciami... 3 Publikacja pokazu slajdów w Internecie... 4 Generator strony Uczelni... 4 Funkcje dla zaawansowanych użytkowników... 5 Zmiana kolorów

Bardziej szczegółowo

Przepis. Wstęp HTML & CSS. W tym projekcie nauczycie się, jak stworzyć stronę internetową ze swoim ulubionym przepisem. Zadania do wykonania

Przepis. Wstęp HTML & CSS. W tym projekcie nauczycie się, jak stworzyć stronę internetową ze swoim ulubionym przepisem. Zadania do wykonania HTML & CSS 1 Przepis Każdy Klub Kodowania musi być zarejestrowany. Zarejestrowane kluby można zobaczyć na mapie na stronie codeclubworld.org - jeżeli nie ma tam twojego klubu sprawdź na stronie jumpto.cc/18cplpy

Bardziej szczegółowo

Tutorial. HTML Rozdział: Ramki

Tutorial. HTML Rozdział: Ramki Autor: Mateusz Wojtyna Opis ogólny Tutorial HTML Rozdział: Ramki Ramki są bardzo pomocnym narzędziem przy tworzeniu strony internetowej jeżeli na przykład chcemy stworzyć sobie menu wszystkich podstron

Bardziej szczegółowo

Kaskadowe arkusze stylów (CSS)

Kaskadowe arkusze stylów (CSS) Kaskadowe arkusze stylów (CSS) CSS (Cascading Style Sheets) jest to język opisujący sposób, w jaki przeglądarki mają wyświetlać zawartość odpowiednich elementów HTML. Kaskadowe arkusze stylów służą do

Bardziej szczegółowo

Tworzenie Stron Internetowych. odcinek 6

Tworzenie Stron Internetowych. odcinek 6 Tworzenie Stron Internetowych odcinek 6 CSS kaskadowe arkusze stylów CSS (Cascading Style Sheets), czyli Kaskadowe Arkusze Stylów "stylów" "arkusze" Reguły opisujące wygląd dokumentu opisanego za pomocą

Bardziej szczegółowo

[

]
Materiały dydaktyczne 1/5

<html> </html> <body> </body> <p> [</p>] <br> <html> <head> </head> <body> </body> </html> Materiały dydaktyczne 1/5 PODSTAWOWE INFORMACJE HTML (HyperText Mark-up Language) język programowanie, który pozwala na publikowanie treści w sieci WWW. Nie jest to klasyczny język liniowy (w HTML mamy dostęp w każdym miejscu do

Bardziej szczegółowo

Przewodnik... Tworzenie Landing Page

Przewodnik... Tworzenie Landing Page Przewodnik... Tworzenie Landing Page Spis treści Kreator strony landing page Stwórz stronę Zarządzaj stronami 2 Kreator strony landing page Kreator pozwala stworzyć własną stronę internetową z unikalnym

Bardziej szczegółowo

1.Formatowanie tekstu z użyciem stylów

1.Formatowanie tekstu z użyciem stylów 1.Formatowanie tekstu z użyciem stylów Co to jest styl? Styl jest ciągiem znaków formatujących, które mogą być stosowane do tekstu w dokumencie w celu szybkiej zmiany jego wyglądu. Stosując styl, stosuje

Bardziej szczegółowo

1. Przypisy, indeks i spisy.

1. Przypisy, indeks i spisy. 1. Przypisy, indeks i spisy. (Wstaw Odwołanie Przypis dolny - ) (Wstaw Odwołanie Indeks i spisy - ) Przypisy dolne i końcowe w drukowanych dokumentach umożliwiają umieszczanie w dokumencie objaśnień, komentarzy

Bardziej szczegółowo

URL: http://www.ecdl.pl

URL: http://www.ecdl.pl Syllabus WEBSTARTER wersja 1.0 Polskie Towarzystwo Informatyczne 2007 Copyright wersji angielskiej: Copyright wersji polskiej: The European Computer Driving Licence Foundation Ltd. Polskie Towarzystwo

Bardziej szczegółowo

Tworzenie stron internetowych w oparciu o język HTML

Tworzenie stron internetowych w oparciu o język HTML Ćwiczenie 1 Temat: Tworzenie stron internetowych w oparciu o język HTML Cel ćwiczenia: Celem ćwiczenia jest zapoznanie studenta z technologią tworzenia stron internetowych z wykorzystaniem języka HTML.

Bardziej szczegółowo

Ćwiczenie 4 Konspekt numerowany

Ćwiczenie 4 Konspekt numerowany Ćwiczenie 4 Konspekt numerowany Celem ćwiczenia jest zastosowane automatycznej, wielopoziomowej numeracji nagłówków w wielostronicowym dokumencie. Warunkiem poprawnego wykonania tego ćwiczenia jest właściwe

Bardziej szczegółowo

Nowy szablon stron pracowników ZUT

Nowy szablon stron pracowników ZUT Nowy szablon stron pracowników ZUT Uczelniane Centrum Informatyki ZUT przygotowało nowy szablon stron pracowników, zunifikowany z obecnymi stronami ZUT. Serdecznie zachęcamy Państwa do migracji na nowy

Bardziej szczegółowo

Aplikacje WWW - laboratorium

Aplikacje WWW - laboratorium Aplikacje WWW - laboratorium HTML + CSS Celem ćwiczenia jest przygotowanie prostej aplikacji internetowej składającej się z zestawu stron w języku HTML. Ćwiczenia można wykonać na dowolnym komputerze,

Bardziej szczegółowo

Podstawy edycji tekstu

Podstawy edycji tekstu Podstawy edycji tekstu Edytor tekstu (ang. word processor) to program umożliwiający wprowadzanie, redagowanie, formatowanie oraz drukowanie dokumentów tekstowych. Wyliczmy możliwości dzisiejszych aplikacji

Bardziej szczegółowo

Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp.

Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp. Style CSS Wstęp Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp. Podstawową zaletą i zadaniem stylów jest oddzielenie

Bardziej szczegółowo

AUDYT DOSTĘPNOŚCI STRONY INTERNETOWEJ

AUDYT DOSTĘPNOŚCI STRONY INTERNETOWEJ Poznań, 2012-10-04 AUDYT DOSTĘPNOŚCI STRONY INTERNETOWEJ NAZWA ADRES STRONY ILOŚĆ BŁĘDÓW WCAG 33 ILOŚĆ OSTRZEŻEŃ WCAG 3 TYP DOKUMENTU UŻYTY FORMAT (X)HTML JĘZYK OWANIE STRONY Urząd Marszałkowski Województwa

Bardziej szczegółowo

Laboratorium 1: Szablon strony w HTML5

Laboratorium 1: Szablon strony w HTML5 Laboratorium 1: Szablon strony w HTML5 Czas realizacji: 2 godziny Kurs: WYK01_HTML.pdf, WYK02_CSS.pdf Pliki:, Edytor: http://www.sublimetext.com/ stabilna wersja 2 (portable) Ćwiczenie 1. Szablon strony

Bardziej szczegółowo

Nawigacja po długim dokumencie może być męcząca, dlatego warto poznać następujące skróty klawiszowe

Nawigacja po długim dokumencie może być męcząca, dlatego warto poznać następujące skróty klawiszowe Zestawienie wydatków rok 2015 1 Wstaw numerację stron. Aby to zrobić przejdź na zakładkę Wstawianie i w grupie Nagłówek i stopka wybierz Numer strony. Następnie określ pozycję numeru na stronie (na przykład

Bardziej szczegółowo

Widżety KIWIPortal. tworzenie umieszczanie na stronach internetowych opcje zaawansowane. Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.

Widżety KIWIPortal. tworzenie umieszczanie na stronach internetowych opcje zaawansowane. Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1. Widżety KIWIPortal tworzenie umieszczanie na stronach internetowych opcje zaawansowane Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.3 Strona 1 z 17 1 SPIS TREŚCI 2 Metody osadzania widżetów... 3 2.1

Bardziej szczegółowo

Zadaniem tego laboratorium będzie zaznajomienie się z podstawowymi możliwościami kompozycji strony i grafiki

Zadaniem tego laboratorium będzie zaznajomienie się z podstawowymi możliwościami kompozycji strony i grafiki Zadaniem tego laboratorium będzie zaznajomienie się z podstawowymi możliwościami kompozycji strony i grafiki Edytory tekstu oferują wiele możliwości dostosowania układu (kompozycji) strony w celu uwypuklenia

Bardziej szczegółowo

Stawiamy pierwsze kroki

Stawiamy pierwsze kroki Stawiamy pierwsze kroki 3.1. Stawiamy pierwsze kroki Edytory tekstu to najbardziej popularna odmiana programów służących do wprowadzania i zmieniania (czyli edytowania) tekstów. Zalicza się je do programów

Bardziej szczegółowo

Imię, nazwisko i tytuł/stopień KOORDYNATORA (-ÓW) kursu/przedmiotu zatwierdzającego protokoły w systemie USOS Dr Adam Naumowicz

Imię, nazwisko i tytuł/stopień KOORDYNATORA (-ÓW) kursu/przedmiotu zatwierdzającego protokoły w systemie USOS Dr Adam Naumowicz SYLLABUS na rok akademicki 01/013 Tryb studiów Studia stacjonarne Kierunek studiów Informatyka Poziom studiów Pierwszego stopnia Rok studiów/ semestr II/4 Specjalność Bez specjalności Kod katedry/zakładu

Bardziej szczegółowo

Szczegółowy opis języka HTML5 znajdziemy w specyfikacji, która jest dostępna pod adresem

Szczegółowy opis języka HTML5 znajdziemy w specyfikacji, która jest dostępna pod adresem HTML (ang. Hyper Text Markup Language) jest to język znaczników używany do tworzenia stron internetowych. Obecnie stosowane są dwie wersje tego języka: HTML 4.01, która obowiązuje już od dawna, oraz HTML5,

Bardziej szczegółowo

Edukacja na odległość

Edukacja na odległość Ćwiczenie 2. Edukacja na odległość Obsługa konta WWW na serwerze Linuksowym Tworzenie portalu edukacyjnego o określonej, wybranej przez studenta tematyce naukowej. Cel ćwiczenia: Projektowanie strony czołowej

Bardziej szczegółowo

Instrukcja instalacji PHP-Hypercachera Refresher Standard oraz PHP-Hypercachera Refresher GZIP na Twojej witrynie

Instrukcja instalacji PHP-Hypercachera Refresher Standard oraz PHP-Hypercachera Refresher GZIP na Twojej witrynie Instrukcja instalacji PHP-Hypercachera Refresher Standard oraz PHP-Hypercachera Refresher GZIP na Twojej witrynie 1. Instalacja w zwykłym skrypcie PHP Instalacja PHP Hypercachera Refresher Standard i PHP

Bardziej szczegółowo

ECDL/ICDL Przetwarzanie tekstów Moduł B3 Sylabus - wersja 5.0

ECDL/ICDL Przetwarzanie tekstów Moduł B3 Sylabus - wersja 5.0 ECDL/ICDL Przetwarzanie tekstów Moduł B3 Sylabus - wersja 5.0 Przeznaczenie sylabusa Dokument ten zawiera szczegółowy sylabus dla modułu ECDL/ICDL Przetwarzanie tekstów. Sylabus opisuje zakres wiedzy i

Bardziej szczegółowo

INSTRUKCJA OBSŁUGI BIULETYNU INFORMACJI PUBLICZNEJ

INSTRUKCJA OBSŁUGI BIULETYNU INFORMACJI PUBLICZNEJ INSTRUKCJA OBSŁUGI BIULETYNU INFORMACJI PUBLICZNEJ W celu wprowadzenia, modyfikacji lub usunięcia informacji w Biuletynie Informacji Publicznej należy wpisać w przeglądarce adres strony: http:/bip.moriw.pl/admin.php

Bardziej szczegółowo

Znaczniki zbudowane są ze znaków '< >', pomiędzy którymi znajduje się litera lub krótki tekst okreslający rodzaj znacznika.

Znaczniki zbudowane są ze znaków '< >', pomiędzy którymi znajduje się litera lub krótki tekst okreslający rodzaj znacznika. Lekcja 1: Znaczniki Charakterystyczną cechą kodu HTML są tzw. znaczniki (tagi), które służą do formatowania wprowadzanych na stronę internetową treści, informując przeglądarkę jak powinna wyświetlić teksty

Bardziej szczegółowo

STRONY INTERNETOWE mgr inż. Adrian Zapała

STRONY INTERNETOWE mgr inż. Adrian Zapała 1 STRONY INTERNETOWE mgr inż. Adrian Zapała STRONY INTERNETOWE Rodzaje stron internetowych statyczne (statyczny HTML + CSS) dynamiczne (PHP, ASP, technologie Flash) 2 JĘZYKI STRON WWW HTML (ang. HyperText

Bardziej szczegółowo

Programowanie internetowe

Programowanie internetowe Programowanie internetowe Wykład 1 HTML mgr inż. Michał Wojtera email: mwojtera@dmcs.pl Plan wykładu Organizacja zajęć Zakres przedmiotu Literatura Zawartość wykładu Wprowadzenie AMP / LAMP Podstawy HTML

Bardziej szczegółowo

SYSTEMY ZARZĄDZANIA TREŚCIĄ WORDPRESS

SYSTEMY ZARZĄDZANIA TREŚCIĄ WORDPRESS SYSTEMY ZARZĄDZANIA TREŚCIĄ WORDPRESS Małgorzata Mielniczuk System zarządzania treścią z angielskiego Content Management System w skrócie CMS jest oprogramowaniem ułatwiającym zarządzanie tworzonym serwisem

Bardziej szczegółowo

MATERIAŁY SZKOLENIOWE WORD PODSTAWOWY

MATERIAŁY SZKOLENIOWE WORD PODSTAWOWY MATERIAŁY SZKOLENIOWE WORD PODSTAWOWY 2013 Klawiatura narzędzie do wpisywania tekstu. 1. Wielkie litery piszemy z wciśniętym klawiszem SHIFT albo z włączonym klawiszem CAPSLOCK. 2. Litery typowe dla języka

Bardziej szczegółowo

Sylabus Moduł 2: Przetwarzanie tekstów

Sylabus Moduł 2: Przetwarzanie tekstów Sylabus Moduł 2: Przetwarzanie tekstów Niniejsze opracowanie przeznaczone jest dla osób zamierzających zdać egzamin ECDL (European Computer Driving Licence) na poziomie podstawowym. Publikacja zawiera

Bardziej szczegółowo

Szablon i zasady pisana pracy dyplomowej. Aneta Poniszewska-Marańda

Szablon i zasady pisana pracy dyplomowej. Aneta Poniszewska-Marańda Szablon i zasady pisana pracy dyplomowej Aneta Poniszewska-Marańda Spis treści Spis treści powinien zawierać spis wszystkich rozdziałów oraz podrozdziałów wraz z numerami stron, na których się rozpoczynają

Bardziej szczegółowo

Instalacja systemu zarządzania treścią (CMS): Joomla

Instalacja systemu zarządzania treścią (CMS): Joomla Instalacja systemu zarządzania treścią (CMS): Joomla Na stronie http://www.cba.pl/ zarejestruj nowe konto klikając na przycisk:, następnie wybierz nazwę domeny (Rys. 1a) oraz wypełnij obowiązkowe pola

Bardziej szczegółowo

Padlet wirtualna tablica lub papier w Internecie

Padlet wirtualna tablica lub papier w Internecie Padlet wirtualna tablica lub papier w Internecie Umiejętność gromadzenia, a potem przetwarzania, wykorzystania i zastosowania informacji w celu rozwiązania jakiegoś problemu, jest uważana za jedną z kluczowych,

Bardziej szczegółowo

Wykorzystanie PHP do tworzenia stron internetowych testujących wiedzę studentów ze statystyki

Wykorzystanie PHP do tworzenia stron internetowych testujących wiedzę studentów ze statystyki Radosław Jedynak jedynakr@pr.radom.pl Katedra Matematyki Politechnika Radomska Radom Wykorzystanie PHP do tworzenia stron internetowych testujących wiedzę studentów ze statystyki Wstęp Aktywnie rozwijająca

Bardziej szczegółowo

Rozwiązanie ćwiczenia 6a

Rozwiązanie ćwiczenia 6a Rozwiązanie ćwiczenia 6a Aby ponumerować strony: 1. Ustaw kursor tekstowy na pierwszej stronie dokumentu Polska_broszura.doc i kliknij przycisk Numer strony na karcie Wstawianie w grupie Nagłówek i stopka.

Bardziej szczegółowo

MySource Matrix CMS. Prosty Interfejs Użytkownika INSTRUKCJA wersja 1.3 POLAND AUSTRALIA UNITED KINGDOM NEW ZEALAND UNITED STATES

MySource Matrix CMS. Prosty Interfejs Użytkownika INSTRUKCJA wersja 1.3 POLAND AUSTRALIA UNITED KINGDOM NEW ZEALAND UNITED STATES MySource Matrix CMS Prosty Interfejs Użytkownika INSTRUKCJA wersja 1.3 POLAND AUSTRALIA UNITED KINGDOM NEW ZEALAND UNITED STATES Spis Treści Informacje Ogólne 3 Środowisko pracy 3 Logowanie do Prostego

Bardziej szczegółowo

KRYTERIA OCENIANIA Z ZAJĘĆ KOMPUTEROWYCH W KLASIE IV

KRYTERIA OCENIANIA Z ZAJĘĆ KOMPUTEROWYCH W KLASIE IV KRYTERIA OCENIANIA Z ZAJĘĆ KOMPUTEROWYCH W KLASIE IV I OKRES Sprawności 1. Komputery i programy konieczne (ocena: dopuszczający) wymienia z pomocą nauczyciela podstawowe zasady bezpiecznej pracy z komputerem;

Bardziej szczegółowo

Tworzenie formularzy w Microsoft Office Word 2007

Tworzenie formularzy w Microsoft Office Word 2007 Tworzenie formularzy w Microsoft Office Word 2007 Opublikowano: 5 kwietnia 2007 Autor: Michał Staniszewski W życiu codziennym często wypełniamy różnego rodzaju formularze, podania i coraz częściej mają

Bardziej szczegółowo

BIBLIOTEKA LOKALNE CENTRUM WIEDZY PRAKTYCZNEJ PRZEWODNIK PO NARZĘDZIACH WARSZTAT NR 1: ARKUSZE KALKULACYJNE - MINI SKRYPT

BIBLIOTEKA LOKALNE CENTRUM WIEDZY PRAKTYCZNEJ PRZEWODNIK PO NARZĘDZIACH WARSZTAT NR 1: ARKUSZE KALKULACYJNE - MINI SKRYPT BIBLIOTEKA LOKALNE CENTRUM WIEDZY PRAKTYCZNEJ PRZEWODNIK PO NARZĘDZIACH WARSZTAT NR 1: ARKUSZE KALKULACYJNE - MINI SKRYPT 1. Wprowadzenie Arkusze kalkulacyjne Google umożliwiają łatwe tworzenie, udostępnianie

Bardziej szczegółowo

e r T i H M r e n L T n

e r T i H M r e n L T n s e r T t w o i H M r e o T n w z n L Podstawy 1. Nawigacja na stronie jest niezwykle istotna, powinna być możliwie jak najprostsza. Pamiętajmy, że im mniej kroków do celu tym lepiej. 2. Projekt graficzny

Bardziej szczegółowo

HTML jak zrobić prostą stronę www

HTML jak zrobić prostą stronę www HTML jak zrobić prostą stronę www Z tej prezentacji dowiemy się: - co to jest HTML - jak znając podstawy HTML'a zrobić prostą stronę Co to jest HTML? HTML = HyperText Markup Language, czyli język znaczników

Bardziej szczegółowo

Akademia Techniczno-Humanistyczna w Bielsku-Białej

Akademia Techniczno-Humanistyczna w Bielsku-Białej Akademia Techniczno-Humanistyczna w Bielsku-Białej Wydział Budowy Maszyn i Informatyki Laboratorium z sieci komputerowych Ćwiczenie numer: 8 Temat ćwiczenia: Tworzenie stron WWW (HTML, skrypty CSS). 1.

Bardziej szczegółowo

Można też ściągnąć np. z: http://portableapps.com/apps/development/notepadpp_portable

Można też ściągnąć np. z: http://portableapps.com/apps/development/notepadpp_portable W zadaniach można używać programu Notepad++ (jest wygodny, ponieważ m.in. koloruje składnię i uzupełnia funkcje) albo też jakiegoś innego edytora zainstalowanego w systemie (np. notatnika). Najnowszą,

Bardziej szczegółowo

Technologie Informacyjne

Technologie Informacyjne Technologie Informacyjne Wykªad 6 Paweª Witkowski MIM UW Wiosna 2013 P. Witkowski (MIM UW) Technologie Informacyjne Wiosna 2013 1 / 18 HTML HyperText Markup Language J zyk oparty na znacznikach Opisuje

Bardziej szczegółowo

Zadanie 9. Projektowanie stron dokumentu

Zadanie 9. Projektowanie stron dokumentu Zadanie 9. Projektowanie stron dokumentu Przygotowany dokument można: wydrukować i oprawić, zapisać jako strona sieci Web i opublikować w Internecie przekonwertować na format PDF i udostępnić w postaci

Bardziej szczegółowo

1. 2. Dobór formy do treści dokumentu w edytorze tekstu MS Word

1. 2. Dobór formy do treści dokumentu w edytorze tekstu MS Word 1. 2. Dobór formy do treści dokumentu w edytorze tekstu MS Word a. 1. Cele lekcji i. a) Wiadomości 1. Uczeń potrafi wyjaśnić pojęcia: nagłówek, stopka, przypis. 2. Uczeń potrafi wymienić dwie zasadnicze

Bardziej szczegółowo

Język (X)HTML. Podstawowe znaczniki i parametry. dr Konrad Dominas / UAM

Język (X)HTML. Podstawowe znaczniki i parametry. dr Konrad Dominas / UAM Język (X)HTML Podstawowe znaczniki i parametry Szablon dokumentu (X)HTML

Bardziej szczegółowo

edycja szablonu za pomocą serwisu allegro.pl

edycja szablonu za pomocą serwisu allegro.pl edycja szablonu za pomocą serwisu allegro.pl 2 Do obsługi Twojego szablonu nie jest wymagane żadne dodatkowe oprogramowanie - jedyne czego potrzebujesz to aktywne konto w serwisie allegro.pl. Dokładne

Bardziej szczegółowo

Ten krótki poradnik pomoże Ci zainstalować nasz katalog no-name na swojej stronie internetowej.

Ten krótki poradnik pomoże Ci zainstalować nasz katalog no-name na swojej stronie internetowej. Ten krótki poradnik pomoże Ci zainstalować nasz katalog no-name na swojej stronie internetowej. Krok 1 - rejestracja Wejdź na stronę http://www.adpen.pl/katalog/rejestracja.php i uzupełnij widoczny formularz

Bardziej szczegółowo

Tell a Story. Wstęp HTML & CSS. W tym projekcie nauczycie się, jak stworzyć własną stronę internetową, by opowiedzieć historyjkę, dowcip albo wiersz.

Tell a Story. Wstęp HTML & CSS. W tym projekcie nauczycie się, jak stworzyć własną stronę internetową, by opowiedzieć historyjkę, dowcip albo wiersz. HTML & CSS 1 Tell a Story Każdy Klub Kodowania musi być zarejestrowany. Zarejestrowane kluby można zobaczyć na mapie na stronie codeclubworld.org - jeżeli nie ma tam twojego klubu sprawdź na stronie jumpto.cc/18cplpy

Bardziej szczegółowo

Specyfikacja techniczna dot. mailingów HTML

Specyfikacja techniczna dot. mailingów HTML Specyfikacja techniczna dot. mailingów HTML Informacje wstępne Wszystkie składniki mailingu (pliki graficzne, teksty, pliki HTML) muszą być przekazane do melog.com dwa dni albo maksymalnie dzień wcześniej

Bardziej szczegółowo

Witryny i aplikacje internetowe

Witryny i aplikacje internetowe Program nauczania Witryny i aplikacje internetowe technik informatyk 351203 Treści nauczania Lp. Temat Liczba Efekty kształcenia godzin 1. HTML hipertekstowy język znaczników 30 1. Składnia języka HTML

Bardziej szczegółowo

Jak dodać wpis? Po zalogowaniu na blog znajdujesz się w panelu administracyjnym. Po lewej stronie widzisz menu:

Jak dodać wpis? Po zalogowaniu na blog znajdujesz się w panelu administracyjnym. Po lewej stronie widzisz menu: Jak dodać wpis? Po zalogowaniu na blog znajdujesz się w panelu administracyjnym. Po lewej stronie widzisz menu: Klikasz Wpisy, a następnie Dodaj nowy i otwiera się taki ekran: 1 W tym miejscu tworzysz

Bardziej szczegółowo

Instrukcja zarządzania kontem przedsiębiorstwa w serwisie internetowym www.esiop.legionowo.pl

Instrukcja zarządzania kontem przedsiębiorstwa w serwisie internetowym www.esiop.legionowo.pl Instrukcja zarządzania kontem przedsiębiorstwa w serwisie internetowym www.esiop.legionowo.pl Rejestracja w serwisie: Aby utworzyć konto w serwisie, należy otworzyć w przeglądarce internetowej stronę www.esiop.legionowo.pl,

Bardziej szczegółowo

O stronach www, html itp..

O stronach www, html itp.. O stronach www, html itp.. Prosty wstęp do podstawowych technik spotykanych w internecie 09.01.2015 M. Rad Plan wykładu Html Przykład Strona www Xhtml Css Php Js HTML HTML - (ang. HyperText Markup Language)

Bardziej szczegółowo

Copyright wersji angielskiej: The European Computer Driving Licence Foundation Ltd. Copyright wersji polskiej: Polskie Towarzystwo Informatyczne

Copyright wersji angielskiej: The European Computer Driving Licence Foundation Ltd. Copyright wersji polskiej: Polskie Towarzystwo Informatyczne Syllabus WEBSTARTER wersja 1.0 Polskie Towarzystwo Informatyczne 2007 Copyright wersji angielskiej: The European Computer Driving Licence Foundation Ltd. Copyright wersji polskiej: Polskie Towarzystwo

Bardziej szczegółowo

Można też ściągnąć np. z: http://portableapps.com/apps/development/notepadpp_portable

Można też ściągnąć np. z: http://portableapps.com/apps/development/notepadpp_portable W zadaniach można używać programu Notepad++ (jest wygodny, ponieważ m.in. koloruje składnię i uzupełnia funkcje) albo też jakiegoś innego edytora zainstalowanego w systemie (np. notatnika). Najnowszą,

Bardziej szczegółowo

MasterEdytor. Podprogram pomocniczy do programu mpfotoalbum 1.2 INSTRUKCJA

MasterEdytor. Podprogram pomocniczy do programu mpfotoalbum 1.2 INSTRUKCJA MasterEdytor Podprogram pomocniczy do programu mpfotoalbum 1.2 INSTRUKCJA 1. Przeznaczenie Program MasterEdytor przeznaczony jest do skonfigurowania wszystkich parametrów pracy programu mpfotoalbum. 2.

Bardziej szczegółowo

Moje Projekty. Wprowadzenie HTML & CSS

Moje Projekty. Wprowadzenie HTML & CSS HTML & CSS 1 Moje Projekty Każdy Klub Kodowania musi być zarejestrowany. Zarejestrowane kluby można zobaczyć na mapie na stronie codeclubworld.org - jeżeli nie ma tam twojego klubu sprawdź na stronie jumpto.cc/18cplpy

Bardziej szczegółowo

Wprowadzenie do języka HTML

Wprowadzenie do języka HTML Radosław Rudnicki (joix@mat.umk.pl) 05.09.2009 r. Wprowadzenie do języka HTML Do tworzenia stron internetowych wystarczy użyd zwykłego Notatnika oferowanego przez system Windows, czy dowolny inny system

Bardziej szczegółowo

Ćwiczenie 2 Tekst podstawowe znaczniki.

Ćwiczenie 2 Tekst podstawowe znaczniki. Ćwiczenie 2 Tekst podstawowe znaczniki. Ćwiczenie 2 poświęcone jest formatowaniu tekstu za pomocą znaczników. AŜeby uzyskać poŝądany wygląd tekstu musimy posłuŝyć się określonymi znacznikami. Ćwiczenie

Bardziej szczegółowo

Ćwiczenia nr 2. Edycja tekstu (Microsoft Word)

Ćwiczenia nr 2. Edycja tekstu (Microsoft Word) Dostosowywanie paska zadań Ćwiczenia nr 2 Edycja tekstu (Microsoft Word) Domyślnie program Word proponuje paski narzędzi Standardowy oraz Formatowanie z zestawem opcji widocznym poniżej: Można jednak zmodyfikować

Bardziej szczegółowo

Formatowanie komórek

Formatowanie komórek Formatowanie komórek 3.4 Formatowanie komórek Praca w MS Excel 2010 byłaby bardzo uciążliwa gdyby nie formatowanie. Duże ilości danych sprawiają, iż nasz arkusz staje się coraz pełniejszy, a my nie mamy

Bardziej szczegółowo

Edytor tekstu OpenOffice Writer Podstawy

Edytor tekstu OpenOffice Writer Podstawy Edytor tekstu OpenOffice Writer Podstawy OpenOffice to darmowy zaawansowany pakiet biurowy, w skład którego wchodzą następujące programy: edytor tekstu Writer, arkusz kalkulacyjny Calc, program do tworzenia

Bardziej szczegółowo

www.fwrl.pl/szkolenie

www.fwrl.pl/szkolenie STRONA www.fwrl.pl/szkolenie MS WORD HTML HTML i dostarczają informację dla silnika przeglądarki o tym jak ma być zbudowana i wyświetlona strona HTML HTML HTML (warstwa logiczna co i gdzie ma być) (wastwa

Bardziej szczegółowo