14111

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

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

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

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

Русский

2013-05-21

495 KB

6 чел.


УРОК 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

  •  

 

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

46240. Структура лексического значения. Функциональный статус составляющих лексическое значение компонентов (денотативное и сигнификативное содержание значения) 14.17 KB
  Прямое значение слова – это непосредственная связь между звуковым комплексом и явлением действительности. Ядро лексического значения – концептуальное значение: а денотативный аспект выражает отношение содержания слова к предмету который оно означает. б сигнификативный аспект выражает отношение слова к понятию которое стоит за этим словом. г лингвистический аспект определяет место данного слова среди других единиц языка.
46241. Структуры. Действия со структурами. Передача структур в функции 14.1 KB
  Объявление структуры следует рассматривать как объявление типа. В C структуры заключают в себе не только данные но и код и относятся к средствам объектноориентированного программирования. Объявление структуры которая хранит сведения о журнале: название год номер.mgzinmg = { Nture 3 1995;Доступ к элементам структуры осуществляется по составному имени:имя_структуры.
46242. Проявление категории вежливости в русском языке. О социальных аспектах культуры речи 14.09 KB
  Проявление категории вежливости в русском языке. Принципу вежливости и его использованию в речи посвящено немало работ. Например Лакофф формулирует принцип вежливости в виде трех правил: не навязывай своего мнения предоставляй собеседнику возможность выбора будь доброжелательным Цель принципа вежливости – поддерживать социальное равновесие и такие социальноречевые отношения которые позволят результативно общаться При выражении вежливости большое значение играет взгляд. Средством выражения вежливости являются также модуляции голоса.
46243. THE STATIVE 14.06 KB
  Unlike such clsses of words s nouns djectives verbs nd dverbs the number of sttives functioning in English is limited. There re bout 30 stble sttives used both in colloquil nd in forml style: frid live like.Semnticlly sttives fll into five groups describing vrious sttes of persons or nonpersons:1.^ From the point of view of their morphologicl composition the clss of sttives is homogeneous tht is ll of them hve specil mrker the prefix : sleep live lone fire etc.
46244. Критический анализ ранних работ Ж.Пиаже. Л.С.Выготский: теоретический, экспериментальный и методологический анализ ранних идей Ж.Пиаже. Ответ Ж.Пиаже Л.С.Выготскому 14.05 KB
  Пиаже считал что детская речь эгоцентрична прежде всего потому что ребёнок говорит лишь со своей точки зрения и не пытается стать на точку зрения собеседника. Выготский писал: Согласно учению Пиаже эгоцентрическая речь ребёнка представляет собой прямое выражение эгоцентризма детской мысли который в свою очередь является компромиссом между изначальным аутизмом детского мышления и постепенной его социализацией что приводит постепенному снижению на нет эгоцентризма. По своей функции эгоцентрическая речь не может быть ничем иным...
46247. Классификация дооржно-ремонтных работ, организация содержания и ремонта дорог 13.87 KB
  Текущий ремонт АД 3.Капитальный ремонт АД Содержание АДкомплекс профилактических работ с учетом сезона выполняемый в течении года по уходу за АД сооружениями и полосой отвода по выявлению и устранению незначительных по объему повреждений и дефектов а также по предотвращению их развития . Состав работ устанавливается по результам обследования фактического состояния дороги или по результату осмотров Текущий ремонт Это комплекс или отдельные виды работ выполняемых с целью предотвращения интенсивного износа покрытий и развития дефектов...
46248. Основные закономерности развития ребенка в младенческом возрасте 13.83 KB
  Основные закономерности развития ребенка в младенческом возрасте. Социальная ситуация психического развития ребенка – ситуация мы Л. Ведущий тип деятельности: эмоционально непосредственное общение предметом которого для ребенка является взрослый человек. Дефицит общения в младенческом возрасте оказывает отрицательное влияние на дальнейшее психическое развитие ребенка Эриксон: базовое недоверие к миру.