Презентация по теме HTML (HyperText Markup Language) - Язык Разметки Гипертекста
методическая разработка

Презентация по теме HTML (HyperText Markup Language) - Язык Разметки Гипертекста

Скачать:

Предварительный просмотр:


Подписи к слайдам:

Слайд 1

HTML (HyperText Markup Language) - Язык Разметки Гипертекста

Слайд 2

Создание Web -страниц. Основные теги языка HTML. Атрибуты таблицы. Графические элементы.

Слайд 3

Структура простого HTML-документа Моя первая страничка ... прочие теги и текст ... содержание

Слайд 4

Основные теги языка TML. Тег Основной тег документа. Не содержит атрибутов. Все прочие теги строятся в области действия данного тега. Тег парный. Тег "Голова" HTML-документа. В нем располагаются теги заголовка-названия документа и различная вспомогательная информация, такая как язык документа и имя автора. Тег парный. Содержит заголовки HTML-документа. Также не содержит атрибутов. Тег Определяет название страницы. Браузер показывает его в заголовке окна при открытии страницы. Тег парный. Тег Отмечает начало и конец непосредственно содержимого веб-страницы. Тег парный. Основные атрибуты: bgcolor - цвет фона страницы background - фоновый рисунок содержание

Слайд 5

Форматирование текста Тег

Задает параграф в тексте. Тег парный. Основной атрибут: align - выравнивание текста Пример:

текст по правому краю < /p> содержание

Слайд 6

Тег

Определяет границы нумерованного списка. Тег парный. Тег
Определяет границы ненумерованного списка. Тег парный. Тег
  • Определяет элемент списка (нумерованного или ненумерованного). Тег парный. Списки содержание

    Слайд 7

    Пример:

    1. Москва
    2. Рим
    3. Париж
    Москва Рим Париж содержание

    Слайд 8

    Тег Задает шрифт для блока текста. Тег парный. Атрибуты: face - начертание(шрифт) color - цвет size - размер Пример: этот текст будет зеленого цвета содержание

    Слайд 9

    Тег Выделяет блок текста жирным шрифтом. Тег парный. Тег Выделяет блок текста курсивным шрифтом. Тег парный. Тег
    Переводит каретку на новую строку. Тег не парный содержание

    Слайд 10

    Таблицы:

    содержание

    Слайд 11

    Тег

    Описывают границы таблицы. Тег Описывают строки таблицы. Тег Описывают столбцы таблицы. В каждой строке должно быть одинаковое количество ячеек. содержание

    Слайд 12

    Основные атрибуты

    border - толщина рамки. Задается в пикселях (единицах измерения экрана). Пример: border="1" width - ширина таблицы. Может задаваться в пикселях, а может в процентах (от размера окна, в котором просматривается страница). height - высота таблицы. Как и в предыдущем случае, может задаваться в пикселях, а может в процентах. align - выравнивание информации в ячейке по горизонтали. Значения: left (по умолчанию), center , right . background - путь к фоновой картинке. Например: " /images/back.gif ". bgcolor - цвет фона. Как и цвет шрифта может содержать код цвета или его имя. содержание

    Слайд 13

    Основные атрибуты

    и
    align - выравнивание по горизонтали. valign - выравнивание вертикали. background - фоновый рисунок. bgcolor - цвет фона. colspan - количество занимаемых ячейкой колонок. rowspan - количество занимаемых ячейкой строк. height - высота ячейки. width - ширина ячейки. содержание

    Слайд 14

    Пример 1:

    Ячейка 1 Ячейка 2
    Ячейка 3 Ячейка 4
    Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 содержание

    Слайд 15

    Пример 2:

    Ячейка1
    Ячейка3 Ячейка 4
    Ячейка 1 Ячейка3 Ячейка4 содержание

    Слайд 16

    Пример 3:

    Ячейка 1 Ячейка 2
    Ячейка 4
    Ячейка 1 Ячейка 2 Ячейка 4 содержание

    Слайд 17

    Пример 4:

    Ячейка 11 Ячейка 12 Ячейка 13
    Ячейка 21 Ячейка 23
    Ячейка 31
    11 12 13 21 23 31 содержание

    Слайд 18

    Работа с изображениями В HTML-документах, помимо текста и таблиц, можно использовать графику. HTML, а точнее браузеры поддерживают три формата графических файлов: JPG , GIF , PNG . содержание

    Слайд 19

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

    Слайд 20

    GIF - предназначен для хранения картинок с ограниченной цветовой палитрой ( 256 цветов). содержание

    Слайд 21

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

    Слайд 22

    тег -вставка картинки Основные атрибуты : src - источник картинки, src="sample_image.jpg" ; width - ширина картинки, width="119" ; height - высота картинки, height="89" ; alt - подсказка для картинки, alt="кнопка" ; border - толщина рамки, border="0" . содержание

    Слайд 23

    Использование картинок в качестве фонового заполнения Для страницы, таблицы и ячейки используется один и тот же атрибут - background , который указывает местоположение картинки-фона: background="sample_image.jpg" . содержание


    По теме: методические разработки, презентации и конспекты

    Контрольная работа по теме: Язык разметки гипертекста HTML

    Добавить списки на WEB-странички, созданные на прошлом уроке:1.           Создать  одну WEB-страничку index.html, на которой должны быть ги...

    Презентация на тему "Работа с массивами в языке программирования С"

    Определение одномерных и двумерных массивов. Инициализация, примеры....

    Урок XXI века: Разработка Web-сайтов с помощью языка разметки гипертекста HTML

    Данная презентация предназначена для проведения открытого урока по теме: Разработка Web-сайтов с помощью языка разметки гипертекста HTML. В ходе урока студенты научаться вставлять рисунки и гипер...

    ЯЗЫК РАЗМЕТКИ ГИПЕРТЕКСТА HTML. РЕДАКТОРЫ ДЛЯ HTML

    Одним из самых больших достижений человечества, без преувеличения, можно назвать службу WORLD WIDE WEB...

    Презентация на тему: написание эссе на английском языке

    Написание эссе – распространенное задание, с которым сталкиваются те, кто изучает английский. Часто эссе используются в качестве домашних заданий, части тестов, и, конечно, в качестве одного из ...

    Тест на тему: "Язык разметки HTML"

    Тест предназначен для проверки знаний по основным понятиям темы: язык разметки гипертекста HTML и основным тегам языка HTML...

    ЯЗЫК РАЗМЕТКИ ГИПЕРТЕКСТА HTML. РЕДАКТОРЫ ДЛЯ HTML

    Одним из самых больших достижений человечества, без преувеличения, можно назвать службу WORLD WIDE WEB (WWW) - это Всемирная паутина, объединяющая миллионы серверов по всему миру. WWW- все сайты...