Теги для веб страниц. Основные теги HTML
Создание веб-сайтов не так ое сложно е дело, как кажется. Узнайте, как закодировать простую страницу с помощью HTML - язык а разметки для Web.
Спроектировать и создать простой веб-сайт очень просто. Даже новички могут изучать веб-дизайн, не прилагая слишком много усилий и времени.
HTML - это основной язык разметки веб-страниц. Давайте изучим его основы, и попробуем создать простую страницу.
Введение в HTML
HTML - это язык гипертекстовой разметки.
Гипертекст - это текст, который работает как ссылка.
HTML определяет структуру веб-страницы, и обеспечивает ее надлежащее отображение в браузере. Документ HTML может быть очень простым или сложным, в зависимости от поставленных задач.
Веб-браузеры получают HTML-документы с веб-сервера, и отображают их как веб-страницы. Каждый браузер понимает HTML, и воспроизводит изображения, текст, видео, так, как это написано в коде.
HTML является основным языком разметки для Web. Однако он используется для создания статических веб-страниц, без интерактивности и анимации. HTML5, последняя версия HTML, немного лучше в этом смысле, особенно что касается видео или аудио.
HTML сегодня – это HTML5, новейшая версия, которая добавляет больше функций, чем предыдущие, и теперь может определять способ отображения видео, изображений и текста на экране браузера.
HTML5 - один из мощных инструментов для разработки веб-страниц. С HTML5 потоковая передача мультимедиа возможна без использования сторонних плагинов, таких как Flash. HTML5 также поддерживает хранение данных на стороне клиента. Это можно использовать для поддержки веб-приложений, когда клиент находится в автономном режиме.
Веб и HTML
Сеть состоит из взаимосвязанных веб-страниц и приложений, а также изображений, видео, анимации и интерактивного контента. Языки разметки составляют основу Web. Эти языки используются с тех пор, когда сайты были очень простыми, и будут оставаться частью сети, ее развития и будущего.
HTML остается фундаментальным навыком для всех веб-разработчиков и дизайнеров.
Согласно обзору W3Techs, HTML - это язык, используемый на 74,3% всех сайтов.
Как создать простую HTML-страницу
Разработка HTML проста, и поэтому можно легко научиться кодировать простую HTML-страницу. Но для начала нужно изучить основы языка.
Кодирование HTML с помощью текстового редактора
Документ HTML - это в основном текстовый документ. Существует множество доступных редакторов текста, которые можно использовать для написания HTML. Два самых популярных: Dreamweaver и Sublime Text. Бесплатные редакторы - Notepad ++ для Windows и Text Wrangler для Mac. На самом деле сделать веб-страницу можно и в Microsoft Word, но делать это не стоит, поскольку он добавляет дополнительный и ненужный код в документы HTML.
Для примера мы будем использовать Notepad ++ в качестве редактора. Вы можете выбрать любой редактор по вашему выбору.
Создание и редактирование HTML
Создание нового документа HTML такое же, как и для любого другого типа документа. Выберите «Файл» - «Новый», чтобы открыть новый документ в Notepad ++. Внесите изменения в документ и нажмите «Сохранить».
Сохранение HTML
HTML-документ - это файл с расширением.htm или.html. Некоторые редакторы также могут предоставить опцию «Сохранить как HTML». Называть файл лучше латинскими буквами, с маленькой буквы, а пробелы заменять тире или точками.
Если вы написали код в «Блокноте» и сохранили его как текстовый документ, то перевести его в html-страничку можно с помощью программы Total Commander. Выбираем команду «Переименовать» и меняем расширение файла из.txt на.html.
Формат HTML-страницы
HTML как язык состоит из элементов, тегов и атрибутов, которые определяют содержание сайта. Элементы HTML позволяют нам добавлять таблицы, изображения, видео, аудио и т. д. на веб-страницу.
Элементы HTML
Элементы определяют структуру и содержимое веб-страницы. Обозначаются угловыми скобками вокруг имени элемента. Содержимое, которое не находится между "", будет отображаться на веб-сайте. Элемент выглядит примерно так:
Теги
Элемент с угловыми скобками вокруг него образует тег (). Теги не отображаются на экране, но помогают браузеру понять, что он должен отображать. Открывающий тег отмечает начало элемента, а закрывающий тег отмечает его конец.
Например:
Открывающий тег:
Закрывающий тег:
Содержимое между открывающим и закрывающим тэгами является содержимым элемента.
Теги могут использоваться двумя способами:
Использование тегов в паре
Парные теги содержат открывающий и закрывающий теги. Вот как они выглядят:
Здесь какой-то текстСуществует открывающий тег () и закрывающий тег (), указывающий конец абзаца. Это означает, что все, что находится между этими двумя тегами, является абзацем.
Одиночные теги
Одиночные теги используются для определения самозакрывающихся элементов, и вставки элементов, таких как изображения. Вам не нужно определять начало и конец этих элементов.
Эти элементы пишутся так:
Закрытие / (косая черта) также не является обязательным. Это то же самое, что и при записи . Однако, чтобы избежать путаницы с открывающим тегом, рекомендуется добавить / (косую черту) в конце.
Атрибуты
Атрибуты - это элементы, которые расширяют теги дополнительной информацией. Атрибут помещается в открывающий тег, и включает имя и значение.
Тег с атрибутом будет выглядеть так:
Тег «HTML» выше имеет атрибут «lang» со значением «en-US».
Структура документа HTML
Каждый HTML-документ имеет базовую структуру, определенную с помощью следующих элементов:
DOCTYPE или DTD: Декларация типа документа указывает версию используемого HTML. Этот тег помещается в начале документа.
HTML: Пара тегов HTML определяет начало и конец документа HTML.
Раздел HEADER < head>: этот раздел определяет общую информацию для страницы, и обычно короткий. Содержимое этого элемента не отображается на странице. Заголовок содержит тег TITLE, который определяет название документа, отображаемое в строке заголовка браузера. HEADER также может содержать метаданные, или ссылки на внешние файлы.
Раздел BODY : Этот раздел содержит основную часть страницы. Его содержимое отображается в браузере. Большая часть кода HTML-страницы находится внутри элемента body.
Кодировка: этот тег указывает кодировку, используемую в документе HTML. Кодировка указывает, как файл сохраняется, и как будут отображаться специальные символы. Общепринятым значением для этого тега является UTF-8, который позволяет отображать практически все символы языка.
Простая страница HTML
Теперь, когда мы поняли основные элементы HTML, попробуем создать базовую HTML-страницу. Давайте начнем с создания чистого текстового документа в текстовом редакторе.
Шаг 1: Первая строка добавляемого HTML-кода указывает элемент DOCTYPE как «html». Это означает, что используется последняя версия HTML.
Шаг 3: Затем мы добавляем тег заголовка с тегом Title и сведениями о наборе символов.
Hello World
Шаг 4: После этого пишется тег BODY.
Hello World
Шаг 5: Теперь пустой HTML-документ готов. Давайте начнем добавлять текст для отображения. Мы добавляем тег заголовка и тег
Они определяют заголовок первого уровня и абзац под ним.
Hello World
Hello World
Простая страница HTML
Основная HTML-страница готова, и мы можем сохранить ее в папке по нашему выбору.
Просмотр страницы HTML
Чтобы просмотреть HTML-страницу, нам нужно открыть ее в браузере. Перейдите в папку, где был сохранен документ HTML, и дважды щелкните по нему.
Он откроется в браузере, и мы видим очень простую страницу. Вы можете проверить, что он показывает:
Заголовок как «Hello World»
Заголовок первого уровня как «Hello World»
Абзац с текстом «Простая страница HTML»
Теперь, когда мы создали простую HTML-страницу, давайте посмотрим, как мы можем добавить дополнительные функции. HTML предоставляет гораздо больше функций, чем то, что мы добавили в основную HTML-страницу. Вы можете добавить цвет фона, шрифты, указать цвета шрифтов, изображения, ссылки, списки и т. д., чтобы создать красивую HTML-страницу. Давайте рассмотрим некоторые из этих дополнительных функций.
Расширенное форматирование текста
В HTML предусмотрены специальные элементы для специального форматирования текста.
Уровни заголовков можно задавать с помощью тегов - . Всего доступно 6 уровней для заголовков. Причем - это самый большой из них по размеру, - самый маленький.
Теги
используются для указания начала нового абзаца. Браузер обычно добавляет одну пустую строку между двумя абзацами.
Элементы форматирования используются для отображения специальных типов текста. Текст может быть отформатирован такими тегами:
Жирный –
Курсив –
Подчеркнутый –
Шрифт –
Полный список этих тегов доступен по ссылке .
Добавление ссылок
Это текст ссылки
Добавление изображений
Тег является одиночным тегом, без тега закрытия. Вы можете указать атрибуты изображения.
Атрибут src указывает местоположение изображения.
Атрибут style имеет много параметров, включая ширину и высоту изображения в пикселях.
Атрибут alt дает краткое описание изображения. Используется, если по какой-либо причине изображение не загружается.
Добавление заголовка
Тег является новым для HTML5 и указывает самый верхний элемент веб-страницы. Заголовки обычно содержат логотип компании, контактную информацию, ссылки навигации и т. д. В одном документе может быть несколько элементов .
Расширенные понятия в HTML
HTML - простая технология для изучения, поэтому многие дизайнеры просто работают, имея элементарные понятия. Если вы хотите в полной мере использовать HTML, вам нужно будет ознакомиться с передовыми концепциями. Это поможет вам создать привлекательный веб-сайт с меньшими усилиями.
Мы упомянем несколько концепций, которые помогут вам в дальнейшем. Вы можете продолжить изучать больше и использовать расширенный HTML и его возможности.
Проверка HTML-кода
Проверка HTML используется для проверки ошибок в коде HTML. Если ваша веб-страница не загружается, вы можете использовать проверку, чтобы найти причину проблемы.
Валидация также дает рекомендации по коду, который не соответствует последнему стандарту HTML. Недействительный HTML сделает сайт непригодным для использования. Это может вызвать проблемы с загрузкой или несогласованность вывода с различными браузерами. Многие сервисы проверки бесплатны, например, validator.w3.org
Добавление дополнительных тегов
HTML-тегов и атрибутов намного больше, чем мы здесь обсуждали. Два хороших ресурса для обучения - w3schools и HTML Dog, у которых есть больше учебников и полный список тегов.
Вы также можете использовать «Просмотр исходной страницы» в браузере, чтобы изучить код хорошо продуманных веб-сайтов и увидеть новые методы.
С помощью услуги веб-хостинга вы можете добавить несколько HTML-страниц на свой веб-домен. Вам может потребоваться программное обеспечение FTP-загрузки для передачи ваших HTML-файлов на веб-сервер. Есть много услуг веб-хостинга, которые предоставляют функцию FTP.
Добавление CSS и JavaScript
CSS может использоваться для быстрого улучшения внешнего вида вашего сайта. Вы можете использовать CSS для добавления цвета, шрифтов и изменения размещения элементов. С привязкой таблицы стилей CSS к HTML-странице вы можете изменить стиль всего текста.
JavaScript - это язык программирования, и его можно использовать для добавления дополнительных функций HTML-страницам. Команды JavaScript вставляются между тегами . Они могут быть использованы для добавления интерактивных кнопок, выполнения математических расчетов и т. д.
Перед вами открывается удивительный мир веб-разработки. Дерзайте! Покорить эту вершину просто, нужно всего лишь начать.
В основе языка HTML лежит понятие «тэг» (англ.: tag -ярлычок, этикетка). Тэги заключаются в угловые скобки (< >) и образуют пары – контейнеры (открывающий тэг и закрывающий). Например, контейнером HTML документа является пара тэгов и . В web-странице включены контейнеры, отвечающие за заголовок документа (голова) и содержат дополнительную информацию, а также контейнеры, отвечающие за само содержание документа (тело). Они представлены на рисунке.
Итак HTML документ заключается в контейнер , заголовок в контейнер , а содержание документа в контейнере . Контейнер , расположенный в заголовке (контейнере ) содержит текст, отображающийся в верхней строке окна браузера. В контейнер заголовка также могут быть добавлены тэги, содержащие кодировку, ключевые слова web-страницы, а также код для подключения файлов каскадных таблиц стилей CSS, языка программирования jаvascript, VBScript и т.д.
Пример простейшей HTML странички, содержащей только основные тэги:
Название страничкиСодержание простейшей странички
Результат работы указанного кода изображен на рисунке.
Как видно из примера текст «Содержание простейшей странички» отображается обычным текстом. Для того чтобы произвести форматирование этого текста, необходимо использовать специальные тэги. Пример использования тэгов форматирования представлен на рисунке.
Для изменения шрифта, его цвета и размера используется тэг с параметрами “face”, “color” и “size”. Например для того чтобы задать шрифт “arial” красного цвета и 14 размера необходимо написать следующий код:
Форматируемтекст
Для выделения абзаца в тексте используется тэг
В контейнер которого как правило помещается каждый абзац текста. Для создания заголовка используются тэги , , , , , .
Для формирования списков в теле документа используются контейнеры , и . Причем тэг формирует нурмерованный список, тэг
- - маркированный список, а в тэгах
- помещаются элементы списка. Пример кода отображения списков, представленный в виде нумерованного и маркированного списков представлен на рисунке.
Для связи двух и более Web-страниц между собой используются гиперссылки, для создания которых используется тэг . Причем в тэгах гиперссылок используются дополнительные атрибуты, позволяющие либо перейти к другой web-странице, либо переместиться внутри данной страницы. Второй способ желательно использовать в большом документе, имеющем несколько смысловых разделов.
Пример использования гиперссылок представлен на рисунке.
При указании URL адреса другой страницы необходимо указывать либо полный абсолютный путь к странице «полный путь/папка/страница» либо относительный (относительно данной страницы) «папка/страница». Параметр “target” позволяет открыть web-страницу в новом или существующем окне браузера.
Для вставки изображения на web-страницу используется тэг с параметрами src (путь к изображению), width (ширина изображения), height (высота изображения), border (рамка вокруг рисунка). Пример кода вставки изображения:
Часто при создании Web-страниц необходимым является задание фонового цвета или фонового изображения. Для этого используются атрибуты тэга «bgcolor» или «background-image». Пример вставки фонового цвета:
Пример вставки фонового изображения:
Указанные атрибуты могут быть использованы не только для тэга , но и для тэгов таблицы , области и других, которые будут рассмотрены в следующих темах.
Курс «Создание Web-страниц средствами языка HTM L »
Тема 1. Начальные сведения о языке HTML
Назначение языка HTML
Web -страницы – это специальные файлы, написанные на языке HTML (Hyper Text Markup Language – язык разметки гипертекста) . Под разметкой понимается вставка в текст специальных кодов (тегов), определяющих то, как итоговый гипертекстовый документ должен отображаться специальной программой - броузером.
Язык HTML предназначен для создания системно-независимых файлов и не описывает формат документа, но описывает его структуру. Например, если в тексте встречается заголовок, то код HTML просто указывает, что соответствующий фрагмент является заголовком. Получив такой код, программа - броузер сама решает, что ей делать с заголовком. Возможно, она отобразит его более крупным шрифтом или выровнять по центру экрана. Если этот текст будет воспроизведен синтезатором речи, то синтезатор использует этот код, чтобы повысить громкость и сделать необходимую паузу.
Язык HTML представляет собой компьютерный язык, в некотором смысле родственный языкам программирования. Он включает достаточно строгие правила, которые необходимо соблюдать, чтобы получить правильные результаты.
Язык HTML появился одновременно со службой Worl d Wide Web и развивался вместе с ней. Он является основой Worl d Wide Web и одновременно причиной ее широчайшей популярности.
HTML - файл
HTML - файл – текстовый файл, имеющий расширение .htm или . html Web -страница хранится в виде HTML - файла. Для создания HTML - файла могут использоваться как простые текстовые редакторы, такие как Блокнот или Word Pad , так и редакторы Web.
Структура документа HTML
Документ HTML состоит из основного документа и тегов разметки, которые являются наборами обычных символов.
Все документы HTML имеют строго заданную структуру. Документ должен начинаться с тега и заканчиваться соответствующим закрывающим тегом. Эта пара тегов сообщает броузеру, что перед ним действительно документ HTML.
Документ HTML состоит из раздела заголовков и тела документа , идущих именно в таком порядке. Раздел заголовков заключён между тегами и и содержит информацию о документе в целом. В частности, этот раздел должен содержать внутри себя теги и, между которыми размещают «официальный» заголовок документа.
Сам текст документа располагается в теле документа . Тело документа располагается между тегами и BODY >. На практике определить место положения этих основных тегов можно и при их отсутствии. Поэтому, если теги, и , а также соответствующие им закрывающие теги опущены, то программа - броузер может сама определить то место, где они должны были находиться. Но всё-таки при создании Web-страниц опускать эти теги не рекомендуется.
Простейший правильный документ HTML.
< HEAD >
< TITLE >Заголовок документа TITLE >
HEAD >
< BODY >
BODY >
Теги HTML
Язык HTML состоит из специальных разметочных указателей – тегов. Их также можно назвать командами, инструкциями или кодами языка HTML.
Тег – инструкция броузеру, указывающая способ отображения текста. Все теги начинаются с символа «меньше» (). Пару этих символов иногда называют угловыми скобками. После открывающей угловой скобки идет ключевое слово , определяющее тег.
Каждый тег в языке HTML имеет специальное назначение. Регистр букв в названиях тегов не имеет значения – можно использовать как строчные, так и прописные буквы, хотя общепринято использовать прописные буквы, чтобы теги отличались от обычного текста документа.
Существует два типа тегов – парные и непарные.
Парные теги – открывающие и закрывающие, аналогичные круглым скобкам алгебраического выражения. Они влияют на текст с того места, где употреблены, до того места, где указан признак окончания их действия (закрывающие теги начинаются с символа косой черты (/).
Например, < HTML > HTML >, < P > P >, H 3>
Непарные теги дают разовый эффект в месте своего появления, поэтому в закрывающем теге нет необходимости.
Например,
, ,Тег несет служебную информацию о Web -сайте и не отображается в экране браузера: это информация о кодировке Web -странички, об авторе, а также набор ключевых слов для поиска, отображающих содержание сайта.
Пример.
Пример создания таблицы
Из примера видно, что страничка использует кодировку W indows-1251 - наиболее распространенную на сегодняшний день, достаточно лишь каждый раз вставлять этот тэг в таком виде на свою страничку; автор страницы – Иванов Иван; страница посвящена животным.
При отображении документа в браузере сами теги не отображаются, но влияют на способ отображения документа. Если по ошибке в теге указано ключевое слово, отсутствующее в языке HTML, то тег игнорируется целиком.
Атрибуты теговОткрывающие теги часто могут содержать атрибуты, влияющие на эффект, создаваемый тегом.
Атрибуты – это дополнительные ключевые слова, отделенные от ключевого слова тега и друг от друга пробелами.
Атрибуты могут иметь значения, записываемые после знака равенства (=). Всегда полезно заключать значение атрибута в кавычки (одинарные либо двойные). Строка в кавычках не должна содержать такие же кавычки внутри себя. Можно опускать кавычки для значений атрибутов, которые состоят только из следующих символов:
промежутков времени;
дефисов (-).
символов английского алфавита;
Вы можете также опустить кавычки для значений атрибутов, которые состоят только из следующих символов (обратитесь к технической концепции ):
символов английского алфавита (A - Z , a - z )
цифр (0 - 9 )
промежутков времени
дефисов (- )
Таким образом, WIDTH=80 и ALIGN=CENTER - разрешенное сокращение для WIDTH="80" и ALIGN="CENTER" .
Закрывающие теги не содержат атрибутов.Примеры. FONT >
Комментарии
Подобно тому, как во всех языках программирования есть возможность внесения в программу комментариев (текстовых строк, не являющихся частью программы), есть она и в языке HTML. Начинается комментарий со специального тега. Комментарий может включать в себя любые символы, кроме символа “больше” (>), и, таким образом, не может включать в себя теги.
Принцип наследования тегов
Теги-контейнеры.
Мы уже знаем, что теги в большинстве своем состоят из двух частей - это открывающий (он же - содержащий атрибуты) и закрывающий, то есть, "конец" тега. Заданные в теге параметры действуют только между его началом и концом, то есть, только внутри тега:текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текстОтступы от левого края не случайны - они автоматически выставляются программами, формирующими код HTML для упрощения его восприятия. Достаточно понимать, что чем дальше от левого края отстоит тег, тем "глубже" он лежит, тем большее количество "старших" тегов может на него действовать.
Также следует заметить, что некоторые атрибуты вложенных тегов могут воздействовать и на вышестоящие, "старшие" теги. Например, это типично для таблиц, вложенных одна в другую.
Если у внутренней таблицы размер задан 100 , то у внешней не может быть размера меньше 100 пикселов + толщина рамки. Таким образом, вложенная таблица как бы "распирает" ту, в которую она вложена. При этом, даже если у нее не задан размер, а количество текста в ней значительно, она будет распирать "старшую" таблицу на такой размер, который необходим для отображения соответствующего количества строк текста. Это называется "обратная связь".Практическая работа № 1
«Создание простейшей Web -страницы»
Цель: научиться создавать Web -страницы в текстовом редакторе Блокнот.
Указания к выполнению
Наберите в нём структуру HTML -документа, которая приведена ниже:
О братьях наших меньших.
Здесь будет размещено содержание Web-страницы
Сохраните файл, присвоив ему имя index .htm .
Откройте созданный файл. Вы увидите, как выглядит созданный вами файл в окне браузера.
Закройте браузер.
Вернитесь к сохранённому в Блокноте файлу.
Внесите в него следующие изменения: вместо слов «Здесь будет размещено содержание Web -страницы», наберите следующие:Это моя первая страничка .
В строке < TITLE > укажите: «Домашняя страничка (ваше имя и фамилия)».
Сохраните файл как page 2.htm .
Просмотрите результат в браузере, при необходимости отредактируйте файл при помощи Блокнота.
Теги физического и логического форматирования текста
Форматирование шрифта . Для форматирования текста существует большое количество элементов. Форматировать текст можно с помощью традиционных элементов: выделять фрагменты курсивом, полужирным шрифтом, выбирать шрифт, размер и цвет шрифта, выравнивать текстовые фрагменты. Если автору не хватает простых вариантов форматирования текста, он может прибегнуть к таблицам стилей, которые существенно расширяют возможности языка HTML по форматированию.
Рассмотрим более подробно стандартные элементы языка HTML, позволяющие форматировать текст.
Шрифт - это таблицы замены кода видимым изображением.
Arial
Каждая клавиша вашей клавиатуры дает определенный код, распознаваемый ОС (операционной системой, в большинстве случаев это Windows или Linux/Unix).
Таким образом, выбрав определенный шрифт, система заменяет полученный с клавиатуры код на сопоставленное в таблице символов шрифта изображение буквы или значка. Каждый шрифт - это файл. Файл, содержащий изображения букв, цифр и символов, назначаемых на каждую кнопку. Установить шрифт - означает включить в систему файл с дополнительными таблицами сопоставления. В системах MS Windows обычно используется несколько шрифтов, поставляемых вместе с системой - это:Ариал
Courier New
Курьер Нью
Comic Sans
Комик Санс
Times New Roman
Таймс Нью Роман
Verdana
Вердана
Каждый из этих шрифтов уместен в своем дизайне и стиле. Наиболее распространен - Ариал. Все эти шрифты есть у 90% всех посетителей вашей будущей странички. Каждый шрифт - это самостоятельный файл в папке Windows/fonts/ *.ttf. Как в HTML придать шрифту тот или иной вид?
< FONT >… FONT > определение типа, размера и цвета шрифта . Все эти характеристики определяются при помощи соответствующих атрибутов.Абсолютный размер шрифта задается атрибутом si ze (размер) . Этот атрибут может принимать значения от 1 до 7, при этом шрифт 1-го размера - самый маленький, а 7-го – самый большой.
Примеры.текст размера 1
текст размера 2
текст размера 3
текст размера 4
текст размера 5текст размера 6
текст размера 7Тише едешь – дальше будешьONT >.
В дизайне обычно используются первые четыре размера. Все, что выше, дурной тон и признак дилетантства, ибо занимает слишком много места и трудно читается. Правда, и большим размерам находится применение. Например, седьмым размером можно писать буквицу (первую букву начала главы): Т екст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст.
Кроме прочего, мы можем выбрать и сам шрифт, используемый для отображения текста. Делается это атрибутом face (вид).Примеры. Это шрифт arial размером 3 ONT >
текст FONT >
Как видим, э ти два атрибута - размер и вид шрифта, - можно расположить в любой последовательности в теге :
Можно также использовать атрибут color (цвет). Название цвета задается либо числом, написанным в шестнадцатеричной системе, например, co lor=”#ff 0000”, либо просто его названием, написанным на английском языке, например, color =”red ”.Примеры. Это шрифт синего цвета FONT >
Это шрифт arial размером 3, цвет синий FONT >
Шрифт так же может быть: наклонный (курсив), жирный, подчеркнутый, перечеркнутый, надстрочный, подстрочный, а также сочетающий в себе несколько указанных видов. Достигается это, соответственно, тегами:
< I > текст I >
< B >текст B >
< U > текст U >
< S > текст S >
< SUP > текст SUP >
< SUB > текст SUB >,
а также их сочетанием, например, текст U >B >
Форматирование абзаца. В большинстве обычных документов основными функциональными разделами являются заголовки и абзацы. Web -документы не являются исключением. Для обозначения обычных абзацев в языке HTML используют тег…P > (Paragraph ). Причем, можно использовать только начальный тег, так как следующий элемент
обозначает не только начало следующего абзаца, но и конец предыдущего. В тех случаях, когда по смыслу необходимо обозначить завершение абзаца, можно использовать и конечный тег.
Вместе с тегом абзаца можно использовать и атрибут align (выравнивание) :
align =”left ” – выравнивание по левому краю;
align =”right ” - выравнивание по правому краю;
align =”center ” - выравнивание по центру.
Пример.Глава 1P >
АнимацияP >
стр. 3P >
В языке HTML нет средств для создания абзацного отступа (”красной строки”), поэтому для удобочитаемости текста между абзацами броузер обычно вводит пустую строку. Если нужно осуществить переход на новую строку без создания абзаца, используется одиночный тег
. В месте его размещения строка заканчивается, а оставшийся текст печатается с новой строки. Этот тег удобно использовать, чтобы, например, писать стихи в столбик:
Уронили мишку на пол,
Оторвали мишке лапу,
Все равно его не брошу,
Потому, что он хороший.
На экране браузера мы увидим стандартным образом написанное четверостишие.Важным средством создания разделителей в тексте являются горизонтальные полоски-линейки, визуально отделяющие разные части документа друг от друга. Горизонтальная линейка создается одиночным тегом .. С его помощью очень удобно делить страницу на части. В теге допускается ряд атрибутов:
Выравнивание
align = “left”
align = “ center”
align = “ right ”
align = “ justify ”
Толщина и длина линии в пикселях.
Size = 3(ширина в пикселях)
width= 300 (длина в пикселях)
width= 100% (длина в процентах)
Цвет линии
color =”red ”
Язык HTML поддерживает шесть уровней внутренних заголовков документа. Они помечаются тегами от
… до … .
Заголовок первого уровня самый крупный, а шестого уровня – самый мелкий. Для заголовков можно использовать атрибуты выравнивания влево, по центру, вправо.
Пример. Самый большой заголовок
Самый маленький заголовокДомашние животные
Логическое форматирование текста . В данном пункте мы рассмотрим теги, по своему эффекту очень напоминающие теги, задающие размер, цвет и начертание шрифта. Однако принципиальное различие заключается в том, что эти теги действительно описывают реальные свойства текста. Это означает, что текст может по разному отображаться в разных браузерах, но какой-то эффект гарантирован даже в том случае, когда по какой-то причине нет возможности применить шрифтовые эффекты. Все эти теги парные и воздействуют на текст, заключенный между открывающим и закрывающим тегами. Закрывающий тег обязателен.
Тег … используется для цитат, названий книг. Обычно изображается курсивом.
Так как язык HTML был создан людьми, связанными с компьютерами, целая группа тегов предназначена для представления текстов компьютерных программ и результатов взаимодействия пользователя с ними.
Тег < CODE >… CODE > указывает на исходный текст компьютерной программы, обычно отображается моноширинным шрифтом (чаще всего шрифт Courier), то есть шрифтом с фиксированным размером.
Тег < KBD >… KBD > оформляет текст, который должен быть (или был) введен с помощью клавиатуры, обычно отображается моноширинным полужирным шрифтом. От английского keyboard - клавиатура
Пример.Для запуска Windows наберите: win .
Код :
Для запуска Windows наберите: win
Тег … отмечает текст как образец (sample). Используется для отметки текста, выдаваемого программами. Отображается моноширинным шрифтом.
Пример.
Это обычный текст
Тег … используется для выделения переменных в листинге программы. Обычно такой текст отображается курсивом. От английского var iable – переменная.
Пример .
A , B , C
Код:
A , B , C var >Тег < EM >… EM > используется для выделения элементов текста (обычно курсивом).
Тег < STRONG >… STRONG > используется для более сильного выделения элементов текста (полужирным шрифтом).
Пример.
Это обычный текст
А это уже текст с использованием тега .
Так как здесь используется смысловое выделение вместо оформительского, рекомендуется использовать эти теги вместо тегов и < B >.Практическая работа № 2
“Форматирование текста на Web-странице”
Цель: научиться форматировать шрифт и текст на Web -странице.
Указания к выполнению
В элементе < TITLE > укажите название странички “П/р № 2”.
Отформатируйте следующий текст согласно указаниям (даны в скобках курсивом), как показано на рисунке.
(заголовок H 1)
(выравнивание по центру)
Собаки
(заголовок H 2)
(выравнивание по центру)
Сторожевые
(выравнивание слева, полужирный шрифт)
Охотничьи
(выравнивание справа, полужирный шрифт)
Дрессировка
(выравнивание по центру, полужирный курсив)
Клубы Выставки Площадки
(выравнивание по центру, размер шрифта 10, цвет шрифта красный, шрифт Arial )
Стихотворение
(цвет шрифта синий, размер шрифта 6, выравнивание по центру)
По жизни я скромен,
Оваций не надо,
Но как же я классно
Смотрюсь у снаряда!
(выравнивание по левому краю, размер шрифта 6)
Создание списков
Маркированные списки. Список отличается от обычного текста тем, что пользователю не надо думать о нумерации его пунктов: эту задачу программа берет на себя. Если список дополняется новыми пунктами или укорачивается, нумерация корректируется автоматически. В случае ненумерованных списков программа ставит перед каждым пунктом маркеры: кружки, прямоугольники, ромбы или другие изображения. В результате список принимает удобочитаемый вид.
Теги создания ненумерованного списка:
< LI > UL >
Тег- является своеобразным обрамлением списка. Он позволяет отделять один список от другого. Тег
- обозначает каждый из пунктов.
Пример.
Пункт 1 списка
Пункт 2 списка
Пункт 3 списка
Вид на экране:
Пункт 1 списка
Пункт 2 списка
Пункт 3 списка
Теги создания нумерованного списка: < O L> < LI > OL >
Нумерованные списки. Структура нумерованного списка похожа на структуру ненумерованного списка. Только для обрамления используется тег- . Каждый пункт нумеруется арабскими или римскими числами, буквами латинского алфавита.
Пример.
Пункт 1 списка
Пункт 2 списка
Пункт 3 списка
O L>Вид на экране:
Пункт 1 списка
Пункт 2 списка
Пункт 3 списка
Способ нумерации задается при помощи атрибута type . В таблице приведены все способы нумерации:
Вид нумерации
Практическая работа № 3
«Создание нумерованных и ненумерованных списков»
Цель : научиться создавать списки на Web –страницах.
Указания к выполнению :
1 . Создайте новую Web –страницу в редакторе Блокнот.
2 . В элементе укажите названия странички «П/р № 3».
3 . Отформатируйте следующий текст согласно указаниям (даны в скобках курсивом), как показано на рисунке:
Солнце должно быть:
(Шрифт размером 8, красного цвета,
выравнивание по центру)
1. Теплым.
2. Круглым.
3. Желтым.
Снег должен быть:
(Шрифт размером 6, синего цвета,
выравнивание по центру)
В. Холодным.
С. Пушистым.
(Шрифт обоих списков черный, размер 3).
Гиперссылки
Виды гиперссылок. < A >… A > создание гипертекстовой ссылки.
В этом теге обязателен атрибут href . Его значением является адрес URL, на который указывает ссылка. Текст ссылки размещают между тегами < A >… A >. При отображении документа в браузере текст ссылки обычно подчеркивается и изображается синим цветом. Щелчок на ссылке приводит к переходу по заданному адресу URL.Можно выделить несколько видов гиперссылок.
Внешние (связывают Web-страницу с документами, не принадлежащими данному Web-узлу).
Внутренние (связывают документы внутри одного и того же Web-узла).
Абсолютный путь. Если гиперссылка внешняя, то указывается полный URL документа, называемый еще абсолютным путем.
Пример. Microsoft A >
Основное неудобство абсолютного пути заключается в том, что при переносе файлов на другой сервер в Интернете требуется менять все гиперссылки.Относительный путь. Если гиперссылка внутренняя, то указывается только та часть URL , которая отличается у двух связываемых документов (так называемыйотносительный путь ), например, если два документа находятся в одной папке, то достаточно указать имя файла, на который указывает гиперссылка.
Если документы находятся в разных папках, то сначала указывается имя папки, затем имя файла, на который указывает гиперссылка.Примеры. Моя личная страницаA >
Бег на длинные дистанцииA >
Использовать внутренние ссылки удобнее, так как в этом случае при переносе Web -узла на другой сервер не требуется вносить изменения в отдельные документы.Якоря. Гипертекстовые ссылки могут указывать на определенное место внутри страницы, если в нужное место предварительно вставить якорь . Якорь также использует теги и A >, но вместо атрибута href для него обязательным является атрибут name . Значением этого атрибута является имя якоря. Оно может состоять только из латинских букв, цифр и не должно содержать пробелов.
Для ссылки на установленный якорь надо указать имя якоря в конце адреса URL после имени документа, отделив его символом «#».Указание почтового адреса в гиперссылке . Когда гиперссылка используется для указания адреса электронной почты, ее выбор обеспечивает не переход к новому документу, а запуск почтовой программы на компьютере для отправки сообщения указанному адресату. Обычно такую ссылку размещают в конце страницы для обеспечения связи с Web-мастером или автором страницы, например, Иванов АлексейA >
Пример.
Ссылки и якоряTITLE >
HEAD >
Новые версии стандартных программ операционной системы свежие драйверы можно найти на Web -узле компании
Microsoft A >
А теперь можно перейти к моей личной страницеA >
О том, как связаться с автором, рассказано в
конце этой страницы
Здесь располагается основное содержание страницы
address”>Адрес электронной почтыA >
BODY >
HTML >Практическая работа № 4
«Создание гиперссылок»
Задание 1. Создание простейшей гиперссылки.
Цель: научиться связывать два HTML –документа с помощью гиперссылок.
Указания к выполнению:
Создайте две Web –страницы в редакторе Блокнот. Одну назовите page 1.htm , вторую page 2.htm . Обе странички сохраните в одной папке под названием site . Обратите внимание, что названия папки и страничек должны быть на английском языке и начинаться со строчной буквы.
В элементе укажите названия странички «П/р № 4. Задание 1».
На страницу 2
На страницу 1
Откройте в браузере первую страничку и убедитесь, что обе гиперссылки работают правильно.
Задание 2. Создание гиперссылок.
Цель: научиться связывать три HTML –документа с помощью гиперссылок.
Выполнить второе задание вы можете, если успешно справились с Заданием 1.
Создайте третью страничку page 3.htm .
На страничке page 3.htm создайте гиперссылки для перехода на странички page 1.htm и page 2.htm .
На страничках page 1.htm и page 2.htm добавьте гиперссылку для перехода на страничку page 3.htm .
Откройте в браузере первую страничку и убедитесь, что теперь можно перейти с любой странички на любую другую из трех созданных.
Задание 3. Цвет гиперссылок.
Цель: научиться определять цвет гиперссылок.
Выполнить задание вы можете, если успешно справились с Заданием 2.
На страничках page 1.htm , page 2.htm и page 3.htm в тэге определите цвет гиперссылок:
Откройте в браузере первую страничку и, переходя по ссылкам со странички на страничку, убедитесь, что цвет гиперссылок задан верно.
Рисунки на Web -странице.
Иллюстрации (рисунки, фотографии) играют важнейшую роль в оформлении Web -страниц. Сами рисунки хранятся в отдельных файлах вне документа HTML , но отображаются браузером внутри. Для этого служит одиночный тег < IMG >. Обязательным атрибутом этого тега является атрибут src , значением которого является путь к файлу с рисунком или фотографией,
Если картинка лежит в той же папке, что и Web -страница, то путь представляет собой просто имя файла, например: . Если картинка лежит в другой папке, то эту папку надо указать, например: . Если картинка лежит на другом сайте, то путь прописывается полностью:
.В теге можно также использовать такие атрибуты, как:
height , width – задают высоту и ширину области, в которой демонстрируется рисунок. Если задан только один из этих атрибутов, то второй размер устанавливается в соответствующей пропорции. Но нужно помнить, что масштабирование ухудшает качество изображения. Размер рисунка измеряется в пикселях или в процентах, например: , border – задаёт толщину рамки вокруг картинки (в пикселях). Этот атрибут можно не задавать, так как, по умолчанию, рамка вокруг картинки есть всегда. Но, если вы хотите её убрать, то выставляйте значение атрибута border равным нулю,
bordercolor – задаёт цвет рамки вокруг картинки, например:
< IMG src="picture.gif" border="3" bordercolor="#CC0000">
В нашем примере цвет рамки задан красным, ну, и, естественно, что атрибут border (толщина рамки) не должен равняться нулю, если вы хотите видеть рамку вокруг картинки,
align – выравнивание картинки относительно других объектов:
картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа,
картинка - справа, текст - слева.Текст может располагаться также внизу картинки (это по умолчанию) - (1), посередине - (2), и вверху - (3):
(1) -
(2) -
(3) -vspace - задает расстояние между текстом и рисунком (по вертикали):
,
hspace - задает расстояние между текстом и рисунком (по горизонтали):< imgsrc=" pr1. png" hspace="30">
Расстояние задается в пикселях.С помощью тега можно использовать изображения в гиперссылках, вставлять картинки в таблицы, решать задачи дизайна…
Практическая работа № 5
«Использование рисунка в качестве гиперссылки»
Цель : научиться использовать рисунок в качестве гиперссылки.
На страничках page 1.htm , page 2.htm и page 3.htm вместо текстовых гиперссылок используйте рисунки. Для этого:
откройте папку, указанную учителем (в папке находятся файлы с изображением цветных кнопок), вставьте на первую страничку изображение голубой кнопки и создайте гиперссылку для перехода на вторую страницу:
Самостоятельно вставьте изображение оранжевой кнопки для перехода с первой страницы на третью;
Задайте бордюр обоих изображений равным 2;
Откройте в браузере первую страничку и, переходя по ссылкам со странички на страничку, убедитесь, что кнопки работают верно.
Самостоятельно вставьте изображения кнопок на страницы page 2.htm и page 3.htm и задайте соответствующие гиперссылки.
Откройте в браузере первую страничку и, переходя по ссылкам со странички на страничку, убедитесь, что кнопки на всех страничках работают верно.
Альтернативный текст. Web-страница может отображаться браузером, не имеющим средств для показа изображений. Пользователи часто отключают показ рисунков, чтобы ускорить прием документа. И в том и в другом случае желательно дать возможность узнать, что же изображено на картинке, если ее нельзя увидеть. Для этой цели используют альтернативный текст, который задается в теге < IMG> атрибутом alt (или title ), этот атрибут выводит текст в месте расположения картинки во время её загрузки. Например:
Использование рисунка в качестве фона . Если вы хотите использовать рисунок в качестве фона странички (“обоев”), то в теге используем этот атрибут с указанием адреса картинки. Например:
.
Фреймы
Размещение нескольких документов на одной Web-странице. Язык HTML позволяет разбить окно программы броузера на несколько частей и в каждой из них отобразить отдельный документ. Такие области называются фреймами.
Чем отличается структура документа HTML , содержащего фреймы, от обычного документа HTML ? Такой документ не содержит раздела «тела» документа и не содержит какого-либо текста вообще. Вместо этого он содержит описание фреймов и названия документов, загружаемых в отдельные области.
< FRAMESET >… FRAMESET > тегописания фреймов.
Между тегами < FRAMESET >…FRAMESET > содержится описание размеров и порядка размещения областей в окне броузера, а также задаются документы, которые должны загружаться в каждую из этих областей.
Тег должен содержать обязательный атрибут cols или rows, определяющий способ разбиения окна. Значения этих атрибутов определяют высоту (или ширину) областей окна. Их задают через запятую в пикселах или в процентах. В качестве последнего параметра можно использовать символ «звездочка» (*). Под такой фрейм выделяется все свободное пространство.
При использовании атрибута cols окно делится на области вертикальными линиями, а при использовании атрибута rows – горизонтальными, например,
,
Если заданы оба этих атрибута, в окне создается сетка из подобластей, например,
frameset >
В результате экран делится на четыре подобласти: две горизонтальных и две вертикальных. Причем, именно третье значение атрибута rows позволяет отвести на экране место под вертикальную подобласть.< FRAM E> - одиночныйтег, вложенный в тег , должен содержать обязательный атрибут src , определяющий документ, который будет загружен в отдельную область, например,
Пример.
head >
Страница с навигационной панельюtitle >
frameset >
html >
АКачество документов HTML.
Творческий характер создания документов HTML сродни программированию, так что при этом возможны ошибки, которые могут привести к трудностям или даже полной невозможности прочитать созданный документ в Интернете. Кроме того, огромное разнообразие компьютеров, подключенных к Интернету, приводит к тому, что заранее невозможно предсказать, как именно будет выглядеть документ на экране конкретного пользователя.
Web-страницы предназначаются для широкой аудитории, так что при подготовке документов HTML следует иметь в виду эти особенности. Чтобы создать хороший документ HTML, следует придерживаться ряда достаточно простых правил.
3. Для того чтобы документ HTML был доступен самой широкой аудитории, следует «отставать на один шаг» от последних достижений в развитии языка HTML. Последние нововведения не всегда сразу реализуются в браузерах, а новым версиям требуется время на то, чтобы достичь большинства пользователей. Документы с использованием самых свежих новшеств доступны лишь ограниченной аудитории.
4. Ошибка, которую часто делают новички, состоит в злоупотреблении элементами оформления, особенно разнообразными цветами и шрифтами. Такая страница в лучшем случае будет выглядеть кричащей. В худшем случае, текст вообще нельзя будет прочесть на компьютерах с нестандартной цветовой схемой или при отсутствии необходимых шрифтов.
5. Не следует злоупотреблять графическими изображениями и мультимедийными файлами. При изобилии таких объектов загрузка страницы может затянуться и читатель может утратить к ней интерес еще до того, как получит возможность что-то прочесть.
6. Так как создание документов HTML сродни программированию, процесс поиска и исправления ошибок, известный в программирование как отладка, необходим и при создании Web-страницы. Большинство, если не все сделанные ошибки можно обнаружить еще до того, как страница станет доступна посторонним читателям. В число ошибок, которые надо исправлять, входят также грамматические ошибки и опечатки.
7. Фреймы - очень мощное, но и очень опасное средство оформления Web-страниц. С помощью фреймов создано гораздо больше неудачных Web-страниц, чем удачных. Единственный критерий грамотности применения фреймов - удобство пользователя. Если благодаря фреймам страница становится во много раз красивее, но чуть-чуть менее удобной, от фреймов надо отказываться не задумываясь. Ничего, кроме раздражения, у читателей она не вызовет.
8. Люди ценят заботу и внимание. Размещение самой важной информации в верхней части страницы позволяет им с пользой проводить время, в течение которого происходит загрузка документа Сопровождение иллюстраций альтернативным текстом не стоит больших трудов, но высоко ценится. Наличие большого количества полезных гиперссылок на странице не только помогает людям плодотворно путешествовать по просторам Интернета, но и побуждает их раз за разом возвращаться на страницу, предоставившую им такую возможность.
Практическая работа № 6
«Размещение нескольких документов на одной Web-странице»Цель: научиться создавать фреймы в текстовом редакторе Блокнот.
Указания к выполнению:Откройте текстовый редактор Блокнот.
Создайте новую Web-страницу, которая в браузере должна выглядеть следующим образом:
В элементе укажите название странички «П/р №6».
Просмотрите созданную Web-страницу в окне браузера.
Внесите в него следующие изменения: в атрибуте rows измените два первых значения, уберите третье значение.Сохраните изменения.
Просмотрите результат в браузере. Что изменилось?
Отмените изменения, вернитесь к исходному состоянию Web-страницы.
Просмотрите Web-страницу в окне браузера.
Элементы теории компьютерной графики
Цветовая модель.
Изображение может быть чёрно-белым, полутоновым (оттенки одного цвета) и цветным. Однако, цветное изображение в зависимости от его назначения может быть в разной цветовой палитре. Палитра RGB используется в мониторах компьютеров, т.е. для изображений которые будут просматриваться на мониторе. Палитра CMYK используется при создании изображений, предназначенных для вывода на печать.
Наиболее распространённая цветовая модель называется RGB Red – красный, Green – зелёный, Blue – синий) по названиям трёх базовых цветов, используемых в ней для образования всех прочих. Цветовую модель RGB обычно иллюстрируют картинкой в виде трёх пересекающихся кружков. В центре пересечения эти три цвета в сумме дают белый цвет. Попарное пересечение смежных кружков даёт дополнительные цвета: жёлтый, голубой, пурпурный.
В модели RGB присутствует три канала – красный, зелёный и синий, то есть RGB – трёхканальная цветовая модель.
Каждый из трёх цветовых компонентов RGB может принимать одно из 256 значений – от максимальной интенсивности(255,2555,255 - белый) до нулевой интенсивности (0,0,0 – чёрный), т.е. абсолютно любой цвет и оттенок цвета можно получить сочетанием красного, зелёного и синего цветов в различных пропорциях
Для того чтобы создать гармоничную цветовую композицию, необходимо знать характеристики цвета. Таких характеристик естественно много, мы рассмотрим лишь основные.
Характеристики цвета
Одна из цветовых схем характеризует естественные свойства любого оттенка, - это схема HSV (тон, насыщенность, яркость)
Hue тон – одна из точек цветового круга, максимально яркая и насыщенная.
Saturation насыщенность – соотношение основного цвета и такого же по яркости серого.
Value яркость – общая яркость цвета (крайние позиции – чёрный и максимально яркий тоновый)
Практическая работа № 6
«Работа с цветовой моделью RGB»
Задание 1. Определение цвета в формате RGB
Цель : научиться определять цвет в формате RGB .
Указания к выполнению:
Запустите графический редактор Paint (Пуск – Программы – Стандартные)
Определите, какой цвет записан в модели RGB и заполните таблицу:
Для этого выполните команду Палитра – Изменить палитру. В диалоговом окне Изменение палитры щёлкните на кнопке Определить цвет, введите числовые значения для цветов в текстовые поля внизу от цветового поля. Допустимый диапазон для каждого блока от 0 до 255, при этом 0 соответствует самому тёмному, а 255- самому светлому.
Задание 2. Смешение цветов разной интенсивности в графическом редакторе Paint
Цель : научиться работать с цветом разной интенсивности в простейшем графическом редакторе.
Указания к выполнению:
Определите, какой цвет будет получен в результате смешения двух цветов максимальной интенсивности (255):
красного и зеленого;
зеленого и синего;
красного и синего.
Определите, какой цвет будет получен в результате смешения двух цветов половинной интенсивности (127):
красного и зеленого;
зеленого и синего;
красного и синего.
зеленый и синий
красный и синий
максимальная интенсивность
половинная интенсивность
Задание 3. Рисование заданным цветом в графическом редакторе Paint .
Цель : научиться определять цвет.
Указания к применению:
В новом файле нарисуйте следующие геометрические фигуры, заданного цвета:
Квадрат (205, 44, 100);
Прямоугольник (0, 230, 69);
Круг (30, 30, 30);
Овал (200, 100, 20);
Треугольник (10, 10, 10);
Трапеция (50, 50, 250).
Цветовые схемы
Зная особенности восприятия каждого цвета и цветовых сочетаний, можно построить целый ряд готовых схем. Каждая из этих схем, будучи воплощённой в жизнь, звучит по своему, вносит определённое настроение в композицию.
Если мы хотим добиться гармоничного сочетания цветов, то можно взять несколько близлежащих, расположенных один за другим на цветовом круге. Например жёлтый и желто-зеленый.
Для создания контраста выбирают цвета противоположные, расположенные напротив друг друга. Такие цвета называются дополняющими. Применённые рядом, они делают друг друга ярче и живее. Пары жёлтый – фиолетовый, пурпурный – зелёный – примеры дополняющих цветов.
Кроме использования цветов, расположенных рядом друг с другом, можно попробовать использовать одни и те же цвета, но разной степени насыщенности.
Однако самый надёжный и неисчерпаемый источник цветовых схем – природа. Человек является её частью, и ничто так не радует его глаз, как гармония естественной нежности и красоты.
Престижные цвета: золото, серебро, тёмно-серый, чёрный. Их задача – передать солидность, уверенность, стабильность, и высокую стоимость.
Пастельные цвета: нежные, бежевые, розовые, голубоватые – женственные, мягкие, расслабляющие.
«Здоровые» цвета: из американской психологии – чистота, здоровье, уверенность, семья (жёлто-зелёная гамма с добавлением чёрного цвета).
Природные цвета: близкие к естественным органическим, природным компонентам.
«Растяжки» как вариант использования цвета – это обычно тональные оттенки одного цвета и как акцент – более активный цвет
Лучше придерживаться проверенного временем рецепта: пользоваться минимумом цветов, но сами цвета при этом подбирать по возможности контрастные. Основное требование к паре цветов для фона и текста – достаточный контраст между ними, необходимыми для комфортного чтения.
Безопасная палитра.
Нельзя забывать, что создатель Web -страницы не имеет ни малейшего понятия о том, на какой модели компьютера, и под управлением каких программ будет просматриваться его произведение. Он не уверен, не превратится ли его «зелёная ёлка» в красную или оранжевую на экранах пользователей.
Поэтому все популярные программы для просмотра Web -страниц (броузеры) заранее настроены на некоторую одну фиксированную палитру. В этой палитре не 256 цветов, а лишь 216. Это связано с тем, что не все компьютеры могут воспроизводить 256 цветов.
Такая фиксированная палитра, жёстко определяющая индексы для кодирования 216 цветов, называется безопасной палитрой.
Растровая графика
Основой растрового представления графики является пиксел (точка) с указанием её цвета. При описании, например, красного эллипса на белом фоне приходится указывать цвет каждой точки, как эллипса, так и фона. Изображение представляется в виде большого количества точек – чем их больше, тем визуально качественнее изображение и больше размер файла.
Растровое представление обычно используют для изображения фотографического типа с большим количеством деталей или оттенков. Масштабирование таких картинок в любую сторону обычно ухудшает качество.
Векторная графика
Векторное представление заключается в описании элементов изображения математическими кривыми с указанием их цветов и заполненности. Красный эллипс на белом фоне будет описан всего двумя математическими формулами – прямоугольника и эллипса соответствующих цветов, размеров и местоположения. Очевидно, что такое описание займёт значительно меньше места, чем в случае с растровой графикой. Ещё одно преимущество – качественное масштабирование в любую сторону.
Выбор растрового или векторного формата зависит от целей и задач работы с изображением. Если нужна фотографическая точность цветопередачи, то предпочтительнее растр. Логотипы, схемы, элементы оформления удобнее представить в векторном формате.
Форматы графических файлов для Интернета
GIF и JPEG – это два наиболее популярных графических формата, которые фактически стали стандартами для использования на WWW .
Фотографии лучше всего сохранять в формате JPEG , а иллюстрации в формате GIF
Оптимизация графики.
Для Web -страниц очень важным является вопрос размера фотографии.
Самый первый этап оптимизации – выделение в фотографии главного с отбрасыванием всего остального и акцентирование на иллюстрируемом элементе. Это достигается при помощи операции кадрирования и нахождения наиболее выразительной части, передающей смысл фотографии. После этой операции уже можно оптимизировать изображение для достижения наименьшего размера. Но с размерами фотографий нужно придерживаться определенного компромисса – не делать их слишком мелкими. И не делать их слишком огромными. Обычно фотография имеет размер 250 х 300 пикселов и занимает порядка 6-10 Кбайт. Это не значит, что все фотографии должны иметь такие же размеры, но площадь фотографии должна быть ей эквивалентна. Так, например, файл размером 45,93 Кбайта при скорости загрузки 28,8 Кбита в секунду будет загружаться в браузер 17 секунд.
Практическая работа № 8«Размещение графики на Web-странице»
Задание 1. Оформление цветом Web -страницы.
Цель: научиться создавать цветной фон Web -страницы, использовать шрифт различного цвета и размещать горизонтальные линии на страницы.
Указания к выполнению:
Создайте новую Web -страницу в редакторе Блокнот.
В элементе укажите название странички «П/р № 8. Задание 1».
В начальном элементе используйте соответствующий атрибут, чтобы сделать цвет фона странички черным.
Сделайте надпись белым цветом «Спокойной ночи». Выровняйте ее по середине страницы. Размер шрифта 12.
Вставьте горизонтальную линию красного цвета.
Сделайте надпись желтого цвета «Приятных сновидений». Выровняйте ее по середине страницы. Размер шрифта 8.
Вставьте горизонтальную линию синего цвета толщиной 10 пикселов, длиной 50% от ширины экрана, и выровняйте ее по центру.
Задание 2. Размещение графики на Web-странице.
Цель : научиться размещать графические изображения на Web -странице.
Указания к выполнению:
Создайте новую Web -страницу в редакторе Блокнот.
В элементе укажите название странички «П/р № 8. Задание 2».
Если в тэге не указывать цвет странички, то по умолчанию фон будет белым.
Разместите на страничке рисунок футбольного меча. Файл с именем soccer .gif находится в папке, указанной учителем. Для размещения изображения вам потребуется указать путь к файлу в элементе . Чтобы упростить описание пути к этому графическому файлу, скопируйте этот файл в ту же папку, в которой будет сохранена Web -страничка. Тогда элемент будет выглядеть следующим образом:
Если файл не находится в одной папке с Web -страничкой, то необходимо указать относительный путь к этому файлу.
Сделайте подпись к рисунку «Футбольный мяч» с помощью атрибута alt (title ).
Создайте рамку вокруг рисунка шириной 2 пиксела.
Над рисунком поместите заголовок «Мир футбола» самого большого размера и выровняйте его по центру страницы.
Тема 4. Теги HTML. Таблицы
C оздание и форматирование таблиц
TR > - тег, задающий строку таблицы. Конечный тег можно не использовать, так как строка заканчивается там, где начинается следующая строка.
Задание строки и ячейки таблицы. Таблица – это один из наиболее удобных способов представления больших объемов данных. Язык HTML имеет богатейшие возможности по созданию разных видов таблиц.
При создании таблиц используется принцип вложения: внутри основного элемента таблицы
…TD > - тег, задающий ячейку таблицы. Конечный тег также можно не использовать.
Внутри ячеек могут содержаться любые данные и любые теги HTML, допустимые в теле документа. Например, ячейка таблицы может содержать вложенную таблицу или рисунок. Броузеры автоматически вычисляют размеры ячеек и всей таблицы, хотя эти свойства частично можно задать и при помощи атрибутов.
Пример (таблица, состоящая из двух строк и столбцов).