HTML BASICS Slides Презентация

расшифровка

HTML и XHTML являются основой всей веб-разработки. HTML используется в качестве графического пользовательского интерфейса в клиентских программах, написанных на JavaScript. Серверные языки, такие как PHP и Java, также получают данные с веб-страниц и используют HTML в качестве механизма вывода. Новые технологии Ajax также используют HTML и XHTML в качестве визуального движка. Когда-то HTML был очень плохо определенным языком с очень небольшой стандартизацией, но, поскольку он стал более важным, потребность в стандартах стала более очевидной. Независимо от того, выберете ли вы писать HTML или XHTML, понимание текущих стандартов поможет вам создать прочную основу, которая упростит все остальные ваши веб-кодирования. К счастью, HTML и XHTML на самом деле проще, чем раньше, потому что большая часть функциональности перешла на CSS.

Общие элементы

Каждая страница (HTML или XHTML совместно использует определенные общие элементы). Все они, по сути, представляют собой простые текстовые файлы с расширением .html. HTML-файлы должны создаваться не с помощью текстового процессора, а в каком-либо редакторе, который создает простой текст. Каждая страница имеет большой контейнер (HTML или XHTML) и два основных подконтейнера, заголовок и тело. Область заголовка содержит полезную закулисную информацию, такую как инструкции по форматированию CSS и код JavaScript. Тело содержит ту часть страницы, которая видна пользователю.

Теги и атрибуты

HTML-документ основан на понятии тегов. Тег - это фрагмент текста в угловых скобках (<>). Тэги обычно имеют начало и конец, и обычно содержат какой-то текст внутри них. Например, абзац обычно обозначается так:

 <Р>
Это простой абзац
</ Р>

Теги и атрибуты

<P> указывает начало абзаца. Затем текст помещается внутри тега, а конец абзаца обозначается конечным тегом, который похож на начальный тег, но с косой чертой (</ p>.) Обычно для отступа содержимого в многострочный тег, но также допустимо размещать теги в одной строке:

 <p> Это простой абзац </ p>

Теги и атрибуты

Теги иногда дополняются атрибутами, которые представляют собой пары «имя-значение», которые изменяют тег. Например, тег (используется для встраивания изображения в страницу) обычно включает следующие атрибуты:

 <img src = "logo.jpg" Alt = "это логотип" />

Атрибут src описывает, где можно найти файл изображения, а атрибут alt описывает альтернативный текст, который отображается, если изображение недоступно.

Вложенные теги

Теги могут быть (и часто являются) вложенными друг в друга. Теги не могут перекрываться, поэтому <a> <b> </a> </ b> недопустимо, но <a> <b> </ b> </a> вполне подойдет.

HTML VS XHTML

HTML существует уже некоторое время. Хотя он прекрасно справился со своей работой, эта работа расширилась гораздо больше, чем кто-либо ожидал. Ранний HTML имел очень ограниченную поддержку макетов. Производители браузеров добавили много конкурирующих стандартов, и веб-разработчики придумали хитрые обходные пути, но в результате у веб-разработчиков не хватает стандартов и разочарований. Новейшие веб-стандарты (XHTML и новый стандарт HTML 5.0) возвращаются к первоначальной цели HTML: описывать только структуру данных и оставлять все форматирование на CSS (см. Серия CSS DZone Refcard). XHTML - это не более чем HTML-код, соответствующий более строгим стандартам XML. При написании в HTML или XHTML уместны одинаковые рекомендации по стилю (но они, как правило, применяются в XHTML):

 ➢ Используйте тип документа для описания языка (описано ниже)
➢ Напишите весь код строчными буквами
➢ Заключите все значения атрибута в двойные кавычки
➢ У каждого тега должен быть указан конец. Обычно это делается с помощью конечного тега, но в специальном случае допускаются теги без содержимого.

HTML VS XHTML

Большинство требований XHTML являются хорошей практикой, независимо от того, пишете ли вы HTML или XHTML. Я рекомендую использовать строгий XHTML, чтобы вы могли проверить свой код и знать, что он соответствует самым строгим стандартам.

XHTML имеет ряд вкусов. Рекомендуется использовать строгий тип, поскольку он является самым современным стандартом, который дает наиболее предсказуемые результаты. Вы также можете использовать переходный тип (который разрешает использовать устаревшие теги HTML) и тип набора фреймов, который позволяет добавлять фреймы. Для большинства приложений предпочтительным является строгий тип.

HTML шаблон

Следующий код можно скопировать и вставить, чтобы сформировать основу базовой веб-страницы:

 <HTML>
<Голова>
<Название> </ название>
</ HEAD>
<Тело>
</ Body>
</ Html>

Проверка

Структура ваших веб-страниц имеет решающее значение для успеха программ, основанных на этих страницах, поэтому используйте инструмент проверки, чтобы убедиться, что вы ничего не пропустили

ПОЛЕЗНЫЕ ИСТОЧНИКИ ОТКРЫТОГО ИСТОЧНИКА

Некоторые из лучших инструментов для веб-разработки доступны бесплатно через сообщество с открытым исходным кодом. Рассматривайте эти приложения как часть вашего инструментария HTML:

СТРУКТУРНЫЕ ЭЛЕМЕНТЫ СТРАНИЦЫ

Следующие элементы являются частью каждой веб-страницы.

КЛЮЧЕВЫЕ СТРУКТУРНЫЕ ЭЛЕМЕНТЫ

Большинство страниц содержат следующие ключевые структурные элементы:

СПИСКИ И ДАННЫЕ

Веб-страницы часто содержат структурированные данные, поэтому HTML включает несколько полезных списков и табличных тегов.

Стандартные типы списков

HTML поддерживает три основных типа списка. Упорядоченные списки и неупорядоченные списки являются основными типами списков. По умолчанию упорядоченные списки используют числовые идентификаторы, а неупорядоченные списки используют маркеры.

Однако вы можете использовать CSS-атрибут list-style-type, чтобы изменить маркер списка на один из нескольких типов.

 <Ол>
<Li> один </ li>
<Li> два </ li>
<Li> три </ li>
</ Ол>

Списки могут быть вложены друг в друга

 <UL>
<Li> Английский
<Ол>
<Li> Один
<Li> Два
<Li> Три
</ Ол>
</ Li>
<Li> Французский
<Ол>
<Литий> ип
<Li> Duex
<Li> троек
</ Ол>
</ Li>
</ UL>

Списки определений

Специальный список определений используется для пар имя / значение. Термин определения (dt) - это слово или фраза, которая используется в качестве маркера списка, а данные определения обычно представляют собой абзац:

 <h2> Типы списка </ h2>
<Дл>
<dt> Неупорядоченный список </ dt>
<dd> Обычно используется для маркированных списков, где порядок данных
не важно. </ dd>
<dt> Упорядоченные списки </ dt>
<dd> Обычно используют пронумерованные элементы, например, список
инструкции, где порядок значим. </ dd>
<dt> Список определений </ dt>
<dd> Используется для описания термина и определения. Часто хороший
альтернатива таблице из двух столбцов </ dd>
</ Дл>

Использование таблиц

Таблицы использовались в прошлом для преодоления недостатков верстки страниц в HTML. Это использование в настоящее время не рекомендуется в пользу макета на основе CSS. Используйте таблицы только так, как они были предназначены, для отображения табличных данных.

Таблица в основном состоит из серии строк таблицы (tr.). Каждая строка таблицы состоит из нескольких элементов данных таблицы (td). Элемент заголовка таблицы (th) может использоваться для указания, что ячейка таблицы должна быть помечена как заголовок.

Атрибуты rowspan и colspan могут использоваться для создания диапазона ячеек более чем в одну строку или столбец.

Каждая строка таблицы должна иметь одинаковое количество столбцов, а каждый столбец должен иметь одинаковое количество строк. Использование атрибута span может потребовать корректировки для других строк или столбцов.

 <table border = "1">
<TR>
<Й> английский </ е>
<Й> Французский </ е>
</ TR>
<TR>
<TD> One </ TD>
<TD> Un </ TD>
</ TR>
<TR>
<TD> Два </ TD>
<TD> Duex </ TD>
</ TR>
</ Table>

ССЫЛКИ И ИЗОБРАЖЕНИЯ

Ссылки и изображения используются для включения внешних ресурсов в страницу. Оба зависят от URI (универсальных индикаторов ресурсов), обычно называемых URL-адресами или адресами.

<a> (привязка) Тег привязки используется для предоставления базовой веб-ссылки:

 <a href ="http://www.example.com"> ссылка на example.com </a>

В этом примере http://www.example.com - это сайт, который нужно посетить. Текст «ссылка на example.com» будет выделен как ссылка.

абсолютные и относительные ссылки

<ссылка>

Тег ссылки используется главным образом для извлечения внешних CSS-файлов:

 <link rel = "stylesheet" type = "text / css" href = "style.css" />

<IMG>

Тег img используется для прикрепления изображения. Допустимые форматы: .jpg, .png и .gif. Изображение всегда должно сопровождаться атрибутом alt, описывающим содержимое изображения.

 <img src = ”../ images / logo.png” alt = "я до бритья" />

Атрибуты форматирования изображения (высота, ширина и выравнивание) устарели в пользу CSS.

СПЕЦИАЛЬНЫЙ МАРКУП

HTML / XHTML включает несколько специальных тегов. Они используются для описания текста специального назначения. У них есть стиль по умолчанию, но, конечно, стили могут быть изменены с помощью CSS.

<цитата>

Тег цитаты предназначен для отображения цитаты из одной строки:

 <quote> Слабые никогда не простят. Прощение - это атрибут сильного. </ Quote>

Цитата это встроенный тег. Если вам нужна цитата на уровне блоков, используйте <blockquote>.

<предварительно>

Тег <pre> используется для предварительно отформатированного текста. Иногда он используется для списков кодов или ASCII-изображений, потому что сохраняет возврат каретки. Предварительно отформатированный текст обычно отображается шрифтом фиксированной ширины.

 <Предварительно>
для я в диапазоне (20):
распечатать я
</ PRE>

<код>

Формат кода используется для управления предварительно форматированным текстом, особенно списками кода. Это очень похоже на предварительно.

 <Код>
пока мне <20:
я + = 1
распечатать я
</ Код>

<BLOCKQUOTE>

Этот тег используется для пометки многострочных кавычек. Часто это выделяется специальными шрифтами и отступами через CSS. Это тег уровня блока.

 <BLOCKQUOTE>
Quoth ворон:
никогда больше
</ BLOCKQUOTE>

<SPAN>

Тег span - это встроенный тег vanilla. У него нет особого собственного форматирования. Он предназначен для использования с классом или идентификатором, когда вы хотите применить стиль к встроенному фрагменту кода.

 <span class = "highlight"> Этот текст будет подсвечен.

<EM>

Тег em используется для стандартного акцента. По умолчанию <em> выделяет текст курсивом, но вы можете использовать CSS, чтобы сделать любой другой тип выделения по вашему желанию.

<сильный>

Этот тег представляет сильный акцент. По умолчанию он выделен жирным шрифтом, но вы можете изменить форматирование с помощью CSS.

ФОРМЫ

Формы - это стандартный механизм пользовательского ввода в HTML / XHTML. Вам понадобится другой язык, такой как JavaScript или PHP, чтобы читать содержимое элементов формы и воздействовать на них.

Структура формы

Ряд тегов используются для описания структуры формы. Начните с просмотра основной формы:

 <form action = "">
<FIELDSET>
<legend> Моя форма </ legend>
<label for = "txtName"> Имя </ label>
<input type = "text" id = "txtName" />
<button type = "button" Onclick = "myFunction ()">
Нажми на меня
Кнопка </>
</ FIELDSET>
</ Форма>

Пара <form> </ form> описывает форму. В строгом XHTML вы должны указать свойство действия формы. Обычно это серверная программа, которая будет читать форму. Если такой программы нет, вы можете установить для действия значение null ("") Атрибут method используется для определения того, отправляются ли данные через механизм get или post.

Fieldset

Большинство элементов формы являются встроенными тегами и должны быть заключены в элемент блока. Набор полей предназначен именно для этой цели. Его внешний вид по умолчанию рисует рамку вокруг формы. Вы можете иметь несколько наборов полей внутри одной формы.

легенда

Вы можете добавить легенду внутри набора полей. Это описывает назначение набора полей.

этикетка

Метка - это специальный встроенный элемент, который описывает конкретное поле. Метка может быть связана с элементом ввода, поместив идентификатор этого элемента в атрибут метки for.

вход

Элемент input является встроенным элементом общего назначения. Он предназначен для использования внутри формы и является основой для нескольких типов более конкретного ввода. Подтип указывается атрибутом типа. Входные элементы обычно включают атрибут id (используется для идентификации CSS и JavaScript) и / или атрибут name (используется в программировании на стороне сервера.) Один и тот же элемент может иметь как имя, так и идентификатор.

Текст

Этот элемент позволяет вводить одну строку текста:

 <input type = "text" id = "myText" name = "myText" />

пароль

Пароли отображаются точно так же, как текстовые поля, за исключением того, что текст отображается в том виде, в котором он напечатан, для каждой буквы отображается звездочка. Обратите внимание, что данные не кодируются каким-либо значимым образом. Ввод текста в поле пароля все еще совершенно небезопасен.

 <input type = "password" id = "MyPasswd" />

Переключатель

Радиокнопки используются в группе. Только один элемент радиогруппы может быть выбран за один раз. Присвойте всем членам радиогруппы одно и то же значение имени, чтобы указать, что они являются частью группы.

 <type = "radio" name = "radSize"
vainputlue = "small" id = "radSmall" selected = "selected" />
<label for = "radSmall"> Small </ label>
<input type = "radio" name = "radSize"
value = "large" id = "radLarge" />
<label for = "radLarge"> Large </ label>

Прикрепление метки к переключателю означает, что пользователь может активировать кнопку, щелкнув соответствующую метку. Для достижения наилучших результатов используйте выбранный атрибут, чтобы одна радиокнопка использовалась по умолчанию.

флажок

Флажки очень похожи на переключатели, но они независимы. Как и радио-кнопки, они могут быть связаны с меткой.

 <input type = "checkbox" id = "chkFries" />
<label for = "chkFries"> Хотите картошку с этим? </ label>

скрытый

Скрытые поля содержат данные, которые не видны пользователю (хотя они все еще видны в коде). Они в основном используются для сохранения состояния в программах на стороне сервера.

 <input type = "hidden"
name = "txtHidden"
значение = "рецепт секретного соуса" />

Обратите внимание, что данные все еще не защищены каким-либо значимым способом.

кнопка

Кнопки используются для сигнализации ввода пользователя. Кнопки могут быть созданы с помощью тега ввода:

 <input type = "button" value = "Submit" onclick = "MyFunction ()" />

Это создаст кнопку с надписью «Запустить ракеты». Когда кнопка нажата, страница попытается запустить функцию JavaScript с именем launchMissiles (). Стандартные кнопки обычно используются с кодом JavaScript на клиенте. Эту же кнопку можно также создать с помощью этого альтернативного формата:

 <button type = "button" Onclick = "MyFunction ()">
Отправить
Кнопка </>

Эта вторая форма предпочтительнее, потому что кнопки часто требуют других стилей CSS, чем другие элементы ввода. Эта вторая форма также позволяет размещать тег <img> внутри кнопки, заставляя изображение выступать в качестве кнопки.

Сброс

Кнопка сброса автоматически сбрасывает все элементы в своей форме к значениям по умолчанию. Не требует никаких других атрибутов.

 <input type = "reset" />
<button type = "reset" ">
Сброс
Кнопка </>

Выберите опцию

Выпадающие списки могут быть созданы с помощью механизма выбора / выбора. Тег select создает общую структуру, которая заполняется элементами option.

 <select id = "colors">
<option value = "# 000000"> черный </ option>
<option value = "# FF0000"> красный </ option>
<option value = "# FFFFFF"> white </ option>
</ Выберите>

У выбора есть идентификатор (для кода на стороне клиента) или имя (для кода на стороне сервера). Он содержит ряд опций. У каждой опции есть значение, которое будет возвращено программе. Текст между <option> и </ option> является значением, отображаемым для пользователя. В некоторых случаях (как в этом примере) значение, отображаемое пользователю, не совпадает со значением, используемым программами.

Множественный выбор

Вы также можете создать многострочное выделение с помощью тегов select и option:

 <select id = "colors" size = "3" множественный = "множественный">
<option value = "# 000000"> черный </ option>
<option value = "# FF0000"> красный </ option>
<option value = "# FFFFFF"> white </ option>
</ Выберите>

УСТАРЕВШИЕ ФОРМАТИРУЮЩИЕ ТЕГИ

Определенные теги, распространенные в старых формах HTML, больше не рекомендуются, поскольку CSS предоставляет гораздо лучшие альтернативы.

Шрифт

Тег font использовался для установки цвета шрифта, семейства (гарнитуры) и размера. Многочисленные атрибуты CSS заменяют эту возможность гораздо более гибкими альтернативами. Смотрите CSS refcard для деталей.

Я (курсив)

HTML-код должен указывать уровень акцента, а не конкретные стилистические последствия. Курсив должен быть сделан через CSS. Тег <em> представляет выделенный текст. Это производит курсив, если стиль не изменен на что-то другое. Тег <i> больше не нужен и не рекомендуется. Добавьте font-style: курсив к стилю любого элемента, который должен быть выделен курсивом.

B (жирный)

Как и курсив, жирный шрифт считается стилем рассмотрения. Используйте тег <strong>, чтобы обозначить любой текст, который следует подчеркнуть. По умолчанию это приведет к выделению жирным шрифтом вложенного текста. Вы можете добавить выделение жирным шрифтом в любой стиль с помощью атрибута font-weight: bold в CSS.

УСТАРЕВШИЕ МЕТОДЫ

Рамки

В дополнение к устаревшим тегам существуют также методы, которые когда-то были распространены в HTML, и которые больше не рекомендуются.

Фреймы были использованы в качестве механизма компоновки и в качестве метода поддержания статичности одной части страницы при динамической загрузке других частей страницы в отдельных фреймах. Использование фреймов, как оказалось, вызывает серьезные проблемы с удобством использования. Макет лучше обрабатывается с помощью методов CSS, а динамическая генерация страниц часто выполняется с помощью серверных манипуляций или AJAX.

Табличный дизайн

До того, как CSS получил широкое распространение, HTML не имел адекватной поддержки форматирования страниц. Умные дизайнеры использовали таблицы, чтобы обеспечить адекватную форму макета страницы. CSS обеспечивает гораздо более гибкую и мощную форму компоновки, чем таблицы, и сохраняет код HTML в значительной степени отделенным от разметки стиля.

HTML ENTITIES

Иногда вам нужно отобразить специальный символ на веб-странице. HTML имеет набор специальных символов именно для этой цели. Каждый из этих объектов начинается с амперсанда (&), за которым следует код и точка с запятой.

ОБЗОР HTML 5 / CSS3

Новые технологии на горизонте. Firefox 3.5 теперь поддерживает новые важные функции HTML 5, а CSS 3 не сильно отстает. Хотя следующее все еще следует считать экспериментальным, они, вероятно, станут очень важными инструментами в ближайшие несколько лет. Firefox 3.5, Safari 4 (и несколько других последних браузеров) поддерживают следующие новые функции:

Аудио и видео теги

Наконец, браузеры имеют прямую поддержку аудио и видео без технологии плагинов. Эти теги работают так же, как тег img.

 <video src = "DemoVideo.ogg" автозапуск>
Ваш браузер не поддерживает видео тег.
</ Видео>
<audio src = "DemoAudio.ogg" элементы управления>
Ваш браузер не поддерживает аудио тег
</ Аудио>

Стандарт HTML 5 в настоящее время поддерживает видео Ogg Theora, аудио Ogg Vorbis и аудио wav. Форматы Ogg - это открытые альтернативы проприетарным форматам, и множество бесплатных инструментов конвертируют из более стандартных видео форматов в Ogg. Опция autoplay заставляет элемент воспроизводиться автоматически. Элемент управления размещает элементы управления прямо на странице.

Код между начальным и конечным тегом будет выполняться, если браузер не сможет обработать аудио или видео тег. Вы можете разместить здесь альтернативный код для встраивания альтернативных версий (например, Flash)

Тег холст

Тэг canvas предлагает область страницы, на которой можно рисовать (обычно с помощью Javascript). Это создает возможность настоящей интерактивной графики без использования плагинов, таких как Flash.

Лицо шрифта

Это на самом деле улучшение CSS, но это очень нужно. Это позволяет вам определять font-face в CSS и включать файл шрифта ttf с сервера. Затем вы можете использовать этот шрифт face в вашем обычном CSS и использовать загруженный шрифт. Если это станет стандартом, мы наконец-то получим доступ к надежным загружаемым шрифтам в сети, что, наконец, положит начало веб-типографии.