HTML құжаттар құру мен түзету

Пән: Информатика, Программалау, Мәліметтер қоры
Жұмыс түрі: Реферат
Тегін: Антиплагиат
Көлемі: 14 бет
Таңдаулыға:

Мазмұны

Кіріспе . . . 3
1 Негізгі бөлім . . . HTML құжаттар құру мен түзету . . . 4
Тапсырма(А) . . . HTML негіздері . . . 10
Тапсырма(В) . . . Жие қолданылатын тег және атрибуттер тізімі . . . 11
Тапсырма(С) . . . HTML-де кесте жасау . . . 12 2 . Қортынды бөлім . . . 13
3. Пайдалынған әдибеттер . . . 14

Кіріспе

HTML тілі.

HTML тілін британ ғалымы, Тим Бернерс-Ли 1986-1991 жылдары Женев (Швейцария) Еуропалық ядерлік зертеу орталығында жасалынған болатын. HTML алғашында, ғылыми және техникалық документацияларды халық арасында алмастыруға арналған тіл ретінде жасалған. HTML көмегімен әдемі жасалған документті оңай және тез жасауға болады. Құрамының өзгеруінен басқа HTML-ға гипермәтіндерді оқу қасиеті қосылған. Бейнематериалдық қасиеттер сосын қосылған. Қазақстан Республикасының білім беру жүйесін ақпараттандыру еліміздің даму стратегиясының негізгі бағыттарының бірі, себебі ХХІ ғасыр - білім беру жүйесін ақпараттандыру ғасыры.

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

Бүгінгі таңда компьютерлік дизайн, Web-дизайн, жүйелік программалушы, администратор және тағы басқа мамандардың қажет екендігін түрлі жарнамалық газеттерден, бұқаралық ақпарат құралдарынан да көруге болады. Аталған мамандықтарды қалай дайындап, оларға қандай программалық құралдарды үйрету арқылы жетілдіруге болатыны әдістемелік жұмыстың өзекті мәселелерінің бірі болып отыр. Интернет-жобаларға өсіп жатқан инвестициялар, Web-сайттардың күрделі білімдік, ғылыми, комерциялық мүмкіндіктері. Интернет технологиялар төмендегі жолдармен дамып келе жатыр.

Негізгі бөлім

Тақырыбы : HTML құжаттар құру мен түзету.

Тапсырма А. HTML негіздері.

HTML () - бұл құжаттарды кодтау үшін қолданылатын гипертекстік белгілеу тілі. HTML ді көбі программалау тілі деп ойласа да, бұл программалау тілі емес. HTML - мәтінді белгілеу тілі.
HTML құжаттарды көру үшін браузерларды қолданамыз. Браузер-программалардың саны өте көп, мысалы көп таралғандар Netscape Communicator, Microsoft Internet Explorer, Opera.

HTML тiлiнде колданылатын командаларды "тег” деп айтамыз. HTML тiліндегi тегтер екi топқа бөлiнедi: жұпты, жұпсыз.

Жұпты тегтер дегенiмiз, бiр тег ашылса, келесi тег оны жабады. Мысалы,
<html> тегтiң жұмысын ашады да келесi </html> тегi оны жабады. <title> ашылуы, </title> жабылуы. Жұпсыз тегтер дегенiмiз, тег ашылады да қолданыла бередi. Мысалы, <IMG> т. с. с.

Көрсетілген мысалдарды компьютерде көрү үшін мәтінді Блокнот программасына теріп, оны htm түрінде сақтаңыз. Файлды браузерде ашыңыз.
Құжаттың структурасы HTML құжаттың негізгі структурасы төмендегідей:
<HTML>
<HEAD>
<TITLE>
…
</title>
</head>
<BODY>
…
</body>
</html>
HTML-тег атрибуттар тізімінен тұрады. Тег тексті үшбұрышты жақша ішінде жазылады.

Мысалы: <FONT face=аrial>Менің бірінші бетім</font> - бұл жерде <FONT> - тег, face - атрибут, arial - атрибуттың мәні. Кез келген HTML құжат <HTML> тегімен басталып, </html> тегімен аяқталу керек. Бұл тегтер браузерға HTML құжатын көрсетеді. Құжат болса қарапайым ASCII кодындағы мәтіндік файл. <HTML>, </html> тегтер болмаса браузер программалары құжатты танымай қалуы мүмкін.

<HTML>, </html> тегтерінің ортасына құжат денесі келеді. Құжат екі бөлімнен тұрады: тақырып бөлімі <HEAD> тегімен басталынатын және <BODY> тегімен басталынатын негізгі бөлімнен.

Тақырып бөлімі міндетті емес, бірақ ол жерде браузерге қажетті көп ақпарат болуы мүмкін.

<TITLE>, </title> тегтерінің арасында құжаттың аты жазылады, сол сөз терезенің тақырып жолына шығады.

Мысалы:
<TITLE>Моя первая страница</title>

<HEAD> бөліміне тағы <META> тегтерді қолдануға болады, олар сайтты интернет желісінде тез табылу үшін пайдалынады.

Мәтінді форматтау тегтері

Құжатта тақырыптар <Hi>, </hi> тегтерімен жасалынады, бұл жерде і=1 болғанда ең үлкен тақырып жазылады, і=6 болғанда - ең кіші.

Мысалы,
Көрінетін мәтін

HTML де жазылуы

Заголовок1
<H1> Заголовок1 </H1>

Заголовок2
<H2> Заголовок2 </H2>

Заголовок3
<H3> Заголовок3 </H3>

Заголовок4
<H4> Заголовок4 </H4>

Заголовок5
<H5> Заголовок5 </H5>

Заголовок6
<H6> Заголовок6 </H6>

Абзац енгізу үшін <P>, </p> тегтерін қолданады, мәтіннің сол жақ, ортада, оң жақта орнату үшін align атрибуты пайдалынады.

Мысалы:
<P align=center>Менің бірінші бетім</p>

«Менің бірінші бетім» сөйлемі беттің ортасына орналасады.
Align дің мәні тағыда left (сол жақ), right (оң жақ) болуы мүмкін.
<FONT> тегінің көмегімен біз мәтіннің шрифтің, көлемін, түсін белгілейміз. Ол үшін атрибуттарды пайдаланамыз.

Мысалы:
<P align=center>

<font face=Arial size=5 color=blue>Менің бірінші бетім</font>

Осындай жол жазғанда Web бетімізде arial шрифтімен, 5-көлемде, көк түсті

«Менің бірінші бетім» деген сөйлем шығады.

Жолды бөлү үшін <BR> тегін қолданса болады, мысалы:

<P> Ана тілін - арың бұл,

Ұятын боп тұр бетте<BR>

</p>
Қаратырылған әріптерді пайдалану үшін мәтінді <B>, </b> тегтерінің ортасына аламыз, қиғаш әріптер үшін - <I>, </i>.

Мысалы:
Көрінетін мәтін

HTML де жазылуы

Менің бірінші бетім

Менің <b> бірінші </b> бетім

Менің бірінші бетім

Менің <i> бірінші </i> бетім

Менің бірінші бетім

Менің <u> бірінші </u> бетім

<PRE>, </pre> тегтері мәтін редакторда қандай жазылған болса, сол бойынша браузерге шығарады, мысалы:

<PRE>
Ана тілін - арың бұл,

Ұятын боп тұр бетте.

Өзге тілдің бәрін біл,

Өз тіліңді құрметте

</pre>
Тізім
Нөмірленген тізімді ұйымдастыру үшін <OL> және <l1> тегтері қолданылады.
<OL> Қолданылған әдебиеттер тізімі

<LI> Полонская Е. П. Самоучитель HTML

<LI> Мержевич В. Создание Web страниц </li>

</ol>
Егер тізім номерін керекті бір номермен бастау керек болса онда start атрибутын пайдалынамыз, мысалы:

<OL start=5> Қолданылған әдебиеттер тізімі

<LI> Полонская Е. П. Самоучитель HTML

<LI> Мержевич В. Создание Web страниц </li>

</ol>
Тізімдің түрін өзгерту үшін type атрибуты көмектеседі, мысалы номерлерді латын цифрларымен жазу үшін төмендігідей жазамыз

<OL type=I> Қолданылған әдебиеттер тізімі

<LI> Полонская Е. П. Самоучитель HTML

<LI> Мержевич В. Создание Web страниц </li>

</ol>
Маркерлік тізімді жазғанда <UL> тегін пайдаланады, маркердің түрін өзгерту үшін type атрибутын. Оный мәні кестеде көрсетілген

disc
дөңгелек
circle
шеңбер
square
квадрат
<UL type=disc>

<LIt> дөңгелек

</ul>
<UL type=circle>

<LIt> шеңбер

</ul>
<UL type=square>

<LIt> квадрат

</ul>

Тапсырма B. Жие қолданылатын тег және атрибуттер тізімі

Тег
Мәні
<HTML></HTML>
Беттің басымен аяғы

<HEAD></HEAD>
Беттің тақырыбы

<TITLE></TITLE>
Беттің аты

<BODY></BODY>
Беттің негізгі бөлімі

<Hі></Hі>
Тақарап (і 1 ден 6 ға дейін өзгереді)

<P></P>
Абзац
<P ALIGN=”left”></P>

Абзаты теңістіру

<BR>
Жолды ауыстыру

<HR>
Гаризонтал түз сызық

<B></B>
Жуан әріптер

<I></I>
Қийғаш әріптер

<SUB></SUB>
Жоғарғы индекс

<SUP></SUP>
Төменгі индекс

Шрифт көлемі

Шрифт түсі

Шрифт гарнитурасы

Сурет орналыстыру

Суретке коментрария беру

Суретті фон ретінде орналыстыру

Фон түсі

Мәтін түсі

Сілтеме түсі

Өтілген сілтеменің түсі

<A HREF=”URL”>TEKCT</A>

Басқа бетке сілтеме

<A HREF=”#*”>TEKCT</A>

Осы беттегі мәтінге сілтеме

<UL><LI></UL>
Маркірленен тізім

Маркер түрі

<OL><LI></OL>
Номерленген тізім

Номер түрі

Тізімдің бірінші нөмірі

<DL>

Тапсырма С. HTML-де кесте жасау.

Web-құжатының негiзгi бөлiктерiнiң бiрi - кесте. Ол тiктөртбұрыш бағаналар мен көлденең орналасқан жолдардан тұратын торлар жиыны түрiнде қарастырылады. Жол мен бағанның қиылысы ұяшық деп аталады. Бiр ұяшықта мәтiн, сурет немесе басқа бiр шағын кесте орналаса алады. Кесте келесi бөлiктерден тұрады:

• кесте тақырыбы;

• бағаналар тақырыптары;

• ұяшықтар.

Кесте жолдар тiзбегi бойынша бiртiндеп толтырылады (солдан оңға қарай жол соңына дейiн, сонан соң келесi жолға көшу) . Әрбiр ұяшыққа мәлiметтер енгiзiледi. Боя ұяшық жасау үшiн бос орын таңбалары енгiзiлуi тиiс.
Қарапайын 2*3 кестесін жасау үшін төменгі тегтер жиынын қолдануға болады:

<TR>
<TD> мәтін</td>

<TD> мәтін</td>

</tr>
<TR>
<TD> мәтін</td>

<TD> мәтін</td>

</tr>
</table>

Бұл жерде border кесте сызықтарының ені.

Кестенің ұяшықтарының енін пайз арқылы өзгерту үшін width атрибутн қолданса болады, мысалы:

Баннерді жасау

Банерлік жарнама - интернеттегі жарнаманың ең ежелгі түрлерінің бірі.

Плакат - жарнама ақпараттың графикалық тасушысы, тікбұрышты пішінді, анимация ретінде жасалынады, gif форматтағы файлға негізделенеді.

Бергі уақытта плакаттар технологиясы кеңейтіп жатыр flash және java плакаттар, осы технологиялар қолдана отырып жақсы көрінеді және өз намысы бар. Баннерлік жарнама адамдарға тауар немесе қызмет көрсету туралы ақпарат беру мақсатынан басқа да имидждік жасаушылықты атқарады.

HTML дің негізгі қасиеті ретінде оның басқа құжаттарға сілтемеу жасау мімкіндігі айтуға болады. HTML құжатынан алысқа орналасқан компьютерге, құжаттың ішіндегі белгілі бір орынға, HTML құжатына, басқа бір сайтқа сілтеме орнатуға болады. Сілтемені ұйымдастыру үшін <A href> тегі қолданылады.

Мысалы,
<A href=penjim. narod. ru>Пенжим сайтына сілтеме</a>

Бұл мысалда біз www. penjim. narod. ru сайтына сылтеме жасадық.
Сілтеме мәтін түрде және сурет (кнопка) түрде болуы мүмкін. Сурет түрде орнату үшін <A> </a> тегтерінің ортасына суретті <IMG> тегімен орнату керек.

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

Практикады әдетте Web-сайт жасау HTML редакторларды пайдаланады. Оларды екі топқа бөледі.

Бірінші үлкен топтың Web-сайт жасау программалары HTML-тілінің негізінде жұмыс істейді. Осындай программалар орта және үлкен сайттарды даярлау уақытын қысқартады және даярлау кезеңінің тиімділігін көтереді. Арнайы HTML-редакторлердің жұмысты жеңілділетін және тездететін қосымша мүмкіндіктері көп. Бұл топқа төменгі программалар кіреді:

HTML генератор 1. 3 ;
Magic HTML Studio 2. 0;
Macromedia Dreamweaver;

Екінші үлкен топқа WYSIWYG (ағылшын тілінен "what you see is what you get” - не көрсең соны аласың) редакторлері кіреді. Бұл программаларды тағыда визуалды редакторлар деп айтады.

Осындай программалар графикалық интерфеске ие. Бұл прораммалардың бастапқы махсаты дизайнерді HTML тегтерінен босату болған. Кәзірге замандағы визуалді HTML-редакторлар дизайнерді көптеген әрекеттерде басатады. Осындай артықшылықтарына қарамастан кемшілігі бар - олар таза HTML кодын жасамайды, оған артық және «фирменный» тегтерді қосады. Көріп отырсыздар, WYSIWYG редакторларды қолданы HTML тегтерін қолмен жазуды құтқармайды, демек, Web-сайттарын жасау үшін HTML тілінің кем дегенде негізін білу керек.

WYSIWYG программаларыдың тізімі:

Microsoft Front Page.

HTML тілінің атқаратын қызметі .

Web - парақтары экранда ықшам түрде безендіріліп, көрсетілгенмен, HTML тілі мәтіндерді пішімдеп көрсететін тілге жатпайды. Өйткені әрбір тұтынушы әртүрлі компьютерлерді пайдаланады. Сол себепті жаңа ғана зауыттан шыққан бір компьютердің Windows жүйесінде жұмыс істей алатын броузері бар болса, екінші бір тұтынушы компьютері тек MS DOS жүйесінде жұмыс істейтін ескі броузерді пайдалануы мүмкін. Бұл екеуінің көрсету мүмкіндіктері әртүрлі болғандықтан, бір файл екеуіне 2 түрлі болып көрсетіледі. Ал үшінші компьютердегі Web - парақтың мәтіндері зағиптарға арналған. Брайль қаріптері арқылы берілсе, оның нәтижесі тіпті басқаша болады. Құжаттарды әртүрлі тұтынушының әртүрлі құрылғыларда және әртүрлі броузер программалармен көретіндіктерін ескерсек, HTML тілін мәтіндерді форматтау тәсілдерін жазуға арналған тіл деп атауға болмайды. Ол Интернеттегі мәтін бөліктерінің атқаратын қызметін анықтап, соларды әрбір тұтынушыға бейімдеп жеткізе алатын құжатты функционалды түрде белгілейтін тіл болып табылады.

HTML командалары.

HTML тілінің бастапқы мәтінді белгілейтін командалары тег (tag) деп аталынады. Тег символдар тізбегінен тұрады. Барлық тег «кіші» (<) символдарынан басталады да, «үлкен» (>) символымен аяқталады. Осындай қос символ тізбегі бұрыштық жақшалар деп те аталады. Ашылатын бұрыштық жақшадан соң команда аты болып табылатын түйінді сөз - тег орналасады.

... жалғасы

Сіз бұл жұмысты біздің қосымшамыз арқылы толығымен тегін көре аласыз.