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

Download "

"

Transkrypt

1 Znacznik HTML jest specjalnym ciągiem znaków objętym nawiasami kątowymi. Schemat zapisu znacznika: <znacznik_otwierający atrybut> </ znacznik_zamykający> przykład <p> </ p> p - od paragraph służy do wstawiania interlinii między akapitami tekstu znacznik otwierający może zawierać atrybut, który umieszczamy wewnątrz nawiasu kątowego przykład <p id= identyfikator > </p> nazwy znaczników oraz atrybuty wpisujemy małymi literami odwołując się do nazwy pliku, wpisujemy jego nazwę dokładnie tak jak ona wygląda wartości atrybutów wpisujemy używając cudzysłowu znaczniki zamykające nigdy nie zawierają dodatkowych parametrów

2 znaczniki, z nielicznymi wyjątkami, występują w parach wyjątki w XHTML: <br /> <hr /> <img /> <meta /> <link /> <base /> bezpośrednio przed znakiem / dodaj spację spacje: <znacznik_otwierający atrybut= wartość_atrybutu > </ znacznik_zamykający> tu nie ma spacji tu jest spacja tu nie ma spacji

3 Kilka zasad: nigdy nie krzyżuj znaczników <p> coś tam <em> coś tam </em> </p> zawsze zamykaj wszystkie znaczniki wpisując znaczniki i atrybuty, zawsze używaj małych liter używaj cudzysłowów dla wszystkich atrybutów <table border= 1 >

4 Polecany szkielet dokumentu Cały dokument powinien być objęty parą znaczników <html> </html> Między nimi powinna zaś się znaleźć para znaczników <head> </head> która stanowi ramy dla informacji nagłówkowych. Pozostałe informacje powinny być objęte znacznikami <body> </body>

5 Wygląda to następująco: <html> <head> informacje nagłówkowe </head> <body> właściwa treść (ciało) dokumentu </body> </html> Taki szkielet dokumentu jest "bezpieczny" i nie niesie ze sobą ryzyka jakichś niespodzianek.

6 Struktura dokumentu Określamy zgodność ze specyfikacją pierwszy wpis to prolog określa wersję języka XML oraz sposób kodowania znaków: <?xml version= 1.0 encoding= iso ?> określamy rodzaj używanego do tworzenia strony języka: <!DOCTYPE html PUBLIC -//W3W//DTD XHTML 1.0 Strict//EN przygotowaliśmy stronę wykorzystującą wyłącznie język XHTML i ściśle trzymamy się zaleceń specyfikacji. Uwaga: wielkie litery w deklaracji DTD (Document Type Definition) są konieczne!

7 Ramy dokumentu XHTML <html xmlns= xml:lang= pl lang= pl > </html> dodatkowe argumenty służą do określenia znaczenia poszczególnych dodatkowe argumenty służą do określenia znaczenia poszczególnych znaczników wykorzystywanych w kodzie strony

8 Nagłówek strony określa para znaczników <head> </head> tu są elementy ważne dla konstrukcji strony mamy więc : <?xml version= 1.0 encoding= iso ?> <!DOCTYPE html PUBLIC -//W3W//DTD XHTML 1.0 Strict//EN <html xmlns= xml:lang= pl lang= pl > </html> <head> </head>

9 Jakie informacje umieszczamy w nagłówku strony czyli wewnątrz znacznika <head></head>: polskie znaki standard to ISO stosujemy edytor z modułem konwersji w locie (np. ked)! wstawiamy w sposób tradycyjny tzn. w formacie Windows 1250 a potem konwersja za pomocą programów-konwertorów jeśli na stronie używamy języków kilku krajów to stosujemy Unicode (http://www.unicode.org). Stosuje się UTF-7, UTF-8 lub UTF-16 tzn. format 7-, 8- lub 16-bitowy. jeśli korzystamy ze strony kodowej ISO to piszemy: <meta http-equiv= Content-Type content= text/html; charset=iso /> jeśli korzystamy ze strony kodowej Windows 1250 to piszemy: <meta http-equiv= Content-Type content= text/html; charset=windows-1250 /> jeśli korzystamy ze strony kodowej Unicode UTF-8 to piszemy: <meta http-equiv= Content-Type content= text/html; charset=utf-8 />

10 tytuł dokumentu znacznik: <title>nazwa mojej strony</title> wstawia tytuł strony widoczny na pasku tytułu przeglądarki słowa kluczowe i opis strony wyszukiwarki znajdują strony w Internecie korzystając z tytułu strony, słów kluczowych (keywords) i opisu strony (description) znaczniki: <meta name= keywords content= słowa kluczowe rozdzielone przecinkami /> <meta name= description content= krótki opis strony /> jedno, dwa zdania na temat zawartości strony, które pojawią się jako wynik szukania. Na ich podstawie internauta decyduje czy strona jest warta odwiedzenia

11 inne elementy nagłówka te, które nie pojawiają się na stronie i maja charakter czysto informacyjny informacje o autorze strony <meta name= author content= Twoje nazwisko /> lub <meta name= copyright content= nazwisko osoby majacej prawa autorskie do strony /> informacje o narzędziu użytym do tworzenia strony <meta name= generator content= ked /> informacje o języku strony <meta name= language content= pl /> możemy wprowadzić i inne informacje, ale musimy zachować strukturę znacznika, czyli <meta name= content= /> tu wpisujemy nazwę atrybutu tu wpisujemy wartość atrybutu

12 znacznik <meta /> z atrybutem http-equiv np. aby odświeżać dokument co x sekund <meta http-equiv= refresh content= x /> aby przenieść internautę po upływie x sekund pod nowy adres zadeklarowany w sekcji url. Zastosowanie: zmieniliśmy adres naszej strony ale chcemy zachować jej fanów więc pod starym adresem umieszczamy plik indeks.html z deklaracją: <meta http-equiv= refresh content= x: url=http://www.adres.pl /> aby podać adres autora witryny <meta http-equiv= reply-to content= adres autora /> aby podać datę wykonania strony <meta http-equiv= creation-date content= data wykonania />

13 znacznik <base /> określa bazowy adres dla dokumentu i wszystkich odnośników znajdujących się w jego treści (przydatne przy zmianie adresu strony) <base href= /> znacznik <link /> możemy dzięki niemu np. dołączyć zewnętrzny arkusz stylów <link rel= stylesheet href= nazwa.css type= text/css /> możemy też dołączyć w ten sposób zewnętrzny plik zawierający JavaScript np. plik skrypt.js Przydatne gdy ten skrypt jest wykonywany na każdej stronie naszej witryny komentarze nie wyświetlają się na stronie, maja nam pomagać, np. w edycji strony <! - - tu wpisuję komentarz do mojej strony- - >

14 mamy więc : <?xml version= 1.0 encoding= iso ?> <!DOCTYPE html PUBLIC -//W3W//DTD XHTML 1.0 Strict//EN <html xmlns= xml:lang= pl lang= pl > <head> <meta http-equiv= Content-Type content= text/html; charset= iso /> <meta name= keywords content= słowa kluczowe rozdzielone przecinkami /> <meta name= description content= krótki opis strony /> <meta name= copyright content= Twoje nazwisko /> <meta name= author content= Twoje nazwisko /> <title>nazwa mojej strony</title> <link rel= stylesheet href= nazwa.css type= text/css /> </html> </head>

15 zaczynamy bawić się programem ked instalujemy program i uruchamiamy go na pasku narzędzi odszukujemy przycisk Utwórz nowy plik, klikamy strzałkę z jego lewej strony i wybieramy szablon tworzonego dokumentu np. XHTML 1.0 Strict teraz wprowadzamy swoje poprawki do wyświetlonej treści i dopisujemy co trzeba w miejscach, gdzie występują kwadratowe nawiasy (usuwamy zarówno te nawiasy jak i ich zawartość) jeśli ręcznie dopisujemy znaczniki to program nam pomaga: po wpisaniu pełnego znacznika otwierającego automatycznie doda znacznik zamykający wyświetli okno z podpowiedziami dotyczącymi dostępnych atrybutów po wpisaniu nazwy atrybutu automatycznie wstawi cudzysłów

16 To co używamy w ciele dokumentu czyli wewnątrz znacznika <body> </body> Elementy służące do prezentacji tekstu to: nagłówki akapity cytaty indeksy górne i dolne znaczniki łamania wiersza poziome linie znacznik <div> </div> służą one do nadania poszczególnym elementom określonej formy (dokładne formatowanie takiego elementu jest oddzielone od języka XHTML i weszło w skład CSS)

17 nagłówki W dokumentach często wprowadzamy nagłówki. Służy do tego polecenie <hx> </hx> Znak h oznacza heading, natomiast x to stopień nagłówka (mamy sześć stopni). Stopień 1, czyli <h1> </h1>, definiuje największy nagłówek Stopień 6, czyli <h6> </h6>, definiuje nagłówek najmniejszy Uwaga: znaczniki w przeglądarce WWW nie są wyświetlane. Są one jedynie interpretowane, tzn. pozwalają "w locie" formatować tekst.

18 Wprowadźmy nagłówki za pomocą poleceń h1, h2 itd. <body> <h1>tytuł stopnia pierwszego</h1> <h2>tytuł stopnia drugiego</h2> <h3>tytuł stopnia trzeciego</h3> <h4>tytuł stopnia czwartego</h4> <h5>tytuł stopnia piątego</h5> <h6>tytuł stopnia szóstego</h6> </body>

19 I efekt: Tytuł stopnia pierwszego Tytuł stopnia drugiego Tytuł stopnia trzeciego Tytuł stopnia czwartego Tytuł stopnia piątego Tytuł stopnia szóstego

20 Akapit i wiersz Gdybyśmy wpisali dłuższy fragment tekstu, rozdzielając w edytorze akapity za pomocą klawisza Enter, przeglądarka zignoruje znaki końca wierszy i akapitów w edytorze i wyświetli jednolity blok tekstu. Aby rozdzielić akapity, należy posłużyć się poleceniem <p> tu wpisuję treść akapitu </p> (p = paragraph) Strona może zawierać dowolną liczbę akapitów, a każdy z nich jest oddzielony od pozostałych pustym wierszem. Przerwa ta jest automatycznie wstawiana przez przeglądarkę do jej kontroli musimy użyć CSS. Aby wprowadzić wcięcie pierwszego wiersza akapitu też musimy użyć CSS.

21 Nie nadużywaj możliwości tworzenia wielu akapitów W praktyce internauta przegląda tylko zawartość dwóch pierwszych ekranów monitora. Jeśli publikujemy dużą ilość tekstu, lepiej podzielić go na kilka części Przykład: <p>to jest treść pierwszego akapitu</p> <p>to jest treść drugiego akapitu</p> Rezultat: To jest treść pierwszego akapitu To jest treść drugiego akapitu

22 Cytaty aby zacytować większy fragment tekstu w kodzie strony używamy znacznika <blockquote> tu wpisujemy treść cytatu -- ten tekst będzie nieznacznie wcięty w porównaniu do pozostałych akapitów </blockquote> Aby cytować wewnątrz bloku tekstu stosujemy znacznik <q> tu wpisujemy treść cytatu </q> ten tekst będzie ujęty w cudzysłów do obu znaczników można dodać atrybut cite pozwala on na określenie adresu strony, z której pochodzi cytowany tekst, np. <blockquote cite= > </blockquote>

23 Indeks górny i dolny możemy wymusić prezentację fragmentu tekstu jako indeksu górnego lub dolnego <sup> </sup> <sub> </sub> np. <p>e=mc<sup>2</sup></p> <p>e=mc<sub>2</sub></p> E=mc 2 E=mc 2

24 Łamanie wierszy Niekiedy zdarza się, że chcemy przełamać tekst, nie wprowadzając przy tym znaku końca akapitu. Możemy wówczas zastosować pojedyncze polecenie <br />, które przenosi tekst o jeden wiersz w dół, lecz nie wprowadza dodatkowej interlinii. Przykład: To jest pierwszy wiersz< br />To jest drugi wiersz< br /> To jest trzeci wiersz< br /> Rezultat: To jest pierwszy wiersz To jest drugi wiersz To jest trzeci wiersz

25 Wyróżnienie tekstu aby pogrubić tekst <strong> </strong> aby pochylić tekst <em> </em> aby zastosować czcionkę o stałej szerokości <code> </code> Twarda spacja przeglądarka ignoruje wielokrotne znaki spacji wpisywane z klawiatury i wyświetli tylko jeden znak spacji Aby wymusić dodatkową spację musimy wstawić znak twardej spacji &nbsp

26 Przykład: To jest tekst normalny <strong>to jest tekst pogrubiony</strong> <em>to jest tekst pochylony</em> Rezultat: To jest tekst normalny To jest tekst pogrubiony To jest tekst pochylony

27 Znacznik DIV element <div > </div> jest odpowiedzialny za grupowanie znaczników dzięki temu elementowi można tworzyć warstwy w dokumencie XHTML i pracować na nich oraz rozciągać działanie zdefiniowanego za pomocą CSS stylu na większą liczbę znaczników <div> <p>pierwszy blok tekstu</p> <p> drugi blok teksty</p> <h1>nagłówek stopnia pierwszego</h1> </div> będzie później

28 Pozioma linia Często spotykanym elementem jest pozioma linia, którą wstawiamy za pomocą polecenia <hr> (ang. horizontal rule). Pozwala ono wyświetlić w dokumencie poziomą linię, na szerokość całej strony czy bloku, rozdzielając nią logiczne fragmenty tekstu, dzięki czemu strona jest bardziej przejrzysta. Przykład: <hr> Rezultat:

29 Formatowanie tekstu za pomocą edytora ked wprowadzasz nazwę znacznika, np. <p naciskasz spację edytor podpowie Ci jaki atrybut powinien być następny po wprowadzeniu kompletnego znacznika otwierającego edytor doda automatycznie znacznik zamykający kursor pozostanie pomiędzy znacznikiem otwierającym a zamykającym możesz więc zacząć wprowadzać tekst inny sposób wprowadzasz tekst zaznaczysz go na pasku narzędzi klikniesz potrzebny znacznik np. akapit dodawanie twardej spacji: naciśnij klawisze Ctrl+spacja

30 jeśli potrzebnego znacznika nie ma na pasku narzędzi, to po wprowadzeniu i oznaczeniu formatowanego tekstu kliknij zakładkę Ściąga (lewa kolumna) na liście odszukaj potrzebny znacznik i zaznacz go (kliknięcie lewym przyciskiem myszy) kliknij przycisk Wstaw całość

31 listy Na stronach WWW powszechnie stosuje się listy (ang. list). Są to po prostu systematyczne wyliczenia jakichś punktów, które w przeciwieństwie do tekstu o charakterze opisowym w skondensowany sposób prezentują jakąś myśl czy zespół zagadnień. Mamy trzy rodzaje list 1. listy punktowane 2. listy numerowane 3. listy definicji

32 Lista wypunktowana Aby utworzyć szkielet listy wypunktowanej, należy użyć polecenia <ul> </ul> (ang. unordered list) Poszczególne punkty listy wprowadzamy dalej za pomocą polecenia <li> </li>

33 Przykład: <p>dlaczego zajmuję się UFO?</p> <ul> <li>uważam, że UFO istnieje</li> <li>uważam, że pozaziemskie cywilizacje mogą nam pomóc</li> <li>uważam, że należy się przygotować na spotkanie</li> </ul> Rezultat: Dlaczego zajmuję się UFO? Uważam, że UFO istnieje Uważam, że pozaziemskie cywilizacje mogą nam pomóc Uważam, że należy się przygotować na spotkanie

34 Lista numerowana Gdy chcemy utworzyć wykaz numerowany, wówczas stosujemy parę wskaźników <ol> </ol> (ang. ordered list) oraz <li> </li> Uzyskamy wówczas listę numerowaną za pomocą liczeb arabskich Przykład: <p>dlaczego zajmuję się UFO?</p> <ol> <li>uważam, że UFO istnieje</li> <li>uważam, że pozaziemskie cywilizacje mogą nam pomóc</li> <li>uważam, że należy się przygotować na spotkanie</li> </ol>

35 Rezultat: Dlaczego zajmuję się UFO? 1.Uważam, że UFO istnieje 2.Uważam, że pozaziemskie cywilizacje mogą nam pomóc 3.Uważam, że należy się przygotować na spotkanie

36 lista definicji stosowane znaczniki <dl> </dl> <dt> </dt> <dd> </dd> Przykład: <dl> <dt>słowo definiowane</dt> <dd>opis słowa definiowanego</dd> <dt>kolejne słowo definiowane</dt> <dd>opis kolejnego słowa definiowanego</dd> <dt>jeszcze jedno słowo definiowane</dt> <dd>opis nowego słowa definiowanego</dd> <dt>ostatnie słowo definiowane</dt> <dd>opis ostatniego słowa definiowanego</dd> </dl>

37 Rezultat: Słowo definiowane opis słowa definiowanego Kolejne słowo definiowane opis kolejnego słowa definiowanego Jeszcze jedno słowo definiowane opis nowego słowa definiowanego Ostatnie słowo definiowane opis ostatniego słowa definiowanego

38 listy zagnieżdżone chcemy np. umieścić listę zawierającą podpunkty Zagnieżdżenie polega na umieszczeniu wewnątrz jednego elementu innego znacznika, np. w liście umieszczamy jeszcze jedną listę Przykład: <ol> <li>produkty mleczne <ul> <li>mleko 3,2%</li> <li>jogurt malinowy</li> <li>śmietanka do kawy</li> </ul> </li> <li>owoce <ul> <li>jabłka</li> <li>cytrusy <ul> <li>pomarańcze</li> <li>mandarynki</li> </ul> </li> <li>brzoskwinie</li> <ul> </li> </ol>

39 Rezultat: 1. Produkty mleczne o mleko 3,2% o jogurt malinowy o śmietanka do kawy 2. Owoce o jabłka o cytrusy pomarańcze mandarynki o brzoskwinie

40 Tworzenie list za pomocą edytora ked W przypadku list wypunktowanych i numerowanych wystarczy wprowadzić wszystkie pozycje listy zaznaczyć je kliknąć odpowiedni przycisk na pasku narzędzi W przypadku list zagnieżdżonych lub definicji należy wprowadzić strukturę list ręcznie, czyli wpisujemy odpowiednie znaczniki otwierające (znaczniki zamykające dodawane są automatycznie) musimy pamiętać o zasadach zagnieżdżania

41 Grafika na stronie www Strony WWW zawierają zwykle grafikę, która bardzo urozmaica ich czytanie - pod warunkiem oczywiście, że korzystamy z graficznego systemu operacyjnego. Niektórzy autorzy stron tak się zatracają w ozdabianiu stron, że zapominają o przepustowości łączy internetowych. Gdy czytelnik strony nie wyłączy w swojej przeglądarce funkcji wczytywania grafiki, może stracić dużo czasu i nerwów, oczekując na wczytanie tak spreparowanej strony. Warto z umiarem stosować graficzne ozdobniki, zwłaszcza gdy nie niosą żadnych istotnych treści.

42 Na stronach WWW są stosowane trzy podstawowe formaty bitowych plików graficznych GIF, JPG (JPEG) i PNG które są z założenia skompresowane (często nawet dziesięciokrotnie w stosunku do innych popularnych formatów), a więc zajmują znacznie mniej miejsca niż grafiki w innych formatach. Dzięki temu transmisja strony trwa znacznie krócej.

43 GIF (ang. Graphics Interchange Format) to format pliku graficznego z kompresją bezstratną stworzony w 1987 roku przez firmę CompuServe. Pliki tego typu są powszechnie używane na stronach WWW, gdyż pozwalają na tworzenie animacji z paletą 256 kolorów i dwustanową przezroczystością. Wadą formatu GIF jest brak możliwości zapisu plików graficznych w formacie True color. Wady tej pozbawiony jest konkurencyjny format PNG

44 JPEG (wym. dżej-peg lub jotpeg) to standard kompresji statycznych obrazów rastrowych, przeznaczony głównie do przetwarzania obrazów naturalnych (zdjęć satelitarnych, pejzaży, portretów itp.), charakteryzujących się płynnymi przejściami barw oraz brakiem lub małą ilością ostrych krawędzi i drobnych detali. Motywacją do powstania tego standardu było ujednolicenie algorytmów kompresji obrazów monochromatycznych i kolorowych. Algorytm kompresji używany przez JPEG jest algorytmem stratnym, tzn. w czasie jego wykonywania tracona jest bezpowrotnie część pierwotnej informacji.

45 PNG (ang. Portable Network Graphics) to format plików graficznych oraz system bezstratnej kompresji danych graficznych. PNG został opracowany jako następca GIF w 1995 roku.

46 Grafikę możemy wprowadzić za pomocą polecenia: <img /> które posiada atrybuty src i alt src określa źródło czyli obrazek jaki chcemy wstawić alt definiuje alternatywny tekst dla przeglądarek nieobsługujących grafiki bądź dla przeglądarek, w których użytkownik wyłączył wyświetlanie grafiki <img src="nazwa_pliku" alt="nazwa alternatywna /> unix (linux) rozróżnia wielkość liter!! a 95% serwerów internetowych to maszyny uniksowe nazwy powinny być więc wpisywane dokładnie tak jak nazwano plik, np. jest różnica między plikami psinka.jpg i Psinka.jpg

47 Przykład: <img src= psinka.jpg" alt= Psinka w tulipanach />

48 nazwy plików nie powinny zawierać polskich znaków oraz spacji jeżeli chcemy aby plik miał nazwę dwuczłonową, to zamiast spacji używamy znaku podkreślenia _ Oreślenie wielkości obrazka width i height <img src= psinka.jpg" alt= Psinka w tulipanach height= 64 width= 94 />

49 Osadzanie grafiki za pomocą edytora ked Umieszczasz kursor w odpowiednim miejscu dokumentu i klikam odpowiednią ikonę na pasku narzędzi w nowym okienku wybierasz nazwę obrazka z listy wypełniam pole Opis(alt) wypełniam pole Opis(title) opis pojawiający się w postaci chmurki wypełniam pola szerokość i wysokość naciskam przycisk wstaw Warto utworzyć sobie katalog, w którym będziesz przechowywać pliki tworzonej strony

50 W najprostszym przypadku, gdy obrazek znajduje się w tym samym katalogu co dokument, wystarczy podać jego nazwę. Gdy grafiki gromadzimy na serwerze w odrębnym katalogu, konieczne jest podanie ścieżki dostępu. Przykład: <img src="../podkatalog/grafika.jpg "alt="nazwa alternatywna">

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

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

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

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

Podstawowe znaczniki języka HTML.

Podstawowe znaczniki języka HTML. Podstawowe znaczniki języka HTML. Struktura dokumentu. Sposób użycia i dokumentu. Między nimi umieszczana jest cała treść dokumentu. Sposób użycia Sekcja HEAD zawiera podstawowe

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

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

HTML podstawowe polecenia

HTML podstawowe polecenia HTML podstawowe polecenia Szkielet dokumentu:

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

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

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

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

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

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

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

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

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

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

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

Przy wstawianiu znacznika zamykającego nie przepisujemy już atrybutów.

Przy wstawianiu znacznika zamykającego nie przepisujemy już atrybutów. JĘZYK - HTML Hipertekst - możliwośd przechodzenia między różnymi fragmentami tego samego lub różnych dokumentów, które zostały ze sobą powiązane. Jest systemem odnośników (tzw. Skrótów), działających na

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

Ćwiczenie 1 Deklarowanie metainformacji.

Ćwiczenie 1 Deklarowanie metainformacji. Zadania do wykonania: Ćwiczenie 1 Deklarowanie metainformacji. Ćwiczenie 1 poświęcone jest wypełnieniu części dokumentu HTML. Umieszczamy w niej wszystkie informacje dodatkowe interpretowane przez

Bardziej szczegółowo

Podstawy JavaScript ćwiczenia

Podstawy JavaScript ćwiczenia Podstawy JavaScript ćwiczenia Kontekst:

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

Ć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

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

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

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

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

EDYCJA TEKSTU MS WORDPAD

EDYCJA TEKSTU MS WORDPAD EDYCJA TEKSTU MS WORDPAD EDYCJA TEKSTU - MS WORDPAD WordPad (ryc. 1 ang. miejsce na słowa) to bardzo przydatny program do edycji i pisania tekstów, który dodatkowo dostępny jest w każdym systemie z rodziny

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

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

Arkusz kalkulacyjny EXCEL

Arkusz kalkulacyjny EXCEL ARKUSZ KALKULACYJNY EXCEL 1 Arkusz kalkulacyjny EXCEL Aby obrysować tabelę krawędziami należy: 1. Zaznaczyć komórki, które chcemy obrysować. 2. Kursor myszy ustawić na menu FORMAT i raz kliknąć lewym klawiszem

Bardziej szczegółowo

Strony WWW - podstawy języka HTML

Strony WWW - podstawy języka HTML Strony WWW - podstawy języka HTML Jacek Krzaczkowski 2004 r. HTML (Hyper Text Markup Language) jest językiem opisu dokumentu używanym do tworzenia stron WWW. Znaczniki języka HTML informują przeglądarkę

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

Podstawy (X)HTML i CSS

Podstawy (X)HTML i CSS Inżynierskie podejście do budowania stron WWW momat@man.poznan.pl 2005-04-11 1 Hyper Text Markup Language Standardy W3C Przegląd znaczników Przegląd znaczników XHTML 2 Cascading Style Sheets Łączenie z

Bardziej szczegółowo

Instrukcja dodawania obiektów do strony Ekonomika.

Instrukcja dodawania obiektów do strony Ekonomika. Instrukcja dodawania obiektów do strony Ekonomika. Klikasz na zaloguj, aby przejść do strony logowania Podajesz login i hasło na WWW i klikasz Zaloguj W dodatkowym menu wybierasz Dodaj artykuł W edytorze

Bardziej szczegółowo

Źródła. cript/1.5/reference/ Ruby on Rails: http://www.rubyonrails.org/ AJAX: http://www.adaptivepath.com/publications/e ssays/archives/000385.

Źródła. cript/1.5/reference/ Ruby on Rails: http://www.rubyonrails.org/ AJAX: http://www.adaptivepath.com/publications/e ssays/archives/000385. Źródła CSS: http://www.csszengarden.com/ XHTML: http://www.xhtml.org/ XML: http://www.w3.org/xml/ PHP: http://www.php.net/ JavaScript: http://devedgetemp.mozilla.org/library/manuals/2000/javas cript/1.5/reference/

Bardziej szczegółowo

Andrzej Frydrych SWSPiZ 1/8

Andrzej Frydrych SWSPiZ 1/8 Kilka zasad: Czerwoną strzałką na zrzutach pokazuje w co warto kliknąć lub co zmieniłem oznacza kolejny wybierany element podczas poruszania się po menu Ustawienia strony: Menu PLIK (Rozwinąć żeby było

Bardziej szczegółowo

Proste kody html do szybkiego stosowania.

Proste kody html do szybkiego stosowania. Proste kody html do szybkiego stosowania. Często, w trakcie pracy z blogiem czy portalem zachodzi potrzeba umieszczenia grafiki, linku zaszytego w grafice czy innych podobnych. Szczególnie w widgetach

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

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

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

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

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

O HTML. R. Robert Gajewski omklnx.il.pw.edu.pl/~rgajewski www.il.pw.edu.pl/~rg s-rg@siwy.il.pw.edu.pl

O HTML. R. Robert Gajewski omklnx.il.pw.edu.pl/~rgajewski www.il.pw.edu.pl/~rg s-rg@siwy.il.pw.edu.pl O HTML R. Robert Gajewski omklnx.il.pw.edu.pl/~rgajewski www.il.pw.edu.pl/~rg s-rg@siwy.il.pw.edu.pl HTML! HTML jest skrótem od Hyper Text Markup Language. Jest to kolejny język opisu strony dotyczący

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

CMS- kontakty (mapa)

CMS- kontakty (mapa) CMS- kontakty (mapa) Rozpatrzy inny rodzaj kontaktu mapa sytuacyjna. W naszej kategorii kontaktów dodamy teraz multimedialną mapę dojazdową. W tym celu potrzebny nam będzie moduł HTML 1.0. Będziemy mogli

Bardziej szczegółowo

Odsyłacze. Style nagłówkowe

Odsyłacze. Style nagłówkowe Odsyłacze ... polecenie odsyłcza do dokumentu wskazywanego przez url. Dodatkowym parametrem jest opcja TARGET="...", która wskazuje na miejsce otwarcia wskazywanego dokumentu, a jej parametrami

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

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

I. Dlaczego standardy kodowania mailingów są istotne?

I. Dlaczego standardy kodowania mailingów są istotne? 1 Tabela zawartości: I. Dlaczego standardy kodowania mailingów są istotne? 3 II. Budowa nagłówka wiadomości. 4 III. Style kaskadowe CSS. 4 IV. Elementarna budowa szablonu. 6 V. Podsumowanie. 9 2 I. Dlaczego

Bardziej szczegółowo

Klawisze funkcyjne w OpenOffice.org Writer

Klawisze funkcyjne w OpenOffice.org Writer Klawisze funkcyjne w OpenOffice.org Writer F2 Ctrl + F2 F3 Ctrl + F3 F4 Shift + F4 F5 Ctrl + Shift + F5 F7 Ctrl + F7 F8 Ctrl + F8 Shift + F8 Ctrl+Shift+F8 F9 Ctrl + F9 Shift + F9 Ctrl + Shift + F9 Ctrl

Bardziej szczegółowo

1. Aby na stronie ZS umieścić artykuł np. news, wymagania edukacyjne, konspekt trzeba założyć sobie konto, w tym celu naciskamy

1. Aby na stronie ZS umieścić artykuł np. news, wymagania edukacyjne, konspekt trzeba założyć sobie konto, w tym celu naciskamy 1. Aby na stronie ZS umieścić artykuł np. news, wymagania edukacyjne, konspekt trzeba założyć sobie konto, w tym celu naciskamy Następnie wypełniamy pola oznaczone * (hasło musi mieć co najmniej 6 znaków

Bardziej szczegółowo

Europejski Certyfikat Umiejętności Komputerowych. Moduł 3 Przetwarzanie tekstów

Europejski Certyfikat Umiejętności Komputerowych. Moduł 3 Przetwarzanie tekstów Europejski Certyfikat Umiejętności Komputerowych. Moduł 3 Przetwarzanie tekstów 1. Uruchamianie edytora tekstu MS Word 2007 Edytor tekstu uruchamiamy jak każdy program w systemie Windows. Można to zrobić

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

Prezentacja multimedialna MS PowerPoint 2010 (podstawy)

Prezentacja multimedialna MS PowerPoint 2010 (podstawy) Prezentacja multimedialna MS PowerPoint 2010 (podstawy) Cz. 1. Tworzenie slajdów MS PowerPoint 2010 to najnowsza wersja popularnego programu do tworzenia prezentacji multimedialnych. Wygląd programu w

Bardziej szczegółowo

NAGŁÓWKI, STOPKI, PODZIAŁY WIERSZA I STRONY, WCIĘCIA

NAGŁÓWKI, STOPKI, PODZIAŁY WIERSZA I STRONY, WCIĘCIA NAGŁÓWKI, STOPKI, PODZIAŁY WIERSZA I STRONY, WCIĘCIA Ćwiczenie 1: Ściągnij plik z tekstem ze strony www. Zaznacz tekst i ustaw go w stylu Bez odstępów. Sformatuj tekst: wyjustowany czcionka Times New Roman

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

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

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

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

NAGŁÓWKI, STOPKI, PODZIAŁY WIERSZA I STRONY, WCIĘCIA

NAGŁÓWKI, STOPKI, PODZIAŁY WIERSZA I STRONY, WCIĘCIA NAGŁÓWKI, STOPKI, PODZIAŁY WIERSZA I STRONY, WCIĘCIA Ćwiczenie 1: Ściągnij plik z tekstem ze strony www. Zaznacz tekst i ustaw go w stylu Bez odstępów. Sformatuj tekst: wyjustowany czcionka Times New Roman

Bardziej szczegółowo

Edytor tekstu OpenOffice Writer Podstawy

Edytor tekstu OpenOffice Writer Podstawy Edytor tekstu OpenOffice Writer Podstawy Cz. 5. Tabulatory i inne funkcje edytora OpenOffice Writer Tabulatory umożliwiają wyrównanie tekstu do lewej, do prawej, do środka, do znaku dziesiętnego lub do

Bardziej szczegółowo

Wprowadzenie do HTML, CSS, JavaScript, PHP. Kurs 18.11 2008 22 12. 2008

Wprowadzenie do HTML, CSS, JavaScript, PHP. Kurs 18.11 2008 22 12. 2008 Wprowadzenie do HTML, CSS, JavaScript, PHP Kurs 18.11 2008 22 12. 2008 Narzędzia do tworzenia i utrzymania dokumentów web owych Edytory HTML Server WWW i baz danych Przeglądarka internetowa kompilator

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

Ć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

Kurs HTML 4.01 TI 312[01]

Kurs HTML 4.01 TI 312[01] TI 312[01] Spis treści 1. Wiadomości ogólne... 3 2. Wersje języka HTML... 3 3. Minimalna struktura dokumentu... 3 4. Deklaracje DOCTYPE... 3 5. Lista znaczników, atrybutów i zdarzeń... 4 5.1 Lista atrybutów

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

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 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

HTML kurs podstawowy. nagłówek, linia pozioma, obraz, img, ramka, div, tabela, tabel, lista

HTML kurs podstawowy. nagłówek, linia pozioma, obraz, img, ramka, div, tabela, tabel, lista HTML kurs podstawowy Wykład: język znaczników, atrybuty, XML, XHTML, rodzaje znaczników, wybór edytora, struktura dokumentu, head, title, body, kodowanie, utf-8, iso-8859-2, meta, link, akapit, font, color,

Bardziej szczegółowo

Rozwiązanie ćwiczenia 8a

Rozwiązanie ćwiczenia 8a Rozwiązanie ćwiczenia 8a Aby utworzyć spis ilustracji: 1. Ustaw kursor za tekstem na ostatniej stronie dokumentu Polska_broszura.doc i kliknij przycisk Podział strony na karcie Wstawianie w grupie Strony

Bardziej szczegółowo

Cel ogólny lekcji: Wprowadzenie dodatkowych znaczników. Wprowadzenie odsyłacza, tabeli, listy numerowanej i wypunktowanej.

Cel ogólny lekcji: Wprowadzenie dodatkowych znaczników. Wprowadzenie odsyłacza, tabeli, listy numerowanej i wypunktowanej. Piotr Chojnacki IV rok, informatyka chemiczna Liceum Ogólnokształcące Nr I we Wrocławiu Wrocław dn. 26 lutego 2006 roku Czas trwania zajęć: 90 minut, przedmiot: TI Temat lekcji: Tworzenie strony internetowej

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

dokumentacja Edytor Bazy Zmiennych Edytor Bazy Zmiennych Podręcznik użytkownika

dokumentacja Edytor Bazy Zmiennych Edytor Bazy Zmiennych Podręcznik użytkownika asix 4 Edytor Bazy Zmiennych Podręcznik użytkownika asix 4 dokumentacja Edytor Bazy Zmiennych ASKOM i asix to zastrzeżone znaki firmy ASKOM Sp. z o. o., Gliwice. Inne występujące w tekście znaki firmowe

Bardziej szczegółowo

Europejski Certyfikat Umiejętności Komputerowych. Moduł 3 Przetwarzanie tekstów

Europejski Certyfikat Umiejętności Komputerowych. Moduł 3 Przetwarzanie tekstów Europejski Certyfikat Umiejętności Komputerowych. Moduł 3 Przetwarzanie tekstów 1. Uruchamianie edytora tekstu MS Word 2003 Edytor tekstu uruchamiamy jak każdy program w systemie Windows. Można to zrobić

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

Temat 10 : Poznajemy zasady pracy w edytorze tekstu Word.

Temat 10 : Poznajemy zasady pracy w edytorze tekstu Word. Temat 10 : Poznajemy zasady pracy w edytorze tekstu Word. 1. Edytor tekstu WORD to program (edytor) do tworzenia dokumentów tekstowych (rozszerzenia:.doc (97-2003),.docx nowszy). 2. Budowa okna edytora

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

Edytor tekstu Notatnik

Edytor tekstu Notatnik Temat: komputerowe pisanie w edytorze tekstu 1 (pierwsze dokumenty tekstowe) Edytor tekstu umożliwia tworzenie dokumentu tekstowego, jego wielokrotne redagowanie (pisanie, modyfikowanie istniejącego tekstu,

Bardziej szczegółowo

Stosowanie, tworzenie i modyfikowanie stylów.

Stosowanie, tworzenie i modyfikowanie stylów. Stosowanie, tworzenie i modyfikowanie stylów. We wstążce Narzędzia główne umieszczone są style, dzięki którym w prosty sposób możemy zmieniać tekst i hurtowo modyfikować. Klikając kwadrat ze strzałką w

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

Hot Potatoes. Zdania z lukami Przyporządkowanie. Tworzy spis wszystkich zadań. Krzyżówki

Hot Potatoes. Zdania z lukami Przyporządkowanie. Tworzy spis wszystkich zadań. Krzyżówki Hot Potatoes Zdania z lukami Przyporządkowanie Tworzy spis wszystkich zadań Quizy Krzyżówki Rozsypanki Pakiet Hot Potatoes jest zestawem sześciu narzędzi, kreatorów testów, stworzonym przez Zespół Badawczo-

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

I. Spis treści I. Spis treści... 2 II. Kreator szablonów... 3 1. Tworzenie szablonu... 3 2. Menu... 4 a. Opis ikon... 5 3. Dodanie nowego elementu...

I. Spis treści I. Spis treści... 2 II. Kreator szablonów... 3 1. Tworzenie szablonu... 3 2. Menu... 4 a. Opis ikon... 5 3. Dodanie nowego elementu... Kreator szablonów I. Spis treści I. Spis treści... 2 II. Kreator szablonów... 3 1. Tworzenie szablonu... 3 2. Menu... 4 a. Opis ikon... 5 3. Dodanie nowego elementu... 7 a. Grafika... 7 b. Tekst... 7 c.

Bardziej szczegółowo

Dlaczego stosujemy edytory tekstu?

Dlaczego stosujemy edytory tekstu? Edytor tekstu Edytor tekstu program komputerowy służący do tworzenia, edycji i formatowania dokumentów tekstowych za pomocą komputera. Dlaczego stosujemy edytory tekstu? możemy poprawiać tekst możemy uzupełniać

Bardziej szczegółowo

Edytor tekstu MS Word 2003 - podstawy

Edytor tekstu MS Word 2003 - podstawy Edytor tekstu MS Word 2003 - podstawy Cz. 4. Rysunki i tabele w dokumencie Obiekt WordArt Jeżeli chcemy zamieścić w naszym dokumencie jakiś efektowny napis, na przykład hasło reklamowe, możemy wykorzystać

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

OKNO NA ŚWIAT - PRZECIWDZIAŁANIE WYKLUCZENIU CYFROWEMU W MIEŚCIE BRZEZINY

OKNO NA ŚWIAT - PRZECIWDZIAŁANIE WYKLUCZENIU CYFROWEMU W MIEŚCIE BRZEZINY Projekt OKNO NA ŚWIAT - PRZECIWDZIAŁANIE WYKLUCZENIU CYFROWEMU W MIEŚCIE BRZEZINY współfinansowany przez Unię Europejską ze środków Europejskiego Funduszu Rozwoju Regionalnego w ramach Programu Operacyjnego

Bardziej szczegółowo

WITRYNY I APLIKACJE INTERNETOWE

WITRYNY I APLIKACJE INTERNETOWE WITRYNY I APLIKACJE INTERNETOWE TECHNIKUM INFORMATYCZNE wg programu 351203 KLASA II 3 godz. tygodniowo 90 godziny Liczba godzin w cyklu kształcenia 180 rok szkolny 2013/2014 Sylwia Płonka 2. W 1980 fizyk

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

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

Moduł IV Internet Tworzenie stron www

Moduł IV Internet Tworzenie stron www Ze strony internetowej www.kaze.zut.edu.pl z folderu BUDOWA JACHTÓW pobierz i zapisz je do własnego folderu następujące pliki: znak_drogowy.png, morze.jpg, logo_ecdl.gif, logobj.png ZADANIE 1 Podstawy

Bardziej szczegółowo

Podręcznik edycji tekstu dla inteligentnych

Podręcznik edycji tekstu dla inteligentnych Podręcznik edycji tekstu dla inteligentnych Spis treści Ogólne zasady edycji tekstu...3 Struktura dokumentu tekstowego...3 Strona...3 Akapit...3 Znak...3 Znaki niedrukowane...4 Twarda spacja, miękki i

Bardziej szczegółowo

Edytor Edit+ - dodawanie zdjęć i. załączników. Instrukcja użytkownika

Edytor Edit+ - dodawanie zdjęć i. załączników. Instrukcja użytkownika Edytor Edit+ - dodawanie zdjęć i załączników Instrukcja użytkownika Maj 2015 SPIS TREŚCI SPIS TREŚCI... 2 Tworzenie zdjęć... 3 Tworzenie załączników... 6 Strona 2 z 10 Tworzenie zdjęć Aby dodać do strony

Bardziej szczegółowo

Podstawy języka HTML (HyperText Markup Language)

Podstawy języka HTML (HyperText Markup Language) Zasady pisania kodu Podstawy języka HTML (HyperText Markup Language) Kod HTML tworzymy używając znaczników, np. , . Niektóre znaczniki muszą być wprowadzane parami posiadają swoje odpowiedniki

Bardziej szczegółowo

darmowe zdjęcia - allegro.pl

darmowe zdjęcia - allegro.pl darmowe zdjęcia - allegro.pl 1 Darmowe zdjęcia w Twoich aukcjach allegro? Tak to możliwe. Wielu sprzedających robi to od dawna i wbrew pozorom jest to bardzo proste. Serwis allegro oczywiście umożliwia

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