Блокнот программасына оралып, атрибуттың мәнін өзгерт

Paint және HTML арқылы суретті орналастыру

Бұл тапсырмада Paint бағдарламасында екі GIF сурет жасап, оларды HTML құжатына енгізіп, IMG тегінің орналасу және арақашықтық атрибуттарының бет көрінісіне қалай әсер ететінін бақылайсыз.

1) Paint-та екі GIF сурет дайындау

Paint бағдарламасын ашыңыз: Пуск → Программы → Стандартные → Paint.
Жаңа суреттің өлшемін беріңіз, мысалы 50×50 нүкте: Рисунок → Атрибуты.
Алдыңғы план түсін қызыл, фон түсін жасыл етіп таңдаңыз да, сурет аймағын фон түсімен толтырыңыз.
Кисть (Brush) құралымен жасыл фонда қызыл түсті еркін түрде сызықтар/дақтар салыңыз.
Суретті pic1.gif атымен GIF форматында сақтаңыз.
Рисунок → Атрибуты командасын таңдаңыз. «Использовать прозрачный цвет фона» жалаушасын қосыңыз.
Выбор цвета батырмасын басып, фон ретінде қолданған жасыл түсті таңдаңыз.
Суретті қайтадан pic2.gif атымен GIF форматында сақтаңыз.

2) HTML құжатына суретті енгізу және нәтижені бақылау

Егер жаттығу бірден жалғаспаса, Блокнот (Notepad) бағдарламасында first.htm құжатын ашыңыз.
BODY және /BODY тегтерінің арасындағы барлық мәтінді өшіріңіз. Келесі қадамдардағы мәтін осы жерге енгізіледі.
Еркін түрде 4–5 жолдық мәтін енгізіп, курсорды мәтіннің басына қойыңыз.
Келесі тегті енгізіңіз:
IMG SRC="pic1.gif" ALIGN="BOTTOM"
Құжатты picture.htm атымен сақтаңыз.
Internet Explorer ашыңыз: Пуск → Программы → Internet Explorer.
Файл → Открыть командасын таңдаңыз, Обзор арқылы picture.htm файлын ашыңыз және құжаттың бейнеленуіне назар аударыңыз.

Эксперимент: атрибуттарды өзгертіп салыстыру

Әр өзгерістен кейін файлды сақтап, браузерде Жаңарту (Обновить) батырмасын басыңыз да, бет көрінісінің қалай өзгеретінін бақылаңыз.

1) ALIGN мәнін TOP етіп өзгертіңіз
IMG SRC="pic1.gif" ALIGN="TOP"
2) ALIGN мәнін LEFT етіп өзгертіңіз
IMG SRC="pic1.gif" ALIGN="LEFT"
3) Аралықтарды қосыңыз: HSPACE және VSPACE
IMG SRC="pic1.gif" ALIGN="LEFT" HSPACE="40" VSPACE="20"
4) Сурет файлын pic2.gif-ке ауыстырыңыз
IMG SRC="pic2.gif" ALIGN="LEFT" HSPACE="40" VSPACE="20"
Екі суреттің айырмашылығы қандай? pic2.gif нұсқасында фон түсі мөлдір болғандықтан, сурет айналасындағы жасыл фон көрінбей, беттің фон/мәтін түсімен үйлесіп кетеді.

JavaScript сценарийін HTML құжатына орналастыру

JavaScript коды HTML құжатының ішінде script және /script тегтерінің арасына жазылады. Қолданылатын сценарий тілін көрсету үшін language параметрі пайдаланылуы мүмкін: JavaScript үшін мәні JavaScript, ал VBScript қолданылса — VBScript.

JavaScript қолданғанда language параметрін жазбай-ақ қоюға болады: браузер әдетте тілді үнсіз келісім бойынша анықтайды. Дегенмен, кейбір браузерлер қолдамайтын тегтерді елемей кететіндіктен, сценарий коды бетте дұрыс талданбай, көрініс бұзылуы мүмкін.

Үйлесімділік үшін ескерту

Классикалық тәсіл ретінде JavaScript операторларын HTML-түсініктеме ішіне орналастыру ұсынылады. Бұл ескі браузерлерде сценарий кодының мәтін болып көрініп кетуін азайтады.

<script language="JavaScript">
<!--
  // JavaScript операторлары
//-->
</script>

Құжат ішінде бірнеше script тегі болуы мүмкін; олардың барлығы ретімен JavaScript интерпретаторымен орындалады.

Мысал: тік бұрышты үшбұрыштың ауданын есептеу

Катеттері берілген тік бұрышты үшбұрыштың ауданын есептейтін сценарий жазайық. Нәтижені бетке шығару үшін document.write() әдісі қолданылады.

Листинг: BODY бөліміндегі сценарий

Екі айнымалы беріледі, кейін өрнек мәні құжатқа жазылады.

JavaScript

<p>Сценарий енгізілген парақ:</p>

<script language="JavaScript">
<!--
  var a = 8;
  var h = 10;
  document.write("Тік бұрышты үшбұрыштың ауданы: " + (a * h / 2));
//-->
</script>

noscript туралы

Егер браузер JavaScript-ті қолдамаса немесе ол өшірілген болса, noscript тегінің ішінде жазылған мәтін көрсетіледі. Бұл тег әдетте script блогынан кейін орналасады.

<noscript>
  Бұл бетте сценарий нәтижесін көру үшін JavaScript қосулы болуы керек.
</noscript>