Html практические задания: Практикум | htmlbook.ru – Задачник HTML+CSS от Трепачёва Дмитрия

Leave a Comment / Html / By /

Содержание

Изучени HTML. Практические занятия — Упражнение 1.

Изучени HTML. Практические занятия - Упражнение 1.

0_HTML

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

  1. Откройте текстовый редактор Notepad++. Этот редактор мы будем использовать вместо стандартного блокнота. Преимущество состоит в том, что HTML код написанный в этом редакторе подсвечивается разными цветами.
  2. Наберите следующий HTML-код:

[raw]



<HTML>
<HEAD>
<meta charset="UTF-8">
<TITLE >Упражнение1</TITLE> 
</HEAD>
<BODY> 
 
Тестовый текст для проверки шрифта.
---------------------------------------------------------------------------
Тестовый текст для проверки шрифта.
Тестовый текст для проверки шрифта.
Тестовый текст для проверки шрифта.
Тестовый текст для проверки шрифта.
---------------------------------------------------------------------------
 
Тестовый текст для проверки шрифта.
 
Тестовый текст для проверки шрифта.
 
 
Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.

Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.

Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.
 
</BODY> 
</HTML>

[/raw]

 

  1. Сохраните файл под именем upr1.html
  2. Откройте файл в браузере.
  3. Вы должны увидеть примерно такой результат: 001
  4. Несмотря на то, что текст между <body> и </body> был набран в несколько строк, в браузере всё выводится одним сплошным абзацем.
  5. Оказывается браузер игнорирует все переносы строк. Начало и конец каждого абзаца приходится указывать вручную.
  6. Дело в том, что различные операционные системы могут отображать одну и ту же информацию по-разному. И для того, чтобы увидеть страницу так, как её задумал разработчик необходимо писать HTML-код.
  7. Все абзацы, заголовки переносы строк. Всё указывается с помощью тегов.
  • Откройте файл upr1.html в редакторе Notepad++ (если он был закрыт). Для этого можно щёлкнуть по нему правой клавишей и выбрать Edit with Notepad++. Измените его в соответствии с образцом

[raw]



<HTML>
<HEAD>
<TITLE >Упражнение1</TITLE> 
</HEAD>
<BODY> 

<h2>Тестовый текст для проверки шрифта.</h2>

<hr>

<p>
Тестовый текст для проверки шрифта.<br>
Тестовый текст для проверки шрифта.<br>
Тестовый текст для проверки шрифта.<br>
Тестовый текст для проверки шрифта.
</p> 

<hr>

<h3>Тестовый текст для проверки шрифта..</h3>
 
<h4>Тестовый текст для проверки шрифта.</h4>
 
<p>
Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.
</p> 
<p>
Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.
</p> 
<p>
Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.
</p> 
<p>
Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.
</p>
 
</BODY> 
</HTML>

[/raw]

 

  • У вас должно получиться следующее: 002
  • Теги, которые вы использовали:

[raw]

<h2>   </h2>Заголовок первого уровня (всего бывает 6)
<h3>   </h3>Заголовок второго уровня (всего бывает 6)
<h4>   </h4>Заголовок третьего уровня (всего бывает 6)
<p>   </p>Абзац.
<br>Переход на новую строку. При этом новый абзац не создаётся.
<hr>Вставка горизонтальной линии

[/raw]

 

  • Откройте файл upr1.html в редакторе Notepad++ (если он был закрыт). Для этого можно щёлкнуть по нему правой клавишей и выбрать Edit with Notepad++. Измените его в соответствии с образцом

 

[raw]



<HTML>
<HEAD>
<TITLE >Упражнение1</TITLE> 
</HEAD>
<BODY> 
 
 
 
 
<h2>Тестовый текст для проверки шрифта.</h2>

<hr>
 
<b>Тестовый текст</b> для проверки шрифта.<br>
<b>Тестовый текст</b> для проверки шрифта.<br>
<b>Тестовый текст</b> для проверки шрифта.<br>
<b>Тестовый текст</b> проверки шрифта.
 

<hr>
 

<h3>Тестовый текст для проверки шрифта.</h3>
 

<h4>Тестовый текст для проверки шрифта. <u>Вашего времени</u></h4>
 

<p>
Тестовый текст для проверки шрифта. <i>Тестовый текст для проверки шрифта.</i> Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.
</p>
<p>
Тестовый текст для проверки шрифта. <b>Тестовый текст для проверки шрифта.</b> Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.
</p> 
<p>
Тестовый текст для проверки шрифта. <u>Тестовый текст для проверки шрифта.</u> Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.
</p>
<p>
Тестовый текст для проверки шрифта. <b><u><i>Тестовый текст для проверки шрифта.</i></u></b> Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.
</p>
 
</BODY> 
</HTML>

[/raw]

 

  • У вас должно получиться следующее: 003
  • Теги, которые вы использовали:

[raw]

<b>   </b>Жирный текст
<i>   </i>Курсивный (наклонный) текст
<u>   </u>Подчёркнутый текст

[/raw]

  • Откройте файл upr1.html в редакторе Notepad++ (если он был закрыт). Для этого можно щёлкнуть по нему правой клавишей и выбрать Edit with Notepad++. Измените его в соответствии с образцом

 

[raw]



<HTML>
<HEAD>
<TITLE >Упражнение1</TITLE> 
</HEAD>
<BODY bgcolor="gold"> 
 
<h2 align="center">Тестовый текст для проверки шрифта.</h2>
 
<hr>
  
<b>Тестовый текст</b> для проверки шрифта.<br>
<b>Тестовый текст</b> для проверки шрифта.<br>
<b>Тестовый текст</b> для проверки шрифта.<br>
<b>Тестовый текст</b> проверки шрифта.
 
<hr>
 
 
<h3>Тестовый текст для проверки шрифта.</h3>
 

<h4>Тестовый текст для проверки шрифта. <u>Вашего времени</u></h4>
 

<p>
Тестовый текст для проверки шрифта. <font face="Arial" size="+2" color="red">Тестовый текст для проверки шрифта.</font> Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.
</p>
<p>
Тестовый текст для проверки шрифта. <b><u><i>Тестовый текст для проверки шрифта.</i></u></b> Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.
</p>
<p>
Тестовый текст для проверки шрифта. <b><u><i>Тестовый текст для проверки шрифта.</i></u></b> Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.
</p>
<p>
Тестовый текст для проверки шрифта. <b><u><i>Тестовый текст для проверки шрифта.</i></u></b> Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.
</p>
 
</BODY> 
</HTML>

[/raw]

 

  • У вас должно получиться следующее: 004
  • Теги и атрибуты, которые вы использовали:

[raw]

bgcolor=”gold”Атрибут тега <body>   </body>. Задаёт цвет фона всей страницы
align=”center”Выравнивание текста по центру. Применяется к заголовкам и абзацам. Помимо значения center может принимать следующие параметры:

left – выравнивание по левому краю

right – выравнивание по правому краю

justify – выравнивание по ширине

<font>   </font>Задаёт свойства текста – его размер, цвет и шрифт. Используется только с атрибутами.

Атрибуты:

face=”Arial” – шрифт

size=”+2″ – размер

color=”red” – цвет

[/raw]

Теперь вы можете потренироваться самостоятельно, для этого:

  • В конце текста вставьте горизонтальную линию. Скопируйте и вставте несколько абзацев (6-7 абзацев будет достаточно).
  • Выполните оформление вставленного текста с помощью изученных тегов. Используйте как можно большее количество изученных тегов.
  • Замечание. Не лепите теги внутри текста где попало. Не делайте что попало жирным, курсивом, не выделяйте что попало другим цветом, шрифтом и. т. д. Тщательно продумайте целесообразность использования каждого тега

 

 

КОНТРОЛЬНЫЕ ВОПРОСЫ  

  1. Какие логические части имеет HTML-документ?
  2. Между какими тегами заключается заголовок?
  3. Между какими тегами заключается название страницы?
  4. Между какими тегами заключается содержание страницы?
  5. Что такое содержание веб-страницы?
  6. Какими бывают теги?
  7. Что такое атрибуты?
  8. Какой тег создаёт абзац?
  9. Какой тег осуществляет перенос текста на новую строку без создания нового абзаца?
  10. Какой тег создаёт заголовок первого уровня?
  11. Сколько уровней заголовков бывает?
  12. Как сделать текст жирным, курсивом, подчёркнутым?
  13. Как осуществить выравнивание текста по правому краю, по центру, по ширине?
  14. Как изменить размер, цвет, шрифт текста?
  15. Как изменить цвет фона страницы?

 

На этом пока все, если у вас остались вопросы по данному занятию пишите в комментариях, будем рады ответить.

Сборник практических работ по созданию сайта с помощью языка «HTML»

Работа 1. Основные тэги HTML.

Создать Web-страницу, знакомящую с основными тэгами HTML.

Сохранить изменения в блокноте. Активизировать браузер с открытым в нем предыдущим вариантом страницы. Щелкнуть по кнопке Обновить. В процессе создания Web-страницы приходится добавлять новые тэги и просматривать получаемый результат.

Работа 2. Форматирование шрифта.

Внести в текст страницы тэги, определяющие начертание шрифта и горизонтальных разделительных линий. Отделить этот фрагмент от остального текста с помощью горизонтальных разделительных линий.

(в блокнот необходимо внести только то, что написано полужирным шрифтом в работе.)

Жирный
Курсив
Подчеркнутый
Жирный подчеркнутый курсив
Равноширинный

Работа 3. Цветовые схемы. Шрифты.

Атрибуты задания цветовой схемы (цвета фона, текста и гиперссылок). Цвет на Web-странице задают либо его названием, либо числовым шести разрядным шестнадцатеричным кодом #RRGGBB (первые два разряда задают интенсивность красного цвета, вторые – зеленого и третьи – синего). Значение яркости цвета может меняться от минимальной 00 до максимальной FF. В таблице приведены примеры некоторых цветов: 

Цвет

Код

Название

 

Цвет

Код

Название

черный

#000000

black

фиолетовый

#FF00FF

magenta

белый

#FFFFFF

white

бирюзовый

#00FFFF

cyan

красный

#FF0000

red

желтый

#FFFF00

yellow

зеленый

#00FF00

lime

золотой

#FFD800

gold

синий

#0000FF

blue

оранжевый

#FFA500

orange

серый

#808080

gray

коричневый

#A82828

brown

Основную цветовую схему Web-страницы можно задать в тэге <BODY> с помощью атрибутов:

  Цвет фона

BGCOLOR=»#RRGGBB»

Текстура фона

BACKGROUND=»file_name»

Цвет текста

TEXT=»#RRGGBB»

Цвет текста ссылки

LINK=»#RRGGBB»

Цвет текста активной ссылки

ALINK=»#RRGGBB»

Цвет текста просмотренной ссылки

VLINK=»#RRGGBB»

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

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

  1. Открыть файл первое_знакомство.htm через блокнот.

  2. Для оформления страницы можно использовать следующую цветовую схему:

(!!!)описание атрибутов цвета производится в открытом теге <BODY>(!!!)

  1. Сохранить файл и Обновить страничку (цвет текста и цвет фона должен поменяться).

  2. Закончить работу с файлом.

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

Вставка изображений. Для размещения на Web-страницах используются графические файлы форматов GIF, JPEG и PNG. Изображения помещаются на Web-страницу тэгом IMG с атрибутом SRC, сообщающим браузеру имя и местоположение графического файла.

<IMG SRC=»image_name»>

Если рядом с изображением не должно быть текста, его размещают внутри отдельного абзаца. Выравнивание рисунка по горизонтали в этом случае задают в тэге <P>. Размеры изображения (в пикселах) можно задать с помощью атрибутов  WIDTH и HEIGHT. К изображению атрибутом ALT можно добавить название, которое появляется на экран или вместо иллюстрации (если по какой — либо причине графика не выводится в окне браузера), или в качестве всплывающий строки, при указании на рисунок мышью.

  1. Открыть файл первое_знакомство.htm в блокноте.

  2. Вставить в начале страницы картинку (после тега <BODY>) с помощью тега:

Атрибут ALIGN выравнивает по верхнему краю, середине или нижнему краю изображения, справа или слева от него с помощью значений: top, bottom, middle, left или right.  

  1. Форматирование текста. Для выделения фрагментов текста используется тэг <FONT>. Атрибут FACE определяет гарнитуру шрифта, атрибут COLOR – цвет и атрибут

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

А это — подзаголовок нашей странички.

Сохранить файл и Обновить страничку.

Выделим часть текста более крупным шрифтом и цветом и определим выравнивание

<P ALIGN=»left»><FONT SIZE=»6″ COLOR=»#FF0066″ FACE=»Arial» > Давайте, просто напечатаем простой текст для создания нашей странички, выровненный по левому краю.

<P ALIGN=»right»><FONT SIZE=»5″ COLOR=»#FF0000″ FACE=»Times New Roman» > Давайте, просто напечатаем простой текст для создания нашей странички, выровненный по правому краю.

<P ALIGN=»center»><FONT SIZE=»4″ COLOR=»#FF0011″ FACE=»Arial»> Давайте, просто напечатаем простой текст для создания нашей странички, выровненный по центру.FONT>P>

  1. Сохранить файл и Обновить страничку). Закончить работу с файлом.

hello_html_6dce7b8a.png

блокнот

браузер

hello_html_5759df0b.png

Работа 5. Оформление гиперссылок.

  1. Запустить текстовый редактор Блокнот командой [Пуск — Программы — Стандартные — Блокнот].

  2. Открыть файл первое_знакомство.htm

  3. Различные виды гиперссылок. Связать Web-страницу с другими документами можно с помощью универсального тэга <A>, и его атрибута HREF, указывающим в каком файле хранится вызываемый ресурс.

Указатель ссылки

file_name – путь к файлу или его URL-адрес в Интернете. Если вызываемый документ размещается в той же папке, что и Web-страница, то можно указывать только имя файла.

Указатель ссылки в окне браузера выделяется подчеркиванием и особым цветом. При указании на него мышью, ее курсор превращается в значок «рука». Щелчок мыши по указателю, вызывает переход на документ, указанный в гиперссылке. Используем различные значения атрибута HREF для реализации различных реакций браузера:

<A HREF=»вторая страница.htm«>Моя вторая страничкаA>

Сохранить файл и Обновить страничку

  1. А теперь с оформлением выравнивания и шрифтов Исправляем предыдущую запись.

<A HREF=»вторая страница.htm»><P ALIGN=»center»><FONT SIZE=»4″ COLOR=»#FFaa11″ FACE=»Arial»> Моя вторая страничкаFONT>P>A>

  1. Сохранить файл и Обновить страничку

  2. Создадим вторую страничку. Для этого откроем Блокнот еще раз. И наберем в нем следующий текст.

<TITLE>Моя вторая страницаTITLE>

Моя первая страничка, на ней я познакомился (лась) с основными тегами

  1. Сохраним файл под именем вторая_страница.htm

  2. Запустить первый файл первое_знакомство.htm. Запустим гиперссылку Моя вторая страница.

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

< A REL=»nofollow» target=»_blank» HREF=»http://infourok.ru/go.html?href=%3C%2FSPAN%3E%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B0%3CSPAN+%3E.jpg»>

  1. Сохранить файл и Обновить обе странички

Работа 6-8. Творческое задание.

Творческое задание. «Мой сайт». Создать Web-сайт, рассказывающий о Процессорах, Внешней памяти, Внутренней памяти, Свободная тема.

Сайт рекомендуется хранить в отдельной, специально созданной папке Сайт, вложенной в папку Ваша_фамилия. Здесь будут находиться как Web-страницы, так и графические файлы.

HTML код первой страницы.

Первое знакомство с тэгами HTML

фон.jpg» TEXT=»#993300″ LINK=»#00FF00″ ALINK=»#FF0000″ VLINK=»#00FF00″>

Моя вторая страничка

А это — подзаголовок нашей странички.

Выделим часть текста более крупным шрифтом и цветом и определим выравнивание

Давайте, просто напечатаем простой текст для создания нашей странички, выровненный по левому краю.

Давайте, просто напечатаем простой текст для создания нашей странички, выровненный по правому краю.

Давайте, просто напечатаем простой текст для создания нашей странички, выровненный по центру.

Заголовок второго уровня

Заголовок третьего уровня

Заголовок четвертого уровня
Заголовок пятого уровня
Заголовок шестого уровня

Жирный

Курсив

Подчеркнутый

Жирный подчеркнутый курсив

Равноширинный

Выделение

Усиленное выделение

Первый элемент списка

Второй элемент списка

Третий элемент списка

Первый элемент списка

Второй элемент списка

Третий элемент списка

ТЕРМИН 1

Пояснение к термину 1

ТЕРМИН 2

Пояснение к термину 2

ТЕРМИН 3

Пояснение к термину 3

HTML код второй страницы.

Моя вторая страница

Моя первая страничка, на ней я познакомился (лась) с основными тегами

Практические работы по html и css

Методические разработки практических работ по информатике по темам «Язык разметки HTML» и «Современные web-технологии» (для учащихся средних классов).

При проведении занятий с использованием данных методических разработок для создания html- и css-файлов рекомендуется использовать обычный текстовый редактор, поддерживающий подстветку синтаксиса языков HTML и CSS, а также желательно включающий возможность работы с несколькими файлами в многостраничном режиме.

Например, для Windows подойдет Notepad++ (notepad-plus-plus.org). В текстовом редакторе Notepad++ для того, чтобы выполнялся перенос длинных строк, надо в меню выбрать командуВид -> Перенос строк. Также очень хорошим текстовым редактором является Notepad2 (flos-freeware.ch/notepad2.html). Однако он не поддерживает многостраничный режим работы. Установка переноса строк в нем выполняется с помощью командыView -> Word Wrap.

1. Html–документ. Абзацы, разрывы строк, выравнивание

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

Исходный код HTML-документа состоит из тегов и содержания.

Содержание предназначено для отображения в окне браузера. Теги определяют его структуру (разметку): какие части являются заголовками, какие абзацами, а какие иными элементами.

У тегов могут быть различные атрибуты с заданными свойствами. В старых версиях языка HTML атрибуты использовались для оформления содержания: установки размера и цвета шрифта, выравнивания текста, установки отступов и другого. Сейчас содержимое HTML-документа принято оформлять с помощью языка CSS.

Любой HTML документ всегда включает контейнеры html, headиbody, которые вложены друг в друга следующим образом:

<html>

<head>

…

</head>

<body>

…

</body>

</html>

Задание 1. Создайте файл и задайте ему структуру, которая приведена выше. Сохраните его.

В контейнере headобычно присутствует контейнерtitle, содержимое которого отображается в заголовке окна документа.

Задание 2. Добавьте в документ контейнер title:

<title>ЭВМ – электронно-вычислительная машина</title>

Сохраните файл и откройте в браузере. Найдите введенное вами содержание title.

Содержимое body отображается в окне браузера.

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

Задание 3. Добавьте в контейнер bodyследующее содержимое:

<p>Появление персональных компьютеров в начале семидесятых годов(параллельно с постепенной эволюцией крупных ЭВМ)сейчас расценивают как революционный переворот. Масштабы его влияния на человеческое общество сравнивают с последствиями от изобретения книгопечатания.</p>

<p>В мире уже сейчас имеются миллионы и миллиарды ЭВМ.<br/>Их число продолжает неуклонно расти!</p>

Сохраните. Обновите документ в браузере. Отметьте, сколько абзацев вы видите, где находится разрыв строки.

2 Выравнивание абзацев. Старый стиль

Выравнивание абзацев определяется значениями left(по левому краю),right(по правому),center(по центру) иjustify(по ширине). Эти значения могут быть присвоены свойствуalign(выравнивание), которое допустимо для многих тегов.

Так, например, выравнивание абзаца по центру можно задать так: <p align=»center»> …

Задание 4. Для созданных ранее абзацев задайте выравнивание по ширине (для первого абзаца) и по правому краю (для второго).

Задания к работе:

Задание № 1. Создание простейшего файла HTML

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

  2. 2. Запустите программу Блокнот (Notepad).

  3. 3. Наберите в окне программы простейший файл HTML.

<HTML>

<HEAD>

<TITLE>Учебный файл HTML</TITLE>

</HEAD>

<BODY>

Расписание занятий на вторник

</BODY>

</HTML>

  1. 4. Сохраните файл под именем RASP.HTML (обязательно укажите тип файла HTML при сохранении) в личной папке.

  2. 5. Для просмотра Web-страницы используйте любую программу браузера (Internet Explorer, Opera, Mozilla Firefox или другую). Для этого, не покидая программу Блокнот (сверните окно на панель задач), откройте личную папку и двойным кликом по файлу RASP.HTML откройте окно браузера.

Рисунок 10 – Результат работы

На экране вы увидите результат работы, изображенный на рисунке 10.

Задание № 2. Управление расположением текста на экране

  1. 1. При необходимости откройте текст Web-страницы в Блокноте (1 щелчок правой клавишей мыши по файлу RASP.HTML, в контекстном меню выбрать команду Открыть с помощью… и выбрать программу Блокнот). При необходимости открыть файл в браузере – двойной клик по значку файла левой клавишей мыши.

  2. 2. Внести изменения в файл RASP.HTML, расположив слова Расписание, занятий, на вторник на разных строках.

<HTML>

<HEAD>

<TITLE>Учебный файл HTML</TITLE>

</HEAD>

<BODY>

Расписание

занятий

на вторник

</BODY>

</HTML>

  1. 3. Сохраните текст с внесенными изменениями в файле RASP.HTML (меню Файл | Сохранить). Если у вас уже отображается Web-страница, то вам достаточно переключиться на панели задач на программу браузера и обновить эту страницу (кнопка ). Изменилось ли отображение текста на экране?

Не удивляйтесь тому, что внешний вид вашей Web-страницы не изменился.

Не забывайте каждый раз сохранять текст Web-страницы при ее корректировке в программе Блокнот и обновлять страницу при ее просмотре в программе браузера.

Задание № 3. Некоторые специальные команды форматирования текста

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

Тег перевода строки <BR> отделяет строку от последующего текста или графики.

Тег абзаца <P> тоже отделяет строку, но еще добавляет пустую строку, которая зрительно выделяет абзац.

Оба тега являются одноэлементными, тег <P> – двойной, т.е. требуется закрывающий тег.

  1. 1. Внесите изменения в файл RASP.HTML

<HTML>

<HEAD>

<TITLE>Учебный файл HTML</TITLE>

</HEAD>

<BODY>

<P>Расписание</P>

<BR>занятий<BR>

на вторник

</BODY>

</HTML>

  1. 2. Сохраните внесенные изменения, переключитесь на панели задач на программу браузера, обновите Web-страницу.

Как изменилось отображение текста на экране? Выглядеть ваша Web-страница будет примерно так, как показано на рисунке 11.

Рисунок 11 – Результат выполнения задания 3.

Задание № 4. Выделение фрагментов текста

  1. 1. Внести изменения в текст файла RASP.HTML

<HTML>

<HEAD>

<TITLE>Учебный файл HTML</TITLE>

</HEAD>

<BODY>

<B>Расписание</B>

<I> занятий</I>

<U> на вторник</U>

</BODY>

</HTML>

  1. 2. Посмотрите полученную Web-страницу.

Возможно использование комбинированных выделений текста.

<I><B>Расписание</B></I> <I><U> занятий</U></I> <U> на вторник</U>

Но при этом необходимо помнить следующее правило использования комбинированных тегов:

<Тег_1><Тег_2> … </Тег_2></Тег_1> – правильная запись.

<Тег_1><Тег_2> … </Тег_1></Тег_2> – ошибочная запись.

Обратите внимание на «вложенность» тегов, она напоминает «вложенность» скобок.

Задание № 5. Задание размеров символов Web-страницы

Существует два способа управления размером текста, отображаемого браузером:

    • использование стилей заголовка,

    • задание размера шрифта основного документа или размера текущего шрифта.

    Используется шесть тегов заголовков: от <h2> до <H6> (тег двойной, т.е. требует закрытия). Каждому тегу соответствует конкретный стиль, заданный параметрами настройки браузера.

    1. 1. Внесите изменения в файл RASP.HTML

    Страница 4 из 16 Практические работы по HTML

    <HTML>

    <HEAD>

    <TITLE>Учебный файл HTML</TITLE>

    </HEAD>

    <BODY>

    <P><h2>Расписание</h2></P>

    <I> занятий</I><U> на вторник</U>

    </BODY>

    </HTML>

    1. 2. Просмотрите свою Web-страницу. На экране вы увидите то, что отображено на рисунке 12.

    Рисунок 12 – Результат выполнения задания 5

    Задание № 6. Установка размера текущего шрифта

    Тег шрифта <FONT> позволяет задавать размер текущего шрифта в отдельных местах текста в диапазоне от 1 до 7.

    1. 1. Внесите изменения в текст RASP.HTML

    <HTML>

    <HEAD>

    <TITLE>Учебный файл HTML</TITLE>

    </HEAD>

    <BODY>

    <FONT SIZE=»7″>Расписание</FONT>

    занятий на вторник

    </BODY>

    </HTML>

    1. 2. Самостоятельно измените размер текста «занятий на вторник», используя тег <FONT>.

    2. 3. Измените оформление текста HTML-документа, используя тег выделения фрагментов и тег перевода строки и абзаца.

    Задание № 7. Установка гарнитуры и цвета шрифта

    Тег <FONT> предоставляет возможности управления гарнитурой, цветом и размером текста.

    Изменение гарнитуры текста выполняется простым добавлением к тегу <FONT> атрибута FACE. Например, для отображения текста шрифтом Arial необходимо записать:

    <FONT FACE=”ARIAL”> Страница 5 из 16 Практические работы по HTML

    Для изменения цвета шрифта можно использовать в теге <FONT> атрибут COLOR=”X”. Вместо “X” надо подставить английское название цвета в кавычках (“ ”), либо его шестнадцатеричное значение. При задании цвета шестнадцатеричным числом необходимо представить этот цвет разложенным на три составляющие: красную (R – Red), зелѐную (G – Green), синюю (B – blue), каждая из которых имеет значение от 00 до FF. В этом случае мы имеем дело с так называемым форматом RGB.

    Примеры записи текста в формате RGB приведены в Таблице 2:

    Таблица 2

    Запись текста в формате RGB

    1. 1. Внесите изменения в файл RASP.HTML

    <HTML>

    <HEAD>

    <TITLE>Учебный файл HTML</TITLE>

    </HEAD>

    <BODY>

    <U><I><B><FONT COLOR=»#FF0000″ FACE=»ARIAL» SIZE=»7″>

    Расписание</FONT></B></I></U> занятий на вторник

    </BODY>

    </HTML>

    1. 2. Самостоятельно измените размер, цвет, гарнитуру стиль текста документа.

    Задание № 8. Выравнивание текста по горизонтали

    1. 1. Внесите изменения в файл RASP.HTML

    <HTML>

    <HEAD>

    <TITLE>Учебный файл HTML</TITLE>

    </HEAD>

    <BODY>

    <P ALIGN=»CENTER»>

    <FONT COLOR=»#008080″ SIZE=»7″>

    <B>Расписание</B></FONT><BR>

    <FONT SIZE=»6″><I> занятий на вторник</I></FONT>

    </P>

    </BODY>

    </HTML> Страница 6 из 16 Практические работы по HTML

    1. 2. Просмотрите изменения в браузере. На экране вы увидите то, что показано на рисунке 12.

    Рисунок 12 – Результат выполнения задания 8

    Задание № 9. Задание цвета фона и текста

    При изображении фона и цвета браузеры используют цвета, установленные по умолчанию, – они заданы параметрами настройки браузера. Если вы хотите задать другие цвета, то это надо сделать в начале файла HTML в теге <BODY>. Атрибут BGCOLOR= определяет цвет фона страницы, атрибут TEXT= задает цвет текста для всей страницы, атрибуты LINK= и VLINK= определяют соответственно цвета непросмотренных и просмотренных ссылок (последние два примера будут рассмотрены позже).

    1. 1. Внесите изменения в файл RASP.HTML

    <HTML>

    <HEAD>

    <TITLE>Учебный файл HTML</TITLE>

    </HEAD>

    <BODY BGCOLOR=»#FFFFCC» TEXT=»#330066″>

    <P ALIGN=»CENTER»>

    <FONT COLOR=»#008080″ SIZE=»7″>

    <B>Расписание</B></FONT><BR>

    <FONT SIZE=»6″><I> занятий на вторник</I></FONT>

    </P>

    </BODY>

    </HTML>

    1. 2. Просмотрите изменения Web-страницы в браузере.

    Задание № 10. Размещение графики на Web-странице

    Тег <IMG> позволяет вставить изображение на Web-страницу. Оно появится в том месте документа, где находится этот тег. Тег <IMG> является одиночным.

    Необходимо помнить, что графические файлы должны находиться в той же папке, что и файл HTML, описывающий страницу. Графика в Web, как правило, распространяется в трех форматах: GIF, JPG, PNG. Страница 7 из 16 Практические работы по HTML

    Для выполнения следующего задания поместите файл с именем CLOCK.JPG (или другим именем) в рабочую папку.

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

    1. 1. Внесите изменения в файл RASP.HTML

    <HTML>

    <HEAD>

    <TITLE>Учебный файл HTML</TITLE>

    </HEAD>

    <BODY BGCOLOR=»#FFFFCC» TEXT=»#330066″>

    <P ALIGN=»CENTER»>

    <FONT COLOR=»#008080″ SIZE=»7″>

    <B>Расписание</B></FONT><BR>

    <FONT SIZE=»6″><I> занятий на вторник</I></FONT> <BR><BR>

    <IMG SRC=»CLOCK.PNG»>

    </P>

    </BODY>

    </HTML>

    1. 2. Просмотрите изменения вашей Web-страницы в браузере.

    На экране вы увидите те, что показано на рисунке 13.

    Рисунок 13 – Результат выполнения задания 13

    Тег <IMG> имеет немало атрибутов, описанных в таблице 3. Эти атрибуты можно задавать дополнительно и располагаться они могут в любом месте тега после кода IMG.

    Таблица 3

    Атрибуты изображения

    Задание № 11. Использование атрибутов изображения

    1. 1. Самостоятельно внесите изменения в текст файла RASP.HTML: опробуйте использование таких атрибутов графики, как ALT, BORDER, ALIGN, HEIGHT, WIDTH, VSPACE, HSPACE.

    Всегда обращайте внимание на размер графического файла (в байтах), так как это влияет на время загрузки Web-страницы.

    1. 2. Просмотрите изменения вашей Web-страницы в браузере.

    Задание № 12. Установка фонового изображения на Web-странице

    Фоновое изображение – это графический файл с небольшим рисунком, который многократно повторяется, заполняя все окно браузера независимо от его размеров.

    Графика, используемая в качестве фоновой, задается в теге <BODY>.

    1. 1. Внесите изменения в файл RASP.HTML, предварительно подготовив и сохранив в рабочей папке графический файл фонового рисунка (FON.PNG).

    Страница 9 из 16 Практические работы по HTML

    <HTML>

    <HEAD>

    <TITLE>Учебный файл HTML</TITLE>

    </HEAD>

    <BODY BACKGROUND=»FON.PNG» TEXT=»#330066″>

    <P ALIGN=»CENTER»>

    <FONT COLOR=»#008080″ SIZE=»7″>

    <B>Расписание</B></FONT><BR>

    <FONT SIZE=»6″><I> занятий на вторник</I></FONT> <BR><BR>

    <IMG SRC=»CLOCK.PNG» ALIGN=»MIDDLE»>

    </P>

    </BODY>

    </HTML>

    На экране вы увидите то, что изображено на рисунке 6.

    Рисунок 14 – Результат выполнения задания 12

    Рисунок, который использовался в качестве фонового, имеет вид

    Рисунок 15 – Фоновый режим рисунка

    1. 2. Поэкспериментируйте с фоновым рисунком Web-страницы и выберите оптимальный с вашей точки зрения.

    Задание № 13. Создание таблицы

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

    Таблица состоит из трех основных частей:

      • названия таблицы,

      • заголовков столбцов,

      • ячеек таблицы.

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

      1. 1. Запустите программу Блокнот и наберите текст следующей Web-страницы. Применяйте приемы копирования при создании таблицы, работая в программе Блокнот.

      <HTML>

      <HEAD>

      <TITLE>Расписание занятий 5 классов</TITLE>

      </HEAD>

      <BODY BGCOLOR=»FFFFFF»>

      <P ALIGN=»CENTER»>

      <FONT COLOR=»RED» SIZE=»6″ FACE=»ARIAL»>

      <B>5 класс</B></FONT><BR></P>

      <FONT COLOR=»BLUE» SIZE=»4″ FACE=»COURIER»>

      <B>Понедельник</B></FONT><BR>

      <TABLE BORDER=»1″ WIDTH=100% BGCOLOR=»#99CCCC»>

      <TR BGCOLOR=»#CCCCFF» ALIGN=»CENTER»>

      <TD>Урок</TD> <TD>5 «А»</TD> <TD>5 «Б»</TD>

      <TD>5 «В»</TD>

      </TR>

      <TD>1</TD> <TD>Русский язык</TD>

      <TD>Литература</TD> <TD>История</TD>

      </TR>

      <TD>2</TD> <TD>Математика</TD>

      <TD>Информатика</TD> <TD>Английский язык</TD>

      </TR>

      <TD>3</TD> <TD>История</TD>

      <TD>Математика</TD> <TD>Информатика</TD>

      </TR>

      </TABLE>

      </BODY>

      </HTML>

      1. 2. Сохраните файл в личной рабочей папке под именем 5.HTML

      2. 3. Для просмотра созданной Web-страницы в окне личной рабочей папки двойным щелчком левой клавиши мыши загрузите браузер.

      На экране вы увидите то, что показано на рисунке 8.

      Рисунок 16 – Результат выполнения задания 13

      Задание № 14. Построение гипертекстовых связей

      Важнейшим средством языка HTML является возможность включения в документ ссылок на другие документы.

      Возможны ссылки:

        • на удаленный HTML-файл,

        • на некоторую точку в текущем HTML-документе,

        • на любой файл, не являющийся HTML-документом.

        В качестве ссылки можно использовать любой текст или графику.

        Ссылки в пределах одного документа

        Такие ссылки требуют двух частей: метки и самой ссылки. Метка определяет точку, на которую происходит переход по ссылке. Ссылка использует имя метки. Ссылки выделяют цветом или подчеркиванием в зависимости от того, как настроен браузер. Для изменения цвета ссылки используются атрибуты LINK= и VLINK= тега <BODY>.

        Описание ссылки

        <A HREF=»#ПН»>Понедельник</A>

        Перед именем метки (ПН), указывающей, куда надо перейти по ссылке, ставится символ #. Между символами “>” и “<” располагается текст (“Понедельник”), на котором должен быть произведен щелчок для перехода по ссылке.

        Определим метку

        <A NAME=»ПН»>Понедельник</A>

        1. 1. Дополните файл 5.HTML описанием таблицы, содержащей названия дней недели, поместив его в начало Web-страницы. Страница 12 из 16 Практические работы по HTML

        …

        <TABLE WIDTH=100%>

        <TR>

        <TD>Понедельник</TD>

        <TD>Вторник</TD>

        <TD>Среда</TD>

        <TD>Четверг</TD>

        <TD>Пятница</TD>

        <TD>Суббота</TD>

        </TR>

        </TABLE>

        <BR>

        …

        1. 2. Вставьте в файл 5.HTML метку, указывающую на понедельник.

        …

        <FONT COLOR=»BLUE» SIZE=»4″ FACE=»COURIER»><B>

        <A NAME=»ПН»>Понедельник</A></B></FONT><BR>

        …

        1. 3. Вставьте в таблицу с названиями дней недели ссылку для выбранной метки:

        …

        <TABLE WIDTH=100%>

        <TR>

        <TD><A HREF=»#ПН»>Понедельник</A></TD>

        <TD>Вторник</TD>

        <TD>Среда</TD>

        …

        1. 4. Создайте таблицы расписаний для других дней недели.

        2. 5. Сохраните файл 5.HTML в личной рабочей папке.

        3. 6. Просмотрите полученную Web-страницу.

        На экране вы увидите то, что изображено на рисунке 9.

        Рисунок 17 – Результат выполнения задания 14

        Задание № 15. Создание ссылки на другой HTML-документ

        Ссылки позволяют щелчком на выделенном слове или фразе перейти к другому файлу.

        Опишем ссылку:

        <AHREF=»5.HTML»>5 класс</A>

        После имени файла (5.HTML) между символами «>» и «<» располагается текст («5 класс»), на котором должен быть произведен щелчок для перехода к этому файлу.

        1. 1. Внесите изменения в файл RASP.HTML

        <HTML>

        <HEAD>

        <TITLE>Учебный файл HTML</TITLE>

        </HEAD>

        <BODY BGCOLOR=»#FFFFFF» TEXT=»#330066″>

        <P ALIGN=»CENTER»>

        <FONT COLOR=»#008080″ SIZE=»7″>

        <B>Расписание</B></FONT><BR>

        <FONT SIZE=»6″><I> занятий на вторник</I></FONT>

        <BR><BR>

        <IMG SRC=»CLOCK.PNG» ALIGN=»TOP»>

        </P>

        <CENTER>

        <TABLE WIDTH=60%>

        <TR><TD><A HREF=»5.HTML»>5 класс</A></TD>

        <TD>6 класс</TD> </TR>

        <TR><TD>7 класс</TD>

        <TD>8 класс</TD> </TR>

        <TR><TD>9 класс</TD> Страница 14 из 16 Практические работы по HTML

        <TD>10 класс</TD> </TR>

        <TR><TD>11 класс</TD> </TR>

        </TABLE>

        </CENTER>

        </BODY>

        </HTML>

        1. 2. Сохраните файл RASP.HTML

        2. 3. Просмотрите полученную Web-страницу.

        На экране вы увидите то, что изображено на рисунке 10.

        Рисунок 18 – Результат выполнения задания 16

        Задание № 16. Создание ссылки на другой HTML-документ

        1. 1. Внесите изменения в файл 5.HTML так, чтобы в конце страницы была ссылка на головную страницу Расписание занятий 5 классов (RASP.HTML). В качестве ссылки используйте графический файл (HOME.GIF) следующим образом:

        …

        </TABLE><BR>

        <CENTER>

        <A HREF=»RASP.HTML»><IMG SRC=»HOME.PNG» BORDER=»0″></A>

        </CENTER>

        1. 2. Просмотрите полученную Web-страницу.

        На экране вы увидите то, что показано на рисунке 11.

        В качестве ссылки выступает рисунок – стрелка

        Рисунок 19 – Результат выполнения задания 16

        Задание № 17. Самостоятельное итоговое задание

        Разработайте Web-страницы, рассказывающие о вашем классе. На головной странице разместите рассказ о классе, классном руководителе. Рассказы об учениках разместите на отдельных Web-страницах. Укажите ссылки на страницы учеников с головной Web-страницы. Не забудьте разместить ссылки возврата на головную страницу.

        Как подготовить хорошую Web-страницу

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

        2. 2. Постарайтесь представить информацию в виде списков или таблиц так, чтобы можно было достаточно легко найти важные сведения.

        3. 3. Не размещайте одно изображение сразу за другим. Попробуйте распределить их по документу, оставив достаточно свободного пространства.

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

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

        6. 6. Использование графики может дополнительно привлечь пользователей. Но необходимо помнить о времени загрузки вашей страницы, которое определяется количеством и объемом графической информации. Красивая картинка не произведет никакого впечатления, ели для того, чтобы ее увидеть, придется долго ждать, пока она загрузится.

        Две практические работы по HTML

        Практическая работа по HTML № 1

        Задание № 1. Создание простейшего документа HTML

        1. Создайте личную папку, куда вы будете сохранять все файлы.

        2. Запустите программу Блокнот (Пуск – Все программы – Стандартные — Блокнот).

        3. Наберите в окне программы следующий набор тегов (Для отступа используя кнопку Tab):

        <ТITLЕ>

        1. Сохраните файл под именем baza.txt в своей папке, не закрывая файл. Этим файлом будем пользоваться при дальнейшей работе.

        2. Сохраните еще раз файл под именем 1.HTML в своей папке (в папке уже два файла, но разные значки).

        3. Для просмотра Web-страницы откройте свою папку и двойным кликом по файлу 1.HTML откройте документ в окне браузера.

        Оба файла не закрывайте!

        Задание № 2. Добавление текста

        1. Для работы нам понадобится файл ТОК.doc (расположение файла уточнить у учителя).

        2. Внесем изменения в файл 1.HTML, для этого:

        — впишем «справочник электрика» между тегами

        справочник электрика

        — скопируем весь текст из файла ТОК.doc и вставим в файл 1.txt между тегами

        <BODY> ТОК, НАПРЯЖЕНИЕ, СОПРОТИВЛЕНИЕ …

        BODY>

        1. Сохраните файл с внесенными изменениями (Файл — Сохранить). Переключитесь на Web-страницу, и обновите эту страницу.

        Не забывайте каждый раз сохранять текст в программе Блокнот и обновлять Web-страницу при просмотре в браузере!

        Задание № 3. Форматирование текста

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

        <BR> – команда перевода строки для отделения строки от последующего текста или графики.

        <P> P> – новый абзац, закрывающий тег можно не ставить.

        Внесите изменения в файл 1.HTML:

        1. впишите теги <P> P> на все абзацы, например:

        Электрический ток ( I ) — это упорядоченное движение заряженных частиц. Первая мысль, которая приходит в голову из школьного курса физики — движение электронов. Безусловно. Однако электрический заряд могут переносить не только они, а, например, еще ионы, определяющие возникновение электрического тока в жидкостях и газах.

        1. Сохраните внесенные изменения в файле 1 и обновите Web-страницу.

        Как изменилось отображение текста на экране? Выглядеть ваша Web-страница будет примерно так, как показано на рисунке 1.

        hello_html_m15eda902.png

        Рисунок 1.

        Задание № 4. Выделение фрагментов текста

        Для выделения текста используются следующие теги:

        <HR> – горизонтальная линия

        <B> B> – полужирный шрифт

        <I> I> – курсив

        <U> U> – подчёркивание

        <EM> EM> – выделение

        <STRONG> STRONG>– усиленное выделение

        Надо выделить фрагменты текста так, как в оригинале ТОК

        1. Слова «ТОК, НАПРЯЖЕНИЕ, СОПРОТИВЛЕНИЕ» впишем между тегами

        <B> ТОК, НАПРЯЖЕНИЕ, СОПРОТИВЛЕНИЕ B>

        1. Поступим так со всеми выделенными полужирным шрифтом словами в файле.

        2. Слова «напряженность электрического поля (Е)» впишем между тегами

        <I> напряженность электрического поля (Е)I>

        1. Поступим так со всеми выделенными курсивным шрифтом словами в файле.

        2. Сохраним изменения и обновим страницу в браузере.

        Должен получиться документ, подобный исходному файлу ТОК.doc.(рисунок 2).

        hello_html_5281a4c4.png

        Рисунок 2.

        1. Сохраните изменения и закройте документы.

        Практическая работа по HTML № 2

        Задание № 1. Задание размеров заголовков

        Используется шесть тегов заголовков: от <h2> до <H6> (тег двойной, т.е. требует закрытия). Каждому тегу соответствует конкретный стиль, заданный параметрами настройки браузера.

        Для внесения изменений в файле 1.HTML надо открыть его в Блокноте:

        1. Пуск – Все программы – Стандартные – Блокнот.

        2. В окне Блокнота выбрать меню Файл – Открыть.

        3. В окне Открытие выбрать свою папку, в типе файлов выбрать –все, щелкнуть по 1.html и нажать кнопку открыть.

        4. Для открытия в браузере, просто дважды щелкнуть по значку файла 1.html.

        Внесем изменения в файл 1.HTML-Блокнот

        <Н1>ТОК, НАПРЯЖЕНИЕ, СОПРОТИВЛЕНИЕН1>

        1. Сохраним изменения в Блокноте и обновим в браузере. На экране вы увидите, что размер заголовка увеличился.

        2. Удалим парные теги <h2> h2>. Сохраним изменения и обновим страницу. Размер заголовка уменьшился.

        Задание № 2. Установка размера, гарнитуры и цвета шрифта

        Размер: Тег шрифта <FONT> позволяет задавать размер текущего шрифта в отдельных местах текста в диапазоне от 1 до 7. Для заголовка поставим 6 размер, для остального текста – 4.

        1. Внесите изменения в текст 1.HTML

        справочник электрика

        < FONT SIZE=»6″ >ТОК, НАПРЯЖЕНИЕ, СОПРОТИВЛЕНИЕFONT>

        Электрический ток ( I ) — это упорядоченное движение …

        … умножите ампер на килоом, то напряжение получите совсем не вольтах.

        FONT>

        1. Сохраните изменения в 1.html и обновите файл справочника в окне браузера. Шрифт должен увеличиться.

        Гарнитура: Изменение гарнитуры текста выполняется простым добавлением к тегу <FONT> атрибута FACE: <FONT FACE = «название шрифта»>

        1. Внесите изменения в текст 1.HTML

        <Н1> <FONT SIZE=»6″ FACE = “arial”> ТОК, НАПРЯЖЕНИЕ, СОПРОТИВЛЕНИЕFONT>Н1>

        1. Сохраните изменения в 1.html и обновите файл справочника в окне браузера.

        Цвет: <FONT COLOR = «название цвета»> – смена цвета текста

        Red – красный; green – зеленый; Black – черный;

        maroon — тёмно-красный; Olive – оливковый; navy – сине-зеленый;

        Aqua — морской волны; purple – фиолетовый; teal — зеленовато-синий;

        lime – известковый; fuchsia — ярко-малиновый; silver – серебристый;

        white – белый; yellow – желтый; blue – голубой

        gray – коричневый.

        FONT>

        1. Внесите изменения в текст 1.HTML

        <Н1> <FONT SIZE=»6″ FACE = “arial” COLOR=”navy”> ТОК, НАПРЯЖЕНИЕ, СОПРОТИВЛЕНИЕFONT>Н1>

        1. Сохраните изменения в 1.html и обновите файл справочника в окне браузера.

        Задание № 3. Выравнивание текста по горизонтали

        Абзац

        <P> – абзац

        P> – конец абзаца

        Атрибуты тэга <P> для выравнивания текста

        Атрибуту ALIGN может быть присвоено одно из 4-значений:

        LEFT по левому

        ALIGN = RIGHT по правому

        CENTER по центру

        JUSTIFY по ширине

        1. Внесите изменение в документ

        ТОК, НАПРЯЖЕНИЕ, СОПРОТИВЛЕНИЕ

        1. Сохраните изменения в 1.html и обновите файл справочника в окне браузера.

        Практические работы по HTML


        Методическая разработка по информатике и икт по теме: Практические задания по созданию web-страниц

        Разработка Web-сайтов. Тема — Основные тэги HTML.

        Задание № 1: Создать Web-страницу, знакомящую с основными тэгами HTML.

        1. В своей папке создайте новую папку, имеющую имя: Создание Web-сайта.

        2. Запустите текстовый редактор Блокнот (Пуск – Программы – Стандартные — Блокнот).

        3. Ввести HTML-код, задающий структуру Web-страницы:

        Первое знакомство с тэгами HTML

        4. Внести в текст страницы тэги заголовков различных уровней (размеров):

        Заголовок второго уровня

        Заголовок третьего уровня

        5. Отделить этот фрагмент от остального текста с помощью горизонтальной

            разделительной линии:

        6. Внести в текст страницы тэги, задающие списки нумерованные и ненумерованные:

      1. Первый элемент списка

      2. Второй элемент списка

      3. Третий элемент списка

      4. Первый элемент списка

      5. Второй элемент списка

      6. Третий элемент списка

        7. 7.Внести в текст страницы тэги, определяющие начертание шрифта. Отделить

           этот фрагмент от текста с помощью горизонтальных разделительных линий:

        Обычный текст

        Жирный

        Курсив

        Подчеркнутый

        Жирный подчеркнутый курсив

        8. Ввести команду Файл — Сохранить, файлу Web-страницы присвоить имя

            proba.htm и сохранить в своей папке Создание Web-сайта, закрыть Блокнот.

        9. Откройте созданный документ из своей папки, в заголовке окна браузера

            высвечивается название Web-страницы – Первое знакомство с тэгами HTML.

        10. Замените общие фразы следующими (подумайте какие заменить):

        Моя личная страница.

        Давайте познакомимся.

        Немного о себе:

        1. Моё имя…
        2. Мой адрес…
        3. Контактные координаты…

        До встречи.

        Спасибо за внимание.

        Продолжение следует!

        11. Сохраните изменения в файле proba.htm.

        Основные тэги HTML

        Назначение

        Формат

        Структура Web-страницы

        Начало и конец страницы

         

        Описание страницы, в том числе ее имя

         

        Имя страницы

         

        Содержание страницы

         

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

        Заголовок (уровни от 1 до 6)

         ?>

        Абзац

         

        Абзац с выравниванием

        ?>

        ?>

        ?>

        Перевод строки

        Горизонтальный разделитель

        Выравнивание по центру

         

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

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

        Форматирование шрифта

        Жирный

        Курсив

        Подчеркнутый

        Верхний индекс

        Нижний индекс

        Размер шрифта (от 1 до 7)

        Цвет шрифта (задается названием цвета или его 16-ричным кодом)

        Гарнитура шрифта

        Атрибуты задания цветовой схемы(цвета фона, текста и гиперссылок)

        цвет

        код

        название

        цвет

        код

        название

        черный

        # 000000

        black

        фиолетовый

        # FF00FF

        magenta

        белый

        # FFFFFF

        white

        бирюзовый

        # 00FFFF

        cyan

        красный

        # FF0000

        red

        желтый

        # FFFF00

        yellow

        зеленый

        # 00FF00

        lime

        золотой

        # FFD800

        gold

        синий

        # 0000FF

        blue

        оранжевый

        # FFA500

        orange

        серый

        # 808080

        gray

        коричневый

        # A82828

        brown

        Самостоятельная работа | Практическая контрольная работа

        Главная | Информатика и информационно-коммуникационные технологии | Планирование уроков и материалы к урокам | 11 классы | Планирование уроков на учебный год (по учебнику Н.Д. Угриновича, профильный уровень) | Самостоятельная работа. Практическая контрольная работа





        Содержание урока

        Практические работы по HTML

        Задание № 1. Создание простейшего файла HTML

        Задание № 2. Управление расположением текста на экране

        Задание № 3. Некоторые специальные команды форматирования текста

        Задание № 4. Выделение фрагментов текста

        Задание № 5. Задание размеров символов Web-страницы

        Задание № 6. Установка размера текущего шрифта

        Задание № 7. Установка гарнитуры и цвета шрифта

        Задание № 8. Выравнивание текста по горизонтали

        Задание № 9. Задание цвета фона и текста

        Задание № 10. Размещение графики на Web-странице

        Задание № 11. Использование атрибутов изображения

        Задание № 12. Установка фонового изображения на Web-странице

        Задание № 13. Создание таблицы

        Задание № 14. Построение гипертекстовых связей

        Задание № 15. Создание ссылки на другой HTML-документ

        Задание № 16. Редактирование ссылки на другой HTML-документ

        Задание № 17. Самостоятельное итоговое задание

        Как подготовить хорошую Web-страницу

        Тестирование

        Практическая контрольная работа

        Практические работы по HTML


        Задание № 14
        Построение гипертекстовых связей

        Важнейшим средством языка HTML является возможность включения в документ ссылок на другие документы.

        Возможны ссылки:

        • на удаленный HTML-файл,
        • на некоторую точку в текущем HTML-документе,
        • на любой файл, не являющийся HTML-документом.

        В качестве ссылки можно использовать любой текст или графику.

        Ссылки в пределах одного документа

        Такие ссылки требуют двух частей: метки и самой ссылки. Метка определяет точку, на которую происходит переход по ссылке. Ссылка использует имя метки. Ссылки выделяют цветом или подчеркиванием в зависимости от того, как настроен браузер. Для изменения цвета ссылки используются атрибуты LINK= и VLINK= тега <BODY>.

        Описание ссылки

        <A HREF=»#ПН»>Понедельник</A>

        Перед именем метки (ПН), указывающей, куда надо перейти по ссылке, ставится символ #. Между символами “>” и “<” располагается текст (“Понедельник”), на котором должен быть произведен щелчок для перехода по ссылке.

        Определим метку

        <A NAME=»ПН»>Понедельник</A>

        1. Дополните файл 5.HTML описанием таблицы, содержащей названия дней недели, поместив его в начало Web-страницы.

        …

        <TABLE WIDTH=100%>

        <TR>

        <TD>Понедельник</TD>

        <TD>Вторник</TD>

        <TD>Среда</TD>

        <TD>Четверг</TD>

        <TD>Пятница</TD>

        <TD>Суббота</TD>

        </TR>

        </TABLE> <BR>

        …

        2. Вставьте в файл 5.HTML метку, указывающую на понедельник.

        …

        <FONT COLOR=»BLUE» SIZE=»4″ FACE=»COURIER»><B>

        <A NAME=»ПН»>Понедельник</A></B></FONT><BR>

        …

        3. Вставьте в таблицу с названиями дней недели ссылку для выбранной метки:

        …

        <TABLE WIDTH=100%>

        <TR>

        <TD><A HREF=»#ПН»>Понедельник</A></TD>

        <TD>Вторник</TD>

        <TD>Среда</TD>

        …

        4. Создайте таблицы расписаний для других дней недели.

        5. Сохраните файл 5.HTML в личной рабочей папке.

        6. Просмотрите полученную Web-страницу.

        На экране вы увидите то, что изображено на рисунке 9.

        Рис. 9

        Следующая страница Задание № 15. Создание ссылки на другой HTML-документ

        Cкачать материалы урока


        Добавить комментарий

        Ваш адрес email не будет опубликован. Обязательные поля помечены *