HTML (HyperText Markup Language) - Язык Разметки Гипертекста.

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



Advertisements
Похожие презентации
Язык HTML Web-дизайн Web – World Wide Web (WWW) Всемирная паутина. Design – проектирование, конструирование. Web-дизайн – проектирование в Интернете.
Advertisements

Название страницы содержание страницы Структура любого HTML файла.
Форматирование текста на Web-странице Пока наша страница выглядит не слишком привлекательно: мелкий шрифт чёрного цвета на белом фоне. С помощью тэгов.
Oсновы HTML Hyper Text Markup Language. Идеологи Тим Бернерс-Ли британский учёный (1989) Тед Нельсон - американский социолог, изобретатель гипертекста.
HTML (HyperText Markup Language). Основные понятия Элемент – конструкция языка HTML. Он состоит из 3 частей: открывающий тег, содержимое, закрывающий.
РАЗМЕЩЕНИЕ ИНФОРМАЦИИ В ИНТЕРНЕТ РАЗРАБОТКА WEB-ПРИЛОЖЕНИЙ.
(HyperText Markup Language) – язык гипертекстовой разметки.
С ИСПОЛЬЗОВАНИЕМ ЯЗЫКА ГИПЕРТЕКСТОВОЙ РАЗМЕТКИ ДОКУМЕНТА HTML Создание Web - страницы.
HTML – ЯЗЫК РАЗМЕТКИ ГИПЕРТЕКСТА. СТРУКТУРНЫЕ ТЕГИ.
HTML (HyperText Markup Language). Основные понятия Элемент – конструкция языка HTML. Он состоит из 3 частей: открывающий тег, содержимое, закрывающий.
11 класс. №026. Вставка таблиц в HTML-документ.
Тема : Использование различных приемов форматирования. Таблицы в HTML.
Какой тег является тегом перевода строки? 1.BR 2.TR 3.HR 4.I.
Рогозина Светлана Яковлевна МБОУ СОШ 12 МО город-курорт Анапа Краснодарский край, учитель информатики.
Создание Web-страницы.. Cтруктура HTML документа (основные разделы) Служебная информация информация о имени страницы Web документ.
Тема 10. ОСНОВЫ ЯЗЫКА HTML. ОСНОВЫ ЯЗЫКА HTML HTML (HyperText Manipulation Language) язык, предназначенный для создания форматированного текста, который.
Oсновы HTML - 2 Hyper Text Markup Language. Структура таблицы …
Основы языка HTML Теги разметки документа. Тег (tag - указатель, метка) Команда или фрагмент кода, который описывает определенный элемент документа HTML.
Форматирование текста Вставка рисунка Таблицы Гиперссылки Круговой сектор Структура документа.
Материалы к домашней работе для 8-х классов. Создание Web-страницы.
Транксрипт:

HTML (HyperText Markup Language) - Язык Разметки Гипертекста

Создание Web-страниц. Основные теги языка HTML.Основные теги языка HTML. Атрибуты таблицы. Графические элементы.

Структура простого HTML-документа Моя первая страничка... прочие теги и текст... содержание

Основные теги языка TML. Тег Основной тег документа. Не содержит атрибутов. Все прочие теги строятся в области действия данного тега. Тег парный. Тег "Голова" HTML-документа. В нем располагаются теги заголовка-названия документа и различная вспомогательная информация, такая как язык документа и имя автора. Тег парный. Содержит заголовки HTML- документа. Также не содержит атрибутов. Тег Определяет название страницы. Браузер показывает его в заголовке окна при открытии страницы. Тег парный. Тег Отмечает начало и конец непосредственно содержимого веб-страницы. Тег парный. Основные атрибуты: bgcolor - цвет фона страницы background - фоновый рисунок содержание

Форматирование текста Тег Задает параграф в тексте. Тег парный. Основной атрибут: align - выравнивание текста Пример: текст по правому краю содержание

Тег Определяет границы нумерованного списка. Тег парный. Тег Определяет границы ненумерованного списка. Тег парный. Тег Определяет элемент списка (нумерованного или ненумерованного). Тег парный. Списки содержание

Пример: Москва Рим 1.Москва 2.Рим 3.Париж содержание

Тег Задает шрифт для блока текста. Тег парный. Атрибуты: face - начертание(шрифт) color - цвет size - размер Пример: этот текст будет зеленого цвета содержание

Тег Выделяет блок текста жирным шрифтом. Тег парный. Тег Выделяет блок текста курсивным шрифтом. Тег парный. Тег Переводит каретку на новую строку. Тег не парный содержание

Таблицы: содержание

Тег Описывают границы таблицы. Тег Описывают строки таблицы. Тег Описывают столбцы таблицы. В каждой строке должно быть одинаковое количество ячеек. содержание

Основные атрибуты Основные атрибуты border - толщина рамки. Задается в пикселях (единицах измерения экрана). Пример: border="1" width - ширина таблицы. Может задаваться в пикселях, а может в процентах (от размера окна, в котором просматривается страница). height - высота таблицы. Как и в предыдущем случае, может задаваться в пикселях, а может в процентах. align - выравнивание информации в ячейке по горизонтали. Значения: left (по умолчанию), center, right. background - путь к фоновой картинке. Например: "/images/back.gif". bgcolor - цвет фона. Как и цвет шрифта может содержать код цвета или его имя. содержание

Основные атрибуты и Основные атрибуты и align - выравнивание по горизонтали. valign - выравнивание вертикали. background - фоновый рисунок. bgcolor - цвет фона. colspan - количество занимаемых ячейкой колонок. rowspan - количество занимаемых ячейкой строк. height - высота ячейки. width - ширина ячейки. содержание

Пример 1: Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 Ячейка 1Ячейка 2 Ячейка 3Ячейка 4 содержание

Пример 2: Ячейка1 Ячейка3 Ячейка 4 Ячейка 1 Ячейк а3 Ячейк а4 содержание

Пример 3: Ячейка 1 Ячейка 2 Ячейка 4 Ячейка 1Ячейка 2 Ячейка 4 содержание

Пример 4: Ячейка 11 Ячейка 12 Ячейка 13 Ячейка 21 Ячейка 23 Ячейка содержание

Работа с изображениями В HTML-документах, помимо текста и таблиц, можно использовать графику. HTML, а точнее браузеры поддерживают три формата графических файлов: JPG, GIF, PNG.JPGGIF PNG содержание

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

GIF - предназначен для хранения картинок с ограниченной цветовой палитрой (256 цветов). содержание

PNG - универсальный формат, специально разработанный для передачи изображений через сеть. PNG - формат сжатия без потери качества. содержание

тег -вставка картинки Основные атрибуты: src - источник картинки, src="sample_image.jpg"; width - ширина картинки, width="119"; height - высота картинки, height="89"; alt - подсказка для картинки, alt="кнопка"; border - толщина рамки, border="0". содержание

Использование картинок в качестве фонового заполнения Для страницы, таблицы и ячейки используется один и тот же атрибут - background, который указывает местоположение картинки-фона: background="sample_image.jpg". содержание