Wprowadzenie do HTML5

O czym będzie

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

Zadanie 1

  1. Należy założyć konto FTP na serwerze (cba.pl lub dowolnym inny - najlepiej niedoklejającym reklam)
  2. Umieścić w głównym katalogu na swoim koncie FTP plik index.html zawierający szablon dokumentu HTML i odrobinę jakiejś interesującej treści :)
  3. treść zawierać musi:
      1. przynajmniej 3 akapity
      2. przynajmniej 2x nagłówki różnych rozmiarów.
      3. przynajmniej 2x złamanie wiersza w ramach akapitu (<br>)
      4. przynajmniej 2x zastosować znacznik <em>
      5. przynajmniej 2x zastosować <strong>
      6. przynajmniej dwa komentarze
      7. zmieniony tytuł dokumentu (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ę nie wysyłać plików HTML, tylko adres strony.
  5. Wysłać mail do prowadzącego zajęcia (zob. dział kontakt) o temacie "KCK - Zadanie 1" zawierający: imię, nazwisko, numer indeksu, adres strony www z konta FTP (np. www.comnieinteresuje.cba.pl) i kilka zdań o tematyce tworzonej strony. Mail jest wskazówką, ż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.

Termin: niedziela (12.10), godzina 23:59 (północ z niedzieli na poniedziałek); spóźnienie: -1pkt/dzień; oddanie zadania po północy z poniedziałku na wtorek oznaczać będzie brak punktów.
Punkty: 2

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