Разработка Web-сайтов с использованием языка разметки гипертекста HTML. - презентация

1 Разработка Web-сайтов с использованием языка разметки гипертекста HTML.

2 Web-страница (документ HTML) представляет собой текстовый файл на языке HTML формата *.htm или *.html, размещенный в World Wide Web (WWW). Web-страница кроме текста может содержать гипертекстовые ссылки, при помощи которых можно переходить к другим Web-страницам и просматривать их. Web-страница может содержать вставки в виде графики, анимации, видеоклипов и музыки.

3 Содержание: Язык HTML, структура Web-сайта Язык HTML, структура Web-сайта Форматирование текста на Web- странице Форматирование текста на Web- странице Вставка изображений в Web- страницы Вставка изображений в Web- страницы Вставка гиперссылки в Web- страницы Вставка гиперссылки в Web- страницы Списки на Web-странице Списки на Web-странице Пример WEB - страницы Пример WEB - страницы Пример WEB - страницы Пример WEB - страницы Пример WEB - страницы

4 Язык HTML позволяет : Создавать и редактировать Web-страницы, в том числе свою домашнюю Web-страницу, которую можно затем разместить в Интернете; Редактировать документы HTML, полученные из Интернета, так чтобы функционировали все внедренные в документ объекты (картинки, анимации и т.д.); Создавать мультимедийные презентации, слайд- шоу, демонстрационные проекты, благодаря гипертекстовым ссылкам и возможности вставлять в документ HTML рисунки, диаграммы, анимации, видеоклипы, музыкальное и речевое сопровождение, текстовые спецэффекты (например, бегущая строка).

5 Способы создания Web-страниц Использование текстового редактора Блокнот (NotePad), встроенного в Windows, и просмотр результатов с помощью броузера. Этот самый простой способ рекомендуется начинающим. Использование специальных редакторов документов HTML, например Hot Metal Light, Hot Dog Professional, MS Front Page, HTMLPad и др. Использование редактора Word, где создается текст документа, который затем конвертируется в HTML-формат.

6 Технология создания Web-страницы с использование текстового редактора Блокнот В редакторе Блокнот создать файл Web-страницы, сохранить с расширением *.htm. Созданный файл загружается и просматривается программой Internet Explorer. Для редактирования файла Web-страницы в Internet Explorer используется пункт меню Вид – Просмотр HTML- кода. После сохранения файла и выхода из Блокнота для просмотра отредактированной страницы нажать клавишу F5 или кнопку "Обновить" в панели инструментов Internet Explorer.

7 Основные понятия языка HTML HTML - Hyper Text Markup Language – язык гипертекстовой разметки документов. Элемент - это конструкция языка HTML, или контейнер, содержащий данные. Web-страница представляет собой набор элементов. Тег - это стартовый и конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web- страницы теги заключаются в угловые скобки, например:. Конечный тег всегда снабжается косой чертой:. Гиперссылка - фрагмент текста, который является указателем на другой файл или объект. Гиперссылки позволяют переходить от одного документа к другому. Атрибут - параметр или свойство элемента.

8 Общая структура типичного простейшего документа HTML: Название документа Здесь расположен текст самого документа HTML.

9 Пояснения указанным тегам документа HTML. …, - тег всего блока HTML-команд. … - тег заголовка Web-страницы. … - тег заголовка окна просмотра. … - тег содержания страницы Три основных тега, и передают браузеру основную информацию для идентификации и организации документа. Все указанные теги - парные, то есть каждый из них заканчивается конечным тегом с косой чертой. Все команды можно писать как с маленькой буквы, так и с большой.

10 Форматирование текста на Web-странице Теги форматирования заголовков Теги форматирования символов текста Теги форматирования абзацев - идентификатор изображения горизонтальной линии (непарный)

11 Парные теги форматирования заголовков и подзаголовков документа:,,,,, При этом заголовки будут выведены большими буквами, причем размер букв у тега будет самый большой, у меньше, у еще меньше и т.д.

12 Теги форматирования символов текста … - для полужирного шрифта … - для курсива … - для подчеркивания … - для перечеркивания Атрибуты форматирования символов текста: FONT – задает параметры форматирования текста FASE – задает гарнитуру шрифта SIZE – задает размер шрифта COLOR – задает цвет шрифта Пример: …

13 Теги форматирования абзацев: - тег перевода строки - отделяет строку от последующего текста или графики … - тег абзаца - отделяет строку, но еще добавляет пустую строку, которая зрительно выделяет абзаца align - атрибут выравнивания - выравнивание текста по левому краю. - выравнивание текста в абзаце по правому краю. - выравнивание текста в абзаце по центру. - полное выравнивание по обоим краям экрана.

14 На страницу можно помещать изображения, хранящиеся в графических файлах форматов GIF, JPG, PNG Используем тег с атрибутом SRC - вставка графического изображения в виде файла lycos.gif, находящегося в одной папке с файлами сайта - вставка графического изображения в виде файла lycos.gif, находящегося в одной из папок локального диска - вставка графического изображения в виде файла lycos.gif, находящегося на удаленном сервере Интернета Положение рисунка относительно текста изменяем с помощью атрибута ALIGN. ALIGN=TOP - верх ALIGN=MIDDLE - середина ALIGN=BOTTOM - низ ALIGN=LEFT - слева ALIGN=RIGHT - справа

15 Указатель тег с атрибутом для создания гиперссылки … контейнер для создания гиперссылки на адрес электронной почты Пример: excite.htm - гипертекстовая ссылка, переход к файлу excite.htm. Теги и атрибуты гиперссылки на Web - странице

16 Теги списков. … - тег для вставки упорядоченного списка … тег для вставки маркированного списка. - тег элемента в списке. Конечный тег может быть опущен. … - контейнер списка определений. - тигр термина в списке определений. - тег значений термина в списке определений. Списки определений имеют вид: название термина 1 определение термина 1 другое определение термина

17 Домашняя работа Создать главную страницу своего мини сайта и себе

18 Практическая работа «Начальная страница сайта» Цель работы: Научиться создавать Web-сайты с использованием языка разметки текста HTML в простейшем текстовом редакторе БЛОКНОТ. Создать начальную страницу сайта «КОМПЬЮТЕР» metod9 учебник_Угринович стр , 2 создать в своей папке папку site имя начальной страницы - index