'' - заголовок страницы, выводится как название вкладки; * ''<meta/>'' - [[https://developer.mozilla.org/ru/docs/Web/HTML/Element/meta|метаданные]]; * ''<link/>'' - подключение сторонних файлов (к примеру, таблица стилей), имеет следующие атрибуты: * ''rel'' - атрибут, который показывает браузеру, что делать с подключаемым файлом; * ''stylesheet'' - подключается таблица стилей (CSS); * ''alternate'' - альтернативный вид данных (данные на странице в XML формате); * ''shortcut icon'' - иконка сайта (favicon.ico); * ''type'' - [[https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types|MIME-тип]] файла; * ''href'' - адрес подключаемого файла; * ''<style>'' - таблица стилей внутри HTML файла; * ''<script>'' - подключение скриптов (обычно JavaScript); ===== Элементы структуры и содержания страницы ===== Элементы, которые формируют вид и расположение данных, а также содержат данные, находятся в ''<body>''. ==== Элементы, на которых основаны другие ==== FIXME ((по своей сути, элементы через [[..:css:|таблицу стилей CSS]] берут свое строение от свойства ''display'')) * ''<div>'' - блочный, то есть теги и текст внутри него будут переносится с каждым новым блоком на новую строку. Используется для изменения вида внутреннего содержимого. * ''<span>'' - строковый. Внутри него размещают текст, который не будет переносится и должен иметь свой внешний вид. ==== Элементы, пришедшие с HTML5 ==== Данные элементы по своей сути являются ''<div>'' или ''<span>'', и используются поисковыми движками для выделения информации при обработке. * ''<header>'' - заголовок сайта. На нем, как правило, размещается название сайта, быстрые ссылки, строка поиска по сайту. * ''<aside>'' - боковая часть, на ней размещают карту (все ссылки) сайта, либо актуальные ссылки, рекламу и т.д. * ''<article>'' - основная часть страницы. * ''<footer>'' - нижняя часть (подвал) сайта. Тут размещают полную карту сайта, контакты и прочую информацию. ==== Элементы для текстового содержания ==== * ''<h1>''-''<h6>'' - текстовые заголовки. Обычно используются для создания статей, где нужны заголовки с разным размером заголовков. * ''<p>'' - абзац. Переносит текст на новую строку, имеет отступ. * ''<i>'' - делает текст курсивным((наклонным)). * ''<b>'' или ''<strong>'' - жирное начертание текста. * ''<br/>'' - перенос строки. Если требуется перенести текст внутри блока. * ''<hr/>'' - горизонтальный разделитель. Отображается как линия, занимающая всю ширину элемента. ==== Вспомогательные элементы ==== * ''<a>'' - ссылка на элемент внутри страницы, внутри сайта или папки, на внешний сайт. Её атрибуты: * ''href'' - адрес, по которому пользователь перейдет при нажатии; * ''<img/>'' - изображение рядом с текстом (больше подходит для формирования статей). Его атрибуты: * ''src'' - адрес, по которому находится изображение в сети; * ''width'' и ''height'' - размеры изображения в пикселях; * ''alt'' - текст, если изображение не загрузится; * ''<input/>'' - поле для ввода пользователем информации. Его атрибуты: * ''type'' - тип поля. Их много, вот часть из них: * ''text'' - FIXME, * ''submit'' - FIXME, * ''check'' - FIXME, * ''radio'' - FIXME, * ''button'' - FIXME; * ''value'' - предустановленное значение поля. ====== Шаблон для HTML5 ====== <code html> <!DOCTYPE html> <html> <head>  </head> <body>  </body> </html> </code>

''): | Какие-то тексты, картинки и т.п. | | Тоже что-то тут есть, но другое | Строковые элементы используются для построения страницы по горизонтали. А тут используется тег '''': | Текст, но не только | И тут текст | > :!: Некоторые браузеры добавляют пробел между строчными элементами. Привет, Firefox! ====== Элементы ====== Основным элементом языка разметки HTML является тег. Он выглядит так (пример тега ''div''):


Привет, мир!

или так (как пример, тег ''br''):


Привет

мир

!

===== Различия <тег> и <тег/> ===== Первый случай ''<тег>'' используется, если внутри него подразумевается наличие элементов или тесктовых данных. Второй ''<тег/>'' применяется в тех случаях, если данные внутри тега не обязательны, либо вообще не используются (к примеру тег ''
''). > На самом деле такой вид написания не принципиален, просто сокращает написание кода. ====== Атрибуты ====== Для каждого элемента в HTML есть атрибуты. Существуют как универсальные (к примеру, ''%%style=""%%''), так и специфические для определенного. Пример:

...

Универсальные для видимых тегов: * ''%%style="таблица CSS"%%'' - применяет таблицу стилей внутри значения атрибута к элементу * ''%%title="строка"%%'' - текст всплывающей подсказки при наведении на элемент ====== Классы, имена, идентификаторы ====== Указываются как атрибуты, внутри элемента. ===== Классы ===== Классы представляют собой группу элементов. К примеру, нам требуется указать для определенных тегов '''' цвет текста. Мы можем использовать как атрибут ''style'' внутри каждого нужного тега (подходит, если только нужно поменять в паре элементов), так и указать класс элемента и вывести настройку стиля в файл CSS (что гораздо удобнее для нас будет в дальнейшем). **Неограничен в количестве вызовов в разных тегах**.




    ...
    
    
    ...


    ...
    Обычный текст Красный текст
    ...


/* style.css */
.red-text {
    /* Цвет в шестнадцатеричном формате #rgb или #rrggbb или #rrrgggbbb
     *
     * где:
     * r - значение красного цвета от 0 до F (от 0 до 15)
     * g - значение зеленого цвета
     * b - значение синего цвета
     */

    color: #ff0000;
}

===== Имена ===== Имена можно использовать для формирования и идентификации данных в формах отправки данных (тег ''

''). Для того, чтобы дать элементу какое-либо имя, требуется вписать аргумент в нужный тег:

===== Идентификаторы ===== Идентификаторы используются для пометки элемента своим //НЕПОВТОРЯЮЩИМСЯ// именем. Нельзя задать один и тот же ID для двух элементов. Вот нельзя и всё. Распространенный вариант использования - статус подключения к сайту или идентификатор статьи на сайте.



...
User

====== Описание тегов ====== Каждый тег играет свою роль в построении макета страницы и выглядит это так: ===== Служебные ===== Служебные теги имеют в начале себя знак ''!'' и указывают обработчику (парсеру) как обрабатывать внутреннюю информацию и весь файл. * Тег '''' - указывает версию языка разметки. * При значении версии ''html'' браузер использует 5 версию. Желательно использовать этот вариант. * Остальные значения: [[https://ru.wikipedia.org/wiki/HTML#%D0%92%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B_DOCTYPE_%D0%B4%D0%BB%D1%8F_HTML_4.01|Википедия]]. * Тег '''' - комментарий. Может быть как однострочным, так и многострочным. ===== Заголовочные элементы HTML ===== Заголовочные элементы, которые прописываются внутри элемента '''', несут в себе информацию о странице, указывают как ее обрабатывать, какие она имеет подключения файлов и др. Ничего общего с заголовками HTTP не имеют. * '''' - заголовок страницы, выводится как название вкладки; * ''<meta/>'' - [[https://developer.mozilla.org/ru/docs/Web/HTML/Element/meta|метаданные]]; * ''<link/>'' - подключение сторонних файлов (к примеру, таблица стилей), имеет следующие атрибуты: * ''rel'' - атрибут, который показывает браузеру, что делать с подключаемым файлом; * ''stylesheet'' - подключается таблица стилей (CSS); * ''alternate'' - альтернативный вид данных (данные на странице в XML формате); * ''shortcut icon'' - иконка сайта (favicon.ico); * ''type'' - [[https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types|MIME-тип]] файла; * ''href'' - адрес подключаемого файла; * ''<style>'' - таблица стилей внутри HTML файла; * ''<script>'' - подключение скриптов (обычно JavaScript); ===== Элементы структуры и содержания страницы ===== Элементы, которые формируют вид и расположение данных, а также содержат данные, находятся в ''<body>''. ==== Элементы, на которых основаны другие ==== FIXME ((по своей сути, элементы через [[..:css:|таблицу стилей CSS]] берут свое строение от свойства ''display'')) * ''<div>'' - блочный, то есть теги и текст внутри него будут переносится с каждым новым блоком на новую строку. Используется для изменения вида внутреннего содержимого. * ''<span>'' - строковый. Внутри него размещают текст, который не будет переносится и должен иметь свой внешний вид. ==== Элементы, пришедшие с HTML5 ==== Данные элементы по своей сути являются ''<div>'' или ''<span>'', и используются поисковыми движками для выделения информации при обработке. * ''<header>'' - заголовок сайта. На нем, как правило, размещается название сайта, быстрые ссылки, строка поиска по сайту. * ''<aside>'' - боковая часть, на ней размещают карту (все ссылки) сайта, либо актуальные ссылки, рекламу и т.д. * ''<article>'' - основная часть страницы. * ''<footer>'' - нижняя часть (подвал) сайта. Тут размещают полную карту сайта, контакты и прочую информацию. ==== Элементы для текстового содержания ==== * ''<h1>''-''<h6>'' - текстовые заголовки. Обычно используются для создания статей, где нужны заголовки с разным размером заголовков. * ''<p>'' - абзац. Переносит текст на новую строку, имеет отступ. * ''<i>'' - делает текст курсивным((наклонным)). * ''<b>'' или ''<strong>'' - жирное начертание текста. * ''<br/>'' - перенос строки. Если требуется перенести текст внутри блока. * ''<hr/>'' - горизонтальный разделитель. Отображается как линия, занимающая всю ширину элемента. ==== Вспомогательные элементы ==== * ''<a>'' - ссылка на элемент внутри страницы, внутри сайта или папки, на внешний сайт. Её атрибуты: * ''href'' - адрес, по которому пользователь перейдет при нажатии; * ''<img/>'' - изображение рядом с текстом (больше подходит для формирования статей). Его атрибуты: * ''src'' - адрес, по которому находится изображение в сети; * ''width'' и ''height'' - размеры изображения в пикселях; * ''alt'' - текст, если изображение не загрузится; * ''<input/>'' - поле для ввода пользователем информации. Его атрибуты: * ''type'' - тип поля. Их много, вот часть из них: * ''text'' - FIXME, * ''submit'' - FIXME, * ''check'' - FIXME, * ''radio'' - FIXME, * ''button'' - FIXME; * ''value'' - предустановленное значение поля. ====== Шаблон для HTML5 ====== <code html> <!DOCTYPE html> <html> <head>  </head> <body>  </body> </html> </code>