Главная | Обратная связь | Поможем написать вашу работу!

Как установить толщину линий таблицы?

Основы создания Web-сайтов

Программное обеспечение

Существуют множество программ, специально предназначенных для создания новых Web-сайтов. Например MS Front Page или Macromedia Dream Weaver, DrumBeat 2000 и т.д. Все они предоставляют широкие возможности для визуального создания сайтов. Это и хорошо и плохо.

Хорошо потому, что мы сможем создать наш сайт за считанные минуты. Оснастим его картинками, красиво оформленным текстом и гиперссылками. Однако при этом мы никогда не узнаем, как «устроена» наша страница, из чего она состоит и как взаимодействуют все ее компоненты. Кроме того любая программа для создания сайтов предъявляет определенные требования к компьютеру, на котором будет работать и не исключена вероятность того, что Вы не сможете использовать понравившийся продукт по причине недостаточной мощности своего ПК.

Поэтому мы воспользуемся другим способом – простым, как все гениальное. Мы станем составлять наши странички из простейших элементарных команд языка HTML, который специально предназначен для разметки гипертекстовых документов, коими и являются сайты.

Для этой работы нам не нужно сверхмощного компьютера, поскольку работа будет происходить в обычной программе «Блокнот», которая входит в базовый комплект MS Windows.

Кроме этого нам потребуется любой браузер, например MS Internet Explorer, а так же – любой графический редактор – в нашем случае Adobe Photoshop 6.0.

В самом конце работы, когда придет время опубликовать наш готовый сайт в сети Internet, нам потребуется специальная программа FTP-клиент, в качестве которого выступит программа FAR, очень похожая на Norton Commander.

Ну а в дальнейшем, когда структура и состав компонентов Web-страницы станет Вам понятна, Вы самостоятельно сможете освоить ту или иную специализированную программу для создания Web-страниц.

Итак, запускаем «БЛОКНОТ» и начинаем.

Как начать?

Создание любой страницы начинается с ввода ее структуры:

<HTML>

<BODY>

</BODY>

</HTML>

Именно так выглядят команды языка HTML. При взгляде на них Вы не могли не заметить, что команды образуют пары: <HEAD> </HEAD>, <BODY> </BODY> и, наконец, <HTML> </HTML>.

Действительно многие команды парные и если первая включает некоторую возможность, то вторая – отключает ее.

Так команда <HTML> начинает код страницы, а команда </HTML> - его заканчивает. Никакие другие команды не могут находиться за пределами, обозначенными этой парой.

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

Между <BODY> и </BODY> лежат все основные команды, образующие страницу.

Как сохранить файл?

Это очень важный момент!

Если Вы ввели структуру страницы, войдите в пункт «ФАЙЛ» главного меню программы и выберите подпункт сохранить. Кажется – обычное действие, однако здесь есть несколько «подводных камней».

Обязательно создайте отдельную папку, в которую будете сохранять все, что относится к вашему сайту.
Имя первой страницы из всех, что будут составлять сайт должно быть обязательно index.htm
Расширение HTM указывает браузеру, что данный документ – Web-страница.
Сохраните файл в созданную папку (см. п.1), затем запустите программу «Проводник», откройте Вашу папку и запустите файл, имеющий имя Index.
В ответ на это откроется браузер, в рабочей области которого будет лишь пустое белое поле. Это Ваша первая страница, пока еще пустая.

Как разместить на странице текст?

Для размещения текста не нужно применять никаких специальных команд. Просто раздвиньте команды <BODY> и </BODY> и впишите между ними строку «Проба размещения текста».

Затем, чтобы эти изменения отразились на странице в окне браузера, выполните повторное сохранение документа, а в окне браузера нажмите кнопку «Обновить».

В результате на Вашей странице должен появиться введенный текст.

Как изменить размер шрифта?

Команды <H1> ….. </H1> устанавливают самый крупный шрифт для текста, расположенного между ними,

<H2> …. </H2> - шрифт помельче, …

<H6> … </H6> - самый мелкий шрифт.

Как изменить вид шрифта?

<B> … </B> - полужирный шрифт

<I> … </I> - курсив

<U> … </U> - подчеркнутый

Допустимы любые комбинации этих команд:

<B> <I> текст </I> </B> - полужирный курсив

<B> <U> текст </U> </B> - полужирный подчеркнутый

Как выполнить перевод строки?

<BR> - перевод строки

<HR> - горизонтальная разделительная линия

Как изменить начертание шрифта?

<FONT FACE=”название шрифта”>

Текст

</FONT>

Пример:

<FONT FACE=”Arial”>

Текст

</FONT>

Как включить верхние и нижние индексы?

<SUP> … </SUP> - верхний индекс

<SUB> … </SUB> - нижний индекс

Пример: 2х² + х = 0

2х <SUB> 2 </SUB> + x = 0

Как изменить цвет шрифта?

<FONT COLOR= “название или код цвета”>

Текст

</FONT>

Названия цветов:

BLACK - черный

WHITE - белый

YELLOW - желтый

GREEN - зеленый

BLUE - синий

SILVER - серебрисный

GOLD - золотой

PINK - розовый

CYAN - бирюзовый

Как организовать маркированный и нумерованный списки?

Пример:

Наименования дисциплин:

математика
литература
история
химия
физика

<UL>

<LI> математика

<LI> литература

<LI> история

<LI> химия

<LI> физика

</UL>

Пример:

Наименования дисциплин:

математика
литература
история
химия
физика

<OL>

<LI> математика

<LI> литература

<LI> история

<LI> химия

<LI> физика

</OL>

Как изменить цвет фона страницы?

<BODY BGCOLOR=”название цвета”>

Как выровнять строку по центру?

<CENTER> строка </CENTER>

Как добавить графический файл?

<IMG SRC = ”имя файла”>

Как сместить изображение вправо, влево?

<IMG SRC = ”имя файла” ALIGN=RIGHT> - смещение вправо

<IMG SRC = ”имя файла” ALIGN=LEFT> - смещение влево

Как организовать текстовую гиперссылку на другую страницу?

<A HREF = “имя другой страницы”>

Текст, который появится на странице в качестве ссылки

</A>

Пример:

<A HREF = “computer.htm”>

Наш компьютерный класс

</A>

Как организовать текстовую гиперссылку на другой сайт в Internet?

<A HREF = “адрес другой страницы”>

Текст, который появится на странице в качестве ссылки

</A>

Пример:

<A HREF = “http://www.nn.ru”>

Официальный сайт Нижнего Новгорода

</A>

Как организовать текстовую гиперссылку на адрес электронной почты?

<A HREF = “адрес электронной почты”>

Текст, который появится на странице в качестве ссылки

</A>

Пример:

<A HREF = “Mailto:[email protected]”>

Наш электронный адрес: [email protected]

</A>

Как построить таблицу?

<TABLE> - команда, открывающая таблицу

<TR> - команда, открывающая строку

<TD> - команда, открываюшая ячейку

</TD> - команда, закрываюшая ячейку

</TR> - команда, закрывающая строку

</TABLE> - команда, открывающая таблицу

Если требуется построить таблицу из 3 строк и 2 столбцов, структура таблицы выглядит так:

<TABLE>

<TR>

<TD> 1 ячейка 1 строки </TD>

<TD> 2 ячейка 1 строки </TD>

</TR>

<TR>