Описание HTML, его преимуществ и особенностей. Описание html

Описание HTML, его преимуществ и особенностей

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

А языком разметки он зовется потому, что в его прямые функции входит размещение элементов на странице. Как вы понимаете из всего вышесказанного, основное предназначение HTML состоит в разработке статических веб-страниц.

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

И отчасти это связано с тем, что язык гипертекстовой разметки очень просто осваивается и вникнуть в его основы может даже школьник за весьма непродолжительное время.

HTML считается самым демократичным языком, так как он оптимальным образом поддерживается и интерпретируется Интернет-проводниками.

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

Кроме того, HTML никогда не стоит на месте в плане развития, без конца появляются новые версии, которую позволяют оптимизировать и облегчить работу, улучшая при этом общую картину конечного результата. Последняя версия HTML – это HTML 5.

Описание HTML

Если рассматривать эту версию в отдельности, то можно выявить следующие плюсы: она стала более гармоничной в плане SEO-продвижения, так что теперь и код вы сможете оптимально сопоставить с поисковыми алгоритмами.

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

Если вас интересует вопрос о том, каким образом работать с HTML и как начать обучение, то ответ прост: возьмите любой обучающий материал и позанимайтесь над ним несколько часов. Вы увидите, что все и в самом деле довольно просто.

Для написания страниц на языке гипертекстовой разметки HTML вам достаточно лишь открыть «Блокнот» (имеющийся в рабочем арсенале Windows). Но для большего удобства рекомендуется NotePad++ или же более профессиональный редактор Dreamweaver. Они удобны тем, что адаптированы для работы с HTML и удобным образом производят выделение тегов и атрибутов...

-----

Понравилась статья? Пожалуйста, поделитесь с друзьями. Спасибо :)

mywebblog.ru

Список HTML тегов на одной странице. Справочник по тегам HTML5

Тег Краткое описание

<!--...-->	Комментарий. Подробнее
<!DOCTYPE>	Определяет тип документа. Подробнее
<a>	Ссылка, гиперссылка, якорь. Подробнее
<abbr>	Определяет текст как аббревиатуру. Подробнее
<address>	Контактная информация автора или владельца документа. Подробнее
<area>	Определяет область на карте-изображении
<article>	Статья
<aside>	Контент в стороне (содержимое не является основным на странице по смыслу)
<audio>	Позволяет вставить воспроизводимый аудио файл. Подробнее
<b>	Полужирный текст. Подробнее
<base>	Задает базовый URL или аттрибут target для относительных ссылок в документе. Подробнее
<bdi>	Область, где написание текста может имееть другое направления. Подробнее
<bdo>	Устанавливает направление написания текста. В отличии от <bdi> направление указывается физическое направление Подробнее
<blockquote>	Цитата. Подробнее
<body>	Указывает область body документа. Подробнее
<br>	Перенос строки. Подробнее
<button>	Кликабельная кнопка
<canvas>	Используется для рисовании графики с помощью скриптов
<caption>	Подпись таблицы. Подробнее
<cite>	Сноска на название материала. Подробнее
<code>	Используется для вставки компьютерного кода в текстовом виде. Подробнее
<col>	Задает характеристики колонок в таблице. Подробнее
<colgroup>	Определяет группу из одной или более колонок таблицы для форматирования. Подробнее
<datalist>	Используется для определения предопределенных вариантов на выбор при вводе в текстовом поле
<dd>	Определяет описание термина из тега <dt> в списке терминов <dl>
<del>	Текст, который удален в новой версии документа. Подробнее
<details>	Определяет дополнительную информацию, которую пользователь может просмотреть или скрыть
<dfn>	Указывает, что содержимое является термином. Подробнее
<dialog>	Определяет диалоговое окно или интерактивный элемент
<div>	Блочный элемент - один из основных элементов верстки. Подробнее
<dl>	Определяет список определений
<dt>	Название термина в списке определений <dl>
<em>	выделенный по смыслу текст (обычно, текст выделенный курсивом). Подробнее
<embed>	Контейнер для внешнего приложения
<fieldset>	Группа связанных элементов в форме
<figcaption>	Заголовок для <figure> элемента
<figure>	Определяет автономную группу из нескольких элементов (например картинка с подписью)
<footer>	Нижний колонтитул
<form>	Определяет форму пользовательского ввода
<h2> - <h6>	Заголовки HTML разного уровня: <h2>, <h3>, <h4>, <h5>, <h5>, <h6>. Подробнее
<head>	Указывает область head документа. Подробнее
<header>	Блок заголовка
<hr>	Горизонтальная линия - тематический разделитель. Подробнее
<html>	Корневой элемент. Сообщает браузеру, что данный документ является HTML документом. Подробнее
<i>	Выделяет текст курсивом. Подробнее
<iframe>	Определяет встроенный фрейм
<img>	Изображение, картинка. Подробнее
<input>	Поле для ввода
<ins>	Текст, который был добавлен в новой версии документа. Подробнее
<kbd>	Текст введенный с клавиатуры или названия кнопок клавиатуры. Обычно выделен моноширинным шрифтом. Подробнее
<label>	Метка для поля ввода. Указывает на привязку элемента (обычно текста) к полю ввода.
<legend>	Заголовок элементов <fieldset>
<li>	Элемент списка
<link>	Определяет привязку внешнего ресурса (чаще всего, привязку таблицы стилей CSS)
<main>	Основной контент
<map>	Контейнер для <area>. Определяет пользовательскую карту на изображении
<mark>	Выделенный текст (обычно с помощью подсветки фона). Подробнее
<menu>	Контейнер для списка пунктов меню
<menuitem>	Определяет элементы, которые пользователь может вызвать из контекстного меню
<meta>	Используется для определения мета-данных документа. Подробнее
<meter>	Измеритель значений в заданном диапазоне
<nav>	Контейнер для навигационных элементов
<noscript>	Альтернативный контент для пользователей, отключивших скрипты
<object>	Определяет встроенный объект
<ol>	Определяет нумерованный список
<optgroup>	Определяет группу связанных вариантов в выпадающем списке. Дает название группу
<option>	Параметр (вариант выбора) в выпадающем списке
<output>	Результат вычислений
<p>	Абзац. Подробнее
<param>	Задает параметры для встроенных объектов
<picture>	Контейнер для нескольких изображений
<pre>	Предварительно отформатированный текст. Подробнее
<progress>	Индикатор выполнения (прогресса)
<q>	Цитата в тексте. Подробнее
<rp>	Альтернативный текст, если браузер не поддерживает тег <ruby>. Подробнее
<rt>	Аннотация к содержимому тега <ruby>. Подробнее
<ruby>	Контейнер для символов и их расшифровки (в основном для Восточно-азиатских символов, иероглифов). Подробнее
<s>	Перечеркнутый текст. Подробнее
<samp>	Текст, являющийся результатом выполнения компьютерной программы (обычно выводится моноширинным шрифтом). Подробнее
<script>	Определяет скрипт или подключение скрипта из внешнего ресурса. Подробнее
<section>	Раздел
<select>	Определяет выпадающий список
<small>	Текст шрифтом меньшего размера. Подробнее
<source>	Определяет ресурс для тегов <video>, <audio> и <picture>. Подробнее
<span>	Строчный элемент. Подробнее
<strong>	Текст, выделенный по значению. Обычно отображается полужирным. Подробнее
<style>	Определяет контейнер для определения стилей документа
<sub>	Отображает текст в виде нижнего индекса. Подробнее
<summary>	Заголовок внутри тега <details>
<sup>	Отображает текст в виде верхнего индекса. Подробнее
<table>	Определяет таблицу. Подробнее
<tbody>	Определяет область контента в таблице. Подробнее
<td>	Ячейка в таблице <table>. Подробнее
<textarea>	Многострочное поле для ввода
<tfoot>	Определяет группу строк в нижней части таблицы <table> - нижний колонтитул. Подробнее
<th>	Ячейка - заголовок в таблице <table>. Подробнее
<thead>	Определяет группу строк в верхней части таблицы <table> - верхний колонтитул. Подробнее
<time>	Дата и/или время
<title>	Заголовок HTML документа. Подробнее
<tr>	Определяет строку в таблице. Подробнее
<track>	Определяет текстовую дорожку для тегов <video> и <audio>
<ul>	Определяет маркированный список
<var>	Используется для обозначения содержимого тега как переменной. Подробнее
<video>	Позволяет вставить воспроизводимое видео. Подробнее
<wbr>	Место, где допускается перенос строки. Подробнее

guruweba.com

Структура HTML-документа: основные теги, пример

HTML – это язык разметки сайта. Многие считают его программированием, но это не так. В HTML нет никаких переменных, вычислений, массивов и других элементов, присутствующих в любом языке программирования.

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

Создание html-документа

Создать простую страничку сайта можно в любом редакторе. Подойдет даже "Блокнот". Для начинающего разработчика рекомендуется использовать другие редакторы, у которых есть функции автоподстановки и другие подсказки. Благодаря этому можно создавать готовые таблицы, ссылки, изображения и другие элементы. А в "Блокноте" каждую букву приходится писать вручную.

Как правило, "Блокнот" используют только в тех случаях, когда под рукой нет других инструментов. Сначала создается текстовый документ, а потом сохраняется в формате html. Все страницы сайта должны быть с расширением html.

Язык html является иерархичным. То есть существует специальная структура html-документа. Что это такое? Рассмотрим ниже для наглядности.

Структура html-документа. Пример

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

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

Структура html-документа - основные теги:

Из этих трех тегов состоит каркас всего сайта. Обратите внимание на рисунок. Все эти теги имеют закрывающийся тег со знаком “/”. Если вы пишете от руки, привыкайте ставить сразу оба тега – открывающий и закрывающий.

Выше было сказано, что страницы сайтов имеют расширение .html. То есть если вы создадите текстовый документ, но при этом напишете правильный код, браузер всё равно отобразит вам просто текст. Никакого преобразования кода не будет.

Раздел head

На рисунке под пунктом 3 указан раздел head. В этом разделе указывается служебная информация. Например, можно указать кодировку (пункт 4) и заголовок страницы (пункт 5).

Заголовок должен быть всегда. Без него ни один поисковик не сможет определить название контента (текста) на веб-странице. А это плохо для продвижения сайта. Более того, в браузере наверху не будет указан заголовок страницы. Это неудобство для пользователя.

Структура html-документа такова, что заголовок <title> указывается только в разделе head. Если тег <title> указать в разделе body или после него, то обработчик на него не обратит внимания.

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

Подключение стилей

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

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

Подключается файл следующим образом.

В атрибуте href указывается путь до файла. Если в пути будет ошибка, то стили не загрузятся. Также обязателен атрибут type, который указывает, что это файл css.

Другим вариантом является определение стилей прямо в разделе head.

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

Если создаваемый класс будет использоваться только на одной странице, тогда этот вариант вам подходит.

Подключение скриптов

Скрипты подключаются следующим образом.

Здесь обязательны два атрибута: type и src. В первом указываем, что это файл Javascript, а второй – где расположен файл. Если вы допустите опечатку, то ничего работать не будет.

Раздел body

Структура html-документа такова, что размещать содержание, которое будет видно пользователю, нужно только в разделе body. Название тега говорит само за себя.

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

Рассмотрим самые основные теги, которые можно использовать в области body. Основных не так много. Все остальные вы будете узнавать по мере роста ваших знаний и практики.

Основные теги

Структура html-документа требует обязательного порядка написания элементов. Теги всегда должны по краям обрамляться скобками <>. Без этого браузер не поймет, что это тег. После открывающейся скобки всегда следует имя элемента (тега). Если вы допустите пробел между < и именем, то браузер посчитает это текстом.

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

Порядок атрибутов не имеет значения. Но их написание (оформление) очень важно. Всегда сначала идет имя атрибута, потом знак равенства, затем в кавычках пишется значение атрибута. Значение может быть разным – цифровое или текстовое.

Атрибут src во всех тегах указывает путь файла, который нужно подгружать. Атрибут alt во всех элементах указывает короткое описание. В данном случае загружается фотография bird.jpg с описанием – фотография птицы.

Кроме этого, в теге img, можно было указать размеры, только ширину или высоту, заголовок, выравнивание, класс стиля или рамку.

Рассмотрим другие основные теги, которые указываются в разделе body.

Тег	Назначение
<a>…</a>	Ссылки
<img>	Изображения
<p>…</p>	Абзац
<br>	Перенос текста на новую строку
<strong>…</strong>	Жирный текст
<i>…</i>	курсив
<s>…</s>	Перечеркнутый текст
<u>…</u>	Подчеркнутый текст
<ol></ol>, <ul></ul>	Списки
<table></table>	Таблицы

Как всё это можно представить в голове

Начинающие разработчики не всегда сразу могут представить всё это умозрительно. Посмотрите несколько примеров структуры веб-страниц, и тогда вам точно станет понятно.

Имеет место быть такой вариант:

И такой:

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

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

Например, можно указать стиль для заголовка. Тогда вам нужно написать h2 (поскольку стиль будет для заголовка второго уровня), открыть скобки и писать, какие свойства будут в этом элементе. Если вы знаете базовый английский, то проблем быть не должно. Все свойства названы человеческим языком.

Если хотите указать этот стиль сразу для нескольких элементов, то напишите их через запятую.

Результатом будет красный заголовок.

Вышеуказанные способы подходят для оформления стандартных элементов. Но также можно создавать и свои классы. Их название должно начинаться с точки, затем пишется любое произвольное имя.

Использовать их нужно вот так.

Обратите внимание: если вы указали настройки стилей для стандартного элемента, не нужно в дальнейшем писать слово class. Стиль будет применяться по умолчанию. В атрибуте class можно указать только те стили, которые у вас начинаются с точки.

fb.ru

Описание языка HTML — МегаЛекции

HTML (от англ. HyperText Markup Language — «язык разметки гипертекста») стандартный язык разметки документов в Интернете. Он был разработан британским учёным Тимом Бернерсом-Ли в 1989-1991 годах и создавался как язык обмена научной и технической документацией.

Гипертекстовые документы (HTML-страницы) интерпретируются браузером клиента в удобное для них представление, которое позволяет просматривать различного вида информацию (текст, графика). С помощью средств форматирования HTML можно составить сложную иерархическую структуру из HTML-страниц.

HTML – теговый язык разметки. Любой документ на этом языке представляет собой набор элементов, причем начало и конец каждого элемента обозначается тегами – специальными пометками. Элементы могут быть пустыми, вложенными и иметь атрибуты, определяющие какие-либо их свойства. Кроме элементов в HTML-документах есть сущности – специальные символы, начинающиеся с амперсанта.

Одним из принципов языка HTML является многоуровневое вложение элементов. Самым внешним элементом является <HTML> </HTML>, так как между его начальным и конечным тегами должна находится вся web-страница. Текст документа состоит из элементов: заголовок и тело, которые выделяются соответствующими тэгами: <head> и <body>. В заголовке содержится служебная информация, не показываемая на странице – например, ключевые слова для поисковых машин или подключаются скрипты. Размещение информации в заголовке желательно, но не обязательно. Внутри <head> и </head> расположены тэги <title></title>, обозначающие заголовок браузера. Тело – это часть, в которую помещается содержимое документа. Она включает предназначенный для отображения текст и тэги, которые используются браузером. Тэги содержат информацию о способе отображения текста. С помощью тэгов, кроме этого создаются ссылки на файлы, содержащие дополнительные данные, и обозначают точки привязки, посредством которых документы связываются с другими документами.

Для перехода от одного документа к другому используются гиперссылки. Гиперссылка – это фрагмент текста или изображение, которое является указателем на другой документ или объект. Связывание страниц осуществляется при помощи разметки HTML. С помощью тега <a> создается ссылка, которая указывает на какой-либо адрес в сети, который задаётся внутри тега. Эти адреса называются универсальными указателями ресурсов (URL).

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

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

Описание языка PHP

PHP (Hypertext Preprocessor, первоначально Personal Home Pages – означает «Препроцессор Гипертекста») – это широко используемый язык сценариев общего назначения с открытым исходным кодом. Это язык программирования, специально разработанный для написания web-приложений (сценариев), исполняющихся на web-сервере.

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

Благодаря этому языку появляется возможность легко создавать динамические сайты. Файлы, созданные таким образом, хранятся и обрабатываются на сервере. Когда посетитель запрашивает документ с РНР, скрипт обрабатывается не браузером посетителя, как, например, JavaScript, а сервером, и посетителю передаются только результаты работы. Точно так же работает CGI – программа, написанная на С или Perl. Но в отличие от CGI код PHP-программы можно встраивать в любое место HTML-страницы, что является основным преимуществом.

Синтаксис PHP подобен синтаксису языка Си. Некоторые элементы, такие как ассоциативные массивы и цикл foreach, заимствованы из Perl. PHP можно разделить на язык и библиотеку функций. Существует большое количество инструментальных средств для РНР, интерфейсы ко всем популярным СУБД (системам управления базами данных), почтовым протоколам, разделяемой памяти, графическим файлам, архивам и множество других инструментов.

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

Ещё одно преимущество делает PHP особенно популярным - он распространяется бесплатно. Причем, с открытыми исходными кодами (Open Source). На PHP написано огромное количество сценариев различной сложности и ориентации, которые в основном, также распространяются бесплатно.

Основным недостатком РНР, является то, что по своей идеологии РНР изначально был ориентирован на написание небольших скриптов. Несмотря на то, что ядро несколько раз переписывалось, РНР не пригоден для использования в сложных проектах – при исполнении больших скриптов производительность системы резко падает.

К тому же, РНР является псевдокомпилируемым языком и вследствие этого не может сравниться по скорости с компилируемым С. Однако при написании небольших программ, когда весь проект состоит из многих небольших страниц с кодом, вступают в силу накладные расходы на загрузку в память и вызов CGI-программы, написанной на С.

Описание языка CSS

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) – формальный язык описания и оформления внешнего вида документа, появившийся в следствии развития HTML.

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

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

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

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

Рекомендуемые страницы:

Структура HTML-кода | htmlbook.ru

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

Пример 4.1. Исходный код веб-страницы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Пример веб-страницы</title> </head> <body> <h2>Заголовок</h2>  <p>Первый абзац.</p> <p>Второй абзац.</p> </body> </html>

Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под именем example41.html. После этого запустите браузер и откройте файл через пункт меню . В диалоговом окне выбора документа укажите файл example41.html. В браузере откроется веб-страница, показанная на рис. 4.1.

Рис. 4.1. Результат выполнения примера

Далее разберем отдельные строки нашего кода.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.

Существует несколько видов <!DOCTYPE>, они различаются в зависимости от версии HTML, на которую ориентированы. В табл. 4.1. приведены основные типы документов с их описанием.

Табл. 4.1. Допустимые DTD DOCTYPE Описание

HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">	Строгий синтаксис HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">	Переходный синтаксис HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">	В HTML-документе применяются фреймы.
HTML 5
<!DOCTYPE html>	В этой версии HTML только один доктайп.
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">	Строгий синтаксис XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">	Переходный синтаксис XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">	Документ написан на XHTML и содержит фреймы.
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">	Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Как видите, никакого деления на виды это определение не имеет, поскольку синтаксис один и подчиняется четким правилам.

Разница между строгим и переходным описанием документа состоит в различном подходе к написанию кода документа. Строгий HTML требует жесткого соблюдения спецификации HTML и не прощает ошибок. Переходный HTML более «спокойно» относится к некоторым огрехам кода, поэтому этот тип в определенных случаях использовать предпочтительнее.

Например, в строгом HTML и XHTML непременно требуется наличие тега <title>, а в переходном HTML его можно опустить и не указывать. При этом помним, что браузер в любом случае покажет документ, независимо от того, соответствует он синтаксису или нет. Подобная проверка осуществляется при помощи валидатора и предназначена в первую очередь для разработчиков, чтобы отслеживать ошибки в документе.

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

Часто можно встретить код HTML вообще без использования <!DOCTYPE>, веб-страница в подобном случае все равно будет показана. Тем не менее, может получиться, что один и тот же документ отображается в браузере по-разному при использовании <!DOCTYPE> и без него. Кроме того, браузеры могут по-своему показывать такие документы, в итоге страница «рассыплется», т.е. будет отображаться совсем не так, как это требуется разработчику. Чтобы не произошло подобных ситуаций, всегда добавляйте <!DOCTYPE> в начало документа.

<html>

Тег <html> определяет начало HTML-файла, внутри него хранится заголовок (<head>) и тело документа (<body>).

<head>

Заголовок документа, как еще называют блок <head>, может содержать текст и теги, но содержимое этого раздела не показывается напрямую на странице, за исключением контейнера <title>.

Тег <meta> является универсальным и добавляет целый класс возможностей, в частности, с помощью метатегов, как обобщенно называют этот тег, можно изменять кодировку страницы, добавлять ключевые слова, описание документа и многое другое. Чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.

<title>Пример веб-страницы</title>

Тег <title> определяет заголовок веб-страницы, это один из важных элементов предназначенный для решения множества задач. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера (рис. 4.2).

Рис. 4.2. Вид заголовка в браузере

Тег <title> является обязательным и должен непременно присутствовать в коде документа.

</head>

Обязательно следует добавлять закрывающий тег </head>, чтобы показать, что блок заголовка документа завершен.

<body>

Тело документа <body> предназначено для размещения тегов и содержательной части веб-страницы.

<h2>Заголовок</h2>

HTML предлагает шесть текстовых заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег <h2> представляет собой наиболее важный заголовок первого уровня, а тег <h6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги <h2>...<h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.

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

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

<p>Первый абзац.</p>

Тег <p> определяет абзац (параграф) текста. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.

<p>Второй абзац.</p>

Тег <p> является блочным элементом, поэтому текст всегда начинается с новой строки, абзацы идущие друг за другом разделяются между собой отбивкой (так называется пустое пространство между ними). Это хорошо видно на рис. 4.1.

</body>

Следует добавить закрывающий тег </body>, чтобы показать, что тело документа завершено.

</html>

Последним элементом в коде всегда идет закрывающий тег </html>.

htmlbook.ru

Описание HTML, DHTML, CSS, WML,...

У Вас в браузере заблокирован JavaScript. Разрешите JavaScript для работы сайта!

Что такое HTML

HTML (HyperТext Markup Language) – язык гипертекстовой разметки для создания Web-страниц.

<!DOCTYPE>

<!DOCTYPE> указывает стандарт HTML, в соответствии с которым написана Web-страница.

Мета теги. Информация в заголовке <head>

Контейнер <head> содержит информацию для браузеров и поисковых систем. Внутри контейнера <head> могут размещаться теги <base>, <index>, <link>, <meta>, <script>, <style>, <title>.

Тег <base>

Тег <base> задает базовый адрес (URL) для гипертекстовых ссылок документа, заданных в относительной форме. Кроме того, <base> позволяет способ открытия ссылок по умолчанию.

Текст в html

Основные теги форматирования и верстки текста.

HTML списки

Список – это взаимосвязанный набор отдельных фраз или предложений, которые начинаются с маркера или цифры.

Ссылки

Ссылки – основа гипертекстовых документов, они позволяют переходить с одной Web-страницы на другую, а также на определенное место внутри Web-страницы.

Картинки на сайте

Для вставки картинки на Web-страницу используется одиночный тег <img> с обязательным атрибутом src, указывающим адрес графического файла.

Таблицы

Основные html-теги таблиц.

Фреймы

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

Формы

Формы – поля, переключатели и кнопки для ввода информации посетителем Web-страницы.

DHTML

Динамический HTML (DHTML)– набор средств, которые позволяют создавать более интерактивные Web-страницы без увеличения загрузки сервера.

Музыка и звуки на HTML-странице

Карты изображений

Карта изображений позволяет привязывать ссылки к определенным областям картинки.

Графика в HTML5

Масштабируемая векторная графика SVG (Scalable Vector Graphics) – это язык разметки для описания двухмерных графических приложений и изображений.

WML

WML - язык разметки для мобильных телефонов.

SSI .shtml

SSI (Server-Side Includes) – включение кода на стороне сервера.

Таблица цветов RGB

Цветовая модель RGB является основной для компьютерного дизайна.

Правильное сочетание цветов

Правильное сочетание цветов – важная часть работы дизайнера.

Таблица «безопасных» цветов

Таблица «безопасных» цветов – палитра цветов, рекомендуемых для экранного дизайна.

Таблица символов

Таблица кодов для ввода специальных символов, которые отсутствуют на клавиатуре.

Примеры HTML, CSS

Подборка примеров html-кода и стилевых (CSS) решений.

Alt-коды

Alt-коды – сочетание клавиши Alt и десятичного числа. Используются для ввода символов, которых нет на клавиатуре.

htmlweb.ru

HTML meta: keywords, description | Указание кодировки

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

<head> <meta charset="utf-8"> <title>Не является мета тегом, но должен присутствовать на каждой веб-странице</title> <meta name="keywords" content="ключевые слова"> <meta name="description" content="Краткое описание"> </head>

В нашем примере мы использовали три элемента <meta>: первый указывает браузеру кодировку HTML-документа, два других мета тега предназначены для предоставления информации о содержимом веб-страницы для поисковых систем. Далее мы рассмотрим каждый из них подробнее.

Примечание: теги <meta> должны располагаться в элементе <head>.

Кодировка

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

Для указания кодировки используется тег <meta> с атрибутом charset, который рекомендуется располагать в качестве первого элемента внутри <head>:

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

keywords (ключевые слова)

У любого сайта есть набор ключевых слов и словосочетаний, по которым поисковые системы ищут нужные ресурсы в сети. Именно эти слова и должны составлять содержимое keywords.

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

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

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

description (краткое описание)

Значение description используется для краткого описания содержимого, расположенного на текущей странице. Рекомендуемая максимальная длина такого описания не должна превышать 180 символов:

Краткое описание страницы может быть использовано поисковыми система на странице с результатами поиска под названием страницы и URL-адреса:

Также краткое описание используется на сайтах некоторых соцсетей, при добавлении ссылки:

При составлении краткого описания следует учитывать следующие моменты:

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

Примечание: краткое описание, расположенное под ссылкой на странице с результатами поиска, называется сниппетом.

Тег <title>

Тег <title> является частью метаданных и используется для указания заголовка страницы. Заголовок страницы можно сравнить с названием главы книги, так как он должен говорить пользователям и поисковым системам об информации представленной на странице.

Заголовок должен содержать важные ключевые слова для того, чтобы поисковые системы могли включить вашу страницу в результаты поиска по определенным запросам. Также он может помочь пользователям решить, стоит ли посетить ваш сайт или нет, так как они будут видеть заголовок в качестве текста ссылки в результатах поиска:

Тег <title> является одним из наиболее важных тегов на странице. Рассмотрим небольшой список рекомендаций, которых нужно придерживаться для написания оптимизированного заголовка для поисковых систем:

Длина заголовка не должна превышать 70 символов, включая пробелы.
Самые важные ключевые слова нужно располагать первыми в заголовке, т.е. поисковые системы будут определять ценность ключевых слов по их очередности в заголовке: первое будет считаться наиболее важным, последнее - наименее.
Для разделения ключевых слов или фраз лучше использовать вертикальную черту "|". Знаки пунктуации, подчеркивания и другие символы разделители желательно не использовать или использовать в тех случаях, когда ключевое слово или фразу без них написать нельзя.
Старайтесь исключить из заголовка разные частицы речи (например: и, если, но, потом и т.д.).
Можно включить в заголовок название сайта или фирмы, если название является частью ключей фразы, или если это бренд, видя который, пользователи будут заходить именно на ваш сайт.
Не дублируйте текст тега <title>, заголовок должен быть уникальным для каждой страницы сайта.
Заголовок должен быть актуален для страницы, он должен описывать то, что в данный момент представлено на странице, например его можно написать так:

<title>Тема страницы|Ключевые слова|Название компании или сайта</title>  <title>Ключевые слова|О нас|Название компании или сайта</title>

puzzleweb.ru