Содержание

Как создать файл HTML.

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

Давайте приступим к практическим действиям и прямо сейчас создадим свой первый HTML-файл.

Это будет «полигон», который мы будем наполнять содержимым, расширять и экспериментировать.

Для тех, кто любит видео:

Все мои уроки по HTML и верстке сайтов здесь.

Первый способ, который мы рассмотрим по созданию файла HTML — это способ создания файла в простом текстовом редакторе.

Способ 1. Создаем файл html в программе «Блокнот».

Откройте любой текстовый редактор, например, редактор «Блокнот», который входит в состав операционной системы Windows. Найти эту программу можно через главное меню Пуск -> Все программы ->Стандартные -> Блокнот.

В главном меню программы выбираем «Файл-Сохранить как».


И сохраняем текстовый файл с расширением *.txt.

Теперь нужно поменять расширение этого файла с *.txt на *.html.

Если у Вас не отображается расширение файлов, вот заметка:

Как включить отображение расширений файлов в Windows.

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

Только что мы с вами создали свой первый HTML-файл, который уже можем заполнять содержимым.

Аналогично html-файл создается с помощью программы Notepad++.

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

Одной из таких программ является универсальный редактор кода Dreamweaver.

Способ 2. Создание файла HTML в универсальном редакторе кода (на примере Dreamweaver).

После того, как программа загрузиться появляется следующее окно приветствия:


Все, что нужно сделать, это выбрать в этом окне, в разделе «Создать», файл HTML.

После этого файл будет успешно создан. Причем, обратите внимание, что программой был автоматически добавлен некоторый код.

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

Теперь, для того, чтобы этот файл появился на жестком диске, его нужно сохранить. Делается это через меню «Файл – Сохранить как…»


Далее выбираете место, где должен будет находиться этот файл, и нажимаете на кнопку сохранить.

Обратите внимание, чтобы при сохранении вы случайно не убрали расширение html, которое присваивается файлу.

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

Все мои уроки по HTML и верстке сайтов здесь.

Создание HTML документа (файла). Смена расширения файла

HTML документ — это обычный текстовой файл c расширением .html, который содержит HTML-код. HTML документ иначе ещё называют HTML файлом.

Чтобы из обычного текстового файла (с расширением .txt) сделать HTML документ, нужно сменить расширение с .txt на .html.

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

Windows

  1. Кликнуть по нему два раза левой кнопкой мыши, в этом случае HTML документ откроется в том браузере, который выбран по умолчанию.
  2. Кликнуть по нему ПКМ → навести курсор на открыть с помощью... → выбрать нужный браузер.

При получении HTML документа браузер будет отображать его в виде веб-страницы (веб-страница — это то, что отображается в окне браузера). Рассмотрим это на примере. Создадим HTML-документ и расположим в нём следующий HTML-код:


<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Заголовок</title>
  </head>
  <body>
    <h2>Мой первый заголовок</h2>
    <p>Мой первый абзац</p>
  </body>
</html>

Теперь откроем HTML файл браузером.

В окне браузера мы не увидим отображения самого HTML-кода, потому что он будут интерпретирован для отображения содержимого страницы в нужном виде. Результат данного кода в окне браузера:

Чтобы отредактировать код HTML документа, нажимаем на него ПКМ → наводим курсор на открыть с помощью... → и выбираем нужный редактор, если в списке нет нужного редактора, жмём Выбрать программу... и выбираем нужный редактор. Некоторые редакторы (для примера возьмем notepad++) можно выбрать прямо в контекстном меню, нажав по документу ПКМ и выбрав сверху Edit with Notepad++ (редактировать с помощью notepad++).

Смена расширения файла

Windows:

  1. В открытом редакторе (или в обычном текстовом документе) нажимаем
    файл
    → выбираем сохранить как → внизу в текстовом поле имя файла: напишем к примеру так: mypage.html → жмём сохранить. Всё, HTML документ создан.
  2. Кликаем правой кнопкой мыши (ПКМ) на текстовом файле → выбираем переименовать и меняем расширение с .txt на .html. Чтобы воспользоваться данным способом, нам надо сделать так, чтобы по умолчанию у всех файлов были доступны их расширения, делается это следующим образом: открываем Панель управления → выбираем Параметры папок (в Windows 10 данный пункт называется Параметры проводника) → вкладка Вид → прокручиваем в самый низ и убираем галочку на Скрывать расширения для зарегистрированных типов файлов
    .

С этой темой смотрят:

Как создать HTML файл

По своему содержанию HTML файл является текстовым файлом. То есть его можно открыть и изменять в любом редакторе текста. К примеру, в «блокноте» на системе Windows. Поэтому создание HTML файла ни чем не отличается от создания простого текстового документа.

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

Создать HTML файл

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

Другими словами, если текстовый документ назывался «Новый текстовый документ.txt«, то переименуете его в «Новый текстовый документ.html«.

Обратите внимание на то, что по умолчанию в системе Windows скрыты расширения файлов. Поэтому вместо имени файла «Новый текстовый документ.txt» вы можете увидеть только «Новый текстовый документ». Чтобы включить отображение расширений файлов, нажмите на закладку «Вид» в проводнике файлов, а затем поставьте галочку на пункте «Расширения имён файлов»

Редактировать HTML файл

Кликните правой кнопкой мыши на html файл. Выберите пункт «Открыть с помощью». В этом пункте выберите блокнот или другой редактор простейших текстовых файлов. Если такого пункта нет, то нажмите «Выбрать другое приложение» и выберите блокнот в списке приложений.

Можно редактировать HTML файл и в других текстовых редакторах. К примеру, в MS Office Word. Но есть вероятность, что будут проблемы с сохранением файла: редактор самостоятельно будет вставлять ненужные теги при сохранении. Поэтому рекомендуем использовать простейшие программы для редактирования текстовых файлов. К примеру, «блокнот».


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

Посмотреть HTML файл в браузере

Чтобы посмотреть как выглядит сохранённый HTML файл в браузере, кликните на него два раза. Загрузится браузер и отобразит html файл. Если этого не произошло и файл открылся в текстовом редакторе, то кликните на файл правой кнопкой мыши.
Затем выберите пункт «Открыть с помощью», в котором выберите свой браузер. Если в этом списке браузера нет, то нажмите «Выбрать другое приложение» и выберите свой браузер из всех установленных на компьютере приложений.

При сохранении HTML файла нет нужды закрывать его в браузере. Вы можете одновременно изменять содержимое файла через текстовый редактор и просматривать результаты в браузере. Только не забудьте обновить страницу в браузере после внесения изменений в файл (кнопка — «F5»).

О том что именно должен содержать стандартный HTML файл читайте в статье «Структура HTML файла».

Как создать HTML документ — Программирование с нуля

Файл HTML — это простой текстовый файл, сохраненный с расширением .html или .htm (второй вариант уже практически не используется).

Из этой статьи вы узнаете, как легко создать HTML-документ (то есть веб-страницу). Чтобы начать создавать HTML-страницы, вам понадобятся только две вещи: простой текстовый редактор и веб-браузер.

Создание вашего первого HTML-документа

В конце урока вы создадите HTML-файл, который отображает сообщение «Hello world» в вашем веб-браузере.

Шаг 1. Создание файла HTML

Откройте простой текстовый редактор или редактор кода и создайте новый файл.

Шаг 2. Введите код HTML

В окне редактора введите следующий код:

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML document</title>
</head>
<body>
  <p>Hello World!<p>
</body>
</html>

Шаг 3. Сохраните HTML документ

блок 1

Сохраните данный файл как index.html на жестком диске. Важно указать расширение .html — некоторые текстовые редакторы, такие как Блокнот, автоматически сохранят его как .txt. Если это произошло — переименуйте файл, удалите расширение .txt.

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

Разбор HTML кода

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

Объявление DOCTYPE — строка определяет тип документа HTML5.
Раздел декларативного заголовка (заключенный в элемент HEAD) — предоставляет информацию о документе, включая его заголовок, информацию о стиле и сценарии.

Тело документа (заключено в элемент BODY). Содержит фактическое содержимое документа, которое отображается в веб-браузере и отображается для пользователя.

Вы узнаете о различных элементах HTML-документа в наших следующих статьях.

HTML-теги и элементы

HTML код написан с использованием HTML-элементов, состоящих из тегов разметки. Эти теги разметки являются фундаментальной особенностью HTML. Каждый тег состоит из ключевого слова, заключенного в угловые скобки, например <html>, <head>, <body>, <title> и т. д.

HTML-теги обычно идут парами, такими как <html> и </html>. Первый тег в паре часто называют открывающим тегом (или начальным тегом), а второй тег называют закрывающим тегом (или конечным тегом).

Открывающий тег и закрывающий тег идентичны, за исключением косой черты (/) после открывающей угловой скобки закрывающего тега, чтобы сообщить браузеру, что команда выполнена. Между этими тегами вы можете добавить заголовки, абзацы текста, таблицы, формы, изображения, видео и т.д. Например, абзац, который представлен элементом p, будет записан как:

<p>Это параграф текста.</p>

блок 3

Начинаем работу с HTML + CSS

Начинаем работу с HTML + CSS

Это краткое руководство предназначено для людей, начинающих свое изучение CSS в первый раз.

Оно не дает глубоких знаний о CSS. Руководство просто объясняет как создать HTML файл, CSS файл и как заставить их работать вместе. После прочтения данной статьи, Вы можете продолжить дальнейшее изучение других обучающих руководств для получения информации о более значительных особенностях HTML и CSS. Или же перейти к изучению материала в интерактивных HTML или CSS редакторах, которые помогут Вам при создании сайтов.

В конце данной статьи Вы создадите HTML файл который будет выглядеть как этот:

Полученная HTML страница с цветами и разметкой сделанной при помощи CSS.

Заметьте, что я не претендую на то, что это очень красиво ☺

Разделы помеченные даным знаком необязательны. Они содержат дополнительные объяснения HTML и CSS кода в приведенных примерах. Знак “внимание!” в начале абзаца обозначает более расширенную информацию чем остальной текст.

ШАГ 1: написание HTML кода

Для этой статьи я предлагаю использовать простейшие утилиты, например Блокнот от Windows, TextEdit на Mac или KEdit под KDE вполне подойдут под задачу. Как только Вы поймете основные принципы, вы можете переключиться на использование более продвинутых инструментов разработки, например на такие коммерческие программы как Style Master или DreamWeaver. Но для создания первого CSS файла не стоит отвлекаться на множество расширенных возможностей.

Не используйте текстовый редактор наподобие Microsoft Word или OpenOffice. Эти программы обычно создают файлы, которые не могут быть прочитаны браузерами. Для HTML и CSS файлов нам нужны обычные текстовые файлы без какого-либо формата.

Первый шаг заключается в открытии пустого окна текстового редактора (Notepad, TextEdit, KEdit или любого Вашего любимого) и наборе в нем следующего текста:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
</head>

<body>

<!-- Site navigation menu -->
<ul>
  <li><a href="index.html">Home page</a>
  <li><a href="musings.html">Musings</a>
  <li><a href="town.html">My town</a>
  <li><a href="links.html">Links</a>
</ul>

<!-- Main content -->
<h2>My first styled page</h2>

<p>Welcome to my styled page!

<p>It lacks images, but at least it has style. 
And it has links, even if they don't go
anywhere&hellip;

<p>There should be more here, but I don't know
what yet.

<!-- Sign and date the page, it's only polite! -->
<address>Made 5 April 2004<br>
  by myself.</address>

</body>
</html>

Вам не обязательно это перенабирать — вы можете просто скопировать и вставить текст с этой страницы в редактор.

(Если вы используете TextEdit на Макинтоше, не забудьте указать TextEdit’у, что это действительно простой текстовый файл, открыв меню Format и выбрав опцию “Make plain text”.)

Первая строчка нашего HTML файла говорит браузеру о типе документа (DOCTYPE обозначает DOCument TYPE). В нашем случае — это HTML версии 4.01.

Слова между < и > называются тэгами и как вы можете видеть, документ содержится между <html> и </html> тэгами. Между <head> and </head> находится различная информация, которая не отображается в самом документе. Например там содержится заголовок документа. Позже мы добавим туда и связь с CSS файлом.

Тэг <body> это место содержимого документа. В принципе, все что находится внутри этого тэга за исключением текста между <!— и —>, являющегося комментариями, будлет выведено на экран. Комментарий браузером игнорируется.

Тэг <ul> в нашем примере задает отображение “неупорядоченного списка” (Unordered List), т.е. списка, элементы которого непронумерованы. Тэги <li> начинают “элементы списка” (List Item). Тэг <p> является “параграфом”. А тэг <a> — “якорь” (Anchor), с помощью которого создаются гиперссылки.

Код HTML в редактор KEdit.

Если вы хотите узнать какие бывают тэги в скобках <…>, то вы можете изучить Начало работы с HTML. Но сначала пару слов о структуре нашей HTML страницы.

  • Тэг “ul” — список состоящий из одной ссылки на каждый элемент списка. Эта структура послужит нам “навигацией” по нашему сайту связывая с нами другие страницы нашего гипотетического сайта . Предполагается, что все страницы нашего сайта будут иметь схожее или идентичное меню.
  • Элементы “h2” и “p” задают содержимое уникальное каждой страницы, в то время как подпись (“address”) снизу снова будет повторяться на всех страницах.

Отметьте, что я не закрыл “li” и “p” элементы. В HTML (но не в XHTML), можно опускать закрывающие тэги </li> и </p>, что я и сделал в данном случае, для того чтобы было проще текст. Но вы можете добавить их, если считаете необходимым.

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

Выберите “Сохранить как…” или “Save As…” из выпадающего меню Файл или File, укажите каталог для сохранения файла (например Рабочий Стол) и сохраните данный файл как “mypage. html”. Не закрывайте редактор, он нам еще потребуется.

(Если вы используете TextEdit для Mac OS X версии меньше чем 10.4, вы увидите опцию «Don’t append the .txt extension» в диалоговом окне «Save as». Выберите эту опцию, потому что имя файла “mypage.html” уже включает в себя расширение. Более новые версии TextEdit заметят .html расширение автоматически.)

Далее, откройте файл в браузере. Вы можете сделать это следующим образом: найдите файл вашим файловым менеджером (Проводник, Windows Explorer, Finder or Konqueror) и щелкните (единожды или дважды) на нем. Если вы делали все как описано то имя файла будет “mypage.html”. У вас должен открыться файл в браузере, установленном по умолчанию. (Если нет, то откройте браузер и перетащите файл в его окно.)

Как Вы видите, страница выглядит достаточно скучно…

ШАГ 2: изменяем цвета

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

Мы начнем со стилей, встроенных в HTML файл. Позже, мы положим CSS стили и HTML разметку в разные файлы. Раздельное хранение хорошо тем, что легче использовать те же самые стили для множества HTML файлов: Вам нужно написать CSS стили только один раз. Но на этом шаге мы оставим все в одном файле.

Нам нужно добавить элемент <style> к HTML файлу. Определения стилей будут внутри этого тэга. Возвращаемся к редактору и добавляем следующие пять строчек в заголовок HTML кода между тэгами <head> и </head>. Строки, которые надо добавить выделены красным (с 5-й по 9-ю).

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    color: purple;
    background-color: #d8da3d }
  </style>
</head>

<body>
[и т. д.]

Первая строка говорит браузеру о том, что это таблица стилей и что она написана на CSS (“text/css”). Вторая строка говорит, что мы применяем стиль к элементу “body”. Третья устанавливает цвет текста в пурпурный, а следующая устанавливает цвет фона в желто-зеленый оттенок.

Таблицы стилей CSS создаются согласно правилам. Каждое правило состоит из трех частей:

  1. селектор (в нашем примере: “body”), которые говорит о том, к какой части документа применить правило;
  2. свойство (в нашем примере свойствами являются ‘color’ и ‘background-color’), которое указывает что именно мы устанавливаем у данного элемента, выбранного селектором;
  3. и значение (‘purple’ и ‘#d8da3d’), которое устанавливает значение атрибута.

Наш пример показывает что правила могут быть скомбинированы. Мы установили два свойства, так же мы могли задать их раздельно:

body { color: purple }
body { background-color: #d8da3d }

но поскольку оба правила относятся к body мы записали “body” один раз и поместили свойства и значения вместе. Для получения большей информации о селекторах смотрите главу 2 из Lie & Bos.

Фон элемента body так же является фоном целого документа. Мы явно не назначили другим элементам (p, li, address…) фона, так что по умолчанию у них его нет (или он прозрачный). Свойство ‘color’ устанавливает цвет текста элемента body, но все остальные элементы внутри body наследуют этот цвет, пока для них не задан другой в виде другого правила. (Мы добавим другие цвета позже.)

Теперь сохраните этот файл (используйте команду “Сохранить” или “Save” из файлового меню) и переключитесь обратно в браузер. Если вы нажмете кнопку “обновить” , то изображение сменится со “скучной” страницы на разукрашенную (но все еще однообразную) страницу. Кроме ссылок сверху, весь текст должен быть пурпурный на желто-зеленом фоне.

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

В CSS можно задавать цвета несколькими способами. Наш пример показывает два из них: по имени (“purple”) и по шестнадцатиричному коду (“#d8da3d”). Существует порядка 140 имен цветов и 16 шестнадцатиричных значений. Добавляя прикосновение стиля объясняет детали относительно этих кодов.

ШАГ 3: изменяем шрифты

Еще одна вещь которую можно сделать — шрифтовое разнообразие разных элементов на странице. Давайте напишем шрифтом “Georgia” весь текст, исключая заголовки, которые мы напишем “Helvetica.”

Поскольку в Web никогда нельзя быть целиком уверенным в том, какие шрифты установлены на компьютерах посетителей, мы добавим альтернативные способы отображения: если Georgia не найдена, то мы будем использовать Times New Roman или Times, а если и он не найден, то браузер может взять любой шрифт с засечками. Если отсутствует Helvetica, то мы можем попробовать использовать Geneva, Arial или SunSans-Regular поскольку они очень похожи по начертанию, ну а если у пользователя нет таких шрифтов, то браузер может выбрать любой другой шрифт без засечек.

В текстовом редакторе добавьте следующие строки (строки 7-8 и 11-13):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  h2 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>
[и т.д.]

Если вы сохраните файл снова и нажмете “обновить” в браузере, то у вас должны быть разные шрифты в заголовках и в тексте.

Сейчас шрифт заголовков и основного текста различается.

ШАГ 4: добавляем навигацию

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

Навигация уже на странице. Это список <ul> вверху. Ссылки в нем не работают, потому что наш “сайт” пока что состоит только из одной страницы, но это неважно в данный момент. Конечно же, на настоящем сайте не должно быть неработающих ссылок.

Нам нужно переместить список налево и сдвинуть остальное содержимое немного вправо, чтобы создать пространство для него. Свойства CSS которые мы будем использовать для этого — ‘padding-left’ (для сдвига текста) и ‘position’, ‘left’ и ‘top’ (для сдвига меню).

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

В окне редактора добавьте следующие строки к HTML файлу (строки 7 и 12-16):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h2 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>
[и т.д.]

Если вы снова сохраните файл и обновите его в браузере то список ссылок получится у вас слева от основного текста. Это уже смотрится интереснее, не так ли?

В отличии от предыдущего файла, в этом главный текст переместился направо а навигация налево

Свойство ‘position: absolute’ говорит что элемент ul расположен независимо от любого текста который предшествовал или будет следующим за этим элементом, а свойства ‘left’ и ‘top’ обозначают это расположение. В нашем случае это 2em сверху и 1em от левого края окна.

‘2em’ обозначает 2 раза по растоянию, равному размеру текущего шрифта. Т.е., если меню отображается шрифтом в 12 пунктов, то 2em будет равняться 24 пунктам. `em` очень полезная единица измерения в CSS, поскольку может адаптироваться автоматически к шрифту, используемому браузером. Большинство браузеров имеют возможность изменять размеры шрифта: вы можете попробовать увеличить или уменьшить размер и увидеть, что меню будет изменяться в зависимости от размера шрифта, чего бы не случилось, если бы мы указали отступ в пикселях

ШАГ 5: украшаем ссылки

Навигационое меню все еще по-прежнему выглядит как список, вместо меню. Давайте стилизуем его. Мы уберем маркеры списков и переместим элементы налево, где были маркеры. Так же мы нарисуем каждый элемент списка на белом фоне в своем черном квадрате (зачем? просто так, потому что можем).

Мы так же не сказали какими должны быть цвета ссылок, так что давайте добавим и это свойство: синими будут ссылки которые пользователь еще не смотрел, пурпурными — те которые он уже посещал. (строки 13-15 и 23-33):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h2 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  </style>
</head>

<body>
[etc.]

Обычно браузеры выделяют гиперссылки цветом и подчеркиванием. Обычно, цвета похожи на те, что мы указали: синие для ссылок которые пользователь еще не открывал (или открывал долгое время назад), пурпурные дял страниц, которые он уже видел.

В HTML гиперссылки создаются тэгами <a> поэтому для указания цвета нам надо создать правило в CSS для “a”. Для того, чтобы различать посещенные и непосещенные ссылки, CSS предоставляет два “псевдо-класса” (:link и :visited). Они называются “псевдо-классами” для отличия от HTML атрибутов, которые указываются в HTML напрямую, т.е. в нашем случае class="navbar".

ШАГ 6: добавляем горизонтальные линии

Последним добавлением к нашей таблице стилей станет горизонтальная полоса для разделения текста и подписи снизу. Мы используем свойство ‘border-top’ для того чтобы добавить прерывистую линию над элементом <address> (строки 34-37):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h2 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  address {
    margin-top: 1em;
    padding-top: 1em;
    border-top: thin dotted }
  </style>
</head>

<body>
[и т.д.]

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

ШАГ 7: внешний CSS

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

Для создания отдельного файла таблицы стилей нам нужен другой пустой текстовый документ. Вы можете выбрать пункт “Новый” из меню «Файл» в редакторе , для создания пустого файла. (Если вы используете TextEdit, не забудьте сделать его текстовым снова, используя меню Format.)

Затем вырежьте и вставьте все содержимое внутри <style> из HTML в это новое окно. Не копируйте элементы разметки <style> и </style>. Они принадлежат HTML коду, а не CSS. В новом окне у вас теперь должен быть полная таблица стилей:

body {
  padding-left: 11em;
  font-family: Georgia, "Times New Roman",
        Times, serif;
  color: purple;
  background-color: #d8da3d }
ul.navbar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em }
h2 {
  font-family: Helvetica, Geneva, Arial,
        SunSans-Regular, sans-serif }
ul.navbar li {
  background: white;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid black }
ul.navbar a {
  text-decoration: none }
a:link {
  color: blue }
a:visited {
  color: purple }
address {
  margin-top: 1em;
  padding-top: 1em;
  border-top: thin dotted }

Выберите “Сохранить как…” из меню «Файл», убедитесь что вы в той же директории/папке что и файл mypage.html, и сохраните таблицу стилей под именем “mystyle.css”.

Теперь вернитесь к HTML коду. Уберите все содержимое от <style> до </style> включительно и замените убранное элементом <link> как показано (строка 5):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <link rel="stylesheet" href="mystyle.css">
</head>

<body>
[etc.]

Такая конструкция скажет браузеру о том, что таблица стиле располагается в файле под названием “mystyle.css”, и поскольку директория не упомянута, браузер будет искать этот файл там же, где лижит HTML файл.

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

Конечный резульат

Следующий шаг — положить оба файла mypage.html и mystyle.css на ваш сайт. (Конечно, вы можете захотеть слегка изменить их сперва…) Как положить файлы на сайт зависит от вашего интернет провайдера.

Создание HTML-файла в Блокноте (Notepad)

Самым простым текстовым редактором под Windows является Notepad (Блокнот). Пожалуй единственным его плюсом является то, что его не нужно откуда-то скачивать и устанавливать на компьютер. Он есть на любом компьютере, где установлена Windows. И всё, на этом все плюсы Блокнота. Даже для того, чтобы создать текстовой файл с расширением, отличным от .txt требуется произвести ряд движений.

Для информации:

 

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

 

Всё начинается с самого начала: Часть 1 «Инструментарий»

Для того, чтобы открыть Notepad (Блокнот) в Windows нужно нажать на кнопку «Пуск» в левом нижнем углу. (Или нажать на кнопку «Win» на клавиатуре. Она обычно находится между правыми кнопками Ctrl и Alt.) Откроется такое вот окно:

После этого нужно написать в поисковой строке слово «Блокнот» и кликнуть по ссылке найденной программы:

С тем же успехом можно написать в поисковой строке слово «notepad» и кликнуть по ссылке найденной программы:

После этого откроется окно программы Notepad (Блокнот), куда можно записывать текст:

После того, как текст написан, его нужно сохранить. Notepad предназначен для создания и сохранения текстовых файлов с расширением .txt. Поэтому, для того, чтобы сохранить файл с расширением, скажем, .html, нужно в меню Блокнота выбрать опцию «Файл», а в ней опцию «Сохранить как…»

После этого откроется окно сохранения файла в котором нужно в опции «Тип файла:» выбрать Все файлы (*.*)

Также полезно сразу выбрать кодировку. Сейчас на серверах обычно стоит кодировка UTF-8, поэтому лучше сразу сохранять файлы в ней.

После этого останется только ввести имя файла с расширением (для HTML-документов расширение либо .html либо .htm), выбрать путь, куда сохранять файл (чтобы его потом можно было найти) и нажать кнопку «Сохранить».

После сохранения файла с расширением .html в Windows обычно этот файл имеет иконку того браузера, который настроен по умолчанию для работы с интернетом. (У меня сейчас по умолчанию стоит Opera.) Двойным кликом по иконке файла его можно открыть для просмотра в браузере.

Заберите ссылку на статью к себе, чтобы потом легко её найти 😉

Выберите, то, чем пользуетесь чаще всего:

Спасибо за внимание, оставайтесь на связи! Ниже ссылка на форум и обсуждение ; )

Как создать HTML файл » Pechenek.NET

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

Как создать HTML файл?

На самом деле, все проще простого. Если вы обладатель Notepad++ , Нажимаете Файл -> Сохранить как… В открывшемся окошке в строке “Тип файла:” ищете и выбираете – Hyper Text Markup Language file(*.html…), выбираете место куда хотите сохранить ваш файл и нажимаете сохранить:

Следующий способ потребует от вас не больше усилий, чем предыдущий. Работаем чем стандартный блокнот. Мы имеем уже определенный код, который необходимо просмотреть в браузере. Нажимаем Файл -> Сохранить как… После имени файла пишем: (имя_файла).html и нажимаем кнопку “Сохранить”.

Файл корректно сохранился, давайте посмотрим что получилось:

Иногда возникают проблемы при отображении html-файла сохраненного через стандартный блокнот, вместо букв отображаются так называемые “кракозябры”, в таком случае попробуйте выбрать кодировку UTF-8 и снова сохранить файл.

Есть еще один метод преобразования текстового файла с кодом в любой формат! Не только в html. Для того, чтобы воспользоваться этим методом необходимо отобразить формат файлов. Чтобы это сделать заходим в Панель управления -> Оформление и персонализация -> Параметры папок. В появившемся окне переходим на вкладку “Вид”. Опускаем ползунок в самый низ в области “Дополнительные параметры:” и убираем галочку со строки “Скрывать расширения для зарегистрированных типов файлов”:

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

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

Как видите создать HTML файл очень просто. Подписывайтесь на нас в социальных сетях!

HTML-редакторов


Простой текстовый редактор — это все, что вам нужно для изучения HTML.


Изучение HTML с помощью Блокнота или TextEdit

Веб-страницы можно создавать и изменять с помощью профессиональных редакторов HTML.

Однако для изучения HTML мы рекомендуем простой текстовый редактор, например Блокнот (ПК) или TextEdit (Mac).

Мы верим в то, что использование простого текстового редактора — хороший способ изучить HTML.

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


Шаг 1. Откройте Блокнот (ПК)

Windows 8 или новее:

Откройте начальный экран (символ окна в левом нижнем углу экрана). Тип Блокнот .

Windows 7 или более ранняя версия:

Открыть Старт > Программы> Аксессуары> Блокнот


Шаг 1. Откройте TextEdit (Mac)

Откройте Finder> Приложения> TextEdit

Также измените некоторые настройки, чтобы приложение правильно сохранять файлы.В настройках > Формат> выберите «Обычный текст»

Затем в разделе «Открыть и сохранить» установите флажок «Отображать файлы HTML как HTML-код вместо форматированного текста».

Затем откройте новый документ для размещения кода.


Шаг 2. Напишите HTML

Напишите или скопируйте следующий HTML-код в Блокнот:


Мой первый заголовок

Мой первый абзац.




Шаг 3. Сохраните HTML-страницу

Сохраните файл на своем компьютере.Выберите Файл> Сохранить как в меню Блокнота.

Назовите файл «index.htm» и установите кодировку UTF-8 (предпочтительная кодировка для файлов HTML).

Совет: В качестве расширения файла можно использовать .htm или .html. Нет никакой разницы, решать только вам.


Шаг 4. Просмотрите HTML-страницу в своем браузере

Откройте сохраненный HTML-файл в своем любимом браузере (дважды щелкните файл, или щелкните правой кнопкой мыши — и выберите «Открыть с помощью»).

Результат будет примерно таким:


Онлайн-редактор W3Schools — «Попробуйте сами»

С помощью нашего бесплатного онлайн-редактора вы можете редактировать HTML-код и просматривать результат в своем браузере.

Это идеальный инструмент, если вы хотите быстро протестировать код . Он также имеет цвет кодирование и возможность сохранять и делиться кодом с другими:

Пример




Заголовок страницы

Это заголовок


Это абзац.


Попробуй сам »

Нажмите кнопку «Попробуйте сами», чтобы увидеть, как это работает.



Как создать HTML-страницу

Файл HTML — это просто текстовый файл, сохраненный с расширением .html или .htm.

Начало работы

Из этого туториала Вы узнаете, как легко создать HTML-документ или веб-страницу.Чтобы начать кодировать HTML, вам понадобятся всего две вещи: простой текстовый редактор и веб-браузер.

Итак, приступим к созданию вашей первой HTML-страницы.

Создание вашего первого HTML-документа

Давайте рассмотрим следующие шаги. В конце этого руководства вы создадите HTML-файл, который отображает сообщение «Hello world» в вашем веб-браузере.

Шаг 1. Создание файла HTML

Откройте текстовый редактор вашего компьютера и создайте новый файл.

Совет: Мы рекомендуем вам использовать Блокнот (в Windows), TextEdit (в Mac) или какой-нибудь другой простой текстовый редактор для этого; не используйте Word или WordPad! Как только вы поймете основные принципы, вы можете переключиться на более продвинутые инструменты, такие как Adobe Dreamweaver.

Шаг 2. Введите HTML-код

Начните с пустого окна и введите следующий код:

  


     Простой HTML-документ 


    

Привет, мир!

Шаг 3: Сохранение файла

Теперь сохраните файл на рабочем столе как «myfirstpage.html «.

Примечание: Важно указать расширение .html — в противном случае некоторые текстовые редакторы, такие как Блокнот, автоматически сохранят его как .txt .

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

Расшифровка кода

Вы можете подумать, что это за код. Что ж, давайте выясним.

  • Первая строка — это объявление типа документа. Он сообщает веб-браузеру, что этот документ является документом HTML5. Регистр не учитывается.
  • Элемент — это контейнер для тегов, который предоставляет информацию о документе, например, тег </code> определяет заголовок документа.</li> <li> Элемент <code> <body> </code> содержит фактическое содержимое документа (абзацы, ссылки, изображения, таблицы и т. Д.), Которое отображается в веб-браузере и отображается для пользователя. </li> </ul> <p> Вы узнаете о различных элементах HTML подробно в следующих главах. А пока просто сосредоточьтесь на базовой структуре HTML-документа. </p> <p> <strong> Примечание: </strong> Объявление DOCTYPE появляется вверху веб-страницы перед всеми другими элементами; однако само объявление doctype не является тегом HTML.Каждый HTML-документ требует объявления типа документа, чтобы гарантировать правильное отображение ваших страниц. </p> <p> <strong> Совет: </strong> Теги <code> <html> </code>, <code> <head> </code> и <code> <body> </code> составляют базовый каркас каждой веб-страницы. Содержимое внутри тегов <code> <head> </code> и <code> </head> </code> невидимо для пользователей за одним исключением: текст между тегами <code> <title> </code> и <code> , который отображается как заголовок на вкладке браузера.


    HTML-теги и элементы

    HTML написан в виде HTML-элементов, состоящих из тегов разметки. Эти теги разметки являются фундаментальной характеристикой HTML. Каждый тег разметки состоит из ключевого слова, заключенного в угловые скобки, например , , , </code>, <code> <p> </code> и т. Д.</p> HTML-теги <p> обычно идут парами, например <code> <html> </code> и <code> </html> </code>. Первый тег в паре часто называется открывающим тегом (или начальным тегом), а второй тег называется закрывающим тегом (или конечным тегом). </p> <p> Открывающий тег и закрывающий теги идентичны, за исключением косой черты (<code>/</code>) после открывающей угловой скобки закрывающего тега, чтобы сообщить браузеру, что команда была завершена. </p> <p> Между начальным и конечным тегами вы можете разместить соответствующее содержимое.Например, абзац, представленный элементом <code> p </code>, будет записан как: </p> <pre> <code> <p> Это абзац. </p> <! - Абзац с вложенным элементом -> <p> Это <b> еще один </b> абзац. </p> </code> </pre> <p> Вы узнаете о различных элементах HTML в следующей главе.</p> <h2><span class="ez-toc-section" id="_HTML-13"> Как создать, сохранить и открыть файл HTML в Блокноте </span></h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> Блокнот <p> — это бесплатный текстовый редактор Windows, предустановленный в наших операционных системах Windows, таких как Windows 7, Windows 8 и Windows 10. Блокнот <br/> создан для написания заметок с помощью компьютера с Windows. Но Блокнот также может создавать, сохранять, редактировать и открывать файлы HTML. <br/> Итак, в этом руководстве мы собираемся обсудить <strong> Как создать, сохранить и открыть файл HTML в Блокноте </strong>.</p> <h3><span class="ez-toc-section" id="i-10"> Открыть текстовый редактор блокнота </span></h3> <p> Как я уже говорил вам ранее, текстовый редактор Блокнота поставляется с предустановленной ОС Windows. Таким образом, вам не нужно загружать и устанавливать Блокнот, если вы используете компьютер с Windows. <br/> Просто перейдите в окно поиска и найдите Блокнот. <br/> Вы найдете Блокнот в результатах поиска. Дважды щелкните, чтобы запустить текстовый редактор Блокнота на вашем компьютере с Windows. </p> <h3><span class="ez-toc-section" id="_HTML-14"> Как использовать Блокнот для HTML </span></h3> Блокнот <p> ничем не отличается от других редакторов HTML.Вы можете открывать, редактировать, сохранять все процессы, которые вы можете делать с помощью других редакторов HTML. <br/> Но текстовый редактор Блокнота не поддерживает многие функции, которые поддерживает другой редактор HTML. Например: <br/> <strong> Подсветка синтаксиса </strong>, <br/> <strong> Предсказание кода </strong>, <br/> <strong> Автоматический генератор кода </strong> <br/> И запуск и закрытие идентификатора тега <strong> </strong>. </p> <p> <strong> Итак, если вам не нужны эти функции, тогда Блокнот для вас. </strong> </p> <h3><span class="ez-toc-section" id="_HTML-15"> Как создать HTML-файл в блокноте </span></h3> <p> Чтобы создать файл HTML с помощью Блокнота, необходимо создать пустой файл.(Который автоматически создается, когда вы запускаете приложение «Блокнот» или можете. Щелкните меню «Файл» в верхнем левом углу и выберите «Новый» оттуда. Это откроет для вас новый пустой файл). <br/> После этого напишите свой HTML-код в блокноте. пустой файл текстового редактора. <br/> Вы успешно создали HTML-файл. Теперь ваш последний шаг — сохранить HTML-файл. </p> <h3><span class="ez-toc-section" id="_HTML-16"> Как сохранить HTML-код в блокноте </span></h3> <p> Чтобы сохранить HTML-код с помощью текстового редактора Блокнота, вам необходимо выбрать меню «Файл» на верхней панели навигации.<br/> Выберите <strong> Save </strong> Option оттуда, <br/> После этого Windows Explorer появится на вашем экране. <br/> Здесь вы должны выбрать расположение для вашего HTML-файла, <br/> Дайте вашему HTML-файлу имя с <strong> .html </strong> <strong> Расширение </strong>, <br/> (чтобы наш браузер мог получить тип файла и запустить этот файл как HTML-документ / веб-страницу ) <br/> И нажмите кнопку «Сохранить», чтобы сохранить HTML-файл. </p> <h3><span class="ez-toc-section" id="_HTML-17"> Как открыть файл HTML в текстовом редакторе Блокнота </span></h3> <p> Чтобы открыть файл HTML или <strong>.html </strong> файл в текстовом редакторе Блокнота, вы должны выполнить следующие шаги: <br/> Выберите <strong> Меню файла </strong>, <br/> Выберите <strong> Открыть опцию </strong> Оттуда, <br/> Шаг 3: <strong> Проводник </strong> появится на вашем экране, <br/> (Найдите ваш HTML-файл <strong> </strong> в проводнике <strong> </strong>) <br/> Шаг 4: <strong> Выберите </strong> и <strong> Откройте </strong> свой HTML-код оттуда. </p> <p> <iframe loading="lazy" title="How to Create, save and Run HTML File" src="https://www.youtube.com/embed/nq5Y-OJEgrA?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""/> </iframe> </p> <h3> </h3><strong> FAQ </strong> о <strong> Как создать, сохранить и открыть файл HTML в Блокноте </strong> </h3> <h4><span class="ez-toc-section" id="_html"> как сохранить html-файл на рабочем столе </span></h4> <p> На рабочем столе вам необходимо использовать текстовый редактор для создания и сохранения HTML-файла.Но если вы уже создали HTML-файл в любом текстовом редакторе, вам просто нужно найти параметр файла в меню «Редакторы», в котором вы создали свой HTML-файл. <br/> После щелчка по меню «Файл» вы увидите дополнительные опции, такие как <br/> <strong> Открыть, <br/> Сохранить </strong>, <strong> <br/> Сохранить как </strong> <br/> и <strong> Печать </strong> ETC. <br/> Выберите <strong> Сохранить </strong> оттуда. <br/> Присвойте файлу имя, за которым следует расширение <strong> <em> .html </em> </strong> и нажмите кнопку <strong> «Сохранить» </strong>, чтобы сохранить файл HTML.</p> <h4><span class="ez-toc-section" id="_-_HTML"> как создать веб-страницу HTML с помощью блокнота </span></h4> <p> Это руководство посвящено тому, как открывать, создавать и сохранять HTML-файл с помощью текстового редактора Блокнота. Но если вы хотите создать целую HTML-страницу с помощью Блокнота. Затем вам нужно знать о HTML-тегах, абзацах, заголовках, изображениях, Div, CSS и других импотентных HTML-элементах, чтобы сделать это. </p> <h4><span class="ez-toc-section" id="_HTML-18"> как сохранить текстовый файл в формате HTML? </span></h4> <p> Если вы хотите сохранить текстовый файл как HTML, вам необходимо переименовать его и изменить его расширение файла с (<strong>.txt </strong>) в (<strong> .html </strong>). Или откройте этот текстовый файл в текстовом редакторе Блокнота и выберите файл на верхней панели навигации. На экране появится меню «Файл», выберите «<strong> Сохранить как </strong>» и «Сохраните файл с расширением <strong> .html </strong>». </p> <h4><span class="ez-toc-section" id="_HTML-_Chrome"> как открыть HTML-файл в Chrome </span></h4> <p> Чтобы открыть или запустить HTML-файл в браузере Chrome, нам нужно дважды щелкнуть этот HTML-файл. Он автоматически откроется в вашем веб-браузере. <br/> Если файл не открывается в браузере, щелкните правой кнопкой мыши этот HTML-файл и выберите оттуда <strong> Открыть с помощью </strong>.<br/> На экране появится небольшое меню со всем списком браузеров. Выберите там форму Chrome, и HTML-файл откроется / запустится в веб-браузере Chrome. </p> <h4><span class="ez-toc-section" id="_html-2"> как сохранить html-файл в блокноте </span></h4> <p> Чтобы сохранить HTML-файл в блокноте, вам необходимо выполнить следующие простые шаги. <br/> 1. Выберите <strong> Файл </strong> Меню. <br/> 2. Выберите <strong> Сохранить опцию </strong> оттуда. <br/> 3. Выберите путь (где вы хотите сохранить HTML-файл). <br/> 4. Дайте <strong> имя </strong> вашему файлу, а затем <strong> <em>.html </em> </strong> расширение. <br/> 5. Нажмите <strong> СОХРАНИТЬ </strong>, и все готово. </p> <h4><span class="ez-toc-section" id="_html-3"> как запустить html-программу в блокноте </span></h4> <p> Невозможно запустить HTML-файл непосредственно из текстового редактора Блокнота. <br/> Итак, вам нужно сначала сохранить HTML-файл. <br/> Чтобы СОХРАНИТЬ HTML-файл: <br/> 1. Выберите <strong> File </strong> Menu. <br/> 2. Выберите <strong> Сохранить опцию </strong> оттуда. <br/> 3. Выберите путь (где вы хотите сохранить HTML-файл). <br/> 4. Дайте <strong> имя </strong> вашему файлу, а затем <strong> <em>.html </em> </strong> расширение. <br/> 5. Нажмите <strong> СОХРАНИТЬ </strong>, и все готово. <br/>, а затем найдите сохраненный файл HTML. <br/> Дважды щелкните файл HTML, чтобы ЗАПУСТИТЬ его. <br/> (Если файл не открывается в браузере) <br/> Затем выполните следующие ШАГИ: <br/> 1. <strong> Щелкните правой кнопкой мыши </strong> на вашем HTML-файле <br/> 2. Выберите <strong> Открыть с помощью опции </strong> оттуда <br/> 3. Выберите свой любимый <strong> веб- браузер </strong> оттуда. <br/> 4. и ваш <strong> СДЕЛАНО </strong>. <br/> </p> <p> Я надеюсь, что этот учебник разрешил все ваши запросы о том, как создавать, сохранять и открывать HTML-файл в Блокноте.<br/> Спасибо за посещение нашего веб-сайта. Желаю хорошо провести время. </p> <h2><span class="ez-toc-section" id="_HTML_HTML"> Создание файла HTML | HTML </span></h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <p> HTML — это язык разметки, который браузеры используют для определения того, как должна отображаться веб-страница. Изучив HTML, вы сможете писать код, описывающий внешний вид веб-сайта, который вы пытаетесь создать. </p> <p> Весь этот HTML-код будет содержаться в файле <code> .html </code>. Это любой файл с расширением <code> .html </code>.Большинство текстовых редакторов, к которым вы привыкли, скорее всего, не смогут сохранять файлы в формате <code> .html </code>. Поэтому первое, что я бы порекомендовал сделать, — это загрузить IDE, поддерживающую HTML. См. Предыдущий урок, чтобы узнать, как это сделать! </p> <p> После того, как вы настроите свою IDE, мы можем приступить к созданию нашего первого файла HTML! </p> <h3><span class="ez-toc-section" id="i-11"> Ваша первая веб-страница </span></h3> <p> Когда мы работаем в HTML, мы создаем веб-страницы. Документы HTML предназначены для чтения и обработки в веб-браузере.Чтобы создать веб-сайт с правильной организацией, мы должны убедиться, что все создаваемые нами HTML-файлы находятся в одной папке. </p> <p> Давайте начнем с создания пустой папки для всех наших HTML-файлов, которые будут продвигаться в этом курсе. Вы можете называть его как хотите, большинство людей назовут его так же, как их веб-сайт. </p> <p> Теперь, когда у нас есть пустая папка, мы можем создать наш HTML-файл. Если ваша среда IDE поддерживает это, я бы порекомендовал добавить эту новую папку в файловый проводник или рабочее пространство среды IDE.Так вам будет легче увидеть, что происходит, не выходя из редактора. </p> <h4><span class="ez-toc-section" id="_indexhtml"> Создание index.html </span></h4> <p> Внутри новой папки создайте файл с именем <code> index.html </code>. <code> index.html </code> — это специальное имя файла, которое указывает, что это веб-страница по умолчанию для данного каталога нашего веб-сайта. </p> <p> Подобно тому, как большинство людей организуют свои файлы в папки и подпапки, веб-сайты также организованы таким же образом. Когда ваш веб-сайт запускается браузером, он будет использовать каталог HTML-файла для определения URL-адреса веб-страницы.Этот URL-адрес относится либо к вашей локальной файловой системе, либо к вашему размещенному веб-сайту. </p> <p> В этом случае все, что вам нужно знать, это то, что когда мы назовем HTML-файл <code> index.html </code> и он находится в корневом каталоге нашего веб-сайта, браузер будет думать, что это домашняя страница нашего сайта! </p> <p> Теперь, когда у нас есть файл, давайте добавим в него текст и протестируем его в браузере. Внутри <code> index.html </code> введите <code> Hello World </code>. </p> <pre> Копия <code> Привет, мир </code> </pre> <p> Это самая простая форма, которую может принять веб-сайт, просто написанный текст.</p> <p> Теперь найдите <code> index.html </code> в своей файловой системе и откройте его в браузере. Должна быть возможность сделать это, и обычно по умолчанию файлы .html открываются в вашем браузере, если вы дважды щелкнете по ним. </p> <p> Когда страница загружается в браузере, она должна сказать <code> Hello World </code>! </p> <p> Хотите верьте, хотите нет, вы только что создали свой первый веб-сайт. Это действительно просто, и в нем всего несколько слов, но это все же веб-сайт, и вы сделали свой первый шаг к тому, чтобы стать веб-разработчиком.</p> <h4><span class="ez-toc-section" id="i-12"> Теги </span></h4> <p> Хотя наш текущий веб-сайт впечатляет сам по себе, технически он не является правильно структурированным HTML-документом. Все HTML-документы должны быть структурированы определенным образом, чтобы гарантировать, что они будут правильно отображаться во всех различных версиях разных браузеров. </p> <p> Наш HTML-документ, содержащий только простой текст, будет отображаться нормально, но если мы попытаемся сделать что-нибудь более сложное, мы рискуем, что некоторые старые браузеры не поймут страницу. </p> <p> Чтобы сделать этот HTML-документ правильным, отформатируем его правильно.</p> <pre> Копировать <code> <! DOCTYPE html> <html> <head> <title> Заголовок моего веб-сайта Привет мир

    Взгляните на обновленный HTML-документ выше. Теперь это правильно структурировано и должно быть понятно каждому браузеру.

    Итак, ваша первая мысль, скорее всего, будет Что это за странные вещи . Это хорошая мысль, если вы впервые видите HTML-код, тогда вам будет интересно, что это такое.

    Символы со знаками < и > называются тегами. HTML-теги используются для структурирования и форматирования HTML-документа и могут использоваться для описания макета веб-сайта.

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

    Контейнерные и неконтейнерные теги

    В HTML есть два основных типа тегов: контейнерные теги и неконтейнерные теги.

    Теги контейнера

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

    Все теги состоят из <...> , имя тега печатается посередине.Конечные теги являются особенными, потому что они содержат / прямо перед именем тега (как вы можете видеть в ).

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

    Далее идут неконтейнерные теги (я иногда называю эти одиночными тегами ).Это теги, у которых нет начального и конечного компонентов, вместо этого они представляют собой единую структуру <... /> . Эти теги будут иметь косую черту рядом со знаком «больше» справа.

    В приведенном выше коде у нас нет неконтейнерных тегов (они встречаются реже), но мы рассмотрим их несколько на протяжении всего курса.

    Изучение кода

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

     Копировать    

    Это объявление DOCTYPE. На самом деле это не технически HTML-тег, а скорее объявление, которое сообщает веб-браузеру, какой это тип файла. Браузер увидит это и будет считать файл HTML-документом.

    После объявления doctype мы можем разместить весь наш HTML:

     Копия  
         
               Заголовок моего веб-сайта 
         
         
              Привет мир
         
      

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

    Внутри этих тегов html у нас есть два различных набора тегов-контейнеров. Теги и теги .

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

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

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

    Сейчас все, что у нас есть, - это текст Hello World , но со временем мы узнаем еще несколько тегов, которые позволят нам больше контролировать то, как этот контент размещается и отображается на странице.

    Внесение изменений

    Теперь, когда в вашем браузере открыто index.html , всякий раз, когда вы хотите что-то изменить, вы можете просто внести изменения в текстовом редакторе, а затем обновить веб-страницу в браузере.

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

    HTML-урок 2: Как вручную создать и сохранить свой первый HTML-файл

    Пришло время запачкать руки и написать свой первый HTML-файл. Начнем с открытия программы для редактирования текста. Если вы работаете на ПК с Microsoft Windows, откройте программу с именем «Блокнот» (найдите ее в меню «Пуск» или просто удерживайте клавишу Windows на клавиатуре и нажмите R, затем введите «блокнот» в командной строке запуска и нажмите ввод) .Если вы используете компьютер Macintosh, запустите приложение под названием «TextEdit» (которое находится в папке «Приложения»).

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

      

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

    Написание HTML похоже на приготовление бутербродов

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

     
    
     

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

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

     
    
     

    Элемент обозначает часть нашего документа, которая будет содержать наше фактическое содержимое (абзацы, изображения и т. Д.…). Вы можете подумать: "Но я думал, что именно это сделали теги ?" Фактически, элемент содержит все, как наш фактический контент (который находится внутри элемента ), так и более сложные элементы, о которых мы узнаем в будущих уроках.А пока просто знайте, что элемент находится внутри элемента .

    Вот как должен выглядеть ваш документ:

     
    
    
        
        
     

    Наконец, забавная часть

    А теперь давайте добавим наш первый фрагмент контента на нашу страницу! Как насчет большого жирного заголовка? Добавьте следующий код под начальным тегом :

     

    Это большой жирный заголовок

    Этот код поднимает хороший вопрос для начинающего программиста: « Как мне узнать, какой элемент использовать? Как вы решили использовать тег

    ?

    Мы решили использовать элемент

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

    ,

    и

    для создания иерархии важности для нашего контента.

    Русские куклы-укладчики

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

    :

     
    • Молоко
    • Хлеб
    • Яйца

    Элемент

      - это код для «Неупорядоченного списка», а элемент
    • - это код для «элемента списка». Как и ваш список покупок на клочке бумаги, список состоит из нескольких элементов.Это отражено в нашем коде; многие элементы нашего списка вложены в наш единственный неупорядоченный список.

      Сохранение документа

      Сейчас хорошее время, чтобы сохранить наш документ, а затем посмотреть, как он будет выглядеть в нашем веб-браузере. В программе редактирования текста нажмите «Файл», а затем «Сохранить». Так что мы находимся на одной странице, давайте условимся назвать файл test.html. очень важно, , чтобы наш файл заканчивался расширением «.html». Это сообщает нашему компьютеру, какой тип файла представляет собой наш документ (конечно же, веб-страница!).Если вы используете Windows PC , не забудьте щелкнуть раскрывающийся список под полем ввода имени файла, помеченный «Сохранить как тип:», и выбрать опцию «Все файлы». Это обеспечит сохранение вашего документа в правильном формате. Продолжайте и сохраните свой документ.

      Просмотр файла в веб-браузере

      Теперь перейдите туда, куда вы выбрали для сохранения файла (я рекомендую создать новую папку на рабочем столе для хранения всех ваших учебных файлов) и дважды щелкните «test.html». Это должно открыть нашу страницу в веб-браузере, и вы должны увидеть довольно простой заголовок, который гласит: «Это большой жирный заголовок», за которым следует маркированный список продуктов.

      Присвойте странице заголовок

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

      Элемент </strong> должен быть сохранен в новом разделе страницы с именем <strong> <head> </strong>.В будущих уроках вы узнаете больше об элементе <strong> <head> </strong>, а пока просто знайте, что он используется для хранения заголовка нашей страницы. Добавьте следующий код непосредственно под начальным тегом <html>: </p> <pre title=""> <заголовок> <title> Моя первая страница

      В программе редактирования текста сохраните документ, затем переключитесь в окно веб-браузера и обновите страницу (нажатие Control + R обновляет на ПК с Windows, а Cmd + R обновляет на компьютере Macintosh).Обратите внимание, что наша страница теперь имеет заголовок в строке заголовка веб-браузера.

      Последний шаг!

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

        

      Это первый раз, когда вы видели знак равенства или кавычки внутри элемента HTML. Вы узнаете об этом новом синтаксисе на следующем уроке (Атрибуты и значения HTML), но пока просто довольствуйтесь копированием и вставкой этого кода и зная, что он делает вашу страницу законченной! Вы только что написали 100% действующую веб-страницу с нуля! Рукой! Это больше, чем могут сказать некоторые профессиональные веб-разработчики.

      Помните, никто никогда не обещал, что ваша первая веб-страница будет красивой! Важно то, что теперь вы знаете, как писать собственный HTML-код и создавать простые веб-страницы. Вы можете подумать: «Да, но я не знаю всех кодов элементов. Если мне никто не скажет, какой элемент использовать для описания части контента, я потеряюсь! " Позвольте мне предложить вам несколько утешительных слов: вы уже знаете больше, чем представляете . Я полагаю, что 95% веб-сайтов используют один и тот же базовый набор элементов HTML, который новичок может быстро и легко освоить.Следуйте остальным моим урокам, и вы быстро овладеете навыками написания HTML!

      Для справки, вот код, который мы только что собрали, целиком:

       
      
      
      
          
      
              
               Моя первая страница 
      
          
      
          
      
              

      Это большой жирный заголовок

      • Молоко
      • Хлеб
      • Яйца

      Если вы предпочитаете смотреть видеоуроки, а не читать письменные уроки, ознакомьтесь с моим 8-часовым видеокурсом и изучите HTML, CSS и адаптивный дизайн профессионального уровня.

      Создайте свой первый проект HTML / CSS

      Требования:

      • Текстовый редактор (мы рекомендуем VS Code)
      • Интернет-браузер
      Введение

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

      Мы рекомендуем вам посмотреть это видео с пояснениями, а затем следовать приведенным ниже инструкциям.

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

      Шаг 1. Создайте структуру папок для своей веб-страницы

      Давайте создадим структуру папок для поддержки вашей веб-страницы. Хорошо продуманная структура папок поможет вам быстро перейти к файлам HTML или CSS, содержащим ваш код.

      Сначала откройте Finder (в Mac) или проводник (в Windows).Затем создайте папку (также известную как каталог) с именем DevProject . Эта папка будет содержать все файлы для вашего проекта HTML и CSS.

      Откройте папку DevProject . Внутри создайте следующие предметы:

      1. Новый файл с именем index.html (используйте предпочитаемый вами текстовый редактор)
      2. Новая папка с именем ресурсов

      Файл index.html будет содержать HTML-код для вашей веб-страницы, а папка resources будет содержать все необходимые ресурсы, необходимые для файлов HTML (файлы CSS, изображения и т. Д.)).

      Затем откройте вновь созданную папку ресурсов и . Внутри этой папки создайте следующее:

      1. Дополнительная папка с именем css

      Папка css будет содержать файлы CSS, необходимые для стилизации вашей веб-страницы.

      Наконец, откройте только что созданную папку css . Внутри этой папки создайте следующее:

      1. Новый файл с именем index.css (используйте предпочитаемый текстовый редактор)

      Индекс .Файл css будет содержать все правила стилей CSS, которые будут применены к вашей веб-странице.

      Эта общая структура папок поможет поддерживать рабочий процесс при добавлении файлов или ресурсов. Вот как это должно выглядеть на высоком уровне:

      Шаг 2. Добавьте контент на свою веб-страницу

      Отлично! Имея структуру папок, файлы HTML и CSS в нужном месте, мы можем добавлять контент на веб-страницу.

      Сначала откройте файл index.html в предпочитаемом текстовом редакторе.Затем добавьте необходимый шаблонный HTML-код:

      .
       
        

      После добавления стандартного HTML-кода вы можете также добавить следующие элементы:

      1. Ваш собственный заголовок между тегами </code> </li> <li> Ваше собственное содержимое в тегах <code> <body> </code>. Если вам нужно какое-то быстрое заранее написанное содержимое, не стесняйтесь использовать следующее и изменять по своему усмотрению: </li> </ol> <pre> <pre> <code> <p> <h2><span class="ez-toc-section" id="i-29"> Имя Фамилия </span></h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <p> Я учусь программировать на Codecademy! В мои цели входят: </p> <ul> <li> Научитесь программировать </li> <li> Начать компанию </li> <li> Помогите миру </li> </ul> <p> Это один из моих любимых веб-сайтов: <a href = "https: // www.google.com/ "target =" _ blank "> Google </a> </p> </p> </code> </pre> </pre> <p> Наконец, откройте файл <strong> index.css </strong> в предпочитаемом текстовом редакторе. Добавьте в файл следующие предварительно записанные правила CSS (не стесняйтесь изменять по своему усмотрению): </p> <pre> <pre> <code> <p> * { семейство шрифтов: Helvetica, Arial, sans-serif; } h2 { цвет: SeaGreen; } п, li { размер шрифта: 18 пикселей; } a { текстовое оформление: нет; } </p> </code> </pre> </pre> <p> Обязательно сохраните изменения для обоих файлов! </p> <h5><span class="ez-toc-section" id="_3_HTML_CSS"> Шаг 3. Свяжите файл HTML и файл CSS </span></h5> <p> Оказывается, добавленный HTML-контент не будет стилизован под правила CSS, если только не <strong> index.html </strong> и <strong> index.css </strong> связаны между собой. В разделе <code> <head> </code> свяжите таблицу стилей с файлом HTML. </p> <pre> <pre> <code> <p> <link href = "./ resources / css / index.css" type = "text / css" rel = "stylesheet"> </p> </code> </pre> </pre> <p> Вам может быть интересно, почему для атрибута <code> href </code> установлено значение <code> ./resources/css/index.css </code>. Это связано с тем, что вы должны точно указать, где находится файл <strong> index.css </strong> в вашей папке (папках) <em> относительно </em>, где находится индекс <strong>.html </strong> жив (в противном случае два файла не будут связаны). </p> <p> Если у вас возникли проблемы со связыванием HTML и CSS, обратитесь за помощью на форумы сообщества Codecademy. </p> <p> Опять же, не забудьте сохранить изменения! </p> <h5><span class="ez-toc-section" id="_4-2"> Шаг 4. Просмотрите свой проект </span></h5> <p> Отличная работа - давайте взглянем на вашу веб-страницу в браузере. </p> <p> Откройте предпочтительный веб-браузер. В строке меню нажмите «Файл», а затем нажмите «Открыть файл…» (или аналогичный). Перейдите к файлу <strong> index.html </strong> и нажмите «Открыть» (или аналогичный).Браузер должен загрузить вашу веб-страницу. Что ты видишь? </p> <p> На этом этапе вы можете вносить изменения в свой код HTML или CSS. Имейте в виду, что для просмотра любых <em> новых </em> изменений, которые вы вносите, вам необходимо обновить страницу в браузере. </p> <h5><span class="ez-toc-section" id="i-30"> Обзор </span></h5> <p> Поздравляю! За это короткое время вы узнали, как взять то, что вы изучили на Codecademy, и применить это с помощью инструментов, имеющихся на вашем персональном компьютере. Вы успешно научились: </p> <ol> <li> Создайте структуру папок для поддержки рабочего процесса и веб-страницы </li> <li> Добавить содержимое HTML и стили CSS в соответствующие файлы </li> <li> Свяжите файлы HTML и CSS вместе </li> <li> Просмотрите свою веб-страницу в браузере (и обновите браузер, чтобы увидеть новые изменения) </li> </ol> <p> В целом четыре приведенных выше пункта являются хорошей отправной точкой для вашего собственного рабочего процесса разработчика.По мере того, как вы узнаете больше, вы можете изменить рабочий процесс в соответствии со своими потребностями. На этом этапе вы можете изменить содержимое веб-страницы или создать совершенно новый проект. Удачного кодирования! </p> <h2><span class="ez-toc-section" id="i-31"> Создание и просмотр веб-страницы на вашем компьютере </span></h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <h3><span class="ez-toc-section" id="i-32"> Создание и просмотр веб-страницы на вашем компьютере </span></h3> <h5> </h5><strong> Требования: </strong> </h5> <ul> <li> Текстовый редактор </li> <li> Интернет-браузер </li> <li> Пройдена первая часть курса «Изучение HTML и CSS» от Codecademy. </li>. </ul> <h5> </h5><strong> Введение </strong> </h5> <p> Когда вы переходите на веб-страницу в Интернете, браузер выполняет много работы.Браузер читает все необходимые файлы (HTML, CSS и JavaScript) и интерпретирует эти необработанные ресурсы, чтобы нарисовать сложную страницу, которую вы видите. </p> <p> Из этой статьи вы узнаете, как создать веб-страницу с помощью текстового редактора на своем компьютере, а затем просмотреть ее в браузере. Если вы хотите опубликовать свою веб-страницу во всемирной паутине (Интернет) для всеобщего обозрения, ознакомьтесь с этой статьей после того, как поймете описанные ниже действия. </p> <h5> </h5><strong> Шаг 1. Откройте текстовый редактор </strong> </h5> <p> Первый шаг - открыть текстовый редактор.Важно использовать «необработанный» текстовый редактор, а не форматированный текстовый редактор. </p> <p> Текстовые процессоры вставляют символы, которые улучшают внешний вид страницы, но не являются допустимым HTML. Это отличные инструменты для создания стильных документов, таких как научные статьи и листовки, но они также могут вставлять символы, не соответствующие формату HTML. Поскольку файл веб-страницы должен содержать допустимый HTML, текстовый редактор - лучший инструмент для создания веб-страниц, чем текстовый процессор. </p> <h5> </h5><strong> Шаг 2. Напишите свой HTML-скелет </strong> </h5> <p> Теперь, когда ваш текстовый редактор открыт, вы можете начать писать свой HTML.Как вы узнали из первого урока курса HTML и CSS, есть несколько вещей, которые всегда присутствуют в хорошо отформатированном HTML-файле. Вот они снова все вместе: </p> <pre> <pre> <code> <p> <! DOCTYPE html> <html> <head> <title> Моя первая веб-страница!

        Привет, мир!

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

        Шаг 3. Сохраните файл

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

        1. Используйте расширение HTML-файла .html , т. Е. about_me.html
        2. Не используйте в имени файла пробелы или специальные символы.Вместо этого используйте символы подчеркивания (_) или тире (-).
        3. Решите, где на вашем компьютере вы сохраните файл, и обязательно запомните это место!
        Используйте расширение файла
        .html HTML

        Расширение файла - это суффикс имени файла, описывающий его тип. Расширение файла - это всегда последние 3 или 4 символа в имени файла, которым предшествует точка. Например, расширение HTML-файла - .html , и оно сообщает браузеру (и другим приложениям) интерпретировать содержимое файла как веб-страницу.Обратите внимание, что на старых веб-страницах вы можете видеть .htm , но это архаично и больше не используется.

        Не используйте пробелы или специальные символы в имени файла

        Выбирая имя файла, будьте проще. Придерживайтесь цифр и букв. Используйте символы подчеркивания ( _ ) или тире () вместо пробелов. Не используйте знаки процента, косые черты, вопросительные знаки, восклицательные знаки, запятые и другие «специальные символы». Браузеру необходимо найти файл по его имени, а специальные символы в имени файла могут прервать этот процесс.Имена файлов должны быть простыми и соответствовать соглашениям, чтобы сделать переход на вашу веб-страницу более надежным.

        Решите, где на вашем компьютере вы сохраните файл

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

        Шаг 4. Откройте свою веб-страницу в браузере

        Теперь вы готовы просматривать новую страницу в браузере! Сначала откройте свой браузер. В верхнем меню нажмите Файл> Открыть файл . Перейдите в место, где вы сохранили свою веб-страницу. Щелкните файл своей веб-страницы, а затем щелкните Открыть .Вы должны увидеть свою веб-страницу!

        Обзор

        За это короткое время вы узнали, как взять то, что вы изучаете на Codecademy, и использовать на своем персональном компьютере. Вы также узнали о расширениях файлов, текстовых редакторах, а также о сохранении и просмотре локальных файлов. Теперь вы готовы испытать все, что вы узнаете в Codecademy, на себе и практиковаться самостоятельно!

        .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *