ВВЕДЕНИЕ В ЯЗЫК HTML Историческая справка Официальным днем рождения сети Internet считается 2 января 1969 года, когда Управление перспективных исследований Министерства обороны США Ar. PA (Advanced research Project Agency) начало работу над проектом связи оборонных компьютеров. В 1989 году выпускник Оксфордского университета, бакалавр в области физики - сотрудник Европейского центра ядерных исследований (CEr. N) Тим Бернес-Ли разработал и приступил к созданию информационной службы world wide web. Он написал приложение клиент/сервер (браузер).
В основу всей системы легло понятие гипертекста - т. е. множества отдельных текстов, имеющих ссылки друг на друга. Для работы с текстами был создан протокол HTTP - Hyper Text Transfer Protocol где были обозначены основные элементы языка разметки html. В 1994 году был образован Консорциум w 3 C, для разработки стандартов языка html, необходимых для дальнейшего развития world wide web.
В 1996 году Консорциум w 3 C объявил о сотрудничестве с лидерами рынка для установления стандартов совместимости программного обеспечения. Была предложена версия html 3. 2, которая стала компромиссным решением - попыткой примирить Microsoft и Netscape и объединить их оригинальные решения в одно целое. Однако многие компании придумывали новые расширения к языку html и внедряли их поддержку в свои браузеры, поэтому Консорциум w 3 C предпринял очередную попытку установить стандарты, предложив версию html 4. 0.
Язык html развился из стандартного обобщенного языка описания документов SGML и является его производной, созданной для разметки текстовых документов. Разработчиками создаются интерактивные модули, интегрируемые в html, языки программирования и средства поддержания баз данных, которые также могут быть внедрены в исходный код html, язык расширяется для предоставления средств управления внешним видом и возможностями текста и графики.
Язык html уже изначально создавался как платформо-независимый язык. В настоящее время некоторые пользователи активно пользуются голосовыми браузерами для незрячих или браузерами, использующими азбуку Бройля. Зачастую содержимое выводится не на монитор компьютера, а в телевизор, когда применяются приставки с выходом в сеть или на телетайп, или на монохромные дисплеи различных организаторов-пейджеров и пр.
ПУТИ ДАЛЬНЕЙШЕГО РАЗВИТИЯ В 1999 году в мире объем продаж персональных настольных компьютеров упал примерно на 40%, зато увеличились продажи всевозможных носимых и карманных портативных устройств и компания Microsoft начала уделять большое внимание этому сектору рынка.
В 1997 году Консорциум w 3 C опубликовал спецификацию языка html 4. 0, в которой указано какие из элементов устарели и не рекомендуются к дальнейшему применению и новые элементы и атрибуты, которые предлагается использовать в дальнейшем: Устаревшие элементы: Новые элементы и атрибуты: ØAPPLET ØBASEFONT ØCENTER ØDIR ØFONT ØISINDEX ØMENU ØS ØSTr. IKE ØU ü ABBR ü BUTTON ü ACRONYM ü BDO ü COLGRROUP üDEL ü Fie. LDSET ü FRAME ü RAMESET ü lab. EL ü IFRAME ü INS ü LEGEND ü NOFRAMES ü NOSCRIPT ü OBJECT ü SPAN ü THEAD ü OPTGROUP ü PARAM üTBODY ü TFOOT üQ
Консорциум w 3 C обозначил тенденцию развития языка html в сторону логического форматирования содержимого: üдана возможность идентификации практически любого элемента или группы элементов по имени; üописаны основные атрибуты для событий; üоднозначно указанно на платформо-независимость языка html. Таким образом, было указано, html не является языком визуальной верстки текстов, а является языком логической разметки.
Нежелательными являются почти все атрибуты, определяющие представление документа html (цвета, выравнивание, шрифты, графика и т. д. ). Взамен рекомендуется использовать таблицы стилей и классы. Атрибуты id и class позволяют авторам назначать элементам информацию об имени и классе для таблиц стилей, ссылок, скриптов, объявления объектов, общей обработки документа и т. д. html 4. 0 поддерживает более обширный набор дескрипторов устройств, так что авторы могут писать таблицы стилей в зависимости от устройств.
Многие элементы теперь имеют атрибуты для событий, которые могут объединяться со скриптами и при наступлении события выполняется скрипт (например, при загрузке документа, при щелчке мыши и т. д. ). Это легло в основу повышения интерактивности документов, дало возможность пользователям динамически изменять вид и содержание документов. Появилась возможность говорить о надстройке к языку html, позволяющей создавать и визуализировать интерактивные web-страницы без помощи подключаемых модулей, не увеличивая трафик − Dynamic html. Применение новых решений направленно на снижение количества обращений к серверу т. е. на снижение трафика.
ОСНОВНЫЕ ПОНЯТИЯ HTML Набор символов Формально, набор символов, используемых в htmlдокументе должен включать ISO Latin 1, известную также как ISO 8859 -1 кодировку, так как она принадлежит к набору стандартов ISO 8859 и быть совместимым с ISO 10646 и Unicode. В практической работе Вы должны использовать только ISO Latin 1 набор символов. Можно использовать ASCII наборы символов, которые являются подмножеством ISO Latin 1, особенно, если у Вас нет необходимости в написании символов с диакритическим знаком или символов, не входящих в английский алфавит (a-z).
Некоторые предупреждения: Набор символов windows наиболее согласован с ISO Latin 1, однако есть некоторые кодовые позиции, которые зарезервированы в качестве управляющих символов в ISO Latin 1 и, тем не менее используются для изображения видимых символов в наборе символов windows. Например, два различных тире "en тире" и "em тире", которые не надо смешивать с дефисом (-) или подчеркиванием (_), принадлежащими к ISO Latin 1 и к ASCII. Использование таких символов в windows-системах отображается как положено, в других же системах они, скорее всего, будут выглядеть, как помарки или не отображаться совсем.
ТЭГИ HTML Тег html состоит из следующих друг за другом в определенном порядке элементов: § левой угловой скобки «<» ; § необязательного слэша «/» , который означает, что тег является конечным тегом, закрывающим некоторую структуру. Таким образом, в этом контексте Вы можете читать символ «/» , как конец действия тэга; § имени тега, например TITLE или PRE; § тег может быть без атрибутов или сопровождаться одним или несколькими атрибутами, например: ALIGN = CENTER; § правой угловой скобки «>» .
ЭЛЕМЕНТЫ HTML Большинство, но не все теги html записываются так, что за открывающим тегом следует соответствующий закрывающий тег, а между ними содержится текст или другие теги, например: Foreword В таких случаях два тега и часть документа, отделенная ими, образуют блок, называемый html элементом или контейнером. Некоторые теги, например
, являются элементами html сами по себе, и для них соответствующий конечный тег неверен.
АТРИБУТЫ Большинство тегов допускает один или несколько атрибутов, однако атрибутов может и не быть. Спецификация атрибута состоит из расположенных в следующем порядке: Øимени атрибута, например w. IDTH Øзнак равенства (=) Øзначения атрибута, которое символов, например, "80". задается строкой
Некоторые правила для атрибутов o Значение атрибута всегда заключается в кавычки, либо в одинарные '80', либо двойные "80". o Строка в кавычках не должна содержать такие же кавычки внутри себя. Например, если дата заключена в двойные кавычки, используйте одинарные кавычки для последующего заключения в кавычки, и наоборот. o Предпочтительно использование двойных кавычек.
Можно также опустить кавычки для значений атрибутов, которые состоят только из следующих символов: • символов английского алфавита (A - Z, a - z); • цифр (0 - 9); • промежутков времени; • дефисов (-).
ЧУВСТВИТЕЛЬНОСТЬ К РЕГИСТРУ Имена тегов, атрибута и большинство значений атрибутов html является case нечувствительным языком. Например, вы можете написать TITLE, или Title, или t. It. LE. Однако существуют и case чувствительные конструкции языка, а именно: • escape последовательности (называемые символьными объектами), которые начинаются знаком & (амперсанд) (например, < ) • Ur. L, так как он может содержать наименования файлов, которые являются case чувствительными во многих операционных системах (например, в Unix).
РАЗДЕЛЕНИЕ НА СТРОКИ И ИСПОЛЬЗОВАНИЕ ПРОБЕЛОВ И СИМВОЛОВ ТАБУЛЯЦИИ Когда документ выводится на экран, пробелы и пустые линии не сохраняются, за исключением текста, заключенного в теги PRE (предварительно отформатированный текст). То есть любая последовательность пробелов, символов табуляции и пустых линий эквивалентна единственному пробелу в файле html.
КЛАССИФИКАЦИЯ ЭЛЕМЕНТОВ Элементы html можно классифицировать на три основные категории: ü заголовочные элементы, т. е. элементы, используемые в элементе HEAD ("шапка", заголовок) и содержащие информацию о документе в целом: TITLE SCRIPT ISINDEX LINK META BASE STYLE
ü блоковые элементы, включающие элементы, которые специфицируют структуру документа, например, разделение на части и параграфы (абзацы): H 1, H 2, H 3, H 4, H 5, H 6, ADDRESS. DIV, CENTER, и элементы P, UL, OL, DL, PRE, BLOCKQUOTE, FORM, TABLE HR, ISINDEX,
ü текстовые элементы. Текстовыми элементами могут быть: • простой текст, возможно содержащий escape последовательности (например, & ) • выражения разметки: EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE • разметка шрифта: TT, I, B, U, STRIKE, BIG, SMALL, SUB, SUP • специальные элементы: A, img, APPLET, BASEFONT, BR, SCRIPT, MAP • элементы формы: INPUT, SELECT, TEXTAREA
Замечание: часто блоковые элементы могут содержать как текстовые, так и другие блоковые элементы, например, блоки могут быть вложенными. Текстовые элементы также могут быть вложенными. Но текстовые элементы не могут включать блоковые элементы.
ЦВЕТА В элементах FONT и BODY некоторые конструкции html могут быть использованы, чтобы специфицировать цвета: например, цвет фона, цвет умолчанию или цвет текста связи. Для спецификации цвета, как атрибута, существуют два варианта: текста по значения
ØСимвольная нотация RED. Определено шестнадцать таких имен, которые можно записывать в любом регистре с кавычками или без. ØЦифровое обозначение в шестнадцатиричной записи, например, "#FF 0000", которая контролирует, каким образом цвет формируется из основных цветов - красного, зеленого и голубого - в так называемое SRGB цветовое пространство, при этом обозначение должно быть взято в кавычки.
![]( "СТРУКТУРА HTML−ДОКУМЕНТА <!DOCTYPE html PUBLIC")
" src="https://present5.com/presentation/876339ac4a8fb833c8b14b62ef85f9e3/image-26.jpg" alt="СТРУКТУРА HTML−ДОКУМЕНТА " />
СТРУКТУРА HTML−ДОКУМЕНТА
{Заголовок документа} {Тело документа}
ОБЪЯВЛЕНИЕ Элемент должен первым указываться в документе html (теоретически). Он сообщает серверу WEB способ обработки документа и то, какие дескрипторы могут находиться на странице, хотя чаще всего он игнорируется браузерами. Поэтому его применение строго не обязательно.
![]( "СИНТАКСИС: <!DOCTYPE HTML")
Здесь текст определяет версию html, а URL позволяет браузерам" src="https://present5.com/presentation/876339ac4a8fb833c8b14b62ef85f9e3/image-28.jpg" alt="СИНТАКСИС: Здесь текст определяет версию html, а URL позволяет браузерам" />
СИНТАКСИС: Здесь текст определяет версию html, а URL позволяет браузерам пользователей загрузить DTD, например:
НЕКОТОРЫЕ ВЕРСИИ HTML Строгое DTD. Документы, использующие такое объявление типа документа, включают в себя все элементы и атрибуты, не являющиеся нежелательными и не использующие кадры.
Документы, использующие такое объявление типа документа, включает все, что включено в строгое DTD, а также нежелательные элементы и атрибуты, относящиеся к визуальному оформлению.
Документы, использующие такое объявление типа документа, включает все, что включено в предыдущее DTD, а также кадры.
ТЭГ Тэг определяет границы документа html, ему соответствует конечный тэг . Между этими двумя тэгами располагается собственно весь документ. Как и тэги и - не являются строго обязательными. Однако, их использование желательно, т. к. некоторые браузеры некорректно визуализируют такой код.
Каждый html документ должен содержать основную информацию о его происхождении. Например, в собрании книгоподобных документов, разделенных на малые файлы, каждый файл должен содержать, по крайней мере, связь к "первой странице" "книги" (home page). О происхождении документа должна быть представлена, по крайней мере, следующая информация:
• Автор документа, имеющий уникальное имя. При этом должна быть задана связь с домашней странницей автора. Если у документа несколько авторов, определите их всех, а также роль каждого из них; например, ведущего автора, редактора, действующего спонсора, а также лиц, формально отвечающих за документ. • Дата создания документа или его последней модификации, или и та и другая. Представляемая дата должна быть понятна во всем мире; в частности, название месяца лучше писать словом, а не цифрой.
• Контекст документа и его статус, например: часть официальной документации компании об одном из ее продуктов, или часть личной информации о хобби автора, или что-то другое. • Адрес (URL) документа. Такая информация зачастую чрезмерна, однако она может быть очень полезной, когда кому-то нужна копия именно того документа, который он нашел. Лучше не полагаться на браузер (и пользователя), добавляющих такую информацию, когда сделана копия документа.
ЭЛЕМЕНТ
Элемент предназначается для выделения той части документа, которая будет визуализирована для пользователя. Он имеет как начальный, так и конечный теги. Начальный тег может иметь несколько атрибутов. Вложенные атрибуты элемента BACKGROUND Атрибут задает графическое изображение, которое как черепица заполнит фон документа. Файл с изображением должен быть сохранен в формате gif, JPG или JPEG. Синтаксис:
BGCOLOR Этот атрибут задает цвет фона документа при помощи шестнадцатеричных значений интенсивности цветов RGB, или при помощи строчного литерала, соответствующего названию цвета. Синтаксис:
или
LINK Этот атрибут задает цвет гиперссылки, в большинстве браузеров он задан по умолчанию темно-синим. Синтаксис:
ALINK Этот атрибут задает цвет активной гиперссылки, он меняет цвет гиперссылки в момент щелчка по ней мышью, не желательно задавать ему цвет фона. Синтаксис: VLINK Этот атрибут задает цвет посещенной гиперссылки, не желательно задавать ему цвет фона и цвет атрибута LINK. Синтаксис:
BGPROPERTIES Этот атрибут задает свойства фонового изображения. В данный момент браузерами поддерживается единственное его значение fixed, запрещающее скроллинг изображения. Синтаксис:
TOPMARGIN Этот атрибут задает верхнюю границу страницы в пикселях. Синтаксис:
BOTTOMMARGIN Этот атрибут задает нижнюю границу страницы в пикселях. Синтаксис:
LEFTMARGIN Этот атрибут задает границу страницы в пикселях слева. Синтаксис: RIGHTMARGIN Этот атрибут задает границу страницы в пикселях справа. Синтаксис:
ЗАГОЛОВОЧНЫЕ ТЭГИ Элемент
определяет заголовок документа. BASE - базовый, основной URL Цель Задание базового URL для относительных URL в документе (например, в атрибутах HREF элемента A). Этот элемент часто используется для отображения документов. Например:
![]( "Элемент BASE непосредственно не отображается в документе. Основной синтаксис <BASE HREF=")
Допустимый контекст Элемент" src="https://present5.com/presentation/876339ac4a8fb833c8b14b62ef85f9e3/image-42.jpg" alt="Элемент BASE непосредственно не отображается в документе. Основной синтаксис Допустимый контекст Элемент" />
Элемент BASE непосредственно не отображается в документе. Основной синтаксис Допустимый контекст Элемент заголовка (HEAD), в котором может быть только один элемент BASE. Примечания Так как в документе допускается только один элемент BASE, Вы не можете иметь различные базовые URL в различных частях файла html.
При отсутствии элемента BASE в документе URL самого документа становится базовым в пределах документа. (Это не является необходимым, так как базовый URL может быть перекрыт HTTP заголовком соответствующего документа. )
META - МЕТАИНФОРМАЦИЯ Цели Для задания метаинформации (информации о документе), т. е. пар имя/значение, описывающих свойства документа, например, авторство, истечение даты, список ключевых слов и т. д. Типичное отображение Элементы META не влияют на отображение самого документа. Они могут давать некоторый эффект при представлении информации о документе, например, в верхнем окне браузера или в ответе на запрос от поискового средства.
Синтаксис Или имя элемента = содержимое
Возможные атрибуты NAME имя - имя отдельного элемента метаинформации альтернатива атрибуту HTTP-EQUIV имя - имя отдельного элемента метаинформации альтернатива атрибуту NAME CONTENT строка - содержимое метаинформации обязательный атрибут элемента META
Допустимый контекст Элемент заголовка, в котором может появиться любое количество элементов META. Примеры CONTENT="structural Тег META влияет на индексирование документа, когда он включается в базу данных поискового сервера.
TITLE - "ВНЕШНИЙ" ЗАГОЛОВОК (ТИТУЛ) Цель Для задания обязательного "внешнего" заголовка документа. Типичное отображение Титул не отображается непосредственно, как часть самого документа, но может прилагаться к документу в нескольких контекстах.
Титул может выводиться программы просмотра; в списке результатов поисковым сервером; в поиска, окне заголовка возвращаемых в горячем списке, определяемом пользователем; списке истории и т. д. Основной синтаксис
последовательность символов Допустимый контекст Заголовочный элемент, в котором есть хотя бы один элемент TITLE.
Содержимое Последовательность символов. В TITLE можно использовать escape последовательности, например, < (для <) и (для неразрывного пробела), но никакие теги html не разрешены, поэтому Вы не можете задавать в заголовке размеры шрифтов или выделения. Примеры
A study of population dynamics Примечания Написать хорошее заглавие - очень важно, так как списки результатов поиска, возвращаемые поисковым сервером, могут использовать его.
КОММЕНТАРИИ Файл html может содержать комментарии, дающие пояснения для человека, читающего html код. Комментарии не влияют каким-либо образом на представление документа, т. е. они игнорируются браузером. Вы можете начать комментарии с четырехсимвольной последовательности (два дефиса, знак "больше чем"). Например: .
ЭТАПЫ СОЗДАНИЯ HTML-ДОКУМЕНТА Набор содержимого в любом из текстовых редакторов (например Notepad) и сохранение обычного текстового файла. Логическое и физическое форматирование текста (разбивка на абзацы, блоки, заголовки и пр. , внешнее их оформление) при помощи тэгов и сохранение текстового файла с расширением. htm или. html (делается это все в том же Notepad).
Организация переходов по гиперссылкам документа при помощи элемента <А> - основного связующего элемента языка html. Внедрение в документ необходимых объектов: рисунков, таблиц, видео клипов, аудио файлов, апплетов Java, скриптов и т. д. при помощи тэгов языка html.
Для задания имени используется атрибут name, который задает привязку ссылки в тексте, на которую и будет производиться ссылка. Синтаксис: необязательный текст Для организации ссылки используется атрибут href, который задает адрес ссылки. Он может указывать или на имя ссылки в тексте, или на Ur. L и имя файла. Синтаксис: текст, для щелчка или же в тексте: текст для щелчка
Для визуализации подсказки ссылки используется атрибут title, который задает название ссылки Синтаксис: Ссылка
ОФОРМЛЕНИЕ ТЕКСТА Элемент используется с целью выделения особым шрифтом слова или текста. Синтаксис: Текст Элемент используется с целью дополнительного выделения фрагментов программного кода. По умолчанию он отображается телетайпным шрифтом. Данный элемент предпочтительнее, чем элемент (телетайпный шрифт).
Поскольку расположение пробелов существенно для чтения программного кода, элемент целесообразно употреблять в сочетании с элементом . Синтаксис: листинг кода Элемент используется с целью обозначения терминов и определений по типу словарей или глоссариев. Синтаксис: Текст Элемент используется с целью обозначения источника информации, из которого взята цитата. Синтаксис: Текст
Элемент используется с целью выделения особым шрифтом слова или текста. Синтаксис: Текст Элемент используется с целью выделения курсивным шрифтом слова или текста. Синтаксис: Текст Элемент используется с целью полужирным шрифтом слова или текста. Синтаксис: Текст выделения
Элемент используется с подчеркиванием слова или текста. целью выделения Синтаксис: Текст Элемент используется с целью выделения надстрочных слова или текста. Синтаксис: Текст Элемент используется с целью выделения подстрочных слова или текста. Синтаксис: Текст
Элемент используется с целью выделения крупным шрифтом слова или текста относительно основного текста. Синтаксис: Текст Элемент используется с целью выделения мелким шрифтом слова или текста относительно основного текста. Синтаксис: Текст Элемент используется с целью изменения выделения шрифтом слова или текста. С ним применяются два атрибута size и color.
Некоторые браузеры поддерживают атрибут face, позволяющий задать любой из перечня шрифтов, если браузер не находит заданный шрифт - то используется шрифт, заданный по умолчанию. Синтаксис: Текст или Текст Элемент используется как альтернатива атрибуту size элемента , он позволяет задать базовый размер шрифта во всем документе и не имеет конечного тега. По умолчанию значение его задается равным 3, значение size может выражаться так же и относительным размером, например, размер -1 означает размер на один меньший, чем по умолчанию. Синтаксис:
Шесть уровней заголовков Соответствующие каждому уровню гарнитура и размер шрифта зависят от браузера, стилю назначается самый большой и самый жирный шрифт, а стилю назначается самый маленький и самый невзрачный шрифт. Элемент может иметь атрибут align, который указывает отступ left, center или right. Синтаксис: Текст заголовка Разделительные линии
Элемент
используется для проведения горизонтальной черты в документе, он может иметь атрибуты : color, задающий цвет линии, size высота в пикселах width ширина в пикселях или процентах от ширины экрана, align режим выравнивания, и не имеет конечного тега. Синтаксис:
Элемент
Этот элемент задает один из способов разбиения текста на абзацы. Он может иметь вложенный атрибут align, который указывает отступ left, center или right. Каждый следующий абзац игнорирует, заданное для предыдущего абзаца значение align. Синтаксис:
Текст абзаца
Элемент
Этот элемент задает разрыв текста с переходом на новую строку. Он может иметь вложенный атрибут clear, который может принимать значения left, all или right тем самым указывать обтекание текста вокруг плавающих изображений вставленных в текст нестандартным способом.
Каждый следующий абзац игнорирует, заданное для предыдущего абзаца значение clear. Синтаксис:
Текст Может быть отменен тэгами и Элемент
Весь текст, заключенный в тэги и
будет визуализирован браузером точно так, как он визуализирован в исходном коде документа, кроме того текст выводится моноширинным шрифтом, что значительно упрощает задачу форматирования текста в колонки. Элемент поддерживается не всеми браузерами, он может иметь атрибут width, который задает ширину отводимого пространства под текст в символах.
Элемент сменил собой устаревшие элементы
<![CDATA[, <LISTING> и <PLAINTEXT> Синтаксис: <PRE width=число символов >. . . текст. . . </PRE> Элемент <DIV> позволяет выделить в структуре документа несколько разделов. Если закрывающий тэг </P> опущен, то <DIV> эффективно заменяет его и начинает новый абзац. Он является блочным элементом, функционирующим во многом подобно элементу <P>. </p>
</div>
<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Он может иметь атрибут align, который указывает отступ left, center или right. Каждый следующий" src="https://present5.com/presentation/876339ac4a8fb833c8b14b62ef85f9e3/image-67.jpg" alt="Он может иметь атрибут align, который указывает отступ left, center или right. Каждый следующий" />
Он может иметь атрибут align, который указывает отступ left, center или right. Каждый следующий раздел игнорирует, заданное для предыдущего раздела, значение align. Синтаксис: <DIV align=отступ> Текст раздела </DIV> Элемент <ADDRESS> используется для оформления контактной информации текущего документа, будь то адрес электронной почты или полный почтовый адрес с номером телефона. Синтаксис: < ADDRESS>контактная информация </ADDRESS> </p>
</div>
<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Элемент <BLOCKQUOTE> позволяет выделить объемный текст-цитату из общего текста. Синтаксис: <BLOCKQUOTE> Текст </BLOCKQUOTE> Элемент" src="https://present5.com/presentation/876339ac4a8fb833c8b14b62ef85f9e3/image-68.jpg" alt="Элемент <BLOCKQUOTE> позволяет выделить объемный текст-цитату из общего текста. Синтаксис: <BLOCKQUOTE> Текст </BLOCKQUOTE> Элемент" />
Элемент <BLOCKQUOTE> позволяет выделить объемный текст-цитату из общего текста. Синтаксис: <BLOCKQUOTE> Текст </BLOCKQUOTE> Элемент <SPAN> позволяет выделить некоторое количество текста для последующего форматирования, но в отличие от <DIV> не начинает новый абзац. Синтаксис: <SPAN> Текст </SPAN> </p>
</div>
<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="СПИСКИ Элемент <OL> используется с целью задания нумерованных списков, имеет атрибуты type=1, или A," src="https://present5.com/presentation/876339ac4a8fb833c8b14b62ef85f9e3/image-69.jpg" alt="СПИСКИ Элемент <OL> используется с целью задания нумерованных списков, имеет атрибуты type=1, или A," />
СПИСКИ Элемент <OL> используется с целью задания нумерованных списков, имеет атрибуты type=1, или A, или a, или I, или i для задания вида нумерации и start для указания, с какого индекса начинается нумерация списка. Элемент <OL> включает в себя дополнительный элемент <LI>, который задает элементы списка. Синтаксис: <OL type=1 start=1 > <LI> элемент списка </OL> Пример: 1. элемент списка 2. элемент списка </p>
</div>
<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Элемент <UL>, по сути, является аналогом <OL> без дополнительных элементов <LI>, он используется с" src="https://present5.com/presentation/876339ac4a8fb833c8b14b62ef85f9e3/image-70.jpg" alt="Элемент <UL>, по сути, является аналогом <OL> без дополнительных элементов <LI>, он используется с" />
Элемент <UL>, по сути, является аналогом <OL> без дополнительных элементов <LI>, он используется с целью задания ненумерованых списков, имеет атрибут type=circle, square, или disc для задания вида маркера. Элемент <UL> включает в себя дополнительный элемент <LI>, который задает элементы списка. Синтаксис: <UL type=circle > <LI> элемент списка </UL> Пример: • элемент списка </p>
</div>
<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Элемент <DL>используется с целью задания словарей, глоссариев и прочих перечней. Элемент <DL> включает в" src="https://present5.com/presentation/876339ac4a8fb833c8b14b62ef85f9e3/image-71.jpg" alt="Элемент <DL>используется с целью задания словарей, глоссариев и прочих перечней. Элемент <DL> включает в" />
Элемент <DL>используется с целью задания словарей, глоссариев и прочих перечней. Элемент <DL> включает в себя дополнительные элементы <DT> и <DD>, которые обозначают соответственно термин и определение. Синтаксис: <DL > <DT> термин 1 <DD>определение 1 <DT> термин 2 <DD>определение 2 </DL> Пример: термин 1 определение 1 термин 2 определение 2 </p>
</div>
<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="ТАБЛИЦЫ Структура таблиц в html включает строки и столбцы, которые могут иметь заголовки (headers" src="https://present5.com/presentation/876339ac4a8fb833c8b14b62ef85f9e3/image-72.jpg" alt="ТАБЛИЦЫ Структура таблиц в html включает строки и столбцы, которые могут иметь заголовки (headers" />
ТАБЛИЦЫ Структура таблиц в html включает строки и столбцы, которые могут иметь заголовки (headers - имена, титулы, объяснения). Таблица в обычном варианте представляется в естественном виде, с согласованно расположенными столбцами. В html табличные элементы обычно называют ячейками, чтобы избежать смешивания с табличным элементом (TABLE element), который в описании html соответствует всей таблице. Теги, используемые для представления таблиц Для представления таблиц используются нескольких видов тегов html: теги TABLE, которые обрамляют всю табличную спецификацию; </p>
</div>
<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="необязательный элемент заголовок (имя) таблицы; CAPTION, специфицирующий теги TR, специфицирующие строки таблицы; теги TH," src="https://present5.com/presentation/876339ac4a8fb833c8b14b62ef85f9e3/image-73.jpg" alt="необязательный элемент заголовок (имя) таблицы; CAPTION, специфицирующий теги TR, специфицирующие строки таблицы; теги TH," />
необязательный элемент заголовок (имя) таблицы; CAPTION, специфицирующий теги TR, специфицирующие строки таблицы; теги TH, специфицирующие заголовки строк и столбцов; теги TD, специфицирующие данные в таблице, т. е. содержимое табличных ячеек. Теги TABLE заключают в себе табличные строки, каждая из которых обрамляется тегами TR, и табличные ячейки, обрамляемые тегами TD. Это согласуется с логической структурой таблицы, как множеством строк, состоящих из ячеек. Вы можете сократить табличную структуру, опустив конечные теги TD и TR, однако это не рекомендуется. </p>
</div>
<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Более того, хотя удаление конечных тегов допустимо в html 3. 2, отдельные браузеры (включая" src="https://present5.com/presentation/876339ac4a8fb833c8b14b62ef85f9e3/image-74.jpg" alt="Более того, хотя удаление конечных тегов допустимо в html 3. 2, отдельные браузеры (включая" />
Более того, хотя удаление конечных тегов допустимо в html 3. 2, отдельные браузеры (включая Netscape) не смогут без них правильно представить таблицу. Использование пробелов и переводов строк в коде html для таблицы не всегда хорошо, однако это иногда необходимо для позиционирования элементов таблицы в коде html так, чтобы образы в одних и тех же столбцах располагались бы понятно для Вас (или для кого-то, работающего с документом html). Дополнительные свойства Есть несколько элементов, которые Вы можете добавить к вышерассмотренной простой табличной модели: Заголовок (caption) для таблицы, связанный с самой таблицей (в дополнение к строкам текста о таблице в документе). </p>
</div>
<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Подзаголовки (headers) (объяснения) как для табличных строк, так и для колонок. Рамки (borders) вокруг" src="https://present5.com/presentation/876339ac4a8fb833c8b14b62ef85f9e3/image-75.jpg" alt="Подзаголовки (headers) (объяснения) как для табличных строк, так и для колонок. Рамки (borders) вокруг" />
Подзаголовки (headers) (объяснения) как для табличных строк, так и для колонок. Рамки (borders) вокруг таблицы и каждой табличной ячейки. Использование таблиц для представления меню Часто требуется представить большой набор относительно малых образов. Например, у нас есть документ о различных странах и мы хотим создать меню из имен стран, чтобы использовать его, как индекс. И индекс должен использовать обычные связи, например <A HREF="af. html">Afghanistan</A>. Можно либо использовать элемент PRE, либо затратить усилия на конструирование подходящего элемента TABLE. Например: Табличные элементы, занимающие несколько строк или столбцов </p>
</div>
<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Иногда требуется создать табличный элемент, объединяющий две или более ячейки, как в горизонтальном, так" src="https://present5.com/presentation/876339ac4a8fb833c8b14b62ef85f9e3/image-76.jpg" alt="Иногда требуется создать табличный элемент, объединяющий две или более ячейки, как в горизонтальном, так" />
Иногда требуется создать табличный элемент, объединяющий две или более ячейки, как в горизонтальном, так и в вертикальном направлении. Для этого используются атрибуты ROWSPAN и COLSPAN. Вложенные таблицы Таблицы могут быть вложенными, так как элементы TD и TH могут содержать и блоковый элемент и табличный. Во вложенных таблицах легко сделать ошибки, поэтому обращайте особое внимание на их построение. </p>
</div>
<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Графика img - линейные изображения Цель Включает изображения в документ. Типичное отображение Изображения представляются," src="https://present5.com/presentation/876339ac4a8fb833c8b14b62ef85f9e3/image-77.jpg" alt="Графика img - линейные изображения Цель Включает изображения в документ. Типичное отображение Изображения представляются," />
Графика img - линейные изображения Цель Включает изображения в документ. Типичное отображение Изображения представляются, как часть документа. Неграфические браузеры представляют взамен изображения значение атрибута ALT. Позиционирование изображения обеспечивается атрибутами элемента img. Основной синтаксис <img SRC="URL" ALT="текст"> </p>
</div>
<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Возможные атрибуты SRC - URL адрес изображения обязателен ALT строка текстовое описание изображения ALIGN" src="https://present5.com/presentation/876339ac4a8fb833c8b14b62ef85f9e3/image-78.jpg" alt="Возможные атрибуты SRC - URL адрес изображения обязателен ALT строка текстовое описание изображения ALIGN" />
Возможные атрибуты SRC - URL адрес изображения обязателен ALT строка текстовое описание изображения ALIGN TOP, MIDDLE, BOTTOM, LEFT, RIGHT позиционирование изображения относительно текущей текстовой строки по умолчанию BOTTOM HEIGHT целое - высота в пикселях WIDTH целое - ширина в пикселях BORDER целое ширина бордюра (рамки) в пикселях используется, когда элемент img появляется, как текст якоря; используйте BORDER=0 для подавления рамки HSPACE целое ширина незаполненного пространства непосредственно слева и справа от изображения в пикселях значение по умолчанию - малое ненулевое число </p>
</div>
<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="VSPACE целое высота незаполненного пространства выше и ниже изображения в пикселях значение по умолчанию" src="https://present5.com/presentation/876339ac4a8fb833c8b14b62ef85f9e3/image-79.jpg" alt="VSPACE целое высота незаполненного пространства выше и ниже изображения в пикселях значение по умолчанию" />
VSPACE целое высота незаполненного пространства выше и ниже изображения в пикселях значение по умолчанию - малое ненулевое число Атрибуты WIDTH и HEIGHT при совместном использовании позволяют программам просмотра зарезервировать место на экране для изображения еще до того, как они будут переданы по сети. Это позволяет пользователю начать чтение, пока передача данных еще продолжается. Эти атрибуты не предназначены для автоматического изменения размера изображения браузерами. Хотя некоторые браузеры могут масштабировать изображение в соответствии с атрибутами WIDTH и HEIGHT, особо полагаться на это нельзя, эти атрибуты должны задавать реальный размер изображения. </p>
</div>
<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Значения ALIGN имеют следующий смысл: ALIGN=TOP Позиционирует верх изображения с верхом текущей текстовой строки." src="https://present5.com/presentation/876339ac4a8fb833c8b14b62ef85f9e3/image-80.jpg" alt="Значения ALIGN имеют следующий смысл: ALIGN=TOP Позиционирует верх изображения с верхом текущей текстовой строки." />
Значения ALIGN имеют следующий смысл: ALIGN=TOP Позиционирует верх изображения с верхом текущей текстовой строки. Браузеры по разному интерпретируют это. Некоторые принимают во внимание то, что было на текстовой строке до изображения и игнорируют, что идет на строке после него. ALIGN=MIDDLE Выравнивает середину изображения по основной текстовой строке. ALIGN=BOTTOM (по умолчанию) Выравнивает низ изображения по основной строке. </p>
</div>
<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="ALIGN=LEFT Перемещает изображение к текущему левому краю, временно изменяя этот край так, чтобы последующий" src="https://present5.com/presentation/876339ac4a8fb833c8b14b62ef85f9e3/image-81.jpg" alt="ALIGN=LEFT Перемещает изображение к текущему левому краю, временно изменяя этот край так, чтобы последующий" />
ALIGN=LEFT Перемещает изображение к текущему левому краю, временно изменяя этот край так, чтобы последующий текст переместился вдоль левой стороны изображения. Отображение зависит от того, были ли выровненные по левому краю какой-нибудь текст или ранее появившееся изображение до того, как в разметке появилось текущее изображение. Такой текст (но не изображения) обычно заставляет выровненные по левому краю изображения смещаться на новую строку, с последующим продолжением текста на прежней строке. ALIGN=Right Перемещает изображение к текущему правому краю, временно изменяя этот край так, чтобы последующий текст переместился вдоль правой стороны изображения. </p>
</div>
<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="ОСНОВЫ ПОСТРОЕНИЯ ИНТЕРАКТИВНЫХ WWWСТРАНИЦ Язык Java. Script Создание форм html Формы представляют собой наиболее" src="https://present5.com/presentation/876339ac4a8fb833c8b14b62ef85f9e3/image-82.jpg" alt="ОСНОВЫ ПОСТРОЕНИЯ ИНТЕРАКТИВНЫХ WWWСТРАНИЦ Язык Java. Script Создание форм html Формы представляют собой наиболее" />
ОСНОВЫ ПОСТРОЕНИЯ ИНТЕРАКТИВНЫХ WWWСТРАНИЦ Язык Java. Script Создание форм html Формы представляют собой наиболее важные интерактивные элементы html, позволяющие разработчикам страниц интерактивно взаимодействовать с посетителями. С их помощью пользователь может возвращать комментарии по поводу посещения определенного узла, пересылать запросы или регистрироваться. Разработчик задает вопросы, создавая форму, а пользователь отвечает на них заполняя её. Содержимое формы либо передаётся сценарию CGI, либо по электронной почте посылается получателю. </p>
</div>
<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Сам процесс создания формы состоит из двух этапов. Первый заключается в создании самой формы," src="https://present5.com/presentation/876339ac4a8fb833c8b14b62ef85f9e3/image-83.jpg" alt="Сам процесс создания формы состоит из двух этапов. Первый заключается в создании самой формы," />
Сам процесс создания формы состоит из двух этапов. Первый заключается в создании самой формы, а второй заключает в себе создание на сервере сценария CGI. Форма создается при помощи различных тэгов и атрибутов, заключенных в пару <FORM></FORM>: Элемент <FORM> Элемент <ISINDEX>. Элемент <INPUT> Элемент <BUTTON>. Элемент <TEXTAREA> Элемент <LABEL>. Элемент < SELECT> Элемент <FIELDSET>. Элемент <OPTION>. Элемент <OPTGROUP>. Элемент <LEGEND>. </p>
</div>
<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Элемент <FORM> является необходимым условием для всех форм. Он может иметь следующие атрибуты: •" src="https://present5.com/presentation/876339ac4a8fb833c8b14b62ef85f9e3/image-84.jpg" alt="Элемент <FORM> является необходимым условием для всех форм. Он может иметь следующие атрибуты: •" />
Элемент <FORM> является необходимым условием для всех форм. Он может иметь следующие атрибуты: • Method Этот атрибут определяет способ пересылки данных сценарию CGI. Здесь протокол GET выбран по умолчанию, но в большинстве случаев разработчики пользуются протоколом POST, который позволяет передавать большие объемы данных. • Action Этот атрибут определяет путь к сценарию CGI или адрес электронной почты. </p>
</div>
<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title=" • Enctype Этот атрибут определяет способ кодирования содержимого формы. Другими словами он сообщает" src="https://present5.com/presentation/876339ac4a8fb833c8b14b62ef85f9e3/image-85.jpg" alt=" • Enctype Этот атрибут определяет способ кодирования содержимого формы. Другими словами он сообщает" />
• Enctype Этот атрибут определяет способ кодирования содержимого формы. Другими словами он сообщает браузеру о способе кодирования информации перед отсылкой серверу. По умолчанию используется значение x-www-formencoded. Синтаксис формы для сценария: <FORM method="get" или "post" action="URL сценария"> </FOr. M> Синтаксис формы для почты: <FORM method="get" </FOr. M> или "post" action="mailto: адрес"> </p>
</div>
<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="" src="https://present5.com/presentation/876339ac4a8fb833c8b14b62ef85f9e3/image-86.jpg" alt="" />
</p>
</div>
<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="" src="" alt="" />
</p>
</div>
</div>
<div id="inputform">
<script>$("#inputform").load("https://present5.com/wp-content/plugins/report-content/inc/report-form-aj.php");
</script>
</div>
</p>
<!--end entry-content-->
</div>
</article><!-- .post -->
</section><!-- #content -->
<div class="three columns">
<div class="widget-entry">
</div>
</div>
</div>
</div>
<!-- #content-wrapper -->
<footer id="footer" style="padding: 5px 0 5px;">
<div class="container">
<div class="columns twelve">
<!--noindex-->
<!--LiveInternet counter--><script type="text/javascript"><!--
document.write("<img src='//counter.yadro.ru/hit?t26.10;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+
";"+Math.random()+
"' alt='' title='"+" ' "+
"border='0' width='1' height='1'><\/a>")
//--></script><!--/LiveInternet-->
<a href="https://slidetodoc.com/" alt="Наш международный проект SlideToDoc.com!" target="_blank"><img src="https://present5.com/SlideToDoc.png"></a> <script>
$(window).load(function() {
var owl = document.getElementsByClassName('owl-carousel owl-theme owl-loaded owl-drag')[0];
document.getElementById("owlheader").insertBefore(owl, null);
$('#owlheader').css('display', 'inline-block');
});
</script>
<script type="text/javascript">
var yaParams = {'typepage': '1000_top_300k',
'author': '1000_top_300k'
};
</script>
<!-- Yandex.Metrika counter --> <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(32395810, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/32395810" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter -->
<!--/noindex-->
<nav id="top-nav">
<ul id="menu-top" class="top-menu clearfix">
</ul> </nav>
</div>
</div><!--.container-->
</footer>
<script type='text/javascript'>
/* <![CDATA[ */
var wpcf7 = {"apiSettings":{"root":"https:\/\/present5.com\/wp-json\/contact-form-7\/v1","namespace":"contact-form-7\/v1"}};
/* ]]]]><![CDATA[> */
</script>
<script type='text/javascript' src='https://present5.com/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=5.1.4'></script>
<script type='text/javascript' src='https://present5.com/wp-content/themes/sampression-lite/lib/js/jquery.shuffle.js?ver=4.9.26'></script>
<script type='text/javascript' src='https://present5.com/wp-content/themes/sampression-lite/lib/js/scripts.js?ver=1.13'></script>
<script type='text/javascript' src='https://present5.com/wp-content/themes/sampression-lite/lib/js/shuffle.js?ver=4.9.26'></script>
<!--[if lt IE 9]>
<script type='text/javascript' src='https://present5.com/wp-content/themes/sampression-lite/lib/js/selectivizr.js?ver=1.0.2'></script>
<![endif]-->
<script type='text/javascript' src='https://present5.com/wp-content/themes/sampression-lite/lib/js/notify.js?ver=1734084880'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var my_ajax_object = {"ajax_url":"https:\/\/present5.com\/wp-admin\/admin-ajax.php","nonce":"d6a96b5cf0"};
/* ]]]]><![CDATA[> */
</script>
<script type='text/javascript' src='https://present5.com/wp-content/themes/sampression-lite/lib/js/filer.js?ver=1734084880'></script>
</body>
</html>]]> 
Скачать презентацию ВВЕДЕНИЕ В ЯЗЫК HTML Историческая справка Официальным днем