Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

Czym są HTML i XHTML? Skrót HTML pochodzi od słów Hypertext Markup Language (język znakowania hipertekstu). Język HTML jest podstawą każdej strony WWW.

Podobne prezentacje


Prezentacja na temat: "Czym są HTML i XHTML? Skrót HTML pochodzi od słów Hypertext Markup Language (język znakowania hipertekstu). Język HTML jest podstawą każdej strony WWW."— Zapis prezentacji:

1 Czym są HTML i XHTML? Skrót HTML pochodzi od słów Hypertext Markup Language (język znakowania hipertekstu). Język HTML jest podstawą każdej strony WWW. Plik zawierający kod HTML (tzn. plik HTML) jest zwyczajnym plikiem tekstowym. Skrót HTML pochodzi od słów Hypertext Markup Language (język znakowania hipertekstu). Język HTML jest podstawą każdej strony WWW. Plik zawierający kod HTML (tzn. plik HTML) jest zwyczajnym plikiem tekstowym. 1Lekcje XHTML

2 Czym są HTML i XHTML? Skrót WWW (czasem zapisywany jako W3) pochodzi od słów World Wide Web (pajęczyna o światowym zasięgu). Sieć WWW jest pojęciem abstrakcyjnym, składają się na nią strony WWW dostępne na serwerach HTTP całego świata. Skrót WWW (czasem zapisywany jako W3) pochodzi od słów World Wide Web (pajęczyna o światowym zasięgu). Sieć WWW jest pojęciem abstrakcyjnym, składają się na nią strony WWW dostępne na serwerach HTTP całego świata. 2Lekcje XHTML

3 Czym są HTML i XHTML? Coraz częściej stosowana jest nowa odmiana języka – XHTML (ang. Extended HTML, rozszerzony HTML) – dzięki ściślejszym zasadom tworzenia kodu jest łatwiejszy do nauczenia, choć wymaga więcej wysiłku przy tworzeniu kodu. 3Lekcje XHTML

4 Czym są HTML i XHTML? Plik HTML zawiera szereg znaczników składających się na elementy np. Oraz Plik HTML zawiera szereg znaczników składających się na elementy np. Oraz 4Lekcje XHTML

5 Czym są HTML i XHTML? Atrybuty: …..

6 Czym są HTML i XHTML? Znaczniki; przykłady: Treść akapitu pogrubiona i pochylona Bezwzględnie należy pamiętać o tym, by elementy nie przeplatały się., żeby elementy były zamykane w kolejności odwrotnej do kolejności ich otwierania: Dobrze: …. Źle: …. Znaczniki; przykłady: Treść akapitu pogrubiona i pochylona Bezwzględnie należy pamiętać o tym, by elementy nie przeplatały się., żeby elementy były zamykane w kolejności odwrotnej do kolejności ich otwierania: Dobrze: …. Źle: …. 6Lekcje XHTML

7 Wprowadzanie podstawowego kodu strony 7Lekcje XHTML

8 Wprowadzanie podstawowego kodu strony informuje przeglądarkę WWW, że strona została zakodowana z wykorzystaniem języka XHTML, a nie XML Znacznik musi być wprowadzony w jednym wierszu. Deklaracja typu dokumentu informuje przeglądarkę WWW, jak ściśle powinna się trzymać standardu języka HTML w czasie interpretowania kodu HTML strony. informuje przeglądarkę WWW, że strona została zakodowana z wykorzystaniem języka XHTML, a nie XML Znacznik musi być wprowadzony w jednym wierszu. Deklaracja typu dokumentu informuje przeglądarkę WWW, jak ściśle powinna się trzymać standardu języka HTML w czasie interpretowania kodu HTML strony. 8Lekcje XHTML

9 Ustalenie tytułu strony WWW Moja pierwsza strona WWW Moja pierwsza strona WWW 9Lekcje XHTML

10 Ustalenie tytułu strony WWW Moja pierwsza strona WWW … Moja pierwsza strona WWW … 10Lekcje XHTML

11 Wprowadzanie tekstu Oto bardzo prosty akapit tekstu. Zauważ, że niezależnie od tego, jak będziesz rozmieszczał tekst, przeglądarka zawsze sformatuje go tak, aby wypełniał całą szerokość jej okno. 11Lekcje XHTML

12 Deklarowanie sposobu kodowania polskich znaków diakrytycznych Choć przeglądarka Internet Explorer całkowicie poprawnie wyświetliła zawartość strony WWW, nie można liczyć, że inne zrobią to tak samo. W kodzie utworzonej ówcześnie strony brakuje bowiem informacji, w jaki sposób zostały zakodowane polskie znaki diakrytyczne. (po ) Choć przeglądarka Internet Explorer całkowicie poprawnie wyświetliła zawartość strony WWW, nie można liczyć, że inne zrobią to tak samo. W kodzie utworzonej ówcześnie strony brakuje bowiem informacji, w jaki sposób zostały zakodowane polskie znaki diakrytyczne. (po ) 12Lekcje XHTML

13 Zapisywanie fragmentu tekstu czcionką pogrubioną Pogrubienie fragmentu tekstu jest najprostszym sposobem wyróżnienia go na ekranie komputera lub kartce papieru. Język HTML pozwala w niezwykły prosty sposób wyróżnić pogrubionym dowolny fragment tekstu strony. Znacznik odpowiadający pogrubieniu tekstu to Ostatnie dwa wyrazy tego akapitu będą pogrubione. Zamiast elementu możesz użyć elementu. Efekt wizualny w obu przypadkach będzie najczęściej identyczny. Różnica leży w znaczeniu obu elementów: to tylko wyróżnienie wizualne, zaś wzmacnia tekst również logicznie. Pogrubienie fragmentu tekstu jest najprostszym sposobem wyróżnienia go na ekranie komputera lub kartce papieru. Język HTML pozwala w niezwykły prosty sposób wyróżnić pogrubionym dowolny fragment tekstu strony. Znacznik odpowiadający pogrubieniu tekstu to Ostatnie dwa wyrazy tego akapitu będą pogrubione. Zamiast elementu możesz użyć elementu. Efekt wizualny w obu przypadkach będzie najczęściej identyczny. Różnica leży w znaczeniu obu elementów: to tylko wyróżnienie wizualne, zaś wzmacnia tekst również logicznie. 13Lekcje XHTML

14 Zapisywanie fragmentu tekstu czcionką pogrubioną 14Lekcje XHTML

15 Zapisywanie fragmentu tekstu kursywą Kursywa świetnie nadaje się do zapisywania cytatów lub terminów obcojęzycznych. Nie stosuj jej jednak z przesadą, gdyż sprawia, że tekst staje się nieco trudniejszy w czytaniu. Ten fragment tekstu jest zapisany kursywą. Kursywa świetnie nadaje się do zapisywania cytatów lub terminów obcojęzycznych. Nie stosuj jej jednak z przesadą, gdyż sprawia, że tekst staje się nieco trudniejszy w czytaniu. Ten fragment tekstu jest zapisany kursywą. 15Lekcje XHTML

16 Podkreśleniu fragmentu tekstu Podkreślenie fragmentów tekstu powinieneś stosować niezwykle rzadko, a najlepiej nie używać go w ogóle. Podkreślony tekst może zostać pomylony z odnośnikiem służącym do przechodzenia do innych partii tekstu. Jeśli chcesz wyróżnić fragment tekstu, zapisz go pogrubioną czcionką W tym akapicie dokładnie trzy wyrazy zostały podkreślone. Podkreślenie fragmentów tekstu powinieneś stosować niezwykle rzadko, a najlepiej nie używać go w ogóle. Podkreślony tekst może zostać pomylony z odnośnikiem służącym do przechodzenia do innych partii tekstu. Jeśli chcesz wyróżnić fragment tekstu, zapisz go pogrubioną czcionką W tym akapicie dokładnie trzy wyrazy zostały podkreślone. 16Lekcje XHTML

17 Twarde spacje Twarda spacja to pewien szczególny rodzaj spacji (odstępu). Na ekranie niczym się nie różni od zwykłej spacji, jednak wyrazy nią połączone zawsze będą wyświetlane w jednej linii: jeśli pojawią się na końcu linii, to albo zostaną przeniesione oba, albo też razem pozostaną na końcu wiersza. W języku HTML twardej spacji odpowiadają tzw. endecja o postaci. Twarda spacja to pewien szczególny rodzaj spacji (odstępu). Na ekranie niczym się nie różni od zwykłej spacji, jednak wyrazy nią połączone zawsze będą wyświetlane w jednej linii: jeśli pojawią się na końcu linii, to albo zostaną przeniesione oba, albo też razem pozostaną na końcu wiersza. W języku HTML twardej spacji odpowiadają tzw. endecja o postaci. 17Lekcje XHTML

18 Zapisywanie fragmentu tekstu czcionką nieproporcjonalną Najczęściej taką czcionkę stosuje się na stronie WWW, na której ma być zamieszczony fragment kodu programu lub ciąg poleceń systemu operacyjnego. Znaczniki: Aby wyświetlić zawartość katalogu wraz ze szczegółowymi informacjami na temat każdego z plików, użyj polecenia ls -1. Najczęściej taką czcionkę stosuje się na stronie WWW, na której ma być zamieszczony fragment kodu programu lub ciąg poleceń systemu operacyjnego. Znaczniki: Aby wyświetlić zawartość katalogu wraz ze szczegółowymi informacjami na temat każdego z plików, użyj polecenia ls Lekcje XHTML

19 Indeksy górne i dolne Elementu oraz tworząc indeksy górne i dolne nie są często stosowanymi elementami języka HTML, jednak stają się niezastąpione, jeśli musisz zapisać fragment wzoru matematycznego lub formułki chemicznej. Znaczniki: Elementu oraz tworząc indeksy górne i dolne nie są często stosowanymi elementami języka HTML, jednak stają się niezastąpione, jeśli musisz zapisać fragment wzoru matematycznego lub formułki chemicznej. Znaczniki: 19Lekcje XHTML

20 Indeksy górne i dolne 20Lekcje XHTML

21 Zapisywanie większego fragmentu tekstu czcionką nieproporcjonalną Czasem może pojawić się potrzeba umieszczenia na stronie WWW większego fragmentu tekstu zapisanego czcionką nieproporcjonalną – np. fragmentu kodu źródłowego programu albo fragmentu kodu HTML Znacznik -Nie ma sensu stosowania twardej spacji < < >> Czasem może pojawić się potrzeba umieszczenia na stronie WWW większego fragmentu tekstu zapisanego czcionką nieproporcjonalną – np. fragmentu kodu źródłowego programu albo fragmentu kodu HTML Znacznik -Nie ma sensu stosowania twardej spacji < < >> 21Lekcje XHTML Ctrl + spacja

22 Zmiana sposobu wyrównywania akapitu tekstu Przeglądarki standardowo wyrównują akapity tekstu do lewego marginesu. Nic jednak nie stoi na przeszkodzie, by nakazać wyrównywanie akapitu tekstu do prawego marginesu, centrowanie akapitu lub justowanie go (wyrównywanie do obu marginesów). …. text-align: left;do lewego marginesu text-align: right;do prawego marginesu text-align: center;aby wycentrować tekst text-align: justyfy;aby wyrównać tekst do obu marginesów Przeglądarki standardowo wyrównują akapity tekstu do lewego marginesu. Nic jednak nie stoi na przeszkodzie, by nakazać wyrównywanie akapitu tekstu do prawego marginesu, centrowanie akapitu lub justowanie go (wyrównywanie do obu marginesów). …. text-align: left;do lewego marginesu text-align: right;do prawego marginesu text-align: center;aby wycentrować tekst text-align: justyfy;aby wyrównać tekst do obu marginesów 22Lekcje XHTML

23 Łamanie tekstu wewnątrz akapitu Czasem może Ci być potrzebne przerwanie biegu tekstu wewnątrz akapitu i rozpoczęcie dalszej części do kolejnej linii. Ten akapit znajduje się w trzech różnych wierszach. A ten akapit w całości w jednym wierszu. Widzisz różnicę? Czasem może Ci być potrzebne przerwanie biegu tekstu wewnątrz akapitu i rozpoczęcie dalszej części do kolejnej linii. Ten akapit znajduje się w trzech różnych wierszach. A ten akapit w całości w jednym wierszu. Widzisz różnicę? 23Lekcje XHTML

24 Zmiana koloru treści i tła akapitu Mechanizm kaskadowych arkuszy stylu umożliwia zmianę kolorów dowolnego elementu języka HTML. Najczęściej pojawia się potrzeba zmiany kolorów tekstu oraz całej strony. Mechanizm kaskadowych arkuszy stylu umożliwia zmianę kolorów dowolnego elementu języka HTML. Najczęściej pojawia się potrzeba zmiany kolorów tekstu oraz całej strony. 24Lekcje XHTML

25 Zmiana koloru treści i tła fragmentu tekstu. Za pomocą atrybutu style elementu możesz zmienić kolor tekstu i tła całej strony lub całego akapitu tekstu, nie masz jednak możliwości pokolorowania pojedynczych słów lub zdań. Za pomocą atrybutu style elementu możesz zmienić kolor tekstu i tła całej strony lub całego akapitu tekstu, nie masz jednak możliwości pokolorowania pojedynczych słów lub zdań. 25Lekcje XHTML

26 Zmiana rozmiaru czcionki Rozmiar czcionki podawany jest w punktach (pt). Jeden punkt odpowiada około 1/72 części cala, zaś jeden cal (1) to 25,4 mm. Czcionka pomniejszona Czcionka powiększona Rozmiar czcionki podawany jest w punktach (pt). Jeden punkt odpowiada około 1/72 części cala, zaś jeden cal (1) to 25,4 mm. Czcionka pomniejszona Czcionka powiększona 26Lekcje XHTML

27 Zmiana kroju pisma Przy wyborze pisma masz do dyspozycji wszystkie kroje zainstalowane na Twoim komputerze. Pamiętaj jednak, że inni użytkownicy nie muszą nimi dysponować! serif – czcionka szeryfowa, np. Tomes New Roman, sans-serif – czcionka bezszeryfowa, np. Arial, Cursive oraz fantasy – ozdobne czcionki pochyłe (rzadko używane, gdyż każda przeglądarka może podstawić w ich miejsce całkowicie inne kroje pisma – często w ogóle nieprzystające do zamysłu autora strony), Mono – czcionka nieproporcjonalna Przy wyborze pisma masz do dyspozycji wszystkie kroje zainstalowane na Twoim komputerze. Pamiętaj jednak, że inni użytkownicy nie muszą nimi dysponować! serif – czcionka szeryfowa, np. Tomes New Roman, sans-serif – czcionka bezszeryfowa, np. Arial, Cursive oraz fantasy – ozdobne czcionki pochyłe (rzadko używane, gdyż każda przeglądarka może podstawić w ich miejsce całkowicie inne kroje pisma – często w ogóle nieprzystające do zamysłu autora strony), Mono – czcionka nieproporcjonalna 27Lekcje XHTML

28 Zmiana kroju pisma 28Lekcje XHTML

29 Tworzenie nagłówka Dokument zapisany w języku HTML, oprócz treści i wyglądu, musi mieć również zakodowaną w sobie strukturę dokumentu. 29Lekcje XHTML KodTyp elementu … Nagłówek pierwszego rzędu … Nagłówek drugiego rzędu … Nagłówek trzeciego rzędu … Nagłówek czwartego rzędu … Nagłówek piątego rzędu

30 Wstawianie poziomej linii Choć oferowana przez język HTML możliwość wstawiania na stronie WWW poziomej linii oddzielającej fragmenty tekstu straciła na znaczeniu w dobie wszechobecnej grafiki, nadal może być Ci czasem potrzebna. Na niektórych prostszych stronach WWW taka linia wcale nie wygląda źle! Pierwsze zdanie Zdanie oddzielone linią Choć oferowana przez język HTML możliwość wstawiania na stronie WWW poziomej linii oddzielającej fragmenty tekstu straciła na znaczeniu w dobie wszechobecnej grafiki, nadal może być Ci czasem potrzebna. Na niektórych prostszych stronach WWW taka linia wcale nie wygląda źle! Pierwsze zdanie Zdanie oddzielone linią 30Lekcje XHTML

31 Zmiana wyglądu poziomej linii Standardowy wygląd poziomej linii reprezentowanej przez nie jest zbyt elegancki. Na szczęście, język HTML – a dokładnie mechanizm kaskadowych arkuszy stylu – daje Ci szeroki wachlarz możliwości zmiany wyglądu tego elementu. (wszystko wpisujemy pomiędzy … ) Standardowy wygląd poziomej linii reprezentowanej przez nie jest zbyt elegancki. Na szczęście, język HTML – a dokładnie mechanizm kaskadowych arkuszy stylu – daje Ci szeroki wachlarz możliwości zmiany wyglądu tego elementu. (wszystko wpisujemy pomiędzy … ) 31Lekcje XHTML


Pobierz ppt "Czym są HTML i XHTML? Skrót HTML pochodzi od słów Hypertext Markup Language (język znakowania hipertekstu). Język HTML jest podstawą każdej strony WWW."

Podobne prezentacje


Reklamy Google