Основы HTML. Текст, Изображения, Таблицы, Формы. Автор: Ванкевич Кирилл Владимирович. УО ”БГУИР“ филиал “Минский радиотехнический колледж” - презентация

1 Текст, Изображения, Таблицы, Формы Ванкевич Кирилл УО Белорусский государственный университет информатики и радиоэлектроники филиал Минский радиотехнический колледж

2 1. Введение в HTML Введение в HTML Введение в HTML Как работает Web? Как работает Web? Как работает Web? Как работает Web? Что такое Web-страница? Что такое Web-страница? Что такое Web-страница? Что такое Web-страница? Создание HTML-страниц Создание HTML-страниц Создание HTML-страниц Создание HTML-страниц Основные Теги: Гиперссылки, Изображения, Форматирование Основные Теги: Гиперссылки, Изображения, Форматирование Основные Теги: Гиперссылки, Изображения, Форматирование Основные Теги: Гиперссылки, Изображения, Форматирование Заголовки и абзацы Заголовки и абзацы Заголовки и абзацы Заголовки и абзацы 2. HTML-структура HTML-структура HTML-структура Объявление Объявление Объявление Объявление 2

3 Раздел : Title, Meta, Script, Style Раздел : Title, Meta, Script, Style Раздел : Title, Meta, Script, Style Раздел : Title, Meta, Script, Style Раздел Раздел Раздел Раздел Стиль текста и теги форматирования Стиль текста и теги форматирования Стиль текста и теги форматирования Стиль текста и теги форматирования Гиперссылки:, Гиперссылки и Разделы Гиперссылки:, Гиперссылки и Разделы Гиперссылки:, Гиперссылки и Разделы Гиперссылки:, Гиперссылки и Разделы Изображения: Изображения: Изображения: Изображения: Списки:, и Списки:, и Списки:

,
и Списки:
,
и Спецсимволы Спецсимволы Спецсимволы 2. Элементы и 2. Элементы и Элементы и Элементы и 3. HTML-таблицы HTML-таблицы HTML-таблицы 4. HTML-формы 5. HTML-фреймы HTML-формыHTML-фреймы HTML-формыHTML-фреймы 3



4 WWW использование классической архитектуры клиент/сервер WWW использование классической архитектуры клиент/сервер HTTP - это текстовый протокол запрос-ответ HTTP - это текстовый протокол запрос-ответ 4 Запрос страницы Клиент, использующий веб-браузер Запуск программного обеспечения веб-сервера (IIS, Apache и т.д.) Ответ сервера HTTP HTTP




5 Web-страницы представляют собой текстовые файлы с HTML-кодом Web-страницы представляют собой текстовые файлы с HTML-кодом HTML – H yper T ext M arkup L anguage (язык гипертекстовой разметки) HTML – H yper T ext M arkup L anguage (язык гипертекстовой разметки) Составные описания HTML-кода Составные описания HTML-кода структура документа (семантическая разметка) структура документа (семантическая разметка) форматирование форматирование Тип файла описания HTML-кода : Тип файла описания HTML-кода : текстовый документ текстовый документ Задача HTML: с помощью тегов предоставить информацию о структуре содержимого страницы. Задача HTML: с помощью тегов предоставить информацию о структуре содержимого страницы. 5




6 HTML-файлы должны иметь расширения.htm или.html HTML-файлы должны иметь расширения.htm или.html HTML-файлы могут быть созданы с помощью текстовых редакторов: HTML-файлы могут быть созданы с помощью текстовых редакторов: Блокнот, NotePad ++, PSPad Блокнот, NotePad ++, PSPad Или HTML-редакторов (WYSIWYG-редакторов): Или HTML-редакторов (WYSIWYG-редакторов): Microsoft FrontPage Microsoft FrontPage Adobe Dreamweaver Adobe Dreamweaver Microsoft Word Microsoft Word Visual Studio Visual Studio 6




7 Текст, Изображения, Таблицы, Формы




8 HTML состоит из элементов и тегов HTML состоит из элементов и тегов Начинается с и заканчивается Начинается с и заканчивается Элементы (теги) являются вложенными в друг друга: Элементы (теги) являются вложенными в друг друга: Теги имеют атрибуты: Теги имеют атрибуты: В HTML описывают структуру, используя два основных раздела: и В HTML описывают структуру, используя два основных раздела: и 8




9 Исходный HTML-код должен быть отформатирован для повышения удобочитаемости и облегчения отладки. Исходный HTML-код должен быть отформатирован для повышения удобочитаемости и облегчения отладки. Каждый элемент должен начинаться с новой строки. Каждый элемент должен начинаться с новой строки. Каждый вложенный (блок) элемент должен иметь отступ. Каждый вложенный (блок) элемент должен иметь отступ. Браузеры игнорируют множественные пробелы в исходном коде страницы, так что форматирование безвредно. Браузеры игнорируют множественные пробелы в исходном коде страницы, так что форматирование безвредно. По причине производительности, форматированием кода можно пожертвовать. По причине производительности, форматированием кода можно пожертвовать. 9




10 10 My First HTML Page My First HTML Page This is some text... This is some text... test.html




11 My First HTML Page My First HTML Page This is some text... This is some text... 11 Открытие тега Зактрытие тега HTML-элементы состоят из открывающего и закрывающего тега, содержимого.




12 My First HTML Page My First HTML Page This is some text... This is some text... 12 Заголовок




13 My First HTML Page My First HTML Page This is some text... This is some text... 13 Тело документа




Link to Telerik Web site title="Telerik">Link to Telerik Web site This text is emphasized. This text is e" title="Гиперссылки Гиперссылки Изображения Изображения Форматирование текста Форматирование текста 14 Link to Telerik Web site title="Telerik">Link to Telerik Web site This text is emphasized. This text is e" class="link_thumb"> 14 Гиперссылки Гиперссылки Изображения Изображения Форматирование текста Форматирование текста 14 Link to Telerik Web site title="Telerik">Link to Telerik Web site This text is emphasized. This text is emphasized. new line new line This one is more emphasized. This one is more emphasized. Link to Telerik Web site title="Telerik">Link to Telerik Web site This text is emphasized. This text is e"> Link to Telerik Web site title="Telerik">Link to Telerik Web site This text is emphasized. This text is emphasized. new line new line This one is more emphasized. This one is more emphasized."> Link to Telerik Web site title="Telerik">Link to Telerik Web site This text is emphasized. This text is e" title="Гиперссылки Гиперссылки Изображения Изображения Форматирование текста Форматирование текста 14 Link to Telerik Web site title="Telerik">Link to Telerik Web site This text is emphasized. This text is e">




15 15 Simple Tags Demo Simple Tags Demo This is a link. "Telerik site">This is a link. Bold and italic text. Bold and italic text. some-tags.html This is a link. "Telerik site">This is a link. Bold and italic text. Bold and italic text. some-tags.html">




16 Теги могут иметь атрибуты Теги могут иметь атрибуты Атрибуты определяют свойства и поведение Атрибуты определяют свойства и поведение Например: Например: Некоторые атрибуты можно применять к каждому элементу: Некоторые атрибуты можно применять к каждому элементу: id, style, class, title id, style, class, title Id должен быть уникальным в документе Id должен быть уникальным в документе Содержимое атрибута title отображается в виде подсказки, когда на элемент наводится курсор мыши Содержимое атрибута title отображается в виде подсказки, когда на элемент наводится курсор мыши 16 Атрибут alt со значением " logo "




17 Теги заголовков (h1 – h6) Теги заголовков (h1 – h6) Теги абзаца Теги абзаца Теги div и span Теги div и span 17 This is my first paragraph This is my first paragraph This is my second paragraph This is my second paragraph Heading 1 Heading 1 Sub heading 2 Sub heading 2 Sub heading 3 Sub heading 3 This is a div This is a div




18 18 Headings and paragraphs Headings and paragraphs Heading 1 Heading 1 Sub heading 2 Sub heading 2 Sub heading 3 Sub heading 3 This is my first paragraph This is my first paragraph This is my second paragraph This is my second paragraph This is a div This is a div headings.html




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




20 Важно иметь правильное представление и отношение к HTML Важно иметь правильное представление и отношение к HTML HTML – это только структура, а не внешний вид (за внешний вид отвечает CSS) HTML – это только структура, а не внешний вид (за внешний вид отвечает CSS) Веб-браузеры «спокойно» относятся к неверному HTML-коду и синтаксическим ошибкам, но не стоит злоупотреблять. Веб-браузеры «спокойно» относятся к неверному HTML-коду и синтаксическим ошибкам, но не стоит злоупотреблять. 20




21 HTML-документы должны начинаться с определения типа документа (DTD) HTML-документы должны начинаться с определения типа документа (DTD) Он сообщает веб-браузеру тип HTML-кода Он сообщает веб-браузеру тип HTML-кода Возможные версии: HTML 4.01, XHTML 1.0 (Transitional or Strict), XHTML 1.1, HTML 5 Возможные версии: HTML 4.01, XHTML 1.0 (Transitional or Strict), XHTML 1.1, HTML 5 Например: Например: Смотреть список возможных типов Смотреть список возможных типов 21




22 XHTML является более строгим, XHTML является более строгим, чем HTML чем HTML Теги и имена атрибутов должны быть в нижнем регистре Теги и имена атрибутов должны быть в нижнем регистре Все теги должны быть закрыты (, ), в то время как HTML позволяет и и предусматривает отсутствие закрывающего тега ( par1 par2 ) Все теги должны быть закрыты (, ), в то время как HTML позволяет и и предусматривает отсутствие закрывающего тега ( par1 par2 ) XHTML-документ должен иметь только один корень (HTML позволяет более одного) XHTML-документ должен иметь только один корень (HTML позволяет более одного) 22




23 Многие атрибуты элементов являются устаревшими в XHTML, большинство из них переехали в CSS Многие атрибуты элементов являются устаревшими в XHTML, большинство из них переехали в CSS Минимизация атрибутов запрещена Минимизация атрибутов запрещена Примечание: загрузка XHTML-страницы происходит быстрее, чем HTML (валидный код быстрее, нежели не валидный)! Примечание: загрузка XHTML-страницы происходит быстрее, чем HTML (валидный код быстрее, нежели не валидный)! 23




24 Содержит сведения, которые не отображаются на веб-странице, за исключением тега Содержит сведения, которые не отображаются на веб-странице, за исключением тега Начинается после объявления Начинается после объявления Начинается с тега и заканчивается Начинается с тега и заканчивается Содержит обязательный тег Содержит обязательный тег Может содержать другие теги, например. Может содержать другие теги, например. 24




25 Заголовок должен располагаться между тегами и Заголовок должен располагаться между тегами и Используется для указания заголовка в строке заголовка Web-браузера Используется для указания заголовка в строке заголовка Web-браузера Используется поисковыми системами и людьми Используется поисковыми системами и людьми 25 Telerik Academy – Winter Season 2009/2010 Telerik Academy – Winter Season 2009/2010




26 Metа-теги описывают содержимое страницы и ключевые слова для поисковых машин, разрешают или запрещают индексацию Metа-теги описывают содержимое страницы и ключевые слова для поисковых машин, разрешают или запрещают индексацию 26




27 Тег используется для размещения скриптов в HTML-документе Тег используется для размещения скриптов в HTML-документе Скрипты выполняются в Web-браузере клиента Скрипты выполняются в Web-браузере клиента Сценарии могут располагаться в разделах и Сценарии могут располагаться в разделах и Поддерживаемые клиентские языки сценариев: Поддерживаемые клиентские языки сценариев: JavaScript (не Java!) JavaScript (не Java!) VBScript VBScript JScript JScript 27




"text/javascript"> sayHello(); sayHello()" title="28 JavaScript Example JavaScript Example function sayHello() { function sayHello() { document.write(" Hello World! "); document.write(" Hello World! "); }