Создание веб сайта в блокноте

2013-06-07 22:12:03

Нет ничего проще, чем создание веб сайта в блокноте, ведь эта небольшая программка есть в любой сборке Windows. Конечно, развернутый листинг кода не будет подсвечиваться разными цветами, а полезные подсказки по веб-кодингу не начнут всплывать при необходимости, но при хорошем знании HTML и CSS подобные ухищрения Вам и не понадобятся.

Как открыть Блокнот?

Достаточно зайти в “Пуск”-меню, нажать на вкладку “Все программы” и перейти в раздел “Стандартные”. Там-то и “прячется” Блокнот. Как только Вы кликните на его иконке, появится пустое рабочее окно программы.

Какие куски кода можно писать в Блокноте?

Большинство. Используете ли Вы HTML (HyperText Markup Language) или СSS (Cascading Style Sheets), или даже JavaScript с PHP (Hypertext Preprocessor), – в любом случае можно легко положиться на этот простенький текстовый редактор. Конечно, для работы PHP понадобится активный сервер с PHP-интерпретатором, но для написания самих сценариев все также достаточно и Блокнота.

Почему для других языков нужны особые среды разработки, а для этих достаточно элементарного редактора текста? Потому что для этих языков не требуется процедура компиляции (перевода алгоритма в машинно-ориентированный низкоуровневый язык), что позволяет писать клиентский код почти что где угодно, – главное сохранить файл в нужном расширении: .htm, .html, .css, .php или .js. Однако, PHP и тут выделился, не даром он является полноценным объектно-ориентированным языком, его строки при желании можно компилировать и в отдельное приложение. Но при написании сайтов этого не требуется.

А интерпретируют и отображают в необходимом виде непонятный код именно веб-браузеры. Так что, если Вам интересно, как та или иная страница сети выглядела бы в Блокноте, то просто просмотрите ее исходный код через любой веб-браузер.

Создание одностраничного веб сайта в блокноте

Если Вы новичок в деле сайтостроя, то начните с постижения основ базового HTML и CSS языков. Они просты в изучении и для написания простого сайта без динамических элементов их будет вполне достаточно. Итак, открываем Блокнот и вводим следующие строки.



Ура! Мы пробуем создать свою первую веб-страничку!



Веб-страница №1


Как много надо узнать, как много нужно выучить.

Теперь сохраните этот файл в отдельной папке как: 1.html. Сама веб-страничка готова, пора приниматься за создание таблицы стилей, ответственной за оформление. Но перед этим положите в ту же папку, что и созданный вами HTML-файл, любое изображение, переименовав его в 1.jpg. Сделали? Отлично.

Создайте новый файл в Блокноте и введите следующие строки:

h1 {
font-family: Helvetica, Times;
color:maroon;
}

h2 {
background-image: url(“1.jpg”);
color:silver;
}

Этот текст сохраните все в ту же папку, но под названием 1.css. Пора посмотреть, что получилось. Откройте файл 1.html с помощью любого браузера.

Как вам первая созданная веб-страница? Непонятно, что понаписали в коде? Тогда пора приниматься за изучение основ HTML и CSS. Удачи!