Formaty obrazów wykorzystywane na stronach www. Dołączanie obrazów do strony Formatowanie obrazów na stronie Tło na stronie Multimedia
|
|
|
- Liliana Mikołajczyk
- 5 lat temu
- Przeglądów:
Transkrypt
1 Grafika i multimedia na stronie Formaty obrazów wykorzystywane na stronach www. Dołączanie obrazów do strony Formatowanie obrazów na stronie Tło na stronie Multimedia
2 Grafika na stronie HTML niezbędny element informacyjny efektowny wygląd Rodzaje plików graficznych Ilustracje, które chcesz umieścić na stronie, powinny być zapisane w formacie JPG, PNG lub GIF.
3 JPEG (.jpg) (Joint Photographic Experts Group) JPEG jest formatem graficznym przeznaczonym do zdjęć. Dobrze radzi sobie z obrazami, które mają dużo kolorów w różnych odcieniach i gładkie przejścia tonalne. Słabym punktem JPEG są ostre linie i jaskrawe kolory po zapisaniu w tym formacie zostaną zniekształcone i rozmazane. JPEG nie obsługuje przezroczystości. PNG (.png) (Portable Network Graphics) Format PNG (czyt. ping) nadaje się do rysunków technicznych takich jak schematy, wykresy. Najlepiej jest w nim zapisywać małe ozdobniki na stronie, jak rożki, kropki, powtarzające się wzory tła. PNG w pełni obsługuje przezroczystość. Grafiki w tym formacie mogą mieć różne kształty, a nawet efekty półprzezroczystości jak np. rozmyte. Jest systemem bezstratnej kompresji danych graficznych. PNG został opracowany jako następca GIF. GIF (.gif) (Graphics Interchange Format) GIF ma podobne zastosowanie jak PNG proste rysunki i małe ozdobniki. Ma słabsze wsparcie dla przezroczystości nie można w tym formacie zapisać półprzezroczystości, przez co krawędzie GIF-ów są zawsze ostre.
4 Reasumując Do fotografii najlepszym formatem jest JPG. Do ilustracji o niewielkiej liczbie kolorów formaty PNG lub GIF. Nie umieszczaj grafiki w formacie BMP spowalnia proces ładowania strony.
5 Tło na stronie Kolor tła oraz tekstu <body bgcolor="kolor" text="kolor tekstu"> Treść strony </body> Tło obrazkowe <body background="ścieżka do obrazka">...</body> Tło obrazkowe Tło nieruchome <body background=" plik_graficzny " bgproperties="fixed">...</body>
6 Wstawianie ilustracji Do wstawiania ilustracji na stronę WWW służy znacznik <IMG>
7 Wstawianie grafiki do dokumentu <img src="plik_graficzny" alt="nazwa alternatywna"> img jest skrótem od Image (obraz); src jest skrótem od Source (żródło); alt jest nazwą alternatywną; plik_graficzny ścieżka dostępu lub nazwa pliku - jeżeli obrazek znajduje się w tym samym katalogu co strona, na której chcemy go wstawić, wystarczy wpisać nazwę pliku wraz z rozszerzeniem (".jpg" lub ".gif"). Jeśli nie stosujemy żadnych dodatkowych atrybutów, obrazek jest ustawiany przy lewym brzegu dokumentu i ma wielkość oryginału.
8 Struktura katalogów na dysku
9
10
11
12
13 Ścieżka względna i bezwzględna Zawsze stosujemy względne, a nie bezwzględne ścieżki dostępu! Wszystkie pliki Twojej strony powinny znajdować się w obrębie katalogu głównego serwisu, w żadnym razie powyżej niego!
14 Zmiana rozmiaru <img src="grafika/motyl.jpg" height="150" width="200" alt= "Motyl na kwiatku"> Zmniejszenie rozmiarów w definicji nie wpływa na wielkość pobieranego obrazka - jest on pobierany w oryginalnym rozmiarze, a następnie zmniejszany przez przeglądarką. Przy zwiększaniu wymiarów w stosunku do wartości oryginalnych pamiętajmy również o malejącej rozdzielczości obrazka na ekranie przeglądarki.
15 Obramowania (BORDER) W wersjach HTML stosujemy atrybut border, za pomocą którego nadajemy grafice obwódkę. <img src="../grafika/motyl.jpg" width="171" height="177" alt=" Motyl na kwiatku " border=" 5"> v <img src="../grafika/motyl.jpg" width="171" height="177" alt=" Motyl na kwiatku " style="border: 5px red solid; "> <img src="../grafika/motyl.jpg" width="171" height="177" alt=" Motyl na kwiatku " style="outline: 5px green double; "> v
16 Odstępy Atrybuty hspace i vspace, tworzą dodatkową przestrzeń w poziomie i w pionie między grafiką a sąsiadującymi elementami. Odległość podawana jest w pikselach. <img src="../grafika/motyl.jpg" width="171" height="177" alt=" Motyl na kwiatku " hspace="x" vspace="y " > Tekst Tekst
17 Grafika jako blok <div align = "center"> <img src="../grafika/motyl.jpg" height="150" width="200" alt= "Motyl na kwiatku"> </div>
18 Pozycjonowanie poziome Grafikę często umieszcza się w ramach akapitu, a wtedy ukazuje się w jednym wierszu z treścią akapitu. Tekst tekst tekst tekst tekst tekst te tekst tekst tekst tekst tekst Oczywiście rozwiązanie jest rażące z estetycznego punktu widzenia. Stosuje się zatem pozycjonowanie grafiki przy prawym lub lewym marginesie strony (lub nadrzędnego bloku).
19 Ilustracja przy prawym marginesie <img src="../grafika/motyl.jpg" height="150" width="200" alt= "Motyl na kwiatku" align = " right" > Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku.
20 Ilustracja przy lewym marginesie <img src="../grafika/motyl.jpg" height="150" width="200" alt= "Motyl na kwiatku" align = " left" > Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku. Treść akapit w którym grafika będzie pozycjonowana przy prawym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku. Treść akapitu, w którym grafika będzie pozycjonowana przy prawym marginesie bloku.
21 Pozycjonowanie pionowe Wykorzystujemy w nim atrybut align (top, middle, bottom) <img src="../grafika/motyl.jpg" height="150" width="200" alt= "Motyl na kwiatku" align = " top" > Motyl na kwiatku Motyl na kwiatku Motyl na Kwiatku Motyl na kwiatku Motyl na kwiatku Motyl na kwiatku Motyl na kwiatku Motyl na kwiatku Motyl na kwiatku Motyl na kwiatku Motyl na kwiatku
22 <img src="../grafika/motyl.jpg" height="150" width="200" alt= "Motyl na kwiatku" align = " middle " > Motyl na kwiatku Motyl na kwiatku Motyl na Kwiatku Motyl na kwiatku Motyl na kwiatku Motyl na kwiatku Motyl na kwiatku Motyl na kwiatku Motyl na kwiatku Motyl na kwiatku Motyl na kwiatku
23 <img src="../grafika/motyl.jpg" height="150" width="200" alt= "Motyl na kwiatku" align = " bottom " > Motyl na kwiatku Motyl na kwiatku Motyl na Kwiatku Motyl na kwiatku Motyl na kwiatku Motyl na kwiatku Motyl na kwiatku Motyl na kwiatku Motyl na kwiatku Motyl na kwiatku Motyl na kwiatku
24 Zadanie: Przy pomocy poznanych na zajęciach metod umieść grafikę na stronie. (Wstaw minimum 5 dowolnych ilustracji, zastosuj obramowanie oraz odpowiednie pozycjonowanie ilustracji na stronie. Pamiętaj, aby każdy obrazek posiadał podpis po najechaniu na niego muszką.)
25 Multimedia
26 embed, nie było nigdy elementem HTML, a jedynie rozszerzeniem firmy Netscape, wprowadzonym w Navigatorze, które zostało potem przyjęte przez konkurencyjne przeglądarki bgsound, nigdy nie było częścią HTML, a jedynie nieoficjalnym rozszerzeniem Internet Explorera, zaakceptowanym także przez Operę
27 Animacja MARQUEE <marquee>tu wpisz tekst</marquee> <marquee behavior="typ">tu wpisz tekst</marquee> gdzie jako "typ" należy wpisać: "scroll" - tekst przesuwa się od prawej do lewej (domyślnie) "alternate" - tekst przesuwa się od prawej do lewej, a następnie "odbija się" i powraca "slide" - tekst przesunie się od prawej do lewej tylko raz, a później się zatrzyma i pozostanie nieruchomy
28 Inne atrybuty: bgcolor kolor tła; direction kierunek przesuwania tekstu (left, right, up, down); loop liczba powtórzeń;
29 Najprostsze rozwiązanie Najprościej i najbezpieczniej jest podać zwykły odsyłacz do pliku multimedialnego, czy filmowego. <a href="plik">muzyczka</a> Zależnie od ustawień przeglądarki użytkownik otworzy od razu domyślny odtwarzacz multimedialny lub zostanie mu zaproponowane zapisanie pliku na dysku.
30 Polecenie embed <embed src="pliku" width="x" height="y" /> Polecenie <embed /> umożliwia wstawienie na stronę plików : *.wav - plik dźwiękowy typu "wav" *.mid - plik dźwiękowy typu "midi" *.avi - plik typu "avi" *.ra - plik Real Audio Player *.mp3 - plik dźwiękowy typu "mp3" (MPEG Layer-3) *.mpeg - plik typu "mpeg" *.mov - plik typu "mov" *.asf - plik typu "asf"
31 Dźwięk na stronie <bgsound src="plik dźwiękowy" /> Polecenie to pozwala na odtwarzanie dźwięku w tle - jako podkład muzyczny. Atrybuty: src ścieżka dostępu; loop liczba powtórzeń (nieskończoność - infinite); volume poziom głośności;
32 Pliki AVI <img dynsrc= "plik*.avi" alt="tekst alternatywny" loop="n"/> Polecenie to odtwarza pliki typu *.avi <img dynsrc= "plik*.avi" alt="tekst alternatywny" start="sposób" /> " fileopen" - plik będzie odtwarzany po wczytaniu strony "mouseover" - plik będzie odtwarzany po wskazaniu myszką
33 Macromedia Flash <object type="application/x-shockwave-flash" data="film.swf" width="200" height="150"> <param name="movie" value="film.swf"> </object> Powyższy sposób umożliwia wstawienie na stronę animacji Flash *.WAV <object type="video-/x-ms-wmv" data= " plik.wav" width="200" height="60"> <param name="src" value="plik.wav"> <param name="autostart" value="true"> </object>
34 Midi <object type="video-/x-ms-wmv" data= " plik.mid" width="200" height="60"> <param name="src" value=" plik.mid" > <param name="autostart" value="true"> </object> Real Media <object type="audio/x-pn-realaudio-plugin" data= " plik.ra" width="200" height="60"> <param name="src" value= " plik.ra"> <param name="autostart" value="true"> </object>
35 Literatura:
Osadzenie pliku dźwiękowego na stronie www
Osadzenie pliku dźwiękowego na stronie www gdzie jako "ścieżka dostępu do pliku" należy podać lokalizację
Ćwiczenie 5 Multimedia
Ćwiczenie 5 Multimedia W ćwiczeniu tym zajmujemy się multimediami i osadzaniem ich na stronach WWW. Poprzez multimedia rozumiemy pliki graficzne, muzyczne, video i inne ozdobniki umieszczone na stronie.
Multimedia. Plan wykładu/ów. Wstęp do HTML a. zastosowanie HTML a do tworzenia multimediów. podstawy HTML a Flash style JavaScript warstwy Java
Multimedia Wstęp do HTML a mgr inż. Piotr Odya piotrod@sound.eti.pg.gda.pl Plan wykładu/ów zastosowanie HTML a do tworzenia multimediów podstawy HTML a Flash style JavaScript warstwy Java 1 Trochę teorii
HTML 1. Gimnazjum nr 1 w Barcinie gimbarcin.pl
HTML 1 Gimnazjum nr 1 w Barcinie UWAGA: UTWÓRZ FOLDER HTML, a w nim HTML-1 dla pierwszego ćwiczenia. Imię_ nazwisko_html-1.html z dysku J: w folderze HTML 1. Tło strony - Jednolity kolor:
zmiana koloru tła <body bgcolor = kolor > tło obrazkowe <body background= ścieżka dostępu do obrazka >
tytuł dokumentu treść dokumentu
przygotował: mgr Szymon Szewczyk PODSTAWY
S t r o n a 1 PODSTAWY Każdy dokument musi być w całości zawarty między znacznikami - i (większość znaczników musi być odwołana ). Dokument HTML a składa się z dwóch części: - głowy
Tworzenie stron internetowych w kodzie HTML Cz 5
Tworzenie stron internetowych w kodzie HTML Cz 5 5. Tabele 5.1. Struktura tabeli 5.1.1 Odcięcia Microsoft Internet Explorer 7.0 niepoprawnie interpretuje białe znaki w komórkach tabeli w przypadku tworzenia
Studia Podyplomowe Grafika komputerowa i Techniki Multimedialne, 2015, semestr II, dr inż. Robert Banasiak Projektowanie Stron WWW.
Ćwiczenie 3 Interaktywność na stronach WWW Dr inż. Robert Banasiak 1 Plan ćwiczeń W trakcie niniejszych ćwiczeń zapoznacie się Państwo z przykładowymi, wybranymi możliwościami wzbogacania stron WWW w elementy
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
Tabele. Przykład 15a.htm. <HTML><HEAD><TITLE> Cennik</TITLE></HEAD><BODY><H3>Cennik</H3> <TABLE BORDER="1"> <TR>
Tabele Autorem niniejszego skryptu jest dr inż. Robert Kolud Tabele w HTML to nie tylko praktyczny sposób na przedstawianie zestawień informacji. Znacznie częściej jednak tabele są wygodnym narzędziem
I. Wstawianie rysunków
I. Wstawianie rysunków Wstawiane rysunku Bez parametrów: Tekst alternatywny Tytuł obrazka
Formaty plików. graficznych, dźwiękowych, wideo
Formaty plików graficznych, dźwiękowych, wideo Spis treści: Wstęp: Co to jest format? Rodzaje formatów graficznych Właściwości formatów graficznych Porównanie formatów między sobą Formaty plików dźwiękowych
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
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
Języki programowania wysokiego poziomu. HTML cz.2.
Języki programowania wysokiego poziomu HTML cz.2. Model pudełkowy HTML Elementy blokowe w tym table oraz div są wyświetlane według tzw. modelu pudełkowego: Zawartość Odstęp (padding) Obramowanie (border)
[ HTML ] Tabele. 1. Tabela, wiersze i kolumny
![[ HTML ] Tabele. 1. Tabela, wiersze i kolumny](/thumbs/70/62541125.jpg "[ HTML ] Tabele. 1. Tabela, wiersze i kolumny")
[ HTML ] Tabele 1. Tabela, wiersze i kolumny Opis tabeli znajdowad się powinien wewnątrz znaczników . W ich ramach umieszczone są definicje rzędów, komórek w rzędach oraz dane w komórkach.
FORMATY PLIKÓW GRAFICZNYCH
FORMATY PLIKÓW GRAFICZNYCH Różnice między nimi. Ich wady i zalety. Marta Łukasik Plan prezentacji Formaty plików graficznych Grafika wektorowa Grafika rastrowa GIF PNG JPG SAV FORMATY PLIKÓW GRAFICZNYCH
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
ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści
ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop. 2012 Spis treści Wstęp 9 1 HTML 5 i XHTML w pytaniach i odpowiedziach 13 Co to jest HTML 5? 13 Co to jest XHTML? 15 Czy strony utworzone w HTML
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
Z życia grafika-webmastera
Z życia grafika-webmastera Czasy, kiedy jedynym wymaganiem co do pracy grafika, była wyłącznie jego bujna inwencja twórcza, już dawno minęły. Grafik-webmaster, pracujący czy to jako freelancer, czy jako
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
Tabela z komórkami nagłówkowymi (wyróżnionymi)
Tabela z komórkami nagłówkowymi (wyróżnionymi) Nagłówek poziomy ... ... Nagłówek pionowy ... ... Tytuł tabeli tytuł tabeli... gdzie
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
2. MATERIAŁ NAUCZANIA
1. CEL ĆWICZENIA Celem ćwiczenia jest zapoznanie się ze składnią języka HTML dotyczącą identyfikacji i grupowania elementów oraz wstawiania plików multimedialnych. 2. MATERIAŁ NAUCZANIA 2.1. Wstawianie
Co to jest dźwięk. Dźwięk to wyrażenie słuchowe wywołane przez falę akustyczną. Ludzki narząd wyłapuje dźwięki z częstotliwością 16 do 20 Hz
Dźwięk Co to jest dźwięk Dźwięk to wyrażenie słuchowe wywołane przez falę akustyczną. Ludzki narząd wyłapuje dźwięki z częstotliwością 16 do 20 Hz Próbkowanie Cyfrowy zapis dźwięku opiera się na procedurze
Za pomocą atrybutu ROWS moŝemy dokonać podziału ekranu w poziomie. Odpowiedni kod powinien wyglądać następująco:
1 1. Ramki Najbardziej elastycznym sposobem budowania stron jest uŝycie ramek. Ułatwiają one nawigowanie w wielostronicowych dokumentach HTML, poprzez podział ekranu na kilka obszarów. KaŜdy z nich zawiera
Edytor tekstu OpenOffice Writer Podstawy
Edytor tekstu OpenOffice Writer Podstawy Cz. 3. Rysunki w dokumencie Obiekt Fontwork Jeżeli chcemy zamieścić w naszym dokumencie jakiś efektowny napis, na przykład tytuł czy hasło promocyjne, możemy 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
Często używanym elementem języka HTML są tabele, które wykorzystuje się do wygodnego rozmieszczania informacji i obrazów.
Tabele Często używanym elementem języka HTML są tabele, które wykorzystuje się do wygodnego rozmieszczania informacji i obrazów. Ramy tabeli Ramy tabeli tworzone są za pomocą polecenia: Cała zawartość
Porównanie rozmiarów plików nieskompresowanych rysunków z uwzględnieniem różnych wymiarów i liczby kolorów obrazów. Wymiary (cm)
A. OBRAZY I MULTIMEDIA 1. METODY OKREŚLANIA KOLORÓW [R.33] Najczęściej używanymi właściwościami służącymi do określania kolorów elementów są: color oraz background-color. Działanie tych właściwości jest
Grafika w aplikacjach lp. Jak zmienić kolor tła?
Grafika w aplikacjach lp W tym rozdziale znajdziesz informacje jak osadzić w tworzonym programie zdjęcia, rysunki, wykresy i inne elementy graficzne. W środowisku lp autor ma dostęp do następujących obiektów
Co to jest html? I.Struktura strony:
Co to jest html? Jak tworzyć strony internetowe? Jest ich przecież w Internecie tysiące, a może nawet miliony. Jednak jedne strony bardziej nam się podobają, inne mniej. Z czego to wynika? Atrakcyjność
Rozszerzenia plików graficznych do publkacji internetowych- Kasia Ząbek kl. 2dT
Rozszerzenia plików graficznych do publkacji internetowych- Kasia Ząbek kl. 2dT Plik graficzny o formacie ".tiff" TIFF (ang. Tagged Image File Format)- komputerowy format plików graficznych służy on do
Język (X)HTML. Podstawowe znaczniki i parametry. dr Konrad Dominas / UAM
Język (X)HTML Podstawowe znaczniki i parametry Szablon dokumentu (X)HTML
Ćwiczenie 4 - Tabele
Ćwiczenie 4 - Tabele W ćwiczeniu tym zajmujemy się tabelami. Tabele moŝna wykorzystywać do róŝnych celów. W tabelach moŝna prezentować dane i je wyliczać, moŝna ustalić określony układ treści i stworzyć
Rysunek otaczany przez tekst
Tekst i obrazy 1 Rysunek otaczany przez tekst Wprowadzanie obiektu graficznego Rozmiar ramki: width= 200 deklaruje się tylko
Cała prawda o plikach grafiki rastrowej
~ 1 ~ Cała prawda o plikach grafiki rastrowej Grafika rastrowa to rodzaj grafiki zapisywanej na dysku w postaci bitmapy, czyli zbioru pikseli. W edytorach grafiki rastrowej możliwa jest edycja na poziomie
Kompresja obrazów i formaty plików graficznych
Kompresja obrazów i formaty plików graficznych Kompresja obrazów Obrazy zapisywane w 24 lub 32-bitowej głębi kolorów o dużej rozdzielczości zajmują dużo miejsca. Utrudnia to przesyłanie ich pocztą elektroniczną,
Okna dialogowe ustawień konfiguracyjnych
Zadania z luką 1. Utwórz folder dla nowego ćwiczenia i uruchom moduł JCloze. 2. Kliknij w ikonę by zapisać plik ćwiczenia. Nadaj mu nazwę (najlepiej bez polskich znaków) i zapisz w folderze ćwiczenia.
Formaty plików graficznych
Formaty plików graficznych grafika rastowa grafika wektorowa Grafika rastrowa Grafika rastrowa służy do zapisywania zdjęć i realistycznych obrazów Jakość obrazka rastrowego jest określana przez całkowitą
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
Krótki przegląd własności języka CSS
Krótki przegląd własności języka CSS Stosując arkusze stylów CSS, w sposób wyraźny oddziela się formatowanie dokumentu XHTML od jego warstwy znaczeniowej umieszczonej w sekcji . Niżej zestawiono
Technologia Prezentacji Medialnych
Technologia Prezentacji Medialnych HTML i nie tylko mgr inż. Piotr Odya piotrod@sound.eti.pg.gda.pl Plan wykładu zastosowanie HTML a do tworzenia multimediów podstawy HTML a obrazy, dźwięk i wideo na stronie
Edytor tekstu MS Word 2010 PL: grafika. Edytor tekstu MS Word umożliwia wstawianie do dokumentów grafiki.
Edytor tekstu MS Word 2010 PL: grafika. Edytor tekstu MS Word umożliwia wstawianie do dokumentów grafiki. Edytor tekstu MS Word 2010 PL: kształty. Do każdego dokumentu można wstawić tzw. kształty. Aby
Kompresja Stratna i Bezstratna Przegląd Najważniejszych Formatów Graficznych
Kompresja Stratna i Bezstratna Przegląd Najważniejszych Formatów Graficznych Idea Kompresji Kompresja danych - polega na zmianie sposobu zapisu informacji w taki sposób, aby zmniejszyć redundancję czyli
Tworzenie stron internetowych w kodzie HTML Cz 7
Tworzenie stron internetowych w kodzie HTML Cz 7 7. Ramki 7.1. Wstęp Przykład: Oto przykładowy wygląd strony startowej ramek: PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd">
HTML - podstawowe znaczniki
HTML - podstawowe znaczniki Strukturę dokumentu HTML możemy przedstawić następująco: Tytuł strony W niej zagnieżdżać będziemy pozostałe znaczniki.
HTML (HyperText Markup Language) hipertekstowy język znaczników
HTML (HyperText Markup Language) hipertekstowy język znaczników Struktura dokumentu tytuł strony
Copyright wersji angielskiej: The European Computer Driving Licence Foundation Ltd. Copyright wersji polskiej: Polskie Towarzystwo Informatyczne
Syllabus WEBSTARTER wersja 1.0 Polskie Towarzystwo Informatyczne 2007 Copyright wersji angielskiej: The European Computer Driving Licence Foundation Ltd. Copyright wersji polskiej: Polskie Towarzystwo
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
INTERAKTYWNA KOMUNIKACJA WIZUALNA. Flash - podstawy
INTERAKTYWNA KOMUNIKACJA WIZUALNA Flash - podstawy Adobe Flash (dawniej Macromedia Flash) program komputerowy, technologia tworzenia animacji z wykorzystaniem grafiki wektorowej. Powstałe pliki *.swf można
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
Instrukcja - blogi OK zeszyt Logowanie
Instrukcja - blogi OK zeszyt Logowanie 1. Proszę wejść na stronę http://okblogi.ceo.org.pl/ 2. Po prawej stronie znajduje się link do logowania: 3. Proszę wpisać dane logowania: Nazwa Twojego bloga Twój
Prezentacja MS PowerPoint 2010 PL.
Prezentacja MS PowerPoint 2010 PL. Microsoft PowerPoint to program do tworzenia prezentacji multimedialnych wchodzący w skład pakietu biurowego Microsoft Office. Prezentacje multimedialne to rodzaje prezentacji
TWORZENIE PREZENTACJI MS POWERPOINT
TWORZENIE PREZENTACJI MS POWERPOINT Wstęp TWORZENIE PREZENTACJI MS POWERPOINT Czasami zdarza się, że zostajemy poproszeni o poprowadzenia spotkania czy szkolenia w firmie, w której pracujemy lub po prostu
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
Obróbka grafiki cyfrowej
Obróbka grafiki cyfrowej 1 ROZDZIELCZOŚĆ (ang. resolution) - oznacza ilość malutkich punktów, które tworzą widzialny znak w druku bądź na ekranie monitora Typowe rozdzielczości monitorów komputerowych
Elementy grafiki komputerowej
Formaty plików w grafice komputerowej Formaty plików w grafice komputerowej formaty dla grafiki rastrowej zapis bez kompresji: BMP, RAW zapis z kompresją bezstratną: PCX, GIF, PNG, TIFF zapis z kompresją
Specyfikacja mailingu GG Network
Specyfikacja mailingu GG Network Styczeń 2012 2 Mailing założenia ogólne Do wysłanego mailingu konieczne jest dostarczenie: kreacji typu HTML (do 30 kb); tematu mailingu; nadawcy mailingu; danych reklamodawcy
Multimedia w HTML5. Statyczne witryny internetowe 2TI/TOR. Marek Kwiatkowski
Multimedia w HTML5 Statyczne witryny internetowe 2TI/TOR Marek Kwiatkowski Cele lekcji: Poznanie zasady umieszczania plików multimedialnych w HTML5 Zrozumienie istoty stosowania nowych znaczników w HTML5
Odsyłacze (inaczej: hiperłącza, łącza hipertekstowe, odnośniki, linki) Najbardziej charakterystycznym elementem dokumentów w światowej sieci World
Temat: Odsyłacze. Odsyłacze (inaczej: hiperłącza, łącza hipertekstowe, odnośniki, linki) Najbardziej charakterystycznym elementem dokumentów w światowej sieci World Wide Web. Odsyłacze Umożliwiają za pomocą
Z CSS3 szybciej i przyjemniej
1 Z CSS3 szybciej i przyjemniej Marta Piasecka, 2 Zaokraglone--narozniki - 3 lub 4 elementy rysują tło - więcej kodu html - obrazki z narożnikami lub częściami tła - użytkownik widzi stronę bez tła dopóki
Grafika Komputerowa Wykład 1. Wstęp do grafiki komputerowej Obraz rastrowy i wektorowy. mgr inż. Michał Chwesiuk 1/22
Wykład 1 Wstęp do grafiki komputerowej rastrowy i wektorowy mgr inż. 1/22 O mnie mgr inż. michalchwesiuk@gmail.com http://mchwesiuk.pl Materiały, wykłady, informacje Doktorant na Wydziale Informatyki Uniwersytetu
APLIKACJE INTERNETOWE 1 HTML - STRUKTURA STRONY INTERNETOWEJ
APLIKACJE INTERNETOWE 1 HTML - STRUKTURA STRONY INTERNETOWEJ PLAN PREZENTACJI Wprowadzenie do HTML Struktura dokumentu HTML Komentarze Znaczniki Nagłówki (tytuły) Akapit Znacznik końca wiersza Linia pozioma
Języki programowania wysokiego poziomu. CSS Wskazówki
Języki programowania wysokiego poziomu CSS Wskazówki CSS powinno się projektować hierarchicznie, zaczynając od elementów ogólniejszych, kończąc na szczegółowych - Źle: p.mid { text-align: center; p { color:
Tematy lekcji informatyki klasa 4a styczeń 2013
Tematy lekcji informatyki klasa 4a styczeń 2013 temat 7. z podręcznika (str. 70-72); sztuczki 4. i 5. (str. 78); Narysuj ikony narzędzi do zaznaczania i opisz je. 19 Zaznaczamy fragment rysunku i przenosimy
dr hab. inż. Lidia Jackowska-Strumiłło, prof. PŁ Instytut Informatyki Stosowanej, PŁ
Wydział Elektrotechniki, Elektroniki, Informatyki i Automatyki Politechnika Łódzka Środowisko pracy grafików dr hab. inż. Lidia Jackowska-Strumiłło, prof. PŁ Instytut Informatyki Stosowanej, PŁ Formaty
Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp.
Style CSS Wstęp Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp. Podstawową zaletą i zadaniem stylów jest oddzielenie
HTML (HyperText Markup Language)
HTML (HyperText Markup Language) Struktura dokumentu tytuł strony sekcja nagłówka Tutaj wpisujemy
Projektowanie stron WWW
Projektowanie stron WWW Projektowanie stron WWW, podobnie jak tworzenie wstępnego zarysu książki, planowanie czy malowanie, może być czasami bardzo złożonym procesem. Wcześniejsze opracowanie ogólnego
Przedmiot: Grafika komputerowa i projektowanie stron WWW
KARKONOSKA PAŃSTWOWA SZKOŁA WYŻSZA Kierunek: Dziennikarstwo i komunikacja społeczna Przedmiot: Grafika komputerowa i projektowanie stron WWW 1 opracował: dr inż. Jerzy Januszewicz HTML (HyperText Markup
GRAFIKA RASTROWA. WYKŁAD 2 Oprogramowanie i formaty plików. Jacek Wiślicki Katedra Informatyki Stosowanej
GRAFIKA RASTROWA WYKŁAD 2 Oprogramowanie i formaty plików Jacek Wiślicki Katedra Informatyki Stosowanej Oprogramowanie Na rynku istnieje wiele programów do tworzenia i przetwarzania grafiki rastrowej.
używane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów
opracowanie I. K. używane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów ISO-8859-2 - norma międzynarodowa określająca sposób kodowania
ECDL/ICDL Zaawansowana grafika menedżerska i prezentacyjna Sylabus, wersja 2.0
ECDL/ICDL Zaawansowana grafika menedżerska i prezentacyjna Sylabus, wersja 2.0 Przeznaczenie sylabusa Dokument ten zawiera szczegółowy sylabus dla modułu ECDL/ICDL Zaawansowana grafika menedżerska i prezentacyjna.
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.
Pierwsza strona internetowa
HTML i CSS Pierwsza strona internetowa Rozpoczynając pracę na swoim komputerze powinieneś posiadać: dowolny edytor tekstowy (np. Notatnik), dostęp do Internetu, Microsoft Visual Studio. Podstawy formatowania
1. Wstęp Pierwsze uruchomienie Przygotowanie kompozycji Wybór kompozycji Edycja kompozycji...
Spis treści 1. Wstęp... 3 2. Pierwsze uruchomienie... 3 3. Przygotowanie kompozycji... 4 3.1. Wybór kompozycji... 4 3.2. Edycja kompozycji... 5 3.2.1. Dodawanie pliku Flash przygotowanie plików Flash...
Witryny i aplikacje internetowe
Test z przedmiotu Witryny i aplikacje internetowe Zadanie 1 Kod języka HTML przedstawi tabelę składającą się z dwóch
SterBox. Przygotowanie Strony Użytkownika
Przygotowanie Strony Użytkownika Sterbox od wersji 2.1.1 obsługuje dwie strony użytkownika umożliwiające sterowanie z kontrolą stanów. Rozpoczynając tworzenie strony potrzebujemy programu do tworzenia
Ćwiczenie 3 - Odsyłacze
Ćwiczenie 3 - Odsyłacze Ćwiczenie to poświęcone jest odsyłaczom czyli powiązaniu plików wewnętrznych i zewnętrznych na róŝne sposoby. Linki, które natychmiast przenoszą w określone miejsce to istota stron
Wstawianie nowej strony
Wstawianie nowej strony W obszernych dokumentach będziemy spotykali się z potrzebą dzielenia dokumentu na części. Czynność tę wykorzystujemy np.. do rozpoczęcia pisania nowego rozdziału na kolejnej stronie.
1 LEKCJA. Definicja grafiki. Główne działy grafiki komputerowej. Programy graficzne: Grafika rastrowa. Grafika wektorowa. Grafika trójwymiarowa
1 LEKCJA Definicja grafiki Dział informatyki zajmujący się wykorzystaniem komputerów do generowania i przetwarzania obrazów (statycznych i dynamicznych) oraz wizualizacją danych. Główne działy grafiki
Podstawy HTML i CSS. Wydział Matematyki, Informatyki i Ekonometrii Uniwersytet Zielonogórski
Podstawy HTML i CSS Grzegorz Arkit Wydział Matematyki, Informatyki i Ekonometrii Uniwersytet Zielonogórski 13 października 2016 G. Arkit (WMIiE) Podstawy HTML i CSS 13 października 2016 1 / 20 Informacja
Tło CSS 3. Gabriela Panuś
Tło CSS 3 Gabriela Panuś body { background-color: kolor; TŁO - CSS } TŁO OBRAZKOWE background-image: url(tlo.jpg); /* podajemy ścieżkę do tła */ body { } background: #6495ed url(image/obrazek.png); Właściwości
Jak dodać własny szablon ramki w programie dibudka i dilustro
Aby dodać własną ramkę otwórz moduł administracyjny dibudkaadmin.exe, wejdź do zakładki Ramki, tła, id i następnie Edycja. 1. Kliknij przycisk Dodaj ramkę 2. Określ wymiary nowej ramki Jeżeli dodajesz
Plan prezentacji. Tworzenie prezentacji multimedialnych Piotr Odya
Tworzenie prezentacji multimedialnych Piotr Odya piotrod@sound.eti.pg.gda.pl Katedra Systemów Multimedialnych Plan prezentacji Wprowadzenie Prezentacja rodzaje, zasady tworzenia Multimedia tekst animacje
Podstawy HTML. 2. Komendy ujęte są w nawiasy ostre - < > i występują najczęściej parami.
Podstawy HTML 1. HTML - to język formatowania dokumentów elektronicznych, który pozwala uformować tekst oraz połączyć go z grafiką. Dokument HTML ma postać pliku tekstowego, gdzie tekst przeplatany jest
Wykorzystano fragmenty wykładu Krystyny Dziubich GRAFIKA WEKTOROWA. Aplikacje i Usługi Internetowe KASK ETI Politechnika Gdańska.
Wykorzystano fragmenty wykładu Krystyny Dziubich GRAFIKA WEKTOROWA Waldemar Korłub Aplikacje i Usługi Internetowe KASK ETI Politechnika Gdańska Grafika rastrowa 2 Plik graficzny jako siatka pixeli (bitmapa)
Audio i Video w HTML5
Audio i Video w HTML5 http://www.asdala.de/netz/html/video.html Kiedyś
Paweł Kaźmierczak. styczeń 2009
Wstęp Wstawianie i tworzenie grafiki w systemie składu tekstu LaTeX Instytut Matematyki i Informatyki PWSZ Płock styczeń 2009 Wstęp Kilka słów... Dzięki grafice, nasze dokumenty mają atrakcyjniejszą formę.
Ćwiczenie 9 - CSS i wstawianie CSS
Ćwiczenie 9 - CSS i wstawianie CSS Wprowadzenie: Od tego ćwiczenia zajmować się będziemy CSS czyli Kaskadowymi Arkuszami Stylów (Cascading Style Sheets). CSS stanowią uzupełnienie dla HTML-a. HTML odpowiada
LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH TABELE I FORMULARZE
LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH TABELE I FORMULARZE 1. TABELE 1.1. Definicja tabeli Definicja tabeli musi być umieszczona między znacznikami. W ich ramach umieszczane są definicje rzędów
Prezentacja multimedialna MS PowerPoint 2010 (podstawy)
Prezentacja multimedialna MS PowerPoint 2010 (podstawy) Cz. 2. Wstawianie obiektów do slajdu Do slajdów w naszej prezentacji możemy wstawić różne obiekty (obraz, dźwięk, multimedia, elementy ozdobne),
Dział O atrakcyjnym przedstawianiu i prezentowaniu informacji (program PowerPoint oraz język HTML tworzenie stron WWW)
Dział O atrakcyjnym przedstawianiu i prezentowaniu informacji (program PowerPoint oraz język HTML tworzenie stron WWW) Określa pojęcia dotyczące prezentacji. Projektuje i wykonuje prezentację multimedialną
Nazwa implementacji: CSS i box model. Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie.
Nazwa implementacji: CSS i box model Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie. Wprowadzenie CSS (kaskadowe arkusze stylów, ang. Cascading
CSS jest is an skrótem od Cascading Style Sheets (Kaskadowe Arkusze Stylów).
Co to jest CSS? CSS jest is an skrótem od Cascading Style Sheets (Kaskadowe Arkusze Stylów). Co mogę zrobić z CSS? CSS jest językiem stylu określającego układ graficzny dokumentów HTML. Na przykład, CSS
SPECYFIKACJA TECHNICZNA FORM REKLAMOWYCH - INTERNET
SPECYFIKACJA TECHNICZNA FORM REKLAMOWYCH - INTERNET Rozmiar, waga, format reklam FORMA REKLAMOWA MAKSYMALNA WAGA ROZMIAR (px) FORMAT PLIKU Billboard 50 kb 750x100 gif, jpg, swf Double billboard 50 kb 750x200
Multimedia i interfejsy. Ćwiczenie 5 HTML5
Multimedia i interfejsy Ćwiczenie 5 HTML5 Celem ćwiczenia jest poznanie nowych elementów wprowadzonych w HTML 5, do których należą m.in. video oraz canvas. Poniższy opis przedstawia sposób użycia tych