Основы html для начинающих

Cкелет HTML. Основы HTML для начинающих. Урок №1

Всем привет! Я рад, что вы посетили мой блог stepkinblog.ru.При создании веб-страниц и сайтов приходится работать с HTML . Поэтому, вы сделали очень правильное решение изучить основы HTML.Предлагаю вам пройти изучение именно моих уроков. Почему именно моих? Во-первых, потому что они поданы в легкой и доступной форме для новичков, во-вторых, потому что каждый урок будет иметь практическое занятие, а как известно практика играет важную роль.Итак, урок №1. В нем я расскажу, что такое HTML и схематически отображу скелет HTML документа.○ Что такое HTML?HTML – (от англ. Hypertext Markup Language ) это язык разметки гипертекста, разработанным британским ученным Тимом Бернерс-Ли (Tim Berners-Lee) в 1991—1992 годах.

Попробую своими словами и максимально проще объяснить, что значит язык разметки гипертекста.

Гипертекст – это совокупность текстов, ссылок, картинок, таблиц, которые взаимосвязаны. Это вам ничего не напоминает? Да, это обыкновенная веб-страница.

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

Язык – набор тегов, с помощью которых осуществляется разметка в HTML.

На данном этапе логично было бы объяснить еще значение слова тег, но об этом чуть позже.

Теперь рассмотрим, из чего состоит скелет HTML документа. Разберем скелет по косточкам.

Скелет HTML

Для лучшего понимания из чего состоит HTML документ, я подготовил схему:

Разъяснение схемы:

1). <HTML> и </HTML> - это начало и конец HTML документа.

2). <HEAD> и </HEAD> - голова HTML документа. В голову документа вставляют различные служебные теги (мета теги). Со служебными тегами мы обязательно столкнемся в дальнейших уроках и все подробно разберем.

3). <title> и </title> - заголовок документа. Это один из служебных тегов, который размещается в голове HTML документа между тегами <HEAD> и </HEAD>.Давайте посмотрим, где будет отображаться заголовок документа в браузере:

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

4). <BODY> и </BODY> - тело документа. В теле документа находится все, что мы хотим видеть на веб-странице: текст, картинки, таблицы, аудио, видео и т. д.

Вот теперь пришло время выяснить, что такое ТЕГ

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

Для примера я пропишу парочку тегов: <html></html>, <head></head>, <title></title>, <br>, <p></p> и др.

Также хочу упомянуть, что есть теги, которые нужно закрывать. Например:<html> - открываем тег.</html> - закрываем тег.

Есть теги одиночки, которые не нуждаются в паре или в закрытии. Например:<br> - тег для переноса строки.

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

Следующая запись Основы HTML для начинающих – «Моя первая страничка на HTML». Урок №2

stepkinblog.ru

Основы HTML для начинающих – «Моя первая страничка на HTML» . Урок №2

Главная » Основы HTML » Основы HTML для начинающих – «Моя первая страничка на HTML». Урок №2

Основы HTML для начинающих – «Моя первая страничка на HTML». Урок №2

Всем привет!В сегодняшнем уроке мы попробуем вместе создать первую страничку на HTML. Благодаря практическому уроку, вы сможете понять всю теорию, которую я упоминал в уроке №1, а также попробую все проделанное изложить по полочкам.Итак, для работы нам понадобиться стандартный текстовый редактор «Блокнот». Кто не знает, где искать «Блокнот», пишу:на вашем компьютере снизу в левом углу есть кнопка «Пуск», нажмите на нее.Далее выберите «Все программы» => «Стандартные» => «Блокнот».

А теперь попробуем создать первую веб-страницу. Следуйте данным пунктам:

1). Откройте блокнот

2). Создайте папкуНа вашем компьютере создайте папку под названием «Мои опыты с HTML». В эту папку вы будете сохранять все файлы, сделанные по курсу изучения основ HTML.

Теперь вспомним скелет HTML из урока №1.

Скелет HTML

3). Пропишите код

Опираясь на стандартную схему-скелет HTML, прописываем в «Блокнот» вот такой код (вы можете скопировать код и вставить в блокнот):

<html> <head> <title> Моя первая HTML-страничка на StepkinBlog.ru</title> </head> <body> Здравствуйте, это моя первая страница на StepkinBlog.ru. </body> </html>

[Посмотреть результат]

4). Сохраните документ

Сохраните документ как «index.html».Для этого в меню блокнота нажмите «Файл» => «Сохранить Как»:

Укажите место, куда вы хотите сохранить файл, в нашем случае это папка под названием «Мои опыты с HTML».В поле «Имя файла» напишите index.html (а не просто index, это важно). Таким способом мы создаем файл с расширением *.html для веб-страниц. Далее нажмите на кнопку «Сохранить»:

В папке «Мои опыты с HTML» появиться файл под названием «index», нажмите на него двойным щелчком мыши или откройте этот файл через любой браузер, например, Internet Explorer. Вот такой результат вы должны увидеть на мониторе компьютера:

Теперь разберем код по косточкам .

<html> - открываем HTML документ.<head> - открываем голову HTML документа.<title> - открываем заголовок.Моя первая HTML-страничка на StepkinBlog.ru</title> - закрываем заголовок.</head> - закрываем голову HTML документа.<body> - открываем тело HTML документа.Здравствуйте, это моя первая страница на StepkinBlog.ru.</body> - закрываем тело HTML документа.</html> - закрываем HTML документ.

Я думаю, вы заметили, что текст, который находится между тегами <title>здесь текст</title>, отобразился во вкладке браузера, а все, что находится между тегами <body>здесь текст</body>, отобразилось на экране монитора:

P.S. Хочу еще раз напомнить о парных тегах, которые нуждаются в закрытии, например:

<body> - открываем HTML документ</body> - закрываем HTML документ (закрывается тег знаком «/»)

и теги-одиночки, которые не нуждаются в закрывающей паре:

<br> -перенос строки.

Я бы еще выразился так, что парные теги – это условный контейнер, внутри которого могут находиться другие теги, текст, картинки и т.д.Для лучшего понимания моих слов, рекомендую глянуть на графическую схему, где я показал, как действуют парные теги:

Также хочу направить ваше внимание на правильность написания парных тегов:

<тэг1><тэг2><тэг3> ... </тэг3></тэг2></тэг1>

Обратите внимание, тег, который открывается первым должен закрыться последним, второй - предпоследним и т.д.Это правильное закрытие парных тегов, а теперь давайте посмотрим, как нельзя закрывать парные теги:

<тэг1><тэг2><тэг3> ... </тэг3></тэг1></тэг2>

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

Предыдущая запись Cкелет HTML. Основы HTML для начинающих. Урок №1 Следующая запись Знакомство с CSS. Основы CSS для начинающих. Урок №1

stepkinblog.ru

Учебник по основам HTML, для начинающих

Видеокурс по HTML для начинающих от компании WebForMySelf.

HTML - это сокращение от «HyperText Mark-up Language» - язык разметки гипертекста. То есть простыми словами – это язык, с помощью которого мы можем оформить и представить информацию для отображения в интернете. Оформление страниц в языке html происходит, используя специальные конструкции - теги.

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

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

Вот разделы html, которые мы рассмотрим в курсе: форматирование текста, работа с изображениями, ссылки, списки, таблицы, формы.

Все уроки курса:

Количество уроков: 8

Продолжительность курса: 01:57:09

Автор: Андрей Бернацкий

Один из создателей проекта «Основы Самостоятельного Сайтостроения». Адрес в сети — www.WebForMyself.com. Свободно владеет такими техниками как: HTML, CSS, JavaScript, jQuery, AJAX, PHP&MySQL.

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

Категории премиум

webformyself.com

Форматирование текста в HTML. Основы HTML для начинающих. Урок №3

Всем привет!Поработаем теперь над вставкой текста в HTML документ. В этом уроке вы научитесь вставлять текст в HTML документ, менять цвет, подчеркивать, зачеркивать текст и т.д. Проще сказать – научитесь форматировать текст. Начнем с простого и закончим более сложным.Для форматирования текста существует множество тегов, всех их вам запоминать не надо, достаточно просто о них знать. Запомнить теги для текста нужно только те, которые часто используются. Зазубривать теги, как в школе зубрят стихи, не нужно – со временем они сами зафиксируются в вашей памяти по мере того, как вы будете часто создавать веб страницы.Вступление к уроку я сделал, теперь перейдем к практике. Я думаю, вы положили возле себя тетрадку и ручку для того, чтобы сделать полезные записи

Основные теги для работы с текстом

Теги для заголовка

<h2> Заголовок h2 </h2> <h3> Заголовок h3 </h3> <h4> Заголовок h4 </h4> <h5> Заголовок h5 </h5> <h5> Заголовок h5 </h5> <h6> Заголовок h6 </h6>

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

*выравнивание заголовка.

К тегам <h2>-<h6> можно добавить атрибут «align». Он служит для того, чтобы горизонтально выравнивать заголовок.Значение атрибута «align»:

left – слева (по умолчанию)right – справаcenter – по центру

Пример:

<h2 align= "center"> Заголовок h2 будет по центру </h2>

Теперь сам код:

<html> <head> <title> Теги для заголовка на HTML – StepkinBlog.ru</title> </head> <body> <h2 align= "center"> Заголовок h2 будет по центру </h2> <h3 align= "right"> Заголовок h3 будет справа</h3> <h4>Заголовок h4</h4> <h5>Заголовок h5</h5> <h5>Заголовок h5</h5> <h6> Заголовок h6</h6> </body> </html>

Сохраните файл. Еще раз напомню, что сохранить файл нужно в формате «.html». О том, как это делать, читайте урок№2.

Если откроете файл, то на экране отобразится вот такая картина:

Теги для текста

○ тег разделения текста на абзацы

<p> Текст </p> <p> Текст </p> <p> Текст </p>

Тег <p> разделяет текст на абзацы. Закрывающий тег обязателен.

*выравнивание текста.

К тегу <p> можно добавить атрибут «align». Он служит для горизонтального выравнивания текста внутри параграфа.Значение атрибута «align»:

left – слева (по умолчанию)right – справаcenter – по центруjustify – по ширине.

Пример:

<p align= "center"> Текст </p>

Теперь сам код:

<html> <head> <title>Теги для текста на HTML – StepkinBlog.ru</title> </head> <body> <p align= "center"> Что такое HTML? (текст по центру) </p> <p align= "justify">HTML – (от англ. Hypertext Markup Language ) это язык разметки гипертекста, разработанный британским ученным Тимом Бернерс-Ли (Tim Berners-Lee) в 1991—1992 годах (здесь текст будет выравниваться одновременно по левому и правому краям документа)</p> <p align= "justify">Гипертекст – это совокупность текстов, ссылок, картинок, таблиц, которые взаимосвязаны. Это вам ничего не напоминает? Да, это обыкновенная веб-страница (здесь текст будет выравниваться одновременно по левому и правому краям документа)</p> <p>Подписывайтесь на обновления моего блога (текст без выравнивания) </p> <p align= "right"> Текст взят из сайта StepkinBlog.ru (текст справа) </p> </body> </html>

Результат:

○ Тег принудительного переноса строки

<br>

Тег <br> принудительно переносит строку в html документе. Закрывающий тег не нужен.

Пример:

<p> Привет! </p> <br> <p> Текст. <br> Другой текст. Третий текст. </p> <p> Теперь пока! </p>

Теперь сам код:

<html> <head> <title>Теги для текста на HTML – StepkinBlog.ru</title> </head> <body> <p> Привет! </p> <br> <p> Текст. <br> Другой текст. Третий текст. </p> <p> Теперь пока! <br> Текст взят из сайта StepkinBlog.ru </p> </body> </html>

Результат:

○ Тег, выделяющий текст курсивом

<em>Текст или слово</em>

Или

<i>Текст или слово</i>

Для тега <em> или <i> закрывающий тег обязателен.

○ Тег, выделяющий текст жирным

<strong>Текст или слово</strong>

Или

<b>Текст или слово</b>

Для тега <strong> или <b> закрывающий тег обязателен.

○ Тег для подчеркивания текста

<u>Текст или слово</u>

Для тега <u> закрывающий тег обязателен.

○ Тег для перечеркивания текста

<s>Текст</s>

- текст будет перечеркиваться.

Для тега <s> закрывающий тег обязателен.

○ Тег верхнего и нижнего индекса

<SUP>текст верхнего индекса</SUP> <SUB>текст для нижнего регистра</SUB>

Для тега <SUP> и <SUB> закрывающий тег обязателен.

Пример:

(Х<SUP>2</SUP>)

в результате вы увидите (х2)

H<SUB>2</SUB>O

в результате вы увидите Н2О

○ Тег для вставки горизонтальной линии

<HR>

Для тега <HR> закрывающий тег не нужен.

*атрибуты для тега <hr>.

К тегу <hr> можно добавить такие атрибуты:

WIDTH – длина линии. Задается размер в пикселях или процентах. Пример:

<hr>

SIZE – толщина линии (px). Пример:

ALIGN – выравнивание линии по горизонтали. У атрибута «align» есть значения:

left – по левому краюright – по правому краюcenter – по центру (используется по умолчанию)

Пример:

NOSHADE – делает линию сплошной. Пример:

COLOR – цвет линии (не во всех браузерах работает). Пример:

Пример:

<p>Текст</p> <hr align="left" size ="8"> <p>Текст</p> <hr noshade align="left" size ="8">

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

Пример:

<html> <head> <title>Теги для текста на HTML – StepkinBlog.ru</title> </head> <body> <hr align="left" size ="8"> <p> Просто текст, а это текст <em>курсивом</em>.<br> Еще есть <strong>жирный текст</strong></p> <p> А здесь можно перечеркнуть <u>текст или слово</u> или вообще <s>зачеркнуть</s></p> <p> Можем написать уравнение x<SUP>2</SUP>+y<SUP>2</SUP>=-1.<br> Хотя, что нам математика, можно и химию зацепить. Вот, например, формула воды: H+0<SUB>2</SUB>O=H<SUB>2</SUB>O</p> <hr noshade align="left" size ="8"> Теперь пока! <br> Текст взят из сайта StepkinBlog.ru </p> </body> </html>

Результат:

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

○ Тег для изменения цвета, размера и шрифта.

<font> Текст </font>

Для тега <font> закрывающий тег обязателен.

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

*атрибуты для тега <font>

SIZE – размер текста. Значение задается по нарастанию от 1 до 7 Пример:

<font size="7">Текст</font>

COLOR – цвет текста. Пример:

<font color="red">Текст</font>

FACE – шрифт текста. Пример:

<font face="Times New Roman">Текст</font>

Пример:

<html> <head> <title>Теги для текста на HTML – StepkinBlog.ru</title> </head> <body> <p> Просто текст</p> <p><font size="7" color="red" face="Times New Roman">StepkinBlog.ru</font></p> </body> </html>

Тег <center>

<center> Текст </center>

Тег <center> предназначен для выравнивания по центру окна всех элементов. Для тега <center> закрывающий тег обязателен.

Пример:

<html> <head> <title>Теги для текста на HTML – StepkinBlog.ru</title> </head> <body> <center> <p>Просто текст</p> <p>StepkinBlog.ru</p> </center> </body> </html>

В результате:

Совместное использование тегов

Вы, наверное, помните, а может уже и подзабыли урок№2. Там я рассказывал, как правильно писать парные теги.

<тэг1><тэг2><тэг3> Текст </тэг3></тэг2></тэг1>

Вот на основе этого давайте скомбинируем что-то.Хочу, чтобы текст был жирным, подчеркнутым и красного цвета. Вот так это будет выглядеть в html коде:

<font color="red"><strong><u> Текст </u></strong></font>

Вот готовый код:

<html> <head> <title>Теги для текста на HTML – StepkinBlog.ru</title> </head> <body> <p> Просто текст</p> <font color="red"><strong><u> Текст </u></strong></font> </body> </html>

В результате вы увидите:

Вот и подошли мы к завершению урока №3. Предлагаю закрепить сегодняшний урок. Даже, если сил уже нет и закончилось терпение, переборите себя и попробуйте создать страничку с использованием всех тегов, которые я расписал в этой статье. А для вас, как пример, я оформил свой код так:

<html> <head> <title>Моя страничка на HTML – StepkinBlog.ru</title> </head> <body> <h3 align="center">Основы HTML на StepkinBlog.ru</h3> <p align="right"><em>Автор блога: Костаневич Степан</em></p> <p align="justify"><strong><u>HTML</u></strong> – (от англ. <em>Hypertext Markup Language</em> ) это язык разметки гипертекста, разработанный британским ученным Тимом Бернерс-Ли (Tim Berners-Lee) в <font color="green"><strong>1991—1992</strong></font> годах.</p> <p align= "right"> Текст взят из сайта StepkinBlog.ru</p> <center> <p><font color="red" size ="5">Удачи!!!</font></p> <p>Жду вас на своем блоге <br> StepkinBlog.ru или BlogGood.ru</p> </center> <hr noshade align="left" size ="5"> Цена сайта <s>500$</s> - <font color="red">499$</font> </body> </html>

[посмотреть результат]

Предыдущая запись Основы bootstrap для начинающих. Урок №1 Следующая запись Спецсимволы в HTML. Основы HTML для начинающих. Урок №4

stepkinblog.ru

HTML формы. Основы HTML для начинающих. Урок №18

Всем привет!Продолжаем изучать основы HTML. В этом уроке мы разберем, что такое HTML форма и как она создается.Если вы обратили внимание, сегодня ни один веб сайт не обходится без форм. Эти формы могут быть различные, например, форма обратной связи, форма для подачи заказа, форма регистрации и входа на сайт, форма отправки комментариев, отзывов, форма поиска и многие др.

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

○ Форма поиска:

○ Форма отправки комментариев:

○ Форма входа на сайт:

○ Форма обратной связи:

○ Форма для подачи заказа:

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

Вот с этого момента прошу вашего особого внимания, потому как тема сложна и важная.

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

Учимся создавать HTML формы

Любая HTML форма будет состоять из основного тега <form> </form>. Внутри тега <form> </form> вставляются остальные элементы формы, которые будут отображаться на веб странице.

<form> здесь будут различные элементы формы, которые будут отображаться на веб странице. </form>

Форма должна размещаться между тегами <body></body>.Для тега <form> закрывающий тег обязателен.

*атрибуты для тега <form>

NAME – уникальное имя формы. Оно используется тогда, когда на одном сайте несколько форм.ACTION – этот атрибут указывает путь к обработчику формы. Является обязательным.METHOD – способ отправки.

POST - данные передаются в скрытом виде
GET (по умолчанию) - данные передаются в открытом виде через браузерную строку.

Пример, как выглядит тег <form> с перечисленными атрибутами:

<form name="forma1" method="post" action="obrabotchik.php"> здесь будут различные элементы формы, которые будут отображаться на веб странице. </form>

Элементы формы

○ Тег input

Тег input – эта часть элемента поля формы предназначена для ввода небольшого текста, цифр.Для тега <input> закрывающий тег не нужен.

*атрибуты для тега <input>

name - имя элемента
size - размер поля
required – поле обязательное для заполнения
autofocus – указатель мышки при загрузке веб-страницы сразу будет на поле
maxlength – этим атрибутом можно указать максимальное количество ввода символов в поле. По умолчанию, без атрибута maxlength, в поле можно будет вводить неограниченное количество символов
placeholder – подсказка для пользователя, которая будет отображаться прямо внутри формы поля (раньше использовали атрибут value).
type - тип элемента

Пример заполнений:

Тип элемента type

Текстовое поле

○ Текстовое поле «text»:

Результат:

○ Поле для пароля «password»:

Результат:

○ Поле для email «email»:

Результат:

○ Кнопка для выбора файла с компьютера «file»:

Результат:

○ Поле для ввода телефона «tel»:

Результат:

○ Поле поиска «search»:

Результат:

○ Поле выбора цвета «color»:

Результат:

○ Поле для ввода и выбора цифр «number»:

min – минимальное значение
max – максимальное значение
step – шаг.

Результат:

○ Поле для выбора даты «date»:

Результат:

○ Поле для выбора даты и местного времени в формате (05.05.2015 00:00):

Результат:

○ Выводить выпадающий календарь.Поле для выбора года и месяца в формате (Июль 2015 г.).:

Результат:

○ Поле для выбора времени «time»:

Результат:

○ Ползунок «range»:

Результат:

○ Флажок (checkbox):

checked – этот атрибут указывает, какой флажок должен быть включен по умолчанию

Результат:

○ Радиопереключатель «radio»:

checked – этот атрибут указывает, какой радиопереключатель должен быть включен по умолчанию

Результат:

Кнопки

○ Кнопка «button»:

value - надпись на кнопке

Результат:

○ Кнопка для отправки данных «submit»:

value - надпись на кнопке

Результат:

○ Кнопка сброса «reset»:

value - надпись на кнопке

Результат:

○ Кнопка картинкой:

Результат:

○ Скрытое поле «hidden»

○ Тег select

Тег select – это часть элемента формы, предназначен для ввода выпадающего списка.Для тега <SELECT></SELECT> закрывающий тег обязателен.Тег <SELECT> является каркасом для выпадающего списка.

Чтобы создавать пункты выпадающего списка существует тег <OPTION>.Для тега <OPTION></OPTION> закрывающий тег обязателен.

*атрибуты для тега <SELECT> и <OPTION>

Name – это имя всего списка. Задается только для тега <SELECT>.
multiple – для множественного выбора, только при выборе нужно удерживать клавишу «CTRL». Задается только для тега <SELECT>.
Value – задается для каждого пункта списка для тега <OPTION>.
disabled - блокирует выбор элемента в выпадающем списке. Задается только для тега <OPTION>.

Пример:

<select name="dostavka"> <option value="ne-srochnaya"> Не срочная </option> <option value="srochnaya"> Срочная </option> <option value="kurierom"> Курьером </option> </select>

Результат:

Не срочнаяСрочнаяКурьером

Или вот так:

<select name="dostavka"> <option> </option> <option value="ne-srochnaya"> Не срочная </option> <option value="srochnaya"> Срочная </option> <option value="kurierom"> Курьером </option> </select>

Результат:

Не срочнаяСрочнаяКурьером

Теперь заблокируем из списка «Срочная» атрибутом «disabled»:

<select name="dostavka"> <option value="ne-srochnaya"> Не срочная </option> <option value="srochnaya" disabled > Срочная </option> <option value="kurierom"> Курьером </option> </select>

Результат:

Не срочнаяСрочнаяКурьером

○ выпадающий список по группам:

Для создания списка группы используется тег <optgroup>

Пример:

<select> <optgroup label="Группа 1"> <option value="1">Option</option> <option value="2">Textarea</option> </optgroup> <optgroup label="Группа 2"> <option value="3">Label</option> <option value="4">Fieldset</option> <option value="5">Legend</option> </optgroup> </select>

Результат:OptionTextareaLabelFieldsetLegend

○ для множественного выбора:

<select multiple> <option>Option</option> <option>Textarea</option> <option>Label</option> <option>Fieldset</option> <option>Legend</option> </select>

В теге <select> используется атрибут «multiple».

Результат:

OptionTextareaLabelFieldsetLegend

Многострочное текстовое поле

○ Тег textarea

Тег textarea – это часть элемента поля формы, предназначен для ввода большого текста, цифр. закрывающий тег обязателен.

*атрибуты для тега <textarea>

name – имя поля
cols – ширина поля
rows – высота поля
placeholder – подсказка для пользователя, которая будет отображаться прямо внутри формы поля.

Пример:

Результат:

Или вот так:

<textarea name="adres" cols="30" rows="10">Введите текст</textarea>

Результат:

Введите текст

Или вот так:

Результат:

Оформление «Рамка» (fieldset)

○ Тег fieldset

Тег fieldset – с помощью этого тега можно нарисовать рамку вокруг объекта.Закрывающий тег обязателен.

Дополнительные теги <legend>Тег legend – указывает на заголовок. Закрывающий тег обязателен.

Пример:

<fieldset> <legend>Заголовок</legend> Текст внутри рамки. </fieldset>

Результат:

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

Вот моя форма:

<form method="post" action=" "> <fieldset> <legend>Форма для резюме работника опытного завода ПАО "КМЗ" </legend> <input type="text" placeholder="Ваше имя"><br><br> <input type="text" placeholder="Ваша фамилия"><br><br> Кем вы хотите устроиться?<br> <select size="1"> <option selected> Директором </option> <option > Инженером </option> <option > Сварщиком </option> </select><br><br> Какую зарплату вы хотите получать (в месяц)? <br> <input type="radio" value="10" checked> 10$ <input type="radio" value="11"> 11$<br><br> <textarea cols="45" rows="5" placeholder="Введите адрес"></textarea><br><br> <input type="submit" value="Отправить резюме"> <input type="reset" value="Стереть и начать все заново "> </fieldset> </form>

Результат:

Предыдущая запись Нам 1 годик! С Днем Рождения StepkinBlog.ru!!! Следующая запись Как проверить HTML форму. Основы HTML для начинающих. Урок №19

stepkinblog.ru

Тег div в HTML. Основы HTML для начинающих. Урок №17

Всем привет!Продолжаем изучать основы HTML.В этом уроке я расскажу коротко о теге <div> для чего он нужен, как им пользоваться.Урок будет очень коротким, но очень важным и полезным. Если вы в дальнейшем будете создавать сайты, макеты, шаблоны, то вам придется очень часто видеть тег <div>.

Когда-то, до царя Гороха,

для создания каркаса сайта использовали таблицы HTML:

Теперь все изменилось! Вместо тега <table> для создания каркаса сайта стали использовать тег <div>.

○ тег <div>

тег <div> - это блочный элемент, внутри которого могут находиться другие теги, содержание веб страницы. Своего рода, это контейнер, который можно легко видоизменять и выводить в любом месте веб страницы с помощью CSS. Без использования CSS тег <div> мало функционален. Но вы не заморачивайтесь и не кидайтесь сразу изучать основы CSS. Познакомьтесь с тегом <div>, пройдите полностью основы HTML и только тогда переходите к изучению CSS, иначе запутаетесь.

Итак, тег <div>, закрывающий тег обязателен.

<div>содержимое</div>

* атрибуты тега <div>

Чтобы выравнивать блок <div> с помощью CSS, используют атрибут align:

align

Center - выравнивание блока по центру. Пример: align="center".
Left - выравнивание блока по левому краю (по умолчанию). Пример: align="left".
Right - выравнивание блока по правому краю. Пример: align="right".

Пример:

<div align="left">блок будет размещен в левой части html страницы</div> <div align="right">блок будет размещен в правой части html страницы</div> <div align="center">блок будет размещен по центру html страницы</div>

class

class - имя класса для связки с CSS оформлением. Пример:.

Пример:

id - имя CSS идентификатора. Пример:.

Пример:

title

title – описание блока в виде всплывающей подсказки. Пример: title="описание".

Пример:

<div title="А вот и я!">Пример всплывающей подсказки</div>

[посмотреть все примеры]

Как я и говорил, урок короткий, но, поверьте, очень важный. Удачи, жду вас на следующих своих уроках! Не пропустите.

Предыдущая запись Как создать фреймы в HTML. Основы HTML для начинающих. Урок №16 Следующая запись Нам 1 годик! С Днем Рождения StepkinBlog.ru!!!

stepkinblog.ru