Аргументы - Создание сайта

Center

Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок.

Left

Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается лесенкой.. Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст.

Right

Выравнивание текста по правому краю. Строки текста равняются по правому краю, а левый остается рваным..

Justify

Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю.

Значение по умолчанию - left.

Шаг 4.

Добавим в начало первой строки тег <div align="center">, чтобы выровнять по центру.

Сохраните файл еще раз. Откройте в браузере. Обратите внимание, что надпись встала по центру страницы.

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

<div align="center"><h1><span style="color: red"> <strong> Вас приветствует общество с ограниченной ответственностью "ДИНАС" </strong> <br></span></h1></div>

С помощью тега <SPAN> можно выделить часть информации внутри других тегов и установить для нее свой стиль. В нашем примере мы изменили цвет предложения. Тег <STRONG> предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.

Сохраните файл. Посмотрите изменения.

Шаг 5.

В Интернете всегда привлекает внимание текст с применением различных эффектов, например бегущая строка. Попробуем наше предложение сделать бегущей строкой. Для этого в контейнер добавим тег <marquee> </marquee>.

<div align="center"><h1><span style="color:red"><strong><marquee> Вас приветствует общество с ограниченной ответственностью "ДИНАС" </marquee><br> </strong> <br></span></h1></div>.

Сохраните измененный файл. Откройте в браузере и посмотрите результат.

Можно задать определенные параметры движения строки, параметры задаются непосредственно в теге <marquee>:

- чтобы задать направления движения строки, используется аргумент direction="" и значения аргумента: left, right - чтобы задать скорость перемещения пикселов необходимо внести значения следующих аргументов scrollamount="" (количество пикселов) и scrolldelay="" (число миллисекунд) - также задаются и другие параметры сходные с параметрами как для обычной строчки текста: width="", height="" - ширина и высота бегущей строки в пикселах или в % от ширины и высоты окна, соответственно - bgcolor="" - цвет бегущей строки.

Добавим параметры нашей бегущей строке:

<div align="center"><h1><span style="color: red"><strong><marquee height="100" width="1050" bgcolor="#CCFF99 ">,

Шаг 6.

Чтобы остальной текст смотрелся красиво, также отформатируем его: выровняем по центру, увеличим шрифт, если необходимо, изменим цвет текста, разобьем по строкам, добавим горизонтальную линию. Обязательно "закроем" теги. Откройте файл через Блокнот и внесите дополнения:

<em> <h1><p align="center"> Наши контактные данные: </p></h1> </em> <br>

<div align="center"><h2><em>Адрес: 600000, г. Владимир, ул. Большая Московская, дом № 28б<br></em><br></div>

<div align="center"><h1><font color ="red">телефон 43-52-89</font><br><hr width="50%" align="center" size ="6"color="red"></h1></div>

Наша фирма предлагает вам <br> большой ассортимент канцелярских товаров: </font></h1></div>

Тег <em> делает текст курсивом, тег <hr> рисует горизонтальную линию, которая по своему виду зависит от используемых параметров. Параметры линии:

Align - Определяет выравнивание линии.

Color - Цвет линии.

Size - Толщина линии в пикселах..

Width - Ширина линии в пикселах или в процентах.

Работаем с изображениями

Изображения - это неотъемлемая часть любого сайта в сети интернет. Они используются везде, поэтому давайте разберемся, что к чему. Есть три типа файлов изображений, которые можно вставить на ваши страницы:

GIF

JPG

JPEG

PNG

Вставить изображение на страницу очень просто, если оно лежит в той же папке что и страница.

Шаг 7.

Скопируйте файлы ruchki. jpg и Динас. jpg в ту папку, где сохранен файл ООО ДИНАС. html.

Для того, чтобы вставить рисунок необходим элемент IMG не имеющий закрывающего тега и атрибут SRC (сокращение от source - положение) который указывает где находится изображение. Вы легко можете вставлять изображения, размещенные в других папках или на других сайтах. Просто укажите правильный путь).

Вставим в нашу страницу рисунок "ruchki. jpg". Поместим его на странице слева от текста.

Откройте файл в блокноте и добавьте туда следующую надпись:

Вот еще очень необходимые атрибуты:

ALIGN - определяет способ выравнивания картинки по горизонтали. Очень полезное свойство при обтекании картинки текстом. Обычно используют LEFT (выравнивание по левому краю, текст будет обтекать справа) и RIGHT (выравнивание по правому краю, текст обтекает слева). Если на странице есть текст, то это обязательное свойство.

BORDER - задает ширину рамки вокруг иллюстрации.

HSPACE И VSPACE - отступы в пикселях по горизонтали и по вертикали от картинки до других объектов документа. Легко запомнить название, если взять и просто перевести с английского. HSPACE - Horizontal Space - горизонтальный отступ и VSPACE - Vertical Space - вертикальный отступ.

HEIGHT И WIDTH - высота и ширина изображения в пикселах. Золотое правило web-мастера - всегда явно задавать размеры картинки в атрибутах HEIGHT и WIDTH, резервируя тем самым место в окне браузера еще до загрузки изображения. В противном случае документ при загрузке каждой картинки будет заново перерисовываться. А на медленных машинах (или при подключении к сети через модем) это смотрится просто отвратительно. Но в принципе, можно и не задавать размеры, просто будет дольше загружаться. И еще, не советую Вам искажать реальные размеры картинки.

Дополнительные сведения

GIF -- Graphics Interchange Format

* Разработан коммерческой Online-службой CompuServe для передачи графики и иллюстраций по сети между различными платформами. * Поддерживает до 256 цветов; поэтому GIF пригоден не для всех целей - фотографического качества на нем достичь трудно. * GIF87a является исходным стандартом без расширений. К важнейшим расширениям дополнительно разработанного GIF89a стандарта относятся:

Опции Прозрачности: Иллюстрации могут быть объявлены прозрачными. Сквозь такие прозрачные иллюстрации можно увидеть фон, например, графику заднего плана в окне браузера.

Опция Чересстрочности (Interlaced): Иллюстрация (аналогично телевизионной картинке) разделяется на четыре иллюстрации, каждая из которых изображает четвертую часть графики, полученную выделением каждой четвертой строки пикселов. Загрузка иллюстрации выполняется по частям.

Если чересстрочность выключена, то загрузка четверти иллюстрации соответствует заполнению четвертой части ее рамки. При включенной опции четверть иллюстрации занимает всю рамку, но точность (четкость) отображения по сравнению с окончательным вариантом ощутимо хуже (значительно крупнее зерно).

Включенная опция чересстрочности дает возможность еще до полной загрузки иллюстрации, загрузив только четверть (половину, три четверти), понять, что она собой представляет. Пользователь, у которого скорость доступа к сети ограничена, оценит данную опцию.

Браузеры не делают различий между GIF-форматами. А программы работы с графикой, как правило, явным образом требуют выбрать между GIF87a и GIF89a. Если существует возможность, этот выбор следует сделать в пользу GIF89a.

Размер GIF-файла иллюстрации сильно зависит от содержимого иллюстрации. Растровое (bitmap) изображение в этом формате сжимается с помощью LZW-алгоритма, причем эффективность сжатия зависит от разнообразия цветов в иллюстрации (наличия одноцветных областей). Это означает, что наибольшую экономию объема файла дают иллюстрации с небольшим количеством цветов и большими одноцветными областями. Полноцветные фотографии, напротив, плохо сжимаются и в GIF-формате занимают много места (см. JPEG-формат).

JPEG -- Joint Photographic Experts Group

JPEG был разработан для передачи иллюстраций фотографического качества между различными платформами. Поддерживает 24-битовую цветовую палитру (миллионы цветов).

Размер файла JPEG-иллюстрации зависит от необходимого качества отображения иллюстрации. Алгоритм упаковки JPEG-формата реализует необратимую процедуру сжатия, т. е. теоретически JPEG-иллюстрация никогда не достигает такого же хорошего качества, как такая же иллюстрация другого формата (например, TIFF).

Чем меньше претензий вы предъявляете к качеству, тем большего сжатия можно достичь и тем меньше становится файл. Чем хуже качество JPEG, тем более размытой выглядит иллюстрация на экране.

Последний JPEG-стандарт поддерживает опцию, похожую на Interlaced GIF-формата: Прогрессивный JPEG. При этом речь идет только о внутренней переструктуризации JPEG-данных. Иллюстрация делится не на несколько чересстрочных частей как в случае GIF, а на несколько иллюстраций полного размера, но различного уровня качества (качество иллюстрации следующего уровня выше предыдущего). Размер прогрессивных JPEG-файлов несущественно отличается от оригинального JPEG. Все традиционные Web-браузеры уже поддерживают прогрессивный JPEG.

Прозрачная графика

GIF-иллюстрации, наряду с Interlaced-опцией, позволяют задавать другой параметр, который недоступен ни в одном другом графическом формате. При этом определенный цвет (размер палитры в GIF-файлах равен 256) объявляется прозрачным. Это означает, что в тех местах, где на иллюстрации использован данный цвет, сквозь нее просматривается фон окна броузера - разумеется, это может быть и другая иллюстрация, расположенная позади данной. Благодаря этой возможности иллюстрации, изображаемые в World Wide Web, больше не ограничены прямоугольным форматом и могут принимать любую форму, например, окружностей и других значков для командных кнопок.

На практике графика загружается в программу графического редактора, например, Photoshop или Paint shop Pro, после чего определенный цвет объявляется прозрачным - в зависимости от программы - либо путем ввода номера цвета, либо выполнением щелчка на соответствующем цветовом поле.

Анимированная ("ожившая") графика

С помощью GIF-формата в HTML-документ можно встроить простую анимацию графики. При этом используется тот факт, что в один GIF-файл помещается множество GIF-иллюстраций. В HTML такой файл обрабатывается точно так же, как и любая другая графика. Это означает, что для интегрирования анимации в Web-страницу вам нужен дескриптор <img> и все его атрибуты.

Создание ссылок

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

Создать html ссылку очень просто. Для этого используется простенький элемент с одним атрибутом.

<a href=" "> </a>

Элемент А (ancor) является как бы якорем, т. е. текст, заключенный между открывающим <a> и закрывающим </a> тегом, будет текстом ссылки.

Атрибут Href это сокращение от "hypertext reference/гипертекстовая ссылка", специфирует место, на которое выполняется переход по данной ссылке - обычно это internet-адрес и/или имя файла.

Сделать html ссылку между страницами одного и того же веб-сайта гораздо проще. Например, если у нас есть две страницы (к примеру Стр1.htm и Стр 2.htm ) расположенные в одной папке, то код ссылки с стр.1 на стр.2 будет выглядеть так:

<a href="стр2.htm"> Для перехода на page2 щелкни здесь! </a>

Т. е. надо просто написать название страницы, на которую мы хотим перейти.

Шаг 8.

Сделаем из предложения "Наша фирма предлагает вам большой ассортимент канцелярских товаров" ссылку на стр. 2, которую заполним позже.

Чтобы сделать ссылку, добавим следующие теги:

<div align="center"><h1><font color ="red"><a href="стр 2.html"><font face="Garamond"> Наша фирма предлагает вам <br> большой ассортимент канцелярских товаров: </a>

Шаг 9.

Добавим на нашу страницу еще одно изображение, выровняв его по правому краю. Скопируйте в данную папку файл "Динас. jpg" и самостоятельно добавьте его на страницу. Размеры укажите самостоятельно. В результате должно получиться:

(Проверьте правильность написания кода: <img src="Динас. jpg"width="300" height="300"hspace="40" vspace="40"align="right">).

Закончим оформление первой страницы. Не забудьте закрыть "тело" </body> и указать конец страницы. </html>

Дополнительные сведения

Другой формой использования тэга А является определение точек внутри текста, на которые можно сослаться: Такой метод используется в случае, когда документ нельзя поделить на части и необходимо быстро передвигаться из оглавления по тексту.

<А NАМЕ= "роint"> - метка, расположенная в тексте документа.

Для ссылки на такую метку используют следующую форму URL:

<А НREF=" http://роlyn. net. kiae. su/index. html #роint">Ссылка на точку "роint" в документе "index. html"</А>

Если необходимо документ по ссылке отобразить в окне фрейма, то используется атрибут Target:

<А НREF="http://роlyn. net. kiae. su/index. html" target=name>

Здесь документ index. html будет отображен в окне фрейма с именем name.

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

<body bgcolor=blue text=yellow link=white alink=green vlink=red>

Здесь Link=white обозначает, что цвет гиперссылки, к которой еще не обращались - белый, Alink=green - зеленый цвет активизированной гиперссылки, Vlink=red - красный цвет ссылки, к которой уже обращались.

Приступаем к оформлению второй страницы, на которую указывает ссылка. Для этого создадим новый текстовый документ. На этой странице мы создадим таблицу с наименованиями и ценами товаров.

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

Давайте разбираться, как построить простейшую таблицу. Для этого нам понадобятся как минимум три элемента.

TABLE - Элемент для создания Html Таблицы. Обязательно должен иметь начальный и конечный теги. По умолчанию html таблица печатается без рамки, а разметка осуществляется автоматически в зависимости от объема содержащейся в ней информации. Сразу скажу, что здесь есть Атрибут BORDER, который задает толщину рамки таблицы в пикселах.

TR (Table Row) - Создает новый ряд таблицы. Закрывающий тег обязателен.

TD (Table Data) - Начинает и заканчивает каждую ячейку ряда html таблицы. Обязателен закрывающий тег.

Вот еще полезные атрибуты:

CELLPADDING - определяет расстояние (в пикселах) между рамкой каждой ячейки html таблицы и содержащимся в ней материалом.

CELLSPACING - определяет расстояние (в пикселах) между границами соседних ячеек таблицы html.

WIDTH - определяет ширину таблицы html. Ширина задается либо в пикселах, либо в процентном отношении к ширине окна браузера. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в таблице материала.

HEIGHT - определяет высоту таблицы. Высота задается либо в пикселах, либо в процентном отношении к высоте окна браузера. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в html таблице материала.

ALIGN - определяет способ горизонтального выравнивания html таблицы или содержимого ячеек. Возможные значения: left, center, right. Значение по умолчанию - left.

VALIGN - должен определять способ вертикального выравнивания таблицы или содержимого ячеек таблицы. Возможные значения: top, bottom, middle.(прижать к верху, прижать к низу, и установить посередине).

BGCOLOR - определяет цвет фона ячеек таблицы. Задается либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов.

Примечание: можно хоть каждой ячейке таблицы задать свой цвет фона или фоновый рисунок. Но: если вы задаете фоновый цвет (или рисунок) в базовом элементе TABLE то во всех ячейках будет этот фон(рисунок), и если вы захотите в какой-то ячейке поменять, пропишите соответсвующий атрибут именно для этой ячейки.

Таблица начинается с <table>, затем идет <tr>, указывающий на начало нового ряда, в ряду вставлены ячейки. Ряд закрывается </tr>, и сразу начинается новый ряд <tr>. В новом ряду также ячейки. Таблица закрывается </table>. Все довольно логично. Попробуем?

Шаг 10.

Составим таблицу, состоящую из 1 ряда, и в нем 3 ячейки. Укажем цвет нашей таблицы, цвет и параметры рамки, а также параметры текста в таблице.

(не забудьте, что новая страница также начинается с кода <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www. w3.org/TR/html4/loose. dtd">

<html>).

<h2><em><span style="color:black" > Наименование товара</em> </h2>

</td>

<td>

<h2><em> <span style="color:black;" >Оптовая цена</em> </h2>

</td>

<td>

<h2><em><span style="color:black;" > Розничная цена</em> </h2>

</td>

</tr>

Вот что должно получиться:

Далее по такому же принципу добавим еще ряды, в каждом по 3 ячейки, сразу же заполним содержанием.

<tr>

<td>

<font size="+1"><span style="color:black;" > Бумага "BALLET Classik" 98% белизна А4</font>

</td>

<td>

<font size="+1"><center><span style="color:black;" >115 руб

</td>

<td>

<font size="+1"><center><span style="color:black;" >120 руб

</td>

</tr>

<td>

<font size="+1"><span style="color:black;" > Бумага "SVETO COPY" 95% белизна А4</font>

</td>

<td>

<font size="+1"><center><span style="color:black;" >100 руб

</td>

<td>

</tr>

<tr>

<td>

<font size="+1"><span style="color:black;" > Бумага "Снегурочка" 98% белизна А4</font>

</td>

<td>

<font size="+1"><center><span style="color:black;" >120 руб

</td>

<td> <font size="+1"><center><span style="color:black;" >125 руб

</td>

</tr>

<tr>

<td>

<font size="+1"><span style="color:black;" >Ручка Corvina 51 шариковая синяя Арт. А-100

</td>

<td>

<font size="+1"><center><span style="color:black;" >2 руб

</td>

<td>

<font size="+1"><center><span style="color:black;" >3 руб. 80 коп

</td>

</tr>

<tr>

<td>

<font size="+1"><span style="color:black;" >Линер Crown красный Арт. СМР-5000 (12144)

</td>

<td>

<font size="+1"><center><span style="color:black;" >8 руб 20 коп

</td>

<td>

<font size="+1"><center><span style="color:black;" >9 руб

</td>

</tr>

<tr>

<td>

<font size="+1"><span style="color:black;" >Папка с 20 файлами Silwerhof "Double effect Classic", бордовая

</td>

<td>

<font size="+1"><center><span style="color:black;" >30 руб

</td>

<td>

<font size="+1"><center><span style="color:black;" >35 руб

</td>

</tr>

<tr>

<td>

<font size="+1"><span style="color:black;" >Скрепки 50 мм гофрир. Арт. Г.4520 50 шт

</td>

<td>

<font size="+1"><center><span style="color:black;" >12 руб

</td>

<td>

<font size="+1"><center><span style="color:black;" >13 руб 50 коп

</td>

</tr>

<tr>

<td>

<font size="+1"><span style="color:black;" >Штрих Retype на спиртовой основе</font>

</td>

<td>

<font size="+1"><center><span style="color:black;" >8 руб

</td>

<td>

<font size="+1"><center><span style="color:black;" >10 руб

</td>

</tr>

</table>

</html>

В результате должна получиться такая таблица:

В дальнейшем вы сами можете поэкспериментировать с цветом, размером, рамкой таблицы...

Сохраните этот файл с именем стр 2.html в ту же папку, где сохранен первый файл. Теперь ссылка с первой страницы должна открыть вторую. Попробуйте.

Аргументы - Создание сайта

Похожие статьи