Osnowa dokumentu Drukuj
Ocena użytkowników: / 1
SłabyŚwietny 
Wpisany przez Patryk yarpo Jar   
piątek, 18 września 2009 02:29

Przez osnowę dokumentu będziemy tu uważać kod HTML niezbędne do tego, aby dokument tekstowy nazwać stroną internetową.
Proponuję, aby zawsze zaczynać od takiego kodu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

    <title>tytuł strony</title>

    <meta http-equiv="content-type" content="text/html;charset=utf-8">

</head>

<body>

    Ten tekst będzie widoczny!

</body>

</html>

wytłumaczanie:

Na samej górze dokumentu powinna się znajdować deklaracja typu dokumentu. DOCTYPE mówi przeglądarce, z jakim dokumentem na do czynienia. Na razie załóż, że to tam powinno być (na samym początku nie ma sensu się zbytnio w to wgłębiać - można o tym spokojnie napisać książkę :P).
Znacznik <html> otwiera dokument. Zauważ, że większość znaczników to pary: <znacznik> ... </znacznik>. Łatwo zauważyć, że dodając ukośnik zamykamy wcześniej otwarty tag (tag = znacznik).

Sekcja head służy do umieszczania informacji, które niekoniecznie muszą być widoczne dla internauty, np. kodowanie. Kodowanie to kolejny temat rzeka. Załóżmy na potrzeby kursu, że używamy utf-8. Znacznik title pozwala na ustawienie tytułu strony - widoczny na pasku programu, nad menu ('Plik', 'edycja' itp.).
Sekcja body - to jest część strony, gdzie należy umieszczać treści jakie chcemy, aby się wyświetlały.

Przejdź do folderu `kurs html youthcoders' i stwórz tam plik `index.htm' (pamiętaj, aby w ustawieniach folderu odznaczyć "ukrywaj rozszerzenia znanych plików". Windows uważa, że użytkownik jest idiotą i nie powienien widzieć rozszerzenia pliku).

Następnie wklej powyższy kod i zapisz plik. Otwórz go w dowolnej przeglądarce i podziwiaj efekt :). Tak, to jest twoja pierwsza strona. Póki co jeszcze nie jest idealna, ale spokojnie - będzie lepiej!

Zadania dodatkowe:

  1. Spraw, aby w tytule strony wyświetliło się twoje imię.
  2. Zmień tekst widoczny na ekranie "Ten tekst będzie widoczny" na dowolny inny.
     
Tags:

Zobacz podobne artykuły

< Poprzednia   Następna >