Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву

Мы поможем в написании ваших работ!

ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Главная Избранные Случайная статья Познавательные Новые добавления Обратная связь FAQ

Технология создания и просмотра Web-страницы.

⇐ ПредыдущаяСтр 2 из 4Следующая ⇒

1. В текстовом редакторе наберите HTML-текст.

2. Сохраните HTML-файл с расширением .htm или .html.

3. Загрузите браузер.

4. Откройте этот файл. Для этого необходимо выполнить следующие команды: Файл: Открыть. В открывшемся диалоговом окне введите полное имя файла (если помните) или воспользуйтесь опцией Обзор.

5. Если вас не устраивает то, что отобразил браузер, необходимо вернуться к HTML-файлу (источнику) и внести изменения.

Чтобы вернуться к HTML-файлу (источнику), выполните следующие команды: Вид: В виде HTML ( или Источник). Второй способ – щелкните правой кнопкой мыши на документе. В появившемся контекстном меню выберите В виде HTML ( или Источник). Откроется ваш HTML-файл. Внесите изменения в HTML-текст. Сохраните изменения (Файл: Сохранить). Закройте Блокнот. Теперь окно браузера стало активным.

6. Выполните команду Обновить.

Для этого на панели инструментов нажмите кнопку обновить.

Полезный совет:

¨ Для удобства чтения и редактирования HTML-файла теги лучше всего набирать ПРОПИСНЫМИ буквами.

¨ При выполнении лабораторной работы вы создадите несколько файлов. Создайте на диске С: в папке Мои документы свою личную папку (например, ИВАНОВ). Сохраняйте свои файлы и другую необходимую информацию в эту папку (например, рисунки, пиктограммы и пр.).

СТРУКТУРА HTML-ДОКУМЕНТА

Текст всего документа заключается в теги: <HTML>... </HTML>.

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

Тело (<BODY>... </BODY>) – это та часть, в которой помещается собственно содержимое 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>
<HEAD>
<TITLE>Домашняя страница (укажите свою фамилию и имя). </TITLE>
</HEAD>

<BODY>
ПРИВЕТ! Это моя личная домашняя страничка! Меня зовут (укажите свою фамилию и имя).

Иванов Сергей – 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>
<HEAD>
<TITLE>Домашняя страница (укажите свою фамилию и имя). </TITLE>
</HEAD>

<BODY>
<H1> Добро пожаловать к (укажите свою фамилию и имя) </H1>

<H2>Приглашаются все желающие!</H2>

Иванов Сергей – e-mail: ivanov@psu.unibel.by

</ADDRESS>

</BODY>

</HTML>

_________________________________________________

Рис. 3. Иллюстрация к заданию 2.

ВВОД ТЕКСТА И ИНОЙ ИНФОРМАЦИИ

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

Тег нового абзаца.

Для форматирования абзацев используется тег <Р>, его следует располагать в начале нового абзаца, за исключением тех мест, где используется тег прерывания строки. <P> предписывает браузеру разделить два фрагмента текста пустой строкой. Закрывающий тег </P> использовать необязательно.

Таблица 1.

ТЕГ	АТРИБУТЫ
<Р> - тег нового абзаца	align= тип Задает способ выравнивания текста в абзаце: по левому краю (left, по умолчанию), центру (center) или правому краю (right). Например, <P align=right>…- абзац будет выровнен по правому краю.

Теги заголовков автоматически выполняют возврат каретки и оставляют пустую строку после текста между тегами <H n > и </H n>.

Тег перевода строки.

Тег перевода строки <BR> аналогичен тегу нового абзаца, но он не вводит пустую строку после отделяемого им текста. После этого тега текст продолжает отображаться с начала следующей строки.

В HTML существует два тега, производных от <BR>.

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

Если, напротив, браузеру не следует переносить текст на другую строку, его окружают тегами <NOBR> и </NOBR>. Теги запрета переноса блокируют автоматический перенос строк. Они полезны, когда вам необходимо, чтобы определенная группа слов всегда отображалась на одной строке.

Тег горизонтальной линии.

Тег горизонтальной линии <HR> может быть средством организации текста и дизайна. Он помогает посетителям страницы понять, какие части информации соотносятся друг с другом, а также разделяет страницу на несколько частей. Например, тег <HR> можно применить непосредственно над адресом электронной почты, чтобы отделить эту информацию от обычного текста. Используя атрибуты тега <HR> можно видоизменить горизонтальную линию.

Таблица 2.

ТЕГ

АТРИБУТЫ

<HR> - тег горизонтальной линии

align= тип Задается способ выравнивания линейки: по левому краю (left), по центру (center, по умолчанию) или правому краю (right). color= цвет Задается цвет линейки. size= n Установка толщины линейки равной целому числу пикселей. Чтобы толстые линии отображались сплошными (темными), используйте вместе со словом sizeопциюnoshade(<HR noshade size=5>). width= значение Установка ширины линейки либо равной целому числу пикселей, либо в процентах от ширины страницы.

Предварительное форматирование.

Если Вы хотите, чтобы браузер не форматировал ваш текст и чтобы информация, набранная в 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>

Иванов Сергей – e-mail:ivanov@psu.unibel.by

</ADDRESS>

</BODY>

</HTML>

_________________________________________________

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

У вас должно получиться что-то похожее на представленное на рис.4.

Рис. 4. Иллюстрация к заданию 3.

СТИЛЕВОЕ ОФОРМЛЕНИЕ ТЕКСТА

Изменить внешний вид страницы (отформатировать текст) можно при помощи тегов, приведенных в таблице 3.

Таблица 3.

Тег	Назначение
<B>…</B>	Заключенный в теги текст отображается жирным шрифтом.
<BIG>…</BIG>	Заключенный в теги текст будет отображаться шрифтом большего размера.
<I>…</I>	Заключенный в теги текст будет отображаться в курсивном начертании.
<SMALL>…</SMALL>	Включает и отключает использование мелкого шрифта.
<STRIKE>…</STRIKE>	Включает и отключает вывод зачеркнутого текста.
<SUB>…</SUB>	Заключенный в теги текст будет смещен вниз (нижний индекс).
<SUP>…</SUP>	Заключенный в теги текст будет смещен вверх (верхний индекс).
<TT>…</TT>	Телетайпный текст.
<U>…</U>	Стиль с подчеркиванием текста.

⇐ Предыдущая 123 4 Следующая ⇒

Рынок недвижимости. Сущность недвижимости

Решение задач с использованием генеалогического метода

История происхождения и развития детской игры

Последнее изменение этой страницы: 2016-08-01; просмотров: 500; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 18.216.190.167 (0.03 с.)