Определение html: Learn web development | MDN – Элементы html — Википедия

Определение 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-код, используемый веб-страницей, мы должны выбрать « Просмотр исходного кода» в нашем браузере (например, Internet Explorer или Mozilla Firefox ). При выборе этой опции откроется текстовый редактор с HTML-кодом просматриваемой страницы.

Краткая история HTML

Этот язык был разработан Европейской организацией ядерных исследований (ЦЕРН) в 1945 году с целью разработки системы хранения, в которой не было бы потеряно вещей, которые могли бы быть связаны через гиперссылки . Сначала они создали устройство под названием «мемекс», которое считалось дополнением к памяти .

Впоследствии Дуглас Энгельбарт разработал компьютерную рабочую среду, которая будет называться Системой oNLine, в которой был каталог, чтобы облегчить задачу поиска в пределах одной организации.

Только в 1965 году Тед Нельсон

придумал термин гиперссылка, придумав структуру, которая была связана с помощью электроники и которая впоследствии позволила бы создать Всемирную паутину (1989), гипертекстовую систему, с помощью которой можно было поделиться разнообразной информация с использованием Интернета (она использовалась для связи между ядерными исследователями, которые будут частью ЦЕРН).

Американец Тим Бернерс-Ли был первым, кто предложил описание HTML в документе, который он опубликовал в 1991 году . Там он описал двадцать два компонента, которые предполагают самый простой и простой дизайн HTML.

Тип кодирования, который использовался для разработки этой системы гиперссылок, должен был быть понят как тупыми компьютерами, так и мегастанциями, поэтому необходимо было создать абсолютно простой код с точки зрения языка обмена (HTML), как тот, который ссылался на сетевой протокол (HTTP).

Сегодня есть веб-издатели, которые позволяют дизайнерам с помощью графических инструментов, которые называются WYSIWYG, создавать веб-страницы, не зная HTML-код

, он создается автоматически, давая структуру сети

Определение 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 файл. Она может ссылаться на любой файл в сети.

Кроме этого ссылка может отсылать пользователя к другой части той же самой страницы. Для этого нужно добавить атрибут id к любому тегу, например, "<h3>Мох</h3>", а затем создать ссылку на этот тег, например, следующим образом: "<a href="#moss">Перейти к моху</a>". При нажатии на такую ссылку браузер перелистнет страницу прямо к элементу с данным идентификатором id.

Тег <a> позволяет сделать так, чтобы ссылка открывалась в новом окне браузера, а не замещала ту страницу, на которой находится пользователь. Это может показаться разумной мыслью, так как в этом случае пользователь не покидает ваш веб-сайт. Тем не менее, существует множество причин, почему не стоит этого делать. С точки зрения удобства использования подобная практика нарушает линию навигации. Наиболее часто используемым инструментом навигации является кнопка браузера "Назад". При открытии нового окна браузера эта функция становится недоступной. Если же брать еще шире и перейти вообще к проблемам удобства использования, то пользователь вообще относится отрицательно к самовольно открывающимся окнам браузера. Если пользователь захочет открыть ссылку в новом окне, то у него всегда есть возможность сделать это средствами самого браузера.

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

HTML-атрибуты: таблица глобальных атрибутов

HTML-атрибуты сообщают браузеру, каким образом должен отображаться тот или иной элемент страницы. Атрибуты позволяют сделать более разнообразными внешний вид информации, добавляемой с помощью

одинаковых тегов.

Значение атрибута заключается в кавычки "". Названия и значения атрибутов не чувствительны к регистру, но, тем не менее, рекомендуется набирать их в нижнем регистре.

Глобальные атрибуты

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

Таблица 1. Глобальные атрибуты 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.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *