Полезные ссылки

Контакты

  • designexperience@yandex.ru
  • г.Москва
Telegram Vk Whatsapp

Design Experience © 2024. Все права защищены

 

Уроки HTML&CSS

  1. Язык разметки гиппертекста
  2. История развития HTML
  3. Основные составляющие
  4. Семантика
  5. Игнорирование пробельных символов
  6. Комментарии в HTML-разметке
  7. Основные правила разметки
  8. Основные элементы для работы с текстом
    • Тег < br >
    • Тег < pre >
    • Тег < p >
  9. Атрибут Align
  10. Заголовки на странице h1-h6
  11. Тег < hr >
    • Атрибут color — цвет линии
    • Атрибут width — ширина линии
    • Атрибут size — толщина линии
    • Атрибут noshade — тень линии
  12. Форматирование текста
    • Форматирование текста — тег strong
    • Форматирование текста — тег big
    • Форматирование текста — тег small
    • Форматирование текста — тег b
    • Форматирование текста — тег i
    • Форматирование текста — тег em
    • Форматирование текста — тег sub
    • Форматирование текста — тег sup
    • Форматирование текста — тег center
    • Форматирование текста — тег MARQUEE
    • Форматирование текста — атрибут style
  13. Работа с ссылками
    • Тег a — работа с ссылками
    • Атрибут href тега a
    • Атрибут name тега a
    • Атрибут target тега a
    • Атрибут title тега a
    • Посылка почты
    • Реализация якорей
  1. Тег Img
    • Атрибут тега img — src
    • Атрибуты тега img — Alt, Title
    • Атрибуты тега img — width, height
    • Атрибут тега img — align(вертикальные значения)
    • Атрибут тега img — align(горизонтальные значения)
  2. Изображение — ссылка
  3. Работа с фоном
    • Атрибут bgcolor
    • Свойство background-color атрибута style
    • Атрибут background
    • Свойство background-repeat
    • Свойство background-repeat-x
    • Свойство background-repeat-y
    • Свойство background-size (Cover — Contain)
    • Свойство background-size (Размеры)
  4. Image Map — карта-изображение
  5. Пересечение областей на карте-изображении

Введение в HTML

HTML лежит в основе любой веб-страницы. Он прост для начинающих, а базовые знания HTML будут полезны для специалистов в области дизайна, маркетинга, контента и других сфер. Если вам интересна фронтенд-разработка, этот курс — отличное место для начала! Опыт программирования не требуется. Кстати, у нас есть ещё множество других курсов, включая курсы по CSS и JavaScript, так что после завершения этого курса вы сможете продолжить обучение и пополнить знания.

 

 

Язык разметки гиппертекста

В основе любой веб-страницы, лежат HTML, CSS и JavaScript.

Что такое HTML?

HTML (от англ. HyperText Markup Language) — это язык гипертекстовой разметки сайта, который помогает структурировать содержание каждой веб-страницы. С его помощью браузер понимает, как должны отображаться заголовки, изображения, таблицы.

HTML — документ создаётся в обычном текстовом редакторе, чаще всего в «Блокноте». Также существуют специализированные приложения, например, Notepad++ или Sublime Text, с подсветкой кода.

Преимущества HTML:

— Подходит почти для всех браузеров.
— Код можно написать в любом текстовом редакторе.
— HTML можно использовать бесплатно.
— У него простой и понятный синтаксис.
— Подходит для профессиональных разработчиков сайтов и для любителей.
— HTML интегрируется с другими языками программирования.

История развития HTML

Основные составляющие

Семантика

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

Тег <head> содержит в себе информацию о странице, но ни в коем случае не контент страницы. В нем располагаются метатеги, 
ссылки на подключаемые модули.

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

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

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

Игнорирование пробельных символов

				
					<html>
    <head>
        <title>Игнорирование пробельных символов</title>
    </head>
    <body>

            Все пробельные символы более одного                    пробела игнорируются,
    в том числе переносы строк и табуляции.

    </body>
</html>
Игнорирование пробельных символов Все пробельные символы более одного пробела игнорируются, в том числе переносы строк и табуляции.

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

				
					<html>

    <!--Комментарии могут быть вставлены в любом месте, браузер не интерпретирует их пользователю-->

    <head>
        <title>Комментарии в HTML-разметке</title>
    </head>

    <!--Комментарии могут быть вставлены в любом месте, браузер не интерпретирует их пользователю-->

    <body>

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

    </body>
</html>
Комментарии в HTML-разметке Для того, чтобы увидеть комментарии, вы можете просмотреть исходный код страницы, но в браузере при отображении страницы пользователю они не будут видны.

Основные правила разметки

Основные элементы для работы с текстом

Тег 

				
					<html>
    <head>
        <title>Переносы строк br</title>
    </head>
    <body>

            Для реализации переноса строк существует специальный тег br - brake row
            <br />
            Он не имеет содержимого, поэтому в конце видим символ /
            <br />
            С его помощью, к примеру, можно реализовать отображение стихотворения:
            <br />
            <br />
            Поверхностью морей отражена,<br />
            Богатая Венеция почила,<br />
            Сырой туман дымился, и луна <br />
            Высокие твердыни осребрила.<br />
            Чуть виден бег далекого ветрила,<br />
            Студеная вечерняя волна<br />
            Едва шумит вод веслами гондолы<br />
            И повторяет звуки баркаролы.<br/>

    </body>
</html>
Переносы строк br Для реализации переноса строк существует специальный тег br - brake row
Он не имеет содержимого, поэтому в конце видим символ /
С его помощью, к примеру, можно реализовать отображение стихотворения:

Поверхностью морей отражена,
Богатая Венеция почила,
Сырой туман дымился, и луна
Высокие твердыни осребрила.
Чуть виден бег далекого ветрила,
Студеная вечерняя волна
Едва шумит вод веслами гондолы
И повторяет звуки баркаролы.

Тег 
		

				

				

				

					

			
				
					<html>
    <head>
        <title>Переносы строк pre</title>
    </head>
    <body>

            Помимо br переносы строк можно реализовать с помощь тега pre
            <br />
            Он является контейнером, который отображает содержимое, учитывая все пробельные символы, указанные внутри себя.
            <br />
            С его помощью, к примеру, можно реализовать отображение стихотворения:
            <br />
            <br />
            <pre>
            Поверхностью морей отражена,
            Богатая Венеция почила,
            Сырой туман дымился, и луна
            Высокие твердыни осребрила.
            Чуть виден бег далекого ветрила,
            Студеная вечерняя волна
            Едва шумит вод веслами гондолы
            И повторяет звуки баркаролы.
            </pre>
    </body>
</html>
				
			

		

				

				

				

				

			
    
        Переносы строк pre
    
    

            Помимо br переносы строк можно реализовать с помощь тега pre
            

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

            С его помощью, к примеру, можно реализовать отображение стихотворения:
            

            

            
            Поверхностью морей отражена,
            Богатая Венеция почила,
            Сырой туман дымился, и луна
            Высокие твердыни осребрила.
            Чуть виден бег далекого ветрила,
            Студеная вечерняя волна
            Едва шумит вод веслами гондолы
            И повторяет звуки баркаролы.
            

    
		

				

				

				

			
Тег 
		

				

				

				

					

			
				
					<html>
    <head>
        <title>Параграфы - тег p</title>
    </head>
    <body>
           <p>
                Параграф является одной из основных семантических единиц и, следовательно,
                для него в разметке есть отдельный тег p.
                Параграфов может быть несколько на странице. При этом между ними автоматически создаются отступы 
                и после каждого параграфа делается перенос строки.
           </p>
           
           <p> Параграф №1 </p>
           <p> Параграф №2 </p>
           <p> Параграф №3 </p>
           <p> Параграф №4 </p>
           <p> Параграф №5 </p>
            
    </body>
</html>
				
			

		

				

				

				

				

			
    
        Параграфы - тег p
    
    
           

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

           
           
 Параграф №1 

           
 Параграф №2 

           
 Параграф №3 

           
 Параграф №4 

           
 Параграф №5 

            
    
		

				

				

				

							
Тег <p> используется для определения текстового абзаца.
						

				

				

				

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

				

				

				

							
Итак, при открытии страницы браузер обрабатывает элементы страницы и отображает содержимое пользователю.
В итоге пользователь видит элемент <p>I am learning HTML</p> в виде простой строки текста без тегов:
						

				

				

				

			
I am learning HTML
 		

				

				

				

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

				

				

				

					

			
				
					[par] some text [/par]  
				
			

		

				

				

				

				

			[par] some text [/par]  		

				

				

				

							
HTML-страница может содержать множество элементов.
Например, создадим два абзаца:
						

				

				

				

					

			
				
					<p>I am learning HTML</p>
<p>HTML is fun</p> 
				
			

		

				

				

				

				

			
I am learning HTML


HTML is fun
 		

				

				

				

							
Помните, что у каждого открывающего тега <p> должен быть закрывающий тег.
						

				

				

				

							
Подведём итог тому, что мы узнали: 
 — HTML-элементы создаются при помощи тегов.
 — Тег <p> используется для создания текстового абзаца.
 — Элемент абзаца состоит из открывающего тега, содержимого и закрывающего тега.
						

				

				

				

			
Атрибут align
		

				

				

				

					

			
				
					<html>
    <head>
        <title>Атрибут - align</title>
    </head>
    <body>
           <!-- 
           Если Вам необходимо выровнять содержимое котейнера определенным образом, то нет ничего лучше, чем атрибут - align.
           Он может принимать следующие значения: left, right, center. Чтобы правильно указать атрибут, его необходимо указывать 
           в открывающем теге прямо после имени тега, передав ему значение в кавычках после знака "=".

           По умолчанию left

           -->
           <p align="center">
                
               Кирджали был родом булгар. Кирджали на турецком языке значит витязь, удалец. Настоящего его имени я не знаю.
           </p>
           <p align="right">
                Кирджали своими разбоями наводил ужас на всю Молдавию. Чтоб дать об нем некоторое понятие, расскажу один из его подвигов. 
                Однажды ночью он и арнаут Михайлаки напали вдвоем на булгарское селение. Они зажгли его с двух концов и стали переходить 
                из хижины в хижину. Кирджали резал, а Михайлаки нес добычу. Оба кричали: «Кирджали! Кирджали!» Всё селение разбежалось.
           </p>
           <p align="left">
                Когда Александр Ипсиланти обнародовал возмущение и начал набирать себе войско, Кирджали привел к нему несколько старых своих 
                товарищей. Настоящая цель этерии была им худо известна, но война представляла случай обогатиться на счет турков, а может быть 
                и молдаван, — и это казалось им очевидно.
           </p>
    </body>
</html>

				
			

		

				

				

				

				

			
    
        Атрибут - align
    
    
           
           

                
               Кирджали был родом булгар. Кирджали на турецком языке значит витязь, удалец. Настоящего его имени я не знаю.
           

           

                Кирджали своими разбоями наводил ужас на всю Молдавию. Чтоб дать об нем некоторое понятие, расскажу один из его подвигов. 
                Однажды ночью он и арнаут Михайлаки напали вдвоем на булгарское селение. Они зажгли его с двух концов и стали переходить 
                из хижины в хижину. Кирджали резал, а Михайлаки нес добычу. Оба кричали: «Кирджали! Кирджали!» Всё селение разбежалось.
           

           

                Когда Александр Ипсиланти обнародовал возмущение и начал набирать себе войско, Кирджали привел к нему несколько старых своих 
                товарищей. Настоящая цель этерии была им худо известна, но война представляла случай обогатиться на счет турков, а может быть 
                и молдаван, — и это казалось им очевидно.
           

    

		

				

				

				

			
Заголовки на странице h1-h6
		

				

				

				

																										

				

				

				

					

			
				
					<html>
    <head>
        <title>Заголовки на странице h1-h6</title>
    </head>
    <body>
           <!-- 
           Для создания заголовков на странице существуют теги h1 - h6.
           В первую очередь они должны описывать вашу страницу аналогично тезисам в реферате.
           h1 - наиболее важные заголовки, h2 - менее важные.... и h6 - самые незначительные, но все же заголовки.
           Количество на странице, рекомендованное поисковыми системами:
           h1 - должен быть один на странице, h2 - около 2-4, и далее по нарастающей.
           -->

            <h1>This is heading 1</h1>
            <h2>This is heading 2</h2>
            <h3>This is heading 3</h3>
            <h4>This is heading 4</h4>
            <h5>This is heading 5</h5>
            <h6>This is heading 6</h6>
          
    </body>
</html>

				
			

		

				

				

				

				

			
    
        Заголовки на странице h1-h6
    
    
           

            
This is heading 1

            
This is heading 2

            
This is heading 3

            
This is heading 4

            
This is heading 5

            
This is heading 6

          
    

		

				

				

				

					

			
				
					<html>
    <head>
        <title>Заголовки на странице h1-h6</title>
    </head>
    <body>
           <!-- 
           Для создания заголовков на странице существуют теги h1 - h6.
           В первую очередь они должны описывать вашу страницу аналогично тезисам в реферате.
           h1 - наиболее важные заголовки, h2 - менее важные.... и h6 - самые незначительные, но все же заголовки.
           Количество на странице, рекомендованное поисковыми системами:
           h1 - должен быть один на странице, h2 - около 2-4, и далее по нарастающей.
           -->

    <h1>HTML</h1>
        <h2>Общее представление</h2>
            <p>Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1989—1991 годах в стенах Европейского совета по 
            ядерным исследованиям в Женеве (Швейцария). HTML создавался как язык для обмена научной и технической документацией, пригодный для 
            использования людьми, не являющимися специалистами в области вёрстки. HTML успешно справлялся с проблемой сложности SGML путём определения 
            небольшого набора структурных и семантических элементов — дескрипторов. Дескрипторы также часто называют «тегами». С помощью HTML можно 
            легко создать относительно простой, но красиво оформленный документ. Помимо упрощения структуры документа, в HTML внесена поддержка 
            гипертекста. Мультимедийные возможности были добавлены позже.</p>
        <h2>Браузеры</h2>
            <p>Текстовые документы, содержащие разметку на языке HTML (такие документы традиционно имеют расширение .html или .htm), обрабатываются 
            специальными приложениями, которые отображают документ в его форматированном виде. Такие приложения, называемые «браузерами» или «интернет-
            обозревателями», обычно предоставляют пользователю удобный интерфейс для запроса веб-страниц, их просмотра (и вывода на иные внешние 
            устройства) и, при необходимости, отправки введённых пользователем данных на сервер. Наиболее популярными на сегодняшний день браузерами 
            являются Internet Explorer, Mozilla Firefox, Apple Safari, Google Chrome и Opera (см.: Браузер#Рыночные доли).</p>
                <h3>Internet Explorer</h3>
                    <p>Windows Internet Explorer (читается интернет эксплорер, ранее — Microsoft Internet Explorer или просто Internet Explorer, 
                    сокращённо MSIE или IE; /aɪ iː/) — серия браузеров, разрабатываемая корпорацией Microsoft с 1995 года. Входит в комплект 
                    операционных систем семейства Windows. Занимает первое место по числу пользователей (рыночная доля в апреле 2010 года — 
                    ▼59,95 %, в январе 2011 — ▼45,99 %, в феврале 2012 - ▲52,84% (по данным GlobalStats)). В России, по данным портала 
                    LiveInternet, на март 2012 занимает третье место c ▼15,6 % пользователей[3], первое место у браузера Google Chrome с ▲
                    19,5 %.</p>
                        <h4>Internet Explorer 1</h4>
                        <h4>Internet Explorer 2</h4>
                        <h4>Internet Explorer 3</h4>
                        <h4>Internet Explorer 4</h4>
                        <h4>Internet Explorer 5</h4>
                        <h4>Internet Explorer 6</h4>
                        <h4>Internet Explorer 7</h4>
                        <h4>Internet Explorer 8</h4>
                        <h4>Internet Explorer 9</h4>
               <h3>Mozilla Firefox</h3>
                    <p>Mozilla Firefox (произносится моузи́ла фа́йрфокс, [moʊˈzɪlə ˈfaɪ(ɹ)fɑks] — свободно распространяемый браузер, входящий в 
                    набор программ Mozilla Application Suite, разработкой и распространением которого занимается Mozilla Corporation. Третий 
                    по популярности браузер в мире и второй среди свободного ПО — в январе 2012 года его рыночная доля составила ▼24,78 %. 
                    Браузер имеет особенный успех в некоторых странах, в частности, в Германии и Польше это самый популярный браузер с долей 
                    55 % и 47 % соответственно[4]. В России Firefox занимает первое место по популярности среди десктопных браузеров с долей 
                    30,74 % пользователей к июлю 2011 года.</p>
                        <h4>Версия 1.5</h4>
                        <h4>Версия 2.0</h4>
                        <h4>Версия 3.0</h4>
                        <h4>Версия 3.5</h4>
                        <h4>Версия 3.6</h4>
                        <h4>Версия 4.0</h4>
                        <h4>Версия 5.0</h4>
                        <h4>Версия 6.0</h4>
                        <h4>Версия 7.0</h4>
                        <h4>Версия 8.0</h4>
                        <h4>Версия 9.0</h4>
                        <h4>Версия 10.0</h4>
                        <h4>Версия 11.0</h4>      
    </body>
</html>

				
			

		

				

				

				

				

			
    
        Заголовки на странице h1-h6
    
    
           

    
HTML

        
Общее представление

            
Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1989—1991 годах в стенах Европейского совета по 
            ядерным исследованиям в Женеве (Швейцария). HTML создавался как язык для обмена научной и технической документацией, пригодный для 
            использования людьми, не являющимися специалистами в области вёрстки. HTML успешно справлялся с проблемой сложности SGML путём определения 
            небольшого набора структурных и семантических элементов — дескрипторов. Дескрипторы также часто называют «тегами». С помощью HTML можно 
            легко создать относительно простой, но красиво оформленный документ. Помимо упрощения структуры документа, в HTML внесена поддержка 
            гипертекста. Мультимедийные возможности были добавлены позже.

        
Браузеры

            
Текстовые документы, содержащие разметку на языке HTML (такие документы традиционно имеют расширение .html или .htm), обрабатываются 
            специальными приложениями, которые отображают документ в его форматированном виде. Такие приложения, называемые «браузерами» или «интернет-
            обозревателями», обычно предоставляют пользователю удобный интерфейс для запроса веб-страниц, их просмотра (и вывода на иные внешние 
            устройства) и, при необходимости, отправки введённых пользователем данных на сервер. Наиболее популярными на сегодняшний день браузерами 
            являются Internet Explorer, Mozilla Firefox, Apple Safari, Google Chrome и Opera (см.: Браузер#Рыночные доли).

                
Internet Explorer

                    
Windows Internet Explorer (читается интернет эксплорер, ранее — Microsoft Internet Explorer или просто Internet Explorer, 
                    сокращённо MSIE или IE; /aɪ iː/) — серия браузеров, разрабатываемая корпорацией Microsoft с 1995 года. Входит в комплект 
                    операционных систем семейства Windows. Занимает первое место по числу пользователей (рыночная доля в апреле 2010 года — 
                    ▼59,95 %, в январе 2011 — ▼45,99 %, в феврале 2012 - ▲52,84% (по данным GlobalStats)). В России, по данным портала 
                    LiveInternet, на март 2012 занимает третье место c ▼15,6 % пользователей[3], первое место у браузера Google Chrome с ▲
                    19,5 %.

                        
Internet Explorer 1

                        
Internet Explorer 2

                        
Internet Explorer 3

                        
Internet Explorer 4

                        
Internet Explorer 5

                        
Internet Explorer 6

                        
Internet Explorer 7

                        
Internet Explorer 8

                        
Internet Explorer 9

               
Mozilla Firefox

                    
Mozilla Firefox (произносится моузи́ла фа́йрфокс, [moʊˈzɪlə ˈfaɪ(ɹ)fɑks] — свободно распространяемый браузер, входящий в 
                    набор программ Mozilla Application Suite, разработкой и распространением которого занимается Mozilla Corporation. Третий 
                    по популярности браузер в мире и второй среди свободного ПО — в январе 2012 года его рыночная доля составила ▼24,78 %. 
                    Браузер имеет особенный успех в некоторых странах, в частности, в Германии и Польше это самый популярный браузер с долей 
                    55 % и 47 % соответственно[4]. В России Firefox занимает первое место по популярности среди десктопных браузеров с долей 
                    30,74 % пользователей к июлю 2011 года.

                        
Версия 1.5

                        
Версия 2.0

                        
Версия 3.0

                        
Версия 3.5

                        
Версия 3.6

                        
Версия 4.0

                        
Версия 5.0

                        
Версия 6.0

                        
Версия 7.0

                        
Версия 8.0

                        
Версия 9.0

                        
Версия 10.0

                        
Версия 11.0
      
    

		

				

				

				

			
Тег 
		

				

				

				

																										

				

				

				

					

			
				
					<html>
    <head>
        <title>Создание линии - тег hr</title>
    </head>
    <body>
           <!-- 
                hr - тег, для реализации прямой линии, он одиночный, не имеет содержимого и поэтому не имеет закрывающего тега.
                Автоматически растягивается на всю ширину родительского тега.
                Атрибуты: align, color, size, width, noshade
           -->

           <p>Тег hr определяет горизонтальную линию:</p>
           <hr />
           <p>This is a paragraph</p>
           <hr />
           <p>This is a paragraph</p>
           <hr />
           <p>This is a paragraph</p>
    </body>
</html>

				
			

		

				

				

				

				

			
    
        Создание линии - тег hr
    
    
           

           
Тэг hr определяет горизонтальную линию:

           

           
This is a paragraph

           

           
This is a paragraph

           

           
This is a paragraph

    

		

				

				

				

			
Атрибут color - цвет линии
		

				

				

				

					

			
				
					<html>
    <head>
        <title>Атрибут color - цвет линии</title>
    </head>
    <body>
           <!-- 
                color - атрибут тега hr, который указывает цвет прямой.
           -->

           <p>Тэг hr определяет горизонтальную линию:</p>
           <hr color="Red" />
           <p>This is a paragraph</p>
           <hr color="Blue" />
           <p>This is a paragraph</p>
           <hr color="Green" />
           <p>This is a paragraph</p>
    </body>
</html>

				
			

		

				

				

				

				

			
    
        Атрибут color - цвет линии
    
    
           

           
Тэг hr определяет горизонтальную линию:

           

           
This is a paragraph

           

           
This is a paragraph

           

           
This is a paragraph

    

		

				

				

				

			
Атрибут width - ширина линии
		

				

				

				

					

			
				
					<html>
    <head>
        <title>Атрибут width - ширина линии</title>
    </head>
    <body>
           <!-- 
                width - атрибут тега hr, который указывает ширину прямой.
                Следует задавать в px, в связи с тем, что некоторые браузеры (к примеру устаревшие версии Internet Explorer) не воспринимают 
                значения без единиц измерения.
           -->

           <p>Тэг hr определяет горизонтальную линию:</p>
           <hr align="left" width="600px"  />
           <p>This is a paragraph</p>
           <hr width="300px" />
           <p>This is a paragraph</p>
           <hr width="800px" />
           <p>This is a paragraph</p>
    </body>
</html>

				
			

		

				

				

				

				

			
    
        Атрибут width - ширина линии
    
    
           

           
Тэг hr определяет горизонтальную линию:

           

           
This is a paragraph

           

           
This is a paragraph

           

           
This is a paragraph

    

		

				

				

				

			
Атрибут size - толщина линии
		

				

				

				

					

			
				
					<html>
    <head>
        <title>Атрибут size - толщина линии</title>
    </head>
    <body>
           <!-- 
                size - атрибут тега hr, который указывает толщину прямой.
           -->

           <p >Тэг hr определяет горизонтальную линию:</p>
           
           <hr color="Green" size="1px" />
           
           <p>This is a paragraph</p>
           
           <hr color="Red" size="4px" />  
           
           <p>This is a paragraph</p>
           
           <hr color="Blue" size="10px" />
           
           <p>This is a paragraph</p>
    </body>
</html>

				
			

		

				

				

				

				

			
    
        Атрибут size - толщина линии
    
    
           

           
Тэг hr определяет горизонтальную линию:

           
           

           
           
This is a paragraph

           
           
  
           
           
This is a paragraph

           
           

           
           
This is a paragraph

    

		

				

				

				

			
Атрибут noshade - тень линии
		

				

				

				

					

			
				
					<html>
    <head>
        <title>Атрибут noshade - тень линии</title>
    </head>
    <body>
           <!-- 
                noshade - атрибут тега hr, который контролирует тень прямой.
           -->

           <p>Тэг hr определяет горизонтальную линию:</p>
           <hr noshade="noshade" />
           <p>This is a paragraph</p>
           <hr />
           <p>This is a paragraph</p>           
           <hr />
           <p>This is a paragraph</p>
    </body>
</html>

				
			

		

				

				

				

				

			
    
        Атрибут noshade - тень линии
    
    
           

           
Тэг hr определяет горизонтальную линию:

           

           
This is a paragraph

           

           
This is a paragraph
           
           

           
This is a paragraph

    

		

				

				

				

			
Форматирование текста
		

				

				

				

																										

				

				

				

																										

				

				

				

			
Форматирование текста - тег strong
		

				

				

				

					

			
				
					<html>
    <head>
        <title>Форматирование текста - тег strong</title>
    </head>
    <body>
    <!--
    Тег strong - это контейнер, который все текстовое содержимое внутри себя делает полужирным очертанием.
    -->

    Это простой текст, не заключенный в тег strong   <br />

    <strong>Это такой же текст, но заключенный в тег strong</strong>

    <p>
    
    <strong> Это такой же текст, но заключенный в тег strong внутри параграфа </strong>
    
    Содержимое параграфа, указанное за пределами тега strong не получает полужирное очертание
    </p>

    </body>
</html>

				
			

		

				

				

				

				

			
    
        Форматирование текста - тег strong
    
    
    

    Это простой текст, не заключенный в тег strong   


    Это такой же текст, но заключенный в тег strong

    

    
     Это такой же текст, но заключенный в тег strong внутри параграфа 
    
    Содержимое параграфа, указанное за пределами тега strong не получает полужирное очертание
    


    

		

				

				

				

			
Форматирование текста - тег big
		

				

				

				

					

			
				
					<html>
    <head>
        <title>Форматирование текста - тег big</title>
    </head>
    <body>
    <!--
    Тег big - это контейнер, который все текстовое содержимое внутри себя делает на одну единицу измерения размера шрифта больше.
    Если один контейнер будет заключен в другой, то соответственно размер увиличится на две единицы измерения.
    -->

    Это простой текст, не заключенный в тег big, отображенный размером по умолчанию  <br />

    <big>Это такой же текст, но заключенный в тег big</big>

    <p>
    
    <big> Это такой же текст, но заключенный в тег big внутри параграфа </big>
    <br />    
    Содержимое параграфа, указанное за пределами тега big не получает увеличение шрифта <br />

    </p>

    <p>
    
    <big><big> Это такой же текст, но заключенный в тег big внутри параграфа дважды </big></big>

    </p>
    </body>
</html>

				
			

		

				

				

				

				

			
    
        Форматирование текста - тег big
    
    
    

    Это простой текст, не заключенный в тег big, отображенный размером по умолчанию  


    Это такой же текст, но заключенный в тег big

    

    
     Это такой же текст, но заключенный в тег big внутри параграфа 
    
    
    Содержимое параграфа, указанное за пределами тега big не получает увеличение шрифта 


    


    

    
     Это такой же текст, но заключенный в тег big внутри параграфа дважды 

    

    

		

				

				

				

			
Форматирование текста - тег small
		

				

				

				

					

			
				
					<html>
    <head>
        <title>Форматирование текста - тег small</title>
    </head>
    <body>
    <!--
    Тег small - это контейнер, который все текстовое содержимое внутри себя делает на одну единицу измерения размера шрифта меньше.
    Если один контейнер будет заключен в другой, то соответственно размер уменьшится на две единицы измерения.
    -->

    Это простой текст, не заключенный в тег small, отображенный размером по умолчанию  <br />

    <small>Это такой же текст, но заключенный в тег small</small>

    <p>
    
    <small> Это такой же текст, но заключенный в тег small внутри параграфа </small>
    <br />    
    Содержимое параграфа, указанное за пределами тега small не получает увеличение шрифта <br />

    </p>

    <p>
    
    <small><small> Это такой же текст, но заключенный в тег small внутри параграфа дважды </small></small>

    </p>
    </body>
</html>

				
			

		

				

				

				

				

			
    
        Форматирование текста - тег small
    
    
    

    Это простой текст, не заключенный в тег small, отображенный размером по умолчанию  


    Это такой же текст, но заключенный в тег small

    

    
     Это такой же текст, но заключенный в тег small внутри параграфа 
    
    
    Содержимое параграфа, указанное за пределами тега small не получает увеличение шрифта 


    


    

    
     Это такой же текст, но заключенный в тег small внутри параграфа дважды 

    

    

		

				

				

				

			
Форматирование текста - тег b
		

				

				

				

					

			
				
					<html>
    <head>
        <title>Форматирование текста - тег b</title>
    </head>
    <body>
    <!--
    Тег b - это контейнер, который все текстовое содержимое внутри себя делает жирным очертанием.
    -->

    Это простой текст, не заключенный в тег b <br />

    <b>Это такой же текст, но заключенный в тег b</b>

    <p>
    
    <b> Это такой же текст, но заключенный в тег b внутри параграфа </b>
    
    Содержимое параграфа, указанное за пределами тега b не получает жирное очертание
    </p>

    </body>
</html>

				
			

		

				

				

				

				

			
    
        Форматирование текста - тег b
    
    
    

    Это простой текст, не заключенный в тег b 


    Это такой же текст, но заключенный в тег b

    

    
     Это такой же текст, но заключенный в тег b внутри параграфа 
    
    Содержимое параграфа, указанное за пределами тега b не получает жирное очертание
    


    

		

				

				

				

			
Форматирование текста - тег i
		

				

				

				

					

			
				
					<html>
    <head>
        <title>Форматирование текста - тег i</title>
    </head>
    <body>
    <!--
    Тег i - это контейнер, который все текстовое содержимое внутри себя делает курсивом.
    -->

    Это простой текст, не заключенный в тег i   <br />

    <i>Это такой же текст, но заключенный в тег i</i>

    <p>
    
    <i> Это такой же текст, но заключенный в тег i внутри параграфа </i>
    
    Содержимое параграфа, указанное за пределами тега i не получает курсивное очертание
    </p>

    </body>
</html>

				
			

		

				

				

				

				

			
    
        Форматирование текста - тег i
    
    
    

    Это простой текст, не заключенный в тег i   


    Это такой же текст, но заключенный в тег i

    

    
     Это такой же текст, но заключенный в тег i внутри параграфа 
    
    Содержимое параграфа, указанное за пределами тега i не получает курсивное очертание
    


    

		

				

				

				

			
Форматирование текста - тег em
		

				

				

				

					

			
				
					<html>
    <head>
        <title>Форматирование текста - тег em</title>
    </head>
    <body>
    <!--
    Тег em - это контейнер, который все текстовое содержимое внутри себя делает акцентированным с помощью курсива.
    -->

    Это простой текст, не заключенный в тег em   <br />

    <em>Это такой же текст, но заключенный в тег em</em>

    <p>
    
    <em> Это такой же текст, но заключенный в тег i внутри параграфа </em>
    
    Содержимое параграфа, указанное за пределами тега i не получает курсивное очертание
    </p>

    <i>Это такой же текст, но заключенный в тег i</i>        <br />
    <em>Это такой же текст, но заключенный в тег em</em>
    </body>
</html>

				
			

		

				

				

				

				

			
    
        Форматирование текста - тег em
    
    
    

    Это простой текст, не заключенный в тег em   


    Это такой же текст, но заключенный в тег em

    

    
     Это такой же текст, но заключенный в тег i внутри параграфа 
    
    Содержимое параграфа, указанное за пределами тега i не получает курсивное очертание
    


    Это такой же текст, но заключенный в тег i        

    Это такой же текст, но заключенный в тег em
    

		

				

				

				

			
Форматирование текста - тег sub
		

				

				

				

					

			
				
					<html>
    <head>
        <title>Форматирование текста - тег sub</title>
    </head>
    <body>
    <!--
    Тег sub - это контейнер, который все текстовое содержимое внутри себя ставит в нижний индекс предыдущего текста.
    -->

    Это простой текст, не заключенный в тег sub <br />

    Просто текст<sub>текст, но заключенный в тег sub</sub>
    <br />
    Просто текст<sub>текст, но заключенный в тег sub<sub>текст, но заключенный во второй тег sub</sub></sub>
    </body>
</html>

				
			

		

				

				

				

				

			
    
        Форматирование текста - тег sub
    
    
    

    Это простой текст, не заключенный в тег sub 


    Просто тексттекст, но заключенный в тег sub
    

    Просто тексттекст, но заключенный в тег subтекст, но заключенный во второй тег sub
    

		

				

				

				

			
Форматирование текста - тег sup
		

				

				

				

					

			
				
					<html>
    <head>
        <title>Форматирование текста - тег sup</title>
    </head>
    <body>
    <!--
    Тег sup - это контейнер, который все текстовое содержимое внутри себя ставит в верхний индекс предыдущего текста.
    -->

    Это простой текст, не заключенный в тег sup <br />

    Просто текст<sup>текст, но заключенный в тег sup</sup>
    <br />
    Просто текст<sup>текст, но заключенный в тег sup<sup>текст, но заключенный во второй тег sup</sup></sup>
    </body>
</html>

				
			

		

				

				

				

				

			
    
        Форматирование текста - тег sup
    
    
    

    Это простой текст, не заключенный в тег sup 


    Просто тексттекст, но заключенный в тег sup
    

    Просто тексттекст, но заключенный в тег supтекст, но заключенный во второй тег sup
    

		

				

				

				

			
Форматирование текста - тег center
		

				

				

				

					

			
				
					<html>
    <head>
        <title>Форматирование текста - тег center</title>
    </head>
    <body>
    <!--
    Тег center выравнивает содержимое контейнера по центру относительно родительского элемента.
    -->

    Это простой текст, не заключенный в тег center <br />

    <center> текст, но заключенный в тег center </center>

    </body>
</html>

				
			

		

				

				

				

				

			
    
        Форматирование текста - тег center
    
    
    

    Это простой текст, не заключенный в тег center 


    
 текст, но заключенный в тег center 


    

		

				

				

				

			
Форматирование текста - тег MARQUEE
		

				

				

				

					

			
				
					<html>
    <head>
        <title>Форматирование текста - тег MARQUEE</title>
    </head>
    <body>
    <!--
    Тег MARQUEE - это контейнер, который все текстовое содержимое внутри себя реализует в бегущую строку
    атрибут loop указывает количество итераций, то есть количество раз, сколько пробежит строка. 

    Тег является устаревшим. Для реализации данного функционала используется JavaScript.
    -->

    <MARQUEE>текст, но заключенный в тег MARQUEE</MARQUEE>

    <MARQUEE loop="3">текст, но заключенный в тег MARQUEE с атрибутом loop равным 3</MARQUEE>

    </body>
</html>

				
			

		

				

				

				

				

			
    
        Форматирование текста - тег MARQUEE
    
    
    

    текст, но заключенный в тег MARQUEE

    текст, но заключенный в тег MARQUEE с атрибутом loop равным 3

    

		

				

				

				

			
Форматирование текста - атрибут style
		

				

				

				

					

			
				
					<html>
    <head>
        <title>Форматирование текста - атрибут style</title>
    </head>
    <body>
    <!--
    Атрибут style - является первой формой использования CSS, он содержит в себе стили, которыми намного комфортнее работать, в том числе 
    и с текстом. Основные свойства для работы с текстом:
                                                                font-family: - шрифт, которым будет отображен текст
                                                                font-size: - размер шрифта
                                                                color: - цвет шрифта
        
    В атрибуте style можно указать как один параметр, так и несколько, главное разделять их ";" и значения передавать после":"
    -->

        <h1 style="font-family: 'Segoe UI' ;">A heading</h1>
        <p style="font-family:courier new; color:red; font-size:20px;">A paragraph</p>
    </body>
</html>

				
			

		

				

				

				

				

			
    
        Форматирование текста - атрибут style
    
    
    

        
A heading

        
A paragraph

    

		

				

				

				

			
Работа с ссылками
		

				

				

				

																										

				

				

				

																										

				

				

				

			
Тег a - работа с ссылками
		

				

				

				

					

			
				
					<html>
    <head>
        <title>Тег a - работа с ссылками</title>
    </head>
    <body>
    <!--
    Тег a - это контейнер, который все текстовое содержимое внутри себя делает ссылкой
    У него есть следующие атрибуты: href, name, target, title, rel.
    -->

    <a href="http://edu.cbsystematics.com/">Текст, помещенный внутрь тега "a" ведет на адрес, указанный в атрибуте href</a>

    </body>
</html>

				
			

		

				

				

				

				

			
    
        Тег a - работа с ссылками
    
    
    

    Текст, помещенный внутрь тега "a" ведет на адрес, указанный в атрибуте href

    

		

				

				

				

			
Атрибут href тега a
		

				

				

				

					

			
				
					<html>
    <head>
        <title>Атрибут href тега a</title>
    </head>
    <body>
    <!--
    Тег a - это контейнер, который все текстовое содержимое внутри себя делает ссылкой
    У него есть следующие атрибуты: href, name, target, title, rel.

    href - атрибут, который содержит в себе адрес страницы на которую ведет ссылка
    # - ссылка на страницу, где расположен данный элемент
    -->
    
    <a href="http://edu.cbsystematics.com/">Ссылка, ведущая на внешний ресурс, указанный в атрибуте href</a>
    <br />
    <a href="001_Tag_a.htm">Ссылка, ведущая на внутренний ресурс, указанный в атрибуте href</a>
    <br />
    <a href="#">Ссылка, ведущая на себя</a>

    </body>
</html>

				
			

		

				

				

				

				

			
    
        Атрибут href тега a
    
    
    
    
    Ссылка, ведущая на внешний ресурс, указанный в атрибуте href
    

    Ссылка, ведущая на внутренний ресурс, указанный в атрибуте href
    

    Ссылка, ведущая на себя

    

		

				

				

				

			
Атрибут name тега a
		

				

				

				

					

			
				
					<html>
    <head>
        <title>Атрибут name тега a</title>
    </head>
    <body>
    <!--
    Тег a - это контейнер, который все текстовое содержимое внутри себя делает ссылкой
    У него есть следующие атрибуты: href, name, target, title, rel.

    name - атрибут, который содержит в себе имя данной ссылки, он может быть практически у любого элемента разметки
    -->
    
    <a name="D2" href="http://edu.cbsystematics.com/">Ссылка, ведущая на внешний ресурс, указанный в атрибуте href</a>
    <br />
    <a name="coreI3" href="001_Tag_a.htm">Ссылка, ведущая на внутренний ресурс, указанный в атрибуте href</a>
    <br />
    <a name="changed_window" href="#">Ссылка, ведущая на себя</a>

    </body>
</html>

				
			

		

				

				

				

				

			
    
        Атрибут name тега a
    
    
    
    
    Ссылка, ведущая на внешний ресурс, указанный в атрибуте href
    

    Ссылка, ведущая на внутренний ресурс, указанный в атрибуте href
    

    Ссылка, ведущая на себя

    

		

				

				

				

			
Атрибут target тега a
		

				

				

				

					

			
				
					<html>
    <head>
        <title>Атрибут target тега a</title>
    </head>
    <body>
    <!--
    Тег a - это контейнер, который все текстовое содержимое внутри себя делает ссылкой
    У него есть следующие атрибуты: href, name, target, title, rel.

    target - атрибут, который говорит о том, каким образом открывать ссылку
    _self - открыть в этом же окне, аналогично по умолчанию
    _blank - открыть на новой вкладке
    _top, _parrent, _bottom - значения для работы с фреймами, ныне не востребованными
    -->
    
    <a href="http://edu.cbsystematics.com/">Ссылка, ведущая на внешний ресурс, указанный в атрибуте href</a>
    <br />
    <a target="_self" href="001_Tag_a.htm">Ссылка, ведущая на внутренний ресурс, указанный в атрибуте href</a>
    <br />
    <a target="_parent" href="#">Ссылка, ведущая на себя</a>

    </body>
</html>

				
			

		

				

				

				

				

			
    
        Атрибут target тега a
    
    
    
    
    Ссылка, ведущая на внешний ресурс, указанный в атрибуте href
    

    Ссылка, ведущая на внутренний ресурс, указанный в атрибуте href
    

    Ссылка, ведущая на себя

    

		

				

				

				

			
Атрибут title тега a
		

				

				

				

					

			
				
					<html>
    <head>
        <title>Атрибут title тега a</title>
    </head>
    <body>
    <!--
    Тег a - это контейнер, который все текстовое содержимое внутри себя делает ссылкой
    У него есть следующие атрибуты: href, name, target, title, rel.

    title - атрибут, который устанавливает тултип на ссылку(выскакивающее окошко с подсказкой)
    -->
    
    <a title="CBSystematics Education" href="http://edu.cbsystematics.com/">Ссылка, ведущая на внешний ресурс, указанный в атрибуте href</a>
    <br />
    <a title="First Example" href="001_Tag_a.htm">Ссылка, ведущая на внутренний ресурс, указанный в атрибуте href</a>
    <br />
    <a title="Link on yourself" href="#">Ссылка, ведущая на себя</a>

    </body>
</html>

				
			

		

				

				

				

				

			
    
        Атрибут title тега a
    
    
    
    
    Ссылка, ведущая на внешний ресурс, указанный в атрибуте href
    

    Ссылка, ведущая на внутренний ресурс, указанный в атрибуте href
    

    Ссылка, ведущая на себя

    

		

				

				

				

			
Посылка почты
		

				

				

				

					

			
				
					<html>
<head>
    <title>Посылка почты</title>
</head>
<body>
    <!--
    С помощью ссылки можно реализовать посылку почты
    mailto:( кому послать )someone@gmail.com? (указываем параметры) subject ( имя параметра ) = Hello%20again ( значение )
    -->
    <p>
        Это ссылка:
        <a href="mailto:someone@gmail.com?subject=Hello%20again">Отправить почту</a>
    </p>
    <p>
        <b>Note:</b> Пробелы между словами следует заменять на %20 для того, чтобы все браузеры корректно их воспринимали.
    </p>
</body>
</html>

				
			

		

				

				

				

				

			

    Посылка почты


    
    

        Это ссылка:
        Отправить почту
    

    

        Note: Пробелы между словами следует заменять на %20 для того, чтобы все браузеры корректно их воспринимали.
    



		

				

				

				

			
Реализация якорей
		

				

				

				

																										

				

				

				

					

			
				
					<html>
<head>
    <title>Реализация якорей</title>
</head>
<body>
    <!--
    Якорь - это значение в тексте на которое можно создать ссылку.
    Для это необходимо проименовать якорь дав ему имя name, а в ссылке на него указать спева ссылку на себя #, а затем имя
    <a href="#C4"> - формат ссылки на якорь
    <a name="C4"> - формат якоря
    -->
                    <p>
                        <a href="#C4">See also Chapter 4.</a>
                        <a href="#C13">See also Chapter 13.</a>
                    </p>

                    <h2>Chapter 1</h2>
                    <p>This chapter explains something</p>

                    <h2>Chapter 2</h2>
                    <p>This chapter explains something</p>

                    <h2>Chapter 3</h2>
                    <p>This chapter explains something</p>

                    <h2><a name="C4">Chapter 4</a></h2>
                    <p>This chapter explains something</p>

                    <h2>Chapter 5</h2>
                    <p>This chapter explains something</p>

                    <h2>Chapter 6</h2>
                    <p>This chapter explains something</p>

                    <h2>Chapter 7</h2>
                    <p>This chapter explains something</p>

                    <h2>Chapter 8</h2>
                    <p>This chapter explains something</p>

                    <h2>Chapter 9</h2>
                    <p>This chapter explains something</p>

                    <h2>Chapter 10</h2>
                    <p>This chapter explains something</p>

                    <h2>Chapter 11</h2>
                    <p>This chapter explains something</p>

                    <h2>Chapter 12</h2>
                    <p>This chapter explains something</p>

                    <h2><a name="C13">Chapter 13</a></h2>
                    <p>This chapter explains something</p>

                    <h2>Chapter 14</h2>
                    <p>This chapter explains something</p>

                    <h2>Chapter 15</h2>
                    <p>This chapter explains something</p>
                    
                    <h2>Chapter 16</h2>
                    <p>This chapter explains something</p>

                    <h2>Chapter 17</h2>
                    <p>This chapter explains something</p>
</body>
</html>

				
			

		

				

				

				

				

			

    Реализация якорей


    
                    

                        See also Chapter 4.
                        See also Chapter 13.
                    


                    
Chapter 1

                    
This chapter explains something


                    
Chapter 2

                    
This chapter explains something


                    
Chapter 3

                    
This chapter explains something


                    
Chapter 4

                    
This chapter explains something


                    
Chapter 5

                    
This chapter explains something


                    
Chapter 6

                    
This chapter explains something


                    
Chapter 7

                    
This chapter explains something


                    
Chapter 8

                    
This chapter explains something


                    
Chapter 9

                    
This chapter explains something


                    
Chapter 10

                    
This chapter explains something


                    
Chapter 11

                    
This chapter explains something


                    
Chapter 12

                    
This chapter explains something


                    
Chapter 13

                    
This chapter explains something


                    
Chapter 14

                    
This chapter explains something


                    
Chapter 15

                    
This chapter explains something

                    
                    
Chapter 16

                    
This chapter explains something


                    
Chapter 17

                    
This chapter explains something



		

				

				

				

			
Работа с изображениями
		

				

				

				

							
Некоторые элементы не имеют какого-либо текстового содержимого и создаются при помощи одного открывающего тега
						

				

				

				

			
Тег  
		

				

				

				

																										

				

				

				

					

			
				
					<!--
С помощью тега <img> можно разместить изображение на вашей странице.
Элемент имеет следующие атрибуты: src, alt, title, width, height, align.
Тег не имеет текстового содержимого и потому является самодостаточным. В связи с этим отсутствует закрывающий тег, и в конце открывающего 
мы видим "/". 
-->

<html>
    <head>
        <title>Тег Img</title>
    </head>
    <body>
        <img decoding="async" src="https://designexperience.ru/wp-content/uploads/2024/09/tree.jpg" alt="Deleted" title="ImageExample" />
    </body>
</html>

				
			

		

				

				

				

				

			


    
        Тег Img
    
    
        Deleted
    

		

				

				

				

			
Атрибут тега img - src
		

				

				

				

																										

				

				

				

					

			
				
					<!--
src - source, источник откуда подгружается изображение.
Источник может быть как локальний дистрибутив, так и какой либо источник в сети.
Форматы которые используются в верстке:
.jpg
.gif
.png 
-->

<html>
    <head>
        <title>Атрибут тега img - src</title>
    </head>
    <body>
            Изображение из локального ресурса:
            <br />
            <img decoding="async" src="Images/tree.jpg" alt="ImageExample" title="ImageExample" />
            <br />
            Изображение из ресурса в сети:
            <br />
            <img decoding="async" src="https://designexperience.ru/wp-content/uploads/2024/09/tree.jpg" alt="ImageExample" title="ImageExample" />
            <br />
            Анимация:
            <br />
            <img decoding="async" src="https://designexperience.ru/wp-content/uploads/2024/09/treesixty-118424.gif" alt="ImageExample" title="ImageExample" />
    </body>
</html>

				
			

		

				

				

				

				

			


    
        Атрибут тега img - src
    
    
            Изображение из локального ресурса:
            

            ImageExample
            

            Изображение из ресурса в сети:
            

            ImageExample
            

            Анимация:
            

            ImageExample
    

		

				

				

				

			
Атрибуты тега Img - Alt, Title
		

				

				

				

																										

				

				

				

					

			
				
					<!--
Alt - это атрибут, который указывает альтернативный текст, который выведется если изображение не подгрузится. 
Title - выскакивает в качестве подсказки, если пользователь наведет указатель мыши на изображение.
Рекомендуется указывать оба атрибута в связи с тем, что некоторые браузеры не воспринимают один, другие - второй. 
-->

<html>
    <head>
        <title>Атрибуты тега Img - Alt, Title</title>
    </head>
    <body>
            Изображение без атрибутов alt, title:
            <br />
            <img decoding="async" src="https://designexperience.ru/wp-content/uploads/2024/09/tree.jpg" />
            <br />
            Изображение с указанием атрибутов alt, title:
            <br />
            <img decoding="async" src="https://designexperience.ru/wp-content/uploads/2024/09/tree.jpg" alt="Delete" title="ImageExample" />
            <br />
    </body>
</html>

				
			

		

				

				

				

				

			


    
        Атрибуты тега Img - Alt, Title
    
    
            Изображение без атрибутов alt, title:
            

            
            

            Изображение с указанием атрибутов alt, title:
            

            Delete
            

    

		

				

				

				

			
Атрибуты тега Img - width, height
		

				

				

				

																										

				

				

				

					

			
				
					<!--
Атрибуты width и height контролируют размеры изображения.
Если один из них отсутствует, то изображение растянется пропорционально второму.
Если в результате изменения изображения пропорции будут нарушены, то изображение может быть отображено некорректно.
По умолчанию изображение принимает свои действительные размеры. 
-->

<html>
    <head>
        <title>Атрибуты тега Img - width, height</title>
    </head>
    <body>
             <p>
                <img loading="lazy" decoding="async" src="https://designexperience.ru/wp-content/uploads/2024/09/tree.jpg" width="20" height="20" alt="Deleted" title="ImageExample" />
             </p>
             <p>
                <img loading="lazy" decoding="async" src="https://designexperience.ru/wp-content/uploads/2024/09/tree.jpg" width="45" height="45" alt="Deleted" title="ImageExample" />
             </p>
             <p>
                <img loading="lazy" decoding="async" src="https://designexperience.ru/wp-content/uploads/2024/09/tree.jpg" width="70" height="70" alt="Deleted" title="ImageExample" />
             </p>
             <p>
                Можно менять не только размер изображения но и его пропорции, изменяя значения атрибутов "height" и "width".
             </p>
             <p>
                <img loading="lazy" decoding="async" src="https://designexperience.ru/wp-content/uploads/2024/09/tree.jpg" width="60" height="100" alt="Deleted" title="ImageExample" />
             </p>
    </body>
</html>

				
			

		

				

				

				

				

			


    
        Атрибуты тега Img - width, height
    
    
             

                Deleted
             

             

                Deleted
             

             

                Deleted
             

             

                Можно менять не только размер изображения но и его пропорции, изменяя значения атрибутов "height" и "width".
             

             

                Deleted
             

    

		

				

				

				

			
Атрибут тега Image - align(вертикальные значения)
		

				

				

				

																										

				

				

				

					

			
				
					<!--
Атрибут align указывает положение изображение относительно остального контента.

Может принимать следующие значения для вертикального выравнивания изображения:
    bottom - указывает на выравние изображения по нижней направляющей остального контента ( по умолчанию )
    middle - указывает на выравние изображения по центральной направляющей остального контента
    top - указывает на выравние изображения по верхней направляющей остального контента 

Не имеет значения где размещено изображение, в начале текста, в середине или в конце. 
-->

<html>
    <head>
        <title>Атрибут тега Image - align(вертикальные значения)</title>
    </head>
    <body>
                <p>
                    Картинка
                    <img loading="lazy" decoding="async" src="https://designexperience.ru/wp-content/uploads/2024/09/tree.jpg" align="bottom" width="48" height="48" alt="ImageExample" title="ImageExample" />
                    в тексте
                </p>
                <p>
                    Картинка
                    <img loading="lazy" decoding="async" src="https://designexperience.ru/wp-content/uploads/2024/09/tree.jpg" align="middle" width="48" height="48" alt="ImageExample" title="ImageExample" />
                    в тексте
                </p>
                <p>
                    Картинка
                    <img loading="lazy" decoding="async" src="https://designexperience.ru/wp-content/uploads/2024/09/tree.jpg" align="top" width="48" height="48" alt="ImageExample" title="ImageExample" />
                    в тексте
                </p>
                <p>
                    По умолчания у изображения выравнивание по низу.</p>
                <p>
                    Картинка
                    <img loading="lazy" decoding="async" src="https://designexperience.ru/wp-content/uploads/2024/09/tree.jpg" width="48" height="48" alt="ImageExample" title="ImageExample" />
                    в тексте
                </p>
               
    </body>
</html>

				
			

		

				

				

				

				

			


    
        Атрибут тега Image - align(вертикальные значения)
    
    
                

                    Картинка
                    ImageExample
                    в тексте
                

                

                    Картинка
                    ImageExample
                    в тексте
                

                

                    Картинка
                    ImageExample
                    в тексте
                

                

                    По умолчания у изображения выравнивание по низу.

                

                    Картинка
                    ImageExample
                    в тексте
                

               
    

		

				

				

				

			
Атрибут тега Image - align(горизонтальные значения)
		

				

				

				

					

			
				
					<!--
Атрибут align указывает положение изображение относительно остального контента.

Может принимать следующие значения для горизонтального выравнивания изображения:
    right - указывает на выравние изображения правому краю относительно остального контента
    left - указывает на выравние изображения по краю левому относительно остального контента 
-->

<html>
    <head>
        <title>Атрибут тега Image - align(горизонтальные значения)</title>
    </head>
    <body>
        <p align = "justify">
            <img loading="lazy" decoding="async" src="https://designexperience.ru/wp-content/uploads/2024/09/tree.jpg" align= "right"  width="48" height="48" alt="ImageExample" title="ImageExample" />
            
            Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1986—1991 годах в стенах
            Европейского Центра ядерных исследований в Женеве (Швейцария). HTML создавался как язык для обмена научной
            и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. 
            HTML успешно справлялся с проблемой сложности SGML путём определения небольшого набора структурных и семантических 
            элементов — дескрипторов. Дескрипторы также часто называют «тегами». С помощью HTML можно легко создать относительно 
            простой, но красиво оформленный документ. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. 
            Мультимедийные возможности были добавлены позже. Изначально язык HTML был задуман и создан как средство 
            структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения). 
                       
        </p>

        <p align = "justify">
                       
            <img loading="lazy" decoding="async" src="https://designexperience.ru/wp-content/uploads/2024/09/tree.jpg" align= "left" width="48" height="48" alt="ImageExample" title="ImageExample" />
            
            В идеале, текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться 
            на оборудовании с различной технической оснащённостью (цветной экран современного компьютера, 
            монохромный экран органайзера, ограниченный по размерам экран мобильного телефона или устройства и программы 
            голосового воспроизведения текстов). 
                   
        </p>
    </body>
</html>

				
			

		

				

				

				

				

			


    
        Атрибут тега Image - align(горизонтальные значения)
    
    
        

            ImageExample
            
            Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1986—1991 годах в стенах
            Европейского Центра ядерных исследований в Женеве (Швейцария). HTML создавался как язык для обмена научной
            и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. 
            HTML успешно справлялся с проблемой сложности SGML путём определения небольшого набора структурных и семантических 
            элементов — дескрипторов. Дескрипторы также часто называют «тегами». С помощью HTML можно легко создать относительно 
            простой, но красиво оформленный документ. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. 
            Мультимедийные возможности были добавлены позже. Изначально язык HTML был задуман и создан как средство 
            структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения). 
                       
        


        

                       
            ImageExample
            
            В идеале, текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться 
            на оборудовании с различной технической оснащённостью (цветной экран современного компьютера, 
            монохромный экран органайзера, ограниченный по размерам экран мобильного телефона или устройства и программы 
            голосового воспроизведения текстов). 
                   
        

    

		

				

				

				

			
Изображение - ссылка
		

				

				

				

					

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

<html>
    <head>
        <title>Изображение - ссылка</title>
    </head>
    <body>
        <a href="http://edu.cbsystematics.com/">
            <img decoding="async" src="https://designexperience.ru/wp-content/uploads/2024/09/tree.jpg" alt="Deleted" title="CyberBionic Systematics" border ="0" />
        </a>
    </body>
</html>

				
			

		

				

				

				

				

			


    
        Изображение - ссылка
    
    
        
            Deleted
        
    

		

				

				

				

			
Работа с фоном
		

				

				

				

																										

				

				

				

			
Атрибут bgcolor
		

				

				

				

					

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

<html>
    <head>
        <title>Атрибут bgcolor</title>
    </head>
    <body bgcolor="blue">
            Здесь распологается основное содержимое страницы, которое будет отображено пользователю в окне браузера.
    </body>
</html>

				
			

		

				

				

				

				

			
Свойство background-color атрибута style
		

				

				

				

					

			
				
					<!--
Вторым способом является установка свойства background-color в атрибуте style
-->

<html>
    <head>
        <title>Свойство background-color атрибута style</title>
    </head>
    <body bgcolor="blue" style="background-color:yellow">
            Здесь распологается основное содержимое страницы которое будет отображено пользователю в окне браузера.
    </body>
</html>

				
			

		

				

				

				

				

			
Атрибут background
		

				

				

				

					

			
				
					<!--
В качестве заднего фона можно установить изображение.
Для этого используется атрибут background, или свойство background-image.
По умолчанию изображение повторяется, пока не заполнит все пространство.
-->

<html>
    <head>
        <title>Атрибут background</title>
    </head>
    <body style = "background-image:url(../001_Images/Images/background.jpg)" >

            Здесь распологается основное содержимое страницы, которое будет отображено пользователю в окне браузера.
    </body>
</html>

				
			

		

				

				

				

				

			
Свойство background-repeat
		

				

				

				

																										

				

				

				

					

			
				
					<!--
Свойство background-repeat отвечает за вид повторения фона.
Может принимать следующие значения: no-repeat, repeat-x, repeat-y.
no-repeat - говорит о том, что повторять изображение не стоит, и размещает его один раз согласно его размерам.
repeat-x - делает повторение изображение только по оси х.
repeat-y - делает повторение изображение только по оси y.
-->

<html>
    <head>
        <title>Свойство background-repeat</title>
    </head>
    <body background="../001_Images/Images/background.jpg" style="background-repeat:no-repeat">
            Здесь распологается основное содержимое страницы, которое будет отображено пользователю в окне браузера.
    </body>
</html>

				
			

		

				

				

				

				

			
Свойство background-repeat-x
		

				

				

				

					

			
				
					<!--
Свойство background-repeat отвечает за вид повторения фона.
Может принимать следующие значения: no-repeat, repeat-x, repeat-y.
no-repeat - говорит о том, что повторять изображение не стоит, и размещает его один раз согласно его размерам.
repeat-x - делает повторение изображение только по оси х.
repeat-y - делает повторение изображение только по оси y.
-->

<html>
    <head>
        <title>Свойство background-repeat-x</title>
    </head>
    <body background="../001_Images/Images/background.jpg" style="background-repeat:repeat-x">
            Здесь распологается основное содержимое страницы, которое будет отображено пользователю в окне браузера.
    </body>
</html>

				
			

		

				

				

				

				

			
Свойство background-repeat-y
		

				

				

				

					

			
				
					<!--
Свойство background-repeat отвечает за вид повторения фона.
Может принимать следующие значения: no-repeat, repeat-x, repeat-y.
no-repeat - говорит о том, что повторять изображение не стоит, и размещает его один раз согласно его размерам.
repeat-x - делает повторение изображение только по оси х.
repeat-y - делает повторение изображение только по оси y. 
-->

<html>
    <head>
        <title>Свойство background-repeat-y</title>
    </head>
    <body background="../001_Images/Images/background.jpg" style="background-repeat:repeat-y">
            Здесь распологается основное содержимое страницы, которое будет отображено пользователю в окне браузера.
    </body>
</html>

				
			

		

				

				

				

				

			
Свойство background-size
		

				

				

				

																										

				

				

				

			
Cover

		

				

				

				

					

			
				
					<!--
Свойство background-size - отвечает за размещение изображения на заднем фоне.
Может принимать следующие значения:
Cover - масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.
Contain - масштабирует изображение таким образом, чтобы оно полностью заполнило блок, при этом к двум его сторонам изображение 
будет прилегать обязательно. 
-->

<html>
    <head>
        <title>Свойство background-size</title>
    </head>
   <body style=" background-image:url(../001_Images/Images/background.jpg); background-size:cover; background-repeat:no-repeat;">
   <!-- <body style=" background-image:url(../001_Images/Images/background.jpg); background-size:contain; background-repeat:no-repeat;">
    -->
       </body>
</html>

				
			

		

				

				

				

				

			
Contain

		

				

				

				

					

			
				
					<!--
Свойство background-size - отвечает за размещение изображения на заднем фоне.
Может принимать следующие значения:
Cover - масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.
Contain - масштабирует изображение таким образом, чтобы оно полностью заполнило блок, при этом к двум его сторонам изображение 
будет прилегать обязательно. 
-->

<html>
    <head>
        <title>Свойство background-size</title>
    </head>
   <!--<body style=" background-image:url(../001_Images/Images/background.jpg); background-size:cover; background-repeat:no-repeat;">-->
   <body style=" background-image:url(../001_Images/Images/background.jpg); background-size:contain; background-repeat:no-repeat;">
       </body>
</html>

				
			

		

				

				

				

				

			
Свойство background-size (размеры)
		

				

				

				

					

			
				
					<!--
Свойство background-size - отвечает за размещение изображения на заднем фоне.
Может принимать следующие значения:
Cover - масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.
Contain - масштабирует изображение таким образом, чтобы оно полностью заполнило блок, при этом к двум его сторонам изображение 
будет прилегать обязательно. 
-->

<html>
    <head>
        <title>Свойство background-size</title>
    </head>
    <body style=" background-image:url(../001_Images/Images/logo.png); background-size:300px 300px; background-repeat:no-repeat; border : solid ">
    </body>
</html>

				
			

		

				

				

				

				

			
Image Map - карта-изображение
		

				

				

				

					

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

Есть 4 основных шага по созданию карт-изображений:
    1. Вставить на страницу изображение
    2. Привязать к нему описание областей, указав атрибут usemap
    3. Создать элемент <map></map> с соответствующим именем и id (в разных браузерах воспринимается тот или иной атрибут)
    4. Описать области в тегах area

Тег area, имеет следующие атрибуты:
    href - ссылка на документ, на который следует перейти
    shape - форма области
    coords - координаты области
    alt, title - текст, который будет в сплывающей подсказке
-->

<html>
    <head>
        <title>Image Map - карта-изображение</title>
    </head>
    <body>
        <img decoding="async" src="images/imageformap.jpg" usemap="#mymap"/>

        <map name="mymap" id="mymap">
           <area href="#" shape="rect" coords="25, 21, 196, 183" alt="first rect" title="first rect" />
           <area href="#" shape="rect" coords="494, 199, 669, 372" alt="second rect" title="second rect" />
        </map>
    </body>
</html>

				
			

		

				

				

				

				

					

			
				
					<!--
Атрибут Shape может принимать следующие значения:
    rect - прямоугольник, требуется передать 2 точки(по 2 координаты у каждой)
    circle - круг, требуется передать точку и радиус
    poly - полигон, необходимо передать произвольное количество точек
-->

<html>
    <head>
        <title>Image Map - карта-изображение</title>
    </head>
    <body>
        <img decoding="async" src="images/imageforarea.jpg" usemap="#mymap"/>
        
        <map name="mymap" id="mymap">
          <area href="#" shape="rect" coords="27, 24, 196, 183" alt="rectangle" title="rectangle" />
          <area href="#" shape="circle" coords="534, 108, 70" alt="circle" title="circle" />
          <area href="#" shape="poly" coords="289, 237, 292, 327, 378, 355, 429, 275, 375, 206" alt="polygon" title="polygon" />
        </map>
    
    </body>
</html>

				
			

		

				

				

				

				

			
Пересечение областей на карте-изображении
		

				

				

				

					

			
				
					<!--
При пересечении областей, активной будет та, которая была создана ранее. 
-->

<html>
    <head>
        <title>Пересечение областей на карте-изображении</title>
    </head>
    <body style=" background-color:Silver; text-align:center;">
        
        <img decoding="async" src="images/Stanley_Park.jpg"  alt ="Stanley Park New York 2002"  title ="Stanley Park New York 2002"  width="1000px" usemap="#StanleyPark" />
        
        <map id="StanleyPark" name="StanleyPark">
           
            <area shape="rect" coords="550, 160, 670, 340" alt="Monument" title="Monument" href="#" />
            <area shape="rect" coords="440, 150, 1000, 250" alt="City" title="City" href="#" />       
            <area shape="circle" coords="200, 222, 20" alt="Factories" title="Factories" href="#" />
            <area shape="poly" coords="1, 256, 42, 253, 999, 390, 999, 470" alt="Cycling Road" title="Cycling Road" href="#"/>
            <area shape="poly" coords="0, 40, 114, 42, 136, 128, 160, 163, 164, 234, 120, 247, 110, 257, 0, 257" alt="Trees" title="Trees" href="#"/>
            <area shape="poly" coords="2, 259, 996, 466, 1000, 499, 0, 499" alt="Grass" title="Grass" href="#"/>
        
        </map>
        
        <p>
        Stanley Park is recognized around the globe as one of the great parks of the world! Vancouver's first park and one of the city's main
         tourist attractions, Stanley Park is an evergreen oasis of 400 hectares (1,000 acres) close to the downtown core. Its natural west coast 
         atmosphere offering a back drop of majestic cedar, hemlock and fir trees embraces visitors and transports them to an environment rich in 
         tranquility. The park abounds in wildlife and its features appeal to the naturalist, the plant lover or one who would do nothing more than
          relax in beautiful surroundings. There is always something happening in the park - check our Events Calendar for listings.
        </p>
    </body>
</html>

				
			

		

				

				

				

				

			
Изображения
		

				

				

				

							
Например, для вставки изображения на страницу:
						

				

				

				

					

			
				
					<img decoding="async" src="http://www.sololearn.com/images/tree.jpg" >  
				
			

		

				

				

				

				

			
I am learni 
 		

				

				

				

					

			

				Атрибут src указывает адрес изображения, которое мы хотим вставать.			

					

				

				

				

				

							
Атрибут alt указывает текст, который будет отображаться, если изображение не загрузится.
						

				

				

				

					

			
				
					<img decoding="async" src="http://www.sololearn.com/images/tree.jpg" alt="A Tree" >   
				
			

		

				

				

				

				

			A Tree  		

				

				

				

							
alt-текст используется для описания изображения.
						

				

				

				

					

			

				Его используют программы чтения с экрана и поисковые системы в качестве описания изображения.			

					

				

				

				

				

							
Его используют программы чтения с экрана и поисковые системы в качестве описания изображения.
						

				

				

				

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

				

				

				

					

			
				
					<img decoding="async" src="http://www.sololearn.com/images/tree.jpg" alt="" > 
				
			

		

				

				

				

				

							
Вы также можете указать кастомный размер изображения, используя атрибуты height и width:
						

				

				

				

					

			
				
					<img decoding="async" src="http://www.sololearn.com/images/tree.jpg" alt="A Tree" width="200px" >  
				
			

		

				

				

				

				

			A Tree  		

				

				

				

							
Если указан только один размер, второй размер будет изменён в соответствии с соотношением сторон изображения.
						

				

				

				

			
Атрибуты размера 
		

				

				

				

							
Атрибуты height и width также могут принимать процентные значения.
Например, изменим наше изображение так, чтобы оно занимало половину ширины страницы:
						

				

				

				

					

			
				
					<img decoding="async" src="http://www.sololearn.com/images/tree.jpg" alt="A Tree" width="50%" > 
				
			

		

				

				

				

				

			A Tree 		

				

				

				

			
Другие элементы
		

				

				

				

							
Помимо <img>, есть и другие пустые элементы, которые создаются с помощью одного открывающего тега.
Элемент <hr> используется для создания горизонтальной линии:
						

				

				

				

					

			
				
					<p>This is some text</p>
<hr>
<p>This is another text</p>
				
			

		

				

				

				

				

			
This is some text




This is another text
		

				

				

				

							
Элемент <hr> определяет тематический разрыв между элементами абзаца.
						

				

				

				

					

			

				Его используют программы чтения с экрана и поисковые системы в качестве описания изображения.			

					

				

				

				

				

			
Разрыв строки 
		

				

				

				

							
Элемент <br> создаёт разрыв строки в абзаце.
						

				

				

				

					

			
				
					<p>
  A <br>
  B <br>
  C <br>
</p>
				
			

		

				

				

				

				

			

  A 

  B 

  C 


		

				

				

				

							
Абзац без элементов <br> отображался бы просто в одну строку.
						

				

				

				

					

			

				Его используют программы чтения с экрана и поисковые системы в качестве описания изображения.			

					

				

				

				

				

			
Пробел 
		

				

				

				

							
Пробелы и разрывы строк в коде не учитываются, но код с ними становится более читабельным. 
Например:
						

				

				

				

					

			
				
					<p>
  A <br>
  B <br>
  C <br>
</p>
				
			

		

				

				

				

				

							
Здесь каждый новый элемент начинается с новой строки, чтобы код был более читабельным.
Результат такой же, как если бы весь код был на одной строке:
						

				

				

				

					

			
				
					<p> some text </p>
<hr>
<p> some other text </p> 
				
			

		

				

				

				

				

			
 some text 




 some other text 
 		

				

				

				

					

			

				Его используют программы чтения с экрана и поисковые системы в качестве описания изображения.			

					

				

				

				

				

			
Элементы 
		

				

				

				

							
Выделяют две основные категории HTML-элементов: блочные элементы и строчные элементы.
						

				

				

				

			
Блочные элементы 
		

				

				

				

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

				

				

				

					

			
				
					<p>hello</p>
<p>this is some text</p>
<p>this is another text</p>
				
			

		

				

				

				

				

			
hello


this is some text


this is another text
		

				

				

				

					

			

				Блочные элементы обычно представляют собой структурные элементы страницы, такие как заголовки, абзацы, списки, меню навигации или подвалы.			

					

				

				

				

				

			
Строчные элементы
		

				

				

				

							
Строчные элементы находятся внутри блочных элементов и представляют собой лишь небольшие части страницы.
Например, элементы <a>, <b>, <strong> и подобные им являются строчными:
						

				

				

				

					

			
				
					<p>
  A <b>link</b> to my <a href="https://www.sololearn.com">website</a>
</p>
				
			

		

				

				

				

				

			

  A link to my website

		

				

				

				

					

			

				Строчные элементы не должны содержать блочные.			

					

				

				

				

				

							
Теперь когда мы знаем о блочных и строчных элементах и форматировании кода, создадим тестовый HTML-код для статьи:
						

				

				

				

					

			
				
					<h1>About Me</h1>
<p>My name is <b>Bob</b>. I am a software engineer. <br>
I am 21 years old and live in New York.</p>
<p>Contact me on <a href="https://www.linkedin.com/">LinkedIn</a></p>
				
			

		

				

				

				

				

			
About Me


My name is Bob. I am a software engineer. 

I am 21 years old and live in New York.


Contact me on LinkedIn
		

				

				

				

							
Как вы можете видеть, HTML представляет собой набор блочных и строчных элементов, содержащих текст и форматирование.
						

				

				

				

							
В наших предыдущих примерах мы узнали, как создавать гиперссылки из текстового содержимого с помощью тега <a>.
Аналогичным образом, практически любой элемент можно сделать ссылкой.
Например, мы можем сделать изображение ссылкой:
						

				

				

				

					

			
				
					<a href="https://www.google.com">
  <img decoding="async" src="http://www.sololearn.com/images/tree.jpg">
</a> 
				
			

		

				

				

				

				

			
  
 		

				

				

				

							
Теперь щелчок по изображению откроет ссылку.
						

				

				

				

							
  1. Элементы не должны пересекаться. Другими словами, если открывающий тег располагается внутри элемента, то и соответствующий закрывающий тег должен располагаться внутри этого же элемента.
  2. Блочные элементы могут содержать вложенные блочные и текстовые элементы.
  3. Текстовые элементы могут содержать вложенные текстовые элементы.
  4. Текстовые элементы не могут содержать вложенные блочные элементы.
						

				

				

				

			
Списки
		

				

				

				

							
Выделяют два типа списков в HTML: упорядоченные и неупорядоченные.
						

				

				

				

			
Неупорядочный список
		

				

				

				

							
Неупорядоченный список создаётся с помощью тега <ul>.
						

				

				

				

					

			

				Элементы в неупорядоченных списках отмечены маркерами.			

					

				

				

				

				

							
Каждый элемент списка создается с помощью тега <li>. 
Вот список товаров для похода в магазин:
						

				

				

				

					

			
				
					<ul> 
  <li>Apples</li>
  <li>Milk</li>
  <li>Eggs</li>
</ul>
				
			

		

				

				

				

				

			
     
  
  • Apples
    • 
  
  • Milk
    • 
  
  • Eggs
    • 

		

				

				

				

							
Как вы можете видеть, элементы заключены в теги <ul></ul>.
						

				

				

				

							
Элемент списка может содержать другие элементы, такие как ссылки, форматирование текста и т.д.
Например:
						

				

				

				

					

			
				
					<ul>
  <li><a href="https://www.facebook.com">Facebook</a></li>
  <li><a href="https://www.google.com">Google</a></li>
  <li><a href="https://www.linkedin.com">LinkedIn</a></li>
 </ul>
				
			

		

				

				

				

				

					

				

				

				

			
Упорядочный список
		

				

				

				

							
Элементы упорядоченного списка отмечены цифрами вместо маркеров.
Такой список создается аналогично неупорядоченному списку, при этом элементы заключаются в тег <ol> вместо тега </ul>:
						

				

				

				

					

			
				
					<ol>
  <li>Bob</li>
  <li>Amy</li>
  <li>Dave</li>
</ol>
				
			

		

				

				

				

				

			
    
  
  1. Bob
    2. 
  
  2. Amy
    3. 
  
  3. Dave
    4. 

		

				

				

				

							
Такой код выдаст пронумерованный список имен.
						

				

				

				

							
Списки могут быть вложены в другие списки.
Например:
						

				

				

				

					

			
				
					<ol>
  <li>Milk</li>
  <li>Apples
    <ul>
      <li>Red</li>
      <li>Green</li>
    </ul>
  </li>
  <li>Bananas</li>
</ol>
				
			

		

				

				

				

				

			
    
  
  1. Milk
    2. 
  
  2. Apples
    
      
      
    • Red
      • 
      
    • Green
      • 
    
    
  
    3. 
  
  3. Bananas
    4. 

		

				

				

				

							
Как вы можете видеть, неупорядоченный список вложен в элемент списка упорядоченного списка.
						

				

				

				

							
Помните, что элементы списка следует открывать и закрывать тегами <li> </li>. Кроме того, они должны быть заключены в теги <ul> или <ol>, чтобы создать валидный список.
Рассмотрим следующее содержимое:
						

				

				

				

					

			
				
					Turn left
Turn right
Make a U-turn
You have arrived! 
				
			

		

				

				

				

				

			
Таблицы 
		

				

				

				

							
Таблица представляет собой набор строк и столбцов.
В HTML таблицы используются для отображения табличных данных (данных, структурированных по строкам и столбцам).
Таблица создается с помощью тега <table>:
						

				

				

				

					

			
				
					<table>
</table>
				
			

		

				

				

				

				

			
Строки таблицы 
		

				

				

				

							
В теге <table> для каждой строки таблицы должен быть тег <tr>.
						

				

				

				

					

			
				
					<table>
  <tr></tr>
  <tr></tr>
</table>
				
			

		

				

				

				

				

					

			

				Приведенный выше код выдаст две строки в таблице.			

					

				

				

				

				

			
Ячейки таблицы 
		

				

				

				

							
Тег <td> создает ячейку таблицы, которая содержится внутри <tr> и содержит содержимое ячейки:
						

				

				

				

					

			
				
					<table>
  <tr>
    <td>Amy</td>
    <td>42</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>19</td>
  </tr>
</table>
				
			

		

				

				

				

				

			

  

    Amy
    42
  

  

    Bob
    19
  


		

				

				

				

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

				

				

				

					

			
				
					<table border="1">
  <tr>
    <td>Amy</td>
    <td>42</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>19</td>
  </tr>
</table> 
				
			

		

				

				

				

				

			

  

    Amy
    42
  

  

    Bob
    19
  


 		

				

				

				

			
Шапки 
		

				

				

				

							
Тег <th> и <td> схожи, но первый используется для добавления шапки в таблицу.
Шапка представляет собой набор ячеек <th>, которые определяют содержимое ячейки или строки. Такое содержимое автоматически выравнивается в ячейке по центру и выделяется жирным шрифтом:
						

				

				

				

					

			
				
					<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Amy</td>
    <td>42</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>19</td>
  </tr>
</table>
				
			

		

				

				

				

				

			

  

    Name
    Age
  

  

    Amy
    42
  

  

    Bob
    19
  


		

				

				

				

							
Мы добавили новую строку и две ячейки <th> для шапки, которые содержат метки каждого столбца.
						

				

				

				

							
Ещё один полезный атрибут — colspan, который позволяет столбцу охватывать несколько ячеек.
Например, добавим в нашу таблицу верхнюю ячейку заголовка и сделаем так, чтобы она охватывала 3 столбца:
						

				

				

				

					

			
				
					<table border="1">
  <tr>
    <th colspan="3">Users</th>
  </tr>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Amy</td>
    <td>42</td>
    <td>USA</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>19</td>
    <td>Italy</td>
  </tr>
</table> 
				
			

		

				

				

				

				

			

  

    Users
  

  

    Name
    Age
    Country
  

  

    Amy
    42
    USA
  

  

    Bob
    19
    Italy
  


 		

				

				

				

							
Атрибут colspan определяет количество ячеек, которые необходимо охватить.
						

				

				

				

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

				

				

				

					

			

				Приведенный выше код выдаст две строки в таблице.			

					

				

				

				

				

					

			
				
					<table border="1">
  <tr>
    <th>Mon</th>
    <th>Tue</th>
    <th>Wed</th>
  </tr>
  <tr>
    <td>Soccer</td>
    <td rowspan="2">Free Time</td>
    <td>Math class</td>
  </tr>
  <tr>
    <td>Biology</td>
    <td>Travel</td>
  </tr>
</table> 
				
			

		

				

				

				

				

			

  

    Mon
    Tue
    Wed
  

  

    Soccer
    Free Time
    Math class
  

  

    Biology
    Travel
  


 		

				

				

				

			
Разделы страницы 
		

				

				

				

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

				

				

				

			

  

    < header >
  

  

    < nav >
  

  

    < section >
    < aside >
  

  

    < article >
  

  

    < footer >
  


 		

				

				

				

					

			

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

					

				

				

				

				

			
Шапка 
		

				

				

				

							
Шапка сайта обычно представляет собой раздел в верхней части страницы. Она может включать в себя логотип, название и другие подобные элементы.
Зачастую одна и та же шапка используется сразу на нескольких страницах сайта.
Чтобы определить раздел шапки, используйте тег <header>:
						

				

				

				

					

			
				
					<header>
  <h1>this is my header</h1>
 </header>
				
			

		

				

				

				

				

			

  
this is my header

 
		

				

				

				

					

			

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

					

				

				

				

				

			
Панель навигации 
		

				

				

				

							
Панель навигации содержит ссылки или кнопки, которые ведут на другие страницы сайта.
Её определяют с помощью тега <nav>:
						

				

				

				

					

			
				
					<nav>
  <a href="#">link 1</a>
  <a href="#">link 2</a>
  <a href="#">link 3</a>
 </nav>
				
			

		

				

				

				

				

					

				

				

				

							
Меню навигации также может быть частью шапки и включать в себя любые другие HTML-элементы.
						

				

				

				

			
Основное содержимое 
		

				

				

				

							
Для определения основного содержимого страницы используется тег <main>, который может включать в себя различные подразделы в виде тегов <article> и <section>.
						

				

				

				

					

			
				
					<main>
  <article>
    <h2>some heading</h2>
    <p>some text</p>
  </article>
 </main>
				
			

		

				

				

				

				

			

  

    
some heading

    
some text

  

 
		

				

				

				

							
<article> окружает блок содержимого, который имеет смысл сам по себе без остальной части страницы. Например, это может быть пост в блоге.
						

				

				

				

					

			

				Элемент < main > должен быть использован только один раз на странице.			

					

				

				

				

				

			
Статья и раздел 
		

				

				

				

							
Тег <section> схож с тегом <article>, но первый используется для группировки отдельной части страницы, которая представляет собой единый функциональный элемент, такой как карта или набор заголовков.
Лучше всего, когда каждый раздел начинается с заголовка.
						

				

				

				

					

			

				Элемент статьи может содержать в себе множество разделов, а раздел — множество статей. Всё зависит от структуры и содержимого вашей страницы.			

					

				

				

				

				

			
Подведём итог тому, что мы узнали: 
		

				

				

				

							
— HTML-элементы создаются при помощи тегов.
— Тег <p> используется для создания текстового абзаца.
— Элемент абзаца состоит из открывающего тега, содержимого и закрывающего тега.
						

				

					

				

		

					

				

				

					

			
						
		

				

				

					

				

				

		
		
			


	



			

					

						

					

			

					

						

				

			
Контакты
		

				

				

				

							
Контактная форма обратной связи
						

				

				

				

					

			
			
			

							
			
			

								

												
														
											

								

												
								

						

								

												
														
											

								

												
								

			

							

			
		

						

								

												
										

								

					
				

			

		

				

				

					

		

					

		

				

							

							

					

			

						

						

					

			

						

				

																										

				

					

		

				

			

						

				

					
				

				

					

		

				

			

						

				

					

							
					
						Telegram
											
				
							
					
						Vk
											
				
							
					
						Whatsapp
											
				
							
					
						Youtube
											
				
							
					
						Instagram
											
				
					

				

				

					

		

					

		

				

						

					

			

						

				

					
				

				

					

		

				

			

						

				

							
Design Experience © 2024. Все права защишены
						

				

					

		

					

		

					

		

					

		

				

		
        

                        

                

                    

                        
                    

                    

                        
Евгений

                        

                    

                

                


                                                                    

                        

                            

                                
                            

                            

                                

                                    Здравствуйте! Чем я могу вам помочь?                                

                            

                        

                    
                                            
                                    

            

        


			
			
			
			
					

			

					

				

				

			
Заполнить бриф
		

				

				

				

							
Заполнение брифа значительно ускоряет время на обсуждение проекта между клиентом и разработчиком.
						

				

				

				

					

			
			
			

							
			
			

								

							


						

								

					Интересующий вас сайт				

								

												
						
   
				

								

												
										

								

												
								

						

								

							


						

								

												
														
											

								

												
														
											

								

							


						

								

					Для юридических лиц или ИП				

								

												
														
											

								

												
														
											

								

					Если вы не ЮЛ или ИП, пропустите этот шаг				

								

							


						

								

					Контактная информация				

								

												
														
											

								

												
								

						

								

												
														
											

								

												
								

			
				
							
		

						

								

					
				

			

		

				

				

					

				

				

				

			

					

				

				

			
Оставить заявку
		

				

				

				

							
Перезвоню вам в течение 30-ти минут
						

				

				

				

					

			
			
			

							
			
			

								

					Контактная информация				

								

												
														
											

								

												
								

						

								

												
														
											

								

							

			
				
							
		

						

								

					
				

			

		

				

				

					

				

				

				

			

					

				

				

			
Бриф на
разработку сайта
		

				

				

				

							
Заполнение брифа значительно ускоряет время на обсуждение проекта между клиентом и разработчиком.
						

				

				

				

					

			
			
			

							
			
			

								

							


						

								

					Контактная информация				

								

												
														
											

								

												
								

						

								

												
														
											

								

							


						

								

					Интересующий вас лендинг				

								

												
						
   
				

								

							


						

								

					Направленность вашего лендинга				

								

												
								

			

							

			
		

						

								

					Краткое описание проекта				

								

												
										

								

					Если у вас есть ТЗ, загрузите				

								

												
								

						

								

							


						

								

					Ссылка на сайт ваших конкурентов				

								

												
														
											

								

												
														
											

								

					Понравившиеся вам сайты				

								

												
														
											

								

												
														
											

								

					
				

			

		

				

				

					

				

				

				

			

					

				

				

			
Оставить заявку
		

				

				

				

							
Перезвоню вам в течение 30-ти минут в рабочее время
						

				

				

				

					

			
			
			

							
			
			

								

					Контактная информация