10 сыныптардың сабақ кестесі



бет2/2
Дата06.01.2022
өлшемі51,62 Kb.
#16631
1   2
Байланысты:
HTML 5 тілінде кесте құру тегтері. Кесте жолдарын және бағандарын біріктіру жұмыстары








қатар 1 ячейка1 қатар 1 ячейка2
қатар 2 ячейка 1 қатар 2 ячейка 2

Браузерде:



қатар 1 ячейка1

қатар 1 ячейка2

қатар 2 ячейка 1

қатар 2 ячейка 2







Бұл жерде





, < tr> тегтері қолданылды, ал ячейкалар үшін
тегі қолданылды

Ячейкаларды біріктіру

Ол үшін мына атрибуттер қолданылады.

COLSPAN – бағандар санын анықтайды. Әдепкі мәні 1.

ROWSPAN – қатар санын анықтайды. Әдепкі мәні 1.



Мысал 1:








қатар 1 ячейка 1+2
қатар 2 ячейка 1 қатар 2 ячейка 2

Получим в браузере:



қатар 1 ячейка 1+2

қатар 2 ячейка 1

қатар 2 ячейка 2

Пример 2:









Ячейка 1, ряд 1+2 қатар 1 ячейка2
қатар 2 ячейка 2

браузерде:



Ячейка 1, қатар 1+2

қатар 1 ячейка2

қатар 2 ячейка 2

Мұнда күрделе ештеңе жоқ.

Тағы пайдалы атрибуттер:

CELLPADDING – html кестесі әрбір ячейка рамкасы мен ондағы материалдың арасындағы қашықтықты пикселмен берілген анықтайды.

CELLSPACING – html кестесінің көршілес ячейкаларының шекараларының арасындағы қашықтықты анықтайды.

WIDTH – html кестесінің енін анықтайды. Ені не пикселмен, не процентпен, браузер терезесінің еніне қатысты беріледі. Әдепкіде бұл атрибут кестедегі материалдың көлеміне қатысты автоматты анықталады.

HEIGHT – кестенің биіктігін анықтайды. Биіктің браузер терезесінің биіктігіне қатысты не пикселмен, не процентпен беріледі. Әдепкіде бұл атрибут кестедегі материалдың көлеміне қатысты автоматты анықталады.

Мысал 1:






> қатар 2 ячейка 2

қатар 1 ячейка1 қатар 1 ячейка2
қатар 2 ячейка 1

Результат в браузере:



қатар 1 ячейка1

қатар 1 ячейка2

қатар 2 ячейка 1

қатар 2 ячейка 2

Пример 2:






> қатар 2 ячейка 2

қатар 1 ячейка1 қатар 1 ячейка2
қатар 2 ячейка 1

Результат в браузере:



қатар 1 ячейка1

қатар 1 ячейка2

қатар 2 ячейка 1

қатар 2 ячейка 2

Пример 3:






> қатар 2 ячейка 2

қатар 1 ячейка1 қатар 1 ячейка2
қатар 2 ячейка 1

браузерде:



қатар 1 ячейка1

қатар 1 ячейка2

қатар 2 ячейка 1

қатар 2 ячейка 2

Соңғы төрт атрибут:

ALIGN – html кестені немесе ондағы ячейканы көлденең теңестіру әдісін анықтайды.Мүмкін мәндері: left, center, right. Әдепкі мәні – left.

VALIGN – html кестені немесе ондағы ячейканы тік теңестіру әдісін анықтайды. Мүмкін мәндері: top, bottom, middle.(жоғары қарай қысу, төменге қарай және ортасына орналастыру).

BGCOLOR – кесте ячейкасы фон түсін анықтайды. Оналтылық жүйеде не RGB-мәнмен, не 16 базалық түспен анықталады.

BACKGROUND – кесте фонын суретпен толтыруға мүмкіндік жасайды. Мән ретінде URL суреттің мәнін көрсету керек.

Ескерту: кестенің әрбір ячейкасына фон түсі мен фондық суретті беруге болады. Бірақ: егер сіз TABLE базалық элементке фондық түс (немесе сурет) беретін болсаңыз, онда барлық ячейкаларда оыс фон (сурет) болады, және егер сіз қандай да бір ячейкада ауыстырғыңыз келсе, осы ячейка үшін сәйкес атрибутты жазыңыз.

Мысал:


< table width="400" height="100" border="1" align="center" bgcolor="#FFF8D2">

қатар 1 ячейка1 қатар 1 ячейка2
ряд 2 ячейка 1 қатар 2 ячейка 2

Браузерде:



қатар 1 ячейка1

қатар 1 ячейка2

қатар 2 ячейка 1

қатар 2 ячейка 2

Тағы бір мысал:


< table width="400" height="100" border="1" bgcolor="#FFF8D2">

қатар 1 ячейка1 қатар 1 ячейка2
қатар 2 ячейка 1 қатар 2 ячейка 2

Браузерде:



қатар 1 ячейка1

қатар 1 ячейка2

қатар 2 ячейка 1

қатар 2 ячейка 2

Егер сурет ячекадан кіші болса, онда ол мысалда көрсеткендей қайталанады. Егер үлкен болса – онда шыққан бөлігі бейнеленетін болады .

Практикалық жұмыс №.1

Тақырыбы: Кесте жасау

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

Кесте үш бөліктен тұрады:


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

Кесте тәгтері:

1.
HTML- құжат ішіне кесте салу үшін қолданылатын тәг. Кесте алдында және соңында болуы тиіс.



тәгінің параметрлері:

BGCOLOR - фон түсі.

BORDER - ұялар арасындағы сызықтың, яғни бордердың ені.

WIDHT - кесте ені.



Кесте ішінде орналасатын тәгтер:

  1. <CAPTIОN> CAPTIОN> - кесте тақырыбын береді. Оның параметрі ALIGN=TOP тақырып кесте алдына орналасады және ALIGN= BOTTOM-тақырып кестеден кейін орналасады.

  2. <TR> … TR> - кесте жолы. Оның параметрлері: BGCOLOR- осы жол торларының ішкі фон түсі; ALIGN= LEFT, RIGHT, CENTER- жол ішіндегі мәтіндерді солға, оңға және ортаға туралау; VALIGN= TOP, BOTTOM, MIDDLE - кесте жолы ішіндегі мәтінді вертикаль бағыт бойынша туралау.

  3. <TD> … </TD> - кесте бағанасы. Оның параметрлері: BGCOLOR-осы бағананың фон түсі; VALIGN= TOP, BOTTOM, MIDDLE - бағана ішіндегі мәтіндерді вертикаль бағытта туралау: COLSPAN- бірнеше бағана торларын біріктіру, ROWSPAN- бірнеше жол торларын біріктіру.

  4. <> ... > - бағана тақырыбы. Оның параметрлері: BGCOLOR- Тақырып орналасқан ұяның фон түсі. ALIGN= LEFT, RIGH, CENTER- көлденең бағытта туралау; VALIGN= TOP, BOTTOM, MIDDLE - тік (вертикаль) бағытта туралау; COLSPAN, ROWSPAN - бір ұя ішіне бірнеше бағаналар немесе жолдар торларын біріктіру; WIDHT - тақырып ұясының ені.

Кесте тұрғызу.

  1. Блокнот программасын іске қосыңыздар.

  2. Келесі мәтін жолдарын теріңіздер:

<span id='_10_сыныптардың_сабақ_кестесі___BLUE_SIZE=»4”_FACE=>___Дүйсенбі'> 10 сыныптардың сабақ кестесі</span>
=CENTER>

RED» SIZE=»6” FACE=»KZ ARIAL»>

10 сыныптардың сабақ кестесі

BLUE SIZE=»4” FACE=>

Дүйсенбі




<TR BGCOLOR=»#CCCCFF» ALIGN= CENTER>









Уақыты

10 «a»

10 «ә»

10 «б»
8l.30-9.50 Орыс тілі Информатика Тарих
10.00-11.20 Математика Ағылшын тілі» Ана тілі
11.30-12.50 Тарих Ана тілі Сызу


  1. Файлды ФНИ.НТМ атымен сақтап, жауып тастаңыздар.

  2. Сол файл белгішесін екі шертіп, Web-парақты Microsjft Internet Explorer броузері арқылы шығарылады, экранда төмендегі суреттегідей бейнені көресіздер.

9 сурет - Кесте салу

Енді осы тәсілмен Сейсенбі күнге арналған сабақ кестесін ары қарай жалғастырып жасап шығу керек. Ол үшін бос жолдар аралығында орналасқан программа фрагментін көшіріп, екінші бос жолдан кейін орналастыру керек. Сонан соң екінші бөліктегі «Дүйсенбі» сөзін «Сейсенбі» сөзіне алмастырып, сабақ кестесін де екінші күнге сәйкес өзгертіп шығу қажет. Осындай жолмен апта күндерінің бәріне де арналған сабақ кестесін жасап шығарыңыздар.
Әдебиет: [1], [2], [11], [12], [20].
Практикалық жұмыс №2

Тақырыбы: Гипермәтіндік байланыстар орнату.

HTML тілінің ең негізгі қасиеті ретінде оның басқа құжаттарға сілтеме жасау мүмкіндігін айтуға болады.

Бір HTML файылынан мынадай басқа құжаттарға:

- алыста орналасқан компьютердегі HTML- файлға;

- ағымдағы HTML-құжаттың ішіндегі белгілі бір орынға;

- HTML-құжаты болмайтын кез келген файлға сілтемелер жасауға болады.

Сілтеме ретінде мәтінді немесе суретті пайдалануға болады.


Бір құжат аймағында сілтемелер жасау.

Мұндай сілтемелер екі бөліктің болуын талап етеді, олар: белгі және сілтеме. Белгі сілтеме бойынша ауысып баратын осы құжат ішіндегі бір нүктені анықтайды. Сілтеме белгі атын пайдаланады. Броузердің алдын ала тағайындалатын параметрлеріне сәйкес сілтемелер басқа түспен ерекшеленіп тұрады немесе оның асты сызылады. Сілтеме сөздің түсін өзгерту үшін <BODY> тәгінің LINK=…және VLINK=…атрибуттары пайдаланылады.


Басқа HTML-құжатқа сілтеме жасау.

Ерекшеленіп тұрған сілтеме сөздерді шерту арқылы басқа файлдарға да көшуге болады. Төмендегідей сілтеме жасайық: ФНИ Файл атынан (RASP.HTM) кейін “>” және “<” символдары сілтеме сөз (“ЖТИ”)орналасқан осы сөзді шерту жолымен оның алдында аты көрсетілген файлын жүктеңіздер.

1. Броузер терезесіне RASP.HTM файлын жүктеңіздер.

2. Осы файлға төмендегідей өзгертулер енгізіңдер:









10 сыныптардың сабақ кестесі


Дүйсенбі















Уақыты

10 «a»

10 «ә»

10 «б»
8l.30-9.50 Орыс тілі Информатика Тарих
10.00-11.20 Математика Ағылшын тілі» Ана тілі
11.30-12.50 Тарих Ана тілі Сызу

3. Файлды сақтап, терезені жауып, оның нәтижесін броузер арқылы қарап шығарыңыздар.



4. Экрандағы көрініс төмендегі суреттегідей болуы тиіс.



10 сурет - Гиперсілтеме орнату


Достарыңызбен бөлісу:
1   2




©emirsaba.org 2024
әкімшілігінің қараңыз

    Басты бет