Как создать сайт в блокноте?
Если вы думаете, что создание сайтов – это сложное занятие, вы ошибаетесь. Для этого совершенно не нужно изучать горы литературы и запоминать тысячи специфичных кодов. Достаточно проделать ряд несложных действий, и у вас появится самый первый сайт, который вы сделали своими руками. Мы предлагаем вам в этом убедиться, создав по пошаговой инструкции самый простой сайт, это займет у вас всего несколько минут. Создать сайт самостоятельно с Wix.com
Инструкция
Скопируйте код каркаса к себе в блокнот.Шапка сайта
Меню сайта
Область под контент
Подвал сайта
Вставьте адреса ссылок в теги., они нужны для перехода на другую строчку.Ваш первый двухстраничный сайт готов!Совет добавлен 27 мая 2011 Совет 2: Как создавать сайт в блокноте На сегодняшний день в интернете существует гигантское количество различных интернет сайтов. Бытует мнение, что создание сайтов это очень сложный процесс, однако это не так! Научиться писать простейшей код, например, для «Сайта визитка» (сайт из 2 – 3 страниц созданный только при помощи HTML) может каждый. Любой желающий может создать своё личное представительство во всемирной паутине. Обычно для создания сайтов используют специальные программы, сделать это можно и в обычном Блокноте. В последнем случае понадобится знание языка HTML(HyperText Markup Language — «язык разметки гипертекста»), а так же языка описания внешнего вида документа CSS(Cascading Style Sheets — каскадные таблицы стилей).
Инструкция
Используя блокнот можно создавать и более сложные сайты из множества страниц, используя специальные языки программирования.
- создание сайтов в блокноте примеры
Как создавать сайт в блокноте — версия для печати Оцените статью!
УЧЕБНИК HTML для новичков — Фон для web-сайта
Главная >> Уроки HTML
Bgcolor и Background
Ну, что же… пришла пора определиться, на чьем же фоне мы будем умопомрачающе выглядеть! И где же тот чудесный тег, который за это дело отвечает? Какие у него есть, выражаясь умным словом атрибуты? И, главное, каким образом разместить всю нашу красоту?
Короче, вопросов — множество! А ответ всего один.
Ну нету такого тега вообще! Еще не придумали!
Но не огорчайтесь! Нет тега и не надо! Зато есть два чудесных атрибута известного нам дескриптора BODY. Так что встречайте старого знакомого!
Фон, или как принято называть задний фон в переводе на английский означает background. Поэтому нет ничего проще запомнить два атрибутика, созданных в его честь. Один — background, а другой — bgcolor.
Так чем же они отличаются? Какими возможностями обладают? И, главное, чем будут нам полезны?
Начнем, с самого простого — bgcolor. Этот атрибут отвечает за цвет фона. Вы можете подставить любое значение, в буквенном или в числовом значении цвета и ваш фон окрасится как по волшебству.
Что ж, ради примера можем открыть наш шаблон, либо любой, созданный нами ранее файл и попытаться залить страничку любимым цветом. Я же открою свою страничку index.html в NotePad (Блокнот) и внесу следующие изменения:
Листинг 11.
Файл index.html
<HTML>
<HEAD>
<TITLE>Моя Домашняя Страничка</TITLE>
</HEAD>
<BODY bgcolor=blue>
<IMG src=»foto/myfoto01.jpg»>
Ура! Привет мир! Привет люди! Встречайте!
</HTML>
Сохраним наше творение под тем же именем и посмотрим, что получилось:
Я на синем фоне
Если по каким-то причинам вам не нравится голубой фон, можете взять другой цвет, например розовый, можете даже писать цвет не буквами, а числами. Только не забудьте впереди числа поставить решетку. И все у вас получится! Можете поиграть разными цветами, пока не надоест. А как надоест, будем читать дальше про другой атрибут — background.
Этот атрибут указывает не на цвет изображения, а на картинку, которую стоит поместить в качестве фона, или как еще говорят, фоновых обоев. Обои можно подобрать любые, какие только подскажет вам фантазия.
Моя фантазия подсказала мне взять картинку, на которой я в новом пиджаке. А потому, не мудрствуя лукаво, открываю свой файл index.html и делаю следующие изменения:
Листинг 12. Файл index.html
<HTML>
<HEAD>
<TITLE>Моя Домашняя Страничка</TITLE>
</HEAD>
<BODY background=»foto/myfoto01.jpg»>
<IMG src=»foto/myfoto01.jpg»>
Ура! Привет мир! Привет люди! Встречайте!
</BODY>
</HTML>
Сохраняем этот файл и смотрим, что у нас получилось
оно — фоновое изображение!
Что ж, с одной стороны, приятно видеть столько умных людей в одном месте, но с другой стороны… ну куда столько??? Однако, отбросив шутки в сторону, можно понять, что же сделал атрибут background — он просто взял и размножил исходное изображение, заполнив им весь экран.
Но нельзя ли загрузить одну картину, но на весь экран? В принципе, можно! И мы сейчас этим займемся.
Поэтому я опять открываю программу Adobe Photoshop, выбираю фотографию с изображением моря, подгоняю его размеры под искомые 781 х 476, оптимизирую для web и сохраняю под именем fonsea.jpg в своей папке foto. Ну и затем, иду проторенным путем: открываю файл index.html и ввожу следующие изменения:
Листинг 13. Файл index.html
<HTML>
<HEAD>
<TITLE>Моя Домашняя Страничка</TITLE>
</HEAD>
<BODY background=»foto/fonsea.jpg»>
<IMG src=»foto/myfoto01.jpg»>
Ура! Привет мир! Привет люди! Встречайте!
</HTML>
Опять сохраняем и смотрим результат
И вот оно — море! Играет, шумит на просторе…
Красиво, правда? Вот если бы это разрешение экрана было установлено у всех пользователей! Но, увы! Стоит мне увеличить разрешение до 1152 х 864 и получается уже следующая картина:
Печально я гляжу на это отраженье.
..Согласитесь, это совсем не то, что хотелось. Конечно, красота требует жертв, и вы можете спокойно откинуть тех пользователей, чье мнение о разрешении экрана не совпадает с вашим, либо предложить им выбрать настройки, которые вы им укажете. Решать, в конечном счете, только вам.
Хотя бывает красота и без жертв. Которая великолепно будет смотреться на всех мониторах без исключения. И я попытаюсь в этом помочь. Как вы заметили, фон заполняется копиями рисунка. И этим свойством не грех и воспользоваться. Мы ведь можем сделать одну маленькую картинку, которая займет памяти намного меньше большой, и заполним ею весь экран. Тут главная хитрость постараться сделать эту картинку «без швов». То есть, чтобы не было видно стыков между соседними изображениями. И для этого нам опять понадобится незаменимая программа
Конечно, можно особо и не утруждаться, и взять готовые фоновые картинки из Интернета, где они просто кишмя кишат.
Для этого можно набрать в любой поисковой системе (www.yandex.ru, www.apport.ru, www.ramber.ru и многих других) заветные слова (фон, фоновые обои, background) и к вашим услугам предстанут десятки и десятки сайтов, готовые отдать вам эти фоны за ради бога, и что особо радует, совершенно бесплатно.
Только не удивляйтесь потом, что точно такой фон вы найдете и на других сайтах. Так что если вы хотите сделать что-то, пусть и сопливое, но СВОЕ, предлагаю закатать рукава, и взяться за дело. Тем более это очень увлекательное занятие, от которого просто трудно оторваться.
И этим делом мы сейчас и займемся.
Руководство для начинающих по веб-дизайну
Введение
Добро пожаловать на обучение созданию собственного веб-сайта! Начало работы с дизайном веб-сайта поначалу может показаться немного сложным, но как только вы изучите основные строительные блоки архитектуры веб-сайта, создание собственного веб-сайта больше не будет казаться запутанным.
В этом кратком руководстве рассматриваются некоторые основные шаги и код, необходимые для создания простого веб-сайта. Как вы создаете веб-сайт? Вы используете язык гипертекстовой разметки (HTML) для настройки своего контента. Каскадные таблицы стилей (CSS) используются для эффектов стиля. Мы изучим базовый код HTML и код CSS для управления контентом, организации и советы по стилю. Мы рассмотрим эти другие шаги в учебнике после того, как вы закончите шаги. Теперь, если вы похожи на меня, когда я только начинал, вам интересно, как мне вообще начать программировать с помощью HTML? Ну, вам нужна программа для написания кода. У меня есть ПК с Windows, и я могу скачать хорошую программу Notepad++ (и самое главное, что она бесплатная!). Еще одна хорошая программа — Adobe Dreamweaver, но за нее требуется ежемесячная или ежегодная плата. Вы также собираетесь использовать обычный старый блокнот, если у вас есть ПК с Windows, такой как я, для кодирования CSS, но вы также можете использовать для него Notepad++.
Ссылки для загрузки соответствующего программного обеспечения: Notepad++, Adobe Dreamweaver.
Введение в веб-дизайн
Прежде чем мы начнем изучать программирование, вам нужно остановиться, сесть и подумать о том, как вы хотите, чтобы ваш сайт выглядел, что вы хотите, чтобы он делал и как вы хотите, чтобы он работал все это для вас и ваших потенциальных посетителей. Важно помнить, что вы делаете дизайн не обязательно для себя, а для своих зрителей. Ваш сайт должен быть логичным, функциональным и эстетически привлекательным.
Хороший способ начать — это то же самое, что и планирование любого дела. Проводить некоторые исследования! Посетите некоторые из ваших любимых, наиболее посещаемых или наиболее популярных веб-сайтов. Есть функции и элементы дизайна, которые вам, должно быть, понравились или, по вашему мнению, упростили навигацию по веб-сайту. Так что садитесь и делайте заметки. Имейте в виду, что некоторые из этих элементов могут быть слишком сложными для вас прямо сейчас, но это не значит, что вы не сможете научиться их применять после того, как освоите базовые фундаментальные навыки.
Теперь набросайте несколько идей для собственного веб-сайта. Как вы хотите, чтобы это выглядело? Какова его цель? Точно так же, как при написании статьи, вы не можете начать, пока не узнаете, каковы ваши аргументы.
Отличный текст, который поможет вам понять, что входит в дизайн веб-сайта, — это The Elements of User Experience Джесси Джеймса Гарретта. Это легко увидеть на его сайте здесь.
Приведенная ниже инфографика отлично показывает, как начать творческий процесс и какие творческие и функциональные этапы следует учитывать на этом пути.
Вы ознакомились с инфографикой Гаррета? Это полезно, нет? Теперь, когда вы узнали немного об основах того, что необходимо для обеспечения удобного взаимодействия с пользователем с помощью самолетов Гаррета, пришло время приступить к изучению некоторых основ HTML.
Нажмите здесь, чтобы начать.
Using Notepad to Format Your Web Page
By: Bud E. Smith and
Updated: 03-27-2016
HTML, XHTML and CSS For Dummies
Explore Book Buy On AmazonОдним из способов создания и редактирования веб-страниц на собственном компьютере является использование текстового редактора, такого как Блокнот, который позволяет форматировать страницу с помощью тегов HTML.
Используя Блокнот для работы с HTML, вы вводите текст, добавляете теги HTML для разметки, сохраняете файл, а затем открываете его в Internet Explorer или другом веб-браузере. То, что вы видите при просмотре своего HTML-кода в IE, действительно будет тем, что увидят пользователи, просматривая ту же веб-страницу в том же веб-браузере.
При выполнении действий, описанных здесь, и в других случаях использования Блокнота не открывайте WordPad вместо Блокнота. WordPad хранит свои собственные скрытые коды форматирования среди набираемых вами текстовых символов, как и Word (но без большинства приятных функций).
Выполните следующие действия, чтобы начать использовать Блокнот в качестве средства редактирования HTML:
Нажмите кнопку «Пуск». Выберите «Пуск» → «Программы» → «Стандартные» → «Блокнот».
Блокнот открывается.
Нажмите Сохранить и продолжить. Сохраните документ под любым именем, которое вы выберете, но используйте суффикс .htm.
Файл будет сохранен как текстовый файл без кодов форматирования; суффикс .htm сигнализирует вашему веб-браузеру (а после загрузки файла — веб-серверам и т. д.), что файл является веб-страницей.
Если щелкнуть файл правой кнопкой мыши и выбрать «Свойства», откроется суффикс файла.
Откройте меню «Формат» и щелкните «Шрифт».
Появится меню Формат. Параметр «Шрифт», который вызывает диалоговое окно «Шрифт», позволяет изменить отображаемый шрифт, размер шрифта и форматирование (узко говоря: только полужирный, курсив или полужирный курсив).