Podstawa Prawna:

Rozporządzenie Ministra Pracy i Polityki Socjalnej z dnia 1 grudnia 1998 r. w sprawie bezpieczeństwa i higieny pracy na stanowiskach  wyposażonych w monitory ekranowe (Dz.U. Nr 148, poz.973).

INSTRUKCJA  BHP

na stanowisku pracy z komputerem

1.   Do pracy na stanowisku z komputerem może przystąpić osoba, która:

• • przeszła profilaktyczne badania lekarskie z  uwzględnieniem badań wzroku i przedłożyła orzeczenie lekarskie bez przeciwwskazań do pracy na stanowiskach wyposażonych w monitory ekranowe,
• • została przeszkolona wstępnie z zakresu bhp i ppoż.,
• • została zapoznana z niniejszą instrukcją.

2.   Wyeliminowanie lub zmniejszenie uciążliwości pracy z komputerem wymaga zastosowania reżimu warunków pracy. W tym celu należy przestrzegać niżej wymienionych wytycznych:

• • ustawienie ekranu monitora względem źródeł światła powinno ograniczać olśnienie i odbicie światła,
• • odległości między sąsiednimi monitorami powinny wynosić co najmniej 0,6 m., a między pracownikiem i tyłem sąsiedniego monitora co najmniej 0,8 m.,
• • odległość oczu pracownika od ekranu monitora powinna wynosić 400-750 mm,
• • oświetlenie powinno zapewniać komfort pracy wzrokowej, a szczególnie: należy ograniczyć olśnienie bezpośrednie od opraw, okien, przezroczystych lub półprzezroczystych ścian albo jasnych płaszczyzn pomieszczenia oraz olśnienie odbiciowe od ekranu monitora w szczególności przez zastosowanie odpowiednich opraw oświetleniowych, instalowanie żaluzji lub zasłon w oknach,
• • klawiatura powinna mieć możliwość regulacji kąta nachylenia w zakresie 0-15^o,
• • klawiaturę należy ustawiać tak aby odległość między klawiaturą a przednią krawędzią stołu była nie mniejsza niż 100mm,
• • krzesło stanowiące wyposażenie stanowiska pracy powinno posiadać dostateczną stabilność, poprzez wyposażenie go w podstawę co najmniej pięciopodporową z kółkami jezdnymi, umożliwiać regulację wysokości siedziska w zakresie 400-500mm, licząc od podłogi; umożliwiać regulację pochylenia oparcia w zakresie: 5^o do przodu i 30^o do tyłu; posiadać wyprofilowaną płytę siedziska i oparcia odpowiednią do naturalnego wygięcia kręgosłupa i odcinka udowego kończyn dolnych; umożliwiać obrót wokół osi pionowej o 360^o;  oraz powinno być wyposażone w podłokietniki,
• • mechanizmy regulacji wysokości siedziska i pochylenia oparcia powinny być łatwo dostępne i proste w obsłudze oraz tak usytuowane, aby regulację można było wykonywać w pozycji siedzącej,
• • wszystkie elementy wyposażenia powinny znajdować się w zasięgu kończyn górnych , być osiągalne bez konieczności przyjmowania przez pracownika wymuszonych pozycji,
• • konstrukcja stołu powinna umożliwiać dogodne ustawienie elementów wyposażenia stanowiska pracy, w tym zróżnicowaną wysokość ustawienia monitora ekranowego i klawiatury,
• • łączyć przemiennie pracę związaną z obsługą monitora ekranowego z innymi rodzajami prac nie obciążającymi narządu wzroku i wykonywanymi w innych pozycjach ciała,
• • pomieszczenia, w których pracują komputery, jeżeli nie ma zainstalowanych urządzeń klimatyzacyjnych, powinny być często przewietrzane oraz wyposażone w dużą ilość kwiatów wpływających na utrzymanie obojętnej jonizacji powietrza (np. paprocie),
• • utrzymywać w pomieszczeniach przeznaczonych do pracy z monitorami ekranowymi wilgotność względną powietrza nie mniejszą niż 40% oraz optymalną temperaturę 21-23^oC,
• • monitor powinien być umieszczony pomiędzy rzędami lamp sufitowych, aby zapobiec odblaskom,
• • ekran monitora powinien być pokryty warstwą antyodbiciową lub wyposażony w odpowiedni filtr,
• • czyścić z kurzu powierzchnię ekranu przed rozpoczęciem pracy ściereczką antystatyczną lub bawełnianą
• • podczas siedzenia często zmieniać pozycje, by zmniejszyć zmęczenie mięśni.

3.   Pracownik zatrudniony na stanowisku pracy z monitorami ekranowymi ma prawo do:

• • co najmniej 5 – minutowej przerwy, wliczanej do czasu pracy, po każdej godzinie pracy przy obsłudze monitora ekranowego,
• • otrzymania okularów korygujących wzrok, jeżeli badania lekarskie wykażą potrzebę ich stosowania,
• • wyposażenia stanowiska pracy, gdy wysokość krzesła uniemożliwia pracownikowi płaskie, spoczynkowe ustawienie stóp na podłodze, w podnóżek.

4.   Zakazy obwiązujące na stanowisku pracy z monitorami ekranowymi:

• • zakaz  pracy  z monitorem ekranowym powyżej 4 godz. kobietom w ciąży,
• • zakaz spożywania posiłków na stanowisku pracy,
• • zakaz palenia tytoniu na stanowisku pracy i w pomieszczeniach pracy z komputerami,
• • zakaz samowolnego naprawiania urządzeń komputerowych, sprzętu i wyposażenia  stanowiskowego zasilanego energią elektryczną,
• • zakaz przechowywania na stanowisku magnesów, metali namagnesowanych, biżuterii magnetycznej jak również noszenia tej biżuterii w pracy,
• • zakaz czyszczenia na mokro obudowy komputera będącego pod napięciem,
• • zakaz używania do czyszczenia komputerów rozpuszczalników,
• • zakaz zastawiania otworów wentylacyjnych komputera,
• • zabrania się pracy na sprzęcie uszkodzonym bądź niesprawnym technicznie.
• • zakaz przechowywania na stanowisku pracy cieczy łatwopalnych,

5.   Każde zauważone nieprawidłowości w pracy komputera i sprzętu pomocniczego należy niezwłocznie zgłaszać przełożonemu.

6.   W razie zaistnienia wypadku – osobie poszkodowanej udzielić pierwszej pomocy, jeżeli zajdzie konieczność powiadomić pogotowie ratunkowe. O zaistniałym wypadku należy niezwłocznie zawiadomić bezpośredniego przełożonego i służbę bhp w zakładzie pracy.

Email: mariusz.potyszka@gmail.com

Strona napisana w oparciu o: xhtml, css, php, flash Czas realizacji: 20 dni Link do Strony

Strona napisana w oparciu o: wordpress, xhtml, css, php, flash Czas realizacji: 20 dni Link do Strony

Poniższy kod wklejamy do pliku index.html. Pomiędzy znaczniki <body> … </body>

<div class="container">

<div class="header"><a href="#"><img src="" alt="Insert Logo Here" name="Insert_logo" width="20%" height="90" id="Insert_logo" style="background: #8090AB; display:block;" /></a> 

<!– koniec .header –></div>

<div class="sidebar1">

<ul class="nav">

<li><a href="#">Link pierwszy</a></li>

<li><a href="#">Link drugi</a></li>

<li><a href="#">Link trzeci</a></li>

<li><a href="#">Link </a></li>

</ul>

<p> Powyższe linki demonstrują podstawową budowę menu wykorzystującą nieporządkowaną listę wystylizowaną w pliku style.css. Wykorzystaj to menu jako start i zmodyfikuj właściwości  dowolnie, żeby uzyskać unikalne menu. Żeby zbudować rozwijane menu możesz wykorzystać dodatkowo dowolny widget.</p>   

<p>Jeżeli potrzebujesz menu poziome po prostu wytnij cale ul z sidebar1 i wklej ponad sidebar1 nastepnie  przerób stylizacje w style.css .</p>

 <!– koniec .sidebar1 –></div>

<div class="content">

<h1>Instrukcje</h1>

<p>Należy pamiętać że plik utworzony w poprzednim ćwiczeniu style.css jest bardzo istotny dla tego szablonu. Żeby dowiedzieć się więcej o stylach możesz zerknąć do strony<a href="http://www.w3schools.com/css/default.asp">http://www.w3schools.com/css/default.asp</a>.</p>

<h2>Przenoszenie div'ow do nowej linii</h2>

<p>Ponieważ wszystkie kolumny mają ustawiony parametr float, musimy wykorzystać clear:both zadeklarowane w style.css w .footer. </p>

<h3>Logo Podmiana</h3>

<p>Miejsce na logo w klasie .header tam możemy dodać logo. </p>

    <h4>Internet Explorer Conditional Comments</h4>

    <p>These liquid layouts contain an Internet Explorer Conditional Comment (IECC) to correct two issues. </p>

    <ol>

      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam faucibus porttitor enim, sed volutpat elit sagittis id. Donec ac mauris justo. Donec ut felis velit. Sed libero felis, malesuada non eleifend vel, tempor sit amet odio. In in aliquam massa. Sed dapibus orci nec est laoreet consectetur. Duis in sapien ac ipsum congue facilisis vitae consectetur lacus. Sed in tortor vel ipsum tempor semper sed sodales dui. Maecenas iaculis tempor cursus. Proin mauris justo, faucibus quis blandit sed, dictum commodo orci. Phasellus egestas sagittis sapien.</li>

      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam faucibus porttitor enim, sed volutpat elit sagittis id. Donec ac mauris justo. Donec ut felis velit. Sed libero felis, malesuada non eleifend vel, tempor sit amet odio. In in aliquam massa. Sed dapibus orci nec est laoreet consectetur. Duis in sapien ac ipsum congue facilisis vitae consectetur lacus. Sed in tortor vel ipsum tempor semper sed sodales dui. Maecenas iaculis tempor cursus. Proin mauris justo, faucibus quis blandit sed, dictum commodo orci. Phasellus egestas sagittis sapien.</li>

    </ol>

    <!– end .content –></div>

  <div class="sidebar2">

    <h4>Backgrounds</h4>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam faucibus porttitor enim, sed volutpat elit sagittis id. Donec ac mauris justo. Donec ut felis velit. Sed libero felis, malesuada non eleifend vel, tempor sit amet odio. In in aliquam massa. Sed dapibus orci nec est laoreet consectetur. Duis in sapien ac ipsum congue facilisis vitae consectetur lacus. Sed in tortor vel ipsum tempor semper sed sodales dui. Maecenas iaculis tempor cursus. Proin mauris justo, faucibus quis blandit sed, dictum commodo orci. Phasellus egestas sagittis sapien. </p>

    <!– koniec  .sidebar2 –></div>

  <div class="footer">

    <p>Miejsce na informacje dotyczące autora, praw autorskich</p>

    <!– koniec .footer –></div>

  <!– koniec .container –></div>

Jezeli poprawnie utworzyliśmy style.css oraz index.html nasza strona powinna wyglądać następująco:

Link do strony przykładowej

Omówiliśmy już podstawową budowę pliku index.html. Plik ten odpowiada za wyświetlanie elementów na stronie czyli: linki, obrazki, treści, tabele, formularze itd.

Zajmiemy się teraz budowaniem pliku style.css. W tym pliku zdefiniujemy to jak nasze elementy będą wyświetlane czyli: marginesy, kolory, wielkości np. czcionek, ramki itp. Plik ogólnie odpowiada za cały interfejs graficzny strony internetowej.

Czyli definiujemy jeden plik który będzie odpowiadał za wszystkie podstrony. W pliku index.html <link href="style.css" rel="stylesheet" type="text/css" /> ta linia kodu odpowiada za powiązanie style.css z plikiem index.html. 

Każda linia kodu będzie skomentowana, żeby omówić i wyjaśnić polecenia. Komentarz w pliku style.css otwieramy za pomocą   /* zamykamy za pomocą */ .

W pliku definiujemy po kolei cały kod możemy skopiować do pliku style.css: 

@charset "UTF-8"; 

body {    /* proszę zwrócić uwagę na index.html oraz na znacznik <body> wszystko co w tym się znajdzie przyjmie poniższe parametry*/

font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;    /* deklarujemy rozmiar czcionki, interlinie, rodzaj czcionki*/

background: #4E5869;   /*wczytujemy kolor tła naszej strony internetowej*/

margin: 0;       /*zerujemy margines niektóre przeglądarki mogą ustawić domyślnie jakiś margines żeby tego uniknąć po prostu ustawiamy wartość zero */

padding: 0;   /*podobnie postępujemy z parametrem padding*/

color: #000; /*ustawiamy kolor czcionki*/

background-image: url(images/1.jpg); /*Do katalogu images możemy wgrać jakiś plik graficzny który posłuży nam za tło naszej strony internetowej przykładowo skopiowałem tam plik o nazwie 1 rozszerzeniu png. Ale my możemy tam wczytać np *.png czy tez *.bmp */

background-repeat: no-repeat; /*Domyślnie tło będzie się powtarzało (zależne od rozdzielczości) aby tego uniknąć deklarujemy brak powtarzania*/

background-position: 50% top; /* Za pomocą tej komendy wyśrodkujemy nasze tło i przykleimy do góry w oknie naszej przeglądarki*/ 

}

/* ~~ Elementy tagi selektory ~~ */

ul { /* W zależności od różnych przeglądarek najlepszą metodą jest wyzerowanie marginesów i padiing na listach . Listy są wykorzystywane w pozycjach menu. Co będziemy omawiać pózniej  */

padding: 0;

margin: 0;

}

h1, h2, h3, h4, h5, h6, p {

margin-top: 0; /* usuwamy margines górny w przypadku wszelkich nagłówków i paragrafów  */

padding-right: 15px;

padding-left: 15px; /* Dodajemy padding. Stosujemy to Po to żeby nie dodawać poźniej paddingu do div.*/

}

a img { /* Ten selektor usuwa domyślnie stosowane niebieskie ramki z obrazków przez niektóre przeglądarki. Ramki te występują tylko wtedy gdy obrazek jest linkiem. */

border: none;

}

/* ~~ Menu budowa oraz wyświetlanie ~~ */

a:link {   /*Dotyczy wszytkich aktywnych linków na stronie*/

color:#414958; /*kolor linkow*/

text-decoration: underline; /*Podkreślenie linków na stronie raczej nie stosujemy podaje to jako przykład najlepiej ustawić : text-decoration: none; */

}

a:visited {   /*linki odwiedzone*/

color: #4E5869;

text-decoration: underline;

}

a:hover, a:active, a:focus { /* grupa linków na które najedziemy myszką, które są aktywne, odpowiada to za podświetlanie pozycji menu */

text-decoration: none;

}

/* ~~ Ten conainer zawiera wszystkie inne divy dając im szerokości oparte na %  ~~ */

.container {

width: 80%; /*szerokość kontenera*/

max-width: 1260px; /* Maksymalna szerokość strony internetowej. IE6 nie wspiera tej deklaracji. */

min-width: 780px; /*Minimalna szerokość strony internetowej. IE6 nie wspiera tej deklaracji */

background: #FFF; /* Kolor tła */

margin: 0 auto;  /* dzięki auto mamy ustawioną po bokach dzięki temu strona będzie wyśrodkowana nie jest to wymagane gdy podamy szerokość na 100% a nie na 80%. */

}

/* ~~ header nie posiada zadeklarowanej szerokości, domyślnie rozciągnie się na całą szerokość container. Zawiera miejsce na grafikę na logo ~~ */

.header { /* deklaracja nagłówka*/

background: #6F7D94;  /* tło nagłówka*/

}

/* ~~ Poniżej kolumny strony internetowej. ~~ 

1)Padding jest tylko ustawione na gorze i dole div'ow. Elementy bez tych div'ow mają już ustawione padding. 

2) Nie ma ustawionych zadnych marginesów skoro wykorzystujemy float. 

3) proszę zwrócić uwagę że niektóre elementy są zadeklarowane po . inne po znaku #. Oznacza to tylko tyle że po kropce definiujemy id po # deklarujemy klase. Klasa może byc wykorzystywana wielokrotnie natomiast id po . może być wykorzystane tylko raz 

*/

.sidebar1 { /*lewa kolumna*/

float: left; /*wyrównanie div'a do lewej*/

width: 20%; /*szerokosc 20% zawartosci container*/

background: #93A5C4; /*Kolor tla*/

padding-bottom: 10px; /*padding dolne ustawione na 10px*/

}

.content { /*srodkowa kolumna*/

padding: 10px 0; /*padding gora dol ustawione na 10 px lewa prawa strona 0 */

width: 60%; /*szerokosc 60% zawartosci container*/

float: left; /*wyrównanie div'a do lewej*/

}

.sidebar2 { /*prawa kolumna*/

float: left; /*wyrównanie div'a do lewej*/

width: 20%; /*szerokosc 20% zawartosci container*/

background: #93A5C4;

padding: 10px 0;  /*padding gora dol ustawione na 10 px lewa prawa strona 0 */

}

/* ~~ Ta grupa selektorów wyświetla listę w obszarze .content. ~~ */

.content ul, .content ol { 

padding: 0 15px 15px 40px; /* Padding ustawione dla podpunktów. */

}

/* ~~ Menu ~~ */

ul.nav {

list-style: none; /*usuwa przy liście punkty */

border-top: 1px solid #666; /* to polecenie tworzy przy górnej krawędzi linie i szerokości 1px kolor #666 */

margin-bottom: 15px; /* to polecenie wprowadza odstęp pomiędzy przyciskami 15px */

}

ul.nav li {

border-bottom: 1px solid #666; /* wprowadzenie linii odstępu podobnie jak wyżej*/

}

ul.nav a, ul.nav a:visited { 

padding: 5px 5px 5px 15px;

display: block; /* przypisuje do linka blok który wypełnia cale LI. Cały obszar reaguje na ruch myszy */

text-decoration: none;

background: #8090AB;

color: #000;

}

ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* Zmiana tła po najechaniu myszką*/

background: #6F7D94;

color: #FFF;

}

/* ~~Stopka ~~ */

.footer { /*obszar stopki na dole strony internetowej*/

padding: 10px 0;   /*padding gora dol ustawione na 10 px lewa prawa strona 0 */

background: #6F7D94;

position: relative;/* potrzebne do przegladarki IE6  */

clear: both; /* Dzęeki temu .container  rozumie gdzie kończą się powyższe kolumny */

}

/* ~~rozne float/clear klasy~~ */

.fltrt {  /*Ta klasa może być wykorzystywana do wyrównania elementu do prawej na stronie internetowej. */

float: right;

margin-left: 8px;

}

.fltlft { /*Ta klasa może być wykorzystywana do wyrównania elementu do prawej na stronie internetowej. */

float: left;

margin-right: 8px;

}

.clearfloat { /* Ta klasa podobnie jak <br /> przenosi div'a poniżej jeżeli występuje float */

clear:both;

height:0;

font-size: 1px;

line-height: 0px;

}

Doctype umieszcza się na początku kodu strony, określa jakim językiem jest zrobiona strona.

W przypadku Xhtml możemy rozróżnić 4 typy:

1. XHTML Strict DTD

   Użyj tej wersji gdy chcesz oddzielić sposób prezentacji dokumentu XHTML od jego treści, czyli gdy chcesz przenieść wszystkie informacje o wyglądzie dokumentu XHTML do zewnętrznego arkusza stylów CSS.
    

2. XHTML Transitional DTD
   
   Deklaracja DOCTYPE XHTML Transitional zawiera także atrybuty i znaczniki XHTML które w wersji Strict zostały przeniesione do arkuszy styli CSS. Użyj tej wersji gdy potrzebujesz użyć możliwości formatowania tekstu XHTML, ponieważ np. Twoi czytelnicy używają przeglądarek nie wspierających kaskadowych arkuszy styli CSS.
    
3. XHTML Frameset DTD

   Ta wersja DTD powinna być używana dla dokumentów z ramkami. Jest to zmodyfikowana wersja XHTML Transitional DTD, gdzie element <body> został zastąpiony przez element <frameset>

4. XHTML 1.1
   
   Ten DTD jest taki sam jak XHTML 1.0 Strict, ale umożliwia dodawanie modułów.(przykładowo wspierające języki wschodniej Azjii).
    

Doctype deklarujemy na początku dokumentu. Dokładnie w head jak było to pokazane w poprzednim przykładzie. Po zadeklarowaniu Doctype musimy uzupełnić dodatkowe informacje w dziale head takie jak:

<title>Tytuł naszej strony</title>
Zaleca się zwykle nieprzekraczanie 40 znaków.
Nie używaj w tytułach samych WIELKICH LITER, gdyż wiele wyszukiwarek zignoruje stronę.
Nie wpisuj także w ramach title adresów internetowych, gdyż skutek będzie taki sam
Warto także pamiętać, że indeksery nadają zwykle temu znacznikowi wysoki priorytet, a więc warto w nim podać istotne informacje, np. nie "Moja strona domowa", lecz raczej "Pizzeria jakas, dowóz na tel". Musimy zwrócić uwagę na to żeby tytuł był powiązany z tematyką strony.

Dodatkowe informacje które powinniśmy umieścić na stronie to znaczniki <meta…>. Meta jest poleceniem opcjonalnym, nie jest wymagane do poprawności dokumentu. Ale jest bardzo ważne więc polecam używanie tych poleceń.

Poniżej w przykładach postaram sie wyjaśnić dokładnie do czego służą owe polecenia i jak możemy je wykorzystać. Najpierw musimy jedak odpowiedzieć sobie na pytanie czym jest <meta…>,  więc będzie  to polecenie, które bardziej szczegółowo informuje o zawartości dokumentu, np. dla celów katalogowych czy indeksów, wykorzystywanych przez odpowiednie programy przykładowo wyszukiwarki internetowe.

Owe polecenie może zawierać dwa atrybuty:

<meta http-equiv=… content=…>  definiuje zmienne systemowe
<meta name =… content=…>        definiuje zmienne użytkownika
 

Meta  jest użytecznym instrumentem współpracującym z przeglądarkami internetowymi i sieciowymi wyszukiwarkami. Pamiętaj, że trzeba opisać każdy dokument z osobna, aczkolwiek w wielu sytuacjach wystarczy po prostu skopiować dane meta z jednego dokumentu do pozostałych.

Przykłady i elementy które możemy wykorzystać na naszej stronie:

01. Kodowanie znaków

<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
Jest to deklaracja strony kodowej dokumentu wg standardu iso-8859-2. Przeglądarki dzięki tej deklaracji potrafią automatycznie przestawić się na poprawną stronę kodową. Polecenie to jest bezwzględnie zalecane przy projektowaniu stron internetowych.
 

02. Opis strony

<meta http-equiv="Description" content="treść opisująca stronę">
Jest to bardzo ważne polecenie wykorzystywane przez wyszukiwarki sieciowe. Owe polecenie opisuje zawartość strony.Przykładowo, gdy posłużymy sie
wyszukiwarką www.google.pl szukając np. pizzeria, to informacja zamieszczona w ramach TITLE zostanie wyświetlona jako tytuł znalezionej strony. Z kolei zawartość Description zostanie wyświetlona niżej, jako opis naszej strony.Gdybyśmy nie użyli Description, wyszukiwarka wyświetli kilka pierwszych wierszy naszego dokumentu, które mogą być zupełnie przypadkowe. Uważnie i świadomie zredagowana zawartość Description da natychmiast orientację co do zawartości strony.
Zaleca się nieprzekraczanie 200 znaków. W niektórych specjalistycznych serwisach spotyka się zalecenie "co najwyżej 20-25 wyrazów".

03. Słowa kluczowe

HTML (ang.) HyperText Markup Language – hipertextowy język znaczników, obecnie szeroko wykorzystywany do tworzenia stron internetowych.

Pomoce:

Walidatory: strony gdzie możemy sprawdzić nasz kod pod względem poprawności pisanego kodu

http://validator.w3.org/ html, xhtml
http://jigsaw.w3.org/css-validator/ css

Edytory: pomocne przy projektowaniu

Struktura Języka HTML

<!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>

Informacje nagłówkowe o dokumencie, łącznie z tytułem.

</head>

<body>

Treść dokumentu – śródtytuły, treści, grafiki, odsyłacze

</body>

</html>

1. Zadanie

Utwórz plik o nazwie:

index.html – tworzymy go w dowolnym edytorze bądź notatniku później tylko zmieniamy rozszerzenie z .txt na .html

style.css – podobnie jak plik index.html

dodatkowo katalog o nazwie:

images

Powyższe pliki i katalog  wgrajcie do  jednego  katalogu, nazwa dowolna. W tym katalogu bedziemy przechowywać całą nasza stronę.

Nastepnie plik index.html otwieramy w dowolnym edytorze bądź notatniku  i uzupełniamy następującymi treściami:

<!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>

Informacje nagłówkowe o dokumencie, łącznie z tytułem.

</head>

<body>

<p>Witaj swiecie</p>

</body>

</html>

Odpalamy plik index.html w przeglądarce powinien  pojawić się napis  Witaj swiecie!  Tym oto sposobem  zrobiliśmy  pierwszą  stronę internetową.
W Dalszych tutorialach omówimy sobie dokładnie budowę <head></head>  oraz omówimy typy  DOCTYPE.