Podstawy języka HTML

Od pustego dokumentu tekstowego do poprawnej prostej strony internetowej

Minimalny szablon

Plik: 001.html


Podgląd w nowym oknieWalidacjaPobierz plik

Plik: 002.html

<!DOCTYPE html>

Podgląd w nowym oknieWalidacjaPobierz plik

Plik: 003.html

<!DOCTYPE html>
<html>
</html>

Podgląd w nowym oknieWalidacjaPobierz plik

Plik: 004.html

<!DOCTYPE html>
<html lang='pl-PL'>
</html>

Podgląd w nowym oknieWalidacjaPobierz plik

Plik: 005.html

<!DOCTYPE html>
<html lang='pl-PL'>
  <head>
  </head>
  <body>
  </body>
</html>

Podgląd w nowym oknieWalidacjaPobierz plik

Plik: 006.html

<!DOCTYPE html>
<html lang='pl-PL'>
  <head>
    <title>Tytuł</title>
  </head>
  <body>
  </body>
</html>

Podgląd w nowym oknieWalidacjaPobierz plik

Plik: 007.html

<!DOCTYPE html>
<html lang='pl-PL'>
  <head>
    <title>Tytuł</title>
    <meta charset='utf-8'>
  </head>
  <body>
  </body>
</html>

Podgląd w nowym oknieWalidacjaPobierz plik

Plik: 008.html

<!DOCTYPE html>
<html lang='pl-PL'>
  <!-- komentarz ... -->
  <head>
    <title>Tytuł</title>
    <meta charset='utf-8'>
    <!-- tu wpisz inne informacje dla przeglądarki... -->
  </head>
  <body>
    <!-- tu wpisz treść strony... -->
  </body>
</html>

Podgląd w nowym oknieWalidacjaPobierz plik
Tekst na stronie

Plik: 009.html

<!DOCTYPE html>
<html lang='pl-PL'>
  <head>
    <title>HTML5</title>
    <meta charset='utf-8'>
    <meta name='author' content='Wiesław Rychlicki'>
  </head>
  <body>
    Zwykły, niesformatowany tekst (ang. plain text) 
    do wyświetlenia w oknie przeglądarki.
  </body>
</html>

Podgląd w nowym oknieWalidacjaPobierz plik

Plik: 010.html

<!DOCTYPE html>
<html lang='pl-PL'>
  <head>
    <title>HTML5</title>
    <meta charset='utf-8'>
    <meta name='author' content='Wiesław Rychlicki'>
  </head>
  <body>
    <h1>Nagłówek pierwszego stopnia</h1>
    <h2>Nagłówek drugiego stopnia</h2>
    <h3>Nagłówek trzeciego stopnia</h3>
    <h4>Nagłówek czwartego stopnia</h4>
    <h5>Nagłówek piątego stopnia</h5>
    <h6>Nagłówek szóstego stopnia</h6>
    Porównanie rozmiaru nagłówków ze zwykłym 
    niesformatowanym tekstem.
  </body>
</html>

Podgląd w nowym oknieWalidacjaPobierz plik

Plik: 011.html

<!DOCTYPE html>
<html lang='pl-PL'>
  <head>
    <title>HTML5</title>
    <meta charset='utf-8'>
    <meta name='author' content='Wiesław Rychlicki'>
  </head>
  <body>
    <h1>Nagłówek pierwszego stopnia</h1>
    Zwykły niesformatowany tekst.
    <p>Akapit tekstu (paragraf) dla porównania ze zwykłym 
    niesformatowanym tekstem i wybranym nagłówkiem (w tym
    przypadku: pierwszego stopnia).</p>
  </body>
</html>

Podgląd w nowym oknieWalidacjaPobierz plik
Hiterłącza (linki)

Plik: 012.html

<!DOCTYPE html>
<html lang='pl-PL'>
  <head>
    <title>HTML5</title>
    <meta charset='utf-8'>
    <meta name='author' content='Wiesław Rychlicki'>
  </head>
  <body>
    <h1>Hiperłącze</h1>
    <p>Hiperłącze (ang. hyperlink, inaczej: odnośnik, 
    odsyłacz, link, hiperlink) – zamieszczone w dokumencie
    elektronicznym (tekstowym, graficznym, wideo, animacji,
    PDF, HTML) odwołanie do innego dokumentu lub innego 
    miejsca w danym dokumencie.</p>
    <p>Uaktywnienie hiperłącza może nastąpić poprzez 
    kliknięcie lub najechanie kursorem na element, 
    który nazywany jest kotwicą. Powoduje to wyświetlenie
    docelowej informacji. Hiperłącza są powszechnie używane 
    na stronach internetowych.</p>
    <p>Powyższa definicja pochodzi z 
    <a href='https://pl.wikipedia.org/wiki/Hiper%C5%82%C4%85cze'>
    Wikipedii</a>.</p>
  </body>
</html>

Podgląd w nowym oknieWalidacjaPobierz plik
Informacja w postaci listy

Plik: 013.html

<!DOCTYPE html>
<html lang='pl-PL'>
  <head>
    <title>HTML5</title>
    <meta charset='utf-8'>
    <meta name='author' content='Wiesław Rychlicki'>
  </head>
  <body>
    <h1>Lista nieuporządkowana</h1>
      <ul>
        <li>Sanok</li>
        <li>Lesko</li>
        <li>Ustrzyki Dolne</li>
      </ul>

  </body>
</html>

Podgląd w nowym oknieWalidacjaPobierz plik

Plik: 014.html

<!DOCTYPE html>
<html lang='pl-PL'>
  <head>
    <title>HTML5</title>
    <meta charset='utf-8'>
    <meta name='author' content='Wiesław Rychlicki'>
  </head>
  <body>
    <h1>Lista uporządkowana</h1>
      <ol>
        <li>Sanok</li>
        <li>Lesko</li>
        <li>Ustrzyki Dolne</li>
      </ol>
  </body>
</html>

Podgląd w nowym oknieWalidacjaPobierz plik

Plik: 015.html

<!DOCTYPE html>
<html lang='pl-PL'>
  <head>
    <title>HTML5</title>
    <meta charset='utf-8'>
    <meta name='author' content='Wiesław Rychlicki'>
  </head>
  <body>
    <h1>Lista definicyjna</h1>
      <dl>
        <dt>bit</dt>
        <dd>cyfra dwójkowa (ang. binary digit) – 
        najmniejsza ilość informacji potrzebna do 
        określenia, który z dwóch równie prawdopodobnych
        stanów przyjął układ.</dd>
      </dl>
      <dl>
        <dt>bajt</dt>
        <dd>najmniejsza adresowalna jednostka informacji 
        pamięci komputerowej, składająca się z bitów.</dd>
        <dd>Zwykle przyjmuje się, że jeden bajt to 8 bitów. 
        Jednostka składająca się z ośmiu bitów zwana jest 
        również oktetem.</dd>
      </dl>
  </body>
</html>

Podgląd w nowym oknieWalidacjaPobierz plik
Dane zapisane w tabeli

Plik: 016.html

<!DOCTYPE html>
<html lang='pl-PL'>
  <head>
  <title>HTML5</title>
  <meta charset='utf-8'>
  <meta name='author' content='Wiesław Rychlicki'>
  </head>
  <body>
  <h1>Tabela</h1>
    <table border>
    <tr>
      <th>Lp.</th>
      <th>Miejcowość</th>
      <th>Liczba mieszkańców</th>
    </tr>
    <tr>
      <td>1.</td>
      <td>Sanok</td>
      <td>38 397 (2016)</td>
    </tr>
    <tr>
      <td>2.</td>
      <td>Lesko</td>
      <td>5 532 (2017)</td>
    </tr>
    <tr>
      <td>3.</td>
      <td>Ustrzyki Dolne</td>
      <td>9 478 (2006)</td>
    </tr>
    </table>
  </body>
</html>

Podgląd w nowym oknieWalidacjaPobierz plik

Plik: 016a.html

<!DOCTYPE html>
<html lang='pl-PL'>
  <head>
  <title>HTML5</title>
  <meta charset='utf-8'>
  <meta name='author' content='Wiesław Rychlicki'>
  <style>
    table, th, td {
      border: 1px solid black;
    }
  </style>
  </head>
  <body>
  <h1>Tabela</h1>
    <table>
    <tr>
      <th>Lp.</th>
      <th>Miejcowość</th>
      <th>Liczba mieszkańców</th>
    </tr>
    <tr>
      <td>1.</td>
      <td>Sanok</td>
      <td>38 397 (2016)</td>
    </tr>
    <tr>
      <td>2.</td>
      <td>Lesko</td>
      <td>5 532 (2017)</td>
    </tr>
    <tr>
      <td>3.</td>
      <td>Ustrzyki Dolne</td>
      <td>9 478 (2006)</td>
    </tr>
    </table>
  </body>
</html>

Podgląd w nowym oknieWalidacjaPobierz plik
Elementy graficzne

Plik: 017.html

<!DOCTYPE html>
<html lang='pl-PL'>
  <head>
    <title>HTML5</title>
    <meta charset='utf-8'>
    <meta name='author' content='Wiesław Rychlicki'>
  </head>
  <body>
    <h1>Zdjęcia i rysunki</h1>
    <img src='images/lesko.jpg' alt='panorama'>
    <hr>
    <img src='lesko.jpg' alt='panorama'>
    <hr>
    <img src='images/lesko.png' alt='synagoga'>
  </body>
</html>

Podgląd w nowym oknieWalidacjaPobierz plik

Plik: 017a.html

<!DOCTYPE html>
<html lang='pl-PL'>
  <head>
    <title>HTML5</title>
    <meta charset='utf-8' />
    <meta name='author' content='Wiesław Rychlicki' />
  </head>
  <body>
    <h1>Zdjęcia i rysunki</h1>
    <img src='images/lesko.jpg' alt='panorama' />
    <hr />
    <img src='lesko.jpg' alt='panorama' />
    <hr />
    <img src='images/lesko.png' alt='synagoga' />
  </body>
</html>

Podgląd w nowym oknieWalidacjaPobierz plik

Plik: 018.html

<!DOCTYPE html>
<html lang='pl-PL'>
  <head>
    <title>HTML5</title>
    <meta charset='utf-8'>
    <meta name='author' content='Wiesław Rychlicki'>
  </head>
  <body>
    <h1>Grafika wektorowa SVG</h1>
    <svg width='300' height='200'>
      <circle cx='150' cy='100' r='90' fill='red' />
      <rect x='90' y='85' width='120' height='30' style='fill:white' />
    </svg>
  </body>
</html>

Podgląd w nowym oknieWalidacjaPobierz plik

Plik: 019.html

<!DOCTYPE html>
<html lang='pl-PL'>
  <head>
    <title>HTML5</title>
  <meta charset='utf-8'>
  <meta name='author' content='Wiesław Rychlicki'>
  </head>
  <body>
    <h1>Rysowanie w obiekcie canvas</h1>
    <canvas width='300' height='200'></canvas>
    <script>
      const canvas = document.querySelector('canvas');
      const ctx = canvas.getContext("2d");
      ctx.beginPath();
      ctx.arc(150, 100, 90, 0, 2 * Math.PI);
      ctx.fillStyle = 'red';
      ctx.fill();
      ctx.fillStyle = 'white';
      ctx.fillRect(90, 85, 120, 30);  
    </script>
  </body>
</html>

Podgląd w nowym oknieWalidacjaPobierz plik