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.