HTML5 i CSS. Deklaracja <!DOCTYPE> musi być na początki dokumentu napisanego w HTML5 przed tagiem <html>.

Transkrypt

1 Dokumenty HTML5 Każda przeglądarka dostępna na rynku obsługuje HTML5 w różnym stopniu. Możesz sprawdzić swoją testerem dostępnym pod adresem ( HTML5 wprowadza cały zestaw zupełnie nowych elementów do: budowania lepszej struktury dokumentu rysowania obsługi mediów obsługi formularzy Znaczniki: Deklaracja <!DOCTYPE> musi być na początki dokumentu napisanego w HTML5 przed tagiem <html>. Deklaracja <!DOCTYPE> nie jest znacznikiem języka HTML5 lecz instrukcja dla przeglądarki w jakiej wersji HTML a strona jest napisana. Polskie znaki w dokumentach HTML - ( kodowanie ISO , Windows-1250 i UTF-8) Element <meta /> opisujący standard kodowania w dokumencie WWW. W wersjach HTML 4.01 <meta http-equiv="content-type" content="text/html; charset=iso " /> W wersji HTML5 <meta charset= ISO /> Przydatne linki: w3schools html walidator css walidator 6 października 2015 Strona 1

2 1. Przykład poprawnego dokumentu HTML5 plik1.html <!DOCTYPE html > <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>tytuł strony</title> </head> <body> <p>zawartość strony</p> </body> </html> 2. Elementy HTML umożliwiające wprowadzenie podstawowego tekstu plik2.html Elementy nagłówkowe <h1>, <h2>, <h3>,, <h6> Element paragrafu <p> Nowa linia w ramach paragrafu <br /> Elementy tworzące listy <ol>, <ul> i <li> > <h1>techniki Internetowe</h1> <h2>wprowadzenie do języka HTML </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 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 6 października 2015 Strona 2

3 serwisach <ol> <li>html 4.01 rekomendacja W3C</li> <li>xhtml 1.1 rekomendacja W3C</li> <li>html 5 kandydat do rekomendacji</li> </ol> Zadanie 1. Opracować skrypt zawierający elementy <p>, <br/> oraz wybrany element <ul> lub <ol> wraz elementem <li>. Skrypt należy nazwać cwiczenie1.html. 3. Tworzenie tabeli w HTML plik3a.html, plik3b.html Elementy <table>,<tr>, <th> i <td> Elementy <tbody>,<theadr>, <tfoot> plik3a.html <p>lista osób dopuszczonych do egzaminu</p> <table> <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> plik3b.html <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> 6 października 2015 Strona 3

4 <tfoot> <tr><td>suma</td><td>80</td><td>17</td></tr> </tfoot> </table> Zadanie 2. Opracować skrypt prezentujący tablicę zawierający elementy <table>, <tr>, <th>, <td>, <thead>, <tbody> oraz <tfoot>. Skrypt należy nazwać cwiczenie2.html. 4. Elementy formatujące plik4.html Elementy <fieldset> i <legend> Element <span>,<pre>, <sub>, <sup> <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> <fieldset> <legend>równanie 1</legend> <p>y = a * x<sup>2</sup> + b * x + c </p> </fieldset> </pre> <p>kod programu wyświetlającego ustawienia konfiguracyjne modułu php na serwerze php.</p> <pre> &lt?php phpinfo();?> </pre> 6 października 2015 Strona 4

5 5. Kaskadowe arkusze styli CSS plik5.html, plik6.html, plik7.html Umiejscowienie arkuszy styli w dokumencie HTML. przy elemencie formatowanym plik5a.html w nagłówku dokumentu HTML plik5b.html w dołączonym pliku zewnętrznym plik5c.html plik5a.html <body> <p> Do tworzenia stron <span style="font-weight:bold">www </span> wykorzystujemy język <span style="font-weight:bold">html</span>.</p> </body> plik5b.html <head> <meta charset="iso "> <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> plik5c.html <head> <meta charset="iso "> <title>skrypt 5c - CSS</title> <link rel="stylesheet" href="plik5c.css" type="text/css" /> </head> <body> <p>do tworzenia stron <span>www </span> wykorzystujemy język <span>html</span>.</p> </body> 6 października 2015 Strona 5

6 plik5c.css span { text-weight:bold; color:blue } Przykładowe własności formatujące tekst własność text-align { left, right, center, justify } własność text-decoration {none, underline,line-trough,overline} własność color { HEX #ff0000, RGB rgb(255,0,0), name red } link: Przykładowe własności formatujące czcionkę własność font-size wielkość czcionk własność font-family rodzaj czcionki własność font-style {normal, italic, oblique} własność font-weight {normal,bold} Atrybuty ID i CLASS w ramach elementu HTML plik5d.html Wykorzystanie atrybutów ID i CLASS do formatowania tekstu z wykorzystaniem styli CSS. W ramach utworzonego skryptu należy w części nagłówkowej dodać style formatujące zawartość części głównej skryptu HTML. plik5d.html <head> <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> 6 października 2015 Strona 6

7 <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> Wykorzystanie styli do zmiany wyglądu pliku plik2.html kopiujemy zawartość do pliku plik6.html. (plik6.html, plik6.css) Zmiana koloru czcionki w całym dokumencie.. Dodajemy element <span> z odpowiednią nazwą atrybutu class Tworzymy zewnętrzny plik zawierający style plik6.html (zmodyfikowana zawartość pliku plik2.html) <h1>techniki Internetowe</h1> <h2>wprowadzenie do języka HTML </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> 6 października 2015 Strona 7

8 <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 <ol> <li>html 4.01 rekomendacja W3C</li> <li>xhtml 1.1 rekomendacja W3C</li> <li>html 5 kandydat do rekomendacji</li> </ol> plik6.css 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 } Wykorzystanie styli do formatowania tabeli kopia pliku plik3b.html do pliku plik7.html 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> 6 października 2015 Strona 8

9 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 6. Elementy blokowe w dokumentach HTML plik8.html, plik9.html Elementy <div> plik8.html Elementy (HTML5) <section>, <article>, <nav>, <header>, <footer> plik9.html Formatowanie z wykorzystaniem styli CSS plik8.css, plik9.css plik8.html <div id="body"> <div id="header"> <p>techniki Internetowe</p> <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 id="content" > <p>strona 1</p> <div id="footer"> TI_2015 plik8.css 6 października 2015 Strona 9

10 #body { width:838px; border:solid 2px #0033FF; } #header { width:798px; height: 50px; border:solid 1px red; text-align:center; padding:20px } #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 } #footer { border:solid 1px red; clear:both; text-align:center; color:blue } plik9.html <body> <header> <p>techniki Internetowe</p> </header> <nav> <p>menu</p> <ul> <li>strona główna</li> <li>skrypt 1</li> <li>skrypt 2</li> <li>skrypt 3</li> <li>skrypt 4</li> </ul> </nav> <content > <p>strona 1</p> </content> <footer> TI_2015 </footer> </body> plik9.css body { width:838px; border:solid 2px #0033FF; } header { width:798px; height: 50px; border:solid 1px red; text-align:center; padding:20px } 6 października 2015 Strona 10

11 header p { font-size:25px; } nav { height : 500px; width:150px; border:solid 1px red; float:left; } nav p { padding:5px; margin:0px } content { border:solid 1px red; float:left; height : 500px; width:646px; } content img { float:right } footer { border:solid 1px red; clear:both; text-align:center; color:blue } 7. Nawigacja w ramach strony i pomiędzy stronami plik10.html, plik11.html Nawigacja pomiędzy stronami - element <a> z atrybutem href W ramach zadania kopiujemy plik8.html do nowego pliku plik10.html, a następnie modyfikujemy zawartość pliku zgodnie z poniższym wzorcem. plik10.html <div id="body"> <div id="header"> <p>technik Internetowe</p> <div id="menu"> <ul> <li><a href="plik10.html">strona główna</a></li> <li><a href="plik 10a.html">Skrypt 1</a></li> <li><a href="plik 10b.html">Skrypt 2</a></li> <li><a href="plik 10c.html">Skrypt 3</a></li> <li><a href="plik 10d.html">Skrypt 4</a></li> </ul> <div id="content" > <p>strona główna</p> <div id="footer"> TI 2015 Kraków Zawartość pliku kopiujemy do czterech plików o nazwach: plik10a.html, plik10b.html, plik10c.html i plik10d.html. W każdym z plików umieszczamy w elemencie <div id= content > odpowiednio wpisy: 6 października 2015 Strona 11

12 plik10a plik1, plik10b plik2, plik10c plik3 plik10d plik4 sprawdzamy poprawność działania skryptów. W kolejnym punkcie podmienimy zawartość elementu <div id= content > na zawartość poniżej przedstawioną (zgodnie z wcześniejszymi wpisami ). Przykładowo poniżej przedstawiono zawartość w pliku plik10c.html po wprowadzeniu powyższych poprawek. <iframe src="plik3b.html"/> Do pliku styli plik8.css dodajemy dodatkowo wpis: iframe { width: 100%; height: 620px; } plik10c.html <div id="body"> <div id="header"> <p>podyplomowy kurs dla nauczycieli</p> <div id="menu"> <ul> <li><a href="plik10.html">strona główna</a></li> <li><a href="plik10a.html">skrypt 1</a></li> <li><a href="plik10b.html">skrypt 2</a></li> <li><a href="plik10c.html">skrypt 3b</a></li> <li><a href="plik10d.html">skrypt 4</a></li> </ul> <div id="content" >  <iframe src="plik3b.html"/> <div id="footer"> TI 2015 Kraków 6 października 2015 Strona 12

13 Nawigacja wewnątrz strony plik11.html <head> <meta charset="iso "> <title>plik 11</title> <style type="text/css">.p {text-decoration:underline}.t {font-weight:bold} body {color:blue} ol.c {list-style-type: upper-roman;} </style> </head> <body> <p class="p">cel zajęć:</p> <p>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.</p> <p class="p">tematyka zajęć:</p> <ol class="c"> <li><a href="#p1">podstawowe elementy języka HTML</a></li> <li><a href="#p2">formatowanie semantyczne tekstu w ramach prostego dokumentu WWW</a></li> <li><a href="#p3">tabele w serwisie WWW</a></p> </ol> <a name="p1"></a> <p class="t">i. Wprowadzenie (plik1.html)</p> <ol> <li>środowisko serwera WWW, katalog public_html na serwerze Pascal, edytor tekstu.</li> <li>prosta strona WWW wymagane elementy.</li> <li>walidacja dokumentów HTML w serwisie W3Validator (<a href=" znaczenie elementu doctype.</li> <li>polskie znaki w dokumentach HTML - ( kodowanie ISO , Windows-1250 i UTF-8)</li> </ol> 6 października 2015 Strona 13

14 <fieldset> <legend>plik1.html</legend> <pre> <!doctype html> <html> <head> <title>skrypt 1</title> </head> <body> <p>to jest pierwszy skrypt.</p> </body> </html> </pre> </fieldset> <a name="p2"></a> <p class="t">ii. Elementy HTML umożliwiające wprowadzenie podstawowego tekstu (plik2.html)</p> <ol> <li>elementy nagłówkowe <h1>, <h2>,, <h6> <il>element paragrafu <p> <li>nowa linia w ramach paragrafu <br /> <li>elementy tworzące listy <ol>, <ul> i <li> </ol> <a name="p3"></a> <p class="t">iii. Tabele w serwisie WWW</p> <p>język HTML umożliwia tworzenie tabel na stronie WWW. Do realizacji tego zadania wykorzystujemy następujące elementy <table>, <tr>, <th> i <td>.</p> </body> Zadanie 4. Opracować prosty dokument zawierający nawigację wewnętrzną. W ramach skryptu należy wykorzystać co najmniej następujące elementy <p>, <span>, <fieldset>, <legend> i <table>. Do formy prezentacyjnej należy wykorzystać style CSS umieszczone w nagłówku. Zadanie umieścić w skrypcie pod nazwą cwiczenie4.html 6 października 2015 Strona 14

15 8. Multimedia w ramach języka HTML plik12.html Pliki graficzne <img /> Pliki audio <audio /> Pliki video <video /> plik12.html <p>zajecia TI Lab01 <span style= font-weight:bold >Multimedia</span></p> <p>grafika - plik JPG </p> <img src="sample.jpeg" alt="angry face" /> <br /> <p>audio - plik WAV</p> <audio id="audio" src="sample.ogg" controls></audio> <br /> <p>video - plik MP4</p> <video id="video" controls autoplay> <source src="sample.mp4" type="video/mp4"/> </video> Pozycjonowanie - określa pozycję elementu w stosunku do sąsiadujących elementów, do nadrzędnego pojemnika oraz w stosunku do okna przeglądarki pozycjonowanie Przykład prostej strony przykład Zadanie5: Stworzyć stronę, która będzie szablonem do opisu poszczególnych elementów standardu HTML. Przygotowany dokument powinien spełniać następujące wymagania: 1. Podział strony na sekcje w oparciu o element DIV lub elementy blokowe w HTML5 2. Strona zawiera następujące sekcje: o nagłówek informujący o przeznaczeniu strony o element zawierający listę opracowanych elementów HTML o element zawierający opis elementu o stopka informująca o autorze, wersji 3. W sekcji opisującej element należy umieścić o krótką informację o elemencie o linki do stron rozszerzających naszą wiedzę o przykładowy kod użycia opisywanego elementu o zrzut z ekranu przeglądarki prezentujący użycie elementu 4. Formatowanie dokumentu może być wykonane tylko przy użyciu arkuszy styli z zewnętrznego pliku 5. Dokument należy przygotować w standardzie HTML5 6. Utworzony dokument przechodzi walidację HTML5 i CSS 6 października 2015 Strona 15

16 6 października 2015 Strona 16