Начало работы с вашим сайтом может быть пугающей задачей. Это особенно верно, если у вас ограниченный опыт в создании сайтов. Чтобы помочь вам начать, Dynadot предоставляет бесплатный хостинг на одной странице с каждой покупкой домена. Наш хостинг на одной странице включает "wizard", чтобы помочь людям, которые не знают HTML, в создании их сайтов. Однако наш мастер не позволяет вам делать столько же для вашего сайта, сколько позволяет HTML, так что вот основы, чтобы вы начали*:

<b>жирный</b>
<i>курсив</i>
<u>подчеркнутый</u>

Размер шрифта
Самый простой способ изменить размер шрифта — использовать эти теги:

<big>увеличивает шрифт на один размер</big>
<small>уменьшает шрифт на один размер</small>

Если вам нужно сделать шрифт еще больше или меньше, вы можете использовать эти более специфичные теги:

<font size="+2">увеличивает размер шрифта на число в кавычках</font>
<font size="-2">уменьшает размер шрифта на число в кавычках</font>

Вы также можете быть более конкретными с размером шрифта, указав число от 1 до 7, где 1 — самый маленький размер, а 7 — самый большой:

<font size="1">самый маленький шрифт 8 pt</font>
<font size="7">самый большой шрифт 36 pt</font>

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

<h1>самый большой заголовок</h1>

<h6>самый маленький заголовок</h6>

Цвет шрифта
В дополнение к изменению размера шрифта вы также можете настроить цвет.

<font color="blue">синий</font>
<font color="red">красный</font>

Если вы хотите использовать другой оттенок красного или синего, вы можете ввести шестизначное шестнадцатеричное число вместо слова "red" или "blue." Все цвета состоят из красного, синего и зеленого, и каждый цвет имеет свой "code." Первые две цифры (или иногда буквы) кода представляют красный, затем следующие две — зеленый, а последние две — синий. Вы можете скачать Color Cop для ПК или Цифровой измеритель цвета для Mac и используйте эти продукты, чтобы навести курсор на любой цвет на вашем экране, и он даст вам нужный код. Например, если бы вы использовали код для синего цвета, который видите выше, это выглядело бы так:

<font color="#0000FF">синий цвет</font>
<font color="#3DC6EA">и вот пример другого оттенка синего, который вы можете выбрать, используя код</font>

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

<font face="arial">шрифт Arial</font>
<font face="comic sans ms">шрифт Comic Sans MS</font>
<font face="lucida handwriting">lucida handwriting</font>

Теперь вам нужно всё объединить. Для всего, что содержит слово "font", вы можете просто поместить всю информацию в один тег. Если вы хотите использовать заголовочные теги или добавить жирный шрифт, курсив или подчёркивание, вы можете добавить это в их собственный тег.

<font size="4" color="376E1E" face="calibri">вы можете собрать все вместе</font>

<b><font size="4" color="376E1E" face="calibri">вы можете выделить все жирным</font></b>

<font size="4" color="376E1E" face="calibri">или вы можете выделить жирным <b>часть</b> этого</font>

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

<p>использование тегов абзаца помещает ваш текст в отдельный абзац...</p>

<p>...и на следующей строке</p>

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

Вам не нужно использовать код для пробелов между текстом (например, от пробела), если только вы не хотите добавить дополнительные пробелы, потому что HTML распознает только один, даже если вы введете больше одного с помощью пробела. Чтобы создать пробел между текстом, вы можете использовать код: &nbsp;

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

<a href="http://www.dynadot.com">эта ссылка ведет на домашнюю страницу Dynadot</a>

Вы можете заметить, что если вы нажмете на ссылку выше, она откроется либо в отдельной вкладке, либо в окне вашего браузера, в зависимости от настроек браузера. Это легко добавить и рекомендуется, если вы ссылаетесь с вашего сайта или не хотите терять людей на определенной странице (например, в блоге), потому что это оставляет эту страницу открытой для ваших клиентов, чтобы они могли вернуться, не нажимая кнопку «назад» в браузере. Все, что вам нужно сделать, это добавить target="_blank" после вашей ссылки:

<a href="http://www.dynadot.com" target="_blank">эта ссылка ведет на домашнюю страницу Dynadot</a>

Изображения
Наконец, вы, возможно, захотите добавить изображения на свой сайт. Чтобы добавить изображение с помощью HTML, вам нужно будет разместить его где-нибудь. Если у вас нет места для размещения изображения самостоятельно, вы можете использовать сервис, такой как Tiny Pic.com который позволяет вам бесплатно загружать ваши изображения и генерирует HTML-тег для вас. Если вы не хотите создавать аккаунт, вы можете просто сохранить сгенерированный HTML (только не сохраняйте его в Microsoft Word, так как Word иногда добавляет вещи, из-за которых код перестает работать). Имейте в виду, что некоторые изображения очень большие, и вы можете захотеть оптимизировать их, чтобы они занимали меньше места. Есть несколько бесплатных оптимизаторов изображений, которые вы можете использовать, чтобы уменьшить размер файла ваших изображений, таких как Image Optimizer.net. Вот пример базового тега изображения:
<img src="https://i45.tinypic.com/9bkglk.jpg"> который выглядит так:

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

<img src="https://i45.tinypic.com/9bkglk.jpg" border="2" width="100" height="30" vspace="10" hspace="20" align="left">

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

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

<a href="http://www.dynadot.com" target="_blank"><img src="https://i45.tinypic.com/9bkglk.jpg" border="0"></a>
Теперь вы можете щелкнуть на это изображение, и оно перенесет вас на нашу главную страницу:

Это иногда добавляет рамку вокруг изображения в синем цвете, который вы видите на текстовых ссылках. Чтобы убрать ее, просто добавьте border="0" к вашему тегу изображения. Вы также можете заметить, что HTML, сгенерированный Tiny Pic.com, имеет alt="Image and video hosting by Tiny Pic" внутри тега изображения. Вы можете использовать это, чтобы добавить текст к вашему изображению на случай, если оно не отображается правильно в чьем-то браузере. Добавление альтернативного текста также может помочь с поисковой оптимизацией (SEO).

Теперь, когда вы, надеюсь, чувствуете себя увереннее в HTML, вы можете применить свои навыки на своём сайте. Но прежде чем сохранять потенциально неидеальный HTML, мы предлагаем протестировать ваш HTML с помощью бесплатного сервиса, такого как onlinehtmleditor.net. Он даже имеет несколько простых HTML-кнопок сверху, чтобы помочь вам. Теперь вам просто нужно получить ваш домен если у вас его еще нет, начните создавать свой сайт сегодня!

*Обратите внимание, что тег font устарел и может отображаться некорректно в некоторых браузерах. Лучше определять стиль шрифта в CSS, что мы рассмотрим в следующем посте блога.

Опубликовано Робин Норган