Pobierz prezentację
Pobieranie prezentacji. Proszę czekać
1
HTML Język opisu strony www
2
Język HTML (Hypertext Markup Language)
należy do grupy języków opisu tekstu, takich jak PostScript, ale pochodzi bezpośrednio od języka SGML (Standard Generalized Markup Language). Powodem, dla którego stworzono SGML, była konieczność łatwego przemieszczania dokumentów DTD (Dokument Type Definition) pomiędzy różnymi środowiskami, a także przenoszenie ich na zupełnie różnych nośnikach. Niezależność od platformy i nośnika została osiągnięta dzięki temu, że w dokumentach SGML jest opisywana jedynie struktura tekstu, a nie jego dokładny wygląd. Niezależność tę przeniesiono również do języka HTML, a to z tego powodu, że w Internecie pracuje ogromna liczba komputerów różnych typów i wyposażonych w różnorodne systemy operacyjne.
3
Język HTML pozwala na odczytywanie dokumentów (stron WWW
Język HTML pozwala na odczytywanie dokumentów (stron WWW*) praktycznie na każdym komputerze i w każdym środowisku; odczytywane są one przez tak zwane przeglądarki. Język HTML nie jest trudny ani do nauczenia się, ani nawet do dobrego opanowania. Na pewno jednak jest dobrym ćwiczeniem w uważnym pisaniu i logicznym myśleniu. Prawdę mówiąc, w kilka minut można napisać i udostępnić prostą stronę HTML.
4
Należy jednak wiedzieć, że różne firmy stosują dla swych przeglądarek pewne rozszerzenia języka HTML. Powoduje to, że niektóre strony WWW - bardzo atrakcyjne - oglądane w jednej przeglądarce, w innej mogą być nieczytelne. Można powiedzieć, że HTML jest językiem Internetu. Popularnie zwany jest on hypertextem, co w wolnym przekładzie znaczy "coś więcej niż tekst". W praktyce między innymi oznacza to, że w swoim dokumencie możesz umieścić odnośniki do innych stron WWW lub innych usług dostępnych w Internecie.
5
Tworzenie dokumentów HTML
Dokument HTML możesz tworzyć używając dowolnego prostego edytora tekstów takiego jak Notatnik dla Windows. Nigdy nie stosuj edytorów formatujących tekst. Formatujesz go posługując się znacznikami HTML. Przed rozpoczęciem pracy musisz mieć wizję przyszłego dokumentu. UWAGA - WAŻNE: Pamiętaj, że dokument HTML musi mieć rozszerzenie HTM lub HTML. np.: Omnie.htm lub Omnie.html
6
Znaczniki w języku HTML
Znaczniki są niczym innym jak rozkazami umieszczanymi między znakami < a > określającymi w jaki sposób przeglądarka powinna wyświetlać zawartość dokumentu. Dla przeglądarki jest obojętne czy znaczniki wpisywane są wielkimi, czy małymi literami. Większość znaczników występuje parami. Parę taką tworzą znaczniki otwierające np.: <B> i zamykające np.: </B> . Między tymi znacznikami umieszcza się treść, do której one się odnoszą. Przykład: <B>treść objęta znacznikami</B> Zwróć uwagę na brak nadmiernych spacji pomiędzy objętym tekstem a nawiasami trójkątnymi.
7
Atrybuty Wiele znaczników posiada dodatkowe atrybuty, które precyzują wpływ znacznika na objęty tekst. Atrybuty wpisywane są pomiędzy słowo kluczowe a znak > . Stosować można kilka atrybutów do jednego znacznika, pisze się je jeden po drugim oddzielając spacją. Przykład: <TABLE BORDER> Tu znacznik <TABLE> posiada atrybut BORDER, określa on dokładniej żądaną funkcję. Atrybut oddzielony jest od znacznika spacją.
8
Poniżej przedstawiony jest sposób w jaki należy
rozpocząć i zakończyć dokument HTML <html> treść dokumentu </html> Znacznik <html> informuje przeglądarkę, że jest to dokument HTML. Jest on znakiem rozpoczynającym. Natomiast znacznik </html> jest znakiem końca dokumentu HTML. Znaczniki umieszcza się między znakami < > . Większość znaczników występuje parami, tak jak <html> i </html>.
9
Znaczniki HEAD i BODY Między znacznikiem HEAD a /HEAD
umieszcza się informacje między innymi o adresie danej strony, o sposobie kodowania znaków itd. Jedynym elementem widocznym w przeglądarce jest tytuł strony WWW. Sekcja Body dokumentu HTML zawiera właściwą treść, w tym teksty, grafikę i rodzaj formatowania. Poniżej przedstawiony jest ogólny schemat dokumentu HTML <html> <head> treść czołówki </head> <body> treść dokumentu </body> </html>
10
Tytuł strony i kolor tła
Poniżej przedstawiony jest kod źródłowy przykładowego dokumentu. <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=ISO "> Określenie sposobu kodowania polskich znaków (standard ISO jest ogólnie przyjęty i stosowany w sieci). <title>Nasza Szkoła</title> Tytuł strony - pojawi się on w pasku nazwy przeglądarki (nie w treści stron). </head> <body bgcolor="Silver"> Znaczniki mogą mieć atrybuty - tu atrybut bgcolor mający wartość Silver informuje przeglądarkę, w jakim kolorze ma być przedstawione tło dokumentu. Między znacznikami <body> i </body> umieszcza się treść dokumentu. </body> </html>
11
Organizacja strony HTML daje możliwość stosowania aż sześciu poziomów nagłówków. Za pomocą polecenia np. <H1> Poniżej przedstawiono fragment kodu źródłowego przykładowego dokumentu zawierającego nagłówki. <html> <body bgcolor="#BEA0A8""> <H1>To jest nagłówek poziomu pierwszego</H1> <H3>To jest nagłówek poziomu trzeciego</H3> <H6>To jest nagłówek poziomu szóstego</H6> Treść umieszczona na stronie </body> </html> Rady: Nagłówki tworzą strukturę hierarchiczną, należy więc ich używać konsekwentnie. Nagłówek automatycznie kończy akapit, nie ma więc potrzeby jawnego kończenia akapitu.
12
Początek nowego akapitu
HTML nie rozpoznaje znaków końca linii, wprowadzanych w edytorze tekstów. Aby rozpocząć nowy akapit w dokumencie HTML należy zastosować znacznik <P> . Znacznik ten nie wymaga pary </P>. Rady: Zastosowanie nagłówka <Hn> oraz linii poziomej <HR> również spowoduje rozpoczęcie nowego akapitu i dlatego nie trzeba po nich dodawać znacznika <P>.
13
Łamanie linii Podczas tworzenia nowego akapitu po zastosowaniu znacznika <P>, przeglądarki robią dość duży odstęp. Aby móc zacząć nową linię unikając takich odstępów, należy wykorzystać łamanie linii. W tym celu stosowany jest znacznik <BR> . Znacznik ten nie posiada zamykającej pary.
14
Wyróżnianie tekstu <B> pogrubienie tekstu <I> pochylenie tekstu <U> podkreślenie tekstu <STRIKE> przekreślenie tekstu <SUP> indeks górny <SUB> indeks dolny <TT> tekst pisany czcionką o stałej szerokości (czcionka maszyny do pisania)
15
Centrowanie tekstu <H4 align=center>
To jest wycentrowany nagłówek poziomu czwartego</H4> Jeśli chcemy wycentrować nagłówek, to należy posłużyć się argumentem align o wartości center. <center>Ten fragment tekstu będzie wyświetlany jako wyśrodkowany.</center> Wycentrowanie normalnego tekstu<center> i </center>. <P>Ten tekst też warto zobaczyć. <center>Ten fragmencik będzie wyświetlanyna środku ekranu.</center> Należy jednak pamiętać, że zastosowanie znacznika <center> powoduje automatycznie rozpoczęcie nowego akapitu, natomiast </center> zakończenie akapitu (czyli początek nowego).
16
Zmiana rozmiaru czcionki wybranego fragmentu tekstu
<font size=4>wychowanie, kształcenie jest procesem ciągłym i złożonym. </font> Tekst ten zostanie napisany czcionką o rozmiarze 4 Rady: Znacznika FONT należy używać do zmiany rozmiaru fragmentu tekstu, Nie należy wpisywać tekstu większą czcionką niż nagłówek.
17
Zmiana koloru tekstu <font size=3 color=„black”>wychowanie, kształcenie jest procesem ciągłym i złożonym. </font> Tekst ten zostanie napisany czarną czcionką o wielkości 3 Rady: Kolory można ustalać za pomocą ich nazwy ( White, Black, Red itd.), lub użyć tak zwanej notacji heksadecymalnej. Tworząc dokument dobieraj odpowiednio kolor tła i tekstu, aby to co piszesz, było czytelne.
18
Ilustracje wklejone Tu wstawiony zostanie rysunek (zdjęcie) o nazwie rysunek.jpg, znajdujący się w tym samym katalogu, w którym znajduje się niniejszy dokument. <img src="rogi.jpg"> Rady: Wklejaj tylko małe obrazki, aby czas ładowania strony był jak najkrótszy. Jeśli chcesz pokazać duży obrazek, stosuj ikony odsyłające do osobnej strony, na której zamieścisz duży rysunek.
19
Ilustracja jako tło dokumentu HTML
<body background="drzewo.jpg"> Atrybut BACKGROUND znacznika BODY wskazuje na zbiór zawierający rysunek, który wyświetlany będzie jako tło dokumentu. Rady: Grafikę przygotuj tak, aby tło nie okazało się zbyt "agresywne" - rozjaśnij ją. W celu umieszczenia tekstu na tle jakiegoś deseniu, nie trzeba stosować grafiki o dużych rozmiarach, lecz sensowniej jest przygotować mały element graficzny. Stosując atrybut BACKGROUND, podaj jako jego wartość mały rysunek. Przeglądarka powieli go tak, że wypełni on całość dokumentu.
20
Wstawianie poziomych linii
Język znaczników HTML posiada tylko jeden element graficzny. Jest to linia pozioma, którą poprawnie interpretuje większość stosowanych przeglądarek. Linia pozioma pomaga w oddzielaniu od siebie fragmentów tekstu. <hr> HR bez atrybutów <hr size="1" width="70%"align="left"> linia o grubości 1 piksela i długości równej 70% szerokości okna, w którym jest wyświetlana, wyrównana do lewej krawędzi okna, z efektem 3D
21
Odsyłacze do innych dokumentów
Tekst zawarty między znacznikami: otwierającym A i zamykającym A, staje się odnośnikiem do strony wskazanej przez wartość atrybutu HREF znacznika A <a href=”prezentacja.html">Odsyłacz do strony o nazwie prezentacja, znajdującej się w tym samym katalogu</a> <a href=" do strony Ośrodka Edukacji Informatycznej</a> <a do skrzynki pocztowej o podanym adresie</a>
22
Odwołania wewnątrz dokumentu
Poniższy fragment tekstu przedstawia przykład kodu źródłowego HTML umożliwiającego włączenie do dokumentu spisu treści z odsyłaczem do wskazanego miejsca w dokumencie. <a name="sp"> kotwica "sp" dla spisu treści <h2><b> SPIS TREŚCI </b></h2></a> <a href="#sp"> SPIS TREŚCI </a> skrót do kotwicy "sp", czyli do spisu treści
23
Listy uporządkowane Znacznik <OL> rozpoczyna listę uporządkowaną
Znacznik <LI> rozpoczyna element listy <ol> <li>Punkt pierwszy. <li> Punkt drugi. <li> Punkt trzeci. </ol>
24
Lista nieuporządkowana
Znacznik <UL> rozpoczyna listę nieuporządkowaną Znacznik <LI> rozpoczyna element listy <ul> <li>Dwa pęczki szarańczy. <li>Młode źdźbła trawy. <li>Majonez. <li>Szczypta pieprzu. </ul>
25
Umieszczanie tabel w dokumentach HTML
Tabela ta składa się z dwóch kolumn i trzech wierszy. Pierwsza kolumna będzie zawierać nagłówki wierszy, a druga - dane. <h1>Bardzo prosta tabela</h1> <table> <tr> <th>Imię</th> <td>Albert</td> </tr> <tr> <th>Nazwisko</th> <td>Podpadkiewicz</td> </tr> <tr> <th>Data urodzenia</th> <td>03 maja 1952 roku</td> </tr> </table>
26
Zapraszam do tworzenia własnych stron www
Opracowała: Elżbieta Piszcz
Podobne prezentacje
