Slide 1

Podstawy HTML

Tworzenie stron www 5

Joanna Brzozowska


Slide 2

Logo

Joanna Brzozowska
[email protected]


Slide 3

Moduł E4 - podsumowanie
Netykieta webmastera
 Użyteczność
 Staranność

 Bezbłędność

MarketingMix

 Jakość

Product
Idea

Price

Joanna Brzozowska
[email protected]

Place

Promotion

People


Slide 4

Forum
 Asynchroniczność
 Napiszę, to już zostanie
 Kontakt z klientami
 Kontakt stały
 Odbiór poczty – codziennie
…

Joanna Brzozowska
[email protected]


Slide 5

Przebieg zajęć
 Edytory HTML
 Struktura dokumentu
 Odsyłacze
 Formatowanie dokumentu – CSS
 Grafika na stronie
 Tabele
 Programy pomocnicze

Joanna Brzozowska
[email protected]


Slide 6

HTML
 Dokument WWW jest to plik, który zawiera informacje potrzebne

przeglądarce do poprawnego wyświetlenia strony WWW. Do
tworzenia tego typu dokumentów używa się języka HTML.

 HTML (Hyper Text Markup Language - Hipertekstowy Język

Opisu Strony) jest zbiorem komend odpowiedzialnych za wygląd
treści publikowanej na stronie internetowej.

 Jest raczej zbiorem specjalnych kodów (znaczników), które

wbudowane w tekst powodują jego odpowiednie sformatowanie.
Znaczniki HTML służą do dwóch celów. Po pierwsze: określają
strukturę dokumentów. Po drugie - określają odsyłacze do
innych dokumentów HTML lub do istotnych części tego samego
dokumentu. Oprócz tego są używane do określenia ważnych
fragmentów tych dokumentów.
Joanna Brzozowska
[email protected]


Slide 7

Edytor plików HTML
 pliki HTML są

zwykłymi plikami tekstowymi
 do ich tworzenia wystarcza najprostszy
z możliwych edytor, np.:




Notatnik
WordPad
Notepad++

 Źródło strony
Joanna Brzozowska
[email protected]


Slide 8

Ćwiczenie 1
Otwórz notatnik (Start / Wszystkie programy / Akcesoria / Notatnik). Stwórz dokument:







Moja pierwsza strona.



Dokument zapisz jako mps.html (zapisz jako... / wszystkie dokumenty (all types))
W dokumencie dopisz w sekcji body (otwórz dokument mps.html / prawy przycisk / Pokaż
źródło / klik):



• kolor tła – zielony
  
• kolor liter – czerwony
  
• kolor ramek – niebieski
  




1. jeden
   
2. dwa
   
3. trzy
   

Zapisz zmiany, odśwież okno przeglądarki.
Joanna Brzozowska
[email protected]


Slide 9

Struktura dokumentu
 Nagłówek


...



...



...

 Znaczniki



 Znaczniki zamykające




naglowki.html
 Komentarze



Joanna Brzozowska
[email protected]


Slide 10

Struktura dokumentu
 Lista

nieuporządkowana





• 
  
• 
  
• 
  

 Lista uporządkowana



1. 
   
2. 
   
3. 
   

mps.html
 Znaczniki wyróżnione






---

Joanna Brzozowska
[email protected]


Slide 11

Ćwiczenie 2
To ćwiczenie pokaże Ci, ze przeglądarki są w stanie wybaczyć naprawdę
wiele, chociaż nie wszystko. W dokumencie mps.html dodaj wiersz w sekcji
:


To jest tekst. Sam go napisałem.

 A to co to? Oczywiście, link!
i zapisz. Następnie sprawdź w ulubionej przeglądarce i zapisz na karcie, co się
dzieje, gdy:
 1. Klikniesz na tekst „A to co to?”
 2. Pominiesz jeden ze znaczników lub
 3. Zamiast napiszesz
 4. Zamiast napiszesz








(b) a href=”http://www.onet.pl”
(c)
(g)
(h)

5. Pominiesz znacznik
6. Zamiast napiszesz

Joanna Brzozowska
[email protected]


Slide 12

Odsyłacze (Anchor – kotwica)
 Strona zewnętrzna

A co to jest?
 Podstrona
Moja Pierwsza strona
 Miejsce w tym dokumencie
1.
2. Etykieta
www.twojakariera.republika.pl
Joanna Brzozowska
[email protected]


Slide 13

Odsyłacze (Anchor – kotwica)
Umieszczamy tylko działające linki!
Pamiętajmy o linku wstecz!
Ważny schemat nawigacji!

Joanna Brzozowska
[email protected]


Slide 14

Przerwa

Joanna Brzozowska
[email protected]


Slide 15

Ćwiczenie 3
Otwórz notatnik (Start / Wszystkie programy / Akcesoria / Notatnik). Stwórz dokument:
 body
 {
 img
 background-color: rgb(173,230,172);
 {
 font-family: Arial;
 border: 3px solid black;
 font-size: 25px;
 width: auto;
 color: rgb(255,0,0);
 height: auto;
 text-align: left;
 }
 }
 ol
 h1
 {
 {
 text-align: right;
 background-color: rgb(0,0,0);
 font-family: Courier New;
 margin-left: auto;
 color: rgb(255,255,0);
 margin-right: auto;
 }
 text-align: center;
Zapisz go jako imie.css
 font-weight: bold;
W dokumencie mps.html dopisz wiersz w
sekcji head:
 font-size: 30px;
  border: 3px solid black;
type="text/css">
 border-color: rgb(0,0,255);
Otwórz dokument mps.html. Czy coś się
 }
zmieniło?
Joanna Brzozowska
[email protected]


Slide 16

Formatowanie CSS
 Selektory

body
 h1
 img
 ol
 Właściwości
 background
 margin-left
 margin-right
 text-align
 font-weight
 font-size
 border
 border-color


 Wartości

rgb(173,230,172)
Arial
25px
left






KOLORY

Joanna Brzozowska
[email protected]


Slide 17

Ćwiczenie 4
 W sekcji body dokumentu mps.html wstaw:


Zapisz zmiany.
W dokumencie imie.css dopisz właściwości i ich
wartości w selektorze img:
 float: right;
 width: 100;
 height: 100;
Zapisz zmiany.
Otwórz dokument mps.html w przeglądarce.
Joanna Brzozowska
[email protected]


Slide 18

Grafika na stronie

 float: right;
 width: 342;


height: 353;

 Zmniejszenie rozmiarów w definicji nie wpływa na

wielkość pobieranego obrazka – jest on pobierany
w oryginalnym rozmiarze, a następnie zmniejszany
przez przeglądarką.

Joanna Brzozowska
[email protected]


Slide 19

Stosowanie grafiki na stronie














używaj podpisu obrazka ALT="opis zdjęcia" - przed załadowaniem grafiki użytkownik będzie
wiedział co zdjęcie przedstawia. Gdy budujesz graficzne menu lub galerię zdjęć, użytkownik
może od razu przejść na stronę, która go interesuje - nie musi czekać, aż załadują się
obrazki do końca.
wpisuj rozmiary obrazka czyli WIDTH (szerokość) i HEIGHT (wysokość) podawaną w
pikselach (lub procentach - procent szerokości lub wysokości strony) - dzięki temu
przeglądarka będzie wiedziała ile dany obrazek zajmuje miejsca na stronie i szkielet strony
będzie szybciej widoczny.
nie umieszczaj więcej niż 30 Kb na stronie - jeżeli chcesz więcej (np.: zamieszczasz
kolekcję zdjęć), zawsze ostrzeż oglądającego, że strona może się długo ładować. Dobrym
pomysłem jest przygotowanie miniaturek zdjęć oraz odnośników do pełnowymiarowych
fotografii - dzięki temu użytkownik zorientuje się co zdjęcie przedstawia i jeżeli będzie chciał
je obejrzeć to sam o tym zadecyduje.
tam gdzie jest to możliwe używaj tekstu zamiast grafiki, dzięki temu strona będzie się
szybciej ładować.
używaj kolorów z rozwagą - staraj się, aby strona była stonowana, nadużywanie kolorów
męczy wzrok oglądającego i rozprasza jego uwagę
postaraj się powstrzymać od używania animacji (szybko "męczy") oraz map graficznych
nie stosuj tła, które ma dużą objętość - staraj się, by wielkość pliku nie była większa niż 5Kb
tekst i tło powinny ze sobą kontrastować (jasny tekst na ciemnym tle i vice versa),
oszczędnie stosuj tła graficzne
nie używaj niepotrzebnych graficznych ozdobników
pamiętaj o prawach autorskich - nie kopiuj pomysłów ani grafiki bez zgody autora
Joanna Brzozowska
[email protected]


Slide 20

Ćwiczenie 5
Wpisz w dokumencie mps.html w sekcji body:








Zapisz zmiany. Odśwież stronę. Czy coś się zmieniło w dokumencie mps.html
wyświetlanym w przeglądarce?
Na końcu dokumentu imie.css wpisz:
 table
 {
 width: 50%;
 background-color: rgb(255,126,0);
 border: 3px solid black;
 color: rgb(255,255,255);
 }
Zapisz zmiany. Co widzisz w przeglądarce?
Joanna Brzozowska
[email protected]


Slide 21

Tabele
 Współcześnie panuje tendencja odchodzenia od

stosowania tabel w charakterze szkieletu stron
 Obecnie tabelom przypisuje się wyłącznie rolę
pojemnika dla danych tabelarycznych, natomiast
układy stron budowane są z użyciem pojemników
(bloków, warstw) div, formatowanych za pomocą
kaskadowych arkuszy stylów CSS.
 Zapewne proces przechodzenia z układów
ramkowych czy tabelarycznych na blokowe będzie
trwać długo i być może nigdy się nie zakończy…

Joanna Brzozowska
[email protected]


Slide 22

What you see is what you get
 WYSIWYG – edytory webmasterskie
 Front Page

Joanna Brzozowska
[email protected]


Slide 23

Korzystanie z podręcznika
 Paweł Wimmer

Joanna Brzozowska
[email protected]


Slide 24

Praca domowa
 Stwórz stronę www, na której umieścisz 3 elementy

samodzielnie stworzone przy pomocy podręcznika.
 Przygotuj szablon swojej strony na papierze oraz
rozrysuj schemat nawigacji.

Joanna Brzozowska
[email protected]