ОС, IT, Web и новинки софта

Изучени HTML. Практические занятия — Упражнение 1.

Здравствуйте, друзья. Сегодня мы начинаем серию практические занятий по изучению языка веб разметки HTML. Цель данных уроков создать не сложный сайт и входе его создания разобраться с основными принципами HTML верстки.

  1. Откройте текстовый редактор Notepad++. Этот редактор мы будем использовать вместо стандартного блокнота. Преимущество состоит в том, что HTML код написанный в этом редакторе подсвечивается разными цветами.
  2. Наберите следующий HTML-код:
				
					<HTML>
<HEAD>
<meta charset="UTF-8">
<TITLE >Упражнение1</TITLE> 
</HEAD>
<BODY> 
  
Тестовый текст для проверки шрифта.
---------------------------------------------------------------------------
Тестовый текст для проверки шрифта.
Тестовый текст для проверки шрифта.
Тестовый текст для проверки шрифта.
Тестовый текст для проверки шрифта.
---------------------------------------------------------------------------
  
Тестовый текст для проверки шрифта.
  
Тестовый текст для проверки шрифта.
  
  
Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.
 
Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.
 
Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.
  
</BODY> 
</HTML>
  1. Сохраните файл под именем upr1.html
  2. Откройте файл в браузере.
  3. Вы должны увидеть результат.
  4. Несмотря на то, что текст между <body> и <body>был набран в несколько строк, в браузере всё выводится одним сплошным абзацем.
  5. Оказывается браузер игнорирует все переносы строк. Начало и конец каждого абзаца приходится указывать вручную.
  6. Дело в том, что различные операционные системы могут отображать одну и ту же информацию по-разному. И для того, чтобы увидеть страницу так, как её задумал разработчик необходимо писать HTML-код.
  7. Все абзацы, заголовки переносы строк. Всё указывается с помощью тегов.

Откройте файл upr1.html в редакторе Notepad++ (если он был закрыт). Для этого можно щёлкнуть по нему правой клавишей и выбрать Edit with Notepad++. Измените его в соответствии с образцом

				
					<HTML>
<HEAD>
<TITLE >Упражнение1</TITLE> 
</HEAD>
<BODY> 
 
<h1>Тестовый текст для проверки шрифта.</h1>
 
<hr>
 
<p>
Тестовый текст для проверки шрифта.<br>
Тестовый текст для проверки шрифта.<br>
Тестовый текст для проверки шрифта.<br>
Тестовый текст для проверки шрифта.
</p> 
 
<hr>
 
<h2>Тестовый текст для проверки шрифта..</h2>
  
<h3>Тестовый текст для проверки шрифта.</h3>
  
<p>
Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.
</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!-- Yandex.RTB R-A-2123552-3 -->
<div id="yandex_rtb_R-A-2123552-3"></div>
<script>window.yaContextCb.push(()=>{
	Ya.Context.AdvManager.render({
		"blockId": "R-A-2123552-3",
		"renderTo": "yandex_rtb_R-A-2123552-3"
	})
})
</script></div>
 
<p>
Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.
</p> 
<p>
Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.
</p><div class='code-block code-block-4' style='margin: 8px 0; clear: both;'>
<!-- Yandex.RTB R-A-2123552-1 -->
<div id="yandex_rtb_R-A-2123552-1"></div>
<script>window.yaContextCb.push(()=>{
	Ya.Context.AdvManager.render({
		"blockId": "R-A-2123552-1",
		"renderTo": "yandex_rtb_R-A-2123552-1"
	})
})
</script></div>
 
<p>
Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.
</p>
  
</BODY> 
</HTML>
  • У вас должно получиться
  • Теги, которые вы использовали:
<h1>   </h1>Заголовок первого уровня (всего бывает 6)
<h2>   </h2>Заголовок второго уровня (всего бывает 6)
<h3>   </h3>Заголовок третьего уровня (всего бывает 6)
<p>   </p>Абзац.
<br>Переход на новую строку. При этом новый абзац не создаётся.
<hr>Вставка горизонтальной линии

Откройте файл upr1.html в редакторе Notepad++ (если он был закрыт). Для этого можно щёлкнуть по нему правой клавишей и выбрать Edit with Notepad++. Измените его в соответствии с образцом

				
					<HTML>
<HEAD>
<TITLE >Упражнение1</TITLE> 
</HEAD>
<BODY> 
  
  
  
  
<h1>Тестовый текст для проверки шрифта.</h1>
 
<hr>
  
<b>Тестовый текст</b> для проверки шрифта.<br>
<b>Тестовый текст</b> для проверки шрифта.<br>
<b>Тестовый текст</b> для проверки шрифта.<br>
<b>Тестовый текст</b> проверки шрифта.
  
 
<hr>
  
 
<h2>Тестовый текст для проверки шрифта.</h2>
  
 
<h3>Тестовый текст для проверки шрифта. <u>Вашего времени</u></h3>
  
 
<p>
Тестовый текст для проверки шрифта. <i>Тестовый текст для проверки шрифта.</i> Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.
</p>
<p>
Тестовый текст для проверки шрифта. <b>Тестовый текст для проверки шрифта.</b> Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.
</p> 
<p>
Тестовый текст для проверки шрифта. <u>Тестовый текст для проверки шрифта.</u> Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.
</p>
<p>
Тестовый текст для проверки шрифта. <b><u><i>Тестовый текст для проверки шрифта.</i></u></b> Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.
</p>
  
</BODY> 
</HTML>
  • У вас должно получиться следующий вариант
  • Теги, которые вы использовали:
<b>   </b>Жирный текст
<i>   </i>Курсивный (наклонный) текст
<u>   </u>Подчёркнутый текст

Откройте файл upr1.html в редакторе Notepad++ (если он был закрыт). Для этого можно щёлкнуть по нему правой клавишей и выбрать Edit with Notepad++. Измените его в соответствии с образцом

				
					<HTML>
<HEAD>
<TITLE >Упражнение1</TITLE> 
</HEAD>
<BODY bgcolor="gold"> 
  
<h1 align="center">Тестовый текст для проверки шрифта.</h1>
  
<hr>
   
<b>Тестовый текст</b> для проверки шрифта.<br>
<b>Тестовый текст</b> для проверки шрифта.<br>
<b>Тестовый текст</b> для проверки шрифта.<br>
<b>Тестовый текст</b> проверки шрифта.
  
<hr>
  
  
<h2>Тестовый текст для проверки шрифта.</h2>
  
 
<h3>Тестовый текст для проверки шрифта. <u>Вашего времени</u></h3>
  
 
<p>
Тестовый текст для проверки шрифта. <font face="Arial" size="+2" color="red">Тестовый текст для проверки шрифта.</font> Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.
</p>
<p>
Тестовый текст для проверки шрифта. <b><u><i>Тестовый текст для проверки шрифта.</i></u></b> Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.
</p>
<p>
Тестовый текст для проверки шрифта. <b><u><i>Тестовый текст для проверки шрифта.</i></u></b> Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.
</p>
<p>
Тестовый текст для проверки шрифта. <b><u><i>Тестовый текст для проверки шрифта.</i></u></b> Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.
</p>
  
</BODY> 
</HTML>
  • У вас должен получиться финальный вариант
  • Теги и атрибуты, которые вы использовали:
bgcolor=»gold»Атрибут тега <body>   </body>. Задаёт цвет фона всей страницы
align=»center»Выравнивание текста по центру. Применяется к заголовкам и абзацам. Помимо значения center может принимать следующие параметры: left – выравнивание по левому краю right – выравнивание по правому краю justify – выравнивание по ширине
<font>   </font>Задаёт свойства текста – его размер, цвет и шрифт. Используется только с атрибутами. Атрибуты: face=»Arial» — шрифт size=»+2″ — размер color=»red» — цвет

Теперь вы можете потренироваться самостоятельно, для этого:

  • В конце текста вставьте горизонтальную линию. Скопируйте и вставте несколько абзацев (6-7 абзацев будет достаточно).
  • Выполните оформление вставленного текста с помощью изученных тегов. Используйте как можно большее количество изученных тегов.
  • Замечание. Не лепите теги внутри текста где попало. Не делайте что попало жирным, курсивом, не выделяйте что попало другим цветом, шрифтом и. т. д. Тщательно продумайте целесообразность использования каждого тега

Контрольные вопросы

  1. Какие логические части имеет HTML-документ?
  2. Между какими тегами заключается заголовок?
  3. Между какими тегами заключается название страницы?
  4. Между какими тегами заключается содержание страницы?
  5. Что такое содержание веб-страницы?
  6. Какими бывают теги?
  7. Что такое атрибуты?
  8. Какой тег создаёт абзац?
  9. Какой тег осуществляет перенос текста на новую строку без создания нового абзаца?
  10. Какой тег создаёт заголовок первого уровня?
  11. Сколько уровней заголовков бывает?
  12. Как сделать текст жирным, курсивом, подчёркнутым?
  13. Как осуществить выравнивание текста по правому краю, по центру, по ширине?
  14. Как изменить размер, цвет, шрифт текста?
  15. Как изменить цвет фона страницы?

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

Свежие записи
Команда RD

Команда RD и RMDIR позволяют удалять как каталоги, так и
Оборудование
help2site
Почему принтер не печатает? Выясняем причины

Оглавление Что делать, если принтер отказывается нормально печатать Это, как правило, случается в самое неподходящее время — когда вам срочно нужен важный документ, а принтер
Linux
help2site
Релиз новой версии TrueConf для Linux

Крупнейший разработчик индивидуальных и корпоративных продуктов видеоконференцсвязи в СНГ — компания «TrueConf», недавно усовершенствовало свое приложение TrueConf для Linux 1.0.5, которое позволило поддерживать такие дистрибутивы
Программы
help2site
Бесплатная программа FTP клиент FileZilla

Оглавление Filezilla ftp client. Удаленная работа с хостингом. Filezilla ftp client – это прекрасная программа для доступа к серверу хостинга, на котором находится ваш сайт,
Web-Дизайн
help2site
Вкладки (Табы/Tabs) на чистом CSS

Вкладки (Табы/Tabs) на чистом CSS с интересным эффектом появления — исчезновения, из минусов высоту вкладки нужно задавать в ручную. Идея построения закладок на одном CSS