 |
Принудительный разрыв строки
|
|
|
|
Лекция 1. Введение.
Назначение HTML. Основные понятия.
Структура HTML документа
Улучшеная страничка
Форматирование текста
Управление цветом
Рисунки на Web - странице.
Гиперссылки
Таблицы
Создание и форматирование таблиц
Разметка Web- страницы при помощи таблицы
Назначение HTML. Основные понятия.
Открывая в браузере любую Web- страницу, мы текст, картинки, кнопки, таблицы и м ногою другое. Для того, чтобы создать Web –страницу, может потребоваться всего лишь текстовый редактор Notepad.
Окройте любую Web- страничку. То, что вы видите в броузере – это ее “лицо”. Чтобы увидеть “изнанку” Web- страницы, выполните команду View \ HTML Code. Откроется текстовый редактор Блокнот, в котором вы увидите “устройство” этой страницы.
Введем несколько новых терминов.
НТML – язык разметки гипертекста
Гипертекст - информационная структура, позволяющая устанавливать смысловые святи между племенами текста на экране комп’ютера таким образом, чтобы можно было легко осуществлять переходы от одного элемента к другому. На практике в гипертексте некоторые слова выделяются путем подчеркивания или окрашивания в другой цвет (гиперссылки). Выделение словаговорит о наличии святи этого слова с некоторым документом, в котором тема, связанная с выделенным словом, рассматривается болем подробно.
Отдельный документ, выполненный в формате HTML, называется:
HTML – документом
Web- документом
Web- страницей
Такие страницы имеют расширение HTM, HTML.
Гиперссылка – фрагмент текста, который является указателем га другой файл или объект. Необходимы для того, чтобы обеспечить возможность перехода от одного документа к другому.
|
|
|
Группа Web- страниц, принадлежащая одному автору и взаимосвязанных общини гиперссылками, образует структуру, которая называется Web- узлом, Web – сайтом.
Каждая HTML - страница имеет свой уникальный URL - адрес в Интернете.
Скрипт
Браузер - программа для просмотра Web- страниц
Элемент - конструкция языка HTML, контейнер, содержащий данные и позволяющий отформатировать их определенным образом.
Любая Web- страница представляет собой набор элементов.Основная идея гипертекста – возможность вложения элементов.
Тэг - начальный ии конечный маркеры элемента, определяют границы действия элементов и отделяют элементы друг от друга. Тэги заключаются в угловые скобки, а конечный тэг снабжается косой чертой.
< Начальный тэг >Содержание элемента </Конечный тэг>
Пример 1.
< P><I> Этот текст в отдельном обзаце </ P></I>
< P align = " center"><I> Этот текст выровнен по центру экрана </I></ P>
Атрибут - параметр или свойство элемента. Атрибуты располагаются внутри начального тэга и отделяются друг от друга пробелами.
Пример 2.
< P align = " center"> Этот текст выровнен по центру экрана </ P>
Табуляция для вложенных, новая строка для каждого элемента.
Структура HTML документа. Простейшая HTML - страничка.
Устройство простейшей HTML- пронрамми изучим на следующем примере.
Любая Web - страница начинается с тєга <HTML> и заканчивается тєгом </HTML>.
| Пример 1. doc1.htm | |
| <HTML> <HEAD> < meta http-equiv = “Content-Type” content =”text/html; charset = windows-1251 “> <TITLE> Упражнение 1 </TITLE> </HEAD> <BODY> <h1> Первый HTML -- документ </h1> <hr> <p> Корова похожа на лошадь. А лошадь не похожа на корову. Имеено это сходство мы берем за основу </p> </BODY> </HTML> | Начало HTML - документа Начало головной части Информация о документе Название документа Конец головной части Начало тела документа Заголовок Горизонтальная линия Начало абзаца Абзац Конец абзаца Конец тела документа Конец HTML - документаа |
HTML – программа
|
|
|
Команды языка HTML (теги) заключаються в угловые скобки. Теги парные. Первый тег открывает описание команды, второй, отличающийся от первого наличием косой черты „/” перед ключевым словом – закрывает его.
Тег <HTML> открывает программу, а тег </HTML> - закрывает ее.
Между этими двумя основными тегами располагается головная часть программы и ее тело.
<HTML>
головная часть
тело
</HTML>
Головная часть программы
В блоке <HEAD> … </HEAD> описываются общие правила отображения HTML –документа и содержится вспомогательная информация о документе.
Команда <META > задает информацию о кодировке, в которой написан HTML - документ.(стандартная кодировка Windows).
Между парой тегов <TITLE> располакается имя документа, которое показывается в заголовке окна браузера.
Тело программы
Между тегами <BODY> располагаются команды, следуя которым браузер выводит информацию в окно документа.
<body background= файл_картинка bgcolor=цвет>
Осрбый паркетный фон: висота - 1 пикел, ширина-1600 пикселов.
Заголовки
Разделяют информацию на отдельные логические части. Поддерживаются заголовки 6 - уровней.
<Hn>Текст заголовка </Hn> n = 1-6
Горизонтальная линия
Горизонтальная линия задается тегом <hr>. Он не имеет парного. <hr>.
Абзац
Абзацы отделяются друг от друга пустыми строками. Задается абзац тегам <p> и </p>, между которыми помещается текст. Парный тег </p> просто игнорируется браузером.
Броузер выполняет команду следующим образом:
- Перед абзацем выводится пустая строка;
- Абзац выравниватся по левому краю;
- Между словами помещается ровно по одному пробелу независимо от того, сколько пробелов проставлено в HTML программе;
- Перенос текста на новую строку происходит тогда, когда очередное слово не помещается на экранной строке, а не тогда, когда новая строка начинается в HTML –программе.
Как работает браузер
Улучшеная страничка
<p>Корова похожа на лошадь.
<p>А лошадь не похожа на корову.
<p>Имеено это сходство
<p> мы берем за основу
|
|
|
Принудительный разрыв строки
Команда <br> заставляет браузер продолжать вывод абзаца с новой строки. Не имеет парного.
<p>
Корова похожа на лошадь. <br>
А лошадь не похожа на корову. <br>
Имеено это сходство <br>
Мы берем за основу.
Вопросы и упражнения.
- Что такое HTML- программа
- Кто выполняет программу
- При записи абзаца поставили между соседними словами поставили 5 пробелов.Сколько прбелов увидит он в броузере? (пять, один, ни одного, два)
- <P>
Иванов
Иван
</P>
Как покажет текст браузер?
· в две строчки
· в одну строчку с двумя прбелами
· в одну строчку с одним прбелом
· не покажет вовсе
- Какая из трех программ задает вывод текста в две строки:
| Программа 1 | Программа 2 | Программа 3 |
| <P> Іванов <br> Иван<br> </P> | <P> Іванов<br> Иван </P> | <P> Іванов <br> Иван </P> |
Форматирование текста
Структура, стиль и внешний вид текстового документа
Можно рекомендовать следующий способ оформления:
|
|
|
