основы нтмл

2,435 views

Published on

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

Published in: Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,435
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

основы нтмл

  1. 1. Интернет-тренингБонусная лекция Основы HTML
  2. 2. Основы HTML
  3. 3. НазначениеHTML (HyperText Markup Language, язык разметки гипертекста) — это система верстки, которая определяет, как и какие элементы должны располагаться на веб- странице.Текст в HTML читается браузерами.
  4. 4. СинтаксисПример кода страницы Вид:
  5. 5. СинтаксисТег - элемент форматирования.Общий синтаксис написания тегов<тег атрибут1="значение" атрибут2="значение"> <тег атрибут1="значение" атрибут2="значение">...</тег>Типы тегов :• одиночные• парные (контейнеры)- может включать внутри себя другие теги или текст.
  6. 6. СинтаксисОдиночные теги :<тег>.Парные теги состоят из двух частей — открывающий и закрывающий тег. Открывающий тег обозначается как и одиночный — <тег>, а в закрывающем используется слэш — </тег> :<тег атрибут1="значение" атрибут2="значение">...</тег>Допускается вкладывать в контейнер другие теги, однако следует соблюдать их порядок :<тег1 атрибут1="значение" атрибут2="значение"> <тег2 атрибут1="значение"атрибут2="значение"> ... </тег2> ...</тег1> 
  7. 7. Синтаксис<тег атрибут1="значение" атрибут2="значение">...</тег>• Теги можно писать как прописными, так и строчными символами• Внутри тега между его атрибутами допустимо ставить перенос строк. • Парные теги нужно обязательно закрывать.• Если какой-либо тег написан неверно, то браузер его проигнорирует и будет отображать текст так, словно тега и не было.
  8. 8. Синтаксис – атрибуты тегов<тег атрибут1="значение" атрибут2="значение">...</тег>• Атрибуты тегов - разделяются между собой пробелом.• Есть обязательные и необязательные атрибуты.• Все значения атрибутов тегов следует указывать в двойных кавычках.• Когда для тега не добавлен какой-либо допустимый атрибут, то браузер подставляет значение по умолчанию. • Порядок атрибутов значения не имеет.• Иногда используют атрибуты без значений.• Если атрибут написан неверно, то браузер его проигнорирует.
  9. 9. Основные теги – параграфы иперенос строкиБлоки текста разделяют между собой абзацами (параграфами).По умолчанию между параграфами существует небольшой вертикальный отступ, называемый отбивкой.Создание абзацев :<p>Абзац 1</p><p>Абзац 2</p>Перенос текста без вертикального отступа –Одиночный тег<br>Пример: Вид
  10. 10. Основные теги - заголовки6 уровней (<h1> - <h6>) .Парный тег. Вид :
  11. 11. Основные теги – начертаниеЖирное начертание - увеличение толщины линий шрифтаДля установки текста жирного начертания применяется два тега: <b> и <strong>.<b>Жирное начертание шрифта</b><strong>Сильное выделение текста</strong>Курсивное начертание - наклон символов, стиль, имитирующий рукописный.Курсив для текста определяют два тега: <i> и <em>.<i>Курсивное начертание шрифта</i> <em>Выделение текста</em>В популярных браузерах равнозначен результат использования <b> и <strong> , а также <i> и <em>.
  12. 12. Основные теги - спискиМаркированный список - перед каждым элементом добавляется небольшой маркер.Список формируется с помощью контейнера <ul>, а каждый пункт - контейнера <li>.Пример: Вид:
  13. 13. Основные теги - спискиНумерованный список - набор элементов с их порядковыми номерами. Вид и тип нумерации зависит от атрибутов тега <ol>Список формируется с помощью контейнера  <ol> , а каждый пункт - контейнера <li>.Пример:<ol> <li> Чебурашка </li> <li> Крокодил Гена </li> <li> Шапокляк </li> <li> Крыса Лариса </li></ol> Вид:
  14. 14. ТаблицыТаблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки.Добавления таблицы - контейнер <table>. Любая таблица состоит из строк – парный тег<tr> и ячеек -парный тег <td> или <th> . Таблица должна содержать хотя бы одну ячейку .Пример: Вид:
  15. 15. Ссылки<a href="URL">текст ссылки</a>URL - адрес страницы или документа,Текст ссылки - содержимое контейнера <a> (расположенный между тегами <a> и </a>), по умолчанию становится синего цвета и подчеркивается.Пример: <a href="http://dog.ru">Собаки</a></p>Вид: Собаки
  16. 16. Добавление рисунка<img src="URL" alt="альтернативный текст">URL - путь к графическому файлу.Альтернативный текст - текстовая информацию о рисунке при отключенном в браузере показе картинок или во время их загрузки. Такой текст появляется раньше самого изображения, затем заменяется картинкой
  17. 17. ВыравниваниеАтрибут align – используется с тегом <p> или тегами заголовков.align ="left" — выравнивание по левому краю, задается по умолчанию;align =" right"  — выравнивание по правому краю;align =" center"  — выравнивание по центру;align =" justify "  — выравнивание по ширине (одновременно по правому и левому краю). Это значение работает только для текста, длина которого более, чем одна строка.
  18. 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. 19. Размеры элементов и расстояний В HTML размеры элементов или расстояния между ними задаются в пикселах или процентах.  Пиксел — это элементарная точка на экране монитора, относительная единица измерения, зависит от установленного экранного разрешения и размера монитора. Популярное разрешение монитора - 1024х768 пикселов. Картинка с такими же размерами будет занимать всю область экрана. При разрешении монитора 1280х1024, та же картинка займет часть экрана. При использовании пикселов в качестве значений пишется только число без указания единиц, например: width="380". Размер в процентах - вычисляется от размеров родительского элемента, внутри которого располагается элемент. Если родитель явно не задан, тогда за отсчет принимается окно браузера.
  20. 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. 21. CSS Стили - CSS (Cascading Style Sheets, каскадные таблицы стилей – набор параметров, управляющих видом и положением элементов веб-страницы.Преимущества:• Разграничение кода и оформления,• Разное оформление для разных устройств• Расширенные по сравнению с HTML способы оформления элементов• Единое стилевое оформление множества документов• Централизованное хранение
  22. 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. 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. 24. Самоучитель HTMLhttp://htmlbook.ru
  25. 25. Справочник HTML http://htmlbook.ru
  26. 26. Самоучитель CSShttp://htmlbook.ru
  27. 27. Справочник CSShttp://htmlbook.ru
  28. 28. Техническая поддержка нашего проекта :Ермоленко Татьяна Сергеевна.(Образование: ЧГТУ, системное программирование).E-mail: ermolenko.tatjana@gmail.comSkype: ditya_solntcaПоследние разработки : http://nona.biz.ua/
  29. 29. Использование HTML• Страницы сайтов• Письма• Файлы• Электронные книгиТекст, размеченный тегами, читается браузерами.
  30. 30. Способ использования HTML • Специальные текстовые редакторы • Визуальные редакторы • Сервисы – фрагмент кода
  31. 31. Примеры из практикума Заголовки и параграфы<h1 style="text-align: center; "> Экодача</h1><h2 style="text-align: center; "> Интернет-магазин по созданию и обустройству экологически чистого подсобного хозяйства</h2><p style="text-align: justify;"> Здесь Вы можете найти интересную информацию&nbsp; по созданию и обустройству экологически чистого подсобного хозяйства, а также приобрести нужные для этого товары .</p> Вид:
  32. 32. Примеры из практикума Списки<h1> Товары и услуги</h1><p> Здесь Вы можете заказать наши услуги, книги и товары, которые помогут организовать у себя в подсобном хозяйстве производство экологически чистых продуктов питания</p><ul> <li> Книги о грибоводстве</li> <li> Мицелий вешенки зерновой - разные штаммы</li> <li> Мицелий на брусочках - вешенка, опенок, шиитаке, рейши</li> <li> Калифорнийские черви</li></ul> Вид:
  33. 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. 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. 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. 36. Поиск по справочнику
  37. 37. Организационные вопросыЗаписи тренингаСпециальные закрытые страницы для просмотра презентаций и прослушивания аудио с файлообменников :http://opanasenko.org/online-sheet.htmlhttp://opanasenko.org/online-sheet2.html
  38. 38. Тема 1. Интернет-сайты - виды ивозможностиhttp://opanasenko.org/online-sheet.html
  39. 39. Тема 1. Интернет-сайты - виды ивозможностиhttp://opanasenko.org/online-sheet.html
  40. 40. Тема 2. Интерактивностьhttp://opanasenko.org/online-sheet2.html
  41. 41. Тема 2. Интерактивностьhttp://opanasenko.org/online-sheet2.html
  42. 42. Первые результаты
  43. 43. Первые результаты
  44. 44. Следующее занятие –19 октября,обратная связь по домашнимзаданиям +бонусная лекция – подготовкапрезентации .
  45. 45. Опанасенко ОльгаВладимировнаТел. 067 460 24 00Web: http://opanasenko.orgE-mail: olga@opanasenko.orgSkype: OLGAOOVTwitter: OLGAOOV

×