Либо в бесплатных или платных конструкторах. Но все же, в начале времен 1990-2000 годы сайты создавались преимущественно на HTML, без использования каких-либо обращений к базе данных. Различные программы, позволяющие редактировать HTML + CSS в реальном времени, например, Dreamweaver — появились только в самом конце 20-го века. Поэтому сайты создавались в блокноте и других подобных редакторов. Хоть сейчас и существует множество удобных способов сделать качественный ресурс, создание сайта при помощи блокнота позволяет выучить основы построения страницы и основы HTML в целом
.
Итак, для того, чтобы создать сайт через блокнот вам нужно для начала создать HTML файл. Сделать это можно следующим образом:
Заходите в меню Пуск -> Все программы -> Стандартные -> Блокнот
И сразу же сохраним его в HTML формате: В блокноте нажмите: Файл -> Сохранить как
И напишите название файла, к примеру, index.html
Теперь мы можем приступать непосредственно к созданию HTML верстки в блокноте. Для начала, напишем основную разметку HTML кода, вы можете ее сразу скопировать и вставить, чтобы не тратить время попусту.
Мой самый прекрасный сайт
Мой первый сайт
По сути это основные элементы, из которых и состоит любой веб-ресурс. Все, что находится в скобках называется HTML-тегом или просто тегом. Все HTML теги открываются, содержат в себе какую-то информацию и затем закрываются. Есть и другие теги, которым не нужен закрывающий тег, но о них мы поговорим позже. Сейчас нам куда интересней ответ на вопрос «как же создать сайт в блокноте?».
Давайте рассмотрим каждый из них, чтобы мы могли легко научиться создавать сайты в блокноте
HTML-теги для создания сайта через блокнот
DOCTYPE — позволяет браузеру определить, что за тип документа он открыл, поскольку у HTML-документа есть множество версий.
html — тег, которым открывается и закрывается вся веб-страница
head — хед (или голова) документа. Данный тег несет в себе информацию для браузера и не отображается на web-странице. В нем содержаться по большей части информация для браузера и , стили CSS, которые мы пропишем чуть позже и различные скрипты.
meta — указывает браузеру и поисковой системе определенную информацию. В данном случае тег мета указывает браузеру о необходимости использования кодировки UTF-8 (для того, чтобы правильно отображался русский язык). В других случаях этот тег может указывать какие-либо другие данные, например, автор статьи, описание страницы, ключевые слова.
body — боди (или тело) документа. В этом теге содержится все то, что мы в данный момент видим на странице, можно сказать, что он включает в себя скелет или каркас веб-страницы.
h1 — Главный заголовок на странице, который оказывает большое влияние, например на
p — параграф — текст, который мы видим на странице
Получился у нас конечно, не самый лучший в мире веб-ресурс, но надо ведь с чего-то начинать?:)
В этой статье мы не создавали никакого меню, если вам интересно как же сделать горизонтальное меню для вашего сайта, то добро пожаловать в .
Теперь давайте придадим ему «красивостей», напишем несколько стилей внутри тега
В итоге наш пример сайта сделанного в блокноте в коде выглядит так
Мой самый прекрасный сайт
Мой первый сайт
Еще совсем чуть-чуть, и я научусь делать самые лучшие сайты на свете.
Теперь вы научились создавать простые сайты в блокноте. Попробуйте использовать другие стили и теги для того, чтобы понять как же устроены сайты.
UPD3.
Когда вы уже создадите сайт и захотите его разместить в интернете, вам понадобится хостинг, я написал как выбрать сервер и сделал подборку из лучших.
Инструкция
Скопируйте в блокнот теги, приведенные ниже, они необходимы для создания .
Переходите к созданию каркаса сайта. Каркас создается с помощью таблицы html. Сейчас мы будем использовать следующий каркас: шапка наверху, аналогичная полоса внизу, а основной лист будет разделен на две половинки. Скопируйте код каркаса к себе в блокнот.
Шапка сайта
Меню сайта
Область под
Подвал сайта
Укажите размеры ячеек. Попробуйте сделать те размеры, которые указали мы, а затем решите, какие размеры нужны вам. Размеры впишите в коды каркаса (это параметры height – высота и width - ширина).
Выберите шапки, фона и подвала сайта, вставьте их в нужные теги. Картинки вставляются с помощью тега . Теперь надписи «Шапка слайда» и «Подвал сайта» должны исчезнуть.
Соедините все вставленные картинки воедино. Для этого в тег
в главной таблице вставьте cellpadding=0 и cellspacing=0.
Уберите промежуток между шапкой и основным пространством сайта. Для этого вставьте параметр выравнивания в
, вот как это выглядеть
Не забудьте отметить в коде, какая , а на какой размещены ссылки. Это поможет связать страницы между собой. Вот как это должно выглядеть Главная, Ссылки.
Не забудьте добавить теги , они нужны для перехода на другую строчку. Ваш первый двухстраничный сайт готов!
Видео по теме
Связанная статья
Источники:
готовый сайт в блокноте
На сегодняшний день в интернете существует гигантское количество различных интернетсайтов
. Бытует мнение, что создание сайтов
это очень сложный процесс, однако это не так! Научиться писать простейшей код, например, для «Сайта визитка» (сайт из 2 – 3 страниц созданный только при помощи HTML) может каждый. Любой желающий может создать своё личное представительство во всемирной паутине. Обычно для создания сайтов
используют специальные программы, сделать это можно и в обычном Блокноте
. В последнем случае понадобится знание языка HTML(HyperText Markup Language - «язык разметки гипертекста»), а так же языка описания внешнего вида документа CSS(Cascading Style Sheets - каскадные таблицы стилей).
Инструкция
Чтобы сайт необходимо будет написать код для каждой страницы, редактором для написания этого кода и будет служить Блокнот. К примеру, вы хотите сайт всего из одной страницы. и запишите в нём HTML код этой страницы, на рисунке приведён простого кода.
Чтобы получить готовую необходимо сохранить написанный текст в формате HTML. Название файла должно быть написано латинскими буквами, оно не должно содержать знаков препинания, пробелов, математических . В названии файла можно использовать знак «_» и цифры. Файл нужно сохранить с расширением.html или.htm, например page.html.Полученный можно в любом интернет – , результат показан на рисунке. Используя блокнот можно создавать и более сложные из множества страниц, используя специальные языки программирования.
Источники:
создание сайтов в блокноте примеры
В реляционных системах управления базами данных вся сохраняемая информация представлена в разных таблицах. Это обеспечивает исключение избыточности данных. Выборка и работа с необходимой информацией в подобной базе реализуется, в том числе, с помощью механизма связывания таблиц. Связь двух таблиц осуществляется по общему полю в обоих из них и задается в схеме данных текущей базы. Причем для полей связываемых таблиц необходимо установить определенный тип данных. Иначе создание связи между таблицами будет неверного вида или не произойдет.
Вам понадобится
СУБД Microsoft Access
Инструкция
Заполните поля таблиц данными. При этом учитывайте, что для связывания данных полей таблиц они должны иметь похожий тип данных. При создании «один ко многим» поле может быть типа «Счетчик». При этом соответствующее поле второй таблицы
должно быть числового вида. В качестве ключевого поставьте поле с типом счетчика.
Откройте схему данных базы. Для этого выберите в меню СУБД Access пункты «Сервис» - «Схема данных…». На экране появится область, в которой содержатся все связанные элементы базы. Если область , автоматически откроется окно добавления таблиц. Иначе оно вызывается из контекстного меню данной области.
В данном окне в выпадающих списках задайте нужные наименования полей, если вам не удалось их точно установить движением мышки. Включите все флажки элементов для обеспечения целостности данных и каскадного изменения данных в связанных таблицах.
Устанавливаемый тип отношений будет отображаться внизу окна. Всего существует три типа связи: «один к одному», «один ко многим» и «многие ко многим». Если вам для связываемых таблиц требовалась связь иного рода, чем отразилась в окне, значит, вы не верно задали типы данных полей ваших таблиц.
Для установки связи нажмите в окне кнопку «Создать». В области схемы данных появится связь между двумя таблицами от одного поля к другому. Тип связи будет схематично отображаться в окне на линии цифрой 1 и знаком бесконечности, обозначающим связь «ко многим». Сохраните базу данных. Теперь две таблицы
связаны в указанном соотношении.
Видео по теме
Создание собственного веб-сайта не покажется таким сложным, каким кажется на первый взгляд, если разобраться в основах языка HTML и создать самую простую веб-страницу
в обыкновенном блокноте
, который есть на каждом компьютере. Именно с создания HTML-страниц в блокноте
все веб-программисты начинали учиться сайтостроению, и вы тоже можете освоить эту несложную науку.
Инструкция
Сохраните текстовый документ, но не в текстовом формате, а в формате html – при сохранении переименуйте файл в index.html. Откройте полученный файл с помощью любого браузера – вы увидите пустую страницу
, на которой будет напечатан заголовок сайта, введенный вами в предыдущем шаге.
Теперь вы в любой момент можете открыть созданный файл с и продолжить редактировать его код для дальнейшего наполнения . Изучите основные html-теги для форматирования страницы. Тег используйте для переноса текста на строку ниже, а тег
и используйте для определения заголовка страницы. Важным тегом является - в нем должно содержаться тело документа.
Итак, создав базу страницы, начинайте заполнять ее текстом. Возьмите любой , который вы хотите вставить на сайт, скопируйте его и вставьте сразу после тега
в документ. Сохраните файл.
Теперь отформатируйте текст – разбейте его на абзацы с помощью тега
И выровняйте его с помощью параметра align со значениями left, center, right, justify. По умолчанию все в HTML выравниваются по левому краю. Некоторые особенно важные моменты и заголовки выделите жирным шрифтом, заключив часть текста в теги . Для того чтобы сделать текст наклонным, заключите его в теги .
Для того чтобы смотрелась ярче и привлекательнее, дополните текст любым изображением. Выберите подходящую или фотографию, уменьшите ее в любом редакторе и сохраните в папке с файлами для будущего сайта. Введите тег в то место кода, где должна располагаться иллюстрация. Вместо picture введите полное имя вашей сохраненной картинки. При желании выровняйте изображение с помощью уже описанного выше параметра align. Сохраните документ и откройте его , чтобы убедиться, что изображение и текст на странице.
Источники:
как создать веб страницу с помощью блокнота
Для создания простой web-страницы специальных приспособлений и навыков не потребуется. Достаточно обзавестись стандартной программой «Блокнот», которая обычно устанавливается на всех компьютерах с ОС Windows.
МОСКОВСКИЙ ИНСТИТУТ ОТКРЫТОГО ОБРАЗОВАНИЯ
КАФЕДРА МАТЕРИАЛЬНЫХ И ИНФОРМАЦИОННЫХ ТЕХНОЛОГИЙ
Материалы дистанционного курса "Информационные технологии и образование"
Самый простой способ создать страницу для размещения в Интернете - воспользоваться инструментами пакета Microsoft Office. Последние версии этого пакета предоставляют возможность преобразовать обычный документ в HTML-формат с неплохим качеством кода.
Возможности Word
Подготовленный в текстовом редакторе Word документ можно легко преобразовать в web-страницу. Однако она будет выглядеть не столь привлекательно, как хотелось бы, если не предпринять дополнительные шаги. Рассмотрим несколько примеров.
Возьмем некоторый текст.
Преобразуем документ в web-страницу с помощью операции Сохранить как web-страницу… (вызывается из главного меню - позиция Файл). Тогда html-представление документа будет иметь вид:
Первое, что бросается в глаза - текст занимает все экранное пространство. Длина строки слишком большая. Для комфортного чтения на экране число символов в строке должно быть в диапазоне 50-65.
Использование таблицы
Можно в этом случае поступить совсем просто: завести в исходном документе таблицу и поместить в нее нужный текст. В таблице можно задать рамку. Тогда вид web-страницы намного улучшится, и в браузере страница будет выглядеть привлекательнее.
Фон и стиль
Желательно выбрать не слишком яркий фон, чтобы на нем хорошо читался текст. Таким фоном в предложенном списке является, например, Рисовая бумага. Вид страницы заметно преобразился:
Вставка картинки
В документ можно добавить картинку, взяв ее, к примеру, из коллекции клипов.
Нужно правой кнопкой мыши щелкнуть на картинку, выполнить операцию копирования, и далее в документе указать место для картинки и выполнить операцию вставки скопированного объекта.
Если вы вставляете картинку внутрь абзаца, то лучше изменить свойства картинки, задав обтекание текста вокруг картинки (нужно выбрать позицию главного меню Формат и далее Рисунок):
В документе при этом не будет создаваться лишнего пустого пространства.
Наконец, можно добавить картинке рамку и тень с помощью кнопок на панели Рисование - Тип линии и Стиль тени. Подобные нюансы заметно прибавляют выразительности странице.
Если панели Рисование нет на странице, то нужно установить ее, выбрав позицию главного меню Вид и далее Панели инструментов и Рисование.
Бегущая строка
Word позволяет внести на web-страницу и другие оформительские элементы, например "бегущую строку". Чтобы воспользоваться этой возможностью нужно открыть на экране панель web-компонентов (из главного меню - позиция Вид, далее Панели инструментов и Веб-компоненты). Щелчок по кнопке операции Бегущая строка открывает дополнительное окно для задания текста параметров бегущей строки.
Как обычно, в строке можно поменять шрифт и атрибуты: размер шрифта и цвет символов. Web-страница будет выглядеть на экране следующим образом:
Мы привели пример лишь очень скромного набора дизайнерских приемов, с помощью которых можно оформить web-страницу на основе имеющегося документа в формате Word.
Использование шаблонов оформления
Если вы начинаете создавать страницу с нуля, то можно воспользоваться мастером веб-страниц, который в диалоге будет помогать формировать документ. Или же можно использовать готовый шаблон оформления страницы, выбрав его из достаточно представительного набора. Для этого нужно в операции Создать выбрать режим Создание с помощью шаблона и далее Общие шаблоны. На экране появится форма, в которой нужно выбрать закладку Веб-страницы:
Цветовое и стилевое решение пользователь может выбирать самостоятельно, например, с помощью настроек Формат - Тема.
Создание гиперссылок и закладок
Последний вопрос, который мы планируем рассмотреть в данном разделе - создание гиперссылок в документе.
Если мы хотим сослаться в документе на другой документ или другой сайт в Интернете, то такую гиперссылку можно сделать так: выделить в документе фрагмент текста (слово) и выполнить операцию Вставка - Гиперссылка… На экране появится форма, в которой задается адрес гиперссылки. Адрес можно ввести явно или можно выбрать файл в окне.
Здесь следует помнить, что адрес выбранного файла на вашем компьютере может измениться, когда вы будете формировать свой сайт. Поэтому неявный способ задания адреса подходит только в том случае, если структура вашей папки на компьютере и на сайте Интернета совпадают.
Если гиперссылка должна ссылаться на другую часть этого же документа, то предварительно нужно вставить закладку в начале нужного фрагмента. Нужно выполнить операцию Вставить - Закладка, и в появившейся на экране форме ввести имя закладки.
Веб-презентация в PowerPoint
Программа PowerPoint ориентирована на создание презентаций на компьютере. Однако у нее имеется функция преобразования подготовленной презентации в веб-формат.
Вы можете открыть подготовленную презентацию и выполнить операции (из главного меню) Файл - Сохранить как веб-страницу. Как обычно нужно задать имя веб-презентации в открывшемся окне. В результате выполнения преобразования презентации будет создан файл с заданным именем и расширением.htm и одноименная папка с дополнительными материалами.
Если теперь из браузера вызвать веб-презентацию, то на экране можно увидеть результат преобразования.
В нижней части экрана создается специальная строка, где располагаются кнопки перехода к слайдам и кнопки для задания различных параметров просмотра презентаций.
Презентацию можно просматривать с показом структуры слайдов. Но если эта информацию не представляет интереса, то зарезервированное для показа структуры поле на экране можно убрать (операция развернуть/свернуть структуру в нижней строке).
С помощью кнопки Показ сладов можно просматривать слайды на полном экране.
Создание гиперссылок
В презентации можно создать гиперссылки, которые связывают объекты на слайде, например, с другими слайдами. Тем самым можно создать структуру гипермедиа, которая естественным образом будет соответствовать идеологии Интернета. Поясним этот прием на примере.
Пусть у нас есть несколько заготовленных слайдов на тему растительного мира Байкала, составленных из коллекции фотографий. Создадим новый слайд - оглавление коллекции.
Если новый слайд получился не первый в последовательности, то нужно выйти в режим сортировщика слайдов (из главного меню с помощью операций Вид - Сортировщик слайдов) и перетащить новый слайд в начало коллекции.
На новый слайд поместим уменьшенные копии всех фотографий. Проще всего это сделать самым прямолинейным способом: на пустой слайд последовательно скопировать все фотографии коллекции, уменьшить их размер и разместить, например, в две линии. Картинки можно будет в дальнейшем оформить рамками с тенью. На слайд-оглавление можно добавить название презентации. Вид презентации в режиме Сортировщик слайдов представлен ниже:
Перейдем в обычный режим просмотра слайдов (команды Вид и далее Обычный). На слайде-оглавлении выделим фотографию и выполним команду Вставка - Гиперссылка. В открывшемся окне зададим переход по гиперссылке - номер слайда с большой фотографией, с которой был скопирован меньший образец для оглавления.
Аналогично свяжем другие картинки на слайде-оглавлении с соответствующими слайдами с оригиналами фотографий.
Если мы теперь запустим нашу презентацию на выполнение, то она будет работать как структура гипермедиа: при щелчке по маленькой фотографии будет выполняться переход на слайд с фотографией в увеличенном размере.
Осталось совсем немного усовершенствовать нашу структуру. Добавим на каждый слайд с фотографией в его верхнюю левую часть стрелку (Автофигура на панели инструментов Рисование), и сделаем из этой стрелки гиперссылку, выполняющую переход на слайд-оглавление. Теперь движение по созданной нами структуре гипермедиа станет "двусторонним": из оглавления можно перейти на слайды с фотографиями, и с любого слайда вернуться на оглавление.
После выполнения преобразования презентации в веб-формат наша первая страница будет иметь вид:
Щелчок по картинке из меню вызовет переход к слайду с большой фотографией, а щелчок по стрелке (в левой верхней части слайда) обеспечит переход на страницу с оглавлением коллекции.
Урок 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).
Поздравляю Вас! Вы только что создали свою первую веб-страницу! Теперь Вы можете зайти в папку "Сайт" и запустить созданный файл. Страница откроется с помощью браузера, и Вы увидите, что вместо непонятных символов которые мы вставляли, браузер выводит на экран вполне понятную информацию.
: HTML - язык разметки гипертакста (или язык гипертекстовой разметки).
Так давайте познакомимся с ним поближе.
Для начала создайте у себя на компьютере файл с любым названием и расширением.html (название должно быть на английском языке - например index.html). Что бы создать такой файл - создайте обычный текстовый документ ("Пуск" - "Все программы" - "Стандартные" - "Блокнот")
и сохраните ("Файл" - "Сохранить как")
его в любом месте, введя название и расширение (бывает, что при введении расширения блокнот все равно сохраняет его как текстовый файл, а нам нужет web файл. Для этого перед сохранением выберите тип файла - "Все файлы(*.*)").
Это не обязательное условие (так как в настройках сервера можно поменять название первой страницы), а правило хорошего тона. Название первой страницы желательно именно index (index.html), так как сервер, при обращении к нему, выдает файл с таким именем - index.
При правильном сохранении, значок файла должен поменяться на значок браузера (по умолчанию Internet Explorer).
Теперь откройте этот файл через блокнот и скопируйте туда такой код.
Это первая web-страница!
Сохраните и откройте через браузер.
Поздравляю, вы только что создали свою первую web-страницу.
Текст "Это первая web-страница!" можете поменять на любой другой, например так - "Это моя первая web-страница!!!". сохраняем, обновляем браузер, любуемся результатом.
Но у нашей страницы нет загаловка.
Надо это исправить - немного подправим код, вернее добавим в него "Голову сайта", используя теги
и .</p><p>
<html>
<head>
<title>Первая страница
Это моя первая web-страница!!!
Сохраняем, обновляем, любуемся. Теперь у нашей страницы есть загаловок.
Описание тегов.
Самый первый тег это (этот тег парный, т.е. закрывающий тег обязателен) - он используется как контейнер, внутри которого находится все содержимое страницы (текст, изображения и прочее). Хотя этот тег ( и ) необязателен, но его использование говорит о правиле хорошего тона. Поэтому и вам советую его использовать.
Следующий тег - . Это тоже парный тег (
и ). Этот тег не отображается на странице (кроме заголовка), но он необходим для указания дополнительный параметров страницы - описание страницы (используется поисковиками), ключевые слова (используется поисковиками), стили, скрипты, заголовок и прочее.
Тег
</b> - парный тег (<title> и ), необходим для указания заголовка страницы. Причем этот тег нужно размещать только внутри тега !
И последний, в нашем коде, тег - . Тоже парный тег (
и ), внутри которого находится вся видимая часть сайта, т.е. тексты, картинки, ссылки, в общем информация которую вы хотите разместить на сайте.
В следующем уроке мы поговорим о видах тегов и правило их написания.
в то место кода, где должна располагаться иллюстрация. Вместо picture введите 
