home_site

Lab02 - HTML5 i CSS [ lab: 20.01.2023, ver. SPN.2023.01.08.003 ]

Zawartość strony

Cel zajęć

Tworzenie stron WWW z wykorzystaniem języka HTML, walidacja poprawności składniowej opracowanych stron. Umiejętność wykorzystania kaskadowych styli CSS do formatowania wyświetlanych informacji w przeglądarkach.

Tematyka zajęć:

  1. Formatowanie strony z wykorzystaniem kaskadowych arkuszy styli CSS
  2. Elementy blokowe w języku HTML
  3. Nawigacja w ramach dokumentów HTML
  4. Prezentacja multimediów w ramach języka HTML
  5. Podsumowanie - zadanie

  1. Formatowanie strony z wykorzystaniem kaskadowych arkuszy styli CSS - wprowadzenie.

    1. Umiejscowienie arkuszy styli w dokumencie HTML.
      1. Przy elemencie formatowanym - wykorzystujemy atrybut style (lab2_1a.html).

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

           <!DOCTYPE HTML >
<html>
  <head>
  <meta charset="UTF-8">
  <title>Skrypt 1a - 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 - wykorzystujemy element <style> (lab2_1b.html).

        Skrypt lab2_1b.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 - wykorzystujemy element <link> z atrybutem href (lab2_1c.html, lab2_1c.css).

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

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

        Skrypt lab2_1c.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 lab2_1d.html ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

        <!DOCTYPE HTML >
<html>
  <head>
  <meta charset="UTF-8">
  <title>Skrypt 1d</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 lab2_2.html. (lab2_2.html, lab2_2.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 lab2_2.html.

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

        <!DOCTYPE HTML >
<html>
  <head>
  <meta charset="UTF-8">
  <title>Skrypt 6</title>
  <link rel="StyleSheet" href="lab2_2.css"  type="text/css" />
  </head>
  <body>
  <h1>Podyplomowy kurs dla nauczycieli</h1>
  <h2>Techniki Internetowe </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 lab2_2.css.

        Skrypt lab2_2.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 lab2_3.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>
      2. Formatowanie tabeli - skrypt lab1_7.html.

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

        <!DOCTYPE HTML >
<html>
  <head>
    <meta charset="UTF-8">
    <title>Skrypt 7</title>
    <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>
  </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></tr>
	</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>
    Ćwiczenie 1.

    Wykorzystując skrypt z ćwiczenia 2 z laboratorium 1 oraz wykorzystując arkusze styli należy sformatować opracowaną w ćwiczeniu 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 umieścić w katalogu lab02 i nazwać cwicz01.html.

    Lab2_cwicz4
    Rys.1 Przykładowa prezentacja do ćwiczenia 1.

  2. Elementy blokowe w dokumentach HTML

    1. Element blokowy <div> służy do grupowania 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 lab2_4.html i lab2_4.css.

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

      <!doctype html>
<html>
  <head>  
    <title>Skrypt 4</title>    
    <link rel="stylesheet" href="lab2_4.css" type="text/css" /> 
  </head>  
  <body>  
  <div id="body">  
     <div id="header">       
        <p>Podyplomowy kurs dla nauczycieli</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"> 
	      &copy; SPN 2022 Kraków 
      </div>  
  </div>
  </body> 
</html>

      Skrypt lab2_4.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 lab2_5.html i lab2_5.css.

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

      <!doctype html>
<html>
  <head>  
    <title>Skrypt 5</title>    
    <link rel="stylesheet" href="lab2_5.css" type="text/css" /> 
  </head>  
  <body>  
  <main>  
    <header>       
       <p>Podyplomowy kurs dla nauczycieli</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> 
       &copy; SPN 2022 Kraków 
    </footer>  
  </main>
  </body> 
</html>

      Skrypt lab2_5.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;  float:left; }
nav p { padding:5px; margin:0px }
article { border:solid 1px red; height : 500px; width:646px; float:left; }
article > header { font-size: 20px; padding: 15px} 
footer { border:solid 1px red; clear:both; text-align:center; color:blue }

  3. Multimedia w ramach języka HTML

    1. Pliki graficzne <img />
    2. Pliki audio <audio />
    3. Pliki video <video />

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

    <!DOCTYPE HTML >
<html>
  <head>
    <meta charset="UTF-8">
    <title>Multimedia</title>
    <style type="text/css">
      body { color:blue }
	  header { font-weight:bold; padding:10px; }
	  article { border: solid 1px blue; width:800px; background: white; margin: 10px; padding:10px }
	  article > header { font-weight:normal; padding:10px }
      img { width:60%; }
      audio { width:60%; }
      video { width:60%; }	  
    </style>
  </head>
  <body>
   <header>Zajecia  SPN TI – Lab02 <span style="font-weight:bold">Multimedia</span></header>
     <article >
     <header>Grafika - plik JPG </header>
	   <figure>
         <img src="sample.jpg" alt="Lab02_grafika" />
	     <figcaption style="text-align:center; width:70%">Rys.1 Obraz w dokumencie HTML.</figcaption>
       </figure> 
     </article>   
     <article >
     <header>Audio - plik WAV</header>
	   <figure>
         <audio id="audio" src="flipper.wav" controls>
           <source src="flipper.ogg" type="audio/ogg">
           <source src="flipper.mp3" type="audio/mpeg">
           <source src="flipper.wav" type="audio/wav">		 
	     </audio>
		 <figcaption style="text-align:center; width:70%">Rys.2 Dźwięk w dokumencie HTML.</figcaption>
	   </figure> 
     </article>
     <article >
     <header>Video - plik MP4</header>
	   <figure>
         <video id="video" controls autoplay>
           <source src="sample.mp4" type="video/mp4" />
         </video>
		 <figcaption style="text-align:center; width:70%">Rys.3 Wideo w dokumencie HTML.</figcaption>
	   </figure> 		 
     </article> 
  </body>
</html>

  4. Podsumowanie - ćwiczenie 3

    5. Ćwiczenie 3

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

    • Elementy semantyczne: <article>, <header> ;
    • Formatowanie tabeli: <table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td>;
    • Element <img>;
    • Formatowanie tabeli z wykorzystaniem styli CSS.
    Rys.2 Przykładowa realizacja ćwiczenia.

    Zadanie umieścić w katalogu lab02 w skrypcie pod nazwą cwicz03.html.