Download ppt - языка Html

Презентация подготовлена учеником Школы №15 Яшиным Владимиром.

Особенности HTML-документов

Web - редакторы

Основные тэги HTML - документов

Список цветов

Форматирование текста

Таблицы

Web - обозреватели

СОДЕРЖАНИЕСОДЕРЖАНИЕ

Основы форматирования html-документа

Основы языка html

HTML (Hyper Text Markup Language, язык разметки гипертекста) это язык Всемирной паутины.

форматирование текстовой части осуществляется с помощью команд, задающих стиль шрифта, заголовков и кадров;

имеется возможность включения рисунков, диаграмм, анимации, видеоклипов, музыкального и речевого сопровождения, текстовых спецэффектов (бегущая строка), гиперссылок;

с помощью команд языка можно создавать таблицы и форматировать текст вручную;

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

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

Основные особенности языка HTML:

default.htm или index.htm

Web-страница – документ, написанный на HTML,

формата *.htm или *.html

Web-сайт-это набор Web-страниц, подчиненных общей тематике и объединенных в единое целое.

http://www.good.ru/good.html

http://www.good.ru/goodfolder1/goodfolder2/goodpage.html

http://www.goodsite.ru

Internet Explorer

Mozilla Firefox

Opera

Safari

Google Chrome

Наиболее популярные Web-обозреватели:

HTMLHTML--редакторыредакторы

Редакторы тэгов

WYSWYG-редакторы

Блокнот, WordPad, MS Word

и любые другие программы,

работающие в текстовом

режиме

Специальные редакторы

документов HTML:MS Front Page,

Namo Web-Editor,Macromedia Dreamweaver

Особенности HTML-документов

<body> = <bODy> = <boDy> = <BodY>

HTML-документ не является обычным текстовым документом.

От простого текстового файла HTML-документ отличает присутствие кодов разметки, которые называются тегами.

Тэги заключаются в угловые скобки < и >,

конечный тэг всегда снабжён косой чертой /.

HTML- коды не чувствительны к регистру, то есть

Основные теги HTML-документов

К обязательным относятся теги, указывающие на то, что документ является HTML-документом;

теги заголовков;

теги, делящие документ на логические части.

Тэги бывают

начальными (открывающими)конечными (закрывающими, начинаются со знака "/").

<HTML> <HEAD> <BODY>

</HTML> </HEAD> 

</BODY>

<HTML> <HEAD> <TITLE>Заголовок документа</TITLE> </HEAD>

<BODY>Текст документа

</BODY>

</HTML>

Правильный пример самого короткого HTML-документа:

Основы форматирования HTML-документа

H1,H2,...H6

Используются для создания заголовков текста

P Используется для разметки абзацев

ADDRESS Оформляет текст как почтовый адрес

BLOCKQUOTE

Оформляет текст как цитату

BR Осуществляет перевод строки

HR Вставляет в текст горизонтальную разделительную линию

Текстовые блоки

<HTML><HEAD>

<ТIТLЕ>Создание абзаца</ТIТLЕ></HEAD>

<BODY> Здесь что-то написано.

А здесь новый абзац

Это центрированный абзац. Текст располагается в центре окна браузера



А это абзац, выровненный по правому краю.

</BODY></HTML>

…Пишите по следующему адресу:<ADDRESS>

г. Калуга. ул. Ф. Энгельса, д. 12, МОУ СОШ №31

</ADDRESS>

Редакция журнала "Домосед" выражает благодарностьСидорову Ивану Петровичу за замечательное стихотворение:

<BLOCKQUOTE>Синели красные ромашки, Желтели в небе облака, Синицы в теплый край летели, К истоку двигалась река. 

</BLOCKQUOTE> ...

RGB-коды: #FFFFFF – белый#FF0000 – красный#00FF00 – зелёный#0000FF – синий#000000 – чёрный

Список цветов символов HTML:

aqua - бирюзовыйblack - чёрныйblue - синийgray - серыйgreen - зелёныйlime – ярко-зелёныйsilver – светло-серыйteal – ярко-голубой

maroon – тёмно-красныйwhite - белыйnavy – тёмно-синийolive - оливковыйpurple - фиолетовыйred – красныйyellow - жёлтыйfuchsia – ярко-фиолетовый

Дополнительные цвета:brown - коричневыйorange - оранжевыйcyan – оттенок бирюзовогоpink – розовый

Основы форматирования HTML-документа

BASEFONT Определяет основной шрифт, которым

должен отображаться текст документа

FONT Позволяет изменять цвет, размер и тип шрифта текста

I Выделяет текст курсивом

EM Используется для смыслового выделения текста (курсивом)

B Выделяет текст жирным шрифтом

STRONG Усиленное выделение текста (жирным)

Форматирование текста

UВыделяет текст подчеркнутым

S Выделяет текст перечеркнутым

BIG Отображает текст увеличенным шрифтом (относительно текущего)

SMALL Отображает текст уменьшенным шрифтом (относительно текущего)

SUP Отображает текст со сдвигом вверх (верхний индекс)

SUB Отображает текст со сдвигом вниз (нижний индекс)

<BODY><BASEFONT SIZE="3">

Текст документа шрифтом 3 размера

Слегка увеличиваем шрифт

Продолжаем шрифтом 3 размера

Увеличенный красный шрифт



Моноширинный фиолетовый текст 3 размера Смотрите, какие разные шрифты можно использовать в Internet Explorer.

</BODY>

<BODY>Текст с курсивом

Порой в России встречаютсядействительно талантливые веб-мастера. Но только не друг с другом.



Текст с выделенным словом

Я сильный, но легкий. 

Подчеркнутый текст Лена + <S>Вася</S> Коля = Love Текст с <BIG>увеличенным</BIG> словом 

Небоскребы, небоскребы, а я

маленький такой. Microsoft TM 

X1 = B1 + C1 </BODY>

Включение таблиц в HTML-документ

Элементы для создания таблиц

TABLE Создаёт таблицу

CAPTION Задаёт заголовок таблицы

TR Создаёт новый ряд ячеек таблицы (строку)

TD Создаёт ячейку с данными в текущей строке

<TABLE > <TR> <TD>a</TD> <TD>b</TD> <TD>c</TD> </TR> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR></TABLE>

Параметры элементов TABLE, TR и TD

Параметры элемента TABLE

ALIGN Определяет способ горизонтального выравнивания таблицы (left, right, center, justify)

VALIGN Определяет способ вертикального выравнивания таблицы (top, bottom, middle)

BORDER Определяет ширину внешней рамки таблицы

WIDTHHEIGHT

Задают таблицы в пикселях

BGCOLOR Определяет цвет фона ячеек таблицы

CELLPADDINGCELLSPACING

Расстояние между

высоту

ширину

ячеексоседнихграницами

содержимымеёиячейкирамкой


Параметры элемента TR

ALIGNОпределяет способ горизонтального выравнивания в ячейках данного ряда (left, right, center, justify)

VALIGNОпределяет способ вертикального выравнивания в ячейках данного ряда (top, bottom, middle)

BGCOLOR Определяет цвет фона ячеек таблицы


Параметры элемента TD

ALIGNОпределяет способ горизонтального выравнивания содержимого ячейки (left, right, center, justify)

VALIGNОпределяет способ вертикального выравнивания содержимого ячейки (top, bottom, middle)

WIDTHHEIGHT

Задают ячейки в пикселях

BGCOLOR Определяет цвет фона ячейки

COLSPANROWSPAN

Определяет количество , на которые простирается ячейка

высоту

ширину

строк

столбцов