На главную

 

Сайт основан 1 марта 2003 года

= Язык разметки гипертекста - HTML =

  • Средства создания Веб-страниц
  • Структура HTML-документа (Веб-страницы)
  • Алгоритм создания HTML-документа с помощью Блокнота
  • Алгоритма редактирования HTML-документа
  • Работа с цветом на Веб-странице
  • Команды форматирования абзацев
  • Команды форматирования шрифта
  • Атрибуты тега <body>
  • Вставка рисунков в HTML-документ

  • Средства создания Веб-страниц

    Web-страница – это электронный документ формата .htm или .html, имеющий гиперссылки на другие документы. Web-страница – это электронный документ, созданный с помощью специального языка разметки гипертекста (HyperText Markup Language) HTML, возможно с использование скриптов, написанных на языке программирования JavaScript или с помощью языков программирования Perl, PHP.

    Какие программные средства необходимы, чтобы создать самый элементарный электронный документ на языке HTML?

    -         Или текстовый редактор типа Блокнот.

    -         Или пакет MS Office-2000, где есть возможность сохранения в формате Html.

    -         Или редактор MS Office-2000 Microsoft FrontPage.

    -         Или специальные редакторы HTML-документов, такие как HomeSite 4.5, HTMLPad 2000, Macromedia Dreamweaver MX и другие.


    Команды языка HTML, с помощью которых выполняется разметка исходного текста, называются тегами (кодами).

    Тег представляет собой набор символов, который начинается с символа < и заканчивается символом > (угловые скобки, между которыми записывается ключевое слово): <………>

    Различают одинарные теги: <…………> и парные - контейнеры - (открывающийся: <………………> и закрывающийся – перед ключевым словом находится символ косой черты (/) </………………>), а также одинарные и открывающиеся теги могут быть с атрибутами (дополнительные ключевые слова, которые могут иметь различные значения – значения записываются после знака равно и возможно в кавычках): <……………… …………=… …………=… …………=…>.

    Например Вернуться к меню

    Структура HTML-документа (Веб-страницы)

    Все HTML-документы имеют строго заданную структуру, которая создаётся с помощью таких тегов, как

    <html>…</html> - Эта пара тегов сообщает броузеру, что перед ним действительно HTML-документ

    <head>…</head> - Раздел заголовков, который содержит информацию о документе в целом, в частности он должен содержать следующий тег:

    <title>…</title> - Тег, содержащий заголовок документа, который будет отображён в строке заголовков окна броузера.

    <body>…</body> - Тело документа, т.е. здесь будет располагаться сам текст, содержание документа.

    Например Вернуться к меню

    Алгоритм создания HTML-документа с помощью Блокнота

  • Открыть программу Блокнот:
         Пуск - Все программы - Стандартные - Блокнот
  • Создать структуру HTML-документа
  • Сохранить созданный файл выбрав:
         Сохранить как...
         и выполнив следующие действия:
         Тип файла - все файлы,
         Указать папку для сохранения,
         Задать имя файла маленькими английскими буквами
         с расширением .htm
  • Закрыть программу Блокнот
  • Открыть папку, в которой сохранили HTML-документ
  • Открыть созданный HTML-документ и просмотреть его в броузере

  • Вернуться к меню

    Алгоритм редактирования HTML-документа с помощью Блокнота

    1. Открыть в броузере HTML-документ для просмотра
    2. Выбрать в Меню Вид - Просмотр HTML кода.
           Откроется окно программы Блокнот с кодом HTML-документа
    3. В окне программы Блокнот надо: редактировать документ, затем выбирать в Меню Файл - Сохранить
    4. В окне броузера надо просматривать отредактированный документ, выбирая на Панели инструментов кнопку Обновить
    5. Действия 3 и 4 выполняются до тех пор, пока осуществляется редактирование. Окна двух программ броузера и Блокнота не закрываются, а активизируются поочередно с панели задач.

    Вернуться к меню

    Работа с цветом на Веб-странице

       Цвет для Web-страниц задаётся шестнадцатеричным кодом: #ккззсс, где кк – число, указывающее на количество красного оттенка, зз – число, указывающее на количество зелёного оттенка, сс – число, указывающее на количество синего оттенка.

    Алгоритм определения шестнадцатиричного кода для цвета
    1. Открыть программу Paint. Выбрать в меню Палитра - Изменить палитру - Определить цвет.
    2. Выписать десятичные значения для количенства красного, зелёного, синего цветов в выбранном цвете
    3. Открыть программу калькулятор
    4. Перевести десятичные значения в шестнадцатиричные. Каждый цвет будет записан двумя шестнадцатиричными цифрами
    5. Полученные шесть цифр и есть шестнадцатиричный код цвета

    Например Вернуться к меню

    Команды форматирования абзацев

    В языке HTML нет тега для создания абзацного отступа (красной строки), поэтому для удобочитаемости текста между абзацами броузер печатает пустую строку. Красная строка может быть создана с помощью нескольких пробелов, лишний пробел в HTML задаётся набором символов: &nbsp;

    Парный тег: <p> … </p> - для обозначения абзаца. Этот тег может содержать атрибут ALIGN, значение которого задаёт выравнивание элементов абзаца: Center, Left, Right, Justify. Например <p align=justify> - означает выравнять абзац по ширине.

    Одиночные теги: <br> - переход на новую строку без создания абзаца, <hr> - создание горизонтальной линии.

    Например Вернуться к меню

    Команды форматирования шрифта

    Парные теги:  <i> … … … </i> - курсив

      <b> … … … </b> - жирный

      <u> … … … </u> - подчёркнутый

    Тег с атрибутами:
    <
    font face=”тип шрифтаsize=”размер шрифтаcolor=”цвет”> … … … </font>

    Вернуться к меню

    Атрибуты тега <body>

       Если в <BODY> не будут заданы атрибуты внешнего вида документа, то текст будет отображен в окне браузера в соответствии с пользовательскими установками. Для обеспечения соответствия между внешним видом документа в браузере пользователя и дизайном разработчика необходимо использовать специальные атрибуты тега:

    • BGCOLOR - цвет фона документа;
    • BACKGROUND - адрес файла с картинкой, для создания фона;
    • BGPROPERTIES - режим прокрутки фона по отношению к тексту документа (по умолчанию прокрутка вместе с текстом, BGPROPERTIES = FIXED - стационарный фон);
    • TEXT - цвет текста документа;
    • LINK - цвет выделения элементов-якорей ссылок;
    • ALINK - цвет выделения активных элементов-якорей ссылок;
    • VLINK - цвет выделения элементов-якорей просмотренных ссылок;
    Вернуться к меню

    Вставка рисунков в HTML-документ

       Файл с картинкой и HTML документ дожны быть сохранены в одной папке. Файл должен быть оптимизирован, т.е. сохранён в формате .jpg, .gif, .png

       Тег для вставки картинки в HTML документ имеет вид:
    <IMG SRC="ИМЯ ФАЙЛА" ALT="Текст" ALIGN=... WIDTH=... HEIGHT=... BORDER=...>
    где:

    имя файла - это имя файла c картинкой.
    текст - это текст, выводимый вместо изображения, если файл изображения по какой-либо причине недоступен.
    значение ALIGN - указывает место расположения изображения.
       Принимает следующие возможные значения:
       ALIGN=TOP - последующий текст располагается в верхней части изображения.
       ALIGN=BOTTOM - последующий текст располагается в нижней части изображения.
       ALIGN=LEFT - изображение находится в левой части листа. Текст обтекает изображение справа.
       ALIGN=MIDDLE - изображение находится в центре листа.
       ALIGN=RIGHT - изображение находится в правой части листа. Текст обтекает изображение слева.
    значение WIDTH - ширина требуемого изображения на экране,
    значение HEIGHT - высота требуемого изображения на экране.
    значение BORDER - задаёт ширину линии для рамки
    Вернуться к меню