• Artykuł

          

Samouczek: Pierwsza strona internetowa - Kurs HTML i CSS Udostępnij na: Facebook

Autor: Łukasz Kazimierz Krajkowski

Opublikowano: 2011-09-13

Internet umożliwia propagowanie różnorakich treści wśród grupy odbiorców. Jedną z wielu technologii, które pomogą nam utworzyć dokument do zastosowań w globalnej sieci, jest język HTML. Jest to jedno z prostszych rozwiązań, które pozwala utworzyć dokument zawierający grafikę, tekst oraz elementy multimedialne jak np. video. Aktualnie rozwijaną wersją jest HTML5. Jednak ze względu na starsze przeglądarki, które nie obsługują tej wersji w samouczku wykorzystamy HTML4. Wersja piąta wzbogacona została o wiele przydatnych funkcji, takich jak np. bezpośrednie osadzanie video.

Po wykonaniu zadań nauczysz się:

  • tworzyć statyczne strony internetowe,
  • wykorzystywać różne edytory do tworzenia stron internetowych,
  • walidować poprawność kodu strony pod kątem zgodności ze standardami.

Implementacja

Rozpoczynając pracę na swoim komputerze powinieneś posiadać:

  • dowolny edytor tekstowy (np. Notatnik),
  • dostęp do Internetu,
  • Microsoft Visual Web Developer 2010 Express.
Informacja

Microsoft Visual Web Developer 2010 Express możesz pobrać bezpłatnie ze strony:

https://www.microsoft.com/visualstudio/en-us/products/2010-editions/express

Wykonamy prostą stronę internetową, zawierającą krótki akapit tekstu, przy użyciu dwóch różnych programów. Strona za każdym razem będzie wyglądała identycznie. Strona została zaprezentowana na Rys. 1. Ostatecznie, żeby sprawdzić to czy witryna została poprawnie napisana, przeprowadzimy walidację – sprawdzenie jej poprawności na stronie W3C (World Wide Web Consortium). Organizacja ta odpowiada za opracowanie standardów oraz udostępnia narzędzia pozwalające walidować stronę pod kątem poprawności oraz zgodności ze standardem.

Rys. 1. Efekt końcowy.

Pierwsza strona internetowa w Notatniku

Naszym zadaniem jest stworzenie strony internetowej zgodnie ze standardami określonymi przez W3C.

  1. Uruchom prosty edytor tekstu notepad.exe (systemowy notatnik).
  2. Utwórz dokument html.
  • W nowo otwartym oknie Notatnika wpisz:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Pierwsza strona internetowa</title>
    </head>
    <body>
        <h1>Witaj</h1>
        <p>Witaj świecie! To jest moja pierwsza strona internetowa.
        Zawierająca tylko tytuł strony, tekst nagłówka oraz akapit z 
        przykładowym tekstem
        </p>
    </body>
</html>
  • W menu Notatnika wybierz Plik, a następnie Zapisz jako.
  • Wybierz katalog docelowy.
  • W polu nazwa pliku wpisz Start.html.
  • Z listy rozwijanej Kodowanie wybierz UTF-8.
  • Kliknij Zapisz.
Informacja

Stworzyłeś w ten sposób swoją pierwszą stronę internetową zgodną ze standardami W3C (World Wide Web Consortium). Zauważ, że strona zawiera znacznik <html></html>, który jest znacznikiem nadrzędnym w hierarchii DOM (Document Object Model). Natomiast wewnątrz niego występują 2 główne bloki.

Znacznik <head></head>, uzupełniony o odpowiednie meta tagi, informuje przeglądarkę internetową, w której zostanie zinterpretowany plik, o tym, jakie środowisko jest dla niego najwłaściwsze. Więcej informacji o znaczniku body znajdziesz w samouczku Nagłówek strony internetowej.

Znacznik <body></body>, uzupełniony o odpowiednie znaczniki, odpowiada za treść, która zostanie wyświetlona na stronie internetowej. Więcej informacji o znaczniku body znajdziesz w samouczku Treść na stronie WWW.
  1. Wyświetlanie strony internetowej w przeglądarce.
    • W managerze plików (np. Windows Explorer) kliknij dwukrotnie na utworzony plik o nazwie Start.html, plik ten otworzy się bezpośrednio w przeglądarce.

Strona utworzona przy użyciu narzędzi dedykowanych

W tym zadaniu wykorzystasz narzędzia, które ułatwiają tworzenie stron internetowych. Jednym z takich narzędzi dostępnych za darmo, również do zastosowań komercyjnych, jest Microsoft Visual Web Developer 2010 Express.

  1. Utwórz nowy projekt.
    • Uruchom program Microsoft Visual Web Developer 2010 Express.
    • Wybierz File–>New Project.
    • Odszukaj i wybierz pozycję ASP.NET Empty Web Application.
    • W polu Name wpisz Projekt1.
    • Kliknij OK (Rys. 2.).
Informacja
W ten sposób utworzyłeś nowy projekt, który pozwala zarówno na utworzenie statycznych jak i dynamicznych stron internetowych. Więcej o tworzeniu dynamicznych stron internetowych dowiesz się z samouczka ASP.NET.


Rys. 2. Widok utworzonego projektu.

  1. Dodaj stronę internetową do projektu.
    • Wybierz Project–>Add New Item (Rys. 3.).
    • Odnajdź i wybierz HTML Page.
    • W polu Name wpisz Start.html.
    • Kliknij przycisk Add.

Rys. 3. Okno Add New Item.

  1. Zmień dokument html.
    • Wybierz zakładkę Source, umieszczoną w dolnej części okna oznaczoną na Rys. 4.
    • Przejdź do znaczników <title></title>, wpisz pomiędzy nimi Pierwsza strona internetowa.
    • Przejdź do znaczników <body></body> i wpisz<
    • Z wyświetlonej listy (lista IntelliSense) wybierz znacznik h1 i wciśnij enter.
    • Pomiędzy utworzone tagi h1 wpisz Witaj
    • Ustaw kursor na końcu linii i dodaj nową linię
    • Wpisz:
<p>
Witaj świecie! To jest moja pierwsza strona internetowa. Zawierająca tylko tytuł strony, tekst nagłówka oraz akapit z przykładowym tekstem
</p>
  • Zapisz zmiany.
Informacja
IntelliSense jest narzędziem ułatwiającym i skracającym proces pisania kodu. Podpowiada np. nazwy tagów, których aktualnie potrzebujemy.
  1. Wyświetlanie strony internetowej w przeglądarce.
    • W oknie Solution Explorer kliknij na nazwie Start.html prawym przyciskiem myszy i wybierz View in Browser. Jeśli nie widzisz okna Solution Explorer, to wybierz View->Other Windows-> Solution Explorer.

Rys. 4. Widok zakładki Source.

Walidacja strony internetowej

Jeżeli chcesz sprawdzić, czy strona internetowa, którą stworzyłeś, jest zgodna ze standardem warto przeprowadzić proces walidacji. Proces ten ujawni niezgodności, które mogą spowodować niejednoznaczną interpretację przez przeglądarki, co skutkować może odmiennym wyświetlaniem zawartości strony.

Przeprowadź walidację.

Rys. 5. Strona walidatora.

  • Wybierz zakładkę Validate by Direct Input.
  • Przekopiuj kod źródłowy z któregokolwiek wcześniej stworzonego pliku Start.html (powinny mieć identyczny kod).

Naciśnij przycisk Check. Powinieneś ujrzeć wynik jak na Rys. 6.

Rys. 6. Pozytywnie zakończona walidacja.

Więcej o walidacji przeczytasz w samouczku Walidacja WWW.

Podsumowanie

W tym artykule nauczyliśmy się, w jaki sposób wykorzystać prosty edytor tekstowy oraz Microsoft Visual Web Developer 2010 Express do budowania statycznych stron internetowych. Nauczyliśmy się również, w jaki sposób sprawdzić poprawność naszej witryny pod kątem zgodności ze standardem.

W kolejnym artykule nauczymy się podstaw formatowania stron.

Dodatkowo zobacz: