litceysel.ru
добавить свой файл
1

Лекция 11.1.doc V- 0,2


Cтр. из










Лекция 1. Язык разметки гипертекста HTML.


1.Назначение HTML. Основные понятия.

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

3. Улучшеная страничка

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

Управление цветом

4. Рисунки на Web - странице.

5. Гиперссылки

6. Таблицы


Создание и форматирование таблиц

Разметка 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> Этот текст в отдельном обзаце

< P align = " center"> Этот текст выровнен по центру экрана

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

Пример 2.

< P align = " center"> Этот текст выровнен по центру экрана

Табуляция для вложенных, новая строка для каждого элемента.


Структура HTML документа. Простейшая HTML - страничка.


Устройство простейшей HTML- пронрамми изучим на следующем примере.

Любая Web - страница начинается с тєга и заканчивается тєгом .

Пример 1. doc1.htm








< meta http-equiv = “Content-Type”

content =”text/html; charset = windows-1251 “>

Упражнение 1





Первый HTML -- документ








Корова похожа на лошадь.

А лошадь не похожа на корову.

Имеено это сходство

мы берем за основу







Начало HTML - документа

Начало головной части

Информация о документе


Название документа

Конец головной части

Начало тела документа


Заголовок

Горизонтальная линия

Начало абзаца

Абзац


Конец абзаца

Конец тела документа

Конец HTML - документаа


HTML – программа

Команды языка HTML (теги) заключаються в угловые скобки. Теги парные. Первый тег открывает описание команды, второй , отличающийся от первого наличием косой черты „/” перед ключевым словом – закрывает его.

Тег открывает программу, а тег - закрывает ее.

Между этими двумя основными тегами располагается головная часть программы и ее тело.




головная часть

тело




Головная часть программы

В блоке … описываются общие правила отображения HTML –документа и содержится вспомогательная информация о документе.

Команда задает информацию о кодировке, в которой написан HTML - документ.( стандартная кодировка Windows ).

Между парой тегов располакается имя документа , которое показывается в заголовке окна браузера.<br> <br> <br> <b> Тело программы</b><br> <br> Между тегами <BODY> располагаются команды, следуя которым браузер выводит информацию в окно документа. <br> <br> <body background= файл_картинка bgcolor=цвет><br> <br> Осрбый паркетный фон: висота - 1 пикел, ширина-1600 пикселов. <br> <br> <b>Заголовки</b><br> <br> Разделяют информацию на отдельные логические части. Поддерживаются заголовки 6 - уровней.<br> <br> <Hn>Текст заголовка </Hn> n = 1-6<br> <br> <br> <b> Горизонтальная линия</b><br> <br> Горизонтальная линия задается тегом <hr>. Он не имеет парного. <hr>. <br> <br> <b>Абзац</b><br> <br> Абзацы отделяются друг от друга пустыми строками. Задается абзац тегам <p> и </p>, между которыми помещается текст. Парный тег </p> просто игнорируется браузером.<br> <br> Броузер выполняет команду следующим образом:<br> <ul> <li><br> Перед абзацем выводится пустая строка;<br> <li><br> Абзац <a href="/amda/%D0%A3%D1%87%D0%B5%D0%B1%D0%BD%D1%8B%D0%B9+%D0%BF%D0%BB%D0%B0%D0%BD+%D0%B8+%D0%BE%D0%B1%D1%80%D0%B0%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5+%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D1%8B%2C+%D1%80%D0%B5%D0%B0%D0%BB%D0%B8%D0%B7%D1%83%D0%B5%D0%BC%D1%8B%D0%B5+%D0%B2+%D1%88%D0%BA%D0%BE%D0%BB%D0%B5+5a/main.html">выравниватся по левому краю</a>;<br> <li><br> Между словами помещается ровно по одному пробелу независимо от того, сколько пробелов проставлено в HTML программе;<br> <li><br> Перенос текста на новую строку происходит тогда, когда очередное слово не помещается <a href="/amda/%D0%A1%D1%82%D0%B0%D1%82%D1%8C%D0%B8+%D0%BF%D1%80%D0%B8%D0%B2%D0%BE%D0%B4%D0%B8%D1%82%D1%81%D1%8F+%D0%B2+%D0%BF%D0%B5%D1%80%D0%B2%D0%BE%D0%B9+%D1%81%D1%82%D1%80%D0%BE%D0%BA%D0%B5a/main.html"> на экранной строке</a>, а не тогда, когда новая строка начинается в HTML –программе.<br> </ul> <br> <br> <b> Как работает браузер</b><br> <br> <b>Улучшеная страничка</b><br> <br> </p> <i><</i><i>p</i><i>>Корова похожа на лошадь.</i> <p style="border:1px solid #0A0;padding:5px;"> <br> <i><</i><i>p</i><i>>А лошадь не похожа на корову. </i> <br> <br> <i><</i><i>p</i><i>>Имеено это сходство</i><br> <br> <i><</i><i>p</i><i>> мы берем за основу </i> <br> <br> <b>Принудительный разрыв строки</b><br> <br> Команда <br> заставляет браузер продолжать вывод абзаца с новой строки. Не имеет парного. <br> <br> <i><</i><i>p</i><i>></i><br> <br> <i>Корова похожа на лошадь. </i><i> </i><i><</i><i>br</i><i>></i><br> <br> <i>А лошадь не похожа на корову. <</i><i>br</i><i>></i><br> <br> <i>Имеено это сходство <</i><i>br</i><i>></i><br> <br> <i>Мы берем за основу . </i> <br> <br> <br> <b>Вопросы и упражнения.</b><br> <ol> <li><br> Что такое HTML- программа<br> <li><br> Кто выполняет программу<br> <li><br> При записи абзаца поставили между соседними словами поставили 5 пробелов.Сколько прбелов увидит он в броузере ? ( пять, один, ни одного, два )<br> <li><br> <br> <br> </ol> <br> Иванов<br> <br> Иван<br> <br> <br> Как покажет текст браузер?<br> <ul> <li><br> в две строчки<br> <li><br> в одну строчку с двумя прбелами<br> <li><br> в одну строчку с одним прбелом<br> <li><br> не покажет вовсе<br> </ul> <ol start=5> <li><br> Какая из трех программ задает вывод текста в две строки:<br> </ol> <br> <br> <br> <table style="border:1px solid #333;padding:5px;margin:5px;" width=660 border=1 bordercolor="#000000" cellpadding=7 cellspacing=0 frame=void> <col width=206> <col width=206> <col width=206> <tr valign=top> <td style="border-top:1px solid #AAA;" width=206> <br> <b>Программа 1</b><br> </td> <td style="border-top:1px solid #AAA;" width=206> <br> <b>Программа 2</b><br> </td> <td style="border-top:1px solid #AAA;" width=206> <br> <b>Программа 3</b><br> </td> </tr> <tr valign=top> <td style="border-top:1px solid #AAA;" width=206> <br> <P><br> <br> Іванов <br> <br> <br> Иван<br> <br> <br> <br> </td> <td style="border-top:1px solid #AAA;" width=206> <br> <P><br> <br> Іванов<br> <br> <br> Иван<br> <br> </P></p> <p style="border:1px solid #0A0;padding:5px;"></td> <td style="border-top:1px solid #AAA;" width=206> <br> <P><br> <br> Іванов <br> Иван<br> <br> </P><br> <br> </td> </tr> </table> <br> <br> <b> Форматирование текста</b><br> <br> Структура, стиль и внешний вид текстового документа<br> <br> Можно рекомендовать следующий способ оформления:<br> <br> <b>Программирование вывода текста</b><br> <br> Открывающие теги могут содержать атрибуты, т.е. дополнительную информацию о свойотображаемого на экране элемента. Атрибуты записываются через пробел от его имени в виде <a href="/amda/%D0%A2%D0%BE%D0%BB%D0%BA%D0%BE%D0%B2%D1%8B%D0%B9+%D1%81%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C+%D0%BF%D1%81%D0%B8%D1%85%D0%B8%D0%B0%D1%82%D1%80%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D1%85+%D1%82%D0%B5%D1%80%D0%BC%D0%B8%D0%BD%D0%BE%D0%B2a/main.html">отдельного ключевого слова</a>, знака «=» и параметра ( значения атрибута ). Порядок следования не важен. Действует внутри тега. <br> <br> Атрибут size определяет толщину линии <br> <br> < hr size=1><br> <br> <table style="border:1px solid #333;padding:5px;margin:5px;" width=661 border=1 bordercolor="#000000" cellpadding=7 cellspacing=0> <col width=427> <col width=204> <tr valign=top> <td style="border-top:1px solid #AAA;" width=427> <br> <b> <font style="color:#5F5;font-size:18px;text-shadow:-1px 0 #000, 0 1px #000, 0px 0 #000, 0 -0px #000;">Пример</font> 2. doc2.htm</b><br> </td> <td style="border-top:1px solid #AAA;" width=204> <br> <br> <br> </td> </tr> <tr valign=top> <td style="border-top:1px solid #AAA;" width=427> <br> <HTML> <br> <br> <HEAD><br> <br> < meta http-equiv = “Content-Type”<br> <br> content =”text/html; charset = windows-1251 “><br> <br> <TITLE> Вид 2





Сборник газетных вырезок








Заметка из газеты «Станок»




Действительно, в отделе ”Что случилось за день” нонпарелью было напечатано:

Попал под лошадь







Вчера на плошади попал под лошадь извозчика






Это извозчик отделался легким испугом



”Двенадцать стульев “
Илья Ильф,

Евгений Петров