Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

А также:


Как создать веб страницу в блокноте html


Как быстро создать простенькую web страничку

Здравствуйте, дорогие читатели! Пожалуй, у всех интернет пользователей во время прогулок по бескрайним просторам сети рано или поздно возникает желание оставить там что-то своё, донести людям своё мнение на те или иные вещи.

Заявить о себе в Интернете можно, опубликовав свою web-страницу, как это в своё время сделал и я.

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

Что такое web-страница?

Гипертекстовый документ либо веб-страница представляет собой текстовый файл, размеченный тегами при помощи языка HTML (HyperText Markup Language).

Все представленные там объекты воссоздаются браузером по написанным данным инструментом инструкциям, которые были присланы по его запросу сервером. Для внесения в документ разметок применяются теги, которые заключают в угловые скобки. Как правило, они парные, то есть имеется открывающий и закрывающий, а между некая информация.

К примеру, тег, говорящий браузеру, что ниже находится документ на HTML языке, имеет следующий вид: . А закрывающий, говорящий, что тут код заканчивается, выглядит так: . Таким образом, единственным отличием закрывающего тега от открывающего является наличие слэша после скобки открытия.

Данный язык разметки позволяет форматировать текст web-страницы, устанавливать на ней рисунки, графические элементы, создавать гипертекстовые ссылки, добавлять мультимедийные элементы, звукозаписи, скрипты (VBScript, JavaScript).

Чтобы узнать, что из себя представляет этот язык, вовсе не обязательно лезть в скучные учебники. Мне лично вполне достаточно было открыть мой браузер, и выбрать опцию «Посмотреть исходный код» (нажать правую кнопку мыши). Представленные в окне строчки кода и есть тот самый html-код. Именно этот код браузер в дальнейшем трансформирует в web-страницу.

Но учебники, конечно же, почитать придется, если вы решите серьезно разобратся с такими языками как html, php и другие.

Виды страниц в Интернете

Существует три типа веб-страниц:

  1. Интерактивные. Они включают в себя формы, сформированные на языках VBScript, JavaScript, РНР, при помощи которых сервер обменивается с пользователем данными;
  2. Динамические. Они написаны на языке ASP, РНР с разрешениями .aspx, .php. Данные страницы создаются движком либо особой программой, формирующей по пользовательским запросам web-страницу, используя при этом данные с сервера базы данных;
  3. Статические. К ним относятся статические файлы (рисунки, таблицы, набор текста и прочее), сформированные на языке разметки HTML.

Как создать?

Для создания веб-страниц используются редакторы html: FCKeditor, TinyMCE WYSIWYG Editor, Macromedia Dreamweaver, Microsoft FrontPage и прочие. Во всех этих редакторах имеется масса различных мастеров, дающих возможность с лёгкостью создавать web-сайты, а также шаблоны для страничек с дизайном и структурой. С их помощью можно быстро создать собственную web-страницу.

Но для любителей всё делать самому, можно воспользоваться и простым блокнотом, который по умолчанию уже установлен на любом компьютере.

Инструкция:

  1. С помощью текстового редактора создаём файл. Это первое, что необходимо сделать. В блокноте создайте пустой файл под названием index.html. Именно эту страничку сперва ищет сервер, если вы вводите адрес ресурса без указания определённой web-страницы сайта.
  2. Сформировать инструкцию. Помещённый между тегами и   код должен состоять из двух частей – тела документа и заголовка.
  3. Делаем заголовок. Открывающие и закрывающие заголовочную часть теги:  и . На этой «служебной» части страницы находятся данные для заголовка окна, описания, слов-ключей для поисковых систем, скриптов, описания стилей и прочее. Между этими словами прописываем заглавие окна страницы с помощью тегов:  и . Ваша веб-страница к этому моменту должна иметь следующий вид:
    1 2 3 4 5 заглавие

    заглавие

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

Итак, код в общем должен иметь следующий вид:

1 2 3 4 5 6 7 8 заглавие Тело веб-страницы

заглавие Тело веб-страницы

Поздравляю! Теперь вы знаете, как создать свою собственную веб-страницу, хоть и самую простую! Только не забудьте сохранить документ, иначе все ваши труды пойдут прахом и придётся всё делать по новой.

Сейчас существует множество визуальных редакторов html кода, благодаря которым можно создавать интернет страницы, абсолютно не зная язык разметки html. Но я считаю, что азы знать всё таки необходимо.

Мой блог кстати создан на бесплатной платформе WordPress. Плачу только за домен и хостинг — это совсем немного. Хотите узнать больше? Вот ссылка.

Поделитесь своим опытом и полученной информацией с друзьями в соц. сетях. Не забудьте подписаться на обновления, до встречи!

С уважением! Абдуллин Руслан

Понравился блог? Подпишись, чтобы получать новые статьи на почту и быть в курсе всех событий!

abdullinru.ru

Как создать простейший сайт в блокноте

Опубликовано автор admin — Оставить комментарий

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

Но, если нам необходимо создать веб страницу, то этот способ имеет право на существование.

Для того, чтобы создать простой сайт нам понадобится программа «Блокнот», которая есть в каждом компьютере.

Нажимаем в левом нижнем углу на кнопку «Пуск» и выбираем «Все программы». Находим «Блокнот» и открываем двойным щелчком левой кнопки мыши.

Давайте что-нибудь напечатаем.

Например: Ура! Я сделала свой сайт!

Теперь нам надо эту запись сохранить. И сделаем мы это следующим образом: нажимаем «файл» —> «сохранить как».

Называем файл «index.html»,выбираем «все файлы» и сохраняем на рабочем столе.

После сохранения появится вот такой значок.

Если мы откроем этот файл, то в браузере увидим веб страницу, которую мы создали.

Чтобы отредактировать нашу запись правой кнопкой мыши щелкаем по значку и в контекстном меню выбираем «Открыть с помощью» —>«Блокнот».

После того, как будут внесены изменения, не забываем сохранять файл. Открыв файл в браузере мы увидим изменения.

Чтобы сайт был виден всем в интернете, надо его загрузить на хостинг.

Таким образом, можно сделать простейший веб ресурс.

Чтобы приукрасить сайт картинками и гиперссылками, а также добавить красок, изменить размер шрифта, добавить таблицу и т.п., придется применить язык HTML, который будет понимать браузер.

Именно поэтому мы и сохраняли наш файл с расширением .html.

Теги для создания сайта на html в блокноте

Для начала неплохо бы узнать, что представляет из себя страница веб сайта.

Это текстовый документ, написанный на языке гипертекстовой разметки (html).

Чтобы понимать, что это такое следует ознакомиться с общими терминами.

HTML – это способ разметки документа, который одинаково интерпретируется различными браузерами в удобной и понятной для пользователя форме. В основе языка лежат определенные структурные элементы – теги. С их помощью и оформляется html – документ.

Часто применяемые

Теги бывают:

  • парные
    , , т.е. открывающиеся , и закрывающиеся теги
    , . Закрывающийся тег – дескриптор со знаком слеша (/);
  • непарные.

Основные виды и назначение тегов

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

    . С их помощью текст можно разбить на подзаголовки различных уровней, что позволяет определить их важность по отношению к всему документу.
  • Тег  в отличие от предыдущих — непарный. Применяется для обозначения перехода на новую строку в документе.

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

На основании выше изложенного созданная нами страница на языке html, примет следующий вид:

Далее сохраняем страницу с расширением html, после чего, открыв ее в любом браузере, мы увидим следующее:

Таким образом, создать сайт в html в блокноте достаточно просто.

Чтобы сделать страницу более привлекательной понадобится не только ознакомиться подробнее с синтаксисом языка html, но и изучить CSS.

Эта запись была размещена в Seo продвижение автор admin постоянная ссылка.

seitostroenie.ru

Создание сайта html в блокноте. Основы

От автора: все когда-то начинали изучение html с создания простейшего сайта в блокноте. Хотя эта программа совсем не подходит для разработки веб-сайтов, но создать в ней что-то примитивное все же можно.

Итак, как создать сайт в блокноте на html? Это является вполне выполнимой задачей. Конечно, намного удобнее и правильнее использовать для этого специальные программы, вроде Notepad++, но для первого раза можно обойтись и блокнотом. Я не буду вас отговаривать – хотите создать сайт в блокноте? Создавайте. Как? А вот об этом давайте поподробнее.

С чего нужно начинать для создания сайта html в блокноте

Любой сайт создается в первую очередь с помощью html-тегов. Это язык, который используют для разметки веб-страниц. Зачем он нужен? Он необходим браузерам, которые умеют читать и понимать его, формируя страницу в согласии с тем, какой код написан.

К примеру, захотите вы на вашей страничке вывести список. А как собственно сказать браузеру, что это должен быть именно список, а не обычный текст? В ворде, например, есть кнопки маркированного и нумерованного списков. В html специально для этого есть свои теги. Заключив нужный текст в эти теги, браузер уже понимает, что это список. Естественно, такая же логика и с размещением других элементов.

Для начала нам нужно создать в блокноте два файла. Один нужно назвать index.html, а второй – style.css. Заметьте, .html и .css должны быть расширениями файла, а не его именем. То есть не style.css.txt, а именно style.css. Сами имена файлов могут быть и другими, просто я взял самые популярные.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Зачем эти самые файлы нужны? В html-файлы мы будем описывать структуру сайта, а в style.css – его внешний вид. Html и css – это языки, которые обязательно нужны для создания сайта. Как для человека иметь и правую руку, и левую. Скажет ли он, что ему хватит одной руки? Конечно, нет. Так же и с этими двумя языками, но которых стоит все сайтостроение.

Начинаем создавать сайт

Привет, мир Привет, мир!
Привет, мир

Итак, это уже небольшой код, который и создаст нашу первую веб-страничку. Как видите, он почти полностью состоит из тегов.

Рис. 1. Сравнение внешнего кода в блокноте и Notepad++. Как видите, левее все гораздо понятней и красочней.

Самые основные теги

Нужно объяснить эти простые теги для создания сайта html в блокноте. Изучение html заключается в изучении тегов, с помощью которых строится сайт. Ну а пока я объясню, что означают уже написанные теги:

Первая строка просто указывает тип документа. Рекомендуется ее указывать, чтобы все правильно работало.

html — парный тег контейнер всей веб-страницы в целом. В нем будет содержимое всей страницы в целом. Как видите, он закрывается в самом конце.

head — тег, в котором размещается разная информация, которая не будет выведена на сайт, но имеет важное значение для его правильной работы. Например, здесь мы уже прописали кодировку и название страницы, которое выведется в верхней строке браузера.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

meta — тег для мета-информации. Такой, как кодировка, метатеги и т.д. В данном случае мы задали кодировку utf-8.

title — название страницы.

link — с помощью этого тега к страничке можно подключить другие файлы. Так мы подключили таблицу стилей css. Сейчас не будем конкретно разбираться во всех его атрибутах. Скажу только, что href – это путь к файлу. Чтобы все работало index.html и style.css должны лежать в одной папке.

На этом наш тег head закрывается. Кстати, вы заметили, что тег meta мы не закрыли? Все потому, что в html есть как парные, так и одинарные теги. В парные можно записать какое-то содержимое, в отличие от одинарных.

Далее открывается тег body. Если вы хоть немного в ладах с английским, то понимаете, что это переводится как тело. То есть в body мы размещаем информацию, которая непосредственно будет выведена на экран – тело страницы. Напишем здесь стандартную фразу. Теперь самое время проверить нашу страничку. Откройте index.html в любом браузере. Если вы видите там пустой экран и фразу: “Привет, мир!”, значит, все получилось. Осталось только проверить подключение файла style.css.

Этот файл у нас все еще пустой. Скопируйте туда такой код:

Рис. 2. Это уже, по сути, веб-страничка, хоть и самая примитивная.

Сохраняйте и опять открывайте страницу в браузере. Если вы видите фразу на фоне красного цвета – все работает. Можно начинать работу над созданием своего сайта. В css мы указали команду сделать красный цвет фоном всей нашей страницы. Теперь понимаете для чего он нужен, этот css?

Вот так вот мы и будем создавать сайт: формировать элементы в html, потом оформлять их через css и в конце концов получим что-то, похожее на сайт.

Структура сайта

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

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

Нам остается только разобраться, как с помощью html можно эти элементы явно задать, а потом прописать им какой-то внешний вид. Об этой, более подробной и практической части создания поговорим в следующей статье, потому что тема слишком велика, чтобы описать ее на одной странице.

Ну а вообще, разработке сайта в блокноте – не самый удобный способ, как я уже и говорил. В дальнейшем, если вы захотите серьезно заниматься сайтостроением, то вам в любом случае понадобится более серьезная программа вместе с уроками, которые позволят изучить нужные технологии. А в следующей статье мы продолжим создание сайта с помощью html в блокноте и сделаем нашу страничку более похожей на настоящий сайт.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

webformyself.com

Мир создавался 6 дней, чтобы создать html страницу в Блокноте нужно 26 минут

…на первый день Бог создал свет и отделил его от тьмы;

на второй день — создал твердь и воду, на третий — сушу и растения,

на четвёртый — небесные светила, на пятый — птиц, рыб и пресмыкающихся,

наконец, на шестой — животных и человека…

А человек подумал, и решил создать сайт в Блокноте Windows

Здравствуйте, уважаемые друзья! Вы, конечно же, прекрасно понимаете то, что создание сайта в Блокноте, у нас с вами займет чуть более, чем 26 минут. Но, именно небольшим сроком, мне хотелось вас подбодрить, и успокоить.

Ведь глядя на эти символы, знаки и атрибуты языка HTML, у многих пользователей пропадает желание вообще браться за создание своего сайта для заработка в интернете. Мы с вами не боги, мы обычные пользователи, которых объединяет одно желание: научиться сложному, но интересному делу – создание сайта на языке html.

Поверьте мне. Ведь я не родился со Знанием. И первым моим словом, было отнюдь не слово «интернет». Но, я захотел и научился тому, что умею сейчас, и с удовольствием делюсь с вами своими знаниями.

Внимание! Продолжая при этом, учиться и постигать премудрости интернета, основы сайтостроения и методы и возможности заработка в интернете при помощи сайта. Чего и вам желаю. Итак, теперь к делу.

Стоп! Нет. Хочу показать вам пример создания сайта по простейшей технологии использования языка HTML. Сайт создан на заре интернета в 1994 году и работает до сих пор. Просто работает. Сайт lib.ru – является ярким примером  создания сайта с использованием стандартных функций и возможностей языка HTML. без всей разноцветной мишуры.

Как просто и бесплатно создать сайт в Блокноте

Почему я применил слово «бесплатно»? Дело в том, что большинство программ для создания сайта, типа Dreamweaver, графических редакторов: Photoshop, являются платными. Более того, на их изучение у вас уйдет не один день. Потом, когда вы станете профессиональным верстальщиком сайтов, вам, естественно, понадобятся подобные программы.

Но, это потом, а сегодня   мы рассмотрим пример создания сайта html в Блокноте, который существует в вашем компьютере. Если вы еще об этом не знали. Это простейший инструмент, позволяющий создавать: элементарную страницу html для ваших нужд.

По правде говоря, в последующем вы не будете создавать сайт html в блокноте. Слишком много времени это у вас займет. Но, для того, чтобы освоить азы языка HTML, подобный урок вам будет только на пользу.

Почему именно создание сайта в Блокноте, а не в Notepad++, например, — спросит более менее продвинутый пользователь. Ведь NOTEPAD++  можно скачать бесплатно. Да и функционал у него боле расширен. Без сомненья – это так.

Но, вновь это «но»! Создание html страниц, равно как и создание сайтов, требует знания основ. Вот именно поэтому мы с вами и тренируемся «на котятах».  Урок по созданию сайта в Блокноте рассчитан на новичков. Всё, достаточно объяснений.

Где-то тут в компьютере был Блокнот?

Кстати, кроме Блокнота, у вас в компе ещё может заваляться такой текстовый редактор, как  Wordpad. Но, мы все же к Блокноту. Давайте его и найдем в дебрях нашего «железа».

Нажимаем в меню на 1. Пуск – 2. Все программы – 3. Папку Стандартные и 4 Блокнот. Вот вы его и нашли  — штатный Блокнот Windows 

После нажатия на значок Блокнота, вашему вниманию предстанет простое с виду окно, в котором мы и будем создавать первую html страницу своего будущего сайта. На скриншоте я специально открыл вкладку Файл, для того, чтобы вы увидели, что интерфейс вам знаком.

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

Пошаговое создание сайта в Блокноте

Итак, Блокнот открыт, урок создания страницы html, вы повторили. Теперь вы вновь набираете в Блокноте все эти атрибуты html документа, с которыми уже знакомы. Не нервничайте, ведь повторение – мать учения. Особенно в таком мероприятии, как создание сайта в Блокноте.

После набора нажимаете в Блокноте: Файл – Сохранить как. Я сохранил этот файл на рабочем столе, назвав его mysite.html (с расширением html обязательно).

А теперь, когда с созданием страницы html, все более менее ясно, приступим к рассмотрению вопроса, как создать сайт в Блокноте.

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

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

Как создать таблицу html для страницы сайта

В таблице, как и во всем html документе используются теги:

  • и
    — для описания таблицы используется парный тег. Соответственно первый – для открытия таблицы в браузере, второй для её закрытия.
  • — теги для создания (описания) строки таблицы.
  • и  - теги для создания столбца страницы.

На примере вы видите, как используются теги для описания разных таблиц. Надеюсь, что принцип вам понятен.

Наполняем ячейки таблицы – каркаса сайта содержимым

Теперь нужно заполнить ячейки нашей таблицы содержимым (контентом сайта). Важно, запомните раз и навсегда: содержимое таблицы записывается только(!) между тегами и , и никак иначе. Посмотрим наполнение таблицы на примере: 

Устанавливаем размеры таблицы и цвета

Для того, чтобы ячейки таблицы имели именно тот размер и цвет, как и положено, мы используем теги HTML.

  • Для задания размеров в html документе используются атрибуты: width и height, соответственно ширина и высота объекта (в нашем случае – ячейки таблицы). Например: width=»450″ height=»250″
  • Кроме того, чтобы таблица была видна на странице, задается такой параметр, как border, например:  border=»1″
  • Для того, чтобы описать фон таблицы или отдельных ячеек, или страницы вашего сайта, созданного в Блокноте, используется такой атрибут html, как бэкграунд (bg). Например: bgcolor=»#CCCCCC» – цвет ячейки, либо цвет фона таблицы

На примере вы можете увидеть, и попробовать создать такой образец:

  • Таблица заданной высоты и ширины.
  • Ширина и цвет левого столбца таблицы.
  • Фон таблицы

Практический пример создания html страницы сайта в Блокноте

Ну, а теперь, коллеги, приступим к практическому созданию сайта в Блокноте. Для этого вы открываете Блокнот – нажимаете Файл – Открыть и открывается созданный вами вначале занятия файл. Вносите в него самостоятельно вручную (да и сложно со скрина копировать), следующие теги HTML и материал. 

Одновременно с размещением, мы с вами разберем по частям тот html доумент, который создаем в Блокноте. Для удобства использования я вам представлю скрины с Notepad++, чтобы можно было разъяснить некоторые шаги по пунктам.

  • 1 – 5 стандартное описание вида языка Html (доктэйп), заголовок сайта, который будет отражаться во вкладке браузера;
  • 6 этим параметром мы определили цвет страницы и цвет текста страницы;
  • 8 заданы размеры верхней горизонтальной части таблицы;
  • 9-13 – содержание верхней части сайта
  • 14 активная ссылка на мой сайт delaydengi.com
  • 15-17 – теги, закрывающие ячейку и таблицу

Идем далее, и рассмотрим нижнюю таблицу страницы html, вашего сайта созданного в Блокноте:

  • 18 размер нижней таблицы
  • 20-29 содержание левой ячейки таблицы, структурированное маркерным списком с применением парного тега
  • 30 параметры правого блока нижней таблицы, аналогичные верхнему описанию

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

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

Теперь и я уверен в том, что у вас всё получится, и вы сможете создать свой сайт, для того, чтобы начать зарабатывать деньги в интернете. 

Удачи вам, друзья. До следующих уроков.

delaydengi.com


Смотрите также



Компьютерные курсы по направлениям:

Для начинающих


A

Компьютер для начинающих: Word, Excel, Access и другие программы!

Графические пакеты


B

Популярные пакеты Adobe Photoshop, CorelDraw, ArchiCAD, AutoCAD и другие!

WEB + анимация


C

Курсы по созданию сайтов, WEB-дизайну и крутой анимации в Adobe Flash!

Бухгалтерия + делопроизводство

Сетевые технологии


E

Курсы сборки ПК, системных администраторов и защиты информации!