Форматирование текста и размещение графики. Понятие интерактивной формы


Основы HTML содержат основные правила языка HTML, описание структуры HTML-страницы, отношения в структуре HTML-документа между HTML-элементами.

HTML-документ - это обычный текстовый документ, может быть создан как в обычном текстовом редакторе (Блокнот) , так и в специализированном, с подсветкой кода (Notepad++, Visual Studio Code и т.п.) . HTML-документ имеет расширение.html .

HTML-документ состоит из дерева HTML-элементов и текста. Каждый элемент обозначается в исходном документе начальным (открывающим) и конечным (закрывающим) тегом (за редким исключением).

Начальный тег показывает, где начинается элемент, конечный - где заканчивается. Закрывающий тег образуется путем добавления слэша / перед именем тега: … . Между начальным и закрывающим тегами находится содержимое тега - контент.

Одиночные теги не могут хранить в себе содержимого напрямую, оно прописывается как значение атрибута, например, тег создаст кнопку с текстом Кнопка внутри.

Теги могут вкладываться друг в друга, например,

Текст

. При вложении следует соблюдать порядок их закрытия (принцип «матрёшки») , например, следующая запись будет неверной:

Текст

.

HTML-элементы могут иметь атрибуты (глобальные, применяемые для всех HTML-элементов, и собственные). Атрибуты прописываются в открывающем теге элемента и содержат имя и значение, указываемые в формате имя атрибута="значение" . Атрибуты позволяют изменять свойства и поведение элемента, для которого они заданы.

Каждому элементу можно присвоить несколько значений class и только одно значение id . Множественные значения class записываются через пробел, . Значения class и id должны состоять только из букв, цифр, дефисов и нижних подчеркиваний и должны начинаться только с букв или цифр.

Браузер просматривает (интерпретирует) HTML-документ, выстраивая его структуру (DOM) и отображая ее в соответствии с инструкциями, включенными в этот файл (таблицы стилей, скрипты). Если разметка правильная, то в окне браузера будет отображена HTML-страница, содержащая HTML-элементы - заголовки, таблицы, изображения и т.д.

Процесс интерпретации (парсинг) начинается прежде, чем веб-страница полностью загружена в браузер. Браузеры обрабатывают HTML-документы последовательно, с самого начала, при этом обрабатывая CSS и соотнося таблицы стилей с элементами страницы.

HTML-документ состоит из двух разделов - заголовка — между тегами … и содержательной части — между тегами … .

Структура веб-страницы 1. Структура HTML-документа

Язык HTML следует правилам, которые содержатся в файле объявления типа документа (Document Type Definition, или DTD) . DTD представляет собой XML-документ, определяющий, какие теги, атрибуты и их значения действительны для конкретного типа HTML. Для каждой версии HTML есть свой DTD.

DOCTYPE отвечает за корректное отображение веб-страницы браузером. DOCTYPE определяет не только версию HTML (например, html), но и соответствующий DTD-файл в Интернете.

...

Элементы, находящиеся внутри тега , образуют дерево документа, так называемую объектную модель документа, DOM (document object model) . При этом элемент является корневым элементом.


Рис. 1. Простейшая структура веб-страницы

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

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

, , и т.д.

Потомок - элемент, расположенный внутри одного или более типов элементов. Например, является потомком , а элемент

Является потомком одновременно для и .

Родительский элемент - элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их. На рисунке 1 и . Тег

Является родительским только для .

Дочерний элемент - элемент, непосредственно подчиненный другому элементу более высокого уровня. На рисунке 1 только элементы , ,

И являются дочерними по отношению к .

Сестринский элемент - элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. На рисунке 1 и — элементы одного уровня, так же как и элементы , и

Являются между собой сестринскими.

1.1. Элемент 1.2. Элемент

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

1.2.1. Элемент

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

1.2.2. Элемент

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

Описание содержимого страницы и ключевые слова одновременно можно указывать на нескольких языках, например, на русском и английском:

С помощью тега можно запретить или разрешить индексацию веб-страницы поисковыми машинами:

Для автоматической перезагрузки страницы через заданный промежуток времени нужно воспользоваться значением refresh:

Страница будет перезагружена через 30 секунд. Чтобы перебросить посетителя на другую страницу, нужно указать URL-адрес в параметре url:

Bce о компьютере Заголовок целесообразно отделить от остального содержания страницы горизонтальной линией с помощью одиночного тэга . Разделение текста на абзацы производится с помощью контейнера . При просмотре в браузере абзацы отделяются друг от друга интервалами. Для каждого абзаца можно задать определенный тип выравнивания. На титульной странице обычно размещается текст, кратко описывающий содержание сайта. Поместим на титульную страницу текст, разбитый на абзацы с различным выравниванием:

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


3 3 Bce о компьютере

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

Tepминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету. Задание 3. Вставка изображений. На Web-страницы обычно помещают изображения, чтобы сделать их визуально более привлекательными. На Web-страницах могут размещаться графические файлы трех форматов GIF, JPG и BMP. Если рисунок сохранен в другом формате, то его необходимо предварительно преобразовать в один из выше указанных форматов с помощью графического редактора. Для этих целей можно использовать редактор Photo Editor, который входит в пакет Microsoft Office. На титульной странице создаваемого сайта уместно разместить изображение того объекта, которому посвящен сайт (в нашем случае компьютера). Многочисленные фотографии компьютеров можно найти, например, на сайтах производителей и продавцов компьютерной техники. Для вставки изображения используется тэг с атрибутом SRC, который указывает на место хранения файла на локальном компьютере или в Интернете. Если графический файл находится на локальном компьютере в том же каталоге, что и файл Webстраницы, то в качестве значения атрибута SRC достаточно указать только имя файла: Если файл находится в другом каталоге на данном локальном компьютере, то значением атрибута должно быть полное имя файла, включая путь к нему в иерархической файловой системе. Например: Если файл находится на удаленном сервере в Интернете, то должен быть указан URLадрес этого файла. Например: Расположить рисунок относительно текста различным образом позволяет атрибут ALIGN тэга , который может принимать пять различных значений: TOP (верх), MIDDLE (середина), BOTTON (низ), LEFT (слева) и RIGHT (справа). Для того чтобы рисунок располагался по правому краю текста, тэг вставки изображения должен принять следующий вид:


4 В окне приложения Блокнот в контейнер вставьте перед абзацами текста тэг вставки изображения, просмотрите результат в браузере. 4 Задание 4. Гиперссылки на Web-страницах Первая титульная страница должна обеспечивать посетителю Web-сайта возможность начать путешествие по сайту. Для этого на титульную страницу должны быть помещены гиперссылки на другие страницы сайта. Для создания гиперсвязей между титульной страницей и другими страницами сайта необходимо, прежде всего, создать заготовки Web-страниц. Такие пустые страницы должны иметь заголовок, но могут пока не иметь содержания. Все создаваемые страницы необходимо сохранить в виде файлов в папке сайта. Каждая страница будет содержать следующий HTML-код: Заголовок страницы Создать пустые страницы Программы, Словарь, Комплектующие и Анкета. Сохранить их в файлах с именами software.htm, glossary.htm, hardware.htm и anketa.htm в каталоге сайта. Гиперссылка состоит из двух частей: указателя ссылки и адресной части ссылки. Указатель ссылки это то, что мы видим на Web-странице (текст или рисунок), обычно выделенный синим цветом и подчеркиванием. Активизация гиперссылки вызывает переход на другую страницу.


5 Адресная часть гиперссылки представляет собой URL-адрес документа, на который указывает ссылка. URL-адрес может быть абсолютным и относительным. Абсолютный URLадрес документа полностью определяет компьютер, каталог и файл, в котором располагается документ. Абсолютный адрес документа, находящегося на локальном компьютере, будет включать в себя путь к файлу и имя файла, например: С:/Web-сайт/filename.htm Абсолютный адрес документа, находящегося на удаленном компьютере в Интернете, будет включать имя сервера Интернета, путь к файлу и имя файла, например: Относительный URL-адрес указывает на местоположение документа относительно того, в котором находится указатель ссылки. При разработке сайта рекомендуется входящие в него Web-страницы связывать относительными ссылками. Это позволить не изменять адресную часть ссылок при перемещении Web-сайта в другой каталог локального компьютера или при его публикации в Интернете. Гиперссылка на Web-странице существует в форме указателя ссылки, щелчок по которому обеспечивает переход на Web-страницу, указанную в адресной части ссылки. Прежде всего, необходимо разместить на титульной странице тексты гиперссылок на каждую страницу сайта. Для представления гиперссылок удобнее всего выбрать названия страниц, на которые осуществляется переход. Разместим гиперссылки под введенным текстом, в новом абзаце, в одну строку, разделенные несколькими пробелами. Такое размещение гиперссылок часто называют панелью навигации. Панель навигации будет представлять собой абзац, выровненный по центру, в котором указатели гиперссылок разделены пробелами ( ): [Программы]   [Словарь]   [Комплектующие]   [Анкета] Теперь для каждой гиперссылки определим адрес перехода. Для этого используется контейнер гиперссылки с атрибутом HREF, значением которого является URL адрес документа на локальном компьютере или в Интернете. Контейнер должен содержать указатель гиперссылки: Указатель гиперссылки Вставьте в титульную страницу код, создающий панель навигации:

[Программы]   [Словарь]   [Комплектующие]  [Анкета]

Панель навигации на титульной странице создана, теперь активизация текста гиперссылок будет приводить к переходу на другие страницы сайта. 5


6 Задание 5. Списки на Web-страницах Довольно часто при размещении текста на Web-страницах удобно использовать списки, в различных вариантах: нумерованные списки, когда элементы списка идентифицируются с помощью чисел; маркированные списки (в HTML их принято называть ненумерованными), когда элементы списка идентифицируются с помощью специальных символов (маркеров); списки определений, позволяющие составлять перечни определений в так называемой словарной форме. Возможно создание и вложенных списков, причем вкладываемый список может по своему типу отличаться от основного. На странице Программы разместим информацию об основных типах программного обеспечения компьютера в форме вложенного списка. Сначала создадим основной нумерованный список основных категорий программного обеспечения. Список располагается внутри контейнера , а каждый элемент списка определяется тэгом

  • можно задать тип нумерации: арабские цифры (по умолчанию), " I " (римские цифры), "а" (прописные буквы) и др. Откройте в Блокноте файл software.htm, введите заголовок Программное обеспечение и добавьте следующий HTML-код, задающий список:
  • Системные программы
  • Прикладные программы
  • Системы программирования Создадим теперь вложенный ненумерованный список, для одного из элементов основного списка. Список располагается внутри контейнера
      , а каждый элемент списка определяется также тэгом
    • . С помощью атрибута TYPE тэга
        можно задать вид маркера списка: "disc" (диск), "square" (квадрат) или "circle" (окружность). Добавьте HTML-код, задающий вложенный список для элемента
      • Прикладные программы:
      • СИСТЕМНЫЕ ПРОГРАММЫ
      • ПРИКЛАДНЫЕ ПРОГРАММЫ
        • ТЕКСТОВЫЕ РЕДАКТОРЫ;
        • ГРАФИЧЕСКИЕ РЕДАКТОРЫ;
        • ЭЛЕКТРОННЫЕ ТАБЛИЦЫ;
        • СИСТЕМЫ УПРАВЛЕНИЯ БАЗАМИ ДАННЫХ.
      • СИСТЕМЫ ПРОГРАММИРОВАНИЯ 6 Cтраницу словарь мы представим в виде словаря компьютерных терминов. Для этого используем контейнер списка определений . Внутри него текст оформляется в виде термина, который выделяется непарным тегом и определения, которое следует за тегом . Откройте в Блокноте файл glossary.htm, введите заголовок Компьютерные термины и добавьте следующий HTML-код, задающий список определений:


        7 Процессор Центральное устройство компьютера, производящее обработку информации в двоичном коде Оперативная память Устройство, в котором хранятся программы и данные 7



        Руководство по использованию визуального редактора информационного наполнения сайта http://pzi.ru Пятигорского завода Импульс. Пятигорск 2011 Содержание 1 Интерфейс редактора... 3 2 Изменение размера редактора...4

        Оглавление Введение...1 1. Цель работы...1 2. Основные теоретические сведения...1 Структура HTML-документа...1 Элемент BODY...2 Начертание текста...2 Маркированные списки...3 Нумерованные списки...3 Форматирование

        Модуль 1 «Основы компьютерной геометрии» Лекция 2 «Введение в HTML, HTML5 и CSS» к.ф.-м.н., доц. каф. ФН-11, Захаров Андрей Алексеевич, ауд.:930а(улк) моб.: 8-910-461-70-04, email: [email protected] МГТУ

        Краткое руководство по использованию Cистемы редактирования сайта Оглавление 1. Введение... 3 2. Знакомство с основными элементами системы редактирования... 4 3. Панель управления основными командами...

        6. Графика Изображения Поддержка изображений в HTML - путь в мир графики. Создание и манипулирование изображениями, графическими форматами и другим графическим материалом не является частью HTML. Браузер

        Лабораторная работа 5 Оформление текста в виде списков и колонок Создание списков В текстовых документах перечисления различного типа оформляются в виде списков. Существуют списки различных типов: нумерованные

        ПРАКТИЧЕСКАЯ РАБОТА 1 Знакомство со структурой HTML-документа. Применение тегов логического и физического форматирования. Списки Цель: научить применять теги логического и физического форматирования при

        ФГКОУ «Нахимовское военно-морское училище МО РФ» Инструкция по добавлению материалов на сайт Санкт-Петербург, 2015 Содержание 1. Вход в консоль CMS (авторизация на сайте) 4 2. Добавление записи 4 3. Ввод

        Требования к оформлению материалов для системы дистанционного образования Санкт- Петербургского центра подготовки спасателей 3 Оглавление 1.Структура материалов 2. Оформление текста курса в документе Word...

        Технология создания Web страниц электронного ресурса в Microsoft Office FrontPage 2003 Создание нового Web-узла Создайте папку, в которой предполагаете разместить разрабатываемые ЭУММ. Запустите программу

        1 ДИНАМИЧЕСКОЕ WEB-ПРИЛОЖЕНИЕ 1. О языке HTML и технологии ASP.NET В этой работе Вы создадите динамическое Web-приложение. Ваше приложение должно быть установлено на сервере. У пользователей-клиентов,

        1 WORD позволяет легко форматировать символы и абзацы. Встроенные программы проверки орфографии и грамматики проверяют документ не только после его завершения, но и в процессе создания. Существующие средства

        1. Пояснительная записка. Рабочая программа по информатике и ИКТ составлена на основе: стандарта основного общего образования по информатике и ИКТ (приложение из приказа Министерства образования Российской

        Федеральное государственное образовательное учреждение высшего профессионального образования "Южный федеральный университет" Островская И.В. ТЕСТОВЫЕ ЗАДАНИЯ НА ТЕМУ: ОПЕРАЦИОННАЯ СИСТЕМА WINDOWS Методические

        Текстовый редактор Word 2007 ИНТЕРФЕЙС ПРОГРАММЫ Текстовый редактор (процессор) это универсальная прикладная программа, предназначенная для создания и обработки текстов с помощью компьютера, позволяющая

        Создание электронной презентации в Microsoft PowerPoint 2003 Тема 1. Создание и сохранение презентации Задание: запустите программу Microsoft PowerPoint. Рассмотрите интерфейс и режимы работы. Создайте

        Ставропольский государственный аграрный университет Кафедра информационных систем и технологий ЗАДАНИЕ И МЕТОДИЧЕСКИЕ УКАЗАНИЯ НА ПРАКТИЧЕСКОЕ ЗАНЯТИЕ по учебной дисциплине «Архитектура информационных

        Глава 1 HTML и CSS Структура языка HTML Структура HTML-документа Ввод и оформление текста Ссылки Форматирование текста Работа с таблицами Изображения Формы Общие принципы CSS Форматирование текста средствами

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

        SiteBuilder. Конструктор сайтов Руководство пользователя Дата: 15.09.2011 г. Версия: 1.0 [email protected] www.activecloud.com Комментарии и сообщения об ошибках, пожалуйста, направляйте на [email protected].

        2 Текстовый процессор OpenOffice.org Writer Текстовый процессор (ТП) OpenOffice.org Writer входит в пакет программ Текстовый процессор Writer, предназначен для создания, редактирования и форматирования

        EGroupWare. Новости. Общие сведения и назначение Новости служат для создания кратких тематических сообщений без рассылки их по электронной почте. Новости можно настроить для отображения на основном экране

        ПУБЛИКАЦИЯ СВОЕЙ ЗАМЕТКИ НА САЙТЕ ШКОЛЫ «АФИНЫ» Алексей Греков Частная школа «Афины», Киев, 2010 1. СОЗДАЕМ НОВУЮ ЗАМЕТКУ...2 2. ВСТАВЛЯЕМ КАРТИНКИ И ДРУГИЕ ГРАФИЧЕСКИЕ ОБЪЕКТЫ...3 3. СОХРАНЯЕМ ЗАМЕТКУ...4

        Руководство по заполнению и просмотру Личного кабинета участника Содержание 1. Заполнение «Личного кабинета»... 2 2. Описание формы заполнения... 4 3. Работа в редакторе... 6 1. Заполнение «Личного кабинета»

        Глава 7. Графика Поддержка изображений в HTML - путь в мир графики. Создание и манипулирование изображениями, графическими форматами и другим графическим материалом не является частью HTML. 7.1. Форматы

        Язык программирования HTML 1. Вызовите текстовый редактор БЛOКНОТ, который находится в группе "Стандартные". Наберите следующий ниже текст и сохраните под именем web1.html в папку html_text, которую предварительно

        Система управления сайтом Конструктор сайтов Вместе с доменным именем в зоне.рф вы получаете удобную и простую в управлении административную панель, позволяющую создавать и редактировать контент, изменять

        ТОВАРИЩЕСТВО С ОГРАНИЧЕННОЙ ОТВЕТСТВЕННОСТЬЮ «BBS-IT» ИНФОРМАЦИОННО-ВЫЧИСЛИТЕЛЬНЫЙ ЦЕНТР Инструкция по работе с кабинетом пользователя диалоговой площадки «Народный контроль» Акмолинской области Руководство

        Работа с редактором документов Word Краткие теоретические сведения Текстовый процессор (редактор) Word это приложение Windows, предназначенное для создания, просмотра, модификации и печати текстовых документов.

        Проектирование блога на платформе blogger.com Краснодар - 2015 2 Проектирование блога на платформе blogger.com Оглавление Введение 3 Создание блога... 4 1.1 Создание аккаунта на Google.ru... 4 1.2 Создание

        Описание практической работы 4 ОФОРМЛЕНИЕ САЙТА «ИННОВАЦИОННЫЕ ТЕХНОЛОГИИ, ТОВАРЫ И УСЛУГИ» С ПОМОЩЬЮ КАСКАДНЫХ СТИЛЕЙ (CSS) Время выполнения 4 часа. Цель работы: изучить принципы создания и использования

        Лабораторная работа 1 Средство подготовки презентаций Microsoft Powerpoint. Быстрое создание презентации с помощью мастера автосодержания Цель работы: научиться создавать документы (слайды) для электронной

        Лекция 2 Редактирование сайта 1 Добавление изображений на сайт... 1 Создание новых страниц... 4 Размещение страниц... 10 Добавление кнопок с пунктами меню... 12 Добавление изображений на сайт В режиме

        Microsoft Office Word является популярнейшей прикладной программой для создания и обработки текстовых документов, которая обладает множеством возможностей настольной издательской системы по работе с текстами

        Система электронных публикаций Программа просмотра Руководство пользователя Издательская фирма "Сентябрь", Москва, 2006-2008 Эта версия Руководства соответствует возможностям и функционалу Системы электронных

        А.Н. Маслобоев Базовые возможности языка HTML по разработке и оформлению Web-страниц Учебно-методическое пособие Санкт-Петербург 2016 МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ

        РАБОТА 03 Основы HTML: работа с текстом Изучаемые вопросы 1. Передача данных и адресация в Интернете 2. Дескрипторы, использование пробелов и пустых строк, структура документа 3. Абзацы и заголовки 4.

        ТЕХНОЛОГИЯ ПОДГОТОВКИ ТЕКСТОВЫХ ДОКУМЕНТОВ Текстовый процессор MS WORD MS WORD Microsoft Word основа любого офиса и, пожалуй, самая нужная и популярная программа во всем Microsoft Office. МНОГОФУНКЦИОННАЛЬНЫЙ

        ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ «САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ КИНО И ТЕЛЕВИДЕНИЯ» Кафедра математики и информатики

        UNIVERSITÉ NATIONALE DE RECHERCHE ÉCOLE SUPÉRIEURE D ÉCONOMIE DÉPARTEMENT DE LANGUES ÉTRANGÈRES CHAIRE DE LANGUE FRANÇAISE XI COLLOQUE INTERNATIONAL D ÉTUDIANTS ET DE JEUNES CHERCHEURS «LA FRANCE ET LA

        ГБПОУ РА «Адыгейский педагогический колледж им.х. Андрухаева» Д.Х. Уджуху Создание сайта в Microsoft SharePoint Designer Лабораторные и практические работы Майкоп, 2015 1 Печатается по решению организационно-методической

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

        Практическое занятие 12 Работа с текстовым редактором, вставка объектов по учебной дисциплине «Информатика и ИКТ» Тема: Понятие об информационных системах и автоматизации информационных процессов. Цель:

        Плагины Форвард Тx SLNewsLine Программа для формирования в автоматическом режиме заданий для бегущей строки Дата выпуска: 18 ноября 2009 г. Краткое руководство СофтЛаб-НСК Содержание Введение... Общий

        Введение Каскадные таблицы стилей, или Cascading Style Sheets (CSS), обеспечивают творческую свободу в разметке и дизайне веб-страниц. Пользуясь CSS, вы сможете украсить текст страниц привлекательными

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

        ООО «РусТендер Софт» Документация Стр. 1 из 10 Система автоматизации процессов торгово- закупочной деятельности предприятия Конструктор документов Описание Версия описания: 1.0 Последнее обновление: 28.09.2014

        Работа с табличным процессором Microsoft Excel Краткие теоретические сведения Приложение Windows Excel позволяет формировать и выводить на печать документы, представленные в табличном виде, выполнять расчеты

        Лабораторная работа 1 Оформление официального документа. Цель работы: данная работа поможет вам приобрести элементарные навыки, связанные с вводом и редактированием текста. В процессе работы вы подготовите

        Ñîäåðæàíèå Введение 13 Об этой книге 13 Глупые предположения 14 Компакт-диск 14 Обозначения, используемые в книге 15 Структура книги 16 Часть I. Создайте Web-страницу сегодня 16 Часть II. Создание страниц

        Понятие абзаца Абзацем называют фрагмент текста от одного нажатия клавиши Enter до следующего. Абзацем также является фрагмент от начала документа до первого нажатия клавиши Enter. В ячейках таблицы абзацем

        Тема: Практическая работа 14-2 Создание базы данных, состоящей из одной таблицы. Ввод данных в таблицу. Использование форм. Цель: Научиться создавать базы данных в MS Acces (создавать таблицы и формы,

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

        1. ЦЕЛИ И ЗАДАЧИ ОСВОЕНИЯ ДИСЦИПЛИНЫ 1.1. Цели освоения дисциплины: приобретение знаний и представлений о смысле, целях и задачах гипертекстовых документов 1.. Задачи: дать студентам знания по теории гипертекстовых

        Введение Дистанционное обучение современная форма организации образовательного процесса с применением дистанционных образовательных технологий. Его развитие в последнее время обусловлено ростом числа пользователей

        Мастер-класс «Создание и оформление презентаций в PowerPoint» Стефанова Л. М., методист ГОУ РК «РЦО», учитель русского языка и литературы г. Сыктывкара Республики Коми 1. С чего начать составление презентации?

        Основы языка гипертекстовой разметки документов

        Публикации во Всемирной паутине реализуются в форме Web-сайтов. Web-сайт по своей структуре напоминает журнал, который содержит информацию, посвященную какой-либо теме или проблеме. Как журнал состоит из печатных страниц, так и Web-сайт состоит из Web-страниц.

        Обычно сайт имеет титульную страницу (страницу с оглавлением), на которой имеются гиперссылки на его основные разделы (Web-страницы). Гиперссылки также имеются на других Web-страницах сайта, что обеспечивает возможность пользователю свободно перемещаться по сайту.

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

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

        Основными достоинствами HTML-документов являются:

        · малый информационный объем;

        · возможность просмотра на персональных компьютерах, оснащенных различными операционными системами.

        Для создания Web-страниц используются простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования текста. В качестве такого редактора в Windows можно использовать стандартное приложение Блокнот.

        Рассмотрим, как создаются Web-сайты, на примере разработки тематического сайта «Компьютер». Сначала необходимо разработать проект сайта, то есть определить, какова будет их тематика и как они будут связаны между собой.

        Пусть наш сайт кроме титульной страницы «Компьютер» будет содержать:

        · страницу «Программы», содержащую классификацию программного обеспечения;

        · страницу «Словарь», содержащую словарь компьютерных терминов;

        · страницу «Комплектующие» с ценами на устройства компьютера;

        · страницу «Анкета», содержащую анкету для посетителей сайта.



        Форматирование текста и размещение графики

        1. Открыть окно текстового редактора Блокнот.

        Вид Web-страницы задается тэгами, которые заключаются в угловые скобки. Тэги могут быть одиночными или парными, для которых обязательно наличие открывающего и закрывающего тэгов (такая пара тэгов называется контейнером ). Закрывающий тэг содержит прямой слэш (/) перед обозначением. Тэги могут обозначаться как прописными, так и строчными буквами.

        Тэги и атрибуты Обозначения
        HTML-код страницы помещается внутрь данного контейнера без них браузер не в состоянии определить формат документа и правильно его интерпретировать. Web-страница разделяется на две логические части: заголовок и содержание.
        Заголовок Web-страницы заключается в данный контейнер и содержит название документа и справочную информацию о странице (например, тип кодировки), которая используется браузером для ее правильного отображения.
        Название Web-страницы содержится в данном контейнере и отражается в строке заголовка браузера при просмотре страницы.
        Основное содержание страницы помещается в данный контейнер и может включать текст, таблицы, бегущие строки, ссылки на графические изображения и так далее.
        Назовем нашу Web-страницу «Компьютер» и поместим для начала на страницу текст «Все о компьютере». Компьютер Все о компьютере
        Созданную Web-страницу сохранить в виде файла в своей папке. Принято сохранять титульный файл сайта, то есть тот, который первый загружается в браузер, под именем index.htm. Для этого в поле Имя файла вместо * набрать имя index, а после точки расширение txt заменит на htm или html. Значок файла будет содержать значок браузера Internet Explorer. Не закрывать.
        Загрузить файл index.htm в окно браузера для просмотра (для этого открыть файл с помощью программы Internet Explorer). Не закрывать. Для удобства работы можно окна уменьшить и расположить их рядом.
        Теперь научимся форматировать текст.
        Размер шрифта задается с помощью данных тэгов (от (самый крупный) до (самый мелкий). Заголовок страницы целесообразно выделить самым крупным шрифтом. Компьютер Все о компьютере Отредактировать текст в Блокноте, сохранить и просмотреть в Internet Explorer, для этого не забудьте обновить окно командой Вид - Обновить. (данные команды повторяйте после каждого этапа редактирования)
        ALIGN Некоторые тэги имеют атрибуты, которые являются именами свойств и могут принимать определенные значения. Так, заголовок по умолчанию выровнен по левому краю страницы, однако принято заголовок размещать по центру. Задать тип выравнивания для тэга заголовка позволяет заданный атрибут, которому требуется присвоить определенное значение. Выравнивание по правой границе окна реализуется с помощью записи ALIGN=”right”, а по центру - ALIGN=”center ”. Компьютер Все о компьютере
        С помощью данного тэга и его атрибутов можно задать параметры форматирования шрифта любого фрагмента текста. Атрибут FACE позволяет задать гарнитуру шрифта (например, FACE=”Arial”), атрибут SIZE – размер шрифта (например, SIZE=4), атрибут COLOR – цвет шрифта (например, COLOR=”blue”). Значение атрибута COLOR можно задать либо названием цвета (например, “red”, “green” и т.д.). либо его шестнадцатеричным значением. Шестнадцатеричное представление цвета использует RGB-формат “#RRGGBB”, где первые цифры задают интенсивность красного (red), две последние – интенсивность зеленого (green) и две последние - интенсивность синего (blue) цветов. Минимальная интенсивность цвета задается 16-ричным числом 00, максимальная – FF. Следовательно, синий цвет имеет код “#0000FF”. Зададим заголовку синий цвет. Компьютер Все о компьютере
        Заголовок целесообразно отделить от остального содержания страницы горизонтальной линией с помощью указанного одиночного тэга. Компьютер Все о компьютере
        Разделение текста на абзацы производится с помощью заданного контейнера. При просмотре в браузере абзацы отделяются друг от друга интервалами. Для каждого абзаца можно задать определенный тип выравнивания. На титульной странице обычно размещается текст, кратко описывающий содержание сайта. Поместим текст, разбитый на абзацы с различным выравниваем: Компьютер Все о компьютере

        Вставим изображение компьютера в текст с правой стороны. На Web-страницах могут размещаться графические файлы трех форматов – GIF, JPG и PNG. Если рисунок сохранен в другом формате, его необходимо предварительно преобразовать в один из вышеуказанных форматов с помощью графического редактора (Photo Editor, Paint). Для вставки изображения используется указанный тэг с атрибутом SCR, который указывает на место хранения файла на локальном компьютере или в Интернете. Нужно указать путь файла. Иллюстрации на web-страницах стали неотъемлемым элементом дизайна. Однако пользователи иногда в целях экономии времени отключают в браузере загрузку графического файла и читают только тексты. Поэтому, чтобы не терялся смысл и функциональность страницы, вместо рисунка должен выводиться поясняющий текст с помощью атрибута ALT, поясняющий, что должен был бы увидеть пользователь на рисунке: . Для вставки рисунка с правой стороны текста тэг должен иметь следующий вид: Компьютер Все о компьютере

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

        Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.

        Можно найти рисунок компьютера в коллекции ClipArt, которую обычно используют в текстовом редакторе Word. Вставить его в текст word-ского документа, скопировать, затем вставить в документ графического редактора и сохранить в той же папке, что и Web-страница в формате GIF.
        Задание 1. Создание простейших файлов HTML

        Чтобы создать свой файл HTML, сделайте следующее:

        Создайте папку HTML , в которой мы будем сохранять созданные Web-страницы.

        Запустите стандартную программу Блокнот (Notepad).

        Наберите в окне редактора простейший текст файла HTML:

        Учебный файл HTML

        Расписание занятий на вторник

        Сохраните файл под именем RASP.HTM.

        Для просмотра созданной Web-страницы загрузите броузер Microsoft Internet Explorer.

        Откройте в меню броузера Файл (File) , Открыть (Open) , Просмотр (Обзор - Browse ) и найдите в папке KURS файл RASP.HTM и загрузите его. Убедитесь, что название Web-страницы (Учебный файл HTML) отразилось в верхней статусной строке броузера.

        Задание 2. Управление расположением текста на экране

        Информация.

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

        При необходимости выполните п.п. 5-6 задания 1.

        Откройте первоисточник Web-страницы – в меню броузера Вид (View) , Источник (В виде HTML) откроется окно со стандартной программой Блокнот (Notepad), в котором ваша Web-страница представлена в командах HTML.

        Внесите изменения в текст файла HTML, расположив слова "Расписание", "занятий", "на вторник" на разных строках:

        Учебный файл HTML

        Расписание

        занятий

        на вторник

        Сохраните внесенные изменения в файле RASP.HTM, с помощью командФайл (File) , Сохранить (Save) . Закройте программу Блокнот (Notepad).

        Просмотрите с помощью броузераMicrosoft Internet Explorerновую полученнуюWeb-страницу используя клавишуF5 или с помощью командВид (View) , Обновить (Refresh). Изменилось ли изображение текста на экране?

        Примечание

        В дальнейшем после внесения изменений в Web-страницу всегда выполняйте п.п.4-5.

        Задание 3. Тэги перевода строки и абзаца

        Информация.

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

        Тэг перевода строки
        отделяет строку от последующего текста или графики. Тэг абзаца

        Тоже отделяет строку, но еще добавляет пустую строку, которая зрительно выделяет абзаца. Оба тэга являются одноэлементными.

        Внесите изменения в текст файла HTML:

        Учебный файл HTML

        Расписание

        занятий

        на вторник

        4. Сохраните внесенные изменения в файлеRASP.HTM.

        Просмотрите с помощью броузераMicrosoft Internet Explorerновую полученнуюWeb-страницу.Как изменилось изображение текста на экране?

        Задание 4. Выделение фрагментов текста

        Информация.

        Тэги выделения фрагментов текста позволяют управлять отображением отдельных символов и слов. Существует три тэга выделения фрагментов текста:

        … для выделения полужирным ,

        … для выделения курсивом,

        … для выделения подчеркиванием .

        Учебный файл HTML

        Расписание занятий на вторник

        2. Посмотрите новую полученную Web-страницу.

        Возможно использование комбинированных шрифтов:

        Расписание занятий на вторник

        Но при этом необходимо помнить следующее правило записи комбинированных тэгов:

        …

        ошибочная запись
        Задание 5. Использование стилей заголовка

        Информация.

        Существует два способа управления размером текста, изображаемого броузером:

          использование стилей заголовка,

          задание размера основного документа или размера текущего шрифта.

        Используется шесть тэгов заголовков (от Н1 до Н6). Каждому тэгу соответствует конкретный стиль, заданный в параметрах настройки броузера. Стиль Н1 – самый крупный.

        Внесите изменения в файл RASP.HTM:

        Учебный файл HTML

        Расписание занятий на вторник

        Посмотрите новую полученную Web-страницу.

        Задание 5. Задание размера текущего шрифта.

        Информация.

        Тэг шрифта позволяет задавать размер текущего шрифта в отдельных местах текста. Диапазон установки текущего шрифта – от 1 до 7.

        Внесите изменения в файл RASP.HTM:

        Учебный файл HTML

        Расписание

        занятий на вторник

        Самостоятельно измените размер шрифта для текста "занятия на вторник", используя тэг .

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

        Задание 6. Гарнитура и цвет шрифта

        Информация.

        Тэг предоставляет возможности управления размером, начертанием и цветом текста. Изменение гарнитуры шрифта выполняется простым добавлением к тэгу атрибута FACE. Например, для изображения текста шрифтом Arial необходимо записать .

        Для изменения цвета шрифта в тэге можно использовать атрибут COLOR="X" .

        Вместо Х надо подставить либо название цвета (в кавычках), либо его шестнадцатеричное значение. При задании цвета шестнадцатеричным числом можно представить этот цвет разложенным на три составляющие:

        красную(R), зеленую (G), синюю (B), каждая из которых имеет значение от 0 до FF.

        Примеры записи цвета в формате RGB приведены в таблице:

        Таблица 1

        Цвет

        Цвет

        фиолетовый

        коричневый

        оранжевый

        бирюзовый

        Внесите изменения в файл RASP.HTM:

        Учебный файл HTML

        Расписание >

        занятий на вторник

        Самостоятельно измените размер, цвет, гарнитуру, стиль текста документа.

        Задание 7. Выравнивание текста по горизонтали

        Информация.

        С помощью тэгов HTML можно управлять горизонтальным выравниванием текста. Если не оговаривать способ выравнивания, все элементы в документе будут выравниваться по левому краю и иметь неровное правое поле (см. Рис.2).

        Современные броузеры для выравнивания текста используется атрибут ALIGN= , который встраивается в теги абзаца или заголовка.

        Внесите изменения в файл RASP.HTM:

        Учебный файл HTML

        Расписание

        занятий на вторник

        Задание 8. Задание цвета фона и текста

        Информация.

        При изображении фона, текста броузеры используют цвета, установленные по умолчанию, - они заданы параметрами настройки броузера. Эти цвета устанавливаются в начале файла HTML в тэге . Запись цвета аналогична цвету шрифта (см. таблицу 1 п.12). Атрибут BGCOLOR= задает цвет фона страницы, TEXT= определяет цвет текста для всей страницы, LINK=и VLINK=определяют цвета соответственно непросмотренных и просмотренных ссылок (последние два параметра будут рассмотрены позже).

        Внесите изменения в файл RASP.HTM:

        Учебный файл HTML

        Расписание

        занятий на вторник

        Задание 9.

        Проведите экспериментальную работу с созданным документом. Меняя размеры окна, посмотрите, как броузер показывает текст с принудительным разрывом строк. Что происходит, когда окно уменьшается настолько, что в нем не может поместиться целиком даже одно слово?

        Самостоятельно создайте собственный HTML-документ. Пусть это будет небольшой рассказ о себе и своих увлечениях.

        В целом оценю время на базовое изучение html как 2-8 часов, остальное по желанию. Ну и, конечно же, время изучения зависит от заинтересованности. Рекомендую разбить на несколько дней по 20-30 минут.

        Вы готовы? Тогда поехали!

        Подключение к интернету для создания страницы на html нам НЕ нужно.

        Нам понадобится1) Выбираем текстовой редактор . На первое время достаточно Блокнота (Notepad) (в нём нам понадобится только команда Сохранить как )
        Если Вы сразу хотите начать программировать в специализированных текстовых редакторах, то обратите внимание на:
        1) для Windows
        NotePad++ (скачать или )
        Intype (скачать)

        2) для Mac и Linux
        Bluefish Editor (скачать)

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

        2) Любой интернет-браузер, например, Internet Explorer для Windows или Safari для Mac OS X и iOS. Да-да, можно также Mozilla , Google Chrome , Opera , Yandex и Mail браузеры и тд.

        Приступим к созданию страницы HTML1) создаём на рабочем столе папку html . Это мы сделаем для того, чтобы уроки были структурированы и содержались в одном месте.

        2) Создаём наш файл в текстовом редакторе, например в Блокноте (NotePad). Далее Сохранить как .

        Кодировку лучше выбирать UTF-8, затем выбрать все типы файлов и выбрать название файла с.html на конце, например index.html

        Выбираем в качестве директории (папки), куда сохранить, нашу html
        Нажимаем сохранить . Готово!

        Часто задают вопрос о том, что не видно расширения файла . Разберём по порядку

        Возможность видеть расширения файла может помочь в точном определении типа файла и даёт возможность вручную (при команде переименовать ) сменить не только расширение, но и следовательно тип файла (например, с txt на html)

        так НЕ должно выглядеть: photo, текстовой документ, game
        так Должно выглядеть: photo.jpg; текстовой документ.txt; game.exe

        Но если же у Вас всё-таки названия файлов выглядят как в первом варианте (БЕЗ, например, .txt ; jpg ; .exe в конце названия файлов), делаем следующее:

        Смотрим настройки файлов и папок:

        Для Win XP Открываем любую папку - Сервис (сверху в панели) - Свойства папки - Вид - Скрывать расширения для зарегистрированных файлов (снять галочку) - Применить

        Для Win 7 Открываем любую папку - Упорядочить - Параметры файлов и поиска -Вид - Скрывать расширения для зарегистрированных типов файлов (снять галочку) - Применить

        Для Mac OS Щёлкаем мышью по рабочему столу - Finder - Preferences (Настройки) - Advanced (Дополнительно) - выставить флажок в Show all file extensions (Показывать расширения всех файлов) - Применить

        3) вставляем в него Весь код (вместе с комментариями), указанный ниже:





        Заголовок моей странички

        4) открываем файл. Можете выбрать другой браузер для открытия данного файла, для этого нажимаем правую кнопку мыши на нашем файле index.html - Открыть с помощью и выбираем какой-нибудь браузер из списка, например, Internet Explorer, Google Chrome, Mozilla, Яндекс Браузер и тд.

        В итоге, открыв Интернет-Браузером получившийся index.html , Вы должны увидеть страничку такого вида:


        Рисунок 1.

        На Рисунке 1 мы видим как в результате браузер отобразил Вашу страничку. Красным выделен текст следующих элементов:




        Название Вашей первой странички


        Заголовок моей странички

        Это моя первая web-страничка!

        В коде представленном снизу Вы сможете увидеть базовый минимум html-документа. Её нужно обязательно выучить и не путать местами открывающие и закрывающие теги.



        Тег head выделяет головную часть документа. В ней прописываются элементы в основном связанные с помощью Браузеру в обработке элементов Вашей страницы (название, ключевые слова, авторство и тд) Конкретно о его содержимом мы поговорим позже.

        Тег title обозначает Название страницы. Это единственный тег, содержащийся в head , который отображается на странице. То, что вписать после открывающего и перед закрывающим тегом и будет Названием Вашей страницы в Интернете




        Название страницы


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



        Название страницы

        Любой заголовок
        Просто текст

        Текст в параграфе. Он будет писаться с новой строки и заканчиваться с закрывающим тегом


        Другой текст



        Почти все теги в HTML открывающие и закрывающие (исключение, например, тег img, который обозначает вставку изображеия).




        Название страницы




        В очередной раз напомню, что Важно не забывать писать закрывающие теги для всех остальных типов тегов, иначе Браузер не поймёт где именно Вы хотели закончить тот или иной элемент. Как снизу:






        Хочу выделить текст жирным, а этот уже курсивом



        Мы намерено после слова жирным забыли закрывающий тег b. В итоге браузер вывел следующее

        Хочу выделить текст жирным, а этот уже курсивом

        Как видите, текст до конца будет выделяться жирным, а тот, что подразумевался курсивом, тот будет и жирным, и курсивом. Так что будьте внимательны!

        5) Если Вы хотите что-то подредактировать в Вашем файле index.html (а он теперь по умолчанию открывается только браузером), то тогда нажимаем правую кнопку мыши на нашем файле index.html - выбираем Открыть с помощью а из списка выбираем уже текстовой редактор, это будет либо Блокнот (в англ. Notepad) , либо установленный Вами другой текстовой редактор.

        В принципе азы объяснил. Пока html-страница выглядит достаточно просто, но в следующих уроках я подробно расскажу Вам об этих и других элемента и их назначении - будем вставлять изображения, делать ссылки и много другого интересного)

        Мои поздравления!
        Несложно же?)