Основы HTML

HTML - HyperText Markup Language или по русски язык разметки гипертекста. Если коротко гипертекст это текст в котором есть отсылки к другим текстам имеющим отношение к данному. Близким для нас примером гипертекста являются страницы сайтов. HTML это не язык программирования а язык разметки, хотя новые стандарты позволяют верстальщикам делать то что раньше делали программисты.

Аббревиатуру расшифровали но легче не стало. Что же это за разметка и для чего она нужна? Вы читаете этот текст находясь на странице сайта Webonlife.ru. Эта страница является HTML файлом. Если бы не было разметки то перед вами был бы просто текст. Благодаря HTML стать разделена на абзацы все картинки и блоки на месте. Теперь подходим к самому интересному. Как Это работает.

HTML как это работает.

Ещё одним примером размеченного текста являются файлы созданные в ворде. Мы не задумываемся как и что работает просто устанавливаем отступы, вставляем картинки, печатаем курсивом или вставляем заголовки. Не знаю как с .doc файлами а HTML код может увидеть любой желающий, для этого нажмите Ctrl+u в любом браузере и вы увидите HTML страницу глазами браузера. Много, пока ничего для вас незначащих, слов а иногда просто букв на английском и где-то среди них текст который выводит браузер и заметьте ни одной картинки. Это и есть та самая разметка. Каждый элемент разметки говорит браузеру о том как выводить элемент. Обратите внимание что все элементы разметки заключены между < > это теги. Рассмотри простейший пример - разбиение текста на абзацы. Для этого текст каждого абзаца заключаем между тегами <p> и </p>.

<p>первый абзац</p>
<p>второй абзац</p>
<p>Этот текст написан на разных строках
но браузер выведет их на одной/p>

пример с абзацами в HTML

Обратите внимание на ещё один момент. В месте где действие тега заканчивается должен стоять закрывающий тег. В нашем примере абзац заканчивается там где стоит тег </p>. Закрывающий тег отличается от открывающего наличием слэша /.

Если вы попробуете создать свой HTML файл и вставите в него код приведённый выше то у вас получиться что-то похожее на это

проблемы с кодировкой в HTML

Такое случается когда не указана кодировка. Чтобы такого не происходило в каждом HTML документе есть раздел для служебной информации. Вообще HTML файл можно разделить на две части. Первая часть(голова) со служебной информацией находиться между тегами <head> и </head>. Вторая часть(тело) с содержимым находиться между тегами <body> и </body>.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Пример HTML документа</title>
  </head>
  <body>
    <p>первый абзац</p>
    <p>второй абзац</p>
    <p>Этот текст написан на разных строках
    но браузер выведет их на одной</p>
  </body>
</html>

Код выше это пример самого простого HTML документа. Начинается он должен с объявления типа документа <!DOCTYPE html>. Раньше эта запись была больше в ней указывалось к какому стандарту относиться файл. Стандарты отличались друг от друга степенью выноса мозга верстальщику. Сейчас достаточно сокращённой записи. Дальше идёт тег объявляющий о начале HTML документа <html>. Следом идут уже известные нам HEAD и BODY. Существует много тегов, практически на все случаи жизни, но основные теги должны располагаться именно в таком порядке.

Войдите, чтобы оставлять комментарии