Aplikacje internetowe

Slides:



Advertisements
Podobne prezentacje
Dokument HTML jest zwykłym
Advertisements

Tworzenie stron internetowych
Metody pozycjonowania elementów na stronie www
Zastosowanie technologii medialnych i internetowych Wygląd witryny krok po kroku Wykład dr in ż. Jacek Wachowicz
HTML.
Tworzenie stron w języku WML jest zbliżone do tworzenia stron w HTML. W obydwu przypadkach używa się do tego celu znaczników (tagów). Zadaniem znaczników.
„Zasady formatowania plików w formacie Microsoft Word”
Andrzej Pędzich HTML ramki, menu, odnośniki.
PHP wprowadzenie.
Tworzenie nowej biblioteki
Budowa i układ strony dokumentu
Tworzenie stron internetowych www World Wide Web
Opracowała: Iwona Kowalik
ADRESOWANIE WZGLĘDNE I BEZWZGLĘDNE Ćwiczenia
Czym są HTML i XHTML? Skrót HTML pochodzi od słów Hypertext Markup Language (język znakowania hipertekstu). Język HTML jest podstawą każdej strony WWW.
OPRACOWAŁ : KONRAD MIGAŁA iz krótki tekst Krótki tekst Do formatowania tekstu użyjemy znacznika jest to znacznik który umożliwia utworzenie akapitu.
Wprowadzenie do edytorów tekstu.
Poznaj bliżej program Microsoft Office Word 2007
Otwieranie elementów w różnych ramkach
Tworzenie stron internetowych
ANNA BANIEWSKA SYLWIA FILUŚ
Opracowała Urszula Guzikowska
Tworzenie strony internetowej krok po kroku.
Temat 3: Podstawowa struktura dokumentu
Tytuł:Poradnik do programu PowerPoint?
Tworzenie komiksu MS PowerPoint Beata Sanakiewicz.
Formatowanie treści oraz grafika w kodzie HTML. Nagłówki.
Visual Basic w Excelu.
Wprowadzenie do HTML Informatyka Cele lekcji: Wiadomości:
Temat 10: Tabele. Tabele stanowią obecnie jeden ze sposobów prezentowania danych. Początkowo były wykorzystywane do tworzenia układów stron, które teraz.
Projektowanie stron www
Temat 5: Pozycjonowanie elementów
Temat 12: Formularze.
Temat 13: Ramki.
Aplikacje internetowe Łącza hipertekstowe. Tworzenie hiperpołączeń Do utworzenia połączenia w języku HTML potrzebne są następujące informacje: nazwa pliku.
Aplikacje internetowe Projektowanie formularzy Część 2.
Podstawy HTML RAMKi. Ramki Za ich pomocą możesz swobodnie podzielić okno przeglądarki na kilka części i w nich niezależnie przeglądać dokumenty. Ramki.
Aplikacje internetowe
Aplikacje internetowe
Elementy multimedialne na stronie
Aplikacje internetowe Tabele Ciąg dalszy. Wprowadzanie złamań wiersza Często, najprostszym sposobem wpływania na układ tabeli jest wprowadzenie łamań.
Aplikacje internetowe Grafika na stronach WWW ciąg dalszy Atrybuty znacznika body.
Tabele. TABELE Konstrukcja tabeli: Określa ramy tabeli określamy wiersz tabeli określamy komórkę tabeli.
Aplikacje internetowe
Aplikacje internetowe
Aplikacje internetowe
Aplikacje internetowe Formatowanie tekstu w HTML-u ciąg dalszy.
MS Office MS PowerPoint 2007
HTML Czyli Publikowanie w Internecie. Przeglądarka internetowa –Mosaic - pierwsza –Netscape –Internet Explorer –Opera –Mozilla Dokument HTML –Dokument.
HTML.
Znaki specjalne Co i jak + brak przykładów.  Aby wstawić symbol lub znak specjalny należy na karcie Wstawianie w grupie Symbole kliknąć na przycisk Symbol.
PULPIT WINDOWS.
Aplikacje internetowe CSS - style fontów, tekstu Ciąg dalszy.
Informatyka – szkoła gimnazjalna – Scholaris - © DC Edukacja Formatowanie treści oraz grafika w kodzie HTML Informatyka.
Treści multimedialne - kodowanie, przetwarzanie, prezentacja Odtwarzanie treści multimedialnych Andrzej Majkowski 1 informatyka +
Temat 9: Obrazy i multimedia
Aplikacje internetowe Formatowanie tekstu w HTML-u.
Aplikacje internetowe
Kolumny, tabulatory, tabele, sortowanie
Temat 1: CSS Dołączanie stylów do dokumentu
Damian Urbańczyk xHTML Elementy graficzne.
Beata Sanakiewicz. Spis treści  Pierwsze spotkanie Pierwsze spotkanie  Ustawienia witryny Ustawienia witryny  Tło strony Tło strony  Teksty na stronie.
Formatowanie dokumentów
Iga Lewandowska I EMII MU
SAMOUCZEK PRZYKŁAD ZASTOSOWANIA PROGRAMU DO MODELOWANIA TARCZ.
Podstawy tworzenia stron WWW w języku HTML Koło Naukowe Elektroniki Przemysłowej - KNEP Wykonali:Mariusz Zawistowicz i Karol Witowski.
Aplikacje internetowe Posługiwanie się ramkami. Zastosowanie ramek Wprowadzenie obsługi ramek w przeglądarce Netscape 2.0 otworzyło nową erę dla twórców.
Wykład 4 Informatyka MPDI sem.3 HTML cd. Arkusze stylów - CSS.
LaTeX cd.
Wprowadzenie do edytorów tekstu.
Zapis prezentacji:

Aplikacje internetowe Grafika na stronach WWW

Grafika w sieci WWW Obrazy znajdujące się na stronach WWW można podzielić na dwie kategorie: wewnętrzne, zewnętrzne. Pierwsze z nich to obrazy, znajdujące się bezpośrednio na stronie, umieszczane pośród tekstu i połączeń. Są one ładowane automatycznie razem ze stroną, oczywiście pod warunkiem, że korzystamy z przeglądarki graficznej i opcja automatycznego wyświetlania obrazów jest włączona. Obrazy zewnętrzne nie są ładowane automatycznie, mogą zostać wyświetlone dopiero na żądanie użytkownika, więc zwykle prowadzą do nich hiperpołączenia. Aby oglądać obrazy tego typu, nie musimy koniecznie posiadać przeglądarki graficznej.

Obrazy wewnętrzne na stronach WWW: znacznik <IMG> Jeżeli mamy przygotowany plik graficzny w formacie GIF lub JPEG, możemy umieścić go na stronie WWW. Do tego celu służy znacznik <img>. Znacznik ten, podobnie jak <hr> i <br>, nie posiada w HTML-u znacznika zamykającego. W XHTML-u na końcu znacznika, po liście jego atrybutów, należy umieścić odstęp i znak ukośnika. Znacznik <IMG> posiada wiele różnych atrybutów, które pozwalają na kontrolę sposobu wyświetlania obrazu na stronie.

Obrazy wewnętrzne na stronach WWW: znacznik <IMG> Najważniejszym atrybutem znacznika <img> jest bez wątpienia src. Służy on do określenia ujętej w cudzysłów nazwy pliku lub URL-a obrazu, który ma zostać w danym miejscu wstawiony. Przy określaniu ścieżki dostępu do tego pliku obowiązują te same reguły, o których była już mowa przy omawianiu tworzenia połączeń i atrybutu href. Aby więc wstawić do strony plik o nazwie image.gif, znajdujący się w tym samym katalogu co tworzona strona, musimy użyć następującego zapisu: <img src="image.gif" /> Gdyby plik ten znajdował się o jeden katalog wyżej, znacznik wyglądałby tak: <img src="../image.gif" />

Dodawanie tekstu alternatywnego Obrazy mogą zamienić prostą, tekstową stronę WWW w prawdziwą „ucztę dla oczu”. Co się jednak stanie, jeśli użytkownik wyświetli stronę w przeglądarce tekstowej lub wyłączy pobieranie obrazów, tak że wszystkie, tak pracowicie przygotowywane, elementy graficzne strony zostaną zastąpione zwykłymi, standardowymi ikonami? Nagle ta wspaniała wizualna uczta, którą była strona, znacznie straci na swej atrakcyjności. A co gorsza, jeśli nie przewidzieliśmy tej możliwości podczas projektowania strony, to część Naszych potencjalnych odbiorców może nie być w stanie jej oglądnąć lub wykorzystać jej możliwości.

Dodawanie tekstu alternatywnego Jeden z tych problemów można rozwiązać w bardzo prosty sposób. Używając atrybutu alt znacznika <img>, możemy zastąpić obraz jakimś odpowiednim fragmentem tekstu, który będzie wyświetlany w przeglądarkach, nieobsługujących obrazów. W przeglądarkach tekstowych, takich jak Lynx, obrazy umieszczane na stronach przy użyciu znacznika <img> są zazwyczaj „wyświetlane” jako słowo: „IMAGE” zapisane w nawiasach kwadratowych: [IMAGE]. Jeśli obraz stanowi jednocześnie hiperpołączenie, to zostaje ono zachowane.

Dodawanie tekstu alternatywnego Atrybut alt znacznika <img> daje możliwość podania znacznie pełniejszego opisu obrazka, który przekaże użytkownikom, korzystającym z przeglądarek tekstowych lub osobom, które wyłączyły pobierania rysunków, znacznie więcej informacji niż pojedyncze słowo „IMAGE”. Atrybut ten zawiera ciąg znaków, który należy wyświetlić zamiast obrazka: <img src="mojobrazek.gif" alt="[zdjęcie kota]" />.

Ćwiczenie 1

Ćwiczenie 1 Załóżmy, że chcemy wstawić ten obraz w osobnej linii, tak aby nagłówek znajdował się tuż pod nim. Aby zrobić to właśnie w ten sposób, należy wstawić znacznik <img> w osobnym akapicie, tuż przed nagłówkiem (obrazy, podobnie jak połączenia nie stanowią odrębnych elementów tekstowych, muszą więc korzystać z usług innych znaczników, takich jak akapity czy nagłówki). <p><img src="house.jpg" alt="Pałac Strachu Halloween" /></p> <h1>Witajcie w Pałacu Strachu Halloween!!</h1>

Ćwiczenie 1

Obrazy i tekst W poprzednim ćwiczeniu wstawiliśmy wewnętrzny obraz w osobnym akapicie, podczas gdy tekst znalazł się poniżej. Ale obrazy można wstawiać również obok tekstu, niejako w tej samej linii. Aby wstawić obraz obok tekstu, należy użyć znacznika <img> we właściwym miejscu, czyli wewnątrz odpowiedniego znacznika (<h1>, <p>, <address> itp.), jak pokazano w poniższej linii kodu. <h1><img src="house.jpg" alt="Pałac Strachu Halloween" /> Witajcie w Pałacu Strachu Halloween!!</h1>

Ćwiczenie 2

Wzajemne położenie tekstu i obrazu Zauważmy, że w pokazanym przykładzie dolne krawędzie tekstu i obrazu znajdujących się w jednej linii pokrywają się. Znacznik <img> zawiera jednakże atrybut align, który umożliwia ułożenie obrazu powyżej lub poniżej otaczającego go tekstu, lub innych obrazów w tej samej linii. W HTML-u zdefiniowane zostały trzy wartości atrybutu ALIGN. align="top" – wyrównuje górną krawędź obrazu względem górnej krawędzi linii (może to być górna krawędź tekstu lub innego obrazu). align="middle" – wyrównuje obraz w taki sposób, że jego środek leży dokładnie pośrodku linii. align="bottom" – wyrównuje dolną krawędź obrazu względem dolnej krawędzi linii (domyślny).

Przykład align="top"

Przykład align="middle"

Przykład align="bottom"

Obraz otoczony tekstem Obraz umieszczony w linii tekstu wygląda dobrze tylko wtedy, gdy długość tekstu nie przekracza tej jednej linii. Jeżeli wstawimy obraz do dłuższego fragmentu, składającego się z wielu linii, cały tekst (z wyjątkiem jednej linii) przesuwa się pod lub nad obraz.

Przykład

Atrybuty align="left" i align="right" Pierwsza z tych wartości, align="left", pozwala na ułożenie obrazu przy lewym marginesie strony, a align="right", jak można się domyślić, przy prawym. Ale to nie wszystko, bowiem użycie jednej z tych wartości powoduje także, że przestrzeń pomiędzy obrazem a przeciwnym marginesem może być wypełniona tekstem.

Przykład

Przykład

Atrybuty align="left" i align="right" Po ułożonym w ten sposób obrazie możemy wstawiać dowolne elementy HTML-a (akapity, listy, nagłówki, a nawet kolejne obrazy) i możemy być pewni, że każdy z nich znajdzie się pomiędzy nim a przeciwnym marginesem strony (możemy także umieścić obrazy przy obydwu marginesach, wtedy tekst znajdzie się pośrodku). Przeglądarka wypełnia całą przestrzeń aż do dolnej krawędzi obrazu, a następnie kontynuuje wyświetlanie tekstu pod nim.

Przykład

Przerwa w otaczaniu obrazu tekstem Może się zdarzyć, że zechcemy umieścić obok obrazka tylko kilka zdań, a nowy wątek tekstu rozpocząć pod spodem. Zwyczajne przełamanie linii nie zadziała w takim przypadku poprawnie, tekst zostanie wprawdzie wyświetlony od nowej linii, ale wciąż obok a nie pod obrazem. Nie pomoże także wstawienie nowego paragrafu, jego treść będzie się ciągle znajdowała obok rysunku.

Przerwa w otaczaniu obrazu tekstem Aby przerwać funkcję otaczania obrazu przez tekst, musimy użyć znacznika podziału linii <br> z atrybutem clear. Powoduje on, że nowa linia rozpoczyna się dopiero pod obrazem a więc w miejscu, gdzie przy lewym marginesie nic już nie ma (margines jest wolny). Atrybut clear może przyjmować jedną z trzech wartości: left – nowa linia rozpoczyna się od miejsca, gdzie wolny jest lewy margines (dotyczy obrazów ułożonych po lewej stronie), right – nowa linia rozpoczyna się od miejsca, gdzie wolny jest prawy margines (dotyczy obrazów ułożonych po prawej stronie), all – nowa linia rozpoczyna się od miejsca, gdzie obydwa marginesy są wolne.

Przykład

Określanie odległości obrazu od tekstu Mając możliwość umieszczania tekstu wokół obrazu, możemy również zechcieć określić, w jakiej odległości tekst ten powinien się znaleźć. Pozwalają na to atrybuty hspace i vspace. Wartości obydwu podaje się w pikselach, przy czym: vspace - pozwala na kontrolę odległości tekstu od górnej i dolnej krawędzi obrazu, hspace – określa odległość z prawej i lewej strony.

Przykład