ualin.com
Додати статтю | Реєстрація


Інтернет
Автомобілі та мотоцикли
Бізнес
Будівництво, ремонт
Дім та родина
Діти
Захоплення, хобі
Комп'ютери та ПЗ
Красота, імідж, косметика
Медицина та здоров'я
Мода, стиль
Приготування їжи
Психологія та тренінги
Реклама та PR
Релігія, непізнане, окультизм
Реферати, курсові, лабораторні, методички
    Іноземні мови
    Інформатика
    Міське будівництво й господарство
    Медицина
    Менеджмент
    Різне
    Соціальна педагогіка
    Страхування
    Теорія грошей
    Функціонально вартісний аналіз
    Хімія
Собаки, кішки, рибки, птахи
Суспільство та політика
Товари та послуги
Туризм, подорожі
Фітнес, схуднення, дієти
Чоловік та жінка
Невиховані туристи нападають на зомбі й вордулаків  
Як вибрати орбітрек. Поради покупцям  
Жилая недвижимость в Московской области - жилье в новостройке в Пушкино  
Вчиться зосередженості  
Як обрати бухгалтерські курси 1С?  
ТРАНСПАПІЛЯРНІ ВТРУЧАННЯ В ДІАГНОСТИЦІ ТА ЛІКУВАННІ ХВОРИХ НА ПАТОЛОГІЮ ДУОДЕНОПАНКРЕАТОБІЛІАРНОЇ ЗОНИ  
Якщо Ви промочили взуття.  
Оформлення шенгенських віз в Іспанію  
Урок 1:«Введение в HTML»  
Google будет понижать позиции плохих мерчантов  
Безкоштовне розміщення статей: психологія, тренінги, авто, красота, мода, родина - ualin.com
міжрегіональне   методы   Вона   хворобі   КОМУНАЛЬНОГО   такі   шубы   морі   шкіри   вода   видалення   кисн   охране   колючі   одежда  
Зберегти сторінку Зробити стартовою Відправити другу
 укр
 рус
Урок 2:«Оформление текста»
Урок 2:«Оформление текста»
Ход урока:
   Ознакомление с новым материалом.
   Наиболее привычным для человека представлением информации является текст. Поэтому текст обычно занимает большую часть Web-страниц. Сегодня мы рассмотрим основные возможности оформления текста, предусмотренные в HTML.



   
   Цели:
    Изучить формирование строк, абзацев, заголовков в HTML-документе;
    Уметь применять простые приемы форматирования текста;
    Создавать маркированные и нумерованные списки.
   
   План:
   1. Формирование абзацев и строк.
   2. Выравнивание абзацев.
   3. Форматирование символов.
   4. Задание цвета шрифта и фона страницы.
   5. Пример оформления Web-страницы.
   6. Создание списков.
   7. Маркированные списки.
   8. Нумерованные списки (элемент OL).
   9. Как должен оформляться текст Web-страниц.
   
   Ход урока:
   Ознакомление с новым материалом.
   Наиболее привычным для человека представлением информации является текст. Поэтому текст обычно занимает большую часть Web-страниц. Сегодня мы рассмотрим основные возможности оформления текста, предусмотренные в HTML.
   
   Формирование абзацев и строк.
   При создании Web-страниц нужно стремиться к тому, чтобы тексты были лаконичными и допускали четкое деление на абзацы. Для создания абзаца в языке HTML предусмотрено несколько возможностей. Простейшая из них – это использование тегов <P> и </P>, между которыми помещается текст абзаца. Впрочем, конечный тег </P> в элементе абзаца не является обязательным.
   Для перевода строки (разрыв строки) применяется тег. Этот тег представляет собой пустой элемент, который заставляет броузер перенести текст на новую строку. Теги <BR> удобны при оформлении почтовых адресов, наборе стихов и проч.
   Ниже приведен пример использования тегов <P> и <BR> для отображения на Web-странице известной баллады Р. Бернса.
   <HTML>
    <HEAD>
    <TITLE>Баллада</TITLE>
    </HEAD>
    <BODY>
    <P> Баллада о двух сестрах</P>
    К двум сестам в терем над водой,<BR>
    Биннори, о Биннори.<BR>
    Приехал рыцарь молодой,<BR>
    У славных мельниц Биннори.<BR><BR>
    Роберт Бернс
    </BODY>
   </HTML>
   Содержимое HTML-элементов обычно записывается с отступами, как в данном примере. Это не отражается на внешнем виде самой Web-страницы, но облегчает чтение кода. Web-страница с приведенным кодом показана на странице «Баллада».
   
   
   Задание заголовков.
   Заголовки делят документ на логически законченные блоки. Благодаря заголовкам посетитель Web-страницы может получить представление о ее содержании. Для задания заголовков используется парные теги <H1>(заголовок 1-го уровня), <H2>(заголовок 2-го уровня) и т.д. Всего предусмотрено 6 уровней заголовков.
   Броузер отображает заголовки более крупным (полужирным) шрифтом. Чем выше уровень заголовка, тем крупнее шрифт. Заголовки отделяются пустыми строками от остального текста. Это легко проверить, заменив в приведенном выше примере абзац с названием стихотворения на заголовок Н1:
   <Н1> Баллада о двух сестрах</Н1>
   
   Выравнивание абзацев.
   Абзацы, которые задаются тегами <P> и <BR>, по умолчанию выравниваются по левому краю страницы. Изменить такое выравнивание можно с помощью атрибута align. Значение align=”center”, будет задавать выравнивание по центру, значение align=”right ” – выравнивание по правому краю страницы (выравнивание по левому краю определяется атрибутом align=”left ”. Например, заголовок
   <Н1 align=”center”> Баллада о двух сестрах</Н1>
   будет располагаться по центру страницы.
   
   Форматирование символов.
   Параметры шрифта, используемого для отображения текста на Web-страницах, проще всего определять с помощью элемента FONT. Для этого элемента предусмотрены следующие атрибуты:
   face (гарнитура шрифта или список допустимых шрифтов);
   color (цвет шрифта);
   size (размер шрифта).
   Допустим, вы хотите в рассматриваемом примере первые слова баллады показать шрифтом Arial оранжевого цвета. Для этого введите в документ такой тег:
   <FONT face = “Arial” color = “orange” >К двум сестам</FONT>
   Чтобы задать то или иное начертание шрифта, используются следующие теги:
   <B>…</B> - для задания полужирного текста;
   <I>…</I> - для задания курсивного текста;
   <U>…</U> - для задания подчеркнутого текста.
   Например, если нужно отобразить курсивом имя автора в том же примере, вставьте в код страницы следующий тег:
   <I>Роберт Бернс</I>
   
   Задание цвета шрифта и фона страницы.
   В предыдущем пункте вы узнали, как с помощью элемента FONT задать цвет шрифта для фрагментов текста. Если же нужно определить цвет шрифта для всей страницы, то используется атрибут text в теге <BODY>. Например, тег вида
   <BODY text = “red”>
   задает для всего текста красный цвет.
   Цвет фона всего HTML-документа определяется атрибутом bgcolor тега <BODY>. Например, следующий тег назначает оливковый цвет для фона:
   <BODY bgcolor = “olive”>
   
   Пример оформления Web-страницы.
   Проиллюстрирует применение описанных средств HTML на примере Web- страницы с басней. Усовершенствуем код этой страницы, чтобы она имела более интенсивный вид. Так, зададим фоновый цвет страницы – темно-фиолетовый, цвет шрифта для всей страницы – белый. Заголовок басни оформим как Н2 и выровняем по центру. Инициалы и фамилию автора отобразим курсивом с выравниванием по правому краю. Все это можно выполнить с помощью следующего простого кода:
   <HTML>
    <HEAD>
    <TITLE>Баллада</TITLE>
    </HEAD>
   <!- -Присвоение цвета фону и тексту страницы - - >
    <BODY bgcolor = “darkviolet” text = “white”>
   <!- -Заголовок, выровненный по центру - - >
    <Н2 align=”center”> Баллада о двух сестрах</Н2>
   <!- -Начало основного текста баллады - - >
    К двум сестам в терем над водой,<BR>
    Биннори, о Биннори.<BR>
    Приехал рыцарь молодой,<BR>
    У славных мельниц Биннори.
   <!- -Имя автора, выравнивание по правому краю - - >
    <P align = “right”> <I> Роберт Бернс </I>
    </BODY>
   </HTML>
   Набрав этот код в текстовом редакторе и сохранив его в виде файла htm? Откройте его в броузере Internet Explorer, вы получите страницу на рисунке 2. Сравните полученную страницу со страницей на рис. 1 и проанализируйте, какие теги и атрибуты ответственны за изменение внешнего вида страницы.
   
   Создание списков.
   Язык HTML располагает специальными элементами, которые позволяют представлять текстовую информацию в виде списков, подобных спискам редактора Word.
   В HTML различаются маркированные (неупорядоченные) и нумерованные (упорядоченные) списки. Причем код списка представляет собой структуру из вложенных элементов. Внешним элементом является пара тегов:
    <UL>…</UL> - для маркированного списка;
    <OL>…<OL> - для нумерованного списка.
   Внутри этих тегов размещаются элементы списка, которые записываются с помощью одиночных тегов:
   <LI> Содержимое строки списка
   Таким образом, количество элементов LI равно количеству строк в списке. Имена приведенных выше тегов являются сокращениями слов:
   UL (Unordered List) – неупорядоченный список, то есть список без номеров;
   OL (Ordered List) – упорядоченный список;
   LI (List Item) – элемент списка.
   Иногда вначале списка помещают заголовок, который выделяется парным тегом <LH>…</LH>. Имя этого тега LH сокращение от List Header (заголовок списка).
   Маркированные списки.
   Чтобы получить маркированный список на Web-странице, нужно набрать код следующего вида:
   <UL>
   <LH><!-Заголовок списка-></LH>
   <LI><!-Первая строка списка->
   …
   <LI><!-Последняя строка списка->
   </UL>
   Допустим, вы хотите оформить на странице список жителей Средиземноморья. Это можно сделать следующим образом (элемент LH опускаем):
   <HTML>
    <HEAD>
    <TITLE>Маркированный список</TITLE>
    </HEAD>
    <BODY>
    <Н2>Жители Средиземноморья</Н2>
    <UL>
    <LI>Хоббиты
    <LI>Люди
    <LI>Орки
    <LI>Эльфы
    </UL>
    </BODY>
   </HTML>
   Внешний вид этой страницы показан на рис. 3. Строки списка отмечены маркерами – маленькими затемненными кружками, принятыми по умолчанию. Если вы хотите изменить этот вид маркеров, можете добавить в элементы списка атрибут type=”square” (маркер в виде заполненного квадратика) или type=”circle” (маркер – незаполненный кружок).
   
   Нумерованные списки (элемент OL).
   Нумерованный список формируется с применением внешнего парного тега <OL></OL>, который обрамляет элементы списка. Ниже приведен код документа с нумерованным списком, а на рис. 4 показано, как броузер Internet Explorer его отображает.
   <HTML>
    <HEAD>
    <TITLE>Нумерованный список</TITLE>
    </HEAD>
    <BODY>
    <Н2>Сражения и битвы Средиземноморья</Н2>
    <OL>
    <LI>Битва возле Минас-Тирита.
    <LI>Сражение двух твердынь.
    <LI>Нашествие на Гондор.
    <LI>Заключительное сражение.
    <LI>Битва в Хоббитании.
    </OL>
    </BODY>
   </HTML>
   В этом примере нумерация элементов списка выполнена арабскими цифрами. Стиль нумерации изменяется с помощью атрибута type элемента LI. Например, type = A отвечает нумерации прописными буквами английского алфавита, type=a – это нумерация строчными английскими буквами, type=І – это нумерация с помощью римских цифр.
   
   Как должен оформляться текст Web-страницы.
   При наполнении Web-страниц содержимым нужно учитывать, что посетитель обычно приходят на сайт за информацией. Основным представлением информации является текст, поэтому от того, как буде составлен и оформлен текст зависит общее восприятие вашего сайта и его полезность для посетителей. При размещении текста на Web-страницах придерживайтесь следующих правил:
    Текст должен быть лаконичным и понятным при чтении с первого раза. Из текста желательно удалить все лишние обороты и слова, без которых вполне можно обойтись. Заголовки также должны быть понятными и информативными. При перечислениях различных объектов, понятий или событий пользуйтесь маркированными списками. Старайтесь экономить сетевое время ваших посетителей и помните, что большинство пользователей сначала просматривают страницу «по-диагонали», обращая внимание только на заголовки и выделенные слова.
    Тексты значительного объема лучше разбивать на несколько страниц, которые будут связаны гиперссылками. Если текст имеет заголовки различного иерархического уровня, то хорошо эту иерархию в структуре связанных между собой страниц. Это поможет пользователю лучше ориентироваться в большом текстовом материале.
    Текст Web-страниц должен быть грамотно написан. К сожалению, не все страницы, имеющиеся в WWW, обладают этим качеством. Неграмотно написанные тексты ставят под сомнение представленный в них материал. Помните, что ваши тексты, опубликованные в Интернете, становятся доступными множеству людей.
   Итак, мы изучили простые приемы и правила размещения на Web-страницах текста. Далее мы рассмотрим использование на страницах ссылок, графических элементов, таблиц.
   Область компьютерной графики и элементарной верстки, связанная с компоновкой и оформлением Web-страниц, называется Web-дизайном.
   Далее мы бу дем рассматривать не только запись кодов для вставки тех или иных HTML-элементов в документ, но и их размещение на страницах с точки зрения Web-дизайна.
   Закрепление изученного на уроке.
   1. Назовите известные вам элементы, формирующие отдельную строку (абзац) в HTML-документе.
   2. Какие элементы задают иерархические заголовки?
   3. Какой атрибут применяется для выравнивания абзацев?
   4. С помощью каких тегов и атрибутов задаются параметры шрифта?
   5. Какие теги задают курсивный и подчеркнутый шрифт?
   6. Как задать цвет шрифта, отображаемого на странице?
   7. Опишите структуру кода для маркированного списка.
   8. Какой атрибут меняет тип маркера?
   9. С помощью каких элементов создается нумерованный список?
   10. Как изменить стиль нумерации в списке?
   11. Каковы правила оформления текста на Web-страницах?
   
   Домашнее задание.
   Гаевский А. Ю. «Информатика 7-11» - §74 выучить.
   Зарецкая И. Т. «Информатика 10-11». Глава 6 § 4.7 выучить.
   Глушаков С.В., Ломотько Д.В., Мельников И.В. Работа в сети Интернет: Учебный курс. – Харьков: Фолио; М.: ООО «Издательство АСТ», 2001. (с.103 - 160).
   Конспекты в тетради выучить.
   
   Формирование абзацев и строк
   
   <HTML>
    <HEAD>
    <TITLE>Баллада</TITLE>
    </HEAD>
    <BODY>
    <P> Баллада о двух сестрах</P>
    К двум сестам в терем над водой,<BR>
    Биннори, о Биннори.<BR>
    Приехал рыцарь молодой,<BR>
    У славных мельниц Биннори.<BR><BR>
    Роберт Бернс
    </BODY>
   </HTML>
   
   
   Форматирование символов
   Задание цвета шрифта и фона страницы
   
   <HTML>
    <HEAD>
    <TITLE>Баллада</TITLE>
    </HEAD>
   <!- -Присвоение цвета фону и тексту страницы - - >
    <BODY bgcolor = “darkviolet” text = “white”>
   <!- -Заголовок, выровненный по центру - - >
    <H2 align=”center”> Баллада о двух сестрах</H2>
   <!- -Начало основного текста баллады - - >
    К двум сестам в терем над водой,<BR>
    Биннори, о Биннори.<BR>
    Приехал рыцарь молодой,<BR>
    У славных мельниц Биннори.
   <!- -Имя автора, выравнивание по правому краю - - >
    <P align = “right”> <I> Роберт Бернс </I>
    </BODY>
   </HTML>
   
   
   Маркированный список
   
   <HTML>
    <HEAD>
    <TITLE>Маркированный список</TITLE>
    </HEAD>
    <BODY>
    <Н2>Жители Cредиземноморья</Н2>
    <UL>
    <LI>Хоббиты
    <LI>Люди
    <LI>Орки
    <LI>Эльфы
    </UL>
    </BODY>
   </HTML>
   
   
   Нумерованный список
   
   <HTML>
    <HEAD>
    <TITLE>Нумерованный список</TITLE>
    </HEAD>
    <BODY>
    <Н2>Сражения и битвы Средиземноморья</Н2>
    <OL>
    <LI>Битва возле Минас-Тирита.
    <LI>Сражение двух твердынь.
    <LI>Нашествие на Гондор.
    <LI>Заключительное сражение.
    <LI>Битва в Хоббитании.
    </OL>
    </BODY>
   </HTML>
   
   

Автор: ualin | Відгуки: 0 | Перегляди: 12115 | 20/02/2011 Реферати, курсові, лабораторні, методички - Інформатика

Ссылка на статью:


Комментарий
    Tony11:27 28-01-2019    
Hi I have tried sending you a message from your site but I have gotten an auto response saying it was not delivered for some bizarre reason, so here goes again! Please acknowledge receipt. As I mentioned in my earlier message, I would like to contr


Страница: 1

Оставить комментарий
Ваше имя:
Комментарий:
Введите текст, изображенный на картинке:
 
 укр  |  рус