Сайт в HTML

Сайт в HTML

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

При создании такого сайта используется стандартный язык HTML (HyperText Markup Language), с помощью которого и создаются гипертекстовые документы в сети интернет.

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

Созданный сайт — это одна или несколько веб-страниц, доступных в интернете через протоколы HTTP / HTTPS.

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

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

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

Вид страницы можно также изменять также добавляя в неё таблицы стилей на языке CSS или сценариев на языке JavaScript, но это тема дальнейшего разговора.

 

Основные компоненты языка HTML для создания сайта.

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

Документ, который вы сейчас читаете, также создан с помощью языка HTML, и Вы пользуетесь одним из браузеров.
Язык HTML позволяет:

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

Из чего состоит страница сайта в HTML?

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

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

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

Графическая и звуковая информация, включаемая в HTML-документ, хранится в отдельных файлах. Программы просмотра HTML-документов (браузеры) интерпретируют флаги разметки и располагают текст и графику на экране соответствующим образом. Для файлов, содержащих HTML-документы приняты расширения .htm или .html.

В большинстве случаев теги используются парами. Пара состоит из открывающего <имя_тега> и закрывающего </имя_тега> тегов. Действие любого парного тега начинается с того места, где встретился открывающий тег, и заканчивается при встрече соответствующего закрывающего тега. Часто пару, состоящую из открывающего и закрывающего тегов, называют контейнером, а часть текста, окаймленную открывающим и закрывающим тегом, — элементом.

Последовательность символов, составляющая текст может состоять из пробелов, табуляций, символов перехода на новую строку, символов возврата каретки, букв, знаков препинания, цифр, и специальных символов (например #, +, $, @), за исключением следующих четырех символов, имеющих в HTML специальный смысл: < (меньше), > (больше), & (амперсанд) и » (двойная кавычка). Если необходимо включить в текст какой-либо из этих символов, то следует закодировать его особой последовательностью символов.

Пример, который здесь рассмотрим, поможет вам разобраться в самых простых элементах страницы.

Для примера мы взят код обычной страницы в HTML:

Сайт в HTML
Пример простой странички на языке HTML

 

Для удобства каждая строчка отмечена цифрой для наглядности:

  1. Указывается тип документа, если будете использовать HTML 5, то тип прописывать не нужно.
  2. Дальше устанавливается тег (html), открывающий код HTML страницы.
  3. Тег head (голова) предназначен для указания внутри него дополнительных элементов страницы.
  4. Здесь указывается тип кодировки страницы.
  5. Вставляется описание страницы, которое будет отображаться в снипете поисковых систем. Если не добавлять этот тег, вместо описания будет представляться часть текста со страницы.
  6. Указываются ключевые слова для страницы (очень важный тег, обязательно его используйте).
  7. На седьмой строчке прописывается заголовок страницы title (её название).
  8. Тег head можно закрыть и приступить к созданию страницы.
  9. Теперь начинается «тело» самой страницы, которую будут видеть пользователи. Для этого устанавливается тег body.
  10. Заголовок статьи прописывается в заключении специальными тегами.
  11. Тег <p> обозначает новую строку, поэтому каждый абзац заключен в него.
  12. Аналогично, как и в 11 пункте.
  13. Тело страницы закрывается.
  14. Закрывается код html.

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

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

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

Скачать книгу о языке HTML:

button

Скачать справочник по тегам HTML:

button

Скачать бесплатный курс по HTML автора Е. Попова вы сможете заполнив форму подписки. Ссылка на скачивание придет практически мгновенно.

Ваш e-mail: *
Ваше имя: *

 

Посмотреть видео о принципах создания сайта на языке HTML:

YouTube Трейлер

Добавить комментарий