Заработок в сети Интернет. Как заработать на дому в Интернете. Удаленная работа в сети.

Заработок на разработке сайтов, фриланс, своя страничка в интернете, заработать в Интернете на написании сайтов, веб мастер, вебмастер, веб программист, вебпрограммист.

Заработок в Интернет.
Удаленная работа на дому.
Все о надомной работе.

Описание html – Основы HTML

Добавлено автор alexxlab

Описание 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-документ.

Формы (FORM)

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

  • Примеры шаблонов для html5 form input pattern
  • Общие атрибуты тегов: accesskey, class, contenteditable, contextmenu, data-*, dir, draggable, hidden, id, lang, spellcheck, style, tabindex, title
  • <form>, <button>, <datalist>, <fieldset>, <input>
  • События
  • button, checkbox, file, hidden, number, password, radio, range, reset, submit, text
  • <keygen>, <label>, <legend>, <meter>, <optgroup>, <option>, <output>, <progress>, <select>, <textarea>

DHTML

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

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

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

Видео на HTML-странице

Для вставки видео на Web-страницу можно использовать тег <video> или выложить видеофайл на YouTube и указать путь к нему в атрибуте src тега <iframe>.

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

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

SVG карты

Интерактивная карта (SVG Map) так же, как и карта изображений (Image Map), позволяет привязывать ссылки и события к определенным областям картинки. Работать с ней проще, чем с Image Map.

Графика в 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-страницы для сайта, пример по стандарту HTML5

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

Шаблон «скелета» HTML-страницы

Приведем исходный HTML-код с некоторыми дополнительными вставками для дальнейшей визуализации с помощью CSS и JS:

<!DOCTYPE HTML>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>Название страницы</title>
    <meta name="description" content="Описание страницы" />
    
    <link rel="stylesheet" type="text/css" href="/assets/css/style.css" />
    <link rel="icon" href="/img/favicon.png">
    <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
    
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
    <header>
      Шапка
      <nav>
        Навигация
      </nav>
    </header>

    <main>
      <section>
        <h2>Заголовок страницы</h2>
        Основная часть
      </section>
    </main>

    <aside>
      Боковая колонка (сайдбар)
    </aside>

    <footer>
      Подвал
    </footer>
  </body>
</html>

В полученном шаблоне наш «скелет», при условии что файл стилей (style.css) составлен верно, преобразуется в страницу такого типа:

Шаблон HTML-страницы

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

Разберем основные теги и атрибуты, примененные в примере:

  • <!DOCTYPE HTML> – указание браузеру, как интерпретировать данную страницу, к какой версии принадлежит HTML-документ. В нашем случае подразумевается стандарт HTML5.
  • <html lang=”ru”> – контейнер для всего содержимого страницы с указанием принадлежности сайта к конкретному языку.
  • <head> – технический контейнер, направленный на составление информации о странице, подключения стилей и скриптов.
    • <meta charset=”UTF-8″> – кодировка сайта.
    • <title> – название страницы. Придерживайтесь правильного заполнения тега Title.
    • <meta name=”description” content=”” /> – мета-описание документа. Опять же, существуют некоторые правила грамотного заполнения метаданных.
    • <link rel=”stylesheet” type=”text/css” href=”” /> – подключение файла каскадных таблиц стилей (CSS) для стилизации и оформления элементов.
    • <link rel=”icon” href=””> – иконка сайта, отображаемая в браузере.
    • <script type=”text/javascript” src=””> – подключение внешней библиотеки JQuery последней версии.
    • <!–[if lt IE 9]><script src=””> – условие, при котором посетитель, зашедший с браузера Internet Explorer 9, получит поддержку новым тегам, описанным в HTML5.
  • <body> – тело документа, включающее теги, атрибуты, текст и изображения. Отображается в браузере.
    • <header> – шапка сайта.
    • <nav> – навигация по ресурсу непосредственно в шапке. Может быть также использован как в aside, так и в footer.
    • <main> – основной контент документа.
    • <section> – секция для одного типа содержания. Допустимо наличие несколько одноименных тегов.
    • <h2> – заголовок страницы.
    • <aside> – боковая колонка, также именуемая как «сайдбар».
    • <footer> – подвал сайта.

Старайтесь верстать «чистый» код, без дополнительного мусора. Спасибо за внимание.

Тег Описание
!, A
<!—…—> Добавляет комментарий в код документа
<!DOCTYPE>  Предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа)
<a> Предназначен для создания ссылок
<abbr> Указывает, что текст является аббревиатурой
<acronym> Указывает, что текст является акронимом
<address> Предназначен для хранения контактной информации автора
<applet> Используется для вставки на страницу апплетов — небольших программ на языке Java
<area> Определяет активные области изображения, которые являются ссылками
<article> Задаёт содержание сайта вроде новости, статьи, записи блога, форума и др.
<aside> Представляет собой раздел, который имеет косвенное отношение к содержимому страницы
<audio> Добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице
B
<b> Устанавливает жирное начертание шрифта
<base> Определяет адрес или способ открытия всех ссылок странице по умолчанию
<basefont>
Задаёт шрифт, размер и цвет текста по умолчанию
<bdi> Указывает фрагмент текста, который должен быть изолирован от изменения направления вывода текста
<bdo> Устанавливает направление вывода текста: слева направо или справа налево
<bgsound> Определяет музыкальный файл, который будет проигрываться на веб-странице
<big> Увеличивает размер шрифта на единицу по сравнению с обычным текстом
<blockquote> Предназначен для выделения длинных цитат внутри документа
<body> Предназначен для хранения содержимого веб-страницы, отображаемого в окне браузера
<blink> Устанавливает мигание текста
<br> Устанавливает перевод строки в том месте, где он находится
<button> Создаёт на веб-странице кнопку
C
<canvas> Создаёт область, в которой при помощи JavaScript можно рисовать и выводить изображения
<caption> Создаёт заголовок к таблице
<center>
<cite> Представляет название произведения (книги, статьи, поэмы, песни и др.)
<code> Предназначен для отображения текста программного код
<col> Задаёт ширину и другие характеристики одной или нескольких колонок таблицы
<colgroup> Группирует колонки таблицы для изменения их параметров
<command> Создаёт команду в виде переключателя, флажка или обычной кнопки
<comment> Добавляет комментарий в код документа
D
<data> Представляет содержимое в машиночитаемом виде, предназначенное для автоматизированных систем
<datalist> Создаёт список вариантов, которые можно выбирать при наборе в текстовом поле
<dd> Указывает термин в списке описаний
<del> Используется для выделения текста, который был удалён в новой версии документа
<details> спользуется для хранения информации, которую можно скрыть или показать по требованию пользователя
<dfn> Выделяет термин в документе
<dialog> Показывает диалоговое окно, в котором можно выводить сообщение или форму, например, для входа на сайт
<dir> Создаёт список, содержащий названия директорий
<div> Универсальный блочный элемент
<dl> Создаёт список описаний
<dt> Определяет термин в списке описаний
E, F
<em> Предназначен для акцентирования текста
<embed> Используется для загрузки и отображения объектов
<fieldset> Группирует элементы формы
<figcaption> Содержит описание для элемента <figure>
<figure> Используется для группирования любых элементов, например, изображений и подписей к ним
<font> Изменяет характеристики шрифта, такие как размер, цвет и гарнитура
<footer> Определяет «подвал» сайта или раздела
<form> Устанавливает форму на веб-странице
<frame> Определяет свойства отдельного фрейма, на которые делится окно браузера
<frameset> Задаёт структуру фреймов на веб-странице
H
<h2> Заголовок первого уровня
<h3> Заголовок второго уровня
<h4> Заголовок третьего уровня
<h5> Заголовок четветого уровня
<h5> Заголовок пятого уровня
<h6> Заголовок шестого уровня
<head> Предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными
<header> Определяет «шапку» сайта или раздела
<hgroup> Используется для группирования заголовков веб-страницы или раздела
<hr> Рисует горизонтальную линию
<html> Является контейнером, который заключает в себе всё содержимое веб-страницы
I
<i> Устанавливает курсивное начертание шрифта
<iframe> Создаёт встроенный фрейм на странице
<img> Отображает на веб-странице изображение
<input> Позволяет создавать разные элементы интерфейса
<ins> Предназначен для выделения текста, который был добавлен в новую версию документа
K, L
<kbd> Используется для обозначения текста, который набирается на клавиатуре или для названия клавиш
<keygen> Используется для генерации пары ключей — закрытого и открытого (для форм)
<label> Устанавливает связь между определённой меткой и элементом формы
<legend> Создаёт заголовок группы элементов формы
<li> Определяет отдельный пункт списка
<link> Устанавливает связь с внешним документом вроде файла со стилями
M
<main> Элемент main предназначен для основного содержимого документа
<map> Служит контейнером для элементов <area>, которые определяют активные области для карт-изображений
<marquee> Создаёт бегущую строку на странице
<mark> Помечает текст как выделенный
<menu> Отображает список меню
<menuitem> Задаёт команду, которую пользователь может вызывать через контекстное меню
<meta> Определяет данные, которые используются для хранения информации, предназначенной для браузеров и поисковых систем
<meter> Используется для вывода значения в некотором известном диапазоне
N
<nav> Группирует ссылки навигации по сайту
<nobr> Уведомляет браузер отображать текст без переносов
<noembed> Предназначен для отображения информации на веб-странице, если браузер не поддерживает работу с плагинами
<noindex> Запрещает поисковой системе Яндекс индексировать текст
<noframes> Содержимое элемента отображается в браузере, когда он не поддерживает фреймы и не умеет их интерпретировать
<noscript> Показывает своё содержимое, если браузер не поддерживает работу со скриптами
O
<object> Сообщает браузеру, как загружать и отображать объекты, которые исходно браузер не понимает
<ol> Устанавливает нумерованный (упорядоченный) список
<optgroup> Объединяет элементы <option> в одну группу
<option> Определяет отдельные пункты списка, создаваемого с помощью <select>
<output> Определяет область для вывода, преимущественно с помощью скриптов
P
<p> Определяет текстовый абзац
<param> Передаёт значения параметров Java-апплетам или объектам веб-страницы
<picture> Представляет собой контейнер для хранения нескольких элементов <source>, которые поддерживают элемент <img>
<plaintext> Отображает содержимое контейнера «как есть» со всеми тегами
<pre> Определяет блок предварительно форматированного текста
<progress> Используется для отображения прогресса завершённости задачи
Q, R
<q> Используется для выделения в тексте цитат
<rp> Используется для вывода текста в браузерах, которые не поддерживают элемент <ruby>
<rt> Добавляет аннотацию сверху или снизу от текста, заключенного в контейнер <ruby>
<rtc> В основном применяется в качестве описательной части или аннотации для иероглифов
<ruby> Предназначен для добавления небольшой аннотации сверху или снизу от заданного текста
S
<s> Используется для содержимого, которое уже не является точным или актуальным
<samp> Используется для отображения текста, который является результатом вывода компьютерной программы
<script> Предназначен для описания скриптов
<section> Задаёт раздел документа, может применяться для блока новостей, контактной информации, глав текста, вкладок в диалоговом окне и др.
<select> Создаёт раскрывающийся список
<small> Используется для сносок и комментариев, написанных обычно мелким текстом
<source> Вставляет медийный файл для элементов <audio>, <video> и <picture>
<spacer> Создаёт пустое пространство по вертикали или горизонтали
<span> Универсальный строчный элемент
<strike> Отображает текст как перечёркнутый
<strong> Выделяет важный текст
<style> Определяет стили элементов веб-страницы
<sub> Отображает шрифт в виде нижнего индекса
<summary> Указывает заголовок для <details>, по которому можно щёлкать для разворачивания/сворачивания информации
<sup> Отображает шрифт в виде верхнего индекса
T
<table> Создаёт таблицу
<tbody> Предназначен для хранения одной или нескольких строк таблицы
<td> Предназначен для создания одной ячейки таблицы
<template> Задаёт шаблон для фрагмента HTML, который может быть клонирован и вставлен в документ через скрипты
<textarea> Создаёт поле для многострочного текста
<tfoot> Предназначен для хранения одной или нескольких строк, которые представлены внизу таблицы
<th> Создаёт одну ячейку таблицы, которая обозначается как заголовочная
<thead> Предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы
<time> Помечает текст внутри элемента как дату, время или оба значения
<title> Определяет заголовок документа
<tr> Служит контейнером для создания строки таблицы
<track> Позволяет авторам указать текстовую дорожку для медийных элементов (<video> и <audio>)
<tt> Отображает текст моноширинным шрифтом
U, V, W, X
<u> Используется для разметки текста, который должен отличаться стилистически от обычного текста
<ul> Устанавливает маркированный (неупорядоченный) список
<var> Используется для выделения переменных из компьютерных программ
<video> Добавляет, воспроизводит и управляет настройками видеоролика на веб-странице
<wbr> Указывает браузеру место, где допускается делать перенос строки в тексте
<xmp> Отображает содержимое контейнера «как есть» и шрифтом фиксированной ширины

Встроенное содержимое
<picture></pictire> контейнер для одного <img> и ноль или больше <source> inline
<source> местоположение и тип альтернативных медиаресурсов для элементов <picture>, <video>, <audio> none
<img> html-изображенияinline
<iframe></iframe> создаёт встроенный фреймblock
<embed> встраивает внешний интерактивный контент или плагинinline-block
<object></object> контейнер для встраивания мультимедиаinline-block
<param> задаёт параметры для плагинов, встраиваемых с помощью элемента <object>none
<audio></audio> добавляет аудио-файлыinline-block
<video></video> добавляет видео-файлыinline-block
<track> субтитры для элементов <audio> и <video>none
<map></map> активные области на карте-изображенииinline
<area> гиперссылка с текстом или активная область внутри карты-изображенияinline
Семантика текста
<a></a> гиперссылкаinline
<em></em> выделяет важные фрагменты текста курсивомinline
<strong></strong> выделяет полужирным важный текстinline
<small></small> отображает текст шрифтом меньшего размераinline
<s></s> перечёркивает неактуальный текстinline
<cite></cite> источник цитированияinline
<q></q> краткая цитатаinline
<dfn></dfn> выделяет термин курсивомinline
<abbr></abbr> аббревиатура или акронимnone
<ruby></ruby> контейнер для Восточно-Азиатских символов и их расшифровкиinline
<rb></rb> обертка для аннотации inline
<rp></rp> тег для скобок вокруг символовnone
<rt></rt> расшифровка символовblock
<rtc></rtc> обертка для дополнительной аннотации inline
<data></data> связывает содержимое с машиночитаемым переводом inline
<time></time> дата / время документа или статьиinline
<code></code> фрагмент программного кодаinline
<var></var> выделяет переменные из программinline
<samp></samp> результат выполнения сценарияinline
<kbd></kbd> текст, вводимый пользователем с клавиатурыinline
<sub></sub> подстрочное написание символовinline
<sup></sup> надстрочное написание символовinline
<i></i> выделяет текст курсивом без акцентаinline
<b></b> задает полужирное начертание отрывка текста, без дополнительного акцентаinline
<u></u> выделяет отрывок текста подчёркиванием, без дополнительного акцентаinline
<mark></mark> выделяет фрагменты текста желтым фономinline
<bdi></bdi> изолирует текст, читаемый справа налевоinline
<bdo></bdo> задаёт направление написания текстаinline
<span></span> контейнер для строчных элементовinline
<br> перенос текста на новую строкуnone
<wbr> возможное место разрыва длинной строкиnone
Формы
<form></form> html-форма block
<label></label> текстовая метка для элемента <input> inline
<input> многофункциональные поля формы inline-block
<button></button> интерактивная кнопкаinline-block
<select></select> элемент управления с выбором значений из предложенных вариантов <option> inline-block
<datalist></datalist> контейнер для выпадающего списка элемента <input> с <option>-значениями none
<optgroup></optgroup> контейнер с заголовком для группы элементов <option>block
<option></option> вариант (опция) в раскрывающемся спискеblock
<textarea> многострочное поле формы inline-block
<output></output> поле для вывода результата вычисленияinline
<progress></progress> индикатор выполнения задачиinline-block
<meter></meter> индикатор измерения в заданном диапазонеinline-block
<fieldset></fieldset> группирует связанные элементы в формеblock
<legend></legend> заголовок элементов формы, сгруппированных с помощью <fieldset>block