- •1. Қазіргі web-технологияларға шолу. Негізгі ұғымдар мен анықтамалар: клиент-сервер архитектурасы, www(World Wide Web), url (Uniform Resource Locator), http (HyperText Transfer Protocol).
- •2. Статикалық web-парақтарды ұйымдастыру. Тәгтер мен олардың атрибуттары. Html құжаттарында фреймдер мен формаларды қолдану.
- •3. Html-құжаттардағы web-палитралар арқылы графикамен жұмыс істеу. Web-құжаттардағы түстер және өлшем бірліктері. Графикалық бейнелер форматтары мен ерекшеліктері.
- •4. Стильдердің сатылы кестелерін – css-терді қолдану. Стильдердің тәгтерге, файлдарға және сайтқа толық әсер ету мүмкіндіктері. Стильдердегі динамикалық элементтер.
- •5. Css стильдерінің мұра ретінде берілуі. Контекстік селекторлар және кластар. Web-парақ элементтерін абсолюттік түрде орналастыру.
- •7. JavaScript кластары мен объектілері. Тілдің құрамындағы объектілер (Date, Array, window, document). Олардың қасиеттері мен тәсілдерін пайдалану.
- •2.1. Date ішкі объектісі және оның тәсілдері
- •2. Тәсіл түрі – setYear(). Жыл нөмірін тағайындайды.
- •3. Тәсіл түрі – getMonth(). Ай нөмірі мәнін береді.
- •8.JavaScript тілінің оқиғаларды өңдеу мүмкіндіктерін пайдалану. Тышқанды шерту, курсорды қозғалту, пернелерді басу әрекеттерін программалау.
- •1 Мысал. Php тілін құжатқа енгізу
- •2 Мысал. Php тіліндегі объектілер
5. Css стильдерінің мұра ретінде берілуі. Контекстік селекторлар және кластар. Web-парақ элементтерін абсолюттік түрде орналастыру.
HTML-кодтың құрылымы сатылы түрде болады. Бар құжат <body>. . .</body> тәгтері ішінде орналасады. Ал <Р> абзацы ішінде <B> тәгімен белгіленген элементтер болуы мүмкін.
Стильдің мұра ретінде берілуі <body> тәгі үшін анықталған стильдің құжаттағы барлық тәгтерге әсер ететіндігін білдіреді. Сәйкесінше егер бір тәг үшін стиль құрылса, онда сол тәг ішіндегі басқа тәгтерге де осы стиль міндетті түрде беріледі.
Мысалы, <Р> тәгі үшін келесі стиль берілген болсын:
P {color: red;
font-size: 14pt;
font-family: Arial,sans-serif}
Онда осы абзац ішіне орналасқан <ЕМ> тәгінің эле-менттері де экранда қызыл түспен, 14 пункт көлемде жұмыр қаріппен шығарылады.
Мысалы:
<Р>
Стильдік анықтаулардың <ЕМ>мұралану</ЕМ> қасиеті болады.
Контекстік селекторлар
Стильдік анықтауларды, тәгтердің кірістіріліп орналасу реттілігіне сәйкес орындалатындай етіп жазуға болады. Мысалы, <EM> тәгіндегі мәтін түсі ол <H3> тәгінің ішінде орналасқан жағдайда ғана көк болатындай етіп орналастырайық:
<HTML>
<HEAD>
<TITLE>Контекстный селектор</TITLE>
<STYLE type="text/css">
<!-- H3 EM {color: blue}
-->
</STYLE>
</HEAD>
<BODY bgcolor=white text=black>
<H3> Контекстный <EM>селектор </EM></H3>
<P> Контекстный <EM>селектор </EM></P>
</BODY>
</HTML>
Кластар
Стильдік анықтауларды тәгтерді көрсетпей-ақ жазуға болады. Мұндай жағдайда, берілген стилді нақты тәгке сәйкестендіру үшін, әрбір анықтауға арнайы атау меншіктелуі тиіс. Мұндай стильдік анықтаулар кластар деп аталады. Класс келесі түрде жазылады:
.аты
{ сипаттама: мәні;
. . .
сипаттама: мәні; }
Басқаша айтқанда, анықтаулар әдеттегідей жазылады, бірақ тәгтердің аттары орнына .аты конструкциясы қолданылады.
Мысалы, def атты стильдік класс жазып шығайық:
.def
{color: red; font-size: 16pt;
font-family: Geneva, Helvetica, sans-serif;
border: solid 0.2cm blue }
Мұнда border: solid 0.2cm blue қатары бір стиль-дік нұсқауда бірнеше параметрлердің қызметін жазуды көрсетеді ( мұнда: стиль, жақтау қалыңдығы, және оның түсі). Мұндай біріктіруді border сияқты жалпыланды-рылған арнайы стильдік қасиеттерге қолдануға болады.
Стильдік класты тәгпен сәйкестендіру үшін class атрибуты қолданылады:
<Р class=def > текст </P>
Абсолюттік түрде орналастыру
Абсолютті орналастыру position:absolute стильдік нұсқауы арқылы беріледі. Бұл кезде элемент-тің бастапқы координатасы тікелей сыртқы элемент аймағының (анасының) жоғарғы сол жақ бұрышы бо-лады (егер оның да орны абсолют немесе салыстыр-малы түрде анықталған болса). Егер сыртқы элемент белгілі бір орынға қойылмаса, онда оның да сыртқы элементі (анасы) алынады. Егер барлық сыртқы элем-енттерде position нұсқауы жоқ болса, онда алғашқы басты нүкте ретінде <body> тәгінің экрандық бейне-сінің сол жақ жоғарғы бұрышы, яғни құжаттың сол жақ жоғарғы бұрышы қабылданады. Көлденең және вертикаль координаталар left және top параметрлері арқылы беріледі.
Төменде суретті (100, 50) нүктесіне орналастыратын мысал келтірілген. Браузер координаталар басы ретінде құжаттың сол жақ жоғарғы бұрышын алады.
<HTML>
<HEAD>
<TITLE>Абсолютное позиционирование</TITLE>
</HEAD>
<BODY bgcolor=white text=black>
<H1>Абсолют</H1>
<P>
картинка
<P>
Измените
<IMG src=IMG061.GIF width=126 height=70
border=0 alt=«Египетская пирамида»
style="position:absolute;left:80px;
top:60px;">
</BODY>
</HTML>
6.Web-парақтарда JavaScript тілін қолдану технологиялары. Терезе ашу, оның параметрлерін тағайындау, терезеге мәлімет шығару.
JavaScript – браузерге түсінікті программалау тілі. Браузер бұл тілдегі командаларды орындай алады, яғни оның ішкі интерпретаторы бар.
JavaScript программасы скрипт немесе сценарий деп аталады, ол HTML-программасы ішінде орналаса береді не жеке файлға да жазылады. Ондай файлды да браузер оқып алады (арнайы команда бойынша).
JavaScript коды HTML тілін толықтырып, оны көрнекі етеді. JavaScript тілі арқылы гипермәтіндер жаңа мүмкіндіктерге ие болады.
JavaScript тілін Netscape пен Sun Microsystems фирма-лары бірлесе отырып жасаған, ол интерактивті HTML құжаттар құру үшін қолданылады.
Скриптер екі <script>...</script> тәгтері арасына орналасады. Әдетте олар төмендегідей болып жазылады.
<script language=JavaScript>
<! --
...
JavaScript кодтары
...
//-->
</script>
<NOSCRIPT>
...
JavaScript тілін сүйемел- дей алмайтын браузерлерге арналған мәліметтер
...
</NOSCRIPT>
Скрипт басы
Скрипт HTML тілі ком-ментариі түрінде жазы-лады, оны түсінбейтін браузерлер түсініктеме деп ұғады
Скрипт соңы
<NOSCRIPT> блогы скриптерді түсінбейтін браузерлер үшін жазылады
JavaScript – HTML тәгтерімен қатар пай-даланылуға арналған тіл. Web-программалаумен тығыз байланысты тағы да Java тілі бар.
Жаңа терезелер ашу
Көбінесе тұтынушыға бір нәрсе көрсету үшін бұрынғы терезе ашық тұрғанда, жаңа терезе ашуға тура келеді. Жаңа терезе ашу үшін window объектісінің open тәсілін қолданамыз. Оны мына тәсілдердің бірімен аша аламыз:
var переменная = open();
var переменная = open(файл);
var переменная = open(файл,имя_окна);
var переменная = open(файл,имя_окна,параметры_окна);
Мұндағы:
· переменная — айнымалы. Ашылатын терезеге нұсқауыш;
· файл — сөз тіркесі (строка). Ашылған терезеде көрсетілетін файл аты. Егер бұл параметр берілмесе, бос терезе ашылады;
· имя_окна — сөз тіркесі. Терезе аты сол терезеге мәлімет шығару үшін керек (window объектісінің name қасиеті мәні);
· параметры_окна — сөз тіркесі. Терезе қасиеттерін сипаттау.Егер параметр берілмесе, келісім бойынша қасиеттер қолданылады (по умолчанию).
Параметрлер арасындағы үтірден соң, бос орын қоймаған дұрыс, браузерлер онсыз да жұмыс істей береді.
Терезе параметрлерін сипаттау
|
Параметр |
Мәні |
Сипаттамасы |
|
Width |
Сан |
Пиксель, терезе ені. Минимал мәні – 100 |
|
Height |
Сан |
Пиксель, терезе биіктігі. Минимал мәні –100 |
|
scrollbars |
yes, no,1, 0 |
Айналдыру жолағын береді |
|
resizable |
yes, no,1, 0 |
Терезе көлемін өзгертуді көрсету үшін қажет |
|
Menubar |
yes, no,1, 0 |
Меню өрісі бейнелетінін көрсету үшін қажет |
|
Location |
yes, no,1, 0 |
Адрес енгізу өрісі бейнелетінін көрсету үшін қажет |
|
Status |
yes, no,1, 0 |
Статус жолағы бейнелетінін көрсету үшін қажет |
|
Toolbar |
yes, no,1, 0 |
Батырмалар (саймандар) тақтасы бейнелетінін көрсету үшін қажет |
Мысал.Ит суреті dog01.jpg бар терезе ашу
HTML>
<HEAD>
<TITLE>Проверка браузера</TITLE>
</HEAD>
<BODY bgcolor=white text=black>
<H2>Проверка браузера</H2> <HR>
<SCRIPT language=JavaScript>
<!--
var win = open("./pic/dog01.jpg","",
"width = 320,height = 260"+
"resizable =0,scrollbars =1"+
"menubar =0,location = 1" +
"status = 0, toolbar = no");
//-->
</SCRIPT>
<P>
Для возврата к основному тексту нажмите кнопку <EM>Назад</EM> на инструментальной панели браузера.
</BODY>
</HTML>
Терезеде көрсетілетін файл ретінде мыналарды көрсете аламыз:
· HTML-файл, мысалы, file1.htm;
· сурет файлы, мысалы, ./pic/fish.gif;
· мәтіндік файл, мысалы, 010401.txt.
Сlose тәсілі ашық терезені жабады. Мұндағы close()немесе window.close() ағымдағы терезені жабады. Ал win.close() немесе window, win.close() — осы терезеден open тәсілі арқылы ашылған win нұсқауышы бар терезені жабады:
var win = window.open(...);