<meta http-equiv="content-type" content="text/html; charset=iso ">
|
|
|
- Jadwiga Borowska
- 6 lat temu
- Przeglądów:
Transkrypt
1 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=" do Wikipedii</a>. </p> </body> </html> Kodowanie polskich znaków: Gdy strona będzie tylko w języku polskim to zalecane jest kodowanie ISO 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 "> <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: 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: 1
2 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
3 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
4 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 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
5 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 (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
6 </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
rk HTML 4 a 5 różnice
rk HTML 4 a 5 różnice kompatybilność Pierwszym dużym plusem języka HTML 5 jest to, że jest zdefiniowany w sposób umożliwiający kompatybilność wstecz. Składnia Przykład dokumentu podporządkowującego się
HTML (HyperText Markup Language) hipertekstowy język znaczników
HTML (HyperText Markup Language) hipertekstowy język znaczników Struktura dokumentu tytuł strony
Akademia Techniczno-Humanistyczna w Bielsku-Białej
Akademia Techniczno-Humanistyczna w Bielsku-Białej Wydział Budowy Maszyn i Informatyki Laboratorium z sieci komputerowych Ćwiczenie numer: 8 Temat ćwiczenia: Tworzenie stron WWW (HTML, skrypty CSS). 1.
Dokument hipertekstowy
Dokument hipertekstowy Laboratorium 3 Struktura semantyczna i formularze mgr inż. Krzysztof Wróbel Katedra Lingwistyki Komputerowej Design stackoverflow.com Design coursesweb.net Design accessibleculture.org
2 Podstawy tworzenia stron internetowych
2 Podstawy tworzenia stron internetowych 2.1. HTML5 i struktura dokumentu Podstawą działania wszystkich stron internetowych jest język HTML (Hypertext Markup Language) hipertekstowy język znaczników. Dokument
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:
Struktura języka HTML ZNACZNIKI Oto bardzo prosta strona WWW wyświetlona w przeglądarce: Rysunek 1: Przykładowa strona wyświetlona w przeglądarce A tak wygląda kod źródłowy takiej strony: Rysunek 2: Kod
Format HTML. Wybrane działy Informatyki Stosowanej. Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty
Wybrane działy Informatyki Stosowanej Format HTML Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty dr hab. inż. Andrzej Czerepicki 2019 Definicja HTML HyperText Markup Language
PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński
PROGRAMOWANIE HTML W składni języka HTML wykorzystuje się charakterystyczne znaczniki. Każdy z nich zaczyna się i kończy ostrokątnym nawiasem a pomiędzy nimi znajduje się wyrażenie html. Rozróżniamy znaczniki
Budowa dokumentu HTML 5
Podstawy HTML 5 i CSS Budowa dokumentu HTML 5 Na dokument HTML składają się deklaracje: typu dokumentu DTD, nagłówka oraz treści strony. Deklaracja dokumentu DTD określa w jaki sposób przeglądarka reaguje
Programowanie WEB PODSTAWY HTML
Programowanie WEB PODSTAWY HTML Najprostsza strona HTML tytuł strony To jest moja pierwsza strona WWW. tytuł strony
Programowanie internetowe
Programowanie internetowe Wykład 1 HTML mgr inż. Michał Wojtera email: mwojtera@dmcs.pl Plan wykładu Organizacja zajęć Zakres przedmiotu Literatura Zawartość wykładu Wprowadzenie AMP / LAMP Podstawy HTML
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
Tworzenie Stron Internetowych. odcinek 5
Tworzenie Stron Internetowych odcinek 5 Nagłówek zawiera podstawowe informacje o dokumencie, takie jak: tytuł strony (obowiązkowy) metainformacje/metadane (obowiązkowa deklaracja
Hyper Text Markup Language
Podstawy projektowania dokumentów WWW Język znaczników HTML Hyper Text Markup Language Język słuŝący do zapisu dokumentów WWW. Opisuje wygląd dokumentu i definiuje łączniki hipertekstowe, pozwalające na
XHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania.
XHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania. Reformuje on znane zasady języka HTML 4 w taki sposób, aby były zgodne z XML (HTML przetłumaczony na XML).
Zawartość specyfikacji:
Zawartość specyfikacji: Wielkość, waga i kodowanie Umieszczanie obrazków w kreacji Elementy niedopuszczalne Nazewnictwo plików Stopka mailingu Nie spełniam wymagań pracodawcy Waga, wielkość i kodowanie
O stronach www, html itp..
O stronach www, html itp.. Prosty wstęp do podstawowych technik spotykanych w internecie 09.01.2015 M. Rad Plan wykładu Html Przykład Strona www Xhtml Css Php Js HTML HTML - (ang. HyperText Markup Language)
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
Systemy internetowe HTML + CSS - dodatki
Systemy internetowe HTML + CSS - dodatki West Pomeranian University of Technology, Szczecin; Faculty of Computer Science HTML 5 Sekcja to tematyczna grupa treści (dane kontaktowe, materiały dydaktyczne,
Podstawy JavaScript ćwiczenia Kontekst: Język (X)HTML. Podstawowe znaczniki i parametry. dr Konrad Dominas / UAM
Język (X)HTML Podstawowe znaczniki i parametry Szablon dokumentu (X)HTML
HTML, CSS i JavaScript / Laura Lemay, Rafe Colburn, Jennifer Kyrnin. Gliwice, cop Spis treści
HTML, CSS i JavaScript / Laura Lemay, Rafe Colburn, Jennifer Kyrnin. Gliwice, cop. 2017 Spis treści O autorach 11 Wprowadzenie 13 CZĘŚĆ I ROZPOCZĘCIE PRACY Lekcja 1. Co oznacza publikowanie treści w sieci
HTML (HyperText Markup Language)
HTML (HyperText Markup Language) Struktura dokumentu tytuł strony sekcja nagłówka Tutaj wpisujemy
Źródła. cript/1.5/reference/ Ruby on Rails: http://www.rubyonrails.org/ AJAX: http://www.adaptivepath.com/publications/e ssays/archives/000385.
Źródła CSS: http://www.csszengarden.com/ XHTML: http://www.xhtml.org/ XML: http://www.w3.org/xml/ PHP: http://www.php.net/ JavaScript: http://devedgetemp.mozilla.org/library/manuals/2000/javas cript/1.5/reference/
Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk
Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery Łukasz Bartczuk Moduł 4 HTML 5 i CSS 3.0 Agenda Co nowego w HTML 5? Nowe elementy HTML 5 Nowe elementy w formularzach HTML
PROJEKTOWANIE STRON WWW W4
Studia Podyplomowe Grafika komputerowa i Techniki Multimedialne, 2015, semestr II, dr inż. Robert Banasiak Projektowanie Stron WWW dr inż. Robert Banasiak PROJEKTOWANIE STRON WWW W4 ODNOŚNIKI PSEUDOKLASY
e r T i H M r e n L T n
s e r T t w o i H M r e o T n w z n L Podstawy 1. Nawigacja na stronie jest niezwykle istotna, powinna być możliwie jak najprostsza. Pamiętajmy, że im mniej kroków do celu tym lepiej. 2. Projekt graficzny
HTML5 Nowe znaczniki header nav article section aside footer
Specyfikacja HTML5 wprowadza nowe znaczniki pozwalające w łatwy i intuicyjny sposób budować szkielet strony, który przez zmniejszenie ilości kodu jest czytelniejszy i łatwiejszy w utrzymaniu, pozwala poza
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
TECHNIKI WWW (WFAIS.IF-C125) (zajęcia r.)
TECHNIKI WWW (WFAIS.IF-C125) (zajęcia 12.10.2016 r.) Zajęcia: grupa 2: środa 12:00-13:30 Prowadzący: Dr inż. Marcin Zieliński marcin.zielinski@uj.edu.pl pokój: B-2-33 (Zakład Fizyki Jądrowej) konsultacje:
Wykład 1: HTML (XHTML) Michał Drabik
Wykład 1: HTML (XHTML) Michał Drabik 1 Czyli to wszystko co trzeba wiedzieć aby zacząć tworzyć strony internetowe. 2 HTML 4 HTML = HyperText Markup Language Hipertekstowy język znaczników umożliwiający
AUDYT DOSTĘPNOŚCI STRONY INTERNETOWEJ
Poznań, 2012-10-04 AUDYT DOSTĘPNOŚCI STRONY INTERNETOWEJ NAZWA ADRES STRONY ILOŚĆ BŁĘDÓW WCAG 33 ILOŚĆ OSTRZEŻEŃ WCAG 3 TYP DOKUMENTU UŻYTY FORMAT (X)HTML JĘZYK OWANIE STRONY Urząd Marszałkowski Województwa
Witryna internetowa. Należy unikać w nazwach plików używania polskich znaków.
HTML Wstęp Język HTML jest uniwersalnym jezykiem wykorzystywanym przy tworzeniu stron internetowych, rozpoznawanym przez wszystkie przeglądarki internetowe niezależnie od producenta. Składa on się z elementów
Podstawy (X)HTML i CSS
Inżynierskie podejście do budowania stron WWW momat@man.poznan.pl 2005-04-11 1 Hyper Text Markup Language Standardy W3C Przegląd znaczników Przegląd znaczników XHTML 2 Cascading Style Sheets Łączenie z
XHTML2 i HTML5 Przyszłość WWW oparta o nowe standardy sieciowe HTML5 i XHTML2
XHTML2 i HTML5 Przyszłość WWW oparta o nowe standardy sieciowe HTML5 i XHTML2 mgr inż. Dominik Tomaszuk Uniwersytet w Białymstoku XHTML2 XML XHTML2 to aplikacja XML a, która nie daje innych możliwości
Specyfikacja techniczna dot. mailingów HTML
Specyfikacja techniczna dot. mailingów HTML Informacje wstępne Wszystkie składniki mailingu (pliki graficzne, teksty, pliki HTML) muszą być przekazane do melog.com dwa dni albo maksymalnie dzień wcześniej
Wybrane znaczniki HTML
Wybrane znaczniki HTML Struktura dokumentu HTML informacje o dokumencie i plikach zewnętrznych zawartość wyświetlana w przeglądarce wraz z tagami formatującymi
Tworzenie Stron Internetowych. odcinek 5
Tworzenie Stron Internetowych odcinek 5 Nagłówek zawiera podstawowe informacje o dokumencie, takie jak: tytuł strony (obowiązkowy) metainformacje/metadane (obowiązkowa deklaracja
Young Programmer: HTML+PHP. Dr inż. Małgorzata Janik, Zajęcia #2
Young Programmer: HTML+PHP Dr inż. Małgorzata Janik, Zajęcia #2 Ramowy program warsztatów Zajęcia 1: Zajęcia wprowadzające, HTML Zajęcia 2: Style CSS (tabele i kaskadowe arkusze stylów) Zajęcia 3: Podstawy
XHTML Budowa strony WWW
XHTML Budowa strony WWW Wydział Fizyki Politechnika Warszawska 2019 dr inż. Marzena Sala-Tefelska Założenie strony www na serwerze student 1. Tworzymy główny plik o nazwie index.html (plik tekstowy). UWAGA!:
LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH. PODSTAWY JĘZYKA HTML (HyperText Markup Language)
LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH PODSTAWY JĘZYKA HTML (HyperText Markup Language) 1. STRUKTURA DOKUMENTU HTML Dokument HTML jest zwykłym nie skonwertowanym tekstem, z tak zwanymi znacznikami
Języki programowania wysokiego poziomu. HTML cz.1.
Języki programowania wysokiego poziomu HTML cz.1. Struktura dokumentu html Dokument HTML ma postać:
2. Prezentacja wizualna
2. Prezentacja wizualna 2.1. Opis rozdziału Rozdział ten przedstawia jak stworzyć przykładowy układ graficzny dla naszej gry w HTML5 i CSS3, które w dalszej części poradnika zostaną wykorzystane do stworzenia
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
Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np. <BR>
Język html to język znaczników inaczej tagów, czyli słów lub skrótów pochodzących z języka angielskiego ujętych w nawiasy ostrokątne , np.. . W większości przypadków spotykamy znaczniki początku (inaczej
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
Elementy podstawowe. Dodatek: Elementy języków HTML i XHTML. Dodał Administrator piątek, 23 lipiec :15. Element. Przykład. Opis. <?xml?
Elementy podstawowe Element Przykład Określa, że plik HTML jest złożony zgodnie z regułami języka XML (a więc jest plikiem XHTML). Jednocześnie wstępnie ok
Systemy internetowe HTML
Systemy internetowe HTML West Pomeranian University of Technology, Szczecin; Faculty of Computer Science Kwestie organizacyjne Obecność na wykładach nieobowiązkowa Obecność na laboratoriach obowiązkowa
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
Zaawansowana Pracownia Komputerowa - Ćwiczenia. Krzysztof Miernik
Zaawansowana Pracownia Komputerowa - Ćwiczenia Krzysztof Miernik HTML - Podstawowe Informacje HTML to hipertekstowy język znaczników (ang. HyperText Markup Language) służacy do tworzenia stron internetowych
Sierpień 2015 rozwiązanie plik: index.htlm
Sierpień 2015 rozwiązanie plik: index.htlm strona główna //ustalamy położenie wyświetlania
Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk
Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery Łukasz Bartczuk Moduł 3 Formularze Agenda Podstawy formularzy HTML Podstawowe kontrolki formularzy HTML Nowe kontrolki z HTML
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
Technologie Informacyjne
Technologie Informacyjne Wykªad 6 Paweª Witkowski MIM UW Wiosna 2013 P. Witkowski (MIM UW) Technologie Informacyjne Wiosna 2013 1 / 18 HTML HyperText Markup Language J zyk oparty na znacznikach Opisuje
STRONY INTERNETOWE mgr inż. Adrian Zapała
1 STRONY INTERNETOWE mgr inż. Adrian Zapała STRONY INTERNETOWE Rodzaje stron internetowych statyczne (statyczny HTML + CSS) dynamiczne (PHP, ASP, technologie Flash) 2 JĘZYKI STRON WWW HTML (ang. HyperText
HTML 5 język wykorzystywany do tworzenia i prezentowania stron internetowych www. Jest
język wykorzystywany do tworzenia i prezentowania stron internetowych www. Jest rozwinięciem języka HTML 4 i jego XML-owej odmiany (XHTMl 1), opracowywane w ramach prac grupy roboczej WHATWG (Web Hypertext
Strony WWW - podstawy języka HTML
Strony WWW - podstawy języka HTML Jacek Krzaczkowski 2004 r. HTML (Hyper Text Markup Language) jest językiem opisu dokumentu używanym do tworzenia stron WWW. Znaczniki języka HTML informują przeglądarkę
Wprowadzenie do HTML, CSS, JavaScript, PHP. Kurs 18.11 2008 22 12. 2008
Wprowadzenie do HTML, CSS, JavaScript, PHP Kurs 18.11 2008 22 12. 2008 Narzędzia do tworzenia i utrzymania dokumentów web owych Edytory HTML Server WWW i baz danych Przeglądarka internetowa kompilator
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.
2. Projektowanie stron WWW podstawowe informacje
1. Uczeń: Uczeń: 2. Projektowanie stron WWW podstawowe informacje a. 1. Cele lekcji i. a) Wiadomości zna podstawowe zasady tworzenia stron internetowych, rozróżnia tryb tekstowy tworzenia stron www od
FORMULARZE Formularz ma formę ankiety, którą można wypełnić na stronie. Taki formularz może być np. przesłany pocztą elektroniczną e-mail.
1 FORMULARZE Formularz ma formę ankiety, którą można wypełnić na stronie. Taki formularz może być np. przesłany pocztą elektroniczną e-mail.
Wykład 2 TINT. XHTML tabele i ramki. Zofia Kruczkiewicz
Wykład 2 TINT XHTML tabele i ramki Zofia Kruczkiewicz 1. Tabele 1.1. Przykład tabeli zawierającej kalendarz na miesiąc marzec ... definiuje tabelę Atrybuty: border ="" obramowanie tabeli,
za pomocą: definiujemy:
HTML CSS za pomocą: języka HTML arkusza CSS definiujemy: szkielet strony wygląd strony Struktura dokumentu html - znaczniki Znaczniki wyznaczają rodzaj zawartości. element strony
Laboratorium 1 Wprowadzenie do PHP
Laboratorium 1 Wprowadzenie do PHP Ćwiczenie 1. Tworzenie i uruchamianie projektu PHP w Netbeans Tworzenie projektu Uruchom środowisko NetBeans. Stwórz nowy projekt typu PHP Application (File->New Project,
Elementarz HTML i CSS
Elementarz HTML i CSS Znaczniki przydatne w pracy redaktora stron internetowych 1 Elementarz HTML i CSS Znaczniki przydatne w pracy redaktora stron internetowych Treść, korekta, skład i oprawa graficzna
Projekty z Technologii Informacyjnych
Projekty z Technologii Informacyjnych Zad. 1. Opracuj prezentację w programie PowerPoint lub podobnym na zadany temat. Prezentacja powinna być przeznaczona do prezentowania w czasie ok. 10 minut. Zad.
Innowacja pedagogiczna Pasja programowania ZESPÓŁ SZKÓŁ W CHOROSZCZY
Innowacja pedagogiczna Pasja programowania ZESPÓŁ SZKÓŁ W CHOROSZCZY 1. Informacje o innowacji Nazwa szkoły: Zespół Szkół w Choroszczy Etap edukacyjny: Szkoła Podstawowa, klasy 4-6 Tytuł innowacji: Pasja
Nowoczesne Technologie WWW
INP002295W Test zaliczeniowy A 10.06.2016 Nowoczesne Technologie WWW 1. Napisz szablon poprawnej i responsywnej strony HTML5 w polskiej wersji językowej:
Podstawy tworzenia stron internetowych
Podstawy tworzenia stron internetowych HTML Wstęp Do edycji stron HTML (Hyper Text Markup Language) można wykorzystać dowolny edytor tekstowy (np. Notatnik) umożliwiający edycję zwykłych plików tekstowych.
Celem ćwiczenia jest zapoznanie z językiem HTML i JavaScript, zasadami tworzenia stron WWW i umieszczania na nich skryptów w języku JavaScript.
Instrukcja laboratoryjna do ćwiczenia: 1. Cel ćwiczenia Strona internetowa w systemach unix-owych Celem ćwiczenia jest zapoznanie z językiem HTML i JavaScript, zasadami tworzenia stron WWW i umieszczania
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
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)
1 BLOK DOKUMENTU Polecenie div (blok, sekcja) odgrywa istotną rolę w grupowaniu wielu różnych elementów i pozycjonowaniu fragmentów dokumentu. We wcześniejszych wersjach HTML, od 3.2 do 4.01, na blokach
Atrybuty znaczników HTML
Atrybuty znaczników HTML Atrybut Zastosowanie Opis Abbr Td, Th Skrót dla komórki nagłówkowej tabeli Accept Form, input Lista typów MIME dla wysyłanego pliku Accept-charset Form Lista obsługiwanych znaków
Lab.1. Praca z tekstem: stosowanie arkuszy stylów w dokumentach OO oraz HTML/CSS
Lab.1. Praca z tekstem: stosowanie arkuszy stylów w dokumentach OO oraz HTML/CSS Cel ćwiczenia: zapoznanie się z pojęciem stylów w dokumentach. Umiejętność stosowania stylów do automatycznego przygotowania
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
DOM (Document Object Model)
DOM (Document Object Model) Czym jest DOM? Platforma, która pozwala skryptom na dynamiczny dostęp do zawartości strony i jej aktualizację. Elementy można dodawać, zmieniać lub usuwać. Specyfikacje Poziomy
Aplikacje WWW - laboratorium
Aplikacje WWW - laboratorium Język JavaScript Celem ćwiczenia jest przygotowanie formularza HTML z wykorzystaniem języka JavaScript. Formularz ten będzie sprawdzany pod względem zawartości przed wysłaniem
Wykład 03 JavaScript. Michał Drabik
Wykład 03 JavaScript Michał Drabik Język programowania wykorzystywany na stronach internetowych głównie w celu umożliwienia interakcji z użytkownikiem. Kod JavaScript może być umieszczany w kodzie XHTML
Kaskadowe arkusze stylów (CSS)
Kaskadowe arkusze stylów (CSS) CSS (Cascading Style Sheets) jest to język opisujący sposób, w jaki przeglądarki mają wyświetlać zawartość odpowiednich elementów HTML. Kaskadowe arkusze stylów służą do
Mailingi HTML. Specyfikacja techniczna
Mailingi HTML Specyfikacja techniczna Informacje wstępne Grupa Morizon S.A. zastrzega sobie prawo do odmowy emisji materiałów reklamowych bez podania przyczyny, w szczególności gdy ich jakość techniczna
Jak projektować dostępne strony
Jak projektować dostępne strony Przemysław Marcinkowski e-mail: przemek@iart.com.pl Plan prezentacji 1. Dlaczego powstał dokument WCAG? 2. Priorytety 3. Tworzenie tekstów 4. Linki 5. Nawigacja 6. Grafika
Wordpress: http://wordpress.org. Joomla! http://www.joomla.org/ Drupal. http://drupal.org
System zarządzania treścią (Content Management System, CMS) jest to aplikacja internetowa lub ich zestaw, pozwalająca na łatwe utworzenie serwisu WWW oraz jego późniejszą aktualizację i rozbudowę. Prezentacja
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">
I. Dlaczego standardy kodowania mailingów są istotne?
1 Tabela zawartości: I. Dlaczego standardy kodowania mailingów są istotne? 3 II. Budowa nagłówka wiadomości. 4 III. Style kaskadowe CSS. 4 IV. Elementarna budowa szablonu. 6 V. Podsumowanie. 9 2 I. Dlaczego
Aplikacje WWW - laboratorium
Aplikacje WWW - laboratorium Język JavaScript Celem ćwiczenia jest przygotowanie formularza na stronie WWW z wykorzystaniem języka JavaScript. Formularz ten będzie sprawdzany pod względem zawartości przed
Tworzenie stron internetowych RAMKI
Tworzenie stron internetowych RAMKI RAMKI Ramka to zdefiniowana część okna przeglądarki, której to części przypisano właściwości takie jak całemu oknu. ramka może być przewijana niezależnie od pozostałej
TWORZENIE STRON WWW. Zasady opisu stron w języku HTML:
TWORZENIE STRON WWW Strony WWW definiowane są za pomocą języków opisu stron. Najpopularniejszym językiem tego typu jest język HTML (Hyper Text Markup Language). Zasady opisu stron w języku HTML: - opis
WYMAGANIA EDUKACYJNE. Witryny i Aplikacje Internetowe klasa I
WYMAGANIA EDUKACYJNE Witryny i Aplikacje Internetowe klasa I Dopuszczający definiuje pojęcia: witryna, portal, wortal, struktura witryny internetowej; opisuje rodzaje grafiki statycznej wymienia i charakteryzuje
Bazy danych. dr Radosław Matusik. radmat
www.math.uni.lodz.pl/ radmat Sortowanie tablic Do sortowania tablic służą funkcje: Sortowanie tablic Do sortowania tablic służą funkcje: sort($tablica) - sortowanie w porządku rosnącym bez kluczy; Sortowanie
Zakres treści Czas. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów
Aplikacje internetowe KL. III Rok szkolny: 011/01 Nr programu: 31[01]/T,SP/MENIS/004.06.14 Okres kształcenia: łącznie ok. 180 godz. lekcyjne Wojciech Borzyszkowski Zenon Kreft Moduł Bok wprowadzający Podstawy
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
Aplikacje internetowe
Temat: Język HTML i style CSS Aplikacje internetowe Pracownia specjalistyczna, studia podyplomowe, rok 2011/2012 1. Stwórz formularz HTML pozwalający na rejestrację użytkownika w aplikacji internetowej.
Wymagania edukacyjne: Statyczne witryny internetowe (na podstawie programu nr 351203)
Wymagania edukacyjne: Statyczne witryny internetowe (na podstawie programu nr 351203) Technikum - kl. 3 Td, semestr 5 i 6 Ocena niedostateczna dopuszczająca Wymagania edukacyjne wobec ucznia: Uczeń nie
Język HTML i podstawy CSS
Notatki do wykładu Język HTML i podstawy CSS dr Jacek Tarasiuk WFiIS, AGH wersja 2006 Spis treści Język HTML...1 Rodzaje dokumentów HTML...1 Budowa dokumentu HTML...1 Zestawienie znaczników...2 Szkielet
Podstawy technologii WWW
Podstawy technologii WWW Ćwiczenie 8 PHP, czyli poczatki nowej, dynamicznej znajomosci Na dzisiejszych zajęciach rozpoczniemy programowanie po stronie serwera w języku PHP. Po otrzymaniu żądania serwer
Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk
Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery Łukasz Bartczuk Moduł 6 JavaScript w przeglądarce Agenda Skrypty na stronie internetowej Model DOM AJAX Skrypty na stronie
HTML jak zrobić prostą stronę www
HTML jak zrobić prostą stronę www Z tej prezentacji dowiemy się: - co to jest HTML - jak znając podstawy HTML'a zrobić prostą stronę Co to jest HTML? HTML = HyperText Markup Language, czyli język znaczników
Pomoc dla systemu WordPress
Pomoc dla systemu WordPress Ten plik pomocy przeznaczony jest dla pluginu stat24 w wersji 0.2. W tym pluginie porzucono wsparcie dla starszych wersji WordPress (niższych niż 1.5) oraz zrezygnowano z opcji
Zajęcia 4 - Wprowadzenie do Javascript
Zajęcia 4 - Wprowadzenie do Javascript Co to jest Javascript Javascript jest językiem skryptowym pozwalającym na dołączanie dodatkowej funkcjonalności do stron WWW. Jest ona najczęściej związana z modyfikacją