HTML гипертексті

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

HTML деген не?

HTML термині (HyperText Markup Language) "гипертексттерді маркерлеу тілі" деген мағына береді. HTML-дің алғашқы версиясын Европадағы физикалық элементарлы бөліктер лабороториясының қызметкері Тим Бернерс-Ли ойлап тапқан.

Уақыт өте келе HTML-дің бірінші нұсқасы өзгерістерге ұшырады. HTML версиялары мен спецификациялары ңөмірленген болды. Танымал спецификациялар 2. 0, 3. 0 және 3. 2. HTML-дің казіргі спецификациясын W3C (http://www. w3. org/) серверінен табуға болады.

1997жылғы 11 қантардағы 3. 2 спецификациясы http://www. w3. org/pub/WWW/TR/REC-html32. html орналасқан. Осы спецификацияның орысша нұсқасы http://www. yi. com/home/ChuvakhnNikolai/html32. htm орналасқан.

Нұсқаулықта жазылғандардың бәрі HTML спецификациясының кез-келгенін қолдайтын бағдарламалық қамтамамен жұмыс істейді. Әрине бұл үшін кейбір детальдарді елемеуге тура келеді. Бірақ сіздің құжаттарыңыз дұрыс жұмыс істейтіндігіне және интерфейсі ыңғайлы болатындығына кепілдік береміз.

HTML-ді игеру үшін сізге не керек?

HTML -ді игеру үшін сізге 2 нәрсе қажет: кез-келген браузер, яғни HTML файлдарды көру үшін. Мысалы Netscape Navigator.

Кез-келген тексттік файлдарды өңдеуші. Егер сіздің компьютеріңізде Windоws орнатылған болса, онда Notepad-ті қолдансаңыз болады. Тексттік редакторды біз HTML файлдарды әзірлеу үшін, ал браузерді жасалған жұмыс нәтижесін тексеру мақсатында қолданамыз.

Алғашқы HTML файлдарды өзіңіздің локальдік дискіңізде жасайсыз. Яғни сіз жұмыс жасайтың компьютеріңіз интернет желісіне қосылмасада болады. Бір HTML файл Notepad-та да Netscape Navigator-та да ашық тұруына болады. Notepad-тағы өзгерісті сақтағаннан кейін браузердегі Repload батырмасын басу арқылы HTML файлдағы өзгеріс нәтижесін көре аласыз.

HTML файл редакторлары туралы маңызды мәліметтер:

Казіргі таңда HTML редакторларының 2 түрі кең қолданылады.

“Не көресің, соны аласың” типті редакторлар (Netscape Navigator Gold, Microsoft Front Page) . Microsoft Word немесе Word Perfect типті тексттік процессорлар жұмысы секілді қолданушы жұмыс жасап отырған документтің ішін көре алмайды. Бірақта Microsoft Word немесе Word Perfect-те жасалған құжатты HTML құжатқа айналдыратын көптеген конвертерлер бар.

HTML тексттердің жеке редакторлары (HotDog, Ken Nesbitt Web Editor және тағы басқа) . Жұмыс кезінде қолданушы HTML файлдың ішін көре алады және оны қолмен өзгерте алады. Мұндай редакторлар мен жұмыс Microsoft Visual Basic немесе Borland Delphi интерактивті бағдарламалық орта жұмысына өте ұқсас.

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

HTML-құжат. HTML командаларымен танысу

HTML-құжаты қалай құрылады

HTML-құжаты -*. htm кеңейтілімі бар қарапайым тексттік құжат (Unix-жүйелері *. html кеңейтілімі бар құжаттарды сақтау мүмкін) . Міне, ең қарапайым HTML-құжаты:

<html>

<head>

<title> Мысал 1 </title>

</head>

<body>

<H1> сәлем! </H1>

<P> Міне, ең қарапайым HTML-құжаты </P>

<P> Бұл HTML файл Notepad-та да Netscape Navigator-та да ашық тұруына болады. Notepad-тағы өзгерісті сақтағаннан кейін браузердегі Repload батырмасын басу арқылы HTML файлдағы өзгеріс нәтижесін көре аласыз. . </P>

</body>

</html>

Егер қаласаңыз бұл мысалды дәл казір жасап көруге болады.

Поэтому наш пример вполне мог бы выглядеть и вот так: түсінуге ыңғайлы болу үшін қосымша көшүлер қолданылған, бірақ бұл міндетті емес. Браузерлер мұндай көшүлерді елемейді Сондықтан біздің мысалымыз осылай жазылуынада болады:

<html> <head> <title>мысал 1</title> </head> <body> <H1>сәлем!</H1> <P> Бұл HTML файл Notepad-та да Netscape Navigator-та да ашық тұруына болады. Notepad-тағы өзгерісті сақтағаннан кейін браузердегі Repload батырмасын басу арқылы HTML файлдағы өзгеріс нәтижесін көре аласыз. . </. </P> </body> </html>

Мысалда көріп отырғанымыздай құжатта қолданылатын барлық мәліметтер оның "<" және ">" белгілерінің арасындағы фрагменттерінде қарастырылған. Осындай фрагмент белгі деп аталады (ағылшынша - tag, "тэг" деп оқылады) .

Большинство HTML-меток - парные, то есть на каждую открывающую метку вида <tag> есть закрывающая метка вида </tag> с тем же именем, но с добавлением "/".

Міндетті белгілер

<html> белгісі HTML-құжатты ашу керек. Сәйкесінше </html> белгісі HTML-құжатты жабу керек.

Бұл белгілер құжаттың тақырыбының басы мен аяғын белгілейді. Құжат тақырыбынан басқа бұл белгі біз кейін қарастыратын құжаттық ақпараттарды қамтуы мүмкін.

<title> и </title> белгілерінің арасында құжат атауы жазылады. 64 символдан аспайтын тақырып тағайындауға кеңес береміз.

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

<Hi> ( i -1 ден 6 ға дейінгі сан) түріндегі белгілер тақырыптардың 6 түрлі денгейін анықтайды. Бірінші денгей тақырыбы ең үлкен, алтыншы деңгей ең кіші.

Мұндай белгілер абзацты көрсетеді. <P> және </P> арасындағы сөз бір абзац ретінде қарастырылады.,

<Hi> және <P> белгілерінде қосымша ALIGN атрибуты болуы мүмкін, мысалы:

<H1 ALIGN=CENTER>тақырыпты ортаға орналастыру</H1>

немесе

<P ALIGN=RIGHT>тақырыпты оң жаққа жылжыту</P>

ҚОС ЕМЕС БЕЛГІЛЕР

HTML-дің 2 негізгі ережесіне бағынбайтын белгілер: олардың барлығы қос емес, кейбіреулері міндетті түрде кіші әріппен енгізілуі тиіс.

<BR>

Бұл белгі абзацсыз келесі жолға көшүді жасайды. Өлендерді жазуда өте ыңғайлы (мысал 3) .

<html>

<head>

<title>мысал3</title>

</head>

<body>

<h3>Автор неизвестен</h3>

<P>Однажды в студеную зимнюю пору<BR>

Сижу за решеткой в темнице сырой. <BR> Гляжу - поднимается медленно в гору<BR> Вскормленный в неволе орел молодой. </P>

<P>И шествуя важно, в спокойствии чинном, <BR>

Мой грустный товарищ, махая крылом, <BR>

В больших сапогах, в полушубке овчинном, <BR>

Кровавую пищу клюет под окном. </P>

</body>

</html>

<HR>

<HR> белгісі көлденен сызықты сызады:

Белгі қосымша SIZE атрибуты (сызық қалындығы) және WIDTH атибуттарын қолданады. келесі мысалда көлденен сызықтың бірнеше түрі көрсетілген.

<html>

<head>

<title>мысал 4</title>

</head>

<body>

<H1>Коллекция горизонтальных линий</H1>

</body>

</html>

&-кезектер

"<" және ">" белгілері белгі басы мен аяқтарын анықтайды, ал оларды экранда қылый көрсетеміз? Бұл &-кезектер арқылы көрсетіледі. "<" символы &lt кезегі арқылы, ">" символы > арқылы көрсетіледі.

"&" (амперсанд) символы & арқылы белгіленеді.

Тырнақшалар (") " арқылы белгіленеді.

Кезектегі үтір нүкте міндетті тұрде қойылады, кіші әріптер қолданылады, яғни &QUOT; немесе &AMP; белгісі қолданылмайды.

Комментарилер

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

Физикалық стильдер

<B> және </B> белгісінің арасындағы мәтін қалың шрифтке ауысады. <I> және </I> белгісінің арасындағы мәтін қисық шрифтке ауысады

<TT> и </TT> белгісінің арасындағы мәтін жазылып жатқан машинка шрифтке ауысады

Логикалық стильдер

Ең кең тараған логикалық стильдер.

emphasis - акцент.

strong emphasis - қатты акцент.

Бастапқы тексттерді жазу үшін.

sample - үлгі

keyboard - пернетақта. .

variable -айнымалы. Айнымалыларды жазу үшін

мысал

<html>

<head>

<title>Пример </title>

</head>

<body>

<H1>Шрифтовое выделение фрагментов текста</H1>

<P>Теперь мы знаем, что фрагменты текста можно выделять

<B>жирным</B> или <I>наклонным</I> шрифтом. Кроме того, можно

включать в текст фрагменты с фиксированной шириной символа

<TT>(имитация пишущей машинки) </TT></P>

<P>Кроме того, существует ряд логических стилей:</P>

<P><EM>EM - от английского emphasis - акцент </EM><BR>

<STRONG>STRONG - от английского strong emphasis - сильный акцент </STRONG><BR>

<CODE>CODE - для фрагментов исходных текстов</CODE><BR>

<SAMP>SAMP - от английского sample - образец </SAMP><BR>

<KBD>KBD - от английского keyboard - клавиатура</KBD><BR>

<VAR>VAR - от английского variable - переменная </VAR></P>

</body>

</html>

ҚҰЖАТТЫҢ ІШІНДЕ МӘТІНДІ ОРНАЛАСТЫРУ. НОМЕРЛЕНГЕН ТІЗІМДЕРДІ ҚҰРУ

HTML көп абзацтарға бірдей сырт келбетін тағайындауға мүмкіндік береді. Абзацтарды тізімге біріктіруге немесе жөнделген күйі экранға шығаруға болады. Рет ретімен қарастырайық.

Номерленбеген тізім: <UL> . . . </UL>

<UL> және </UL> белгілерінің арасындағы мәтен номерленбеген тізім түрінде анықталады. воспринимается как ненумерованный список. Тізімнің әрбір жана элементін <LI> белгісімен бастаған жөн. Мысалы, келесідей тізім құру үшін :

Иван;

Ерлан;

БЗИС

Келесідей HTML-мәтін керек:

<UL>

<LI>Иван;

<LI> Ерлан;

<LI> БЗИС

</UL>

Назар аударыңыз <LI> белгісі қос белгі емес.

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

номерленген тізім құрылымы номерленбеген тізімге ұқсайды, тек жаңа элементті анықтайтын символ орнына сан жазылады. Алдынғы мысалды сәл өзгертсек:

<OL>

<LI>Иван;

<LI>Ерлан;

<LI>БЗИС

</OL>

Мынадай тізім пайда болады:

Иван;

Ерлан;

БЗИС

Анықтау тізімі: <DL> . . . </DL>

Анықтау тізімі басқа тізімдерден ерекшелінеді. Анықтау белгілерінде <LI> белгісінің орнында <DT> және <DD> белгісі қолданылады. Мысал қарастырайық. HTML-мәтіннің келесі фрагменті бар дейік:

<DL>

<DT>HTML

<DD>Термин HTML (HyperText Markup Language) означает 'язык маркировки гипертекстов'. Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли. <DT>HTML-документ

<DD>Текстовый файл с расширением *. htm (Unix-системы могут содержать файлы с расширением *. html) .

</DL>

Бұл фрагмент келесі түрде анықталады:

HTML

Термин HTML (HyperText Markup Language) означает 'язык маркировки гипертекстов'. Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.

HTML-документ

Текстовый файл с расширением *. htm (Unix-системы могут содержать файлы с расширением *. html) .

Егер анықталатын термин қысқа болса модифициалианған <DL COMPACT> белгісін қолдана аламыз. Мысал қарастырайық. HTML-мәтіннің келесі фрагменті бар дейік:

<DT>А

<DD>Первая буква алфавита

<DT>Б

<DD>Вторая буква алфавита

<DT>В

<DD>Третья буква алфавита

</DL>

Экранға осылай шығады:

Первая буква алфавита

Вторая буква алфавита

Третья буква алфавита

Қойылған тізім

Бұл тізім кез келген басқа түрдегі тізімді қамтуы мүмкін. Бірақ бұл тізімді жиі қолданған тиімді емес.

Қойылған тізімдер жоспарларды жасаған кезде ыңғайлы. Мысал:

<html>

<head>

<title>Мысал </title>

</head>

<body>

<H1>HTML поддерживает несколько видов списков </H1>

<DL>

<DT>Ненумерованные списки

<DD>Элементы ненумерованного списка выделяются специальным символом и отступом слева:

<UL>

<LI>Элемент 1

<LI>Элемент 2

<LI>Элемент 3

</UL>

<DT>Нумерованные списки

<DD>Элементы нумерованного списка выделяются отступом слева, а также нумерацией:

<OL>

<LI>Элемент 1

<LI>Элемент 2

<LI>Элемент 3

</OL>

<DT>Списки определений

<DD>Этот вид списков чуть сложнее, чем два предыдущих, но и выглядит более эффектно.

<P>Помните, что списки можно встраивать один в другой, но не следует закладывать слишком много уровней вложенности. </P>

<P>Обратите внимание, что внутри элемента списка может находиться несколько абзацев. Все абзацы при этом будут иметь одинаковое левое поле. </P>

</DL>

</body>

</html>

Форматталған мәтін: <PRE> . . . </PRE>

<PRE> и </PRE> белгілерінің арасындағы мәтін экранда мәтінді еш өзгертусіз шығарады, яғны барлық көшулер, символдар және жол соңдарын қамти отыра. Бұл кестелерді құру үшін өте ыңғайлы.

Көшуі бар мәтін: <BLOCKQUOTE> . . . </BLOCKQUOTE>

<BLOCKQUOTE> және </BLOCKQUOTE> белгілерінің арасындағы мәтін экранда үлкейтілген сол жақ жолақша түрінде көрсетіледі.

HTML-ФАЙЛДАР ШЕТІ. HTML-ФАЙЛДАРДЫ БАЙЛАНЫСТЫРУ

Байланыстыру

Басынан аяғына дейін ғана оқуға мүмкіндік беретін қарапайым мәтінен гипертексттердің айырмашылығы мәтіннің бір фрагментінен екіншісіне тез өтуі. Көптеген ппрограммалық өнімдердің көмекші жүйелері дәл осы гипертексттік принцип бойынша жасалады.

HTML-да мәтіннің бір фрагментінен екіншісіне ауысу келесі түрдегі белгі көмегімен жасалады:

<A HREF="[өту адресі] ">белгіленген мәтін фрагменті</A>

Өту адресінің параметрі ретінде бірнеше типтегі аргументтер қолданылуы мүмкін. Ең қарапайымы өту керек басқа HTML құжатының атын көрсету. Мысалы:

<A HREF="menu. htm">Перейти к оглавлению</A>

HTML мәтіннің мұндай фрагменті құжатта басқа фрагментті шақыруға әкеп соғады. Яғны мысалда menu. htm құжатына сілтеме ашылады.

Назар аударыңыз егер өту адресінде каталог жолы жазылмаса, өту ағындағы каталогтың ішінде жүзеге асады. Егер өту адресінде сервер көрінбесе, өту ағындағы сервер ішінде жүзеге асады.

Бұдан өте маңызды тұжырым шығаруға болады. Яғни сіз бірнеше құжаттан тұратын үлкен құжат жасасаңыз олардың жұмыс істеуі үшін олардың барлығы бір каталогтта орналасса жеткілікті. Басқа компьютерде қосу үшін каталогпен бірге көшіру жеткілікті. Сондықтан құжатты толығымен интернетке қоспай әзірлегеннен кейін ғана құжаттар коллекциясын интернетке орналастыруыңызға болады.

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

<A HREF="http://www. yi. com/home/ChuvakhinNikolai/pr. htm"> Практическое руководство по HTML Николая Чувахина</A>

Кейде тек парақшаға немесе құжатқа ғана сілтеме жасап қоймай оның ішіндегі бір бөлігіне сілтеу жасау қажеттілігі туындайды. Ол үшін құжат немесе парақша ішіндегі қажетті бөлікке бекіту нүктесін немесе анкер орналастыру керек. Мысал қарастырайық.

1. htm құжатынан 2. htm құжатындағы бір фрагментіне сілтеме жасау қажет (файлдар бір каталогта орналасқан) . Алдымен 2. htm құжатында анкер орналастыру қажет:

<A NAME="AAA">Переход закончен</A>

Содан кейін 1. htm файлында сол анкерге өтуді белгілеуге болады:

<A HREF="2. htm#AAA">Переход к анкеру AAA</A>

Кейде сол анкерге өту өзінің 2. htm құжатындада белгілеуге болады - бұл үшін келесі фрагментті қоссақ жеткілікті:

<A HREF="#AAA">Переход к анкеру AAA</A>

Бұл аса үлкен құжаттарды жасау үшін өте ыңғайлы. Құжаттың басында анкерлерге нұсқаулары бар тақырыпты орналастырамыз.

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

Әзірше біз тек HTML-құжаттарға сілтемені қарастырдық. Бірақта басқада ресурстарға өту мүмкіндігі бар :

<A HREF="ftp://server/directory/file. ext">Выгрузить файл</A>

Мұндай сілтемені қолданған кезде ол файлдарды жіберу протоколын іске қосады және сервердағы directory каталогынан file. ext құжатын қолданушы локальді дискіне көшіруді бастайды.

<A HREF="mailto:user@mail. box">Послать письмо</A>

Мұндай сілтемені қолданған кезде қолданушы экранында жіберу керек хабарламаны жазатын терезе ашылады. То жолында хабарламаны жіберу керек адресті еңгіземіз.

Мысал қарастырайық.

<HTML>

<HEAD>

<TITLE>Пример </TITLE>

</HEAD>

<BODY>

<H1>Связывание </H1>

<P>С помощью ссылок можно переходить к другим файлам (например, к <A HREF="menu. htm">оглавлению этого руководства</A>) . </P>

<P>Можно выгружать файлы (например, <A HREF="ftp://yi. com/home/ChuvakhinNikolai/html-pr. doc">это руководство в формате Microsoft Word 2. 0</A>) по FTP. </P>

<P>Можно дать пользователю возможность послать почту (например, <A HREF="mailto:nc@iname. com">автору этого руководства</A>) . </P>

</BODY>

</HTML>

HTML-ҚҰЖАТТАҒЫ ТҮСТЕР ГАММАСЫ

HTML-құжаттағы түстер гаммасы <BODY> белгісінің ішінде орналасқан атрибуттар арқылы белгіленеді. Атрибуттар тізімі:

bgcolor

құжат фонының түсін анықтайды.

text

мәтіннің түсін анықтайды.

link

белгіленген мәтіннің тсін анықтайды.

vlink

Бұрын қолданылған құжат мәтінінің түсін анықтайды.

alink

сілтемелер түсін анықтайды.

Түс қосарланған 3 символ арқылы кодталады. Мысал:

bgcolor=#

Фон түсі

қызыл жасыл және көк түстердің қанықтығы бірдей - FF (бұл 255 санының оналтылық көрінісі ) . Нәтиже - ақ түс.

text=#

Мәтін түсі.

қызыл жасыл және көк түстердің қанықтығы бірдей - 00 (ноль) . Нәтиже - қара түс.

link=#FF

Гипертексттік сілтеме түсі .

Қанықтығы қызыл - FF (255), жасыл және көк - 00 (ноль) . Нәтиже - қызыл түс. .

Сонымен қатар <BODY> белгісі background="[имя файла] " атрибутын пайдалану мүмкін. Бұл фондық түсті немесе суретті тағайындайды.

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

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

HTML-құжаттың тақырыбы көптеген META-мәліметтерді қамтуы мүмкін. META-мәліметтерге мысал:

Бұл META-мәлімет description айнымалысын анықтайты, мұнда құжат туралы қысқаша мәлімет сақталған.

Бұл META-мәлімет keywords айнымалысын анықтайты, мұнда құжатты сипаттайтын кейбір керекті сөздер сақталады.

Refresh META-мәліметін белгілі бір құжатты бір серверден екінше серверге ауыстырғанда қолданады.

Мысал

<HEAD>

<TITLE>Пример 9</TITLE>

</HEAD>

<H1>Слайд-демонстрация цветовых гамм <BR>

с помощью META-инструкции Refresh </H1>

<P>Черный текст на белом фоне </P>

<P>[<A HREF="pr. htm">Возврат к оглавлению</A>

<A HREF="pr0006. htm">Возврат к главе 6</A>] </P>

</BODY>

</HTML>

<HEAD>

<TITLE>Пример 9a</TITLE>

</HEAD>

<H1>Слайд-демонстрация цветовых гамм <BR>

с помощью META-инструкции Refresh </H1>

<P>Белый текст на черном фоне </P>

<P>[<A HREF="pr. htm">Возврат к оглавлению</A>

<A HREF="pr0006. htm">Возврат к главе 6</A>] </P>

</BODY>

</HTML>

<HEAD>

<TITLE>Пример 9b</TITLE>

</HEAD>

... жалғасы

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

Ұқсас жұмыстар

HTML тілінің атқаратын қызметі, командалары

HTML тілінің редакторы

HTML атрибуттары

HTML тілінің тегтері

HTML құжатында графиканы қолдану

ЖЕЛІЛІК ТЕХНОЛОГИЯЛАР. ИНТЕРНЕТ. HTML ТІЛІНІҢ НЕГІЗДЕРІ ТЕОРИЯЛЫҚ СИПАТТАМАСЫ

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

Сайт жасау экономикасы

HTML тілінде тізімдер жасау тегтері

HTML тілі

Пәндер

Қазақ тілінде жазылған рефераттар, курстық жұмыстар, дипломдық жұмыстар бойынша біздің қор #1 болып табылады.

Ақпарат

Қосымша

Email: info@stud.kz