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

Основы HTML и CSS Введение и основные понятия
Введение и основные понятия:
История
Браузеры
Основные понятия
Как это работает
В чем создавать HTML- документы?
Простая HTML страница
Объявление <!DOCTYPE>
Структура HTML документа
Заголовок документа
Тело документа
Какие бывают элементы?
Структурированный текст
Как браузер показывает текст?
Заголовки
Горизонтальная линия
Абзац
Улучшаем страницу
Принудительный разрыв строки
Окончательный вид документа
Атрибуты элементов
Используем атрибуты
Создаем блочную цитату
Авторское форматирование
Элемент ADDRESS - контактная информация (Блочный элемент, текст отображается к урсивом)
Группировка элементов
Элементы DIV и SPAN
Коротко о цвете
Раскрашиваем страницу
Элемент FONT ( не желателен)
Непосредственное форматирование текста
Логическое форматирование
Специальные символы
Дополнительно
Итоги
1/36
Средняя оценка: 4.6/5 (всего оценок: 70)
Код скопирован в буфер обмена
Скачать (629 Кб)
1

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

Изображение слайда
2

Слайд 2: Введение и основные понятия:

Основные сведения о языках разметки: HTML, XML, XHTML. Эволюция языков разметки. Цели и задачи языка HTML Что такое WEB-сервер, web-сайт, web-страница и чем они отличаются Что такое тег? Типы элементов. Понятие тегов и атрибутов Структура и п равила оформления HTML-документа. Основные элементы форматирования текста. Элементы блочной (block) и текстовой (inline) разметки

Изображение слайда
3

Слайд 3: История

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 января 200 8 года W3C официально объявил "HTML 5 - в разработке "

Изображение слайда
4

Слайд 4: Браузеры

Первый браузер 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) 200 1 Internet Explorer 7.0 ( Microsoft) 200 6 Internet Explorer 8.0 ( Microsoft) 19.03. 200 9 Opera (Opera Software ASA) 30.08.1995 Opera 9.0 (Opera Software ASA) 2006 Opera 10.2 (Opera Software ASA) 200 9 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

Изображение слайда
5

Слайд 5: Основные понятия

Web-сайт Web-сервер Web-адрес Web-страница *. html *. html *. html ...

Изображение слайда
6

Слайд 6: Как это работает

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 …

Изображение слайда
7

Слайд 7: В чем создавать HTML- документы?

Изображение слайда
8

Слайд 8: Простая 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 > < h 1>Мой первый HTML-документ</ h 1> < hr > < p > Скоро мы узнаем, что означают эти странные знаки. </p> </ body > </ html > тег

Изображение слайда
9

Слайд 9: Объявление <!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/

Изображение слайда
10

Слайд 10: Структура 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 > Начало документа Конец документа Начало заголовка Конец заголовка Начало тела документа Конец тела документа Определение типа документа

Изображение слайда
11

Слайд 11: Заголовок документа

< html > < head > < title > Заголовок документа </ title > </ head > < body > ...Содержание документа... </ body > </ html >

Изображение слайда
12

Слайд 12: Тело документа

< html > < head > ...Служебная информация... </ head > < body > < h 1> Мой первый HTML документ </ h 1> < hr > <!-- горизонтальная линия --> < p > Некоторый текст. Основное содержание текущей страницы. Первый абзац < p> Второй абзац. Для форматирования текста используют разные элементы языка HTML. </ p >   <!– - абзац --> </ body > </ html > Комментарий

Изображение слайда
13

Слайд 13: Какие бывают элементы?

Блочные (block elements ) Структурное форматирование Текстовые (inline elements ) Непосредственное форматирование Логическое форматирование (phrase elements) Нежелательные ( deprecated ) Устаревшие (obsolete) Новые (new) <title> С о д е р ж а н и е </title> Открывающий т е г Закрывающий тег Элемент

Изображение слайда
14

Слайд 14: Структурированный текст

<h1> Заголовок первого уровня </h1><p> Элемент P представляет абзац. В нем <b> не могут </b> содержаться элементы уровня блока (включая и сам элемент P). Элементы, определяющие стиль шрифта: <b> полужирный, </b> <i> курсивный, </i> <u> подчёркнутый </u> и другие </p><p> Второй абзац </p>

Изображение слайда
15

Слайд 15: Как браузер показывает текст?

Изображение слайда
16

Слайд 16: Заголовки

< h 1> Заголовок 1 </ h 1> < h 2> Заголовок 2 </ h 2> < h 3> Заголовок 3 </ h 3> < h 4> Заголовок 4 </ h 4> < h 5> Заголовок 5 </ h 5> < h 6> Заголовок 6 </ h 6>

Изображение слайда
17

Слайд 17: Горизонтальная линия

<h1>Горизонтальная линия</h1> <hr> <p> Браузеры, которые интерпретируют мягкие переносы, должны обеспечивать следующую семантику: если строка прекращается в месте мягкого переноса …

Изображение слайда
18

Слайд 18: Абзац

<P> Браузеры, которые интерпретируют мягкие переносы, должны обеспечивать следующую семантику: если строка прекращается в месте мягкого переноса, в конце первой строки должен отображаться символ переноса. </P> <P> Если строка не прерывается в месте мягкого переноса, символ переноса отображаться не должен. При выполнении таких операций как поиск и сортировка мягкие переносы всегда должны игнорироваться.

Изображение слайда
19

Слайд 19: Улучшаем страницу

< p > Мой дядя самых честных правил, Когда не в шутку занемог, Он уважать себя заставил И лучше выдумать не мог. </ p > < p > Мой дядя самых честных правил, < p > Когда не в шутку занемог, < p > Он уважать себя заставил < p > И лучше выдумать не мог.

Изображение слайда
20

Слайд 20: Принудительный разрыв строки

< p >Мой дядя самых честных правил, < br > Когда не в шутку занемог, < br > Он уважать себя заставил < br > И лучше выдумать не мог.

Изображение слайда
21

Слайд 21: Окончательный вид документа

< ! -- Форматирование кода с отступами --> < html > < head > < title > Мой первый документ </ title > </ head > < body > < h 1> Мой первый HTML-документ </ h 1> < hr > < h 2> Евгений Онегин </ h 2> < p > А.С.Пушкин (отрывок) <p> Мой дядя самых честных правил, <br> Когда не в шутку занемог, <br> Он уважать себя заставил <br> И лучше выдумать не мог. < hr > </ body > </ html >

Изображение слайда
22

Слайд 22: Атрибуты элементов

<hr align =" right " size =" 3 " width = " 450 " > Атрибут Атрибут Тег Имя атрибута Значение атрибута Атрибут

Изображение слайда
23

Слайд 23: Используем атрибуты

< 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 " >

Изображение слайда
24

Слайд 24: Создаем блочную цитату

<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>

Изображение слайда
25

Слайд 25: Авторское форматирование

<pre> Время – начинаю про Ленина рассказ. Но не потому, что горя нету более, время потому, что резкая тоска стала ясною осознанною болью. </pre>

Изображение слайда
26

Слайд 26: Элемент ADDRESS - контактная информация (Блочный элемент, текст отображается к урсивом)

<p>Мой адрес: <address> Москва, 2-ая Бауманская, офис 703, Телефон/факс: 263-64-43 </address>

Изображение слайда
27

Слайд 27: Группировка элементов

Элементы DIV и SPAN вместе с атрибутами id и class обеспечивают общий механизм добавления в документы структуры. Эти элементы определяют встраиваемую информацию ( SPAN ) или информацию уровня блока ( DIV ), но не налагают никаких других выражений для представления контекста <div align="center"> Блок номер 1 <div> Блок номер 2 <div> Блок номер 3 </div> </div> </div>

Изображение слайда
28

Слайд 28: Элементы 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>

Изображение слайда
29

Слайд 29: Коротко о цвете

Шестнадцатеричная система счисления: 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 - t angerine (мандариновый) #E49B0F - g amboge ( гуммигут) #FDE910 – lemon ( лимонный) Б езопасн ая палитр а цветов : 00,33,66,99, CC,FF (216 сочетаний).

Изображение слайда
30

Слайд 30: Раскрашиваем страницу

<html> < head > <title> Раскрашиваем страницу </title> </ head > < body bgcolor = " silver " text = " #0000FF " > <p> Этот текст синего цвета, < font color = " red " > а этот - красного.</ font > <hr color =" green " > Горизонтальная линия тоже может быть разноцветная. </ body > </ html >

Изображение слайда
31

Слайд 31: Элемент 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 " Соответствует размеру <H 1 > size= " 7 " <font size =" -1 "> Величина шрифта на единицу меньше базового </font> <font size =" 7 "> Максимальный размер шрифта </font>

Изображение слайда
32

Слайд 32: Непосредственное форматирование текста

< i > - курсив </i> < b > - полужирный </b> < u > - подчеркнутый </u> < strike > - перечеркнутый </strike> <tt> - моноширинный </tt> <big> - увеличить шрифт </big> <small> - уменьшить шрифт </small> <sup> - надиндекс </sup> <sub> - подиндекс </sub>

Изображение слайда
33

Слайд 33: Логическое форматирование

<em> - выделение важных фрагментов курсивом <strong> - выделение особо важных фрагментов полужирным <ins> - выделение фрагмента подчеркиванием, когда требуется показать явно, что текст был вставлен после опубликования документа. <del> - выделение фрагмента перечеркиванием, когда требуется показать явно, что текст был удален после опубликования документа. < cite > - выделение цитат курсивом < code > - отображение фрагментов программного кода моноширинным шрифтом < kbd > - текст, вводимый с клавиатуры: отображается моноширинным шрифтом < var > - название переменных: отображается курсивом < samp > - выделение нескольких символов моноширинным шрифтом < dfn > - определение вложенного термина курсивом < abbr title=" Какое-то слово " > - аббревиатура < acronym title=" Какое-то слово " > - акроним <q lang="ru" > - определение кавычек

Изображение слайда
34

Слайд 34: Специальные символы

& nbsp; &#160; Неразбиваемый пробел &quot; &#034; Прямая кавычка " &amp; &#038; Амперсанд & &lt; &#060; Знак "меньше" < &gt; &#062; Знак "больше" > &copy; &#169; Копирайт © & reg; &#174; Зарегистрировано ® & trade; &#153; Торговая марка ™

Изображение слайда
35

Слайд 35: Дополнительно

<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 ">

Изображение слайда
36

Последний слайд презентации: Основы HTML и CSS Введение и основные понятия: Итоги

Документ HTML состоит из элементов гипертекстовой разметки и является гипертекстовым документом Элемент состоит из открывающего тега, содержимого и закрывающего тега. Для некоторых элементов закрывающего тега не требуется Атрибуты располагаются внутри открывающего тега. Они представляют собой пару "имя=значение". Для атрибутов, у которых имя совпадает со значением, значение можно опустить. Элементы делятся на: образующие элементы блочной разметки, элементы внутренней разметки. Последние, влияют на непосредственное и логическое форматирование текста.

Изображение слайда