Основы HTML и CSS Введение и основные понятия

960.50K

Категории:

Интернет

Программирование

Похожие презентации:

Основы HTML и CSS. Введение и основные понятия

Создание статических web-страниц с помощью HTML и CSS

Введение в язык разметки HTML

Основные принципы HTML и основные теги. 11 класс

Язык разметки гипертекста HTML

Основы языка HTML

Язык HTML

Лекции по практике (HTML, CSS, JS, PHP, MySQL)

HTML и CSS. Введение и основные понятия

1. Основы HTML и CSS Введение и основные понятия

2. История

март 1995
начало работы над HTML 3 + CSS
1994
Подготовка HTML 2.0
Консорциум W3 (W3C)
www.W3.org
2010 год
HTML 5.0
1991
CERN
HTML
22 января 2008 года
W3C официально объявил
"HTML 5 - в разработке"
1986
ISO-8879
SGML
2000
XHTML 1.0
январь 1997
HTML 3.2
декабрь 1997
HTML 4.0 + CSS 2.0
24 декабря 1999
HTML 4.01

3. Основные понятия

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

4. Простая 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>

5. Структура 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>
Конец тела документа
Конец документа

6. Заголовок документа

<html>
<head>
<meta charset="utf-8">
<title> Заголовок документа </title>
</head>
<body>
...Содержание документа...
</body>
</html>

7. Тело документа

<html>
<head>
...Служебная информация...
</head>
Комментарий
<body>
<h1>Мой первый HTML документ</h1>
<hr>

<p>Второй абзац. Для форматирования
текста используют разные элементы языка
HTML.</p>
<!–- абзац -->
<img src="images/girl.png" width="189"
height="255">
</body>
</html>

8. Заголовки

<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
<h3>Заголовок 3</h3>
<h4>Заголовок 4</h4>
<h5>Заголовок 5</h5>
<h6>Заголовок 6</h6>

9. Горизонтальная линия

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

10. Абзац

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

11. Улучшаем страницу

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

12. Принудительный разрыв строки

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

13. Окончательный вид документа

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

14. Атрибуты элементов

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

15. Используем атрибуты

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

16. Авторское форматирование

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

17. Элементы 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>

18. Коротко о цвете

Шестнадцатеричная система счисления:
0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F
Диапазон:
#00FF00 –
#FF0000 –
#0000FF –
#FFFFFF –
#000000 –
#FFFF00 –
#FFD700 #FFCC00 #E49B0F #FDE910 –
00 - FF (0 - 255)
green (зеленый)
red (красный)
blue (синий)
white (белый)
black (черный)
yellow (жёлтый)
gold (золотой)
tangerine (мандариновый)
gamboge (гуммигут)
lemon (лимонный)
Безопасная палитра цветов:
00,33,66,99, CC,FF (216 сочетаний).

19. Раскрашиваем страницу

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

20. Непосредственное форматирование текста

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

21. Специальные символы

 
 
Неразбиваемый пробел
"
"
Прямая кавычка
"
&
&
Амперсанд
&
<
<
Знак "меньше"
<
>
>
Знак "больше"
>
©
©
Копирайт
©
®
®
Зарегистрировано
®
™

Торговая марка
™

English Русский Правила