Файл: Основы программирования на языке HTML (изучение языка программирования HTML).pdf

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

В век цифрoвых технолoгий и массовой компьютеризации, интернет стал неотъемлемой частью нашей жизни, а web-программирование и дизайн престижной и востребованной профессией. Ведь интернет не может существовать сам по себе и кто-то должен создавать интернет страницы, каждый день и даже каждый час обновлять web-сайты, чтобы пользователю всегда была доступна актуальная и проверенная информация в понятной для него форме. Таким образом, вопрос web-программирования и дизайна является очень актуальным. Поэтому тема моей работы связана с созданием web-сайта на языке программирования HTML и программами, с помощью которых можно написать web-страницы.

Также в данной работе мною рассмотрены основы языка программирования Web-страниц - HTML, который является общепринятым стандартом WWW. Это даст нам возможность ознакомиться со структура Web-страницы и приемами ее правильного оформления.

Объект - веб-сайт. Предмет - программирование сайта на языке HTML.

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

Задачи:

 Раскрыть основные сведения о языке;

 Рассмотреть процесс создания сайта;

 Создать веб-сайт на основе разработанного алгоритма.

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

1.История появления

С середины годов, 1990-х веб-разработка была одной из наиболее динамично развивающихся отраслей в мире. В 1995 году меньше, было чем 1000 веб-разработки компании в Соединенных Штатах, но к 2005 году насчитывалось более 30000 таких компаний, только США. в Сети развития промышленности ожидается рост на 20% к 2010 году. Рост этой отрасли толкают крупных желающих компаний, продавать товары и услуги для своих клиентов и автоматизировать. Вместо стоимости в десятки тысяч долларов, как это в было случае раннего создания веб-сайтов, теперь можно разработать простой веб-сайт для менее тысячи долларов, в зависимости от сложности и содержания. объема веб-компании. Малые разработки сайта теперь имеют возможность сделать веб-дизайн доступным небольшим компаниям и частным лицам и дают толчок росту индустрии веб-разработки. Что касается веб-разработки инструментов и платформ, существует множество систем для получения доступной бесплатной помощи. Известным примером является LAMP (Linux, Apache, MySQL, PHP), которая обычно распространяется бесплатно. Уже одно это обстоятельство является фактором создания новых сайтов ежедневно, тем самым способствуя увеличению популярности развития Веб. Другим фактором стало использование WYSIWYG Web.

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

Во всемирной паутине долгое время использовались стандарты HTML 4.01, XHTML 1.0 и XHTML 1.1. Веб-страницы на практике оказывались свёрстаны с использованием смеси особенностей, представленных различными спецификациями, включая спецификации программных продуктов, например веб-браузеров, а также сложившихся общеупотребительных приёмов. HTML5 был создан как единый язык разметки, который мог бы сочетать синтаксические нормы HTML и XHTML. Он расширяет, улучшает и рационализирует разметку документов, а также добавляет единый API для сложных веб-приложений.

WHATWG – (сообщество специалистов по HTML и API, необходимым для веб-приложений, занимающаяся развитием этих технологий и разработкой стандартов для них) начал работу над новым стандартом в 2004 году,когда World Wide Web Consortium (W3C) сосредоточился на будущих разработках XHTML 2.0, а HTML 4.01 не изменялся с 2000 года. В 2009 году W3C признал, что срок работы у рабочей группы XHTML 2.0 истёк, и решил не возобновлять его. Впоследствии W3C и WHATWG совместно разрабатывали HTML5.

Даже несмотря на то, что HTML5 был хорошо известен среди веб-разработчиков в течение нескольких лет, он стал основной темой СМИ только в апреле 2010 года. После этого глава компании Apple Inc. Стив Джобс написал публичное письмо, заголовок которого гласил: «мысли по поводу Flash», где он заключил, что с разработкой HTML5 нет больше необходимости смотреть видеоролики или использовать другие виды приложений с помощью Adobe Flash.По этому поводу вспыхивали дебаты в кругу веб-разработчиков, причём некоторые намекали, что, хотя HTML5 и обеспечивает расширенную функциональность, разработчики должны принимать во внимание различия браузеров и необходимость поддержки различных частей стандартов, равно как и функциональные различия между HTML5 и Flash.

Спецификация HTML5 была принята в качестве точки начала работы над новым HTML рабочей группой W3C в 2007 году. Эта рабочая группа опубликовала спецификацию как первый публичный рабочий проект (working draft) 22 января 2008 года. Рабочий проект — это текущая работа, она оставалась на несколько лет, её части HTML5 были закончены и реализованы в браузерах до того момента, когда вся спецификация достигла финального статуса «Рекомендовано»

1.1 Обзор НТМL

Данный язык прост в освоении и является классическим языком. С помощью него написаны многие сайты можно даже сказать что 90% сайтов написано с его использованием. С годами данный язык совершенствовался и совершенствуется по сей день.

HTML 2.0 - Стандарт был утвержден в ноябре 1944 г. организацией IETF (Internet Engineering Task Force ). В нем были расширены возможности предыдущей версии языка и он получил широкое распространение как у профессионалов, так и любителей.

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

HTML 3.2 (кодовое наименование проекта: “Wilbur”) – Был опубликован и начал широко использоватья с мая 1996 г., получил официальное утвержден в 1997 г. Получил популярность из-за совместимости с HTML 2.0.

HTML 4.0 (кодовое наименование проекта: “Cougar ”) – последняя версия языка. В нем реализованы многие распространенные концепции Web -дизайна и приняты некоторые средства HTML 3.2. Самым значительным отличием HTML 4.0 от предыдущих версий является кодировка Unicode , тег “ Object”, позволяющий работать с мультимедиа ( в т.ч. с видеоклипами и звуком) и др.

HTML5 вводит несколько новых элементов и атрибутов, которые отражают типичное использование разметки на современных веб-сайтах. Некоторые из них — семантические замены для использования универсальных блочных (<div>) и строчных (<span>) элементов, например, <nav> (блок навигации по сайту), <footer>(обычно относится к нижней части страницы или последней строке HTML кода) или <audio> и <video> вместо <object>

На данный момент последней версией является HTML 5.

В HTML5 появились новые средства (элементы, атрибуты, обработчики событий и API), упрощающие разработку веб-приложений и обеспечивающие дополнительные возможности по обработке данных, вводимых в формы. Спецификация HTML5 основана на стандарте HTML 4.01 Strict, но, в отличие от предыдущих стандартов HTML Recommendation, HTMLS не предусматривает использование определения типа документа (DTD - Document Туре Definition). Вместо этого применяется объектная модель документа (DOM - Document Object Model), представляющая собой "дерево", формируемое структурой документа. Эта модель используется в качестве базиса, а не набора определенных синтаксических правил. В HTML5 также предусмотрены подробные инструкции по обработке браузерами некорректных и устаревших элементов разметки.

1.2 Новые семантические элементы в HTML5

В HTML5 появились новые семантические элементы, предназначенные для разметки контента страницы. Дополнительные сведения по каждому из них приведены алфавитный список элементов.

Рисунок 1

1.3 Структура документа HTML5

Структура документа HTML5 существует в виде единственной версии и не использует определение DTD (Document Type Definition — определение типа документа). Документы HTMLS используют упрощенную декларацию DOCTYPE, применяемую для перехода в стандартный режим формирования изображения в окне браузера. Базовый документ HTML5 имеет следующую минимальную структуру.

<!DОСТУРЕ html>

<html>

<head>

<titlе>Заголовок документа</titlе>

</head>

<body> Контент документа ... </body>

</html>

2.Описание сайта

Гипертекстовые ссылки

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

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

Вы можете использовать ссылки как для перемещения по документу, так и для перемещения от одного документа к другому. Однако HTML не поддерживает возврат на предыдущую ссылку, если перемещение происходило внутри документа. Если вы используете ссылки внутри документа, а затем нажимаете на клавишу Back, то вы не перейдете на предыдущую ссылку, а вернетесь на ту часть документа, которую вы просматривали до этого. URL. HTML использует URL (Uniform Resource Locator) для представления гипертекстовых ссылок и ссылок на сетевые сервисы внутри HTML-документа. Первая часть URL (до двоеточия) описывает метод доступа или сетевой сервис. Другая часть URL (после двоеточия) интерпретируется в зависимости от метода доступа. Обычно, два прямых слеша после двоеточия обозначают имя машины: method://machine-name/path/foo.html

Для получения примера <a href= http://my.megacampus.ru>страницу </a>

Данная строка будет выглядеть на экране следующим образом:

Рисунок 2

Пример того,как обрабатывается язык HTML в интернете на рисунке 2:

Рисунок 3

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

<html>

<head>

<title>Гостевая Head First</title> >

</head>

<body>

<h1>Добро пожаловать в гостевую Head First</h1>

<p>

Заходите к нам каждый вечер, чтобы попробовать освежающие напитки, поболтать и, возможно, <em>станцевать разок-другой</em> Всегда обеспечен беспроводной доступ (захватите с собой свой ноутбук).

</p>

<h2>Указатели</h2> >

<p>

Вы найдете нас в самом центре Webville. Присоединяйтесь к нам!

</p>

</body>

</html>

Рисунок 4

Как видно, документ HTML имеет древовидную структуру, корнем которой является элемент <html>. Элемент структуры может быть предком, потомком или братом другого элемента, в зависимости от того, какое место относительно друг друга они занимают в дереве. Например, в обычном HTML-документе элемент <body> является потомком элемента <html> и братом элемента <head>. Для обоих элементов, <body> и <head>, элемент <html> является родителем или предком.

Рисунок 5. Визуальное представление тегов <article> внутри основного раздела веб-страницы.

Как любая независимая часть документа, содержимое каждого элемента <article> обладает собственной структурой. При определении этой структуры мы можем пользоваться преимуществами, которые дает нам универсальность тегов <header> и <footer>, рассмотренных ранее. Это переносимые теги, и их можно использовать не только в теле документа, но и внутри любого его раздела.

Браузеры и программы, которые исполняют и отображают веб сайты, считывают код и создают собственную внутреннюю структуру для интерпретации и обработки каждого элемента. Эта внутренняя структура состоит из разделов, не имеющих ничего общего с разделами документа, которые мы определили в коде, например, с помощью элементов <section>. Речь идет о концептуальных разделах, генерируемых во время интерпретации кода. Элемент <header> сам по себе не создает отдельного концептуального раздела. Это означает, что элементы внутри <header>, представляющие разные уровни заголовков, могут привести к формированию нескольких концептуальных разделов. Элемент <hgroup> был создан специально для группировки тегов <h>, чтобы избежать ошибок интерпретации HTML-кода браузерами.