TECHNOLOGIE SIECI WEB

Transkrypt

1 TECHNOLOGIE SIECI WEB Prowadzący: dr inż. Jan Prokop, Politechnika Rzeszowska, Wydział Elektrotechniki i Informatyki LABORATORIUM ĆWICZENIE nr 1 Temat: Język (X)HTML - Layout strony, nawigacja, formatowanie, walidacja Specyfikacja języka HTML: Kurs HTML-a pod adresem: Znacznik Atrybut Opis... Rozpoczyna i kończy dokument HTML... Nagłówek strony HTML <title>... </title> Tytuł strony... bgcolor= red background = rys.jpeg text= color <! > Komentarz Treść strony HTML Kolor tła strony URL-adres do pliku graficznego Kolor tekstu Layout - zastosowanie ramek znaczenie historyczne! <frameset rows="50%,50%" border="1"> <frame src="plik1.html" scrolling="no"> <frameset cols="40%,60%"> <frame src="plik2.html"> <frame src="plik3.html"> </frameset> </frameset> <p>ramka wewnątrz dokumentu HTML</p> <iframe src = "index.html" width="300" height="200"> </iframe><p/> Dalsza część strony HTML </p> cols rows = "800,600" lub "20%,80%" lub "2*,*" <frame name="nazwa_ramki" noresize> <a href="strona.htm" target="nazwa_ramki _blank _self _parent _top"> 2. Layout - zastosowanie tabel sposób nie zalecany! <title>my Title</title> <table width="100%" height="100%" border="1"> <tr> <td width="20%" valign="top" bgcolor="red"> Menu <br/> <a href=" przedmiotu</a> </td> <td width="80%" valign="top" bgcolor="blue"> <h1>content</h1> </td> </tr>

2 Jan Prokop, Technologie sieci Web, PRz, WEiI 2 Formatowanie tabeli Szerokość i wysokość tabeli <table width="600"> <table width="50%"> <table style="height:200px;width:60%;"> Szerokość komórki <td width="150">zawartość komórki</td> <td style="width: 150px;">zawartość komórki</td> <td style="width: 50%;">zawartość komórki</td> Odległości między komórkami <table border="1" cellspacing="10"> Odstępy w komórkach <table border cellspacing="10" cellpadding="15"> Wyrównywanie danych w komórkach <td align="left"> </td> <td style="text-align: left;"></td> Łączenie komórek tabeli - atrybuty rowspan i colspan <td rowspan="2">row 12 Cell 1</td> <td colspan="3">row 3 Cell 1</td> Obramowania tabeli - atrybut frame <table frame="border box void above below hsides vsides lhs rhs"> 3. Layout zastosowanie znacznika <div> - sposób preferowany! <title>div</title> <div id="menu" align="right" > <a href=" ">Strona domowa</a> <a href=" ">Kontakt</a> <a href=" ">O nas</a> <a href=" ">Linki</a> <div id="content" align="left" > <h2>tytuł 1</h2> <p>treść akapitu pierwszego</p> <h2>tytuł 2</h2> <p>treść akapitu drugiego</p> <div id="footer" align="center" > <p> 2009 Copyright</p> <title> Div layout </title> <div style="position:absolute; width:200px; height:100px; left:200px; top:100px; background-color:yellow;"> 4. Odsyłacze hipertekstowe Odsyłacze hipertekstowe <a href=" Tekst</a> <a href="url" target="_blank _self _parent _top">link</a> <a href="#label">tekst</a> <a name="label">tekst</a> <a href="mailto:user@host.domain?subject=hello">list</a> <a href="url"><img src="rys.gif"></a> <a href="file.zip">plik do pobrania</a> <a href="url" title="podpis w dymku linka">tekst linku</a> Ścieżki względne href= file.html href= files/file.html href= files/morefiles/fil e.html href=.. /file.html href=.. /.. / files/file.html 5. Zadania 1. Zbudować 3 strony (każda w innej technice) o strukturze jak na rysunku (inne układy podaje prowadzący) stosując: - ramki - tabele - bloki oparte o znacznik div 2. Zrealizować nawigację pomiędzy stronami przez realizację odsyłaczy hipertekstowych oraz nawigację do odpowiednich bloków danej strony

3 Jan Prokop, Technologie sieci Web, PRz, WEiI 3 6. HTML - Formularze Sprawdzić działanie poniższego formularza dla żądań HTTP typu GET i POST <title>html Form Example</title> <form method="post" action=" <table> <tr><td>user name: </td> <td><input type="text" name="username"></td></tr> <tr><td>password : </td> <td><input type="password" name="password"></td></tr> <tr><td><input type="submit" value="send"></td> <td><input type="reset" value="reset"></td></tr> </form> Zbudować formularz o strukturze podanej przez prowadzącego korzystając z następujących elementów: Składnia Opis <input type="text" name="first_name" /> Pole jednowierszowe <input type="text" name="password" /> Pole haseł <textarea rows="5" cols="50" name="description"> Obszary tekstowe Description... </textarea> <input type="checkbox" name="option1" value="on" checked> Option 1 Pole wyboru <input type="radio" name="subject" value="radio 1" /> Maths Przełączniki radiowe <select name="dropdown"> Pole opcji <option value="bmw" selected>bmw</option> <option value="audi">audi</option> </select> <select name="typ"> Lista wyboru <option value="audi">audi <option value="bmw" selected>bmw </select> <input type="submit" value="submit" /> Przyciski submit i <input type="reset" value="reset" /> reset <input type="hidden" name="number" value="10" /> <input type="submit" value="next" /> <input type="image" name="imagebutton" src="url" /> Przycisk obrazek <button type="button">click Me!</button> Przycisk <fieldset><legend>personalia:</legend> Legenda Name: <input type="text" size="30" /><br /> </fieldset> Zbudować formularz wysyłający list, strukturę podaje prowadzący <form method="post" action = "mailto:user@prz.edu.pl"> </form> <form method="post" enctype="text/plain" action="mailto:user@prz.edu.pl"> </form> 7. HTML - Wykazy Wykazy nienumerowane <ul type="square disc circle"> <li>punkt 1 </li> <li>punkt 2</li> <ul> <li>podpunkt 2.1</li> <li>podpunkt 2.2</li> <ul> <li>podpunkt 2.2.1</li> <li>podpunkt 2.2.2</li> <li>punkt 3</li> <li>punkt 4</li> Wykazy numerowane <ol type= I > <li>punkt I</li> <li>punkt II</li> <ol type= i > <li>podpunkt i</li> <li>podpunkt ii</li> <ol type= a > <li>podpunkt a</li> <li>podpunkt b</li> <li>punkt III</li> <li>punkt IV</li>

4 Jan Prokop, Technologie sieci Web, PRz, WEiI 4 8. HTML - Grafika w tekście <img src="foto.jpg" alt="nazwa alternatywna" /> <img src="foto.jpg" width="100" height="50" alt="nazwa alternatywna" /> <img src="foto.gif" align="bottom middle top" width="100" height="50" /> <div style="text-align:center;"><img src = "foto.jpg" width="100" height="300" /> <img src="foto.gif" border="3" width="200" height="300" /> <img src="foto.jpg" width="200" height="300" style="border: 5px red solid;" /> <img src="foto.jpg" width="200" height="300" hspace= "100" vspace="50" /> <img src="foto.jpg" width="300" height="400" style="margin-left: 50px; margin-right: 50px;" /> <img src="foto.jpg" width="100" height="200" alt = "Tekst alternatywny" style="float: right;" /> <img src="foto.jpg" width="100" height="150" alt= "Tekst alternatywny" style="vertical-align: top;" /> <img src="foto.gif" align="top middle bottom" /> Aktywna mapa <img src="rysunek_odsyłacz.gif" usemap="#mapa" alt= Menu graficzne align="top" border="0" width="100" height="200" /> <map name="mapa"> <area shape= rect coords="1,1,50,50" href="1.html"> <area shape= rect coords="51,1,100,50" href="2.html"> <area shape= rect coords="1,51,51,100" href="3.html"> <area shape= rect coords="51,51,100,100" href="4.html"> <area shape= circle coords="50,150,10" href="5.html"> </map> 9. Język XHTML Struktura dokumentu XHTML <?xml version="1.0" encoding="utf-8"?> 1.0 Transitional//EN" transitional.dtd"> <html xmlns=" lang="pl" xml:lang="pl"> <title>xhtml</title>...body... Wersje DTD 1.0 Strict//EN" strict.dtd"> 1.0 Transitional//EN" transitional.dtd"> 1.0 Frameset//EN" frameset.dtd"> Zbudowane stony zapisać zgodnie z XHTML, zwalidować walidatorem i poprawić wszystkie błędy 10. HTML 5 Video Audio Canvas <video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> Your browser does not support the video tag. </video> <audio controls="controls"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> Your browser does not support the audio element. </audio> <canvas id="mycanvas"></canvas> <script type="text/javascript">

5 Jan Prokop, Technologie sieci Web, PRz, WEiI 5 var canvas=document.getelementbyid('mycanvas'); var ctx=canvas.getcontext('2d'); ctx.fillstyle='#ff0000'; ctx.fillrect(0,0,80,100); </script> 11. Kody znaków specjalnych w HTML-u 12. Tablica kolorów Znak Opis Nazwa Kod Kolor Szesnastkowo Słownie twarda spacja biały FFFFFF white < znak mniejszości < < czarny black > znak większości > > czerwony FF0000 red & ampersand & & zielony 00FF00 green " cudzysłów " " niebieski 0000FF blue ' apostrof &apos; &#39; żółty FFFF00 yellow copyright ciemnoszary gray srebrny C0C0C0 silver <body> - wyświetla tekst turkusowy 00FFFF agua - trzy twarde spacje kasztanowy maroon granatowy navy