![]() Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь FAQ Написать работу КАТЕГОРИИ: ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву ![]() Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Технология создания и просмотра Web-страницы.Содержание книги
Поиск на нашем сайте
1. В текстовом редакторе наберите HTML-текст. 2. Сохраните HTML-файл с расширением .htm или .html. 3. Загрузите браузер. 4. Откройте этот файл. Для этого необходимо выполнить следующие команды: Файл: Открыть. В открывшемся диалоговом окне введите полное имя файла (если помните) или воспользуйтесь опцией Обзор. 5. Если вас не устраивает то, что отобразил браузер, необходимо вернуться к HTML-файлу (источнику) и внести изменения. Чтобы вернуться к HTML-файлу (источнику), выполните следующие команды: Вид: В виде HTML ( или Источник). Второй способ – щелкните правой кнопкой мыши на документе. В появившемся контекстном меню выберите В виде HTML ( или Источник). Откроется ваш HTML-файл. Внесите изменения в HTML-текст. Сохраните изменения (Файл: Сохранить). Закройте Блокнот. Теперь окно браузера стало активным. 6. Для этого на панели инструментов нажмите кнопку обновить. Полезный совет: ¨ Для удобства чтения и редактирования HTML-файла теги лучше всего набирать ПРОПИСНЫМИ буквами. ¨ При выполнении лабораторной работы вы создадите несколько файлов. Создайте на диске С: в папке Мои документы свою личную папку (например, ИВАНОВ). Сохраняйте свои файлы и другую необходимую информацию в эту папку (например, рисунки, пиктограммы и пр.).
СТРУКТУРА HTML-ДОКУМЕНТА Текст всего документа заключается в теги: <HTML>... </HTML>. В заголовке (<HEAD>... </HEAD>) указывается название HTML-документа и другие параметры, которые браузер будет использовать при отображении документа.
Рис. 1. Структура HTML-документа.
<HTML> и </HTML> Эти теги сообщают браузеру, что текст между ними следует интерпретировать как текст HTML. <HEAD> и </HEAD> Эти теги отмечают вводную и заголовочную части документа HTML-документа. Между тегами <HEAD> всегда располагаются теги <TITLE>. <TITLE></ TITLE> Между этими тегами помещается название HTML-документа. Заголовок должен описывать цель документа и содержать не больше 5-6 слов. Название домашней страницы выводится браузером на строке заголовка. Кроме того, когда вы устанавливаете закладку на определенную страницу, выводится и ее название.
<BODY></BODY> Текст, охваченный этими тегами, является основной частью документа, т.е. его содержимым. Еще есть пара важных тегов - <ADDRESS> и </ADDRESS>. Эти теги охватывают информацию о том, к кому нужно обращаться в отношении данной страницы в том случае, если у кого-либо возникнут вопросы или замечания (например, адрес электронной почты). Теги <ADDRESS> используются для того, чтобы отделить эту информацию от основного блока.
Задание 1. Загрузите текстовый редактор Notepad (Блокнот). Наберите следующий ниже текст и сохраните его под именем web1.html в вашей личной папке. _________________________________________________ <HTML>
<BODY> <ADDRESS> Иванов Сергей – e-mail:ivanov@psu.unibel.by </ADDRESS> </BODY>
</HTML> _________________________________________________ Запустите браузер Internet Explorer. Откройте файл web1.html. Вот что должно получиться (Рис. 2).
Рис. 2. Иллюстрация к заданию 1. СОЗДАНИЕ ЗАГОЛОВКОВ Язык HTML поддерживает 6 уровней заголовков, для которых используются теги <H n> и </H n >. n - это уровень заголовка. Он принимает значение от 1 до 6. Причем, первый номер соответствует самому крупному шрифту. Заголовки должны быть информативны и привлекательны для читателя. Текст заголовка пишется между открывающим и закрывающим тегом. Задание 2. Измените вид вашей Web-страницы, введя приведенный ниже текст. Сохраните файл под именем web2.html в свою личную папку, выполнив операцию Сохранить как. Откройте этот файл в браузере. Результат приведен на рисунке 3. _________________________________________________ <HTML>
<BODY> <H2>Приглашаются все желающие!</H2> <ADDRESS> Иванов Сергей – e-mail: ivanov@psu.unibel.by </ADDRESS> </BODY>
</HTML> _________________________________________________
Рис. 3. Иллюстрация к заданию 2. ВВОД ТЕКСТА И ИНОЙ ИНФОРМАЦИИ Web-браузеры игнорируют пробелы, табуляции и переводы строки, если только они не определены соответствующими тегами. Тег нового абзаца. Для форматирования абзацев используется тег <Р>, его следует располагать в начале нового абзаца, за исключением тех мест, где используется тег прерывания строки. <P> предписывает браузеру разделить два фрагмента текста пустой строкой. Закрывающий тег </P> использовать необязательно.
Таблица 1.
Теги заголовков автоматически выполняют возврат каретки и оставляют пустую строку после текста между тегами <H n > и </H n>. Тег перевода строки. Тег перевода строки <BR> аналогичен тегу нового абзаца, но он не вводит пустую строку после отделяемого им текста. После этого тега текст продолжает отображаться с начала следующей строки. В HTML существует два тега, производных от <BR>. Тег разбивки слова <WBR> означает, что браузер должен разбить указанное слово, если его придется перенести на следующую строку. Если, напротив, браузеру не следует переносить текст на другую строку, его окружают тегами <NOBR> и </NOBR>. Теги запрета переноса блокируют автоматический перенос строк. Они полезны, когда вам необходимо, чтобы определенная группа слов всегда отображалась на одной строке. Тег горизонтальной линии. Тег горизонтальной линии <HR> может быть средством организации текста и дизайна. Он помогает посетителям страницы понять, какие части информации соотносятся друг с другом, а также разделяет страницу на несколько частей. Например, тег <HR> можно применить непосредственно над адресом электронной почты, чтобы отделить эту информацию от обычного текста. Используя атрибуты тега <HR> можно видоизменить горизонтальную линию. Таблица 2.
Предварительное форматирование. Если Вы хотите, чтобы браузер не форматировал ваш текст и чтобы информация, набранная в HTML-файле, точно также выглядела и в браузере без использования тегов форматирования, используйте теги <PRE> и </PRE>. Заключенный в теги текст будет отображаться так, как он был отформатирован предварительно, без обработки, с точным соблюдением переносов строк и интервалов.
Задание 3. Откройте ваш HTML-файл. Внесите следующие изменения. Сохраните изменения. Обновите Web-страницу. _________________________________________________ <HTML>
<HEAD> <TITLE>Домашняя страница (укажите свою фамилию и имя). </TITLE> </HEAD>
<BODY> <H1> Добро пожаловать к (укажите свою фамилию и имя) </H1> <H2>Приглашаются все желающие!</H2> <HR> Я рад приветствовать Вас на моей Web-странице. Я непрерывно работаю над этой страницей, и она постоянно обновляется. <P>Вот что я люблю делать в свободное время: (напишите о себе). <H3> Мои любимые книги (можно кинофильмы и пр.):</H3>
(Введите название первой книги) <BR> (Введите название второй книги)<BR > (Введите название третей книги) <P> <HR> <ADDRESS> Иванов Сергей – e-mail:ivanov@psu.unibel.by </ADDRESS> </BODY>
</HTML> _________________________________________________ В конце используется тег <P>, чтобы отделить список от следующего абзаца. У вас должно получиться что-то похожее на представленное на рис.4.
Рис. 4. Иллюстрация к заданию 3. СТИЛЕВОЕ ОФОРМЛЕНИЕ ТЕКСТА Изменить внешний вид страницы (отформатировать текст) можно при помощи тегов, приведенных в таблице 3. Таблица 3.
|
||||||||||||||||||||||||||||||||||||||||||||
Последнее изменение этой страницы: 2016-08-01; просмотров: 551; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 18.218.42.199 (0.01 с.) |