2020-06-08
206
Тема: «Оформление html-документа. Таблицы».
Цель работы: научиться создавать таблицы в html-документе и использовать основные атрибуты для ее форматирования.
Оборудование и программное обеспечение: ПК, ОС Windows XP, Internet Explorer, текстовый редактор Блокнот.
Теоретический материал:
| Определить таблицу | <TABLE></TABLE> |
| Окантовка таблицы | <(abie bordei=?></TABLE> |
| Строка таблицы | <TR></TR> |
| Выравнивание | <TR ALIGH=LEFT|RIGHT> |
1. Таблица начинается с метки <table> и заканчивается </table>
2. Align устанавливает расположение таблицы по отношению к полям документа. Допустимые значения: ALIGN=LEFT (выравнивание влево),
ALIGN=RIGHT (выравнивание вправо).
3. WIDTH-ширина таблицы. Её можно задавать в пикселях (или в процентах (width=80%)
4. BORDER устанавливает ширину внешней рамки таблицы и ячеек в пикселях (border=4). Если атрибут не установлен, таблица показывается без рамки.
5. CELLSPACING устанавливает расстояние между рамками ячеек таблицы в пикселях(CELLSPACING=2)
6. CELLPADDING устанавливает расстояние меду рамкой ячейки и текстом в пикселях(CELLPADDING=10)
|
|
|
7. Таблица может иметь заголовок (<CAPTION>…..</CAPTION>), хотя заголовок не является обязательным. Метка CAPTION может включать атрибут ALIGN.
8. Допустимые значения:< ALIGN=TOP> (заголовок помещается над таблицей); <CAPTION ALIGN=BOTTOM> (заголовок помещается над таблицей).
9. Каждая строка таблицы начинается с метки <TR> и заканчивается меткой </TR>. Метка <TR> может включать в себя следующие атрибуты:
ALIGN. Устанавливает выравнивание текста в ячейках строки.
Допустимые значения: ALIGN=LEFT (выравнивание влево),
ALIGN=RIGHT (выравнивание вправо). VALIGN. Устанавливает вертикальное выравнивание текста в ячейках строки.
Допустимые значения: по верхнему краю),
по центру),
по нижнему краю).
10 Каждая ячейка таблицы начинается с метки <TD> и заканчивается меткой </TD>. Метка <TD> может включать следующие атрибуты:
NOWRAP. Присутствие этого атрибута означает, что содержимое ячейки должно быть
показано в одну строку.
COLSPAN объединяет ячейки по горизонтали. Например, COLSPAN=3 означает, что
ячейка простирается на три колонки.
ROWSPAN объединяет ячейки по вертикали. Например, ROWSPAN=2, означает, что
ячейка занимает две строки.
ALIGN Устанавливает выравнивание текста в ячейке.
Допустимые значения: ALIGN=LEFT (выравнивание влево)
ALIGN=RIGHT (выравнивание вправо).
ALIGN=CENTER (выравнивание по центру). по нижнему краю).
|
|
|
VALIGN Устанавливает вертикальное выравнивание текста в ячейке.
Допустимые значения: по верхнему краю),
по центру), по нижнему краю).
WIDTH – устанавливает ширину ячейки в пикселях (WIDTH=200)
HEIGHT – устанавливает высоту ячейки в пикселях (HEIGHT=40)
Если ячейка таблицы пуста, вокруг нее не рисуется рамка. Если ячейка пуста, а рамка нужна, в ячейку можно ввести символьный объект (non-breaking space – не разрывающий пробел).
Ячейка по прежнему будет пустой, а рамка вокруг нее будет.
Любая ячейка таблицы может содержать в себе другую таблицу
Задание №4
Таблицы.
До настоящего времени мы имели дело с документами, в которых существовал только один «поток» текста. На практике иногда необходимо расположить текст в несколько колонок. Таблица в этом может помочь. Кроме того, таблица, состоящая из одной ячейки, может очень эффектно выделить фрагмент текста.
Рассмотрим пример простейшей таблицы:
| У таблицы есть заголовок | |
| Первая строка, первая колонка | Вторая строка, вторая колонка |
| Вторая строка, первая колонка | Вторая строка, вторая колонка |
| html> <head> </head> <body bgcolor=#ded3dd> <table border=1> <caption>У таблицы есть заголовок</caption> <tr> <td>Первая строка, первая колонка</td> <td>Вторая строка, вторая колонка</td> </tr> <tr> <td>Вторая строка, первая колонка</td> <td>Вторая строка, вторая колонка</td> </tr> </table> </body> </html> |
Практическая работа №5
Тема: Гиперссылки в HTML
Цель работы: научиться создавать гиперссылки в html-документе.
Оборудование и программное обеспечение: ПК, ОС Windows XP, Internet Explorer, текстовый редактор Блокнот.
Теоретический материал:
| Ссылки на другую страницу | <A HREF=”URL”> текст </A> | Фрагмент документа: <A HREF=”str2.htm”> Ссылка1</A> <A HREF=”URL”>текст</A> <A NAME=”metka1”></A> <A HREF=”index.htm#metka1”> На главную страницу</A>” <A HREF= “mailto:vasia@mail.ru”> Пишите мне! </A> |
| Ссылка на закладку в другом документе | <A HREF=”URL#metka”> текст</A> | |
| На закладку в том же документе | <A HREF=”#metka”> текст</A> | |
| Определить закладку | <A NAME=”metka”> </A> | |
| На адресe-mail | <A HREF= “mailto:name@domen”> | |
Задание №5.
Создание гиперссылок.
Выше мы сказали, что HTML – это язык разметки гипертекста. Но что такое гипертекст? В отличие от обыкновенного текста, который можно читать только от начала к концу, гипертекст позволяет осуществлять мгновенный переход от одного фрагмента текста к другому. В HTML переход от одного фрагмента текста к другому задается с помощью метки вида:
<a href =”[адрес перехода]”>Выделенный фрагмент текста (ссылка) </a>
Создайте гиперссылку.
Для этого откройте блокнот и сохраните ваш документ под именем 10.html.
Запишите следующий программный код:
| <html> <head> <title>Создание гиперссылки</title> </head> <body> <h1>Учебник Геометрия - 10</h1> <a href="9.html">Просмотреть оглавление</a> </body> </html> |
При создании гиперссылок, вы должны помнить, что ваши документы на которые вы ссылаетесь должны находиться в одной папке. Если вы ссылаетесь на документ находящийся в другой папке, то вы должны указать полный его адрес.
