|
| [ На главную ] -- [ Список участников ] -- [ Правила форума ] -- [ Зарегистрироваться ] |
| On-line: |
| Глубина / Уроки / Уроки по Html |
| Страницы: 1 |
|
| Автор | Сообщение | ||||||||||||
|
Скрепка Канцтовары всем нужны! Группа: Участники Сообщений: 1321 
|
Добавлено: 04-07-2006 20:05 | ||||||||||||
Я решила сделать проще и начать выкладывать учебник тута... только если запалят, то я тут не причём... 
© ГМА им. адм. С. О. Макарова, 2006. © Фомин Д. Н., 2006. |
|||||||||||||
|
Скрепка Канцтовары всем нужны! Группа: Участники Сообщений: 1321
|
Добавлено: 04-07-2006 20:06 | ||||||||||||
1. ОБЩИЕ ВОПРОСЫ РАЗРАБОТКИ ВЕБ-СТРАНИЦ
В настоящее время размещение информации в сети Интернет необходимо широкому кругу пользователей. World Wide Web сегодня – одна из наиболее интересных и быстро развивающихся технологий, которую многие организации и частные лица используют в своей деятельности. Основной целью создания веб-сайта является донесение информации до широкого круга читателей. Веб-сайты можно условно разделить на личные (созданные человеком в личных целях) и корпоративные (созданные предприятиями и организациями для решения своих задач). Предприятия и организации создают веб сайты с целью рекламы своих товаров и услуг, поиска потенциальных заказчиков. Личные сайты могут создаваться в целях поиска работы, привлечения внимания работодателей, демонстрации собственных достижений, обмена полезной информацией, общения по интересам.
Сформулируем определения основных понятий веб-технологии, необходимые для дальнейшего изложения [6]. World Wide Web (сокращённо WWW) – глобальная информационная система, связывающая между собой множество документов (веб-страниц), размещённых на веб-серверах по всему миру. Веб-страница – гипертекстовый документ, размеченный с помощью специальных элементов – тэгов языка HTML. Основное отличие этих гипертекстовых документов от хорошо всем известных текстовых состоит в том, что они могут включать ссылки на другие аналогичные документы. Веб-браузер (англ. Web browser) – программа-клиент, с помощью которой пользователь получает доступ к системе WWW (к указанной пользователем веб-странице). Веб-браузер осуществляет запрос к веб-серверу по протоколу HTTP (англ. HyperText Transfer Protocol), определяющему правила взаимодействия клиента и сервера при передаче гипертекстовых документов, и затем отображает полученную страницу на экране компьютера пользователя. Современные популярные веб-браузеры: • Microsoft Internet Explorer (версии 5.0, 5.5 и 6.0), • Netscape Navigator (версии 6 и 7), • Opera (версии 7, 8 и 9), • Mozilla Firefox (версии 1.0 и 1.5). Веб-сервер (более точно – HTTP-сервер, реализующий поддержку протокола HTTP) – специальная программа, установленная на общедоступном (имеющем постоянное подключение к сети Интернет) компьютере. Веб-сервер обеспечивает хранение веб-страниц в виде файлов, структурированных определённым образом, и обработку запросов от веб-браузеров с целью поиска и (или) формирования веб-страниц с последующей их отправкой клиентам. Современные популярные веб-серверы: • Apache – устанавливается в основном на ОС Unix и ей подобные (Linux, FreeBSD), но существует и версия для Windows. Используется большинством веб-провайдеров. Загрузить Apache можно бесплатно с сайта http://www.apache.org/. • Microsoft Internet Information Server (IIS) – устанавливается на ОС Windows. Используется чаще в качестве отдельно стоящего веб-сервера, находящегося непосредственно в организации. IP-адрес представляет собой последовательность из четырёх чисел, разделённых точками. Каждый компьютер, подключённый к Интернету (так называемый хост), имеет уникальный IP-адрес, однозначно определяющий этот компьютер в сети. Именно по IP-адресу происходит поиск и взаимодействие устройств. Запомнить такие адреса довольно трудно, поэтому была разработана доменная система имен (Domain Name System, DNS), которая позволяет поставить в соответствие IP-адресу символьное имя. Например, IP-адрес сервера, на котором находится веб-сайт известной поисковой системы «Яндекс»: 213.180.204.11. Этому IP-адресу соответствует доменное имя www.yandex.ru. Доме́нное имя сервера (англ. domain name) – уникальный идентификатор, который назначается определённому IP-адресу. Доменное имя даёт возможность обращаться к веб-серверу по имени типа www.mysite.ru вместо числового IP-адреса. Для размещения веб-сайта в Интернете необходимо наличие доменного имени. Для этого его надо зарегистрировать на сайте, предоставляющем эту услугу. Веб-сайт – это набор веб-страниц, относящихся к одной фирме или одному пользователю. Автора веб-сайта называют веб-мастером. Uniform Resource Locator, URL (единообразный идентификатор ресурса) – уникальный адрес, определяющий местоположение веб-страницы в World Wide Web. Каждая страница имеет свой адрес. Примеры URL: 1. http://www.gma.ru/ – HTTP-сервер должен найти и отправить клиенту (браузеру) стартовую страницу сайта ГМА им. адм. С.О. Макарова; 2. http://www.gma.ru/history.html – HTTP-сервер должен найти и отправить клиенту (браузеру) файл history.html – страницу сайта ГМА им. адм. С.О. Макарова, посвящённую истории академии. URL включает: 1. Метод доступа к ресурсу, т.е. протокол доступа (HTTP – наиболее часто используемый метод доступа к HTML-документу в сети). 2. Доменное имя сайта (имя хост-машины), в вышеприведённых примерах – www.gma.ru. 3. Полный путь к файлу на сервере (может отсутствовать, в этом случае пользователь запрашивает, а сервер отправляет стартовую страницу веб-сайта).
Для того, чтобы получить представление об основных элементах веб-страницы и файловой организации веб-сайта на диске веб-сервера, рассмотрим в качестве примера несколько страниц сайта ГМА им. адм. С.О. Макарова (рис. 1.1). Все эти страницы имеют единую структуру и единое оформление. В окне браузера располагаются: заголовок страницы, элементы навигации (меню) для перехода со страницы на страницу, иллюстрации, текстовый блок. Каждая страница представляется отдельным файлом с расширением .html. Первая (стартовая) страница сайта получает, как правило, имя: index.html (для веб-сервера Apache) или default.htm (для Microsoft IIS). Остальные файлы именуются произвольным образом, но рекомендуется делать это в соответствии с назначением документа или его содержимым. Например, science.html для страницы «Научная работа» и training.html для страницы «Обучение в Академии». а  б  в  г  Рис. 1.1. Некоторые страницы веб-сайта ГМА им. адм. С. О. Макарова: а – главная страница; б – страница «История Академии»; в – страница «Обучение в Академии»; г – страница «Научная работа в Академии» Следует обратить внимание, что в именах папок и файлов допускаются только латинские буквы, цифры и символы подчёркивания (в отличие от именования файлов в Windows, в которых допустимы символы национальных алфавитов, а также пробелы и некоторые специальные символы). Каждый рисунок представляется файлом с расширением .jpg или .gif. Упрощённый вид файловой структуры сайта www.gma.ru представлен на рис. 1.2. В корневом каталоге сервера всегда хранится файл стартовой страницы. Сюда же можно поместить и файлы других страниц (это допустимо для небольшого сайта – до 10 – 20 страниц). Изображения помещены в отдельную папку, названную img (англ. image – изображение).  Рис. 1.2. Файловая структура веб-сайта ГМА им. адм. С. О. Макарова
1.4.1. Редактор HTML-страниц HTML-редакторы бывают двух видов: 1. Визуальные редакторы, т.е. показывающие при редактировании вид документа, близкий к его отображению в браузере. Их также называют WYSIWYG-редакторами (англ. what you see is what you get). С их помощью можно создавать веб-страницы и без знания языка HTML. Недостатком визуальных редакторов является «засорение» HTML-кода лишними тэгами и как следствие – увеличение объёма веб-страниц и проблемы совместимости с некоторыми браузерами. Наиболее известные визуальные HTML-редакторы – Microsoft FrontPage (рассмотрен в разд. 3 данного пособия и [7]) и Macromedia DreamWeaver [2]. 2. Кодовые редакторы, т.е. рaбoтaющиe напрямую c HTML-кодом.. В таких редакторах веб-мастер контролирует создание и редактирование каждой строки кода. В качестве кодового HTML-редактора можно использовать вообще любой текстовый редактор, способный сохранять текстовые файлы без форматирования, такие как Notepad (в поставке ОС Microsoft Windows, файл notepad.exe); vi (в поставке Unix-подобных ОС, файл /usr/bin/vi); редактор, встроенный в файловый менеджер FAR. Существуют также редакторы, специально предназначенные для создания веб-страниц, такие как Macromedia HomeSite и CoffeeCup. Они поддерживают функции, облегчающие написание HTML-кода: цветовыделение синтаксиса, автозавершение тэгов и т. д. 1.4.2. Редакторы графики При выборе графического редактора альтернатив долгое время практически не было – это Adobe Photoshop. Однако в последние годы популярность набирает редактор GIMP. Небольшие несложные рисунки можно подготовить даже в Paint – стандартном графическом редакторе Windows. В последней версии – Windows XP – Paint умеет сохранять графические файлы в форматах GIF и JPEG. 1.4.3. Браузеры Как пользователь сети Интернет Вы можете предпочитать любой браузер. Но как создателю сайтов (пусть даже небольших) вам придётся установить на свой компьютер, как минимум, наиболее распространённые (Internet Explorer, Mozilla Firefox и Opera) и тестировать в них созданные веб-страницы. Ведь посетители вашего сайта могут использовать различные браузеры, и ваша задача – сделать так, чтобы сайт был доступен им всем. Весьма желательно также, чтобы он выглядел практически одинаково при просмотре в любом из этих браузеров. Заметим также, что разные версии одного и того же браузера также в некоторых случаях могут вести себя несколько по-разному, поэтому для тестирования веб-страниц желательно иметь все распространённые версии каждого из браузеров, перечисленные в п. 1.2. 1.4.4. Вспомогательные программы При разработке веб-страниц могут применяться также некоторые вспомогательные виды программного обеспечения. К ним относятся: CSS-редакторы – программы для создания каскадных таблиц стилей (таблицы стилей будут рассмотрены в п. 2.5); FTP-клиенты – программы для передачи файлов на сервер и приёма файлов с сервера по протоколу FTP; валидаторы – программы для проверки соответствия HTML-кода стандартам. Эти программы являются необязательными компонентами рабочего места веб-мастера и далее не рассматриваются. |
|||||||||||||
|
Скрепка Канцтовары всем нужны! Группа: Участники Сообщений: 1321
|
Добавлено: 04-07-2006 20:21 | ||||||||||||
2. НЕПОСРЕДСТВЕННАЯ РАБОТА С HTML-КОДОМ
Гипертекстовый документ, предназначенный для публикации в сети Интернет (веб-страница) представляет собой текстовый файл с внедрёнными в него тэгами (англ. tag – метка) – специальными последовательностями символов, задающими логическую структуру документа (заголовки, абзацы) и форматирование символов (жирный шрифт, курсив и т.д.) HTML-тэги представляют собой последовательности символов, заключённых в угловые скобки <…>. Они бывают одиночные и контейнерные. Большинство HTML-тэгов – контейнерные, они состоят из пары открывающего и закрывающего тэгов. Действие контейнерного тэга распространяется на данные (текст и вложенные тэги), расположенные между ними. Перед именем закрывающего тэга ставится косая черта «/». Например, </h1> – закрывающий тэг для <h1>. Одиночные тэги состоят только из открывающего тэга и не требуют закрывающего. Упражнение. Создайте пример простейшей веб-страницы. Используйте любой текстовый редактор для набора следующего текста, например стандартный редактор «Блокнот» (Notepad) для Windows:
Не забудьте при сохранении файла присвоить ему расширение .htm или .html вместо предлагаемого по умолчанию .txt. Откройте полученный файл в браузере. Вы увидите в рабочей области окна браузера два абзаца текста: «Добро пожаловать» и «Это моя первая веб-страница». При этом первый из них, заключённый внутри тэга <h1>, выводится жирным и более крупным шрифтом, чем второй, заключённый внутри тэга <p>. Это происходит потому, что тэг <h1> задаёт заголовок первого уровня. Текст «Моя первая веб-страница», заключённый внутри тэга <title>, выводится в заголовке окна браузера. Обратите внимание на очерёдность закрытия вложенных контейнерных тэгов. Тэг, открытый первым, закрывается последним. Исправьте в редакторе тэг <h1> следующим образом: <h1 align = "center">. Этим Вы добавляете к тэгу атрибут – некоторую уточняющую информацию о том, как в браузере отображается содержимое тэга. Сохраните файл и обновите его отображение в браузере. Заголовок будет выровнен по центру. Тэги могут иметь и несколько атрибутов, перечисляемых внутри открывающего тэга через пробел. Если тэг контейнерный, то в закрывающем тэге повторять атрибуты не нужно. Атрибут состоит из имени, знака равенства и значения. В общем виде синтаксис тэга с несколькими атрибутами можно представить так: <имя_тэга имя_атрибута_1 = "значение_атрибута_1" имя_атрибута_2 = "значение_атрибута_2" ... имя_атрибута_N = "значение_атрибута_N"> Стандарт языка HTML требует заключения всех значений атрибутов в кавычки. На практике, если значение атрибута не содержит пробелов, кавычки можно опустить – корректное отображение документа в браузере при этом сохранится. Сводная таблица основных HTML-тэгов помещена в приложении 1, а подробное описание каждого из них приводится в следующем параграфе.
2.2.1.Заголовки Тэги <h1>, <h2>, …, <h6> задают заголовки различных уровней: от первого до шестого. Эти тэги контейнерные, т.е. к ним требуется указывать закрывающие тэги </h1>, </h2>, …, </h6> в конце заголовков. Пропуск закрывающего тэга приведёт к тому, что весь последующий текст будет отформатирован как заголовок соответствующего уровня. Число уровней заголовков (шесть) жёстко задано в языке HTML; изменить его невозможно. Если Вы заключите текст в тэг <h7>, то его форматирование не изменится. Таким образом, браузеры игнорируют неизвестные им тэги. 2.2.2. Абзацы и переводы строки Конец строки в коде HTML-документа воспринимается браузером так же, как обычный пробел. Для перехода на новую строку на веб-страницах используются тэги абзаца <p> и перевода строки <br>. Тэг <p> задаёт начало нового абзаца текста (англ. paragraph – абзац). Кроме того, в отличие от текста в книге, на веб-страницах по умолчанию абзацы не имеют отступов в начале первой строки (красных строк). Вместо этого они разделяются увеличенным расстоянием между абзацами. Тэг <br> задаёт перевод строки (англ. break – разорвать, row – ряд, строка). В этом случае последующий текст идёт с новой строки, но без абзаца. Увеличения расстояния между строками при этом не происходит. Различие между абзацами и переводами строки аналогично тому, которое существует в редакторе документов Microsoft Word, где начало нового абзаца вводится клавишей Enter, а перевод строки – сочетанием клавиш Shift-Enter. Можно включить в текст одну или несколько пустых строк, применив тэг <br> два раза подряд или более. Использовать для разделения абзацев тэг перевода строки <br> вместо <p> нежелательно, так как при этом будет трудно понять, где кончается один абзац и начинается следующий, особенно, если концевая строка первого абзаца длинная. Для разделения абзацев нужно использовать тэг <p>. Существуют исключения. Так, для стихотворений, начало каждой строки тэгом <p> приведёт к тому, что интервалы между строками будут слишком велики. Поэтому строки стихотворения следует разделять тэгами <br>. При этом тэг <p> можно использовать для разделения строф, между которыми желательно иметь увеличенное расстояние. 2.2.3. Тэг <a>: якоря и гиперссылки Тэг <a> (англ. anchor – якорь) в HTML играет двойную роль. Чаще он используется для создания гиперссылок – в этом случае он записывается с атрибутом href (от англ. hypertext reference):
С помощью ссылки устанавливается связь с другим (или с тем же) документом. Ссылкой может быть фрагмент текста или изображение. По умолчанию текстовая ссылка подчёркнута. При подведении курсора мыши к гипертекстовой ссылке он принимает форму руки с вытянутым указательным пальцем. При нажатии на ссылку браузер обращается к серверу, запрашивая документ, адрес которого указан в атрибуте href. Указывать адрес страницы нужно полностью, включая протокол доступа, например: <a href = "http://www.yandex.ru">. Запись <a href = "yandex.ru"> означает переход к файлу с именем yandex и расширением ru в текущей папке, а не к сайту поисковой системы «Яндекс». Кроме того, тэг <a> может быть использован для создания якоря – поименованного места в документе, к которому можно обращаться по этому имени. В данном случае он записывается с атрибутом name. Значением этого атрибута будет имя якоря, по которому можно будет впоследствии обратиться к помеченному месту в документе. Имя можно дать любое, но лучше, чтобы оно было осмысленным.
После этого на другой или той же самой странице можно создать ссылку на якорь:
Таким образом, URL веб-страницы отделяется от имени якоря знаком решётки (#). При создании ссылки на другое место той же самой страницы указывать URL нет необходимости – в этом случае значение атрибута href будет начинаться со знака решётки. 2.2.4. Вставка изображений на веб-страницу Тэг <img> используется для размещения изображения на веб-странице. Этот тэг одиночный. Синтаксис тэга: <img src="путь к изображению" width=ширина height=высота alt="Подпись к изображению"> Пример: <img src="/pictures/catphoto.jpg" width=200 height=175 alt="Фотография моего кота"> Атрибуты тэга <img>: src – обязательный атрибут, в котором указывается имя файла изображения; width и height – задают ширину и высоту изображения (в пикселах) соответственно; alt – альтернативный текст, который выводится, если браузер по какой-либо причине не может показать изображение. Например, это происходит, если пользователь отключил вывод изображений или нажал кнопку «Stop» (Остановить), не дождавшись загрузки картинок. Наконец, пользователь может просматривать веб-страницу текстовым браузером, в котором вообще не выводятся изображения. Поэтому нужно указывать этот атрибут для изображений, которые несут смысловую нагрузку, например, являются гипертекстовыми ссылками. border – размер рамки вокруг изображения. По умолчанию 0, т.е. рамка отсутствует. Исключением являются изображения, являющиеся гиперссылками: они по умолчанию обводятся рамкой. Чтобы сделать изображение-гиперссылку без рамки, необходимо в явном виде указать у него атрибут border=0; align – выравнивание изображения относительно текста (возможные значения: top, bottom, left, right); hspace – отступы слева и справа от изображения (в пикселах). Используются, чтобы текст не сливался с рисунком; vspace – отступы сверху и снизу от изображения (в пикселах) Где взять изображение? Можно получить его с помощью сканера или цифровой фотокамеры. Можно изготовить его самостоятельно в каком-либо графическом редакторе, например Adobe Photoshop. Следует помнить, что изображения для размещения в Web необходимо сохранять в формате, поддерживаемом веб-браузерами. Можно также использовать чужие изображения, но только в том случае, если получено разрешение от владельца, или если они взяты с сайтов с бесплатными картинками. При размещении изображений следует учитывать ограничения, связанные с их размером и форматом. Большие изображения значительно замедляют время загрузки страницы. Изображение, полученное с помощью современной цифровой камеры с разрешением 5 мегапикселов с наилучшим качеством, имеет размер около 2 Мбайт. При скорости передачи данных модемом 28 кбит/с загрузка только одного такого изображения займёт около 10 мин. Поэтому такие изображения перед размещением на веб-странице необходимо уменьшить в графическом редакторе. Другое важное ограничение – формат изображения. Размещайте на своих страницах только те форматы изображений, которые поддерживаются большинством браузеров. В настоящий момент – это GIF и JPEG. Формат GIF (файлы с расширением .gif) поддерживает 256 цветов, прозрачность (позволяет любой цвет в палитре сделать прозрачным), анимацию (сохранение в одном файле нескольких изображений). Формат JPEG (файлы с расширением .jpg) поддерживает до 16,7 млн. цветов и используется для сохранения фотографических изображений. В настоящее время растёт также популярность формата PNG. Не следует использовать на веб-страницах формат BMP – он поддерживается не всеми браузерами и имеет большой объём. Не забывайте указывать размеры изображений. Начинающим это может показаться ненужным, ведь браузер и так выводит изображение. Однако дело в том, что браузер, встретив тэг <img>, повторно обращается к веб-серверу, запрашивая картинку. Перед этим он определяет некоторую область прямоугольной формы, где будет размещено изображение. Если в тэге <img> указаны атрибуты width и height, то браузер резервирует место в соответствии с их значениями; если не указаны – то некоторую прямоугольную область с размерами по умолчанию. Пришедшее от сервера изображение будет размещено в этой области. Таким образом, не придётся тратить время на изменение размеров стандартной области перед вставкой картинки в неё (и, возможно, переформатирование соседних элементов страницы). Кроме того, форматирование страницы сохранится даже в том случае, когда картинка не отображается браузером. Указывайте реальные размеры изображений. Если вас не устраивают размеры картинки, которую вы разместили на странице, сначала измените её ширину и высоту в графическом редакторе, затем исправьте атрибуты width и height в соответствии с новыми размерами. Например:
Допустим, картинка показалась вам слишком большой. Выясним, что произойдёт, если вы уменьшите размеры в атрибутах width и height, не изменяя размеров самого́ изображения:
Браузер зарезервирует место размером 150×150 пикселов и запросит с сервера файл photo1.jpg из папки pictures. На сервере находится файл с изображением размером 200×200 пикселов, который и будет отправлен пользователю. В браузере это изображение будет сжато до размера 150×150 пикселов. На это уйдёт дополнительное время, и качество изображения в большинстве случаев ухудшится. 2.2.5. Маркированные и нумерованные списки Тэг <ul> задаёт неупорядоченный (маркированный) список (англ. unordered list). Каждый элемент списка заключается в тэг <li> (англ. list item). Например, следующий код:
даёт следующий вид списка: • Первый пункт • Второй пункт • Третий пункт Атрибут type задаёт вид маркеров перед пунктами списка. Возможные значения: circle – незаполненный кружок; disk или disc – заполненный кружок; square – заполненный квадрат. Тэг <ol> задаёт упорядоченный (нумерованный) список (англ. ordered list). Каждый элемент списка также заключается в тэг <li>:
В браузере это отобразится так: 1. Первый пункт 2. Второй пункт 3. Третий пункт Атрибут type задаёт вид нумерации перед пунктами списка. Возможные значения: "1" – цифры 1, 2, 3, 4… (по умолчанию) "A" – заглавные латинские буквы A, B, C, D… "a" – строчные латинские буквы a, b, c, d… "I" – римские цифры заглавными буквами: I, II, III, IV… "i" – римские цифры строчными буквами: i, ii, iii, iv… Атрибут start позволяет начать нумерацию пунктов списка не с начала (1, A или I), а с произвольно выбранного значения. Его значением всегда является число, даже если нумерация осуществляется буквами. Например, <ol type="A" start="6"> задаёт список с нумерацией заглавными латинскими буквами, начиная с F – шестой буквы латинского алфавита. Тэги для многоуровневых списков в HTML отсутствуют, однако можно создать список внутри списка, например, таким образом:
В браузере это отобразится так: 1. Первый пункт 2. Второй пункт o Первый подпункт o Второй подпункт o Третий подпункт 3. Третий пункт К сожалению, в HTML нет средств для нумерации подпунктов во вложенных списках «многоуровневыми» номерами (1.1, 1.2 и т.д.) 2.2.6. Изменение шрифта Тэг изменения шрифта называется <font>. Этот тэг контейнерный. Пример. Тэг <font face="Arial" color="red" size="5"> задаёт шрифт Arial красного цвета увеличенного размера. Размер шрифта задаётся в некоторых условных единицах от 1 до 7. Соответствие между ними и размером шрифта в пунктах представлено в табл. 2.1. Таблица 2.1 Размер в у.е. 1 2 3 4 5 6 7 Размер в пт 8 10 12 14 18 24 36 По умолчанию размер обычного текста равен трём – это соответствует шрифту в 12 пунктов. Размеры заголовков с <h1> по <h6> равны соответственно с 6 по 1. Цвет в HTML-документе может быть задан названием или шестнадцатеричным значением. Список названий цветов в HTML приведён, например, в [5, с. 650 – 655]. Шестнадцатеричные обозначения цвета начинаются со знака решётки (#) и состоят из шести цифр, из которых первые две соответствуют красной составляющей цвета, следующие две – зелёной и последние две – синей. Так, тэг в примере выше может быть записан в виде:
Здесь для красной составляющей задано максимальное значение 255 (шестнадцатеричное FF), для синей и зелёной – нулевое, что даёт ярко-красный цвет. Для тёмно-красного цвета можно задать значение красной составляющей в половину от максимального (#800000), для светло-красного – максимальное значение красной и половинные значения зелёной и синей составляющих (#FF8080). Другие тэги изменения шрифта перечислены в табл. 2.2. Таблица 2.2 Тэг Назначение Пример HTML-код Отображение в браузере <b> Жирный шрифт Это <b>жирный</b> шрифт Это жирный шрифт <i> Курсивный шрифт А это <i>курсив</i> А это курсив <u> Подчёркивание Этот текст <u> подчёркнут </u> Этот текст подчёркнут <s> зачёркивание Этот текст <s> зачёркнут </s> Этот текст зачёркнут <sup> верхний индекс 10<sup>15</sup> м<sup>3</sup> 1015 м3 <sub> нижний индекс H<sub>2</sub>SO <sub>4</sub> H2SO4 Подчёркивать текст вне гиперссылок нежелательно, так как это может ввести в заблуждение пользователя. Поскольку гиперссылки по умолчанию подчёркнуты, многие пользователи привыкли к тому, что щелчок мышью по подчёркнутому тексту приводит к переходу на другую страницу. Вообще использование тэгов физического выделения <b>, <i>, <u>, <font> рекомендуется свести к минимуму, поскольку язык HTML изначально разрабатывался для логической разметки структуры документа. Для шрифтового оформления веб-страницы предпочтительнее использовать каскадные таблицы стилей (см. п. 2.5). В отличие от них, верхние и нижние индексы уместно считать тэгами логического, а не физического выделения, так как их использование меняет смысл написанного, а не только его оформление. Например, 1015 и 1015 – разные числа. 2.2.7. Горизонтальная линия С помощью тэга <hr> можно вставить в документ горизонтальную линию, обычно для того, чтобы отделить одну часть текста от другой. Этот тэг – одиночный (не требует закрывающего). По умолчанию линия занимает всю ширину окна браузера и имеет толщину в 2 пиксела (один ряд пикселов светло-серый, другой тёмно-серый, так что создаётся иллюзия объёма). Это поведение можно изменить следующими атрибутами: width – длина линии в пикселах или в процентах от ширины окна браузера, по умолчанию 100%; size – толщина линии в пикселах; color – цвет линии (название или шестнадцатеричное значение); align – выравнивание. Возможные значения: left, center, right. Если линия занимает не всю ширину окна браузера, то она по умолчанию выравнивается по центру окна. Указав атрибут align, можно прижать её к левому или правому краю. Пример. Тэг <hr width="60" size="4" color="purple" align="left"> вставляет в текст фиолетовую горизонтальную линию длиной 60 пикселов и толщиной 4 пиксела, прижатую к левому краю окна браузера. 2.2.8. Комментарии Любая последовательность, которая начинается с сочетания символов <!-- и оканчивается символами -->, является комментарием, т.е. игнорируется браузером. Комментарии можно использовать для временного исключения из HTML-страницы некоторых её фрагментов без их физического уничтожения. Пример. Пусть в редакторе набран следующий HTML-код: <p>Это <!-- очень простой --> пример использования комментариев в HTML.</p> В браузере это отобразится так: Это пример использования комментариев в HTML. Вложенные комментарии не допускаются. Пример неправильного использования комментариев на HTML-странице: <!-- Это <!-- вложенные --> комментарии -->
Как было отмечено ранее, угловые скобки <…> (знаки «меньше» и «больше») используются в HTML как ограничители для тэгов. Однако может понадобиться включение самих символов “<” и “>” в текст веб страницы (например, если страница посвящена изучению языка HTML). Для этого предусмотрены специальные символьные подстановки – последовательности, начинающиеся с символа “&” (амперсанд) и заканчивающиеся точкой с запятой (;). Так, символы “<” и “>” набираются как «<» и «>» соответственно (англ. less than – меньше; greater than – больше). Например, чтобы отобразить на странице фразу Заголовки первого уровня заключаются в тэг <h1>, необходимо ввести Заголовки первого уровня заключаются в тэг <h1>. На веб-странице можно поместить и некоторые специальные символы, которых нет на клавиатуре, например, знаки «меньше или равно» (≤) – «≤» (англ. less or equal), «больше или равно» (≥) – «≥» (англ. greater or equal). Можно вставить неразрывный пробел с помощью обозначения « » (англ. no break space), если вы не хотите, чтобы браузер перенёс строку по этому пробелу. (Обозначение неразрывного пробела может также использоваться для того, чтобы оставить между словами место больше одного пробела.) Для того, чтобы поместить на веб-странице сам знак амперсанда (&), необходимо ввести «&», чтобы браузер мог отличить его от начала символьной подстановки. Стандарт языка HTML также предусматривает для двойных прямых кавычек (") символьную подстановку «"», так как кавычки используются как ограничители значений атрибутов. На практике, современные браузеры различают символы кавычек, находящиеся внутри угловых скобок (где они ограничивают значения атрибутов) и вне их (где они используются просто как символ в тексте), и обязательного использования символьной подстановки «"» обычно не требуется. Часто используемые символьные подстановки приведены в прил. 2. Любой символ можно ввести с помощью его кода в кодировке Unicode в виде следующего сочетания символов: «&#», затем код символа в десятичном виде (или в шестнадцатеричном – тогда перед ним ставится латинская буква «x»), затем «;». Например, если вы набираете текст на украинском языке на клавиатуре с русской раскладкой, то можете ввести слово «Україна» одним из следующих способов: Україна Україна, поскольку код украинской буквы «ї» в Unicode равен 1111 (шестнадцатеричное 457). Конечно, для этого вам понадобятся символы “&”, “#”, “;” и цифры, но они как стандартные символы ASCII присутствуют на любой клавиатуре. Таблицы кодов символов в кодировке Unicode можно найти на сайте http://www.unicode.org. |
|||||||||||||
|
Скрепка Канцтовары всем нужны! Группа: Участники Сообщений: 1321
|
Добавлено: 04-07-2006 20:33 | ||||||||||||
2.4.1. Тэги для таблиц, строк и ячеек Таблица заключается в тэг <table>. Этот тэг контейнерный, т.е. закрывается тэгом </table>. Внутри тэга <table> для каждой строки таблицы ставится тэг <tr> (англ. table row – строка таблицы). В свою очередь, внутри тэга <tr> каждая ячейка таблицы задаётся тэгом <td> (англ. table data – табличные данные). Тэги <tr> и <td> также контейнерные. Основное правило: таблицы в HTML описываются по строкам. Сначала идут все данные (текст и тэги), описывающие все ячейки первой строки, затем второй и т.д. Таким образом, число строк в таблице определяется числом тэгов <tr>. Атрибуты тэга <table>: border – задаёт границу таблицы. По умолчанию 0, т.е. таблица не разлинована. cellspacing – задаёт расстояние между ячейками. cellpadding – задаёт «внутренние поля» ячеек таблицы, т.е. расстояние от границы ячейки до текста. width – задаёт ширину таблицы в пикселах или в процентах от ширины окна браузера. По умолчанию 100%, т. е. таблица занимает всю ширину окна браузера. height – задаёт высоту таблицы. Обычно не нужен, так как таблица автоматически растягивается по вертикали, чтобы вместить всё содержимое. Атрибуты width и height могут быть также указаны у тэгов <tr> и <td> для указания ширины или высоты отдельного ряда или ячейки. Если ячейка пуста, браузеры по умолчанию не выводят её внутреннюю границу. Чтобы изменить это поведение, в пустые ячейки следует ввести символ неразрывного пробела – « ». 2.4.2. Таблицы с объединёнными ячейками Можно объединить несколько ячеек таблицы по вертикали и горизонтали в одну. Для этого служат атрибуты colspan и rowspan тэга <td>. Они указываются в первой (самой верхней левой) из объединяемых ячеек; тэги <td>, соответствующие остальным ячейкам, просто удаляются. Пример. Создадим следующую таблицу с объединёнными ячейками: 1 2 3 4 5 6 7 Эта таблица создаётся с помощью следующего HTML-кода:
Первая строка содержит две ячейки. Первая ячейка (с цифрой 1) занимает две строки и три столбца. Вторая ячейка (2) – обычная. Затем идёт описание второй строки таблицы. Так как первая ячейка была задана при описании первой строки, то повторно мы её не определяем. Поэтому второй ряд будет содержать описание только одной ячейки (3). Третья строка состоит из четырёх обычных ячеек (4–7).
2.5.1. Вводные замечания о таблицах стилей Опытные пользователи редактора Microsoft Word очень ценят такую его особенность, как стили. Например, можно создать стиль для заголовков глав и параграфов, задавая определённый шрифт, расположение, другие характеристики текста и далее применить созданное описание к конкретным фрагментам текста. Если впоследствии вас что-то не устраивает в описании стиля (например, заголовки параграфов необходимо оформить по-другому), вы можете изменить параметры стиля, что мгновенно отразится на всём тексте, а не будете исправлять каждый заголовок параграфа по отдельности. Итак, стиль – это правило, определяющее внешний вид того или иного элемента в документе. То же самое справедливо и для веб-страниц. Как известно, элементом веб-страницы является тэг. Используя технологию каскадных стилевых таблиц (англ. cascading style sheets – CSS), вы сможете задавать стиль для тэгов. Иными словами, в стилевых таблицах вы определяете, как будет выглядеть веб-страница в браузере. Преимущества стилевых таблиц: 1. Таблицы стилей позволяют отделить логическую структуру страниц от визуального представления (оформления), ведь язык HTML изначально был разработан для разметки структуры документа. 2. Созданная таблица стилей может применяться ко всем страницам сайта, благодаря чему соблюдается единство его оформления. 3. Если сайт оформлен с помощью единой стилевой таблицы, то в случае внесения изменений в оформление тэгов в одном месте (в стилевой таблице) эти изменения вступят в силу на всех страницах сайта и вам не придётся открывать и редактировать все страницы, где встречаются эти тэги. Тем самым технология CSS позволяет гибко управлять внешним представлением страниц на экране. Повторим пример нашей первой веб-страницы, добавив в него простейшую таблицу стилей. Она будет располагаться в новом тэге <style>, вложенном в тэг <head>:
Открыв полученный файл в браузере, увидим, что заголовок «Добро пожаловать!» стал красного цвета и нежирного начертания. Мы создали определение стиля для тэга <h1>. 2.5.2. Синтаксис таблиц стилей Все объявления стилей называются правилами (rules): h1 {color:red} Правило состоит из двух частей: • селектор (h1) определяет html-тэг (заголовок, абзац и т. д.); • определение (color:red) устанавливает стиль, применяемый к данному селектору (тэгу). Определение, в свою очередь, тоже состоит из двух частей: свойства (color) и значения (red). Определения записываются в фигурных скобках {…} и отделяются друг от друга точкой с запятой. Свойства и некоторые значения определены в спецификации стилевых таблиц. Замечание. Обратите внимание, что селекторы пишутся без угловых скобок. Довольно распространёнными ошибками у начинающих являются записи вида <h1> {color:red} или <h1 {color:red}>. Для уменьшения размеров таблицы можно группировать несколько селекторов и определений в одном правиле. Селекторы группируются через запятую (,), определения – через точку с запятой (;). Например: h1, h2 {color:red; font-style:italic; font-family:Arial} В данном примере задаётся одинаковое определение для заголовков первого и второго уровня: они будут иметь красный цвет, курсивное начертание и шрифт Arial, оставаясь при этом различных размеров (соответствующих размерам заголовков первого и второго уровня по умолчанию), так как размер шрифта (свойство font-size) в определении не указан. С помощью таблиц стилей можно отменить жирное начертание у заголовков, заданное в браузерах по умолчанию: h1, h2 {font-weight: normal}. Тэги физического выделения (<b>, <i>, <font> и т.д.) не позволят вам этого сделать. Подробный список часто используемых свойств стилевых таблиц приведён в прил. 3. 2.5.3. Наследование Наследованием в CSS называется свойство вложенного тэга наследовать свойства своего родительского тэга. В предыдущих примерах мы определили для тэга <h1> красный цвет. Допустим, на вашей веб-странице внутри <h1> встречается курсивное выделение <i>: <h1>Пример <i>наследования</i> свойств родительского элемента</h1> Какого цвета будет слово «наследования»? Правильный ответ – красного. Так как мы не определили цвет для тэга <i>, он унаследует свойство от родительского тэга, в данном случае – от <h1>. Поскольку все элементы, отображаемые в окне браузера, вложены в тэг <body>, от него наследуют свойства все остальные тэги. Таким образом, имеет смысл определить стиль по умолчанию для всего документа, например: body {color: black; bgcolor: lightgreen; font-family: Arial} а затем по мере необходимости добавлять стили для разных тэгов. 2.5.4. Контекстные селекторы Это стилевое оформление для селектора (тэга), который находится внутри другого селектора (тэга). В примере: <h2>Пример <i>наследования</i> свойств родительского элемента</h2> вы можете определить стилевое оформление для <i>, когда он находится внутри <h2>: h2 i {color: green} Как видно из примера, контекстный селектор записывается после родительского селектора через пробел. В этом примере все тэги <i>, заключённые внутри <h2>, будут зелёного цвета (и курсивными – в силу действия самого́ тэга <i>). Можно группировать несколько контекстных селекторов: h2 i, p b {color: green} 2.5.5. Способы включения стилевых таблиц в HTML-документ Существует три способа добавления CSS-таблиц в HTML-документ. 1. Подключение внешней стилевой таблицы (с помощью тэга <link>, помещаемого в заголовочную часть HTML-документа <head>):
В этом случае внешняя стилевая таблица выполняется в виде отдельного текстового файла (в данном примере имя файла стилевой таблицы – mysite.css). Этот файл может быть создан с помощью любого текстового редактора, например Notepad. Нужно только не забыть при сохранении этого файла присвоить ему расширение .css вместо .txt, предлагаемого по умолчанию. 2. Использование внутренней стилевой таблицы, действующей только в данном документе (тэг <style> помещается в заголовочную часть HTML-документа <head>) <style type="text/css"> h1 {color: blue} </style> 3. Указание стиля непосредственно внутри тэга <h1 style="color: red; font-family:Arial">…</h1> Очевидно, использование внешней стилевой таблицы – наиболее предпочтительный вариант. Ведь вы можете подключить эту таблицу ко всем документам сайта и таким образом получите достаточно гибкий механизм управления его внешним видом. При внесении изменений в файл стилевой таблицы они вступят в силу сразу на всех страницах. Стилевая таблица в <style>…</style> (второй способ) действует только внутри одного документа. Этот способ имеет смысл использовать, если для одной из страниц сайта требуется задать отличное от других оформление. Третий способ теряет все преимущества таблиц стилей, так как записывается внутри тэга и применяется только к нему. (Представьте себе, что вам надо изменить этот стиль на нескольких сотнях страниц.) Поэтому пользоваться этим способом имеет смысл лишь в случаях, когда необходимо некоторые немногие тэги оформить особым образом, отличным от других аналогичных тэгов. 2.5.6. Приоритет применения таблиц стилей Как видно из ранее изложенного, к документу может быть применено сразу несколько стилевых таблиц. Возникает вопрос: что же произойдёт, если установки стилей перекроют друг друга? Пусть имеется следующий HTML-документ:
и подключённая к нему стилевая таблица в файле mysite.css: h1 {color:red} p {color:purple} Здесь стиль для тэга <h1> задан всеми тремя способами. Какого цвета окажется надпись «О слонах», когда страница будет отображена в браузере: красного (как указано во внешней стилевой таблице, подключённой с помощью тэга <link>), жёлтого (как указано во внутренней стилевой таблице, заключённой в тэг <style>) или зелёного (стиль указан внутри тэга <h1>)? Правильный ответ – зелёного (и шрифтом Arial). Браузер, считывая такую страницу, находит сначала тэг <link>, затем <style>, затем определение внутри тэга. Более позднее правило имеет приоритет. Последующий текст «На этой странице…», заключённый в тэг <p>, будет отображаться фиолетовым цветом, как задано во внешней стилевой таблице, поскольку правило для него не перекрыто правилами в тэге <style> и внутри тэга <p>. Таким образом, самым высоким приоритетом обладает стиль, указанный внутри тэга, за ним следует <style> и самый низкий приоритет – у <link>. Если никаких стилей нет, то используются настройки браузера по умолчанию. Эти стили в порядке их приоритета образуют как бы многоступенчатый каскад, отсюда название таблиц стилей – «каскадные». 2.5.7. Классы в стилевых таблицах В предыдущих примерах правила стилей назначались для определённого тэга (селектора). Для большей гибкости при оформлении страниц можно создать свои собственные классы и задать для них стили. Для создания класса ему нужно дать имя. Имена классов можно давать любые, но лучше осмысленные. Рассмотрим два примера. 1. Создание произвольного класса, который можно присваивать любому тэгу на странице. .redarial {color: darkred; font-family: Arial} .bluecourier {color: darkblue; font-family: Courier} Здесь redarial и bluecourier – названия классов. Обратите внимание на синтаксис (перед названием класса ставится точка). Чтобы оформить текст на странице, используя созданные классы, добавим атрибут class: <h1 class="redarial">Заголовок красным шрифтом Arial</h1> <h2 class="redarial">Подзаголовок красным шрифтом Arial</h2> <p class="redarial">Простой текст красным шрифтом Arial</p> <h1 class="bluecourier">Заголовок синим шрифтом Courier</h1> <h2 class="bluecourier">Подзаголовок синим шрифтом Courier</h2> <p class="bluecourier">Простой текст синим шрифтом Courier</p> 2. Привязка класса к определенному тэгу. В этом случае в стилевой таблице записывается селектор (имя тэга) и затем через точку – имя класса. В качестве примера рассмотрим текст в виде «часто задаваемых вопросов и ответов», который часто встречается в технической (и не только) литературе. p.question {font-weight: bold} p.answer {font-style: italic; color: gray} Эти классы можно использовать так: <p class="question">Что такое HTML?</p> <p class="answer">HyperText Markup Language – язык разметки гипертекстовых документов. Документы в формате HTML могут включать гипертекстовые ссылки, позволяющие пользователю перейти к другому HTML- документу.</p> <p class="question">Что такое CSS?</p> <p class="answer">Стилевые таблицы – набор правил оформления и форматирования, которые могут быть применены к различным элементам веб-страницы.</p> 2.5.8. Комментарии в стилевых таблицах Комментарии в стилевых таблицах заключаются в символы /* … */. Как и комментарии в HTML, они могут быть использованы для временного исключения одной или нескольких строк из стилевой таблицы. Вложенные комментарии в CSS, как и в HTML, не допускаются. 2.5.9. Оформление гипертекстовых ссылок Напомним, что гипертекстовая ссылка создается тэгом <a href = "путь">…</a>. Но этот тэг не совсем обычный. Ссылка может быть в одном из четырёх состояний: непосещённая; посещённая; активная (в момент нажатия на неё); при наведении на неё курсора мыши. В браузерах по умолчанию для каждого из этих состояний определены разные цветовые настройки, и текст ссылки подчёркнут. В стилевых таблицах ссылки оформляются с помощью псевдоклассов для тэга <a> – ключевых слов, обозначающих различные состояния гиперссылки. Следует обратить внимание, что имя псевдокласса отделяется от селектора двоеточием, а не точкой: a:link {color: #996600} /* непосещённая ссылка */ a:visited {color: #009966} /* посещённая ссылка */ a:active {color: orange} /* активная ссылка */ a:hover {color: maroon; text-decoration: none} /* в момент наведения */ Обратите внимание на свойство text-decoration: none – при наведении мыши «ссылочный текст» будет неподчёркнутым (по умолчанию для ссылок указано свойство text-decoration: underline). Псевдоклассы могут комбинироваться с обычными классами, при этом после селектора сначала записывается имя обычного класса через точку, затем – имя псевдокласса через двоеточие: a.myclass:link {свойство:значение; ...} a.myclass:visited {свойство:значение; ...} ... <a href="путь" class="myclass">текст ссылки</a>
В этом параграфе рассматриваются свободно позиционируемые элементы, т.е. фрагменты, которые могут размещаться на веб-странице произвольным образом. До сих пор браузер автоматически размещал текст на странице, как правило, растягивая его на всю ширину окна. Исключением из этого были лишь таблицы, для которых можно было задать фиксированную ширину ячеек, но местоположением их также нельзя управлять вполне свободно – оно зависит от соседних ячеек таблицы. (Существуют также фреймы, но они в данном пособии не рассматриваются.) В общем случае, размерами элемента управляет браузер на основе размеров его соседей и родителя (все элементы вложены в тэг <body>). Для свободно позиционируемых элементов этого ограничения не существует – мы можем полностью управлять их размерами и местоположением. Они могут даже перекрывать друг друга. 2.6.1. Строчный фрагмент <div> Тэг <div> действует сходно с <p> – задаёт строчный фрагмент текста, т.е. такой фрагмент, который автоматически разбивается браузером на строки в соответствии с заданными размерами и положением. От тэга <p> он отличается тем, что последовательность таких фрагментов не обязательно отображается в окне браузера непосредственно друг под другом; размеры и положение каждого из них можно задать индивидуально с помощью свойств стиля, перечисленных в следующем примере: <div style="position: absolute; left: 50; top: 50; width: 200; height: 100; background-color: lightgreen; overflow: scroll"> Это – строчный фрагмент! </div> Мы можем управлять следующими параметрами свободно позиционируемого элемента: • координатами левого верхнего угла (свойства left, top); • геометрическими размерами (width, height); • слоем (уровнем), или z-индексом (z-index); • видимостью или невидимостью (visible); • поведением в случае, если содержимое элемента выйдет за его размеры (overflow); • способом позиционирования – относительным или абсолютным (position). О z-индексе следует сказать подробнее. Представим себе, что все свободно позиционируемые элементы «сложены» в своеобразную «стопку» и пронумерованы в порядке снизу вверх. При этом элементы с бо́льшими номерами перекрывают элементы с меньшими номерами. Этот номер в воображаемой «стопке» и есть z-индекс. Способ позиционирования (атрибут position) определяет, откуда отсчитывается расстояние, указанное в свойствах top и left. Если его значение равно absolute, за начало координат принимается верхний левый угол документа; в противном случае – «текущая» позиция в документе, в которой был бы размещён очередной автоматически позиционируемый элемент. По умолчанию свободно позиционируемый элемент растягивается по вертикали, если его содержимое в нём не помещается. Это поведение можно изменить, добавив определение overflow:scroll. В этом случае элемент превращается в своеобразную «страничку в странице», имеющую собственные полосы прокрутки. Превратить автоматически размещаемый абзац в свободный элемент можно, заменив тэг <p> на <div> и указав необходимые свойства стиля. Строчный фрагмент может включать в себя несколько абзацев, задаваемых тэгами <p> внутри него. В этом случае браузер размещает их автоматически внутри пространства, отведённого под строчный фрагмент. 2.6.2. Символьный фрагмент <span> Символьный фрагмент <span> ведёт себя в основном так же, как и строчный фрагмент <div>, но не обязательно должен представлять собою абзац или несколько абзацев. Внутри него могут располагаться отдельные слова или даже буквы. Пример. Поместим в символьный фрагмент одно слово и зададим ему позиционирование выше остальных слов в тексте на 5 пунктов: Слово <span style="position: relative; top: -5pt">подскочило</span> в строке. В браузере это отобразится так: Слово подскочило в строке. |
|||||||||||||
|
NIKOLAS InTeRnEt-Fo4eVa Группа: Модераторы Сообщений: 850 
|
Добавлено: 04-08-2006 17:11 | ||||||||||||
Хм...ничего так  ...но у меня всё равно попроще будет...так что если кому надо будет обращайтесь.
|
|||||||||||||
|
Heligar Akuma no Kodomo Группа: Администраторы Сообщений: 1555 
|
Добавлено: 04-08-2006 23:44 | ||||||||||||
| Я помню, чем закончилось для лиги мое учение по html... | |||||||||||||
|
The lost angel Пайпер в отставке Группа: Модераторы Сообщений: 865 
|
Добавлено: 05-08-2006 04:12 | ||||||||||||
|
http://naivguy.narod.ru/ind1/soft/html.rar если уж начали по html говорить то ловите. учебник для даунов написан, любой поймет. ток без обид, сама по нему училась :)) за вирусы тож не бойтесь, эт ссылка с сайта моего друга, если вдруг че, то я ему в глаз дам :)) |
|||||||||||||
|
Yagun DoomShift Группа: Участники Сообщений: 121 
|
Добавлено: 11-08-2006 19:35 | ||||||||||||
Лига до сих пор не работает и вряд ли когда-нибудь ещё будет  Уважаемый флудер Yagun!:) У нас тут тема html,а не лига и т.п. Поэтому сообщения не касающиеся html,просьба сюда не кидать. Отредактировал NIKOLAS. Да в глаз ему дать за такое дело, и все проблемы...предупреждения не помогают, проверено опытом поколений. Отредактировала Лоста . |
| Страницы: 1 |
|
| Глубина / Уроки / Уроки по Html |