HTML 5 Technologie Informacyjne Literatura:

Slides:



Advertisements
Podobne prezentacje
Tworzenie stron internetowych www World Wide Web
Advertisements

języka hipertekstowego
Xhtml 1.0 Grzegorz Getka.
Tworzenie stron internetowych www World Wide Web
HTML Hyper Text Markup Language komputerowe Esperanto cz. II Obiekty podstawowe na stronach.
Lekcja 1 Składnia języka XHTML
Treści multimedialne - kodowanie, przetwarzanie, prezentacjaOdtwarzanie treści multimedialnych Andrzej Majkowski informatyka +
Kaskadowe arkusze stylów CSS. Reguła CSS – definiuje sposób formatowania elementów na stronie WWW Części składowe reguły CSS selektor{ właściwość: wartość;
Wykład 4 Informatyka MPDI sem.3 HTML cd. Arkusze stylów - CSS.
Tworzenie odwołania zewnętrznego (łącza) do zakresu komórek w innym skoroszycie Możliwości efektywnego stosowania odwołań zewnętrznych Odwołania zewnętrzne.
HTML Witamy w wirtualnym języku HTML ostatni następny.
Stężenia Określają wzajemne ilości substancji wymieszanych ze sobą. Gdy substancje tworzą jednolite fazy to nazywa się je roztworami (np. roztwór cukru.
PRACA Z APLIKACJAMI SYSTEM PRZEMIESZCZANIA oraz NADZORU WYROBÓW AKCYZOWYCH EMCS PL 1.
Wyszukiwanie informacji w Internecie. Czym jest wyszukiwarka? INTERNET ZASOBY ZAINDEKSOWANE PRZEZ WYSZUKIWARKI Wyszukiwarka to mechanizm, który za pomocą.
Zasady tworzenia prezentacji multimedialnych Autor: Switek Marian.
Zasady tworzenia prezentacji multimedialnych I. Główne zasady: prezentacja multimedialna powinna być ilustracją (uzupełnieniem) treści prezentowanych.
Poczta elektroniczna – e- mail Gmail zakładanie konta. Wysyłanie wiadomości.
Literary Reference Center Przewodnik
Jeśli chcesz przejść do konkretnego zagadnienia, wybierz je z listy: Dopisanie narzędzia Modyfikacja narzędzia Usunięcia narzędzia Lokalizacja domyślna.
Porównywarki cen leków w Polsce i na świecie. Porównywarki w Polsce.
Standardy de facto zapisu georeferencji map o postaci rastrowej definicja georeferencji standard „World File” standard GeoTIFF.
Wyższa Szkoła Informatyki i Zarządzania w Bielsku-Białej Wydział Informatyki Kierunek: Informatyka Specjalność: Systemy Informatyczne PRACA DYPLOMOWA INŻYNIERSKA.
WYKŁAD 6 Regionalizacja 1. Regionalizm a regionalizacja 2 Proces wyodrębniania regionów nazywany jest regionalizacją, w odróżnieniu od regionalizmu, który.
Microsoft PowerPoint. Metodyka „dobrej” prezentacji.
Python. Języki Programistyczne Microcode Machine code Assembly Language (symboliczna reprezentacja machine code) Low-level Programming Language (FORTRAN,
Kaskadowe arkusze stylów CSS - Cascading Style Sheets.
Definiowanie i planowanie zadań typu P 1.  Planowanie zadań typu P  Zadania typu P to zadania unikalne służące zwykle dokonaniu jednorazowej, konkretnej.
Magdalena Garlińska Generator wniosków o dofinansowanie Program INNOCHEM.
Urządzenia i technologie mobilne. Tablet Mobilny komputer większy niż telefon komórkowy, którego główną właściwością jest posiadanie dużego ekranu z zastosowaną.
Język HTML Justyna Rychel. Język HTML jest obecnie szeroko wykorzystywany do tworzenia stron internetowych. Skrót pochodzi od angielskiego „HyperText.
Projektowanie prezentacji multimedialnych Piotr Rakowski Gliwice 2006.
MS WORD 2010.
Tworzenie stron internetowych
Innowacja pedagogiczna „Pasja programowania”
Zasady tworzenia prezentacji multimedialnej
Dział ds. Osób Niepełnosprawnych
Komunikacja ze szkołą i nauczycielami - dziennik elektroniczny
Zasady transmisji w sieciach TCP/IP
Schematy blokowe.
System wspomagania decyzji DSS do wyznaczania matematycznego modelu zmiennej nieobserwowalnej dr inż. Tomasz Janiczek.
Podstawowe polecenia systemu
Full Text Finder Przegląd Publication Finder
Microsoft® Office SharePoint® Server 2007 — szkolenie
Quick Tips Tutorial Jak uzyskać dostęp do raportów EBSCOhost i EBSCO Discovery Service w EBSCOadmin support.ebsco.com.
Budowa, typologia, funkcjonalność
Przewodnik Udoskonalanie listy wyników w wyszukiwarce naukowej
Wstęp do Informatyki - Wykład 5
HTML HTML -HyperText Markup Language – hipertekstowy język znaczników, obecnie szeroko wykorzystywany do tworzenia stron internetowych.
Technologie internetowe Zofia Kruczkiewicz
Arkusz stylów CSS Cascading Style Sheet.
PODSTAWY TWORZENIA STRON WWW W HTML’u
Podstawy języka HTML.
Jak dostosować witrynę internetową usługi Microsoft SharePoint Online
Jak korzystać z usługi Video s i Raportu Kontaktów
Broszura firmy To miejsce jest doskonałe na określenie misji firmy
Damian Urbańczyk xHTML Tworzenie stylów CSS.
Podstawy informatyki Zygfryd Głowacz.
temat stwierdzenie Grafika SmartArt z obrazami na czerwonym tle
SKJ Serwer WWW Michail Mokkas.
Dodatek – Technologie internetowe
Proste obliczenia w arkuszu kalkulacyjnym
Tytuł prezentacji szkoleniowej
POZNAJEMY PULPIT Opracowanie: mgr Barbara Benisz SP nr 20 w Rybniku
Język C++ Preprocesor Łukasz Sztangret Katedra Informatyki Stosowanej i Modelowania Prezentacja przygotowana w oparciu o materiały Danuty Szeligi i Pawła.
Współrzędne Stosowanie procedur (pomocników)
Program na dziś Wprowadzenie Logika prezentacji i artykułu
Najważniejsze informacje dotyczące programu Sway.
Najważniejsze operacje graficzne w programie GIMP
Platforma LearningApps
Tworzenie dokumentu HTML
Zapis prezentacji:

HTML 5 Technologie Informacyjne Literatura: HTML i CSS. Zaprojektuj i zbuduj witrynę WWW, Duckett Jon, Wyd.Helion, 2014 http://www.w3schools.com

HTML HTML (HyperText Markup Language) – hipertekstowy język znaczników wykorzystywany do tworzenia stron internetowych. Pozwala opisać strukturę informacji zawartych w dokumencie nadając znaczenie poszczególnym fragmentom tekstu (formując linki, nagłówki, akapity, listy, itp.) oraz osadzić w tekście dodatkowe obiekty np. statyczne grafiki, interaktywne formularze, dynamiczne animacje.

HTML <!DOCTYPE html> <html> <head> <title>dzień hutnika</title> <meta name="author" content="monika pernach"> <meta name="description" content="dzień˝ hutnika"> <meta name="keywords" content="dzień hutnika, metalurgia, sesja naukowa"> <meta name="copyright" content="monika pernach"> <meta name="language" content="pl"> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> <link rel="stylesheet" href="style.css" type="text/css"/> </head> <body> ............ treść strony </body> </html> <!DOCTYPE> definiuje typ dokumentu, informuje przeglądarkę, z którą wersją języka html ma ona do czynienia. <!doctype>

HTML znaczniki <html> informuje, że zawartość odczytywanego pliku to kod, napisany w html‑u <head> wyznacza nagłówek strony <body> zawiera treść strony <head> <title> definiuje tytuł dokumentu, który będzie wyświetlany na pasku tytułu przeglądarki. <meta> w elemencie meta umieszczane są opisy i słowa kluczowe wykorzystywane przez wyszukiwarki. <meta name=”author|description|keywords|generator|revised|inny” content=„tekst”> <meta http-equiv=”content-type|expires|refresh|set-cookie” content=„akcja”> <link> określa relację pomiędzy dwoma dokumentami. <script> umożliwia umieszczenie w dokumencie skryptu <style> definiuje styl w dokumencie. <style type=”text/css|text/javascript” </head> <head>

Elementy usunięte z html 5 Removed Element Use Instead <acronym> <abbr> <applet> <object> <basefont> CSS <big> <center> <dir> <ul> <font> <frame>   <frameset> <noframes> <strike> CSS, <s>, or <del> <tt>

HTML Elementy dodane w html 5 Tag Description <article> Określa sekcję reprezentującą pojedyczną część serwisu (np. artykuł) <aside> Dodatkowa, poboczna treść w stosunku do artykułu <bdi> Oznaczenie dla fragmentu tekstu zapisanego w formacie dwukierunkowym <details> Definiuje kontrolkę prezentującą dodatkowe informacje <dialog> Definiuje okno <figcaption> Opis lub legenda elementu znacznika figure <figure> Określa ilustrację i jej zawartość <footer> Określa stopkę dla elementu, do którego się odnosi <header> Określa nagłówek dla elementu, do którego się odnosi <main> Defines the main content of a document <mark> Uwydatnienie tekstu <nav> Sekcja odsyłaczy nawigacyjnych do innych stron lub w ramach dokumentu <progress> Postęp wykonywania procesu lub zadania <ruby> Adnotacja RUBY <section> Sekcja dokumentu <summary> Podsumowanie, etykieta lub legendla dla elementu details <time> Oznacza datę i/lub czas/time <wbr> Łamanie wiersza

HTML Elementy dodane w html 5 Nowe znaczniki obsługi treści multimedialnej Znacznik Opis <audio> Znacznik odpowiadający strumieniowi audio <video> Znacznik osadzania materiału filmowego <source> Umożliwia definiowanie kilku różnych źródeł dla elementów (znaczników) audio/video <embed> Osadzenie zewnętrznej zawartości (np. plug-in) <track> Dodatkowa ścieżka dla audio lub video (np. napisy) Nowe znaczniki obsługi formularzy Znacznik Opis <datalist> Definiuje zestaw elementów option z domyślnymi własnościami <keygen> Kontrolka do generowania pary kluczów publicznego i prywatnego <output> Przedstawia wynik obliczeń Nowe znacznik do dynamicznej grafiki Znacznik Opis <canvas> Obszar zależny od rozdzielczości, służący do wyświetlania dynamicznej grafiki

HTML formatowanie tekstu nagłówki i akapity <h1> tekst </h1> - nagłówek <p> tekst </p> - akapit <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6>

HTML formatowanie tekstu style fizyczne <b> pogrubienie <i> kursywa <u> podkreślenie <s> przekreślenie <sub> indeks dolny <sup> indeks górny <small> czcionka mniejsza od pozostałych <pre> tekst preformatowany - każda spacja, znajdująca się pomiędzy znacznikami <pre> i </pre>, zostanie wyświetlona. standardowo dodatkowe znaki spacji, tabulacji, nowej linii są ignorowane. <hr> linia pozioma atrybuty: size grubość linii w pikselach width długość linii w pikselach color kolor wypełnienia linii align położenie linii w poziomie noshade brak cienia <br> łamanie linii <hr size="2”> <hr width=”10%”>

HTML formatowanie tekstu położenie tekstu align atrybut definiuje wyrównanie względem innych elementów wartości: right do prawej strony left do lewej strony, wartość domyślna center wyśrodkowanie justify do prawej i do lewej strony <center> wyśrodkowanie tekstu Szerokość optymalna kolumny zbitego tekstu to 8 –10 cm, tekst do lewej lepiej, tak jak piszemy, justowanie nie dla wąskich kolumn) <h1 align=center>agh</h1> <p align=right>kolejny wykład</p>

CZCIONKI SZERYFOWE, BEZSZERYFOWE HTML formatowanie tekstu czcionki Formatowanie czcionki wprowadza się za pomocą CSS. CZCIONKI SZERYFOWE, BEZSZERYFOWE CZCIONKI SZERYFOWE (szybciej czytamy! Jeśli czytamy), BEZSZERYFOWE, MONOSPACED - stała szerokość znaków, CURSIVE jak pismo odręczne, FANTASY – ozdobne, ograniczyć różnorodność czcionek na stronie, pangramy – zdania zawierające wszystkie litery alfabetu, nie wszystkie fonty mogą być zainstalowane – tel.komórkowe, deklaracja font family w css dla różnych przeglądarek, popularność: arial, verdana, helvetica, times, wielkość czcionki – 8 do 10 punktów – różnie dla różnych czcionek, kolor biała na czarnym (odwrotnie obniżenie czytelności 10-40%, jeszcze gorzej przy szeryfach), color contrast analyser – testowanie kolorystyki strony, kursywa źle (męcząca), bold – super, podkreślenie - żle)

HTML listy <li> definiuje pozycje listy <ol> lista numerowana, oznaczana kolejnymi liczbami <ul> lista wypunktowana, oznaczona kropkami lub innymi symbolami <dl> lista definicji <ol> <ol> - lista numerowana atrybut type, który umożliwia wybór jednego z pięciu możliwych schematów numerowania: "1" standardowa numeracja za pomocą liczebników arabskich "a" numeracja za pomocą kolejnych, małych liter alfabetu „A„ numeracja za pomocą kolejnych, wielkich liter alfabetu "i„ numeracja za pomocą kolejnych liczb alfabetu rzymskiego, zapisanych małymi literami „I„ numeracja za pomocą kolejnych liczb alfabetu rzymskiego, zapisanych wielkimi literami atrybut start, pozwala na określenie, od jakiej liczby lub litery należy rozpocząć numerację. <ol> <li>AGH <li>UJ <li>PK </ol> <ol type="I" start="6"> <li>Czerwiec</li> <li>Lipiec</li> </ol>

HTML listy <ul> <ul> - lista wypunktowana atrybut type, który umożliwia wybór jednego z trzech możliwych schematów punktowania: "disc„ kółko lub kropka "square„ kwadrat "circle„ większość przeglądarek wyświetla ”disc” jako wypełnione kółko <ul type=„square"> <li>poniedziałek</li> <li>wtorek</li> <li>środa</li> </ul> <ul> <li>wiosna</li> <li>lato</li> </ul>

HTML listy <dl> <dl> - lista definicji Każda część elementu listy definicji posiada swój znacznik: <DT> oznacza pojęcie (definition term), a <DD> definicję <dl> <dt>freeware</dt> <dd>licencja oprogramowania umożliwiająca darmowe rozprowadzanie aplikacji bez ujawnienia kodu źródłowego. </dd> <dt>shareware</dt> <dd>rodzaj licencji programu komputerowego, który jest rozpowszechniany bez opłat, ale z pewnymi ograniczeniami</dd> </dl>

HTML listy listy zagnieżdżone Sposób na odzwierciedlenie struktur hierarchicznych, np. spisu treści. Wystarczy wstawić całą listę jako element innej. Lista zagnieżdżona jest wyświetlana z odpowiednim wcięciem. <ul> <li>styczeń</li> <li>luty</li> <li>poniedziałek</li> <li>wtorek</li> <li>środa</li> </ul> <li>marzec</li>

HTML <!-- --> komentarz <!-- dowolna treść-- > - komentarz <!-- --> <!-- dowolna treść-- > - komentarz Tekst zawarty w komentarzach nie pojawia się na ekranie, ponieważ jest ignorowany przez przeglądarkę

tworzenie hiperpołączeń HTML tworzenie hiperpołączeń <a> <a> - odsyłacz, służy do tworzenia połączeń. Przykładowy atrybut: href – definiuje adres strony lub miejsca, do których następuje odwołanie (Hypertext REFerence) ścieżka względna - określa położenie pliku z punktu widzenia bieżącej pozycji w drzewie katalogów. ścieżka bezwzględna - tworzona jest w oparciu o bezwzględną pozycję pliku w drzewie katalogów. <a href="../../u1/lemay/file.html”> - ścieżka bezwzględna, (..) zawsze wskazują na katalog znajdujący się bezpośrednio powyżej bieżącego. <a href="/u1/lemay/file.html”> - ścieżka względna

HTML tabele <table> i inne <table> definicja tabeli <tr> wiersz tabeli <td> komórka tabeli <th> komórka nagłówkowa Formatowanie tabeli wprowadza się za pomocą CSS.

HTML grafika obraz i tło <img> - znacznik służy do wyświetlania obrazów atrybuty: src adres obrazka alt tekst alternatywny; pojawia się, jeśli obrazek nie mógł być wyświetlony width szerokość height wysokość <img src=”../obrazek.jpg" alt="obrazek" width=”100%” height=”50%” align=”top”> Atrybuty body takie jak kolor tła, lub tło w postaci obrazka definiuje się w CSS.