КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
Картинки
|
|
|
|
Выделение текста
Сначала рассмотрим курсив и полужирный текст:
<b> Полужирный текст </b>
<i> Наклонный текст (курсив) </i>
Теперь пара строк о моширинном шрифте. Что это такое за шрифт? Это шрифт с символами одинаковой фиксированной ширины, как шрифт у пишущей машинки. А тэг для него следующий:
<tt> моноширинный шрифт </tt>
Также моноширинным шрифтом отображается текст заключенный в тэг <pre></pre>:
<pre> текст (куча пробелов) текст текст (куча пробелов) текст текст (куча пробелов) текст</pre>У тэга <pre> есть одна замечательная особенность: текст, заключенный в него, выводится с точностью до пробела так, как вы его набили в блокноте.
К одному фрагменту текста может применяться сразу несколько тэгов:
<tt><b><i> текст </i></b></tt>
В нашем примере текст моноширинный, полужирный, и выделен курсивом.
Подчеркнутый текст вводится при помощи тэга <u>:
<u> Подчеркнутый текст </u>
Тэги <strike> и <s> представляют текст перечеркнутым шрифтом, можно использовать какой вам угодно из них:
<strike> Перечеркнутый </strike>
<s> Перечеркнутый </s>
Тэг <big> представляется крупным шрифтом, а <small> малым шрифтом относительно основного текста:
<small> Малый </small>
Нормальный текст
<big> Большой </big>
Тэги Sup и Sub – определяют верхний и нижний индексы. Sup – верхний, Sub – нижний.
Верхний индекс <sup> sup </sup>
Нижний индекс <sub> sub </sub>
Тип шрифта
Попробуйте ввести следующую конструкцию в наш документ для части текста, чтобы задать шрифт Arial:
<font face="arial"> текст (шрифт Arial)</font>
Какие же типы шрифтов являются стандартными, и по идее должны находиться на компьютере каждого пользователя - это:
|
|
|
· Times;
· Times New Roman;
· Arial;
· Helvetica;
· Courier;
· Verdana;
· Tahoma;
· Cosmic Sans;
· Garamond
Можно безбоязненно использовать любой из них.
В атрибуте face можно указать сразу несколько типов шрифтов:
<font face="arial, verdana, courier"> текст (шрифт Arial) </font>
В этом случае если у посетителя не окажется на компьютере шрифта Arial, то текст будет отображен шрифтом Verdana. Если и Verdana нет на компьютере вашего посетителя, то текст будет отображен шрифтом Courier. Т.е. в атрибуте face мы можем задать список разделенных запятыми названий шрифтов, которые браузер вашего посетителя должен попытаться найти у него на компьютере и отобразить в порядке приоритета.
Теперь я с чистой совестью поведаю вам, как вставлять картинки в документ:
<img src="my.jpg">
Вместо my.jpg мы можем подставить имя любой картинки (me.gif, main.png). Самое главное понять, что все расположенное между кавычками – ссылка (путь к картинке). Наш пример говорит о том, что картинка лежит в том же каталоге (директории, папке), в которой лежит и наш документ. Если картинка лежит в поддиректории (в папке, которая лежит в вашей основной папке), то ссылка на неё будет выглядеть так:
<img src="my/my.jpg">
Если картинка лежит на уровень выше, а документ находится в поддиректории, то ссылка на неё будет такой:
<img src="../my.jpg">
Если картинка лежит на другом сайте, то путь прописывается полностью:
<img src="http://www.homepage.ru/my/my.jpg">
Посмотрите, что у нас получилось. Не очень симпатично, не так ли? Было бы лучше, если бы текст аккуратно располагался, например, сбоку от картинки.
<html> <head> <title>Мой первый шаг </title> </head> <body text="#336699" bgcolor="#000000">  <div align="center"> <H3>Здравствуйте, это моя первая страница.</H3> <br> <font color="#CC0000"> Добро пожаловать!</font>:) </div> <p align="justify"> <img src="primtocodephoto.gif"> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится <b> еще один виртуальный друг? </b> </p> </body> </html>
|
Итак, мы задались вопросом как же сделать так, чтобы текст располагался весь рядом с картинкой, а не только одна его строчка. Все очень просто. Давайте вспомним об атрибуте align, который отвечает за выравнивание. Атрибут align есть и у картинок:
|
|
|
<img src="pr1.png" align="left">
Это означает, что картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа. Чтобы сделать наоборот (картинка справа, текст слева) надо прописать right:
<img src="pr1.png" align="right">
Но это не все: текст может располагаться внизу картинки (это по умолчанию) – (1), посередине – (2), и вверху – (3):
(1) - <img src="pr1.png" align="bottom">
(2) - <img src="pr1.png" align="middle">
(3) - <img src="pr1.png" align="top">
Кроме атрибута align для тэга <img> можно ввести еще несколько атрибутов:
(1) - <img src="pr1.png" vspace="10">
(2) - <img src="pr1.png" hspace="30">
(3) - <img src="pr1.png" alt="моя фотография">
(4) - <img src="pr1.png" width="100">
(5) - <img src="pr1.png" height="200">
(6) - <img src="pr1.png" border="5">
Теперь последуют объяснения по пунктам.
(1) – атрибут vspace – задает расстояние между текстом и рисунком (по вертикали). Расстояние задается в пикселях. Pixel – минимальная единица изображения, точка. Например, разрешение экрана 800х600 – 800 на 600 точек. В нашем примере расстояние равно 10 пикселям.
(2) – атрибут hspace – тоже задает расстояние между текстом и рисунком, но по горизонтали. Расстояние задается в пикселях. В нашем примере оно равно 30 пикселям (точкам).
(3) – атрибут alt – краткое описание картинки. Если навести курсором мыши на рисунок, и так подержать его (курсор) несколько секунд, выскочит описание картинки. В нашем случае это будет фраза – "моя фотография". Если параметр alt не задавать, описания не будет. Но умные люди говорят, что описание картинкам задавать следует (особенно, если это кнопки), т.к. есть особенные люди, которые бродят по интернету с отключенной графикой. Без alt им не будет видно на что нажимать (если картинка является ссылкой или кнопкой в меню), т.к. картинка не отображается, а при заданном alt, можно увидеть надпись, для чего картинка предназначена.
|
|
|
(4) атрибут width – ширина самой картинки (в пикселях). Если ширину не задавать специально, то по умолчанию она будет равна реальной ширине картинки (а так вы можете ее сделать или уже, или шире).
(5) – атрибут height – высота самой картинки (тоже в пикселях). Так же как в случае с width высоту (height) картинки можно и не задавать.
(6) – атрибут border – рамка вокруг самой картинки (в пикселях). Можно не задавать. Однако, по умолчанию, рамка вокруг картинки есть всегда. И если вы хотите убрать ее, то выставляйте атрибут border равным нулю.
Введем следующие атрибуты для нашей картинки:
<img src="pr1.png" align="left" hspace="30" vspace="5" alt="моя фотография">
Наша картинка будет прижата к левому краю экрана, текст будет обтекать ее справа, расстояние до текста по горизонтали – 30 пикселей, по вертикали – 5 пикселей (чтобы красиво все смотрелось), ну, и если вы наведете на картинку курсор, то выскочит надпись – "моя фотография".
| <html> <head> <title>Мой первый шаг </title> </head> <body text="#336699" bgcolor="#000000"> <div align="center"> <H3>Здравствуйте, это моя первая страница.</H3> <br> <font color="#CC0000"> Добро пожаловать!</font>:) </div> <p align="justify"> <img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография"> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. <br><br> А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится <b> еще один виртуальный друг?:) </b><br><br> На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего:) <br><br> Если ты так тоже думаешь, то давай как-нибудь встретимcя, поболтаем, чайку попьем в кафешке? Кто знает, может быть мы и в реальной жизни станем друзьями
</p> </body> </html>
|
|
|
|
Картинку можно сделать фоном документа. Это прописывается в открывающем тэге боди:
<body text="#336699" bgcolor="#000000" background="ваш_фон.jpg" >
Атрибут background указывает на то, где лежит фоновая картинка, в нашем примере он указывает на то, что наша фоновая картинка лежит в той же директории (папке), что и наш документ.
Но зачем оставлять атрибут bgcolor, если есть background? А вдруг фоновая картинка не загрузится (представьте, такое может быть), тогда сами поймете зачем.
Ссылки
Наша страничка может состоять из нескольких документов. Один из них главный (index.html) – он открывается первым и должен обязательно лежать на вашем сайте в Интернете. Остальные документы вы можете называть как угодно (photos.html, about_me.html, my_pets.html, friends.html, gh516hgd.html). Они все могут лежать в одной директории (папке), а могут в разных.
При помощи ссылок мы связываем эти документы. Так с главной страницы по ссылкам мы можем перейти на страницу с фотографиями, с этой страницы мы можем перейти обратно на главную страницу, или, допустим, на страницу с нашими стихотворениями, и т.д.
Ссылкой на эти другие документы (части нашей странички) может быть текст (фраза, слово), а может быть и картинка. На этой ступеньке мы рассмотрим только текстовую ссылку.
Для начала создадим новый документ (в нашем примере prf.html) в той же директории (папке), где находится наш главный документ index.html. Содержание документа выдумайте сами, у вас для этого уже достаточно знаний.
Пусть prf.html – документ с вашими фотографиями. Тогда мы можем без зазрения совести фразу "посмотреть мои фотографии" сделать ссылкой на prf.html:
<a href="prf.html">посмотреть мои фотографии</a>
Тэг <a></a> делает ссылкой заключенную в него картинку или фразу (текст). Принципы прописывания пути мы уже знаем:
(1) - <a href="prf.html">мои фотографии</a>
(2) - <a href="photos/prf.html">мои фотографии</a>
(3) - <a href="http://www.homepage.ru/prf.html">мои фотографии</a>
В случае (1) документ лежит в той же директории (папке), что и документ, в котором мы ссылаемся на prf.html, в случае (2) документ лежит в поддиректории /photos, в случае (3) мы ссылаемся на сайт http://www.homepage.ru, где лежит нужный нам документ.
Первые два примера (1) и (2) – называют относительными путями. (3) – абсолютный, т.е. указанный полностью, включая имя сайта (в нашем случае - http://www.homepage.ru/). Абсолютный путь мы используем, когда ссылаемся на чужие странички, относительный мы используем, когда ссылаемся на документы внутри нашего сайта.
Для всех ссылок в нашем документе мы можем прописать цвета: link - цвет просто ссылки, alink – цвет активной ссылки (нажатой), vlink – цвет уже посещенной ссылки.
<body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999">
Как и цвет для всего текста в документе, цвета ссылок мы прописываем в <body>. В нашем примере цвета для просто ссылки, активной и посещенной – одинаковые, но они могут быть разными – это на ваше усмотрение.
Итак, пропишем цвета для ссылки и саму ссылку в нашем документе:
| <html> <head> <title>Мой первый шаг </title> </head> <body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999"> <div align="center"> <H3>Здравствуйте, это моя первая страница.</H3> <br> <font color="#CC0000"> Добро пожаловать!</font>:) </div> <p align="justify"> <img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография"> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли <a href="prf.html"> посмотреть мои фотографии </a>, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. <br><br> А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится <b> еще один виртуальный друг?:) </b><br><br> На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего:) <br><br> Если ты так тоже думаешь, то давай как-нибудь встретимcя, поболтаем, чайку попьем в кафешке?:) Кто знает, может быть мы и в реальной жизни станем друзьями:) </p> </body> </html>
|
Как вы помните, мы можем задать различные цвета для разных блоков текста в нашем документе (<font color="…"></font>). Для текстовых ссылок мы тоже можем задать разный цвет – это делается при помощи тэга <font> и его атрибута color:
<a href="prf.html"><font color="#CC0000">посмотреть мои фотографии</font></a>
Обратите внимание, <font color="…"></font> – прописывается внутри тэга <a></a>, если вы пропишите иначе, то у вас не получится задать вашей ссылке цвет отличный от цвета других ссылок в документе.
Ссылка на ваш почтовый ящик прописывается немного иначе, чем ссылка на другой документ (страницу, сайт):
<a href="mailto:[email protected]"> [email protected] </a>
Запомните это раз и навсегда и не пытайтесь ее прописать по другому. Ссылка на документ, картинку или файл – одно дело, а ссылка на почтовый ящик – другое.
У mailto есть еще некоторые опции:
-?subject=Тема пиcьма
- &Body=Текст вашего сообщения
- &[email protected],[email protected] (копии письма через запятую)
- &[email protected],[email protected] (скрытые копии письма через запятую)
Все вместе это будет выглядеть так:
<a href="mailto:[email protected]?subject=Hello&Body=text&[email protected]&[email protected]"> [email protected] </a>
Теперь если ваш посетитель нажмет такую ссылку, то его почтовая программа выдаст ему бланк нового письма с уже заполненными полями.
Атрибут title (не путать с тэгом <TITLE>) предлагает информацию об элементе, для которого он устанавливается. Мы можем установить его, например, для тэга <a>:
<a href="ssilka.html" title="Ваша подсказка"> текст-ссылка </a>
Наведите курсор мыши на слова "текст-ссылка", и, если ваш браузер поддерживает спецификацию Html 4.0, то вы увидите то самое желанное.
Ссылкой может быть и картинка. Принцип ссылки тот же, что и в случае с текстом, только в тэг <a></a> вставляется не текст, а картинка:
<a href="prf.html"> <img src="primtocodephoto.gif"> </a>
Если вы хотите сделать картинку ссылкой на ваш почтовый ящик, то принцип тот же:
<a href=" mailto:[email protected] "><img
src="primtocodephoto.gif"></a>
Итак, сделаем ссылкой картинку primtocodephoto.gif на документ с фотографиями (prf.html):
| <html> <head> <title>Мой первый шаг </title> </head> <body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999"> <div align="center"> <H3>Здравствуйте, это моя первая страница.</H3> <br> <font color="#CC0000"> Добро пожаловать!</font></div> <p align="justify"> <a href="prf.html"><img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография"></a> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли <a href="prf.html"> посмотреть мои фотографии </a>, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. <br><br> А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится <b> еще один виртуальный друг?:) </b><br><br> На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего:) <br><br> Если ты так тоже думаешь, то давай как-нибудь встретимcя, поболтаем, чайку попьем в кафешке?:) Кто знает, может быть мы и в реальной жизни станем друзьями:) </p> </body> </html>
|
Теперь посмотрите в браузере, что у нас получилось. Картинка primtocodephoto.gif стала ссылкой. Вокруг картинки появилась рамочка. Эту рамочку можно оставить, если вам она нравится, а можно убрать, если вы зададите картинке атрибут border="0" (о нем мы уже говорили с вами).
<img src="primtocodephoto.gif" align="left" hspace="30" vspace="5" alt="моя фотография" border="0" >
Цвет рамки вокруг картинки задается атрибутом bordercolor, например:
<img src="picture.gif" border="3" bordercolor="#CC0000">
Но, если ваша картинка будет ссылкой, то рамка вокруг нее будет того цвета, который мы задали для ссылок в тэге body с помощью link, vlink, alink, т.е. атрибут bordercolor в этом случае уже не влияет на цвет рамки вокруг картинки.
Многие из вас, наверное, сталкивались с таким явлением: когда нажимаешь на маленькую картинку, то загружается большая в том же или в новом окне. Как это делается? Тут никаких хитростей: делаем ссылкой картинку (допустим small.jpg) и ссылаемся на другую картинку (допустим big.jpg):
<a href="big.jpg"> <img src="small.jpg"> </a>
В этом случае большая картинка откроется в том же окне. Но как же сделать так, чтобы картинка (или любой другой файл-документ) открылась в новом окне? Дело в том, что у тэга <a></a> есть атрибут target:
<a href="big.jpg" target="_blank"> <img src="small.jpg"> </a>
Итак, target="_blank" – указывает на то, что документ (картинка в нашем случае), на который ведет ссылка, откроется в новом окне браузера.
|
|
|
|
|
Дата добавления: 2014-12-25; Просмотров: 618; Нарушение авторских прав?; Мы поможем в написании вашей работы!