~Главный секрет женских побед~

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » ~Главный секрет женских побед~ » Уроки Photoshop » Урок №53 "Основы хтмл"


Урок №53 "Основы хтмл"

Сообщений 1 страница 7 из 7

1

by antimiracle and hoks

0

2

<b></b> - жирный текст

тратата

<a></a> - начало ссылки

тратата

<big></big> - размер шрифта

тратата

<br> - «Энтер»

_

<FONT='..'></font> - шрифт

тратата (font family)
тратата (<font color='red' ></font>

<H1> - заголовок

_

<i></i> - курсив

тратата

<img src=’...’ > - картинка

http://10pix.ru/img1/3352/1536557.th.png

<marquee></marquee> - бегущая строка

_

<small></small> - уменьшает текст

тратата

<table></table> - таблица

тратата

тратата

<u></u> - подчеркивает текст

тратата

<s></s> - зачеркивает текст

тратата

подробнее...

пример хД

Код:
<marquee><font color='white' ><small><i><s>12345<br></i></s></small></font><br></marquee><br><br><marquee><a href="http://10pix.ru/" title="10pix — бесплатный хостинг изображений и фотографий" target="_blank"><img src="http://10pix.ru/img1/2567/1536749.png"></a></marquee>

задание
в сказку, что ли, попали? хДД
Шрифтом синего цвета, уменьшенного, написать 5 предложений с числительными (числительные подчеркнуть и выделить жирным), используя бегущую строку, вставив одну картинку и вставив пять "Enter'ов".
PS: один из вас задание выполнит в форме html-низа, другой - в html-верхе. Но! Копируем "домашку" сюда, в тегах "[ code][/ code]".

(с) анти

0

3

При работе с практически любыми тегами:
<a> - открывающий тег
</a> - закрывающий тег
<a>всё, что вы собираетесь выделить тегом, должно быть написано между ними.</a>

НЕ парный тег: <img="">, <br> и <hr> они одиноки и обозначают, соответственно, изображение, переход на новую строку и горизонтальную черту.
Такую:


ВАЖНО!
НЕ пересекать между собой теги!
ТО ЕСТЬ. Например, вы вставляете ссылку внутри абзаца.
Пример:

бблаблаблабблаблаблабблаблаблабблаблаблабблаблабла
ссылка!

Вы прописываете сперва абзац (<p></p>), а внутрь него вставляете ссылку (<a></a>)
вот так:
<p> абблаблабла <a>ссылка!</a> </p>
не пересекая границы тегов! ( <p> абблаблабла <a>ссылка! </p></a> - НЕПРАВИЛЬНО XDD)

========

Равно(=) в теге задаёт его "значение". Так же, для многих тегов существуют параметры.
Например:
<a href="тут пишется адрес ссылки"> текст </а>
то есть, задав такие значения:
<a href="http://riverside.rusff.ru/"> стартовая </а>
вы получите ссылку на главную Ривера, которая будет выглядеть так:
стартовая
(тоже самое с тегом изображения, после равно пишется адрес картинки)

Параметры для каждого тега свои.

Начнём с текста.
Есть несколько тегов для текствого абзаца, для простоты возьмём два <P> и <FONT>
<P> - подходит для выравнивания целого абзаца текста

<FONT> - больше походит для редактирования отдельно взятого предложения, слова и тэ пэ.

FONT ставится внутрь абзаца, т.е. P. Вот так: <P><Font>тут ваш текст.</Font></P>

Параметры для FONT
Это:
FACE - гарнитура шрифта
SIZE - размер
COLOR - цвет

Параметры для P
Это:
ALIGN - выравнивание по горизонтали (можно задать left, right, center)
VALIGN - выравнивание по вертикали, в основном для ячеек таблицы. (можно задать top, bottom, center)

вставляются они вовнутрь открывающего контейнера, после каждого ставится (=) и обязательно(!) кавычки!! ("..")

выглядит это так:

<FONT FACE="Garamond" SIZE="16" COLOR="navy"> ваш текст. </FONT>

при таких параметрах получаем следующее:

ваш текст.
*(ваш текст гарнитуры Гарамонд, 16 кегля, синего цвета)

если вам нужно сделать текст жирным или курсивом, вы используете теги <b> и <i>, но они предназначены для конкретно взятого символа/группы символов, то есть их вы ставите внуть тега <p></p>, не забывая о том, что границы не должны пересекаться.

<P FACE="Garamond" SIZE="16" COLOR="navy"> ваш <b>текст. </b></p>
получаете следующее:
ваш текст.

_______________________________________________________________

Внимание, ЗАДАНИЕ ХД
ваш текст должен выглядеть так:



Однажды человек шёл по берегу, на который приливом выбросило тысячи морских звёзд.

Пытаясь ступать между ними, он приблизился к мальчику, который поднимал звезду и с размаху выбрасывал её в море.
- Зачем ты делаешь это, мальчик? - спросил человек.
- Выбрасываю в море звёзды, иначе они умрут, когда взойдёт солнце.
Человек горько рассмеялся и сказал:
- Но их здесь тысячи! Сотни тысяч! Твои старания ничего не изменят!
- Нет, - сказал мальчик, поднимая ещё одну - мои старания изменят всё - для этой звезды...






Изюм пишет текст зелёным, 16го размера, Ариалом
Пельмешко - красным, 8-кой, Джорджией (Georgia)

Будьте внимательны - в тексте две ссылки, + все переносы, пустые строки и горизонтальные четры должны быть сохранены.

вставляем - изюм в объявление, Пельмень - в хтмл - верх

(с) хокс

0

4

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

Думаю, что вы знаете, что такое баннер хДД http://10pix.ru/img1/624662/1537166.png
Баннер, вставляемый в сообщение, пост, т.е. BB код.

Код:
[img]http://10pix.ru/img1/624662/1537166.png[/img]

или

Код:
[url=http://idealnijadmin.mybb.ru/][img]http://10pix.ru/img1/624662/1537166.png[/img][/url]

http://10pix.ru/img1/624662/1537166.png
(кликабельно)


В html так:

Код:
<a href='http://riverside.rusff.ru'><img src='http://10pix.ru/img1/624662/1537166.png' ></a>

При наведении на картинку в html можно добавить текст.

<a href="http://idealnijadmin.mybb.ru/" title="курс молодого бойца ХД" target="_blank"><img src="http://10pix.ru/img1/2328/1537235.png"></a>


=> Шаблон составления баннера:

<a href="ссылка" title="текст при наведении" alt="поясняющий текст при отключённой графике" target="_blank"><img src="ссылка на картинку"></a>

Задание в след. посте Хокс хД

(с) анти

____________

А теперь, собственно, куда и как мы эти баннеры будем вставлять.

Идём в Администрирование --> Cтраницы --> Находим страничку "Баннеры" и жмём "редактировать".
Открывается новая страница, где нам нужна эта кнопочка:
http://s42.radikal.ru/i096/1005/af/cc85786584a6.jpg
жмём на неё и получаем html-редактор в новом окошке.

то, что там находится, будет выглядеть примерно так:

<p><a href="http://wheat.spybb.ru/" target="_blank"><img src="http://i42.tinypic.com/65bjw6.jpg" border="0" alt="Wheat" /></a></p>

разберём детально?

<p><a href="http://wheat.spybb.ru/" target="_blank"><img src="http://i42.tinypic.com/65bjw6.jpg" border="0" alt="Wheat" /></a></p>
<p></p> - задаёт "абзац", т.е. "поле", куда будут вставляться наши баннеры.
<a ></a> - начало и конец нашего баннера, который нельзя пересекать с другим баннером.
<img src="http://i42.tinypic.com/65bjw6.jpg" border="0" alt="Wheat" /> - собственно, то, что вы видите на страничке - само изображение.

вставлять баннеры ооочень просто.

вы берёте тот код, который оставляют в теме "баннерообмен" и вставляете его в открывшийся хтмл-редактор:
http://i029.radikal.ru/1005/af/2eb3031f085f.jpg
вставляете после последнего стоящего баннера, но перед закрывающим тегом </p>, вот так:
(белым - то, что уже якобы стоит у вас в редакторе).

<p><a href="http://wheat.spybb.ru/" target="_blank"><img src="http://i42.tinypic.com/65bjw6.jpg" border="0" alt="Wheat" /></a><a>тут ваш новый баннер.</a></p>

Вставили? Отлично.
Жмём "Обновить" внизу редактора, и "Сохранить"  на страничке редактирования "Баннеров". После чего вас должно перенаправить на страницу со списком. (та, что Администрирование - Страницы).

Вот и всё.

Задание:

Поставить вот этот баннер:

<a href="http://flor.rolbb.ru/"><img src="http://s53.radikal.ru/i139/1005/20/73bba529b856.gif" border="0" alt="Florensios College" width="88" height="31"></a>

На этом форуме.  Сперва Изюм, потом Пельмешек, когда Изюм отпишется, что сделал, ок?

(с) хокс

0

5

HTML ИЗ УЧЕБНИКА
С чего начинать?

Теперь расскажу немного о тегах - знаках, распологающихся в скобках. Большинство тегов имеют открывающийся элемент <> и закрывающийся </>. Между ними и находяться коды, которые распознает Обозреватель.

Графика.
<img border=0 src="Имя графического файла с расширением" Width="Его размер по горизонтали" Height="Его размер по вертикали" alt="Здесь Вы указываете выпадающую подсказку">
Размеры графического файла (в пикселях) по горизонтали и по вертикали, а также выпадающую подсказку можно не указывать, но тогда страничка грузиться дольше, не забывайте об этом. И еще - большие картинки Обозреватель может игнорировать, если Вы не укажите их размеры.

Текст.
Большинство HTML документов имеют заголовок. Для его создания используют теги <Hn></Hn>, где n – число от 1 до 6. Заключив текст между этими тегами, вы получите заголовок определенного размера.
Для создания нового абзаца используется тег <P>, а для перехода на новую строчку без создания абзаца - тег <BR>. Эти теги закрывать не обязательно. Конечно, если Вы не используете в теге <P> элемент ALIGN, которым может задаватся выравнивание абзаца:
<P ALIGN=LEFT> По левому краю </P>

<P ALIGN=CENTER> По центру </P>

<P ALIGN=RIGHT> По правому краю </P>

<P ALIGN=JUSTIFY> Текст, находящийся между этими элементами выравнивается по ширине </P>

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

<B> Жирный текст </B>
<I> Курсив </I>
<U> Подчеркнутый </U>
<STRIKE> Перечеркнутый </STRIKE>
<SUP> Верхний индекс </SUP>
<SUB> Нижний индекс </SUB>

Некоторые теги могут или должны применяться с определенными параметрами, которые указываются в открывающемся элементе тега (можно сразу указывать несколько параметров в одном теге). Например, открывающийся тег <FONT> (закрывающийся тег </FONT> обязателен) может иметь несколько атрибутов:
SIZE - задает размер текста (по умолчанию размер текста равен 3). Поместив текст между тегами <FONT SIZE=n></FONT>, где n - цифровое значение, Вы придадите ему нужный вам размер:

<font size="1"> Пример 1 </font>
<font size="2"> Пример 2 </font>
<font size="3"> Пример 3 </font>
<font size="4"> Пример 4 </font>
<font size="5"> Пример 5 </font>
<font size="6"> Пример 6 </font>

FACE - задает стандартное имя шрифта. Используйте шрифты, которые установлены на компьютере пользователя, в противном случае Обозреватель будет использовать шрифт, определенный по умолчанию (обычно Times New Roman). К стандартным шрифтам можно отнести шрифты, поставляемые с Windows 98, Ms Plus, Ms Office. В самой нижней строке данной таблицы представлено использование семества шрифта - имя каждого шрифта пишется через запятую. Если у пользователя на компьютере нет шрифта Comic Sans MS, Обозреватель подставит следующий в этом списке - Tahoma.

<font face="Times New Roman"> Times New Roman </font>
<font face="System"> System </font>
<font face="Arial"> Arial </font>
<font face="Courier"> Courier </font>
<font face="Verdana"> Verdana </font>
<font face="Comic Sans MS, Tahoma"> Comic Sans MS </font>

COLOR - задает цвет текста (по умолчанию черный - #000000). Цвет текста может определятся как самим названием, например, red, blue и т.д, так и представлен в шестнадцатиричном виде - #FF0000 (красный) #0000FF (синий).

<font COLOR="red"> Красный </font>
<font COLOR="#FF0000"> Красный </font>

С помощью элемента STYLE тега <SPAN> (закрывающийся тег </SPAN> обязателен) можно задавать выделение текста любым цветом:

<SPAN STYLE="BACKGROUND-COLOR: yellow"> Желтый </SPAN>

0

6

HTML ИЗ УЧЕБНИКА
С чего начинать?

Теперь расскажу немного о тегах - знаках, распологающихся в скобках. Большинство тегов имеют открывающийся элемент <> и закрывающийся </>. Между ними и находяться коды, которые распознает Обозреватель.

Графика.
<img border=0 src="Имя графического файла с расширением" Width="Его размер по горизонтали" Height="Его размер по вертикали" alt="Здесь Вы указываете выпадающую подсказку">
Размеры графического файла (в пикселях) по горизонтали и по вертикали, а также выпадающую подсказку можно не указывать, но тогда страничка грузиться дольше, не забывайте об этом. И еще - большие картинки Обозреватель может игнорировать, если Вы не укажите их размеры.

Текст.
Большинство HTML документов имеют заголовок. Для его создания используют теги <Hn></Hn>, где n – число от 1 до 6. Заключив текст между этими тегами, вы получите заголовок определенного размера.
Для создания нового абзаца используется тег <P>, а для перехода на новую строчку без создания абзаца - тег <BR>. Эти теги закрывать не обязательно. Конечно, если Вы не используете в теге <P> элемент ALIGN, которым может задаватся выравнивание абзаца:
<P ALIGN=LEFT> По левому краю </P>

<P ALIGN=CENTER> По центру </P>

<P ALIGN=RIGHT> По правому краю </P>

<P ALIGN=JUSTIFY> Текст, находящийся между этими элементами выравнивается по ширине </P>

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

<B> Жирный текст </B>
<I> Курсив </I>
<U> Подчеркнутый </U>
<STRIKE> Перечеркнутый </STRIKE>
<SUP> Верхний индекс </SUP>
<SUB> Нижний индекс </SUB>

Некоторые теги могут или должны применяться с определенными параметрами, которые указываются в открывающемся элементе тега (можно сразу указывать несколько параметров в одном теге). Например, открывающийся тег <FONT> (закрывающийся тег </FONT> обязателен) может иметь несколько атрибутов:
SIZE - задает размер текста (по умолчанию размер текста равен 3). Поместив текст между тегами <FONT SIZE=n></FONT>, где n - цифровое значение, Вы придадите ему нужный вам размер:

<font size="1"> Пример 1 </font>
<font size="2"> Пример 2 </font>
<font size="3"> Пример 3 </font>
<font size="4"> Пример 4 </font>
<font size="5"> Пример 5 </font>
<font size="6"> Пример 6 </font>

FACE - задает стандартное имя шрифта. Используйте шрифты, которые установлены на компьютере пользователя, в противном случае Обозреватель будет использовать шрифт, определенный по умолчанию (обычно Times New Roman). К стандартным шрифтам можно отнести шрифты, поставляемые с Windows 98, Ms Plus, Ms Office. В самой нижней строке данной таблицы представлено использование семества шрифта - имя каждого шрифта пишется через запятую. Если у пользователя на компьютере нет шрифта Comic Sans MS, Обозреватель подставит следующий в этом списке - Tahoma.

<font face="Times New Roman"> Times New Roman </font>
<font face="System"> System </font>
<font face="Arial"> Arial </font>
<font face="Courier"> Courier </font>
<font face="Verdana"> Verdana </font>
<font face="Comic Sans MS, Tahoma"> Comic Sans MS </font>

COLOR - задает цвет текста (по умолчанию черный - #000000). Цвет текста может определятся как самим названием, например, red, blue и т.д, так и представлен в шестнадцатиричном виде - #FF0000 (красный) #0000FF (синий).

<font COLOR="red"> Красный </font>
<font COLOR="#FF0000"> Красный </font>

С помощью элемента STYLE тега <SPAN> (закрывающийся тег </SPAN> обязателен) можно задавать выделение текста любым цветом:

<SPAN STYLE="BACKGROUND-COLOR: yellow"> Желтый </SPAN>

0

7

Изображения 2.
Для вставки изображений в HTML документ используется следующая конструкция (представлена полная):

<IMG SRC="Рисунок" BORDER="0" ALIGN="Выравнивание" WIDTH="Ширина" HEIGHT="Высота" HSPACE="Отступ_1" VSPACE="Отступ_2" ALT="Подсказка" NAME="Имя" LOWSRC="Рисунок_2">

В таблице находится описание каждого параметра данной конструкции:

SRC
Имя графического файла с расширением (поддерживаются *.jpg, *.gif, *.png). Если файл находится в другом каталоге, укажите к нему путь. Вы можете перейти на закладку, в которой идет речь о путях.
ALIGN
Выравнивание изображения в документе:

left - по левому краю.
right - по правому краю.
top или texttop - выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки.
middle - выравнивает базовую линию текущей текстовой строки с центром изображения.
absmiddle - выравнивает центр текущей текстовой строки с центром изображения.
bottom или baseline - выравнивают нижнюю кромку изображения с базовой линией текущей текстовой строки.
absbottom - выравнивает нижнюю кромку изображения с нижней кромкой текущей текстовой строки.

BORDER
Рамка вокруг рисунка. Значение по умолчанию - 0 (без рамки).
WIDTH
Ширина изображения в пикселях.
HEIGHT
Высота изображения в пикселях.
HSPACE
Горизонтальный отступ графического изображения в пикселях. Не обязательный параметр.
VSPACE
Вертикальный отступ в пикселях. Не обязательный параметр.
ALT
Это сообщение, которое выводится вместо картинки, если она не показывается (не найдена или пользователь настроил свой Обозреватель так, что тот не показывает картинки). Кроме того, вы увидите этот текст в виде подсказки, когда курсор мыши находится на рисунке.
NAME
Определяет имя изображения. Для обычного изображения, не связанного ни с чем, этот параметр совсем не обязательный.
LOWSRC
Имя графического файла с расширением с альтернативным изображением более низкого качества (и, соответственно, меньшего объема), чем изображение, указанное в параметре SRC. Обозреватели, поддерживающие данный параметр, сначала загрузят картинку из LOWSRC, а затем заменят ее картинкой из SRC. Не обязательный параметр.

Ссылки.
Ссылки HTML позволяют связать текст или картинку с другими гипертекстовыми документами. Текст, как правило, выделяется цветом или оформляется подчеркиванием. Вот обычная конструкция ссылки:

<A HREF="URL" TARGET="Окно" TITLE="Подсказка">Название ссылки</A>

Параметры элемента <A> представлены в таблице:

HREF URL
(унифицированный локатор ресурсов) - адрес любого файла в Интернете. Может быть абсолютными, то есть указывается полный адрес странички (например, http://lenininc.narod.ru/index.html) и относительным, как видно из названия указывается файл относительно текущего (например, index.html).
TARGET
Oпределяет, в каком окне (фрейме) загрузить гиперссылку. Может иметь значения:


_top - загружает гиперссылку на всем пространстве окна браузера (если до этого существовало разбиение на фреймы, то оно исчезнет).
_blank - загружает гиперссылку в новом окне браузера.
_self – загружает содержимое страницы, в окно, которое содержит эту ссылку (и так используется по умолчанию, так что если вам надо именно так загрузить ссылку, то параметр target вообще можно не использовать).
_parent - загружает содержимое страницы, заданной ссылкой, в окно, являющееся непосредственным владельцем набора фреймов.

TITLE
Текст подсказки, который будет появляться при наведении мышки на гиперссылку. Параметр не обязательный.

0


Вы здесь » ~Главный секрет женских побед~ » Уроки Photoshop » Урок №53 "Основы хтмл"