HTML HTML (HyperText Markup Language) - это язык разметки, который используется для создания веб-страниц. Он позволяет описывать структуру и содержание веб-страницы, а также управлять их внешним видом с помощью стилей CSS. HTML-файл или HTML-страница документ, созданный в виде гипертекста на основе языка HTML. Такие файлы имеют, как правило, расширения .htm или .html. Язык разметки HTML, является основой всех размещенных в Интернете электронных документов. Он выступает в роли некого фундамента, на базе которого реализуются прочие сетевые программные технологии, призванные в конечном итоге повысить общую привлекательность, эффективность и интерактивность носителей информационных данных в Сети. HTML постоянно набирает популярность, причем не только в сфере интернет-технологий, но и области предоставления презентационных услуг, рекламно-выставочной деятельности, внедряется в состав программного обеспечения. Термин HyperText Markup Language означает «язык маркировки гипертекта» и включает в себя различные способы оформления гипертекстовых документов, дизайн, гипертекстовые редакторы, браузеры и др. Пользователь, изучивший этот язык, обретает возможность делать сложные вещи простыми способами и главное, быстро. HTML как основа создания Web-страниц имеет прямое отношение к такому направлению изобразительного искусства, как Web-дизайн Язык HTML был разработан британским учёным Тимом Бернерсом-Ли в конце 80-х годов 20 века в рамках создания проекта распределенной гипертекстовой системы, которую он назвал World Wide Web (WWW) или Всемирная паутина. 4 В 1990 - х гг. он добился особенных успехов благодаря быстрому росту Web. В это время HTML был расширен и дополнен. В Web очень важно использование одних и тех же соглашений HTML авторами Web-страниц и производителями. Это явилось причиной совместной работы над спецификациями языка HTML. Многие называют HTML языком программирования. Это не совсем верно, т.к. в традиционном HTML является языком разметки электронных документов , лишь указывающим программам просмотра HTML-страниц форму представления описанной в документе информации. 5 Со времени создания первой версии HTML претерпел некоторые изменения, но если сравнить исходные тексты различных web-страниц, можно легко увидеть сходство их структур. Это объясняется тем, что документы создаются по определенным правилам. В основу синтаксиса языка HTML лег стандарт ISO 8879:1986 «Information processing. Text and office systems. Standard Generalized Markup Language (SGML)» 6 История создания HTML март 1995 начало работы над HTML 3 + CSS 1994 Подготовка HTML 2.0 Консорциум W3 (W3C) www.W3.org 2014год HTML 5.0 1991 CERN HTML 22 января 2008 года W3C официально объявил "HTML 5 - в разработке" 1986 ISO-8879 SGML 2000 XHTML 1.0 январь 1997 HTML 3.2 декабрь 1997 HTML 4.0 + CSS 2.0 24 декабря 1999 HTML 4.01 7 Браузеры Текстовые документы, содержащие разметку на языке HTML (такие документы традиционно имеют расширение .html или .htm), обрабатываются специальными приложениями, которые отображают документ в его форматированном виде. Такие приложения, называемые «браузерами» или «интернет-обозревателями», обычно предоставляют пользователю удобный интерфейс для запроса вебстраниц, их просмотра (и вывода на иные внешние устройства) и, при необходимости, отправки введённых пользователем данных на сервер. 8 Наиболее популярными на сегодняшний день браузерами являются: • Google Chrome; • Yandex; • Safari; • Opera; • Edge; • Firefox; 9 Элемент – это конструкция языка HTML, или контейнер, содержащий данные. Web-страница представляет собой набор элементов. Например: <Начало элемента>Содержание элемента, данные, которые форматирует элемент </Конец элемента> Тег – стартовый и конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. 10 В тексте HTML-документа теги заключаются в угловые скобки, а конечный тег всегда снабжается косой чертой. Тэги могут быть одиночными или парными, для которых обязательно наличие открывающего и закрывающего тегов (такая пара тэгов называется контейнером). Например: <Начальный тег>Содержание элемента, данные, которые форматирует элемент </Конечный тег> <P>Этот текст будет расположенном в отдельном абзаце </P> 11 Атрибут – параметр или свойство документа. Это, по сути, переменная, которая имеет стандартное имя и которой может присваиваться определенный набор значений: стандартных или произвольных. Атрибуты размещаются внутри стартового тега и отделяются друг от друга пробелами. Например: <P align=“center”>Этот текст будет выравнен по центру экрана </P> 12 Гиперссылка - фрагмент текста, который является указателем на другой файл или объект. Гиперссылки необходимы для того, чтобы обеспечить переход от одного документа к другому или из одной части документа к другой. Группа web-страниц, принадлежащих одному автору или одному издателю и взаимосвязанных общими гиперссылками образует структуру, которая называется web-сайтом. 13 Фрейм – область гипертекстового документа со своими полосами прокрутки. Код – аналог понятия "текст программы". Код HTML – гипертекстовый документ в своем изначальном виде, когда видны все атрибуты и элементы. WWW( Web, World Wide Web) – «всемирная паутина», распределенная система доступа к гипертекстовым документам, существующая в Internet. HTML является основным языком для создания документов в WWW. 14 Web-cтраница – документ (файл), подготовленный в формате гипертекста и размещенный в WWW. Браузер - программа для просмотра Webстраниц. Сайт - набор Web-страниц, принадлежащих одному владельцу. URL – адрес некоторого объекта в Internet или файла на локальном диске. Базовый цвет - каждый цветовой оттенок получается соединением трех базовых цветов: красного, зеленого и синего (R, G, B). 15 Все документы в HTML должны начинаться с объявления типа документа с помощью элемента <!DOCTYPE html>. Сам HTML документ начинается с <html> и заканчивается с</html>. Видимая часть документа находится между открывающим тегом <body> и закрывающим </body>. <!DOCTYPE html> <html> <head> <title>Заголовок документа</title> </head> <body> <h1>Мой первый заголовок</h1> <p>Мой первый параграф</p> </body> </html> 16 HTML-код страницы помещается внутрь контейнера <HTML></HTML> Заголовок Web-страницы заключается в контейнер <HEAD></HEAD> Название Web-страницы содержится в контейнере < TITLE ></TITLE> 17 Элемент <!DOCTYPE> В самом верху пишется <!DOCTYPE> , эта конструкция объявляет тип документа и помогает браузерам правильно отображать веб-страницы. Элемент <!DOCTYPE> не чувствителен к регистру. Что такое тег? Язык HTML отвечает за структуру и содержание страницы. Кирпичиками для построения структуры документа и наполнения его содержимым являются теги. Тег - это основная конструкция языка HTML. Благодаря тегам любой браузер понимает, каким смыслом вы наделяете тот или иной элемент на веб-странице. Тег состоит из имени, заключённого между знаками «<» и «>». Примеры тегов: <h2>, <a>, <ul>. В качестве имени тега должны использоваться определенные, закрепленные в HTML имена, вы не можете использовать свои собственные названия. Поэтому знание HTML заключается в знании его тегов. Парные и одиночные теги Все теги можно разделить на две категории: парные; одиночные. Например, тег <img> - одиночный: <img src="https://google.com"> У парных тегов, в отличие от одиночных, есть вторая половинка - закрывающий тег. В закрывающих тегах перед именем ставится символ / («слеш»): <h1>Текст</h1>В этом примере <h1> открывающий тег, а </h1> закрывающий. Для чего нужны теги? У каждого тега есть свое имя, также своя функциональность: одни теги помогают добавить картинку на вашу страницу, другие помогут создать заголовок, таблицу, список и т.д. Все перечисленное можно назвать одним словом - элемент HTML. И как раз на основании тегов создается любой элемент HTML. HTML-элементы Элемент HTML - это набор из тега и его содержания. Чаще всего он состоит из открывающего тега, содержимого и закрывающего тега, например: <h1>Это заголовок верхнего уровня</h1> <p>Это параграф</p> В данных примерах теги <h1> и <p> являются открывающими, текст внутри тега это содержимое элемента, теги </h1> и </p> закрывающие. Вложенные элементы HTML Любой HTML-документ будет представлять собой набор из вложенных друг в друга элементов HTML. Вот самый простой и базовый пример того, как будет выглядеть HTML-документ: <!DOCTYPE html> <html> <head> <title>Это заголовок страницы</title> </head> <body> <h1>Это заголовок</h1> <p>Это абзац</p> </body> </html> Такую вложенную структуру лучше всего представить в Элемент <html>является корневым и определяет весь HTML-документ. У него есть начальный тег <html>и конечный тег </html>. Внутри <html>элемента находятся элементы <head> и <body 2.1. Элемент<head>предназначен для хранения служебной информации о странице. Он располагается первым в элементе<html> , сразу перед <body> . Этот элемент нужно закрыть тегом </head> сразу после перечисления его содержимого. Так, например, в элементе <head> хранится информация о теге <title>, который отображает заголовок страницы в браузере и поисковой выдаче и является важным элементом для ранжирования сайта в поисковых системах. 3. Затем внутри <body>элемента есть два других элемента: <h1>и <p>: 3.1. Элемент <h1> - это HTML-заголовок, который чаще всего используется для разметки заголовка веб-страницы. Он имеет начальный тег <h1>и конечный тег </h1>. <h1>Это заголовок верхнего уровня</h1> 3.2. Элемент <p>определяет абзац. Элемент является блочным, а значит его содержимое всегда начинается с новой строки и занимает всю доступную ширину. Он имеет начальный тег <p>и конечный тег </p>: <p>Это абзац</p> Некоторые элементы HTML будут отображаться правильно, даже если вы забудете закрыть тег, например: <html> <body> <p>This is a paragraph <p>This is a paragraph </body> HTML-заголовки Заголовки показывают важность раздела, к которому относятся. Чем больше заголовок и его «вес», тем более он значимый. В газетах и журналах передовицы набраны крупным шрифтом, тем самым, привлекая к ним внимание .На сайтах тегом <h1> обычно обозначают название раздела или статьи. С помощью различных заголовков легко регулировать размер текста. Чем выше уровень заголовка, тем больше размер шрифта. Самым верхним уровнем является уровень 1 (<h1>), а самым нижним - уровень 6 (<h6>). Буква «h» в названии тега - это первая буква английского «heading». Теги h1-h6 Для создания заголовков на сайте используется 6 парных тегов: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, где <h1> — заголовок первого уровня, самый важный и описывающий главную тему текста, а <h6> — заголовок самого низшего уровня. HTML-параграфы Помимо заголовков, важным элементом HTML является параграф (или абзац). Параграфы помогают разделять большой текст на небольшие смысловые блоки и таким образом делают текст более понятным и комфортным для чтения. Эти блоки браузер автоматически отделит друг от друга отступами. Параграфы создаются с помощью парного тега <p>, в тело которого помещается небольшая часть текста. Например: <p>Это параграф</p> Теги <hr> и <br> При помощи данных тегов можно добавлять переносы в любом месте HTML-кода. Горизонтальная линия Тег <hr> определяет тематический разрыв на HTML странице и чаще всего отображается в виде горизонтальной линии. Элемент <hr> используется для разделения содержимого (или определения изменения) на HTML-странице: Тег <hr> - это пустой тег, что означает, что у него нет конечного тега. Тег <pre> Тег <pre> определяет предварительно отформатированный текст. Текст, находящийся внутри элемента <pre> , отображается в фиксированной ширине шрифта (обычно курсив), и он сохраняет пробелы и переносы строк. Поэтому использование тега <pre> поможет вывести стихотворение в красивом виде. HTML-списки Списки - один из способов представления контента на странице. С их помощью легко группировать небольшие связанные фрагменты. Виды списков Списки бывают трех видов: Неупорядоченный (маркированный) список Упорядоченный (нумерованный) список Список определений Неупорядоченный список Неупорядоченный список на английский язык переводится как Unordered List. В HTML взяли первые буквы английского названия и создали тег <ul> - он отвечает за создание неупорядоченного списка. Каждый элемент списка должен находиться внутри тега <li>. Перед каждым из элементов будет проставлен маркер, поэтому неупорядоченный список еще называют маркированным. Браузеры по умолчанию добавляют следующее форматирование блоку списка: <!DOCTYPE html> <html> <body> <ul> <li>Кофе</li> <li>Чай</li> <li>Молоко</li> </ul> </body> </html> • Типы маркеров • Для маркированного списка доступны 3 типа маркеров по умолчанию: disc, square и circle. Задать тип маркера можно при помощи свойства liststyle-type. Тип маркера может быть задан как для списка в целом (свойство применяется к <ul>), так и для конкретного элемента (свойство применяется к <li>). <!DOCTYPE html> <html> <body> <ul style="list-style-type: square;"> <li>Кофе</li> <li>Чай</li> <li>Молоко</li> </ul> <hr> <ul> <li style="list-style-type: disc;">Закрашенный круг, точка.</li> <li style="list-style-type: circle;">Окружность, пустая внутри.</li> <li style="list-style-type: square;">Квадрат.</li> </ul> </body> </html> Упорядоченный список Упорядоченный список на английский язык переводится как Ordered List, поэтому HTML-тег, отвечающий за создание упорядоченного списка, называется <ol>. Каждый элемент списка должен находиться внутри тега <li>. По умолчанию применяется нумерованный список с арабскими числами. HTML-ссылки Для создания ссылки необходимо воспользоваться парным тегом <a>. Все, что будет находиться между открывающим тегом <a> и закрывающим </a> будет считаться ссылкой, и пользователь сможет кликнуть по этому содержимому. Общий синтаксис создания ссылок следующий: <a href="URL">текст ссылки</a> Самый важный атрибут элемента <a> - это атрибут href, что указывает на пункт назначения ссылки. Текст ссылки - это та часть, которая будет видна читателю. Нажав на текст ссылки, читатель отправится на указанный URL-адрес. Ссылки будут отображаться следующим образом во всех браузерах: • Не посещенная ссылка подчеркнута синим цветом. • Посещенная ссылка подчеркнута и окрашена в фиолетовый цвет. • Активная ссылка подчеркнута красным цветом. Атрибуты тега <a> Ниже представлены наиболее важные атрибуты тега <a>: • href - значением атрибута является URL-адрес документа, на который указывается ссылка. Является обязательным атрибутом, его значение необходимо задать, чтобы ссылка работала; • target - данный атрибут указывает на то, в каком окне должна открываться страница, к которому ведет ссылка. По умолчанию переход происходит в том же окне. Но можно передать в этот атрибут следующие значения: • download - дополняет атрибут href и сообщает браузеру, что ресурс должен быть загружен в момент, когда пользователь нажимает на ссылку, вместо того, чтобы, например, предварительно открыть его (как PDF-файл).. Абсолютные и относительные ссылки Существует два типа ссылок: • абсолютные; • относительные. Абсолютные ссылки Абсолютная ссылка предполагает указание полного адреса страницы, на которую ссылаетесь. Обычно они начинаются с протокола http:// или https://, далее идет название домена сайта и сама ссылка. Пример абсолютной ссылки: <a href="https://egoroffartem.pythonanywhere.com/course/python/"> Абсолютная ссылка - это адрес ресурса целиком. Обычно такие ссылки ставят на сторонние ресурсы и надеются, что адрес не изменится. Если вы используете абсолютные ссылки на сайте, то при смене структуры папок или перемещении файлов большинство ссылок могут сломаться. Относительные ссылки Относительная ссылка- это линк на отдельную страницу внутри сайта, то есть обеспечивает внутреннюю навигацию. Она отличается тем, что здесь не указывается протокол и имя домена, а указывает только на расположение страницы/документа:/ works/ Изображения Для добавления элемента изображения на страницу необходимо использовать одиночный тег <img>. У тега <img> нет содержимого, поэтому он является пустым. Содержать он может только атрибуты, причем один из них является обязательным. Атрибуте src - путь к изображению, которое вы хотите встроить на страницу. Атрибуты тега <img> Ниже представлены наиболее важные атрибуты тега <img>: src - значение атрибута является URL-адресом нахождения файла изображения. Является обязательным атрибутом, его значение необходимо задать, чтобы изображение добавилось на страницу; alt - данный атрибут задает альтернативное текстовое описание изображения; width - ширина изображения в пикселях; height - высота изображения в пикселях. Таблица Таблица - это структурированный набор данных, состоящий из строк и столбцов (табличных данных). Таблицы позволяют быстро и легко посмотреть значения, показывающие некоторую взаимосвязь между различными типами данных, например, между игроком, его местом и количеством очков.