Как изменить имя страницы html - Исправление ошибок и поиск оптимальных решений проблем

Download Article

Every web page needs a title. Why doesn’t yours? One of the major tag pairs in HTML is the <title></title> tags; the title tag affects several functions of websites, from the default bookmark titles through to flashing words drawing your attention back to the site, even when in a different tab.

1

Open a text editing program (or IDE) such as Atom, Brackets or even TextEdit or Notepad++.
2

Create the <html> body. Using the <html> tags, create a .html file with either tags on a new line. Make sure to close the tag with </html>.



Add the <head> section. Placing the <head> tags in between the <html> tags, define the head (metadata section) section. Make sure to close the tag with </head>.


Add the <body> section. Below the closing </head> tag and above the closing </html> tag, add the <body> (content section) tags. Make sure to close the tag with </body>.





Optionally, add some 'test' code in the body (or content) section to make sure that you've coded it correctly. If the content shows, it means that the code is parsing (loading). If not, it means that you may have made a typo, or some other thing that is not letting it load.



Adding the Title Tag

Download Article



Add a <title> tag in the head (metadata) section.





Make sure to close the tag with </title>. These two tags can be on the same line. In between the starting and closing title tags, write what you want your title to say.






Testing the Code




  


                       
  




	

	Download Article



Save your file to an easily accessible location. Name your file as something.html, replacing something with what you wish. Remember that the index.html file is the 'home' or 'landing' page of your website.





Open your page in your preferred browser. Browsers like Google Chrome, or Mozilla Firefox are good for front-end website development. Go ahead and open your .html file. You can use short keys like ⌘ Cmd+O or Ctrl+O to open the file in most browsers.





Look at the top of the tab for your title. If your desired title shows, the code has loaded and worked! If not, and it shows your filename instead (something.html), you may have made a mistake; check your code for typos then try again.





Sit back and admire your work. You've just taken the first step to a fully functional website.







{{{1}}}






Learn HTML
Create a Simple Web Page with HTML
Write an HTML Page
Change Text Color in HTML
Use Font Color Tags in HTML

Add New Question

Question

How do I insert the first level heading?

Shehriar Ahmad Awan

Community Answer

You can do it using the H1 tag.

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

Thanks for submitting a tip for review!

About This Article

Thanks to all authors for creating a page that has been read 55,086 times.

Is this article up to date?

Источник

Download Article

1

Open a text editing program (or IDE) such as Atom, Brackets or even TextEdit or Notepad++.
2

Create the <html> body. Using the <html> tags, create a .html file with either tags on a new line. Make sure to close the tag with </html>.



Add the <head> section. Placing the <head> tags in between the <html> tags, define the head (metadata section) section. Make sure to close the tag with </head>.


Add the <body> section. Below the closing </head> tag and above the closing </html> tag, add the <body> (content section) tags. Make sure to close the tag with </body>.





Optionally, add some 'test' code in the body (or content) section to make sure that you've coded it correctly. If the content shows, it means that the code is parsing (loading). If not, it means that you may have made a typo, or some other thing that is not letting it load.



Adding the Title Tag

Download Article



Add a <title> tag in the head (metadata) section.





Make sure to close the tag with </title>. These two tags can be on the same line. In between the starting and closing title tags, write what you want your title to say.






Testing the Code




  


                       
  




	

	Download Article



Save your file to an easily accessible location. Name your file as something.html, replacing something with what you wish. Remember that the index.html file is the 'home' or 'landing' page of your website.





Open your page in your preferred browser. Browsers like Google Chrome, or Mozilla Firefox are good for front-end website development. Go ahead and open your .html file. You can use short keys like ⌘ Cmd+O or Ctrl+O to open the file in most browsers.





Look at the top of the tab for your title. If your desired title shows, the code has loaded and worked! If not, and it shows your filename instead (something.html), you may have made a mistake; check your code for typos then try again.





Sit back and admire your work. You've just taken the first step to a fully functional website.







{{{1}}}






Learn HTML
Create a Simple Web Page with HTML
Write an HTML Page
Change Text Color in HTML
Use Font Color Tags in HTML

Add New Question

Question

How do I insert the first level heading?

Shehriar Ahmad Awan

Community Answer

You can do it using the H1 tag.

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

Thanks for submitting a tip for review!

About This Article

Thanks to all authors for creating a page that has been read 55,086 times.

Is this article up to date?

Источник

There are many ways you can change the title, the main two, are like so:

The Questionable Method

Put a title tag in the HTML (e.g. <title>Hello</title>), then in javascript:

let title_el = document.querySelector("title");

if(title_el)
    title_el.innerHTML = "World";

The Obviously Correct Method

The simplest of all is to actually use the method provided by the Document Object Model (DOM)

document.title = "Hello World";

The former method is generally what you would do to alter tags found in the body of the document. Using this method to modify meta-data tags like those found in the head (like title) is questionable practice at best, is not idiomatic, not very good style to begin with, and might not even be portable. One thing you can be sure of, though, is that it will annoy other developers if they see title.innerHTML = ... in code they are maintaining.

What you want to go with is the latter method. This property is provided in the DOM Specification specifically for the purpose of, as the name suggests, changing the title.

Note also that if you are working with XUL, you may want to check that the document has loaded before attempting to set or get the title, as otherwise you are invoking undefined behavior (here be dragons), which is a scary concept in its own right. This may or may not happen via JavaScript, as the docs on the DOM do not necessarily pertain to JavaScript. But XUL is a whole ‘nother beast, so I digress.

Speaking of `.innerHTML`

Some good advice to keep in mind would be that using .innerHTML is generally sloppy. Use appendChild instead.

Although two cases where I still find .innerHTML to be useful include inserting plain text into a small element…

label.innerHTML = "Hello World";
// as opposed to... 
label.appendChild(document.createTextNode("Hello World"));
// example:
el.appendChild(function(){
    let el = document.createElement("span");
    el.className = "label";
    el.innerHTML = label_text;
    return el;
}());

…and clearing out a container…

container.innerHTML = "";
// as opposed to... umm... okay, I guess I'm rolling my own
[...container.childNodes].forEach(function(child){
    container.removeChild(child);
});

Источник

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

Категории контента	Метаданные.
Разрешённое содержимое	Текст, который не является межэлементным разделителем.
Пропуск тега	Открывающий и закрывающий теги обязательны. Обратите внимание, что отсутствие `</title>` заставляет браузер игнорировать остальную часть страницы.
Разрешённые родительские элементы	Элемент `<head>`, который не содержит других элементов `<title>`.
Разрешённые роли ARIA	Отсутствуют.
DOM-интерфейс	`HTMLTitleElement` (en-US)

Атрибуты

К этому элементу применимы только глобальные атрибуты.

Примечание

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

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

Содержимое заголовка страницы может иметь важное значение для поисковой оптимизации (SEO). Как правило, более длинный описательный заголовок будет лучше ранжироваться (Ranking), чем короткий или скучный. Не только содержимое заголовка является одним из компонентов, используемых алгоритмами для определения порядка, в котором перечисляются страницы в поисковой выдаче, но и сам заголовок является приёмом, которым вы привлекаете внимание читателей бегло просматривающих результаты поиска.

Несколько методических рекомендаций и советов для составления хороших заголовков:

избегайте заголовков состоящих из одного или двух слов. Используйте описательные фразы или сочетание термин-определение для страниц глоссария (словарь терминов) или справки;
поисковые системы, как правило, отображают примерно 55-60 первых символов заголовка страницы. Текст, превышающий это количество символов, может быть потерян, так что постарайтесь, чтобы заголовки не были длиннее. Если вам нужно использовать более длинный заголовок, убедитесь, что важные части появляются раньше и что нет ничего критического в части заголовка, которая может быть отброшена;
избегайте специальных символов, когда это возможно; не все браузеры будут отображать их одинаково. Например, «<» часто отображается в строке заголовка окна как «<» — символ-мнемоника «меньше» в HTML (entity);
не используйте ключевые слова («keyword blobs»). Если ваш заголовок состоит только из списка слов, то алгоритмы будут часто искусственно понижать позицию вашей страницы в поисковой выдаче;
убедитесь, что ваш заголовок является уникальным на вашем сайте, насколько это возможно. Повторяющиеся или частично повторяющиеся заголовки могут способствовать неточным результатам поиска.

Пример

<title>Потрясающий заголовок страницы</title>

Этот пример устанавливает заголовок страницы (отображается в верхней части окна или вкладки браузера) как «Потрясающий заголовок страницы».

Проблемы доступности

Важно указать такое значение title, которое описывает назначение страницы.

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

Пример

<title>Меню - Китайская еда Синий дом - FoodYum: онлайн на вынос сегодня!</title>

Для того чтобы помочь пользователю, обновите значение title, чтобы отразить важные изменения состояния страницы (например, проблемы с проверкой формы).

Пример

Спецификации

Specification
HTML Standard # the-title-element

Поддержка браузерами

BCD tables only load in the browser

Источник

Как изменить название сайта на странице

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

Инструкция

Если вы являетесь владельцем сайта и желаете изменить заголовок той или иной страницы, входящей в его состав, и при этом все страницы на нем являются статическими (система управления содержимым (CMS) отсутствует), откройте HTML-файл с этой страницей в текстовом редакторе. Правильно выберите кодировку файла, при необходимости используйте редактор, допускающий переключение кодировок, либо встроенный редактор хостинга, открывающийся прямо в браузере. Найдите в HTML-коде строку следующего вида:<title>Имя страницы, отображающееся в заголовке вкладки и окна</title>Замените строку на другую, поместите на сервер обновленный вариант HTML-файла, а затем перезагрузите страницу в браузере. Если ничего не изменилось, очистите кеш браузера, после чего снова перезагрузите страницу.

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

В случае если вы желаете, чтобы ссылка на другую страницу, расположенная на вашем сайте, имела вид, отличающийся от URL этой страницы, используйте следующую HTML-конструкцию:<a href=http://server.domain/folder/another-folder/page.html>Это — ссылка на другую страницу!</a>При наведении на такую ссылку курсора мыши пользователь увидит в левом нижнем углу браузера URL, на который эта ссылка ведет. Если другая страница находится на том же сервере, вместо полного пути к ней можно ввести просто имя файла.

Для размещения ссылки со строкой, отличающейся от URL страницы, в форуме, поддерживающем теги с квадратными скобками, используйте другую конструкцию:[URL=http://server.domain/folder/another-folder/page.html]Это — ссылка на другую страницу![/URL]При включении такой ссылки в состав кода на языке разметки Wiki видоизмените эту конструкцию так:[http://server.domain/folder/another-folder/page.html Это — ссылка на другую страницу!]Если же страница, на которую вы ссылаетесь, входит в состав того же вики-проекта, сослаться на нее можно по-другому:[[Страницаномер4|Эта ссылка ведет на страницу номер 4]]Обратите внимание: в первых двух примерах в этом шаге квадратные скобки одинарные, а в третьем — двойные.

Видео по теме

Войти на сайт

или

Забыли пароль?
Еще не зарегистрированы?

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Источник

HTML-элемент <head>
HTML-элемент <title>
HTML-элемент <style>
HTML-элемент <link>
HTML-элемент <meta>
Настройка области просмотра
HTML-элемент <script>
HTML-элемент <base>
Опускаем <html>, <head> и <body>?
Пример, как сделать шапку сайта HTML
Элементы HTML Head

Шапка сайта HTML является контейнером для метаданных, который размещается между тегами <html> и <body>. Метаданные – это информация о HTML-документе. Они не выводятся на страницу.

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

К метаданным относятся следующие теги: <title>, <style>, <meta>, <link>, <script>, и <base>.

Тег <title> отвечает за заголовок документа, и обязателен для всех документов HTML/XHTML.

Элемент <title>:

Задаёт заголовок вкладки в браузере;
Задаёт заголовок страницы, добавленной в «Избранное»;
Выводит заголовок страницы в выдаче поисковой системы.

Пример:

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>
Содержимое документа…
</body>

</html>

Посмотреть демо

Перед тем, как сделать шапку сайта HTML, нужно знать, что тег <style> используется для стилизации отдельной веб-страницы:

Пример:

<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>

Посмотреть демо

Элемент <link> предназначен для указания ссылок на внешние файлы CSS.

Пример:

<link rel="stylesheet" href="mystyle.css">

Посмотреть демо

Перед тем, как написать шапку сайта в HTML, помните, что <meta> используется для указания кодировки, описания страницы, перечисления ключевых слов, автора материала и других метаданных.

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

Определяем используемую кодировку:

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

<meta name="description" content="Free Web tutorials">

Указываем ключевые слова для поисковых систем:

<meta name="keywords" content="HTML, CSS, XML, JavaScript">

Указываем автора материала:

<meta name="author" content="John Doe">

С помощью шапки сайта и ее HTML кода устанавливаем обновление страницы каждые 30 секунд:

<meta http-equiv="refresh" content="30">

Пример метатегов:

Пример:

<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">

Посмотреть демо

В HTML5 с помощью тега <meta> можно контролировать область просмотра (viewport) в окне браузера.

Область просмотра – это часть веб-страницы, видимая для пользователей. Она может отличаться в зависимости от используемого устройства – то есть, на мобильных устройствах она будет меньше, чем на ПК:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Этот элемент шапки сайта HTML даёт браузеру инструкции о размерах области просмотра.

Фрагмент width=device-width отвечает за ширину страницы, которая должна соответствовать ширине экрана устройства.

Фрагмент initial-scale=1.0 устанавливает исходный уровень увеличения при загрузке страницы в браузере.

Взгляните на пример веб-страницы без метатега viewport, и той же страницы с указанным тегом viewport.

Совет: если вы читаете статью на смартфоне или планшете, можете перейти по ссылкам, приведённым под картинками:

Пример без метатега viewport

Пример с метатегом viewport

Тег шапки сайта HTML CSS позволяет выполнять код JavaScript на стороне клиента. В примере ниже Javascript выводит «Hello JavaScript!» в HTML-элемент через id=»demo»:

Пример:

<script>
function myFunction {
    document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>

Посмотреть демо

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

Пример:

<base href="https://www.w3schools.com/images/" target="_blank">

Посмотреть демо

Согласно стандарту HTML5, теги <html>, <body> и <head> можно опустить.

<!DOCTYPE html>
<title>Page Title</title>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

Посмотреть демо

Примечание: Мы не рекомендуем опускать теги <html> и <body>. Это может негативно сказаться на работе DOM и XML, а также вызвать ошибки отображения веб-страниц в устаревших браузерах (например, IE9).

<head> Предоставляет информацию о документе.
<title> Задаёт заголовок документа.
<base> Определяет основной адрес и цель для всех ссылок на странице.
<link> Отвечает за связь между документом и внешними ресурсами.
<meta> Определяет метаданные документа.
<script> Позволяет использовать скрипты на стороне клиента.
<style> Определяет стилизацию документа.

Источник

Adding the Title Tag

Testing the Code

About This Article

Is this article up to date?

Adding the Title Tag

Testing the Code

About This Article

Is this article up to date?

The Questionable Method

The Obviously Correct Method

Speaking of .innerHTML

Атрибуты

Примечание

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

Пример

Проблемы доступности

Пример

Пример

Спецификации

Поддержка браузерами

Как изменить название сайта на странице

Speaking of `.innerHTML`