HTML & WEB Hyper. Text Markup Language
Основы HTML Термин "гипертекст" ввел в 1965 году американец Тед Нельсон. Автор термина понимал под ним "ветвящийся текст, выполняющий действия по запросу". То есть, текст, содержащий ссылки на другие фрагменты, структурированный как система возможных переходов является гипертекстом. Развитие стандартов HTML n В 1969 году был создан язык – GML (Generalized Markup Language). n 22 декабря 1995 – принят стандарт HTML 2. n 1996 – консорциумом W 3 C принята спецификация CSS 1. n 14 января 1996 – принят стандарт HTML 3. 2. n 18 декабря 1997 – принят стандарт HTML 4. 0. n 24 декабря 1999 – принят стандарт HTML 4. 01. n 1999 – принята спецификация CSS 2. n 26 января 2000 – принят стандарт XHTML 1. 0. n 16 февраля 2007 – принят стандарт XHTML 1. 1. Уровни html n В 1994 году HTML был разбит на уровни. Было выделено 4 уровня: n Уровень 0: включает в себя заголовки, ссылки, списки. n Уровень 1: добавляются рисунки и элементы выделения текста. n Уровень 2: добавляются формы, позволяющие пользователю вводить информацию. n Уровень 3: добавляются таблицы.
Особенности HTML 5 n n n HTML 5 – это, скорее, новая платформа для создания веб – приложений, нежели стандарт продолжающий традиции предшественников. HTML 5 регламентирует взаимодействие с Java. Script посредством объектной модели документа. HTML 5 поддерживает все элементы HTML 4.
Теги n n Ø Ø Ø n Html – Hyper. Text Markup Language – язык разметки гипертекста. HTML не является языком программирования, он предназначен для разметки текстовых документов. То, как будут выглядеть картинки, текст, таблицы и другие элементы на странице, и как они будут располагаться относительно друга, определяют метки (теги – от англ. tag). Тег HTML состоит из следующих друг за другом в определенном порядке элементов: левой угловой скобки “<“(такой же символ, как "меньше чем") имени тега, например title или head необязательных атрибутов (атрибуты записываются по следующей схеме: имя атрибута ="значение") необязательного слэша “/ “, который означает, что тег является конечным тегом, закрывающим некоторую структуру. правой угловой скобки “ > “ (такой же, как символ "больше чем"). Совокупность открывающего (<…>) и закрывающего (</…>) тегов – называется контейнером. Контейнер может содержать внутри себя другие теги. Например: <тег 1><тег 2><тег 3>…< /тег 3></тег 2></тег 1>. Тег который мы открыли первым – закрывается последним.
Шаблон документа n Существует множество простых и сложных программ для написания страниц HTML. Одной из таких программ является стандартный блокнот (Notepad). Написание страниц принято начинать с более или менее универсального шаблона: <html> <head> <title>Шаблон </title> </head> <body> Это шаблон web – странички. </body> </html> n
Шаблон документа 1. Выбрать файл → Сохранить как (File →Save as) 2. Выбираем куда сохранить 3. Вводим имя документа. Например: index. html
Шаблон документа n n Итак, все, что находится между <…> и </…> - это тег. Текст, не находящийся между такими скобками весь виден при просмотре в браузере ! Шаблон открывается тегом <html> - это обозначение начало документа. Он должен всегда открывать ваш документ, также как тег </HTML> должен непременно стоять в последней его строке. Эти теги обозначают, что находящиеся между ними строки представляют именно единый HTML документ, а не какой-то другой файл. Контейнер <head> … </head> - это заголовочная часть документа. Все теги, расположенные внутри данного контейнера – это что-то вроде служебной информации. Элементы, находящиеся внутри контейнера head (кроме названия документа, записываемого с помощью контейнера title), не видны на экране, во всяком случае, напрямую. Внутри данного контейнера могут находиться следующие элементы: <title>… </title> <meta> <style>…</style> <script>…</script>
Шаблон документа n Между тегами <title>…</title> записывается название документа и представляет собой текстовую строку. Название появляется в заголовке окна браузера.
Шаблон документа n n n В заголовок добавлен еще один функциональный тег, тег <meta> Этот элемент определяет для документа набор свойств, которые задаются в виде свойства/значение. В качестве этих свойств могут выступать: имя автора, список ключевых слов, кодировка страницы и многие другие. Все свойства задаются в виде значения атрибута name, либо http-equiv, а далее в content значение этих свойств. Значения атрибута name: Ø author - Определяет имя автора документа. Синтаксис: <meta name= "author" content="имя_автора"> Ø generator - Этот параметр очень любят редакторы Html документов, и просто выдают ваше неумение все сделать ручками. Синтаксис: <meta name= "generator" content="Microsoft. Front. Page Express 2. 0"> Ø keywords - задает ключевые слова для поиска страницы. Синтаксис: <meta name= "keywords" content="…, …, …">
Шаблон документа n description - Задает краткое описание Вашей страницы. Синтаксис: <meta name= "description" content="Ваш текст"> n content-type - этот параметр описывает тип содержания документа и кодировку в которой он сделан. Синтаксис: <meta http-equiv= "content-type" content="text/html; charset=windows 1251"> Слова text/html - это тип содержания документа, т. е. это есть текст в формате HTML. Далее charset - это кодировка символов, она может принимать следующие значения: windows-1251, koi 8 -r, ISO-8859 -1, utf-8 и т. д. Ещё одним из важных параметров является параметр refresh. Синтаксис: <meta http-equiv ="refresh" content="60; url=http: //www. site. ru"> Браузеры поймут эту строку как инструкцию ожидать 60 секунд, а затем загрузить документ, находящийся по адресу, указанному в URL. n
Шаблон документа n После контейнера head идет контейнер body. В этот контейнер помещают содержимое страницы. Кроме того он может установить очень много параметров страницы с помощью своих атрибутов. n bgcolor устанавливает цвет фона документа. text устанавливает цвет отображаемых символов. link Это цвет, которым будут отображаться ссылки на другие документы. vlink Этим цветом выделяются уже посещенные ссылки (Visited LINKs). alink Этот цвет для того, чтобы помечать ссылки активные в данный момент (Active Link). n n
Шаблон документа n n n n background Этот параметр задает фоновое изображение. bgproperties Если установлено значение fixed, фоновое изображение не прокручивается. leftmargin Устанавливает границу левого поля в пикселях. topmargin Устанавливает границу верхнего поля в пикселях. rightmargin Устанавливает границу правого поля в пикселях. bottommargin Устанавливает границу нижнего поля в пикселях. Пример группирования: <body bgcolor= "цвет" link= "цвет" text= "цвет" >
Шаблон документа n n Цвет во всех этих параметрах задается в следующем формате: #RRGGBB где R (red - красный), G (green - зеленый), B (blue - синий)- это составляющие компоненты цвета в шестнадцатеричной форме. Для простоты в HTML определены 16 стандартных цветов.
Градация красного
Градация зеленого
Градация синего
RGB - Red Green Blue #11 FF 00 0123456789 ABCd. EF #00 00 00 – черный #FF FF FF – белый #FF 00 00 – красный #00 FF 00 – зеленый #00 00 FF - синий
Цветовое оформление n Определение цвета составных частей документа – первый шаг в его создании. Если это не сделано, используются цвета по умолчанию. Они определяются установками программы просмотра. n Примечание: Так как вы не можете знать, какие цвета использует по умолчанию браузер вашего читателя, лучше всего определить все цветовые атрибуты. Тогда заведомо один и тот же цвет не будет использован, например, для текста и фона. n Включение комментариев: В HTML документ можно включать комментарии, которые не будут видны вашему читателю. Они должны начинаться тегом <!-- и заканчиваться тегом --> Все, что заключено внутри этих тегов, при просмотре страницы остается невидимым.
Форматирование текста n HTML предполагает, что автор документа ничего не знает о компьютере своего читателя. Читатель вправе установить любой размер окна и пользоваться любым из имеющихся у него шрифтов. Это означает, что место переноса в строке определяется только программой просмотра и установками конечного пользователя, что может превратить документ в сплошной неудобочитаемый текст в окне программы просмотра. n Избежать этой неприятности позволяют элементы форматирования текста. n Одним из таких элементов является тег абзаца. Поместите открывающий тег <p> в начало каждого нового абзаца вашего текста, и программа просмотра отделит абзацы друг от друга пустой строкой.
Форматирование текста n n n В HTML несколько стоящих подряд тегов <p> не дают дополнительного пространства между абзацами. Тег абзаца имеет один атрибут. Это атрибут align, имеющий следующие значения: ¨ left выравнивает абзац по левой границе окна браузера ¨ center выравнивает абзац по центру ¨ right выравнивает абзац по правой границе окна браузера Синтаксис: <p align="значение">…</p> Каждый последующий абзац игнорирует, заданное для предыдущего абзаца значение align.
Форматирование текста n Для того чтобы перейти на следующую строку в HTML существует тег разрыва строки Он заставляет программу просмотра выводить стоящие после него символы с начала новой строки. В отличие от тега абзаца, тег не добавляет пустую строку. Вдобавок он не имеет соответственного закрывающего тега. <p> There will never be Another one like you There will never be Another one who can Do the things you do. . </p>
Структурирование текста n n n Для того чтобы текст смотрелся интереснее, попробуем придать ему определенную структуру. Для удобства читателей текст рекомендуется разбить на логические части, каждая из которых посвящена отдельной теме. После того как это будет сделано, каждой части текста следует дать смысловой заголовок с целью облегчить поиск нужной темы. Теги заголовков являются одними из самых употребляемых в языке разметки гипертекста. Элемент "заголовок" является контейнером и поэтому должен иметь открывающий (<h 1>) и закрывающий (</h 1>) теги. HTML располагает шестью уровнями заголовков: h 1 (самый верхний), h 2, h 3, h 4, h 5 и h 6 (самый нижний). Элемент "заголовок" предполагает автоматическую вставку пустых строк до и после него. У заголовка есть два атрибута: align и title – задает всплывающую подсказку. Синтаксис: <hn align="значение" title="подсказка">…</hn> где n=1, 2, 3, …, 6
Структурирование текста n <html> <head><title>Пример </title> </head> <body> <h 1>Заголовок первого уровня </h 1> <h 2>Заголовок второго уровня </h 2> ……… <h 6>Заголовок шестого уровня </h 6> </body> </html>
Структурирование текста n n Другим методом разделения документа на части является проведение горизонтальных линий. Они визуально подчеркивают законченность той или иной области страницы. Элемент <hr> позволяет провести горизонтальную линию в окне большинства программ просмотра. Тег <hr> имеет следующие атрибуты: ¨ align – выравнивает горизонтальную линию. Имеет следующие значения: ¨ left – выравнивает по левому краю ¨ right – по правому ¨ center – по центру ¨ width – устанавливает длину линии в пикселях или процентах от ширины окна браузера (в этом случае добавляется символ %) ¨ size – устанавливает толщину линии в пикселях ¨ noshade – отменяет тень линии ¨ color – указывает цвет линии Синтаксис: <hr align="значение" width="значение" noshade color= " цвет " >
Логическое форматирование n n n Логическое форматирование и четкое структурирование являются признаками хорошо составленного документа. Они обеспечивают большую гибкость в его использовании. Помня об этом, разработчики HTML создали целую группу форматирующих элементов, согласно своему назначению названных логическими. Преимущество этого подхода в том, что документ не привязывается к какой-нибудь определенной платформе. Хотя внешний вид документа может слегка измениться, содержание и структура останутся теми же самыми. В HTML существует целая группа элементов логического форматирования: ¨ <cite> Используется для выделения цитат или названий книг и статей, при этом текст обычно выводится курсивом. ¨ <code> Применяется для вывода небольшого куска программного кода (для больших листингов используется тег <pre>) шрифтом фиксированной ширины. ¨ <em> Этот элемент обычно используется для выделения важных фрагментов текста. Браузеры обычно отображают такой текст курсивом. ¨ <kbd> Элемент, выделяющий шрифтом фиксированной ширины текст, вводимый пользователем с клавиатуры. ¨ <samp> Используется для выделения нескольких символов шрифтом фиксированной ширины. ¨ <strong> Этот элемент обычно используется для выделения важных фрагментов текста. Браузеры обычно отображают такой текст полужирным шрифтом. ¨ <var> Используется для отметки имен переменных. Обычно такой текст отображается курсивом.
Элемент blockquote n n Возможно, вам захочется включить в документ какую-либо длинную цитату. Для выделения цитаты из основного текста в HTML существует элемент <blockquote>. Этот элемент является контейнером и может содержать любые форматирующие теги. Современные браузеры реагируют на элемент <blockquote> смещением текста цитаты вправо. Некоторые текстовые программы просмотра обозначают цитату символами >, располагающимися в крайнем левом столбце экрана. Так как сегодня большинство браузеров являются графическими программами, элемент < blockquote > позволяет авторам внести в текст некоторое визуальное разнообразие.
Физическое форматирование n Последней "инстанцией" определения внешнего вида вашего документа, как отмечалось уже неоднократно, является программа просмотра читателя. Вы имеете ограниченные возможности повлиять на этот процесс с помощью элементов физического форматирования: ¨ <b> Выделяет текст полужирным шрифтом. ¨ <i> Выделяет текст курсивом. ¨ <tt> Выводит текст шрифтом фиксированной ширины. ¨ <u> Элемент подчёркивания. ¨ <strike> Элемент зачеркивания. Отображается текст, перечеркнутый горизонтальной линией. ¨ <big> Выводит текст шрифтом большего размера. ¨ <small> Выводит текст шрифтом меньшего размера. ¨ <sub> Сдвигает текст ниже уровня строки и выводит его (если возможно) шрифтом меньшего размера. ¨ <sup> Сдвигает текст выше уровня строки и выводит его (если возможно) шрифтом меньшего размера.
Физическое форматирование n Задание вывести следующую формулу
Тег FONT n n n Элемент font представляет собой контейнер, т. е. требует как открывающего, так и закрывающего тегов. После стартового тега обязательно идет указание атрибутов, без которых элемент не оказывает никакого влияния на текст, помещенный в контейнер. Элемент font может использоваться внутри любого другого текстового контейнера. Имеет следующие атрибуты: ¨ face – позволяет указать тип шрифта, которым программа просмотра выведет ваш текст (если таким располагает пользователь). Параметром атрибута служит название шрифта, которое должно в точности совпадать с названием шрифта, имеющегося у пользователя. ¨ size – служит для указания размера шрифта в условных единицах от 1 до 7. Размер может быть указан как абсолютной величиной (size="5"), так и относительной (size="+2"). Последний метод чаще употребляется вместе с basefont. ¨ Color – устанавливает цвет шрифта. Синтаксис: <font face="шрифт" color="цвет" size="значение" >
Тег BASEFONT n n n Тег <basefont> служит для указания размера, типа и цвета шрифта, стандартных для данного документа. Эти величины обязательны для всего документа, если только не переназначаются при помощи элемента font. После закрытия элемента font значения тэга <basefont> восстанавливаются. Значения атрибутов basefont могут быть изменены другим тегом <basefont> в любом месте документа. Обратите внимание, что это не контейнер и закрывающего тега не существует. Тег <basefont> использует те же самые атрибуты, что и элемент font.
Тег BASEFONT Рассмотрим пример: <html> <head> <title>Шаблон</title> </head> <body>This text is before the BASEFONT tag. <basefont size=6 face=“georgia">This text is after the BASEFONT tag. Size changes are relative to the basefont <font size="-3"> SIZE. </font> This text is after the closing font tag </body> </html> n
Форматы изображений n n n Различают форматы растровых и векторных изображений. Растровые изображения хранятся в файлах с расширениями jpg, gif, bmp, tiff, png, psd. Векторные – cdr, max, ai. В веб - разработке используются JPEG, PNG и GIF для растровой графики и SWF для векторной. Все три формата для растровой графики используют сжатие графической информации. Формат GIF позволяет создавать анимированные картинки. Этот формат является сжатым, и допустимое количество цветов в нем 216. Сжатие происходит без потерь, т. е. изображение записывается без каких-либо преобразований. Формат JPEG также является сжатым, и применяется для изображений требующих большое количество цветов вплоть до 16 млн. Сжатие происходит после оптимизации и поэтому происходят потери в качестве. Размер файла сильно зависит от требуемого качества изображения, которое может иметь около 12 уровней качества (от очень плохого до наилучшего). Стандарт PNG позволяет создавать изображения в 16 млн. цветов без потери в качестве. Но из-за этого занимает намного больше места, чем JPEG.
Вставка графики Для того, чтобы вставить в документ изображение необходимо воспользоваться тегом <img> совместно с атрибутом src, поместив их в нужное место вашего HTML-документа. n Синтаксис: <img src="URL-адрес изображения"> n По умолчанию браузер выводит изображение немедленно после текста или другого объекта, описанного предыдущими инструкциями. n Помимо атрибута src тег имеет следующие атрибуты: ¨ alt - Этот атрибут задает текст, который будет изображаться вместо картинки, если она не загрузилась или не отображается. Как правило в тексте указывается краткое описание изображения. n
Вставка графики ¨ align Задает расположение рисунка в окне браузера и его выравнивание относительно текущей строки. Имеет следующие значения: ¨ top - Выравнивает верхний край изображения по верхнему краю текущей строки. ¨ middle Выравнивает центр изображения по базовой линии текущей строки.
Вставка графики ¨ bottom Установка по умолчанию. Выравнивает нижний край изображения по базовой линии текущей строки. left Выравнивает изображение по левому краю окна браузера. ¨ right Выравнивает изображение по правому краю окна браузера. ¨ width - задает ширину области в пикселях, отводимой в окне под изображение. ¨ height - задает высоту области в пикселях, отводимой в окне под изображение. ¨
Вставка графики hspace Используется для указания ширины пространства слева и справа от изображения в пикселях. ¨ vspace Используется для указания ширины пространства сверху и снизу от изображения в пикселях. Как правило по умолчанию равно 0. Но может быть и иным. ¨ border Задает толщину рамки, которой будет обрисовываться изображение. Если изображение не является ссылкой, то оно по умолчанию не окружается рамкой. Если же это изображение-ссылка, то толщина рамки будет равна 2. Рамка иногда может портить стиль вашей страницы, тогда используйте border=0. ¨
Основы работы с видео и звуком Предусмотрено два тега для работы с аудио и видео соответственно: <audio> и <video>. <audio> <source src="sound 1. ogg"> <source src="sound 1. mp 3"> </audio> Тег <audio> содержит следующие атрибуты: n autoplay – при его добавлении, воспроизведение файла начинается сразу же после загрузки страницы; n controls – добавляет панель управления к видео; n loop – воспроизведение видео повторяется с начала, после его завершения; n preload – используется для загрузки файла вместе с загрузкой самой страницы, игнорируется, если использован autoplay; n src – задает путь к файлу для воспроизведения. <audio autoplay controls src="1. mp 3"> Тег <audio> не поддерживается </audio>
Видео добавляется аналогичным образом: <video src="video 1. avi"> </video> Атрибуты тега <video>: n autoplay – при его добавлении, воспроизведение файла начинается сразу же после загрузки страницы; n controls – добавляет панель управления к видео; n height – задает высоту области, для воспроизведения видео. n loop – воспроизведение аудио повторяется с начала, после его завершения; n poster – указывает путь к изображению, пока видео не воспроизводится, или недоступно; n preload – используется для загрузки аудиофайла вместе с загрузкой самой страницы, игнорируется, если использован autoplay; n src – задает путь к файлу для воспроизведения. n width – задает ширину области, для воспроизведения видео.
Гиперссылки n n Гиперссылки являются основным элементом HTML, позволяющим связывать отдельные страницы в единое электронное издание. Гиперссылка состоит из двух частей. Первая из них – это то, что вы видите на WEB-странице; она называется указатель (anchor). Вторая часть, дающая инструкцию браузеру, называется адресной частью ссылки (URL-адресом, URL reference). Когда вы щелкаете мышью по указателю ссылки, браузер загружает документ, адрес которого определяется URL-aдpecoм. Составные части ссылки рассмотрены ниже. Кодируется гиперссылка с помощью тега <a>: Синтаксис: <a href="URL-адрес"> Указатель </a> УКАЗАТЕЛИ: ¨ Указателем ссылки может быть слово, группа слов или изображение. Текстовый указатель как правило представляется браузером синим цветом и подчеркивается. Графический указатель не подчеркиваются и не выделяется цветом, но вокруг него можно сделать рамку. Для того, чтобы задать графический указатель, надо вместо текста между тегами <a>…</a> вставить нужное изображение с помощью тега <img>. Синтаксис: <a href="document 1. htm"> <img src="link. gif"> </a>
Гиперссылки n Помимо атрибута href у тега <a> имеются еще атрибуты: ¨ title - предоставляет читателю дополнительную информацию. Синтаксис: <a href="page. html" title="описание"> ¨ target позволяет определить окно, в которое будет загружен документ. Имеет следующие значения: n n n Имя окна задаваемое пользователем, в котором будет открыт документ; при этом проверяется, имеется ли окно браузера с данным именем, если таковое отсутствует, то окно создается и в него загружается документ. _blank документ загружается в новое окно браузера _parent документ загружается в окно браузера, породившее данное. _self загрузка документа осуществляется в то же окно. _top при работе с фреймами задание этого значения приводит к тому, что документ, на который указывает гиперссылка, загружается в окно вместо набора фреймов Синтаксис: <a href="page. html" target="значение">
Гиперссылки n Для построения внутренней ссылки сначала нужно создать якорь, показывающий место назначения. Например, если вы хотите сделать ссылку на текст в середине документа, нужно разместить там якорь и дать ему имя при помощи атрибута name тега <a>. При этом атрибут href не используется, и браузер не выделяет содержимое тега <а>. n После того как якорь получил имя, можно приступить к созданию ссылки на него. Для этого, вместо указания в атрибуте href адреса документа, как это делалось ранее, поместим туда имя якоря со специальным префиксом (#), говорящим о том, что это внутренняя ссылка.
Гиперссылки n Создание ссылки на электронную почту так же просто, как и на другую страницу. Вместо http, определяющего Web-адрес, нужно ввести адрес электронной почты после слова mailto: n <a href="mailto: me@mycom. com">Send me E-mail</a>. n Эта ссылка ничем не будет отличаться от остальных гипертекстовых ссылок вашего документа.
Списки в HTML n n В HTML список состоит из тега-контейнера списка, определяющего тип, и стандартных тегов <li>, предваряющих каждый пункт списка. Упорядоченный список используется для нумерованного перечисления отдельных пунктов или указания последовательности каких-то действий. Когда программа просмотра встречает тег упорядоченного списка, она последовательно нумерует пункты списка: 1, 2, 3 и т. д. Упорядоченный список открывается тегом <ol>, а каждый его пункт начинается стандартным тегом <li>. Для создания заголовка списка используется специальный тег <lh>. Список закрывается тегом </ol>. Открывающий и закрывающий теги обеспечивают перевод строки до и после списка, отделяя таким образом список от остального текста, поэтому здесь нет необходимости использовать теги абзаца <p>. Упорядоченные списки допускают вложения друг в друга.
Списки в HTML n Атрибуты тега <ol> ¨ type="A" Устанавливает маркер в виде прописных букв. n type="а" Устанавливает маркер в виде строчных букв. n type= «I" Устанавливает маркер в виде больших римских цифр. n type="i" Устанавливает маркер в виде маленьких римских цифр. n type="1" Устанавливает маркер в виде арабских цифр. ¨ start="n" Устанавливает начальный маркер в текущем списке. n Использование разных типов маркеров позволяет лучше выделять один список из другого.
Списки в HTML n Неупорядоченный список вместо буквенной или цифровой нумерации предполагает использование различных символов, называемых маркерами списка (bullets). n Как и в упорядоченных списках, здесь также обеспечивается перевод строки до и после списка, а также допускается вложенность списков. Список располагается внутри контейнера ul. Программы просмотра создают автоматический отступ для вложенных списков и сами разнообразят маркеры, вид которых зависит от типа программы. n Маркированный список имеет единственный атрибут type, который устанавливает вид маркера. Данный атрибут допускает три значения : disc, square и circle.
Списки в HTML n Списки определений, также называемые словарями специальных терминов (глоссариями), являются особым видом списков HTML. Они представляют текст в форме словарной статьи, состоящей из определяемого термина и абзаца, раскрывающего значение. n Элемент списка определений dl является контейнером и обеспечивает отделение списка от остального текста пустыми строками. Внутри контейнера тегом <dt> помечается определяемый термин, а тегом <dd> – абзац с его определением. Текст, стоящий за тегом <dd>, выводится отдельным абзацем с отступом вниз на одну или две строки (зависит от типа программы просмотра) относительно определяемого термина.
Основы построения таблиц n n n Для того, чтобы определить таблицу нужно воспользоваться тегом <table> Тег <table> представляет собой тег-контейнер, в котором размещается содержимое таблицы. Таблица строится по строкам: для обозначения строки используется контейнер <tr>, для обозначения заголовков столбцов (строк) – контейнер <th>, а для данных в ячейках – контейнер <td>. Заголовки выделяются полужирным шрифтом и центрируются в своих ячейках. В дополнении к этим тегам используются следующие атрибуты: ¨ align Задает выравнивание, допустимые значения: left-по левому краю, right-по правому краю, center-по центру. Задание этого атрибута в теге <table> приводит к выравниванию таблицы относительно окна браузера, а в тегах <tr> или <td> отражается на содержимом ячеек таблицы. ¨ bgcolor Используется в тегах <table>, <tr>, <td>. Задает цвет фона. ¨ border Используется в теге <table>. Задает толщину рамки таблицы. Если задать border="0", то границы ячеек становятся невидимыми cellpadding Атрибут тега <table> , задает расстояние между границами и содержимым ячеек в пикселях cellspacing Атрибут тега <table>, задает расстояние между ячейками таблицы в пикселях.
Основы построения таблиц colspan Атрибут тега <td>. Значение атрибута определяет сколько столбцов таблицы будет занимать данная ячейка. ¨ rowspan Атрибут тега <td>. Значение атрибута определяет сколько строк таблицы будет занимать данная ячейка ¨ height Атрибут тега <table>. Задает высоту таблицы ¨ width Атрибут тега <table>. Задает ширину таблицы ¨ valign Атрибут тега <tr>и <td> задает вертикальное выравнивание содержимого в ячейках. Допустимые значения: top-по верхней границе ячейки, middle-по центру, bottom-по нижней границе. В ячейках таблицы можно помещать любые допустимые конструкции HTML в том числе и картинки и другие таблицы. Наличие в ячейках данных необязательно. Создать пустую ячейку можно двумя способами: ничем не заполнять ее контейнер (<td></td>), либо заполнить ее специальным символом пустого пространства (<td> </td>). ¨ n
Фреймы n n До сих пор мы считали, что в каждый момент времени в окне браузера может отображаться только один документ. Фреймы же позволяют нам открыть в окне браузера - не один, а одновременно несколько документов. Для того, чтобы браузер показал одновременно несколько документов, надо создать специальный фрейм-документ, в котором мы укажем, сколько документов откроется в одном окне браузера, сколько места будет занимать каждый и каким образом они будут располагаться относительно друга. Для описания набора фреймов используется контейнер <frameset> . . . </frameset> В этом случае шаблон странички будет выглядеть следующим образом: <html> <head> <title>Заголовок документа</title> </head> <frameset> <! Здесь располагается описание фреймов -- > </frameset> </html>
Фреймы n n Тег <frameset> поддерживает два атрибута: cols и rows, один из которых обязательно необходимо включить в определение набора фреймов. Формат определения набора фреймов имеет вид: <frameset cols="ширина фрейма, …"> Или <frameset rows="высота фрейма, …"> Атрибут cols предписывает браузеру разбить экран на несколько вертикальных фреймов, ширина которых определяется аргументами cols. Каждый аргумент отделяется от другого запятой. Вы можете определить ширину каждого фрейма либо непосредственно в пикселях, либо в процентах от оставшегося места, либо с помощью звездочки (*). При использовании звездочки, браузер отводит данному фрейму максимально возможную ширину. Следующее определение набора фреймов <frameset cols="100, 50%, *"> Создает три вертикальных фрейма, самый левый из которых имеет ширину 100 пикселей, второй - 50% от ширины окна браузера, а третий занимает оставшееся пространство. Данный набор фреймов будет выглядеть следующим образом:
Фреймы
Фреймы n n Атрибут rows выполняет те же функции, что и атрибут cols, за исключением того, что он создает горизонтальные фреймы. Если Вы теперь самостоятельно попытаетесь воспроизвести последний пример, закодировав теги <frameset></frameset>, то обнаружите, что фреймы не отображаются. Такой результат связан с тем, что не определено содержимое для набора фреймов. Чтобы определить его, надо воспользоваться тегом <frame> вместе с атрибутом src. Синтаксис: <frame src= " ссылка на загружаемый документ/ресурс"> Для предыдущего примера описание фреймов имеет вид : <frameset cols="100, 50%, *"> <frame src="doc 1. html"> <frame src="doc 2. html"> <frame src="doc 3. html”> </frameset> В теге <frame> можно указать дополнительные атрибуты:
Фреймы n n n scrolling Регулирует появление полос прокруток. Имеет три значения: ¨ auto Если содержимое фрейма занимает больше места, чем ему отведено, то браузер автоматически добавляет вертикальную и горизонтальную полосы прокрутки, чтобы пользователь мог просмотреть оставшуюся часть документа в фрейме. ¨ no В данном случае полосы прокрутки не будут появляться ни при каких обстоятельствах ¨ yes Полосы прокрутки будут появляться всегда вне зависимости от потребности в них. noresize По умолчанию, пользователь может менять положение границ фреймов, перетаскивая их с помощью мыши. Для блокировки изменения размеров фрейма и предотвращения перемещения границ используется данный атрибут marginheight Позволяет указать размер верхнего и нижнего полей фрейма marginwidth Позволяет указать размер левого и правого полей фрейма name Имя фрейма.
Фреймы Решим теперь вопрос о том, как работать с гиперссылками в HTMLстраницах с фреймами. Если например в левом фрейме создать гиперссылку: <a href= " doc. html " >Документ 1</a>, то документ doc. html будет загружен в тот же фрейм. Для того, что бы загрузить документ в другом фрейме, нужно воспользоваться атрибутом target= " имя фрейма " тега <a> n
Фреймы
Формы В HTML существует три тега для создания различного типа полей в форме: <textarea>, <select> и <input>. Любое их количество может быть размещено в контейнере между тeгами <form> и </form>. Рассмотрим эти теги более подробно: n form Этим тегом начинается каждая форма. В нем нужно определить два атрибута, указывающих используемый скрипт и метод посылки данных: ¨ action Определяет URL программы, которая примет и обработает данные формы. Если этот атрибут не определен, данные отправляются по адресу страницы, на которой помещена форма. ¨ method Указывает форме, как послать информацию соответствующей программе обработки (скрипту). Обычно он получает значение post, тогда информация формы посылается отдельно от URL. Если указано значение get, информация формы посылается вместе с URL. n Пример: <form method="post" action="cgi-bin/comment_script. php"> . . . </form> В этом примере дано указание браузеру отправить заполненную форму для обработки скриптом comment_script. php, расположенным в каталоге cgi-bin вашего сервера, и использовать метод посылки post. n
Формы n <textarea> Этот тег предназначен для построения поля для ввода многострочной текстовой информации. В контейнере textarea допускается размещать любой текст, который будет выведен в поле ввода по умолчанию. Данный тег имеет следующие атрибуты: ¨ name Обязательный атрибут, определяющий название информации. ¨ rows Устанавливает высоту поля, т. е. число строк в нём. ¨ cols Устанавливает ширину поля, т. е. длину строки. ¨ value Задает значение, передаваемое обрабатывающему скрипту Если введенный текст не помещается в область выделенную для ввода, то браузер должен обеспечить прокрутку содержимого.
Формы n <select> Создает меню, из которого можно выбрать один или несколько элементов. Элемент select должен иметь закрывающую метку. Внутри него размещаются элементы option, которые задают значения пунктов меню. Меню имеющие возможность выбора нескольких элементов отображается в виде списка, при выборе только одного элемента меню отображается в виде выпадающего. name определяет название информации. ¨ size определяет вертикальный размер окна для опций выбора. Если атрибут опущен или его значение равно 1, выводится всплывающий список опций. Если указано число больше единицы, то опции выводятся в окне с полосой прокрутки. ¨ multiple Этот атрибут позволяет производить выбор сразу нескольких опций. ¨ value Задает значение, передаваемое обрабатывающему скрипту ¨
Формы n n <input> Элемент input обеспечивает ввод однострочных полей с информацией. Также внутри этого элемента ничего не может быть, и поэтому закрывающая метка запрещена. У него существует много параметров, которые задают вид вводимой информации, ее длинну и т. д. type. Этот параметр устанавливает тип поля, или иначе тип вводимой информации: type="text" ¨ Устанавливается по умолчанию. Задает однострочное текстовое поле ввода. Размер поля, который измеряется в количестве видимых символов, задается с помошью параметра size. Размер вводимой строки не ограничен, но при надобности может ограничиваться атрибутом maxlength. Если существует начальное значение текста, т. е. содержимое данного поля при загрузке документа, то оно задается с помощью атрибута value. Для присвоения имени полю используется атрибут name. <input type="text" size="45" name="file" value="win. com" >
Формы n type="password" Этот тип поля полностью аналогичен предыдущему текстовому полю, только вместо вводимых символов показывает один символ называемый символом-маской. Во многих браузерах, да и вообще системах символ-маска отображается символом звездочки. n type="checkbox" Предназначается для простых логических параметров или параметров, которые могут принимать множество различных значений. Отображается в виде помечаемого галочкой квадрата. Для задания имени параметра используется атрибут name, а для задания значения параметра используется value. Начальное состояние квадрата, т. е. отмечен он или нет, задается атрибутом checked. Этот атрибут не имеет значений и сам используется для определения отмеченности, т. е. если его нет, то квадрат не отмечен.
Формы n type="radio" Используется для выбора одного значения из списка нескольких значений. Каждая кнопка в группе должна иметь одинаковое имя задаваемое параметром name, а также собственное значение, которое задает атрибут value. Одна радиокнопка должна инициализироваться как отмеченная атрибутом checked. n type="submit" Создает кнопку, при нажатии на которую содержимое формы будет отправляться обрабатывающему скрипту. Текст кнопки задается атрибутом value. n type="image" Предназначается для создания отправляющей кнопки в виде изображения. Очень полезно если вам не нравится кнопка создаваемая браузером. Атрибут name задает имя кнопки. Для указания URL изображения используется атрибут src, также можно использовать все атрибуты, которые имеет тег изображений <img>. При отправке данных браузер отправляет также координаты точки на изображении, по которой был совершен щелчок мыши.
Формы n type="reset" Создает кнопку, которая по назначению является противоположной submit, т. е. эта кнопка сбрасывает все значения в форме и устанавливает их по умолчанию или заданные при инициализации, т. е. атрибутами value. n type="file" Это поле предназначается для вставки в отправляемые данные содержимого файла, имя которого пользователь набирает в текстовом поле. Современные, а тем более графические браузеры отображают рядом с текстовым полем кнопку, при нажатии на которую можно выбрать файл в интерактивном режиме. Для управления шириной и максимальной длинной текста используются атрибуты size и maxlength, также как в type="text". Некоторые браузеры поддерживают ограничение на передачу файлов определенных типов.
Специальные символы > > ⊂ ⊂ ρ ρ Ù Ù < < ⊃ ⊃ Ρ Ρ û û & & ε ε á á Û Û μ μ Á Á ô ô &frac 34; ¾ Μ Μ é é Ô Ô &frac 58; ⅝ π π É É õ õ ® ® Π Π è è Õ Õ ∩ ∩ φ ϕ È È ñ Ñ ∑ ∑ Φ Φ ù ù Ñ Ñ
Задание 1. Составьте таблицу для расписания ваших занятий. Пусть эта таблица состоит из 8 столбцов и 9 строк. Ширина таблицы - 100%. 2. В первом столбце укажите время начала и конца ваших занятий. Выравнивание данных в ячейках по левому краю. 3. В остальных столбцах школьные предметы по дням недели. 4. Выравнивание дней недели - по центру ячейки и жирным шрифтом. 5. Выравнивание названий предметов - по левому краю. 6. У всех столбцов фон сделайте разным цветом. 7. Между заголовком и таблицей поместите рисунок. 8. Дополнительно создайте еще одну страницу с списком мероприятий на сентябрь. 9. Сделайте каждое мероприятие своим цветом. 10. Добавьте картинку к каждому мероприятию 11. Сделайте форму по выбору мероприятия.
