Гипермәтін жане WEB-парақтар

Автор работы: Пользователь скрыл имя, 10 Мая 2013 в 11:25, дипломная работа

Краткое описание

Дипломдық жұмыстың мақсаты:«HTML - тілін оқыту» электрондық оқулығын Delphi ортасында құру, қолданушыға ыңғайлы түрде өңдеу және программалауда тиімді пайдалану жолдарын көрсету. Осы мақсатқа жету үшін алдыма келесі міндеттерді қойдым:
Delphi программалау тілін терең оқып үйрену;
Арнайы оқулықтармен танысу;
Delphi ортасында электронды оқулық жасау үшін қажетті компоненттерді, олардың қасиеттерін оқып үйрену;
Delphi-де «HTML тілін оқыту» электрондық оқулық құру

Содержание

КІРІСПЕ 3

1 HTML тілінің негіздері 4
1.1 Мәтіндермен жұмыс 6
1.2 Сілтемелер 13
1.3 Бейне суреттермен жұмыс 25
1.4 Тізімдер, кестелер, стильдер, түстер, фрейімдер, тегтер 32
1.5 НTML тілінің қосымша мүмкіндіктері 34

2 «HTML- тілін оқыту» электрондық қабықшасын жасау 56
2.1 Delphi-да жоба құру жолдары 56
2.2 Объектілер инспекторы терезесі 57
2.3 Мәтіндермен жұмыс істеуде пайдаланылған компоненттер 57
2.4 Жұмыс сипаты 58

ҚОРЫТЫНДЫ 61

ҚОЛДАНЫЛҒАН ӘДЕБИЕТТЕР 62

Скачать полностью (2.47 Мб) Сколько стоит заказать работу?
Прикрепленные файлы: 1 файл

6Гиперматин жане WEB-парактар.docx

— 2.55 Мб (Скачать документ)

 2-мысал. Қойылған кесте шегіністерін құру.

<table width="100" border="0" cellspacing="0" cellpadding="6" align="left"> 
<tr> 
 <td>  
  <table width="100" border="0" cellspacing="0" cellpadding="4" bgcolor="#CC9900"> 
   <tr>  
    <td><img src="images/figure.jpg" width="100" height="111"></td> 
   </tr> 
   <tr>  
    <td>Пример подрисуночной надписи</td> 
   </tr> 
  </table> 
 </td> 
</tr> 
</table>                                                   

Қойылған кестелерді келтіру  қиындықтарын анықтау – бұл  үлкен көлемді соңғы коды және мәліметтерді редактірлеу ыңғайсыз. Сондықтан тапсырманы өзімізге жеңілдетеміз және стильдерді пайдаланамыз. Padding параметрі көмегімен сурет айналасында жолдар шығады, ал margin атрибутымен мәтін құрылады. Сол жағы суретті туралаумен оң жақ шетінен қасиеттер float қойылады. (3-мысал).

3-мысал. Сурет астындағы  жазуды құру үшін стильді пайдалану

<html> 
<head> 
<style type="text/css"> 
#sign { 
padding: 10px; margin: 0px 10px 10px 0px; 
background: #e0e0e0; 
border: 1px solid black; 
width: 100px; float: left; font-size: 90% 
} 
</style> 
</head> 
<body> 
<div id=sign> 
<img src=figure.jpg width=100 height=111><br> 
Винни-Пух в гостях у Кролика 
</div> 
</body> 
</html> 

    Мысалда көрсетілген сурет астындағы  жазу суреттің төменгі жағында көрсетілген. Оң жақ шетімен төменгі шеті 10 пиксельмен, margin параметрімен қойылған.

 

 

1.4  Тізімдер, кестелер, стильдер, түстер, фрейімдер, тегтер.

 

 

Тізімі бар өріс.

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

<select параметры> 
<option параметры>Выбор 1</option> 
<option>Выбор 2</option> 
<option>Выбор 3</option>  
</select>

Select және option тегі келесі  параметрлерден тұрады.Ол төменгі  3-кестеде көрсетілген.

 

3-кесте.

Select параметрі

Анықтамасы

Name=…

Өріс атауы. Форманың өңдеушісі  осы өрісті идентификациялауға арналған.

Size=…

Тізім саны. Үндемеумен бір  жол.

multiple

Бұл параметр бірнеше жолды  бірден таңдауға мүмкіндік береді. Таңдау Control немесе Shift пернесі арқылы орындалады.

Option параметрі

Анықтамасы

Selected

Үндемеумен көрінетін  өріс

Value=…

Таңдалған тізім пунктінде  серверге жіберілетін өріс мәнін  анықтайды.


 

Мысалы.Тізімі бар өріс

<html> 
<head> 
<body>

<form action="/cgi-bin/handler.cgi"> 
<b>Как по вашему мнению расшифровывается аббревиатура "ОС"?</b><br> 
<select name=OS> 
<option>Офицерский состав</option> 
<option>Операционная система</option> 
<option>Большой полосатый мух</option> 
</select>  
</form>

</body> 
</html>

Нәтижесін төмендегідей аламыз.

 

Как по вашему мнению расшифровывается аббревиатура "ОС"?  


7-Сурет.

        Кесте құру. 

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

Веб беттеріне кесте қосу үшін TABLE тег – контейнері қолданылады. Бұл кесте ең болмаса бір жол  немесе бағаналардан  құрылуы керек.

1 – мысал. Кестелердің  құрылуы.

 

<table> 
<tr> 
<td>кесте мазмұны</td>  
</tr>  
</table>

Жолдар қосу үшін <tr> және </tr> тегтері қолданылады. Жолдарды бағаналарға бөлу үшін <td> және </td> тегтері қолданылады (2 - мысал).

2 – мысал. Кесте ұяшықтары.

<table> 
<tr> 
 <td>ұяшық 1</td>  
 <td>ұяшығ 2</td>  
</tr>  
<tr> 
 <td>ұяшық 3</td> 
 <td>ұяшық 4</td>  
</tr>  
</table>

 Төменде кесте ұяшықтары  орналасуы бойынша көрсетілген. 

Ұяшық 1

Ұяшық 2

Ұяшық 3

Ұяшық 4




 

 

 

Қыртыстар және кестелер.

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

 

Берілген мақалада біз  верстті фреймдер көмегімен талқыламаймыз, бұл тақырып туралы фреймдердің  жетістіктері мен кемшіліктерін  әр түрлі ойда түсінетін көптеген материалдар жазылған. Қыртыстар  мен кестелер верстіне назар аударайық. Соңғы уақыттарда бұл таңдаулар  веб-парақ пен талқылауды құруға көп сүйенген. Негізінде мәселе көбіне ойластырылған, парақ қалай верстелетіні ─ қыртыс бойынша немесе кесте  бойынша болғанында ерекшелік жоқ. Әр қадам өз мақсаты үшін қолданылады. Түсінікті болуы үшін, кестелер мен  қыртыстар қайда, не үшін қолданылатынына  олардың қасиеттеріне салыстырулар келтірілген.

 

 

1.5 НTML тілінің қосымша  мүмкіндіктері.

 

 

           Декоративтік жақтау.

  Керекті жақтауды  жасау үшін оны қажетті түрде  қандайда бір графикалық редакторда  ұқсатып салу керек. Мысалы, 8 –  суретте домалақ бұрыштары бар  жақтау көрсетілген. Содан кейін  9 күлгін сары сызықтармен және  номерлермен белгіленген суретті  9 бөлікке бөлеміз. Мысалы, бейнені  ImageReady немесе соған ұқсас программаларда  бөлуге болады.

8-сурет.

9-сурет.


                      Салынып біткен домалақ             Элементтерге бөлінген

                                                                          жақтаулары бар   тіктөрбұрыш

                                     

 

 

                                 

                 4-кесте.       

Сурет

Орналасуы

Файылдың аты

Сол жақ жорғарғы бұрыш

1.gif

Көлденен сызық

2.gif

Оң жақ жоғарғы бұрыш

3.gif

Сол жақ тік сызық

4.gif

Оң жақ тік сызық

6.gif

Төменгі сол жақ бұрыш

7.gif

Төменгі сызық

8.gif

Оң жақ төменгі бұрыш

9.gif


 

1-мысал. Декоративті жақтау құру

<table width=400 border=0 cellspacing=0 cellpadding=0> 
<tr> 
<td height=13><img src=1.gif width=12 height=13></td> 
<td background=2.gif height=13><img src=1x1.gif height=13></td> 
<td height=13><img src=3.gif width=14 height=13></td> 
</tr> 
<tr> 
<td background=4.gif width=12>&nbsp;</td> 
<td align=center>Содержимое</td> 
<td background=6.gif width=12>&nbsp;</td> 
</tr> 
<tr> 
<td height=13><img src=7.gif width=12 height=13></td> 
<td background=8.gif><img src=1x1.gif height=13 width=1></td> 
<td height=13><img src=9.gif width=14 height=13></td> 
</tr> 
</table>

Кестеде borden,cellspacing және cellspadding параметрлері нольге тең болуы керек, әйтпесе сызықтар өзара байланыспайды.

         IMG тектерінің көмегімен бұрыштарын  қарапайым суреттер сияқты қоямыз, ал горизонтальді және вертикальді  сызықтарды background параметрлері  мен   кесте ұяшықтары фонының көмегі  арқылы беруге болады. Бұл біздің  жақтауымыздың көлемін үлкейтеді  және өлшемін мазмұнына байланысты  өзгертеді.

        Сызықтар  бір – біріне тақасып тұрып  араларында бос сызық болмау  үшін міндетті түрде ұяшықтар  мен суреттердің өлшемдерін көрсету  керек.

        Ұяшықтарда  горизонтальді және вертикальді  сызықтар фон болып орналасса,  распорканы міндетті түрде орналастыру  керек – бұл немесе бос сызық,  әлде өлшемі 1 де 1 пиксель (мысалда  файл 1 х 1 gif деп аталады) GIF форматындағы  мөлдір сурет. Бұл Netscape – ні  алдау үшін жасалады, өйткені  ол бос ұяшықтың мазмұнын көрсетпейді.

        Келтірілген  тәсіл әр түрлі рамкалардың  түрін құруға көмектеседі.

 

           Стильдердің қолданылу

 Стильдің көмегімен  рамканы әрбір блоктік тектерге  қолдануға болады, мысалы, парагрфке  (Р тек), Кесте мен тектерге DIV. Стильдер рамканы жеңіл және  қолайлы етіп жасайды, Кестелерді  қолданғанша 6 – суретте көрсетілгендей  әр түрлі рамкаларды ұсынады.

 

 

 
10-сурет. Стиль арқылы жасалған рамкалардың түрі.

 

    Бірінші орналасқан екі рамка – dottet және dashed тек қана жоғарғы Netscape және Internet Explorer браузерлары арқылы қолданылады.

 

Жақтау border параметрі арқылы оның түрі, қалыңдығы және түсі беріледі.

2-мысал. Стильдерді  қолдану

<html> 
<head> 
<style type="text/css"> 
P { border: double 4px #336699; padding: 5px} 
</style> 
</head> 
 
<body> 
<p>При работе на вычислительной технике необходимо сесть так, чтобы руки с предплечьями образовывали прямой угол, глаза поставить на расстояние 30-40 см от рабочей поверхности монитора.  
</p> 
</body> 
</html>

Мысалда екі қабатты рамка  қолданылады., қалыңдығы сызықтардың  қалыңдығынан және олардың арасындағы ара қашықтықтан құралады. Рамка  текске тимес үшін рамкадан radding параметірінің  мазмұнына отступ берілген.

 

Ескерту. Netscape 4х браузері Кестеларға арналған рамкаларды қосады және мазмұнымен оның енін шектейді.

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


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

 

border кестесінің  параметрлерін қолдану

        Жақтау  құрудың ең қарапайым тәсілі border кестесінің параметірін қолданумен  және оған түс беретін bordercolor және жақтаулардың қалыңдығын  анықтайды. Осындай бейнемен құрылған  жақтау өзінше әртүрлі браузерлерде  анықталады. (11 - сурет)

 

Internet Explorer

Netscape

Opera


11-сурет. Border параметірінің  көмегімен жақтау алу.

 

Жақтаудың үш өлшемділігін Netscape имитирлейді, Opera браузері оның түсін  өзгеріссіз қалдырады, ал Internet Explorer рамканы  бүтін етеді.

 

1 – мысал. Border параметірінің  қолданылуы.

 

<table border=2 bordercolor=#ff0000 width=100 height=100 cellpadding=6 cellspacing=0 bgcolor=#e0e0e0> 
<tr> 
<td>Содержимое</td> 
</tr> 
</table>

Border параметірі рамканың  қалыңдығын анықтайды. Bordercolor – оның  түсі, cellpadding – жақтау мен кестенің  ара қашықтығын анықтайды.

 

Cellspacing және bgcolor кестелерінің  параметрлерінің қолданылуы

 

Браузерлар жақтауларды  бірдей көрсетпеуі үшін,  bgcolor және   cellspacing Кестелар құрылымымен байланыстырып  шығу тәсілін қолдануға болады. Bgcolor параметрі арқылы барлық Кесте жақтаудың  түсімен сәйкес түске боялады. Ұяшықтың ішкі фонына түс беру керек, мысалы, ақ. Ұяшықтардың өлшемі кестелердің  өлшемінен аз, осындай айырмашылықтардан  көрінетін ішнара болады. Ұяшықтардың  ара қашықтығы ұяшық өлшемін  кіші өлшемге   cellspacing Кестесінің параметірінен басқартады (2 - мысал).

 

2 – мысал.  bgcolor  параметірінің  қолданылуы.

.

<table cellpadding=6 cellspacing=1 border=0 width=100 height=100 bgcolor=#000000> 
<tr> 
<td bgcolor=#ffffff> 
<table> 
<tr> 
<td>Содержимое</td> 
</tr> 
</table> 
</td> 
</tr> 
</table>

Cellspacing параметірінің мағынасын,  өзгертуін, рамканың қалыңдығын  өзгертуге болады. Ал шектің соңынан  мазмұнға – cellpadding параметрі.

 

Орналастырылған кестелер

   Әртүрлі браузерлерде  бірдей жұмыс істейтін қарапайым  және универсалды жақтауды  құру  тәсілдері, 2 кестенің бір біріне  қойылуы. Егер біз тікбұрышты  алсақ, мысалы, қызыл қағаздай  және оның үстіне тағы бір  кіші өлшеуіштегі ақ тіктөртбұрышты  алсақ, онда қызыл рамканы көреміз.Бет  қағаздың орнына TABLE тегін қолданамыз, ал Кестенің түсін bgcolor параметірімен  анықтаймыз (3 - мысал).

 

3 – мысал. Орналастырылған  кестелерді қолдану.

 

<table width=300 height=300 border=0 cellspacing=0 cellpadding=1 bgcolor=#FF0000> 
<tr> 
<td><table border=0 cellspacing=0 cellpadding=10 bgcolor=#FFFFFF width=300 height=300> 
<tr>  
<td align=center>Содержимое</td> 
</tr> 
</table> 
</td> 
</tr> 
</table>

Информация о работе Гипермәтін жане WEB-парақтар