Kurs tworzenia stron internetowych

Krzysztof Grąbczewski

Program kursu:

  1. Informacje ogólne
  2. Microsoft FrontPage - pierwsze proste strony
  3. Troszeczkę w głąb - język HTML

  4. Więcej FrontPage'a - organizacja hierarchii stron itp.

  5. Publikowanie stron w internecie

  6. Inne techniki (style, CGI, PHP)

Informacje ogólne

Microsoft FrontPage - pierwsze proste strony

Troszeczkę w głąb - język HTML

Język znaczników

Znaczniki podstawowe:

<html> </html>
cały dokument
<head> </head>
nagłówek dokumentu - różne (zwykle niewidoczne bo niewizualne definicje)
<body> </body>
ciało dokumentu - kilka parametrów:
<body bgcolor=# text=# link=# alink=# vlink=#>
kolory
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua
#rrggbb - definiowany ręcznie

Zawartość nagłówka

<title> </title>
tytuł dokumentu - zwykle widoczny na pasku tytułu przeglądarki
<meta> </meta>
różne niewizualne definicje, np:
<meta http-equiv="Content-Language" content="pl">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<meta name="keywords" content="internet,strony,tworzenie,html,FrontPage,CGI,PHP,kurs">
<meta name="Author" content="Krzysztof Grąbczewski">
<meta http-equiv="refresh" content="5" URL="www.torun.pl">
<base href="http://bla.bla.bla/html/index.htm">
definicja adresu bazowego, względem którego rozwiązywane będą względne linki

Odnośniki

<a href="URL"> Tekst odnośnika </a>
odnośnik do danego URL
<a href="#name"> ... </a>
odnośnik do miejsca na tej samej stronie
<a href="URL#name"> ... </a>
odnośnik do konkretnego miejsca na stronie
<a href="mailto:id@adres.internetowy"> ... </a>
odnośnik do wysyłania poczty

Formatowanie tekstów - nagłówki

<h1>Nagłówek 1</h1>

Nagłówek 1

<h2>Nagłówek 2</h2>

Nagłówek 2

<h3>Nagłówek 3</h3>

Nagłówek 3

<h4>Nagłówek 4</h4>

Nagłówek 4

<h5>Nagłówek 5</h5>
Nagłówek 5
<h6>Nagłówek 6</h6>
Nagłówek 6

Formatowanie tekstów - fizyczne

<font size=5>Tekst o zadanym rozmiarze (od 1 do 7)</font>
Tekst o zadanym rozmiarze (od 1 do 7)
<font size=+2>Tekst powiększony o 2 jednostki</font>
Tekst powiększony o 2 jednostki
<font size=-2>Tekst pomniejszony o 2 jednostki</font>
Tekst pomniejszony o 2 jednostki
<b>Tekst pogrubiony</b>
Tekst pogrubiony
<i>Tekst pochylony</i>
Tekst pochylony
<u>Tekst podkreślony</u>
Tekst podkreślony
<strike>Tekst przekreślony</strike>
Tekst przekreślony
<blink>Tekst migający (tylko w Netscape'ie)</blink>
Tekst migający (tylko w Netscape'ie)
Indeksy <sup>górny</sup> i <sub>dolny</sub>
Indeksy górny i dolny

Formatowanie tekstów - logiczne

Lepsze niż fizyczne - wyszukiwarki "rozumieją" strukturę tekstu
<em>Uwypuklenie tekstu</em>
Uwypuklenie tekstu
<bf>Wzmocnienie tekstu</bf>
Wzmocnienie tekstu
<code>Kody źródłowe programów</code>
Kody źródłowe programów
<var>Zmienne</var>
Zmienne
<dfn>Definicje</dfn>
Definicje
<cite>Cytaty</cite>
Cytaty

Wyliczenia

<ul><li>...</ul>
Unordered list - Nieuporządkowana (nienumerowana) lista
<ol><li>...</ol>
Ordered list - Lista uporządkowana (numerowana)
<li type=...>
Listy nadzorowane przez użytkownika. Na przykład:

<ul>
  <li type=disc>Jeden
  <li type=circle>Dwa
  <li type=square>Trzy
</ul>
  • Jeden
  • Dwa
  • Trzy

<ol type="a">
  <li>Jeden
  <li>Dwa
  <li>Trzy
</ol>
  1. Jeden
  2. Dwa
  3. Trzy

<ol type="I" start=3>
  <li>Jeden
  <li>Dwa
  <li>Trzy
</ol>

  1. Jeden
  2. Dwa
  3. Trzy

Obrazki

<img src=UMK.gif>
Wstawienie obrazka z zadanego pliku
 
<img src=UMK.gif width=100 height=30>
Wstawienie obrazka w obszar o zadanych rozmiarach
 
<img src=UMK.gif align=absmiddle>
Odpowiednie wyrównywanie obrazka. Możliwe wartości to: top, middle, bottom, texttop, absmiddle, absbottom, baseline
 
<img src=UMK.gif border=5>
Obrazek z ramką:
 
<img src=UMK.gif usemap="#umkMap">
<map name="umkMap">
<area shape="circle" coords="75,75,10" href="srodek.html">
<area shape="rect" coords="10,10,50,50" href="lg.html">
</map>
Obrazek z obszarami mapowanymi jako różne odnośniki:

Tabele

<table border="1" width="80%">
<tr>
  <td width="33%">Tekst wyrównany do lewej</td>
  <td width="33%"><p align="center">Tekst wypośrodkowany</td>
  <td width="34%"><p align="right">Tekst wyrównany do prawej</td>
</tr>
<tr>
  <td width="33%" rowspan="2"><p align="center">Obrazek w dwóch wierszach
    <img border="0" src="UMK.gif"></td>
  <td width="33%" colspan="2"><p align="center">Tekst na dwie kolumny</td>
</tr>
<tr>
  <td width="33%" valign="bottom" align="left">lewy dolny</td>
  <td width="33%" valign="top" align="right">prawy górny</td>
</tr>
</table>
Tekst wyrównany do lewej

Tekst wypośrodkowany

Tekst wyrównany do prawej

Obrazek w dwóch wierszach

Tekst na dwie kolumny
lewy dolny prawy górny

Ramki

<html>
<hread>
  <title>Kurs tworzenia stron internetowych (w ramkach)</title>
</head>

<FRAMESET rows="125,*">
  <FRAME name="gora" SRC="gora.htm">

  <FRAMESET cols="250,*">
    <FRAME name="lewa" SRC="lewa.htm">
    <FRAME name="glowna" src="pusta.htm">

  <NOFRAMES>
    <body bgcolor="#FFFFCC">
        Przykro mi. Ta strona jest dla tych, którzy lubią ramki...
    </body>
  </NOFRAMES>

</FRAMESET>
Główna strona składająca się z trzech ramek: górnej, lewej i głównej.
 
<a target="glowna" href="FrontPage1.htm">
Odnośnik pokazujący w głównej ramce zawartość pliku FrontPage1.htm. Mimo, że umieszczony w pliku pokazywanym w ramce z lewej ma wpływ na ramkę główną 
 
<a target="_blank" href="URL">
URL otwierany w nowym oknie

Formularze

<form method="POST" action="mailto:kgrabcze@phys.uni.torun.pl"?subject=Dane+z+formularza" enctype="text/plain">
...
</form>
Formularz, którego wyniki będą wysyłane pocztą. Można też przekazać wyniki do skryptu PHP lub programu CGI
 
<input type="text" name="Linijka" size="20" id="fp1">
<textarea rows="2" name="WieleLinii" cols="20"> Wielolinijkowy tekst z przewijaniem
<input type="checkbox" name="CheckBox1" value="ON" checked>Opcja 1&nbsp;&nbsp; 

<input type="checkbox" name="CheckBox2" value="ON">Opcja 2&nbsp;&nbsp; 

<input type="checkbox" name="CheckBox3" value="ON">Opcja 3

 Opcja 1   Opcja 2   Opcja 3
<input type="radio" value="V1" checked name="RadioButton"> Przycisk radiowy 1<br>

<input type="radio" name="RadioButton" value="V2"> Przycisk radiowy 2<br>

<input type="radio" name="RadioButton" value="V3"> Przycisk radiowy 3

 Przycisk radiowy 1
Przycisk radiowy 2
Przycisk radiowy 3
<select size="3" name="Lista">  
  <option>Angielski</option>
  <option>Niemiecki</option>
  <option selected>Polski</option>
</select>		 Lista rozwijalna:
<input type="button" value="Jakiś przycisk" name="Przycisk">
<input border="0" src="UMK.gif" name="Image" width="150" height="150" type="image"> Obrazek też...
 

 

Inne

<!-- ... -->
Komentarz - nie pojawi się w przeglądarce
<hr>
pozioma kreska:
<hr size=10>
grubsza pozioma kreska:
<hr width=50>
<hr width=50%>
pozioma kreska na zadanej szerokości:
<hr width=50% align=left>
pozioma kreska odpowiednio wyrównywana (left, right, center):
&...
różne znaki, których nie wolno pisać wprost np.
&amp;   & 
&lt;         < 
&gt;        >
&quot;   "
<br>
przejście do nowej linii
<p> </p>
Paragrafy
<div> </div>
Zgrupowane fragmenty tekstu
<center> </center>
Wyśrodkowanie tekstu w aktywnym obszarze
<marquee> Ruchomy tekst </marquee>
Ruchomy tekst

Więcej FrontPage'a 

Publikowanie stron w internecie 

Inne techniki