L1: Język (X)HTML

Transkrypt

L1: Język (X)HTML

TECHNOLOGIE SIECI WEB
Prowadzący: dr inż. Jan Prokop, e-mail: [email protected],
Politechnika Rzeszowska, Wydział Elektrotechniki i Informatyki
LABORATORIUM
ĆWICZENIE nr 1
Temat: Język (X)HTML - Layout strony, nawigacja, formatowanie, walidacja
Specyfikacja języka HTML: http://www.w3.org/TR/REC-html40/
Kurs HTML-a pod adresem: http://www.w3schools.com/
Znacznik
<html> . . . </html>
<head> . . . </head>
<title> . . . </title>
<body> . . . </body>
Atrybut
bgcolor=”red”
background
=”rys.jpeg”
text= “color”

Opis
Rozpoczyna i kończy dokument
HTML
Nagłówek strony HTML
Tytuł strony
Treść strony HTML
Kolor tła strony
URL-adres do pliku graficznego
Kolor tekstu
Komentarz
<html>
<head>
...
</head>
<body>
...
</body>
</html>
1. Layout - zastosowanie ramek – znaczenie historyczne !
<html>
<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>
</html>
<html>
<body>
<p>Ramka wewnątrz dokumentu HTML</p>
<iframe src = "index.html" width="300"
height="200"> </iframe><p/>
Dalsza część strony HTML
</p>
</body>
</html>
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 !
<html>
<head><title>My Title</title>
</head>
<body>
<table width="100%" height="100%" border="1">
<tr>
<td width="20%" valign="top" bgcolor="red">
Menu <br/>
<a href="http://java.prz.edu.pl">Strona przedmiotu</a>
</td>
<td width="80%" valign="top" bgcolor="blue">
<h1>Content</h1>
</td>
</tr>
</table>
</body>
</html>
Jan Prokop, e-mail: [email protected], Technologie sieci Web, PRz, WEiI

Formatowanie tabeli
Szerokość i wysokość tabeli
<table width="600"> </table>
<table width="50%"> </table>
<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>

2
Odległości między komórkami
<table border="1" cellspacing="10">
</table>
Odstępy w komórkach
<table border cellspacing="10"
cellpadding="15"> </table>
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 !
<html>
<head><title>DIV</title></head>
<body>
<div id="menu" align="right" >
<a href=" ">Strona domowa</a> |
<a href=" ">Kontakt</a> |
<a href=" ">O nas</a> |
<a href=" ">Linki</a>
</div>
<div id="content" align="left" >
<h2>Tytuł 1</h2>
<p>Treść akapitu pierwszego</p>
<h2>Tytuł 2</h2>
<p>Treść akapitu drugiego</p>
</div>
<div id="footer" align="center" >
<p>© 2009 Copyright</p>
</div>
</body></html>
<html>
<head>
<title>
Div layout
</title>
</head>
<body>
<div style="position:absolute;
width:200px;
height:100px;
left:200px;
top:100px;
background-color:yellow;">
Text<br/>
Text<br/>
Text<br/>
</div>
</body>
</html>
4. Odsyłacze hipertekstowe
<a
<a
<a
<a
<a
<a
<a
Odsyłacze hipertekstowe
href="http://www.prz.rzeszow.pl/index.html"> Tekst</a>
href="url" target="_blank|_self|_parent|_top">Link</a>
href="#label">Tekst</a>
<a name="label">Tekst</a>
href="mailto:[email protected]?subject=Hello">List</a>
href="url"><img src="rys.gif"></a>
href="file.zip">Plik do pobrania</a>
href="url" title="Podpis w dymku linka">Tekst linku</a>
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
Ścieżki względne
href=”file.html”
href=”files/file.html”
href=”files/morefiles/fil
e.html”
href=”. . /file.html”
href=”. . /. . /
files/file.html”
6. HTML - Formularze
 Sprawdzić działanie poniższego formularza dla żądań HTTP typu GET i POST
<html>
<head><title>HTML Form Example</title></head>
<body>
<form method="post" action="http://java.prz.edu.pl/html/form/form_handler.php">
<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>
</table>
</form>
</body>
</html>
 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:[email protected]"> … </form>
<form method="post" enctype="text/plain" action="mailto:[email protected]"> … </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>
</ul>
</ul>
<li>Punkt 3</li>
<li>Punkt 4</li>
</ul>
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>
</ol>
</ol>
<li>Punkt III</li>
<li>Punkt IV</li>
</ol>
3
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"
/></div>
<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=”circle” coords="50,150,10" href="5.html">
</map>
9. Język XHTML
Struktura dokumentu XHTML
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
lang="pl" xml:lang="pl">
<head>
<title>XHTML</title>
</head>
<body>
...body...
</body>
</html>
Wersje DTD
1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1frameset.dtd">
Zbudowane stony zapisać zgodnie z XHTML, zwalidować walidatorem http://validator.w3.org/ 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
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
Znak
<
>
&
"
'
©
Opis
twarda spacja
znak mniejszości
znak większości
ampersand
cudzysłów
apostrof
copyright
Nazwa
 
<
>
&
"
'
©
<body> - wyświetla tekst <body>
    - trzy twarde spacje
Kod
 
<
>
&
"
'
©
12. Tablica kolorów
Kolor
biały
czarny
czerwony
zielony
niebieski
żółty
ciemnoszary
srebrny
turkusowy
kasztanowy
granatowy
Szesnastkowo
FFFFFF
000000
FF0000
00FF00
0000FF
FFFF00
808080
C0C0C0
00FFFF
800000
000080
Słownie
white
black
red
green
blue
yellow
gray
silver
agua
maroon
navy

L1: Język (X)HTML

Transkrypt

Podobne dokumenty

Śmiertelny wypadek na trasie Głogówek - Rzepcze

Kędzierzyn-Koźle: Młodzież w roli dziennikarzy śledczych

Kaczmarkowie mistrzami plaży. ZDJĘCIA

Depresja nastolatków to zjawisko coraz częstsze

Kurs języka migowego w Nysie

„Autor widmo” w kinie pod chmurką

Zostań potencjalnym dawcą szpiku i uratuj komuś życie!

Najmłodszy mieszkaniec zoo

HTML - sosw.poznan.pl