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

В следующем уроке мы поговорим о видах тегов и правило их написания.

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

Не считая браузера нам нужен будет хоть какой текстовой редактор, к примеру, Блокнот (Notepad) из Windows либо Notepad, но идеальнее всего Dreamweaver. Программа нужна для подготовки HTML файлов, а браузер - для просмотра и контроля изготовленного. При помощи этих инструментов мы сделаем WEB сайт на собственном локальном компьютере, после этого поместим его на один из WWW серверов в Интернет, сделав, таким макаром, ваши WEB странички доступными всему миру.

Подготовка к созданию WEB сайта

В качестве примера подготовим WEB странички некоторой компании. Назовем ее «Компания SD», допустим, что она работает в области автоматических систем управления. Цель WEB сайта - поведать миру о компании, сфере ее деятельности, отыскать партнеров и заказчиков.

Для файлов нашего WEB сайта нужна отдельная папка.

Сделайте папку с именованием WEB на любом жестком диске вашего компьютера. Сейчас запустим программку Блокнот (Notepad) и приступим к работе.

Откройте программку, к примеру Блокнот (Notepad), нажав кнопку Запуск (Start) на Панели задач (Taskbar) и выбрав из показавшегося меню команду Программки - Обычные - Блокнот (Programs - Accessories - Notepad).

Вы сможете использовать хоть какой другой текстовый редактор. Но в данном случае следует сохранять файл как обычный текст, чтоб избежать включения в WEB документ сторонних знаков форматирования.

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

1-ые теги

Введите с клавиатуры последующие главные теги, поместив любой из их, не считая закрывающего тега , в новейшей строке.

Для ввода парных тегов вы сможете использовать операции копирования и вставки через буфер обмена Windows с следующим добавлением знака слэш /.

Напомним, что 1-ый и последний теги означают соответственно начало и конец документа, элемент … определяет заголовок WEB странички, элемент … - тело документа, а в элементе мы на данный момент укажем заглавие WEB странички.

Меж открывающим тегами воткните заглавие документа - Компания SD. Этот элемент должен смотреться последующим образом:

Напомним, что заглавие WEB странички должно быть маленьким и в наибольшей степени показывать ее содержание.

Наша последующая задачка - воткнуть в тело документа меж тегами … маленький текст-приветствие гостям WEB странички.

Воткните пустую строчку меж тегами и и введите в ней последующий текст:

Добро пожаловать на страницу компании SD! Тут Вы узнаете о нашей деятельности, о программных продуктах нашей компании и об оборудовании, которое мы производим.

Для каждой WEB странички вы сможете найти цвет фона и цвет текста. Это производится при помощи атрибутов bgcolor и text открывающего тега . Для определения цвета как значения атрибутов существует два варианта:

• словесное указание имени цвета, к примеру, white (белоснежный). В языке HTML предвидено шестнадцать таких имен;
• цифровое обозначение в шестнадцатеричной записи, к примеру, "#ffffff" - белоснежный, которое показывает, каким образом цвет формируется из главных цветов - красноватого, зеленоватого и голубого.

Раскрашиваем первую WEB страничку

Естественно, словесное указание цвета более комфортно и понятно. С другой стороны, числовые обозначения дают больше способностей, потому что позволяют указать фактически хоть какой из 16 777 215 цветов, тогда как словесные обозначения ограничены только шестнадцатью цветами.

Перечислим некие цветовые имена: black (темный), gray (сероватый), red (красноватый), green (зеленоватый), aqua (голубой).

Используем в качестве примера для фона нашей WEB странички голубой цвет (blue), а для текста - желтоватый (yellow).

Воткните в открывающий тег атрибуты bgcolor="blue" и text="yellow". Этот тег должен принять вид:

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

В окне программки Блокнот (Notepad) изберите команду меню Файл - Сохранить (File - Save). На дисплее появится диалог Сохранение (Save As).

Откройте сделанную ранее папку WEB, в какой обязаны сохраняться все файлы WEB сайта.

В поле ввода Название файла (File name) введите other.html - так мы назовем этот файл.

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

Смотрим итог работы

Сейчас можно просмотреть результаты нашей работы.

Не закрывая, сверните окно программки Блокнот (Notepad).

Откройте при помощи программки Проводник (Windows Explorer) папку WEB, в какой вы сохранили файл other.html, и два раза щелкните мышью на его значке. Будет запущен браузер, установленный по умолчанию, и в его окне раскроется документ other.html.

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

Может быть, в вашем браузере размер шрифта текста будет крупнее либо мельче, чем на рисунке. В таком случае изберите команду меню Вид - Размер шрифта - Средний (View - Text Size - Medium) в браузере Internet Explorer, чтоб установить средний размер шрифта.

Следует подразумевать, что различные браузеры могут по-разному показывать содержимое 1-го и такого же HTML файла. Потому при разработке WEB страничек лучше всегда просматривать итог во всех более фаворитных браузерах - Internet Explorer, Opera, Мозилла. В таком случае вы будете убеждены, что гость вашего WEB сайта увидит конкретно то, что вы желаете ему показать.

Просмотрите сделанный файл в другом браузере. На этом шаге работы отличия будут неприметны.

Не закрывая, сверните окна браузеров.

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

Урок 2.

Создаем первую html страницу.

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

Первое что мы делаем, это создаем папку на рабочем столе и даем ей название «Сайт». В этой папке будет проходить все наше дальнейшее творение.

Теперь запускаем блокнот Notepad++ который мы установили. (Если Вы этого еще не сделали, то инструкция по установке ). По умолчанию программа должна быть по директории /Program Files/Notepad++/, либо можно запустить через Пуск. Открыли программу и вставляем в нее следующий текст:

<html>
<head>
<title>Мой первый сайт </title>
</head>
<body>
Здравствуйте! Это моя первая веб-страница!
</body>
</html>

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

Теперь нужно сохранить наш файл в формате html.

Не забываем, что Notepad++, это текстовый редактор, а это значит, что на данный момент мы имеем обычный текстовый файл с набором символов. Для того чтобы наш браузер отображал созданную нами текстовую страницу как веб-страницу, нам нужно сделать из нее файл с расширением html.

Для этого нажимаем в верхнем меню кнопку "Файл", затем "Сохранить как", выбираем директорию (путь) куда будет сохранен файл, сохраним его в созданной нами папке: Рабочий стол/Сайт/, далее самое главное, выбираем нужный тип файла, в нашем случае это Hyper Text Markup Language (html).

Поздравляю Вас! Вы только что создали свою первую веб-страницу! Теперь Вы можете зайти в папку "Сайт" и запустить созданный файл. Страница откроется с помощью браузера, и Вы увидите, что вместо непонятных символов которые мы вставляли, браузер выводит на экран вполне понятную информацию.

МОСКОВСКИЙ ИНСТИТУТ ОТКРЫТОГО ОБРАЗОВАНИЯ
КАФЕДРА МАТЕРИАЛЬНЫХ И ИНФОРМАЦИОННЫХ ТЕХНОЛОГИЙ

Материалы дистанционного курса
"Информационные технологии и образование"

Полилова Татьяна Алексеевна
[email protected]

Как создать web-страницу

Самый простой способ создать страницу для размещения в Интернете - воспользоваться инструментами пакета Microsoft Office. Последние версии этого пакета предоставляют возможность преобразовать обычный документ в HTML-формат с неплохим качеством кода.

Возможности Word

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

Возьмем некоторый текст.

Преобразуем документ в web-страницу с помощью операции Сохранить как web-страницу… (вызывается из главного меню - позиция Файл). Тогда html-представление документа будет иметь вид:

Первое, что бросается в глаза - текст занимает все экранное пространство. Длина строки слишком большая. Для комфортного чтения на экране число символов в строке должно быть в диапазоне 50-65.

Использование таблицы

Можно в этом случае поступить совсем просто: завести в исходном документе таблицу и поместить в нее нужный текст. В таблице можно задать рамку. Тогда вид web-страницы намного улучшится, и в браузере страница будет выглядеть привлекательнее.

Фон и стиль

Желательно выбрать не слишком яркий фон, чтобы на нем хорошо читался текст. Таким фоном в предложенном списке является, например, Рисовая бумага. Вид страницы заметно преобразился:

Вставка картинки

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

Нужно правой кнопкой мыши щелкнуть на картинку, выполнить операцию копирования, и далее в документе указать место для картинки и выполнить операцию вставки скопированного объекта.

Если вы вставляете картинку внутрь абзаца, то лучше изменить свойства картинки, задав обтекание текста вокруг картинки (нужно выбрать позицию главного меню Формат и далее Рисунок):

В документе при этом не будет создаваться лишнего пустого пространства.

Наконец, можно добавить картинке рамку и тень с помощью кнопок на панели Рисование - Тип линии и Стиль тени. Подобные нюансы заметно прибавляют выразительности странице.

Если панели Рисование нет на странице, то нужно установить ее, выбрав позицию главного меню Вид и далее Панели инструментов и Рисование.

Бегущая строка

Word позволяет внести на web-страницу и другие оформительские элементы, например "бегущую строку". Чтобы воспользоваться этой возможностью нужно открыть на экране панель web-компонентов (из главного меню - позиция Вид, далее Панели инструментов и Веб-компоненты). Щелчок по кнопке операции Бегущая строка открывает дополнительное окно для задания текста параметров бегущей строки.

Как обычно, в строке можно поменять шрифт и атрибуты: размер шрифта и цвет символов. Web-страница будет выглядеть на экране следующим образом:

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

Использование шаблонов оформления

Если вы начинаете создавать страницу с нуля, то можно воспользоваться мастером веб-страниц, который в диалоге будет помогать формировать документ. Или же можно использовать готовый шаблон оформления страницы, выбрав его из достаточно представительного набора. Для этого нужно в операции Создать выбрать режим Создание с помощью шаблона и далее Общие шаблоны. На экране появится форма, в которой нужно выбрать закладку Веб-страницы:

Цветовое и стилевое решение пользователь может выбирать самостоятельно, например, с помощью настроек Формат - Тема.

Создание гиперссылок и закладок

Последний вопрос, который мы планируем рассмотреть в данном разделе - создание гиперссылок в документе.

Если мы хотим сослаться в документе на другой документ или другой сайт в Интернете, то такую гиперссылку можно сделать так: выделить в документе фрагмент текста (слово) и выполнить операцию Вставка - Гиперссылка… На экране появится форма, в которой задается адрес гиперссылки. Адрес можно ввести явно или можно выбрать файл в окне.

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

Если гиперссылка должна ссылаться на другую часть этого же документа, то предварительно нужно вставить закладку в начале нужного фрагмента. Нужно выполнить операцию Вставить - Закладка, и в появившейся на экране форме ввести имя закладки.

Веб-презентация в PowerPoint

Программа PowerPoint ориентирована на создание презентаций на компьютере. Однако у нее имеется функция преобразования подготовленной презентации в веб-формат.

Вы можете открыть подготовленную презентацию и выполнить операции (из главного меню) Файл - Сохранить как веб-страницу. Как обычно нужно задать имя веб-презентации в открывшемся окне. В результате выполнения преобразования презентации будет создан файл с заданным именем и расширением.htm и одноименная папка с дополнительными материалами.

Если теперь из браузера вызвать веб-презентацию, то на экране можно увидеть результат преобразования.

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

Презентацию можно просматривать с показом структуры слайдов. Но если эта информацию не представляет интереса, то зарезервированное для показа структуры поле на экране можно убрать (операция развернуть/свернуть структуру в нижней строке).

С помощью кнопки Показ сладов можно просматривать слайды на полном экране.

Создание гиперссылок

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

Пусть у нас есть несколько заготовленных слайдов на тему растительного мира Байкала, составленных из коллекции фотографий. Создадим новый слайд - оглавление коллекции.

Если новый слайд получился не первый в последовательности, то нужно выйти в режим сортировщика слайдов (из главного меню с помощью операций Вид - Сортировщик слайдов) и перетащить новый слайд в начало коллекции.

На новый слайд поместим уменьшенные копии всех фотографий. Проще всего это сделать самым прямолинейным способом: на пустой слайд последовательно скопировать все фотографии коллекции, уменьшить их размер и разместить, например, в две линии. Картинки можно будет в дальнейшем оформить рамками с тенью. На слайд-оглавление можно добавить название презентации. Вид презентации в режиме Сортировщик слайдов представлен ниже:

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

Аналогично свяжем другие картинки на слайде-оглавлении с соответствующими слайдами с оригиналами фотографий.

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

Осталось совсем немного усовершенствовать нашу структуру. Добавим на каждый слайд с фотографией в его верхнюю левую часть стрелку (Автофигура на панели инструментов Рисование), и сделаем из этой стрелки гиперссылку, выполняющую переход на слайд-оглавление. Теперь движение по созданной нами структуре гипермедиа станет "двусторонним": из оглавления можно перейти на слайды с фотографиями, и с любого слайда вернуться на оглавление.

После выполнения преобразования презентации в веб-формат наша первая страница будет иметь вид:

Щелчок по картинке из меню вызовет переход к слайду с большой фотографией, а щелчок по стрелке (в левой верхней части слайда) обеспечит переход на страницу с оглавлением коллекции.

Сайт на самом деле представляет собой набор файлов из кода на нескольких языках. А код можно писать в любом нормальном текстовом редакторе, даже в блокноте. Конечно, лучше использовать более продвинутый софт, вроде Notepad++ или полноценных программ для разработки. Ну да ладно, давайте посмотрим, как сделать сайт в блокноте средствами html и css.

Как создать сайт с нуля на html в блокноте — пошаговая инструкция

А вот оно и наше ключевое слово – HTML. Именно с этого языка начинается создание сайта. Без него невозможно представить себе веб-разработку. Это все равно что пытаться сварить суп без воды. Не спешите закрывать страницу, если вы абсолютный ноль в html. В этой пошаговой инструкции мы вместе создадим простой сайт, а я попробую объяснить те куски кода, которые мы будем добавлять в блокнот.

Шаг 1. Создание файлов

Создание html сайта в блокноте нужно начать с того, что создать два текстовых документа в какой-нибудь пустой папке. Один должен получить расширение.html, а второй.css. Имена могут быть любыми. Заметьте, не site.html.txt , а именно site.html .

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

Шаг 2. Закладываем структуру

Файлы созданы и можно приступать к работе. Открывайте html-документ. В нем будет происходить основная работа. Строительным элементом в этом языке являются теги – это специальные слова в угловых скобках, которые указывают браузеру, что нужно отобразить на веб-странице.

Давайте и мы вставим что-то в наш документ, а то совсем пусто.

Привет, мир!

Итак, мы вставили сразу кучу тегов и может быть вы ничего не понимаете. Попробуйте открыть страничку в браузере. Там вы увидите слова “Привет, мир” если все сделано правильно. Это и есть, по сути, простейшая веб-страничка.

html – контейнер для всех остальных тегов. В нем содержится вся веб-страница.
В самом верху мы указали тип документа. Тег head – это служебная информация о странице. Тут мы с помощью тега