Разработка сайта с использованием языка разметки текста HTML

Аппаратное и программное обеспечение. Компьютер с установленной операционной системой Windows или Linux, подключённый к Интернету.

Цель работы. Научиться создавать Web-сайты с использованием языка разметки текста HTML в простейшем текстовом редакторе Блокнот.

Задание. В операционной системе Windows или Linux создать сайт с использованием языка разметки текста HTML в простейшем текстовом редакторе Блокнот. Сайт «Компьютер» должен содержать начальную страницу и страницы «Программы», «Словарь» и «Анкета». Сохранить их в файлах с именами index.htm, software.htm, glossary.htm и anketa.htm в папке сайта.

Начальная страница сайта. Создадим начальную страницу Web-сайта «Компьютер».

1. В операционной системе Windows или Linux запустить простейший текстовой редактор Блокнот.

2. Ввести тэги, определяющие структуру Web-страницы.

Ввести заголовок Web-страницы: «Компьютер».

Ввести заголовок текста, отображаемый в браузере: «Всё о компьютере»

<HTML>
<HEAD>
<TITLE>Компьютер</TITLE>
</HEAD>
<BODY>
Всё о компьютере
</BODY>
</HTML>

Просмотреть получившуюся Web-страницу в браузере.

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

3. <P ALIGN="left">На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие. </P>
<P ALIGN="right">Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.</P>

Пусть начальная страница сайта «Компьютер» будет содержать центрированный крупный заголовок синего цвета, отделенный горизонтальной линией от двух по-разному выровненных абзацев.

4. <FONT COLOR="blue">
<H1 ALIGN="center">
Всё о компьютере
</H1>
</FONT>
<HR>
<P ALIGN="left">На этом сайте...</P>
<P ALIGN="right">Терминологический словарь...</P>

На начальной странице сайта «Компьютер» логично разместить изображение компьютера.

5. Для того чтобы рисунок располагался по правому краю текста, тэг вставки изображения должен принять следующий вид:

<IMG SRC="computer.gif" ALIGN="right">

Рисунок для практики:

Создадим папку сайта «Компьютер» и добавим в сайт пустые страницы «Программы», «Словарь» и «Анкета». Сохраним их в файлах с именами software.htm, glossary.htm и anketa.htm в папке сайта. Такие пустые страницы должны иметь заголовки, но могут пока не иметь содержания.

6. <HTML>
<HEAD>
 <TITLE>Заголовок страницы</TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>

Создадим панель навигации по сайту «Компьютер». На начальной странице сайта разместим указатели гиперссылок на страницы сайта. В качестве указателей гиперссылок удобнее всего выбрать названием страниц, на которые осуществляется переход.

Разместим указатели гиперссылок внизу страницы в новом абзаце в одну строку, разделив их пробелами (&nbsp). Такое размещение гиперссылок часто называют панелью навигации.

Созданная начальная страница Web-сайта «Компьютер» содержит заголовок, изображение компьютера, два абзаца текста, панель навигации и ссылку на адрес электронной почты.

7. <P ALIGN="center">
[<A HREF="software.htm">Программы</A>] &nbsp[<A HREF="glossary.htm">Словарь</A>] &nbsp[<A HREF="anketa.htm">Анкета</A>]
</P>

<ADRESS>
<A HREF="mailto:username@server.ru">E-mail: username@server.ru</A>
</ADRESS>


























Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:  



double arrow
Сейчас читают про: