Как выглядит html файл

Что значит html и как легко можно создать html файл? | Интернет

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

HTML – сокращение от HyperText Markup Language, что переводится как язык гипертекстовой разметки.
Содержание:

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

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

По сути, html – это изнанка страниц многих сайтов. Часто их красивое оформление создается с помощью языка разметки html. Иначе это еще называют создание страниц с помощью html верстки.

Сайты могут создаваться и на других языках программирования, например, на языке php.

Ученый из Британии Тим Бернерс Ли разработал язык html в 1986-1991 годах в Швейцарии. По сути html позволяет создавать простые, но при этом красивые документы. Уже позже в html были добавлены мультимедийные возможности (видео и т.п.) и поддержка работы с гипертекстом (для создания гиперссылок).

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

• Mozilla Firefox (Мозилла Фаерфокс),
• Internet Explorer (Интернет Эксплорер),
• Google Chrome (Гугл Хром),
• Opera (Опера),
• Яндекс (Yandex) браузер,
• Safari (Сафари) и
• другие.

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

Что такое html страница?

Документы, файлы, страницы, созданные на языке  html, имеют расширение вида .html или .htm. Например, html-страница (или html-файл, или html-документ) может иметь название вида:

• тест.html,
• html,
• html или
• название.html.

Строго говоря, тест.html – это имя файла (или имя страницы), где

• тест – имя файла, а
• .html – расширение имени файла (или расширение имени страницы), которое обычно просто называют «расширение».

Сейчас более распространенным вариантом вместо слова «расширение» стало слово «формат».  Поэтому выражение «формат html» означает, что файл (или страница) написан на языке html и имя такого файла имеет расширение html. Значит,

файл c именем тест.html имеет формат html.

Операционная система Windows по умолчанию скрывает расширения файлов (то есть, форматы файлов).  Программисты сделали это «не со зла», а для того, чтобы уберечь пользователя от бездумного изменения расширений файлов. Можно сделать так, чтобы по умолчанию расширения файлов были открыты. В Windows 7 для этого:

• кликаем по кнопке Пуск,
• открываем Панель управления,
• находим Параметры папок,
• открываем вкладку Вид, прокручиваем в самый низ и
• убираем галочку напротив опции «Скрывать расширения для зарегистрированных типов файлов»,
• жмем «ОК».

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

В Интернете также встречаются сайты-одностранички, состоящие всего из одной html страницы. Например, это может быть

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

Язык HTML постоянно развивается и на сегодняшний день существует несколько его версий, начиная от HTML 2.0  от 22 сентября 1995 года и заканчивая последней версией языка HTML 5 от 28 октября 2014 года. В сентябре 2016 года планируется выпуск HTML 5.1.

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

HTML – это язык разметки документов с помощью тегов. Теги заключаются в треугольные скобки “< >”. Теги могут быть парными и непарными.

• Например, тег “b”, заключенный в треугольные скобки, делает текст жирным

<b>текст, выделенный жирным</b>

В результате получится так: текст, выделенный жирным

• А тег “i” делает текст курсивным.

<i>текст, выделенный курсивом</i>

В результате получим: текст, выделенный курсивом

• Есть еще тег для перевода строки “br”.
• С помощью тега “a href” выделяют гиперссылку.
• Тег для заголовка документа – <head>. Это тег, открывающий документ. Он является парным в том смысле, что для него обязательно нужен закрывающий тег со слешем </head>.
• После заголовка идет основная часть, которая находится между открывающим тегом <body> и закрывающим тегом </body>. Этот тег так же, как тег head, является парным: его нужно открыть и не забыть закрыть.

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

Тегов HTML существует много, в Интернете можно без труда найти учебники HTML.

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

Создать самостоятельно html страницу (или html файл) на своем компьютере и запустить свое творение в браузере очень просто.

1) Открываем Блокнот (простой текстовый редактор, который входит в состав Windows). Его можно найти на своем компьютере, введя в строку Поиск запрос: Блокнот.

2) Копируем и вставляем в Блокнот следующий текст:

<html>
<head>
<!– Информация о HTML-документе –>
</head>
<body>
<!– Содержание страницы –>
Привет! Это моя первая HTML страница.<br>
Вторая строка, ура!
</body>
</html>

3) Важный момент, без которого html файл не будет работать: в Блокноте сохраняем файл строго(!) в формате html, как показано на скриншоте. Файл можно для простоты сохранить на Рабочем столе на своем компьютере.

1 на рис. 2 – Кликаем «Рабочий стол», чтобы там сохранить html файл.
2 на рис. 3 – Открываем выпадающее меню напротив «Тип файла».
3 – В этом меню выбираем «Все файлы».
4 – вводим любое имя (у меня 001) и после точки обязательно(!) вводим html.
5 на рис. 2 – жмем «Сохранить».

4) На Рабочем столе находим файл 001.html:

У меня браузером по умолчанию является Google Chrome, поэтому значок у файла имеет вид значка этого браузера. Если будет другой браузер по умолчанию, то у файла 001.html будет другой значок.

Кликаем по файлу (рис. 3) 2 раза мышкой и в итоге видим в браузере свою первую страницу на html:

Таким образом, у нас получилась локальная страница html в том смысле, что она доступна только с вашего, локального компьютера. Чтобы страница была доступна другим, надо ее загрузить в Интернет. Точнее, разместить  на хостинге, который доступен всегда: 24/7/365 (24 часа в сутки, 7 дней в неделю, весь год). Тогда такую страницу сможет увидеть каждый пользователь Интернета.

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

Другие материалы:

Недостатки бесплатного хостинга для сайта

Как зарегистрировать хостинг, домен и сайт на timeweb

Что значит хэштег и как им пользоваться?

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

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

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

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

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

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

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

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

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

Структура HTML-кода | htmlbook.ru

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

Пример 4.1. Исходный код веб-страницы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Пример веб-страницы</title> </head> <body> <h2>Заголовок</h2> <!-- Комментарий --> <p>Первый абзац.</p> <p>Второй абзац.</p> </body> </html>

Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под именем example41.html. После этого запустите браузер и откройте файл через пункт меню . В диалоговом окне выбора документа укажите файл example41.html. В браузере откроется веб-страница, показанная на рис. 4.1.

Рис. 4.1. Результат выполнения примера

Далее разберем отдельные строки нашего кода.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.

Существует несколько видов <!DOCTYPE>, они различаются в зависимости от версии HTML, на которую ориентированы. В табл. 4.1. приведены основные типы документов с их описанием.

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

Например, в строгом HTML и XHTML непременно требуется наличие тега <title>, а в переходном HTML его можно опустить и не указывать. При этом помним, что браузер в любом случае покажет документ, независимо от того, соответствует он синтаксису или нет. Подобная проверка осуществляется при помощи валидатора и предназначена в первую очередь для разработчиков, чтобы отслеживать ошибки в документе.

В дальнейшем будем применять преимущественно строгий <!DOCTYPE>, кроме случаев, когда это оговаривается особо. Это позволит нам избегать типичных ошибок и приучит к написанию синтаксически правильного кода.

Часто можно встретить код HTML вообще без использования <!DOCTYPE>, веб-страница в подобном случае все равно будет показана. Тем не менее, может получиться, что один и тот же документ отображается в браузере по-разному при использовании <!DOCTYPE> и без него. Кроме того, браузеры могут по-своему показывать такие документы, в итоге страница «рассыплется», т.е. будет отображаться совсем не так, как это требуется разработчику. Чтобы не произошло подобных ситуаций, всегда добавляйте <!DOCTYPE> в начало документа.

 <html>

Тег <html> определяет начало HTML-файла, внутри него хранится заголовок (<head>) и тело документа (<body>).

 <head>

Заголовок документа, как еще называют блок <head>, может содержать текст и теги, но содержимое этого раздела не показывается напрямую на странице, за исключением контейнера <title>.

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Тег <meta> является универсальным и добавляет целый класс возможностей, в частности, с помощью метатегов, как обобщенно называют этот тег, можно изменять кодировку страницы, добавлять ключевые слова, описание документа и многое другое. Чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.

 <title>Пример веб-страницы</title>

Тег <title> определяет заголовок веб-страницы, это один из важных элементов предназначенный для решения множества задач. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера (рис. 4.2).

Рис. 4.2. Вид заголовка в браузере

Тег <title> является обязательным и должен непременно присутствовать в коде документа.

</head>

Обязательно следует добавлять закрывающий тег </head>, чтобы показать, что блок заголовка документа завершен.

<body>

Тело документа <body> предназначено для размещения тегов и содержательной части веб-страницы.

<h2>Заголовок</h2>

HTML предлагает шесть текстовых заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег <h2> представляет собой наиболее важный заголовок первого уровня, а тег <h6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги <h2>...<h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.

 <!-- Комментарий -->

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

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

 <p>Первый абзац.</p>

Тег <p> определяет абзац (параграф) текста. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.

 <p>Второй абзац.</p>

Тег <p> является блочным элементом, поэтому текст всегда начинается с новой строки, абзацы идущие друг за другом разделяются между собой отбивкой (так называется пустое пространство между ними). Это хорошо видно на рис. 4.1.

</body>

Следует добавить закрывающий тег </body>, чтобы показать, что тело документа завершено.

</html>

Последним элементом в коде всегда идет закрывающий тег </html>.

Структура HTML файла

Рассмотрим пример упрощённого HTML файла, страницы сайта:

<!DOCTYPE html>
 <html>
 <head>
 Свойства страницы, правила отображения, стили, скрипты, подключаемые файлы
 </head>
 <body>
 Содержание страницы
 </body>
 </html>

<!DOCTYPE html> - эта строчка говорит о том, что документ является html файлом. Следовательно, браузер сможет показать его как html страницу.

<html> ... </html> - это парный тег (у него есть открывающая часть <html> и закрывающая </html>, которые различаются наличием слеша "/"). Внутри него заключено всё тело html документа.

<head> ... </head> - всё, что находится внутри этого тега не выводится на экран. Но в нём содержится важная информация, которая поможет браузеру правильно показать страницу. К примеру, в этом теге могут находиться указание кодировки и языка страницы, правила отображения, стили и скрипты.

<body> ... </body> - этот тег, внутри которого находится отображаемая область страницы.

Пример html страницы

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Про мышей</title>
</head>
<body> Тише, мыши, кот на крыше,<br>
а котята ещё выше.<br>
Кот пошёл за молоком,<br>
а котята кувырком.<br>
Кот пришёл без молока,<br>
а котята ха-ха-ха. </body>
</html>

Второе изменение касается содержания тега <head> ... </head>. Здесь в первой строчке появилось указание на кодировку текста <meta charset="utf-8">. Тег "meta" называется метатегом.

Если сохранить html файл с одной кодировкой, а в "meta" написать другую, то все буквы в документе будут отображаться браузером как непонятные значки.

Внутри тега <body> ... </body> появился текст стихотвориения. Каждая строчка этого стиха заканчивается на тег <br>, который говорит браузеру о том, что должна начаться новая строка. Если убрать все теги <br>, то браузер отобразит стихотворение как одну длинную строку без переносов. Обратите внимание, что тег <br> не имеет закрывающей пары по аналогии с <body> ... </body> или <head> ... </head>.

Ради практики создайте файл на своём компьютере с любым названием и расширением ".html". К примеру, "page.html". Затем откройте его любым текстовым редактором и вставьте в него код из примера выше. Сохраните файл. Кликните на файл два раза и он откроется в браузере. Теперь измените что-либо в файле, сохраните и перезагрузите страницу в браузере.

Комментарии в HTML коде

<!DOCTYPE html>
<html>
<head>
<!-- Комментарий в разделе head -->
</head>
<!-- Комментарий между блоками head и body-->
<body>
<!-- Комментарий в теле страницы -->
</body>
</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 Academy

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

Шаг 1. Качаем текстовый редактор

Для того, чтобы написать код, сгодится вообще любой текстовый редактор. Подойдёт даже «Блокнот» на вашем компьютере (но в нём очень неудобно всё делать). Мы скачаем и установим хороший редактор, заточенный под веб-разработку. Покажем всё на примере Visual Studio Code.

Зайдите на https://code.visualstudio.com/ и скачайте редактор. Если у вас Windows, то нажмите на любую из синих кнопок. Если OS X или Linux — нажмите Other platforms.

Установка пройдёт как обычно — нужно запустить файл VSCodeUserSetup, много раз нажать «Далее» и поставить пару галочек.

Шаг 2. Запускаем редактор и осматриваемся

Свежеустановленный VS Code встречает нас экраном с большим количеством ссылок. С ними можно познакомиться позже, а сейчас нужно настроить всё для работы.

Хорошо бы, чтобы во время работы все нужные файлы лежали в одной папке (пока проект маленький, так можно делать). Для этого добавим рабочую папку, чтобы VS Code показывал нам только её содержимое.

По шагам на скриншоте:

1. Add workspace folder — открывает меню выбора папки.
2. Создадим новую папку personal_page в любом удобном месте и зайдём в неё.
3. Нажмём Add.

После этого слева появится панель Explorer с пустым рабочим пространством Untitled (Workspace). Мы создали папку, давайте её наполним.

Шаг 3. Добавляем файлы

После создания папка пустая. Щёлкнем правой кнопкой по заголовку personal_page и добавим три файла, которые понадобятся в работе — index.html, style.css и script.js. Для начала этого хватит.

Шаг 4. Делаем работу удобнее

Сейчас все три файла открыты во вкладках, и между ними не всегда удобно переключаться. Чтобы было удобнее, код со стилями можно перенести в другую часть окна, например, вниз. Для этого нажмите правой кнопкой по вкладке со style.css и выберите split down,чтобы увидеть результат.

Шаг 5. Добавляем код

Пока отредактируем только index.html (файл с разметкой) и style.css (файл со стилями), а script.js оставим на будущее. Если у вас уже есть какой-нибудь код, напишите его, или используйте готовый — мы, например, возьмём код из интерактивных курсов.

index.html

<!DOCTYPE html>
 <html lang="ru">
 <head>
 <title>Сайт начинающего верстальщика</title>
 <link rel="stylesheet" href="style.css">
 </head>
 <body>
 <header>
 <nav>
 На главную
 </nav>
 </header>
 <main>
 <article>
 День первый. Как я забыл покормить кота
 
 Кто бы мог подумать, что семантика это так важно, мне срочно нужно было об этом поговорить.
 
 Взгляд упал на кота. Кот издал настойчивое «Мяу». И я понял — пришло время для первой записи в блог. И покормить кота.
 </article>
 <aside>
 Здесь могла быть ваша реклама.
 </aside>
 </main>
 <footer>
 Подвал сайта
 </footer>
 </body>
 </html>

style.css

Скопируем код со стилями из файла https://htmlacademy.ru/assets/courses/299/outlines.css — откройте его в браузере, скопируйте все строки и вставьте в файл style.css в редакторе.

Шаг 6. Запускаем код и смотрим на результат

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

Давайте настроим всё так, чтобы наша страничка открывалась сама и обновлялась, если вы что-то изменили в разметке или стилях.

Для этого нам понадобится расширение Live Server. Найти его можно прямо в VS Code (пятая иконка в меню слева) — введите название и нажмите Install. Другой способ — скачать Live Server из магазина расширений, но это менее удобно.

После установки расширения Windows может попросить разрешение на доступ к сети. Это нужно, чтобы запускать локальный сервер, Разрешайте, это безопасно.

Чтобы запустить код, нажмите кнопку Go Live на нижней панели.

Результат выглядит так. Слева — редактор, справа — браузер. Теперь измените код в редакторе и сохраните его, а он автоматически изменится и в окне браузера.

Что мы сделали

1. Установили и настроили редактор кода.
2. Создали рабочую папку и добавили туда файлы нашего проекта.
3. Научились редактировать и сохранять файлы с кодом.
4. Установили расширение, чтобы сразу видеть результат вёрстки.

В следующих частях — о добавлении и проверке кода на JavaScript, и о том, как сделать работу с кодом ещё удобнее. Подпишитесь на нашу рассылку, чтобы не пропустить следующие выпуски.

Не знаете, какой код написать?

Знакомство с HTML и CSS на интерактивных курсах — бесплатно.

Нажатие на кнопку — согласие на обработку персональных данных

Внеклассное чтение:

Пути к HTML-файлам

Путь к файлу описывает расположение файла в структуре папок веб-сайта.

Примеры путей к файлам

Путь	Описание
	Файл "picture.jpg" находится в той же папке, что и текущая страница.
	Файл "picture.jpg" находится в папке изображений в текущей папке
	Файл "picture.jpg" находится в папке изображений в корне текущего веб-сайта.
	Файл "picture.jpg" находится в папке на один уровень выше текущей папки

Пути к HTML-файлам

Путь к файлу описывает расположение файла в структуре папок веб-сайта.

Пути к файлам используются при связывании с внешними файлами, например:

• Интернет-страницы
• Изображения
• Таблицы стилей
• Скрипты Java

Абсолютные пути к файлам

Абсолютный путь к файлу - это полный URL-адрес файла:

Пример

Попробуйте сами »

Тег объясняется в главе: Изображения HTML.

Относительные пути к файлам

Относительный путь к файлу указывает на файл относительно текущей страницы.

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

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

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

Лучшая практика

Лучше всего использовать относительные пути к файлам (если возможно).

При использовании относительных путей к файлам ваши веб-страницы не будут привязаны к текущему базовый URL. Все ссылки будут работать как на вашем собственном компьютере (localhost), так и на ваше текущее общественное достояние и ваши будущие общедоступные домены.

Что такое HTML (язык гипертекстовой разметки)?

Обновлено: 06.03.2020, Computer Hope

Впервые разработанный Тимом Бернерсом-Ли в 1990 году, HTML является сокращением от Hypertext Markup Language . HTML используется для создания электронных документов (называемых страницами), которые отображаются во всемирной паутине. Каждая страница содержит серию подключений к другим страницам, называемых гиперссылками. Каждая веб-страница, которую вы видите в Интернете, написана с использованием той или иной версии HTML-кода.

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

Как выглядит HTML-тег?

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

Большинство тегов заключены в угловые скобки «меньше» и «больше», и все, что находится между тегом open и close, отображается или затрагивается тегом. В приведенном выше примере тег создает ссылку под названием «Computer Hope», указывающую на надежду.html файл.

        
 Это заголовок 
 
 Это  пример  базовой HTML-страницы.