Źródła: Kursy interaktywne oraz video: Materiały wprowadzające:

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

Download "Źródła: Kursy interaktywne oraz video: http://www.codecademy.com/ Materiały wprowadzające: http://www.lynda.com/html-training-tutorials/224-0."

Transkrypt

1 Źródła: Materiały wprowadzające: Kursy interaktywne oraz video: (w szczególności: HTML5: Structure, Syntax, and Semantics) https://www.khanacademy.org/ https://www.udacity.com/ Książki: INTRODUCING HTML5 HTML5 FOR WEB DESIGNERS HTML5: Up and Running Head First HTML5 Programming: Building Web Apps with JavaScript HTML5 Multimedia Specyfikacje/referencje: 'Walidatory/outlinery': Materiały uzupełniające: 1

2 Seminarium wstęp do technologii sieciowych 1. Projektowanie dla sieci. 2. Współczesny model sieci: a) system DNS; b) protokoły sieciowe. 3. Transakcja klient serwer. 4. Przeglądarki internetowe, a rozwój standardów. 5. Wybrane technologie sieciowe (CSS, XML, RSS). 6. Popularne języki dedykowane m.in. do zastosowań sieciowych (JavaScript, PHP,.NET, JPS, SQL). 7. Systemy zarządzania treścią. 2

3 Wybór i instalacja edytora plików tekstowych Do budowy kodu dokumentów HTML i XHTML, podobnie jak w przypadku innych języków, potrzebny jest edytor plików tekstowych. W odróżnieniu od zaawansowanych edytorów tekstu (ang. word processor), które poza samym tekstem zapisują szereg informacji (np. na temat wyglądu, formatowania itd.) edytory plików tekstowych (ang. text editor) zapisują jedynie tekst oraz proste informacje (np. znaki końca linii). Spośród dostępnych darmowych i do tego całkiem rzetelnych edytorów dla platformy Windows należy wymienić m.in.: Notepad ++, TextPad, Notepad 2.0. Wśród edytorów dla platformy Mac godny polecenia jest darmowy TextWrangler, a dla systemów Linux całkiem dobry jest Bluefish (zrzut po prawej stronie; w środowisku tego edytora zostaną zaprezentowane dalsze treści tego kursu). 3

4 Aby przekonać się o bogactwie programów do edycji wystarczy wpisać w przeglądarkę hasło html editor lub po prostu zaglądnąć po adres: W przypadku potrzeby pracy i instalacji na platformy Windows bez uprawnień administratora: Ponieważ często konta studenckie mają ograniczone prawa ingerencji w system operacyjny, z reguły niemożliwa jest typowa instalacja. Aby rozwiązać ten problem posłużymy się wersją nie wymagającą instalacji w katalogach systemowych (tzw. wersja 'przenośna', ang. portable version). W lokalizacji, w której masz prawa zapisu (np. Moje Dokumenty) utwórz folder (np. nazywając go własnym imieniem, inicjałami itp.). Wpisz w wyszukiwarkę hasło Notepad ++ portable, wybierz odpowiedni link i zapisz program (z reguły o nazwie NotepadPlusPlusPortable...exe) do utworzonego folderu. Uruchom program i zainstaluj w tym folderze. 4

5 Tworzenie dokumentu HTML Dla tworzonych dokumentów HTML istotne jest tzw. kodowanie, czyli zestaw znaków z jakiego będziemy korzystać. Aby uczynić nasz projekt uniwersalnym i łatwym w edycji zastosujemy standard UTF-8 (ang. 8-bit UCS/Unicode Transformation Format). Upewnij się, że w wykorzystywanym edytorze jest ustawiony ten standard. Po uruchomieniu edytora z reguły jest możliwość wyboru typu dokumentu nad którym zamierzamy pracować. O ile edytor daje tę możliwość wybierz typ dokument HTML lub HTML5. Po prawej stronie przykładowy rezultat wyboru nowego dokumentu HTML5 dla Bluefish. O ile twój edytor nie wygenerował tego kodu, ew. kod wygląda inaczej, przepisz kod po prawej stronie lub odpowiednio popraw istniejący kod. Utwórz na twardym dysku folder o dowolnej nazwie, który będzie zawierał twoją przyszłą pracę, a następnie zapisz w tym folderze utworzony plik HTML5 jako index.html. 5

6 Ciekawostka: Jeżeli plik o nazwie index.html umieścimy na serwerze to zostanie wyświetlona treść tego pliku w postaci strony internetowej. Jeżeli jednak w katalogu na serwerze zabraknie index.html to zostanie wyświetlona lista wszystkich plików co spowoduje rezultat jak poniżej. Zauważ, że jest to listing serwera www (tutaj rozumianego jako program), który nazywa się Apache (http://www.apache.org). Jest to najbardziej popularny darmowy serwer www. Nazwa index.html jest pewną umową, a serwer www można skonfigurować tak, aby rozpoczynał od innej nazwy i rozszerzenia. Są również inne serwery www (http://en.wikipedia.org/wiki/web_server). 6

7 Składnia i struktura dokumentu HTML HTML (ang. HyperText Markup Language) to język służący do tworzenia stron internetowych. Rozwój języka doprowadził do powstania kilku wersji, z których ostatnia - HTML 4.01 została opublikowana w 1999, a w 2001 dodano erratę. Od HTML 4.01 rozwinęły się dwie drogi dalszej pracy nad językiem: XHTML (wersje 1.0, 1.1, 2.0) oraz HTML 5.0. XHTML to rewizja 'starego' HTML w oparciu o język XML (ang. Extensible Markup Language). Obecnie wspierany jest projekt HTML 5.0. Prace nad językiem (pierwotnie jako Web Applications 1.0) zainicjowała organizacja WHATWG (http://whatwg.org), a obecny rozwój odbywa się we współpracy z konsorcjum W3 (ang. World Wide Web Consortium) (http://www.w3.org/). Podstawowym elementem składni HTML jest znacznik (ang. tag). Znacznik to wyrażenie zamknięte w nawiasach ostrych <>. W HTML liczba znaczników jest ograniczona tzn. nie można tworzyć własnych znaczników. Możemy natomiast korzystać z około 90 podstawowych znaczników (http://www.w3schools.com/tags/ref_byfunc.asp). Przeanalizujmy jeszcze raz wcześniej wskazaną składnię: Dokument HTML rozpoczyna się 'prologiem': <!DOCTYPE html> lub <!doctype html> Można uprościć, że prolog definiuje język oraz jego wersję, w tym wypadku chodzi o wersję 5 (więcej na temat składni, roli i historii prologu podczas seminarium). Dalsza część składni jest osadzona w znacznikach, z których pierwszym jest znacznik: <html> Zauważ, iż otwarcia i zamknięcia powodują budowę klamrową: klamra znaczników <html> </html> obejmuje cały dokument, a w niej zawarte są inne klamry jakie? 7

8 Dokument HTML można podzielić na dwie części: nagłówek czyli head wyrażany jest poprzez znacznik <head> (przechowuje m.in. informacje o dokumencie) Uzupełnij dowolną treścią część body, zapisz zmodyfikowany plik, a następnie otwórz go za pomocą dowolnej przeglądarki internetowej. oraz treść czyli body, znacznik <body> (zawartość tej części zobaczy właśnie odbiorca) W powyższym przykładzie część head zawiera dodatkowo dwa znaczniki (więcej na ich temat na seminarium): <meta charset="utf-8" /> <title></title> A oto rezultat: Gratulacje, oto pierwsza strona! 8

9 Większość nawet prostych edytorów numeruje wiersze (tak aby np. łatwiej eliminować błędy) i rozpoznaje składnię: podświetla wyrażenia w kolorach oraz porządkuje znaczniki w klamry/ węzły, które można zwijać / rozwijać (np. za pomocą ikon umieszczonych po lewej stronie i oznaczonych znakiem oraz znakiem + ). Aby kod był przejrzysty warto posłużyć się klawiszem tabulacji i wyszczególnić 'wewnętrzne' klamry. W przypadku większości edytorów są dostępne również ikony Indent / Uindent (czyli wcięć tabulacji dla zaznaczonych regionów). Zapisz rezultat swojej pracy w pliku. 9

10 Walidacja dokumentów HTML Walidacja to proces sprawdzania poprawności wygenerowanego kodu (niektóre edytory, np. komercyjny Dreamweaver ma tę opcję wbudowaną, tzw. debuger). Wg. Statystyk konsorcjum W3 ponad 99% serwisów funkcjonujących w sieci zawiera przynajmniej jedną błędną stronę! Dlatego też tak ważne jest kontrolowanie kodu, szczególnie w przypadku projektów komercyjnych. Sprawdźmy czy nasz dokument spełnia kryteria poprawnego kodu wg konsorcjum W3. Pod adresem znajduje się walidator, który pomoże poprawić ewentualne błędy. Program zawiera opcje: Validate by URI tu można wpisać adres strony, które jest zamieszczona w sieci; Validate by File Upload tu można podać ścieżkę lokalnego pliku aby go wgrać na serwer W3; Validate by Direct Input wybrałem tę metodę, która umożliwia wklejenie kodu mojego projektu. Pozostaje zatem wcisnąć Check aby rozpocząć analizę... 10

11 W pracy z walidatorem życzę Wszystkim 'koloru zielonego': Otrzymałem informację, że mój dokument jest rozpatrywany jako HTML 5.0 i zawiera 1 błąd. Ponadto walidator ma dwie uwagi, co do mojej pracy. Ach... Na temat uwag oraz usuwania błędów więcej podczas seminarium. W procesie usuwania błędów pomocy zawsze można szukać na oficjalnej stronie samouczka HTML konsorcjum W3 (http://www.w3schools.com/html/default.asp), a także na stronie innych kursów. Jedynym polskim kursem rekomendowanym przez konsorcjum W3 jest kurs autorstwa Pawła Wimmera (http://webmaster.helion.pl/). Gorąco zachęcam do korzystania przynajmniej z obu tych źródeł. Podpowiedź walidatora w tym wypadku jasno wskazuje, że znacznik <title> powinien zawierać treść, czyli określać tytuł strony. Popraw swój kod w edytorze i zapisz plik. Przeładuj stronę (to będzie rutyna odświeżanie przeglądanej strony przy wprowadzaniu zmian w kodzie). Czy są jakieś zmiany? Zastąp istniejący w okienku walidatora kod nową wersją i ponownie sprawdź kod, poprzez klawisz 11

12 Część head i znacznik meta Cześć head może zawierać szereg informacji, które opisują stronę internetową. Aby te informacje zadeklarować będzie potrzebny znacznik meta. meta może być użyty w części head wielokrotnie i może mieć wiele atrybutów. Zauważ, że znacznik meta nie ma typowego zamknięcia, tzn. nie można zastosować poniższej składni: <meta> </meta> Zadanie 1 W oparciu o przytoczone wyżej źródła określ w swoim projekcie: opis strony; słowa kluczowe; autora dokumentu i edytor w jakim został stworzony; datę utworzenia i datę ważności. Poeksperymentuj również z przeładowywaniem strony i automatycznym przekierowaniem. Pamiętaj aby tworzony kod przechodził poprawnie test walidatora. Takie znaczniki jak meta nazywane są singletonami, a ich poprawne otwarcie i zamknięcie wygląda następująco: <meta odpowiednia treść dla tego znacznika /> lub w składni mniej 'ścisłej', dozwolonej dla HTML5: <meta odpowiednia treść dla tego znacznika > Szczegółowy opis zastosowania tego znacznika oraz jego zawartości znajduje się pod adresami Uwaga: Wszystkie przedstawione w tym kursie zadania powinny zostać wykonane i zapisane w formie plików. Nazwy tych plików powinny odpowiadać poszczególnym zadaniom, np. dla Zadanie 1 plik o nazwie zadanie_1.html. W niektórych wypadkach pliki mogą mieć inne rozszerzenia (np. png, psd itd.). Zadania kontrolne realizowane są tylko na zajęciach. 12

13 Semantyka kodu Kodowanie w HTML można uprościć do budowania dokumentu, którego poszczególne części zawierają znaczenie (dlatego też opatrzone są odpowiednimi znacznikami). Wiele osób na początku nie zwraca na to uwagi i koncentruje się na obserwowanych w przeglądarce internetowej rezultatach (jest to tzw. warstwa prezentacji). O ile taka praktyka może być podyktowana chęcią osiągnięcia szybkiej satysfakcji, w dłuższej perspektywie jest niewystarczająca. Kod powinien mieć zdefiniowane znacznie, ponieważ coraz szersze spektrum urządzeń i programów ma dostęp do sieci i interpretuje treść serwisów internetowych (więcej na ten temat na seminarium). Dlatego też w kontekście aktualnego kodu powinniśmy zadeklarować znacznie obecnej treści (ew. przy większej ilość treści powinniśmy nadawać jej strukturę). Wprowadzona przez mnie fraza to jest treść dokumentu będzie w tym wypadku akapitem (wydzielonym fragmentem tekstu, który w praktyce powinien zawierać skończony wątek / myśl). Znacznik akapitu (ang. paragraph) to <p>. Znajdź na stronach konsorcjum W3 (http://www.w3schools.com/tags/) sposób stosowania tego znacznika, a następnie użyj dla własnej treści. 13

14 Seminarium wstęp do HTML5 1. Historia języka. 2. Rola konsorcjum W3, grupy WASP, WATWAG. 3. Rozwój dokumentacji, technologie towarzyszące HTML5. 4. Składnia. 5. Współczesne podejścia projektowe: responsive design vs adaptive design. 14

15 Separatory, białe znaki A może 'mocniej'? Zanim zaczniemy kodować warto wiedzieć w jaki sposób interpretowane są przez przeglądarki separatory. Wniosek: przeglądarki ignorują białe znaki (w tym także deklarowane przez nas znaki końca wiersza za pomocą klawisza enter/return). Poeksperymentujmy z powyższym kodem, np. wprowadzając dodatkowe spacje i/lub tabulatory: Zapisz zmiany i przeładuj w przeglądarce dokument. Jaki jest efekt? 15

16 Znaczniki, ich atrybuty i wartości Pierwszym znacznikiem, o którym już co nieco wiesz jest znacznik akapitu, czyli <p>. Ten znacznik nie jest singletonem więc stosuje się go tak: <p>to jest treść dokumentu</p>. Utwórz drugi akapit, który będzie zawierał dłuższy tekst (zamiast wprowadzać ciąg znaków możesz skorzystać z dowolnego serwisu internetowego, który generuje 'testowy' tekst, np. A oto efekt: Zauważ, iż akapity oddzielone są od siebie. Drugi akapit jest na tyle długi, iż przeglądarka podzieliła go na wiersze. Poeksperymentuj z szerokością okna przeglądarki. Ja zachowuje się akapit? Akapit może mieć atrybuty, a atrybuty mogą mieć wartości. <p align="right"> W tym wypadku atrybutem jest wyrażenie align. Wartość atrybutu to left. Zauważ, iż wartość występuje po znaku = i jest otoczona znakami cudzysłowu ". Pamiętaj aby wartości zawsze były w ten sposób zapisywane. Aby sprawdzić jakie atrybuty i wartości można przypisać poszczególnym znacznikom, konsorcjum W3 publikuje wykaz znaczników, ich charakterystykę, atrybuty i wartości przewidziane dla nich. 16

17 Przyjrzyjmy się jeszcze raz specyfikacji dla znacznika <p> (http://www.w3schools.com/tags/tag_p.asp): A oto i spektakularny rezultat: Exemple to część, w której poza podany przykładem zastosowania można eksperymentować poprzez naciśnięcie klawisza Try it yourself >>. Po zatwierdzeniu wyboru Try it yourself >> otworzy się nowe okno/zakładka przeglądarki internetowej i będzie można eksperymentować. Zamknij zakładkę/okno z edytorem i przejdź z powrotem do sekcji opisującej znacznik <p>. Wprowadź dowolny tekst i kliknij Edit and Click Me >> Browser Support jak wskazuje nazwa, to wykaz przeglądarek, które obecnie oferują wsparcie dla określonego znacznika. W tym wypadku wszystkie 'popularne' przeglądarki, których frekwencja i statystyki notuje konsorcjum W3: 17

18 Sekcję statystyk warto przyglądnąć się nie tylko z powodu realizowania uniwersalnego kodu, ale też z perspektywy trendów i pozycji poszczególnych producentów. Warto podkreślić, że te globalne statystyki nie są wiążące, a często dla konkretnych grup docelowych wprost niereprezentatywne. Global Attributes zawiera odnośnik do wykazu atrybutów ogólnych, które można przypisać do danego znacznika. Event Attributes zawiera odnośnik do wykazu atrybutów, które są wykorzystywane do obsługi zdarzeń (np. kliknięcie kursorem myszy). Na początek zastosujmy atrybut align, tak aby pierwszy akapit był justowany do prawej strony. Definition and Usage to część, która podaje znaczenie i zastosowanie znaczników. Differences Between HTML 4.01 and HTML5 tu znajdują się informacje o różnicach w stosowaniu znacznika dla ostatniej i najnowszej wersji języka. W tym przykładzie mamy informacje, że atrybut align był kwalifikowany jako 'przestarzały/dezaprobowany' dla wersji 4.01 podczas gdy w HTML5 nie jest wspierany. Attributes jest tabelą zawierającą przewidziane dla danego znacznika atrybuty oraz ich wartości. 18

19 Jednak o CSS nieco później. Na koniec powstaje pytanie, dlaczego przeglądarka w sposób tak 'wyrozumiały' wygenerowała stronę, tzn. akapit jest 'poprawnie' justowany do prawej? Na ten temat więcej podczas seminarium. Podsumujmy: zastosowaliśmy atrybut, który nie jest wspierany, ale na powyższym zrzucie ekranu przynosi pożądany rezultat. Co na to walidator? Zadanie 2 Jeżeli znasz już przyczynę powyższego błędu, zaproponuj jego rozwiązanie. Jak widać konsekwentnie jest to traktowane jako błąd: Walidator wskazał nr wiersza, w którym jest błąd, a także opisał przyczynę. Osoby uważne nie powinny być zaskoczone tym błędem, ponieważ zapowiedź tego błędu pojawiła się już (gdzie?). Co więcej, walidator nawet zaproponował rozwiązanie, czyli użycie do formatowania języka CSS. 19

20 Seminarium studium przypadku 1. Rola serwisu. 2. Strategia komunikacyjna. 3. Dobór narzędzi. 4. Analiza sytuacji zastanej. 5. Architektura informacji. 6. Identyfikacja problemów projektowych. 7. Etapy: szkicowanie, szkieletowanie, projektowanie makiet. 8. 'Semantyzacja' makiet. 9. Wdrożenie. 20

21 Struktura treści, nadawanie znaczeń Ze względu na nacisk na semantyzację, w HTML5 włączono nowe znaczniki, które pozwalają w prosty, intuicyjny sposób strukturyzować i przypisywać znacznie dla treści (http://diveintohtml5.info/semantics.html). Nie martw się jeżeli te znaczniki nie będą tak proste i intuicyjne w toku kursu wystąpi wiele przykładów ich zastosowania. article opisuje taką treść, która zawiera w sobie całościową / wyczerpującą informację, przez co może być dystrybuowana niezależnie (np. poprzez kanał RSS). Może więc tu trafić treść, która jest wpisem artykułem prasowym w wersji elektronicznej, wpisem na blogu, postem na forum, komentarzem itd. section może posłużyć do nadania struktury dla całego dokumentu (dzieląc go rzecz jasna na sekcje). Innymi słowy section może mieścić w sobie artykuły. Jednak ten podział może przebiec odwrotnie i to artykuł można podzielić na sekcje. header konsekwentnie może mieścić informacje wprowadzające, 'spis treści', nawigację. nav to 'pojemnik' dla podstawowej nawigacji. Są też inne typy nawigacji (np. kontekstowa lub zawarta w stopce), dla których mamy przewidziane dedykowane znaczniki. aside jest przeznaczony na treści, które mogą być związane bezpośrednio / pośrednio z główną treścią ('na boku'). aside może zawierać informacje /nawigacje kontekstową, ale też może być powierzchnią reklamową. footer to nie tylko stopka dla całego dokumentu. W dokumencie footer może wystąpić wielokrotnie, w charakterze stopki dla każdej z sekcji, a do tego nie zawsze musi być na dole. W przypadku rozbudowanych stopek tzw. 'expansive footer', które są czasami quasi-mapą stron nie stoi nic na przeszkodzie aby footer zawierał np. sekcje lub inne elementy. header to znacznik, który służy jako nagłówek dla treści całego dokumentu lub dla poszczególnych części treści dokumentu (nie mylić z head, który służy jako część informacji o dokumencie por. str. 12). 21

22 Aby konstruktywnie wykorzystać zdobyta wiedzę potrzebujemy jeszcze jednego znacznika, mianowicie znacznika tytułów / nagłówków (ang. headline), który może przyjmować mieć postać: h1, h2, h3, h4, h5, h6, gdzie cyfra 1 oznacza największy priorytet, a cyfra 6 oznacza najniższy priorytet. Aby mieć szerszy wgląd w zastosowanie omawianych wyżej znaczników korzystaj z pomocy stron konsorcjum W3 (http://www.w3schools.com/). Zadanie 3 Dla dwóch akapitów (np. źródło zaproponowane na str ) dodaj tytuły, tak aby całość wyglądała jak po prawej stronie. 22

23 Omówione wcześniej znaczniki strukturyzują dokument. Aby sprawdzić w jaki sposób jest odczytywany twój dokument odwiedź stronę: Wykorzystując pierwsza lub trzecią możliwość sprawdź w jaki sposób twój kod z Zadania 3 jest interpretowany, jaką ma strukturę. Ja otrzymałem rezultat: Nic nie stoi na przeszkodzie, aby zobaczyć za pomocą tego narzędzia strukturę innych serwisów, w tym wypadku proponuje przyglądnąć się serwisowi: To narzędzie (tzw. outline algorithm) pozwala na ładowanie kodu z lokalnego nośnika (Browse), przeglądanie treści online (URL) jak i wklejenie własnego kodu (HTML oraz pole tekstowe poniżej). 23

24 Zadanie 4 kontrolne Zadanie 5 kontrolne Zadanie 6 kontrolne 24

25 Zadanie 7 kontrolne 25

26 Przeglądarki, inspekcja kodu W przypadku produkcji prostszych projektów, wybór adekwatnej metodologi (np. progressive enhancement, responsive design), dowolny edytor, który podświetla składnię HTML, praca z walidatorem oraz testowanie na możliwie szerokim spektrum przeglądarek / urządzeń (uzasadnionym np. badaniem frekwencji odwiedzin grupy docelowej) może być wystarczającym warsztatem wdrożenia. Warto dodać, że wymienione wyżej narzędzia są darmowe, więc jedyną inwestycją jest czas i trud po naszej stronie potrzebny do zdobycia wiedzy i doświadczenia oraz samego wykonania projektu. Obecnie dzięki znakomitym narzędziom dla webdeveloper'ów dostępnych z poziomu popularniejszych przeglądarek w prosty sposób można analizować kod stron internetowych. Przeglądarki służą więc nie tylko 'biernie' w fazie testów, ale również 'czynnie', podczas rozwoju. dostępu do narzędzi webdeveloper'skich dla poszczególnych przeglądarek (w kolejności alfabetycznej). Chrome W nowszych wersjach nie wymaga instalacji dodatkowych składników, jest oparty na silniku WebKit (http://en.wikipedia.org/wiki/webkit) i podobnie jak w przypadku Safari, czy Opera te narzędzia są wbudowane i dostępne. Aby uruchomić panel inspekcji kodu (tzw. Developer Tools) użyj skrótu klawiszowego Ctrl + Shift + I (dla użytkowników platformy Mac klawisz Ctrl zastąp Cmd). Alternatywnie możesz wybrać Tools > Developer Tools. W przypadku nowszych wersji przeglądarek Chrome, Firefox, Safari, Opera, aby uruchomić panel narzędzi developerskich, należy otworzyć wybraną stronę, uruchomić menu kontekstowe (z reguły prawy klawisz myszy) i wybrać Inspect element / Zbadaj element. O ile w twojej przeglądarce jest dostępna ta funkcja możesz opuścić tą część instrukcji i od razu przejść do Ćwiczenia 1. Poniżej zostaną omówione możliwości 26

27 Firefox Aby go uruchomić wciśnij F12 lub z menu wybierz: Tools > Firebug. W nowszych wersjach dostępny jest wbudowany panel Developer Tools, który można uruchomić przy pomocy menu Tools > Toggle tools. Ponadto dla Firefox dedykowany jest znakomity (i do tego jeden z pierwszych na tym polu) dodatek, mianowicie FireBug (http://getfirebug.com/). O ile masz uprawnienia, możesz zainstalować ten dodatek. IE 8 + Wymaga instalacji Developer Toolbar (http://www.microsoft.com/enus/download/details.aspx?id=18359), który można uruchomić poprzez klawisz F12 lub poprzez menu Tools > Developer tools. 27

28 Opera Dysponuje standardowym dla WebKit dodatkiem o nazwie Dragonfly, który można uruchomić przy pomocy Ctrl/Cmd + Shift + I lub poprzez menu: Tools > Advances > Opera Dragonfly. Następnie z menu należy wybrać opcję Customize toolbar i przeciągnąć do górnego paska ikonę Web Inspector. Obrazy ze źródła: Safari Włączenie w Safari tej funkcjonalności wymaga w pierwszej kolejności wybrać z menu Preferences > Advanced i zaznaczyć opcję Show Developer. 28

29 Ćwiczenie 1 Sprawdź czy twoja przeglądarka posiada funkcjonalność inspekcji kodu, ew. w oparciu o powyższe informacje zainstaluj odpowiedni składnik, aby taką funkcjonalność uzyskać. Włącz panel inspekcji kodu dla strony i przeglądnij zawartość części head. 29

30 Semantyczny kod To taki kod, który zawiera adekwatnie przypisane znacznie dla poszczególnych części dokumentu. To od każdego z nas zależy jak ustrukturyzujemy kod, jakie wykorzystamy znaczniki i gdzie je usytuujemy. Co więcej, każdy wykona to trochę, a czasami zupełnie inaczej i nic w tym złego, to urok działań twórczych (jak się okazuje również na poziomie kodu). Innym sposobem na wyłączenie CSS jest skorzystanie z omawianego panelu Developer Tools. W niniejszym przykładzie posłużę się Chrome (zakładka Elements). Interesuje mnie usunięcie dwóch wierszy rozpoczynających się od: <link rel= stylesheet W pierwszej kolejności przeanalizujemy kod pierwszej części strony Problem w tym, że serwowana publicznie strona zawiera kilka komponentów, na których w tej chwili nie potrzebujemy. Wśród tych komponentów należy wymienić język CSS, który służy do formatowania HTML, innymi słowy do budowy warstwy prezentacji, w więc m.in. konstruowania layout, kolorów, prostych interakcji itd. Wyłączmy zatem CSS: Ćwiczenie 2 Przy pomocy frazy 'How to disable CSS in Firefox' znajdź sposób na wyłączenie CSS (oczywiście o ile nie używasz Firefox, zmień tą nazwę na właściwą dla twojej przeglądarki). Możesz też skorzystać z podpowiedzi: html 30

31 Nieco bardziej 'eleganckim' sposobem jest zakomentowanie (czyli użycie komentarza), co spowoduje zignorowanie przez przeglądarkę wybranej części kodu. W tym celu przeładuję jeszcze raz stronę, lecz zamiast Delete Node wybieram Edit as HTML i modyfikuję oba wiersze dodając na początku znacznik <!-- a na końcu znacznik -->, tak aby kod wyglądał jak poniżej: Oczywiście nie stoi nic na przeszkodzie, aby w dowolnym momencie przywrócić pierwotny kod i poprzez usunąć znaczniki komentarza (to jest właśnie 'eleganckie'). Warto dodać, że zmiany wykonywane na takim kodzie są tylko lokalne (wewnątrz pamięci cache przeglądarki), więc nie przynoszą trwałych rezultatów (w tym wypadku nie mamy uprawnień zapisu na dysku serwera). Niezależnie od sposobu w jaki wyłączyliśmy CSS powinniśmy otrzymać rezultat podobny zamieszczonego po prawej stronie. 31

32 To naprawdę dobra wiadomość w końcu znamy już na tyle HTML, że sporą część tej strony można zrekonstruować! Zanim jednak to zrobimy warto przeanalizować, co czyni ten kod 'semantycznym'. Dla przykładu nawigacja ma postać wykazu (czyli wypunktowanej listy) odsyłaczy (tzw. linków, czyli elementów, które kierują nas w odpowiednie miejsce). Ponadto są tytuły dla poszczególnych sekcji lub artykułów (to się nieco później okaże). Dodatkowo, te tytuły też są odsyłaczami. W sumie nic nadzwyczajnego i właśnie o to chodzi taki kod ma być możliwie prosty, aby mógł zostać poprawnie zinterpretowany przez różne programy (np. program pocztowy, przeglądarkę tekstową, screen reader, generator kodu Braille'a, RSS, przeglądarki mobilne, boty indeksujące treści, np. googlebot, itd.). Aby podjąć próbę własnej rekonstrukcji tej części strony uzupełnijmy potrzebną wiedzę na temat wykazów oraz odsyłaczy. 32

33 Wykazy / listy Umożliwiają przedstawienie treści w postaci punktów/podpunktów w osobnych wierszach. Można zastosować trzy rodzaje wykazów/list: nieuporządkowane; uporządkowane; definicje. Wykazy/listy nieuporządkowane (tzw. unordered list) stosowane są w przypadku danych, których prezentacja nie wymaga numeracji. Wykazy / listy nieuporządkowane bardzo często stosowane w menu, 'zbierając' elementy nawigacyjne. Zastosowanie: <ul> <li>pierwsza pozycja wykazu</li> <li>druga pozycja wykazu</li> </ul> Nieco ciekawsze jest zagnieżdżanie wykazów, wewnątrz innych wykazów. Zadanie 8 Odwiedź stronę konsorcjum W3 i odnajdź sekcję poświęconą zagnieżdżaniu wykazów (tzw. nested lists). Na podstawie zdobytej wiedzy i testów (np. poprzez edytor online, tzw. funkcja Try it yourself >>) zbuduj strukturę składającą się z 2 poziomów (jeden wykaz zagnieżdżony w drugim): Nic nadzwyczajnego: 33

34 oraz z 3 poziomów: Wykazy/listy definicji (tzw. description list) pozwalają na tworzenie definicji poszczególnych terminów, co np. może znaleźć zastosowanie w pracy z walidatorem, kod był poprawny. Zadbaj o to, aby na podstawie Zastosowanie: <dl> <dt>pierwszy termin wykazu</dt> <dd>definicja pierwszego terminu</dd> <dt>drugi termin wykazu</dt> <dd>definicja drugiego terminu</dd> </dl> Zadanie 9 Na postawie powyższych przykładów, a także odpowiedniej sekcji na stronach konsorcjum W3 skonstruuj wykaz uporządkowany oraz definicji. Wykazy/listy uporządkowane (tzw. ordered list) pozwalają na automatyczna numeracje zawartych treści. Zastosowanie: <ol> <li>pierwsza pozycja wykazu</li> <li>druga pozycja wykazu</li> </ol> 34

35 Odsyłacze/hiperłącza Pod terminami odsyłacze/hiperłącza (ang. link) kryje się koncepcja tworzonego z końcem lat 80-tych HTML. Odsyłacz/hiperłącze to element, który przechowuje informacje o lokalizacji, a jego wybranie (np. kliknięcie) spowoduje przeniesie odbiorcy do tej właśnie lokalizacji. Odsyłacze/hiperłącza są mechanizmem, który umożliwia budowanie nawigacji w obrębie serwisu internetowego. Odsyłacze/hiperłącza tworzą również sieć połączeń między różnymi serwisami. Ćwiczenie 3 Na podstawie powyższego przykładu stwórz odsyłacz do dowolnego serwisu internetowego. Wynik Ćwiczenia 3 to tzw. odsyłacz zewnętrzny (kieruje do zewnętrznych zasobów), ale większość serwisów internetowych obsługuje odsyłaczami wewnętrzne zasoby (kieruje do własnych treści). Zadanie 10 Zmodyfikuj źródło aktualnej strony aby otrzymać rezultat jak niżej. Odsyłacze/hiperłącza określane są poprzez znacznik <a> (ang. anchor) i stosowane są następująco: <a href="dowolny_adres_url">jestem odsyłaczem</a> href="dowolny_adres_url", adres URL (ang. Uniform Resource Locator) ma np. postać jestem odsyłaczem to zupełnie dowolny tekst, który zobaczy odbiorca i który można wybrać/kliknąć Zadbaj o to, aby na podstawie pracy z walidatorem, kod był poprawny. 35

36 Zadanie 11 Zapisz aktualny plik (czyli index.html) jako studia.html, a następnie zmodyfikuj jego źródło aktualnej strony aby otrzymać rezultat jak niżej*. Ćwiczenie 4 Skoro mamy już dwa pliki (śmiało możemy to nazwać naszymi zasobami wewnętrznymi, w końcu oferujemy różne treści w przypadku każdej ze stron) warto połączyć je ze sobą za pomocą odsyłaczy. W pierwszej kolejności wykonajmy następujące 'połączenie': Edytując plik index.html składnia dla takiego odsyłacza wyglądałaby następująco: Zadbaj o to, aby na podstawie pracy z walidatorem, kod był poprawny. * w rezultacie w tej samej lokalizacji powinniśmy mieć dwa pliki: Umieść powyższą składnię w obecnym źródle index.html, tak aby osiągnąć poniższy rezultat: 36

37 Sprawdź czy stworzony odsyłacz działa, tzn. czy przekierowuje ze strony index.html na stronę studia.html. Ćwiczenie 5 Zmodyfikuj źródło pliku index.html tak aby osiągnąć poniższy rezultat: Przeanalizujmy jeszcze raz utworzony w Ćwiczeniu 4 odsyłacz. Przy strukturze plików: Zauważ, że tym razem kolor odsyłacza zmienił się. Ten kolor oznacza, że już wcześniej ta lokalizacja (ten adres) był przeze mnie odwiedzany. Sprawdź czy zmodyfikowany odsyłacz również działa. Zastosowaliśmy składnie: Wartość atrybutu href, czyli "studia.html" musi być dokładnie taka sama jak nazwa pliku. Jednak to, co z poziomu przeglądarki widzi odbiorca, czyli nazwa studia może być dowolna. 37

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

Szkolenie dla nauczycieli SP10 w DG Operacje na plikach i folderach, obsługa edytora tekstu ABC. komputera dla nauczyciela. Materiały pomocnicze

Szkolenie dla nauczycieli SP10 w DG Operacje na plikach i folderach, obsługa edytora tekstu ABC. komputera dla nauczyciela. Materiały pomocnicze ABC komputera dla nauczyciela Materiały pomocnicze 1. Czego się nauczysz? Uruchamianie i zamykanie systemu: jak zalogować się do systemu po uruchomieniu komputera, jak tymczasowo zablokować komputer w

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

Windows XP - lekcja 3 Praca z plikami i folderami Ćwiczenia zawarte w tym rozdziale pozwolą na tworzenie, usuwanie i zarządzanie plikami oraz folderami znajdującymi się na dysku twardym. Jedną z nowości

Bardziej szczegółowo

Włączanie/wyłączanie paska menu

Włączanie/wyłączanie paska menu Włączanie/wyłączanie paska menu Po zainstalowaniu przeglądarki Internet Eksplorer oraz Firefox domyślnie górny pasek menu jest wyłączony. Czasem warto go włączyć aby mieć szybszy dostęp do narzędzi. Po

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

Spis treści. Rozdział 2. Graficzna oprawa witryny...z... 19 Stosowanie motywu...s...s.. 19

Spis treści. Rozdział 2. Graficzna oprawa witryny...z... 19 Stosowanie motywu...s...s.. 19 Spis treści Wstęp...z... 5 Rozdział 1. Nowa witryna sieci Web...z... 7 Tworzenie szkieletu witryny...s... 7 Ustawienia witryny...s...s... 8 Hierarchia witryny...s...s... 10 Nazwy i tytuły stron...s...s..

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

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

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

REDIVE PRZEWODNIK PO PLATFORMIE LMS

REDIVE PRZEWODNIK PO PLATFORMIE LMS REDIVE PRZEWODNIK PO PLATFORMIE LMS PROJ. Nº 528362-LLP-1-2012-1-PT-ERASMUS-ECUE Ten projekt został zrealizowany przy wsparciu finansowym Komisji Europejskiej. Projekt lub publikacja odzwierciedlają jedynie

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

WOJEWÓDZTWO PODKARPACKIE

WOJEWÓDZTWO PODKARPACKIE WOJEWÓDZTWO PODKARPACKIE UNIA EUROPEJSKA EUROPEJSKI FUNDUSZ ROZWOJU REGIONALNEGO Instrukcja instalacji generatora wniosku o dofinansowanie projektu ze środków EFRR w ramach I osi priorytetowej Regionalnego

Bardziej szczegółowo

I. Informacje ogólne. Jednym z takich systemów jest Mambo.

I. Informacje ogólne. Jednym z takich systemów jest Mambo. MAMBO (CMS) I. Informacje ogólne CMS, Content Management System ("system zarządzania treścią") jest to jedna lub zestaw aplikacji internetowych pozwalających na łatwe utworzenie oraz późniejszą aktualizację

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

Pracownia internetowa w szkole ZASTOSOWANIA

Pracownia internetowa w szkole ZASTOSOWANIA NR ART/SBS/07/01 Pracownia internetowa w szkole ZASTOSOWANIA Artykuły - serwery SBS i ich wykorzystanie Instalacja i Konfiguracja oprogramowania MOL Optiva na szkolnym serwerze (SBS2000) Artykuł opisuje

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

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

Skrócona instrukcja funkcji logowania

Skrócona instrukcja funkcji logowania Skrócona instrukcja funkcji logowania Logowanie 1. Wpisz swój identyfikator nie używając spacji, podkreśleń ani nawiasów. Aby przejść do pola tekstowego Hasło, wciśnij klawisz tabulatora lub kliknij wewnątrz

Bardziej szczegółowo

INSTRUKCJA OBSŁUGI SYSTEM ZARZĄDZANIA TREŚCIĄ

INSTRUKCJA OBSŁUGI SYSTEM ZARZĄDZANIA TREŚCIĄ INSTRUKCJA OBSŁUGI SYSTEM ZARZĄDZANIA TREŚCIĄ Spis treści: 1 Logowanie do panelu administracyjnego 2 Dodawanie obiektów na stronie 2.1 Wybór podstrony 2.2 Wybór obiektu 2.2.1 Dodawanie obiektów tekstowych

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

PORADNIK KORZYSTANIA Z SERWERA FTP ftp.architekturaibiznes.com.pl

PORADNIK KORZYSTANIA Z SERWERA FTP ftp.architekturaibiznes.com.pl PORADNIK KORZYSTANIA Z SERWERA FTP ftp.architekturaibiznes.com.pl Do połączenia z serwerem A&B w celu załadowania lub pobrania materiałów można wykorzystać dowolny program typu "klient FTP". Jeżeli nie

Bardziej szczegółowo

Dostęp do poczty za pomocą przeglądarki internetowej

Dostęp do poczty za pomocą przeglądarki internetowej Dostęp do poczty za pomocą przeglądarki internetowej Wstęp Dostęp do poczty za pomocą przeglądarki internetowej zarówno przed zmianą systemu poczty, jak i po niej, odbywa się poprzez stronę http://mail.kozminski.edu.pl.

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

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

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

Ć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

Wikispaces materiały szkoleniowe

Wikispaces materiały szkoleniowe Wikispaces materiały szkoleniowe Wstęp Wikispaces jest ogólnie dostępnym narzędziem do tworzenia własnych stron internetowych. Zastosowanie stron internetowych tworzonych przy pomocy wikispaces to na przykład:

Bardziej szczegółowo

Instrukcja składania wniosku o dofinansowanie w systemie informatycznym IP na potrzeby konkursu nr 1/1.1.2/2015

Instrukcja składania wniosku o dofinansowanie w systemie informatycznym IP na potrzeby konkursu nr 1/1.1.2/2015 Instrukcja składania wniosku o dofinansowanie w systemie informatycznym IP na potrzeby konkursu nr 1/1.1.2/2015 Informacje ogólne Wnioski o dofinansowanie projektu w ramach konkursu nr 1/1.1.2/2015 mogą

Bardziej szczegółowo

autor poradnika - KS Jak zamieszczać i edytować artykuły na szkolnej stronie internetowej

autor poradnika - KS Jak zamieszczać i edytować artykuły na szkolnej stronie internetowej Jak zamieszczać i edytować artykuły na szkolnej stronie internetowej adres naszej strony: www.zs3.wroc.pl logo liceum 1. Aby dodać artykuł należy się zalogować: System pokaże nazwę zalogowanego użytkownika

Bardziej szczegółowo

Instalowanie certyfikatów celem obsługi pracy urządzenia SIMOCODE pro V PN z poziomu przeglądarki internetowej w systemie Android

Instalowanie certyfikatów celem obsługi pracy urządzenia SIMOCODE pro V PN z poziomu przeglądarki internetowej w systemie Android Instalowanie certyfikatów celem obsługi pracy urządzenia SIMOCODE pro V PN z poziomu przeglądarki internetowej w systemie Android Wstęp Dostępna od grudnia 2013 roku jednostka podstawowa SIMOCODE pro V

Bardziej szczegółowo

5.4. Tworzymy formularze

5.4. Tworzymy formularze 5.4. Tworzymy formularze Zastosowanie formularzy Formularz to obiekt bazy danych, który daje możliwość tworzenia i modyfikacji danych w tabeli lub kwerendzie. Jego wielką zaletą jest umiejętność zautomatyzowania

Bardziej szczegółowo

World Wide Web? rkijanka

World Wide Web? rkijanka World Wide Web? rkijanka World Wide Web? globalny, interaktywny, dynamiczny, wieloplatformowy, rozproszony, graficzny, hipertekstowy - system informacyjny, działający na bazie Internetu. 1.Sieć WWW jest

Bardziej szczegółowo

Przewodnik... Tworzenie ankiet

Przewodnik... Tworzenie ankiet Przewodnik... Tworzenie ankiet W tym przewodniku dowiesz się jak Dowiesz się, w jaki sposób zadawać pytania tak często, jak potrzebujesz i uzyskiwać informacje pomocne w ulepszeniu Twoich produktów i kampanii

Bardziej szczegółowo

Pracownia internetowa w każdej szkole (edycja Jesień 2007)

Pracownia internetowa w każdej szkole (edycja Jesień 2007) Instrukcja numer D2/08_01 Pracownia internetowa w każdej szkole (edycja Jesień 2007) Opiekun pracowni internetowej cz. 2 (D2) Określanie właściwości stron WWW (domyślne pliki startowe, katalogi wirtualne,

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

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

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

Pracownia internetowa w każdej szkole (edycja Jesień 2007)

Pracownia internetowa w każdej szkole (edycja Jesień 2007) Instrukcja numer D1/04_01/Z Pracownia internetowa w każdej szkole (edycja Jesień 2007) Opiekun pracowni internetowej cz. 1 (D1) Tworzenie kopii zapasowej ustawień systemowych serwera - Zadania do wykonania

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

Jak zainstalować szablon allegro?

Jak zainstalować szablon allegro? Jak zainstalować szablon allegro? W mailu z zakupionym szablonem otrzymali państwo plik zip z numerem szablonu w nazwie. Należy najpierw go rozpakować. W paczce znajduję się pliki: 1. index[nrszablonu].txt

Bardziej szczegółowo

Instrukcja obsługi systemu zarządzania treścią dwajeden.pl

Instrukcja obsługi systemu zarządzania treścią dwajeden.pl Instrukcja obsługi systemu zarządzania treścią dwajeden.pl Tworzenie i edycja danych na stronie www 1. Rozpoczęcie pracy. Logowanie się do systemu zarządzania treścią dwajeden.pl ropocząć należy od podania

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

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

Skrócona instrukcja korzystania z Platformy Zdalnej Edukacji w Gliwickiej Wyższej Szkole Przedsiębiorczości

Skrócona instrukcja korzystania z Platformy Zdalnej Edukacji w Gliwickiej Wyższej Szkole Przedsiębiorczości Skrócona instrukcja korzystania z Platformy Zdalnej Edukacji w Gliwickiej Wyższej Szkole Przedsiębiorczości Wstęp Platforma Zdalnej Edukacji Gliwickiej Wyższej Szkoły Przedsiębiorczości (dalej nazywana

Bardziej szczegółowo

Jak ustawić cele kampanii?

Jak ustawić cele kampanii? Jak ustawić cele kampanii? Czym są cele? Jest to funkcjonalność pozwalająca w łatwy sposób śledzić konwersje wygenerowane na Twojej stronie www poprzez wiadomości email wysłane z systemu GetResponse. Mierzenie

Bardziej szczegółowo

Wpisany przez Grzegorz Kubera Czwartek, 19 Grudzień 2013 16:05 - Zmieniony Czwartek, 19 Grudzień 2013 16:16

Wpisany przez Grzegorz Kubera Czwartek, 19 Grudzień 2013 16:05 - Zmieniony Czwartek, 19 Grudzień 2013 16:16 Folder WinSXS, który znajduje się na C:WindowsWinSXS, jest ogromny i nieprzerwanie rośnie po instalacji systemu operacyjnego. Po pewnym czasie znajdziemy w nim wiele niepotrzebnych plików, takich jak stare

Bardziej szczegółowo

Własna strona WWW w oparciu o CMS

Własna strona WWW w oparciu o CMS Własna strona WWW w oparciu o CMS 1. Uruchomienie własnej strony WWW w oparciu o CMS Do uruchomienia własnej strony WWW, służy Aplikacja do zarządzania kontem w Uczelnianej Sieci Komputerowej ZUT, dostępna

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

INSTRUKCJA EDYCJI PROFILU OSOBOWEGO W SERWISIE WWW.UMCS.PL

INSTRUKCJA EDYCJI PROFILU OSOBOWEGO W SERWISIE WWW.UMCS.PL INSTRUKCJA EDYCJI PROFILU OSOBOWEGO W SERWISIE WWW.UMCS.PL Lublin, 16 stycznia 2014 r. 1. Logowanie do systemu Aby rozpocząć edycję profilu osobowego wejdź na stronę główną www.umcs.pl w zakładkę Jednostki

Bardziej szczegółowo

znajdowały się różne instrukcje) to tak naprawdę definicja funkcji main.

znajdowały się różne instrukcje) to tak naprawdę definicja funkcji main. Część XVI C++ Funkcje Jeśli nasz program rozrósł się już do kilkudziesięciu linijek, warto pomyśleć o jego podziale na mniejsze części. Poznajmy więc funkcje. Szybko się przekonamy, że funkcja to bardzo

Bardziej szczegółowo

Temat: Organizacja skoroszytów i arkuszy

Temat: Organizacja skoroszytów i arkuszy Temat: Organizacja skoroszytów i arkuszy Podstawowe informacje o skoroszycie Excel jest najczęściej wykorzystywany do tworzenia skoroszytów. Skoroszyt jest zbiorem informacji, które są przechowywane w

Bardziej szczegółowo

Pomoc krok-po-kroku. Jak korzystać z Twinspace

Pomoc krok-po-kroku. Jak korzystać z Twinspace Pomoc krok-po-kroku Jak korzystać z Twinspace Jak zaktualizowad swój profil... Error! Bookmark not defined.3 Jak dodawad nauczycieli i gości do swojej TwinSpace... 5 Jak zapraszad uczniów do swojej TwinSpace...

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

Opis przykładowego programu realizującego komunikację z systemem epuap wykorzystując interfejs komunikacyjny "doręczyciel"

Opis przykładowego programu realizującego komunikację z systemem epuap wykorzystując interfejs komunikacyjny doręczyciel Opis przykładowego programu realizującego komunikację z systemem epuap wykorzystując interfejs komunikacyjny "doręczyciel" dn.24.09.2009 r. Dokument opisuje przykładowy program doręczający dokumenty na

Bardziej szczegółowo

Instrukcja obsługi systemu Sky CMS

Instrukcja obsługi systemu Sky CMS Instrukcja obsługi systemu Sky CMS Tworzenie stron w systemie skycms 1. Logujemy się 2. Tworzenie nowej strony: Wchodzimy do zakładki Strony Dodaj nową stronę. Pokażą się zakładki Strona, Powiązania strony,

Bardziej szczegółowo

Spis treści. Warto zapamiętać...2. Podstawy...3

Spis treści. Warto zapamiętać...2. Podstawy...3 Spis treści Warto zapamiętać...2 Podstawy...3 Moduły:...12 Aktualności...12 Fotogaleria i galeria wideo...13 Download...15 Przekierowanie...16 Formularz...17 Katalog produktów...18 Komponenty...18 Pokaz

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

Korzystanie z aplikacji P-touch Transfer Manager

Korzystanie z aplikacji P-touch Transfer Manager Korzystanie z aplikacji P-touch Transfer Manager Wersja 0 POL Wprowadzenie Ważna uwaga Treść niniejszego dokumentu i dane techniczne produktu mogą ulegać zmianom bez powiadomienia. Firma Brother zastrzega

Bardziej szczegółowo

Poradnik obsługi systemu zarządzania treścią (CMS) Concrete5. Informacje podstawowe

Poradnik obsługi systemu zarządzania treścią (CMS) Concrete5. Informacje podstawowe Poradnik obsługi systemu zarządzania treścią (CMS) Concrete5 Informacje podstawowe 1 Spis treści 1. Logowanie... 4 1.1 Widok strony po zalogowaniu... 5 1.2 Widok zaplecza... 6 2. Kopia zapasowa... 9 3.

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

Strona tytułowa, zgodnie z wymaganiami zamieszczonymi na stronie www uczelni. Wzór strony dostępny jest w dzienniku wirtualnym - 1 -

Strona tytułowa, zgodnie z wymaganiami zamieszczonymi na stronie www uczelni. Wzór strony dostępny jest w dzienniku wirtualnym - 1 - Strona tytułowa, zgodnie z wymaganiami zamieszczonymi na stronie www uczelni. Wzór strony dostępny jest w dzienniku wirtualnym - 1 - Spis treści 1 Wstęp... 3 1.1 Cel pracy... 3 1.2 Układ pracy... 4 2 Podstawy

Bardziej szczegółowo

DODAWANIE ARTYKUŁÓW DO STRONY INTERNETOWEJ

DODAWANIE ARTYKUŁÓW DO STRONY INTERNETOWEJ DODAWANIE ARTYKUŁÓW DO STRONY INTERNETOWEJ Aby dodać artykuł musimy się zalogować. W tym celu wchodzimy na stronę http://sp1.brzesckujawski.pl/3/administrator/, wprowadzamy swoje dane: Nazwę użytkownika,

Bardziej szczegółowo

Podstawy WINDOWS 9x, 2000, XP

Podstawy WINDOWS 9x, 2000, XP - 1 - Podstawy Windows & Zarządzanie zasobami komputera opr.m r Osa Podstawy WINDOWS 9x, 2000, XP 1. System Windows składa się z następujących podstawowych elementów: ikona pulpit okno pasek zadań folder

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

Synchronizacja i współdzielenie plików w Internecie. Prezentacja. Instrukcja obsługi aplikacji WEB Manager plików

Synchronizacja i współdzielenie plików w Internecie. Prezentacja. Instrukcja obsługi aplikacji WEB Manager plików Synchronizacja i współdzielenie plików w Internecie Prezentacja Instrukcja obsługi aplikacji WEB Manager plików 1 Cel instrukcji 1. Zapoznajesz się z instrukcją obsługi aplikacji internetowej File Nebula

Bardziej szczegółowo

Budowa aplikacji ASP.NET współpracującej z bazą dany do obsługi przesyłania wiadomości

Budowa aplikacji ASP.NET współpracującej z bazą dany do obsługi przesyłania wiadomości Budowa aplikacji ASP.NET współpracującej z bazą dany do obsługi przesyłania wiadomości Rozpoczniemy od zaprojektowania bazy danych w programie SYBASE/PowerDesigner umieszczamy dwie Encje (tabele) prawym

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

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

Formularz pierwszej oceny w służbie cywilnej

Formularz pierwszej oceny w służbie cywilnej Narzędzie informatyczne wspomagające dokonywanie pierwszej oceny w służbie cywilnej przygotowane w ramach projektu pn. Strategia zarządzania zasobami ludzkimi w służbie cywilnej współfinansowanego przez

Bardziej szczegółowo

2014 Electronics For Imaging. Informacje zawarte w niniejszej publikacji podlegają postanowieniom opisanym w dokumencie Uwagi prawne dotyczącym tego

2014 Electronics For Imaging. Informacje zawarte w niniejszej publikacji podlegają postanowieniom opisanym w dokumencie Uwagi prawne dotyczącym tego 2014 Electronics For Imaging. Informacje zawarte w niniejszej publikacji podlegają postanowieniom opisanym w dokumencie Uwagi prawne dotyczącym tego produktu. 23 czerwca 2014 Spis treści 3 Spis treści...5

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

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

Podstawy JavaScript ćwiczenia

Podstawy JavaScript ćwiczenia Podstawy JavaScript ćwiczenia Kontekst:

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

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

Po wpisaniu adresu w oknie przeglądarki powinien się ukazać formularz logowania.

Po wpisaniu adresu w oknie przeglądarki powinien się ukazać formularz logowania. Dodawanie i edytowanie treści jest możliwe poprzez panel administracyjny, do którego dostęp mamy poprzez wpisanie w przeglądarce adresu http://christianitas.jedryka.com/admin (na razie), a w przyszłości

Bardziej szczegółowo

PORADNIK Zasady i zalecenia pracy z plikami oraz tekstem na stronach nowego portalu SGH (na platformie SharePoint)

PORADNIK Zasady i zalecenia pracy z plikami oraz tekstem na stronach nowego portalu SGH (na platformie SharePoint) PORADNIK Zasady i zalecenia pracy z plikami oraz tekstem na stronach nowego portalu SGH (na platformie SharePoint) wersja 2.0. (6 listopada 2015 r.) Przygotowanie: Dział Informacji i Komunikacji, Dział

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

Wstęp 5 Rozdział 1. Instalacja systemu 13. Rozdział 2. Logowanie i wylogowywanie 21 Rozdział 3. Pulpit i foldery 25. Rozdział 4.

Wstęp 5 Rozdział 1. Instalacja systemu 13. Rozdział 2. Logowanie i wylogowywanie 21 Rozdział 3. Pulpit i foldery 25. Rozdział 4. Wstęp 5 Rozdział 1. Instalacja systemu 13 Uruchamianie Ubuntu 14 Rozdział 2. Logowanie i wylogowywanie 21 Rozdział 3. Pulpit i foldery 25 Uruchamianie aplikacji 25 Skróty do programów 28 Preferowane aplikacje

Bardziej szczegółowo

Produkcja by CTI. Proces instalacji, ważne informacje oraz konfiguracja

Produkcja by CTI. Proces instalacji, ważne informacje oraz konfiguracja Produkcja by CTI Proces instalacji, ważne informacje oraz konfiguracja Spis treści 1. Ważne informacje przed instalacją...3 2. Instalacja programu...4 3. Nawiązanie połączenia z serwerem SQL oraz z programem

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

Baza wiedzy instrukcja

Baza wiedzy instrukcja Strona 1 z 12 Baza wiedzy instrukcja 1 Korzystanie z publikacji... 2 1.1 Interaktywny spis treści... 2 1.2 Przeglądanie publikacji... 3 1.3 Przejście do wybranej strony... 3 1.4 Przeglądanie stron za pomocą

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

PROBLEMY TECHNICZNE. Co zrobić, gdy natrafię na problemy związane z użytkowaniem programu DYSONANS

PROBLEMY TECHNICZNE. Co zrobić, gdy natrafię na problemy związane z użytkowaniem programu DYSONANS PROBLEMY TECHNICZNE Co zrobić, gdy natrafię na problemy związane z użytkowaniem programu DYSONANS Jeżeli stwierdziłeś występowanie błędów lub problemów podczas pracy z programem DYSONANS możesz skorzystać

Bardziej szczegółowo

Instrukcja obsługi Zaplecza epk w zakresie zarządzania tłumaczeniami opisów procedur, publikacji oraz poradników przedsiębiorcy

Instrukcja obsługi Zaplecza epk w zakresie zarządzania tłumaczeniami opisów procedur, publikacji oraz poradników przedsiębiorcy Instrukcja obsługi Zaplecza epk w zakresie zarządzania tłumaczeniami opisów procedur, publikacji oraz poradników przedsiębiorcy Spis treści: 1 WSTĘP... 3 2 DOSTĘP DO SYSTEMU... 3 3 OPIS OGÓLNY SEKCJI TŁUMACZENIA...

Bardziej szczegółowo

Kadry Optivum, Płace Optivum

Kadry Optivum, Płace Optivum Kadry Optivum, Płace Optivum Jak seryjnie przygotować wykazy absencji pracowników? W celu przygotowania pism zawierających wykazy nieobecności pracowników skorzystamy z mechanizmu Nowe wydruki seryjne.

Bardziej szczegółowo

Spis treści. tel.: 782 580 850 e-mail: kontakt@e-zaplecze.pl 2

Spis treści. tel.: 782 580 850 e-mail: kontakt@e-zaplecze.pl 2 Spis treści 1. Wstęp... 3 2. Szybkie wystawienie aukcji w szablonie bez konieczności instalacji szablonu na koncie allegro... 4 3. Wystawianie aukcji w szablonie z instalacją szablonu na koncie allegro...

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

Windows Commander (WinCmd)

Windows Commander (WinCmd) Windows Commander (WinCmd) Windows Commander jest wygodnym i funkcjonalne narzędziem do zarządzania plikami. Stanowi on pewną konkurencję do Eksploratora Windows. Okno główne programu WinCmd składa się

Bardziej szczegółowo

1 Moduł E-mail. 1.1 Konfigurowanie Modułu E-mail

1 Moduł E-mail. 1.1 Konfigurowanie Modułu E-mail 1 Moduł E-mail Moduł E-mail daje użytkownikowi Systemu możliwość wysyłania wiadomości e-mail poprzez istniejące konto SMTP. System Vision może używać go do wysyłania informacji o zdefiniowanych w jednostce

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

Aplikacje internetowe - laboratorium

Aplikacje internetowe - laboratorium Aplikacje internetowe - laboratorium Administracja serwerem aplikacji. Celem ćwiczenia jest zainstalowanie i administracja prostym serwerem aplikacji. Ćwiczenie zostanie wykonane przy użyciu popularnego

Bardziej szczegółowo

Rozwiązanie ćwiczenia 7a

Rozwiązanie ćwiczenia 7a Rozwiązanie ćwiczenia 7a Podpisy pod rysunkami, zdjęciami możesz wprowadzić w następujący sposób: 1. Kliknij obiekt (rysunek, zdjęcie) i wybierz przycisk Wstaw podpis z grupy narzędzi Podpisy na karcie

Bardziej szczegółowo

Zaawansowane aplikacje internetowe - laboratorium

Zaawansowane aplikacje internetowe - laboratorium Zaawansowane aplikacje internetowe - laboratorium Web Services (część 3). Do wykonania ćwiczeń potrzebne jest zintegrowane środowisko programistyczne Microsoft Visual Studio 2005. Ponadto wymagany jest

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

Wstęp. Skąd pobrać program do obsługi FTP? Logowanie

Wstęp. Skąd pobrać program do obsługi FTP? Logowanie Wstęp FTP - (ang. File Transfer Protocol - protokół transmisji danych) jest to protokół typu klient-serwer, który umożliwia przesyłanie plików na serwer, oraz z serwera poprzez program klienta FTP. Dzięki

Bardziej szczegółowo