Уроки Сайтостроения
реклама
Практическое занятие №1 Опорная презентация, используемая для проведения практических занятий в 11 классе по теме: Уроки сайтостроения «Структура html-документа» Евгений Евгеньевич Кустов Учитель информатики МОУ Молчановская СОШ №1 Томская область Сегодня вы научитесь: Создавать, просматривать и редактировать htmlдокумент. Формировать структуру веб-документа. Форматировать текст в веб-страничке. Осуществлять выравнивание абзацев. Что такое Интернет? Интернет, словно город, состоит из домиков – сайтов, которые, в свою очередь, состоят из комнат – страничек. Что такое гиперссылки? В каждой комнате есть двери – гиперссылки, ведущие в другие комнаты. Кто такой Web-мастер? Все это – дело рук сайтостроителей (Web-мастеров) – мастеров Web-дизайна. Что такое HTML? Они используют инструмент – HTML (Hyper Text Markup Language) – язык гипертекстовой разметки. Создание html-файла Для создания нашего сайта нам понадобится папка, в которой будут размещаться все файлы. Создайте (Файл-Создать-Папку) папку «my_site» и откройте её. В папке «my_site» создайте (Файл-СоздатьТекстовый документ) текстовый документ и тоже его откройте. Сохраните документ под новым именем. Выполните (Файл-Сохранить как). В окно Сохранение документа в списке Тип файла выберите Все файлы; В поле Имя файла впишите «index.htm» и нажмите кнопку Сохранить. Создание html-файла Должно получиться так: Откроем наш документ с помощью Блокнота, и браузера (просмотрщика web-страниц). Основные теги: Сейчас наша страничка открыта в двух приложениях – в браузере и в Блокноте. В Блокноте мы будем записывать текст, а браузер покажет нам как будет выглядеть наша страничка в Интернете. Итак, начали! Основные теги: Напишем заголовок нашего сайта «Мой первый сайт». Для этого в Блокноте запишите следующие строки: Как видите, код веб-странички состоит из особых слов – тегов, заключенных в угловые скобки <>. Основные теги: Каждый тег имеет свой смысл: <HTML> - начало веб-документа; <HEAD> - начало «головной» части – в ней записывается служебная информация; </HEAD> - конец «головной» части <BODY> и </BODY> - начало и конец «тела» документа (именно здесь располагается все содержимое странички). Текст, не являющийся тегами, просто отображается на страничке. Основные теги: Сохраните файл (Файл-Сохранить), а затем в браузере нажмите кнопку Обновить или клавишу F5. Как видим, ничего особенного не произошло – в броузере мы увидели тот тектст, который записан между тегами <BODY> и </BODY>. Основные теги: Перейдите в Блокнот и допишите текст (его можно взять из файла «1.txt», находящийся в папке с презентацией); Основные теги: Итак, посмотрим страничку в браузере (Сохраните в Блокноте, обновите в браузере). Результат Вас вряд ли порадует: Текст документа нужно отформатировать. Основные теги форматирования текста: <P> - показывает браузеру где начинается абзац. <BR> - сообщает браузеру где начинать новую строку, не формируя абзаца. <B> и </B> - выделение полужирным. <i> и </i> - выделение курсивом. <U> и </U> - выделение подчеркиванием. Основные теги форматирования текста: Сделаем наш текст на страничке немного красивее. Для этого используем теги форматирования текста. Основные теги форматирования текста: Получим следующий результат: Основные теги форматирования текста: Теперь для оформления заголовка текста применим один из тегов <H1>, <H2>… <H6>. Они различаются только размером шрифта. Основные теги форматирования текста: А теперь самостоятельно подберите размер и оформите заголовок статьи «Рецепт изучения вебдизайна», используя теги от <H1> до <H6>. Коротко о главном: Веб-документ – это обычный текстовый файл с расширением htm или html, содержащий текст, специальные слова – теги, задающие оформление текста, некоторую служебную информацию; Веб-документ состоит из двух функциональных частей: головная часть, обрамленная тегами <HEAD> и </HEAD>, содержит служебную информацию, и тело документа, заключенного в теги <BODY> и </BODY>, содержит основную часть, отображаемую в рабочем поле браузера; Двойной клик по файлу веб-документа открывает его в специальной программе – браузере. Браузер отображает в рабочем поле текст, расположенный в теле документа (между тегами <BODY> и </BODY>), оформляя его согласно тегам; Браузер позволяет только просматривать веб-документ, редактировать же его можно в любом текстовом редакторе. Спасибо за внимание!
