HTML
<<  Создание WEB-страниц с помощью HTML Создание Web-страниц средствами языка гипертекста HTML  >>
Разработка Web-сайтов с использованием языка разметки гипертекста HTML
Разработка Web-сайтов с использованием языка разметки гипертекста HTML
Web-страница (документ HTML) представляет собой текстовый файл на
Web-страница (документ HTML) представляет собой текстовый файл на
Содержание:
Содержание:
Язык HTML позволяет:
Язык HTML позволяет:
Способы создания Web-страниц
Способы создания Web-страниц
Технология создания Web-страницы с использование текстового редактора
Технология создания Web-страницы с использование текстового редактора
Основные понятия языка HTML
Основные понятия языка HTML
Общая структура типичного простейшего документа HTML:
Общая структура типичного простейшего документа HTML:
Пояснения указанным тегам документа HTML
Пояснения указанным тегам документа HTML
Форматирование текста на Web-странице
Форматирование текста на Web-странице
<H1> </H1> , <H2> </H2>, <H3> </H3>, <H4> </H4> , <H5> </H5> , <H6>
<H1> </H1> , <H2> </H2>, <H3> </H3>, <H4> </H4> , <H5> </H5> , <H6>
Теги форматирования символов текста
Теги форматирования символов текста
Теги форматирования абзацев:
Теги форматирования абзацев:
На страницу можно помещать изображения, хранящиеся в графических
На страницу можно помещать изображения, хранящиеся в графических
Теги и атрибуты гиперссылки на Web - странице
Теги и атрибуты гиперссылки на Web - странице
Теги списков
Теги списков
Домашняя работа
Домашняя работа
Цель работы: Научиться создавать Web-сайты с использованием языка
Цель работы: Научиться создавать Web-сайты с использованием языка

Презентация на тему: «Разработка Web-сайтов с использованием языка разметки гипертекста HTML». Автор: Natalia. Файл: «Разработка Web-сайтов с использованием языка разметки гипертекста HTML.ppt». Размер zip-архива: 91 КБ.

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

содержание презентации «Разработка Web-сайтов с использованием языка разметки гипертекста HTML.ppt»
СлайдТекст
1 Разработка Web-сайтов с использованием языка разметки гипертекста HTML

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

2 Web-страница (документ HTML) представляет собой текстовый файл на

Web-страница (документ HTML) представляет собой текстовый файл на

языке HTML формата *.Htm или *.Html, размещенный в world wide web (WWW). Web-страница кроме текста может содержать гипертекстовые ссылки, при помощи которых можно переходить к другим web-страницам и просматривать их. Web-страница может содержать вставки в виде графики, анимации, видеоклипов и музыки.

3 Содержание:

Содержание:

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

Пример WEB - страницы

Пример WEB - страницы

Пример WEB - страницы

Пример WEB - страницы

Пример WEB - страницы

4 Язык HTML позволяет:

Язык HTML позволяет:

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

5 Способы создания Web-страниц

Способы создания Web-страниц

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

6 Технология создания Web-страницы с использование текстового редактора

Технология создания Web-страницы с использование текстового редактора

Блокнот

В редакторе Блокнот создать файл Web-страницы, сохранить с расширением *.htm.

Созданный файл загружается и просматривается программой Internet Explorer.

Для редактирования файла Web-страницы в Internet Explorer используется пункт меню Вид – Просмотр HTML- кода.

После сохранения файла и выхода из Блокнота для просмотра отредактированной страницы нажать клавишу F5 или кнопку "Обновить" в панели инструментов Internet Explorer.

7 Основные понятия языка HTML

Основные понятия языка HTML

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

8 Общая структура типичного простейшего документа HTML:

Общая структура типичного простейшего документа HTML:

<HTML> <HEAD> <TITLE> Название документа </TITLE> </HEAD> <BODY> Здесь расположен текст самого документа HTML. </BODY> </HTML>

9 Пояснения указанным тегам документа HTML

Пояснения указанным тегам документа HTML

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

10 Форматирование текста на Web-странице

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

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

11 <H1> </H1> , <H2> </H2>, <H3> </H3>, <H4> </H4> , <H5> </H5> , <H6>

<H1> </H1> , <H2> </H2>, <H3> </H3>, <H4> </H4> , <H5> </H5> , <H6>

</H6> При этом заголовки будут выведены большими буквами, причем размер букв у тега <H1> будет самый большой, у <H2> меньше, у <H3> еще меньше и т.д.

Парные теги форматирования заголовков и подзаголовков документа:

12 Теги форматирования символов текста

Теги форматирования символов текста

Атрибуты форматирования символов текста:

<B>…</B> - для полужирного шрифта <i>…</i> - для курсива <U>…</U> - для подчеркивания <s>…</s> - для перечеркивания

FONT – задает параметры форматирования текста FASE – задает гарнитуру шрифта SIZE – задает размер шрифта COLOR – задает цвет шрифта

Пример: <FONT FACE=Arial SIZE=6 COLOR=red> … </FONT>

13 Теги форматирования абзацев:

Теги форматирования абзацев:

<BR> - тег перевода строки - отделяет строку от последующего текста или графики <P>…</P> - тег абзаца - отделяет строку, но еще добавляет пустую строку, которая зрительно выделяет абзаца align - атрибут выравнивания <p align=“left”> - выравнивание текста по левому краю. <P align=“right”> - выравнивание текста в абзаце по правому краю. <P align=“center”> - выравнивание текста в абзаце по центру. <P align=“justify”> - полное выравнивание по обоим краям экрана.

14 На страницу можно помещать изображения, хранящиеся в графических

На страницу можно помещать изображения, хранящиеся в графических

файлах форматов GIF, JPG, PNG Используем тег <IMG> с атрибутом SRC <IMG SRC="lycos.gif"> - вставка графического изображения в виде файла lycos.gif, находящегося в одной папке с файлами сайта <IMG SRC=“C:\computer\lycos.gif">- вставка графического изображения в виде файла lycos.gif, находящегося в одной из папок локального диска <IMG SRC=“http://www.server.ru/lycos.gif">- вставка графического изображения в виде файла lycos.gif, находящегося на удаленном сервере Интернета Положение рисунка относительно текста изменяем с помощью атрибута ALIGN. ALIGN=“TOP” - верх ALIGN=“MIDDLE” - середина ALIGN=“BOTTOM” - низ ALIGN=“LEFT” - слева ALIGN=“RIGHT” - справа

15 Теги и атрибуты гиперссылки на Web - странице

Теги и атрибуты гиперссылки на Web - странице

<A HREF=“Адрес”>Указатель</A> тег с атрибутом для создания гиперссылки <ADDRESS>…</ADDRESS> контейнер для создания гиперссылки на адрес электронной почты Пример: <a href="excite.htm"> excite.htm </a> - гипертекстовая ссылка, переход к файлу excite.htm.

16 Теги списков

Теги списков

<OL>…</OL> - тег для вставки упорядоченного списка <UL>…</UL> тег для вставки маркированного списка. <LI> - тег элемента в списке. Конечный тег </LI> может быть опущен. <DL>…</DL> - контейнер списка определений. <DT> - тегр термина в списке определений. <DD> - тег значений термина в списке определений. Списки определений имеют вид: <DL> <DT> название термина 1 <DD> определение термина 1 <DD> другое определение термина 1 ..... </DL>

17 Домашняя работа

Домашняя работа

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

18 Цель работы: Научиться создавать Web-сайты с использованием языка

Цель работы: Научиться создавать Web-сайты с использованием языка

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

Практическая работа «Начальная страница сайта»

«Разработка Web-сайтов с использованием языка разметки гипертекста HTML»
http://900igr.net/prezentacija/informatika/razrabotka-web-sajtov-s-ispolzovaniem-jazyka-razmetki-giperteksta-html-76035.html
cсылка на страницу
Урок

Информатика

130 тем
Слайды
900igr.net > Презентации по информатике > HTML > Разработка Web-сайтов с использованием языка разметки гипертекста HTML