Преподаватель который помогает студентам и школьникам в учёбе.

Основы программирования на языке HTML с примерами использования

Содержание:

Введение

Актуальность. Собственно, появление html и ознаменовало появление интернета в том виде, в котором мы его знаем сейчас, приведя к началу бурного роста сети и количества сайтов в ней. HTML - это сокращение от англ. "HyperText Markup Language", что в переводе на русский означает "язык гипертекстовой разметки". HTML - это стандартный язык, который и по сей день используется для создания веб-страниц, размещаемых в интернете.

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

Цель работы – изучить основы программирования на языке HTML.

Достижение указанной цели определило постановку и решение следующих задач:

исследовать историю языка HTML;
выделить преимущества и недостатки языка HTML;
изучить основы программирования на языке HTML.

Предметом исследования можно назвать языки программирования.

Объектом исследования является язык HTML.

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

Структура работы. Работа включает введение, две главы, заключение и список литературы. В первой главе рассматриваются история, преимущества и недостатки языка Pascal. Во второй главе рассматриваются основы программирования на языке Pascal. В третьей главе приведен пример использования языка HTML.

Научно-методической основой работы служат труды отечественных и зарубежных ученых в области программирования. При выполнении работы использовалась научно-методическая литература, публикации в периодической печати и научных изданиях, материалы Интернет-порталов.

Глава 1. Теоретические основы языка HTML

1.1. История языка HTML

Свою историю HTML начинает с 1986 года, когда Международной организацией по стандартизации (ISO) был принят стандарт озаглавленный "Standard Generalized Markup Language" - SGML. Этот стандарт был посвящен описанию обобщенного мета языка, который позволял строить системы логической структурной разметки любых разновидностей текстов. Он соответствовал международному стандарту ISO 8879^[1].

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

Идеология SGML повлияла на многие компьютерные разработки, однако сам по себе язык не получил обширного распространения.

Тим Бернерс Ли

Рисунок 1. Создатель HTML

В 1991 году, британским ученым Тимом Бернерсом Ли, сотрудником Европейского института физики частиц (CERN) в Женеве, была разработана система передачи гипертекстовой информации через интернет. А за основу нового языка был взят SGML. Язык разметки гипертекста был назван - HTML (Hyper Text Markup Language) и он является до сих пор самым известным из приложений SGML. HTML в первую очередь был разработан для обмена научной и технической документации для использования людьми, не являющимися специалистами в области верстки. Путем определения небольшого набора структурных и семантических элементов, получались достаточно простые и в тоже время красиво оформленные документы. HTML успешно справился с проблемами SGML^[2].

Как и положено изначально язык HTML разделял все особенности идеологии SGML. Но в 1993 году появляется версия языка HTML 1.2, которая имела сорок с небольшим тегов, три из которых не рекомендованы к использованию, так как указывали на физические параметры предоставления документа, что противоречило идеологии SGML. Вся разметка была логической и только в описательной части стандарта можно было увидеть что-то типа ” в графических браузерах действие этого тега может передаваться жирным начертанием”.

Программа Mosaic была единственной в то время браузером поддерживающим графические возможности. Она была разработана в Национальном центре суперкомпьютерных приложений США (National Center for Supercomputer Applications - NCSA), там же, кстати, была разработана WWW (World Wide Web). По этой причине никаких противоречий между официальными стандартами и их реализацией в браузерах тогда не существовало^[3].

В апреле 1994 года был образован Консорциум W3C (World Wide Web Consortium). Так как официальной спецификации HTML 1.0 не существовало, W3C начал заниматься подготовкой спецификации HTML следующей версии. Но чтобы стандартная версия отличалась от всех предыдущих, ей сразу присвоили номер 2.0. Разработка спецификации HTML 2.0 шла не спеша и лишь в сентябре 1995 года она была утверждена. Из больших дополнений был добавлен лишь механизм форм для отсылки информации с компьютера пользователя на сервер^[4].

Тем временем Консорциум W3 в параллель со спецификацией 2.0 занимался обсуждением HTML 3.0. Она была предложена в марте 1995 года. Третья версия предлагала много новых возможностей: поддержка таблиц, обтекание изображения текстом, отображение сложных математических формул, примечания. Поддержка этого стандарта браузерами того времени была не удовлетворена.

Авторы HTML 3 добавили поддержку нового средства - иерархические стилевые спецификации (Cascading Style Sheets, CSS). Это нововведение нужно было для того, чтобы разрешить назревшее к тому времени противоречие между идеологией структурной разметки и потребностями пользователей, которым в первую очередь нужно было гибкость и обширные возможности визуального представления. CSS имеет свой синтаксис и является формально независимой от HTML.

HTML 3.0 включал интересные новинки^[5]:

Разметку математических формул
Теги для создания страниц
Вставку рисунков, обтекаемых текстом
Примечаний и т.д.

Однако, этого было недостаточно, потребность в визуальном оформлении гипертекстовых страниц становилась все более актуальной. Тогда, W3С приступили к созданию самостоятельной системы, при этом не противоречащей основам HTML, но позволяющей описывать визуальное оформление документов. Результатом стало появление CSS - Cascading Style Sheets, иерархические стилевые спецификации, наделенные уникальным синтаксисом, структурой, задачами^[6].

Следующей версией HTML стала 3.2 и в ней были опущены многие нововведения из версии 3.0.

18 декабря 1997 года бала принята четвертая версия HTML. Она содержала как и третья много элементов, специфичных для отдельных браузеров. Хотя в HTML 4.0 произошла чистка элементов из предыдущих версий спецификаций. Многие элементы были помечены как устаревшие и не рекомендуемые к использованию. Вместо них рекомендовалось использовать таблицы стилей CSS.

HTML 4.01 утвердили 24 декабря 1999. Изменения принятые в нем были более значительные, чем, кажется на первый взгляд.

Сейчас W3C занимается разработкой пятой версии языка HTML. Ее черновой вариант стал доступен 20 ноября 2007 года.

В параллель ведется также разработка XHTML (Extensible Hypertext Markup Language) - расширяемый язык разметки гипертекста. В нем предъявляются более строгие требования к синтаксису, чем в HTML. XHTML 1.0 был утвержден 26 января 2000 года в качестве рекомендации W3C. Вариант XHTML 1.1 одобрен в качестве рекомендации консорциума 31 мая 2001года^[7].

Со спецификациями HTML всегда можно ознакомиться на официальном сайте Консорциума W3C по адресу http://www.w3c.org. Спецификация, предложенная W3C должна быть управляющей и направляющей, обеспечивая одинаковую форму представления информации различными браузерами. В реале с этим не все так хорошо и не всегда различные браузеры отображают одну страницу одинаково. Но это дает стимул к усовершенствованию возможностей браузера и уточнения спецификации. Этот процесс идет непрерывно.

Изначально вся разметка HTML была исключительно логической. Одним из самых ярких моментов стал проект HTML3, работа над которым началась в марте 1995 года, и в котором были представлены интересные нововведения: возможность создания таблиц, примечаний, вставки рисунков, обтекаемых текстом и т.д. HTML3 – это попытка посмотреть на сайт глазами пользователей, которым важно визуальное представление текста^[8].

Авторы HTML3 ввели поддержку Cascading Style Sheets (каскадные таблицы стилей, также известные как CSS). С помощью этого нововведения стало реальным указывать шрифт, цвет, размер и любые мыслимые параметры текста, причем это было достигнуто не введением новых тегов, но разработкой нового механизма, которые влияют на уже существующие теги, при необходимости эти стили легко игнорируются (в случае браузеров с текстовым интерфейсом, либо синтезатором речи)^[9].

Однако разработчики одного из самых популярных на тот момент браузеров NetscapeNavigator, в целях укрепить своё лидерство, вводили в HTML всё новые теги и усовершенствования, которые поддерживал исключительно один браузер – NetscapeNavigator. Большинство новых тегов вводились для улучшения внешнего вида страницы, увеличения возможностей её форматирования. В 1996 году появился InternetExplorer 3.0 с поддержкой большинства расширений Netscape, что позволило составить конкуренцию популярнейшему браузеру. Также компания Microsoft получила право едва ли не решающего голоса в разработке HTML3, который был заморожен, а вместо него в кротчайшие сроки появился HTML 3.2, где описано большинство расширений Netscape.

В 1997 году появился HTML4.0, а в 1999 – HTML 4.1, который после не изменялся. В 2014 году был завершен стандарт HTML 5, который кардинально отличается от прошлых версий HTML.

1.2. Преимущества и недостатки языка HTML

Использование языка программирования нового поколения позволяет создавать веб-документы с более простой структурой и чистым кодом. В отличие от предыдущей версии, пятое поколение языка программирования использует вместо контейнеров div семантические элементы nav, article, header, footer, aside и section. Ко всему прочему, HTML5 существенно облегчает работу с файлами мультимедиа: так, пользователи могут слушать музыку и смотреть видео прямо в браузере без использования Adobe Flash и прочих приложений. Дополнительные программы не потребуются и при размещении фотографий и прочей графики. Метаморфозы затронули также процесс ввода данных, который в пятом поколении языка программирования стал намного проще и безопаснее^[10].

Если в предыдущей версии система сообщала об ошибке ввода данных постфактум, то теперь пользователь будет оповещён незамедлительно, что снимет массу проблем, связанных с отправкой неверно составленных документов. Что касается внешнего вида, то новый язык программирования существенно расширяет возможности оформления сайтов и приложений, за счёт чего html 5 игры и сайты станут ещё более оригинальными и интересными. Благодаря новой функции Canvas, которая реализована в пятой версии веб-языка, можно будет размещать на сайтах небольшие html 5 игры, анимацию и динамическую графику без использования дополнительных программ.К тому же данная функция позволяет создавать качественно новые html 5 игры и пользовательские интерфейсы^[11].

Одним из тонких мест нового поколения веб-языка является защита данных. При использовании HTML 5 на винчестере пользователя долгое время хранится большой объём данных, что позволяет злоумышленникам осуществлять несанкционированный доступ к ресурсам компьютера с целью сбора конфиденциальной информации. Некоторая уязвимость HTML 5 имеет место быть и в сфере игр. Так, контент не может похвастаться высокой производительностью, платформы весьма ограничены в своём применении, а на создание контента с использованием HTML 5 требует больших затрат ресурсов и времени^[12].

Ко всему прочему, до недавнего времени поддержкой HTML 5 могли похвастаться далеко не все браузеры. Несмотря на то, что сегодня ситуация в корне изменилась, и теперь абсолютное большинство программ распознают пятое поколения языка программирования, всё же остаются единичные экземпляры, которые с ним до сих пор не знакомы. Самым совместимым с HTML 5 считается браузера Chrom, а именно его 18-я версия. Программа, создателем которой является Google, имеет модуль Canvas 2D, который существенно облегчает работу в ресурсами, разработанными с помощью HTML 5. Впрочем, недостатки новой версии языка программирования не снижают его популярности даже среди таких гигантов, как YouTube, Google и т.д., которые активно осваивают данную веб-технологию.

Огромный вклад в расширение практического использования нового языка программирования сделала корпорация Google, которая любезно предоставила свои стартовые страницы, чтобы рекламировать на них html 5 игры, сайты и веб-приложения. Ярким примером использования расширенных возможностей языка является страничка http://www.google.com.hk/intl/zh-CN/landing/shuixia/, которая предназначена для поздравления жителей Гонконга. Если пощёлкать компьютерной мышкой ниже вотерлинии, то обычная стартовая страница Google превратится в островок удовольствия.

Ещё один пример применения возможностей HTML 5 в Google – это визуализация главной странички в форме аркадной игрушки в духе Кибериады, что было сделано в честь дня рождения Станислава Лемма. Для того, чтобы освоить весь безграничный потенциал нового языка Интернета, необходимо пройти курс обучения. Желательно, чтобы обучение происходило в игровой форме. Такую уникальную возможность предоставляет сайт http://html5game.ru/, который радует пользователей с самой первой страницы – наводя мышку на шапку, можно с удовольствием наблюдать, как она разлетается на сотни шариков, а потом вновь возвращается в своё исходное состояние^[13].

В учебных целях сайт предлагает широкий инструментарий по созданию html 5 игр, а это, как известно, лучший способ освоить новый язык программирования. Немалую обучающую ценность несёт в себе графический редактор http://www.picozu.com/editor, который позволяет рисовать, пользуясь инструментарием, разработанным в HTML5.

Выводы по главе 1:

В 1991 году, британским ученым Тимом Бернерсом Ли, сотрудником Европейского института физики частиц (CERN) в Женеве, была разработана система передачи гипертекстовой информации через интернет. А за основу нового языка был взят SGML. Язык разметки гипертекста был назван - HTML (Hyper Text Markup Language) и он является до сих пор самым известным из приложений SGML. HTML в первую очередь был разработан для обмена научной и технической документации для использования людьми, не являющимися специалистами в области верстки. Последняя версия языка это HTML 5.0.

Новый язык программирования обладает как неопровержимыми преимуществами перед предыдущими версиями, так и грешит некоторыми недостатками. К неоспоримо сильным сторонам HTML 5 принадлежат невероятно большие возможности по созданию качественно новой графики. Особую благодарность в этом следует выразить тегу canvas, который уже стал внедряться во многие браузеры. Благодаря функции canvas веб-разработчики получили расширенные возможности по созданию графики нового поколения.

Сайты, разработанные с использованием HTML5, прогружаются намного быстрее традиционного флэша, но какое-то время на их загрузку всё же требуется. Для того, чтобы игры, сайты и онлайн-приложения, основанные на HTML5, могли в максимальной степени проявить все свои преимущества, может потребоваться компьютер с высокой мощностью и функционалом. В противном случае многие из преимуществ HTML5 могут остаться в тени для пользователя. Несмотря на то, что пятое поколение языка программирования пока не получило официального одобрения от W3C, всё же, как ожидается, справедливость восторжествует и HTML5 проникнет во все сферы деятельности в сети уже в ближайшее время.

Глава 2. Основы программирования на языке HTML

2.1. Структура HTML-документа

HTML-документ состоит из двух частей: собственно текста, т. е. данных, составляющих содержимое документа, и тегов — специальных конструкций языка HTML, используемых для разметки документа и управляющих его отображением. Теги языка HTML определяют, в каком виде будет представлен текст, какие его компоненты будут исполнять роль гипертекстовых ссылок, какие графические или мультимедийные объекты должны быть включены в документ^[14].

Графическая и звуковая информация, включаемая в HTML-документ, хранится в отдельных файлах. Программы просмотра HTML-документов (браузеры) интерпретируют флаги разметки и располагают текст и графику на экране соответствующим образом. Для файлов, содержащих HTML-документы приняты расширения .htm или .html.

HTML страница состоит из нескольких основных частей, которые должны, в «идеале», присутствовать в любом документе:

Строка, указывающая тип текущего документа – DTD (document type definition – описание типа документа). Различают несколько видов описаний, в зависимости от версии HTML, на которую ориентированы.

Тег ‹html›, который определяет начало документа

Раздел ‹head› - блок заголовка документа, содержит текст и теги служебной информации, и не отображается на странице, кроме соответственно самого заголовка документа. Раздел должен обязательно содержать закрывающий тег ‹/head›, чтобы показать конец раздела.

Раздел ‹body› - тело документа, содержательная часть веб страницы. Этот раздел тоже имеет закрывающий тег ‹/body›.

И ‹/html›- завершает описание HTML документа.

В большинстве случаев теги используются парами. Пара состоит из открывающего <имя_тега> и закрывающего </имя_тега> тегов. Действие любого парного тега начинается с того места, где встретился открывающий тег, и заканчивается при встрече соответствующего закрывающего тега. Часто пару, состоящую из открывающего и закрывающего тегов, называют контейнером, а часть текста, окаймленную открывающим и закрывающим тегом, — элементом.

Последовательность символов, составляющая текст может состоять из пробелов, табуляций, символов перехода на новую строку, символов возврата каретки, букв, знаков препинания, цифр, и специальных символов (например #, +, $, @), за исключением следующих четырех символов, имеющих в HTML специальный смысл: < (меньше), > (больше), & (амперсанд) и " (двойная кавычка). Если необходимо включить в текст какой-либо из этих символов, то следует закодировать его особой последовательностью символов.

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

HTML-документ состоит из двух частей: заголовок (head) и тела (body), расположенных в следующем порядке:

Чаще всего в заголовок документа включают парный тег <title>... </title>, определяющий название документа. Многие программы просмотра используют его как заголовок окна, в котором выводят документ. Программы, индексирующие документы в сети Интернет, используют название для идентификации страницы. Хорошее название должно быть достаточно длинным для того, чтобы можно было корректно указать соответствующую страницу, и в то же время оно должно помещаться в заголовке окна. Название документа вписывается между открывающим и закрывающим тегами.

Тело документа является обязательным элементом, так как в нем располагается весь материал документа. Тело документа размещается между тегами <body> и </body>. Все, что размещено между этими тегами, интерпретируется браузером в соответствии с правилами языка HTML позволяющими корректно отображать страницу на экране монитора.

Текст в HTML разделяется на абзацы при помощи тега <р>. Он размещается в начале каждого абзаца, и программа просмотра, встречая его, отделяет абзацы друг от друга пустой строкой. Использование закрывающего тега </р> необязательно.

Если требуется «разорвать» текст, перенеся его остаток на новую строку, при этом, не выделяя нового абзаца, используется тег разрыва строки <BR>. Он заставляет программу просмотра выводить стоящие после него символы с новой строки. В отличие от тега абзаца, тег <BR> не добавляет пустую строку. У этого тега нет парного закрывающего тега.

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

При использовании логического форматирования текста браузером выделяются различные части текста в соответствии со структурой документа. Чтобы отобразить название, используется один из тегов заголовка. Заголовки в типичном документе разделяются по уровням. Язык HTML позволяет задать шесть уровней заголовков: h1 (заголовок первого уровня), h2, h3, h4, h5 и h6. Заголовок первого уровня имеет обычно больший размер и насыщенность по сравнению с заголовком второго уровня. Пример использования тегов заголовков:

<hl>l. Название главы</hl>

<h2>l.l. Название раздела</h2>

Теги физического форматирования непосредственно задают вид текста на экране браузера, например пара <b></b> выделяет текст полужирным начертанием, <u></u>задает подчеркивание текста, <font></font> управляет шрифтом текста.

Тег <img> вставляет изображение в документ, как если бы оно было просто одним большим символом. Пример применения тега:

Для создания гипертекстовой ссылки используется пара тегов <а>... </а>. Фрагмент текста, изображение или любой другой объект, расположенный между этими тегами, отображается в окне браузера как гипертекстовая ссылка. Активация такого объекта приводит к загрузке в окно браузера нового документа или к отображению другой части текущей Web-страницы. Гипертекстовая ссылка формируется с помощью выражения:

Href здесь является обязательным атрибутом, значение которого и есть URL-адрес запрашиваемого ресурса. Кавычки в задании значения атрибута href не обязательны. Если задается ссылка на документ на другом сервере, то вид гиперссылки такой:

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

2.2. Основные теги языка HTML

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

Регистр символов для отображения тегов не важен, например, и означает одно и то же. Однако в этом курсе используется нижний регистр для написания тегов. Это связано с тем, что консорциум WWW (W3C), который занимается стандартизацией спецификации HTML, рекомендует использовать теги в нижнем регистре, поскольку в следующем поколении стандартов будет именно такое требование.

Таблица 1

Основные теги HTML^[15]

Тег	Описание
<html>	Определяет документ HTML
<body>	Определяет основную часть или тело документа
<h1>--<h6>	Определяет заголовки с 1 по 6
<p>	Определяет параграф
<br>	Вставляет единичный перенос строки
<hr>	Определяет горизонтальную линейку
<!-->	Определяет комментарий

Теги могут иметь атрибуты, которые предоставляют дополнительную информацию об элементах HTML. Атрибуты всегда используются в виде пары "имя/значение". Общий формат задания атрибутов имеет вид:

Например, тег:

означает, что цвет фона страницы должен быть красным. А тег:

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

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

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

Кроме атрибутов, записываемых вышеописанным способом, для некоторых элементов определены специальные флаги, которые просто указываются как .

Заголовки определяются с помощью тегов от до определяет заголовок самого большого размера, а определяет заголовок самого маленького размера.

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

Пример:

Выводы по главе 2:

Главным элементом любой HTML страницы является одноименный тег ‹html›. Этот тег содержит внутри себя все остальные структурные части страницы и явно указывает браузеру, что обрабатывается HTML код. Он имеет закрывающий тег. Теги могут иметь различные атрибуты, значения которых указывается в двойных или одиночных кавычках.

Комментарии используются для пояснения кода на странице, обозначают части внутри документов, позволяют временно скрыть контент или разметку страницы. Любой текст или разметка размещенные между комментариев не отображаются в браузере.

Глава 3. Пример использования языка HTML

Откройте блокнот и скопируйте в него следующее:

<html>

<head>

<title>Главная страница - страница обо мне</title>

</head>

<body>

<center><h1>Информация обо мне</h1></center>

Краткая биография обо мне

Родился в 1985 году в городе Москва. Закончил в 2008 году МАИ.

На данный момент работаю ведущим инженером в крупной авиакомпании.

<center><img alt="Два самолета"

src="https://imgfotki.yandex.ru/get/9931/160700675.0/0_110e34_54188f48_-1-orig">

</center>

<font style="color:green">Этот текст зеленый</font>

<b>Просто пример жирного текста</b>

Низ страницы

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

<hr>

Этот материал был написан благодаря сайту

http://zarabotat-na-sajte.ru/</a> - за что я ему благодарен.

Спасибо. До новых встреч!

</body>

</html>

Далее нажмите "сохранить как", в поле тип файла выберите "все файлы", а в названии напишите index.html. Обязательно в конце названия должно быть расширение .html (не .txt), иначе браузеры не будут интерпретировать его как веб-документ.

Описание html тегов из примера:

1. <html></html> — эти теги должны присутствовать на каждой веб-странице обязательно. Они сообщают браузерам и поисковым машинам, что это html-страница.

Любая html страница имеет следующую структуру:

2. <body></body> — между этими тегами заключается весь видимый контент страницы.

3. <head></head> — внутри этих тегов должны располагаться все заголовочные теги. Этот раздел можно опустить, но я не советую это делать, поскольку это важная часть документа, особенно для поисковых систем. Более подробно про <head></head> читайте в описание заголовочных тегов

4. <title></title> — между этими тегами прописывается заголовок страницы, которое отображается в самом вверху браузера. Кстати, когда Вы что-то ищите в поисковиках, то первое, что отображается, это как раз название страницы. Тег <title></title> часто сокращенно называют "тайтлом". Советую ознакомиться со статьей: как составить тег <title>

Теперь перейдем к тегам, которые находятся в теле html страницы (внутри <body> и </body>).

5. <center></center> — эти теги выравнивают все, что находится внутри них по центру. В данном случае центром будет - центр экрана. В будущем рекомендуется отказаться от использования этих тегов.

6. <h1></h1> — это один из класса тегов заголовочных тегов <h1>..<h6>, обычно в него заключают название страницы. Например, у этой странице заголовочный тег "Пример создания html страницы".

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

При составлении html-кода нужно придерживаться простого правила: сначала должен идти заголовочный тег <h1>, а дальше могут идти уже <h2>, <h3> и т.д. Главное, чтобы не было сначала <h2>, потом <h1>, потом <h3> и т.п. Должна быть строгая иерархия. Заголовков <h2>, <h3> и т.п. может быть много.

7. <br/> — это одиночный тег, который не требует закрывающего тега. Он осуществляет переход на следующую строку. В моем примере написаны два одиночных тега подряд, чтобы дважды перейти на следующую строку.

8. <img alt="подсказка" src="URL_ИЗОБРАЖЕНИЯ"> — это одиночный тег, который выводит изображение.

src — обязательный параметр, в котором указывается адрес изображения (вместо URL_ИЗОБРАЖЕНИЯ необходимо прописать адрес, где хранится Ваше изображение).

Примечание: Если изображение находится в одной папке с Вашей html-страницей, то достаточно написать название изображения, иначе нужно прописывать либо абсолютный или относительный URL;

Не забудьте указать расширение изображения. Например, .jpg, .gif, .jpeg.

alt или title — в эти параметры можно записать описание к Вашему изображению. Когда Вы наведете мышкой на изображение, то появится это описание. Эти параметры важны для продвижения сайта, особенно в поиске по картинкам. Если изображение не удалось загрузить, то будет выведен этот текст, что также является плюсом.

9. <font></font> — эти теги созданы для изменения шрифта, фона, размера и т.д. Короче говоря, все, что связано с форматированием текста можно настроить в одном теге. Это тег имеют довольно много атрибутов, о которых я расскажу в отдельном уроке.

Примечание: <span></span> — аналогичный тег.

Есть также свойство CSS font, в котором можно задавать все эти параметры.

10. <b></b> — выделить жирным. Все, что заключено между <b> и </b>будет выделено жирным. Например, если Вы напишите его в самом начале контента, а закроете в самом конце, то весь текст на странице будет выделен жирным. Это довольно часто встречающийся тег, аналогом которого является <strong></strong>.

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

11. <hr/> — одиночный тег, который выводит горизонтальную линию. Имеет несколько параметров, о которых будет сказано позднее.

12. <a href="URL">текст_ссылки</a> — тег для создания ссылок.

href="URL" — этому параметру необходимо присвоить URL ссылки, на которую ведет ссылка. Является обязательным параметром.

Примечание: Если документ, на который Вы хотите перейти, находится в одной папке с Вашей html-страницей, то достаточно написать название этого документа. Например:

Заключение

В 1991 году, британским ученым Тимом Бернерсом Ли, сотрудником Европейского института физики частиц (CERN) в Женеве, была разработана система передачи гипертекстовой информации через интернет. А за основу нового языка был взят SGML. Язык разметки гипертекста был назван - HTML (Hyper Text Markup Language) и он является до сих пор самым известным из приложений SGML. HTML в первую очередь был разработан для обмена научной и технической документации для использования людьми, не являющимися специалистами в области верстки. Последняя версия языка это HTML 5.0.

Основным элементом языка HTML являются теги. Тег - это, как правило, парная конструкция, предназначенная для задания свойств текста или другой информации, расположенной внутри него.

В третьей главе мы рассмотрели пример создания HTML страницы в блокноте, а также рассмотрели теги которые использовали при написании.

Список литературы

HTML 5: эволюция мутаций, или куда доведет язык [Электронный ресурс]/Режим доступа URL: http://sotoman.ru/reviews/ID_987.html дата обращения (30.09.2018)

HTML для новичков https://zarabotat-na-sajte.ru/uroki-html/ дата обращения (30.09.2018)

HTML 5: нововведения, преимущества и недостатки http://ua-blogger.com/html-5-novovvedeniya-preimuschestva-i-nedostatki.html дата обращения (30.09.2018)

Гулевич П. Секреты создания HTML сайта с нуля – М.: Webmoment, 2010. – [Электронный ресурс]. URL: http://www.razym.ru/56732-pavel-gulevich-sekretysozdaniya-html-sajta-s.html (дата обращения: 30.09.2018).

Дакетт, Д. HTML и CSS. Разработка и дизайн веб-сайтов / Д. Дакетт. - М.: Эксмо, 2015. - 480 c.

Дронов, В. HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов / В. Дронов. - М.: БХВ-Петербург, 2014. - 138 c.

Дунаев В.В. «HTML, скрипты и стили» - БХВ-Петербург, 2014. - 208 c.

Егорова Ю.Н., Мытникова Е.А., Мытников А.Н., Егорова О.А. Программный комплекс оценки угроз информационной безопасности информационных систем как эффективное средство формирования профессиональных компетентностей бакалавров по дисциплине «Информационная безопасность»//Современные наукоемкие технологии. — 2016. — № 4-1. — С. 109-113.

Иванов С.О., Ильин Д.В., Ильина Л.А., Назарова О.В. Имитационное моделирование средств защиты информации, соответствующих общим критериям международного стандарта ISO/IEC 15408 // Вестник Чувашского университета. — 2016. — № 3. — С. 194-200.

Коваленко, Т.А. HTML – развитие языка стандарта отображения страниц / Т.А. Коваленко, В. Барнаш // Сборник Вопросы образования и науки. Международной научно-практической конференции.2017—С.64-66.

Лазаро, Исси Коэн Полный справочник по HTML, CSS и JavaScript / Лазаро Исси Коэн, Джозеф Исси Коэн. - М.: ЭКОМ Паблишерз, 2014. - 938 c.

Макфарланд Д. Большая книга CSS3 - М.:Питер, 2015. - 608c.

Основные теги в HTML https://zarabotat-na-sajte.ru/uroki-html/osnovnie-tegi-html.html дата обращения (30.09.2018)

Прохоренок, Н. А. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера / Н.А. Прохоренок, В.А. Дронов. - Москва: СПб. [и др.] : Питер, 2015. - 768 c.

Фримен Э. «Изучаем программирование на HTML5» - Питер, 2013. - 592 c.

Коваленко, Т.А. HTML – развитие языка стандарта отображения страниц / Т.А. Коваленко, В. Барнаш // Сборник Вопросы образования и науки. Международной научно-практической конференции.2017—С.64-66. ↑
Лазаро, Исси Коэн Полный справочник по HTML, CSS и JavaScript / Лазаро Исси Коэн, Джозеф Исси Коэн. - М.: ЭКОМ Паблишерз, 2014. - 938 c. ↑
Прохоренок, Н. А. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера / Н.А. Прохоренок, В.А. Дронов. - Москва: СПб. [и др.] : Питер, 2015. - 768 c. ↑
Дронов, В. HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов / В. Дронов. - М.: БХВ-Петербург, 2014. - 138 c. ↑
Дунаев В.В. «HTML, скрипты и стили» - БХВ-Петербург, 2014. - 208 c. ↑
Макфарланд Д. Большая книга CSS3 - М.:Питер, 2015. - 608c. ↑
Фримен Э. «Изучаем программирование на HTML5» - Питер, 2013. - 592 c. ↑
Гулевич П. Секреты создания HTML сайта с нуля – М.: Webmoment, 2010. – [Электронный ресурс]. URL: http://www.razym.ru/56732-pavel-gulevich-sekretysozdaniya-html-sajta-s.html (дата обращения: 30.09.2018). ↑
Иванов С.О., Ильин Д.В., Ильина Л.А., Назарова О.В. Имитационное моделирование средств защиты информации, соответствующих общим критериям международного стандарта ISO/IEC 15408 // Вестник Чувашского университета. — 2016. — № 3. — С. 194-200. ↑
Егорова Ю.Н., Мытникова Е.А., Мытников А.Н., Егорова О.А. Программный комплекс оценки угроз информационной безопасности информационных систем как эффективное средство формирования профессиональных компетентностей бакалавров по дисциплине «Информационная безопасность»//Современные наукоемкие технологии. — 2016. — № 4-1. — С. 109-113. ↑
HTML 5: эволюция мутаций, или куда доведет язык [Электронный ресурс]/Режим доступа URL: http://sotoman.ru/reviews/ID_987.html дата обращения (30.09.2018) ↑
HTML 5: нововведения, преимущества и недостатки http://ua-blogger.com/html-5-novovvedeniya-preimuschestva-i-nedostatki.html дата обращения (30.09.2018)

↑
Дакетт, Д. HTML и CSS. Разработка и дизайн веб-сайтов / Д. Дакетт. - М.: Эксмо, 2015. - 480 c. ↑
HTML для новичков https://zarabotat-na-sajte.ru/uroki-html/ дата обращения (30.09.2018) ↑
Основные теги в HTML https://zarabotat-na-sajte.ru/uroki-html/osnovnie-tegi-html.html дата обращения (30.09.2018) ↑