Лекция по HTML. Лекция 1-2. Лекция 1 Введение в html
 Скачать 38.79 Kb.
|
|
Лекция 1 Введение в HTML Основные понятия HTML – HyperText Markup Language – Язык разметки гипертекста. Данный язык представляет собой довольно простой набор команд, описывающий структуру документа. Язык HTML позволяет выделить в документе отдельные элементы – заголовки, абзацы, таблицы и т.д. Файлы с текстом кода на языке HTML имеют расширение .html или .htm. HTML является описательным языком разметки документов, в нем используются указатели разметки (теги). Теговая модель описывает документ как совокупность контейнеров, каждый из которых начинается и заканчивается тегами, то есть документ НТМL представляет собой не что иное, как обычный файл, с добавленными в него управляющими НТМL-кодами (тегами). НТМL-тег состоит из имени, за которым может следовать необязательный список атрибутов тега. Текст тега заключается в угловые скобки ("<" и ">"). Простейший вариант тега — имя, заключенное в угловые скобки, например | Конец головной части | | Начало тела документа | … | | +Это собственно тело документа. Это та произвольная часть документа, которую разрабатывает автор страницы и которая отображается браузером. Конечный тег этого элемента располагается в конце html-кода. В этом элементе могут использоваться все элементы, предназначенные для дизайна web-страницы. Параметры страницыОписание тегов тела документа следует начать с тега <ВОDY>. В отличие от тега <НEАD>, тег Цвета зависят от настроек браузера. Когда в HTML-программе цвета явно не заданы, браузер использует свои установки по умолчанию. Стандартные цвета Windows – черные буквы на белом фоне. Изменить эти настройки можно установив свои цвета для работы по умолчанию в меню Сервис/Свойства обозревателя/Общие/Цвета. В теге bgcolor=цвет фона tехt=цвет текста vlink =цвет пройденных гипертекстовых ссылок link =цвет гипертекстовой ссылки alink=цвет активной гипертекстовой ссылки Цвет можно задать просто написав его название на английском языке, или используя RGB-код, который состоит из # и шестизначного кода цвета.
В теге можно задать также поля страницы. При выводе Web-страницы на экран браузер автоматически оставляет небольшие поля (примерно 10 пикселе) вдоль левого и вдоль верхнего краев рабочего окна. Эти поля автоматически же заполняются указанным для данной страницы фоновым цветом и/или фоновым изображением, но никакие элементы страницы не могут заходить на эти поля. Если же требуется изменить размеры полей или убрать их совсем, нужно включить в тег атрибуты leftmargin (размер полей слева) и topmargin (размер полей сверху). В качестве значений для них после знака равенства указывается количество пикселей или нуль, чтобы отменить поля. Размещение и форматирование текстаЗаголовки <Нn>…, Чтобы объявить выбранный абзац заголовком (тем самым задав для него более крупный и жирный шрифт, чем для остального текста), достаточно заключить его в контейнер <Нn>…, где n – размер шрифта Выравнивание заголовков, если не указано, дается по левому краю. Если же нужно задать выравнивание заголовка, необходимо использовать атрибут align (горизонтальное выравнивание, который имеет следующие значения: align=left – выравнивание по левому краю; align=right – выравнивание по правому краю; align=center – выравнивание по центру; align=justify – выравнивание по ширине. Абзац … Элемент абзаца (paragraph) – один из самых полезных, применяется для разделения текста на параграфы. Он позволяет использовать только начальный тег, так как следующий элемент Р обозначает не только начало следующего абзаца, но и конец предыдущего. Браузер выполняет команду следующим образом: перед абзацем выводится пустая строка, абзац выравнивается по левому краю, между словами помещается ровно по одному пробелу, независимо от того, сколько пробелов проставлено в HTML-коде, перенос текста на новую строку происходит тогда, когда очередное слово не помещается в экранной строке, а не тогда, когда новая строка начинается в HTML-программе. Вместе с элементом абзаца можно использовать атрибут выравнивания align: align=left – выравнивание по левому краю. По умолчанию текст HTML выравнивается по левому краю и не выравнивается по правому, то есть начало строк находится на одном уровне по вертикали, а концы — на разных. Чаще всего, получающийся при этом текст с равными промежутками между словами выглядит лучше. Поскольку выравнивание по левому краю задается автоматически, атрибут аlign=left можно опустить. align=right – выравнивание по правому краю; align=center – выравнивание по центру; align=justify – выравнивание по ширине. Обрыв строки Элемент обеспечивает принудительный переход на новую строку. Он имеет только начальный тег. Отличие тега от тега состоит в том, что браузер не создает пустой строки между строками. Элемент разметки Тег Управления отображением символовВсе эти теги можно разбить на два класса: теги, управляющие формой отображения (font style), и теги, характеризующие тип информации (information type). Часто внешне разные теги при отображении дают одинаковый результат. Это зависит главным образом от настроек интерпретирующей программы и вкусов пользователя. Теги, управляющие формой отображенияКурсив, усиление, подчеркивание, верхний индекс, нижний индекс, шрифт большой, маленький, красный, синий, различные комбинации — все это делает страницы более интересными. Теги <ВIG> и — изменение размеров шрифта Текст, расположенный между тегами <ВIG>… или … , будет, соответственно, больше или меньше стандартного. Верхние и нижние индексыС помощью тегов Изменение параметров шрифта … Для того чтобы изменить параметры шрифта произвольного объекта текста (части абзаца, целого абзаца или нескольких абзацев) нужно использовать контейнер …, который имеет ряд атрибутов: Атрибут sizе тега Шрифт 7 Шрифт 1 Размер шрифта может также задаваться относительно базового: Size=-2 Size=-1 Size=0 (база) Size=+1 Size=+2 Size=+3 Size=+4 Все размеры относятся к шкале от 1 до 7. Цвета фона и шрифта на всем протяжении документа можно задать при помощи атрибутов bgcolor и text в теге BODY. Цвет фона может задаваться только один раз, а цвет шрифта можно менять внутри документа многократно при помощи команды …. Установка цвета в этой команде выполняется при помощи атрибута color. Пример: Этот отрывок будет выведен на экран синим шрифтом . Курсив (Italic). … Текст находящийся между этими тегами выводится курсивом. Усиление (Вold)… Выделение полужирным шрифтом.… Подчеркнутое начертание текста. Зачеркнутое начертание текста.<ТТ>... Элемент, обозначающий текст телетайпа (teletype). Его особенность заключается в том, что он обеспечивает использование моноширинного шрифта (все буквы имеют одинаковую ширину). Теги, характеризующие тип информации<ЕМ>..., ... Элементы, обозначающие выразительность (emphasis) данного фрагмента текста и определение чего-либо (definition). Оба элемента аналогичны по своему действию элементу , то есть в большинстве случаев позволяют выделить текст курсивом. Блоки цитат <ВLОСKQUOTE>… Обозначение цитаты. Тег добавляет поля слева и справа от текста. Сам текст не претерпевает никаких изменений. Это полезный тег, поскольку он позволяет компактно расположить текст в центре страницы. При неоднократном использовании <ВLОСKQUOTE> текст все больше сжимается к центру. Цитирование <СIТЕ>... При помощи этого тега можно выделить название книги, газетной статьи, фильма или песни. Текст внутри этого элемента печатается по умолчанию курсивом. Эту же команду можно использовать для оформления небольших внутритекстовых цитат. Усиление ... Элемент, отвечающий за выделение текста. Обычно его применение равносильно использованию элемента для выделения текста полужирным начертанием. <СODE>... Используется для форматирования текста программы. Используется при иллюстрации примеров (sample) вывода данных на экран. ... Используется для выделения переменных (variable). Как правило, выводится моноширинным шрифтом. … Элемент для обозначения аббревиатур, например: HTML, WWW. … Этот элемент можно использовать для выделения акронимов (сокращений, образованных несколькими словами), например: и т.д.; и т.п. Эти теги допускают вложенность и пересечение друг с другом, поэтому все они имеют тег начала и конца. При использовании таких тегов следует помнить, что их отображение зависит от настроек программы-интерфейса пользователя, которые могут и не совпадать с настройками программы-разработчика гипертекста. Горизонтальная линия Горизонтальная линия (horizontal rule) – очень часто используемый элемент. Во-первых, потому, что с его помощью очень удобно делить страницу на части. Во-вторых, потому, что выбор подобных элементов оформления у автора страницы очень небольшой. Элемент не имеет конечного тега, но допускает ряд атрибутов: атрибут align для выравнивания текста. Имеет следующие значения: align=left – выравнивание по левому краю; align=right – выравнивание по правому краю; align=center – выравнивание по центру; align=justify – выравнивание по ширине. атрибут size – задает толщину линии в пикселях: size=толщина в пикселях атрибут width – задает длину линии в пикселях или в процентах? width=длина в пикселях width= для в процентах% атрибут color – задает цвет линии: color=цвет Структура, стиль и внешний вид программыЗаписывать программу нужно так, чтобы смысл ее конструкций был максимально понятен. Для такой рекомендации есть ряд причин: Ясно написанную программу легче отлаживать. В понятно написанных командах легче найти соответствие экранного изображения командам, которые это изображение строят. Понятную программу легче сопровождать, т.е. вносить в нее изменения. Хорошо работают только понятно написанные программы, внешний вид которых вызывает чувство эстетического удовольствия. Правила оформления программыЗаписывайте имена тегов прописными (заглавными) буквами, а имена атрибутов и их значения – строчными (малыми). Синтаксис языка HTML допускает запись команд в любом регистре, однако лучше следовать этой рекомендации. Как правило, текст, предназначенный для вывода на экран браузера, состоит в основном из строчных символов, поэтому «большие» HTML-команды будут на этом фоне выделяться. Не записывайте HTML-программы со слишком длинными строками. Для их просмотра приходится применять горизонтальную прокрутку, а это очень неудобно. Любая строка должна целиком помещаться на экране текстового редактора. Работая в редакторе Блокнот, не пользуйтесь режимом Перенос по словам: Блокнот показывает на экране короткие строки, а в файл записывает длинные. Старайтесь записывать теги на отдельных строках так, чтобы по записи можно было определить вложение команд друг в друга. Рекомендация достигается использованием строчного смещения записи тега вправо на 2 позиции по отношения к внешнему блоку. Теги самой первой команды программы - … записываются с 1-й позиции строки. Все остальные команды находятся внутри этого блока. Поэтому их запись должна быть смещена на две позиции вправо: Если команда (от начального до конечного тега) небольшая, то ее можно записывать в одной строке вместе с тегами. Шаблон Я начинаю разрабатывать свою страницу. Я начинаю разрабатывать свою страницу. |