ОС, 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 7 вместо Windows 8

Привет друзья! Хочу поделиться своей историей, как я переустановил Windows 7 вместо Windows 8 на ноутбуке с BIOS UEFI. В роле подопытного выступил бюджетный ноутбук ASUS X553M, было принято решение
Настройка
help2site
Сигналы биос при включении пк

Сборник сигналов БИОС Оглавление Как определить какие сигналы БИОС передает нам? При каждом запуске компьютера мы слышим одинарный писк, он пищит не просто так, прежде
Windows
help2site
Назначение клавиш клавиатуры

Обычную клавиатуру можно условно разделить на несколько областей . Клавиатура В самой верхней области клавиатуры находятся клавиши, которые не используются для ввода данных в компьютер.
Windows
help2site
Не запускается рабочий стол Windows 7

В процессе работы или при перезапуске компьютера некоторые пользователи сталкиваются с ситуацией, когда рабочий стол просто пропадает. На нем ничего не отображается, и работать за
Оборудование
help2site
Видеокарта её ядро и память

Видеокарта предназначена для вывода изображения на монитор, она отвечает за обработку графики. Цены на видеокарты колеблется от 1 тысячи рублей до 30 тысяч, современные видеокарты итого выше,
Web-Дизайн
help2site
SEO Plugin by SQUIRRLY

Для того чтобы занять максимально высокие места в поисковых системах, ваш контент должен быть одновременно и SEO — дружественным и удобным для чтения. Squirrly является
Настройка
help2site
Основные команды Linux

Оглавление Системная информация отобразить архитектуру компьютера — arch отобразить используемую версию ядра uname -r показать аппаратные системные компоненты — (SMBIOS / DMI) dmidecode -q вывести