Na dobry początek… Godziny spotkań: Krótkie BHP

Na dobry początek… Godziny spotkań: Krótkie BHP
Poniedziałek Wtorek Piątek 16: Krótkie BHP Materiały w formie papierkowej(jeśli się uda) Pytać, pytać, pytać……

Co na kursie?? Dzisiaj wprowadzenie (raczej bez komputerów) Później:
Zabawa z tekstem Grafika na stronie (w tym odsyłacze graficzne) Tabele Style CSS Ramki i ramki pływające Formularze i przyciski Umieszczanie stron w Sieci Wstęp do PHP JavaScript Dźwięk na stronie, publikacje elektroniczne w formacie PDF

Przykładowy dokument HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso "> <META NAME="Description" CONTENT="Strona przykladowa"> <META NAME="Keywords" CONTENT="przykład,strona przykladowa"> <META NAME="Author" CONTENT="Marcin Włodarz"> <META HTTP-EQUIV="Content-Language" CONTENT="pl"> <TITLE>Stronka przykladowa</TITLE> </HEAD> <BODY> Stronka przykladowa </BODY> </HTML>

Przykładowy dokument HTML

Co to jest właściwie HTML?(1)
HTML (ang. HyperText Markup Language, hipertekstowy język znaczników) to język programowania składający się ze znaczników (ang. tags) stosowany do pisania stron WWW. Powstał w 1981r. Ostatnią wersją HTML’a jest wersja 4.01, próbująca wydzielić zarządzanie wyglądem strony do kaskadowych arkuszy stylów CSS (będziemy omawiać później) Specyfikacja języka: Dokument HTML jest niczym innym jak plikiem tekstowym, w którym to co chcemy w jakiś sposób wyświetlić w przeglądarce oznaczamy tagami Tagi to nawiasy „trójkątne” Otwierający <> Zamykający </>

Co to jest właściwie HTML?(2)
Pliki HTML mają rozszerzenie .html lub .htm Otwierane są automatycznie przez przeglądarki internetowe: Internet Explorer Mozilla Firefox Inne… Warto nazwać stronę główna index.html lub index.htm, ze względu na fakt, że będzie ona automatycznie wyświetlana przez przeglądarkę po wpisaniu adresu URL

Tagi Tagi mówią nam, jak ma być wyświetlany tekst zawarty między nimi
Marcin - pogrubi tekst Marcin - pogrubi i pochyli tekst Kolejność otwierania i zamykania tagów: ….. - poprawnie …… - niepoprawnie, jednak rozumiane przez przeglądarkę, należy unikać …… - niepoprawnie, niezamknięty tag Wielkość liter w tagach jest obojętna Tagów jest kilkadziesiąt … trzeba je znać na pamięć 

Ogólna osnowa dokumentu(1)
<HTML> <HEAD> informacje nagłówkowe </HEAD> <BODY> właściwa treść (ciało) dokumentu </BODY> </HTML> Cały dokument powinien być objęty parą znaczników <HTML> </HTML>. Między nimi powinna zaś się znaleźć para znaczników <HEAD> </HEAD>, która stanowi ramy dla informacji nagłówkowych. Pozostałe informacje powinny być objęte z kolei znacznikami <BODY> </BODY>

<HTML> </HTML> - otwierający i zamykający znacznik dokumentu, a między nimi jest umieszczana cała treść. Znacznik nie jest bezpośrednio widoczny w przeglądarce <HEAD> </HEAD> - umieszczany wewnątrz znaczników HTML i sam zawiera podstawowe informacje o dokumencie, w pierwszym rzędzie tytuł strony. W ramach tego znacznika jest umieszczana tzw. część nagłówkowa <BODY> </BODY> - znacznik umieszczany wewnątrz znaczników HTML, za znacznikami HEAD. Zawiera konkretną treść dokumentu.

Między znacznikami <HEAD> i </HEAD> powinno się znaleźć polecenie <TITLE> </TITLE> TITLE nie oznacza tytułu na stronie. Zawarta między tymi znacznikami treść ukaże się w pasku tytułowym przeglądarki, a nie w dokumencie <TITLE>Stronka przykladowa</TITLE>

STRONA KODOWA DOKUMENTU Zalecane stosowanie strony kodowej ISO (czyli ISO Latin 2) <meta http-equiv="content-type" content="text/html; charset=iso "> Czyli….

<HTML> <HEAD> <META http-equiv="content-type" content="text/html; charset=iso "> <TITLE> Tytuł strony </TITLE> </HEAD> <BODY> właściwa treść (ciało) dokumentu </BODY> </HTML> Pojawiło się nowe pojęcie… „Znacznik META”

Kodowanie i znaczniki META
W dokumentach powinniśmy stosować standard kodowania polskich liter ISO Jest to międzynarodowy standard, przyjęty także w charakterze Polskiej Normy Umieszcza się ją w części nagłówkowej <HEAD> <meta http-equiv="content-type" content="text/html; charset=iso "> </HEAD> Często stosuje się w dokumentach WWW specjalny prolog, który identyfikuje poziom używanego języka HTML Wstawiany PRZED otwarciem szkieletu strony, czyli znacznikiem <HTML> Jeśli dokument jest zgodny ze specyfikacją HTML 4.0, powinniśmy stosować prolog: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> Prolog jest m.in. wykorzystywany jako oznaczenie poziomu w procesie weryfikacji poprawności składni za pomocą tzw. parserów.

Znaczniki META … (można zapomnieć)
Jest to opcjonalne polecenie, które bardziej szczegółowo informuje o zawartości dokumentu, np. dla celów katalogowych czy indeksów, wykorzystywanych przez odpowiednie programy, np. wyszukiwarki internetowe Zawiera 3 atrybuty: HTTP-EQIUV – definiuje zmienne systemowe NAME – definiuje zmienne użytkownika CONTENT W kombinacji pierwszy z trzecim lub drugi z trzecim Kilka przykładów… Znaczników META nie trzeba pamiętać. Edytory HTML po kliknięciu opcji „nowy dokument” wstawiają szablon znaczników (<HTML><HEAD><TITLE><META><BODY>…); należy jedynie wypełnić odpowiednie dane (dane tworzącego stronę i tym podobne) O edytorach troszkę później

Znaczniki META… cd <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=iso "> polecenie jest deklaracją strony kodowej dokumentu (czyli polskich ogonków) <META NAME ="Description" CONTENT="jakaś tam treść"> opis zawartości strony ( znaków) <META NAME="Keywords" CONTENT="jakieś wyrazy kluczowe"> Informuje o wyrazach kluczowych dokumentu; wyrazy są oddzielane przecinkami; ułatwia to pracę wyszukiwarkom <META NAME="Language" CONTENT="pl"> Informacja o języku strony <META NAME="Author" CONTENT="imię i nazwisko"> Informacja o autorze strony Zobaczmy jak to wygląda w praktyce…

Przykład Kodowanie <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso "> <META NAME="Description" CONTENT="Strona o motocyklach"> <META NAME="Keywords" CONTENT="motocykle,motoryzacja"> <META NAME="Author" CONTENT="Marcin Włodarz"> <META HTTP-EQUIV="Content-Language" CONTENT="pl"> <TITLE> Wszystko o motocyklach</TITLE> </HEAD> <BODY> To jest strona o motocyklach </BODY> </HTML> Opis zawartości strony Słowa kluczowe Autor Język To się wyświetli w przeglądarce (pogrubione i przechylone)

Przykład

Stwórzmy pierwszą stronkę
Start->ustawienia->panel sterowania Wybieramy opcje folderów zakładka widok Znajdujemy opcję ukryj rozszerzenia znanych typów plików i ją odznaczamy Na pulpicie klikamy prawym przyciskiem myszki i wybieramy nowy->dokument tekstowy Nadajemy mu nazwę idex.html Wciskamy enter Następnie klikamy prawym przyciskiem myszki na stworzony plik i wybieramy opcję edytuj Otworzy się nam w notatniku pusty dokument. Zaczynamy tworzyć naszą pierwszą stronę…

Pierwsza strona ciąg dalszy
Wpisujemy ręcznie osnowę dokumentu HTML <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> Pomiędzy znacznikami <BODY> wpisujemy dowolny tekst (można użyć znaczników ) Zapisujemy plik (skrót klawiszowy ctrl+s) lub

Pierwsza strona…ciąg dalszy
Zamykamy plik Dwa razy klikamy na niego myszką Otworzy się nam przeglądarka internetowa a w niej ukaże się nasza stronka  Aby zobaczyć kod strony można kliknąć na niej prawym przyciskiem myszki i wybrać opcję „Pokaż źródło strony”

Pierwsza strona…ciąg dalszy
To co się nam pojawi to zawartość (cała) naszego pliku index.html

Edytory Pajączek (darmowy lub prawie darmowy) WebEdit HotDog
MS FrontPage My wybierzemy pajączka, jest to polska dystrybucja, przez wielu uważana za jedną z najlepszych Pajączek 2000 proffesional v.4.8.1

Więcej o <BODY>(1)
Definiując <BODY> możemy wstawić dodatkowo kilka parametrów, które zadecydują o graficznej postaci strony <BODY BACKGROUND="URL albo ścieżka/nazwa_pliku.gif"> Parametr BACKGROUND="obrazek.gif" pozwala wybrać obrazek, który pokaże się w tle dokumentu w przeglądarce. (najlepiej, żeby się znajdował w tym samym katalogu co strona HTML) <BODY BGCOLOR="kolor"> Parametr BGCOLOR="kolor" pozwala wybrać kolor tła dokumentu, który pokaże się w tle dokumentu w przeglądarce. Gdyby był to <BODY BGCOLOR="yellow">, zobaczymy żółte tło <BODY TEXT="kolor"> Parametr TEXT="kolor" pozwala określić kolor tekstu w dokumencie. Wybierając kolor, należy mieć także na uwadze kolor tła <BODY LEFTMARGIN="xx"> lub <BODY TOPMARGIN="xx"> Microsoft Internet Explorer pozwala dodatkowo wprowadzić lewy margines strony. Wartość LEFTMARGIN="xx" spowoduje przesunięcie zawartości dokumentu o xx pikseli w prawo

Więcej o <BODY>(2)
<BODY LINK="kolor1" VLINK="kolor2" ALINK="kolor3"> Możemy również określić kolory odsyłaczy. LINK="kolor" określa standardowy kolor odsyłacza. VLINK="kolor" (visited link) określa kolor odsyłacza, który został co najmniej raz użyty ALINK="kolor" (active link) określa kolor aktywnego odsyłacza Odsyłacz aktywny to odsyłacz w trakcie ładowania dowiązanego do niego dokumentu. Jeśli np. odsyłacz ma standardowo kolor niebieski, w momencie przywoływania dowiązanego dokumentu zmieni na chwilę swój kolor (właśnie zdefiniowany za pomocą ALINK="kolor"), natomiast gdy powrócimy do tej samej strony, zobaczymy, że odsyłacz ma już kolor zdefiniowany za pomocą VLINK="kolor", jako już co najmniej raz wizytowany Przykład: <BODY LINK="blue" VLINK="red" ALINK="yellow">

Kolory Pokolorujmy naszą stronę Black Olive Red Blue Yellow Green
White <-white Aqua Silver Edytory takie jak Pajączek posiadają paletę kolorów i można wybrać kolor za pomocą myszki. Należy jednak znać podstawowe nazwy kolorów. Pokolorujmy naszą stronę

Przykład <HTML> <HEAD> </HEAD>
<BODY BGCOLOR="blue" Text="white" LEFTMARGIN="200" TOPMARGIN="100"> Elemeledutki </BODY> </HTML>

Przykład cd.

Co to są podstrony? Czyli wstęp do odsyłaczy (hiperłączy)
Wszystkie serwisy internetowe składają się z pewnej liczby podstron, a nie tylko z jednej, bardzo długiej, strony głównej. Każda podstrona to po prostu osobny plik (z rozszerzeniem *.html lub *.htm), który tworzy się w taki sam sposób, jak stronę główną (przy użyciu szablony przedstawionego wcześniej) Składnia odsyłacza do podstrony (w obrębie tego samego serwisu) jest następująca: <A HREF="względna ścieżka dostępu do podstrony">opis odsyłacza</A> Odsyłacz do adresu internetowego <A HREF="adres internetowy">opis odsyłacza</A> Odsyłacz pocztowy <A HREF="mailto:adres poczty ">opis odsyłacza</A> Przykład

Przykład <HTML> <HEAD> </HEAD>
<BODY BGCOLOR="green" Text="white" LEFTMARGIN="200" TOPMARGIN="100"> Elemeledutki <A HREF=" z <A do mnie…</A> </BODY> </HTML>

Przykład Po najechaniu na odsyłacz kursor przyjmie postać rączki

Pajączek Podgląd strony Ciało dokumentu

Pajączek (2) Edytor sam dba o zamykanie tagów
Zawiera „ściągę” znaczników Zawiera paletę kolorów Umożliwia tworzenie strony w trybie graficznym

Zabawa z tekstem (1) Przykład Akapit 
Stosując akapity, możemy skorzystać z kilku metod wyrównywania tekstu na stronie (czyli jego ustawienia): … … … … Tytuł <Hn></Hn>, gdzie n=1,…,6 Służy nadaniu części dokumentu (rozdziałowi) jakiegoś tytułu (nagłówka) H1 tytuł pierwszego rzędu H6 tytuł szóstego rzędu Przykład

Zabawa z tekstem (2) <HTML> <HEAD> </HEAD>
<BODY BGCOLOR="blue" Text="white" LEFTMARGIN="200" TOPMARGIN="100"> To jest pierwszy akapit wysrodkowany To jest drugi akapit wyrownany do prawej <H1>To jest tytuł pierwszego rzędu </H1> <H2>To jest tytuł drugiego rzędu </H2> <H6>To jest tytuł szostego rzędu </H6> </BODY> </HTML>

Zabawa z tekstem (3)

Zabawa z tekstem (4) Dymek narzędziowy Stosując polecenie: <Hn title="Tu opis">...</Hn>, możemy wprowadzić opis, który będzie się pojawiał, gdy przesuniemy wskaźnik myszki na dany tytuł. Atrybut ten (title="...") można stosować praktycznie w stosunku do wszystkich znaczników HTML Koniec linii (enter) Pogrubienie kursywa i podkreślenie Aby wyświetlić tekst podkreślony linią innego koloru jak sam tekst To jest czarne podkreślenie czerwoną linią Czcionka migająca (tylko mozilla firefox) <BLINK></BLINK> Czcionka przekreślona <STRIKE></STRIKE> Indeks górny

Zabawa z tekstem (5) Indeks dolny 
Duża czcionka +1 punkt <BIG></BIG> Mała czcionka -1 punkt Czcionka mocno wyróżniona Czcionka Dzięki temu poleceniu, możesz określić wiele parametrów dotyczących pisanego tekstu (szerzej za chwilę)

Zabawa z tekstem (6) Dalekopis <TT></TT> Cytat
Pozwala wprowadzić do dokumentu tekst, napisany czcionką monotypiczną, czyli o stałej szerokości znaku (efekt dalekopisu). Cytat Odniesienie do źródła: <CITE></CITE>; zwykle napisane kursywą. Można w nim umieścić imię i nazwisko autora, którego cytujemy lub tytuł książki do której się odwołujemy Krótki cytat <Q></Q>; Przeglądarki zwykle automatycznie ujmują tekst tego znacznika w znaki cudzysłowu dlatego nie należy wstawiać dodatkowych cudzysłowów ręcznie. Umieszcza się w nim treść krótkich cytatów, które nie zawierają żadnych akapitów. Jeśli chcemy zacytować dłuższy fragment tekstu z kilkoma paragrafami, powinniśmy wykorzystać znacznik <BLOCKQUOTE>.

Przykład <CITE>Albert Einstein</CITE> powiedział: <Q>Dwie rzeczy nie mają granic: wszechświat i ludzka głupota.</Q>

Zabawa z tekstem (7) Blok cytowany <BLOCKQUOTE>...</BLOCKQUOTE> Wprowadza blok cytowany, którego możemy użyć np. gdy powołujemy się na jakieś źródła. Każdy wiersz w bloku cytowanym rozpoczyna się zwykle tabulatorem (wcięciem). Można go używać do zacytowania jakiegoś większego fragmentu, który ciągnie się przez wiele linijek. Adres <ADDRESS>…</ADDRESS> Wprowadza blok adresu, którego możemy użyć gdy podajemy na stronie swój własny lub jakiś inny adres. Blok taki nie uwzględnia tabulatorów, dodatkowych spacji ani znaków końca linii. W przeglądarkach najczęściej jest automatycznie napisany czcionką. Treść wstawiona i usunięta <INS>…</INS><DEL>…</DEL> Pozwala podać informację o wprowadzonych na stronie zmianach. Jeśli ostatnio dodane zostały jakieś nowe rozdziały, aby o tym zakomunikować, opis tych zmian można wpisać do znacznika <ins> (taki tekst może zostać automatycznie podkreślony). Natomiast do znacznika <del> wpisujemy opis usuniętych rozdziałów, które nie są już dostępne (zwykle tekst przekreślony).

Zabawa z tekstem (8) Wykazy gdzie rodzaj Wypunktowanie
<ul type = „rodzaj”> <li> Punkt pierwszy </li> <li> Punkt drugi </li> <li> Punkt trzeci </li> </ul> gdzie rodzaj disc – koło (domyślny) circle – okrąg square – wypełniony kwadrat

Zabawa z tekstem (9) Stosując pewną "sztuczkę", można uzyskać wykaz, którego wyróżniki (markery) będą miały inny kolor niż reszta tekstu: <ul style="color: red"> <li>Punkt pierwszy</li> <li>Punkt drugi</li> <li>Punkt trzeci</li> </ul>

Zabawa z tekstem (10) Wykazy cd
Numerowany <OL type = „rodzaj numeracji”> <LI> Punkt pierwszy </LI> <LI> Punkt drugi </LI> <LI> Punkt trzeci </LI> </OL> gdzie jako "rodzaj numeracji" należy podać: "1" (domyślny) - numeracja według liczb arabskich "I" - według dużych liczb rzymskich "i" - według małych liczb rzymskich "a" - według małych liter "A" - według dużych liter

Przykład

Pozioma linia <HR> Pozbawiona cienia - <HR NOSHADE>
O ustalonym rozmiarze (grubości) <HR SIZE=5> O ustalonej długości w pikselach <HR WIDTH=300> O ustalonej długości w % szerokości strony <HR WIDTH=50%> Można ją pozycjonować <HR ALIGN=…> O ustalonym kolorze <HR COLOR=„nazwa koloru”>

Obramowanie <FIELDSET>… </FIELDSET>
Wprowadza obramowanie wokół wybranego fragmentu tekstu Polecenie to często stosuje się wraz z: <LEGEND>...</LEGEND>, co pozwala podać tytuł ramki. Po wpisaniu: <FIELDSET> <LEGEND> OPIS </LEGEND> Jakiś tekst </FIELDSET>

Komentarz 
Tekst ignorowany przez przeglądarkę. Zazwyczaj zapisuje się w komentarzach informację dla nas, jako tworzących stronę, np.:

Czcionka (wielkość) Wielkość czcionki Czcionka bazowa (aktualna)
(bezwzględna) …, gdzie n oznacza wielkość pisma (1-najmniejsza, 7-największa, 3-domyślna) (względna) …, gdzie +n oznacza czcionkę o n większą od aktualnej. Analogicznie –n. Czcionka bazowa (aktualna) <BASEFONT SIZE=„x”> Oznacza ono, że od tego momentu czcionka podstawowa będzie miała wielkość x, a wszystkie zmiany będą się odnosiły do tej wielkości. Gdy x=5, <BIG> wprowadzi czcionkę o wielkości 6, - o wielkości 4, zmniejszy czcionkę do 2 punktów itd. Polecenie niepożądane; zalecane niestosowanie;

Czcionka (kolor i rodzaj)
... Rodzaj ... lub ... gdzie zamiast "rodzaj, rodzaj1, rodzaj2..." należy wpisać rodzaj czcionki (np.: Arial, 'Courier New', 'Times New Roman', Verdana i inne). Jeżeli nazwa czcionki składa się z kilku wyrazów, to w przypadku drugiego polecenia należy ją objąć w znaki apostrofu np.: ...

Podział znaczników Znaczniki formatujące - mają za zadanie tylko i wyłącznie zmienić wygląd tekstu, który obejmują, bez żadnego odniesienia do znaczenia tego tekstu. Są to np.: CENTER (wyśrodkowanie), B (pogrubienie), I (pochylenie)… Użycie tych znaczników gwarantuje, że w każdej sytuacji tekst otrzyma określone formatowanie (wygląd), ale nic nie mówi o charakterze tego tekstu. Innymi słowy: nie wiemy, czy tekst jest pogrubiony dlatego, że zawiera ważny termin, który powinien się wyróżniać, czy może dlatego, że autor strony chciał w tym miejscu po prostu wprowadzić czcionkę pogrubioną, bo akurat dobrze komponuje się z innymi elementami strony. Znaczniki semantyczne - określają charakter (znaczenie) tekstu, który obejmują. Zwykle niosą ze sobą również odpowiednie formatowanie, ale nie jest to wymagane. Są to np.: Hn (tytuł), STRONG (mocne wyróżnienie), Q (cytat). Są wykorzystywane przez syntezatory mowy Przez roboty wyszukiwarek sieciowych

Na dobry początek… Godziny spotkań: Krótkie BHP

Podobne prezentacje

Prezentacja na temat: "Na dobry początek… Godziny spotkań: Krótkie BHP"— Zapis prezentacji:

Podobne prezentacje

О projekcie

Zwrotny adres

Wejść

Zaloguj się poprzez sieć społeczną:

Na dobry początek… Godziny spotkań: Krótkie BHP

Podobne prezentacje

Prezentacja na temat: "Na dobry początek… Godziny spotkań: Krótkie BHP"— Zapis prezentacji:

Podobne prezentacje

О projekcie

Zwrotny adres