В этом онлайн уроке рассказывается об основах создания сайтов - HTML учебник для начинающих. Это первая часть обучающего видео курса по языку разметки гипертекста. На этой странице Вы сможете бесплатно скачать архив со всеми дополнительными материалами к курсу. Здесь Вы узнаете, как работают сайты в Интернете, какие версии языка HTML являются актуальными на данный момент (html 4, 5). Установка программ, которые нам понадобятся при изучении. Перед тем как приступить к изучению тегов, мы поговорим об шести основных моментах, которые Вам необходимо знать. Первое, в чем нужно разобраться, это то, как работают сайты. Вообще, сеть Интернет, в упрощенном понимании - это множество компьютеров, соединенных между собой. Компьютеры, на которых хранятся сайты со всеми файлами и программным обеспечением, называются серверами. На одном сервере могут находиться тысячи простых сайтов. Но для крупных проектов и одного сервера бывает мало. Каждому компьютеру в сети присвоен IP адрес, состоящий из набора цифр. И для облегчения работы с ними в Интернете имеются вспомогательные инструменты, такие как DNS Видео урок «HTML учебник для начинающих. Основы создания сайта» вы можете смотреть онлайн совершенно бесплатно в любое время. Успехов! Это видео посвящено вопросу о понятии HTML тега. Здесь Вы узнаете, как создать страницу сайта и что из себя представляет её код. Создайте новый текстовый документ и скопируйте в него код шаблона, т.е. каркаса HTML страницы. Этот код Вы можете взять из дополнительных материалов. Архив со всеми дополнительными материалами приложен к первому уроку данного курса, и Вы можете его там скачать. Файл главной страницы сайта, как правило, имеет имя - index.html. Содержимое именно этого файла будет выдаваться сервером, на котором расположен сайт, в ответ на запрос браузера, если в его адресной строке не указан путь с конкретным именем файла. Сохраните текстовый документ под этим именем. Теперь давайте по подробнее разберем код шаблона нашей HTML страницы. Первая строка (doctype html public) предназначена для информирования браузера о типе документа и версии языка html, на котором он написан. В данном случае используется версия 4.01, но уже имеется и более современная - HTML 5. Кроме того существуют и расширенные версии языка гипертекстовой разметки, которые обозначаются - xhtml. В следующих строках кода шаблона используются такие теги как html, head, body, meta и title Видео урок «HTML теги. Создание страницы сайта» вы можете смотреть онлайн совершенно бесплатно. Удачи Вам! Онлайн урок «Параграф (абзац) и заголовок в HTML. Теги p, h1, h2, h3, h4, h5, h6» посвящен вопросу о том, как оформить текст в виде абзаца и заголовка. Для изучения тегов p и h нам понадобится страница с произвольным текстом, который мы сейчас будем приводить в порядок. Чтобы сделать так, чтобы часть текста была в виде абзаца, необходимо заключить его между открывающей и закрывающей частью тега p. Таким образом, мы сообщаем браузеру, где начинается каждый параграф и где он заканчивается. Оформите тегом p несколько частей текста и посмотрите на результат, открыв html файл в браузере. Как видите, все части текста, заключенные в тег p, теперь отображаются как параграфы, с новой строки. Теперь посмотрим, как сделать заголовки. Для оформления текста в виде заголовка, в HTML используются шесть тегов - h1, h2, h3, h4, h5, h6. Самый крупный шрифт будет иметь заголовок h1, а самый мелкий - h6. Т.е. чем больше цифра, тем будет меньше текст заголовка. Как правило, тег h1 используют на странице всего один раз, отмечая им самый важный текст. Попробуйте сделать из нашего текста несколько заголовков и посмотрите на результат Видео урок «Параграф (абзац) и заголовок в HTML. Теги p, h1, h2, h3, h4, h5, h6» вы можете смотреть онлайн абсолютно бесплатно. Успехов! В этом видео уроке рассказывается о том, как работать со списками в HTML. Как сделать неупорядоченный (маркированный) и упорядоченный (нумерованный) список. Для создания списков в HTML имеются специальные теги. Они бывают трех видов. Первый, с которого мы начнем изучение, это обычный упорядоченный список. Создается он при помощи тега ol, при этом каждый его элемент определяется тегом li. Этот вид списков часто называют нумерованный, т.к. напротив каждого его элемента стоит цифра или буквенное обозначение порядкового номера. Второй тип списков называется неупорядоченный и создается он тегом ul, а каждый его элемент - тегом li. Данный тип списка еще называют маркированный, т.к. каждый его элемент отмечен каким-либо маркером. Т.е. все элементы равноправны. Последний вид списков, который достаточно редко применяется на практике, называется список определений. Создается он при помощи тега dl и отличается от предыдущих тем, что для каждого элемента списка определений требуется его описание. Здесь каждый элемент обозначается тегом dt, а описание к нему - тегом dd Видео урок «Как сделать список в HTML - маркированный, нумерованный. Теги ol, ul, dl, li, dt, dd» вы можете смотреть онлайн в любое время совершенно бесплатно. Удачи Вам! Видео «Атрибуты HTML тегов» посвящено вопросу о том, что такое атрибуты и какую функцию они выполняют. Атрибуты предназначены для присвоения тегам каких-либо дополнительных свойств. Например, чтобы выровнять абзац по центру, для тега p используется атрибут выравнивания align со значением center. По такому же принципу можно изменить свойства для других тегов. Возьмем, к примеру, тег нумерованного списка ol и добавим к нему атрибут start со значением 0. В результате чего нумерация данного списка будет начинаться не с цифры один, как раньше, а с нуля. Приведем еще один пример использования атрибутов. Для тега ненумерованного списка ul добавим атрибут type со значением square. После этого, вместо круглых маркеров, которые выделяли каждый элемент списка, будут стоять квадратные. Если же вместо square подставить значение circle, то маркеры будут в виде пустого круга. Что касается атрибутов, то нужно для себя уяснить следующее. Атрибуты могут быть предназначены для конкретного тега либо для нескольких - общие атрибуты. В нашем случае, атрибут start применяется под конкретный тег ol, т.е. он не может быть использован для тега абзаца или для какого-либо другого тега Видео урок «Атрибуты HTML тегов» вы можете смотреть онлайн в любое время абсолютно бесплатно. Успехов! В этом онлайн уроке рассказывается о том, как вставить изображение в HTML документ. Вставка изображения на страницу веб-сайта осуществляется при помощи тега img. Но этого не достаточно, к тегу img обязательно нужно задать еще некоторые атрибуты. Например, src, значение которого должно соответствовать url адресу размещаемой картинки, т.е. путь с указанием имени файла изображения. В стандарте HTML 5 для тега img обязательным также является атрибут alt, в значение которого записывается текст, который будет отображаться вместо картинки в том случае, если изображение не загрузилось. Также желательно добавить атрибуты width и height, т.е. размеры картинки - соответственно ширина и высота изображения в пикселях. Важным параметром для тега img является обтекание текстом, который в HTML обозначается align. Он определяет, с какой стороны от изображения будет находиться текст. Отступы по бокам определяет атрибут hspace, а сверху и снизу - vspace. Они задаются целым числом и определяют расстояние в пикселях, от того или иного края изображения. Видео урок «Вставка изображения в HTML документ. Тег img. Атрибуты src, alt» вы можете смотреть онлайн в любое удобное время совершенно бесплатно. Успехов! Урок «Как сделать ссылку на сайт или файл в HTML. Тег a. Атрибуты href, target, title» посвящен вопросу о том, как сделать ссылку и разместить её на странице своего сайта. Это один из самых важных вопросов в HTML. Ведь он исходит из самого его определения как языка разметки гипертекста. Для того чтобы добавить ссылку, ведущую на какой-либо сайт в интернете или на скачивание определенного файла, необходимо вставить код ссылки в то место HTML документа, в котором Вы хотите её видеть. Код ссылки состоит из тега a с обязательным атрибутом href, в который и записывается адрес сайта, либо путь для скачивания файла. В тег a заключается текст, который планируется сделать ссылкой. Кроме атрибута href, тег a также может иметь параметр target, значение которого указывает на окно, где браузер будет открывать ссылку. Например, если атрибуту target присвоить значение blank, то ссылка будет открываться в новом окне. В параметре title можно задать текст, который будет высвечиваться в виде подсказки при наведении мышкой на ссылку Видео урок «Как сделать ссылку на сайт или файл в HTML. Тег a. Атрибуты href, target, title» вы можете смотреть онлайн в любое удобное время абсолютно бесплатно. Удачи Вам! В этом видео рассказывается о том, как сделать ссылку в HTML на электронную почту и на конкретный участок определенной страницы сайта - якорные ссылки. Для того, чтобы сделать якорную ссылку, необходимо в атрибут href тега a записать идентификатор того тега, к которому мы хотим переместиться. Для примера, добавим якорную ссылку в самый конец HTML страницы с текстом - Перейти к началу статьи. А в качестве значения атрибута href присвоим идентификатор header, перед которым поставим знак решётки. И такое же значение, но без решётки, зададим какому-нибудь заголовку, используя атрибут id. Таким образом, этот заголовок будет играть роль якоря, т.е. место, в которое мы попадем после нажатия на якорную ссылку. Для того, чтобы перейти на другую страницу, но в конкретное её место, то нужно в значение атрибута href записать адрес этой странички, а сразу после него поставить знак решётки и имя идентификатора элемента, с которого будет начинаться просмотр. Теперь рассмотрим, как создать ссылку на адрес электронной почты, т.е. при нажатии должна открыться почтовая программа, для отправки письма по электронной почте, причем в качестве Email получателя автоматически подставится указанный адрес. Для этого в атрибут href нужно записать ключевое слово mailto... Видео урок «HTML ссылки. Якорные, на электронную почту» вы можете смотреть онлайн абсолютно бесплатно в любое удобное время. Успехов! Здесь рассказывается о том, как сделать таблицу в HTML. Достаточно часто перед Веб-мастером ставится задача по созданию таблицы в HTML и вставки её кода на страницу сайта. Сейчас они используются в основном для вывода табличных данных, хотя не так давно на их основе верстался дизайн практически каждого сайта. Но постепенно, с развитием технологии CSS, таблицы практически перестали использоваться при создании каркаса сайта, их заменили блочные элементы, такие как div. Для создания таблицы в HTML предусмотрен тег table. Но одного тега table недостаточно, нужно еще указать, сколько в ней будет строк и столбцов. Строки создаются тегом tr, а столбцы - td. Таким образом, сначала мы задаем таблицу открывающим и закрывающим тегами table, затем внутри создаем строку тегами tr, а ячейки строки делаются с помощью тегов td. Причем для создания ячеек шапки таблицы используется тег th. Для объединения ячеек по горизонтали предназначен атрибут colspan, которому присваивается количество объединяемых ячеек, а последующие теги td или th пропускаются на это число. Для объединения ячеек по вертикали используют атрибут rowspan. Граница или рамка таблицы определяется атрибутом border Видео урок «Как сделать таблицу в HTML. Объединение ячеек, границы. Теги table, tr, td, th» вы можете смотреть онлайн абсолютно бесплатно в любое время. Успехов! Видео урок «HTML таблица. Создание отступов, выравнивание текста, размеры» посвящен вопросу о том, как управлять внешним видом таблицы. Конечно, практически все атрибуты тегов таблицы, которые мы сейчас будем изучать, уже считаются устаревшими, но знать их все равно надо. Хотя бы для того, чтобы уметь править такие таблицы и знать, за что отвечает каждый атрибут. Сейчас же для выравнивания текста в ячейках, определения размеров таблицы, всевозможных отступов, и других параметров используют возможности CSS, которые позволяют это делать более гибко и гораздо проще. Итак, рассмотрим атрибуты, при помощи которых можно изменять таблицу. За ширину таблицы отвечает атрибут width, который задается в пикселях. Для того чтобы выполнить выравнивание текста в конкретной ячейке, используется атрибут align и применяется он к тегу td или th. Чтобы выровнять текст по всем ячейкам строки, необходимо задать этот параметр для соответствующего тега tr. Если же поставить атрибут align для тега table, например, со значением center, то сама таблица станет по центру страницы сайта или в центре блока, в котором она находится. Отступы внутри ячейки задаются через cellpadding, а расстояние между ячейками - cellspacing Бесплатный видео урок «HTML таблица. Создание отступов, выравнивание текста, размеры» вы можете смотреть онлайн в любое время. Удачи Вам! В этом онлайн уроке рассказывается о том, как выполнить форматирование текста в HTML и какие теги для этого нужно использовать. После просмотра данного видео, Вы без труда справитесь с задачей по выделению всего текста или его части различными способами. Вы узнаете, как сделать жирный или курсивный текст. Несмотря на то, что оформление текста можно полностью выполнить за счет CSS, теги по форматированию текста все равно достаточно часто используются, т.к. они также выполняют функцию определения логической важности выделяемого слова или выражения, что оказывает влияние, например, при продвижении сайта в поисковых системах. Так, тег strong используется для выделения текста жирным шрифтом и для придания ему логической важности. В то время как тег b, который также делает текст жирным, не придает важности выделенному им тексту, а отмечает его как служебный текст, например им можно выделить номер текущей страницы на сайте и т.д. Теги em и i выделяют текст курсивом, причем тег i является тегом физической разметки, а тег em определяет логическую важность помеченного текста Видео урок «Форматирование текста в HTML. Жирный, курсивный. Теги strong, b, em, i» вы можете смотреть онлайн совершенно бесплатно в любое время. Успехов! Это видео посвящено вопросу о том, как в HTML создаются контактные формы или формы обратной связи для сайта. Здесь мы разберемся с созданием каркаса формы при помощи тега form и поговорим об обязательных атрибутах этого тега, а сами элементы, поля и кнопки рассмотрим по отдельности в следующих уроках. Перед тем как начать делать контактную форму, необходимо уяснить для себя несколько Важных моментов. Функция создаваемой формы будет заключаться в том, чтобы посетители Вашего сайта смогли отправлять Вам сообщения по электронной почте. Но, как известно, язык HTML - это всего лишь язык разметки, т.е. с его помощью мы можем создать необходимые элементы, такие как текстовые поля для ввода информации, кнопки и т.д. Но отправить сообщения по Email мы не сможем. Для этого используются специальные серверные языки программирования. Самый распространенный из них это язык PHP. Его мы и будем использовать для отправки сообщений. Для создания формы в HTML предназначен тег form. Здесь также необходимо задать некоторые обязательные атрибуты. Например, для указания пути к файлу PHP обработчика, нужно заполнить атрибут action Видео урок «Как создать контактную форму обратной связи для сайта в HTML. Тег form» вы можете смотреть онлайн совершенно бесплатно. Удачи Вам! Онлайн урок «Текстовые поля форм в HTML» посвящен вопросу о том, как создаются поля для ввода текста или пароля на сайте. Для начала, сделаем простое текстовое поле, которое может быть использовано для ввода имени, адреса электронной почты, либо другой короткой текстовой информации. Создать его можно при помощи тега input. Стоит отметить, что данный тег также используется при создании многих других элементов формы. Чтобы из тега input получилось именно поле для ввода текста, необходимо указать для него атрибут type со значением text. Кроме этого можно сразу указать атрибут name, для идентификации поля в дальнейшем. Перед полем можно написать текст, который будет указывать на то, для какой информации предназначено данное поле. Например, текст - Введите своё имя. Поместив этот текст и поле между открывающим и закрывающим тегами label, мы добьемся того, что при щелчке мышкой по тексту, у нас автоматически активируется поле для ввода текста и курсор переместится в него. Сделайте это и проверьте работоспособность данного механизма, открыв HTML страницу в браузере. Для указания ширины поля в символах используется атрибут size, а для ограничения количества вводимых символов - maxlength. Поле для ввода паролей отличается только атрибутом type, значение которого нужно задать - password. В этом случае все вводимые символы в поле будут скрыты, отображаясь в виде маркеров, т.е. не читаемы Видео урок «Текстовые поля форм в HTML, ввод пароля. Теги input и label» вы можете смотреть онлайн абсолютно бесплатно. Успехов! В этом видео уроке рассказывается о том, как сделать радиокнопку в HTML. Данный элемент формы обычно используется для выбора ответа на заданный вопрос из нескольких предложенных вариантов. При этом пользователь может выбрать только один из этих вариантов. Т.е. при выборе одного элемента, происходит автоматическое отключение другого. Для создания радиокнопок в HTML предусмотрен тег input, в котором атрибут type установлен в значение radio. Для него, как и для других элементов формы, необходимо задать имя в атрибуте name. Для радиокнопки также следует указать атрибут value и присвоить ему такое значение, которое будет отправлено на PHP обработчик формы в том случае, если этот элемент будет отмечен пользователем. Также следует указать вопрос, на который будет отвечать посетитель сайта и вариант ответа, соответствующий данной радиокнопке. Текст ответа и радиокнопку можно поместить в тег label, чтобы при нажатии на текст, автоматически ставился флажок на радиокнопке. Теперь следует создать вторую радиокнопку с другим ответом, при этом имя кнопки, т.е. значение атрибута name должно совпадать с именем первой радиокнопки. Таким образом, обе кнопки будут принадлежать одной группе или одному вопросу. Для активации, т.е. включения одной из радиокнопок по умолчанию, указывают атрибут checked Видео урок «Учебник HTML для начинающих. Радиокнопки (radio)» вы можете смотреть онлайн в любое время совершенно бесплатно. Удачи Вам! Видео «Основы языка HTML. Чекбоксы» посвящено вопросу о том, как сделать чекбокс в форме на сайте. Данные элементы используются для выбора одного или нескольких значений, отметив их флажками (галочками). Возможность выбрать сразу несколько элементов и есть отличие чекбоксов от радиокнопок, в которых можно выбрать только одно значение. Создаются они при помощи тега input с атрибутом type, установленным в значение checkbox. Также следует указать имя элемента через атрибут name. После чекбокса нужно написать текст, которому он будет соответствовать и все это поместить между открывающим и закрывающим тегом label. Чтобы при клике мышкой на тексте, галочка на элементе ставилась автоматически. После этого можно создать другие элементы чекбоксов со своими вариантами ответа. Имена для каждого элемента нужно указывать разные, т.к. по ним мы будем определять их отметку в обработчике формы. Для отметки, т.е. установки флажка на одном или нескольких чекбоксах по умолчанию, т.е. при загрузке страницы, необходимо создать для соответствующих тегов input атрибут checked... Видео урок «Основы языка HTML. Чекбоксы (checkbox)» вы можете смотреть онлайн в любое время абсолютно бесплатно. Успехов! В этом онлайн уроке рассказывается о том, как создать элемент выбора (select) в форме на сайте, т.е. поле со списком значений для выбора. Данный элемент также допускает возможность множественного выбора. Создается поле выбора при помощи парного тега select. Т.е. получается своего рода контейнер, в котором нужно создать элементы выбора или опции. Эти элементы создаются тегом option, внутри которого прописывается текст этой позиции. Тегу select нужно присвоить имя в атрибуте name. Для определения размера списка выбора необходимо в атрибуте size указать количество строк, т.е. пунктов, которые будут видны при выборе. Для возможности множественного выбора необходимо тегу select указать атрибут multiple. Так появится возможность выбрать несколько значений из списка с нажатой клавишей Ctrl. Также можно определить начальный показ конкретной позиции списка. Для этого нужно для соответствующего тега option поставить атрибут selected. Если для тега option установить атрибут value, указав ему какое-либо значение, то на обработчик формы отправится именно это значение, а не то, что стоит между тегами option Видео урок «Поле со списком выбора в HTML. Теги select и option» вы можете смотреть онлайн в любое удобное время совершенно бесплатно. Успехов! Урок «Текстовая область в HTML. Тег textarea» посвящен вопросу о том, как создается область для ввода текста в форме на странице сайта. Создается данный элемент при помощи парного тега textarea. В атрибуте name нужно также указать имя, по которому данный элемент будет идентифицирован в обработчике формы после отправки данных. Для текстовой области можно задать размеры, указав их в атрибутах cols и rows. Они будут соответствовать количеству колонок по вертикали и количеству рядов по горизонтали, т.е. числу строк. Для того чтобы при загрузке формы в текстовой области был какой-то текст, необходимо указать его между открывающим и закрывающим тегом textarea. При помощи тега label можно также сделать так, чтобы текстовая область активировалась при нажатии мышкой по тексту над элементом. Сделаем это через идентификатор, т.е. для тега textarea создадим и заполним атрибут id. А текст над текстовой областью поместим в тег label, указав ему атрибут for со значением идентификатора текстовой области. Сохраните HTML документ и проверьте работоспособность формы Видео урок «Текстовая область в HTML. Тег textarea» вы можете смотреть онлайн в любое удобное время абсолютно бесплатно. Удачи Вам! В этом видео рассказывается о том, как сделать кнопку для формы в HTML и добавить её код на страницу сайта. Всего существует четыре вида кнопок. Первый из них это кнопка, при нажатии на которую происходит отправка данных обработчику формы. Создается она тегом input с атрибутом type равным submit. В параметре value задается надпись, которая будет на кнопке. Второй вид, это кнопка, предназначенная для очистки всех полей формы, т.е. их сброса до начального состояния. Создается она по аналогии с предыдущей кнопкой, но атрибут type устанавливается в значение reset. Третий тип, это кнопка с картинкой, т.е. можно нарисовать красивую кнопку в фотошопе и добавить её на форму сайта вместо стандартной кнопки. Чтобы это сделать, нужно для тега input указать атрибут type со значением image и атрибут src, в который указать путь до файла с соответствующим изображением. Четвертый тип, который мы рассмотрим, это обычная кнопка, которая не относится к формам. Такие кнопки обычно используют при программировании на javascript. Для создания такой кнопки нужно тегу input указать атрибут type со значением button Видео урок «Как сделать кнопку для формы в HTML и добавить её код на сайт» вы можете смотреть онлайн абсолютно бесплатно в любое удобное время. Успехов! Здесь рассказывается о том, как выполнить декоративное объединение элементов формы в HTML. Для выделения части полей формы в отдельную область и создания ей соответствующего названия, предназначены специальные теги - fieldset и legend. С помощью тега fieldset вокруг выделяемых элементов формы создается рамка. А если в этот тег поместить тег legend с текстом названия области, то на рамке появится надпись с этим текстом. Таким образом, можно красиво оформить разделение всех элементов формы на логические группы. Посетителю Вашего сайта в этом случае будет гораздо удобнее отвечать на вопросы, заданные в форме или заполнять поля формы обратной связи. Теги fieldset и legend выполняют только декоративную функцию и не используются в других целях. Для определения размеров этих областей, например для задания ширины, используется CSS. Разумеется, при помощи CSS можно выполнить и другие изменения с оформлением, например, изменить шрифт надписи или цвет фона и т.д Видео урок «Декоративное объединение элементов формы в HTML. Теги fieldset и legend» вы можете смотреть онлайн абсолютно бесплатно в любое время. Успехов! Видео урок «Блокировка элементов формы в HTML. Атрибуты disabled и readonly» посвящен вопросу о том, как заблокировать поля формы от изменений. Очень часто, при работе с формами на сайте, возникает необходимость заблокировать тот или иной элемент от изменений в зависимости от какой-то ситуации. Например, если определенный ответ на один вопрос делает бессмысленным следующий вопрос. И поэтому, соответствующие поля было бы лучше сделать недоступными. Здесь мы рассмотрим атрибуты, которые можно применять практически ко всем тегам элементов формы. Действие их заключается в блокировке от изменений текстовых полей, кнопок, и других элементов. Первый атрибут, который мы изучим - это disabled. Если его указать для тега какого-либо элемента формы, то этот элемент становится недоступен ни для редактирования, ни для других манипуляций с ним, например нельзя выделить текст такого текстового поля. В отличие от него атрибут readonly позволяет производить только чтение, и запрещает любые изменения с элементом формы Бесплатный видео урок «Блокировка элементов формы в HTML. Атрибуты disabled и readonly» вы можете смотреть онлайн в любое время. Удачи Вам! В этом онлайн уроке рассказывается о том, как сделать PHP обработчик для HTML формы сайта и что для этого нужно. После создания внешнего вида формы на сайте, необходимо сделать так, чтобы она выполняла определенную функцию. В нашем случае, после нажатия на кнопку отправить, должно отправляться сообщение по электронной почте со всей информацией, которую ввёл пользователь в поля формы. Но одними силами HTML здесь не обойтись, т.к. это всего лишь язык разметки гипертекста. Для отправки письма по email нам понадобится серверный язык программирования PHP. Но для работы PHP необходима специальная среда, т.е. работать в браузере как HTML он не будет. А при заходе на PHP страницу браузер получает не сам код этого серверного языка, а уже обработанные сервером данные, в виде HTML кода. Для функционирования PHP требуется специальное программное обеспечение, которое имеется на соответствующих серверах хостинга, где располагаются сайты. Но для локального компьютера также имеется необходимое программное обеспечение, которое нам нужно будет установить для тестирования Видео урок «Как сделать PHP обработчик для HTML формы сайта и что для этого нужно» вы можете смотреть онлайн совершенно бесплатно в любое время. Успехов! Это видео посвящено вопросу о том, как установить на свой компьютер локальный сервер - Денвер (Apache, PHP, MySQL, Perl). Скачать последнюю версию Денвера можно бесплатно с официального сайта этого программного обеспечения. Для установки Денвера, необходимо запустить инсталляционный файл, который находится в папке с установочными файлами. После этого нужно выполнять все шаги установки, отвечая на соответствующие вопросы. После установки Денвера в указанную Вами папку, на Вашем компьютере появится еще один виртуальный диск с содержимым этой папки. Буква этого виртуального диска будет соответствовать той, которую вы указали при установке. Если в дальнейшем Вы захотите удалить Денвер, то для этого нужно всего лишь удалить папку, в которую производилась установка. Для запуска Денвера, необходимо запустить файл старта системы из папки denwer. Там также имеются фалы для остановки и перезапуска Денвера. Теперь Вы сможете создавать локальные сайты и тестировать их, выполняя точно такие же действия, как и при работе на хостинге. Для создания нового сайта в Денвере необходимо добавить папку с файлами сайта в папку home и перезапустить Denwer Видео урок «Установка локального сервера. Денвер (Apache, PHP, MySQL, Perl)» вы можете смотреть онлайн совершенно бесплатно. Удачи Вам! Онлайн урок «Отправка данных из HTML формы сайта на PHP обработчик. Методы GET и POST» посвящен вопросу о том, как происходит передача информации, введенной пользователем в поля формы сайта, на PHP обработчик. При создании формы тегом form, в атрибут action прописывается путь к PHP файлу, в котором содержится определенный алгоритм действий. Кроме того, тегу form необходимо задать атрибут method, и указать ему метод передачи данных из HTML формы в PHP обработчик. Существует два таких метода отправки данных - это GET и POST. Если атрибуту method присвоить значение GET, то данные из полей формы будут передаваться через параметры URL адреса к PHP файлу. Т.е. браузер в этом случае сформирует URL адрес с параметрами, в которых будут указаны все имена полей и их значения. Все эти данные можно будет получить в PHP обработчике через глобальный массив GET. При использовании второго метода - POST, данные передаются обработчику скрытым образом и в адресной строке их видно не будет. Обратиться к этим данным можно будет через глобальный массив POST Видео урок «Отправка данных из HTML формы сайта на PHP обработчик. Методы GET и POST» вы можете смотреть онлайн абсолютно бесплатно. Успехов! В этом видео уроке рассказывается о том, как выполняется отправка письма по электронной почте через PHP обработчик для HTML формы сайта. Для отправки писем в языке PHP имеется специальная функция - mail(). В скобках перечисляются параметры необходимые для отправки письма по Email. К таким параметрам относятся адрес электронной почты получателя, тема письма и собственно сам текст сообщения. Все эти данные, за исключением Email получателя, мы будем формировать из той информации, которую ввёл посетитель сайта в поля HTML формы. PHP функция mail после вызова, возвращает результат выполнения. Если ошибок не было и письмо было успешно отправлено, то результатом будет Истина, а если в ходе отправки произошла какая-либо ошибка, то функция возвращает Ложь. Эту информацию обычно используют для проверки отправки письма и для вывода на экран соответствующего сообщения пользователю, оправившего письмо. На локальном сервере такие письма не отправляются, а сохраняются в виде файлов, которые можно посмотреть в папке tmp - !sendmail Видео урок «Отправка письма в PHP обработчике для HTML формы сайта. Функция - mail» вы можете смотреть онлайн в любое время совершенно бесплатно. Удачи Вам! Видео «HTML теги для вставки внешних объектов - iframe и object» посвящено вопросу о том, какие теги используются в языке HTML для вставки объектов, взятых с какого-либо другого сайта. Например, это может быть код видеоролика с сайта YouTube или какого-либо другого видеохостинга. Т.е. при размещении кода такого объекта, сам файл видеоролика не будет храниться на Вашем сервере, а на странице сайта, где размещен код он будет проигрываться как обычно. Для вставки внешних объектов в языке HTML предусмотрены теги iframe и object. Тег iframe работает по принципу вставки одной HTML страницы в другую. При помощи атрибутов для тега iframe можно задать ширину и высоту окна, ширину рамки. Там же указывается URL адрес встраиваемой страницы. Object является более сложным тегом. Он уже содержит в себе дополнительные теги param с параметрами встраиваемого объекта. Вникать в тонкости мы здесь не будем, т.к. обычно подобные коды объектов предоставляются уже в сгенерированном виде. Их достаточно просто вставить в то место на своём сайте, в котором Вы хотите увидеть данный объект Видео урок «HTML теги для вставки внешних объектов - iframe и object» вы можете смотреть онлайн в любое время абсолютно бесплатно. Успехов! В этом онлайн уроке рассказывается о том, как создать блок предварительно форматированного текста в HTML. Такой блок создается при помощи тега pre. Текст, помещенный в тег pre, как правило, отображается браузерами моноширинным шрифтом. Особенность тега pre заключается в том, что текст в нем выводится со всеми поставленными между словами пробелами и со всеми переносами строк. А текст без pre выводится браузерами только с одним пробелом между словами и, кроме того, все символы переноса строк в тексте игнорируется. Т.е. если мы наберем текст в HTML коде страницы и отформатируем его. А именно, при помощи клавиши Enter сделаем переводы строк, многозначными пробелами сделаем абзацы и т.д., то такой текст будет отображаться браузером как единый массив текста. Но если поместить такой текст в тег pre, то при просмотре страницы, все будет выводиться, так как нужно. Но шрифт при этом будет необычный - моноширинный. Каждая буква в нем занимает одинаковую ширину. Тег pre используется достаточно редко, но в некоторых случаях без него бывает очень сложно обойтись Видео урок «Блок предварительно форматированного текста в HTML. Тег pre» вы можете смотреть онлайн в любое удобное время совершенно бесплатно. Успехов! Урок «Как сделать картинку ссылкой, карта изображения в HTML. Теги map, area» посвящен вопросу о том, как сделать из картинки одиночную ссылку, а также как разделить одно изображение на несколько участков и сделать их ссылками. Для создания простой ссылки для изображения, необходимо поместить тег картинки img в тег ссылки a. Чтобы ссылка открывалась в новом окне, нужно добавить к тегу a атрибут target со значением blank. Возможно и создание нескольких ссылок с одного изображения, т.е. когда щелчок мышкой по одной области картинки ведет на один сайт, а по другой области - на другой сайт или страницу. Делается это при помощи карты-изображения. Для начала нужно вставить подходящее изображение на страницу сайта при помощи тега img. Техника карты-изображения (image map) представляет собой накладывание на картинку невидимую карту с возможностью выделить на ней определенные области и сделать их разными ссылками. Реализуется это с помощью парного тега map, в котором обязательно указывается идентификатор id. Это нужно для установки связи между изображением и его картой. Внутри тега map создаются отдельные области при помощи тега area Видео урок «Как сделать картинку ссылкой, карта изображения в HTML. Теги map, area» вы можете смотреть онлайн в любое удобное время абсолютно бесплатно. Удачи Вам! В этом видео рассказывается о том, какие бывают метатеги в HTML, для чего они нужны и советы по их заполнению. Метатеги - это служебные теги, которые предназначены для того, чтобы браузеры и поисковые системы правильно понимали и отображали вашу страницу. Все метатеги записываются в верхней части HTML кода страницы в блоке head. Создаются они при помощи тега meta и отличаются за счет атрибута http-equiv либо атрибута name. Причем метатег с атрибутом http-equiv в основном предназначен для браузеров, а с атрибутом name - для поисковиков. Одним из часто встречаемых метатегов является Content-Type, в котором указывается тип документа и его кодировка. Вообще, даже если не указать этот метатег, современные браузеры обычно и так распознают кодировку сайта. Но, на всякий случай, лучше все-таки указать. Есть еще один интересный метатег - refresh, который сообщает браузеру о том, через сколько секунд нужно перезагрузить страницу и при необходимости можно указать URL адрес новой страницы, которую нужно загрузить. Таким образом, можно сделать автоматическую переадресацию с одного сайта на другой Видео урок «Советы по заполнению метатегов HTML для сайта» вы можете смотреть онлайн абсолютно бесплатно в любое удобное время. Успехов! Здесь рассказывается о том, как в HTML коде сделать комментарий. Очень часто при создании страницы сайта возникает необходимость добавить служебную информацию в виде комментария к конкретному участку HTML кода. Например, если это совместная разработка сайта, либо нужно оставить комментарий для себя, ввиду большой сложности страницы. Но как сделать так, чтобы такая информация не выводилась пользователю при просмотре странице в браузере. Выход есть. Для этих целей в языке HTML предусмотрены специальные обозначения для комментариев. Для того чтобы сделать комментарий, необходимо перед текстом поставить угловую скобку, восклицательный знак и два дефиса. А в конце текста нужно поставить два дефиса и закрывающую угловую скобку. Таким образом, любой текст, помещенный между этими символами, не будет отображаться в браузере, при просмотре страницы. Будь то однострочный текст или многострочный комментарий. Единственное где не учитывается обозначение комментария, это внутри тега title, т.е. браузер все равно покажет все содержимое этого тега Видео урок «Как в HTML коде сделать комментарий» вы можете смотреть онлайн абсолютно бесплатно в любое время. Успехов! Видео урок «XHTML - расширяемый язык разметки гипертекста» посвящен вопросу о том, что такое XHTML и особенности его использования. XHTML - это расширяемый язык разметки гипертекста, который достаточно динамично развивался какое-то время, но затем его развитие было остановлено, а команда разработчиков перешла в рабочую группу HTML5. Всего существует три типа документов XHTML: strict, transitional и frameset. Версии XHTML: 1.0, 1.1, Basic, Mobile Profile и последняя версия 2.0. XHTML является более строгим, чем HTML и имеет некоторые особенности, которые необходимо знать и соблюдать при написании страниц сайта. XHTML, в отличие от HTML, требует закрытия всех элементов, Включая те, которые не имеют закрывающего тега, например, тег br должен обязательно закрываться знаком слеша. Для изображений обязательно наличие атрибута alt. Булевы атрибуты, которые в HTML писались одним словом, т.е. без присвоения им значения, в XHTML должны писаться в развернутой форме. А именно, нужно таким атрибутам присваивать одноименные значения. Еще одним требованием XHTML является обязательное написание всех тегов и атрибутов маленькими буквами, т.е. он чувствителен к регистру Бесплатный видео урок «XHTML - расширяемый язык разметки гипертекста» вы можете смотреть онлайн в любое время. Удачи Вам! В этом онлайн уроке рассказывается о том, как проверить код HTML страницы сайта на ошибки. Валидация HTML документа это проверка синтаксиса его кода на соответствие конкретной спецификации. Сейчас в интернете существует достаточно много всевозможных онлайн сервисов для проверки страниц сайта с целью выявления ошибок, связанных с несоответствием веб стандартам. Такие ошибки могут возникнуть как по незнанию таких стандартов, так и по банальной невнимательности. Если страница HTML Вашего сайта при проверке окажется валидной, т.е. будет отвечающая всем правилам и стандартам, то в идеале, все браузеры должны отображать её без ошибок, т.е. можно будет говорить о кросс-браузерности Вашего сайта. Стремиться к этому надо, поэтому нужно периодически проверять свой сайт в специальных сервисах - Валидаторах. Один из таких онлайн сервисов является валидатор w3c. Таким образом, можно проверить свою страничку, указав её URL адрес, либо загрузив файл HTML документа через специальную форму. Видео урок «Валидация HTML документа. Проверка кода страницы сайта на ошибки» вы можете смотреть онлайн совершенно бесплатно в любое время. Успехов! Это видео посвящено вопросу о том, что собой представляют теги HTML - div и span, для чего они нужны и как с ними работать. Теги div и span являются тегами логического уровня, и сами по себе никак не проявляются. При помощи тега div создается своего рода контейнер, т.е. это блочный элемент, которому можно задать определенный набор свойств, используя CSS. Постепенно, с развитием CSS, тег div полностью заменил таблицы при верстке сайтов. Хотя, некоторое время назад, на табличной модели создавались каркасы практически всех сайтов. При помощи CSS мы можем задать огромное количество свойств тегу div и использовать его так, как нам требуется в конкретной ситуации. Для идентификации блоков div им часто присваивают атрибут id, конечно тут нужно иметь в виду, чтобы id был уникальным, т.е. нельзя на одной странице размещать несколько элементов с одним и тем же id. В этом случае нужно использовать атрибут class. Через CSS мы можем определить размеры блока - его ширину (width) и высоту (height). Можно задать рамку, отступы, определить всевозможные свойства для контента, который помещен в блок div, например, выровнять текст определенным образом во всех абзацах, расположенных в нем и т.д. Тег span отличается тем, что это не блочный элемент и предназначен для внутренней работы, например оформление части текста внутри абзаца Видео урок «HTML для начинающих. Теги div и span» вы можете смотреть онлайн совершенно бесплатно. Удачи Вам! Онлайн урок «Курс по HTML. Нужно ли знать все теги и атрибуты» посвящен вопросу о том, что необходимо изучать после освоения HTML. Несмотря на то, что в данном курсе были изучены не все существующие теги и атрибуты языка HTML, можно сказать, что основное мы все-таки изучили. Ведь на практике используются далеко не все элементы этого языка. Для создания сайтов достаточно знать только основные и самые часто используемые теги, которые мы и рассмотрели в предыдущих уроках данного курса. Главное понять логику работы с HTML, и тогда, при возникновении любых сложностей, можно будет легко с ними справиться. Следующим шагом, после изучения HTML, идет его неотъемлемая часть, которая необходима для создания любого современного сайта - это CSS. Кстати говоря, технология CSS уже давно вытеснила и продолжает вытеснять многие теги и атрибуты HTML. В основном, это касается атрибутов, связанных с внешним оформлением сайта. Т.е. сейчас принцип создания сайтов такой, что каркас сайта создается HTML тегами, а за внешний вид полностью отвечает CSS. Видео урок «Курс по HTML. Нужно ли знать все теги и атрибуты» вы можете смотреть онлайн абсолютно бесплатно. Успехов!
HTML видео учебник для начинающих.
HTML видео учебник для начинающих. Основы создания сайта
HTML теги. Создание страницы сайта
Параграф (абзац) и заголовок в HTML. Теги p, h1, h2, h3, h4, h5, h6
Как сделать список в HTML - маркированный, нумерованный. Теги ol, ul, dl, li, dt, dd
Атрибуты HTML тегов
Вставка изображения в HTML документ. Тег img. Атрибуты src, alt
Как сделать ссылку на сайт или файл в HTML. Тег a. Атрибуты href, target, title
HTML ссылки. Якорные, на электронную почту
Как сделать таблицу в HTML. Объединение ячеек, границы. Теги table, tr, td, th
HTML таблица. Создание отступов, выравнивание текста, размеры
Форматирование текста в HTML. Жирный, курсивный. Теги strong, b, em, i
Как создать контактную форму обратной связи для сайта в HTML. Тег form
Текстовые поля форм в HTML, ввод пароля. Теги input и label
Учебник HTML для начинающих. Радиокнопки (radio)
Основы языка HTML. Чекбоксы (checkbox)
Поле со списком выбора в HTML. Теги select и option
Текстовая область в HTML. Тег textarea
Как сделать кнопку для формы в HTML и добавить её код на сайт
Декоративное объединение элементов формы в HTML. Теги fieldset и legend
Блокировка элементов формы в HTML. Атрибуты disabled и readonly
Как сделать PHP обработчик для HTML формы сайта и что для этого нужно
Установка локального сервера. Денвер (Apache, PHP, MySQL, Perl)
Отправка данных из HTML формы сайта на PHP обработчик. Методы GET и POST
Отправка письма в PHP обработчике для HTML формы сайта. Функция - mail
HTML теги для вставки внешних объектов - iframe и object
Блок предварительно форматированного текста в HTML. Тег pre
Как сделать картинку ссылкой, карта изображения в HTML. Теги map, area
Советы по заполнению метатегов HTML для сайта
Как в HTML коде сделать комментарий
XHTML - расширяемый язык разметки гипертекста
Валидация HTML документа. Проверка кода страницы сайта на ошибки
HTML для начинающих. Теги div и span
Курс по HTML. Нужно ли знать все теги и атрибуты
