Презентация "Примеры Web-страниц"

Подписи к слайдам:
Примеры Web-страниц Структура гипертекстового документа
  • <HTML>
  • </HTML>
  • <HEAD>
  • </HEAD>
  • <TITLE>Заголовок</TITLE>
  • Первый абзац документа
  • <IMG SRC=“PIC1.GIF”>
  • ………
  • Последний абзац документа
  • <BODY>
  • </BODY>
Создаем списки
  • <html>
  • <head>
  • <title>Пример 6</title>
  • </head>
  • <body>
  • <H1>HTML поддерживает несколько видов списков </H1>
  • <DL>
  • <DT>Ненумерованные списки
  • <DD>Элементы ненумерованного списка выделяются
  • специальным символом и отступом слева:
  • <UL>
  • <LI>Элемент 1
  • <LI>Элемент 2
  • <LI>Элемент 3
  • </UL>
  • <DT>Нумерованные списки
  • <DD>Элементы нумерованного списка выделяются
  • отступом слева, а также нумерацией:
  • <OL>
  • <LI>Элемент 1
  • <LI>Элемент 2
  • <LI>Элемент 3
  • </OL>
  • </body>
  • </html>
Создаем таблицы
  • <head>
  • Создаем таблицу
  • <title>Таблица 2, Экология.</title>
  • </head>
  • <body bgcolor="green" text="red">
  • <center>
  • <table border="12" width="1" cellpadding="10" cellspacing="10">
  • <tr>
  • <td><H2><p align="center">Температура</H2></td>
  • <td><H2><p align="center">Давление</H2></td>
  • <td><H2><p align="center">Влажность</H2></td>
  • <td><H2><p align="center">Скорость ветра</H2></td>
  • <td><H2><p align="center">Направление ветра</H2></td>
  • </tr>
  • <tr>
  • <td><p align="center"><font size=6>21</font></td>
  • <td><p align="center"><font size=6>745</font></td>
  • <td><p align="center"><font size=6>65</font></td>
  • <td><p align="center"><font size=6>4</font></td>
  • <td><p align="center"><font size=6>юг</font></td>
  • </tr>
  • </table></center>
  • </body>
  • </html>
Создаем таблицы
  • <head>
  • Создаем таблицу
  • <title>Таблица 2, Экология.</title>
  • </head>
  • <body bgcolor="green" text="red">
  • <center>
  • <table border="12" width="1" cellpadding="10" cellspacing="10">
  • <tr>
  • <td><H2><p align="center">Температура</H2></td>
  • <td><H2><p align="center">Давление</H2></td>
  • <td><H2><p align="center">Влажность</H2></td>
  • <td><H2><p align="center">Скорость ветра</H2></td>
  • <td><H2><p align="center">Направление ветра</H2></td>
  • </tr>
  • <tr>
  • <td><p align="center"><font size=6>21</font></td>
  • <td><p align="center"><font size=6>745</font></td>
  • <td><p align="center"><font size=6>65</font></td>
  • <td><p align="center"><font size=6>4</font></td>
  • <td><p align="center"><font size=6>юг</font></td>
  • </tr>
  • </table></center>
  • </body>
  • </html>
Создаем таблицы
  • <head>
  • Создаем таблицу
  • <title>Таблица 2, Экология.</title>
  • </head>
  • <body bgcolor="green" text="red">
  • <center>
  • <table border="12" width="1" cellpadding="10" cellspacing="10">
  • <tr>
  • <td><H2><p align="center">Температура</H2></td>
  • <td><H2><p align="center">Давление</H2></td>
  • <td><H2><p align="center">Влажность</H2></td>
  • <td><H2><p align="center">Скорость ветра</H2></td>
  • <td><H2><p align="center">Направление ветра</H2></td>
  • </tr>
  • <tr>
  • <td><p align="center"><font size=6>21</font></td>
  • <td><p align="center"><font size=6>745</font></td>
  • <td><p align="center"><font size=6>65</font></td>
  • <td><p align="center"><font size=6>4</font></td>
  • <td><p align="center"><font size=6>юг</font></td>
  • </tr>
  • </table></center>
  • </body>
  • </html>
  • Создаем таблицу
Создаем таблицы
  • <head>
  • Создаем таблицу
  • <title>Таблица 2, Экология.</title>
  • </head>
  • <body bgcolor="green" text="red">
  • <center>
  • <table border="12" width="1" cellpadding="10" cellspacing="10">
  • <tr>
  • <td><H2><p align="center">Температура</H2></td>
  • <td><H2><p align="center">Давление</H2></td>
  • <td><H2><p align="center">Влажность</H2></td>
  • <td><H2><p align="center">Скорость ветра</H2></td>
  • <td><H2><p align="center">Направление ветра</H2></td>
  • </tr>
  • <tr>
  • <td><p align="center"><font size=6>21</font></td>
  • <td><p align="center"><font size=6>745</font></td>
  • <td><p align="center"><font size=6>65</font></td>
  • <td><p align="center"><font size=6>4</font></td>
  • <td><p align="center"><font size=6>юг</font></td>
  • </tr>
  • </table></center>
  • </body>
  • </html>
  • Граница самой таблицы
Создаем таблицы
  • <head>
  • Создаем таблицу
  • <title>Таблица 2, Экология.</title>
  • </head>
  • <body bgcolor="green" text="red">
  • <center>
  • <table border="12" width="1" cellpadding="10" cellspacing="10">
  • <tr>
  • <td><H2><p align="center">Температура</H2></td>
  • <td><H2><p align="center">Давление</H2></td>
  • <td><H2><p align="center">Влажность</H2></td>
  • <td><H2><p align="center">Скорость ветра</H2></td>
  • <td><H2><p align="center">Направление ветра</H2></td>
  • </tr>
  • <tr>
  • <td><p align="center"><font size=6>21</font></td>
  • <td><p align="center"><font size=6>745</font></td>
  • <td><p align="center"><font size=6>65</font></td>
  • <td><p align="center"><font size=6>4</font></td>
  • <td><p align="center"><font size=6>юг</font></td>
  • </tr>
  • </table></center>
  • </body>
  • </html>
  • Толщина линии
Создаем таблицы
  • <head>
  • Создаем таблицу
  • <title>Таблица 2, Экология.</title>
  • </head>
  • <body bgcolor="green" text="red">
  • <center>
  • <table border="12" width="1" cellpadding="10" cellspacing="10">
  • <tr>
  • <td><H2><p align="center">Температура</H2></td>
  • <td><H2><p align="center">Давление</H2></td>
  • <td><H2><p align="center">Влажность</H2></td>
  • <td><H2><p align="center">Скорость ветра</H2></td>
  • <td><H2><p align="center">Направление ветра</H2></td>
  • </tr>
  • <tr>
  • <td><p align="center"><font size=6>21</font></td>
  • <td><p align="center"><font size=6>745</font></td>
  • <td><p align="center"><font size=6>65</font></td>
  • <td><p align="center"><font size=6>4</font></td>
  • <td><p align="center"><font size=6>юг</font></td>
  • </tr>
  • </table></center>
  • </body>
  • </html>
  • Размер ячейки
Создаем таблицы
  • <head>
  • Создаем таблицу
  • <title>Таблица 2, Экология.</title>
  • </head>
  • <body bgcolor="green" text="red">
  • <center>
  • <table border="12" width="1" cellpadding="10" cellspacing="10">
  • <tr>
  • <td><H2><p align="center">Температура</H2></td>
  • <td><H2><p align="center">Давление</H2></td>
  • <td><H2><p align="center">Влажность</H2></td>
  • <td><H2><p align="center">Скорость ветра</H2></td>
  • <td><H2><p align="center">Направление ветра</H2></td>
  • </tr>
  • <tr>
  • <td><p align="center"><font size=6>21</font></td>
  • <td><p align="center"><font size=6>745</font></td>
  • <td><p align="center"><font size=6>65</font></td>
  • <td><p align="center"><font size=6>4</font></td>
  • <td><p align="center"><font size=6>юг</font></td>
  • </tr>
  • </table></center>
  • </body>
  • </html>
  • Ширина между ячейками
Создаем таблицы
  • <head>
  • Создаем таблицу
  • <title>Таблица 2, Экология.</title>
  • </head>
  • <body bgcolor="green" text="red">
  • <center>
  • <table border="12" width="1" cellpadding="10" cellspacing="10">
  • <tr>
  • <td><H2><p align="center">Температура</H2></td>
  • <td><H2><p align="center">Давление</H2></td>
  • <td><H2><p align="center">Влажность</H2></td>
  • <td><H2><p align="center">Скорость ветра</H2></td>
  • <td><H2><p align="center">Направление ветра</H2></td>
  • </tr>
  • <tr>
  • <td><p align="center"><font size=6>21</font></td>
  • <td><p align="center"><font size=6>745</font></td>
  • <td><p align="center"><font size=6>65</font></td>
  • <td><p align="center"><font size=6>4</font></td>
  • <td><p align="center"><font size=6>юг</font></td>
  • </tr>
  • </table></center>
  • </body>
  • </html>
  • Количество ячеек
Создаем горизонтальные линии
  • <html>
  • <head>
  • <title>Пример 4</title>
  • </head>
  • <body>
  • <H1>Коллекция горизонтальных линий</H1>
  • <HR SIZE=2 WIDTH=100%><BR>
  • <HR SIZE=4 WIDTH=50%><BR>
  • <HR SIZE=8 WIDTH=25%><BR>
  • <HR SIZE=16 WIDTH=12%><BR>
  • </body>
  • </html>
  • Задаем ширину линии
  • Задаем длину линии
  • Переход на новую строку