Transcript HTML - Tworzenie stron www
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:
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):
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
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
:
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]
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
- jeden
- dwa
- 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
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]