Tworzenie stron WWW w HTML i CSS

Maciej Żukiewicz

maciek@harmony-systems.com

Prawa autorskie do materiałów

Materiały szkoleniowe (w wersji elektronicznej i drukowanej) udostępnione przez firmę Vavatech w ramach niniejszego kursu, należą wyłącznie do firmy Harmony sp. z o.o. i podlegają ochronie na podstawie przepisów o prawie autorskim i prawach pokrewnych.

 

W związku z powyższym, każdy uczestnik szkolenia zobowiązuje się nie wykonywać

żadnych z niżej wymienionych działań:

•modyfikacja, adaptacja, zmiana, łączenie lub tłumaczenie materiałów oraz tworzenie prac pochodnych na ich podstawie;

•wypożyczanie, sprzedaż lub innego rodzaju przekazywanie materiałów szkoleniowych jakiejkolwiek stronie trzeciej;

•kopiowanie lub jakiekolwiek powielanie materiałów.

 

W ramach szkolenia uczestnik otrzymuje jedynie prawo własności otrzymanego

egzemplarza materiałów i uprawniony jest do jego używania wyłącznie w

ramach dozwolonego użytku określonego w przepisach i własności intelektualnej.

#1//HTML

#1//HTML

Przykładowy, podstawowy plik HTML strony WWW

<!doctype html>
<html lang="pl">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Hello my dear!</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        Hello my dear!
    </body>
</html>

#1//HTML - SKŁADNIA

<!doctype html>
<html lang="pl">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Hello my dear!</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <!-- Header start -->
        <header>
            Hello!
        </header>
        <!-- Header end -->

        <!-- Content start -->
        <main id="content" class="style-secondary">
            <div>
                <h1>Lorem ipsum dolor sit.</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <em>Reiciendis, quia.</em></p>
                <p><strong>Porro, sed nemo laboriosam tempore,</strong> tempora cupiditate harum molestias voluptas!</p>
            </div>

            <div>
                <p><a href="https://placeholder.com/">Get placeholder!</a> and have fun :)</p>

                <img src="http://via.placeholder.com/350x150" alt="Image">
            </div>
        </main>
        <!-- Content end -->

        <hr>

        <!-- Footer start -->
        <footer id="footer" class="style-primary">
            Copyright 2018
        </footer>
        <!-- Footer end -->
    </body>
</html>

#1//HTML - Budowa tagu

<!-- tag posiadający tag domykający -->
<nazwa-tagu atrybut1="wartosc" atrybut2="wartoscA wartoscB"> ... zawartość tagu ... </nazwa-tagu>

<!-- tag nieposiadający tagu domykającego (samodomykający się) -->
<nazwa-tagu atrybut1="wartosc" atrybut2="wartoscA wartoscB">

#1//HTML - ELEMENTY BLOKOWE

  1. Zajmują całą dostępną szerokość
  2. Zaczynają się od nowej linii
  3. W elementach blokowych możemy umieszczać inne elementy blokowe i liniowe (wyjątkiem jest tag <p> - zobacz tu)
  4. Na elementach blokowych możemy stosować właściwości modelu blokowego CSS (do zapamiętania na później :))

Charakteryzują się tym, że:

Wyświetlają się tak:

przykładowe tagi:

<div>
<header>
<nav>
<main>
<footer>
<ul>
<ol>
<table>
<form>
<h1>, <h2>, ..., <h6>
<p>
<blockquote>

Więcej na ten temat na:

moz://a oraz w3schools

#1//HTML - ELEMENTY liniowe

  1. Zajmują tylko taką szerokość jaką wymaga zawartość tagu
  2. Nie zaczynają się od nowej linii
  3. W elementach liniowych możemy umieszczać TYLKO inne elementy liniowe
  4. Na elementach liniowych nie możemy stosować właściwości modelu blokowego CSS (do zapamiętania na później :))

Charakteryzują się tym, że:

Wyświetlają się tak:

przykładowe tagi:

<a>
<strong>
<span>
<em>
<img>
<input>
<label>

Więcej na ten temat na:

moz://a oraz w3schools

#1//HTML - najczęściej wykorzystywane tagi i ich zastosowanie

  1. Jakie są najczęściej wykorzystywane tagi HTML?
  2. Do czego się je wykorzystuje w praktyce?
  3. Dlaczego ważny jest odpowiedni dobór tagów?

w3schools

mozi//a

Więcej na ten temat na:

#1//HTML - semantyka tagów w HTML5

  1. Czym jest semantyka tagów?
  2. Na co wpływa semantyka tagów?
  3. Jakie znasz tagi semantyczne?
  4. Czym jest Document Outline?
  5. Czy Document Outline jest ważny?

mozi//a

Więcej na ten temat na:

#1//HTML - semantyka tagów w HTML5

A jak to wpływa na Document Outline?

#1//HTML - atrybuty

  1. Jakie znasz przykłady podstawowych atrybuty, które można nadać dla każdego dowolnego elementu HTML?
  2. Czym charakteryzują się te atrybuty, czym różnią się od siebie i do czego najczęściej są wykorzystywane?
  3. Czym są specyficzne atrybuty tagów i jakie znasz przykłady takich atrybutów?

#1//HTML - atrybuty

Atrybut Opis Przykład
id Identyfikator.  

(!) Element o danym ID może występować tylko i wyłącznie raz na danej stronie.

(!!) Każdy element HTML może posiadać maksymalnie jeden identyfikator.		 <div id="header-wrapper"></div>
<section id="topic-basic-terms"></section>
class Klasa.

(!) Na stronie może się znajdować wiele elementów posiadających tą samą klasę.

(!!) Każdy element HTML może posiadać dowolną ilość klas.		 <div class="color-primary">
<div class="color-primary wide-box">
<div class="color-primary wide-box small-text">
data-* Atrybut HTML5 pozwalający na tworzenie własnych atrybutów. <article data-article-title="Nice code in one week" data-article-id="5"></article>

#2//css

#2//css - składnia

/* Domyślne style dla:
- strony głównej
- podstron tekstowych */

p{
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

.category-menu{
    width: 250px;
    height: 300px;
    float: left;
}

#main-nav{
    height: 30px;
}

#main-nav.color-primary {
    background-color: blue;
}

Czym jest selektor?

Czym jest właściwość, a czym wartość w CSS?

#2//css - rodzaje selektorów

Rodzaj selektora Opis Przykład
Wszystkie elementy Wybiera wszystkie elementy *
Element Wybiera wszystkie elementy o określonym tagu div
p
Klasa Wybiera wszystkie elementy o określonej wartości atrybutu class .color-primary
.text-highlighted
Identyfikator Wybiera wszystkie element o określonej wartości atrybutu id. #header
#footer
Atrybut Wybiera wszystkie element na podstawie wartości zadanego atrybutu [href]
[rel="nofollow"]
Pseudoselektor Wybiera wszystkie elementy spełniające warunek pseudoselektora :hover
:fist-child
:last-child

w3schools

moz://a

Więcej na ten temat na:

#2//css - rodzaje kombinatorów

Kombinator Opis Przykład
(spacja) Wybiera wszystkie elementy a wewnątrz wszystkich elementów z klasą menu .menu a
(brak spacji) Wybiera element div mający identyfikator header oraz klasę color-primary div#header.color-primary
> Wybiera wszystkie elementy a znajdujące się bezpośrednio elemencie z klasą menu .menu > a
, Wybiera wszystkie elementy a i wszystkie elementy strong i wszystkie elementy span a, strong, span

w3schools

moz://a

Więcej na ten temat na:

#2//css - siła selektorów

Rodzaj selektora Mnożnik
Element x1
Klasa x10
Identyfikator x100
Atrybut style x1000 
<p id="main-text" class="custom-styles">
    Lorem ipsum dolor sit.
</p>
p{
    font-size: 10px;
}

.custom-styles{
    font-size: 11px;
}

p.custom-styles{
    font-size: 44px;
}

#main-text{
    font-size: 6px;
}

p#main-text{
    font-size: 22px;
}

p#main-text.custom-styles{
    font-size: 12px;
}

kalkulator online

moz://a

Więcej na ten temat na:

#2//css - Przykłady selektorów //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"] {...}

#2//css - Przykłady selektorów //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 {...}

#2//css - Przykłady selektorów //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"] {...}

#2//css - pseudoselektory

/* 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) {...}

#2//css - pseudoElementy

/* Dla wszystkich paragrafów na początku dodaje strzałkę o rozmiarze .6em'a */
p::before {
    content: '->';
    font-size: .6em;
}


/* Dla wszystkich elementów z klasą read-more dodaje na końcu znak wielokropka */
.read-more::after {
    content: '...';
}

w3schools

moz://a

Więcej na ten temat na:

#2//css - Kaskadowość

#2//css - dziedziczenie

Czym jest dziedziczenie w CSS jak działa?

#2//css - dziedziczenie

#2//css - Kaskadowość, specyfika, dziedziczenie - podsumowanie

https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance

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

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

#2//css - Jednostki

Jakie znasz jednostki, którymi możemy posługiwać się w CSS?

Czym różnią się od siebie?

Jakie jest ich optymalne przeznaczenie? 

Nazwa Jednostka Najczęstsze zastosowanie
piksele px Definiowanie szerokości, wysokości, marginesów, paddingów, etc.
procenty % Definiowanie szerokości, wysokości, marginesów, paddingów, etc.
emy em Definiowanie Media Queries, wielkości czcionek.
remy rem Definiowanie wielkości czcionek.
procent szerokości okna (viewport) vw Definiowanie szerokości, wysokości, marginesów, paddingów, etc.
procent wysokości okna (viewport) vh Definiowanie szerokości, wysokości, marginesów, paddingów, etc.
procent najmniejszego wymiaru okna (viewport) vmin Definiowanie szerokości, wysokości, marginesów, paddingów, etc.
procent największego wymiaru okna (viewport) vmax Definiowanie szerokości, wysokości, marginesów, paddingów, etc.

W CSS oprócz powyższych można spotkać inne jednostki jak: ex, cm, mm, in, pt, pc - jednak są one bardzo rzadko stosowane. Zobacz więcej na: W3Schools.

#2//CSS - najcześciej wykorzystywane jednostki

#2//css - Jednostki / em i rem

1 em = 100% z wielkości rodzica

1 rem = 100% z wielkości głównego węzła (root)

#2//css - Jednostki / vw i vh

1 vw = 1% szerokości okna (viewport)

1 vh = 1% wysokości okna (viewport)

#2//css - Jednostki / vmin i vmax

1 vmin = 1% najmniejszego wymiaru okna (viewport)

1 vmax = 1% największego wymiaru okna (viewport)

Tworzenie stron WWW: HTML, CSS (Vavatech, 24-25.09.2018)

By Maciej Żukiewicz

Made with Slides.com

Tworzenie stron WWW: HTML, CSS (Vavatech, 24-25.09.2018)

  • 186

More from Maciej Żukiewicz