Как создать веб-страницу в формате HTML?

Есть много способов создать веб-сайт в Интернете. Вы можете использовать системы управления контентом, такие как WordPress, или фреймворк, например Bootstrap. Тем не менее, рекомендуется изучить основы, прежде чем вы начнете использовать инструменты для создания веб-сайтов в Интернете. Что ж, создание веб-страницы больше не является сложной задачей, и в этой статье мы объясним, как создать веб-страницу в формате HTML.

Создание веб-страницы в формате HTML — что вам нужно?

Для того, чтобы создать веб-страницу на вашем компьютере, вам понадобится следующее:

  • Компьютер — возможно, вы читаете этот контент, используя
  • Текстовый редактор — в этом примере мы будем использовать Блокнот, вы можете использовать TextEdit на Mac.
  • Веб-браузер — например, Microsoft Edge в Windows и Safari в macOS. Однако мы рекомендуем использовать Google Chrome для кроссплатформенной совместимости.

Если вы действительно хотите опубликовать свой сайт в сети, вам нужно еще несколько дополнительных вещей:

  • Интернет-соединение
  • Провайдер веб-хостинга — для загрузки и хранения ваших страниц.
  • Ваше собственное доменное имя или бесплатный домен от хостинговой компании

Здесь мы объясняем, как создать и просмотреть веб-сайт с несколькими страницами на вашем локальном компьютере. Узнайте больше о том, как владеть своим сайтом в реальной сети.

Базовая структура HTML-страницы

Веб-страница содержит размеченное HTML-содержимое, которое затем интерпретируется браузерами для отображения в соответствующем формате. Ниже приведен скелет простой веб-страницы, которая обычно начинается с тега . Любой текст, введенный между , считается комментарием и не отображается в браузере.

<HTML> <!-- Starting of HTML document -->
<HEAD><!-- Header section of your document contains title, other things like META tags and script-->
<TITLE><!-- This is the title shown in the browser title bar --> </TITLE>
</HEAD>
<BODY>
<!-- Here is where all your content goes! -->
</BODY>
</HTML>

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

Структура HTML-тега
Структура HTML-тега

Добавление дополнительного содержимого и форматирования

Как насчет добавления заголовка, горизонтальной линейки и абзаца к основному каркасу?

<HTML> 
<HEAD>
<TITLE> This is my first webpage </TITLE>
</HEAD>
<BODY>
<H1>Days in a Week are</H1><!-- This is the Heading of Your Page -->
<P ALIGN=CENTER> <!-- This is a paragraph opening-->
Monday<BR> <!-- <BR> is for line break -->
Tuesday<BR>
Wednesday<BR>
Thursday<BR>
Friday<BR>
Saturday<BR>
Sunday<BR>
</P> <!-- Paragraph closing -->
<HR SIZE=4 WIDTH="100%"> <!-- <HR> is for horizontal rule --> 
</BODY>
</HTML>

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


  • — разрыв строки и

  • — Горизонтальное правило

Точно так же тег изображения также не имеет закрывающей части.

Сохранение вашей HTML-страницы

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

  • Сначала скопируйте приведенный выше образец HTML-кода.
  • Откройте Блокнот в Windows или TextEdit в macOS. Далее мы объясним с помощью Блокнота, вы можете выполнить аналогичный процесс в macOS.
  • Вставьте скопированный код в Блокнот.
  • Сохраните файл как «myfirstwebpage.html» (или дайте любое имя, но не забудьте сохранить файл с расширением .html).
  • Теперь значок файла покажет символ вашего браузера по умолчанию.
  • Откройте файл в любом веб-браузере, чтобы увидеть форматированный дисплей, как показано ниже.
Первая HTML-страница в браузере Chrome
Первая HTML-страница в браузере Chrome

Это все!!! Теперь вы успешно создали свою первую веб-страницу HTML.

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

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

  • Создайте еще два текстовых файла и назовите их «mysecondpage.html» и «migirdpage.html» соответственно.
  • Создайте новую папку и сохраните в ней все три файла, как показано ниже:
Сохранить файлы в той же папке
Сохранить файлы в той же папке

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

<HTML> 
<HEAD>
<TITLE> This is my first webpage </TITLE>
</HEAD>
<BODY>
<H1>Days in a Week are</H1><!-- This is the Heading of Your Page -->
<P ALIGN=CENTER> <!-- This is a Paragraph -->
Monday<BR> <!-- <BR> is for line break -->
Tuesday<BR>
Wednesday<BR>
Thursday<BR>
Friday<BR>
Saturday<BR>
Sunday<BR>
<HR SIZE=4 WIDTH="100%"> <!-- <HR> is for horizontal rule --> 
<a href="https://www.webnots.com/how-to-create-a-website/contact.html">This is My Second Page</a> <!-- Linking Second Page -->
<a href="sitemap.html">This is My Third Page</a> <!-- Linking Third Page -->
<HR SIZE=4 WIDTH="100%"> <!-- <HR> is for horizontal rule! --> 
</BODY>
</HTML>

Как это будет выглядеть?

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

Связывание страниц вместе
Связывание страниц вместе

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

Использование правильного текстового редактора

Если вы хотите изучить HTML, мы рекомендуем использовать подходящий текстовый редактор, например Brackets. Это поможет вам автоматически создавать закрывающие теги, выделять отсутствующие теги и обеспечивать мгновенный просмотр в реальном времени с помощью Google Chrome.

Редактор кода скобок
Редактор кода скобок

Кроме того, скобки добавят правильные прямые кавычки в ваш код. Это поможет вам избежать неожиданных результатов в процессе обучения. В любом случае избегайте редакторов форматированного текста, таких как Microsoft Word и Apple Pages, для изучения HTML.


Похожие записи

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

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