СДЕЛАЙТЕ СВОИ УРОКИ ЕЩЁ ЭФФЕКТИВНЕЕ, А ЖИЗНЬ СВОБОДНЕЕ

Благодаря готовым учебным материалам для работы в классе и дистанционно

Скидки до 50 % на комплекты
только до 20.07.2025

Готовые ключевые этапы урока всегда будут у вас под рукой

Организационный момент

Проверка знаний

Объяснение материала

Закрепление изученного

Итоги урока

HTML кесте құру

Категория: Прочее

Нажмите, чтобы узнать подробности

Просмотр содержимого документа
«HTML кесте құру»

HTML тілінде кесте құру Пән: “WEB-бағдарламалау және  Интернет технологиялары” КМ 06. Web технологияны қолдана отырып, web парақшаны құру Тақырып 1. Сайтқа стильдік кестелерді енгізу тәсілдерін, CSS қасиеттерімен жұмыс істеуде CSS-дің негізгі блоктары мен қосалқы сервистерді қолданады.

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

Пән: “WEB-бағдарламалау

және

Интернет технологиялары”

КМ 06. Web технологияны қолдана отырып, web парақшаны құру

Тақырып 1. Сайтқа стильдік кестелерді енгізу тәсілдерін, CSS қасиеттерімен жұмыс істеуде CSS-дің негізгі блоктары мен қосалқы сервистерді қолданады.

 Web-құжатының негiзгi бөлiктерiнiң бiрi - кесте. Ол тiктөртбұрыш бағаналар мен көлденең орналасқан жолдардан тұратын торлар жиыны түрiнде қарастырылады. Жол мен бағанның қиылысы ұяшық деп аталады. Бiр ұяшықта мәтiн, сурет немесе басқа бiр шағын кесте орналаса алады.  Кесте келесi бөлiктерден тұрады: • кесте тақырыбы; • бағаналар тақырыптары; • ұяшықтар.  Кесте жолдар тiзбегi бойынша бiртiндеп толтырылады (солдан оңға қарай жол соңына дейiн, сонан соң келесi жолға көшу). Әрбiр ұяшыққа мәлiметтер енгiзiледi.Ұяшықтың ішінде мәтінмен қатар, сурет, шағын кесте де болуы мүмкін.

Web-құжатының негiзгi бөлiктерiнiң бiрi - кесте. Ол тiктөртбұрыш бағаналар мен көлденең орналасқан жолдардан тұратын торлар жиыны түрiнде қарастырылады. Жол мен бағанның қиылысы ұяшық деп аталады. Бiр ұяшықта мәтiн, сурет немесе басқа бiр шағын кесте орналаса алады.

Кесте келесi бөлiктерден тұрады:

• кесте тақырыбы;

• бағаналар тақырыптары;

• ұяшықтар.

Кесте жолдар тiзбегi бойынша бiртiндеп толтырылады (солдан оңға қарай жол соңына дейiн, сонан соң келесi жолға көшу). Әрбiр ұяшыққа мәлiметтер енгiзiледi.Ұяшықтың ішінде мәтінмен қатар, сурет, шағын кесте де болуы мүмкін.

HTML тілінің кестелермен жұмыс істейтін тэгтерін қарастырайық. Оларға төмендегі тэгтер жатады: 1) HTML де кесте құру ,  - дескрипторларының көмегімен орындалады. Кесте ішіндегі мәлімет арнаулы тегтер көмегімен белгіленеді (тақырыбы, қатар және ұяшықтар саны). ,  – кестенің тақырыбын білдіретін тегтер кездесуі мүмкін; Тақырып тек қана мәтіннен тұрады. Тэгтің align атрибутының top мәні (үндеместен қолданылады) тақырыптың кесте басында, ал bottom мәні соңында болуын анықтайды. 2 ),  (table data) - қатардағы ұяшық мәндерін анықтайтын дескриптор; 3 ),  (table head) - кестедегі баған мен қатар тақырыптарын анықтайтын дескриптор; 4 ),  (table row) - кестенің қатар санын анықтайтын дескриптор (  -бірнеше ұяшықты) , ( -кестенің тақырыбын білдіреді).

HTML тілінің кестелермен жұмыс істейтін тэгтерін қарастырайық.

Оларға төмендегі тэгтер жатады:

1) HTML де кесте құру

,
- дескрипторларының көмегімен орындалады. Кесте ішіндегі мәлімет арнаулы тегтер көмегімен белгіленеді (тақырыбы, қатар және ұяшықтар саны).

, – кестенің тақырыбын білдіретін тегтер кездесуі мүмкін; Тақырып тек қана мәтіннен тұрады. Тэгтің align атрибутының top мәні (үндеместен қолданылады) тақырыптың кесте басында, ал bottom мәні соңында болуын анықтайды.

2 ), (table data) - қатардағы ұяшық мәндерін анықтайтын дескриптор;

3 ), (table head) - кестедегі баған мен қатар тақырыптарын анықтайтын дескриптор;

4 ), (table row) - кестенің қатар санын анықтайтын дескриптор ( -бірнеше ұяшықты) , ( -кестенің тақырыбын білдіреді).

HTML-кестесінің стилін өзгертетін атрибуттар тізімі: Атрибуттар Үнсіздік бойынша align Қолданылуы bdcolor left Мағынасы border   Кестенің барлық дескрипторларына қолданылады Ұяшық ішіндегі мәліметті көлденең туралау. Мүмкін мәндері: Left, right, center және char (арнаулы символ бойынша туралау) 0 cellpadding Кестенің барлық дескрипторларына қолданылады Cellspace Кесте фонының түсін білдіреді  0 colspan 0 ,  Пиксел бойынша кесте шекарасы Ұяшықтағы мән мен шекара арасындағы ара қашықтық rowspan ,  1 1 rules ,  Пиксел бойынша ұяшықтар ара қашықтығы Бір бағанға біріктірілетін бағандар саны ,  none valign Бір қатарға біріктірілетін қатарлар саны  center width Кесте ұяшықтары арасындағы сызықтар. Мүмкін мәндері: rows, cols және all , ,  Бет ені бойынша Ұяшық ішіндегі мәнді тік бағытта туралау. Мүмкін мәндері: top, bottom және baseline Кестенің барлық дескрипторларына қолданылады Анықталған ұяшықтар немесе кесте ені (бет еніне байланысты пикселмен немесе пайызбен беріледі)

HTML-кестесінің стилін өзгертетін атрибуттар тізімі:

Атрибуттар

Үнсіздік бойынша

align

Қолданылуы

bdcolor

left

Мағынасы

border

 

Кестенің барлық дескрипторларына қолданылады

Ұяшық ішіндегі мәліметті көлденең туралау. Мүмкін мәндері: Left, right, center және char (арнаулы символ бойынша туралау)

0

cellpadding

Кестенің барлық дескрипторларына қолданылады

Cellspace

Кесте фонының түсін білдіреді

0

colspan

0

,

Пиксел бойынша кесте шекарасы

Ұяшықтағы мән мен шекара арасындағы ара қашықтық

rowspan

,

1

1

rules

,

Пиксел бойынша ұяшықтар ара қашықтығы

Бір бағанға біріктірілетін бағандар саны

,

none

valign

Бір қатарға біріктірілетін қатарлар саны

center

width

Кесте ұяшықтары арасындағы сызықтар. Мүмкін мәндері: rows, cols және all

, , (table row) - кестенің қатар саны

(table data) - қатардағы ұяшық мәндері

border  = “n” атрибуты кесте қоршауы мен жақтауларының енін пикселмен береді

background=” red ”  атрибуты    - барлық кестенің 1 қатарынын түсі

Нәтижесі

Нәтижесі


Скачать

Рекомендуем курсы ПК и ППК для учителей

Вебинар для учителей

Свидетельство об участии БЕСПЛАТНО!

,

Бет ені бойынша

Ұяшық ішіндегі мәнді тік бағытта туралау. Мүмкін мәндері: top, bottom және baseline

Кестенің барлық дескрипторларына қолданылады

Анықталған ұяшықтар немесе кесте ені (бет еніне байланысты пикселмен немесе пайызбен беріледі)

Тапсырма №1 Бұл тапсырма, мысал ретінде көрсетілген, 3 бағаннан 3 жолдан тұратын кесте құрастыру Жоғарыда көрсетілген тэгтардың қөмегімен осы кесте жасалды. кесте құру , ,  (table row) - кестенің қатар саны ,  (table data) - қатардағы ұяшық мәндері border  = “n” атрибуты кесте қоршауы мен жақтауларының енін пикселмен береді background=” red ”  атрибуты    - барлық кестенің 1 қатарынын түсі

Тапсырма №1

Бұл тапсырма, мысал ретінде

көрсетілген, 3 бағаннан 3 жолдан

тұратын кесте құрастыру

Жоғарыда көрсетілген тэгтардың

қөмегімен осы кесте жасалды.

кесте құру

,

,