Как создать сайт в блокноте HTML — пример и инструкция
1.Создайте текстовый документ.
2.По желанию переименуйте файл (у меня он будет называться first-page) и обязательно задайте ему расширение .html вместо .txt).
3.Откройте документ программой Блокнот, Notepad, Notepad++ или другом текстовом редакторе, желательно с подсветкой синтаксиса.
4.Скопируйте и вставьте в него следующий текст.
<!DOCTYPE html> <html> <head> <title>Моя первая страничка</title> </head> <body> Тело HTML-документа (отображается на экране) </body> </html>
5. Сохраните изменения в файле.
6. Откройте first-page.html, только уже не в Блокноте, а в любом доступном вам браузере. На экране должно отобразиться примерно следующее:
Взгляните на html-код своей первой веб-страницы. Посмотрите на результат его работы (страницу в браузере). Постарайтесь понять, за что какая строчка кода отвечает.
Теперь проверьте, правильно ли вы этот код поняли. Рассмотрим его.
<!DOCTYPE html>
Это тег, с которого должен начинаться любой html-документ. Он даёт понять интернет-обозревателю, с какой версией языка разметки тот имеет дело. Без этой строки браузер может начать неправильно обрабатывать код. Написав , мы идентифицировали файл как документ стандарта HTML 5, и браузер, проанализировав первую строку, будет обрабатывать остальной код в соответствии с заданным стандартом.
<html> </html>
Даёт понять интернет-обозревателю, что всё, находящееся между открывающим и закрывающим тегами — html-код. Вообще использовать эти теги не обязательно, но принято.
<head> </head>
«Head» с английского — «Голова». Этот контейнер содержит теги со вспомогательной информацией для веб-браузеров и поисковых систем. Здесь можно задать файлы скриптов, таблицы стилей, ключевые слова и
<title>Моя первая страничка</title>
Заголовок страницы.
Открыв документ в браузере, вы наверняка обратили внимание на имя вкладки. Браузер вывел его на экран. Заголовок важен не только для поисковых систем, но и для людей, ведь он помогает понять, о чём страница.
<body> </body>
«Body» — тело. Таким образом у любого html-документа есть голова, содержащая вспомогательную информацию, и тело, внутри которого находится основной код документа. Так как наша страничка — первая, она не должна быть сложной, и поэтому тело документа содержит только текст «Тело HTML-документа (отображается на экране)»
Вы можете поменять надпись на любую другую, и она отобразится в браузере. На экран будет выведен любой находящийся между тегами
<body>
и
</body>
текст (если только это не теги), так что поздравляю, простые html-странички вы создавать уже научились. Внимательный читатель мог задуматься, почему теги расположены именно так:идёт перед, но закрывающий находится перед закрывающим. Чтобы это понять, рассмотрим предложение: Сайт полезный (называется «Яндекс» (кажется так)).
Кавычки расположены внутри скобок, вторые скобки закрываются перед первыми. Правила вложенности в HTML совпадают с правилами вложенности в русском языке. На основе рассмотренного html-шаблона можно создавать другие страницы, просто меняя информацию внутри контейнеров.
Это был простой пример создания сайта через блокнот, более сложные проекты можно делать с помощью визуального редактора HTML.
Полезные ссылки:
- Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
- Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
- Вёрстка сайта с нуля 2.0 — полноценный платный курс;
- Создание приложений для Android — для тех, кто давно хотел попробовать себя в мобильной разработке (не для новичков).
Бесплатные веб-шаблоны
Шаблоны web сайтов — это практически готовый сайт, который не требует знания html, css или javascript, достаточно изменить заголовки, логотип (эмблему), наполнить шаблон контентом и можно загружать страницы в Интернет, сайт готов.
Шаблоны веб сайтов универсальны, на основе веб-шаблона можно создать сайт практически для любого проекта, например, для:
- Отображения личной информации.
- Продажи продуктов в онлайновом режиме.
- Отображении информации о компании или услугах.
- Отображения галерей фотографий.
- Размещения музыкальных файлов.
- Онлайнового размещения видео.
Все шаблоны веб-страниц изготовлены участниками проекта «HTML-pedia», Вы можете распоряжаться веб шаблонами, как вам угодно, но при условии, что ссылка на изготовителя веб-шаблона должна быть сохранена, или хотя бы имелась на одной из страниц сайта, например, на странице с ссылками.
Веб шаблон «Автомобили», Скачать шаблон | Веб шаблон «Автомобили», Скачать шаблон |
|---|---|
Дизайн квартир, домов — смотреть Скачать шаблон | Актеры кино — смотреть Скачать шаблон |
Актеры кино- смотреть Скачать шаблон | Дизайн интерьера — смотреть Скачать шаблон |
Веб шаблон — Актеры кино. |
|---|
Шаблон состоит из страниц: главная, обои (фотогалерея), карта сайта, также в шаблон входит гостевая книга. Здесь вы можете на шаблон смотреть, а здесь скачать веб шаблон — Актеры кино. Архив весит 675 кБ, не пугайтесь, тяжесть архива от 6-ти вложенных в него обоев для рабочего стола.Как работать с веб шаблоном?
После того как вы скачали шаблон, вам возможно захочется что-то изменить в дизайне шаблона, или даже полностью заменить дизайн веб-шаблона на свой собственный. Даже не зная html и css вы можете это легко сделать. Для этого вам нужно будет лишь заменить шаблонную графику на свою, сохранив пропорции и расширение (.gif, jpg, png) изображений.
Также вам потребуется заменить общую информацию, содержащуюся в веб-шаблоне на свою личную информацию, об организации, продукте или услугах. Для это нужно щелкнуть по иконке веб-шаблона правой кнопкой мыши и выбрать в контекстном меню «Открыть с помощью» и наведя курсор на слово «Блокнот» щелкнуть левой кнопкой мыши.
Веб шаблон откроется в блокноте в виде обычного текста, в котором вы можете делать изменения, заменяя текст шаблона на свой.
Еще проще работать с шаблоном открыв его с помощью любого визуального редактора, например, в таких как: «Frontpage», «Dreamweaver», или NVU. С их помощью вы сможете легко изменять и обновлять информацию в веб шаблоне.
Страницы: 1 | 2 | 3
Как создать веб-сайт с помощью HTML в Блокноте
Пошаговое руководство по созданию веб-сайта с помощью HTML в Блокноте
Шаг 1: Откройте Блокнот.
Откройте приложение «Блокнот» на своем компьютере. Это базовый текстовый редактор, который можно использовать для создания HTML-документов.
Шаг 2: Создайте структуру документа.
Создайте структуру документа для своего веб-сайта, введя следующий код в Блокнот:
<голова>
Название веб-сайта
<тело>
Содержимое будет здесь.