Скачать презентацию Основы HTML Вопросы 1 Основные понятия 2 Программы Скачать презентацию Основы HTML Вопросы 1 Основные понятия 2 Программы

L4_Osnovy_HTML.ppt

  • Количество слайдов: 40

Основы HTML Вопросы: 1. Основные понятия 2. Программы для создания HTML – файлов 3. Основы HTML Вопросы: 1. Основные понятия 2. Программы для создания HTML – файлов 3. Программы для просмотра Web – страниц 4. Программы для создания HTML – файлов 5. Пример тега

HTML (Hyper Text Markup Language) язык разметки гипертекста Web-страницы HTML (Hyper Text Markup Language) язык разметки гипертекста Web-страницы

Введение и основные понятия: § Основные сведения о языках разметки: HTML, § § XML, Введение и основные понятия: § Основные сведения о языках разметки: HTML, § § XML, XHTML. Эволюция языков разметки. Цели и задачи языка HTML Что такое WEB-сервер, web-сайт, webстраница и чем они отличаются Что такое тег? Типы элементов. Понятие тегов и атрибутов Структура и правила оформления HTMLдокумента. Основные элементы форматирования текста. Элементы блочной (block) и текстовой (inline) разметки

История март 1995 начало работы над HTML 3 + CSS 1994 Подготовка HTML 2. История март 1995 начало работы над HTML 3 + CSS 1994 Подготовка HTML 2. 0 Консорциум W 3 (W 3 C) www. W 3. org 2010 год HTML 5. 0 ещё в разработке 1991 CERN HTML 22 января 2008 года W 3 C официально объявил "HTML 5 - в разработке" 1986 ISO-8879 SGML 2000 XHTML 1. 0 январь 1997 HTML 3. 2 декабрь 1997 HTML 4. 0 + CSS 2. 0 24 декабря 1999 HTML 4. 01

Основные понятия l Web-сайт l Web-сервер l Web-адрес l Web-страница *. html . . Основные понятия l Web-сайт l Web-сервер l Web-адрес l Web-страница *. html . . .

Как это работает WWW 2 3 4 1 2 3 4 веб-сервер 1 HTML Как это работает WWW 2 3 4 1 2 3 4 веб-сервер 1 HTML PHP CGI ASP. . . 1 2 4 3 HTML 5 index. html jpg, gif, swf, avi, mpg …

Программы для создания HTML – файлов: § Редакторы (HTML Wirtel, HTML Assistant, Web. Edit, Программы для создания HTML – файлов: § Редакторы (HTML Wirtel, HTML Assistant, Web. Edit, Home. Site, Блокнот и т. д. ) § Шаблоны § Программы-преобразователи

Программы для просмотра Web - страниц § Microsoft Internet Explorer § Chrome § Yandex Программы для просмотра Web - страниц § Microsoft Internet Explorer § Chrome § Yandex § Opera и т. д.

Программы для создания HTML – файлов: Блокнот (для создания страницы) Internet Explorer (для интерпретации Программы для создания HTML – файлов: Блокнот (для создания страницы) Internet Explorer (для интерпретации файлов)

§ Гипертекст – это текст, содержащий специальные разметочные теги. § Теги (tag – ярлык, § Гипертекст – это текст, содержащий специальные разметочные теги. § Теги (tag – ярлык, признак) – инструкции браузера, указывающие способ отображения текста.

Пример тега <HTML> </HTML> Типы тегов § Парные (влияет на текст с того места, Пример тега Типы тегов § Парные (влияет на текст с того места, где употреблён тег, до того места, где указан признак окончания его действия) § Непарные

Категории тегов § § § Структурные теги Теги символов Теги форматирования абзацев Теги оформления Категории тегов § § § Структурные теги Теги символов Теги форматирования абзацев Теги оформления списков данных Теги логического форматирования текста § Теги физического форматирования текста

Структура HTML - документа Структура HTML - документа

Структура HTML документа <!DOCTYPE HTML PUBLIC Структура HTML документа Определение типа документа Начало документа Начало заголовка Здесь размещается служебная информация. Пользователь ее не видит. Конец заголовка Начало тела документа Здесь размещается содержание документа. Именно это видит пользователь. Конец тела документа Конец документа

Заголовок документа <html> <head> <title> Заголовок документа </title> </head> <body> . . . Содержание Заголовок документа Заголовок документа . . . Содержание документа. . .

Тело документа <html> <head>. . . Служебная информация. . . </head> Комментарий <body> <h Тело документа . . . Служебная информация. . . Комментарий Мой первый HTML документ

Некоторый текст. Основное содержание текущей страницы. Первый абзац

Второй абзац. Для форматирования текста используют разные элементы языка HTML.

Создать файл в Блокноте (сохраните в файле Пример, указав расширение *. html) <HTML> <HEAD> Создать файл в Блокноте (сохраните в файле Пример, указав расширение *. html) Заголовок HTML – документа Это тело HTML – документа. Здесь можно разместить всё, что угодно.

Создать файл в Блокноте (сохраните в файле Пример, указав расширение *. html) Создать файл в Блокноте (сохраните в файле Пример, указав расширение *. html)

Задание цвета на языке HTML Шестнадцатеричные значения (цветовая система базируется на трёх основных цветах Задание цвета на языке HTML Шестнадцатеричные значения (цветовая система базируется на трёх основных цветах – красном, зеленом и синем – обозначается RGB) Например: #000000, #0000 FF, #FF 0000, #FFFFFF Мнемонические обозначения (название цвета) Например: Red, White, Blue, Green

Пример использования параметра Color: <FONT COLOR=Green> Шрифт размера 6, цвет зелёный </FONT> <BR> или Пример использования параметра Color: Шрифт размера 6, цвет зелёный
или Шрифт размера 6, цвет зелёный

Пример использования параметра Color c тегом <BODY>: <BODY BGCOLOR=#008080> Задание цвета фона <BR> Пример использования параметра Color c тегом : Задание цвета фона

Какие бывают элементы? Блочные (block elements) Структурное форматирование Текстовые (inline elements) Непосредственное форматирование Логическое Какие бывают элементы? Блочные (block elements) Структурное форматирование Текстовые (inline elements) Непосредственное форматирование Логическое форматирование (phrase elements) Нежелательные (deprecated) Устаревшие (obsolete) Новые (new) Элемент С о д е р ж а н и е Открывающий тег Закрывающий тег

Структурированный текст <h 1>Заголовок первого уровня</h 1><p>Элемент P представляет абзац. В нем <b>не могут</b> Структурированный текст Заголовок первого уровня

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

Второй абзац

Как браузер показывает текст? Как браузер показывает текст?

Заголовки <h 1>Заголовок 1</h 1> <h 2>Заголовок 2</h 2> <h 3>Заголовок 3</h 3> <h Заголовки Заголовок 1 Заголовок 2 Заголовок 3 Заголовок 4 Заголовок 5 Заголовок 6

Горизонтальная линия <h 1>Горизонтальная линия</h 1> <hr> <p> Браузеры, которые интерпретируют мягкие переносы, должны Горизонтальная линия Горизонтальная линия

Браузеры, которые интерпретируют мягкие переносы, должны обеспечивать следующую семантику: если строка прекращается в месте мягкого переноса…

Абзац <P> Браузеры, которые интерпретируют мягкие переносы, должны обеспечивать следующую семантику: если строка прекращается Абзац

Браузеры, которые интерпретируют мягкие переносы, должны обеспечивать следующую семантику: если строка прекращается в месте мягкого переноса, в конце первой строки должен отображаться символ переноса.

Если строка не прерывается в месте мягкого переноса, символ переноса отображаться не должен. При выполнении таких операций как поиск и сортировка мягкие переносы всегда должны игнорироваться.

Улучшаем страницу <p> Мой дядя самых честных правил, Когда не в шутку занемог, Он Улучшаем страницу

Мой дядя самых честных правил, Когда не в шутку занемог, Он уважать себя заставил И лучше выдумать не мог.

Мой дядя самых честных правил,

Когда не в шутку занемог,

Он уважать себя заставил

И лучше выдумать не мог.

Принудительный разрыв строки <p>Мой дядя самых честных правил, Когда не в шутку занемог, Он Принудительный разрыв строки

Мой дядя самых честных правил, Когда не в шутку занемог, Он уважать себя заставил И лучше выдумать не мог.

Окончательный вид документа <!-- Форматирование кода с отступами --> <html> <head> <title>Мой первый документ</title> Окончательный вид документа Мой первый документ Мой первый HTML-документ

Евгений Онегин

А. С. Пушкин (отрывок)

Мой дядя самых честных правил, Когда не в шутку занемог, Он уважать себя заставил И лучше выдумать не мог.

Тег Значение атрибута Имя атрибута " src="https://present5.com/presentation/172200648_326147873/image-31.jpg" alt="Атрибуты элементов Атрибут

Тег Значение атрибута Имя атрибута " /> Атрибуты элементов Атрибут
Тег Значение атрибута Имя атрибута

Выровнять по центру

Выровнять по правому краю" src="https://present5.com/presentation/172200648_326147873/image-32.jpg" alt="Используем атрибуты Выровнять по центру

Выровнять по правому краю" /> Используем атрибуты Выровнять по центру

Выровнять по правому краю

Выровнять по ширине Выровнять по левому краю

Толщина разделительной линии
Разделительная линия без тени
Ширина в пикселях

Создаем блочную цитату <blockquote> They went in single file, running like hounds on a Создаем блочную цитату

They went in single file, running like hounds on a strong scent, and an eager light was in their eyes. Nearly due west the broad swath of the marching Orcs tramped its ugly slot; the sweet grass of Rohan had been bruised and blackened as they passed.

Авторское форматирование <pre> Время – начинаю про Ленина рассказ. Но не потому, что горя Авторское форматирование 

 Время – начинаю про Ленина рассказ. Но не потому, что горя нету более, время потому, что резкая тоска стала ясною осознанною болью.

Элемент ADDRESS контактная информация (Блочный элемент, текст отображается курсивом) <p>Мой адрес: <address>Астана, Бараева 205, Элемент ADDRESS контактная информация (Блочный элемент, текст отображается курсивом)

Мой адрес:

Астана, Бараева 205, офис 703, Телефон/факс: 63 -6443

Группировка элементов Элементы DIV и SPAN вместе с атрибутами id и class обеспечивают общий Группировка элементов Элементы DIV и SPAN вместе с атрибутами id и class обеспечивают общий механизм добавления в документы структуры. Эти элементы определяют встраиваемую информацию (SPAN) или информацию уровня блока (DIV), но не налагают никаких других выражений для представления контекста

Блок номер 1
Блок номер 2
Блок номер 3

Первый div
Второй div
Третий" src="https://present5.com/presentation/172200648_326147873/image-37.jpg" alt="Элементы DIV и SPAN
Первый div
Второй div
Третий" /> Элементы DIV и SPAN
Первый div
Второй div
Третий div
Первый span Второй span Третий span

Коротко о цвете Шестнадцатеричная система счисления: 0, 1, 2, 3, 4, 5, 6, 7, Коротко о цвете Шестнадцатеричная система счисления: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F Диапазон: 00 - FF (0 - 255) #00 FF 00 – green (зеленый) #FF 0000 – red (красный) #0000 FF – blue (синий) #FFFFFF – white (белый) #000000 – black (черный) #FFFF 00 – yellow (жёлтый) #FFD 700 - gold (золотой) #FFCC 00 - tangerine (мандариновый) #E 49 B 0 F - gamboge (гуммигут) #FDE 910 – lemon (лимонный) Безопасная палитра цветов: 00, 33, 66, 99, CC, FF (216 сочетаний).

Этот текст синего" src="https://present5.com/presentation/172200648_326147873/image-39.jpg" alt="Раскрашиваем страницу Раскрашиваем страницу

Этот текст синего" /> Раскрашиваем страницу Раскрашиваем страницу

Этот текст синего цвета, а этот - красного.

Горизонтальная линия тоже может быть разноцветная.

Итоги § Документ HTML состоит из элементов гипертекстовой разметки и является гипертекстовым документом § Итоги § Документ HTML состоит из элементов гипертекстовой разметки и является гипертекстовым документом § Элемент состоит из открывающего тега, содержимого и закрывающего тега. Для некоторых элементов закрывающего тега не требуется § Атрибуты располагаются внутри открывающего тега. Они представляют собой пару "имя=значение". Для атрибутов, у которых имя совпадает со значением, значение можно опустить. § Элементы делятся на: образующие элементы блочной разметки, элементы внутренней разметки. Последние, влияют на непосредственное и логическое форматирование текста.