Документы html и основные теги.

В сети интернет информация представлена в виде так называемых веб-страниц. Их совокупность, объединенная некоторой общей идеей (тематикой), представляет собой сайт. Веб-страницы являются по большей части документами html, то есть их содержимое написано на языке гипер­текстовой разметки html. Особенность этого языка в том, что любому элементу html-документа можно задать свойства гиперссылки (это могут быть отдельные слова, блоки, рисунки и т.п.). При этом щелчок мыши по его элемен­ту, являющемуся гиперссылкой (обладающим указан­ным свой­ст­вом), приводит к открытию в браузере другого документа, связанного с ним. Благодаря гиперссылкам, можно легко перемещаться между отдель­ными блоками текста, между целыми страницами внутри сайта и даже переходить от одного сайта к другому.

Для оформления html-текста, или гипертекста, используются угловые скобки с определенными символами, в целом называемые тегами. По боль­шей части эти теги – парные. Строки текста заклю­чают­ся в теги, первый тег – открывающий, второй – закрывающий. Например, тег < html> … < /html> включает в себя весь html-доку­мент, являющийся веб-страни­цей. Далее идет заголовок, заключа­емый в теги < title> …< / title >. Самая инфор­ма­тивная часть веб-страницы заключается в парный тег < body> … < / body>.

Для оформления текста могут применяться теги физического фор­ма­тирования и стилевые теги. Синтаксис для этих двух способов формати­ро­вания текста существенно различен, хотя выполняемые функции могут совпадать. Во всех практических заданиях данного учебного пособия предпочтение отдано стилевому методу (методу таблиц каскадных стилей CSS) как более прогрессивному, но допускается и применение тегов, отно­сящихся к физическому форматированию. Метод CSS отличается главным образом тем, что позволяет задавать текстовый формат сразу для всего документа, а также для достаточно больших фрагментов, если стиль их оформления отличен от общего стиля.

В таблице 1.1 приведены примеры записи наиболее актуальных тегов физического фор­мати­рования и CSS, а также их атрибуты (параметры), использование кото­рых рекомендуется для выполнения практических заданий.

Исчерпывающее описание всех известных тегов и их свойств можно найти в / 1/ и в целом ряде общедоступных интернет-источников, касаю­щих­ся языка html.

Таблица 1.1. Теги и атрибуты оформления текста.

 

Теги физического Форматирования	Теги CSS
bgcolor = blue – цвет фона	background-color: green – цвет фона
text =red – цвет текста	color: #003399, color: white – цвет текста
background= “fon.png” - адрес фонового изображения.	background-image: url ("Ris_mio/oboi.gif")- адрес фонового изображения.
leftmargin, righmargin, topmargin, upmargin – границы полей документа (в px)	margin-left: 10 px, (margin-right, margin-top, margin-up) границы полей документа (в px)
<p> … </p> – абзац	<div> … </div> - блок текста
<p align = left > – выравнивание по левому краю (варианты: center, right, justify)	align = “left” text- align:left– выравнивание по левому краю
align=top – выравнивание по верхней строке (таблицы)	font-family:Times New Roman – вид шрифта
<i>…</i> - наклонное начертание	font-style:italic - наклонное начертание
<b>…</b> - полужирное начертание	font-weight:bold - полужирное начертание
<u>…</u> - подчеркивание текста	padding-left: 100px-свободное поле слева
border =”2”- толщина рамки	font-size:18pt - размер шрифта
<table>… </table> - таблица	font-size: 150% размер шрифта в %-
<tr>… </tr> - строка таблицы	text-indent: 50px – красная строка
<td>… </td> - ячейка таблицы	border-style: solid –сплошна рамка
width=”300”– ширина рамки в таблице (таблицы,строки, ячейки) в px	border-width- ширина рамки
height=” 75”– высота рамки в таблице	border-color – цвет рамки
< h1>…< /h1>, …< h6>…< /h6> - размер (высота) шрифта	border: 3px solid green- рамка сплошная зеленого цвета толщиной 3рх
hspace=10 – интервал между рисунком и текстом по горизонтали	word-spacing: 1em – межсловный интервал
vlign=”bottom” (варианты top, left, right) - вертикальное выравнивание по нижней границе	position:relative – относительное позиционирование содержимого страницы
vspace=20- интервал между рисунком и текстом по вертикали	position:absolute-абсолютное позициониро вание содержимого страницы
< hr> - горизонтальная линия
< br/> - разрыв строки
< nobr> - неразрывная строка
&nbsp - пробел
<ol>… </ol> - маркированный список
<ul>… </ul> - нумерованный список
< li> - строка списка
<!-- … -- > - комментарий
< a href= “…” > … </a> - текстовая ссылка, href= “…”- адресная часть ссылки
<img src=”Ris_mio.png”> - вставка изображения, src=”Ris_mio.png”- файл рисунка
<style>… </style> - объявление стиля
<form>…< /form> - объявление формы
action- атрибут адреса отправки содержимого формы
method - атрибут способа отправки отправки содержимого формы
name – имя формы
<input>- атрибут однострочного текста формы
<textarea> - атрибут многострочного текста формы
<select> - атрибут текста формы в виде списка
textarea><select><…</textarea>…</
selectеd –атрибут выбора элемента списка формы по умолчанию.
multiple – атрибут множественного выбора в списке формы
p#tip1{…} – определение стиля для блока текста
p id= tip1> - вызов стиля для блока текста
<a href="#metka1"> приборы </a> – определение внутренней ссылки
<a name=metka1></a> – точка входа по внутренней ссылке

 

1.2. Практические задания по теме: задания 1…10.

Задание 1-1.

1). Открыть в папке Prakt1 файл bmt1.txt. Обратить внимание на размещение тегов < html> … < /html> и < body> … < / body>) в тексте документа, а также на вид (формат) текста документа, отображаемый в блокноте.

2). Сохранить исходный файл с тем же именем, но в формате *.html и просмотреть в браузере. Обратить внимание на то, что текст полученного html-документа не форматирован.

3). Открыть файл bmt1.html в блокноте, заключить каждую его текстовую строку в парный тег «параграф» < p> … < /p> и сохранить результат как файл bmt1-1.html. Открыть полученный файл в браузере и убедиться, что теперь текст стал построчным, то есть каждая строка ведет себя как абзац.

4). Ввести в документ следующую служебную информацию:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<meta http-equiv="Content-Type"content="text/html;charset=windows-1251"> и сохранить эти изменения.

Данный текст определяет формат представления текста в браузерах и задает настройки, необходимые для корректного функционирования html-документа в интернете.

 

Задание 1-2.

1). Внести в документ парный тег< head>…< / head > перед тегом < body>, в который заключить парный тег заголовка документа < title> как < title> кафедра ПР-3< /title>, сохранить результат в файле bmt1-2.html и убедить­ся, что в строке заголовка браузера появился текст «кафедра ПР-3»

2). Применить к двум строкам, следующим за строкой заголовка, соответ­ственно парные теги < h2> и < h1>. Сохранить изменения и про­смо­треть результат в браузере.

(По умолчанию шрифт текста имеет размер h3. С увеличением номера размер (высота) шрифта уменьшается, максимальный размер h1).

3). Применить к тем же строкам соответственно теги < I> и < B>. Сохра­­нить изменения и просмотреть результат в браузере.

(Теги < I> и < В> устанавливают соответсвенно атрибуты «наклонный шрифт» и «полужирный шрифт»).

4). Удалить парный тег для строк блока < head> … < / head >, сохранить результат и убедиться, что формат документа не изменился.

(При наличии парных тегов, задающих размер шрифта тег «абзац» («параграф») становится избыточным).

 

Задание 1-3.

1). Применить к двум строкам документа, следующим сразу за тегом < /title>, атрибут выравнивания align=center, сохранить результат как файл bmt1-3.html и проверить в браузере.

(Здесь получим выравнивание по центру и подчеркнутый шрифт. Возможны другие виды выравнивания: left - слева, right - справа, justify - по ширине).

2). Применить к остальному тексту, лежащему ниже, атрибут text=blue, сохранить и проверить результат.

(Цвет шрифта ниже заголовка изменится на голубой. По умолчанию он черный).

 

Задание 1-4.

1). Вставить в документ, сразу после закрывающего тега </head> стиль: <body bgcolor=#ECE9D8 text=blue >, сохранить результат как файл bmt1-4.html и проверить в браузере.

2). Применить к строке «Кафедра готовит специалистов по биомеди­цин­ской технике» стиль: <p style="font-style:italic; font-size:150%; text-align:center">, сохранить и проверить результат.

(Стиль: шрифт – наклонный, размер шрифта – 200%, выравнивание–по центру).

3). Применить к следующей строке стиль: <p style="color:red; font-size:200%; text-align:jastify">, сохранить и проверить результат.

(Стиль: цвет - красный, размер шрифта - 200%, выравнивание – по ширине).

Задание 1-5.

1). В тексте документа оформить фрагмент текста: «Схемотех­ничес­кое направление… создание методов и первичных преобразователей для биомедицины», применив к нему стиль: <p style="color:#003399; font-size:150%; text-align:left">, сохранить результат как файл bmt1-5.html и проверить в браузере.

(Стиль: цвет в соответствии с кодом, близкий к фиолетовому, размер шрифта – 150%, выравнивание – слева).

2). Сделать строки того же абзаца приблизительно одинаковой длины с помощью тега <BR>, создающего новую строку, сохранить результат и проверить в браузере.

 

Задание 1-6.

1). Применить к строке «Содержание направлений подготовки» стиль:

<p style="color:green; font-size:180%; text-align:center">сохранить и проверить результат.

(Стиль: цвет – зеленый, размер шрифта - 180%, выравнивание –по центру).

2). Увеличить длину строки «Специальность «Биотехнические аппараты и системы» с помощью 15 знаков неразрывного пробела &nbsp непосред­ственно в ее начале, сохранить результат как файл bmt1-6.html и проверить в браузере.

3). Заключить теги &nbsp неразрывного пробела в тег комментария <!-- … -->, сохранить результат и проверить в браузере.

(Для html-текста, заключенного в теги комментария, действие языка html отменяется).

 

Задание 1-7.

1). Применить блочный тег <div> … </div> к фрагменту текста, следующе­му сразу после строки «Содержание направлений подготовки»: от фразы «Цикл дисциплин схемотехнического направления» до фразы «Информа­ционно-программистское направление».

2). К этому блоку применить стиль <p style="color:black; font-family:

Arial black; font-size:12pt; word-spacing:20px; letter-spacing:5px">.

3). Заменить в каждой строке блока теги <BR> на <br\>.

4). Сохранить результат как файл bmt1-7.html и проверить в браузере.

(Атрибут word-spacing:20px – устанавливает указанный межсловный ин­те­р­вал, атрибут letter-spacing:5px – задает межбуквенный интервал).

 

Задание 1-8.

1). Применить к названию раздела «Информационно-программистское направление» стиль: <p style="color:green; font-size:18pt; text-indent:2em">, сохранить результат как файл bmt1-8.html и проверить в браузере.

(Атрибут text-indent:2em – задает абзацный отступ).

2). К содержимому этого раздела применить отступ 4em и цвет brown, сохранить результат и проверить в браузере.

3). В строках 1-го абзаца «Направления и цели подготовки» и «В рам­ках специальности «Биотехнические аппараты и системы» кафедра ведет подготовку по следующим трем направлениям» увеличить шрифт на один уровень (с помощью тега <big>).

4). После указанных строк ввести разделитель (тег <HR>) по горизон­тали, сохранить результат и проверить в браузере.

5). Оформить последний абзац документа как блок <div> … </div> и применить к нему стиль: <p style="color:indigo; font-size:24pt; text-indent:6em">

 

Задание 1-9.

1). В заголовочной части документа определить стиль (после тега <title/>) типа text/css, дав ему имя «ramka» и присвоив следующие парамет­ры: размер шрифта 24pt, цвет indigo, красная строка 6em.

(font-size:24pt; color:indigo; text-indent:6em;)

2). При определении стиля определить также наличие рамки для планируемого блока текста с параметрами: рамка сплошная, красного цвета, ширина блока в рамке 900px, высота блока – 320 px, отступ для текста внутри рамки от ее границы 50px.

(<style type="text/css"> p#ramka{font-size:24pt; color:indigo; text-indent:6em; border:2px solid red; padding:10px; width:900px; height:320px)

 

 

Рис.1.1. Веб-страница документа bmt1-10.html (начало).

 

Рис.1.1. Веб-страница документа bmt1-10.html (окончание).

 

3). Применить стиль «ramka» к последнему абзацу, сохранить резуль­тат как файл bmt1-9.html и проверить в браузере.

(<p id="ramka"> … </p>)

 

Задание 1-10.

1). Применить к блоку текста, помещенному в рамку, атрибуты пози­ци­онирования: левая граница 250px, нижняя граница 100px. Cохранить результат как файл как файл bmt1-10.html и проверить в браузере.

(margin-left: 250px, margin-bottom: 100px)