Коротко об элементах HTML




Тема 5. ОСНОВЫПОСТРОЕНИЯ WEB-САЙТОВ

Создание страниц в Интернет – одно из направлений, где необходимы знания по компьютерной графике. Здесь кратко описан язык HTML разметки гипертекста, при помощи которого создаётся большая часть страниц во всемирной паутине. С помощью HTML можно создавать не только страницы для Интернета. К примеру, в HTML можно создать интерактивную презентацию любой сложности или оформить и подготовить документ (текст, графический коллаж) для печати. Плюс ко всему этому, можно освоить специальные языки программирования (наиболее популярные из них - Javascript и PHP). С их помощью создаётся так называемый динамический HTML (Dynamic HTML). Так создаются гостевые книги, чаты, Интернет-магазины и другие интерактивные страницы (позволяющие пользователю взаимодействовать с собой). При помощи динамического HTML можно также создавать более эффективные страницы (например, вместо 50 похожих страничек написать одну динамическую).

Основные понятия Web

 

Неформатированный текст (обычный текст, ASCII текст) – создаётся в блокноте (Notepad) или другом простом текстовом редакторе. Неформатированный текст – т.е. без форматирования, в нём не могут использоваться различные шрифты, различный размер текста, выравнивание и т.д.

Код HTML – тоже может быть создан в простом текстовом редакторе, но отличается от обычного текста тем, что содержит специальные команды языка разметки гипертекста (HTML) – теги.

Web-страница (или HTML-страница, HTML-документ, страница, страничка) – один файл, содержащий код HTML, и имеющий расширение htm, html, php, phtml (есть и другие, реже используемые расширения).

Web-дизайнер – тот, кто создаёт web-страницы. Web-дизайнер может:

§ Создавать HTML-код в текстовом редакторе (или в редакторе кода). Далее рассматривается именно такой способ.

§ Создавать web-страницу визуально. Для этого используется специальный визуальный (WYSIWYG, What You See Is What You Get – что видишь, то и получаешь) редактор. Второй способ проще для начинающего, однако, зачастую визуально созданные страницы отличаются кривым кодом и большим количеством ошибок.

Браузер (browser, броузер) – программа пользователя для просмотра Web-страниц. Таким образом, Вы создаёте страницу в одной программе – редакторе, просматриваете её в другой – браузере. Можно сказать, что браузер – программа для визуального отображения кода HTML. Примеры браузеров: Microsoft Internet Explorer, Mozilla, Netscape, Firefox, Opera.

Интернет (Internet, World Wide Web, всемирная паутина, сеть) – большое количество компьютеров по всему миру, соединённых между собой.

URL (Universal Resource Locator) – адрес web-страницы или файла во всемирной сети Интернет. Каждая страница или файл в сети имеет свой уникальный URL адрес. Этот адрес записывается в специальную адресную строку браузера. Примеры URL:

https://www.yandex.ru

https://seegix.net

https://1188.ru/index.php

В большинстве браузеров не обязательно даже писать https:// и www:

yandex.ru

seegix.net

1188.ru/index.php

Пользователь (или user) – тот, кто будет просматривать Web-страницы (в контексте Web-дизайна).

Web-сайт (website, site, сайт) – совокупность web-страниц, объединённых некоторой общей идеей и связанных между собой гиперссылками.

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

Введение в HTML

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

HTML (Hyper Text Markup Language) означает язык разметки гипертекста. Этот язык был разработан Тимом Бернерсом-Ли в рамках создания проекта распределенной гипертекстовой системы, которую он назвал World Wide Web (WWW) или Всемирная паутина. HTML предназначен для написания гипертекстовых документов, публикуемых в World Wide Web. Документ на языке HTML может включать следующие компоненты:

стилизованный и форматированный текст,

команды включения графических и звуковых файлов,

гиперсвязи с различными ресурсами Internet.

скрипты на языке JavaScript и VBScript.

различные объекты, например Flash-анимацию

Документы HTML являются обычными текстовыми файлами, содержащими специальные теги (или управляющие элементы) разметки. Теги разметки указывают браузеру, как надо вывести страницу.

Файлы HTML обычно имеют расширения htm или html. Их можно создавать при помощи любого текстового редактора.

Язык HTML является подмножеством мощного языка SGML (Standard Generalized Markup Language), который широко используется в издательской деятельности. Основной выигрыш от использования этих языков состоит в переносимости текста между разными издательскими системами. Эта же особенность сохраняется и в HTML. Так, читая документ, пользователи могут устанавливать способы выделения текста, гарнитуру и размер шрифтов по своему вкусу; они могут отменить просмотр рисунков.

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

В разных операционных системах имеются различные редакторы, которые можно использовать для создания документов HTML. Если вы используете Microsoft Windows, то запустите редактор Notepad.

Файлы HTML можно создавать и в редакторе Microsoft Word, в котором имеется возможность сохранить документ как Web-страницу (в меню "Файл"), однако использовать эту возможность не рекомендуется. Во-первых, потому что HTML-код, генерируемый MS Word не оптимален и содержит множество ненужных элементов разметки, и, во-вторых, автоматическая генерация кода не будет способствовать изучению и правильному пониманию HTML.

Имеется также большое количество специализированных редакторов для создания файлов HTML, таких как FrontPage, Macromedia Dreamweaver или Adobe Web Bundle, которые обладают возможностью WYSIWYG (What You See Is What You Get - что видишь, то и получишь). С их помощью можно легко создавать документы HTML, при помощи кнопок и элементов меню, а не писать самому теги разметки. Однако, как уже отмечалось выше, тем, кто хочет стать технически грамотным разработчиком Web, настоятельно рекомендуется использовать простой текстовый редактор для начального изучения HTML.

Напечатайте следующий текст:

<html><head><title>Это заголовок страницы</title></head><body><h1>Здравствуйте!</h1><p>Это моя первая страница HTML. <b>Этот текст выводится жирным шрифтом.</b></p></body></html>

 

Пример выполнения данного HTML-кода

Здравствуйте!

Это моя первая страница HTML. Этот текст выводится жирным шрифтом.

 

Сохраните файл как "page1.htm".

При сохранении файла HTML можно использовать расширение.htm или.html. Расширение.htm было принято для старых версий операционных систем, которые допускали трехбуквенное расширение для файлов. В настоящее время практически все операционные системы не имеют подобного ограничения и можно использовать расширение.html.

Теперь посмотрите, как браузер отобразит вашу первую страницу. Запустите браузер Интернет. Выберите "Open" или "Open Page" ("Открыть" или "Открыть страницу") в меню File (Файл) браузера. Появится диалоговое окно. Выберите "Browse" или "Choose File" ("Просмотр" или "Выбрать файл") и найдите только что созданный файл HTML - "page1.htm" - выберите его и щелкните на кнопке "Open" ("Открыть"). В диалоговом окне должен появиться адрес, например "C:\MyDocuments\page1.htm". Щелкните на кнопке ОК, и браузер выведет на экран вашу страницу.

Разбор примера

Ваш первый HTML-документ начинается с тега <html>, который сообщает браузеру о начале документа HTML и заканчивается тегом </html>, который информирует браузер о достижении конца документа HTML.

Текст между тегами <head> и </head> является информацией заголовка документа. Эта информация не выводится в окне браузера.

Текст "Это заголовок страницы" между тегами <title> и </title> является заголовком документа. Этот заголовок выводится в строке заголовка окна браузера.

Текст между тегами <body> и </body> является текстом, который будет выведен в окне браузера. Текст "Здравствуйте!" между тегами <h1> и </h1> будет отображен стилем заголовка, обычно жирным шрифтом большего размера.

Тег <p> означает, что начинается новый параграф, тег </p> означает конец параграфа.

Текст "Этот текст выводится жирным шрифтом." между тегами <b> и </b> будет выведен жирным шрифтом.

Коротко о тегах

Теги HTML используются для выделения элементов HTML. Обычно теги HTML используются парами и заключены между двумя символами угловых скобок < (начальный тег)> и </(конечный тег)>. Всё что ограничено угловыми скобками "<" и ">" называется тегом. Теги являются командами языка HTML и при просмотре страницы в браузере не отображаются. Текст между начальным и конечным тегами является содержимым элемента. Некоторые теги не имеют конечного, например, тег принудительного переноса строки <br>. Для таких тегов рекомендуется использовать следующее написание <br/>.

Регистр символов для отображения тегов не важен, например, <p> и <P> означает одно и то же. Однако в этом курсе используется нижний регистр для написания тегов. Это связано с тем, что консорциум WWW (W3C), который занимается стандартизацией спецификации HTML, рекомендует использовать теги в нижнем регистре, поскольку в следующем поколении стандартов будет именно такое требование.

Коротко об элементах HTML

Элементом называется пара тегов с одинаковым именем, в последнем из которых стоит обратный слеш "/". Единственным исключением является элемент <!DOCTYPE>, который состоит только из открывающего тега.

Рассмотрим тот же пример документа HTML:

<html><head><title>Это заголовок страницы</title></head><body><h1>Здравствуйте!</h1><p>Это моя первая страница HTML. <b>Этот текст выводится жирным шрифтом.</b></p></body></html>

 

Пример выполнения данного HTML-кода

Здравствуйте!

Это моя первая страница HTML. Этот текст выводится жирным шрифтом.

 

Элементом HTML является:

<h1>Здравствуйте!</h1>

Этот элемент начинается с тега <h1>, имеет содержимое "Здравствуйте!" и заканчивается тегом </h1>.

Также элементом HTML является:

<p>Это моя первая страница HTML.<b>Этот текст выводится жирным шрифтом.</b></p>

Этот элемент, начинается с начального тега <p>, заканчивается конечным тегом </p> и означает, что содержимое элемента "Это моя первая страница HTML. <b>Этот текст выводится жирным шрифтом.</b>" является отдельным параграфом. При этом внутри этого элемента находится другой элемент:

<b>Этот текст выводится жирным шрифтом.</b>

Этот элемент HTML начинается с начального тега: <b> Содержимым элемента HTML является: Этот текст выводится жирным шрифтом. Этот элемент HTML заканчивается конечным тегом </b>. Назначение тега <b> состоит в определении элемента HTML, который должен выводиться жирным шрифтом.

Все описанные элементы HTML содержатся в элементе:

<body><h1>Здравствуйте!</h1><p>Это моя первая страница HTML.<b>Этот текст выводится жирным шрифтом.</b></p></body>

Этот элемент HTML начинается с начального тега <body>, и заканчивается конечным тегом </body>. Назначение тега <body> состоит в определении элемента HTML, который содержит основную часть (или тело) документа HTML.

Атрибуты тегов

Теги могут иметь атрибуты, которые предоставляют дополнительную информацию об элементах HTML. Атрибуты всегда используются в виде пары "имя/значение". Общий формат задания атрибутов имеет вид:

<имя_тега имя_атрибута="значение">

Например, тег:

<body bgcolor="red">

означает, что цвет фона страницы должен быть красным.

А тег:

<p align="center">

означает, что параграф необходимо выровнять по центру страницы отображения браузера.

Атрибуты всегда помещаются в начальном теге элемента HTML. Значения атрибутов всегда полезно заключать в кавычки. Наиболее широко используются двойные кавычки, но одиночные кавычки также допустимы.

В некоторых редких ситуациях, когда, например, значение атрибута само содержит кавычки, необходимо использовать одиночные кавычки:

<html><body><abbr title='проект "Интернет-Университет Информационных Технологий" – INTUIT.ru'>ИНТУИТ</abbr></body></html>

 

Пример выполнения данного HTML-кода

ИНТУИТ

Основные теги HTML

Параграфы

Прежде чем изучать теги форматирования HTML, посмотрим как введенный текст отобразится, если не будут применены никакие теги, кроме тегов <html> и <body>. Следующий пример демонстрирует такой документ HTML

<html><body>Этот текст будет показан в окне браузера. </body></html>

 

Пример выполнения данного HTML-кода

Этот текст будет показан в окне браузера.

 

Этот простой пример документа HTML, который содержит минимальное количество тегов HTML и демонстрирует, как текст внутри элемента body отображается в браузере.

Если ввести большой объем текста таким способом, то читать его будет очень неудобно. Логичнее разбить его на параграфы, как в книге, которые повышают читабельность текста, и кроме того выделяют смысловые блоки.

Следующий пример показывает, как отображаются параграфы

<html><body><p>Это параграф 1.</p><p>Это параграф 2.</p><p>Это параграф 3.</p></body></html>

Пример выполнения данного HTML-кода

Это параграф 1.

Это параграф 2.

Это параграф 3.

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

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

Использование пустых параграфов <p> для вставки пустых строк является плохим стилем, вместо этого используйте тег <br/>.

Заголовки

Заголовки определяются с помощью тегов от <h1> до <h6>. <h1> определяет заголовок самого большого размера, а <h6> определяет заголовок самого маленького размера.

<h1>Это заголовок первого уровня</h1><h2>Это заголовок второго уровня</h2><h3>Это заголовок третьего уровня</h3><h4>Это заголовок четвертого уровня</h4><h5>Это заголовок пятого уровня</h5><h6>Это заголовок шестого уровня</h6>

Заголовки автоматически отделяются дополнительными промежутками от остальных элементов документа.

Переносы строк

Для переноса внутри параграфа используется тег <br>, который выполняет принудительный перенос строки.

<html><body><p>Это <br>пара<br>граф с переносами строк</p></body></html>

 

Пример выполнения данного HTML-кода

Это

Пара

граф с переносами строк

 

Тег <br> не имеет закрывающего тега. Поэтому для совместимости с будущими версиями стандарта рекомендуется следующее написание тега <br/>

Горизонтальная линейка

Разделять различные элементы можно при помощи горизонтальной линейки, для этого используйте тег <hr>:

<html><body><p>Этот параграф отобразится сверху горизонтальной полосы.</p><hr><p>Этот параграф отобразится снизу горизонтальной полосы.</p></body></html>

 

Пример выполнения данного HTML-кода

Это параграф отобразится сверху горизонтальной полосы.

Это параграф отобразится снизу горизонтальной полосы.

 

Тег <hr> не имеет закрывающего тега. Поэтому для совместимости с будущими версиями стандарта рекомендуется следующее написание тега <hr/>. Для этого тега определен ряд атрибутов, но они являются устаревшими. И хотя их применение возможно, но консорциум W3C их использовать не рекомендует. Вместо них следует использовать таблицы стилей.

Комментарии в HTML

Тег комментария используется для вставки комментариев в исходный код HTML. Комментарии будут проигнорированы браузером. Комментарии можно использовать для пояснения кода, что может помочь при редактировании исходного кода в будущем.

<!-- Это комментарий -->

Вот пример:

<html><body>Этот текст будет показан в окне браузера. <!-- Этот текст не будет показан, это комментарий. --></body></html>

Пример выполнения данного HTML-кода

Этот текст будет показан в окне браузера.

Дополнительные примеры

Лучшим способом изучения HTML является работа с примерами. Рассмотрим несколько примеров, которые иллюстрируют некоторые элементы форматирования документов.



Поделиться:




Поиск по сайту

©2015-2024 poisk-ru.ru
Все права принадлежать их авторам. Данный сайт не претендует на авторства, а предоставляет бесплатное использование.
Дата создания страницы: 2016-08-20 Нарушение авторских прав и Нарушение персональных данных


Поиск по сайту: