Сурет атрибуттары
|
Атрибут |
Жазылу форматы |
Атқаратын қызметі
|
|
ALT |
<IMG SRC="WAGON.GIF" ALT="сурет"> |
Сурет көрсетілмейтін броузерде оның орнына сурет аты (ол жайлы түсінік беретін мәтін ретінде) көрсетіледі
|
|
BORDER |
<IMG SRC="WAGON.GIF" BORDER="3"> |
Сурет қоршап тұратын жақтау сызығының қалыңдығын пиксельмен береді
|
|
ALIGN |
<IMG SRC="WAGON.GIF" ALIGN=TOP> |
Мәтінге байланысты суреттің орналасуын көрсетеді, төмендегі сөздердің бірін мән ретінде қабылдайды: ТОР – жоғары (мәтін суреттің жоғарғы жағында), MIDDLE - ортада, BOTTON – төмен, LEFT – сол жақта (сурет жолдың сол жақ шетінде), RIGHT – оң жақта (сурет жолдың оң жақ шетінде)
|
|
HEIGHT |
<IMG SRC="WAGON.GIF" HEIGHT=111> |
Суреттің биіктігін пиксельмен немесе терезе биіктігінің пайызымен береді
|
|
WIDTH |
<IMG SRC="WAGON.GIF" WIDTH=220 > |
Суреттің енін пиксельмен немесе терезе енінің пайызымен береді
|
|
VSPACE |
<IMG SRC="WAGON.GIF" VSPACE="8"> |
Суреттің жоғарғы және төменгі жақтарындағы бос аймақ мөлшерін пиксельмен береді
|
|
HSPACE |
<IMG SRC="WAGON.GIF" HSPACE="8"> |
Суреттің сол және оң жақ шеттеріндегі бос аймақ мөлшерін пиксельмен береді
|
11 тапсырма. Сурет атрибуттарын тағайындау.
ALT, BORDER, HEIGHT, WIDTH.атрибуттарын пайдалана отырып, өз қалауларыңызша RASP.HTM файлына бірсыпыра өзгерістер енгізіңіздер.
Ескерту. Суреттік файлдың көлемінің (байтпен берілген) өзгеруіне назар аударып отырыңыздар, өйткені ол Web-құжаттың Интернеттен компьютерге жүктелуіне қатты әсер етеді.
Тапсырма 12. Web-парақтарға фондық суреттер салу.
Фондық сурет — шағын төртбұрышқа орналасқан суреті бар графикалық файл. Броузерге фон ретінде тағайындалғанда, сурет көбейіп терезе аумағын толық алып тұрады.
Фон ретінде пайдаланылатын сурет <BODY> тәгінде көрсетіледі.
RASP.HTM файлына төмендегідей өзгерістер енгізіңіздер:
<HTML>
<HEAD> <H2 ALIGN="CENTER"> Менің алғашқы парағым </H2>
<TITLE> Алғашқы HTML файлы </TITLE> </HEAD>
<BODY BACKGROUND="fon1.GIF" TEXT="#330066">
<P ALIGN=CENTER>
<FONT COLOR="#008080"SIZE="7">
<B> Сәрсенбі күнгі </B> </FONT> <BR>
<FONT SIZE="6"> <I> сабақ кестесі </I> </FONT> </Р>
</BODY>
</HTML>
Осы файлдың жұмыс нәтижесі экранда төмендегі 6 суреттегідей болып бейнеленеді.
6 Сурет
Мұндағы графикалық fon1.GIF файлының экрандағы бейнесі төмендегідей.
7 Сурет
13 тапсырма. Кесте жасау.
Кесте тікбағыттағы бағаналар мен көлденең орналасқан жолдардан тұратын торлар жиыны түрінде қарастырылады. Бағана мен жол қиылысындағы төртбұрыш ұя (ұяшық) деп аталады. Бір ұяда мәтін, сурет немесе басқа бір шағын кесте орналаса алады.
Кесте үш бөліктен тұрады:
• кесте тақырыбы;
• бағаналар тақырыптары;
• ұялар.
Кесте біртіндеп жолдар тізбегі бойынша толтырылады (солдан оңға қарай жол соңына дейін, сонан соң келесі жолға кһөшу). Әрбір ұяға мәлімет енгізіледі. Бос ұя жасау үшін бос орын таңбалары енгізілуі тиіс.
Кесте тәгтері
1. <TABLE> ... </TABLE> HTML-құжат ішіне кесте салу үшін қолданылатын тәг.
Кесте алдында және соңында болуы тиіс.
<TABLE> тәгінің параметрлері:
BGCOLOR – фон түсі
BORDER – ұялар арасындағы сызықтың, яғни бордюрдің ені
WIDHT – кесте ені
Кесте ішінде орналасын тәгтер:
2. <CAPTION> ... </CAPTION> – кесте тақырыбын береді, оның параметрі ALIGN=TOP – тақырып кесте алдына орналасады және ALIGN=BOTTOM – тақырып кестеден кейін орналасады.
3. <TR> ... </TR> – кесте жолы. Оның параметрлері: BGCOLOR – осы жол торларының ішкі фон түсі; ALIGN=LEFT, RIGHT, CENTER – жол ішіндегі мәтіндерді солға, оңға және ортаға туралау; VALIGN=TOP, BOTTOM, MIDDLE – кесте жолы ішіндегі мәтінді вертикаль бағыт бойынша туралау.
4. <TD> ... </TD> – кесте бағанасы. Оның параметрлері: BGCOLOR – осы бағананың фон түсі; ALIGN=LEFT, RIGHT, CENTER – бағана ішіндегі мәтіндерді солға, оңға және ортаға туралау; VALIGN=TOP, BOTTOM, MIDDLE – бағана ішіндегі мәтіндерді вертикаль бағытта туралау; COLSPAN – бірнеше бағана торларын біріктіру, ROWSPAN – бірнеше жол торларын біріктіру.
5. <ТН> ... </ТН> – бағана тақырыбы. Оның параметрлері: BGCOLOR – Тақырып орналасқан ұяның фон түсі; ALIGN=LEFT, RIGHT, CENTER – көлденең бағытта туралау; VALIGN=TOP, BOTTOM, MIDDLE – тік (вертикаль) бағытта туралау; COLSPAN, ROWSPAN – бір ұя ішіне бірнеше бағаналар немесе жолдар торларын біріктіру; WIDHT – тақырып ұясының ені.
1. Блокнот программасын іске қосыңыздар.
2. Келесі мәтін жолдарын теріңіздер:
<HTML> <HEAD> <TITLE> ФНИ топтарының сабақ кестесі </TITLE> </HEAD>
<BODY BGCOLOR="#FFFFFF"> <P ALIGN=CENTER>
<FONT COLOR="RED" SIZE="6" FACE="KZ ARIAL">
<B> ФНИ – 1 топтарының сабақ кестесі </B>
</FONT></P> <BR>
<FONT COLOR="BLUE" SIZE="4" FACE=" Times New Roman">
<B> Дүйсенбі </B> </FONT> <BR>
<TABLE BORDER="1" WIDTH=100% BGCOLOR="#99CCCC">
<TR BGCOLOR="#CCCCFF" ALIGN=CENTER>
<TD> Уақыты </TD> <TD> ФНИ – 1 – 1</TD> <TD> ФНИ – 1 –2 </TD>
<TD> ФНИ – 1 –3 </TD> </TR>
<TR> <TD> 8-30 – 9-50 </TD><TD>Орыс тілі</ТD><TD>Информатика</ТD>
<TD> Тарих </ТD> </TR>
<TR> <TD>10-00 – 11-20</TD><TD>Математика</TD><TD>Геодезия </ТD>
<TD>Ағылшын тілі </ТD> </TR>
<TR><TD>11-30 – 12-50</TD><TD>Тарих</ТD><TD>Сызба геометрия </ТD>
<TD> Компьютерлік графика </TD> </TR>
</TABLE>
</BODY>
</HTML>
3. Файлды ФНИ.НТМ атымен сақтап, жауып тастаңыздар.
4. Сол файл белгішесін екі шертіп, Web-парақты Microsoft Internet Explorer броузеру арқылы шығарғанды, экранда төмендегі суреттегідей бейнені көресіздер.
8 сурет
4. Енді осы тәсілмен Сейсенбі күнге арналған сабақ кестесін ары қарай жалғастырып жасап шығу керек. Ол үшін бос жолдар аралығында орналасқан программа фрагментін көшіріп, екінші бос жолдан кейін орналастыру керек. Сонан соң екінші бөліктегі «Дүйсенбі» сөзін «Сейсенбі» сөзіне алмастырып, сабақ кестесін де екінші күнге сәйкес өзгертіп шығу қажет. Осындай жолмен апта күндерінің бәріне де арналған сабақ кестесін жасап шығыңыздар.
Тапсырма 14. Гипермәтіндік байланыстар орнату
HTML тілінің ең негізгі қасиеті ретінде оның басқа құжаттарға сілтеме жасау мүскіндігін айтуға болады.
Бір HTML файлынан мынадай басқа құжаттарға:
- алыста орналасқан компьютердегіHTML-файлға,
- ағымдағы HTML-құжаттың ішіндегі белгілі бір орынға,
- HTML-құжаты болмайтын кез келген файлға сілтемелер жасауға болады.
Сілтеме ретінде мәтінді немесе суретті пайдалануға болады.
Бір құжат аймағында сілтемелер жасау
Мұндай сілтемелер екі бөліктің болуын талап етеді, олар: белгі және сілтеме. Белгі сілтеме бойынша ауысып баратын осы құжат ішіндегі бір нүктені анықтайды. Сілтеме белгі атын пайдаланады. Броузердің алдын ала тағайындалатын параметрлеріне сәйкес сілтемелер басқа түспен ерекшеленіп тұрады немесе оның асты сызылады. Сілтеме сөздің түсін өзерту үшін <BODY> тәгінің LINK= ... және VLINK= ... атрибуттары пайдаланылады.
Сілтеме былай сипатталады:
<A HREF="#ДС"> Дүйсенбі </А>
Сілтеме арқылы ауысып баратын нүктедегі белгі (ДС) алдына # символы қойылады. Белгі атынан кейінгі “>” және “<” символдары арасына ауысу үшін тышқанмен шертілетін сілтеме сөз (“Дүйсенбі”) жазылады.
Осы Дүйсенбі гиперсілтеме сөзін шерткенде баратын нүктеде төмендегідей белгілер тұруы тиіс:
<A NAME="ДС"> Дүйсенбі </А>
1. Бұрынғы ФНИ.HTM файлын Web-парақтың алдыңғы жағына жазылатын апта күндерінің аттары жазылған кестелермен толықтырайық. Ол үшін
<FONT COLOR="RED" SIZE="6" FACE="KZ ARIAL">
<B> ФНИ – 1 топтарының сабақ кестесі </B>
</FONT></P> <BR> жолдарынан кейін мынадай тәгтер тізбегін жазайық:
<TABLE WIDTH=100%>
<TR> <TD>Дүйсенбі</TD> <ТD> Сейсенбі </ТD> <TD>Сәрсенбі</ТD>
<TD>Бейсенбі</TD> <TD>Жұма</TD> <TD>Cенбі</TD>
</TR>
</TABLE>
<BR>
...
2. Бұл фрагменттен кейін (RASP.НТМ файлында) Дүйсенбі сөзіне сілтейтін белгі қоямыз, яғни <B> Дүйсенбі </B> </FONT> сөздері орнына:
... <B> <A NAME="ДС"> Дүйсенбі </A></B></FONT> ... сөздерін жазу керек.
3. Енді кесте ішіндегі Дүйсенбі сөзіне гиперсілтеме жасаймыз, яғни <TABLE WIDTH=100%> <TR> <TD>Дүйсенбі</TD> <TD> Сейсенбі</TD> <TD> Сәрсенбі</TD>... сөздері орнына:
<TABLE WIDTH=100%>
<TR> <TD> <A HREF= "#ДС">Дүйсенбі</А> </TD>
<TD><A HREF= "#СС">Сейсенбі</А> </TD>
<TD><A HREF= "#СР">Сәрсенбі</А> </TD> ...сөздерін жазамыз.
4. Файлды дискіге жазып сақтаймыз.
5. Осының нәтижесінде алынған Web-парақты қарап шығыңыздар.
Э
кранда
9
суреттегі
көрініс бейнеленуі тиіс.
9 сурет
6. Енді Дүйсенбі сөзін, сонан соң Сейсенбі сөзін, т.с.с. күн аттарын тышқанмен таңдап шертіп көріңіздер. Гиперсілтемелердің дұрыс жұмыс істейтініне көз жеткізіңіздер.
15 тапсырма. Басқа HTML-құжатқа сілтеме жасау (1).
Ерекшеленіп тұрған сілтеме сөздерді шерту арқылы басқа файлдарға да көшуге болады. Төмендегідей сілтеме жасайық:
<А HREF="RASP.HTM"> ФНИ </А>
Файл атынан (RASP.НТМ) кейін “>” және “<”символдары арасында сілтеме сөз (“ФНИ”) орналасқан, осы сөзді шерту жолымен оның алдында аты көрсетілген файлға ауысуға мүмкіндік бар.
1. Броузер терезесіне RASP.HTM файлын жүктеңіздер.
2. Осы файлға төмендегідей өзгертулер енгізіңіздер:
<HTML>
<HEAD>
<TITLE> Менің алғашқы парағым </TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#330066">
<CENTER>
<FONT COLOR= "#008080" SIZE="7">
<B> Сейсенбі күнгі</B></FONT><BR>
<FONT SIZE="6"> <I> сабақ кестесі </I>
</FONT><BR>
<IMG HSPACE=150 VSPACE=10 SRC="ЧАСЫ.JPG">
<TABLE WIDTH=60%>
<TR><TD><A HREF="RASP.HTM"> ФНИ - 1 </А></TD> <TD> ФНИ - 2</TD> </TR>
<TR><TD> ФНИ - 3</TD> <TD> ФНИ - 4 </TD> </TR>
<TR><TD> ФНИ - 5 </TD><TD> ФНИ - 6</TD> </TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
3. Файлды сақтап, терезені жауып, оның нәтижесін броузер арқылы қарап шығыңыздар.
Экрандағы көрініс 10 суреттегідей болуы тиіс.
10 сурет
5. ФНИ – 1 гиперсілтемесін шертіңіздер, сонда ФНИ-1.htm файлына ауысуларыңыз керек. Артқа (Назад – броузердің жоғарғы сол жақ бұрышында) батырмасын шертіңіздер, сонда RASP.HTM файлына қайтып ораласыздар.
Тапсырма 16. Басқа HTML-құжатқа сурет арқылы сілтеме жасау (2)
1. ФНИ.НТМ файлының соңғы жағына алғашқы параққа – ФНИ топтарының сабақ кестесі (файл RASP.HTM) парағына сілтеме жасау қажет. Сілтеме ретінде төмендегідей түрде графикалық файлды пайдаланыңыздар:
... </TR>
</TABLE><BR>
<CENTER>
<А HREF="RASP.HTM"><IMG SRC="HOME.GIF" BORDER="0"></A>
</CENTER>
</BODY>
</HTML>
2. Осының нәтижесінде алынған Web-парақты қарап шығыңыздар. Экранда 11 суреттегідей парақ болуы тиіс.
11 сурет
Мұнда сілтеме рөлін оң жаққа және жоғары бағытталған тілсызық түріндегі сурет атқарады, ол HOME.GIF файлында жазылған.
17 тапсырма. Соңғы өзіндік тапсырма.
Өз топтарыңыз немесе отбасыңыз жайлы мәлімет беретін Web-парақ жасаңыз. Алғашқы параққа топ туралы, куратор мұғалімдеріңіз (ата-аналарыңыз) жайлы қысқаша әңгіме жазыңыздар. Бірге оқитын достарыңыз туралы мәліметті жеке парақтарға орналастырыңыздар. Алғашқы парақтан достарыңыз туралы мәлімет беретін парақтарға сілтемелер жасаңыздар. Достарыңыз туралы Web-парақтардан алғашқы параққа қайтатын сілтеме жасауды да ұмытпаңыздар.
Жақсы Web-парақты қалай жасауға болады
Web-парақтардағы мәліметтердің орналасуы қарапайым әрі логикалық түрде қарап шығуға, оқуға ыңғайлы болуы тиіс. Парақтардағы мәліметтердің оларды қабылдауға жеңіл болуының бір тәсілі – экран бетінде мәтін де, сурет те орналаспаған бірсыпыра бос орындардың қалдырылуы болып табылады. Парақта мәліметі көп болса, ол оқушыны жалықтырып жібереді.
Экрандағы ақпараттарды тізім немесе кесте түрінде жасауға тырысу керек, сонда маңызды мәліметтерді оңай тауып алуға болады.
3. Бір суреттен кейін бірден екінші сурет орналаспағаны дұрыс, олардың ара қашықтарын біркелкі етіп, араларында мәтіндік ақпараттар берген дұрыс.
4. Ақпарат бөліктерге бөлініп берілсе, оларды оқу, түсіну жеңіл болады. Абзацтардың да өте ұзын болмағаны дұрыс, олардың көлемділерін бірнеше шағын абзацтарға бөлген абзал.
5. Егер Web-парақ көлемі үлкен болса, онда құжат бөліктеріне жылдам ауысуға мүмкіндік беретін сілтемелер жасау қажет. Кейде бір мәселеге арналған ақпараттарды тақырыптарға бөліп, оның мазмұнын негізгі бір параққа жазып, ал әр тақырыпты басқа беттерге сілтемелер арқылы орналастыру керек
6. Суреттер мен графикалық бейнелерді пайдалану көптеген тұтынушыларды қызықтыруы мүмкін, бірақ суреттерді желі арқылы қабылдау ұзақ уақыт алатыны есте болуы керек. Егер бір әдемі суретті көру үшін 5 минуттай уақыт кететін болса, оның әдемілігі ешкімді де қызықтыра қоймас.
Web-парақты тексеріп тестіден өткізу
Серверге өз Web-парақтарыңызды орналастыру алдында оларды тест арқылы тексеріп алған жөн. Жасалған құжат алғашқы тексеруді, яғни “жергілікті тексеруді” өз қатты дискіңіздің аумағында өтуі тиіс. Тексеру кезінде әр түрлі броузерлерді пайдаланған абзал. Олардың бір-бірінен айырмашылығы әжептеуір болуы ықтимал.
Web-құжатты тексеруден өткізу кезінде мынадай жайттар есте болсын:
1. Емле қателерін тексеру. Мәтіннің жазылуын автоматты тексеру арқылы толық қарап шығу керек (ол үшін Microsoft Word редакторын пайдалануға болады, қазақша мәтінді тексеретін мүмкіндіктер де бар) немесе басқа кісіні қатесін тексеріп қарап шығуға шақырыңыздар.
2. Навигацияны (ауысуларды) тексеру. Әрбір парақта басқа құжаттарға, парақтарға ауысу мүмкіндіктері болуы тиіс, солардың дұрыс жұмыс істейтініне көз жеткізіңіздер.
3. Сыртқы файлдармен қатынасу тәсілдерінің дұрыстығын тексеру. Выясните, размещены ли Графикалық, дыбыстық және бейнефайлдарының өз орындарында тұрғанын қарап шыққан абзал, олардың сол орындарынан дұрыс жүктелетіндігіне көз жеткізіңіздер (файлдар адрестері дұрыс көрсетілуі тиіс). Графикалық мүмкіндігі жоқ броузерлерге арналған ауыспалы мәтіндік хабарламалардың бар екенін қарап шыққан артық болмайды.
4. Құжаттың жүктелу уақытының шамадан тыс ұзақ болмағанына көз жеткізіңіздер.
5. Басқа кісілердің сіздер жасаған Web-парақтарды қарап шығуын қамтамасыз етіңіздер. Сіздің құжатыңызбен таныс емес адамдардың парақтарыңызды бастан аяқ тексеріп шығуын өтіну керек. Кейде өздеріңіз ешқашан да таба алмайтын қателерді сыртқы көз жылдам байқайды.
Қорытынды
Біздің тапсырмаларда қарастырылған HTML командалары HTML тілінің орасан зор мүмкіндіктерінің шағын бөлігі ғана.
Web-құжаттарды командалар арқылы тек қарапайым мәтіндік редакторларда ғана емес, басқа да көптеген HTML-редакторларда дайындауға болады. Олардың бірнешеуін атап өтейік: Corel Web Desinger, Frontpage, Home Site, HotDog Webmaster, Hot Metal, Microsoft Word. Бұлардың қайсысын қолдану – ол өз құзырларыңызда. Бірақ Web-құжаттар жасаудағы ең соңғы өзгерістер мен штрихтар HTML тілінің командалары арқылы орындалатыны талас тудырмайтын ақиқат болып саналады.
Қолданылған әдебиеттер
1.Информатика и образование, №8,2000 Е. В. Давыдова,
2. Фролов А. В., Фролов Г. В. Глобальные сети компьютеров. М.: Диалог-МИФИ, 1996.
3. Пайк М. Internet в подлиннике. СПб.: BHV-Санкт-Петербург, 1996.
4. Перри П. Дж.Секреты World Wide Web. Киев: Диалектика, 1996.
5. Шарф Д. HTML 3.2: Справочник. СПб: Питер, 1998.
6. Вуд Л. Web-графика: Справочник.СПб: Питер, 1998.
Төмендегі кестеде түстер палитрасын пайдалану кезінде қолданылатын негізгі 16 түстің RGB форматындағы кодтары берілген.
1 кесте