Презентация на сайте html

Основы языка HTML или с чего я начинала создавать WEB-страницу. — презентация

Презентация была опубликована 6 лет назад пользователемОлег Финажин

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

Презентация на тему: » Основы языка HTML или с чего я начинала создавать WEB-страницу.» — Транскрипт:

1 Основы языка HTML или с чего я начинала создавать WEB-страницу.

2 Что такое HTML? HTML (от англ. HyperText Markup Language «язык разметки гипертекста») стандартный язык разметки документов во Всемирной паутине. По данным материала Википедии

3 Из истории развития HTML… Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в годах в стенах Европейского Центра ядерных исследований в Женеве (Швейцария). HTML создавался как язык для обмена научной и технической документацией.

4 Основные понятия: Тег, иногда тэг, (от англ. Tag) элемент языка разметки гипертекста. Инструкция браузеру, указывающая способ отображения текста. Более правильное название дескриптор.

5 Любой документ на языке HTML представляет собой набор элементов причем начало и конец каждого элемента обозначается специальными пометками тегами. ТЕГИ Одиночные (или непарные), то есть не содержащими никакого текста и других данных (например, тег перевода строки ) Парные, то есть нужно указать как открывающий тег (например, ), так и закрывающий тег (например, )

6 Основные понятия: Браузер – программа, которая служит для просмотра текстовых документов, содержащих разметку на языке HTML Google ChromeMozilla Firefox Opera Internet Explorer

7 C чего начать создавать web-страницу? Шаг 1. Создать папку со своим именем на компьютере.

8 C чего начать создавать web-страницу? Шаг 2. В папке создать текстовый редактор блокнот.

9 C чего начать создавать web-страницу? Шаг 3. Открыть окно текстового редактора БЛОКНОТ. Нажать на вкладку файл- сохранить как…

10 C чего начать создавать web-страницу? Шаг 4. Указать имя файла например, index.htm. Установив в поле Тип файла «все файлы». После чего нажать сохранить

11 C чего начать создавать web-страницу? Шаг 5. Сохраненный документ отразиться в папке в форме значка браузера. Текстовый документ советую вам удалить

12 C чего начать создавать web-страницу? Шаг 6. Для того, чтобы начать работать над web-страницей необходимо сохраненный документ открыть с помощью… блокнота

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

14 Основные теги HTML. Начало и конец страницы Описание страницы Имя окна заголовка Содержание страницы Переход на новую строку Укрупнение текста

15 Структура web-страницы. Пусть файл index.htm, содержит такой HTML-код: Научное общество Школьное научное общество учащихся «Альфа» При просмотре в браузере файл будет иметь следующий вид

16 Заголовки, атрибуты тэгов Заголовок по умолчанию всегда выровнен по левому краю страницы. Однако страница красиво смотрится, если заголовок размещен по центру. Задать тип выравнивания заголовка для тэга заголовка позволяет атрибут ALIGN, которому требуется придать определенное значение. ALIGN=right выравнивание по правому краю ALIGN=center выравнивание по центру ALIGN=left выравнивание по левому краю

17 Задать правильно отцентровку вам помогут парный тег (или контейнер) …. С их помощью можно выделить не только заголовок, но и целый абзац. При этом для каждого абзаца можно задать определенный тип выравнивания. Заголовки, атрибуты тэгов

18 Внесем изменения в наш текстовый документ: Научное общество Школьное научное общество учащихся «Альфа» При просмотре в браузере файл будет иметь следующий вид

19 Форматирование текста Изменить начертание шрифта позволяют следующие тэги: … Жирный … Курсив … Подчеркнутый … Жирный подчеркнутый курсив … Равноширинный … Выделение … Усиленное выделение

20 Дополним текстовый документ: Научное общество Школьное научное общество учащихся «Альфа»

21 Форматирование текста . Значение атрибута COLOR можно задать — либо значением цвета (например, red, green, blue и т. д.), — либо шестнадцатеричным его значением (найти таблицу цветов можно в интернете, например синий цвет задает #0000FF) Задает размер текущего шрифта FACEЗадает гарнитуру шрифта (например, FACE=Arial) SIZEзадает размер шрифта (например, SIZE=4) COLORзадает цвет шрифта (например, COLOR=blue)

Как вставить HTML5-презентацию на сайт или в блог?

Главное преимущество презентаций в формате HTML5 заключается в том, что они могут быть просмотрены на компьютерах и на мобильных устройствах (iPad, iPhone, Android-смартфонах и планшетах). Но для того, чтобы их кто-то мог посмотреть, презентации должны быть загружены в веб и вставлены на сайт или в блог.

Размещение PowerPoint-презентации на сайте происходит в 3 простых шага:

1. Публикация презентации в формат HTML5
2. Загрузка презентации на сервер по FTP и получение http-ссылки
3. Вставка презентации на страницу

1. Публикация презентации в формат HTML5 и загрузка на сайт

Вы можете опубликовать презентацию в формат HTML5 с помощью программ iSpring Suite и iSpring Pro. Рассмотрим на примере iSpring Suite. На панели инструментов PowerPoint выберите вкладку iSpring Suite и кликните кнопку «Публикация».

Выберите вкладку Web, введите название презентации, укажите папку публикации и нажмите кнопку Опубликовать.

2. Загрузка на FTP и получение ссылки

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

Для этого нажмите Загрузить на FTP.

В открывшемся окне введите данные FTP-аккаунта. Презентация сразу же будет загружена на ваш сервер.

Подробнее о настройке аккаунтов FTP читайте в документации.

Затем вам нужно получить HTTP-адрес загруженной презентации. URL презентации будет зависеть от настроек сервера.

Пожалуйста, удостоверьтесь, что адрес начинается с «http://», а не с «ftp://».

3. Вставка на страницу

Презентацию можно вставить на страницу несколькими способами:

• открытие в отдельном окне;
• открытие во всплывающем окне;
• воспроизведение в iframe.

а) Воспроизведение в отдельном окне

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

Вы можете выбрать, в каком окне браузера открывать ссылку — в том же (target=”_self”) или в новом (target=”_blank”).

б) Открытие HTML5-презентации во всплывающем окне

Если вы хотите открыть презентацию во всплывающем окне, удостоверьтесь, что редактор страниц на вашем сайте поддерживает вставку JavaScript-кода.

Используйте следующий код для создания всплывающего окна:

Вы можете включить/отключить некоторые элементы окна, в котором открывается презентация. Справку на английском можно посмотреть на сайте w3schools.com.

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

Пользуйтесь этим вариантом с осторожностью: большинство браузеров блокируют всплывающие окна.

в) Вставка презентации в iframe

HTML-тэг IFRAME позволяет показывать содержимое одной страницы внутри другой.

Для вставки презентации воспользуйтесь следующим кодом:

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

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

Скачать:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Расположить рисунок относительно текста различными способами позволяет атрибут ALIGN тэга , который может принимать пять различных значений: ТОР (верх), M />

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

По теме: методические разработки, презентации и конспекты

Урок с использованием модульной технологии.На мой взгляд, использование модульной технологии позволяет: • повысить мотивацию учащихся в освоении не только знаний, но и ключевых компетенций; • строит.

Этот урок является заключительном в курсе “Разработка Web-сайтов с использованием языка НТМL” . Он проведится его в форме конкурса. Урок стоит из .

Открытый урок по информатике на тему «Разработка Web-сайтов с использованием языка разметки гипертекста HTML» Цели урока: Повторение основных принципов построения сайтов, структуры HTML-документа.

Презентация для 8 класса «Разработка Web-сайтов с использованием языка разметки гипертекста HTML».

Ресурс рассказывает об основах языка разметки гипертекса, о структуре web страницы и о том, как можно просто и легко организовать простой сайт из набора страниц, связав его гиперссылками.

Материал предназначен для учителей и учащихся. Предмет: информатика.

На изучение этой темы в учебном плане отводится четыре учебных часа (три теоретических урока и один урок — практическая работа). Данный план-конспект является первым из трёх теоретических уроков по да.

Админу.Ру

Библиотека вебмастера по созданию и продвижению сайта

Как разместить на сайте презентацию PowerPoint?

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

Размещение на сайте презентации Microsoft PowerPoint

Компания Microsoft не предоставляет открытого компонента для интеграции презентаций PowerPoint на конечные сайты пользователей. В пакет MS Office входит инструментарий для интеграции на сервер MS IIS с возможностью обработки презентаций PowerPoint. Но, подавляющее большинство владельцев сайтов не имеет доступа к серверной части (за исключением, пожалуй, выделенных серверов) и поддержка тех или иных компонентов осуществляется на усмотрение хостпровайдера.

Сначала предлагаем вам несколько простых или относительно простых способов размещения презентаций PowerPoint на сайте или «обходных» путей, позволяющих конвертировать презентацию в другие форматы, более дружественные интернет-сайту.

Размещение прямой ссылки на презентацию PowerPoint

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

Конвертация презентации PowerPoint в PDF, Flash или видеоролик

Конвертация презентации PowerPoint в формат PDF . Пожалуй, самый простой способ конвертации. С помощью виртуального принтера, например, FinePrintPDF, вы просто печатаете свою презентацию в документ, который потом загружаете на сайт с помощью компонента-менеджера PDF (большая часть современных CMS подобные менеджеры имеют в своём составе или предлагают установить бесплатно). Минус данного метода в том, что получается, фактически, печатная копия презентации. То есть, вся анимация, звук и интерактивность — отсутствуют.

Конвертировать презентацию PowerPoint в Macromedia Flash . Это можно сделать с помощью целого ряда утилит, например, Wondershare PPT2Flash. Результат сохраняет практически всю красоту презентации: аудио, анимацию, интерактив. Кроме того, размер файла SWF на порядок меньше исходного файла презентации.

Конвертация презентации PowerPoint в видеоролик . Для этого существует целый ряд бесплатных утилит, например, Fraps или Free Screen Video Recorder. Полученное видео можно загрузить непосредственно на сайт или на Youtube, далее вставить на нужной странице код вызова видеоролика. Видео сохраняет все свойства презентации, за исключением поддержки интерактивности.

Сохранение презентации в формате HTML и последующая загрузка на сайт

Microsoft PowerPoint предлагает сохранить презентацию для публикации в Web. Но, к сожалению, данный способ имеет столько минусов, что мы бы не рекомендовали его даже пробовать. Каждый слайд сохраняется в виде отдельной HTML-страницы, пропадает анимация и аудио.

От простого к сложному

Описанные выше способы можно применять в единичных случаях. Что же делать, если презентаций много, требуется постоянное обновление материалов уже размещённых презентаций? Рассмотрим более сложные способы интеграции на сайт презентаций PowerPoint. Для этого нам необходим программный компонент, инструмент, позволяющий, с одной стороны, управлять загрузкой, манипулированием презентациями и, с другой стороны, предоставляющий возможность размещения презентаций PowerPoint на страницах сайта.

Размещение презентации PowerPoint с помощью Google Docs

Пожалуй, это наиболее популярный способ публикации на своём сайте презентаций. Для этого вам необходимо иметь аккаунт Google. Переходите в раздел Google Docs (Google Drive) и импортируете презентацию MS PowerPoint. Далее, необходимо настроить публичный доступ к просмотру презентации, после чего в диалоге из меню «File» — «Share to Web…» можно получить HTML-код вставки презентации на сайт или блог. Копируем код и вставляем его в HTML-редакторе в нужное место любой страницы сайта. Если публичный доступ настроен верно и код установлен правильно, то презентация будет автоматически загружаться в браузер посетителя сайта вместе со страницей.

Из плюсов следует отметить, что презентация редактируема, и все изменения, которые вы в неё внесёте, автоматически будут отображаться на вашем сайте. Главный минус: значительная часть анимационных эффектов, музыки и звуков, которые вы использовали в презентации PowerPoint, бесследно исчезнут.

Размещение на сайте презентаций PowerPoint с помощью сервиса SlideBoom.com или SlideShare.net