ЯЗЫК РАЗМЕТКИ ГИПЕРТЕКСТА. HTML-теги HTML-тег напоминает переключатель, с помощью которого вы что-то включаете или выключаете в вашем браузере. Теги могут.

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



Advertisements
Похожие презентации
РАЗМЕЩЕНИЕ ИНФОРМАЦИИ В ИНТЕРНЕТ РАЗРАБОТКА WEB-ПРИЛОЖЕНИЙ.
Advertisements

Форматирование текста на Web-странице Пока наша страница выглядит не слишком привлекательно: мелкий шрифт чёрного цвета на белом фоне. С помощью тэгов.
HTML (HyperText Markup Language). Основные понятия Элемент – конструкция языка HTML. Он состоит из 3 частей: открывающий тег, содержимое, закрывающий.
(HyperText Markup Language) – язык гипертекстовой разметки.
Основы Html HTML – HyperText Markup Language – язык разметки гипертекста
Язык HTML Web-дизайн Web – World Wide Web (WWW) Всемирная паутина. Design – проектирование, конструирование. Web-дизайн – проектирование в Интернете.
Структура HTML- документа. Терминология Элемент - конструкция языка HTML. Это контейнер, содержащий данные и позволяющий отформатировать из определенным.
Основы языка HTML Теги разметки документа. Тег (tag - указатель, метка) Команда или фрагмент кода, который описывает определенный элемент документа HTML.
2 Стили оформления текста жирный ( bold ) Вася курсив ( italic ) Вася подчеркивание ( underline ) Вася зачеркивание ( strike out ) Вася верхний индекс.
HTML (HyperText Markup Language). Основные понятия Элемент – конструкция языка HTML. Он состоит из 3 частей: открывающий тег, содержимое, закрывающий.
Основы HTML и CSS Ссылки и иллюстрации. Ссылки и иллюстрации: Механизмы адресации на ресурсы в Internet. Реализация механизма в языке HTML Создание гиперссылок.
Язык разметки текста HTML. HTML-страница HTML-страница представляет собой простой текстовый файл, в котором наряду с текстом присутствуют специальные.
Т а б л и ц ы в. Таблица в HTML организуется как набор столбцов и строк. Таблицы являются стандартом HTML. В первом приближении таблица Web-страницы –
был разработан британским учёным Тимом Бернерсом-Ли приблизительно в годах. это язык разметки гипертекста.
Web-страницы и Web-сайты. Структура Web- страницы.
Какой тег является тегом перевода строки? 1.BR 2.TR 3.HR 4.I.
Основные понятия HTML расшифровывается HyperText Markup Lang uage (в переводе означает Язык Разметки ГиперТекста). HTML предназначен для создания веб-
HTML HTML – это язык для создания Web-ресурсов. HTML (англ. Hyper Text Markup Language ) язык разметки гипертекста.
Задание: изучить тему, записать все теги форматирования.
Название страницы содержание страницы Структура любого HTML файла.
Транксрипт:

ЯЗЫК РАЗМЕТКИ ГИПЕРТЕКСТА

HTML-теги HTML-тег напоминает переключатель, с помощью которого вы что-то включаете или выключаете в вашем браузере. Теги могут быть написаны заглавными и строчными буквами. Наиболее мудро в тегах использовать заглавные буквы, чтобы они выделялись в тексте.... Теги, в основном, используются попарно. Открывающий тег включает, закрывающий тег выключает.... Иногда теги имеют один или несколько атрибутов. Атрибуты предоставляют дополнительную информацию для браузера. Тег говорит браузеру ЧТО делать, а атрибут говорит КАК это делать....

Всегда обращайте внимание на порядок расположения тегов: Верно: Неверно: HTML-теги

простое название содержание страницы простое название содержание страницы простое название содержание страницы простое название содержание страницы Структура HTML-документа

Параметры документа задаются через тег. Параметры – это специальные символьные команды, которые «понимает» браузер. Атрибуты тега BODY bgcolor цвет фона задан по схеме RGB (Красный Зеленый Синий), 6-разрядное шестнадцатеричное число (#RRGGBB) или имя цвета (например red - Красный, green - Зеленый, blue - Синий) backgroundфон - графический файл textцвет текста linkцвет ссылки alinkцвет активной ссылки vlinkцвет посещенной ссылки Параметры документа

Заглавие документа Это наш пример!!! Параметры документа: пример

Атрибуты тега META descriptionописание документа keywords ключевые слова, разделенные запятыми Индексирование документы HTML-документы могут содержать набор ключевых слов и других вспомогательных параметров, такие как заглавие, описание сайта, авторство для индексирования и лучшего нахождения поисковыми системами страницы. Эти параметры обозначены в META-тегах.

Для здания кодировки используется тег META, стоящий в теге HEAD. Атрибуты тега для задания кодировок: http-equivcontentкодировка Content-Type text/html; charset=windows Кириллица Windows Content-Type text/html; charset=KOI8-R Кириллица KOI8-R Content-Type text/html; charset=iso Кириллица ISO другие кодировки... Кодировка страницы

Заглавие документа Вася Содержание документа: автоматически отображается на Кириллице! Кодировка страницы: пример

В HTML существуют специальные теги для заголовков: от Н1 (самого крупного) до Н6 (самого мелкого): Заголовок 1 Заголовок 2 Заголовок 3 Заголовок 4 Заголовок 5 Заголовок 6 Заголовки

Boldжирный Italicнаклонный Underline подчеркнутый Strikethrough зачеркнутый Bold Italic Underline Strikethrough Bold & Italic Стили текста

Шрифт задаётся тегом FONT. Цвет, размер и шрифт выбраны. Атрибуты тега FONT Face имена шрифтов, разделенные запятыми Sizeразмер от 1 до 7 (по умолчанию 3) Colorцвет шрифта Шрифт

Неразрывный пробел – (non-breaking space). Перенос строки – Размещение текста в том виде, в котором он представлен –... Пример: Предварительное форматирование текста // * // Mitsubishi Galant Mitsubishi Galant. Начало нового абзаца! Предварительное форматирование

Верхний индекс - тег SUP, а нижний - SUB. X 3 A 3 Верхние и нижние индексы

Тег нового абзаца Значение CENTER - центрирование Значение RIGHT - выравнивание по правому краю. Значение LEFT - выравнивание по левому краю Выравнивание Атрибут тега ALIGNВЫРАВНИВАНИЕ leftпо левой границе centerпо центру rightпо правой границе justifyпо ширине

Графика на Web-страницах На Web-страницах возможно размещать графическую информацию. Желаемым условием графики в сети является небольшой размер файлов, наиболее часто реализуется в форматах GIF и JPEG. ФорматДиапазон цветов Прозрачност ь Анимация GIFот 2 до 256Да JPEG 16 милионов или 256 оттенков (Grayscale) Нет

Для публикаций изображений используется тег IMG: Графика на Web-страницах Атрибуты тега IMG SRCимя графического файла и путь до него WIDTHширина изображения в пикселах HEIGHTвысота изображения в пикселах BORDERширина рамки вокруг изображения в пиксели ALTальтернативный текст изображения ALIGNрасположение на экране: Left - слева, Right – справа

Картинку можно разместить справа от текста... Графика на Web-страницах: пример

Атрибут ALIGN дает возможность разместить текст на Web-странице между двумя изображениями... Графика на Web-страницах: пример

Этот текст выровнен по верхней кромке изображения Графика на Web-страницах: пример Этот текст выровнен по средней оси изображения Этот текст выровнен по нижней кромке изображения

Графика на Web-страницах: пример

Ссылки на Web-страницах Ссылки служат для перехода с одной страницы на другую, перенаправление по протоколам ссылок и прочее. Реализуются с помощью тега A. Атрибуты тега A href Имя и путь к странице Интернет-адрес с именем протокола: Ссылка отправления письма на mailto: Переход на ссылку внутри документа # target имя окна, в которое отправит ссылка: _blank - открывает ссылку в новом окно браузера _top - окно стоящее поверх остальных _parent - открывает ссылку в родительском окне (по умолчанию) name имя ссылки в документе

Ссылки на Web-страницах Ссылка в пределах одного сайта: Заходите в гости! Ссылка на ресурс Интернет: Ссылка на сайт гимназии 6 Ссылка на ресурс Интернет: Текст является ссылкой на документ example.html на сайте в папке HTML Ссылка на адрес электронной почты: Присылайте письма!

Ссылки на Web-страницах Ссылка на метку внутри данного документа: Переход по метке – переход к строке этого же документа, помеченной Картинка-ссылка Ссылка на произвольный файл: Скачать программу

Ссылки на Web-страницах Абсолютные ссылки: Текст является ссылкой на документ example.html на сайте в папке HTML Относительные ссылки: Ссылка на файл example.html лежащий в папке HTML сайта Относительные ссылки:

Списки на Web-страницах МАРКИРОВАННЫЕ СПИСКИ: – начало текста списка – начало каждого элемента в списке Раз Два Три Четыре Пять Атрибут TYPE позволяет изменить вид маркера: ЗначениеПример circle disk square Раз Два Три Четыре Пять

Списки на Web-страницах НУМЕРОВАННЫЕ СПИСКИ: – начало текста списка – начало каждого элемента в списке Раз Два Три Четыре Пять Атрибут TYPE позволяет изменить стиль нумерации: ЗначениеПример AA, B, C aa, b, c II, II, III iI, ii, iii 11, 2, 3 Раз Два Три Четыре Пять

Списки на Web-страницах Атрибуты START и VALUE позволяют изменить порядок нумерации списка: START – дает возможность присвоить начальному элементу номер, отличный от 1; VALUE – принудительно назначает элементу произвольный номер. Иванов Сидоров Пупкин

Списки на Web-страницах Список с несколькими уровнями вложенности: форматирование текста жирность; наклон; цвет работа с абзацами

Списки с графическими маркерами Картинки для маркеров должны быть небольшого размера, соответствовать форматированию текста. Образцы маркеров можно найти на сайтах: и Раз Два Три Четыре Пять Для указания способа вертикального выравнивания текста относительно границ маркеров можно воспользоваться атрибутом ALIGN (top, middle, bottom) тега IMG: Раз Атрибут HSPACE тега IMG позволит отделить картинку маркера от текста: Раз