Сайтқа ену

Оқулықтар

Интернетке орналастыру

Оқулық-бағдарламалар

Матфизика есептерінің шешімдері

Қайталау


Біз html оқулығы бойынша курсты аяқтадық. Көптеген html элементтері өтілді. Оның бәрін бірден есте сақтау мүмкін болмайды. Басынан бастап оқулықты басынан бастап қайта оқып шығуға көп уақыт кетеді. Уақытты үнемдеу үшін оқулықта келтірілген мысалдарды осы жерде қайта тізіп беруді жөн көрдік. Егер Сізге белгілі бір элементке қатысты мәселені білгіңіз келсе осы жерден оның кодын қарайсыз. Ал браузерден нәтижесін қарау үшін Блокнотты немесе FrontPage бағдарламасын пайдаланасыз.

01.htm

<HTML>
<
HEAD>
<
TITLE>Web- беті </TITLE>
</
HEAD>
<
BODY>
<
H1> Пример Web – беті мысалы</H1>
<
Pұл кәдімгі <I> Блокнотта </I>жазылған ең қарапайым Web – бет және ол <I>Microsoft Internet Explorer</I> браузерінде бейнеленеді.</P>
</
HTML>

Сілтемелер

Сілтемелер құру үшін <a> тегі қолданылады.

Төлбелгілер:

1. href

· <a href="index.htm"> Сіздің мәтін </a> - осы қалтада тұрған құжатқа сілтеме;

· <a href="about/index.htm"> Сіздің мәтін </a> - басқа қалтада (about) тұрған құжатқа сілтеме;

· <a href="http://prostosite.ru/index.shtml"> Сіздің мәтін </a> - бұл сілтемеге Интернетке қосылып қана қосыла аласыз. Құжат осы сайтта тұрған кезде, қолайлы емес. Бұл жағдайда бірінші және екінші пунктерді пайдаланыңыз;

· <a href="mailo:e-mail@server.ru"> Сіздің мәтін </a> - e-mail-адреске сілтеме;

2. name

·<a name=A> Сіздің мәтін </a> - тег алдынала құруды керек ететін белгіге сілтеме құрады;

3. target

·<a href="http://prostosite.ru/index.shtml" target ="_blank">Сіздің мәтін </a> - сілтеме браузердің жаңа терезесінде ашылады.

Мәтін

<pіздің мәтін</p> - алдынан да, артынан да бос орынды параграф құрады.

Төлбелгілер:

1. align

· <p align="left">Сіздің мәтін</p> - сол жақ шетімен теңестіру;

·<p align="right">Сіздің мәтін</p> - оң жақ шетімен теңестіру;

·<p align="center">Сіздің мәтін</p> - ортасымен теңестіру;

·<p align="justify">Сіздің мәтін</p> - ені бойынша теңестіру;

2. <br>Сіздің мәтін - келесі жолға жолдың жазылуы

FrontPage бағдарламасында жаңа параграфты Enter пернесін басу арқылы құруға болады. Жаңа жолға (<br>) өту үшін, Shift+Enter тетіктерін бірге басу керек.

<H1>Сіздің мәтін</H1>-<H6>Сіздің мәтін</H6> - H1 тақырыптары жәй мәтіннен үлкен H6-ға дейін жай мәтіннен кіші.

Төлбелгілер:

align

·<H1 align="left">Сіздің мәтін</H1> - H1 тақырыпты сол жақ шетпен теңестіру;

·<H2 align="right">Сіздің мәтін</H2> - H2 тақырыпты оң жақ шетпен теңестіру;

·<H3 align="center">Сіздің мәтін</H3> - H3 тақырыпты ортасымен теңестіру;

<font>Сіздің мәтін</font> - мәтін қарпі түсін, өлшемін қояды

Төлбелгілер:

1. size

·<font size>="1">Сіздің мәтін</font> - мәтін көрінеді былайша;

·<font size>="2">Сіздің мәтін</font> - мәтін көрінеді былайша;

·<font size>="3">Сіздің мәтін</font> - мәтін көрінеді былайша;

·<font size>="4">Сіздің мәтін</font> - мәтін көрінеді былайша;

·<font size>="5">Сіздің мәтін</font> - мәтін көрінеді былайша;

·<font size>="6">Сіздің мәтін</font> - мәтін көрінеді былайша;

2. color

·<font color>="red">Сіздің мәтін</font> - қызыл түсті мәтін;

·<font color>="#3366cc">Сіздің мәтін</font> - бір көк түсті рең;

3. face

·<font face>="Comic Sans MS">Сіздің мәтін</font> - Comic Sans MS қарпі;

·<font face>="Courier">Сіздің мәтін</font> - Courier қарпі;

<b>Сіздің мәтін</b> немесе <strong>Сіздің мәтін</strong> - мәтінді жартылай толық ерекшелейді;

<i>Сіздің мәтін</i> немесе <em>Сіздің мәтін</em> - қиғаш мәтін

<u>Сіздің мәтін</u> - мәтіннің астын сызады.

<img></img> - суретті GIF, LPEG немесе PNG суреттерді бейнелейді.

Төлбелгілер:

1. src

<img> src="cyret1.gif"></img> - src белгісі суретке жолды көрсетеді;

2. align

·<img> src="cyret1.gif" align="left"></img> - бейнені сол жақ шетпен теңестіру;

·<img> src="cyret1.gif" align="right"></img> - бейнені оң жақ шетпен теңестіру;

·<img> src="cyret1.gif" align="center"></img> - ортасымен теңестіру;

·<img> src="cyret1.gif" align="bottom"></img> - төменгі шетімен теңестіру;

·<img> src="cyret1.gif" align="top"></img> - жоғарғы шетімен теңестіру;

·<img> src="cyret1.gif" align="middle"></img> - ортасымен теңестіру;

3. alt

<img> src="cyret1.gif" alt="Гүлдегі көбелек"></img> - суретке мәтінді шығару;

4. border

<img> src="cyret1.gif" border="2"></img> - сурет қоршауының ені 2 пикселге тең;

5. height

<img> src="cyret1.gif" height="154"></img> - сурет биіктігі 154 пикселге тең. Осы параметрді қойған дұрыс, өйткені бұл суретті қотаруды жылдамдатады;

6. width

<img> src="cyret1.gif" width="256"></img> - сурет ені 256 пикселге тең. Осы параметрді қойған дұрыс, өйткені бұл суретті қотаруды жылдамдатады;

7. hspase

<img> src="cyret1.gif" hspase="10"></img> - бейненің сол және оң жағында 10 пикселге тең бос орын бар;

8. vspase

<img> src="cyret1.gif" vspase="20"></img> - жоғарыдан және төменнен бейненің 20 пиксел бос орын бар. Бұл және алдыңғы төлбелгілер беттің сыртқы бетін жақсарту үшін қолданылады. Ол үшін бейнені мәтіннен және басқа нысандарды бөліп ұстайды.

Мысал.

<img scr="flower.gif" width=32 height=100 align=center vspase=15 hspase=13 alt="Гүлдегі көбелек"></img> - "flower.gif" суреті ені 32 пиксел және биіктігі 100 пиксел ортада орналасады. Түспелі мәтін - "Гүлдегі көбелек" солдан және оңнан - 13 пиксел, жоғарыдан және төменнен - 15 пиксел.

<hr> - бетті кесе көлденең сызықты бейнелейді. FrontPageде: Вставка | Горизонтальная линия. Жабатын тег керек емес.

Төлбелгілер:

1. size

· <hr size="2"> - биіктік қалыңдығы 2 пиксел;

2. align

· <hr align="left"> - сызық сол жақ шетке орналасқан;

· <hr size="right"> - сызық оң жақ шетке орналасқан;

· <hr size="center"> - сызық ортаға орналасқан;

3. color

<hr color="blue"> - сызық түсі - көк;

4. noshade

<hr noshade> - сызықта көлеңке жоқ;

Көлденең сызық <hr> мысалы

<hr width="50%" size="2" align="center" noshade>

<hr width="100%" color="blue" noshade>

<hr width="90%" noshade color="yellow" align="right" >

<bgsound> - тег фондық саз ретінде дыбыстық файлдар бетін енгізуге қызмет етеді (Internet Explorer браузерде ғана қолданылады). Мүмкін пішімдері: WAV, MIDI, MP3 және басқалар. Жабылатын тег керек емес.

Төлбелгілер:

1. src

<bgsound src="sound.wav"> - дыбыстық файлдың URL-адресі, бұл жағдайда "sound.wav".

2. loop

·<bgsound src="sound.wav" loop="0"> - саз тек бір-ақ рет ойналады;

·<bgsound src="sound.wav" loop="-1"> - дыбысты тұрақты түрде шығару;

·<bgsound src="sound.wav" loop="6"> - қайталаудың дәл санын қояды, бұл жағдайда 6;

3. balance

·<bgsound src="sound.wav" balance="+5000"> - саз сол және оң колонкада ойналуын анықтайды. Қабылдайтын мәні -10000-нан (сол жағы) +10000 (тек оң жағы) дейін.

4. volume

·<bgsound src="sound.wav" volume="-50"> - саз қолданушы компьютерінде дыбыс деңгейіне қатысты саз ойнайды. Ең үлкен мәні 0 және қолданушы қойған дыбыс деңгейіне сәйкес келеді. Тек ақырын -10 000 ға дейін.

Мысал:

·<bgsound src="sound.wav" loop="-1"> volume="-1000"> - дыбыстық файл sound.wav шексіз ойнайды, дыбыс қаттылығы қолданушы компьютеріне қойылған дыбыс қаттылығынан 1000 есе төмен.

Тізімдер

<ol></ol> - нөмірленген тізім құруға қызмет етеді.

Төлбелгілер:

1. type

·<ol type="1"></ol> - араб цифрларын пайдаланатын нөмірленген тізім

·<ol type="A"></ol> - бас әріпті пайдаланатын нөмірленген тізім

·<ol type="a"></ol> - жолдық әріпті пайдаланатын нөмірленген тізім

·<ol type="I"></ol> - бас әріпті рим цифрларын пайдаланатын нөмірленген тізім

·<ol type="i"></ol> - кіші әріпті рим цифрларын пайдаланатын нөмірленген тізім

2. start

·<ol type="3"></ol> - нөмірленген тізімде бастапқы мән -3.

3. title

·<ol type="бұл тізім"></ol> - бұл тізім мәзірлік көмек.

Нөмірленген тізім түрлері

<ul></ul> - тізімге белгі қойылады

Төлбелгілер:

1. type

<ul type="disc"></ul> - маркер типі - боялған дөңгелек;

<ul type="circle"></ul> - маркер типі - боялмаған дөңгелек;

<ul type="square"></ul> - маркер типі - квадрат;

2. title

<ul title="бұл тізім"></ul> - "бұл тізім" шығатын көмек.

<li> - тізім жолын белгілеуге арналған. Нөмірлейтін және белгілейтін тізімдерде қолданылады.

Нөмірлейтін және белгілейтін тізімнің HTML коды

Кестелер

<table></table> - стандартты кесте

Төлбелгілер:

1. align

· <table align="left"></table> - кестені сол шетпен теңестіру;

·<table align="right"></table> - кестені оң шетпен теңестіру;

·<table align="center"></table> - кестені сол ортасымен теңестіру;

2. wigth

<table width="90%"></table> - кесте ені бейнебет енінің 90% тең. Мәнді пикселмен беруге болады, дұрысы пайызбен берген;

3. bgcolor

<table bgcolor="white"></table> - кесте өңі ақ;

4. background

<table background="images/fon2.jpg"></table> - кестенің өңдік суретіне жол: images/fon.jpg;

<table background="http://prostosite.ru/images/fon2.jpg"></table> - кестенің өңдік суреті http://prostosite.ru/images/fon.jpg адресінде орналасқан.

5. border

<table border="5"></table> - кесте қоршауының ені 5 пиксел;

6. bordercolor

<table bordercolor="orange"></table> - кесте қоршауының түсі қоңыр;

7. cellspasing

<table cellspasing="10"></table> - кесте ұяшарының ара қашықтығы - 10 пиксел;

8. cellpadding

<table cellpadding="15"></table> - кесте мәні мен оның қоршауының ара қашықтығы - 15 пиксел;

<tr></tr> - кесте жолы

Төлбелгілер:

1. align

· <tr align="left"></table> - жолды сол шетпен теңестіру;

·<tr align="right"></table> - жолды оң шетпен теңестіру;

·<tr align="center"></table> - жолды ортасымен теңестіру;

2. valign

· <table valign="top"></table> - кесте мәнін жоғарғы шетпен теңестіру;

·<table valign="middle"></table> - кесте мәнін ортасымен теңестіру;

·<table valign="bottom"></table> - кесте мәнін төменгі шетпен теңестіру;

<td></td> - кесте ұяшасы

Төлбелгілер:

1. align

· <td align="left"></table> - ұяшаны сол шетпен теңестіру;

·<td align="right"></table> - ұяшаны оң шетпен теңестіру;

·<td align="center"></table> - ұяшаны ортасымен теңестіру;

2. valign

· <td valign="top"></table> - ұяшаны мәнін жоғарғы шетпен теңестіру;

·<td valign="middle"></table> - ұяшаны мәнін ортасымен теңестіру;

<td valign="bottom"></table> - ұяшаны мәнін төменгі шетпен теңестіру;

3. colspan

· <td colspan="5"></td> - бір ұяша 5 бағанға біріктірілді (әдепкі 1);

4. rowspan

·<td rowspan="5"></td> - бір ұяшада 3 жол біріктірілді (әдепкі 1);

<th></th> - кестеде баған тақырыбын анықтайды

Төлбелгілер:

1. align

· <th align="left"></th> - ұяшаны сол шетпен теңестіру;

·<th align="right"></th> - ұяшаны оң шетпен теңестіру;

·<th align="center"></th> - ұяшаны ортасымен теңестіру;

2. valign

· <th valign="top"></th> - ұяша мәнін жоғарғы шетпен теңестіру;

·<th valign="middle"></th> - ұяша мәнін ортасымен теңестіру;

<th valign="bottom"></th> - ұяша мәнін төменгі шетпен теңестіру;

3. colspan

· <th colspan="5"></th> - бір ұяшада 5 бағанға біріктірілді (әдепкі -1);

4. rowspan

<th rowspan="5"></th> - бір ұяшада 3 жол біріктірілді (әдепкі -1);

5. border

<th border="1"></th> - ұяша қоршауының ені 1 пиксел;

6. bordercolor

<th bordercolor="gray"></th> - ұяша қоршауының түсі сарғыш;

7. bgcolor

<th bgcolor="bisque"></th> - ұяша өңі сарғыш;

Кесте мысалы

<table border=1 bgcolor=yellow bordercolor=black width="100%" align=center>

<tr><th>Баған тақырыбы 1</th><th>Баған тақырыбы 2 </th></tr>

Келесі сабақтарда біз CSS технологиясына қатысты мәселені сөз етеміз. Бұған арналған ағылшын,орыс тілдеріндегі оқулықтар өте көп. Оны Интернеттен таба аласыз.

Қараңыз

Алдыңғы - Құжат басы туралы бірер сөз.

Сайт бойынша іздеу

Мазмұны

Copyright © 2015 Матаев Саркытбек | Интернеттік бағдарламалар мен математика жетістіктерін жариялауға арналған сайт – www.karakoz.kz