Создание 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. Разметка текста
- Выделите текст Всем привет!, записанный в тегах <body></body>:

· Наберите текст:

- Сохраните изменения в файле (Файл → Сохранить или сочетание клавиш Ctrl+S).
- Теперь посмотрите на свою страницу в браузере:

Теперь займёмся разметкой.
- Поместите название сайта в теги <h1></h1>:

- Теперь разметьте абзацы в тексте, устанавливая теги <p></p>:

- Сохраните изменения в файле (Файл → Сохранить или сочетание клавиш Ctrl+S).
- Посмотрите на свою страницу в браузере:

Ну вот, получилось уже что-то отдалённо напоминающее страницу, которую мы хотим создать!
- Запишите атрибут align="center" для заголовка и абзаца с приветствием:

- Запишите атрибут align="right" для абзаца, в который помещён копирайт:

- Сохраните сделанные изменения и обновите страницу в браузере:

Таким образом, можно создать веб-страницу, используя как конструктор, так и редактор. Но это только начало…
|