HTML 5 Technologie Informacyjne Literatura:

1 HTML 5 Technologie Informacyjne Literatura:HTML i CSS. ...

Author: Bartłomiej Świderski

0 downloads 0 Views

1 HTML 5 Technologie Informacyjne Literatura:HTML i CSS. Zaprojektuj i zbuduj witrynę WWW, Duckett Jon, Wyd.Helion, 2014

2 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.

3 HTML dzień hutnika treść strony definiuje typ dokumentu, informuje przeglądarkę, z którą wersją języka html ma ona do czynienia.

4 HTML znaczniki informuje, że zawartość odczytywanego pliku to kod, napisany w html‑u wyznacza nagłówek strony zawiera treść strony 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> { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/12117310/70/images/4/HTML+znaczniki.+%3Chtml%3E+informuje%2C+%C5%BCe+zawarto%C5%9B%C4%87+odczytywanego+pliku+to+kod%2C+napisany+w+html%E2%80%91u.+%3Chead%3E+wyznacza+nag%C5%82%C3%B3wek+strony..jpg", "name": "HTML znaczniki. informuje, że zawartość odczytywanego pliku to kod, napisany w html‑u. wyznacza nagłówek strony.", "description": " zawiera treść strony. definiuje tytuł dokumentu, który będzie wyświetlany na pasku tytułu przeglądarki. w elemencie meta umieszczane są opisy i słowa kluczowe wykorzystywane przez wyszukiwarki. określa relację pomiędzy dwoma dokumentami. umożliwia umieszczenie w dokumencie skryptu. definiuje styl w dokumencie. CSS. CSS, , or "> 6 HTML Elementy dodane w html 5 Tag Description <article rel="nofollow">Określa sekcję reprezentującą pojedyczną część serwisu (np. artykuł) <aside rel="nofollow"> 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 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 Łamanie wiersza { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/12117310/70/images/6/HTML+Elementy+dodane+w+html+5+Tag+Description+%3Carticle%3E.jpg", "name": "HTML Elementy dodane w html 5 Tag Description ", "description": "Określa sekcję reprezentującą pojedyczną część serwisu (np. artykuł) Dodatkowa, poboczna treść w stosunku do artykułu. Oznaczenie dla fragmentu tekstu zapisanego w formacie dwukierunkowym. Definiuje kontrolkę prezentującą dodatkowe informacje. Definiuje okno. Opis lub legenda elementu znacznika figure. Określa ilustrację i jej zawartość. Określa stopkę dla elementu, do którego się odnosi. Określa nagłówek dla elementu, do którego się odnosi. Defines the main content of a document. Uwydatnienie tekstu. Sekcja odsyłaczy nawigacyjnych do innych stron lub w ramach dokumentu. Postęp wykonywania procesu lub zadania. Adnotacja RUBY. Sekcja dokumentu. Podsumowanie, etykieta lub legendla dla elementu details. Oznacza datę i/lub czas/time. Łamanie wiersza.", "width": "1024" } 7 HTML Elementy dodane w html 5Nowe znaczniki obsługi treści multimedialnej Znacznik Opis <audio rel="nofollow"> 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 { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/12117310/70/images/7/HTML+Elementy+dodane+w+html+5.jpg", "name": "HTML Elementy dodane w html 5", "description": "Nowe znaczniki obsługi treści multimedialnej. Znacznik. Opis. Znacznik odpowiadający strumieniowi audio. Znacznik osadzania materiału filmowego. Umożliwia definiowanie kilku różnych źródeł dla elementów (znaczników) audio/video. Osadzenie zewnętrznej zawartości (np. plug-in) Dodatkowa ścieżka dla audio lub video (np. napisy) Nowe znaczniki obsługi formularzy. Znacznik. Opis. Definiuje zestaw elementów option z domyślnymi własnościami. Kontrolka do generowania pary kluczów publicznego i prywatnego. Przedstawia wynik obliczeń. Nowe znacznik do dynamicznej grafiki. Znacznik. Opis. Obszar zależny od rozdzielczości, służący do wyświetlania dynamicznej grafiki.", "width": "1024" } 8 HTML formatowanie tekstu nagłówki i akapity <h1> tekst </h1> - nagłówek tekst - 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> { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/12117310/70/images/8/HTML+formatowanie+tekstu.+nag%C5%82%C3%B3wki+i+akapity.+%3Ch1%3E+tekst+%3C%2Fh1%3E+-+nag%C5%82%C3%B3wek.+%3Cp%3E+tekst+%3C%2Fp%3E+-+akapit..jpg", "name": "HTML formatowanie tekstu. nagłówki i akapity. tekst - nagłówek. tekst - akapit.", "description": "This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6", "width": "1024" } 9 HTML formatowanie tekstu style fizyczne pogrubienie kursywa podkreślenie <s> przekreślenie indeks dolny indeks górny 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 łamanie linii <hr size="2”> <hr width=”10%”> { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/12117310/70/images/9/HTML+formatowanie+tekstu+style+fizyczne+%3Cb%3E+pogrubienie.jpg", "name": "HTML formatowanie tekstu style fizyczne pogrubienie", "description": " kursywa. podkreślenie. przekreślenie. indeks dolny. indeks górny. czcionka mniejsza od pozostałych. tekst preformatowany - każda spacja, znajdująca się pomiędzy znacznikami i , zostanie wyświetlona. standardowo dodatkowe znaki spacji, tabulacji, nowej linii są ignorowane. 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. łamanie linii. ", "width": "1024" } 10 HTML formatowanie tekstu położenie tekstualign 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> kolejny wykład { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/12117310/70/images/10/HTML+formatowanie+tekstu+po%C5%82o%C5%BCenie+tekstu.jpg", "name": "HTML formatowanie tekstu położenie tekstu", "description": "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. 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) agh kolejny wykład", "width": "1024" } 11 CZCIONKI SZERYFOWE, BEZSZERYFOWEHTML 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) { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/12117310/70/images/11/CZCIONKI+SZERYFOWE%2C+BEZSZERYFOWE.jpg", "name": "CZCIONKI SZERYFOWE, BEZSZERYFOWE", "description": "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)", "width": "1024" } 12 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> { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/12117310/70/images/12/HTML+listy+%3Cli%3E+definiuje+pozycje+listy.jpg", "name": "HTML listy definiuje pozycje listy", "description": " lista numerowana, oznaczana kolejnymi liczbami. lista wypunktowana, oznaczona kropkami lub innymi symbolami. lista definicji. - 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ę. AGH. UJ. PK. Czerwiec Lipiec ", "width": "1024" } 13 HTML listy <ul> <ul> - lista wypunktowanaatrybut 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> { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/12117310/70/images/13/HTML+listy+%3Cul%3E+%3Cul%3E+-+lista+wypunktowana.jpg", "name": "HTML listy - lista wypunktowana", "description": "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. poniedziałek wtorek środa wiosna lato ", "width": "1024" } 14 HTML listy <dl> <dl> - lista definicjiKaż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> { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/12117310/70/images/14/HTML+listy+%3Cdl%3E+%3Cdl%3E+-+lista+definicji.jpg", "name": "HTML listy - lista definicji", "description": "Każda część elementu listy definicji posiada swój znacznik: oznacza pojęcie (definition term), a definicję. freeware licencja oprogramowania umożliwiająca darmowe rozprowadzanie aplikacji bez ujawnienia kodu źródłowego. shareware rodzaj licencji programu komputerowego, który jest rozpowszechniany bez opłat, ale z pewnymi ograniczeniami ", "width": "1024" } 15 HTML listy listy zagnieżdżoneSposó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> { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/12117310/70/images/15/HTML+listy+listy+zagnie%C5%BCd%C5%BCone.jpg", "name": "HTML listy listy zagnieżdżone", "description": "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. styczeń luty poniedziałek wtorek środa marzec", "width": "1024" } 6 HTML Elementy dodane w html 5 Tag Description <article rel="nofollow">Określa sekcję reprezentującą pojedyczną część serwisu (np. artykuł) <aside rel="nofollow"> 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 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 Łamanie wiersza 7 HTML Elementy dodane w html 5Nowe znaczniki obsługi treści multimedialnej Znacznik Opis <audio rel="nofollow"> 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 8 HTML formatowanie tekstu nagłówki i akapity <h1> tekst </h1> - nagłówek tekst - 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> 9 HTML formatowanie tekstu style fizyczne pogrubienie kursywa podkreślenie <s> przekreślenie indeks dolny indeks górny 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 łamanie linii <hr size="2”> <hr width=”10%”> 10 HTML formatowanie tekstu położenie tekstualign 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> kolejny wykład 11 CZCIONKI SZERYFOWE, BEZSZERYFOWEHTML 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) 12 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> 13 HTML listy <ul> <ul> - lista wypunktowanaatrybut 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> 14 HTML listy <dl> <dl> - lista definicjiKaż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> 15 HTML listy listy zagnieżdżoneSposó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> </div> </div> </div> </div> </div> </div> </div> <script src='https://www.google.com/recaptcha/api.js'></script>  <div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close">×</button> <h3 class="modal-title">Sign In</h3> </div> <div class="modal-body"> <form action="https://slidepptx.com/login" method="post"> <div class="form-group form-group-lg"> <label class="sr-only" for="email">Email</label> <input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" /> </div> <div class="form-group form-group-lg"> <label class="sr-only" for="password">Password</label> <input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" /> </div> <div class="form-group form-group-lg"> <div class="checkbox"> <label class="form-checkbox"> <input type="checkbox" name="remember" value="1" /> Remember Password </label> <label class="pull-right"><a href="https://slidepptx.com/forgot">Forgot Password?</a></label> </div> </div> <button class="btn btn-lg btn-primary btn-block" type="submit">Sign In</button> </form> <hr style="margin-top: 15px;" /> <a href="https://slidepptx.com/login/google" class="btn btn-lg btn-google btn-block"> Login with Google</a> </div> </div> </div> </div>  <div class="footer-container" style="background: #fff;display: block;padding: 10px 0 20px 0;margin-top: 30px;"> <div class="footer-container-inner"> <footer id="footer" class="container"> <div class="row"> <div class="bottom-footer"> <div class="container"> Copyright © 2024 SLIDEPPTX.COM. All rights reserved. </div> <hr /> </div> </div> <div class="row">  <section class="block col-md-4 col-xs-12 col-sm-3" id="block_various_links_footer"> <h4>Information</h4> <ul class="toggle-footer" style=""> <li><a href="https://slidepptx.com/about">About Us</a></li> <li><a href="https://slidepptx.com/privacy">Privacy Policy</a></li> <li><a href="https://slidepptx.com/term">Terms and Conditions</a></li> <li><a href="https://slidepptx.com/copyright">Copyright</a></li> <li><a href="https://slidepptx.com/contact">Contact Us</a></li> </ul> </section>  <section id="social_block" class="col-md-4 col-xs-12 col-sm-3 block"> <h4>Follow us</h4> <ul> <li class="facebook"> <a target="_blank" href="" title="Facebook"> Facebook </a> </li> <li class="twitter"> <a target="_blank" href="" title="Twitter"> Twitter </a> </li> <li class="google-plus"> <a target="_blank" href="" title="Google Plus"> Google Plus </a> </li> </ul> </section>  <div id="newsletter" class="col-md-4 col-xs-12 col-sm-3 block"> <h4>Newsletter</h4> <div class="block_content"> <form action="https://slidepptx.com/newsletter" method="post"> <div class="form-group"> <input id="newsletter-input" type="text" name="email" size="18" placeholder="Entrer Email" /> <button type="submit" name="submit_newsletter" class="btn btn-default"> </button> <input type="hidden" name="action" value="0"> </div> </form> </div> </div>  </div> </footer> </div> </div>  <script> $(function () { $("#document_search").autocomplete({ source: function (request, response) { $.ajax({ url: "https://slidepptx.com/suggest", dataType: "json", data: { term: request.term }, success: function (data) { response(data); } }); }, autoFill: true, select: function (event, ui) { $(this).val(ui.item.value); $(this).parents("form").submit(); } }); }); $(document).ready(function() { $(".doc-share-btn").click(function() { var urlshare = $(this).attr('data-share-url'); window.open('http://www.facebook.com/sharer.php?u=' + urlshare, '_blank'); }); }); function download_submit() { $('#download_form').submit(); } </script> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-106734935-2', 'auto'); ga('send', 'pageview'); </script> </body> </html>

HTML 5 Technologie Informacyjne Literatura:

Recommend Documents