Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву

Мы поможем в написании ваших работ!

ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Главная Избранные Случайная статья Познавательные Новые добавления Обратная связь FAQ

Использование специальных символов

⇐ ПредыдущаяСтр 6 из 7Следующая ⇒

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

В таблице 2 представлен набор часто используемых символов.

Таблица 2. Специальные символы

Код символа	Числовой код	Мнемоничес-кий код	Название	Символ
	&#34	"	Прямая кавычка	"
	&#60	<	Знак «меньше»	<
	&#62	>	Знак «больше»	>
	&#162	¢	Цент	¢
	&#166	¦	Вертикальная черта	¦
	&#167	§	Знак параграфа	§
	&#171	«	Левая типографская кавычка	«
	&#176	°	Знак градуса	°
	&#177	±	Знак «плюс минус»	±
	&#182	¶	Знак абзаца	¶
	&#187	&radio;	Правая типографская кавычка	»
	&#215	×	Знак умножения (крестик)	x
	&#247	÷	Знак деления	÷

Задания для самостоятельного выполнения

1. В созданную ранее Web-страницу вставьте текст, содержащий знаки левой и правой типографской кавычки, знак абзаца и знак параграфа.

Формирование текста на странице

Заголовки объявляются парой тегов: <h1> </h1>, <h2> </h2>, <h3> </h3>, <h4> </h4>, <h5> </h5> или <h6> </h6>. Заголовок с тегом <h1> является самым крупным, а с тегом <h6> - самым мелким.

Атрибут align позволяет выровнять заголовок по правому краю или центрировать. Значение right атрибута align обеспечивает выравнивание текста по правому краю, а значение center – центрирование.

Для наклонного начертания текста Web-страницы используется тег <i> </i>.

Тег <b> </b> устанавливает полужирное начертание текста, а тег <u> </u> - подчеркнутое начертание символов.

Тег <pre> </pre> позволяет сохранить заданную разбивку и расположение строк текста.

Тег <br> позволяет перейти с одной строки на другую.

Пример форматирования текста (рис.3):

Текст HTML-программы	Комментарий
<html>
<head>
<title> Моя домашняя страничка </title>
</head>
<body bgcolor=white text=black>
<center>	Начальный тег выравнивания по центру
<h1>	Начальный тег самого крупного заголовка
Моя домашняя страничка	Текст заголовка
</h1>	Конечный тег заголовка
</center>	Конечный тег выравнивания по центру
<b>	Начальный тег установки полужирного начертания текста
Здравствуйте.	Текст
</b>	Конечный тег полужирного начертания текста
<br>	Тег перехода на другую строку
Приветствую Вас на своей домашней страничке.<br><br>
Немного о себе:<br>
Студент Тюменского государственного университета
<i>	Начальный тег установки наклонного начертания текста
<pre>	Начальный тег авторского форматирования
Обучаюсь в международном институте финансов, управления и бизнеса	Авторский текст
</pre>	Конечный тег авторского форматирования
</i>	Конечный тег наклонного начертания текста
</body>
</html>

Рис.3 Отформатированный текст на Web-странице

Задания для самостоятельного выполнения

1. Используя теги форматирования текста, измените страничку о своей группе.

2. В начале документа расположите приветствие, используя различные уровни заголовка

3. Используя, теги форматирования, отредактируйте созданный HTML-документ следующим образом:
a) первый абзац выравнивается по левому краю, цвет шрифта – красный;
b) второй абзац - по центру, цвет шрифта – синий, используйте наклонное начертание текста.

Вставка изображения

Для вставки изображения используется тег <img>. Обязательный атрибут src определяет имя вставляемого файла или его электронный адрес в Интернете.

Для установки фонового рисунка применяется атрибут background тега <body>.

Атрибут hspace задает размеры горизонтальных отступов по бокам изображения.

Пример вставки изображения (рис. 4):

Текст HTML-программы	Комментарий
<html>
<head>
<title> Моя домашняя страничка </title>
</head>
<body bgcolor=white text=black background=fon.gif>
<center>
<h1>Моя домашняя страничка</h1>
</center>
<img src="foto.gif"	Вставка изображения
align=left	Обтекание изображения текстом справа
hspace=10>	Расстояние левого и правого поля вокруг изображения равное 10 пикселам
<b>Здравствуйте.</b><br>
Приветствую Вас на своей домашней страничке.<br><br>
Немного о себе:<br>
Студент Тюменского государственного университета
<i>
<pre> Обучаюсь в международном институте финансов, управления и бизнеса
</pre>
</i>
</body>
</html>

Рис.4 Внешний вид Web-страницы в окне браузера

Задания для самостоятельного выполнения

1. В страничку о своей группе вставьте фотографию группы, в качестве фона используйте любое изображение.

Списки перечисления

Для создания маркированного списка используется тег <ul></ul>. Каждый элемент списка начинается тегом <li>.

Для создания нумерованных списков используется тег <ol></ol>, элементы списка начинаются тегом <li>.

Пример создания списков перечисления (рис.5):

Текст HTML-программы	Комментарий
<html>
<head>
<title> Мои увлечения </title>
</head>
<body bgcolor=white text=black background=fon.gif>
<h2 align=center>	Начальный тег заголовка с атрибутом выравнивания по центру
Мои увлечения </h2>	Текст и конечный тег заголовка
<ul>	Начальный тег маркированного списка
<li>	Тег элемента списка
Пишу стихи	Текст элемента списка
<li>Читаю фантастику и детективы Агаты Кристи
<li>Вяжу занавески для окон
<li>Шью и перешиваю
<li>Готовлю омлет
<li>Пишу письма мелким почерком
</ul>	Конечный тег маркированного списка
</body>
</html>

Рис.5 Web-страница со списком

Задания для самостоятельного выполнения

1. Создайте Web-страницу со списком студентов вашей группы.

Ссылки на другие страницы

Для вставки ссылки на другие страницы используется тег <a></a>. Данный тег имеет атрибут href, значением которого является адресная часть ссылки.

Существуют следующие виды ссылок: текстовые, графические и комбинированные.

Формат текстовой ссылки:

<a href=”адрес_ссылки”> текст_ссылки </a>

Формат графической ссылки:

<a href=”адрес_ссылки”> <img src=”адрес_графического_файла”> </a>

Формат комбинированной ссылки:

<a href=”мой_документ.html”> <img src=”ris.gif”> Щелкните здесь </a >

Пример создания различных ссылок (рис. 6):

Текст HTML-программы	Комментарий
<html>
<head>
<title> Моя домашняя страничка </title>
</head>
<body bgcolor=white text=black background=fon.gif>
<center>
<h1>Моя домашняя страничка</h1>
</center>
<a	Начало ссылки
href='list.html'>	Адрес ссылки
<img src= foto.jpg	Вставка графического изображения, которое является ссылкой
border=1	Задание рамки вокруг изображения равной 1 пикселу
align=left	Обтекание изображения текстом слева
hspace=10>	Расстояние левого и правого поля вокруг изображения равное 10 пикселам
</a>	Конец ссылки
<b>Здравствуйте.</b><br>
Приветствую Вас на своей домашней страничке.<br><br>
Немного о
<a	Начало ссылки
href='list.html'>	Адрес ссылки
себе:	Текст ссылки
</a>	Конец ссылки
<br>
Студент Тюменского государственного университета
<i>
<pre> Обучаюсь в международном институте финансов, управления и бизнеса </pre>
</i>
</body>
</html>

Рис.6 Web-страница со ссылками

Задания для самостоятельного выполнения

1. На Web-странице о вашей группе создайте текстовые и графические ссылки.

Вставка таблицы

Для вставки таблицы в используется тег <table></table>. Строки в таблице обозначаются тегом <tr></tr>, а ячейки - тегом <td></td>. Количество строк в таблице определяется числом тегов <tr>,а количество столбцов - числом тегов <td>.

Атрибут border тега < table > указывает толщину рамки вокруг каждой ячейки и всей таблицы в пикселях, bordercolor – задает цвет границ, а bgcolor – цвет фона на всем пространстве, занимаемом таблицей.

Атрибут cellpadding задает расстояние между смежными ячейками, а атрибут cellspacing – размер отступа в пикселях между рамкой ячейки и ее содержимым.

Для объединения соседних ячеек в строке используется атрибут rowspan. Для объединения соседних ячеек в столбце используется атрибут colspan.

Пример создания простой таблицы (рис. 7):

Текст HTML-программы	Комментарий
<html><head><title> Моя таблица </title>
<body></body>
<table	Начало создания таблицы
border=2	Задание рамки вокруг таблицы (толщина рамка равна 2 пикселам)
cellpadding=20>	Задание расстояния между смежными ячейками (расстояние равно 20 пикселям)
<tr>	Начало создания строки
<td	Начало создания столбца
rowspan=2>	Объединение ячеек по вертикали (в данном случае объединяются 2 ячейки)
<a href='home.html'> Моя домашняя страничка</a>	Создание текстовой ссылки
</td>	Конец создания столбца
<td>	Начало создания столбца
Мои фото	Наименование столбца
</td>	Конец создания столбца
<td
colspan=2>	Объединение ячеек по горизонтали (в данном случае объединяются 2 ячейки)
<a href='list.html'> Мои увлечения </a>
</td>
</tr>	Конец создания строки
<tr>
<td> Пишите мне </td>
<td> Моя работа </td>
<td> Мои друзья </td>
</tr>
</table>	Конец создания таблицы
</html>

Рис.7 Таблица со ссылками

Задания для самостоятельного выполнения

1. Создайте таблицу, имеющую следующий вид:

2. Заполните ячейки информацией

3. Создайте в таблице несколько ссылок

⇐ Предыдущая 1 2 3 4 567 Следующая ⇒

Читайте также:

Алгоритмические операторы Matlab

Конструирование и порядок расчёта дорожной одежды

Исследования учёных: почему помогают молитвы?

Почему терпят неудачу многие предприниматели?

Последнее изменение этой страницы: 2017-02-22; просмотров: 443; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.143.168.172 (0.019 с.)