Создание HTML-страничек
Наиболее простым способом создания HTML-страничек является создание их с помощью Word. Для этого откроем Word, введем там текст из пары предложений, поменяем ему оформление, после чего сохраним его в своей папке как Web-страницу в одном файле. Заметим, что при переходе Word в режим работы со страницей оформление несколько меняется, так как возможности языка HTML более ограничены по сравнению в исходными документами.
Закроем Word и откроем созданную страницу при помощи браузера (находим файл, щелкаем правой кнопкой, выбираем «Открыть», указываем нужную программу). Смотрим, как будет выглядеть созданная страница после размещения в Интернете.
Теперь при помощи программы «Блокнот» откроем этот же файл. Видно, что он достаточно длинный и сложный, поэтому загружаться будет долго и при работе возможны определенные сложности. Поэтому Word – не лучшее средство для создания страниц.
Попробуем сделаем страничку «руками»:
Сокращенный курс лекций по HTML
Введение
Что такое HTML?
Всемирная паутина (World Wide Web – WWW) состоит из множества связанных между собой электронных документов, представляющих кладезь информационных данных, описанных с помощью специальных технологических правил. Эти правила составляются на языке гипертекстовой разметки HTML (HyperText Markup Language).
Можно с уверенностью сказать, что сегодня язык разметки HTML является основой всех размещенных в Интернете электронных документов. Он выступает в роли некоего фундамента, на базе которого реализуются прочие сетевые программные технологии, призванные в конечном итоге повысить общую привлекательность, эффективность и интерактивность носителей информационных данных в Сети. Так же как обычный фундамент строящегося дома представляет собой несущую конструкцию, на которой впоследствии возводятся стены, HTML служит простейшим и по большому счету незаменимым средством создания гипертекстовых документов, которое в совокупности с более гибкими и функциональными интернет-технологиями позволяет получать воистину фантастические результаты.
HTML постоянно набирает популярность, причем не только в сфере интернет-технологий, но и в области предоставления презентационных услуг, рекламно-выставочной деятельности, внедряется в состав программного обеспечения и пр. Корпоративные клиенты все чаще разрабатывают CD-презентации и демонстрационные ролики, заказывают электронные визитки и рекламные обращения. Частный пользователь все больше склоняется к мысли о составлении интерактивных портфолио и резюме, позволяющих, в отличие от листа бумаги, ярче и привлекательнее преподнести свои знания и умения потенциальному работодателю. Разработчики ПО (программного обеспечения) делают информационные и рекламные вставки справочного характера внутри создаваемых ими программных пакетов. И все это, так или иначе, реализуется с помощью простого и доступного, но вместе с тем эффективного языка разметки HTML.
Notepad
Notepad, он же Блокнот Windows – излюбленный редактор Web-дизайнеров. Хотя есть много других хороших и не менее уважаемых ими специализированных редакторов для HTML, таких как MacroHTML или HomeSite. Уважают их, главным образом, за простоту, доступность, компактность. А еще за невмешательство в творческие дела дизайнера. Все очень просто: вы вводите в редакторе HTML код и любуетесь результатом в окне параллельно работающего браузера. Редактор в лучшем случае ускорит ввод ключевых слов и поможет с синтаксической проверкой. Остальное – за вами.
Другой тип HTML -редакторов – визуальные, такие как известный Microsoft FrontPage Express или гораздо более любимый Web-дизайнерами Macromedia DreamWeaver. Их интерфейс построен по тому же принципу, что и интерфейс текстового редактора, скажем Word. Кстати, Word 2000 или ХР вполне сойдет в качестве визуального HTML -редактора.
Преимущество визуальных HTML -редакторов в том, что для работы с ними можно вообще не знать HTML. К сожалению, визуальные редакторы страдают тем же недостатком, что и трансляторы языков программирования, преобразующие текст на С или Pascal в ассемблерный код. А именно – неоптимальностью этих самых кодов. Спросите любого программиста, и он вам скажет, что ассемблерный код, написанный вручную, в несколько раз меньше кода такой же программы, написанной, скажем, на Pascal и преобразованной в ассемблерный код с помощью транслятора. Удивляться нечему: решения человека-специалиста всегда красивее решений машины. Зато и труда, и времени они требуют несравнимо больше. Впрочем, вероятно, недалек тот день, когда при загрузке страницы разница в несколько килобайтов или даже мегабайтов не будет так заметна, как сейчас. Тогда визуальные HTML -редакторы займут на компьютере Web-дизайнера такое же достойное место, какое сейчас занимают на компьютере программиста визуальные среды разработки, такие как, например, Delphi.
Увы, этим грехи визуальных редакторов не исчерпываются. Часто страница выглядит в браузере совсем не так, как до этого она выглядела в окне редактора. Приходится лезть в длинный, запутанный код, искать там ошибки и вручную их исправлять. Когда-то давно мне встретились в одной книжке десять шуточных заповедей программиста. Одна из них гласила: "Не возжелай программы ближнего твоего!". В применении к нашей задаче она звучит так: "Не возжелай HTML -кода ближнего твоего, в особенности если этот ближний – FrontPage или Word, а ты собрался изучать HTML ".
Для более тонкого понимания процесса HTML верстки, а процесс программирования web-страниц именно так и называется, мы и будем использовать обычный блокнот или Notepad.
Какой браузер выбрать
C программой редактором определились. Теперь нужно где-то просматривать созданные нами web-страницы.
Специальные программы для просмотра наших страниц, созданных по правилам языка разметки HTML, называются браузерами. Основная функция браузера заключается в интерпретации кода HTML и выводе визуального результата на экран монитора пользователя. Сегодня существует большое количество самых разнообразных браузеров, однако наибольшей популярностью пользуются лишь несколько программы: Internet Explorer, Netscape Navigator, Opera и Mozilla FireFox.
Рассматривать мы их не будем, так как ничего сложного в их освоении нет. Но нужно помнить, что написанная страница может по-разному в них отображаться. Связано это с тонкостями интерпретации HTML кодов и стилей браузерами разных производителей. И если web ресурс предназначен для обширной и разнообразной публики то рекомендуется проверять страницу в нескольких браузерах, что бы исключить неверное отображение страниц и не потерять пользователей.
Структура HTML-документа
Как уже было сказано ранее, язык HTML представляет собой набор специальных правил. Каждому правилу соответствует свое название, свойство и значение. Например, чтобы задать правило жирного начертания обыкновенного текста, необходимо использовать следующую HTML -конструкцию:
<В> Обыкновенный текст </В>
Как видно из примера, текст, который должен отображаться жирным начертанием, обособлен группами символов <в> и </в>. Такие группы принято называть тегами. Сразу следует сказать, что теги бывают одинарными и парными. В случае с нашим примером тег </в> является парным, т. к. он закрывает HTML -конструкцию вместе с символом "/" (прямой слэш). Иногда теги, которые необходимо закрывать парным тегом, называют тегами контейнерами.
Структура любого тега подразумевает указание самого тега, его параметра и значения этого параметра. При этом наименование параметра и его значения может писаться как строчными, так и прописными буквами. Значение параметра ставится в кавычки.
Кроме того, параметры и их значения могут либо вообще отсутствовать у какого-то определенного тега, либо считаться необязательными и устанавливаемыми только в случае изменения стандартных характеристик тега:
<TABLE WIDTH="100%" BORDER>
В приведенном примере для тега построения таблицы <TABLE> один параметр (WIDTH) указан со значением, другой (BORDER) такового не содержит. Некоторые теги могут указываться вообще безо всяких параметров (например, принудительный перенос строки <BR>). Другие теги могут включать несколько значений одного параметра (" INDEX, FOLLOW " для мета определения "robots").
Любой HTML -документ содержит три основных обязательных раздела: HTML, HEAD и BODY. Рассмотрим подробнее каждый из них.
Раздел HTML
Раздел HTML определяет специфику документа, содержание которого будет интерпретироваться браузером. Раздел описывается парным тегом <HTML></HTML> и дает браузеру информацию о том, что документ разработан с помощью языка разметки HTML. В принципе, сегодня большинство браузеров способно распознать HTML -документ и без указания данного тега, тем не менее, пропускать раздел HTML разработчикам не рекомендуется.
Раздел HEAD
Раздел HEAD выполняет функцию рабочего заголовка HTML -документа и является, по сути, "бойцом невидимого фронта" - - теги, указываемые внутри этого раздела, чрезвычайно важны и могут сильно влиять на внешний вид документа, но сами остаются незаметными глазу пользователя. Данному разделу сопоставлен парный тег <HEAD></HEAD>.
Рассмотрим теги HTML, которые указываются внутри раздела HEAD.
Название документа <TITLE>.
Парный тег <TITLE></TITLE> предназначен для указания имени созданному документу. Следует помнить, что под именем документа в данном случае имеется в виду не файловое наименование, а визуальный заголовок HTML-страницы. Данный тег не является обязательным, однако рекомендуется по ряду причин:
1. Отсутствие тега названия документа заставит браузер при интерпретации HTML -кода вывести в заголовке окна фразу типа Untitled Document (Документ без названия), что не соответствует ни тематике вашего сайта, ни его наполнению;
2. При попытке добавить созданный вами HTML -документ (без тега) в "закладки" браузера пользователю придется самостоятельно вписывать название добавляемой страницы;
3. Поисковые системы, столкнувшись с безымянной страницей, занесут ее в свои базы данных под заголовком Untitled, что сделает HTML -документ безликим и похожим на миллионы других страниц, размещенных в Интернете.
Связь между документами <LINK>
Часто бывает так, что несколько различных документов структурно или функционально взаимосвязаны между собой. В этом случае используется тег <LINK>, который не является парным, а значит не требует указания закрывающего тега:
<LINK HREF="styles/main.сss" TYPE="text/css" REL="stylesheet">
Приведенный пример показывает отношение между HTML -документом, в разделе HEAD которого указана данная кодовая конструкция, и внешним файлом шаблона стилей main.сss.
Возможные параметры тега <LINK>:
| HREF | Указание ссылки на внешний документ |
| TYPE | Тип внешнего документа |
| REL | Отношение между текущим и внешним документом |
| REV | Отношение между внешним и текущим документом |
Мета-определения <МЕТА>
Секция заголовка может содержать несколько элементов МЕТА, каждый из которых отвечает за определенный набор параметров.
Использование элементов МЕТА не является обязательным, но некоторые настройки могут быть весьма важны. Так, например, известно, что браузер в некоторых случаях способен автоматически определить вид кодировки страницы. Пользователь, работая с браузером, может выбрать в меню определенную кодировку. Чтобы исключить неопределенность при просмотре конкретной страницы, на ней целесообразно разместить указание на кодовую страницу. Для документов в кодировке Windows оно должно быть таким:
<МЕТА http-equiv="Content-Type" content="text/html; charset=windows-1251">
Информация, сосредоточенная в элементах МЕТА, определяет общие настройки Web -страницы и называется профилем. Профили можно хранить в отдельных файлах и присоединять к определенной странице при помощи специального атрибута элемента HEAD:
<HEAD profile=”URL”>
В секции HEAD могут располагаться элементы, которые имеют отношение ко всей странице целиком. Так, если для последней создано звуковое сопровождение, то его параметры определяет элемент BGSOUND
Элементы <STYLE> и <SCRIPT>
В структуру раздела документа HEAD также могут входить парные теги <STYL></STYLE> и <SCRIPT></SCRIPT>. Первый тег описывает стилевые шаблоны документа, второй – содержит код исполняемых сценариев (скриптов).
Раздел BODY
Раздел BODY является одним из самых важных компонентов любого HTML -документа, т. к. в нем располагается содержательная часть, которая выводится браузером на экран монитора пользователя.
Раздел описывается парным тегом <BODY></BODY>, внутри которого размещается большинство существующих тегов HTML. Тег <BODY> имеет ряд параметров, которые условно можно разделить на четыре основные группы (параметры фона, границ документа, текста и гиперссылок).
| Параметр | Функция |
| BGCOLOR | Определение цвета фона |
| BACKGROUND | Указание фонового рисунка |
| BGPROPERTIES | Изменение свойств фона (например, фиксирование фонового рисунка) |
| TOPMARGIN, BOTTOMMARGIN, LEFTMARGIN, RIGHTMARGIN, MARGINWIDTH, MARGINHEIGHT | Определение размера отступов |
| TEXT | Определение цвета основного текста |
| LINK, ALINK, VLINK | Определение цвета гиперссылок |
Параметры фона
Параметрами фона документа являются BGCOLOR, BACKGROUND и BGPROPERTIES.
Ø -BGCOLOR устанавливает цвет фона, значение которого может быть введено в символьном эквиваленте, в шестнадцатеричном коде или в формате цветовой модели RGB.
Система указания цвета в HTML основана на трех основных цветах: красном, зеленом и синем (модель RGB – Red, Green, Blue). Любое значение RGB может быть преобразовано в шестнадцатеричный формат (от 00 до FF с приставкой # (читается "диез")). Некоторым значениям упомянутых моделей соответствует символьное название цвета. Таким образом, один и тот же цвет можно указать тремя возможными способами.
1. <BODY BGCOLOR="white">
2. <BODY BGCOLOR="#FFFFFF">
3. <BODY BGCOLOR="255.255.255">
Библиотека цветов на сайте https://www.artlebedev.ru/tools/colors/
Ø BACKGROUND позволяет накладывать на фон документа графическое изображение (файл *. gif находится в папке images, расположенной в той же папке что и сам HTML -документ):
<BODY BACKGROUND="images/*.gif">
Ø BGPROPERTIES позволяет менять свойства фона документа, но поддерживается только браузером Microsoft Internet Explorer.
Например, конструкция:
<BODY BACKGROUND="images/*.gif" BGPROPERTIES="fixed"> позволит прокручивать содержание документа, оставляя фоновое графическое изображение в зафиксированном виде.
Описанные параметры не являются обязательными, однако использование BGCOLOR рекомендуется по следующей причине: пользователь в настройках своего браузера может поставить любой цвет фона, а разработчик, полагая, что белый цвет является основным по умолчанию, может не указать этот параметр. В результате вместо подразумевающегося белого цвета, фон может оказаться черным, зеленым и т. д., что способно привести к нарушению оформления документа. Также наряду с графическим изображением фона рекомендуется использовать и параметры цвета на тот случай, если рисунок не загрузится (тогда браузер отобразит цвет).
Параметры границ документа
Параметры границ HTML-документа создают отступы заданного размера от верхнего, нижнего, левого и правого краев документа. Этим отступам соответствуют параметры TOPMARGIN, BOTTOMMARGIN, LEFTMARGIN и RIGHTMARGIN.
Значения для них задаются в пикселах:
<BODY TOPMARGIN="5" BOTTOMMARGIN="5"LEFTMARGIN="10" RIGHTMARGIM="10">
Однако данные параметры не воспринимаются некоторыми браузерами. В частности, Netscape объединяет упомянутые параметры в две группы горизонтальные и вертикальные отступы:
<BODY MARGINWIDTH="10" MARGINHEIGHT="5">
Таким образом, если вы хотите учесть особенности всех браузеров, то в HTML-конструкцию надо подставить и те, и другие параметры:
<BODY TOPMARGIN="5" BOTTOMMARGIN="5" LEFTMARGIN="10" RIGHTMARGIN="10" MARGINWIDTH="10" MARGINHEIGHT="5">
Параметры текста
Из параметров текста документа реально применяется только один – TEXT. Он задает цвет основного текста на странице (значение параметра может быть введено аналогично цвету фона документа):
<BODY TEXT="black">
Параметры гиперссылок
Параметры гиперссылок (связей с внутренними или внешними документами) определяют цвет активных (ALINK), не посещенных (LINK) и посещенных (VLINK) ссылок:
<BODY LINK="#OOOOFF" ALINK="#OOOOFF" VLINK="blue">
Первый HTML-документ
Итак, мы рассмотрели основные разделы любого HTML-документа. В целом, теперь можно начать творить нашу первую страницу.
Вызовем редактор текстов (Блокнот). Для этого сделаем следующую процедуру: Пуск > Выполнить… > в командной строке наберем notepad
Перед вами открылся редактор, о котором мы говорили в начале занятия.
Теперь давайте создадим первую свою страницу:
<HTML>
<HEAD>
<TITLE>Мой первый НТМL-документ</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Windows-1251">
<META NAME="keywords" CONTENT="HTML, документ, первый">
<META NAME="description" СОNТЕNТ="Это мой первый HTML-документ">
</HEAD>
<BODY BGCOLOR="#FFFFFF" TOPMARGIN="30" TEXT="black" LINK="#OOFFOO"ALINK="OOFFOO" VLINK="blue">
Это мой первый HTML-документ!
</BODY>
</HTML>
Теперь сохраним наш документ. Для этого сделаем следующее: Файл > Сохранить как… > далее. путь куда нужно сохранить документ. Сохраняем в ранее созданной вами папке. И теперь придумаем название файла. Как правило, оно отражает смысл содержимого страницы и для первой (главной) страницы сайта принято название
index.html.
И откроем сохраненный файл index.html уже с помощью браузера.
Теперь давайте вернемся в текстовый редактор и разберем, что мы набрали.
<HTML> - открывающийся тег, говорит браузеру, что перед ним HTML-документ.
<HEAD> - открывающийся тег заголовка.
<TITLE> - название страницы, вы можете сейчас увидеть надпись: «Мой первый НТМL-документ », если обратите внимание на название страницы в браузере.
Далее идет описание мета данных:
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Windows-1251"> - Определяет тип кодировки Windows-1251
<META NAME="keywords" CONTENT="HTML, документ, первый"> - задает набор ключевых слов документа, предназначенных для индексирования поисковыми системами (добавления информации о документе в базы данных). Слова указываются через запятую. Т.е поисковая машина нашу страницу будет отображать по релевантному запросу «документ» и «первый». Данное поле имеет относительное значение при SEO оптимизации и продвижении web ресурсов в сети Интернет. И сразу хочу оговориться, что релевантность страницы зависит от многих факторов и при оптимизации страницы одного упоминания семантического ядра в meta данных мало, нужен целый спектр действий, направленных на то что бы показаться поисковому роботу привлекательным и нужным пользователю.
<META NAME="description" СОNТЕNТ="Это мой первый HTML-документ"> - предоставление небольшого описания текущего HTML-документа, также необходимого для поисковых систем (при поиске информации описание выводится рядом со ссылкой на найденный интернет-ресурс).
</HEAD> закрываем блок.
Далее переходим непосредственно к блоку, который и будет нести смысловую нагрузку и отображаться пользователю.
<BODY BGCOLOR="#FFFFFF" TOPMARGIN="30" TEXT="black" LINK="#00FF00" ALINK="FF0000" VLINK="blue"> - открываем тег «Тела » нашего сайта. У этого тега в нашем случае есть 6 параметров. Давайте разберем их еще раз:
BGCOLOR="#FFFFFF" – устанавливает цвет фона белый.
TOPMARGIN="30" – задает отступ от верхней границы
TEXT="black" – задает цвет текста в нутрии блока по умолчанию
LINK="#00FF00" – задает цвет не посещенной ссылки зеленый
ALINK="FF0000 " – задает цвет активной ссылки красный
VLINK="blue" – задает цвет посещенной ссылки синий
«Это мой первый HTML-документ!» – отображаемый текст
Ну и в конце нужно закрыть парные открытые теги:
</BODY> - закрывает тег «Тела»
</HTML> - закрывающий тег HTML документа.
Работа с текстом
Теперь мы научились создавать самые простые HTML страницы. Но было бы совсем грустно не иметь возможности как-то стилизовать текст и не иметь возможности вставить картинки. Давайте в этой главе поговорим о редактировании текста, а картинками займемся в следующей.
В табличке показаны некоторые основные теги, используемые для редактирования текста. Разберем часто используемые теги, остальные посмотрите сами.
| Тег | Описание |
| <pre></pre> | Обрамляет предварительно отформатированный текст. |
| <h1></h1> | Создает самый большой заголовок |
| <h2></h2>,<h3></h3>, <h4></h4>,<h5></h5> | Создает заголовоки промежуточных размеров |
| <h6></h6> | Создает самый маленький заголовок |
| <b></b> | Создает жирый текст (нерекомендованный) |
| <i></i> | Создает наклонный текст (нерекомендованный) |
| <tt></tt> | Создает текст - имитирующий стиль печатной машинки. (нерекомендованный) |
| <kbd></kbd> | Создает текст - имитирующий стиль печатной машинки. (рекомендованный) |
| <var></var> | Название переменных отображается курсивом |
| <cite></cite> | Выделение цитат курсивом |
| <address></address> | Отображается курсивом в виде отдельного абзаца |
| <em></em> | Наклонный текст (воспринимается поисковыми роботами как выделение) |
| <strong></strong> | Жирный текст (воспринимается посковыми роботами, как особо сильное выделение) |
| <font size="?"></font> | Устанавливает размер текста в пределах от 1 до 7. |
| <font color="?"></font> | Устанавливает цвет текста, используя значение цвета в виде RRGGBB. |
| <font face="?"></font> | Устанавливает шрифт для отображения текста |
| <p align=?></p> | Выравнивание абзаца |
| </br> | Принудительный перенос строки |
Теги <b></b> и <i></i> к использованию не рекомендованы, вместо них можно использовать <strong></strong> и <em></em> соответственно. Пример использования:
<strong>Текст1</strong> <em>Текст2</em>, также возможна группировка этих тегов в любой последовательности, но необходимо помнить, что теги должны закрываться не пересекая границу друг друга, да и вообще перекрытия границ контейнеров может нарушать отображение информации, затрудняет отображение страниц браузерами и следовательно приводит к снижению релевантности ресурса.
Правильно: <strong>Текст1 <em>Текст2</em> Текст 3</strong>
<em>Текст2 <strong>Текст1</strong> Текст 3</em>
Не правильно: <strong>Текст1 <em>Текст2 Текст 3</strong></em>
Тег <FONT> — один из основных тегов физического форматирования текста, отображающий свойства шрифтов. Для него могут использоваться следующие параметры:
FACE — параметр, посредством которого браузер отображает текст указанным в HTML-коде шрифтом. При этом значение параметра FACE должно соответствовать установленному на компьютере пользователя шрифту. В случае если такого шрифта нет, текст будет показан стандартным (по умолчанию) шрифтом.
Часто разработчики HTML-документов добавляют сразу несколько значений параметра FACE. Таким образом, если первого шрифта не окажется на компьютере пользователя, то браузер отобразит текст вторым шрифтом. Не будет найдено второго шрифта, браузер приступит к поиску третьего и т. д.
<FONT FACE="Tahoma", "Arial", "Verdana">Ваш текст</FONT>
Еще один не мало важный парный тег <font size="?"></font>, устанавливающий размер шрифта, в последнее время разработчики отдают предпочтение именно ему, а теги <H> потихоньку отходят, но по-прежнему поддерживаются всеми браузерами.
<font size="4"> Размер текста 4</font>
Задание1: Давайте создадим новый документ, назовем его, например, Font.html. Это будет страничка показывающая работу с тегами только что нами изученными. В задании необходимо:
1. Название странницы: “Размер шрифта”.
2. Цвет фона желтый
3. Цвет шрифта красный
4. Шрифт, используемый для отображения текста 2,3,7,4,5,6 поочередно.
5. Тест, оформленный шрифтом 7, расположить по центру.
6. Время выполнения 5-15 минут.
Примечание перенести строку можно и тегом <p></p> в этом случае интервал между строками будет увеличен
Вот что получилось →
Работа с картинками
Теперь перейдем к картинкам, ведь согласитесь, что за документ без графики.
| Тег | Описание |
| <img src=?> | Загружает изображение |
| <img src=? title=?> | Название изображения |
| <img src=? alt=?> | Альтернативный текст изображения |
| <img src=? align=?> | Выравнивание изображения |
| <img src=? border=?> | Толщина рамки изображения |
Синтаксис тега такой:
Ø <img SRC="picture.gif"> Следует заметить, что в данном случае браузер станет искать файл "picture.gif" в том же каталоге, где находится и HTML -документ, ссылающийся на этот рисунок. Обычно для графических изображений выделяется отдельная папка images:
<img SRC="images/picture.gif">
Ø Параметр border предназначен для отображения вокруг рисунка рамки определенной толщины. Толщина указывается в пикселах, по умолчанию (если параметр пропущен) рамка браузером не отображается:
<img SRC="images/clock.gif" border="5">
Ø По аналогии с другими HTML -элементами (табличные ячейки, горизонтальные разделители) параметры WIDTH и HEIGHT используются для определения размеров графического изображения, встраиваемого в электронный документ (ширина и высота, в пикселах):
<img SRC="images/clock.gif" border="1" width="300" height="201">
Использование этих параметров не обязательно, однако рекомендуется по двум основным причинам:
1. во время загрузки изображения браузер сразу зарезервирует на странице столько места, сколько необходимо для отображения рисунка. Многие разработчики пренебрегают этим правилом, в результате чего при загрузке под рисунок изначально отводится слишком мало места, а потом страница начинает "скакать", поскольку браузер одновременно пытается в это пространство вместить реальные размеры файла;
2. иногда размеры изображения слишком велики и для его просмотра "в полный рост" требуются полосы прокруток. В таком случае, если необходимо поместить рисунок в окне браузера, не прибегая к помощи полос прокруток, то можно в HTML-коде указать пропорционально уменьшенные размеры этого рисунка. Размещая на странице уменьшенный вариант рисунка, обязательно помните о необходимости пропорционального изменения размеров, в противном случае при нарушении соотношения этих размеров, изображение получится искаженным и неприглядным.
Корректно изменить пропорции рисунка можно следующими способами:
1. указать в теге <img> измененным только один из параметров (либо WIDTH, либо HEIGHT). Браузер самостоятельно изменит второй параметр, сохраняя пропорцию;
2. открыть рисунок в любом растровом редакторе (например, Adobe Photoshop, Microsoft Office Picture Manager) и изменить пропорции программным образом.
Что касается пропорционального увеличения графических изображений в HTML -документах, то такой подход не рекомендуется по причине особенностей самого растрового формата (ухудшение качества изображения при увеличении его размеров). Однако если степень увеличения незначительна (в среднем на 5—10 пикселов), как правило, визуально качество остается неизменным.
В завершение разговора о параметрах WIDTH и HEIGHT следует сказать, что допустимо указание размеров графического изображения в процентах. Этот формат записи дает команду браузеру растянуть или сузить рисунок в соответствии с размерами окна страницы. Но такой подход не рекомендован и может применяться только в исключительных случаях и только в отношении однородных рисунков, поскольку некоторые браузеры либо не поддерживают подобное обозначение размеров, либо выводят рисунки некорректно.
Ø Параметр ALIGN предназначен для определения типа выравнивания рисунка относительно текста и прочих элементов электронного документа.
Существующие значения параметра ALIGN представлены ниже:
| Значение | Функция |
| LEFT | Текст обтекает рисунок по правому краю (изображение слева) |
| RIGHT | Текст обтекает рисунок по левому краю (изображение справа) |
| ТОР | Верхний край рисунка выравнивается по самому высокому элементу строки |
| ТЕХТТОР | Верхний край рисунка выравнивается по самому высокому текстовому элементу строки |
| MIDDLE | Выравнивание середины рисунка по базовой линии строки |
| ABSMIDDLE | Выравнивание середины рисунка по середине строки |
| BOTTOM | Выравнивание нижнего края рисунка по базовой линии строки |
| BASELINE | Выравнивание нижнего края рисунка по базовой линии строки |
| ABSBOTTOM | Выравнивание нижнего края рисунка по нижнему краю строки |
Следует заметить, что некоторые популярные браузеры (например, Netscape) интерпретируют значения ABSMIDDLE и ABSBOTTOM как, соответственно, MIDDLE и BOTTOM. Internet Explorer корректно отображает все приведенные значения. Основное же различие между значениями нижнего края и базовой линии заключается в особенностях некоторых букв алфавита и прочих символов. Нижний край — это крайняя точка текстового блока, а базовая линия проходит по нижней части строки текста без учета фрагментов текста, выходящих за строку. Другими словами, при наличии в тексте букв: "у", "р", "q", "g" и т. п. нижняя часть этих символов будет определяться значением ABSBOTTOM, а часть букв на уровне запятой в предложении — значением BOTTOM или BASELINE.
Ø Еще один очень важный параметр ALT.
Параметр альтернативного текста ALT играет существенную роль в процессе встраивания графики в электронные документы. Изначальное его предназначение заключалось в возможности предоставления пользователям неграфических браузеров информации о рисунке, которая появляется при наведении на графический объект курсора мыши. Однако сегодня понятие "неграфического браузера" стало практически неактуальным, поэтому функция параметра ALT сильно расширилась и повсеместно используется для вывода смысловых подсказок для значимых графических элементов. Для не имеющих какой-либо смысловой нагрузки рисунков альтернативный текст указывать не следует. Например, для рисунка "services.gif", демонстрирующего образ услуг коммерческой компании, будет уместным добавить альтернативный текст "Наши услуги ". Для прозрачной распорки, размещенной в пустой табличной ячейке, совершенно бессмысленно писать что-то вроде "Прозрачная графическая распорка".
Для незначимых графических изображений обычно задается следующая конструкция:
<img SRC="images/spacer.gif" width="5" height="5" alt="">
Таким образом, даже если ваш HTML-документ будут просматривать в текстовом редакторе (к примеру, Lynx), композиция страницы сохранится, а пользователю будет выведена информация о наличии рисунка. Также указывать альтернативный текст ALT рекомендуется в случае, если изображение по каким-либо причинам не загрузилось или у пользователя попросту отключена загрузка изображений браузером. Подсказка, отображенная на месте рисунка, даст пользователю хотя бы минимальную информацию о незагруженном объекте.
Ø Параметр TITLE. Данный параметр, по сути, выполняет функцию, аналогичную ALT, и предназначен для отображения подсказок к рисункам. Различие в том, что при незагруженном изображении параметр TITLE не предоставит пользователю никакой информации — для этого существует параметр альтернативного текста ALT. Следует отметить, что последние версии некоторых браузеров (Opera, Netscape) не отображают значение поля ALT при наведении на изображение курсора мыши.
Задание2:
1. создать новый документ Picture.html.
2. Вставить рисунок (название.gif), указав все необходимые параметры, выровненный по нижней части строки.
3. Расположить текст слева от рисунка.
4. Вставить рисунок (название.gif), указав все необходимые параметры, выровненный по середине строки.
5. Расположить текст справа от рисунка.
6. Вставить рисунок (название.gif), указав все необходимые параметры, выровненный по верхней части строки.
7. Расположить текст справа от рисунка.
8. Выполнение задания 5 минут.
Результат →
Работа с таблицами
Одним из наиболее мощных и гибких средств представления информационных данных в HTML по праву являются таблицы. В повседневной жизни, решая те или иные задачи, мы часто сталкиваемся с таблицами. Однако в HTML таблицы не ограничиваются удобным средством структурирования информации. Сегодня таблица становится основой большинства электронных документов, структура которых может включать самые разнообразные элементы HTML. Таблицы, изначально избранные в качестве визуального способа представления данных, сейчас имеют гораздо более важную функцию — управление структурой HTML-документа в целом. Удобство размещения данных в таблице неоспоримо, а преимущества перед другими средствами представления информ