Материалдар / HTML ГИПЕРМӘТІНДІК ТІЛІ

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

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

HTML ГИПЕРМӘТІНДІК ТІЛІ WEB - БЕТТЕГІ ГРАФИКА. Жұмыс мақсаты: веб-бетке графикалық суреттерді кірістіруді, сурет айналасындағы шекараның өлшемі мен қалыңдығын беруді, фондық сурет орнатуды, суреттің асты мен үсті, оң жағы мен сол жағындағы бос орынның өлшемін анықтауды үйрену.

Торебеков Дәулет Муратбекұлы

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

25 Қараша 2021

888

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

Информатика Ғылыми жұмыстар Басқа

770 ₸

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

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

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

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

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

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>

</BODY>

</HTML>

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

Сурет-1.6.1.

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

<HTML>

<HEAD>

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

</HEAD>

<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>

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

<br>

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

<br>

</HTML>

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

Сурет-1.6.3.

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

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

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

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

<HTML>

<HEAD>

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

</HEAD>

<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. Фондық суретті кірістіру үшін қандай атрибут қолданылады?

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

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