docTworzenie stron Tworzenie stron internetowych internetowych z
download 
Reklamacja Transkrypt
Tworzenie stron Tworzenie stron internetowych internetowych z
Tworzenie stron internetowych
z wykorzystaniem HTM5,
JavaScript,
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
• Nowe elementy w CSS 3.0
Co nowego w HTML 5
• Czym jest HTML 5?
• Co nowego wprowadza HTML 5
Czym jest HTML 5
• Jest to nowa wersja języka HTML
• Stanowi połączenie HTML + CSS 3.0 + API JavaScript
1991
HTML 1.0
1995
HTML 2.0
1997
HTML 3.0
1997
HTML 4.0
2007
Początek
HTML 5.0
Co nowego wprowadza HTML 5
• Nowe elementy strukturalne
• Nowe elementy formularzy
• Upraszcza niektóre elementy tj. deklaracje DOCTAPE
i ustawianie strony kodowej
• Nowe elementy VIDEO i AUDIO
• Umożliwia tworzenie grafiki za pomocą CANVAS
• Przechowywanie danych po stronie klienta
• Umożliwia operacje na plikach
• Ułatwia wykorzystanie technologii Drag & Drop
• Geolokacja
Nowe elementy HTML 5
• Nowe elementy strukturalne
• Po co?
• Nowe elementy blokowe i liniowe
• Nowe elementy interaktywne
• Nowy element nawigacyjny
Nowe elementy strukturalne
HTML 5 wprowadza następujące nowe elementy
• Article
• Section
• HGroup
• Header
• Footer
• Section
• Address
• Nav
• Aside
<!DOCTYPE html>
<html>
<body>
<header>
<h1>Nagłówek</h1>
<nav><ul><li>nawigacja</li></ul></nav>
</header>
<section>
<article><p>Jakaś zawartość</p></article>
</section>
<footer><p>informacje w stopce</p></footer>
</body>
</html>
Po co?
<!DOCTYPE html>
<html>
<body>
<header>
<h1>Nagłówek</h1>
<nav>
<ul>
<li>nawigacja</li>
</ul>
</nav>
</header>
<section>
<article>
<p>Jakaś zawartość</p>
</article>
</section>
<footer>
<p>informacje w stopce</p>
</footer>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<div id="header">
<h1>Nagłówek</h1>
<div id="nav">
<ul>
<li>nawigacja</li>
</ul>
</div>
</div>
<div class="section">
<div class="article">
<p>Jakaś zawartość</p>
</div>
</div>
<div id="footer">
<p>informacje w stopce</p>
</div>
</body>
</html>
Nowe elementy blokowe i liniowe
• Nowy semantyczny element blokowy: <figure>
• Może zawierać <figcaption>
<figure>
<img src="obrazek.jpg" alt="obrazek"/>
<figcaption>Podpis</figcaption>
</figure>
• Nowe semantyczne elementy liniowe
•
•
•
•
•
<mark>
<meter>
<progress>
<output>
<time>
Nowe elementy interaktywne
Do nowych elementów interaktywnych wprowadzonych
w HTML 5.0 należą:
• <details>
• <summary>
• <menu>
• <command>
<details>
<summary>
Podsumowanie
</summary>
<p>
Zawartość
</p>
</details>
Aktualnie niewspierane
Nowy element nawigacyjny
• Znacznik <nav>
• Definiuje obszar nawigacji na stronie
• Umieszczony wewnątrz znacznika <article> określa
nawigację wewnątrz strony
• Umieszczony w innym miejscu określa nawigację pomiędzy
stronami
Nowe elementy w formularzach
• Nowe elementy w formularzach
• Nowe atrybuty
• Walidacja danych
Nowy elementy formularzy
Nowe typy znacznika <input>
Rodzaj
elementu
Wsparcie
Rodzaj
elementu
color
search
date
tel
datetime
time
datetime-local
url
email
week
month
number
range
Nowe atrybuty
Atrybut
Wsparcie
Atrybut
autocomplete (F/I)
list (I)
autofocus (I)
min/max (I)
form (I)
multiple (I)
formaction (I)
novalidate (F)
formenctype (I)
pattern (I)
formmethod (I)
placeholder (I)
formnovalidate (I)
required (I)
formtarget (I)
step (I)
height/width (I)
Nowe atrybuty
Atrybut
Wsparcie
Atrybut
autocomplete (F/I)
list (I)
autofocus (I)
min/max (I)
form (I)
multiple (I)
formaction (I)
novalidate (F)
formenctype (I)
pattern (I)
formmethod (I)
placeholder (I)
formnovalidate (I)
required (I)
formtarget (I)
step (I)
height/width (I)
Walidacja danych
HTML 5 pozwala na walidację danych wprowadzonych do formularzy.
<input type="text" pattern="\d\d-\d\d\d" />
<input type="text" required />
<input type="number" min="10" max="20" />
Co nowego w CSS 3.0
• Nowe selektory
• Nowe właściwości tła i ramek
• Transformacje
• Animacje
• Efekty tekstowe
• Media
• Układ strony
Nowe selektory
• Selektory atrybutów: rozpoczyna się na…, kończy się na…,
zawiera …
• Strukturalne pseudo-klasy: :nth-child, :first-child, :first-of-type,
:enabled, :disabled
• Negacja :not(selektor)
a[href^="www."],
tr:nth-child(even) { color:red; }
p > :not(span:last-child) { color:red; }
Nowe właściwości tła i ramek
• Nowe właściwości tła:
• background-size
• background-origin
• background-clip
• Wsparcie dla wielu obrazów tła
• Tła gradientowe
• Nowe właściwości ramek
• border-radius
• border-image
Transformacje
• CSS3 pozwala na transformacje elementów zarówno 2D,
jak i 3D
• Dwuwymiarowe transformacje pozwalają na obracanie,
rozciąganie, skalowanie
Animacje
• CSS3 pozwala tworzyć proste animacje
• Wykorzystuje się do tego reguły @keyframe i właściwość
animation
@keyframes animacja
{
0%
{ left: 0px; }
25% { left: 25px; background: blue; }
50% { left: 50px; background: red; }
75% { left: 75px; background: blue; }
100% { left: 100px; }
}
div
{
animation: animacja 5s linear 3s
infinite alternate ;
}
Efekty tekstowe
• Możliwość wprowadzania cienia dla tekstu: text-shadow
• Możliwość ściągania czcionek @font-face
h1
{
text-shadow: 3px 8px 4px #0000ff;
{
@font-face
}
font-family: czcionka;
src: url('czcionka.woff');
}
Media
• Pozwala na tworzenie styli na różnego rodzaju urządzenia
• Podaje się nazwę rodzaju urządzenia i warunki jakie musi
spełniać
• Jeżeli te warunki są spełnione style ma zastosowanie
div
{
border: solid 1px black;
}
@media screen and (min-width:400px)
{
div
{
border: none;
}
}
Układ strony
• Pozwala na tworzenie układu wielokolumnowego
div
{
width: 100px;
column-width: 45px;
column-count: 3;
column-gap: 1em;
}
