Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Верстка_Лекция1

1,145 views

Published on

Published in: Education
  • Be the first to comment

Верстка_Лекция1

  1. 1. HTMLHTML (от англ. Hyper Text Markup Language — «языкразметки гипертекста») — стандартный язык разметкидокументов во Всемирной паутине.Большинство веб-страниц создаются при помощи языкаHTML (или XHTML).Язык HTML интерпретируется браузером и отображаетсяв виде документа, в удобной для человека форме.
  2. 2. Версии HTML• RFC 1866 — 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. 3. Инструментарий• Текстовый редактор.• Браузер для просмотра результатов.• Валидатор — программа для проверки синтаксиса HTML и выявления ошибок в коде (http://validator.w3.org).• Графический редактор.• Справочник по тегам HTML.
  4. 4. Инструментарий - firebug
  5. 5. Структура HTML-кода<!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>Пример веб-страницы</title> </head> <body> <h1>Заголовок</h1> <!-- Комментарий --> <p>Первый абзац.</p> <p>Второй абзац.</p> </body></html>
  6. 6. Структура HTML-кода Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях Тег <html> определяет начало HTML-файла, внутри него хранится заголовок (<head>) и тело документа (<body>).Заголовок документа, как еще называют блок <head>, может содержать текст и теги, но содержимое этого раздела не показывается напрямую на странице, за исключением контейнера <title>. Тело документа <body> предназначено для размещения тегов и содержательной части веб-страницы.
  7. 7. Тег (и)<тег атрибут1="значение" атрибут2="значение"> - одиночныйтег<тег атрибут1="значение" атрибут2="значение">...</тег> -парный тег (контейнер)
  8. 8. Правила применения теговДля тегов любого типа действуют определенные правила их использования.Причем, некоторые правила обязательны для выполнения, а другие являютсярекомендациями, т.е. их можно выполнять, а можно и нет. – Атрибуты тегов и кавычки – Теги можно писать как прописными, так и строчными символами – Переносы строк – Неизвестные теги и атрибуты – Порядок тегов – Закрывайте все теги – Порядок атрибутов в тегах – Формат атрибутов
  9. 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. 10. Типы теговКаждый тег HTML принадлежит к определенной группе тегов,например, табличные теги направлены на формирование таблиц ине могут применяться для других целей.Условно теги делятся на следующие типы: – теги верхнего уровня – теги заголовка документа – блочные элементы – встроенные элементы – универсальные элементы – списки – таблицы
  11. 11. Теги верхнего уровня<html> - является контейнером, который заключает в себе всё содержимое веб-страницы, включая теги <head> и <body>. Открывающий и закрывающий теги<html> в документе необязательны, но хороший стиль диктует непременное ихиспользование.<head> - предназначен для хранения других элементов, цель которых — помочьбраузеру в работе с данными. Также внутри контейнера <head> находятсяметатеги, которые используются для хранения информации, предназначеннойдля браузеров и поисковых систем. Например, механизмы поисковых системобращаются к метатегам для получения описания сайта, ключевых слов идругих данных.<body> - предназначен для хранения содержания веб-страницы, отображаемогов окне браузера. Информацию, которую следует выводить в документе, следуетрасполагать именно внутри контейнера <body>. К такой информации относитсятекст, изображения, таблицы, списки и др.
  12. 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. 13. Блочные элементыБлочные элементы характеризуются тем, что занимают всюдоступную ширину, высота элемента определяется егосодержимым, и он всегда начинается с новой строки.– <DIV> - блочный элемент (слои)– <H1, … H6> - заголовки– <HR> - горизонтальная линия– <P> - абзац (параграф)– <PRE> - блок форматированного текста
  14. 14. Встроенные элементы Встроенными называются такие элементы веб-страницы, которые являются непосредственной частью другого элемента, например, текстового абзаца. В основном они используются для изменения вида текста или его логического выделения.– <a> - ссылки– <b>, <strong> - жирное выделение– <big> - увеличение шрифта на 1 п– <br> - перевод строки– <i>,<em> - курсивное начертание– <img> - изображение– <small> - уменьшение шрифта на 1 п– <span> - тег, определяющий встроенный элемент– <sup>,<sub> - верхний и нижний регистры
  15. 15. Теги для списковСписком называется взаимосвязанный набор отдельных фраз илипредложений, которые начинаются с маркера или цифры. Спискипредоставляют возможность упорядочить и систематизироватьразные данные и представить их в наглядном и удобном дляпользователя виде.– <ol> - нумерованный список– <ul> - маркерованный список– <li> - элемент списка
  16. 16. Теги для таблицТаблица состоит из строк и столбцов ячеек, которые могутсодержать текст и рисунки. Обычно таблицы используются дляупорядочения и представления табличных данных.– <table> - контейнер для элементов таблицы– <td> - ячейка таблицы– <th> - заголовочная ячейка таблицы– <tr> - контейнер для создания строки

×