PODSTAWY

HTML

Opracował: mgr inż. Szczepan
Dawidowicz

Wprowadzenie

HTML ,(X)HTML) jest po prostu plikiem
tekstowym, gdzie wpisujemy wszystkie
polecenia, dotyczące formatowania
tekstu, wstawiania grafiki i inne.
Pisanie strony w zwykłym edytorze
tekstu, jest bardzo uciążliwe.
Dlatego powstało wiele
wyspecjalizowanych edytorów, które
ułatwią, przyspieszą i uprzyjemnią
tworzenie stron.

Przykłady edytorów do pisania

stron www dla Windows

•

Pajączek

(shareware - płatny)

•

CoreEditor

(płatny - dostępna

wersja DEMO)

•

Edytor Znaczników HTML - ezH

TML

(darmowy)

•

ateML Pro

(darmowy)

•

kED

(darmowy)

•

PSPad

(darmowy)

•

Web Edit (darmowy)

Poprawność kodowania

ISO-8859-

<html>
<head>
<meta http-equiv="Content-Type" 4

content="text/html; charset=windows-

1250">

<meta http-equiv="Content-Type"

content="text/html; charset=iso -8859-

<--! Kod ten odpowiada za poprawne

wyświetlany za poprawne wyswietlanie

tradycyjnych ogonków na ekranie

monitora-->

<title>Nowa strona 1</title>
</head>
<body>
</body>
</html>

Zasady pisanie tekstu w HTML

•

Wszystkie fragmenty tekstu, które

rozpoczynają się nawiasem

„<”

kończą jego prawym odpowiednikiem

„>”

traktowane są jako polecenie lub

znacznik a po angielsku

„tag”

•

Przeglądarka , wczytując dokument,

traktuje wszystkie fragmenty tekstu
objęte nawiasami

„<”

„>”

jako

polecenie składu.
Zamiast nawiasów ostrych należy użyć
specjalnych kodów HTML:

<

cokolwiek

>

Elementy

HTML

Elementy tworzą strukturę w

kodzie dokumentu HTML i
informują przeglądarkę w jaki
sposób strona internetowa ma
prezentować informację.
Generalnie element składa się ze
znacznika otwierającego, treści, i
znacznika zamykającego.:
Elementy tworzą strukturę w
dokumentach HTML
<treść>

Znaczniki HTML



Znaczniki to etykiety używane do

zaznaczania początku i końca elementu.

Wszystkie znaczniki mają ten sam format:

zaczynają się znakiem mniejszości "<" i

kończą znakiem większości ">".



Mamy dwa rodzaje znaczników - otwierające:

<html> i zamykające: </html>. Jedyną

różnicą jest znak ukośnik "/" dodawany przy

znacznikach zamykających. Zawartość

elementu umieszcza się między znacznikiem

zamykającym i otwierającym.



Wszystko w kodzie HTML opiera się na

elementach. Nauka języka HTML to nauka

jakkorzystać z różnych znaczników.

Atrybuty HTML



Atrybuty

Niektóre elementy mogą zawierać
więcej informacji. Te dodatkowe
informacje nazywane są atrybutami.
Atrybuty są zawsze umieszczane w
znaczniku otwierającym a wartość
atrybutu umieszczana jest w
cudzysłowiu.
Różne atrybuty mogą być nadane
większości elementów.
Które elementy nie mają atrybutów?

Ramy dokumentu

•

<html>

•

<head>

•

meta

name="Keywords" content="

wpisz wyrazy kluczowe rozdzielone

przecinkami

" />

•

<title>

Tu wpisz tytuł strony

</title>

</head>

•

<body>

•

</body>

•

</html>

Nagłówek i

treść



Znaczniki <body>...</body> oraz <meta /> określają

pewne informacje na temat strony jako całości.



W jednym dokumencie może się znajdować tylko

jeden znacznik <body> - zaraz po nagłówku

strony (<head>...</head>).



Znacznik

stanowi tzw. metainformację,

pozwalającą określić pewne ogólne wiadomości,

dotyczące dokumentu, m.in. sposób kodowania

znaków, opis zawartości strony, jej autora czy język, w

którym została napisana. Nie są one ale

wymagane,warto je stosować,



W pojedynczym dokumencie znajduje się zwykle

kilka znaczników <meta />

Zapamiętaj!

Nigdy nie należy zapominać o
wstawianiu deklaracji strony kodowej,
natomiast podanie tytułu strony jest
wręcz obowiązkowe!

Zaleca się również pisanie
opisu zawartości strony

oraz

wyrazów kluczowych.

Informacja

•

Większość edytorów (X)HTML

posiada specjalne generatory sekcji

BODY oraz META, w których podaje

się wszystkie atrybuty oraz

informacje dotyczące dokumentu,

dzięki czemu nie trzeba tego robić

ręcznie.

•

Przykład takiego generatora można

zobaczyć na stronie

http://www.kurshtml.boo.pl/html/ws

tep,body.html

Formatowanie tekstu za

pomocą znaczników – atrybuty

czcionki

<b>

tekst

</b>

wytłuszczenie

<i>

tekst

</i>

pismo pochyłe

<u>

tekst

</u>

podkreślenie

<small>

tekst

</small>

zmieszenie o 1

rozmiaru czcionki

<big>

tekst

</big>

zwiekszenie o 1 rozmiaru

czcionki

<s>

tekst

</s>

przekreślenie

<sub>

tekst

</sub>

inteks dolny

<sup>

tekst

</sup>

indeks górny

<u>

tekst

</u>

czcionka monotypiczna

<dfn>

tekst

</dfn>

tekst będący definicją

Tytuły

<h6>tekst</h6>
<h5>tekst</h5>
<h4>tekst</h4>
<h3>tekst</h3>
<h2>tekst</h2>
<h1>tekst</h1>

Odsyłacze. Pole adresu

<html>
<head>
<meta http-equiv="Content-Type" 15
content="text/html; charset=windows-1250">
<title>Nowa strona 1</title>
</head>
<body>
<a
href=„http://www.polbox.com.pl/”>Wydawnictw
o Lupu</a>

<address>

E-mail: <a href="mallto:sxdx@poczta.onet.pl”>
Paweł Niczyj</a>

</address>

</body>
</html>
Uwaga: Napis

mallto

daje sygnał przeglądarce WWW,

że ma uruchomić pocztę elektroniczną.

Kolory



Definicje kolorów przydają się w takich

poleceniach jak np.

<body bgcolor="kolor">...</body> lub



Każdą barwę można utworzyć mieszając w

odpowiednich proporcjach trzy kolory

podstawowe: czerwony, zielony i niebieski

(RGB - od angielskich słów: Red - czerwony,

Green - zielony, Blue - niebieski).

Nasycenie każdego z kolorów zapisujemy w

definicji barwy w postaci:

#RRGGBB

, gdzie:

nasycenie koloru czerwonego;

- nasycenie

zielonego;

- nasycenie niebieskiego (znak

oznacza, że definiujemy kolor w kodzie HEX)

Kolor czcionki

<font

color=”kolor”>

tekst </font> kolor

czcionki

<font

face=”Arial CE”>

tekst</font> rodzaj

czcionki

<font

size=”7” tekst

</font> rozmiar czcionki

Typowy zestaw do operowania czcionka używany

na większości stron to:

<b> wytłuszczenie</b>
<i>kursywa</i>
Przykład:
<font

color=”kolor”

face =”czcionka”

size=”rozmiar”> tekst o ustalonym

kolorze i/lub wybranej czcionce i/lub

rozmiarze </font>

Akapit i wiersz

•

Rozdzielony tekst na akapity za pomocą

klawisza

Enter

przeglądarka ignoruje znaki

końca wierszy i akapitów.

•

Aby naprawdę rozdzielić akapity, należy

używać polecenie

<p>

(p = paragraph),który

wstawi interlinie miedzy poszczególne

fragmenty tekstu.

•

Należy stosować również znacznik zamykający

</p>.

•

Przykład:
<p> To jest treść pierwszego

akapitu</p>
<p> To jest treść drugiego akapitu</p>

Łamanie tekstu i linia

pozioma

•

Niekiedy zdarza się, że chcemy przełamać tekst,
nie wprowadzając przy tym znaku końca akapitu.

•

Możemy wówczas zastosować pojedyncze
polecenie

<BR>

które przenosi tekst o jeden

wiersz w dół, choć nie w prowadza dodatkowej
interlinii.

•

Przykład:

•

To jest pierwszy wiersz

<BR>

To jest drugi wiersz

<BR>

•

Uwaga: Napisanie kilku kolejnych

<BR

pozwala poszerzyć pionowy odstęp między
elementami.

Tworzenie listy

Lista lub inaczej wykaz w języku HTML

służy

do przedstawienia dowolnej ze struktur

list:

Lista zwykła, bez numeracji,

•

Jabłka butelki

•

śmietana

Lista numerowana

Jabłka

Gruszki

śliwki

Lista zwykła bez numeracji

<ul>

<li>

Pozycja

listy

</li>

<li>

Pozycja

listy

</li>

….. Kolejne pozycje na

liście

</ul>

Lista numerowana

<ol>

◦

<li>

Pozycja numer 1 listy

</li>

◦

<li>

Pozycja numer 2 listy

</li>

◦

<li>

Pozycja numer 3 listy

</li>

◦

<li>

Pozycja numer 4 listy

</li>

........Kolejne numerowane

pozycje na liście

</ol>

Multimedia na stronie



Najczęstsze elementy multimedialne głównie
pliki o rozszerzeniu na stronie to:

◦

Rysunki (głównie pliki o rozszerzeniu:

GIF,

BMP, PNG

◦

Zdjęcia (głównie pliki o rozszerzeniu:

JPEG lub

JPG

◦

Filmy (głównie pliki o rozszerzeniu:

AVI,

MPEG, MPG, MOV

◦

Muzyka (głównie pliki o rozszerzeniu

MID,

RAM, SND, WAV

◦

Animacje (głównie pliki o rozszerzeniu

GIF,

aplety Java, animacje w Macromedia Flash,

kod w językach skryptowych

)

Tło strony



<html>



<head>



content="text/html; charset=windows-

1250">



<title>Strona z tłem2</title>



</head>



<body

background="tło.bmp">



Tak wyglądz strona z tłem



</body>



</html>

Elementy graficzne na

stronie

<!--
noshade

oznacza, że linia nie będzie

posiadała cienia

-->

</body>

</html>

Grafika na stronie



Na stronie WWW są stosowane dwa
podstawowe formaty bitowych plików
graficznych – GIF i JPG(JPEG) – które
są z założenia skompresowane.



Ścieżka dostępu

<img

src=”nazwa_pliku”

Hierarchiczne listy wielopoziomowe

wykazów

Document Outline

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Slide 11
Slide 12
Slide 13
Slide 14
Slide 15
Slide 16
Slide 17
Slide 18
Slide 19
Slide 20
Slide 21
Slide 22
Slide 23
Slide 24
Slide 25
Slide 26
Slide 27

Wyszukiwarka

Podobne podstrony:
KURS Prostego Formatowania Tekstu w Opisie Chomika (kurs podstaw html)
podstawy html czesc II
Podstawy HTML
Informatyka - podstawy HTML 2, SZKOŁA, Informatyka
Informatyka - podstawy HTML, SZKOŁA, Informatyka
podstawy html
Podstawy HTML
Podstawy HTML
KURS Prostego Formatowania Tekstu w Opisie Chomika (kurs podstaw html)
Podstawy html obrazek z lewej lub prawej strony
Podstawy html odsylacze
podstawy html
Podstawy tworzenia stron WWW w języku HTML, wrzut na chomika listopad, Informatyka -all, INFORMATYKA
PODSTAWY JĘZYKA HTML

więcej podobnych podstron