Содержание

Введение

HTML — язык разметки. То есть скелет страницы, задает примерное РАСПОЛОЖЕНИЕ элементов на ней. Внеший вид можно задать как в самом HTML-файле (не следует использовать, так как слишком сильно загромождает код), так и в файле с таблицей стилей CSS.

Что такое блочный и строковый элемент

Блочные элементы используются для построения страницы по вертикали. Выглядеть это будет примерно так (за основу возьмем <div>):

Какие-то тексты, картинки и т.п.
Тоже что-то тут есть, но другое

Строковые элементы используются для построения страницы по горизонтали. А тут используется тег <span>:

Текст, но не только И тут текст
:!: Некоторые браузеры добавляют пробел между строчными элементами. Привет, Firefox!

Элементы

Основным элементом языка разметки HTML является тег. Он выглядит так (пример тега div): 

<div>Привет, мир!</div>

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

Привет<br/>
мир<br/>
!

Различия <тег></тег> и <тег/>

Первый случай <тег></тег> используется, если внутри него подразумевается наличие элементов или тесктовых данных.

Второй <тег/> применяется в тех случаях, если данные внутри тега не обязательны, либо вообще не используются (к примеру тег <br/>).

На самом деле такой вид написания не принципиален, просто сокращает написание кода.

Атрибуты

Для каждого элемента в HTML есть атрибуты. Существуют как универсальные (к примеру, style=""), так и специфические для определенного. Пример: 

<div атрибут1="строковое значение" атрибут2=число>...</div>

Универсальные для видимых тегов:

Классы, имена, идентификаторы

Указываются как атрибуты, внутри элемента.

Классы

Классы представляют собой группу элементов. К примеру, нам требуется указать для определенных тегов <span> цвет текста. Мы можем использовать как атрибут style внутри каждого нужного тега (подходит, если только нужно поменять в паре элементов), так и указать класс элемента и вывести настройку стиля в файл CSS (что гораздо удобнее для нас будет в дальнейшем). Неограничен в количестве вызовов в разных тегах. 

<!-- index.html -->
<head>
    ...
    <!-- Подключаем таблицу стилей из файла -->
    <link rel="stylesheet" type="text/css" href="style.css" />
    ...
</head>
<body>
    ...
    Обычный текст <span class="red-text">Красный текст</span>
    ...
</body>
/* style.css */
.red-text {
    /* Цвет в шестнадцатеричном формате #rgb или #rrggbb или #rrrgggbbb
     *
     * где:
     * r - значение красного цвета от 0 до F (от 0 до 15)
     * g - значение зеленого цвета
     * b - значение синего цвета
     */
 
    color: #ff0000;
}

Имена

Имена можно использовать для формирования и идентификации данных в формах отправки данных (тег <form>). Для того, чтобы дать элементу какое-либо имя, требуется вписать аргумент в нужный тег: 

<input name="firstname" value="Имя" />

Идентификаторы

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

<img src="pic.png" id="usr46_img" />
...
<a href="#usr46_img">User</a>

Описание тегов

Каждый тег играет свою роль в построении макета страницы и выглядит это так:

Служебные

Служебные теги имеют в начале себя знак ! и указывают обработчику (парсеру) как обрабатывать внутреннюю информацию и весь файл.

Заголовочные элементы HTML

Заголовочные элементы, которые прописываются внутри элемента <head>, несут в себе информацию о странице, указывают как ее обрабатывать, какие она имеет подключения файлов и др. Ничего общего с заголовками HTTP не имеют.

Элементы структуры и содержания страницы

Элементы, которые формируют вид и расположение данных, а также содержат данные, находятся в <body>.

Элементы, на которых основаны другие

FIXME 1)

Элементы, пришедшие с HTML5

Данные элементы по своей сути являются <div> или <span>, и используются поисковыми движками для выделения информации при обработке.

Элементы для текстового содержания

Вспомогательные элементы

Шаблон для HTML5

<!DOCTYPE html>
<html>
    <head>
        <!-- Данные, которые будут скрыты со страницы, обычно сюда
        добавляют заголовок, указывают кодировку текста (потому что
        некоторые браузеры используют кодировку, которая отображает
        не все символы, либо отображает вместо них неправильные),
        подключают таблицы стилей и скрипты. -->
    </head>
    <body>
        <!-- А здесь находятся данные, которые отображаются на
        странице (кроме комментариев). -->
    </body>
</html>
1)
по своей сути, элементы через таблицу стилей CSS берут свое строение от свойства display
2)
наклонным