Как создать html

Начало работы с HTML

В этой статье мы охватим азы HTML, необходимые для начала работы. Дадим определение «элементам», «атрибутам», «тегам» и прочим важным понятиям, о которых вы, возможно, слышали, а также об их роли в языке. Мы также покажем, как устроены HTML-элементы, типичная HTML-страница, и объясним другие важные аспекты языка. По ходу дела, чтобы вы не заскучали, мы поиграем с настоящей HTML-страницей!

Необходимые знания:	Умение работать с компьютером, наличие необходимого ПО, базовые знания о работе с файлами.
Цель:	Познакомиться с языком HTML и научиться описывать некоторые его элементы.

Что такое HTML?

HTML (HyperText Markup Language — язык гипертекстовой разметки) не является языком программирования; это язык разметки, используемый для определения структуры веб-страниц, посещаемых пользователями. Они могут иметь сложную или простую структуру, всё зависит от замысла и желания веб-разработчика. HTML состоит из ряда элементов, которые вы используете для того, чтобы охватить, обернуть или разметить различные части содержимого, чтобы оно имело определённый вид или срабатывало определённым способом. Встроенные тэги могут преобразовать часть содержимого в гиперссылку, по которой можно перейти на другую веб-страницу, выделить курсивом слова и так далее. Например, рассмотрим следующую строку:

Мой кот очень сердитый

Если мы хотим, чтобы строка отобразилась в таком же виде, мы можем определить её, как «параграф», заключив её в теги элемента «параграф» ( ), например:

p>Мой кот очень сердитыйp>

Структура HTML-элементов

Давайте рассмотрим элемент «параграф» чуть подробнее:

Основными частями элемента являются:

Открывающий тег: Он состоит из названия (обозначения) элемента (в нашем случае, p), помещённого внутри угловых скобок. Данный тег служит признаком начала элемента, с этого момента тег начинает влиять на следующее после него содержимое.
Закрывающий тег: выглядит как и открывающий, но содержит слеш перед названием тега. Он служит признаком конца элемента. Пропуски закрывающих тегов — типичная ошибка новичков, которая может приводить к неопределённым результатам — в лучшем случае всё сработает правильно, в других страница может вовсе не прорисоваться или прорисоваться не как ожидалось.
Содержимое: Как видно, в нашем случае содержимым является простой текст.
Элемент: открывающий тег + закрывающий тег + содержимое = элемент.

Активное изучение: создание вашего первого HTML-элемента

Отредактируйте строку текста ниже в поле Ввод, обернув её тегами и (вставьте перед строкой, чтобы указать начало элемента, и после неё, чтобы указать конец элемента) — эти действия должны выделить строку текста курсивом! Вы можете видеть изменения в реальном времени в поле Вывод.

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

h2>Результатh2> div class="output" style="min-height: 50px;">div> h2>Редактируемый кодh2> p class="a11y-label"> Нажмите Esc, чтобы выйти из области кода (Tab вставляет символ табуляции). p> textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"> Это мой текст. textarea> div class="controls"> input id="reset" type="button" value="Сбросить" /> input id="solution" type="button" value="Показать решение" /> div>

html  font-family: "Open Sans Light", Helvetica, Arial, sans-serif; > h2  font-size: 16px; > .a11y-label  margin: 0; text-align: right; font-size: 0.7rem; width: 98%; > body  margin: 10px; background: #f5f9fa; >

var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); var solution = document.getElementById("solution"); var output = document.querySelector(".output"); var code = textarea.value; var userEntry = textarea.value; function updateCode()  output.innerHTML = textarea.value; > reset.addEventListener("click", function ()  textarea.value = code; userEntry = textarea.value; solutionEntry = htmlSolution; solution.value = "Показать решение"; updateCode(); >); solution.addEventListener("click", function ()  if (solution.value === "Показать решение")  textarea.value = solutionEntry; solution.value = "Спрятать решение"; > else  textarea.value = userEntry; solution.value = "Показать решение"; > updateCode(); >); var htmlSolution = "Это мой текст."; var solutionEntry = htmlSolution; textarea.addEventListener("input", updateCode); window.addEventListener("load", updateCode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function (e)  if (e.keyCode === 9)  e.preventDefault(); insertAtCaret("\t"); > if (e.keyCode === 27)  textarea.blur(); > >; function insertAtCaret(text)  var scrollPos = textarea.scrollTop; var caretPos = textarea.selectionStart; var front = textarea.value.substring(0, caretPos); var back = textarea.value.substring( textarea.selectionEnd, textarea.value.length, ); textarea.value = front + text + back; caretPos = caretPos + text.length; textarea.selectionStart = caretPos; textarea.selectionEnd = caretPos; textarea.focus(); textarea.scrollTop = scrollPos; > // Update the saved userCode every time the user updates the text area code textarea.onkeyup = function ()  // We only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if (solution.value === "Показать решение")  userEntry = textarea.value; > else  solutionEntry = textarea.value; > updateCode(); >;

Вложенные элементы

Вы также можете вкладывать элементы внутрь других элементов — это называется вложенностью. Если мы хотим подчеркнуть, что наш кот очень сердитый, мы можем заключить слово «очень» в элемент , который означает, что это слово крайне важно в данном контексте:

p>Мой кот strong>оченьstrong> сердитый.p>

Вы должны удостовериться, что элементы вложены должным образом: в следующем примере мы открываем p элемент первым, затем элемент strong , затем мы закрываем элемент strong первым, затем p . Следующее писать неправильно:

p>Мой кот strong>очень сердитый.p>strong>

Элементы должны открываться и закрываться правильно таким образом, чтобы явно находиться внутри или снаружи друг друга. Если они перекрываются так, как в примере выше, то ваш браузер попытается «додумать» за вас, что вы имели в виду, и вы получите непредсказуемый результат. Так что не делайте так!

Блочные и строчные элементы

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

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

Посмотрите на следующий пример:

em>Первыйem> em>второйem> em>третийem> p>четвёртыйp> p>пятыйp> p>шестойp>

Примечание: HTML5 переопределил категории элементов в HTML: смотрите Категории типов содержимого элементов. Хотя эти определения точнее и однозначнее, чем те, которые были раньше, их гораздо сложнее понять, чем «блочный» и «строчный», поэтому мы будем придерживаться их в этом разделе.

Примечание: Не путайте термины «блочный» и «строчный», используемые в этом разделе, с одноимёнными типами отображения в CSS. Хотя по умолчанию они коррелируют, смена типа отображения в CSS не меняет категорию элемента и не влияет на то, во что его можно вкладывать и что можно вкладывать в него. Эта довольно частая путаница — одна из причин, почему HTML5 отказался от этих терминов.

Примечание: вам могут пригодиться справочники, включающие списки блочных и строчных элементов — смотри Элементы блочного уровня и Строчные элементы.

Пустые элементы

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

img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png" />

Это выведет на вашу страницу следующее:

Примечание: Пустые элементы иногда называют void-элементами.

Атрибуты

У элементов также могут быть атрибуты, которые выглядят так:

My cat is very grumpy

Атрибуты содержат дополнительную информацию об элементе, которая, по вашему мнению, не должна отображаться в содержимом элемента. В данном случае атрибут class позволяет вам дать элементу идентификационное имя, которое в дальнейшем может быть использовано для обращения к элементу с информацией о стиле и прочими вещами.

Атрибут должен иметь:

Пробел между атрибутом и именем элемента (или предыдущим атрибутом, если у элемента уже есть один или несколько атрибутов).
Имя атрибута и следующий за ним знак равенства.
Значение атрибута, заключённое в кавычки.

Активное изучение: Добавление атрибутов в элемент

В значении этого атрибута прописывается веб-адрес, на который, по вашей задумке, должна указывать ссылка, куда браузер переходит, когда вы по ней кликаете. Например, href=»https://www.mozilla.org/» .

Атрибут title описывает дополнительную информацию о ссылке, такую как: на какую страницу она ведёт. Например, title=»The Mozilla homepage» . Она появится в виде всплывающей подсказки, когда вы наведёте курсор на ссылку.

Атрибут target определяет контекст просмотра, который будет использоваться для отображения ссылки. Например, target=»_blank» отобразит ссылку на новой вкладке. Если вы хотите отобразить ссылку на текущей вкладке, просто опустите этот атрибут.

h2>Результатh2> div class="output" style="min-height: 50px;">div> h2>Редактируемый кодh2> p class="a11y-label"> Нажмите Esc, чтобы выйти из области кода (Tab вставляет символ табуляции). p> textarea id="code" class="input" style="min-height: 100px;width: 95%"> <p>Ссылка на мой любимый веб-сайт.</p> textarea> div class="playable-buttons"> input id="reset" type="button" value="Сбросить" /> input id="solution" type="button" value="Показать решение" /> div>

html  font-family: sans-serif; > h2  font-size: 16px; > .a11y-label  margin: 0; text-align: right; font-size: 0.7rem; width: 98%; > body  margin: 10px; background: #f5f9fa; >

var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); var solution = document.getElementById("solution"); var output = document.querySelector(".output"); var code = textarea.value; var userEntry = textarea.value; function updateCode()  output.innerHTML = textarea.value; > reset.addEventListener("click", function ()  textarea.value = code; userEntry = textarea.value; solutionEntry = htmlSolution; solution.value = "Показать решение"; updateCode(); >); solution.addEventListener("click", function ()  if (solution.value === "Показать решение")  textarea.value = solutionEntry; solution.value = "Спрятать решение"; > else  textarea.value = userEntry; solution.value = "Показать решение"; > updateCode(); >); var htmlSolution = 'Ссылка на мой любимый веб-сайт.
'; var solutionEntry = htmlSolution; textarea.addEventListener("input", updateCode); window.addEventListener("load", updateCode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function (e)  if (e.keyCode === 9)  e.preventDefault(); insertAtCaret("\t"); > if (e.keyCode === 27)  textarea.blur(); > >; function insertAtCaret(text)  var scrollPos = textarea.scrollTop; var caretPos = textarea.selectionStart; var front = textarea.value.substring(0, caretPos); var back = textarea.value.substring( textarea.selectionEnd, textarea.value.length, ); textarea.value = front + text + back; caretPos = caretPos + text.length; textarea.selectionStart = caretPos; textarea.selectionEnd = caretPos; textarea.focus(); textarea.scrollTop = scrollPos; > // Update the saved userCode every time the user updates the text area code textarea.onkeyup = function ()  // We only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if (solution.value === "Показать решение")  userEntry = textarea.value; > else  solutionEntry = textarea.value; > updateCode(); >;

Булевые атрибуты

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

Для краткости совершенно допустимо записывать их следующим образом (мы также для справки разместили не деактивированный элемент input, чтобы дать вам большее понимание происходящего):

input type="text" disabled /> input type="text" />

На выходе оба варианта будут выглядеть следующим образом:

Опускание кавычек вокруг значений атрибутов

Осматриваясь во всемирной сети, вы будете встречать различные незнакомые способы написания разметки, включая написание значений атрибутов без кавычек. Это допустимо при определённых условиях, но разрушит вашу разметку при других. Например, возвращаясь к нашему упражнению с гиперссылкой, мы можем написать основной вариант только с атрибутом href так:

a href=https://www.mozilla.org/>любимый веб-сайтa>

Однако, как только мы добавим атрибут title в таком же стиле, мы поступим неверно:

a href=https://www.mozilla.org/ title=The Mozilla homepage>favorite websitea>

В этом месте браузер неверно истолкует вашу разметку, думая, что атрибут title — это на самом деле три разных атрибута — атрибут title со значением «The» и два булевых атрибута: Mozilla и homepage . Это, очевидно, не то, что имелось в виду, и приведёт к ошибке или неожиданному поведению кода, как это показано в живом примере ниже. Попробуйте навести курсор на ссылку, чтобы увидеть, на что похож текст title!

Наш совет: всегда используйте кавычки в атрибутах — это позволит избежать подобных проблем, и, следовательно, код будет более читабельным.

Одинарные или двойные кавычки?

В этой статье вы заметите, что все атрибуты заключены в двойные кавычки. Однако, вы можете видеть одинарные кавычки в HTML документах других людей. Это исключительно дело вкуса, и вы можете свободно выбирать, какие из них предпочитаете. Обе следующие строки эквивалентны:

a href="http://www.example.com">Ссылка к моему примеру.a> a href='http://www.example.com'>Ссылка к моему примеру.a>

Однако вы должны убедиться, что не смешиваете их вместе. Следующее будет неверным!

Если вы используете один тип кавычек в своём HTML, то вы можете поместить внутрь их кавычки другого типа, не вызывая никаких проблем:

a href="http://www.example.com" title="Isn't this fun?" >A link to my example.a >

Если вы хотите вставить кавычки того же типа, то вы должны использовать объекты HTML. Например, это работать не будет:

a href='http://www.example.com' title='Isn't this fun?'>A link to my example.a>

Поэтому вам нужно сделать так:

a href="http://www.example.com" title="Isn't this fun?" >A link to my example.a >

Структура HTML документа

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

doctype html> html> head> meta charset="utf-8" /> title>Тестовая страницаtitle> head> body> p>Это — моя страницаp> body> html>

Вот что мы имеем:

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Активное изучение: Добавление элементов в ваш HTML-документ

Если вы хотите поэкспериментировать с написанием HTML на своём компьютере, то можете:

Скопировать пример HTML-страницы, расположенный выше.
Создать новый файл в текстовом редакторе.
Вставить код в ваш новый текстовый файл.
Сохранить файл как index.html .

Примечание: вы также можете найти этот базовый пример HTML на MDN Learning Area Github repo.

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

Скриншот примера тестовой страницы

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

Добавьте заголовок страницы сразу за открывающим тегом . Текст должен находиться между открывающим тегом

и закрывающим

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

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

h2>Результатh2> div class="output" style="min-height: 50px;">div> h2>Редактируемый кодh2> p class="a11y-label"> Нажмите Esc, чтобы выйти из области кода (Tab вставляет символ табуляции). p> textarea id="code" class="input" style="min-height: 100px;width: 95%"> <p>Это — моя страница</p> textarea> div class="playable-buttons"> input id="reset" type="button" value="Сбросить" /> input id="solution" type="button" value="Показать решение" /> div>

html  font-family: sans-serif; > h2  font-size: 16px; > .a11y-label  margin: 0; text-align: right; font-size: 0.7rem; width: 98%; > img  max-width: 100%; > body  margin: 10px; background: #f5f9fa; >

var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); var solution = document.getElementById("solution"); var output = document.querySelector(".output"); var code = textarea.value; var userEntry = textarea.value; function updateCode()  output.innerHTML = textarea.value; > reset.addEventListener("click", function ()  textarea.value = code; userEntry = textarea.value; solutionEntry = htmlSolution; solution.value = "Показать решение"; updateCode(); >); solution.addEventListener("click", function ()  if (solution.value === "Показать решение")  textarea.value = solutionEntry; solution.value = "Спрятать решение"; > else  textarea.value = userEntry; solution.value = "Показать решение"; > updateCode(); >); var htmlSolution = 'Мне очень нравится играть на барабанах. Мой любимый барабанщик — Нил Пирт, который играет в группе "Rush". Мой любимый альбом Rush — "Moving Pictures".
 '; var solutionEntry = htmlSolution; textarea.addEventListener("input", updateCode); window.addEventListener("load", updateCode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function (e)  if (e.keyCode === 9)  e.preventDefault(); insertAtCaret("\t"); > if (e.keyCode === 27)  textarea.blur(); > >; function insertAtCaret(text)  var scrollPos = textarea.scrollTop; var caretPos = textarea.selectionStart; var front = textarea.value.substring(0, caretPos); var back = textarea.value.substring( textarea.selectionEnd, textarea.value.length, ); textarea.value = front + text + back; caretPos = caretPos + text.length; textarea.selectionStart = caretPos; textarea.selectionEnd = caretPos; textarea.focus(); textarea.scrollTop = scrollPos; > // Update the saved userCode every time the user updates the text area code textarea.onkeyup = function ()  // We only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if (solution.value === "Показать решение")  userEntry = textarea.value; > else  solutionEntry = textarea.value; > updateCode(); >;

Пробелы в HTML

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

p>Собаки глупы.p> p>Собаки глупы.p>

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

Ссылки на сущности: Включение специальных символов в HTML

В HTML символы < , >, » , ‘ и & являются специальными. Они являются частью самого синтаксиса HTML. Так как же включить в текст один из этих специальных символов? Например, если вы хотите использовать амперсанд или знак «меньше» и не интерпретировать его как код.

Мы должны использовать ссылки-мнемоники — специальные коды, которые отображают спецсимволы, и могут быть использованы в необходимых позициях. Каждая ссылка-мнемоник начинается с амперсанда (&) и завершается точкой с запятой (;).

Буквенный символ	Символьный эквивалент
	<
>	>
«	"
‘	'
&	&

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

p>В HTML вы определяете параграф элементом p>.p> p>В HTML вы определяете параграф элементом <p>.p>

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

является началом нового абзаца! Второй абзац нашего кода выводится правильно, потому что мы заменили угловые скобки на ссылки-мнемоники.

Примечание: Таблица всех доступных в HTML символов-мнемоников — в Википедии: List of XML and HTML character entity references.

HTML комментарии

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

Чтобы превратить часть содержимого HTML-файла в комментарий, нужно поместить её в специальные маркеры , например:

p>Меня нет в комментариях(p> А теперь есть!
 -->

Как вы увидите ниже, первый параграф будет отображён на экране, а второй нет.

Подведение итогов

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

Примечание: Сейчас, когда вы начинаете больше узнавать о HTML, вы также можете начать изучать основы каскадных таблиц стилей Cascading Style Sheets, или CSS. CSS — это язык, который используется для стилизации веб-страниц (например, изменение шрифта или цветов или изменение макета страницы). Как вы скоро поймёте, HTML и CSS созданы друг для друга.

Смотрите также

Применение цвета к элементам HTML с помощью CSS

Обзор: Начало работы
Далее

В этом модуле

Начало работы с HTML
Что такое заголовок? Метаданные в HTML
Основы редактирования текста в HTML
Создание гиперссылок
Углублённое форматирование текста
Структура документа и веб-сайта
Отладка HTML
Разметка письма
Структурируем страницу

Создание HTML-документа — Создать или загрузить HTML на С#

Эта статья предлагает подробное руководство по созданию HTML-документа. Aspose.HTML для .NET API предоставляет класс HTMLDocument, который является корнем иерархии HTML и содержит все содержимое.

HTML-документ

HTMLDocument является отправной точкой для библиотеки классов Aspose.HTML. Вы можете загрузить HTML-страницу в объектную модель документа (DOM) с помощью класса HTMLDocument, а затем программно читать, изменять дерево документа, добавлять и удалять узлы, изменять свойства узла в документе, как это описано в официальных спецификациях.

Класс HTMLDocument обеспечивает представление в памяти HTML DOM и полностью основан на W3C DOM и WHATWG DOM, которые поддерживаются многими современными браузерами. Если вы знакомы с WHATWG DOM, WHATWG HTML и JavaScript, вам будет очень удобно использовать библиотеку Aspose.HTML. В противном случае вы можете посетить www.w3schools.com, где вы можете найти множество примеров и учебных пособий по работе с HTML-документами.

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

Создайте пустой HTML-документ

После создания объекта документа его можно позже заполнить элементами HTML. В следующем фрагменте кода показано использование конструктора HTMLDocument() по умолчанию для создания пустого HTML-документа и его сохранения в файл.

 1using System.IO;  2using Aspose.Html;  3.  4 // Prepare an output path for a document saving  5 string documentPath = Path.Combine(OutputDir, "create-empty-document.html");  6  7 // Initialize an empty HTML document  8 using (var document = new HTMLDocument())  9  10 // Work with the document 11 12 // Save the document to a file 13 document.Save(documentPath); 14 >

После создания появляется файл create-empty-document.html с исходной структурой документа: пустой документ включает такие элементы, как , и . Подробнее о сохранении HTML-файлов читайте в статье Сохранить HTML-документ.

Создать новый HTML-документ

Если вы хотите сгенерировать документ программно с нуля, используйте конструктор без параметров, как указано в следующем фрагменте кода:

 1using System.IO;  2using Aspose.Html;  3.  4 // Prepare an output path for a document saving  5 string documentPath = Path.Combine(OutputDir, "create-new-document.html");  6  7 // Initialize an empty HTML document  8 using (var document = new HTMLDocument())  9  10 // Create a text element and add it to the document 11 var text = document.CreateTextNode("Hello World!"); 12 document.Body.AppendChild(text); 13 14 // Save the document to a disk 15 document.Save(documentPath); 16 >

В новом документе мы создали текстовый узел, учитывая указанную строку, используя CreateTextNode() метод и добавил его в элемент body с помощью метода AppendChild(). Как редактировать HTML-файл, подробно описано в статье Редактировать HTML-документ.

Загрузить из файла

Следующий фрагмент кода показывает, как загрузить HTMLDocument из существующего файла:

 1using System;  2using Aspose.Html;  3.  4 // Prepare an output path for a file saving  5 var htmlFile = Path.Combine(OutputDir, "load-from-file.html");  6  7 // Prepare a 'load-from-file.html' document  8 File.WriteAllText(htmlFile, "Hello World!");  9 10 // Load from the 'load-from-file.html' 11 using (var document = new HTMLDocument(htmlFile)) 12  13 // Write the document content to the output stream 14 Console.WriteLine(document.DocumentElement.OuterHTML); 15 >

В приведенном выше примере HTML-документ загружается из файла с помощью конструктора HTMLDocument( string ). Если вам требуется загрузить существующий HTML-файл с диска, обработать и сохранить его, то вам поможет следующий фрагмент кода.

 1using System.IO;  2using Aspose.Html;  3.  4 // Prepare a path to a file  5 string documentPath = Path.Combine(DataDir, "Sprite.html");  6  7 // Initialize an HTML document from a file  8 using (var document = new HTMLDocument(documentPath))  9  10 // Work with the document 11 12 // Save the document to a disk 13 document.Save(Path.Combine(OutputDir, "Sprite_out.html")); 14 >

Загрузить с URL-адреса

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

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

1using System; 2using Aspose.Html; 3. 4 // Load a document from 'https://docs.aspose.com/html/net/creating-a-document/document.html' web page 5 using (var document = new HTMLDocument("https://docs.aspose.com/html/net/creating-a-document/document.html")) 6  7 // Write the document content to the output stream 8 Console.WriteLine(document.DocumentElement.OuterHTML); 9 >

В приведенном выше примере мы указали файл document.html для загрузки с URL-адреса.

Загрузить из HTML-кода

Если вы подготавливаете HTML-код в виде файла [System.String] в памяти ( https://docs.microsoft.com/en-us/dotnet/api/system.string?view=netframework-4.8) или System.IO.Stream, вам не нужно сохранять их в файл, просто передайте ваш HTML-код в специализированные конструкторы.

Если в вашем HTML-коде есть связанные ресурсы (стили, скрипты, изображения и т. д.), вам необходимо передать корректный параметр baseUrl конструктору документа. Он будет использоваться для определения местоположения ресурса во время загрузки документа.

Загрузить из строки

Вы можете создать документ из строкового содержимого, используя конструктор HTMLDocument( string, string ). Если вам нужно создать документ из пользовательской строки непосредственно в вашем коде и сохранить его в файл, вам может помочь следующий пример: мы создаем HTML-документ, который содержит «Hello World!» текст.

 1using System IO;  2using Aspose.Html;  3.  4 // Prepare HTML code  5 var html_code = "Hello World!
";  6  7 // Initialize a document from the string variable  8 using (var document = new HTMLDocument(html_code, "."))  9  10 // Save the document to a disk 11 document.Save(Path.Combine(OutputDir, "create-from-string.html")); 12 >

Загрузка из потока

Чтобы создать HTML-документ из потока, вы можете использовать конструктор HTMLDocument( stream, string ) :

 1using System IO;  2using Aspose.Html;  3.  4 // Create a memory stream object  5 using (var mem = new MemoryStream())  6 using (var sw = new StreamWriter(mem))  7   8 // Write the HTML code into memory object  9 sw.Write("Hello World! I love HTML!
"); 10 11 // It is important to set the position to the beginning since HTMLDocument starts the reading exactly from the current position within the stream 12 sw.Flush(); 13 mem.Seek(0, SeekOrigin.Begin); 14 15 // Initialize a document from the string variable 16 using (var document = new HTMLDocument(mem, ".")) 17  18 // Save the document to a disk 19 document.Save(Path.Combine(OutputDir, "load-from-stream.html")); 20 > 21 >

SVG-документ

Поскольку масштабируемая векторная графика (SVG) является частью стандартов W3C и может быть встроена в HTMLDocument, мы внедрили SVGDocument и все его функциональность. Наша реализация основана на официальной спецификации SVG 2, поэтому вы можете загружать, читать и манипулировать документами SVG так, как это официально описано.

Поскольку SVGDocument и HTMLDocument основаны на одном и том же стандарте WHATWG DOM, все операции, такие как загрузка, чтение, редактирование, преобразование и сохранение, аналогичны для обоих документов. Таким образом, все примеры, где вы видите манипуляции с HTMLDocument, применимы и к SVGDocument.

Вы можете создать документ из строкового содержимого, используя конструктор SVGDocument ( string, string ). Если вы хотите загрузить документ SVG из переменной System.String в памяти и вам не нужно сохранять его в файл; пример ниже показывает, как это сделать:

1using System; 2using Aspose.Html.Dom.Svg; 3. 4 // Initialize an SVG document from a string object 5 using (var document = new SVGDocument("", ".")) 6  7 // Write the document content to the output stream 8 Console.WriteLine(document.DocumentElement.OuterHTML); 9 >

В приведенном выше примере мы создали документ SVG, содержащий круг радиусом 40 пикселей. Вы можете узнать больше о работе с документами SVG из статей главы Как работать с Aspose.SVG API.

MHTML-документ

MHTML означает MIME-инкапсуляцию совокупных документов HTML. Файл MHTML — это архив, содержащий все содержимое веб-страницы. Он хранит HTML-код веб-страницы, а также связанные ресурсы на веб-странице, которые могут включать CSS, JavaScript, изображения и аудиофайлы. Это специализированный формат для создания архивов веб-страниц, и веб-разработчики в основном используют файлы MHTML для сохранения текущего состояния веб-страницы в целях архивирования. Библиотека Aspose.HTML поддерживает этот формат, но с некоторыми ограничениями. Мы поддерживаем только операции рендеринга из MHTML в поддерживаемые форматы вывода. Дополнительные сведения вы найдете в статье Преобразование между форматами.

EPUB-документ

EPUB — это формат, поддерживаемый большинством электронных книг и совместимый с большинством устройств, на которых вы читаете: смартфонами, планшетами и компьютерами. Для формата EPUB, представляющего формат электронной публикации, действуют те же ограничения, что и для MHTML. Мы поддерживаем только операции рендеринга из EPUB в поддерживаемые выходные форматы. Дополнительные сведения вы найдете в статье Преобразование между форматами.

Асинхронные операции

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

 1using System;  2using Aspose.Html;  3using System.Threading;  4.  5 // Initialize an AutoResetEvent  6 var resetEvent = new AutoResetEvent(false);  7  8 // Create an instance of an HTML document  9 var document = new HTMLDocument(); 10 11 // Create a string variable for OuterHTML property reading 12 var outerHTML = string.Empty; 13 14 // Subscribe to 'ReadyStateChange' event 15 // This event will be fired during the document loading process 16 document.OnReadyStateChange += (sender, @event) => 17  18 // Check the value of the 'ReadyState' property 19 // This property is representing the status of the document. For detail information please visit https://www.w3schools.com/jsref/prop_doc_readystate.asp 20 if (document.ReadyState == "complete") 21  22 // Fill the outerHTML variable by value of loaded document 23 outerHTML = document.DocumentElement.OuterHTML; 24 resetEvent.Set(); 25 > 26 >; 27 28 // Navigate asynchronously at the specified Uri 29 document.Navigate("https://docs.aspose.com/html/net/creating-a-document/document.html"); 30 31 // Here the outerHTML is empty yet 32 Console.WriteLine($"outerHTML = "); 33 34 // Wait 5 seconds for the file to load 35 if (!resetEvent.WaitOne(5000)) 36  37 Console.WriteLine("Thread works too long, more than 5000 ms"); 38 > 39 40 // Here the outerHTML is filled 41 Console.WriteLine("outerHTML = ", outerHTML);

ReadyStateChange — не единственное событие, которое может использоваться для обработки операции асинхронной загрузки, вы также можете подписаться на событие Load следующим образом:

 1using System;  2using Aspose.Html;  3using System.Threading;  4.  5 // Initialize an AutoResetEvent  6 var resetEvent = new AutoResetEvent(false);  7  8 // Initialize an HTML document  9 var document = new HTMLDocument(); 10 var isLoading = false; 11 12 // Subscribe to the 'OnLoad' event 13 // This event will be fired once the document is fully loaded 14 document.OnLoad += (sender, @event) => 15  16 isLoading = true; 17 resetEvent.Set(); 18 >; 19 20 // Navigate asynchronously at the specified Uri 21 document.Navigate("https://docs.aspose.com/html/net/creating-a-document/document.html"); 22 23 // Here the document is not loaded yet 24 25 // Wait 5 seconds for the file to load 26 if (!resetEvent.WaitOne(5000)) 27  28 Console.WriteLine("Thread works too long, more than 5000 ms"); 29 > 30 31 // Here is the loaded document 32 Console.WriteLine("outerHTML = ", document.DocumentElement.OuterHTML);

Вы можете скачать полные примеры и файлы данных с GitHub.

Как создать свой сайт на шаблоне html и вывести его в интернет — инструкция для начинающих

article

20.02.2023

Зачем делать сайт на HTML
Как открыть готовый код сайта html в блокноте для редактирования
Основные теги html
Замена текстовых блоков в шаблоне
Что такое инструмент для разработчиков в браузере и как его открыть
Замена изображений в html-коде
Что нужно знать о работе с кодом html
Загрузка готового сайта на хостинг

Зачем делать сайт на HTML

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

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

Для этого потребуется немного внимательности и знаний, но адаптация готового шаблона вполне доступна новичкам. Такой опыт будет полезен тем, кто интересуется версткой, а также для создания своего собственного сайта простейшего формата — лендинг-пейдж или визитки. Статический html более выгоден для небольших сайтов, чем разработка на CMS, ведь системы управления контентом весят гораздо больше. Пользоваться движком с большим объемом php-кода и набором различных модулей для лендинга — не совсем рентабельно. Html-сайт требует очень мало ресурсов на хостинге, поэтому если стоит задача создания сайта всего на одну страницу — это самый лучший вариант.

Итак, начинаем работать. Сначала нужно найти хороший шаблон (платный или бесплатный) и скачать на свой компьютер в виде zip-папки.

Для его адаптации можно использовать два варианта:

Редактировать на компьютере и затем залить готовый сайт на хостинг.
Залить сайт на хостинг и редактировать в файловом менеджере.

Мы пойдем первым путём, чтобы потенциальные пользователи не увидели недоработанный сайт.

Как открыть готовый код сайта html в блокноте для редактирования

Распакуйте архив у себя на компьютере и зайдите в папку. Вы увидите примерно такую картину — директории с JS и CSS-кодом, картинками (images) и основные страницы. Среди них нужно выбрать index.html — это страница, с которой начинается запуск сайта. В случае с одностраничным сайтом это будет единственный файл формата HTML. В нашем примере у сайта есть несколько разделов, поэтому и файлов больше.

создание сайта html - как найти в шаблоне файл index.html

Система уже подтянула к html-файлам Google Chrome, и они будут автоматически открываться в этом браузере. Можно сразу посмотреть, как будет выглядеть основная страница шаблона в сети (пока ее видите только вы).

сайт на html

Чтобы редактировать страницу, мы откроем ее с помощью правой кнопки мышки в другой программе. Если вы начинающий разработчик, вероятно, у вас уже есть специальный софт вроде Subline или Visual Studio Code. Но этот гайд делается для непрофессионалов, потому представим, что у вас такой программы нет. Html-код сайта прекрасно редактируется в стандартном блокноте или WordPad, поэтому откроем его через блокнот.

Не забудьте выбрать опцию Формат => Перенос по словам, чтобы видеть весь код в одном окне. Вот такой вид вы примерно получите.

сайт html в блокноте готовый

Основные теги html

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

div — универсальный контейнер для группировки блоков контента;
H1, H2, H3… H6 — заголовки;
li — элемент списка;
p — текстовый абзац;
a href — ссылка;
img — изображение.

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

Открывающий тег имеет вид < p >, закрывающий похож на него, но со слешем < /p >. То есть текстовый абзац должен содержаться между ними.

теги html

«Lorem ipsum» и все, что следует после него на латыни, означает на «программистском» языке «любой текст» или просто «бла-бла-бла». Его ставят, когда нужно посмотреть, как будет выглядеть текстовый блок, но контента еще нет.

Замена текстовых блоков в шаблоне

Давайте попробуем заменить заголовок и главный текст на странице.

Заголовок «Welcome To Beauty Class» легко найти по тегу < h2 >(большой заголовок второго порядка). А основной текст выделен голубым, чтобы вы увидели, где он начинается и заканчивается.

текст html

Вместо текста вставляете свой, нажимаете в блокноте Файл => Сохранить и обновляете браузер, чтобы проверить результат. Как видите, у нас поменялся текст.

как редактировать html-код сайта

Что такое инструмент для разработчиков в браузере и как его открыть

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

Как открыть в Chrome инструменты разработчика:

Кликнуть правой кнопкой мышки на элемент и выбрать из списка «Проверить».
Нажать клавишу F12 на клавиатуре и выбрать пункт Elements.
Зайти в Меню браузера в правом верхнем углу => Другие инструменты => Инструменты разработчика.

Как открыть в Chrome инструменты разработчика

Чтобы просмотреть название и тег элемента, еще раз кликните по нему правой кнопкой мыши и выберите «Проверить».

Как посмотреть название и тег элемента

Например, вот это изображение имеет адрес images/image_01.jpg, где images — название папки, а /image_01.jpg — название файла.

Замена изображений в html коде

Давайте заменим картинку. Это нужно сделать в двух местах — в папке и в коде. Как это вообще работает?

Изображений нет в разметке — они лежат в папке images. В коде прописан путь к ним в виде места, где находится картинка, и ее названия. Когда вы видите фото на сайте, html-код просто показывает вам файл из папки.

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

тег img в html

Знак «слэш» означает папку, а последнее название в кавычках всегда должно относиться к файлу.

К примеру, если у нас есть папка images, а в ней есть папка banners, внутри которой лежит изображение main-picture.jpg, то путь будет выглядеть так:

«images/banners/main-picture.jpg»

Но учтите, что лучше не делать много вложений.

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

папка images в шаблоне html-сайта

Заменяем в папке с изображениями существующую фотографию на другую (у нас это будет фото кота) с таким же названием image_01.jpg. Следите, чтобы расширения тоже были одинаковыми. Если названия одинаковы, но исходная картинка имела расширение .jpg, а вы добавили в формате .webp — изображения не заменятся на сайте.

Если необходимо загрузить картинки в другом формате, то название нужно заново прописать в коде. Но наша фотография заменилась и без редактирования разметки.

Как вставить картинку в HTML

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

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

Что нужно знать о работе с кодом html

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

Элементы в коде разметки размещаются в том же порядке, что и на странице. То есть, если элемент вверху, то он будет в начале кода, если внизу — то в конце.
Элемент в коде можно найти и по его тексту. Например, нужно найти кнопку с надписью «Blog», расположенную в верхнем меню. Нажмите в блокноте CTRL+F и введите слово «Blog», и вы увидите его в коде.

как найти элемент в коде

Для кода важен каждый знак. Если вы что-то «поломали», это может означать, что был удален или неправильно добавлен какой-то символ — кавычки, точка или даже пробел, который тоже имеет значение.
Постарайтесь не редактировать и не удалять другие части кода, если вы не понимаете, что это. В нем много взаимосвязей с JS с CSS файлами, и удалив какую-то ссылку, вы рискуете остаться без стилей или интерактивных элементов.
У верстальщиков есть неписаные правила — называть файлы в коде английскими словами, прямолинейно обозначающими сам вид контента, а не его содержание. То есть изображение чаще называют image или picture, а видео будет так и называться: video_1. Это очень упрощает работу с разметкой и помогает посторонним верстальщикам быстро понять, что написано в коде.

Загрузка готового сайта на хостинг

Наш сайт готов и пора его вывести на домен и хостинг. Мы покажем вам, как это делать в панели Cityhost.ua, но принцип схож и для других провайдеров. Не будем описывать процесс покупки услуг, а иметь в виду, что вы уже купили хостинг и привязали к нему зарегистрированный домен.

Для начала нужно попасть внутрь сайта, что можно сделать с помощью FTP. Но мы не будем работать с тяжелыми файлами, поэтому для этой задачи вполне достаточно файлового менеджера.

Зайдите в свой аккаунт на сайте Cityhost и откройте вкладку Хостинг 2.0 => Управление => Открыть в файловом менеджере.

как загрузить сайт на хостинг через файловый менеджер Cityhost

Сейчас на сайте пусто, но на новом хостинге обычно стоит «баннер-заглушка» в виде php-файла – ее можно удалить.

Заархивируйте свой сайт в zip-папку и загрузите его на хостинг через кнопку «Загрузить файл».

Как разместить сайт на хостинге Cityhost - загрузка архива

Далее нужно распаковать папку с помощью кнопки «Извлечь архив». После распаковки архив лучше сразу удалить.

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

Как опубликовать сайт на Cityhost - распаковка файлов

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

Понравилась статья? Расскажите о ней друзьям:

Автор: Богдана Гайворонская

Журналист (с 2003 года), IT-копирайтер (с 2013 года), контент-маркетолог Cityhost.ua. Специализируется на статьях о технологиях, создании и продвижении сайтов.

Создание HTML форм

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

Большая часть информации веб-форм передаётся с помощью элемента . Для ввода одной строки текста применяется элемент , для нескольких строк — элемент . Элемент создает выпадающий список.

Элемент создаёт надписи к полям формы. Существует два способа группировки надписи и поля. Если поле находится внутри элемента , то атрибут for указывать не нужно.

Last Name Last Name Last Name

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

 Контактная информация Имя E-mail

fieldset

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

Обязательные для заполнения поля также необходимо выделять. До появления HTML5 использовался символ звездочки * , установленный возле названия поля. В новой спецификации появился специальный атрибут required , который позволяет отметить обязательное поле на уровне разметки. Этот атрибут дает указание браузеру (при условии, что тот поддерживает HTML5), указание не отправлять данные после нажатия пользователем кнопки отправить, пока указанные поля не заполнены.

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

input:focus

Ещё один полезный html5-атрибут — атрибут autofocus . Он позволяет автоматически установить фокус на нужном начальном поле для элементов и (только в один элемент каждой формы).

Пример создания формы регистрации

  Регистрация
 
  Имя Пол мужской женский 
 E-mail Страна

Примечание
action=»form.php» — ссылка на файл обработчика формы. Создайте файл в кодировке UTF-8, закачайте его на сервер и замените action=»form.php» на путь к файлу на вашем сервере.

form-default

Как видно из рисунка, каждый элемент формы имеет стили браузера по умолчанию. Очистим стили и оформим элементы формы.

.form-wrap < width: 550px; background: #ffd500; border-radius: 20px; >.form-wrap * .profile < width: 240px; float: left; text-align: center; padding: 30px; >form < background: white; float: left; width: calc(100% - 240px); padding: 30px; border-radius: 0 20px 20px 0; color: #7b7b7b; >.form-wrap:after, form div:after < content: ""; display: table; clear: both; >form div < margin-bottom: 15px; position: relative; >h1 < font-size: 24px; font-weight: 400; position: relative; margin-top: 50px; >h1:after < content: "\f138"; font-size: 40px; font-family: FontAwesome; position: absolute; top: 50px; left: 50%; transform: translateX(-50%); >/********************** стилизация элементов формы **********************/ label, span < display: block; font-size: 14px; margin-bottom: 8px; >input[type="text"], input[type="email"] < border-width: 0; outline: none; margin: 0; width: 100%; padding: 10px 15px; background: #e6e6e6; >input[type="text"]:focus, input[type="email"]:focus < box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); >.radio label < position: relative; padding-left: 50px; cursor: pointer; width: 50%; float: left; line-height: 40px; >.radio input < position: absolute; opacity: 0; >.radio-control < position: absolute; top: 0; left: 0; height: 40px; width: 40px; background: #e6e6e6; border-radius: 50%; text-align: center; >.male:before < content: "\f222"; font-family: FontAwesome; font-weight: bold; >.female:before < content: "\f221"; font-family: FontAwesome; font-weight: bold; >.radio label:hover input ~ .radio-control, .radiol input:focus ~ .radio-control < box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); >.radio input:checked ~ .radio-control < color: red; >select < width: 100%; cursor: pointer; padding: 10px 15px; outline: 0; border: 0; background: #e6e6e6; color: #7b7b7b; -webkit-appearance: none; /*убираем галочку в webkit-браузерах*/ -moz-appearance: none; /*убираем галочку в Mozilla Firefox*/ >select::-ms-expand < display: none; /*убираем галочку в IE*/ >.select-arrow < position: absolute; top: 38px; right: 15px; width: 0; height: 0; pointer-events: none; /*активизируем показ списка при нажатии на стрелку*/ border-style: solid; border-width: 8px 5px 0 5px; border-color: #7b7b7b transparent transparent transparent; >button < padding: 10px 0; border-width: 0; display: block; width: 120px; margin: 25px auto 0; background: #60e6c5; color: white; font-size: 14px; outline: none; text-transform: uppercase; >/********************** добавляем форме адаптивность **********************/ @media (max-width: 600px) < .form-wrap .profile, form h1 form >

Файл form.php

" . "\r\n"; $headers .= "Bcc: ваш_email". "\r\n"; if(!empty($name) && !empty($sex) && !empty($email) && !empty($country) && filter_var($email, FILTER_VALIDATE_EMAIL)) < mail($email, $subject, $msg, $headers); echo "Спасибо! Вы успешно зарегистрировались."; >?>

Примечание
В переменной $subject укажите текст, который будет отображаться как заголовок письма;
Ваше_имя — здесь вы можете указать имя, которое будет отображаться в поле «от кого письмо» ;
url_вашего_сайта замените на адрес сайта с формой регистрации;
ваш_email замените на ваш адрес электронной почты;
$headers .= «Bcc: ваш_email». «\r\n»; отправляет скрытую копию на ваш адрес электронной почты.