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

Слайд #1

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

Слайд #2

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

Слайд #3

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

Слайд #4

* Основы языка HTML Элементы заголовка html-документа (тэг HEAD) Название документа Название документа Базовый адрес

Слайд #5

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

Слайд #6

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

Слайд #7

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

Слайд #8

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

Слайд #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

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