Мазмұны
Кіріспе……………………………………………………………. 3
Негізгі бөлім 8
Бөлім1 HTML тіліне кіріспе 8
1.1 Бүкіләлемдік компьтерлік Интернет
World Wide Web (бүкіләлемдік
1.2. HTML тіліне кіріспе. Тілдің атқаратын
1.3. HTML құжатының құрылымы.Құжаттың функциональдық бөлігі мен
1.4 Қаріп(шрифт) стильдерін басқару . Логикалық
Бөлім2 HTML тілінің
2.1. HTML тілінде тізімдер жасау
2.2. HTML құжатында кестелерді қалыптастыру.
2.3. Гипермәтіндік сілтемелерді ұйымдастыру. 21
2.4. HTML құжатында графиканы қолдану. 23
2.5. Фрейм құрылымы. (Web парақта бірнеше
2.6. HTML құжатында формаларды
2.7. HTML құжатындағы мультимедиялық объектілер.
Бөлім 3 HTML тегінің редакторы
3.1. HTML тегінің редакторы. MS
3.2. Дербес Web сайтты құру.
3.3. Web сайтты басқару. Web
Есептеуіш техника кабинетіндегі қауіпсіздік ережесі және еңбекті
Қорытынды 37
Қолданылған әдебиеттер……………………………………………………..
39
Кіріспе
Қазақстан Республикасының білім беру жүйесін ақпараттандыру еліміздің даму
Информатика пәнінің орта білім беру жүйесіндегі ролі ақпараттық
Бүгінгі таңда компьютерлік дизайн, Web-дизайн, жүйелік программалушы, администратор
Мектеп бітірушілер компьютерлік сауатылықты меңгеріп шығады, бірақ келешекте
Интеренетте материалды жариялау тиімді болу үшін ол Web-дизайн
Бұл жұмыс өзінің сайтын дайындауды үйренем деушілерге арналған.
Жұмыс екі бөлімнен тұрады, біріншісі теориялық: мәтінді форматтау,
Қазіргі замандағы Интернет - технологиялар Web-сайт бұл дүниенін
Не себептен мектеп курсына Интеренет технологияны оқыту керек
Қазіргі кезде Web – парақты құру үшін
Бұның негізгі белгісі Интернет-жобаларға өсіп жатқан инвестициялар,
Интернет технологиялар төмендегі жолдармен дамып келе жатыр:
§
§
§
§
Web-сайт жасақтау жұмысын бірнеше кезеңден турады:
§
§
§
§
§
§
§
Жоспарлау кезеңінде төменгі мәселелер шешілуі керек:
1. Сайттың орны.
2. Сайттың аудиториясы кімдер.
3. Қандай ақпарат жарияланады.
4. Қолданушылармен қарым-қатынас қандай түрде ұйымдастырылады.
Элементтерді жасақтау кезеңінде сайттың программалық өнім түрінде жүзеге
1. Навигациялық құрылымын жасау.
2. Беттің дизайнын жасау.
3. Бетті толтыру үшін
Бағдарламау
Бұл кезеңнің мәні сайтты форматтауда.
Тестілеу
Сайт жасаудың негізгі кезеңдерінің бірі тестілеу. Тестілеу кезеңде
1. Сілтеменің жұмысы;
2. Мәтіндегі қателер;
3. Навигацияның тиімділіғі.
4. Пошта және басқа
5. Графикалық файлдардың ашылуы.
6. Әр түрлі браузерлерде
Жариялау
Тест аяқталғандан кейін Web-сайт серверде жарияланады және қайтадан
Жарнамалау
Web-қоғамдастығына жаңадан жарияланған сайт тұралы белгілі болу үшін
1. Web-cайт адресін әр
2. Web-сайтты әр түрлі
3. Web-cайтқа сілтемелерді басқа
4. Баннерлерді жарнама ретінде
Бақылау
Web-сайтта жариялап жарнамалаған сон оған қатысу деңгейі оның
Web-сайт беттерін ұйымдастырған кезде, төменгі схемаларды қолдануға болады.
Негізгі бөлім
І Бөлім. HTML тіліне кіріспе
HTML гипертекстік тілін 1989
Бұл оқу құралы жазушылардың басы артық
Бұл оқу құралының көмегімен Web- сайтты құрумен
Жаңа технологиялардың дамуы, оларды пайдалануын ескерсек
1.1. Бүкіләлемдік компьтерлік Интернет
World Wide Web (бүкіләлемдік
Интернет сөзі Бүкіләлемдік компьтерлік
Интернетке жұмыс жасау үшін
Бүкіләлемдік желі түйіндерінің біреуіне
IP адресті алу;
Интернет қызметінің қолдануға
Өз түйіндеріне қосуға мүмкіндік
Модемдер сыртқы және ішкі
Гиперсілтемені қолдану WWW
Интернеттің үш функциясы бар:
1.2. HTML –ге кіріспе. HTML
HTML гипертекстік тілін 1989
HTML тілінің атқаратын қызметі .
Web – парақтары экранда ықшам
HTML командалары.
HTML тілінің бастапқы
HTML тіліндегі әрбір тег бір арнаулы қызмет
Кейбір тегтер өз жазылу
Тех атрибуттары.
Көбінесе ашылу тегтерінің тигізетін
Түсініктемелер
Программалау тілдерінде түсінік
1.3.HTML құжатының құрылымы.
Құжаттың функциональдық бөлігі мен негізгі бөлігі .
HTML құжаты сол құжаттың негізгі мәтіні мен белгілі
HTML құжатының кез-келгені тегінен басталып соған
Осы екеуінің ортасында құжаттың тақырыптың бөлігі мен тұлғасы
Жазылатын мәтін құжат тұлғaсы деп аталатын
Мысалы: құжат тақырыбы
бұл мәтін экранға шығады
Құжаттың функционалдық бөліктерін анықтау.
1. HTML тілі құжаттардың ішкі тақырыптарының көлеміне қарай
2. Жаңа жолдан басталатын абзацтарды белгілеу үшін
3. Сөз арасында қойылған бірнеше бос орынның тек
Егер абзац жасап бос жол қалдырмай жаңа жолға
1.4 Қаріп (шрифт) стилдерін басқару. Логикалық стильдер.
Сырғымалы жолдарды ұйымдастыру.
HTML 4.0 нұсқасынан бастап кез-келген құжатты әдемілеп әшекейлеу
1. Әріптің мөлшерін, түсін және сызылымын таңдап алу
Мысалы:
Алдарыңызда
төртінші мөлшермен arial типімен аталған сары түсті
2. Осы параметрдің барлығын бүкіл құжат үшін бірден
бір ғана тег пайдаланылады. Бұл тегте
3. Тегтердің тағы бір арнайы тобы қаріптің сызылымын
және тегтері
және тегтері қаріптерді
және тегтері мәтіндердің астын сызады ,
Мысалы:
негізгі қаріп Arial kz типінде 5-ші мөлшермен жазылған.
қарайтылу
курсивті
астын сызу
белінен сызу
Мәтін фрагменттерін логикалық стильмен безендіру.
Логикалық стильдер , , тегтері сияқты сөздерді
… күшті акцент деген сөзден шыққан мәтін
… программа мәтінін көрсету үшін қолданатын стиль
… ағымның –мысал, үлгі деген сөзі, программа
… ағымның keyboard пернетақта қысқаша сөзі пернелерден енгізілген
… ағымының variable айнымалы сөзі программадағы айнымалы
Мысалы:
мысал
мәтін фрагментін белгілеп ерекшелеу тәсілдері
мәтінді төмендегідей түрде ерекшелеуге болады
қарайтылған қаріп
қисайтылған курсив
астын сызу
мәтінді қаріптеу арқылы логикалық стильде жазу
логикалық стилдер
акцент сөзі
күшті акцент
программа мәтіні
мысал
KBD-клавиатура
айнымалы сөзі
Сырғымалы жолдарды ұйымдастыру.
< Marquee>…. тегтері мәтіндерді үздіксіз жылжытып отыратын сырғымалы
Benaior-мәтіннің бір бағыты (scrool) немесе қос бағыттада (alternate)
Bgcolor - сырғымалы жолдың фондық түсін анықтайды.
Direction - жолдық сырғу бағытын анықтайды.
Оның мүмкін мәндері Left-солға , Right-оңға.
Height - сырғымалы жолдың биіктігін пиксель арқылы
Оны пайызбен көрсетуге болады.
Width -экрандағы сырғымалы жолдың енін көрсетеді. Оны да
Мысалы:
Мысал
=red>
мысал: сырғымалы жол
Marquee bgcolor = «blue» behavior= «Scrool Direction»
< Marquee >
Marquee bgcolor=« green» height=30 widh=90 %
Бұл екінші сырғымалы жол < /Marquee >
Marquee bgcolor=« green» «behavior= » «alternate» Direction=
Height=30> бұл үшінші сырғымалы жол
ІІ бөлім. HTML тілінің негізгі мүмкіндіктері.
2.1. HTML тілінде тізімдер жасау тегтері.
Тізімдердің HTML тіліне енгізілуінің басты себебі мәтіндік редактордың
Тізімнің бірінші жолы
Тізімнің екінші жолы
Тізімнің соңғы жолы
Номерленген тізімдер.
Номерленген тізімдер алдыңғы тізімдер сияқты құрылады, тек әрбір
Мысалы:
Алма
Бақыт
Назым
Номерленген тізімнің әрбір жолы реттелген тәртіп бойынша араб
туре атрибутының мүмкін мәндері.
Атрибут мәндері Номер таңбалары
Type='' 1''
Type='' i''
Type='' I''
Type='' a''
Type='' A''
1, 2, 3, 4.
i, i i, i i i
I, II, III, IV
a, b, c, d.
A, B, C, D.
Анықтау тізімдері: Анықтаулары бар тізімдер.
Жоғарыдағыға қарағанда өзгешелеу тәсілмен жасалады тегі
Мұнда тегі орнына термин тегі және
Мысалы:
HTML термині гипертексті белгілеу тілі, ол тілді
HTML құжаты
Аттары.HTM.болатын құжат түрі
Мұндағы тегтері тәрізді
Қабаттастырылған ішкі тізімдер.
Кез-келген тізім элементі басқа бір тізімнің ішінде орналасуы
Мысал
HTML тізімдерінің түрлері
номерленген тізімдер
номерленбеген тізімдер сол жақтан арнайы символдар белгіленеді.
Алпамыс
Ертарғын
Есет
номерленбеген тізімдер .
номерленген тізімдер .
Арай
Шапақ
Сәуле
Анықталған тізімдер.
Бұл тізімдер алдыңғы екеуінен өзгеше.
Тізімдердің ішкі элементі бірнеше абзацтан тұруы мүмкін.
2.2. HTML құжатында кестелерді
Кесте параметрлерін тағайындау
Кестелер html-дің беттеріне форматтаудың
1. HTML тілінде кестелер тегімен
тегтерінің арасында кестелердің атауларын анықтайтын тақырып тегтері қосарланып
Кестелердің атаулары тікелей кестелердің үстінде немесе
2. Кестелердің жолдарын анықтайтын және тегтері кездеседі.
Жабатын тегтерді кездестіруге болады. Себебі кестенің әр жолы
3. Кестенің әрбір жолы ұялардан тұрады.Ұяларды немесе
Мысал:
Таблица 1.
Меркурий 70 млн км
Венера 108 млн км
Күнге жақын планеталар
Меркурий
70 млн км
Венера
108 млн км
Таблица тақырыбы таблицаның жоғарғы
Мысал:
Күнге жақын планеталар
TABLE-тегінің BORDER-параметірі таблица шекараларының
Мысал:
TABLE тегінің CELLSPACING параметрі ұяшықтардың
Мысал: 1.
Күнге жақын планеталар
Меркурий
70 млн км
Венера
108 мле км
Мысалы: 2.
Күнге жақын планеталар
Бұл жолдар сурет шықпаған жағдайда , сол сурет
Олар: align='' bottom''- мәтін суреттердің төменгі
align='' lest''- мәтін суреттердің сол жағында.
align='' middle''- мәтін суреттердің ортасында.
align='' top''- мәтін суреттердің жоғарғы жағында.
align='' right''- мәтін суреттердің оң жағында.
2.5. Фреймдер.Фрейм құрылымы .
( Web-парақта бірнеше құжаттардың орналасуы).
HTML тілі броузер программасы терезелерін бірнеше бµлікке бµліп
1) Фреймдерді ќ±ру ‰шін HTML ерекше ќ±жаты пайдаланылады,
< FRAMESET> жєне < /FRAMESET> тегтерініњ арасында орналасќан
2) тегі, терезелерді бµлу єдістерін аныќтайтын, COLS=
Осы атрибуттардыњ мєндері терезе бµліктерініњ биіктігін (немесе енін)
3) жєне тегтерініњ арасында ќалыптастырылѓан бµліктердіњ
жєне тегтерініњ араларына орналастырылѓан элементтердіњ саны,
4) тегінде аталмыш бµлікке шаќырылатын ќ±жаттарды аныќтайтын
навигациялыќ панелі бар параќ
Мысал2.
Ќ±жаттыњ к‰рделі ќ±рылымы
2.6. HTML құжатында формаларды өңдеу.
Айырғыштар, флажоктар.
Форма-HTMLқұжатта сыртқы дүниенің алдын-ала анықталған бір нүктесіне ақпаратты
тегінің параметрлері:
Параметр Сипатталуы
ACTION Міндетті параметр. Бұл форманы өңдеушінің орнын анықтайды
METHOD Формадан мәліметтер өңдеушіге қандай түрде берілетіндігін анықтайды
POST -Форманың тақырыбы сипаттамасында көрсетілген URL формадағы
GET-бұл әдіс формадағы барлық ақпараттарды көрсетілген URL-ге қатынас
ENCTYPE Формадағы ақпараттар өңдеуге жіберілу үшін қандай
Қолданушы өзінің ақпаратын формаға енгізу үшін Input
text- текстік жолдарды енгізу жақтарын анықтайды, қосымша
< input type =”text” size=”20” name=”user” value
password-парольды енгізу өрісін анықтайды .
Пароль енгізу полесін беретін мысал .
radio-айырғыштар батырмасын анықтайды. Сhecked-қосымша параметрі белгіленген дегенді көрсетеді
Айырғыштарға мысал .
да
нет
возможно
checkbox –флажок өрісін анықтайды . checked параметрі флажок
Флажоктарға мысал.
процессорлар
New => Web...
Экранда ашылған сұхбат терезесінен ұсынылған үлгілердің тиістісін таңдап
2. Web-бетті көркемдеу.
Front Page программасында сіз қалауыңызша шрифтерді, олардың көлемін,
Web-беттің фонын көркемдеу.
Сіз қалауыңызша Web-бет фонына Front Page программасындағы
3. Web-бетке сурет орналастыру.
Web-бетке сурет орналастыру амалы дәл Word программасындағыдай
Пайдаланған суреттер түйін сақталған кезде автоматты түрде түйін
4.Гиперсілтеме. (Гиперссылка)
Гипермәтін дегеніміз тышқан батырмасымен шерткенде қолданушы броузерінде
Гиперсілтемені орнату үшін қажетті объектіні немесе
Front Page программасы гиперсілтемеден басқа закладка пайдалануыңызға болады.
Мәтіндегі қажетті сөзді белгілеп, Insert => Bookmark мәзірлерін
5.Кесте салу.
Кесте салу амалын орындау үшін:
Table => Insert => Table мәзірін пайдаланамыз.
6. Web-бетке анимация орнату.
Анимациялар сіз жасаған Web-беттерге қызығушылықты арттырып қана
Экранда анимацияның қолдану тәртібін бекітетін сұхбат терезесі
7.Жүгіртпе жол.
Жүгіртпе жол Marquee командасы арқылы орындалады.
Экранда ашылған сұхбат терезесінде жүгіртпе жолдағы мәтінді теріп
3.2. Дербес Web -сайтты
Функционалды және қызықты сайт құру үшін біздер «қайсыбір
HTML Writer –редакторы және графикалық Paint Shop Pro
Кез-келген HTML документтің құрылымын жасау және
Автор төмендегідей 4-категориалы материал түрлерімен жабдықталуы тиіс.
1. Суреттер (Фотография)
2. Сілтемелер
3. Мәтін
4. Библиография
Материалды орналастырмас бұрын сайттың « скилетін» құрып алу
Коммерциялық сайтты құру.
Егер сіз бизнесте қызмет жасайтын болсаңыз, сіздің
1. Товарды сату немесе қызмет көрсету.
2. Сауда маркаларының мойындағанын қалаймыз.
3. Тұтынушылардың қажеттігін өтеу мақсатында.
4. Инвестициаларды шақыру мақсатында.
Осы төрт мақсатты 1 арнаға тоғыстырғыңыз келсе,
3.3. Web – сайтты басқару.
Парақтарды WWW орналастыру.
Web – сайтты өңдеп аяқтағаннан кейін сіздің материалдарыңыз
Провайдер серверде сіздің парағыңызды орналастыру немесе жеке өзіңіздің
Өзіңіздің серверіңізді ұйымдастыру немесе интернет қызметін пайдалану ол
Web парағыңызды провайдер серверіне орналастыру.
Келесі тізбектегі іс - әрекеттерге көңіл аударыңыз.
Провайдер машинасының UNIX жүйесіне қарым-қатынасыңыз (доступ) болуы қажет.
Сіздің сайтыңыз орналасқан каталогқа қарым-қатынас беруде қамтамасыз ету.
Сайттың ішкі каталогтарын құру.
НТМL файлдарды орналастыру.
Сіздің сайтыңызға қатысты басқа файлдарды орналастыру.
Интернетке көрсетуге файлдарды дайындау. Ең алғашқы сіздің орналасқаныңыз
Провайдер компьютерлерімен Теlnеt клиентінің көмегімен желіге қосыңыз. Ары
Провайдер машинасының адресін енгізіңіз. Клиент желіге қосылуды жүзеге
Атыңызды және парольді енгізіңіз.
PWD - командасын енгізіңіз. Ол арқылы сіз қай
Жауап келесідей түрде болуы мүмкін: USER / Home
Егер сіз Telnet желіге қосылу қызметін бірінші рет
ls - (файлдарды) ағымдағы каталогтың ішкі каталогтарын және
Жасырын тұрғандарынан басқа (скрытый)
la немесе ls-а-ағымдағы каталогтың ішкі каталогтын файлдарын және
mk dir - каталог немесе ішкі каталогты
rt – (каталог) файлдарды жояды.
rm dir – каталогтарды жояды.
ЕСЕПТЕУІШ ТЕХНИКА КАБИНЕТІНДЕГІ ҚАУІПСІЗДІК ЕРЕЖЕСІ ЖӘНЕ ЕҢБЕК ҚОРҒАУ
Техникалық қауіпсіздік ережесі
Есептеуіш техника кабинетінде жұмыс жасау кезінде техника кауіпсіздігін
Аталған міндетті орындауда оқушы төмендегідей
1. Жалпы ережелерді;
2. Дербес компьютерде жұмыс жасау алдындағы;
3. Жұмыс жасау кезіндегі;
4. Аппаттық жағдайдағы;
5. Жұмыс соңындағы талаптар мен ережелерді білуге тиіс.
1. Жалпы техника қауіпсіздігінің ережелеріне қойылатын талаптар төмендегідей:
Компьютерді токқа қосатын сымдарға, қос тілді pозеткілерге, штеккерлерге
Мұғалімнің рұксатынсыз сыныптан шығуға және кіруге болмайды;
Дербес компьютерде суланған қолмен және дымқыл киіммен жұмыс
Дербес компьютердің жанына портфельдер, сумкалар, кітаптар қоюға тыйым
Пернелік тақта үстіне арттық заттар қоюға болмайды;
Компьютерлік сыныпта жүгіруге, ойнауға, жанындағы кұрбыларын алаңдатуга, бөгде
Оқушы компьютермен жұмыс жасау кезінде техника қауіпсіздігі талап-
2. Дербес компьютерде жұмыс жасау алдындағы қауіпсіздік ережесінің
Дербес компьютерді іске қосу кезінде оның сыртқы қорабының
жұмыс жасау кезінде сымдардың дұрыс жалғанғанына ерекше көңіл
Жұмыс орнына бекітілген тіркеу журналына керекті мағлұмматтарды енгізіп,
3. Оқушының дербес компьютермен жұмыс жасау техника қауіпсіздігінің
ЭЕМ-мен жұмыс жасау кезінде көздің экраннан 60-70 см
Кабинетке кірушілермен орнынан тұрмай амандасуға рұқсат етіледі;
Көзі шаршаған кезде орнынан, тұрмай-ақ, көз жаттығуын орындауға
Электр тогымен зақымданған алғашқы дәрігерлік көмек көрсету тәсілдерін,
Көз жаттығуларын білу міндетті.
4. Аппаттық жағдайдағы техника қауіпсіздігінің ережелеріне қойылатын талаптар:
Жұмыс жасап отырған кезде дербес компьютерден ақау табылса,
От сөндіруде көмек көрсету қажет;
Электр тогының зақымданған адамды алғашкы көмек көрсетуді білуі
Компьютерлік кабинетте өртті сумен сөндіруге болмайтындығын білуі қажет.
Электр тогының әсерімен зақымданған адамды су қолмен ұстауға
5. Дербес компьютермен жұмысты аяқтаған кездегі техника қауіпсіздігінің
Оқытушының нұсқауы бойынша аппаратты өшіру;
Жұмыс орнын ретке келтіру;
Жұмыс орнындагы тіркеу журналына белгі қою.
Электр тогымен зақымданған жағдайда алғашқы дәрігерлік көмек көрсету
Оқушы компьютермен жұмыс жасау барысында электр тогымен
1. Токты өшіpy ;
2. Зақымданушыны ток әсерінен (сымнан) босату;
3. Дәpiгep шақыру;
4. Зақымданушыны қарап шыгып, оған алған жарақатына байланысты
1. Күйген жағдайда:
Ауырғанды сездірмейтін дәрілер (анальгин, валерьян, жане т. б.)
Күйген жерге арнайы май жағу;
Зақымданған жерге суық су құю;
Алдын-ала жараланған жерді, микробтар түспес үпін мөлдір жұқа
2. Есінен танып қалған жағдайда
Зақымданушыны жауырынымен тегіс жерге жатқызып, басын бір жағына
3. Тыныс алысы тотаган жағдайда:
Ауызды ашып тілдің орналасу жағдайын тексеру керек, егер
Демалыс жағдайына келгенге дейін, қолдан дем алдыру (ауызбен
Шаршаған жағдайда қолданылатын жаттығулар
Оқушыны компьютермен жұмыс жасай отырып, шаршаған жағдайда келтірілген
Шаршаған кездегі көздің қарау бағытын өзгерту (ауыстыру):
Алысқа-жақынға, оңға-солға, жоғары-төмен қарау;
Сағат тілінің бағытымен және керісінше көзді айналдыра қозғалыс
Көзді қолмен жауып 1 - 1,5 минут отыру.
Басты бұру жаттыѓуларын жасау:
Басты сағат тілі және керісінше бұрып айналдыру;
Басты жан-жаққа бұру.
3. Саусақтарды жұмып-ашу және қолдың білезігін босаңсыту.
4. Денені босаңсыту және оны керіліп ширықтыру
Қорытынды
Информатика пәнінің орта білім беру жүйесіндегі ролі ақпараттық
Бүгінгі таңда компьютерлік дизайн, Web-дизайн, жүйелік программалушы, администратор
Мектеп бітірушілер компьютерлік сауатылықты меңгеріп шығады, бірақ келешекте
Интеренетте материалды жариялау тиімді болу үшін ол Web-дизайн
Бұл жұмыс өзінің сайтын дайындауды үйренем деушілерге арналған.
Жұмыс екі бөлімнен тұрады, біріншісі теориялық: мәтінді форматтау,
Қазіргі замандағы Интернет-технологиялар Web-сайт бұл дүниенін кішкентай моделі.
Қолданылған әдебиеттері:
М. Браун, Д. Наникат. НТМГ- С.П. « ВНГ-
М. Дмитриева, JavaScript-СПБ: БХВ- Петербург, 2002.
Wев-дизайн. С.В. Лебедев. Издательский дом «
2004 Москва.
Информатика гуминитарлық мамандық студенттері үшін оқу- әдістемелік кешені.
А.П. Сергеев « НТМГ и ХМГ». Профессиональная
« Информатика негіздері » журналы. 2002ж.
В.Дригалкин . « HTML в примерах ».
39
Сызықтық емес
Иерархия
Сызықтық схема
Араласқан