Навигация:

Главная Случайная страница Обратная связь ТОП Интересно знать Избранные Новые материалы

Топ:

Определение места расположения распределительного центра: Фирма реализует продукцию на рынках сбыта и имеет постоянных поставщиков в разных регионах. Увеличение объема продаж...

Характеристика АТП и сварочно-жестяницкого участка: Транспорт в настоящее время является одной из важнейших отраслей народного хозяйства...

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

Интересное:

Наиболее распространенные виды рака: Раковая опухоль — это самостоятельное новообразование, которое может возникнуть и от повышенного давления...

Финансовый рынок и его значение в управлении денежными потоками на современном этапе: любому предприятию для расширения производства и увеличения прибыли нужны...

Что нужно делать при лейкемии: Прежде всего, необходимо выяснить, не страдаете ли вы каким-либо душевным недугом...

Дисциплины:

Автоматизация Антропология Археология Архитектура Аудит Биология Бухгалтерия Военная наука Генетика География Геология Демография Журналистика Зоология Иностранные языки Информатика Искусство История Кинематография Компьютеризация Кораблестроение Кулинария Культура Лексикология Лингвистика Литература Логика Маркетинг Математика Машиностроение Медицина Менеджмент Металлургия Метрология Механика Музыкология Науковедение Образование Охрана Труда Педагогика Политология Правоотношение Предпринимательство Приборостроение Программирование Производство Промышленность Психология Радиосвязь Религия Риторика Социология Спорт Стандартизация Статистика Строительство Теология Технологии Торговля Транспорт Фармакология Физика Физиология Философия Финансы Химия Хозяйство Черчение Экология Экономика Электроника Энергетика Юриспруденция

Интерфейс редактора HTMLPad и его возможности

2020-04-03

167

0.00 из 5.00 0 оценок

Заказать работу

⇐ ПредыдущаяСтр 2 из 4Следующая ⇒

Редактор HTMLPad представляет все возможности для редактирования простых текстов.

Команда Файл – Новый документ позволит включить в документ теги, определяющие структуру документа.

По умолчанию программа присваивает документу имя c:\ untitled. htm.

Команда Файл – Сохранить как позволит сохранить документ под нужным именем.

Расширение обязательно должно быть. htm или. html!

В пункте меню Вид собраны команды, позволяющие просмотреть документ в программе-просмотрщике (браузере). Просмотреть документ в программе Internet Explorer можно, если щелкнуть по кнопке

В пунктах меню Стиль и Вставка можно выбрать необходимые теги для разметки документа.

Наиболее часто используемые теги вынесены на панель инструментов в виде кнопок.

Рассмотрим пример.

Пусть необходимо разметить следующий текст

Информация – это совокупность сведений об окружающем нас мире

Технология использования редактора HTMLPad:

1. откроем редактор;

2. Файл – Новый документ. В документ будет вставлена структура.

3. Между тегами <TITLE> </TITLE> напишем Информатика

<TITLE> Информатика </TITLE>

4. Между тегами <BODY> </BODY> напишем фразу: "Информация – это совокупность сведений об окружающем нас мире".

<BODY>

Информация – это совокупность сведений об окружающем нас мире.

</BODY>

5. Выделим слово Информация жирным. Для этого необходимо выделить слово Информация, затем выбрать команду Стиль – Полужирный. Слово будет заключено между тегами <B> Информация </B>.

6. Текст должен иметь вид

7. Просмотрите созданный документ и сохраните в своей папке под именем Информация. html. Должно получиться следующее

СИНТАКСИС HTML

Язык HTML – это язык разметки гипертекста. Разметка заключается в том, что в обычный текст добавляются специальные команды HTML, описывающие, как должен выглядеть данный текст. Язык HTML представляет собой коллекции управляющих символов – тегов (дескрипторов), с помощью которых можно добавлять и форматировать элементы документа. Для настройки внешнего вида и функционирования элемента страницы устанавливаются его атрибуты. HTML постоянно развивается, дополняется новыми элементами.

Теги бывают одиночный и парный, начальный и конечный (открывающий и закрывающий).

Например:

< br > - одиночный тег

< html > и </ html >; < head > и </ head > - парные теги.

Теги состоят из следующих друг за другом в определенном порядке элементов:

· левой угловой скобки <;

· необязательного символа / (слэш), который означает, что тег является конечным тегом, закрывающим некоторую структуру, например </ title >;

· имени тега, например html;

· необязательных параметров (атрибутов). Теги могут иметь один или несколько параметров, дающих дополнительную информацию о том, как браузер должен обрабатывать текущий тег. Параметры записываются внутри тега и разделяются пробелами. В некоторых случаях значение не требуется, важен сам факт указания параметра. Например, <body bgcolor= " #008000 " >;

· параметр тега состоит из имени, знака равенства и значения, которое задается строкой символов. Значения атрибутов обычно заключаются в кавычки, например align =" center ". Однако если эти значения используют только символы латинского алфавита, цифры и дефисы, то кавычки можно опустить. При наличии в значении параметра пробелов кавычки также обязательны.

· правой угловой скобки >.

Большинство тегов спарены: за открывающим тегом следует соответствующий ему закрывающий тег, а между ними содержится текст или другие теги. В таких случаях два тега и часть документа, заключенная между ними, образуют блок, называемый элементом HTML. Некоторые теги, например <hr>, являются одиночными и для них закрывающий тег не применяется. Такие теги сами по себе являются элементами HTML.

Для имен тегов можно использовать и прописные и строчные буквы. Язык HTML не различает большие и малые буквы, так что теги <HEAD>, <head> и <Head> эквивалентны.

В любом документе HTML существуют элементы, определяющие его структуру – это структурные теги. Взаимное расположение структурных элементов HTML, HEAD, TITLE и BODY должно быть стандартным на любой странице (в тех случаях, когда не используются фреймы).

СТРУКТУРА HTML-ДОКУМЕНТА

Для подготовки документов WWW используется HTML - язык разметки гипертекста (HyperText Markup Language).

Под разметкой понимается вставка в текст специальных кодов (управляющих символов).

Гипертекст – это метод представления текста, изображений, звука, связанных друг с другом произвольной связью.

Основа используемой в HTML-технологии состоит в том, что в обычный текстовый документ вставляются управляющие символы – теги. В результате чего получаем Web‑страницу. Код HTML-документа записывается в обычном текстовом файле. Подготовить и отредактировать его можно при помощи любого текстового редактора, позволяющего сохранять неформатированный текст (например, Блокнота).

Web‑браузер получает документ, интерпретирует команды HTML и обеспечивает наилучшее представление информации на экране пользователя.

Любой HTML-код (или HTML-документ) состоит из трех частей:

1. Строки, содержащей информацию о версии HTML.

2. Блока заголовка документа.

3. Тела документа, содержащего непосредственно отображаемую информацию.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> Untitled </TITLE> </HEAD> <BODY> </BODY> </HTML>

Прежде всего надо указать на то, что данный документ описывает Web‑страницу на языке HTML. Для этого текст начинается с тега <HTML>. Для него требуется закрывающий тег </HTML>, обозначающий конец документа.

Далее идет тег заголовка <HEAD> </HEAD>. Внутри тега заголовка записывается информация о документе (его название, описание, таблица кодировки и т.д.).

Тег описания (тела страницы) <BODY> </BODY> определяет информационную часть описания страницы. В ней располагаются текст, рисунки и другие элементы.

Тег <TITLE> </TITLE>, расположенный в заголовке страницы, указывает название страницы, которое большинство браузеров отображают в заголовке окна.

Любой действительный документ HTML должен содержать информацию о версии языка HTML, используемого в документе.

Существует три типа документов:

1. HTML 4.0 Strict – такой документ не должен содержать отмененных тегов и атрибутов (параметров) и не должен быть контейнером для фреймов.

2. HTML 4.0 Transitional – может содержать все то, что и HTML 4.0 Strict, а также отмененные элементы и атрибуты.

3. HTML 4.0 Frameset – указывает на то, что данный документ является контейнером для набора фреймов.

Пример 1. Создание простейшего документа HTML.

1. Открыть текстовый редактор Блокнот.

2. Набрать в Блокноте следующий текст:

<HTML>

<HEAD>

<TITLE> Мой первый документ HTML</TITLE>

</HEAD>

<BODY>

Всем привет!

</BODY>

</HTML>

3. Сохранить набранный текст в свою рабочую папку под именем Пример1.htm или Пример1.html.

4. Загрузить файл Пример1.html в программу просмотра HTML-документов (Web-страниц) Internet Explorer. (Два раза щелкнуть по значку файла).

5. Откроется окно программы с просматриваемым файлом.

6. В заголовке окна программы отображается заголовок HTML-документа, а в рабочей области – тот текст, который был введен в тело документа.

7. Задание для самостоятельной работы:

- создать HTML-документ, где в качестве заголовка документа будет ваше имя и фамилия, а в качестве тела документа – произвольный текст о себе.;

- сохранить файл под именем Сам1.html;

- просмотреть созданный файл в Internet Explorer;

- сделать выводы по проделанной работе.

Тег <BODY> заключает в себе гипертекст, который определяет собственно Web-страницу. Эта часть отображается браузером.

Внутри тега <BODY>можно использовать все элементы, предназначенные для дизайна Web-страницы.

Тег <BODY> имеет параметры (атрибуты), которые обеспечивают установки для всей страницы в целом. (См. таблицу "Теги, определяющие структуру HTML-документа").

Один из самых полезных для дизайна параметров – параметр, определяющий фон страницы – bgcolor. Параметр bgcolor задает цвет фона Web-страницы. Параметр background определяет адрес файла, который будет использован в качестве фона документа. Параметр text определяет цвет текста.

Пример 2. Создание HTML -документа с использованием параметров элемента BODY

1. Скопировать к себе в папку файл с именем mixedroses_tn.jpg

2. Запустить программу Блокнот или любой HTML-редактор.

3. Набрать следующий текст:

<HTML>

<HEAD>

<TITLE> Мой второй документ HTML</TITLE>

</HEAD>

Поздравляем!

</BODY>

</HTML>

4. Сохранить файл под именем Пример2.html.

5. Просмотреть созданный файл в браузере.

6. Сделать выводы.

7. Отредактировать созданный файл следующим образом: заменить

<BODY background="mixedroses_tn.jpg"> на

8. Сохранить файл под именем Пример2_2.html.

9. Просмотреть созданный файл в браузере.

10. Сделать выводы.

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

Текст – это основное наполнение Web-страниц. Легкость и удобство восприятия текстовой информации определяются в основном тремя факторами:

1. стилем изложения;

2. соблюдением правил орфографии и пунктуации;

3. формой визуального представления текстовой части документа.

Существуют два способа форматирования (разметки) текста: физическая и логическая разметка. При физической разметке указывается точный вид каждого фрагмента текста. При логической разметке каждой части документа ставится в соответствие некоторый логический признак. Например, некоторые слова имеют признак "выделить".

Рассмотрим теги физического форматирования текста.

Один из способов форматирования текста Web-страницы – это деление на абзацы.

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

Специфика тега <р> заключается в том, что после текста, который находится в его пределах, пустая строка добавляется автоматически.

Рассмотрим пример:

Введем следующий HTML-код в редакторе

<HTML>

<HEAD>

<TITLE> Пример использования тега абзаца </TITLE>

</HEAD>

<BODY>

<P>Я памятник себе воздвиг нерукотворный,</P>

<P>К нему не зарастет народная тропа.</P>

<P>А.С. Пушкин</P>

</BODY>

</HTML>

В некоторых случаях необходимо, чтобы каждая следующая строка текста находилась сразу под предыдущей. Для этих целей используют тег < br >. Это переход на новую строку, но не на новый абзац! При переходе на новую строку сохраняется выравнивание. Тег < br > одиночный.

Рассмотрим пример:

<HTML>

<HEAD>

<TITLE> Пример использования тега принудительного перехода на другую строку </TITLE>

</HEAD>

<BODY>

<P>В первом куплете используется тег абзаца</P>

<P>У Танюши дел немало</P>

<P>У Танюши много дел:</P>

<P>Утром брату помогала -</P>

<P>Он с утра конфеты ел.</P>

<P>Во втором куплете используется тег принудительного разрыва строки</P>

<P>Вот у Тани сколько дела:<BR>

Таня ела, чай пила,<BR>

Села, с мамой посидела,<BR>

Встала, к бабушке пошла.<BR></P>

</BODY>

</HTML>

В окне браузера текст Web-страницы, который следует за тегом < br >, будет начат с новой строки.

В HTML нет средств для создания абзацного отступа, поэтому для удобочитаемости текста между абзацами браузер вводит пустую строку.

Закрывающий тег </р> необязателен

Тег <р> не должен быть пустым (т.е. должен содержать какой-либо текст, рисунок и т.д.), т.к. браузер игнорирует пустые абзацы.

Чтобы вставить пустую строку надо использовать < p >& nbsp </ p >.

Обычно абзацы выравнивают по левому краю листа, что соответствует

атрибут align указывает другой тип горизонтального выравнивания.

<p align = “center”>

<p align = “right”>

<p align = “justify”>

Рассмотрим пример

<HTML>

<HEAD>

<TITLE> Пример использования тега абзаца </TITLE>

</HEAD>

<BODY>

<P ALIGN=Center>Жизнь - бесконечное повторение.</P>

<P ALIGN=Right>Атомас Далчев</P>

</BODY>

</HTML>

Задания для самостоятельной работы:

1. Используя теги абзаца и принудительного перехода на другую строку, получите текст следующего вида:

ГРИБОЕДОВ АЛЕКСАНДР СЕРГЕЕВИЧ (1795 – 1829) драматург, поэт, дипломат А.С. Грибоедов родился в Москве в родовитой дворянской семье. Грибоедов знал 9 языков и был талантливым музыкантом. В дни Отечественной войны 1812 года Грибоедов добровольцем вступает в гусарский полк. После войны он занимается литературной работой, совмещая ее с дипломатической службой.

2. Используя теги абзаца и принудительного перехода на другую строку, получите текст следующего вида:

Часто возникает необходимость поместить на страницу заголовок раздела или страницы в целом. Для этого используются теги заголовков. Можно задать заголовки шести уровней (размеров) <H1>…<H6>.

Рассмотрим пример.

Введем редакторе HTML-код.

<HTML>

<HEAD>

<TITLE> Заголовки </TITLE>

</HEAD>

<BODY>

<H1>Это заголовок первого уровня</H1>

<H2> Это заголовок второго уровня </H2>

<H3> Это заголовок третьего уровня </H3>

<H4> Это заголовок четвертого уровня </H4>

<H5> Это заголовок пятого уровня </H5>

<H6> Это заголовок шестого уровня </H6>

</BODY>

</HTML>

Затем просмотрим в браузере.

В языке HTML существует специальный тег < HR >, который описывает горизонтальную линию. Внешний вид горизонтальной линии контролируется следующими параметрами:

- size – толщина линии (по умолчанию – 2 пиксела);

- width – протяженность линии в пикселах (по умолчанию – растянута на всю ширину окна браузера);

- align – выравнивание линии на странице влево, вправо, по центру. Этот параметр применим только в том случае, если установлен параметр width.

- color – цвет линии.

Рассмотрим пример:

Введем в редакторе HTML-код:

<HTML>

<HEAD>

<TITLE> Горизонтальная линия </TITLE>

</HEAD>

<BODY>

<H1> Фамилия </H1>

<H3 ALIGN=Right> Отчество </H3>

<HR>

</BODY>

</HTML>

Просмотрите документ в браузере и сделайте выводы, что дает разметка тегом <HR> с различными параметрами.

⇐ Предыдущая 123 4 Следующая ⇒

Поделиться с друзьями:

Поперечные профили набережных и береговой полосы: На городских территориях берегоукрепление проектируют с учетом технических и экономических требований, но особое значение придают эстетическим...

История развития хранилищ для нефти: Первые склады нефти появились в XVII веке. Они представляли собой землянные ямы-амбара глубиной 4…5 м...

Историки об Елизавете Петровне: Елизавета попала между двумя встречными культурными течениями, воспитывалась среди новых европейских веяний и преданий...

Типы сооружений для обработки осадков: Септиками называются сооружения, в которых одновременно происходят осветление сточной жидкости...