Аппараттық және бағдарламалық қамтамасыз етуді орнату

Ережелер html жалпы ережелер он. HTML құжаттарын құру ережелері

Танктер әлемі ( World of Tanks, WOT) атақты MORTAL KOMBAT пен Контрді алмастырған культ ойыны. Бастапқыда ойыншыққа мән бермей, мен тіркелдім. Ойын қызықты, серпінді, күткеннен де асып түсті. Ойынға арналған көптеген нұсқаулықтар мен нұсқаулықтар, бейнелер - одан да көп. YouTube қызметі көрнекті танкерлердің әдемі шайқастарының ойынына толы.

[ағыл. гид – бағдар, бағдар, жол көрсету]

WOTИнтернетке қосылу сапасы мен күйіне талап қою компьютердің аппараттық құралдары... Драйверлерді тұрақты жаңартусыз тіпті жақсы компьютерде ойнау қиын. Танктер секіреді және дірілдейді. Танктің сұлбасы мен ұрыс суреті анық емес, көздеу мүмкін емес. Мен Windows жүйесін және видеокарта отынын төрт рет қайта реттедім, қолайлы нұсқаны таптым.

Үзіліс / Жылдамдықтың төмендеуі / желі қосылымыойын апат. Интернетте қажет емес бағдарламалық құралды компьютерде сақтамаңыз. Жаңарту, ол шайқастың ең сәтсіз сәтінде танк трафигін опасыздықпен жалмап тастайды.

Жаттығу алаңыжәне Жас жауынгерлер курсыөтті. Ойын ішіндегі алтын және несие түріндегі жүлделі капитал алды. Бұл дұрыс.

Ол сәттілік пен сәттілікке аңғал сенім артып, даңқты жеңістерге ұмтылды. Бірінші қателік! World of Tanks - жайбарақат ойын, жеңіс суық қандыларды, ал сәттілік есептеуді ұнатады.

Мен танк сатып алдым, саны қырық жеті. Екінші қателік! Мен жабдықты сатып алдым, көп. Ойна, шынымен - ештеңе.

Мен қымбат снарядтар мен жабдықтар сатып ала бастадым. Үшінші қателік! Қымбат снарядтар мен жабдықтар шайқаста минималды артықшылық береді және ойын валютасы- көз алдымызда ериді. Ақшаны үнемдеу керек.

Жабдықтарды сатып алып, бригадалар демобилизацияланды. Төртінші қателік! Бірінші деңгейде 100% экипаждар, оларды қорғау керек. Экипажды жаңарту - қиын жұмыс, бірақ танк күшейтілген экипажмен әлдеқайда жақсы ойнайды.

Мұқият талдаусыз ойнау мүмкін емес.

Тіркелгеннен кейін бір жылдан кейін ол жабдықты сұрыптау және оңтайлы ангарды таңдау үшін бірінші деңгейге оралды. Танктердің ұрыс стилі бірдей емес. Ұрыс стилі әр ойыншы үшін жеке. Техникалық сипаттамарезервуар сатып алғанға дейін және кейін бөлектеледі. Машина сипаттамалары (TTX) - конвенция. Жеке ұрыссыз танкті алу - бұл мүмкін емес міндет. Қорытынды - кезекпен ойнаңыз, жарамсыз көліктерді сатыңыз және сүйікті танктеріңізді ангарда қалдырыңыз. Бақытымызға орай, қырық жеті слот мүмкіндік береді. Цистерналарды қырық жеті ұяшықта сору - бұл ұзақ жұмыс. Мен асықпаймын! Менің басымда патшасыз жекпе-жек менікі емес.

Тіркелгіні тіркегеннен кейін бірінші деңгейге оралу таң қалдырды Танктер әлеміәйелі үшін. Оның ойынын көріп, мен айырмашылықты көрдім. Әйелдің (жаңадан) жаңадан пісірілген есебінде бірінші деңгейде «шаяндар» шынымен жорғалайды. Мен әйеліме (жаңадан) ұрыс техникасын беремін, мен шайқаста жеңемін және көптеген тапсырыстар аламын. Тағы бір нәрсе - жергілікті аккаунт (12 000 шайқас). Мұнда, бірінші деңгейде, мұндай батыл жігіттер бұзылған! Шамасы, Ұлы Беларусь Рэнді ( VBR) шайқас үшін взводты таңдау кезінде ойыншының тәжірибесі мен оның ойын рейтингі ескеріледі. Бұғы өлшегішімен шатастырмау керек. ФБР-де ойын взводын таңдау үшін ойыншының рейтингі біршама ерекшеленеді және оны бәрі біле бермейді. Бұғылардан айырмашылығы, көпшіліктің қарауына қол жетімді. УБР-дағы жау взводтары әлемдік теңдік қағидасы бойынша жасақталған. Бірінші деңгейдегі жолақтары бар және кландағы ойыншылар взводтары ешқашан «шаяндармен» (жаңадан келгендер) ойнамайды.

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

Жаңа құмарлықпен мен сүйікті ойыныма кірістім. Күніне он жекпе-жек өткізуді ережеге айналдырды. Танктер әлемішынымен тәуелді. мен шығамын жаңа деңгей- Алған әсеріммен бөлісемін. Бір нәрсе анық - ойын байыпты және байсалды көзқарасты талап етеді. Жаудың зеңбірегіне қарсы шыққан өгізмен жарылғанның өзі дөңгеленбейді. Мен бұған келіспеймін WoTәр адам өзі үшін, бұл ұжымдық ойын.

P.S. Дәптерсенің сүйіктің.
Мен өзімді супертанкшімін деп көрсетпеймін.

Мақала толығымен жаңартылмаған
10.2 және одан жоғары нұсқаларында ережелер мәтінін тікелей өңдеу кезінде сайт ережелері бар беттің атын тікелей қозғалтқыштың басқару тақтасында өзгерту мүмкіндігі қосылды. Дегенмен, сайт ережелері бар бет қалды. Ол бар және кез келген DLE сайтында http: //my_site/rules.html мекенжайында орналасқан
Бұл мекен-жайдан барлық шырындарды қалай сығу керек - оқыңыз

CMS DLE жүйесіндегі сайт ережелері бар бет

Сайт ережелерінің c беті жүйелік статикалық бет болып табылады. Ол қозғалтқышпен өңделеді және әдеттегі статистикалық бет сияқты жасалады. Тек оны жою мүмкін емес - оны қозғалтқышты әзірлеуші ​​қамтамасыз етпейді. Тіркелу кезінде сайт ережелерінің өзі өшірілген болса да, сайт ережелері бар бет әрқашан мына жерде қолжетімді: //my_site/rules.html Оны тапқан бірінші іздеу жүйесі құсып, түкіре бастайды. мәтін және атау. Бұл таңқаларлық емес. Өйткені, барлық DLE сайттарында - бірдей нәрсе.

Сайт ережелері бар бет сайт картасына енгізілгенде, оны іздеу жүйесі «қоқыс» деп санайды және есепке алынбайды. іздеу индексі, өйткені сайт ережелері барлық жерде бірдей дерлік. Сондықтан, DLE-де сайт ережелері бар бетке әдепкі бойынша тыйым салынады (жабылады). іздеуді индекстеуфайлда ( Тыйым салу жолы: /rules.html).

«Сайт ережелерінің» бірегейлігі

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

Жоқ, біреу Facebook немесе Twitter-де тіркелудің қандай да бір керемет немесе ерекше ережелерін көрді ме? Немесе олар Вконтакте мен Одноклассники сайттарында болуы мүмкін бе? Дәл солай!

1000 бірегей келушілері бар кейбір сайттар -
пайдаланушылар үшін өзінің бірегей ережелерін жаза бастайды.
Мендегідей, солай ең жақсы ережелерсайтта - бұл олардың толық болмауы.
Пайдаланушы қалыпты және адекватты болса, ол бәрін түсінеді.

Бет жоқ - проблема жоқ

Іздеуді индекстеуден беттер мен каталогтарды блоктау панацея емес екені ешкімге құпия емес. Қалай болғанда да, сайттың кез келген беті ерте ме, кеш пе іздеу жүйесімен «шайналады». Мысалы, дәл сол Яндексті алыңыз. Оның іздеу роботтары сайттан тапқандарының барлығын шығарады, содан кейін ғана олар сұрыптауға және іздеуге беттерді беру немесе бермеуге кіріседі. Яндекстің ол және оның роботтары сайттан қажетсіз материалды жүктеп алмайды деген әсерлі кепілдіктеріне қарамастан, бұл анық. Мысалы, егер веб-бет индекстеуден жабылса, Яндекс оның белгіленген мекенжайын ғана сақтайды , немесе(кім қалай жабады).

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

Іздеу жүйелері үшін сайт ережелерін ашу

Біз батыл қадам жасаймыз және іздеу жүйелерінің сайт ережелері бар бетке кіру мүмкіндігін ашамыз. Ол үшін файлымызда Disallow: /rules.html жолын тауып, оны жою nafik. Бұл орындалды! Енді кез келген іздеу роботы ашық «Сайт ережелеріне» ресми түрде кіріп, әрине, «Fe-e!» деп айта алады. және "Be-e!" Бұған жол бермеу үшін біз «Сайт ережелері» бетін қайта жасап жатырмыз – біз кез келген тақырыпқа, суреттерге өзіміздің бірегей мәтінімізді енгіземіз және беттің атын (атауы) өзгертеміз.

«Сайттағы ережелер» бетін өңдеу

Сайт ережелері бар бетті өңдеу DLE қозғалтқышының басқару панелінде, «Барлық бөлімдердің тізімі» бөлімінде - «Сайт ережелері» қол жетімді. «Сайттағы ережелер» бетін өңдеу кез келген басқа статикалық бет сияқты орындалады - in қалыпты жұмысвизуалды мәтіндік редактордың жұмысы. Мұнда тек бірегей мәтінді жазу және бірегей суреттерді таңдау проблемалары болуы мүмкін. Сәл жоғарырақ, жаңартылған бетке тақырыпты (атауды) енгізуге арналған арнайы терезе бар. Бірақ мұндай жаңалық 10.2 нұсқасынан бастап пайда болды.

Сайт ережелері бетін өзгерту үшін
ескі қозғалтқыш үлгілерінде -
оның жүйелік файлдарын қазып алу керек болады.

Сайт ережелері бетінің атын өзгерту
(CMS DLE 10.1 және одан төмен үшін)

«Сайттағы ережелер» бетінің нақты атауын өзгерту тіл / орыс / adminpanel.lng қалтасында орналасқан adminpanel.lng файлында жасалады. adminpanel.lng файлы жүйелік файл DLE қозғалтқышы. Оны өңдеу үшін серверге өтіңіз (әйтпесе - мүлдем ештеңе).

adminpanel.lng файлын ашыңыз.
Жолды іздеуде
"rules_edit" => " Жалпы ережелерсайтта»
«Сайттағы жалпы ережелер» деген сөздерді жаңа атаумен өзгертеміз. Жабамыз. Біз сақтаймыз. (Тырнақшалардың арасында орналасқан кириллица әліпбиін ғана өзгертуге болады. Әйтпесе, ол мүлдем жұмысын тоқтатады.)

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

Қолдану

Элементкез келген HTML бетінің бірінші жолында орналасады. Ол бетте қолданылатын белгілеу тілінің нұсқасын анықтайды. Қазіргі уақытта пішіннің доктипін пайдалану ұсынылады- бұл тілдің кез келген нұсқасы үшін әмбебап.

Дұрыс құжат құрылымын пайдаланыңыз

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

Дұрыс емес



Сәлем Әлем!

Сәлем Әлем!


Дұрыс



Сәлем Әлем!


Сәлем Әлем!



Беттің техникалық ақпаратын дұрыс анықтаңыз

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

Дұрыс емес



Сәлем Әлем!




Дұрыс



Сәлем Әлем!




Белгілеу стандарттарын орындаңыз

Элементтерді семантикасына қарай қолданыңыз

Жарамдылық үшін html кодын тексеріңіз

Суреттер үшін балама мәтінді пайдаланыңыз

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

Дұрыс емес

Дұрыс

HTML белгілеуінде мәнерлерді пайдаланбаңыз

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

Пікірлер жазу

Кодты түсіндіріңіз, бірақ оны асыра алмаңыз. Қысқа және түсінікті түсініктемелер басқа әзірлеушілер үшін үлкен көмек және біраз уақыттан кейін сіз үшін маңызды ескерту ретінде қызмет етуі мүмкін.

Мысалы:



Бет











Сәйкес сынып атауларын қолданыңыз

Блоктың мазмұнына сәйкес css кластарын атаңыз, мысалы: үстіңгі деректеме – үстіңгі деректеме, төменгі колонтитул – төменгі деректеме, мәзір – мәзір, мазмұн – мазмұн. Бұл кодты анағұрлым түсінікті және техникалық қызмет көрсетуді жеңілдетеді.

Нашар код


  • Мәзір тармағы 1

  • Мәзір тармағы 2

  • Мәзір тармағы 3

Жақсы код

CSS жазу ережелері

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

Браузер мәнерлерін әдепкіге қайтарыңыз

Олар біз қолданғымыз келетін стильдерге кедергі келтіруі мүмкін. Әдепкі шолғыш мәнерлерін қалпына келтіруге арналған файлды мына жерден жүктеп алуға болады - reset.css.

Стенографиялық сипаттар мен мәндерді пайдаланыңыз

Нашар код

толтыру үсті: 5px;
толтыру-оң жақ: 10px;
толтыру-төменгі: 15px;
толтыру-солға: 20px;

Жақсы код

толтыру: 5px 10px 15px 20px;

Жаңа жолда селекторлар мен ережелерді көрсетіңіз

Нашар код

Элемент (дисплей: блок; орны: салыстырмалы; толтыру: 5px 10px 15px 20px;)

Жақсы код

Элемент (
дисплей: блок;
позиция: салыстырмалы;
толтыру: 5px 10px 15px 20px;
}

Бірліктерсіз нөлдік мәндерді көрсетіңіз

Нашар код

толтыру: 10px 0px;
сол жақ шет: 0%;

Жақсы код

толтыру: 10px 0;
сол жақ шет: 0;

Пікірлер жазу

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

Мысалы:

/ * HEADER * /
тақырып (
}
/ * ТАҚЫРЫП СОҢЫ * /

/ * НЕГІЗГІ * /
негізгі (
}
/ * НЕГІЗГІ АЯҚ * /

/ * ТӨМЕНГІ БЕТ * /
төменгі деректеме (
}
/ * ТӨМЕНГІ СОҢЫ * /

Жарамдылық үшін CSS кодын тексеріңіз

Қорытынды

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

HTML дегеніміз не

World Wide Web (WWW) HyperText Markup Language (HTML) деп аталатын веб-беттерден тұрады. Көптеген адамдар осы тілде бағдарламалау туралы айтқанымен, HTML дәстүрлі мағынада мүлдем бағдарламалау тілі емес. HTML - құжатты белгілеу тілі. HTML құжатын әзірлеу кезінде белгілеу орындалады мәтіндік құжатредактор қызыл қарындашпен жасайтыны сияқты. Бұл белгілер құжаттағы ақпаратты көрсету нысанын көрсету үшін қызмет етеді.

Әдетте браузерлер деп аталатын HTML-құжаттар үшін арнайы қарау құралдары ережелерге сәйкес белгіленген файлдарды түсіндіру үшін пайдаланылады HTML тілі, оларды веб-беттер ретінде пішімдеу және олардың мазмұнын пайдаланушының компьютер экранында көрсету. Бар көп саныәртүрлі компаниялар әзірлеген шолғыш бағдарламалары, алайда бүгінгі таңда көптеген бағдарламалардың ішінен екі жетекші бағдарлама айқын ерекшеленеді - Netscape Communicator және Microsoft Internet Explorer.

Netscape Navigator Netscape Communications Corporation әзірлеген. Көптеген сияқты бағдарламалық өнімдер, бұл бағдарламаның бірнеше нұсқалары бар. Осы жазу кезінде Netscape Communicator бағдарламасының соңғы нұсқасы 4.7 нұсқасы болып табылады. Internet Explorer браузерін Microsoft корпорациясы жасаған. Соңғы нұсқасыбұл бағдарлама 5.0.

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

пайдаланушылар үшін браузерлер арасындағы соғыс туралы хабарламалар болды. Енді бұл екі браузер танымалдығы бойынша салыстырмалы. Microsoft браузерінің өсіп келе жатқан танымалдығы браузерді операциялық бөлмеге қосу арқылы жеңілдетілді Windows жүйелері 98, дегенмен, сайып келгенде, браузерді таңдау пайдаланушыға байланысты.

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

Белгілеу тілінің не екенін түсіну үшін көптеген адамдар WordStar сияқты мәтіндік редакторлармен жұмыс істеген жақсы күндерді еске түсірейік. Оларда сөз тіркесін бөлектеу үшін, мысалы, қою шрифтпен оның басында және соңында арнайы белгілер (/ B және / b) қойылды:

/B Бұл мәтін қалың қаріппен көрсетіледі / b

Мұндай мәтінді басып шығару құрылғысына шығарған кезде (біз әлі дисплейлер туралы айтып отырған жоқпыз, сол кезде олар мүлдем болмаған немесе қаріптерді өзгертуге мүмкіндік бермейтін әріптік-цифрлық дисплейлер болған) / in таңбалары қалың қаріпті қолдануға мәжбүр болды. / b таңбалары болғанша.

HTML дәл осылай жұмыс істейді. Экрандағы мәтінді қою қаріппен бөлектеу қажет болса, мұны дәл осылай жасауға болады:

Бұл мәтін қалың қаріппен көрсетіледі.

Рәміздер жуан және таңбаларды қамтидыөшір. Мәтіннің көрсетілуін басқаратын және бір уақытта экранда өздері көрсетілмейтін мұндай символдарды әдетте HTML тілінде тегтер деп атайды (ағылшын тілінің tag сөзінен – белгі, белгі).

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

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

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

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

  • немесе абзац тегі

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

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

    Браузерлердің тегтерді түсіндіруінің жалпы ережелері бар. Қате мәлімдемелер бағдарламаны құрастыру сатысында сәйкес хабарламаларды шығаруға әкелетін және өңдеуді қажет ететін бағдарламалау тілдерінен айырмашылығы, HTML тілінде тегтердің қате жазылуына жауап беру әдеттегідей емес. Қате жазылған тегті немесе оның параметрін браузер елемеуі керек. Бұл қате жазылған тегтерге ғана емес, браузердің осы нұсқасы танымайтын тегтерге де қатысты барлық браузерлер үшін жалпы ереже. Мысал ретінде белгілі бір шолғыш үшін ұсынылған және енгізілген және басқасына белгісіз тегтер болуы мүмкін. Мысалы, тег контейнері жақтау құрылымдарына қолдау көрсетпейтін шолғыштарға балама ақпарат беруге қызмет ететін , мұндай браузерлер танымайды. Тегпен кездескен кезде кадрларды қолдайтын шолғыш <NOFRAMES>, құрамындағы барлық ақпаратты өткізіп жібереді. Ал фреймдермен таныс емес браузер, әрине, тегті түсінбейді <NOFRAMES>... Дегенмен, жоғарыдағы ережеге сәйкес, бұл тег жай ғана өткізіп жібереді, бірақ кейінгі барлық ақпарат көрсетіледі.</p> <p>Тегтерді параметрлермен немесе атрибуттармен жазуға болады (ағылшын тілінен, атрибут). Осы кітапта біз параметр терминін жиі қолданамыз. Рұқсат етілген параметрлер жиыны әрбір тег үшін жеке болып табылады. Параметрлерді жазудың жалпы ережелері төмендегідей. Тег атауынан кейін бір-бірінен бос орындармен бөлінген параметрлер болуы мүмкін. Тег параметрлерінің реті ерікті. Көптеген параметрлер олардың мәндерін көрсетуді талап етеді, бірақ кейбір параметрлердің мәндері жоқ немесе әдепкі мәндерді қабылдай отырып, оларсыз жазылуы мүмкін. Егер параметр мәнді қажет етсе, ол параметр атынан кейін теңдік белгісі арқылы көрсетіледі. Параметр мәнін тырнақшаға немесе оларсыз жазуға болады. Тырнақшасыз жасай алмайтын жалғыз жағдай - бұл параметр мәнінде бос орындар болған жағдай. Параметр мәндерінде (тегтердің атаулары мен параметрлердің өзінен айырмашылығы) кейде жазу регистрі маңызды. Мұнда параметрлері бар тег жазудың мысалы берілген:</p> <p><TABLE BORDER ALIGN="left"> </p> <p>Мұнда тег үшін <TABLE>екі параметр берілген. Бірінші BORDER параметрі мәнсіз көрсетілген. Екінші ALIGN параметрі қалды.</p> <p>Кітаптың бірінші бөлімінің келесі тарауларында HTML тегтерінің мақсаты мен олардың параметрлері сипатталады. Жалпы, тегтердің әртүрлі параметрлері болуы мүмкін, бірақ барлық тегтерге дерлік бірдей болатын бірқатар параметрлер бар. Әрбір тегті сипаттаған кезде олар туралы бұдан былай сөйлеспеу үшін біз бұл жерде тегтердің жалпы параметрлерін атап өтеміз.</p> <p>Бөлімде қолдануға болатын барлық тегтер <BODY>HTML құжатында CLASS, ID, LANG, LANGUAGE, STYLE және TITLE параметрлері болуы мүмкін. Бұл параметрлерді пайдалану, ең алдымен, кітаптың екінші бөлімінде талқыланатын құжаттарды сәндеу кезінде пайдалы.</p> <p>CLASS, ID, STYLE параметрлеріне Internet Explorer 3.0 және одан жоғары және Netscape 4.0 және одан жоғары нұсқалары қолдау көрсетеді. Бұл параметрлер стильдерді пайдалану кезінде қажет.</p> <p>LANG, LANGUAGE, TITLE параметрлері – тек Internet Explorer 4.0 нұсқасынан бастап қолдау көрсетеді. Бұл параметрлер сәйкесінше қолданылған тілді (мысалы, Ресей үшін: LANG = ru), сценарий тілін (мысалы, LANGUAGE = JavaScript), сондай-ақ тінтуір курсоры осының үстіне апарған кезде көрсетілетін кеңестер мәтінін көрсетеді. элементі (TITLE).</p> <p>Қазіргі HTML тілінде тіл тегтері мен олардың мазмұнынан басқа, in <a href="https://polarize.ru/kk/office/rasshifrovat-kod-stranicy-vkontakte-shifrovanie-html-koda-kak/">бастапқы HTML коды</a>сценарий кодтары да (javascript немесе VBScript) жазылады. Кітаптың бірінші бөлімінде бұл іс жүзінде еш жерде айтылмаған, бірақ екінші бөлім толығымен сценарийлерді пайдалану мәселелеріне арналған.</p> <p>HTML туралы жалпы шолуымызды аяқтай отырып, біз ең қарапайым HTML құжаттарының қарапайым екенін атап өтеміз <a href="https://polarize.ru/kk/mobile/avtomatizirovannaya-zagruzka-failov-na-ftp-i-otpravka-failov-na/">мәтіндік файлдар</a>, кез келген пайдалануға болатын көру және өңдеу үшін <a href="https://polarize.ru/kk/windows/tekstovye-redaktory-luchshie-tekstovye-redaktory-dlya-kodinga-pod-mac-os/">мәтіндік редактор</a>... Бұл файлдарда әдетте HTM немесе HTML кеңейтімі болады.</p> <p>HTML спецификациялары</p> <p>HTML 90-жылдардың ортасында Интернеттің экспоненциалды өсуінің арқасында танымал болды. Осы уақытқа дейін тілді стандарттау қажеттілігі туындады, өйткені Интернетке кіруге арналған бағдарламалық жасақтаманы әзірлеген әртүрлі компаниялар өздерінің</p> <p>HTML нұсқауларының көбірек нұсқалары. Енді HTML тегтерін пайдалануға қатысты қандай да бір ортақ келісімге келудің уақыты келді.</p> <p>World Wide Web Consortium (қысқаша W3C) деп аталатын ұйым HTML спецификациясын қабылдады. Оның міндеті браузерлік компаниялардың әртүрлі ұсыныстарын ескере отырып, тіл мүмкіндіктерінің қазіргі даму деңгейін көрсететін спецификацияны жасау болды. Осылайша, 1995 жылдың қарашасында HTML 2.0 спецификациясы пайда болды, ол 1994 жылдың аяғында әзірленген HTML тілін қолдану тәжірибесін ресімдеуге арналған.</p> <p>Техникалық сипаттаманы бекіту схемасы келесідей. W3C консорциумы спецификацияның жобасын шығарады, оны талқылаудан кейін спецификацияның жобалық нұсқасы деп аталатын нұсқасы шығарылады және оны белгілі бір мерзімге талқылауға ұсынады. Талқылау кезеңінен кейін спецификацияның жұмыс жобасы ұсынысқа, яғни HTML спецификациясының ресми танылған нұсқасына айналуы мүмкін.</p> <p>2.0 спецификациясынан кейін көп ұзамай 3.0 спецификациясының жұмыс нұсқасы шығарылды және оның талқылау мерзімі 1995 жылдың қыркүйегінде аяқталды. Бұл спецификация ешқашан ресми ұсыныс ретінде қабылданбады. Жеке браузерлерге тән көптеген тегтер мен мүмкіндіктерді қосу жоспарланған болатын, бірақ W3C нұсқаулардың мұндай үлкен саны үшін жақсы спецификацияны жасай алмады.</p> <p>Көп ойланғаннан кейін HTML 3.2 жобасы 1996 жылдың мамыр айында шығарылды. Жоба 3.0 нұсқасында қол жетімді кейбір тегтерге негізделген, олар жұмыстағы тұрақтылықты көрсетті. 1996 жылдың қыркүйегінде бірнеше айлық талқылаулардан кейін 3.2 нұсқасы ұсынылған спецификацияға айналды, ал 1997 жылдың қаңтарында ол ресми ұсыныс болды.</p> <p>1997 жылдың шілдесінде ұсынылған HTML 4.0 спецификациясы шығарылды, ол 1997 жылдың желтоқсанында ресми ұсыныс болды. Бұл бүгінгі күнге дейін қабылданған соңғы спецификация.</p> <p>Мұнда берілген <a href="https://polarize.ru/kk/office/kak-zapisatsya-k-vrachu-v-tyumenskoi-oblasti-kratkii-obzor-sposobov/">конспект</a> HTML тілінің даму тарихын әр түрлі сипаттамалардың ерекшеліктерін егжей-тегжейлі сипаттау қиын, әсіресе <a href="https://polarize.ru/kk/photoshop/realno-li-pomenyatsya-telami-kak-menyatsya-telami-v-realnoi-zhizni/">шын өмір</a>әзірлеушілер әрқашан Консорциумның ұсыныстарын орындамайды. Міне, соңғы спецификацияның артындағы идеялардың кейбірі ғана.</p> <p>HTML 4.0 спецификациясында құжат құрылымының сипаттамасын оның монитор экранында көрсетілуінің сипаттамасынан бөлу негізгі идея болды. Тәжірибе көрсеткендей, құжаттың құрылымы мен көрсетілімін бөлу кең ауқымды платформаларды, орталарды және сол сияқтыларды қолдау құнын азайтады, сонымен қатар құжаттарды түзетуді жеңілдетеді. Осы идеяға сәйкес презентацияны сипаттау әдістерін кеңірек қолдану керек</p> <p>құжаттың мазмұнымен қиылысатын көрсетілім деректерін көрсетудің орнына стиль кестелерін қолданатын құжат. Бұл идеяны HTML 4.0 спецификациясында жүзеге асыру үшін HTML элементтерінің көрсетілу пішінін тікелей көрсету үшін пайдаланылатын тегтер саны жойылды. Осы себепті жойылған тегтерге кіреді <CENTER>, <FONT>, <BASEFONT>, <S>, <STRIKE>, <U>... Басқа жойылған тегтердің арасында біз атап өтеміз <ISINDEX>, <APPLET>, <DIR>, <MENU>... Жойылған тегтердің орнына сәйкес мүмкіндіктерді іске асырудың балама нұсқалары ұсынылады, біз осы кітапта ерекше атап өтеміз.</p> <p>Ескерту тегінің түсінігі келесідей. Бұл тіл сипаттамасында тег ескірген деп жарияланса, бұл браузерлер мұндай тегтерді әзірге қолдауын жалғастыруы керек дегенді білдіреді, бірақ оларды пайдалану ұсынылмайды. Келесі техникалық сипаттамаларда бұл тегтер ескірген болуы мүмкін. Ескірген тегтерге енді браузерлер қолдау көрсетпеуі мүмкін. HTML 4.0 спецификациясында тек үш тег ескірген:<ХМР>, <PLAINTEXT>ЖӘНЕ <LISTING>... Тегтердің қайсысы спецификацияға енгізілгені туралы ақпаратты А1 қосымшасындағы кестеден алуға болады.</p> <p>HTML спецификациясы туралы ресми ақпаратты әрқашан мына мекенжайдағы W3C веб-сайтынан алуға болады <b>http://www.w3.org/TR/</b>... 4.0 спецификациясы мына жерде <b>http://www.w3.org/TR/REC-htmI40-971218</b>. </p> <p>Логикалық тұрғыдан ресми спецификация әртүрлі браузерлер арқылы ақпаратты ұсынудың бірдей нысанын қамтамасыз ететін бағыттаушы және бағыттаушы күш рөлін атқаруы керек екенін ескеріңіз. Бұл ұмтылудың тамаша нұсқасы. Шындығында бәрі жақсы емес. Жаңа идеялар үнемі пайда болады, әзірлеуші ​​​​компаниялар өздерінің браузерлерінде жүзеге асырады және олар алға жылжытады. Сәтті идеялар тамыр алады, содан кейін оны басқа әзірлеушілер қабылдайды. Кейбір мүмкіндіктер белгілі бір шолғышқа тән болып қалады. Сәтті дизайн спецификацияда аяқталады және жалпы қабылданған болады. Осылайша, браузерлердің мүмкіндіктерін жақсарту және спецификацияны нақтылау процесі бір-біріне әсер ететін үздіксіз процесс болып табылады.</p> <p>Құжат құрылымы</p> <p>HTML құжаттарын сипаттауды бастайтын бірінші тег болып табылады <HTML>... Ол әрқашан бастау керек <a href="https://polarize.ru/kk/history/algoritmizaciya-processov-funkcionirovaniya-sistem-formalizaciya-i/">құжат сипаттамасы</a>, ал құжат сипаттамасының соңы тег болуы керек</HTML>... Бұл тегтер олардың арасындағы жолдар бір HTML құжатын көрсететінін көрсетеді. Құжаттың өзі қарапайым ASCII мәтіндік файлы болып табылады. Бұл тегтерсіз браузер немесе басқа қарау құралы құжат пішімін анықтап, оны дұрыс түсіндіре алмауы мүмкін.</p> <p>Көбінесе тег <HTML>параметрлерсіз қолданылады. В <a href="https://polarize.ru/kk/components/mozhno-li-ustanovit-ios-kak-otkatitsya-na-predydushchuyu-versiyu-ios-gde/">алдыңғы нұсқалар</a> VERSION опциясы пайдаланылды, ол HTML 4.0 спецификациясымен ескірген. Бұл параметр тегпен ауыстырылды<! DOCTYPE>. </p> <p>Көпшілік <a href="https://polarize.ru/kk/components/reiting-luchshie-brauzery-dlya-windows-preimushchestva-i-nedostatki/">заманауи браузерлер</a>құжатты тани алады және тегтерді қамтымайды <HTML>және</HTML>, дегенмен оларды пайдалану өте қажет.</p> <p>Жұп тегтер арасында <HTML>және</HTML>құжаттың өзі орналасқан. Құжат екі бөлімнен тұруы мүмкін - тақырып бөлімі (тегтен бастап <HEAD>) және құжаттың мазмұн бөлігінің бөлімі (тегінен бастап <BODY>). Рамалық құрылымдарды сипаттайтын құжаттар үшін BODY бөлімінің орнына FRAMESET бөлімі қолданылады (тегімен бірге <FRAMESET>). Әрі қарай, HEAD және BODY құжатының бөлімдерін құру ережелерін қарастырамыз. Құрамында жақтаулары бар құжаттардың құрылысы 5-тарауда талқыланады.</p> <p><b> <span>HEAD құжатының бөлімі</span> </b></p> <p>Құжаттың БАСҚА бөлімі оның тақырыбын анықтайды және міндетті тег емес, бірақ жақсы жазылған тақырып өте пайдалы болуы мүмкін. Тақырыптың мақсаты - құжатты түсіндіретін бағдарламаға қажетті ақпаратты беру. HEAD бөлімінің ішіндегі тегтер (тег арқылы сипатталған құжаттың атын қоспағанда <TITLE>) экранда көрсетілмейді.</p> <p>Тақырып бөлімі тегпен ашылады <HEAD>... Әдетте бұл тег тегтен кейін бірден келеді <HTML>... Аяқтау тегі</HEAD>осы бөлімнің соңын көрсетеді. Аталған тегтердің арасында тақырып бөлімінің қалған тегтері орналасқан.</p> <p><b> <span>Құжат атауы</span> </b></p> <p>Контейнерді белгілеу <TITLE>жалғыз талап етілетін тақырып тегі және құжатқа тақырып беру үшін пайдаланылады. Ол әдетте браузер терезесінің тақырыбында көрсетіледі. Тег <TITLE>құжат файлының атымен шатастырмау; керісінше, бұл файл атауы мен орнынан толығымен тәуелсіз мәтіндік жол, бұл оны өте пайдалы етеді. Файл атауы қатты кодталған <a href="https://polarize.ru/kk/mobile/os-windows-i-vse-o-nei-chto-takoe-windows-i-kakie-byvayut-operacionnye/">операциялық жүйе</a>ол сақталған компьютер. Сондай-ақ құжаттың атын (. тегімен) ажырату керек <TITLE>) әдетте тегтелген құжаттағы тақырыптардан <Hx>. </p> <p><i> <b>Ескерту</b> </i></p> <p><i> <span>Жалпы алғанда, құжаттың міндетті атауы шұғыл ұсыныс сипатына ие. Белгісіз құжат <TITLE>браузерлерде де көрсетіледі. Сонымен бірге <a href="https://polarize.ru/kk/game/skripty-dlya-tyuryagi-mozilla-firefox-ustanovka-skriptov-v-razlichnye-brauzery/">әртүрлі браузерлер</a>өйткені терезенің тақырыбы беріледі <a href="https://polarize.ru/kk/graphics/nakopiteli-na-semnyh-magnitnyh-diskah-sravnenie-razlichnyh-tipov/">әртүрлі ақпарат</a>... Сонымен <a href="https://polarize.ru/kk/program/tipichnye-oshibki-kontinent-ap-udalenie-abonentskogo-punkta-bolee-rannih/">ерте нұсқалары</a> Netscape браузері «Тақырып жоқ» жолын көрсетті. Басқа браузерлер ештеңе көрсетпейді немесе жүктелген файлдың URL мекенжайын көрсетеді, бұл браузердің Орын жолағындағы ақпаратты қайталайды.</span> </i></p> <p>Құжаттың аты тегтер арасында жазылады <TITLE>және</TITLE>және мәтін жолы болып табылады. Негізінде, атау шектеусіз ұзындықта болуы мүмкін және кейбір сақталғандардан басқа кез келген таңбаларды қамтуы мүмкін. Тәжірибеде сіз өзіңізді бір жолмен шектеуіңіз керек, бұл тақырып браузер терезесінің тақырып жолында пайда болатынын есте ұстаған жөн. Сондай-ақ, браузер терезесін кішірейту кезінде құжат тақырыбынан не қалатынын есте сақтау керек. Құжат атауының ұзындығын 60 таңбаға дейін шектеу ұсынылады. Тақырыптың браузер терезесінде қалай көрсетілетінін осы кітаптағы құжатты көрсету үлгісі берілген кез келген суретте көруге болады.</p> <p>Әдепкі бойынша, құжаттың атауындағы мәтін құжатқа бетбелгі жасау кезінде пайдаланылады. Сондықтан, көбірек ақпараттық мазмұн үшін бет-жүзі жоқ атаулардан аулақ болыңыз (Негізгі бет, Индекс, т.б.). Бетбелгі атауы ретінде қолданылатын мұндай сөздер әдетте мүлдем пайдасыз. Құжаттың тақырыбы оның мазмұнын қысқаша сипаттауы керек. Экранда фреймдік құрылымы бар құжаттар көрсетілгенде, әрбір кадрға өз атымен жеке құжат жүктелгенде экранда тек негізгі құжаттың аты ғана көрінетінін ескеріңіз. Дегенмен, кадрларға жүктелетін жеке құжаттарды атаған жөн. 5 тарауда бұл мәселе толығырақ қарастырылады.</p> <p>Құжат атауының маңыздылығы келесі фактімен анықталады. Тегтен бері <TITLE>HTML файлының ең басында дерлік орналасады, содан кейін құжат жүктеле бастағаннан кейін дәл осы файл бірінші болып көрсетіледі. Содан кейін құжаттың негізгі мазмұны жүктеледі, ал браузер терезеде құжатты пішімдеуді бастайды. Бұл процесс, жалпы алғанда, құжаттың мазмұны мен құрылымына, сондай-ақ қосылу жылдамдығына байланысты кейінге қалдырылуы мүмкін. Ұзақ уақыт бойы пайдаланушы бос экранды қарастырады, оның жалғыз ақпараттық жолы құжаттың атауы болады. Көбінесе (байланыс үзілгенде немесе пайдаланушы құжаттың жүктелуін күткісі келмесе), құжат туралы барлық ақпарат сонда аяқталады.</p> <p><b><span>Басқа құжаттармен байланысы</span> </b></p> <p>Көбінесе HTML құжаттары байланыстырылады, яғни олардың бір-біріне сілтемелері болады. Сілтемелер абсолютті немесе салыстырмалы болуы мүмкін. Екеуінің де кемшіліктері бар. Құжатты иерархияда төмен жылжытсаңыз, абсолютті сілтемелер тым ауыр болуы және жұмысын тоқтатуы мүмкін. Қатысты сілтемелерді енгізу және жаңарту оңайырақ, бірақ иерархиядағы ең жоғары құжат жылжытылса, бұл сілтеме де бұзылады. Сілтемелердің екі түрі де құжатты бір компьютерден екінші компьютерге көшіру кезінде үзілуі мүмкін.</p> <p>Көбінесе пайдаланушы өз машинасына үлкен құжатты жүктеп алып, оны егжей-тегжейлі зерттеу үшін желіден ажыратылады. Құжаттың жергілікті көшірмесіндегі барлық сілтемелер жұмысын тоқтатады. Оларды «қайта жандандыру» үшін қашықтағы компьютерде орналасқан түпнұсқа құжатқа қайтадан жүгіну керек.</p> <p>Бақытымызға орай, HTML әзірлеушілері бұл мәселені алдын ала көріп, екі тег қосты, <BASE>және <LINK>, олар құжаттар арасындағы байланыс үзілмеуі үшін тақырыпқа енгізілген.</p> <p><b>Тег <BASE> </b> </p> <p>Тег <BASE>құжаттың толық негізгі URL мекенжайын көрсету үшін қызмет етеді. Оның көмегімен салыстырмалы сілтеме құжат басқа каталогқа немесе тіпті басқа компьютерге ауыстырылған жағдайда жұмысын жалғастырады. Тег <BASE>MS-DOS жол командасына ұқсас жұмыс істейді, ол басқа компьютерде орналасқан ескі құжатта болса да, қараушыға өзі іздеген құжатқа сілтемені анықтауға мүмкіндік береді.</p> <p>Тег <BASE>бір қажетті параметрі бар, HREF, одан кейін құжаттың толық URL мекенжайы. Төменде тегті қолданудың мысалы берілген <BASE>. </p> <p><HTML> </p> <p><HEAD> </p> <p><TITLE>Негізгі мекенжайды көрсету</TITLE> </p> <p><BASE HREF="http://www.my_host.ru/~sergeev"> </p> <p></HEAD> </p> <p><BODY> </p> <p><img src='/graphics/rules-html-obshchie-pravila-desyat-pravila-postroeniya-html-dokumentov/' loading=lazy loading=lazy> </p> <p></BODY> </p> <p></HTML> </p> <p>Тег <BASE>браузерге файлды қай жерден іздеу керектігін айтады. Пайдаланушы файлдың жергілікті көшірмесімен жұмыс істесе және оның машинасы желіден ажыратылмаса, Жаңалықтар белгішесі кескіні табылып, шолғыш терезесінде көрсетіледі.</p> <p><b>Тег <LINK> </b></p> <p>Тег болса да <BASE>файлды табуға мүмкіндік береді, құжат қатынастары туралы мәселе ашық қалады. Бұл қатынастардың маңыздылығы құжаттарыңыздың күрделілігіне пропорционалды түрде артады. Олардың арасындағы логикалық байланысты сақтау үшін HTML тегті енгізді <LINK>. </p> <p>Тег <LINK>осы тегті қамтитын құжат пен басқа құжат немесе нысан арасындағы қатынасты көрсетеді. Ол URL мекенжайынан және құжат қатынастарын нақтылайтын параметрлерден тұрады. Құжат тақырыбы тегтердің кез келген санын қамтуы мүмкін <LINK>... қойындысы. 1.1 тегтің параметрлерін сипаттайды <LINK>және олардың функциялары.</p> <p><i> <span><b>1.1-кесте.</b>Тег параметрлері <LINK> </span> </i></p> <p>Мұнда тегтің кейбір мысалдары берілген <LINK>параметрлерімен:</p> <p><LINK REL="contents" HREF ="../toc.html"> </p> <p><LINK HREF="mailto:sergeev@mail.ifmo.ru" REV="made"> </p> <p>Бірінші жолда мазмұнға тікелей қатысы бар құжаттың мазмұны файлына (toc.html - мазмұн кестесі) сілтеме көрсетіледі. Екінші жол құжат авторының URL мекенжайына қатынасты сипаттайды (кері жасалған қатынаспен).</p> <p>Құжаттар арасында көптеген әртүрлі қатынастар болуы мүмкін. REL параметрінің басқа мәндерінің мысалдары: бетбелгі, авторлық құқық, глоссарий, анықтама, үй, индекс, toc, келесі, алдыңғы. REV параметрі келесі мәндерді де қабылдай алады: автор, редактор, баспагер, иеленуші.</p> <p><b>Тег <META> </b></p> <p>Гипермәтінді белгілеу тілінің жаңа спецификацияларын әзірлеу ұзақ уақытты алады және осы уақыт ішінде браузерлерді шығаратын компаниялар өз өнімдерінің бірнеше нұсқасын шығара алады. Сондықтан тақырып бөліміне басқа тег қосуға болады <META>бұл құжат авторларына HTML емес ақпаратты анықтауға мүмкіндік береді.</p> <p>Бұл ақпаратты браузер ағымдағы HTML сипаттамасымен қамтылмаған әрекеттер үшін пайдаланады. Тег <META>Бұл сізге бірінші HTML құжаттарын жасау үшін қажет емес, бірақ сіздің беттеріңіз күрделене түскен сайын сізге қажет болады.</p> <p>Мысалы:</p> <p><МЕТА HTTP-EQUIV="refresh" CONTENT="60" RL="www.my_host.ru/homepage.html"> </p> <p>Netscape Navigator және Internet Explorer шолғыштары бұл жазбаны 60 секунд күтіп, содан кейін жаңа құжатты жүктеу нұсқауы ретінде түсіндіреді. Бұл нұсқау көбінесе құжаттардың орнын өзгерту кезінде қолданылады. Берілген жолы бар шағын құжатты жаңа орынға автоматты түрде байланыстыру үшін құжаттың ескі орнында қалдыруға болады.</p> <p>Келесі жол:</p> <p><МЕТА HTTP-EQUIV="refresh" CONTENT="60"> </p> <p>шолғышқа бетті әр 60 секунд сайын қайта жүктеуге нұсқау береді. Бұл беттегі деректер жиі жаңартылса, мысалы, биржалық баға белгілеулерін қадағалау жағдайында пайдалы болуы мүмкін.</p> <p>Элементті пайдалану өте танымал болды <META>кейбір типтік тапсырмалар үшін. Мысал ретінде іздеу жүйелері пайдаланатын кілт сөздерді көрсету болып табылады. Бұл әдіс құжаттың индексіне оның мазмұнына анық қосылмауы мүмкін қосымша сөздерді енгізуге мүмкіндік береді. Мұны істеу үшін тегте <META>кейбір сипаттың аты NAME параметрінің мәні ретінде көрсетіледі. Және CONTENT параметрін пайдаланып, бұл сипаттың мәні көрсетіледі, мысалы:</p> <p><МЕТА NAME="author" CONTENT="Александр Сергеев"> </p> <p>HTML спецификациясы тегте жазылған арнайы сипат атауларын анықтамайды <META>... Дегенмен, бірнеше жиі қолданылатын қасиеттер бар, мысалы, сипаттама, кілт сөздер, автор, роботтар және т.б.:</p> <p><МЕТА NAME="description" CONTENT="Описание возможностей языка HTML 4.0"> </p> <p><МЕТА NAME="keywords" CONTENT ="тэг, гипертекст, HTML, браузер"> </p> <p>Берілген белгілер <META>Мысалы, осы кітаптың электронды нұсқасы үшін көрсетілуі мүмкін еді.</p> <p>Тег <META>кестеде көрсетілген параметрлерге ие болуы мүмкін. 1.2.</p> <p><i> <span><b>1.2-кесте.</b>Тег параметрлері <META> </span> </i></p> <p>Тегтің тағы бір маңызды қолданылуы <META>мәтіндік кодтаудың көрсеткіші болып табылады. Сонымен, Windows кодтауындағы орыс тіліндегі мәтін үшін келесі жолды жазу керек:</p> <p><МЕТА HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"> </p> <p><b><span>Басқа тақырып элементтері</span> </b></p> <p>Құжаттың тақырып бөлімінде тағы екі тег болуы мүмкін - <STYLE>және<SCRIPT>. Их назначение связано с использованием таблиц стилей в документе и записью скриптов. Эти вопросы подробно рассматриваются во второй части книги. </p> <p><b> <span> Раздел документа </span> <span>BODY </span> </b></p> <p>В этом разделе документа располагается его содержательная часть. Большинство тэгов, рассматриваемых далее в этой главе и последующих, должно располагаться в данном разделе документа. Здесь мы рассмотрим лишь некоторые общие вопросы. </p> <p>Раздел документа BODY должен начинаться тэгом <BODY> и завершаться тэгом </BODY>, между которыми располагается все содержимое данного раздела. Строго говоря, наличие этих тегов не является обязательным, поскольку браузеры могут определить начало содержательной части документа по контексту. Однако их употребление рекомендуется. </p> <p>Тэг <BODY> имеет ряд параметров, ни один из которых не является обязательным. Перечень параметров приведен в табл. 1.3. </p> <p><i> <span><b>Таблица 1.3. </b> Перечень параметров тега <BODY> </span> </i></p> <table border="1" width="550" height="427"><tr><td width="140" height="33"> <p><b>Параметр </b></p> </td> <td width="400" height="33"> <p><b>Назначение </b></p> </td> </tr><tr><td width="140" height="18" valign="top"> <p>ALINK </p> </td> <td width="400" height="18" valign="top"> </td> </tr><tr><td width="140" height="36" valign="top"> <p>BACKGROUND </p> </td> <td width="400" height="36" valign="top"> <p>Указывает на URL-адрес изображения, которое используется в качестве фонового </p> </td> </tr><tr><td width="140" height="36" valign="top"> <p>BOTTOMMARGIN </p> </td> <td width="400" height="36" valign="top"> <p>Устанавливает границу нижнего поля документа в пикселах </p> </td> </tr><tr><td width="140" height="18" valign="top"> <p>BGCOLOR </p> </td> <td width="400" height="18" valign="top"> <p>Определяет цвет фона документа </p> </td> </tr><tr><td width="140" height="36" valign="top"> <p>BGPROPERTIES </p> </td> <td width="400" height="36" valign="top"> <p>Если установлено значение FIXED, фоновое изображение не прокручивается </p> </td> </tr><tr><td width="140" height="36" valign="top"> <p>LEFTMARGIN </p> </td> <td width="400" height="36" valign="top"> <p>Устанавливает границу левого поля документа в пикселах </p> </td> </tr><tr><td width="140" height="18" valign="top"> <p>LINK </p> </td> <td width="400" height="18" valign="top"> <p>Определяет цвет еще не просмотренной ссылки </p> </td> </tr><tr><td width="140" height="36" valign="top"> <p>RIGHTMARGIN </p> </td> <td width="400" height="36" valign="top"> <p>Устанавливает границу правого поля документа в пикселах </p> </td> </tr><tr><td width="140" height="36" valign="top"> <p>SCROLL </p> </td> <td width="400" height="36" valign="top"> <p>Устанавливает наличие или отсутствие полос прокрутки окна браузера </p> </td> </tr><tr><td width="140" height="18" valign="top"> <p>TEXT </p> </td> <td width="400" height="18" valign="top"> <p>Определяет цвет текста </p> </td> </tr><tr><td width="140" height="36" valign="top"> <p>TOPMARGIN </p> </td> <td width="400" height="36" valign="top"> <p>Устанавливает границу верхнего поля документа в пикселах </p> </td> </tr><tr><td width="140" height="18" valign="top"> <p>VLINK </p> </td> <td width="400" height="18" valign="top"> <p>Определяет цвет уже просмотренной ссылки </p> </td> </tr></table><p>Использование параметров BACKGROUND и BGCOLOR, определяющих фон документа, подробно рассмотрено в . </p> <p>Параметр BGPROPERTIES, принимающий единственное значение FIXED, поддерживается только браузером Microsoft Internet Explorer. </p> <p>Параметры BOTTOMMARGIN, LEFTMARGIN, RIGHTMARGIN и TOPMARGIN, задающие расстояния в пикселах между краями текста и соответствующими краями окна, а также параметр SCROLL, распознаются только браузером Microsoft Internet Explorer, начиная с версии 4.0. </p> <p>Параметры ALINK, LINK, TEXT и VLINK определяют цвета ссылок и текста документа. </p> <p>В языке HTML цвета определяются цифрами в шестнадцатеричном коде. Цветовая система базируется на трех основных цветах - красном, зеленом и синем - и обозначается RGB. Для каждого цвета задается шестнадцатеричное значение в пределах от 00 до FF, что соответствует диапазону 0-255 в десятичном исчислении. Затем эти значения объединяются в одно число, перед которым ставится символ #. Например, число #800080 обозначает фиолетовый цвет. Чтобы не запоминать совокупности цифр, вместо них можно пользоваться названиями цветов, которые приводятся в приложении П2 . Ранние версии браузеров распознавали только названия 16 стандартных цветов, отмеченных в приложении звездочками. Современные версии браузеров распознают все 140 названий цветов. </p> <p><b><span> Форматирование текста </span> </b></p> <p>В данном разделе будут рассмотрены возможности форматирования отдельных символов текста документа. </p> <p><b> <span> Тэги уровня блока и последовательные тэги </span> </b></p> <p>Некоторые HTML-тэги, которые могут появляться в разделе BODY, называют тэгами уровня блока (block level), в то время как другие последовательными (inline) тэгами или, называя по-другому, тэгами уровня текста (text level), хотя такое разделение тегов по уровням в известной степени условно. </p> <p>Различие уровней HTML-тэгов заключается в следующем: теги уровня блока могут содержать последовательные теги и другие теги уровня блока, тогда как последовательные теги содержат только данные и другие последовательные тэги. Блоковые теги описывают более крупные структуры документов, по сравнению с последовательными тэгами. </p> <p>По умолчанию теги этих видов размещаются в тексте описания различным образом: теги уровня блока начинаются с новой строки, в то время как последовательные - нет. </p> <p><b> <span> Логическое и физическое форматирование </span> </b></p> <p>Для форматирования текста HTML-документов предусмотрена целая группа тэгов, которую можно условно разделить на теги логического и физического форматирования. </p> <p>Тэги логического форматирования обозначают (своими именами) структурные типы своих текстовых фрагментов, такие, например, как программный код (тэг <CODE>), цитата (тэг <CITE>), аббревиатура (тэг <ABBR>) и т. д. (см. описания этих и других подобных тегов в следующем разделе). С помощью тегов <EM> и <STRONG> можно, например, отметить отдельные фрагменты как выделенные, или сильно выделенные. Заметим, что речь идет о структурной разметке, которая не влияет на конкретное экранное представление фрагмента браузером. Поэтому такая разметка и называется логической. Фрагменты с логическим форматированием браузеры отображают на экране определенным образом, заданным по умолчанию. Вид отображения никак не связан со структурным типом фрагмента (т. е. именем тега логического форматирования), но может быть легко переопределен. </p> <p>Тэги физического форматирования определяют формат отображения указанного в них фрагмента текста в окне браузера (согласно предпочтениям автора документа). Например, для отображения фрагмента курсивом можно использовать тег курсива <I>. Этот и другие, часто используемые теги физического форматирования описаны ниже в разделе "Тэги физического форматирования текста"этой главы. </p> <p>Между разработчиками HTML-документов долгое время шли споры о преимуществах и недостатках того или иного подхода. С выходом спецификации HTML 4.0 эти споры завершились в пользу применения логического форматирования, поскольку был провозглашен принцип отделения структуры документа от его представления. Действительно, только на базе логического форматирования можно гибко управлять представлением документа, используя современные методы (основанные на таблицах стилей, динамически изменяющихся документах и т. д.). </p> <p>Тем не менее, на настоящий момент может свободно использоваться и физическое форматирование. В спецификации HTML 4.0 некоторые теги физического форматирования не рекомендуются для применения, однако, пока они все еще поддерживаются всеми браузерами. Заметим, что некоторые теги логического форматирования, призванные заменить отдельные теги физического форматирования, распознаются не всеми браузерами, что делает их применение крайне неудобным. Примером может служить логический тег <DEL>, который рекомендуется использовать вместо физического тега <STRIKE>. </p> <p>Рассматриваемые ниже теги относятся к тэгам уровня текста, т. е. призваны, в основном, размечать небольшие группы символов. Некоторые теги могут задавать разметку и на уровне блока. </p> <p><b> <span> Тэги логического форматирования текста </span> </b></p> <p><b>Тэг <ABBR> </b> </p> <p>Тэг <ABBR> отмечает свой текст как аббревиатуру (ABBReviation). Несмотря на то, что этот тег включен в спецификацию HTML 4.0, он до настоящего времени не поддерживается ни одним браузером. </p> <p><b>Тэг <ACRONYM> </b> </p> <p>Тэг <ACRONYM>. Так же, как и тег <ABBR>, используется для отметки аббревиатур. Этим тэгом рекомендуется отмечать так называемые акронимы, т. е. произносимые слова, состоящие из аббревиатур. Тег <ACRONYM> возможно в будущем станет использоваться для невизуального отображения элементов, например при речевом синтезе. </p> <p>Данный тег удобно использовать в сочетании с параметром TITLE, в качестве значения которого можно указать полную форму записи аббревиатуры. Тогда визуальные браузеры при наведении курсора на текст, размеченный тэгом <ACRONYM>, будут выдавать полное наименование в виде появляющейся подсказки. </p> <p>Заметим, что тег <ACRONYM> распознается только браузером Microsoft Internet Explorer. Пример: </p> <p><ACRONYM TITLE="Санкт-Петербургский государственный институт точной механики и оптики"> СПбГИТМО</ACRONYM> </span><span> - один из ведущих технических вузов Санкт-Петербурга </p> <p><b>Тэг <CITE> </b> </p> <p>Тэг <CITE> используется для отметки цитат или названий книг и статей, ссылок на другие источники и т. д. Браузерами такой текст обычно выводится курсивом. Пример: </p> <p><CITE>Невское время</CITE> является одной из наиболее популярных городских газет Санкт-Петербурга </p> <p><b>Тэг <CODE> </b> </p> <p>Тэг <CODE> отмечает свой текст как небольшой фрагмент программного кода. Как правило, отображается моноширинным шрифтом. Этот тег не следует путать с тэгом <PRE>Являющимся элементом уровня блока, который следует использовать для отметки больших фрагментов (листингов) кода. </p> <p>Например: </p> <p>Пример простейшего оператора языка программирования C:<BR> </p> <p><CODE>puts("Hello, World!");</CODE> </p> <p>Есть еще одно различие в использовании тегов <CODE> и <PRE>В коде программ часто бывает важно наличие нескольких идущих подряд пробелов. Их отображение будет сохранено только при использовании тега <PRE>. </p> <p><b> Тэг <DEL> </b></p> <p>Тэг <DEL> отмечает свой текст как удаленный. Этот элемент полезно использовать для отметки изменений, вносимых в документ от версии к версии. Тег <DEL> может использоваться как элемент уровня текста и как элемент уровня блока. </p> <p>Тэг имеет два необязательных параметра: CITE и DATETIME. Значение параметра CITE должно представлять собой URL-адрес документа, поясняющего причины удаления данного фрагмента. </p> <p>Параметр DATETIME указывает дату удаления в формате: YYYY-MM-DDThh:mm:ssTZD, определяющем год, месяц, число, часы, минуты и секунды удаления, а также часовой пояс (Time Zone). Например: </p> <p>Последней принятой спецификацией языка разметки HTML является версия <DEL DATETIME=1999-10-29T16:12:53+0.00>3.2</DEL> 4.0 </p> <p>Текст, помеченный тэгом <DEL> обычно отображается перечеркнутым текстом. В спецификации HTML 4.0 этому тэгу отдается предпочтение перед тэгом физического форматирования <STRIKE> или <S>, обозначающих перечеркнутый текст. Однако тег <DEL> </p> <p><b>Тэг <DFN> </b> </p> <p>Тэг <DFN> отмечает свой текстовый фрагмент как определение (DeFinitioN). Например, этим тэгом можно отметить какой-либо термин, когда он встречается в тексте в первый раз. Пример: </p> <p><DFN>Internet Explorer</DFN> - это популярный Web-браузер </p> <p>Тэг <DFN> поддерживается только браузером Microsoft Internet Explorer. Отображается по умолчанию курсивом. </p> <p><b> Тэг <INS> </b></p> <p>Тэг <INS> отмечает свой текст как вставку (INSertion). Этот элемент полезно использовать для отметки изменений, вносимых в документ от версии к версии. Тег <INS> может использоваться как элемент уровня текста и как элемент уровня блока. </p> <p>Тэг имеет два необязательных параметра: CITE и DATETIME. Значение параметра CITE должно представлять собой URL-адрес документа, поясняющего подробности внесенных дополнений. </p> <p>Параметр DATETIME указывает дату вставки в формате: YYYY-MM-DDThh:mm:ssTZD, определяющем год, месяц, число, часы, минуты и секунды вставки, а также часовой пояс (Time Zone). </p> <p>Текст, помеченный тэгом <INS>, обычно отображается подчеркнутым текстом. Тег <INS> в настоящее время распознается только браузером Microsoft Internet Explorer. </p> <p><b> Тэг <EM> </b></p> <p>Тэг <EM> (EMphasis - выделение, подчеркивание) используется для выделения важных фрагментов текста. Браузеры обычно отображают такой текст курсивом. Пример: </p> <p>Пример выделения <EM>отдельных слов</EM> текста </p> <p> <I>. </p> <p><b> Тэг <KBD> </b></p> <p>Тэг <KBD> отмечает текст как вводимый пользователем с клавиатуры. Обычно отображается моноширинным шрифтом, например: </p> <p>Чтобы запустить текстовый редактор, напечатайте: <KBD>notepad</KBD> </p> <p>Применение данного тега предпочтительнее применения тега физического форматирования <TT>. </p> <p><b> Тэг <Q> </b></p> <p>Тэг <Q> отмечает короткие цитаты в строке текста. В отличие от тега уровня блока <BLOCKQUOTE> при отображении не выполняется отделение размеченного текста пустыми строками. Обычно отображается курсивом. Тег <Q> (в отличие от <BLOCKQUOTE>) в настоящее время распознается только браузером Microsoft Internet Explorer. </p> <p>Тэг имеет параметр CITE, в качестве значения которого можно указать источник цитаты. </p> <p><b> Тэг <SAMP> </b></p> <p>Тэг <SAMP> отмечает текст как образец (SAMPle). Обычное использование этого тега - отметка текста, выдаваемого программами (sample output). Используется также для выделения нескольких символов моноширинным шрифтом. </p> <p>Применение данного тега предпочтительнее применения тега физического форматирования <TT>. Например: </p> <p>В результате работы программы будет напечатано: <SAMP>Hello, World!</SAMP> </span>. </p> <p><b> Тэг <STRONG> </b></p> <p>Тэг <STRONG>, как правило, используется для выделения важных фрагментов текста. Браузеры обычно отображают такой текст полужирным шрифтом. Пример: </p> <p>Санкт-Петербург расположен в самой восточной оконечности <STRONG>Финского залива</STRONG> в устье реки <STRONG>Невы< /STRONG> </p> <p>Применение данного тега предпочтительнее применения тега физического форматирования <B>. Тегом <STRONG> обычно размечают более важные фрагменты текста, чем те, что размечены тэгом <EM>. </p> <p><b> Тэг <VAR> </b></p> <p>Тэг <VAR> отмечает имена переменных программ. Обычно такой текст отображается курсивом. Пример: </p> <p>Задайте значение переменной <VAR>N</VAR> </p> <p>Отображение некоторых из примеров, приведенных при описании тегов логического форматирования текста, показано на рис. 1.1. На рисунке видно, как при наведении указателя мыши на текст, отмеченный тэгом <ACRONYM>, выдается подсказка. </p> <p><i><b>Рис. 1.1. </b> </i> <i>Примеры форматирования текста </i> </p> <p>Вы, наверное, обратили внимание на то, что некоторые элементы дают одинаковый результат. Более того, часть элементов может никак не изменять представление фрагмента текста на экране. Может возникнуть законный вопрос: для чего создано такое разнообразие элементов форматирования? </p> <p>Ответ - в названии этой группы элементов. Они предназначены для расстановки логических ударений, выделения логических частей и подчеркивания сути высказываний. Их использование весьма актуально, поскольку, вероятно, в ближайшем будущем возможности браузеров возрастут, например, станет возможен поиск цитат на Web-пространстве, а может быть следующее поколение браузеров научится читать документы вслух. Кроме того, авторам документов ничто не мешает уже сегодня, применяя таблицы стилей, задать желаемое отображение для любого из тэгов, переопределив значения по умолчанию. </p> <p> <b> <span>Тэги физического форматирования текста </span> </b></p> <p>Приведем описание тегов физического форматирования. Часть из них не рекомендуется к использованию спецификацией HTML 4.0 по приведенным выше причинам. Некоторые теги отменены (deprecate) спецификацией HTML 4.0, однако они продолжают поддерживаться браузерами. </p> <p><b> Тэг </p> <p>Тэг <B> отображает текст полужирным шрифтом. В большинстве случаев рекомендуется вместо тега <B> использовать тег логического форматирования <STRONG>. Например: </p> <p>Это <B>полужирный</B> шрифт. </p> <span> <img src='https://i0.wp.com/webnav.ru/books/html4/html_rules/02.gif' height="435" width="401" loading=lazy loading=lazy></span> <p><i><b>Рис. 1.2. </b> Примеры физического форматирования текста (браузером Netscape) </i> </p> <p><b> Тэг <<span>I > </span> </b></p> <p>Тэг <I> отображает текст курсивом. Для большинства случаев вместо этого тега рекомендуется использовать теги <EM>, <DFN>, <VAR> или <CITE>, поскольку последние лучше отражают назначение выделяемого текста. Например: </p> <p>Выделение <I>курсивом</I> </p> <p><b> Тэг <TT> </b></p> <p>Тэг <TT> отображает текст моноширинным шрифтом. Для большинства случаев вместо этого тега лучше использовать теги <CODE>, <SAMP> или <KBD>. Пример: </p> <p>Это <TT>моноширинный</TT> шрифт </span>. </p> <p><b> Тэг <U> </b></p> <p>Тэг <U> отображает текст подчеркнутым. Отмененный тэг. Вместо него рекомендуется использовать теги <STRONG> или <CITE>. Например: </p> <p>Пример <U>подчеркивания</U> текста </span>. </p> <p><b>Тэги <STRIKE> и <S> </b> </p> <p>Тэги <STRIKE> и <S> отображают текст, перечеркнутый горизонтальной линией. Отмененный тэг. Вместо него следует использовать тег <DEL>. Например: </p> <p>Пример <STRIKE>зачеркнутого</STRIKE> текста </span>. </p> <p>В настоящее время тег <DEL> поддерживается не всеми браузерами, поэтому пока рекомендуется использовать <DEL> в сочетании с тэгом <STRIKE>. А именно, внутрь тэга-контейнера <DEL> можно вложить пару тегов </p> <p><STRIKE>...</STRIKE> . </p> <p><b>Тэг <BIG> </b> </p> <p>Тэг <BIG> выводит текст шрифтом большего (чем непомеченная часть текста) размера. Вместо данного элемента лучше использовать <STRONG> или теги заголовков, например, <H3> <BIG></p> <p>Шрифт <BIG>большего</BIG> размера </span>. </p> <p><b> Тэг <SMALL> </b></p> <p>Тэг <SMALL> выводит текст шрифтом меньшего размера. Поскольку в HTML нет тэга, противоположного по действию тэгу <EM>, то для этих целей можно применять тег <SMALL>. Большинство браузеров поддерживают вложенные теги <SMALL>, однако использовать такой подход не рекомендуется. Например: </p> <p>Шрифт <SMALL>меньшего</SMALL> размера </span>. </p> <p><b>Тэг <SUB> </b> </p> <p>Тэг <SUB> сдвигает текст ниже уровня строки и выводит его (если возможно) шрифтом меньшего размера. Удобно использовать для математических индексов. Например: </p> <p>Пример шрифта для <SUB>нижнего</SUB> индекса </span>. </p> <p><b> Тэг <SUP> </b></p> <p>Тэг <SUP> сдвигает текст выше уровня строки и выводит его (если возможно) шрифтом меньшего размера. Удобно использовать для задания степеней чисел в математике. Например: </p> <p>Пример шрифта для <SUP>верхнего</SUP> индекса </span>. </p> <p><b> Тэг <BLINK> </b></p> <p>Тэг <BLINK> отображает мигающий текст. Этот тег не входит в спецификацию HTML и поддерживается только браузером Netscape. Опытные разработчики крайне редко прибегают к использованию этого тэга, поскольку наличие на странице мигающих символов раздражает многих пользователей. </p> <p><b> <span>Тэг </b></p> <p>Тэг-контейнер <SPAN> является аналогом тега уровня блока <DIV>. Может использоваться в тех случаях, когда требуется отметить фрагмент текста для задания его свойств, и при этом не удается использовать никакой другой структурный тег форматирования. </p> <p>Браузер Microsoft Internet Explorer дополнительно разрешает использование следующих параметров тэга: DIR, DATAFLD, DATAFORMATAS, DATASRC. Описание параметров можно найти во второй части книги. </p> <span> <img src='https://i0.wp.com/webnav.ru/books/html4/html_rules/03.gif' height="240" width="353" loading=lazy loading=lazy></span> <p><i><b>Рис. 1.3. </b> Использование вложенных тегов форматирования текста </i> </p> <p>Тэги форматирования могут быть вложенными друг в друга. При этом нужно внимательно следить, чтобы один контейнер находился целиком в другом контейнере. На рис. 1.3 показан пример использования вложения элемента курсива в элемент полужирного шрифта. Использован следующий фрагмент HTML-кода: </p> <p>Это <B>полужирный</B> шрифт. </p> <p> <p>Это <I>курсив</I>. </p> <p> <p>А здесь текст <B><I>полужирный и курсивный</I></В> </p> <p><b> Тэг <FONT> </b></p> <p>Тэг <FONT> указывает параметры шрифта. Он относится к тэгам физического форматирования уровня текста. </p> <p>Назначение параметров шрифта непосредственно в тексте документа нарушает основную идею разделения содержательной части документа и описания формы представления документа. Поэтому в спецификации HTML 4.0 данный тэг, а также тег <BASEFONT> отнесены к отмененным. Их дальнейшее применение не рекомендуется. </p> <p>Несмотря на эти грозные предупреждения, видимо, для самых простых документов физическое форматирование можно считать допустимым. Кроме того, начинать обучение основам форматирования проще всего именно с правил непосредственного указания форматов элементов. До стилевого оформления начинающий разработчик должен еще дорасти. </p> <p>Тэг <FONT> относится к последовательным элементам, поэтому не может включать в себя элементы уровня блока, например, <P>Или <TABLE>. </p> <p>Для тега могут задаваться следующие параметры: FACE, SIZE и COLOR. Заметим, что браузер Netscape допускает также использование двух дополнительных параметров: POINT-SIZE и WEIGHT, описание которых опускаем. </p> <ul><p>FACE </p> <p>Параметр FACE служит для указания типа шрифта, которым программа просмотра пользователя будет выводить текст (если такой шрифт имеется на компьютере). Значением данного параметра служит название шрифта, которое должно в точности совпадать с названием шрифта, имеющего у пользователя. Если такого шрифта не будет найдено, то данное указание будет проигнорировано и будет использован шрифт, установленный по умолчанию. </p> <p>Можно указать как один, так и несколько названий шрифтов, разделяя их запятыми. Это весьма полезное свойство, так как в разных системах могут быть почти идентичные шрифты, называющиеся по-разному. Другим важным качеством является задание предпочтения использования шрифтов. Список шрифтов просматривается слева направо. Если на компьютере пользователя нет шрифта, указанного в списке первым, то делается попытка найти следующий шрифт и т. д. </p> <p>Приведем пример использования параметра FACE: </p> <p><HTML> <HEAD> </p> <p><TITLE>Назначение шрифтов</TITLE> </p> <p></HEAD> </p> <p><BODY> </p> <p><BR> </p> <p><FONT FACE="Verdana", "Arial", "Helvetica"> </p> <p>Пример задания названия шрифта. </p> <p></FONT> </p> <p></BODY> </p> <p></HTML> </p> <p>На рис. 1.4 показано отображение примера браузером Netscape. В примере в качестве предпочитаемого указывается шрифт Verdana, при его отсутствии будет использован шрифт Arial и т. д. </p> </ul><p><img src='https://i1.wp.com/webnav.ru/books/html4/html_rules/04.gif' height="222" width="369" loading=lazy loading=lazy></p> <p><i><b>Рис. 1.4. </b> Отображение примера браузером Netscape </i> </p> <ul><p>SIZE </p> <p>Этот параметр служит для указания размеров шрифта в условных единицах от 1 до 7. Конкретный размер шрифта зависит от используемой программы просмотра. Принято считать, что размер "нормального" шрифта соответствует значению 3. </p> </ul><p>Настройки размеров шрифта, используемых по умолчанию, а также величины абсолютного изменения размеров шрифта, зависят от браузеров. На рис. 1.5 показано окно настройки браузера Netscape, в котором задаются шрифты, используемые по умолчанию. </p> <p>Размер шрифта указывается как абсолютной величиной (SIZE=2), так и относительной (SIZE=+1). Последний способ часто используется в сочетании с заданием базового размера шрифта с помощью тега <BASEFONT>. </p> <p><i><b> Примечание </b> </i></p> <p><i> <span>При указании размеров шрифтов записи типа "2" и "+2" (в отличие от большинства языков программирования, в которых унарный знак "+" можно опускать) дают принципиально разный результат. </span> </i></p> <p>Приведем пример, в котором использованы различные способы назначения размеров шрифтов. Отображение примера показано на рис. 1.6. </p> <p><br><img src='https://i2.wp.com/webnav.ru/books/html4/html_rules/05.gif' width="100%" loading=lazy loading=lazy></p> <p><i><b>Рис. 1.5. </b> Окно настройки параметров шрифтов браузера Netscape </i> </p> <p><br><img src='https://i2.wp.com/webnav.ru/books/html4/html_rules/06.gif' width="100%" loading=lazy loading=lazy></p> <p><i><b>Рис. 1.6. </b> Назначение размеров шрифтов </i> </p> <blockquote> <p><HTML> </p> <p><HEAD> </p> <p><TITLE>Назначение размеров шрифтов</TITLE> </p> <p></HEAD> </p> <p><BODY> </p> <p><FONT SIZE=1>Шрифт размера 1</FONT><BR> </p> <p><FONT SIZE=-1>Шрифт размера 2</FONT><BR> </p> <p><FONT SIZE=3>Шрифт размера 3</FONT><BR> </p> <p><FONT SIZE=4>Шрифт размера 4</FONT><BR> </p> <p><FONT SIZE=5>Шрифт размера 5</FONT><BR> </p> <p><FONT SIZE=+3>Шрифт размера 6</FONT><BR> </p> <p><FONT SIZE=7>Шрифт размера 7</FONT><BR> </p> <p></BODY> </p> <p></HTML> </p> </blockquote> <ul><p>COLOR </p> <p>Этот параметр устанавливает цвет шрифта, который может задаваться с помощью стандартных имен или в формате #RRGGBB. Приведем пример документа с разноцветным текстом. </p> <p><HTML> </p> <p><HEAD> </p> <p><TITLE>Выбор цвета шрифта</TITLE> </p> <p></HEAD> </p> <p><BODY> </p> <p><FONT COLOR=green>Текст зеленого цвета</FONT><BR> </p> <p><FONT COLOR=#FF0000>Текст красного цвета</FONT><BR> </p> <p></BODY> </p> <p></HTML> </p> </ul><p><b> Тэг <BASEFONT> </b></p> <p>Тэг <BASEFONT> используется для указания размера, типа и цвета шрифта, используемого в документе по умолчанию. Эти значения обязательны для всего документа, однако могут в нужных местах переопределяться с помощью тега <FONT>. После закрывающего тега </FONT> действие тега <BASEFONT> восстанавливается. Значения параметров шрифтов, используемых по умолчанию, могут неоднократно переопределяться в документе, т. е. тег <BASEFONT> может появляться в документе любое количество раз. </p> <p><i><b> Примечание </b> </i></p> <p><i> <span>Тэг <BASEFONT> может появляться также и в разделе <HEAD> документа. </span> </i></p> <p>Заметим, что для тега <BASEFONT> не существует закрывающего тэга. </p> <p>В качестве параметров могут использоваться точно такие же параметры, что и для тега <FONT>, а именно: FACE, SIZE и COLOR. Назначение и правила записи параметров аналогичны. </p> <p><i> <b><span>Примечание </b> </span> </i></p> <p><i> <span>Браузер Netscape не допускает применение параметра FACE тега <BASEFONT>. </span> </i></p> <p>Приведем пример использования тега <BASEFONT>. </p> <p><HTML> </p> <p><HEAD> </p> <p><TITLE>Назначение размеров шрифтов</TITLE> </p> <p></HEAD> </p> <p><BODY> </p> <p>Текст, записанный шрифтом по умолчанию. </p> <p><BASEFONT SIZE=2> <p>Шрифт размера 2. </p> <p><BASEFONT SIZE=4> </p> <p> <p>Шрифт размера 4. </p> <p> <p> <TABLE BORDER=1> </p> <p> <TR> </p> <p> <TD>Текст внутри ячейки таблицы</TD> </p> <p> </TR> </p> <p> </TABLE> </p> <p><P>Текст после таблицы </p> <p></BODY> </p> <p></HTML> </p> <p>В приведенном примере дважды переопределяется размер шрифта, используемого по умолчанию. Изначально он равен 3 (по умолчанию). Затем устанавливается равным 2, далее - 4. Обратите внимание на отображение данного примера (рис. 1.7). Видно, что для таблиц назначение тега <BASEFONT> не действует. Это характерно для многих браузеров, хотя формально нарушает идею применения тэга. </p> <span> <br><img src='https://i2.wp.com/webnav.ru/books/html4/html_rules/07.gif' width="100%" loading=lazy loading=lazy></span> <p><i><b>Рис. 1.7. </b> Отображение примера С ТЭГОМ <BASEFONT> (браузером Netscape) </i> </p> <p><b> <span> Форматирование HTML-документа </span> </b></p> <p><b> <span> Разделение на абзацы </span> </b></p> <p>Любые тексты, будь то школьное сочинение, заметка в газете или техническое описание устройства имеют определенную структуру. Элементами такой структуры являются заголовки, подзаголовки, таблицы, абзацы и др. </p> <p>Одним из первых правил составления практически любых документов является разбиение его текста на отдельные абзацы, выражающие законченную мысль. HTML-документы не являются исключением из этого правила. При создании документов с помощью текстовых редакторов разбиение на абзацы выполняется вводом символа перевода строки. Большинство редакторов реализует это при нажатии клавиши <Enter>. В HTML-документах символы перевода строки не приводят к образованию нового абзаца. </p> <p>Язык HTML предполагает, что автор документа ничего не знает о компьютере своего читателя. Читатель вправе установить любой размер окна и пользоваться любым из имеющихся у него шрифтов. Это означает, что место переноса в строке определяется только программой просмотра и установками конечного пользователя. Поскольку символы перевода строки оригинального документа игнорируются, то текст, отлично смотревшийся в окне редактора автора документа, может превратиться в сплошной неудобочитаемый текст в окне программы просмотра. </p> <p>Избежать этой неприятности позволяет применение специального тега разделения на абзацы <P>Перед началом каждого абзаца текста следует поместить тег <P>Закрывающий тег </P> не обязателен. Браузеры обычно отделяют абзацы друг от друга пустой строкой. </p> <p><i><b> Примечание </b> </i></p> <p><i> <span>Браузеры обычно интерпретируют несколько стоящих подряд тегов абзаца <P>Как один. То же самое относится и к тэгу перевода строки <BR>. Поэтому создать несколько пустых строк при помощи этих тегов не удается. </span> </i></p> <p>Тэг <P>Может задаваться с параметром горизонтального выравнивания ALIGN. Возможные значения параметра приведены в табл. 1.4. По умолчанию выполняется выравнивание по левому краю. </p> <p><i> <span><b>Таблица 1.4. </b>Значения параметра ALIGN </span> </i></p> <table border="1" width="550"><tr><td width="185"> <p><b><span>Значение параметра ALIGN </span> </b></p> </td> <td width="355"> <p><b>Действие </b></p> </td> </tr><tr><td width="185" valign="top"> <p>LEFT </p> </td> <td width="355" valign="top"> <p>Выравнивание текста по левой границе окна браузера </p> </td> </tr><tr><td width="185" valign="top"> <p>CENTER </p> </td> <td width="355" valign="top"> <p>Выравнивание по центру окна браузера </p> </td> </tr><tr><td width="185" valign="top"> <p>RIGHT </p> </td> <td width="355" valign="top"> <p>Выравнивание по правой границе окна браузера </p> </td> </tr><tr><td width="185" valign="top"> <p>JUSTIFY </p> </td> <td width="355" valign="top"> <p>Выравнивание по ширине (по двум сторонам) </p> </td> </tr></table><p>Заметим, что выравнивание по ширине (ALIGN = JUSTIFY) долгое время не поддерживалось браузерами. Во многих описаниях языка HTML для значений параметра выравнивания указывается только три варианта (LEFT, CENTER и RIGHT). В настоящее время все популярные браузеры умеют выполнять выравнивание по ширине. Некоторые проблемы создания документов с выравниванием по ширине рассмотрены также в главе 8. </p> <p><i><b> Примечание </b> </i></p> <p><i> <span>Отсутствие выравнивания по ширине в настоящее время кажется удивительным. Этот режим применяется очень часто для печатных изданий. Достаточно взять в руки любую газету или внимательно присмотреться к абзацам данной книги - все они выровнены по ширине. Однако для HTML-документов до последнего времени выравнивание по ширине не допускалось. Всего лишь пару лет назад ни один браузер не имел такого режима. Так, читатели, до сих пор использующие браузер Netscape версии 3.x, не смогут увидеть ровные строчки в документе. Можно попытаться предугадать, какие же еще возможности появятся в будущем у браузеров, сравнив возможности мощных текстовых редакторов и современных браузеров. Примером не реализованных пока возможностей может являться автоматическая расстановка переносов и пр. </span> </i></p> <p><b> Перевод строки </b></p> <p>При отображении текстовых документов в браузере место переноса строки в пределах абзаца определяется автоматически в зависимости от размера шрифтов и размера окна просмотра. Перенос строки может осуществляться только по символам-разделителям слов (например, пробелам). Иногда в документах требуется задать принудительный перевод строки, реализующийся независимо от параметров настроек браузера. Для этого служит тег принудительного перевода строки <BR>, который не имеет соответствующего закрывающего тэга. Включение тега <BR> в текст документа обеспечит размещение последующего текста с начала новой строки. Например, такой подход может использоваться для создания структур типа списков без использования специальных тегов разметки списка. Или, например, без данного тега не обойтись для отображения стихотворений и т. п. </p> <p>Приведем пример использования принудительного перевода строки (рис. 1.8): </p> <p><HTML> </p> <p><HEAD> </p> <p><TITLE>Использование принудительного перевода строки</TITLE> </p> <p></HEAD> </p> <p><BODY> </p> <p>Над омраченным Петроградом<BR> </p> <p>Дышал ноябрь осенним хладом.<BR> </p> <p>Плеская шумною волной<BR> </p> <p>В края своей ограды стройной,<BR> </p> <p>Нева металась, как больной<BR> </p> <p>В своей постеле беспокойной. </p> <p> <p><CITE>А.С.Пушкин. Медный всадник</CITE> </p> <p></BODY> </p> <p></HTML> </p> <span> <br><img src='https://i2.wp.com/webnav.ru/books/html4/html_rules/08.gif' width="100%" loading=lazy loading=lazy></span> <p><i><b>Рис. 1.8. </b> Тег <BR> можно использовать для принудительного перевода строки </i> </p> <p>В отличие от тега абзаца <P>При использовании тега <BR> не будет образована пустая строка. </p> <p>Использование тега <BR> требует осторожности - возможна ситуация, когда браузер уже сделал перевод строки за одно-два слова до того, как встретил ваш тег <BR>. Это бывает в случае, если ширина окна программы просмотра читателя меньше, чем тот же параметр программы, с помощью которой вы тестировали ваш документ. При этом может получиться, что в строке посреди абзаца останется только одно слово, нарушая тем самым красоту компоновки документа. </p> <p><i><b> Примечание </b> </i></p> <p><i> <span>При использовании тега <BR> для разбивки текста, обтекающего изображения или таблицы, можно задавать параметр CLEAR, прекращающий обтекание текста. Об этом можно прочитать в главах 3 и 4. </span> </i></p> <p><b> Тэги <NOBR>u <WBR> </b></p> <p>Бывают ситуации, когда требуется выполнить операцию противоположного назначения - запретить перевод строки. Для этого существует тэг-контейнер <NOBR>. Текст, размеченный этим тэгом, будет гарантированно располагаться в одной строке, независимо от ее длины. Если при этом получающаяся строка будет выходить за пределы окна просмотра браузера, то появится горизонтальная полоса прокрутки. </p> <p><i><b> Примечание </b> </i></p> <p><i> <span>Для обеспечения неразрывности текста, располагаемого в ячейках таблиц, существует специальный параметр NOWRAP тега <TD>. Об этом можно узнать в главе 4. </span> </i></p> <p>Размечая текст с помощью тега неразрывной строки <NOBR> можно получить очень длинные строки. Чтобы этого избежать, можно указать браузеру читателя место возможного перевода строки, что будет выполнено только при необходимости (так называемый "мягкий" перевод строки). Это можно осуществить, поставив в нужном месте текста тег <WBR> (Word BReak), который так же, как и тег <BR>, не нуждается в закрывающем тэге. </p> <p><i><b> Примечание </b> </i></p> <p><i> <span>Тэг <WBR> вообще не поддерживается браузером Netscape. Браузер Microsoft Internet Explorer распознает этот тег только в тексте, размеченном тэгами <NOBR>. </span> </i></p> <p><b> <span> Заголовки внутри HTML-документа </span> </b></p> <p>Наряду с названием всего документа, на Web-странице могут использоваться заголовки для отдельных частей документа. Эти заголовки могут иметь шесть различных уровней (размеров) и представляют собой фрагменты текста, которые выделяются на экране при отображении страницы браузером. </p> <p>Для разметки заголовков используются теги <HI>, <H2>, <H3>, <H4>, <H5> и <H6>. Эти теги требуют соответствующего закрывающего тэга. Заголовок с номером 1 является самым крупным (заголовок верхнего уровня), а с номером 6 - самым мелким. Теги заголовка являются элементами уровня блока, поэтому с помощью них нельзя размечать отдельные слова текста для увеличения их размера. При использовании тегов заголовков осуществляется вставка пустой строки до и после заголовка, поэтому тегов абзаца или перевода строки здесь не требуется. </p> <p>Тэги заголовков могут задаваться с параметром горизонтального выравнивания ALIGN. Возможные значения параметра совпадают с параметрами выравнивания тега абзаца <P> (см. табл. 1.4). </p> <p>Пример использования заголовков разного уровня с различным выравниванием (рис. 1.9): </p> <p><HTML> </p> <p><HEAD> </p> <p><TITLE>Примеры заголовков</TITLE> </p> <p></HEAD> </p> <p><BODY> </p> <p><H1>Заголовок размера 1</H1> </p> <p><H2>Заголовок размера 2</H2> </p> <p><H3 ALIGN=CENTER>Заголовок размера 3</H3> </p> <p><H4 ALIGN=RIGHT>Заголовок размера 4</H4> </p> <p><H5>Заголовок размера 5</H5> </p> <p><H6>Заголовок размера 6</H6> </p> <p>Основной текст документа </p> <p></BODY> </p> <p></HTML> </p> <span> <br><img src='https://i1.wp.com/webnav.ru/books/html4/html_rules/09.gif' width="100%" loading=lazy loading=lazy></span> <p><i><b>Рис. 1.9. </b> Отображение заголовков различного размера </i> </p> <p><b> <span> Горизонтальные линии </span> </b></p> <p>Другим методом разделения документа на части является проведение горизонтальных линий. Они визуально подчеркивают законченность той или иной области страницы. Сейчас часто используют рельефную, вдавленную линию, чтобы обозначить "объемность" документа. </p> <p>Тэг <HR> позволяет провести рельефную горизонтальную линию в окне большинства программ просмотра. Этот тег не является контейнером, поэтому не требует закрывающего тэга. До и после линии автоматически вставляется пустая строка. Параметры тега <HR> представлены в табл. 1.5. </p> <p><i> <span><b>Таблица 1.5. </b> Параметры тега <HR> </span> </i></p> <p>Пример: </p> <p><HR ALIGN=CENTER WIDTH=50% NOSHADE> </p> <p>В этом примере задается горизонтальная линия, которая занимает половину ширину окна просмотра и располагается посередине окна. Заметим, что параметры выравнивания имеют смысл только тогда, когда линия занимает не всю ширину окна. </p> <p><i><b> Примечание </b> </i></p> <p><i> <span>Браузер Netscape не позволяет использовать параметр COLOR тега <HR>. </span> </i></p> <p>Использование предварительно отформатированного текста </p> <p>Как видно в приведенных выше разделах, для разбивки текста по абзацам и обеспечения принудительного перевода строки следует пользоваться специальными тэгами. Однако бывают случаи, когда в HTML-документ необходимо включить текст, уже имеющий форматирование, выполненное традиционным способом при помощи символов перевода строки, необходимого количества пробелов, символов табуляции и т. д. Для решения таких задач предусмотрен специальный тэг-контейнер <PRE>Определяющий предварительно форматированный (п реформатированный) текст. </p> <p>Текст, размеченный тэгом <PRE>Будет отображаться в таком виде, как он выглядит в обычном текстовом редакторе. Для отображения всегда будет использоваться моноширинный шрифт. При этом вы сможете в большей степени контролировать вывод документа программой просмотра, правда, за счет некоторой потери в гибкости. </p> <p>Одним из вариантов использования этого тега являются таблицы, построенные без применения специальных тегов разметки таблиц. Другим важным </p> <p>применением является вывод на экран больших блоков программного кода (Java, C++ и т. п.), не позволяющий браузеру переформатировать их. </p> <p>Текст внутри контейнера <PRE>Может содержать элементы форматирования уровня текста, кроме следующих: <IMG>, <OBJECT>, <APPLET>, <BIG>, <SMALL>, <SUB>, <SUP>, <FONT>, <BASEFONT>. Недопустимо внутри преформатированного текста задавать элементы форматирования уровня блока, например, теги заголовков. Тег абзаца по логике вещей также не должен встречаться внутри преформатированного текста, однако если встречается, то будет реализовывать переход на новую строку (без образования пустой). </p> <p><i> <b> Примечание </b> </i></p> <p><i> <span>Тэг <PRE>Имеет необязательный параметр WIDTH, назначение которого - указывать браузеру максимальную длину строки преформатированного текста. В зависимости от этого значения браузер мог бы подобрать нужный шрифт и/или отступ для оптимального отображения преформатированного текста. В качестве значения по умолчанию предлагалось использовать 80. Другими рекомендованными значениями являются 40 и 132. Заметим, что читателям, имеющим значительный опыт работы со средствами вычислительной техники, эти числа говорят о многом. На деле же современные браузеры игнорируют значение параметра WIDTH. </span> </i></p> <p>Существуют еще несколько тэгов, решающих близкую по смыслу задачу. К ним относятся теги <ХМР>, <PLAINTEXT>И <LISTING>.Все три упомянутых тега в спецификации HTML 4.0 отмечены как устаревшие. Это означает, что в будущих версиях браузеры прекратят их поддержку. Вместо этих тегов рекомендуется использовать тег <PRE>. </p> <p><b> Тэг<<span>DIV > </span> </b></p> <p>Тэг-контейнер <DIV> является элементом уровня блока, служащим для выделения фрагмента документа. Целью этого выделения является управление параметрами данного фрагмента, которое обычно выполняется с помощью назначения стилей. Приведем пример: </p> <p><DIV STYLE="color: green"> </p> <p>(Фрагмент документа) </p> <p></DIV> </p> <p>В этом примере фрагмент HTML-документа обрамляется тэгами <DIV> и </DIV> для задания некоторых его свойств. В данном случае все текстовые элементы выделенного фрагмента будут отображаться зеленым (green) цветом. Аналогом тега <DIV> уровня текста является элемент . </p> <p>Заметим, что непосредственное назначение стилевых свойств отдельного фрагмента так, как это сделано в примере, использовать не желательно в соответствии с концепцией разделения структуры документа и его представления. Следует использовать таблицы стилей, речь о которых пойдет во второй части книги. </p> <p><b> Тэг <CENTER> </b></p> <p>Тэг-контейнер <CENTER> предназначен для горизонтального выравнивания всех элементов посередине окна просмотра браузера. Он имеет уровень блока и его полезно использовать для центрирования таких элементов, как, например, таблиц, так как они не могут быть центрированы назначением </p> <p>ALIGN=CENTER тега <TABLE>. </p> <p>По существу тег <CENTER> является краткой формой следующей записи: <DIV ALIGN=CENTER>. Дальнейшее использование тега <CENTER> по причинам, отмеченным в предыдущем разделе, также нежелательно. </p> <p><b> <span> Включение комментариев в документ </span> </b></p> <p>В HTML-документ можно включать комментарии, которые не будут видны читателю. Они могут состоять из произвольного числа строк и должны начинаться тэгом <!-- и заканчиваться тэгом -->. Все, что заключено внутри этих тэгов, при просмотре страницы не будет отображаться на экране. </p> <p><b>Disclosure: </b> Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more</p><p>Sharing is caring!</p> Attribute of What does <table rules=""> do? Was used to specify the display of internal borders between rows and colums. This attribute has been deprecated. Use CSS to style table borders instead. <p>The Rules Attribute has been Deprecated </span> This attribute has been deprecated and should not be used. Browser support for this attribute is limited and using it may produce unexpected results. Instead, use CSS to style tables.</p><h2>The RULES Attribute </h2><p>RULES , an HTML 4.0 attribute, indicates if there should be internal borders in the table. We"ll go over each of the values of RULES and demonstrate how they are used. RULES and FRAME have an annoying way of changing each other"s defaults. To simplify your life, here"s a rule of thumb: if you use RULES also use FRAME and BORDER . It"s easier to avoid getting confused.</p><h2><span>The NONE Value for the RULES Attribute </span></h2><p>RULES=NONE means that there are no inside borders. RULES=NONE is the default if you don"t use BORDER or set it to zero, but otherwise must be explicitly stated to have no inside borders. Note that currently Netscape does not recognize RULES .</p><p> <TABLE BORDER=2 RULES=NONE FRAME=BOX> </p><table border="2" rules="NONE"><tr><th>Name </th><th>Food </th> </tr><tr><td>Starflower </td><td>stir fied tofu </td> </tr><tr><td>Miko </td><td>vegetable rice soup </td> </tr><tr><td>Andy </td><td>hummus </td> </tr><tr><td>Ping </td><td>french toast </td> </tr></table><h2><span>The ALL Value for the RULES Attribute </span></h2><p>RULES=ALL indicates that all the internal borders should be visible. RULES=ALL is usually used in conjunction with FRAME=VOID so that there are outer borders but no inner borders.</p><p> <TABLE BORDER=2 FRAME=VOID RULES=ALL> </p><p>When applied to a table, that value gives us this result:</p><table border="2" rules="ALL"><tr><th>Name </th><th>Food </th> </tr><tr><td>Starflower </td><td>stir fied tofu </td> </tr><tr><td>Miko </td><td>vegetable rice soup </td> </tr><tr><td>Andy </td><td>hummus </td> </tr><tr><td>Ping </td><td>french toast </td> </tr></table><h2><span>The COLS Value for the RULES Attribute </span></h2><p>COLS indicates that there should be borders between the columns but not between rows.</p><p> <TABLE BORDER=2 RULES=COLS FRAME=BOX> </p><p>When applied to a table, that value gives us this result:</p><table border="2" rules="COLS"><tr><th>Name </th><th>Food </th> </tr><tr><td>Starflower </td><td>stir fied tofu </td> </tr><tr><td>Miko </td><td>vegetable rice soup </td> </tr><tr><td>Andy </td><td>hummus </td> </tr><tr><td>Ping </td><td>french toast </td> </tr></table><h2><span>The ROWS Value for the RULES Attribute </span></h2><p>RULES=ROWS indicates that there should be borders between rows but not between columns.</p><p> <TABLE BORDER=2 RULES=ROWS FRAME=BOX> </p><p>When applied to a table, that value gives us this result:</p><table border="2" rules="ROWS"><tr><th>Name </th><th>Food </th> </tr><tr><td>Starflower </td><td>stir fied tofu </td> </tr><tr><td>Miko </td><td>vegetable rice soup </td> </tr><tr><td>Andy </td><td>hummus </td> </tr><tr><td>Ping </td><td>french toast </td> </tr></table><h2><span>The GROUPS Value for the RULES Attribute </span></h2><p>RULES=GROUPS allows you to put borders between groups of table cells. There are two ways cells can be grouped: by row and by column. Let"s go over each of them. Note that currently Netscape does not recognize RULES .</p><h3>Grouping By Row </h3><p>To group by row use the <THEAD ...> , <TBODY ...> , <TFOOT ...> tags. <THEAD ...> indicates the header rows of the table, <TBODY ...> indicates the main body of the table, and <TFOOT ...> indicates the bottom rows. So, for example, this code creates a table with three groups. Borders appear just between groups:</p><p> <TABLE BORDER=2 RULES=GROUPS> <THEAD> <TR><TH>Name</TH><TH>Food</TH><TH>Price</TH></TR> </THEAD> <TBODY> <TR><TD>Starflower</TD><TD>stir fied tofu</TD><TD>5.95</TD></TR> <TR><TD>Miko</TD><TD>vegetable rice soup</TD><TD>4.95</TD></TR> <TR><TD>Andy</TD><TD>hummus</TD><TD>3.95</TD></TR> <TR><TD>Ping</TD><TD>french toast</TD><TD>5.95</TD></TR> </TBODY> <TFOOT> <TR><TH COLSPAN=2>Total</TH><TD>20.80</TD></TR> </TFOOT> </TABLE> </p><p>Here"s how that table renders:</p><table border="2" rules="GROUPS"><tr><th>Name </th><th>Food </th><th>Price </th> </tr><tbody><tr><td>Starflower </td><td>stir fied tofu </td><td>5.95 </td> </tr><tr><td>Miko </td><td>vegetable rice soup </td><td>4.95 </td> </tr><tr><td>Andy </td><td>hummus </td><td>3.95 </td> </tr><tr><td>Ping </td><td>french toast </td><td>5.95 </td> </tr></tbody><tr><th colspan="2">Total </th><td>20.80 </td> </tr></table><h3>Grouping By Column </h3><p>To group by column use the <COLGROUP ...> tag and its SPAN attribute. <COLGROUP ...> takes a little getting used to because it doesn"t actually go around any table cells. It goes at the top of the table code where it sets rules about the table columns including which are grouped together. <COLGROUP SPAN="..."> to indicates how many columns are in each group. If you leave SPAN out then it is assumed the group has just one column. So, for example, the following code says that the first column is in a group by itself and the three after that are together in a group. Notice that <COLGROUP ...> requires an end tag. Borders will go only between the groups.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </article> </div> <div class="full-place" data-place="article_before_social" data-priority="0" style="width: 100%;"></div> <div class="single-share"> <div class="single-share__top"> <div class="single-share__title">Мақала ұнады ма? <span>Достарыңызбен бөлісіңіз!</span> </div> <a href="#" onClick="window.open('http://www.facebook.com/sharer.php?url=https%3A%2F%2Fpolarize.ru%2Fgraphics%2Frules-html-obshchie-pravila-desyat-pravila-postroeniya-html-dokumentov%2F', 'sharer', 'toolbar=0,status=0, width=700, height=400'); return false" class="single-share__facebook"> <i class="fa fa-facebook-official"></i> <span>Бөлісіңіз <b>Facebook</b> </span> </a> </div> <div class="single-share__bottom"> <div class="single-share__group"> <a href="#" onClick="window.open('http://vk.com/share.php?url=https%3A%2F%2Fpolarize.ru%2Fgraphics%2Frules-html-obshchie-pravila-desyat-pravila-postroeniya-html-dokumentov%2F', 'sharer', 'toolbar=0,status=0, width=700, height=400'); return false" class="single-share-links-item single-share-links-item--vk"> <i class="fa fa-vk single-share-links-item__icon"></i> <span class="single-share-links-item__text"></span> </a> <a href="#" onClick="window.open('http://twitter.com/share?url=https%3A%2F%2Fpolarize.ru%2Fgraphics%2Frules-html-obshchie-pravila-desyat-pravila-postroeniya-html-dokumentov%2F', 'sharer', 'toolbar=0,status=0, width=700, height=400'); return false" class="single-share-links-item single-share-links-item--tw"> <i class="fa fa-twitter single-share-links-item__icon"></i> <span class="single-share-links-item__text">Twitter</span> </a> </div> <div class="single-share__group"> <a href="#" onclick="window.print();" class="single-share-item single-share-item--print"><i class="fa fa-print single single-share-item__icon"></i><span>шығару</span> </a> </div> </div> </div> <div class="article-user"> <div class="article-user-item article-user-question"> <div class="article-user-item__title">Бұл пайдалы болды ма?</div> <div class="article-user-item__bottom"> <div id="js-send-positive-rating" class="article-user-item__button _yes">Иә</div> <div class="article-user-item__button _no">Жоқ</div> </div> </div> <div id="js-success-send-form" class="article-user-item article-user-question _yes _hidden"> <div class="article-user-item__title">Пікіріңізге рахмет!</div> <div class="article-user-item__text"></div> </div> <div id="js-fail-send-form" class="article-user-item _no _hidden"> <div class="article-user-item__title">Бірдеңе дұрыс болмады және сіздің дауысыңыз есептелмеді.</div> </div> <div id="js-negative-rating-form" class="article-user-item article-user-question _no _hidden"> <div class="article-user-item__title">Рақмет сізге. Сіздің хабарламаңыз жіберілді</div> </div> <div class="article-user-item article-user-error"> <div class="article-user-item__title">Мәтіннен қате таптыңыз ба?</div> <div class="article-user-item__text">Оны бөлектеңіз, басыңыз <strong>Ctrl + Enter</strong>және біз бәрін түзетеміз!</div> </div> </div> <div class="full-place" data-place="article_before_related_articles" data-priority="0" style="width: 100%;"></div> <div class="similar-articles"> <div class="similar-articles__title"> <i class="fa fa-angle-double-left"></i>Қатысты кеңестер <i class="fa fa-angle-double-right"></i> </div> <div class="block-row"> <div class="block-column _triple"> <div class="similar-articles-block"> <div class="similar-articles-block__image"> <img src="/uploads/0745251484ca5a6d6120acfe9c584baf.jpg" alt="Іздеу жүйесін оңтайландырудағы алғашқы қадамдар Қарапайым машиналар форумы: авторлық құқықты және сыртқы сілтемелерді жою" loading=lazy loading=lazy> </div> <a href="https://polarize.ru/kk/program/bolnye-profile-powered-by-smf-pervye-shagi-v-poiskovoi-optimizacii-simple-machines-forum/" title="Іздеу жүйесін оңтайландырудағы алғашқы қадамдар Қарапайым машиналар форумы: авторлық құқықты және сыртқы сілтемелерді жою" class="similar-articles-block__title">Іздеу жүйесін оңтайландырудағы алғашқы қадамдар Қарапайым машиналар форумы: авторлық құқықты және сыртқы сілтемелерді жою</a> </div> </div> <div class="block-column _triple"> <div class="similar-articles-block"> <div class="similar-articles-block__image"> <img src="/uploads/ea68c5982e3dfb1e9eef43ed2358697a.jpg" alt="Форум қозғалтқышын автоматты түрде анықтау" loading=lazy loading=lazy> </div> <a href="https://polarize.ru/kk/photoshop/obayaniya-board-powered-by-smf-avtomaticheskoe-opredelenie-dvizhka-foruma/" title="Форум қозғалтқышын автоматты түрде анықтау" class="similar-articles-block__title">Форум қозғалтқышын автоматты түрде анықтау</a> </div> </div> <div class="block-column _triple"> <div class="similar-articles-block"> <div class="similar-articles-block__image"> <img src="/uploads/c0e84814a68b4eb86b69dcff482c0b13.jpg" alt="Форум механизмін автоматты түрде анықтау Smf арқылы жұмыс істейтін PHP тақырыбының әсерленген индексі" loading=lazy loading=lazy> </div> <a href="https://polarize.ru/kk/computer/temy-oformleniya-i-rusifikaciya-foruma-smf-a-tak-zhe-ustanovka/" title="Форум механизмін автоматты түрде анықтау Smf арқылы жұмыс істейтін PHP тақырыбының әсерленген индексі" class="similar-articles-block__title">Форум механизмін автоматты түрде анықтау Smf арқылы жұмыс істейтін PHP тақырыбының әсерленген индексі</a> </div> </div> </div> <div class="block-row"> <div class="block-column _triple"> <div class="similar-articles-block"> <div class="similar-articles-block__image"> <img src="/uploads/ea68c5982e3dfb1e9eef43ed2358697a.jpg" alt="Форум қозғалтқышын автоматты түрде анықтау" loading=lazy loading=lazy> </div> <a href="https://polarize.ru/kk/video/powered-by-smf-chto-takoe-post-avtomaticheskoe-opredelenie-dvizhka-foruma/" title="Форум қозғалтқышын автоматты түрде анықтау" class="similar-articles-block__title">Форум қозғалтқышын автоматты түрде анықтау</a> </div> </div> <div class="block-column _triple"> <div class="similar-articles-block"> <div class="similar-articles-block__image"> <img src="/uploads/ec6a89eaf76be17acc51fcb771a8bbb2.jpg" alt="Simple Machines (SMF) форумын спамнан қалай қорғауға болады" loading=lazy loading=lazy> </div> <a href="https://polarize.ru/kk/history/izobilii-board-powered-by-smf-kak-zashchitit-svoi-forum-na-simple-machines-smf-ot-spama/" title="Simple Machines (SMF) форумын спамнан қалай қорғауға болады" class="similar-articles-block__title">Simple Machines (SMF) форумын спамнан қалай қорғауға болады</a> </div> </div> <div class="block-column _triple"> <div class="similar-articles-block"> <div class="similar-articles-block__image"> <img src="/uploads/96f628ffb05272e1135fb4fb67b5ff25.jpg" alt="Біз ең жақсы дерекқорларды өзіміз жинаймыз" loading=lazy loading=lazy> </div> <a href="https://polarize.ru/kk/mobile/urok-tretii-sobiraem-luchshie-bazy-samostoyatelno-temy-oformleniya-i/" title="Біз ең жақсы дерекқорларды өзіміз жинаймыз" class="similar-articles-block__title">Біз ең жақсы дерекқорларды өзіміз жинаймыз</a> </div> </div> </div> </div> <div class="full-place" data-place="article_after_related_articles" data-priority="0" style="width: 100%;"></div> <div class="comments"> <div id="mc-container"></div> </div> </article> <aside class="sidebar hide-on-mobile"> <div class="day-sovet"> <h3 class="day-sovet__hd">Күн тақырыбы</h3> <div class="day-sovet__box"> <img src="/uploads/2c3a6a462168a237416426ba41720319.jpg" alt="Біз ең жақсы дерекқорларды өзіміз жинаймыз" class="day-sovet__image" loading=lazy loading=lazy> <a href="https://polarize.ru/kk/category/computer/" class="day-sovet__category"> <span>Компьютер</span> </a> </div> <a href="https://polarize.ru/kk/computer/urok-tretii-sobiraem-luchshie-bazy-samostoyatelno-avtomaticheskoe-opredelenie-dvizhka-foruma-kollega-i/" class="day-sovet__link"> <span>Біз ең жақсы дерекқорларды өзіміз жинаймыз</span> </a> </div> <!-- /next_post --> <div class="vk-widget"> <h3 class="vk-widget__hd">Жарнама</h3> </div> <div class="popular-articles"> <h3 class="black-hd popular-articles__title">Танымал мазмұн</h3> <div class="popular-articles__item"> <div class="row-gui"> <div class="row-gui__image"> <a href="https://polarize.ru/kk/components/silny-index-php-topic-powered-by-smf-urok-tretii-sobiraem-luchshie-bazy-samostoyatelno/" class=""> <img src="/uploads/ca29643e68d897a558c019e0ffd2d124.jpg" alt="Күшті индекс PHP тақырыбы smf арқылы жұмыс істейді" loading=lazy loading=lazy> </a> </div> <div class="row-gui__content"> <a href="https://polarize.ru/kk/components/silny-index-php-topic-powered-by-smf-urok-tretii-sobiraem-luchshie-bazy-samostoyatelno/" class="row-gui__link"> <span>Күшті индекс PHP тақырыбы smf арқылы жұмыс істейді</span> </a> </div> </div> </div> <div class="popular-articles__item"> <div class="row-gui"> <div class="row-gui__image"> <a href="https://polarize.ru/kk/graphics/temy-oformleniya-i-rusifikaciya-foruma-smf-a-tak-zhe-ustanovka/" class=""> <img src="/uploads/5ba20586d9ab3fd4d86ca566932873aa.jpg" alt="SMF форумының тақырыптары мен орысшалануы, сонымен қатар Joomla-да JFusion компонентін орнату" loading=lazy loading=lazy> </a> </div> <div class="row-gui__content"> <a href="https://polarize.ru/kk/graphics/temy-oformleniya-i-rusifikaciya-foruma-smf-a-tak-zhe-ustanovka/" class="row-gui__link"> <span>SMF форумының тақырыптары мен орысшалануы, сонымен қатар Joomla-да JFusion компонентін орнату</span> </a> </div> </div> </div> <div class="popular-articles__item"> <div class="row-gui"> <div class="row-gui__image"> <a href="https://polarize.ru/kk/components/podzemnaya-zheleznaya-doroga-podzemnaya-pochtovaya-zheleznaya-doroga/" class=""> <img src="/uploads/f605e76bcc204a3d5447b00b057e1143.jpg" alt="Жер асты пошта темір жолы Жер асты жолы" loading=lazy loading=lazy> </a> </div> <div class="row-gui__content"> <a href="https://polarize.ru/kk/components/podzemnaya-zheleznaya-doroga-podzemnaya-pochtovaya-zheleznaya-doroga/" class="row-gui__link"> <span>Жер асты пошта темір жолы Жер асты жолы</span> </a> </div> </div> </div> <div class="popular-articles__item"> <div class="row-gui"> <div class="row-gui__image"> <a href="https://polarize.ru/kk/graphics/vazhnoi-profile-powered-by-smf-kak-zashchitit-svoi-forum-na-simple-machines-smf-ot-spama/" class=""> <img src="/uploads/eaaa47dc352d9a11d7802fc096ea144d.jpg" alt="Simple Machines (SMF) форумын спамнан қалай қорғауға болады" loading=lazy loading=lazy> </a> </div> <div class="row-gui__content"> <a href="https://polarize.ru/kk/graphics/vazhnoi-profile-powered-by-smf-kak-zashchitit-svoi-forum-na-simple-machines-smf-ot-spama/" class="row-gui__link"> <span>Simple Machines (SMF) форумын спамнан қалай қорғауға болады</span> </a> </div> </div> </div> <div class="popular-articles__item"> <div class="row-gui"> <div class="row-gui__image"> <a href="https://polarize.ru/kk/computer/luchshie-mody-dlya-dragon-age-origins-dragon-age-origins-sostavlyaem-universalnuyu/" class=""> <img src="/uploads/6eba988950eb64c9901802caf033297b.jpg" alt="Dragon Age - Origins - Әмбебап топты құру Айдаһар дәуірінен шыққан сәнді киімдер" loading=lazy loading=lazy> </a> </div> <div class="row-gui__content"> <a href="https://polarize.ru/kk/computer/luchshie-mody-dlya-dragon-age-origins-dragon-age-origins-sostavlyaem-universalnuyu/" class="row-gui__link"> <span>Dragon Age - Origins - Әмбебап топты құру Айдаһар дәуірінен шыққан сәнді киімдер</span> </a> </div> </div> </div> <div class="popular-articles__item"> <div class="row-gui"> <div class="row-gui__image"> <a href="https://polarize.ru/kk/windows/vhodnoi-signal-hdmi-v-2-0-versii-hdmi-kabelei-opisanie-i-sovmestimost-chto-skryvaetsya-za-nomerami/" class=""> <img src="/uploads/0f70c9ee64d8f4a94e6e9df8c0a2b389.jpg" alt="HDMI v 2.0 кірісі. HDMI кабелінің нұсқалары: сипаттамасы және үйлесімділігі. Нұсқа нөмірлерінің артында" loading=lazy loading=lazy> </a> </div> <div class="row-gui__content"> <a href="https://polarize.ru/kk/windows/vhodnoi-signal-hdmi-v-2-0-versii-hdmi-kabelei-opisanie-i-sovmestimost-chto-skryvaetsya-za-nomerami/" class="row-gui__link"> <span>HDMI v 2.0 кірісі. HDMI кабелінің нұсқалары: сипаттамасы және үйлесімділігі. Нұсқа нөмірлерінің артында</span> </a> </div> </div> </div> <div class="popular-articles__item"> <div class="row-gui"> <div class="row-gui__image"> <a href="https://polarize.ru/kk/photoshop/tarify-i-pakety-uslug-ot-kompanii-beltelekom-novyi-syurpriz-ot/" class=""> <img src="/uploads/433f92930e3a906b94df7d58b3faa85f.jpg" alt="Beltelecom-дан жаңа тосын сый – Yasna сервистік пакеті Yasna пакетінде сізге ең қолайлысы" loading=lazy loading=lazy> </a> </div> <div class="row-gui__content"> <a href="https://polarize.ru/kk/photoshop/tarify-i-pakety-uslug-ot-kompanii-beltelekom-novyi-syurpriz-ot/" class="row-gui__link"> <span>Beltelecom-дан жаңа тосын сый – Yasna сервистік пакеті Yasna пакетінде сізге ең қолайлысы</span> </a> </div> </div> </div> </div> </aside> </div> <div class="full-place" data-place="article_desktop_fixed" data-priority="0" style="width: 100%;"></div> <footer class="footer"> <div class="footer__wrapper"> <div class="footer__box"> <a href="https://polarize.ru/kk/" class="footer__logo1"><img src="/logo.png" loading=lazy loading=lazy></a><br> <div class="social-buttons"> <div class="social-buttons-list"> <a href="" class="social-buttons-list__item _vk">Вконтакте</a> <a href="https://facebook.com/" class="social-buttons-list__item _fb">Facebook</a> </div> </div> <p class="footer__copyright">© 2022. Аппараттық және бағдарламалық құралды орнату</p> </div> <nav class="footer-menu"> <a class="footer-menu__item" href="https://polarize.ru/kk/category/internet/">ғаламтор</a> <a class="footer-menu__item" href="https://polarize.ru/kk/category/program/">Бағдарламалар</a> <a class="footer-menu__item" href="https://polarize.ru/kk/category/game/">Ойындар</a> <a class="footer-menu__item" href="https://polarize.ru/kk/category/history/">Оқиға</a> <a class="footer-menu__item" href="https://polarize.ru/kk/category/windows/">Windows</a> <a class="footer-menu__item" href="https://polarize.ru/kk/category/computer/">Компьютер</a> <a class="footer-menu__item" href="https://polarize.ru/kk/category/graphics/">Графика</a> <a class="footer-menu__item" href="https://polarize.ru/kk/category/components/">Құрамдас бөліктер</a> </nav> <div class="footer__counters"> </div> </div> </footer> <div class="scroll-up"> <div id="toTop"><span class="up_b"></span>Жоғарыға</div> </div> <div class="full-place" data-place="article_modal" data-priority="0" style="width: 100%;"></div> <div class="full-place" data-place="article_modal" data-priority="0" style="width: 100%;"></div> <script data-rocketsrc="/assets/sovets24-2017/js/app-20171130102046.js" type="text/rocketscript"></script> <script type="text/rocketscript"> if(window.location.hostname.indexOf('hghltd.yandex.net')!=-1){ // hghltd.yandex.net var i; var x = document.getElementsByClassName("direct"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } } (function(H){ H.className=H.className.replace(/\bno-js\b/,'js')} )(document.documentElement); </script> <script type="text/rocketscript"> APP.pages.articleView(); APP.modules.ratingBlock.init(); Engine.article.errorInTextReport(); document.oncopy = Engine.addLinkOnCopy; </script> <script type="text/rocketscript"> var BANNERS = { types: { code: 1, consultant: 6, modal: 9, offer: 7 } } </script> </body> </html>