Рабочие листы
к вашим урокам
Скачать
1 слайд
HTML ТІЛІНІҢ КӨМЕГІМЕН WEB-ПАРАҚТАРДЫ ҚҰРУ
2 слайд
Сабақтың мақсаты:
Интернетте бағдарламалау
тілдерінің бірі болып табылатын
HTML тілі, тэгтері, атрибуттары
туралы жалпы түсінік беру
Оқушылардың қызығушылықтары
мен белсенділіктерін арттыру
3 слайд
Мазмұны
HTML тіліне кіріспе
HTML тілінің негізгі
ұғымдары
HTML тілінің тэгтік үлгісі
HTML тэгтерінің
атрибуттары
Мәтіндерді безендіру
Кестелерді тұрғызу
Графика мен мультимедианы
web-параққа қою
Фреймдерге бөлу
4 слайд
ТІЛІНЕ КІРІСПЕ
5 слайд
Интернетте бағдарламалау
JavaScript тілі
HTML тілі
PHP тілі
Flash
бағдарламасы
6 слайд
Интернеттің қазіргі дамуы 90-жылдар басында компьютерлер арасында мәлімет алмасудың жаңа хаттамасы (protocol) пайда болғаннан кейін басталды. Бұл хаттама HTTP (Hyper Text Transfer Protocol- гипермәтінді тасымалдау хаттамасы) деп аталған болатын
7 слайд
Осы хаттамамен қатар НТТР серверлерінің кеңейтілген желілері болып табылатын, Интернет арқылы файлдар тасымалдай алатын World Wide Web қызмет бабы (WWW немесе тек Web) пайда болды
8 слайд
World Wide Web сөзі қазақ тіліне кеңейтілген бүкіләлемдік өрмек болып аударылады
9 слайд
HTML (Hyper Text Markup Language) – гипермәтінді белгілеу тілі. Ол кәдімгі мәтіндерді Web - парақтар түрінде бейнелеуге арналған ережелер
жиынын анықтайды.
10 слайд
Бұл файлдардың басым көпшілігі Web- парақтар түрінде HTML тілінде жазылған арнаулы файлдар түрінде болды
11 слайд
HTML тілінің
мағынасы мен атқаратын
қызметін оның атынан анықтауға болады
12 слайд
Осы файлдарды НТТР серверлерінде (Web- тораптарында) орналастыру жолымен Web-парақтар қалың көпшілік пайдалатындай түрінде интернетте жарияланады
13 слайд
Web-парақтар мазмұны әр түрлі бола береді және олар әр түрлі тақырыптарды қамтиды, бірақ олардың бәрінің де негізгі жариялану, яғни жазылу тілі HTML болып табылады
14 слайд
HTML ТІЛІНІҢ НЕГІЗГІ ҰҒЫМДАРЫ
15 слайд
Гипермәтін – қосымша элементтерді басқару мақсатында ішіне арнаулы код, яғни екпінді элемент орналасқан мәтін. Ол мәтін ішіне дыбыс, сурет, мәтінді безендіру, пішімдеу істерін орындауды белгілейтін сөздер орналасады.
16 слайд
Сөзді ерекшелеп белгілеу – келесі көрсетілген құжат бөлігі қалай бейнеленетіндігін анықтайтын айрықша кодты енгізу
17 слайд
Гиперсілтеме – парақ элементтерінің ортасында гиперсілтеме көрсетілген мәтінмен немесе суретпен, кейбір объектілермен немесе адрестермен байланыс жасайды
18 слайд
Гиперсілтемені анықтау үшін:
Көшетін екінші құжатқа қыстырма жасайды
Қыстырма жасалғаннан кейін сақтайды
Гиперсілтеме жасалынатын сөзді белгілеп, гиперсілтемені жасайды
Қосымша терезе ашылады
19 слайд
HTML ТІЛІНІҢ ТЭГТЕРІ (командалары)
20 слайд
HTML тілінің бастапқы мәтінді белгілейтін командалары тэг (tag) деп аталады
21 слайд
Тэг символдар тізбегінен тұрады. Барлық тэг «кіші» (<) символынан басталады да, «үлкен» (>) символымен аяқталады
22 слайд
HTML тіліндегі әрбір тэг бір арнаулы қызмет атқарады
23 слайд
Ашылатын бұрыштық жақшадан соң команда аты болып табылатын түйінді сөз – тэг орналасады
24 слайд
Мәтіндік редакторлар ішінде Блокнот редакторы жиі қолданылады
25 слайд
Блокнот редакторы
терезесінде
төмендегі көрсетілген
қарапайым
HTML файлының
мәтінін теру керек:
<HTML>
<HEAD>
<TITLE> алғашқы
HTML файлы </TITLE>
</HEAD>
<BODY>
Сәрсенбі күнгі сабақ кестесі
</BODY>
</HTML>
Блокнот редакторында тэгтерді браузермен қарау
26 слайд
HTML тілінің жиі кездесетін элементтері
27 слайд
28 слайд
29 слайд
30 слайд
ТЭГТЕРДІҢ АТРИБУТТАРЫ
31 слайд
Тэг атрибуттары
Көбінесе ашылу тэгіне әсер ететін түрлендірулер атрибуттары болады. Атрибуттар немесе сипаттамалар – тэг атауынан және бір-бірінен бос орын арқылы бөлініп жазылған қосымша түйінді сөздерден тұрады
32 слайд
Көбінесе атрибуттардың мәнін жазу керек болады. Атрибут мәні – оның түйінді сөзінен теңдік «=» белгісі арқылы бөлініп жазылады.
33 слайд
Атрибут мәні (“”) алынып жазылуы тиіс, бірақ та оны қолданбай-ақ қоюға болады. Ал жабу тэгінде атрибуттар болмайды.
34 слайд
МӘТІНДІ БЕЗЕНДІРУ
35 слайд
Мәтінді абзацтарға бөлу
Оның ең қарапайым жолы
<P> ашу тэгін және </P>
жабу тэгтарын қолдану
36 слайд
<HTML>
<HEAD>
<TITLE> Абзацтарға бөлу </TITLE> </HEAD>
<BODY>
<P> Бірінші абзац </P>
<P> Екінші абзац </P>
</BODY> </HTML>
Мысалы:
37 слайд
Блокнот редакторында жазылуы
38 слайд
Абзацқа бөліп жазған мәтінді Браузер арқылы ашып қарау терезесі
39 слайд
Мәтінге көлденең сызық қою
Оның ең қарапайым жолы
<HR> тэгін қолдану
40 слайд
<HTML> <HEAD>
<TITLE> Көлденең сызық қою </TITLE> </HEAD>
<BODY>
Кез келген мәтінді жазу
<HR>
Мәтіннің жалғасы
</BODY> </HTML>
Мысалы:
41 слайд
Блокнот редакторында жазылуы
42 слайд
Көлденең сызықты мәтінге қою
43 слайд
Қаріптің жазылуын беру
Оның ең қарапайым жолы
<B>, <I>, <U>
тэгтерін қолдану
44 слайд
<B> - қою қаріп
<I> - курсивті қаріп
<U> - асты сызылған қаріп
Бұндағы:
45 слайд
Мысалы:
46 слайд
47 слайд
Жиі кездесетін түстердің кодтары мен аттары
48 слайд
FONT элементінің атрибуттары
size - қаріптің өлшемі
color - қаріптің түсі
face - қаріптің гарнитурасы
49 слайд
Мысалы:
<FONT face=“Arial” size=“7” color=“red” Мәтін </FONT>
Бұл қаріптің өлшемі 7, түсінің қызыл және Arial екендігін білдіреді
50 слайд
Ал <Body bgcolor =“#ffffff” > жазуы құжаттың фонының түсінің ақ екендігін көрсетеді
51 слайд
Тізімдер
52 слайд
<UL> - маркерленген тізім
<OL> - нөмірленген тізім
<DL> - анықтамалар тізімі
Тізімнің тақырыбы міндетті
емес элемент болып табылады және
ол <LH> тэгі арқылы беріледі.
Тізімнің құрамы жолдардан тұрады және
әрбір жол <LI> тэгі арқылы беріледі.
53 слайд
Маркерленген тізім
54 слайд
55 слайд
Үнсіз келісім бойынша маркерлер қара боялған дөңгелекше тәріздес болады, бірақ оның формасын өзгертуге болады. Ол үшін type атрибуты қолданылады.
56 слайд
Мысалы, оның келесі мәндері бар:
<LI type=“square>Жаңалықтар - іші боялған шаршы
<LI type=“circle”Жаңалықтар - іші боялмаған дөңгелек
57 слайд
Нөмірленген тізім
58 слайд
59 слайд
type=1 - араб цифрларымен нөмірлеу
type=А – латынның үлкен әріптерімен
type=а – латынның кіші әріптерімен
type=І – римнің цифрлерінің үлкен сандарымен
type=і – римнің цифрлерінің кіші сандарымен
Мысалы, нөмірленген тізімнің түрлері:
60 слайд
КЕСТЕЛЕРДІ ҚҰРУ
61 слайд
Құжатқа кесте қойған кезде әр кесте
<TABLE> тэгі арқылы басталып </TABLE>
жабу тэгі арқылы аяқталуы керек. Келесі тэгтер:
TR – кестенің жеке жолын құру
TD – кестенің жеке ұяшықтарын құру
TH – кестенің тақырыптық ұяшығын құру
CAPTION – кестенің атауын құруға
арналған
62 слайд
Мысалы:
63 слайд
64 слайд
Кестенің жалпы параметрлері:
(TABLE тэгіне қолданылатын атрибуттар)
width – кестенің ені
align – кестені терезеге қатысты туралау
border – кестенің сыртқы шеркарасы
bgcolor – кестенің фонының түсі
bordercolor – шекарасының түсі
65 слайд
Осы атрибуттарды кестенің ұяшығына, кестенің жолдарына да қолдана беруге болады
Мысалы: <TR align=“right”>
<TD bgcolor=“red”>
<TH bordercolor=“blue”>
66 слайд
Мысалы:
67 слайд
Нәтижесі:
68 слайд
Графика мен мультимедианы web - параққа қою
69 слайд
Web-ке арналған графикалық файлдардың форматтары
GIF (Graphics Interchange Format – алмасудың графикалық форматы), кеңейткіші- .gif
JPEG (Joint Photographic Expert Group – фотосуреттер эксперттерінің біріккен тобы), кеңейткіші- .jpg және .jpeg
PNG (Portable Network Graphics – тасымалданатын желілік графика), кеңейткіші- .png
70 слайд
Кескінді параққа қою
Оның ең қарапайым жолы
<IMG> тэгін қолдану
71 слайд
72 слайд
73 слайд
Сурет арқылы аудио не видео файлға сілтеме жасау
74 слайд
Мына суретке шертсе
видео файл ойнатылады
75 слайд
Келесі ойнатқыш терезесі шығады
76 слайд
ФРЕЙМДЕРГЕ БӨЛУ
77 слайд
Оның ең қарапайым жолы
<BODY> тэгінің орнына
<FRAMESET> тэгін қолдану
78 слайд
Ал фреймнің ішіндегілері
<FRAME> тэгі арқылы
анықталады
79 слайд
<HTML> <HEAD>
<TITLE> Тік фреймдар </TITLE> </HEAD>
<FRAMESET cols=“20%,55%,*”>
<FRAME src=“lime.html”>
<FRAME src=“yellow.html”>
<FRAME src=“cyan.html”>
</FRAMESET </HTML>
Мысалы:
80 слайд
cols – тік фреймдердің санын береді
rows – көлденең фреймдер санын
<FRAMESET> тэгіне қолданылатын атрибуттар
81 слайд
lime yellow cyan
Cуреттегідей үш
тік фреймдерге бөледі
82 слайд
Тік және көлденең
фреймдердің бірге
қолданылуына мысал:
83 слайд
<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>
84 слайд
Lime
Yellow
Cyan
White
Aqua
Red
Cуреттегідей тік және
көлденең фреймдерге бөледі
Lime
Yellow
Cyan
White
Aqua
Red
Lime
Yellow
Cyan
White
Aqua
Red
85 слайд
Мына
суретке шертсеңіз
осы парақты браузер
арқылы көресіз
86 слайд
Практикалық жұмыстар мен бақылау сұрақтары
87 слайд
Бір мысалды қарастырайық:
<HTML>
<HEAD>
<TITLE> Интернетке саяхат </TITLE>
</HEAD>
<BODY>
Интернетке хош келдініздер! </BODY>
</HTML>
Блокнотта HTML кодын жазу
Блокнотта жазған кодты htm
кеңейткішімен сақтау
88 слайд
Сақталған файлды таңдау
89 слайд
<HTML>
<HEAD> жалпы тақырып
<TITLE> терезе тақырыбы </TITLE>
</HEAD>
<BODY>
<H1> 1-ші деңгейдегі бос тақырып мәтіні </H1>
<H2> 2-ші деңгейдегі ішкі тақырып мәтіні </H2>
<P> абзац басы тәгі, жол арасына бос орын қалдырады.
<HR> горизанталь сызықтан кейінгі мәтін
<BR> екі жолға бөлу
</BODY>
</HTML>
Мысалдар:
90 слайд
Тәгтердің қосарланып жазылуына мысалдар:
<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%>...
91 слайд
92 слайд
93 слайд
Бақылау
сұрақтары:
94 слайд
HTML тілі қандай тіл, атқаратын
қызметі қандай?
HTML тілінің қандай негізгі
ұғымдары бар?
WWW қазақ тіліне қалай
аударылады?
Web-парақ дегеніміз не?
HTML тілі қандай хаттаманың пайда
болуына байланысты шықты?
95 слайд
Тэг дегеніміз не?
Атрибут дегеніміз не?
Мәтінді безендіру үшін қандай
тэгтер мен атрибуттар қолданылады?
Кестелерді құруға арналған
тэгтер мен атрибуттарын ата.
Кескінді параққа қоюға
арналған тэг қандай?
Фреймдерге бөлуге қолданылатын
тэгтер мен атрибуттарды ата.
96 слайд
97 слайд
98 слайд
Қатені тап
99 слайд
Дүниежүзілік өрмек
<html>
Нөмірленбеген тізімдер
<img src="fon.gif">
Сырғымалы жолдар
<th> ... </th>
Гипертексті белгілеу тілі
WWW
html құжат құрылымы
құжат бетіне сілтеме
center
графикалық бейне қою
html
<marquee> текст </marquee>
</html>
world wide web
тексті абзацтарға бөлу
үш бөлімнен тұрады
1992 жылы пайда болды
<a href="файл аты"> </a>
кестенің бағандары
ортасыны туралау
<ul> ... </ul>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
Сәйкестікті тап
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
!["И? жо?" 1. html тілінің алғашқы нұсқасын Еуропадағы ең кіші
қарапайым...](https://documents.infourok.ru/0bc8acb0-68ca-45a1-be18-32ff6290837d/0/slide_100.jpg ""И? жо?" 1. html тілінің алғашқы нұсқасын Еуропадағы ең кіші
қарапайым...")
100 слайд
"И? жо?"
1. html тілінің алғашқы нұсқасын Еуропадағы ең кіші
қарапайым тіршіктер физика лабороториясыны?
қызметкері Тимом Бернерсом-Ли жасаған болатын.
2. Интернет желісімен жұмыс істеу үшін
тышқан, пернетатта, монитор қажет.
3. Ең көп тараған броузерлер
ТСР және ІР.
4. html тілінің тегалары
блокнотта жазылады.
5. Web парақтар пішімінің
кеңейтілуі .htm
101 слайд
Тапсырманы орында
102 слайд
Кесте жасау
1. Блокнот программасын іске қосыңыздар.
2. келесі мәтін жолдарын теріңіздер.
<HTML>
<HEAD>
<TITLE>Сабақ кестесі</TITLE> </HEAD>
<BODY BGCOLOR=”#FFFFFF”>
<P ALIGN=CENTER>
<FONT COLOR=”RED” SIZE=”6” FACE=”KZ ARIAL”>
<B>Сабақ кестесі </B> </FONT></P> <BR>
<FONT COLOR=”BLUE” SIZE=”4” FACE=”Times New Roman”>
<TABLE BORDER=”1” WIDTH=100% BGCOLOR=”#99 CCCC”>
<TR BGCOLOR =”#CCCCFF” ALIGN=CENTER>
<TD>Уақыты</TD>
<TD> П11класс</TD>
<TD>П12</TD>
<TD>П13</TD>
</TR>
<TR>
<TD>8-00 – 9-20</TD>
<TD> Орыс тілі </TD>
<TD> Информатика </TD>
<TD> Тарих </TD>
</TR>
<TR>
<TD>09-20 – 10-50</TD>
<TD> Математика </TD>
<TD>Геодезия </TD>
<TD> Ағылшын тілі </TD>
<TR>
<TD>11-00 – 12-20 </TD>
<TD> Тарих </TD>
<TD> Сызба геометрия </TD>
<TD> Компьютерлік графика </TD><TR>
</TABLE>
</BODY>
</ HTML >
103 слайд
Графикалық редакторды жүктеңіз де үш сурет құрыңыз, оларды дискіге .jpg немесе .gif форматпен сақтаңыз.
Текстік редакторды жүктеңіз де берілген суреттердің біреуін фон ретінде, ал қалған екеуін құжаттың ішіне орналастырып HTML-құжат құрыңыз.
Парақтың аты: Графикамен жұмыс.
Парақтың мазмұны: html-құжатты графикалық безендіру.
Алынған құжатты графика.htm атымен сақтаңыз.
Берілген құжатты қарау үшін MS Internet Explorer броузерін жүктеңіз.
104 слайд
Текстік редакторды жүктеңіз де, келесі берілгендермен HTML-құжатты құрыңыз:
Парақтың аты: Жеке парақ (Сіздің аты-жөніңіз).
Парақтың мазмұны: Өзіңіз туралы жазыңыз.
(Мысалы: Мен 1993 жылдың 5 ақпанында Ақтөбе қаласында дүниеге келдім. 2009 жылы № 6 орта мектепті бітірдім. 2009 жылы Ақтөбе кооперативтік колледжінің «ЕТ және бағдарламамен қамтаамсыз ету" мамандығына түстім. Менің сүйікті ісім – бұл компьютерлер, детективті әдебиеттер және музыка. Менің ең сүйікті компьютерім – 4000 Мц-ті Pentium VI. Менің ең сүйікті кітабым – Артур Конан Дойлдың «Рассказы о Шерлоке Холмсе» кітабы. Менің ең сүйікті әншім – Олег Газманов).
Алынған құжатты Мәтін.htm атымен сақтаңыз.
Берілген құжатты қарау үшін MS Internet Explorer броузерін іске қосыңыз.
105 слайд
Сурет атрибуттарын тағайындау
ALT, BORDER, HEIGHT, WIDTH атрибуттарын пайдалана отырып, өз қалауларыңызша RASP.HTM файлына бірсыпыра өзгерістер енгізіңіздер.
Ескерту: Суреттік файлдың көлемінің (байтпен берілген) өзгеруіне назар аударып отырыңыздар, өйткені ол Web-құжаттың Интеренеттен компьютерге жүктелуіне қатты әсер етеді.
Web-парақтарға фондық суреттер салу
Фондық сурет – шағын төртбұрышқа орналасқан суреті бар графикалық файл. Броузерге фон ретінде тағайындалғанда, сурет көбейіп терезе аумағын толық алып тұрады.
Фон ретінде пайдаланылатын сурет <BODY> тегінде көрсетіледі.
RASP.HTM файлына төмендегідей өзгерістер енгізіңіздер:
<HTML>
<HEAD> <H2 ALIGN=”CENTER”>Менің алғашқы парағым </H2>
<TITLE> Алғашқы HTML файлы </TITLE> </HEAD>
<BODY BACKGROUND=”fon1.GIF” TEXT=”#330066”>
<P ALIGN=CENTER>
<FONT COLOR=”#008080”SIZE=”7”>
<B>сәрсенбі күнгі </B> </FONT> <BR>
<FONT SIZE=”6”> <I> сабақ кестесі </I> </FONT> </P>
</BODY >
</ HTML >
Басқа HTML-құжатқа сурет арқылы сілтеме жасау
Рабочие листы
к вашим урокам
Скачать
6 668 913 материалов в базе
Настоящий материал опубликован пользователем Жақсыбекова Нурзия Таңатарқызы. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Ваша скидка на курсы
40%
Курс профессиональной переподготовки
500/1000 ч.
Курс повышения квалификации
72 ч. — 180 ч.
Курс повышения квалификации
72 ч. — 180 ч.
Курс профессиональной переподготовки
300/600 ч.
Мини-курс
3 ч.
Мини-курс
2 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.