Программное обеспечение (ПО)
Download
Report
Transcript Программное обеспечение (ПО)
HTML-программалау, интернет үшін
ақпараттық объектілерді құру
құралдары. Web-беттер және сайттар.
1.
2.
3.
4.
5.
6.
7.
Кіріспе
Мәтінді безендіру
Гиперсілтемелер
Тізімдер
Суреттер
Кестелер
Фреймдер
Web-беттер.
HTML тілі
Тақырып 1. Кіріспе
Web-беттер деген не?
Гиперсілтеме – басқа құжатқа «белсенді» сілтеме.
Гипермәтін – гиперсілтемесі бар мәтін.
Гипермедиа-құжат – мәтін, сурет, дыбыс, бейне
кірістірілген, ондағы әрбір элемент гиперсілтеме
болып табылатын құжат.
WWW (World Wide Web) – «бүкіл әлемдік паутина»,
гипермәтін (гипермедиа) түрінде ақпаратпен
алмасуды іске асыратын Интернет қызметі.
Web-бет – экранда материалдың орналасуын
сипаттайтын мәтіндік файл.
Браузер – Web-беттерді экранда көрсету
бағдарламасы (Internet Explorer, Mozilla Firefox,
Opera).
3
Web-беттер қандай болады?
• статикалық – серверде дайын файлдар түрінде
болады:
*.htm, *.html
• динамикалық – серверде сұраныс кезінде толық
немесе жартылай жасалады (ақпаратты деректер
қорынан алу)
*.shtml, *.asp, *.pl, *.php
• Ақпаратты деректер қорынан алдын ала белгісіз
сұраныс бойынша таңдауға мүмкіндік береді
• Серверге қосымша жүктеме
• Баяу жүктеледі
4
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
Тэгтер
Тэг – браузер орындайтын HTML тілінің командасы:
Сурет
қою
• жұпты емес тэгтер
<IMG SRC = “suret.jpg">
• жұпты тэгтер
ашушы
<TABLE>
...
</TABLE>
тэгтің орындалу
облысы: кестінің
мазмұны
жабушы
6
Қарапайым Web-бет
first.html
басы
<HTML>
<HEAD>
<TITLE>Моя первая
<TITLE>Менің
бірінші
Web-страница</TITLE>
Web-бетім</TITLE>
</HEAD>
<BODY>
Привет!
</BODY>
</HTML>
Негізгі бөлігі
(«денесі»)
7
Түсті кодтау
• Атаулар
red, green, blue, magenta, black, white
• Оналтылық код
# FA8072
R G B
# FF0000
# FFFFFF
# 00FFFF
# 000000
# AAAAAA
8
Web-беттер.
HTML тілі
Тақырып 2. Мәтінді безендіру
BODY тэгі – беттің жалпы қасиеттері
• бет пен тәтіннің түсі
тэгтің атрибуттары
мәтіннің түсі
<BODY TEXT="white"
BGCOLOR=#00FF00>
Привет!
беттің түсі
</BODY>
• гиперсілтемелердің түсі
сілтемелер түсі
<BODY LINK="#FF8C00"
VLINK=green>
...
</BODY>
10
FONT тэгі – мәтін блогының қасиеттері
• мәтіннің түсі
Привет!
<FONT COLOR=red>
Как дела?
</FONT>
• қаріптің өлшемі
Привет!
<FONT COLOR=red
SIZE=6>
Как дела?
</FONT> 1-ден 7-ге дейін
11
Безендіру стильдері
қалың (bold)
<B>Вася</B>
Вася
курсив (italic)
<I>Вася</I>
Вася
асты сызылған
(underline)
<U>Вася</U>
Вася
сызылып тасталған
(strike out)
<S>Вася</S>
Вася
жоғарғы индекс
(superscript)
Вася<SUP>2</SUP
Вася2
>
астыңғы индекс
(subscript)
Вася<SUB>2</SUB
Вася2
>
12
Басты атауы: H1 … H6
<BODY>
<H1>Құжаттың басты атауы</H1>
<H2>Бөлімнің басты атауы</H2>
<H3>Екінші бөлімнің басты атауы</H3>
<H4>Параграфтың басты атауы</H4>
<H5>Комментарий</H5>
<H6>Авторлық белгілер</H6>
</BODY>
left,
туралау:
center,
right
<H1 ALIGN=center>История</H1>
13
Абзац
• Жаңа жолға өту
Одно физическое тело захотело
поменять три своих
старых варежки на что-нибудь
хорошее.
<BR>
До самого вечера тело с
варежками ...
• абзац
<P>
Одно физическое тело захотело
поменять три своих старых варежки
на что-нибудь хорошее.
</P>
<P>
До самого вечера тело с варежками ...
</P>
14
Туралау
атрибут тэга <P>
<P ALIGN="center">
Этот текст выровнен
</P>
<P ALIGN="justify">
Этот текст выровнен
Этот текст выровнен
Этот текст выровнен
Этот текст выровнен
</P>
left
right
center
justify
по центру.
по
по
по
по
ширине.
ширине.
ширине.
ширине.
сол жақ шекара
оң жақ шекара
орта
ені бойынша
15
Бөлу сызығы
horizontal rule
<HR>
Енін процент немесе
пиксельдерде өлшеу
қалыңдығы
туралау
<HR WIDTH="60%" SIZE="3" ALIGN="right">
16
Web-беттер.
HTML тілі
Тақырып 3. Гиперсілтеме
Цвет гиперссылок
<BODY LINK="#FF8C00"
VLINK=green
ALINK=red>
...
</BODY>
LINK
VLINK
ALINK
пайдаланылмаған сілтемелер
пайдаланылған сілтемелер
белсенді сілтемелер
18
Сайттың басқа беттеріне сілтемелер
• Сол бумадағы бет
anchor (якорь)
<A HREF="table.htm">Таблицы</A>
hyper reference
(гиперсілтеме)
• Салынған бумадағы бет
<A HREF="example/ex1.htm">Мысал</A>
• Басқа бумадағы бет
<A HREF="../texts/text1.htm">Мәтін</A>
Бумадан шығу
19
Басқа сайттарға сілтеме
• Сайттың басты бетіне
<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
Беттің ішіндегі сілтемелер
<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
Пошталық программаны іске қосу
<A HREF="mailto:[email protected]">
Напишите мне!
</A>
22
Web-беттер.
HTML тілі
Тақырып 4. Тізім
Маркерленген тізімдер
unordered list
(түзетілмеген тізім)
<UL>
<LI>Вася
<LI>Петя
<LI>Коля
</UL>
list item
(тізімнің элементі)
маркердің өзгеруі:
<UL TYPE="disk">
...
</UL>
disk
circle
○
square ■
24
Нөмірленген тізімдер
ordered list
(түзетілген тізім)
<OL>
<LI>Вася
<LI>Петя
<LI>Коля
</OL>
нөмірлеуді түзету:
1, i, I, a, A
<OL TYPE=i START=3>
...
</OL>
25
Көпдеңгейлі тізімдер
<UL>
<LI>Города России
<OL>
<LI>Москва
<LI>Санкт-Петерург
</OL>
<LI>Города Украины
<OL>
<LI>Киев
<LI>Одесса
</OL>
</UL>
26
Web-беттер.
HTML тілі
Тақырып 5. Суреттер
Суреттер форматы
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
Беттің түсі
<BODY BACKGROUND="back.jpg">
"images/back.jpg"
"../images/back.jpg"
"http://www.vasya.ru/images/back.jpg"
!
Шекара болмауы қажет!
!
Беттің түсі бөгет
жасамау қажет
29
Құжаттағы суреттер
сол бумадан:
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
Туралау
<IMG SRC="flag.jpg" ALIGN="left">
left
top
right
bottom
(по умолчанию)
middle
31
Шегіну
<IMG SRC="net.jpg"
ALIGN="left">
<IMG SRC="net.jpg"
ALIGN="left"
HSPACE=10
VSPACE=10>
VSPACE
(vertical space)
HSPACE
(horizontal space)
32
Басқа атрибуттар
<IMG SRC="myphoto.jpg"
ALT="Моя фотография"
WIDTH=100 HEIGHT=150
BORDER=0>
• всплывающая
подсказка
• надпись на месте
рисунка, если его нет
размеры позволяют:
• растянуть - сжать
• не портить дизайн,
если рисунка нет
толщина рамки
вокруг рисунка
33
Сурет-гиперсілтеме
Жергілікті сілтеме:
иначе будет синяя
рамка вокруг
<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
Web-беттер.
HTML тілі
Тақырып 6. Кестелер
Қарапайым кесте
Шекараның қалыңдығы
<TABLE BORDER="1">
<TR>
<TD>Таблица из одной строки</TD>
<TD>из трех столбцов</TD>
<TD>без указания ширины таблицы
и ячеек.</TD>
</TR>
</TABLE>
TABLE
TR = table row
TD = table data
TH = table header
таблица
строка таблицы
данные таблицы
заголовок (жирный, по центру)
36
Өлшемдер
всей таблицы:
высота в пикселях
<TABLE WIDTH="60%" HEIGHT="300">
...
ширина в пикселях
</TABLE>
или в % от ширины
строки:
окна браузера
<TR HEIGHT="50">
...
ширина в пикселях
</TR>
ячейки:
или в % от ширины
таблицы
<TD WIDTH="25%" HEIGHT="50">
...
</TD>
37
Туралау
всей таблицы:
<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
Беттің және мәтіннің түсі
Беттің түсі
<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
Шегіну
интервал между
ячейками
отступ внутри
ячеек
<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
Ұяшықтарды біріктіру
<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
Кірістірілген кестелер
<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
Web-беттер.
HTML тілі
Тақырып 7. Фрейм
Фрейм
Фрейм (frame) – бұл бір Web-бетке екінші бір Webбеттің жүктелетін бөлігі.
3 файл:
left.html
right.html
index.html
– сол жақтағы бет
– оң жақтағы бет
– құрылымының суреттелуі
44
Құрылымының суреттелуі
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
Фреймдер арасындағы шекара
граница между фреймами:
0 – невидима, 1 - видима
<FRAMESET COLS="30%,*" FRAMEBORDER="0">
...
</FRAMESET>
ширина полосы между
фреймами, за которую можно
перетащить границу
<FRAMESET COLS="30%,*" FRAMESPACING="10">
...
</FRAMESET>
46
Фрейм-жолдар
index.html
ширина в
пикселях или %
<HTML>
строки
<HEAD>
<TITLE>Фреймы-строки</TITLE>
</HEAD>
<FRAMESET ROWS="120,*">
<FRAME SRC="up.html">
<FRAME SRC="down.html"
NAME="qq">
</FRAMESET>
</HTML>
47