Занятие № 4. Оформление таблиц в HTML -документе.
· В практическом HTML-программировании таблицы совершенно незаменимы для создания левых и правых полей страницы, выравнивания элементов на экране, многоколонной верстки, наложения картинок друг на друга, для отображения на экране табличного материала. Таблица представляет собой прямоугольник, расчерченный на клетки, образующие столбцы и строки.
· Таблица задается командой <TABLE>…</TABLE> . Внутри этих тегов задаются строки командами <TR>…</TR>, внутри строк задаются ячейки командами <TD>…</TD>. Таким образом по строкам задается вся структура таблицы:
| <TABLE> | |||
| <TR> | <TD> </TD> | <TD> </TD> | </TR> |
| <TR> | <TD> </TD> | <TD> </TD> | </TR> |
| <TR> | <TD> </TD> | <TD> </TD> | </TR> |
| </TABLE> | |||
Атрибуты для тегов <TABLE>, <TR>, <TD>:
border=число - толщина линии
bordercolor= цвет - цвет линии
bgcolor=цвет - цвет заливки фона
Атрибут (или %) – ширина таблицы или ячейки в пикселях
· Задание:
а) создать HTML-документ (на основе файла index. html), содержащий таблицу:
Характеристики коммуникационной сети
| Тип связи | Скорость, Мгбит/с | Помехоустойчивость |
| Электрические кабели: · Витая пара · Коаксиальный кабель | 10 – 100 до 10 | Низкая Высокая |
| Телефонная линия | 10 – 20 | Низкая |
| Оптоволоконный кабель | 10 – 200 | Абсолютная |
б) Сохранить документ в файле с именем index4. html в рабочей папке.
в) Просмотреть HTML-документ в обозревателе Internet Explorer.
Занятие № 5. Графика в HTML - документе.
· Браузеры «понимают» два графических формата – gif и jpg.
Формат gif .
Картинки в этом формате поддерживают 256 цветов. Этот формат имеет дополнительные возможности:
1) Мультипликация. Используя анимационный GIF-редактор, легко собрать простой мультик (нарисовать отдельные кадры, настроить время задержки и последовательность показа, «зациклить» кино или показывать кадры только один раз). Когда анимация готова, она записывается на диск как обычный gif-файл. В HTML нет различия в выводе на экран простого gif-файла или анимационного.
2) Прозрачная графика. GIF-формат позволяет один или несколько цветов в картинке объявить прозрачными. Это помогает избавиться от строго прямоугольных иллюстраций и вписывать рисунок в документ более привлекательно. Прозрачный цвет задается в редакторе (GIF-редактор или FOTOSHOP) при записи файла на диск.
Формат jpg .
Этот формат был разработан специально для передачи фотографий. Он поддерживает миллионы цветов и позволяет получать изображения очень высокого качества. Но это отражается на увеличении объема файлов.
Графические файлы желательно хранить в отдельной папке.
· Оформление фона:
атрибут background=”имя файла” – для тегов <BODY>, <TABLE>, <TD>)
· Вставка рисунков:
<IMG src=”имя файла” height=число> - имя файла – путь к файлу с рисунком, width – ширина рисунка в пикселях, height – высота рисунка в пикселях.
· Задание:
а) Создать папку для рисунков Image;
б) Скопировать в папку Image файлы с понравившимися рисунками и фонами;
в) Создать html-документ следующего содержания:
- оформить фон страницы;
- в ячейки, помеченные *, вставить рисунки, указав размеры рисунка;
- в ячейки, помеченные +, вставить текст пояснения к соответствующим рисункам и оформить фон ячейки.
| + | * |
| * | + |
| + | * |
г) Сохранить файл с именем index 5. html в рабочей папке;
д) Просмотреть результат в обозревателе Internet Explorer.
Занятие № 6. Гиперссылки в HTML - документе.
· Гипертекст – документ, содержащий ссылки на другие документы. Информация, подготовленная в виде гипертекса, это электронная информация, и работать с ней можно только на компьютере. Чаще ссылка выделяется на фоне экрана монитора с помощью изменения цвета и подчеркивания. Это гиперссылка или гиперсвязь. Гиперссылка – это выделенный объект, связанный с другим файлом и реагирующий на щелчок мыши. Гипертекст связывает множество документов с помощью гиперссылок. На занятие будут рассмотрены способы создания гиперссылок на документы локального компьютера.
· Гиперссылка с одного файла на другой.
Для того, чтобы броузер загрузил в свое окно новый html-документ (файл), нужно записать ссылку при помощи тега <A> с атрибутом href=имя_файла:
<A href=имя_файла>текст или рисунок</A> Задание перехода к новому
документу.
· Гиперссылка внутри одного файла.
Для задания гипертекстового перехода внутри документа используют два тега <A>. Первая команда с атрибутом href является источником перехода, а вторая с атрибутом name – приемником:
<A href=#метка> текст или рисунок </A> Задание перехода по метке
На экран выводится ссылка.
……………………………………..
<A name=метка></A> Метка. Сюда броузер
переходит по ссылке.
На экране ничего
не отображается.
Метка – набор символов (латинских букв и (или) цифр).
· Рисунок как гиперссылка:
<A href=имя_файла1> <IMG src=имя_файла2 height=число> </A>
· Текст как гиперссылка:
<A href=имя_файла>текст</A>
· Задание:
а) Скопировать в рабочую папку html-файлы с текстами (avia.html, avto.html, flot.html, geldor.html).
б) Создать html-документ, состоящий из четырех картинок-ссылок на текстовые файлы, картинки расположены в таблице по две картинки в два ряда. Документ сохранить под именем index 6.html в рабочей папке.
в) В файлах-текстах создать ссылки с конца документа на начало этого же документа, а также ссылки на основной html-документ. Сохранить обновленные файлы с текстами в рабочей папке.
г) Просмотреть результат работы в обозревателе Internet Explorer.
· Отформатировать файлы с текстами, используя изученные на предыдущих уроках приемы оформления шрифта и фона.
Дата добавления: 2018-09-22; просмотров: 337; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!