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

Po zakończeniu rozważań na temat World Wide Web, poznaniu zasad organizacji witryn WWW, przeczytaniu kilkudziesięciu stron i poznaniu wielu nowych

Po zakończeniu rozważań na temat World Wide Web, poznaniu zasad organizacji witryn WWW, przeczytaniu kilkudziesięciu stron i poznaniu wielu nowych rk Po zakończeniu rozważań na temat World Wide Web, poznaniu zasad organizacji witryn WWW, przeczytaniu kilkudziesięciu stron i poznaniu wielu nowych pojęć, prawdopodobnie zastanawiasz się, kiedy zaczniesz

Bardziej szczegółowo

ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści

ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop. 2012 Spis treści Wstęp 9 1 HTML 5 i XHTML w pytaniach i odpowiedziach 13 Co to jest HTML 5? 13 Co to jest XHTML? 15 Czy strony utworzone w HTML

Bardziej szczegółowo

Formatowanie tekstu przy uz yciu stylo w

Formatowanie tekstu przy uz yciu stylo w Formatowanie tekstu przy uz yciu stylo w Czy stosowanie wciąż tego samego formatowania albo zmienianie koloru, rozmiaru lub rodzaju czcionki w celu wyróżnienia tekstu należy do często wykonywanych czynności?

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

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

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

Ć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

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

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

Ć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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Wymagania edukacyjne z przedmiotu: Witryny i aplikacje internetowe. Technik Informatyk

Wymagania edukacyjne z przedmiotu: Witryny i aplikacje internetowe. Technik Informatyk 4.1 Projektowanie witryn internetowych klasa II 4.2 Tworzenie witryn internetowych klasa II 4.3 Tworzenie aplikacji internetowych klasa III/ IV Wymagania edukacyjne z przedmiotu: Witryny i aplikacje internetowe.

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

SPIS TREŚCI. Sposób pierwszy... 3 Sposób drugi Ikony banków Ikony dostawców Strona1

SPIS TREŚCI. Sposób pierwszy... 3 Sposób drugi Ikony banków Ikony dostawców Strona1 INSTRUKCJA UŻYTKOWANIA SZABLONU ALLEGRO ZAKUPIONEGO W PAKIECIE STANDARD, MAXI LUB VIP. SPIS TREŚCI 1. OTRZYMANE PLIKI.... 2 2. DODANIE SZABLONU DO SERWISU ALLEGRO ORAZ JEGO UŻYTKOWANIE.... 3 Sposób pierwszy....

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

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

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

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

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

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

Zadanie 1. Stosowanie stylów

Zadanie 1. Stosowanie stylów Zadanie 1. Stosowanie stylów Styl to zestaw elementów formatowania określających wygląd: tekstu atrybuty czcionki (tzw. styl znaku), akapitów np. wyrównanie tekstu, odstępy między wierszami, wcięcia, a

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

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

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

Ć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

[

]
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

#1 Wartościowa treść. #2 Słowa kluczowe. #3 Adresy URL

#1 Wartościowa treść. #2 Słowa kluczowe. #3 Adresy URL #1 Wartościowa treść Treść artykułu powinna być unikatowa (algorytm wyszukiwarki nisko ocenia skopiowaną zawartość, a na strony zawierające powtórzoną treść może zostać nałożony filtr, co skutkuje spadkiem

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

Odnośniki jeszcze do niedawna odróżniały strony WWW od wszystkich innych dokumentów elektronicznych. Możliwość deklarowania odnośników do innych

Odnośniki jeszcze do niedawna odróżniały strony WWW od wszystkich innych dokumentów elektronicznych. Możliwość deklarowania odnośników do innych odnośniki Część 3 Odnośniki jeszcze do niedawna odróżniały strony WWW od wszystkich innych dokumentów elektronicznych. Możliwość deklarowania odnośników do innych dokumentów niezależnie od ich umiejscowienia

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

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

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

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

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

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

Laboratorium 1 (ZIP): Style

Laboratorium 1 (ZIP): Style Wojciech Myszka Laboratorium 1 (ZIP): Style Spis treści 1. Wstęp............................................. 1 1.1. Cel laboratorium.................................... 1 1.2. Wymagania.......................................

Bardziej szczegółowo

Technologia Informacyjna. semestr I, studia niestacjonarne I stopnia Elektrotechnika rok akademicki 2012/2013 Pracownia nr 2 mgr inż.

Technologia Informacyjna. semestr I, studia niestacjonarne I stopnia Elektrotechnika rok akademicki 2012/2013 Pracownia nr 2 mgr inż. Technologia Informacyjna semestr I, studia niestacjonarne I stopnia Elektrotechnika rok akademicki 2012/2013 Pracownia nr 2 mgr inż. Adam Idźkowski Technologia informacyjna Pracownia nr 2 2 Edytor tekstu

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

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

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

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

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

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

1.5. Formatowanie dokumentu

1.5. Formatowanie dokumentu Komputerowa edycja tekstu 29 1.5. Formatowanie dokumentu Pisanie, kopiowanie czy przenoszenie tekstu to jedynie część naszej pracy z dokumentem. O tym, jak będzie się on prezentował, decydujemy, wykonując

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

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

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

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

Wymagania edukacyjne z zajęć komputerowych w klasie 5

Wymagania edukacyjne z zajęć komputerowych w klasie 5 Wymagania edukacyjne z zajęć komputerowych w klasie 5 Ocena dopuszczajaca:uczeń Ocena dostateczna:uczeń Ocena dobra: uczeń Ocena bardzo dobra:uczeń Ocena celująca: uczeń zna zasady bezpiecznej pracy z

Bardziej szczegółowo

SPIS TREŚCI. Sposób pierwszy... 4 Sposób drugi Ikony banków Ikony dostawców Strona1

SPIS TREŚCI. Sposób pierwszy... 4 Sposób drugi Ikony banków Ikony dostawców Strona1 INSTRUKCJA UŻYTKOWANIA SZABLONU ALLEGRO SPIS TREŚCI 1. DODANIE PANELU MINIATUR DO SZABLONU ALLEGRO.... 2 2. DODANIE SZABLONU DO SERWISU ALLEGRO ORAZ JEGO UŻYTKOWANIE.... 4 Sposób pierwszy.... 4 Sposób

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

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

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

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

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

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

Dodawanie grafiki i obiektów

Dodawanie grafiki i obiektów Dodawanie grafiki i obiektów Word nie jest edytorem obiektów graficznych, ale oferuje kilka opcji, dzięki którym można dokonywać niewielkich zmian w rysunku. W Wordzie możesz zmieniać rozmiar obiektu graficznego,

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

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

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

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

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

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

5. Praca z klasą. Dodawanie materiałów i plików. Etykieta tematu. Rozdział 5 Praca z klasą

5. Praca z klasą. Dodawanie materiałów i plików. Etykieta tematu. Rozdział 5 Praca z klasą 5. Praca z klasą Jako prowadzący i nauczyciel mamy bardzo duże możliwości, jeżeli chodzi o zamieszczanie i korzystanie z materiałów na platformie e-learningowej. Wykładowca w pierwszej kolejności musi

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

E.14.1 Tworzenie stron internetowych / Krzysztof T. Czarkowski, Ilona Nowosad. Warszawa, Spis treści

E.14.1 Tworzenie stron internetowych / Krzysztof T. Czarkowski, Ilona Nowosad. Warszawa, Spis treści E.14.1 Tworzenie stron internetowych / Krzysztof T. Czarkowski, Ilona Nowosad. Warszawa, 2014 Spis treści Przewodnik po podręczniku 8 Wstęp 10 1. Hipertekstowe języki znaczników 1.1. Elementy i znaczniki

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

Laboratorium 1 Wprowadzenie do PHP

Laboratorium 1 Wprowadzenie do PHP Laboratorium 1 Wprowadzenie do PHP Ćwiczenie 1. Tworzenie i uruchamianie projektu PHP w Netbeans Tworzenie projektu Uruchom środowisko NetBeans. Stwórz nowy projekt typu PHP Application (File->New Project,

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

Tworzenie wiadomości Newsletter

Tworzenie wiadomości Newsletter Tworzenie wiadomości Newsletter W tym przewodniku dowiesz się jak Tworzyć atrakcyjne wiadomości Newlsetter, wybierać grupy docelowe do wysyłki oraz publikować wiadomości na profilach w portalach społecznościowych.

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

1. Zaczynamy! (9) 2. Edycja dokumentów (33)

1. Zaczynamy! (9) 2. Edycja dokumentów (33) 1. Zaczynamy! (9) Uruchamiamy program Word i co z tego wynika... (10) o Obszar roboczy, czyli miejsce do pracy (12) Otwieranie dokumentów w programie Word (14) o Tworzenie nowego dokumentu (14) o Otwieranie

Bardziej szczegółowo

1 TEMAT LEKCJI: 2 CELE LEKCJI: 3 METODY NAUCZANIA. Scenariusz lekcji. 2.1 Wiadomości: 2.2 Umiejętności: Scenariusz lekcji

1 TEMAT LEKCJI: 2 CELE LEKCJI: 3 METODY NAUCZANIA. Scenariusz lekcji. 2.1 Wiadomości: 2.2 Umiejętności: Scenariusz lekcji Scenariusz lekcji 1 TEMAT LEKCJI: Formatowanie treści oraz grafika w kodzie HTML 2 CELE LEKCJI: 2.1 Wiadomości: Uczeń potrafi: wymienić i scharakteryzować zasady tworzenie czytelnych, atrakcyjnych i estetycznych

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

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

Zastanawiałeś się może, dlaczego Twój współpracownik,

Zastanawiałeś się może, dlaczego Twój współpracownik, Kurs Makra dla początkujących Wiadomości wstępne VBI/01 Piotr Dynia, specjalista ds. MS Office Czas, który poświęcisz na naukę tego zagadnienia, to 15 20 minut. Zastanawiałeś się może, dlaczego Twój współpracownik,

Bardziej szczegółowo

SYSTEMY OPERACYJNE I SIECI KOMPUTEROWE

SYSTEMY OPERACYJNE I SIECI KOMPUTEROWE SYSTEMY OPERACYJNE I SIECI KOMPUTEROWE WINDOWS 1 SO i SK/WIN 006 Wydajność systemu 2 SO i SK/WIN Najprostszym sposobem na poprawienie wydajności systemu, jeżeli dysponujemy zbyt małą ilością pamięci RAM

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

Podstawowa instrukcja obsługi STRON stron internetowych serwisu www.smpn.pl zrealizowanych w systemie zarządzania treścią Wordpress.

Podstawowa instrukcja obsługi STRON stron internetowych serwisu www.smpn.pl zrealizowanych w systemie zarządzania treścią Wordpress. Podstawowa instrukcja obsługi STRON stron internetowych serwisu www.smpn.pl zrealizowanych w systemie zarządzania treścią Wordpress. Założenia użytkownik posiada założone konto w systemie z prawami Redaktora.

Bardziej szczegółowo

TWORZENIE PREZENTACJI MS POWERPOINT

TWORZENIE PREZENTACJI MS POWERPOINT TWORZENIE PREZENTACJI MS POWERPOINT Wstęp TWORZENIE PREZENTACJI MS POWERPOINT Czasami zdarza się, że zostajemy poproszeni o poprowadzenia spotkania czy szkolenia w firmie, w której pracujemy lub po prostu

Bardziej szczegółowo