Создание Web-страницы с помощью языка HTML
Язык HTML существует в нескольких вариантах и продолжает развиваться, но конструкции HTML скорее всего будут использоваться и в дальнейшем. Изучая HTML и познавая его глубже, создавая документ в начале изучения HTML и расширяя его насколько это возможно, мы имеем возможность создавать Web-страницы, которые могут быть просмотрены многими браузерами Web, как сейчас, так и в будущем.
Структура HTML документа
Объявление HTML
<HTML> и </HTML>. Пара этих тегов сообщает программе просмотра (браузеру) что между ними заключен документ в формате HTML, причем первым тегом в документе должен быть тег <HTML> (в самом начале документа), а последним — </HTML> (в самом конце документа).
<HTML>
.
.
.
</HTML>
Заголовочная часть
<HEAD> и </HEAD>. Между этими тегами располагается информация о документе (название, ключевые слова для поиска, описание и т.д.). Однако наиболее важным является название документа, которое мы видим в верхней строке окна браузера и в списках «Избранное (BookMark)». Специальные программы-спайдеры поисковых систем используют название документа для построения своих баз данных. Для того чтобы дать название своему HTML-документу текст помещается между тегами <TITLE> и </TITLE>.
<HTML>
<HEAD>
<TITLE>Моя первая страница</TITLE>
</HEAD>
</HTML>
Тело документа
Третьей главной частью документа является его тело. Оно следует сразу за заголовком и находится между тегами <BODY> и </BODY>. Первый из них должен стоять сразу после тега </HEAD>, а второй — перед тегом </HTML>. Тело HTML-документа — это место, куда автор помещает информацию, отформатированную средствами HTML.
<HTML>
<HEAD>
<TITLE> Моя первая страница
</HEAD>
<BODY>
.
</BODY>
</HTML>
Теперь мы можем написать HTML-код нашей странички:
<BODY>
Здесь будут мои страницы!
</BODY>
Форматирование текста
В разделе BODY все символы табуляции и конца строк браузером игнорируются и никак не влияют на отображение страницы. Поэтому перевод строки в исходном тексте HTML-документа не приведет к началу новой строки в отображаемом обозревателем тексте при отсутствии специальных тегов. Это правило очень важно помнить и не забывать ставить разделяющие строки теги, иначе у текста не будет абзацев, и он станет нечитаемым. Для начала новой строки используется тег <BR> (сокр. от англ. break — прервать). Этот тег приводит к отображению браузером дальнейшего текста с начала следующей строки. Закрывающий для него тег не используется. Он удобен, если требуется с какого-то места писать с новой строки без начала нового абзаца, например, в стихотворении. Повторное его использование позволяет вставить одну или несколько пустых строк, отодвинув следующий фрагмент страницы вниз. Сплошной текст без промежутков читается не очень легко, его неудобно просматривать и находить нужные места. Разбитый на абзацы, текст воспринимается гораздо быстрее. Для начала нового абзаца используется тег <P> (англ. paragraph — абзац). Этот тег, кроме начала новой строки, вставляет одну пустую строку. Но многократное повторение <P>, в отличие от <BR>, не приведет к появлению нескольких пустых строк, останется все та же одна пустая строка. Внутри скобок тега кроме его названия могут размещаться также атрибуты (англ. atributes — атрибуты). Они отделяются от названия и между собой пробелами (одним или несколькими), а пишутся в виде имя_атрибута=»значение». Если значение не содержит пробелов, то кавычки могут быть опущены, но так делать не рекомендуется. Тег <P> может содержать атрибут ALIGN, определяющий выравнивание абзаца. По умолчанию абзац выравнен влево ALIGN=»left». Возможны также выравнивания вправо ALIGN=»right» и по центру ALIGN=»center». При использовании атрибутов, после форматируемого текста следует использовать закрывающий тег </P>. Если его нет, то новый тег <P> означает закрытие предыдущего, соответственно вложенные <P> невозможны. Выравнить текст по центру возможно также тегом <CENTER>. Теперь мы можем поместить на нашу Web-страницу некоторый текст с различным выравниванием:
<HEAD>
<TITLE>Моя первая страница</TITLE>
</HEAD>
Кроме использования этих тегов, для разрыва строк возможно использование символов конца строк и табуляций в самом HTML-документе. Для этих целей существует тег <PRE>. Весь текст, помещенный между тегами <PRE> и </PRE> будет выводиться без изменений, то есть со всеми концами строк и табуляциями. Например:
<PRE>Это текст написан
в две строки.</PRE>
Горизонтальные разделительные линии
Вопросы для самоконтроля
- Какие редакторы используются для записи HTML кода?
- Что называют тегом?
- С помощью какого программного средства можно просмотреть web-страницу?
- Какой тег сообщает программе что между ними заключен документ в формате HTML?
- <HEAD> и </HEAD>. Какая информация располагается между этими тегами?
- Что называют телом документа и какими тегами его обозначают?
- Какие теги для форматирования текста вы знаете?
Структура HTML-документа
Все HTML-документы состоят из заголовочной части (head) и тела документа (body) (рис. 1). В заголовочной части помещается метаинформация, являющаяся описанием документа. В теле документа расположено непосредственно содержимое, которое выводится в окне браузера или на печатающее устройство. Вся веб-страница должна быть заключена в теги … . Заголовок обрамляется тегом … , а тело документа тегом
… .Рис 1. Структура HTML-документа
Следует заметить, что большая часть HTML-тегов является парными, т. е. требуют использования открывающего и закрывающего тегов. Открывающий тег состоит из имени заключенного в угловые скобки <>. В закрывающем теге перед именем добавляется знак слеш /.
Рассмотрим, как создается структура документа средствами HTML:
Здесь в строке объявляется словарь DTD. Дело в том, что сейчас HTML рассматривается как словарь (DTD – Document Type Definition) XML (Extensible Markup Language – расширяемый язык разметки). Такой HTML принято называть XHTML.
Теги … используются для того, чтобы показать, что все, что в них заключено, является HTML-документом.
Парные теги
… обрамляют заголовочную часть HTML-документа. Заголовочная часть может содержать , и некоторые другие теги. Тег содержит заголовок документа, который будет отображен в верхней части окна браузера.описывается тип кодировки. В следующей строке дается краткое описание сайта: .
Нижеприведенная строка содержит ключевые слова, которые могут использоваться поисковыми системами при индексации содержимого сайта:
Содержимое документа, которое будет отображено в окне браузера, заключается в теги
… .Теги форматирование текста
Основным тегом форматирования текста является парный тег абзаца
…
. Именно в эти теги при верстке необходимо заключать абзацы. Как и другие, рекомендованные современными стандартами теги, тег абзаца является тегом логического форматирования и не предполагается для использования для нужд визуального форматирования. Управление выводом содержимого абзаца осуществляется с помощью каскадных таблиц стилей, о которых речь пойдет в дальнейшем. Это справедливо и для других тегов, допустимых к использованию внутри тела документа, обрамленного тегом .
Для выделения смыслового ударения используются теги и . Содержимое, заключенное в тег , обычно отображается полужирным шрифтом. И хотя существует тег , следует воздержаться от его использования, так как он относится к не рекомендуемым к использованию тегам физического форматирования. Текст, заключенный в тег , обычно выводится курсивом. Так же, как и в предыдущем случае, следует воздерживаться от тега , который является тегом физического форматирования.
Кто Вы? |
Результаты голосования |
Заголовочная часть документа
Создается с помощью элемента HEAD, между тегами которого размещаются элементы, содержащие техническую информацию о документе. Заголовок обычно располагается до тела документа.
Элементы, относящиеся к заголовку документа:
HEAD | Определяет начало и конец заголовка документа |
TITLE | Определяет имя всего документа, которое отображается в заголовке окна браузера |
BASE | Определяет базовый адрес, от которого отсчитываются относительные линки внутри документа |
STYLE | Используется для вставки в документ таблицы стилей CSS |
LINK | Описывает взаимосвязь документа с другими объектами |
META | Используется для вставки метаданных |
Тэг заголовочной части документа должен быть использован сразу после тэгаи более нигде в теле документа. Данный тэг представляет из себя общее описание документа. Избегайте размещать какой-либо текст внутри тэга . Стартовый тэгпомещается непосредственно перед тэгоми другими тэгами, описывающими документ, а завершающий тэгразмещается сразу после окончания описания документа.
Определяет начало и конец заголовка документа. Является контейнером для элементов, содержащих техническую информацию о документе. (TITLE,BASE,STYLE,LINK,META).
Пример: |
Справочник по HTMLТекст документа |
Внимание! Технически, стартовые и завершающие тэги типа ,инеобязательны. Но настоятельно рекомендуется их использовать, поскольку использование данных тэгов позволяет web-браузеру уверенно разделить заголовочную часть документа и непосредственно смысловую часть.
Большинство web-браузеров отображают содержимое тэгав заголовке окна, содержащего документ и в файле закладок, если он поддерживается web-браузером. Заголовок, ограниченный тэгамии , размещается внутри -тэгов, как показано выше на примере. Заголовок документа не появляется при отображении самого документа в окне.
Определяет имя всего документа. Имя, как правило, отображается в заголовке окна браузера. Данный элемент обязателен для любого HTML-документа и может быть указан не более одного раза.
Пример: |
…Имя документа… |
(HTML 3.2) – Base URL
Указывает базовый адрес текущего документа (URL), который станет отправной точкой для расчета относительных адресов внутри документа. Элемент не имеет конечного тега. Обязательно присутствие хотя бы одного из атрибутов.
HREF – определяет базовый адрес (URL) текущего документа.
TARGET – определяет имя фрейма, которое будет использоваться в гиперссылках по умолчанию. Это может вам пригодиться, если вы хотите открывать все ссылки документа в другом фрейме.
Пример: |
Руководство по эксплуатации…Список |
Используется для вставки в документ таблицы стилей (CSS – Cascade Style Sheet).
TYPE – обязательный атрибут. Определяет MIME-тип вставляемого блока стилей. Как правило, значением этого атрибута является text/css.
TITLE – определяет имя создаваемой таблицы стилей. Необходим, если вы собираетесь использовать несколько элементов STYLE в одном документе. В этом случае браузер должен спросить пользователя, какой из предложенных стилей будет применен к документу.
Пример: |
Пример использования таблицы стилей |
Практически все популярные браузеры игнорируют атрибут TITLE, поэтому можете его не использовать. А жаль, задумка-то была неплохая… |
Элемент LINK описывает взаимосвязь документа с другими документами на сайте, указывая его место в иерархической структуре сайта. Элемент не имеет конечного тега. В заголовке может содержаться несколько элементов LINK.
HREF – определяет URL объекта.
REL – определяет тип взаимосвязи текущего документа с объектом, определенным атрибутом HREF. Возможные значения:
stylesheet – указывает на файл, содержащий таблицу стилей (CSS) для текущего документа. Браузер загрузит css-файл с указанного в атрибуте HREFадреса и применит его к текущему документу (см. также элемент STYLE)
home – указывает на заглавную страницу вашего сайта
toc, contents – указывают на файл, содержащий оглавление данного документа.
index – указывает на файл, содержащий информацию для индексного поиска по текущему документу.
glossary – указывает на файл, содержащий перечень терминов, относящихся к текущему документу.
copyright – указывает на страницу сайта, в которой говорится о его создателях, авторских правах и т.п.
up, parent – указывает на родительскую страницу (документ, стоящий на ступеньку выше в иерархической структуре вашего сайта).
child – указывает на дочернюю страницу (документ, стоящий на ступеньку ниже в иерархической структуре вашего сайта).
next – указывает на следующую страницу в последовательности документов (напр. следующую страницу электронного каталога, документации или словаря).
previous – указывает на предыдущую страницу в последовательности документов.
last, end – указывает на последнюю страницу в последовательности документов.
first – указывает на первую страницу в последовательности документов.
help – указывает на страницу с подсказкой (напр. по навигации по вашему сайту).
TYPE – определяет MIME-тип для объекта, указанного в атрибуте HREF.
Пример 1: |
Элемент DIV |
Пример 2: |
Полдневье |
Элемент LINK, к сожалению, используется web-мастерами довольно редко, чаще всего только для внедрения CSS из отдельного файла. Почти все браузеры игнорируют информацию о положении документа в структуре сайта – эта информация интересна только индексирующим роботам поисковых систем.
Элемент МЕТА используется для техописания документа, которое представляет собой метаданные в виде пары имя-значение. С помощью этого элемента в заголовок документа внедряется дополнительная полезная информация, невидимая для пользователя, но порой просто незаменимая для правильной индексации вашей страницы роботами поисковых серверов. Элемент не имеет конечного тега.
NAME – определяет имя мета-записи. Существует множество предопределенных имен, некоторые из которых вы можете увидеть в указанном ниже примере.
HTTP-EQUIV – определяет имя мета-записи. Практически аналогичен атрибуту NAME, но используется лишь в случае необходимости передачи дополнительной информации в HTTP-заголовке.
CONTENT – присваивает значение мета-записи, определенной в атрибуте NAME (илиHTTP-EQUIV).
Пример: |
… … |
Как любой язык, HTML позволяет вставлять в тело документа комментарии, которые сохраняются при передаче документа по сети, но не отображаются браузером. Синтаксис комментария:
Комментарии могут встречаться в документе где угодно и в любом количестве.
Все, что находится внутри , будь то элемент или текст – будет проигнорировано браузером (не будет обрабатываться и выводиться на экран).
Пример: |
…… |
Комментарии, расположенные внутри элемента TITLE (как, впрочем, и любые другие теги) трактуются как текст и будут видны в заголовке документа. Иначе говоря, тегвнутри TITLE не действует.
Не ленитесь комментировать все, что написали. Это волшебное правило сэкономит вам немало времени при попытке разобраться в собственном творении пару месяцев спустя.
Тело документа создается с помощью элемента BODY. Именно в теле документа содержится все то, что мы видим на странице. А на странице мы обычно видим:
- Текст, блоки текста (причем текста форматированного)
- Гиперссылки
- Разнообразные списки
- Таблицы
- Всяческие объекты, картинки
- Заполняемые формы
Бестелесных документов не бывает. Документ без тела будет похож на одинокую голову профессора Доуэля (см. структуру HTML=документа).
Документ может иметь несколько тел – фреймов. В этом случае тело вместе со всем его содержимым удаляется и вместо него вставляется FRAMESET.
Указывает начало и конец тела HTML-документа. Между начальным и конечным тегами содержится текст документа, изображения и таблицы. Одним словом, все HTML-элементы, отвечающие за отображение документа, управление им и гипертекстовые ссылки. Элемент BODY должен встречаться в документе не более одного раза.
MARGINHEIGHT – определяет ширину (в пикселах) верхнего и нижнего полей документа. Работает только в браузерах Netscape.
TOPMARGIN – определяет ширину (в пикселах) верхнего и нижнего полей документа. Работает только в браузерах Internet Explorer.
MARGINWIDTH – определяет ширину (в пикселах) левого и правого полей документа. Работает только в браузерах Netscape.
LEFTMARGIN – определяет ширину (в пикселах) левого и правого полей документа. Работает только в браузерах Internet Explorer.
BACKGROUND – определяет изображение для заливки фона. Значение задается в виде полного URL или имени файла с картинкой в формате GIF или JPG.
BGCOLOR – определяет цвет фона документа.
TEXT – определяет цвет текста в документе.
LINK – определяет цвет гиперссылок в документе.
ALINK – определяет цвет подсветки гиперссылок в момент нажатия.
VLINK – определяет цвет гиперссылок на документы, которые вы уже просмотрели.
Значения атрибутов BGCOLOR, TEXT, LINK, ALINK и VLINK задаются либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.
Пример: |
… Текст документа. … |
При задании ширины полей для обеспечения совместимости со всеми видами браузеров используйте одновременно атрибуты MARGINWIDTH / MARGINHEIGHT и TOPMARGIN / LEFTMARGIN как показано в примере.
Всегда указывайте атрибуты BGCOLOR и TEXT одновременно. Считайте, что они неразлучны. Если один из этих атрибутов не указан, браузер по умолчанию будет использовать цвет из текущей цветовой схемы Windows. А теперь представьте, что будет, если пользователь использует нестандартную раскраску Windows, где все цвета инвертированы? Некрасиво получится.
Ссылки на другие документы в HTML создаются либо с помощью элемента А, либо с помощьюнавигационных карт.
Элемент А применяется, если ссылкой планируется сделать часть текста или целое изображение. Навигационные карты имеет смысл применять, если ссылкой будет часть изображения.
(HTML 1.0) – Anchor
Самый необходимый элемент, без которого Интернет просто немыслим. Используется для создания и использования гипертекстовых ссылок.
HREF – определяет находящийся между начальным и конечным тегами текст или изображение как гипертекстовую ссылку (URL, или линк) на документ (и/или область документа), указанный в значении данного атрибута. Возможные значения:
http://… – создает ссылку на www-документ;
ftp://… – создает ссылку на ftp-сайт или расположенный на нем файл;
mailto:… – запускает почтовую программу-клиент с заполненным полем имени получателя. Если после адреса поставить знак вопроса, то можно указать дополнительные атрибуты, разделенные знаком ;
news. – создает ссылку на конференцию сервера новостей;
telnet://… – создает ссылку на telnet-сессию с удаленной машиной;
wais://… – создает ссылку на WAIS – сервер;
gopher://… – создает ссылку на Gopher – сервер;
Если тип соединения и адрес машины не указаны, в качестве отправной точки используется адрес текущего документа. Это позволяет использовать относительные ссылки.
Например, LINK Документация будет ссылаться на файл title.html в подкаталоге docs (относительно текущего).
NAME – помечает находящуюся между начальным и конечным тегами область документа как возможный объект для ссылки. В качестве значения нужно латиницей написать любое слово-указатель, уникальное для данного документа.
Например: Раздел1. Теперь вы можете ссылаться на помеченную область простым указанием ее имени после имени документа. Например, LINK Раздел1 отправит вас в раздел part файла document.html, а LINKВ конец документа – в раздел bottom текущего документа. (см. Пример 1)
TARGET – определяет окно (фрейм), на которое указывает гипертекстовая ссылка. Этот атрибут используется только совместно с атрибутом HREF. В качестве значения необходимо задать либо имя одного из существующих фреймов, либо одно из следующих зарезевированных имен:
_self – указывает, что определенный в атрибуте HREF документ должен отображаться в текущем фрейме;
_parent – указывает, что документ должен отображаться во фрейме-родителе текущего фрейма. Иначе говоря, _parent ссылается на окно, содержащееFRAMESET, включающий текущий фрейм;
_top – указывает, что документ должен отображаться в окне-родителе всей текущей фреймовой структуры;
_blank – указывает, что документ должен отображаться в новом окне.
Пример 1: |
История бодибилдинга … Спорт глазами современника … Вернуться к разделуистории |
Пример 2: |
FTP-site Русский проект по OpenGL … |
Пример 3: |
Отправить приглашение .авторам. |
Элемент A не может быть вложенным в себе подобные, то есть недопустимы конструкции вроде
Первый Link
Второй link
Продолжаем первый link
Если в атрибуте TARGET указать имя несуществующего окна или фрейма, создастся новое окно с указанным именем. Как мы видим, результат получится тот же, что и при задании нового окна: , с той лишь разницей, что в последнем случае окно не будет иметь имени и на него нельзя будет ссылаться.
С помощью элемента BASE вы можете указать значение TARGET для всех гиперссылок в текущем документе.
Карты, обрабатываемые на клиентской машине браузером, создаются с помощью элементов MAP и AREA и представляют собой гиперссылки, офомленные в виде активных областей на изображении. Применить созданную карту к изображению можно вызвав ее по имени с помощью атрибута USEMAP элемента IMG.
Пример: |
… |
В данном примере мы создали квадратное изображение размером 140×140 пикселов, левая часть которого является ссылкой на файл something.html, а правая – на файл anything.html.
Для создания карт, обрабатываемых на сервере, используется атрибут ISMAP элемента IMG.
Создает новую навигационную карту. Между начальным и конечным тегами содержит один или несколько элементов AREA, определяющих навигационные области карты.
NAME – единственный и обязательный атрибут. Определяет имя навигационной карты, уникальное для данного документа. Используется для вызова карты с помощью атрибута USEMAP элемента IMG. Вы можете указать любое имя без пробелов с использованием латинских символов и цифр.
Пример: |
… |
(HTML 3.2) – Map Area
Создает область карты, определенной с помощью элемента MAP. Элемент должен располагаться между начальным и конечным тегами элемента MAP. Не имеет конечного тега.
SHAPE – определяет форму навигационной области. Возможные значения:
rect – прямоугольник;
circle – окружность;
poly – многоугольник.
В зависимости от выбранной формы меняется способ задания ее координат в атрибуте COORDS.
COORDS – определяет координаты навигационной области на карте. Используется в паре с атрибутом SHAPE. Способы задания координат для разных типов областей:
SHAPE=rect COORDS=левый x, верхний y, правый x, нижний y;
SHAPE=circle COORDS=центр x, центр y, радиус;
SHAPE=poly COORDS=x1,y1,x2,y2,x3,y3,…;
HREF – определяет область как гипертекстовую ссылку. Значение задается в виде ссылки (URL).
TARGET – определяет окно (фрейм), на которое указывает гипертекстовая ссылка. Этот атрибут используется только совместно с атрибутом HREF. В качестве значения необходимо задать либо имя одного из существующих фреймов (см. элемент FRAME) либо одно из зарезевированных имен, подробно описанных в атрибуте TARGETэлемента A.
NOHREF – определяет область как неактивную (невосприимчивую к нажатию). Данный атрибут противоположен атрибуту HREF и используется для отмены действия последнего.
ALT – определяет альтернативный текст-подсказку для данной области.
Пример: |
… |
В последовательности из нескольких элементов AREA наибольший приоритет имеют те, которые были определены первыми. Они перекрывают области, определенные позже. Именно поэтому в приведенном выше примере сначала создается пассивная область (отверстие) и лишь потом – активная со ссылкой.
Старайтесь всегда указывать атрибут ALT. Пользователи, работающие в текстовом режиме (а таких немало!), скажут вам спасибо.
IMG — используется для вставки изображений в HTML-документ.
Это один из самых популярных элементов, незаменимый инструмент web-дизайнера. Элемент допускает вставку изображений в форматах JPEG (в том числе progressive jpeg) и Compuserve GIF (включая прозрачные и анимированные). Четвертые версии браузеров позволяют также использовать формат PNG, но до тех пор, пока они не устареют, от применения PNG лучше воздержаться.
Статьи к прочтению:
- Загрузка отлаживаемой программы
- Заключив договор с нашей компанией, вы получаете следующие
Заполнение заголовочной части шапки шаблона медицинского документа 2m14c UE
Похожие статьи:
- Размещение нескольких документов на одной web-странице Язык HTML позволяет разбить окно программы браузера на несколько частей и в каждой из них отобразить отдельный документ. Такие области называются…
- Основы создания html и css документов в программе aptana studio 3. 1 страница Новосибирск 2015 УДК 681.3.06 Я 434 Каравка А.А. Основы создания HTML и CSS документов в программе Aptana Studio 3.: Учебное пособие для студентов…
Напишите тег который определяет заголовочную часть документа html страницы
Тег используется для определения заголовочной части HTML-документа.
не отображается на веб-странице, но содержит информацию, которая может быть использована браузером и другими приложениями. Этот тег содержит мета-информацию о документе, такую как заголовок, ключевые слова, ссылки на стили, скрипты и другие данные, которые необходимы для правильного отображения и интерпретации веб-страницы.
Заголовок документа
Примеры использования
Заголовок документа
Тег внутри используется для определения заголовка документа, который будет отображаться во вкладке браузера.
Мой сайт
Установка кодировки
Метатег внутри используется для определения кодировки документа. Это необходимо для правильного отображения символов на странице.
Подключение CSS-файла
Тег внутри используется для подключения внешнего CSS-файла к странице. В примере ниже мы подключаем файл style.css , который содержит стили для нашей веб-страницы.
Для чего использовать тег
Определение заголовка страницы с помощью тега :
Заголовок страницы
Определение описания страницы с помощью метатега description :
Определение ключевых слов для страницы с помощью метатега keywords :
Ссылка на файлы стилей с помощью тега :
Ссылка на файлы скриптов с помощью тега :
Определение кодировки страницы с помощью метатега charset :
Определение масштаба страницы для мобильных устройств с помощью метатега viewport:
Атрибуты тега
Тег не имеет своих атрибутов, но поддерживает все глобальные атрибуты HTML.
Ограничения тега
Тег должен быть расположен внутри тега и содержать информацию о документе, такую как заголовок страницы, метаданные, скрипты и стили.
Нюансы
Другие теги для создания структуры документа
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.