HTML - Dimos.ru

Скачать NODE.JS

Деталка

Ссылки в HTML

Оглавление:

1.Описание

Для создания ссылок используется парный тег <a></a> с важным атрибутом href.

2.Синтаксис

<a href="ссылка">текст ссылки</a>

3.Базовые примеры ссылок

Пример ссылки на внутреннюю страницу сайта:

<a href="/page/">Ссылка</a>

Пример ссылки на URL сайта, которая ведет на главную страницу:

<a href="http://dimos.ru">Ссылка</a>

Пример ссылки, которая открывает страницу в новом окне браузера:

<a href="http://dimos.ru" target="_blank">Ссылка</a>

4.Ссылка внутри страницы

Ссылка внутри страницы создается в два этапа:

шаг 1) Размещаем так называемый "якорь" в виде
<a name="rubrika"></a>, где:
а) Используется атрибут name="название якоря", для примера я дал название rubrika.
б) Внутри тега может содержаться пустота. Таким образом мы создаем невидимый блок, куда мы будем впоследствии ссылаться. Может быть размещен перед картинками, заголовками, названиями подрубрик на странице, любое другое место, куда мы хотим сослаться внутри документа.
шаг 2) Создаем саму ссылку на якорь
<a href="#rubrika">Название ссылки на якорь</a>

5.Скачивание документа по ссылке

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

Синтаксис и пример:

<a href="pic.png" download>Скачать картинку</a>

Деталка

Элементы HTML

Что такое элемент HTML?

Страница HTML состоит из элементов.
Элемент определяется, как комплект из: 1) начала тега 2) контента 3) конца тега

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

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

Синтаксис тега:

Заключен в угловые скобки
Может быть парным

Пример элемента HTML:

<h1>Заголовок моей страницы</h1>

<!-- это открывающийся тег: -->
<h1>

<!-- это закрывающийся тег: -->
</h1>

<!-- контент: -->
Заголовок моей страницы

<!-- это полный элемент: -->
<h1>Заголовок моей страницы</h1>

Деталка

Базовые коды html

Тип документа

<!DOCTYPE html>

Заголовок

 <title>Заголовок браузера</title>

Абзацы

<p>Абзац текста</p>

Ссылки

<a href="https://dimos.ru">Ссылка на мой сайт</a>
<a href="/about/">Ссылка на страницу сайта</a>

Изображения

<img src="/path/to/image/image.png">

Заголовки H1-H6

<h1>Заголовок страницы</h1>
<h2>Заголовок страницы</h2>
<h3>Заголовок страницы</h3>

Таблицы

<table>
<tr>
<td>Ячейка 1 таблицы</td>
<td>Ячейка 2 таблицы</td>
</tr>
</table>

Деталка

HTML редакторы

Базовые варианты:

Программа Блокнот
бесплатная, входит в стандартный набор программ Windows
Можно использовать встроенный текстовой редактор в FarManager
бесплатная (вариант использую сам)

Продвинутые варианты:

Программа VS Code
бесплатная (вариант использую сам)
Программа Sublime Text
бесплатная (вариант использую сам)

Профессиональные IDE:

Программа WebStorm
платная

Деталка

Введение в HTML

Что такое HTML?

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

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

 <!DOCTYPE html>
 <html>
 <head>
 <title>Заголовок браузера</title>
 </head>
 <body>
 <h1>Заголовок страницы</h1>
 <p>Параграф текста.</p>
 </body>
 </html>

Объяснение примера:

Объявление <!DOCTYPE html> определяет, что этот документ является документом HTML5.
Элемент <html> является корневым элементом HTML-страницы.
Элемент <head> содержит метаинформацию о HTML-странице.
Элемент <title> указывает заголовок HTML-страницы (который отображается в строке заголовка браузера или на вкладке страницы).
Элемент <body> определяет тело документа и является контейнером для всего видимого содержимого, такого как заголовки, абзацы, изображения, гиперссылки, таблицы, списки и т. д.
Элемент <h1> определяет большой заголовок
Элемент <p> определяет абзац

Деталка

Как подключить шрифт с Google Fonts

На примере шрифта Roboto. В HTML код вставляем ссылку на шрифт.


<link 
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" 
rel="stylesheet">

Далее шрифт прописываем в CSS к нужному элементу, body или к отдельному тегу (на примере H1):


H1 {
font-family: 'Roboto';
}

Полный пример:


<html>

   <head>
      <link 
         href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" 
         rel="stylesheet">

   <style>
      H1 {
         font-family: 'Roboto';
      }
   </style>
   </head>

   <body>
      <H1>Заголовок шрифтом Roboto</H1>
   </body>

</html>

Деталка

Как установить Favicon на сайт

1. Разместить изображение с favicon (изображение 16x16), например в папку /images/.

2. Добавить код link в head в шаблоне сайта:



<head>
<link rel="shortcut icon" href="/images/favicon.png" type="image/png">
</head>

Дополнительно:

Социальная сеть на Битрикс. Выход+Favicon.

Деталка

Блог

Скачать NODE.JS

Ссылки в HTML

1.Описание

2.Синтаксис

3.Базовые примеры ссылок

4.Ссылка внутри страницы

5.Скачивание документа по ссылке

Элементы HTML

Базовые коды html

HTML редакторы

Введение в HTML

Как подключить шрифт с Google Fonts

Как установить Favicon на сайт

Абзацы в HTML (P, BR)

Приводим к правильному формату (HTML, HEAD, BODY, TITLE)

[#1] Как создать с нуля HTML страницу (Far Manager)

Категории