HTML (HyperText Markup Language). Основные понятия Элемент – конструкция языка HTML. Он состоит из 3 частей: открывающий тег, содержимое, закрывающий.

Презентация:



Advertisements
Похожие презентации
HTML (HyperText Markup Language). Основные понятия Элемент – конструкция языка HTML. Он состоит из 3 частей: открывающий тег, содержимое, закрывающий.
Advertisements

(HyperText Markup Language) – язык гипертекстовой разметки.
Язык HTML Web-дизайн Web – World Wide Web (WWW) Всемирная паутина. Design – проектирование, конструирование. Web-дизайн – проектирование в Интернете.
HTML (HyperText Markup Language) - Язык Разметки Гипертекста.
РАЗМЕЩЕНИЕ ИНФОРМАЦИИ В ИНТЕРНЕТ РАЗРАБОТКА WEB-ПРИЛОЖЕНИЙ.
Название страницы содержание страницы Структура любого HTML файла.
1 Web-конструирование Шестаков Александр Петрович
Форматирование текста на Web- странице. Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать! Структура HTML-документа.
© Пивоваров Я.А., 2005 г. Появление HTML пришлось на начало 90-х годов благодаря двум протоколам, которые являются базовыми для Internet – TCP (Transmission.
Oсновы HTML Hyper Text Markup Language. Идеологи Тим Бернерс-Ли британский учёный (1989) Тед Нельсон - американский социолог, изобретатель гипертекста.
Тема : Использование различных приемов форматирования. Таблицы в HTML.
Основы Html HTML – HyperText Markup Language – язык разметки гипертекста
Форматирование текста на Web-странице Пока наша страница выглядит не слишком привлекательно: мелкий шрифт чёрного цвета на белом фоне. С помощью тэгов.
Таблицы Минимальный набор тегов и их параметров для создания таблицы. Документ может содержать произвольное число таблиц, причём допускается вложенность.
Секция «Основы сайтостроения» Кротова Т.В. Овчарова О.П.
Тэг - создает таблицу. Все прочие элементы таблицы – текст, рисунки, списки - должны быть вложенными в него. Допускается также вложение таблиц одна в.
Язык разметки гипертекста НТМL (HyperText Markup Language)
Теги, создающие таблицу внешний тег таблицы (начинает и заканчивает таблицу) тег, создающий строку тег создающий.
Язык гипертекстовой разметки. Copyright Baltazar and Mirron corp.
HTML – ЯЗЫК РАЗМЕТКИ ГИПЕРТЕКСТА. СТРУКТУРНЫЕ ТЕГИ.
Транксрипт:

HTML (HyperText Markup Language)

Основные понятия Элемент – конструкция языка HTML. Он состоит из 3 частей: открывающий тег, содержимое, закрывающий тег. Элементы могут быть вложенными друг в друга. Тег – начальный и конечный маркер элемента. Атрибут – параметр или свойство элемента. Атрибуты располагаются внутри начального тега и отделяются друг от друга пробелами. кавычки обязательны (рекомендованы) имена тегов и атрибутов нечувствительны к регистру для любого из атрибутов определено значение по умолчанию форматирование текста, введённое с клавиатуры игнорируется браузером (есть исключение – тег ) содержимое

Структура HTML страницы заголовок окна основное содержимое Документ HTML Заголовок документа Внешний заголовок Тело документа

Базовые теги разметки … - параграф Абзац, выровненный вправо …. - общее выравнивание по центру (устарел) - переход на новую строку, атрибут clear задаёт выравнивание следующей строки …. … - запрет переноса на новую строку …… - форматированный текст …. - заголовок (N=1..6) right left center justify right left all none right left center

Форматирование текста … - полужирный (bold) … - курсив (italic) … - подчёркивание (underline).. - увеличить размер шрифта.. - уменьшить размер шрифта.. (.. ) - перечёркивание.. - нижний индекс (subscript).. - верхний индекс (superscript).. - телетайп (моноширинный шрифт)

Выделение текста … - выразительный текст … - определение … - выделение … - цитата (абзац с отступом).. - цитата внутри абзаца.. - цитаты и ссылки (курсив).. - адрес (курсив).. - ввод с клавиатуры (моноширинный).. - аббревиатура (сокращение ).. - акроним Теги для фрагментов программ.. - текст программы.. - примеры вывода данных.. - переменные то же что и моноширинный

Разделитель size – толщина линии в пикселах width – длина линии в пикселах либо в % от ширины окна (просто число – пикселы, со знаком % - проценты ) noshade – убрать объёмное представление линии color – цвет разделителя, задаётся либо словом, либо RGB схемой color=redкрасный color=lightgrey светло-серый color=#ffff00 жёлтый right left center

Шрифт (устарел) …. face - семейство шрифтов (Напр. Times, Arial, sherif) size – размер, от 1 до 7, если без знака, то размер, если со знаком, то увеличение/уменьшение относительно текущего размера color – цвет, задаётся либо словом, либо RGB схемой -size - базовый размер шрифта (N=1..7). По умолчанию=3. -face – семейство шрифтов (Напр. Times, sherif)

Списки - ненумерованный список … - нумерованный список … circle disc square 1iIaA1iIaA type: 1 - 1, 2, 3, 4…. i – i, ii, iii, iv…. I – I, II, III, IV… a – a, b, c, d… A – A, B, C, D… start: начальный номер списка

Списки с определениями - начало списка … - пункт 1 … - определение 1 пункта 1 … - пункт 2 … - определение 1 пункта 2

Escape последовательности > &#62 "" &#34 (пробел) &#160 && &#38 ©© &#169 «« &#171 » » &#187 | ¦ &#166 ±± &#177 ·· &#183 °° &#176

Таблицы Таблица 1 Колонка 1 Колонка Колонка 1 Колонка Таблица 1

Таблицы (атрибуты тегов 1) Атрибуты тега - таблица border=… - ширина боковой грани рамки в пикселах (или 0) align=… - выравнивание таблицы по горизонтали (left, center, right) width=… - ширина таблицы в пикселах или процентах cellspacing=… - ширина фронтальной грани рамки cellpadding=… - отступ вокруг содержимого ячейки bgcolor=… - цвет фона ячеек таблицы background=URL - картинка, как фон ячеек таблицы Атрибуты тега - заголовок таблицы align=… - расположение заголовка таблицы top – над таблицей bottom – под таблицей left – над таблицей и влево right – над таблицей и вправо

Таблицы (атрибуты тегов 2) Атрибуты тега - строка таблицы align=… - выравнивание строки по горизонтали (left, center, right) valign=… - выравнивание строки по вертикали (top, bottom, center, baseline) Атрибуты тегов и - ячейка таблицы align=… - выравнивание ячейки по горизонтали (left, center, right) valign=… - выравнивание ячейки по вертикали (top, bottom, center, baseline) width=… - ширина ячейки в пикселах или процентах от всей таблицы height=… - высота ячейки в пикселах bgcolor=… - цвет фона ячеек таблицы background=URL - картинка, как фон ячеек таблицы colspan=N - объединить N столбцов rowspan=N - объединить N строк

Гиперссылки Ссылки на документы … _blank – открыть в новом окне _self – открыть в том же окне Ссылки на разделы (внутри документа) … - метка … - переход на метку Ссылки на адрес … Ссылки на файл …

Атрибуты тега … background=URL - картинка, как фон страницы bgcolor=… - цвет фона страницы text=… - цвет текста на странице link=… - цвет гиперссылки vlink=… - цвет посещённой гиперссылки alink=… - цвет активной гиперссылки

Графика src=URL - URL графического файла align=… - выравнивание картинки по горизонтали (left, center, right, top, bottom, middle) width=… - ширина картинки в пикселах height=… - высота картинки в пикселах alt=… - альтернативный текст vspace=… - отступ по вертикали от границ картинки hspace=… - отступ по горизонтали от границ картинки border=… - ширина рамки вокруг картинки (только если картинка используется, как гиперссылка)