Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
VOST_Informatsionnye_resursy_1 (1).docx
Скачиваний:
0
Добавлен:
01.05.2025
Размер:
358.57 Кб
Скачать

32Оформление хтмл док-та,вставка изображений,таблицы,привести пример

Каждый HTML-документ должен начинаться с обьявления типа документа: <!DOCTYPE HTML PUBLIC "-//IETF/DTD HTML 2.0//EN" Использование DTD (Document Type Declaration) в кач-ве первой строки позволяет бpоузеpу идентифицировать ваш документ как соответствующий указанному стандарту HTML, в данном случае веpсии 2.0.

Элемент <HTML>-обычно является пеpвым и pазмещается в начале документа. Он инфоpмиpует, что используется язык HTML. Стоп-тэг </HTML> является последним элементом и pазмещается в самом конце документа. Поддеpживается атpибут VERSION

Элемент <HEAD>-используется для указания броузеру о том, что данный документ является HTML-документом, а также с целью согласования DTD в идентификаторе текста. Поддеpживается атpибут VERSION

Элемент <TITLE>-pасполагается между тэгами <HEAD> и </HEAD>. Он указывает название док-та (до 64 символа), которое выводится в заголовке окна этого документа.

Элемент <BODY>-указывает на начало основного текста документа. Стоп-тэг </BODY> определяет конец документа. Поддерживает атрибуты: ALINK, BACKGROUND, BGCOLOR , LINK , TEXT , VLINK.

Общий вид HTML-документа

<HTML>

<HEAD>

<TITLE>Учебник по HTML</TITLE>

</HEAD>

<BODY>

Тело документа

</BODY>

</HTML>

Вставка изображения в документ html

Для вставки графических элементов служит тэг <IMG>.

Чтобы вставить графику в текст html-страницы надо указать имя и место хранения соответствующего файла. Если файл находится в той же папке, что и страница, то достаточно указать имя файла с расширением. Если графический файл находится в другой папке, то, помимо имени файла с расширением необходимо указывать путь к этому файлу. Для выравнивания изображения по центу используется тэг <CENTER>, для размещения на новой строке - тэг <BR>

Н-р:HTML-код:<p><center><img src="img/tigr.jpg" alt="изображ-ие тигра"> </center></p>

Обтекание графики текстом в документе html

Если хотите, чтобы графический рисунок органически вписывался в дизайн Вэб-страницы, то нужен атрибут ALIGN тэга <IMG>.Этот атрибут допускает задание двух значений - left right.Значение left заставляет браузер помещать изображение слева от текста, а right - справа от него. Если надо, чтобы форматированию подвергался только определенный фрагмент текста, следует применить тэг BR с атрибутом CLEAR, указывающими позицию в тексте, начиная с которой действие механизма обтекания графики текстом отменяется. Значения left, right, all атрибута CLEAR позволяют определить, с какой стороны - левой, правой, обеих - текст далее будет свободен от графики.Следует заметить, что если атрибут ALIGN уже был применен для выравнивания текста относительно графики в пределах конкретной Вэб-страницы, установить параметр обтекания графики текстом не удастся.Атрибут ALIGN дает возможность разместить текст между двумя графическими изображениями. В этом случае тэги, описывающие изображения, должны быть расположены над текстом, который будет заключен между ними.

Н-р:HTML-код:<img src="img/majak.jpg" align="left">

Этот маяк расположен на берегу моря и служит кораблям для ориентира. Он очень помогает морякам в плохую погоду.

<br><br>

<img src="img/sea.jpg" align="right">

Это небольшая яхта.

<br clear="right">

Я люблю море, но не умею плавать.

<br><br>

<img src="img/majak.jpg" align="left">

<img src="img/sea.jpg" align="right">

Море, море - мир безбрежный

Создание таблы:Для создания таблы служит тэг <TABLE>. Табла состоит из строк, а строки из ячеек. Для определения строк служит тэг <TR>, для создания ячеек - <TH>, <TD>.Тэг <TH> используется для создания ячеек с заголовками.Тэг <TD> - для обыкновенных ячеек с данными. Содержание ячеек заголовков отображается полужирным шрифтом и выравнивается по центру.Используя таблицы, можно сделать аккуратную компоновку информации в пределах Вэб-страницы, добиться точного расположения того или иного фрагмента страницы, будь то текст, графика или гиперссылка. Н-р, используя таблицу, можно легко добиться отображения текста в нескольких колонках, подобно газетной публикации.

Пример:

HTML-код:

<table border="1">

 <tr>

  <td>1</td>

  <td>2</td>

 </tr>

 <tr>

  <td>3</td>

  <td>4</td>

 </tr>

 <tr>

  <td>5</td>

  <td>6</td>

 </tr>

</table>

Обрамление таблы:Для того, чтобы сделать видимой границы таблицы, служит атрибут BORDER тэга <TABLE>.Определяя рамку таблицы, надо указать толщину ее внешних линий в пикселях. Чтобы задать толщину разграничивающих линий внутри таблицы, необходимо воспользоваться атрибутом CELLSPACING.По умолчанию браузер отображает рамку таблицы темно-серым цветом. Чтобы изменить цвет рамки надо применить атрибут BORDERCOLOR.

Пример:

HTML-код:

<table border="2" cellspacing="5" bordercolor="#0ff00f">

 <tr>

  <td>1</td>

  <td>2</td>

 </tr>

 <tr>

  <td>3</td>

  <td>4</td>

 </tr>

 <tr>

  <td>5</td>

  <td>6</td>

 </tr>

</table>

Группирование строк:

Для группирования строк таблицы служат тэги <THEAD>, <TBODY>, <TFOOT>.

<THEAD> - нужен для создания группы заголовков для столбцов таблицы. Этот дескриптор допускается использовать в пределах таблицы только одни раз.

<TBODY> - применяется для создания одной или нескольких групп строк таблицы, содержащих основные данные.

<TFOOT> - позволяет создать группу строк для представления информации о суммах или итогах, располагаемую в нижней части таблицы. Этот дескриптор допускается использовать в пределах таблицы только одни раз. Вовсе не обязательно создавать группы строк таблицы всех трех типов.

Пример:

HTML-код:

<table border="1">

<thead style="color:green">

 <tr>

  <th>Товар</th>

  <th>Цена</th>

  <th>Кол-во</th>

 </tr>

</thead>

 <tr>

  <th>Гайка</th>

  <td>20р</td>

  <td>50</td>

 </tr>

 <tr>

  <th>Болт</th>

  <td>30р</td>

  <td>80</td>

 </tr>

<tfoot>

 <tr>

  <td colspan="3" align="center">Итоговая строка</td>

 </tr>

</tfoot>

</table>

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]