1 Основы языка HTML Идея решения проблемы обмена документами между различными компьютерами и приложениями через Internet основана на языке разметки гипертекста. - презентация

1 1 Основы языка HTML Идея решения проблемы обмена документами между различными компьютерами и приложениями через Internet основана на языке разметки гипертекста HTML(HyperText Markup Language). Разметка документа - это описание различных фрагментов документа и их взаимного расположения. Выполняется разметка с помощью символов ASCІІ, а точнее, арабских цифр, символов латинского алфавита и некоторых знаков препинания. Из этих символов набираются команды языка HTML - теги, иначе говоря, дескрипторы. Термин "гипертекст" впервые был введен Тедом Нельсоном в 60-х годах, то есть задолго до появления Internet. Понятие "гипертекст" обозначает электронный документ, который содержит в себе ссылки на другие документы.

2 2 Основы языка HTML Разработка языка разметки HTML привела в итоге к новой технологии распространения гипертекстовых документов в Internet. Однако для широкого распространения World Wide Web, кроме языка HTML, потребовалось разработка протокола передачи гипертекста HTTP (HyperText Trasport Protocol – протокол передачи гипертекста), который позволил осуществить обмен документами HTML. Именно этот протокол дал возможность приложению-клиенту находить и использовать ресурсы, хранящиеся на другом компьютере. Протокол HTTP занимается поиском и загрузкой нужного документа всякий раз, когда пользователь щелкает мышью по какому-либо URL (адрес внешнего информационного ресурса). Основные разработчики: Тим Беренс-Ли, 1989 – основатель языка, создал базовый вариант HTML. Д. Раггетт (Hewlett-Packard Labs), HTML+. Дэн Конноли, HTML 2. В настоящее время версия с 1994 г. - HTML 4.0.

3 3 Основы языка HTML Основные элементы языка – команды (ТЭГИ) Тэги: … Параметры тэгов – указываются внутри тэга, разделяются пробелами: Имя_параметра = Значение_параметра Общая структура документа HTML Содержание заголовка Содержание тела документа

4 4 Основы языка HTML Элементы заголовка html-документа (тэг HEAD) Название документа Базовый адрес Поисковый документ Общая гипертекстовая ссылка Определение основных способов поиска и ключевых слов в документе для поисковых роботов

5 5 Основы языка HTML Элементы стиля и форматирования текста. Текст, заключенный между открывающим и закрывающим тэгами, воспроизводится в соответствии со значением тэга и его параметров. Элемент (тэг)ЗначениеКомментарий..... Курсив(Italic)... Усиление (полужирный)(BOLD)... Подчеркивание... Перечеркнутый текст … Заголовки, n = 1,2, …,6, размеры и шрифт отличаются от обычного текста По мере увеличения важность заголовка снижается, позволяет делать ссылки на фрагменты документа … АбзацЗакрывающий тэг необязателен … Принудительный перенос на следующую строку Закрывающий тэг необязателен … Определение основного текста документа Параметры: SIZE = n FACE = Имя_шрифта COLOR = ="#$$$$$$" (Шестнадцатеричное число. Порядок: красный/зеленый/синий) ALIGN = LEFT|CENTER|RIGHT – выравнивание текста

6 6 Основы языка HTML Списки ЭлементЗначениеКомментарий..... Ненумерованный список Дополнительные тэги: … - заголовок списка … - элемент списка TYPE=DISC|CIRCLE|SQUARE – тип метки у списка..... Нумерованный список Дополнительные тэги: … - заголовок списка … - элемент списка TYPE=A|a|I|i|1 – тип нумерации OL START=? – с какого значения начать … Список определений Дополнительные тэги: … - Понятие, аббревиатура … - расшифровка понятия, аббревиатуры … Список типа Меню … - элемент меню

7 7 Основы языка HTML Гиперссылки. Текст_гиперссылки, где Имя _URL – Полный адрес или относительный путь, определяющий источник для перехода по гиперссылке, Текст_гиперссылки – место в документе, которое будет гиперссылкой. Можно определить гиперссылку на определенное место в другом документе или в этом же документе. Для этого место, на которое планируется сделать гиперссылку, обозначается следующим образом (либо в данном документе, либо в другом внешнем документе): текст, где Имя_для_ссылки – любое имя (идентификатор) Текст – тот фрагмент текста, на который будет переводить гиперссылка. Для того, чтобы сделать гиперссылку на этот фрагмент необходимо: Текст гиперссылки - для ссылки на внешний файл. Текст гиперссылки - для ссылки на место в текущем документе. Вывести значение гиперссылки в другом окне:

8 8 Основы языка HTML Вставка рисунков Выравнивание картинки относительно страницы: ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT Выравнивание картинки относительно основного текста страницы: ALIGN=TEXTTOP|ABSMIDDLE|BASELINE|ABSBOTTOM Фон и цвета Фоновая картинка: Цвет фона: (порядок: красный/зеленый/синий) Цвет текста: Цвет ссылки: Пройденная ссылка: Активная ссылка:

9 9 Основы языка HTML ЭлементЗначениеКомментарий..... Определение таблицыДополнительные параметры: Окантовка таблицы BORDER=n (n=0,1,2) Расстояние между ячейками CELLSPACING=n (n=0,1,2) Дополнение ячеек CELLPADDING=n (n=0,1,2) Желаемая ширина WIDTH=n (в точках) Ширина в процентах WIDTH="%" (проценты от ширины страницы) Выравнивание всей таблицы относительно страницы ALIGN = LEFT|RIGHT| CENTER|MIDDLE|BOTTOM … Определение строки таблицы … Определение ячейки строкиШирина ячейки. Определения ячеек должно быть внутри определения строки. Количество ячеек определяется заранее. WIDTH="%" (проценты от ширины строки) Сумма ширины всех ячеек должна равняться 100%. Выравнивание внутри ячейки ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM Текст в ячейке без перевода строки NOWRAP Растягивание по колонке COLSPAN=n Растягивание по строке ROWSPAN=n Таблицы

10 10 Основы языка HTML Простое текстовое поле: Поле checkbox: Поле radiobutton: Поле password: Поле hidden: Кнопка Submit: Кнопка Reset: Графическая кнопка: Ввод интерактивных форм. Примеры полей для ввода: Простое текстовое поле: Поле checkbox: Поле radiobutton: Поле password: Поле hidden: Кнопка Submit: Кнопка Reset: Графическая кнопка: