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

Основы программирования на языке HTML (изучение языка программирования HTML)

Содержание:

Введение

Люди получают доступ к этой информации посредством использования технологии 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-кода браузерами.

2.1 Графика внутри документа

Одна из наиболее привлекательных черт Web - возможность включения ссылок на графические и иные типы данных в HTML-документ. Делается это при помощи тэга <IMG...ISMAP>. Использование данного тэга позволяет значительно улучшить внешний вид и функциональность документов.

Существует два способа использования графики в HTML-документах. Первый - это внедрение графических образов в документ, что позволяет пользователю видеть изображения непосредственно в контексте других элементов документа. Это наиболее используемая техника при проектировании документов, называемая иногда "inline image". Синтаксис тэга:

Опишем элементы синтаксиса тэга::

Обязательный параметр, имеющий такой же синтаксис, как и стандартный URL. Данный URL указывает браузеру где находится рисунок. Рисунок должен храниться в графическом формате, поддерживаемом браузером. На сегодняшний день форматы GIF и JPG поддерживаются большинством браузеров.="text":

Данный необязательный элемент задает текст, который будет отображен браузером, не поддерживающим отображение графики или с отключенной подкачкой изображений. Обычно, это короткое описание изображения, которое пользователь мог бы или сможет увидеть на экране. Если данный параметр отсутствует, то на месте рисунка большинство браузеров выводит пиктограмму (иконку), активизировав которую, пользователь может увидеть изображение. Тэг ALT рекомендуется, если ваши пользователи используют браузер, не поддерживающий графический режим, например Lynx.=n1:

Данный необязательный параметр используется для указания высоты рисунка в пикселях. Если данный параметр не указан, то используется оригинальная высота рисунка. Это параметр позволяет сжимать или растягивать изображения по вертикали, что позволяет более четко определять внешний вид документа. Однако, некоторые браузеры не поддерживают данный параметр. С другой стороны, экранное разрешение у вашего клиента может отличаться от вашего, поэтому будьте внимательны при задании абсолютной величины графического объекта.=n2:

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

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

Приведем пример использования данного тэга:

С версии HTML 2.0 у тэга <IMG> появились дополнительные параметры:

Новые параметры::

Данный параметр позволяет автору определить ширину рамки вокруг рисунка.:

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

То же самое, что и VSPACE, но только по горизонтали.

Фоновые рисунки. Большинство браузеров позволяет включать в документ фоновый рисунок, который будет матрицироваться и отображаться на фоне всего документа. Некоторые пользователи любят фоновую графику, некоторые нет. Ненавязчивый полупрозрачный рисунок (обои) обычно хорошо выглядит в качестве фона для большинства документов.

Описание фонового рисунка включается в тэг BODY и выглядит следующим образом:

<BODY BACKGROUND="picture.gif">.

Задание стандартных цветов. Многие HTML-авторы любят использовать заранее предопределенные цвета фона документа, обычного текста и ссылок. Чтобы задать эти цвета, необходимо включить в тэг <BODY> дополнительные параметры:

<BODY BGCOLOR="#XXXXXX" TEXT="#XXXXXX" LINK="#XXXXXX"> каждый из параметров определяет цвет того или иного элемента. Опишем эти параметры::

Цвет фона документа:

Цвет простого текста документа:

Цвет ссылки. Цвет задается шестизначным числом в шестнадцатеричном формате по схеме RGB (Red, Green, Blue). Цвет #000000 соответствует черному, а цвет #FFFFFF - белому. Например: <BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#9690CC">

Данная строка определяет белый цвет фона документа, черный текст и серебристые ссылки.

Горизонтальная линия. Используя тэг <HR>, вы можете разделить текст горизонтальной чертой.

Формат тэга:

Параметры тэга::

Толщина линии в пикселях.:

Ширина линии в пикселях или процентах от ширины окна броузера.: Расположение на экране (слева | по центру | справа).: По умолчанию линия представлена в 3D виде с тенью. NOSHADE позволяет представить линию просто однотонной темной полоской.

2.2 Добавление стилей в документ

позволяет использовать различные стили шрифтов для выделения текстовой информации в ваших документах. Вот короткий список стилей, поддерживаемых большинством браузеров:(жирный)(наклонный)spaced (type writer - с использованием фиксированных шрифтов)

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

Таблица №1: Основные стили текста

Стиль	Элемент или тэг	Результат
Bold	<B> Этот текст жирный </B>	Этот текст жирный
Italic	<I> Этот текст наклонный </I>	Этот текст наклонный
Mono spaced	<TT> Этот текст с непроп. шрифтом </TT>	Этот текст с непроп. шрифтом

Комбинирование стилей позволяет вам отображать в одной строке несколько элементов различными стилями, например:

<b>Жизнь</b> - <i>это <b>песня!</b></i>

Жизнь - это песня!

Внимание! Добавление большого количества стилей и их комбинаций приводит к затруднению чтения текста!

Дополнительные стили:

· big (большой)

· small (маленький)

· sub (подстрочник)

· sup (надстрочник)

Таблица №2: Дополнительные стили текста

Стиль	Элемент или тэг	Результат
Big	Этот текст <BIG> большой </BIG>	Этот текст большой
Small	Этот текст <SMALL> маленький </SMALL>	Этот текст маленький
Sub	Этот текст <SUB> подстрочник </SUB>	Этот текст подстрочник
Sup	Этот текст <SUP> надстрочник </SUP>	Этот текст надстрочник

Размер шрифта <FONT SIZE>. Вы можете изменять размер шрифта при помощи тэга: <FONT SIZE=+|- n>

Шрифт может иметь размер от 1 до 7. Вы можете прямо указать размер шрифта цифрой, или указать смещение относительно базового значения (по умолчанию - 3) в положительную или отрицательную сторону. Базовое значение можно изменить при помощи тэга: <BASEFONT SIZE=n>

Например: <p>и <font SIZE=+1>з</font><font SIZE=+2>м</font> <font SIZE=+3>е</font><font SIZE=+4>н</font> <font SIZE=+3>е</font><font SIZE=+2>н</font> <font SIZE=+1>и</font> е</p>

Изменение цвета шрифта <FONT SIZE>. Вы можете изменить цвет шрифта при помощи тэга: <FONT COLOR="#XXXXXX>

Цвет указывается в RGB-формате (Red-Green-Blue) посредством указания размерности каждой компоненты цвета в шестнадцатеричном формате. Например, белый цвет обозначается "000000", черный - "FFFFFF", синий - "0000FF" и т.п.

<FONT COLOR="#FF0000"> Красный </FONT> <FONT COLOR="#00FF00"> Зеленый </FONT> <FONT COLOR="#0000FF"> Синий.

Используя HTML, мы помечаем содержимое тегами, чтобы придать ему структуру. Мы называем соответствующие теги и их содержимое элементом. Элемент состоит из трех частей: открывающего тега, содержимого и закрывающего тега. Но есть несколько элементов, например <img>, которые являются исключением из этого правила.

3.Основные сведения

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

. Тэги, определяющие, как будет отображаться WEB-браузером тело документа в целом.

. Тэги, описывающие общие свойства документа, такие как заголовок или автор документа.

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

Все тэги HTML начинаются с "<" (левой угловой скобки) и заканчиваются символом ">" (правой угловой скобки). Как правило, существует стартовый тэг и завершающий тэг. Для примера приведем тэги заголовка, определяющие текст, находящийся внутри стартового и завершающего тэга и описывающий заголовок документа, регистр при вводе текста не важен:

<TITLE> Заголовок документа </TITLE> или <title> Заголовок документа </title>.

Завершающий тэг выглядит также, как стартовый, и отличается от него прямым слешем перед текстом внутри угловых скобок. В данном примере тэг <TITLE> говорит WEB-браузеру об использовании формата заголовка, а тэг </TITLE> - о завершении текста заголовка.

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

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

3.1 Теги

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

Встречаются также одиночные теги, которые не нужно закрывать. В них содержимое находится внутри, так же как и атрибуты. Атрибут может быть прописан для большинства HTML-тегов и задаёт свойства элемента. Обозначается он в открывающем теге и выглядит примерно так: атрибут=«...», где вместо точек находится значение атрибута. Знание тегов является первым и самым важным шагом для освоения HTML. Основы этого искусства также подразумевают понимание структуры веб-страницы.

Структура документа Каждый документ HTML имеет соответствующее расширение, например, Index.html. Так браузер сможет понять, с чем он имеет дело, и правильно отобразит страницу. Все файлы, используемые для создания сайта, желательно хранить в одной директории, что в дальнейшем существенно облегчит вам жизнь. Основы языка разметки гипертекста HTML предполагают чёткое понимание структуры документа. Начинается он с тега, сообщающего браузеру версию HTML, которая используется в этом документе. На данный момент актуальна пятая версия языка, так что тут не нужно ничего выдумывать, можно смело вставлять приведённый выше тег в начало любой страницы. Потом идут основные парные структуры, составляющие «скелет» сайта. Первый тег, в который вложены все остальные что находится за его пределами, не распознаётся браузером как веб-страница, так что он открывает документ и закрывает его. Этот тег является обязательным для любого документа.

Рисунок 6

$C:\Users\админ\AppData\Local\Microsoft\Windows\INetCache\Content.Word\1282398.jpg$

3.2 Верстка таблиц

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

Создается таблица с помощью конструкции

<CAPTION>Заголовок</CAPTION>

</TD>

.... </TR>

</TABLE>

Тег TABLE начинает описание таблицы и может иметь следующие параметры:

BORDER - определяет толщину рамки таблицы. Если указано нулевое значение то рамка не отображается. Если этот параметр не указан, его значение считается нулевым (рамка не отображается).

WIDTH, HEIGHT – указывает размеры таблицы, если они должны быть жестко заданы.

ALIGN - определяет, как должна быть выровнена таблица: справа (RIGHT), слева (LEFT) или в центре (CENTER) страницы.

CELLSPACING - число точек между отдельными ячейками в таблице.

CELLPADDING - число точек между рамкой и содержимым ячейки.

С помощью тега <TR параметры>...</TR> оформляются строки таблиц. Он может иметь следующие параметры:

ALIGN - используется для задания способа горизонтального форматирования данных внутри ячеек: они могут прижиматься к правому (RIGHT), левому (LEFT) краям или центрироваться (CENTER).

VALIGN - используется для задания способа вертикального форматирования данных внутри ячеек: они могут прижиматься к верхнему (TOP), нижнему (BOTTOM) краям, центрироваться (MIDDLE) или иметь общую базовую линию (BASELINE).

Конкретные ячейки задаются с помощью тега <TD параметры>...</TD>, где параметры могут быть следующими:

WIDTH - задает ширину ячейки.

COLSPAN - определяет, сколько колонок таблицы ячейка будет перекрывать.

ROWSPAN - определяет, сколько строк таблицы ячейка будет перекрывать.

NOWRAP - если этот параметр указан, содержимое ячеек не будет переноситься, чтобы влезать в ширину ячейки.

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

Еще один тег для оформления ячеек таблиц - тег <TH>...</TH> - нужен для задания заголовочных ячеек. Он во всем совпадает с тегом <TD>, но в отличие от него, содержимое выдается жирным шрифтом и центрируется.

Если нужно задать заголовок ВСЕЙ таблицы, используйте тег <CAPTION параметры>...</CAPTION>. Он должен быть внутри тега <TABLE>, но вне описания ячеек. Тег имеет один параметр:

ALIGN - указывает положение заголовка: он может быть в верхней (TOP) или нижней (BOTTOM) части таблицы.

Рамки (фреймы)

Мощным визуальным средством являются так называемые рамки или фреймы (frames). С помощью рамок область отображения браузера может быть разделена на отдельные части, содержащие различные документы. При этом возможно задание связей между рамками так, что выбор ссылки в одной рамке может приводить к отображению запрошенного документа в другой. Это позволяет создавать очень удобные в использовании документы (при неправильном применении можно также создать и очень неудобные). Рамки на сегодняшний день поддерживаются в последних версиях таких браузеров, как Netscape Navigator (начиная с версии 2.0) и MS Internet Explorer (версии 3.0 и выше), но популярность применения рамок растет, и похоже, что вскоре к этим браузерам добавятся новые.

Рамки описываются в специальном HTML-документе, называемом Документом Описания Рамок. Этот документ содержит описание числа, размеров и положения рамок, а также URL-и их содержимого. Нельзя пытаться вписать содержимое рамок в описание, оно должно находиться в отдельных документах.

При описании рамок тег <BODY> заменяется на тег

<FRAMESETпараметры>

описания содержимого рамок

</FRAMESET>

Тег будет игнорироваться браузером, если перед ним встретятся любые теги, в обычном случае встречающиеся внутри тега <BODY>. Теги <FRAMESET> могут быть вложенными, что позволяет, как Читатель увидит далее, создавать очень сложные конструкции. Параметры тега <FRAMESET> могут быть следующими:

ROWS=``x1,x2,... или x1%,x2%,... или x1*,x2*,...'' - этот параметр описывает рамки как строки различной высоты. Высоты рамок задаются списком разделенных запятыми значений. Высоты измеряются в точках, процентном отношении от общей высоты области отображения, либо как относительные величины. Сумма высот всех рамок должна быть равна высоте всей области отображения. Если этого не происходит, браузеры сами корректируют значения.

COLS=``x1,x2,... или x1%,x2%,... или *'' - используется для описания рамок как столбцов различной ширины. Используется так же, как параметр ROWS.

Примеры:

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

задаст три горизонтальные рамки, причем первая (верхняя) будет иметь высоту 100 точек, третья (нижняя) будет иметь высоту 50 точек, а вторая (средняя) займет все оставшееся пространство.

задаст две вертикальные рамки, причем первая (левая) будет иметь ширину 70% общей ширины области отображения, а вторая (правая) -- 30%.

Для задания содержимого рамки используется тег <FRAME параметры>. Параметры могут быть следующими:

SRC - указывает URL документа, который должен быть отображен в рамке. Если параметр не указан, рамка останется пустой.

NAME - значение этого параметра определяет имя для рамки. Впоследствии по этому имени на рамку можно будет сослаться с помощью параметра TARGET тега <A>.

SCROLLING - показывает, можно ли проматывать содержимое документа в рамке. Может принимать следующие значения:

YES - содержимое рамки МОЖЕТ проматываться.

NO - содержимое рамки НЕ может проматываться.

AUTO - браузер решает, отображать линейку прокрутки или нет (исходя из длины документа). Это значение иcпользуется по умолчанию.

NORESIZE - если этот параметр указан, пользователь не сможет изменить размеры рамки. По умолчанию пользователь МОЖЕТ изменять размеры отображаемых рамок (например, таская границу рамки указательным устройством).

MARGINWIPH - указывает на величину горизонтального отступа внутри рамки.

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

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

Внутри него рекомендуется располагать ссылки на документы, не содержащие рамок.

Для организации связей между рамками разработчики предусмотрели параметр TARGET для тега <A>. Он также может применяться в тегах <BASE>, <AREA> и <FORM>.

3.3 Комментарии в HTML

Комментарии — пояснения к исходному тексту программы, находящиеся непосредственно внутри комментируемого кода. Синтаксис комментариев определяется языком программирования. С точки зрения компилятора или интерпретатора, комментарии — часть текста программы, не влияющая на её семантику. Комментарии не оказывают никакого влияния на результат компиляции программы или её интерпретацию. Помимо исходных текстов программ, комментарии также применяются в языках разметки и языках описания.

Большинство специалистов сходятся во мнении, что комментарии должны объяснять намерения программиста, а не код; то, что можно выразить на языке программирования, не должно выноситься в комментарии — в частности, надо использовать говорящие названия переменных, функций, классов, методов и пр., разбивать программу на лёгкие для понимания части, стремиться к тому, чтобы структура классов и структура баз данных были максимально понятными и прозрачными и т. д. Есть даже мнение (его придерживаются в экстремальном программировании и некоторых других гибких методологиях программирования), что если для понимания программы требуются комментарии — значит, она плохо написана.

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

Рисунок 7. Комментарии в HTML

Тег добавляет комментарий в код документа. Текст комментария не отображается на странице. Разрешается внутрь комментария добавлять другие теги, вложенные комментарии (когда один комментарий расположен внутри другого) недопустимы.

Заключение:

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

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

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

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

Я хочу, чтобы мои знания пригодились мне в будущем на работе, мне конечно далеко до профессионала, но я буду и дальше изучать программирование на языке HTML и совершенствоваться как специалист.

Список использованной литературы:

Робсон Э, Фримен Э. - Изучаем HTML, XHTML и CSS. 2-е изд.- СПб: Питер, 2014.- 720 с,
Гоше Х. Д - HTML5. Для профессионалов. — СПб.: Питер, 2013. — 496 с,
Б. Фрэйн - HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд.. — СПб.: Питер, 2016,
Кириченко А.В, Хрусталев.А.А - HTML5, Серия «Head First O’Reilly» 2014г. 296 с,
Дженнифер Роббинс - HTML5 Карманньzй справочник, Москва • Санкт-Петербург· Киев 2015г - 192 с,
Гарольд Абельсон, Джеральд Джей Сассман - Основы программирования, 226 с,
Столяров А.В - Программирование, Введение в профессию, Том 1, Азы программирования, Столяров А, 2016. 279 с,
Роббинс Дж - HTML5, CSS3 и JavaScript. Исчерпывающее руководство, 2014. 323с,
Чиртик А.А - HTML, Популярный самоучитель, 2006. 435с,
Холл, П. Вычислительные структуры: Введение в нечисленное программирование; М.: Мир - Москва, 2010. - 214 c,
Дунаев, Вадим Web-программирование для всех; БХВ-Петербург - Москва, 2013. - 560 c,
https://ru.wikipedia.org.

Приложение

Структура-html-страницы