Основы HTML • элемент HTML

реклама
Основы HTML
•
•
•
•
•
HTML элемент
Вид элемента
Атрибуты элементов
Структура HTML документа
Популярные HTML элементы
Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.net
Структура HTML элемента
Состоит из 3 частей
• Открывающий тег
• Содержание
• Закрывающий тег
<h1>HTML – это просто</h1>
h1 – имя тега
Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.net
Вид элемента
Тег может быть не заполненным
<code></code>
Сокращенная запись
<code />
Пустые элементы
<br />, <img src="http://smarly.net/img/logo.png" />
Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.net
Атрибуты
Атрибут сообщает браузеру дополнительную информацию
<input type="text" value="" required />
Как правило состоит из двух частей – имя и значение
type="text", где name – имя, text – значение
Существуют атрибуты которым значение не нужно
required – браузеуру достаточно его наличия,
его можно представить в виде required="required" или required=""
для клиента это не имеет значения
Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.net
Атрибут id
Атрибут id используется для того, чтобы элементу в документе придать
уникальный идентификатор. У двух элементов в документе не может быть
одного и того же значения атрибута id.
Популярное использование
• Применение стилей для уникального блока
• Быстрая выборка HTML объекта из DOM JavaScript-ом
• Переход в документе к конкретному разделу используя ссылку
Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.net
Атрибут class
Атрибут class используется для того, чтобы в произвольном порядке связать
определенные элементы.
Многие элементы могут принадлежать к одному и тому же классу, также
элементы могу принадлежать к одному или нескольким классам.
Если элемент принадлежит к нескольким классам, необходими разделить
имена классов пробелами.
Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.net
Структура HTML документа
HTML документ содержит ключевые элементы
DOCTYPE, html, head, и body
<!DOCTYPE HTML>
<html>
<head> <!– метаданные --> </head>
<body> <!– контент --> </body>
</html>
Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.net
DOCTYPE
DOCTYPE, говорит браузеру, что это документ HTML,
а если конкретнее, то документ HTML5
Элемент DOCTYPE для документа HTML4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.net
<html /> тэг
<html> говорит браузеру, что содержимое элемента должно рассматриваться
как HTML от начала и до конца, пока не встретится закрывающий
тег </html>
Можно сказать что <html/> содержит два внутренних блока.
Блок метаданных <head /> и блок содержания <body /> .
Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.net
<head />
Область метаданных, содержащаяся внутри элемента <head /> в документе
HTML позволяет предоставить браузеру информацию о документе.
Элемент <title /> является минимальным но не необходимым количествов
метаданных. Задает документу название или имя. Браузеры обычно
отображают содержание этого элемента в верхней части окна браузера
или вкладки.
Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.net
<body />
Элемент <body /> инкапсулирует содержание HTML документа, в отличие от
элемента <head />, который инкапсулирует метаданные и информацию о
документе.
Элемент <body /> всегда следует за элементом <head />, так что это
второй дочерний элемент элемента <html/>.
Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.net
Популярные HTML элементы
•
•
•
•
•
•
•
•
•
a – ссылка
div – выделенный блок
span – часть текста
p – абзац
ul – неупорядоченный список
ol – упорядоченный список
li – пункт в элементах ul, ol
form – форма
button -кнопка
•
•
textarea – поле для ввода
нескольких строк
input – элемент ввода
- text – текст
- checkbox – флажок
- radio – выбора
- submit – отправка формы
- file – загрузка текста
- hidden – скрытое поле
Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.net
Материал
Материал для прочтения
http://www.smarly.net/html5-getting-started-with-html
http://www.smarly.net/pro-jquery-osnovi-html
Книга “Руководство по HTML5” доступна
http://smarly.net/
PowerPoint презентация
http://storage.smarly.net/study-web-development-asp-net-mvc/lesson-02.pptx
Видео урок
http://youtu.be/9LMajv_tiSU
Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.net
Скачать