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

Содержание:

Введение

HTML (от англ. Hyper Text Markup Language) – это стандартизированный язык разметки документов в сети интернет, который является одним из инструментов, используемых для создания Web-страниц и интерпретируемый приложениями называемыми браузерами. Браузер (от английского Web browser) — программное обеспечение для открытия веб-сайтов, то есть для запроса веб-страниц, преимущественно из сети Интернет, их обработки, вывода и перехода с одной страницы на другую. Полученный в результате интерпретации браузером текст выводится на экран монитора компьютера или мобильного устройства в удобном для человека виде. Документы имеют стандартное расширение .html или .htm.

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

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

Цель курсовой работы – изучить теоретический материал по тематике курсовой работы – основы программирования на языке HTML. Актуальность темы определена тем, что на сегодняшний день HTML остается самым универсальным средством, применяемым для разметки гипертекста и дальнейшей публикации его в сети Интернет.

1. Из истории HTML

Язык HTML была разработан британским ученым Тимом Бенерс-Ли приблизительно в 1986-1991 годах. Изначально, HTML создавался для форматирования научной и технической документации, приспособленный для использования людьми, не являющимися специалистами в области вёрстки и содержал в себе минимальный пакет возможностей. Но в то время для языка не нашлось достойного применения и в 1993 году появился HTML+, однако и эта версия также осталась практически неиспользуемой. Начало широкого использования гипертекста было положено версией HTML 2.0, появившейся в июне 1994 года. Это был год роста популярности сети интернет по всему миру. Возможности и функции, включенные в версию 2, по большей части используются и в нынешнем времени. Создатели языка уже на тот момент понимали, что в будущем времени из языка локальной разметки текста, HTML эволюционирует в основное средство создания динамических веб-страниц. С разработкой версии HTML 2.0, были выяснены основные функции, которые могут потребоваться сайтам, появились стандартные теги. Если версию нельзя считать кардинально отличающейся от первой, то следующая версия стала абсолютным прорывом. Спустя год, была выпущена Версия 3.0 HTML, создатели включили интересные новинки: добавление математических формул и различных символов, вставка рисунков обтекаемых текстом, теги, примечания и многое другое. Но этот проект так же оказался не востребованным и не получил дальнейшего развития. Стоит отметить, что изначально авторами была заложена идея, в том, что HTML должен размечать лишь структуру документа и не должен содержать в себе непосредственно, параметры графических стилей элементов в браузере. Результатом же работы над следующей версией – 3.2 стало появление самостоятельной системы CSS (Cascading Style Sheets) – каскадных таблиц стилей, код которой не противоречил основам HTML. Теперь CSS можно подключать к разметке HTML и визуально оформлять гипертекстовые страницы. В ходе работы над версией 3.2, спецификацию языка стала иметь уникальный синтаксис, спецификации, были добавлены фреймы, изображения и некоторые другие важные теги, которые стали теперь весьма популярны у Web-мастеров. Даже сейчас на основе этой спецификации можно реализовать функциональные и привлекательные дизайнерские проекты. Практически все современные браузеры поддерживают версию 3.2, поэтому можно быть уверенным в работоспособности всех элементов и в нынешнем времени. Но передовое на тот момент решение – фреймы, не были включены в спецификацию 3.2. Браузеры поддерживали фреймы и многие обучающие книги, посвященные HTML, содержали описание фреймов, не упоминая тот факт, что этот элемент является нестандартным. В последствии, фреймы стали практическим стандартом языка HTML. В версию 4 они уже были включены на полном основании.

Официальная спецификация HTML 4 вышла в свет в 1997 году. Разработчики избавили свое детище от тех ненужных элементов, которые с появлением CSS стали устаревшими и дискредитировали основополагающую идею отделения разметки структуры от визуализации. Из-за таких мелочей никто не стал бы выпускать новую версию, поэтому основным достижением HTML 4.0 можно считать появление объектной модели страницы, элементами которой теперь можно было управлять посредством скриптовых языков программирования, исполняемых браузерами. Самым популярным таким языком на данный момент является JavaScript. В это время уже стало понятно, что дальнейшее развитие HTML будет осуществляться за счет скрипт - программирования. Это оказалось наиболее эффективным, чем вводить в язык все новые и новые элементы. Популярные в то время браузеры (Netscape Navigator 4, Microsoft Internet Explorer 4 и др.) уже достаточно точно могли интерпретировать программный код, в соответствии с установленными стандартами. Популяризация скрипт программирования, не является решением всех проблем и возлагает на разработчиков определенные обязанности, в качестве примера можно отметить, что так как многие скрипты начинаются с определения версии браузера, чтобы в последствии использовать тот или иной фрагмент кода, необходимо каждый раз производить тестирование веб-страниц на разных популярных браузерах.

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

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

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

1. Основные возможности языка

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

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

Документ, выполненный в формате HTML, называется:

• HTML-документ, если необходимо создать документ;
• Web-документ, если речь идет о публикации или распространении документа;
• Web-страница, если речь идет о использовании документа, либо иного взаимодействия с ним.

Как было описано выше, такие страницы обычно имеют расширение .htm или .html.

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

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

Каждая HTML-страница имеет свой уникальный URL-адрес в сети Интернет. О чем речь пойдет в следующем разделе.

1. URL-адрес

Uniform Resource Locator – индивидуальный указатель определенного ресурса в сети интернет. Под ресурсом можно понимать сайт, отдельный документ или изображение.

Начинается URL – адрес с указания протокола HTTP (HyperText Transfer Protocol – протокол передачи гипертекста).

Стандартный URL в сети Интернет имеет вид:

http://www.наименованиесайта.домен/имя файлав

Структуру адреса URL можно определить следующими пунктами:

• Метод доступа к ресурсу, он же именуется сетевым протоколом;
• Авторизация для доступа;
• Хост – DNS адрес, прописываемый как IP адрес;
• Порт – обязательный атрибут при указании IP адреса;
• Путь – информация о методе получения доступа;
• Параметр – данные о файле внутри ресурса.

Разберем пример URL адреса личного кабинета студента Синергии

http://my.megacampus.ru/student/up

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

   1. Обозначения

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

Пример: элемент, содержащий текст, ограничивается и обозначается начальным тегом <P> и закрывающим тегом </p>. Т.е. текст вложен между тегами как в контейнер. В примере показано вложение элементов. Тег <Font> вложен внутрь тега <P>, поэтому закрывающий тег </font> должен быть установлен перед </p>. Тег <P> в моем случае указывает на то, что текст необходимо выделить отдельным абзацем, а тег <Font> указан для оформления формата шрифта и его выделения красным цветом.

<P> <font color="red"> Текст будет вынесен в отдельный абзац и выделен красным цветом шрифта.</font> </p>

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

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

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

<P align="center"> Этот текст будет выровнен по центру экрана </p>

Пользователю будет отображен текст, выровненный по центру экрана:

Этот текст будет выровнен по центру экрана.

В Таблице 1 приведена структура стандартного веб-документа:

Таблица 1

<HTML>	Этот тег указывает на начало HTML-документа
<HEAD>	Определяет начало и конец элемента, внутри которого, находится вся служебная информация, предназначенная для браузера.
<TITLE>Структура веб-страницы</title>	Указывает имя документа (интернет-страницы), которое отображается в окне браузера.
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">	Этот тег несет второстепенную информацию и не отображается в экране для пользователя. В теге описывается кодировка веб-сайта. В указанном виде данный тег можно всегда вставлять на свою страничку, тогда браузером по умолчанию будет использована стандартная кодировка 1250, которая является наиболее популярной на данный момент.
<META name="Author" content="Ivanov Ivan">	Имя создателя веб-страницы.
<META name="Keywords" content="WWW, программирование, документ, веб-страница, формат">	Набор основных слов для поиска. Ранее, указанные подобным образом пользователем слова, поисковые машины использовали для выборки сайтов по актуальности запроса.
</head>	Конец элемента со служебными настройками.
<BODY bgcolor="green">	Начало собственно, содержимого веб-страницы. В тег <BODY> можно добавить атрибут bgcolor, для того чтобы задать цвет фона своей веб-странички. В данном случае зеленый. Если не использовать данный атрибут, то для фона страницы автоматически будет применен белый цвет. В элементе BODY необходимо размещать все, что хочется увидеть на странице.
<H2> На этом месте будет отображен заголовок страницы </h2>	<H2> </h2> Обозначение заголовка
<P> На этом месте будет отображен текст из первого абзаца </p>	<P> </p> Обозначение абзаца.
<P> На этом месте будет отображен текст второго абзаца </p>
</body>	Конец содержимого веб-страницы.
</html>	Обозначает конец HTML-документа.

• 1. Форматирование данных на странице

В Таблице 2 приведена примеры стандартного форматирования веб-документа

Таблица 2

Элемент	Тег	Атрибуты	Пример
Абзац	<P> </p>	<P align="left"> </p> - выравнивание текста по левому краю. <P align="center> </p> - выравнивание текста по центру. <P align="right"> </p> - выравнивание текста по правому краю. <P align="rjustify"> </p> - выравнивание текста по ширине.	<P align="center"> Текст абзаца выровнен по центру экрана </p>
Переход на новую строку	<br>		Всех трудящихся страны <BR> С Первомаем поздравляем <BR> И, конечно, им сейчас <BR> Классно отдохнуть желаем!
Выравнивание по центру	<CENTER> </center>		<CENTER> Текст будет расположен по центру </center>
Выделение текста полужирным шрифтом	<B> </b>		<B> Текст будет выделен полужирным шрифтом </b>.
Выделение текста курсивом	<I> </i>		<I> Текст будет выделен курсивом</i>.
Приподнять символ относительно всей строки	<SUB> </sub>		<SUB> Текст будет в приподнятом положении относительно строки</sub>
Приспустить символ относительно всей строки	<SUP> </sup>		<SUP>Текст будет в приспущенном положении относительно строки</sup>
Определение типа, размера и цвета шрифта.	<FONT> </font>	<FONT size=3> </font> - абсолютный размер шрифта (возможные значения от 1 до 7). <FONT color="blue"> </font> - цвет шрифта <FONT face="calibri"> </font> - определение требуемого шрифта. <FONT size=3 color="red" face="calibri"> </font> - все атрибуты вместе могут быть использованы внутри данного тега.	<FONT size=1> Это шрифт 1 </font> <FONT size=2> Это шрифт 2 </font> <FONT size=3>Это шрифт 3 </font> <FONT size=4>Это шрифт 4 </font> <FONT size=5> Это шрифт 5 </font> <FONT size=6> Это шрифт 6 </font> <FONT size=7> Это шрифт 7 </font> <FONT color="red"> Это шрифт красного цвета </font> <FONT face="arial" size=3 color="green" > Это шрифт calibri размером 3, цвет зеленый. </font>
Цитаты	<BLOCKQUOTE> </blockquote>		<BLOCKQUOTE> Здесь вписана цитата. </blockquote> Здесь обычный текст
Заголовки	<H#> </h#>, где #=1,2,3,4,5,6-уровни заголовка	< H# align="left"> </h#>-выравнивание заголовка по левому краю. < H# align="center> </h#>-выравнивание заголовка по центру. < H# align="right"> </h#>-выравнивание заголовка по правому краю. < H#align="rjustify"> </h#>-выравнивание заголовка по ширине.	<H1 align="center>Мой первый сайт</h1> <H2 align="left">Меня зовут Зарина</h2> <H3 align="rjustify"> …</h3>
Маркированный список	<UL> <LI> <LI> <LI> </ul>		<UL> <LI> Первый пункт списка; <LI> Второй пункт списка; <LI> Третий пункт списка. </ul>
Нумерованный список	<OL> <LI> <LI> <LI> </ol>		<OL> <LI> Первый пункт списка; <LI> Второй пункт списка; <LI> Третий пункт списка. </ol>

• 1. Цветовые решения на веб-странице

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

• 1. Стандартные цвета

Наиболее популярные цвета представлены в Таблице 3.

Таблица 3

• 1. Использование цвета при оформлении страницы

Атрибут – color, предназначен для определения цвета, какого цвета будет шрифт на странице. Цвет шрифта вписывается в тег <FONT>, например:

<FONT color="808080"> Цветные буквы 1 </font>   

<FONT color="red"> Цветные буквы 2 </font>

Если требуется установить цвет для фона, то необходимо использовать атрибут color, внутри тега <BODY>, к примеру:

<BODY color="0000FF">

1. Таблицы

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

<TABLE> </table> - тег используется для добавления таблицы на веб-страницу.

<TR> </tr> - тег используется для определения количества строк и ячеек, из которых будет состоять будущая таблица.

<TD> </td> - элемент, по предназначению аналогичный предыдущему тегу <tr>, с разницей лишь в том, что при добавлении тега <th>, информация в содержащаяся в ячейке будет выделена жирным шрифтом и выравнена по центру.

Пример:

<table>

<tr>

<td>Строка1 Ячейка1</td>

<td>Строка1 Ячейка2</td>

<td>Строка1 Ячейка3</td>

<td>Строка1 Ячейка4</td>

</tr>

<tr>

<td>Строка2 Ячейка1</td>

<td>Строка2 Ячейка2</td>

<td>Строка2 Ячейка3</td>

<td>Строка2 Ячейка4</td>

</tr>

<tr>

<td>Строка3 Ячейка1</td>

<td>Строка3 Ячейка2</td>

<td>Строка3 Ячейка3</td>

<td>Строка3 Ячейка4</td>

</tr>

<tr>

<td>Строка4 Ячейка1</td>

<td>Строка4 Ячейка2</td>

<td>Строка4 Ячейка3</td>

<td>Строка4 Ячейка4</td>

</tr>

</table>

Выглядит мой код будет следующим образом:

Изначально, при создании таблицы, ее ширина будет по умолчанию равна ширине ее внутреннего содержимого. Если требуется установить определенную ширину, то для этого необходимо задать значение для свойства width. Задать значение можно либо в пикселях, либо в процентном соотношении к ширине окна браузера.

Пример создания таблицы с шириной в 300 пикселей:

<TABLE width="350">

<TR>

<TD> Ширина данной таблицы равна 350 пикселям </td>

<TD> и она состоит из 1 строки и 2 столбцов </td>

</tr> </table>

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

<TABLE width="100%">

<TR>

<TD> Ширина таблицы равна 100%.</td>

<TD> она состоит из 1 строки</td>

<TD> и 2 столбцов </td>

</tr>

</table>

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

<TABLE width="100%" bgcolor="# 00FF00">

<TR>

<TD> Ширина 70%</td>

</tr>

<TR>

<TD> и она состоит из трех строк </td>

</tr>

<TR>

<TD> и двух столбцов </td>

</tr>

</table>

Где параметр bgcolor определяет цвет фона и может принимать значения, указанные на английском языке или в формате кодов HTML.

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

<table width="900" border="2" cellspacing="0" cellpadding="3" align="right">
<tr>
<td bgcolor="#592A2A"></td>
<td bgcolor="#244F68"></td>
<td bgcolor="#BA3897"></td>
</tr>
<tr>
<td bgcolor="#645B62"></td>
<td bgcolor="#B16739"></td>
<td bgcolor="#40BDBF"></td>
</tr>
<tr>
<td bgcolor="#12DC4D"></td>
<td bgcolor="#EAF117"></td>
<td bgcolor="#5DA00F"></td>
</tr>
</table>

Где border – это толщина границы, cellspacing – расстояние между границами, а cellpadding – предназначен для указания расстояния между границей и содержимым ячейки. Все три атрибута принимают значения в пикселях.

<TABLE width="80%" bgcolor="#0000FF" border="5" >

<TR>

<TD> </td>

<TD> Ширина таблицы равна 500 пикселям</td>

<TD> </td>

<TD> и она состоит из двух строк и двух столбцов</td>

<TD> </td>

</tr>

</table>

Границы таблицы могут быть невидимыми, для этого значение параметра border необходимо выставить на 0, пример:

<TABLE width="100%" bgcolor="#FA8E47" border="0" >

<TR>

<TD> </td>

<TD> Ширина таблицы 700 пикселей</td>

<TD> </td>

</tr>

<TR>

<TD> и она состоит из двух строк и четырех столбцов</td>

<TD> </td>

<TD></td>

<TD></td>

</tr>

</table>

Ранее в одном из примеров был использован атрибут align, который предназначен для выравнивания данных в ячейках (горизонтально), атрибут принимает следующие значения:

«left» – выровнять по левой стороне;

«right» – выровнять по правой стороне;

«center» – разместить по центру ячейки.

Если же требуется так же выровнять данные в ячейках, но только по вертикали, то необходимо использовать атрибут valign, принимает следующие значения:

top – по верхнему краю

center (или middle) – по центру

baseline – по первой строке

Примеры:

<table width="70%" border="3" cellspacing="1" cellpadding="6" align="left">
<tr> <td width="421">По горизонтали</td>
<td width="456" align="center"> Выровнять по центру </td>
<td width="412" align="left"> Выровнять по левому краю </td>
<td width="444" align="right"> Выровнять по правому краю </td>
</tr>
<tr>
<td width="369" height="149">По вертикали</td>
<td width="324" height="149" valign="top">Выровнять по верхнему краю</td>
<td width="367" height="149" valign="middle">Выровнять по центру</td>
<td width="318" height="149" valign="baseline">Выровнять по нижнему краю</td>
</tr>
</table>

1. Формы

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

Тег <FORM> </form> имеет атрибут Action=”…” – которому присваивается URL адрес. На этот адрес в последствии будет передана и обработана информация, введенная пользователем в форме.

Method= "POST/GET"– атрибут определяет метод, согласно которому данные из формы будут отправлены. Может принимать значения:

• get –для отправки сообщений в небольшом объеме, есть ограничение.

• post – отправляет данные на сервер в запросе браузера, предназначен для отправки большого количества данных, не имеет ограничений по объему.

• 1. Создание элементов управления <INPUT …>

Type=”…” – обязательный атрибут. Определяет тип элемента, который необходимо создать.

Принимает значения:

• text – создание строки для ввода текста

• password – создание строки для ввода текста, при этом вводимые значения будут скрыты за символами ***

• checkbox – создание флажка

• radio – создание переключателей

• image – создание кнопки-изображения

• button – создание кнопку произвольного значения

• submit – создание кнопки «отправить»

• reset – создание кнопки «очистить»

Name – указывается имя элемента, для получения доступа к объектам

Value – предназначено для значения атрибутов

Size – определение размеров различных элементов

Checked – данные атрибут предназначен для проверки, установлен ли флажок по умолчанию, при загрузке страниц для полей типа type="checkbox" и type="radio".

<INPUT Type= ”checkbox” Name=”group”> Value=”p”>

<INPUT Type= ”submit” Name= ”submit1” Value=”отправить”>

<INPUT Type= ”reset” Name= ”reset1” Value=”очистить”>

<BUTTON> – создание кнопки с вложенными элементами, например, с изображением.

</button> Type=”…” – обязательный атрибут, указывает на тип создаваемого элемента управления. Принимает такие значения как:

• button – создание кнопки с произвольным значением

• submit – создание кнопки «отправить»

• reset – создание кнопки «очистить»

Name – задает имя текстового поля

Value – определяет значение атрибута< BUTTON Type= ”reset” Name= ”reset”>

<IMG Src= “sun.gif” Alt=”!”> Сброс <IMG Src= “sun.gif” Alt=”!”>

</button>

• 1. Элементы списка <OPTION>

Selected – отображение элемента, выбранного по умолчанию <SELECT Name= “systems”>

<OPTION Selected> Windows

<OPTION>MacOS

<OPTION>Linux

</select>

• 1. Область для ввода текст <TEXTAREA>

</textarea> Name – определяет имя элемента

Rows – определяет количество строк

Cols – определяет ширину в символах

<TEXTAREA Name =”…” Rows=13 Cols=85> текст </textarea>

• 1. Списки <SELECT>

</select> Name – определение имени элемента

Size – определение количества строк для списка

Multiple – позволяет выбрать более одного элемента списка <SELECT Name= “selection” Size=13> ...

</select>

1. Изображение на веб-странице

<IMG> - тег применяется для добавления изображения на страницу.

Обязательным атрибутом является src – он предназначен для определения пути к графическому файлу. Применяется такие форматы как GIF, JPEG или PNG, пример: src="Ссылка на файл". Если изображение находится в одной папке с HTML-документом, то вместо ссылки достаточно указать лишь имя файла.

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

Например:

<IMG src="princessa.gif alt="Изображение маленькой принцессы" >

<IMG src="cat.gif" alt="Домашняя кошка на прогулке по улице">

Высоту и ширину раздела, в котороом отображается рисунок, устанавливается при помощи aтрибутов height - высотa и width - ширина.

Например:

<IMG src="princessa2.gif" width="100" height="150">

<img src=" princessa.gif" width="191">

Во втором случае изменена ширина изображения, высота будет подстроена автоматически. Во избежание ухудшения качества картинки, необходимо задавать эти параметры в соответствии с фактическими размерами картинки. Так же существует параметр border, который предназначен для добавления рамки вокруг элемента. border="10' - ширина рамки обозначается пикселями, в моем случае ширина рамки будет состоять из 10 пикселей.

Например:

<IMG src=" cat.gif" border="4" alt=" Домашняя кошка на прогулке по улице ">

Тег IMG с учетом размеров будет выглядеть следующим образом:

<IMG src="princessa2.gif" width="100" height="150" alt = "Изображение маленькой принцессы">

В случае, если необходимо использовать рисунок в качестве фонового изображения странички, то в теге <BODY> необходимо использовать этот атрибут вместе с адресом изображения, предназначенного для фона.

Например:

<BODY background="sunnyday.jpg"> 

Заключение

Для выполнения задачи по написанию курсовой работы, мной были в начале определены и в последствии выполнены следующие задачи:

• Анализ и чтение популярной учебной литературы по теме курсовой работы;
• Изучение истории и основных характеристик языка HTML;
• Ознакомление с популярными HTML-редакторами, удалось поработать с некоторыми из них: Sublime Text, Atom, PHPSHtorm;
• Закрепление изученного материала путем практического применения языка и создания простых веб-страниц с использованием HTML.

Используемая литература

1. Кузнецов М.В. Практика разработки Web-сайта, 2013г. -960 с.
2. Алленова Н.В. Учебник по HTML, 2015г. -512 с.
3. Кузнецов М.А. Основы языка HTML, 2015г. -101-120 с.
4. Полонская Е.Л. Язык Html, 2003г. -55-110 с.
5. Рева О.Н. Html. Просто Как Дважды Два, 2006г. -256 с.
6. Мишанов. А.Е. Создание документов в стандарте HTML, 2014г. -305 – 340 с.
7. Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5. 3-е издание, 2016г. -768 с.
8. HTML5. Недостающее руководство, 2017г. -480 с.
9. Ресурс в сети Интернет https://ru.wikipedia.org
10. Ресурс в сети Интернет http://www.webremeslo.ru/html/glava0.html
11. Ресурс в сети Интернет http://code.mu/books/css/
12. Ресурс в сети Интернет https://webref.ru/course/html-tutorial