Язык гипертекстовой разметки HTML – основы, функции и правила

Основы HTML в информатике нужно знать всем веб-мастерам, даже тем, кто использует для создания документов визуальные редакторы или конструкторы сайтов. Проверка орфографии в Word не отменяет необходимость знания русского языка. Так и наличие визуальных инструментов для программирования не отменяет необходимости знать их родной язык разметки html. Без начальной базы знаний невозможно написать документ так, как пользователь считает нужным.

Язык гипертекстовой разметки HTML - основы, функции и правила

Откуда появился HTML

Язык гипертекстовой разметки использовался ещё во времена создания первых рукописных книг. Иногда на полях делались сноски, например, «см. такую-то страницу», что и являлось собственно первыми, очень неудобными гипертекстовыми ссылками.

Язык гипертекстовой разметки HTML - основы, функции и правила

В 60-е годы ХХ века впервые в истории было употреблено понятие «гипертекст» учёным Т. Нильсоном. Его проект «Ксанаду» создавал электронные библиотеки, базы которых должны были храниться на спутнике и управляться с помощью радио и телефонной связи. Использование в работе гипертекстовых ссылок позволяло выполнение перехода с одного документа на другой.

На основе языка разметки документов SGML в начале 90-х г. Тимом Бернерсом-Ли был создан язык разметки гипертекста HTML. Однако он так и остался бы теорией, но М. Андриссен и группа студентов Иллинойского университета разработали первый браузер — Mosaic и запустили его бесплатное распространение. Во Всемирной паутине браузер демонстрировал гипертекстовые странички. С этого момента началось развитие веб-страниц и веб-серверов.

Благодаря своим достоинствам язык html стал использоваться повсеместно, что требовало создание стандартов для его использования, иначе в дальнейшем возникло бы разночтение. Консорциум W3C создал и принял первую спецификацию hypertext markup language. Со временем в язык вносились изменения и возникали следующие спецификации. Сейчас во всём мире принято использовать HTML5.

Что такое веб-документ

Язык html — специально стандартизированный, служащий для разметки документов в интернете.

В обычном понимании это просто текстовый файл. Он содержит в себе набор команд стандартной гипертекстовой разметки, назначение которых — указать браузерам, как правильно отображать содержимое. Примечательно, что для использования документа в интернете, текста собственно может и не быть, а вот структура должна присутствовать обязательно.

Гипертекстовые файлы имеют 2 расширения — .htm или. html, работать с ними можно в обычном блокноте Windows. Но гораздо удобнее использовать специально предназначенные инструменты. Веб-редакторы, которыми можно оформить содержание страницы, бывают:

Язык гипертекстовой разметки HTML - основы, функции и правила

  • Визуальные (принцип WYSIWYG) — WebProject, WYSIWYG Web Builder и т. п.
  • Не визуальные (только чистый код) — Notepad, Free HTML Editor и пр.
  • Комбинированные — Adobe Dreamweaver, FrontPage, Word и др.
  • В каких редакторах лучше работать, зависит от личных предпочтений и навыков владения инструментами веб-дизайнера.

    Базовые элементы и команды языка html называются тегами (tag). Они являются регистронезависимыми и всегда находится в угловых скобках.

    Структура тега выглядит так: <Тег параметр 1 = «значение» параметр 2= «значение”>. Параметры также называют атрибутами. Пример: <img src=”foto.jpg» alt=”фото в статье”>.

    Теги делятся на 2 большие группы:

  • Одиночные (например, <meta>, <link>).
  • Контейнерные или парные.(<p></p>), состоят из открывающего и закрывающего тега и могут вкладываться друг в друга как матрёшка.
  • Формирование структуры

    Любая страница, которую пользователи видят в браузере, имеет чёткую структуру — синтез html-элементов и текста.

    Заголовок <head> и тело страницы <body> записываются в парный тег <html>, который сообщает браузеру, какое расширение ему нужно обработать. Согласно стандартам W3C, первым должен стоять тег <!DOCTYPE>. Он описывает тип документа — DTD и даёт браузеру команду как следует обрабатывать текущую страницу, так как не только есть разные версии HTML, но есть и другие технологии, например, XHTML, XML.

    Полностью веб-документ будет иметь следующую структуру:

    <!DOCTYPE html>

    <html>

    <head>

    Заголовок сайта

    <title> Заголовок </title>

    </head>

    <body>

    <!–Тело сайта ->

    </body>

    </html>

    Заголовок и тело страницы

    Задаётся контейнерным тегом <head>, его функция заключается в определение названия документа и предоставление служебной информации для браузеров. В его составе обязательно должен присутствовать <title>Название…</title>, этот тег определяет название страницы. Это единственный видимый элемент заголовка. Все остальные теги относятся к служебным и браузерами не отображаются:

    Язык гипертекстовой разметки HTML - основы, функции и правила

  • <base> — указывает адрес текущего документа, может изменить целевое окно для всех ссылок в теле документа (<base href=”http://www.mysite.ru/" target=”_blank”>).
  • <basefont> — задаёт размер, цвет, шрифт текста (<basefont face=”Arial, Helvetica, sans-serif” size=”4″ color=”blac”>).
  • <link> — ссылка на внешние файлы стиля (css) (<link rel=”stylesheet” href=”style.css”>).
  • <style> — позволяет описывать стиль в заголовке (<style type=”text/css”> h1{color:#000000;}</style>).
  • <script> — описание скриптов или указание на сторонний файл, содержащий их (<script type=”text/javascript” href=”http://mysite.ru/myscript.js"></script>).
  • <meta> — теги для хранения информации.(<meta name=”keywords” content=”Ключевые, слова, через, запятую”>).
  • С помощью тега <meta http-equiv=”refresh” content=”5; URL=http://anothesite.ru"> можно перенаправить посетителя на другую страницу, через определённое время, в этом случае 5 секунд. Это очень удобно, если, например, сайт переезжает на другой домен.

    Всё, что расположено в контейнерном теге <body>, отображается в браузере. Это основное содержание страницы — текст, картинки, заголовки. Для улучшения читаемости и визуального восприятия используются разные элементы разметки. Важно соблюдать принцип вложенности и не забывать закрывать парные теги.

    Команды оформления содержания

    По типу содержимого и характе́рному поведению в структуре документа элементы html делятся на строчные и блочные. При вёрстке они дополняют друг друга. В случае необходимости, с помощью css некоторым блочным элементам можно задать свойство блочно-строчных, присвоив display значение inline-block.

    Элементы строки:

    Язык гипертекстовой разметки HTML - основы, функции и правила

    • <b>жирный шрифт</b>;
    • <strong>логическое выделение написанного</strong>;
    • <i>курсив физическая разметка</i>;
    • <em>выделение текста курсивом, логическая разметка</em>;
    • <big> увеличивает на одну единице текст</big>;
    • <small>уменьшает текст на 1 единицу</small>;
    • <sup>шрифт в верхнем индексе</sup>;
    • <sub>шрифт в нижнем индексе</sub>;
    • <a>определяет текстовые ссылки, имеет атрибуты: href=”ссылка”, name=”якорь”</a>;
    • <img> для вставки изображений в формате jpeg, png, gif;
    • <br> перенос строки.

    Строчные элементы используются для форматирования текста. Могут включать в себя только другие строчные теги и данные. Свойство width не применяется, ширина регулируется объёмом содержимого и полей или отступов. Имеют возможность переноситься на другую строку.

    Язык гипертекстовой разметки HTML - основы, функции и правила

    Элементы блока:

    • <blockquote>цитата</blockquote>;
    • <div>блочный контейнер</div>;
    • <h1>Заголовки разного уровня в тексте <h1> – <h6>Другой уровень</h6>;
    • <p>абзац, новый параграф</p>;
    • <pre>вставка предварительно форматированного текста</pre>;
    • <hr> линия.

    Блочные элементы могут формировать структуру документа, включать в себя другие подобные и строчные. Растягиваются по ширине, всегда начинаются с новой строки.

    Таблицы и списки

    Очень важно для веб-дизайнера уметь работать с таблицами. С их помощью гораздо легче представить структурированные данные, кроме того, сама вёрстка html-документа может быть табличной.

    Таблицы в HTML создаются с помощью контейнерных тегов:

    <table>

    <tbody>

    <caption>Название таблицы</caption>

    <tr> строка

    <th>Название столбца </th>

    <td>содержимое ячейки</td>

    </tr>

    </tbody>

    </table>

    Управлять таблицей можно с помощью атрибутов: border — бордюр, alighn — выравнивание по ширине, valign — по высоте, cellpadding — отступ в ячейках, cellspacing — отступ между ячейками, width — ширина.

    В интернет-страницах часто данные представляют в виде списков с помощью специальных тегов. Это не только улучшает восприятие содержимого, но и позволяет систематизировать информацию. Список представляет собой контейнер.

    Язык гипертекстовой разметки HTML - основы, функции и правила

    Его поведение в структуре веб-страницы аналогично блочным элементам. <li> – это всегда пункт списка.

    Списки бывают трёх типов:

    • маркированные <ul><li></li></ul>.;
    • нумерованные <ol><li></li></ol>;
    • список определения <dl><dt>Термин</dt><dd>определение</dd></dl>.

    Файл стилей css

    Язык HTML имеет различные способы для форматирования содержания, но все они имеют заметные недостатки. Придётся оформлять все элементы на каждой странице сайта. Если это 1−2 страницы, это терпимо, но если страниц сотни или даже тысячи применяют Cascading Style Sheets — css. Такие стили можно сформировать в отдельном файле, ссылка на который с помощью тега <link rel=”stylesheet” href=”file.css”>, выносится в заголовок документа, между <head> и</head>.

    Для успешного использования файла стилей нужно будет назначить элементам свойства класса или присвоить значение id. Например: <div class=”post”>. Использование css:

    <style type=”text/css”>.post {margin: 10px; padding-top: 12px;}</style>

    Это облегчает изменение внешнего вида сайта и его элементов, ведь править приходится только один файл. А также с помощью css можно значительно уменьшить размеры документа.

    В дальнейшем для работы с веб-документами необходимо будет изучить css, нелишними будут и уроки по javascript и php.

    Предыдущая
    ИнформатикаПрикладное программное обеспечение - виды, применение и назначение
    Следующая
    ИнформатикаАлгоритмизация - основы, свойства и способы записи
    Помогли? Поставьте оценку, пожалуйста.
    Плохо
    0
    Хорошо
    0
    Супер
    0
    Мы в ВК, подпишись на нас!

    Подпишись на нашу группу в ВКонтакте, чтобы быть в курсе выхода нового материала...

    Вступить