ОС, 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 позволяют удалять как каталоги, так и
Windows
help2site
Восстановление системы windows xp

Если ваш компьютер начал нестабильно работать, стали появляться различные ошибки, то в этом случае можно применить восстановление системы (откат настроек и системных файлов на более
Web-Дизайн
help2site
Разделы документа в HTML 5.1

Это перевод статьи «Document Outlines in HTML 5.1», опубликованной на bitsofco.de. Оригинальную статью можно прочитать здесь. В стандарте HTML 5.1. есть определённое количество изменений, два из которых
Ремонт
help2site
Акт неремонтопригодности ноутбука

Сдав свой ноутбук в сервисный центр для починки, мы надеемся на его скорейшее восстановление, но вместо этого приходит SMS-уведомление о том, что ваш ноутбук неремонтопригоден.
Интернет
help2site
Купить планшет за границей

Заказать планшет IPAd Купить планшет за границей стало намного проще и безопаснее, сегодня я хочу рассказать вам, как это можно осуществить. Сами понимаете, что в интернете
Настройка
help2site
Как устанавливать драйвера на компьютер

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