Downloaded 11 times
More Related Content
Верстка_Лекция1
- 1. HTML HTML (от англ.Hyper Text Markup Language — «язык разметки гипертекста») — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме.
- 2. Версии HTML • RFC1866 — HTML 2.0, одобренный как стандарт 22 сентября 1995 года; • HTML 3.2 — 14 января 1997 года; • HTML 4.0 — 18 декабря 1997 года; • HTML 4.01(изменения, причём более значительные, чем кажется на первый взгляд) — 24 декабря 1999 года; • ISO/IEC 15445:2000 (так называемый ISO HTML, основан на HTML 4.01 Strict) — 15 мая 2000 года. • HTML 5 — в разработке.
- 3. Инструментарий • Текстовый редактор. •Браузер для просмотра результатов. • Валидатор — программа для проверки синтаксиса HTML и выявления ошибок в коде (http://validator.w3.org). • Графический редактор. • Справочник по тегам HTML.
- 4.
- 5. Структура HTML-кода <!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.01//EN“ "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Пример веб-страницы</title> </head> <body> <h1>Заголовок</h1> <!-- Комментарий --> <p>Первый абзац.</p> <p>Второй абзац.</p> </body> </html>
- 6. Структура HTML-кода Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях Тег <html> определяет начало HTML-файла, внутри него хранится заголовок (<head>) и тело документа (<body>). Заголовок документа, как еще называют блок <head>, может содержать текст и теги, но содержимое этого раздела не показывается напрямую на странице, за исключением контейнера <title>. Тело документа <body> предназначено для размещения тегов и содержательной части веб-страницы.
- 7. Тег (и) <тег атрибут1="значение"атрибут2="значение"> - одиночный тег <тег атрибут1="значение" атрибут2="значение">...</тег> - парный тег (контейнер)
- 8. Правила применения тегов Длятегов любого типа действуют определенные правила их использования. Причем, некоторые правила обязательны для выполнения, а другие являются рекомендациями, т.е. их можно выполнять, а можно и нет. – Атрибуты тегов и кавычки – Теги можно писать как прописными, так и строчными символами – Переносы строк – Неизвестные теги и атрибуты – Порядок тегов – Закрывайте все теги – Порядок атрибутов в тегах – Формат атрибутов
- 9. <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Кавычки в атрибуте alt</title> </head> <body> <BR> <div tid="1"></div> <p><img src="images/arena.png" alt="Вид заголовка" width="400" height="101"></p> <p><img alt='Вид заголовка' width="400" height="101" src="images/arena.png" /></p> <br /> </body> </html>
- 10. Типы тегов Каждый тегHTML принадлежит к определенной группе тегов, например, табличные теги направлены на формирование таблиц и не могут применяться для других целей. Условно теги делятся на следующие типы: – теги верхнего уровня – теги заголовка документа – блочные элементы – встроенные элементы – универсальные элементы – списки – таблицы
- 11. Теги верхнего уровня <html>- является контейнером, который заключает в себе всё содержимое веб- страницы, включая теги <head> и <body>. Открывающий и закрывающий теги <html> в документе необязательны, но хороший стиль диктует непременное их использование. <head> - предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Также внутри контейнера <head> находятся метатеги, которые используются для хранения информации, предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. <body> - предназначен для хранения содержания веб-страницы, отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера <body>. К такой информации относится текст, изображения, таблицы, списки и др.
- 12. Теги заголовка документа <title>- используется для отображения строки текста в левом верхнем углу окна браузера. Такая строка сообщает пользователю название сайта и другую информацию, которую добавляет разработчик. <meta> - метатеги используются для хранения информации, предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. <meta name="description" content="Сайт об HTML и создании сайтов"> <meta name="keywords" content="HTML, META, метатег, тег, поисковая система"> <meta http-equiv="content-type" content="text/html; charset=utf-8">
- 13. Блочные элементы Блочные элементыхарактеризуются тем, что занимают всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки. – <DIV> - блочный элемент (слои) – <H1, … H6> - заголовки – <HR> - горизонтальная линия – <P> - абзац (параграф) – <PRE> - блок форматированного текста
- 14. Встроенные элементы Встроенными называются такие элементы веб-страницы, которые являются непосредственной частью другого элемента, например, текстового абзаца. В основном они используются для изменения вида текста или его логического выделения. – <a> - ссылки – <b>, <strong> - жирное выделение – <big> - увеличение шрифта на 1 п – <br> - перевод строки – <i>,<em> - курсивное начертание – <img> - изображение – <small> - уменьшение шрифта на 1 п – <span> - тег, определяющий встроенный элемент – <sup>,<sub> - верхний и нижний регистры
- 15. Теги для списков Спискомназывается взаимосвязанный набор отдельных фраз или предложений, которые начинаются с маркера или цифры. Списки предоставляют возможность упорядочить и систематизировать разные данные и представить их в наглядном и удобном для пользователя виде. – <ol> - нумерованный список – <ul> - маркерованный список – <li> - элемент списка
- 16. Теги для таблиц Таблицасостоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Обычно таблицы используются для упорядочения и представления табличных данных. – <table> - контейнер для элементов таблицы – <td> - ячейка таблицы – <th> - заголовочная ячейка таблицы – <tr> - контейнер для создания строки