«Студенттерге арналған ақпараттық-дидактикалық блок және әдістемелік нұсқаулар тәжрибелік сабаққа: Тақырып № “ Web-беттер құру. .HTML тілі туралы негізгі түсініктер (HTML-Hyper Markup Language)”
кафедра (курс) мәжілісінде қарастырылды 2011жыл
Хаттама №
Курсқа жауапты Буланова Р.К.
1. Тақырыбы: “ Web-беттер құру. .HTML тілі туралы негізгі түсініктер (HTML-Hyper Markup Language)”
2. Оқу сағат саны: 3 академиялық. сағат (150 мин)
3. Тақырып өзектiлiгi(оқу дәлелдемесi) : Интернет жүйесінде ақпараттар Web-парақта , сайтттарда сақталады .
4. Сабақтың мақсаты : Web-парақта мәтінді пішімдеу, мәтінге тізімдер қолдану, HTML-құжатында суреттерді бейнелеу және кестелер жасауды үйрету, сондай-ақ Web-парақты өңдеп жасау бойынша практикалық дағдыларды қалыптастыру.
5. Оқыту міндеті : HTML-құжатын құру, HTML-құжатына графикалық объектілер қою біліктілігі мен дағдыларын қалыптастыру.
6. Студент бiлуге тиiс:
- Компьютермен MS Windows ортасында жұмыс жүргізу тәртібін
7. Студент iстей алуға тиiс:
Операциялық жүйе MS Windows ортасында тізімше құру, файлдарды көшіру, өшіру
8. Сабаққа дайындалу сұрақтары :
- негiзгi бiлiм бойынша :
1. Компьютердің құрылымы: жүйелік блок және оның элементтері.
2. Негізгі сыртқы қондырғылар: ақпараттарды сақтағыштар, монитор, клавиатура, принтер, тышқан және т.б.
- осы сабақ тақырыбы бойынша:
1. World Wide Web қызметі қандай мүмкіндіктерге ие?
2. Web-құжаттың пішімі қандай? Олардың дәстүрлі мәтіндік құжаттардан айырмашылығы неде?
3. Браузер деп нені айтады? Ол қандай қызмет атқарады?
4. Internet.-тегі парақ қалай орналасқан?
5. Гипермәтіндік тіл деген не?.
6. MS Internet Explorer-де Web-парағын қалай құрылады?
7. Internet Explorer-де құжатты қалай сақтауға болады?
8. HTML-құжаттың құрылымы.
9. HTML-құжаттың атын безендіруде қандай тэгтер қосылады?
10. Мәтіндік ақпаратты безендірудің ережелерін атаңыз.
11. Тізімдерді безендіру ережелерін атаңыз.
12. Суреттерді безендіру ережелерін атаңыз.
13. Кестелерді безендіру ережелерін атаңыз.
9. Әдебиеттер
Негiзгi әдебиеттер:
1. Шарф Ш. Д. HTML 3.2. Справочник-С.-ПБ.,1998.
2. Морис Б. HTML в действии-С.-ПБ., 1997
3. Гончаров М.В. Введение в Internet. Часть 7. Интернет для бизнесменов, предпринимателей и банкиров.-М.,2001.
4. Под редакцией С.В.Симоновича. Информатика. Базовый курс. Учебник для ВУЗов 2001, 640 с.
Қосымша әдебиеттер:
1. Ефимова О., Морозов В., Шафрин Ю. Курс компьютерной технологии, 1-том, Москва, АБФ, 1998, стр. 452-477.
3. Микляев А.П., Настольная книга пользователя, Москва, 2000, стр. 329-366
10. АҚПАРАТТЫҚ – ДИДАКТИКАЛЫҚ БӨЛІМ
HTML-құжатының негіздері
HTML тілі World Wіde Web қызмет бабымен бірге дами отырып, Web-парақтарының ең жақсы деген мүмкіндіктерін жүзеге асырып, оны кең пайдалану жолдарымен толықтырылып отырылды. Ол World Wіde Web жүйесінің негізі бола отырып, оның өте кең тарауына себепші болды. World Wіde Web сөзі қазақ тіліне кеңейтілген бүкіләлемдік өрмек болып аударылады. HTML тілінің мағынасы мен атқаратын қызметін оның атынан анықтауға болады.Web-тораптарындағы құжаттардың негізгі форматы HTML тілі болып табылады. HTML (Hyper Marker Language) ағылшын тілінен аударғанда мына мағынаны білдіреді: гипермәтінді белгілеу тілі. Ол құжаттың бастапқы мәніне енгізілетін қарапайым командалар жиынынан тұрады, олар осы құжаттың экранда көрсетілуін басқаруға мүмкіндік береді. Сонымен қатар, кез келген мәтіндік редакторда даярланған құжаттар HTML форматы ретінде сақталғаннан кейін Web-бет түрінде бейнеленеді.
Гипермәтін- бұл қосымша элементереді басқару мақсатында ішінде екпінді элемент орналасқан мәтін түрі. Ол мәтін ішіне сурет, дыбыс енгізуге, мәтінді безендіру және форматтау әрекеттерін орындайтын немесе осы құжаттың басқа бөлігіне сілтемесі бар алғашқы нүкте ретінде қарастырылатын белгіленген сөз.
Гипермәтінді бейнелеу үшін браузер деп аталатын арнайы көрсету программалары қолданылады. Броузер-бұл Web-беттерін (гипермәтіндік беттерді ) қарауға негізделген программа (Internet Explorer, Netscape Navigator).
Графикалық, бейнелік және аудиомәліметтер жеке файлдарға жазылады да, құжат ішіндегі сілтемелерге сәйкес браузерлер оларды біртіндеп іске қосу қызметін атқарады. Файлдардағы мәліметтерді қабылдап, браузер оларды реттеп орналастырады да, HTML тілінің командалары арқылы мәтінге қажетті түстер енгізіп, терезе көлемін, мәтін әріпі мен оның мөлшерін және т.б. әрекеттерді анықтап, нәтижесін экранда көрсетеді.
HTML файлдары *.htm немесе *.html деген кеңейтулер арқылы өрнектеледі. Оны құрастыру үшін «Қолданбалы» программасындағы Блокнотты пайдаланамыз. Ал оның нәтижесін көру үшін Microsoft Internet Explorer браузері қолданылады.
HTML тілінің бастапқы мәтінді белгілейтін командалары белгі немесе тэг (tag) деп аталады. Тэг символдар тізбегінен тұрады. Тэгтердің көбісі ашылатын тэг <> және жабылатын тэг </> арқылы жазылады. HTML-құжаты әрқашан <HTML> тэгімен басталады және </HTML> тэгімен аяқталады. Ал ары қарай беттің тақырыбы жазылады <HEAD>...</HEAD>, беттің атын анықтайтын тэгтер <TITLE>...</TITLE>. Тек енді <BODY>...</BODY> тэгтерінің ортасына өз ақпараттарыңызды, суреттеріңізді, видеофайлдарыңызды және аудиофайлдарыңызды орнатуға болады.
HTML тілінің құрылымы
<html> <head> -------- Мәтін тақырыбы --------- </head> --------- Мәтін құжаты ---------Мысал 1.</html><html> <head> <title> құжат тақырыбы </title> </head> <body> Асанбаева Айнур Муратовна </body> </html>
Мәтінді пішімдеу
HTML тілі мәтін бөліктерін пішімдеудің логикалық (logіcal), әрі физикалық (physіcal) стильдерін жүзеге асыра алады.
Логикалық пішімдеу тэгтері
Мәтінді логикалық пішімдеу немесе белгілеу оның бөліктерін ерекшелеп, құжат құрылымын көрсете алады.
Мұнда мәтіннің екі негізгі бөлігін ерекшелеуге болады:
Құжаттағы тақырыптарды белгілеу;
Мәтін элементтерін белгілеу.
Мұнда ашылу тэгіне сәйкес жабылу тэгі болуы тиіс, олардың бірі болмай қалса, экрандағы мәтін бейнесі өзгеріп кетеді. Кез-келген тэг алдынан және артынан автоматты түрде бос жол пайда болады.
Логикалық стильдегі мәтін фрагменттерін енгізу тэгтері төменде көрсетілген.
Атрибут
Атқаратын қызметі
<EM> ... </EM>
Ағылшынның emphasіs — акцент сөзінен шыққан, яғни курсив түрінде берілетін мәтін бөлігін қоршап тұратын белгілер болып табылады. (аналогы <i>...</i>)
STRONG> ... </STRONG>
Ағылшынның strong emphasіs — күшті акцент дегені, мәтін ішінде қарайтылған әріп болып көрсетіледі. (аналогы <b>...</b>)Экранға шығарылатын хабарлама үлгілерін демонстрациялау үшін ұсынылады.
<CODE> ... </CODE>
Программа мәтінін көрсету үшін қолданылатын стиль түрі.
Мәтін код немесе формула түрінде бейнеленеді (көп жағдайда Courier әріпі түрінде)
<SAMP> ... </SAMP>
Ағылшынның sample — мысал, үлгі деген сөзі, программа жұмысы нәтижелерін ендері бірдей моношрифт түрінде экранға шығарарда пайдаланылады
<KBD> ... </KBD>
Ағылшынның keyboard — пернетақта (клавиатура) қысқаша сөзі. Пернелерден енгізілетін сөз тіркестерін көрсету мақсатында қолданылады.
<VAR> ... </VAR>
Ағылшынның varіable — айнымалы сөзі, программадағы айнымалы аттарын жазу үшін енгізілген стиль түрі, қисайтылған курсивке ұқсас әріп түрі.
<P> ... </P>
Мұндай белгі абзацты анықтайды. <P> және </P> тэгтерінің ортасына жазылған мәтін бір абзацқа бөлінеді.
Көп жағдайларда HTML құжаттарының тақырыптары болады. Олар <Hn>....</Hn> тэгтер арқылы жасалады, n–нің орнына 1-ден 6-ға дейін сан жазамыз. Осы тэгтер арасына мәтінімізді орналастырсақ, сізге белгілі көлемді тақырып шығады. Тақырыптың бірінші деңгейі-өте үлкен, алтыншы деңгейі-өте кіші. Тақырыптар тэгінің ALІGN ("элайн"-деп оқылады, ағылшынша «тегістеу, түзету» деген сөз) атты атрибуты болады, ол абзацтың осындай атрибутымен бірдей, мәндері мына сөздердің біріне сәйкес келуі тиіс:
· ALIGN=”left”-параметрінің мәні мәтінді сол жаққа түзетеді.
· ALIGN=”center”-мәтін терезе браузерінің ортасына орналасады.
· ALIGN=”right”-мәтінді оң жаққа қарай түзетеді.
· ALIGN=”justify”-браузер терезесінің ені бойынша түзетеді.
<H1> ... </H1> — <H6> ... </H6><Hi> белгісі (і- дегеніміз – 1-ден 6-ға дейінгі сандар) тақырыптардың деңгейін білдіреді. Бірінші деңгей – ең үлкені, алтыншы деңгей – ең кішісі.
Физикалық пішімдеу тэгтері
Атрибут
Атқаратын қызметі
<B> ... </B>
Қарайтылған әріп
<I> …</I>
Курсивтік әріп
<U> … </U>
Асты сызылған
<S> … </S>
Сызылған
<strike> … </strike>
Сызылып тастаған(аналогы <s>...</s>)
<big> … </big>
Негізгі әріптен мәтін іріленіп жазылады.
<small> … </small>
Негізгі әріптен мәтін майдаланып жазылады.
<TT> …</TT>.
Баспа машинкесіндегідей
<BLINK>…</BLINK>
Ерекшеленген мәтінге жарқырау эффектісін береді, ол тек Netcape браузерінде орындалады.
<font size= “ ”>… </font>
SІZE=…атрибуты әріптің көлемін (мөлшерін) тағайындайды. Әріптердің алдын ала берілетін жеті түрлі көлемі бар, олар 1-ден 7-ге дейінгі сандармен белгіленеді. Бұл сандар белгілі бір өлшем бірліктеріне сәйкес келмейді, тек санның мәні үлкейген сайын әріптің де мөлшері ұлғаяды. Егер сан көрсетілмесе, келісім бойынша ол 3-ке тең болып саналады.
<font color= “ ”>...</font>
COLOR=… атрибуты әріптің түсін таңдау мүмкіндігін береді, ол ағылшын тіліндегі мағынасы бар түйінді сөз арқылы (мысалы, RED - қызыл) немесе RGB жүйесіндегі он алтылық санмен (мысалы, #FF0000 – бұл да қызыл) берілуі мүмкін
<font face= “ ”>...</font>
FACE=… атрибуты әріп (шрифт) типін береді. Осы атрибуттың мәні компьютерде орнатылған әріптер атының біріне сәйкес келуі керек.
<FONT FACE= “Tahoma”, “Arial”, “Verdana”>Бұл мәтін көрсетілген 3 әріптің біреуімен көрсетіледі. </FONT>
<SUP> … </SUP>
Жоғарғы мәтін -- xиндекс математикалық формулалар жазу үшін
<SUВ>…</SUВ>
Төменгі мәтін -- xиндекс химиялық формулаларды жазуға ыңғайлы
Тізімдердің (lіsts) НТМL тіліне енгізілуінің басты себебі – мәтіндік редакторлардың тізімдермен жұмыс істеу мүмкіндіктерінің мол болуы әсерінен деп айтуға болады. Тізім құрғанда оның жолдарын нөмірлеу немесе белгілеуді біртіндеп орындау қажет етілмей, бұл жұмысты программа өз міндетіне алады. Егер тізім жаңа жолмен толықтырылатын немесе оның бірі қысқартылатын болса, онда нөмірлеу реттілігі де автоматты түрде түзетіледі. Тізім нөмірленбей, тек белгіленетін кездерде әрбір жол алдына маркерлеу белгілері: сызықшалар, дөңгелекшелер, тіктөртбұрыштылар, ромбылар және де басқа да таңбалар қойылады. Осының нәтижесінде тізім оқуға ыңғайлы түрдегі «фирмалық» сипатқа ие болады.
Тізім жасау үшін қолданылатын тэгтерді шартты түрде екі топқа бөлуге болады: олардың біріншісі – тізімнің жалпы көрінісін анықтайтын атрибуттық сыртқы белгілер, ал екіншісі – оның құрылымын қалыптастыратын ішкі белгілер. Соңғы ішкі белгілер үшін тек бір ғана ашылу тэгі қолданылады.
Нөмірленген тізімдер.
Нөмірленген тізімдер алдына нөмір қойылады. <ОL> және </ОL> сыртқы тэгтерінің арасында орналасқан мәтін жолдары белгіленген тізім ретінде қабылданады. Мұнда әрбір белгіленетін мәтін жолын <LІ> ішкі тэгімен бастап отыру керек.
