Практическое занятие 1 Опорная презентация используемая для

Практическое занятие № 1 Опорная презентация, используемая для проведения практических занятий в 11 классе по теме: Уроки сайтостроения «Структура html-документа» Евгений Евгеньевич Кустов Учитель информатики МОУ Молчановская СОШ № 1 Томская область

Сегодня вы научитесь: n Создавать, просматривать и редактировать htmlдокумент. n Формировать структуру веб-документа. n Форматировать текст в веб-страничке. n Осуществлять выравнивание абзацев.

Что такое Интернет? n Интернет, словно город, состоит из домиков – сайтов, которые, в свою очередь, состоят из комнат – страничек.

Что такое гиперссылки? n В каждой комнате есть двери – гиперссылки, ведущие в другие комнаты.

Кто такой Web-мастер? n Все это – дело рук сайтостроителей (Web-мастеров) – мастеров Web-дизайна.

Что такое HTML? n Они используют инструмент – HTML (Hyper Text Markup Language) – язык гипертекстовой разметки.

Создание html-файла Для создания нашего сайта нам понадобится папка, в которой будут размещаться все файлы. n Создайте (Файл-Создать-Папку) папку «my_site» и откройте её. n В папке «my_site» создайте (Файл-Создать. Текстовый документ) текстовый документ и тоже его откройте. n Сохраните документ под новым именем. n Выполните (Файл-Сохранить как). n В окно Сохранение документа в списке Тип файла выберите Все файлы; В поле Имя файла впишите «index. htm» и нажмите кнопку Сохранить.

Создание html-файла Должно получиться так: Откроем наш документ с помощью Блокнота, и браузера (просмотрщика web-страниц).

Основные теги: Сейчас наша страничка открыта в двух приложениях – в браузере и в Блокноте. В Блокноте мы будем записывать текст, а браузер покажет нам как будет выглядеть наша страничка в Интернете. Итак, начали!

Основные теги: Напишем заголовок нашего сайта «Мой первый сайт» . n Для этого в Блокноте запишите следующие строки: Как видите, код веб-странички состоит из особых слов – тегов, заключенных в угловые скобки <>.

Основные теги: Каждый тег имеет свой смысл: - начало веб-документа; - начало «головной» части – в ней записывается служебная информация; - конец «головной» части и - начало и конец «тела» документа (именно здесь располагается все содержимое странички). Текст, не являющийся тегами, просто отображается на страничке.

Основные теги: n Сохраните файл (Файл-Сохранить), а затем в браузере нажмите кнопку Обновить или клавишу F 5. Как видим, ничего особенного не произошло – в броузере мы увидели тот тектст, который записан между тегами и .

Основные теги: n Перейдите в Блокнот и допишите текст (его можно взять из файла « 1. txt» , находящийся в папке с презентацией);

Основные теги: Итак, посмотрим страничку в браузере (Сохраните в Блокноте, обновите в браузере). Результат Вас вряд ли порадует: Текст документа нужно отформатировать.

Основные теги форматирования текста:

- показывает браузеру где начинается абзац.
- сообщает браузеру где начинать новую строку, не формируя абзаца. и - выделение полужирным. и - выделение курсивом. и - выделение подчеркиванием.

Основные теги форматирования текста: Сделаем наш текст на страничке немного красивее. Для этого используем теги форматирования текста.

Основные теги форматирования текста: Получим следующий результат:

Основные теги форматирования текста: Теперь для оформления заголовка текста применим один из тегов , … . Они различаются только размером шрифта.

Основные теги форматирования текста: А теперь самостоятельно подберите размер и оформите заголовок статьи «Рецепт изучения вебдизайна» , используя теги от до .

Коротко о главном: n n Веб-документ – это обычный текстовый файл с расширением htm или html, содержащий текст, специальные слова – теги, задающие оформление текста, некоторую служебную информацию; Веб-документ состоит из двух функциональных частей: головная часть, обрамленная тегами и , содержит служебную информацию, и тело документа, заключенного в теги и , содержит основную часть, отображаемую в рабочем поле браузера; Двойной клик по файлу веб-документа открывает его в специальной программе – браузере. Браузер отображает в рабочем поле текст, расположенный в теле документа (между тегами и ), оформляя его согласно тегам; Браузер позволяет только просматривать веб-документ, редактировать же его можно в любом текстовом редакторе.

Спасибо за внимание!