Урок 1. Как создать простую страницу на html?
В целом оценю время на базовое изучение html как 2-8 часов, остальное по желанию. Ну и, конечно же, время изучения зависит от заинтересованности. Рекомендую разбить на несколько дней по 20-30 минут.
Вы готовы? Тогда поехали!
Подключение к интернету для создания страницы на html нам НЕ нужно.
Нам понадобится
1) Выбираем текстовой редактор. На первое время достаточно Блокнота (Notepad) (в нём нам понадобится только команда Сохранить как)
2) для Mac и Linux
Bluefish Editor ( скачать )
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 .doc .exe .jpg и тд в конце названия файла |
Возможность видеть расширения файла может помочь в точном определении типа файла и даёт возможность вручную (при команде переименовать) сменить не только расширение, но и следовательно тип файла (например, с txt на html)
Но если же у Вас всё-таки названия файлов выглядят как в первом варианте (БЕЗ, например, .txt ; jpg ; .exe в конце названия файлов), делаем следующее:
Смотрим настройки файлов и папок:
Для Win XP Открываем любую папку — Сервис (сверху в панели) — Свойства папки — Вид — Скрывать расширения для зарегистрированных файлов (снять галочку) — Применить
Для Win 7 Открываем любую папку — Упорядочить — Параметры файлов и поиска -Вид — Скрывать расширения для зарегистрированных типов файлов (снять галочку) — Применить
3) вставляем в него Весь код (вместе с комментариями), указанный ниже:
4) открываем файл. Можете выбрать другой браузер для открытия данного файла, для этого нажимаем правую кнопку мыши на нашем файле index.html — Открыть с помощью и выбираем какой-нибудь браузер из списка, например, Internet Explorer, Google Chrome, Mozilla, Яндекс Браузер и тд.
В итоге, открыв Интернет-Браузером получившийся index.html , Вы должны увидеть страничку такого вида:
Рисунок 1.
На Рисунке 1 мы видим как в результате браузер отобразил Вашу страничку. Красным выделен текст следующих элементов:
В коде представленном снизу Вы сможете увидеть базовый минимум html-документа. Её нужно обязательно выучить и не путать местами открывающие и закрывающие теги.
Тег head выделяет головную часть документа. В ней прописываются элементы в основном связанные с помощью Браузеру в обработке элементов Вашей страницы (название, ключевые слова, авторство и тд) Конкретно о его содержимом мы поговорим позже.
Тег title обозначает Название страницы. Это единственный тег, содержащийся в head, который отображается на странице. То, что вписать после открывающего и перед закрывающим тегом и будет Названием Вашей страницы в Интернете
| Все отступы слева перед тегами в примерах Необязательны. Они сделаны для наглядности, чтобы Вы видели пары тегов |
Тег body обозначает Тело страницы. То, что вписать после открывающего и закрывающего тегов body и будет Содержимым Вашей страницы
Почти все теги в HTML открывающие и закрывающие (исключение, например, тег img, который обозначает вставку изображеия).
В очередной раз напомню, что Важно не забывать писать закрывающие теги для всех остальных типов тегов, иначе Браузер не поймёт где именно Вы хотели закончить тот или иной элемент. Как снизу:
Мы намерено после слова жирным забыли закрывающий тег b. В итоге браузер вывел следующее
Хочу выделить текст жирным, а этот уже курсивом
Как видите, текст до конца будет выделяться жирным, а тот, что подразумевался курсивом, тот будет и жирным, и курсивом. Так что будьте внимательны!
5) Если Вы хотите что-то подредактировать в Вашем файле index.html (а он теперь по умолчанию открывается только браузером), то тогда нажимаем правую кнопку мыши на нашем файле index.html — выбираем Открыть с помощью а из списка выбираем уже текстовой редактор, это будет либо Блокнот (в англ. Notepad), либо установленный Вами другой текстовой редактор.
В принципе азы объяснил. Пока html-страница выглядит достаточно просто, но в следующих уроках я подробно расскажу Вам об этих и других элемента и их назначении — будем вставлять изображения, делать ссылки и много другого интересного)
Как создать html файл в блокноте?
Здравствуй, уважаемый читатель. Сегодня я хотел бы поговорить совсем об основах сайтостроения, а именно о том, как создать html файл в блокноте или любом другом текстовом редакторе. В любом случае, если вы хотите в будущем активно работать с кодом, вам понадобиться более удобный редактор, чем блокнот, и об этом я сегодня скажу, но пока сама суть.
Как создавать html-файлы?
Создайте обыкновенный текстовый документ с помощью блокнота и напишите в нем следующее:
Теперь жмем: Файл – Сохранить как… Здесь нужно обязательно дописать после имени файла расширение html, то есть если ваш файл назывался text, то дописываем: text.html , теперь тип файла нужно выбрать «Все файлы«, чтобы он действительно превратился в html , а не в обычный текст.
Все, после сохранения это будет html-файл, его можно открыть в браузере и там вы увидите следующее.
Дело в том, что тег h1 предназначен специально для вывода больших заголовков, поэтому мы убеждаемся, что все работает.
Использование другой программы для создания html и работы с кодом
Только вот простой блокнот абсолютно не годится для написания кода, в нем нет никакого функционала, а самое главное, нет подсветки. В связи с этим я вам рекомендую скачать и установить другой редактор. Например, Notepad++, которым пользуюсь и я. Скачать можно на официальном сайте — notepad-plus-plus.org .
Создать html документ в нем еще проще. Выбираем: Файл – новый, создастся новый файл, теперь нужно выбрать Синтаксис – H – HTML. Теперь, когда вы в первый раз сохраните документ, автоматически будет подставлен такой формат, никаких расширений дописывать не нужно. Ну и конечно же, основное преимущество такого блокнота в том, что в нем есть подстветка кода. Смотрите, как выглядит наш фрагмент в нем:
То есть тут четко видно, что является частью html, а что – обычным текстом. В будущем Notepad++ пригодится вам и для работы с другими языками, если вы захотите их изучать.
В общем-то, заявленная изначально тема раскрыта, html-файл мы создали. Но вы наверняка хотите узнать, что с ним можно делать дальше. Можно, например, создать простенький сайт прямо сейчас, даже если вы очень плохо знаете язык. Просто смотрите эту статью и выполняйте все действия точно так, как там написано.
Изучение html
Также если вас интересует изучение этого языка, читайте эту статью, где я рассказываю, что нужно делать начинающему, чтобы в максимально короткий срок освоить его. Html это не ракетостроение, научиться можно очень быстро, уже через пару месяцев вы легко будете понимать все технические моменты.
Ну а об определении этого языка, о том, зачем он вообще нужен, вы можете прочитать здесь, где я постарался максимально подробно объяснить, для чего он нужен в сайтостроении на простом примере.
Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший — HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей — 4.8 из 5. Пусть вашим сайтам будет хорошо.