Как создать страницу html в блокноте. Как создать HTML-страницу: пошаговая инструкция, технология и рекомендации
Теперь пару слов о тегах, которые мы использовали, чтобы сделать эту страницу.
Описание html тегов из примера
1.
- эти теги должны присутствовать на каждой веб-странице обязательно. Они сообщают браузерам и поисковым машинам, что это html-страница.
Любая html страница имеет следующую структуру:
...
Заголовочные теги
...
...
Тело страницы
...
2.
- между этими тегами заключается весь видимый контент страницы.
4.
- между этими тегами прописывается заголовок страницы, которое отображается в самом вверху браузера. Кстати, когда Вы что-то ищите в поисковиках, то первое, что отображается, это как раз название страницы. Тег
часто сокращенно называют "тайтлом". Советую ознакомиться со статьей: как составить тег </p>
<p>Теперь перейдем к тегам, которые находятся в теле html страницы (внутри <body>
и </body>
).</p>
<p>5. <center></center>
- эти теги выравнивают все, что находится внутри них по центру. В <a href="/vklyuchit-temy-v-windows-7-chto-vhodit-v-aero-v-dannom-sluchae-nuzhno-vyklyuchit.html">данном случае</a> центром будет - центр экрана. В будущем рекомендуется отказаться от использования этих тегов.</p>
<p>6. <h1></h1>
- это один из класса тегов заголовочных тегов <h1>..<h6>
, обычно в него заключают название страницы. Например, у этой странице заголовочный тег "Пример создания html страницы".</p>
Примечание
<p>эти теги имеют большой вес в ранжировании сайта , поэтому ими необходимо пользоваться аккуратно и с умом.</p>
<p>При составлении html-кода нужно придерживаться <a href="/pravila-sostavleniya-blokov-sozdanie-prostoi-blok-shemy.html">простого правила</a>: сначала должен идти заголовочный тег <h1>
, а дальше могут идти уже <h2>
, <h3>
и т.д. Главное, чтобы не было сначала <h2>
, потом <h1>
, потом <h3>
и т.п. Должна быть строгая иерархия. Заголовков <h2>
, <h3>
и т.п. может быть много.</p>
<p>7. <br/>
- это одиночный тег, который не требует закрывающего тега. Он осуществляет переход на следующую строку. В моем примере написаны два одиночных тега подряд, чтобы дважды перейти на следующую строку.</p>
<p>8. <span><img src='https://i1.wp.com/URL_ИЗОБРАЖЕНИЯ' loading=lazy>
</span> - это одиночный тег, который выводит изображение.</p>
<ul><li>src
- обязательный параметр, в котором указывается адрес изображения (вместо URL_ИЗОБРАЖЕНИЯ необходимо прописать адрес, где хранится Ваше изображение).
<br><u>Примечание
</u>:
<ul><li>Если изображение находится в одной папке с Вашей html-страницей, то достаточно написать название изображения, иначе нужно прописывать либо абсолютный или относительный URL ;</li>
<li>Не забудьте указать расширение изображения. Например, .jpg
, .gif
, .jpeg
.</li>
</ul></li>
<li>alt
или title
- в эти параметры можно записать описание к Вашему изображению. Когда Вы наведете мышкой на изображение, то появится это описание. Эти параметры важны для продвижения сайта , особенно в поиске по картинкам. Если изображение не удалось загрузить, то будет выведен этот текст, что также является плюсом.</li>
</ul><p>9. <font></font>
- эти теги созданы для изменения шрифта, фона, размера и т.д. Короче говоря, все, что связано с форматированием текста можно настроить в одном теге. Это тег имеют довольно много атрибутов, о которых я расскажу в отдельном уроке.</p>
<p>Примечание:
- аналогичный тег.</p>
<p>Есть также свойство CSS font , в котором можно задавать все эти параметры.</p>
<p>10.
- выделить жирным. Все, что заключено между <b>
и </b>
будет выделено жирным. Например, если Вы напишите его в самом начале контента, а закроете в самом конце, то весь текст на странице будет выделен жирным. Это довольно часто встречающийся тег, аналогом которого является <strong></strong>
.</p>
<p>Поисковые системы обращают внимание на этот тег в плане усиления влияение ключевых слов. Но нужно быть аккуратным, поскольку выделять каждый раз жирным ключевые слова будет воспринято за спам.</p>
<p>В целом оценю время на базовое изучение <b>html
</b> как 2-8 часов, остальное по желанию. Ну и, конечно же, время изучения зависит от заинтересованности. Рекомендую разбить на несколько дней по 20-30 минут.</p><p>Вы готовы? Тогда поехали!</p><p>Подключение к интернету для создания страницы на html нам НЕ нужно.</p><h2>Нам понадобится</h2><b>1)
</b> Выбираем <b>текстовой редактор
</b>. На первое время достаточно <b>Блокнота (Notepad)
</b> (в нём нам понадобится только команда <i>Сохранить как
</i>)<table><tr><td width="40">
</td><td>Если Вы сразу хотите начать программировать в специализированных текстовых редакторах, то обратите внимание на: <br>
1) для <b>Windows
</b><br><b>NotePad++
</b> (скачать или )<br><b>Intype
</b> (скачать)<p>2) для <b>Mac
</b> и <b>Linux
</b> <br><b>Bluefish Editor
</b> (скачать)</p><p>Их отличие от обычных текстовых редакторов заключается в основном в том, что они делают автоматические отступы, ! дают возможность пересохранить файл в другой кодировке (обратите внимание, в будущем столкнётесь), окрашивают теги в <a href="/samsung-galaxy-s8-luchshii-cvet-galaxy-s8-tri-cveta-ceny-i-razlichnye-processory.html">различные цвета</a> как, например, код внизу урока. В обычном редакторе он будет одного цвета.
</p></td>
</tr></table><p><b>2)
</b> Любой интернет-браузер, например, <u><a href="/skachat-programmu-internet-explorer-ustanovka-internet-explorer.html">Internet Explorer</a>
</u> для Windows или <u>Safari
</u> для Mac OS X и iOS. Да-да, можно также <u>Mozilla
</u>, <u><a href="/sozdat-temu-dlya-google-chrome-zhivye-oboi-dlya-google-chrome.html">Google Chrome</a>
</u>, <u>Opera
</u>, <u>Yandex
</u> и <u>Mail
</u> браузеры и тд. </p><h2>Приступим к созданию страницы HTML</h2><b>1)
</b> создаём на рабочем столе папку <b>html
</b>
. Это мы сделаем для того, чтобы уроки были структурированы и содержались в одном месте.<p><b>2)
</b> <u>Создаём
</u> наш файл в текстовом редакторе, например в Блокноте (NotePad). Далее <u>Сохранить как
</u>. </p><p><img src='https://i0.wp.com/tradebenefit.ru/artimg/20130609143122392.jpg' height="242" width="292" loading=lazy></p><p>Кодировку лучше выбирать UTF-8, затем выбрать <u>все типы файлов
</u> и выбрать название файла с.html на конце, например <u>index.html
</u></p><p><img src='https://i0.wp.com/tradebenefit.ru/artimg/20130609143758929.jpg' width="100%" loading=lazy></p><p>Выбираем в качестве директории (папки), куда сохранить, нашу <b>html
</b>
<br>
Нажимаем <u>сохранить
</u>. Готово!</p><p>Часто задают вопрос о том, что <b>не видно расширения файла
</b>. Разберём по порядку</p><p>Возможность видеть расширения файла может помочь в точном определении типа файла и даёт возможность вручную (при команде <i>переименовать
</i>) сменить не только расширение, но и следовательно тип файла (например, с txt на html)</p><table><tr><td width="40">
</td><td>так НЕ должно выглядеть: <i>photo, <a href="/programma-dlya-zameny-cifr-v-tekstovom-dokumente-tekstovyi-ekspander--.html">текстовой документ</a>, game
</i><br>
так Должно выглядеть: <i>photo.jpg; текстовой документ.txt; game.exe
</i><p>Но если же у Вас всё-таки названия файлов выглядят как в первом варианте (БЕЗ, например, .txt ; jpg ; .exe в конце названия файлов), делаем следующее:</p><p>Смотрим настройки файлов и папок:</p><p>Для <b>Win XP
</b> Открываем любую папку - Сервис (сверху в панели) - Свойства папки - Вид - Скрывать расширения для зарегистрированных файлов (снять галочку) - Применить</p><p>Для <b>Win 7
</b> Открываем любую папку - Упорядочить - Параметры файлов и поиска -Вид - Скрывать расширения для зарегистрированных типов файлов (снять галочку) - Применить</p><p>Для <b>Mac OS
</b> Щёлкаем мышью по рабочему столу - Finder - Preferences (Настройки) - Advanced (Дополнительно) - выставить флажок в Show all file extensions (Показывать расширения всех файлов) - Применить
</p></td>
</tr></table><p><b>3)
</b> вставляем в него Весь код (вместе с комментариями), указанный ниже:</p><p> <!-- это комментарии. их не видно при отображении файла в браузере--><br>
<html> <!-- тег html обозначает открытие файла html--></p><p>
<head> <!-- head обозначает открытие головной части документа--></p><p>
<!-- title обозначает название документа. Отображается вверху браузера --><br>
<title> <br>
