Laboratorium 1

Transkrypt

Laboratorium 1

Laboratorium „Technologie internetowe”
Lab_TI_Lab01_03_10_2016
Laboratorium Technologie Internetowe Lab01 - HTML5
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:
 w3schools
 html walidator
 css walidator
http://ww1.w3schools.com/
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
Tematyka zajęć:
A.
B.
C.
D.
E.
F.
G.
Podstawowe elementy języka HTML
Formatowanie semantyczne tekstu w ramach prostego dokumentu WWW
Tabele w serwisie WWW
Dodatkowe elementy formatujące tekst w ramach stron WWW
Formatowanie strony z wykorzystaniem kaskadowych arkuszy styli CSS
Elementy blokowe w języku HTML
Nawigacja w ramach dokumentów HTML
A. Wprowadzenie (skrypt1.html)
1. Środowisko serwera WWW, katalog public-html na serwerze fatcat, edytor tekstu.
2. Prosta strona WWW – wymagane elementy.
3. Walidacja dokumentów HTML w serwisie W3Validator, znaczenie elementu doctype.
Link do strony: http://validator.w3.org/
4. Polskie znaki w dokumentach HTML - ( kodowanie ISO-8859-2, 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-8859-2" />
W wersji HTML5 –
<meta charset=”ISO-8859-2” />
skrypt1.html
<!doctype html>
<html>
<head>
<title>Skrypt 1</title>
</head>
<body>
<p>To jest pierwszy skrypt.</p>
</body>
</html>
Wersja 0.33 (03.10.2016)
Antoni Dydejczyk @ 2014, Strona 1 z 10
Lab_TI_Lab01_03_10_2016
B. Elementy HTML umożliwiające wprowadzenie podstawowego tekstu (skrypt2.html)
1.
2.
3.
4.
Elementy nagłówkowe <h1>, <h2>, <h3>, …, <h6>
Element paragrafu <p>
Nowa linia w ramach paragrafu <br />
Elementy tworzące listy <ol>, <ul> i <li>
skrypt2.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>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
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>
Zadanie 1.
Opracować skrypt zawierający elementy <p>, <br/> oraz wybrany element <ul> lub <ol> wraz
elementem <li>. Skrypt należy nazwać „cwiczenie1.html”.
C. Tworzenie tabeli w HTML (skrypt3a.html, skrypt3b.html)
1. Elementy <table>,<tr>, <th> i <td>
2. Elementy <tbody>, <thead> i <tfoot>
Wersja 0.33 (03.10.2016)
Lab_TI_Lab01_03_10_2016
skrypt3a.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>
skrypt3b.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>
<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”.
D. Elementy formatujące (skrypt4.html)
1.
2.
3.
4.
Element <fieldset> i <legend>
Element <span>
Element <pre>
Elementy <sup> i <sub>
skrypt4.html
<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>
Wersja 0.33 (03.10.2016)
Lab_TI_Lab01_03_10_2016
<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>
E. Kaskadowe arkusze styli CSS (skrypt5.html, skrypt6.html, skrypt7.html)
1. Umiejscowienie arkuszy styli w dokumencie HTML.
a. przy elemencie formatowanym (skrypt5a)
b. w nagłówku dokumentu HTML (skrypt5b)
c. w dołączonym pliku zewnętrznym (skrypt5c)
skrypt5a.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>
skrypt5b.html
<head>
<meta charset="iso-8859-2">
<title>Skrypt 5a - 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>
skrypt5c.html
<head>
<title>Skrypt 5a - CSS</title>
<link rel="StyleSheet" href="skrypt5c.css" type="text/css" />
</head>
Wersja 0.33 (03.10.2016)
Lab_TI_Lab01_03_10_2016
<body>
<p>Do tworzenia stron <span>WWW </span> wykorzystujemy język
<span>HTML</span>.</p>
</body>
skrypt5c.css
span { text-weight:bold; color:blue }
2. Przykładowe własności formatujące tekst
a. własność text-align { left, right, center, justify }
b. własność text-decoration {none, underline,line-trough,overline}
c. własność color { HEX ‘#ff0000’, RGB ‘rgb(255,0,0), name ‘red’}
link: http://ww1.w3schools.com/cssref/css_colornames.asp
3. Przykładowe własności formatujące czcionkę
a. własność font-size – wielkość czcionki
b. własność font-family – rodzaj czcionki
c. własność font-style {normal, italic, oblique}
d. własność font-weight {normal,bold}
4. Atrybuty ID i CLASS w ramach elementu HTML (skrypt5d.html)
a. 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.
skrypt5d.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>
<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>
5. Wykorzystanie styli do zmiany wyglądu skryptu 2 – kopiujemy zawartość do pliku
skrypt6.html. (skrypt6.html, skrypt6.css)
a. Zmiana koloru czcionki w całym dokumencie.
b. Dodajemy element <span> z odpowiednią nazwą atrybutu class.
c. Tworzymy zewnętrzny plik zawierający style.
Wersja 0.33 (03.10.2016)
Lab_TI_Lab01_03_10_2016
skrypt6.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 }
skrypt6.html (zmodyfikowana zawartość skryptu 2)
<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>
<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>
6. Wykorzystanie styli do formatowania tabeli – kopia skryptu 3b do skryptu7.html.
a. Dodajemy do nagłówka pliku opis styli modyfikujący wygląd tabeli.
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 }
Wersja 0.33 (03.10.2016)
Lab_TI_Lab01_03_10_2016
</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”.
F. Elementy blokowe w dokumentach HTML (skrypt8.html, skrypt9.html)
1. Element <div> (skrypt8.html)
2. Elementy <section>, <article>, <nav>, <header>, <footer> z języka HTML5 (skrypt9.html)
3. Formatowanie z wykorzystaniem styli CSS (skrypt8.css, skrypt9.css)
skrypt8.html
<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">
SPN 2013 Kraków
</div>
</div>
skrypt8.css
#body { width:800px; 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 }
Wersja 0.33 (03.10.2016)
Lab_TI_Lab01_03_10_2016
#footer { border:solid 1px red; clear:both; text-align:center; color:blue }
G. Nawigacja w ramach strony i pomiędzy stronami (skrypt10.html, skrypt11.html)
1. Nawigacja pomiędzy stronami - element <a> z atrybutem href.
2. W ramach zadania kopiujemy skrypt8.html do nowego pliku skrypt10.html, a następnie
modyfikujemy zawartość pliku zgodnie z poniższym wzorcem.
skrypt10.html
<div id="body">
<div id="header">
</div>
<div id="menu">
<ul>
<li><a href="skrypt10.html">Strona główna</a></li>
<li><a href="skrypt10a.html">Skrypt 1</a></li>
<li><a href="skrypt10b.html">Skrypt 2</a></li>
<li><a href="skrypt10c.html">Skrypt 3</a></li>
<li><a href="skrypt10d.html">Skrypt 4</a></li>
</ul>
</div>
<div id="content" >
<p>Strona główna</p>
</div>
<div id="footer">
TI 2014 WFiIS Kraków
</div>
</div>
3. Zawartość pliku kopiujemy do czterech plików o nazwach: skrypt10a.html, skrypt10b.html,
skrypt10c.html i skrypt10d.html. W każdym z plików umieszczamy w elemencie <div
id=”content”> odpowiednio wpisy: skrypt10a – Skrypt1, skrypt10b – Skrypt2, skrypt10c –
skrypt 3b i skrypt10d – Skrypt10d – sprawdzamy poprawność działania skryptów.
4. 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 skrypt10c.html po wprowadzeniu powyższych poprawek.
<iframe src="skrypt3b.html"/>
5. Do pliku styli skrypt8.css dodajemy dodatkowo wpis:
iframe { width: 100%; height: 620px; }
skrypt10c.html
<div id="body">
<div id="header">
Wersja 0.33 (03.10.2016)
Lab_TI_Lab01_03_10_2016
</div>
<div id="menu">
<ul>
<li><a href="skrypt10.html">Strona główna</a></li>
<li><a href="skrypt10a.html">Skrypt 1</a></li>
<li><a href="skrypt10b.html">Skrypt 2</a></li>
<li><a href="skrypt10c.html">Skrypt 3b</a></li>
<li><a href="skrypt10d.html">Skrypt 4</a></li>
</ul>
</div>
<div id="content" >

<iframe src="skrypt3b.html"/>
</div>
<div id="footer">
TI 2014 WFiIS Kraków
</div>
</div>
6. Nawigacja wewnątrz strony.
skrypt11.html
<head>
.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 (skrypt1.html)</p>
<ol>
<li>Środowisko serwera WWW, katalog public-html na serwerze Orion, edytor
tekstu.</li>
<li>Prosta strona WWW – wymagane elementy.</li>
Wersja 0.33 (03.10.2016)
Lab_TI_Lab01_03_10_2016
<li>Walidacja dokumentów HTML w serwisie W3Validator (<a
href="http://validator.w3.org/">http://validator.w3.org/</a></li>), znaczenie
elementu doctype.</li>
<li>Polskie znaki w dokumentach HTML - ( kodowanie ISO-8859-2, Windows-1250
i UTF-8)</li>
</ol>
<fieldset>
<legend>skrypt1.html</legend>
<pre>
<!doctype html>
<html>
<head>
</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 (skrypt2.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”.
Wersja 0.33 (03.10.2016)

Laboratorium 1

Transkrypt

Podobne dokumenty

Dżem porzeczkowo kokosowy

klopsiki mielone z sosem borowikowym

Znaczniki HTML ()

Pościel Carbotex Chelsea Londyn 160x200 licencja CFC8004

Bryza-Rura spustowa PCV 110 mm 3 mb.

Krewetki w cieście

style type="text/css"

szaszłyczki z krewetek