1 апта

Мақсаты

HTML тілімен танысу
HTML тілінде код жазып үйрену
HTML тілінде сабақ кестесін құру

Күтілетін нәтижелер

Жобаны зерттегеннен кейін оқушылар:

– мұғаліммен жақсы қарым-қатынас жасай алу
– ақпаратты талдау және жалпылау
– оқуға деген жауапты көзқарас қалыптасады
– өзі жеке жұмыс жасауға дағдылану
– өз бетінше логикалық пайымдау және қорытынды жасау
– HTML тілінде код жазып үйрену
– HTML тілінің құрылымын түсіну

Кіріспе

HTML (Hypertext Markup Language) – бұл веб-бетті және оның мазмұнын құрылымдау және көрсету үшін қолданылатын код. HTML бағдарламалау тілі емес; бұл белгілеу тілі және браузерге сіз кірген веб-беттерді қалай көрсету керектігін айту үшін қолданылады. Бұл веб-дизайнердің қалауына байланысты күрделі немесе қарапайым болуы мүмкін.

Жоба барысында үйренесіз:

қарапайым HTML файлын жасау;
HTML тілінде сабақ кестесін жасау;
HTML тілінде код жазып үйрену.

Пәнаралық байланыс:

Информатика (HTML бағдарламалау тілімен жұмыс)

Мұғалімге арналған нұсқаулық

Жобаны бағалау үшін, бірінші аптада оқушыларға осы материалды (PBLrubrics) беріңіз:

оқушылар қандай критерийлер бойынша дайындалу керектігін алдын ала түсіну үшін,
оқушылар өз әріптестеріне тиісті баға бере алу үшін.

Сабақтың басында ұсынылады:

– жобаға деген қызығушылықты ояту үшін бірнеше “жетекші сұрақтар” қойыңыз:

– қандай бағдарламалау тілдерімен таныссыздар?
– осыған дейін код жазып көрдіңіздерме?
– браузерде веб-беттердің қалай жасалатынын білесіздерме?

HTML дегеніміз өңдеуден кейін визуалды көрініске айналатын командалар жиынтығы. HTML белгілеу тілінің көмегімен браузер пайдаланушы енгізген мекен-жайға сұраныс жасайды және файлды .html форматта алады. Браузер кодты таниды, өзіне таныс сигналдарды таңдайды: сөзбен не жазу керектігін, тақырыпты қайда қою керектігін түсінеді. Осылайша, файлдан код қажетті визуалды нысандарға түрлендіріледі.

Егер сіз қазір ноутбукта немесе компьютерде болсаңыз, кез келген блогтың HTML-да қалай көрінетінін қарай аласыз. Google Chrome үшін кез келген жерді тінтуірдің оң жақ түймешігімен басып, “View Page Source” таңдасаңыз, сол беттің HTML кодын көресіз.

HTML тілі ақпаратты құрылымдауға көмектеседі. Бұл суретті қосу, мәтінді абзацтарға бөлу, тақырыптар мен субтитрлерді қосу, тізім жасау, кесте енгізу, кез-келген элементті салу командалары болуы мүмкін. Беттің орналасуы оны әзірлеуші кодтағандай болады.

HTML элементінің анатомиясы

Тілдің негізгі құрылымдары – тегтер. Барлық HTML тегтері “<” (сол жақ бұрыштық жақша) деп басталып, ” > ” (оң жақ бұрыштық жақша) белгісімен аяқталады. Әдетте, бастапқы тег және аяқтау тег бар.

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

Аяқтау тегі бастапқы тег сияқты көрінеді, ол бұрыштық жақшалардың ішіндегі мәтіннің алдында тікелей қиғаш сызықпен ерекшеленеді. <hr> (көлденең сызықты анықтайтын тег) сияқты кейбір тегтер соңғы тегті қажет етпейді.

HTML таңбалар регистріне, синтаксиске жауап бермейді. Тегтерді браузер таниды немесе танымайды.

<html>

<head>

     <title>…..</title>

</head>

<body>

  ……

</body>

</html>

Қарапайым HTML беті үш тегтен тұрады: <html>, <head> және <body>. Құжатта <head> және < body> тек бір рет қолданылады.

<html> құжатта “doctype” — құжат түрінің белгіленуінен кейін бірден жүреді. Ол арқылы браузер HTML нұсқасын анықтайды және бетті қалай дұрыс көрсету керектігін түсінеді.
<head> маңызды қызметтік ақпаратты – бет тақырыбы мен кодтауды сақтайды.
< body> беттің мазмұнын сақтайды. Браузерде код осылай көрсетіледі. Осы тегтің ішіне мәтіндер мен суреттер қосылады.

HTML сайттарда қалай жұмыс істейді?

Браузерлердің HTML файлдарын пайдаланып веб-беттерді қалай салатынын талдап көрейік.

Белгілеудің жұмыс принципі келесідей:

Сіз мекен-жай жолына сайттың немесе беттің мекен-жайын енгізесіз.
Браузер осы мекен-жайға сұрау жібереді және файлды HTML форматында алады.
Алынған файлдың коды визуалды нысандарға дәйекті түрде түрлендіріледі.

Дереккөздер:

Зертханалық жұмыс №1.

Қарапайым HTML файлын жасау

Қадам 1. Веб-сайтыңыздың барлық файлдарын сақтайтын жеке папка жасаңыз.

Қадам 2. Текстовый документ бағдарламасын іске қосыңыз.

Қадам 3. Блокнот ішіне қарапайым HTML файл кодын теріңіз.

<HTML>

     <HEAD>

           <TITLE> HTML оқу файлы</TITLE>

     </HEAD>

     <BODY>

           Сейсенбіге арналған сабақ кестесі

     </BODY>

</HTML>

Қадам 4. Файлды tuesday.HTML (файл түрін сақтағанда HTML қосуды ұмытпаңыз) атауымен және типін все файлы түрінде жеке папкада сақтаңыз.

Қадам 5. Веб-бетті көру үшін кез-келген браузерді пайдаланыңыз (Google Chrome, Internet Explorer, Opera, Mozilla Firefox немесе т.б.). Ол үшін жеке папканы ашып, tuesday.HTML файлын екі рет басу арқылы браузер терезесін ашыңыз.

Экранда сіз суретте көрсетілген жұмыс нәтижесін көресіз.

Зертханалық жұмыс №2.

Экрандағы мәтіннің орналасуын басқару.

Қадам 1. Блокнотта Веб-беттің мәтінін ашыңыз (tuesday.HTML файлын тінтуірдің оң жақ батырмасын 1 рет басыңыз, Открыть с помощью… және Блокнот бағдарламасын таңдаңыз).

Қадам 2. tuesday.HTML файлына өзгертулер енгізіңіз, әр түрлі қатарға сейсенбіге арналған, сабақ, кестесі сөздерін орналастыру.

<HTML>

     <HEAD>

           <TITLE>HTML оқу файлы</TITLE>

     </HEAD>

     <BODY>

           сейсенбіге арналған

           сабақ 

           кестесі 

     </BODY>

</HTML>

Қадам 3. tuesday.HTML файлына өзгертулер енгізілген мәтінді сақтаңыз. (файл |сақтау мәзірі).

Қадам 4. Жеке папканы ашып, tuesday.HTML файлын екі рет басу арқылы браузер терезесін ашыңыз.

Экранда мәтінді көрсету өзгерді ме?

Сіздің веб-парағыңыздың көрінісі өзгермегеніне таң қалмаңыз.

Зертханалық жұмыс №3.

Мәтінді өзгертудің кейбір арнайы командалары

Жолды келесі жолға аудару тегі <BR> жолды кейінгі мәтіннен немесе графикадан бөледі. <P> тегі де жолды абзацқа бөледі, бірақ сонымен бірге абзацты көрнекі түрде бөлетін бос жолды қосады. Екі тег те бір элемент, <P> тегі екі еселенген, яғни жабу тегі қажет.

Қадам 2. tuesday.HTML файлына өзгертулер енгізіңіз.

<HTML>

     <HEAD>

          <TITLE> HTML оқу файлы </TITLE>

     </HEAD>

     <BODY>

          <P> сейсенбіге арналған</P>

          <BR> сабақ <BR>

          кестесі

     </BODY>

</HTML>

Қадам 3. Енгізілген өзгерістерді сақтаңыз, браузерде веб-бетті жаңартыңыз.

Экранда мәтінді көрсету қалай өзгерді? Сіздің веб-парағыңыз суретте көрсетілгендей болады.

Қадам 4. Браузерде пайда болған нәтижеге қарай отырып, HTML кодқа талдау жасаңыз.

Course оралу

Келесі сабақ

HTML тілінде сабақ кестесін құру

1 апта