Файловый архив студентов. Файловый архив студентов.
1263 вуза, 4625 предмета.
/ Регистрация
FAQ Обратная связь Вопросы и предложения
Добавил:
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Воронежский государственный технический университет
Предмет:
[НЕСОРТИРОВАННОЕ]
Файл:
Учебное пособие 400109.doc
Скачиваний:
3
Добавлен:
30.04.2022
Размер:
578.56 Кб
Скачать
☆
►Содержание►

Практическое занятие №5

Тема: Разработка web-страницы с помощью языка разметки гипертекста HTML

Время проведения: 2 часа

Программное обеспечение: OS Windows, Internet, HTML

Цель работы: освоить последовательность действий при разработке web-страницы с помощью языка разметки гипертекста HTML.

Методика выполнения работы:

HTML не является языком программирования, он предназначен для разметки текстовых документов (т.е. с помощью него мы размечаем текст, таблицы, картинки и т.д. на нашей странице). То, как будут выглядеть картинки, текст и другие элементы на вашей странице, и как они будут располагаться относительно друг друга, определяют метки (tags или тэги). <тэг></тэг> - не просто тэг, это контейнер - тэг, который может содержать внутри себя другие тэги (и текст).

1. Выполнить запуск приложения Блокнот (Пуск - Программы -Стандартные - Блокнот) и внести следующий текст:

<html> <head>

<Ше>Мой первый шаг </title>

</head>

<body>

Здравствуйте, это моя первая страница.

<br>

Добро пожаловать!

</body>

</html>

Сохранить документ, присвоив ему имя *.html (к примеру, index.html). Открыть браузер, допустим, InternetExplorer (не закрывая Блокнот), а в браузере открыть наш документ: Файл - Открыть - кнопка Обзор - Наш документ (index.html) и просмотреть результат. Нами была описана простейшая web-страница. Здесь

<head></head> - голова документа <body></body> - тело документа

Все тэги, расположенные между <head></head> - это служебная информация. К примеру, <title> - заголовок - это имя файла в браузере (заголовок окна). Все тэги, расположенные между <body></body> - непосредственное содержание документа. Обратите внимание:

<тэг1><тэг2><тэг3> ... </тэг3></тэг2></тэг1>

2. Рассмотрим возможность изменения цвета фона документа и шрифтов.

<html> <head>

^п^Мой первый шаг </title> </head>

<body text="#336699" bgcolor="#000000"> Здравствуйте, это моя первая страница.

<br>

<fontcolor="#CC0000"> Добро пожаловать!</font> :)

</body>

</html>

3. Параграфы вводятся тэгом: <p></p> С помощью параграфов можно выровнять текст:

по левому краю <p align="left">текст</p>

по правому краю документа <p align="right">текст</p> по обоим краям документа <p align="justify">текст</p>

<html> <head>

<title>Мой первый шаг </title>

</head>

<bodytext="#336699" bgcolor="#000000"> <p align="center"> Здравствуйте, это моя первая страница.

<br>

<fontcolor="#CC0000"> Добро пожаловать! </font> :) </p>

</body>

</html>

4. Заголовки. Существуют шесть уровней заголовков: <H1>, <H2>...<H6>, где hi - самый важный, h6 - наименее важный заголовок. Вводя заголовки в текст, вы позволяете пользователю легко ориентироваться на странице. Заголовками вы определяете структуру внутри текста.

</title>

bgcolor="#000000">

align="center"> страница.</Н3>

<html> <head>

^ги^Мой первый шаг

</head>

<bodytext="#336699"

<р

<Н3>Здравствуйте, это моя первая

<br>

<fontcolor="#CC0000"> Добро пожаловать! </font>

</p> </body> </html>

Заголовки предназначены для выделения небольшой части текста (строки, фразы). Но, если вы хотите выделить большой фрагмент текста, то заголовки для этого не применяются - используют атрибут size тэга <font></font>, который устанавливает желаемый размер шрифта:

<fontsize="+4"> текст </font> <fontsize="+3"> текст </font> <fontsize="+2"> текст </font> <fontsize="+1"> текст </font> <fontsize="+0"> текст </font> <fontsize="-1"> текст </font> <fontsize="-2"> текст </font>

5. Определение стилей шрифта. Стили шрифта веб-страницы описываются следующим образом: <b> Полужирный текст </b>

<i> Наклонный текст (курсив) </i>

<tt>моноширинный шрифт </tt>

<u> Подчеркнутый текст </u>

<strike> Перечеркнутый </strike> <s> Перечеркнутый </s> <small> Малый </small> <big> Большой </big>

Верхний индекс Нижний индекс <sub> sub </sub> <sup> sup </sup>

<html> <head>

<title>Mofi первый шаг </title>

</head>

<bodytext="#336699" bgcolor=M#000000M> <р align="center"> <H3>Здравствуйте, это моя первая страница. </H3>

<br>

<fontcolor="#CC0000"> Добро пожаловать!</font> <Ь>Полужирный текст</b>

</p>

</body>

</html>

К одному фрагменту текста может применяться сразу несколько тэгов:

<tt><b><i> текст </i></b></tt>

6. Добавление изображений:

<imgsrc="my.jpg">

Создайте произвольный рисунок в редакторе Faint, сохраните изображение как my.jpg в той же папке.

шаг </title>

bgcolor="#000000"> первая страница. </H3>

пожаловать! </font> align="justify">

<html> <head>

<title>MM первый </head>

<bodytext="#336699" <H3>Здравствуйте, это моя

<br>

<fontcolor="#CC0000"> Добро

<p

<imgsrc="my.jpg"> </p> </body> </html>

С помощью атрибута align можно выровнять рисунок относительно текста: <imgsrc="my.jpg" align="left">

Это означает, что картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа. Чтобы сделать наоборот (картинка справа, текст слева), надо прописать right: <imgsrc="my.jpg " align="right">

(1) - <imgsrc="my.jpg " align="bottom">

  1. - <imgsrc=" my.jpg " align="middle">

  2. - <imgsrc=" my.jpg " align="top">

Кроме атрибута align для тэга <img> можно ввести еще несколько атрибутов:

  1. - <imgsrc="my.jpg" vspace="10">

  2. - <imgsrc="my.jpg" hspace="30">

(3) - <imgsrc="my.jpg" alt-'моя фотография">

  1. - <imgsrc="my.jpg" width="100">

  2. - <imgsrc="my.jpg" height="200">

Текст может располагаться внизу картинки (это по умолчанию) - (1), посередине - (2), и вверху - (3):

(6) - <imgsrc="my.jpg" border="5"> По пунктам:

  1. - атрибут vspace - задает расстояние между текстом и рисунком (по вертикали). Расстояние задается в пикселях. Pixel - минимальная единица изображения, точка. Например, разрешение экрана 800x600 - 800 на 600 точек. В нашем примере расстояние равно 10 пикселям.

  2. - атрибут hspace - тоже задает расстояние между текстом и рисунком, но по горизонтали. Расстояние задается в пикселях. В нашем примере оно равно 30 пикселям (точкам).

  3. - атрибут alt - краткое описание картинки. Если навести курсором мыши на рисунок, и так подержать его (курсор) несколько секунд, выскочит описание картинки. В нашем случае это будет фраза - "моя фотография". Если параметр alt не задавать, описания не будет. Но умные люди говорят, что описание картинкам задавать следует (особенно, если это кнопки), т.к. есть особенные люди, которые бродят по интернету с отключенной графикой. Без alt им не будет видно на что нажимать (если картинка является ссылкой или кнопкой в меню), т.к. картинка не отображается, а при заданном alt, можно увидеть надпись, для чего картинка предназначена.

  4. атрибут width - ширина самой картинки (в пикселях). Если ширину не задавать специально, то по умолчанию она будет равна реальной ширине картинки (а так вы можете ее сделать или уже, или шире).

  5. - атрибут height - высота самой картинки (тоже в пикселях). Так же как в случае с width высоту (height) картинки можно и не задавать. Правда, те же умные люди говорят, что размеры картинок следует задавать, для тех же особенных людей с отключенной графикой.

(6) - атрибут border - рамка вокруг самой картинки (в пикселях). Можно не задавать. Однако, по умолчанию, рамка вокруг картинки есть всегда. И если вы хотите убрать ее, то выставляйте атрибут borderравным нулю.

7. Пусть prf.html - документ с вашими фотографиями. Фразу "посмотреть мои фотографии" сделаем ссылкой на prf.html:

<a href="prf.html">посмотреть мои фотографии<^>

Тэг <a></a> делает ссылкой заключенную в него картинку или фразу (текст). Принципы прописывания пути:

(1) - <a href="prf.html">мои фотографии<^>

(2) - <a href="photos/prf.html">мои фотографии<^>

(3) - <a href="http://www.homepage.ru/prf.html">мои фотографии</a>

В случае (1) документ лежит в той же директории (папке), что и документ, в котором мы ссылаемся на prf.html, в случае (2) документ лежит в поддиректории /photos, в случае (3) мы ссылаемся на сайт http://www.homepage.ru, где лежит нужный нам документ. Первые два примера (1) и (2) - называют относительными путями. (3) -абсолютный, т.е. указанный полностью, включая имя сайта (в нашем случае -http://www.homepage.ru/). Абсолютный путь мы используем, когда ссылаемся на чужие странички, относительный мы используем, когда ссылаемся на документы внутри нашего сайта.

Для всех ссылок в нашем документе мы можем прописать цвета: link - цвет просто ссылки, alink - цвет активной ссылки (нажатой), vlink - цвет уже посещенной ссылки.

Ссылка на почтовый ящик прописывается немного иначе: <a href="mailto:pochta@mail.ru"> pochta@mail.ru </a>

<html> <head>

^ш^Мойпервыйшаг^Ш^ </head>

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

<Ю>Здравствуйте, этомояперваястраница.<ЛТ3> <br>

<font color="#CC0000"> Добропожаловать!</гой>

<p align="justify"> <imgsrc="my.jpg"> <a href="prf.html">

<a href="mailto:pochta@mail.ru"> pochta@mail.ru </a> </p>

</body>

</html>

8.Таблица задается тэгом:<table></table>

Таблица включает строки и столбцы (ячейки):

<tr></tr> - строка таблицы

<td></td> - столбец (ячейка) таблицы Записать после тега <body> пример таблицы:

<table> <tr>

<td height="35" width="50"

bgcolor="#FFCC33" valign="top"><center>1x1</center></td>

<td width="50" bgcolor="#336699"><center>1x2</center></td>

<td width="50"

bgcolor="#FFCC33" valign="bottom"><center>1x3</center></td>

</tr>

<tr>

<td height="35" width="50"

bgcolor="#336699" valign="bottom"><center>2x1</center></td>

<td width="50" bgcolor="#FFCC33"><center>2x2</center></td>

<td width="50" bgcolor="#336699" valign="top"><center>2x3</center></td>

</tr>

</table>

9. Списки определяют структуру документа и визуально отображаются следующим образом:

маркированный

  • Текст

  • Текст

  • Текст

  • Текст нумерованный

  1. Текст

  2. Текст

  3. Текст

  4. Текст

Чтобы ввести элементы списка (текст, текст ...), нам нужно ввести в нашу конструкцию тэг <li> (не требует закрывающего тэга):

<ul>

<И>Текст

<И>Текст <И>Текст <И>Текст

</ul>

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

<li type="disk">

<li type="circle"> <li type="square">

Для нумерованных списков: <ol type="I">

<li>Текст <Н>Текст <li>Текст </ol>

Здесь атрибут type может принимать значения:

1 арабские цифры

a буквы нижнего регистра

A буквы верхнего регистра

i римские цифры в нижнем регистре

I римские цифры в верхнем регистре

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]
Помощь Обратная связь Вопросы и предложения Пользовательское соглашение Политика конфиденциальности