Презентация по информатике "Введение в HTML"

<Презентация Слайд 1>

Здравствуйте!

Сегодня мы начинаем с Вами изучать язык HTML. Вы много раз слышали это слово, сегодня мы с вами начинаем изучение этого понятия. Мы узнаем много новых понятий, связанных с HTML – верстка, тег, разметка, научимся создавать простейшие web - страницы.

<Слайд 2>

Задачи урока

Сформировать представление о языке HTML,

Познакомиться с понятиями: тег, верстка, разметка.

Cделать пробную страницу на языке HTML

<Слайд 3>

HTML (от англ. HyperText Markup Language — язык разметки гипертекста) — стандартный язык разметки документов во Всемирной паутине. Большинство веб - страниц создаются при помощи языка HTML.

<Слайд 4>

HTML (Hyper Text Markup Language) означает язык разметки гипертекста. Этот язык был разработан Тимом Бернерсом - Ли в рамках создания проекта распределенной гипертекстовой системы, которую он назвал World Wide Web (WWW) или Всемирная паутина. HTML предназначен для написания гипертекстовых документов, публикуемых в World Wide Web.

<Слайд 5>

Что же такое верстка? Представьте процесс создания стенгазеты. У вас есть несколько разных статей, несколько картинок. Создавая газету, вы будете стараться расположить все материалы так, чтобы выглядело красиво, привлекало внимание и было удобно для чтения.

<Слайд 6>

Вёрстка — это термин первоначально появившийся в типографской среде, и определяется как процесс создания страниц путём компонования элементов, как текстовых так и графических.

На сегодняшний день под вёрсткой может подразумеваться как типографская вёрстка, так и компьютерная вёрстка страниц для создания интернет - сайтов.

<Слайд 7>

Документы HTML являются обычными текстовыми файлами, содержащими специальные теги (или управляющие элементы) разметки. Теги разметки указывают браузеру Web (программе пользователя для отображения web - страниц, например, Internet Explorer, Mozilla, Netscape или Opera), как надо вывести страницу.

Файлы HTML обычно имеют расширения htm или html. Их можно создавать при помощи любого текстового редактора.

Чаще всего используется Блокнот, потому что он не имеет собственных функций разметки текста.

Файлы HTML можно создавать и в редакторе Microsoft Word, в котором имеется возможность сохранить документ как Web - страницу (в меню "Файл"), однако использовать эту возможность не рекомендуется. Во - первых, потому что HTML - код, генерируемый MS Word не оптимален и содержит множество ненужных элементов разметки, и, во - вторых, автоматическая генерация кода не будет способствовать изучению и правильному пониманию HTML.

Имеется также большое количество специализированных редакторов для создания файлов HTML, таких как FrontPage, Macromedia Dreamweaver или Adobe Web Bundle, в которых создание веб - страниц визуализировано и упрощено при помощи кнопок и меню.

<Слайд 8>

Теги разметки указывают браузеру Web (программе пользователя для отображения web - страниц, например, Internet Explorer, Mozilla, Netscape или Opera), как надо вывести страницу. Сравните вид HTML - документа и вид того же документа, воспроизведенного браузером.

<Слайд 9>

В документе HTML можно выделить два основных блока: головная часть и тело документа. Содержимое головной части не выводится на экран пользователя, за исключением заголовка, в ней, как правило, указывают ключевые слова, авторов и другую служебную информацию, а также подключают внешние таблицы стилей и скрипты. В теле документа размещают ту информацию, которая будет выведена пользователю.

<Слайд 10>

С помощью HTML вы сможете создать свою страничку в интернете!

ВВЕДЕНИЕ В

Задачи урока

• Сформировать представление о языке HTML
• Познакомиться с понятиями: тег, верстка, разметка .
• C делать пробную страницу на языке HTML

Цели урока :

Сформировать представление о языке HTML , познакомиться с понятиями: тег, верстка, разметка . C делать пробную страницу на языке HTML

Что это?

HTML (от англ. HyperText Markup Language — язык разметки гипертекста ) — стандартный язык разметки документов во Всемирной паутине.

Hyper

Text

Markup

Language

Язык HTML был разработан британским учёным Тимом Бернерсом-Ли в конце 80-х годов 20 века в рамках создания проекта распределенной гипертекстовой системы, которую он назвал World Wide Web (WWW) или Всемирная паутина.

Вёрстка

Вёрстка — это термин первоначально появившийся в типографской среде, и определяется как процесс создания страниц путём компонования элементов, как текстовых так и графических.

На сегодняшний день под вёрсткой может подразумеваться как типографская вёрстка, так и компьютерная вёрстка страниц для создания интернет-сайтов.

Документы HTML

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

• имеют расширения htm или html .
• их можно создавать при помощи любого текстового редактора. (чаще всего используется Блокнот)

Примерный пояснительный текст к слайду: Документы HTML являются обычными текстовыми файлами , содержащими специальные теги (или управляющие элементы) разметки. Теги разметки указывают браузеру Web (программе пользователя для отображения web-страниц, например, Internet Explorer, Mozilla, Netscape или Opera), как надо вывести страницу .

Файлы HTML обычно имеют расширения htm или html . Их можно создавать при помощи любого текстового редактора.

Чаще всего используется Блокнот, потому что он не имеет собственных функций разметки текста.

Язык HTML интерпретируется браузерами и отображается в виде документа, в удобной для человека форме.

Так браузер отображает для нас

Таким браузер «видит» исходный код

head невидимая часть страницы (Заголовок, Мета-теги, Подключение стилей, Java - script ) head body видимая часть страницы, в которой расположены непосредственно элементы веб страницы: абзацы, таблицы рисунки. / body / html " width="640"

Структура HTML страницы

html

head

невидимая часть страницы (Заголовок, Мета-теги, Подключение стилей, Java - script )

head

body

видимая часть страницы, в которой расположены непосредственно элементы веб страницы: абзацы, таблицы рисунки.

/ body

/ html

Тег

Тег является контейнером, который заключает в себе все содержимое веб-страницы, включая теги и . Документ начинается тегом и заканчивается

Дополнительный текст к слайду: Открывающий и закрывающий теги в документе необязательны, но хороший стиль диктует непременное их использование.

Тег

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

Полный текст к слайду: Тег предназначен для хранения элементов, цель которых — помочь браузеру в работе с данными. Также внутри контейнера находятся метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Содержимое тега не отображается напрямую на веб-странице, за исключением тега

Тег Определяет заголовок документа. Элемент не является частью документа и не показывается напрямую на веб-странице. Допускается использовать только один тег на документ и размещать его в контейнере .

Текст к слайду: Определяет заголовок документа. Элемент не является частью документа и не показывается напрямую на веб-странице. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера. Допускается использовать только один тег на документ и размещать его в контейнере .

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

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

С помощью HTML вы сможете создать свою страничку в интернете! Сегодня вы увидите свою первую пробную страничку!

Практическое задание - Откройте в компьютере на рабочем столе файл MyFirstPage.html с помощью программы Блокнот. - Выделите в открывшемся коде все известные вам блоки - В теге замените текст. Вставьте фразу: «Это первая html -страница Имя Фамилия.» - Сохраните файл - Откройте его с помощью любого браузера

В файле предварительно указать реальный путь к файлу-картинке. Вместо ссылки указать путь, например: C:\Users\Надежда\Desktop\10 .jpg

Презентацию подготовила

Таушканова Н.Н.

учитель информатики

МОУ СОШ 2 г. Ивантеевка