Тренинг Активный старт для профессионалов. Бонусная лекция Основы HTML.

1. Интернет-тренинг
Бонусная лекция
Основы HTML

2. Основы HTML

3. Назначение
HTML (HyperText Markup Language, язык
разметки гипертекста) — это система
верстки, которая определяет, как и какие
элементы должны располагаться на веб-
странице.
Текст в HTML читается браузерами.

4. Синтаксис
Пример кода страницы
Вид:

5. Синтаксис
Тег - элемент форматирования.
Общий синтаксис написания тегов
<тег атрибут1="значение" атрибут2="значение">
<тег атрибут1="значение"
атрибут2="значение">...</тег>
Типы тегов :
• одиночные
• парные (контейнеры)- может включать внутри
себя другие теги или текст.

6. Синтаксис
Одиночные теги :
<тег>.
Парные теги состоят из двух частей — открывающий и закрывающий тег.
Открывающий тег обозначается как и одиночный — <тег>, а в
закрывающем используется слэш — </тег> :
<тег атрибут1="значение" атрибут2="значение">...</тег>
Допускается вкладывать в контейнер другие теги, однако следует соблюдать
их порядок :
<тег1 атрибут1="значение" атрибут2="значение">
<тег2 атрибут1="значение"атрибут2="значение">
...
</тег2>
...
</тег1>

7. Синтаксис
<тег атрибут1="значение" атрибут2="значение">...</тег>
• Теги можно писать как прописными, так и строчными
символами
• Внутри тега между его атрибутами допустимо ставить
перенос строк.
• Парные теги нужно обязательно закрывать.
• Если какой-либо тег написан неверно, то браузер его
проигнорирует и будет отображать текст так, словно тега
и не было.

8. Синтаксис – атрибуты тегов
<тег атрибут1="значение" атрибут2="значение">...</тег>
• Атрибуты тегов - разделяются между собой пробелом.
• Есть обязательные и необязательные атрибуты.
• Все значения атрибутов тегов следует указывать в двойных
кавычках.
• Когда для тега не добавлен какой-либо допустимый атрибут,
то браузер подставляет значение по умолчанию.
• Порядок атрибутов значения не имеет.
• Иногда используют атрибуты без значений.
• Если атрибут написан неверно, то браузер его проигнорирует.

9. Основные теги – параграфы и
перенос строки
Блоки текста разделяют между собой абзацами (параграфами).
По умолчанию между параграфами существует небольшой вертикальный отступ,
называемый отбивкой.
Создание абзацев :
<p>Абзац 1</p>
<p>Абзац 2</p>
Перенос текста без вертикального отступа –
Одиночный тег
<br>
Пример:
Вид

10. Основные теги - заголовки
6 уровней (<h1> - <h6>) .
Парный тег.
Вид :

11. Основные теги – начертание
Жирное начертание - увеличение толщины линий шрифта
Для установки текста жирного начертания применяется
два тега: <b> и <strong>.
<b>Жирное начертание шрифта</b>
<strong>Сильное выделение текста</strong>
Курсивное начертание - наклон символов, стиль,
имитирующий рукописный.
Курсив для текста определяют два тега: <i> и <em>.
<i>Курсивное начертание шрифта</i>
<em>Выделение текста</em>
В популярных браузерах равнозначен результат
использования <b> и <strong> , а также <i> и <em>.

12. Основные теги - списки
Маркированный список - перед каждым элементом
добавляется небольшой маркер.
Список формируется с помощью контейнера <ul>, а
каждый пункт - контейнера <li>.
Пример:
Вид:

13. Основные теги - списки
Нумерованный список - набор элементов с их
порядковыми номерами. Вид и тип нумерации зависит
от атрибутов тега <ol>
Список формируется с помощью контейнера <ol> , а
каждый пункт - контейнера <li>.
Пример:
<ol>
<li> Чебурашка </li>
<li> Крокодил Гена </li>
<li> Шапокляк </li>
<li> Крыса Лариса </li>
</ol>
Вид:

14. Таблицы
Таблица состоит из строк и столбцов ячеек, которые могут
содержать текст и рисунки.
Добавления таблицы - контейнер <table>. Любая таблица
состоит из строк – парный тег<tr> и ячеек -парный тег
<td> или <th> . Таблица должна содержать хотя бы
одну ячейку .
Пример:
Вид:

15. Ссылки
<a href="URL">текст ссылки</a>
URL - адрес страницы или документа,
Текст ссылки - содержимое
контейнера <a> (расположенный между
тегами <a> и </a>), по умолчанию
становится синего цвета и
подчеркивается.
Пример:
<a href="http://dog.ru">Собаки</a></p>
Вид:
Собаки

16. Добавление рисунка
<img src="URL" alt="альтернативный текст">
URL - путь к графическому файлу.
Альтернативный текст - текстовая
информацию о рисунке при отключенном в
браузере показе картинок или во время их
загрузки. Такой текст появляется раньше
самого изображения, затем заменяется
картинкой

17. Выравнивание
Атрибут align – используется с тегом <p> или тегами
заголовков.
align ="left" — выравнивание по левому краю,
задается по умолчанию;
align =" right" — выравнивание по правому краю;
align =" center" — выравнивание по центру;
align =" justify " — выравнивание по ширине
(одновременно по правому и левому краю). Это
значение работает только для текста, длина
которого более, чем одна строка.

18. Атрибуты цвета
Атрибут цвета фона – bgcolor,
Атрибут цвета текста - text
В HTML цвет задается одним из двух путей:
• с помощью шестнадцатеричного кода
• по названию некоторых цветов.
Пример: цвет фона
<body bgcolor="#fa8e47">
Вид:
<body bgcolor="teal" text="#ffffff">
<p>Пример текста</p>
</body>
Вид:
black -Черный-#000000, blue-Синий-#0000FF, fuchsia -Светло-фиолетовый-#FF00FF, gray -Темно-серый-
#808080, green-Зеленый-#008000,lime-Светло-зеленый-#00FF00, maroon-Темно-красный-#800000, navy-
Темно-синий-#000080, olive-Оливковый-#808000, purple-Темно-фиолетовый-#800080, red-Красный-#FF0000,
silver-Светло-серый-#C0C0C0, teal Сине-зеленый-#008080, white-Белый-#FFFFFF, yellow-Желтый-#FFFF00

19. Размеры элементов и расстояний
В HTML размеры элементов или расстояния между ними
задаются в пикселах или процентах.
Пиксел — это элементарная точка на экране монитора,
относительная единица измерения, зависит от
установленного экранного разрешения и размера
монитора.
Популярное разрешение монитора - 1024х768 пикселов. Картинка с
такими же размерами будет занимать всю область экрана.
При разрешении монитора 1280х1024, та же картинка займет часть
экрана.
При использовании пикселов в качестве значений пишется
только число без указания единиц, например: width="380".
Размер в процентах - вычисляется от размеров родительского
элемента, внутри которого располагается элемент. Если
родитель явно не задан, тогда за отсчет принимается окно
браузера.

20. Атрибуты размеров
Изменение размера шрифта -атрибут SIZE.
Атрибут SIZE вместе с тэгом <FONT> - меням внешний вид текстовых фрагментов.
Доступно семь размеров шрифтов. Наименьший из них обозначается цифрой 1, а самый
большой цифрой 7.
Пример:
<p><font size="2">Это шрифт 2, </font>
<font size="4">это шрифт 4, </font>
<font size="7">это шрифт 7.</font></p>
Изменение размера шрифта - с помощью тэгов <BIG> либо <SMALL>.
тэг <BIG> - укрупняет шрифт выделенного фрагмента относительно предыдущего текста,
тэг <SMALL>- уменьшает шрифт выделенного фрагмента текста.
Пример:
<p><big>Это крупный шрифт, </big>
<small>это мелкий шрифт.</small></p>

21. CSS
Стили - CSS (Cascading Style Sheets, каскадные
таблицы стилей –
набор параметров, управляющих видом и
положением элементов веб-страницы.
Преимущества:
• Разграничение кода и оформления,
• Разное оформление для разных устройств
• Расширенные по сравнению с HTML способы
оформления элементов
• Единое стилевое оформление множества
документов
• Централизованное хранение

22. Синтаксис CSS
Селектор { свойство1: значение; свойство2: значение; }
Селектор – могут быть теги, классы и идентификаторы
<head>
<style type="text/css">
h1 { color: #a6780a; font-weight: normal; }
h2 { color: olive; border-bottom: 2px solid black; }
</style>
</head>
<body>
<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
</body>
Вид:

23. Синтаксис CSS
Применение стиля к тегу
<body>
<h1 style="color: #a6780a; font-weight: normal">Заголовок 1</h1>
<h2 style="color: olive; border-bottom: 2px solid black; ">Заголовок 2</h2>
</body>
Вид:

24. Самоучитель HTML
http://htmlbook.ru

25. Справочник HTML http
://htmlbook.ru

26. Самоучитель CSS
http://htmlbook.ru

27. Справочник CSS
http://htmlbook.ru

28. Техническая поддержка нашего проекта :
Ермоленко Татьяна Сергеевна.
(Образование: ЧГТУ, системное программирование).
E-mail: ermolenko.tatjana@gmail.com
Skype: ditya_solntca
Последние разработки : http://nona.biz.ua/

29. Использование HTML
• Страницы сайтов
• Письма
• Файлы
• Электронные книги
Текст, размеченный тегами, читается
браузерами.

30. Способ использования HTML
• Специальные текстовые редакторы
• Визуальные редакторы
• Сервисы – фрагмент кода

31. Примеры из практикума
Заголовки и параграфы
<h1 style="text-align: center; ">
Экодача</h1>
<h2 style="text-align: center; ">
Интернет-магазин по созданию и обустройству
экологически чистого подсобного хозяйства</h2>
<p style="text-align: justify;">
Здесь Вы можете найти интересную информацию&nbsp;
по созданию и обустройству экологически чистого
подсобного хозяйства, а также приобрести нужные для
этого товары .</p>
Вид:

32. Примеры из практикума
Списки
<h1>
Товары и услуги</h1>
<p>
Здесь Вы можете заказать наши услуги, книги и товары, которые помогут организовать у
себя в подсобном хозяйстве производство экологически чистых продуктов питания</p>
<ul>
<li>
Книги о грибоводстве</li>
<li>
Мицелий вешенки зерновой - разные штаммы</li>
<li>
Мицелий на брусочках - вешенка, опенок, шиитаке, рейши</li>
<li>
Калифорнийские черви</li>
</ul>
Вид:

33. Примеры из практикума
Таблицы
<table border="1" cellpadding="1" cellspacing="1">
<tbody>
<tr>
<td style="text-align: center;">
<a href="http://gss.justclick.ru/index.html">Главная</a></td>
<td style="text-align: center;">
<a href="http://gss.justclick.ru/about-Author">Об авторе</a></td>
<td style="text-align: center;">
<a href="http://gss.justclick.ru/article">Статьи</a></td>
<td style="text-align: center;">
<a href="http://gss.justclick.ru/services">Услуги</a></td>
<td style="text-align: center;">
<a href="http://gss.justclick.ru/Contacts">Контакты</a></td>
</tr>
</tbody>
</table>
Вид:

34. Примеры из практикума
Ссылки
<table border="1" cellpadding="1" cellspacing="1">
<tbody>
<tr>
<td style="text-align: center;">
<a href="http://gss.justclick.ru/index.html">Главная</a> </td>
<td style="text-align: center;">
<a href="http://gss.justclick.ru/about-Author">Об авторе</a> </td>
<td style="text-align: center;">
<a href="http://gss.justclick.ru/article">Статьи</a> </td>
<td style="text-align: center;">
<a href="http://gss.justclick.ru/services">Услуги</a> </td>
<td style="text-align: center;">
<a href="http://gss.justclick.ru/Contacts">Контакты</a> </td>
</tr>
</tbody>
</table>
Вид:

35. Примеры из практикума
Рисунки, размеры
<p style="text-align: justify;">
<img alt=""
src="http://gss.justclick.ru/media/content/gss/
%D0%A1%D0%B5%D1%80%D0%B3%D0%B5%D0%B9.JPG"
style="width: 257px; height: 192px;" /></p>
<p style="text-align: justify;">
Сергей увлекся темой создания экологически-чистого
подсобного хозяйства после 50 лет. Тогда он оставил
работу в столице и купил домик в деревне.</p>
Вид:

36. Поиск по справочнику

37. Организационные вопросы
Записи тренинга
Специальные закрытые страницы для
просмотра презентаций и прослушивания
аудио с файлообменников :
http://opanasenko.org/online-sheet.html
http://opanasenko.org/online-sheet2.html

38. Тема 1. Интернет-сайты - виды и
возможности
http://opanasenko.org/online-sheet.html

39. Тема 1. Интернет-сайты - виды и
возможности
http://opanasenko.org/online-sheet.html

40. Тема 2. Интерактивность
http://opanasenko.org/online-sheet2.html

41. Тема 2. Интерактивность
http://opanasenko.org/online-sheet2.html

42. Первые результаты

43. Первые результаты

44. Следующее занятие –
19 октября,
обратная связь по домашним
заданиям +
бонусная лекция – подготовка
презентации .

45. Опанасенко Ольга
Владимировна
Тел. 067 460 24 00
Web: http://opanasenko.org
E-mail: olga@opanasenko.org
Skype: OLGAOOV
Twitter: OLGAOOV