Создание html-файла

Создание html-файла

В операционной системе Windows простейшим текстовым редактором является программа Блокнот, а в операционной системе Linux это может быть, например, KEdit или GEdit.

Запустите текстовый редактор (его всегда можно найти среди стандартных программ в главном меню операционной системы).
Выполните команду Файл → Сохранить как….
В открывшемся окне выберите место для сохранения файла и укажите имя файла — index.html.
Нажмите кнопку Сохранить. Текстовый редактор пока не закрывайте.

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

Откройте свою папку, в которую вы сохранили файл.
Найдите файл index.html (он должен отображаться с пиктограммкой браузера) и запустите его с помощью программы Mozilla Firefox:

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

Поэтому каждый HTML-документ должен иметь правильную структуру, которую мы сейчас и зададим в нашем файле.

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

Между ними поместите теги, ограничивающие «голову» и «тело» документа:

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

В разделе <head></head> поместите теги <title></title> и запишите между ними название вашей страницы.
В разделе <body></body> напишите фразу Всем привет!!!:

Сохраните изменения в файле (Файл → Сохранить или сочетание клавиш Ctrl+S).
Снова запустите файл в браузере, а если вы его не закрывали, то нажмите кнопку Обновить или клавишу F5.

Вот так теперь выглядит наша страница:

Как видите, название страницы отобразилось в заголовке браузера и на «корешке» вкладки, в которой она открыта. А содержимое тегов <body></body> — в окне браузера.

Если вдруг у вас вместо текста отобразились какие-то непонятные символы, вам нужно настроить кодировку в браузере (на примере Mozilla Firefox):

Проверьте, не отключено ли в настройках браузера автоопределение кодировки (Вид → Кодировка → Автоопределение). Оно должно быть установлено в значение Русская:

Если автоопределение установлено правильно, но кодировка всё равно не определяется, то придётся настроить её вручную, перебирая возможные варианты в меню Вид → Кодировка:

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

Помимо заголовка страницы, в разделе <head></head> часто прописывают различную служебную информацию в виде мета-тегов.

Мета-теги — это служебные теги, которые прописываются в разделе <head></head> и могут содержать в себе информацию о страничке, её авторе, ключевые слова к странице или управляющие команды для браузеров и поисковых роботов.

Мета-теги являются необязательными и в последнее время используются всё реже.

Примеры популярных мета-тегов:

<meta name="description" content="описание страницы"> — часто именно то, что здесь указано, будет выдаваться поисковыми системами в результате поиска, поэтому стоит делать описание страницы ярким и понятным, но длина описания не должна превышать 200 символов.
<meta name="keywords" content="ключевые слова через запятую"> — подумайте, какие ключевые слова будут вводить пользователи поисковых систем, чтобы найти информацию, содержащуюся на этой странице, и укажите их через запятую, к сожалению, этот тег часто игнорируется современными поисковыми системами.
<meta name="author" content="автор"> — тег, в который вы можете вписать своё имя или e-mail, по сути, просто указывает на авторство.
<meta http-equiv="Content-type" content="text/html;charset=windows-1251"> — тег, который указывает браузеру, в какой кодировке следует отображать страницу, в данном случае браузер отобразит страницу в стандартной кодировке Windows.

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

4. Разметка текста