Как создать веб-страницу? Супер упрощенное объяснение HTML

HTML расшифровывается как язык гипертекстовой разметки. Проще говоря, HTML — это язык, который придает структуру содержимому веб-страницы. Вот и все!

Где записывать HTML?

  • HTML-инструкции нужно сохранять в файле с расширением .html или .htm. Это похоже на то, как мы сохраняем текстовые файлы как .txt, а документы Microsoft Office как .docx.
  • Расширения файлов прямо указывают веб-браузеру, что это HTML-файл и его нужно обработать, а его результат отображается пользователю по веб-адресу URL.

Вот и все!

Структура HTML-документа?

  • Любой HTML-документ имеет следующую базовую структуру

    <html>
    
        <head> 
                    {Special Section that describes the webpage} 
        </head>
    
        <body> 
                    {Put Content to be displayed on webpage here} 
        <body>
    
    </html>
    
  • Инструкции HTML называются «тегами». На фундаментальном уровне существует два типа тегов:

    1. Теги, которые требуют явного открытия и закрытия (например: <html> и </html>).
    2. Самозакрывающиеся теги, т.е. их нужно написать только один раз (например: <hr/>).
  • Кроме того, особенностью HTML является то, что он не чувствителен к регистру, т.е. теги могут быть написаны в верхнем, нижнем регистре или в сочетании обоих. <HTML>, <html> , <hTmL> имеют одинаковое значение. Однако принято писать все HTML-теги в нижнем регистре.

Давайте рассмотрим пример веб-страницы:

<html>
    <head>
        <title>Beautiful Website</title>
    </head>

    <body>

        <h1>Heading Line</h1>

    <hr/>

        <p>This is a line in the paragraph.
      This is another line in our paragraph.
      This is also a line in our paragraph
        </p>

    </body>

</html>
Войти в полноэкранный режим Выход из полноэкранного режима

Результат:

Объяснение:

Давайте рассмотрим каждую из этих команд и что они означают.

  1. Как обычно, весь документ заключен между тегами <html> и </html>.
  2. Далее идет раздел «head», заключенный между тегами <head> и </html> — это специальная информация, которая описывает нашу веб-страницу. Существует множество тегов, которые могут быть заключены в раздел head.

    • Здесь я использовал теги <title> </title>. Содержимое, заключенное в этих тегах, отображается в строке заголовка веб-браузера внизу.
  3. Далее следует раздел «тело», заключенный в <body> </body>.

    • <hr/> — это самозакрывающийся тег, называемый «горизонтальным правилом», который отображает горизонтальную линию в HTML.

Итак, все, что нужно для создания сайта — это HTML?

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

Что такое все теги HTML?

HTML с годами эволюционировал и включил в себя огромный список тегов. Лучший способ найти и понять различные теги HTML — использовать документацию MDN Mozilla https://developer.mozilla.org/en-US/docs/Web/HTML.

Дальнейшее чтение:

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{Name of Webpage}</title>
</head>
<body>
    {Content of HTML document}
</body>
</html>
Вход в полноэкранный режим Выход из полноэкранного режима

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

Попробуйте сами: https://codepen.io/chandanbsd/pen/NWyypjv

Оцените статью
Procodings.ru
Добавить комментарий