Главная » Разное

Способ разметки гипертекста html

Содержание
  1. Что такое HTML? Основы языка разметки гипертекста
  2. История HTML
  3. Как работает HTML?
  4. Обзор наиболее используемых HTML-тегов
  5. Теги блочного уровня
  6. ТЕМА 7.3. ТЕХНОЛОГИЯ СОЗДАНИЯ ГИПЕРТЕКСТОВЫХ ДОКУМЕНТОВ
  7. Оглавление
  8. 7.3.1. Принципы гипертекстовой разметки
  9. 7.3.2. Структура документа
  10. Заголовок первого уровня
  11. Заголовок документа
  12. Основная часть документа
  13. Оформление документа
  14. 7.3.3. Форматирование текста
  15. текст
  16. 7.3.4. Вставка изображений
  17. 7.3.5. Таблицы
  18. 7.3.6. Гиперссылки
  19. 7.3.7. Навигационные карты
  20. 7.3.8. HTML формы
  21. 7.3.9. Среда приложения для создания гипертестовых страниц Micromedia Dreamweaver
  22. Вопросы для закрепления материала
  23. Версия для печати
  24. Хрестоматия
  25. Практикумы

Что такое HTML? Основы языка разметки гипертекста

Что такое HTML? Это язык разметки гипертекста. Он позволяет пользователю создавать и структурировать разделы, параграфы, заголовки, ссылки и блоки для веб-страниц и приложений.

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

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

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

Нужен недорогой, но надёжный хостинг для учебного или небольшого коммерческого проекта? Ознакомьтесь с тарифами общего хостинга. Скидки до 85%!

История HTML

HTML был изобретён Тимом Бернерсом-Ли, физиком из исследовательского института ЦЕРН в Швейцарии. Он придумал идею интернет-гипертекстовой системы.

Hypertext означает текст, содержащий ссылки на другие тексты, которые зрители могут получить немедленно. Он опубликовал первую версию HTML в 1991 году, состоящую из 18 тегов HTML. С тех пор каждая новая версия языка HTML появилась с разметкой новых тегов и атрибутов (модификаторов тегов).

Согласно Справочнику HTML Element Reference от Mozilla Developer Network, в настоящее время существует 140 тегов HTML, хотя некоторые из них уже устарели (не поддерживаются современными браузерами).

Из-за быстрого роста популярности HTML теперь считается официальным веб-стандартом. Спецификации HTML поддерживаются и разрабатываются консорциумом World Wide Web (W3C). Вы можете проверить последнее состояние языка в любое время на веб-сайте W3C (англ).

Самым большим обновлением языка стало внедрение HTML5 в 2014 году. Было добавлено несколько новых семантических тегов к разметке, которые показывают смысл их собственного контента, например , и .

Как работает HTML?

HTML-документы — это файлы, которые заканчиваются расширением .html или .htm. Вы можете просматривать его с помощью любого веб-браузера (например, Google Chrome, Safari или Mozilla Firefox). Браузер читает HTML-файл и отображает его содержимое, чтобы пользователи интернета могли его просматривать.

Обычно средний веб-сайт включает несколько разных HTML-страниц (англ). Например: домашние страницы, обычные страницы, страницы контактов будут иметь отдельные HTML-документы.

Каждая HTML-страница состоит из набора тегов (также называемых элементами), которые вы можете назвать строительными блоками веб-страниц. Они создают иерархию, которая структурирует контент по разделам, параграфам, заголовкам и другим блокам контента.

Большинство элементов HTML имеют открытие и закрытие, в которых используется синтаксис .

Ниже вы можете увидеть пример кода, с помощью которого можно структурировать элементы HTML:

    Самый главный элемент — это простое разделение (

) и изображение ( ).

  • Второй абзац содержит ссылку ( ) с атрибутом href, который содержит целевой URL.
  • Тег изображения также имеет два атрибута: srcдля пути изображения и altдля описания изображения.

    • Обзор наиболее используемых HTML-тегов

    HTML-теги имеют два основных типа: блок-уровень и встроенные теги.

    1. Элементы уровня блока занимают всё свободное пространство и всегда запускают новую строку в документе. Заголовки и параграфы — отличный пример блочных тегов.
    2. Встроенные элементы занимают столько места, сколько им нужно, и не запускают новую строку на странице. Они обычно служат для форматирования внутреннего содержимого элементов уровня блока. Ссылки и подчеркнутые строки — хорошие примеры встроенных тегов.

    Теги блочного уровня

    Три тега уровня блока, которые каждый HTML-документ должен содержать: , и .

    1. Тег — это элемент самого высокого уровня, который охватывает каждую HTML-страницу.
    2. Тег содержит метаинформацию, такую ​​как заголовок страницы и кодировка.
    3. Наконец, тег

    Источник

    ТЕМА 7.3. ТЕХНОЛОГИЯ СОЗДАНИЯ ГИПЕРТЕКСТОВЫХ ДОКУМЕНТОВ

    • ознакомиться с основами языка разметки гипертекста HTML;
    • ознакомиться с принципами создания гипертекстовых страниц с помощью текстового редактора и с помощью редактора гипертекстовых страниц Dreamweaver;
    • научиться создавать сайт, состоящий из нескольких страниц.

    Оглавление

    7.3.1. Принципы гипертекстовой разметки

    Гипертекстовые страницы создаются с помощью языка разметки гипертекста HTML (HyperText Markup Language) в текстовом редакторе или в среде специальных редакторов web-страниц.

    Гипертекстовый документ содержит:

    • текст, который отображается в окне браузера в соответствии с форматированием, заданным в кодах HTML;
    • коды разметки, определяющие форматирование элементов документа;
    • коды разметки, обеспечивающие вставку различных элементов в документ;
    • коды, определяющие структуру связей с другими информационными ресурсами (гипертекстовые ссылки). Эти связи могут объединять документы с самыми разными информационными ресурсами, в том числе содержащими звуки, видео. Поэтому гипертекстовые документы называются еще и гипермедиальными.

    Коды разметки представляют собой символы ASCII. Поэтому страницы можно создавать в текстовых редакторах.

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

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

    Текст тэга заключается в угловые скобки, например, ), разрыва строки(
    ), вставки изображения .

    Контейнер – это пара тэгов, начального и конечного, между которыми содержатся другие элементы документа, например текст или другие тэги. Указания тэгов применяются к расположенному между ними объекту.

    Тэг-контейнер имеет следующую структуру:

    Имя конечного тэга идентично имени начального, но перед ним ставится знак «/».

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

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

    Например, при описании таблицы, открывающий тэг может выглядеть так:

    Но он может содержать атрибуты, задающие:

    • WIDTH — ширину таблицы;
    • ALIGN — расположение таблицы относительно других объектов страницы;
    • BORDER — ширину границы;
    • BGCOLOR — цвет таблицы.

    Тогда тэг-контейнер, задающий вид таблицы, выглядит следующим образом:

    Приведенный тэг задает ширину таблицы 780 пикселей, выравнивание — по левому краю, ширину рамки — 1 пиксел, цвет фона таблицы – слоновой кости.

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

    Вставка специальных символов — CER (Character Entity Reference)

    Специальные сочетания символов позволяют отображать на web –страницах те символы, которые могут быть неверно обработаны браузером. Например, символы, используемые тэгами (угловые скобки, двойные кавычки). Некоторые из них приведены в Таблице 1. Эти сочетания вводятся в нужном месте гипертекста без угловых скобок.

    Таблица 1. Вставка специальных символов.

    Символ

    Имя

    Описание

    Больше

    пробел

    Пробел

    Амперсанд

    Фунт

    Копирайт

    Регистрированная торговая марка

    Тэги можно разделить по назначению:

    • тэги формирования структуры документа;
    • тэги оформления страниц (вид текста, списки, изображения, списки, таблицы, картинки);
    • тэги гипертекстовых ссылок и закладок;
    • тэги интерактивных форм;
    • тэги внедренных объектов, например, вызова программ.

    7.3.2. Структура документа

    Основная часть документа

    HTML-документ позволяет вкладывать контейнеры друг в друга. Документ начинается с тэга — контейнера и заканчивается конечным тэгом .

    В гипертекстовом документе определяется его заголовок (HEAD), и основная часть, называемая телом (BODY).

    Пример структуры документа:

    Заголовок первого уровня

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

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

    Для создания структуры (рис. 2) должно быть 3 файла. Файл с определением набора фреймов, который описывает количество кадров, их имена, размеры, наличие линеек прокрутки. Чтобы заполнить кадры нужно в тэге frame определить, какие файлы будут в них загружаться.

    На рис. 2 в левом фрейме отображен список банков, каждый элемент которого является гиперссылкой. Щелчок по гиперссылке загружает в правый фрейм нужный файл. Атрибут Name задает имена кадров. Левый кадр имеет имя topics, правый — docum. Они задаются для управления загрузкой документов в нужный кадр. Файл, задающий фреймы выглядит следующим образом:

    Заголовок документа

    Элемент разметки HEAD–контейнер не является обязательным тэгом. В заголовке часто располагаются элементы разметки, задающие параметры документа, такие как:

    • TITLE (заглавие документа или его тема);
    • META (метаинформация);
    • STYLE (описатели стилей);
    • SCRIPT (скрипты).

    Элемент разметки TITLE

    Контейнер TITLE служит для задания темы документа в World Wide Web. Так же именуется окно браузера, в котором документ просматривается. Слова из контейнера TITLE попадают в индекс поисковой системы.

    Элемент разметки META

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

    Атрибут CONTENT отображает содержание описания документа.

    При индексировании документы, в которых задана тема в тэгах TITLE, ключевые слова и описание документа в атрибутах тэга META, попадут в индекс некоторых поисковых машин.

    Элемент разметки STYLE

    Предназначение тэга разметки STYLE — размещение описания стилей. Описание стиля может встречаться и в теле страницы, но если оно находится в заголовке – правила отображения стиля действуют для всей страницы.

    Атрибут тэга – TYPE задает тип стиля. Это может быть либо text/css, либо text/javascript:

    Элемент разметки SCRIPT

    1. Контейнер SCRIPT содержит код JavaScript, VBScript или JScript.
    2. Он не обязательно должен находиться в заголовке, а может быть также и в теле документа.
    3. Если открыт тэг начала, то должен быть тэг конца контейнера.
    4. В общем виде запись контейнера выглядит следующим образом:

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

    Основная часть документа

    Оформление документа

    Цвет элементов

    Основная часть документа начинается с тэга .

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

    Цвета задаются названиями цветов, которые можно найти в специальных таблицах или шестнадцатиричными кодами, в которых каждые две цифры задают значения трех составляющих цвета – RGB (красного, зеленого, синего). Например, код цвета фона bgcolor =»# FF 0000″ задает максимальное значение красного (FF) и минимальные зеленого и синего.

    Таблица 2. Цвета, используемые в Internet

    Данные Таблицы 2 скопированы с сайта известного дизайнера А.Лебедева.

    Белый цвет задается смешением максимальных значений красного, зеленого и синего цветов. Код его FFFFFF. Черный – наоборот все нули.

    В тэге BODY можно задавать цвет фона страницы, текста, гиперссылок.

    Пример определения цвета разных элементов страницы:

    TEXT – цвет текста страницы;

    BGCOLOR – цвет фона страницы;

    LINK – цвет ссылок;

    VLINK – цвет посещенных ссылок.

    Другие элементы оформления

    Горизонтальная линия часто используется для раздела логических частей страницы. Линия выглядит в виде канавки. Задается тэгом . Атрибуты тэга :

    — выравнивание (center или left);

    — ширина линии в процентах или пикселях;

    — толщина линии в пикселях;

    — задание цвета линии, действует в только в Internet Explorer.

    7.3.3. Форматирование текста

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

    Таблица 3. Тэги, оформляющие текст.

    Назначение тэга

    Имя

    Атрибуты

    Пример

    Шрифт (задание размеров, цвета, вида)

    Параграф (Начало нового абзаца)

    Возможные значения – left; right; justify; center

    Заголовок. Объявление текста заголовком. Можно задать заголовки шести уровней.

    color – цвет align – выравнивание

    текст

    Полужирный текст

    Верхний индекс, например для задания степеней

    Type – тип маркера :.

    Начало списка маркированного

    Начало списка нумерованного

    Перевод следующего за тэгом текста на новую строку

    Встает заря во мгле холодной. На нивах шум работ умолк.

    7.3.4. Вставка изображений

    Тэг вставки изображения в простейшем варианте выглядит так:

    SRC – обязательный атрибут, указывающий на файл–источник изображения, в данном случае — «photo.jpg». Предполагается, что файл находится в той же папке, что и страница, куда вставляется изображение. Если это другая папка, например, images, то ее имя необходимо указать:

    Если же изображение находится в папке images на удаленном компьютере, то тэг выглядит так:

    Тэг вставки изображения может иметь такие атрибуты как:

  • WIDTH – ширина изображения, значение которой задается в пикселях или в процентах от экрана. Важно предусмотреть, чтобы изображение не было слишком большим, если будет открываться на маленьком экране;
  • HEIGHT – высота изображения, значение которой задается в пикселях или процентах;
  • ALIGN – выравнивание, расположение относительно текста. Задаются такие значения атрибута как: слева, справа, по центру;
  • BORDER – ширина рамки. Значение задается в пикселях. Если рисунок является ссылкой и цвет его рамки не соответствует стилю остальных элементов страницы, можно задать рамку равной нулю;
  • ALT – альтернативный текст, представляющий собой фразу, комментирующую изображение;
  • HSPACE – расстояние между изображением и текстом по горизонтали в пикселях;
  • VSPACE – расстояние между изображением и текстом по вертикали в пикселях.

    Чтобы вставить изображение таким образом, как на рис.2

    Указанное изображение находится в одной папке со страницей. Его имя — paris_photo.jpg. Ширина изображения меняется в зависимости от размеров экрана и составляет 70% от его ширины (рис.2). Изображение имеет альтернативный текст. Рамка изображения отсутствует.

    Рис. 2. Фрагмент гипертекстовой страницы с изображением

    7.3.5. Таблицы

    Широко применимым является тэг

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

    Таблица задается тэгом-контейнером:

    Таблица состоит из строк и столбцов (ячеек), которые указываются следующими тэгами:

    — столбец (ячейка) таблицы.

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

    Рис. 3. Представление изображений в таблице

    Некоторые атрибуты таблицы, рядов и ее ячеек:

    • WIDTH – ширина;
    • HEIGHT — высота;
    • ALIGN – выравнивание;
    • VALIGH – расположение текста в ячейке по вертикали, возможные значения: top, bottom;
    • ROWSPAN — объединение рядов, указывается числом (количество);
    • COLSPAN – объединение столбцов (ячеек);
    • BGCOLOR – цвет ячейки, ряда, таблицы;
    • CELLSPACING – расстояние между ячейками;
    • CELLPADDING – расстояние между содержимым и границами ячейки.

    Атрибут CELLSPACING задает пространство между ячейками в пикселях.

    Если нужно избавиться от пространства между ячейками значение атрибута CELLSPACING приравнивается нулю:


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

    7.3.6. Гиперссылки

    Сайт представляет собой набор связанных гипертекстовых документов. Самая главная страница сайта, которая загружается первой, имеет, как правило, имя index.html или main.html. Она содержит ссылки на другие страницы. Они могут быть оформлены в виде панели навигации. Имена страниц сайта могут иметь любые имена, но нужно помнить, что система различает строчные и заглавные буквы. Например, photos.html и Photos.html – это разные файлы. Страницы сайта могут находиться в одном каталоге (папке) или — в разных, или — на удаленном компьютере.

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

    Гипертекстовая ссылка — это адрес другого документа или информационного ресурса Internet, который связан с документом посредством ссылки. Щелчок по ней позволяет загрузить этот документ в окно браузера или скопировать на локальный компьютер, или открыть окно приложения для создания сообщения электронной почты.

    Гиперссылка активизируется благодаря атрибуту HREF ( hypertext reference – гипертекстовая ссылка), задающему адрес документа.

    Например, имеется документ с фотографиями, имя которого paris.html. Он находится в одной папке с главным документом index.html.

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

    Тэг делает ссылкой не только текст, но и изображения, и адреса электронной почты. Адрес документа задается по тем же принципам, что и для изображений:

    • Поездка в Париж — файл находится в одной папке с текущей страницей;
    • Впечатления — файл находится в папке pages;
    • Фотоальбом — файл находится на удаленном компьютере.

    Ссылкой может быть текст (фраза или слово), изображение, анимация, адрес электронной почты.

    Адрес ссылки (URL) может быть указанием на:

    Ссылка может быть не только текстом, но и изображением.

    IMG — это тэг вставки изображения;

    SRC — атрибут указания файла с изображением. Само изображение — гиперссылка.

    Гиперссылка может вызывать загрузку не только гипертекстовых документов, но и других файлов (*.doc, *.mp3, *.jpg, *.gif, *.txt, *.zip, *.exe и т.д:)

    Закладки

    Иногда важно сделать ссылку не на другую страницу, а на определенный текст текущей страницы. Место, к которому нужно перейти называют закладкой. Ему задают имя:

    Гиперссылки на нужные закладки оформляются следующим образом:

    7.3.7. Навигационные карты

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

    Навигационная карта задается тэгом-контейнером MAP, описывающим ее. Геометрические области изображения определяются тэгом AREA.

    Форма области задается атрибутом SHAPE:

    • Прямоугольник — SHAPE=»rect»;
    • Круг — SHAPE=»circle»;
    • Многоугольник — SHAPE=»poly».

    и соответствующими координатами. Их определяет атрибут COORDS. Число координат и порядок их значений зависят от выбранной формы (рис.4).

    Рис. 4. Координаты геометрических областей навигационной карты

    Левый верхний угол изображения (рис.4) имеет координаты (0;0). При задании координат прямоугольной области задаются координаты верхнего левого и нижнего правого углов области. Порядок записи координат для параметра coords следующий:

    Предположим, что на рис. 4 x1=25, y1=36; x2=114, y2=98.

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

    К описанию областей нужно добавить гиперссылки:

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

    Для того, чтобы связать карту с изображением, необходимо в тэге вставки изображения использовать атрибут usemap=»#имя_карты» для картинки:

    Для создания круглой области задаются координаты ее центра (x и y) и длина радиуса (R) в пикселях:

    Допустим, координаты круга будут такие: x=46, y=48; а длина радиуса — R=35. Тогда:

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

    Для задания многоугольной области используются координаты углов и атрибут POLY.

    Координаты задаются подряд через запятые:

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

    7.3.8. HTML формы

    Формы задаются для того, чтобы пользователь мог выполнять какие-либо действия на сайте.

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

    Для управления этими элементами динамических web-страниц, необходимо обрабатывать информацию пользователя или с помощью Java скриптов, или Visual Basic скриптов в браузере пользователя, или с помощью компонента программного обеспечения Web-сервера CGI (Common Gateway Interface).

    Форма создается тэгом-контейнером .

    Атрибут METHOD указывает один из двух возможных методов отправки данных, введенных в форму:

    GET — информация из формы добавляется в конец URL, указанного в описании тэга ;

    POST — информация из формы пересылается по указанному адресу.

    Атрибут ACTION указывает URL, вызываемый для обработки формы. Как правило, это адрес CGI-программы, обрабатывающей форму.

    Тэги формы

    TEXTAREA – этот тэг позволяет пользователю вводить более одной строки информации в текстовое поле. Пример:

    Платонов, Юрий Петрович,
    Санкт-Петербург

    Где: NAME — имя поля ввода; ROWS — высота поля ввода в символах; COLS — ширина поля ввода в символах.

    INPUT — тэг используется для ввода одной строки текста или одного слова. Атрибуты тэга:

    • CHECKED — подтверждение , что CHECKBOX (флажок) или RADIOBUTTON (кнопка альтернативного выбора) будут выбраны;
    • MAXLENGTH — количество символов, которое пользователи могут ввести в поле ввода;
    • NAME — имя поля ввода, идентификатор позволяющий получить данные, помещенные пользователем в это поле;
    • SIZE — размер поля в символах;
    • SRC — URL, указывающий на изображение;
    • TYPE — тип поля ввода. По умолчанию это простое поле ввода для одной строки текста.

    Другие типы элементов формы:

    • CHECKBOX — флажок, задает одно из значений ON или OFF (логические).
    • HIDDEN – поле, не отображаемое браузером, не позволяет делать изменения, передает длину логина или пароля.
    • PASSWORD – текстовое поле, не отображаемое браузером на экране.
    • RADIO — поле выбора одной из альтернативных возможностей. Альтернатива обеспечивается созданием нескольких полей ввода с атрибутом TYPE=»RADIO» с разными значениями атрибута VALUE, но с одинаковыми значениями атрибута NAME. При выборе одного из полей ввода типа RADIO все остальные поля данного типа с тем же именем (атрибут NAME) автоматически станут невыбранными на экране.
    • RESET — кнопка, при нажатии которой все поля формы примут значения, описанные для них по умолчанию.
    • SUBMIT — кнопка, при нажатии которой будет вызвана CGI-программа (или URL), описанная в заголовке формы. Атрибут VALUE может содержать строку, которая будет высвечена на кнопке.
    • TEXT — текстовое поле одной строки. Атрибуты MAXLENGTH и SIZE определяют максимальную длину вводимого значения в символах и размера отображаемого поля ввода на экране (по умолчанию принимается 20 символов). VALUE – атрибут, присваивающий полю значение по умолчанию или значение, которое будет выбрано при использовании элементов разного типа.
    • LISTBOX — меню выбора.

    Формы можно использовать для отправки не только небольших информационных сообщений в виде параметров, а также и для отправки файлов.

    Рис. 5. Форма для отправления файла

    HTML-код формы выглядит следующим образом:

    Отправить данный файл :

    7.3.9. Среда приложения для создания гипертестовых страниц Micromedia Dreamweaver

    В окне редактора (рис. 6) строка заголовка отображает название страницы и имя файла.

    Рис. 6. Окно приложения Micromedia Dreamveawer

    Под окном заголовка — строка меню.

    Слева — панель объектов, при помощи которой можно создавать различные объекты: таблицы, слои, вставлять картинки и многое другое.

    Справа можно открывать дополнительные окна, например (рис.6), «HTML style», «Behaviors «, «CSS styles» и т.д.

    Рис. 7. Окно параметров

    Перед работой в приложении необходимо сделать начальные установки. Команда Preferences/General открывает окно, в котором можно задать необходимые параметры. Например, чтобы отображался и русский и английский текст нужно выбрать категорию Fonts/Encoding и правильно настроить Default Encoding, выбрав из набора шрифт, содержащий кириллицу. Здесь же можно задать другие параметры шрифта.

    Рис. 8. Панель объектов.

    В рабочем поле окна приложения можно создавать документ, вводя текст, в нужных местах можно вставлять объекты, используя меню INSERT и панель объектов (рис. 8).

    Для изменения свойств объектов вызывается специальная панель properties (свойства), в полях которой задаются конкретные параметры объекта (рис.9).

    Рис. 9. Панель свойств таблицы.

    В приложении можно вызывать окно, отображающее HTML-код создаваемой страницы и окно просмотра страницы в браузере.

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

    Команда Site>Define sites откроет окно настройки параметров сайта. Категория Local info позволяет задать имя сайта (рис.10), местный адрес папки с сайтом, а также HTTP Address – адрес сайта в Интернет.

    Рис. 10. Окно настройки параметров сайта. Категория Local Info

    Категория Remote Info позволяет задать адрес FTP сервера, в графе HOST Directory нужно указать папку на удаленном компьютере (рис.11), в которую Dreamweaver будет перемещать файлы созданного сайта.

    Рис. 11. Настройки сайта Remote Info

    В поле Login ввести логин пользователя на удаленном компьютере. В поле Password — пароль.

    Вопросы для закрепления материала

    1. Что представляет собой файл с гипертекстом?
    2. Что такое тэг? Автономный тэг? Тэг-контейнер?
    3. В каком приложении можно создать гипертекстовую страницу?
    4. Какие расширения имеют файлы с гипертекстом?
    5. Какова структура гипертекстовой страницы?
    6. Что такое Фрейм (кадр)?
    7. Для чего используются тэги , ?
    8. Как задается цвет элементов гипертекстовой страницы?
    9. Каким образом форматируется текст гипертекстовой страницы?
    10. Как создать гиперссылку?
    11. Какие атрибуты могут менять изображения гипертекстовых страниц?
    12. Для чего используются таблицы?
    13. Что такое карта?
    14. Каковы принципы создания гипертекстовых страниц в приложении Micromedia Dreamweaver ?

    Версия для печати

    Хрестоматия

    Практикумы

    В рамках данной работы Вы должны будете освоить технологию:

    Источник

    Читайте также:  Как заставить женщину сходить от тебя с ума 10 работающих способов
    Оцените статью
    Разные способы
    © 2024 Разные способы.
    Внимание! Информация, опубликованная на сайте, носит исключительно ознакомительный характер и не является рекомендацией к применению.
    Название практикума Аннотация