Krótki kurs html

Paweł Mleczko

2017-11-15

Jak działa internet

Jak działa sieć www?

Jak dobry urząd pocztowy!

  • serwer i pliki na serwerze

  • serwer DNS (ang. Domain Name System)

  • protokół HTTP

Połączenia między serwerami

Jak działa internet

Traceroute

wywołanie w konsoli komendy mtr google.pl

1. gw-v7.core.wmi.amu.edu.pl
2. fw.core.wmi.amu.edu.pl
3. amur.amu.edu.pl
4. do-pozman.amu.edu.pl
5. pozmangw.amu.edu.pl
6. z-pozmana.poznan-gw3.10G
7. 72.14.203.178
8. 108.170.250.209
9. 216.239.41.167
10. waw02s07-in-f3.1e100.net

Pliki tekstowe -- znowu!

Jak komputer przechowuje informacje?

znak numer numer zapisany binarnie
A 65 0100 0001
l 108 0110 1100
a 97 0110 0001
(spacja) 32 0010 0000
m 109 0110 1101
a 97 0110 0001
(spacja) 32 0010 0000

Jak komputer przechowuje informacje?

znak numer numer zapisany binarnie
k 107 0110 1011
o 111 0110 1111
t 116 0111 0100
a 97 0110 0001
. 46 0010 1110

Standardy

  • ASCII -- 127 znaków (32 to znaki sterujące)

  • ANSI (Windows) i ISO-8859-1 (Linux) -- ponad dwieście pięćdziesiąt znaków

  • poszczególne języki posiadają własne wersje (np. wschodnioeuropejskie): Windows-1252, ISO-8859-2

Wady:

  • brak zgodności między kodowaniami

Unicode

Tabela zawierająca znaki i odpowiadające im numery.

  • dzisiaj zawiera ponad 110 182 znaków

  • pozwala kodować wszystkie znaki występujące we wszystkich alfabetów

  • jeden znak jest kodowany za pomocą wielu bajtów (mało ekonomiczny)

Standard UTF (np. UTF-8)

  • kodowanie znaku niekoniecznie za pomocą wielu bajtów

  • oszczędniejszy

Pliki

  • htm, html — plik tekstowy zawierający kod HTML, CSS, czasami też kod JavaScript;

  • php — pliki tekstowe zawierające kod HTML, CSS połączony ze skryptami PHP;

  • js — pliki tekstowe zawierające skrypty napisane w języku JavaScript;

  • css — pliki tekstowe zawierające zewnętrzne arkusze stylów.

Elementy języka HTML

Znaczniki

<znacznik> </znacznik>

Przykład p

<p>Przykład akapitu.</p>

Znaczniki -- wyjątki

Wyjątki

 <br>, <hr>, <img>, <meta>, <link>

Atrybuty

<znacznik atrybut></znacznik>

Na przykład

<p style="background-color:#ff0000;">Przykład akapitu
z czerwonym tłem.</p>

Przykład akapitu z czerwonym tłem.

Atrybuty

<a href="https://wmi.amu.edu.pl/">Strona Wydziału Matematyki
i Informatyki UAM</a>

Strona Wydziału Matematyki i Informatyki UAM

Dobre praktyki

  • Nigdy nie krzyżuj znaczników

html <p>Przykład bloku tekstu ze <em>skrzyżowanymi znacznikami</p></em>

  • Zawsze zamykaj wszystkie znaczniki

html <table> <tr> <td>komórka tabeli</td> <td>komórka tabeli</td> </tr> <tr> <td>komórka tabeli</td> <td>komórka tabeli</td> </tr> </table>

Dobre praktyki

  • Wpisując znaczniki i atrybuty, zawsze używaj małych liter

html <p class="glowny">Przykładowy blok tekstu z własną klasą</p>

  • Używaj cudzysłowów dla wszystkich atrybutów

html <table border="1" >

  • Uważaj ze znakami specjalnymi w skryptach

html &lt - < &gt - >

Pierwszy dokument

Elementy podstawowe

<!doctype html>

<html>

<head>
</head>

<body>
</body>

</html>

head (polskie znaki)

<!doctype html>
<html>
<head>
<meta charset="utf-8" >
</head>
<body>
</body>
</html>

Tytuł

<!doctype html>
  <html>
    <head>
      <meta charset="utf-8" >
      <title>Tytuł przykładowej strony</title>
    </head>
    <body>

    </body>
</html>

Słowa kluczowe i opis strony

<!doctype html>
  <html>
  <head>
    <meta charset="utf-8" >
    <title>Tytuł przykładowej strony</title>
    <meta name="keywords" content="Twoje, słowa, kluczowe" >
    <meta name="description" content="Wstaw opis swojej strony">
  </head>
  <body>

  </body>
</html>

Słowa kluczowe i opis strony

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tytuł przykładowej strony</title>
<meta name="keywords" content="Twoje, słowa, kluczowe" >
<meta name="description" content="Wstaw opis swojej strony">
<meta name="author" content="Jan Kowalski" >
<meta name="copyright" content="Jan Kowalski" >
</head>
<body>
</body>
</html>

Treść dokumentu

<!doctype html>
<html>
<head>
</head>
<body>
Treść
</body>
</html>

Nawigacja (menu)

<nav></nav>
<body>
<header>
HEADER
</header>
<nav>
NAV
</nav>
</body>

Zawartość zasadnicza

<article></article>
<body>
<header>
HEADER
</header>
<nav>
NAV
</nav>
<article>
ARTICLE
</article>
</body>

Sekcje (podrozdziały)

<section></section>
<body>
<header>
HEADER
</header>
<nav>
NAV
</nav>
<article>
ARTICLE
<section>
SECTION
</section>
</article>
</body>

Materiały pomocnicze

<aside></aside>
<body>
.
.
.
<article>
ARTICLE
<section>
SECTION
</section>
</article>
<aside>
ASIDE
</aside>
</body>

Stopka

<footer></footer>
<body>
<article>
.
.
.
</article>
<aside>
ASIDE
</aside>
<footer>
FOOTER
</footer>
</body>

Elementy języka HTML5

Komentarze

<!--Tu znajduje się komentarz do naszej strony.
Jest on niewidoczny dla czytelnika-->

Elementy blokowe

<div></div>
<p><p>
<figure></figure>

Elementy liniowe

<sub></sub>
<b></b>

Nagłówki

<body>
  <h1>Nagłówek stopnia pierwszego</h1>
  <h2>Nagłówek stopnia drugiego</h2>
  <h3>Nagłówek stopnia trzeciego</h3>
  <h4>Nagłówek stopnia czwartego</h4>
  <h5>Nagłówek stopnia piątego</h5>
  <h6>Nagłówek stopnia szóstego</h6>
</body>

Blok tekstu -- akapit

<body>
  <p>Przykład prostego akapitu.</p>
  <p>Vestibulum ante ipsum primis in faucibus
  orci luctus et ultrices posuere cubilia Curae; Morbi blandit.
  Etiam mattis pede at lacus. Aliquam tincidunt.
  Nullam facilisis. Etiam quis nulla. Donec sollicitudin.
  Fusce nisi nulla, vestibulum non, pellentesque eget,
  ullamcorper vel, .</p>
</body>

Cytaty

<blockquote>
        Vestibulum ante ipsum primis in faucibus
        orci luctus et ultrices posuere cubilia Curae; Morbi blandit.
        Etiam mattis pede at lacus. Aliquam tincidunt.
        Nullam facilisis. Etiam quis nulla. Donec sollicitudin.
        Fusce nisi nulla, vestibulum non, pellentesque eget,
        ullamcorper vel
</blockquote>

Listy nienumerowane

<ul></ul>
<li></li>

Na przykład

<ul>
  <li>Pierwsza pozycja listy wypunktowanej</li>
  <li>Druga pozycja listy wypunktowanej</li>
  <li>Trzecia pozycja listy wypunktowanej</li>
</ul>

Listy numerowane

<ol></ol>
<li></li>

Na przykład

<ul>
  <li>Pierwsza pozycja listy numerowanej</li>
  <li>Druga pozycja listy numerowanej</li>
  <li>Trzecia pozycja listy numerowanej</li>
</ul>

Lista definicji

<dl></dl>
<dt></dt>
<dd></dd>

Na przykład

<dl>
  <dt>Słowo definiowane</dt>
  <dd>opis słowa definiowanego</dd>
  <dt>Kolejne słowo definiowane</dt>
  <dd>opis kolejnego słowa definiowanego</dd>
  <dt>Jeszcze jedno słowo definiowane</dt>
  <dd>opis nowego słowa definiowanego</dd>
  <dt>Ostatnie słowo definiowane</dt>
  <dd>opis ostatniego słowa definiowanego</dd>
</dl>

Zachowanie pierwotnego formatowania

<pre></pre>
<p>
    -----------------
    | Prosta tabela |
    -----------------
    |  1   |   2    |
    |  3   |   4    |
    |  5   |   6    |
    -----------------
</p>
Na przykład 
    -----------------
    | Prosta tabela |
    -----------------
    |  1   |   2    |
    |  3   |   4    |
    |  5   |   6    |
    -----------------

Grupowanie znaczników

<div></div>
<div>
  <p>Pierwszy blok tekstu.</p>
  <p>Drugi blok tekstu.</p>
  <h4>Nagłówek stopnia pierwszego</h1>
</div>

Grupowanie znaczników

<span></span>

Na przykład

    <blockquote cite="źródło cytowanego tekstu">
        <span class="nazwa">Vestibulum ante ipsum primis in faucibus
        orci luctus et ultrices posuere cubilia Curae;<span>
        Morbi blandit.
        Etiam mattis pede at lacus. Aliquam tincidunt.
        Nullam facilisis. Etiam quis nulla. Donec sollicitudin.
        Fusce nisi nulla, vestibulum non, pellentesque eget,
        ullamcorper vel
    </blockquote>

Elementy wyróżnione

Znacznik em

<em></em>

Na przykład

<p>
 Nie <em>krzycz</em>! Możemy spokojnie porozmawiać?
</p>

Nie krzycz! Możemy spokojnie porozmawiać?

Znacznik strong

<strong></strong>

Na przykład

<p>
<strong>Uwaga!</strong>. Proszę stosować się do poleceń przewodnika.
</p>

Uwaga!. Proszę stosować się do poleceń przewodnika.

Znacznik small

<small></small>

Na przykład

<p>
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
 <small>Nunc in quam.</small>
 In quam lorem, convallis convallis, fermentum et, scelerisque interdum,
 diam.
<p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc in quam. In quam lorem, convallis convallis, fermentum et, scelerisque interdum, diam.

Znacznik cite

<cite></cite>

Na przykład

<p>
Przeglądając <cite>książkę o języku HTML</cite> dowiedziałem się
 wielu nowych rzeczy.
<p>

Przeglądając książkę o języku HTML dowiedziałem się wielu nowych rzeczy.

Znacznik q

<q></q>
<p>
Immanuel Kant powiedział <q>Miejcie odwagę posługiwać się
rozumem<q>. Uważam, że to stwierdzenie w dzisiejszych czasach
dodatkowo zyskało na znaczeniu.
</p>

Immanuel Kant powiedział Miejcie odwagę posługiwać się rozumem. Uważam, że to stwierdzenie w dzisiejszych czasach dodatkowo zyskało na znaczeniu.

Znacznik code

<code></code>
<code>
   ul.lista
      {
      display: list-item;
      list-style-type:none;
      color:red;
      margin-left:4em;
      text-indent:-1em;
      }
</code>
</figure>

Znaczniki sup i sub

<sub></sub>
<sup></sup>

Na przykład

<p>E=mc<sub>2</sub><p>
<p>E=mc<sup>2</sup><p>

E=mc2

E=mc2

Znacznik i

<i></i>

Na przykład

<p>
Aby odświeżyć zawartość okna przeglądarki, naciśnij klawisz F5.
Możesz również skorzystać ze <i>specjalnej ikony</i>.
</p>

Aby odświeżyć zawartość okna przeglądarki, naciśnij klawisz F5. Możesz również skorzystać ze specjalnej ikony.

Znacznik b

<b></b>
<p>
Aby odświeżyć zawartość okna przeglądarki,
naciśnij klawisz <i>F5</i>.
Możesz również skorzystać ze <b>specjalnej ikony</b>.
</p>

Aby odświeżyć zawartość okna przeglądarki, naciśnij klawisz F5. Możesz również skorzystać ze specjalnej ikony.

Znacznik br

<br>
<p>
Aby odświeżyć zawartość okna przeglądarki,
naciśnij klawisz <i>F5</i>.<br>
Możesz również skorzystać ze <b>specjalnej ikony</b>.
</p>

Aby odświeżyć zawartość okna przeglądarki, naciśnij klawisz F5.
Możesz również skorzystać ze specjalnej ikony.

Elementy osadzone (grafika, multimedia)

Publikacja obrazków

Znacznik img

<img src="obraz.jpg" alt="Zwiastowanie, Antonello da Messina" />

Zwiastowanie, Antonello da Messina

Popularne formaty plików wideo

  • .mp4 — plik kompresowany za pomocą kodeka wideo H.264 i kodeka audio AAC;
  • .ogg — plik kompresowany za pomocą kodeka wideo Thedora i kodeka audio Vorbis;
  • .webm — plik kompresowany za pomocą kodeka wideo On2 VP8 i kodeka audio Vorbis.

Publikacja filmów

<video></video>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Czy to zawsze jest tak bardzo pracochłonne. Gdzie szukać informacji?

Dokumentacja i przewodniki

Dokumentacja języka HTML

Wprowadzenie do HTML

Systemy zarządzania treścią

  • Joomla

  • Wordpress

  • Drupal

  • DotNetNuke