10 сынып html
Presentation
•
Computers
•
10th Grade
•
Practice Problem
•
Hard
Ainura Baigara
Used 1+ times
FREE Resource
17 Slides • 0 Questions
1
Сабақтың тақырыбы:
HTML-ге кіріспе
10-сынып
2
Сабақтың мақсаты:
10.4.2.1. Web-парақшаларды әзірлеуде HTML
тегтерін қолдану.
Бағалау критерийлері:
Web-бет, «HTML тілі», «тег» ұғымдарын анықтау;
HTML-дің негізгі терминдерін білу;
HTML құжатының құрылымдарын құрай алу.
3
«Ойлан ...»
«Қалай ойлайсыңыздар,
Интернетте web-беттер қалай
құрылады?»
4
Түйін сөздер:
Қазақ тілінде
Ағылшын
тілінде
Web-беттер
Web Pages
Элементтер
Elements
Тег
Tag
5
Web-беттің негізгі қызметі – қажетті ақпаратты іздеу, жинастыру
және оны экранға шығаруды ұйымдастыру.
Әлемдегі алғашқы web-бетті 1991 жылы 6 шілдеде Тим Бернерс-Ли құрды.
Қолданыстағы web-беттердің басым көпшілігі – бұл жеке тұлғалардың
құрған web-беттері.
Web-бет құру алдында онда не орналасатынын анықтап, оның эскизін
қағаз бетіне түсіріп алу керек:
1.
Ақпаратты бірнеше бөлімдер бойынша топтастыру.
2.
Әрбір бөлімде болатын мәтінді құрып алу.
3.
Графиканы тауып, беттегі орнын анықтау.
4.
Егер мәтінге графика, дыбыс немесе видеоклиптер енгізілген болса,
оларға қанша орын қажет болатынын болжап көру.
Содан кейін web-бетті құра беруге болады. Web-бетті құру үшін HTML
тілі пайдаланылады.
Web-бет дегеніміз не?
6
HTML
тілі деген не?
HTML – (Hypertext Markup Language -
“гипермәтін белгілеу тілі”) — интернет желісінде веб
беттерді жасауға арналған белгілеу тілі
Н
Т
М
L
HTML – бұл программалау тілі емес!
!
Web-беттің мазмұны әртүрлі болуы мүмкін, бірақ барлығы да
арнаулы HTML тілінде жазылғандықтан, бұл құжаттардың
кеңейтілімі .htm немесе .html болып келеді.
7
Элементтер деген не?
HTML-дің негізгі терминдері – элементтер, тегтер және атрибуттар
Web-бет элементтерден тұрады. Элементтер беттегі
объектілердің
құрылымы
мен
мазмұнын
қалай
анықтауды
көрсетеді.
Элементтер
бұрыштық
жақшаның < > көмегімен белгіленеді және келесі
түрде болады: <a>
8
Тег дегеніміз не?
Тег – қандай операцияны орындау қажет екенін көрсететін
HTML командасы
Элемент – бұл тегтер мен оның мазмұнының жиынтығы.
Элементке қойылатын бұрыштық жақшалар < > оның тег
екенін білдіреді.
9
Тегтер
Тегтер екi топқа бөлiнедi: жұпты, жұпсыз (дара)
• жұпсыз тегтер
• жұпты тегтер
<HR>, <BR>
Бұл тегтер өз жазылу орнына ғана әсерін тигізеді.
Мұндайда жабу тегі қажет болмайды.
<TITLE>
...
</TITLE>
Ашылатын тег, құжаттың бөлігіне қандай да бір
әсер береді
Жабылатын тег осы әсерді доғарады
Олардың арасында бұл элементке
қатысты мазмұн орналасады
10
Атрибуттар ж
ә
не оларды
ң
м
ә
ндері дегеніміз не?
Атрибуттар – элемент туралы қосымша ақпарат беру үшін
пайдаланылатын сипаттамалар
Көбінесе атрибуттардың мәнін жазу керек болады. Атрибут
мәні – оның түйінді сөзінен теңдік «=» белгісі арқылы бөлініп
жазылады.
<тег Атрибут атауы = «мәні">
11
ҚҰЖАТЫНЫҢ ҚҰРЫЛЫМЫ
<html>
<head>
<title> құжат
тақырыбы
</title>
</head>
<body>
Құжат денесі
</body>
</html>
12
HTML
м
ү
мкіндіктерін
қ
арастыру алдында, мына ма
ң
ызды
ү
ш
жа
ғ
дайды атап
ө
тейік:
Құрылған барлық
файлдар кіші латын
әріппен, арнайы
символдарсыз және
HTML кеңейтілуімен
жазылған атауға ие
болуы тиіс.
Жобаға жататын
барлық файлдар бір
бумада орналасуы
керек
Жұмыс үшін екі орта
керек болады:
Мәтіндік редактор
және Браузер
Кодты блокнотта жазамыз
да, сақталу орнын көрсетіп,
Файл ⇒ ... ретінде сақтау
(Сохранить как) ⇒ Файл
атауы nаmе*.html,
ал Файл типтеріне Барлық
файлдарды (Все файлы),
кодировка бөлімінен UTF-
8 кодтауын таңдап, Сақтау
батырмасын басамыз.
Блокнот мәтіндік редакторын
немесе Notepad ++, Sublime
мәтін т.б бағдарламалар
қолданылады.
Блокнот – Мәтінді құруға
және редакциялауға арналған
веб-парақ жасауға ыңғайлы.
Notepad ++ – мәтіндік және
бастапқы код редакторының
қосымшасы.
Браузер – бұл веб-
сайттарды көруге
мүмкіндік беретін
арнайы бағдарлама.
Браузерлер
13
HTML құжаттарын көруге мүмкіндік беретін
арнайы бағдарламаны анықтаңыздар
Браузер
HTML
Тег
Атрибуттар
Қандай операцияны орындау қажет екенін
көрсететін HTML командасы
Web-бетті құру үшін қандай тіл
пайдаланылады
Элемент туралы қосымша ақпарат беру үшін
пайдаланылатын сипаттамалар
Жауабын анықтамаға сәйкесінше орналастырыңыздар
Дискриптор:
- Жауабын анықтамаға сәйкесінше орналастырады
Браузер
Тег
HTML
Атрибуттар
14
Қысқартылған (HTML) сөздерді мағынасымен
сәйкестендіріңіз
LANGUAGE
HYPER
MARKUP
TEXT
БЕЛГІЛЕУ
ТІЛ
ГИПЕР
МӘТІН
Дискриптор:
- Қысқартылған сөздерді мағынасымен сәйкестендіреді
15
HTML құжатының құрылымына сәйкес етіп
орналастырыңыздар
</body>
</html>
</title>
құжат тақырыбы
<head>
<title>
құжат денесі
<body>
<html>
</head>
<html>
<head>
<title> құжат
тақырыбы </title>
</head>
<body>
құжат денесі
</body>
</html>
Дискриптор:
- HTML құжатының құрылымына сәйкес етіп орналастырады
16
Бүгінгі сабақта:
• Web-беттер туралы;
• HTML тілі не екенін;
• HTML-дің негізгі терминдерін;
• HTML құжаты құрылымдары туралы
мәлімет алдыңыздар.
Қорытынды
17
Қосымша тапсырма
Шығармашылық жұмыс
Интернеттегі web-сайттарды талдаңыздар.
Қандай тақырыпқа web-сайттар жеткіліксіз?
Қандай сайтты құрар едіңіздер? Қағаз парағына
web-беттің эскизін құрыңыздар. Бұл бетте не
орналасатынын ойланып, анықтаңыздар.
Сабақтың тақырыбы:
HTML-ге кіріспе
10-сынып
Show answer
Auto Play
Slide 1 / 17
SLIDE
Similar Resources on Wayground
13 questions
pengertian, jenis, instalasi software
Presentation
•
10th Grade
13 questions
Iteration & Arrays with indexing & slicing in Python
Presentation
•
10th Grade
12 questions
1001 Evaluación HTML LEMO
Presentation
•
10th Grade
12 questions
Announcement
Presentation
•
10th Grade
11 questions
EXAM-STYLE QUESTIONS: WEB BROWSERS & COOKIES
Presentation
•
10th Grade
15 questions
Dasar-dasar Teknik Jaringan Komputer dan Telekomunikasi
Presentation
•
10th Grade
12 questions
Correo Electrónico
Presentation
•
10th Grade
13 questions
Clase 1 - Introducción a la Programación
Presentation
•
11th - 12th Grade
Popular Resources on Wayground
20 questions
"What is the question asking??" Grades 3-5
Quiz
•
1st - 5th Grade
20 questions
“What is the question asking??” Grades 6-8
Quiz
•
6th - 8th Grade
10 questions
Fire Safety Quiz
Quiz
•
12th Grade
20 questions
Equivalent Fractions
Quiz
•
3rd Grade
34 questions
STAAR Review 6th - 8th grade Reading Part 1
Quiz
•
6th - 8th Grade
20 questions
“What is the question asking??” English I-II
Quiz
•
9th - 12th Grade
20 questions
Main Idea and Details
Quiz
•
5th Grade
47 questions
8th Grade Reading STAAR Ultimate Review!
Quiz
•
8th Grade
Discover more resources for Computers
20 questions
“What is the question asking??” English I-II
Quiz
•
9th - 12th Grade
10 questions
Fire Prevention
Quiz
•
9th - 12th Grade
50 questions
STAAR English 2 Review
Quiz
•
10th Grade
20 questions
Figurative Language Review
Quiz
•
10th Grade
20 questions
Grammar
Quiz
•
9th - 12th Grade
16 questions
AP Biology: Unit 1 Review (CED)
Quiz
•
9th - 12th Grade
20 questions
verbos reflexivos en español
Quiz
•
9th - 12th Grade
11 questions
Expectations Review
Quiz
•
9th - 12th Grade