Материалдар / HTML ГИПЕРМӘТІНДІК ТІЛІ
МИНИСТРЛІКПЕН КЕЛІСІЛГЕН КУРСҚА ҚАТЫСЫП, АТТЕСТАЦИЯҒА ЖАРАМДЫ СЕРТИФИКАТ АЛЫҢЫЗ!
Сертификат Аттестацияға 100% жарамды
ТОЛЫҚ АҚПАРАТ АЛУ

HTML ГИПЕРМӘТІНДІК ТІЛІ

Материал туралы қысқаша түсінік
HTML ГИПЕРМӘТІНДІК ТІЛІ WEB - БЕТТЕГІ ГРАФИКА. Жұмыс мақсаты: веб-бетке графикалық суреттерді кірістіруді, сурет айналасындағы шекараның өлшемі мен қалыңдығын беруді, фондық сурет орнатуды, суреттің асты мен үсті, оң жағы мен сол жағындағы бос орынның өлшемін анықтауды үйрену.
Авторы:
Автор материалды ақылы түрде жариялады. Сатылымнан түскен қаражат авторға автоматты түрде аударылады. Толығырақ
25 Қараша 2021
914
0 рет жүктелген
770 ₸
Бүгін алсаңыз
+39 бонус
беріледі
Бұл не?
Бүгін алсаңыз +39 бонус беріледі Бұл не?
Тегін турнир Мұғалімдер мен Тәрбиешілерге
Дипломдар мен сертификаттарды алып үлгеріңіз!
Бұл бетте материалдың қысқаша нұсқасы ұсынылған. Материалдың толық нұсқасын жүктеп алып, көруге болады
logo

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

WEB - БЕТТЕГІ ГРАФИКА.

Жұмыс мақсаты: веб-бетке графикалық суреттерді кірістіруді, сурет айналасындағы шекараның өлшемі мен қалыңдығын беруді, фондық сурет орнатуды, суреттің асты мен үсті, оң жағы мен сол жағындағы бос орынның өлшемін анықтауды үйрену.

Қысқаша теориялық мағлұматтар:

Суретті орнату. (Элемент <IMG>).

Бұл элемент құжат денесіне графикалық сурет орнату үшін пайдаланылады. Графикалық сурет дегеніміз: кішкентай пиктограммалар, суреттер, графикалық объектілері мен сурет карталары. Олар браузер терезесінің үлкен орнын алуы мүмкін. Web-беттегі суретті орнату жолы өте қарапайым және <IMG>тегінің көмегімен орнатылады, ол BODY элементінің кез келген жерінде орналасуы мүмкін.

Сонымен қатар, сурет адресі src атрибутының мәнімен беріледі (атауы source – көзі (источник) сөзінен шыққан). Аталған атрибут <IMG>тегіндегі міндетті атрибуттардың қатарына жатады.

<IMG SRC="picture.gif">

Графикалық файлдар бетті сипаттайтын HTML файлының орналасқан бумасында орналасуы тиіс екендігін естен шығармау керек. Web-тегі графика, әдетте үш форматта таралады: GIF, JPG, PNG.

Кесте -1.6.1.

Сурет атрибуттары

Форматы

Сипаттамасы

ALT


<IMG SRC= "Сурет.JPG" ALT="Сурет">

Егер сурет көрсетілмесе, онда оның орнына сурет атауының жазылуы, не сол сурет жөнінде мәлімет беріледі.

BORDER

<IMG SRC= "Сурет.JPG" BORDER="3">

Суреттіқоршаптұрғанжақтаусызығының (шекарасының) қалыңдығыпиксельменберіледі.

ALIGN

<IMG SRC= "Сурет.JPG" ALIGN="TOP">

Мәтінгебайланыстысуреттіңорналасуыкөрсетіледі:

TOP - жоғары,

BOTTOM - төмен,

MIDDLE- ортада,

LEFT - солжақта,

RIGHT- оңжақтатүзетілген.


HEIGHT

<IMG SRC= "Сурет.JPG" HEIGHT="111">

Браузертерезесініңішіндегісуреттіңбиіктігін (тігіненөлшемін) пиксельменнемесетерезебиіктігініңпайызыменбереді.

WIDTH

<IMG SRC= "Сурет.JPG"

Браузер терезесінің ішіндегі


WIDTH="210">

суреттің биіктігін (көлденең өлшемін) пиксельмен немесе терезе енінің пайызымен береді.

VSPACE

<IMG SRC= "Сурет.JPG" VSPACE="8">

Суреттің жоғарғы және төменгі жақтарындағы бос аймақ мөлшерін пиксельмен береді.

HSPACE

<IMG SRC= "Сурет.JPG" HSPACE="8">

Суреттің сол және оң жақ шеттеріндегі бос аймақ мөлшерін пиксельмен береді.

Тапсырма-1. HTML құжатына суретті кірістіру.

Құжатқа кірістіретін графикалық файлды алдын ала дайындап, өз бумаңызға сақтап қойыңыз

<HTML>

<HEAD>

<TITLE>Суреткірістіру</TITLE>

</HEAD>

<BODY>

<CENTER><H3> IMG тегі- суреттікірістіруүшінқолданылады</H3>

<IMG src="Маш1.jpeg">

</BODY>

</HTML>

Құжаттыveb61.html атауыменөзбумаңыздасақтаңыз.

Сурет-1.6.1.

Тапсырма-2. Түзетупараметрлерінқолданып, HTML құжатынасуреттікірістіру.

<HTML>

<HEAD>

<TITLE>Суреттікірістіру</TITLE>

</HEAD>

<BODY bgcolor=#ccff33>

<basefont color="#990000">

<font color=blue><h2 align=center> ALIGN атрибуты - суреттімәтінгеқатыстытүзетеді: </h2></font><br>

Мәтінгеқатыстысуреттің<img src="83829.jpg" align=top>жоғарғыбөлігітүзетілген<br><br>

Мәтінгеқатыстысуреттің<img src="83829.jpg" align= middle>ортаңғыбөлігітүзетілген<br><br>

Мәтінгеқатыстысуреттің<img src="83829.jpg" align= bottom>төменгібөлігітүзетілген

</BODY></HTML>

Құжаттыveb62.html атауыменөзбумаңыздасақтаңыз.

Сурет-1.6.2.

Тапсырма-3. Сәйкесінше атрибуттарды қолданып, суреттің өлшемі мен шекарасының қалыңдығын беру қажет. Үндеу бойынша суреттің өлшемі - 200х150. Жоғарғы суреттердің - өлшемдері, ал төменгі суреттердің - шекараларының қалыңдығы орнатылады. Жоғарғы суреттерде - ені (width) орнатылса, биіктігі автоматты түрде масштабталады, ал биіктігі height=20% (20% от размеров отображаемого браузера) орнатылса, ені автоматты түрде масштабталады.

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

<HTML>

<HEAD>

<TITLE>Суреттің өлшемі мен шекарасы</TITLE>

</HEAD>

<BODY bgcolor=aqua>

<font color=red><h3 align=center>Суреттіңөлшемдері: </h3></font><br>

<img src=" 84269.jpg " align=bottom>

<img src=" 84269.jpg " width=160>

<img src=" 84269.jpg " height=20%>

<br>

<font color=blue><h3 align=center> Сурет шекарасының қалыңдығы: </h3></font>

<br>

<img src=" 81687.jpg " align=bottom>

<img src=" 81687.jpg " border=15>

<img src=" 81687.jpg " border=40></BODY>

</HTML>

Құжаттыveb63.html атауыменөзбумаңыздасақтаңыз.

Сурет-1.6.3.

Web-бетке фондық суретті орнату

Фондық сурет – браузер терезесін оның өлшеміне қатыссыз толтыратын, бірнеше рет қайталанатын кішкентей суреті бар графикалық файл. Фондық сурет ретінде пайдаланылатын графика Background атрибутын жазу нәтижесінде пайда болады және <BODY> тегінде беріледі.

Тапсырма-4. Сәйкесінше атрибуттарды қолданып, фондық сурет орнату керек, суреттің жоғарғы және төменгі, оң және сол жақтарындағы бос орындарының өлшемін анықтау керек.

Құжатқа кірістіретін фондық суретті және шегіністерді анықтау үшін арналған суретті алдын ала дайындап, өз бумаңызға сақтап қойыңыз.

<HTML>

<HEAD>

<TITLE>Фондықсуреторнату</TITLE>

</HEAD>

<BODY BACKGROUND="73.jpg" >

<P ALIGN=justify>

<FONT COLOR=red SIZE="6">

<B>Компьютерлікграфика - </B></FONT>

<FONT SIZE="5"><I>әртүрлікескіндерді (суреттерді, сызбаларды, <img src="аним1.jpeg" hspace=25>мультипликацияларды) компьютердіңкөмегіменалудықарастыратынинформатиканың<img src="аним1.jpeg" vspace=25>маңыздысаласы.</I>

</FONT></P>

</BODY></HTML>

Сондаэкрандасіз 1.6.4 - суреттегідейбейненікөресіз.

Сурет-1.6.4.

Өзіндік жұмысқа арналған тапсырма

«ЗООБАҚ» жобасы. Қажетті тегтерді, сәйкесінше атрибуттарды және қажетті суреттерді қолданып, зообақтың аңдары туралы веб бетті құрыңыз. Аңдардың суреттерін кірістіріп, олар туралы қысқаша мағлұматтар беріңіз. Құжатты өз бетіңізше безендіріңіз.

Өзін-өзі бақылауға арналған сұрақтар:

1. Веб-бетке суретті кірістіру үшін қандай тег қолданылады?

2. IMG тегінің атрибуттары?

3. Фондық сурет деген не?

4. Фондық суретті кірістіру үшін қандай атрибут қолданылады?



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