Ход работы. Создание простейших файлов HTML: ЛАБОРАТОРНАЯ РОБОТА № 6
Создание простейших файлов HTML: 1. Создайте папку, в которой Вы будете сохранять созданные Web-страницы. 2. Запустите стандартную программу Блокнот (Notepad) и наберите следующий текст с элементами форматирования: <HTML><HEAD><TITLE> Учебный файл HTML </TITLE></HEAD><BODY>Расписание занятий на вторник</BODY></HTML>3. Сохраните файл под именем schedule.html. 4. Для просмотра созданной Web-страницы загрузите броузер Microsoft Internet Explorer. 5. Откройте в меню броузера Файл (File), Открыть (Open), Просмотр(Обзор – Browse) и найдите созданный ранее файл schedule.html, загрузите его. Убедитесь, что название Web-страницы (Учебный файл HTML) отразилось в верхней статусной строке броузера. Управление расположением текста на экране: 1. Внесите изменения в текст, расположив слова "Расписание", "занятий", "на вторник" на разных строках: <HTML><HEAD><TITLE> Учебный файл HTML </TITLE></HEAD><BODY>Расписаниезанятийна вторник</BODY></HTML>2. Сохраните внесенные изменения, с помощью команд Файл (File), Сохранить (Save). 3. Просмотрите с помощью броузера Microsoft Internet Explorer новую полученную Web-страницу используя клавишу F5 или с помощью кнопки Обновить (Refresh). Предыдущие шаги не вызвали никаких видимых изменений в документе html – при отображении гипертекста броузеры автоматически размещают текст на экране, не принимая во внимание встречающиеся в файле переводы строк и идущих подряд пробелов. Существуют специальные команды, выполняющие перевод строки и задающие начало нового абзаца. Кроме того, существует команда, которая запрещает программе броузера каким-либо образом изменять форматирование текста и позволяет точно воспроизвести на экране заданный фрагмент текстового файла. Тег перевода строки <BR> отделяет строку от последующего текста или графики. тег абзаца <P> тоже отделяет строку, но еще добавляет пустую строку, которая зрительно выделяет абзац. Оба тега являются одноэлементными (не требуют закрывающего тега). 4. Внесите изменения в текст файла HTML: <HTML><HEAD><TITLE> Учебный файл HTML </TITLE></HEAD><BODY>Расписание <P>занятий <BR>на вторник</BODY></HTML>Сохраните внесенные изменения в файле schedule.html. Просмотрите с помощью броузера обновленную страницу.
Выделение фрагментов текста: Теги выделения фрагментов текста позволяют управлять отображением отдельных символов и слов. Существует три тега выделения фрагментов текста: <B>: </B> – для выделения полужирным, <I>: </I> – для выделения курсивом, <U>: </U> – для выделения подчеркиванием. 1. Внесите изменения в файл schedule.html: <HTML><HEAD><TITLE> Учебный файл HTML </TITLE></HEAD><BODY><B>Расписание</B> <I>занятий</I> <U> на вторник</U></BODY></HTML>2. Посмотрите новую полученную Web-страницу. 3. Попробуейте использовать вложение тегов: <I><B>Расписание</B></I> <I>занятий</I> <U> на вторник</U>
Изменение размера текста: Существует два способа управления размером текста, отображаемого броузером: o использование стилей заголовка; o задание размера текущего шрифта. 1.Внесите изменения в файл schedule.html: <HTML><HEAD><TITLE> Учебный файл HTML </TITLE></HEAD><BODY><H1>Расписание</H1> <I>занятий</I> <U>на вторник</U></BODY> </HTML>2. Просмотрите обновления через браузер. 3. Внесите следующие изменения в файл schedule.html: <HTML><HEAD><TITLE> Учебный файл HTML </TITLE></HEAD><BODY><FONT SIZE="7">Расписание</FONT> занятий на вторник</BODY></HTML>4. Самостоятельно измените размер шрифта для текста "занятия на вторник", используя тег <FONT>. Гарнитура и цвет шрифта: Тег <FONT> предоставляет возможности управления размером, начертанием и цветом текста. Изменение гарнитуры шрифта выполняется простым добавлением к тегу <FONT> атрибута FACE. Например, для изображения текста шрифтом Arial необходимо записать <FONT FACE="ARIAL">. Для изменения цвета шрифта в теге <FONT> можно использовать атрибут COLOR="X". Вместо Х надо подставить либо название цвета (в кавычках), либо его шестнадцатеричное значение. При задании цвета шестнадцатеричным числом можно представить этот цвет разложенным на три составляющие: красную(R), зеленую (G), синюю (B), каждая из которых имеет значение от 0 до FF. Примеры записи цвета в формате RGB приведены в таблице:
1. Внесите изменения в файл schedule.html: <HTML><HEAD><TITLE> Учебный файл HTML </TITLE></HEAD><BODY><U><I><B><FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">Расписание</FONT></B></I></U>занятий на вторник</BODY></HTML>2. Самостоятельно измените размер, цвет, гарнитуру, стиль текста документа. Выравнивание текста по горизонтали: С помощью тегов HTML можно управлять горизонтальным выравниванием текста. Если не оговаривать способ выравнивания, все элементы в документе будут выравниваться по левому краю и иметь неровное правое поле. Современные броузеры для выравнивания текста используется атрибут ALIGN=, который встраивается в теги абзаца или заголовка. o ALIGN=CENTER – Выравнивание по центру. o ALIGN=RIGHT – Выравнивание по правому краю. o ALIGN=LEFT – Выравнивание по левому краю. 1. Внесите изменения в файл schedule.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>2. Просмотрите обновления.
Задание цвета фона и текста: Цвета фона и текста документа устанавливаются в начале файла HTML в теге <BODY>. Атрибут BGCOLOR= задает цвет фона страницы, TEXT= определяет цвет текста для всей страницы, LINK= и VLINK= определяют цвета соответственно непросмотренных и просмотренных ссылок. 1. Внесите изменения в файл schedule.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. Самостоятельно создайте собственный HTML-документ. Пусть это будет титульная страница Вашей лабораторной работы.
Содержание отчета 1. Выполнить все описанные операции с текстом, содержащим личную информацию (Ф.И.О., адрес, номер зачетной книжки и т.д.) 2. Представить HTML-коды выполненных операций. 3. Представить скрины готовых HTML-документов. 4. При сдаче работы иметь исходные файлы.
Задания и вопросы для аттестации 1. Уметь показать способ создания HTML-документа. 2. Знать принципы формирования HTML-документа. 3. Знать основные теги. Название программы: Notepad++ Версия программы: 6.3 Последняя Версия программы: 6.3 Адрес официального сайта: Notepad++ Язык интерфейса: Multi/Rus
Лечение: не требуется
Системные требования:
• Microsoft Windows 2003 | XP | Vista | 7 | 8
Описание: Notepad++ - бесплатный редактор текстовых файлов, значительно превосходящий Блокнот по функциональности. Поддерживает синтаксис всевозможных языков программирования, предназначен для работы в операционной системе MS Windows. Этот проект базируется на компоненте Scintilla (очень мощном компоненте для редактирования) написанном на C++ с использованием только Win32 API и STL (что гарантирует максимальную скорость выполнения при минимальном размере программы), распространяется под лицензией GPL. Основные особенности Notepad++: • Подсветка текста и возможность сворачивания блоков, согласно синтаксису языка программирования • WYSIWYG (печатаешь и получаешь то, что видишь на экране) • Настраиваемый пользователем режим подсветки синтаксиса • Авто-завершение набираемого слова • Одновременная работа с множеством документов • Одновременный просмотр нескольких документов • Поддержка регулярных выражений Поиска/Замены • Полная поддержка перетягивания фрагментов текста • Динамическое изменение окон просмотра • Автоматическое определение состояния файла • Увеличение и уменьшение • Поддержка большого количества языков • Заметки • Выделение скобок при редактировании текста • Запись макроса и его выполнение В портативном исполнении Notepad++ не требует инсталляции и может работать с любого съемного носителя.
|
