- •Департамент образования города москвы
- •Методические указания
- •Общие сведения Создание Web-страниц с помощью языка html.
- •Структура Web-страницы
- •Параметры страницы
- •Управления отображением символов Теги, управляющие формой отображения
- •Верхние и нижние индексы
- •Ход работы. Создание первой Web-страницы.
- •Пословицы
- •Контрольные вопросы:
- •Литература:
- •Задание для самостоятельной работы
Управления отображением символов Теги, управляющие формой отображения
Теги <ВIG> и <SMALL> — изменение размеров шрифта
Текст, расположенный между тегами <ВIG>…</ВIG> или <SMALL>… </SMALL>, будет, соответственно, больше или меньше стандартного.
Верхние и нижние индексы
С помощью тегов <SUР> и <SUВ> можно задавать верхние и нижние индексы,
Изменение параметров шрифта <FONT>…</FONT>
Тег <FONT > определяет выводимый шрифт, его цвет и размер. Требуется закрывающийся тег
Атрибуты
color - устанавливает цвет текста, используя значение цвета в виде RRGGBB –
Пример: FF0000 - красный цвет, либо используя константы цвета, например, для зеленого цвета <font color= "green">
face - определяет гарнитуру шрифта
size - размер текста в пределах от 1 до 7, где 1 - самый мелкий шрифт. По умолчанию равен 3.
Примечание: Атрибуты можно объединять.
Пример
Это обычный текст А это уже текст с использованием тега <font size=1> Текст с использованием шрифта семейства courier Используем тег <font size=5 color="blue">
> определяет выводимый шрифт, его цвет и размер. Закрывающий тег требуется.
Цвета фона и шрифта на всем протяжении документа можно задать при помощи атрибутов bgcolor и text в теге BODY.
Для управления гарнитурой шрифта используется атрибут face в команде <FONT>.
Пример:
<FONT face=School Book>Этот текст будет показан шрифтом School Book. </FONT>
Значением атрибута face может быть не один, а целый список шрифтов (разделитель – запятая).
Если хочется вывести надпись рубленым шрифтом, можно написать:
<FONT face=Arial, Gazeta SansSerif, Geneva, Jornal SansSerif>Этот текст будет показан рубленым шрифтом. </FONT>
Курсив (Italic). <I>…</I>
Текст, находящийся между этими тегами выводится курсивом.
Усиление (Вold)<B>…</B>
Выделение полужирным шрифтом.
<U>…</U>
Подчеркнутое начертание текста.
<S>...</S>
Зачеркнутое начертание текста.
<ТТ>...</TТ>
Элемент, обозначающий текст телетайпа (teletype). Его особенность заключается в том, что он обеспечивает использование моноширинного шрифта (все буквы имеют одинаковую ширину).
Горизонтальная линия <HR>
Горизонтальная линия (horizontal rule) – очень часто используемый элемент. Элемент не имеет конечного тега, но допускает ряд атрибутов:
size устанавливает высоту (толщину) линии;
width устанавливает ширину линии в пикселах или процентах;
noshade создает линию без тени;
color задает линии определенный цвет.
Пример: <hr size=3 color=red>
Ход работы. Создание первой Web-страницы.
Запустить текстовый редактор Блокнот командой Пуск-Программы-Стандартные-Блокнот
Введите HTML-код.
Сохраните файл [Файл-Сохранить], укажите расширение файла *.html.
Сверните окно Блокнота, найдите в своей папке созданный файл и откройте его двойным щелчком. В заголовке окна браузера высвечивается название Web-страницы Моя первая Интернет-страничка.
Теперь в теге <BОDY> зададим фон страницы (выберем его выше из таблицы цветов) и поля страницы. Введем, например: <BODY bgcolor=#00FF00 leftmargin=40> Нажмите Ctrl+S для сохранения изменений. Переключитесь в окно браузера и обновите страницу.
Заголовки. Вернитесь в блокнот. Введите в текст страницы, теги заголовков различных уровней (размеров) приведенные ниже.
<H1>Заголовок первого уровня</H1> <H2>Заголовок второго уровня</H2>
<H3>Заголовок третьего уровня</H3> <H4>Заголовок четвёртого уровня</H4>
<H5>Заголовок пятого уровня</H5>
<H6>Заголовок шестого уровня</H6>
<H7>Заголовок седьмого уровня</H7>
Обновите страницу браузера.
Форматирование шрифта. Вернитесь в блокнот и введите в текст страницы, теги, определяющие начертание шрифта. Отделить этот фрагмент от остального текста с помощью горизонтальных разделительных линий.
<HR>
Обычный текст<BR>
<В>Жирный</В><BR>
<1>Курсив</1><BR>
<U>Подчеркнутый</U><BR>
<В><I><U>Жирный курсив подчеркнутый </В></I></U><BR>
<ТТ>Равноширинный</ТТ><BR>
<STRONG>Уcилeннoe выделение</STRONG><BR>
<HR>
Обновите страницу браузера
.
Конечный код HTML –документа представлен ниже.
