Презентация к уроку информатики "Основы HTML"

Презентация об основах кода HTML поможет сделать ваш урок одновременно простым, но и безумно увлекательным.

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

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

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

Web-сайт состоит из Web-страниц, объединенных гиперссылками. Web-страницы могут быть интерактивными и могут содержать мультимедийные и динамические объекты.

Создание Web-сайтов реализуется с использованием языка разметки гипертекстовых документов HTML.

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

Основы HTML

HTML (Hyper Text Markup Language)

язык разметки гипертекста Web -страницы

Web -сайты и Web -страницы

Web-сайт состоит из Web -страниц, объединенных гиперссылками. Web -страницы могут быть интерактивными и могут содержать мультимедийные и динамические объекты.

Создание Web -сайтов реализуется с использованием языка разметки гипертекстовых документов HTML .

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

• Вид Web -страницы задается тэгами, которые заключаются в угловые скобки.
• Тэги могут быть одиночными или парными, для которых обязательно наличие открывающего и закрывающего тегов (такая пара тэгов называется контейнером ).
• Закрывающий тэг содержит прямой слэш (/) перед обозначением.

Программы для создания HTML – файлов:

• Редакторы ( HTML Wirtel, HTML Assistant, WebEdit, HomeSite, Блокнот и т.д.)

• Шаблоны

• Программы-преобразователи

Программы для просмотра Web - страниц

• Microsoft Internet Explorer
• Netscape Communicator
• The Bat!
• Opera и т.д.

Программы для создания HTML – файлов:

Блокнот

( для создания страницы )

Internet Explorer

(для интерпретации файлов)

• Гипертекст – это текст, содержащий специальные разметочные теги.

• Теги ( tag – ярлык, признак) – инструкции браузера, указывающие способ отображения текста.

Пример тега

Типы тегов

• Парные (влияет на текст с того места, где употреблён тег, до того места, где указан признак окончания его действия) ;
• Непарные ;

Структура HTML - документа

начинает описание HTML - файла

HTML - документ состоит из двух частей:

• Раздел заголовка
• Содержательная часть

Раздел заголовка

• Начинается тегом
• Заканчивается тегом
• M ежду данными тегами располагается тег ( этот тег используется для задания названия документа )

Раздел содержательной части

• Начинается тегом
• Заканчивается тегом

(между которыми располагается содержимое

HTML - документа)

Создать файл в Блокноте ( сохраните в файле Пример, указав расширение *. html )

Заголовок HTML – документа

Это тело HTML – документа. Здесь можно разместить всё, что угодно.

Создать файл в Блокноте ( сохраните в файле Пример, указав расширение *. html )

тег «параграф», отделяет абзац друг от друга " width="640"

Тег Р

тег «параграф», отделяет абзац

друг от друга

Примеры использования тега

:

Выравнивание по левой границе окна

Выравнивание по центру окна

Выравнивание по правой границе окна

Выравнивание по ширине окна

Тег

для разметки заголовков ( ,

,

,

,

, )

Тег

отображение горизонтальной линии

" width="640"

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

• WIDHT=20 SIZE=30 COLOR=#00FF00

Тег

позволяет изменить шрифт

Параметры тега

• FACE (задаёт название шрифта, которым

будет выводится текст)

• SIZE (задаёт размеры шрифта в условных

единицах от 1 до 7)

• COLOR (устанавливает цвет шрифта,

который может задаваться с

помощью стандартных имён или

набором шестнадцатеричных цифр)

Название шрифта SIZE=5 Шрифт размера 5 FACE=“ARIAL” SIZE=+3 COLOR=Green Шрифт размера 6 , цвет зелёный " width="640"

Примеры использования параметров тега :

• FACE=“ARIAL”

Название шрифта

• SIZE=5 Шрифт размера 5

• FACE=“ARIAL” SIZE=+3 COLOR=Green Шрифт размера 6 , цвет зелёный

Задание цвета на языке HTML

Шестнадцатеричные значения

(цветовая система базируется на трёх основных цветах – красном, зеленом и синем – обозначается RGB )

Например: #000000, #0000FF, #FF0000,

#FFFFFF

Мнемонические обозначения

( название цвета )

Например: Red, White, Blue, Green

Шрифт размера 6 , цвет зелёный или COLOR=#008000 Шрифт размера 6 , цвет зелёный " width="640"

Пример использования параметра Color :

COLOR=Green Шрифт размера 6 , цвет зелёный

или

COLOR=#008000 Шрифт размера 6 , цвет зелёный

Тег

используется для указания размера,

типа и цвета шрифта по умолчанию

Шрифт по умолчанию размера 3 SIZE=2 Шрифт размера 2 SIZE=4 COLOR=Olive Шрифт размера 4 , цвет оливковый " width="640"

Примеры использования тега :

• FACE=“Courier” COLOR=#008080

Шрифт по умолчанию размера 3

• SIZE=2 Шрифт размера 2

• SIZE=4 COLOR=Olive Шрифт размера 4 , цвет оливковый

Задание цвета фона " width="640"

Пример использования параметра Color c тегом :

BGCOLOR=#008080 Задание

цвета фона