Студопедия
Случайная страница | ТОМ-1 | ТОМ-2 | ТОМ-3
АрхитектураБиологияГеографияДругоеИностранные языки
ИнформатикаИсторияКультураЛитератураМатематика
МедицинаМеханикаОбразованиеОхрана трудаПедагогика
ПолитикаПравоПрограммированиеПсихологияРелигия
СоциологияСпортСтроительствоФизикаФилософия
ФинансыХимияЭкологияЭкономикаЭлектроника

Закончим наш разговор о тэгах, в общем.

Читайте также:
  1. Автоматическое отображение времени телефонного разговора или стоимости.
  2. Блокировка междугородних телефонных разговоров
  3. Блокировка разговоров SIM-картой
  4. Введение к разговору о Магии
  5. Ввод данных о стоимости разговора
  6. Внесите в ваш разговор несколько мягких, плавных изгибов
  7. Во время еды Игорь не говорил, Максим тоже молчал. Все разговоры начались после того, как тарелки были отставлены в сторону.

<тэг> </тэг> - не просто тэг, это контейнер, который может содержать внутри себя другие тэги (и текст).

Обратите внимание: <тэг1><тэг2><тэг3>... </тэг3></тэг2></тэг1>

Только такая очередность закрывающих тэгов верна: тэг, который мы открыли первым - закрываем последним, второй – предпоследним и т.д.

Т.е. следующая очередность нежелательна и не верна, она может привести к ошибкам на вашей страничке: <тэг1><тэг2><тэг3>... </тэг3></тэг1></тэг2>

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


B. ЗАДАНИЕ на 1 занятие

Создайте HTML-документ со связным содержанием, в котором использованы все вышеперечисленные возможности. Тема содержания документа произвольная.

(Примерная форма документа приводится).

Основные критерии, которым должен соответствовать документ:

ü В заголовке HTML-документа должен быть заголовок документа;

ü Должен быть установлен цвет фона документа;

ü Должен быть установлен цвет текста документа;

ü В тексте документа должны быть не менее пяти абзацев, число слов не менее 100;

ü Должны быть использованы теги для перевода строки;

ü Должны присутствовать примеры выравнивания по левому, правому краям и по центру;

ü Должны присутствовать выделенные фрагменты текста с жирным шрифтом, курсивным шрифтом и шрифтом с подчеркиванием;

ü Должны присутствовать выделенные фрагменты текста с измененным цветом текста;

ü Должны присутствовать выделенные фрагменты текста с измененным размером текста.

 


C. ПОРЯДОК РАБОТЫ:

1. Создание рабочей папки.

Перед началом работы создайте на Вашем логическом диске (U:) отдельную папку для будущей страницы:

U:\первые шаги\

“Первые шаги” – это название папки, Вы можете назвать ее как угодно.

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

Откроем текстовый редактор Блокнот (Пуск – Программы – Стандартные – Блокнот) и наберем там следующий текст:

<html>

<head>

<title>Мой первый шаг </title>

</head>

<body>

Здравствуйте, это моя первая страница.

<br>

Добро пожаловать!

</body>

</html>

3. Сохранение html-документа.

Сохраните этот документ в Вашей папке, присвоив файлу имя “index.html”:

U:\первые шаги\index.html

“index” – это название файла, Вы можете назвать его как угодно, расширение html – обязательно.

4. Открытие html-документа.

ü Откроем броузер – Internet Explorer (Блокнот не закрывайте, он нам еще пригодится), и откроем в броузере наш документ:

Файл - Открыть - кнопка Обзор – (Войти в свою папку и отметить свой документ index.html) – нажать кнопку «ОК»;

ü Откройте свою папку и сделайте двукратный щелчок по своему файлу index.html, при этом, как правило, по умолчанию html-файл открывается в Internet Explorer.

5. Просмотрите и проанализируйте получившийся html-документ, сопоставьте окончательный вид документа в браузере с исходным текстом документа в Блокноте.

ü Тэг <br> осуществляет перенос текста на другую строку, он не требуют закрывающего тэга.

ü Тэг <p> определяет начало нового абзаца, он также не требуют закрывающего тэга.

6. Редактирование html-документа.

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

ü Делаем активным текстовый редактор Блокнот с нужным документом;

ü Вносим необходимые изменения;

ü Сохраняем документ с внесенными изменениями;

ü Делаем активным Internet Explorer с тем же документом;

ü Нажимаем экранную кнопку «Обновить».

7. Измените документ. Посмотрите, что получится, если тэг <br> заменить тэгом <p>. Добавьте в документ свой текст, используя тэги <p> и <br>.

8. Тэги могут иметь атрибуты (свойства). Рассмотрим применение атрибутов на примере атрибутов тэга <body>.

9. Атрибут bgcolor тэга <body> определяет цвет фона документа:

<body bgcolor=#rrggbb>

rrggbb – это условное обозначение цвета, где rr, gg, bb –доли цветов красного (red), зеленого (green) и синего (blue) цветов, соответственно. Эти доли выражаются в шестнадцатиричной системе. Некоторые простые цвета можно также просто обозначить английскими словами: red, green, blue и т.д. Таблица основных 16 цветов приведена ниже в Приложении, более полный набор цветов (140) приведен в отдельном файле «Таблица цветов 140».

10. Измените цвет фона документа на оливковый, для этого добавьте в имеющийся тэг body следующий атрибут: <body bgcolor=#808000>. Посмотрите, что получится. Попробуйте установите цвет с помощью тектового обозначения цвета, например: <body bgcolor=Yellow>.

11. Атрибут text тэга <b<body text=#rrggbb ody> определяет цвет текста документа:

>.

12. Измените цвет текста документа, например, на белый:

<body bgcolor=Yellow text=white>

13. Подберите устраивающие Вас цвета фона и текста документа.

14. Атрибут align тега начала абзаца <p>, позволяет выровнять текст по центру, по левому или правому краю:

· <p align=left> – выравнивание по левому краю;

· <p align=right> – выравнивание по правому краю; <p align=center> – выравнивание по центру;

· <p align=justify> – выравнивание по левому и правому краю.

15. Для изменения начертания в отдельных фрагментах текста можно использовать следующие тэги:

·

· <b> жирный шрифт </b>

· <i> курсивный шрифт </i>

· <u> шрифт с подчеркиванием </u>

· <sub> подстрочный индекс </sub>

· <sup> надстрочный индекс </sup>

16. Для изменения цвета и размера текста в отдельных фрагментах можно использовать тэг:

<font color=#rrggbb size=nn face=Arial> фрагмент </font>:

– nn – размер шрифта, может принимать значение от 1 до 7.

– атрибут face устанавливает тип шрифта, в качестве примера указано Arial.


Дата добавления: 2015-10-02; просмотров: 54 | Нарушение авторских прав


<== предыдущая страница | следующая страница ==>
Раздел HEAD| A. ЗАДАНИЕ на 2 занятие

mybiblioteka.su - 2015-2024 год. (0.008 сек.)