10 сынып html

Presentation

•

Computers

•

10th Grade

•

Practice Problem

•

Hard

Ainura Baigara

Used 1+ times

FREE Resource

17 Slides • 0 Questions

Сабақтың тақырыбы:

HTML-ге кіріспе

10-сынып

Сабақтың мақсаты:

10.4.2.1. Web-парақшаларды әзірлеуде HTML

тегтерін қолдану.

Бағалау критерийлері:



Web-бет, «HTML тілі», «тег» ұғымдарын анықтау;



HTML-дің негізгі терминдерін білу;



HTML құжатының құрылымдарын құрай алу.

«Ойлан ...»

«Қалай ойлайсыңыздар,

Интернетте web-беттер қалай

құрылады?»

Түйін сөздер:

Қазақ тілінде

Ағылшын

тілінде

Web-беттер

Web Pages

Элементтер
Elements

Тег
Tag

Web-беттің негізгі қызметі – қажетті ақпаратты іздеу, жинастыру

және оны экранға шығаруды ұйымдастыру.

Әлемдегі алғашқы web-бетті 1991 жылы 6 шілдеде Тим Бернерс-Ли құрды.

Қолданыстағы web-беттердің басым көпшілігі – бұл жеке тұлғалардың
құрған web-беттері.

Web-бет құру алдында онда не орналасатынын анықтап, оның эскизін
қағаз бетіне түсіріп алу керек:
1.

Ақпаратты бірнеше бөлімдер бойынша топтастыру.

Әрбір бөлімде болатын мәтінді құрып алу.

Графиканы тауып, беттегі орнын анықтау.

Егер мәтінге графика, дыбыс немесе видеоклиптер енгізілген болса,
оларға қанша орын қажет болатынын болжап көру.

Содан кейін web-бетті құра беруге болады. Web-бетті құру үшін HTML

тілі пайдаланылады.

Web-бет дегеніміз не?

HTML

тілі деген не?

HTML – (Hypertext Markup Language -

“гипермәтін белгілеу тілі”) — интернет желісінде веб

беттерді жасауға арналған белгілеу тілі

HTML – бұл программалау тілі емес!
!

Web-беттің мазмұны әртүрлі болуы мүмкін, бірақ барлығы да

арнаулы HTML тілінде жазылғандықтан, бұл құжаттардың

кеңейтілімі .htm немесе .html болып келеді.

Элементтер деген не?

HTML-дің негізгі терминдері – элементтер, тегтер және атрибуттар

Web-бет элементтерден тұрады. Элементтер беттегі
объектілердің

құрылымы

мен

мазмұнын

қалай

анықтауды

көрсетеді.

Элементтер

бұрыштық

жақшаның < > көмегімен белгіленеді және келесі
түрде болады: <a>

Тег дегеніміз не?

Тег – қандай операцияны орындау қажет екенін көрсететін

HTML командасы

Элемент – бұл тегтер мен оның мазмұнының жиынтығы.
Элементке қойылатын бұрыштық жақшалар < > оның тег
екенін білдіреді.

Тегтер

Тегтер екi топқа бөлiнедi: жұпты, жұпсыз (дара)

• жұпсыз тегтер

• жұпты тегтер

Бұл тегтер өз жазылу орнына ғана әсерін тигізеді.

Мұндайда жабу тегі қажет болмайды.

Ашылатын тег, құжаттың бөлігіне қандай да бір

әсер береді

Жабылатын тег осы әсерді доғарады

Олардың арасында бұл элементке

қатысты мазмұн орналасады

Атрибуттар ж

не оларды

ндері дегеніміз не?

Атрибуттар – элемент туралы қосымша ақпарат беру үшін

пайдаланылатын сипаттамалар

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

<тег Атрибут атауы = «мәні">

ҚҰЖАТЫНЫҢ ҚҰРЫЛЫМЫ

<html>
<head>
<title> құжат
тақырыбы
</title>
</head>
<body>
Құжат денесі
</body>
</html>

HTML

мкіндіктерін

арастыру алдында, мына ма

ызды

жа

дайды атап

тейік:

Құрылған барлық

файлдар кіші латын

әріппен, арнайы

символдарсыз және
HTML кеңейтілуімен
жазылған атауға ие

болуы тиіс.

Жобаға жататын

барлық файлдар бір
бумада орналасуы

керек

Жұмыс үшін екі орта

керек болады:

Мәтіндік редактор

және Браузер

Кодты блокнотта жазамыз
да, сақталу орнын көрсетіп,
Файл ⇒ ... ретінде сақтау
(Сохранить как) ⇒ Файл

атауы nаmе*.html,

ал Файл типтеріне Барлық
файлдарды (Все файлы),
кодировка бөлімінен UTF-
8 кодтауын таңдап, Сақтау

батырмасын басамыз.

Блокнот мәтіндік редакторын
немесе Notepad ++, Sublime

мәтін т.б бағдарламалар

қолданылады.

Блокнот – Мәтінді құруға

және редакциялауға арналған
веб-парақ жасауға ыңғайлы.
Notepad ++ – мәтіндік және
бастапқы код редакторының

қосымшасы.

Браузер – бұл веб-
сайттарды көруге
мүмкіндік беретін
арнайы бағдарлама.

Браузерлер

HTML құжаттарын көруге мүмкіндік беретін

арнайы бағдарламаны анықтаңыздар

Браузер

HTML

Тег

Атрибуттар

Қандай операцияны орындау қажет екенін

көрсететін HTML командасы

Web-бетті құру үшін қандай тіл

пайдаланылады

Элемент туралы қосымша ақпарат беру үшін

пайдаланылатын сипаттамалар

Жауабын анықтамаға сәйкесінше орналастырыңыздар

Дискриптор:
- Жауабын анықтамаға сәйкесінше орналастырады

Браузер

Тег

HTML

Атрибуттар

Қысқартылған (HTML) сөздерді мағынасымен

сәйкестендіріңіз

LANGUAGE

HYPER

MARKUP

TEXT

БЕЛГІЛЕУ

ТІЛ

ГИПЕР

МӘТІН

Дискриптор:
- Қысқартылған сөздерді мағынасымен сәйкестендіреді

HTML құжатының құрылымына сәйкес етіп

орналастырыңыздар

</body>
</html>
</title>
құжат тақырыбы
<head>
<title>
құжат денесі
<body>
<html>
</head>

<html>
<head>
<title> құжат
тақырыбы </title>
</head>
<body>

құжат денесі

</body>
</html>

Дискриптор:
- HTML құжатының құрылымына сәйкес етіп орналастырады

Бүгінгі сабақта:
• Web-беттер туралы;
• HTML тілі не екенін;
• HTML-дің негізгі терминдерін;
• HTML құжаты құрылымдары туралы

мәлімет алдыңыздар.

Қорытынды

Қосымша тапсырма

Шығармашылық жұмыс

Интернеттегі web-сайттарды талдаңыздар.
Қандай тақырыпқа web-сайттар жеткіліксіз?

Қандай сайтты құрар едіңіздер? Қағаз парағына

web-беттің эскизін құрыңыздар. Бұл бетте не

орналасатынын ойланып, анықтаңыздар.

Сабақтың тақырыбы:

HTML-ге кіріспе

10-сынып

Show answer

Auto Play

Slide 1 / 17

SLIDE

Similar Resources on Wayground

13 questions

Iteration & Arrays with indexing & slicing in Python

Lesson

•

10th Grade

12 questions

1001 Evaluación HTML LEMO

Lesson

•

10th Grade

12 questions

Announcement

Lesson

•

10th Grade

11 questions

EXAM-STYLE QUESTIONS: WEB BROWSERS & COOKIES

Lesson

•

10th Grade

15 questions

Dasar-dasar Teknik Jaringan Komputer dan Telekomunikasi

Lesson

•

10th Grade

12 questions

Correo Electrónico

Lesson

•

10th Grade

13 questions

Clase 1 - Introducción a la Programación

Lesson

•

11th - 12th Grade

13 questions

pengertian, jenis, instalasi software

Lesson

•

10th Grade

Popular Resources on Wayground

15 questions

Fractions on a Number Line

Quiz

•

3rd Grade

10 questions

Probability Practice

Quiz

•

4th Grade

15 questions

Probability on Number LIne

Quiz

•

4th Grade

20 questions

Equivalent Fractions

Quiz

•

3rd Grade

25 questions

Multiplication Facts

Quiz

•

5th Grade

$fractions$

22 questions

fractions

Quiz

•

3rd Grade

6 questions

Appropriate Chromebook Usage

Lesson

•

7th Grade

10 questions

Greek Bases tele and phon

Quiz

•

6th - 8th Grade

Discover more resources for Computers

10 questions

Exploring Digital Citizenship Essentials

Interactive video

•

6th - 10th Grade

14 questions

[AP CSP] JavaScript Programming Quiz

Quiz

•

9th - 12th Grade

10 questions

Understanding Computers and Computer Engineering

Interactive video

•

7th - 12th Grade

37 questions

Python - Tuples, Lists, and List Methods

Quiz

•

9th - 12th Grade