Сделай Сам Свою Работу на 5

Создайте страничку с информацией о себе - выберите цвет фона и текста, начертание букв; разместите свою фотографию (можно условную). Используйте различные тэги форматирования текста.

2. Создайте небольшой сайт (4-5 страниц) с информацией о себе и своей семье (или своей учебной группе, друзьях и пр.). Обоснуйте выбор структуры сайта и способа навигации по нему. Используйте в качестве фона для HomePage подходящее изображение. Создайте для HomePage музыкальный фон. Создайте гиперссылки с помощью фрагментов текста и изображений.

3. Создайте документ длиной 4-5 экранных страниц ,разбитый на смысловые абзацы. Для перехода от одного абзаца к другому используйте метки.

4. Создайте документ, содержащий выдержки из законодательных актов, регламентирующих приобретение и использование пакетов прикладных программ. Выдержите документ в следующем стиле:
названия законодательных актов выведите жирным шрифтом темно-красного цвета размером 20pt. Текст выдержите черным цветом, курсивом, размер букв - 14 pt. Создайте метки на название каждого документа.

5. Создайте сайт из HomePage и 3-х документов. Предусмотрите взаимные гиперссылки:

HomePage - документы 1,2,3;

Документ 2 - документы 1,2,3.Обеспечьте единство стилевого оформления (цвета фона, букв, заголовков, типа

и размера шрифтов) за счет применения каскадной таблицы стилей.

Расположите на странице два изображения и кнопку ЗАМЕНА, при нажатии на которую изображения будут меняться местами.

 

7. Создайте три бегущие строки:

a. убегающий вправо и исчезающий за границей области текст;

b. колеблющуюся на оранжевом фоне последовательность слов и рисунков;

C. движущийся справа налево и останавливающийся по достижению границы текст.

Основы HTML

Как создаются таблицы?

"Скелет" таблицы выглядит следуюшим образом:

<table> <tr> <td>Содержимое ячейки</td> <td>Содержимое ячейки</td> ... </tr> <tr> <td>Содержимое ячейки</td> <td>Содержимое ячейки</td> ... </tr> ... </table>


Здесь контейнер <tr>...</tr> определяет строку таблицы, контейнер <td>...</td> - ячейку в строке, контейнер <table>...</table> - собственно таблицу.

Например, код:
<table> <tr> <td>текст1</td> <td>текст2</td> </tr> <tr> <td>текст3</td> <td>текст4</td> </tr> </table>

 



определяет вот такую таблицу:    
Текст 1 Текст 2
Текст 3 Текст 4

 

 

Где же таблица? Без рамки она не видна, поэтому такие таблицы удобно использовать для "разметки" страницы, для расположения фрагментов документов в желаемом порядке.

С помощью "мастера таблиц" редактора HomeSite (или других современных HTML-редакторов) таблицы легко создаются в визуальном режиме.

Атрибуты таблиц и их элементов

Тэги <table>, <tr>, <td> допускает использование большого числа атрибутов, с помощью которых можно изменять размеры, положение и другие характеристики таблиц, строк или отдельных ячеек.

Значения большинства атрибутов можно указать непосредственно при создании таблицы с помощью мастера. Как правило, смысл атрибутов интуитивно понятен.

Рассмотрим их применение на простых примерах.

Пример 1.

Довольно длинный текст Текст покороче Текстик
Текстик Довольно длинный текст Текст покороче


Эта таблица, в отличие от предыдущей, имеет фон (bgcolor="#f0f8ff") и границу (border="1") указанного цвета (bordercolor="#6495ed"). Расстояние между ячейками составляет 10 пикселов (cellspacing="10"), отступ от границы ячейки до текста, находящегося внутри нее - 5 пикселов (cellpadding="5"). Таблица расположена по центру документа (align="center"). Если мы будем изменять ширину окна браузера, то таблица будет "приспосабливаться", составляя 90% от ширины (width="90%"). (Если бы мы задали ширину таблицы не в процентах, а в пикселах, например: width="600"), то она не изменялась бы при изменении ширины экрана.

 

Задание 1: Создайте таблицу из 3-х строк и 2-х столбцов. Задайте для нее цвет фона (или фоновый рисунок) и двойной рамки. В клетках таблицы расположите рисунки или тексты. Обеспечьте отступ от границы ячейки до ее содержимого, равный 10 пикселам, расстояние между ячеек сделайте равным 3 пикселам. Таблицу "прижмите" к правой стороне окна браузера.


Некоторые из атрибутов тэга <table> применимы к отдельным строкам или ячейкам таблицы. Так, например, можно задать свой цвет или фоновый рисунок для отдельных ячеек.
Атрибут align, заданный для отдельной ячейки, определяет горизонтальное положение текста внутри нее, атрибут valign, заданный для ячейки, определяет вертикальное положение ее содержимого (top, middle или bottom).

Пример 2.

Для этой ячейки атрибут valign не задан
  Для этой ячейки атрибут valign="top"


Обратите внимание на значение атрибутов align для ячеек этой таблицы. Кроме того, здесь граница выполнена в двух цветах - это достигается за счет использования атрибутов bordercolorlight и bordercolordark.

"Неправильные" таблицы

В таблицах, которые мы рассмотрели, число ячеек в каждой строке было одинаковым. Но как построить вот такую например таблицу?

ЭТО ЖИВОТНЫЕ ЭТО ФРУКТ

 

Казалось бы, нужно в первой строке создать 4 ячейки, а во второй - всего 2. Но тогда получается вот что:

Это животные Это фрукт    


Чтобы первая ячейка "растянулась" на 3 ячейки, нужно добавить к ее коду атрибут colspan:

<td colspan=3><font size="+2"><b>ЭТО ЖИВОТНЫЕ</b></font></td>

Вторая ячейка должна остаться без изменений.

Аналогично, если ячейка должна "охватить" несколько строк, нужно добавить к ее коду атрибут rowspan.

С помощью colspan'ов и rowspan'ов можно создавать сколь угодно сложные таблицы, например, вот такую:

 

Задание 2: Создайте таблицу из 4-х строк и 4-х столбцов. С помощью атрибутов colspan и rowspan объедините отдельные ячейки. В объединенные ячейки разместите текст или изображение так, чтобы они располагались посередине ячейки и по горизонтали и по вертикали.

 

Задание 3: С помощью таблицы (без рамки) расположите текст в окне браузера в две колонки, над которыми имеется один общий фрагмент.


Теперь Вы сможете выполнить задание 1 из раздела "Создание таблиц".

 

Создание таблиц

1. Создайте таблицу 3 х 4 клетки, расположенную по центру экрана. Задайте цвет фона или фоновый рисунок, цвет и толщину границы таблицы. Клетки таблицы должны содержать гиперссылки (текст, рисунки или кнопки) на соответствующие документы.

2. С помощью таблицы, занимающей 80% ширины экрана и 70% его высоты, разместите на странице следующие элементы:

O заголовок (по центру),

O баннер,

O три рисунка,



©2015- 2019 stydopedia.ru Все материалы защищены законодательством РФ.