14111

ПЕРВОЕ ЗНАКОМСТВО С HTML РЕДАКТОР HOMESITE ФОРМАТИРОВАНИЕ ТЕКСТА

Конспект урока

Информатика, кибернетика и программирование

УРОК 2 ПЕРВОЕ ЗНАКОМСТВО С HTML РЕДАКТОР HOMESITE ФОРМАТИРОВАНИЕ ТЕКСТА Структура HTMLдокумента HTML Hyper Text Markup Language язык гипертекстовой разметки. Команды языка HTML с помощью которых выполняется разметка исходного текста называются тегами. Тег представляет собой к...

Русский

2013-05-21

495 KB

7 чел.


УРОК 2

ПЕРВОЕ ЗНАКОМСТВО С HTML

РЕДАКТОР HOMESITE

ФОРМАТИРОВАНИЕ ТЕКСТА

Структура HTML-документа

HTML (Hyper Text Markup Language) – язык гипертекстовой разметки.

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

Тег представляет собой ключевое слово, заключенное в угловые скобки. Как правило, теги парные. Первый тег открывает описание команды, определяет ее начало, второй, отличающийся от первого наличием косой черты “/” перед ключевым словом (именем тега), закрывает его.

Все документы HTML имеют строго заданную структуру:

<HTML>

Начало HTML-программы

   <HEAD>

         <TITLE>Заголовок документа</TITLE>

      …

    </HEAD>   

заголовок программы

   <BODY>

   …

   </BODY>

тело программы

</HTML>

Конец HTML-программы

Заголовок программы

В блоке (<HEAD>... </HEAD>) описываются общие правила интерпретации HTML-документа в целом и содержится вспомогательная информация о документе.

Команда:  <META http-equiv="Content-Type" content="text/html; harset=windows-1251"> задает браузеру информацию о кодировке, в которой написан текст HTML-документа.

Между парой тегов <TITLE> и </TITLE> располагается имя HTML-документа. Это имя браузер использует в заголовке окна браузера.

Тело программы

Между тегами <BODY> и </BODY> располагаются команды, следуя которым браузер выводит информацию в окно документа

Атрибуты

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

Например, атрибуты bgcolor и text тега BODY задают соответственно цвет фона и текста на описываемой странице и записываются так:

<BODY bgcolor=”white” text=”black”>

Порядок следования атрибутов в теге не важен.

Атрибут действует от открывающего тега, в котором он задан, до закрывающего или только внутри тега, если тег не имеет парного.

Редактор HomeSite

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

Вид окна редактора:

верхнее меню

панели инструментов

 

окно для отображения файловых ресурсов

 

окно редактирования HTML-кода (вкладка Edit), которое можно заменить окном просмотра результатов (вкладка Browse).

Для создания нового документа и форматирования текста вам понадобятся панели инструментов

Common

Fonts

Создание нового документа

При запуске редактора в окне Edit, как правило, уже присутствуют структурные теги HTML, HEAD, BODY.

В противном случае вставить каркас HTML-кода можно кнопкой (QuickStart) на панели инструментов Common.

Кнопка  (View External Browser List) на панели инструментов View позволяет просматривать созданную страничку в окне браузера (InternetExplorer).

Запись документа на диск:

FileSave as…→ Указать адрес, ввести имя файла и расширение htm.

Для быстрой записи редактируемой страницы можно нажать кнопку (Save) на стандартной панели инструментов.

Чтение документа с диска в окно редактора:

FileOpen→ Указать адрес, выбрать имя файла для загрузки.

Ввод и форматирование текста.

Заголовки

Заголовки – инструмент структурной организации текста. Заголовки разделяют информацию на отдельные логические части и поэтому существенно улучшают ее восприятие.

В HTML-документе поддерживаются заголовки шести уровней при помощи конструкции

<Hn>текст заголовка</Hn>

n обозначает уровень заголовка.

Заголовки выделяются браузером при показе HTML-документа размером шрифта и жирностью:

<H1>Заголовок 1 уровня</H1>

Заголовок 1 уровня

<H2>Заголовок 2 уровня</H2>

Заголовок 2 уровня

<H3>Заголовок 3 уровня</H3>

Заголовок 3 уровня

<H4>Заголовок 4 уровня</H4>

Заголовок 4 уровня

<H5>Заголовок 5 уровня</H5>

Заголовок 5 уровня

<H6>Заголовок 6 уровня</H6>

Заголовок 6 уровня

Не следует использовать команды <Hn> для выделения обычного текста. Они применяются именно для заголовков.

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

Абзац и принудительный разрыв строки

Как известно, текст делится на смысловые порции – абзацы. На Web-странице абзацы отделяются друг от друга пустыми строками.

Задается абзац тегами <P> и </P> , между которыми помещается текст.

В окне редактора HomeSite эти теги вставляются кнопкой на панели инструментов Common.

Команда <BR> (кнопка  на панели инструментов Common) заставляет браузер продолжить вывод абзаца с новой строки. Тег <BR> не имеет парного (конечного).

Фрагмент HTML-кода 

Вид текста в окне браузера

<p>М.Ю.Лермонотов</p>

<p>Белеет парус одинокий </p>

<p>В тумане моря голубом.</p>

<p>Что ищет он в стране далекой?</p>

<p>Что кинул он в краю родном?</p>

М.Ю.Лермонотов

Белеет парус одинокий

В тумане моря голубом.

Что ищет он в стране далекой?

Что кинул он в краю родном?

<p>М.Ю.Лермонотов</p>

<p>

Белеет парус одинокий <br>

В тумане моря голубом.<br>

Что ищет он в стране далекой?<br>

Что кинул он в краю родном?

</p>

М.Ю.Лермонотов

Белеет парус одинокий
В тумане моря голубом.
Что ищет он в стране далекой?
Что кинул он в краю родном?

Выравнивание абзацев и фрагментов

Команды <P> и <Hn>, записанные без атрибутов, выравнивают текст по левому краю страницы. С помощью атрибута align можно запрограммировать другое положение на Web-странице.

<P align=left>

 — выравнивает абзац по левому краю

<P align=right>

 — выравнивает абзац по правому краю

<P align=center>

 — выравнивает абзац по центру

Выровнять по центру можно не только отдельный абзац или заголовок, но и целую группу экранных элементов, если поместить их описание внутри тегов <CENTER>...</CENTER>.

Примечание! Во время редактирования HTML-кода в программе HomeSite ввод пробела в записи тега вызывает список атрибутов для данного тега. Двойным щелчком выберите нужный атрибут и укажите его значения.


Задание

  1.  Открыть окно редактора HomeSite.
  2.  Загрузить файл zadanie.htm.
  3.  Просмотреть отображение текста в окне браузера.
  4.  Дополнить текст тегами и атрибутами, необходимыми для того, чтобы документ отображался в окне браузера следующим образом:
  5.  Сохранить полученный документ в своей личной папке.

Примечания:

  •  название документа в теге <TITLE>  The Beatles;
    •  цвет фона страницы #C61D0C;
    •  первый абзац заголовок второго уровня, выровненный по центру;
    •  2,4,8,10 абзацы заголовки третьего уровня;
    •  6 абзац заголовок четвертого уровня, выровненный по центр;
    •  строки седьмого абзаца разделены с помощью принудительного разрыва <BR> и центрированны.

PAGE  5

  •  

 

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

67869. МЕСТО ПРАВА НА ЛИЧНУЮ НЕПРИКОСНОВЕННОСТЬ В СИСТЕМЕ ОСНОВНЫХ ПРАВ И СВОБОД ЧЕЛОВЕКА И ГРАЖДАНИНА В РОССИЙСКОЙ ФЕДЕРАЦИИ 167 KB
  Право на личную неприкосновенность занимает одно из ведущих мест в системе личных конституционных прав и свобод человека. Личные права и свободы составляют первооснову правового статуса человека и гражданина являются важнейшим элементом всей системы прав и свобод и во многом характеризуют...
67870. СОДЕРЖАНИЕ ПРИНЦИПОВ НОРМАТИВНО-ПРАВОВОГО РЕГУЛИРОВАНИЯ НАЛОГОВЫХ ОТНОШЕНИЙ 106 KB
  Принципы регулирования налоговых правоотношений это основополагающие и руководящие идеи ведущие положения определяющие начала правового регулирования налогообложения. Поэтому основные принципы налоговых правоотношений одновременно выступают принципами налогового права.
67871. ФОРМИРОВАНИЕ ЗАКОНОДАТЕЛЬНОГО ОРГАНА ЯПОНИИ 65.5 KB
  По Конституции обе палаты обладали одинаковыми правами. Однако на практике палата пэров играла большую роль, т.к. она состояла из членов императорской фамилии, титулованной аристократии и финансовой знати. Влиятельность ее была гораздо выше...
67872. ПРАВОВОЙ СТАТУС И МЕСТО В СИСТЕМЕ ТАМОЖЕННЫХ ОРГАНОВ СЛУЖБЫ КОНТРОЛЯ СОБЛЮДЕНИЯ ЗАКОНОДАТЕЛЬСТВА В ТАМОЖЕННОМ ДЕЛЕ ФТС 114.5 KB
  В общем виде систему таможенных органов можно представить как обусловленную функциональной общностью единством целей и задач непосредственное осуществление таможенного дела совокупность таможенных органов. Она объединена функциональным единством органов...
67873. КОНСТИТУЦИОННЫЕ ГАРАНТИИ ПРАВ И СВОБОД ЧЕЛОВЕКА И ИХ ВЛИЯНИЕ НА ФОРМИРОВАНИЕ УГОЛОВНОЙ ПОЛИТИКИ РОССИЙСКОГО ГОСУДАРСТВА 134 KB
  Уголовная политика является составной частью социальной политики любого государства. С содержательной стороны она представляет собой такое направление политики которое определяется программой борьбы с преступностью и причинами ее порождающими...
67874. СОВРЕМЕННЫЕ ТЕНДЕНЦИИ ИЗМЕНЕНИЯ ЗАКОНОДАТЕЛЬСТВА ОБ АДВОКАТУРЕ РОССИИ 94 KB
  Адвокаты впервые получили «собственный» федеральный закон, на основе которого создана общероссийская некоммерческая организация — Федеральная палата адвокатов России, объединившая региональные адвокатские палаты; помимо традиционных юридических консультаций и коллегий адвокатов признан...
67875. ПРЕДВАРИТЕЛЬНЫЕ ЗАМЕЧАНИЯ К РЕГЛАМЕНТУ ПАЛАТЫ ОБЩИН ПАРЛАМЕНТА ВЕЛИКОБРИТАНИИ 2.86 MB
  По заказу редакции журнала Право и жизнь был подготовлен юридически точный но неофициальный перевод Регламента палаты Общин Парламента Великобритании. Иными словами Регламент не связан с каждым созывом палаты Парламента как в России а является стабильным несмотря на многочисленные...
67876. ПРАВОВЫЕ ОСНОВЫ ОТВЕТСТВЕННОСТИ КРЕДИТНЫХ ОРГАНИЗАЦИЙ ЗА НЕИСПОЛНЕНИЕ РЕШЕНИЯ НАЛОГОВОГО ОРГАНА О ПРИОСТАНОВЛЕНИИ ОПЕРАЦИЙ ПО СЧЕТАМ НАЛОГОПЛАТЕЛЬЩИКА, ПЛАТЕЛЬЩИКА СБОРА ИЛИ НАЛОГОВОГО АГЕНТА 52.5 KB
  В настоящее время правовые основы юридической ответственности кредитных организаций за неисполнение решения налогового органа о приостановлении операций по счетам налогоплательщика плательщика сбора или налогового агента установлены положениями...
67877. ОБ ОСОБЕННОСТЯХ ПРЕПОДАВАНИЯ ФИНАНСОВОГО ПРАВА 29.5 KB
  Финансовое право представляет собой одну из отраслей публичного права и в этом качестве сближается с конституционным и административным правом. Финансовое право отличает от других отраслей публичного права то что отношения составляющие его предмет являются властно имущественными.