0% нашли этот документ полезным (0 голосов)

80 просмотров44 страницы

HTML Tili-1

Загружено:

alisherabdullah570

Авторское право

Мы серьезно относимся к защите прав на контент. Если вы подозреваете, что это ваш контент, заявите об этом здесь.

Доступные форматы

Скачать в формате PDF, TXT или читать онлайн в Scribd

0% нашли этот документ полезным (0 голосов)

80 просмотров44 страницы

HTML Tili-1

Загружено:

alisherabdullah570

Авторское право

Доступные форматы

Скачать в формате PDF, TXT или читать онлайн в Scribd

Вы находитесь на странице: 1/ 44

Web-технологиялар

HTML тили
1. Кирисиу
2. Текстлерди безеу
3. Гиперссылкалар
4. Дизимлер
5. Суүтерлер
6. Кестелер
7. Фреймлар
Web-бетлер.
HTML тили
Кирисиу
Web-бетлер бул …
Гиперссылка – басқа документке «актив»
ссылкалар.
Гипертекст – гиперссылкаларға ийе текстлер.
WWW (World Wide Web) – «дүня жүзлик ормекши
торы», гипертекст коринисиндеги мағлыўматларды
алмасыўши Интернет хизмети.
Web-бет – текстлы файл болып, экрандағы
материалдиң кориниси.
Браузер – Web-бетлерди кориу ушын программа
(Internet Explorer, Mozilla Firefox, Opera, Google
Chrome).

3
Web-бетлердин турлери
• статикалык – *.htm, *.html кенгейтпелерине ийе
болган файллар тури

• динамикалык – .shtml, .asp, .pl, .php

кенгейтпелерине ийе болган файллар тури

4
HTML тили
HTML = Hypertext Markup Language
(разметкалы гипертекстлер тили)
! HTML – бул программаласырыу тили емес!

HTML-бет – бул текстли файл (Блокнот):

index.html images
<HTML>
<HEAD>
<TITLE>Менин Web-сайтым</TITLE>
</HEAD> keme.jpg suret2.jpg
suret.jpg
<BODY>
Салем!
…
</BODY>
</HTML> bee.wav ball.swf
clock.avi

5
Тэглер
Тэг – бул HTML тилинин буйрыклары болып, браузер
тарепинен орынланады:
Сурет
• Жуп болмаган тэглер жайластырыу
<IMG SRC = “suret.jpg">

• Жуп тэглер (контейнерлер)

ашылыуши

<TABLE> Кесте ишин

... тарийплейши
</TABLE> тэглер

жабылиуши
6
Апыуыйы Web-бет
index.html
<HTML>
<HEAD>
<TITLE>Моя первая
<TITLE>Менин биринши
Web-страница</TITLE>
Web сайтым</TITLE>
</HEAD>
<BODY>
Привет!
Салем!
</BODY>
</HTML>

7
Текстлы редакторлар

Блокнот программасы

текстлы
Браузер (IE)
редактор

8
Текстлы редакторлар
текстлы Браузер (IE)
Notepad++ программасы
редактор

Notepad++ текстлы редакторынын Блокнот

программасынын паркы HTML тили тэглери жасыл
ренде коринеди
9
Ренлер
• Рен атлары
red, green, blue, magenta, black, white
• Оналтылык санак дизими

# FA8072
R G B
# FF0000
# FFFFFF
# 00FFFF
# 000000
# AAAAAA
10
Web-бетлер.
HTML тили
Текстлерди безеу
BODY тэги – ен тийкаргы тэг есапланады
• Фон хам текстлер ренлери
тэг атрибутлари текст рени
<BODY TEXT="white"
BGCOLOR=#00FF00>
Салем!
фон рени
</BODY>

• Гиперссыкалар ренлери Ссылка

рени

<BODY LINK="#FF8C00"
VLINK=green>
... Корип шыгылган ссылка
</BODY> ени
(visited link) 12
FONT тэги –текст рени
• Текст рени
Салем,
<FONT COLOR=red>
хаммеге!
</FONT>

• Шрифт олшеми
Салем,
<FONT COLOR=red
SIZE=6>
хаммеге!
</FONT> 1 ден 7 ге шекем
(3 – орташа)
13
Оформления стиллери

Сия рен (bold) <B>Салем</B> Салем

курсив (italic) <I>Салем</I> Салем
Асты сызылган
(underline) <U>Салем</U> Салем

Усты сызылган
(strike out) <S>Салем</S> Салем

Индекс
жокарыдан Салем<SUP>2</SUP> Салем2
(superscript)
Индекс томеннен
(subscript) Салем<SUB>2</SUB> Салем2
14
Форматланган текстлер (программа тексты)
program qq;
var a, b: integer;
begin
writeln(«Еки сан киритин:");
read(a,b);
writeln(a,'+',b,'=',a+b);
форматланган текст
end. (preformatted)
<PRE>
program qq;
var a, b: integer;
begin
writeln("Еки сан киритин:");
read(a,b);
writeln(a,'+',b,'=',a+b);
end.
</PRE>
15
Заголовкалар: H1 … H6
<BODY>
<H1>Заголовок документа</H1>
<H2>Заголовок раздела</H2>
<H3>Заголовок подраздела</H3>
<H4>Заголовок параграфа</H4>
<H5>Комментарий</H5>
<H6>Авторские пометки</H6>
</BODY>
left,
center,
тенлестириу:
right

<H1 ALIGN=center>История</H1>

16
Арнаулы белгилер
Белги HTML-коды Аты
¡ или   Узликсиз пробел
§ § параграф
© © или © Авторлык хукук символы
« « или « Орысша шеп жакша
® ® или ® Регистрация етилген сауда белгиси
° ° градус
± ± плюс-минус
² ² квадрат
³ ³ куб
» » или » Орысша он жакша
¼ ¼ Торттен бир
½ ½ ярым
¾ ¾ Торттен уш
× × Кобейтуу
÷ ÷ болиу 17
Абзацлар
• Жана катарга тусиу
.
.
<BR>
.
.

• абзац
<P>
......
....
</P>
<P>
......
....
</P>
18
Тенлестириулер
атрибут тэга <P>
<P ALIGN="center">
Этот текст выровнен по центру.
</P>
<P ALIGN="justify">
Этот текст выровнен по ширине.
Этот текст выровнен по ширине.
Этот текст выровнен по ширине.
Этот текст выровнен по ширине.
</P>

left шеп шегара бойынша

right он шегара бойынша
center орай шегара бойынша
justify ени шегара бойынша
19
Болиу линия

horizontal rule
<HR>

пиксел ямаса
процентте
калинлигы Тенлестириу тури

<HR WIDTH="60%" SIZE="3" ALIGN="right">

20
Web-бетлер.
HTML тили
Гиперссылкалар
Гиперссылка ренлери

LINK еле корип шыгылмаган ссылкалар

VLINK алдын корип шыгылган ссылкалар
ALINK актив ссылкалар

22
Web-бетлерге гиперссылкалар
• Бир папкада жайласкан хужжетлерге
Гиперссылка тэги

<A HREF="table.htm">Кестелер</A>

• Иште жайласкан хужжетлер ушын

<A HREF="example/ex1.htm">www.umail.uz</A>

• Консы папкада жайласкан хужжетлер ушын

<A HREF="../texts/text1.htm">Текст</A>

Бир папка сыртка шыгыу

23
Мысаллар (websayt.html файлынан
ссылкалар)
– хикаялар
хикаялар.html
– раманлар
дизим.html
– жана
websayt.html
websayt2.html
– mail.uz
e-mail.html

24
Web сайтларга ссылкалар
• Сайттин бас хужжетине
<A HREF="http://www.umail.uz">Почта</A>

index.htm, index.html, default.asp, …

• Сайттин анык (URL) бир хужжетине

<A HREF="http://www.edu.uz/talim/info.htm">
Толык маглыумат</A>

• Файлларды жуклеп алыу ушын

<A HREF="http://www.soft.uz/muzika.mp3">
Жуклеп алау</A>

25
Хужжеттин ишинде ссылкалар
<A NAME="up"></A> переход на метку
<A HREF="#bap_1">Бап 1</A><br>
<A HREF="#bap_2">Бап 2</A><br>
<A NAME="bap_1"></A>
<H1> Бап 1</H1>
Бул 1-ши бап тексти. Бул 1-ши бап тексти.
Бул 1-ши бап тексти. <BR>
<A HREF="#up">Жокарыга</A>
<A NAME="bap_2"></A>
<H1> Бап 2</H1>
Бул 2-ши бап тексти. Бул 2-ши бап тексти.
Бул 2-ши бап тексти. <BR>
<A HREF="#up">Наверх</A>

26
Web-бетлер.
HTML тили
Дизимлер
Маркерленген дизимлер

Тартиплеспеген дизим

Дизим элементи
<UL>
<LI>Математика
<LI>Информатика
<LI>Инглиз тили
</UL>

Маркерды озгертиу:
<UL TYPE="disk"> disk 
... circle ○
</UL> square ■
28
Номерленген дизимлер
Тартиплесген дизим

<OL>
<LI>Математика
<LI>Информатика
<LI>Инглиз тили
</OL>
Номерды озгертиу:
1, i, I, a, A
<OL TYPE=i START=3>
...
</OL>
29
Коп паганалы дизимлер

<UL>
<LI>Ташкент
<OL>
<LI>Юнусобод
<LI>Мирзо Улугбек
</OL>
<LI>Каракапагистон
<OL>
<LI>Нокис
<LI>Хожели
</OL>
</UL>
30
Web-бетлер.
HTML тили
Суретлер
Сурет форматлары
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)
• Анимация жок

32
Хужжет фоны
<BODY BACKGROUND="back.jpg">

"images/back.jpg"
"../images/back.jpg"

33
Хужжет ишинде суретлер
Бир папкада жайласкан хужжет хам сурет:
image source
(изображение) (источник)

Бака папкада жайласкан :

Баска серверде жайласкан суретлер:

34
Суретлерди хужжетте жайластыриу
<IMG SRC=«suret.jpg" ALIGN="left">
left right

top bottom middle

(корсетилмеген жагдайда, по умолчанию)

35
Аралыклар
<IMG SRC="net.jpg" <IMG SRC="net.jpg"
ALIGN="left"> ALIGN="left"
HSPACE=10
VSPACE=10>

VSPACE
(vertical space)

HSPACE
(horizontal space)

36
Баска атрибутлар

• Жардемши текст
• Егер сурет жок болса
пайда болиуши текст
<IMG SRC=«suret1.jpg"
ALT=«Менин суретим"
Суреттин ени хам
WIDTH=100 HEIGHT=150 бийиклигин
белгилеу
BORDER=0>

Сурет рамкаси
калынлыгы

37
Web-бетлер.
HTML тили
Кестелер
Апиуайы кесте
<TABLE BORDER="1"> Рамка калынлыгы
<TR>
<TD>Информатика 1</TD>
<TD>Информатика 2</TD>
<TD>Информатика 3</TD>
</TR>
</TABLE>

TABLE Кесте
TR = table row Кесте катары
TD = table data кесте берилгенлери
TH = table header Кесте заголовка
39
Олшемлер:
Кесте ушын: Бийиклик, пикселерде

<TABLE WIDTH="60%" HEIGHT="300">

...
Ени, пикселерде яки
</TABLE> браузер айнасы
проценти менен
Катарлар ушын:
<TR HEIGHT="50">
...
Ени, пикселерде яки
</TR>
браузер айнасы
Ячейкалар ушын: проценти менен
<TD WIDTH="25%" HEIGHT="50">
...
</TD>
40
Тексттин фон хам ренлери
Фон рени

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

41
Аралыклар
Ячейкалар ара Ячеека ишинде
аралык аралык
<TABLE CELLSPACING = 10 CELLPADDING = 10
BGCOLOR = blue>
<TR BGCOLOR = white>
<TD WIDTH = 100>1</TD>
<TD WIDTH = 100>2</TD>
</TR>
</TABLE>

CELLPADDING CELLSPACING

CELLPADDING CELLSPACING
42
Ячейкаларды бирлестириу
<TABLE BORDER="1">
<TR>
<TD COLSPAN="3">Салем!</TD>
</TR>
<TR> Бирлестириу
<TD> 1 </TD> ушын баганалар
<TD> 2 </TD> саны
<TD> 3</TD>
</TR>
</TABLE> Бирлестириу
ушын катарлар
<TABLE BORDER="1"> саны
<TR>
<TD ROWSPAN="3">Салем!</TD>
<TD> 1 </TD>
</TR>
<TR><TD> 2 </TD></TR>
<TR><TD> 3 </TD></TR>
</TABLE>
43
Ишпе-иш жайласкан кестелер