CODE CARROTS

HTML/CSS

 

 

 

edycja 1  Warszawa 2015

Link do prezentacji

http://goo.gl/4F1pmy

Praca domowa na rozgrzewkę

1. Który z kawałków kodu HTML jest poprawny i dlaczego?

<body>
  <h1>Anatomia kota</h1>
  <p id="text">Pazury kota są ostre.</p>
  <div>
    <p>Koty mogą spać nawet 20 godzin w ciągu doby.</p>
    <p id="text">Koty są zoofagami.</p>
    <p id="text">Młody kot ma 26 zębów.</p>
  </div>
</body>

<body>
  <h1>Anatomia kota</h1>
  <p class="text">Pazury kota są ostre.</p>
  <div>
    <p>Koty mogą spać nawet 20 godzin w ciągu doby.</p>
    <p class="text">Koty są zoofagami.</p>
    <p class="text">Młody kot ma 26 zębów.</p>
  </div>
</body>

HTML

2. Który z kawałków kodu HTML jest poprawny i dlaczego?

<body>
  <h1 id="title first">Kot domowy</h1>
  <p id="text red">Nie znosi złego traktowania.</p>
</body>

<body>
  <h1 class="title first">Kot domowy</h1>
  <p class="text red">Nie znosi złego traktowania.</p>
</body>

<body>
  <h1 id="title" class="first">Kot domowy</h1>
  <p id="text" class="red">Nie znosi złego traktowania.</p>
</body>

HTML

http://css-tricks.com/the-difference-between-id-and-class

3. Jakiego koloru będzie tekst?

<h1>Kocie emocje</h1>
<p id="intro" class="color">Stan emocjonalny <span>kota</span> można  
odczytać, obserwując jego zachowanie.</p>
<p><span class="color">Ogon</span> pomagania mu w utrzymaniu równowagi, 
sygnalizuje również nastrój zwierzęcia. <span>Ogon</span> ustawiony 
na wprost oznacza, że kot jest spokojny.</p>

p {
    color: red;
}
p#intro {
    color: green;
} 
p.color, p .color {
    color: orange;
}
span {
    color: blue;
}

CSS

HTML

Elementy block, inline

Cechy elementów blokowych (block):

  • zawsze wyświetlają się od nowego wiersza,
  • można im nadawać szerokość (width) i wysokość (height),
  • jeśli ich szerokość nie jest zdefiniowana
    to zajmują całą szerokość rodzica,
  • jeśli ich wysokość nie jest zdefiniowana,
    to dostosowują się do wysokości dzieci (wyjątek elementy z float i position),
  • można im nadać margin i padding,
  • ignorują właściwość CSS vertical-align.

Przykłady: <h1>, <p>, <div>, <ul>, <li>

 

Cechy elementów wewnątrzwierszowych (inline):

  • nie zaczynają się od nowego wiersza, zajmują tyle miejsca, ile ich zawartość potrzebuje.
  • ignorują nadaną szerokość (width) i wysokość (height),
  • można im nadać margin (tylko left i right) i padding,
  • akceptują właściwość CSS vertical-align.

Przykłady: <a>, <span>

 

 

 

www.impressivewebs.com/difference-block-inline-css/​

Nie możemy umieścić elementu block w elemencie inline, z jednym wyjątkiem: <a> może zawierać zarówno elementy block i inline.

Szczegółowość selektorów

http://css-tricks.com/specifics-on-css-specificity

  1. atrybut style="..."

  2. id

  3. class, pseudoklasy, atrybuty

  4. elementy, pseudoelementy

Najważniejszy

Im bardziej szczegółowe są selektory tym są ważniejsze. Gdy nie możemy określić, który selektor jest bardziej szczegółowy, ważniejsze będą te deklaracje, które zostaną umieszczone na końcu.

Najmniej ważny

Projekt, który zrobimy

Wymiary

CSS

div {
    width: 400px;
    height: 200px;
}
  • auto - domyślnie. height: auto; - przeglądarka automatycznie dostosowywuje wysokość elementu do jego zawartości.
  • px - wymiary moga być podane również w innych jednostkach: em, rem.
  •  % - wyliczane względem rodzica elementu. Jeśli element nie znajduje się wewnątrz innego elementu, względem wymiarów okna przeglądarki.

 

Obrazy na stronie

<img src="image/logo.png" alt="Logo mojej firmy" />

<img src="image/dekoracja.jpg" alt="" />

Odpowiednio dobieraj format obrazka: jpg, png, gif, svg. Używaj obrazy o odpowiednich rozmiarach i nie zapisuj ich w dużej rozdzielczości.
W internecie można znaleźć darmowe zdjęcia: https://picjumbo.com,  http://finda.photo lub płatne:  http://www.shutterstock.com,

http://klosinski.net/banki-z-darmowymi-zdjeciami/

alt - tekst alternatywny będący opisem obrazu, jest wyświetlany, gdy on sam jest niewidoczny, jest wykorzystywany również przez czytniki ekranowe. 

HTML

Formaty obrazów

  • jpg - stosuje kompresję stratną, nie obsługuje przezroczystosci.
    P    rzeznaczony jest głównie do zapisu fotografii. 

  • png -   daje możliwość zapisania każdego rodzaju obrazu, obsługuje przezroczystość, przy zapisie stosuje kompresję bezstratną.
    Zastosowanie: przede wszystkim ikony, loga, obrazy z przezroczystym tłem. 

  •  gif - kompresją bezstratna, obraz maksymalnie w 256 kolorach, zachowuje przezroczystość obrazów (przezroczystość lub jej brak). Pozwala na utworzenie animacji poklatkowej.
    Nadaje     się do zapisu obrazów o ograniczonej ilości kolorów, animacji. 

  •  svg - format grafiki wektorowej, można stosować przezroczystość, wypełnienia gradientowe, dowolnie go skalować bez utraty jakości.
    Nie nadaje się do zapisu zdjęć. Zastosowanie: loga, ilustracje wektorowe.

Obrazy jako tło

div {
    background-color: #dbd;
    background-image: url("bg.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center top;
    background-size: cover;
}
div {
    background: #dbd url("bg.jpg") no-repeat fixed center top;
    background-size: cover;
}

CSS

https://developer.mozilla.org/en-US/docs/Web/CSS/background

Ćwiczenie dodaj tło

html {
    background: #F8B560 url("../img/berries.jpg") no-repeat fixed left top;
    background-size: cover;
}

CSS

http://finda.photo/image/4409​

Typografia

p {
    font-size: 12px;
    color: red;
}
<h1>Nagłówek 1</h1>
<h2>Nagłówek 2</h2>
<h3>Nagłówek 3</h3>
<h4>Nagłówek 4</h4>
<h5>Nagłówek 5</h5>
<h6>Nagłówek 6</h6>

<p>Tekst. Tekst. Tekst. Tekst.</p>

<a href="http://google.pl">Łącze</a>

HTML

CSS

W większości przypadków domyślna wielkość tekstu w przeglądarkach to: 

h1 - 32px, h2 - 24px, h3 - 18px, p - 16px;

http://www.typewolf.com/

Typografia - jednostki

  • px - wielkość zależy od rozdzielczości monitora. Ten sam tekst na ekranie o rozdzielczości 800x600 będzie się wydawał większy niż na ekranie 1200x800.
  • em - określa wielkość fontu względem rozmiaru fontu zdefiniowanego dla jego rodzica (dziedziczenie). 
  • rem - wielkość elementu jest obliczana względem wartości rozmiaru fontu zdefiniowanego dla <html>. Słabsze wsparcie starszych przegladarek http://caniuse.com/#search=rem.

 

h1 {
    font-family: "Times New Roman", serif;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.4rem;
}
p {
    font-family: Arial, sans-serif;
    font-weight: bold;  
    line-height: 1.5rem;
    word-wrap: break-word;
}
a {
    text-decoration: none;
    text-align: center;    
}

Typografia - nowe właściwości CSS

CSS

Jeśli nie chcemy być ograniczeni tylko do fontów, które są już zainstalowane na komputerze użytkownika (www.cssfontstack.com) stosujemy regułę @font-face.​

@font-face {
    font-family: 'latobold';
    src: url('lato-bold.eot');
    src: url('lato-bold.eot?#iefix') format('embedded-opentype'),
         url('lato-bold.woff2') format('woff2'),
         url('lato-bold.woff') format('woff'),
         url('lato-bold.ttf') format('truetype'),
         url('lato-bold.svg#latobold') format('svg');
    font-weight: normal;
    font-style: normal;
}
p.bold {
    font-family: "latobold", Arial, sans-serif;
}

Typografia - reguła @font-face

CSS

https://css-tricks.com/snippets/css/using-font-face

@font-face {
    font-family: 'source_sans_proregular';
    src: url('sourcesanspro-regular-webfont.eot');
    src: url('sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('sourcesanspro-regular-webfont.woff2') format('woff2'),
         url('sourcesanspro-regular-webfont.woff') format('woff'),
         url('sourcesanspro-regular-webfont.ttf') format('truetype'),
         url('sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
body {
    font-family: 'sourcesanspro-regular-webfont', Arial, sans-serif;
}

Ćwiczenie dodaj font

CSS

www.fontsquirrel.com

lub

p.bold {
    font-family: "Lato", Arial, sans-serif;
}

Typografia - Google Fonts

<link href='http://fonts.googleapis.com/css?family=Lato:700&subset=latin,latin-ext' 
rel='stylesheet'>

@import url(http://fonts.googleapis.com/css?family=Lato:700&subset=latin,latin-ext);

Google Fonts umożliwia nam dodanie fontów, które są na ich serwerze: www.google.com/fonts

HTML

CSS

2.

CSS

1.

h1 {
    font-family: 'Patrick Hand', cursive;
}

Ćwiczenie dodaj font

CSS

<link href='http://fonts.googleapis.com/css?family=Patrick+Hand&subset=latin,latin-ext' 
rel='stylesheet' type='text/css'>

HTML

O czym nie możemy zapomnieć, jeśli chcemy mieć pewność, że na naszej stronie tekst będzie mieć polskie znaki:

  • <html lang="pl">

  • <meta charset="utf-8" />

  • nasz plik zapisany z kodowaniem znaków UTF-8 bez BOM

  • wybrany krój pisma musi posiadać polskie znaki

  • jeśli dołączamy fonty z Google Fonts
    <link href="...&subset=latin,latin-ext" rel="stylesheet"/> 

 

​

Polskie znaki

Łącza

<a href="contact.html">Kontakt</a>

<a href="http://google.com" target="_blank">Link w nowym oknie</a>

<a href="#mojeId">Link do miejsca (mojeId) na stronie</a>

<p><a href="http://google.com">Link</a> z tekstem</p>

<a href="http://google.com">
    <img src="mojeZdjecie.jpg" alt="Moje zdjecie" />
    <p>Tekst 1</p>
    <p>Tekst 2</p>
</a>

HTML

HTML5 - Element <a> (inline) może otaczać zarówno elementy typu block i inline, jeśli tylko nie są to elementy interaktywne (inne linki, przyciski).

Przeznaczone dla elementów a:

:link - domyślnie,

:visited - określa wygląd odwiedzonych linków (zapisanych w historii przeglądarki). 

Mogą być nadane również innym elementom:​

:focus - określa wygląd linków wybrany za pomocą przycisku klawiatury,

:hover - określa wygląd elementu, na który najedziemy kursorem myszy,

:active - określa wygląd elementu podczas kliknięcia.

Łącza - pseudoklasy

a {
  text-decoration: underline;
  color: #a00;
}
a:visited {
  color: #844;
}
a:hover, a:focus, a:active {
  text-decoration: none;
  color: #fff;
  background: #800;
}

CSS

Ćwiczenie dodaj łącze

a {
    font-size: 20px;
    color: #293A4F;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 4px;
}
a:hover, a:focus, a:active {
    color: #CC3F69;
}

CSS

Listy, których elementy są numerowane za pomocą liter, cyfr rzymskich lub liczby.

<ol>
    <li>Tekst 1</li>
    <li>Tekst 2</li>
    <li>Tekst 3 plus
        <a href="strona1.html">Link do strony 1</a>
    </li>
</ol>

Listy uporządkowane

Przeglądarki domyślnie wcinają zawartość list.

HTML

Listy, których elementy są oznaczone znacznikami.

Listy nieuporządkowane

<ul>
    <li>Tekst 1</li>
    <li>Tekst 2 plus
        <a href="strona2.html">Link do strony 2</a>
    </li>
    <li>
        <a href="strona3.html">Link do strony 3</a>
    </li>
</ul>

HTML

CSS

ul {
    list-style: none;
}

Stylowanie listy

https://css-tricks.com/almanac/properties/l/list-style/​

Listy zagnieżdżone

<ul>
    <li>Tekst 1
        <ul>
            <li>Tekst 1 listy zagnieżdżonej</li>
            <li>Tekst 2 listy zagnieżdżonej</li>
        </ul>
    </li>
    <li>Tekst 2 plus
        <a href="strona2.html">Link do strony 2</a>
    </li>
    <li>
        <a href="strona3.html">Link do strony 3</a>
    </li>
</ul>

HTML

Składają się z terminu i jego opisu.

<dl>
    <dt>Hipertekstowy język znaczników</dt>
    <dd>Służy do tworzenia stron internetowych.</dd>
    <dt>Kaskadowe arkusze stylów</dt>
    <dd>Służy do opisu wyświetlania stron</dd>
    <dd>Arkusz stylów CSS to lista dyrektyw</dd>
</dl>

Listy definicji

HTML

Dziękuję

Made with Slides.com