-Всегда под рукой

 -Подписка по e-mail

 

 -Цитатник

Анечка (Anushka_M, спасибо огромное!!! - (4)

ПОЗДРАВЛЯЮ С ДНЕМ РОЖДЕНИЯ НИНОЧКУ!(Arnusha) Милая милая Ниночка! С опозданием,но от всего ...

Спасибо от души TAISA_ANDRYEVEVA! - (10)

СВЕТЛОГО, ДОБРОГО ПРАЗДНИКА, С ДНЕМ РОЖДЕНИЯ, НИНОЧКА - Arnusha!!! Пусть будет крепким з...

Любочка (laplared), благодарю тебя подружка моя!!!!!!!!!!! - (2)

Поздравляю Ниночку (Arnusha) с днём рождения   ...

Лолочка (Lola_malvina), золотце, спасибо!!!!!! - (3)

С днём Рождения, Ниночка!(Аrnusha) Прими мои самые теплые поздравления с Днем Рождения! В э...

Верочка (Дневник_Девы), огромное спасибо! - (4)

Поздравляю с Днем рождения , Ниночка! (Arnusha)

 -Рубрики

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 20.01.2009
Записей: 10387
Комментариев: 295119
Написано: 330364

Записи с меткой html

(и еще 19963 записям на сайте сопоставлена такая метка)

Другие метки пользователя ↓

-_ хорошая литература

Почти все о тексте,шрифте...Урок.

Дневник

Воскресенье, 17 Июля 2011 г. 08:11 + в цитатник


ИТАК...

Полужирный текст

Выделение текста курсивом

Подчёркнутый текст

Зачёркнутый текст

маленький текст маленький текст
Читать далее...
Рубрики:  Полезности
Уроки

Метки:  

HTML & CSS - серия 5

Дневник

Вторник, 07 Июня 2011 г. 04:02 + в цитатник

Серия 1

Серия 2

Серия 3

Серия 4



Гиперссылки

Ссылка на http://...

Большинство ссылок в Интернете ведут на какую нибудь веб-страницу с адресом наподобие http://site.ru или http://site.ru/index.html.

Расширение
.html указывает на то, что мы имеем дело с файлом формата HTLM. Однако
cсылка может привести нас к документу практически любого формата: .jpg,
.doc, .pdf, .mp3, .zip... перечислять все было бы долго и бессмысленно.
Иногда она может оказаться прямой ссылкой на скачивание файла (возможно,
не вполне желательного).

Для наших целей важно только то, что
ссылка содержит адрес нужного нам файла в сети и указание на протокол
доступа к этому файлу (HTTP). Как же добавить такую ссылку?

Для этого используем парный тег <a...>...</a>. Напишем, например, следующее:

<a href="http://yandex.ru" title="Яндекс" target="_blank">Найдётся всё!</a>

Вот наша ссылка:

Найдётся всё!

Теперь - что здесь к чему.

http://yandex.ru
- тот адрес в сети, куда мы хотим отправить наших посетителей. Без
подобного указания наш тег вообще не будет работать. То, что идёт
дальше, писать не обязательно, но иногда полезно.

title="Яндекс" - всплывающая подсказка. Если здесь ничего не писать, то такой подсказки не будет.

target="_blank"
- указание браузеру открыть ссылку в отдельном окне (вкладке). По
умолчанию ссылка открывается в том же окошке, в котором находился
посетитель, просматривая Вашу страницу. Впоследствии, если он захочет
продолжить просмотр, ему придётся возвращаться назад.

Как удобнее открывать ссылки - дело вкуса. Казалось бы, новые окна (вкладки) хороши. Но часто их становится слишком много.

Между тегами <a...> и </a>
мы пишем то, что будет видеть посетитель страницы. Кстати, это не
обязательно должен быть текст - можно использовать изображение. Для
того, чтобы использовать картинку в качестве ссылки, напишем, например,

<a href="http://yandex.ru" title="Яндекс" target="_blank"><img src="http://www.promolive.ru/images/content/logo-yandex.gif"></a>

Получим вот такой результат:

Если
мы хотим, чтобы изображение менялось при наведении указателя мыши,
необходимо использовать скрипт (на Ярушке он не работает).

Стили
гиперссылок на Яндексе заданы довольно жёстко. Цвет (а также вид, размер
шрифта и т.д.) самой гиперссылки ещё можно поменять. Делается это путём
добавления в тег <a...> аттрибута style (о нём шла речь в предыдущих сериях). Для примера поменяем только цвет, сделав его зелёным. Напишем:

<a href="http://yandex.ru" title="Яндекс" target="_blank" style="color:green">Найдётся всё!</a>

Получим:

Найдётся всё!

Обратите
внимание, что теперь цвет посещённой ссылки не отличается от цвета
непосещённой. При наведении курсора ссылка по-прежнему становится
красной. Способа изменить это я пока не нашла.

Ссылка на любое место на Вашей страничке*

Для
того, чтобы сослаться на определённое место на Вашей страничке, сначала
на этом месте надо установить "якорь". Например, мы пишем статью из
нескольких частей. Заголовок части 1 поместим внутри контейнера <a...>...</a>:

<a name="part 1">Часть 1. Вместо предисловия</a>

Если в имени якоря не используется пробел, то можно обойтись без кавычек: name=part1.

Далее пойдёт текст этой самой первой части. Добавим сюда часто используемый для тестирования текст "Lorem ipsum"** (чтобы ничего не придумывать). Вот как будет выглядеть наша первая часть:

Часть 1. Вместо предисловия

Lorem
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.

А теперь мы хотим получить
возможность вернуться к началу нашей части 1. На том месте, откуда мы
хотим сделать такой переход, пишем следующее:

<a href="#part 1">читать часть 1</a>

Получаем
гиперссылку, ничем принципиально не отличающуюся от "обычной" (к ней
применимо всё, что говорилось выше, в том числе - про возможность
добавить всплывающую подсказку, стиль и заставить открываться в новом
окне):

читать часть 1

Кликнув на этой ссылке, перейдём к началу части 1.



*На Я.ру работает в пределах одной записи.

**Lorem ipsum
- название классического текста-«рыбы». «Рыба» - слово из жаргона
дизайнеров, обозначает условный, зачастую бессмысленный текст,
вставляемый в макет страницы. Lorem ipsum представляет
собой искажённый отрывок из философского трактата Цицерона «О пределах
добра и зла», написанного в 45 году до нашей эры на латинском языке.
Впервые этот текст был применен для набора шрифтовых образцов
неизвестным печатником в XVI веке (информация из Википедии).

Другие виды ссылок

Вероятно, Вы встречали на некоторых сайтах ссылки вида "пишите мне". Подобная ссылка устроена следующим образом:

<a href="mailto:address@yandex.ru">пишите мне</a>

Вот она: пишите мне

При
клике на этой ссылке, скорее всего, запустится Яндекс-почта
(проверьте). А вот при нажатии колёсика мыши запускается почтовый
клиент.

В настоящее время подобные ссылки без специальных приёмов
маскировки практически не используются: дело в том, что роботы легко
находят содержащиеся в ссылках почтовые адреса, и они попадают в базы
для рассылки спама.

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



Arnusha

Рубрики:  Полезности
Уроки

Метки:  

HTML & CSS - серия 4

Дневник

Суббота, 04 Июня 2011 г. 07:28 + в цитатник

Серия 1

Серия 2

Серия 3

Списки. Пример наследования свойств

Списки
с нумерацией либо различными значками - маркерами ("кружочками",
"квадратиками" и т.п.) хорошо знакомы из MS Word. Если в списке ведётся
нумерация, он называется нумерованным. В противном случае мы имеем дело с
ненумерованным списком. Рассмотрим сначала его.

Ненумерованный список

Выглядеть наш список будет так:

  • /s50.radikal.ru/i130/1007/71/ebc2001fe6bd.png" target="_blank">//s50.radikal.ru/i130/1007/71/ebc2001fe6bd.png);">элемент
    списка (а это набор совершенно бессмысленных слов, нужный только для
    того, чтобы показать, как наш список будет выглядеть)
  • /s50.radikal.ru/i130/1007/71/ebc2001fe6bd.png" target="_blank">//s50.radikal.ru/i130/1007/71/ebc2001fe6bd.png);">следующий
    элемент списка (а это набор совершенно бессмысленных слов, нужный
    только для того, чтобы показать, как наш список будет выглядеть)
  • /s50.radikal.ru/i130/1007/71/ebc2001fe6bd.png" target="_blank">//s50.radikal.ru/i130/1007/71/ebc2001fe6bd.png);">следующий
    элемент списка (а это набор совершенно бессмысленных слов, нужный
    только для того, чтобы показать, как наш список будет выглядеть)

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

  • элемент
    списка (а это набор совершенно бессмысленных слов, нужный только для
    того, чтобы показать, как наш список будет выглядеть)
  • следующий
    элемент списка (а это набор совершенно бессмысленных слов, нужный
    только для того, чтобы показать, как наш список будет выглядеть)
  • следующий
    элемент списка (а это набор совершенно бессмысленных слов, нужный
    только для того, чтобы показать, как наш список будет выглядеть)

Теперь - код. Для списка с бабочками он имеет вид:

<ul style="padding:0 0 0 25px"><li style="list-style-position:outside; list-style-image:url('//s50.radikal.ru/i130/1007/71/ebc2001fe6bd.png') ; list-style-type:circle">элемент списка...</li><li style="list-style-position:outside; list-style-image:url('//s50.radikal.ru/i130/1007/71/ebc2001fe6bd.png')
; list-style-type:circle">следующий элемент
списка...</li><li style="list-style-position:outside;
list-style-image:url('//s50.radikal.ru/i130/1007/71/ebc2001fe6bd.png') ; list-style-type:circle">следующий элемент списка...</li></ul>


Наш список из трёх элементов заключён внутри тегов <ul style="padding:0 0 0 25px">...</ul>.

ul расшифровывается как unordered list - ненумерованный список. padding:0 0 0 25px нужен для того, чтобы наша бабочка не "улетела" за левую границу видимой области. Можно было бы также написать padding-left:25px

Далее. Каждый элемент списка находится внутри контейнера <li style="list-style-position:outside; list-style-image:url('URL_картинки'); list-style-type:circle">...</li>. Обращаю внимание на то, что URL_картинки не заключается в кавычки.

list-style-position:outside говорит о том, что маркер находится за границами списка. Если бы вместо этого было list-style-position:inside, то маркер попал бы "внутрь" списка:

  • элемент
    списка (а это набор совершенно бессмысленных слов, нужный только для
    того, чтобы показать, как наш список будет выглядеть)
  • следующий
    элемент списка (а это набор совершенно бессмысленных слов, нужный
    только для того, чтобы показать, как наш список будет выглядеть)
  • следующий
    элемент списка (а это набор совершенно бессмысленных слов, нужный
    только для того, чтобы показать, как наш список будет выглядеть)
В принципе, можно было не писать list-style-position:outside, поскольку маркер устанавливается за границами списка по умолчанию.

list-style-image:url('URL_картинки') указывает на картинку, которая будет играть в нашем списке роль маркера (во втором примере этой записи нет).

list-style-type:circle стоит в первом примере на тот случай, если картинка не загрузится, и указывает тип предпочитаемого нами маркера: circle
(окружность). Если бы мы не написали этого, и к тому же картинка не
загрузилась бы, то на месте окружностей стоял был тип маркета,
используемый по умолчанию (disc). Кроме окружности и диска, маркер для ненумерованного списка может принимать вид квадрата (square) или вообще исчезать (none).

В третьем примере (там, где маркер стоит внутри списка) свойство list-style-type не задано, и по умолчанию маркер принимает форму диска.

Внутри одного списка можно задавать разные варианты оформления пунктов, например:

  • пункт списка
  • ещё один пункт списка
  • ещё один пункт списка
  • ещё один пункт списка

Код нашего кривого списка выглядит так:

<ul><li
style="list-style-type:circle">пункт списка</li><li
style="list-style-type:disc">ещё один пункт списка</li><li
style="list-style-type:none">ещё один пункт списка</li><li
style="list-style-type:square">ещё один пункт
списка</li></ul>


Что
делать, если мы хотим оформить цифры в виде картинок? Поступить точно
так же, как при составлении списка, с которого мы начинали:

  1. /s56.radikal.ru/i153/1007/7b/7f10dfb95c69.png" target="_blank">//s56.radikal.ru/i153/1007/7b/7f10dfb95c69.png);">первый элемент списка
  2. /s001.radikal.ru/i194/1007/b6/dda52ff8f3d2.png" target="_blank">//s001.radikal.ru/i194/1007/b6/dda52ff8f3d2.png);">второй элемент списка
  3. /s004.radikal.ru/i206/1007/2d/cda348ffa7ba.png" target="_blank">//s004.radikal.ru/i206/1007/2d/cda348ffa7ba.png);">третий элемент списка

Код будет аналогичным, только картинки для разных элементов списка надо брать разные (опустим list-style-position:outside и тип маркера, которым мы хотим заменить, в случае чего, наши картинки):

<ol style="padding:0 0 0 25px"><li style="list-style-image:url('//s56.radikal.ru/i153/1007/7b/7f10dfb95c69.png')">первый элемент списка</li><li style="list-style-image:url('//s001.radikal.ru/i194/1007/b6/dda52ff8f3d2.png')">второй элемент списка</li><li style="list-style-image:url('//s004.radikal.ru/i206/1007/2d/cda348ffa7ba.png')">третий элемент списка</li></ol>


Пожалуй, единственное заметное отличие нумерованного списка (заключённого между тегами <ol>...</ol>) от ненумерованного (заключённого между тегами <ul>...</ul>)
состоит в том, что в первом случае в качестве маркера по умолчанию
подставляется диск, а во втором - арабская (десятичная) цифра - значение
decimal.

Списки можно вкладывать друг в друга, например, так:

  1. пункт списка
    • элемент вложенного списка
    • ещё один элемент вложенного списка
    • ещё один элемент вложенного списка
  2. ещё один пункт списка
  3. ещё один пункт списка

Код этого списка имеет вид:

<ol><li>пункт
списка</li><ul style="padding:0 0 0 20px"><li
style="list-style-type:circle">элемент вложенного
списка</li><li style="list-style-type:circle">ещё один
элемент вложенного списка</li><li
style="list-style-type:circle">ещё один элемент вложенного
списка</li></ul><li>ещё один пункт
списка</li><li>ещё один пункт списка</li></ol>


Наследование

В
CSS хорошо известно такое правило, как наследование. Оно означает, что
дочерний элемент будет иметь те же свойства, что и родительский элемент.

На примере списков мы как раз сталкиваемся с наследованием.Рассмотрим нумерованный список, в котором мы решили выделить цифры каким-нибудь другим шрифтом. Вот что у нас получится:
  1. первый пункт списка
  2. второй пункт списка

Код этого списка имеет вид:

<ol><li
style="color:maroon; font-family:Verdana; font-size:18px;
font-style:italic; font-weight:bold">первый пункт
списка</li><li style="color:maroon; font-family:Verdana;
font-size:18px; font-style:italic; font-weight:bold">второй пункт
списка</li></ol>


Если мы
хотим вернуть обычный шрифт для пунктов списка, оставив выделенными
только цифры, нам придётся вводить для этого шрифта значения всех свойств, которые были изменены, чтобы выделить цифры-маркеры:

  1. первый пункт списка
  2. второй пункт списка

Код в этом случае имеет вид:

<ol><li
style="color:maroon; font-family:Verdana; font-size:18px;
font-style:italic; font-weight:bold"><span style="color:black;
font-family:arial, sans-serif; font-size:.7em; font-style:normal;
font-weight:normal">первый пункт списка</span></li><li
style="color:maroon; font-family:Verdana; font-size:18px;
font-style:italic; font-weight:bold"><span style="color:black;
font-family:arial, sans-serif; font-size:.7em; font-style:normal;
font-weight:normal">второй пункт
списка</span></li></ol>


Не забывайте закрывать тег <span> для каждого пункта списка. Контейнер <span...>...</span> является в этом примере дочерним элементом, а контейнер <li...>...</li> - родительским элементом.

Примечание.

Свойства основного текста на Ярушке:

font-family:arial, sans-serif;

font-size:.7em (.7em - сокращение, можно было бы записать 0.7em);

font-style:normal;

font-weight:normal;

color - зависит от настроек Вашей страницы.



 


Источник Проксима
Arnusha

Под катом про нумерованный список
Рубрики:  Уроки

Метки:  

HTML & CSS - серия 3

Дневник

Четверг, 02 Июня 2011 г. 06:59 + в цитатник
HTML & CSS - серия 3

Серия 1

Серия 2



Выравнивание текста в абзаце

На время забудем про style,
который мы использовали при оформлении текста, и вернёмся к "чистому"
HTML. Посмотрим, как можно выровнять текст в абзаце. Сразу же перечислим
все варианты, которых немного.

Выравнивание текста в этом абзаце задаётся при помощи свойства (атрибута) align тега <p>. В данном случае текст выравнивается по ширине абзаца, т.е. как бы "подтягивается" к его краям: <р align="justify">. Добавим сюда ещё предложение для наглядности.

Выравнивание текста в этом абзаце задаётся при помощи свойства (атрибута) align тега <p>. В данном случае текст выравнивается по правому краю: <р align="right">

Выравнивание текста в этом абзаце задаётся при помощи свойства (атрибута) align тега <p>. В данном случае текст выравнивается по центру: <р align="center">

Выравнивание текста в этом абзаце задаётся при помощи свойства (атрибута) align тега <p>. В данном случае текст выравнивается по левому краю: <р align="left">

В последнем случае align="left" можно было бы и не писать, поскольку выравнивание текста по левому краю производится по умолчанию.

Выровнять абзац по центру можно также с помощью парного тега <center>:

Получается такой же результат, что и в приведённом выше примере, но в данном случае используется конструкция <center><p>текст абзаца</p></center>

С помощью тега <center> можно также выравнивать по центру любые другие объекты, например, изображения:

<center><img src="URL_картинки"></center>

URL_картинки (http://...) копируем из адресной строки браузера.

Отступы

Вы ещё не соскучились по style? Сейчас самое время его вспомнить.

В этом абзаце задана "красная строка",то есть отступ первой строки от левого края, который в данном случае равен 20px: <p style="text-indent:20px">текст абзаца</p>

Отступ может быть и отрицательным. В этом случае мы получим "висящую" строку. Однако, если просто написать text-indent:-20px, то мы "потеряем" часть текста:

В этом абзаце задано значение text-indent:-20px, и вот какое безобразие получилось.

Поступим несколько по-другому. Подвинем весь наш абзац на 20px вправо и снова зададим text-indent:-20px:

В этом абзаце используется text-indent:-20px и дополнительно padding:0 0 0 20px: <p style="padding:0 0 0 20px; text-indent:-20px">текст абзаца</p>.

Используем отрицательный отступ и свойства шрифта для первой буквы, чтобы выделить начало нашего абзаца:

В этом абзаце используется text-indent:-20px и дополнительно padding:0 0 0 20px: <p style="padding:0 0 0 20px; text-indent:-20px">текст абзаца</p>.

Возникает вопрос про paddingmargin),
которые необходимы при позиционировании текста и других объектов
(изображений, "встроенных" объектов, блочных элементов и т.д.) Но это -
достаточно большая тема, поэтому расскажу в другой раз. Сейчас только
замечу, что в нашем примере вместо padding:0 0 0 20px можно было бы написать padding-left:20px.


 


Источник Проксима

Рубрики:  Полезности
Уроки

Метки:  

Как расположить картинку между текстом...

Дневник

Среда, 25 Мая 2011 г. 04:07 + в цитатник
КАРТИНКА МЕЖДУ ТЕКСТОМ



Я тебя никому не отдам -
Замерзающий плакал котенок,
Умудренный не по годам,
Рыл он снег серебристый под кленом.

Навсегда я останусь с тобой,
Я спасу нас обоих от стужи,
Потому что под этой луной
Мне никто больше в мире не нужен,

Я сейчас закопаю нас в снег,
Там тепло, отогреются лапки,
Мимо быстро прошел человек,
В зимней куртке и пуховой шапке.
А потом все опять расцветет,
Будет солнце сиять над землей,
И никто никогда не поймет,
Что пришлось пережить нам с тобой.

Ты держись, не смотри, что я мал,
Что в кровь изодрались лапки,
Я не выдохся, просто устал,
Ничего, нам помогут боги,
Рядом с ним, на седом полотне,
Еще теплое тело лежало,
А из глаз, по мохнатой щеке,
Золотая слезинка бежала.


ЗДЕСЬ КОД


ТЕКСТ МЕЖДУ КАРТИНКАМИ
ЕЩЁ
Рубрики:  Полезности
Уроки

Метки:  

 Страницы: [1]