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

  •  

 

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

29996. Увеличение выпуска продукции Деталь Валик 8ТС. 200.195 411.53 KB
  Определяем число запусков в году: 2.6 13 293 Определяем массу проектируемой заготовки: m3= Р V 106 кг. где Р = 785 кг дм3 плотность материала; V объем заготовки; Определяем коэффициент использования металла проектируемой заготовки по формуле: Определяем стоимость проектируемой заготовки: где Ц1=9540 руб. Значения и определяем по таблицам 2 и 8 [9] заготовка = 240 мкм.
29997. Гіпсова скульптура у вигляді жінки «Каріатиди» стилю Українського бароко 386.36 KB
  Використана література Вступ Вступ Скульптура лат. За змістом і функціям скульптура ділиться на монументальнодекоративну станкову і так звану скульптуру малих форм. Монументальнодекоративна Скульптура розрахована на конкретне архітектурнопросторове або природне оточення. Монументальнодекоративна скульптура покликана конкретизувати архітектурний образ доповнювати виразність архітектурних форм новими відтінками.
29998. Туристично-рекреаційний потенціал Мальти 742.06 KB
  Туристичнорекреаційний потенціал Мальти Мальта країна з історією що іде коренями в глибоке минуле. Мальта – маленька острівна країна в центральній частині Середземного моря з дуже вигідним стратегічним положенням. Мальта входить до числа найгустіше заселених країн світу. Мальта – найбільшому з островів – і має дві великі глибоководні бухти.
29999. Разработка автоматизированного электропривода шлифовального станка 127.05 KB
  В некоторых тяжелых станках применяется автоматическое регулирование скорости вращения двигателя в диапазоне примерно 2:1 с целью поддержания постоянства скорости резания. Поэтому при сравнительно больших диаметрах шлифовальных кругов до 1000 мм скорость вращения шлифовального шпинделя ниже или равна скорости вращения приводного двигателя около 950 об мин. Скорости вращения этих двигателей 24000 : 48000 об мин а при малых диаметрах шлифовальных кругов доходят до 150000 : 200000 об мин. При скоростях вращения до 48000 об мин ротор...
30001. Анализ и структура активных операций, проводимых в Московском филиале ОАО АКБ «Росбанк», а также технология их осуществления 893.82 KB
  Успех того или иного банка все больше зависит от эффективного управления постоянного повышения конкурентоспособности. Поэтому вопрос управления активными и пассивными банковскими операциями в современных условиях приобретает особую остроту поскольку от того насколько эффективно используются ресурсы банка зависит основной финансовый показатель деятельности банка прибыль. Опыт как мировой так и отечественной практики показывает что недооценка управления в банках приводит к негативным последствиям в их деятельности. В соответствии со...
30002. ОЦЕНКА ВЛИЯНИЯ АНТРОПОГЕННОГО ФАКТОРА НА ПРОСТРАНСТВЕННУЮ ДИНАМИКУ ГИДРОХИМИЧЕСКИХ ПАРАМЕТРОВ В РЕКЕ МОСКВА 8.72 MB
  Антропогенное загрязнение водных ресурсов Московского региона в последнее время приобретает черты неуправляемого и неконтролируемого процесса, предоставляющего серьёзную угрозу здоровью населения. Загрязнение вод нарушает экологическую устойчивость водной среды, приносит значительный экономический ущерб народному хозяйству.
30003. Организация ресторана. Роль повара – кондитера на предприятии общественного питания 956.86 KB
  Пищевая ценность блюд. Соблюдение санитарных требований правил личной гигиены при приготовлении блюд. Бракераж готовых блюд. Характер приготовления блюд русской кухни в значительной мере обусловлен особенностям русской печи которая в качестве очага столетиями с 14 века верно служила и богатому и простому народу.
30004. Применение оптимальных способов преобразования и регулирования социальных отношений и процессов в жизнедеятельности людей 118.18 KB
  Политические и социально-экономические катаклизмы, вызванные резким переходом страны от социалистической системы хозяйствования к капиталистической, создали благоприятную почву для роста преступности, коррупции, разрыву между доходами богатых и бедных