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

Параметр также необязателен, как и предыдущий. Позволяет задать абсолютную ширину рисунка в пикселях.: Данный параметр используется, чтобы сообщить браузеру, куда поместить следующий блок текста. Это позволяет более строго задать расположение элементов на экране. Если данный параметр не используется, то большинство браузеров располагает изображение в левой части экрана, а текст справа от него.:

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

Приведем пример использования данного тэга:

С версии HTML 2.0 у тэга <IMG> появились дополнительные параметры:

Новые параметры::

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

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

То же самое, что и VSPACE, но только по горизонтали.

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

Описание фонового рисунка включается в тэг BODY и выглядит следующим образом:

<BODY BACKGROUND="picture.gif">.

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

<BODY BGCOLOR="#XXXXXX" TEXT="#XXXXXX" LINK="#XXXXXX"> каждый из параметров определяет цвет того или иного элемента. Опишем эти параметры::

Цвет фона документа:

Цвет простого текста документа:

Цвет ссылки. Цвет задается шестизначным числом в шестнадцатеричном формате по схеме RGB (Red, Green, Blue). Цвет #000000 соответствует черному, а цвет #FFFFFF - белому.

Например: <BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#9690CC">

Данная строка определяет белый цвет фона документа, черный текст и серебристые ссылки.

Горизонтальная линия. Используя тэг <HR>, вы можете разделить текст горизонтальной чертой.

Формат тэга:

Параметры тэга::

Толщина линии в пикселях.:

Ширина линии в пикселях или процентах от ширины окна браузера.: Расположение на экране (слева | по центру | справа).: По умолчанию линия представлена в 3D виде с тенью. NOSHADE позволяет представить линию просто однотонной темной полоской.

2.3. Добавление стилей в документ

Позволяет использовать различные стили шрифтов для выделения текстовой информации в ваших документах. Вот короткий список стилей, поддерживаемых большинством браузеров: (жирный) (наклонный) spaced (type writer - с использованием фиксированных шрифтов)

Вы можете комбинировать различные виды стилей, например, жирный и наклонный.

Таблица 7. Основные стили текста

Стиль	Элемент или тэг	Результат
Bold	<B> Этот текст жирный </B>	Этот текст жирный
Italic	<I> Этот текст наклонный </I>	Этот текст наклонный
Mono spaced	<TT> Этот текст с непроп. шрифтом </TT>	Этот текст с непроп. шрифтом

Комбинирование стилей позволяет вам отображать в одной строке несколько элементов различными стилями, например:

Жизнь - это песня!

Жизнь - это песня!

Добавление большого количества стилей и их комбинаций приводит к затруднению чтения текста.

Дополнительные стили:

· big (большой)

· small (маленький)

· sub (подстрочник)

· sup (надстрочник)

Таблица 8. Дополнительные стили текста

Стиль	Элемент или тэг	Результат
Big	Этот текст <BIG> большой </BIG>	Этот текст большой
Small	Этот текст <SMALL> маленький </SMALL>	Этот текст маленький
Sub	Этот текст <SUB> подстрочник </SUB>	Этот текст подстрочник
Sup	Этот текст <SUP> надстрочник </SUP>	Этот текст адстрочник

Размер шрифта . Вы можете изменять размер шрифта при помощи тэга:

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

Например: и зм ен ен и е

Изменение цвета шрифта . Вы можете изменить цвет шрифта при помощи тэга:

Цвет указывается в RGB-формате (Red-Green-Blue) посредством указания размерности каждой компоненты цвета в шестнадцатеричном формате. Например, белый цвет обозначается "000000", черный - "FFFFFF", синий - "0000FF" и т.п.

Красный Зеленый Синий.

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

Оптимизацию графики обязательно надо автоматизировать. О ней легко забыть, рекомендации меняются, да и сам контент может легко проскользнуть мимо конвейера сборки. Для автоматизации при сборке используйте imagemin или libvips. Есть и много других.

Большинство CDN (например, Akamai) и сторонних решений вроде Cloudinary, imgix, Fastly Image Optimizer, Instart Logic SmartVision и ImageOptim API предлагают комплексные автоматизированные решения для оптимизации изображений.

Проекты Imageflow или Thumbor предлагают альтернативу на собственном хостинге.

Необходимо эффективно сжимать изображения.

Как минимум, используйте ImageOptim. Он значительно уменьшает размер при сохранении визуального качества. Есть версии под Windows и Linux.

Более тщательный подход: прогоняйте JPEG-файлы через MozJPEG (для веб-контента приемлемо качество q=80 или ниже) и рассмотрите поддержку Progressive JPEG. Файлы PNG пропускайте через pngquant, а SVG — через SVGO. Явно укажите очистку от метаданных (--strip для pngquant), чтобы избежать раздутия файлов. Вместо сумасшедших гигантских анимированных GIF отдавайте пользователям видео H.264 (или WebM для Chrome, Firefox и Opera)! Если не можете себе это позволить, то хотя бы используйте Giflossy. Когда есть возможность потратить пару циклов CPU, а вам нужно изображение лучшего качества, и вы готовы смириться с длительным временем кодирования, то попробуйте Guetzli.

Некоторые браузеры анонсируют поддержку графических форматов через заголовок Accept. Это можно использовать при выборе формата для выдачи: например, формат WebP для браузеров на основе Blink, таких как Chrome, и вариант JPEG/PNG для других браузеров.

Сжатие всегда можно улучшить. Есть инструменты для генерации и выдачи srcset. В браузерах на основе Blink выбор ресурсов автоматизируется с помощью client-hints — и вы сэкономите трафик на пользователях, которые указали в браузере опцию «экономия данных» через подсказку Save-Data.

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

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

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

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

3. Алгоритм практической разработки Web-сайта на языке HTML

3.1. Разработка структуры сайта

На первом этапе продумывают, как должен выглядеть сайт и делают его дизайн, т. е. создают его оформление и внешний вид. Часто дизайн сайта рисуют в специальной программе типа Adobe Photoshop, а затем этот рисунок станет основой для дальнейшей работы над сайтом. Отсюда следует, что научиться рисовать дизайн и пользоваться программами Adobe Photoshop, Corel Draw, которые часто используются для создания дизайна сайтов, есть один из первых шагов к тому, чтобы научиться создавать свои собственные сайты. Однако для того, чтобы создать простой сайт, это не обязательно. Дизайн сайта в Adobe Photoshop рисуют тогда, когда хотят сделать сложный и красиво оформленный сайт с большим количеством графики и т. п., сайт с простым дизайном и небольшим количеством графики можно сделать, начав сразу со второго этапа.

На втором этапе делают вёрстку сайта и создание html-страницы или html-шаблона. Что такое вёрстка? Вёрстка - это процесс размещения на странице различных элементов - текста, графики и т. п. таким образом, чтобы всё это выглядело так, как задумано дизайнером, создававшим дизайн сайта. Если у вас простой сайт, можно, не делая дизайна, сразу начать с создания html-страницы (но для сложных сайтов сделать сначала дизайн, а потом вёрстку удобнее). Этот второй этап является, возможно, наиболее важным. Страницы на языке html - это основа любого сайта, и для того, чтобы создать свой собственный сайт, вы должны создать страницы для этого сайта на языке html. Как создавать html-страницу? Можно это сделать двумя основными способами - либо самому написать html-код, и это можно сделать даже в "Блокноте", либо сделать сайт в визуальном редакторе для создания сайтов - например, редакторе Dreamweaver. Чтобы сделать сайт в "Блокноте", нужно очень хорошо изучить язык html. Для создания в визуальном редакторе детальное знание html не обязательно, но всё же некоторое знание его основ желательно. В принципе, можно создать html-страницу даже в "Ворде", которым пользоваться умеют практически все, выбрав при создании нового документа соответствующий тип, но код страницы, созданной в "Ворде", очень неоптимален, поэтому лучше всё-таки использовать специальные редакторы для создания сайтов.

3.2. Создание сайта «VR атракцион»

На третьем этапе делают программирование сайта. Это не обязательно, но нужно, если сайт требуется сделать интерактивным, добавить к нему разные интересные функции, вроде голосований, форумов, чатов и т. д. Для того, чтобы запрограммировать эти интересные функции, нужно изучить языки веб-программирования. Код программ практически всегда пишется строчка за строчкой, в виде текста в том же "Блокноте" или более продвинутом редакторе. В рамках написания данной курсовой работы мы создали интерфейс сайта «VR аттракцион» рисунок 3.

Рис. 3 Интерфейс web-страницы «VR аттракцион»

Написанные свои собственные скрипты (т. е. программы для сайта) смотрите в Приложении 1.

В принципе, после этих трёх этапов сайт уже готов. Однако сайт ещё нужно разместить в интернете, а для этого нужно придумать сайту имя и найти хостинг, т. е. место для размещения сайта в интернете.

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

ЗАКЛЮЧЕНИЕ

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

Термин HTML (Hyper Text Markup Language) означает «язык маркировки гипертекстов». Это понятие более широкое, включает в себя Интернет и локальные сети, редакторы, броузеры, разнообразные програмные продукты, компакт-диски, обучающие курсы, дизайн и многое другое. HTML – своеобразная противоположность сложным языкам программирования, известным только специалистам.

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