Html для начинающих: вопросы и ответы

Что такое HTML тег

HTML тег — это один из элементов верстки html, который нужен для структуры. Теги имеют открывающий знак < и закрывающий >.

Например, <teg>. Почти каждый тег парный и требует закрывающего тега </teg>. Если вебмастер забудет поставить закрывающий тег или сделает это некорректно, то верстка будет не валидной (см. валидация сайта). Если это тег относится к тем, что держат «каркас» сайта, то сайт может «поплыть» (боковая колонка сместится вниз и т.п.).

Запрещено закрывать теги не по порядку их открытия. Например

Более подробно про создание html страницы читайте в статье:

Знакомство с html

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

Формы

Руководство по инстаграм сторис — ответы на популярные вопросы

Формы используются для получения данных от пользователя. Тег form является контейнером для управляющих элементов.

Пример простой формы:

<form name=»form1″ action=»getform1.php»>
Имя:<br>
<input type=»text» name=»firstname»><br>
Фамилия:<br>
<input type=»text» name=»lastname»><br>
<input type=»submit» value=»Отправить»>
</form>

1
2
3
4
5
6
7

Имя:<br>

Фамилия:<br>

</form>

Для получения данных используется тег <input>:

флажки <input type=»checkbox»>
радиокнопки — <input type=»radio»>
ввод текста — <input type=»text»>
пароль — <input type=»password»>
отправить форму — <input type=»submit»>

и многое другое.

Полный список здесь:

Поля формы можно разделять на логические блоки с помощью элемента <fieldset>. Каждому разделу можно присвоить название с помощью элемента <legend>.

Обязательные для заполнения поля обозначаются атрибутом required. В полях выбора можно сразу установить выбор атрибутом checked.

Для создания больших текстовых полей применяется элемент <textarea>. Размеры поля устанавливаются с помощью атрибутов cols и rows. В поле можно использовать замещающий текст placeholder, который исчезает, как только пользователь начинает ввод текста.

Пример формы с группировкой данных:

<form name=»form2″ action=»getform2.php»>
<fieldset>
<legend>Личная информация:</legend>
Имя:<br>
<input type=»text» name=»firstname» required ><br>
Фамилия:<br>
<input type=»text» name=»lastname»><br><br>
</fieldset>
<fieldset>
<legend>Ввод пароля:</legend>
Введите пароль:<br>
<input type=»password» name=»pass1″><br>
Повторите пароль:<br>
<input type=»password» name=»pass2″><br><br>
</fieldset>
<fieldset>
<legend>Интересы:</legend>
<p>Любимые музыкальные жанры</p>
<ol>
<li><input type=»checkbox» name=»musik» value=»джаз» checked>Джаз</li>
<li><input type=»checkbox» name=»musik» value=»блюз» checked>Блюз</li>
<li><input type=»checkbox» name=»musik» value=»рок»>Рок</li>
<li><input type=»checkbox» name=»musik» value=»кантри»>Кантри</li>
</ol>

<p>Хобби</p>
<select name=»hobby» size=»7″ multiple>
<option selected value=»1″>Спорт</option>
<option value=»2″>Рыбалка</option>
<option value=»3″>Игры</option>
<option value=»4″>Животные</option>
<option value=»5″>Путешествия</option>
<option value=»6″>Танцы</option>
<option value=»7″>Театр</option>
</select>

</fieldset>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<legend>Личная информация:</legend>

Имя:<br>

Фамилия:<br>

</fieldset>

<legend>Ввод пароля:</legend>

Введите пароль:<br>

Повторите пароль:<br>

</fieldset>

<legend>Интересы:</legend>

<p>Любимые музыкальные жанры</p>

<ol>

<li><input type=»checkbox»name=»musik»value=»кантри»>Кантри</li>

</ol>

<p>Хобби</p>

<option selectedvalue=»1″>Спорт</option>

<option value=»2″>Рыбалка</option>

<option value=»4″>Животные</option>

<option value=»5″>Путешествия</option>

<option value=»6″>Танцы</option>

<option value=»7″>Театр</option>

</select>

</fieldset>

</form>

Литература

Фримен Эрик, Фримен Элизабет. Изучаем HTML, XHTML и CSS = Head First HTML with CSS & XHTML. — П.: «Питер», 2010. — 656 с. — ISBN 978-5-49807-113-8.
Эд Титтел, Джефф Ноубл. HTML, XHTML и CSS для чайников, 7-е издание = HTML, XHTML & CSS For Dummies, 7th Edition. — М.: «Диалектика», 2011. — 400 с. — ISBN 978-5-8459-1752-2.
Питер Лабберс, Брайан Олберс, Фрэнк Салим. HTML5 для профессионалов: мощные инструменты для разработки современных веб-приложений = Pro HTML5 Programming: Powerful APIs for Richer Internet Application Development. — М.: «Вильямс», 2011. — 272 с. — ISBN 978-5-8459-1715-7.
Стивен Шафер. HTML, XHTML и CSS. Библия пользователя, 5-е издание = HTML, XHTML, and CSS Bible, 5th Edition. — М.: «Диалектика», 2010. — 656 с. — ISBN 978-5-8459-1676-1.
Фримен Эрик, Фримен Элизабет. Изучаем HTML, XHTML и CSS = Head First HTML with CSS & XHTML. — 1-е изд. — М.: «Питер», 2010. — С. 656. — ISBN 978-5-49807-113-8.

Ответы на любые вопросы

Версии

HTML 3.0 — 28 марта 1995 года — IETF Internet Draft (до 28 сентября 1995 года);
HTML 3.2 — 14 января 1997 года;
HTML 4.0 — 18 декабря 1997 года;
HTML 4.01 — 24 декабря 1999 года;
ISO/IEC 15445:2000 (так называемый ISO HTML, основан на HTML 4.01 Strict) — 15 мая 2000 года;
HTML5 — 28 октября 2014 года;
HTML 5.1 начал разрабатываться 17 декабря 2012 года. Рекомендован к применению с 1 ноября 2016 года
HTML 5.2 был представлен 14 декабря 2017 года.
HTML 5.3 был представлен 24 декабря 2018 года.

Элементы формы, добавленные в html 5

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

Версия 3 была предложена Консорциумом Всемирной паутины (W3C) в марте 1995 года и обеспечивала много новых возможностей, таких как создание таблиц, «обтекание» изображений текстом и отображение сложных математических формул, поддержка gif формата. Даже при том, что этот стандарт был совместим со второй версией, реализация его была сложна для браузеров того времени. Версия 3.1 официально никогда не предлагалась, и следующей версией стандарта HTML стала 3.2, в которой были опущены многие нововведения версии 3.0, но добавлены нестандартные элементы, поддерживаемые браузерами Netscape Navigator и Mosaic.

В версии HTML 4.0 произошла некоторая «очистка» стандарта. Многие элементы были отмечены как устаревшие и не рекомендованные (англ. deprecated). В частности, тег , используемый для изменения свойств шрифта, был помечен как устаревший (вместо него рекомендуется использовать таблицы стилей CSS).

В 1998 году Консорциум Всемирной паутины начал работу над новым языком разметки, основанным на HTML 4, но соответствующим синтаксису XML. Впоследствии новый язык получил название XHTML. Первая версия XHTML 1.0 одобрена в качестве Рекомендации консорциума Всемирной паутины 26 января 2000 года.

Планируемая версия XHTML 2.0 должна была разорвать совместимость со старыми версиями HTML и XHTML, но 2 июля 2009 года Консорциум Всемирной паутины объявил, что полномочия рабочей группы XHTML2 истекают в конце 2009 года. Таким образом, была приостановлена вся дальнейшая разработка стандарта XHTML 2.0.

HTML код — что это такое простыми словами

HTML (англ. «hyper text markup language» — язык гипертекстовой разметки) — это специальный язык разметки, который применяется при создании сайтов в интернете.

Браузеры прекрасно понимают html и могут интерпретировать его в понятном виде. Вообще любая страница сайта — это html-код, который браузер переводит в дружественный вид для пользователя. Кстати, код любой страницы является доступным для всех. Для его просмотра щелкните правой кнопкой мыши и выберите посмотреть исходных код или нажмите на клавиатуре CTRL+U:

Язык разметки html получил широкую популярность. На данный момент — это единственный язык, с помощью которого создается разметка сайта. Я хочу подчеркнуть тот факт, что именно разметка. Так называемый «движок» создается на другом языке программирования (чаще всего php), который позволяет создавать интерактивные страницы (html этого не позволяет).

Файлы, созданные на html, имеют расширения .html или .htm. Чтобы создать файл html, достаточно открыть блокнот и сохранить его с расширением .html. Как это сделать можете посмотреть на странице: пример создания простой html страницы

Примечание

Внимательный читатель обратит внимание, что далеко не у всех страниц на конце в интернете расширение .html. К примеру есть страницы /catalog/list (вообще без расширения)

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

Таблица

Решившись работать в текстовом редакторе, внимательно следуйте пошаговой инструкции о том, как сделать кроссворд в Word. Первым делом создаём таблицу — поле будущей головоломки. Делается это следующим образом.

На вкладке «Вставка» есть раздел, посвящённый таблицам. Нажмите там на значок и увидите сетку.

Если вы делаете небольшое поле, то выделите мышкой нужное количество ячеек и кликните на них, – у вас на листе появится сетка таблицы.

В Word стандартно можно создать поле до 10х8 ячеек. Если нужно больше, то нажмите на ссылку «Вставить таблицу». Откроется дополнительное окно, где вручную введите количество столбцов и строк.

Выравнивание ячеек

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

Откройте «Свойства таблицы». Пройти к ним можно двумя путями:

Выделяете таблицу. Кликнув на неё правой кнопкой, откройте меню – внизу нужная ссылка.
Поставив курсор в ячейку, зайдите на открывшуюся вкладку «Макет». Слева есть кнопка «Свойства».

Открыв «Свойства таблицы», увидите вкладки «Строка» и «Столбец». Зайдите вначале в одну из них, задайте величину, например, 1 см. Поставьте режим «Точно». Затем то же самое проделайте на второй вкладке.

После этого получится сетка с ровными квадратными ячейками.

Выравнивание текста

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

Кликните на ячейки правой кнопкой.
В меню нажмите на «Выравнивание ячеек» — «Сверху по левому краю».
Далее установите шрифт (допустим, Arial) и размер (9).

Вам осталось решить, как составить кроссворд в Word, каким содержанием его наполнить, а также занести слова ответов и цифры в клетки, чтобы определить, какие нужно оставить, а какие закрасить.

Формирование поля

Вы создали основу, теперь разберёмся, как нарисовать кроссворд в Word. Вам нужно закрасить пустые клетки внутри.

Поставьте курсор в клеточку, которая будет пустая, зайдите на вкладку «Конструктор». В разделе «Стили таблиц» увидите кнопку «Заливка», нажав на неё, получите палитру цветов. Выбираете нужный вам (чаще чёрный). Можно выделить сразу несколько рядом расположенных ячеек и залить их цветом.

Удаление лишних ячеек

По краям могут оказаться лишние ячейки. Чтобы их убрать, воспользуйтесь следующим способом: с помощью инструмента «Ластик» (во вкладке «Конструктор» — «Рисование границ») удалите ненужные линии.

Можно очертить линии поля другим способом. Создав таблицу, во вкладке «Главная» уберите все границы и активируйте «Отобразить сетку», чтобы видеть разметку. Определив нужные ячейки, выделите их и очертите с помощью кнопки «Все границы». Затем залейте внутренние пустые клеточки. Внешние пустые клетки не будут выделены линиями.

История развития HTML

HTML 1.0 (1986) — самая первая версия, в которой отсутствовало множество важных тегов. Официально не существует.
HTML 2.0 (22 сентября 1995) — появление тега form
HTML 3.2 (14 января 1997) — появление тега table, а также различные эффекты обтекания текста изображения
HTML 4.0, 4.01 (24 декабря 1999)— добавлена поддержка скриптов и фреймов, введена таблица стилей CSS
HTML 5.0 — новая версия, которая вступила в силу с 2014 году. Советую прочитать: особенности оптимизации сайта в html5

Кстати, в выше рассмотренном примере, чтобы подчеркнуть использование стандарта HTML 5.0 мы использовали специальный тег <!DOCTYPE> в начале документа.

На нашем сайте Вы можете найти уроки по html с множеством примеров и пояснений. После их прочтения Вы должны освоить азы HTML.

Внутренняя таблица стилей

Данный стиль определяется в самом HTML-документе и обычно располагается в заголовке веб-страницы HEAD. По своей гибкости и возможностям этот способ подключения стилей уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, стили разполагаются прямо в теле HTML-документа. Вы можете включить правила CSS в НТМL-страницу, поместив их внутри элемента <style>, который обычно находится в элементе <head>, но фактически может быть помещен в любом месте документа. Этих тегов на странице может быть несколько.

Тег <style> позволяет записывать внутри себя код в формате CSS:

Пример: Внутренняя таблица стилей

Результат
HTML-код
Попробуй сам »

В данном примере мы с помощью CSS установили цвет фона для элемента <body>: background-color:palegreen, цвет и тип шрифта для заголовков <h1>: color: blue; font-family:verdana, а также размер шрифта, цвет и выравнивание текста по центру для параграфов <p>: font-size:20px; color:red; text-align:center.

Браузеры

Текстовые документы, содержащие разметку на языке HTML (такие документы традиционно имеют расширение или ), обрабатываются специальными приложениями, которые отображают документ в его форматированном виде. Такие приложения, называемые «браузерами» или «интернет-обозревателями», обычно предоставляют пользователю удобный интерфейс для запроса веб-страниц, их просмотра (и вывода на иные внешние устройства) и, при необходимости, отправки введённых пользователем данных на сервер. Наиболее популярными на сегодняшний день браузерами являются Google Chrome, Mozilla Firefox, Opera, Internet Explorer и Safari (см.: ).

Создание простого html-документ в блокноте

1. Для того чтобы сделать свою первую html страницу откройте обычный блокнот и сохраните его под каким-то именем (например, index.html). Тип файла необходимо выбрать «все файлы», а после имени обязательно дописать «.html» или «.htm«, но лучше придерживаться первого варианта (хотя разницы нету).

Должен получиться файл «index.html«. В принципе это уже можно назвать html документом, однако в нем ничего нету, поэтому переходим к шагу два — наполнение страницы.

2. Отрываем созданный файл через блокнот и вписываем в него следующее (можете просто скопировать):

После этого сохраните этот файл. Теперь откройте index.html через любой браузер, в отрывшейся вкладке должна появиться надпись «У меня получилось сделать первую страницу!», а в заголовке будет написано «Пример создания страницы html в блокноте». Такой документ можно уже выкладывать в интернет. Как видите, ничего сложного нет, все просто.

Теперь вкратце поговорим о структуре любого html-документа.

Как посмотреть html код страницы

В любом браузере (например, Firefox, Google Chrome, Opera) нажмите правой кнопкой мыши на любом месте на странице сайта и выберите из выпадающего меню «исходный код страницы» или воспользоваться комбинацией CTRL+U. Перед Вами откроется html-код страницы. Каждая страница сайта, которая есть в интернете, имеет свой код.

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

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

Создание форм и кнопок

<form></form> — создание форм на странице. С помощью HTML описывается только внешний вид, для выполнения функций требуется запуск соответствующих скриптов на сервере.

<button></button> — создаёт интерактивную кнопку. Внутри контейнера нужно поместить текст или изображение.
<select multiple name=»NAME» size=?></select> — формирует меню с поддержкой скроллинга.
<select name=»NAME»></select> — создаёт ниспадающее меню.

<option></option> — описывает каждый отдельный пункт меню.
<input> — формирует поля для добавления пользовательских данных.
<output> — выводит результаты вычислений, сделанных с помощью скрипта.

<label> — оформляет пометку для поля, созданного тегом <input>.

<textarea></textarea> — создаёт большие поля для ввода текста.

Структура html-документа

1. Любой html документ должен иметь теги

<html> — открывающий тег документа (располагается самым первым), </html> — закрывающий тег документа (должен быть самым последним)

Вообще в html практически все теги состоят из двух элементов: открывающий <ТЕГ> и закрывающий </ТЕГ>.

Теги можно писать с большой буквы, а можно и с маленькой, поскольку браузеры не воспринимают регистры. То есть, если Вы напишите так:

То это будет равносильно тому, что было написано чуть выше, но играть с регистрами букв не рекомендуется. Как минимум потому, что это будет считаться плохой валидацией сайта. Придерживайтесь одного из двух стилей: либо все теги с маленькой буквы, либо с большой (лучше с маленькой).

2. Любой html документ можно разделить на две части
2.1. Заголовок страницы. Это невидимая для пользователя часть страницы, не является обязательной (однако, для продвижения сайта и оптимизации кода страницы она очень важна). Синтаксис заголовочной части:

Между тегами <head> и </head> располагаются следующие элементы:

мета теги html (meta)
заголовок страницы <title> (см. как правильно написать тег <title>)
подключаемые яваскрипты (JavaScript)
подключаемые стили (link) и т.д.

Все эти элементы подробно разобраны в специальном уроке по заголовочным тегам »

2.2. Тело страницы (или основная часть). Является видимой для пользователя частью (она располагается в тегах body). Её синтаксис:

<body> — открывающий тег тела страницы. Сразу после него идет то, что видит пользователь: дизайн и контент страницы. Тело и, собственно, весь html-документ должны заканчиваться последовательностью:

Примечание: заголовочные теги обязательно должен располагаться перед телом страницы! Сразу после закрывающего тега </head> должно идти основная часть страницы.

Все теги, которые можно писать в этой части рассмотрены в уроке 3 — самые основные html теги.

Уважаемый читатель, я думаю, что теперь Вы имеете небольшое представление о html-документе. Далее Вам предстоит узнать множество других тегов, которые необходимы для работы. Это был вводный урок, целью которого было ознакомление с html. Теперь советую перейти к следующим урокам.

Следующий урок: Урок 2. Пример создание простой html-страницы

Открытие ссылок в новом окне

Чтобы создать ссылку, открывающую страницу в новом окне браузера, вы можете воспользоваться атрибутом target открывающего тега элемента <a>. Значение этого атрибута должно быть установлено _blank. Чаще всего ссылки данного вида ставятся, если они перебрасывают посетителя на сторонний сайт. В этом случае создатели сайтов надеются, что посетитель вернется на их сайт по завершении просмотра открывшейся страницы, так как в этом случае ваш сайт остается открытым в исходном окне посетителя и не дает ему забыть о вас. Одни пользователи любят средство отображения в отдельном окне, а у других новые окна могут вызывать скорее чувство раздражения, чем комфорта. Поэтому пользуйтесь этим приемом экономно, лишь к некоторым ссылкам и, при этом, будет не лишним заранее предупредить посетителя, что страница откроется в новом окне.

В следующем примере показано как создать ссылку, открывающую страницу в новом окне браузера:

Если установить значение _blank для всех ссылок на веб-странице, то каждая из этих ссылок будет открываться у посетителя в новом окне, в результате перед пользователем может оказаться великое множество открытых окон. Для избегания подобной ситуации можно присвоить целевому окну индивидуальное имя, которое можно будет указывать в ссылках вместо значения _blank. Следующая ссылка откроется в новом окне с именем _window:

Укажите в каждой ссылке, на своей веб-странице, значение _window вместо _blank и все документы, к которым будет осуществляться переход по ссылкам, будут открываться в том же самом втором окне, а ваш сайт остается открытым в исходном окне.

Атрибут target может принимать следующие значения:

Значение	Описание
_blank	Открыть страницу в новом окне или вкладке.
_self	Открыть страницу в том же окне (это значение задается по умолчанию).
_parent	Используется при работе с фреймами и позволяет открыть страницу в родительском фрейме; если на текущей странице нет фреймов, то это значение работает как _self.
_top	Применяется при работе с фреймами и позволяет открыть страницу в полном окне браузера, заменяя собой все фреймы, которые были на странице; если на текущей странице нет фреймов, то это значение работает как _self.
framename	Открыть страницу в новом окне с именем framename.

Что такое HTML?

Язык HTML (HyperText Markup Language — язык разметки гипертекста) — это язык для обозначения элементов веб-страницы. Это не язык программирования, поэтому любой может его освоить. Суть языка в том, что нужно исходный текст разметить специальными метками — тегами.

Например, тег параграфа выглядит так:

<p>Пример параграфа</p>

1	<p>Пример параграфа</p>

В данном примере мы разметили текст тегом p. В начале стоит открывающий тег <p>, а в конце — закрывающий тег </p>.

Каждый тег обозначается некоторым кодом. Обычно тег начинается знаком «<код параметры>» и заканчивается знаком «</код>». Существуют теги без закрывающего знака.

Стандарт HTML: https://www.w3.org/TR/html52/

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

<p align=»left»>Пример текста</p>

Пробелы в HTML сокращаются до одного пробела. Переводы строк игнорируются.

Чаще всего используются следующие теги:

<b> — полужирный текст
<i> — курсив
<br> — перевод строки
<hr> — горизонтальная линия

<a> — ссылка
<pre> — форматированный текст

<ins> — добавленный текст
<del> — удаленный текст

Существует шесть уровней заголовков: с <h1> по <h6>.

<h1>Заголовок уровня 1</h1>
<h2>Заголовок уровня 2</h2>
<h3>Заголовок уровня 3</h3>
<h4>Заголовок уровня 4</h4>
<h5>Заголовок уровня 5</h5>
<h6>Заголовок уровня 6</h6>

1
2
3
4
5
6

<h1>Заголовок уровня 1</h1>

<h2>Заголовок уровня 2</h2>

<h3>Заголовок уровня 3</h3>

<h4>Заголовок уровня 4</h4>

<h5>Заголовок уровня 5</h5>

<h6>Заголовок уровня 6</h6>

Результат будет выглядеть так: