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

Содержание

Слайд 2

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

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

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

Слайд 3

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

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

Слайд 4

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

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

Слайд 5

HTML-код страницы помещается внутрь контейнера
Заголовок Web-страницы заключается в контейнер
Название Web-страницы

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


<ТIТLЕ>Компьютер


Слайд 6

Основное содержание страницы помещается в контейнер


<ТIТLЕ>Компьютер


Все о компьютере


Сохранить файл под именем

Основное содержание страницы помещается в контейнер Компьютер Все о компьютере Сохранить файл
index.htm в папке сайта.

Слайд 7

Размер шрифта для имеющихся в тексте заголовков задается тэгами от <Н1> (самый

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

Слайд 8

С помощью тэга FONT и его атрибутов можно задать параметры форматирования шрифта

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

<Н1 ALIGN="center">Bce о компьютере

Заголовок целесообразно отделить от остального содержания страницы горизонтальной линией с помощью одиночного тэга

РАБОТА С ЗАГОЛОВКОМ
ЗАКОНЧЕНА!

Слайд 9

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

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

Слайд 10



Компьютер



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





Ha этом сайте вы сможете получить различную

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


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




Слайд 11

Вставка изображений

Для вставки изображения используется тэг с атрибутом SRC

Поясняющий текст

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

Слайд 12

Расположить рисунок относительно текста различными способами позволяет атрибут ALIGN тэга , который

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

Слайд 13

Гиперссылки

Первая титульная страница должна предоставлять посетителю Web-сайта возможность начать путешествие по сайту.

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

Слайд 14



<ТIТLЕ>Заголовок страницы




Создать пустые страницы «Программы», «Словарь», «Комплектующие» и «Анкета» и сохранить их

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

Слайд 15

Панель навигации

Панель навигации будет представлять собой абзац, выровненный по центру, в котором

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

Слайд 17

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


<А HREF="mailto:[email protected]">E-mail:
[email protected]

Ссылка на электронный адрес E-mail: mailbox@provaider.ru

Слайд 18

Списки

Список располагается внутри контейнера

    , а каждый элемент списка определяется тэгом

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

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

  2. Слайд 19

    Вложенный ненумерованный список располагается внутри контейнера

      , а каждый элемент списка

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

        • текстовые редакторы;
        • графические редакторы;
        • электронные таблицы;
        • системы управления базами данных.

    • Слайд 20

      Страницу «Словарь» мы представим в виде словаря компьютерных терминов.
      Для этого используем контейнер

      Страницу «Словарь» мы представим в виде словаря компьютерных терминов. Для этого используем
      списка определений . Внутри него текст оформляется в виде термина, который выделяется непарным тэгом
      , и определения, которое следует за тэгом


      Процессор
      Центральное устройство компьютера, производящее обработку информации в двоичном коде.
      Оперативная память
      Устройство, в котором хранятся программы и данные.

      Слайд 21

      Формы

      Форма заключается в контейнер


      Текстовые поля: создаются с помощью тэга

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

      Слайд 22


      Пожалуйста, введите ваше имя:

      NAME="name" SIZE=30>

      E-mail:

      NAME="e-mail" SIZE= 30

      Пожалуйста, введите ваше имя: NAME="name" SIZE=30> E-mail: NAME="e-mail" SIZE= 30 >
      >


      Слайд 23

      Переключатели
      Группа переключателей («радиокнопок») создается с помощью тэга со значением атрибута

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

      Слайд 24

      Укажите, к какой группе пользователей вы себя относите:

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

      Слайд 25

      Флажки

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

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

      Слайд 26

      Какие из сервисов Интернета вы используете наиболее часто:

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

      e-mail

      Слайд 27

      Поля списков

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

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

      Слайд 28

      Какой из браузеров вы предпочитаете?



      Слайд 29

      Текстовая область

      Создается такая область с помощью тэга

      Слайд 30

      Отправка данных из формы

      Отправка введенной в форму информации или очистка полей от

      Отправка данных из формы Отправка введенной в форму информации или очистка полей
      уже введенной информации осуществляется с помощью кнопок. Кнопки создаются с помощью тэга . Для создания кнопки, которая отправляет информацию, атрибуту TYPE необходимо присвоить значение "submit", а атрибуту VALUE, который задает надпись на кнопке, — значение "Отправить".
      Для создания кнопки, которая производит очистку фор­мы, атрибуту TYPE необходимо присвоить значение "reset", а атрибуту VALUE - значение "Очистить".

      Имя файла: Основы-HTML.-Разработка-Web-сайта.pptx
      Количество просмотров: 472
      Количество скачиваний: 2