Как сделать веб страницу в блокноте: Как создать простой HTML сайт в блокноте

Хочу поведать Вам легкий путь к созданию сайта. Я расскажу о том, как делать уникальные страницы. К концу статьи Вы будете сами писать теги в простом редакторе. Материал подается в форме рассказа — это способ доходчиво объяснить основы и доказать, что в языке сайтостроения нет никакого страха. И это действительно просто. Как веб страничку создать? Начнем…

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

Однажды мне позвонил друг. Рассказал шутку. Говорит, что открыл страничку в блокноте, изменил какое-то русское слово в ней, потом сохранил и открыл в браузере.

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

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

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

Каждая страничка содержит какую-то структуру, она построена по своей логике. Логика задается простым текстом, похожим на английский, но отличается от него краткостью, нередко сильным сокращением. Приведу пример. Напишите в блокноте строчку «Я знаю язык». Это простой текст, ничего страшного нет, не так ли? Сохраните его в файл под названием index, но не index.txt, а index.html, в любую папку (не путайте с index.html.txt — такой файл будет выглядеть в папке как блокнотовский, а не как веб-страница). Если Вы, не закрывая блокнот, посмотрите на этот файл в папке, то увидите, что он выглядит не как текст, а как интернет-страничка! Теперь запустите ее, просто сделайте двойной клик по файлу. Браузер откроет Ваше произведение и Вы увидите, что в нем будет красоваться текст. Обозреватель открыл простую строку и подумал что это страничка! Из этого вывод — он откроет любой текст, лишь бы его файл назывался index.html.

Если Вы не закрыли еще блокнот с нашей строчкой (а если закрыли — запустите заново, и просто перетащите на него сохраненный файл), то допишите незамысловатые символы ДО вашей прошлой строки, допишите слово «<b>» (без кавычек). Должно получиться «<b>Я знаю язык». Сохраните файл под тем же именем и запустите двойным кликом из папки (далее процедура сохранения и запуска будет называться просто — запустите). Вы заметили, что весь текст в обозревателе стал жирным?

Это объясняется тем, что Вы дали понять, что перед тем как отобразить текст, нужно будет учесть его жирность — <b>. Браузер читает написанные строчки слева направо, а если их много — то еще и с первой до последней. Если Вы сказали ему что-то ДО того как он прочитает дальше — он учтет. Напишите в блокноте до <b> еще одно словечко <i>. Получится «<i><b>Я знаю язык». Запустите. Шрифт, кроме того что жирный, стал еще и наклонным. Вот так все просто!

А хотите расскажу, как сделать слово «Я» жирным и наклонным, а то что осталось — обычным? Напишите после «Я» два слова «</b></i>». Должно получиться «<i><b>Я</b></i> знаю язык. Запустите.

Возможно, Вы уже подметили закономерность. <b> делает буквы жирными, но </b> отменяет их жирность. По-русски это можно сказать так: <жирный>Текст<конецжирного>Обычный. Кстати говоря, все эти специальные словечки называются правильно «тег» (читается ТЭГ). Запомните, что вся структура страниц задается ТЕГАМИ.

Я Вас научу не относиться к тегам как к страшно непонятным вещам. Проще говоря, смотрите на строку «<b>Тра-ля-ля</b>» как на жирное Тра-ля-ля, и представляйте ее уже в блокноте жирной. Представляйте, что английское <БЭ> обволакивает Тра-ля-ля и делает его жирным! Так и с другими тегами — они как бы обволакивают то, что между ними написано.

Представим ситуацию, что в словосочетании «Привет всем» нужно подчеркнуть «всем». Как мы уже знаем, его можно окружить тегами. Тег для подчеркивания выглядит так «<u>» (от английского underline — подчеркнуть). Вообще все теги пишутся в угловых скобках <>, а в них короткое спец-слово, часто из одной буквы. Наш код будет выглядеть в блокноте так: Привет <u>всем</u>. Учтите пробел — поставьте его до тега <u>. Наш код по-русски можно сказать так: Привет <подчеркнуть>всем<неподчеркивать>, или: Привет <подч>всем</подч>, если бы HTML писался русскими буквами.

В нашей ситуации <u> —

Вы меняли только некоторые свойства шрифта. Это значит, что изменялись только очертания букв: простые, жирные, наклонные. Но у шрифта есть еще много свойств: цвет, размер, расстояние между буквами и др. Для изменения этих свойств есть специальный тег <font>, который переводится «Шрифт». Но как одним и тем же тегом изменять такие разнообразные свойства? Просто написать <font> до слова и </font> после него логически не получится — не увидите никакой разницы (желательно, чтобы Вы попробывали на практике и сами убедились в моих утверждениях). Пришло время поведать о параметрах. Один тег может изменять несколько свойств сразу. Он за один подход может сделать буквы текста красными и большими. Но как его написать? Вот так: <font color=»red size=»20>, не пугайтесь — все просто. Font переводится шрифт, color — цвет, red — красный, size — размер. По-русски скажем так: <шрифт цвет-равен-красному размер-равен-двадцати>. Закрывающий тег будет всегда одинаковым — </font>, он одним махом закроет все свойства шрифта. Пример: <font color=»green>Зеленая</font> трава. Слово «Зеленая» станет зеленого цвета при просмотре. Слово трава не помещено между открывающим тегом и закрывающим, оно останется обычным, потому что </font> закрыл все параметры открытого ранее <font>. Green переводится зеленый. Между color и green стоит равно, что показывает цвет-равен-зеленому. А если Вы захотите подчеркнуть слово Зеленая? Правильно — возьмите его в <u>, не важно, что вокруг уже есть <font> со своими параметрами.

1) Шрифт должен стать зеленым 2) и наклонным 3) для слова «Зеленая». 4) Но он должен перестать быть наклонным 5) и перестать быть зеленым шрифтом 6) для слова «трава».

Теперь это скажем тегами под теми же цифрами:

1) <font color=»green> 2) <u> 3) Зеленая 4) </u> 5) </font> 6) трава.

Приведу несколько тегов касаемо свойств шрифта:

Закрывающие теги отличаются только наличием /.

Что Вы уже знаете? Знаете, как сделать страничку в блокноте и смотреть ее в браузере. Как написать на ней любую фразу. Умеете делать текст и любую его часть жирной, подчеркнутой, наклонной, красной, большой, притом размер символов можете задать числом! И Вам не нужен Ворд, чтобы сделать слово красным или зеленым, большим или мелким! Более того и самое главное — созданный Вами веб-документ может быть смело размещен в интернете, чего не скажешь о вордовском файле.

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

Обзор редакторов html

Существует много редакторов для создания веб-страниц. Все они разделяются на два типа — визуальные, и для для ввода кода вручную — невизуальные. Визуальные редакторы позволяют построить сайт из набора формочек, заготовок, кнопочек, картинок и т.д. На первый взгляд, это шикарно — о коде думать не надо, строишь себе и готово. Тем более можно выбрать весьма неплохие шаблоны и красивости, которые и меня приятно поражают. Это их огромное преимущество не только для новичков, но и для фирм, которые получают заказы десятками, и думать о коде времени нет (я сильно преувеличиваю). Но они имеют несколько существенных недостатков. Один заключается в том, что Вы не можете построить или изменить то, что не заложено в программе, приходится пользоваться только тем, что предлагают. Но веб-дизайн поистине безграничен, и пользование такими редакторами у меня вызывает чувство ограниченности, но многим разработчикам они нравятся. Второй существенный недостаток в том, что после сохранения всего содеянного в страницу HTML, в нее закидывается куча лишнего кода, который никому не нужен и повышает вес файла, а интернет как известно требователен к скорости загрузки или количеству скачанной информации. Редакторы вынуждены это делать ввиду универсальности и шаблонности своих инструментов, они должны учесть все и сразу, но это чаще всего не оправдано. Не нужно учитывать выравнивание текста по левому краю, расстояние между строчками, размер шрифта каждого отдельного абзаца, если Вы просто хотите написать обычным темно-серым цветом несколько предложений. Но эти редакторы не успокоятся, пока все не учтут. А Вы себе даже представить не можете, сколько всяких причуд многие из них пытаются учесть и запихнуть в файл. Третий недостаток — погрешности построения некоторых частей страницы. Особенно это касается отступов картинок, рамок, ссылок и многого еще. Четвертый недостаток — многие визуальные редакторы неверно понимают HTML! Если ими открыть сложную, изобилующую графикой страницу, то они извратят ее хуже не придумаешь. Эти редакторы нормально понимают только то, что сделано в них же самих, а иногда и того понять не могут. И когда они не понимают, Вам предлагается хранить кроме файлов сайта еще и документы проектов, которые потом уже правильно откроются. Но не все так страшно и на самом деле можно найти парочку нормальных визуальных программ.

Другим типом являются невизуальные редакторы кода. Блокнот — самый простейший. Основной их недостаток — нельзя сразу видеть страничку, и пользоваться шаблонными инструментами, которые часто дают даже очень хороший эффект. Но для отображения результатов труда в них бывает встроенный просмотр страницы, т.е. пишите код и видите готовую страничку. Согласитесь, это гораздо удобнее, чем писать в блокноте, потом сохранять, потом открывать файл в браузере и т.д. по кругу. Второй недостаток (или преимущество) — приходится писать и знать язык HTML. Третий недостаток (или опять преимущество) — нужно следить за каждой страничкой, быть в курсе каждого файла своего сайта. Почему эти недостатки могут быть преимуществом? Потому что тогда Вы точно знаете, из чего сделан сайт, насколько он логичен, по какому принципу построен, можете пользоваться любыми шаблонами или кодами, которые были созданы кем-то другим и которые можно найти в учебниках, статьях, форумах, которые можно спокойно использовать и главное, их можно доработать под себя. Еще преимущество в том, что Вы, зная HTML, можете внедрять такие кусочки кода, которые позволят лучше раскрутить сайт, договориться о рекламе, настроить вид и размещение счетчиков посещений, вставить часть сайта друга и др., что визуальным редактором ввиду их ограниченности сделать бывает невозможно. Третье преимущество — чистота кода и вес файлов зависят только от Вас. Четвертое преимущество — Вы сможете использовать языки программирования JavaScript и PHP. Первый служит для динамического изменения элементов страницы, когда она уже отображается в браузере, например, выдает сообщение о неверном вводе адреса почты пользователем. Второй язык PHP служит для объяснения серверу (сервер — это такой компьютер, на котором будет храниться сайт в интернете), как поступить, если пользователь отправил картинку или добавил сообщение. Именно PHP (и другие подобные) позволяют общаться на форумах, отправлять почту, узнавать погоду, искать что-то в интернете. Эти языки позволяют сделать сервис более интересным.

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

Один из редакторов называется NeonHTML. Он относится к промежуточному типу, т.е. редактируем исходный код и видим результаты незамедлительно. Почему именно этот редактор? Можно использовать другой, но во-первых, NeonHTML бесплатный, во-вторых удобный и понятный, в-третьих я пользуюсь им и поэтому советую. Скачать редактор можно здесь.

Это конечно не всё, что хотелось бы рассказать о том, как научиться языку HTML. Если Вы хотите научиться создавать сайты, то нужно искать и качать учебники и желательно просматривать форумы и не стесняться задавать вопросы.

Сайт компьютерной графики и веб дизайна

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