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

Скачать файл
Заказать решение

ВУЗ: Не указан

Категория: Курсовая работа

Дисциплина: Не указана

Добавлен: 15.05.2023

Просмотров: 194

Скачиваний: 3

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.

СОДЕРЖАНИЕ

Введение 

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

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

Глава III – CSS.

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

Заключение

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

</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>

<style type="text/css">

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>, для возможности перехода на созданные нами веб-страницы.

<html><head>

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

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

</head><body>

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

<img src="pict.jpg" > <hr>

<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>

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

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

</body>

</html>

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

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

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

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

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

Заключение

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

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

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

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

  1. В.В.Дригалкин HTML в примерах. / Дригалкин В.В. – Москва: Издательский дом “Вальямс”, 2003 – 11 с. ↑

  2. Алексей Петюшкин. HTML. Экспресс-курс./ Петюшкин А.В. — СПб.: БХВ-Петербург, 2003. — 13 с ↑

  3. Ю.П.Лыч, Т.А.Голдобина. Создание Web-документов. Основы языка HTML: Пособие для лабораторных занятий студентов дневной и безотрывной форм обучения экономических специальностей. – 29 с ↑

  4. А.Чиртик HTML.Популярный самоучитель./ Чиртик А.А - СПб.: Питер, 2006. — 18 с. ↑

  5. Хольцшаг Молли Э. Использование HTML и XHTML/ Хольцшаг М. Э. Издательский дом “Вальямс”, 2003 – 104 с. ↑

  6. А.Ю.Гаевский, В.А.Романовский 100% самоучитель.Создание Web-страниц и Web-сайтов.HTML и JavaScript/Гаевский А. Ю., Романовский В. А.: - Москва Издательство: Технолоджи-3000 2008 г – 22 с ↑

  7. Е.Л. Полонская Самоучитель Язык HTML/ Полонская Е.Л. – Москва : Издательский дом “Вальямс”, 2003 – 224 с. ↑

  8. Сергей Велихов Справочник по HTML 4.0/ Велихов Сергей Москва:Бук-пресс,2006 – 231 с. ↑

  9. Дидре Хейз Освой самостоятельно HTML.10 минут на урок/Хецз Дидре Москва: ООО “И.Д. Вильямс” 2007 – 38 с. ↑

  10. Алексей Гончаров. Самоучитель HTML./Гончаров А. - СПб.: Питер, 2002. — 65 с. ↑

  11. Е.В. Мальчук. HTML и СSS.Самоучитель / Мальчук Е.В – Киев: Издательский дом “Вальямс”, 2008 – 34-35 с. ↑

  12. Александр Матросов,Александр Сергеев,Михаил Чаунин. HTML 4.0./Матросов А. В., Сергеев А. О., Чаунин М. П.- СПб.: БХВ-Петербург, 2003. - 50 с. ↑

Смотрите также файлы