Презентация "Основы HTML и CSS. Введение и основные понятия"

Подписи к слайдам:
Основы HTML и CSS Введение и основные понятия Введение и основные понятия:
  • Основные сведения о языках разметки: HTML, XML, XHTML. Эволюция языков разметки. Цели и задачи языка HTML
  • Что такое WEB-сервер, web-сайт, web-страница и чем они отличаются
  • Что такое тег? Типы элементов. Понятие тегов и атрибутов
  • Структура и правила оформления HTML-документа.
  • Основные элементы форматирования текста. Элементы блочной (block) и текстовой (inline) разметки
История
  • 1986
  • ISO-8879
  • SGML
  • 1991
  • CERN
  • HTML
  • 1994
  • Подготовка HTML 2.0
  • Консорциум W3 (W3C)
  • www.W3.org
  • март 1995
  • начало работы над HTML 3 + CSS
  • январь 1997
  • HTML 3.2
  • декабрь 1997
  • HTML 4.0 + CSS 2.0
  • 24 декабря 1999
  • HTML 4.01
  • 2000
  • XHTML 1.0
  • 2010 год
  • HTML 5.0
  • ещё в разработке
  • 22 января 2008 года
  • W3C официально объявил "HTML 5 - в разработке"
Браузеры
  • Первый браузер NCSA Mosaic – также основа для NN и IE
  • Netscape Navigator (Netscape Communications) 15.12.1994
  • Netscape Navigator 9 (движок Firefox 2) – 2008 последняя версия
  • Internet Explorer 1.0 (Microsoft) 1995
  • Internet Explorer 3.0 (Microsoft) 1996 («война браузеров»)
  • Internet Explorer 6.0 (Microsoft) 2001
  • Internet Explorer 7.0 (Microsoft) 2006
  • Internet Explorer 8.0 (Microsoft) 19.03.2009
  • Opera (Opera Software ASA) 30.08.1995
  • Opera 9.0 (Opera Software ASA) 2006
  • Opera 10.2 (Opera Software ASA) 2009
  • Mozilla Firefox 1 (Mozilla Foundation) 9.11.2004
  • Mozilla Firefox 3.0.3 (Mozilla Foundation) 2008
  • Mozilla Firefox 3.6 (Mozilla Foundation) 21.01.2010
  • Google Chrome 1 (Google) 10.12.2008
  • Google Chrome 4 (Google) 25.01.2010
  • Safari 4 (Apple) 11.08.2009
Основные понятия
  • Web-сайт
  • Web-сервер
  • Web-адрес
  • Web-страница
  • *.html
  • *.html
  • *.html
  • ...
Как это работает
  • 1
  • 2
  • 3
  • 4
  • 1
  • 3
  • 2
  • 4
  • 2 1
  • 5
  • 4 3
  • WWW
  • index.html
  • HTML
  • PHP
  • CGI
  • ASP
  • ...
  • HTML
  • веб-сервер
  • jpg, gif, swf,
  • avi, mpg …
В чем создавать HTML-документы? Простая HTML страница
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • <html>
  • <head>
  • <title>Пример HTML страницы</title>
  • </head>
  • <body>
  • <h1>Мой первый HTML-документ</h1>
  • <hr>
  • <p>Скоро мы узнаем, что означают эти странные знаки.</p>
  • </body>
  • </html>
  • тег
Объявление <!DOCTYPE>
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 // EN" "http://www.w3.org/TR/html4/strict.dtd"> Строгое DTD. Документы, использующие такое объявление типа документа, включают в себя все элементы и атрибуты, не являющиеся нежелательными и не использующие фреймы.
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> Документы, использующие такое объявление типа документа, включают все, что включено в строгое DTD, а также нежелательные элементы и атрибуты, относящиеся к визуальному оформлению.
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset // EN" "http://www.w3.org/TR/html4/frameset.dtd"> Документы, использующие такое объявление типа документа, включает все, что включено в предыдущее DTD, а также фреймы.
  • http://validator.w3.org/
  • http://jigsaw.w3.org/css-validator/
Структура HTML документа
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
  • <html>
  • <head>
  • Здесь размещается служебная информация. Пользователь ее не видит.
  • </head>
  • <body>
  • Здесь размещается содержание документа. Именно это видит пользователь.
  • </body>
  • </html>
  • Начало документа
  • Конец документа
  • Начало заголовка
  • Конец заголовка
  • Начало тела документа
  • Конец тела документа
  • Определение типа документа
Заголовок документа
  • <html>
  • <head>
  • <title> Заголовок документа </title>
  • </head>
  • <body>
  • ...Содержание документа...
  • </body>
  • </html>
Тело документа
  • <html>
  • <head>
  • ...Служебная информация...
  • </head>
  • <body>
  • <h1>Мой первый HTML документ</h1> <hr> <!-- горизонтальная линия -->
  • <p>Некоторый текст. Основное содержание текущей страницы. Первый абзац 
  • <p>Второй абзац. Для форматирования текста используют разные элементы языка HTML.</p>   <!–- абзац -->
  • </body>
  • </html>
  • Комментарий
Какие бывают элементы?
  • Блочные (block elements)
  • Структурное форматирование
  • Текстовые (inline elements)
  • Непосредственное форматирование
  • Логическое форматирование (phrase elements)
  • Нежелательные (deprecated)
  • Устаревшие (obsolete)
  • Новые (new)
    • <title> С о д е р ж а н и е </title>
  • Открывающий тег
  • Закрывающий тег
  • Элемент
Структурированный текст
  • <h1>Заголовок первого уровня</h1><p>Элемент P представляет абзац. В нем <b>не могут</b> содержаться элементы уровня блока (включая и сам элемент P). Элементы, определяющие стиль шрифта:
  • <b>полужирный,</b>
  • <i>курсивный,</i>
  • <u>подчёркнутый</u>и другие</p><p>Второй абзац</p>
Как браузер показывает текст?
Заголовки
  • <h1>Заголовок 1</h1>
  • <h2>Заголовок 2</h2>
  • <h3>Заголовок 3</h3>
  • <h4>Заголовок 4</h4>
  • <h5>Заголовок 5</h5>
  • <h6>Заголовок 6</h6>
Горизонтальная линия
  • <h1>Горизонтальная линия</h1>
  • <hr>
  • <p>
  • Браузеры, которые интерпретируют мягкие переносы, должны обеспечивать следующую семантику: если строка прекращается в месте мягкого переноса…
Абзац
  • <P>
  • Браузеры, которые интерпретируют мягкие переносы, должны обеспечивать следующую семантику: если строка прекращается в месте мягкого переноса, в конце первой строки должен отображаться символ переноса.
  • </P>
  • <P>
  • Если строка не прерывается в месте мягкого переноса, символ переноса отображаться не должен. При выполнении таких операций как поиск и сортировка мягкие переносы всегда должны игнорироваться.
Улучшаем страницу
  • <p> Мой дядя самых честных правил, Когда не в шутку занемог, Он уважать себя заставил И лучше выдумать не мог.
  • </p>
  • <p>Мой дядя самых честных правил,
  • <p>Когда не в шутку занемог,
  • <p>Он уважать себя заставил
  • <p>И лучше выдумать не мог.
Принудительный разрыв строки
  • <p>Мой дядя самых честных правил,
  • <br>Когда не в шутку занемог,
  • <br>Он уважать себя заставил
  • <br>И лучше выдумать не мог.
Окончательный вид документа
  • <!-- Форматирование кода с отступами -->
  • <html> <head> <title>Мой первый документ</title> </head> <body> <h1>Мой первый HTML-документ</h1> <hr> <h2>Евгений Онегин</h2> <p>А.С.Пушкин (отрывок) <p>
  • Мой дядя самых честных правил,
  • <br>Когда не в шутку занемог,
  • <br>Он уважать себя заставил
  • <br>И лучше выдумать не мог.
  • <hr>
  • </body>
  • </html>
Атрибуты элементов
  • <hr align="right" size="3" width="450" >
  • Атрибут
  • Атрибут
  • Тег
  • Имя атрибута
  • Значение атрибута
  • Атрибут
Используем атрибуты
  • <h1 align="center"> Выровнять по центру
  • <p align="right"> Выровнять по правому краю
  • <p align="justify"> Выровнять по ширине
  • <h2 align="left"> Выровнять по левому краю
  • <hr size="3"> Толщина разделительной линии
  • <hr noshade> Разделительная линия без тени
  • <hr align="right" width="450"> Ширина в пикселях
  • <hr size="3" width="50%" align="center">
Создаем блочную цитату
  • <blockquote>
  • 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.</blockquote>
Авторское форматирование
  • <pre>
  • Время –
  • начинаю
  • про Ленина рассказ.
  • Но не потому,
  • что горя
  • нету более,
  • время
  • потому,
  • что резкая тоска
  • стала ясною
  • осознанною болью.
  • </pre>
Элемент ADDRESS - контактная информация (Блочный элемент, текст отображается курсивом)
  • <p>Мой адрес:<address>Москва, 2-ая Бауманская, офис 703, Телефон/факс: 263-64-43</address>
Группировка элементов
  • Элементы DIV и SPAN вместе с атрибутами id и class обеспечивают общий механизм добавления в документы структуры. Эти элементы определяют встраиваемую информацию (SPAN) или информацию уровня блока (DIV), но не налагают никаких других выражений для представления контекста
  • <div align="center">
  • Блок номер 1
  • <div>
  • Блок номер 2
  • <div>
  • Блок номер 3
  • </div>
  • </div>
  • </div>
Элементы DIV и SPAN
  • <div id="main">
  • <div class="one">Первый div</div>
  • <div class="one">Второй div</div>
  • <div class="one">Третий div</div>
  • <span class="two">Первый span</span>
  • <span class="two">Второй span</span>
  • <span class="two">Третий span</span>
  • </div>
Коротко о цвете
  • Шестнадцатеричная система счисления:
  • 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F
  • Диапазон: 00 - FF (0 - 255)
  • #00FF00 – green (зеленый)
  • #FF0000 – red (красный)
  • #0000FF – blue (синий)
  • #FFFFFF – white (белый)
  • #000000 – black (черный)
  • #FFFF00 – yellow (жёлтый)
  • #FFD700 - gold (золотой)
  • #FFCC00 - tangerine (мандариновый)
  • #E49B0F - gamboge (гуммигут)
  • #FDE910 – lemon (лимонный)
  • Безопасная палитра цветов:
  • 00,33,66,99, CC,FF (216 сочетаний).
Раскрашиваем страницу
  • <html>
  • <head>
  • <title>Раскрашиваем страницу</title>
  • </head>
  • <body bgcolor="silver" text="#0000FF">
  • <p>Этот текст синего цвета,
  • <font color="red"> а этот - красного.</font>
  • <hr color="green">Горизонтальная линия тоже может быть разноцветная.
  • </body>
  • </html>
Элемент FONT (не желателен)
  • серифный шрифт: Times New Roman, serif
  • рубленый шрифт: Arial, sans-serif
  • моноширинный шрифт: Courier, monospace
  • <font face="Arial,Verdana,sans-serif">
  • Каким шрифтом будет показан текст?
  • </font>
  • size="1"
  • size="2"
  • size="3" Базовый размер по-умочанию
  • size="4"
  • size="5"
  • size="6" Соответствует размеру <H1>
  • size="7"
  • <font size="-1">Величина шрифта на единицу меньше базового</font>
  • <font size="7">Максимальный размер шрифта</font>
Непосредственное форматирование текста
  • <i> - курсив </i>
  • <b> - полужирный </b>
  • <u> - подчеркнутый </u>
  • <strike> - перечеркнутый </strike>
  • <tt> - моноширинный </tt>
  • <big> - увеличить шрифт </big>
  • <small> - уменьшить шрифт </small>
  • <sup> - надиндекс </sup>
  • <sub> - подиндекс </sub>
Логическое форматирование
  • <em> - выделение важных фрагментов курсивом
  • <strong> - выделение особо важных фрагментов полужирным
  • <ins> - выделение фрагмента подчеркиванием, когда требуется показать явно, что текст был вставлен после опубликования документа.
  • <del> - выделение фрагмента перечеркиванием, когда требуется показать явно, что текст был удален после опубликования документа.
  • <cite> - выделение цитат курсивом
  • <code> - отображение фрагментов программного кода моноширинным шрифтом
  • <kbd> - текст, вводимый с клавиатуры: отображается моноширинным шрифтом
  • <var> - название переменных: отображается курсивом
  • <samp> - выделение нескольких символов моноширинным шрифтом
  • <dfn> - определение вложенного термина курсивом
  • <abbr title="Какое-то слово"> - аббревиатура
  • <acronym title="Какое-то слово"> - акроним
  • <q lang="ru"> - определение кавычек
Специальные символы
  • &nbsp;
  • &#160;
  • Неразбиваемый пробел
  • &quot;
  • &#034;
  • Прямая кавычка
  • "
  • &amp;
  • &#038;
  • Амперсанд
  • &
  • &lt;
  • &#060;
  • Знак "меньше"
  • <
  • &gt;
  • &#062;
  • Знак "больше"
  • >
  • &copy;
  • &#169;
  • Копирайт
  • ©
  • &reg;
  • &#174;
  • Зарегистрировано
  • ®
  • &trade;
  • &#153;
  • Торговая марка
Дополнительно
  • <nobr>п.1. Текст п. 1 никогда не будет перенесен браузером.<br> п.2. Но п.3 всегда будет идти двумя строками ниже.<br><br>п.3. Текст</nobr>
  • deprecated: applet, basefont, center, dir, font, isindex, menu, s, strike, u...
  • obsolete: listing, plaintext, xmp...
  • <font> <span>
  • Все элементы: http://www.w3.org/TR/html4/index/elements.html
  • Все атрибуты: http://www.w3.org/TR/html4/index/attributes.html
  • HTML 4.0
  • CSS
  • <h1 style="color: red; text-align: center">
  • <span style="color: red">
  • <div style="color: red; font-size: medium">
  • <p style="color: blue; font-size: 14pt">
Лабораторная работа
  • Оформление текста
  • Откройте файл lab-1-1.html
  • 1
  • Оформите HTML-файл следуя инструкциям, указанным в документе в виде комментариев
  • 2
  • Примерный образец выполнения работы - файл lab-1-1-result.html
  • Дополнительные домашние задания: index.html index-result.html и reklama.html reklama-result.html
Итоги
  • Документ HTML состоит из элементов гипертекстовой разметки и является гипертекстовым документом
  • Элемент состоит из открывающего тега, содержимого и закрывающего тега. Для некоторых элементов закрывающего тега не требуется
  • Атрибуты располагаются внутри открывающего тега. Они представляют собой пару "имя=значение". Для атрибутов, у которых имя совпадает со значением, значение можно опустить.
  • Элементы делятся на: образующие элементы блочной разметки, элементы внутренней разметки. Последние, влияют на непосредственное и логическое форматирование текста.