Каково основное назначение языка разметки html. Описание языка HTML

HTML (Hyper Text Markup Language) — это язык текстовой разметки. Текстовый документ, который был составлен с его помощью, содержит не только сам текст, но и специальные символы – дескрипторы или как ещё их называют «теги», которые несут информацию об различных участках текста – размер шрифта, выделения, цвет и т.д.

Данный язык разработал Тим Бернерс-Ли в конце 80-х. Идея его разработки заключалась в том, чтобы люди, не имеющие знаний программирования и вёрстки, могли обмениваться технической информацией, текстами, таблицами, которые бы без искажений отображались на устройствах имеющих различные технические характеристику и оснащённость.

Так как за основу тегов брались слова на английском языке, в освоении и применении он был относительно прост и постепенно набирал популярность. Разметка на языке HTML обрабатывается и отображается в корректном виде на мониторах и мобильных устройствах с помощью специальных приложений, которые называются интернет — обозревателями или браузерами.

Поначалу существовало масса неофициальных стандартов HTML. Но с лавинообразным расширением интернета, разработчики программного обеспечения были вынуждены прибегать к общепринятым средствам передачи информации. Постепенно язык HTML обзаводился новыми возможностями – создание и отображение таблиц, математических формул. Добавлялись нестандартные элементы. С появлением HTML 4.0 некоторые элементы получили определение как устаревшие и не рекомендованные. В 1997 году HTML 4 стал стандартизированным.

Сейчас в стадии разработки находится HTML 5. Желание разработчиков сгруппировать единый язык разметки синтаксически корректный для структурирования и отображения содержимого Интернета. Он расширяет и улучшает разметку для документов и сложных веб-приложений. В HTML 5 множество особенностей и новшеств, которые служат для облегчённого ввода и управления мультимедийными объектами. Для просмотра видеороликов на , теперь нет надобности в применении Flash плеера.

Почти все веб-сайты в Интернете созданы с помощью языка разметки HTML. Но в разных браузерах одна и та же веб-страница может выглядеть по-разному. Спецификация HTML 5 определяет чёткие требования к браузерам и документам. Применяемые браузерами алгоритмы для исправления ошибок способствуют построению правильной объектной модели.

Ожидается, что в будущем с помощью HTML будут возможны такие технологии как демонстрация титров при просмотре видеороликов, заполнение электронных форм, проверка правописания.

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

HTML - это язык разметки сайта. Многие считают его программированием, но это не так. В HTML нет никаких переменных, вычислений, массивов и других элементов, присутствующих в любом языке программирования.

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

Создание html-документа

Создать простую страничку сайта можно в любом редакторе. Подойдет даже "Блокнот". Для начинающего разработчика рекомендуется использовать другие редакторы, у которых есть функции автоподстановки и другие подсказки. Благодаря этому можно создавать готовые таблицы, ссылки, изображения и другие элементы. А в "Блокноте" каждую букву приходится писать вручную.

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

Язык html является иерархичным. То есть существует специальная структура html-документа. Что это такое? Рассмотрим ниже для наглядности.

Структура html-документа. Пример

Структура всегда одна и та же. Если вы захотите поменять что-то, браузер не сможет это обработать. В результате вы не получите то, что задумали.

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

Структура html-документа - основные теги:

Из этих трех тегов состоит каркас всего сайта. Обратите внимание на рисунок. Все эти теги имеют закрывающийся тег со знаком “/”. Если вы пишете от руки, привыкайте ставить сразу оба тега - открывающий и закрывающий.

Выше было сказано, что страницы сайтов имеют расширение.html. То есть если вы создадите текстовый документ, но при этом напишете правильный код, браузер всё равно отобразит вам просто текст. Никакого преобразования кода не будет.

Раздел head

На рисунке под пунктом 3 указан раздел head. В этом разделе указывается служебная информация. Например, можно указать кодировку (пункт 4) и заголовок страницы (пункт 5).

Заголовок должен быть всегда. Без него ни один поисковик не сможет определить название контента (текста) на веб-странице. А это плохо для продвижения сайта. Более того, в браузере наверху не будет указан заголовок страницы. Это неудобство для пользователя.

Структура html-документа такова, что указывается только в разделе head. Если тег указать в разделе body или после него, то обработчик на него не обратит внимания.</p><p>Кроме этого, в разделе head указывается информация для подключения скриптов, файлов стилей, инструкции для <a href="/uslugi/ok-gugl-poiskovaya-sistema-kak-vklyuchit-okei-gugl-na-androide/">поисковых систем</a> или любые другие данные, которые пользователь не должен видеть, но они важны для браузера или программистов.</p><h2>Подключение стилей</h2><p>Структура html-документа позволяет подключать стили различными способами. Более того, их можно писать индивидуально в каждом элементе. Но <a href="/novosti/sposoby-predstavleniya-dannyh-v-evm-open-library---otkrytaya-biblioteka-uchebnoi/">данный способ</a> не рекомендуется, поскольку код становится слишком большим и неудобным.</p><p>Подключается файл следующим образом.</p><p><link rel = “stylesheet” href = “style.css” type = “text/css”></p><p>В атрибуте href указывается путь до файла. Если в пути будет ошибка, то стили не загрузятся. Также обязателен атрибут type, который указывает, что это файл css.</p><p>Другим вариантом является определение стилей прямо в разделе head.</p><p><img src='https://i0.wp.com/fb.ru/misc/i/gallery/43047/1327414.jpg' height="203" width="259" loading=lazy></p><p>Но этот вариант также не очень рекомендуется. Эти методы сильно отличаются тем, что файл css может быть одним для всего сайта, и все изменения в нем будут мгновенно применяться ко всем страницам. А если вы используете метод, который указан на рисунке выше, то вам придется вносить изменения во все существующие страницы сайта.</p><p>Если создаваемый класс будет использоваться только на одной странице, тогда этот вариант вам подходит.</p><h2>Подключение скриптов</h2><p>Скрипты подключаются следующим образом.</p><p><script type=“text/javascript” src=“main.js”></script></p><p>Здесь обязательны два атрибута: type и src. В первом указываем, что это файл Javascript, а второй - где расположен файл. Если вы допустите опечатку, то ничего работать не будет.</p><h2>Раздел body</h2><p>Структура html-документа такова, что размещать содержание, которое будет видно пользователю, нужно только в разделе body. Название тега говорит само за себя.</p><p>Здесь указывается весь основной код страницы, который может включать неограниченное число элементов. Но чем длиннее код, тем дольше он будет обрабатываться.</p><p>Рассмотрим самые основные теги, которые можно использовать в области body. Основных не так много. Все остальные вы будете узнавать по мере роста ваших знаний и практики.</p><h2>Основные теги</h2><p>Структура html-документа требует обязательного порядка написания элементов. Теги всегда должны по краям обрамляться скобками <>. Без этого браузер не поймет, что это тег. После открывающейся скобки всегда следует имя элемента (тега). Если вы допустите пробел между < и именем, то браузер посчитает это текстом.</p><p>Рассмотрим на примере тега изображения. Обратите внимание, что этот тег не закрывающийся, в отличие от ссылок, абзаца и многих других.</p><p><img src='https://i1.wp.com/fb.ru/misc/i/gallery/43047/1327415.jpg' width="100%" loading=lazy></p><p>Порядок атрибутов не имеет значения. Но их написание (оформление) очень важно. Всегда сначала идет имя атрибута, потом знак равенства, затем в кавычках пишется значение атрибута. Значение может быть разным - цифровое или текстовое.</p><p>Атрибут src во всех тегах указывает путь файла, который нужно подгружать. Атрибут alt во всех элементах указывает <a href="/novosti/kak-snyat-blokirovku-na-korotkie-nomera-mts-opisanie-uslugi/">короткое описание</a>. В данном случае загружается фотография bird.jpg с описанием - фотография птицы.</p><p>Кроме этого, в можно было указать размеры, только ширину или высоту, заголовок, выравнивание, класс стиля или рамку.</p><p>Рассмотрим другие основные теги, которые указываются в разделе body.</p><table align="center" cellpadding="5" cellspacing="0" class="if"><tbody><tr><td valign="top" width="153"> </td><td valign="top" width="554"><p>Назначение</p> </td> </tr><tr><td valign="top" width="153"> </td><td valign="top" width="554"> </td> </tr><tr><td valign="top" width="153"> </td><td valign="top" width="554"><p>Изображения</p> </td> </tr><tr><td valign="top" width="153"></p> </td><td valign="top" width="554"> </td> </tr><tr><td valign="top" width="153"> </td><td valign="top" width="554"><p>Перенос текста на новую строку</p> </td> </tr><tr><td valign="top" width="153"><p><strong>…</strong></p> </td><td valign="top" width="554"><p>Жирный текст</p> </td> </tr><tr><td valign="top" width="153"> </td><td valign="top" width="554"> </td> </tr><tr><td valign="top" width="153"> </td><td valign="top" width="554"><p>Перечеркнутый текст</p> </td> </tr><tr><td valign="top" width="153"> </td><td valign="top" width="554"><p>Подчеркнутый текст</p> </td> </tr><tr><td valign="top" width="153"> </td><td valign="top" width="554"> </td> </tr><tr><td valign="top" width="153"><p><table></table></p> </td><td valign="top" width="554"> </td> </tr></tbody></table><h2>Как всё это можно представить в голове</h2><p>Начинающие разработчики не всегда сразу могут представить всё это умозрительно. Посмотрите несколько примеров структуры веб-страниц, и тогда вам точно станет понятно.</p> <p>Несмотря на то, что Web-страницы появляются на экране компьютера в отформатированном виде, язык HTML не предназначен для форматирования документов, поскольку жесткое задание оформления и точное позиционирование элементов текста на странице приводит к ограничениям, недопустимым в Интернете.</p> <p>Так, например, когда мы форматируем текст с помощью текстового процессора Word, мы <i>однозначно </i> определяем, как должен выглядеть этот текст при печати на <i>совершенно определенном принтере и </i> на бумаге <i>заданного формата. </i> Когда документ размещен в Интернете, невозможно предсказать, какой компьютер будет использован для его просмотра, да и будет ли вообще у этого компьютера монитор.</p> <p>Может быть, текст появится на экране компьютера, работающего в <a href="/populyarnoe/skachat-windows-7-dlya-vosstanovleniya-sistemy-vosstanovlenie-sistemy-windows/">системе Windows</a> в окне одного из современных броузеров. Может быть, это будет текстовый броузер (неспособный отображать графику), работающий в системе MS-DOS. Возможно, текст документа вообще не будет отображаться на экране, а будет воспроизводиться вслух с помощью синтезатора речи. Для слепого пользователя документ может выводиться на специальное устройство шрифтом Брайля.</p> <p>В связи с необходимостью подготавливать документы для столь разнообразных устройств, язык HTML не предназначен для описания формата документа. Он служит для <i>функциональной разметки документа, </i> то есть позволяет определить <i>назначение </i> фрагментов текста.</p> <p>Например, если в тексте встречается заголовок, то код HTML просто указывает, что соответствующий фрагмент является заголовком. Получив такой код, программа просмотра (броузер) сама «решает», что ей делать с заголовком. Возможно, она отобразит его более крупным шрифтом, а может быть выровняет по центру экрана. Возможно, что синтезатор речи, воспроизводящий текст Документа, использует код заголовка для того, чтобы повысить громкость и сделать необходимую интонационную паузу.</p> <p>Язык HTML все-таки имеет некоторые команды форматирования, но общий курс на разделение <i>содержания </i> и оформления документа выдерживается четко. В <a href="/faq/us-brauzer-poslednyaya-versiya-uc-browser-skorostnoi-brauzer-belka-vyberete/">последней версии</a> HTML (4.0) использовать команды форматирования, как правило, не рекомендуется.</p> <p>Коды языка HTML, с помощью которых выполняется разметка исходного текста, называются <i>тегами. </i> Тег - это набор символов. Все теги начинаются с символа «меньше» (<b>< </b>) и заканчиваются символом «больше» (<b>> </b>). Пару этих символов иногда называют <i>угловыми скобками. </i> После открывающей угловой скобки идет <i>ключевое слово, </i> определяющее тег.</p> <p>Каждый тег в <a href="/faq/polnym-sintaksisom-yazyka-html-sintaksis-html-neobhodimost-zakryvayushchego-tega/">языке HTML</a> имеет специальное назначение. Регистр букв в названиях тегов не имеет значения - можно использовать как строчные, так и прописные буквы, хотя общепринято использовать прописные буквы, чтобы теги отличались от обычного текста документа.</p><br><p>Как правило, один <a href="/populyarnoe/vneshnie-stili-css-chto-takoe-css-podklyuchenie-css-faila-primer/">тег HTML</a> воздействует только на часть документа, например на абзац. В таких случаях используют парные теги: <i>открывающий </i> и <i>закрывающий. </i> Открывающий тег создает эффект, а закрывающий - прекращает его действие. Закрывающие теги начинаются с символа косой черты (<b>/ </b>).</p> <p>Некоторые теги дают разовый эффект в месте своего появления. В этом случае необходимости в закрывающем теге нет, и он не употребляется.</p> <p>Если по ошибке в теге указано ключевое слово, отсутствующее в языке HTML, то тег игнорируется целиком.</p> <p>При отображении документа в браузере сами теги не отображаются, но влияют на способ отображения документа.</p> <p>Атрибуты тегов</p> <p>Открывающие теги часто могут содержать <i>атрибуты, </i> влияющие на эффект, создаваемый тегом. Атрибуты - это дополнительные ключевые слова, отделенные от <a href="/smartfony/sborshchik-klyuchevyh-slov-programma-dlya-podbora-klyuchevyh-slov-onlain/">ключевого слова</a> тега и друг от друга пробелами.</p> <p>Некоторые атрибуты требуют указания <i>значения атрибута. </i> Это значение отделяется от ключевого слова знаком равенства (<b>= </b>). Значение атрибута должно заключаться в кавычки, но во многих случаях эти кавычки могут опускаться без какого-либо вреда.</p> <p>Закрывающие теги никогда не содержат атрибутов.</p> <p>Комментарии</p> <p>В языках программирования общепринята возможность использования комментариев - текстовых строк, не являющихся частью программы, а служащих для пояснения. Язык HTML тоже имеет такую возможность.</p> <p>Комментарии в языке HTML начинаются со специального тега <b><!-- </b>. Следует обратить внимание на отсутствие закрывающей угловой скобки. Любой текст, идущий за этим тегом, рассматривается как комментарий и не отображается при отображении документа. Заканчивают комментарий символами <b>--!> </b>. Комментарий может содержать любые символы, кроме символа «больше» (<b>> </b>), и, таким образом, не может включать в себя теги.</p> <p>Примеры тегов HTML:</p> <p><b><title> <Body> <TABLE> </A> <img> </Center> </b></p> <p>Примеры парных тегов HTML:</p> <p><b><HTML> </HTML>, </b></p> <p><b>, </b></p> <p><b><HEAD> </HEAD>, </b></p> <p><b><H3> </H3>, </b></p> <p><b><ADDRESS> </ADDRESS> , </b></p> <p><b>, </b></p> <p>Примеры одиночных тегов HTML:</p> <p><b><BR>, <HR>, <META>, <BASEFONT>, <FRAME>, <INPUT>. </b></p> <p>Примеры тегов HTML с атрибутами:</p> <p><b><BODY BGCOLOR="#000000” TEXT=”FFFFFF" BACKGROUND="RAIN.GIF"> </b></p> <p><b><OPTION SELECTED> </b></p> <p><b><FRAME SRC="file.html" NORESIZE> </b></p> <p>Структура документа HTML</p> <p>Документ HTML состоит из основного текста документа и тегов разметки, которые, как мы уже знаем, являются наборами обычных символов. Таким образом, документ HTML - это, по существу, обычный текстовый файл. Для его создания можно использовать любой текстовый редактор, хотя бы и тот простейший редактор Блокнот, который входит в состав Windows 9x.</p> <p>1. Все документы HTML имеют строго заданную структуру. Документ должен начинаться с тега <b><HTML> </b> и заканчиваться соответствующим закрывающим тегом <b></HTML> </b>. Эта пара тегов сообщает броузеру, что перед ним действительно документ HTML.</p> <p>2. Документ HTML состоит <i>из раздела заголовков </i> и <i>тела документа, </i>идущих именно в таком порядке. Раздел заголовков заключен между тегами <b><HEAD> </b> и <b></HEAD> </b> и содержит информацию о документе в целом. В частности, этот раздел должен содержать внутри себя теги <b><TITLE> </b> и <b> , между которыми размещают «официальный» заголовок документа. Большинство броузеров, работающих в системе Windows, используют этот заголовок, чтобы заполнить строку заголовка окна броузера.

3. Сам текст документа располагается в теле документа. Тело документа располагается между тегами и .

Четыре перечисленных парных тега определяют основную структуру документа HTML. Они встречаются (или их наличие подразумевается) во всех документах HTML.

На практике определить местоположение этих структурных основных тегов можно и при их отсутствии. Поэтому, если теги , и , а также соответствующие им закрывающие теги опущены, то программа - броузер может сама определить то место, где они должны были находиться. Тег </b>, определяющий заголовок документа, считается обязательным, но и его пропуск не вызовет катастрофических последствий в современных броузерах. Но все-таки при создании Web-страниц опускать все эти теги не рекомендуется, ведь заранее неизвестно, как поведет себя конкретный броузер, установленный на компьютере читателя.</p> <p>Простейший правильно подготовленный документ HTML</p> <p><b><HTML> </b></p> <p><b><HEAD> </b></p> <p><b><ТIТLЕ> </b>Функциональные разделы документа<b></ТIТLЕ> </b></p> <p><b></HEAD> </b></p> <p><b><BODY> </b></p> <p><b></BODY> </b></p> <p>Публикация во всемирной паутине (WWW – World Wide Web) реализуется в форме Web-сайтов. Web-сайт по своей структуре напоминает журнал, который содержит информацию, посвященную какой-либо теме или проблеме. Как журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерных Web-страниц.</p><p>Сайт является интерактивным средством представления информации. Интерактивность сайта обеспечивают различные формы, с помощью которых посетитель сайта может зарегистрироваться на сайте, заполнить анкету и т. д.</p><p>Обычно сайт имеет титульную страницу (страница с оглавлением), на которой имеются гиперссылки на его основные разделы (Web-странички). Гиперссылки имеются и на других Web-страницах сайта, что позволяет посетителю свободно перемещаться по сайту.</p><p>Web-сайты обычно являются мультимедийными, т. к. на них кроме текста есть иллюстрации, анимация, звуковая и видеоинформация.</p><p>Web-сайт состоит из Web-страниц, объединенных гиперссылками. Web-страницы могут быть интерактивными и могут содержать мультимедийные и динамические объекты (изменение страницы по алгоритму).</p><p>2) Создание Web-сайтов реализуется с использованием <b>языка гипертекстовой разметки – HTML (HyperText Markup Language). </b></p><p><b>HTML </b>– набор команд(тэгов), вставляемых в текст WWW-страницы и определяющих форматирование абзацев, вид шрифта, ссылки на внешние файлы и другие страницы.</p><p>Технология HTML состоит в том, что в обычный текстовый документ вставляются управляющие символы (тэги) и в результате мы получаем Web-страницу. Браузер (например, Internet Explorer) при загрузке Web-страницы представляет её на экране в том виде, который задаётся тэгами.</p><p><i><u>Основными достоинствами HTML-документов являются: </u> </i></p><p>Малый информационный объём;</p><p>Возможность просмотра на ПК, оснащенных различными операционными системами.</p><p>3) Для создания Web-страниц используются простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования текста. В качестве такого редактора в Windows можно использовать стандартное приложение Блокнот.</p><p>Создаваемая Web-страничка сохраняется с расширением.htm (.html) в Блокноте, затем запускается в браузере IE через меню Файл/Открыть. Если вам необходимо редактировать страничку, то пользуйтесь командой главного меню IE – Вид/В виде HTML (открывается Блокнот для редактирования). Не забудьте сохранить изменения в Html-коде Web-страницы и только затем возвращайтесь в браузер для её просмотра, использовав команду Вид/Обновить (<F5>).</p><h2>2. Основные понятия языка html</h2><p><i><u>Дескриптор (тэг) </u> </i> – основной элемент кодирования, принятый в стандарте HTML. Практически всё зависит от дескрипторов, они служат для привлечения внимания к определённым словам в документе, тем самым, давая понять браузеру, что нужно выделить, где отобразить графику и где находятся гиперссылки. Тэг заключается в угловые скобки (<>). Тэги могут быть одиночными или парными. Для парных обязательно наличие открывающего тега <tag>(чаще всего с параметром и его значением) и закрывающего тэга </tag>.</p><p><i><u>Контейнер </u> </i> – это дескрипторная пара, состоящая из открывающего и закрывающего дескрипторов (тэгов) <tag>…</tag>. Контейнеры предназначены для хранения некоторой информации, например текста или других HTML-дескрипторов.</p><p><i><u>Элемент HTML-документа </u> </i> – это контейнер вместе с его содержимым.</p><p>Тэги могут записываться в любом регистре (прописными или строчными буквами)</p><p>3. <b>НАЧАЛО СОЗДАНИЯ WEB-САЙТА. СТРУКТУРА WEB-СТРАНИЦЫ </b></p><p>Для создания Web-сайта необходимо:</p><p>Разработать проект сайта (определить, сколько web-страниц будет входить в сайт, какова будет их тематика, и как они будут связаны между собой);</p><p>Подготовить папку (электронную), в которой будут храниться все материалы;</p><p>Желательно файлы рисунков поместить в отдельную папку, находящуюся внутри основной;</p><p>Титульную Web-страничку обычно сохраняют с именем index.htm или welcome.htm.</p><p><i><u>Создание структуры Web-страницы: </u> </i></p><p>Всё содержимое файла Интернет-страницы заключается в контейнер <html>…</html>, указывающий браузеру, что данный текст представляет собой HTML-документ и, возможно содержит в себе тэги, которые браузер должен выявить, распознать, интерпретировать.</p><p>Типичная Интернет-страница состоит из двух частей: заголовка (HEAD) и тела (BODY). Эту базовую структуру в простейшем виде можно наглядно показать следующим образом:</p><p><HTML> начало контейнера HTML-документа</p><p><HEAD> начало контейнера заголовка</p><p><TITLE> начало контейнера строки – названия страницы</p><p>… строка названия страницы</p><p> конец контейнера строки – названия страницы

конец контейнера заголовка

начало контейнера тела страницы

… тело (всё содержимое) страницы

конец контейнера тела страницы

конец контейнера HTML-документа

указанная вами строка-название будет выводиться в заголовке окна браузера, когда данная страничка будет в нём просматриваться, а также (уже после размещения страницы в Интернете) в списках, выдаваемых поисковыми серверами.

- такой полутэг используется для добавления комментариев на страничке, т. е. для полезных пояснений, которые не показываются в браузере.

HTML - язык разметки гипертекста, который сделал интернет таким, каким мы его знаем и любим. Именно благодаря этому замечательному инструменту сайты выглядят красиво и современно, а также обеспечивается удобство их использования. Язык HTML просто компонует элементы веб-страницы в удобный для пользователя вариант. Его работа сравнима с тем, что делают типа MS Word или OpenOffice. Они превращают безликую массу букв в документ, в котором есть абзацы, жирный текст, курсив, таблицы и даже изображения. Примерно то же самое делает язык HTML, с той лишь разницей, что его документы отображаются в браузере, да и возможности этого инструмента гораздо шире, чем у текстового редактора. Для разметки используются теги — специальные команды, описывающие структуру веб-страницы. Они заключены в угловые скобки - <тег>, чтобы браузер мог отличить их от общей массы текста. Далее мы рассмотрим основы HTML для начинающих.

Визуальные редакторы

Новички, только ступившие на путь изучения HTML, часто начинают свою работу с программ, позволяющих создавать сайты без каких-либо знаний. В них можно просто расположить элементы на экране так, как они будут отображаться в браузере. Казалось бы, вот он — источник вечной благодати, позволяющий избавиться от большинства веб-разработчиков. Но не всё так просто, так как у визуальных редакторов есть масса недостатков, которые делают невозможным их использование в серьёзных проектах.

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

Теги

Как упоминалось выше, теги описывают браузеру структуру веб-страницы. Большинство из них имеют открывающий и закрывающий тег, но далеко не все. Например, ..., где вместо точек находится содержимое. Первый из них показывает, где начинается тег, а второй закрывает его. Внутри могут находиться другие элементы разметки страницы, они могут вкладываться друг в друга подобно матрёшке. Тут важно своевременно закрывать теги, чтобы страница отображалась корректно.

Встречаются также одиночные теги, которые не нужно закрывать. В них содержимое находится внутри, так же как и может быть прописан для большинства HTML-тегов и задаёт свойства элемента. Обозначается он в открывающем теге и выглядит примерно так: атрибут=«...», где вместо точек находится значение атрибута. Знание тегов является первым и самым важным шагом для освоения HTML. Основы этого искусства также подразумевают понимание структуры веб-страницы.

Структура документа

Каждый документ HTML имеет соответствующее расширение, например, Index.html. Так браузер сможет понять, с чем он имеет дело, и правильно отобразит страницу. Все файлы, используемые для создания сайта, желательно хранить в одной директории, что в дальнейшем существенно облегчит вам жизнь. Основы языка разметки гипертекста HTML предполагают чёткое понимание структуры документа. Начинается он с тега , сообщающего браузеру версию HTML, которая используется в этом документе. На данный момент актуальна пятая версия языка, так что тут не нужно ничего выдумывать, можно смело вставлять приведённый выше тег в начало любой страницы.

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

Head

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

Link

Знание основ HTML также предполагает использование каскадных стилей оформления, или css. В них задаются свойства элементов, которые будут отображены на странице. Современный подход к этой задаче предполагает вынесение таких характеристик, как цвет, высота и местоположение элемента, во внешний файл для большего удобства. Для подключения css-файла используется тег . В готовом виде это выглядит примерно вот так: , где href указывает на местоположение файла, а type - на его тип.

Body

Именно в этой части HTML-документа создаётся видимая часть страницы. Всё, что делается внутри «тела», будет показано браузером. В

используется огромное количество тегов HTML. Основы — это форматирование текста, работа со ссылками и простейшие инструменты для структурирования веб-страницы. Чтобы приступить к работе в HTML, достаточно знать основные теги и уметь ими пользоваться. Ниже приведены самые популярные из них:

Наверх