HTML i CSS id 206793 Nieznany

background image

Znaczniki HTML

background image

Początki

background image

I wojna przeglądarek

background image

HTML 4.01

HTML (ang. HyperText Markup Language, pol.

hipertekstowy język znaczników) – dominujący język
wykorzystywany do tworzenia stron internetowych.

Pozwala opisać strukturę informacji zawartych w

dokumencie nadając znaczenie poszczególnym

fragmentom tekstu (formując linki, nagłówki, akapity, listy,

itp.) oraz osadzić w tekście dodatkowe obiekty np.
statyczne grafiki, interaktywne formularze, dynamiczne

animacje. W składni języka HTML wykorzystuje się

znaczniki opatrzone z obu stron nawiasami ostrokątnymi.

background image

Co to są znaczniki?

<znacznik>

obiekt, którego dotyczy znacznik

</znacznik>

lub (w XHTMLu, kiedy nie ma znacznika

kończącego):

<znacznik />

background image

!DOCTYPE [HTML]

Zalecane przez W3C:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

Forma przejściowa, to co strict + znaczniki zdeprecjonowane:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Używany na stronach z ramkami:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">

background image

!DOCTYPE [

XHTML

]

Zalecane przez W3C:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Forma przejściowa, to co strict + znaczniki zdeprecjonowane:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">

Używany na stronach z ramkami:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

background image

Strona HTML

<HTML>

Zawartość strony

</HTML>

background image

Nagłówek strony

<HEAD>

Zawartość nagłówka strony

<META ...>
<TITLE> Tytuł strony</TITLE>
<LINK ...>

</HEAD>

background image

Treść strony

<BODY

text="#FFFF00" bgcolor ="#000080"

>

Zawartość strony

</BODY>

background image

Parametry znaczników

<znacznik

parametr1

=

"wartość1"

parametr2

=

"wartość2"

parametr3

=

"wartość3"

>

Wybrane parametry:

color,

left, top, width, height,

href, src

background image

Kodowanie kolorów

Przykładowe kolory:

biały:

color="#

FF

FF

FF

"

czarny:

color="#

00

00

00

"

brązowy:

color="#

80

00

00

„

żółty:

color="#

F0

F0

00

"

Red

,

Green

,

Blue

– model oparty o 3 podstawowe składowe chromatyczne

widzialnego światła białego. Model zastosowano do wyświetlania obrazów

na ekranach CRT i LCD

Barwy uzyskiwane są poprzez mieszanie podstawowych kolorów.

Im więcej światła tym jaśniejszy będzie kolor

0 – 255 DEC

00 – FF HEX

background image

Szkielet dokumentu HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

background image

Nagłówki

<H1>

Nagłówek 1

</H1>

<H2>

Nagłówek 2

</H2>

...

<H6>

Nagłówek 6

</H6>

background image

Znaczniki tekstu

<P>

Tekst

</P>

Formatowanie tekstu:

<B>

Pogrubienie

</B>

Pogrubienie

<I>

Pochylenie

</I>

Pochylenie

<U>

Podkreślenie

</U>

Podkreślenie

Znaczniki można zagnieżdżać:

<B>

Pog

<I>

rub

</I>

ienie

</B>

Pogrubienie

parametr: ALIGN= "left"

lub "right"

lub "center"

background image

Formatowanie tekstu

<FONT color="#FF

FF

FF

">

Tekst

</FONT>

Indeksy:

<SUB>

dolny

</SUB>

Indeks dolny

<SUP>

górny

</SUP>

Indeks górny

Przejście do nowej linii:

<BR>

Podkreślenie:

<HR>

background image

Listy

Lista numerowana:

<OL> </OL>

Lista nienumerowana:

<UL> </UL>

Składowa listy:

<LI>

Przykład listy:

<OL>

<LI>

Jabłka

<LI>

Gruszki

<LI>

Śliwki

</OL>

background image

Lista definicji

Lista numerowana:

<DL> </DL>

Hasło:

<DT> </DT>

Definicja hasła:

<DD> </DD>

Przykład listy:

<DL>

<DT>

Hasło1

</DT>

<DD>

Def1

</DD>

<DT>

Hasło2

</DT>

<DD>

Def2

</DD>

</DL>

background image

Tabele

Znacznik tabeli:

<TABLE> </TABLE>

Wiersz tabeli:

<TR> </TR>

Komórki tabeli:

<TD> </TD>

-

zwykła komórka

<TH> </TH>

-

komórka nagłówkowa

background image

Przykład tabeli

<TABLE>

<TR>

<TD>

Jabłka

</TD>

</TR>

<TR>

<TD>

Gruszki

</TD>

</TR>

<TR>

<TD>

Śliwki

</TD>

</TR>

</TABLE>

background image

Linki

<A href="http://...">

KLIK

</A>

background image

Grafika

<IMG src="plik.jpg" >

Dopuszczalne formaty:

JPG, GIF, PNG

<IMG src="http://..." >

background image

Grupowanie - bloki

<SPAN>

</SPAN>

lub

<DIV>

</DIV>

background image

CSS

C

ascading

S

tyle

S

heets

Kaskadowe
Arkusze
Stylów

background image

Selektory

SELEKTOR

{

właściwość1

:

wartość1;

właściwość2

:

wartość2;

itd...

}

background image

Selektory -

przykład

H1

{

color

: #80FF00;

margin-left

: 20px;

}

background image

Klasy

SELEKTOR.klasa1

{

właściwość1

:

wartość1;

właściwość2

:

wartość2;

}

SELEKTOR.klasa2

{

właściwość1

:

wartość3;

właściwość2

:

wartość4;

}

background image

Klasy w HTML

<ZNACZNIK

class="klasa1"

>

obiekt, którego dotyczy znacznik

</ZNACZNIK>

ZNACZNIK.klasa1

{

właściwość1

:

wartość1;

właściwość2

:

wartość2;

}

background image

Klasy uniwersalne

*.klasa1

{

właściwość1

:

wartość1;

właściwość2

:

wartość2;

}

*.klasa2

{

właściwość1

:

wartość3;

właściwość2

:

wartość4;

}

background image

Pseudoklasy

P:first-letter {

background: Black;

color: Lime;

padding-bottom: 5px;

padding-top: 5px;

padding-left: 5px;

padding-right: 5px;

}

background image

Grupowanie selektorów

SELEKTOR1, SELEKTOR2

{

właściwość1

:

wartość1;

właściwość2

:

wartość2;

itd...

}

background image

Łączenie arkusza stylów z plikiem HTML

<HEAD>

<LINK rel="Stylesheet„

type="text/css"

href="style.css" />

</HEAD>

Dla zwiększenia giętkości, zalecane jest aby autorzy korzystali z zewnętrznych opisów

wyglądu. Takie rozwiązanie ma dwie zalety:

-

treść opisu może być zmieniana bez modyfikacji źródłowego dokumentu HTML,

-

pliki CSS mogą być współdzielone przez kilka dokumentów.

W celu przyłączenia zewnętrznego opisu wyglądu dokumentu należy wykorzystać
znacznik LINK:

background image

Źródła

http://www.kurshtml.boo.pl

http://webmade.org/

Document Outline


Wyszukiwarka

Podobne podstrony:
html, css sprawozdanie id 62398 Nieznany
Abolicja podatkowa id 50334 Nieznany (2)
4 LIDER MENEDZER id 37733 Nieznany (2)
katechezy MB id 233498 Nieznany
metro sciaga id 296943 Nieznany
perf id 354744 Nieznany
interbase id 92028 Nieznany
Mbaku id 289860 Nieznany
Probiotyki antybiotyki id 66316 Nieznany
miedziowanie cz 2 id 113259 Nieznany
LTC1729 id 273494 Nieznany
D11B7AOver0400 id 130434 Nieznany
analiza ryzyka bio id 61320 Nieznany
pedagogika ogolna id 353595 Nieznany
Misc3 id 302777 Nieznany
cw med 5 id 122239 Nieznany

więcej podobnych podstron