Инфоурок Другое ПрезентацииПрезентация на тему "Язык HTML"

Презентация на тему "Язык HTML"

Скачать материал
Скачать материал

Описание презентации по отдельным слайдам:

  • Текстовые и гипертекстовые способы хранения и представления информации

    1 слайд

    Текстовые и гипертекстовые способы хранения и представления информации

  • American Standard Code for Informational Interchange — Американский стандартн...

    2 слайд

    American Standard Code for Informational Interchange — Американский стандартный код информационного обмена.
     
    Для хранения двоичного кода одного символа выделен 1 байт = 8бит, количество возможных сочетаний единиц и нулей равно  2 8 =256.
    ASCII-коды

  • Кодовая таблица UnicodeСтандарт кодирования символов, включающий в себя знаки...

    3 слайд

    Кодовая таблица Unicode
    Стандарт кодирования символов, включающий в себя знаки почти всех письменных языков мира.

    Стандарт был предложен в 1991 году некоммерческой организацией «Консорциум Юникода».

  • Гиперссылка – «активная» ссылка на другой документ.
Гипертекст – текст, содер...

    4 слайд

    Гиперссылка – «активная» ссылка на другой документ.
    Гипертекст – текст, содержащий гиперссылки.
    Гипермедиа-документ – документ, включающий текст, рисунки, звуки, видео, в котором любой элемент может быть гиперссылкой.
    WWW (World Wide Web) – «всемирная паутина», служба Интернет для обмена информацией в виде гипертекста (и гипермедиа).
    Основные определения

  • Web-страницаЭто документ или информационный ресурс Всемирной паутины, доступ...

    5 слайд

    Web-страница
    Это документ или информационный ресурс Всемирной паутины, доступ к которому осуществляется с помощью веб-браузера.
    статические – существуют на сервере в виде готовых файлов (*.htm, *.html).
    динамические – полностью или частично создаются на сервере в момент запроса (выбор информации из БД, *.shtml, *.asp, *.pl, *.php).

    позволяют выбирать информацию из БД по заранее неизвестным запросам.
    дополнительная нагрузка на сервер;
    загружаются медленнее.

  • БраузерЭто прикладное ПО для просмотра страниц, содержания веб-документов, ко...

    6 слайд

    Браузер
    Это прикладное ПО для просмотра страниц, содержания веб-документов, компьютерных файлов и их каталогов, управления веб-приложениями, а также для решения других задач.

  • Язык HTMLHTML = Hypertext Markup Language
              (язык разметки гиперт...

    7 слайд

    Язык HTML
    HTML = Hypertext Markup Language
    (язык разметки гипертекста)
    HTML был разработан британским учёным
    Тимом Бернерсом-Ли
    в конце 80-х годов 20 века в рамках создания проекта распределенной
    гипертекстовой системы WWW.

  • ТэгЭто команда языка HTML, которую выполняет браузер:непарные тэги


парные т...

    8 слайд

    Тэг
    Это команда языка HTML, которую выполняет браузер:
    непарные тэги


    парные тэги (контейнеры)
    <TABLE>
    ...
    </TABLE>
    Открывающий
    Закрывающий
    Область действия тэга: описание таблицы
    <IMG SRC = "vasya.jpg">
    Вставить рисунок

  • Это какой-то указатель коде HTML, отличительный знак, который придает элемент...

    9 слайд

    Это какой-то указатель коде HTML, отличительный знак, который придает элементу какое-то свойство, что выделяет его из других.
    Атрибут
    <a title="Ссылка, ведущая на Яндекс" href="http://yandex.ru">Поиск</a>
    Атрибут (всплывающая подсказка, которая появится, если подвести мышку к элементу и на некоторое время оставить её неподвижной)

  • Структура HTML страницы

Невидимая часть страницы (Заголовок, Мета-тэги, Подк...

    10 слайд

    Структура HTML страницы
    <html>
    <head>
    Невидимая часть страницы (Заголовок, Мета-тэги, Подключение стилей, Java-script )
    </head>
    <body>
    Видимая часть страницы, в которой расположены непосредственно элементы Web- страницы: абзацы, таблицы рисунки.
    </body>
    </html>

  • Является контейнером, который заключает в себе все содержимое Web-страницы, в...

    11 слайд

    Является контейнером, который заключает в себе все содержимое Web-страницы, включая тэги <head> и <body>.

    Документ начинается тэгом <html> и заканчивается </html>.
    Тэг <html>

  • Предназначен для хранения элементов, цель которых — помочь браузеру в работе...

    12 слайд

    Предназначен для хранения элементов, цель которых — помочь браузеру в работе с данными.

    Содержимое тэга <head> не отображается напрямую на веб-странице, за исключением тэга <title>.
    Тэг < head >

  • Определяет заголовок документа. Элемент  не является частью документа и не по...

    13 слайд

    Определяет заголовок документа. Элемент <title> не является частью документа и не показывается напрямую на Wеб-странице.

    Допускается использовать только один тэг <title> на документ и размещать его в контейнере <head>.
    Тэг <title>

  • Предназначен для хранения содержания веб-страницы (контента), отображаемого в...

    14 слайд

    Предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера.

    Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера <body>.
    Тэг <body>

  • Простейшая Web-страница

    15 слайд

    Простейшая Web-страница

  • Заголовки: H1 … H6

    16 слайд

    Заголовки: H1 … H6

  • Заголовки: H1 … H6Выравнивание:Историяleft, 
center, 
right

    17 слайд

    Заголовки: H1 … H6
    Выравнивание:
    <H1 ALIGN=center>История</H1>
    left,
    center,
    right

  • Выделение текста - выделяет отрывок текста курсивом, не придавая ему дополнит...

    18 слайд

    Выделение текста
    <i> - выделяет отрывок текста курсивом, не придавая ему дополнительный акцент.
    <b> - задает полужирное начертание отрывка текста, не придавая акцент или важность выделенному.
    <u> - выделяет отрывок текста подчёркиванием, без дополнительного акцента.
    <em> - выделяет важные фрагменты текста, отображая их курсивом.

  • Абзацы - перенос текста на новую строку.

    19 слайд

    Абзацы

    - перенос текста на новую строку.

  • Абзацы - абзац с отступами.

    20 слайд

    Абзацы
    <p> - абзац с отступами.

  • Выравниваниеleft – по левой границе
right – по правой границе
center – по цен...

    21 слайд

    Выравнивание
    <P ALIGN="center"></p>
    left – по левой границе
    right – по правой границе
    center – по центру
    justify – по ширине

  • Маркированные списки - создает маркированный список.
 - элемент маркированног...

    22 слайд

    Маркированные списки
    <ul> - создает маркированный список.
    <li> - элемент маркированного или нумерованного списка.

  • Маркированные спискиИзменение маркера:disc – 
circle – ○
square – ■
...

    23 слайд

    Маркированные списки
    Изменение маркера:
    disc – 
    circle – ○
    square – ■
    <UL TYPE="disc">
    ...
    </UL>

  • Нумерованные списки - упорядоченный нумерованный список. Нумерация может быть...

    24 слайд

    Нумерованные списки
    <ol> - упорядоченный нумерованный список. Нумерация может быть числовая или алфавитная.

  • Нумерованные спискиИзменение нумерации:
...
1, i, I, a, A

    25 слайд

    Нумерованные списки
    Изменение нумерации:
    <OL TYPE=i START=3>
    ...
    </OL>
    1, i, I, a, A

  • Многоуровневые списки

    26 слайд

    Многоуровневые списки

  • Рисунки в документе - встраивает изображения в HTML-документ с помощью атрибу...

    27 слайд

    Рисунки в документе
    <img> - встраивает изображения в HTML-документ с помощью атрибута src, значением которого является адрес встраиваемого изображения.
    <IMG SRC="flag.jpg">
    image
    (изображение)
    bottom, left, middle, right, top
    <IMG SRC="flag.jpg" ALIGN="left">
    source
    (источник)

  • Рисунки в документеИз другой папки:С другого сервера:

    28 слайд

    Рисунки в документе
    Из другой папки:
    С другого сервера:
    <IMG SRC="images/flag.jpg">
    <IMG SRC="../../images/night.jpg">
    <IMG SRC="http://example.com/img/night.jpg">

  • Ссылки - создаёт гипертекстовые ссылки.
 - представляет собой гиперссылку с т...

    29 слайд

    Ссылки
    <a> - создаёт гипертекстовые ссылки.
    <area> - представляет собой гиперссылку с текстом, соответствующей определенной области на карте-изображении или активную область внутри карты-изображения. Всегда вложен внутрь тега <map>.

    <a href="http://site.ru">указатель ссылки</a>
    <a href="webupblog.ru/link-to-page"><img src="http://webupblog.ru/image1.jpg" /></a>
    Ссылка-изображение

  • - тег-контейнер для разделов HTML-документа. Используется для группировки бл...

    30 слайд

    <div> - тег-контейнер для разделов HTML-документа. Используется для группировки блочных элементов с целью форматирования стилями.
    <hr> - горизонтальная линия для тематического разделения параграфов.
    <s> - отображает текст, не являющийся актуальным, перечеркнутым.
    <span> - контейнер для строчных элементов. Можно использовать для форматирования отрывков текста, например, выделения цветом отдельных слов.
    Часто используемые теги

  • - расставляет акценты в тексте, выделяя полужирным.
 - задает подстрочное на...

    31 слайд

    <strong> - расставляет акценты в тексте, выделяя полужирным.
    <sub> - задает подстрочное написание символов, например, индекса элемента в химических формулах.
    <sup> - задает надстрочное написание символов.

    Часто используемые теги

  • Содержание и оформлениесодержание (контент)оформлениеmain.cssmini.cssprint.cs...

    32 слайд

    Содержание и оформление
    содержание (контент)
    оформление
    main.css
    mini.css
    print.css
    Физическая разметка (*.css)
    Логическая разметка (*.html)

  • Что такое HTML?HTML – код не должен содержать оформления!
оформление частей д...

    33 слайд

    Что такое HTML?
    HTML – код не должен содержать оформления!
    оформление частей документа (заголовков, параграфов) описывается в отдельном файле.

    CSS = Cascading Style Sheets – каскадные таблицы стилей (стилевые файлы: *.css).
    HTML + CSS
    + Javascript
    Содержание
    Оформление
    Анимация

  • Свойства элементов страницыcolor – цвет символов
background – цвет фонаmy.css...

    34 слайд

    Свойства элементов страницы
    color – цвет символов
    background – цвет фона
    my.css
    body {
    color: white;
    background: #FF6600;
    }
    Значение
    Название тэга

  • Подключение стилевого файла
Пример CSS




...

    35 слайд

    Подключение стилевого файла
    <html>
    <title>Пример CSS</title>
    <head>
    <link rel="stylesheet" type="text/css" href="my.css">
    </head>
    <body>
    ...
    </body>
    </html>

  • Шрифтыp {
 font-family: Arial, sans-serif;
 font-size: 20px;
 font-style: ita...

    36 слайд

    Шрифты
    p {
    font-family: Arial, sans-serif;
    font-size: 20px;
    font-style: italic;
    font-weight: bold;
    }
    Для всех абзацев
    Семейство шрифтов
    normal – обычный
    bold - жирный
    normal – обычный
    italic - курсив
    размер в пикселях
    serif – с засечками
    sans-serif – без засечек
    monospace – моноширинный

  • qq.htmlКлассы (стили оформления)Для абзацев класса specp.spec {
 font-style:...

    37 слайд

    qq.html
    Классы (стили оформления)
    Для абзацев класса spec
    p.spec {
    font-style: italic;
    background: green;
    }
    <p class="spec">
    L’Etat c’est moi.
    </p>
    .spec {
    font-style: italic;
    background: green;
    }
    Для всех элементов
    класса spec
    <h1 class="spec">
    Россия молодая
    </h1>

  • Размеры и выравниваниеLorem ipsum dolor sit amet, consectetur adipiscing elit...

    38 слайд

    Размеры и выравнивание
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis velit, tempus sit amet cursus at, porta ut turpis. Sed augue tellus, tincidunt id ultricies at, tempor quis sem.
    100px
    80%
    20px
    p {
    background: #E6E6FF;
    width: 80%;
    height: 100px;
    text-align: left;
    text-indent: 20px;
    }
    Фон
    Ширина
    Высота
    выравнивание:
    left, center, right, justify
    Абзацный отступ

  • Рамка и поляLorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitu...

    39 слайд

    Рамка и поля
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis velit, tempus sit amet cursus at, porta ut turpis. Sed augue tellus, tincidunt id ultricies at, tempor quis sem.
    40px
    40px
    5px
    20px
    p {
    background: #ccffcc;
    border: 1px solid green;
    margin: 0 40px 20px 40px;
    padding: 5px;
    }
    Цвет
    Отступы внутри
    Отступы снаружи
    Рамка
    Со всех сторон
    Толщина
    сверху, справа, снизу, слева
    solid – сплошная
    dashed - штриховая
    dotted – точечная

  • Форматы рисунковGIF (Graphic Interchange Format)
сжатие без потерь;
прозрачны...

    40 слайд

    Форматы рисунков
    GIF (Graphic Interchange Format)
    сжатие без потерь;
    прозрачные области;
    анимация;
    только с палитрой (2…256 цветов);
    рисунки с четкими границами, мелкие рисунки.
    JPEG (Joint Photographer Expert Group)
    сжатие с потерями;
    нет анимации и прозрачности;
    рисунки с размытыми границами, фото.
    PNG (Portable Network Graphic)
    сжатие без потерь;
    с палитрой (PNG-8) и True Color (PNG-24)
    прозрачность и полупрозрачность;
    нет анимации;
    плохо сжимает мелкие рисунки.

  • Фон страницы (через CSS)body {
 background: url(back.jpg);
} &#039;images/back.jpg...

    41 слайд

    Фон страницы (через CSS)
    body {
    background: url(back.jpg);
    }
    'images/back.jpg'
    '../images/back.jpg‘
    'http://www.vasya.ru/images/back.jpg'

  • Выравнивание и отступы (CSS) img.left {
  float: left;
  margin: 5px 10px;
}m...

    42 слайд

    Выравнивание и отступы (CSS)
    <img src="net.jpg" class="left">
    img.left {
    float: left;
    margin: 5px 10px;
    }
    margin: 5px 10px 5px 0;
    Отступа слева нет!
    HSPACE
    ALIGN
    VSPACE

  • Таблицы - тег для создания таблицы.
 - определяет тело таблицы.
 - создает яч...

    43 слайд

    Таблицы
    <table> - тег для создания таблицы.
    <tbody> - определяет тело таблицы.
    <td> - создает ячейку таблицы.
    <tfoot> - определяет нижний колонтитул таблицы.
    <th> - создает заголовок ячейки таблицы.
    <thead> - определяет заголовок (шапку) таблицы.
    <caption> - определяет название таблицы.
    <tr> - создает строку таблицы.

  • Размеры (через CSS)строки:ячейки:table.spec {
  width: 60%;
  height: 300px;...

    44 слайд

    Размеры (через CSS)
    строки:
    ячейки:
    table.spec {
    width: 60%;
    height: 300px;
    }
    <table class="spec">
    ...
    </table>
    table.spec tr {
    height: 50px;
    }
    table.spec td.qq {
    width: 25%;
    height: 50px;
    }

  • Выравнивание (через CSS)

   По центру, 
       по верхней границе
   По прав...

    45 слайд

    Выравнивание (через CSS)
    <table class="ex" border="1">
    <tr class="centop">
    <td>По центру,
    по верхней границе</td>
    <td class="rmid">По правой
    границе, по середине</td>
    </tr>
    </table>
    table.ex tr.centop {
    text-align: center;
    vertical-align: top;
    height:100px;
    }
    table.ex td.rmid {
    text-align: right;
    vertical-align: middle;
    width:200px;
    }
    left, center, right
    top, middle,
    bottom

  • Фон и цвет текста (CSS)

  Привет!
  


 
 Таблица 
 из двух строк
 и двух ст...

    46 слайд

    Фон и цвет текста (CSS)
    <table border="1" class="qq">
    <tr class="spec">
    <td>Привет!</td>
    <td class="r"></td>
    </tr>
    <tr>
    <td class="pic">
    Таблица
    из двух строк</td>
    <td>и двух столбцов</td>
    </tr>
    </table>
    table.qq td {
    background: green;
    }
    table.qq tr.spec td {
    background: blue;
    color: white;
    }
    table.qq tr.spec td.r {
    background: red;
    }
    table.qq td.pic {
    background: url("web.jpg");
    }
    Цвет фона
    Рисунок

  • Отступы (CSS)border-spacingborder-spacingpaddingpadding

    1 
    2 

table...

    47 слайд

    Отступы (CSS)
    border-spacing
    border-spacing
    padding
    padding
    <table id="qq">
    <tr>
    <td> 1 </td>
    <td> 2 </td>
    </tr>
    </table>
    table#qq {
    background: blue;
    border-collapse: separate;
    border-spacing: 10px;
    padding: 10px;
    }
    #qq tr {
    background: white;
    }

  • Таблицы - определяет количество столбцов, которое ячейка данных должна охваты...

    48 слайд

    Таблицы
    <td colspan="number"> - определяет количество столбцов, которое ячейка данных должна охватывать.

    <td rowspan="number"> - определяет количество строк, которое ячейка данных должна охватывать.

  • Таблицы

    49 слайд

    Таблицы

  • Таблицы

    50 слайд

    Таблицы

  • Блоки (DIV) – любое содержимоеБлок 1
 Блок 2
 Блок 3Блок 1
 Блок 2
 Блок 3

    51 слайд

    Блоки (DIV) – любое содержимое
    <div style="background: #CCA69E;">Блок 1</div>
    <div style="background: #FF9282;"> Блок 2</div>
    <div style="background: #8ED9B6;"> Блок 3</div>
    <div style="background: #CCA69E; width: 200px;">Блок 1</div>
    <div style="background: #FF9282; width: 150px;"> Блок 2</div>
    <div style="background: #8ED9B6; width: 100px;"> Блок 3</div>

  • Блоки (DIV) – любое содержимоеБлок 1
 Блок 2
 Блок 3

    52 слайд

    Блоки (DIV) – любое содержимое
    <div style="background: #CCA69E; float: left; width: 200px;">Блок 1</div>
    <div style="background: #FF9282; float: left; width: 150px;"> Блок 2</div>
    <div style="background: #8ED9B6; float: left; width: 100px;"> Блок 3</div>

  • Спасибо за внимание!

    53 слайд

    Спасибо за внимание!

Скачать материал

Найдите материал к любому уроку, указав свой предмет (категорию), класс, учебник и тему:

5 874 399 материалов в базе

Скачать материал

Другие материалы

Вам будут интересны эти курсы:

Оставьте свой комментарий

Авторизуйтесь, чтобы задавать вопросы.

  • Скачать материал
    • 02.10.2020 231
    • PPTX 9.9 мбайт
    • Оцените материал:
  • Настоящий материал опубликован пользователем Федотова Ксения Андреевна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт

    Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.

    Пожаловаться на материал
  • Автор материала

    Федотова Ксения Андреевна
    Федотова Ксения Андреевна
    • На сайте: 4 года и 4 месяца
    • Подписчики: 4
    • Всего просмотров: 115338
    • Всего материалов: 93

Ваша скидка на курсы

40%
Скидка для нового слушателя. Войдите на сайт, чтобы применить скидку к любому курсу
Курсы со скидкой