Средства создания HTML-документов
Понятие о средствах создания HTML-документов, научить их на практике применять свои знания, воспитать настойчивость, наблюдательность, развить логическое и абстрактное мышление.
Объяснение нового материала.
Для создания web-страниц служит ¬ ться гипертекстовыми редакторами, например, HotMetalPRO, Hot Dog Professional, Netscape Editor, webedit, HTMLWriter, HTML Assistant, HTMLed, где используется язык HTML-Hyper Text Markup Language (язык для разметки гипер-текстовых документов). Современные редакторы, такие как FrontPage, Dream Viewer, MS Word и т.д., позволяют создавать web-страницы методом конструирования, т.е. без применения кодов языка HTML. Они генерируют код автоматически.
Мы будем изучать два способа создания web-страницы: с помощью языка HTML; методом визуального конструюван ¬ ния средствами программ MS Word и FrontPage.
Рассмотрим первый способ. Для подготовки html-файла можно использовать текстовый редактор NotePad или любой другой, что позволяет готовить файлы в текстовом фор ¬ мате. После написания html-файл нужно сохранить на диске с некоторой названием с расширением названия htm или html.
Пример 1. Структуру html-файла продемонстрируем с помощью текста, где некоторое лицо рассказывает о себе:
<HTML> <!-Это файл filel.htm ->
<HEAD>
<TITLE> Название окна web-страницы </ TITLE>
</ HEAD>
<BODY Параметри>
<!-Далее идет текст, например, такой ->
Меня зовут Светлана. Мне 16 лет.
Я хочу стать web-дизайнером.
Это моя первая web-страница. Здесь я могу писать любой текст, например, о себе и мои интересы. Позже я научусь вставлять фотографии, картинки, звук, видеоизображение путем ссылки на соответствующие графические, звуковые видеофайлы. Я сохраню этот файл на диске и открою его в браузере. Моя страница еще не красивая и не интересна. Но скоро я научусь делать интересные web-страницы. разработка сайта
Я расположу файл на сервере, и мою страницу змо ¬ гут увидеть в разных концах света.
</ BODY>
</ HTML>
Открыв такой файл в браузере, увидим web-страницу, где сведения об этом лице будут размещены несколько иначе, чем в файле: весь текст размещен в одном абзаце выровнен к левому краю, нет отступа.
Служебные слова, приведенные большими буквами, изучать-мемо дальше. их можно писать также строчными буквами.
Команды языка HTML называется ¬ ются тегами. Теги бывают одинарными и парными. Большинство тегов парные, как, например, тег определение html-файла: HTML> … </ HTML>. Такие теги называются иначе кон ¬ контейнеры. Контейнер может содержать текст и другие теги.
Парные теги обозначающие начало и конец области действия от ¬ ветственно команды. Теги записывают в угловых скобках. Тег, открывающий область действия, имеет косую черту. Не забывайте ее писать, иначе тег работать неправильно.
Тег может содержать параметры, которые пользователь записывает в первом блоке тега через пробел или с новой строки, на ¬ пример, <BODY TEXT=»red»> …</ BODY>. Нечисловые значения параметров принято записывать в кавычках.
В середине пары тегов <HEAD> …</ HEAD> описывают по-головок документа. Главная часть заголовка документа — заголовок Windows-окна, пишут в середине пары тегим <TITLE> …</ TITLE>. Остальные элементы заголовка изучать позже.
Тег <! — Текст -> обозначает комментарий. Текст внутри этого тега выводиться на экран не будет Комментарии можно писать также в середине парного тега <COMMENT> текстовый комментарий </ COMMENT>.
Замечания. Во многих книгах вместо слова пара ¬ метр употребляют термин атрибут, а одинарный или парный теги называют элементом, например, элемент BODY т.д. И
- Элемент (тег) BODY. В середине пары тегов <BODY па«| paMeTpn> …</ BODY> записывают весь текст страницы. Этот текст отображается в окне браузера.
Чтобы на экране отобразить обычным способом стандартный текст, ни программирования не требуется — достаточно набрать нужный текст. Если же дизайнер хочет подать текст специально, чтобы он выглядел лучше, в текст применяют теги форматирования. При этом, в частности, и заключается суть программирования на языке HTML.
Рассмотрим основные параметры тега BODY:
BACKGROUND = «d: myweb picturel. Ipj» Задает путь к картинке
для фона
BGCOLOR = «white» Задает белый цвет фона, если не используется фон-картинка
BGPROPERTIES = «fixed» Фоновое изображение не прокручивается
TEXT = «black» Задает цвет текста (здесь черный) на странице
Другие параметры, касающиеся способов отражены гиперссылок (LINK, VLINK, ALINK), изучать позже
- Форматирование текста для web-страниц. Рассмотрим теги, используемые для форматирования текста.
Теги форматирования символов текста (они парные):
<В> текст </ В> Толстый шрифт
<И> текст </ И> Шрифт — курсив
<SUB> Текст </ SUB> Нижний индекс. Например, чтобы получить выражение Н2О, пишут H <SUB> 2 </ SUB> 0
<SUP> Текст </ SUP> Верхний индекс, например, Iа улица, а2
<BIG> Текст </ BIG> ВЕЛИКИЙ шрифт
<SMALL> Текст </ SMALL> Малый шрифт
<EM> Текст </ ЭМ> выделен курсивом текст (то же, что тег I)
<B> <I> Текст </ Их / В> Толстый курсив. Этот
пример демонстрирует применение принципа вложения тэгов
Теги для размещения текста (они одинарные):
<Р> Этот тег означает начало нового абзаца. Его можно записывать в конце предыдущего. На ¬ шагнет после тега <Р> предложение начинаться с нового, выровненного к левому краю абзаца без отступа. Между абзацами будет пустая строка. Заметим, что тег <Р> может исполь-ваться как парный: <Р> текст абзаца </ Р>
<BR> Следующий за этим тегом текст будет приведен в новой строке без пропуска строки
<HR> В строке будет проведена горизонтальная линия
- Заголовки и тэги выравнивания. Заголовок — отдельный вид абзаца. Есть шесть видов заголовков, которые отличаются разме ¬ рами символов:
Теги Результат на экране
<Н1> Заголовок 1 </ H1> Заголовок 1
<Н2> Заголовок 2 </ Н2> Заголовок 2
<НЗ> Заголовок 3 </ Н3> Заголовок 3
<Н4> Заголовок 4 </ Н4> Подраздел 4
<Н5> Заголовок 5 </ Н5> Подраздел 5
<Н6> Заголовок 6 </ Н6> Заголовок 6
Заголовок по умолчанию выравнивается к левому краю окна. Если выравнивание заголовка или иного элемента странице нужно задать явно, то используют теги выравнивания:
<CENTER> Элемент </ CENTER> Выравнивание к центру
<LEFT> Элемент </ LEFT> Выравнивание к левому краю
<RIGHT> Элемент </ RIGHT> Выравнивание к правому краю
Замечания. Теги заголовков не стоит использовать для создания обычных абзацев с разными размерами шрифта.
Пример 2. Рассмотрите образец форматирования текста ДЛЯ web-страницы с рассказом некоторой лица о себе.
<HTML> <!-Это файл file2.htm ->
<HEAD>
<TITLE> My web-page </ TITLE>
</ HEAD>
<BODY BGCOLOR =»yellow» TEXT = «navy»>
<CENTER> <H1> Привет! </ Н1>
<H2> Меня зовут Светлана </ Н2> </ CENTER>
<HR>
<H3> Мне 16 лет </ НЗ>
<Н4> Я хочу стать web-дизайнером </ Н4>
<HR>
Это моя <В> друга </ В> попытка создать web-страницу. Я
уже умею пользоваться заголовками, вставлять линии, форматировать текстовые абзацы. Позже я научусь вставлять <1> фотографии, картинки, звук, видео </ 1> путем ссылки на соответствующие
графические, звуковые или видео файлы.