&
Pracuję z
Pracuję w
ZROZUMIEĆ INTERNET
SŁOWNICZEK POJĘĆ
HTML
CSS
JavaScript
PHP
Web Master
Doctype
Web Developer
Download
Front-end
Serwer WWW
Upload
Baza danych
WWW
W3C
Front-end
Back-end
FTP
JAK DZIAŁA INTERNET
Czyli wprowadzenie do świata Web Developerów
W ŚWIECIE WEBDEVELOPMENTU
CZYLI GDZIE SIĘ OBECNIE ZNAJDUJEMY I DOKĄD ZMIERZAMY
Front-end Developer
Back-end Developer
Kilka egzystencjalnych pytań...
...czyli wprowadzenie do HTML'a.
TROCHĘ HISTORII
1991 - HTML
1994 - HTML 2
1996 - CSS 1
1997 - HTML 4
1998 - CSS 2
2000 - XHTML 1
2009 - HTML 5 i CSS 3
PODSTAWOWA SKŁADNIA DOKUMENTU HTML
<!Doctype html>
<html>
<head>
<title>To jest tytuł strony</title>
</head>
<body>
...
</body>
</html>Doctype'owy zawrót głowy
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Doctype'owy zawrót głowy
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Doctype'owy zawrót głowy
HTML 5
<!DOCTYPE html>
<TAGI> </TAGI>
BUDOWA TAGÓW
<div>...</div>
<h1>Tytuł artykułu</h1>
<meta>
<hr>
<img>
<input>
Tagi domykane
Tagi samo-domykające
TAGI PODSTAWOWE
+ TAGI SPECJALNE
GRUPY TAGÓW
ELEMENTY BLOKOWE
1. Zajmują całą szerokość swojego rodzica
2. Możemy stosować właściwości modelu blokowego
3. W elementach blokowych możemy umieszczać zarówno elementy blokowe jak i liniowe
ELEMENTY LINIOWE
1. zajmują tylko przestrzeń, którą obejmują
2. nie możemy stosować właściwości modelu blokowego
3. W elementach liniowych możemy umieszczać tylko elementy liniowe
ELEMENTY LINIOWE-BLOKOWE
1. Zajmują tylko przestrzeń, którą obejmują (cecha elementów liniowych)
2. Możemy stosować właściwości modelu blokowego (cecha elementów blokowych)
3. Umieszczając elementy w elementach liniowo-blokowych należy wziąć pod uwagę domyślny typ elementu i według tego typu postępować
TAGI I ICH ATRYBUTY
<div id="header" class="custom-header">...</div>
<meta name="viewport" content="initial-scale=1">
<hr>
<img src="img/obrazek.jpg" alt="Obrazek">
Tagi domykane
Tagi samo-zamykające
Atrybuty podstawowe
Atrybuty specjalne
CZYLI JAK PRZYGOTOWAĆ STRONĘ DO POZYCJONOWANIA
HTML5 + SEO
1. Ustawienie znaczników meta: title oraz description
2. Użycie tagów semantycznych dostępnych w HTML5
3. Odpowiednie dopasowanie nagłówków
3 RZECZY O KTÓRYCH WARTO PAMIĘTAĆ
TAGI META: TITLE I DESCRIPTION
<section>
Reprezentuje ogólnie dokument lub jakąś sekcję tematyczną na stronie.
Tag posiada znaczenie semantyczne!
Warto użyć dla listy artykułów, postów, produktów. Ten tag może zostać użyty wewnątrz dowolnego tagu blokowego.
Definicja
Do czego się go używa?
Użycie w praktyce
Grupowanie powiązanych tematycznie treści.
Może być wykorzystywany wielokrotnie na stronie.
<article>
Reprezentuje kompletną, autonomiczną treść na stronie, która może być prezentowana oddzielnie, w oderwaniu od reszty strony i nie traci swojego sensu.
Treść artykułu, postu, karta produktu, komentarz, opinia.
Definicja
Do czego się go używa?
Użycie w praktyce
Może być wykorzystywany wielokrotnie na stronie.
Zagregowanie informacji o jakimś bycie.
Tag posiada znaczenie semantyczne!
<header>
Służy do grupowania elementów wprowadzających lub nawigacyjnych np. w sekcji czy artykule.
Tytuł artykułu wraz z miniaturką, informacjami o autorze, dacie publikacji.
Nazwa produktu wraz z miniaturką.
Definicja
Użycie w praktyce
Może być wykorzystywany wielokrotnie na stronie.
Tag posiada znaczenie semantyczne!
<footer>
Służy do grupowania elementów, które mogłyby się znaleźć w stopce sekcji czy artykułu.
Tagi przypisane do artykułu, widgety społecznościowe.
Definicja
Użycie w praktyce
Może być wykorzystywany wielokrotnie na stronie.
Tag posiada znaczenie semantyczne!
<aside>
Reprezentuje treść powiązaną z sekcją, w której <aside> się znajduje, ale treść ta nie jest kluczowa dla zrozumienia treści tej sekcji.
Definicja
Użycie w praktyce
Może być wykorzystywany wielokrotnie na stronie.
Tag posiada znaczenie semantyczne!
Użyty wewnątrz tagu <article> powinien zawierać treść bezpośrednio związaną z treścią np. słownik lub spis treści.
Użyty poza <article> treść powinna być związana ze stroną np. dodatkowa nawigacja, kategorie na blogu czy też reklamy jeżeli są kontektowe.
<nav>
Reprezentuje sekcję na stronie, w której znajdują się linki do podstron lub innych stron. W skrócie - główna nawigacja serwisu.
Definicja
Użycie w praktyce
Może być wykorzystywany TYLKO RAZ na stronie.
Tag posiada znaczenie semantyczne!
Główna nawigacja strony.
<main>
Reprezentuje sekcję na stronie, w której znajduje się główna treść.
Definicja
Powinien być wykorzystany TYLKO RAZ na stronie.
Tag posiada znaczenie semantyczne!
<figure>
Reprezentuje pewien wycinek treści (np. artykułu), który jest autonomiczny, a dodatkowo usunięcie tego elementu nie wpłynie na odbiór reszty treści, którą wzbogaca.
Definicja
Może być wykorzystywany wielokrotnie.
Tag posiada znaczenie semantyczne!
Może posiadać podpis/legendę dodaną za pomocą tagu: <figcaption>.
Użycie w praktyce
Element opakowujący obrazek, tabelkę, diagram wraz z podpisem lub legendą w treści artykułu lub posta.
SEMANTYKA W HTML
SEMANTYKA W HTML
STARE TAGI NOWE ZNACZENIE
DOCUMENT OUTLINE
DOCUMENT OUTLINE
Co to nam daje?
CSS
SKŁADNIA CSS
p{
font-size: 16px;
font-weight: bold;
text-align: center;
}
.category-menu{
width: 250px;
height: 300px;
float: left;
}
#main-nav{
height: 30px;
}CSS + HTML
Sposoby umieszczania w dokumentach HTML
RESET VS NORMALIZACJA
SELEKTORY CSS
SELEKTORY #1
/* Wszystkie paragrafi */
p {...}
/* Wszystkie elementy z klasą "menu-item" */
.menu-item {...}
/* Element o id "main-nav" */
#man-nav {...}
/* Wszystkie elementy z atrybutem href */
[href] {...}
/* Wszystkie elementy z atrybutem rel ustawionym na nofollow */
[rel="nofollow"] {...}
/* Wszystkie elementy z atrybutem href, który zaczyna się od "file" */
[href^="file"] {...}
/* Wszystkie elementy z atrybutem href, który kończy się na ".pdf" */
[href$=".pdf"] {...}
/* Wszystkie elementy z atrybutem href, w którym znajduje się ciąg "smile" */
[href*="smile"] {...}SELEKTORY #2
/* Wszystkie tagi em strong i element z klasą hl */
em, strong, .hl {...}
/* Wszystkie paragrafy znajdujące się w elementach z klasą .section */
.section p {...}
/* Wszystkie tagi li będące bezposrednim potomkiem elementu z klasą "main-menu" */
.main-menu > li {...}
/* Wszystkie tagi a, które znajdują się w elementach li
będących bezposrednimi potomkami elementu z klasą "main-menu" */
.main-menu > li a {...}
SELEKTORY #3
/* Wszystkie tagi strong posiadające klasę "hl" */
strong.hl {...}
/* Tag ul posiadający identyfikator "main-nav" */
ul#main-nav {...}
/* Tag ul posiadający identyfikator "main-nav" i klasę "custom-style" */
ul#main-nav.custom-style {...}
/* Tag ul posiadający identyfikator "main-nav" i klasy "custom-style" oraz "big" */
ul#main-nav.custom-style.big {...}
/* Wszystkie tagi "a", których wartosć atrybutu href kończy się na ".pdf" */
a[href$=".pdf"] {...}PSEUDO SELEKTORY
/* Wszystkie elementy a, na któych znajduje się kursor myszki */
a:hover {...}
/* Wszystkie odwiedzone linki */
a:visited {...}
/* Wszystkie tagi <li>, które są pierwszymi potomkami */
li:first-child {...}
/* Wszystkie tagi <p>, które są ostatnimi potomkami */
p:last-child {...}
/* Każdy co drugi (przysty) paragraf w swoim rodzicu */
p:nth-child(2n) {...}
/* Każdy nieprzysty paragraf w swoim rodzicu */
tr:nth-child(odd) {...}
/* Każdy przysty paragraf w swoim rodzicu */
td:nth-child(even) {...}
/* Każdy tag <p>, który nie posiada klasy "hl" */
p:not(.hl) {...}SIŁA SELEKTORÓW
|atrybut style| |id| |klasa/pseudo-klasa/atrybut| |element/pseudo-element|<ul id="main-nav" class="custom-styles">
<li></li>
</ul>ul{
font-size: 10px;
}
.custom-styles{
font-size: 11px;
}
ul.custom-styles{
font-size: 44px;
}
#main-nav{
font-size: 6px;
}
ul#main-nav{
font-size: 22px;
}
ul#main-nav.custom-styles{
font-size: 12px;
}Szkolenie HTML5 i CSS3
By Maciej Żukiewicz
