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

Зайцева Маргарита Ивановна
Опубликовано 02.12.2012 - 16:31 - Зайцева Маргарита Ивановна

Презентация предназначена для получения  первоначальных сведений о создании Web-сайта и основах HTML.

Скачать:

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

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


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

Слайд 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

Основное содержание страницы помещается в контейнер < BODY > < HTML > < HEAD > <Т I Т L Е>Компьютер < BODY > Все о компьютере Сохранить файл под именем index . htm в папке сайта.

Слайд 7

Размер шрифта для имеющихся в тексте заголовков задается тэгами от <Н 1 > (самый крупный) до <Н6> (самый мелкий) <Н 1 >Все о компьютере Задать тип выравнивания заголовка для тэга заголовка позволяет атрибут ALIGN Выравнивание по правой границе окна реализуется с помощью записи ALIGN =" right ", а по центру — ALIGN =" center “ <Н 1 ALIGN =" center "> Bce о компьютере

Слайд 8

С помощью тэга FONT и его атрибутов можно задать параметры форматирования шрифта любого фрагмента текста. Атрибут FACE позволяет задать гарнитуру шрифта (например, FACE =" Arial "), атрибут SIZE — размер шрифта (например, SIZE = 4 ), атрибут COLOR — цвет шрифта (например, COLOR =" blue ") < FONT COLOR =" blue "> <Н 1 ALIGN =" center "> Bce о компьютере Заголовок целесообразно отделить от остального содержания страницы горизонтальной линией с помощью одиночного тэга < HR >

Слайд 9

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

Слайд 10

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

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

Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.

Слайд 11

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

Слайд 12

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

Слайд 13

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

Слайд 14

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

Слайд 15

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

Слайд 16

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

Слайд 17

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

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

Слайд 18

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

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

Слайд 19

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

Слайд 20

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

Слайд 21

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

Слайд 22

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

Слайд 23

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

Слайд 24

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

Слайд 25

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

Слайд 26

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

Слайд 29

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