TYPE фоновый рисунок ячейки цвет фона ячейки выбор символов для выравнивания объединение нескольких столбцов в одной ячейке высота ячейки запрет на перенос слов в ячейке объединение нескольких строк в одной ячейке, выравнивание текста ячейки по вертикали ширина ячейки Создает текстовое поле быстрая клавиша ширина текстового поля неактивное текстовое поле имя текстового поля текстовое поле только для чтения высота текстового поля порядок перехода при нажатии клавиши способ переноса слов в текстовом поле Создает строку сноски таблицы выравнивание текста ячеек по горизонтали цвет фона ячеек выбор символов для выравнивания выравнивание текста ячеек по вертикали Создает строку заголовка таблицы выравнивание текста ячеек по горизонтали цвет фона ячеек выбор символов для выравнивания выравнивание текста ячеек по вертикали Создает заголовок Web-страницы Создает строку таблицы выравнивание текста ячеек по горизонтали цвет фона ячеек выбор символов для выравнивания выравнивание текста ячеек по вертикали Выделяет текст одинарным междустрочным интервалом Подчеркивание текста Создает маркированный список тип маркеров8
Приложение 2 Соответствие между номером шрифта и его размером Номер шрифта Размер шрифта в кеглях
9
Приложение 3 Таблица базовых цветов BgColor Именной код / Шестнадцатеричный код Aliceblue F0F8FF Antiquewhite FAEBD7 Aqua 00FFFF Aquamarine 7FFFD4 Azure F0FFFF Beige F5F5DC Bisque FFE4C4 Black Blanchedalmond FFEBCD Blue 0000FF Blueviolet 8A2BE2 Brown A52A2A Burlywood DEB887 Cadetblue 5F9EA0 Chartreuse 7FFF00 Chocolate D2691E Coral FF7F50 Cornflowerblue 6495ED Cornsilk FFF8DC Crimson DC143C Cyan 00FFFF Darkblue 00008B Darkcyan 008B8B Darkgoldenrod B8860B Darkgray A9A9A9 Darkgreen Darkkhaki BDB76B Darkmagenta 8B008B Darkolivegreen 556B2F Darkorange FF8C00 Darkorchid 9932CC Darkred 8B0000 Darksalmon E9967A Darkseagreen 8FBC8F Darkslateblue 483D8B Darkslategray 2F4F4F Darkturquoise 00CED1 Darkviolet 9400D3 deeppink FF1493 Deepskyblue 00BFFF Dimgray Dodgerblue 1E90FF Firebrick B22222 Floralwhite FFFAF0 Forestgreen 228B22 Fuchsia FF00FF Gainsboro DCDCDC Ghostwhite F8F8FF Gold FFD700 Goldenrod DAA520 Gray Green Greenyellow ADFF2F Honeydew F0FFF0 Hotpink FF69B4 Indianred CD5C5C Indigo 4B0082 Ivory FFFFF0 Khaki F0E68C Lavendar E6E6FA Lavenderblush FFF0F5 Lawngreen 7CFC00 Lemonchiffon FFFACD Lightblue ADD8E6
10
Именной код / Шестнадцатеричный код Lightcoral F08080 Lightcyan E0FFFF Lightgoldenrodyellow FAFAD2 Lightgreen 90EE90 Lightgrey D3D3D3 Lightpink FFB6C1 Lightsalmon FFA07A Lightseagreen 20B2AA Lightskyblue 87CEFA Lightslategray Lightsteelblue B0C4DE Lightyellow FFFFE0 Lime 00FF00 Limegreen 32CD32 Linen FAF0E6 Magenta FF00FF Maroon Mediumauqamarine 66CDAA Mediumblue 0000CD Mediumorchid BA55D3 Mediumpurple 9370D8 Mediumseagreen 3CB371 Mediumslateblue 7B68EE Mediumspringgreen 00FA9A Mediumturquoise 48D1CC Mediumvioletred C71585 Midnightblue Mintcream F5FFFA Mistyrose FFE4E1 Moccasin FFE4B5 Navajowhite FFDEAD Navy Oldlace FDF5E6 Olive Olivedrab 688E23 Orange FFA500 Orangered FF4500 Orchid DA70D6 Palegoldenrod EEE8AA Palegreen 98FB98 Paleturquoise AFEEEE Palevioletred D87093 Papayawhip FFEFD5 Peachpuff FFDAB9 Peru CD853F Pink FFC0CB Plum DDA0DD Powderblue B0E0E6 Purple Red FF0000 Rosybrown BC8F8F Royalblue 4169E1 Saddlebrown 8B4513 Salmon FA8072 Sandybrown F4A460 Seagreen 2E8B57 Seashell FFF5EE Sienna A0522D Silver C0C0C0 Skyblue 87CEEB Slateblue 6A5ACD Slategray Snow FFFAFA Springgreen 00FF7F Steelblue 4682B4 Tan D2B48C Teal Thistle D8BFD8 Tomato FF6347 Turquoise 40E0D0 Violet EE82EE Wheat F5DEB3 White FFFFFF Whitesmoke F5F5F5 Yellow FFFF00 YellowGreen 9ACD32
11
Приложение 4 Специальные символы Именной код Числовой код Символ Описание " " " двойная кавычка & & & амперсанд < < < знак "меньше" > > > знак "больше" неразрывный пробел цент перевернутый знак фунт стерлингов денежная единица иена или юань восклицательный разорванная вертикальная черта параграф умляут знак copyright ª ª ª женский порядковый числитель «««левая двойная угловая скобка знак отрицания место возможного переноса знак зарегистрированной торговой марки верхняя горизонтальная черта градус ± ± ± плюс-минус ² ² ² «в квадрате» ³ ³ ³ «в кубе» знак ударения µ µ µ микро символ параграфа
12
Именной код Числовой код Символ Описание точка седиль (орфографический знак) ¹ ¹ ¹ верхний индекс "один" º º º мужской порядковый числитель»»» правая двойная угловая скобка ¼ ¼ ¼ одна четвертая ½ ½ ½ одна вторая ¾ ¾ ¾ три четвертых перевернутый вопросительный знак знак умножения знак деления ƒ ƒ ƒ знак функции Символы для букв ˆ ˆ ˆ диакритический знак над гласной тильда Греческие буквы Α Α Α заглавная альфа Β Β Β заглавная бета Γ Γ Γ заглавная гамма Δ Δ Δ заглавная дельта Ε Ε Ε заглавная эпсилон Ζ Ζ Ζ заглавная дзета Η Η Η заглавная эта Θ Θ Θ заглавная тета Ι Ι Ι заглавная иота Κ Κ Κ заглавная каппа Λ Λ Λ заглавная лямбда Μ Μ Μ заглавная мю Ν Ν Ν заглавная ню Ξ Ξ Ξ заглавная кси Ο Ο Ο заглавная омикрон Π Π Π заглавная пи Ρ Ρ Ρ заглавная ро
13
Именной код Числовой код Символ Описание Σ Σ Σ заглавная сигма Τ Τ Τ заглавная тау Υ Υ Υ заглавная ипсилон Φ Φ Φ заглавная фи Χ Χ Χ заглавная хи Ψ Ψ Ψ заглавная пси Ω Ω Ω заглавная омега α α α строчная альфа β β β строчная бета γ γ γ строчная гамма δ δ δ строчная дельта ε ε ε строчная эпсилон ζ ζ ζ строчная дзета η η η строчная эта θ θ θ строчная тета ι ι ι строчная иота κ κ κ строчная каппа λ λ λ строчная лямбда μ μ μ строчная мю ν ν ν строчная ню ξ ξ ξ строчная кси ο ο ο строчная омикрон π π π строчная пи ρ ρ ρ строчная ро ς ς ς строчная сигма (final) σ σ σ строчная сигма τ τ τ строчная тау υ υ υ строчная ипсилон φ φ φ строчная фи χ χ χ строчная хи ψ ψ ψ строчная пси ω ω ω строчная омега Общая пунктуация
14
Именной код Числовой код Символ Описание тире длинное тире левая одиночная кавычка правая одиночная кавычка нижняя одиночная кавычка левая двойная кавычка правая двойная кавычка нижняя двойная кавычка Прочие символы маленький черный кружок многоточие... знак промилле (процент с дополнительным ноликом) одиночный штрих - минуты двойной штрих - секунды надчеркивание косая дробная черта евро знак номера знак торговой марки ◊ ромб ○ круг Стрелки стрелка влево стрелка вверх стрелка вправо стрелка вниз стрелка влево-вправо стрелка вверх-вниз Масти знак масти "пики" знак масти "трефы" знак масти "червы" знак масти "бубны"
15
Приложение 5 Типы нумерованного списка Значение атрибута TYPE "1" "i" "I" "a" "A" Типы нумерации пунктов списка 1,2,3,4, (задан по умолчанию) i, ii, iii, iv, I, II, III, IV, a, b, c, d, A, B, C, D, Типы маркеров списка Значения атрибута TYPE "disk" "circle" "square" Маркер (задан по умолчанию) o
16
Приложение 6 Соотношение битовой глубины и максимального количества цветов в изображении Битовая глубина Количество цветов
17
Приложение 7 Коды символов таблицы АSCII Символ Код пробел %20 / %2F? %3F: %3A ; %3B & %40 = %3D # %23 % %25 < %3E > %3C { %7B } %7D [ %5B ] %5D "" %22. %27, %60 ^^ %5E ~ %7E \ %5С %7С
18
Приложение 8 Горячие клавиши обозревателя Internet Explorer Клавиша B E И П С Ф F E V A Т Н Описание Меню Вид Меню Сервис Меню Избранное Меню Правка Меню Справка Меню Файл Меню File Меню Edit Меню View Меню Favorites Меню Tools Меню Help
Возможные константы, названия и палитра цветов English name Black Черный 1 #000000 Navy Темно-синий 5 #000080 DarkBlue Темно-синий 25 #00008B MediumBlue Средний синий #0000CD Blue Синий #0000FF DarkGreen
КОДЫ СИМВОЛОВ HTML " " " двойная кавычка & & & амперсанд < < < знак "меньше" > > > знак "больше" неразрывный пробел перевернутый восклицательный знак цент фунт стерлингов денежная единица иена или юань
Исполнитель Рисователь 25 февраля 2011 г. 1. Введение 1.1. Общие сведения Рисователь исполнитель системы КуМир. Назначение Рисователя создавать рисунки на листе. Как и другие исполнители, он имеет систему
1 - Вставка таблиц в Web-страницы 1. ЦЕЛЬ РАБОТЫ Целью работы является знакомство с элементами и стилями таблиц в языке HTML. 2. СОСТАВ РАБОЧЕГО МЕСТА 2.1. Оборудование: IBM-совместимый персональный
Московский государственный технический университет имени Н. Э. Баумана Ю.Е. Алексеев, А.В. Куров Компьютерная графика в среде MS VS C++ Учебное пособие 1 УДК 681.3.06(075.8) ББК 32.973.018 А47 Издание
Создание сайтов HTML HTML Разработку web-сайта можно осуществлять двумя способами: с помощью специального web-редактора; непосредственно написанием программы на языке HTML. HTML (HyperText Markup Language)
10. Экзаменационные билеты ЭКЗАМЕНАЦИОННЫЙ БИЛЕТ 1 1. Обзор системы FrontPage: назначение, принципы работы, интерфейс пользователя, приемы работы. 2. Указание языка содержимого: атрибут lang. 3. Форматированный
Создание сайтов HTML Начало В 1989 году Тим Бернерс-Ли разработал технологию гипертекстовых документов World Wide Web. Гипертекст это текст, в котором содержатся ссылки на другие документы. Основные понятия
Оглавление Введение...1 1. Цель работы...1 2. Основные теоретические сведения...1 Структура HTML-документа...1 Элемент BODY...2 Начертание текста...2 Маркированные списки...3 Нумерованные списки...3 Форматирование
8. Перечень контрольных вопросов по блокам учебной дисциплины для проведения рубежного контроля 1. Спецификация HTML 4.0 1.1 Организация спецификации 1.2 Соглашения, принятые в спецификации 1.2.1 Элементы
=/ :) } /?.. =* :) :) хd < < (^_^) /?.. = * =D (^L^) } Проверка домашнего задания Определиться с: 1. Типом сайта 2. Тематикой сайта 3. Компонентами сайта Теги форматирования Верхний индекс текст
МОСКОВСКИЙ ТЕХНОЛОГИЧЕСКИЙ УНИВЕРСИТЕТ МИРЭА ИНФОРМАЦИОННЫЕ ТЕХНОЛОГИИ В БИОТЕХНИЧЕСКИХ СИСТЕМАХ Глава 7. ЯЗЫКИ ПРОГРАММИРОВАНИЯ ДЛЯ ИНТЕРНЕТ Работа посвящена автоматизации анализа, проектирования, разработки
Министерство образования Республики Беларусь Учреждение образования Гомельский государственный университет им. Ф. Скорины Физический факультет «Информационные системы и сети» Лекция Таблицы в HTML Лектор
1. Области, из которых состоит Web-страница. A) Атрибут B) Апплеты C) Браузер D) Фреймы E) Теги 2. Фреймы задаются: A) Парный тег B) Парным тегом C) Парным тегом
1 Таблица основных тегов HTML для новичков 2 Основные теги Указывает программе просмотра страниц что это HTML документ. Определяет место, где помещается различная информация
Таблица спецсимволов Вступительное слово: Эта бешеная информация собиралась по всему интернету, за что ему, болезному, oгромное спасибо. Пустые ячейки встречаются, но будем считать, что они для вентиляции.
Быстро и легко создаем Web-сайт 1 Дмитрий Козловский Приложение 3. Краткий справочник по HTML 4.0 Web-страницы создаются с помощью языка HTML HyperText Markup Language (Язык разметки гипертекста). Именно
Лабораторно-практическая работа 2 Тема: «Форматирование текста. Создание индексов, выбор шрифта, цвета, задание полей, создание списков» Цель: - продолжить изучение создания web-страницу в редакторе Блокнот;
Теги HTML (шпаргалка) HTML-документ (страничка) - документ, написанный на языке HTML. Заключается между тегами и. Значения тегов разметки документа Теги разметки - специальные команды для
Основы языка гипертекстовой разметки HTML Web-документ (иначе html-документ) является обычным текстовым файлом, к имени которого добавлено расширение.htm или.html. Такой документ открывается в обозревателе
Лекция 3 Таблицы и фреймы Лектор Ст. преподаватель Купо А.Н. Лекция 3 Таблицы и фреймы Для создания таблиц в языке HTML используются следующие элементы: TABLE - создаёт таблицу. CAPTION - задаёт заголовок
HyperText Markup Language (HTML) язык разметки гипертекста предназначен для написания электронных документов, публикуемых в WorldWideWeb. Гипертекстовый документ это текстовый файл, имеющий специальные
Разработка Web-страниц Цель работы: получить представление о создании гипертекстовых документов с помощью языка HTML. Создать персональную Web-страницу. Результат работы файл Моя страница1_фамилия.doc
Лабораторная работа 2,3. Тема: Разработка Web- страниц. Гиперсвязь страниц, построение таблиц. Основные понятия: 1. Web-броузер-программа запроса и просмотра Web-документов 2. гиперссылка ссылка, позволяющая
ТЕМА 2. ФОРМАТИРОВАНИЕ ТЕКСТА ВЕБ-СТРАНИЦЫ Тег P. Создание нового абзаца. Для создания абзаца в тексте Веб-страницы используется парный блочный тег P. По умолчанию браузер выравнивает текст абзаца влево
HTML HyperText Markup Language язык гипертекстовой разметки является языком разметки электронных документов, указывающим программа просмотра HTMLстраниц (браузерам) форму представления описанной в документе
Лабораторная работа 1. Создание простейшего HTML-документа. Форматирование шрифта и абзаца Цель работы: Научиться создавать простейший гипертекстовый документ средствами текстового редактора Блокнот. Научиться
«Создание WEBстраниц с помощью HTML» Работа выполнена Хисматуллиным Ильнуром Рахимзяновичем, учителем информатики Нижнекуюкской средней общеобразовательной школы Атнинского муниципального района Республики
Содержание ВВЕДЕНИЕ 11 Для кого предназначена эта книга 11 Как организована эта книга 11 Соглашения, принятые в книге 12 От издательства Диалектика 13 ГЛАВА 1. НАЧАЛО НАЧАЛ 14 Введение в HTML 14 Что такое
HTML (HyperText Markup Language) язык гипертекстовой разметки документов Назначение HTML в том, чтобы сделать документы пригодными для чтения с экрана монитора. Для создания HTML документов используют
Глава 6 Форма Google В этой главе мы узнаем, как использовать форму для поиска на своем сайте. Для эффективного использования форм поиска вам необходимо знать основы HTML, поэтому сейчас поговорим об этих
Гипертекстовые документы создаются на базе языка HTML (HyperText Markup Language). Ссылки, списки, заголовки, картинки и формы называются элементами языка HTML. Основными достоинствами HTML-документов
Лабораторная работа 11 «Простейшие тэги HTML» Задание 1. Создание простейших файлов HTML Чтобы создать свой файл HTML, сделайте следующее: 1. Создайте папку HTML, в которой мы будем сохранять созданные
Донецкий национальный технический университет Факультет компьютерных наук и технологий Кафедра компьютерной инженерии Лекция 6. Элементы HTML 4.01 (продолжение) Иваница Сергей Васильевич, ассистент кафедры
Содержание Введение 16 Для кого предназначена эта книга 16 Условные обозначения 17 Структура книги 17 На прилагаемом компакт-диске 18 От издательства Диалектика 20 Часть. Основы JavaScript 21 Глава 1.
Глава 3. параметров Общие положения...2 некоторых параметров...2 Основные параметры...3 align...3 bgcolor...3 border...3 cellpadding...4 cellspacing...4 class...4 cleartotals...4 colspan...5 disabled...5
Атрибуты тэгов Атрибуты вписывают внутрь открывающего тэга. В одной команде можно использовать одновременно несколько атрибутов. Разделителем внутри тэга служит пробел. Атрибуты можно набирать как большими,
Практическая работа 1 Создание простейшей веб-страницы Цель работы: Знакомство с общими положениями создания WEB-страниц и базовыми тегами языка HTML HTML - это теговый язык разметки документов. Элементы
Основы языка разметки гипертекста HTML Hyper Text Markup Language (HTML) язык гипертекстовой разметки документов. Web-страницы можно создать с помощью языка HTML В обычный документ вставляются управляющие
1 Алгоритм создания Интернет страницы (HTML-документа) 1. Открыть текстовый редактор с отсутствием операций форматирования, например, Блокнот (ПУСК Все программы Стандартные Блокнот). 2. Напечатать определенную
Содержание Благодарности 15 Введение 16 От автора 16 Преимущества этой книги 17 Чему обучит книга 17 Для кого предназначена эта книга 17 Какую структуру имеет книга 18 Как пользоваться CD, поставляемым
Лабораторная работа по HTML 1 Тема: Основы Цели обучения: формирование у учащихся умений создавать простые Web-страницы и оформлять содержащийся в них текст. Ожидаемые результаты обучения: Учащиеся должны
Задание 1. Создание простейших файлов HTML. 1. Создайте в своем каталоге папку САЙТ, в которой мы будем сохранять сконструированные Web-страницы. 2. Запустите программу Блокнот. 3. Наберите в окне редактора
Содержание Введение 13 Часть I. HTML 15 Глава 1. Основы HTML 17 Введение в основы HTML 17 История развития языка HTML 18 Как работает Web 20 Принципы взаимодействия браузера и Web-сервера 20 Понятие URL
ГОСУДАРСТВЕННЫЙ КОМИТЕТ РОССИЙСКОЙ ФЕДЕРАЦИИ ПО РЫБОЛОВСТВУ Дальневосточный государственный технический рыбохозяйственный университет А.А. Недбайлов Компьютерные технологии Изучение гипертекстовых редакторов
Урок 2 Основы HTML Содержание урока Структура HTML документа Основные теги оформления текста Спецсимволы Гиперссылки Изображения Списки Формы и их элементы Структура HTML документа
Тема: Цель: Время: Задание: Практическая работа 43. HTML. Создание таблиц. Познакомиться с языком HTML, получить навыки работы с обязательными тегами, научиться создавать и форматировать документ. 80 мин.
Работа 5 Создание Web-страниц с использованием списков и таблиц Цель работы: научиться создавать и редактировать веб-страницы со списками и таблицами Содержание работы: 1 Создание нумерованных, маркированных
HTML язык гипертекстовой разметки Обзор HTML CSS Активные html-страницы Инструментальные системы верстки HTML HTML HyperText Markup Language язык разметки гипертекста система верстки, которая определяет,
ОСНОВЫ ПРОГРАММИРОВАНИЯ Зачем нам знания HTML? Для чего нужен HTML? Как самому создать HTML документ? Для создания HTML файла (документа) необходимо в первую очередь поменять расширение файла текстового
Тема 12. Создание Web-страниц с помощью языка разметки документов HTML Метка должна открывать HTML-документ, а метка закрывать HTML-документ. Пара меток... указывает на начало
Тема: Таблицы в HTML-документах Лабораторная работа 2 Цель: научиться создавать таблицы в HTML-документах Выполнение каждого задания демонстрировать преподавателю. 1. Построение простых таблиц и колонок
Введение в HTML Содержание История языка HTML Синтаксис языка HTML Структура документа HTML Цветовая разметка документа. Способы задания цветовых параметров Разметка текста. Физическое форматирование текста.
Элементы HTML Элемент HTML это основная структурная единица веб-страницы, написанная на языке HTML. Структура HTML-документа HTML это теговый язык разметки документов, то есть любой документ на языке HTML
МУНИЦИПАЛЬНОЕ АВТОНОМНОЕ ОБЩЕОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ «СРЕДНЯЯ ОБЩЕОБРАЗОВАТЕЛЬНАЯ ШКОЛА 6» Г. ПЕРМИ УТВЕРЖДАЮ Дирев Й?/ О Ь, илипович 20 РАБОЧАЯ ПРОГРАММА ПРОФЕССИОНАЛЬНОЙ ПРОБЫ ДЛЯ 7 КЛАССА «САЙТОСТРОЕНИЕ»
Будьте внимательны и не допускайте таких ошибок: - помещать внутрь тега... еще теги или нельзя, так как этот код будет не правильно распознан - неправильный код Лекция 4 1 Не будет ошибкой,
Министерство образования и науки Российской Федерации Федеральное агентство по образованию Саратовский государственный технический университет ИСПОЛЬЗОВАНИЕ ЯЗЫКА HTML ДЛЯ СОЗДАНИЯ WEB-СТРАНИЦ Методические
Порядок выполнения работы Практическая работа 1 1. Выполните упражнения 1, 2, 3, 4, 5, 6. Упражнение 1 1. Создайте новый документ. Сохраните документ с именем Текст1.doc. 2. Установите параметры страницы
3. Основы языка разметки HTML 3.1. Создание HTML-документа в редакторе Блокнот Веб-страница представляет собой текстовый документ, в котором расставлены команды языка HTML. Они интерпретируются браузером.
Вопрос 3. Язык гипертекстовой разметки HTML. HTML (HyperText Markup Language) это коллекция стилей (указанных в терминах языка HTML), которые определяют различные компоненты WWW документов. Годом рождения
Краткая справка по тегам языка HTML Приложение. Краткая справка по тегам языка HTML Структура документа HTML Документ в формате HTML состоит из трех основных частей: cтрока, содержащая информацию о версии
Язык программирования HTML 1. Вызовите текстовый редактор БЛOКНОТ, который находится в группе "Стандартные". Наберите следующий ниже текст и сохраните под именем web1.html в папку html_text, которую предварительно
Инструкция по наполнению сайта кафедры Культурологи и Социологии (Часть 2 «редактор наполнения сайта») 1 Оглавление 1 Интерфейс редактора... 3 2 Изменение размера редактора... 4 3 Панель инструментов...
Оглавление Введение....11 От издательства...14 Глава 1. Структура HTML-документа... 15 1.1. Общие понятия HTML....16 Элемент.... 16 Атрибут... 17 1.2. Структура HTML-документа...18 Объявление типа документа
Гипертекстовые технологии Обычный текст представляется как одна длинная строка символов, которая читается в одном направлении. Гипертекстовая технология заключается в том, что текст представляется как
Сегодняшняя статья затрагивает весьма актуальную тему среди начинающих программистов и Web-дизайнеров, а именно тему выбора HTML-редактора. Представив весь список специализированного программного обеспечения, сложно сделать оптимальный выбор на месте - каждая программа эксклюзивна и имеет ряд своих особенностей, достоинств и недостатков. К счастью, среди большого числа лиц вышеуказанных профессий, за годы их плодотворной работы сформировался "рабочий список" наиболее оптимальных программ для создания и редактирования HTML-документов и, в частности, интернет-сайтов. Данный материал посвящен рассмотрению шести HTML-редакторов. Учитывая не малый объем получившейся статьи, не будем затягивать со вступлением и сразу приступим к делу.
Итак, первый HTML-редактор, на который пал наш взор, стал Macromedia HomeSite.
Macromedia HomeSite, пожалуй, является одним из самых распространенных средств редактирования HTML-документов среди пользователей, предпочитающих кодировать страницы вручную. Вместе с тем, HomeSite позволяет значительно ускорить сам процесс создания и облегчить работу разработчика.
Увеличить картинку
Рабочее пространство программы можно условно поделить на три части: первая, самая большая - собственно окно с содержанием документа, вторая часть, находящаяся левее, по умолчанию содержит перечень документов, имеющихся на диске. И, наконец, вверху, кроме традиционного меню, имеются несколько панелей с наиболее часто используемыми функциями, вид которых, впрочем, можно настроить на свой вкус.
Macromedia HomeSite обеспечивают удобную подсветку синтаксиса не только HTML-страниц, но и файлов PHP, Perl, ASP, MySQL и других популярных средств разработки. Данный факт придется по душе опытным пользователям, которые не ограничиваются средствами языка гипертекстовой разметки и используют более сложные языки веб-программирования. Если же Вас не устраивает текущая цветовая схема подсветки синтаксиса, то это не проблема - можно отредактировать существующую, или даже создать собственную схему оформления документов.
HomeSite имеет мощную справочную систему, содержащую кроме описания возможностей программы спецификации языка HTML, справочник тегов и включающая удобные всплывающие подсказки по текущему дескриптору - для их вызова достаточно нажать F2, и пользователю демонстрируются все возможные атрибуты для данного тега.
Для ускорения доступа к часто используемым группам тегов в верхнем правом углу имеются несколько панелей, вид и расположение которых к тому же можно изменять.
Панель разделена на несколько вкладок, на каждой из которых представлены теги, относящиеся к одной группе. Например, вкладка Fonts содержит кнопки для быстрого увеличения размера шрифта, смены его начертания, местоположения относительно строки и для вставки заголовков трех уровней.
Альтернативным способом ввода вручную всех атрибутов тега является, так называемый, Tag Editor - редактор тегов, с помощью которого можно существенно облегчить процесс присвоения значений различным атрибутам.
Отдельно стоит отметить средства для создания и конфигурирования таблиц и фреймов - Table Wizard и Frame Wizard, позволяющие существенно облегчить жизнь разработчику при создании таблиц и фреймов сложной структуры.
Только представьте, сколько бы времени ушло на создание подобной таблицы вручную!
Необходимо отметить, что Homesite содержит встроенный модуль проверки орфографии, проверяющий не только корректность использованных дескрипторов, но и непосредственно правильность самого текста, а также редактор файлов CSS - каскадных листов стилей под названием TopStyle.
Для повышения скорости создания документов можно воспользоваться клавиатурными сокращениями - HomeSite предоставляет обширное поле деятельности для любителей клавиатуры. Например, тегу
соответствует комбинация клавиш Ctrl+Break. Впрочем, пользователь волен назначить практически любой команде удобное ему сочетание клавиш.
Плюсы. К достоинствам программы можно отнести функциональность, универсальность, поддержку различных языков программирования, понятный интерфейс, широкие возможности и мощную справочную систему.
Минусы. Отсутствие поддержки русского языка, высокая цена, необходимо хотя бы поверхностное знание языка HTML для создания страничек, высокая цена программы.
Скачать последнюю версию Macromedia HomeSite можно по этому адресу .
Программа SiteEdit создана российской компанией EdgeStile и позиционируется разработчиками как система управления сайтом. В отличие от HomeSite, SiteEdit относится к так называемым визуальным средствам разработки - WYSIWYG-редакторам (от заглавных букв выражения What You See Is What You Get - "что видите, то и получите").
После первого запуска программы появляется готовый шаблон веб-узла.
Структура всего узла представлена в виде различных страниц, содержащих в себе несколько разделов. Раздел, в свою очередь, может содержать в себе несколько записей или объектов. Перейдя в режим редактирования (по умолчанию F9), у нас появляется возможность редактировать существующие разделы и добавлять новые, изменить текст имеющейся записи или добавить новую запись.
После щелчка по кнопке "Изменить раздел" появляется новое окно, в котором и можно проделать эту нехитрую операцию:
Кроме непосредственного редактирования текста пользователю доступны кнопки для изменения начертания шрифта, вставки рисунка, текущей даты, добавления таблицы, вставки гиперссылки, формирования маркированного или нумерованного списка - и все это - простым нажатием мыши. Тем же, кто знаком с языком HTML, можно не ограничиваться приведенными выше функциями, а просто вручную написать нужный код. Так как в окне редактирования никаких излишеств типа подсветки синтаксиса не имеется, можно вызвать внешний редактор кликом на кнопку HTML, в котором и произвести все необходимые изменения.
Программа предлагает несколько шаблонов оформления: book, galeon, kafe, palm_skin, stroitel, благодаря которым можно существенно изменить облик всего сайта в целом.
Все элементы страницы доступны для редактирования. Для более кардинального изменения дизайна существует редактор дизайна, предоставляющий широчайшие возможности для изменения всех элементов, присутствующих на странице.
увеличить картинку
С левой стороны имеется список элементов, справа - их вид на странице, снизу же доступны окна для изменения значений атрибутов того или иного дескриптора. Например, для тега Font доступны следующие атрибуты: цвет, размер, толщина, начертание, наклон подчеркивание, интервал. Новичкам понравится способ заполнения окошек - вручную прописывать ничего не требуется, достаточно выбрать нужный элемент из выпадающего списка. Выбор цвета также не представляет трудностей - к услугам пользователя палитра, необходимо лишь определиться с понравившимся оттенком, и, вуаля, его шестнадцатеричный код уже указан в соответствующем поле.
В состав программы входит готовый шаблон, имитирующий сайт строительный компании, который вполне можно подстроить под свои нужды.
Любопытно, что напрямую сохранить код странички из программы невозможно, для этого необходимо выбрать пункт "Просмотр страницы в браузере", и лишь из браузера можно сохранить страницу в виде html-файла. Данный подход, видимо, связан с тем, что в версиях Standard и Business программы SiteEdit имеется возможность выгрузки всего проекта сразу на хостинг, однако в бесплатной версии Start данная возможность, к сожалению, отсутствует. Отсюда и подобные неувязки.
Плюсы. Простой интерфейс - не требуется практически никаких знаний HTML, функциональность, небольшой вес дистрибутива, русский язык интерфейса, бесплатность стартовой версии.
Минусы. Невозможность сохранения файлов напрямую из программы, орфографические ошибки.
SiteEdit отлично подойдет для создания персональных страниц и несложных веб-проектов для пользователей начальной квалификации и даже для тех, кому абсолютно незнаком язык HTML.
SiteEdit выпускается в трех основных версиях - Start, Standard, Business, и двух дополнительных -Partner.
Загрузить версию Start программы SiteEdit можно отсюда .
Еще одна Freeware-программа, которая попала к нам в обзор - это HTML Source. Первое, что бросилось в глаза - небольшой размер дистрибутива программы - всего 1,5 Мб! Это навело на несколько скептические мысли о функциональности программы и ее возможностях. Однако мы были приятно удивлены.
увеличить картинку
Интерфейс программы напоминает таковой у HomeSite, но инструментов и возможностей, конечно, гораздо меньше. С левой стороны расположено окно проводника, в котором можно выбирать необходимые для открытия файлы. По центру - непосредственно само окно редактирования веб-документов. С правой от него стороны расположена палитра, причем работает она в весьма удобном режиме. При наведении курсора мыши на тот или иной участок палитры сразу показывается составляющая каждого цвета в RGB-палитре, а чуть ниже - непосредственно сам цвет. Более того, при щелчке на нужном участке в документ сразу вставляется шестнадцатеричный код цвета. Весьма удобно.
В верхней части рабочей области программы имеется обычная панель инструментов, на которой расположены кнопки для создания нового документа, открытия существующих файлов, печати файла, проверки орфографии и прочие распространенные действия. Все пиктограммы выполнены в неплохом стиле, однако огорчает лишь отсутствие всплывающих подсказок при наведении на ту или иную иконку действия. Примечательно, что программа сама определяет, какие браузеры установлены в системе, и в панели инструментов имеются иконки для просмотра документа в имеющихся у пользователя браузерах. В моем случае, кроме стандартного Internet Explorer, были уставлены также Opera и Mozilla FireFox, что и продемонстрировала программа.
Теперь перейдем непосредственно к описанию возможностей программы. HTML Source, как видно из названия, призван лишь облегчить труд кодера, а не полностью заменить его. В программе отсутствует возможность визуальной разработки страниц, т.е. для тех, кто не знаком с азами языка гипертекстовой разметки, данный продукт не подойдет. Однако тем, кто предпочитает разрабатывать веб-документы вручную, HTML Source готов предложить неплохой набор инструментов для ускорения процесса кодирования.
HTML Source предлагает подсветку синтаксиса HTML-файлов, однако, на мой взгляд, реализация данной функции в программе несколько уступает таковой в HomeSite. Во-первых, часть кода, относящаяся к определению стилей, вовсе не подсветилась. А во-вторых, отсутствует возможность самостоятельной настройки цветовой схемы, которая присутствовала в том же HomeSite.
В меню "Insert" у пользователя имеется возможность вставки даты, специальных символов HTML, изображений, а также широко набора смайлов. Весьма оригинальное решение разработчиков, включивших столь необычную возможность в свою программу. Любителям виртуального общения это должно прийтись по душе.
В меню "Tags" сосредоточены основные группы HTML-дескрипторов.
Наибольший же интерес вызывает содержание меню "Tools", в котором и собраны все инструменты данного программного средства. Разберем его содержимое более пристально.
Пункт "Convert Case" позволяет сменить регистр букв, т.е. либо инвертировать его, либо привести к одному определенному. Следующий пункт "Convert CodePage" позволяет быстро сменить кодировку всей страницы.
Среди оставшихся пунктов необходимо отметить встроенный модуль проверки орфографии, и средство для оптимизации HTML-кода под названием Tidy, который приводит вид документа в соответствии с требованиями организации W3C, которая и занимается разработкой стандартов языка гипертекстовой разметки.
Нельзя не отметить продвинутую справочную систему программы HTML Source, включающую в себя полное описание возможностей программы, а также спецификации языка HTML, включая CSS.
Плюсы: Компактный размер дистрибутива, оригинальные возможности, продвинутая справочная система.
Минусы: Отсутствие возможностей для визуальной разработки документов, скромные возможности по настройке программы, отсутствие русификации.
Таким образом, HTML Source придется по душе опытным разработчикам, причем не только как средство разработки, но и как справочное пособие. Скачать HTML Source можно по этому
Следующей программой, попавшей к нам в обзор, стала Magic HTML Studio, разработанная компанией AG FreeSoft. После запуска программы нашему взору предстала необычная картина - уж больно необычен был дизайн Magic HTML Studio.
Кому-то подобный интерфейс может и придется по душе, но, на мой взгляд, не совсем удачное решение для программы подобной направленности. Также огорчил факт отсутствия какой бы то ни было подсветки синтаксиса документа. Ну да ладно, отбросим все претензии к дизайну, и посмотрим, как у Magic HTML Studio обстоят дела с функциональной составляющей.
А вот тут все как раз на высшем уровне! Чего только стоят такие инструменты, как Java Constructor и CQI QuickBuilder. Но обо всем по порядку.
С левой стороны расположены кнопки для быстрого форматирования текста, смены типа написания и позиции текста на странице. Также представлены пиктограммы для вставки в документ заголовков различных уровней.
С правой же стороны пользователю доступны кнопки для вставки текста определенного цвета, однако использовано пространство весьма нерационально - для каждого цвета выделена отдельная кнопка, хотя было бы удобнее использовать обычную палитру, например, как в программе HTML Source.
Теперь перейдем непосредственно к средствам и инструментам, уникальным именно для Magic HTML Studio.
Java Constructor представляет собой мощное, и одновременно простое средство создания скриптов на языке JavaScript, причем для этого пользователю совершенно не нужны знания данного языка программирования. С помощью конструктора можно вставить календарь или часы на вашу страницу, сделать динамическое или выпадающее меню, сотворить простенький баннер, состоящий из нескольких картинок и некоторые другие полезные динамические элементы.
увеличить картинку
Конструктор автоматически создает необходимый скрипт, и вам необходимо лишь вставить его в нужное место в документе.
Также в состав программы входит генератор CGI скриптов, при помощи которого можно создать конференцию, гостевую книгу или чат всего за один щелчок мыши, предварительно установив параметры скрипта.
К сожалению, проверить данный инструмент на практике у нас не было возможности - для этого было необходимо выгрузить файлы на сервер с поддержкой CGI-скриптов. Перейдем к другим возможностям программы. Так, с помощью меню Options можно производить операции добавления скрипта загрузки Flash, вызова редактора элементов, а также операции смены шрифта и добавления формы.
Также необходимо отметить неплохую справочную систему на русском языке, содержащую описание всех основных возможностей программы.
Плюсы: продвинутые конструкторы JavaScript и CGI-скриптов, широкие возможности для добавления динамических элементов, справочная система на русском языке.
Минусы: не совсем удачный дизайн, отсутствие подсветки синтаксиса, отсутствие визуальных средств разработки.
Microsoft FrontPage, входящий в пакет Microsoft Office, является классическим WYSIWYG-редактором, в котором, однако, присутствует возможность ручной правки кода.
Интерфейс программы во многом напоминает таковой и Microsoft Word, что нисколько не удивляет - унификация внешнего вида поможет новичкам быстрее освоить основные возможности FrontPage.
В программе имеется три режима работы с документом: Normal, HTML и Preview. В режиме Normal веб-страница представляет собой обычный текстовый файл с возможностью редактирования всех элементов - от текста до картинок.
увеличить картинку
HTML-режим позволяет просматривать код страницы и, соответственно, редактировать его. В этом режиме FrontPage осуществляет подсветку синтаксиса, однако довольно посредственную - дескрипторы выделены синим цветом, все остальное - черного цвета.
Наконец, в режиме Preview можно посмотреть, как будет выглядеть ваша страница в окне браузера.
FrontPage, благодаря тесной интеграции с другими продуктами корпорации Microsoft, позволяет вставить в веб-документ различные типы объектов: от картинок и диаграмм до листов Microsof Excel.
Разумеется, FrontPage имеет конструктор таблиц, существенно облегчающий их создание.
Одним из основных преимуществ программы является большое количество имеющихся шаблонов, позволяющих пользователю не ломать голову над дизайном своего проекта.
Выбрав необходимый шаблон, можно приступать непосредственно к наполнению страницы контентом. Вот тут то и ощущается вся прелесть FrontPage: процесс создания HTML-страницы ничем не отличается от создания обычного текстового документа в Microsoft Word. Пользователю доступны те же средства для редактирования текста, смены его форматирования, создания и редактирования таблиц, вставки различных объектов и изображений. Программа позволяет с легкостью создавать маркированные, нумерованные и многоуровневые списки - и все это без знания языка HTML!
FrontPage делит рабочую область на несколько некоторое количество блоков, содержащих определенные элементы страницы - рисунки, текст, заголовки и проч. Для каждого блока можно назначить свои параметры форматирования и расположения его относительно страницы.
Есть и обратная сторона медали - сложность и громоздкость полученного кода, что естественно, сказывается на конечном размере документа. Также в дальнейшем будет весьма сложно вносить изменения в подобный документ. Но это скорее недостаток не конкретного продукта, а практически всех WYSIWYG-редакторов.
Плюсы: привычный интерфейс для продуктов MS Office, неплохой набор шаблонов, интеграция с другими программами из пакета MS Office.
Минусы: небольшой набор инструментов разработки, невозможность отдельного приобретения программы.
Microsoft FrontPage неплохо подойдет в качестве HTML-редактора на первое время, однако с ростом потребностей пользователя его возможностей может не хватить.
И, наконец, последняя программа в нашем обзоре Macromedia Dreamweaver MX 2004. Немалый размер дистрибутива (62 Мб) позволяет ожидать многого от этой HTML-редактора. И действительно, возможности Macromedia Dreamweaver MX 2004 впечатляют. После установки пользователя просят выбрать внешний вид программы, который отличается в зависимости от подхода к созданию веб-документов. При выборе "Code" интерфейс программы будет подстроен под нужды кодировщика, а при выборе "Design" - соответственно, дизайнера. Впрочем, всегда имеется возможность для переключения между этими двумя режимами, а также доступен третий, комбинированный режим - рабочая область программы делится на две части.
увеличить картинку
С правой стороны расположено еще одно многоуровневое меню, в котором, в частности, имеются пункты для отображения справки по текущему дескриптору, список используемых изображений, проводник и некоторые другие пункты.
Дополнительную помощь разработчику обеспечивают контекстные меню, в которых продублированы основные функции, вызываемые из главного меню. Например, работая в визуальном режиме по щелчку правой кнопки мыши на каком-либо элементе, мы можем сменить используемый шрифт, его начертание цвет и прочие атрибуты, а также возможно изменить атрибуты используемого тега.
Основные возможности программы заключены именно в использовании визуального режима. Пиктограммы на панели инструментов отвечают за самые распространенные действия: добавление гиперссылку, вставка изображения, конструирование таблицы, добавление текущей даты и др.
Для пользователей, знакомых с возможностями языка HTML, можно порекомендовать использовать инструмент под названием Tag Chooser, с помощью которого можно вставить не только любой HTML-тег, но и основные выражения и операторы таких языков программирования, как JavaScript, ASP.Net, PHP, WML и ColdFusion. Все это открывает новые горизонты использования программного средства при разработке различных сложных проектов с использованием серверных языков программирования.
Удобство комбинированного режима заключается в том, что все проделанные изменения отображаются сразу в обоих окнах. Т.е., внеся изменения в код документа, вы сразу видите результат в смежном окне и, наоборот, при выборе какого-либо элемента отображается соответствующий код.
При работе в режиме "Code" рабочая область программы напоминает таковую у HomeSite - чувствуется, что у продуктов один создатель, однако функциональность у Dreamweaver все-таки повыше. Чего стоит только один конструктор таблиц, предоставляющий разработчику небывалую гибкость при создании таблиц. Более того, при создании таблицы программа предлагает использовать один из шаблонов оформления, коих насчитывается несколько десятков, причем при выборе определенного шаблона тут же имеется возможность подстроить его под свои нужды, откорректировав некоторые его атрибуты. После создания таблицы и наполнения ее содержимым становится доступным сортировка таблицы по какому-либо столбцу. И все это - в визуальном режиме, сам код же, естественно, меняется автоматически.
Macromedia Dreamweaver MX 2004 может использоваться совместно с другими продуктами компании - Macromedia Fireworks, Flash и др.
Если же выбор пользователя, который предпочитает создавать документы в визуальном режиме, практически очевиден, то перед "кодировщиком" появляется непростая задача в выборе между двумя продуктами Macromedia: HomeSite или Dreamweaver MX 2004? Можно отметить, что возможности Dreamweaver MX 2004 будут лишними для кодера, однако при большом объеме рутинной работы можно вполне воспользоваться визуальным режимом - если программа предлагает его, то почему бы не попробовать? Пользователи же HomeSite подобной возможности лишены, но зато программа предлагает им весь необходимый набор инструментов для комфортной разработки веб-документов различной сложности.
Таким образом, каждый волен выбирать нужный ему продукт самостоятельно, учитывая поставленные цели и имеющиеся знания. Разумеется, вопрос также и в цене - оба продукта Macromedia распространяются как Shareware, но их можно бесплатно использовать в течение 30-дневного пробного срока. Этого времени вполне достаточно, чтобы определиться с выбором.
Плюсы: огромный набор инструментов для визуальной разработки документов, понятный интерфейс, возможность работы в режиме кодера, готовый набор шаблонов.
Минусы: большой объем дистрибутива, высокая цена продукта.
Лекция №1: Введение в язык
HTML
(12 часов)
Тема 1: Введение в язык
HTML
(1 час)
План
1. Понятие о
HTML
2. Понятие о гипертексте
3. Понятие о
html
-файле
4. Понятие о тегах языка
html
5. Структурные теги
6. Создание шаблона
HTML
-документа и первой
Web
-страницы
1. Понятие о
HTML
HTML
расшифровывается как
HyperText
Markup
Language
, или язык гипертекстовой разметки.
Важно понять, что
HTML
это не язык программирования – а язык разметки текста. Он позволяет определить внешний вид документа. Если обычные языки программирования используются для написания программ (алгоритмов), предназначенных для выполнения определенных задач, то язык разметки
HTML
используется для представления документа в определенном виде.
2. Понятие о гипертексте
Гипертекст (
hypertext
)
– это особый текст, в котором есть ссылка на другую
Web
-страницу или документ. В данном случае приставка гипер
означает более чем
или сверх
, так как вы видите перед собой нечто большее, чем просто текст. В большинстве браузеров гипертекст (или гиперссылка) обычно подчеркивается и выделяется другим цветом, в отличие от остального текста. Если щелкнуть на гипертексте, то его цвет изменится. Щелчок на гиперссылке приводит к тому, что
Web
-браузер запрашивает документ, на который указывает ссылка, а затем загружает его в окно браузера. Таким образом, благодаря гипертексту
Web
-страница приобретает свойство интерактивности.
У гипертекста нет ни начала, ни конца. Большинство печатных изданий предназначено для прочтения от первой до последней страницы. В этом смысле они обладают линейной структурой. А гипертекст больше напоминает паутину с неопределенным центром. Искусство создания хороших
Web
-страниц заключается, прежде всего, в разумной организации информации. Пользователь должен иметь перед глазами структуру страницы или ее краткое содержание, чтобы выбрать то, что его интересует.
3. Понятие о
html
-файле
Для разработки
html
-файлов нужен всего лишь текстовый редактор. Запомните, что, хотя
html
-страницы и представляют собой файлы с расширением.
htm
или.
html
, на самом деле это обычные текстовые файлы формата
ASCII
. Для того чтобы создать
html
-страницу, необходимо воспользоваться командой Файл – Сохранить как
и сохранить файл в текстовом формате и добавить к его имени расширение.
htm
или.
html
, в зависимости от используемой операционной системы.
Лучше всего для упорядочения
html
-файлов создать на жестком диске специальный каталог (или папку) для хранения
Web
-страниц. Это особенно важно в случае, если мы собираемся создать несколько взаимосвязанных страниц. Необходимо для начала определить структуру расположения файлов на жестком диске. Для создания простого
Web
-сервера, как правило, нужно иметь несколько текстовых и графических файлов и, возможно, пару файлов мультимедиа. Создавая
Web
-сервер, содержащий относительно небольшое количество страниц и изображений, можно сохранить все файлы в одном каталоге. Если же файлов много, следует разместить их в нескольких папках.
4. Понятие о тегах языка
html
Как мы уже говорили язык разметки позволяет определить внешний вид документа. Для этого в текст документа вставляются специальные коды, или дескрипторы (tags
). Причем сделать это можно с помощью программы Блокнот или другого текстового процессора. И вообще, при создании
Web
-страниц вам придется делать многое из того, к чему вы привыкли, работая в текстовом процессоре, например, выделять текст полужирным шрифтом или преобразовывать отдельные фразы в заголовки.
Итак, что же такое дескриптор? Дескриптор
– это основной элемент кодирования, принятый в стандарте
HTML
. В
HTML
практически все зависит от дескрипторов. Они служат для привлечения внимания к определенным словам в документе, тем самым давая браузеру понять, что нужно выделить, где отобразить графику и где находятся гиперссылки.
Дескрипторы заключается в угловые скобки (< >). Например, дескриптором абзаца является <
P
>
, а дескриптором горизонтальной линии -
. Дескрипторы можно записывать как прописными, так и строчными буквами. Однако запись дескрипторов прописными буквами значительно облегчает зрительное восприятие текста.
Существует два типа дескрипторов: контейнеры и одиночные дескрипторы. Контейнер – это дескрипторная пара, состоящая из начального (или открывающего) и конечного (или закрывающего) дескрипторов. Начальный дескриптор имеет вид <
TAG
>,
а конечный .
Контейнеры предназначены для хранения некоторой информации, например текста или других дескрипторов. Поэтому между начальным и конечным дескрипторами заключено содержимое контейнера. Например, элемент, представляющий собой заголовок первого уровня заключается между дескрипторами <
H
1>
и :
<
H
1> Мой первый
HTML
-документ!
Пустой дескриптор отличается от контейнера тем, что не содержит никакой информации. У него есть только начальный дескриптор. Пустой дескриптор обычно выполняет самостоятельную задачу, не связанную с конкретным текстом. Например, дескриптор <
HR
>
создает горизонтальную линию и не выполняет при этом никаких действий над текстом, в противоположность начальному и конечному дескрипторам контейнера.
Начальный и конечный дескрипторы контейнера вместе с заключенным между ними содержимым – это элемент
HTML
-документа. Элементом может быть изображение, фрагмент текста, форма, таблица, список, ссылка, текстовое поле, кнопка и даже заголовок документа или его основная часть (тело). Но обратите внимание, что элемент – это не только дескрипторы, но и то, что заключено между ними.
5. Структурные теги
Познакомимся с основными дескрипторами, определяющими структуру
Web
-страницы.
Дескрипторы элемента
HTML
(<
HTML
>
) являются самыми внешними, т.е. заключают в себе весь остальной текст и другие дескрипторы. Начальный дескриптор, <
HTML
>
, – это первое, что вы должны набрать. А конечный дескриптор,
, обозначает окончание документа. Большинство браузеров не воспринимает текст, находящийся за пределами этих двух дескрипторов.
У
HTML
-документа есть "голова" (заголовок) и "тело" (основная часть).
В любом
HTML
-документе элемент
HEAD
предшествует основной части (или телу)
Web
-страницы. Содержимое элемента
HEAD
заключено между дескрипторами <
HEAD
>
и
. Этот текст представляет собой общую информацию о файле и не отображается в самом документе. В дескрипторе
HEAD
может находиться ряд других элементов. Нас в первую очередь интересует дескриптор <
TITLE
>
, который определяет название документа. Текст, заключенный между дескрипторами <
TITLE
>
и
, отображается в верхней части окна программы (строка заголовка).
И, наконец, самая важная часть
HTML
-документа – элемент
BODY
, который заключается между парой дескрипторов <
BODY
>
и
. Этот элемент является самым важным потому, что в него включен весь отображаемый на странице текст, изображения и мультимедиа либо ссылки на них. Описание элемента
BODY
следует сразу за описанием элемента
HEAD
.
6. Создание шаблона
HTML
-документа и первой
Web
-страницы
Откройте Блокнот и введите следующий текст:
Название
Web-
страницы
<
BODY
>Содержимое
Web
-страницы: тест, графика, ссылки и т.д.
Сохраните файл в своей папке под именем
template
.
html
.
Теперь создайте новый документ и загрузите в него созданный нами шаблон. Затем воспользуйтесь командой Сохранить как
, чтобы присвоить имя новой странице.
Замените текст, заключенным между дескрипторами <
TITLE
> и на "Моя первая
Web
-страница!". Теперь замените текст между дескрипторами <
BODY
> и на следующий:
<
H
1>Это моя первая
Web
-страница!
<
HR
>
Окончательный вариант вашего файла должен иметь следующий вид:
Моя
первая
Web-
страница
!
Это моя первая Web-страница!
Сохраните файл в вашей папке присвоив ему имя
first
.
html
.
; более правильное название - дескриптор ). В SGML (HTML , WML , AmigaGuide , языках семейства XML) - элемент языка разметки гипертекста . Текст, содержащийся между начальным и конечным тегом, отображается и размещается в соответствии со свойствами, указанными в начальном теге.
Например, текст Википедии, заключённый между начальным тегом и конечным тегом (от англ. small - маленький
), отображается с меньшим размером, чем основной текст: Это маленький текст, а текст между тегами и отображается с большим размером: А это - большой.
Синтаксис тегов
Обычно используются парные теги - открывающий
, или начальный
, и закрывающий
, или конечный
. Возможно также применение одиночного тега.
Например, тег отступа абзаца может оформлять абзац между тегами , а может в одиночной форме до следующего первого попавшегося тега
Тег с пустым текстом
: вставляет разрыв текста без сохранения отступов, можно также использовать специальную форму записи тега - .
Теги и элементы
Весь текст, заключённый между начальным и конечным тегом, включая и сами эти теги, называется элементом
. Сам же текст между тегами - содержанием элемента
. Содержание элемента может включать в себя любой текст, в том числе и другие элементы.
Атрибуты
У тега могут быть свойства, называемые атрибутами,
дающие дополнительные возможности форматирования текста. Они записываются в виде сочетания: имя атрибута-значения, причём текстовые значения заключаются в кавычки.
Например, можно выделить фрагмент текста определённым шрифтом, используя тег и указав в этом теге название шрифта и желаемый размер: оформляемый текст
.
Тип элемента документа
Имя тега определяет тип
элемента. В HTML имя тега определяет лишь правило разметки, так, имя тега «i» (например Курсивный текст) определяет, что между тегами расположен текст, который следует отображать в браузере в курсивном
начертании. XML представляет собой более гибкий стандарт. Имена тегов в нём не регламентируются жёстко: пользователи могут вводить и использовать для своих нужд новые теги (см. XML).
Например, мы сами для себя можем определить, что элементом с именем тега «person» мы определяем тип
этого XML элемента, как фамилия имя и отчество. И скажем, год рождения, как часть информации по данному человеку:
- XML : Иванов Иван Иванович 1984 Можно даже задать дополнительно в таблицах CSS , что все теги Будут определённого цвета.
- HTML : Иванов Иван Иванович, 1984 Тут уже нет возможности сформировать элемент документа для анализа текста, но оформить можно.
Таким образом, HTML представляет собой неструктурированный текст, а XML - документ с иерархической структурой, что даёт возможность обработки документа: трансформацию данных, поиск нужных элементов документа и т. д.
Структура элемента
- неправильно:
- правильно: Имя Фамилия
Распространённое заблуждение, что SGML и HTML разрешают «перехлёст» элементов, основано на нарушающем стандарты
Рекомендуем