Работа 1. Основные тэги HTML.
Создать Web-страницу, знакомящую с основными
тэгами HTML.
1.
Запустить текстовый редактор Блокнот командой
[Пуск - Программы - Стандартные - Блокнот].
2.
Ввести HTML-код, задающий
структуру Web-страницы:
<HTML>
<HEAD>
<TITLE>Первое знакомство с тэгами HTML</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
3.
Ввести команду [Файл - Сохранить]. Файлу Web-страницы присвоить имя первое_знакомство.htm
4.
Сохранить в вашу папку.
5.
Запустить браузер и открыть созданный файл
командой [Файл - Открыть]. В заголовке окна браузера высвечивается название
Web-страницы Первое знакомство с тэгами HTML.
6.
Открыть заново этот файл с помощью блокнота (не
закрывая этот файл в браузере) и внести в текст страницы после <BODY> в пустую строку тэги заголовков различных уровней (размеров).
<H1>Заголовок первого
уровня</H1>
<H2>Заголовок второго уровня</H2>
<H3>Заголовок третьего уровня</H3>
<H4>Заголовок четвертого уровня</H4>
<H5>Заголовок пятого уровня</H5>
<H6>Заголовок шестого уровня</H6>
Сохранить изменения в блокноте. Активизировать
браузер с открытым в нем предыдущим вариантом страницы. Щелкнуть по кнопке Обновить.
В процессе создания Web-страницы приходится добавлять
новые тэги и просматривать получаемый результат.
7.
В окне браузера отобразится обновленная
Web-страница. Закончить работу с файлом.
Работа 2. Форматирование шрифта.
Внести
в текст страницы тэги, определяющие начертание шрифта и горизонтальных
разделительных линий. Отделить этот фрагмент от остального текста с помощью
горизонтальных разделительных линий.
1. Открыть файл из вашей папки первое_знакомство.htm через блокнот.
2. Внести в текст страницы тэги, между тегами
<H6>Заголовок шестого
уровня</H6>
вводить все сюда
</BODY>
(в
блокнот необходимо внести только то, что написано полужирным шрифтом в работе.)
3. Разделительная линия:
<HR>
Форматирование шрифта:
<B>Жирный</B>
<I>Курсив</I>
<U>Подчеркнутый</U>
<B><I><U>Жирный подчеркнутый
курсив</B></I></U>
<TT>Равноширинный</TT>
Выделение:
<EM>Выделение</EM>
<STRONG>Усиленное выделение</STRONG>
<HR>
4.
Внести в текст страницы тэги, задающие списки
нумерованные и ненумерованные, а также списки определений.
Нумерованный список:
<OL>
<LI>Первый элемент списка</LI>
<LI>Второй элемент списка</LI>
<LI>Третий элемент списка</LI>
</OL>
Ненумерованный список:
<UL>
<LI>Первый элемент списка</LI>
<LI>Второй элемент списка</LI>
<LI>Третий элемент списка</LI>
</UL>
Список определений:
<DL>
<DT>ТЕРМИН 1</DT>
<DD>Пояснение к термину 1</DD>
<DT>ТЕРМИН 2</DT>
<DD>Пояснение к термину 2</DD>
<DT>ТЕРМИН 3</DT>
<DD>Пояснение к термину 3</DD>
</DL>
5.
Сохранить изменения в блокноте. Активизировать
браузер. В окне браузера отобразится обновленная
Web-страница.
6.
В итоге в файле первое_знакомство.htm у вас должно получиться
Работа 4. Вставка изображений.
Вставка изображений. Для размещения на Web-страницах используются
графические файлы форматов GIF, JPEG
и PNG. Изображения помещаются на Web-страницу
тэгом IMG с атрибутом SRC, сообщающим
браузеру имя и местоположение графического файла.
<IMG
SRC="image_name">
Если рядом с
изображением не должно быть текста, его размещают внутри отдельного абзаца.
Выравнивание рисунка по горизонтали в этом случае задают в тэге <P>. Размеры изображения (в пикселах) можно задать с помощью атрибутов
WIDTH и HEIGHT. К изображению
атрибутом ALT можно добавить название, которое появляется
на экран или вместо иллюстрации (если по какой - либо причине графика не
выводится в окне браузера), или в качестве всплывающий строки, при указании на
рисунок мышью.
1. Открыть файл первое_знакомство.htm в блокноте.
2. Вставить в начале страницы картинку (после тега <BODY>) с помощью тега:
<P
ALIGN="center"><IMG SRC="ПК.png"
WIDTH="380" HEIGHT="380" ALT="Просто ПК"></P>
Атрибут ALIGN выравнивает по верхнему краю, середине или нижнему краю изображения,
справа или слева от него с помощью значений: top, bottom, middle, left или right.
3. Форматирование текста. Для выделения
фрагментов текста используется тэг <FONT>. Атрибут FACE определяет гарнитуру шрифта, атрибут COLOR – цвет
и атрибут
SIZE - размер символов.
Выравнивание текста по горизонтали задает атрибут ALIGN.
Выравнивание можно добавлять к тэгам, задающим заголовки, абзацы, или
размещающим информацию в таблице. Выровнять по центру заголовок страницы.
HSPACE, VSPACE - горизонтальный и вертикальный отступы между картинкой и
текстом. Введем заголовки различных уровней сразу после изображения.
<H1
ALIGN="center"><FONT COLOR="#FF6600">А это -
заголовок нашей странички.</FONT></H1>
<H2
ALIGN="center"><FONT COLOR="#FF6622">А это -
подзаголовок нашей странички.</FONT></H2>
Сохранить файл и
Обновить страничку.
Выделим часть текста более
крупным шрифтом и цветом и определим выравнивание
<P ALIGN="left"><FONT
SIZE="6" COLOR="#FF0066" FACE="Arial" > Давайте, просто напечатаем простой текст для создания нашей
странички, выровненный по левому краю.</FONT></P>
<P ALIGN="right"><FONT
SIZE="5" COLOR="#FF0000" FACE="Times New
Roman" > Давайте, просто напечатаем простой текст
для создания нашей странички, выровненный по правому
краю.</FONT></P>
<P ALIGN="center"><FONT
SIZE="4" COLOR="#FF0011" FACE="Arial"> Давайте, просто напечатаем простой текст для создания нашей
странички, выровненный по центру.</FONT></P>
4. Сохранить файл и Обновить страничку). Закончить работу с файлом.
Работа 5. Оформление гиперссылок.
1. Запустить текстовый редактор Блокнот командой [Пуск - Программы - Стандартные
- Блокнот].
2. Открыть файл первое_знакомство.htm
3. Различные виды гиперссылок. Связать Web-страницу с другими документами можно с помощью универсального тэга
<A>, и его атрибута HREF,
указывающим в каком файле хранится вызываемый ресурс.
<A rel="nofollow ugc" target="_blank" href="file_name">Указатель ссылки</A>
file_name – путь к файлу или его URL-адрес в Интернете.
Если вызываемый документ размещается в той же папке, что и Web-страница, то можно указывать только имя файла.
Указатель ссылки в окне
браузера выделяется подчеркиванием и особым цветом. При указании на него мышью,
ее курсор превращается в значок «рука». Щелчок мыши по указателю, вызывает
переход на документ, указанный в гиперссылке. Используем различные значения
атрибута HREF для реализации различных реакций браузера:
<A
HREF="вторая страница.htm">Моя вторая страничка</A>
Сохранить файл и
Обновить страничку
4. А теперь с оформлением выравнивания и шрифтов Исправляем предыдущую
запись.
<A
HREF="вторая
страница.htm"><P
ALIGN="center"><FONT SIZE="4" COLOR="#FFaa11" FACE="Arial"> Моя вторая страничка</FONT></P></A>
5. Сохранить файл и Обновить страничку
6.
Создадим вторую страничку. Для этого откроем Блокнот
еще раз. И наберем в нем следующий текст.
<HTML>
<HEAD>
<TITLE>Моя вторая страница</TITLE>
</HEAD>
<BODY
BGCOLOR="#FF00CC" BACKGROUND="fon.png"
TEXT="#993300" LINK="#00FF00" ALINK="#FF0000"
VLINK="#00FF00">
<A
rel="nofollow ugc" target="_blank" href="первое_знакомство.htm"><P
ALIGN="center"><FONT SIZE="4"
COLOR="#FFaa11" FACE="Arial"> Моя первая страничка, на
ней я познакомился (лась) с основными тегами </FONT></P></A>
</BODY>
</HTML>
7. Сохраним файл под именем вторая_страница.htm
8. Запустить первый файл первое_знакомство.htm. Запустим гиперссылку Моя вторая страница.
В качестве указателя
ссылки можно использовать не только текст, но и изображение. В этом случае
указатель ссылки задается с помощью тэга <IMG>. Пусть в нашем проекте при
щелчке мышью по маленькому рисунку, вызывается ее крупная фотография. Такой
прием часто используют, для снижения времени загрузки страницы. Посетитель
увидит уменьшенные копии рисунков, а при желании, сможет загрузить
полномасштабное изображение. Дополним нашу страничку, введем текст в пустую
строку в файл вторая_страница.htm
< A rel="nofollow ugc" target="_blank" href="картинка.jpg"><IMG SRC="картинка.gif" WIDTH="192"
HEIGHT="100"></A>
9. Сохранить файл и Обновить обе странички
Работа 6-8. Творческое задание.
Творческое задание. «Мой сайт». Создать Web-сайт, рассказывающий о Процессорах, Внешней
памяти, Внутренней памяти, Свободная тема.
Сайт
рекомендуется хранить в отдельной, специально созданной папке Сайт, вложенной
в папку Ваша_фамилия. Здесь будут находиться как Web-страницы,
так и графические файлы.
HTML код
первой страницы.
<HTML>
<HEAD>
<TITLE>Первое
знакомство с тэгами HTML</TITLE>
</HEAD>
<BODY
BGCOLOR="#FFFFCC" BACKGROUND="фон.jpg"
TEXT="#993300" LINK="#00FF00" ALINK="#FF0000"
VLINK="#00FF00">
<A rel="nofollow ugc" target="_blank" href="вторая страница.htm"><P
ALIGN="center"><FONT SIZE="4"
COLOR="#FFaa11" FACE="Arial"> Моя вторая страничка</FONT></P></A>
<P
ALIGN="center"><IMG SRC="ПК.png"
WIDTH="380" HEIGHT="380" ALT="Просто ПК"></P>
<H1 ALIGN="center"><FONT
COLOR="#FF6600">А это - заголовок нашей
странички.</FONT></H1>
<H2
ALIGN="center"><FONT COLOR="#FF6622">А это -
подзаголовок нашей странички.</FONT></H2>
Выделим
часть текста более крупным шрифтом и цветом и определим выравнивание
<P
ALIGN="left"><FONT SIZE="6" COLOR="#FF0066"
FACE="Arial" > Давайте, просто напечатаем простой текст для
создания нашей странички, выровненный по левому краю.</FONT></P>
<P
ALIGN="right"><FONT SIZE="5"
COLOR="#FF0000" FACE="Times New Roman" > Давайте, просто
напечатаем простой текст для создания нашей странички, выровненный по правому
краю.</FONT></P>
<P
ALIGN="center"><FONT SIZE="4"
COLOR="#FF0011" FACE="Arial"> Давайте, просто напечатаем
простой текст для создания нашей странички, выровненный по
центру.</FONT></P>
<H1>Заголовок
первого уровня</H1>
<H2>Заголовок
второго уровня</H2>
<H3>Заголовок
третьего уровня</H3>
<H4>Заголовок
четвертого уровня</H4>
<H5>Заголовок
пятого уровня</H5>
<H6>Заголовок
шестого уровня</H6>
<HR>
<B>Жирный</B>
<I>Курсив</I>
<U>Подчеркнутый</U>
<B><I><U>Жирный
подчеркнутый курсив</B></I></U>
<TT>Равноширинный</TT>
<EM>Выделение</EM>
<STRONG>Усиленное
выделение</STRONG>
<HR>
<OL>
<LI>Первый
элемент списка</LI>
<LI>Второй
элемент списка</LI>
<LI>Третий
элемент списка</LI>
</OL>
<UL>
<LI>Первый
элемент списка</LI>
<LI>Второй
элемент списка</LI>
<LI>Третий
элемент списка</LI>
</UL>
<DL>
<DT>ТЕРМИН
1</DT>
<DD>Пояснение к
термину 1</DD>
<DT>ТЕРМИН
2</DT>
<DD>Пояснение к
термину 2</DD>
<DT>ТЕРМИН
3</DT>
<DD>Пояснение к
термину 3</DD>
</DL>
</BODY>
</HTML>
HTML код второй страницы.
<HTML>
<HEAD>
<TITLE>Моя
вторая страница</TITLE>
</HEAD>
<BODY
BGCOLOR="#FF00CC" BACKGROUND="fon.png"
TEXT="#993300" LINK="#00FF00" ALINK="#FF0000"
VLINK="#00FF00">
<A rel="nofollow ugc" target="_blank" href="первое_знакомство.htm"><P
ALIGN="center"><FONT SIZE="4"
COLOR="#FFaa11" FACE="Arial"> Моя первая страничка, на ней я познакомился (лась) с основными тегами </FONT></P></A>
<A rel="nofollow ugc" target="_blank" href="картинка.jpg"><IMG
SRC="картинка.jpg" WIDTH="192"
HEIGHT="100"></A>
</BODY>
</HTML>
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.