Изучени 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> 
<p>
Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.
</p> 
<p>
Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.
</p> 
<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. Как изменить цвет фона страницы?

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

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

Команда md позволяет создавать каталог или промежуточные каталоги в указанном

Оборудование
help2site
Как выбрать корпус для компьютера

Сейчас на рынке представлен очень большой выбор корпусов для персонального компьютера (ПК), от чего у неопытных пользователей просто разбегаются глаза, и они не знают, что

Windows
help2site
Как изменить язык интерфейса в Windows 8

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

Web-Дизайн
help2site
О файлах Sitemap

Что такое файл Sitemap? Файл Sitemap позволяет сообщить поисковым роботам о том, как организован ваш сайт. Роботы поисковых систем сканируют этот файл, чтобы более точно