Html тілінің көмегімен web-парақтарды құру

Тізімнің жолдары

Құжаттар арасындағы қатынасты анықтау

Жүгіртпе жол

Меню тізімін құру

Көп колоналы мәтін

Бос жолды алып тастау

Құжатқа тәуелсіз объектіні қосу

Нөмірленген тізімді қосу

Мәтіннің абзацы



Сценарийлерді қосу

Құжатқа стильдік ережелерді қосу

Төменгі индекс

Үстіңгі индекс

Кесте құру

Кестенің жолы

Асты сызылған қаріп

Маркерленген тізімді құру

Курсивпен еңгізілетін айнымалыны білдіретін логикалық элемент



ТЭГТЕРДІҢ АТРИБУТТАРЫ



Тэг атрибуттары

Көбінесе ашылу тэгіне әсер ететін түрлендірулер атрибуттары болады. Атрибуттар немесе сипаттамалар – тэг атауынан және бір-бірінен бос орын арқылы бөлініп жазылған қосымша түйінді сөздерден тұрады



Көбінесе атрибуттардың мәнін жазу керек болады. Атрибут мәні – оның түйінді сөзінен теңдік « = » белгісі арқылы бөлініп жазылады.



Атрибут мәні (“”) алынып жазылуы тиіс, бірақ та оны қолданбай-ақ қоюға болады. Ал жабу тэгінде атрибуттар болмайды.



МӘТІНДІ БЕЗЕНДІРУ



Мәтінді абзацтарға бөлу

Оның ең қарапайым жолы

ашу тэгін және

жабу тэгтарын қолдану



Мысалы:

Абзацтарға бөлу

Бірінші абзац

Екінші абзац



Блокнот редакторында жазылуы



Абзацқа бөліп жазған мәтінді Браузер арқылы ашып қарау терезесі



Мәтінге көлденең сызық қою

Оның ең қарапайым жолы

тэгін қолдану



Мысалы:

Көлденең сызық қою Кез келген мәтінді жазу Мәтіннің жалғасы



Блокнот редакторында жазылуы



Көлденең сызықты мәтінге қою



Қаріптің жазылуын беру

Оның ең қарапайым жолы

, ,

тэгтерін қолдану


• - қою қаріп
• - курсивті қаріп
• - асты сызылған қаріп

Бұндағы:



Мысалы:



Жиі кездесетін түстердің кодтары мен аттары

Түс

Түстің аты

Қара

Black

Қара көк

Он алтылық код

Navy

000000

Түс

Ашық сұр

Қара жасыл

Silver

000080

Түстің аты

Көк

Көгілдір

Қызыл

Blue

c0c0c0

Green

Он алтылық код

Red

Жасыл

008000

0000ff

Күлгін қызыл

Teal

Lime

008080

Қара сұр

Fuchsia

ff0000

00ff00

Сары

Gray

ff00ff

Yellow

808080

Ақ

ffff00

White

ffffff



FONT элементінің атрибуттары

• size - қаріптің өлшемі
• color - қаріптің түсі
• face - қаріптің гарнитурасы


Мысалы:

face = “Arial” size = “7” color = “red” Мәтін

Бұл қаріптің өлшемі 7, түсінің қызыл және Arial екендігін білдіреді

жазуы құжаттың фонының түсінің ақ екендігін көрсетеді" width="640"

Ал bgcolor =“#ffffff” жазуы құжаттың фонының түсінің ақ екендігін көрсетеді



Тізімдер



Тізімнің тақырыбы міндетті

емес элемент болып табылады және

ол тэгі арқылы беріледі.

Тізімнің құрамы жолдардан тұрады және

әрбір жол

• тэгі арқылы беріледі.
  - маркерленген тізім
  - нөмірленген тізім

  - анықтамалар тізімі

  

  Маркерленген тізім

  

  Үнсіз келісім бойынша маркерлер қара боялған дөңгелекше тәріздес болады, бірақ оның формасын өзгертуге болады. Ол үшін type атрибуты қолданылады.

  Жаңалықтар - іші боялған шаршы circle ” Жаңалықтар - іші боялмаған дөңгелек" width="640"

  Мысалы, оның келесі мәндері бар:

  1. square Жаңалықтар - іші боялған шаршы

  2. circle ” Жаңалықтар - іші боялмаған дөңгелек
     

     Нөмірленген тізім

     

     Мысалы, нөмірленген тізімнің түрлері:

     type = 1 - араб цифрларымен нөмірлеу

     type = А – латынның үлкен әріптерімен

     type = а – латынның кіші әріптерімен

     type = І – римнің цифрлерінің үлкен сандарымен

     type = і – римнің цифрлерінің кіші сандарымен

     

     КЕСТЕЛЕРДІ ҚҰРУ

     

     Құжатқа кесте қойған кезде әр кесте

Кестенің ұяшықтары Мәтінді еңгізуге арналған көп жолды аумақ	Кестенің тақырыбын беретін ұяшық Құжаттын атауы

тэгі арқылы басталып

жабу тэгі арқылы аяқталуы керек. Келесі тэгтер:

• TR – кестенің жеке жолын құру
• TD – кестенің жеке ұяшықтарын құру
• TH – кестенің тақырыптық ұяшығын құру
• CAPTION – кестенің атауын құруға

арналған



Мысалы:



Кестенің жалпы параметрлері: ( TABLE тэгіне қолданылатын атрибуттар)

• width – кестенің ені
• align – кестені терезеге қатысты туралау
• border – кестенің сыртқы шеркарасы
• bgcolor – кестенің фонының түсі
• bordercolor – шекарасының түсі


Осы атрибуттарды кестенің ұяшығына, кестенің жолдарына да қолдана беруге болады Мысалы:



Мысалы:



Нәтижесі:



Графика мен мультимедианы web - параққа қою



Web -ке арналған графикалық файлдардың форматтары

• GIF ( Graphics Interchange Format – алмасудың графикалық форматы ) , кеңейткіші- .gif
• JPEG ( Joint Photographic Expert Group – фотосуреттер эксперттерінің біріккен тобы ) , кеңейткіші- .jpg және .jpeg
• PNG ( Portable Network Graphics – тасымалданатын желілік графика ) , кеңейткіші- .png


Кескінді параққа қою

Оның ең қарапайым жолы

тэгін қолдану



Сурет арқылы аудио не видео файлға сілтеме жасау



Мына суретке шертсе

видео файл ойнатылады



Келесі ойнатқыш терезесі шығады



ФРЕЙМДЕРГЕ БӨЛУ



Оның ең қарапайым жолы

тэгінің орнына

тэгін қолдану



Ал фреймнің ішіндегілері

тэгі арқылы

анықталады



Мысалы:

Тік фреймдар



тэгіне қолданылатын атрибуттар

• cols – тік фреймдердің санын береді
• rows – көлденең фреймдер санын


lime yellow cyan

C уреттегідей үш

тік фреймдерге бөледі



Тік және көлденең

фреймдердің бірге

қолданылуына мысал:



Фреймдар



Lime

Yellow

Cyan

Yellow

Lime

Yellow

Cyan

Cyan

Lime

White

Aqua

Aqua

White

White

Aqua

Red

Red

Red

C уреттегідей тік және

көлденең фреймдерге бөледі



Мына

суретке шертсеңіз

осы парақты браузер

арқылы көресіз



Практикалық жұмыстар мен бақылау сұрақтары

Блокнотта жазған кодты htm кеңейткішімен сақтау Блокнотта HTML кодын жазу" width="640"

Бір мысалды қарастырайық: Интернетке саяхат Интернетке хош келдініздер! BODY

Блокнотта жазған кодты htm

кеңейткішімен сақтау

Блокнотта HTML кодын жазу



Сақталған файлды таңдау

1-ші деңгейдегі бос тақырып мәтіні / H 1 2 2-ші деңгейдегі ішкі тақырып мәтіні / H 2 абзац басы тәгі, жол арасына бос орын қалдырады. горизанталь сызықтан кейінгі мәтін екі жолға бөлу" width="640"

жалпы тақырып терезе тақырыбы 1 1-ші деңгейдегі бос тақырып мәтіні / H 1 2 2-ші деңгейдегі ішкі тақырып мәтіні / H 2

абзац басы тәгі, жол арасына бос орын қалдырады. горизанталь сызықтан кейінгі мәтін
екі жолға бөлу



Тәгтердің қосарланып жазылуына мысалдар:

… … …

…

1. …

HTML -тәгтерінің жалқы жазылуы:
… … …

HTML -тілінің атрибуттар арқылы жазылуы: ... ...



Бақылау

сұрақтары:



Қ атені тап

Нөмірленбеген тізімдер img src="fon.gif" Сырғымалы жолдар th ... Гипертексті белгілеу тілі WWW html құжат құрылымы br құжат бетіне сілтеме center 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. графикалық бейне қою html текст marquee world wide web тексті абзацтарға бөлу үш бөлімнен тұрады 1992 жылы пайда болды a href=" файл аты" a кестенің бағандары ортасыны туралау ul ... 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12." width="640"

Сәйкестікті тап

Дүниежүзілік өрмек

html

Нөмірленбеген тізімдер

img src="fon.gif"

Сырғымалы жолдар

th ...

Гипертексті белгілеу тілі

WWW

html құжат құрылымы

br

құжат бетіне сілтеме

center

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

11.

12.

графикалық бейне қою

html

текст marquee

world wide web

тексті абзацтарға бөлу

үш бөлімнен тұрады

1992 жылы пайда болды

a href=" файл аты" a

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

ортасыны туралау

ul ...

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

11.

12.



1. html тілінің алғашқы нұсқасын Еуропадағы ең кіші

қарапайым тіршіктер физика лабороториясыны?

қызметкері Тимом Бернерсом-Ли жасаған болатын.

2 . Интернет желісімен жұмыс істеу үшін

тышқан, пернетатта, монитор қажет.

3. Ең көп тараған броузерлер

ТСР және ІР.

4. html тілінің тегалары

блокнотта жазылады.

5. Web парақтар пішімінің

кеңейтілуі . htm

• қарапайым тіршіктер физика лабороториясыны? қызметкері Тимом Бернерсом-Ли жасаған болатын. 2 . Интернет желісімен жұмыс істеу үшін тышқан, пернетатта, монитор қажет. 3. Ең көп тараған броузерлер ТСР және ІР. 4. html тілінің тегалары блокнотта жазылады. 5. Web парақтар пішімінің кеңейтілуі . htm

"И? жо?"



Тапсырманы орында



Кесте жасау

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

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

Сабақ кестесі

Сабақ кестесі




Уақыты	П11класс	П12	П13
8- 0 0 – 9- 2 0	Орыс тілі	Информатика	Тарих
09-20 – 10-50	Математика	Геодезия	Ағылшын тілі
11-00 – 12-20	Тарих	Сызба геометрия	Компьютерлік графика


• Графикалық редакторды жүктеңіз де үш сурет құрыңыз, оларды дискіге . jpg немесе . gif форматпен сақтаңыз.
• Текстік редакторды жүктеңіз де берілген суреттердің біреуін фон ретінде, ал қалған екеуін құжаттың ішіне орналастырып HTML -құжат құрыңыз.
• Парақтың аты: Графикамен жұмыс.
• Парақтың мазмұны: html -құжатты графикалық безендіру.
• Алынған құжатты графика. htm атымен сақтаңыз.
• Берілген құжатты қарау үшін MS Internet Explorer броузерін жүктеңіз .

• Текстік редакторды жүктеңіз де , келесі берілгендермен HTML- құжатты құрыңыз :
• Парақтың аты : Жеке парақ ( Сіздің аты - жөніңіз ).
• Парақтың мазмұны : Өзіңіз туралы жазыңыз .
• ( Мысалы : Мен 1993 жылдың 5 ақпанында Ақтөбе қаласында дүниеге келдім . 2009 жылы № 6 орта мектепті бітірдім . 2009 жылы Ақтөбе кооперативтік колледжінің « ЕТ және бағдарламамен қамтаамсыз ету " мамандығына түстім . Менің сүйікті ісім – бұл компьютерлер , детективті әдебиеттер және музыка . Менің ең сүйікті компьютерім – 4 000 Мц - ті Pentium VI. Менің ең сүйікті кітабым – Артур Конан Дойлдың « Рассказы о Шерлоке Холмсе » кітабы . Менің ең сүйікті әншім – Олег Газманов).
• Алынған құжатты Мәтін. htm атымен сақтаңыз.
• Берілген құжатты қарау үшін MS Internet Explorer броузерін іске қосыңыз.


Сурет атрибуттарын тағайындау

ALT, BORDER, HEIGHT, WIDTH атрибуттарын пайдалана отырып, өз қалауларыңызша RASP.HTM файлына бірсыпыра өзгерістер енгізіңіздер.

Ескерту: Суреттік файлдың көлемінің (байтпен берілген) өзгеруіне назар аударып отырыңыздар, өйткені ол Web-құжаттың Интеренеттен компьютерге жүктелуіне қатты әсер етеді.

Web-парақтарға фондық суреттер салу

Фондық сурет – шағын төртбұрышқа орналасқан суреті бар графикалық файл. Броузерге фон ретінде тағайындалғанда, сурет көбейіп терезе аумағын толық алып тұрады.

Фон ретінде пайдаланылатын сурет тегінде көрсетіледі.

RASP.HTM файлына төмендегідей өзгерістер енгізіңіздер:

Менің алғашқы парағым

Алғашқы HTML файлы

сәрсенбі күнгі


сабақ кестесі

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