- •Практическая работа. «Разработка гипермедиальных приложений с использованием языка html. Ход работы.
- •Сначала введите теги, определяющие структуру любого –документа (используйте любой регистр – верхний или нижний).
- •Задание стилей текста:
- •Вставка рисунка.
- •Создание списка.
- •Создание формы:
- •Вставка гипертекстовых ссылок.
- •Создание таблицы.
- •Создание страницы с фреймами.
- •Введение в гипертекст и гипермедиа
- •Язык html представления гипермедиальных документов
- •Структура.
- •3. Каскадные страницы стилей css
Практическая работа. «Разработка гипермедиальных приложений с использованием языка html. Ход работы.
-
Создайте папку WEB.
-
Запустите текстовый редактор Блокнот : Пуск Программы Стандартные Блокнот.
-
Сначала введите теги, определяющие структуру любого –документа (используйте любой регистр – верхний или нижний).
-
Введите с клавиатуры основные теги, поместив каждый из них, кроме закрывающего тега </title>, в новой строке.
-
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
-
Между <title> </title> вставьте название документа – Группа КМ. Это должно выглядеть следующим образом:
<title> Группа КМ </title>
-
Вставьте пустую строку между тегами <body> и </body> и введите в ней следующий текст:
Добро пожаловать на страничку группы Км! Здесь вы узнаете о нашей учебе и жизни в колледже.
-
Добавьте ваш личный текст – несколько предложений. Перед тем предложением, которое вы хотите перенести на следующую строку ставьте тег <BR>-перевод строки.
-
Перед этим текстом и после него проведите горизонтальную линию, используя тег <hr>, этот тег не является парным, поэтому не требует закрывающего тега.
-
Пусть фон нашей странички будет синий, а для текста – желтый. Вставьте в открывающий тэг <body> атрибуты bgcolor=blue и text=yellow, это будет выглядеть так:
<body bgcolor=blue text=yellow>
-
Сохранить документ: Файл Сохранить как Открыть вашу папку WEВ в поле имя файла введите Км.html (расширение html обязательно).
-
Просмотрим результат нашей работы: Сверните окно Блокнот найдите папку WEВ на имени вашего файла двойной щелчок.
-
Просмотрев результат сверните окно браузера.
-
Задание стилей текста:
Чтобы страница выглядела более привлекательно, разделим текст на абзацы и выделим заголовок к. HTML имеет 6 уровней заголовков разделов документа, пронумерованных цифрами от 1 до 6.Заголовок объявляется парой тегов с номерами, соответствующими уровню, например <h1></h1> - заголовок раздела первого уровня. От нормального текста заголовок отличается размером и толщиной букв.
-
Вставьте теги <h1></h1> так, чтобы они ограничивали первое предложение текста:
<h1> Добро пожаловать на страничку группы Км! </h1>
-
Просмотрим результат: Сохраните файл в блокноте а в окне браузера кнопку обновить, файл будет пере загружен.
-
Посмотрите как будут выглядеть заголовки, если вы будете менять уровень заголовка с h1 на h2 и до h6, не забывайте сохранять файл и обновлять в браузере.
-
Восстановите первый уровень заголовка.
-
Центрируйте заголовок, добавьте атрибут align=center
<h1 align=center > Добро пожаловать на страничку группы Км! </h1>
-
Увеличим размер остального текста и оформим его полу жирным курсивным начертанием. Для этого используйте парные теги <b> </b>
-
Проверьте результат.
-
Курсивное начертание устанавливается с помощью тегов <i></i>
-
Оставьте оба тега и проверьте результат.
-
С помощью тегов <u></u>установите подчеркнутое начертание
-
С помощью тегов <tt></tt>изобразите текст телетайпным шрифтом.
-
Оставьте тот вид, который нравится вам.
-
Увеличьте размер шрифта с помощью тега <big></big>
-
Уменьшить размер шрифта с помощью тега <small></small>
-
Другой способ изменения размер шрифта с помощью тега <font=1></font>, проверьте при разных значениях атрибута от 1 до 7. Можно со знаком + или -, в этом случае размер увеличивается или уменьшается по сравнению с исходным.
-
Центрируем по горизонтали данный абзац с помощью тега <center></center>
-
В своей работе вы можете использовать следующие теги, определяющие логические стили, Проверьте, как они работают.
<dfn></dfn> — применяется для определения слова. Текст обычно выводится курсивом,
<em></em> - для выделения слов и усиления. Отображается курсивом.
<cite></cite> - для выделения названий книг, фильмов, спектаклей и т.д. Выводится курсивом.
<code></code> - для фрагментов кода программ. Показывается на экране шрифтом фиксированной ширины.
<kbd></kbd> - используется для текста, который пользователь вводит с клавиатуры. В разных браузерах может отображаться разными шрифтами.
<samp></samp> - служит для отображения сообщений программ. Выводится шрифтом фиксированной ширины.
<strong></strong > - для особо важных фрагментов. Обычно выделяется полужирным начертанием.
<var></var> - используется для указания, что часть текста или слово является символьной переменной, т.е. текстом, который может быть заменен различными выражениями. Отображается курсивом.
Спецификация HTML 4.0 предлагает более прогрессивный способ указания стилей текста и других элементов - с помощью специального языка каскадных таблиц стилей СSS (Cascading Style Sheets). Таблицы стилей - это большое достижение в области Web дизайна, расширяющее возможности улучшения внешнего вида страниц. Таблицы стилей упрощают определение интервалов между строками, отступов, цветов, используемых для текста и фона, размера и стиля шрифтов и т.д. Стиль большинства элементов HTML может описываться с помощью атрибута style, который располагается внутри открывающего тега элемента. В качестве значения атрибута style используются пары вида «свойство: значение». Например, во фрагменте кода, описывающего заголовок раздела <hl style="color: blue"> атрибут style="color: blue" определяет, что свойство color (цвет) имеет значение blue (синий), т.е. текст заголовка первого уровня должен отображаться синим цветом.
-
Можно указывать стили с помощью специального языка каскадных таблиц стилей (CSS – Cascading Style Sheets). Отредактируйте текст, удалив предыдущие теги и вставив теги <p>и </p> с атрибутом так, чтобы этот элемент имел вид:
<p style=”font-weight: bold; font-style:italic; font-size:150%; text-align: center”> и в конце текста </p>.
font-size –можно указать в относительных и абсолютных величинах, относительные – это проценты, абсолютные – пункты (pt), пикселы (px), сантиметры (cm), миллиметры (mm).