Основы HTML #3215
Итак, как мы уже упоминали, язык HTML необходим для описания структуры страницы.
Именно с помощью HTML-тегов браузеру отдается информация о том, что именно на странице будет заголовком первого уровня, что абзацем, что подзаголовком, где будет расположена ссылка, куда ссылка будет вести и т.д.
- Если Вам нужно выделить какой-либо текст на странице и сделать его заголовком первого уровня, Вам необходимо в начале заголовка поставить открывающий тег
и в конце закрывающий тег
(об открывающих и закрывающих тегам мы поговорим чуть ниже).
- Подобным же образом можно выделять подзаголовки других уровней (от до ).
- Чтобы выделить абзац, необходимо в HTML-документе заключить весь текст абзаца в теги
и
соответственно (открывающий и закрывающий теги).
- Чтобы сделать перенос строки, достаточно просто поставить тег
там, где он необходим.
Подобным образом, зная необходимые Вам теги и правила их использования, Вы сможете формировать HTML-документы с описанием содержимого страниц.
Теперь перейдем к более детальному описанию нюансов работы с HTML.
Структура страницы
Любая страница на сайте — это текстовый файл с расширением .html.
Именно внутри этого файла лежит все содержимое страницы — тексты, теги и т.д.
Внутри любого такого файла должны обязательно присутствовать несколько обязательных тегов, таких как:
- в начале документа.
- в начале и в конце документа — между этими двумя тегами должно находиться все содержимое страницы со всеми тегами (все что за пределами будет проигнорировано).
- в начале и в конце перечисления служебных тегов.
- — служебный тег, им выделяется название страницы (им будет подписана вкладка в браузере).
- — служебный тег, в нем прописывается кодировка страницы (обычно это utf-8).
Чтобы было нагляднее, мы приводим пример сформированного подобным образом документа:
Атрибуты и теги
Выше мы рассмотрели примерную структуру страницы сайта и обязательные теги, такие как , и .
Теперь рассмотрим теги и атрибуты, которые могут Вам потребоваться при наполнении страницы (в частности, для содержимого внутри тега ).
Для начала расскажем, что такое теги и что такое атрибуты.
- Тег — это именно то, что заключено в угловые скобки, например . Чаще всего теги существуют в паре — открывающий и закрывающий. Открывающий тег ставится в начале элемента, а закрывающий, соответственно, в конце. Таким образом, мы очерчиваем границы действия тега. Например, если Вы хотите выделить текст жирным, поставьте в начале текста открывающий тег , а в конце — весь текст между и будет выделен жирным шрифтом. Некоторые теги не нуждаются в парном закрывающем теге (например, уже упоминавшийся тег
для переноса строки — его достаточно просто вставить в нужное место). - Атрибут — дополнительные свойства, прописываемые внутри тега, чтобы присвоить элементу (тексту, картинке и т.д.) какую-либо информацию. Чтобы было понятнее, приведем пример со ссылкой: Наш сайт . Как видите, тут представлена ссылка на сайт Мегагрупп.ру. Чтобы вставить ссылку, мы обрамили сам текст, который будет выводиться в виде ссылки на сайте (он же анкор) в теги и — именно эти теги используются для вставки ссылки. Но чтобы указать URL (адресс ссылки), нам необходим атрибут href, в котором она и указывается в виде href=»тут вставляется ссылка». Изучая HTML, Вы в дальнейшем повстречаете и другие популярные атрибуты, такие как id, class, src и т.д.
Основные теги
Теперь, когда мы разобрались, что такое теги и что такое атрибуты, приведем для примера наиболее популярные и часто используемые теги.
Предполагают работу с открывающим и закрывающим тегами:
-
— тег для обозначения абзаца в тексте. Весь абзац обрамляется в
и
- , , , , , — теги для создания заголовков разного уровня в тексте. В заголовке h1 рекомендуется прописывать основной заголовок всей страницы, в h2 — название блоков страницы, в h3 — название подблоков и т.д.
- — тег для выделения текста жирным шрифтом.
- — тег для выделения текста курсивом.
- — тег для вставки ссылки. Как уже упоминалось выше, обладает атрибутом href для указания самой ссылки. Тег целиком будет выглядеть так: < a href = " http:// site.ru " >наш сайт
Самозакрывающиеся теги (не требуют закрывающегося тега):
- — перенос строки.
-
— тег для вставки горизонтальной линии в текст.
— тег для вставки картинки в текст. Обладает атрибутами src (для вставки ссылки на изображения) и alt (для вставки альтернативного текста). Таким образом, тег целиком выглядит как < img src= "URL картинки" alt= "альтернативный текст" >.
Кроме того, Вам может потребоваться тег для вставки комментария в HTML, такой текст будет проигнорирован браузером — на экране он будет не виден, но останется в исходном коде страницы. Чтобы вставить комментарий, заключить текст комментария между , у Вас должно получиться следующее:
Это лишь некоторые из возможных тегов.
С более полным перечнем Вы можете ознакомиться в подробном справочнике по ссылке.
Списки в HTML
Отдельное внимание хотелось бы уделить созданию маркированных и нумерованных списков в HTML-документах.
Таблицы в HTML
Основным тегом в таблице будет
. Именно между
и
будет заключена вся информация о ячейках.
Следующим тегом, будет тег
. Между и будет лежать информация о рядах таблицы.
Внутри каждого ряда должны быть теги
. Соответственно, между и необходимо указывать содержимое ячеек ряда.
Таким образом, в итоге таблица в HTML будет выглядеть примерно так:
Ячейка 1 из ряда 1 Ячейка 2 из ряда 1 Ячейка 1 из ряда 2 Ячейка 2 из ряда 2 Помимо атрибута border, в таблицах может использоваться множество других тегов, например, для цвета фона таблицы (bgcolor), цвета рамки (bordercolor), отступа от рамки (cellpadding), расстояния между ячейками (cellspacing) и т.д.
С более подробной информацией по работе с таблицами и их атрибутами, Вы можете ознакомиться по ссылке.
Дополнительная информация
В данной инструкции мы привели лишь основную информацию о том, как работает HTML, что он из себя представляет, как с ним работать.
Само собой, для того чтобы создавать полноценные шаблоны страниц, наполнять их контентом и т.д. Вам понадобятся более обширные познания в этом языке разметки.
Попробовать самостоятельно изучить HTML Вы можете, например, на таких сайтах, как:
Как устроен HTML
Существуют глобальные атрибуты, их можно применять ко всем тегам: список глобальных атрибутов.
Некоторые глобальные атрибуты:
- class определяет класс, значение – имена классов;
- id – идентификатор, значение – уникальный идентификатор;
- style – стили, значение – код CSS;
- hidden – скрывает элемент, но не удаляет его из DOM. Аналогично применению стиля display: none;
- title – дополнительная информация в виде всплывающей подсказки, значение – текст.
Основные теги
- Структура и инструкции для построения HTML-документа:
- . Указывается в первой строке документа и означает: «Этот документ написан на HTML5». Не представлен в дереве документа DOM. Обязателен для корректного применения CSS.
- html. Главный тег, сообщает браузеру, что это HTML-документ. Находится в основании дерева DOM и он – корневой элемент, или элемент верхнего уровня.
- head. Не всю информацию надо показывать на странице. Служебная информация – в «голове» документа.
- title, link. Служебная информация: краткий заголовок и ссылки на внешние файлы (иконка, стилевой файл). Определяются в head.
- meta. Любая информация о мета-данных, которая не может быть представлена другими, ориентированными на мета-данные, HTML элементами. Например, кодировка страницы.
- body. Все видимое в окне, вкладке браузера содержимое – в «теле» страницы.
- комментарии: .
- Основная разметка
- Заголовки h1-h6. Заголовки и подзаголовки улучшают читаемость текста.
- p и br. Параграф и принудительный перенос на новую строку. Заголовки нельзя вкладывать в параграфы!
- hr. Разделитель содержимого, горизонтальная линия (display: block).
- img. Картинка, изображение (display: inline-block). В обязательном атрибуте src указывается путь к файлу или его URL. Распространенные форматы изображений: jpeg, png, svg, webp (пример webp):
- ul и ol, li: ненумерованный и нумерованный списки, элемент списка (display: list-item).
- a. Ссылка. Атрибуты download, href, target и т.д.
Якорь — это название после символа #, который указывает на элемент (идентификатор, ID) на текущей странице. - Стилистически выделенные строчные элементы:
b (полужирный, font-weight: bold),
i (курсив, font-style: italic),
u (подчеркнутый, text-decoration: underline),
s (перечеркнутый, text-decoration: line-through). - sub (vertical-align: sub; font-size: smaller;), sup (vertical-align: super; font-size: smaller).
- Семантическая разметка
- header. «Шапка» страницы. Не путать с head!
- footer «Подвал» страницы.
- main. Основное содержимое страницы.
- section. Раздел, секция.
- article. Статья.
Семантические теги по свойствам повторяют тег div.
Сколько всего тегов HTML?
Их 115–120, примерно как в периодической системе химических элементов – таблице Менделеева:
Спецсимволы HTML
Спецсимволы – запоминающиеся (мнемонические) обозначения символов вида &слово;. Они входят в стандарт HTML.
Когда использование спецсимволов – единственная возможность отобразить символ на web-странице:
Другие часто используемые спецсимволы:
- Знак больше >: >
- короткое – тире – и длинное — тире —
- двойные угловые кавычки, или французские кавычки, или «ёлочки»: « и »
- амперсанд &: &
- копирайт ©: ©
Чем заполняют макеты?
Текстом Lorem ipsum, который не имеет перевода. Слово «lorem» получилось из-за переноса «dolorem» на новую страницу после первого слога.
Фраза «dolorem ipsum» встречается в философском трактате Цицерона «О пределах добра и зла», написанном в 45 году до н.э. на латинском языке.- В оригинале: «Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit . »
- Перевод: «Нет никого, кто любил бы свою боль, кто искал бы ее и хотел бы чтобы она была у него. Потому что это боль. »
Первые 100 слов, вызываются сокращением Emmet lorem100:
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Optio animi alias porro ipsam illum exercitationem odit cum perspiciatis quidem, a perferendis eum minus ea sapiente corporis libero quos ullam, debitis assumenda? Corrupti, culpa! Ut fuga corrupti culpa eligendi voluptas, molestiae aliquid quod soluta, nostrum doloribus maxime numquam illo facilis obcaecati excepturi expedita pariatur ullam necessitatibus ex eius odit, similique saepe omnis officiis. Maiores facilis ullam architecto numquam non tempore magni quae deleniti? Corrupti aspernatur officia qui recusandae quis mollitia facere illum corporis cum id harum, odit maxime repellat tempore deleniti exercitationem iste ullam suscipit provident delectus, sed necessitatibus doloremque. Excepturi?
Альтернативы HTML?
Языков разметки много, и HTML – всего один из множества, хотя сегодня и самый популярный. Существует SGML (Standard Generalized Markup Language), стандартный обобщённый язык разметки.
Языки HTML и XML произошли от SGML. HTML был приложением SGML, а XML – это подмножество SGML, разработанное для упрощения процесса машинного разбора документа. В 2000-х годах у консорциума W3C было серьезное намерение перевести веб на XML. К счастью, этого не случилось.
Markdown – облегчённый язык разметки, созданный с целью написания легко читаемого и удобного для правки текста, но пригодного для преобразования в другие форматы (например, HTML). Подходит для самых простых страниц, но требует конвертации в HTML.
