Как сделать скелет html

Обновлено: 01.07.2024

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

Создание HTML документов

Для того, чтобы создать HTML документ необходимо:

  1. Открыть любой текстовый редактор (например блокнот, Notepad++ и т.д.);
  2. Набрать произвольный текст и разметить его HTML тегами;
  3. Cохранить файл с расширением .htm или .html.

Базовый документ HTML

Ниже приведен в своей простейшей форме пример HTML-документа:

Пример HTML:

Теперь вы можете воспользоваться кнопкой Попробуй сам, которая расположена в правом верхнем углу окна кода, для того, чтобы проверить результат этого HTML - кода, или сохраните код в HTML - файл test.html с помощью любого текстового редактора. И, наконец, откройте его с помощью веб - браузера, например Internet Explorer, Google Chrome или Firefox и т.д. Браузер должен показать следующий результат:

HTML начало

HTML теги

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

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap



Основы HTML для начинающих – скелет HTML . Урок №1

Cкелет HTML. Основы HTML для начинающих. Урок №1

Тимом Бернерс-Ли (Tim Berners-Lee)

Попробую своими словами и максимально проще объяснить, что значит язык разметки гипертекста.

Гипертекст – это совокупность текстов, ссылок, картинок, таблиц, которые взаимосвязаны. Это вам ничего не напоминает? Да, это обыкновенная веб-страница.

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

Язык – набор тегов, с помощью которых осуществляется разметка в HTML.

На данном этапе логично было бы объяснить еще значение слова тег, но об этом чуть позже.

Теперь рассмотрим, из чего состоит скелет HTML документа. Разберем скелет по косточкам.

Скелет HTML

Для лучшего понимания из чего состоит HTML документ, я подготовил схему:

Скелет HTML

1). и - это начало и конец HTML документа.

2). и - голова HTML документа. В голову документа вставляют различные служебные теги (мета теги). Со служебными тегами мы обязательно столкнемся в дальнейших уроках и все подробно разберем.

3). и - заголовок документа. Это один из служебных тегов, который размещается в голове HTML документа между тегами и .
Давайте посмотрим, где будет отображаться заголовок документа в браузере:

Основы HTML для начинающих – скелет HTML . Урок №1

Также заголовок документа будет отображаться в результатах поиска в поисковых системах:

Основы HTML для начинающих – скелет HTML . Урок №1

4). и - тело документа. В теле документа находится все, что мы хотим видеть на веб-странице: текст, картинки, таблицы, аудио, видео и т. д.

Вот теперь пришло время выяснить, что такое ТЕГ

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

Для примера я пропишу парочку тегов: , , ,
,

Также хочу упомянуть, что есть теги, которые нужно закрывать. Например:
- открываем тег.
- закрываем тег.

Есть теги одиночки, которые не нуждаются в паре или в закрытии. Например:

- тег для переноса строки.

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

При написании программы будет очень проблематично писать фреймворк html несколько раз, поэтому вот быстрый способ быстро сгенерировать скелет html.

Первый тип (с использованием html: 5)

Введите html: 5 в sublime, а затем нажмите клавишу Tab, появится полный скелет html.


Второй способ (пользуйтесь!)


Введите возвышенное! После нажатия клавиши Tab появится полный скелет.

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

Далее будут рассмотрены примеры содержания HTML файлов. Если вы не знаете, как создать HTML файл, то посмотрите статью "Как создать HTML файл".

Существует большое количество тегов, часть из которых мы постараемся разобрать в курсе.

Рассмотрим пример упрощённого HTML файла, страницы сайта: Всё, что написано латиницей и заключено в скобки - это теги. Разберём пример по сторкам:

- эта строчка говорит о том, что документ является html файлом. Следовательно, браузер сможет показать его как html страницу.

. - это парный тег (у него есть открывающая часть и закрывающая , которые различаются наличием слеша "/"). Внутри него заключено всё тело html документа.

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

Читайте также: