Создание простой HTML-страницы с гиперссылками
Структура HTML-документа, язык, отображение в окне браузера. Разработка тела документа, содержащего непосредственно отображаемую информацию или определяющего набор фреймов. Создание в редакторе "Блокнот" заготовки для всех новых HTML-файлов, сохранение.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | лабораторная работа |
| Язык | русский |
| Дата добавления | 30.09.2020 |
| Размер файла | 19,3 K |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Размещено на http://www.Allbest.Ru/
Размещено на http://www.Allbest.Ru/
Размещено на http://www.Allbest.Ru/
Федеральное агентство по образованию РФ
Томский университет систем управления и радиоэлектроники
Кафедра КСУП
ОТЧЁТ
по лабораторной работе
Создание простой HTML-страницы с гиперссылками
Выполнил Лобанов Е.Э.
студент гр. 24-058 З/Ф
Проверил доцент Губин И.Г.
Томск 2020
Цель работы:
Практическая работа по созданию простой HTML-страницы гиперссылками.
Используемое методическое и программное обеспечение:
Учебное и учебно-методическое пособия, текстовый редактор "Блокнот".
1. Описание используемых в лабораторной работе элементов HTML
1. Структура HTML-документа
Любой документ HTML состоит из трех частей:
1. Строки, содержащей информацию о версии HTML.
2. Блока заголовка документа.
3. Тела документа, либо содержащего непосредственно отображаемую информацию, либо определяющего набор фреймов.
Вторая и третья части должны быть вложены в контейнер HTML. При этом указывать явно контейнеры для документа, его заголовка и тела нет надобности: если они опущены, подразумевается, что браузер сам определит, где что находится. Поэтому и открывающие, и закрывающие теги для этих элементов отмечены как опциональные. Тем не менее "правила хорошего тона”требуют, чтобы эти теги все-таки присутствовали. Для всех остальных элементов HTML открывающий тег обязателен. Для XHTML-документов закрывающий тег обязателен для всех без исключения элементов, более того, все теги и атрибуты должны быть набраны в нижнем регистре.
2. Информация о версии, типе документа HTML, языке
Любой действительный документ HTML 4.0 должен содержать информацию о версии языка HTML, используемого в документе. Существуют три типа документов:
1. HTML 4.0 Strict - такой документ не должен содержать отмененных элементов и атрибутов и не должен быть контейнером для фреймов.
2. HTML 4.0 Transitional - более "мягкое" определение.
Может содержать все то, что и HTML 4.0 Strict, а также отмененные элементы и атрибуты.
3. HTML 4.0 Frameset - указывает на то, что данный документ является контейнером для набора фреймов.
язык структура документ фрейм браузер
3. Элемент HTML
После строки с информацией о версии весь остальной документ должен быть заключен в контейнер HTML. Текст, помещенный вне этого элемента, может игнорироваться браузером.
Пример:
<HTML>
<HEAD>
<TITLE>3aголовок</TITLE>
</HEAD>
<BODY>
<Р>Тело документа…
</BODY>
</HTML>
Закрывающий и открывающий теги: опционально.
Совместимость: все.
Собственные атрибуты:
VERSION - указывает версию HTML. Отменен. Используйте !DOCTYPE.
Общие атрибуты:
LANG - информация о языке.
DIR - направление текста.
4. Элемент HEAD
Данный элемент содержит информацию о текущем документе, такую, как заголовок, ключевые слова и иную информацию, которая не должна отображаться в документе.
Браузеры не должны отображать информацию, помещенную в контейнер HEAD, однако могут ее использовать для каких-либо иных целей.
Пример:
<HEAD>
<Т1ТLЕ>Заголовок</ТIТLЕ>
<МЕТА NAME="Keywords" CONTENT="компьютеры, программы">
</HEAD>
Закрывающий и открывающий теги: опционально.
Совместимость: все.
Собственные атрибуты:
PROFILE - указывает расположение одного или нескольких файлов, содержащих определения МЕТА.
Общие атрибуты:
LANG - информация о языке.
DIR - направление текста.
5. Элемент TITLE
Каждый действительный документ HTML должен иметь элемент TITLE в части HEAD.
Этот элемент используется для определения содержания документа. Большинство броузеров отображают строку, размещенную внутри элемента TITLE в качестве заголовка окна. Хотя явных ограничений на длину текста не имеется, реально следует ограничиваться 40...50 символами.
Пример:
<ТIТLЕ>Моя главная страница</ТIТLЕ>
Закрывающий тег: требуется.
Совместимость: все.
Общие атрибуты:
LANG - информация о языке.
DIR - направление текста.
6. Элемент BODY
Контейнер BODY охватывает все содержимое документа, которое должно быть представлено пользователю. Если документ является контейнером для фреймов, то он не должен содержать элемента BODY.
Пример:
<BODY>
Очень маленький документ.
</BODY>
Закрывающий тег: опционально (требуется, если указан открывающий).
Совместимость: всё.
Если вы хотите создать более корректный документ HTML, то используйте для этих целей таблицы стилей:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<HTML>
<HEAD>
<TITLE> Оформление документа по всем правилам </TITLE>
<STYLE TYPE="text/css">
BODY { background: #FFFFC4; color: #000000; }
A:link { color: #FF0000;}
A:visited { color: #800000;}
A:active { color: #00FF00;}
</STYLE>
</HEAD>
<BODY>
...тело документа...
</BODY>
</HTML>
Общие атрибуты:
ID, CLASS - идентификаторы элемента.
LANG - информация о языке.
DIR - направление текста.
TITLE - заголовок элемента.
STYLE - встроенная информация CSS.
ONLOAD, ONUNLOAD - события, происходящие при за
грузке и выгрузке документа.
ONCLICK, ONDBLCLICK, ONMOUSEDOWN, ONMOUSEUP, ONMOUSEOVER, ONMOUSEMOVE, ONMOUSEOUT, ONKEYPRESS, ONKEYDOWN, ONKEYUP - события, происходящие во время работы пользователя с документом.
7. Заголовки - элементы H1, H2,…H6
Элементы заголовка служат для выделения названия разделов документа.
Существует шесть уровней заголовка. Чем меньше число, указывающее уровень, тем более значимым является заголовок. Иначе говоря, H1 указывает на самую главную тему, а Н6 - на наименее значимую.
Пример:
<Н1>Домашние животные</Н1>
Рассказываем о домашних животных вообще
<Н2>Собаки</Н2>
Общее о собаках
<НЗ>Овчарки</НЗ>
Таким образом можно наглядно создавать иерархическую
структуру документа. До и после заголовка браузер разрывает
текст аналогично абзацу.
8. Ссылки - элемент А
Элемент А, или якорь, служит для создания ссылок. Вложение элементов А недопустимо.
В зависимости от того, с каким атрибутом этот элемент используется, он будет являться либо источником, либо местом назначения:
Если указан атрибут HREF, то элемент А является источником, или, как это чаще называют, самой ссылкой.
Если указан атрибут NAME, то элемент А является назначением для произвольного числа ссылок.
Пример:
<A HREF="http://www.snkey.net">SNK Software</A>
<А HREF="mailto:help@host.ua">Щелкните, чтобы послать письмо!</А>
В первой строке мы создали ссылку на http://www.snkey.net, текст которой будет выглядеть как SNK Software. Во второй - ссылку на адрес электронной почты.
Закрывающий тег: требуется.
Совместимость: все.
Собственные атрибуты:
NAME - присваивает уникальное ссылке имя и указывает, что данный элемент А является пунктом назначения для других ссылок. Аналогичен ID.
HREF - задает URI ресурса, на который должен перейти пользователь, активизировав данный элемент А. Этот атрибут может указывать как на внешний документ, так и на какой-либо пункт назначения внутри данного документа (заданного при помощи NAME).
HREFLANG - указывает язык, на котором составлен документ-назначение. Может использоваться только вместе с HREF(Netscape 6, MSIE 5).
TYPE - указывает на тип содержимого документа назначения, например "text/html".
9. Параграфы - элемент Р
Элемент Р определяет параграф. Он не может содержать в себе иные элементы уровня блока, включая DIV, списки и вложенные элементы Р. Как правило, браузеры создают отступ высотой приблизительно в одну строку между параграфами. Элемент Р не может быть пустым (т.е. должен содержать какой-либо текст, рисунок и т.п.), поскольку браузеры игнорируют пустые параграфы.
Пример:
Р>Первый параграф.
P>Второй параграф. </Р>
P>Третий <Р>Недопустимо!</Р> параграф</Р>
В третьей строке выполнена недопустимая попытка создать "вложенный" параграф.
При интерпретации такого кода браузер воспримет слово "Третий" как отдельный параграф, "Недопустимо!" будет четвертым, а последний закрывающий тег </Р> окажется потерявшимся и может вызвать ошибки при интерпретации дальнейшего содержимого документа.
Закрывающий тег: опционально.
Совместимость: все.
Собственные атрибуты:
ALIGN - отменен. Задает выравнивание параграфа. Может принимать значения:
Center - выровнять по центру.
Left - выровнять по левому краю.
Right - выровнять по правому краю.
Justify - выровнять по обоим краям (по ширине).
Общие атрибуты:
ID, CLASS - идентификаторы элемента.
LANG - информация о языке.
DIR - направление текста.
TITLE - заголовок элемента.
STYLE - встроенная информация CSS.
ONCLICK, ONDBLCLICK, ONMOUSEDOWN, ONMOUSEUP, ONMOUSEOVER, ONMOUSEMOVE, ONMOUSEOUT, ONKEYPRESS, ONKEYDOWN, ONKEYUP - события, происходящие во время работы пользователя с документом.
10. Элемент МЕТА
Элемент МЕТА используется для включения различной информации о документе, а также предоставляет возможность сообщать дополнительные инструкции как клиентской части (браузеру), так и серверной. Он используется в форме "свойство - значение".
Например, чтобы указать автора документа, используется следующая конструкция:
<МЕТА NAME="Author" CONTENT="Василий Иванов">
В данном случае определяется свойство (автор), которому присваивается значение (Василий Иванов). Вы можете определять любые свойства и присваивать им любые значения. Вместе с тем ряд свойств являются общепринятыми:
1. Author - автор документа.
2. Copyright - информация об авторском праве.
3. Description - описание документа (для поисковых машин).
2. Описание последовательности выполнения лабораторной работы
(В этом разделе должны быть подробно описаны в хронологическом порядке все действия по выполнению задания по лабораторной работе).
1. Создаем на жёстком диске каталог "C:\MyWeb", в котором будут храниться все HTML-файлы.
2. В редакторе "Блокнот" создаём заготовку для всех новых HTML-файлов следующего содержания:
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
</BODY>
3. Сохраняем этот документ под именем "index.htm".
(Дальше вы должны привести описание остальных пунктов выполнения лабораторной работы).
3. Результаты работы
В результате выполнения лабораторной работы были изучены структура HTML-документа, элементы языка HTML - HEAD, TITLE, BODY, заголовки (H1, H2,…H6), А, P и создана титульная страница HTML-документа со ссылками на другие страницы.
Примечание. В ТМЦДО необходимо отправить:
1. Отчёт по лабораторной работе №1 - текстовый файл в формате Word.
2. HTML-файлы (welcome.html, study.html about_me.html, hobby.html, address.html).
Размещено на allbest.ru
...Подобные документы
Цели, задачи и компоненты информационной технологии управления. Разработка структуры сайта и программный код работы в HTML–редакторе: создание титульной страницы, документа с фреймами, связь информационных документов с помощью гипертекстовых ссылок.
курсовая работа [34,3 K], добавлен 11.08.2011Понятие об html. Структура файла в формате html. Отличительный признак html-документа. Гипертекстовые ссылки. Создание документов в стандарте html. Заголовки. Форматирование текста и изменение стилей. Фреймы.
реферат [23,7 K], добавлен 17.08.2007Hyper Text Markup Language (html) как стандартный язык для создания гипертекстовых документов в среде web. Тэги списков, гипертекстовые ссылки, графика внутри документа, специальные тэги html и таблицы. Планирование фреймов. Этапы создания сайтов.
контрольная работа [126,9 K], добавлен 18.11.2010Структура HTML–документа. Синтаксис записи тега. Обозначение цветов в шестнадцатеричной системе счисления. Формат задания и параметры таблицы в документе, параметры её заголовка, строк и ячеек, группирование столбцов. Наследование свойств выравнивания.
курсовая работа [318,8 K], добавлен 03.01.2014Понятие, сущность и особенности применения языка HTML, а также структура его документа. Рекомендации по созданию сайтов в интернете. Общая структура и порядок оформления гипертекстов, записанных в языке HTML, примеры отображения их в браузере компьютера.
контрольная работа [29,4 K], добавлен 12.09.2010Цель и место размещения документа Web. Язык гипертекстовой разметки. Сценарий и структура Web-документа. Основные редакторы гипертекста. Создание документов в стандарте HTML. Создание заголовков, форматирование и изменение стиля, нумерация списков.
реферат [34,4 K], добавлен 22.11.2009Создание web-сайта "Мастер по обработке цифровой информации" на языке программирования HTML. Структура и тэги тела документа. Исследование программ, с помощью которых можно написать web-страницы. Особенности работы с файлами разных форматов и расширений.
курсовая работа [144,2 K], добавлен 31.10.2013Создание сайта при помощи HTML и CSS. Язык гипертекстовой разметки HTML и таблица стилей CSS. Основные понятия об этих языках, этапы и алгоритмы программного обеспечения. Добавление стилей в документ. Свойства элементов, принцип построения Web-страницы.
курсовая работа [2,9 M], добавлен 12.01.2016Разработки британского учёного Тима Бернерсом-Ли. HTML как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. Структура HTML-документов и основные теги на языке HTML.
курсовая работа [820,3 K], добавлен 03.03.2011Характеристика принципов создания html-страниц и связывания их ссылками так, чтобы можно было произвольным образом переходить от одной страницы к другой. Применение тегов форматирования текста и заголовка окна. Этапы создания html-страницы с таблицей.
контрольная работа [16,0 K], добавлен 19.06.2014Термин HTML (HiperText Markup Language) и его реализация. Программы просмотра страниц написанных на зыке манипулирования гипертекстами. Характеристика специальных программ – браузеров: Google Chrome, Opera, Mozilla Firefox. Структура HTML-страницы.
контрольная работа [118,8 K], добавлен 05.04.2015История html. Гипертекст. Структура web-страницы. Переход внутри одного документа. Переход к другому документу. Правила синтаксиса. Кодирование символов. Использование символов. Управление цветом. Конструктор документов. Способы определения таблиц стилей.
дипломная работа [911,3 K], добавлен 25.02.2005Общая характеристика языка разметки гипертекста Hypertext Markup Language. Структура HTML-документа. Обзор основных возможностей HTML. Элементы современного дизайна Web-страниц. Анализ практического применения HTML (на примере обучающих программ).
курсовая работа [47,9 K], добавлен 24.11.2012Преимущества использования Word при создании веб-страниц. Его публикация Word в библиотеке документов. Преобразование документа Word в веб-страницу. Функции HTML-конвертора Word97. Пересмотр документа Word и веб-страницы. Отображение закладок в документе.
реферат [23,6 K], добавлен 06.04.2010Специальные разметочные указатели (теги) языка HTML. Основные правила написания тегов. Структура HTML-файлов. Внесение изменений и способы обновления Web-сайта. Необходимые атрибуты для создания на Web-странице бегущей строки и вставки рисунков.
презентация [439,3 K], добавлен 29.01.2014Вступ в мову HTML. Структура HTML-документа. Встановлення кольору фону та тексту, створення заголовка. Графіка і посилання на WEB-сторінці, вставка малюнків. Оформлення таблиць та форматування комірок. Комплексна лабораторна робота "Створення HTML-файла".
методичка [147,3 K], добавлен 15.06.2009Язык разметки гипертекстовых страниц HTML. Обеспечение доступности Web-страницы, представление текста и графики. Основные правила и этапы создания сайта, выбор структуры страницы. Оценка экономической целесообразности использования HTML-редакторов.
дипломная работа [86,7 K], добавлен 25.03.2013Понятие интеллектуального пространства, объекты изучения в онтологии. Разработка Web-сайта на тему "Онтологии в информатике". Описание логической и физической структуры сайта, шаблон дизайна его страниц, тестирование. Исходный текст шаблона html-страницы.
курсовая работа [4,7 M], добавлен 14.07.2012Применение многоязычного текста. Структура HTML документа. Элементы стиля шрифтов. Разделы, заголовки и горизонтальные линии. Термин и его определение. Изменение основного шрифта. Комментарии, оформление цитат, разрывы строк и цветовые спецификации.
презентация [672,5 K], добавлен 22.06.2014Основные теги и атрибуты языка HTML. Создание web-сайта, который должен представлять собой несколько связанных между собой страниц. Рассмотрение различных значений атрибутов и тегов на страницах и в других документах. Экранные формы разработанных страниц.
лабораторная работа [1,2 M], добавлен 16.04.2014
