бірі болып табылатын
HTML тілі, тэгтері, атрибуттары
туралы жалпы түсінік беру
Оқушылардың қызығушылықтары
мен белсенділіктерін арттыру
Разделы презентаций
- Разное
- Английский язык
- Астрономия
- Алгебра
- Биология
- География
- Геометрия
- Детские презентации
- Информатика
- История
- Литература
- Математика
- Медицина
- Менеджмент
- Музыка
- МХК
- Немецкий язык
- ОБЖ
- Обществознание
- Окружающий мир
- Педагогика
- Русский язык
- Технология
- Физика
- Философия
- Химия
- Шаблоны, картинки для презентаций
- Экология
- Экономика
- Юриспруденция
Html тілінің көмегімен web-парақтарды құру
Содержание
- 1. Html тілінің көмегімен web-парақтарды құру
- 2. Сабақтың мақсаты: Интернетте бағдарламалау
- 3. Мазмұны HTML тіліне кіріспе
- 4. ТІЛІНЕ КІРІСПЕ
- 5. Интернетте бағдарламалау JavaScript тіліHTML тіліPHP тіліFlash бағдарламасы
- 6. Интернеттің қазіргі дамуы 90-жылдар басында компьютерлер арасында
- 7. Осы хаттамамен қатар НТТР серверлерінің кеңейтілген желілері
- 8. World Wide Web сөзі қазақ тіліне кеңейтілген бүкіләлемдік өрмек болып аударылады
- 9. HTML (Hyper Text Markup Language) –
- 10. Бұл файлдардың басым көпшілігі Web- парақтар түрінде HTML тілінде жазылған арнаулы файлдар түрінде болды
- 11. HTML тілінің мағынасы мен атқаратын қызметін оның атынан анықтауға болады
- 12. Осы файлдарды НТТР серверлерінде (Web- тораптарында) орналастыру жолымен Web-парақтар қалың көпшілік пайдалатындай түрінде интернетте жарияланады
- 13. Web-парақтар мазмұны әр түрлі бола береді және
- 14. HTML ТІЛІНІҢ НЕГІЗГІ ҰҒЫМДАРЫ
- 15. Гипермәтін – қосымша элементтерді басқару мақсатында ішіне
- 16. Сөзді ерекшелеп белгілеу – келесі көрсетілген құжат бөлігі қалай бейнеленетіндігін анықтайтын айрықша кодты енгізу
- 17. Гиперсілтеме – парақ элементтерінің ортасында гиперсілтеме
- 18. Гиперсілтемені анықтау үшін: Көшетін екінші құжатқа қыстырма
- 19. HTML ТІЛІНІҢ ТЭГТЕРІ (командалары)
- 20. HTML тілінің бастапқы мәтінді белгілейтін командалары тэг (tag) деп аталады
- 21. Тэг символдар тізбегінен тұрады. Барлық тэг «кіші» () символымен аяқталады
- 22. HTML тіліндегі әрбір тэг бір арнаулы қызмет атқарады
- 23. Ашылатын бұрыштық жақшадан соң команда аты болып табылатын түйінді сөз – тэг орналасады
- 24. Мәтіндік редакторлар ішінде Блокнот редакторы жиі қолданылады
- 25. Блокнот редакторы терезесінде төмендегі көрсетілген
- 26. HTML тілінің жиі кездесетін элементтері
- 27. Слайд 27
- 28. Слайд 28
- 29. Слайд 29
- 30. ТЭГТЕРДІҢ АТРИБУТТАРЫ
- 31. Тэг атрибуттары Көбінесе ашылу тэгіне әсер
- 32. Көбінесе атрибуттардың мәнін жазу керек болады. Атрибут
- 33. Атрибут мәні (“”) алынып жазылуы тиіс, бірақ
- 34. МӘТІНДІ БЕЗЕНДІРУ
- 35. Мәтінді абзацтарға бөлуОның ең қарапайым жолы ашу тэгін және жабу тэгтарын қолдану
- 36. Абзацтарға бөлу
- 37. Блокнот редакторында жазылуы
- 38. Абзацқа бөліп жазған мәтінді Браузер арқылы ашып қарау терезесі
- 39. Мәтінге көлденең сызық қоюОның ең қарапайым жолы тэгін қолдану
- 40. Көлденең сызық қою
- 41. Блокнот редакторында жазылуы
- 42. Көлденең сызықты мәтінге қою
- 43. Қаріптің жазылуын беруОның ең қарапайым жолы , , тэгтерін қолдану
- 44. - қою қаріп - курсивті қаріп - асты сызылған қаріпБұндағы:
- 45. Мысалы:
- 46. Слайд 46
- 47. Жиі кездесетін түстердің кодтары мен аттары
- 48. FONT элементінің атрибуттарыsize - қаріптің өлшеміcolor - қаріптің түсіface - қаріптің гарнитурасы
- 49. Мысалы:
- 50. Ал жазуы құжаттың фонының түсінің ақ екендігін көрсетеді
- 51. Тізімдер
- 52. - маркерленген тізім - нөмірленген тізім
- 53. Маркерленген тізім
- 54. Слайд 54
- 55. Үнсіз келісім бойынша маркерлер қара боялған дөңгелекше
- 56. Мысалы, оның келесі мәндері бар: Жаңалықтар - іші боялған шаршы
- 57. Нөмірленген тізім
- 58. Слайд 58
- 59. type=1 - араб цифрларымен нөмірлеуtype=А – латынның
- 60. КЕСТЕЛЕРДІ ҚҰРУ
- 61. Құжатқа кесте қойған кезде әр кесте тэгі
- 62. Мысалы:
- 63. Слайд 63
- 64. Кестенің жалпы параметрлері: (TABLE тэгіне қолданылатын
- 65. Осы атрибуттарды кестенің ұяшығына, кестенің жолдарына
- 66. Мысалы:
- 67. Нәтижесі:
- 68. Графика мен мультимедианы web - параққа қою
- 69. Web-ке арналған графикалық файлдардың форматтарыGIF (Graphics Interchange
- 70. Кескінді параққа қоюОның ең қарапайым жолы тэгін қолдану
- 71. Слайд 71
- 72. Слайд 72
- 73. Сурет арқылы аудио не видео файлға сілтеме жасау
- 74. Мына суретке шертсе видео файл ойнатылады
- 75. Келесі ойнатқыш терезесі шығады
- 76. ФРЕЙМДЕРГЕ БӨЛУ
- 77. Оның ең қарапайым жолы тэгінің орнына тэгін қолдану
- 78. Ал фреймнің ішіндегілері тэгі арқылы анықталады
- 79. Тік фреймдар
- 80. cols – тік фреймдердің санын бередіrows – көлденең фреймдер санын тэгіне қолданылатын атрибуттар
- 81. Cуреттегідей үш тік фреймдерге бөледі
- 82. Тік және көлденеңфреймдердің бірге қолданылуына мысал:
- 83. Слайд 83
- 84. Cуреттегідей тік жәнекөлденең фреймдерге бөледі
- 85. Мынасуретке шертсеңіз осы парақты браузер арқылы көресіз
- 86. Практикалық жұмыстар мен бақылау сұрақтары
- 87. Бір мысалды қарастырайық:
- 88. Сақталған файлды таңдау
- 89. жалпы тақырып терезе тақырыбы
- 90. Тәгтердің қосарланып жазылуына мысалдар: …
- 91. Слайд 91
- 92. Слайд 92
- 93. Бақылау сұрақтары:
- 94. HTML тілі қандай тіл, атқаратын
- 95. Тэг дегеніміз не? Атрибут дегеніміз не?
- 96. Слайд 96
- 97. Слайд 97
- 98. Қатені тап
- 99. Дүниежүзілік өрмекНөмірленбеген тізімдерСырғымалы жолдар ... Гипертексті белгілеу
- 100. "И? жо?" 1. html
- 101. Тапсырманы орында
- 102. Кесте жасау 1. Блокнот программасын
- 103. Графикалық редакторды жүктеңіз де үш сурет құрыңыз,
- 104. Текстік редакторды жүктеңіз де, келесі берілгендермен HTML-құжатты
- 105. Сурет атрибуттарын тағайындау ALT, BORDER, HEIGHT, WIDTH
- 106. Скачать презентанцию
Сабақтың мақсаты: Интернетте бағдарламалау тілдерінің бірі болып табылатын HTML тілі, тэгтері, атрибуттары туралы жалпы түсінік беру Оқушылардың қызығушылықтары мен
Слайды и текст этой презентации
Слайд 2 Сабақтың мақсаты:
Интернетте бағдарламалау
тілдерінің
бірі болып табылатын
туралы жалпы түсінік беру
Оқушылардың қызығушылықтары
мен белсенділіктерін арттыру
Слайд 3Мазмұны
HTML тіліне кіріспе
HTML тілінің негізгі
ұғымдары
HTML тілінің тэгтік
үлгісіHTML тэгтерінің
атрибуттары
Мәтіндерді безендіру
Кестелерді тұрғызу
Графика мен мультимедианы
web-параққа қою
Фреймдерге бөлу
Слайд 6Интернеттің қазіргі дамуы 90-жылдар басында компьютерлер арасында мәлімет алмасудың жаңа
хаттамасы (protocol) пайда болғаннан кейін басталды. Бұл хаттама HTTP (Hyper
Text Transfer Protocol- гипермәтінді тасымалдау хаттамасы) деп аталған болатын
Слайд 7Осы хаттамамен қатар НТТР серверлерінің кеңейтілген желілері болып табылатын, Интернет
арқылы файлдар тасымалдай алатын World Wide Web қызмет бабы (WWW
немесе тек Web) пайда болды
Слайд 9
HTML (Hyper Text Markup Language) – гипермәтінді белгілеу
тілі. Ол кәдімгі мәтіндерді Web - парақтар түрінде бейнелеуге арналған
ережелержиынын анықтайды.
Слайд 10Бұл файлдардың басым көпшілігі Web- парақтар түрінде HTML тілінде жазылған
арнаулы файлдар түрінде болды
Слайд 12Осы файлдарды НТТР серверлерінде (Web- тораптарында) орналастыру жолымен Web-парақтар қалың
көпшілік пайдалатындай түрінде интернетте жарияланады
Слайд 13Web-парақтар мазмұны әр түрлі бола береді және олар әр түрлі
тақырыптарды қамтиды, бірақ олардың бәрінің де негізгі жариялану, яғни жазылу
тілі HTML болып табылады
Слайд 15Гипермәтін – қосымша элементтерді басқару мақсатында ішіне арнаулы код, яғни
екпінді элемент орналасқан мәтін. Ол мәтін ішіне дыбыс, сурет, мәтінді
безендіру, пішімдеу істерін орындауды белгілейтін сөздер орналасады.
Слайд 16Сөзді ерекшелеп белгілеу – келесі көрсетілген құжат бөлігі қалай бейнеленетіндігін
анықтайтын айрықша кодты енгізу
Слайд 17Гиперсілтеме – парақ элементтерінің ортасында гиперсілтеме көрсетілген мәтінмен немесе
суретпен, кейбір объектілермен немесе адрестермен байланыс жасайды
Слайд 18Гиперсілтемені анықтау үшін:
Көшетін екінші құжатқа қыстырма жасайды
Қыстырма жасалғаннан
кейін сақтайды
Гиперсілтеме жасалынатын сөзді белгілеп, гиперсілтемені жасайды
Қосымша терезе ашылады
Слайд 25 Блокнот редакторы
терезесінде
төмендегі көрсетілген
қарапайым
HTML файлының
мәтінін теру керек:
алғашқы
HTML файлы
Сәрсенбі күнгі сабақ
кестесіБлокнот редакторында тэгтерді браузермен қарау
Слайд 31Тэг атрибуттары
Көбінесе ашылу тэгіне әсер ететін түрлендірулер атрибуттары
болады. Атрибуттар немесе сипаттамалар – тэг атауынан және бір-бірінен бос
орын арқылы бөлініп жазылған қосымша түйінді сөздерден тұрады
Слайд 32Көбінесе атрибуттардың мәнін жазу керек болады. Атрибут мәні – оның
түйінді сөзінен теңдік «=» белгісі арқылы бөлініп жазылады.
Слайд 33Атрибут мәні (“”) алынып жазылуы тиіс, бірақ та оны қолданбай-ақ
қоюға болады. Ал жабу тэгінде атрибуттар болмайды.
Слайд 48FONT элементінің атрибуттары
size - қаріптің өлшемі
color - қаріптің түсі
face -
қаріптің гарнитурасы
Слайд 52 - маркерленген тізім
- нөмірленген тізім
- анықтамалар тізімі
Тізімнің
тақырыбы міндетті
емес элемент болып табылады және
ол тэгі
арқылы беріледі. Тізімнің құрамы жолдардан тұрады және
әрбір жол
Слайд 55Үнсіз келісім бойынша маркерлер қара боялған дөңгелекше тәріздес болады, бірақ
оның формасын өзгертуге болады. Ол үшін type атрибуты қолданылады.
Слайд 56Мысалы, оның келесі мәндері бар:
Жаңалықтар - іші боялған шаршы
type=“circle”Жаңалықтар - іші боялмаған дөңгелек
Слайд 59type=1 - араб цифрларымен нөмірлеу
type=А – латынның үлкен әріптерімен
type=а –
латынның кіші әріптерімен
type=І – римнің цифрлерінің үлкен сандарымен
type=і – римнің
цифрлерінің кіші сандарымен Мысалы, нөмірленген тізімнің түрлері:
Слайд 61
Құжатқа кесте қойған кезде әр кесте
тэгі арқылы басталып
жабу
тэгі арқылы аяқталуы керек. Келесі тэгтер:
TR – кестенің жеке
жолын құруTD – кестенің жеке ұяшықтарын құру
TH – кестенің тақырыптық ұяшығын құру
CAPTION – кестенің атауын құруға
арналған
Слайд 64 Кестенің жалпы параметрлері:
(TABLE тэгіне қолданылатын атрибуттар)
width – кестенің ені
align – кестені терезеге қатысты туралау
border – кестенің сыртқы
шеркарасыbgcolor – кестенің фонының түсі
bordercolor – шекарасының түсі
Слайд 69Web-ке арналған графикалық файлдардың форматтары
GIF (Graphics Interchange Format – алмасудың
графикалық форматы), кеңейткіші- .gif
JPEG (Joint Photographic Expert Group – фотосуреттер
эксперттерінің біріккен тобы), кеңейткіші- .jpg және .jpegPNG (Portable Network Graphics – тасымалданатын желілік графика), кеңейткіші- .png
Слайд 80
cols – тік фреймдердің санын береді
rows – көлденең фреймдер
санын
тэгіне қолданылатын атрибуттар
Слайд 87Бір мысалды қарастырайық: Интернетке саяхат Интернетке хош келдініздер!
Блокнотта HTML кодын жазу
Блокнотта жазған кодты htm
кеңейткішімен сақтау
Слайд 89 жалпы тақырып терезе тақырыбы 1-ші деңгейдегі бос
тақырып мәтіні 2-ші деңгейдегі ішкі тақырып мәтіні
абзац басы тәгі, жол арасына бос орын қалдырады.
горизанталь сызықтан кейінгі мәтін
екі жолға бөлу
Мысалдар:
Слайд 90Тәгтердің қосарланып жазылуына мысалдар:
…
…
…
…
…
HTML-тәгтерінің жалқы жазылуы:
… …
…HTML-тілінің атрибуттар арқылы жазылуы: ...
...
Слайд 94 HTML тілі қандай тіл, атқаратын
қызметі қандай?
HTML
тілінің қандай негізгі
ұғымдары бар?
WWW қазақ тіліне
қалай аударылады?
Web-парақ дегеніміз не?
HTML тілі қандай хаттаманың пайда
болуына байланысты шықты?
Слайд 95
Тэг дегеніміз не?
Атрибут дегеніміз не?
Мәтінді безендіру үшін
қандай
тэгтер мен атрибуттар қолданылады?
Кестелерді құруға арналған
тэгтер мен атрибуттарын ата.
Кескінді параққа қоюға
арналған тэг қандай?
Фреймдерге бөлуге қолданылатын
тэгтер мен атрибуттарды ата.
Слайд 99Дүниежүзілік өрмек
Нөмірленбеген тізімдер
Сырғымалы жолдар
...
Гипертексті белгілеу тілі
WWW
html құжат
құрылымы
құжат бетіне сілтеме
center
графикалық бейне қою
html
текст
world wide web
тексті абзацтарға
бөлуүш бөлімнен тұрады
1992 жылы пайда болды
кестенің бағандары
ортасыны туралау
- ...
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
Сәйкестікті тап
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
Слайд 100"И? жо?"
1. html тілінің алғашқы нұсқасын
Еуропадағы ең кіші
қарапайым тіршіктер физика лабороториясыны?
қызметкері Тимом Бернерсом-Ли жасаған болатын.2. Интернет желісімен жұмыс істеу үшін
тышқан, пернетатта, монитор қажет.
3. Ең көп тараған броузерлер
ТСР және ІР.
4. html тілінің тегалары
блокнотта жазылады.
5. Web парақтар пішімінің
кеңейтілуі .htm
Слайд 102
Кесте жасау
1. Блокнот программасын іске қосыңыздар.
2.
келесі мәтін жолдарын теріңіздер.
Сабақ кестесі
COLOR=”RED” SIZE=”6” FACE=”KZ ARIAL”>Сабақ кестесі
| Уақыты | П11класс | П12 | П13 |
| 8-00 – 9-20 | Орыс тілі | Информатика | Тарих |
| 09-20 – 10-50 | Математика | Геодезия | Ағылшын тілі |
| 11-00 – 12-20 | Тарих | Сызба геометрия | Компьютерлік графика |
Слайд 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-парақтарға фондық суреттер салу
Фондық сурет – шағын төртбұрышқа орналасқан суреті бар графикалық файл. Броузерге фон ретінде тағайындалғанда, сурет көбейіп терезе аумағын толық алып тұрады.
Фон ретінде пайдаланылатын сурет тегінде көрсетіледі.
RASP.HTM файлына төмендегідей өзгерістер енгізіңіздер:
Менің алғашқы парағым
сәрсенбі күнгі
сабақ кестесі
Басқа HTML-құжатқа сурет арқылы сілтеме жасау
