Как создать простую html страницу в блокноте. Создаем первую html страницу

Господа, хорошего всем настроения) Сегодня решил написать статью на тему — Как создать свою веб-страницу. На эту тематику меня натолкнули читатели и друзья, которые почему-то до сих пор не различают типы сайтов и страниц в сети Интернет. Очень редко что-либо называю веб-страничкой))) Однако, многие мои друзья так часто говорят. Специально для них я решил описать основные типы веб-страниц, которые вы можете создать для себя, чтобы иметь некое представительство себя онлайн.

Перед созданием веб-страницы, вам обязательно надо создать email или электронный адрес. Я описывал варианты создания в этой статье — . А если электронный адрес у вас есть, то последуем к вариантам создания вашей личной веб-страницы. Читайте способы, которые помогут создать свою веб-страницу.

Одностраничный сайт

Самый древний способ))) Для него Вам надо изучить основы языка HTML. Делать это в наше время совсем необязательно, существует миллион сервисов, речь о которых пойдет ниже. Однако, если вы хотите понимать — как работает сайт и, частично, сеть Интернет, то попробуйте создать одностраничный сайт самостоятельно. О том, как это сделать я описывал в статье — . Там есть варианты создания одностраничного сайта с помощью конструкторов сайтов и бесплатных платформ.

Страница в социальной сети Вконтакте

Думаю, в наше время фраза: «я создал себе страничку в Интернете» относится больше всего к социальной сети Вконтакте. VK — самая популярная социальная сеть в СНГ. Создать здесь свою страницу — дело 1 минуты. Более того, для вас открывается десятки полезных функций для деятельности в сети Интернет.
Про Вконтакте я писал много и планирую писать еще больше)) С этой социальной сетью вы сможете и .

Вконтакте также позволяет создавать удобный URL-адрес к вашей веб-странице, вместо стандартного URL-адреса при регистрации http://vk.com/id8032931. Затем вы можете поменять его на красивый — http://vk.com/vasheimya.vashafamiliya.

Страница в социальной сети Facebook

Если Вконтакте самая популярная социальная сеть в СНГ, то Facebook — социальная сеть №1 во всем мире. Фейсбук, считается, вроде как для продвинутых русскоязычных пользователей))) Но лично я думаю, что это все из-за того, то Facebook очень популярен и удобен.

Также как и в Вконтакте, вы можете присвоить себе красивый адрес своей веб-страницы. Полный мануал — как создать веб-страницу на Facebook, я описал в статье — .

Блог

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

  • — быстрый, но с затратами на хостинг и отдельный домен.
  • — блог-платформа от Google. Интегрирована со многими гугловскими сервисами. Очень удобно, если Вы фанат Google))
  • — самая динамично развивающаяся блог-платформа. Я читал в одном из американских изданий статистику о том, что Tumblr у детей США 12-13-ти лет популярнее Фейсбука!!! Думаю, это показатель удобства и развития этой платформы.
  • — здесь указаны мануалы по практически всем известным блог-платформам, включая и вышеуказанные.

Дневник

Вот все основные варианты создания вашей веб-странички, или, по-другому, веб-присутствия. Буквально 1 минута и вы уже погружаетесь в пространство всемирной паутины. Удачного веб-странининга!

В целом оценю время на базовое изучение html как 2-8 часов, остальное по желанию. Ну и, конечно же, время изучения зависит от заинтересованности. Рекомендую разбить на несколько дней по 20-30 минут.

Вы готовы? Тогда поехали!

Подключение к интернету для создания страницы на html нам НЕ нужно.

Нам понадобится

1) Выбираем текстовой редактор . На первое время достаточно Блокнота (Notepad) (в нём нам понадобится только команда Сохранить как )
Если Вы сразу хотите начать программировать в специализированных текстовых редакторах, то обратите внимание на:
1) для Windows
NotePad++ (скачать или )
Intype (скачать)

2) для Mac и Linux
Bluefish Editor (скачать)

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

2) Любой интернет-браузер, например, Internet Explorer для Windows или Safari для Mac OS X и iOS. Да-да, можно также Mozilla , Google Chrome , Opera , Yandex и Mail браузеры и тд.

Приступим к созданию страницы HTML

1) создаём на рабочем столе папку html . Это мы сделаем для того, чтобы уроки были структурированы и содержались в одном месте.

2) Создаём наш файл в текстовом редакторе, например в Блокноте (NotePad). Далее Сохранить как .

Кодировку лучше выбирать UTF-8, затем выбрать все типы файлов и выбрать название файла с.html на конце, например index.html

Выбираем в качестве директории (папки), куда сохранить, нашу html
Нажимаем сохранить . Готово!

Часто задают вопрос о том, что не видно расширения файла . Разберём по порядку

Возможность видеть расширения файла может помочь в точном определении типа файла и даёт возможность вручную (при команде переименовать ) сменить не только расширение, но и следовательно тип файла (например, с txt на html)

так НЕ должно выглядеть: photo, текстовой документ, game
так Должно выглядеть: photo.jpg; текстовой документ.txt; game.exe

Но если же у Вас всё-таки названия файлов выглядят как в первом варианте (БЕЗ, например, .txt ; jpg ; .exe в конце названия файлов), делаем следующее:

Смотрим настройки файлов и папок:

Для Win XP Открываем любую папку - Сервис (сверху в панели) - Свойства папки - Вид - Скрывать расширения для зарегистрированных файлов (снять галочку) - Применить

Для Win 7 Открываем любую папку - Упорядочить - Параметры файлов и поиска -Вид - Скрывать расширения для зарегистрированных типов файлов (снять галочку) - Применить

Для Mac OS Щёлкаем мышью по рабочему столу - Finder - Preferences (Настройки) - Advanced (Дополнительно) - выставить флажок в Show all file extensions (Показывать расширения всех файлов) - Применить

3) вставляем в него Весь код (вместе с комментариями), указанный ниже:



<br>


Заголовок моей странички


4) открываем файл. Можете выбрать другой браузер для открытия данного файла, для этого нажимаем правую кнопку мыши на нашем файле index.html - Открыть с помощью и выбираем какой-нибудь браузер из списка, например, Internet Explorer, Google Chrome, Mozilla, Яндекс Браузер и тд.

В итоге, открыв Интернет-Браузером получившийся index.html , Вы должны увидеть страничку такого вида:


Рисунок 1.

На Рисунке 1 мы видим как в результате браузер отобразил Вашу страничку. Красным выделен текст следующих элементов:



<br> Название Вашей первой странички <br>

Заголовок моей странички

Это моя первая web-страничка!

В коде представленном снизу Вы сможете увидеть базовый минимум html-документа. Её нужно обязательно выучить и не путать местами открывающие и закрывающие теги.



Тег head выделяет головную часть документа. В ней прописываются элементы в основном связанные с помощью Браузеру в обработке элементов Вашей страницы (название, ключевые слова, авторство и тд) Конкретно о его содержимом мы поговорим позже.

Тег title обозначает Название страницы. Это единственный тег, содержащийся в head , который отображается на странице. То, что вписать после открывающего и перед закрывающим тегом и будет Названием Вашей страницы в Интернете



<br> Название страницы <br>


Тег body обозначает Тело страницы. То, что вписать после открывающего и закрывающего тегов body и будет Содержимым Вашей страницы


<br> Название страницы <br>

Любой заголовок


Просто текст

Текст в параграфе. Он будет писаться с новой строки и заканчиваться с закрывающим тегом


Другой текст



Почти все теги в HTML открывающие и закрывающие (исключение, например, тег img, который обозначает вставку изображеия).



<br> Название страницы <br>



В очередной раз напомню, что Важно не забывать писать закрывающие теги для всех остальных типов тегов, иначе Браузер не поймёт где именно Вы хотели закончить тот или иной элемент. Как снизу:



<br>

Хочу выделить текст жирным, а этот уже курсивом



Мы намерено после слова жирным забыли закрывающий тег b. В итоге браузер вывел следующее

Хочу выделить текст жирным, а этот уже курсивом

Как видите, текст до конца будет выделяться жирным, а тот, что подразумевался курсивом, тот будет и жирным, и курсивом. Так что будьте внимательны!

5) Если Вы хотите что-то подредактировать в Вашем файле index.html (а он теперь по умолчанию открывается только браузером), то тогда нажимаем правую кнопку мыши на нашем файле index.html - выбираем Открыть с помощью а из списка выбираем уже текстовой редактор, это будет либо Блокнот (в англ. Notepad) , либо установленный Вами другой текстовой редактор.

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

Мои поздравления!
Несложно же?)

Либо , а лучше все четыре, потому что многие элементы 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. Этот элемент должен смотреться последующим образом:

Компания 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-го абзаца и выровнен налево. Сейчас следует придать тексту более приятный вид.

Инструкция

Скопируйте в блокнот теги, приведенные ниже, они необходимы для создания .






Переходите к созданию каркаса сайта. Каркас создается с помощью таблицы 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.

: HTML - язык разметки гипертакста (или язык гипертекстовой разметки).

Так давайте познакомимся с ним поближе.

Для начала создайте у себя на компьютере файл с любым названием и расширением.html (название должно быть на английском языке - например index.html). Что бы создать такой файл - создайте обычный текстовый документ ("Пуск" - "Все программы" - "Стандартные" - "Блокнот") и сохраните ("Файл" - "Сохранить как") его в любом месте, введя название и расширение (бывает, что при введении расширения блокнот все равно сохраняет его как текстовый файл, а нам нужет web файл. Для этого перед сохранением выберите тип файла - "Все файлы(*.*)").

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

При правильном сохранении, значок файла должен поменяться на значок браузера (по умолчанию Internet Explorer).

Теперь откройте этот файл через блокнот и скопируйте туда такой код.

Это первая web-страница!

Сохраните и откройте через браузер.

Поздравляю, вы только что создали свою первую web-страницу.

Текст "Это первая web-страница!" можете поменять на любой другой, например так - "Это моя первая web-страница!!!". сохраняем, обновляем браузер, любуемся результатом.

Но у нашей страницы нет загаловка.

Надо это исправить - немного подправим код, вернее добавим в него "Голову сайта", используя теги и .</p><p> <html> <head> <title>Первая страница Это моя первая web-страница!!!

Сохраняем, обновляем, любуемся. Теперь у нашей страницы есть загаловок.

Описание тегов.

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

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

Тег </b> - парный тег (<title> и ), необходим для указания заголовка страницы. Причем этот тег нужно размещать только внутри тега !

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

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