W OPARCIU O JĘZYK HTML

CZĘŚĆ I

4.12.2021

Zespół Szkół w
Grzęsce
Marek Szymanowski

Tworzenie Stron

Internetowych

D o k u m e n t H T M L ( s t r o n a i n t e r n e t o w a ) j e s t
z w y k ły m d o k u m e n t e m t e k s t o w y m o
u s t a l o n y m k o d o w a n i u z n a k ó w s k ła d a j ą c y m
s i ę z

e l e m e n t ó w

i

z n a c z n i k ó w

.

Z n a c z n i k i ( t a g i ) o k r e ś l a ją s p o s ó b
p r z e t w a r z a n i a i w y ś w i e t l a n i a i n f o r m a c j i
p r z e z p r z e g l ą d a r k ę ( n p . M o z i l l a F i r e f o x )

4.12.2021

Zespół Szkół w
Grzęsce
Marek Szymanowski

Dokumenty HTML

4.12.2021

Zespół Szkół w
Grzęsce
Marek Szymanowski

Dokumenty HTML

H TM L (a n g .

H y p e rTex t Ma r k u p L a ng u a g e ,

h i p e rt e ks t o wy ję z yk z n a c z n ik ó w

) t o j ęz y k

s kł a d a j ą c y s i ę z e z n a cz n ik ó w ( a n g . ta g s )
s to s o wa ny do o p i s y wa ni a s tr o n W W W.

H TM L z o s ta ł op r a c o w a n y w 1 9 8 1 w CE RN
p r z e z Ti m a Be r n s -L ee .

O s ta t n ią we r s j ą je s t 4 . 0 1 o p a r ta o
k a s k a d o w e a r ku s z e s t yl ó w ( CSS ) .

4.12.2021

Zespół Szkół w
Grzęsce
Marek Szymanowski

Dokumenty HTML

Dokumenty html odczytywane i
odpowiednio interpretowane przez
program wyświetlający można tworzyć
przy użyciu

Notatnika

lub za pomocą

edytorów stron WWW takich jak:

MS

FrontPage

,

Pajączek

lub system

zarządzania treścią –

Joomla

.

4.12.2021

Zespół Szkół w
Grzęsce
Marek Szymanowski

Podstawowe pojęcia

S i e ć k o m p u t e r o w a

– t o z b i ó r k o m p u t e r ó w i

i n n y c h u r z ą d z e ń p o ł ą c z o n y c h z e s o b ą .
U m o żl i w i a p r z e k a z y w a n i e i n f o r m a c j i o r a z
u d o s t ę p n i a n i e z a s o b ó w.

L A N

( L o c a l A r e a N e t w o r k ) – s i e ć l o k a l n a

WA N

( Wi d e A r e a N e t w o r k ) – s i e ć r o z l e g ł a

W L A N

( Wi r e l e s s L o c a l A r e a N e t w o r k ) –

b e z p r z ew o d o w a s i e ć l o k a l n a

I n t e r n e t

– o g ó l n o ś w i a t o w a s i e ć k o m p u t e r o w a

4.12.2021

Zespół Szkół w
Grzęsce
Marek Szymanowski

Podstawowe pojęcia

W W W

– We b ( Wo r l d W i d e We b ) – s y s t e m i n f o r m a c j i

o p a r t y n a p u b l i c z n y m d o s t ę p i e t z w. s t r o n y
i n t e r n e t o w e W W W ( j e s t t o u s ł u g a i n t e r n e t o w a ) .

S e r w e r

– s p e c j a l n y k o m p u t e r b ę d ą c y z a r z ą d c ą s i e c i

o r a z u m o ż l i w i a j ą c y k o r z y s t a n i e z j e g o z a s o b ó w
( p l i k ó w, b a z d a n y c h ) .

A d r e s I P

– n u m e r n a d a w a n y s i e c i k o m p u t e r o w e j

L A N, g r u p i e s i e c i l u b p o j e d y n c z e m u k o m p u t e r o w i
s i e c i I n t e r n e t . ( t z w. a d r e s p u b l i c z n y – n p .
8 9 . 4 8 . 7 4 . 1 7 6 ) . K a ż d y k o m p u t e r s i e c i l o k a l n e j m a
n a d a w a n y a d r e s I P z p u l i p r y w a t n e j n p . 1 9 2 . 1 6 8 . 0 . 1 2

4.12.2021

Zespół Szkół w
Grzęsce
Marek Szymanowski

Podstawowe pojęcia

D N S

– s y s t e m n a z e w n i c t w a k o m p u t e r ó w w

I n t e r n e c i e p r z y j a z n y d l a u ż y t k o w n i k a . N p .
k o m p u t e r o w i o I P 2 1 7 .9 7 .2 1 6 .1 7 p r z y p i s a n a
je s t d o m e n a z s g r z e s k a . p l

h t t p

– j e d e n z p r o t o k o ł ó w p r z e s y ł a n i a

d a n y c h p r z e z i n t e r n e t , s łu ż y d o
p r z e g l ą d a n i a s t r o n w w w.

h t t p s

– s z y f r o w a n a w e r s j a p r o t o k o łu h t t p .

f t p

– p r o t o k ó ł k o m u n i k a c y j n y t r a n s f e r u

p l i k ó w

4.12.2021

Zespół Szkół w
Grzęsce
Marek Szymanowski

Podstawowe pojęcia

J a v a S c r i p t

– j ę z y k p r o g r a m o w a n i a

s k r y p t o w e g o u m o ż l i w i a w p r o w a d z e n i e n a
s t r o n a c h w w w e l e m e n t ó w i n t e r a k t y w n y c h .

A p l e t ( s k r y p t )

– k r ó t k i p r o g r a m s t a n o w i ą c y

c z e ś ć d o k u m e n t u i n t e r n e t o w e g o w y k o n a n y
z a p o m o c ą j ę z y k a J a v a S c r i p t .

P H P

– o b i e k t o w y ję z y k p r o g r a m o w a n i a

z a p r o j e k t o w a n y d o g e n e r o w a n i a s t r o n
i n t e r n e t o w y c h . O p a r t y j e s t n a b a z a c h
d a n y c h n p . S Q L l u b M y S Q L .

4.12.2021

Zespół Szkół w
Grzęsce
Marek Szymanowski

D o k u m e n t h t m l z b u d o w a n y j e s t z k i l k u
p o d s t a w o w y c h

s e k c j i

o t w i e r a n y c h i z a m y k a n y c h

o d p o w i e d n i m i

z n a c z n i k a m i

( t a g a m i ) :

< h t m l >

: / / z n a c z n i k p o c z ą t k u d o k u m e n t u

< h e a d >

c z ę ś ć n a g ł ó w k o w a

< / h e a d >

< b o d y >

c i a ł o d o k u m e n t u

< / b o d y >

< / h t m l >

: / / z n a c z n i k k o ń c a d o k u m e n t u

Budowa dokumentu html

4.12.2021

Zespół Szkół w
Grzęsce
Marek Szymanowski

C zęś ć na głó wk o wa

head

zaw iera na stępujące

info r ma cj e:

<title>Ka mil a m o j a pierw sza str o na</title>

://ty tuł str o ny widz iany w pask u pr zeglądar k i

<title>Str o na I gr up y Infor m aty k i</title>

://ty tuł wid ziany w pask u p rzegląd ark i

<m eta nam e= "auth o r" co n tent="K am ila">
<m eta
nam e="G E NERATOR„ co n tent="no tepad">

Budowa części

head

4.12.2021

Zespół Szkół w
Grzęsce
Marek Szymanowski

Description – opis strony
Keywords – słowa kluczowe

<meta name="title" content="strona o I
grupie informatyki klasy III gimnazjum">
<meta name="description"
content="Strona zawiera informacje o
uczniach ZS w Grzęsce">
<meta name="keywords"
content="Grzęska, ZS Grzęska, Klasa III
G">

Budowa części

head

4.12.2021

Zespół Szkół w
Grzęsce
Marek Szymanowski

Opis kodowania strony w celu wyświetlania
polskich znaków diakrytycznych:

<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-2">
<meta http-equiv="Content-Language"
content="pl">

Stworzony dokument zapisujemy jako np.:

index.html

(strona1.html) stosując

kodowanie

UTF-8

Budowa części

head

4.12.2021

Zespół Szkół w
Grzęsce
Marek Szymanowski

Wstawianie koloru tła i marginesów
strony:
(Przykład 1 - index.html)

<body

bgcolor

="red" leftmargin="20"

rightmargin="30" topmargin="30"
bottommargin="30">

Kolor może być oznaczany za pomocą
kodowania RB G
np.:

<body bgcolor="#OOCCFF„

Budowa części

Body

4.12.2021

Zespół Szkół w
Grzęsce
Marek Szymanowski

Wstawianie koloru tła i marginesów
strony:
(Przykład 2 - index2.html)

<body background="foto/12.jpg"
leftmargin="20" rightmargin="30"
topmargin="30" bottommargin="30">

gdzie

foto

jest to folder w którym

umieszczona jest grafi ka tła

12.jpg

Budowa części

Body

4.12.2021

Zespół Szkół w
Grzęsce
Marek Szymanowski

W s t a w i a n i e p ł y w a j ą c e g o t e k s t u :

< c e n t e r >
< m a r q u e e d i r e c t i o n = " l e f t " b g c o l o r = " r e d "
w i d t h = " 1 0 0 0 " h e i g h t = " 2 0 " > S t r o n a K l a s y I I I
G i m n a z j u m < / m a r q u e e >
< / c e n t e r >

W s t a w i a n i e p o z i o m e j k r e s k i :

< h r a l i g n = " c e n t e r " s i z e = " 5 " c o l o r = " p i n k " >
l u b
< h r w i d t h = " 8 0 % " a l i g n = " c e n t e r " s i z e = " 1 0 "
c o l o r = " g r e e n " >
< b r > p r z e j ś c i e d o n o w e g o
w i e r s z a

Budowa części

Body

4.12.2021

Zespół Szkół w
Grzęsce
Marek Szymanowski

S t o s o w a n ie z n a c z n ik ó w wi e lk o ś c i a ka p it u h1 -h 7
< h 1 > To j e s t p ie r w s z y a k a p i t h 1< /h 1 >
< h 7 > To j e s t d r ug i a k a p i t h 7 </ h 7>

Fo r m a t o wa n i e t e ks t u z a p o m o c ą z n a c z n ik a fo n t :

< fo n t fa c e = "A r ia l " s iz e = "7 "
c ol o r =" r ed " > U c z y m y s ię I n f or m a ty k i< /f on t>
lu b
< fo n t fa c e = "T h o ma "
s i z e = "7 „ c ol o r = "g r ee n " > K la s a I I I G& n b s p
& n b s p & n bs p I nf o rm a t y ka </f o nt >

g d z i e & n b s j es t t o d o da tk o wa s p a c j a

Formatowanie tekstu

4.12.2021

Zespół Szkół w
Grzęsce
Marek Szymanowski

< p a l i g n = " c e n t e r " > < i > Te k s t < / i > < / p >

: / / w y r ó w n a n i e d o ś r o d k a i p o c h y l e n i e

< p
a l i g n = „ r i g h t " > < b > < u > Te k s t < / b > < / u > < /p >

: / / w y r ó w n a n i e d o p r a w e j , p o g r u b i e n i e i
p o d k r e ś l e n i e

D o m y ś l n i e t e k s t f o r m a t o w an y j e s t d o l e w e j .
We w n ą t r z a k a p i t u m o ż e m y r ó w n i e ż f o r m a t o w a ć
w i e l k o ś ć i r o d z a j c z c i on k i .

Formatowanie tekstu

AKAPIT

4.12.2021

Zespół Szkół w
Grzęsce
Marek Szymanowski

G r a fi k ę u m i e s z c z a m y w f o l d e r z e

f o t o -

i n d e x 2 . h t m l

< i m g s r c = " fo t o / 1 1 . jp g ”>

: / / w s t a w i a g r a fi k ę

< i m g s r c = " fo t o / 1 1 . jp g ” w i d t h = „ x ” h e i g h t = „ y ”
a l t = „ t e k s t o b j a ś n i e n i a ” a l i g n = „ t o p ” >

: / / f o r m a t o w a n i e g r a fi k i / a l i g n = „ m i d d l e ” ( b o t t o m -
d o l n a k r a w ę d ź ) - p o ło ż e n i e t e k s t u w s t o s u n k u d o
o b r a z k a /

< p a l i g n = „ c e n t e r ”> g r a fi k a < / p >

: / / j e ż e l i g r a fi k ę

w s ta w i m y w e w n ą t r z z n a c z n i k a p t o u z y s k a m y
o d o w i e d n i e j e j p o ł o ż e n i e

Wstawiane grafiki

4.12.2021

Zespół Szkół w
Grzęsce
Marek Szymanowski

Do stron www: np.
<a href="http://zsgrzeska.pl">

Link do strony

ZS GRZĘSKA</a></br>

lub

<a href="www.wp.pl">Link do strony

WP</a><br>

Listy elektroniczne

<a href="mailto:[e-mail]">

<img

src="foto/at.jpg" height="60”
widht="60"></

a>

<br>

Wstawiane odsyłaczy

4.12.2021

Zespół Szkół w
Grzęsce
Marek Szymanowski

Do innej strony w serwisie:

<a href=„index2.html">

Przejdź do drugiej

strony

</a></br>

Lub powrót do strony głównej

<a href=„index.html">

Wróć do strony

głównej

</a></br>

Wstawiane odsyłaczy

4.12.2021

Zespół Szkół w
Grzęsce
Marek Szymanowski

<ol type="A"> („a” „1”)

<li> pierwszy element listy numerowanej</li>
<li> drugi element listy numerowanej</li>

<ol type="a">

<li> I element podlisty B</li>
<li> II element podlisty B</li>

</ol></ol>

Listy numerowane

4.12.2021

Zespół Szkół w
Grzęsce
Marek Szymanowski

<ul>

<li> I element listy punktowanej</li>
<li>II elment listy punktowanej</li>

<ul>

<li> I element podlisty</li>
<li> II element podlisty</li>

</ul></ul>

Listy punktowane

4.12.2021

Zespół Szkół w
Grzęsce
Marek Szymanowski

Służą do wprowadzania danych lub do
rozmieszczenie elementów na stronie.

Tabela składa się z wierszy, a każdy wiersz z
komórek.

<table border=„1" width="900" height="100"
align="center">

<tr>

://wstawiamy wiersz i trzy komórki

<td>

<td width="300" height="50"align="center"
bgcolor="red">treść</td>

://wstawiamy kolor komórki i jej treść

Tabele

4.12.2021

Zespół Szkół w
Grzęsce
Marek Szymanowski

< td w idth= "3 00 "
height= "5 0"align= "center"> < img
src= "foto/at.jpg" height= "6 0"
w idht= "8 0"> treść < /td>

://możemy również w stawić grafi kę i obrazek tła

< td w idth= "3 00 " height= "50 "align= "c enter"
bac k ground= "foto/11 .jpg"> <h1 > treść< /h1> < /td>
< /tr>
< tr>

:// wstaw iamy drugi wiersz

< td w idth= „3 0 0" height= "50 "align= "center"
bgc olor= „pink "> drugi wiersz</td>

< tr> < /table>

Tabele

4.12.2021

Zespół Szkół w
Grzęsce
Marek Szymanowski

W drugim wierszu musi być tyle samo
komórek co w pierwszym.

Jeżeli chcemy, by w kolejnych wierszach buła
inna liczba komórek, to wstawiamy nową
tabelę.
W tabelach możemy formatować zawartość:

valign=„middle” (top, bottom)

– w pionie

lub

align=„center” – w poziomie

Tabele