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

Для создания якоря следует вначале сделать закладку в соответствующем месте и дать ей имя при помощи атрибута name тега <a>. В качестве значения href для перехода к этому якорю используется имя закладки с символом решетки (#) впереди.

Указание маркера в теге ссылки:

<a name="named_anchor"> Текст ссылки </a>

Ссылка на маркер в тексте документа:

<a href="#named_anchor"> Текст </a>

В примере выше “#named_anchor” сообщает браузеру, что необходимо найти в документе маркер с именем “named_anchor”.

Рисунок 16Добавление якорной ссылки в верстку документа.

Рисунок 17Результат просмотра в браузере. При клике по ссылке "Это место, к которому нужно вернуться", будет осуществлен возврат к начало страницы.

Фоновые рисунки. Атрибут background тега <body>.

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

<body background="ссылка на изображение"> … </body>

Следующая конструкция применяет логотип учебной организации в качества фонового рисунка:

<body background="https://synergy.ru/lp/vpo/img/header/logo-fd06320174.svg">

Рисунок 18Логотип учебной организации в качества фонового рисунка.

Задание цветов для фона и элементов HTML-страницы

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

<body bgcolor ="#XXXXXX" text="#XXXXXX" link="#XXXXXX"> каждый из параметров определяет цвет того или иного элемента, соответственно: фона, текста, текста ссылки.

Цвет задается шестизначным числом в шестнадцатеричном формате по схеме RGB (Red, Green, Blue). Цвет #000000 соответствует черному, а цвет #FFFFFF - белому. Либо, может быть указан в виде наименования стандартных цветов: red, green, blue, black (красный, зеленый, голубой, черный) и т.д.

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

Рисунок 19Добавляем в верстку атрибуты для изменения цвевтов элементов документа.

Рисунок 20Результат исполнения кода браузером.

Тег параметров шрифта <font> … </font>

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

<font size = n color = “#XXXXXX”> … </font>

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

Рисунок 21Экспериментируем с параметрами шрифта.

Рисунок 22Оторажение результатов в браузере.

2.5. Оптимизация графики для WEB

На данный момент в Web используется два типа растровых файлов: в форматах JPEG и GIF. GIF хорошо передает цветовые и тоновые раскаты, размытые границы (например, фото). JPEG-файл хорошо масштабируется в браузере. Плохо передает ровные плоскости цвета, в компрессии уступает GIF-формату.

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

Используйте GIF-формат, если изображение без значительных потерь переводится в 128-цветовую гамму с включенной опцией "dithering". В противном случае лучше сохранять изображение в JPEG-формате.

Подбирайте минимальное количество цветов вручную (для качественной передачи антиалиасного одноцветного изображения на одноцветном фоне достаточно 5-8 цветов, двух-трехцветного изображения - 15-25 цветов). Если исходное изображение черно-белое (grayscale), перед индексацией переведите его в цветную гамму (RGB).

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

В сложных случаях перед индексированием выделите наиболее важные элементы изображения. Цвета внутри выделенной области индексируются корректнее остальных.

3. Практическая работа

В качестве практической работы мной выполнено создание web-станицы о празднике Хеллоуин. При создании страницы использована среда разработки Coda2.

Реализация красивого графического создания сайта выполнена с применением средств CSS (Cascading Style Sheets — каскадные таблицы стилей) – это расширение HTML, язык, предназначенный для описания внешнего вида HTML-документа.

Рисунок 23Сайт о празднике хеллоуин, созданом в рамках курсовой работы.

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

Интеграция стилей оформления CSS выполнена через включение дочернего тега <style type="text/css"> … </style> в родительский тег <head>. В рамках тега <style> мной выполнено описание стилистического оформления для различных объектов страницы.

В CSS применение стилистики оформления к объекту осуществляется либо через разработку для правил оформления, либо, через создание отдельного оформительского класса, который впоследствии можно применить к тегу, указав ссылку на класс в качестве атрибута. На рисунке ниже приведены примеры описания стилистики CSS для тегов с идентификтором #header и для тега <a>:

Правила нотаций стилистики оформления взяты мной с сайта «Самоучитель CSS» http://htmlbook.ru/samcss.

Код HTML-страницы приведен в приложении к настоящей курсовой работе. Также, посмотреть сайт можно по ссылке https://drive.google.com/drive/folders/0B-w8MHtddwmURFJHeG8tMGxldE0?usp=sharing. На сервисе GoogleDrive мной размещен архив сайта. Для открытия сайта необходимо перейти в папку «Сайт о празднике» и открыть файл celebrate.html.

Заключение

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

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

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

Дэвид Макфарланд "Большая книга CSS3" (Издательсвтво «Питер», 2016);

Дакетт Джон. ”HTML и CSS. Разработка и дизайн веб-сайтов” (Издательсвтво «ЭКСМО», 2019);

Web-сайт Консорцирума всемирной путины – www.w3c.com;

Web-сайт о разработке на HTML http://htmlbook.ru;

Страница об HTML на сайте Wikipedia https://ru.wikipedia.org/wiki/HTML.

Приложение. Код сайта о празднике Хеллоуин.

<!DOCTYPE html>

<html>

<head>

<title>О празднике Хэллоуин</title>

#header {

font-family: "Arial Rounded MT Bold";

font-size: small;

text-shadow: 1px 1px 1px black;

color: white;

padding: 10px;

background-color: #ff9933;

background-image: url(pump.png);

background-repeat: no-repeat;

background-position: right top;

background-size: 300px;

border-radius: 10px;

}

#menu, #content {

font-family: Helvetica;

font-size: small;

text-align: center;

}

#menu {

padding: 10px;

text-decoration: none;

}

ul {

text-align: center;

}

#menu a {

width: 150px;

display: inline-block;

text-align: center;

padding: 10px;

list-style: none;

border: 1px solid black;

background-color: orange;

border-radius: 10px;

box-shadow: 1px 1px 1px 1px gray;

}

#menu a:hover {

list-style: none;

border: 1px solid black;

background-color: #FFCC33;

border-radius: 10px;

box-shadow: 1px 1px 1px 1px gray;

}

a {

text-decoration: none;

color: black;

}

img.vrt {

border: 2px solid orange;

border-radius: 10px;

width: 200px;

box-shadow: 1px 1px 1px 2px gray;

margin: 10px;

}

img.hrz {

border: 2px solid orange;

border-radius: 10px;

width: 300px;

box-shadow: 1px 1px 1px 2px gray;

margin: 10px;

}

h2, h3 {

padding-left: .5em;

line-height: .5em;

}

td {

padding: 0;

margin: 0;

text-align: justify;

vertical-align: top;

line-height: 1em;

}

td p {

padding: 5px;

margin: 5px;

}

tr.cellhead {

background-color: #333333;

color: orange;

}

tr.cellnothead {

background-color: #FFCC66;

color: black;

border: 1px solid black;

}

td.radial {

border-radius: 10px;

}

div.cite p{

font-style: italic;

font-family: georgia, sans-serif;

color: gray;

text-shadow: 1px 1px 2px silver;

}

td.radial.backbtn {

background-color: none;

}

td.backbtn a {

display: block;

font-size: x-small;

font-weight: bold;

border: 1px solid orange;

border-radius: 10px;

background-color: white;

padding: 10px;

margin: 0;

text-align: center;

vertical-align: middle;

box-shadow: 1px 1px 1px 1px gray;

}

td.backbtn:hover a {

background-color: #FFCC33;

border: 1px solid black;

}

</style>

</head>

<body>

<h1>Halloween</h1>

</div>

<a href="#1">Что такое Хэллоуин?</a>

<a href="#2">История Хэллоуина</a>

<a href="#3">Символы праздника</a>

</div>

<p align="center"><a href="http://ru.wikipedia.org/wiki/%D5%FD%EB%EB%EE%F3%E8%ED" target="_blank">При подготовке страницы использованы материалы о Хэллоуине с сайта "Википедия"</a>

<h2 id="1">1. Что такое Хэллоуин?</h2>

<tr>

<p>Хэллоуин - это праздник нового года, отмечаемый древними кельтами в ночь на 1 ноября.

<p>История праздника берет свое начало на территории современных Англии, Ирландии и Северной Франции, где ранее проживали древние кельтские племена. Древние кельты делили год на две части – зиму и лето. 31-го октября считался последним летним днем и последним днем уходящего года. Этот день также означал окончание сбора урожая и переход на новый – зимний сезон. С этого дня, согласно приданию племени кельтов, начиналась зима.

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

</table>

<h2 id="2">2. История Хэллоуина</h2>

<tr>

<td>

<p>Историк Николас Роджерс, изучавший истоки Хэллоуина, отмечал, что, несмотря на попытки связать его происхождение с древнеримским праздником Паренталий, прообраз Хэллоуина, вероятнее всего, зародился только с появлением кельтского языческого празднества Самайн, описание которого появляется в старо-ирландской литературе начиная с X века. Название этого праздника произошло от староирландского слова Samhain, которое означало «конец лета» и впоследствии превратилось в ирландское название месяца ноября.

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

Языки гипертекстовой разметки.pdf

Финансы акционерных обществ (Анализа финансов ПАО «Транснефть»).pdf

Активы мировых финансовых центров мирового финансового рынка (Анализ деятельности современных мировых финансовых центров).pdf

Учетная политика организации: цели, задачи, формирование, применение.pdf

Влияние кадровой стратегии на работу службы персонала (на примере ООО «Заводские окна»).pdf

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

2.5. Оптимизация графики для WEB

3. Практическая работа

Заключение

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

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

Информация

Списки файлов

Дополнительно