Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

Opracowała: Iwona Kowalik. HTML to język, w którym tworzone są strony WWW. Strony te umożliwiają reklamę firmy lub osoby, tworzenie formularzy, opracowywanie.

Podobne prezentacje


Prezentacja na temat: "Opracowała: Iwona Kowalik. HTML to język, w którym tworzone są strony WWW. Strony te umożliwiają reklamę firmy lub osoby, tworzenie formularzy, opracowywanie."— Zapis prezentacji:

1 Opracowała: Iwona Kowalik

2 HTML to język, w którym tworzone są strony WWW. Strony te umożliwiają reklamę firmy lub osoby, tworzenie formularzy, opracowywanie gazetek i stron o dowolnej tematyce, popularyzację swoich zainteresowań i zdobywanie nowych znajomych. Skrót HTML oznacza HyperText Markup Language – język hipertekstowego znakowania. Charakterystyczne dla tego języka są tzw. znaczniki (polecenia), czyli informacje zawarte w nawiasach kątowych <>. W nawiasach tych definiujemy elementy strony lub sposób ich formatowania.

3 Aby zobaczyć przykład kodu, w którym zapisano daną stronę WWW należy w przeglądarce wybrać opcję Widok/Źródło. Postać źródłowa to po prostu plik tekstowy, do którego nazwy dołączono przedłużenie.html lub.htm. Jeden plik w języku HTML opisuje jedną stronę. Kilka stron tworzy prezentację WWW. Gdy wyświetlimy kod źródłowy strony WWW zobaczymy szeregi poleceń języka HTML umieszczonych w nawiasach kątowych, czyli znaczników, które występują najczęściej w parach:,. Ukośnik / odróżnia znacznik zamykający od otwierającego. Wyjątkami, czyli znacznikami występującymi pojedynczo są: - znacznik akapitu, (stosujemy go by rozpocząć nowy akapit) - znaczni nowego wiersza - znacznik umożliwiający dodanie na stronie linii poziomej

4 Przykład kodu źródłowego:

5 Jeżeli strona ma być umieszczona w Internecie należy przestrzegać zasad nazywania plików: Nie używamy polskich znaków (ą, ć, ż itp.) Nie używamy w nazwach plików spacji Używamy tylko małych liter

6 ELEMENTY STRONY to zazwyczaj dwie części: nagłówek i treść ( w języku angielskim te elementy to head i body). Znaczniki i informują o tym, że wszystko co znajduje się między nimi jest dokumentem HTML. Każdą nową stronę zawsze rozpoczynamy znacznikiem i kończymy. Para i wyznacza nagłówek, a między nimi wpisujemy kod definiujący tytuł strony. W nagłówku umieszcza się specjalne znaki opisujące m.in. kodowanie znaków specyficznych dla danego języka, informacje o autorze strony, informacje dla wyszukiwarek (np. słowa kluczowe). Powinno się ty znaleźć wyrażenie: Tytuł strony, które definiuje tytuł strony pojawiający się na pasku tytułowym przeglądarki. Para i wyznacza podstawową treść strony: tekst, obrazy, hiperłącza i inne obiekty, które zamieszcza autor. Dla komputera nie ma znaczenia czy używamy małych, czy wielkich liter w zapisie znaczników.

7 Kod strony w języku HTML będziemy opracowywać w Notatniku i zapisywać w pliku z rozszerzeniem.htm lub.html. Aby obejrzeć efekt otwieramy ten plik w przeglądarce internetowej. Przykład: Po wpisaniu w Notatniku poniższego kodu: Moja strona testowa To moja strona testowa. Spróbuję wykonywać na niej pierwsze ćwiczenia z języka HTML. Ciekawe co z tego będzie? otrzymujemy w przeglądarce następujący wynik:

8 Nagłówki dzielą tekst na części i służą zwróceniu uwagi czytelnika. Aby zapisać test jako nagłówek należy go ująć między znaczniki nagłówka: tekst nagłówka. Znaczniki nagłówka powiększają i pogrubiają tekst. Do dyspozycji mamy sześć poziomów nagłówka, choć projektanci polecają użycie głownie nagłówków drugiego i trzeciego poziomu ( znaczniki i oraz i ), ponieważ stosowanie znaczników i powoduje zbyt duże powiększenie, natomiast tekst między znacznikami i, i oraz i ma rozmiar bliski normalnemu tekstowi.

9 Przykład: Po wpisaniu do Notatnika kodu: Moja strona testowa STRONA POŚWIĘCONA KOTOM I KOTKOM Kot to słowo o wielu znaczeniach. Może oznaczać zwierzę domowe ale równie dobrze dzikiego drapieżnika. Kotem nazywa się czasem zająca. Inne znaczenia kota to m.in. rodzaj kotwicy albo kwiatostan wierzby. KOT JAKO ZWIERZĘ Definicja Felidae, rodzina ssaków z rzędu drapieżnych, odznaczających się smukłym i zręcznym ciałem oraz miękką sierścią. Podział kotów Do rodziny kotowatych należą dzikie koty oraz koty domowe towarzyszące ludziom. Przykłady kotów Koty dzikie: lew, tygrys, lampart, gepard, serwal, jaguar, puma Lwy Lwy żyją na trawiastych równinach lub wśród ciernistych zarośli. Kilkaset osobników pozostało w jedynym rezerwacie w Indiach, pozostałe żyją w Afryce. otrzymamy w przeglądarce:

10

11 Tak jak w edytorach tekstu również w języku HTML można podzielić tekst na akapity. Przy wyświetlaniu strony w przeglądarce, akapity zostaną rozdzielone dodatkową przestrzenia. Aby utworzyć akapit stosujemy znaczniki i. Możemy pominąć znacznik kończący akapit. Każdy akapit możemy wyrównać na wybrany spośród niżej wymienionych sposób: Podobnie jak akapity możemy wyrównywać nagłówki (tytuły), dodając do znacznika atrybut ALIGN=rodzaj wyrównania. Akapit wyrównany do lewej strony Akapit wyrównany do prawej strony Akapit wyśrodkowany Akapit wyjustowany

12 FORMATOWANIE TEKSTU W JĘZYKU HTML Do formatowania tekstu używamy w HTML–u następujących znaczników: Test pogrubiony Kursywa Tekst podkreślony Tekst przekreślony lub Indeks górny Indeks dolny Tekst zapisany czcionką o stałej szerokości Tekst zapisany nieco większą czcionką Tekst zapisany nieco mniejszą czcionką Zmiana koloru tekstu Zmiana wielkości tekstu Zmiana kroju pisma

13 Przykład: W poprzednio użytym kodzie dodamy znaczniki formatujące tekst. Definicję zapiszemy kursywą, a nazwy poszczególnych gatunków zapiszemy pogrubioną czcionką. Ponadto pierwszy nagłówek zostanie wyśrodkowany poprzez dodanie znaczników,.

14 Otrzymaliśmy następujący wynik:

15 Przy ustalaniu czcionki dla tekstu na naszej stronie należy unikać egzotycznych krojów pisma, ponieważ na innym komputerze może ich brakować. Z tego powodu należy podawać nie jeden krój, ale najlepiej listę alternatywnych krojów rozdzielonych średnikami, np.: nasz tekst

16 RYSUNKI I ZDJĘCIA Dzięki wstawianiu obrazków i zdjęć strony WWW stają się bardziej atrakcyjne i ciekawsze. Należy pamiętać o tym, że strona zwierająca duże ilości grafiki dłużej się otwiera, co może zniechęcić ewentualnego gościa naszej strony. Wstawiana grafika powinna być zapisana w pliku typu GIF lub JPEG, ponieważ właściwie wszystkie przeglądarki internetowe umożliwiają oglądanie rysunków zapisanych w tych formatach. Aby wstawić rysunek stosujemy znacznik:, gdy mamy rysunek w naszym komputerze lub:, gdy znamy jego URL. Bardzo ważne jest to by podać dokładne położenie rysunku w komputerze (poprawność ścieżki dostępu)! Aby skrócić ścieżkę dostępu należy obraz umieścić w tym samym katalogu, w którym znajduje się nasza strona. UWAGA! ZNACZNIK NIE MA POSTACI ZAMYKAJĄCEJ!

17 Obrazy można wstawiać w odrębnym akapicie lub wewnątrz tekstu. Gdy wstawiamy obraz wewnątrz tekstu znacznik musi być umieszczony wewnątrz odpowiedniego znacznika. Obraz może być umieszczony również w nagłówku- wówczas znacznik zapisujemy wewnątrz znaczników nagłówka. Aby wstawić obraz w odrębnym akapicie, umieszczamy znacznik między znacznikami Położenie obrazu ustalamy dzięki następującym atrybutom znacznika : Obraz jest wyświetlany przy lewym marginesie, a tekst pojawia się obok w obszarze między obrazem a prawym marginesem ALIGN=LEFT Obraz jest wyświetlany przy prawym marginesie, a tekst pojawia się obok w obszarze między obrazem a lewym marginesem ALIGN=RIGHT Atrybuty kontrolujące pionowe położenie obrazu względem tekstu, który znajduje się w tym samym wierszu ALIGN=TEXTTOP ALIGN=ABSMIDDLE ALIGN=BASELINE ALIGN=ABSBOTTOM Szerokość ramki wokół obrazu (np. BORDER=6) BORDER

18 Język HTML dysponuje mechanizmem umożliwiającym wyświetlanie komentarza w miejscu przewidzianym na obraz. Przeglądarka automatycznie dokonuje wyboru wyświetlanej treści jeśli pobieranie obrazów jest możliwe i nie zostało zablokowane, komentarz w ogóle nie pojawi się na ekranie; jednak jeśli użytkownik zablokował wyświetlanie obrazów lub też pobranie obrazu z sieci nie powiodło się, na ekranie pojawi się prostokątna ramka z ikoną oraz wprowadzonym wcześniej komentarzem. Opatrzenie komentarzem wszystkich obrazów występujących na stronie jest obowiązkowe. Należy pamiętać o umieszczaniu komentarza już podczas osadzania obrazu na stronie nie będzie trzeba dokonywać późniejszych korekt kodu. Np. aby opatrzyć komentarzem Zdjęcie kota obraz html01.jpg zapisujemy w kodzie źródłowym: Opis ten nie będzie w ogóle widoczny. Na ekranie pojawi się dopiero w przypadku problemów z pobraniem obrazu z sieci lub odczytania go z dysku twardego komputera, na którym się znajduje, na przykład jeżeli poda się złą nazwę lub nie umieści pliku obrazu we właściwym katalogu.

19 Przykład: Jeżeli w tym samym folderze co nasz plik zapiszemy zdjęcie kotka kot.jpg, to może być ono częścią naszej strony. Ustalamy jego położenie po prawej stronie tekstu z ramką o grubości 6 i komentarzem Zdjęcie kota. Wpisujemy zatem pod nagłówkiem H1 kod: Na ekranie zobaczymy:

20 Aby dostosować rozmiary obrazu do naszych potrzeb stosujemy atrybuty WIDTH=szerokość w pikselach lub HIGHT=wysokość w pikselach wstawiane wewnątrz znacznika. Wystarczu użyć jednego z tych atrybutów ponieważ HTML zwiększa lub zmniejsza obraz zachowując proporcje w jego wymiarach.

21 KOLORY Elementom strony WWW można nadawać różne kolory. Można to robić poprzez podawanie określanie angielskiej nazwy koloru lub poprzez podanie wartości koloru w systemie RGB (wartość ta składa się z krzyżyka, trzech liczb zapisanych w systemie szesnastkowym, odpowiadających składowym: czerwonej, zielonej i niebieskiej koloru). Bezpieczniej jest definiować kolory za pomocą notacji RGB niż definiować kolory za pomocą ich nazw, ponieważ nie wszystkie przeglądarki go rozumieją.

22 Znacznika pozwalające zmienić elementy strony WWW: Zmieniany elementZnacznik Kolor tekstu Kolor tła strony Kolor znaków na stronie Kolor nie użytych jeszcze hiperłączy Kolor użytych już hiperłączy Kolor aktywnych hiperłączy Kolor tła tabeli Kolor obramowania tabeli

23 Wartości kolorów w systemie RGB: Nazwa koloruAngielska nazwaWartość w systemie RGB CzarnyBlack# (same zera) SrebrnySilver#C0C0C0 (c zero itd.) SzaryGray# BiałyWhite#FFFFFF KasztanowyMaron# CzerwonyRed#FF0000 CiemnopurpurowyPurple# JasnopurpurowyFuchsia#FF00FF ZielonyGreen# CytrynowyLime#00FF00 OliwkowyOlive# ŻółtyYellow#FFFF00 GranatowyNavy# NiebieskiBlue#0000FF BladoniebieskiAqua#00FFFF CiemnoturkusowyTeal#008080a

24 Przykład: Po wprowadzeniu do znacznika BODY informacji o kolorze tła i tekstu: otrzymujemy bardziej interesującą stronę:

25 Aby utworzyć poziomą linię, np. rozdzielającą tekst natronie stosujemy znacznik. Znacznik ten ma swoje atrybuty, umożliwiające definiowanie grubości, długości i wyrównania linii. LINIA ROZDZIELAJĄCA Określa położenie linii względem okna przeglądarki (po lewej, na środku, po prawej) Określa grubość linii w pikselach lub Określa szerokość linii w pikselach lub w proporcji do szerokości strony

26 HTML pozwala na tworzenie: list uporządkowanych (których elementy są numerowane), poprzez zastosowanie znaczników oraz rozpoczęcie każdego elementu listy od znacznika np. element listy następny element listy ….. listy nieuporządkowanej, której elementy są oznaczone znakiem wypunktowania. Tworzymy je stosując znaczniki i rozpoczynając każdy elementu listy od znacznika np. element listy następny element listy ….. LISTY PODTEMATÓW, LISTY UPORZĄDKOWANE I NIEUPORZĄDKOWANE

27 Przykład: Po wpisaniu kodu strony, którą zapiszemy jako zuzia.html: Moja strona WWW MOJA STRONA WWW Nazywam się Zuzia. Chodzę do szkoły i uwielbiam się uczyć. Moje ulubione przedmioty to: język polski język angielski historia Mam dużo koleżanek i kolegów, np: Mariusz Karolina Basia

28 Otrzymujemy:

29 Hiperłącze to wyróżniony element, po wybraniu którego (np. przez klikniecie na niego myszą) do okna przeglądarki zostaje załadowany nowy dokument. Do tworzenia hiperłączy służy znacznik. Przyjmuje on postać: Treść hiperłącza Treścią hiperłącza może być rysunek lub tekst aktywujący hiperłącze po kliknięciu myszą. Tekst jest zwykle wyświetlany na niebiesko i z podkreśleniem, a rysunek jest otoczony niebieską ramką. Obiektem docelowym jest nazwa lub URL pliku, który ma zostać otwarty przez przeglądarkę. Np. DALEJ - po kliknięciu myszą na tekst DALEJ do przeglądarki zostanie załadowany dokument kotek.html Jeżeli hiperłącze ma nas przenosić do strony zamieszczonej w Internecie poza naszym folderem kod HTML przyjmuje postać: Wirtualna Polska HIPERŁĄCZA

30 KOTWICE WEWNĘTRZNE Przy tworzeniu długich dokumentów zachodzi czasem potrzeba szybkiego przejścia do niektórych miejsc tego dokumentu, np. do pewnego rozdziału. Takiemu przejściu służą w języku HTML tzw. kotwice. Tworzymy je poleceniem:, gdzie nazwa kotwicy to ciąg znaków, do którego będziemy przechodzili. Aby następnie przejść do takiego miejsca, tworzymy hiperłącze poleceniem:, gdzie plik.html, to nazwa pliku, w którym stworzyliśmy kotwicę.

31 JAK W JĘZYKU HTML OPISUJE SIĘ TABELĘ Kod opisujący tabelę zawarty jest wewnątrz elementu. Niestety, olbrzymia elastyczność języka HTML spowodowała, że nie wystarczy utworzyć element, podać liczbę wierszy i kolumn tabeli i rozpocząć wprowadzanie danych. By utworzyć tabelę, konieczne jest utworzenie odrębnych elementów dla każdego wiersza i każdej komórki tabeli! Powoduje to, że tworzenie tabel jest jednym z najbardziej skomplikowanych i frustrujących zadań, przed którymi stają początkujący twórcy stron WWW. Projektując tabele w języku HTML, należy cały czas pamiętać o podstawowej zasadzie: najważniejszym elementem tabeli jest wiersz, który z kolei podzielony jest na komórki. Wierszowi tabeli odpowiada element, a pojedynczej komórce element (w przypadku komórek pełniących funkcję nagłówka) oraz (w przypadku zwykłych komórek danych). Elementy oraz muszą być zawarte w elemencie, a ten z kolei w elemencie.

32 Struktura kodu tabeli wygląda zatem następująco: Projektowanie tabeli najlepiej rozpocząć od… narysowania jej na kartce papieru. Naprawdę. To pozwoli zaoszczędzić sporo czasu, gdyż pomoże w przełożeniu podziału na wiersze i komórki na prawidłowy kod HTML tabeli. Tabele o ustalonej szerokości mają stały rozmiar bez względu na wielkość okna przeglądarki. Szerokość tabeli określa się za pomocą parametru WIDTH, np.. Zamiast wartości wyrażonej w pikselach można posłużyć się wartością procentową, np. pół szerokości ekranu przeglądarki zapiszemy następująco:. Parametr WIDTH podany w poleceniu określa szerokość komórki. Aby określić kolor tła tabeli dodajemy parametr BGCOLOR, np.

33 Przykład: Do wcześniej stworzonej strony zuzia.html dodamy kolejną linię, a pod nią zapiszemy jako nagłówek H2 tekst: Oto moje oceny:. Poniżej zapiszemy tabelę (nie musi mieć obramowania), która zajmuje szerokość 60% strony: Ustawimy oceny na środku poszczególnych komórek, posługując się znacznikami,, które można umieścić między znacznikami i. Ewentualnie poprawimy kolor czcionki lub wstawimy tło dla tabeli. Wyśrodkujemy poszczególne elementy. Język polskiJęzyk angielskiHistoria 5,5,6,5,4,66,5,4,5,6,65,6,5,6,5,6,6,6

34 Uzyskujemy to wpisując kod:

35 A oto efekt naszej pracy:


Pobierz ppt "Opracowała: Iwona Kowalik. HTML to język, w którym tworzone są strony WWW. Strony te umożliwiają reklamę firmy lub osoby, tworzenie formularzy, opracowywanie."

Podobne prezentacje


Reklamy Google