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

Содержание

Слайд 2

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

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

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

интерактивными и могут содержать мультимедийные и динамические объекты.
Слайд 3

Создание Web-сайтов реализуется с использованием языка разметки гипертекстовых документов 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

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

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


<А HREF="mailto:evlisenko@lgym21.ru">E-mail:
evlisenko@lgym21.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". Все элементы в группе должны иметь одинаковые значения атрибута NAME. Например, NAME="group".
      Еще одним обязательным атрибутом является VALUE, которому присвоим значения "schoolboy", "student" и "teacher". Значение атрибута VALUE должно быть уникальным для каждой «радиокнопки», так как при ее выборе именно они передаются серверу.
      Слайд 24

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

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

      NAME="group" VALUE= “schoolboy">учащийся<ВР>
      студент<ВР>
      учитель<ВP>
      Слайд 25

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

      Флажки

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

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

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

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

      VALUE="WWW"> WWW

      e-mail

      Слайд 27

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

      Поля списков

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

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

      Какой из браузеров вы предпочитаете? Google Chrome Google Chrome Yandex Opera Bridge

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



      Слайд 29

      Текстовая область Создается такая область с помощью тэга с обязательными атрибутами:

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

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

      Слайд 30

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

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

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

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

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

      Похожие презентации

      Презентация "Организация локальных сетей" - скачать презентации по Информатике
      Польза использования цифровых технологий детьми
      Роль материаловедения в графическом дизайне
      Материалы к семинару «Создание презентаций» Часть 2
      Пушкинская карта
      Работа с базой данных
      Разработка системы сбора показаний приборов учёта с помощью беспроводных систем
      Пакетная передача данных. Протоколы TCP/IP
      Алгоритмы и структуры данных
      CSS (Cascading Style Sheets)
      Презентация____
      Информация и информационные процессы. Кодирование информации
      Программное приложение СУБД MS Access
      Программирование на Java. Объектная модель Java. (Лекция 3.2)
      Основы программирования в Lazarus Гвасалия Д.А.
      Алгоритм. Свойства. Способы записи. Линейные алгоритмы
      Суждение - форма связи понятий
      Аппаратная реализация компьютера
      Обработка информации. Информатика, 5 класс
      Механизмы ввода и вывода
      Презентация по информатике Организация локальных сетей
      Жизнь без гаджетов
      Звёздная троица
      Создание веб-сайтов
      Структура центральной районной библиотеки им. Г.Н. Потанина
      Life circle of laptops
      Онлайн мастер-­класс Совершенная формула любви с Ириной Павловой
      Единицы измерения информации. Класс: 7
      Вы можете прислать нам Вашу презентацию и мы опубликуем ее на сайте.
      Обратная связь
      Для правообладателей
      Email: Нажмите что бы посмотреть