Создание 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