Господа, хорошего всем настроения) Сегодня решил написать статью на тему Как создать свою веб-страницу. На эту тематику меня натолкнули читатели и друзья, которые почему-то до сих пор не различают типы сайтов и страниц в сети Интернет. Очень редко что-либо называю веб-страничкой))) Однако, многие мои друзья так часто говорят. Специально для них я решил описать основные типы веб-страниц, которые вы можете создать для себя, чтобы иметь некое представительство себя онлайн.
Перед созданием веб-страницы, вам обязательно надо создать email или электронный адрес. Я описывал варианты создания в этой статье Как Создать Электронную Почту. А если электронный адрес у вас есть, то последуем к вариантам создания вашей личной веб-страницы. Читайте способы, которые помогут создать свою веб-страницу.
Содержание
- Одностраничный сайт
- Страница в социальной сети Вконтакте
- Страница в социальной сети Facebook
- Блог
- Дневник
- Заключение.
- Материалы дистанционного курса«Информационные технологии и образование»
- Как создать web-страницу
- Урок 1.1: Создание простой web-страницы
- Создание веб-страницы
- Урок 1.1: Создание простой web-страницы
- Создание Web-сайтов без посторонней помощи
- Как быстро создать простенькую web страничку
- Описание html тегов из примера
- Материалы дистанционного курса«Информационные технологии и образование»
- Как создать web-страницу
- Как Создать Свою Веб-Страницу
Одностраничный сайт
Самый древний способ))) Для него Вам надо изучить основы языка HTML. Делать это в наше время совсем необязательно, существует миллион сервисов, речь о которых пойдет ниже. Однако, если вы хотите понимать как работает сайт и, частично, сеть Интернет, то попробуйте создать одностраничный сайт самостоятельно. О том, как это сделать я описывал в статье Как Создать Свой Сайт. Там есть варианты создания одностраничного сайта с помощью конструкторов сайтов и бесплатных платформ.
Страница в социальной сети Вконтакте
Думаю, в наше время фраза: я создал себе страничку в Интернете относится больше всего к социальной сети Вконтакте. VK самая популярная социальная сеть в СНГ. Создать здесь свою страницу дело 1 минуты. Более того, для вас открывается десятки полезных функций для деятельности в сети Интернет.
Про Вконтакте я писал много и планирую писать еще больше)) С этой социальной сетью вы сможете зарабатывать и знакомиться с новыми людьми.
Вконтакте также позволяет создавать удобный URL-адрес к вашей веб-странице, вместо стандартного URL-адреса при регистрации http://vk.com/id8032931. Затем вы можете поменять его на красивый http://vk.com/vasheimya.vashafamiliya.
Страница в социальной сети Facebook
Если Вконтакте самая популярная социальная сеть в СНГ, то Facebook социальная сеть №1 во всем мире. Фейсбук, считается, вроде как для продвинутых русскоязычных пользователей))) Но лично я думаю, что это все из-за того, то Facebook очень популярен и удобен.
Также как и в Вконтакте, вы можете присвоить себе красивый адрес своей веб-страницы. Полный мануал как создать веб-страницу на Facebook, я описал в статье Как Зарегистрироваться в Facebook.
Блог
Блог самый рекомендуемый мною вариант создания своей веб-страницы. Блог дает тысячи возможностей самореализации и очень удобен в обращении. Часто также бесплатен, как веб-страницы в социальных сетях.
Предлагаю подборку статей по созданию веб-страницы с помощью блога:
- Создать блог на WordPress быстрый, но с затратами на хостинг и отдельный домен.
- Как Создать Блог на Blogger блог-платформа от Google. Интегрирована со многими гугловскими сервисами. Очень удобно, если Вы фанат Google))
- Как Создать Блог на Tumblr самая динамично развивающаяся блог-платформа. Я читал в одном из американских изданий статистику о том, что Tumblr у детей США 12-13-ти лет популярнее Фейсбука!!! Думаю, это показатель удобства и развития этой платформы.
- Как Создать Свой Блог Бесплатно здесь указаны мануалы по практически всем известным блог-платформам, включая и вышеуказанные.
Дневник
По сути, дневник ничем не отличается от блога, просто имеет больше вид дневника, который у вас был в детстве Шутка))) Дневник это всего лишь русское название блога. Например, Liveinternet называет свой блог-сервис дневником.
Заключение.
Подробнее читайте Как Создать Дневник на Liveinternet.
Вот все основные варианты создания вашей веб-странички, или, по-другому, веб-присутствия. Буквально 1 минута и вы уже погружаетесь в пространство всемирной паутины. Удачного веб-странининга!
Предыдущий пост: « Как Зарегистрироваться в Facebook
Следующий пост: Минусы Использования Нелицензионного ПО для Интернет Магазина »
МОСКОВСКИЙ ИНСТИТУТ ОТКРЫТОГО ОБРАЗОВАНИЯ
КАФЕДРА МАТЕРИАЛЬНЫХ И ИНФОРМАЦИОННЫХ ТЕХНОЛОГИЙ
Материалы дистанционного курса
«Информационные технологии и образование»
Полилова Татьяна Алексеевна
polilova@online.ru
Как создать web-страницу
Самый простой способ создать страницу для размещения в Интернете — воспользоваться инструментами пакета Microsoft Office. Последние версии этого пакета предоставляют возможность преобразовать обычный документ в HTML-формат с неплохим качеством кода.
Возможности Word
Подготовленный в текстовом редакторе Word документ можно легко преобразовать в web-страницу. Однако она будет выглядеть не столь привлекательно, как хотелось бы, если не предпринять дополнительные шаги. Рассмотрим несколько примеров.
Возьмем некоторый текст.
Преобразуем документ в web-страницу с помощью операции Сохранить как web-страницу… (вызывается из главного меню — позиция Файл). Тогда html-представление документа будет иметь вид:
Первое, что бросается в глаза — текст занимает все экранное пространство. Длина строки слишком большая. Для комфортного чтения на экране число символов в строке должно быть в диапазоне 50-65.
Использование таблицы
Можно в этом случае поступить совсем просто: завести в исходном документе таблицу и поместить в нее нужный текст. В таблице можно задать рамку. Тогда вид web-страницы намного улучшится, и в браузере страница будет выглядеть привлекательнее.
Фон и стиль
Можно пойти дальше — например, изменить цвет и фактуру фона, вид гиперссылок, оформление списков. Для изменения общего дизайна страницы можно воспользоваться командой Тема из раздела главного меню Формат.
Желательно выбрать не слишком яркий фон, чтобы на нем хорошо читался текст. Таким фоном в предложенном списке является, например, Рисовая бумага. Вид страницы заметно преобразился:
Вставка картинки
В документ можно добавить картинку, взяв ее, к примеру, из коллекции клипов.
Нужно правой кнопкой мыши щелкнуть на картинку, выполнить операцию копирования, и далее в документе указать место для картинки и выполнить операцию вставки скопированного объекта.
Если вы вставляете картинку внутрь абзаца, то лучше изменить свойства картинки, задав обтекание текста вокруг картинки (нужно выбрать позицию главного меню Формат и далее Рисунок):
В документе при этом не будет создаваться лишнего пустого пространства.
Наконец, можно добавить картинке рамку и тень с помощью кнопок на панели Рисование — Тип линии и Стиль тени. Подобные нюансы заметно прибавляют выразительности странице.
Если панели Рисование нет на странице, то нужно установить ее, выбрав позицию главного меню Вид и далее Панели инструментов и Рисование.
Бегущая строка
Word позволяет внести на web-страницу и другие оформительские элементы, например «бегущую строку». Чтобы воспользоваться этой возможностью нужно открыть на экране панель web-компонентов (из главного меню — позиция Вид, далее Панели инструментов и Веб-компоненты). Щелчок по кнопке операции Бегущая строка открывает дополнительное окно для задания текста параметров бегущей строки.
Как обычно, в строке можно поменять шрифт и атрибуты: размер шрифта и цвет символов. Web-страница будет выглядеть на экране следующим образом:
Мы привели пример лишь очень скромного набора дизайнерских приемов, с помощью которых можно оформить web-страницу на основе имеющегося документа в формате Word.
Использование шаблонов оформления
Если вы начинаете создавать страницу с нуля, то можно воспользоваться мастером веб-страниц, который в диалоге будет помогать формировать документ. Или же можно использовать готовый шаблон оформления страницы, выбрав его из достаточно представительного набора. Для этого нужно в операции Создать выбрать режим Создание с помощью шаблона и далее Общие шаблоны. На экране появится форма, в которой нужно выбрать закладку Веб-страницы:
Далее в предлагаемой заготовке документа вы должны ввести тексты и картинки:
Цветовое и стилевое решение пользователь может выбирать самостоятельно, например, с помощью настроек Формат — Тема.
Создание гиперссылок и закладок
Последний вопрос, который мы планируем рассмотреть в данном разделе — создание гиперссылок в документе.
Если мы хотим сослаться в документе на другой документ или другой сайт в Интернете, то такую гиперссылку можно сделать так: выделить в документе фрагмент текста (слово) и выполнить операцию Вставка — Гиперссылка… На экране появится форма, в которой задается адрес гиперссылки. Адрес можно ввести явно или можно выбрать файл в окне.
Здесь следует помнить, что адрес выбранного файла на вашем компьютере может измениться, когда вы будете формировать свой сайт. Поэтому неявный способ задания адреса подходит только в том случае, если структура вашей папки на компьютере и на сайте Интернета совпадают.
Если гиперссылка должна ссылаться на другую часть этого же документа, то предварительно нужно вставить закладку в начале нужного фрагмента. Нужно выполнить операцию Вставить — Закладка, и в появившейся на экране форме ввести имя закладки.
Тогда при создании гиперссылки нужно указать эту закладку (кнопка Закладка… расположена в правой части формы), выбрав, например, ее из списка в форме:
Веб-презентация в PowerPoint
Программа PowerPoint ориентирована на создание презентаций на компьютере. Однако у нее имеется функция преобразования подготовленной презентации в веб-формат.
Вы можете открыть подготовленную презентацию и выполнить операции (из главного меню) Файл — Сохранить как веб-страницу. Как обычно нужно задать имя веб-презентации в открывшемся окне. В результате выполнения преобразования презентации будет создан файл с заданным именем и расширением .htm и одноименная папка с дополнительными материалами.
Если теперь из браузера вызвать веб-презентацию, то на экране можно увидеть результат преобразования.
В нижней части экрана создается специальная строка, где располагаются кнопки перехода к слайдам и кнопки для задания различных параметров просмотра презентаций.
Презентацию можно просматривать с показом структуры слайдов. Но если эта информацию не представляет интереса, то зарезервированное для показа структуры поле на экране можно убрать (операция развернуть/свернуть структуру в нижней строке).
С помощью кнопки Показ сладов можно просматривать слайды на полном экране.
Создание гиперссылок
В презентации можно создать гиперссылки, которые связывают объекты на слайде, например, с другими слайдами. Тем самым можно создать структуру гипермедиа, которая естественным образом будет соответствовать идеологии Интернета. Поясним этот прием на примере.
Пусть у нас есть несколько заготовленных слайдов на тему растительного мира Байкала, составленных из коллекции фотографий. Создадим новый слайд — оглавление коллекции.
Если новый слайд получился не первый в последовательности, то нужно выйти в режим сортировщика слайдов (из главного меню с помощью операций Вид — Сортировщик слайдов) и перетащить новый слайд в начало коллекции.
На новый слайд поместим уменьшенные копии всех фотографий. Проще всего это сделать самым прямолинейным способом: на пустой слайд последовательно скопировать все фотографии коллекции, уменьшить их размер и разместить, например, в две линии. Картинки можно будет в дальнейшем оформить рамками с тенью. На слайд-оглавление можно добавить название презентации.
Урок 1.1: Создание простой web-страницы
Вид презентации в режиме Сортировщик слайдов представлен ниже:
Перейдем в обычный режим просмотра слайдов (команды Вид и далее Обычный). На слайде-оглавлении выделим фотографию и выполним команду Вставка — Гиперссылка. В открывшемся окне зададим переход по гиперссылке — номер слайда с большой фотографией, с которой был скопирован меньший образец для оглавления.
Аналогично свяжем другие картинки на слайде-оглавлении с соответствующими слайдами с оригиналами фотографий.
Если мы теперь запустим нашу презентацию на выполнение, то она будет работать как структура гипермедиа: при щелчке по маленькой фотографии будет выполняться переход на слайд с фотографией в увеличенном размере.
Осталось совсем немного усовершенствовать нашу структуру. Добавим на каждый слайд с фотографией в его верхнюю левую часть стрелку (Автофигура на панели инструментов Рисование), и сделаем из этой стрелки гиперссылку, выполняющую переход на слайд-оглавление. Теперь движение по созданной нами структуре гипермедиа станет «двусторонним»: из оглавления можно перейти на слайды с фотографиями, и с любого слайда вернуться на оглавление.
После выполнения преобразования презентации в веб-формат наша первая страница будет иметь вид:
Щелчок по картинке из меню вызовет переход к слайду с большой фотографией, а щелчок по стрелке (в левой верхней части слайда) обеспечит переход на страницу с оглавлением коллекции.
Господа, хорошего всем настроения) Сегодня решил написать статью на тему Как создать свою веб-страницу. На эту тематику меня натолкнули читатели и друзья, которые почему-то до сих пор не различают типы сайтов и страниц в сети Интернет. Очень редко что-либо называю веб-страничкой))) Однако, многие мои друзья так часто говорят. Специально для них я решил описать основные типы веб-страниц, которые вы можете создать для себя, чтобы иметь некое представительство себя онлайн.
Перед созданием веб-страницы, вам обязательно надо создать email или электронный адрес. Я описывал варианты создания в этой статье Как Создать Электронную Почту. А если электронный адрес у вас есть, то последуем к вариантам создания вашей личной веб-страницы. Читайте способы, которые помогут создать свою веб-страницу.
Одностраничный сайт
Самый древний способ))) Для него Вам надо изучить основы языка HTML. Делать это в наше время совсем необязательно, существует миллион сервисов, речь о которых пойдет ниже. Однако, если вы хотите понимать как работает сайт и, частично, сеть Интернет, то попробуйте создать одностраничный сайт самостоятельно. О том, как это сделать я описывал в статье Как Создать Свой Сайт. Там есть варианты создания одностраничного сайта с помощью конструкторов сайтов и бесплатных платформ.
Страница в социальной сети Вконтакте
Думаю, в наше время фраза: я создал себе страничку в Интернете относится больше всего к социальной сети Вконтакте.
Создание веб-страницы
VK самая популярная социальная сеть в СНГ. Создать здесь свою страницу дело 1 минуты. Более того, для вас открывается десятки полезных функций для деятельности в сети Интернет.
Про Вконтакте я писал много и планирую писать еще больше)) С этой социальной сетью вы сможете зарабатывать и знакомиться с новыми людьми.
Вконтакте также позволяет создавать удобный URL-адрес к вашей веб-странице, вместо стандартного URL-адреса при регистрации http://vk.com/id8032931. Затем вы можете поменять его на красивый http://vk.com/vasheimya.vashafamiliya.
Страница в социальной сети Facebook
Если Вконтакте самая популярная социальная сеть в СНГ, то Facebook социальная сеть №1 во всем мире. Фейсбук, считается, вроде как для продвинутых русскоязычных пользователей))) Но лично я думаю, что это все из-за того, то Facebook очень популярен и удобен.
Также как и в Вконтакте, вы можете присвоить себе красивый адрес своей веб-страницы. Полный мануал как создать веб-страницу на Facebook, я описал в статье Как Зарегистрироваться в Facebook.
Блог
Блог самый рекомендуемый мною вариант создания своей веб-страницы. Блог дает тысячи возможностей самореализации и очень удобен в обращении. Часто также бесплатен, как веб-страницы в социальных сетях.
Предлагаю подборку статей по созданию веб-страницы с помощью блога:
- Создать блог на WordPress быстрый, но с затратами на хостинг и отдельный домен.
- Как Создать Блог на Blogger блог-платформа от Google. Интегрирована со многими гугловскими сервисами. Очень удобно, если Вы фанат Google))
- Как Создать Блог на Tumblr самая динамично развивающаяся блог-платформа. Я читал в одном из американских изданий статистику о том, что Tumblr у детей США 12-13-ти лет популярнее Фейсбука!!! Думаю, это показатель удобства и развития этой платформы.
- Как Создать Свой Блог Бесплатно здесь указаны мануалы по практически всем известным блог-платформам, включая и вышеуказанные.
Дневник
По сути, дневник ничем не отличается от блога, просто имеет больше вид дневника, который у вас был в детстве Шутка))) Дневник это всего лишь русское название блога. Например, Liveinternet называет свой блог-сервис дневником. Подробнее читайте Как Создать Дневник на Liveinternet.
Вот все основные варианты создания вашей веб-странички, или, по-другому, веб-присутствия. Буквально 1 минута и вы уже погружаетесь в пространство всемирной паутины. Удачного веб-странининга!
Предыдущий пост: « Как Зарегистрироваться в Facebook
Следующий пост: Минусы Использования Нелицензионного ПО для Интернет Магазина »
Урок 1.1: Создание простой web-страницы
Что такое HTML? Из описания: HTML — язык разметки гипертакста (или язык гипертекстовой разметки).
Так давайте познакомимся с ним поближе.
Для начала создайте у себя на компьютере файл с любым названием и расширением .html (название должно быть на английском языке — например index.html). Что бы создать такой файл — создайте обычный текстовый документ («Пуск» — «Все программы» — «Стандартные» — «Блокнот») и сохраните («Файл» — «Сохранить как») его в любом месте, введя название и расширение (бывает, что при введении расширения блокнот все равно сохраняет его как текстовый файл, а нам нужет web файл. Для этого перед сохранением выберите тип файла — «Все файлы(*.*)»).
Это не обязательное условие (так как в настройках сервера можно поменять название первой страницы), а правило хорошего тона. Название первой страницы желательно именно index (index.html), так как сервер, при обращении к нему, выдает файл с таким именем — index.
При правильном сохранении, значок файла должен поменяться на значок браузера (по умолчанию Internet Explorer).
Теперь откройте этот файл через блокнот и скопируйте туда такой код.
Сохраните и откройте через браузер.
Поздравляю, вы только что создали свою первую web-страницу.
Текст «Это первая web-страница!» можете поменять на любой другой, например так — «Это моя первая web-страница!!!».
Создание Web-сайтов без посторонней помощи
сохраняем, обновляем браузер, любуемся результатом.
Но у нашей страницы нет загаловка.
Надо это исправить — немного подправим код, вернее добавим в него «Голову сайта», используя теги <head> и <title>.
Сохраняем, обновляем, любуемся. Теперь у нашей страницы есть загаловок.
Пример здесь.
Описание тегов.
Самый первый тег это <html> (этот тег парный, т.е. закрывающий тег </html> обязателен) — он используется как контейнер, внутри которого находится все содержимое страницы (текст, изображения и прочее). Хотя этот тег (<html> и </html>) необязателен, но его использование говорит о правиле хорошего тона. Поэтому и вам советую его использовать.
Следующий тег — <head>. Это тоже парный тег (<head> и </head>). Этот тег не отображается на странице (кроме заголовка), но он необходим для указания дополнительный параметров страницы — описание страницы (используется поисковиками), ключевые слова (используется поисковиками), стили, скрипты, заголовок и прочее.
Тег <title> — парный тег (<title> и </title>), необходим для указания заголовка страницы. Причем этот тег нужно размещать только внутри тега <head>!
И последний, в нашем коде, тег — <body>. Тоже парный тег (<body> и </body>), внутри которого находится вся видимая часть сайта, т.е. тексты, картинки, ссылки, в общем информация которую вы хотите разместить на сайте.
В следующем уроке мы поговорим о видах тегов и правило их написания.
Список уроковОписание тегов
В первом уроке мы уже рассмотрели маленький пример создания html-страницы. Теперь создадим более сложную страничку. Хочу отметить, что я буду объяснять как это сделать без применения специальных программных средств. Все, что понадобится для работы — это обычный блокнот от Windows. Для более удобной работы рекомендую скачать Notepad++ (продвинутый блокнот с возможностью подсвечивания html-тегов). Итак, начнем.
Откройте блокнот и скопируйте в него следующее:
<html> <head> <title>Главная страница — страница обо мне</title> </head> <body> <center><h1>Информация обо мне</h1></center> Краткая биография обо мне Родился в 1985 году в городе Москва. Закончил в 2008 году МАИ. На данный момент работаю ведущим инженером в крупной авиакомпании. Моя мечта стать ведущим по машине. Поскольку я люблю авиацию, то хотел бы поделиться несколькими интересными фотографиями на эту тему <br/><br/> <center><imgalt=»Два самолета» src=»https://img-fotki.yandex.ru/get/9931/160700675.0/0_110e34_54188f48_-1-orig»> </center> <br/><br/> <fontstyle=»color:green»>Этот текст зеленый</font> <br/><br/> <b>Просто пример жирного текста</b> <br/><br/> Низ страницы <br/><br/> В данном примере мы рассмотрели кратко основные теги HTML, теперь можно пробовать создавать несколько связанных страниц через ссылки и выкладывать сайт в интернет.
Как быстро создать простенькую web страничку
<hr> Этот материал был написан благодаря сайту <ahref=http://zarabotat-na-sajte.ru/> http://zarabotat-na-sajte.ru/</a> — за что я ему благодарен. <br/><br/> Спасибо. До новых встреч! </body> </html>
Далее нажмите «сохранить как», в поле тип файла выберите «все файлы», а в названии напишите index.html. Обязательно в конце названия должно быть расширение .html (не .txt), иначе браузеры не будут интерпретировать его как веб-документ.
Если по каким-то причинам у Вас не получается создать html страницу, то Вы можете скачать предыдущий пример по ссылке: index.rar.
Теперь пару слов о тегах, которые мы использовали, чтобы сделать эту страницу.
Описание html тегов из примера
1. <html></html> — эти теги должны присутствовать на каждой веб-странице обязательно. Они сообщают браузерам и поисковым машинам, что это html-страница.
Любая html страница имеет следующую структуру:
<html> <head> … Заголовочные теги … </head> <body> … Тело страницы … </body> </html>
2. <body></body> — между этими тегами заключается весь видимый контент страницы.
3. <head></head> — внутри этих тегов должны располагаться все заголовочные теги. Этот раздел можно опустить, но я не советую это делать, поскольку это важная часть документа, особенно для поисковых систем. Более подробно про <head></head> читайте в описание заголовочных тегов
4. <title></title> — между этими тегами прописывается заголовок страницы, которое отображается в самом вверху браузера. Кстати, когда Вы что-то ищите в поисковиках, то первое, что отображается, это как раз название страницы. Тег <title></title> часто сокращенно называют «тайтлом». Советую ознакомиться со статьей: как составить тег <title>
Теперь перейдем к тегам, которые находятся в теле html страницы (внутри <body> и </body>).
5. <center></center> — эти теги выравнивают все, что находится внутри них по центру. В данном случае центром будет — центр экрана. В будущем рекомендуется отказаться от использования этих тегов.
6. <h1></h1> — это один из класса тегов заголовочных тегов <h1>..<h6>, обычно в него заключают название страницы. Например, у этой странице заголовочный тег «Пример создания html страницы».
Примечание
эти теги имеют большой вес в ранжировании сайта, поэтому ими необходимо пользоваться аккуратно и с умом.
При составлении html-кода нужно придерживаться простого правила: сначала должен идти заголовочный тег <h1>, а дальше могут идти уже <h2>, <h3> и т.д. Главное, чтобы не было сначала <h2>, потом <h1>, потом <h3> и т.п. Должна быть строгая иерархия. Заголовков <h2>, <h3> и т.п. может быть много.
Более подробно про эти теги читайте в уроке 14 HTML теги <h1>-<h6> — заголовочные теги внутри страницы
7. <br/> — это одиночный тег, который не требует закрывающего тега. Он осуществляет переход на следующую строку. В моем примере написаны два одиночных тега подряд, чтобы дважды перейти на следующую строку.
8. <img alt=»подсказка» src=»URL_ИЗОБРАЖЕНИЯ»> — это одиночный тег, который выводит изображение.
- src — обязательный параметр, в котором указывается адрес изображения (вместо URL_ИЗОБРАЖЕНИЯ необходимо прописать адрес, где хранится Ваше изображение).
Примечание:
- Если изображение находится в одной папке с Вашей html-страницей, то достаточно написать название изображения, иначе нужно прописывать либо абсолютный или относительный URL;
- Не забудьте указать расширение изображения. Например, .jpg, .gif, .jpeg.
Более подробно про <img> читайте в специальном уроке: html тег <img>
9. <font></font> — эти теги созданы для изменения шрифта, фона, размера и т.д. Короче говоря, все, что связано с форматированием текста можно настроить в одном теге. Это тег имеют довольно много атрибутов, о которых я расскажу в отдельном уроке.
Примечание: <span></span> — аналогичный тег.
Есть также свойство CSS font, в котором можно задавать все эти параметры.
10. <b></b> — выделить жирным. Все, что заключено между <b> и </b> будет выделено жирным. Например, если Вы напишите его в самом начале контента, а закроете в самом конце, то весь текст на странице будет выделен жирным. Это довольно часто встречающийся тег, аналогом которого является <strong></strong>.
Поисковые системы обращают внимание на этот тег в плане усиления влияение ключевых слов. Но нужно быть аккуратным, поскольку выделять каждый раз жирным ключевые слова будет воспринято за спам.
Читайте также: как сделать жирный шрифт html
11. <hr/> — одиночный тег, который выводит горизонтальную линию. Имеет несколько параметров, о которых будет сказано позднее.
12. <a href=»URL»>текст_ссылки</a> — тег для создания ссылок.
href=»URL» — этому параметру необходимо присвоить URL ссылки, на которую ведет ссылка. Является обязательным параметром.
Примечание
Если документ, на который Вы хотите перейти, находится в одной папке с Вашей html-страницей, то достаточно написать название этого документа. Например:
<ahref=»stranica_50.html»>stranica_50.html</a> Можно писать и полный адрес страницы <ahref=»http://САЙТ.РУ/КАТЕГОРИЯ/stranica_50.html»>http://САЙТ.РУ/КАТЕГОРИЯ/stranica_50.html</a>
Этому важному тегу посвящен специальный урок: HTML тег <a>.
Более подробное описание этих и других тегов читайте в следующих уроках.
Уважаемый читатель, теперь Вы уже умеете создавать элементарные страницы с изображениями и ссылками. Описанные выше теги встречаются довольно часто и у них есть много различных параметров, о которых Вы узнаете далее. Целью этого урока было ознакомление с простыми тегами html страниц. Теперь советую перейти к следующим урокам.
Следующий урок: Урок 3. Основные html теги
Читайте также:
• Основные html теги
• HTML тег <style> — подробное описание с примерами
• HTML тег <table> — подробное описание с примерами
• HTML тег <form> — подробное описание с примерами
• HTML тег <div> — подробное описание с примерами
• HTML редакторы
• Как создать сайт с нуля — пошаговая инструкция
• HTML тег <!— —> (комментарии)
• <!DOCTYPE> в html
• Что такое JavaScript
← Перейти в каталог html уроков и советов
МОСКОВСКИЙ ИНСТИТУТ ОТКРЫТОГО ОБРАЗОВАНИЯ
КАФЕДРА МАТЕРИАЛЬНЫХ И ИНФОРМАЦИОННЫХ ТЕХНОЛОГИЙ
Материалы дистанционного курса
«Информационные технологии и образование»
Полилова Татьяна Алексеевна
polilova@online.ru
Как создать web-страницу
Самый простой способ создать страницу для размещения в Интернете — воспользоваться инструментами пакета Microsoft Office. Последние версии этого пакета предоставляют возможность преобразовать обычный документ в HTML-формат с неплохим качеством кода.
Возможности Word
Подготовленный в текстовом редакторе Word документ можно легко преобразовать в web-страницу. Однако она будет выглядеть не столь привлекательно, как хотелось бы, если не предпринять дополнительные шаги. Рассмотрим несколько примеров.
Возьмем некоторый текст.
Преобразуем документ в web-страницу с помощью операции Сохранить как web-страницу… (вызывается из главного меню — позиция Файл). Тогда html-представление документа будет иметь вид:
Первое, что бросается в глаза — текст занимает все экранное пространство. Длина строки слишком большая. Для комфортного чтения на экране число символов в строке должно быть в диапазоне 50-65.
Использование таблицы
Можно в этом случае поступить совсем просто: завести в исходном документе таблицу и поместить в нее нужный текст. В таблице можно задать рамку. Тогда вид web-страницы намного улучшится, и в браузере страница будет выглядеть привлекательнее.
Фон и стиль
Можно пойти дальше — например, изменить цвет и фактуру фона, вид гиперссылок, оформление списков. Для изменения общего дизайна страницы можно воспользоваться командой Тема из раздела главного меню Формат.
Желательно выбрать не слишком яркий фон, чтобы на нем хорошо читался текст. Таким фоном в предложенном списке является, например, Рисовая бумага. Вид страницы заметно преобразился:
Вставка картинки
В документ можно добавить картинку, взяв ее, к примеру, из коллекции клипов.
Нужно правой кнопкой мыши щелкнуть на картинку, выполнить операцию копирования, и далее в документе указать место для картинки и выполнить операцию вставки скопированного объекта.
Если вы вставляете картинку внутрь абзаца, то лучше изменить свойства картинки, задав обтекание текста вокруг картинки (нужно выбрать позицию главного меню Формат и далее Рисунок):
В документе при этом не будет создаваться лишнего пустого пространства.
Наконец, можно добавить картинке рамку и тень с помощью кнопок на панели Рисование — Тип линии и Стиль тени. Подобные нюансы заметно прибавляют выразительности странице.
Если панели Рисование нет на странице, то нужно установить ее, выбрав позицию главного меню Вид и далее Панели инструментов и Рисование.
Бегущая строка
Word позволяет внести на web-страницу и другие оформительские элементы, например «бегущую строку». Чтобы воспользоваться этой возможностью нужно открыть на экране панель web-компонентов (из главного меню — позиция Вид, далее Панели инструментов и Веб-компоненты). Щелчок по кнопке операции Бегущая строка открывает дополнительное окно для задания текста параметров бегущей строки.
Как обычно, в строке можно поменять шрифт и атрибуты: размер шрифта и цвет символов. Web-страница будет выглядеть на экране следующим образом:
Мы привели пример лишь очень скромного набора дизайнерских приемов, с помощью которых можно оформить web-страницу на основе имеющегося документа в формате Word.
Использование шаблонов оформления
Если вы начинаете создавать страницу с нуля, то можно воспользоваться мастером веб-страниц, который в диалоге будет помогать формировать документ. Или же можно использовать готовый шаблон оформления страницы, выбрав его из достаточно представительного набора. Для этого нужно в операции Создать выбрать режим Создание с помощью шаблона и далее Общие шаблоны. На экране появится форма, в которой нужно выбрать закладку Веб-страницы:
Далее в предлагаемой заготовке документа вы должны ввести тексты и картинки:
Цветовое и стилевое решение пользователь может выбирать самостоятельно, например, с помощью настроек Формат — Тема.
Создание гиперссылок и закладок
Последний вопрос, который мы планируем рассмотреть в данном разделе — создание гиперссылок в документе.
Если мы хотим сослаться в документе на другой документ или другой сайт в Интернете, то такую гиперссылку можно сделать так: выделить в документе фрагмент текста (слово) и выполнить операцию Вставка — Гиперссылка… На экране появится форма, в которой задается адрес гиперссылки. Адрес можно ввести явно или можно выбрать файл в окне.
Здесь следует помнить, что адрес выбранного файла на вашем компьютере может измениться, когда вы будете формировать свой сайт. Поэтому неявный способ задания адреса подходит только в том случае, если структура вашей папки на компьютере и на сайте Интернета совпадают.
Если гиперссылка должна ссылаться на другую часть этого же документа, то предварительно нужно вставить закладку в начале нужного фрагмента. Нужно выполнить операцию Вставить — Закладка, и в появившейся на экране форме ввести имя закладки.
Тогда при создании гиперссылки нужно указать эту закладку (кнопка Закладка… расположена в правой части формы), выбрав, например, ее из списка в форме:
Веб-презентация в PowerPoint
Программа PowerPoint ориентирована на создание презентаций на компьютере. Однако у нее имеется функция преобразования подготовленной презентации в веб-формат.
Вы можете открыть подготовленную презентацию и выполнить операции (из главного меню) Файл — Сохранить как веб-страницу. Как обычно нужно задать имя веб-презентации в открывшемся окне. В результате выполнения преобразования презентации будет создан файл с заданным именем и расширением .htm и одноименная папка с дополнительными материалами.
Если теперь из браузера вызвать веб-презентацию, то на экране можно увидеть результат преобразования.
В нижней части экрана создается специальная строка, где располагаются кнопки перехода к слайдам и кнопки для задания различных параметров просмотра презентаций.
Презентацию можно просматривать с показом структуры слайдов. Но если эта информацию не представляет интереса, то зарезервированное для показа структуры поле на экране можно убрать (операция развернуть/свернуть структуру в нижней строке).
С помощью кнопки Показ сладов можно просматривать слайды на полном экране.
Создание гиперссылок
В презентации можно создать гиперссылки, которые связывают объекты на слайде, например, с другими слайдами. Тем самым можно создать структуру гипермедиа, которая естественным образом будет соответствовать идеологии Интернета. Поясним этот прием на примере.
Пусть у нас есть несколько заготовленных слайдов на тему растительного мира Байкала, составленных из коллекции фотографий.
Как Создать Свою Веб-Страницу
Создадим новый слайд — оглавление коллекции.
Если новый слайд получился не первый в последовательности, то нужно выйти в режим сортировщика слайдов (из главного меню с помощью операций Вид — Сортировщик слайдов) и перетащить новый слайд в начало коллекции.
На новый слайд поместим уменьшенные копии всех фотографий. Проще всего это сделать самым прямолинейным способом: на пустой слайд последовательно скопировать все фотографии коллекции, уменьшить их размер и разместить, например, в две линии. Картинки можно будет в дальнейшем оформить рамками с тенью. На слайд-оглавление можно добавить название презентации. Вид презентации в режиме Сортировщик слайдов представлен ниже:
Перейдем в обычный режим просмотра слайдов (команды Вид и далее Обычный). На слайде-оглавлении выделим фотографию и выполним команду Вставка — Гиперссылка. В открывшемся окне зададим переход по гиперссылке — номер слайда с большой фотографией, с которой был скопирован меньший образец для оглавления.
Аналогично свяжем другие картинки на слайде-оглавлении с соответствующими слайдами с оригиналами фотографий.
Если мы теперь запустим нашу презентацию на выполнение, то она будет работать как структура гипермедиа: при щелчке по маленькой фотографии будет выполняться переход на слайд с фотографией в увеличенном размере.
Осталось совсем немного усовершенствовать нашу структуру. Добавим на каждый слайд с фотографией в его верхнюю левую часть стрелку (Автофигура на панели инструментов Рисование), и сделаем из этой стрелки гиперссылку, выполняющую переход на слайд-оглавление. Теперь движение по созданной нами структуре гипермедиа станет «двусторонним»: из оглавления можно перейти на слайды с фотографиями, и с любого слайда вернуться на оглавление.
После выполнения преобразования презентации в веб-формат наша первая страница будет иметь вид:
Щелчок по картинке из меню вызовет переход к слайду с большой фотографией, а щелчок по стрелке (в левой верхней части слайда) обеспечит переход на страницу с оглавлением коллекции.
