Автор Анна Евкова

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

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

Содержание:

Введение

Согласно выбранной теме “Основы программирования на языке HTML”

мы рассмотрим основные элементы HTML и попробуем совместно на примерах в них разобраться.

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

Для использования примеров необходима ОС Windows,блокнот,paint, браузер

(я использую Google Chrome Версия 60.0.3112.90 ).

Все примеры кода сохраняются в блокноте в кодировке UTF-8 в папке “тест”.

Задачи:

-Рассмотреть основы языка HTML:

Что является базовым элементом HTML
Какие типы дескрипторов существуют
На примерах рассмотреть дескрипторы для обработки различных элементов
Рассмотреть процесс создания простейшей веб-страницы используя текстовый редактор, без использования конструкторов и специализированных программных продуктов;

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

Глава I – Базовый элемент разметки гипертекста и работа с ним.

Базовый элемент разметки гипертекста – это дескриптор^[1] (“тег”).

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

<тег атрибут1="значение" атрибут2="значение">

<тег атрибут1="значение" атрибут2="значение">...</тег>

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

Создадим простейшую веб-страницу и рассмотрим некоторые из ее элементов. Создадим папку с именем тест, в ней с помощью paint нарисуем картинку 50*50 пикселей черного цвета назовем ее pict.jpg, приведенный ниже текст:

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

</head>

<body>

<h1>Заголовок страницы</h1>

<p>Основной текст.</p>

<center>Текст <br> с переносом</center>

</body></html>

сохраним в блокноте под названием “тест.html” и откроем в браузере, после просмотра получившейся веб-страницы скриншот № 1, рассмотрим из какого минимального набора элементов должна состоять веб-страница.

Скриншот № 1

Любой HTML-документ содержит три основных обязательных раздела: HTML,HEAD и BODY.^[2]

Дескриптор <html> — это контейнер, в котором находится всё содержимое страницы, включая теги <head> и <body>.

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

Дескриптор <body> предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера.

Дескрипторы бывают парные и одиночные. Парные дескрипторы имеют открывающий и закрывающий дескриптор. Существует три состояния закрывающего тега: обязателен, не требуется или не обязателен. Обязательный закрывающий тег должен присутствовать всегда, иначе это приведет к ошибке при отображении документа. Для некоторых тегов вроде <br> закрывающего тега нет в принципе. Необязательный закрывающий тег говорит о том, что разработчик может его как добавить, так и опустить, к ошибке это не приведет. Однако рекомендуем закрывать все подобные теги, включая необязательные, это дисциплинирует, создает более стройный и строгий код, который легко модифицировать. Парный дескриптор образует контейнер. Содержимое контейнера – это то, что находится между открывающим и закрывающим дескриптором. Возьмём наш код в нем

<html> - открывающий дескриптор

… - cодержимое контейнера контейнер ^[3]

</html> - закрывающий дескриптор

Одинарные дескрипторы не имеют закрывающего тега. Например: <br>, <img> , <hr>.

<img src="pict.jpg" > - пример одинарного дескриптора.

Существует определенная иерархия вложенности тегов. Например, тег <title> должен находиться внутри контейнера <head> и нигде иначе. Чтобы не возникло ошибки, следите за тем, чтобы теги располагались в коде правильно.

Если теги между собой равноценны в иерархии связи, то их последовательность не имеет значения. Так, можно поменять местами теги <title> и <meta>, на конечном результате это никак не скажется.

Чтобы расширить возможности отдельных тегов и более гибко управлять содержимым контейнеров и применяются атрибуты тегов. Для атрибутов тегов используются значения по умолчанию. Когда для тега не добавлен какой-либо допустимый атрибут, это означает, что браузер в этом случае будет подставлять значение, заданное по умолчанию. Текстовые значения заключаются в кавычки Любые атрибуты нечувствительны к регистру, пишутся внутри открывающего тега и содержат имя и значение. В именах атрибутов нельзя использовать пробелы, кавычки, знак больше (>), слэш (/) и равно (=), а также любые символы не определенные в Юникоде. На практике, все имена атрибутов у тегов известны и вставлять «отсебятину» не имеет смысла. В значениях атрибутов допустимо писать текст и спецсимволы за исключением амперсанда (&), который должен заменяться на &amp. Допустимо использовать некоторые атрибуты у тегов, не присваивая им никакого значения, к примеру

Порядок атрибутов в любом теге не имеет значения и на результат отображения элемента не влияет. Поэтому теги вида

по своему действию равны. Каждый атрибут тега относится к определенному типу (например: текст, число, путь к файлу и др.), который обязательно должен учитываться при написании атрибута. Так, в примере указан тег <img>, он добавляет на веб-страницу рисунок, а его атрибут width задает ширину изображения в пикселах. Если поставить не число, а нечто другое, то значение будет проигнорировано и возникнет ошибка при проверке кода браузером.

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

Условно теги делятся на следующие типы :

теги верхнего уровня - предназначены для формирования структуры веб-страницы и определяют раздел заголовка и тела документа : <html>, <head>,<body>
теги заголовка документа - К этим тегам относятся элементы, которые располагаются в контейнере <head>. Все эти теги напрямую не отображаются в окне браузера, за исключением тега <title>, который определяет название веб-страницы.
блочные элементы - Блочные элементы характеризуются тем, что занимают всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки : <blockquote>,<div>,<h>,<hr> и другие.
cтрочные элементы - элементы веб-страницы, которые являются непосредственной частью другого элемента, например, текстового абзаца. В основном они используются для изменения вида текста или его логического выделения: <a>,<b>,<big> и другие.
универсальные элементы - Особенность этих тегов состоит в том, что они в зависимости от контекста могут использоваться как блочные или встроенные элементы : <del>, <ins>
списки - взаимосвязанный набор отдельных фраз или предложений, которые начинаются с маркера или цифры. Списки предоставляют возможность упорядочить и систематизировать разные данные и представить их в наглядном и удобном для пользователя виде: <dd>, <dt>, <dl>.
Таблицы - состоят из строк и столбцов ячеек, которые могут содержать текст и рисунки. Обычно таблицы используются для упорядочения и представления табличных данных: <table>,<td>,<tr>,<th>.
Теги для фреймов - Фреймы разделяют окно браузера на отдельные области, расположенные вплотную друг к другу. В каждую из таких областей загружается самостоятельная веб-страница определяемая с помощью тега <frame>. С помощью фреймов веб-страница делится на два или более документа, которые обычно содержат навигацию по сайту и его контент. Механизм фреймов позволяет открывать документ в одном фрейме, по ссылке, нажатой в совершенно другом фрейме. Допустимо также использовать вложенную структуру элементов, это позволяет дробить фреймы на мелкие области: <frame>,<frameset>,<iframe>.

Следует учитывать, что один и тот же тег может одновременно принадлежать разным группам, например, теги <ol> и <ul> относятся к категории списков, но также являются и блочными элементами.

Рассмотрев понятие дескрипторов ,их типов и выяснив минимальный набор для работы веб-страницы перейдем непосредственно к её создании и на примерах рассмотрим какие теги связаны с выводом и форматирования текста .

Глава II – Создание веб-страницы, вывод и форматирование текста.

Мы ознакомились с минимальным набором из 3 парных тегов, которые должны присутствовать в веб-странице, но при внедрении определенных элементов для вывода графических элементов или обработки форматирования текста вы скорее всего натолкнетесь на то , что веб-страница будет выглядеть не так как вы задумывали, причина в том что браузеру необходим инструкция для понимания написанного в веб-странице – DTD. Поэтому создание веб-страницы всегда должно начинаться с тега DOCTYPE! Что это за тег и почему он необходим – давайте разберем. Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа)^[4]. Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.Существует несколько видов <!DOCTYPE>, они различаются в зависимости от версии HTML, на которую ориентированы. В таблице № 1 приведены основные типы документов с их описанием.

DOCTYPE	Описание
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">	Строгий синтаксис HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">	Переходный синтаксис HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">	В HTML-документе применяются фреймы.
HTML 5
<!DOCTYPE html>	В этой версии HTML только один доктайп.
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">	Строгий синтаксис XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">	Переходный синтаксис XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- frameset.dtd">	Документ написан на XHTML и содержит фреймы.
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">	Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Как видите, никакого деления на виды это определение не имеет, поскольку синтаксис один и подчиняется четким правилам.

таблица № 1^[5]

Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Как видите, никакого деления на виды это определение не имеет, поскольку синтаксис один и подчиняется четким правилам. Разница между строгим и переходным описанием документа состоит в различном подходе к написанию кода документа. Строгий HTML требует жесткого соблюдения спецификации HTML и не прощает ошибок. Переходный HTML более «спокойно» относится к некоторым огрехам кода, поэтому этот тип в определенных случаях использовать предпочтительнее. Например, в строгом HTML и XHTML непременно требуется наличие тега <title>, а в переходном HTML его можно

опустить и не указывать. При этом помним, что браузер в любом случае покажет документ, независимо от того, соответствует он синтаксису или нет. Подобная проверка осуществляется при помощи ПО проверки кода на наличия ошибок и предназначена в первую очередь для разработчиков, чтобы отслеживать ошибки в документе. В дальнейшем будем применять преимущественно строгий <!DOCTYPE>, кроме случаев, когда это оговаривается особо. Это позволит нам избегать типичных ошибок и приучит к написанию синтаксически правильного кода. Часто можно встретить код HTML вообще без использования <!DOCTYPE>, веб-страница в подобном случае все равно будет показана. Тем не менее, может получиться, что один и тот же документ отображается в браузере по-разному при использовании <!DOCTYPE> и без него. Кроме того, браузеры могут по-своему показывать такие документы, в итоге страница «рассыплется», т.е. будет отображаться совсем не так, как это требуется разработчику.

И так с первым тегом мы определились – укажем DTD = HTML 5

Открываем блокнот и вставляем в самое начало строчку с тегом указания DTD и тремя обязательными парными тегами – html,head,body сохраняем под именем “моя страница.html” в каталог тест.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

Если запустить браузером страницу сейчас, то мы увидим следующее

(скриншот № 2)

скриншот № 2

После тега указания DTD добавим строку

^[6]

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

заканчиваются тегом -->. Все, что находится между этими тегами отображаться на веб-странице не будет. Если после сохранения открыть web-страницу браузером мы увидим перед собой пустую вкладку. Начнем заполнять код нашей web-страницы - добавляем после тега <head> строку

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Тег <meta>^[7] является универсальным и добавляет целый класс возможностей, в частности, с помощью метатегов, как обобщенно называют этот тег, можно изменять кодировку страницы, добавлять ключевые слова, описание документа и многое другое. Чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка. Рассмотрим дескрипторы которые отвечают за форматирования текста. Ниже тега <meta> добавляем строку

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

Тег <title> выполняет множество задач, как прямо, так и косвенно:

По тексту заголовка пользователь получает дополнительную информацию, что это за сайт, на котором он находится и как называется текущая страница. Не стоит думать, что достаточно в документе указать логотип сайта и проигнорировать заголовок, ведь посетитель может свернуть окно. В свернутом виде заголовок также отображается на кнопках панели задач, поэтому можно легко ориентироваться, с каким сайтом в данный момент работать, а не перелистывать их по очереди.
Большинство браузеров поддерживают возможность сохранения веб-страницы на локальный компьютер. В этом случае имя сохраненного файла совпадает с названием заголовка документа. Если в тексте заголовка содержатся символы недопустимые в имени файла (\ / : * ? " < > |), они будут проигнорированы или автоматически заменены другими дозволенными символами.
При сохранении в разделе браузера «Избранное», адрес текущей страницы с ее заголовком помещается в список предпочитаемых ссылок. Поскольку этот список, как правило, хранится в виде отдельных файлов, к их именам также прилагается уже вышеописанное правило.
В результатах поиска по ключевым словам, поисковые системы используют заголовок страницы для указания ссылки на данный документ. Интересно написанный заголовок, содержащий ключевые слова, привлечет больше внимания посетителей и увеличит шансы на то, что сайт посетит больше людей.

Ниже тега <body> добавляем строку

<h4> Введение. </h4>

HTML предлагает шесть текстовых заголовков разного уровня^[8], которые показывают относительную важность секции, расположенной после заголовка. Так, тег <h1> представляет собой наиболее важный заголовок первого уровня, а тег <h6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги <h1>...<h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.

Ниже тега < h4> добавляем набор строк :

<p>Согласно выбранной теме “Основы программирования на языке HTML”

мы рассмотрим основные элементы HTML и попробуем совместно на примерах в них разобраться.

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

Для использования примеров необходимо: ОС Windows,блокнот,paint, браузер.

Все примеры сохраняются в блокноте в кодировке UTF-8.

Задачи:

-Рассмотреть основы языка HTML:

Что является базовым элементом HTML
Какие типы дескрипторов существуют
На примерах рассмотреть дескрипторы для обработки различных элементов (теста, изображения)

-Рассмотреть процесс создания веб-страниц используя текстовый редактор, без использования конструкторов и специализированных программных продуктов;

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

Тег <p> является блочным элементом, поэтому текст всегда начинается с новой строки^[9], абзацы идущие друг за другом разделяются между собой отбивкой (так называется пустое пространство между ними).Тег <p> определяет абзац (параграф) текста. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.

Сохранив текст и запустив его в браузере, мы увидим (скриншот № 3)

скриншот № 3

теперь нам необходимо отформатировать наш текст и в этом нам помогут:

Тег <br> устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега абзаца <p>, использование тега <br> не добавляет пустой отступ перед строкой. Устанавливаем его следующим образом :

<p>Согласно выбранной теме “Основы программирования на языке HTML” <br>

мы рассмотрим основные элементы HTML и попробуем совместно на примерах в них разобраться. <br>

Цель работы - изучение основ языка HTML. <br>

Для использования примеров необходимо: ОС Windows,блокнот,paint, браузер. <br>

Все примеры сохраняются в блокноте в кодировке UTF-8. <br>

<br>

Задачи: <br>

-Рассмотреть основы языка HTML: <br>

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

-Рассмотреть процесс создания веб-страниц используя текстовый редактор, без использования конструкторов и <br> специализированных программных продуктов; <br>

<br>

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

Таким образом установив тег <br> в указанных местах текста , мы сможем добиться форматирования текста как указанно на скриншоте № 4

скриншот № 4

Тег <strong> предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием. Тег является парным.

Используем данный тег:

<strong> Задачи: </strong> <br>

<strong>Структура:</strong>

Полученный нами результат добавления тега <strong> в текст веб-страницы (скриншот № 5)

(скриншот № 5)

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

Используем данный тег для выделения в тексте “ HTML”:

<b>HTML</b>

… элементы <b>HTML</b> и попробуем ...

… языка <b>HTML</b> …

… <b>HTML</b> …

Полученный нами результат добавления тега <b> в текст веб-страницы (скриншот № 6)

Согласно спецификациям W3C, предписывается использовать тег <strong> взамен устаревшему <b>

(скриншот № 6)

Тег < em> является аналогом тега <i> - устанавливает курсивное начертание шрифта. Допустимо использовать этот тег совместно с другими тегами, которые определяют начертание текста. Тег является парным. Согласно спецификациям W3C, предписывается использовать тег < em > взамен устаревшему < i >.

Используем данный тег для выделения в тексте “ HTML”:

<p>Согласно выбранной теме <i>“Основы программирования на языке HTML” <i><br>

Полученный нами результат добавления тега <i> в текст веб-страницы (скриншот № 7)

(скриншот № 7)

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

слева текст сдвигается до края, а правый остается неровным. Выравнивание по правому краю и по центру в основном используется в заголовках и подзаголовках. Следует иметь в виду, что при использовании выравнивания по ширине, в тексте между словами могут появиться большие интервалы, что не очень красиво. Для установки выравнивания текста обычно используется тег параграфа <p> с атрибутом align, который определяет способ выравнивания. Также блок текста допустимо выравнивать с помощью тега <div> с аналогичным атрибутом align. Он может принимать следующие значения:

left — выравнивание по левому краю, задается по умолчанию;
right — выравнивание по правому краю;
center — выравнивание по центру;
justify — выравнивание по ширине (одновременно по правому и левому краю). Это значение работает только для текста, длина которого более, чем одна строка.

Атрибут align можно применять как для текста, так и для заголовков.

Давайте попробуем посмотреть на результат применения атрибут align

на примере заголовков - создадим страницу c названием “выравнивание.html”

со следующим кодом:

<!DOCTYPE html>

<html>

<head>

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

<body>

<h4> • left — выравнивание по левому краю, задается по умолчанию; </h4>

<h4 align=right> • right — выравнивание по правому краю; </h4>

<h4 align=center> • center — выравнивание по центру; </h4>

<h4 align=justify> • justify — выравнивание по ширине (одновременно по правому и левому краю). Этозначение работает только для текста, длина которого более, чем одна строка.</h4>

</body>

</html>

Полученный нами результат изменения кода в веб-страницы (скриншот № 8)

(скриншот № 8)

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

Глава III – CSS.

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

CSS это акроним для Cascading Style Sheets/Каскадных таблиц стилей.^[10]

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

Конкретные преимущества CSS:

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

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

Изменим наш код:

<!DOCTYPE html>

<html>

<head>

h4 {color:red}

p {color:blue}

</style>

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

<body>

<h4> Введение. </h4>

<p>Согласно выбранной теме <i>“Основы программирования на языке HTML”</i> <br>

мы рассмотрим основные элементы <b>HTML</b> и попробуем совместно на примерах в них разобраться. <br>

Цель работы - изучение основ языка <b>HTML</b>. <br>

Для использования примеров необходимо: ОС Windows,блокнот,paint, браузер. <br>

Все примеры сохраняются в блокноте в кодировке UTF-8. <br>

<br>

<strong>Задачи:</strong> <br>

-Рассмотреть основы языка <b>HTML</b>: <br>

• Что является базовым элементом <b>HTML</b><br>

• Какие типы дескрипторов существуют<br>

• На примерах рассмотреть дескрипторы для обработки различных элементов (теста, изображения) <br>

-Рассмотреть процесс создания веб-страниц используя текстовый редактор, без использования конструкторов и <br>

специализированных программных продуктов; <br>

<br>

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

</body>

</html>

Полученный нами результат изменения кода в веб-страницы (скриншот № 9)

скриншот № 9

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

Преимущественно используется способ, основанный на шестнадцатеричной системе исчисления, как наиболее универсальный. Но для упрощения мы воспользуемся указанием цвета по называнию^[11]:

black - Черный
blue - Синий
fuchsia - Светло-фиолетовый
gray - Темно-серый
green - Зеленый
lime - Светло-зеленый
maroon - Темно-красный
navy - Темно-синий
olive - Оливковый
purple - Темно-фиолетовый
red - Красный
silver - Светло-серый
teal - Сине-зеленый
white - Белый
yellow - Желтый

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

Тег <style> - используется для определения информации о стилях HTML документа. В элементе style мы указали как HTML элементы должны отображаться в браузере. Обязательный атрибут type определяет контент элемента style. Единственное допустимое значение - "text/css".Элемент <style> всегда находится в шапке документа. Задали

цвет тексту находящемуся в <h4> и <p>.Теперь разберемся чуть внимательнее

Фундаментальная модель CSS:

Selector {property: value;}

Selector – к какому HTML-тегу применяется свойства (в нашем)

Property - свойство к которому применяется к value

Value – значение которое применяется к Property

h4 {color:red} – тексту в внутри заголовка установлен красный цвет.

p {color:blue} – тексту в внутри заголовка установлен красный цвет.

Давайте рассмотрим необходимы для нас property :

font-family - Устанавливает семейство шрифта, которое будет использоваться для оформления текста содержимого. Список шрифтов может включать одно или несколько названий, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в одинарные или двойные кавычки.Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берется следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере. Заканчивают список обычно ключевым словом, которое описывает тип шрифта — serif, sans-serif, cursive, fantasy или monospace. Таким образом, последовательность шрифтов лучше начинать с экзотических типов и заканчивать обобщенным именем, которое задает вид начертания. (пример:font-family: Georgia, 'Times New Roman', Times, serif;)
font-size – размер шрифта – по умолчанию - 100% (пример font-size: 120%;)
color – присваивает указанный цвет (color: gray;)

Давайте в нашем примере зададим шрифты и их цвет и посмотри результат.

…

<head>

h4 {font-family: Geneva, Arial, Helvetica, sans-serif;

color:red;}

p {font-family: Verdana, Arial, Helvetica, sans-serif;

color:blue;}

</style>

<title>

…

Полученный нами результат изменения кода в веб-страницы (скриншот № 10)

скриншот № 10

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

Глава IV – Ссылки.

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

<a> . Общий синтаксис создания ссылок следующий.

<a href="URL">текст ссылки </a>

Атрибут href определяет URL (Universal Resource Locator, универсальный указатель ресурса), иными словами, адрес документа, на который следует перейти, а содержимое контейнера <a> является ссылкой. Текст, расположенный между тегами <a> и </a> , по умолчанию становится синего цвета и подчеркивается. Теперь добавим в нашу самую первую тестовую веб-страницу “тест.html” тег <a>, для возможности перехода на созданные нами веб-страницы.

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

</head><body>

<h1>Заголовок страницы</h1>

<p>Основной текст.</p>

<center>Текст <br> с переносом</center>

<p>

<a href="выравнивание.html">выравнивание</a>

<a href="моя страница.html">моя страница</a>

</p></body></html>

Полученный нами результат изменения кода в веб-страницы (скриншот № 11)

(скриншот № 11)

Результат нажатия на ссылку <a href="выравнивание.html">выравнивание</a> (скриншот № 12)

(скриншот № 12)

Результат нажатия на ссылку <a href="моя страница.html">моя страница</a> (скриншот № 13)

(скриншот № 13)

Таким образом, осуществляется переход с одной веб-страницы на другую. С помощью тега <a>, возможно также открытие указанных файлов^[12]. Добавим следующий код в веб-страницу “выравнивание.html” и попробуем открыть созданный нами ранее pict.jpg.

<!DOCTYPE html>

<html>

<head>

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

<body>

<h4> • left — выравнивание по левому краю, задается по умолчанию; </h4>

<h4 align=right> • right — выравнивание по правому краю; </h4>

<h4 align=center> • center — выравнивание по центру; </h4>

<a href="pict.jpg">Нажми для показа картинки</a>

</body>

</html>

Полученный нами результат изменения кода в веб-страницы (скриншот № 14)

(скриншот № 14)

Результат нажатия на ссылку <a href="pict.jpg">Нажми для показа картинки</a> (скриншот № 15)

(скриншот № 15)

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

Заключение

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

“Основы программирования на языке HTML” – показать, что основа работы с HTML – это в первую очередь работа с тегами и их атрибутами.

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

Алексей Петюшкин. HTML. Экспресс-курс./ Петюшкин А.В. — СПб.: БХВ-Петербург, 2003. — 256 с.: ил.
Ю.П.Лыч, Т.А.Голдобина. Создание Web-документов. Основы языка HTML: Пособие для лабораторных занятий студентов дневной и безотрывной форм обучения экономических специальностей. / Лыч.П.Ю., Голдобина А.Т. – Гомель: БелГУТ,2005. –102 с.
Мальчук Е.В. HTML и СSS.Самоучитель / Мальчук Е.В – Москва: Издательский дом “Вальямс”, 2008 – 416 с.
Алексей Гончаров. Самоучитель HTML./Гончаров А. - СПб.: Питер, 2002. — 240 с.: ил.
Александр Матросов,Александр Сергеев,Михаил Чаунин. HTML 4.0./Матросов А. В., Сергеев А. О., Чаунин М. П.- СПб.: БХВ-Петербург, 2003. - 672 с.
Хольцшаг Молли Э. Использование HTML и XHTML/ Хольцшаг М. Э. Издательский дом “Вальямс”, 2003 – 736 с.
Сергей Велихов Справочник по HTML 4.0/ Велихов Сергей Москва:Бук-пресс,2006 – 412 с.
Дидре Хейз Освой самостоятельно HTML.10 минут на урок/Хецз Дидре Москва: ООО “И.Д. Вильямс” 2007 – 272 с.
А.Чиртик HTML.Популярный самоучитель./ Чиртик А.А - СПб.: Питер, 2006. — 224 с.: ил.
В.В.Дригалкин HTML в примерах. / Дригалкин В.В. – Москва: Издательский дом “Вальямс”, 2003 – 192 с.
А.Ю.Гаевский, В.А.Романовский 100% самоучитель.Создание Web-страниц и Web-сайтов.HTML и JavaScript/Гаевский А. Ю., Романовский В. А.: - Москва Издательство: Технолоджи-3000 2008 г – 444 с.
Е.Л. Полонская Самоучитель Язык HTML/ Полонская Е.Л. – Москва : Издательский дом “Вальямс”, 2003 – 320 с.

В.В.Дригалкин HTML в примерах. / Дригалкин В.В. – Москва: Издательский дом “Вальямс”, 2003 – 11 с. ↑
Алексей Петюшкин. HTML. Экспресс-курс./ Петюшкин А.В. — СПб.: БХВ-Петербург, 2003. — 13 с ↑
Ю.П.Лыч, Т.А.Голдобина. Создание Web-документов. Основы языка HTML: Пособие для лабораторных занятий студентов дневной и безотрывной форм обучения экономических специальностей. – 29 с ↑
А.Чиртик HTML.Популярный самоучитель./ Чиртик А.А - СПб.: Питер, 2006. — 18 с. ↑
Хольцшаг Молли Э. Использование HTML и XHTML/ Хольцшаг М. Э. Издательский дом “Вальямс”, 2003 – 104 с. ↑
А.Ю.Гаевский, В.А.Романовский 100% самоучитель.Создание Web-страниц и Web-сайтов.HTML и JavaScript/Гаевский А. Ю., Романовский В. А.: - Москва Издательство: Технолоджи-3000 2008 г – 22 с ↑
Е.Л. Полонская Самоучитель Язык HTML/ Полонская Е.Л. – Москва : Издательский дом “Вальямс”, 2003 – 224 с. ↑
Сергей Велихов Справочник по HTML 4.0/ Велихов Сергей Москва:Бук-пресс,2006 – 231 с. ↑
Дидре Хейз Освой самостоятельно HTML.10 минут на урок/Хецз Дидре Москва: ООО “И.Д. Вильямс” 2007 – 38 с. ↑
Алексей Гончаров. Самоучитель HTML./Гончаров А. - СПб.: Питер, 2002. — 65 с. ↑
Е.В. Мальчук. HTML и СSS.Самоучитель / Мальчук Е.В – Киев: Издательский дом “Вальямс”, 2008 – 34-35 с. ↑
Александр Матросов,Александр Сергеев,Михаил Чаунин. HTML 4.0./Матросов А. В., Сергеев А. О., Чаунин М. П.- СПб.: БХВ-Петербург, 2003. - 50 с. ↑