Введение в html.
Тема урока: Язык разметки гипертекстов HTML.
Цели урока:
Ø Познакомить с технологией работы браузера ( в нашем случае, Internet Explorer);
Ø Познакомить с языком разметки гипертекстов HTML;
Ø Научить создавать Web-страницу.
Тип урока: изучение нового материала.
Вид урока: повторение, лекция.
Форма организации учебно-познавательной деятельности учащихся: фронтальная, индивидуальная.
Методы обучения:
Ø словесные: рассказ, объяснение;
Ø наглядные: методы иллюстрации;
Конспект урока.
Теоретическая часть.
HTML очень популярен, он давно перестал быть просто языком разметки гипертекста. Понятие HTML включает в себя различные способы оформления Web-страниц, дизайн, гипертекстовые редакторы, браузеры и многое другое. Человек, изучивший этот язык, обретает возможным делать сложные вещи простыми способами и, главное, быстро, а это в компьютерном мире значит не так уж мало. HTML является основой в Интеренете. Все, что обсуждается на страницах интернетовских журналов в сети, связано с языком разметки гипертекста.
Документы, хранящиеся на WWW (World Wide Web), подготавливаются на специальном языке – HTML (HyperText Markup Language) – язык разметки гипертекстов. В HTML текст может быть создан и отредактирован в любом текстовом редакторе. Мы будем создавать текст в блокноте.
Для просмотра HTML страницы существуют специальные программы браузеры. Они предоставляют нам в удобном, читаемом для нас виде, текст и другие элементы HTML страницы. Браузер преобразует html-код в понятный нам текст и картинки и в зависимости от написанных в коде тегов и стилей предоставляет нам материал в каком-то конкретном виде. Браузеры бывают разные и, т.к. компании, которые создают эти программы имеют некоторые свободы, то документ (сайт) в разных браузерах будет отображаться по-разному.
Одним из браузеров – программ для просмотра документов WWW- серверов – является Internet Explorer (также как Mozilla Firefox, Opera, Google Chrome и т.д.).
После того, как с помощью языка HTML будет создан HTML- файл (документ, созданный в виде гипертекста на основе языка HTML), с помощью браузера Internet Explorer можно отобразить этот файл в виде web- документа. HTML- файл имеет расширение . HTML( или .HTM).
Рассмотрим работу с программой Internet Explorer.
Технология работы:
1. В Windows запустить приложение Internet Explorer.
2. В раскрывшемся главном окне браузера основную часть рабочей области экрана составляет web - страница.
3. Рассмотрим окно браузера
Ø поле заголовка содержит название загружаемой страницы.
Ø Строка состояния отображает ход загрузки данных или состояние работы браузера. Она располагается в нижней части главного окна.
Ø Строка адрес – содержит полный адрес загружаемого документа. URL (Uniform Recoure Location) – базовый адрес документа в сети (местонахождение документа в сети).
Ø Панель инструментов находится ниже строки основного меню и включает часть используемых команд.
Ø Посетить все страницы в обратном порядке – Назад.
Приступим к изучению языка разметки гипертекста HTML.
Язык HTML состоит из специальных разметочных указателей (флаги разметки) или теги.
Тег - инструкция браузеру, указывающая способ отображения текста. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте web-страницы теги заключаются в угловые скобки. Тег всегда начинается со знака меньше и заканчивается знаком больше. Существуют стартовые и конечные теги. Конечный тег всегда с косой чертой. Пример: стартовый - <>, конечный- </>.
Структура web-страницы.
Простейший правильный документ HTML:
 |
<HTML>
<HEAD>
<TITLE>Заголовок документа</TITLE>
</HEAD>
 |
<BODY>
Этот
текст можно прочитать на экране
</BODY>
 |
</
HTML >
Основные элементы HTML (теги).
Ø <HTML> </html>. Принцип языка – многоуровневое вложение документов. HTML является самым внешним, т.к. между его стартовыми и конечными тегами находится web- страница.
Ø <HEAD> </head>. Область заголовка web- страницы, ее первая часть. Служит только для формирования общей структуры документа.
Ø <TITLE> </title>. Определяет название страницы, которое будет выведено в строке заголовка браузера.
Ø <Style> </style>. Описание стиля некоторых элементов web- страницы.
Ø <BODY> </body>. Заключает в себе гипертекст, который определяет собственно web- страницу. Эта та часть документа, которую разрабатывает автор страницы и которая отображается браузером. Внутри BODY можно использовать все документы, предназначенные для дизайна web- страницы.
Ø <H1> </h1>. Элемент заголовка. Существует 6 уровней заголовков.
Ø <HR>. Горизонтальная линия – очень часто используемый элемент. С ее помощью очень удобно делить страницу на части. Элемент не имеет конечного тега.
Ø <BASE>. Элемент для установки базового адреса (URL) для ссылок. Это позволяет опускать их начальную часть.
Ø <P>. Тег параграфа, отделяет абзацы друг от друга, ставится в конце абзаца.
Стартовый, конечный тег и информация, заключенная в этих тегах называются контейнер.
Теперь создадим HTML-файл. (Приложение 1). Откройте Блокнот (ПУСК – Программы – Стандартные - Блокнот). Перепишите в текстовый редактор текст из Приложения 1. Желательно текст html-документа записывать в таком виде, в котором он дан в Приложении 1, так будет удобнее искать ошибки, если мы их допустим. Теперь нужно правильно сохранить нашу страницу: по умолчанию Блокнот сохраняет документ в формате txt, поэтому нам при сохранении нужно «насильственно» задать нужное расширение .html. Набираем название файла с расширением, например, list.html и нажимаем кнопку Сохранить. Теперь наш файл имеет иконку того браузера, который установлен на вашем компьютере. Запускаем сохраненный файл двойным щелчком мыши и видим, что открывается браузер, который содержит текст, находящийся в контейнерах заголовка<H1> и <H2>. Текст, заключенный в контейнер <H1> является самым крупным, <H2> - поменьше:
Обо мне
Меня зовут ФИО.
Я учусь в № классе
МОУ "Гимназия №140"
Обратите внимание, что текст Моя первая Web-страница находится в строке заголовка браузера.
Дома:
учебник А.Д.Угриновича §3.7.1, 3.7.2.
Структура языка HTML
Приложение 1.
<HTML>
<TITLE>Моя первая Web-страница</TITLE>
<BODY>
<H1>Обо мне</H1>
<H2>Меня зовут ФИО.</H2>
Я учусь в № классе<P>
МОУ «Гимназия №140»
</BODY>
</HTML>
"- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Структура языка HTML
Приложение 1.
<HTML>
<TITLE>Моя первая Web-страница</TITLE>
<BODY>
<H1>Обо мне</H1>
<H2>Меня зовут ФИО.</H2>
Я учусь в № классе<P>
МОУ «Гимназия №140»
</BODY>
</HTML>
"- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Структура языка HTML
Приложение 1.
<HTML>
<TITLE>Моя первая Web-страница</TITLE>
<BODY>
<H1>Обо мне</H1>
<H2>Меня зовут ФИО.</H2>
Я учусь в № классе<P>
МОУ «Гимназия №140»
</BODY>
</HTML>
Скачано с www.znanio.ru
Введение в html. Тема урока:
Строка состояния отображает ход загрузки данных или состояние работы браузера
P >. Тег параграфа, отделяет абзацы друг от друга, ставится в конце абзаца
Структура языка HTML Приложение 1
© ООО «Знанио»
С вами с 2009 года.
