Hello HTML

HyperText

Markup

Language

Historia HTML

(bla bla bla...)

HISTORIA HTML

1995/7 - Specyfikacje HTML od 2.0 do 4.0

2000 - W3C wypuszcza wersję XHTML 1.0

2004 -  WHATWG pracuje nad rozwojem HTML 

2007 - W3C wykorzystuje część specyfikacji WHAT

2009 - Specyfikacja XHTML 2.0 od W3C

HTML 5

W3C

HISTORIA HTML

HTML

WHATWG

Specyfikacja oparta o wersje i tzw. milestony

Żyjąca, ciągle rozwijana specyfikacja

<znacznik atrybut="">

<!-- Komentarz -->

Domykanie znaczników

Edytory HTML

Składnia dokumentu

!doctype

html

head

body

link | meta | style

SKŁADNIA DOKUMENTU

WALIDACJA

DEBUGOWANIE

CZYTELNOŚĆ

UTRZYMANIE

Elementy

blokowe i liniowe

... i cała masa innych w HTML5

akapity <p>

listy <ul> i <ol>

nagłówki <h1> do <h6>

sekcje <section>

artykuły <article>

ELEMENTY BLOKOWE

ELEMENTY LINIOWE

elementy <span>

linki <a>

ważne treści <em>

pochylone <i>

pogrubione <b>

Dokmykanie elementów

Blokowych i Liniowych

Najważniejsze znaczniki

Najczęściej używane

Znaczniki HTML

ARTICLE

ASIDE

SECTION

DIV

SYSTEMATYKA ZNACZNIKÓW

Obrazy i ścieżki

Hiperłącza

oops!

Hello CSS

Cascading
Style
Sheets

Czym jest CSS?

Style CSS pozwalają rozdzielić strukturę dokumenu (HTML) od jego wyglądu (warstwa prezentacji). CSS nie jest ani markupem, ani językiem programowania.


kto {   co:   jak;  }

Reguła CSS

Selektor

Właściwość

Wartość


h1 {   color:   red;  }

Przykład

Selektor

Właściwość

Wartość


#stopka {  

      font-family:   'Helvetica', 'Arial';
      margin: 10px 15px;
      color: #009988;

}

Przykład

Style Inline

<p style="color: blue;">To będzie niebieski tekst</p>

Style w sekcji <head>

<head>
    <style type="text/css">
      p {color: red;}
    </style>
</head>

Style w osobnym pliku .css

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

style.css

home.html

onas.html

klienci.html

kontakt.html

Typy selektorów

Tag

Klasa

Identyfikator

<p>To jest akapit tekstu</p>

p { color: black; }
<p class="wazny">To jest akapit tekstu</p>

.wazny { color: blue; }
<p id="superwazny">To jest akapit tekstu</p>

#superwazny { color: red; }

Prosty

Złożony

Grupowanie selektorów

p { color: black; }
p.wazny { color: blue; }
h1, h2, h3, h4 { color: red; }

Baaardzo złożony

#news #lead .lead-container p.wazny { color: blue; }

Kaskadowość CSS

WAŻNE STYLE UŻYTKOWNIKA

WAŻNE STYLE AUTORA

STYLE AUTORA

STYLE UŻYTKOWNIKA

STYLE PRZEGLĄDARKI

HIERARCHIA STYLÓW CSS

Style Inline

Style w <head>

Style w .css

#identyfikator

.klasa

tag

Specyficzność

TAG

KLASA

ID

0

0

0

TAG

KLASA

ID

0

0

1

p { color: black; }

TAG

KLASA

ID

1

0

1

.lead p { color: black; }

TAG

KLASA

ID

2

0

1

.header .lead p { color: black; }

121

#news .header .lead p { color: black; }

113

#news .lead p a span { color: black; }

043

.sekcja .historie .news .lead p a span { color: black; }

Pisz jak najkrótsze selektory

Nie używaj identyfikatorów

Używaj intuicyjnych nazw klas

Osadzaj style wyłącznie z pliku .css

Nigdy nie używaj !important

DOBRE PRAKTYKI CSS

Używaj pliku z reset.css

CSS Box Model

width

height

Lepiej zaliczać się do niektórych, niż do wszystkich.

padding

margin

border

padding

Lepiej zaliczać się do niektórych, niż do wszystkich.

margin

content width

height

total width

box-sizing: content-box

box-sizing: border-box

width = border + padding + content

border

border-left

border-right

border-top

border-bottom

border-style

border-color

border: 10px 5px 3px 6px solid black;

http://tympanus.net/codrops/css_reference/border-style/

Jednostki

Absolutne

  • in — 1in = 2.54cm
  • cm
  • mm
  • pt —  1/72 z 1in
  • pc — 1pc = 12pt
  • px — 1px = 0.75pt
p { margin: 20px; }

px

Tekst...

16px

ekrany HiDPI

Tekst...

Tekst...

@2x

Tekst...

Reference Pixel

The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm's length, 1px thus corresponds to about 0.26 mm (1/96 inch).

Relatywne

  • %
  • em —  1em = 100%
  • rem
  • ex (exes)
  • ch (character)
  • vw — szerokość okna
  • vh — wysokość okna
  • vmin — min wysokość
  • vmax — max wysokośc

em

body {
    font-size: 16px;
}

p { 
    font-size: 2em;
    padding: 2em;
}

rem

html {
    font-size: 16px;
}

p { 
    font-size: 2rem;
    padding: 2rem;
}

32px
64px

32px
32px

px

rem

%

Kolory w CSS

body { 
    color: black;
}
a {
    color: orange;
}

Nazwy

body { 
    color: #4dcad7;
}

Wartości szesnastkowe

#4dcad7

R:4d

G:ca

B:d7

R: 77 G: 202 B: 215

body { 
    color: rgba(10, 20, 30, 1);
}

Wartości RGBA

red: 0 - 255

green: 0 - 255

blue: 0 - 255

alpha: 0 - 1

p {
  color: hsla(170, 50%, 45%, 1);
}

Wartości HSLA

hue: 0 - 360

saturation: 0 - 100%

brightness: 0 -100%

alpha: 0 - 1

Tekst w CSS

Generyczne rodziny

body  {
    font-family: sans-serif;
}
  • serif
  • sans-serif
  • monospace
  • cursive
  • fantasy
body  {
    font-family: Arial, Verdana, sans-serif;
}
body  {
    font-size: 16px;
}
body  {
    font-style: italic;
}
body  {
    font-weight: bold;
}
body  {
    line-height: 1.5;
}
body  {
    text-transform: uppercase;
}
body  {
    text-align: right;
}
body  {
    font-kerning: normal;
}
body  {
    text-indent: 1em;
}

Właściwości

body { 
    font: italic small-caps bold 12px/1.6 Arial, sans-serif;
}

Właściwość font

  • font-style
  • font-variant
  • font-weight
  • font-size
  • line-height
  • font-family
p { 
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

Cień pod tekstem

  • x
  • y
  • rozmycie
  • kolor

Skąd przeglądarka bierze fonty?

Fonty, które renderuje przeglądarka, są domyślnie zaczytywane z systemu użytkownika, co oznacza, że muszą być zainstalowane, aby poprawnie wyświetlały się na stronie WWW.

 

Na stronie możemy podać wiele rodzin, które będą wykorzystane jako tzw. fallback, lub skorzystać z generycznych _sans i _serif

Bezpieczne fonty

Bezpiecznych webowych fontów możesz używać bez przeszkód na każdej stronie i w każdej aplikacji, ponieważ są one preinstalowane w systemie użytkownika, a co za tym idzie, będą poprawnie wyświetlały się bez konieczności dołączania ich do strony na każdej platformie.

 

Często stosuje się ten zestaw fontów jako tzw. fallback. Są one także poprawnie renderowane w klientach pocztowych.

  • Arial
  • Courier New, Courier
  • Garamond
  • Georgia
  • Lucida
  • Tahoma
  • Times New Roman, Times
  • Trebuchet
  • Verdana
  • Palatino

Jak korzystać?
Możesz wykorzystać regułę @font-face, aby osadzić dowolny font, który posiadasz, na Twojej stronie WWW

 

Pamiętaj!
Muszą na to zezwalać zapisy licencyjne danego fonta

@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}

Reguła @font-face

<link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

body {
  font-family: 'Open Sans', sans-serif;
}

Osadzanie fontów

Fonty hostowane najczęściej korzystają z fragmentu kodu JavaScript na naszej stronie.

Wykorzystanie web vs desktop

Pamiętaj o tym że aby projektować interfejs, musisz mieć font zainstalowany w systemie.

Hostowane fonty

Tło w CSS

body { 
    background-color: #554433;
}

Wypełnienie

body { 
    background-image: linear-gradient(white, grey);
}
body { 
    background-image: url(katalog/plik.jpg);
}

Obrazek w tle

body { 
    background-repeat: repeat-x;
}
body { 
    background-position: center 20px;
}
body { 
    background: #00ff00 url("grafika.jpg") no-repeat fixed center; 
}
body { 
    background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
}
body { 
    background-size: cover;
}

Układ dokumentu

PRZELEWANIE

KOLEJNOŚĆ

ZAGNIEŻDŻANIE

UKŁAD DOKUMENTU

NORMALNY UKŁAD

FLOAT - OPŁYWANIE ELEMENTÓW

POZYCJONOWANIE ABSOLUTNE / RELATYWNE

UKŁAD DOKUMENTU

Pozycjonowanie

section { 
    position: absolute;
}
section { 
    position: relative;
}
section { 
    position: fixed;
}
section { 
    z-index: 100;
}

Float - opływanie

section { 
    float: left;
}
section { 
    clear: both;
}

Przypisując float element otrzymuje display: block

Zastosuj clearfix po floacie

Trick z overflow: auto

Position relative działa dla obecnej pozycji

Position absolute działa dla pozycji w kontekście
pierwszego rodzica z relative

ZAPAMIĘTAJ

Media i Rozdzielczości

Ekran (rozdzielczość)

Przeglądarka

Viewport

Adresowanie urządzeń

<link rel="stylesheet" media="screen" href="styledlaekranu.css">
  • all
  • print
  • screen
  • speech

Media Queries

@media only screen {
    body {
        background-color: lightblue;
    }
}
@media only screen and (max-width: 500px) {
    body {
        background-color: lightblue;
    }
}
@media screen and (max-width: 699px) and (min-width: 520px) {
    ul li a {
        padding-left: 30px;
        background: url(ikonka.png) left center no-repeat;
    }
}

Kurs HTML i CSS

By eduweb

Made with Slides.com

Kurs HTML i CSS

  • 614

More from eduweb