HTML

Treść zajęć

Omówiona zostanie podstawowa struktura dokumentu HTML5, stworzymy pierwszą stronę internetową, a także założymy darmowe konto, dzięki któremu strona będzie widoczna w internecie.

Założenie konta

FTP, czyli Protokół Transferu Plików (ang. File Transfer Protocol) to zestaw reguł umożliwiających wymianę plików z serwerem.

Informacje o tym jak założyć konto znajdują się tutaj: Założenie i obsługa konta FTP

Na przykładzie portalu cba.pl:

  1. Na stronie http://www.cba.pl/pl zakładamy konto
  2. Odbieramy maila podsumowującego
  3. Zapamiętujemy lub zapisujemy dane dostępu do konta FTP (adres serwera, nazwę użytkownika i hasło — będą konieczne do obsługi konta)

Przykładowe darmowe programy do połączeń FTP można znaleźć na stronie z przydatnymi programami.

Czym jest HTML5 i co znaczą znaczniki?

HTML (HyperText Markup Language) jest językiem opisu struktury zawartości strony internetowej. Opisywanie struktury oznacza, że mając daną treść strony, umieszczamy jej fragmenty między odpowiednimi znacznikami, przekazującymi przeglądarce internetowej informację, że dany fragment treści jest np. nagłówkiem, paragrafem tekstu, odnośnikiem itp. Używając tej informacji przeglądarka odpowiednio wyświetla poszczególne elementy strony.

Dla przykładu: dany tekst…

Zapraszamy na 7. Poznańskie Forum Kognitywistyczne!

Zapraszamy na 7. Poznańskie Forum Kognitywistyczne, które będzie miało miejsce na terenie Kampusu Morasko Uniwersytetu im. A. Mickiewicza w Poznaniu.

Konferencja odbędzie się w dniach 10 i 11 grudnia 2011 roku. Uczestnicy, podobnie jak w ubiegłym roku, zostaną zakwalifikowani na podstawie pełnych artykułów. Szczegóły dotyczące edycji nadsyłanych tekstów znajdują się na stronie internetowej konferencji

Na teksty czekamy do 22 października 2011 roku.

Uczestnictwo w konferencji jest bezpłatne (zarówno dla prelegentów, jak i biernych słuchaczy).

…przepisujemy używając znaczników opisujących treść strony, która składa się z nagłówka i czterech akapitów.

<h1>Zapraszamy na 7. Poznańskie Forum Kognitywistyczne!</h1>

<p>Zapraszamy na 7. Poznańskie Forum Kognitywistyczne, które będzie miało miejsce na terenie Kampusu Morasko Uniwersytetu im. A. Mickiewicza w Poznaniu.</p>

<p>Konferencja odbędzie się w dniach 10 i 11 grudnia 2011 roku. Uczestnicy, podobnie jak w ubiegłym roku, zostaną zakwalifikowani na podstawie pełnych artykułów. Szczegóły dotyczące edycji nadsyłanych tekstów znajdują się na stronie internetowej konferencji</p>

<p>Na teksty czekamy do 22 października 2011 roku.</p>

<p>Uczestnictwo w konferencji jest bezpłatne (zarówno dla prelegentów, jak i biernych słuchaczy).</p>

Znacznik <h1> oznacza, że następujący po tym znaczniku tekst jest nagłówkiem aż do znacznika </h1> (h jak header, cyfra oznacza ważność nagłówka <h1> to nagłówek najważniejszy, <h2> mniej ważny, …. , <h6> to nagłówek najmniej ważny).

Znacznik <p> oznacza, że następująca po tym znaczniku treść - aż do znacznika </p> - jest akapitem tekstu (p jak paragraph).

Szablon prostej strony internetowej

Niestety samo oznaczenie znacznikami fragmentu tekstu i zapisanie go jako dokument o rozszerzeniu HTML nie czyni z niego poprawnie napisanej strony internetowej. Poza informacjami dotyczącymi struktury przekazanej treści należy podać jeszcze dodatkowe informacje o wersji języka HTML, którą stosujemy, kodowaniu znaków, jakiego używamy itp…

UWAGA: należy pamiętać, że edytor, w którym piszemy kod strony musi mieć to samo kodowanie, co strona (UTF-8 w naszym przypadku; patrz: <meta charset="UTF-8">)

A oto kompletny i poprawny (składniowo) dokument HTML opisujący pewną konferencję ;).

<!DOCTYPE html>
<html lang="pl">
   <head>
       <title>Zaproszenie na 7. Poznańskie Forum Kognitywistyczne</title>
       <meta charset="UTF-8">
   </head>
   <body>
 
        <h1>Zapraszamy na 7. Poznańskie Forum Kognitywistyczne!</h1>
 
        <p>Zapraszamy na 7. Poznańskie Forum Kognitywistyczne, które będzie miało miejsce na terenie Kampusu 
        Morasko Uniwersytetu im. A. Mickiewicza w Poznaniu.</p>
 
        <p>Konferencja odbędzie się w dniach 10 i 11 grudnia 2011 roku. Uczestnicy, podobnie jak 
        w ubiegłym roku, zostaną zakwalifikowani na podstawie pełnych artykułów. Szczegóły dotyczące edycji nadsyłanych tekstów znajdują się na stronie internetowej konferencji</p>
 
        <p>Na teksty czekamy do 22 października 2011 roku.</p>
 
        <p>Uczestnictwo w konferencji jest bezpłatne (zarówno dla prelegentów, jak i biernych słuchaczy).</p>
    </body>
</html>

Wcięcia widoczne w powyższym kodzie są także ważne: czynią one kod przejrzystszym, łatwiejszym do zrozumienia i edytowania.

Skopiujmy powyższy kod do notatnika lub jEdita. Zapiszmy plik pod nazwą index.html i prześlijmy go na nasze konto (do katalogu z naszą przyszłą stroną) przy pomocy klienta FTP. Następnie wpiszmy w wyszukiwarce adres naszej strony i sprawdźmy efekty naszej pracy.

Struktura

Cały dokument oznaczony jest znacznikiem <html>, wewnątrz tego znacznika znajduje się znacznik <head> zawierający różne informacje o treści strony internetowej, następnie jest znacznik <body> w którym umieszczamy ciało (treść) dokumentu. Na ogół znaczniki mają strukturę określającą "zasięg". Działa to w ten sposób, że oprócz znacznika otwierającego (np. <html>), należy podać znacznik zamykający (w tym przypadku - </html>):

<html>
    <head>
        <title> ... </title>
         ....
    </head>
    <body> 
        ...
    </body>
</html>

<!DOCTYPE html>

nie jest znacznikiem HTML, przekazuje informacje przeglądarce internetowej dotyczące rodzaju dokumentu.

<html> treść </html>

tekst znajdujący się pomiędzy tymi znacznikami jest dokumentem HTML.

<head> treść </head>

między tymi znacznikami umieszczamy informacje dotyczące dokumentu takie jak:

<title> treść </title>

tekst umieszczony między tymi znacznikami będzie widoczny w pasku na górze okna przeglądarki

<meta charset="UTF-8">

Opisuje system kodowania znaków.

Używamy rekomendowanego systemu kodowania UTF-8. Na tej stronie umieszczone są informacje o zapisywaniu dokumentów używając systemu kodowania UTF-8.

<body> treść </body>

W tej części wpisujemy treść dokumentu.

Ważne znaczniki - ściąga

akapit (paragraph)

 <p>To jest przykładowy akapit</p>

nagłówki (header)

h1 będzie najbardziej wyrazisty, h6 - najmniejszy nagłówek.

<h1>nagłówek podstawowy</h1>
<h2>podtytuł</h2>
   ... itd. ...
<h6>najmniej ważny nagłówek</h6>

znak końca linii (line break)

 Po tym znaku:<br>będę w następnej linii

podkreślenie znaczenia słów (strong i emphasize)

To jest <strong>coś ważnego</strong>. 
To jest <em>coś charakterystycznego</em>.

komentarze

<!-- Tekst lub dowolna treść dokumentu XHTML w komentarzach jest ignorowana -->

Pomoce naukowe



Tabele

Tabele służą do przechowywania danych typu tabelarycznego, nie zaś do tworzenia struktury strony.

Tabele tworzy się za pomocą znacznika:
<table></table>

Poszczegolne wiersze tabeli:
<tr></tr>

Komórki:
<td></td>

Przykład:

<table>
<tr><td>treść</td><td>treść</td><td>treść</td></tr>
<tr><td>treść</td><td>treść</td><td>treść</td></tr>
<tr><td>treść</td><td>treść</td><td>treść</td></tr>
</table>

Nagłówek tabeli:
<caption>nagłówek</caption>

Nagłówek kolumny lub wiersza:
<th>nagłówek kolumny</th>

Przykład:

<table>
<caption>nagłówek</caption>
<tr><td></td><th>nagłówek kolumny 1</th><th>nagłówek kolumny 2</th><th>nagłówek kolumny 3</th></tr>
<tr><th>nagłówek wiersza 1</th><td>treść</td><td>treść</td><td>treść</td></tr>
<tr><th>nagłówek wiersza 2</th><td>treść</td><td>treść</td><td>treść</td></tr>
<tr><th>nagłówek wiersza 3</th><td>treść</td><td>treść</td><td>treść</td></tr>
</table>

Uwaga! Formatowanie elementów na stronie (tabeli, obrazków, akapitów, etc.) zaleca się przeprowadzać za pomocą języka CSS. Jednak na potrzeby niniejszych zajęć możemy użyć argumentu "border" tagu "table". W następujący sposób:

<table border="10">
<caption>nagłówek</caption>
<tr><td></td><th>nagłówek kolumny 1</th><th>nagłówek kolumny 2</th><th>nagłówek kolumny 3</th></tr>
<tr><th>nagłówek wiersza 1</th><td>treść</td><td>treść</td><td>treść</td></tr>
<tr><th>nagłówek wiersza 2</th><td>treść</td><td>treść</td><td>treść</td></tr>
<tr><th>nagłówek wiersza 3</th><td>treść</td><td>treść</td><td>treść</td></tr>
</table>

Łączenie komórek tabeli w pionie:
<td rowspan="x">treść</td>

Analogicznie dla nagłółków:
<th rowspan="x">nagłówek wiersza</th>
gdzie x oznacza liczbę komórek, które mają zostać połączone

Łączenie komórek tabeli w poziomie:
<td colspan="x">treść</td>

Analogicznie dla nagłółków:
<th colspan="x">nagłówek kolumny</th>
gdzie x oznacza liczbę komórek, które mają zostać połączone

Przykład:

<table border="10">
<tr><td colspan="2">treść</td><td>treść</td></tr>
<tr><td>treść</td><td rowspan="2">treść</td><td>treść</td></tr>
<tr><td>treść</td><td>treść</td></tr>
</table>

Listy/wykazy

Nieuporządkowany (unordered list) - elementy poprzedzane są dużymi kropkami:
<ul>…</ul>

Uporządkowany (ordered list) - elementy są numerowane:
<ol>…</ol>

Elementy wykazu:
<li>element</li>

Wykazy można zagnieżdżać.

Przykład:

<ul>
    <li>coś</li>
    <li>drugie coś</li>
    <li>wykaz zagnieżdżony
        <ol>
            <li>element</li>
            <li>element</li>
            <li>element</li>
        </ol>
    </li>
    <li>i jeszcze coś</li>
</ul>

Odwołania symboliczne (linki)

Link dodajemy używjąc taga:
<a href="adres_www">Tekst, który ma się wyświetlić</a>

Kod wygląda w ten sposób:

<a href="http://kognitywistyka.amu.edu.pl/seminarium/">Seminaria środowe ZLiK</a>

A efekt tak:

Analogicznie możemy tworzyć również postrony naszej strony głównej!
Jednak wcześniej musimy oczywiście stworzyć nowy plik HTML reprezentujący tę podstronę.
Następnie dodajemy na naszej stronie głównej kod:

<a href="gallery.html">Galeria</a>

I gotowe.

Wstawianie grafiki

Jako grafiki wstawiać możemy na przykład pliki typu: gif, jpg, png.

Znacznik stosowany do wstawienie obrazka to:
<img …>

Ścieżka do pliku graficznego:
src="sciezka_do_pliku"

Nazwa alternatywna - zostanie wyświetlona w przglądarce w przypadku nie znalezienia obrazka:
alt="nazwa alternatywna"

Tekst wyświetlany przy najechaniu na obrazek kursorem:
title="tekst"

Przykład:

<img src="sciezka_do_pliku" alt="nazwa alternatywna" title="tekst">


Formularze

Formularze służą do pobierania danych od użytkowników odwiedzających naszą stronę internetową.

Do czego z grubsza dążymy?

<form>
     Imię:
     <br>
     <input type="text" name="firstname" value="">
     <br>
     Nazwisko:<br>
     <input type="text" name="lastname" value="">
 
     <p>
         Czas na dłuższą wypowiedź:
        <br>
        <textarea name="content" rows="12" cols="50"></textarea>
    </p>
    <input type="submit" value="Submit">
</form>

Struktura ogólna

  • formularz zawierający różne pola tworzy się za pomocą znacznika:
<form> różne pola </form>
  • aby informacje z formularza były wysyłane za pomocą poczty elektronicznej na podany adres, należy w znaczniku form dodać atrybut:
<form action="mailto:mejl@cos.pl?subject=temat_emaila" method="post"> różne pola </form>

"temat_emaila" - pojawi się w temacie wysłanej wiadomości

  • aby treść e-maila przyjmowała postać czytelnego tekstu należy dodać jeszcze atrybut:
<form enctype="text/plain">
różne pola
</form>

Kompletny przykład - struktura formularza:

<form enctype="text/plain" action="mailto:mejl@cos.pl?temat_mejla" method="post">
różne pola
</form>

Pole tekstowe

  • pola tekstowe w formularzu umieszcza się za pomocą znacznika:

<input type="text">

  • nazwa pola:

name="pole1"

  • zawartość domyślna (wpisana w polu początkowo):

value="costam"

  • rozmiar pola - liczba znaków:

size="50"

  • opis pola należy umieścić obok niego

przykład - pole tekstowe:

<p>wpisz tu coś mądrego: <input type="text" name="pole1" value="costam" size="50"></p>

Obszar tekstowy

  • obszary tekstowe w formularzu umieszcza się za pomoca znacznika:

<textarea>zawartość domyślna</textarea>

  • nazwa obszaru:

name="tekst1"

  • wymiary obszaru tekstowego - liczba wierszy i kolumn:

rows="3"
cols="30"

  • opis obszaru tekstowego należy umieścić obok niego

Przykład - obszar tekstowy:

<p>Czas na dłuższą wypowiedź: 
    <textarea name="tekst1" rows="8" cols="50">
    zawartość domyślna
    </textarea>
</p>

Jeśli chcemy się pozbyć wartości domyślnej wystarczy zamknąć tag <textarea> natychmiast po otwarciu go.

<p>Czas na dłuższą wypowiedź: 
    <textarea name="tekst1" rows="8" cols="50"></textarea>
</p>

Pole opcji

  • do wstawienia pola opcji służy znacznik:

<input type="radio">

  • nazwa pola:

name="nazwa_pola"

  • jeśli stworzymy kilka pól o tej samej nazwie, użytkownik będzie mógł zaznaczyć tylko jedno z nich jednocześnie
  • wartość pola:

value="opcja1"

  • domyślne zaznaczenie pola:

checked="checked"

  • opis danego pola opcji należy umieścić obok niego

Przykład - opcje:

<p><input type="radio" name="opcja" value="opcja nr 1" checked="checked"> wybieram opcję 1</p>
<p><input type="radio" name="opcja" value="opcja nr 2"> wybieram opcję 2</p>

Pole wyboru

  • do wstawienia pola wyboru słuzy znacznik:

<input type="checkbox">

  • nazwa pola:

name="wybor"

  • użytkownik może zaznaczyć jednocześnie wiele pól
  • wartość pola:

value="wybor 1"

  • opis danego pola wyboru należy umieścić obok niego

Przykład - wybór:

<p><input type="checkbox" name="wybor" value="wybor nr 1"> wybieram 1</p>
<p><input type="checkbox" name="wybor" value="wybor nr 2"> wybieram 2</p>
<p><input type="checkbox" name="wybor" value="wybor nr 3"> wybieram 3</p>

Lista

  • listę opcji do wyboru tworzy się za pomocą znacznika:

<select>

  • nazwa listy:

name="nazwa_listy"

  • liczba jednocześnie wyświetlanych pozycji listy:

size="3"

  • wybór więcej niż jednej opcji z listy umożliwia się dodając do znacznika <select> atrybut:

multiple="multiple"

  • opcję należącą do listy tworzy się za pomocą znacznika:

<option>pierwsza pozycja</option>

  • domyślne zaznaczenie danej opcji - dodanie do znacznika <option> atrybutu:

selected="selected"

Przykład - lista:

<p>
    <select name="kolor" size="3">
        <option selected="selected"> czarny </option>
        <option>czerwony</option>
        <option>zielony</option>
        <option>niebieski</option>
        <option>fioletowy</option>
    </select>
</p>

Wysyłanie/resetowanie zawartości formularza:

  • do wysyłania danych wpisanych w formularzu służy przycisk:

<input type="submit">

  • do resetowania danych wpisanych w formularzu (przywrócenia domyślnych wartość pól) również służy przycisk:

<input type="reset">

  • napis na przycisku:

value="wyślij"

Przykład - wysyłanie/resetowanie:

<p>
    <input type="submit" value="Chcę wysłać">
    <input type="reset" value="Rozmyśliłem się jednak">
</p>

Zadanie 01

  1. Należy założyć konto FTP na serwerze (cba.pl lub dowolnym innym, patrz: Założenie i obsługa konta FTP).
  2. Umieścić w głównym katalogu na swoim koncie FTP plik index.html zawierający poprawny szablon dokumentu HTML i treść dotyczącą jakiegoś aspektu komunikacji człowiek-komputer.
  3. # Treść musi zawierać po jednym elemencie poznanym na zajęciach:
      1. podstawowe tagi (<strong>, <p>, <br>, itd)
      2. tabelę
      3. listę (<ol> lub <ul>)
      4. link
      5. formularz
      6. grafikę
      7. niech Państwo pamiętają aby zmienić tytuł strony (pomiędzy <title> a </title>)
  4. Plik index.html musi być poprawnym dokumentem HTML (czyli trzeba wykorzystać szablon), wyświetlać poprawnie polskie znaki (kodowanie UTF-8) i być dostępny w internecie - proszę w e-mailu zaliczeniowym wysyłać zarówno źródło HTML, jak i adres strony.
  5. Wysłać e-mail do prowadzącego zajęcia (zob. dział kontakt) o temacie "[KCK] Zadanie 01" zawierający: imię, nazwisko, numer indeksu, adres strony www z konta FTP (np. www.technologie-kck.cba.pl) i dwa zdania o tematyce tworzonej strony. E-mail jest informacją dla prowadzącego, że strona jest gotowa i nie zawiera błędów i do kolejnych zajęć nic się na niej nie zmieni, czyli zadanie domowe zostało wykonane.

Terminy oraz punktacja znajdują się na stronie z informacjami organizacyjnymi.

Strona na licencji Creative Commons Attribution-ShareAlike 3.0. Autorzy: A. Czoska, M. Komosiński, B. Kowalczyk, A. Kupś, M. Lubawy