#1 слайд
HTML тілінің гипермәтінін пайдаланып веб- парақтар құру. HTML тілінің құрлымы және синтаксисі

1 слайд

#2 слайд
Мазмұны 1 HTML тіліне кіріспе 2 HTML тілінің негізгі ұғымдары 3 HTML тілінің тэгтік үлгісі 3.1 Мәтіндерді безендіру 3.2 Кестелерді тұрғызу 3.3 Графика мен мультимедианы web-параққа қою 3.4 Фреймдерге бөлу 4 HTML тэгтерінің атрибуттары 5 Практикалық жұмыстар мен бақылау сұрақтары

2 слайд

#3 слайд
HTML ТІЛІНІҢ КӨМЕГІМЕН WEB-ПАРАҚТАРДЫ ҚҰРУ

3 слайд

#4 слайд
Мақсаты:  Интернетте бағдарламалау тілдерінің бірі болып табылатын HTML тілі, тэгтері, атрибуттары туралы жалпы түсінік беру  Студенттердің қызығушылықтары мен белсенділіктерін арттыру

4 слайд

#5 слайд
Интернетте бағдарламалау J a v a S c r i p t т і л і H T M L т і л і P H P т і л і F l a s h б а ғ д а р л а м а с ы

5 слайд

#6 слайд
Мазмұны HTML тіліне кіріспе HTML тілінің негізгі ұғымдары HTML тілінің тэгтік үлгісі HTML тэгтерінің атрибуттары Практикалық жұмыстар мен бақылау сұрақтары Мәтіндерді безендіру Кестелерді тұрғызу Графика мен мультимедианы web-параққа қою Фреймдерге бөлу шығу

6 слайд

#7 слайд
HTML ТІЛІНЕ КІРІСПЕ

7 слайд

#8 слайд
Интернеттің қазіргі дамуы Интернеттің қазіргі дамуы 90-жылдар90-жылдар басында компьютерлер арасында басында компьютерлер арасында мәлімет алмасудың жаңа хаттамасы мәлімет алмасудың жаңа хаттамасы (protocol) пайда болғаннан кейін (protocol) пайда болғаннан кейін басталды. Бұл хаттама басталды. Бұл хаттама HTTPHTTP ( (Hyper Hyper Text Transfer Text Transfer Protocol- гипермәтінді тасымалдау хаттамасы )) деп деп аталған болатынаталған болатын

8 слайд

#9 слайд
Осы хаттамамен қатар НТТР Осы хаттамамен қатар НТТР серверлерінің кеңейтілген серверлерінің кеңейтілген желілері болып табылатын, желілері болып табылатын, Интернет арқылы файлдар Интернет арқылы файлдар тасымалдай алатын тасымалдай алатын World Wide World Wide Web қызмет бабыWeb қызмет бабы (WWW немесе (WWW немесе тек Web) пайда болдытек Web) пайда болды

9 слайд

#10 слайд
World Wide WebWorld Wide Web сөзі қазақ сөзі қазақ тіліне тіліне кеңейтілген кеңейтілген бүкіләлемдік өрмекбүкіләлемдік өрмек болып болып аударыладыаударылады

10 слайд

#11 слайд
HTML даму тарихынан HTML гипертекстік тілін 1989 жылы World Wide Web гипертекстік жүйесін бөлудің өңдеу технологиясының компоненттерінің бірі ретінде Тим Бернерс — Ли ұсынды.

11 слайд

#12 слайд
HTML (Hyper Text Markup Language) – гипермәтінді белгілеу тілі. Ол кәдімгі мәтіндерді Web-парақтар түрінде бейнелеуге арналған ережелер жиынын анықтайды.

12 слайд

#13 слайд
Бұл файлдардың басым көпшілігі Бұл файлдардың басым көпшілігі Web- парақтар түрінде Web- парақтар түрінде HTML HTML тілінде тілінде жазылған арнаулы файлдар түрінде жазылған арнаулы файлдар түрінде болдыболды

13 слайд

#14 слайд
HTML тілінің мағынасы мен атқаратын қызметін оның атынан анықтауға болады

14 слайд

#15 слайд
Осы файлдарды НТТР Осы файлдарды НТТР серверлерінде (Web- тораптарында) серверлерінде (Web- тораптарында) орналастыру жолымен орналастыру жолымен Web-Web- парақтарпарақтар қалың көпшілік қалың көпшілік пайдалатындай түрінде интернетте пайдалатындай түрінде интернетте жарияланадыжарияланады

15 слайд

#16 слайд
Web-парақтар мазмұны әр түрлі Web-парақтар мазмұны әр түрлі бола береді және олар әр түрлі бола береді және олар әр түрлі тақырыптарды қамтиды, бірақ тақырыптарды қамтиды, бірақ олардың бәрінің де негізгі олардың бәрінің де негізгі жариялану, яғни жазылу тілі жариялану, яғни жазылу тілі HTMLHTML болып табылады болып табылады

16 слайд

#17 слайд
HTML ТІЛІНІҢ НЕГІЗГІ ҰҒЫМДАРЫ

17 слайд

#18 слайд
ГипермәтінГипермәтін – қосымша – қосымша элементтерді басқару элементтерді басқару мақсатында ішіне арнаулы код, мақсатында ішіне арнаулы код, яғни екпінді элемент орналасқан яғни екпінді элемент орналасқан мәтін. Ол мәтін ішіне дыбыс, мәтін. Ол мәтін ішіне дыбыс, сурет, мәтінді безендіру, пішімдеу сурет, мәтінді безендіру, пішімдеу істерін орындауды белгілейтін істерін орындауды белгілейтін сөздер орналасады.сөздер орналасады.

18 слайд

#19 слайд
Сөзді ерекшелеп белгілеуСөзді ерекшелеп белгілеу – – келесі көрсетілген құжат бөлігі келесі көрсетілген құжат бөлігі қалай бейнеленетіндігін қалай бейнеленетіндігін анықтайтын айрықша кодты анықтайтын айрықша кодты енгізуенгізу

19 слайд

#20 слайд
Гиперсілтеме – парақ элементтерінің ортасында гиперсілтеме көрсетілген мәтінмен немесе суретпен, кейбір объектілермен немесе адрестермен байланыс жасайды

20 слайд

#21 слайд
HTML ТІЛІНІҢ ТЭГТЕРІ (командалары)

21 слайд

#22 слайд
HTML тілінің бастапқы мәтінді белгілейтін командалары тэг (tag) деп аталады

22 слайд

#23 слайд
HTML тіліндегі кез-келген құжат элементтер жиынтығы және әр элементтің басы мен соңы арнайы белгілеу арқылы көрсетіледі. ТЕГТЕР Жеке (немесе жұпты емес), яғни ешқандай мәтін немесе басқа деректер жоқ(мысалы, жол ауыстыру тегі  <br>) Жұпты, яғни ашу тегін көрсету керек (мысалы, <HTML>), және оны жабу (мысалы, </HTML>)

23 слайд

#24 слайд
Тэг символдар тізбегінен тұрады. Барлық тэг «кіші» (<) символынан басталады да, «үлкен» (>) символымен аяқталады

24 слайд

#25 слайд
HTML тіліндегі әрбір тэг бір арнаулы қызмет атқарады

25 слайд

#26 слайд
Ашылатын бұрыштық жақшадан соң команда аты болып табылатын түйінді сөз – тэг орналасады

26 слайд

#27 слайд
Мәтіндік редакторлар ішінде Блокнот редакторы жиі қолданылады

27 слайд

#28 слайд
Блокнот редакторы терезесінде төмендегі көрсетілген қарапайым HTML файлының мәтінін теру керек: <HTML> <HEAD> <TITLE> алғашқы HTML файлы </TITLE> </HEAD> <BODY> Сәрсенбі күнгі сабақ кестесі </BODY> </HTML> Блокнот редакторында тэгтерді браузермен қарау

28 слайд

#29 слайд
Элемент Атқаратын қызметі <B> Қою қаріппен жазу <BASEFONT> Барлық құжатқа үнсіз келісім бойынша қаріптің өлшемін беру <BGSOUND> Барлық параққа фондық дыбыс қою <BIG> Базалық қаріптен үлкенірек қаріпті мәтінге беру <BODY> Құжаттың денесі <BR> Бос жол қою <BUTTON> Батырма <CAPTION> Кестеге не суретке тақырып беру HTML тілінің жиі кездесетін элементтері

29 слайд

#30 слайд
<CENTER> Жиектеріне қатысты ортаға қою <COL> Кестенің бағаны <EM> Мәтінді ерекшелеу <EMBED> Объектіні еңгізу <FONT> Қаріптің локальді өзгеруі <FORM> Басқару элементтері бар форманы құру <FRAME> Фреймді құру <FRAMESET> Фреймдар жиыны <H1> - <H6>Құжаттың тақырыптары 1-ден 6-деңгейге дейін <HEAD> Құжаттың тақырып бөлімі <HR> Көлденең жол <HTML> HTML құжат <I> Курсивпен жазу

30 слайд

#31 слайд
<IFRAME> Қалқымалы фрейм <ILAYER> Қабат <IMG> Кескін, видеоролик, анимация қою <INPUT> Еңгізу элементі <LABEL> Форманың элементіннің жазуы <LAYER> Қабат <LI> Тізімнің жолдары <LINK> Құжаттар арасындағы қатынасты анықтау <MARQUEE> Жүгіртпе жол <MENU> Меню тізімін құру <MULTICOL> Көп колоналы мәтін <NOBR> Бос жолды алып тастау <OBJECT> Құжатқа тәуелсіз объектіні қосу <OL> Нөмірленген тізімді қосу <P> Мәтіннің абзацы

31 слайд

#32 слайд
<SCRIPT> Сценарийлерді қосу <STYLE> Құжатқа стильдік ережелерді қосу <SUB> Төменгі индекс <SUP> Үстіңгі индекс <TABLE> Кесте құру <TD> Кестенің ұяшықтары <TEXTAREA> Мәтінді еңгізуге арналған көп жолды аумақ <TH> Кестенің тақырыбын беретін ұяшық <TITLE> Құжаттын атауы <TR> Кестенің жолы <U> Асты сызылған қаріп <UL> Маркерленген тізімді құру <VAR> Курсивпен еңгізілетін айнымалыны білдіретін логикалық элемент

32 слайд

#33 слайд
ТЭГТЕРДІҢ АТРИБУТТАРЫ

33 слайд

#34 слайд
Тэг атрибуттары Көбінесе ашылу тэгіне әсер ететін түрлендірулер атрибуттары болады. Атрибуттар немесе сипаттамалар – тэг атауынан және бір-бірінен бос орын арқылы бөлініп жазылған қосымша түйінді сөздерден тұрады

34 слайд

#35 слайд
Көбінесе атрибуттардың мәнін жазу керек болады. Атрибут мәні – оның түйінді сөзінен теңдік «=» белгісі арқылы бөлініп жазылады.

35 слайд

#36 слайд
Атрибут мәні (“”) алынып жазылуы тиіс, бірақ та оны қолданбай-ақ қоюға болады. Ал жабу тэгінде атрибуттар болмайды.

36 слайд

#37 слайд
МӘТІНДІ БЕЗЕНДІРУ

37 слайд

#38 слайд
Мәтінді абзацтарға бөлу Оның ең қарапайым жолы <P> ашу тэгін және </P> жабу тэгтарын қолдану

38 слайд

#39 слайд
<HTML> <HEAD> <TITLE> Абзацтарға бөлу </TITLE> </HEAD> <BODY> <P> Бірінші абзац</P> <P> Екінші абзац</P> </BODY> </HTML> Мысалы:

39 слайд

#40 слайд
Блокнот редакторында жазылуы

40 слайд

#41 слайд
Абзацқа бөліп жазған мәтінді Браузер арқылы ашып қарау терезесі

41 слайд

#42 слайд
Мәтінге көлденең сызық қою Оның ең қарапайым жолы <HR> тэгін қолдану

42 слайд

#43 слайд
<HTML> <HEAD> <TITLE> Көлденең сызық қою </TITLE> </HEAD> <BODY> Кез келген мәтінді жазу <HR> Мәтіннің жалғасы </BODY> </HTML> Мысалы:

43 слайд

#44 слайд
Блокнот редакторында жазылуы

44 слайд

#45 слайд
Көлденең сызықты мәтінге қою

45 слайд

#46 слайд
Қаріптің жазылуын беру Оның ең қарапайым жолы <B>, <I>, <U> тэгтерін қолдану

46 слайд

#47 слайд
• <B> - қою қаріп• <I> - курсивті қаріп • <U> - асты сызылған қаріп Бұндағы:

47 слайд

#48 слайд
Мысалы:

48 слайд

#49 слайд

49 слайд

#50 слайд
ТүсТүс Түстің Түстің атыаты Он Он алтылыалтылы қ кодқ код ТүсТүс Түстің Түстің атыаты Он Он алтылық алтылық кодкод Қара Black Black 000000 Қара жасыл Green Green 008000 Қара көкNavy Navy 000080 КөгілдірTeal Teal 008080 Ашық сұр Silver Silver c0c0c0 Жасыл Lime Lime 00ff00 Көк Blue Blue 0000ff Қара сұр Gray Gray 808080 Қызыл Red Red ff0000 Сары Yellow Yellow ffff00 Күлгін қызыл Fuchsia Fuchsia ff00ff Ақ White White ffffff Жиі кездесетін түстердің кодтары мен аттары

50 слайд

#51 слайд
FONT элементінің атрибуттары  size - қаріптің өлшемі  color - қаріптің түсі  face - қаріптің гарнитурасы

51 слайд

#52 слайд
Мысалы: <FONT face=“Arial” size=“7” color=“red” Мәтін </FONT> Бұл қаріптің өлшемі 7, түсінің қызыл және Arial екендігін білдіреді

52 слайд

#53 слайд
Ал <Body bgcolor=“#ffffff”> жазуы құжаттың фонының түсінің ақ екендігін көрсетеді

53 слайд

#54 слайд
Тізімдер

54 слайд

#55 слайд
<UL> - маркерленген тізім <OL> - нөмірленген тізім <DL> - анықтамалар тізімі Тізімнің тақырыбы міндетті емес элемент болып табылады және ол <LH> тэгі арқылы беріледі. Тізімнің құрамы жолдардан тұрады және әрбір жол <LI> тэгі арқылы беріледі.

55 слайд

#56 слайд
Маркерленген тізім

56 слайд

#57 слайд

57 слайд

#58 слайд
Үнсіз келісім бойынша маркерлер қара боялған дөңгелекше тәріздес болады, бірақ оның формасын өзгертуге болады. Ол үшін type атрибуты қолданылады.

58 слайд

#59 слайд
Мысалы, оның келесі мәндері бар: <LI type=“square>Жаңалықтар - іші боялған шаршы <LI type=“circle”Жаңалықтар - іші боялмаған дөңгелек

59 слайд

#60 слайд
Нөмірленген тізім

60 слайд

#61 слайд

61 слайд

#62 слайд
type=1 - араб цифрларымен нөмірлеу type=А – латынның үлкен әріптерімен type=а – латынның кіші әріптерімен type=І – римнің цифрлерінің үлкен сандарымен type=і – римнің цифрлерінің кіші сандарымен Мысалы, нөмірленген тізімнің түрлері:

62 слайд

#63 слайд
КЕСТЕЛЕРДІ ҚҰРУ

63 слайд

#64 слайд
Құжатқа кесте қойған кезде әр кесте <TABLE> тэгі арқылы басталып </TABLE> жабу тэгі арқылы аяқталуы керек. Келесі тэгтер: • TR – кестенің жеке жолын құру • TD – кестенің жеке ұяшықтарын құру • TH – кестенің тақырыптық ұяшығын құру • CAPTION – кестенің атауын құруға арналған

64 слайд

#65 слайд
Мысалы:

65 слайд

#66 слайд

66 слайд

#67 слайд
Кестенің жалпы параметрлері: (TABLE тэгіне қолданылатын атрибуттар)  width – кестенің ені  align – кестені терезеге қатысты туралау  border – кестенің сыртқы шеркарасы  bgcolor – кестенің фонының түсі  bordercolor – шекарасының түсі

67 слайд

#68 слайд
Осы атрибуттарды кестенің ұяшығына, кестенің жолдарына да қолдана беруге болады Мысалы: <TR align=“right”> <TD bgcolor=“red”> <TH bordercolor=“blue”>

68 слайд

#69 слайд
Мысалы:

69 слайд

#70 слайд
Нәтижесі:

70 слайд

#71 слайд
Графика мен мультимедианы web - параққа қою

71 слайд

#72 слайд
Web-ке арналған графикалық файлдардың форматтары GIF (Graphics Interchange Format – алмасудың графикалық форматы), кеңейткіші- .gif JPEG (Joint Photographic Expert Group – фотосуреттер эксперттерінің біріккен тобы), кеңейткіші- .jpg және .jpeg  PNG (Portable Network Graphics – тасымалданатын желілік графика), кеңейткіші- .png

72 слайд

#73 слайд
Кескінді параққа қою Оның ең қарапайым жолы <IMG> тэгін қолдану

73 слайд

#74 слайд

74 слайд

#75 слайд

75 слайд

#76 слайд
Сурет арқылы аудио не видео файлға сілтеме жасау

76 слайд

#77 слайд
Мына суретке шертсе видео файл ойнатылады

77 слайд

#78 слайд
Келесі ойнатқыш терезесі шығады

78 слайд

#79 слайд
ФРЕЙМДЕРГЕ БӨЛУ

79 слайд

#80 слайд
Оның ең қарапайым жолы <BODY> тэгінің орнына <FRAMESET> тэгін қолдану

80 слайд

#81 слайд
Ал фреймнің ішіндегілері <FRAME> тэгі арқылы анықталады

81 слайд

#82 слайд
<HTML> <HEAD> <TITLE> Тік фреймдар </TITLE> </HEAD> <FRAMESET cols=“20%,55%,*”> <FRAME src=“lime.html”> <FRAME src=“yellow.html”> <FRAME src=“cyan.html”> </FRAMESET </HTML> Мысалы:

82 слайд

#83 слайд
 cols – тік фреймдердің санын береді  rows – көлденең фреймдер санын <FRAMESET> тэгіне қолданылатын атрибуттар

83 слайд

#84 слайд
lime yellow cyan Cуреттегідей үш тік фреймдерге бөледі

84 слайд

#85 слайд
Тік және көлденең фреймдердің бірге қолданылуына мысал:

85 слайд

#86 слайд
<HTML> <HEAD> <TITLE> Фреймдар </TITLE> </HEAD> <FRAMESET rows=“50%,*” cols=“30%, *, 30%”> <FRAME src=“lime.html”> <FRAME src=“yellow.html”> <FRAME src=“cyan.html”> <FRAME src=“white.html”> <FRAME src=“aqua.html”> <FRAME src=“red.html”> </FRAMESET </HTML>

86 слайд

#87 слайд
Lime Yellow Cyan White Aqua Red Cуреттегідей тік және көлденең фреймдерге бөледі Lime Yellow Cyan White Aqua Red Lime Yellow Cyan White Aqua Red

87 слайд

#88 слайд
Мына суретке шертсеңіз осы парақты браузер арқылы көресіз

88 слайд

#89 слайд
Практикалық жұмыстар мен бақылау сұрақтары

89 слайд

#90 слайд
Бір мысалды қарастырайық: <HTML> <HEAD> <TITLE> Интернетке саяхат </TITLE> </HEAD> <BODY> Интернетке хош келдініздер! </BODY> </HTML> Блокнотта HTML кодын жазу Блокнотта жазған кодты htm кеңейткішімен сақтау

90 слайд

#91 слайд
Сақталған файлды таңдау

91 слайд

#92 слайд
<HTML> <HEAD> жалпы тақырып <TITLE> терезе тақырыбы </TITLE> </HEAD> <BODY> <H1> 1-ші деңгейдегі бос тақырып мәтіні </H1> <H2> 2-ші деңгейдегі ішкі тақырып мәтіні </H2> <P> абзац басы тәгі, жол арасына бос орын қалдырады. <HR> горизанталь сызықтан кейінгі мәтін <BR> екі жолға бөлу </BODY> </HTML>

92 слайд

#93 слайд
Тәгтердің қосарланып жазылуына мысалдар: <HTML> … </HTML> <B> … </B> <HEAD> … </HEAD> <H3> … </H3> <LI> … </LI> HTML-тәгтерінің жалқы жазылуы: <BR> … <HR> … <FRAME> … HTML-тілінің атрибуттар арқылы жазылуы: <BODY BGCOLOR= “YELLOW” TEXT=“BLUE”> ... <HR COLOR = RED SIZE=16 WIDTH=100%> ...

93 слайд

#94 слайд
Бақылау сұрақтары:

94 слайд

#95 слайд
• HTML тілі қандай тіл, атқаратын қызметі қандай? • HTML тілінің қандай негізгі ұғымдары бар? • WWW қазақ тіліне қалай аударылады? • Web-парақ дегеніміз не? • HTML тілі қандай хаттаманың пайда болуына байланысты шықты?

95 слайд

#96 слайд
• Тэг дегеніміз не? • Атрибут дегеніміз не? • Мәтінді безендіру үшін қандай тэгтер мен атрибуттар қолданылады? • Кестелерді құруға арналған тэгтер мен атрибуттарын ата. • Кескінді параққа қоюға арналған тэг қандай? • Фреймдерге бөлуге қолданылатын тэгтер мен атрибуттарды ата.

96 слайд