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

Стиль	Элемент или тэг	Результат
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"> Синий.

2.4 Оптимизация графики для web

На данный момент в Web используется два типа растровых файлов: в форматах JPEG и GIF.формат хорошо передает цветовые и тоновые раскаты, размытые границы (например, фото). JPEG-файл хорошо масштабируется в браузере. Плохо передает ровные плоскости цвета, в компрессии уступает GIF-формату. При сохранении в JPEG-формате выбирайте качество "medium".формат хорошо передает ровные плоскости цвета, жесткие границы (например, векторную графику, логотипы). Имеет максимальную компрессию, допускает прозрачный фон. Плохо масштабируется в браузере, искажает цветовые и тоновые раскаты. Используйте GIF-формат, если изображение без значительных потерь переводится в 128-цветовую гамму с включенной опцией "dithering". В противном случае лучше сохранять изображение в JPEG-формате. Для экспорта файла в GIF-формат сначала проиндексируйте его цветовую палитру в Adobe Photoshop:

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

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

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

3. Алгоритм практической работы

3.1 Подготовка

Для создания web-сайта я использовал стандартную программу ОС Windows «блокнот»:

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

3.2 Создание сайта «Раффлезия Арнольди»

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

О группе - на главной странице располагается информация о составе группы и описание их появления.

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

Видео – на этой странице размещены видеоклипы группы которые так-же размещены по разделам как и альбомы на странице «Дискография».

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

Публикации – на этой странице размещены новости группы.

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

Дизайн всех страниц соответствует дизайну главной страницы.

программирование сайт файл расширение

Заключение

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

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

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

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

1. Алленова Наталья – Самоучитель по html.

2. Мальчук Е. – HTML и CSS. Самоучитель.

3. Web-сайт – www.msiter.ru

4. Web-сайт – www.ic.vrn.ru

5. Web-сайт – www. tcs74.ru/professii/MOCI

6. Web-сайт – www .vk.com›official public group2

7. Web-сайт – www.ic.vrn.ru/

8. Web-сайт – www.arachnoid.com/arachnophilia

9. Web-сайт – www.rzn62.narod.ru

10. Web-сайт – www.mysite.hut.ru

11. Web-сайт – www.htmlacademy.ru

12. Web-сайт – www. http://theory.phphtml.net/books/css/

Приложение

В качестве приложения я прикладываю ссылку на сайт который я написал и код главной страницы. http://www.rafflesia-arnoldi.16mb.com/

<html>

<head>

<!--[if lt IE 9]>

<![endif]-->

!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');

</script>

<title>О группе</title>

</head>

<body>

</script>

</div>

<li><a style="font-family:gungsuh; font-size:20px" href="index.html">О группе</a></li>

<li><a style="font-family:gungsuh; font-size:20px" href="index-line.html">Дискография</a></li>

<li><a style="font-family:gungsuh; font-size:20px" href="video.html">Видео</a></li>

<li><a style="font-family:gungsuh; font-size:20px" href="gallery.html">Галерея</a></li>

<li><a style="font-family:gungsuh; font-size:20px" href="gostevaya-kniga.html">Гостевая книга</a></li>

</ul>

</div>

<title>Полупрозрачный слой</title>

<style>

body {

background: url(image/fon2.png); /* Фоновый рисунок */

background-size: 100%

no-repeat center center fixed;

webkit-background-size: cover;

moz-background-size: cover;

o-background-size: cover;

background-size: cover;

}

.semilayer {

background-color: rgba(128, 128, 128, 0.2); /* Цвет фона и значение прозрачности */

padding: 10px; /* Поля вокруг текста */

color: #fff; /* Цвет текста */

margin: 0 auto; /* Выравниваем слой по центру */

width: 90%; /* Ширина слоя */

}

.inf{margin: 7px 15px 7px 7px;}

a {

text-decoration: none;

p {

text-indent: 20px; /* Отступ первой строки в пикселах */

}

</style>

</head>

<p><img src="image/1_1.jpg" width="350" height="350" align="left"

vspace="5" hspace="5" class="inf"><a style="font-family:gungsuh;color:white;font-size:20px">

<b><a style="font-family:gungsuh;color:white;font-size:40px"><p align="Center">Раффлезия Арнольди</p></b></a> <br/> <br/>

<p align="justify"><a style="font-family:gungsuh;color:white;font-size:20px">Раффлезия-Арнольди – молодой коллектив, играющий психоделическую музыку, образован в Ноябре 2013г.<br/>

Состав:<br/>- Бердников Константин (гитара, вокал) <br/>- Куракова Светлана (клавиши). <br/><br/>

Любовная тематика является основной для песен Раффлезии Арнольди. 7 Ноября 2014 коллектив выпустил дебютный альбом «Аполлинария»,

который посвящён одной прекрасной девушке. Автор всей музыки и текстов Бердников Константин.

Название группы произошло от цветка «Раффлезия Арнольда», цветок этот является растением-паразитом,

оно достаточно массивное и имеет аромат гниющего мяса…

Именно этот образ подчёркивает характерную черту нашей музыки, которая наполнена противоречивыми эмоциями,

в ней переплетены красота и уродство, причём так тесно, что они являются одним целым. Так же как и в человеке, ведь он прекрасен и уродлив одновременно.

Кстати, на обложке альбома изображён гибрид цветка и поганки, что в некоторой степени выражает тоже, что и название коллектива..</a></p> <br/>

<p><img src="image/6_6.jpg" width="350" height="350" align="right"

vspace="5" hspace="5" class="inf"><a style="font-family:gungsuh;color:white;font-size:20px">

<p align="justify">Около года назад Раффлезия Арнольди первый раз выступила со своим материалом.

С тех самых пор произошло много ярких событий: Мы наконец записали альбом "Аполлинария", который мучили несколько лет;

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

Технология клиент-сервер.pdf

Классификация стилей руководства.pdf

Грамматическая функция суффиксальной морфемы..pdf

Экономическое содержание и сущность механизмов принятия решения о выборе услуги.pdf

Основные функции в системе менеджмента (Понятие менеджмента, состав основных категорий).pdf

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

3. Алгоритм практической работы

Заключение

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

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

Информация

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

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