1 / 46

HTML && CSS

HTML && CSS. введение. Используем HTML/XHTML. XHTML довольно прост. Приходится работать с примерно 20 тегами XHTML последователен и структурирован Достаточно информации по использованию Следуйте стандарту и разработка будет проще, гибче и легче расширяема. Независимость от устройства.

jesse-burnett
Download Presentation

HTML && CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML && CSS введение

  2. Используем HTML/XHTML • XHTML довольно прост. Приходится работать с примерно 20 тегами • XHTML последователен и структурирован • Достаточно информации по использованию • Следуйте стандарту и разработка будет проще, гибче и легче расширяема.

  3. Независимость от устройства Предоставляемая вами информация будет выглядеть одинаково на разных у устройствах и типах браузеров

  4. Браузер • Браузер это не печатьна листке бумаги ? ? ?

  5. Браузер это не печать • Нет фиксированного размера страницы • Нет фиксированной длины страницы • Пользователь может изменить размер шрифта • Пользователь может подменить стили на свой собственный набор • Размер экрана может быть от маленького до огромного

  6. Приспособление контента

  7. Рождение HTML • Создан в марте 1989 года Тимом Бернсом-Ли в CERN • Открытый стандарт был разработан по наблюдением W3C (www.w3c.org) • Работа реализовала полный потенциал Web технологий разделения документов

  8. История HTML/XHTML • 1992 HTML первая реализация • 1994 HTML 2.0 • 1995 Netscape специфицировала нестандартный HTML • 1996 HTML 3.2, компромиссное решение • 1997 HTML 4.0, разделили содержание и представление (font помечен как устаревший) • 1998 XML стандарт для написания языков разметки • 2000 XHTML 1.0, XML-подобный HTML • 2002 XHTML 2.0, Работа не была завершена • 2004 HTML 5, Основная идея доработать стандарт для работы с мультимедийным контентом

  9. Проблемы HTML • Конкурирующие браузеры вводят функции за пределами стандартов • Непереносимые между браузерами отображения и скрипты • Содержание и форма представления смешиваются • Отображение часто делается с помощью таблиц • Каждый элемент имеет много атрибутов отвечающих за форму представления в результате сложная поддержка • Много плохого кода

  10. XHTML • XHTML это HTML модифицированный так чтобы соответствовать XML стандарту • Обозначил разделение между содержанием и формой отображения: • Содержание в XHTML • Форма отображение в CSS (Cascading Style Sheets) • Расширяемость – возможность определения дополнительного элемента • Совместимость с XML – другие языки на основе XML могут быть встроены в XHTML • Как язык программирования • Использует специальный синтаксис • Вариатор проверяет, что вы всё делаете правильно

  11. XHTML Отличия • Регистр имеет значение • Все элементы должный иметь тег начала и тег конца <p>Hello</p> • Пустые элементы обозначаются одним тегом <br/> • Значения атрибутов должны заключаться в кавычки • Подробнее о спецификации можно прочитать http://www.w3.org/TR/xhtml1/#diffs

  12. Простой XHTML файл <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title> My Home Page </title> </head> <body> <h1>My Home Page </h1> <p> Welcome to my home page </p> </body> </html>

  13. Иерархическая структура title head html h1 body p Правильный формат XHTML документа иерархический

  14. Типы содержимого Документ логически разделён на типы содержимого

  15. Семантическая структура Содержание одного типа часто форматируется так, чтобы выглядеть одинаково

  16. Разметка семантики Разметка HTML основана на логическом типе содержания

  17. Иерархия title head h1 blockauote h2 html p body p ul li li li p p li

  18. Ключевое слово DOCTYPE • Указывает версию HTML или XHTML, которая будет использована для страницы • Используется браузером для организации процесса обработки страницы • Три типа • Transitional – Не строгая • Strict – строгая, требует следования стандартам • Frames – используется, когда на странице есть фреймы • Всегда в начале файла

  19. Строгий DOCTYPE • Всегда добавляется следующим образам: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> • Использование Strict помогает избегать ошибок: • Установлен флаг валидации скрипта • CSS будет работать лучше и более предсказуемо

  20. Полный списокприменяемых типов документа

  21. Элемент • Состоит из трёх частей • Тег начала, в котором могут использоваться атрибуты • Содержание • Тег окончания • Пример: <p id=“intro”>Welcome</p> • Спецификация W3C для тега <p>: http://www.w3schools.com/tags/tag_p.asp

  22. Атрибуты • Атрибуты должны использоваться только в теге начала элемента • Три типа атрибутов: • Опциональные атрибуты – различны у каждого типа элементов • Стандартные атрибуты – есть у всех элементов (id, class, title, style, dir, lang, xml:lang) • Атрибуты событий – применяются в скриптах (onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup)

  23. Структурные элементы • Некоторые элементы не имеют содержимого и не имеют конечных тегов • <imgsrc=“photo.jpg”/> • <br /> • <hr /> • <linkrel="stylesheet"type="text/css"href=“main.css"/> • В XHTML всегда требуется закрывать теги, один тег представляет оба тега начало и конец

  24. Теги <h1> <h2> <h3>… • Заголовки страницы • Представляют основной заголовок, подзаголовок, подподзаголовок и т.д. • Важно использовать эти элементы в логическом порядке, что поможет корректно обрабатывать контент голосовым браузерам

  25. Тег <p> и <blockquote> • Параграф • Для представления текста важно класть его внутрь тегов. Когда сомневаетесь куда класт текст его можно положить в параграф. • Блок цитирования (<blockquote>) представляет текст с широким левым и правым отступом

  26. Список • Неупорядоченный список (маркированный) <ul> <li>One</li> <li>Two</li> </ul> • Упорядоченный список (нумерованный) <ol> <li>One</li> <li>Two</li> </ol>

  27. Разметка текста • Жирный • <b>text</b> • <strong>text</strong> • Курсив • <i>text</i> • <em>text</em> • Остальные виды разметки текста • <sub>text</sub>нижний индекс • <sup>text</sup>верхний индекс • <del>text</del>удалённый текст

  28. Таблицы <tablebordercellspacing="5"cellpadding="10"> <caption>People on the team</caption> <tr> <th>Name</th> <th>Position</th> </tr> <tr> <td>Mary</td> <td>Analyst</td> </tr> <tr> <td>John</td> <td>Technician</td> </tr> </table>

  29. Рисунки • Рисунки чаще всего используют <img> элемент • Атрибут alt предоставляет возможность добавить текст описывающий картинку в случае, если картинка не отобразилась или пользователь не может её увидеть <imgsrc="picture.gif"alt=“Logo”/>

  30. Тег <a>(anchor) • Якорь может перебросить со страницы на любой файл в сети <ahref="http://www.asu.ru/"> Altai State University </a>

  31. Тег <div> • Эти теги заключают набор элементов <div style=“text-align: center;”> <h2> News</h2> <p><ahref=“budget.html”>Budget</a></p> <p><ahref=“invest.html”>Investment</a></p></div>

  32. Тег <span> • Span элементы включают объекты (текст, картинки) внутри элемента <p>Call me Ishmael. Some years ago — <spanstyle=“font-style: italic;”>never mind how long precisely</span> — having little or no money in my purse, and nothing particular to interest me on shore,

  33. Каскадные таблицы стилей (CSS) • Используются для управления тем как будет выглядеть элемент на странице • Используют отличный синтаксист от HTML/XHTML • Работают во всех графических браузерах (Explorer, FireFox, Opera, Chrome) • Правильное использование поможет сильно упростить визуальный дизайн и управление контентом сайта

  34. Стиль Т.е. набор свойствдля элементов соответствующих селектору выглядит так: <имя_своства>: <значение>; <имя_свойства_1>: <значение_1>; Свойство Значение Селектор p { font-family: times; }

  35. Использование CSS Стили могут быт установлен в отдельной файле стилей, в <style>элементе внутри элемента <head>или в атрибуте styleэлемента

  36. Селекторы • Простой селектор p { color: blue }h1, h2, h3, h4 { font-style: italic; } • Контекстный селектор ul li { font-weight: bold; }#main img { border: solid black 5px; }p.intro { font-family: verdana, sans-serif;}

  37. Модель текстовых блоков Каждый элемент имеет padding, border и margin

  38. Вертикальный отступ Больший из двух вертикальных отступов определяет расстояние между элементами

  39. Визуальная модель форматирования Страница строится как серия блоков уложенных сверху вниз

  40. Управление отображением • Стили могут управлять размером и положением элемента • Пример: #nav { width: 12em; float: left; }#news { width: 12em; float: right; }#main { margin: 1em 13em 1em 13em; }

  41. Divсмещённый влево(float: left)

  42. Divсмещён вправо(float: right)

  43. Divсверху Элементы в навигационной панели являются якорями в dvi’е

  44. Chrome Developer ToolHTML

  45. Chrome Developer ToolСтили

  46. Ресурсы • HTML-Kit editor – http://chami.com/ • Amaya editor – http://www.w3c.org/Amaya • W3schools XHTML and CSS tutorials – http://www.w3schools.com/ • Web Head Start tutorials – http://www.webheadstart.org/ • Tidy Web Interface - http://www.washington.edu/webinfo/tidy.cgi • CSS Validator - http://jigsaw.w3.org/css-validator/ • Dave Raggett XHTML and CSS tutorials - http://www.w3.org/MarkUp/Guide/Overview.html • Web Accessibility in Mind (WebAIM) - http://www.webaim.org/ • Color contrast analyzer - http://www.visionaustralia.org.au/info.aspx?page=628 • Stylin’ With CSS, A Designer’s Guide, Second Edition by Charles Wyke-Smith

More Related