<meta http-equiv="content-type" content="text/html; charset=iso ">

Podobne dokumenty
rk HTML 4 a 5 różnice

HTML (HyperText Markup Language) hipertekstowy język znaczników

Akademia Techniczno-Humanistyczna w Bielsku-Białej

Dokument hipertekstowy

2 Podstawy tworzenia stron internetowych

Struktura języka HTML ZNACZNIKI. Oto bardzo prosta strona WWW wyświetlona w przeglądarce: A tak wygląda kod źródłowy takiej strony:

Format HTML. Wybrane działy Informatyki Stosowanej. Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty

PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński

Budowa dokumentu HTML 5

Programowanie WEB PODSTAWY HTML

Programowanie internetowe

używane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów

Tworzenie Stron Internetowych. odcinek 5

Hyper Text Markup Language

XHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania.

Zawartość specyfikacji:

O stronach www, html itp..

Multimedia w HTML5. Statyczne witryny internetowe 2TI/TOR. Marek Kwiatkowski

Systemy internetowe HTML + CSS - dodatki

Podstawy JavaScript ćwiczenia

Język (X)HTML. Podstawowe znaczniki i parametry. dr Konrad Dominas / UAM

HTML, CSS i JavaScript / Laura Lemay, Rafe Colburn, Jennifer Kyrnin. Gliwice, cop Spis treści

HTML (HyperText Markup Language)

Źródła. cript/1.5/reference/ Ruby on Rails: AJAX: ssays/archives/

Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk

PROJEKTOWANIE STRON WWW W4

e r T i H M r e n L T n

HTML5 Nowe znaczniki header nav article section aside footer

Pierwsza strona internetowa

TECHNIKI WWW (WFAIS.IF-C125) (zajęcia r.)

Wykład 1: HTML (XHTML) Michał Drabik

AUDYT DOSTĘPNOŚCI STRONY INTERNETOWEJ

Witryna internetowa. Należy unikać w nazwach plików używania polskich znaków.

Podstawy (X)HTML i CSS

XHTML2 i HTML5 Przyszłość WWW oparta o nowe standardy sieciowe HTML5 i XHTML2

Specyfikacja techniczna dot. mailingów HTML

Wybrane znaczniki HTML

Tworzenie Stron Internetowych. odcinek 5

Young Programmer: HTML+PHP. Dr inż. Małgorzata Janik, Zajęcia #2

XHTML Budowa strony WWW

LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH. PODSTAWY JĘZYKA HTML (HyperText Markup Language)

Języki programowania wysokiego poziomu. HTML cz.1.

2. Prezentacja wizualna

ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści

Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np. <BR>

Przedmiot: Grafika komputerowa i projektowanie stron WWW

Elementy podstawowe. Dodatek: Elementy języków HTML i XHTML. Dodał Administrator piątek, 23 lipiec :15. Element. Przykład. Opis. <?xml?

Systemy internetowe HTML

APLIKACJE INTERNETOWE 1 HTML - STRUKTURA STRONY INTERNETOWEJ

Zaawansowana Pracownia Komputerowa - Ćwiczenia. Krzysztof Miernik

Sierpień 2015 rozwiązanie plik: index.htlm

Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk

Nazwa implementacji: CSS i box model. Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie.

Technologie Informacyjne

STRONY INTERNETOWE mgr inż. Adrian Zapała

HTML 5 język wykorzystywany do tworzenia i prezentowania stron internetowych www. Jest

Strony WWW - podstawy języka HTML

Wprowadzenie do HTML, CSS, JavaScript, PHP. Kurs

Tworzenie stron internetowych w oparciu o język HTML

2. Projektowanie stron WWW podstawowe informacje

FORMULARZE Formularz ma formę ankiety, którą można wypełnić na stronie. Taki formularz może być np. przesłany pocztą elektroniczną .

Wykład 2 TINT. XHTML tabele i ramki. Zofia Kruczkiewicz

za pomocą: definiujemy:

Laboratorium 1 Wprowadzenie do PHP

Elementarz HTML i CSS

Projekty z Technologii Informacyjnych

Innowacja pedagogiczna Pasja programowania ZESPÓŁ SZKÓŁ W CHOROSZCZY

Nowoczesne Technologie WWW

Podstawy tworzenia stron internetowych

Celem ćwiczenia jest zapoznanie z językiem HTML i JavaScript, zasadami tworzenia stron WWW i umieszczania na nich skryptów w języku JavaScript.

Specyfikacja mailingu GG Network

A P L I K A C J E I N T E R N E T O W E KONSPEKT nr 3 (DIV, galeria, formularze)

Atrybuty znaczników HTML

Lab.1. Praca z tekstem: stosowanie arkuszy stylów w dokumentach OO oraz HTML/CSS

Laboratorium 1: Szablon strony w HTML5

DOM (Document Object Model)

Aplikacje WWW - laboratorium

Wykład 03 JavaScript. Michał Drabik

Kaskadowe arkusze stylów (CSS)

Mailingi HTML. Specyfikacja techniczna

Jak projektować dostępne strony

Wordpress: Joomla! Drupal.

Tworzenie stron internetowych w kodzie HTML Cz 7

I. Dlaczego standardy kodowania mailingów są istotne?

Aplikacje WWW - laboratorium

Tworzenie stron internetowych RAMKI

TWORZENIE STRON WWW. Zasady opisu stron w języku HTML:

WYMAGANIA EDUKACYJNE. Witryny i Aplikacje Internetowe klasa I

Bazy danych. dr Radosław Matusik. radmat

Zakres treści Czas. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów

Tworzenie stron internetowych w kodzie HTML Cz 5

Aplikacje internetowe

Wymagania edukacyjne: Statyczne witryny internetowe (na podstawie programu nr )

Język HTML i podstawy CSS

Podstawy technologii WWW

Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk

HTML jak zrobić prostą stronę www

Pomoc dla systemu WordPress

Zajęcia 4 - Wprowadzenie do Javascript

Transkrypt:

Podstawy HTML Wstęp Podstawowa struktura pliku html: <!doctype html> <html lang="pl" dir="ltr"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>tytuł strony</title> </head> <body> <h1>nagłówek pierwszego poziomu</h1> <p> Akapit (z ang. paragraph)<br /> i jeszcze trochę tekstu w następnym wierszu<br /> a to jest <a href="http://pl.wikipedia.org">link do Wikipedii</a>. </p> </body> </html> Kodowanie polskich znaków: Gdy strona będzie tylko w języku polskim to zalecane jest kodowanie ISO-8859-2. Natomiast gdy storna będzie w różnych językach to lepiej używać UTF-8. <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> Meta dane umieszczamy w nagłówku strony. Przykładowe informacje meta: <meta name="description" content="opis strony"> <meta name="keywords" content="html,css,xml,javascript"> <meta name="author" content="ania"> Inne informacje umieszczane w nagłówku strony: linki do arkuszy styli i skryptów wykorzystywanych na stronie link do grafiki favicon tytuł strony Podstawowe tagi W sekcji body umieszczamy treść strony. Należy pamiętać, że aby struktura pliku była zgodna, to każdy otwarty znacznik (tag) należy zamknąć. Znaczniki również nie mogą się przeplatać to znaczy, najpierw zamykamy znaczniki najpóźniej otwarte. Przykład: <b><div>ala ma kota</b></div> //źle <div><b>ala ma kota</b></div> //dobrze Również pewnych znaczników nie można umieszczać wewnątrz innych np. w znaczniku <a> nie może być znacznika <div>, natomiast odwrotne umieszczenie znaczników jest możliwe. Do sprawdzenia czy strona jest zgodna ze standardem służy strona: http://validator.w3.org/ Do znaczników (tagów) można również dodawać atrybuty. Dla poszczególnych znaczników są określone atrybuty które można używać. Natomiast do każdego znacznika w treści dokumentu możemy dodać atrybut klasy (class) i identyfikator (id). Klasy i identyfikatory są głównie wykorzystywane w stylach CSS, JavaScript i PHP do odwołania się do konkretnego elementu. Lista tagów: http://szablony.freeware.info.pl/tagi.html 1

Nowe elementy HTML5 UWAGA! Przeglądarka Internet Explorer do wersji 8.0 (włącznie) nie pozwala formatować nowych znaczników HTML5 za pomocą stylów CSS. Na szczęście znalazła się na to bardzo prosta rada :-) Wystarczy wstawić gdzieś w nagłówku dokumentu następujący kod: <script> document.createelement('article'); document.createelement('aside'); document.createelement('audio'); document.createelement('bdi'); document.createelement('canvas'); document.createelement('command'); document.createelement('datalist'); document.createelement('details'); document.createelement('dialog'); document.createelement('embed'); document.createelement('figcaption'); document.createelement('figure'); document.createelement('footer'); document.createelement('header'); document.createelement('hgroup'); document.createelement('keygen'); document.createelement('mark'); document.createelement('meter'); document.createelement('nav'); document.createelement('output'); document.createelement('progress'); document.createelement('rp'); document.createelement('rt'); document.createelement('ruby'); document.createelement('section'); document.createelement('source'); document.createelement('summary'); document.createelement('time'); document.createelement('track'); document.createelement('wbr'); document.createelement('video'); </script> Ponadto przeglądarki które nie obsługują nowych znaczników, zwykle próbują wyświetlać je w linii. Nie jest to zgodne z domyślnym sposobem prezentacji części z tych elementów, określonym w specyfikacji. Aby ujednolicić sposób wyświetlania elementów HTML5 w starszych przeglądarkach, powinniśmy dodatkowo wstawić do dokumentu specjalny arkusz stylów: article, aside, details, dialog, figcaption, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, embed, keygen, meter, progress, video { display: inline-block; } [hidden] { display: none; } Sekcje Sekcje to odrębne tematycznie fragmenty treści na stronie. Można je porównać do rozdziałów w książce. Każda sekcja może mieć nagłówek (tytuł rozdziału) i stopkę (zawierającą informacje o autorze, prawach autorskich itp.). 2

W ramach znaczników przydatnych przy wstawianiu sekcji, wyróżnić możemy elementy, które fizycznie te sekcje tworzą (ang. sectioning elements) - są to: ARTICLE, ASIDE, NAV, SECTION. Definiują one w dokumencie zakres dla nagłówków (H1, H2, H3, H4, H5, H6, HGROUP) i stopek (FOOTER). SECTION - Ogólna sekcja dokumentu lub aplikacji. Może być użyta w połączeniu z elementami: H1, H2, H3, H4, H5, H6 - dla wskazania struktury dokumentu. ARTICLE - Niezależny kawałek treści dokumentu, jak np. wpis na blogu albo artykuł w gazecie. ASIDE - Kawałek treści, który tylko nieznacznie jest powiązany z resztą strony. HGROUP - Nagłówek sekcji. HEADER - Grupa wprowadzająca albo ułatwienia nawigacyjne. FOOTER - Stopka sekcji. Może zawierać informacje na temat autora, praw autorskich itp. NAV - Sekcja dokumentu przeznaczona na nawigację. Oprócz wymienionych tutaj znaczników, do elementów używanych przy wstawianiu sekcji zaliczamy również BODY. Nagłówki sekcji Jeżeli z kodu źródłowego strony usuniemy całą treść oprócz nagłówków wszystkich sekcji i podsekcji, powinniśmy otrzymać zagnieżdżoną listę w formie spisu treści dokumentu (ang. document outline). Nawet jeśli jawnie nie umieścimy spisu treści na stronie, taki domniemany spis nagłówków może być niezwykle przydatny dla czytelników serwisu. Osoby niewidome, korzystające z przeglądarki automatycznie tworzącej spisy z nagłówków, będą mogły przeskakiwać od razu do interesujących je sekcji dokumentu. Pozostali użytkownicy również na tym skorzystają, gdyż otrzymają dokument poukładany w logiczne części (w obszernym niepodzielonym na rozdziały tekście, trudno jest się połapać). Prawidłowo oznaczone nagłówki sekcji mają również pozytywny efekt, jeżeli chodzi o pozycję tak zbudowanej strony w wynikach wyszukiwarek internetowych. Dlatego warto o to szczególnie zadbać. Do nagłówków sekcji zaliczamy: H1, H2, H3, H4, H5, H6, HGROUP. Każda sekcja dokumentu ma co najwyżej jeden nagłówek, a sekcje nieposiadające znaczników nagłówków, otrzymują nagłówki niejawne - np. "Niezatytułowana sekcja". Oznacza to, że wstawienie nagłówka - nawet bez elementu fizycznie oznaczającego sekcję (ARTICLE, ASIDE, NAV, SECTION) - tworzy nową sekcję w sposób niejawny (jeśli poziom nagłówka jest przynajmniej tak samo ważny jak poprzedni) lub podsekcję (gdy nagłówek ma mniej ważny poziom). Poziom nagłówka, w obrębie elementów fizycznie tworzących sekcje, nie ma znaczenia. Jeżeli do dokumentu wstawimy dwa następujące po sobie elementy SECTION, z który pierwszy będzie miał np. nagłówek H2, a drugi H3, to w spisie treści dokumentu obie te sekcje i będą równorzędne. Oprócz elementów tworzących sekcje, wyróżniamy również tzw. korzenie sekcji. Nie tworzą one nowych sekcji w dokumencie, a cała ich zawartość (ewentualne podsekcje) nie wchodzą w skład głównego spisu treści. Każdy taki element może mieć jednak swój własny, odrębny spis treści. Korzeniami sekcji są: BLOCKQUOTE, BODY, DETAILS, FIELDSET, FIGURE, TD. Znaczniki grupujące Służą do grupowania innych elementów. FIGURE, FIGCAPTION - Niezależny kawałek w treści oraz jego [opcjonalny] podpis. Zwykle odwołania do niego występują w głównej części dokumentu. Oprócz wymienionych tutaj znaczników, do elementów grupujących zaliczamy również: P, HR, PRE, BLOCKQUOTE, OL, UL, LI, DL, DT, DD, DIV. Elementy osadzone 3

Osadzają w dokumencie treści multimedialne. VIDEO, AUDIO, SOURCE - Treść multimedialna. Udostępniają API, dzięki któremu możliwe jest oprogramowanie własnego interfejsu, jednak możliwe jest również skorzystanie z domyślnego, który zapewnia przeglądarka. Element SOURCE jest używany w połączeniu z tymi znacznikami, jeżeli ten sam materiał multimedialny jest dostępny w wielu formatach. TRACK - Dostarcza ścieżki tekstowe dla elementu VIDEO. EMBED - Treść generowana przez wtyczki przeglądarki. CANVAS - Używane do renderowania dynamicznej grafiki rastrowej w czasie wyświetlania strony - takiej jak wykresy lub gry. Oprócz wymienionych tutaj znaczników, do elementów osadzonych zaliczamy również: IMG, IFRAME, OBJECT, PARAM, MAP, AREA, MATH, SVG. Semantyka tekstu Wprowadzają znaczenie (semantykę) do objętego nimi fragmentu tekstu. MARK - Zaznacza lub uwydatnia tekst w jednym dokumencie, w celu odwołania się do niego w innym kontekście. TIME - Data i/lub czas. RUBY, RT, RP - Przypisy ruby - specjalne krótkie wstawki obok bazowego tekstu, używane zwykle w dokumentach wschodnioazjatyckich do wskazania wymowy lub wstawienia krótkiej adnotacji. W języku japońskim ta forma przypisów jest również nazywana furigana. BDI - Obejmuje tekst, odizolowany od otaczającej go zawartości dla celów dwukierunkowego formatowania tekstu. WBR - Możliwość przełamania linii tekstu. Oprócz wymienionych tutaj znaczników, do elementów semantyki tekstu zaliczamy również: A, EM, STRONG, SMALL, S, CITE, Q, DFN, ABBR, CODE, VAR, SAMP, KBD, SUB, SUP, I, B, U, BDO, SPAN, BR. Formularze Umożliwiają wstawienie na stronie interaktywnych formularzy, które po wypełnieniu przez użytkownika mogą zostać wysłane na serwer, poprzez e-mail lub obsłużone przez skrypty działające w przeglądarce. DATALIST - Tworzy listę rozwijaną (kombi) dla elementu INPUT. KEYGEN - Kontrolka do generowana pary kluczy kryptograficznych. OUTPUT - Pewien rodzaj danych wyjściowych, np. wynik obliczeń ze skryptu. PROGRESS - Stopień ukończenia zadania - np. pobierania albo w czasie wykonywania czasochłonnych operacji. METER - Wynik pomiaru - np. zapełnienie dysku. Oprócz wymienionych tutaj znaczników, do elementów formularzy zaliczamy również: FORM, FIELDSET, LEGEND, LABEL, INPUT, BUTTON, SELECT, OPTGROUP, OPTION, TEXTAREA. Pole INPUT Znany ze specyfikacji HTML 4.01 element INPUT, tworzy większość rodzajów kontrolek formularzy. O tym, jaki typ elementu zostanie wyświetlony na ekranie, decyduje wartość atrybutu type="...". W języku HTML5 wprowadzono wiele dodatkowych typów kontrolek dla znacznika INPUT. W przypadku kiedy przeglądarka nie będzie obsługiwać nowych typów kontrolek, na ekranie zostanie wyświetlone 4

zwykłe pole tekstowe (<input type="text">). Co prawda wtedy efekt końcowy nie będzie zgody z oczekiwaniami, ale przynajmniej nie ma obawy, że użytkownik w ogóle nie będzie w stanie prawidłowo wypełnić takiego formularza. Zrobi to, wpisując odpowiednią wartość ręcznie. Lista nowych typów elementu INPUT (wartości atrybutu type="..."): Tel - Numer telefonu Serach - Pole wyszukiwania (interpretuje: Chrome) url - Adres URL (Firefox, Opera, Chrome) emai - Adres poczty e-mail (Firefox, Opera, Chrome) datetime - Data i czas (Opera) date - Data (Opera, Chrome) month - Miesiąc (Opera) week - Tydzień w roku (Opera) time - Czas (Opera, Chrome) datetime-local - Data i czas lokalny (Opera) number - Liczba (Opera, Chrome) range - Przedział liczbowy (Opera, Chrome) color - Kolor (Opera, Chrome) Elementy interaktywne Pozwalają wprowadzić na stronie interaktywność z użytkownikiem. DETAILS, SUMMARY - Dodatkowe informacje albo kontrolki, które użytkownik może zobaczyć. Element SUMMARY dostarcza ich streszczenie, legendę lub podpis. COMMAND - Komenda, którą może wywołać użytkownik. DIALOG - Część aplikacji w postaci okna dialogowego. Oprócz wymienionych tutaj znaczników, do elementów interaktywnych zaliczamy również MENU Elementy usunięte w HTML5 <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <strike>, <tt> Przykład (plik: index.html) <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="description" content="opis strony"> <meta name="keywords" content="html,css,xml,javascript"> <meta name="author" content="ania"> <title>tytuł strony</title> </head> <body> <h1>nagłówek pierwszego poziomu</h1> <p> Akapit (z ang. paragraph)<br /> i jeszcze trochę tekstu w następnym wierszu<br /> a to jest <a href="strona2.html">link do innej strony</a>. 5

</p> <img src="images/obrazek1.jpg" alt="tekst gdy nie ma obrazka" title="tytuł obrazka"/> <br/> Nowa linia<br/> <div> <p>a tutaj znajduje się div, w którym możemy dodawać inne elementy np. taki p czy <span>span</span></p> <p>drugi akapit</p> </div> Prosta tabela<br/> <table> <tr> <th>nagłówek tabeli</th> <th>drugi nagłówek</th> </tr> <tr> <td>komórka tabeli w drugim wierszu i w pierwszej kolumnie</td> <td>lorem ipsum</td> </tr> <tr> <td>lorem ipsum</td> <td>lorem ipsum</td> </tr> </table> </body> </html> Zadanie Stworzenie 5 stron w HTML5 na wybrany temat z menu (linkami) aby można było przemieszczać się pomiędzy tymi stronami. Elementy które powinny się znaleźć na tych stronach: formatowanie tekstu (pogrubienia, kursywy), nagłówki (h1-h6), wyrównanie tekstu, paragrafy wstawienie obrazków linki (do zewnętrznych stron) link na obrazku tabelka (zformatowana) formularz kontaktowy 6