1 Wprowadzenie do tworzenia stron internetowychSzymon Bohdanowicz
2 Jak to działa, czyli kilka słów o architekturze(znów!).
3 Klient czyli przeglądarka.Rozumie przesłaną treść i zamienia ją na określony obraz widziany przez użytkownika. Pozwala podejrzeć treść strony. Różne przeglądarki w różny sposób mogą wyświetlać(lub nie) określoną treść. Przykłady: FireFox, IExplorer, Chrome, Opera itd.
4 Edytory – czyli narzędzia do tworzenia stron.Służą do edycji treści stron napisanych w html, css + dodatkowo mogą pomagać w pisaniu php, JavaScript itp. Podpowiadają, sprawdzają poprawność, tworzą podgląd i jeszcze więcej. Generalnie mamy do czynienia z dwoma różnymi typami edytorów: tradycyjne(tekstowe) i WYSIWYG (co widzisz to dostajesz)
5 Tradycyjne WYSIWYG KED Pajączek(płatny) HateMLI wiele innych(np. Eclipse, NetBeans) WYSIWYG FrontPage(SharePoint Designer) Dreamweaver I wiele innych
6 WYSIWYG Nie musisz znać html’a, cssCały kod strony generuje się automatycznie Wygodny (czas wcale nie) interfejs graficzny (przeciąganie komponentów) Nie masz pełnej kontroli nad treścią Duża nadprodukcja kodu Częste błędy podczas wyświetlania Problemy w sytuacji gdy stronę trzeba poprawić za pomocą edytora tekstowego
7 Na zajęciach użyjemy KEDuJest lekki – nie zjada pamięci, nie muli Jest wygodny - interfejs jest dość sensowny Jest efektywny – wszystko wydaje się działać jak należy Jest po polsku! Jest za darmo! Link do ściągnięcia na stronie:
8 HTML – to trzeba znać! O XMLu mówiliśmy -> xHtml(obecnie chyba popularniejszy) jest XMLem Odpalamy przeglądarkę -> zakładka widok -> źródło strony – co tam widać?? Kto zna? Co może o nim powiedzieć?
9 Struktura strony Tu wpisz tytuł strony Tu wpisuje się treść strony Szablon pustej strony.html
10 Kodowanie po polsku Standard kodowania wyznacza polska norma PN-91/T-42115, nazywana często ISO Druga metoda - kodowanie Windows CP 1250 (windows-1250) - jest charakterystyczna dla MS Windows. Bardzo często powoduje pojawienie się problemów przy wyświetlaniu znaków. charset= windows-1250">
11 Znaczniki = tagi = markeryWiększość ze znaczników to znaczniki obejmujące (parzyste), składające się ze znacznika otwierającego i zamykającego, na przykład: Instrukcja obsługi
Tekst w tym obszarze zaznaczony jest jako nagłówek (header) pierwszego poziomu, czyli zostanie wyświetlony największą czcionką zdefiniowaną dla nagłówków. Istnieje sześć poziomów nagłówków w HTML-u: H1 H2 H3 H4 H5 H6 Szablon z nagłówkami.html Szablon z nagłówkami.html
12 Atrybuty znaczników Niektóre znaczniki występują pojedynczo, np.:
- tworzy linię poziomą,
- wymusza przejście do następnego wiersza, ![]()
- wstawia grafikę, - dostarcza informacji o dokumencie. Znaczniki można zagnieżdżać, podobnie jak nawiasy w matematyce: fragment tekstu Wiele znaczników może lub musi posiadać określone atrybuty, np.: tekst Atrybut COLOR może przyjmować różne wartości(angielskie słowa): aqua, brown, cyan, gold, gray, green, lime, magenta, maroon, navy, olive, orange, pink, plum, purple, itp. Lub kody (RGB) kolorów ->
13 Znaczniki META W nagłówku dokumentu umieszcza się zwykle informacje ważne dla przeglądarek i wyszukiwarek – są to tzw. znaczniki META.
14 Podstawowe znaczniki
...
(paragraph)
HTML jest językiem bezformatowym, w którym ignorowane są przejścia do nowego wiersza i wielokrotne spacje, zaś wymaganą strukturę dokumentu nadaje się za pomocą specjalnych znaczników. ...
(paragraph)
(break)
(horizontal rule line) ...
(preformatted) (unordered list) - tworzy listę wypunktowaną. ...
(ordered list) - tworzy listę numerowaną. ... wprowadza element listy ...
- cytat ...
- grupuje tekst w jeden blok Szablon z listami.html Szablon z listami.html Szablon z podstawowymi tagami.html 15 Wyróżnianie tekstu ... (bold)... (italic) ... (underline) ... (teletype) ... - wyróżnienie ... - wyróżnienie silniejsze ... - przekreślenie tekstu ... - indeks dolny ... - indeks górny Szablon z formatowaniem tekstu.html
16 Definiowanie czcionekRozmiar, kolor i krój czcionki można określić za pomocą znacznika ... i jego atrybutów: size - rozmiar czcionki (od 1 do 7, wartością domyślną jest 3) color - kolor face - krój Przykład: jakiś tekst Można też używać bardziej uniwersalnych znaczników, takich jak: ... - powiększenie czcionki o 1 punkt, ... - zmniejszenie czcionki o 1 punkt. Szablon z formatowaniem tekstu2.html
17 Kolor tła Kolor tła określamy za pomocą atrybutu bgcolor znacznika : Tłem strony może być też tapeta zapisana w pliku graficznym, którego nazwę podaje się jako wartość atrybutu background: Szablon z tłem.html
18 Wstawianie grafiki Znacznik ![]()
(image) umożliwia umieszczenie w dokumencie HTML grafiki in-line, tzn. jako element bieżącego wiersza. Nazwa pliku zawierającego obrazek podawana jest za pomocą atrybutu SRC (source). 
Przeglądarki akceptują jedynie grafikę zapisaną w odpowiednim formacie. Najczęściej jest to: GIF JPG PNG Szablon z grafikami.html
19 Wyrównanie grafiki Sposób rozmieszczenia tekstu wokół obrazka określany jest za pomocą atrybutu ALIGN znacznika ![]()
. Do pionowego zorientowania rysunku względem wiersza używane są następujące wartości: ALIGN = ”top” ALIGN = ”middle” ALIGN = ”bottom” Przykład: 
Ania na spacerze Do oblewania grafiki tekstem używane są wartości left, right: ALIGN = ”left” - dosunięcie obrazka do lewej i otoczenie go tekstem z prawej strony, ALIGN = ”right” - odwrotnie Szablon z grafikami.html
20 Wstawianie odnośnikówOdnośniki – zwane potocznie linkami - to elementy interaktywne pozwalające na przemieszczanie się do innego miejsca, przy czym może to być miejsce na tej samej stronie, inna strona lub strona znajdująca się na odległym serwerze. Do tworzenia odnośników służy znacznik (anchor – kotwica), którego podstawowym atrybutem jest href (Hypertext REFerence), określający adres odnośnika: tekst aktywny Jeśli chcemy, aby elementem interaktywnym był obrazek, po prostu wstawiamy w odpowiednim miejscu znacznik ![]()
Szablon z odnośnikami.html
21 Tworzenie zakładek Rozdział I Rozdział II Rozdział I
Rozdział II
Znaczniki umożliwiają tworzenia zakładek, czyli miejsc znajdujących się na tej samej stronie, do których może nastąpić przeskok hipertekstowy. Zdefiniowanie zakładki: Postać dnośnika: Rozdział I Szablon z odnośnikami.html
22 Tabele Tabele języka HTML są ważnym narzędziem służącym do kształtowania wyglądu strony; umożliwiają poprawne rozmieszczenie na stronie elementów, takich jak tekst, formularze czy grafika. Kod przykładowej tabeli wygląda następująco: Każdy wiersz tabeli określony jest parą znaczników i
(table row). W wierszach, za pomocą znaczników
i | umieszcza się komórki z danymi (table data), np.:
 | Szerokość kolumny tabelki zostaje dopasowana do szerokości najszerszej komórki w danej kolumnie, przy czym tabela ma tyle kolumn, ile komórek znajduje się w najdłuższym wierszu. Szablon z tabelką.html 23 Formatowanie tabel Obramowanie tabeli Szerokość i wysokość tabeli Kolor tła Odstęp między komórkami tabeli Odstęp między zawartością komórki a jej krawędzią Wyrównanie tabeli na stronie Szablon z tabelką.html
24 Rozpinanie komórek Nr Pomiary Seria 1 Seria2 1 123 121Do rozpinania komórek służą dwa atrybuty znacznika
colspan i rowspan Wartości tych atrybutów określają odpowiednio liczbę kolumn i liczbę wierszy, na których ma zostać rozpięta komórka. Na przykład: | Nr | Pomiary | | Seria 1 | Seria 2 | | 1 | 123 | 121 | Nr Pomiary Seria 1 Seria2 1 123 121 Szablon z tabelką.html 25 Tworzenie ramek Ramki umożliwiają podzielenie okna przeglądarki na mniejsze podokna i wyświetlenie w każdym z nich osobnej strony WWW. Aby zdefiniować układ ramek należy utworzyć nowy typ dokumentu HTML zwany FRAMESET. W takim dokumencie sekcja zastąpiona jest sekcją Następnie za pomocą polecenia frame z parametrem src, podajemy nazwę strony do wstawienia. Starsze przeglądarki (np. Lynx) w przypadku dokumentów frameset nie wyświetlają zwykle żadnej treści. Z tego względu w takich dokumentach należy umieścić sekcję <![CDATA[ zawierającą alternatywną postać strony, lub odnośnik do wersji strony przeznaczonej dla przeglądarek tekstowych.</span> <span class='tr'>Szablon z ramkami.html</span></p><p><span class="span-circle-num"> 26 </span> <span>Zagnieżdżanie ramek</span> <span class='tr'>Znaczniki <frameset> można zagnieżdżać, tworząc rozbudowane układy.</span> <span class='tr'><html></span> <span class='tr'><head><title>Tytuł strony</title></head></span> <span class='tr'><frameset rows="100,*" border="0"></span> <span class='tr'><frame src="str1.htm" name="up" ></span> <span class='tr'><frameset cols="30%,*"></span> <span class='tr'><frame src="str2.htm" name="menu" ></span> <span class='tr'><frame src="str3.htm" name="main" ></span> <span class='tr'></frameset></span> <span class='tr'></html></span> <span class='tr'>Szablon z ramkami.html</span></p><p><span class="span-circle-num"> 27 </span> <span>Ramki docelowe</span> <span class='tr'>Domyślnie dokument, do którego prowadzi łącze, zostaje wyświetlony w tym samym oknie co łącze. Jednak często łącze znajdujące się w jednej ramce powinno otwierać stronę w innej ramce należącej do układu.</span> <span class='tr'>Aby wyświetlić nową stronę w danej ramce, po pierwsze należy przypisać tej ramce nazwę za pomocą atrybutu name w znaczniku <frame>:</span> <span class='tr'><frame src="default.htm" name="main"></span> <span class='tr'>Następnie za pomocą atrybutu target wskazujemy miejsce wyświetlania się nowej strony:</span> <span class='tr'><A href="nowa.htm" target="main" rel="nofollow"></span> <span class='tr'>Szablon z ramkami.html</span></p><p><span class="span-circle-num"> 28 </span> CSS – drugi krok obowiązkowy.<span class='tr'>CSS - Cascading Style Sheets (z ang. Kaskadowe Arkusze Stylów) jest to specjalny język opracowany w celu stworzenia możliwości bardziej elastycznego zarządzania sposobem formatowania (wyglądem) elementów znajdujących się w dokumentach elektronicznych.</span> <span class='tr'>CSS nie może istnieć samodzielnie, gdyż jest ściśle powiązane z językiem opisu struktury dokumentów takim jak (X)HTML. CSS daje możliwość globalnego zarządzania formą prezentacji całej witryny internetowej.</span> <span class='tr'>Szablon z najprostszym stylem.html</span></p><p><span class="span-circle-num"> 29 </span> Wstawienie arkusza CSS<span class='tr'>Stworzenie arkusza wewnętrznie:</span> <span class='tr'><HTML></span> <span class='tr'><HEAD></span> <span class='tr'><TITLE>Moja strona domowa</TITLE></span> <span class='tr'><STYLE type="text/css"></span> <span class='tr'>H1 { color: red }</span> <span class='tr'>P { color: blue }</span> <span class='tr'></STYLE></span> <span class='tr'></HEAD></span> <span class='tr'><BODY></BODY></span> <span class='tr'></HTML></span> <span class='tr'>Odwołanie się do zewnętrznego akrusza:</span> <span class='tr'><HTML></span> <span class='tr'><HEAD></span> <span class='tr'><TITLE>Moja strona domowa</TITLE></span> <span class='tr'><LINK rel="StyleSheet" type="text/css"</span> <span class='tr'>href="mojstyl.css" ></span> <span class='tr'></HEAD></span> <span class='tr'><BODY></BODY></span> <span class='tr'></HTML></span></p><p><span class="span-circle-num"> 30 </span> Reguły CSS Reguła składa się z dwóch części<span class='tr'>selektora (np. H1)</span> <span class='tr'>deklaracji (np. color:blue)</span> <span class='tr'>Deklaracja również składa się z dwóch części</span> <span class='tr'>właściwości (np. color)</span> <span class='tr'>wartości (np. blue)</span> <span class='tr'>np. H1{color:blue}</span> <span class='tr'>Szablon z lokalnym css.html</span></p><p><span class="span-circle-num"> 31 </span> Selektory potomne(Descendant selectors)<span class='tr'>dopasuje się do elementu, który jest dzieckiem innego elementu</span> <span class='tr'>przykład: chcemy żeby wyróżnienie (<em>)zmieniało kolor tekstu na różowy, wyjątkiem jest sytuacja gdy <em> znajduje się wewnątrz <h1> -> wtedy pomarańczowy:</span> <span class='tr'>H1 { color: red }</span> <span class='tr'>EM { color: pink}</span> <span class='tr'>Sytuacja wyątkowa:</span> <span class='tr'><H1>To jest <EM>bardzo</EM> ważny tekst</H1></span> <span class='tr'>Roziwązanie:</span> <span class='tr'>H1 EM{ color: orange}</span> <span class='tr'>Szablon z lokalnym css.html</span></p><p><span class="span-circle-num"> 32 </span> Selektory klas(class selectors)<span class='tr'>W języku HTML poszczególne elementy mogą posiadać atrybut class -> można z tego skorzystać tworząc arkusz sytlów</span> <span class='tr'>Przykład:</span> <span class='tr'>.zielony { color : green }</span> <span class='tr'><H1 class="zielony">Zielony nagłówek</H1></span> <span class='tr'>P.czerwony.gruby</span> <span class='tr'>{ color: red; font-weight: bold }</span> <span class='tr'><P class="czerwony gruby maly"></span> <span class='tr'>Przykładowy tekst</P></span> <span class='tr'>Szablon z lokalnym css class.html</span></p><p><span class="span-circle-num"> 33 </span> Selektory identyfikatorów(ID selectors)<span class='tr'>Każdy element HTML może mieć atrybut o nazwie id. Atrybut ten wyróżnia spośród innych to, że jego wartości są w obrębie dokumentu unikalne.</span> <span class='tr'>Przykład:</span> <span class='tr'>reguła H1#chapter1 { text-align: center }</span> <span class='tr'>dopasuje się do <H1 id="chapter1">...</H1></span> <span class='tr'>Szablon z lokalnym css id.html</span></p><p><span class="span-circle-num"> 34 </span> Pseudo-klasy :link – link nieodwiedzony :visited – link odwiedzony<span class='tr'>:hover – myszka nad linkiem</span> <span class='tr'>:active – link aktywny</span> <span class='tr'>:focus – focus ustawiony na linka</span> <span class='tr'>Szablon z lokalnym css pseudoklasy.html</span></p><p><span class="span-circle-num"> 35 </span> Własności kolorów i tła<span class='tr'>color – kolor tekstu</span> <span class='tr'>P { color: red }</span> <span class='tr'>H1 { color: rgb(255,0,0) }</span> <span class='tr'>background-color – kolor tła</span> <span class='tr'>H1 { background-color: #F00 }</span> <span class='tr'>background-image – obrazek tła</span> <span class='tr'>BODY { background-image: url("marble.gif") }</span> <span class='tr'>P { background-image: none }</span> <span class='tr'>Szablon z lokalnym css tlo.html</span></p><p><span class="span-circle-num"> 36 </span> Własności kolorów i tła<span class='tr'>background-repeat – jak powtarzać obrazek</span> <span class='tr'>repeat – powtarzanie w pionie i w poziomie</span> <span class='tr'>repeat-x – powtarzanie w poziomie</span> <span class='tr'>repeat-y – powtarzanie w pionie</span> <span class='tr'>no-repeat – po prostu narysować</span> <span class='tr'>BODY {</span> <span class='tr'>background-color: white;</span> <span class='tr'>background-image: url(„lemur.jpg");</span> <span class='tr'>background-repeat: repeat-y;</span> <span>}</span> <span class='tr'>Szablon z lokalnym css tlo.html</span></p><p><span class="span-circle-num"> 37 </span> Własności tekstu text-indent- wcięcie akapitu text-align- wyrównywanie<span class='tr'>jednostki: długości lub procenty</span> <span class='tr'>P { text-indent: 3em }</span> <span class='tr'>text-align- wyrównywanie</span> <span class='tr'>wartości: left | right | center | justify</span> <span class='tr'>DIV.center { text-align: center }</span> <span class='tr'>text-decoration</span> <span class='tr'>wartości: none | underline | overline |</span> <span class='tr'>line-through | blink</span> <span class='tr'>P { text-decoration: none }</span> <span class='tr'>Szblon z lokalnym css tekst.html</span></p><p><span class="span-circle-num"> 38 </span> Własności tekstu text-shadow letter-spacing word-spacing<span class='tr'>H1 { text-shadow: 0.2em 0.2em }</span> <span class='tr'>H2 { text-shadow: 3px 3px 5px red }</span> <span class='tr'>H2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px }</span> <span class='tr'>letter-spacing</span> <span class='tr'>wartości: normal lub długości</span> <span class='tr'>word-spacing</span> <span class='tr'>Szblon z lokalnym css tekst.html</span></p><p><span class="span-circle-num"> 39 </span> Kilka uwag Jednostki długości: relatywne: absolutne<span class='tr'>em – szerokość znaku M</span> <span class='tr'>ex – wysokość linii</span> <span class='tr'>px – 1 pixel</span> <span class='tr'>absolutne</span> <span class='tr'>in – cale (2.54 cm)</span> <span class='tr'>cm, mm</span> <span class='tr'>pt – punkty (1/72 cala)</span> <span class='tr'>pc – picas (12 pt)</span> <span class='tr'>procentowe: np. 120%</span></p><p><span class="span-circle-num"> 40 </span> Kilka uwag kolorki napisy H1 { color: maroon }<span class='tr'>P { color: #f00 } /* #rgb */</span> <span class='tr'>P { color: #ff0000 } /* #rrggbb */</span> <span class='tr'>P { color: rgb(255,0,0) } /* */</span> <span class='tr'>P { color: rgb(100%, 0%, 0%) }</span> <span class='tr'>napisy</span> <span class='tr'>"this is a 'string'"</span> <span class='tr'>"this is a \"string\""</span> <span class='tr'>'this is a "string"'</span> <span class='tr'>'this is a \'string\''</span> { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/11706/1/images/40/Kilka+uwag+kolorki+napisy+H1+%7B+color%3A+maroon+%7D.jpg", "name": "Kilka uwag kolorki napisy H1 { color: maroon }", "description": "P { color: #f00 } /* #rgb */ P { color: #ff0000 } /* #rrggbb */ P { color: rgb(255,0,0) } /* 0 - 255 */ P { color: rgb(100%, 0%, 0%) } napisy. this is a string this is a \ string\ this is a string this is a \ string\", "width": "800" }</p><p><span class="span-circle-num"> 42 </span> <span>Czego nie robić??!!</span> <span></span> <span></span> <span></span></p><p><span class="span-circle-num"> 43 </span> Co robić? http://www.csszengarden.com/<span></span> <span class='tr'>Na początek szukać szablonów?</span> <span class='tr'>Są ich tysiące np.</span></p><p><span class="span-circle-num"> 44 </span> <span>CMS</span> <span class='tr'>System zarządzania treścią (ang. 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ę przez redakcyjny personel nietechniczny. Kształtowanie treści i sposobu ich prezentacji w serwisie zarządzanym przez CMS odbywa się za pomocą prostych w obsłudze interfejsów użytkownika, zazwyczaj w postaci stron WWW zawierających rozbudowane formularze i moduły.(Wiki)</span></p><p><span class="span-circle-num"> 45 </span> <span>Zalety CMS</span> <span class='tr'>Bez znajomości programowania (html, css, php itp.) dają możliwość stworzenia stosunkowo rozbudowanych serwisów.</span> <span class='tr'>Przyjazny interfejs użytkownika.</span> <span class='tr'>Darmowe i płatne komponenty i szablony.</span> <span class='tr'>Wsparcie społeczności.</span></p><p><span class="span-circle-num"> 46 </span> <span>Przykłady CMS’ów</span> <span class='tr'>WordPress</span> <span class='tr'>Drupal</span> <span class='tr'>Joomla</span> <span class='tr'>I wiele wiele innych…</span></p><p><span class="span-circle-num"> 47 </span> Krótka prezentacja flash’a na eclipsie<span class='tr'>Flash -> actionScript +mxml pozwalają na stworzenie estetycznej, inteligentnej, wszechstronnej aplikacji.</span> <span class='tr'>Potrzebny FlashPlayer -> specjalny silnik rozumiejący technologie flash -> nie ma html</span> <span class='tr'>Eclipse -> DUŻE środowisko programistyczne dla wielu jezyków ->wspiera również html’a, css</span></p> </div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src='https://www.google.com/recaptcha/api.js'></script>
<!-- Box Modal -->
<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"><span aria-hidden="true">×</span></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" />
<i class="form-icon"></i> 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"><i class="fa fa-google"></i> Login with Google</a>
</div>
</div>
</div>
</div>
<!-- Box Footer -->
<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 © 2026 SLIDEPPTX.COM. All rights reserved.
</div>
<hr />
</div>
</div>
<div class="row">
<!-- Block footer -->
<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>
<!-- /Block footer -->
<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">
<i class="fa fa-facebook-square"></i> <span>Facebook</span>
</a>
</li>
<li class="twitter">
<a target="_blank" href="" title="Twitter">
<i class="fa fa-twitter-square"></i> <span>Twitter</span>
</a>
</li>
<li class="google-plus">
<a target="_blank" href="" title="Google Plus">
<i class="fa fa-plus-square"></i> <span>Google Plus</span>
</a>
</li>
</ul>
</section>
<!-- Block Newsletter module-->
<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">
<i class="fa fa-location-arrow"></i>
</button>
<input type="hidden" name="action" value="0">
</div>
</form>
</div>
</div>
<!-- /Block Newsletter module-->
</div>
</footer>
</div>
</div>
<!-- #footer -->
<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>
]]> | 