• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
основы нтмл
 

основы нтмл

on

  • 1,682 views

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

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

Statistics

Views

Total Views
1,682
Views on SlideShare
1,675
Embed Views
7

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 7

http://opanasenko.org 7

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    основы нтмл основы нтмл Presentation Transcript

    • Интернет-тренингБонусная лекция Основы HTML
    • Основы HTML
    • НазначениеHTML (HyperText Markup Language, язык разметки гипертекста) — это система верстки, которая определяет, как и какие элементы должны располагаться на веб- странице.Текст в HTML читается браузерами.
    • СинтаксисПример кода страницы Вид:
    • СинтаксисТег - элемент форматирования.Общий синтаксис написания тегов<тег атрибут1="значение" атрибут2="значение"> <тег атрибут1="значение" атрибут2="значение">...</тег>Типы тегов :• одиночные• парные (контейнеры)- может включать внутри себя другие теги или текст.
    • СинтаксисОдиночные теги :<тег>.Парные теги состоят из двух частей — открывающий и закрывающий тег. Открывающий тег обозначается как и одиночный — <тег>, а в закрывающем используется слэш — </тег> :<тег атрибут1="значение" атрибут2="значение">...</тег>Допускается вкладывать в контейнер другие теги, однако следует соблюдать их порядок :<тег1 атрибут1="значение" атрибут2="значение"> <тег2 атрибут1="значение"атрибут2="значение"> ... </тег2> ...</тег1> 
    • Синтаксис<тег атрибут1="значение" атрибут2="значение">...</тег>• Теги можно писать как прописными, так и строчными символами• Внутри тега между его атрибутами допустимо ставить перенос строк. • Парные теги нужно обязательно закрывать.• Если какой-либо тег написан неверно, то браузер его проигнорирует и будет отображать текст так, словно тега и не было.
    • Синтаксис – атрибуты тегов<тег атрибут1="значение" атрибут2="значение">...</тег>• Атрибуты тегов - разделяются между собой пробелом.• Есть обязательные и необязательные атрибуты.• Все значения атрибутов тегов следует указывать в двойных кавычках.• Когда для тега не добавлен какой-либо допустимый атрибут, то браузер подставляет значение по умолчанию. • Порядок атрибутов значения не имеет.• Иногда используют атрибуты без значений.• Если атрибут написан неверно, то браузер его проигнорирует.
    • Основные теги – параграфы иперенос строкиБлоки текста разделяют между собой абзацами (параграфами).По умолчанию между параграфами существует небольшой вертикальный отступ, называемый отбивкой.Создание абзацев :<p>Абзац 1</p><p>Абзац 2</p>Перенос текста без вертикального отступа –Одиночный тег<br>Пример: Вид
    • Основные теги - заголовки6 уровней (<h1> - <h6>) .Парный тег. Вид :
    • Основные теги – начертаниеЖирное начертание - увеличение толщины линий шрифтаДля установки текста жирного начертания применяется два тега: <b> и <strong>.<b>Жирное начертание шрифта</b><strong>Сильное выделение текста</strong>Курсивное начертание - наклон символов, стиль, имитирующий рукописный.Курсив для текста определяют два тега: <i> и <em>.<i>Курсивное начертание шрифта</i> <em>Выделение текста</em>В популярных браузерах равнозначен результат использования <b> и <strong> , а также <i> и <em>.
    • Основные теги - спискиМаркированный список - перед каждым элементом добавляется небольшой маркер.Список формируется с помощью контейнера <ul>, а каждый пункт - контейнера <li>.Пример: Вид:
    • Основные теги - спискиНумерованный список - набор элементов с их порядковыми номерами. Вид и тип нумерации зависит от атрибутов тега <ol>Список формируется с помощью контейнера  <ol> , а каждый пункт - контейнера <li>.Пример:<ol> <li> Чебурашка </li> <li> Крокодил Гена </li> <li> Шапокляк </li> <li> Крыса Лариса </li></ol> Вид:
    • ТаблицыТаблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки.Добавления таблицы - контейнер <table>. Любая таблица состоит из строк – парный тег<tr> и ячеек -парный тег <td> или <th> . Таблица должна содержать хотя бы одну ячейку .Пример: Вид:
    • Ссылки<a href="URL">текст ссылки</a>URL - адрес страницы или документа,Текст ссылки - содержимое контейнера <a> (расположенный между тегами <a> и </a>), по умолчанию становится синего цвета и подчеркивается.Пример: <a href="http://dog.ru">Собаки</a></p>Вид: Собаки
    • Добавление рисунка<img src="URL" alt="альтернативный текст">URL - путь к графическому файлу.Альтернативный текст - текстовая информацию о рисунке при отключенном в браузере показе картинок или во время их загрузки. Такой текст появляется раньше самого изображения, затем заменяется картинкой
    • ВыравниваниеАтрибут align – используется с тегом <p> или тегами заголовков.align ="left" — выравнивание по левому краю, задается по умолчанию;align =" right"  — выравнивание по правому краю;align =" center"  — выравнивание по центру;align =" justify "  — выравнивание по ширине (одновременно по правому и левому краю). Это значение работает только для текста, длина которого более, чем одна строка.
    • Атрибуты цвета Атрибут цвета фона – 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
    • Размеры элементов и расстояний В HTML размеры элементов или расстояния между ними задаются в пикселах или процентах.  Пиксел — это элементарная точка на экране монитора, относительная единица измерения, зависит от установленного экранного разрешения и размера монитора. Популярное разрешение монитора - 1024х768 пикселов. Картинка с такими же размерами будет занимать всю область экрана. При разрешении монитора 1280х1024, та же картинка займет часть экрана. При использовании пикселов в качестве значений пишется только число без указания единиц, например: width="380". Размер в процентах - вычисляется от размеров родительского элемента, внутри которого располагается элемент. Если родитель явно не задан, тогда за отсчет принимается окно браузера.
    • Атрибуты размеровИзменение размера шрифта -атрибут 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>
    • CSS Стили - CSS (Cascading Style Sheets, каскадные таблицы стилей – набор параметров, управляющих видом и положением элементов веб-страницы.Преимущества:• Разграничение кода и оформления,• Разное оформление для разных устройств• Расширенные по сравнению с HTML способы оформления элементов• Единое стилевое оформление множества документов• Централизованное хранение
    • Синтаксис 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> Вид:
    • Синтаксис CSSПрименение стиля к тегу<body><h1 style="color: #a6780a; font-weight: normal">Заголовок 1</h1><h2 style="color: olive; border-bottom: 2px solid black; ">Заголовок 2</h2></body> Вид:
    • Самоучитель HTMLhttp://htmlbook.ru
    • Справочник HTML http://htmlbook.ru
    • Самоучитель CSShttp://htmlbook.ru
    • Справочник CSShttp://htmlbook.ru
    • Техническая поддержка нашего проекта :Ермоленко Татьяна Сергеевна.(Образование: ЧГТУ, системное программирование).E-mail: ermolenko.tatjana@gmail.comSkype: ditya_solntcaПоследние разработки : http://nona.biz.ua/
    • Использование HTML• Страницы сайтов• Письма• Файлы• Электронные книгиТекст, размеченный тегами, читается браузерами.
    • Способ использования HTML • Специальные текстовые редакторы • Визуальные редакторы • Сервисы – фрагмент кода
    • Примеры из практикума Заголовки и параграфы<h1 style="text-align: center; "> Экодача</h1><h2 style="text-align: center; "> Интернет-магазин по созданию и обустройству экологически чистого подсобного хозяйства</h2><p style="text-align: justify;"> Здесь Вы можете найти интересную информацию&nbsp; по созданию и обустройству экологически чистого подсобного хозяйства, а также приобрести нужные для этого товары .</p> Вид:
    • Примеры из практикума Списки<h1> Товары и услуги</h1><p> Здесь Вы можете заказать наши услуги, книги и товары, которые помогут организовать у себя в подсобном хозяйстве производство экологически чистых продуктов питания</p><ul> <li> Книги о грибоводстве</li> <li> Мицелий вешенки зерновой - разные штаммы</li> <li> Мицелий на брусочках - вешенка, опенок, шиитаке, рейши</li> <li> Калифорнийские черви</li></ul> Вид:
    • Примеры из практикума Таблицы<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> Вид:
    • Примеры из практикума Ссылки<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> Вид:
    • Примеры из практикума Рисунки, размеры<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> Вид:
    • Поиск по справочнику
    • Организационные вопросыЗаписи тренингаСпециальные закрытые страницы для просмотра презентаций и прослушивания аудио с файлообменников :http://opanasenko.org/online-sheet.htmlhttp://opanasenko.org/online-sheet2.html
    • Тема 1. Интернет-сайты - виды ивозможностиhttp://opanasenko.org/online-sheet.html
    • Тема 1. Интернет-сайты - виды ивозможностиhttp://opanasenko.org/online-sheet.html
    • Тема 2. Интерактивностьhttp://opanasenko.org/online-sheet2.html
    • Тема 2. Интерактивностьhttp://opanasenko.org/online-sheet2.html
    • Первые результаты
    • Первые результаты
    • Следующее занятие –19 октября,обратная связь по домашнимзаданиям +бонусная лекция – подготовкапрезентации .
    • Опанасенко ОльгаВладимировнаТел. 067 460 24 00Web: http://opanasenko.orgE-mail: olga@opanasenko.orgSkype: OLGAOOVTwitter: OLGAOOV