МОСКОВСКИЙ ЭНЕРГЕТИЧЕСКИЙ ИНСТИТУТ (ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ)
ИНСТИТУТ АВТОМАТИКИ И ВЫЧИСЛИТЕЛЬНОЙ ТЕХНИКИ
КАФЕДРА ПРИКЛАДНОЙ МАТЕМАТИКИ
Лабораторная работа № 3.
Разработка простых web-страниц.
Выполнил
студент группы А-13-08
каф. Прикладной Математики
Захаров Антон
Преподаватель
Куриленко Иван Евгеньевич
Москва, 2012
Цель работы
Изучить основы языка гипертекстовой разметки HTML и получить практические навыки разработки простых Web-страниц.
Подготовка к работе
Ознакомиться с основами языка HTML:
-
форматом документа;
-
содержимым секции head;
-
тегами форматирования текста;
-
тегами, позволяющими внедрять на страницу графику и изображения;
-
тегами, позволяющими связывать страницы между собой.
Порядок выполнения работы
-
Разработать 3 WEB-страницы с применением тегов форматирования текста HTML.
-
Заполнить секции head каждой страницы, как минимум указать кодировку страниц, заголовки и ключевые слова.
-
Связать страницы друг с другом через гиперссылки (одна из страниц должна быть главной страницей сайта.).
-
Добавить на страницы рисунки.
-
Добавить на страницы формулу из таблицы ниже, записанную с помощью тегов форматирования. Вариант формулы определить по номеру в журнале (вариант 9).
![]()
![]()
Подготовка к работе.
-
Знакомство с основами языка HTML.
Определение
HTML (HyperText Markup Language) – стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа, в удобной для человека форме.
Тип документа (DTD).
Определение
DTD (document type definition) – описание типа документа; элемент web-страницы, предназначенный для указания типа документа.
Основные типы документов HTML
| Тип документа | Требования к синтаксису |
| HTML 4.01 |
| | Строгий синтаксис HTML. |
| | Переходный синтаксис HTML. |
| | В HTML-документе применяются фреймы. |
| HTML 5 |
| | Для всех документов. |
| XHTML 1.0 |
| | Строгий синтаксис XHTML. |
| | Переходный синтаксис XHTML. |
| | Документ написан на XHTML и содержит фреймы. |
| XHTML 1.1 |
| | Никакого деления на виды это определение не имеет, синтаксис один и подчиняется чётким правилам. |
Элемент необходим, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, существует XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста).
Далее рассмотрим теги, используемы при создании простых web-страниц. Более подробную информацию можно найти в источниках, указанных в конце отчёта.
Тег предназначен для хранения других элементов, цель которых – помочь браузеру в работе с данными. Также внутри контейнера находятся метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к мета-тегам для получения описания сайта, ключевых слов и других данных.
Содержимое тега не отображается напрямую на веб-странице, за исключением тега
устанавливающего заголовок окна веб-страницы.</p><p> Внутри контейнера допускается размещать следующие элементы:</p> <table> <tr> <td> <p><b>Теги секции </b></p> </td> <td> <p>Описание</p> </td> </tr> <tr> <td> <p><b><base></b></p> </td> <td> <p>Указывает полный базовый адрес текущего документа или задаёт целевое окно для всех ссылок на текущей странице.</p> </td> </tr> <tr> <td> <p><b><basefont></b></p> </td> <td> <p>Определяет шрифт, размера и цвета текста по умолчанию.</p> </td> </tr> <tr> <td> <p><b><link></b></p> </td> <td> <p>Устанавливает связь с внешним документом вроде файла со стилями или со шрифтами.</p> </td> </tr> <tr> <td> <p><b><bgsound></b></p> </td> <td> <p>Определяет музыкальный файл, который будет проигрываться на веб-странице при её открытии</p> </td> </tr> <tr> <td> <p><b><meta></b></p> </td> <td> <p>Определяет мета теги, которые хранят информацию, предназначенную для браузеров и поисковых систем.</p> </td> </tr> <tr> <td> <p><b><script></b></p> </td> <td> <p>Предназначен для описания скриптов, может содержать ссылку на программу или её текст на определённом языке.</p> </td> </tr> <tr> <td> <p><b><style></b></p> </td> <td> <p>Применяется для определения стилей элементов веб-страницы.</p> </td> </tr> <tr> <td> <p><b><title></b></p> </td> <td> <p>Определяет заголовок документа.</p> </td> </tr> </table> <p><b><b></b></b></p><p> Устанавливает жирное начертание шрифта. Допустимо использовать этот тег совместно с другими тегами, которые определяют начертание текста. </p><p><b></b></p><p> Данный тег предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера <body>. К такой информации относится текст, изображения, теги, скрипты JavaScript и т.д.</p><p> Тег <body> также применяется для определения цветов ссылок и текста на веб-странице. Подобная практика в HTML 4 осуждается и взамен для указания цветовой схемы рекомендуется использовать стили, применяя их к селектору body. Тем не менее, большинство атрибутов до сих пор поддерживается разными браузерами.</p><p> Часто тег <body> используется для размещения обработчика событий, например, onload, которое выполняется после того, как документ завершил загрузку в текущее окно или фрейм.</p><p> Открывающий и закрывающий теги <body> на веб-странице не являются обязательными, однако хорошим стилем считается их использование, чтобы определить начало и конец HTML-документа.</p><p> Атрибуты:</p> <ul> <li> <p> alink – устанавливает цвет активной ссылки. </p> <li> <p> background – задаёт фоновый рисунок на веб-странице. </p> <li> <p> bgcolor – цвет фона веб-страницы. </p> <li> <p> bgproperties – определяет, прокручивать фон совместно с текстом или нет. </p> <li> <p> bottommargin –отступ от нижнего края окна браузера до контента. </p> <li> <p> leftmargin – отступ по горизонтали от левого края окна браузера до контента. </p> <li> <p> link – цвет ссылок на веб-странице. </p> <li> <p> rightmargin – отступ от правого края окна браузера до контента. </p> <li> <p> scroll – устанавливает, отображать полосы прокрутки или нет. </p> <li> <p> text – цвет текста в документе. </p> <li> <p> topmargin – отступ от верхнего края окна браузера до контента. </p> <li> <p> vlink цвет посещённых ссылок. </p> </li></li></li></li></li></li></li></li></li></li></li></li></ul> <p><b></b></p><p> Элемент <div> является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. </p><p> Как и при использовании других блочных элементов, содержимое тега <div> всегда начинается с новой строки. После него также добавляется перенос строки.</p><p> Атрибуты:</p> <ul> <li> <p> align – задаёт выравнивание содержимого тега <div>. </p> <li> <p> title – добавляет всплывающую подсказку к содержимому. </p> </li></li></ul> <p><b></b></p><p> Тег <font> представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура. Хотя этот тег до сих пор поддерживается всеми браузерами, он считается устаревшим и от его использования рекомендуется отказаться в пользу стилей. </p><p> Атрибуты:</p> <ul> <li> <p> color – устанавливает цвет текста. </p> <li> <p> face – определяет гарнитуру шрифта.</p> <li> <p> size – задаёт размер шрифта в условных единицах. </p> </li></li></li></ul> <p><b><h</b><b>1</b><b>>, <h2>, <h3>, <h4>, <h5>, <h6></h6></h5></h4></h3></h2></b></p><p> HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег <h1> представляет собой наиболее важный заголовок первого уровня, а тег <h6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги <h1>,...,<h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство. </p><p> Атрибуты:</p> <ul> <li> <p> align – определяет выравнивание заголовка. </p> </li></ul> <p><b></b></p><p> Тег <html> является контейнером, который заключает в себе все содержимое веб-страницы, включая теги <head> и <body>. Открывающий и закрывающий теги <html> в документе необязательны, но хороший стиль диктует непременное их использование. Как правило, тег <html> идёт в документе вторым, после определения типа документа. Закрывающий тег <html> должен всегда стоять в документе последним. </p><p> Атрибуты:</p> <ul> <li> <p> title – добавляет всплывающую подсказку на веб-страницу. </p> <li> <p> manifest – указывает файл манифеста.</p> <li> <p> xmlns – указывает пространство имён для XHTML-документов. </p> </li></li></li></ul> <p><b><img /></b></p><p> Тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Этот тег имеет единственный обязательный атрибут src, который определяет адрес файла с картинкой. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>. При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border=”0” в тег <img>. </p><p> Рисунки также могут применяться в качестве карт-изображений, когда картинка содержит активные области, выступающие в качестве ссылок. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой. </p><p> Атрибуты:</p> <ul> <li> <p> align – определяет, как рисунок будет выравниваться по краю и способ обтекания текстом. </p> <li> <p> alt – альтернативный текст для изображения. </p> <li> <p> border – толщина рамки вокруг изображения.</p> <li> <p> height – высота изображения.</p> <li> <p> hspace – горизонтальный отступ от изображения до окружающего контента.</p> <li> <p> ismap – говорит браузеру, что картинка является серверной картой-изображением.</p> <li> <p> longdesc – указывает адрес документа, где содержится аннотация к картинке.</p> <li> <p> src – путь к графическому файлу. </p> <li> <p> vspace – вертикальный отступ от изображения до окружающего контента.</p> <li> <p> width – ширина изображения.</p> <li> <p> usemap – ссылка на тег <map>, содержащий координаты для клиентской карты-изображения.</p> </li></li></li></li></li></li></li></li></li></li></li></ul> <p><b><li></li></b></p><p> Тег <li> определяет отдельный элемент списка. Внешний тег <ul> или <ol> устанавливает тип списка – маркированный или нумерованный. </p><p> Атрибуты:</p> <ul> <li> <p> type – устанавливает вид маркера нумерованного или маркированного списка. </p> <li> <p> value – число, с которого будет начинаться нумерованный список.</p> </li></li></ul> <p><b><ol></ol></b></p><p> Тег <ol> устанавливает нумерованный список. Каждый элемент списка должен начинаться с тега <li>. Если к тегу <ol> применяется таблица стилей, то элементы <li> наследуют эти свойства. </p><p> Атрибуты:</p> <ul> <li> <p> type – устанавливает вид маркера списка. </p> <li> <p> reversed – нумерация в списке становится по убыванию (3,2,1).</p> <li> <p> start – задаёт число, с которого будет начинаться нумерованный список.</p> </li></li></li></ul> <p><b> </b></p><p> Определяет текстовый абзац. Тег <p> является блочным элементом, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой отбивкой. Величиной отбивки можно управлять с помощью стилей. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.</p><p> Атрибуты:</p> <ul> <li> <p> align – определяет выравнивание текста. </p> </li></ul> <p><b><sub></sub></b></p></p></b></ul></li></li></li></ol></ol></ol></a> 