HTML-программалау, интернет їшін аќпараттыќ объектілерді ќўру ќўралдары. Web-беттер жјне сайттар.

1.03M

Category:

programming

HTML-программалау, интернет їшін аќпараттыќ объектілерді ќўру ќўралдары. Web-беттер жјне сайттар

1. HTML-программалау, интернет їшін аќпараттыќ объектілерді ќўру ќўралдары. Web-беттер жјне сайттар.

HTML-программалау, интернет үшін
ақпараттық объектілерді құру
құралдары. Web-беттер және сайттар.
1.
2.
3.
4.
5.
6.
7.
Кіріспе
Мәтінді безендіру
Гиперсілтемелер
Тізімдер
Суреттер
Кестелер
Фреймдер

2. Web-беттер. HTML тілі

Тақырып 1. Кіріспе

3.

Web-беттер деген не?
Гиперсілтеме – басқа құжатқа «белсенді» сілтеме.
Гипермәтін – гиперсілтемесі бар мәтін.
Гипермедиа-құжат – мәтін, сурет, дыбыс, бейне
кірістірілген, ондағы әрбір элемент гиперсілтеме
болып табылатын құжат.
WWW (World Wide Web) – «бүкіл әлемдік паутина»,
гипермәтін (гипермедиа) түрінде ақпаратпен
алмасуды іске асыратын Интернет қызметі.
Web-бет – экранда материалдың орналасуын
сипаттайтын мәтіндік файл.
Браузер – Web-беттерді экранда көрсету
бағдарламасы (Internet Explorer, Mozilla Firefox,
Opera).
3

4.

Web-беттер қандай болады?
• статикалық – серверде дайын файлдар түрінде
болады:
*.htm, *.html
• динамикалық – серверде сұраныс кезінде толық
немесе жартылай жасалады (ақпаратты деректер
қорынан алу)
*.shtml, *.asp, *.pl, *.php
• Ақпаратты деректер қорынан алдын ала белгісіз
сұраныс бойынша таңдауға мүмкіндік береді
• Серверге қосымша жүктеме
• Баяу жүктеледі
4

5.

HTML тілі
HTML = Hypertext Markup Language
(гипермәтінді оқу тілі)
!
HTML – бұл программалау тілі емес!
HTML-бет – бұл мәтіндік файл (Блокнот):
index.html
<HTML>
<HEAD>
<TITLE>Менің бетім</TITLE>
</HEAD>
<BODY>
Салем!
…
</BODY>
</HTML>
images
sail.jpg
bee.wav
man.jpg
clock.avi
sunset.jpg
ball.swf
5

6.

Тэгтер
Тэг – браузер орындайтын HTML тілінің командасы:
Сурет
қою
• жұпты емес тэгтер
<IMG SRC = “suret.jpg">
• жұпты тэгтер
ашушы
<TABLE>
...
</TABLE>
тэгтің орындалу
облысы: кестінің
мазмұны
жабушы
6

7.

Қарапайым Web-бет
first.html
басы
<HTML>
<HEAD>
<TITLE>Моя первая
<TITLE>Менің
бірінші
Web-страница</TITLE>
Web-бетім</TITLE>
</HEAD>
<BODY>
Привет!
</BODY>
</HTML>
Негізгі бөлігі
(«денесі»)
7

8.

Түсті кодтау
• Атаулар
red, green, blue, magenta, black, white
• Оналтылық код
# FA8072
R G B
# FF0000
# FFFFFF
# 00FFFF
# 000000
# AAAAAA
8

9. Web-беттер. HTML тілі

Тақырып 2. Мәтінді безендіру

10.

BODY тэгі – беттің жалпы қасиеттері
• бет пен тәтіннің түсі
тэгтің атрибуттары
мәтіннің түсі
<BODY TEXT="white"
BGCOLOR=#00FF00>
Привет!
беттің түсі
</BODY>
• гиперсілтемелердің түсі
сілтемелер түсі
<BODY LINK="#FF8C00"
VLINK=green>
...
</BODY>
10

11.

FONT тэгі – мәтін блогының қасиеттері
• мәтіннің түсі
Привет!
<FONT COLOR=red>
Как дела?
</FONT>
• қаріптің өлшемі
Привет!
<FONT COLOR=red
SIZE=6>
Как дела?
</FONT> 1-ден 7-ге дейін
11

12.

Безендіру стильдері
қалың (bold)
<B>Вася</B>
Вася
курсив (italic)
<I>Вася</I>
Вася
асты сызылған
(underline)
<U>Вася</U>
Вася
сызылып тасталған
(strike out)
<S>Вася</S>
Вася
жоғарғы индекс
(superscript)
Вася<SUP>2</SUP
Вася2
>
астыңғы индекс
(subscript)
Вася<SUB>2</SUB
Вася2
>
12

13.

Басты атауы: H1 … H6
<BODY>
<H1>Құжаттың басты атауы</H1>
<H2>Бөлімнің басты атауы</H2>
<H3>Екінші бөлімнің басты атауы</H3>
<H4>Параграфтың басты атауы</H4>
<H5>Комментарий</H5>
<H6>Авторлық белгілер</H6>
</BODY>
left,
туралау:
center,
right
<H1 ALIGN=center>История</H1>
13

14.

Абзац
• Жаңа жолға өту
Одно физическое тело захотело
поменять три своих
старых варежки на что-нибудь
хорошее.
<BR>
До самого вечера тело с
варежками ...
• абзац
<P>
Одно физическое тело захотело
поменять три своих старых варежки
на что-нибудь хорошее.
</P>
<P>
До самого вечера тело с варежками ...
</P>
14

15.

Туралау
атрибут тэга <P>
<P ALIGN="center">
Этот текст выровнен по центру.
</P>
<P ALIGN="justify">
Этот текст выровнен по ширине.
Этот текст выровнен по ширине.
Этот текст выровнен по ширине.
Этот текст выровнен по ширине.
</P>
left
right
center
justify
сол жақ шекара
оң жақ шекара
орта
ені бойынша
15

16.

Бөлу сызығы
horizontal rule
<HR>
Енін процент немесе
пиксельдерде өлшеу
қалыңдығы
туралау
<HR WIDTH="60%" SIZE="3" ALIGN="right">
16

17. Web-беттер. HTML тілі

Тақырып 3. Гиперсілтеме

18.

Гиперсілтеме түсі
<BODY LINK="#FF8C00"
VLINK=green
ALINK=red>
...
</BODY>
LINK
VLINK
ALINK
пайдаланылмаған сілтемелер
пайдаланылған сілтемелер
белсенді сілтемелер
18

19.

Сайттың басқа беттеріне сілтемелер
• Сол бумадағы бет
anchor (якорь)
<A HREF="table.htm">Таблицы</A>
hyper reference
(гиперсілтеме)
• Салынған бумадағы бет
<A HREF="example/ex1.htm">Мысал</A>
• Басқа бумадағы бет
<A HREF="../texts/text1.htm">Мәтін</A>
Бумадан шығу
19

20.

Басқа сайттарға сілтеме
• Сайттың басты бетіне
<A HREF="http://www.mail.ru">Почта</A>
index.htm, index.html, default.asp, …
• Сайттың белгілі бір бетіне (URL)
<A HREF="http://www.vasya.ru/text/a.htm">
Васин текст</A>
• Жүктелетін файлға
<A HREF="http://www.vasya.ru/prog.zip">
Скачать</A>
20

21.

Беттің ішіндегі сілтемелер
<A NAME="up"></A>
белгіге көшу
<A HREF="#chap1">Глава 1</A><br>
<A HREF="#chap2">Глава 2</A><br>
<A NAME="chap1"></A>
<H1>Глава 1</H1>
белгі (якорь)
Это текст главы 1. Это текст главы 1.
Это текст главы 1. Это текст главы 1.<BR>
<A HREF="#up">Наверх</A>
<A NAME="chap2"></A>
<H1>Глава 2</H1>
Это текст главы 2. Это текст главы 2.
Это текст главы 2. Это текст главы 2.<BR>
<A HREF="#up">Наверх</A>
• басқа файлда
<A HREF="texts.html#color">Мәтіннің түсі</A>
21

22.

Пошталық программаны іске қосу
<A HREF="mailto:vasya@mail.ru">
Напишите мне!
</A>
22

23. Web-беттер. HTML тілі

Тақырып 4. Тізім

24.

Маркерленген тізімдер
unordered list
(түзетілмеген тізім)
<UL>
<LI>Вася
<LI>Петя
<LI>Коля
</UL>
list item
(тізімнің элементі)
маркердің өзгеруі:
<UL TYPE="disk">
...
</UL>
disk
circle
○
square ■
24

25.

Нөмірленген тізімдер
ordered list
(түзетілген тізім)
<OL>
<LI>Вася
<LI>Петя
<LI>Коля
</OL>
нөмірлеуді түзету:
1, i, I, a, A
<OL TYPE=i START=3>
...
</OL>
25

26.

Көпдеңгейлі тізімдер
<UL>
<LI>Города России
<OL>
<LI>Москва
<LI>Санкт-Петерург
</OL>
<LI>Города Украины
<OL>
<LI>Киев
<LI>Одесса
</OL>
</UL>
26

27. Web-беттер. HTML тілі

Тақырып 5. Суреттер

28.

Суреттер форматы
GIF (Graphic Interchange Format)
• анимация
• палитра (2…256 түстер)
JPEG (Joint Photographer Expert Group)
• True Color (16,7 млн.түстер)
• анимация жоқ
PNG (Portable Network Graphic)
• палитра (PNG-8) және True Color (PNG-24)
• анимация жоқ
28

29.

Беттің түсі
<BODY BACKGROUND="back.jpg">
"images/back.jpg"
"../images/back.jpg"
"http://www.vasya.ru/images/back.jpg"
! Шекара болмауы қажет!
! Беттің түсі бөгет
жасамау қажет
29

30.

Құжаттағы суреттер
сол бумадан:
image
(сурет)
source
(түп нұсқасы)
<IMG SRC="flag.jpg">
басқа бумадан:
<IMG SRC="images/flag.jpg">
<IMG SRC="../images/flag.jpg">
басқа серверден:
<IMG SRC="http://www.vasya.ru/img/flag.jpg">
30

31.

Туралау
<IMG SRC="flag.jpg" ALIGN="left">
left
top
right
bottom
(по умолчанию)
middle
31

32.

Шегіну
<IMG SRC="net.jpg"
ALIGN="left">
<IMG SRC="net.jpg"
ALIGN="left"
HSPACE=10
VSPACE=10>
VSPACE
(vertical space)
HSPACE
(horizontal space)
32

33.

Басқа атрибуттар
• көмек
• Сурет жоқ болғандағы
мәтін
<IMG SRC="myphoto.jpg"
ALT=«Менің фотографиям"
WIDTH=100 HEIGHT=150
BORDER=0>
өлшемдері:
• Қысу - созу
• Сурет жоқ болса,
дизайн өзгермейді
Сурет жиегі
сызығының
қалыңдығы
33

34.

Сурет-гиперсілтеме
Жергілікті сілтеме:
Көк жиек пайда
болады
<A HREF="table.htm">
<IMG SRC="tbl.jpg" ALT="Таблицы" BORDER=0>
</A>
Егер </A> <IMG …>-ге
жақын болмаса,
суреттегідей болады
Басқа серверге сілтеме:
болмайды
<A HREF="http://www.mail.ru">
<IMG SRC="mailru.jpg"
ALT="Бесплатная почта" BORDER=0></A>
34

35. Web-беттер. HTML тілі

Тақырып 6. Кестелер

36.

Қарапайым кесте
Шекараның қалыңдығы
<TABLE BORDER="1">
<TR>
<TD>Таблица из одной строки</TD>
<TD>из трех столбцов</TD>
<TD>без указания ширины таблицы
и ячеек.</TD>
</TR>
</TABLE>
TABLE
TR = table row
TD = table data
TH = table header
кесте
кесте қатары
кесте мәліметтері
тақырып (қарайтылған, ортадан)
36

37.

Өлшемдер
Барлық кесте:
Пиксельмен биіктік
<TABLE WIDTH="60%" HEIGHT="300">
...
Пиксельмен ені немесе
</TABLE>
% браузер терезесінің
жолдың:
еніне байланысты
<TR HEIGHT="50">
...
Пиксельмен ені
</TR>
ұяшықтың:
немесе % кесте
еніне байланысты
<TD WIDTH="25%" HEIGHT="50">
...
</TD>
37

38.

Туралау
Барлық кесте:
<TABLE ALIGN="center">
...
</TABLE>
Ұяшықардағы ақпарат:
left,
center,
right
left,
center,
right
<TABLE BORDER="1">
<TR ALIGN="center"
VALIGN="top">
<TD WIDTH=120 HEIGHT=100>По
центру, по верхней границе</TD>
<TD ALIGN="right" VALIGN="middle"
WIDTH=200>По правой границе,
по середине</TD>
</TR>
</TABLE>
top,
middle,
bottom
38

39.

Беттің және мәтіннің түсі
Беттің түсі
<TABLE BORDER="1" BGCOLOR="green">
<TR HEIGHT=30 BGCOLOR="blue">
<TD><FONT COLOR="white">Привет!</FONT></TD>
<TD BGCOLOR="red"></TD>
</TR>
сурет
<TR>
<TD BACKGROUND="web.jpg">Таблица из двух
строк</TD>
<TD>и двух столбцов</TD>
</TR>
</TABLE>
39

40.

Шегіну
ұяшықтар арасындағы
интервал
ұяшықтар
ішіндегі отступ
<TABLE CELLSPACING = 10 CELLPADDING = 10
BGCOLOR = blue>
<TR BGCOLOR = white>
<TD WIDTH = 100>1</TD>
<TD WIDTH = 100>2</TD>
</TR>
</TABLE>
CELLPADDING
CELLPADDING
CELLSPACING
CELLSPACING
40

41.

Ұяшықтарды біріктіру
<TABLE BORDER="1">
<TR>
<TD COLSPAN="3">Привет!</TD>
</TR>
<TR>
<TD>Вася,</TD>
column span
<TD>Петя,</TD>
бағандарды алу
<TD>Маша!</TD>
</TR>
</TABLE>
row span
жолдарды алу
<TABLE BORDER="1">
<TR>
<TD ROWSPAN="3">Привет!</TD>
<TD>Вася,</TD>
</TR>
<TR><TD>Петя,</TD></TR>
<TR><TD>Маша!</TD></TR>
</TABLE>
41

42.

Кірістірілген кестелер
<TABLE BORDER="0" CELLSPACING=10>
<TR><TD>
<TABLE BORDER="1">
<TR><TD>Вася</TD><TD>Петя</TD></TR>
<TR><TD>Маша</TD><TD>Даша</TD></TR>
</TABLE>
</TD>
<TD>
<TABLE BORDER="1">
<TR><TD>1</TD><TD>22</TD></TR>
<TR><TD>333</TD><TD>4444</TD></TR>
</TABLE>
</TD></TR>
</TABLE>
42

43. Web-беттер. HTML тілі

Тақырып 7. Фрейм

44.

Фрейм
Фрейм (frame) – бұл бір Web-бетке екінші бір Webбеттің жүктелетін бөлігі.
3 файл:
left.html
right.html
index.html
– сол жақтағы бет
– оң жақтағы бет
– құрылымының суреттелуі
44

45.

Құрылымының суреттелуі
index.html
columns
бағандар
Ені пиксельмен
немесе %
<BODY>
...
</BODY>
<HTML>
<HEAD>
<TITLE>Фреймы-столбцы</TITLE>
</HEAD>
Қалған орын
<FRAMESET COLS="30%,*">
<FRAME SRC="left.html">
<FRAME SRC="right.html" NAME="qq">
</FRAMESET>
source
Фрейм аты
</HTML>
(сілтеме үшін)
45

46.

Фреймдер арасындағы шекара
Фреймдер арасындағы шекара:
0 – көрінбейді, 1 - көрінеді
<FRAMESET COLS="30%,*" FRAMEBORDER="0">
...
</FRAMESET>
фреймдер арасындағы
жолақтар ені
<FRAMESET COLS="30%,*" FRAMESPACING="10">
...
</FRAMESET>
46

47.

Фрейм-жолдар
index.html
Ені пиксельмен
немесе %
<HTML>
жолдар
<HEAD>
<TITLE>Фреймы-строки</TITLE>
</HEAD>
<FRAMESET ROWS="120,*">
<FRAME SRC="up.html">
<FRAME SRC="down.html"
NAME="qq">
</FRAMESET>
</HTML>
47

English Русский Rules