 |
Добавление графического фона.
Дата добавления: 2014-11-24 | Просмотров: 1512
|
|
Атрибут BACKGROUND =”?” в теле тега <BODY>, вместо знака ? задайте путь к фону и его название.
Мысал:
<body text=#336699 bgcolor=#000000 background="сіздің_фон.gif">
5 ТАПСЫРМА:
1. желілік дискіңізде HTML\Фоны папкасын құрыңыз.
2. Осы папкаға өзіңізге ұнаған фонды көшіріңіз.
3. HTML – құжатқа фонның өлшемін енгізіп, нәтежені қараңыз.
4. Көлденең бөлу сызығын құру.
Түзу <Hr> тегі арқылы беріледі және жабушы тег қажет етпейді
(бастапқыда ені = 2 пиксель).
6 ТАПСЫРМА:
әр түрлі өлшемдегі сызықтардың сіздің құжатыңызда орналасуын көрсетіңіз (төмендегі мысалды қара)
Қолдану мысалдары:
(1) <Hr align=right> (center немесе left) – сызық оң жағында орналасқан (орта, сол жақ).
(2) <Hr width=30%> - браузер терезесіне қатысты сызықтың ені пайызбен/пиксельмен беріледі
(3) <Hr size=6> - сызықтың қалыңдығы пиксельмен берілген
(4) <Hr NoShade> - көлемділікті болдырмау
(5) <Hr color=#cc0000> - сызықтың түсі, тек IE-де
Өлшемдерді бір уақытта қолдануға болады.
7 ТАПСЫРМА:
1. Ені 130 болатын тағы бір суретті өз құжатыңызға енгізіңіз.
2. Екінші суретті биринші суретке қатысты мәтіннің қарсы бетіне орналастырыңыз.
5. Br – Clear тегінің өлшемі.
Суретті мәтін бөлігімен қоршау үшін, сол бөліктің алдына тегті жазыңыз:
<BR CLEAR=?>,сұрақ белгісінің орнына мыналардың бірін енгізіңіз Left , RightнемесеAll
(сол жақтан, оң жақтан немесе барлық жағынан сіретті мәтінмен қоршауды доғарту)
8 ТАПСЫРМА:
1. бірінші суреттегі қоршауды алып тастаңыз.
2. нәтежені браузерден қарап талқылаңыз
6. Графикалық маркермен тізім.
Например:
1) Графикалық маркерді енгізу тәсілі
<UL>
<BR><IMG SRC=”сурет.jpg”><I> 1 Бөлім,</I> 1 бөлімдегі мәтін
<BR><IMG SRC=”сурет.jpg”><I> 2 Бөлім,</I>2 бөлімдегі мәтін
</UL>
2) маркерден мәтінге дейінгі қашықтық ені.
<UL>
<BR><IMG SRC=”сурет.jpg” HSPACE=10><I> 1 Бөлім,</I>1 бөлім мәтіні
<BR><IMG SRC=”сурет.jpg” HSPASE=10><I>2 Бөлім,</I>2 бөлім мәтіні
</UL>
3) Элементтерді мәтінге қатысты тіктеу.
<UL>
<BR><IMG SRC=”сурет.jpg” ALIGN=middle><I> 1 Бөлім,</I>1 бөлім мәтіні
<BR><IMG SRC=”рис.jpg” ALIGN=middle><I> 2 Бөлім,</I> 2 бөлім мәтіні
</UL>
9 ТАПСЫРМА:
1. мәтінге қатысты, ортаға, төменге және жоғарға тіктеумен, picture.html құжатына әр түрлі графикалық маркерлер салыңыз.
2. Нәтежені браузерден қарап талқылаңыз
Бақылау сұрақтары:
- Графикалық суреттерді құжатқа салу үшін қандай тегтер қолданылады?
- Фондық сурет құру үшін қандай тегтер қолданылады?
- Қандай тегтер көмегімен суретті реттеуге болады?
Зертханалық жұмыс №5
Жұмыстың мақсаты:Гиперсілтеме жасауды үйрену
1. белгілі бір құжаттарға сілтеме
Басқа құжатқа сілтеме мәтін(сөз) немесе сурет те болуы мүмкін.
<A HREF=”?”> сілтеме үшін мәтін (сөз немесе сурет) </A> -құжатқа сілтеме жасайтын бұйрық, сұрақ белгісінің орнына, біз сілтеме бойынша баратын құжаттың жолы және толық аты(мұнадағы жолды көрсету тәсілі суреттегімен бірдей).
Мысал:
<a href="prf.html">менің суреттерім</a> - сілтеме жасап отырған prf.html құжатымыз осы құжат орналасқан директоорияда(папка) орналасқан
<a href="photos/prf.html">менің суреттерім</a>-құжат /photos поддиректориясында орналасқан
<a href="http://www.homepage.ru/prf.html">менің суреттерім</a> - құжат орналасқан http://www.homepage.r сайтына сілтеме
<p><a href="http://www.homepage.ru/prf.html"><img src=”фото.jpg” width =60 height=52 border=4></a></p> - суреттен сілтеме жасау мысалы (графикалық сілтеме)
1 ТАПСЫРМА:
3. lab4.htmlорналасқан папкадан lab5.html жаңа құжатын құрыңыз.
4. lab5.html құжаты, беттің оратасында өлшемі 130х60 және жақтаудың қалыңдығы 4 пиксель болатын 3 суреттен тұрады.
5. lab4.html құжатының соңына "Хочешь посмотреть другие картинки?" сөйлемін енгізіңіз
6. lab4.html құжатындағы осы сөйлеммен lab5.html құжатына сілтеме жасаңыз:
<br><a href="lab5.html"> Хочешь посмотреть другие картинки? </a>
7. Браузерден өз сілтемеңізді қараңыз және тексеріңіз.
8. Жоғарыдағы мысалды қолдана отырып lab5.html құжатындағы барлық суреттерден lab4.html құжатына сілтеме жасаңыз.
2.Сол беттегі нысандарғы сілтеме.
<A NAME="?"></A> - NAME атрибуты құжатта бөлімшелер жасақтауға мүмкіндік береді. Кейін сол бөлімдерге сілтеме жасауға болады, Сұрақ белгісінің орнына бөлім аты жазылады.
<A HREF=”#?”>бөлімге сілтеменің аты</A>, сұрақ белгісінің орнына NAME-да берілген бөлімнің аты.
Мысал:
(1) - <a name=”шаңсорғыштар”></a>
<A HREF="#шаңсорғыштар">мәтіндегі шаңсорғыштар сөзіне өту</A>.
(2) - <a name=”top”></a> - беттің басына сілтеме
<a href=”#top”>құжаттың басына көшу </a>
(3) - <a href=”products.html#пылесосы”>шаңсорғыштар түрі</a> -
Басқа құжат немесе беттерден сілтеме жасалған беттің белгілері
2 ТАПСЫРМА:
1) index.htm құжатын ашыңыз.
2) <body> дан </body>-ға дейін, буферді қолдана отырып негізгі мәтіннің 4 көшірмесін жасаңыз ( заголовкасыз).
3) 2 бөлім жасақтаңыз <a name="top"></a> және <a name="bottom"></a>. Құжаттың басында және соңында.
4) Құжат мәтініне «Вернуться к началу документа» және «Перейти в конец документа» сілтемелерін енгізіңіз. Бірінші сілтеме нәтежесінде құжаттың басына көшу керек, ал екінші сілтеме – құжаттың соңына апарады (жоғарыдағы мысалдарды қараңыз).
5) Нәтежені браузерден қараңыз.
6) Өздігіңізден құжаттың ішінде бөлімше құрып оған сілтеме жасаңыз.
2. 
Сілтеменің түсі.
|
VLINK атрибуты– қолданушы таңдаған сілтеменің түсі
ALINK атрибуты– белсенді(басылған) сілтеменің түсі
Мысалы:
<body text=#336699 bgcolor=#000000 link=red alink=green vlink=#339999>
3 ТАПСЫРМА:
1) Негізгі, таңдалған және беленді сілтемелер үшін өз түсіңізді таңдаңыз.
5.Web – беттің браузердің жаңа терезесінде ашылуы.
TARGET=?атрибуты, терезенің атын білдіреді(өоздігінен беріледі)
Мысалы:
<br><h1><a href="prf.html" Target=prf>менің фотоларымды қарау</a></h1> - сілтеме бойынша мәлімет prf жаңа терезесінде ашылады
<br><h1><a href="prf.html" Target=_blank>менің жотоларымды қарау</a></h1> - сілтеме бойнша мәліметтер атсыз терезеде көрінеді
Ескерту:
Егер бірнеше гиперсілтеме мәліметтерді бір терезеден көрету керек болса, онда ол терезелердің барлығы үшін Target-те бір атты бірнеше рет қайталаңыз немесе <head></head> арасына <base target=?>жолын жазыңыз, сұрақ белгісінің орнына сайттың барлық сілтемелері үшін ортақ есім беріледі.
4 ТАПСЫРМА:
1) lab4.html құжатында "Здравствуйте" сөзіне белгі беріңіз.
2) Осы белгіге алдыңғы құрылған .html форматтарындағы құжаттардың бірінен сілтеме жасаңыз.
Сілтеме бойынша барлық мәліметтер жаңа беттен ашылуы керек.
ҚОСЫМША:
3. Белгілі бір құжаттарға сілтеме.
Мысал:
<br>бұл жерде Шарля Азнавурдың андер жинаңы бар(формат MPEG3)
<a href=”Шарль Азнавур.exe”>бас, жүкте және ләззат ал</a>
4. Электрондық почта адресіне сілтеме.
<A HREF=mailto:?> - Сұрақ белгісінің орнына тиісті электрондық почта адресін енгізіңіз.
Мысал:
<a href=mailto:webmaster@classicalComposers.com>электронды почтаға хабарласуыңыз сұралады.</a>
<a href="mailto:pochta@mail.ru"> pochta@mail.ru – хат жазыңыз </a>
Бақылау сұрақтары:
- Қандай тег көмегімен гиперсілтеме жасалады?
- Гиперсілтемеде қандай атрибуттар қолданылады?
- <TARGET> атрибуты нені білдіреді?
Зертханалық жұмыс №6.
Жұмыстың мақсаты:кесте тегтерін үйрену, әр түрлі кесте құру
1. Қарапайым кесте және калонка құру
<table></table> - кестенің басталу және аяқталу тегтері
<tr></tr> - кесте жолы
<th></th> - Кесте бағанының аты (ортамен тураланған қою қарапайым ұяшық)
<td></td> - кесте бағаны (қарапайым ұяшық)
Кесте құру үшін келесі іс-әрекеттерді орындау керек:
1.
<table>
<tr></tr>
<tr></tr>
………………
</table>
2.
<table>
<tr>
<td></td>
<td></td>
<td></td>
………….
</tr>
<tr>
<td></td>
<td></td>
<td></td>
……………
</tr>
………………
</table>
3.
<table>
<tr>
<td>1x1</td>
<td>1x2</td>
<td>1x3</td>
…………….
</tr>
………………………
</table>
Ескерту:
1. Егер ұяшықта кесте жолының немесе бағанының заголовкасы берілсе, онда <td> тегінің орнына <th>тегін қолданған жөн
2. колонока құру үшін (үнсіз келісім бойынша ортамен тіктелген) бір жолдық кете құру керек.
1 ТАПСЫРМА:
1-мысалдан кесте құрыңыз: