Инфоурок Информатика ПрезентацииПрезентация по информатике : "Создание Web-страницы для начинающих "

Презентация по информатике : "Создание Web-страницы для начинающих "

Скачать материал
Скачать материал "Презентация по информатике : "Создание Web-страницы для начинающих ""

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

Технолог-калькулятор общественного питания

за 6 месяцев

Пройти курс

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

Скачать

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

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

Животновод

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

  • Создание Web-страницы для начинающих Подготовила учитель информатики: Путятин...

    1 слайд

    Создание Web-страницы для начинающих
    Подготовила учитель информатики: Путятина Татьяна Юрьевна

  • Здравствуй пользователь. Если ты желаешь создать свою web-страницу и не знаеш...

    2 слайд

    Здравствуй пользователь. Если ты желаешь создать свою web-страницу и не знаешь как это сделать, то не отчаивайся. Как всегда – выход есть.
    Этот краткий курс тебе в этом поможет.

  • Для начала немного теории:1. Существует специальный язык Web-страниц...

    3 слайд

    Для начала немного теории:
    1. Существует специальный язык Web-страниц HTML (HyperText Markup Language) – язык разметки гипертекста для публикации документов в глобальной или кооперативной сети.
    2. При создании Web-документа необходимо учесть следующие моменты:
    - все создаваемые файлы будущего проекта (сайта) должны сохраняться в одну папку (Web-страницы, видео- и звуковой файлы);
    - в имени Web-документа разрешается использовать латинские буквы, цифры. Расширение Web-документа – html или htm.
    3. Для создания электронного документа необходим любой текстовый редактор. Мы будем использовать «Блокнот».
    4. Просмотр результата созданной вами Web-страницы осуществляется в программе-браузере. Примером этой программы может послужить нам Internet Explorer или Google Chrome.


  • При создании web-документа мы будем использовать Теги.Тег – инструкция брауз...

    4 слайд

    При создании web-документа мы будем использовать Теги.
    Тег – инструкция браузеру, указывающая способ отражения текста.
    Тег всегда заключается в треугольные скобки - <…>.
    Открывается тег знаком меньше <, закрывается знаками слэш и больше />

  • … - парные теги указывающие на начала и конец web-документа.… - парные теги,...

    5 слайд

    <html>…</html> - парные теги указывающие на начала и конец web-документа.
    <head>…</head> - парные теги, описывающие заголовок документа.
    <title>…</title > - парные теги используются для размещения заголовка окна.
    <body>…</body> - парные теги внутри которых пишется содержимое web-страницы(текст, картинки, аудио и видео файлы, таблицы, гиперссылки на другие web-страницы).

  • Приступим к созданию web-документа:1. Создадим на рабочем столе новую папку...

    6 слайд

    Приступим к созданию web-документа:
    1. Создадим на рабочем столе новую папку и назовем ее «Моя веб-страница». Для этого нажмем кликнем правой кнопкой мыши по рабочему столу и в контекстном меню выберем пункт «Создать». Далее выйдет еще одно контекстное меню, выберем пункт «Папку»

  • 7 слайд

  • 2. Откроем программу «Блокнот».Для этого зайдем в меню «Пуск» &gt;&gt; «Все програ...

    8 слайд

    2. Откроем программу «Блокнот».
    Для этого зайдем в меню «Пуск» >> «Все программы» >> «Стандартные» >> «Блокнот».

  • 3. Наберем структуру HTML-документа.Для этого переключим язык с русского на...

    9 слайд

    3. Наберем структуру HTML-документа.
    Для этого переключим язык с русского на английский, по умолчанию это комбинация клавиш Alt + Shift.
    <html>
    <head>
    <title>…</title>
    </head>
    <body>


    </body>
    </html>

  • 10 слайд

  • 4. Сохраните файл в папке «Моя веб-страница», присвоив имя 1.htmlДля этого н...

    11 слайд

    4. Сохраните файл в папке «Моя веб-страница», присвоив имя 1.html
    Для этого нужно в блокноте кликнуть вкладке «Файл» >> «Сохранить как…». Появиться окно, в появившемся окне в строке «тип файла» указываем «все файлы».
    В строке «Имя файла» Пишем имя документа 1.html
    Указываем путь в ранее созданной нами папке и кликаем «сохранить».

  • 5. Зайдем в папку, вызовем контекстное меню на файле(кликнуть правой кнопкой...

    12 слайд

    5. Зайдем в папку, вызовем контекстное меню на файле(кликнуть правой кнопкой мыши по файлу) 1.html >> «Открыть с помощью» Internet Explorer или Google Chrome.
    Смотрим результат и закрываем браузер.

  • Первый урок завершен!Поздравляю!

    13 слайд

    Первый урок завершен!
    Поздравляю!

  • Урок второй. Теперь мы сделаем нашу веб-страницу более красивой.Поставим пе...

    14 слайд

    Урок второй.
    Теперь мы сделаем нашу веб-страницу более красивой.
    Поставим перед собой цель, например:
    Создать краткую биографию о себе с приложением картинок.


  • 1. Зайдем в нашу папку и откроем наш файл 1.html через «Блокнот», кликнув по...

    15 слайд

    1. Зайдем в нашу папку и откроем наш файл 1.html через «Блокнот», кликнув по файлу правой кнопкой мыши и в контекстном меню выбрать «открыть с помощью» >> «Блокнот»
    2. В строке <title> введем текст: Моя биография и вашу фамилию имя отчество.

  • Теперь переходим в оформлению страницы3. в теге  допишем bgcolor=“gray”&gt;дол...

    16 слайд

    Теперь переходим в оформлению страницы
    3. в теге <body> допишем bgcolor=“gray”>
    должно получиться вот так:
    <body bgcolor=“gray”>

    Это сделает фон нашей страницы серым.
    Можно выставить и другой цвет, для этого нужно в кавычках слово grey изменить на название другого цвета.
    Названия цветов должны писаться обязательно на английском языке либо в шестнадцатеричном коде цвета

  • Вот названия цветов:

    17 слайд

    Вот названия цветов:

  • 4. После тега  нажмем Enter и напишем Тег . Это даст нашему следующему текс...

    18 слайд

    4. После тега <body bgcolor=“gray”>
    нажмем Enter
    и напишем Тег <center>. Это даст нашему следующему тексту находиться по середине страницы.
    Жмем Enter >>

  • 5. Придадим заголовку нашей биографии более красивый внешний вид. После тега...

    19 слайд

    5. Придадим заголовку нашей биографии более красивый внешний вид.
    После тега <center>
    с новой строки напишем следующую комбинацию:
    <font size=4 color=“black” face=“Georgia”>
    Это будет внешним видом нашего заголовка.
    Size – это размер шрифта
    color – это цвет
    face – определение типа шрифта.
    Размер шрифта определяется от 1 до 7.

    Через пробел напишем тег <I> - это позволит нашему тексту отображаться курсивом.
    Далее через пробел напишем «Моя биография» и через пробел закроем предыдущие теги </I> </font>
    Жмем Enter >> пишем </center>

  • Должно получиться вот так &gt;&gt;

    20 слайд

    Должно получиться вот так >>

  • Теперь перейдем к написанию самой биографии и ее оформлению.6. Пишем тег  че...

    21 слайд

    Теперь перейдем к написанию самой биографии и ее оформлению.
    6. Пишем тег <center> через пробел пишем нужное нам оформление дальнейшего текста
    <font size=2 color="black" face="Georgia">
    Жмем Enter пишем свою биографию, минимум 3 – 4 предложения.
    После написания текста Жмем Enter и закрываем теги </font> <center>


  • Должно получиться вот так &gt;&gt;

    22 слайд

    Должно получиться вот так >>

  • Теперь посмотрим что получилось через браузер:для этого закроем блокнот сохр...

    23 слайд

    Теперь посмотрим что получилось через браузер:
    для этого закроем блокнот сохранив и откроем наш файл через браузер (клик правой кнопкой мыши по файлу >> контекстное меню >> Открыть с помощью ….

  • Если все написано и составлено верно, то наша с вами страница будет выглядеть...

    24 слайд

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

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

    25 слайд

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


  • 1. Перейдем на новую строку2. По центру напишем какие мы любим цветы и встав...

    26 слайд

    1. Перейдем на новую строку
    2. По центру напишем какие мы любим цветы и вставим картинку
    3. Далее по центру напишем какой мы любим цвет выделив эту строчку тем цветом какой мы любим.
    4. Напишем о том что мы больше всего любим в этой жизни и вставим картинку.

  • После нашей выше написанной биографии, которая замыкается тегами   жмем Ente...

    27 слайд

    После нашей выше написанной биографии, которая замыкается тегами </font> </center>
    жмем Enter
    и пишем тег
    - этот тег позволит нам перейти на новую пустую строку в веб-документе, он одиночный, поэтому не требуется в закрытии после написания и вставки информации.

  • После тега жмем Enter и пишем тег  что бы следующая информации писалась по це...

    28 слайд

    После тега жмем Enter и пишем тег <center> что бы следующая информации писалась по центру.
    Жмем Enter и пишем строчку «Я люблю такие цветы, как (свои любимые цветы)»
    Теперь займемся вставкой картинки наших любимых цветов.

  • Примечания:1. Картинки можете найти в интернете и скачать, сохранив их в наш...

    29 слайд

    Примечания:
    1. Картинки можете найти в интернете и скачать, сохранив их в нашу папку «Моя первая веб-страница» с нашим файлом.
    2. Для дальнейшего удобства, советую переименовывать картинки в более простые названия, такие как (cart1, cart2, cart3 и т.д.)
    3. при этом нужно заострить внимание на расширении картинки. Это играет очень важную роль в дальнейшем.
    Расширение картинки можно узнать, кликнув по картинке правой кнопкой мыши в контекстном меню выбрать пункт «Свойства» и в появившемся окне в строке «Тип Файла» будет написано расширение нужной вам картинки. Там будет присутствовать два расширения – полное и сокращенное. Нам нужно будет только сокращенное, оно указано в скобах маленькими буквами


  • 30 слайд

  • Вставка ссылки на картинку: 1. Нажав Enter пропишем тег 2. Нажав Enter про...

    31 слайд


    Вставка ссылки на картинку:
    1. Нажав Enter пропишем тег

    2. Нажав Enter пропишем тег
    <img src=“название картинки.jpg” width=256 height=128>
    это ссылка в веб-документе на картинку которую мы вставляем.
    Вместо «названия картинки» пишем имя картинки которая содержится уже в нашей папке.
    Width и height – это ширина и высота нашей картинки. По умолчанию это 256х128.

  • После проделанных нами операций, должно получиться следующее

    32 слайд

    После проделанных нами операций, должно получиться следующее

  • Теперь напишем строчку тем цветом какой нам нравится, например возьмем красны...

    33 слайд

    Теперь напишем строчку тем цветом какой нам нравится, например возьмем красный цвет
    1. Жмем Enter пишем тег

    и снова жмем Enter
    2. пишем тег <font> и указываем нужный нам размер шрифта, цвет, и поставим стиль шрифта “Georgia”
    Наш тег должен выглядеть следующим образом
    <font size=размер шрифта (от 1 до 7) color=ваш любимый цвет на английском языке в кавычках face=“Georgia”> Я люблю …. цвет </font>

  • Далее мы напишем о том что мы больше всего любим и вставим картинку если тако...

    34 слайд

    Далее мы напишем о том что мы больше всего любим и вставим картинку если таковую найдем в интернете.
    1. Жмем Enter пишем тег

    2. Жмем Enter пишем то, что мы больше всего любим в жизни и жмем Enter
    3. Пишем тег
    Жмем enter
    и вставляем ссылку на картинку указывая при этом ширину и высоту нашей картинки. И правильно указываем название и расширение нашей картинки.
    4. Жмем Enter и закрываем тег </center>

  • Вот что должно поулчиться:

    35 слайд

    Вот что должно поулчиться:

  • Теперь глянем что у нас получилось) Закрываем блокнот и открываем наш файл ч...

    36 слайд

    Теперь глянем что у нас получилось)
    Закрываем блокнот и открываем наш файл через браузер. Смотрим что вышло…

  • Вот то, что получилось у меня &gt;&gt;

    37 слайд

    Вот то, что получилось у меня >>

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

Методист-разработчик онлайн-курсов

за 6 месяцев

Пройти курс

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

Скачать

Краткое описание документа:

Презентация по информатике : "Создание Web-страницы для начинающих "


Для начала немного теории:
1. Существует специальный язык Web-страниц HTML (HyperText Markup Language) – язык разметки гипертекста для публикации документов в глобальной или кооперативной сети.
2. При создании Web-документа необходимо учесть следующие моменты:
- все создаваемые файлы будущего проекта (сайта) должны сохраняться в одну папку (Web-страницы, видео- и звуковой файлы);
- в имени Web-документа разрешается использовать латинские буквы, цифры. Расширение Web-документа – html или htm.
3. Для создания электронного документа необходим любой текстовый редактор. Мы будем использовать «Блокнот».
4. Просмотр результата созданной вами Web-страницы осуществляется в программе-браузере. Примером этой программы может послужить нам Internet Explorer или Google Chrome.

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

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

6 625 682 материала в базе

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

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

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

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

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

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

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

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

    Путятина Татьяна Юрьевна
    Путятина Татьяна Юрьевна
    • На сайте: 9 лет и 2 месяца
    • Подписчики: 0
    • Всего просмотров: 25574
    • Всего материалов: 13

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

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

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

Методист-разработчик онлайн-курсов

Методист-разработчик онлайн-курсов

500/1000 ч.

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

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

Методика преподавания информатики в начальных классах

72 ч. — 180 ч.

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

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

Использование компьютерных технологий в процессе обучения информатике в условиях реализации ФГОС

36 ч. — 144 ч.

от 1700 руб. от 850 руб.
Подать заявку О курсе
  • Сейчас обучается 140 человек из 44 регионов

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

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

Учитель математики и информатики

500/1000 ч.

от 8900 руб. от 4450 руб.
Подать заявку О курсе
  • Сейчас обучается 680 человек из 79 регионов

Мини-курс

Читательская грамотность у школьников

2 ч.

780 руб. 390 руб.
Подать заявку О курсе
  • Сейчас обучается 30 человек из 16 регионов

Мини-курс

Теоретические аспекты трекинга и менторства

2 ч.

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

Мини-курс

Основы профессиональной деятельности эксперта в области индивидуального консультирования

4 ч.

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