home_site

Lab01 - Wprowadzenie, język HTML5 [ ver. TI.2025.10.01.003 ]

Zawartość strony

Cel zajęć

Zapoznanie językiem HTML, walidacja poprawności składniowej opracowanych stron. Umiejętność wykorzystania kaskadowych styli CSS do formatowania wyświetlanych informacji w przeglądarkach.
Przydatne linki:

Tematyka zajęć:

  1. Podstawowe elementy języka HTML
  2. Elementy HTML umożliwiające wprowadzenie podstawowego tekstu
  3. Elementy semantyczne w języku HTML5
  4. Tabele w serwisie WWW
  5. Dodatkowe elementy formatujące tekst w ramach stron WWW
  6. Formatowanie strony z wykorzystaniem kaskadowych arkuszy styli CSS
  7. Elementy blokowe w języku HTML
  8. Nawigacja w ramach dokumentów HTML
  9. Prezentacja multimediów w ramach języka HTML

A. Podstawowe elementy języka HTML

  1. Środowisko serwera WWW
    • serwer Pascal:
      katalog public_html - 
       > mkdir public_html

      uprawnienia drwx---r-x - 
       > chmod -R 705 public_html

    • edytory tekstu: vim, joe, nano
  2. Prosta strona WWW - wymagane elementy.
  3. Walidacja dokumentów HTML w serwisie W3Validator, znaczenie elementu doctype.
  4. Polskie znaki w dokumentach HTML - ( kodowanie UTF-8 )
    • Element <meta /> opisuje standard kodowania w dokumencie WWW.
    • W wersji HTML5 - <meta charset="UTF-8" /> ,
    • W wersji HTML 4.01 - <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  5. Pierwszy skrypt w języku HTML lab1_1.html - ( [listing dokumentu] [link do dokumentu] [widok dokumentu]) 
       <!doctype html>
<html>
    <head>
       <title>Skrypt 1</title>
   </head>
  <body>
      <p>To jest pierwszy skrypt.</p>
  </body>
</html>

B. Elementy HTML umożliwiające wprowadzenie podstawowego tekstu

  1. Elementy <h1>, <h2>, <h3>, ... , <h6> wykorzystujmy do tworzenia nagłówków w dokumentach.
  2. Element <p> tworzy paragraf wewnątrz dokumentu.
  3. Element <br /> wykorzytujemy to przejścia do nowej linii wewnątrz paragrafu.
  4. Tworzenie list wewnątrz dokumentów:
    • lista nieuporządkowana <ul> i <li>,
    • lista uporządkowana <ol>, <ul> i <li>,
    • lista definiowana <dl>, <dd> i <dt>
  5. Przykładowe wykorzystanie powyższych elementów przedstawia skrypt lab1_2.html.

    Skrypt lab1_2.html ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

    <!DOCTYPE HTML >
<html>
  <head>
  <meta charset="UTF-8">
  <title>Skrypt 2</title>
  </head>
  <body>
  <h1>Techniki Internetowe</h1>
  <h2>Serwis WWW - statyczny, dynamiczy i aktywny</h2>
  <p> W ramach zajęć przedstawione zostaną języki umożliwiające prezentację treści w przeglądarce oraz technologie wspierające statyczne, dynamiczne i aktywne serwisy.</p>
  <p>Serwisem statycznym  nazywamy  implementację technologii WWW w której wykorzystujemy tylko pliki zawierające tekst przygotowany w języku HTML czy XML.
  <br/>
  Serwisem dynamicznym nazywamy implementację technologii WWW w której wykorzystujemy na serwerze WWW skrypty tworzące treść na żądanie klienta.
  <br />
  Serwisem aktywnym nazywamy implementację serwisu WWW w której użytkownik otrzymuje możliwość modyfikacji zawartość strony po stronie klienta (w przeglądarce).</p>
  <h2>Dynamiczny serwis WWW</h2>
  <p>W ramach serwisu dynamicznego wykorzystujemy języki skryptowe lub bardziej rozbudowane technologie takie jak JavaEE lub technologia ASP.NET.</p>
  <p>Języki skryptowe wykorzystywane w dynamicznych serwisach.</p>	
  <ul>
    <li>Język perl.</li>
    <li>Język python.</li>
    <li>Język php.</li>
  </ul>
  <p>Obecnie używamy następujące wersje języka HTML do prezentacji treści w serwisach WWW.</p>
  <ol>
    <li>HTML 4.01 rekomendacja W3C</li>
    <li>XHTML 1.1 rekomendacja W3C</li>
    <li>HTML 5 kandydat do rekomendacji</li>
  </ol>
  <dl>
  <p>Zajecia z języka HTML5.</p>
  <dt>Język html</dt>
  <dd><ul>
      <li>Opis dokumentu html5 i xhtml 1.1 - dyrektywa doctype</li>
      <li>Sprawdzanie poprawności stron www - walidacja dokumentu</li>
      <li>Elementy blokowe, liniowe i listy</li>
      <li>Odsyłacze</li>
  </ul></dd>     
  <dt>Arkusze styli CSS</dt>
  <dd><ul>   
     <li>Arkusze styli CSS - wstępne informacje</li>
     <li>Sprawdzanie poprawności styli CSS - walidacja dokumentu</li>
     <li>Formatowanie elementów blokowych, liniowych i listy</li>
     <li>Wykorzystanie znaczników &lt;table&gt; i &lt;div&gt; do tworzenia szablonów stron www</li>
   </ul></dd>
</dl>

  </body>
</html>
Zadanie 1.

Opracować skrypt zawierający elementy <p>, <br/> oraz wybrany element <ul>, <ol> z elementami <li> lub <dl> z elementami <dd> i <dt>.
Skrypt należy nazwać cwiczenie1.html.

C. Elementy semantyczne w HTML5

ElementOpis
<header> Reprezentuje złożony segment nagłówka. Możliwe wystąpienie jako nagłówek w długim tekscie zamieszczonym w elementach <section> lub <header>.
<footer> Reprezentuje sekcję stopki u dułu strony (np. w długim tekście zamieszczonym w <article> lub <section>)
<nav> Oznacza ważny zbiór odnośników na stronie. Zawarte w nim linki mogą się odnościć do tematów w otwartym dokumencie badĽ do innych stron w całej witrynie.
<article> Reprezentuje zawartość, która może być uznana za artykuł - pełne niepodzielne treści w rodzaju artykułu z gazety lub postu na forum.
<section> Reprezentuje sekcję dokumnetu lub grupy dokumentów. Element ten jest wszechstronnym znacznikiem, który jedna reguła - zawarta w nim treść powinna się zaczynać się od nagłówka.
<time> Informacje o czasie i dacie.
<aside> Oznacza pełen fragment treści odseperowany od głównej zawartości strony.Elementu można użyć do tworzenia np. panelu bocznego.
<figure>,<figcaption> Oznacza rysunek lub zdjęcie. Element <figure> zawiera elementy <img> i <figcaption>.

D. Tworzenie tabeli w HTML

  1. Tabelę w dokumencie html budujemy z pomocą elementów tworzących tabelę, poszczególne wiersze tabeli i kolumny. Mamy też do dyspozycji elementy formatujące kulumny nagłówka tabeli oraz dodatkowo elementy formatujące wiersze należące do nagłówka, stopki i części głównej tabeli.
  2. Tabelę tworzymy z pomocą elementu <table>.
  3. Rekordy wewnątrz tabeli budowane są z wykorzystaniem elementów <tr>.
  4. Kolumny wewnątrz rekordu tworzymy z wykorzystaniem elemetu <td>.
  5. Kolumny wewnątrz wiersza nagłówkowego można utworzyć z pomocą elementu <th> (inne formatowanie).
  6. Tworząc tabelę można wykorzystać dodatkowo elementy <tbody>, <thead> i <tfoot>, które umożliwiają grupowanie rekordów w bloki (nagłówkowe, centralne i należące do podsumowania).
  7. Skrypt (lab1_3a.html) zawiera prosty przykład tabeli.

    Skrypt lab1_3a.html ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

    <!DOCTYPE HTML >
<html>
  <head>
  <meta charset="UTF-8">
  <title>Skrypt 3a</title>
  </head>
  <body>
    <p>Lista osób dopuszczonych do egzaminu.</p>
<table border="1">
<tr><th>Lp.</th><th>Nazwisko</th><th>Imię</th></tr>
<tr><td>1</td><td>Abacki</td><td>Adam</td></tr>
<tr><td>2</td><td>Babacki</td><td>Marek</td></tr>
<tr><td>3</td><td>Cabacka</td><td>Ewa</td></tr>
<tr><td>4</td><td>Dadacki</td><td>Grzegorz</td></tr>
</table>

  </body>
</html>
  8. Skrypt (lab1_3b.html) przedstawia wykorzystanie wszystkich zaprezentowanych elementów do konstrukcji tabeli.

    Skrypt lab1_3b.html ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

    <!DOCTYPE HTML >
<html>
  <head>
  <meta charset="UTF-8">
  <title>Skrypt 3b</title>
  </head>
  <body>
  <p>Liczba osób i projektów realizowanych w oddziałach firmy.</p>
	<table>
	<thead>
<tr><th>Oddział</th><th>Liczba osób</th><th>Liczba projektów</th><th>
	</thead>
	<tbody>
<tr><td>Kraków</td><td>15</td><td>3</td></tr>
<tr><td>Warszawa</td><td>35</td><td>7</td></tr>
<tr><td>Gdańsk</td><td>20</td><td>5</td></tr>
<tr><td>Rzeszów</td><td>10</td><td>2</td></tr>
	</tbody>
	<tfoot>
<tr><td>Suma</td><td>80</td><td>17</td></tr>
	</tfoot>
</table>


  </body>
</html>
Zadanie 2.

Opracować skrypt prezentujący tablicę zawierający elementy <table>, <tr>, <th>, <td>, <tbody>, <thead> oraz <tfoot>. Skrypt należy nazwać cwiczenie2.html.

E. Dodatkowe elementy formatujące tekst w ramach stron WWW

  1. Element <fieldset> służy do grupowanie elementów czy kontrolek formularzy pod wspólną nazwą. Nazwę tę określa pierwszy element <legend> będący dzieckiem elementu <fieldset>.
  2. Element <span> wykorzystujemy do grupowania elementów typu inline (np. słów w tekście albo obrazków), najczęściej celem przypisania im określonego stylu.
  3. Element <pre> służy do wyświetlenia bloku tekstu z zachowaniem jego oryginalnego formatowania, czyli z zachowaniem formatowania wykonanego za pomocą spacji i znaków przejścia do nowej linii. Dodatkowo tekst umieszczony wewnątrz elementu wyświetlany jest czcionką o stałej szerokości znaków.
  4. Elementy <sup> i <sub> umożliwiają tworzenie indeksów górnych i dolnych.
  5. Encje predefiniowane: & ─▻ &amp; , < ─▻ &lt; , > ─▻ &gt;
  6. Przykładowe wykorzystanie przedstawionych powyżej elementów zawiera skrypt lab1_4.html.

    Skrypt lab1_4.html ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

    <!DOCTYPE HTML >
<html>
  <head>
  <meta charset="UTF-8">
  <title>Skrypt 4</title>
  </head>
  <body>
<p> Poniżej przedstawiono postać wielomianu w drugiej potędze. </p>
<fieldset>
  <legend>Równanie 1</legend>
  <p>y = a * x<sup>2</sup> + b * x + c </p>
</fieldset>
<p>W ramach dokumentu powyższe równanie należy zakodować w języku <span>HTML</span> zgodnie z poniższym wzorem.<p> 
<pre>
&lt;fieldset&gt;
  &lt;legend&gt;Równanie 1&lt;/legend&gt;
  &lt;p&gt;y = a * x&lt;sup&gt;2&lt;/sup&gt; + b * x + c &lt;/p&gt;
&lt;/fieldset&gt;
</pre>
<p>Kod programu wyświetlającego ustawienia konfiguracyjne modułu php na serwerze php.</p>
<pre>
&lt?php
phpinfo();
?&gt;
</pre>

  </body>
</html>

F. Formatowanie strony z wykorzystaniem kaskadowych arkuszy styli CSS

  1. Umiejscowienie arkuszy styli w dokumencie HTML
    1. przy elemencie formatowanym (lab1_5a.html)

      Skrypt lab1_5a.html ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

      <!DOCTYPE HTML >
<html>
  <head>
  <meta charset="UTF-8">
  <title>Skrypt 5a - CSS</title>
  </head>
  <body>

   <p>Do tworzenia stron  <span style="font-weight:bold">WWW </span> wykorzystujemy język 
   <span style="font-weight:bold">HTML</span>.</p>

  </body>
</html>
    2. w nagłówku dokumentu HTML (lab1_5b.html)

      Skrypt lab1_5b.html ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

      <!DOCTYPE HTML >
<html>
  <head>
    <meta charset="UTF-8">
    <title>Skrypt 5b - CSS</title>
    <style type="text/css">
      span  { font-weight:bold; color:red	 }
    </style>
  </head>
  <body>
     <p>Do tworzenia stron  <span>WWW </span> wykorzystujemy język 
     <span>HTML</span>.</p>
  </body>
</html>
    3. w dołączonym pliku zewnętrznym (lab1_5c.html, lab1_5c.css)

      Skrypt lab1_5c.html ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

      <!DOCTYPE HTML >
<html>
  <head>
    <meta charset="UTF-8">
    <title>Skrypt 5c - CSS</title>
		<link rel="StyleSheet" href="lab1_5c.css"  type="text/css" />
  </head>
  <body>
   <p>Do tworzenia stron  <span>WWW </span> wykorzystujemy język 
   <span>HTML</span>.</p>
  </body>
</html>

      Skrypt lab1_5c.css ( [listing dokumentu] [link do dokumentu] )

       
/* CSS Document */
span { text-weight:bold; color:blue }
  2. Przykładowe własności formatujące tekst:
    1. wyrównywanie lub justowanie tekstu - własność text-align { left, right, center, justify }
    2. podkreślenie, przekreślenie - własność text-decoration {none, underline,line-trough,overline}
    3. kolor czcionki - własność color { HEX '#ff0000', RGB 'rgb(255,0,0)', name 'red'}
      link: http://www.w3schools.com/colors/colors_names.asp
  3. Przykładowe własności formatujące czcionkę:
    1. wielkość czcionki - własność font-size
    2. rodzaj czcionki - własność font-family
    3. kursywa - własność font-style {normal, italic, oblique}
    4. pogrubienie -własność font-weight {normal,bold}
  4. Atrybuty ID i CLASS w ramach elementu HTML:
    1. Atrybut ID jest unikalnym identyfikatorem elementu html służy do jego identyfikacji. konkretną wartość atrybutu można przepisać tylko jednemu elementowi w dokumencie.
    2. Atrybut CLASS podobnie jak ID służy do identyfikacji elementów html. Jednak w przeciwieństwie do ID można go przypisać do kilku elementów html.
    3. Atrybuty ID i CLASS wykorzystuje się do formatowania tekstu z wykorzystaniem styli CSS. Skrypt (lab1_5d.html) przedstawia formatowanie dokumentu html z wykorzystaniem powyższych atrybutów

      Skrypt lab1_5d.html ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

      <!DOCTYPE HTML >
<html>
  <head>
  <meta charset="UTF-8">
  <title>Skrypt 5d</title>
  <style type= "text/css">
   .par1 { color:red }
   .par2 { color:green }
   #id3 { color:blue }
   span { font-weight:bold}
  </style>
  </head>
  <body>
   	<p id="id1" class="par1">To jest <span>pierwszy</span> paragraf</p>
   	<p id="id2" class="par1">To jest <span>drugi</span> paragraf</p>
   	<p id="id3" class="par2">To jest <span>trzeci</span> paragraf</p>
   	<p id="id4" class="par2">To jest <span>czwarty</span> paragraf</p>
   	<p id="id5" class="par2">To jest <span>piaty</span> paragraf</p> 
  </body>
</html>
  5. Wykorzystanie styli do zmiany wyglądu skryptu lab1_2.html - kopiujemy zawartość do pliku lab1_6.html. (lab1_6.html, lab1_6.css)
    1. Zmiana koloru czcionki w całym dokumencie.
    2. Dodajemy element <span> z odpowiednią nazwą atrybutu class.
    3. Tworzymy zewnętrzny plik zawierający style.
    4. Zawartość skryptu lab1_6.html.

      Skrypt lab1_6.html ( [listing dokumentu] [ink do dokumentu] [widok dokumentu])

      <!DOCTYPE HTML >
<html>
  <head>
  <meta charset="UTF-8">
  <title>Skrypt 6</title>
  <link rel="StyleSheet" href="lab1_6.css"  type="text/css" />
  </head>
  <body>
  <h1>Techniki Internetowe</h1>
  <h2>Serwis WWW - stayczny, dynamiczny i aktywny</h2>
  <p> W ramach zajęć przedstawione zostaną języki umożliwiające prezentację treści w przeglądarce oraz technologie wspierające statyczne, dynamiczne i aktywne serwisy.</p>
  <p><span class="servis">Serwisem statycznym</span>  nazywamy  implementację serwisu <span class="tech">WWW</span> w której wykorzystujemy tylko pliki zawierające tekst przygotowany w języku HTML czy XML.
  <br/>
  <span class="servis">Serwisem dynamicznym</span> nazywamy implementację serwisu <span class="tech">WWW</span> w której wykorzystujemy na serwerze WWW skrypty tworzące treść na żądanie klienta.
  <br />
  <span class="servis">Serwisem aktywnym</span> nazywamy implementację serwisu <span class="tech">WWW</span> w której użytkownik otrzymuje możliwość modyfikacji zawartość strony po stronie klienta (w przeglądarce).</p>
  <h2>Dynamiczny serwis WWW</h2>
  <p>W ramach serwisu dynamicznego wykorzystujemy języki skryptowe lub bardziej rozbudowane technologie takie jak <span class="tech">JavaEE</span> lub technologia <span class="tech">ASP.NET</span>.</p>
  <p>Języki skryptowe wykorzystywane w dynamicznych serwisach.</p>
  <ul>
    <li>Język perl.</li>
    <li>Język python.</li>
    <li>Język php.</li>
  </ul>
  <p>Obecnie używamy następujące wersje języka HTML do prezentacji treści w serwisach WWW.</p>
  <ol>
    <li>HTML 4.01 rekomendacja W3C</li>
    <li>XHTML 1.1 rekomendacja W3C</li>
    <li>HTML 5 kandydat do rekomendacji</li>
  </ol>

  </body>
</html>
    5. Formatowanie dokumentu - skrypt lab1_6.css.

      Skrypt lab1_6.css ( [listing dokumentu] [link do dokumentu] )

      /* CSS Document */
body { color:blue }
.servis { text-decoration:underline }
.tech { font-weight:bold;  }
ul > li { font-style:italic; color:green }
ol > li { font-style:italic; color:red }
ol > li:first-child { font-weight:bold }
  6. Wykorzystanie styli do formatowania tabeli - kopia skryptu lab1_3b do skryptu lab1_7.html.
    1. Dodajemy do nagłówka pliku opis styli modyfikujący wygląd tabeli. 
      <style type="text/css">
table { border-collapse:collapse; width: 40% }
table, td, th { border:1px solid blue; }
thead { background-color: #00ffff; text-align:center}
tbody { background-color: #f0f8ff; font-style:italic; text-align:right }
tfoot { background-color: red; font-weight:bold; text-align:right }
</style>
Zadanie 3.

Wykorzystując skrypt z zadania 2 oraz wykorzystując arkusze styli należy sformatować opracowaną w zadaniu tabelę. Kolor czcionki w tabeli - niebieski. Kolor tła w części nagłówkowej jasno niebieski, kolor tła w części głównej jasno zielony a kolor tła w części podsumowania jasno czerwony. Czcionka w części podsumowania pogrubiona. Własności styli należy umieścić w części nagłówkowej dokumentu HTML, a przerobiony skrypt należy nazwać cwiczenie3.html.

G. Elementy blokowe w dokumentach HTML

  1. Element blokowy <div> służy do grupowania innych innych elementów w jedną spójną całość, którą można następnie formatować określoną grupą styli css.
  2. Formatowanie strony z wykorzystaniem elementu <div> i styli css, pliki lab1_8.html i lab1_8.css.

    Skrypt lab1_8.html ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

    <!doctype html>
<html>
  <head>  
    <title>Skrypt 8</title>    
    <link rel="stylesheet" href="lab1_8.css" type="text/css" /> 
  </head>  
  <body>  
  <div id="body">  
     <div id="header">       
        <p>Techniki internetowe</p>
     </div>
     <div id="menu">
       <ul>
         <li>Strona główna</li>
         <li>Skrypt 1</li>
         <li>Skrypt 2</li>
         <li>Skrypt 3</li>
         <li>Skrypt 4</li>
       </ul>  
     </div>
     <div id="content" >
       <p>Strona 1</p>  
     </div>
     <div id="footer"> 
	      TI 2018 Kraków 
      </div>  
  </div>
  </body> 
</html>

    Skrypt lab1_8.css ( [listing dokumentu] [link do dokumentu] )

    /* CSS Document */
#body  { width:800px; border:solid 2px #0033FF; }
#header { width:798px; height: 50px; border:solid 1px red; text-align:center;  }
#header p { font-size:25px; }
#menu { height : 500px; width:150px; border:solid 1px red; float:left;  }
#menu p { padding:5px; margin:0px }
#content { border:solid 1px red; float:left; height : 500px; width:646px;  }
#content img { float:right }
/*
#content h1 { color:navy; font-size:12pt; text-align:center }
#content h2 { color:green; font-size:12pt; text-align:center}
#content p.italic { font-style:italic }
*/
#footer { border:solid 1px red; clear:both; text-align:center; color:blue }
iframe { width: 100%; height: 620px; }
  3. Elementy semantyczne <section>, <article>, <nav>, <header>, <footer> dostępne w języku HTML5 udostępniają funkcjonalność semantyczną tworzonym grupom elementów na stronie.
  4. Formatowanie strony z wykorzystaniem elementów semantycznych przedstawiono w plikach lab1_9.html i lab1_9.css.

    Skrypt lab1_9.html ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

    <!doctype html>
<html>
  <head>  
    <title>Skrypt 8</title>    
    <link rel="stylesheet" href="lab1_9.css" type="text/css" /> 
  </head>  
  <body>  
  <main>  
<header>       
<p>Techniki internetowe</p>
</header>
<nav>
<ul>
         <li>Strona główna</li>
         <li>Skrypt 1</li>
         <li>Skrypt 2</li>
         <li>Skrypt 3</li>
         <li>Skrypt 4</li>
       </ul>  
</nav>
<article>
<header>Strona 1</header>  
</article>
<footer> 
TI 2018 Kraków 
</footer>  
</main>
  </body> 
</html>

    Skrypt lab1_9.css ( [listing dokumentu] [link do dokumentu] )

    main  { width:800px; border:solid 2px #0033FF; }
main > header { width:798px; height: 50px; border:solid 1px red; text-align:center;  }
header p { font-size:25px; }
/* nav { height : 500px; width:150px; border:solid 1px red; float:left;  }  */
nav { height : 500px; width:150px; border:solid 1px red;   }
nav p { padding:5px; margin:0px }
article { border:solid 1px red; height : 500px; width:646px;  }
article > header { font-size: 20px; padding: 15px} 
footer { border:solid 1px red; clear:both; text-align:center; color:blue }

I. Multimedia w ramach języka HTML

  1. Pliki graficzne <img />
  2. Pliki audio <audio />
  3. Pliki video <video />
  4. Skrypt lab1_12.html ( [listing dokumentu] [link do dokumentu] [widok dokumentu]) 
    <!DOCTYPE HTML >
<html>
  <head>
  <meta charset="UTF-8">
  <title>Skrypt 3a</title>
  </head>
  <body>
   <p>Zajecia  TI Lab01 <span style="font-weight:bold">Multimedia</span></p>
    <p>Grafika - plik JPG </p>
     <img src="sample.jpg" alt="Angry face" /> 
     <br />
    <p>Audio - plik WAV</p>
     <audio id="audio" src="flipper.wav" controls></audio>
     <br />
    <p>Video - plik MP4</p>
     <video id="video" controls autoplay>
       <source src="sample.mp4" type="video/mp4"/>
     </video>
  </body>
</html>
Zadanie 5.

Przygotować dokument html zgodnie z wzorcem poniżej zawierający elementy:

zad5
Rys.1 Przykładowa realizacja zadania.

Zadanie umieścić w skrypcie pod nazwą cwiczenie5.html.