Создание линий. Форматирование шрифта.

Введение

Основы языка HTML

Что такое HTML?

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

HTML-документ представляет собой обычный текстовый документ с управляющими конструкциями языка HTML – тегами, которые и производят действия «форматирования» над текстовыми блоками и осуществляют вставку различных объектов в документ.

Как создать HTML?

Для создания HTML документов используют текстовые редакторы (например Блокнот), текстовые процессоры (Word), редакторы тегов HTML и визуальные HTML-редакторы. Вы можете создать HTML документ в простом Блокноте. Придерживаясь определённого стандарта и записав в текстовом файле HTML код, сохранив на жёстком диске и изменив расширение на .html или .htm вы получите полноценную web страничку.

Структура HTML документа

Что такое теги в HTML?

Теги - это инструменты разметки текста. Теги могут прописываться как строчными, так и прописными буквами, разницы никакой нет. Теги бывают парными и не парными. В качестве примера парного тега можно привести тег <html></html>, этот тег начинает и заканчивает любой HTML документ. Вторая часть парного тега отличается от первой только наличием символа "/", однако первая часть тега может содержать и дополнительные параметры. Например в теге <font size="4"></font>, параметр size="4" определяет размер текста. Примером непарного тега является <hr> - тег вставки в HTML документ горизонтальной линии, такой как в конце этого абзаца.

Практическая работа №1

Тема: «Создание простейшего HTML -документа.

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

Цель работы: познакомиться со структурой html-документа и на основе создать свою страницу; изучить основные тэги форматирования текста и использовать их при создании страницы.

Оборудование и программное обеспечение: ПК, ОС Windows XP, Internet Explorer, текстовый редактор Блокнот.

Теоретический материал:

Структура html -документа:

Тип документа	<HTML></HTML>	начало и конец файла
Имя документа	<TITLE></TITLE>	должно быть в заголовке
Заголовок	<HEAD></HEAD>	описание документа
Тело	<BODY></BODY>	содержимое страницы

Назначение

Вид тэгов

Примечание

Заголовки

Внутренние заголовки различного уровня

<H1></H1> <H2></H2>….

<H1>Пример 1</H1> <H2>Пример2</H2>

<H6>Пример3</H6>

ЗдесьN – номер уровня заголовка (от 1 до 6)

Заголовок с выравни-

ванием

H? ALIGN=”left”></H?>

<H2 align="center">Этот заголовок будет выровнен по центру</H2>

Типы выравнивания: · left– по левому краю, · center– по центру, · right– по правому краю, · justify– по ширине

Форматирование абзацев

Создание абзаца (параграфа)

<P>Этот параграф выровнен по умолчанию</P>

Выравнивание абзаца

<P align="right">А этот по правому краю</P>

Типы выравнивания: left, right, center и justify

Перевод строки внутри абзаца

<BR>

Одиночный тэг

Начертание шрифта

Тег

Начертание

Пример

Полужирное

<B>Полужирное</B>

Курсив

<I>Курсив</I>

Зачёркнутый

<S>Зачёркнутый</S>

Подчёркнутый

<U>Подчёркнутый</U>

Цвет шрифта

Размет шрифта

Задание№1.

Создание и сохранение html-документа.

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

Порядок выполнения работы:

1. На локальном диске С / в папке Мои документы/ создать папку под своей фамилией/

2. Открыть Блокнот (Пуск-Все программы – Стандартные - Блокнот)

3. Сохранить документ под именем 1. html в свою папку(файл -сохранить как –мои документы –ваша папка)

4. Закройте документ

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

6. Откройте ваш документ (двойной щелчок по значку)

7. Вызовите программный код вашего документа, для этого щелкните правой кнопкой мыши по любой точке вашего документа, вы вызываете контекстное меню, и выберите Просмотр html -кода.

8. Запишите ваш первый программный код:

<html>

<head>

<title>Моя первая страница</title>

</head>

<body>

<h1>Моя первая страница</h1>

</body>

</html>

9. Сохраните ваш код для этого нажмите ctrl + s

10. Обновите документ (щелкните по зеленому значку на панели браузера)

11. Измените документ. Установите цвет фона и шрифта. Для этого внесите следующие изменения в код:

<html>

<head>

<title>Моя первая страница</title>

</head>

<h1><font color = red>Моя первая страница</font></h1>

</body>

</html>

Тег BGCOLOR отвечает за цвет фона; Тег FONT устанавливает цвет и размер шрифта.

12. Добавьте в ваш документ текст. Для этого воспользуйтесь тегом абзаца <p> и тегом переноса текста на новую строку <br>

13. Измените расположение текста, применив тег <align>

14. Внесите изменения в ваш код:

<html>

<head>

<title>Моя первая страница</title>

</head>

<h1><font color = red>Моя первая страница</font></h1>

< p align = right >Первое практическое задание< br >Выполнил студент 1 курса< br >Фамилия Имя </ p >

</body>

</html>

Практическая работа №1.

Стих Автор неизвестен Однажды в студеную зимнюю пору Сижу за решеткой в темнице сырой Гляжу поднимается медленно в гору

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

Задание №1.2

Создание линий. Форматирование шрифта.

Элемент HR

Элемент HR отображает горизонтальную линию. Этот элемент имеет следующие атрибуты:

Атрибут	Описание	Значение	Пример
align	Задаёт выравнивание линии (по умолчанию по центру)	left\|center\|right	align="right"
color	Задаёт цвет линии	цвет	color="black"
size	Задаёт толщину линии в пикселях	от 1 до бесконечности	size="1"
noshade	Логический (булев) атрибут, если он установлен, то линия не будет объёмной	нет	noshade
width	Задаёт длину линии в пикселях или процентах от ширины экрана	Число или проценты	width="80%"

Пример

Порядок выполнения работы:

1. Откройте блокнот и сохраните документ в вашу папку под именем 2.html.

2. Изобразите несколько линий разной длины, толщины и цвета. Для того чтобы изобразить горизонтальную линию воспользуйтесь тегом <hr> . Чтобы задать толщину добавьте параметр SIZE = 3, чтобы задать ширину добавьте параметр WIDTH = 100%

3. Запишите программный код:

<html>

<head>

<title>Линии </title>

</head>

<h1>Коллекция горизонтальных линий</h1>

</body>

</html>

4. Откройте блокнот и сохраните документ в вашу папку под именем 3.html.

5. Изобразите несколько фраз, напечатанных разным стилем (полужирно, подчеркнуто и тд)

6. Воспользуйтесь тегами <b> - отображает полужирный шрифт, <u> - отображает подчеркнутый шрифт, <i> - отображает наклонный шрифт (курсив), <tt> - имитирует шрифт печатной машинки

7. Запишите программный код:

<html>

<head>

<title>Форматирование шрифта</title>

</head>

<body>

<p><b>Полужирный щрифт</b><br>

<i>Текст отображается курсивом</i><br>

<tt>Текст имитирует пишущую машинку</tt><br>

<u>Подчеркнутый текст</u>

</p>

</body>