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

Transkrypt

1 Tworzenie stron internetowych z wykorzystaniem HTML5, JavaScript, CSS3 i jquery Łukasz Bartczuk

2 Moduł 1 Podstawy tworzenia stron internetowych

3 Agenda Podstawy stron internetowych Przegląd języka HTML Wprowadzenie do kaskadowych arkuszy styli (CSS) Wprowadzenie do języka JavaScript Wprowadzenie je biblioteki JQuery.

4 Podstawy stron internetowych Technologie internetowe Elementy składowe strony internetowej

5 Technologie internetowe kik.pcz.pl/lukasz_bartczuk/wyklad.html get kik.pcz.pl/lukasz_bartczuk/wyklad.html <html> <head> </head> <body> </body> kik.pcz.pl

6 Adres URL nazwa protokołu adres serwera nazwa katalogu nazwa pliku

7 Składowe strony internetowej Wygląd (CSS) Struktura (XHTML) Funkcjonalność (JavaScript) Dokument

8 Przegląd języka HTML Czym jest język HTML? Znaczniki Dokument HTML Podstawowe elementy języka HTML

9 Znaczniki (1) Język HTML składa się z znaczników Znacznik zawarty jest pomiędzy parą nawiasów < i > Każdy znacznik musi być zamknięty. Każdy znacznik posiada swoje znaczenie <div> <p>lorem ipsum. <img src="rys.jpg" /></p> </div>

10 Znaczniki (2) Znaczniki mogą być zagnieżdżane Każdy znacznik może posiadać atrybuty Atrybuty umieszczamy w znaczniku otwierającym <div> <p id="tresc">lorem ipsum. <img src="rys.jpg" /></p> </div>

11 Dokument HTML <!DOCTYPE html> <html> <head> <title>tytuł strony</title> </head> <body> Zawartość strony... </body> </html>

12 DEMO 1 Stworzenie podstawowej strony internetowej w Visual Studio 2012

13 Elementy HTML (1) Podstawowe <!DOCTYPE>,<html>,<body>,  Struktura <h1>-<h6>,<p>,<div>,<span>, <br />,<hr/> Formatowania <acronym>,<abbr>,<address>,<b>, <bdo>,<big>,<blockquote>,<code>, <del>,<dfn>,<em>,<i>,<ins>,<kbd>, <pre>,<q>,<samp>,<small>,<strong>, <sub>,<sup>,<tt>,<u>,<var> Formularze Tabele <form>,<input>,<textarea>,<button>, <select>,<optgroup>,<option>, <label>,<fieldset>,<legend> <table>,<caption>,<th>,<tr>,<td>, <thead>,<tbody>,<tfoot>,<col />, <colgroup>

14 Elementy HTML (2) Listy Programowanie Obrazy <ul>,<ol>,<li>,<dl>,<dt>,<dd> <script>,<noscript>,<object>, <param /> <img />,<map>,<area /> Metadane <head>,<title>,<meta> Style <style> Linki <a>, <link />

15 Elementy strukturalne Do elementów strukturalnych języka HTML zaliczamy: div-y paragrafy nagłówki span-y elementy blokowe element liniowy Elementy te mogą zawierać zarówno tekst jak i inne elementy HTML

16 Linki (1)

17 Linki (2) zewnętrzne <a href="adres_strony.html">link</a> wewnętrzne <a href="#nazwa">link</a> <div id="nazwa">zawartość do linku</div> do określonego miejsca na stronie <a href="adres_strony.html#nazwa">link</a>

18 Rysunki Znacznik<img /> Brak znacznika zmykającego <img src="rys.jpg" /> <img src="rys.jpg" alt="rysunek"/>

19 Tabele <table> <caption>podpis</caption> <tr><th>nagłówek 1</th> <th>nagłówek 2</th> <th>nagłówek 3</th> </tr> <tr><td>11</td> <td>12</td> <td>13</td> </tr> <tr><td>21</td> <td>22</td> <td>23</td> </tr> <tr><td>31</td> <td>32</td> <td>33</td> </tr> </table>

20 Listy Wyróżniamy trzy rodzaje list: Punktowane (<ul>) Numerowane (<ol>) Definicyjne (<dl>) Mogą zawierać jeden lub więcej pozycji (<li>)

21 DEMO 2 Stworzenie strony internetowej zawierającej podstawowe elementy języka HTML.

22 Wprowadzenie do CSS Czym są kaskadowe arkusze styli Składnia CSS i selektory Podstawowe style

23 Czym są kaskadowe arkusze styli Kaskadowe arkusze styli (ang. Cascade Style Sheets) pozwalają na zdefiniowanie wyglądu i układu strony internetowej.

24 Składnia CSS Informacje o wyglądzie strony są zapisywane w formie reguł Reguła zapisywana jest w postaci: selektor { } właściwość : wartość; właściwość : wartość; właściwość : wartość; Język jest czuły na wielkość znaków.

25 Miejsce umieszczania CSS miejsce umieszczenia reguł CSS w tagu HTML w części HEAD w osobnym pliku <p style="color:blue;">... </p> <p style="color:blue;">... </p> <head> <style type="text/css"> p {color: blue;} </style> </head> <link rel="stylesheet" type="text/css" href="style.css" />

26 Selektory proste Selektory HTML Klasy ID zależne niezależne

27 Selektory proste - HTML Selektory HTML dopasowują się do określonego rodzaju elementu HTML h1 {color:blue; text-decoration:underline;} p {color:black; text-style:italic;}

28 Selektory proste klasy niezależne Każdy element HTML może mieć przypisaną klasę, która pozwala łączyć kilka różnych elementów w grupę. Selektory klasy niezależne dopasowują się do grupy elementów z przypisaną określoną klasą.news {color:blue; text-decoration:underline;} <h1 class="news">jakiś tytuł 1</h1> <p class="news">jakiś paragraf 1</p> <h1>jakiś tytuł 2</h1> <p>jakiś paragraf 2</p>

29 Selektory proste klasy zależne Selektory klasy zależne dopasowują się do grupy elementów tego samego typu z przypisaną określoną klasą. h1.news {color:blue; text-decoration:underline;} p.news {color:black; text-style:italic;} <h1 class="news">jakiś tytuł 1</h1> <p class="news">jakiś paragraf 1</p> <h1>jakiś tytuł 2</h1> <p>jakiś paragraf 2</p>

30 Selektory proste ID Każdy element HTML może mieć przypisany identyfikator, który pozwala jednoznacznie ten element na stronie. Selektory ID dopasowują się do tylko do elementu z określonym identyfikatorem. #newssuperwazny {color:blue; text-decoration:underline;} #news {color:black; text-decoration:underline;} <h1 id="newssuperwazny">jakiś tytuł 1</h1> <p id="news">jakiś paragraf 1</p> <h1>jakiś tytuł 2</h1> <p>jakiś paragraf 2</p>

31 Grupowanie selektorów sel1,sel2, { właściwość : wartość; właściwość : wartość; właściwość : wartość; } h1,h2,h3 {color:blue; text-decoration:underline;}

32 Selektory pochodne p span {color:orange; text-decoration:underline;} <p id="news"> Jakiś paragraf 1 <span> bardzo <span> interesujące </span> cytowanie </span> Dalsza część paragrafu 1 <span>kolejne interesujące cytowanie</span> Dalsza część paragrafu 1 </p>

33 Selektory dzieci p span {color:orange;} p>span {color:red;} <p id="news"> Jakiś paragraf 1 <span> bardzo <span> interesujące </span> cytowanie </span> Dalsza część paragrafu 1 <span>kolejne interesujące cytowanie</span> Dalsza część paragrafu 1 </p>

34 Selektory dzieci p span {color:orange;} p>span {color:red;} <p id="news"> Jakiś paragraf 1 <span> bardzo <span> interesujące </span> cytowanie </span> Dalsza część paragrafu 1 <span>kolejne interesujące cytowanie</span> Dalsza część paragrafu 1 </p>

35 Selektory atrybutów (1) Są dopasowywane do elementów posiadających określone atrybuty lub ich wartości [atrybut] reguła jest dopasowana, gdy element ma przypisaną wartość dla atrybutu "atrybut" [atrybut=wartość] reguła jest dopasowywana, gdy atrybut "atrybut" ma dokładnie wartość "wartość". [atrybut~=wartość] reguła jest dopasowana, gdy atrybut "atrybut" ma przypisaną listę wartości oddzielonych spacjami, z których jedna jest równa "wartość" [atrybut =wartość] reguła jest dopasowana, gdy atrybut ma wartość "wartość" lub, gdy rozpoczyna się od wartości "wartość" po której występuje znak "-".

36 Selektory atrybutów (2) input[readonly] {color:blue;} <input type="text" readonly="readonly" /> a[href=" {color:blue;} <a href=" img[alt~="opis"] {border:1px solid red;} <img alt="jakiś opis" />

37 Pseudo-klasy a:link {color:blue;} a:visited {color:orange;} a:hover {color:red;} a:active {color:green;} <a href="

38 Pseudo-elementy (1) p:first-letter {font-size:50px; color:red; float:left; margin-right:10px;} p:first-line {color:yellow;} <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim nulla eget neque pellentesque ut vehicula massa blandit. Donec mattis condimentum pharetra. Donec nec enim sit amet arcu pretium congue eget eu neque. Donec metus enim, dignissim aliquet tempus ac, rhoncus at elit. Vivamus in felis libero, et semper elit. Quisque non orci ut sapien ultrices consectetur non nec arcu. </p>

39 Pseudo-elementy (2) p.news:before {content:"coś ważnego: ";} p.news:after {content:"!!!";} <p class="news">jakiś paragraf 1</p>

40 Jednostki i kolory w CSS Jednostki CSS Kolory CSS względne em ex px bezwzględne mm cm in pt pc notacja heksadecymalna: color: #808000; notacja dziesiętna: color: rgb(128,128,0); słowa kluczowe: color:olive

41 Podstawowe właściwości CSS (1) Ustawienia czcionek font: <font-weight> <font-style> <font-variant> <font-size>/<line-height> <font-family> p {font: normal italic 2em/1.5em times,serif;} Wyrównanie tekstu w poziomie: text-align:left; left center right justify

42 Podstawowe właściwości CSS (2) Dekorowanie tekstu text-decoration: underline; none line-through underline overline blink Kolor tekstu color: #FF0000;

43 Podstawowe właściwości CSS (3) Tło background: background-color background-image background-repeat background-attachment background-position background: yellow url(tlo.jpg) repeat-x fixed 0 left;

44 Model pudełkowy CSS (1) Ramka (border) Linia zewnętrzna (outline) Zawartość Margines (margin) Dopełnienie (padding)

45 Model pudełkowy CSS (3) Dopełnienie Margines padding:10px; padding:10px 5px; padding:10px 5px 10px; padding:10px 5px 10px 5px; margin:10px; margin:10px 5px; margin:10px 5px 10px; margin:10px 5px 10px 5px;

46 Model pudełkowy CSS (4) Renderowanie elementu display:block; none, inline, block, list-item, inline-block, Wyświetlanie elementu visibility:hidden; visible, hidden

47 Model pudełkowy CSS (5) "Wystawanie" zawartości overflow overflow-x overflow-y hidden visible scroll auto

48 Model pudełkowy CSS (5) Pływalność elementu float:left; left, right, none clear: left; left, right, both, none

49 Model pudełkowy CSS (6) Pozycja elementu position:relative; static, relative, absolute, fixed top:12px; left:12px; bottom:12px; right:12px;