Материалдар / «HTML пішімдеуші тегтері тәжірибе жүзінде пайдалану»

«HTML пішімдеуші тегтері тәжірибе жүзінде пайдалану»

Материал туралы қысқаша түсінік

Гипертекстік құжаттарды жасау тілі – HTML-ді қолданып, Web-бет жасаумен, тексті пішімдеу тегтерімен, HTML-құжатқа суретттерді, тізімдерді, кестелерді кірістіру, гиперсілтеме жасаумен таныстыру.

Амирханова Гулдана Арынбековна

Автор материалды ақылы түрде жариялады. Сатылымнан түскен қаражат авторға автоматты түрде аударылады. Толығырақ

30 Қараша 2022

547

0 рет жүктелген

Информатика Конспект Басқа

770 ₸

Бүгін алсаңыз
+39 бонус беріледі
Бұл не?

Бүгін алсаңыз +39 бонус беріледі Бұл не?

Тегін турнир Мұғалімдер мен Тәрбиешілерге
Дипломдар мен сертификаттарды алып үлгеріңіз!

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

Материалдың толық нұсқасын
жүктеп алып көруге болады

7-тәжірибелік жұмыс. «HTML пішімдеуші тегтері тәжірибе жүзінде пайдалану»

Мақсаты: Гипертекстік құжаттарды жасау тілі – HTML-ді қолданып, Web-бет жасаумен, тексті пішімдеу тегтерімен, HTML-құжатқа суретттерді, тізімдерді, кестелерді кірістіру, гиперсілтеме жасаумен таныстыру.

Негізгі ұғымдар:

HyperText Markup Language (HTML) – WEB ортасында гипертекстік құжаттарды жасауға арналған стандартты тіл. HTML-құжат кез келген пішімделмейтін текстік редакторда көруге және редакциялауға болатын қарапайым текстік файл болып табылады.

HTML-құжаттарды WEB-броузерлердің түрлі типтері арқылы көруге болады. HTML қолдану шрифтерді, сызықтарды және түрлі графикалық элементтерді қолданып кез келген оны көру жүйесінде көрсету үшін құжаттарды пішімдеуге мүмкіндік береді. Көптеген құжаттар тақырып, параграф және тізімдер сияқты стандартты элементтерден тұрады.

HTML-дің тегтерін қолдана отырып сіз браузерге өз құжатыңызды экранда қалай көргіңіз келетіні жайлы ақпарат бересіз.

HTML тегтері шартты түрде екі категорияға бөлінеді:

Құжаттың денесі тұтастай WEB-броузер арқылы қалай көрсетілетінін анықтайтын тегтер;
Тақырып пен құжат авторы сияқты құжаттың жалпы қасиеттерін тегтер.

HTML-құжаттар қалай жасалынады?

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

HTML-тегтер

Барлық HTML тегтері "<" символынан басталып, ">" символына аяқталады. Бастау (стартовый) тегі және аяқтау (завершающий) тегі болады.

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

<TITLE> Құжат тақырыбы </TITLE>

Аяқтау тегі бастау тегіне ұқсас, айырмашылығы тек бұрышты жақша ішіндегі мәтін алдында слэштің ( / ) болуында. Бұл мысалда <TITLE> тегі WEB-броузерге тақырып пішімінің (формат) қолданғанын, ал </TITLE> тегі мәтін тақырыбының аяқталғанын білдіреді.

Кейбір тегтер, мысалы, <P> (абзацты анықтайтын тег) аяқтау тегтерін қажет етпейді, бірақ оларды қолдану құжаттың бастапқы мәтінінің оқылуын жеңілдетіп, құрылымын жақсартады.

Кестелерді жасау

Кестелерді бейнелеу үшін HTML тегтерінің бірнеше түрі қолданылады:

TABLE тегтері – бүкіл кестенің спецификациясын қоршайды.

Міндетті емес элемент CAPTION – кестенің тақырыбын (атын) спецификациялайды.
TR тегтері – кесте жолдарын спецификациялайды.
TH тегтері – жолдар мен бағандардың тақырыптарын спецификациялайды.
TD тегтері– кестедегі деректерді (кесте ұяшықтарының ішіндегісін) спецификациялайды.

Негізгі кестелік құрылымдар

Қарапайым мысалды: тақырыбы жоқ, 2 жол 2 бағаннан тұратын сандар кестесін (бірлік матрица) қарастырайық. Оның HTML коды мынандай болады:

<TABLE>

1	0
0	1

</TABLE>

және көбінесе броузерлер арқылы былайша көрсетіледі.

Кестенің қосымша қасиеттері. Мәтіндік ұяшықтары бар типтік кесте.

Жоғарыда көрсетілген кесте үлгісіне қосуға болатын бірнеше элементтер бар:

Кестенің тақырыбы (caption ) – кестенің өзімен байланысқан (кесте туралы құжаттағы жолдар тексіне толықтауыш);
Тақырыпша (headers) (түсіндірме) – кесте жолдары мен бағаларына арналған;
Жақтау (рамка, borders) – кесте мен әр кесте ұяшығының айналасына арналған.

Сонымен қатар ALIGN мен VALIGN атрибуттары кестенің бейнелену сапасына әсер етеді. Олар құжаттың өрістеріне қатысты кестенің орналасуын айқындайды.

Мүмкін болатын мәндері: ALIGN=LEFT (сол жақпен туралау), ALIGN=CENTER (ортаға туралау), ALIGN=RIGHT (оң жаққа туралау).

WIDTH– Кестенің ені, пиксель арқылы WIDTH=400) немесе беттің енінің проценті түрінде (мысалы, WIDTH=80%) беріледі.

Жаттығу жұмыстары:

1-жаттығу. Тексті пішімдеу (форматтау) тегтерін қолданып 1-суреттегідей HTML –құжат жасау.

Блокнот текстік редакторын ашып, бос құжатты Задание1.html деген атпен сақтаңыз.
Құжаттағы алғашқы тег <HTML> тегі болу керек. Бұл тег WEB-броузерге құжаттың HTML қолданылып жасағанын хабарлайды. Сондықтан құжаттыі бірінші жолына <HTML> деп теріңіз.

1-сурет. HTML құжат үлгісі

Терезенің тақырыбын енгізу үшін мына жолдарды теріңіз:

<HEAD>

<TITLE> Пример работы

с тегами. Форматирование

</TITLE>
</HEAD>

Енді құжаттың денесін, яғни HTML құжатта не көрсетілетінін енгіземіз.Ол үшін мына жолдарды теріңіз:

<BODY BGCOLOR=yellow TEXT=blue >

мұндағы BGCOLOR=yellow құжаттың фоны – сары, ал TEXT=blue шығатын текстің түсі көк болатынын анықтайды.

Ары қарай тағы да теріңіз:

<H1>Это заголовок первого уровня</H1>

<H2>Это заголовок второго уровня</H2>

Бұл жолдар әр түрлі деңгейдегі тақырыптарды анықтайды.

Енді нөмірленген және нөмірленбеген тізім жасауды үйренейік. Ол үшін мына жолдарды енгізіңіз:

<OL >Это пример пронумерованного списка

<LI>Первый элемент

<LI>Второй элемент

<LI>Третий элемент

</OL>

<UL TYPE=DISC>Это пример непронумерованного списка

<LI>Первый элемент

<LI>Второй элемент

<LI>Третий элемент

</UL>

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

<I>Это курсив</I>

<B>Это жирный шрифт</B>

<U>Это подчеркнутый текст</U>

<SUP>Это верхний индекс</SUP>

<SUB>Это нижний индекс индекс</SUB>

<BR>Это начало нового абзаца.

<BIG>Это большой шрифт</BIG>

<SMALL> Это маленький шрифт</SMALL>

<STRIKE>Это перечеркнутый шрифт</STRIKE>

Келесі жолға <BR><BR> деп теріңіз. Бұл екі рет бос жол жасағанды білдіреді ( «Enter » клавишасын басқанды білдіреді).
Келесі жолға теріңіз: <MARQUEE >ЭТО БЕГУЩАЯ СТРОКА</MARQUEE>. Нәтижесінде жүгірмелі жол жасалынады.
HTML құжатта көрсетілетін ақпарат таусылғандықтан <BODY> тегін жабу керек , ол үшін </BODY> деп жазыңыз.
HTML құжаттағы жазу аяқталды, сондықтан <HTML> тегін де жабу керек,ол үшін </HTML> деп жазыңыз.
Блокнотты жауып, жасаған құжатыңызды тышқанның сол жағын екі рет шертіп ашыңыз.

2-жаттығу. Сайттың тексін өзгерту. Өзіңіз жайлы шағын ақпарат бар үй бетін (домашняя страница) жасаңыз, ол үшін барлық келтірілген тегтерді қолданып 1–ші жаттығудағы сайттың тексін өзгертіңіз.

3-жаттығу. Құжатты редақциялау.

Фондық сурет қою арқылы беттің фонын өзгертейік. Ол үшін:

Мои рисунки бумасынан (папка) jpg форматты суреттің көшірмесін өз бумаңызға түсіріп, оған image.jpg деп ат беріңіз.
Қайтадан өзіңіздің HTML-құжатыңыздың бетіне оралып Вид-Просмотр HTML-кода командасын орындаңыз.
Ашылған Блокнот редакторының терезесінде HTML-кодты. Редакциялайық. <BODY> тегінде фон түсінің тегінің орнына BACKGROUND="image.jpg" дегенді қосып жазыңыз. Құжатты сақтап, Блокнот терезесін жабыңыз.
Өзіңіздің HTML- құжатыңыздың бетіне оралып Вид-Обновить командасын орындаңыз.

4-жаттығу. Сурет түсіру. Құжатқа гиперсілтеме жасау.

<IMG> және <A HREF> тегтерін қолданып келесі HTML- құжатын жасау.(2-сурет)

2-сурет

Блокнот текстік редакторының терезесін ашып, бос құжатты Задание4.html деп сақтаңыз
Құжаттың бірінші жолына <HTML> деп жазыңыз..
Терезе тақырыбын жазу үшін мына жолдарды енгізіңіз:

<HEAD>

<TITLE> Вставка рисунка и гиперссылки

</TITLE>

</HEAD>

Ары қарай <BODY BGCOLOR=pink TEXT=black LINK=blue VLINK=red> деп енгізіңіз.
Енді суретті түсіреміз. Ол үшін келесі жаңа мына тіркестерді жазыңыз: <IMG SRC="image.jpg" ALT="Здесь должен быть рисунок" HEIGHT=250 WIDTH=250 ALIGN=middle ISMAP>
Сурет пен келесі жазылатын текст арасында 3 бос жол болу керек. Ол үшін <BR><BR><BR> деп жазыңыз.
Енді құжатқа Задание1.html құжатын шақыратын гиперсілтеме (гиперссылка)жасаймыз Ол үшін мына жолдарды теріңіз:

<A HREF="Задание1.html"> Перейти по гиперссылке </A>

</BODY> тегін жабыңыз.
</HTML> тегін жабыңыз.

4-жаттығу. Кестесі бар (таблица) HTML-құжат жасау.

Төмендегі программаның тексін Блокнот текстік редакторында теріп, құжатты Задание 5.html деген атпен сақтаңыз. Кестені жасауда қолданылатын барлық тегтерді меңгеріңіз.

<HTML>

<HEAD>

<TITLE>Пример 2</TITLE>

</HEAD>

<H1>Простейшая таблица </H1>

У таблицы может быть заголовок

</CAPTION>

Первая строка, первая колонка

</TD>

Первая строка, вторая колонка

Ресми байқаулар тізімі

Республикалық байқауларға қатысып жарамды дипломдар алып санатыңызды көтеріңіз!