Как создать файл html на windows 7. Создание html страницы в блокноте: разъяснения для чайников
HTML – это «web»-страница представленная в виде файла. Другими словами, это своеобразное расширение файла, а также язык разметки, использующийся во всемирной паутине.
С его помощью мы можем не только просматривать содержимое сайтов, но и создавать «web»-страницы.
Сам язык был создан английским ученым по имени Тим Бернерс-Ли. Его разработка велась в Женеве в здании Европейского Центра, занимающегося ядерными исследованиями, примерно в 1986 – 1991 годах. Первоначально HTML должен был стать языком, позволяющим обмениваться технической и научной документацией среди простых людей (то есть, не являющихся какими-либо специалистами в области верстки дизайнов). Однако позже, именно он стал основой для «жизни» интернета.
HTML является теговым языком разметки, благодаря чему, обычный пользователь может создать относительно простой, но при этом красиво оформленный документ.
Как открыть файл html. Инструкция.
Способ №1. С помощью текстового редактора.
Если вам необходимо внести какие-нибудь изменения в файл подобного формата, то необходимо открывать его с помощью текстового редактора. Это можно сделать с помощью стандартной программы «Блокнот». Но лучше всего использовать программу «Notepad++». Она позволяет быстро находить необходимый «кусок» кода, подсвечивает синтаксис, интуитивно понятна и так далее.
1. Перед тем, как открыть файл расширения html, вам нужно скачать эту программу, а затем и установить.
2. Теперь нажмите на нужный файл правой кнопкой мыши, наведите курсор на параметр «Открыть с помощью» и выберите «Notepad++». (Если программа будет находиться в основном меню, как показано на , то нажимать на пункт «Открыть с помощью» не обязательно).
3. Перед вами откроется окно с «кодом», который вы можете теперь редактировать.
Способ №2. С помощью веб-браузера.
Если вы хотите просто просмотреть файл, который скачали/создали, то . При этом он может быть любым, будь то Опера, Мозилла или же Хром.
Нажмите на свой файл два раза левой кнопкой мышки. Если ничего не произошло, то нажмите на него правой кнопкой вашей мышки и выберите параметр «Открыть с помощью». Затем во всплывшем меню выберите необходимый (наиболее часто используемый вами) браузер.
Такими нехитрыми способами вы сможете, как редактировать, так и открывать свои html файлы.
Вы все еще ищете информацию о том как сделать сайт на компьютере? Наверное вы просто ожидаете толчка… нет, не пендаля, а просто ощущения того, что вот, вы сейчас начнете и все у вас получится. У вас получится, уверяю вас, я постараюсь, чтобы у вас получилось.
Итак начнем создавать сайт.
1. Создайте у себя на жестком диске (лучше локальный диск D или E) папку и назовите ее “moisait”, в этой папке создайте еще одну папку –“images” – названия вводим без кавычек. Еще я посоветовал бы создать себе папку отдельно для книг и статей, ссылок, не всегда запомнишь, то, что читал, иногда приходится искать снова. Сама папка moisait не будет потом помещена в интернет, будет перенесено только содержимое вашей папки – собственно ваш сайт и в сети интернет он будет выглядеть так же как и на компьютере.
2. Выделю отдельным пунктом – названия всех папок, всех файлов, всех картинок должны быть напечатаны английскими буквами, привыкайте.
3. В папку moisait помещаем нашу первую страничку, с именем index и расширением htm – для статичных сайтов это нормально. Итак если вы знаете как, то поместите в папку файл index.htm . Я обращаю ваше внимание, что разширения обычно не видно и даже если вы дадите первой страничке своего сайта имя index.htm расширение может быть совсем другим. Я советую включить расширения. Для этого нажимаем на значке «Мой компьютер» и в открывшемся окне папки жмем «Сервис/Свойства папки»
затем переходим на вкладку «Вид» и убираем галочку там, где написано «Скрывать расширения для зарегистрированных типов файлов» и нажимаем «ок».
4. Теперь, переходим в папку moisait кликаем правой кнопкой мыши и выбираем в появившемся окне «Создать/ Текстовый документ». Затем появившийся текстовый документ «Текстовый документ.txt» переименовываем в index.htm спрашиваю переименовать или нет? Нажимайте «Да». Значок фала поменяется, наведите на него указатель мыши и нажмите правую кнопку, в появившемся окне выберите « Открыть с помощью — Internet Explorer».
5. Нажимаем правой кнопкой мыши на рабочем поле (белое поле) и выбираем пункт «Просмотр HTML – кода». (В опере Ctrl+F3)
6. Скопируйте текст приведенный ниже в ваш файл
charset=windows-1251″>
Вы получили скелет вокруг которого будет обрастать ваш файл. То что вы скоприровали не нужно заучивать наизусть, теперь просто копируйте и редактируйте. Откуда я это взял? Выдрал с книжки и нескольких страниц в сети… у которых кстати не было некоторых мета тегов, но мы будем прописывать все.
7. В скопированном тексте вам предстоит теперь произвести небольшие дополнения.
— Между тегами (тайтл)
Возможны ошибки: < title> — лишний пробел перед title> — пробелов вообще не должно быть между начальной скобкой и тегом, после да, т.к. иногда туда прописываются параметры, но если ничего не прописываете не ставьте лишних пробелов.
Тег
—
Это строка с кодировкой в которой будет текст, сейчас стоит нужная кодировка, поэтому ничего не меняем, если только вы не хотите поставить другую кодировку, например UTF-8 и тогда ваша строка будет выглядеть так
— — ключевые слова, говорят, что поисковики не обращают на этот мета тег внимания… возможно, но все-таки этот мета тег будет дисциплинировать вас. Для каждой страницы ключевые слова будут свои и они должны встречаться на странице
— — описание – можно поместить первый абзац из вашего текста на странице.
Старайтесь, чтобы кавычек лишних не было, добавляйте в ключевые слова и описание текст без кавычек
8. Между тегами
Пишем «Привет мир!» и обновляем страничку. Можно нажать на кнопку браузера или на клавиатуре — F5.
Вот собственно и все – ваша первая страничка готова, если вы хотите разбираться и дальше во всем, то продолжайте в том, же духе, а иначе можно было взять шаблон и сразу изменив мета теги как в пункте 7, приступить к наполнению сайта, у вас же еще впереди создание структуры сайта – самостоятельное создание шаблона сайта.
Кто ничего не делает тот не ошибается – с ошибками прошу обращаться сюда.
Приветствую, друзья. Сегодня вернемся к HTML, но не продолжим его изучение, а вернемся к самым истокам, дабы в будущем не у кого не возникало вопросов и проблем. Как создать HTML файл ? Именно так звучит самый популярный вопрос начинающих пользователей. И отсюда довольно часто возникает другой вопрос: «Что делать, если вместо HTML страницы отображается просто текст ?» И чтобы закрыть подобные вопросы на самом начальном этапе, написана эта статья.
Данные проблемы чаще всего возникают не из-за самого пользователя, а из-за операционной системы, используемой на компьютере. При чем здесь операционная система? Все дело в том, что по умолчанию операционные системы Windows, в частности XP и 7, скрывают расширение файлов. Отсюда и возникают проблемы, при создании файлов и назначении им правильного формата.
Я буду объяснять, на примере Windows XP и Windows 7, так как другие не использовал и не знаю, что там, да как.
Итак, для начала включим отображение расширения файлов.
Если используется Windows XP:
Открываем «Мой компьютер»
Заходим в «Сервис» и выбираем пункт «Свойства папки».
Затем, в открывшемся окне выбираем вкладку «Вид».
Нажимаем «Применить» и «ОК».
Если используется Windows 7:
Открываем «Компьютер»
Кликаем на «Упорядочить» и выбираем из списка «Параметры папок и поиска»
В открывшемся окне выбираем вкладку «Вид».
Находим пункт «Скрывать расширения для зарегистрированных типов файлов», и снимаем галочку.
Нажимаем «Применить» и «ОК».
Теперь, если все сделано правильно в конце имени файлов, будет дописано расширение файла, типа: .txt, .html и т.д. Так будет гораздо удобнее ориентироваться в форматировании файлов.
Переходим к решению поставленных вопросов.
Как создать html файл?
Здесь, все на самом деле, до безобразия просто. Есть несколько вариантов, в зависимости, каким инструментом мы пользуемся.
Если используется NotePad++:
Сначала, хочу заметить, что это самый оптимальный и удобный вариант, для написания html, css и php. Подробнее о программе, я уже рассказывал .
После открытия программы, создаем новый документ.
Выбираем подходящий синтаксис, для подсветки кода, что очень облегчает написание кода.
После чего, сохраняем.
Таким образом, можно создать html файл, с помощью .
Если используется блокнот:
Скажу сразу, что это не оптимальный вариант на данный момент. Но все же, я не могу упустить данный способ.
Создаем новый текстовый документ.
Пишем HTML код.
Сохраняем документ, как есть. (В формате txt.)
И переименовываем документ. При этом главное изменить не имя документа, а его расширение. То есть txt заменить на html. После чего, нажать «Enter». Выскочит предупреждение, где нажимаем на кнопку «ДА».
Вот так мы создали файл в формате html, с помощью блокнота.
Поле применения одного из вариантов создания, открываем файл в веб-браузере двойным кликом мыши. И смотрим, что у нас получилось.
При этом, если все сделано правильно файл должен открыться в веб-браузере, а не в блокноте.
Что делать, если вместо HTML страницы отображается текст?
Если же по какой-то причине, вместо того, чтобы открыться в браузере, файл открывается в блокноте в виде текста, то есть кода, который мы прописали. В этом случае необходимо вернуться к началу статьи и отключить скрытие расширения файлов.
Например, может быть ситуация, когда мы написали код в NotePad и сохранили его в формате HTML, но он упорно притворяется текстовым документом. Дело в том, что если не снять галочку, о которой шла речь в начале статьи, мы не увидим, что у нашего файла расширение не (название.html), а (название.html.txt). То есть, по сути, файл по-прежнему является обычным текстовым документом, отсюда и проблема.
То есть, как Вы уже догадались, для ее решения необходимо переименовать файл из (файл.html.txt) в (файл.html).
После данной манипуляции файл должен открыться в браузере, а не в текстовом редакторе в виде текста.
На этом у меня все. Надеюсь, данная статья поможет избавиться от вопросов, которые могут возникнуть в самом начале изучения html или css.
В целом оценю время на базовое изучение html как 2-8 часов, остальное по желанию. Ну и, конечно же, время изучения зависит от заинтересованности. Рекомендую разбить на несколько дней по 20-30 минут.
Вы готовы? Тогда поехали!
Подключение к интернету для создания страницы на html нам НЕ нужно.
Нам понадобится
1) Выбираем текстовой редактор . На первое время достаточно Блокнота (Notepad) (в нём нам понадобится только команда Сохранить как )| Если Вы сразу хотите начать программировать в специализированных текстовых редакторах, то обратите внимание на: 1) для Windows NotePad++ (скачать или ) Intype (скачать) 2) для Mac
и Linux
Их отличие от обычных текстовых редакторов заключается в основном в том, что они делают автоматические отступы, ! дают возможность пересохранить файл в другой кодировке (обратите внимание, в будущем столкнётесь), окрашивают теги в различные цвета как, например, код внизу урока. В обычном редакторе он будет одного цвета. |
2) Любой интернет-браузер, например, Internet Explorer для Windows или Safari для Mac OS X и iOS. Да-да, можно также Mozilla , Google Chrome , Opera , Yandex и Mail браузеры и тд.
Приступим к созданию страницы HTML
1) создаём на рабочем столе папку html . Это мы сделаем для того, чтобы уроки были структурированы и содержались в одном месте.2) Создаём наш файл в текстовом редакторе, например в Блокноте (NotePad). Далее Сохранить как .
Кодировку лучше выбирать UTF-8, затем выбрать все типы файлов и выбрать название файла с.html на конце, например index.html
Выбираем в качестве директории (папки), куда сохранить, нашу html
Нажимаем сохранить
. Готово!
Часто задают вопрос о том, что не видно расширения файла . Разберём по порядку
Возможность видеть расширения файла может помочь в точном определении типа файла и даёт возможность вручную (при команде переименовать ) сменить не только расширение, но и следовательно тип файла (например, с txt на html)
| так НЕ должно выглядеть: photo, текстовой документ, game
так Должно выглядеть: photo.jpg; текстовой документ.txt; game.exe Но если же у Вас всё-таки названия файлов выглядят как в первом варианте (БЕЗ, например, .txt ; jpg ; .exe в конце названия файлов), делаем следующее: Смотрим настройки файлов и папок: Для Win XP Открываем любую папку - Сервис (сверху в панели) - Свойства папки - Вид - Скрывать расширения для зарегистрированных файлов (снять галочку) - Применить Для Win 7 Открываем любую папку - Упорядочить - Параметры файлов и поиска -Вид - Скрывать расширения для зарегистрированных типов файлов (снять галочку) - Применить Для Mac OS Щёлкаем мышью по рабочему столу - Finder - Preferences (Настройки) - Advanced (Дополнительно) - выставить флажок в Show all file extensions (Показывать расширения всех файлов) - Применить |
3) вставляем в него Весь код (вместе с комментариями), указанный ниже:
Заголовок моей странички
4) открываем файл. Можете выбрать другой браузер для открытия данного файла, для этого нажимаем правую кнопку мыши на нашем файле index.html - Открыть с помощью и выбираем какой-нибудь браузер из списка, например, Internet Explorer, Google Chrome, Mozilla, Яндекс Браузер и тд.
В итоге, открыв Интернет-Браузером получившийся index.html , Вы должны увидеть страничку такого вида:
Рисунок 1.
На Рисунке 1 мы видим как в результате браузер отобразил Вашу страничку. Красным выделен текст следующих элементов:
Заголовок моей странички
Это моя первая web-страничка!
В коде представленном снизу Вы сможете увидеть базовый минимум html-документа. Её нужно обязательно выучить и не путать местами открывающие и закрывающие теги.
Тег head выделяет головную часть документа. В ней прописываются элементы в основном связанные с помощью Браузеру в обработке элементов Вашей страницы (название, ключевые слова, авторство и тд) Конкретно о его содержимом мы поговорим позже.
Тег title обозначает Название страницы. Это единственный тег, содержащийся в head , который отображается на странице. То, что вписать после открывающего и перед закрывающим тегом и будет Названием Вашей страницы в Интернете
Тег body обозначает Тело страницы. То, что вписать после открывающего и закрывающего тегов body и будет Содержимым Вашей страницы
Любой заголовок
Просто текст
Текст в параграфе. Он будет писаться с новой строки и заканчиваться с закрывающим тегом
Другой текст
Почти все теги в HTML открывающие и закрывающие
(исключение, например, тег img, который обозначает вставку изображеия).
В очередной раз напомню, что Важно не забывать писать закрывающие теги
для всех остальных типов тегов, иначе Браузер не поймёт где именно Вы хотели закончить тот или иной элемент. Как снизу:
Хочу выделить текст жирным, а этот уже курсивом
Мы намерено после слова жирным забыли закрывающий тег b. В итоге браузер вывел следующее
Хочу выделить текст жирным, а этот уже курсивом
Как видите, текст до конца будет выделяться жирным, а тот, что подразумевался курсивом, тот будет и жирным, и курсивом. Так что будьте внимательны!
5) Если Вы хотите что-то подредактировать в Вашем файле index.html (а он теперь по умолчанию открывается только браузером), то тогда нажимаем правую кнопку мыши на нашем файле index.html - выбираем Открыть с помощью а из списка выбираем уже текстовой редактор, это будет либо Блокнот (в англ. Notepad) , либо установленный Вами другой текстовой редактор.
В принципе азы объяснил. Пока html-страница выглядит достаточно просто, но в следующих уроках я подробно расскажу Вам об этих и других элемента и их назначении - будем вставлять изображения, делать ссылки и много другого интересного)
Мои поздравления!
Несложно же?)
-
17 апреля 2015GSM-модуль Starline — чем он хорош и как установить? -
17 апреля 2015Виджеты в Dashboard Как закрыть dashboard
