197110, Россия, Санкт-Петербург, а/я 144, ООО «Юми» +7 (812) 309-68-23
При взгляде на огромное разнообразие сайтов, представленных в сети, у людей непосвящённых зачастую создаётся впечатление, что создание сайтов бесплатно самостоятельно — дело избранных. Тем не менее, как и любая дальняя дорога начинается с первого шага, а шедевр с первого штриха в альбоме, так и создание нового сайта начинается с малого, можно даже сказать, подручными средствами. А для этого нам понадобится всем известный инструмент и простейший текстовый редактор — Блокнот.
Что такое HTML
Дело в том, что странички сайтов, которые мы видим на мониторах и экранах гаджетов, по сути, являются не чем иным, а текстовыми документами, правда, созданными с использованием языка гипертекстовой разметки или HTML, а делать это можно в обычном Блокноте. Следует отметить, что HTML не относится к языкам программирования — это способ предоставления информации в виде «доступном для понимания» браузерами. Браузеры, выступая в роли переводчиков со своего на человеческий язык, интерпретируют страницы в HTML, в результате чего вы видите на экране не набор символов, а форматированный текст.
Как сделать Winlocker в блокноте
Вот как выглядит на экране домашняя страница сайта umi.ru:
А вот как её «видит» браузер:
Существуют и непарные теги, когда действие разовое и не относится к определённому участку текста, например, перенос строк, обозначаемый в HTML комбинацией
.
Основные виды тегов и их роль в разметке веб-страницы
- . С этого элемента начинается сайт. Он сообщает браузеру, что документ создан с помощью языка гипертекстовой разметки HTML. По большому счёту, этот элемент не обязателен, но его присутствие позволит избежать потенциальных проблем с отображением страницы;
- парный тег и сообщает о начале и конце каждой страницы;
- внутри между элементами парного тега и указывается всевозможная служебная информация о странице, в том числе, ее заголовок, указания на стили, использованные в ее оформлении, подключаемые скрипты, специальные метаданные;
- ещё один парный тег содержит заголовок страницы и находится внутри тега . Благодаря этому тегу браузер и поисковые роботы определяют название каждой страницы;
- область документа, отображаемая непосредственно на мониторе и видная пользователю, ограничивается парным тегом . На странице эта область следует за тегом .
- для добавления в текст ссылок служит тег , однако он несколько отличается от предыдущих своим видом и выглядит текст ссылки.
- абзацы в тексте обозначаются парным тегом
.
- для разделения текста при помощи подзаголовков различных уровней существуют парные теги , , , , , . Благодаря им можно выделять текст в зависимости от его важности.
- для выделения текста полужирным шрифтом служит парный тег .
КАК СОЗДАТЬ ВИРУС В БЛОКНОТЕ? 5 ПРОСТЫХ ВИРУСА!
Это всего лишь небольшая часть из всего разнообразия тегов, которых насчитывается около ста. Тем не менее, с их помощью уже можно начинать cоздание сайта через блокнот. Есть также ряд правил, по которым теги располагаются в документе. Для основных тегов, включая , , , , существует строгий порядок распределения, тогда как в блоке, ограниченном тегами , остальные теги комбинируются в зависимости от общего замысла и в соответствии со стандартами языка HTML.
Создаём сайт своими руками в Блокноте
Давайте попробуем научиться cозданию сайта через блокнот, чтобы были понятны роль и функции тегов, а также структура создаваемого документа.
Для работы с текстом сайта лучше работать не с традиционной программой «Блокнот», а со специальной его версией Notepad++, созданной как раз для написания кода. Скачать её можно с сайта разработчика. Всё описанное можно сделать и в обычном «Блокноте», но в Notepad++ работать с кодом гораздо удобнее.
Как уже говорилось, документ начинается с тега , который сообщает браузеру, как его интерпретировать. Это и будет первая строчка в коде вашего сайта.
Следующий шаг. Обозначьте начало и конец страницы, добавив тег во вторую строку и через несколько строк ниже. Все остальное содержимое будет находиться в пределах, ограниченных этим парным тегом.
Затем выделим в документе участок страницы со служебной информацией, добавив парный тег между тегами , как показано ниже:
Чтобы указать заголовок страницы, в пространстве между тегами и в одну строку напишите парный тег и вставьте между них заголовок (название сайта), например, «Создание сайта через блокнот».
А вот как её «видит» браузер:
Это будет единственная служебная информация нашего сайта. Далее приступаем к оформлению той части, которая будет видна на экране дисплея, выделив её тегами . Открывающий тег ставим в строке после тега , а закрывающий — перед тегом , обозначающим, как мы помним, конец страницы.
Теперь, воспользовавшись парным тегом
и
, в строке, следующей после тега , укажем заголовок нашей страницы, который будет показан пользователю. Между этими тегами добавим название страницы, например то же, что и у сайта — «Создание сайта через блокнот».
Если вы хотите в тексте сделать выделение полужирным шрифтом, воспользуйтесь парным тегом . В нашем примере выделим слово «HTML» — HTML.
Создадим подзаголовок. Для этого в новой строке пропишем парный тег в который вставим подзаголовок следующего блока текста, например, «Что такое теги».
Далее создадим еще один абзац текста, использовав уже знакомые нам теги
и
, вставив между ними отрывок из нашей статьи.
Не переживайте, что текст вышел за пределы окна — на экране компьютера или смартфона он будет автоматически подстроен под ширину страницы. Впрочем, если вы хотите сделать перенос, вставьте тег
— теперь строка будет заканчиваться именно в этом месте, а дальнейший текст начинаться с новой строки (на экране, но не в Блокноте). Так и поступим — разделим наш абзац переносом.
Наш наипростейший сайт, созданный с помощью блокнота, почти готов. Осталось сохранить документ в формате *.html. Теперь его можно открывать в любом браузере. Заметьте, после сохранения с расширением HTML содержимое файла выглядит несколько по-другому — теперь в нём выделены все теги и ссылки, а при помощи расположенных слева плюсов и минусов можно скрывать и раскрывать содержимое отдельных блоков, находящихся между парными тегами, к примеру, скрыть участок, ограниченный тегом .
Если всё сделано как следует, то результатом вашей работы должна быть вот такая HTML-страница, готовая для публикации в интернете, в результате чего получится вот такой маленький одностраничный сайт:
Конечно, создавать современный сайт через блокнот будет сложно, да и, при существовании специальных конструкторов и сервисов готовых сайтов, которые значительно упрощают процесс создания сайтов и экономят время, это вряд ли оправданно. Тем не менее, иметь представление о том, из чего состоит веб-страница, как она выглядит «без оболочки» будет весьма полезно. Кроме того, теперь вам по силам cоздание сайта через блокнот и вы всегда сможете сделать это, не обращаясь к услугам программистов.
Источник: umi.ru
Как написать программу через блокнот
Благодарю! А вообще я не понял, можно ли написать в блокноте код, и скомпилировать его, в итоге получить не ДОС программу, а программу с нормальным Виндосовским окном?
Регистрация: 22.05.2007
Сообщений: 9,475
Благодарю! А вообще я не понял, можно ли написать в блокноте код, и скомпилировать его, в итоге получить не ДОС программу, а программу с нормальным Виндосовским окном?
Пох где писать, главное — чем компилировать
Форумчанин
Регистрация: 05.06.2007
Сообщений: 529
я компилирую через dev c++, т.е она только досовские программки делает.
Сама себе режиссер
Регистрация: 27.04.2007
Сообщений: 3,378
Э-э. такого я еще не слышала. Думаю, что нельзя. Можно вопрос? А не проще вместо блокнота и компилятора пользоваться средой разработки Microsoft Visual C++? Вот там — да, можно.
Если я вас напрягаю или раздражаю, вы всегда можете забиться в угол и поплакать
Форумчанин
Регистрация: 05.06.2007
Сообщений: 529
Ну я привык работать вручную, в блокноте. Я даже html сайты пишу в блокноте
Форумчанин
Регистрация: 05.06.2007
Сообщений: 529
Может кто-нибудь дать пример маленькой программки, которая при запуске откроется в нормальном виндовс окне, где будет написан какой нибудь текст, и 2 кнопки (выход, продолжить). Просто мне намного легче разбираться на примере. Надеюсь на вашу помощь.
Форумчанин
Регистрация: 27.12.2006
Сообщений: 955
Э-э. такого я еще не слышала. Думаю, что нельзя. Можно вопрос? А не проще вместо блокнота и компилятора пользоваться средой разработки Microsoft Visual C++? Вот там — да, можно.
А можно тоже вопрос? Не дадите ли вы мне свою асю?
А по теме — пускай человек пользуется тем чем привык.
toАртес на с# можно проги под винду и в блокноте писать.
Форумчанин
Регистрация: 05.06.2007
Сообщений: 529
речь то о с++ идет. Мне бы примерчик какого нибудь маленького windows приложения..
Регистрация: 22.05.2007
Сообщений: 9,475
| Я лично ну просто не могу писать проги без подсветки синтаксиса. |
Ха! Ты еще для Линуха не писал в mc
Последний раз редактировалось merax; 09.06.2007 в 21:54 .
Форумчанин
Регистрация: 27.12.2006
Сообщений: 955
Вот тебе ммммааааалллееееннннььььккккииииййй примерчик
и учи матчасть.
Источник: www.programmersforum.ru
Пример создания сайта на HTML через блокнот
2.По желанию переименуйте файл (у меня он будет называться first-page) и обязательно задайте ему расширение .html вместо .txt).
3.Откройте документ программой Блокнот, Notepad, Notepad++ или другом текстовом редакторе, желательно с подсветкой синтаксиса.
4.Скопируйте и вставьте в него следующий текст.
Моя первая страничка Тело HTML-документа (отображается на экране)
5. Сохраните изменения в файле.
6. Откройте first-page.html, только уже не в Блокноте, а в любом доступном вам браузере. На экране должно отобразиться примерно следующее:
Взгляните на html-код своей первой веб-страницы. Посмотрите на результат его работы (страницу в браузере). Постарайтесь понять, за что какая строчка кода отвечает. Читать продолжайте только после попытки, которая обязательно увенчается успехом хотя бы частично.
Теперь проверьте, правильно ли вы этот код поняли. Рассмотрим его.
Это тег, с которого должен начинаться любой html-документ. Он даёт понять интернет-обозревателю, с какой версией языка разметки тот имеет дело. Без этой строки браузер может начать неправильно обрабатывать код. Написав , мы идентифицировали файл как документ стандарта HTML 5, и браузер, проанализировав первую строку, будет обрабатывать остальной код в соответствии с заданным стандартом.
Даёт понять интернет-обозревателю, что всё, находящееся между открывающим и закрывающим тегами — html-код. Вообще использовать эти теги не обязательно, но принято.
«Head» с английского — «Голова». Этот контейнер содержит теги со вспомогательной информацией для веб-браузеров и поисковых систем. Здесь можно задать файлы скриптов, таблицы стилей, ключевые слова и
Моя первая страничка
«Body» — тело. Таким образом у любого html-документа есть голова, содержащая вспомогательную информацию, и тело, внутри которого находится основной код документа. Так как наша страничка — первая, она не должна быть сложной, и поэтому тело документа содержит только текст «Тело HTML-документа (отображается на экране)»
Вы можете поменять надпись на любую другую, и она отобразится в браузере. На экран будет выведен любой находящийся между тегами
текст (если только это не теги), так что поздравляю, простые html-странички вы создавать уже научились. Внимательный читатель мог задуматься, почему теги расположены именно так:идёт перед, но закрывающий находится перед закрывающим. Чтобы это понять, рассмотрим предложение: Сайт полезный (называется «Яндекс» (кажется так)).
Кавычки расположены внутри скобок, вторые скобки закрываются перед первыми. Правила вложенности в HTML совпадают с правилами вложенности в русском языке. На основе рассмотренного html-шаблона можно создавать другие страницы, просто меняя информацию внутри контейнеров.
Это был простой пример создания сайта через блокнот, более сложные проекты можно делать с помощью визуального редактора HTML.
Полезные ссылки:
- Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
- Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
- Вёрстка сайта с нуля 2.0 — полноценный платный курс;
- Создание приложений для Android — для тех, кто давно хотел попробовать себя в мобильной разработке (не для новичков).
Источник: www.seostop.ru