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

  •  

 

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

19729. ГАСТРОЭНТЕРОЛОГИЯ 203 KB
  ГАСТРОЭНТЕРОЛОГИЯ 1. Гепатопатии Поскольку печень является центральным органом метаболизма в организме поражение ее ткани ведет к нарушению белкового углеводного жирового обмена обмена витаминов и гормонов снижению барьерной способности. Заболевания печени вс
19730. ЭНДОКРИНОЛОГИЯ 96.5 KB
  ЭНДОКРИНОЛОГИЯ К эндокринному аппарату endo внутрь crino выделяю относятся железы внутренней и смешанной секреции а так же диффузная эндокринная система. Кроме этого имеется целый ряд органов которые выполняют эндокринную функцию но у них она не является основно...
19731. ОРГАНЫ РАЗМНОЖЕНИЯ САМКИ. Репродукция 182.5 KB
  ОРГАНЫ РАЗМНОЖЕНИЯ САМКИ Женские половые клетки яйцеклетки производятся в яичниках. Влагалище матка и маточные трубы это те пути по которым проходят сперматозоиды до оплодотворения яйцеклетки. Яичники Этот парный орган находится в брюшной полости суки непос...
19732. Медицинские манипуляции 175 KB
  П/к инъекции Краткое описание цель: Введение лекарственных препаратов посредством шприца в подкожный жировой слой. Практически безболезненна можно вводить достаточно большие объемы жидкости терапевтический эффект проявляется только через...
19733. Монтаж системы отопления и горячего водоснабжения. Монтаж системы вентиляции и кондиционирования воздуха 15.7 KB
  Монтаж системы отопления и горячего водоснабжения. Монтаж системы вентиляции и кондиционирования воздуха Монтаж системы водяного отопления включается в себя: Наличие проектносметной документации прошедшей экспертизу; Комплектацию объекта материалами и обо...
19734. Монтаж котлов. Монтаж блоков и отдельных деталей каркаса. Монтаж барабанов 17.62 KB
  Монтаж котлов. Монтаж блоков и отдельных деталей каркаса. Монтаж барабанов Строительно монтажные работы. Процесс начинается со сборки секций котла. Соединение секций производится при помощи резьбовых или без резьбовых ниппелей. Установка начинается с первой секции ко...
19735. Сборка блоков экранов пароперегревателей и змеевиковых экономайзеров 51 KB
  Сборка блоков экранов пароперегревателей и змеевиковых экономайзеров Блоки пароперегревателя изготавливают с элементами каркаса и опорными приспособлениями обеспечивающими жесткость блоков при их транспортировке. В блоках размещается максимальное количество мелк...
19736. Основные этапы пусковой наладки котельных установок . Технический отчёт по наладке 19.29 KB
  Основные этапы пусковой наладки котельных установок . Технический отчёт по наладке Пусконаладочные работы котельных включают наладку следующего оборудования: наладку оборудования систем топливного хозяйства котельной наладку газового оборудования наладк...
19737. Методика обработки результатов испытаний и составление теплового баланса, составление режимной карты 15.74 KB
  Методика обработки результатов испытаний и составление теплового баланса составление режимной карты Режимная карта составляется для каждого котла. Согласно режимной карте производится эксплуатация водогрейного и или парового котла. Основная функция режимной карты...