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

  •  

 

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

83861. Лечение пневмоторакса 50.16 KB
  при повреждении париетальной плевры: внутренний при ране лёгкого или повреждении бронха т. при повреждении висцеральной плевры. закрытый однократное попадание воздуха и разобщение полости плевры с атмосферой; открытый постоянное сообщение плевральной полости с атмосферным воздухом во время вдоха воздух через рану проникает в плевральную полость а при выдохе выходит наружу: клапанный поступление воздуха только в плевральную полость изза наличия клапана нарастающее накопление воздуха в плевральной полости. Этапы помощи при...
83862. Долевое и сегментарное строение лёгких. Трахея и главные бронхи. Особенности лёгочных артерий и лёгочных вен 282.9 KB
  Длина трахеи 915 см ширина 1527 см. Место разветвления трахеи на два бронха получило название бифуркации трахеи. С внутренней стороны место разделения представляет собой вдающийся в полость трахеи полулунный выступ – киль трахеи. Главные бронхи асимметрично расходятся в стороны: правый более короткий 3 см но более широкий отходит от трахеи под тупым углом над ним залегает непарная вена; левый бронх длиннее 45 см более узкий и отходит от трахеи почти поп прямым углом над ним проходит дуга аорты.
83863. Резекция лёгкого. Хирургическая тактика при раке и доброкачественных опухолях лёгкого 50.4 KB
  Техника резекции лёгкого заднебоковой доступ; пневмолиз выделение из сращений; вскрытие медиастиналыюй плевры; обработка корня: последовательно вначале артерию затем вену и в конце бронх при раке вену артерию бронх; удаление легкого; проверка герметичности культи бронха физраствор в плевральную полость смотрят наличие пузырьков воздуха при раздувании; дренаж в плевральную полость; ушивание раны. Радикальные операции на легких выполняют при раке легкого туберкулезе легких бронхоэктатической болезни хронической пневмонии...
83864. Пункция перикарда и ушивание раны сердца. Техника выполнения 46.5 KB
  Пункция перикарда Показания: с диагностической или лечебной целями преимущественно при выпотных перикардитах. Ушивание раны сердца оперативный доступ обычно по ходу раневого канала; продольное вскрытие перикарда широким разрезом кпереди от диафрагмального нерва; наложение узловых или Побразных швов на рану; освобождение полости перикарда от сгустков крови; ушивание перикарда редкими швами.
83865. Коронарные артерии и проводящая система сердца. Принципы операций на коронарных артериях, шунтирование и стентирование 54.08 KB
  Коронарные артерии . interventriculris posterior – конечная ветвь правой коронарной артерии проходит в одноимённой борозде; r. interventriculris posterior конечная ветвь левой коронарной артерии проходит в одноимённой борозде.
83866. Хирургическая анатомия пищевода. Операции на пищеводе 66.98 KB
  Хирургическая анатомия пищевода Отделы: шейный грудной и брюшной. Синтопия: Спереди пищевода лежат перстневидный хрящ и трахея; сзади позвоночник и длинные мышцы шеи: по бокам нижние полюсы боковых долей щитовидной железы и общие сонные артерии. Правый возвратный нерв проходит позади трахеи по боковой поверхности пищевода.
83867. Строение брюшной стенки – классификация мышц живота, кровоснабжение, иннервация. Формирование влагалища прямой мышцы живота. Лапаротомия 53.51 KB
  Мышечные пучки идут в поперечном направлении. Линия перехода мышечной части поперечной мышцы живота в сухожильное растяжение называется полулунной линией (linea semilunaris) или спигелиевой линией. Самые нижние мышечные пучки внутренней косой мышцы живота и поперечной мышцы живота, сопровождая семенной канатик, образуют мышцу, поднимающую яичко...
83868. Грыжа: определение, составные части грыжи, классификация грыж. Принципы операций при грыжах передней брюшной стенки, основные этапы операции 45.85 KB
  Принципы операций при грыжах передней брюшной стенки основные этапы операции. Наружные грыжи: 1 паховая грыжа косая и прямая; 2 бедренная грыжа; 3 грыжа белой линии живота; 4 пупочная грыжа; 5 грыжа спигелиевой полулунной линии; 6 поясничная грыжа; 7 запирательная грыжа; 8 послеоперационная грыжа. Внутренние грыжи: 1 грыжа двенадцатиперстнотощего кармана; 2 грыжа сальниковой сумки; 3 ретроцекальная грыжа; 4 различные виды диафрагмальных грыж. По клиническим признакам: 1 вправимые; 2 невправимые; 3 ущемленные: ущемление...
83869. Строение пахового канала. Складки и ямки задней поверхности передней брюшной стенки. Треугольники паховой области. Косая и прямая паховая грыжа 98.4 KB
  Стенки: 1 верхняя нижние пучки внутренней косой мышцы живота и поперечной мышцы живота; 2 передняя апоневроз наружной косой мышцы живота; 3 нижняя паховая связка утолщенный и загнутый в виде желобка нижний край апоневроза наружной косой мышцы живота; 4 задняя поперечная фасция. Поверхностное паховое кольцо образовано расходящимися медиальными и латеральными ножками апоневроза наружной косой мышцы живота скрепленными межножковыми волокнами закругляющими щель между ножками в кольцо; Глубокое паховое кольцо образовано поперечной...