Презентация на тему "Основы html"

Презентация: Основы html
Включить эффекты
1 из 54
Ваша оценка презентации
Оцените презентацию по шкале от 1 до 5 баллов
  • 1
  • 2
  • 3
  • 4
  • 5
4.8
8 оценок

Комментарии

Нет комментариев для данной презентации

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


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

Аннотация к презентации

Интересует тема "Основы html"? Лучшая powerpoint презентация на эту тему представлена здесь! Данная презентация состоит из 54 слайдов. Средняя оценка: 4.8 балла из 5. Также представлены другие презентации по информатике. Скачивайте бесплатно.

Содержание

  • Презентация: Основы html
    Слайд 1

    ОСНОВЫ HTML

  • Слайд 2

    Знакомство с языком HTML

    H -Hyper T -Text M-Markup L -Language HTML– язык гипертекстовой разметки документов.

  • Слайд 3

    Гипертекст – это электронный документ, который содержит гиперссылки на другие документы. Гипертекстовый документ предназначен для вывода информации на экран компьютера. Гипертекстовая технология – это технология, базирующаяся на использовании гипертекстовых документов. Ее применяют для организации доступа к информации в WWW, т.е. при работе с WEB-документами. WEB-документ – это текст, написанный на языке HTML или другом, который предназначен для просмотра электронной информации на экране компьютера с помощью программы-браузера.

  • Слайд 4

    Так как WEB-документ предназначен для просмотра его на компьютере, то желательно, чтобы он помещался целиком на экране. Поэтому WEB-документы называют еще WEB-страницами. Несколько WEB-страниц на одну тему называют WEB-узлом или WEB-сайтом. WEB-сайты создают WEB-дизайнеры. WEB-дизайн – это совокупность правил и рекомендаций, которыми должны руководствоваться авторы, чтобы их сайты были информативными и выглядели привлекательно.

  • Слайд 5

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

  • Слайд 6

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

  • Слайд 7

    Создание Web-сайтов реализуется

    - с использованием языка разметки гипертекстовых документов HTML. Технология HTML состоит в том, что в обычный текстовый документ вставляются управляющие символы (тэги) и в результате мы получаем Web-страницу. Браузер при загрузке Web-страницы представляет ее на экране в том виде, который задается тэгами.

  • Слайд 8

    Основными достоинствами HTML-документов являются:

    Малый информационный объем; Возможность просмотра на персональных компьютерах, оснащенных различными операционными системами.

  • Слайд 9

    Для создания Web-страниц

    используются простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования текста. В качестве такого редактора в Windows можно использовать стандартное приложение БЛОКНОТ.

  • Слайд 10

    Создание Web-страницы

    Открыть окно текстового редактора БЛОКНОТ; Набрать HTML-код страницы; Сохранить под именем index.htm (обязательно титульная страница сайта называется этим именем), установив в поле Тип файла «все файлы»;

  • Слайд 11

    Запустить браузер и открыть созданный файл командой [Файл – открыть] (или двойным щелчком левой кнопки мыши непосредственно по значку файла). В заголовке окна браузера высвечивается название Web-страницы (текст, записанный в тэге

    ) Для корректной работы сайта все объекты, используемые в нем (файлы, рисунки и т.д.), должны храниться в одной папке с файлом index.htm. Обычно для сайта создают отдельную папку.

  • Слайд 12

    Структура Web-страницы

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

  • Слайд 13

    Каждая html страница начинается тегом начала страницы

    и заканчивается тегом  её закрытия

    .  HTML страница состоит из двух частей:Невидимой части (

    ) – в ней расположены заголовоки другие объекты. Видимая часть (

    ) – в которой расположены непосредственно элементы веб страницы: абзацы, таблицы, рисунки и т.д.

  • Слайд 14

    Структура HTML документа:

    Невидимая часть

    Видимая часть

  • Слайд 15

    Структура Web-страницы

    HTML-код страницы помещается внутрь контейнера

    . Без этих тэгов браузер не в состоянии определить формат документа и правильно его интерпретировать. Заголовок Web-страницы заключается в контейнер

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

    и отображается в строке заголовка браузера при просмотре страницы. Основное содержание страницы помещается в контейнер

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

  • Слайд 16

    Любая страница должна иметь следующую структуру:

    Например:

    Все о компьютере

  • Слайд 17

    Структура Web-страницы

    Пусть файл index.htm, содержит такой HTML-код:

    Все о компьютере

    При просмотре в браузере файла, получим следующий вид

  • Слайд 18

    Во время отображения страницы в браузере разработчик не может вносить никакие изменения в существующую страницу. Для редактирования страницы её нужно открыть в приложении БЛОКНОТ, используя контекстное меню (вызывается правой кнопкой мыши)

  • Слайд 19

    Заголовки

    Размер шрифта для имеющихся в тексте заголовков задается тэгами от

    (самый крупный) до (самый мелкий). Все указанные тэги парные. Заголовок страницы целесообразно выделять самым крупным шрифтом Все о компьютере

    Заголовок желательно отделять от основного содержания страницы горизонтальной линией с помощью одиночного тэга

  • Слайд 20

    При просмотре файла в браузере окно примет следующий вид:

  • Слайд 21

    Основные теги и их описание в HTML

    Определяет документ HTML

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

    -- Определяет заголовки с 1 по 6

    Определяет параграф Вставляет единичный перенос строки

    Определяет горизонтальную линейку Определяет комментарий

  • Слайд 22

    Заголовки, атрибуты тэгов

    Задать тип выравнивания заголовка для тэга заголовка позволяет атрибут ALIGN, которому требуется придать определенное значение. ALIGN=“right” – выравнивание по правому краю ALIGN=“center” – выравнивание по центру ALIGN=“left” – выравнивание по левому краю

  • Слайд 23

    Текст кода:

    Все о компьютере
  • Слайд 24

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

    Изменить начертание шрифта позволяют следующие тэги: Жирный Курсив Подчеркнутый Жирный подчеркнутый курсив Равноширинный Выделение Усиленное выделение

  • Слайд 25

    Текст кода:

    Все о компьютере

    Жирный Курсив Подчеркнутый Жирный подчеркнутый курсив Равноширинный Выделение Усиленное выделение

  • Слайд 26

    Для выделения фрагментов текста используется тэг Этот тэг имеет следующие атрибуты: FACE – задает гарнитуру шрифта (например, FACE=“Arial”) SIZE– задает размер шрифта (например, SIZE=4) COLOR – задает цвет шрифта (например, COLOR=“blue”). Значение атрибута COLOR можно задать либо значением цвета (например, “red”, “green”, “blue” и тд.), либо шестнадцатеричным его значением, которое использует RGB-формат “#RRGGBB”.

  • Слайд 27

    Текст кода:

    Все о компьютере
  • Слайд 28

    Разделение текста на абзацы производится с помощью тэга

     

    . Например, поместим на титульную страницу текст, разбитый на абзацы с различным выравниванием:

    На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.

    Терминологический словарь познакомит вас с компьютерным терминами, а также вы сможете заполнить анкету.

  • Слайд 29

    Текст кода:

  • Слайд 30

    В браузере:

  • Слайд 31

    Изображения

    Для размещения на Web-страницах используются графические файлы форматов GIF, JPEG, PNG. Для вставки изображения используется одиночный тэг с атрибутом SRC, который указывает место хранения файла на локальном компьютере или в Интернете. Если графический файл находится на локальном компьютере в том же каталоге, что и файл Web-страницы, то в качестве значения атрибута SRC достаточно указать только имя файла: 

  • Слайд 32

    Текст кода:

    Все о компьютере

     

    На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.

    Терминологический словарь познакомит вас с компьютерным терминами, а также вы сможете заполнить анкету.

  • Слайд 33

    Изображения

    Если файл находится в другом каталоге на данном локальном компьютере, то значением атрибута должно быть полное имя файла (включая путь к файлу). Например: Если файл находится на удаленном сервере в Интернете, то должен быть указан URL-адрес этого файла. Например: 

  • Слайд 34

    Иллюстрации на Web-страницах стали неотъемлемым элементом дизайна. Однако пользователи иногда в целях экономии времени отключают в браузере загрузку графических изображений и читают только тексты. Поэтому, чтобы не терялся смысл и функциональность страницы, вместо рисунка должен выводиться поясняющий текст. Поясняющий текст выводится с помощью атрибута ALT, значением которого является текст, поясняющий, что должен был бы увидеть пользователь на рисунке:

  • Слайд 35

    Списки

    Довольно часто при размещении текста на Web-страницах удобно использовать списки в различных вариантах: Нумерованные списки, когда элементы списка идентифицируются с помощью чисел; Маркированные списки (в HTML их принято называть ненумерованными), когда элементы списка идентифицируются с помощью специальных символов (маркеров); Списки определений позволяют составлять перечни определений в так называемой словарной форме. Возможно создание и вложенных списков

  • Слайд 36

    Нумерованный список создается тэгом

    , а каждый элемент списка определяется тэгом

    • . Например:
      1. Системные программы
      2. Прикладные программы
      3. Системы программирования
  • Слайд 37

    Текст кода:

    Программное обеспечение
    1. Системные программы
    2. Прикладные программы
    3. Системы программирования
  • Слайд 38

    Ненумерованный список задается тэгом

    , а каждый элемент списка определяется также тэгом

    • . С помощью атрибута TYPEтэга
      • можно задать вид маркера списка: “disc” (диск), “square” (квадрат) или “circle” (окружность). Например:
        • текстовые редакторы;
        • графические редакторы;
        • электронные таблицы;
        • системы управления базами данных.
  • Слайд 39

    Текст кода:

    Программное обеспечение
    1. Системные программы
    2. Прикладные программы
      • текстовые редакторы;
      • графические редакторы;
      • электронные таблицы;
      • системы управления базами данных.
    3. Системы программирования
  • Слайд 40

    Список терминов создается с помощью контейнера определений

    . Внутри него текст оформляется в виде термина, который определяется непарным тэгом

    , и определения, которое следует за тэгом . Например: Процессор Центральное устройство компьютера, производящее обработку информации в двоичном коде. Оперативная память Устройство, в котором хранятся программы и данные.
  • Слайд 41

    Текст кода:

    Компьютерные термины Процессор Центральное устройство компьютера, производящее обработку информации в двоичном коде. Оперативная память Устройство, в котором хранятся программы и данные.
  • Слайд 42

    Гиперссылки

    Первая титульная страница должна предоставлять посетителю Web-сайта возможность начать путешествие по сайту. Для этого на титульную страницу должны быть помещены гиперссылки на другие страницы (создана панель навигации). Для создания гиперсвязей между титульной страницей и другими страницами сайта необходимо сначала создать заготовки Web-страниц. Такие «пустые» страницы должны иметь заголовок, а содержание пока можно пропустить. Все создаваемые страницы необходимо сохранить в виде файлов с расширением HTM в папке сайта.

  • Слайд 43

    Панель навигации будет представлять собой абзац, выровненный по центру, в котором указатели гиперссылок разделены пробелами ( ):

    [Программы]   [Соварь]   [Комплектующие]   [Анкета]

  • Слайд 44
    Все о компьютере

    На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.

    Терминологический словарь познакомит вас с компьютерным терминами, а также вы сможете заполнить анкету.

    [Программы]   [Соварь]   [Комплектующие]   [Анкета]

  • Слайд 45
  • Слайд 46

    Гиперссылки

    Для каждой гиперссылки определим адрес перехода. Для этого используется тэг гиперссылки с атрибутом HREF, значением которого является URL-адрес документа на локальном компьютере или в Интернете. Тэг должен содержать указатель гиперссылки: указатель гиперссылки В код страницы следует внести изменения (добавить контейнеры для создания гиперссылок на страницы сайта):

    [ Программы]   [ Словарь]   [ Комплетующие]   [ Анкета]

  • Слайд 47

    Панель навигации

  • Слайд 48

    Гиперссылки

    Используя различные значения атрибута HREF, получают различные реакции браузера: Ссылка на Web-страницу локального компьютера: Куранты , где clock.htm – имя Web-страницы, КУРАНТЫ – указатель ссылки Ссылка на Web-страницу, размещенную в Интернете: Cайт о Москве , где http://www.moskva.ru – URL-адрес страницы в Интернете, САЙТ О МОСКВЕ – указатель ссылки Вставка изображения: Башня , где spassk.jpg – имя файла, содержащего изображение, БАШНЯ – указатель ссылки Запуск проигрывателя звукового файла Бой часов , где strike.wav – имя звукового файла И другие.

  • Слайд 49

    В качестве указателя ссылки можно использовать не только текст, но и изображение. В этом случае указатель ссылки задается с помощью тэга Обычно на Web-страницах размещают изображения небольших размеров в целях экономии времени загрузки страницы. Предусмотреть получение крупной копии имеющегося изображения можно с помощью тэга: где width=“30” height=“75” – размеры изображения на Web-странице

  • Слайд 50

    Цветовые схемы

    Цвет на Web-странице задают либо его названием, либо числовым шестиразрядным шестнадцатеричным кодом #RRGGBB, где две первые цифры задают интенсивность красного цвета (red), средние две цифры – интенсивность зеленого (green), и последние две цифры – интенсивность синего (blue) цветов. Минимальная интенсивность цвета задается 16-ричным числом 00, а максимальная – FF. Легко догадаться, что синий цвет задает “#0000FF”. В таблице приведены значения некоторых цветов:

  • Слайд 51

    Основную цветовую схему Web-страницы можно задать в тэге

    с помощью атрибутов: Цвет фона : BGCOLOR=“#RRGGBB” Текстура фона : BACKGROUND=“file_name” Цвет текста : TEXT=“#RRGGBB” Цвет текста ссылки : LINK=“#RRGGBB” Цвет текста активной ссылки: ALINK=“#RRGGBB” Цвет текста просмотренной ссылки : VLINK=“#RRGGBB”

  • Слайд 52

    Например: Для оформления страницы о программном обеспечении можно использовать следующую цветовую схему:

    HREF

  • Слайд 53
  • Слайд 54

    Цветовые схемы

    В браузере страница будет выглядеть так: (в данном случае неудачно выбрана цветовая схема для оформления страницы)

Посмотреть все слайды

Сообщить об ошибке