Будь умным!

У вас вопросы?
У нас ответы:) SamZan.net

Лабораторная работа 6 Создание htmlдокумента Цель работы- познакомиться с понятиями язык разметки тег

Работа добавлена на сайт samzan.net:


Информатика. Спецглавы. 2012

Лабораторная работа № 6

Создание html-документа

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

Задание

  1. Получите у преподавателя текст для создания html-документа, изучите его компоненты: заголовки, абзацы, списки, таблицы. Проанализируйте, какие приемы форматирования были применены (характеристики шрифта, абзацев).
  2. Определите, какие программы доступны для создания html-документа, для его просмотра (текстовый редактор, браузер).
  3. Откройте простейший текстовый редактор и введите полученный у преподавателя текст, при вводе  разбейте текст на абзацы, таблицу введите тоже как обычный текст. Сохраните файл с типом html — my_text.html. Чтобы сохранить текст с типом html, следует при сохранении указать тип файла html или Все файлы (и добавить к имени файла .html). Откройте созданный документ в браузере и сравните представление текста в браузере и редакторе. Сделайте выводы.
  4. В текстовом редакторе заготовьте пустой html-документ (только теги, образующие структуру документа), сохраните файл с именем my_base.html. Вставьте в него в тег <body> текст из my_text.html (в дальнейшем — основной текст). Сохраните и, не закрывая файл в текстовом редакторе, откройте его в браузере, сделайте выводы о представлении документа.
  5. Сделайте разбивку текста на блоки: отметьте заголовки, абзацы. Сохраните файл и проверьте в браузере, как изменилось его представление.
  6. Выполните разметку таблицы. Сохраните файл и проверьте в браузере отображение таблицы.
  7. Сделайте копию файла my_base.html и назовите ее my_format.html. Выполните форматирование символов с помощью полиграфических (физических) тегов (курсив, жирный, подчеркнутый, символы одинаковой ширины), добавьте верхний или нижний индекс, акроним, измените шрифт, цвет символов. Сохраните, проверьте правильность отображения элементов текста в браузере.
  8.  Создайте файл my_par.html (my_paragraph.html), скопируйте в него абзацы с заголовками. Выполните форматирование символов тегами логического форматирования таким образом, чтобы отображение текста в браузере не изменилось. Используйте не менее двух разных тегов для создания курсива.
  9.  Создайте файл my_table.html, поместите в него три копии таблицы с заголовком, таблицы расположите одну под другой. Отредактируйте заголовки: добавьте в заголовок текст Таблица 1, Таблица 2, Таблица 3. Измените содержимое ячеек: увеличьте или уменьшите объем текста.  Откройте документ с таблицами в браузере и сравните вид таблицы в основном документе и в my_table.html.  
  10. В my_table.html создайте гиперссылки на файлы my_format.html и my_par.html, аналогично в каждом их этих файлов создайте гиперрсылки на два других файла. Проверьте работу гиперссылок.
  11. В начале my_table.html создайте гиперссылку на вторую и третью таблицу этого же файла, гиперссылку для возврата в начало документа, гиперссылку на таблицу в  my_base.html.
  12. Поместите картинки в  my_table.html между таблицами, в my_par.html слева от заголовка, в my_base.html справа от абзаца.
  13.  Результат покажите преподавателю. Файл my_base.html сохраните для дальнейшей работы.

Образец текста для выполнения задания

Течения мирового океана

Летом 1881 года в Северном Ледовитом океане, к северо-востоку от Новосибирских островов, разыгралась трагедия: судно американской полярной экспедиции «Жанетта» было раздавлено льдами и затонуло. Три года спустя, в 1884 году, у юго-западных берегов Гренландии было найдено 58 различных предметов, принадлежащих этой экспедиции.

Плоды, растущие на Антильских островах, иногда обнаруживаются у берегов Шотландии и даже у берегов Шпицбергена. Пемзу, выброшенную при извержении вулкана Кракатау в Зондском проливе в 1883 году, моряки находили через год у берегов Мадагаскара и южной оконечности Африки.

Эти примеры говорят о передвижении воды в океанах от Новосибирских островов к южной оконечности Гренландии, от Антильских островов к Шпицбергену, от Зондского пролива к Мадагаскару. Такие перемещения воды в океанах на большие расстояния называются морскими течениями.

Течения Атлантического океана

Название

Скорость (км/сутки)

Температура воды

Где протекает

Северное пассатное

20-45

Тёплое

К северу от экватора, от Африки к Антильским островам

Гольфстрим

25-60

Тёплое

От берегов Америки на северо-восток

Северо-Атлантическое

20-45

Тёплое

Продолжение Гольфстрима к северо-западу Европы

Лабрадорское

15-60

Холодное

Вдоль северо-восточного берега Северной Америки

Справочный материал

Текстовый редактор для создания html-документа

  • ОС Mac OS X — Text Edit в режиме создания текстового документа
  • ОС Linux - Mousepad
  • ОС Windows - Блокнот

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

Документ в соответствии со срандартом HTML 4.01 состоит из трех частей:

  • строка, содержащая сведения об используемой версии языка   HTML вида

<!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.01 Transitional //EN”>, здесь 4.01 означает используемый стандарт  HTML,  Transitional — возможность использования в документе нерекомендованных элементов,

  • заголовок документа со служебной информацией — элемент <head>,
  • тело документа, содержащее информацию для пользователя — элемент <body>.

<!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.01 Transitional //EN”>

<html>

<head>

служебные теги

</head>

<body>

информация для пользователя, размеченная при помощи тегов

</body>

</html>

Служебные теги

<title>Заголовок</title> - текст, который браузер выведет при показе документа в заголовке своего окна.

<meta http-equiv=”Content-Type” content=”text/html; charset=Windows-1251”> - указание браузеру использовать при показе документа кодировку Windows.

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”> указание браузеру использовать при показе документа кодировку Linux или Mac OS X.

Теги для создания текстовых блоков

<p> </p> - абзац

<div> </div> текстовый блок

<blockquote> </blockquote> - длинная цитата

<h1> </h1> - заголовок

<h2> </h2> - заголовок

<h3> </h3> - заголовок

<h4> </h4> - заголовок

<h5> </h5> - заголовок

<h6> </h6> - заголовок

Полезные теги

<br> - перевод строки (непарный тег), не образует новый текстовый блок.

<img src=”my_picture.gif” align=”right”> - вставка рисунка из файла  my_picture.gif справа от текста.

<hr align=”left” size=”3” width=”70%” color=”red”> вставка горизонтальной полосы красного цвета толщиной 3 пикселя и длиной 70% от ширины экрана, выравнивание по левой границе.

Пример html-документа

<!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.01 Transitional //EN”>

<html>

<head>

<title>Заголовок</title>

</head>

<body>

<img src="../files/144/angel.gif" align=right>

<p>Эти примеры говорят о передвижении воды в океанах от Новосибирских островов к южной оконечности Гренландии, от Антильских островов к Шпицбергену, от Зондского пролива к Мадагаскару. Такие перемещения воды в океанах на большие расстояния называются морскими течениями.</p>

</body>

</html>

Создание списка

Маркированный список

Атрибут  type определяет маркер: ”disc” - закрашенный кружок (по умолчанию), ”circle” - незакрашенный кружок,  ”square” - закрашенный квадрат.

<ul type=”circle”>

<li>Текст 1

<li>Текст 2

<li>Текст 3

</ul>

Нумерованный список

Атрибут type задает вид нумерации элементов списка: 1 — арабские цифры (по умолчанию), A — прописные латинские буквы, a — строчные латинские буквы, I — римские цифры, записанные с помощью прописных букв, i — римские цифры, записанные с помощью строчных букв.  

<ol type=”a”>

<li>Текст 1

<li>Текст 2

<li>Текст 3

</ol>

Создание таблицы

Используются параметры по умолчанию:

<table>

<tr>

<th>Первый заголовок </th>

<th>Второй заголовок</th>

</tr>

<tr>

<td>Первая ячейка</td>

<td>Вторая ячейка</td>

</tr>

<tr>

<td>Третья ячейка, следующая - пустая</td>

<td>&nbsp;</td>

</tr>

</table>

Заданы параметры таблицы: border — толщина линий обрамления в пикселях,  width — ширина таблицы в пикселях (можно также задать в процентах от ширины экрана). 

<table border=2 width=250>

<tr>

<th>Первый заголовок</th>

<th>Второй заголовок</th>

</tr>

<tr>

<td>Первая ячейка</td>

<td>Вторая ячейка</td>

</tr>

<tr>

<td>Третья ячейка, следующая -

пустая</td>

<td>&nbsp;</td>

</tr>

</table>

 

5




1. Work here is public sector employment
2. Тема- Объект исследования-
3. Основные понятия надежности классификация отказов составляющие надежности- Основные понятия.html
4. Основы эксплуатации военной автомобильной техники
5. тематичний факультет ЗВІТ про виконання лабораторної роботи 23 Дії над матрицями
6. Частичные моносомии аутосом
7. Вариант выбирается по букве фамилии- АД ~ 1 вариант; ЕК ~ 2 вариант; ЛР ~ 3 вариант; СЦ ~ 4 вариант; ЧЯ ~ 5 вар
8. Задание
9. Тибетская книга мертвых
10. реферат дисертації на здобуття наукового ступеню кандидата медичних наук Київ ~
11. Культуротворчість смерті за концепцією Є
12. ТЕМА 7 СОВЕРШЕННАЯ КОНКУРЕНЦИЯ 7
13. О техническом регулировании а правила разработки постановлением Правительства Российской Федерации от
14. 072008 N 342 Зареєстровано в Міністерстві
15. Контрольная работа- Організація навчально-виховного процесу та педагогічна думка у другій половині XVIIXVIII століття
16. Роль государственного регулирования экономики [3] 2
17. UI GreenMetric World University Rnking
18. День Время Группа 584 Ауд
19. 14.3 Положення про студентське самоврядування в ЗНУ
20. Эпоха Петра Великого

Материалы собраны группой SamZan и находятся в свободном доступе