Инфоурок Другое ПрезентацииОсновы HTML. Разработка Web-сайта

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

Скачать материал
Скачать материал "Основы HTML. Разработка Web-сайта"

Получите профессию

Бухгалтер

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Методические разработки к Вашему уроку:

Получите новую специальность за 3 месяца

Системный администратор

Описание презентации по отдельным слайдам:

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

    1 слайд

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

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

    2 слайд

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

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

    3 слайд

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

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

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

    4 слайд

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

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

    5 слайд

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

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


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



Компьютер


Все о ком...

    6 слайд

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

    <HTML>
    <HEAD>
    <ТIТLЕ>Компьютер</ТIТLЕ>
    </HEAD>
    <BODY>
    Все о компьютере
    </BODY>
    </HTML>

    Сохранить файл под именем index.htm в папке сайта.

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

    7 слайд

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

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



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

    8 слайд

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

    Заголовок целесообразно отделить от остального содержания страницы горизонтальной линией с помощью одиночного тэга <HR>
    РАБОТА С ЗАГОЛОВКОМ
    ЗАКОНЧЕНА!

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


Поместим на...

    9 слайд

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


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



  • Компьютер



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


Ha    этом   сайте    вы   сможете    получ...

    10 слайд

    <HTML>
    <HEAD>
    <TITLE>Компьютер</TITLE>
    </HEAD>
    <BODY>
    <FONT COLOR="blue">
    <H1 ALIGN="center">Bce о компьютере</H1>
    </FONT>
    <HR>
    <P ALIGN="left">Ha этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.</P>
    <P ALIGN="right">Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.</P>
    <BODY>
    </HTML>

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

    11 слайд

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

    <IMG SRC="COMP6.gif">


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

    <IMG SRC="COMP6.gif" ALT “Компьютер”>



  • Расположить рисунок относительно текста различными способами позволяет атрибу...

    12 слайд

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

    <IMG SRC="COMP6.gif" ALT="Компьютер" ALIGN="right" >

  • ГиперссылкиПервая титульная страница должна предоставлять посетителю Web-сайт...

    13 слайд

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

  • Заголовок страницы





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

    14 слайд

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

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

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

    15 слайд

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


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

    16 слайд

    <P ALIGN="center">
    [<A HREF="software.htm">Программы</A>] &nbsp
    [<A HREF="glossary.htm">Словарь</A>] &nbsp
    [<A HREF="hardware.htm">Комплектующие</A>] &nbsp
    [<A HREF="anketa.htm">Aнкетa</A>]
    </P>


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

    17 слайд

    Ссылка на электронный адрес
    <ADDRESS>
    <А HREF="mailto:mailbox@provaider.ru">E-mail:
    mailbox@provaider.ru </A>
    </ADDRESS>

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

    18 слайд

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

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

    19 слайд

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


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

    20 слайд

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

  • Формы Форма заключается в контейнер 
Текстовые поля: создаются с помощью тэга...

    21 слайд

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

  • 


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

    22 слайд



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

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

    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>
    <INPUT TYPE="checkbox“ NAME="group" VALUE="WWW"> WWW<BR>
    <INPUT TYPE="checkbox" NAME="group" VALUE= "e-mail"> e-mail <BR>
    <INPUT TYPE="checkbox“ NAME="group" VALUE="ftp” > FTP<BR>

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

    27 слайд

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


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

    Internet Explorer
Internet Explore...

    28 слайд

    Какой из браузеров вы предпочитаете? <BR>
    <SELECT NAME="browsers">
    <OPTION SELECTED> Internet Explorer
    Internet Explorer
    <OPTION>
    Netscape Navigator
    <OPTION> Opera
    <OPTION> Neo Planet
    </SELECT> <BR>

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

    29 слайд

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


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

    30 слайд

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

  • ДОМАШНЕЕ ЗАДАНИЕвыучить условные обозначения и значения  тэгов (контейнеров)

    31 слайд

    ДОМАШНЕЕ ЗАДАНИЕ
    выучить условные обозначения и значения тэгов (контейнеров)

Получите профессию

Интернет-маркетолог

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Скачать материал

Найдите материал к любому уроку, указав свой предмет (категорию), класс, учебник и тему:

6 609 727 материалов в базе

Скачать материал

Другие материалы

Вам будут интересны эти курсы:

Оставьте свой комментарий

Авторизуйтесь, чтобы задавать вопросы.

  • Скачать материал
    • 26.07.2020 150
    • PPTX 874.5 кбайт
    • Оцените материал:
  • Настоящий материал опубликован пользователем Рябцев Василий Викторович. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт

    Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.

    Удалить материал
  • Автор материала

    Рябцев Василий Викторович
    Рябцев Василий Викторович
    • На сайте: 3 года и 2 месяца
    • Подписчики: 0
    • Всего просмотров: 77453
    • Всего материалов: 224

Ваша скидка на курсы

40%
Скидка для нового слушателя. Войдите на сайт, чтобы применить скидку к любому курсу
Курсы со скидкой

Курс профессиональной переподготовки

Копирайтер

Копирайтер

500/1000 ч.

Подать заявку О курсе

Курс профессиональной переподготовки

Организация деятельности библиотекаря в профессиональном образовании

Библиотекарь

300/600 ч.

от 7900 руб. от 3950 руб.
Подать заявку О курсе
  • Сейчас обучается 279 человек из 66 регионов

Курс профессиональной переподготовки

Руководство электронной службой архивов, библиотек и информационно-библиотечных центров

Начальник отдела (заведующий отделом) архива

600 ч.

4920 руб. 2950 руб.
Подать заявку О курсе

Курс повышения квалификации

Специалист в области охраны труда

72/180 ч.

от 1750 руб. от 1050 руб.
Подать заявку О курсе

Мини-курс

Электронный архив: нормативно-правовые требования и основы оцифровки

10 ч.

1180 руб. 590 руб.
Подать заявку О курсе

Мини-курс

Дизайн-проектирование: практические и методологические аспекты

4 ч.

780 руб. 390 руб.
Подать заявку О курсе

Мини-курс

Галерейный бизнес: медиа, PR и cотрудничество

6 ч.

780 руб. 390 руб.
Подать заявку О курсе