Лаб 1 (Лабораторный практикум), страница 3

Позволяет разметить список, элементы которогобудут отмечены порядковым номером. В разметке каждыйэлемент списка указывается тегами <li>…</li>. Имеютсяатрибуты (устаревшие) start, позволяющий указать стартовыйномер, а также type, позволяющий указать тип нумерации:1(арабские числа), A, a (буквы латинского алфавита), I,i(римские числа).Пример:<ol><li>Кофе</li><li>Чай</li><li>Молоко</li></ol>Будет выведено: Кофе Чай Молоко<h1>…<h6> Устаревшие теги, предназначенные для того, чтобы выделитьзаголовки соответствующего уровня.

Рекомендуетсяиспользовать стили.12Вставка изображенийДля вставки изображений применяется элемент <img />.Элемент img имеет обязательный атрибут src, который должен содержать URLграфического файла. Любой современный браузер поддерживает отображениеформатов png, jpg, gif. Рекомендуется использование формата png по причинеотсутствия лицензионных ограничений.Другой обязательный атрибут – alt. Его использование необходимо для того,чтобы в браузерах, которые не могут отобразить изображение, вместоизображения был выведен текст.Обратите внимание на то, что значение атрибута alt также используетсяпоисковыми системами для того, чтобы ассоциировать изображение, указанноев атрибуте src с текстом.Необязательные атрибуты width и height указывают ширину и высотуизображения в пикселах или процентах.

Их использование необходимо длякорректного отображения страницы до того, как браузер загрузил изображение.Помните о том, что каналы связи не идеальны, а скорости порядка 10-100килобит до сих пор встречаются в условиях плохого покрытия у беспроводныхмодемов, включая технологии 3G и LTE! Если не учитывать скорость загрузкистраниц, пользователи, просматривающие такие страницы, будут видетьпостоянно меняющуюся разметку.Пример:<img src=”picture.png” width=”100” height=”200” alt=”Диаграмма” />Вставка ссылокДля вставки ссылок применяется так называемый якорный элемент <a>(anchor).

Любой текст или изображение, помещенные между тегами <a> и </a>будут отображены в браузере как элементы, чувствительные к нажатию.Обязательный атрибут – href, который содержит URL.Примеры:<a href=”http://www.somesite.ru/”><img src=”picture.png” width=”100” height=”200” alt=”Диаграмма” /></a><a href=”http://www.somesite.ru/”>Некоторый текст</a>Разметка таблицДля разметки таблиц используется элемент <table>, который являетсяконтейнером для элементов <tr> (строка), <th> (заголовок), и <td> (колонка).13Следует отметить, что элемент table часто использовался не только дляоформления таблиц как таковых, а для разграничения областей отображения настранице.Пример:<table border="1"><tr><th>Наименование</th><th>Количество</th></tr><tr><td>ручка</td><td>10</td></tr><tr><td>карандаш</td><td>20</td></tr></table>Результат представлен на рисунке 1.НаименованиеРучкаКарандашКоличество1020Рисунок 1 Пример отображения таблицыСледует обратить внимание на атрибут width, который указывает ширинутаблицы в пикселах или процентах ширины устройства отображения.

Атрибутborder указывает толщину линии.Элементы <td> и <th> обеспечивают разметку колонок и имеют два важныхопциональных атрибута: rowspan и colspan. С помощью этих атрибутов можноуказать объединение ячеек таблицы по строкам и столбцам соответственно.Пример:<table width="100%" border="1"><tr><th colspan="2">Назв. & Кол.</th><th>Всего</th></tr><tr><td>Ручка</td><td>10</td><td rowspan="2">30</td></tr><tr><td>Карандаш</td><td>20</td></tr></table>14Результат представлен на рисунке 2.Назв.

& Кол.ВсегоРучка10Карандаш2030Рисунок 2 Пример отображения таблицы с объединением столбцов и строкЭлементы разметки блоковКак уже упоминалось ранее, элемент <table> исторически используется нетолько для того, чтобы отображать таблицы как таковые, но и для разметкиблоков. Этот подход применялся до того, как были разработаны таблицыстилей и в настоящее время должны быть заменен блочной разметкой, аименно элементами <div> и <span>.Элемент <span> используется для выделения фрагментов текста, например длятого, чтобы выделить цветом фрагмент внутри параграфа. Обратите вниманиена то, что параграф при этом остаётся целым.Пример:<p>Некоторый текст, часть которого <span style="color:red">выделенакрасным</span>.</p>Отображение:Некоторый текст, часть которого выделена красным.Элемент <div> используется для разметки блока, содержащего произвольныеэлементы, а не только текст.

Более того, элемент <div> может содержатьвложенные элементы <div>.Пример:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css">#div1 {float: right;}#div2 {width: 100px;float: left;}</style></head><body><div id="div1"><table border="1"><tr><th colspan="2">Назв. & Кол.</th><th>Всего</th></tr><tr><td>Ручка</td><td>10</td><td rowspan="2">30</td></tr>15<tr><td>Карандаш</td><td>20</td></tr></table></div><div id="div2"><p>Некоторый текст, часть которого <spanstyle="color:red">выделена красным</span>.</p></div></body></html>Результат представлен на рисунке 3.Рисунок 3 Пример отображения таблицы внутри блокаБолее подробно см.

раздел блочной моделиhttp://www.w3.org/TR/CSS2/box.html.ФормыДля того, чтобы пользователь имел возможность ввода данных и отправки ихна сервер, разработан элемент <form>, который является контейнером дляэлементов ввода.Пример:<form action="/form_submit" method="get">Имя: <input type="text" name="fname" /><br />Фамилия: <input type="text" name="lname" /><br />Пол:<input type="radio" name="gender" value="м"/>м<input type="radio" name="gender" value="ж"/>ж<br /><input type="submit" value="Отправить" /></form>Результат представлен на рисунке 4.16Рисунок 4 Пример отображения формы17Основным элементом внутри формы является <input>, причем вид поля вводаопределяется атрибутом type. Некоторые возможные значения атрибута typeприводятся в следующей таблице.Таблица 3.

Значения атрибута type тэга input.ТипОписаниеtype="text"Текстовое поле.type="password"Текстовое поле для ввода пароля. Введенные символымаскируются символом *.type="radio"Селектор в виде круглой кнопки. Возможные позициивыбора ввода реализуются несколькими элементами с этимтипом и одинаковым значением атрибута name. См. впримере name="gender"type="checkbox"Селектор в виде квадрата. В отличии от типа radio,предполагает только два состояния: пункт выделен или невыделенtype="submit"Кнопка выполнения стандартного действия подтверждения.type="button"Произвольная кнопка. Форма может иметь несколькокнопок.Устаревшие элементы форматированияДо появления таблиц стилей использовались специальные элементымодификации текста и выравнивания других элементов.

В настоящее время ихиспользование ЗАПРЕЩЕНО, однако они могут встретиться в существующейразметке и продолжают поддерживаться браузерами.Таблица 4 Устаревшие элементы разметкиТэг<center><font>ОписаниеУстанавливает выравнивание по центру. Применим для любымэлементамОпределяет гарнитуру текста, размер и цвет.<i><b>Пример:<font face="verdana" color="green">This is some text!</font>Определяет шрифт курсив.Определяет жирный шрифт.18Использование валидаторов HTML и CSSДля контроля правильности набора html-страницы и таблиц стилей CSSсуществуют специализированные средства.Эталонный валидатор Validator.W3C доступен бесплатно по адресуhttp://validator.w3.org/ , однако его использование предполагает, чтопроверяемый сайт полностью доступен в Интернет, либо проверить можнобудет только одиночные файлы.Локальную проверку правильности разметки можно осуществить при помощиплагинов для браузера Mozilla Firefox, например HTML VALIDATOR(http://users.skynet.be/mgueury/mozilla/) .

Отметим также, что Mozilla Firefoxимеет встроенную консоль ошибок, в которой отображаются ошибки разметкиCSS. Существуют также коммерческие продукты для проверки правильностиразметки, например CSE HTML Validator for Windows http://www.htmlvalidator.com/.Рассмотрим принципы работы с HTML VALIDATOR. Браузер Mozilla Firefox14, HTML VALIDATOR 0.9.5.1.Рисунок 5 Информация от валидатора о корректной страницеДля примера внесём несколько ошибок в разметку HTML и CSS.19<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>Проверка разметки</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><style type="text/css">#main {position: absolute;left: 100px;top: 50pxborder: 1px solid black;padding: 0 100px 100px 0}#content {position: relative;left: 20px;top: 10px;border: 1px solid green;}</style></head><body><div id="main">Главное меню:<div id="content"><p>Некоторый текст для проверки размещения элемента.</div></div></body></html>При визуальном просмотре страницы ошибки могут быть не обнаружены.Однако валидатор показывает, что существует одна ошибка (рисунок 10).Рисунок 6 Предупреждение валидатора о некорректной странице.Необходимо выполнить двойной щелчок мышью на выданное сообщение обошибке, после чего откроется окно просмотра исходного кода страницы.20Рисунок 7 Просмотр кода и сообщение об ошибке.Помимо ошибок разметки всегда следует проверять правильность CSS.