Определение HTML
Если мы зайдем на любой сайт в сети интернет, то обязательно увидим различного типа материал, изложенный на нем, будь то текст, картинки, формы, таблицы, видео и т.д. Так вот, для того, чтобы этот материал отобразил бразузер (программное обеспечение для просмотра веб-сайтов: Internet Explorer, Google Chrome, Opera, Mozilla Firefox, Safari…), в первую очередь необходим язык гипертекстовой разметки – HTML.
HTML (англ. сокр. HyperText Markup Language — язык гипертекстовой разметки). На этом языке браузеру сообщается, какие элементы (текст, картинки, таблицы, формы и т.д.) нужно отобразить на странице. На языке HTML не программируют, а верстают.
Конечно, для создания полноценной веб-страницы одного HTML будет недостаточно, но начать изучение советую именно с него, чем мы сейчас и займемся.
Создание html-документа
Перед началом, скачайте и установите на своем компьютере программы, в которых мы будем работать:
Текстовый редакторе Notepad++
Скачать редактор можно бесплатно с официального сайта Notepad-plus-plus.org.
Браузер Google Chrome
Скачать браузер можно с его официальной страницы.
Html-документы имеют расширение *.html или *.htm. Самый быстрый способ создать html-документ – это создать текстовый документ, и изменить его расширение на *.html:
Создайте на рабочем столе текстовый документ, и назовите его index.html.
Если у вас не получается изменить расширение, то попробуйте зайти в панель управления (Пуск – Панель управления), затем перейти в раздел Оформление и персонализация, и из этого раздела выбрать пункт Параметры папок. В открывшемся окне выберите вкладку Вид, и в появившемся списке снимите галочку напротив строки Скрывать расширения для зарегистрированных типов файлов
.Откройте index.html в текстовом редакторе Notepad++, и запишите в нем строку: “Привет, мир!”. Затем сохраните изменения и откройте index.html в браузере:
Html-документ готов. Теперь нужно научиться создавать в нем различные элементы, которые будут отображаться на веб-странице. Для этого сначала ознакомимся со структурой html-документа.
Видео к уроку
Определение HTML общее значение и понятие. Что это такое HTML
HTML — это язык разметки, который используется для разработки интернет- страниц. Это аббревиатура, которая соответствует языку разметки гипертекста, то есть языку разметки гипертекста, который можно перевести как язык формата документа для гипертекста
Это открытый формат, который появился из меток SGML (Standard Generalized Markup Language). Концепция обычно переводится как «Стандарт языка обобщенной разметки» и понимается как система, позволяющая упорядочивать и маркировать различные документы в списке. Этот язык используется для указания имен меток, которые будут использоваться при оформлении заказа, для этой организации нет никаких правил, поэтому она называется системой открытого формата.
HTML отвечает за разработку описания содержимого, которое отображается в виде текстов, и его структуры, дополняя указанный текст различными объектами (такими как фотографии, анимация и т. Д.).
Это очень простой и общий язык, который служит для определения других языков, связанных с форматом документов. Текст в нем создается из меток, также называемых тегами, которые позволяют соединять различные концепции и форматы.
Для написания этого языка создаются метки, указанные в квадратных или угловых скобках: < и > . Среди его компонентов элементы формируют основную структуру языка, поскольку они имеют два свойства (сам контент и его атрибуты).
С другой стороны, следует отметить, что HTML допускает определенные коды, известные как скрипты, которые предоставляют конкретные инструкции браузерам, отвечающим за обработку языка. Среди сценариев, которые можно добавить, наиболее известными и используемыми являются JavaScript и PHP.
Структурная маркировка — это то, что определяет цель текста, хотя и не определяет, как будет выглядеть элемент. С другой стороны, презентационный знак отвечает за то, как текст будет выглядеть за пределами своей функции.
Чтобы узнать HTML-код, используемый веб-страницей, мы должны выбрать « Просмотр исходного кода»
Краткая история HTML
Этот язык был разработан Европейской организацией ядерных исследований (ЦЕРН) в 1945 году с целью разработки системы хранения, в которой не было бы потеряно вещей, которые могли бы быть связаны через гиперссылки . Сначала они создали устройство под названием «мемекс», которое считалось дополнением к памяти .Впоследствии Дуглас Энгельбарт разработал компьютерную рабочую среду, которая будет называться Системой oNLine, в которой был каталог, чтобы облегчить задачу поиска в пределах одной организации.
Только в 1965 году Тед Нельсон придумал термин гиперссылка, придумав структуру, которая была связана с помощью электроники и которая впоследствии позволила бы создать Всемирную паутину (1989), гипертекстовую систему, с помощью которой можно было поделиться разнообразной информация с использованием Интернета (она использовалась для связи между ядерными исследователями, которые будут частью ЦЕРН).
Американец Тим Бернерс-Ли был первым, кто предложил описание HTML в документе, который он опубликовал в 1991 году . Там он описал двадцать два компонента, которые предполагают самый простой и простой дизайн HTML.
Тип кодирования, который использовался для разработки этой системы гиперссылок, должен был быть понят как тупыми компьютерами, так и мегастанциями, поэтому необходимо было создать абсолютно простой код с точки зрения языка обмена (HTML), как тот, который ссылался на сетевой протокол (HTTP).
Сегодня есть веб-издатели, которые позволяют дизайнерам с помощью графических инструментов, которые называются WYSIWYG, создавать веб-страницы, не зная
Определение HTML cсылок
До сих пор вы создавали одиночные веб-страницы, которые хороши сами по себе и работают хорошо, но вещь, делающая Интернет таким особенным, это то, что все страницы пересекаются, т.е. ссылаются друг на друга. Ведь буквы «HT» в аббревиатуре «HTML» обозначают слово «гипертекст», что в основе своей означает «текст со ссылками».
Чтобы определить ссылку, используется тег <a>, однако этому тегу требуется еще кое-что – направление ссылки, т.е. то, куда будет попадать пользователь при нажатии на ссылку.
Добавьте в свою веб-страницу следующее:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Моя первая веб-страница</title>
</head>
<body>
<h2>Моя первая веб-страница</h2>
<h3>Что это такое</h3>
<p>Простая страница, созданная при помощи HTML</p>
<h3>Для чего это нужно</h3>
<p>Чтобы изучить HTML</p>
<h3>Где найти учебник</h3>
<p><a href="http://www.msiter.ru">MSITER.RU</a></p>
</body>
</html>
Направление ссылки задается в атрибуте href тега <a>. Ссылка может быть абсолютной, такой как «http://www.msiter.ru«, или относительной, указывающей на текущую страницу. Таким образом, если, например, у вас другой файл с именем «flyingmoss.html«, то код примет вид «<a href=’flyingmoss.html’>Чудо летающего мха</a>«.
Ссылка не обязательно должна ссылаться на другой HTML файл. Она может ссылаться на любой файл в сети.
Кроме этого ссылка может отсылать пользователя к другой части той же самой страницы. Для этого нужно добавить атрибут
Тег <a> позволяет сделать так, чтобы ссылка открывалась в новом окне браузера, а не замещала ту страницу, на которой находится пользователь. Это может показаться разумной мыслью, так как в этом случае пользователь не покидает ваш веб-сайт. Тем не менее, существует множество причин, почему не стоит этого делать. С точки зрения удобства использования подобная практика нарушает линию навигации. Наиболее часто используемым инструментом навигации является кнопка браузера «Назад». При открытии нового окна браузера эта функция становится недоступной. Если же брать еще шире и перейти вообще к проблемам удобства использования, то пользователь вообще относится отрицательно к самовольно открывающимся окнам браузера. Если пользователь захочет открыть ссылку в новом окне, то у него всегда есть возможность сделать это средствами самого браузера.
Кроме всего прочего, не следует забывать и о людях с ограниченными возможностями. Для этого существуют особые приемы, которые позволяют сделать, так называемые, доступные ссылки.
HTML-атрибуты: таблица глобальных атрибутов
HTML-атрибуты сообщают браузеру, каким образом должен отображаться тот или иной элемент страницы. Атрибуты позволяют сделать более разнообразными внешний вид информации, добавляемой с помощью одинаковых тегов.
Значение атрибута заключается в кавычки "". Названия и значения атрибутов не чувствительны к регистру, но, тем не менее, рекомендуется набирать их в нижнем регистре.
Глобальные атрибуты
| Атрибут | Описание, принимаемое значение |
|---|---|
| accesskey | Генерирует сочетания клавиш для доступа к текущему элементу. Состоит из разделенного пробелами списка символов. Браузер в первую очередь выбирает те клавиши, которые существуют на раскладке клавиатуры. Применяется к следующим элементам: <a>, <area>, <button>, <input>, <label>, <legend>, <textarea>. Принимаемые значения: перечень названий клавиш. |
| class | Определяет имя класса для элемента (используется для определения класса в таблице стилей). Принимаемые значения: имя класса. |
| contenteditable | Определяет, может ли пользователь редактировать содержимое (контент). Позволяет преобразовать любое поле HTML в редактируемый элемент. Принимаемые значения: true/false. |
| dir | Определяет направление текста контента в элементах <bdo> и <bdi>. Принимаемые значения: ltr/rtl/auto. |
| draggable | Определяет, может ли пользователь перетащить элемент. Принимаемые значения: true/false/auto. |
| hidden | Указывает на то, что элемент должен быть скрыт. Принимаемые значения: hidden. |
| id | Определяет уникальный идентификатор элемента. Принимаемые значения: id — идентификатор элемента. |
| lang | Определяет код языка содержимого (контента) в элементе. Принимаемые значения: код языка. |
| spellcheck | Указывает, подлежит ли содержимое элемента проверке орфографии и грамматики. Принимаемые значения: true/false. |
| style | Указывает на код CSS, применяемую для оформления элемента. Принимаемые значения: код CSS. |
| tabindex | Определяет порядок перехода к элементу при помощи клавиши TAB. Принимаемые значения: порядковый номер. |
| title | Определяет дополнительную информацию об элементе, задавая всплывающую подсказку для страницы. Принимаемые значения: текст. |
| translate | Разрешает или запрещает перевод текста внутри элемента. Принимаемые значения: yes/no. |