Главная Обратная связь

Дисциплины:






Задание 2. Основы разработки HTML-страниц



Цель работы: Усвоить, что из себя представляет разработка HTML-страниц. Научиться создавать простую HTML-страницу.

HTML (HyperText Markup Language) – это язык, который используется для построения страниц. При этом используется система так называемых "тэгов" (tags), с помощью которых производится форматирование текста страницы, организация ссылок, работа с графикой и т.д. Тэг представляет собой специальное слово или букву, заключенные в угловые скобки "<" и ">". Вот несколько примеров тэгов:

ТэгНазначение

<b>Делает текст жирным

<i>Делает текст курсивом

<p> Определяет абзац

<img>Помещает изображение на Web-страницу

 

Большое количество элементов HTML имеют два тэга: открывающий и закрывающий. Последний выглядит также, как и открывающий, но имеет косую черту (/) после скобки "<". Например, строка HTML:

Это <b>жирный</b> текст.

 

Будет отображаться как

Это жирный текст.

 

Все HTML-страницы должны иметь заголовок и тело, которые маркируются тегами <head> и <body>, соответственно. И, наконец, вся страница должна быть обрамлена открывающим и закрывающим тегами <html>. Поэтому общая структура страницы будет выглядеть так:

 

<html>

<head>

(Внутренние тэги заголовка)

</head>

<body>

(Тело страницы: текст и графика)

</body>

</html>

 

HTML-страницы представляют собой обычные текстовые файлы с расширением имени .htm или .html. Для их создания, может быть использован любой текстовый редактор, например, notepad.exe (Блокнот) или write.exe. Используя его, создадим нашу первую страницу.

  1. Подготовьте следующий текст и сохраните его в текстовом файле с именем, например, MyHTMLPage.htm:

<html>

<head>

<title>Моя первая страница</title>

</head>

<body>

</body>

</html>

  1. Загрузите страницу в браузер и убедитесь, что Ваш заголовок появился в верхней части окна браузера.
  2. Поместите на страницу произвольный текст так, как показано в примере ниже:

<html>

<head>

<title>Моя первая страница</title>

</head>

<body>

<p>Мой текст первого абзаца.</p>

<p>Мой текст второго абзаца.</p>

</body>

</html>

 

  1. Загрузите страницу в браузер и убедитесь, что Ваш текст появился в окне браузера.
  2. Сделайте часть текста жирным шрифтом. Например, так:

<p>Мой текст <b>первого</b> абзаца.</p>

 

  1. Отцентрируйте абзац следующим образом:

<p align="center">Мой текст <b>первого</b> абзаца.</p>



 

  1. Измените цвет фона Вашей страницы на черный, а цвет текста – на белый:

<body bgcolor="#000000" text="#FFFFFF">

 

  1. Ваша страница должна принять следующий вид:

<html>

<head>

<title>Моя первая страница</title>

</head>

<body bgcolor="#000000" text="#FFFFFF">

<p align="center">Мой текст <b>первого</b> абзаца.</p>

<p>Мой текст второго абзаца.</p>

</body>

</html>





sdamzavas.net - 2018 год. Все права принадлежат их авторам! В случае нарушение авторского права, обращайтесь по форме обратной связи...