Форум » Правила и настройки » Как создать страницу при промощи языка html » Ответить

Как создать страницу при промощи языка html

Vаниль: Краткий курс создания web-страницы при помощи гипертекста

Ответов - 59, стр: 1 2 3 All

Мышонок: Ух ты, мы теперь не только актерскому мастерству учимся, но и созданию сайтов

Vаниль: Мышонок Я еще скоро про фотошоп темку сделаю.....

Vаниль: Тело документа Создается с помощью элемента BODY. Именно в теле документа содержится все то, что мы видим на странице. А на странице мы обычно видим: * Текст, блоки текста (причем текста форматированного) * Гиперссылки * Разнообразные списки * Таблицы * Всяческие объекты, картинки * Заполняемые формы Примечания: "Бестелесных" документов не бывает. Документ без тела будет похож на одинокую голову профессора Доуэля (см. структуру HTML=документа). Документ может иметь несколько "тел" – фреймов. В этом случае тело вместе со всем его содержимым удаляется и вместо него вставляется FRAMESET.

Vаниль: BODY Указывает начало и конец тела HTML-документа. Между начальным и конечным тегами содержится текст документа, изображения и таблицы. Одним словом, все HTML-элементы, отвечающие за отображение документа, управление им и гипертекстовые ссылки. Элемент BODY должен встречаться в документе не более одного раза. Атрибуты: MARGINHEIGHT – определяет ширину (в пикселах) верхнего и нижнего полей документа. Работает только в браузерах Netscape. TOPMARGIN – определяет ширину (в пикселах) верхнего и нижнего полей документа. Работает только в браузерах Internet Explorer. MARGINWIDTH – определяет ширину (в пикселах) левого и правого полей документа. Работает только в браузерах Netscape. LEFTMARGIN – определяет ширину (в пикселах) левого и правого полей документа. Работает только в браузерах Internet Explorer. BACKGROUND – определяет изображение для "заливки" фона. Значение задается в виде полного URL или имени файла с картинкой в формате GIF или JPG. BGCOLOR – определяет цвет фона документа. TEXT – определяет цвет текста в документе. LINK – определяет цвет гиперссылок в документе. ALINK – определяет цвет подсветки гиперссылок в момент нажатия. VLINK – определяет цвет гиперссылок на документы, которые вы уже просмотрели. Значения атрибутов BGCOLOR, TEXT, LINK, ALINK и VLINK задаются либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов. Пример: <HTML> <BODY BACKGROUND="images/bricks.jpg" BGCOLOR="#202020" TEXT="#FFFFFF" LINK="#FF0000" VLINK="#505050" MARGINHEIGHT="30" TOPMARGIN="30" LEFTMARGIN="40" MARGINWIDTH="40"> ... Текст документа. ... </BODY> </HTML> Примечания: При задании ширины полей для обеспечения совместимости со всеми видами браузеров используйте одновременно атрибуты MARGINWIDTH/MARGINHEIGHT и TOPMARGIN/LEFTMARGIN как показано в примере. Всегда указывайте атрибуты BGCOLOR и TEXT одновременно. Считайте, что они неразлучны. Если один из этих атрибутов не указан, браузер по умолчанию будет использовать цвет из текущей цветовой схемы Windows. А теперь представьте, что будет, если пользователь использует нестандартную раскраску Windows, где все цвета инвертированы? То-то. Некрасиво получится. Описание Элемент BODY предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера BODY. К такой информации относится текст, изображения, теги, скрипты JavaScript и т.д. Тег BODY также применяется для определения цветов ссылок и текста на веб-странице. Подобная практика в HTML 4 осуждается и взамен для указания цветовой схемы рекомендуется использовать стили, применяя их к селектору BODY. Тем не менее, большинство параметров до сих пор поддерживается разными браузерами. Часто тег BODY используется для размещения обработчика событий, например, onLoad, которое выполняется после того, как документ завершил загрузку в текущее окно или фрейм. Открывающий и закрывающий теги BODY на веб-странице не являются обязательными, однако хорошим стилем считается их использование, чтобы определить начало и конец HTML-документа. Синтаксис <body> ... </body> Закрывающий тег Не обязателен. Параметры alink — устанавливает цвет активной ссылки. background — задает фоновый рисунок на веб-странице. bgcolor — цвет фона веб-страницы. bgproperties — определяет, прокручивать фон совместно с текстом или нет. bottommargin — отступ от нижнего края окна браузера до контента. leftmargin — отступ по горизонтали от края окна браузера до контента. link — цвет ссылок. scroll — устанавливает, отображать полосы прокрутки или нет. text — цвет текста в документе. topmargin — отступ от верхнего края окна браузера до контента. vlink — цвет посещенных ссылок. Пример 1. Использование тега BODY <html> <body onLoad="alert('Документ загружен')" text=navy> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </body> </html> -------------------------------------------------------------------------------- Описание параметров тега BODY Параметр ALINK Описание Устанавливает цвет активной ссылки. Текущий цвет ссылки меняется на активный, когда на ссылку нажимают курсором мыши или выделяют ее с помощью клавиатуры. Синтаксис <body alink=цвет>...</body> Аргументы Значение цвета можно задавать двумя способами. 1. По его названию Браузеры поддерживают некоторые цвета по их названию. 2. По шестнадцатеричному значению Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю. Значение по умолчанию Совпадает с цветом ссылки. Аналог CSS BODY:active { color: цвет } Пример 2. Изменение цвета активной ссылки <html> <body alink=orange> ... </body> </html> -------------------------------------------------------------------------------- Параметр BACKGROUND Описание Определяет изображение, которое будет использоваться в качестве фонового рисунка. В отличие от обычных изображений, для фона не устанавливаются ширина и высота, и он всегда отображается в натуральную величину с масштабом 100%. Если рисунок по размеру меньше окна браузера, то картинка повторяется по горизонтали вправо и вниз, выстраиваясь, как мозаика. По этой причине на месте стыка фоновых картинок могут возникнуть видимые перепады, заметные для посетителей сайта. При выборе фонового рисунка убедитесь, что обеспечен достаточный контраст между ним и текстом веб-страницы. В качестве фона допускается использовать анимированные изображения в формате GIF, но они отвлекают внимание читателей. Синтаксис <body background=URL>...</body> Аргументы Любой допустимый адрес изображения — можно использовать относительный или абсолютный путь. Значение по умолчанию Нет. Аналог CSS BODY { background: url('путь к файлу') } Пример 3. Установка фонового рисунка на веб-странице <html> <body background=/images/bgred.gif> ... </body> </html> -------------------------------------------------------------------------------- Параметр BGCOLOR Описание Устанавливает цвет фона веб-страницы. Можно использовать этот параметр совместно с background, подобрав цвет фона близкий к фоновому рисунку Синтаксис <body bgcolor=цвет>...</body> Аргументы См. параметр ALINK. Значение по умолчанию Зависит от браузера и его версии, но обычно используется белый цвет фона. Аналог CSS BODY { background: цвет } Пример 4. Установка цвета фона веб-страницы <html> <body bgcolor=#A0BEC4> ... </body> </html> -------------------------------------------------------------------------------- Параметр BGPROPERTIES Описание По умолчанию фоновый рисунок прокручивается совместно с содержанием веб-страницы. Используя параметр bgproperties можно зафиксировать фон на одном месте и, таким образом, заставить прокручиваться только контент. Подобное качество веб-страницы редко применяется для сайтов, поэтому для пользователей может показаться странным и непривычным. Синтаксис <body bgproperties=fixed>...</body> Аргументы Существует только один параметр fixed, который фиксирует фон. Если требуется убрать эту возможность, удалите параметр bgproperties у тега BODY или установите у него пустое значение — "". Значение по умолчанию Нет. Аналог CSS BODY { background-attachment: fixed | scroll } Пример 5. Фиксирование фона <html> <body background=images/bbking.jpg bgproperties=fixed> ... </body> </html> Примечание Не все браузеры поддерживают этот параметр, например, Netscape его игнорирует. Замечено, что при установке фонового рисунка на веб-странице через стили, параметр bgproperies перестает работать. -------------------------------------------------------------------------------- Параметр LEFTMARGIN Описание Определяет отступ от левого и правого края окна браузера до контента веб-страницы. Синтаксис <body leftmargin=число>...</body> Аргументы Целое положительное число, которое устанавливает отступ в пикселях. Значение по умолчанию 10 пикселов для Windows и 8 пикселов для Macintosh. Аналог CSS BODY { margin: число } Пример 6. Изменение отступа слева <html> <body leftmargin=0> ... </body> </html> Примечание Браузер Netscape не понимает параметр leftmargin, для установки отступов в нем используются параметры marginwidth — отступы по горизонтали и marginheight — отступы по вертикали. Для задания отступов от правого, нижнего и верхнего края применяются, соответственно, параметры rightmargin, bottommargin и topmargin. -------------------------------------------------------------------------------- Параметр LINK Описание Устанавливает цвет не посещенных ссылок. Синтаксис <body link=цвет>...</body> Аргументы См. параметр ALINK. Значение по умолчанию #0000FF Аналог CSS BODY:link { color: цвет } Пример 7. Установка цвета ссылок <html> <body link=#003366> ... </body> </html> -------------------------------------------------------------------------------- Параметр SCROLL Описание Параметр scroll управляет присутствием полос прокрутки в окне браузера, когда содержание веб-страницы превышает размер текущего окна. Этот параметр работает только в браузере Internet Explorer. Синтаксис <body scroll=yes | no>...</body> Аргументы yes — отображает полосы прокрутки. no — запрещает показ полос прокрутки в окне. Значение по умолчанию yes Аналог CSS BODY { overflow: hidden } Пример 8. Сокрытие полосы прокрутки <html> <body scroll=no> ... </body> </html> -------------------------------------------------------------------------------- Параметр TEXT Описание Устанавливает цвет текста, используемого на веб-странице по умолчанию. Цвета отдельных элементов можно легко изменять с помощью стилей. Синтаксис <body text=цвет>...</body> Аргументы См. параметр ALINK. Значение по умолчанию #000000 Аналог CSS BODY { color: цвет } Пример 9. Изменение цвета текста <html> <body text=maroon> ... </body> </html> -------------------------------------------------------------------------------- Параметр VLINK Описание Определяет цвет посещенных ссылок, т.е., таких ссылок, на которые пользователь уже «нажимал». Синтаксис <body vlink=цвет>...</body> Аргументы См. параметр ALINK. Значение по умолчанию #551a8b (Navigator 4); #800080 (Internet Explorer Windows); #006010 (Internet Explorer Macintosh). Аналог CSS BODY:visited { color: цвет } Пример 10. Установка цвета посещенных ссылок <html> <body vlink=#660066> ... </body> </html>

Vаниль: Гиперссылки Ссылки на другие документы в HTML создаются либо с помощью элемента A, либо с помощью навигационных карт. Элемент A применяется, если ссылкой планируется сделать часть текста или целое изображение. Навигационные карты имеет смысл применять, если ссылкой будет часть изображения.

Vаниль: Тег A Описание Тег A является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия параметров name или href тег A устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы. Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения параметра href используется адрес документа (URL), на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта. Синтаксис <a href=URL>...</a> <a name=идентификатор>...</a> Закрывающий тег Обязателен. Параметры href — задает адрес документа, на который следует перейти. name — устанавливает имя якоря внутри документа. target — имя окна или фрейма, куда браузер будет загружать документ. Пример <html> <body> <a href=images/xxx.jpg>Посмотрите на мою фотографию!</a><br> <a href=tip.html>Как сделать такое же фото?</a> </body> </html> -------------------------------------------------------------------------------- Описание параметров тега A Параметр HREF Описание Задает адрес документа, на который следует перейти. Поскольку в качестве адреса ссылки может использоваться документ любого типа, то результат перехода по ссылке зависит от конечного файла. Так, архивы (файлы с расширением zip или rar) будут сохраняться на локальный диск. По умолчанию новый документ загружается в текущее окно браузера, однако это свойство можно изменить с помощью параметра target. Синтаксис <a href=URL>...</a> Обязательный параметр Да. Аргументы В качестве значения принимается полный или относительный путь к файлу. Значение по умолчанию Нет. Пример <html> <body> <a href=../wormik/knob.html>Относительная ссылка</a><br> <a href=http://www.htmlbook.ru/wormik/knob.html>Абсолютная ссылка</a><br> </body> </html> -------------------------------------------------------------------------------- Параметр NAME Описание Параметр name используется для определения закладки внутри страницы. Вначале следует задать в соответствующем месте закладку и установить ее имя при помощи параметра name тега А. Имя ссылки на закладку начинается символом #, после чего идет название закладки. Название выбирается любое, соответствующее тематике. Можно также делать ссылку на закладку, находящуюся в другой веб-странице и даже другом сайте. Для этого в адресе ссылки надлежит указать ее адрес и в конце добавить символ решетки # и имя закладки. Между тегами <a name=...> и </a> текст писать не обязательно, так как требуется лишь указать местоположение перехода по ссылке. Синтаксис <a name=закладка>...</a> Аргументы Любой текст с учетом регистра. Значение по умолчанию Нет. Пример <html> <body> <a name=top></a> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. <a href=#top>Наверх</a> </body> </html> -------------------------------------------------------------------------------- Параметр TARGET Описание По умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме. При необходимости, это условие может быть изменено параметром target тега А. Синтаксис <a target=имя окна>...</a> Аргументы В качестве аргумента используется имя окна или фрейма, заданное параметром name. Если установлено несуществующее имя, то будет открыто новое окно. В качестве зарезервированных имен используются следующие. _blank — загружает страницу в новое окно браузера. _self — загружает страницу в текущее окно. _parent — загружает страницу во фрейм-родитель, если фреймов нет, то этот параметр работает как _self. _top — отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то этот параметр работает как _self. Значение по умолчанию _self Пример <html> <body> <a href=new.html target=_blank>Открыть в новом окне</a> </body> </html> A Самый необходимый элемент, без которого Интернет просто немыслим. Используется для создания и использования гипертекстовых ссылок. Атрибуты: HREF – определяет находящийся между начальным и конечным тегами текст или изображение как гипертекстовую ссылку (URL, или линк) на документ (и/или область документа), указанный в значении данного атрибута. Возможные значения: http://... – создает ссылку на www-документ; ftp://... – создает ссылку на ftp-сайт или расположенный на нем файл; mailto:... – запускает почтовую программу-клиент с заполненным полем имени получателя. Если после адреса поставить знак вопроса, то можно указать дополнительные атрибуты, разделенные знаком "&"; news:.. – создает ссылку на конференцию сервера новостей; telnet://... – создает ссылку на telnet-сессию с удаленной машиной; wais://... – создает ссылку на WAIS – сервер; gopher://... – создает ссылку на Gopher – сервер; Если тип соединения и адрес машины не указаны, в качестве отправной точки используется адрес текущего документа. Это позволяет использовать относительные ссылки. Например, линк <A HREF="docs/title.html">Документация</A> будет ссылаться на файл title.html в подкаталоге docs (относительно текущего). NAME – помечает находящуюся между начальным и конечным тегами область документа как возможный объект для ссылки. В качестве значения нужно латиницей написать любое слово-указатель, уникальное для данного документа. Например: <A NAME="part">Раздел1</A>. Теперь вы можете ссылаться на помеченную область простым указанием ее имени после имени документа. Например, линк <A HREF="document.html#part">Раздел1</A> отправит вас в раздел "part" файла document.html, а линк <A HREF="#bottom">В конец документа</A> – в раздел "bottom" текущего документа. (см. Пример 1) TARGET – определяет окно (фрейм), на которое указывает гипертекстовая ссылка. Этот атрибут используется только совместно с атрибутом HREF. В качестве значения необходимо задать либо имя одного из существующих фреймов, либо одно из следующих зарезевированных имен: _self – указывает, что определенный в атрибуте HREF документ должен отображаться в текущем фрейме; _parent – указывает, что документ должен отображаться во фрейме-родителе текущего фрейма. Иначе говоря, _parent ссылается на окно, содержащее FRAMESET, включающий текущий фрейм; _top – указывает, что документ должен отображаться в окне-родителе всей текущей фреймовой структуры; _blank – указывает, что документ должен отображаться в новом окне. Пример 1: <!-- Использование атрибута NAME: --> <A NAME="history">История бодибилдинга</A> ... <A NAME="now">Спорт глазами современника</A> ... Вернуться к разделу<A HREF="#history">истории</A> Пример 2: <!-- Использование атрибута HREF: --> <A HREF="ftp://ftp.cdrom.com" TARGET="_blank">FTP-site</A> <A HREF="http://opengl.rdc.ru">Русский проект по OpenGL</A> ... Пример 3: <!-- Создадим ссылку для письма с указанием кучи атрибутов --> <A HREF="mailto:green@igf.ru?subject=Приглашение &cc=bg@microsoft.com&body=Приезжай на вечеринку."> Отправить приглашение </A>. <!-- или просто письмо : --> <A HREF="mailto:green@igf.ru?subject=Привет">авторам</A>. Примечания: Элемент A не может быть вложенным в себе подобные, то есть недопустимы конструкции вроде <A HREF="link1.html"> Первый линк <A HREF="link2.html">Второй линк</A> Продолжаем первый линк </A> Если в атрибуте TARGET указать имя несуществующего окна или фрейма, создастся новое окно с указанным именем. Как мы видим, результат получится тот же, что и при задании нового окна: <A HREF="..." TARGET="_blank">, с той лишь разницей, что в последнем случае окно не будет иметь имени и на него нельзя будет ссылаться. С помощью элемента BASE вы можете указать значение TARGET для всех гиперссылок в текущем документе.

Vаниль: Текстовые блоки В этом разделе описаны элементы, разбивающие текст документа на блоки тем или иным способом. Типичными примерами текстовых блоков являются параграфы, абзацы и главы. Для отделения одной части текста от другой также используются разделительные горизонтальные линии и символы возврата каретки. Элементы: - H1,H2,...H6 Используются для создания заголовков текста - P Используется для разметки параграфов. - DIV Отделяет блок HTML-документа от остальной его части - ADDRESS Оформляет текст как почтовый адрес - BLOCKQUOTE Оформляет текст как цитату - BR Осуществляет перевод строки - HR Вставляет в текст горизонтальную разделительную линию. - PRE Включает в документ (моноширинным шрифтом) блок предварительно отформатированного текста - LISTING, PLAINTEXT, XMP Включают в документ (моноширинным шрифтом) блок предварительно отформатированного текста (устаревшие элементы)

Vаниль: Теги H1...H6 Описание HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег H1 представляет собой наиболее важный заголовок первого уровня, а тег H6 служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги H1...H6 относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство. Видом заголовком легко можно управлять с помощью стилей. Синтаксис <h1>Заголовок 1 уровня</h1> ... <h6>Заголовок 6 уровня</h6> Закрывающий тег Обязателен. Параметры align — определяет выравнивание заголовка. Пример 1. Использование тега H1 <html> <body> <h1>Lorem ipsum dolor sit amet</h1> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. <h2>Ut wisis enim ad minim veniam</h2> Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </body> </html> Примечание Заголовки очень «любят» поисковые системы, они повышают ценность текста на веб-странице, который располагается внутри тегов H1...H6. По этой причине лучше всегда использовать эти теги, несмотря на то, что с помощью стилей любой текст можно установить большого размера и, тем самым, сделать его заголовком. -------------------------------------------------------------------------------- Описание параметров тегов H1...H6 Параметр ALIGN Описание Выравнивание заголовка текста по краю. Синтаксис <h1 align=left | center | right | justify>...</h1> Аргументы left — выравнивание заголовка по левому краю. center — выравнивание по центру. right — выравнивание по правому краю. justify — выравнивание по ширине (одновременно по правому и левому краю). Этот аргумент работает только для заголовка, длина которого более, чем одна строка. Значение по умолчанию left Аналог CSS text-align Пример 2. Выравнивание заголовка <html> <body> <h1 align=right>Lorem ipsum dolor sit amet</h1> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </body> </html> Атрибуты: ALIGN – определяет способ выравнивания заголовка по горизонтали. Возможные значения: left, right, center. Пример: <H1 ALIGN="center">Самый большой заголовок посередине</H1> <H2>Заголовок поменьше</H2> ... <H6>Малюююсенький такой заголовочек</H6>

Vаниль: Тег P Описание Определяет текстовый параграф. Тег P является блочным элементом, перед ним всегда добавляется пустая строка, параграфы текста идущие друг за другом разделяются между собой вертикальным промежутком. Величиной промежутка можно управлять с помощью стилей. Если закрывающего тега нет, считается, что конец параграфа совпадает с началом следующего блочного элемента. Синтаксис <p>Текст <p>Текст</p> Закрывающий тег Не обязателен. Параметры align — определяет выравнивание текста. Пример 1. Использование тега P <html> <body> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </body> </html> -------------------------------------------------------------------------------- Описание параметров тега P Параметр ALIGN Описание Выравнивание блока текста по краю. Синтаксис <p align=left | center | right | justify>...</p> Аргументы left — выравнивание текста по левому краю. center — выравнивание по центру. right — выравнивание по правому краю. justify — выравнивание по ширине (одновременно по правому и левому краю). Значение по умолчанию left Пример 2. Выравнивание текста <html> <body> <p align=justify>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> </body> </html> Используется для разметки параграфов. Атрибуты: ALIGN – определяет способ горизонтального выравнивания параграфа. Возможные значения: left, center, right. По умолчанию имеет значение left. Пример: <P ALIGN="center">Это центрированный параграф.<BR> Текст располагается в центре окна браузера</P> <P ALIGN="right">А это параграф, выровненный по правому краю.</P>

Vаниль: Тег DIV Описание Элемент DIV является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить параметр class или id с именем селектора. Как и при использовании других блочных элементов, содержимое тега DIV всегда начинается с новой строки. После него, также, добавляется перенос строки. Синтаксис <div>...</div> Закрывающий тег Обязателен. Параметры align — задаёт выравнивание содержимого тега DIV. title — добавляет всплывающую подсказку к содержимому. Пример 1. Использование тега DIV <html> <head> <style> .block1 { width: 200px; background: #ccc; padding: 5px; padding-right: 20px; border: solid 1px black; float: left } .block2 { width: 200px; background: #fc0; padding: 5px; border: solid 1px black; position: relative; top: 40px; left: -30px; } </style> </head> <body> <div class=block1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</div> <div class=block2>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div> </body> </html> -------------------------------------------------------------------------------- Описание параметров тега DIV Параметр ALIGN Описание Выравнивание содержимого контейнера DIV по краю. Синтаксис <div align=left | center | right | justify>...</div> Аргументы left — выравнивание по левому краю; center — выравнивание по центру; right — выравнивание по правому краю; justify — выравнивание по ширине (одновременно по правому и левому краю). Значение по умолчанию left Аналог CSS text-align Пример 2. Выравнивание содержимого элемента <html> <body> <div align=justify>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</div> </body> </html> -------------------------------------------------------------------------------- Параметр TITLE Описание Добавляет поясняющий текст к контейнеру DIV в виде всплывающей подсказки, которая отображается, когда курсор мыши задерживается на содержимом. Синтаксис <div title="текст">...</div> Аргументы Любая текстовая строка. Строка должна заключаться в двойные или одинарные кавычки. Значение по умолчанию Нет. Пример 3. Создание всплывающей подсказки <html> <body> <div title="Каноническая рыба">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</div> </body> </html> Результат примера Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Используется для логического выделения блока HTML-документа. Элемент группировки, как и элемент SPAN. В современном сайтостроении используется как удобный контейнер для объектов страницы, которым легко динамически манипулировать – перемещать, включать/выключать, создавать слои, регулировать отступы и т.п. В браузеронезависимой вёрстке обычно используется для выравнивания блока html-кода в окне браузера. Находящиеся между начальным и конечным тегами текст или HTML-элементы по умолчанию оформляются как отдельный параграф. Атрибуты: ALIGN – определяет выравнивание содержимого элемента DIV. Атрибут может принимать значения: left, right, center. Пример: ...Текст документа... <DIV ALIGN="center"> ...Текст, таблицы, изображения. Выравнивание по центру. </DIV> ...Текст документа... Примечания: У атрибута ALIGN есть еще одно значение – justify, поддерживаемое современными браузерами. Оно позволяет выравнивать текст по ширине (одновременно по левому и правому краям документа). Не понимающие justify браузеры будут выравнивать текст по левому краю.

Vаниль: ADDRESS Находящийся между начальным и конечным тегами текст оформляется как почтовый адрес. Чаще всего оформление выражается в выделении строки адреса курсивом. Пример: Пишите по следующему адресу: <ADDRESS> Москва. ул. Академика Королева, 13 <BR> Мурзилке </ADDRESS> Примечание: Internet Explorer версии 3.0 неверно интерпретирует конечный тег </ADDRESS>, поэтому весь текст, находящийся после адреса, будет отображаться курсивом. Эту ошибку можно легко устранить, поставив после </ADDRESS> любой элемент форматирования текста. Пример: <ADDRESS> Мой адрес не дом и не улица, <BR> Мой адрес – Советский Союз. </ADDRESS> <!-- избавляемся от глюка --> <I></I> Нормальный текст ...

Vаниль: Тег BLOCKQUOTE Описание Тег BLOCKQUOTE предназначен для выделения длинных цитат внутри документа. Текст, обозначенный этим тегом, традиционно отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселов), а также с отбивкой сверху и снизу. Синтаксис <blockquote>Текст</ blockquote> Закрывающий тег Обязателен. Параметры Единственный параметр cite включен в спецификацию HTML, но не поддерживается в настоящее время браузерами. Так что можно считать, что параметров у этого тега нет. Пример. Использование тега BLOCKQUOTE <html> <body> <hr> <blockquote>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</blockquote> <hr> </body> </html> Результат примера -------------------------------------------------------------------------------- Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. -------------------------------------------------------------------------------- Оформляет находящийся между начальным и конечным тегами текст как цитату. Используется для длинных цитат (в отличие от элемента CITE). Цитируемый текст отображается отдельным абзацем с увеличенным отступом. Пример: Редакция журнала "Домосед" выражает благодарность Бухаресту Магарычу Шницелю за замечательное стихотворение: <BLOCKQUOTE> Синели красные ромашки,<BR> Желтели в небе облака,<BR> Синицы в теплый край летели,<BR> К истоку двигалась река.<BR> ... </BLOCKQUOTE>

Vаниль: Тег BR Описание Тег BR устанавливает перевод строки в месте, где этот тег встречается. В отличие от тега параграфа P, использование тега BR не добавляет пустой отступ перед строкой. Если текст, в котором используется перевод строки, обтекает плавающий элемент, с помощью параметра clear тега BR можно заставить, чтобы следующая строка начиналась ниже элемента. Синтаксис Текст<br> текст Закрывающий тег Не требуется. Параметры clear — cообщает браузеру, как обрабатывать следующую строку, если текст обтекает плавающий элемент. Пример 1. Использование тега BR <html> <body> <b>Р.Л. Стивенсон</b><br> Лето в стране настало,<br> Вереск опять цветет.<br> Но некому готовить<br> Вересковый мед. </body> </html> Результат примера <b>Р.Л. Стивенсон</b><br> Лето в стране настало,<br> Вереск опять цветет.<br> Но некому готовить<br> Вересковый мед. -------------------------------------------------------------------------------- Описание параметров тега BR Параметр CLEAR Описание Параметр clear сообщает браузеру, как обрабатывать следующую строку, если текст обтекает плавающий элемент. Плавающим элементом называется изображение, у которого установлен параметр align или слой, к которому применяется свойство CSS float. Результат использования параметра clear зависит от края, по которому выравнивается элемент и значения аргумента clear. Так, если изображение выравнивается по левому краю, а значение параметра clear тега BR установлено как all или left, то текст после тега BR будет отображаться ниже рисунка. Любые другие значения параметра clear заставят текст располагаться справа от изображения и обтекать его. Синтаксис <BR clear=all | left | right | none> Аргументы all — отменяет обтекание элемента одновременно с правого и левого края. left — отменяет обтекание с левой стороны элемента, расположенного после тега BR. right — отменяет обтекание с правой стороны элемента. none — отменяет действие данного свойства. Значение по умолчанию Нет. Пример 2. Отмена обтекания текста <html> <body> <div style="float: left; background: #fd0; border: solid 1px black; padding: 10px; width: 40%"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </div> <br clear=left> Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. </div> </body> </html> Примечание Использование параметра clear в спецификации HTML 4 осуждается и взамен рекомендуется применять элемент CSS clear — BR { clear: both | left | none | right }. Данный элемент осуществляет перевод строки, то есть практически аналогичен нажатию Enter в текстовом редакторе. После того, как в браузерах появилась возможность обтекания изображения текстом (cм. атрибут ALIGN элемента IMG), понадобился дополнительный атрибут CLEAR. Элемент не имеет конечного тега. Атрибуты: CLEAR – указывает на необходимость завершения обтекания изображения текстом. Может принимать следующие значения : all – завершить обтекание изображения текстом. left – завершить обтекание текстом изображения, выровненного по левому краю. right – завершить обтекание текстом изображения, выровненного по правому краю. Пример: Первое предложение<BR>Второе предложение на следующей строке Примечание: Возьмите себе за правило всегда ставить <br> после тега <img ...>. В противном случае все картинки будут иметь неприятный отступ. Атрибут CLEAR почему-то используется очень редко. А зря.

Vаниль: Тег HR Описание Рисует горизонтальную линию, которая по своему виду зависит от используемых параметров, а также браузера. Тег HR относится к блочным элементам, линия всегда начинается с новой строки, а после нее все элементы отображаются на следующей строке. Синтаксис <hr> Вставляет в текст горизонтальную разделительную линию. Атрибуты: WIDTH – определяет длину линии в пикселах или процентах от ширины окна браузера. SIZE – определяет толщину линии в пикселах. ALIGN – определяет выравнивание горизонтальной линии. Атрибут может принимать следующие значения: left – выравнивание по левому краю документа. right – выравнивание по правому краю документа. center – выравнивание по центру документа (используется по умолчанию). NOSHADE – определяет способ закраски линии как сплошной. Атрибут является флагом и не требует указания значения. Без данного атрибута линия отображается объемной. COLOR – определяет цвет линии. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов. Атрибут работает только в Internet Explorer. Пример: Текст, разделенный <HR NOSHADE WIDTH="50%"> сплошной горизонтальной линией. Закрывающий тег Не требуется. Параметры align — определяет выравнивание линии. color — цвет линии. noshade — рисует линию без трехмерных эффектов. size — толщина линии. width — ширина линии. Пример 1. Использование тега HR <html> <body> <hr> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <hr> </body> </html> -------------------------------------------------------------------------------- Описание параметров тега HR Параметр ALIGN Описание Выравнивание линии по краю родительского элемента. В качестве родителя обычно выступает окно браузера. Синтаксис <hr align=center | left | right> Аргументы center — выравнивание по центру. left — выравнивание линии по левому краю. right — выравнивание по пр авому краю. Значение по умолчанию center Аналог CSS text-align Пример 2. Выравнивание линии <html> <body> <hr align=right width=300> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </body> </html> -------------------------------------------------------------------------------- Параметр COLOR Описание Задает цвет линии в браузере Internet Explorer. Одновременно, использование этого параметра запрещает трехмерные эффекты, словно был добавлен параметр noshade. В остальных браузерах параметр color игнорируется. Синтаксис <hr color=цвет> Аргументы Для задания цвета линии применяется два способа: первый использует обозначения цветов в шестнадцатеричном коде, а второй — по названию некоторых цветов. Преимущественно используется способ, основанный на шестнадцатеричной системе исчисления, как наиболее универсальный. Значение по умолчанию Нет. Пример 3. Изменение цвета линии <html> <body> <hr color=red width=300> </body> </html> -------------------------------------------------------------------------------- Параметр NOSHADE Описание Использование параметра noshade отменяет трехмерные эффекты, которые используются при рисовании линии по умолчанию. Синтаксис <hr noshade> Аргументы Нет. Значение по умолчанию По умолчанию этот параметр не используется. Пример 4. Отмена трехмерной линии <html> <body> <hr noshade width=300> </body> </html> -------------------------------------------------------------------------------- Параметр SIZE Описание Устанавливает толщину линии в пикселах. Синтаксис <hr size=число> Аргументы Любое целое положительное число. Нулевое или отрицательное значение устанавливает толщину линии в один пиксел. Значение по умолчанию 2 Пример 5. Толщина линии <html> <body> <hr noshade size=10> <hr noshade size=8> <hr noshade size=6> <hr noshade size=4> <hr noshade size=2> <hr noshade size=1> </body> </html> -------------------------------------------------------------------------------- Параметр WIDTH Описание Устанавливает ширину линии в процентах или пикселах. При использовании процентов за 100% берется ширина родительского элемента. Как правило, в качестве родителя выступает окно браузера. Синтаксис <hr width=число> Аргументы Любое допустимое значение в пикселах или процентах. Значение по умолчанию 100% Аналог CSS width Пример 6. Ширина линии <html> <body> <hr noshade size=4 width=75%> <hr noshade size=2 width=60%> <hr noshade size=1 width=50%> </body> </html>

Vаниль: Тег PRE Описание Элемент PRE определяет блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами. По умолчанию, любое количество пробелов идущих в коде подряд, на веб-странице показывается как один. Тег PRE позволяет обойти эту особенность и отображать текст как требуется разработчику. В отличие от тега PLAINTEXT, использование которого осуждается в HTML 4, внутри контейнера PRE допустимо применять любые теги. Следующие теги не должны размещаться внутри контейнера PRE: APPLET, BASEFONT, BIG, FONT, IMG, OBJECT, SMALL, SUB и SUP. Синтаксис <pre>Текст</pre> Закрывающий тег Обязателен. Пример. Использование тега PRE <html> <body> <pre> - -- ------ -¦--- ----- ------ ¦----- ¦¦----¦ ¦¦--¦¦ ---¦ ¦¦----- ---- ----¦ ¦¦-----¦ ¦¦¦¦ ¦----¦-¦ ¦¦ ----- -- -----¦ - ¦¦- ----¦ -- ¦-----¦¦- ¦¦---¦¦-- -- ------¦-- ¦¦--¦¦ --¦-- ¦--¦------ ¦¦ -¦¦ ¦-- --- - ---- ¦¦ -¦¦ --¦-¦--¦ - ---¦ ¦---¦¦- ¦-----¦ ¦----- ¦---¦¦ ¦---- ¦----¦ ¦----¦ --- ¦------ ------ -------- </pre> </body> </html> Результат примера - -- ------ -¦--- ----- ------ ¦----- ¦¦----¦ ¦¦--¦¦ ---¦ ¦¦----- ---- ----¦ ¦¦-----¦ ¦¦¦¦ ¦----¦-¦ ¦¦ ----- -- -----¦ - ¦¦- ----¦ -- ¦-----¦¦- ¦¦---¦¦-- -- ------¦-- ¦¦--¦¦ --¦-- ¦--¦------ ¦¦ -¦¦ ¦-- --- - ---- ¦¦ -¦¦ --¦-¦--¦ - ---¦ ¦---¦¦- ¦-----¦ ¦----- ¦---¦¦ ¦---- ¦----¦ ¦----¦ --- ¦------ ------ -------- Используется для включения в документ уже отформатированного текста. Браузеры воспроизводят содержимое этого элемента с помощью моноширинного шрифта, сохраняя пробелы и символы конца строки. Пример: <PRE> Ать! Два! Три! </PRE> Примечание: Желательно избегать использования символа горизонтальной табуляции внутри PRE, т.к. он может быть неадекватно интерпретирован некоторыми браузерами. Вместо символа табуляции рекомендуется использовать число пробелов, кратное четырем.

Vаниль: LISTING, PLAINTEXT, XMP Данные элементы предназначены для воспроизведения предварительно отформатированного текста. Они использовались до появления элемента PRE и на данный момент являются устаревшими. Эти элементы не вошли в спецификацию HTML 4.0, однако браузеры еще могут распозновать их в целях обратной совместимости версий.

Vаниль: Раздел "текстовые блоки закончен" Приступаем к разделу"форматирование текствов"

Vаниль: Форматирование текста В этом разделе описаны элементы для оформления и смыслового выделения текста – подчеркивания, изменения шрифта, выделения курсивом, цитирования и т.д. Элементы форматирования текста: - BASEFONT Определяет основной шрифт, которым должен отображаться текст документа - FONT Позволяет изменять цвет, размер и тип шрифта текста - I Выделяет текст курсивом - EM Используется для смыслового выделения текста (курсивом) - B Выделяет текст жирным шрифтом - STRONG Усиленное выделение текста (жирным) - U Выделяет текст подчеркнутым - S, STRIKE Выделяет текст перечеркнутым - BIG Отображает текст увеличенным шрифтом (относительно текущего) - SMALL Отображает текст уменьшенным шрифтом (относительно текущего) - SUP Отображает текст со сдвигом вверх (верхний индекс) - SUB Отображает текст со сдвигом вниз (нижний индекс) - CODE, SAMP Оформляют текст как формулу или программный код - TT Отображает текст моноширинным шрифтом - KBD Выделяет текст, который предлагается набрать на клавиатуре - VAR Используется для обозначения в тексте переменных - CITE Оформляет текст как цитату или ссылку на источник

Severvirgin: У МЕНЯ ГЛУПЫЙ ВОПРОС,,,,, А ДЕДОВСКИЙ СПОСОБ - СДЕЛАТЬ В ВОРДЕ, ПОТОМ СОХР. как ВЕБСТРАНИЦА И ЗАКАЧАТЬ НА САЙТ ПРОВАЙДЕРА?

Severvirgin: КРЫША УЛЕТАЕТ..... ПОЗДРАВЛЯЮ С ОТКРЫТИЕМ НОВЫЙ ТЕМЫ ЕСЛИ МОЙ ГУМАНИТАРНЫЙ МОЗГ ОСИЛИТ ПЕРВУЮ СТРАНИЦУ, Я ПОЙДУ МЕМОРИАЛЬНЫЙ СКВЕРИК РАЗОБЬЮ НЕДАЛЕКО ОТ ДОМА.... А ЕСЛИ ДО КОНЦА ДОЧИТАЮ, ТО ВПОРУ БУДЕТ КОЛУМБАРИЙ



полная версия страницы