Лабораторная работа язык разметки гипертекста html

Лабораторная работа 12 Знакомство с языком разметки гипертекста html

Задание. Изучить теоретический материал и выполнить задания 1–12.

Редакторы HTML-документов 3

Структура HTML-документа 4

Информация о документе в секции заголовка 4

Форматирование символов 6

Представление цветов в HTML-документах 7

Цвета основного текста и фон документа 7

Графические изображения 9

Заголовки разных уровней внутри текста 12

Одним из основных сервисов Интернет можно считать службу World Wide Web (WWW). Информация в WWW представлена в виде гипертекстовых (или, более широко, гипермедийных) документов, которые могут содержать отформатированный текст, графику, аудио- и видеофрагменты. Основной особенностью гипертекстовых документов является наличие активных зон, чувствительных к щелчку мыши. Активными могут быть фрагменты текста, целые изображения и их части; щелчок по активной зоне вызывает загрузку связанного с этой зоной (целевого) документа.

Гипертекстовые документы представляют собой текстовые файлы, размеченные в соответствии со стандартами языка HTML (HyperText Markup Language – язык разметки гипертекста). Говоря о таких файлах, употребляют разные термины: HTML-файл, HTML-документ, HTML-страница, Web-стра­ница, WWW-страница и т.д. Совокупность HTML-фай­лов, посвященных определенной теме, оформленных в едином стиле и связанных друг с другом гиперссылками, представляют собой Web-сайт.

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

Стандарты языка html

Язык разметки гипертекстовых документов HTML представляет собой совокупность команд, называемых тегами (от англ. tag). Встречающиеся в тексте документа HTML-теги интерпретируются браузером при отображении документа. Ряд тегов указывает браузеру, как надо отформатировать текстовый фрагмент (они задают размер, цвет, начертание, выравнивание текста). Другие теги определяют графическое оформление (фон документа, вставка изображений), задают активные зоны и т.д. Каждый из многих десятков тегов позволяет задать какие-то параметры отображения документа.

Синтаксис и семантика языка HTML определяются в стандарте HTML. Стандарты разрабатываются на основании многочисленных предложений, проходят ряд стадий. Разработка проводится группой под эгидой World Wide Web Consortium (W3C).

Основными вехами на пути развития стандартов HTML можно считать принятие стандартов HTML 1.0, HTML 2.0, HTML 3.2, HTML 4.01. Каждый вновь принимаемый стандарт предоставляет в распоряжение web-мастера новые теги, позволяющие сделать HTML-до­ку­мент эффективным и внешне привлекательным.

Источник

Лабораторная работа №1 Язык гипертекстовой разметки html

Цель работы: ознакомиться с основными тегами и атрибутами языкаHTML, структурой документа, получить практические навыки создания веб-страниц.

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

Веб-страница— гипертекстовый ресурс, обычно написанный на языке HTML.

Вёрстка веб-страниц— процесс формирования веб-страниц в текстовом либо WYSIWYG-редакторе, а также результат этого процесса, то есть собственно веб-страницы.

Обычно файл Веб-страницы имеет расширение .htmlили.htm.

Структура html документа

Любой HTML-файл состоит из трех разделов — элемента , заголовка (head>) и тела документа (body>).

Пример 1. Простейший HTML-документ

Блочные и инлайновые элементы

Блочные элементыотображаются в виде прямоугольников, выстраивающихся друг под другом и, обычно, занимают всю доступную область по ширине. Типичным примером блочного элемента является абзацp или простой тегdiv.

Инлайновые элементыотображаются в общем потоке текста и имеют минимальные размеры, которые допускает их содержание. Примерами инлайновых элементов являются тегиb, i, a, span.

В отличнии от блочных элементов, инлайновые не имеют жестких линейных размеров, не могут иметь границы, а также внутренних и внешних отступов. То есть конструкция типа не приведет к появлению границы у элемента. При этом инлайновые элементы складываются на странице построчно, и если очередной инлайновый элемент не помещается в остаток строки, то его контент частично переносится на следующую строку. Блочные элементы складываются «в столбик».

Основные теги Тег html

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

Тег head

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

Содержимое тега не отображается напрямую на веб-странице, за исключением тега устанавливающего заголовок окна веб-страницы.

Тег body

Элемент предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера body. К такой информации относится текст, изображения, теги, скрипты JavaScript и т.д.

Вставка изображений

Тег предназначен для отображения на веб-странице изображений в графическом формате gif, jpeg или png. Этот тег имеет единственный обязательный параметр src, который определяет адрес файла с картинкой. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег в контейнер

Разметка текста

br— устанавливает перевод строки в месте, где этот тег встречается.

div— является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого.

h1. h6— HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег H1 представляет собой наиболее важный заголовок первого уровня, а тег H6 служит для обозначения заголовка шестого уровня и является наименее значительным.

hr— рисует горизонтальную линию, которая по своему виду зависит от используемых параметров, а также браузера.

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

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

pre — определяет блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами.

span — предназначен для определения встроенных элементов документа.

Форматирование текста

b— устанавливает жирное начертание шрифта. Допустимо использовать этот тег совместно с другими тегами, которые определяют начертание текста.

big— увеличивает размер шрифта на единицу по сравнению с обычным текстом.

blockquote— предназначен для выделения длинных цитат внутри документа. Текст отображается как выровненный блок с отступами слева и справа, а также с отбивкой сверху и снизу.

code— предназначен для отображения одной или нескольких строк текста, который представляет собой программный код. Сюда относятся имена переменных, ключевые слова, тексты функции и т.д.

em— предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.

font— представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитуры. Хотя этот тег до сих пор поддерживается всеми браузерами, он считается устаревшим и от его использования рекомендуется отказаться в пользу стилей.

i— устанавливает курсивное начертание шрифта. Допустимо использовать этот тег совместно с другими тегами, которые определяют начертание текста.

small— уменьшает размер шрифта на единицу по сравнению с обычным текстом.

strike— отображает текст как перечеркнутый. Этот тег аналогичен тегу S, который имеет сокращенную форму записи.

strong— предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.

sub— отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера.

sup— отображает шрифт в виде верхнего индекса. Шрифт при этом отображается выше базовой линии текста и уменьшенного размера.

dd — входит в тройку элементовdl, dt, dd, предназначенных для создания списка определений.

dl — входит в тройку элементовdl, dt, dd,предназначенных для создания списка определений.

dt — входит в тройку элементовdl, dt, dd,предназначенных для создания списка определений.

li— определяет отдельный элемент списка. Внешний тегul илиol устанавливает тип списка — маркированный или нумерованный.

ol — определяет нумерованный список. Каждый элемент списка должен начинаться с тегаli.

ul — определяет маркированный список. Каждый элемент списка должен начинаться с тегаli.

a— является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия параметровidили href тегaустанавливает ссылку или якорь.

Источник

Язык разметки гипертекста — html

Практическая работа № 1. Создание простейшей Web-страницы

Цель работы: освоение приема создания документа HTML, знакомство с особенностями форматирования документов HTML и их отображения при помощи обозревателя Internet Explorer.

1. Создайте в Вашей рабочей папке — подпапку Web, в этой папке должны хранится ВСЕ созданные файлы, которые будут созданы в процессе выполнения практических работ
2. Запустите текстовый редактор Блокнот (Пуск/ Программы / Стандартные / Блокнот). Уменьшите окно редактора так, чтобы оно стало занимать 1/4 часть экрана монитора.
3. Введите следующий документ:

1. Рис. 1

   Сохраните этот документ под именем first.htm. Убедитесь, что в поле Тип файла выбрано Все файлы(*.*) (рис.1), так как необходимо сохранить наш файл first только с расширением .htm (иначе редактор Блокнот автоматически добавить в конец имени расширение .ТХТ). Сверните окно редактора Блокнот, но не закрывайте.

2. Запустите программу Internet Explorer (Пуск/Программы/Internet Explorer). Окно редактора Internet Explorer восстановите во весь экран.
3. Дайте команду Файл / Открыть…. Щелкните на кнопке Обзор… и откройте файл first.htm.
4. Посмотрите, как отображается этот файл – корректный простейший документ HTML. Где отображается содержимое элемента TITLE? Где отображается содержимое элемента BODY?
5. Как отображаются слова «Содержание» и «документа», введенные в двух отдельных строчках? Почему? Т.е. получилось, что редактор Internet Explorer игнорирует разного рода отступы, концы строк и множественные пробелы. В принципе, текст можно рассматривать как одну длинную строку. Для того чтобы разбить текст на отдельные абзацы необходимо вставить определенные теги, они будут изучены в последующих практических работах. Проверьте, что происходит при уменьшении ширины окна.
6. Вернитесь в окно редактора Блокнот, но при этом не закрывайте окна редактора Internet Explorer. Добавьте после фразы «Содержание документа» Ваши фамилию, имя и отчество. Сохраните файл под прежним именем first.htm. Вернитесь в окно редактора Internet Explorer и нажмите кнопку Обновить на панели инструментов. Таким переходом между двумя редакторами мы будем изучать правила языка HTML.
7. ВСЕГДА СОХРАНЯЙТЕ ДОКУМЕНТ В БЛОКНОТЕ ПРЕЖДЕ ЧЕМ ПРОСМОТРЕТЬ ЕГО В INTERNET EXPLORER.
8. Практически все теги языка HTML имеют атрибуты, которые записываются после имени тега, например атрибут BGCOLOR тега устанавливает цвет фона Web-страницы.
9. Измените написание тега с на ; добавьте свое содержание между тегами:

И днем и ночью кот ученый ….

1. Сохраните в редакторе Блокнот и переходите в Internet Explorer, обновите содержимое окна. Как отображается наше стихотворение? Форматирование текста описано во второй практической работе.

1. В каком приложении создается HTML-документ?
2. Какое расширение имеет HTML-документ?
3. Какая программа запускается при открытии HTML-документа через Мой компьютер?
4. Как открыть произвольный HTML-документ в InternetExplorer?
5. Что такое ТЕГ? Приведите для примера 3 тега?
6. Приведите пример атрибута. Что он означает и где он записывается?
7. Что редактор игнорирует?
8. Как обновить представление HTML-документа в окне InternetExplorer?

Источник