Простейшие текстовые редакторы – Блокнот, Far Editor, Norton Editor Офисные программы, входящие в состав Microsoft Office (Word, PowerPoint) Специализированные HTML- редакторы – Homesite, Hotdog Professional, CoffeeCup HTML Editor ++ Редакторы визуального конструирования –Microsoft FrontPage, Adobe ( Macromedia ) Dreamweaver и др.
HTML (HyperText Markup Language) – язык гипертекстовой разметки HTML- документ включает: Текстовое содержимое страницы Структура и формат страницы Мультимедийные объекты Гиперссылки
Объекты языка HTML: Текст Теги (управляющие конструкции) < имя_тега >
Парный тег <Te г > фрагмент текста </ Тег > Непарный тег <Te г > фрагмент текста Открывающий тег Закрывающий тег
<B> – тег физического форматирования текста, обозначает полужирное начертание Этот текст набран <B> полужирным </B> шрифтом Код HTML Этот текст набран полужирным шрифтом Отображение
Вложение тегов Этот текст набран <B><I> полужирным курсивом </I></B> Код HTML Этот текст набран полужирным курсивом Отображение
Атрибуты (параметры) уточняют действие тегов Каждый тег имеет свой набор допустимых атрибутов Для парных тегов атрибуты указывают в открывающем теге Можно использовать несколько атрибутов, разделенных пробелами Атрибуту присваивается заданное или произвольное значение Атрибуты записываются в виде пары: имя=значение, причем нечисловое значение заключается в кавычки
Необходимо соблюдать порядок вложенности тегов <B><I> полужирный курсив </I></B> <B><I> полужирный курсив </B></I> В большинстве случаев атрибуты необязательны Значения атрибутов необязательно заключать в кавычки, если они содержат только буквы, цифры, точки и дефисы
Регистр имен тегов и атрибутов не имеет значения <IMG> = <Img> = <IMg> = <img> Наличие и количество пробелов между тегом и текстом или тегом и тегом не имеет значения <B><I> полужирный курсив </I></B> <B><I> полужирный курсив </I> </B> <B> <I> полужирный курсив </I> </B>
! Интерпретирует код HTML программа-браузер Браузеры не проверяют правильность написания кода HTML Неправильно записанный код браузером игнорируется
<HTML> </HTML> <HEAD> </HEAD> <BODY> </BODY> Служебная часть Содержательная часть
Тег <TITLE> определяет текст заголовка Web -страницы В отсутствие этого тега в строке заголовка выводится (в зависимости от браузера): No title Адрес загруженной страницы Ничего <HEAD><TITLE> Сайт школы </TITLE></HEAD>
Заголовки – теги <H1>…</H1>, <H2>…</H2 >, …, <H6>…</H6 > Атрибут – ALIGN (выравнивание) ={LEFT, RIGHT, CENTER, JUSTIFY} <H2 ALIGN=RIGHT> Заголовок важного раздела</H2> Текст важного раздела Код HTML Отображение <H1>Заголовок</H1> <H2>Заголовок</H2> <H3>Заголовок</H3> <H4>Заголовок</H4> <H5>Заголовок</H5> <H6>Заголовок</H6>
Новый абзац – тег <P> Атрибут – ALIGN (выравнивание ) ={ LEFT, RIGHT, CENTER, JUSTIFY} <BODY> <P> Первый абзац <P ALIGN=CENTER> Второй абзац </BODY> Код HTML Отображение
Разрыв строки – тег <BR> Текст можно разбить на c троки произвольно <BODY> Текст <BR> можно разбить на <BR> c троки произвольно </BODY> Код HTML Отображение
Предварительно отформатированный текст – тег <PRE>…</PRE> <PRE> Текст разбит на строки </PRE> Код HTML Отображение Текст разбит на строки
Теги физического форматирования текста: Полужирный - <B>…</B> Курсив - <I>…</I> Подчеркнутый - <U>…</U> Зачеркнутый - <S>…< / S> или <STRIKE>…</STRIKE> Верхний индекс - <SU P >…</SU P > Нижний индекс - <SUB>…</SUB>
Горизонтальная линия – непарный тег <HR> Атрибуты: ALIGN (выравнивание) ={LEFT, RIGHT, CENTER} WIDTH ( ширина) SIZE ( толщина) COLOR ( цвет) Часть1 <HR COLOR=RED SIZE=4> Часть2 Код HTML Отображение
Определение параметров фрагмента текста – тег <FONT>…</FONT> Атрибуты: COLOR - цвет текста FACE гарнитура шрифта SIZE размер шрифта
Атрибут SIZE тега <FONT> SIZE = {1,2,3,4,5,6,7} По умолчанию SIZE=3 Для MS Internet Explorer единицы 1 2 3 4 5 6 7 пункты 8 10 12 14 18 24 36
По умолчанию размер шрифта 3.< BR > < FONT SIZE =+3> Размер увеличен на 3 ед.</FONT><BR> < FONT SIZE =2> Размер - 2 единицы.</FONT><BR> Код HTML Отображение
Атрибут FACE тега <FONT> <FONT FACE=”VERDANA”, “ARIAL”, “HELVETICA”> Это - шрифт Symbol:< FONT FACE ="symbol"> abcd </ FONT > Код HTML Отображение
BGCOLOR – цвет фона документа BACKGROUND – фоновое изображение TEXT – цвет текста LINK – цвет непросмотренной ссылки VLINK – цвет просмотренной ссылки ALINK – цвет просматриваемой ссылки
Способы указания цвета: Название цвета Схема RGB
R G B - Red - Green - Blue, Красный - Зеленый - Синий Интенсивность компоненты записывается двузначным шестнадцатеричным числом. Шестнадцатеричные цифры: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F A 26720
<BODY BGCOLOR=MAROON TEXT=“#256AC1”>
Атрибут direction – указывает направление движения: Direction = right - слева направо Direction = left – справа налево < Marquee = right> Внимание! </ marquee> <marquee> текст </ marquee>
Вставка графического изображения: тег <IMG> (непарный) Обязательный атрибут SRC указывает адрес графического файла <IMG SRC=“../image/ris.gif”>
Атрибуты тега <IMG> ALIGN - выравнивание текста относительно изображения WIDTH и HEIGHT – ширина и высота в пикселях или процентах от размеров экрана BORDER – толщина рамки вокруг изображения в пикселях HSPACE и VSPACE – пустые поля вокруг изображения в пикселях ALT – альтернативный текст
Альтернативный текст <IMG SRC=“../../image/ris.gif” ALT=“ По-моему, это лайка ”> MSIE отображает графику MSIE не отображает графику
Указатель ссылки – тег <A>…</A> Адресная часть ссылки – атрибут HREF тега <A> Хотите ознакомиться с моей <A HREF=“biography.htm”> биографией </A> ? Зайдите на сайт <A HREF=“http://www.gymn22.minsk.edu.by”> Гимназия 22 г.Минска </A> <A HREF=“mailto:olga@tut.by”> Пишите мне! </A>
Указатель ссылки – изображение <IMG SRC=“../../image/ris.gif”> <A HREF=“dog.htm”> </A>
Slide-Share