HTML құжаттарын құру және өңдеу ашық сабағы, 11-сынып

№1 Сабақ жоспары

Пәні: Желілік технология Оқытушы: Боранбаева Гүлжан Үсенбекқызы Тобы П4Б Сабақтың өтілу күні

06.01.2014 жыл

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

Html тілінде құжаттарды құру және редакциялау

Сабақтың мақсаты: 1. Білімділік Html тілінде құжаттарды құру және редакциялау ұғымын меңгерту. Html тегтерімен таныстыру. 2. Дамытушылық Оқушылардың пәнге деген қызығушылықтарын арттыру. Әр оқушыға өз қабілетін ашуға ұмтылдыру. 3. Тәрбиелік Оқушыларды ұқыптылыққа, жылдам жұмыс жасауға, алған теориялық білімдерін іс жүзінде қолдана білуге, ақпараттық мәдениетке тәрбиелеу Сабақтың түрі: Тәжірибелік Сабақтың типі: Аралас Оқыту технологиясы:

Дамыта оқыту технологиясы

Оқыту әдістері: Интерактивті технология, дамыта оқыту, сұрақ- жауап Сабақтың көрнекілігі:

Дидактикалық көрнекіліктер, интерактивті тақта, презентациялар, компьютер, жеке тапсырмалар Пәнаралық байланыс:

Информатика, Автоматтандырылған жүйенің ақпаратпен қамтамасыз етуін құру және жүргізу Пайдаланылған әдебиеттер:

Дубаков М. Создание Web-страниц: искусство верстки./М. Денисов А, Вихарев И., Белов А. Интернет . Самоучитель. –СПб.: питер, 2001.-464с. Дубаков.Мн.: Новое знание. 2004.-287с

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

1. Ұйымдастыру кезеңі

3минут

Топпен сәлемдесу, түгендеу. Оқушылардың назарын сабаққа аудару 2. Жаңа тақырып ................................................................ .........................

15 минут Web парақтар HTML (Hуper Text Markup Language) тілінде жазылады. Бұл интернетте жарияланатын Web парақтар құжатының белгілеу (разметкалау) тілі. Web парақтар интернетте НТТР серверлерінде орналасады. HTML тілі World Wide Web қызметінің негізі болып есептеледі және осы қызметтің әйгілі болуына себеп болды. Гипермәтін дегеніміз — арнайы кодтар енгізілген мәтін. Бұл кодтар форматтау, мультимедиа, басқа құжаттарға гиперсілтеме жасау, қосымша элементтерді басқарды. Разметкалау дегеніміз — мәтінде осы кодтарды енгізіп, бұл құжаттың Browser-мен көрсетілуі. HTML тілінің мәтін

Ү.30 СМЖ АМПК КСТ 11 1 Басылым

фрагменттерінің не үшін керек екенін анықтауға пайдаланылады. Мысалы, мәтінде тақырып кездессе, HTML коды бұл фрагмент тақырып екенін көрсетеді. Мәтінді разметкалауға пайдаланатын кодтар HTML тілінде тег деп атайды. Тег дегеніміз — символдар жиыны. Тегтердің бәрі кіші символынан басталып, үлкен символынан аяқталады. HTML тілінде әр тегтің өзінің мәні бар. Жұп тегтер ашылатын және жабылатын тегтер болады. Жабылатын тегтер / символынан басталады. Кейбір тегтер тек қана ашылатын болады. Құжаттар броузерден көрсетілгенде, тегтер көрсетілмейді, бірақ құжаттың көрсету әдісіне әсер етеді. Коментарий (түсініктеме) HTML тілінде коментарий пайдалануға мүмкіндік бар. HTML тілінде арнайы тегтен басталады. Ол мынандай < / – –. Осы тегтен кейін жазылған мәтін коментарий болып есептеледі және браузермен экранда көрсетілмейді. Коментарий мынандай символмен аяқталады: – – –>. HTML құжатының структурасы HTML құжаты құжаттың негізгі мәтінімен разметка жасау тегтерінен тұрады:

1. HTML құжаты <HTML> басталып, </HTML> аяқталады. Бұл жұп

тегтер браузерге алдындағы құжат HTML құжаты екенін көрсетеді. HTML құжаты тақырып бөлімінен және құжаттың денесінен тұрады, тақырып бөлімі <HEAD> және </HEAD> тегтер арасында орналасады. Құжат туралы информация береді. Бұл бөлім ішінде жұп тегтер пайдаланылады: <TITLE> және </TITLE>. Бұл тегтердің арасында құжаттың тақырыбы жатады. 3. Құжаттың мәтінді құжаттың денесінде орналасады. Құжаттың денесі <BODY> және </BODY> тегтерінің арасында орналасады. <BODY> тегі браузерде көрсетілетін информацияны анықтайды. <HTML> <HEAD> <TITLE> тақырып бөлімі </TITLE> </HEAD> <BODY> экранда көрсетілген информация </BODY> </HTML> Құжаттың функционалды бөлімдері Құжаттың негізгі функционалды бөлімі болып, тақырыптар және абзацтар болып есептеледі. 1. HTML тілінде құжаттың тақырыбының 6 деңгейі анықталады. Олар: <Н1> және </Н1> –ден <Н6> және </Н6> –тегтерімен белгіленеді. Экранда бұл тегтер әр түрлі мөлшерлі шрифт болып көрсетіледі. <Н1> — үлкен қалың шрифт <Н2> — шегініссіз үлкен қалың шрифт <Н3> — шегіністі кішкентай қиғаш үлкен шрифт <Н4> — шегіністі <Н3> –тен үлкен қалың кәдімгі шрифт <Н5> — шегіністі <Н4> –дей қиғаш кәдімгі шрифт <Н6> — шегіністі кәдімгі мәтіндегідей қалың шрифт 2. HTML тілінде

Ү. 31 СМЖ АМПК КСТ 05 1 Басылым

жоқ. 4. Тегтерді пайдаланғанда сөз арасындағы пробелдер және жаңа қатарға өту HTML құжаты көрсетілгенде шықпайды. 5. Егер абзац құрмай жаңа қатарға өту керек болса, <BR> тегі пайдаланады. Бұл тегтің жабылатыны жоқ. <HTML> <HEAD> <TITLE> Құжаттың функционалдық бөлігі </TITLE> </HEAD> <BODY> <H1> негізгі тақырып </H1> <H2> ішкі тақырып </H2> <P> бұл қатарлар бірге жазылады <P> HTML құжаты </P> <HR> текст <BR> екіге бөлінеді </BODY> </HTML>

Тақырыптар: <h1>1-ші деңгейдегі тақырып (құжат) </h1> <h2>2-ші деңгейдегі тақырып (бөлім) </h2> <h3>3-ші деңгейдегі тақырып (ішкі бөлім)</h3> <h4>4-ші деңгейдегі тақырып (тақырып) </h4> <h5>5-ші деңгейдегі тақырып (пункт) </h5> <h6>6-шы деңгейдегі тақырып (ішкі пункт)</h6> Аlign түзету аттрибутын қолдайды: <h1 align="...">мәтін</h1> align=left - сол жақ шеті бойынша (үнсіз) align=right - сол жақ шеті бойынша align=center - ортасы бойынша Мәтін абзацы: <p> Ұзақ мәтін. Егер сыймаса, автоауысу орындалады... </p> <p> Ал бұл келесі абзац. Алғашқыдан бос жол арқылы бөлінеді. </p> Аlign түзету аттрибутын қолдайды: <p align="...">мәтін</p> align=left - сол жақ шеті бойынша (үнсіз) align=right - оң жақ шеті бойынша align=center - ортасы бойынша align=justify – екі шеті бойынша (қолданған жөн) мәтінді бөлуге арналған тегтер: <br> - жаңа жолға көшу <nobr>бірнеше сөз</nobr> - сөз тіркестерін бөлмеу (тұтас көшеді) <wbr> - қай жерді бөлуге болатынын көрсетеді Безендіру тегтері:

<b> фрагмент 1 </b> - қалың қаріп <i> фрагмент 2 </i> - курсивті <u> фрагмент 3 </u> - асты сызылған <s> фрагмент 4 </s> - сызып тасталған <strike> фрагмент 5 </strike> - сызып тасталған _{фрагмент 6} - төменгі индекс ^{фрагмент 7} - жоғарғы индекс <big> фрагмент 8 </big> - үлкен қаріп <small> фрагмент 9 </small> - кіші қаріп <font color="" size="" face=""> ... </font>

Ү. 31 СМЖ АМПК КСТ 05 1 Басылым

color - мәтін түсі (#RRGGBB немесе сөзбен) size - мәтін өлшемі (1,2,3,4,5,6,7) face - мәтін қаріптері ("Arial","Times New Romans", ...) қатар қолдануға болады:

<b><i><u>мәтін</u></i></b> - қалың, курсивті, асты сызылған <big><big>мәтін</big></big> - екі есе үлкен өлшемді <FONT SIZE=X></FONT> X Ө- [1.7] –шрифт өлшемін береді. <B ASEFONT SIZE=X> - қаріп размерін үндеместен береді. <FONT COLOR=»Color»></FONT>- мәтін түсін береді. <FONT FACE=»FONT NAME»></FONT>- қаріп береді. <BLINK></BLINK>- мәтіннің жарқырауы. <CODE></CODE>- бағдарлама мәтінінің бейнеленуі. <BIG></BIG>- мәтін одан әрі үлкенірек болады. <SMALL></SMALL>- мәтін одан әрі кішірек болады. Тізімдер: <UL><LI></UL>- реттелмеген (<LI> әр элемент алдында). <UL COMPACT></UL>- жинақы. <ОL><LI></ОL>- номерленген (<LI> әр элемент алдында). <ОL COMPACT></ОL>- жинақы. Көлденең сызық: <HR> - үндеместен орнатылуы бар көлденең сызық. <HR ALIGN=[CENTER], [LEFT], [RIGHT]> - түзулерді түзету. <HR SIZE=X> - түзу размері. <HR NOSHADE> - жазық сызықтың бейнеленуі. <HR WIDTH=X>- сызық ұзындығы. Кестелер <TABLE></TABLE>- кестені анықтау. <Table border=?></TABLE> - кестені түзету <CAPTION> <CAPTION> - кестеге тақырып беру <CAPTION ALIGN=TOP/BOTTOM> - түзету (үстінен/ астынан) <TABLE CELLSPACING=?> - ұяшықтар арасындағы ара қашықтық <TABLE CELLPADDING=?> - ұяшықтарды толтыру <TABLE WIDTH=?> - керекті ен

Ү. 31 СМЖ АМПК КСТ 05 1 Басылым

<BODY TEXT=“#9ACD32”> мәтін түсі – сары – жасыл. Сілтемелер <A HREF=URL></A> - сілтеме <BODY BACKGROUND= URL> - фондық түстер. <IMG SCR= URL> - бейнелер бейнелер ALIGN=[TOP],[BOTTOM],[LEFT],[RIGHT],[MIDDLE] –бейнелердің орналасуы, ALT=X –кірістірілетін мәтін, WIDTH=X – ұзындығы, HEIGHT=X – биіктігі. Шектеулер <FRAMESET></FRAMESET> - шектеулер жиынтығын құрады. Параметрлер: ROWS=X – фреймдер биіктігі беріледі COLS=X – фреймдер ені беріледі BORDER=X – шектеулер размері FRAMEBORDER=BOOL – фреймдер айналасында шектеулердің болуы немесе болмауы <FRAME> - фрейм Параметрлер: NAME=Имя – фрейм аты SRC=URL – парақ адресі MARGINWIDTH=X - өріс ұзындығы MARGINHEIGHT=X - өріс ені SCROLLING=BOOL – айналым сызығы NORESIZE – фрейм размерін өзгертуге тиым салынады <NOFRAMES></NOFRAMES> - браузерлерге арналған командалар ауданы, Объектілер <OBJECT></OBJECT> - объектілер береді Параметрлер: CODEB ASE = URL – объект файылының адресі ID=X ID – объект PARAM NAME = Value – объект қасиетінің мәні ALIGN= түзету – бетті түзетуді анықтайды WIDTH= ені HEIGHT= биіктігі Формалар <FORM ACTION=URL METHOD=[GET],[POST]></FORM> - форманы құрады және мәліметтерді қайда, қандай әдіспен жіберуді анықтайды <INPUT TYPE=Ty

Сіздер қолданатын стандартты түстер: 1. Black (қара) #000000

Ү. 31 СМЖ АМПК КСТ 05 1 Басылым