создание web-страниц 1

advertisement
Создание Web – страниц с
помощью HTML
Урок № 1. «Основные понятия
языка HTML.
Структура Web – страницы»
План урока:
1.
2.
3.
4.
5.
Основные понятия языка
гипертекстов.
Инструментарий для создания web –
страниц.
Структура web – страницы.
Работа с программой Bluefish.
Практическое задание.
1. Основные понятия языка
гипертекстов
World Wide Web
Web – сервер
Web – сайт
Web - страница
1. Основные понятия языка
гипертекстов
HTML - «Hyper Text Markup
Language» - «язык разметки
гипертекста».
1. Основные понятия языка
гипертекстов
1. Основные понятия языка
гипертекстов
Задание. Даны теги, определить
парные и одиночные теги.
<H1> </H1>, <Br>, <Head>
</Head>
2. Инструментарий для создания
web – страниц.
1. Обычные текстовые редакторы,
например Блокнот.
2. HTML-редакторы.
3. WYSIWYG редакторы
3. Структура Web-страницы
<HTML>
</HTML>
3. Структура Web-страницы
<HTML>
<HEAD>
</HEAD>
</HTML>
3. Структура Web-страницы
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
3. Структура Web-страницы
<HTML>
<HEAD>
<TITLE>Знакомство с тэгами HTML</TITLE>
</HEAD>
<BODY>
…
</BODY>
</HTML>
Заголовки
<H1> Заголовок первого уровня </H1>
<H2> Заголовок второго уровня </H2>
<H3> Заголовок третьего уровня </H3>
<H4> Заголовок четвертого уровня </H4>
<H5> Заголовок пятого уровня </H5>
<H6> Заголовок шестого уровня </H6>
Цвет фона страницы
<BODY bgcolor=#FFFFCC>
Код
#000000
Цвет
Черный
#FFFFFF
#FF0000
#00FF00
Белый
Красный
Зеленый
Код
Цвет
#0000FF
Синий
#FFFF00
Желтый
#FF00FF
Фиолетовый
#00FFFF
Бирюзовый
4. Работа с программой Bluefish
5. Практическое задание
1. Запустите программу : Приложения –
Программирование - Bluefish.
2. Оформите страницу
3. Создайте в файле заголовки 6 уровней
с разным текстом
4. Выберете цвет для своей страницы.
5. Сохраните файл в домашней папке, в
папке 9 класс под именем index.html
6. Запустите файл под любым
браузером.
Структура Web-страницы
<HTML>
<HEAD>
<TITLE>Знакомство с тэгами HTML</TITLE>
</HEAD>
<BODY>
…
</BODY>
</HTML>
Домашнее задание
1.
2.
3.
4.
Выучить
Скачать программу Hefs
Подобрать материал для своей
странички, которую вы будете делать
дома
Оформить страницу в программе
Hefs
Download