Советы по HTML : Внедрение элементов в html-страницу : Как вставить в html-страницу документы MS Office (Word, Excel и т.д.)
Вставить документы Оффиса можно при помощи плавающего фрейма . Для этого достаточно указать только адрес вставляемого документа и размеры фрейма. Если размеры фрейма не указывать, то размер на странице будет: width — 300 пикселов, height — 150 пикселов (это значение для iframe по умолчанию).
Вставить в html-страницу документ Microsoft Word можно следующей строкой:
По аналогии можно вставить в html-страницу документ Microsoft Excel:
Это может быть полезно, например, если на страницах нужно выложить часто обновляемые прайсы, а переводить их в html-вид затруднительно.
Однако, на мой взгляд, перебарщивать с этим не стоит, т.к. обычно файлы офиса достаточно много «весят», а это для многих пользователей может быть решающим фактором.
Кроме того, данная конструкция у большинства пользователей без дополнительных настроек браузеров (IE, FF, Opera, Safari)работать не будет. Фрейм останется пустым (Safari), или будет предложено сохранить файл на диск или открыть в Word/Excel (IE, FF, Opera).
Самый простой способ — сохранить исходный файл Word/Excel с помощью команды: File -> Save as WEB. (Файл -> Сохранить как веб-страницу. ) и полученный файл html уже вставлять в iframe.
Загрузка файлов
Для того чтобы можно было загружать на сервер один или несколько файлов, в форме применяется специальное поле. В браузерах Firefox, IE и Opera такой элемент отображается как текстовое поле, рядом с которым располагается кнопка с надписью «Обзор. » (рис. 1). В Safari и Chrome доступна только кнопка «Выберите файл» (рис. 2).
Рис. 1. Вид поля для загрузки файла в Firefox
Рис. 2. Загрузка файлов в Chrome
При нажатии на кнопку открывается окно для выбора файла, где можно указать, какой файл пользователь желает использовать.
Синтаксис поля для отправки файла следующий.
Атрибуты перечислены в табл. 1.
| Атрибут | Описание |
|---|---|
| accept | Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов. |
| size | Ширина текстового поля, которое определяется числом символов моноширинного шрифта. |
| multiple | Позволяет выбирать и загружать сразу несколько файлов. |
| name | Имя поля, используется для его идентификации обработчиком формы. |
Прежде, чем использовать данное поле, в форме необходимо сделать следующее:
- задать метод отправки данных POST ( method=»post» );
- установить у атрибута enctype значение multipart/form-data .
Форма для загрузки файла продемонстрирована в примере 1.
Пример 1. Создание поля для отправки файла
HTML5 IE Cr Op Sa Fx
Отправка файла на сервер Хотя можно установить ширину поля через атрибут size , в действительности ширина никак не влияет на результат работы формы. В браузерах Safari и Chrome этот атрибут вообще никакого воздействия не оказывает.
Атрибут multiple более важен, он позволяет не ограничиваться одним файлом для выбора, а указать их сразу несколько для одновременной загрузки.
Если атрибут accept не указывать, тогда добавляются и загружаются файлы любого типа. Наличие accept позволяет ограничить выбор файла, что особенно важно, когда требуется загрузить только изображение или видео. В качестве значения выступает MIME-тип, несколько значений разделяются между собой запятой. Также можно использовать следующие ключевые слова:
- audio/* — выбор музыкальных файлов любого типа;
- image/* — графические файлы;
- video/* — видеофайлы.
В табл. 2 показаны некоторые допустимые значения атрибута accept .
| Значение | Описание |
|---|---|
| image/jpeg | Только файлы в формате JPEG. |
| image/jpeg,image/png | Только файлы в формате JPEG и PNG. |
| image/* | Любые графические файлы. |
| image/*,video/* | Любые графические и видеофайлы. |
Использование дополнительных атрибутов показано в примере 2.
Пример 2. Загрузка фотографий
HTML5 IE 10+ Cr Op Sa Fx
Загрузка файла Не все браузеры поддерживают новые атрибуты. IE полностью игнорирует multiple и accept , Safari не поддерживает accept , а Firefox не работает с MIME-типом, только с ключевыми словами. Поэтому в примере выше специально для Firefox установлено значение image/*,image/jpeg . Также учтите странную ошибку в Опере, она не допускает пробелы после запятой внутри accept .
Результат примера показан на рис. 3. Обратите внимание, что из-за наличия multiple несколько изменился вид поля.
Рис. 3. Загрузка файлов в Opera
Как вставить html файл в другой html файл?
Артём: Обычно ваш код будет прикручен к какой-либо CMS, в которой, слайдер, скорее всего будет выступать отдельным модулем. Но даже в упрощенном допущении — все серверные языки поддерживают операцию инклуда файлов.
Другое дело, если вы разрабатываете предварительную верстку для передачи ее программисту, и вам неудобно работать с «простыней» кода. В этом случае разработчики используют так называемые системы сборки, которые и позволяют собирать файлы из кусочков, выполнять пре- и постпроцессинг над стилевыми и джаваскрипт-файлами, минифицировать их и прочее. Наиболее популярные — gulp, grunt, webpack и т.п.
Основы HTML
Большинство браузеров имеют возможность изучения html-источника страниц, которые вы просматриваете. При просмотре источника вы увидите ряд тегов HTML (языка разметки гипертекста), окруженных угловыми скобками(<>), перемежаемыми с текстом.
Приведенные ниже действия используют HTML-теги для создания простой веб-страницы. В этих шагах вы введете обычный текст в файл в Блокнот, внесите несколько изменений, сохраните файл и перезагрузите страницу в браузере, чтобы увидеть изменения.
Создание HTML-файла
- Откройте Блокнот или любой обычный текстовый редактор.
- В меню «Файл» выберите «Создать«.
- Введите следующие строки:
Top HTML Tags HTML is swell. Life is good. Here's the big picture
- One programmer
- Ten SDKs
- Great Internet Apps
Make me an unordered list.
Это должно приступить к работе. Если на веб-странице отображается отличная функция, вы можете узнать, как она была создана, проверив источник HTML. Редакторы HTML, такие как Веб-страница Майкрософт, можно использовать для создания простых и расширенных страниц.
Вот весь HTML-источник для файла, который вы создали:
Полное описание тегов, атрибутов и расширений см. в спецификации языка разметки гипертекста (HTML):