Основы HTML. Разработка Web-сайта
презентация к уроку по информатике и икт (8 класс)

Опубликовано 15.09.2024 - 0:17 - Шкут Александр Васильевич

Презентация по созданию сайта в блокноте

Скачать:

ВложениеРазмер
Office presentation icon osnovy_html.ppt242.5 КБ

Предварительный просмотр:


Подписи к слайдам:

Слайд 1

Основы HTML. Разработка Web-сайта

Слайд 2

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

Слайд 3

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

Слайд 4

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

Слайд 5

HTML -код страницы помещается внутрь контейнера < HTML >… Заголовок Web -страницы заключается в контейнер < HEAD >… Название Web -страницы содержится в контейнере < TITLE >… < HTML > < HEAD > <Т I Т L Е>Компьютер

Слайд 6

Разделение текста на абзацы производится с помощью контейнера <Р> … <Р> 1-й абзац <Р> 2-й абзац Поместим на титульную страницу текст, разбитый на абзацы с различным выравниванием:

Слайд 7

Компьютер Bce о компьютере

Текст1.

Текст2.

< / BODY>

Слайд 8

Вставка изображений Для вставки изображения используется тэг < IMG > с атрибутом SRC Поясняющий текст выводится с помощью атрибута ALT , значением которого является текст, поясняющий, что должен был бы увидеть пользователь на рисунке:

Слайд 9

Расположить рисунок относительно текста различными способами позволяет атрибут ALIGN тэга < IMG >, который может принимать пять различных значений: ТОР (верх), MIDDLE (середина), BOTTOM (низ), LEFT (слева) RIGHT (справа).

Слайд 10

Задний фон Картинка: Цвет текста и заднего фона:

Слайд 11

Гиперссылки Первая титульная страница должна предоставлять посетителю Web -сайта возможность начать путешествие по сайту. Для этого на титульную страницу должны быть помещены гиперссылки на другие страницы сайта.

Слайд 12

< HTML > < HEAD > <Т I Т L Е> Заголовок страницы < BODY > Создать пустые страницы «Программы», «Словарь», «Комплектующие» и «Анкета» и сохранить их в файлах с именами software . htm , glossary . htm , hardware . htm и anketa . htm в каталоге сайта.

Слайд 13

Панель навигации Панель навигации будет представлять собой абзац, выровненный по центру, в котором указатели гиперссылок разделены пробелами (   ): <Р ALIGN =" center "> [Программы ]   [Словарь]   [Комплектующие]   [Анкета]

Слайд 14

[ Программы]   [ Словарь]   [ Комплектующие]   [A нкет a]

Слайд 15

Ссылка на электронный адрес

< А HREF=" mailto:mailbox@provaider.ru">E-mail : mailbox@provaider.ru

Слайд 16

Списки Список располагается внутри контейнера < OL > , а каждый элемент списка определяется тэгом < LI >. С помощью атрибута TYPE тэга < OL > можно задать тип нумерации: арабские цифры (по умолчанию), " I " (римские цифры), "а" (строчные буквы) и т.д. Программное обеспечение

  1. Системные программы
  2. Прикладные программы
  3. Системы программирования

Слайд 17

Вложенный ненумерованный список располагается внутри контейнера < UL >, а каждый элемент списка определяется также тэгом < LI >. С помощью атрибута TYPE тэга < UL > можно задать вид маркера списка: " disc " (диск), " square " (квадрат) или " circle " (окружность). Для прикладных программ: < UL > < LI TYPE =" square "> текстовые редакторы; < LI TYPE =" square "> графические редакторы; < LI TYPE =" square "> электронные таблицы; < LI TYPE =" square "> системы управления базами данных.

Слайд 18

Страницу «Словарь» мы представим в виде словаря компьютерных терминов. Для этого используем контейнер списка определений . Внутри него текст оформляется в виде термина, который выделяется непарным тэгом < DT >, и определения, которое следует за тэгом < DD > < DL > < DT > Процессор < DD > Центральное устройство компьютера, производящее обработку информации в двоичном коде. < D Т> Оперативная память < DD > Устройство, в котором хранятся программы и данные.

Слайд 19

Формы Форма заключается в контейнер < FORM > Текстовые поля: создаются с помощью тэга < INPUT > со значением атрибута TYPE =" text ". Атрибут NAME является обязательным и служит для идентификации полученной информации. Значением атрибута SIZE является число, задающее длину поля ввода в символах. Для того чтобы анкета «читалась», необходимо разделить строки с помощью тэга перевода строки < BR >.

Слайд 20

< FORM > Пожалуйста, введите ваше имя: < BR >
E-mail:

Слайд 21

Переключател и Группа переключателей («радиокнопок») создается с помощью тэга < INPUT > со значением атрибута TYPE =" radio ". Все элементы в группе должны иметь одинаковые значения атрибута NAME . Например, NAME =" group ". Еще одним обязательным атрибутом является VALUE , которому присвоим значения " schoolboy ", " student " и " teacher ". Значение атрибута VALUE должно быть уникальным для каждой «радиокнопки», так как при ее выборе именно они передаются серверу.

Слайд 22

Укажите, к какой группе пользователей вы себя относите: < BR > < INPUT TYPE =" radio " NAME =" group " VALUE = “ schoolboy ">учащийся<ВР> < INPUT TYPE =" radio " NAME =" group " VALUE = " student ">студент<ВР> < INPUT TYPE =" radio " NAME =" group " VALUE = " teacher ">учитель<В P >

Слайд 23

Флажки Если из предложенного перечня он нужно выбрать одновременно несколько вариантов, то их помечают флажками. Флажки создаются в тэге < INPUT > значением атрибута TYPE =" checkbox ". Флажки, объединенные в группу, могут иметь одинаковые значения атрибута NAME . Например, NAME =" group ". Еще одним обязательным атрибутом является VALUE , которому присвоим, например, значения " www ", " e - mail " и " ftp ".

Слайд 24

Какие из сервисов Интернета вы используете наиболее часто: < BR > WWW
e-mail

Слайд 27

Текстовая область Создается такая область с помощью тэга < TEXTAREA > с обязательными атрибутами: NAME , задающим имя области, ROWS , определяющим число строк, и COLS — число столбцов области. Какую еще информацию вы хотели бы видеть на нашем сайте? < BR >