HTML.

Struktura strony WWW prolog <html> <head> treść nagłówka
<body> treść dokumentu HTML </body> </html>

Prolog Informacja o standardzie, w jakim ten dokument został wykonany Deklaracja typu dokumentu + ewentualnie odnośnik do dokumentu zawierającego formalny opis składni dla danego standardu <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.1 Strict//EN" " xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 //EN">
<!DOCTYPE html PUBLIC "-//W3C //DTD HTML 4.01 Transitional//EN"> <!DOCTYPE html PUBLIC "-//W3C //DTD HTML 4.01 Frameset//EN"> <!DOCTYPE xhtml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " /xhtml1-strict.dtd">

Polskie litery <meta http-equiv="Content-Type" content= „text/html; charset=kodowanie " > dla Windows-1250: charset=windows-1250 dla ISO : dla iso dla UTF-8: charset=utf-8

Znaczniki HTML Twórcy stron WWW
<znacznik> treść </znacznik> <znacznik1> <znacznik2> treść </znacznik2> </znacznik1> <znacznik1> treść1 <znacznik2> treść2 </znacznik2> treść3 </znacznik1> tagi

Atrybuty znaczników <znacznik atrybut="wartość">treść</znacznik> <znacznik atrybut1="wartość1" atrybut2="wartość2" >treść </znacznik>

<html> <html lang="pl">
sugestia dla przeglądarki, że głównym językiem strony będzie język polski

Główne znaczniki sekcji <head>
<title> - definiuje tytuł strony <link> - określa odwołania do zasobów zewnętrznych, np. stylów lub skryptów <meta> - określa rozmaite dane dodatkowe, np. rodzaj kodowania, opis strony, słowa kluczowe, autor, przekierowanie na inny adres

<title>treść tytułu</title>
<meta name= "description" content= "opis strony"> <meta name= "keywords" content= „słowo1, słowo2,słowo3"> <meta name= "author" content= "Imię Nazwisko">

atrybuty <body>
background – określa obraz stosowany jako tło; bgcolor – określa kolor tła; text – określa kolor tekstu; link – określa kolor nieodwiedzonego odnośnika; vlink – określa kolor odwiedzonego odnośnika; alink – określa kolor aktywnego odnośnika

Przykłady <body bgcolor="navy" text="yellow ">
<body background="obraz.jpg" text="green">

Nagłówki (Tytuły) Dzielą stronę na sekcje. Mają wartości od 1 do 6. pozwala to na budowanie hierarchii tytułów. <h1>treść </h1> główny <h2> treść </h2> .....

Znaczniki formatowania tekstu:
blokowe – definiują bloki tekstu, np. <p>, <h1>, <hr>, <ul> , <li>; wierszowe – z reguły zmieniają atrybuty tekstu, np. <b>, <i>, <img>, <a> uwaga! Znaczników nie mieszamy dowolnie. W elemencie wierszowym nie umieszczamy znaczników blokowych.

Znacznik akapitu <p>tekst</p>
<p align="right">tekst</b> <p align="center">tekst</b> <br/> przełamanie wiersza w obrębie akapitu jak nie podamy nazwy protokołu przy wpisywaniu adresu zasobu w przeglądarce internetowej przeglądarka przyjmie domyślnie, że jest to http

Formatowanie czcionki
<b>tekst</b> tekst pogrubiony <i>tekst </i> kursywa <u>tekst<u> tekst podkreślony

Znacznik <hr> wstawia linię poziomą
<hr color="green" width="50%"> <hr align="center" color="green" size=7 width="30%">

Atrybuty znacznika <hr>
size – zmienia grubość linii width – ustala długość linii w procentach strony align – określa położenie linii na stronie, domyślnie pośrodku color – określa kolor linii

Znacznik <font>
Definiuje czcionkę. Atrybuty: size="x" wielkość czcionki; x=1..7 standard x=3; size="+x " o x więcej od standardu; size="-x " o x mniej od standardu color="kolor " kolor czcionki

Listy <znacznik_listy>
<znacznik_elementu>treść elementu</ znacznik_elementu> ... </znacznik_listy>

Listy nieuporządkowane wypunktowanie
<ul type="punktor"> <li> pierwszy element </li> <li> drugi element </li> ... <li> n-ty element </li> </ul> punktor = disc, square, circle (koło, wypełniony kwadrat, okrąg)

Listy nieuporządkowane wyliczanie
<ol type=„wyróżniki"> <li> pierwszy element </li> <li> drugi element </li> ... <li> n-ty element </li> </ol> wyróżniki=a, A, i, I, 1 (małe litery, duże litery, liczby w zapisie rzymskim z małymi literami, liczby w zapisie rzymskim z dużymi literami, cyfry w zapisie arabskim)

Grafika znacznik <img src>
<img src="względną ścieżka dostępu do o23brazka" alt="Tu podaj tekst alternatywny" />

Poprawne ścieżki dostępu do obrazka
plik.jpg – obrazek i dokument html w tym samym katalogu katalog/plik.gif – obrazek znajduje się w podkatalogu katalogu z dokumentem html ../ plik.jpg – dokument html w podkatalogu ../katalog/plik.gif – obrazek i strona w dwóch różnych podkatalogach

Atrybuty znacznika <img src>
align ="top" tekst przy górnej krawędzi grafiki ="left" tekst po lewej stronie grafiki ="right" tekst po lewej stronie grafiki =„bottom" tekst przy górnej krawędzi grafiki =„midlle" tekst na wysokości środka grafiki

wysokość i szerokość grafiki
<img src="obraz.jpg" height="wysokość" width="szerokość">

Formaty plików graficznych
GIF - dla rysunków składających się z mniej niż 256 kolorów, np. przyciski menu i inne "ręcznie" rysowane ozdobniki. Format ten obsługuje przezroczystość. JPG - dla zdjęć wielokolorowych. Nie obsługuje przezroczystości. PNG - pozwala zapisywać z bardzo dobrą jakością zarówno ręcznie rysowane grafiki jak i zdjęcia. Obsługuje kompresję oraz zarówno pełną przezroczystość jak i półprzezroczystość.

Odnośniki (hiperłącza) <a>
wskazują miejsce, do którego przeniesie nas przeglądarka po kliknięciu na wyróżnionym przez nas tekście lub obrazku. Znacznik <a> definiuje tzw. kotwicę: źródłową – zaznacza obiekt, tworzący połączenie z obiektem docelowym; docelową – to miejsce do którego nastąpi przeniesienie.

Odsyłacz do podstrony <a href="ścieżka dostępu do podstrony"> opis odsyłacza</a> np. <a href="O firmie.html">O firmie</a> <a href="Grafika/Galeria.html">Galeria</a> <a href="../index.html">Strona startowa</a>

Odsyłacz do adresu internetowego
<a href="adres internetowy"> opis odsyłacza</a> np. <a href=" Strona firmowa</a>

Odsyłacz pocztowy połączenie automatycznie wywołujące zaadresowany formularz poczty elektronicznej <a href="mailto:adres poczty "> opis odsyłacza</a> np. <a poczta elektroniczna</a>

Odsyłacz obrazkowy <a href="adres"><img src="ścieżka dostępu do obrazka" alt="tekst alternatywny" border="0" /></a> gdzie adres: ścieżka dostępu do dowolnej Twojej podstrony (np.: index.html, strona2.html), adres internetowy poprzedzony przez adres poczty elektronicznej poprzedzony przez "mailto:".

Nazwy odnośników wykorzystuje się przy hiperłączach lokalnych
<a name="nazwa odnośnika">tekst</a> wstawiamy w miejscu, do którego będziemy chcieli się przenieść; <a href=#nazwa odnośnika>tekst lub obrazek</a> wstawiamy w miejscu, z którego chcemy się przenieść

Przykład <a name="słowniczek">Terminy i definicje</a>
<a href="#słowniczek">Dodatek</a>

Tabele <table> <tr> <tr><!--wierszM> <td>komórka1</td><td>komórka2 </td><! ><td>komórkaN</td> </table>

Dodatkowe znaczniki tabeli
<caption> podpis, umieszczany w obrębie tabeli <th> komórka nagłówka tabeli, <thead> część nagłówkowa tabeli, <tbody> część zawierająca główną tabelę, <tfood> stopka tabeli, np. podpis pod tabelą podział tabeli przy wykorzystaniu tych elementów przydatny jest w przypadku długich tabel (nagłówek i stopka mogą być drukowane na każdej stronie)

Mapy odnośników na obrazach
<img src= "adres_obrazu" usemap= "#nazwa_mapy" alt= "opis alternatywy"> <map_name= "nazwa_mapy"> <area shape= "rodzaj obszaru" coords= "koordynaty" href="adres_odnośnika" alt="tekst alternatywny"> ..... </map>

Atrybut Shape określa kształt obszaru reagującego na kliknięcia, ma 4 wartości: default – cały obszar obrazu; rect – prostokąt o zadanych wymiarach; circle – koło o zadanym środku i promieniu; poly – wielokąt o zadanych wierzchołkach.

koło circle – coords="x, y, r" gdzie x, y współrzędne środka
r – promień rect – prostokąt coords="x1, y1, x2, y2" gdzie x1, y1 – współrzędne lewego górnego rogu x2, y2 – współrzędne prawego dolnego rogu; poly – wielokąt coords="x1, y1, x2, y2,...,xN, yN" gdzie x1, y1 – współrzędne 1 wierzchołka, x2, y2 – współrzędne 2 wierzchołka, .... xN, yN – współrzędne N-tego wierzchołka.

Struktura z ramkami Definiowanie strony z ramkami składa się z następujących kroków: podział witryny na sekcje przy pomocy znacznika <framset>, przypisanie ramkom zawartości <frame>, zdefiniowanie treści dla przeglądarek, które nie obsługuja ramek <noframes> Uwaga! <framset> występuje zaraz za </head>, <body> tylko w sekcji <noframes>

Ogólna definicja ramek
<framset atrybuty> <frame atrybuty > .... </framset> Układ strony, czyli liczbę ramek i ich rozmieszczenie regulują atrybuty znacznika <framset>: cols i rows Rozmiar w pikselach, w procentach lub automatycznie (znak *).

Przykłady: cols="25%, 75%" cols="150, * " rows="15%, *, 15%"

Znacznik <frame>
przyjmuje następujące atrybuty: frameborder – określa, czy ma być widoczne obramowanie ramki (0-brak, 1- jest); marginheight – okresla rozmiar górnego i dolnego marginesu; marginwidht – okresla rozmiar lewego i prawego marginesu; name – określa nazwę ramki; noresize – powoduje, że rozmiar ramki nie będzie mógł być zmieniany przez użytkownika; scrolling – określa, czy mają być widoczne paski przewijania: yes, no, auto. src – określa adres dokumentu, który ma się pojawić w ramce.

Przykład </head> <framset cols=„25%,*>
<frame src=„strona1.html”> <frame src=„strona2.html”> <noframes> <body> <p> Twoja przeglądarka nie obsługuje ramek.</p> <p> Dokumenty znajdziesz <a href=„strona1.html”>tutaj</a> i <a href=„strona.html”></a> </p> </body> </noframes> </framset>

Zagnieżdżanie ramek <framset rows=„30%,*>
<framset cols=„25%,*,25%> <frame src=„strona1.html”> <frame src=„strona2.html”> <frame src=„strona3.html”> </framset> <framset cols=„50%,*%> <frame src=„strona4.html”> <frame src=„strona5.html”>

HTML.

Podobne prezentacje

Prezentacja na temat: "HTML."— Zapis prezentacji:

Podobne prezentacje

О projekcie

Zwrotny adres

Wejść

Zaloguj się poprzez sieć społeczną:

HTML.

Podobne prezentacje

Prezentacja na temat: "HTML."— Zapis prezentacji:

Podobne prezentacje

О projekcie

Zwrotny adres