|
Читайте также: |
Практическое занятие. «Язык разметки гипертекста (HTML)»
Создайте Web-страницу, посвященную компонентам персонального компьютера при помощи языка разметки гипертекста HTML, используя Блокнот.
Задание 1. Создание структуры HTML-документа
1. Запустите программу Блокнот, выполнив команду Пуск > Программы > Стандартные > Блокнот. Откроется файл с именем Безымянный.
2. Сохраните пустой файл как Web-страницу, выполнив команду Файл > Сохранить как. С помощью поля Папка перейдите в свою личную папку. В нижней части окна, в раскрывающемся списке Тип файла выберите Все файлы (*.*) В поле Имя файла напишите index.htm и щелкните кнопку Сохранить.
3. Создайте структуру, определяющую HTML-документ.
<HTML>
Персональный компьютер
</HTML>
4. Сохраните внесенные изменения командой Файл > Сохранить.
5. Просмотрите результат с помощью браузера Internet Explorer. Для этого закройте программу Блокнот командой Файл > Выход или щелкнув по кнопке Закрыть в правом верхнем углу окна программы. Запустите браузер: Пуск > Программы > Internet Explorer. Загрузите созданную вами Web-страницу, выполнив команду Файл > Открыть. В диалоговом окне Открыть нажмите кнопку Обзор, перейдите в Вашу личную папку, найдите файл index.htm и нажмите кнопку Открыть. Подтвердите выбор файла, нажав кнопку ОК. Браузер отобразит созданный в Блокноте файл.
6. Для продолжения редактирования Вашей Web-страницы выполните команду Вид > В виде HTML.
7. Добавьте в структуру документа разделы HEAD (заголовок) и BODY (тело), модифицировав текст:
<HTML><HEAD>
</HEAD>
<BODY>
Персональный компьютер
</BODY></HTML>
8. Добавьте заголовок к Web-странице. В разделе HEAD документа допишите:
<TITLE>Пример Web-страницы о компонентах компьютера</TITLE>
9. Сохраните изменения командой Файл > Сохранить. Обратите внимание, что на Панели задач находится в свернутом состоянии окно браузера, в котором вы просматривали Web-страницу. Активизируйте его нажатием левой кнопки мыши, не закрывая программу Блокнот. Обновите Web-страницу, нажав кнопку Обновить, либо выполнив команду Вид > Обновить. Обратите внимание на произошедшие изменения (Вы увидите их, взглянув на строку заголовка). Для продолжения редактирования кода HTML нужно перейти в Блокнот с помощью Панели задач. При последующих изменениях содержания Web-страницы для просмотра нужно повторить описанную последовательность действий.
10. Отформатируйте уже набранный текст как заголовок первого уровня (тег H1), также выровняйте его по центру, используя параметр ALIGN.
<H1 ALIGN=”CENTER”> Персональный компьютер </H1>
Просмотрите внесенные изменения, сохранив их.
11. Задайте цвет фона. Установите курсор в конец открывающего тега <BODY> и введите параметр описания фона BGCOLOR=”#C4D5AA”, где ”#C4D5AA” – цвет (можете поэкспериментировать, вставляя различные значения кодов цвета, которые можно определить в редакторе Photoshop). HTML-код открывающего тега BODY стал таким:
<BODY BGCOLOR=”#C4D5AA”>
Просмотрите внесенные изменения, сохранив их.
12. Установите курсор в строку над тегом </BODY> и введите текст
Устройства ввода информации
Устройства хранения информации
Устройства вывода информации
Оформите данный текст в виде обычного списка, вставив до и после него соответствующие теги – <UL>, </UL>. Перед каждым элементом списка добавьте одинарный тег <LI>, обозначающий, что каждый элемент списка будет промаркирован точкой.
В итоге код данного фрагмента страницы будет таким.
<UL>
<LI>Устройства ввода информации
<LI>Устройства хранения информации
<LI>Устройства вывода информации
</UL>
Просмотрите внесенные изменения, сохранив их.
13. Назначьте тексту списка стиль полужирный, для чего заключите список между парой тегов <STRONG> </STRONG>.
Просмотрите внесенные изменения, сохранив их.
Задание 2. Использование таблиц
1. Вставьте в HTML-документ таблицу, состоящую из трех строк и двух столбцов. Для этого необходимо использовать специальные теги таблицы. При этом таблицы в HTML-документах заполняются построчно.
Ваша таблица будет описана следующим образом.
<TABLE ALIGN=JUSTIFY BORDER=2 COLS=2 WITH=”100%”> – описание таблицы из двух столбцов с толщиной рамки 2;
<TR> – начало описания первой строки;
<TD> </TD> – описание ячейки;
<TD> </TD>
</TR> – конец описания первой строки;
<TR> – начало описания второй строки;
<TD> </TD>
<TD> </TD>
</TR> – конец описания второй строки;
</TABLE> – закрывающий тег таблицы.
Для вставки тегов описания еще одной строки скопируйте в буфер теги описания строки из двух ячеек
<TR>
<TD> </TD>
<TD> </TD>
</TR>
Указав место вставки после тега второй строки </TR>, вставьте описание третьей строки.
2. Вставьте в описание таблицы текст ячейки первого столбца первой строки, для чего установив курсор после первого тега <TD>, введите текст Клавиатура. После этого описание первой строки таблицы будет таким.
<TR>
<TD> Клавиатура </TD>
<TD> </TD>
</TR>
Действуя аналогично, вставьте в ячейки первого столбца слова: Память, Монитор.
Просмотрите внесенные изменения, сохранив их.
3адание 3. Вставка рисунков из файла.
Перед выполнением задания посетите сайт http://www.ferra.ru/, отыщите и скопируйте в свою папку (это должна быть та же папка, в которой находится редактируемый Вами файл index.htm) изображения клавиатуры, жесткого диска и монитора.
Встраивание графики в текст документа происходит при помощи тега <IMG SRC=”полное имя файла с картинкой”> и дополнительных атрибутов этого тега: ALIGN – выравнивание, BORDER – ширина рамки в пикселях, WIDTH, HEIGHT – ширина и высота рисунка в пикселях.
1. Установите курсор после тега <TD>, соответствующего второй ячейке первой строки и опишите тег <IMG>.
<TD> <IMG SRC=”Имя файла с изображением клавиатуры” BORDER=0 ALT=”Фотография клавиатуры”>
</TD>
Атрибут ALT – это текст, который отображается вместо рисунка, если в браузере отключен вывод графики. Он также отображается во всплывающей подсказке при наведении указателя мыши на рисунок.
2. Действуя аналогично, вставьте во вторую и третью строки рисунки жесткого диска и монитора. Отредактируйте значение атрибута ALT на ваше усмотрение, например, Фотография жесткого диска, Фотография монитора.
Просмотрите внесенные изменения, сохранив их.
Задание 4. Создание гиперссылок
Ссылка на другой файл описывается как <A HREF=”имя файла”>…</A>, где имя файла – имя файла с расширением .htm. Если файл не находится в текущем каталоге (в том, в котором находится файл index.htm) нужно указать путь к нему или адрес в Internet.
Задайте гипертекстовую ссылку на слово Клавиатура. Перед словом Клавиатура вставьте открывающий тег гиперссылки <A HREF=” ”>, а после этого слова вставьте закрывающий тег </A>. Установив курсор между кавычками в открывающем теге <A HREF=” ”>, введите адрес страницы с обзором клавиатур на сайте http://www.ferra.ru, На эту страницу будет выполняться переход при щелчке на слове Клавиатура.
Проверьте вид отредактированной Web-страницы в Microsoft Internet Explorer. Щелкнув на слове Клавиатура на web-странице в окне Microsoft Internet Explorer, проверьте действие созданной гиперссылки
Дата добавления: 2015-07-20; просмотров: 45 | Нарушение авторских прав
| <== предыдущая страница | | | следующая страница ==> |
| От автора. | | | Введение |