Рабочие листы
к вашим урокам
Скачать
1 слайд
Основы HTML. Разработка Web-сайта
Структура HTML-документа. Форматирование символов
Муниципальное общеобразовательное учреждение «МНОГОПРОФИЛЬНЫЙ ЛИЦЕЙ №1 Г.ДОНЕЦКА»
Мезникова Е.Л.,
учитель информатики и ИКТ
Донецк- 2020
2 слайд
Web-сайты и Web-страницы
Web-сайт состоит из Web-страниц, объединенных гиперссылками. Web-страницы могут быть интерактивными и могут содержать мультимедийные и динамические объекты.
3 слайд
Создание Web-сайтов реализуется с использованием языка разметки гипертекстовых документов HTML.
HTML - это язык разметки гипертекста.
HTML не является языком программирования, он отвечает только за расположение элементов.
4 слайд
Документ HTML создается в стандартной программе Блокнот.
Документ HTML - это текстовый файл с расширением .html или .htm, содержащий набор тегов (команд HTML).
5 слайд
Теги – это инструкции браузера, указывающие способ отражения текста
6 слайд
Все теги HTML заключаются в угловые скобки <тег>.
Типы тегов
Парные
обязательно наличие открывающего и закрывающего тегов
Например, <b>текст</b> текст будет записан жирным шрифтом
Одиночные
Например,
Переход к новой строке
ВНИМАНИЕ!!! Чем отличаются открывающийся и закрывающийся теги?
Закрывающий тэг содержит прямой слэш (/) перед обозначением.
7 слайд
HTML-документ состоит из 2-х частей:
раздела заголовка и содержательная части и
HTML-документ заключается в парный тег<HTML>.
Структура HTML-документа
8 слайд
Задание 1 Создание простейшего файла HTML
Создайте папку, куда вы будете сохранять все файлы своего сайта.
Запустите программу Блокнот (Notepad) – стандартная программа Windows
Наберите в окне программы следующий текст (можно скопировать)
<HTML>
<HEAD>
<TITLE>Учебный файл HTML</TITLE>
</HEAD>
<BODY>
Расписание занятий на вторник
</BODY>
</HTML>
4. Сохранить файл Файл/Сохранить как…, переходим к своей папке.
В поле Тип файла выбрать Все файлы.
В поле Имя файла указать инициалы_ класс.Html
9 слайд
Задание 1 Создание простейшего файла HTML
5. Для просмотра Web-страницы используйте любую программу браузера (Internet Explorer, Opera, Mozilla Firefox или другую).
Для этого, не покидая программу Блокнот (сверните окно на панель задач), откройте личную папку и двойным кликом откройте файл ФИО_класс_1.HTML - откроется окно браузера.
Обратите внимание, что записано в заголовке окна
10 слайд
Задание 2 Создание простейшего файла HTML
1. Разворачиваем файл Блокнота и вносим изменения в текст, расположив слова Расписание, занятий, на вторник на разных строках. ( см рисунок).
2. Сохраняем документ как ФИО_класс_2.Html и открываем его в браузере
Не удивляйтесь, что никаких изменений не произошло!
Для перехода к новой строке в HTML используется тег
Внесим изменения в файл, сохраняем его (Файл/сохранить) – обновляем страницу в браузере - получаем результат
11 слайд
Структурные теги (мы уже познакомились с ними– они определяют структуру программы)
Теги форматирования символов
Теги форматирования абзацев
Теги оформления списков данных
Теги форматирования списков
Категории тегов
Теги форматирования символов
Полужирный шрифт <B> текст </B>
Курсивный шрифт <I> текст </I>
Подчеркнутый шрифт <U> текст </U>
Нижний индекс <SUB> текст </SUB>
Верхний индекс <SUP> текст </SUP>
12 слайд
Задание 3 Форматирование фрагментов текста
В файле ФИО_КЛАСС_2. Html внести изменения.
<B>Расписание</B>
<I> занятий</I>
<U> на вторник</U>
<I><B>Расписание</B></I>
<I><U> занятий</U></I>
<U> на вторник</U>
2. Сохраняем документ как ФИО_класс_3.Html и открываем его в браузере
Задание 3 Форматирование символов
13 слайд
Задание 4 Оформление заголовков в тексте
Существует два способа управления размером текста, отображаемого браузером:
использование стилей заголовка,
задание размера шрифта основного документа или размера текущего шрифта.
Используется шесть тегов заголовков: от <Н1> (самый крупный) до <Н6> (самый мелкий). (тег парный, т.е. требует закрытия).
Кроме того, внутри тега можно задать тип выравнивания - атрибут ALIGN
ALIGN="right« - выравнивание по правому краю
ALIGN="center“ - по центру
ALIGN="left“– по левому краю
ALIGN=“justify“– по ширине
Например, <Н1 ALIGN="center">Расписание на неделю</Н1>
14 слайд
Задание 4 Оформление заголовков в тексте
В файле ФИО_класс_4.html составьте расписание уроков на неделю.
Расписание на неделю – заголовок H1 по центру,
название дней недели – H2, по левому краю
далее список уроков ( без применения заголовков) в столбец
Рабочие листы
к вашим урокам
Скачать
6 672 251 материал в базе
«Информатика», Босова Л.Л., Босова А.Ю.
§ 4.4. Создание web-сайта
Больше материалов по этой теме
Настоящий материал опубликован пользователем Мезникова Елена Леонтьевна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Ваша скидка на курсы
40%
Курс профессиональной переподготовки
500/1000 ч.
Курс профессиональной переподготовки
300/600 ч.
Курс профессиональной переподготовки
300/600 ч.
Курс профессиональной переподготовки
500/1000 ч.
Мини-курс
8 ч.
Мини-курс
6 ч.
Мини-курс
4 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.