Tworzenie Stron Internetowych

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

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:

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 >

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

< / 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

Budowa części

head

4.12.2021

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

Description – opis strony
Keywords – słowa kluczowe

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:

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 " >
 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

 Te k s t 

: / / 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

Te k s t

: / / 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

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

: / / 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 /

 g r a fi k a 

: / / 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>

lub

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

WP</a>

Listy elektroniczne

<img

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

Wstawiane odsyłaczy

4.12.2021

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

Do innej strony w serwisie:

Przejdź do drugiej

strony

</a>

Lub powrót do strony głównej

Wróć do strony

głównej

</a>

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>

<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.

<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

Document Outline