Пример 1B

Первый шаг в HTML

Ю.В.Боковой

В начале изучения любого предмета всегда приходиться преодолевать некий барьер новизны, который иногда отпугивает от дальнейшего овладения интересной областью знаний. Изложение, приведенное ниже, имеет целью помочь кратчайшим путем, строго и с максимальной простотой, хотя и с ограничением полноты, освоить начала WEB программирования на простых примерах.. Несмотря на возможность создания сайта без знания языка HTML, например, с помощью редактора Word, маловероятно, что кто-либо возьмется за такое мероприятие и доведет его до конца. В то же время владение основами HTML позволит обрести уверенность в своих силах на творческом пути WEB-программиста.

Введение
1. Разметка текста
2. Списки
3. Графика
4. Ссылки
5. Таблицы
Заключение
Источники (ссылки)

Введение

На первом этапе на компьютере потребуются Windows, браузер Internet Explorer (далееIE) и текстовый редактор "Блокнот".

Пример1

1.Открыть "Блокнот" и записать:

<HTML>

<HEAD>

<TITLE>Пример1</TITLE>

</HEAD>

<BODY>

Здесь будет размещен текст, содержащий таблицы, картинки и др. информационные фрагменты.

</BODY>

</HTML>

2. Сохранить файл в папке с номером группы (которая в свою очередь должна быть размещена в папке Временная, находящейся в папке Мои документы). Имя файла – Занятие 1 с расширением htm (допускается html, но не.txt!), т.е. как документ html.

3. Кликнуть на имени этого файла. Откроется окно IE, в заголовке которого будет выведено "Пример1", а в основном поле указанный текст.

Язык HTML – по сути редактор, осуществляющий размещение и форматирование информационных блоков. Его команды – теги, в основном пары – открывающий и закрывающий, действие которых распространяется на информационный блок между ними. Текст программы можно писать в строчку: пробелы и знаки перевода каретки игнорируются. HTML и его редакторы (в том числе и Word) не различает прописные и строчные символы шрифта и сохраняют тексты программ в строчных символах. Здесь для описания команд используются прописные символы исключительно для повышения внятности текста, но при собственной работе рекомендуется использовать строчные.

Теги

<html>, </html> - парный тег. С него начинается и им заканчивается любой документ HTML.

<title>, </title> - парный тег - выводит заголовок страницы (находится в верхнем левом углу браузера).

<body>, </body> - парный тег, обрамляющий "тело" документа – ту часть, которая отражается на экране. <head>, </head> - парный тег для создания блока.

1. Разметка текста

, - парный тег. Разбивает текст на параграфы и допускает атрибуты форматирования. Для выравнивания текста в состав тега вводится атрибут align="значение ". Полный вид тега с атрибутом выравнивания текста по центру имеет вид:

Этот текст выровнен по центру .

Этот текст выровнен по правому краю.

Выравнивание по левому или правому краю соответственно left или right.

Пример 1А. Скопировать две строки с тегами параграфа в буфер, открыть в IE документ Пример1.htm, перейти в меню Вид на опцию "В виде HTML", вставить фрагмент из буфера после тега <BODY>, сохранить документ с изменениями и посмотреть его действие, обновив соответствующей кнопкой открытую в IE страницу Пример1.htm.

Аналогично будем действовать и с другими примерами из этого пособия.

Приведенный формат описания атрибутов справедлив и для всех атрибутов в других тегах. Если атрибутов несколько, они вводятся последовательно друг за другом без дополнительного разделения.

, - полужирное выделение текста.

, - курсив.

- непарный тег переноса строки текста, рисунка, таблицы и др.

<h1>, </h1> - парный тег заголовка с размером текста от 1 до 6.

<!—текст комментария--> - текст в таком обрамлении на экран не выводится и виден только в режиме HTML.

Пример 1B

В открытом браузере Internet Explorer перейти в режим просмотра HTML и скопировать туда следующую строку (или набрать ее в редакторе –Блокнот).

Этот текст выровнен по центру и выделен полужирным. .

Сохранить обновленный файл. Обновить окно браузера, кликнув по кнопке обновить, и посмотреть результат.

Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями: