Что такое findslide.org?

FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.


Для правообладателей

Обратная связь

Email: Нажмите что бы посмотреть 

Яндекс.Метрика

Презентация на тему Создание html-документов

Содержание

/18Основные понятияHTML-документ- это текстовый файл с расширением .html или .htm, в котором текст размечен HTML-тегамиHTML, Hyper Text Markup Language - язык разметки гипертекстаЭлементы разметки состоят из заключённых в угловые скобки (< название тега >) дескрипторов
Создание html-документов /18Основные понятияHTML-документ- это текстовый файл с расширением .html или .htm, в котором /18Создание и просмотр html-документаHTML-документ можно создать двумя способами: - используя обычный текстовой /18ТегТеги можно разделить на две основные категории:структурные теги, описывающие свойства документа;форматирующие теги, /18Структура html-документаПервым тегом в документе должен быть тег , а последним Сразу /18Разметка пустого html-документа 	 		 Заглавие страницы /18Атрибуты тега Внешний вид (цвет текста, цвет ссылок и др.) HTML-докумета зависит /18Теги для структурного форматирования 1/2 - шесть уровней заголовков 	Атрибут: align - /18Теги для структурного форматирования 2/2 - абзац	Атрибут: align - тип выравнивания (left, /18Организация в списки 4/1 - для задания нумерованных списков. 	Атрибуты: type (1, /18Организация в списки 4/2 - для задания ненумерованых списков. Включает в себя /18Организация в списки 4/3 - для задания словарей, глоссариев и прочих перечней. /18Организация в списки 4/4 - для создания списков по логическому определению, такие /18Форматирование символовПри форматирования символов должен быть закрывающий тег. для задания размера и /18Вставка графических изображений - используется для вставки в тело документа графического изображения. /18ГиперссылкиДля определения гипертекста нужно указать какая часть текста используется в качестве гиперссылки /18Ссылка внутри документаHTML предоставляет возможность создавать ссылки на различные участки или разделы /18ЗаданиеСоздать HTML-документ, включающий:Несколько абзацев текстаИзображениеНумерованный списокНенумерованный списокГиперссылку на внешний ресурсСсылку внутри документа
Слайды презентации

Слайд 2 /18
Основные понятия

HTML-документ- это текстовый файл с расширением .html

/18Основные понятияHTML-документ- это текстовый файл с расширением .html или .htm, в

или .htm, в котором текст размечен HTML-тегами

HTML, Hyper Text

Markup Language - язык разметки гипертекста

Элементы разметки состоят из заключённых в угловые скобки (< название тега >) дескрипторов - тэгов(tags) и их атрибутов


Слайд 3 /18
Создание и просмотр html-документа

HTML-документ можно создать двумя способами: -

/18Создание и просмотр html-документаHTML-документ можно создать двумя способами: - используя обычный

используя обычный текстовой редактор; - используя специализированный HTML редактор или

конвертер

Документы, написанные на HTML, просматриваются специальными программами - Web-браузерами, которые форматируют набор тегов из текстового файла в привычные документы Web

Слайд 4 /18
Тег
Теги можно разделить на две основные категории:
структурные теги,

/18ТегТеги можно разделить на две основные категории:структурные теги, описывающие свойства документа;форматирующие

описывающие свойства документа;
форматирующие теги, определяющие вид документа в браузере

Все

теги заключаются в угловые скобки < >.
Тэги бывают одиночные и двойные. Одиночные - просто говорят компьютеру что-то сделать, например, тэг
говорит перевести строку; а двойные - говорят, что надо что-то сделать с текстом, содержащимся между открывающим и закрывающим тэгом.
Закрывающий тэг отличается от открывающего наличием символа / (слэша) , например
и


Совокупность открывающего (< >) и закрывающего (< />) тегов - называется контейнер

Слайд 5 /18
Структура html-документа
Первым тегом в документе должен быть тег

/18Структура html-документаПервым тегом в документе должен быть тег , а последним

, а последним
Сразу после тега должна идти

заголовочная часть документа, которая заключена между тегами < HEAD >. Между этими тегами помещаются разнообразные сведения, однако наиболее важным элементом является название документа, которое появляется в строке заголовка окна браузера
Чтобы дать название HTML-документу, поместите текст между парой в заголовочной части.
Третьей главной частью документа является его тело. Оно следует сразу за заголовком и находится между тегами . Первый из них должен стоять сразу после тега , а второй - перед тегом


Слайд 6 /18
Разметка пустого html-документа


Заглавие страницы

/18Разметка пустого html-документа 	 		 Заглавие страницы









Слайд 7 /18
Атрибуты тега
Внешний вид (цвет текста, цвет ссылок

/18Атрибуты тега Внешний вид (цвет текста, цвет ссылок и др.) HTML-докумета

и др.) HTML-докумета зависит от атрибутов тега
TEXT. Этот

атрибут определяет цвет текста документа. По умолчанию берется черный
BGCOLOR. Этот атрибут задаёт цвет фона документа. Взятый по умолчанию цвет зависит от браузера
BACKGROUND. В качестве фона документа можно использовать изображение. Для этого необходимо использовать этот атрибут со значением image.gif или image.jpg, где image - это имя файла изображения с указанием пути к нему
LINK. Определяет цвет непосещенных гиперссылок
VLINK. Определяет цвет посещенных гиперссылок
ALINK. Определяет цвет активных гиперссылок


Слайд 8 /18
Теги для структурного форматирования 1/2
- шесть уровней

/18Теги для структурного форматирования 1/2 - шесть уровней заголовков 	Атрибут: align

заголовков
Атрибут:
align - тип выравнивания (left, center и

right)
Пример. Текст заголовка


- разделительные линии
Атрибуты :
color - цвет линии;
height - высота в пикселах;
width - ширина в пикселях или процентах от ширины экрана;
align - тип выравнивания.
Пример.



Слайд 9 /18
Теги для структурного форматирования 2/2
- абзац
Атрибут:
align

/18Теги для структурного форматирования 2/2 - абзац	Атрибут: align - тип выравнивания

- тип выравнивания (left, center и right)
Пример.

Текст абзаца




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

- комментарии к исходному коду

- выравнивание по центру
Пример.
текст


Слайд 10 /18
Организация в списки 4/1
- для задания нумерованных

/18Организация в списки 4/1 - для задания нумерованных списков. 	Атрибуты: type

списков.
Атрибуты:
type (1, A, a, I или i)

для задания вида нумерации;
start для указания, с какого индекса начинается нумерация списка.
Элемент
    включает в себя дополнительный элемент
  1. , который задает элементы списка.
    Пример.
    1. элемент списка
    2. элемент списка




Слайд 11 /18
Организация в списки 4/2
- для задания

/18Организация в списки 4/2 - для задания ненумерованых списков. Включает в

ненумерованых списков. Включает в себя дополнительный элемент , который

задает элементы списка
Атрибут:
type (circle, square, или disc) для задания вида маркера.

Пример.
  • элемент списка
  • элемент списка



Слайд 12 /18
Организация в списки 4/3
- для задания словарей,

/18Организация в списки 4/3 - для задания словарей, глоссариев и прочих

глоссариев и прочих перечней. Включает в себя дополнительные элементы

и
, которые обозначают соответственно термин и определение

Пример.
термин 1
определение 1
термин 2
определение 2


Слайд 13 /18
Организация в списки 4/4
- для создания списков

/18Организация в списки 4/4 - для создания списков по логическому определению,

по логическому определению, такие списки могут связываться с другими

элементами документа логически

Пример.
  • элемент списка
  • элемент списка



  • Слайд 14 /18
    Форматирование символов
    При форматирования символов должен быть закрывающий тег.

    /18Форматирование символовПри форматирования символов должен быть закрывающий тег. для задания размера

    для задания размера и цвета текста.
    Атрибуты:
    size – задается

    размер
    сolor – задается цвет
    Пример. Текст

    - для выделения слова, обозначающего аббревиатуру, например HTML , WWW, MTV


    Слайд 15 /18
    Вставка графических изображений

    - используется для вставки

    /18Вставка графических изображений - используется для вставки в тело документа графического

    в тело документа графического изображения.
    Атрибуты:
    src – указывается URL

    файла графики;
    alt – альтернативный текст
    align (top, bottom, middle, right, left)- задается расположение рисунка в окне и его выравнивание. Например, при задании align=middle, строка, в которую вставлена картинка, будет выровнена по центру.
    width - задается ширина области в пикселях, отводимой в окне под изображение. В этом случае рисунок автоматически масштабируется браузером под заданный размер.
    height - задается высота области в пикселях, отводимой в окне под изображение.

    Слайд 16 /18
    Гиперссылки
    Для определения гипертекста нужно указать какая часть текста

    /18ГиперссылкиДля определения гипертекста нужно указать какая часть текста используется в качестве

    используется в качестве гиперссылки и адрес документа, загружаемого после

    активизации гипертекста. Для этого используют пару тегов и .
    Адрес документа в Web представляется в формате URL (Uniform Resource Locator - "Универсальный идентификатор документа")
    Общий формат установки ссылки в HTML:
    Гипер Текст



    Пример:
    Поиск в интернет


    Слайд 17 /18
    Ссылка внутри документа
    HTML предоставляет возможность создавать ссылки на

    /18Ссылка внутри документаHTML предоставляет возможность создавать ссылки на различные участки или

    различные участки или разделы одного и того же документа,

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

    Создайте маркер раздела
    Текст-в-первой-строке-броузера
    Создайте ссылку на данный маркер
    Текст




    • Имя файла: sozdanie-html-dokumentov.pptx
    • Количество просмотров: 127
    • Количество скачиваний: 0