HTML таблицалар

Бекмурзаева Гулнара Альмахановна
Бекмурзаева Гулнара Альмахановна
Актюбинский
Шубаркудук
Шубаркудукская СШ №3
Ақпараттық-коммуникациялық технологиялар/Информатика
Сынып:
10-сынып
Бөлім:
Веб-жобалау(
Тақырып:

HTML таблицалар

04.02.2020
192
PDF жүктеу WORD жүктеу
Оқу мақсаттары (оқу бағдарламасына сілтемеу): 10.4.2.1 -web-прақшаларды әзірлеуде HTML тегтерін қолдану
Сабақтың мақсаты: HTML тілі және тегтері туралы түсінік беру
Тілдік мақсаттар: Web жобалау, web-бет, , web-сайт, тег, HTML тілі, HTTP, WWW
Бағалау критерийлері: - HTML тілі туралы біледі - HTML тегтері туралы біледі  
Құндылықтарды дарыту: - құрметтеу: бір-бірін тыңдай білу қабілеті. 
АКТ-ны қолдану дағдылары: - бағдарламалау тілін қолдану;
Пәнаралық байланыс: Ағылшын тілі
Бастапқы білім: Оқушылар бағдарламалау туралы біледі

Сабақ барысы

Сабақ кезеңдері Жоспарланған іс-әрекет Ресурстар

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

(5 мин)

<p>1. 1. Ұйымдастыру кезеңі. Оқушылармен сәлемдесу 2. Өз ойыңызбен бөлісіңіз </p><p>  Қандай программалау тілдерін білесіңдер? </p><p>  HTML-дің өздеріңе таныс басқа программалау тілдерінен қандай ерекшеліктерін байқадың? </p><p> 3. Сабақтың тақырыбын, оқытудың мақсаты мен жетістік критерийлерін жариялау.&nbsp;&nbsp;</p> Презентация

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

(30 мин)

1. Жаңа материалды меңгерту HTML кестенің стилін өзгертетін атрибуттар тізімі Атрибуттар Үнсіздік бойынша Қолданылуы Мағынасы align left Кестенің барлық дескрипторларына қолданылады Ұяшық ішіндегі мәліметті көлденең туралау. Мүмкін мәндері: Left, right, centerжәне char (арнаулы символ бойынша туралау) bdcolor Кестенің барлық дескрипторларына қолданылады Кесте фонының түсін білдіреді border &lt;table&gt; Пиксел бойынша кесте шекарасы cellpadding &lt;td&gt;, &lt;th&gt; Ұяшықтағы мән мен шекара арасындағы ара қашықтық Cellspace &lt;td&gt;, &lt;th&gt; Пиксел бойынша ұяшықтар ара қашықтығы colspan &lt;td&gt;, &lt;th&gt; Бір бағанға біріктірілетін бағандар саны rowspan &lt;td&gt;, &lt;th&gt; Бір қатарға біріктірілетін қатарлар саны rules none &lt;table&gt; Кесте ұяшықтары арасындағы сызықтар. Мүмкін мәндері: rows, cols және all valign center &lt;tr&gt;, &lt;td&gt;, &lt;th&gt; Ұяшық ішіндегі мәнді тік бағытта туралау. Мүмкін мәндері: top, bottom және baseline width Бет ені бойынша Кестенің барлық дескрипторларына қолданылады Анықталған ұяшықтар немесе кесте ені (бет еніне байланысты пикселмен немесе пайызбен беріледі) Осы атрибуттарды қолдана отырып өзгертетін болсақ төмендегі суреттегідей өзгерістер орындалады 2.Бекіту тапсырмалары: 1-тапсырма. ЖҰПТЫҚ ЖҰМЫС HTML кодын енгізіп, нәтижесін алыңдар &lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&gt;Сабақ кестесі&lt;/TITLE&gt; &lt;/HEAD&gt; &lt;BODY BGCOLOR=”#FFFFFF”&gt; &lt;P ALIGN=CENTER&gt; &lt;B&gt;Сабақ кестесі &lt;/B&gt; &lt;/P&gt; &lt;BR&gt; &lt;TABLE BORDER=”1” WIDTH=100% BGCOLOR=”#99 CCCC”&gt; &lt;TR BGCOLOR =”#CCCCFF” ALIGN=CENTER&gt; &lt;TD&gt;Уақыты&lt;/TD&gt; &lt;TD&gt;7а класс&lt;/TD&gt; &lt;TD&gt;7б&lt;/TD&gt; &lt;TD&gt;7в&lt;/TD&gt; &lt;/TR&gt; &lt;TR&gt; &lt;TD&gt;8-30 – 9-50&lt;/TD&gt; &lt;TD&gt; Орыс тілі &lt;/TD&gt; &lt;TD&gt; Информатика &lt;/TD&gt; &lt;TD&gt; Тарих &lt;/TD&gt; &lt;/TR&gt; &lt;TR&gt; &lt;TD&gt;10-00 – 11-20&lt;/TD&gt; &lt;TD&gt; Математика &lt;/TD&gt; &lt;TD&gt;Геодезия &lt;/TD&gt; &lt;TD&gt; Ағылшын тілі &lt;/TD&gt; &lt;TR&gt; &lt;TD&gt;11-30 - 12-30 &lt;/TD&gt; &lt;TD&gt; Тарих &lt;/TD&gt; &lt;TD&gt; Сызба геометрия &lt;/TD&gt; &lt;TD&gt; Компьютерлік графика &lt;/TD&gt;&lt;TR&gt; &lt;/TABLE&gt; &lt;/BODY&gt; &lt;/ HTML &gt; Дискриптор: - HTML тілі туралы біледі ҚБ: мұғалім марапаты 2-тапсырма. ЖҰПТЫҚ ЖҰМЫС. HTML кодын енгізіп, нәтижесін алыңдар Web – парақтың алдыңғы жағына жазылатын апта күндерінің аттары жазылған кестелермен толықтырайық. Ол үшін: &lt;B&gt; ФНИ - 1 топтарының сабақ кестесі &lt;/B&gt; &lt;/P&gt; &lt;BR&gt; жолдарынан кейін мынадай тәгтер тізбегін жазайық: &lt;TABLE WIDTH=100%&gt; &lt;TR&gt; &lt;TD&gt; Дүйсенбі &lt;/TD&gt; &lt;TD&gt; Сейсенбі &lt;/TD&gt; &lt;TD&gt; Сәрсенбі &lt;/TD&gt; &lt;TD&gt;Бейсенбі &lt;/TD&gt; &lt;TD&gt; Жұма &lt;/TD&gt; &lt;TD&gt; Сенбі &lt;/TD&gt; &lt;/TR&gt;&lt;/TABLE&gt; &lt;BR&gt; Бұл фрагменттен кейін (RASP.HTM файлында) Дүйсенбі сөзіне сілтеймін белгі қоямыз, яғни &lt;B&gt; Дүйсенбі &lt;/B&gt; сөздері орнына: … &lt;B&gt; &lt;A NAME=”ДС”&gt; Дүйсенбі &lt;/A&gt; &lt;/B&gt; … сөздерін жазу керек. Енді кесте ішіндегі Дүйсенбі сөзіне гиперсілтеме жасаймыз, яғни &lt;TABLE WIDTH=100%&gt; &lt;TR&gt; &lt;TD&gt; Дүйсенбі &lt;/TD&gt; &lt;TD&gt; Сейсенбі &lt;/TD&gt; &lt;TD&gt; Сәрсенбі &lt;/TD&gt; &lt;TD&gt; … сөздері орына: &lt;TABLE WIDTH=100%&gt; &lt;TR&gt; &lt;TD&gt; &lt;A HREF=”#ДС”&gt; Дүйсенбі &lt;/A&gt; &lt;/TD&gt; &lt;TR&gt; &lt;TD&gt; &lt;A HREF=”#CС”&gt; Сейсенбі &lt;/A&gt; &lt;/TD&gt; &lt;TR&gt; &lt;TD&gt; &lt;A HREF=”#CP”&gt; Сәрсенбі &lt;/A&gt; &lt;/TD&gt; сөздерін жазамыз. Дискриптор: - HTML тегтері туралы біледі - HTML құжатының құрылымын біледі ҚБ: мұғалім марапаты&nbsp;&nbsp; Презентация

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

(2 мин)

Үйге тапсырма. ТАҚЫРЫПТЫ ОҚУ&nbsp; кестелер

Рефлексия

(3 мин)

Рефлексия: 551&nbsp;&nbsp; смайлик

Файлдар:

Файлды ару Таблицалар

Пікірлер(0)