MaxEdu.ru
» » » Принципи побудови та інтерпретації мови HTML
Вернуться назад

Принципи побудови та інтерпретації мови HTML

HTML (Hyper Text Marker Language) – мова розмітки гіпертексту. Це стандарт, відповідно до якого документи Web зображаються броузерами Internet, наприклад, Netscape, Accent, Мosaic, Amaya та інші.
Мова HTML – це метод розмітки стандартного тексту таким чином, щоб броузер інтерпретував визначені теги та відтворював інформацію в потрібному масштабі (форматі). Теги, що розміщуються в тексті, можуть змінювати шрифти, стилі та створювати спеціальні ефекти.
Крім зміни стилю тексту, HTML повідомляє броузеру, коли деякий текст на сторінці повинен вважатися гіпертекстовим посиланням, в якому місці вставити графічні та спеціальні елементи, команди відправки пошти та інші спеціальні можливості.
На рис. 1 наведений текст початкового HTML-коду. На рис. 28 наведений той же текст в інтерпретації броузера Internet Explorer.
HTML не є мовою програмування у повному сенсі слова. У неї специфічний формат, який є світовим стандартом. Цей стандарт називається Document Type Definition (Визначення типу стандарту), або ДТД. Першим ДТД-стандартом на HTML була версія 1.0, потім 2.0. Нещодавно закінчилось обговорення версії 3.2 (версія 4.0 ніколи не була випущена).
В HTML 3.2, 4.0 включили нові теги, що дозволяють краще керувати текстом та швидше включати мультимедійні кліпи. Додаткова інформація про мову HTML міститься на доменній сторінці Web-консорціума: http://www.w3.org.
Незважаючи на те, що HTML є світовим стандартом проектування Web-сторінок, існує декілька його розширень, що розроблені для броузерів Netscape та Microsoft. Ці дві компанії запропонували спеціальні розширення HTML версії 3.2, які надають Web-сторінкам підтримку мультимедіа та додаткову гнучкість в управлінні текстом та шрифтом.
Мова HTML не дуже складна для вживання, але в ній є деякі тонкощі. По суті справи HTML в основному інтуїтивна і її легко читати. Вона близька до англійської мови.
Рис. 1. Сторінка HTML в текстовому редакторі
Основні важливі теги HTML
Існує чотири стандартних теги, які частково присутні на кожній Web-сторінці:
1. повідомляє броузеру, що документ написаний мовою HTML
2. відмічає вступну та заголовну частину HTML-документа
3. відмічає основний текст та інформацію
4.
вміщує адресу електронної пошти для отримання більш детальної
інформації про цю Web-сторінку.
Будь яка команда або тег, або дескриптор наводиться в початковому тексті документа таким чином: знак , наприклад, .
Команда діє до тих пір, поки не буде відмінена (закрита). Вона створюється точно так як і звичайна команда, тільки поряд з назвою команди ставиться коса лінія (/). Так, останньою стрічкою документа HTML повинна бути наступна команда: .
Такий формат використовується з невеликими змінами для усіх команд HTML. Модифікація можлива, наприклад, в тих командах, які мають параметри. В таких випадках застосовується наступний формат: , де параметр визначає проектований параметр, а значення визначає величину, яка присвоюється усьому параметру.
Мова HTML не враховує регістр, тому команди і інтерпретуються однаково. Рядкові та прописні букви відрізняються тільки при використанні таких параметрів, як TYPE для списку.
Щоб закрити дію команди з параметрами, вказується тільки назва команди і .
Форматування символів
На мові HTML текстову інформацію можна виділяти курсивом, напівжирним шрифтом або за допомогою підкреслення. Для цього використовуються наступні команди:
Курсив. Для того, щоб виділити слова або ціле речення курсивом, використовують команду .
Напівжирний. Для того, щоб виділити слово або усе речення за допомогою напівжирного шрифту, використовують команду .
Підкреслення. Для того, щоб виділити слова або усе речення за допомогою підкреслення, використовують команду .
Перераховані вище типи виділення тексту можна комбінувати. На наведених нижче рис. 3, 4 подається приклад використання команд , , та .
Рис. 2. Типова WEB-сторінка
Наприклад, вхідний текст: “На лекції були присутні 35 студентів” в броузері Web буде виглядати таким чином: “На лекції були присутні 35 студентів”.
Елементи сторінки Web
Основні команди, що задають формат елементів сторінки, такі:
оформлення заголовку
встановлення розмірів шрифтів
задання зв'язків з іншими документами
визначення різних типів абзацу
Оформлення заголовку
Команди, розміщені в заголовку документа, містять інформацію про сторінки, що належить до назви ресурсу, предметних покажчиків та відомості про зв’язки.
Інформація, що має відношення до заголовку, розміщується на початку документа та виділяється за допомогою команд і .
Назва. Назва документу з’являється в рядку заголовку вікна броузера при звертанні до цього ресурсу. Назва виділяється за допомогою команд і
Base/HREF. Значення HREF (Header that References – заголовок, який посилається на певний URL). Формат команди наступний: .
Замість URL проставляється повна адреса документу. Ця корисна команда використовується при необхідності задання зв’язку з іншими ресурсами. Вона використовується для того, щоб задати ім’я файлу, в якому зберігається документ.
Назва розділів. Назва розділів – це заголовок, який приводиться на початку деякої частини тексту. При розділенні документу можливо використовувати різні рівні. В HTML дозволяється 6 рівнів назв розділів, кожний з яких задається за допомогою дескриптора , де n – число від 1 до 6.
Рис. 3. Програма на HTML
На рис. 5 та рис. 6 наведений приклад використання оформлення заголовку.
Основний текст документу
До основного тексту відносяться всі абзаци, списки, визначення та форми. В цьому розділі міститься значна частина інформації. Тут можуть бути розміщені графічні та звукові файли.
Абзаци
Для розбивки тексту документу використовується команда

. Тільки її застосування, а не відступи та переведення каретки, визначає початок нового абзацу. Наприклад, текст «Лекція сьогодні буде о десятій годині дня при завантаженні в броузер буде виглядати так:
Списки
За допомогою команд HTML можна створювати списки декількох видів. Щоб позначити початок списку, використовують наведені нижче дескриптори. Поряд з кожним елементом списку повинна бути вставлена команда

  • .
    Пронумерований (ordered) список
    Для завдання пронумерованого списку використовується команда
      . Первісний код пронумерованого списку має наступний вигляд:

      1. Element one
      2. Element two
      3. Element three

      Рис. 4. Зображення Web-сторінки
      Маркерований (unnumbered) список
      Перед кожним елементом такого списку стоїть спеціальний маркер. Для задання маркерованого списку використовується команда
        . Початковий код маркерованого списку виглядає так:

        • Element one
        • Element two
        • Element three

        Описовий (descriptive) список
        Список опису, що задається командою
        , складається із заголовків та елементів списку. Заголовок задається дескриптором
        , а описовий елемент –
        .
        Спеціальне форматування тексту
        Крім розглянутих раніше способів виділення тексту існує і багато інших. Далі розглянуті деякі команди, найбільш вживані для спеціального форматування.
        Рис. 5. Текст HTML оформлення заголовку
        Відформатований текст
        Під відформатованим текстом розуміють файл, створений деякою програмою та призначений для виведення на екран власне в такому ж вигляді. Для виділення відформатованого тексту використовується команда
         і 
        . В тексті можуть бути вмонтовані інші дескриптори.
        Команда застосовується тоді, коли не дозволяється використання дескрипторів.<br />Цитування<br />Коли необхідно процитувати деякий фрагмент тексту, що міститься в іншому документі, використовується команда <BLOCKQUOTE />.<br />Коментарі<br />Часто в початковий текст документу HTML необхідно вставити коментарі (примітки на пам’ять), в яких би вказувалось, що власне повинна робити та чи інша команда. Інформацію такого ґатунку в більшості випадків показувати користувачеві недоцільно. Для цього використовують команду: .<br />Адреса<br />Команда <ADRESS> виділяє приведений за нею текст за допомогою курсиву. Частіше за все її використовують при показі адреси електронної пошти або місцезнаходження автора документу. Текст, який знаходиться між дескрипторами <ADRESS> та </ADRESS>, буде відділений від попередньої частини документу спеціальною лінією.<br />Приклади<br />Для того, щоб вивести на екран деякий фрагмент тексту в точно такому вигляді, в якому він введений в документі HTML, застосовують команду <SAMP />.<br />Малювання горизонтальних ліній<br />Команда <HR /> дозволяє малювати від одного краю сторінки до другого горизонтальну лінію.<br />Рис. 6. Зображення заголовку на екрані <div class="clear"></div> <nofollow> <noindex> <div id="torrent-block"> <p><strong>Внимание, отключите Adblock</strong></p> <p>Вы посетили наш сайт со включенным блокировщиком рекламы!<br>Ссылка для скачивания станет доступной сразу после отключения Adblock!</p> </div> <a id="torrent" class="order-button" onclick="yaCounter37926910.reachGoal('Straight'); return true;" href="https://sub2.bubblesmedia.net/sb/clk/s/1538/h/4587d6/o/145/sub/0?a=1&fu=https://maxedu.ru/print:page,1,5776-principi-pobudovi-ta-nterpretacyi-movi-html.html" rel="nofollow">Скачать</a> </noindex> </nofollow> </div> </div> </div> <span itemprop="genre" class="DN">Рефераты по информатике</span> <span itemprop="description" class="DN">HTML (Hyper Text Marker Language) – мова розмітки гіпертексту. Це стандарт, відповідно до якого документи Web зображаються броузерами Internet,</span> <div class="DN" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> Оценок: <span itemprop="ratingCount">400</span> (Средняя <span itemprop="ratingValue">5</span> из <span itemprop="bestRating">5</span>) </div> <div class="clear"></div> <div id="info-w"> <div id="info"> <div class="info info-1"> <p>Специалисты RetsCorp работают в digital-сфере более 7 лет. За это время мы разработали более 500+ успешных проектов. Основываясь на своем опыте и знании рынка, мы с уверенностью можем сказать, что будет работать, а что — нет. Заказывая <a target="_blank" href="https://retscorp.com/landing-page.html">создание лендинга для бизнеса</a> в нашей студии, вы получаете работающие решения, необходимые именно вашему бизнесу.</p> <p>Сотрудничая с нами, вы будете не клиентом, а нашим партнером. Благодаря этому мы будем развивать ваш бизнес как собственный. Мы так же как и вы заинтересованы в успехе проекта, поскольку ваша успешность будет нашей рекламой.</p> </div> </div> </div> <div class="clear"></div> <div id="bottom-w"> <div id="bottom"> <div class="social"> <a href="mailto:retsmoney@yandex.ru" class="em">Обратная связь</a> <div class="clear"></div> </div> <div class="botcop">© 2014 - 2022 MaxEdu.ru</div> <div class="clear"></div> </div> </div> <div class="clear"></div> </div> <div id="menu-w-1"> <div id="menu-w"> <div id="menu"> <a class="referats" title="Рефераты">Рефераты</a> <a class="course" title="Курсовые работы">Курсовые работы</a> <a class="diploma" title="Дипломные работы">Дипломные работы</a> <a class="essay" title="Сочинения">Сочинения</a> <a class="books" title="Книги">Книги</a> <a class="other" title="Прочее">Прочее</a> <div class="clear"></div> </div> </div> </div> <div id="menu-referats" itemscope itemtype="http://schema.org/SiteNavigationElement"> <div id="menu-w"> <div id="menu"> <a class="back">Назад</a> <a href="/referats/" title="Рефераты" itemprop="url">Рефераты</a> <a href="/referats/economy/" target="_blank">Рефераты по экономике</a> <a href="/referats/accounting/" target="_blank">Рефераты по бухгалтерскому учету и аудиту</a> <a href="/referats/nformatika/" target="_blank">Рефераты по информатике</a> <a href="/referats/languages/" target="_blank">Рефераты по иностранным языкам</a> <a href="/referats/management/" target="_blank">Рефераты по менеджменту</a> <a href="/referats/enterprise-economy/" target="_blank">Рефераты по экономике предприятия</a> <a href="/referats/geography/" target="_blank">Рефераты по географии</a> <a href="/referats/ukrainian/" target="_blank">Рефераты по украинской литературе</a> <div class="clear"></div> </div> </div> </div> <div id="menu-course" itemscope itemtype="http://schema.org/SiteNavigationElement"> <div id="menu-w"> <div id="menu"> <a class="back">Назад</a> <a href="/course/" title="Курсовые работы" itemprop="url">Курсовые работы</a> <a href="/course/course-economy/" target="_blank">Курсовые работы по экономике</a> <a href="/course/course-accounting/" target="_blank">Курсовые работы по бухгалтерскому учету и аудиту</a> <a href="/course/course-informatika/" target="_blank">Курсовые работы по информатике</a> <div class="clear"></div> </div> </div> </div> <div id="menu-diploma" itemscope itemtype="http://schema.org/SiteNavigationElement"> <div id="menu-w"> <div id="menu"> <a class="back">Назад</a> <a href="/diploma/" title="Дипломные работы" itemprop="url">Дипломные работы</a> <a href="/diploma/diploma-economy/" target="_blank">Дипломные работы по экономике</a> <a href="/diploma/diploma-accounting/" target="_blank">Дипломные работы по бухгалтерскому учету и аудиту</a> <a href="/diploma/diploma-informatika/" target="_blank">Дипломные работы по информатике</a> <div class="clear"></div> </div> </div> </div> <div id="menu-essay"> <div id="menu-w"> <div id="menu"> <a class="back">Назад</a> <a href="/essay/" title="Сочинения">Сочинения</a> <a href="/essay/rusworks/" target="_blank">Сочинения по русскому языку</a> <a href="/essay/worldworks/" target="_blank">Сочинения по зарубежной литературе</a> <a href="/essay/ukrworks/" target="_blank">Сочинения по украинскому языку</a> <a href="/essay/schoolworks/" target="_blank">Школьные сочинения</a> <div class="clear"></div> </div> </div> </div> <div id="menu-books" itemscope itemtype="http://schema.org/SiteNavigationElement"> <div id="menu-w"> <div id="menu"> <a class="back">Назад</a> <a href="/books/" title="Книги" itemprop="url">Книги</a> <a href="/books/proza/" target="_blank">Проза</a> <a href="/books/fantastyka-y-fentezy/" target="_blank">Фантастика и Фэнтези</a> <a href="/books/prykliuchenyia/" target="_blank">Приключения</a> <a href="/books/kulynaryia/" target="_blank">Кулинария</a> <a href="/books/detektyvy-y-tryllery/" target="_blank">Детективы и Триллеры</a> <a href="/books/liubovnye-romany/" target="_blank">Любовные романы</a> <a href="/books/detskye/" target="_blank">Детские</a> <a href="/books/poezyia-y-dramaturgyia/" target="_blank">Поэзия и драматургия</a> <a href="/books/starynnaia-lyteratura/" target="_blank">Старинная литература</a> <a href="/books/nauchno-obrazovatelnaia/" target="_blank">Научно-образовательная</a> <a href="/books/kompiutery-y-nternet/" target="_blank">Компьютеры и Интернет</a> <a href="/books/spravochnaia-lyteratura/" target="_blank">Справочная литература</a> <a href="/books/dokumentalnaia-lyteratura/" target="_blank">Документальная литература</a> <a href="/books/relygyia-y-duhovnost/" target="_blank">Религия и духовность</a> <a href="/books/yumor/" target="_blank">Юмор</a> <a href="/books/dom-y-semia/" target="_blank">Дом и Семья</a> <a href="/books/delovaia-lyteratura/" target="_blank">Деловая литература</a> <a href="/books/tehnyka/" target="_blank">Техника</a> <a href="/books/dramaturgyia/" target="_blank">Драматургия</a> <a href="/books/folklor/" target="_blank">Фольклор</a> <a href="/books/voennoe-delo/" target="_blank">Военное дело</a> <a href="/books/prochee/" target="_blank">Прочее</a> <div class="clear"></div> </div> </div> </div> <div id="menu-other"> <div id="menu-w"> <div id="menu"> <a class="back">Назад</a> <a href="/report/" target="_blank">Доклады</a> <a href="/articles/" target="_blank">Статьи</a> <a href="/practice/" target="_blank">Отчеты по практике</a> <a href="/laboratory/" target="_blank">Лабораторные работы</a> <a href="/examination/" target="_blank">Контрольные работы</a> <a href="/crib/" target="_blank">Шпаргалки</a> <a href="/uchebnoe-posobie/" target="_blank">Учебные пособия</a> <a href="/innovativeliterature/" target="_blank">Cовременная литература</a> <a href="/literarycurrents/" target="_blank">Литературные течения</a> <a href="/folklore/" target="_blank">Народное творчество</a> <a href="/slovar/" target="_blank">Словарь</a> <a href="/library/" target="_blank">Библиотека</a> <a href="/shortworks/" target="_blank">Краткие содержания</a> <a href="/biographies/" target="_blank">Биографии</a> <a href="/criticism/" target="_blank">Критика</a> <a href="/aphorisms/" target="_blank">Крылатые выражения</a> <div class="clear"></div> </div> </div> </div> <div class="close-button"></div> <div class="wrapper wr1"></div> <div class="wrapper wr2"></div> <div class="wrapper wr3"></div> <div class="wrapper wr4"></div> <div class="wrapper wr5"></div> <div class="wrapper wr6"></div> <div class="wrapper wr7"></div> <div class="wrapper wr8"></div> <div class="wrapper wr9"></div> <div class="wrapper wr10"></div> <script type="text/javascript" src="/js/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="/js/swiper.min.js"></script> <script type="text/javascript" src="/js/waypoints.min.js"></script> <script type="text/javascript" src="/js/main.js"></script> <!-- Yandex.Metrika counter --> <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://cdn.jsdelivr.net/npm/yandex-metrica-watch/tag.js", "ym"); ym(88672055, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/88672055" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter --> </body> </html>