Структура html страницы.
Урок 4.Теперь Вы знаете, что такое теги и сейчас самое время разобраться в структуре html страницы. На рисунке ниже изображен html код в котором нет текста, есть только три тега. Это тег <html>, <head> и <body>. Все эти три тега должны обязательно закрываться.
Именно эти три тега и составляют структуру html страницы. Они должны обязательно присутствовать в каждом html документе. Это железное правило.
Разберем значение каждого из этих тегов.
Тег <html> является контейнером для всего содержимого страницы. Другими словами, весь код страницы находиться между открывающимся <html> и закрывающимся </html>.
В тег <head> заключается служебная информация для браузера и поисковых систем. Эта информация никак не отображается браузером на экране монитора. Исключение составляет тег <title> </title>
Тег <body> — это основное тело нашего документа. Все, что находится между тегами <body> и </body> будет выводиться браузером на экран монитора.
Вся суть структуры html страницы в этом рисунке:
Тег <title>
Тег <title> закрывающийся, внутри него указывается название страницы. Данный тег является обязательным для каждой страницы. Он должен находиться строго между <head> и </head>.
Давайте вернемся к странице которую мы создавали на 3-ем уроке. В коде между <title> и </title> написано «Мой первый сайт» это значит, что наша страница имеет название «Мой первый сайт».
Содержимое тега <title> отображается на экране, а именно в окне браузера, обратите внимание на рисунок:
В первую очередь содержание данного тега имеет значение для поисковиков (Яндекс, Гугл и др.). Поисковые роботы считывают содержание тега <title> для того чтобы понимать о чем ваша страница.
Вы что-то не поняли из этого урока? Спрашивайте!
— [email protected]
Как сделать страницу HTML в формате бумаги формата А4?
Давным-давно, в ноябре 2005 года, AlistApart.com опубликовал статью о том, как они опубликовали книгу, используя только HTML и CSS. См.: http://alistapart.com/article/boom
Вот выдержка из этой статьи:
CSS2 имеет понятие paged media (подумайте о листах бумаги), в отличие от непрерывного media (подумайте о полосах прокрутки). Таблицы стилей могут задавать размер страниц и их поля. Шаблонам страниц могут быть присвоены имена, а элементы могут указывать, на какой именованной странице они хотят быть напечатаны. Кроме того, элементы в исходном документе могут вызывать разрывы страниц. Вот фрагмент из таблицы стилей, которую мы использовали:
@page { size: 7in 9.25in; margin: 27mm 16mm 27mm 16mm; }Имея издателя на базе US, нам дали размер страницы в дюймах. Мы, будучи европейцами, продолжали метрические измерения. CSS принимает и то, и другое.
После настройки размера страницы и поля нам нужно было убедиться, что в нужных местах есть разрывы страниц. В следующем отрывке показано, как создаются разрывы страниц после глав и приложений:
div.chapter, div.appendix { page-break-after: always; }Кроме того, мы использовали CSS2 для объявления именованных страниц:
div.titlepage { page: blank; }То есть титульный лист должен быть напечатан на страницах с именем “blank.” CSS2, описывающим концепцию именованных страниц, но их значение становится очевидным только тогда, когда доступны верхние и нижние колонтитулы.
В любом случае…
Поскольку вы хотите печатать формат А4, вам, конечно, понадобятся разные размеры:
@page {
size: 21cm 29.7cm;
margin: 30mm 45mm 30mm 45mm;
/* change the margins as you want them to be. */
}
В статье рассматриваются такие вещи, как настройка разрывов страниц и т. Д. так что, возможно, вы захотите прочитать это полностью.
В вашем случае хитрость заключается в том, чтобы сначала создать print CSS. Большинство современных браузеров (>2005) поддерживают масштабирование и уже смогут отображать веб-сайт на основе print CSS.
Теперь вам нужно будет немного изменить внешний вид веб-дисплея и адаптировать весь дизайн под большинство браузеров (включая старые, до 2005 года). Для этого вам придется создать файл web CSS или переопределить некоторые части вашего файла print CSS. При создании CSS для веб-дисплея помните, что браузер может иметь размер ANY (подумайте: “mobile” до “большого экрана TVs»). Значение: для web CSS ширину страницы и ширину изображения лучше всего устанавливать с помощью переменной ширины (%), чтобы поддерживать как можно больше устройств отображения и клиентов для просмотра веб-страниц.
EDIT (26-02-2015)
Сегодня я случайно наткнулся на другую, более свежую статью в SmashingMagazine , которая также погружается в проектирование для печати с HTML и CSS… на случай, если вы могли бы использовать yet-another-tutorial.
EDIT (30-10-2018)
Это было доведено до моего сведения в том, что size не является действительным CSS3, что действительно правильно — я просто повторил код, процитированный в статье, которая (как уже отмечалось) была старой доброй CSS2 (что имеет смысл, если вы посмотрите на год, когда статья и этот ответ были впервые опубликованы). В любом случае, вот действительный код CSS3 для вашего удобства copy-and-paste:
@media print {
body{
width: 21cm;
height: 29.7cm;
margin: 30mm 45mm 30mm 45mm;
/* change the margins as you want them to be. */
}
}
В случае, если вы считаете, что вам действительно нужны пиксели ( на самом деле вам следует избегать использования пикселей), вам придется позаботиться о выборе правильного DPI для печати:
- 72 dpi (web) = 595 X 842 пикселей
- 300 точек на дюйм (печать) = 2480 X 3508 пикселей
- 600 точек на дюйм (высококачественная печать) = 4960 X 7016 пикселей
Тем не менее, я бы избегал хлопот и просто использовал cm (сантиметры) или mm (миллиметры) для определения размера, поскольку это позволяет избежать сбоев рендеринга, которые могут возникнуть в зависимости от того, какой клиент вы используете.
Работа с HTML-публикацией [BS Docs 5]
HTML-публикацию можно использовать для публикации на внутреннем или внешнем Интернет-портале, передачи специалистам и сотрудникам компании, а также для проведения презентаций.
Для передачи HTML-публикации другим сотрудникам достаточно передать им папку, в которую была произведена публикация.
Внимание! HTML-публикация является серверным решением. Это означает, что компьютер, на котором размещается HTML-публикация, выполняет роль сервера публикации. При этом к данной HTML-публикации можно получить доступ с других компьютеров через веб-браузер по ссылке, если открыть HTML-публикацию для общего доступа (подробнее об этом описано ниже в Таблице 1). Для запуска серверного решения необходимо на сервере публикации однократно запустить веб-сервер публикации — файл «HTML-publication.exe» (работа обеспечивается запускаемыми приложениями MySQL и Apache).
Для публикации в сети необходимо разместить папку со сформированной HTML-публикацией на компьютере, который будет выполнять роль веб-сервера, и запустить из нее файл «HTML-publication.exe». В результате в веб-браузере, установленном по умолчанию, откроется страница с HTML-публикацией со ссылкой вида http://localhost:<Номер порта, на котором открылась HTML-публикация>/businessmodel.php?lang=ru-ru, по которой публикация будет доступна с данного компьютера, а в области уведомлений Windows появится ее иконка .
C помощью пунктов контекстного меню, вызванного от этой иконки, осуществляется управление доступом к публикации, открытие статьи справочной системы, закрытие HTML-публикации или ее открытие в браузере. Описание назначения пунктов этого контекстного меню приведено в Таблице 1.
| Пункт меню | Назначение |
|---|---|
| Открыть | Открывает HTML-публикацию в веб-браузере, установленном по умолчанию. |
| Опубликовать для общего доступа / Прекратить общий доступ | Пункт меню Опубликовать для общего доступа открывает публикацию для внешнего доступа. При этом в веб-браузере, установленном по умолчанию, открывается страница со ссылкой вида http://<Имя компьютера, на котором запущена HTML-публикация>:<Номер порта, на котором открылась HTML-публикация>/businessmodel.php?lang=ru-ru, по которой с других машин можно открыть HTML-публикацию в веб-браузере. Эта ссылка может быть передана сотрудникам компании для доступа к HTML-публикации. Пункт меню Прекратить общий доступ прекращает общий доступ к публикации. При этом в веб-браузере, установленном по умолчанию, открывается страница со ссылкой вида http://localhost:<Номер порта, на котором открылась HTML-публикация>/businessmodel.php?lang=ru-ru, по которой публикация будет доступна с данного компьютера. |
| Помощь | Открывает страницу HTML-публикации в справочной системе. |
| Выход | Закрывает HTML-публикацию. Если публикация была опубликована для внешнего доступа, после выполнения этой команды доступ будет прекращен. |
Таблица 1. Пункты меню управления HTML-публикацией
Внимание! Для того чтобы пользователи имели доступ к HTML-публикации, на компьютере, где она запущена, должен быть открыт соответствующий порт (номер порта см. в адресной строке браузера после наименования компьютера, на котором запущена HTML-публикация). При выполнении для HTML-публикации пункта меню Опубликовать для общего доступа будет сделана попытка открыть доступ к этому порту. В случае если попытка не удастся, необходимо будет открыть порты самостоятельно.
На компьютере может одновременно быть запущено несколько HTML-публикаций из разных папок.
В случае если сформирована новая HTML-публикация и требуется запустить ее таким образом, чтобы ссылка на нее оказалась той же, что и для одной из запущенных в текущий момент HTML-публикаций, следует действовать так:
- Закройте эту запущенную HTML-публикацию при помощи пункта меню Выход контекстного меню, вызванного от иконки этой HTML-публикации в области уведомлений Windows;
- Откройте новую HTML-публикацию, запустив из нее файл «HTML-publication.exe»;
- Опубликуйте новую HTML-публикацию для доступа по сети при помощи пункта меню Опубликовать для общего доступа контекстного меню, вызванного от иконки HTML-публикации в области уведомлений Windows.
Окно HTML-публикации (Рис. 1) разделено на 3 области:
В шапке (верхняя область) размещается логотип организации, управляющие элементы, а также главное меню, которое в данном случае содержит одну вкладку Бизнес-модель компании.
В области отчета (правая область) находится панель с полем выбора отчета текущего объекта, кнопки для выгрузки отчета в форматах doc и pdf, отправления ссылки на отчет по почте, печати отчета, а также сам выбранный отчет.
В случае если используется мобильная версия, на экране может быть показан или Навигатор, или область отчета. Переход из Навигатора к области отчета осуществляется выбором объекта в дереве. При этом панель Навигатора сворачивается. Переход от показа отчета к показу дерева Навигатора осуществляется нажатием на свёрнутую панель Навигатора.
Шапка окна HTML-публикации
Шапка окна HTML-публикации содержит:
- логотип организации, который задается в параметре Логотип организации в Настройках для всех пользователей (Главное меню → Главная → Настройки для всех пользователей → вкладка Основные) (см. Настройка HTML-публикации).
- главное меню, которое для HTML-публикации состоит из одной вкладки Бизнес-модель компании.
управляющие элементы, описание назначения которых приведено в Таблице 2.
Таблица 2. Элементы шапки окна HTML-публикации
Шапку окна HTML-публикации можно свернуть для увеличения области показа отчета, нажав на кнопку горизонтальной панели. Впоследствии эту область можно вернуть на экран, нажав на кнопку этой панели.
Навигатор
В Навигаторе отображается дерево объектов, выбранных для выгрузки в HTML-публикацию.
Выбор объекта в дереве Навигатора приводит к отображению отчета, сформированного для этого объекта, в области отчета.
Подвижная граница между областью отчета и Навигатором позволяет каждому пользователю настроить окно HTML-публикации в соответствии со своими предпочтениями.
Навигатор можно свернуть для увеличения области показа отчета, нажав на кнопку вертикальной панели. Впоследствии эту область можно вернуть на экран, нажав на кнопку этой панели.
Область отчета HTML-публикации
Основную часть области отчета занимает отчет, сформированный для текущего объекта дерева. Также в этой области над отчетом выводится панель инструментов для работы с ним. Выбор отчета, показываемого в данной области, осуществляется в поле выбора отчета из выпадающего списка (например, на Рис. 1 для объекта «Директор» выведен на показ отчет «Описание должности»), расположенного на этой панели. Назначение описания кнопок панели инструментов приведено в Таблице 3.
| Кнопка | Назначение |
|---|---|
| Выгрузка текущего отчета в формате MS Office (MS Word, MS Excel). Формат выгрузки зависит от формата шаблона отчета. За скрытие/отображение данной кнопки в HTML-публикации отвечают соответствующие настройки, подробнее см. Настройка HTML-публикации. | |
| Выгрузка текущего отчета в формате Adobe PDF. За скрытие/отображение данной кнопки в HTML-публикации отвечают соответствующие настройки, подробнее см. Настройка HTML-публикации. | |
| Отправка ссылки на текущий отчет другому пользователю. По нажатию на кнопку открывается окно настроенной почтовой программы со ссылкой на текущий отчет HTML-публикации. | |
| Открытие отчета в виде для печати. Отчет открывается на всю страницу и далее может быть распечатан средствами веб-браузера. |
Таблица 3. Кнопки области отчета окна HTML-публикации
В нижней части области отчета находится ссылка на текущую страницу HTML-публикации. Данную ссылку можно передать другому сотруднику. Также с помощью данной ссылки можно найти объект, по которому построен данный отчет, в Навигаторе Business Studio, воспользовавшись кнопкой на панели инструментов Навигатора (см. Панель инструментов и контекстное меню Навигатора).
Для представленных в области отчета диаграмм доступна функция масштабирования (при использовании браузеров Google Chrome, Mozilla Firefox, Opera): наведя курсор на область диаграммы, зажав клавишу Ctrl и используя вращение колёсика мыши, можно масштабировать именно саму диаграмму, без масштабирования остальных элементов области отчёта и всего окна HTML-публикации (Рис. 2).
Рисунок 2. Окно HTML-публикации с увеличенной диаграммойСтраница расширенного поиска
На странице расширенного поиска, вызываемой гиперссылкой Поиск с основной страницы HTML-публикации, задается:
строка, по которой производится поиск;
- разделы HTML-публикации, в которых ведется поиск;
- отчёты HTML-публикации, в которых ведётся поиск;
дополнительные параметры (Рис. 3).
Поиск запускается нажатием на кнопку Искать. Результаты поиска отображаются в нижней части страницы.
Нажатие мышью по любому из найденных результатов переводит к соответствующему отчету, где была найдена искомая фраза.
В группе Слова расположены задается требуемое место расположения искомой фразы в отчетах HTML-публикации. Группа содержит следующие радиокнопки:
везде — поиск заданной фразы осуществляется как в названиях объектов дерева, так и в тексте отчетов;
в теле документа — поиск заданной фразы осуществляется только в тексте отчетов;
в названии элемента — поиск заданной фразы осуществляется только в названиях объектов дерева.
С помощью радиокнопок группы Искать задается «жесткость» поиска. Группа содержит следующие радиокнопки:
все слова в любом порядке — осуществляется поиск всех слов заданной фразы, причем порядок следования слов не важен;
любое из слов — осуществляется поиск каждого из слов заданной фразы;
точное совпадение фразы — осуществляется поиск заданной фразы, порядок следования слов должен совпадать с заданным.
Для каждой из групп Слова расположены и Искать обязательно должна быть выбрана одна из радиокнопок.
С помощью области Место поиска указывается перечень справочников, по которым требуется произвести поиск. Может быть выбрано любое число справочников. В случае, когда не выбран ни один из пунктов, поиск производится по всему содержимому HTML-публикации.
С помощью области Искать в отчётах указывается перечень отчётов, в которых требуется произвести поиск. Может быть выбрано любое число отчётов. В случае, когда не выбран ни один из пунктов, поиск производится по всем отчётам, выгруженным в HTML-публикацию.
Где в WordPress хранятся страницы, в какой папке хранятся изображения
Как на сайте WordPress создавать страницы, чем они отличаются от записей и где хранятся? Выясним, какие ключевые характеристики присущи этому типу публикаций ВордПресс и как ими управлять.
Что такое страницы в WordPress
WordPress позволяет пользователям создавать два вида публикаций на сайте – страницы и записи. Страницы, как правило, используют для отображения статичного контента, хотя по своей природе, они не являются статическими и могут быть обновлены владельцем сайта в любое время. Такую форму публикаций можно применять в качестве главной страницы сайта, для отображения контактов, навигационной карты и прочей редко изменяемой информации.
Для сайтов с редко изменяемой информацией возможно построение всей архитектуры сайта только на страницах, без использования записей. В таком случае все страницы будут иметь второй уровень вложенности вида названиесайта/название-страницы.html и при изменении разделов сайта не придется настраивать перенаправления со старых адресов страниц на новые.
Для чего предназначены страницы WordPress:
- содержат контент, который не зависит от даты публикации и не требует регулярного обновления;
- могут быть организованы иерархически, включать подстраницы или относиться к родительской странице;
- могут использовать разные шаблоны, отличающиеся от основного шаблона сайта.
Для чего не применяются страницы WordPress:
- они не связаны с записями, рубриками или метками;
- они не являются файлами, поскольку создаются динамически «на лету» также, как записи;
- в отличие от записей, страницы нельзя включать в RSS ленту новостей.
Где хранятся страницы в WordPress
Все публикации, созданные в WordPress, хранятся не в виде отдельных файлов, а в базе данных. Когда пользователь набирает адрес интернет-ресурса в браузере, сервер активирует выполнение PHP-кода, который обращается к базе и динамически считывает данные из нее. При этом страница формируется «на лету» и заполняется считанной из базы данных информацией.
Если на сайте установлен плагин для кэширования, страницы могут загружаться из кэша сервера либо браузера при повторном посещении (т.е для каждой страницы создается периодически обновляемый html-файл), но все изменения по-прежнему вносятся через админпанель. Отображение страницы на сайте похоже на запись за исключением отсутствующей даты публикации, комментариев и кнопок социальных сетей.
Редакции страниц
Несмотря на то что на страницах размещается в основном статичный контент, их можно редактировать и обновлять.
- Чтобы добавить страницу на сайт, в админке WordPress зайдите в меню «Страницы».
- Выберите пункт «Добавить новую».
- В поле для заголовка наберите название
- В редакторе добавьте нужный текст.
- Для размещения страницы на сайте нажмите кнопку «Опубликовать». После внесения изменений в текст, эта кнопка будет называться «Обновить».
- WordPress автоматически сохраняет различные редакции одной публикации, их количество отображается в поле «Редакции».
С одной стороны, это удобно для пользователей, поскольку защищает информацию от случайного удаления при выключении электричества или прерывании интернет-соединения. С другой стороны, все редакции вместе с текущей версией сохраняются в базе данных, что увеличивает ее размер на сервере хостинга.
Зайдите в phpMyAdmin с использованием учетных данных, которые вам предоставил хостинг-провайдер во время регистрации.
Выберите нужную базу данных (1) и перейдите в таблицу wp_posts (2). В окне будет отображаться информация обо всех страницах и заметках, созданных на вашем ресурсе:
- post_content (3) – в этом поле хранится содержимое публикаций;
- post_title (4) содержит заголовки страниц и заметок;
- post_type (5) определяет тип публикации, страницы отмечены значением page (6).
Обратите внимание, для созданной нами страницы с названием «Яндекс. Рефераты» в базе данных помимо отметки page существуют две редакции с отметкой revision (7). Чтобы не увеличивать размер базы данных, их можно удалить.
При большом количестве редакций это действие можно автоматизировать. Для этого зайдите на вкладку SQL (1) и наберите в поле для SQL-запросов команду (2):
DELETE FROM wp_posts WHERE post_type = "revision";
Подтвердите удаление кнопкой «ОК», все редакции с пометкой revision будут удалены из базы данных.
Перед любыми операциями с базой данных обязательно сделайте ее резервную копию. Одна неправильно введенная команда способна испортить результаты вашей многомесячной работы (если в приведенной выше команде не указать тип поста как ревизию, удалятся все записи на сайте).
Ответы на вопросы
Как открыть HTML код нужной странички в WP,в какой папке он хранится?
Вордпресс формирует HTML файл при обращении посетителя к адресу странички, загружая его из базы данных. Исключение — папка с кешированными файлами, которая хранит временные HTML-копии страниц, которые создаются для более быстрой загрузки. Но все изменения все равно нужно вносить не во временные файлы кеша, а в HTML код, который хранится в базе данных.
Как в ВордПресс сайте найти и изменить текст главной страницы?
В администраторской панели сайта нужно зайти в раздел «Страницы» — главная страница будет отмечена меткой «Главная страница». При большом количестве страниц имеет смысл сначала заглянуть в «Настройки» — «Чтение» — там будет указано название главной страницы.
Где WP хранит изображения, которые находятся на страницах сайта?
При редактировании изображения в админпанели WP показывается ее адрес в файловой структуре сайта. По умолчанию изображения хранятся в папке wp-content/uploads/20ХХ — т.е. разбиты по годам и месяцам. Это удобно, если нужно найти, где находятся изображения за определенный период.
iPipe – надёжный хостинг-провайдер с опытом работы более 15 лет.
Мы предлагаем:
Тег HTML заголовок страницы как правильно заполнять
Тег <title> определяет заголовок HTML страницы. Этот тег не отображается на самой веб странице. Браузеры обычно выводят его как название вкладки. Также тег title используется поисковыми системами как заголовок сайта в выдаче.
Не путайте HTML тег <title> с глобальным атрибутом title — это разные вещи.
Элемент находится в <head> области страницы (подробнее про раздел head). Можно использовать только один тег title на странице.
Синтаксис
<title>Заголовок HTML документа</title>Содержимое тега заголовка <title> используется:
- как название вкладки в браузере;
- как название страницы при добавлении в Избранные или Закладки;
- как заголовок сниппета сайта в поисковой выдаче.
Атрибуты у тега title отсутствуют.
Пример использования <title> в HTML коде
<html>
<head>
<title>Заголовок страницы</title>
</head>
<body>
<!-- контент страницы -->
</body>
</html>Поддержка браузерами
Тег title в поисковых системах
Поисковые системы используют содержимое тега title страницы для построения заголовка сниппета сайта в выдаче.
Чтобы правильно заполнять тег <title> нужно учитывать следующие правила:
- Пишите внутри title только то, что соответствует содержанию страницы.
- Не пишите слишком длинные заголовки.
- Не стоит делать из заголовка перечисление ключевых слов.
- Ставьте наиболее важную информацию в начало заголовка.
Правильный тег <title> поспособствует поднятию позиции страницы сайта при ранжировании.
Многие CMS поддерживают автогенерацию <title> заголовка. Обычно при этом используется заголовок страницы <h2> и название раздела сайта (например, для страницы товара интернет магазина: название товара из h2 и категория товара). Хотя эта схема не является идеальной, ее использование оправдано во многих случаях.
Вот пример тега title для этой страницы (один из вариантов):
<title>Тег title HTML заголовок страницы - справочник HTML тегов Guru Weba</title>Структура HTML файла
Типичный HTML файл представляет собой текстовый файл с набором тегов. Теги — это особые команды, которые помогают браузеру отображать страницу. Благодаря тегам браузер понимает, в каком месте текст должен быть выделен жирным или курсивом, какой заголовок будет у страницы и как отображать таблицу. Их содержание не будет отображаться на странице браузера. Далее будут рассмотрены примеры содержания HTML файлов. Если вы не знаете, как создать HTML файл, то посмотрите статью «Как создать HTML файл». Существует большое количество тегов, часть из которых мы постараемся разобрать в курсе.Рассмотрим пример упрощённого HTML файла, страницы сайта:
<!DOCTYPE html>
<html>
<head>
Свойства страницы, правила отображения, стили, скрипты, подключаемые файлы
</head>
<body>
Содержание страницы
</body>
</html><!DOCTYPE html> — эта строчка говорит о том, что документ является html файлом. Следовательно, браузер сможет показать его как html страницу.
<html> … </html> — это парный тег (у него есть открывающая часть <html> и закрывающая </html>, которые различаются наличием слеша «/«). Внутри него заключено всё тело html документа.
<head> … </head> — всё, что находится внутри этого тега не выводится на экран. Но в нём содержится важная информация, которая поможет браузеру правильно показать страницу. К примеру, в этом теге могут находиться указание кодировки и языка страницы, правила отображения, стили и скрипты.
<body> … </body> — этот тег, внутри которого находится отображаемая область страницы.
Пример html страницы
Теперь разберём усложнённый пример html страницы, в котором будут добавлены несколько дополнительных тегов относительно предыдущего примера:<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Про мышей</title>
</head>
<body> Тише, мыши, кот на крыше,<br>
а котята ещё выше.<br>
Кот пошёл за молоком,<br>
а котята кувырком.<br>
Кот пришёл без молока,<br>
а котята ха-ха-ха. </body>
</html>Второе изменение касается содержания тега <head> … </head>. Здесь в первой строчке появилось указание на кодировку текста <meta charset="utf-8">. Тег «meta» называется метатегом.
Если сохранить html файл с одной кодировкой, а в «meta» написать другую, то все буквы в документе будут отображаться браузером как непонятные значки.
В блоке <head> … </head> также появилась строчка<title>Про мышей</title>. Этот тег указывает, какой заголовок будет у страницы браузера (у вкладки).Внутри тега <body> … </body> появился текст стихотвориения. Каждая строчка этого стиха заканчивается на тег <br>, который говорит браузеру о том, что должна начаться новая строка. Если убрать все теги <br>, то браузер отобразит стихотворение как одну длинную строку без переносов. Обратите внимание, что тег <br> не имеет закрывающей пары по аналогии с <body> … </body> или <head> … </head>.
Ради практики создайте файл на своём компьютере с любым названием и расширением «.html». К примеру, «page.html». Затем откройте его любым текстовым редактором и вставьте в него код из примера выше. Сохраните файл. Кликните на файл два раза и он откроется в браузере. Теперь измените что-либо в файле, сохраните и перезагрузите страницу в браузере.
Комментарии в HTML коде
Существует способ оставлять комментарии в HTML коде. Они могут быть полезными для разработчика. К примеру, комментарии о том, что необходимо доделать на сайте. Эти комментарии не видны обычным пользователям на странице браузера, но видны в HTML коде. Задать комментарий можно через такую конструкцию: <!— текст_комментария —>. Пример комментариев:<!DOCTYPE html>
<html>
<head>
<!-- Комментарий в разделе head -->
</head>
<!-- Комментарий между блоками head и body-->
<body>
<!-- Комментарий в теле страницы -->
</body>
</html>Комментировать можно всё, включая теги. Можно скрывать целые части страниц — ограничений нет.
Введение в HTML | Сам Себе Вебмастер
Все сайты в интернете состоят из отдельных веб-страниц. Их подавляющее большинство создается с помощью HTML (HyperText Markup Language) — языка разметки гипертекста. В сайтостроение это основной язык, который необходимо изучить в первую очередь.
HTML начало
Если говорить о назначение языка HTML (на русском ХТМЛ), то данный язык предназначен для функциональной разметки документа, то есть позволяет определить назначение фрагментов веб-страницы. Например, если в тексте есть заголовок, то код HTML просто указывает, что соответствующий фрагмент является заголовком.
HTML довольно простой язык в изучение. По-крайней мере понять логику работы с основными элементами можно достаточно быстро. Второй этап это выучить синтаксис для верстки простых веб-страниц.
Посмотрите на код простейшей веб-страницы:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Простейшая HTML страница</title> </head> <body> <h2>Заголовок первого уровня</h2> <p>Тескт веб-страницы.</p> </body> </html> |
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Простейшая HTML страница</title> </head> <body> <h2>Заголовок первого уровня</h2> <p>Тескт веб-страницы.</p> </body> </html>
Это будет ваша первая веб-страница. Что необходимо для ее создания?
- Запускаем текстовый редактор Блокнот. Это стандартная программа операционной системы Windows.
- Наберите в редакторе код, указанный выше:
Рисунок 1. HTML код веб-страницы, набранный в блокноте
В принципе можно и скопировать, но в дальнейшем если хотите основательное познать HTML, рекомендую побольше набирать кода руками.
- После того, как документ заполнен, его необходимо сохранить в нужном формате. Для этого выполняем команду: Файл > Сохранить как
Рисунок 2. Выбор команды сохранения
- Откроется окно сохранения файла, здесь необходимо выполнить следующее:
Рисунок 3. Правильное сохранение HTML документа
Сохраним файл на рабочий стол, файлу дадим имя index.html (при этом помните, то index — это значение, а html — расширение, документы созданные на языке HTML всегда должны иметь расширение .html, иначе браузер не поймет, как обрабатывать данный документ). Тип файла также всегда необходимо указывать — Все файлы. Кодировку выставляем на UTF-8, иначе в документе могут выскочить непонятные символы. Жмем на кнопку Сохранить.
- Открываем созданный файл в любимом браузере:
Рисунок 4. Просмотр созданной веб-страницы в браузере
Те кто прошли урок поздравляю с созданием первой веб-страницы. Теперь давайте разберем наш результат. Писали, писали целых 11 строк непонятного кода, а браузер отображает все 2 строки текста. Давайте посмотрим какие элементы браузер отобразил:
Рисунок 5. Тэги, которые отобразил браузер
Это всего три тэга. Остальные тэги отвечают за структуру.
На этом первый урок по изучению языка гипертекстовой разметки документа — HTML. Переходим в следующий урок.
[Всего голосов: 1 Средний: 5/5]Читайте также:
простых HTML-страниц — javatpoint
Существуют следующие различные примеры, реализованные для создания простых HTML-страниц с использованием различных базовых тегов:
Пример 1: В этом примере создается простая страница без какого-либо содержимого, что помогает понять, как использовать теги Html, Head и Body на странице HTML.
В следующем примере мы не указали заголовок веб-страницы в теге Head, поэтому в качестве заголовка будет отображаться имя файла Html.
<Голова> <Тело>