Кароль Елена : другие произведения.

Загадочное слово Html...

Самиздат: [: разрегистрация] [Найти] [Рейтинги] [Обсуждения] [Новинки] [Обзоры] [Помощь|Техвопросы]
Ссылки:
Школа кожевенного мастерства: сумки, ремни своими руками
  • Аннотация:


    Довольно много пришлось узнать нового и необычного, прежде чем я смогла сказать "Я начала понимать, нафига мне Html и как правильно и красиво запихать его туда, куда мне необходимо". Прежде всего эта информация для меня самой, чтобы каждый раз не искать и не вспоминать все "интересности" заново. Кому это также необходимо, а именно небольшой экскурс по Html тегам - милости просим.

  
   ВНИМАНИЕ: Если будете копировать Html-теги непосредственно отсюда, то не забывайте удалять лишние пробелы, которые у меня стоят после "<"! Статья (да и я сама) пока в процессе, поэтому пока только так
  
Оглавление
1. Изменение шрифта
2. Изменение размера шрифта
3. Изменение цвета шрифта
4. Изменение стиля текста
5. Выравнивание текста
6. "Пробежимся" по тексту
  6.1. Линии
  6.2. Бегущие строки
7. Списки
  7.1. Упорядоченные
  7.2. Неупорядоченные
8. Размещение картинок и иллюстраций
9. Создаем ссылки
10. Создаем сноски
11. Ну и напоследок немного забавностей   
12. Источники
    
  
  1. Изменение шрифта:
  
  < i>Курсив< /i> = Курсив;
  < b>Жирный< /b> = Жирный;
  < u>Подчёркнутый< /u> = Подчёркнутый;
  < s>Зачёркнутый< /s> = Зачёркнутый;
  < tt>текст моноширинный< /tt> = текст моноширинный (все буквы одинаковы по ширине);
  < sub>Нижний< /sub> индекс = Нижний индекс;
  < sup>Верхний< /sup> индекс = Верхний индекс;
  
  КСТАТИ, совершенно неважно, заглавными будут буквы тега или мелкими.
  
  к оглавлению
  
  
  2. Изменение размера шрифта:
  
   Размер шрифта - от 1 до 7. По умолчанию - 3. Также можно указывать относительный размер: +N или -N.
  
  < big>Увеличенный на 1< /big> = Увеличенный на 1;
  < small>Уменьшенный на 1< /small> = Уменьшенный на 1.
  
  Либо:
  < font size="7">7-й размер< /font> = 7-й размер
  < font size="-2">Размер на 2 меньше< /font> = Размер на 2 меньше.
  
  к оглавлению
  
  
  3. Изменение цвета шрифта:
  
  < font color="red">Красный< /font> = Красный;
  
  Допустимые названия цветов:
  aqua;
  black;
  blue;
  fuchsia;
  gray;
  green;
  lime;
  maroon;
  navy;
  olive;
  purple;
  red;
  silver;
  teal;
  white;
  yellow.
  
  Кроме того, можно задавать любой цвет в палитре RGB.
  
  < font color="#RRGGBB">RGB = заданный цвет< /font>.
  < font color="#0080ff">лазурный< /font> = лазурный;
  < font color="#ff8800">мандариновый< /font> = мандариновый;
  < font color="#8c1818">кармин< /font> = кармин.
  RR, GG и BB - яркость красной, зелёной и синей составляющих цвета соответственно. Задаются в шестнадцатеричной форме от 00 до ff.
  
  Если вас это заинтересовало, то краткий список всевозможных оттенков можно посмотреть здесь:Википедия, цвета Html
  либо здесь:Студия Артемия Лебедева
  
  к оглавлению
  
  
  4. Изменение стиля текста:
  
  После долгих и мучительных размышлений, а также биения головой об клаву, стало ясно - параметр face, при заливке текста на Самиздат ведет себя довольно странно, а именно удаляется, хотя все прочитанные источники утверждают, что стоит нам написать вот такой тег: < font fасе="Comic Sans MS"> текст < /font> и наш текст будет красивым штифтом Comic Sans MS.
Ничего подобного!
  
  Сам тег волшебным образом исчезал, а текст как был стандартного для Самиздата стиля Times New Roman, так и оставался. А все почему? А фиг его знает! Но пошарившись по просторам СИ еще немного, я наконец нашарила как же сделать так, чтобы работало хоть что-то))). А все очень просто! Данный тег будет работать на СИ, если мы уберем кавычки у стиля, а сам стиль будет обозначен не более, чем одним словом. Так стали возможны вот такие стили, которые при использовании на ресурсе СИ хоть немного, но отличаются от стандартного Times New Roman:
  Arial, Tahoma, Courier, Verdana, Impact, Georgia, Garamond (возможно есть и другие, но пока остановимся на этих).
  И естественно наш тег для смены стиля будет именно вот такой:
  < font face=Arial> ТЕКСТ < /font>
  
  Стиль по умолчанию Times New Roman ----- После долгих и мучительных размышлений, а также биения головой об клаву...   ( курсив    жирный    жирный курсив )
  Стиль Verdana ------ После долгих и мучительных размышлений, а также биения головой об клаву...   ( курсив    жирный    жирный курсив )
  Стиль Courier ---- После долгих и мучительных размышлений, а также биения головой об клаву...   ( курсив    жирный    жирный курсив )
  Стиль Tahoma --------- После долгих и мучительных размышлений, а также биения головой об клаву...   ( курсив    жирный    жирный курсив )
  Стиль Georgia -------- После долгих и мучительных размышлений, а также биения головой об клаву...   ( курсив    жирный    жирный курсив )
  Стиль Arial ---------------- После долгих и мучительных размышлений, а также биения головой об клаву...   ( курсив    жирный    жирный курсив )
  Стиль Garamond --------- После долгих и мучительных размышлений, а также биения головой об клаву...   ( курсив    жирный    жирный курсив )
  Стиль Impact -------------- После долгих и мучительных размышлений, а также биения головой об клаву...   ( курсив    жирный    жирный курсив )
  
Экспериментируйте!
  
  к оглавлению
  
  
  5. Выравнивание текста:
  
  < br> - новая строка
  < dd> - красная стока
   & nbsp; - пробел
  
  5.1.< p align="left">АБЗАЦ< /p> - выравнивание абзаца по левому краю (обычно это происходит по умолчанию, если не заданы другие параметры).

"Когда я в 2001 пришёл на Самиздат и начал читать выложенные здесь произведения, мне не понравилось несколько "чисто верстальных" моментов, которые мешали привыкшему к книжкам взгляду комфортно скользить по строчкам, не отвлекаясь на многочисленные перестройки (отсутствие выравнивания прозаического текста по правому краю делает строчки "разнодлинными", что существенно напрягает восприятие). И я поставил себе мутную цель "чёбы красиво", которую худо-бедно решил, но иногда незначительно улучшаю её новые реализации, узнавая новые хтмл-ные фишки (короче, открываю Америки и изобретаю велосипеды). (С.Панарин)"

  5.2.< p align="right">АБЗАЦ< /p> - выравнивание абзаца по правому краю.

"Когда я в 2001 пришёл на Самиздат и начал читать выложенные здесь произведения, мне не понравилось несколько "чисто верстальных" моментов, которые мешали привыкшему к книжкам взгляду комфортно скользить по строчкам, не отвлекаясь на многочисленные перестройки (отсутствие выравнивания прозаического текста по правому краю делает строчки "разнодлинными", что существенно напрягает восприятие). И я поставил себе мутную цель "чёбы красиво", которую худо-бедно решил, но иногда незначительно улучшаю её новые реализации, узнавая новые хтмл-ные фишки (короче, открываю Америки и изобретаю велосипеды). (С.Панарин)"

  5.3.< p align="center">АБЗАЦ< /p> - выравнивание абзаца по центру.

"Когда я в 2001 пришёл на Самиздат и начал читать выложенные здесь произведения, мне не понравилось несколько "чисто верстальных" моментов, которые мешали привыкшему к книжкам взгляду комфортно скользить по строчкам, не отвлекаясь на многочисленные перестройки (отсутствие выравнивания прозаического текста по правому краю делает строчки "разнодлинными", что существенно напрягает восприятие). И я поставил себе мутную цель "чёбы красиво", которую худо-бедно решил, но иногда незначительно улучшаю её новые реализации, узнавая новые хтмл-ные фишки (короче, открываю Америки и изобретаю велосипеды). (С.Панарин)"

  5.4.< center>СТРОКА< /center> - выравнивание отдельной строки (слова или всего текста) по центру.
  
  "Когда я в 2001 пришёл на Самиздат и начал читать выложенные здесь произведения, мне не понравилось несколько "чисто верстальных" моментов, которые мешали привыкшему к книжкам взгляду комфортно скользить по строчкам, не отвлекаясь на многочисленные перестройки (отсутствие выравнивания прозаического текста по правому краю делает строчки "разнодлинными", что существенно напрягает восприятие). И я поставил себе мутную цель
"чёбы красиво",
которую худо-бедно решил, но иногда незначительно улучшаю её новые реализации, узнавая новые хтмл-ные фишки (короче, открываю Америки и изобретаю велосипеды). (С.Панарин)"
  
  5.5.< p align="justify">АБЗАЦ< /p> - выравнивание абзаца по обоим краям.

"Когда я в 2001 пришёл на Самиздат и начал читать выложенные здесь произведения, мне не понравилось несколько "чисто верстальных" моментов, которые мешали привыкшему к книжкам взгляду комфортно скользить по строчкам, не отвлекаясь на многочисленные перестройки (отсутствие выравнивания прозаического текста по правому краю делает строчки "разнодлинными", что существенно напрягает восприятие). И я поставил себе мутную цель "чёбы красиво", которую худо-бедно решил, но иногда незначительно улучшаю её новые реализации, узнавая новые хтмл-ные фишки (короче, открываю Америки и изобретаю велосипеды). (С.Панарин)"

  
  5.6. < blockquote>АБЗАЦ< /blockquote> - делаем абзацу поля
  
"Когда я в 2001 пришёл на Самиздат и начал читать выложенные здесь произведения, мне не понравилось несколько "чисто верстальных" моментов, которые мешали привыкшему к книжкам взгляду комфортно скользить по строчкам, не отвлекаясь на многочисленные перестройки (отсутствие выравнивания прозаического текста по правому краю делает строчки "разнодлинными", что существенно напрягает восприятие). И я поставил себе мутную цель "чёбы красиво", которую худо-бедно решил, но иногда незначительно улучшаю её новые реализации, узнавая новые хтмл-ные фишки (короче, открываю Америки и изобретаю велосипеды). (С.Панарин)
  
  5.7.Если вы хотите, чтобы текст шел на цветном фоне, придется поместить его в таблицу:
  < table border="0" width="100%" bgcolor="#f2ddc6"> < tr> < td>Текст< /td> < /tr> < /table> - это простейшая таблица без рамки, с одной ячейкой, растянутой на всю ширину окна. Цвет фона - кремовый.
  
"Когда я в 2001 пришёл на Самиздат и начал читать выложенные здесь произведения, мне не понравилось несколько "чисто верстальных" моментов, которые мешали привыкшему к книжкам взгляду комфортно скользить по строчкам, не отвлекаясь на многочисленные перестройки (отсутствие выравнивания прозаического текста по правому краю делает строчки "разнодлинными", что существенно напрягает восприятие). И я поставил себе мутную цель "чёбы красиво", которую худо-бедно решил, но иногда незначительно улучшаю её новые реализации, узнавая новые хтмл-ные фишки (короче, открываю Америки и изобретаю велосипеды). (С.Панарин)"
  
  5.8.Если вы переводите с иностранного на русский (либо наоборот), и хотите, чтобы колонки располагались рядом (на самом деле это таблица из трех блоков):
  
  < table border=0 cellspacing=0 cellpadding=0>
  < tr>
  < td width=50% valign=top>< font color="560319">
  < dd>The lady in red is dancing with me
  < dd>Cheek to cheek
  < dd>There's nobody here
  < dd>It's just you and me
  < /font>< /td>
  < td width=10% valign=top >
  < /td>
  < td width=50% valign=top >< font color="560319">
  < dd>Леди в красном танцует со мной,
  < dd>Щека к щеке -
  < dd>И никого больше нет -
  < dd>Здесь только мы с тобой.
  < /font>< /td>
  < /tr>
  < /table>
The lady in red is dancing with me
Cheek to cheek
There's nobody here
It's just you and me
Леди в красном танцует со мной,
Щека к щеке -
И никого больше нет -
Здесь только мы с тобой.
  
  к оглавлению
  
  
  6. "Пробежимся" по тексту:
  
  6.1.Линии
  6.1.1. Обычная горизонтальная линия:
  < hr>
  
  6.1.2. Линия с заданными параметрами:
  
  align - выравнивание, может принимать значения left, right и center. По умолчанию center.
  width - ширина линии, может задаваться в % (относительная величина) и в пикселях (абсолютная величина). По умолчанию 100%.
  size - толщина линии, задается в пикселях. По умолчанию 2 пикселя.
  noshade - отмена объемности (без значений). По умолчанию линия объемна.
  color - цвет линии, (если задан цвет, то автоматически пропадает объемность). По умолчанию цвет такой же, как и цвет фона, рамка вокруг линии серая.
  
  < hr align="left" size="10" width="200"> - линия слева, толщиной 10 пикселей и шириной 200 пикселей;
  
  < hr align="right" size="6" width="75%" noshade> - линия справа, толщина 6 пикселей, ширина 75% от ширины экрана, без объема (белый центр закрашивается в цвет рамки, т.е.в серый)
  
  < hr color="#6600ff"> - стандартная линия с заданным цветом
  
  < hr size="13" width="45%" color="#a73700"> - линия по умолчанию отцентрована, толщина 13 пикселей, ширина 45% от ширины экрана, цвет ржаво-коричневый
  
  
  6.2.Бегущая строка
  < marquee>Бегущая строка< /marquee>
  Бегущая строка влево
  
  Атрибут behavior устанавливает способ движения содержимого. Возможные значения:
  alternate - контент перемещается между правым и левым краем элемента.
  < marquee behavior="alternate">Туда и обратно< /marquee>
  Туда и обратно
  
  slide - контент перемещается в заданном направлении, доходит до края области и останавливается.
  < marquee behavior="slide">Идем и останавливаемся< /marquee>
  Идем и останавливаемся
  
  Атрибут direction указывает направление перемещения: left (по умолчанию), right, up и down.
  < marquee direction="down">Ползем сверху вниз< /marquee>
  Ползем сверху вниз
  
< marquee direction="right">Ползем направо< /marquee>
   Ползем направо
  
< marquee direction="up">Ползем снизу вверх< /marquee>
  Ползем снизу вверх
  
❁ Прикольно, правда? ツ
  
  к оглавлению
  
  
  7. Списки:
  
  7.1. Упорядоченные списки (с нумерацией):
  
  Упорядоченный список задается тэгом < ol> ... < /ol>. Элементы списка прописываются после тэга < li>. Кроме того в данном теге < ol> можно прописать дополнительный параметр:
  start - определяет число, с которого начинается нумерация пунктов списка. Может принимать только целые значения, в том числе и отрицательные (дробные значения браузер превратит в целые). По умолчанию start="1"
  В теге < li> также есть доп.вложения:
  value - изменяет порядок нумерации элементов списка, начиная с того, где был задан этот параметр. Действует до конца списка, либо до тех пор, пока снова не встретится параметр value, опять изменяющий нумерацию.
  type - изменяет тип нумерации, действует только на конкретный пункт, и имеет следующие значения:
  A - заглавные латинские буквы (A, B, C...)
  a - строчные латинские буквы (a, b, c...)
  I - большие римские цифры (I, II, III...)
  i - маленькие римские цифры (i, ii, iii...)
  1 - обычные цифры (1, 2, 3...)
  По умолчанию type="1".
  
 Пример: задаем списку нумерацию строчными латинскими буквами и нумерация начинается с пятого пункта
  
  < ol type="a" start="5">
  < li>морковь
  < li>капуста
  < li>картофель
  < /ol>
      
  1. морковь   
  2. капуста   
  3. картофель
  
  7.2. Неупорядоченные списки (без нумерации):
  
  Неупорядоченный список задается тэгом < ul> ... < /ul>. Элементы списка прописываются после тэга < li>. Параметр у тэга < ul> один:
  type - определяет тип маркера перед пунктами, может принимать значения:
    disc - закрашенный кружок
    circle - незакрашенный кружок
    square - закрашенный квадрат
  По умолчанию type="disc".
  В неупорядоченном списке тэг < li> может иметь параметр type, таким образом, каждому элементу списка будет назначен свой тип маркера. Используя стили (CSS), можно вообще назначить маркером какой-либо рисунок или отказаться от маркирования.
  
  Пример:
  < ul type="circle">
  < li>незакрашенный кружок
  < li type="disc">закрашенный кружок
  < li type="square">закрашенный квадрат
  < /ul>
  Списки выводятся браузером с новой строки. Элемент, следующий за списком, тоже выводится с новой строки. Слева, сверху и снизу от списка имеется некоторый отступ.
  Списки могут быть вложенными. Вложенность не ограничена. Элемент списка сам может быть списком. При этом у вложенного неупорядоченного списка < ul> есть такая особенность: типы маркеров меняются в зависимости от уровня вложенности.
  Вложенности нет, по умолчанию type="disc".
  1-й уровень вложенности, type="circle".
  2-й уровень вложенности, type="square".
  3-й уровень вложенности, что, опять disc? Не-а, type="square". Как ни крути.
  Кстати, неважно куда вложен список, в < ul> или < ol>, главное, что он - вложен.
  А еще список вообще можно построить без всяких там < ol> и < ul>, вот так:
      < li>элемент списка
      < li>
      < li>элемент списка   
  • элемент списка   
  •   
  • элемент списка
      Вот только в этом случае никаких отступов не будет, и список получится неупорядоченный, промаркированный закрашенными кружочками. Если же мы хотим вовсе не кружочки, а квадратики, то придется прописывать параметр type для каждого тэга < li>. Также обратите внимание, что совсем необязательно писать что-либо после тега < li>. В таком случае элемент нашего списка будет пуст, но тоже промаркирован.
      
      к оглавлению
      
      
      8. Размещение картинок и иллюстраций:
      
      8.1.Журнал "Самиздат" позволяет разместить картинки и иллюстрации к произведениям в форматах .jpg и .gif непосредственно в самом тексте произведения, либо в аннотации к произведению. Делается это в три этапа:
      1. Сперва разместить само произведение.
      2. Войти в его "Редактирование"(Edit), перейти по линку "Загрузить Иллюстрации" на форму закачки иллюстраций, и закачать графические файлы по одному, или оптом в виде архива.
      3. Перейти на TextEdit - редактирование текста произведения, и в соответствующих местах расставить html-вызовы картинок в виде:
       < img src="Адрес картинки, который начинается с букв: http: "> и нажать "Store body"
      Теперь при включенной поддержке графики (в браузере читателя) картинки будут автоматически закачиваться в текст.
      
      8.2.Если же вы хотите, чтобы картинка обтекалась текстом, то необходимо добавить еще кое-что:
      8.2.1. Текст справа, изображение слева - < img src="/img/e/elx_l/1/knizhka2.jpg" hspace=10 vspace=10 align=left />, где
      hspace=10 - отступ по горизонтали
      vspace=10 - отступ по вертикали
      align=left - расположение картинки слева от текста
    Я не знаю, когда именно это началось, наверное, это было всегда... Раз за разом повторяющийся сон. Темный коридор, длинною в жизнь и картины... картины-картины-картины... Лесные пейзажи, города, поля, море... Величественные замки, скромные хибары... Широкие улицы, узкие проулки... Яркие, шумные ярмарки и тихие скверы...
    Шесть ночей в месяц - три пока длилось полнолуние и три в новолуние, я видела этот сон. Каждый раз один и тот же. Темный неширокий, но нескончаемый коридор, каменный пол, стены из плохо обработанного камня, и огромные картины на обеих стенах, начинающиеся прямо от пола. Не меньше двух метров в высоту, не менее полутора в ширину...
      8.2.2. Текст слева, изображение справа - < img src="/img/e/elx_l/1/knizhka2.jpg" hspace=10 vspace=10 align=right />, где
      align=right - расположение картинки справа от текста
    Я не знаю, когда именно это началось, наверное, это было всегда... Раз за разом повторяющийся сон. Темный коридор, длинною в жизнь и картины... картины-картины-картины... Лесные пейзажи, города, поля, море... Величественные замки, скромные хибары... Широкие улицы, узкие проулки... Яркие, шумные ярмарки и тихие скверы...
    Шесть ночей в месяц - три пока длилось полнолуние и три в новолуние, я видела этот сон. Каждый раз один и тот же. Темный неширокий, но нескончаемый коридор, каменный пол, стены из плохо обработанного камня, и огромные картины на обеих стенах, начинающиеся прямо от пола. Не меньше двух метров в высоту, не менее полутора в ширину...
      8.2.3. Расположение картинки в центре текста - Текст до картинки < img src="/img/e/elx_l/1/knizhka2.jpg" align=middle/> Текст после картинки, где
      align=middle - расположение картинки в центре текста, но без обтекания
    Я не знаю, когда именно это началось, наверное, это было всегда... Раз за разом повторяющийся сон. Темный коридор, длинною в жизнь и картины... картины-картины-картины... Лесные пейзажи, города, поля, море... Величественные замки, скромные хибары... Широкие улицы, узкие проулки... Яркие, шумные ярмарки и тихие скверы...
    Шесть ночей в месяц - три пока длилось полнолуние и три в новолуние, я видела этот сон. Каждый раз один и тот же. Темный неширокий, но нескончаемый коридор, каменный пол, стены из плохо обработанного камня, и огромные картины на обеих стенах, начинающиеся прямо от пола. Не меньше двух метров в высоту, не менее полутора в ширину...
      8.2.4. Расположение текста между двумя картинками - < img align="left" valign="middle" src="/img/e/elx_l/1/knizhka3.jpg"> < img align="right" valign="middle" src="/img/e/elx_l/1/knizhka2.jpg"> Текст между картинками
    Я не знаю, когда именно это началось, наверное, это было всегда... Раз за разом повторяющийся сон. Темный коридор, длинною в жизнь и картины... картины-картины-картины... Лесные пейзажи, города, поля, море... Величественные замки, скромные хибары... Широкие улицы, узкие проулки... Яркие, шумные ярмарки и тихие скверы...
    Шесть ночей в месяц - три пока длилось полнолуние и три в новолуние, я видела этот сон. Каждый раз один и тот же. Темный неширокий, но нескончаемый коридор, каменный пол, стены из плохо обработанного камня, и огромные картины на обеих стенах, начинающиеся прямо от пола. Не меньше двух метров в высоту, не менее полутора в ширину...
      
      
      8.3. Если мы хотим, чтобы у картинки было имя, то < img src="/img/e/elx_l/1/g4amykj--s0.jpg" title="Похимичим?"> используем тег title - задаёт название (описание) картинки. Работает, если ваш посетитель наведёт мышку на картинку и подержит несколько секунд. В нашем конкретном примере появится надпись "Похимичим?". Обычно рекомендуется задавать атрибут title, если Ваша картинка является ссылкой (кнопкой).
      
      8.4. Если мы хотим, чтобы у картинки была рамка, то
      < img src="/img/e/elx_l/1/knizhka2.jpg" border="5">
      border - тег, задающий рамку, "5" - ширина рамки в пикселях,
      
      По умолчанию цвет рамки будет черным, чтобы изменить его средствами HTML, делаем следующее:
      < font color="#560319"> < img src="/img/e/elx_l/1/knizhka2.jpg" border="5"> < /font>
      
      Кроме всего прочего существует великое множество графических редакторов, которые справятся с этой задачей на раз-два. Делаете рамку там и сюда вставляете уже с рамкой.
      
      
      8.5. Если мы хотим, чтобы картинка стала фоном главной странички:
      
      < body background=http://samlib.ru/img/e/elx_l/fignya/mram88.jpg>
      Как вы заметили на моей страничке основной фон - это мрамор цвета охры. Чтобы это стало возможным, вставляем данный тег в [Сведения о разделе] в окошко [Аннотация], причем ДО текста.
      В случае, если хотите поменять не только основной фон, но и цвет текста ГЛАВНОЙ странички и все такое прочее, то загляните на страничку Дикой Яблони. Тут все очень подробно и с примерами.
      
      8.6. Если мы хотим, чтобы картинка стала фоном под текст:
      
      Иногда нам кажется, что белый фон слишком уныл и стандартен и тогда возникает мысль его "облагородить". Сама я не программист, (ни в коем разе!), поэтому воспользовалась готовыми разработками, а посмотреть "как и что", можно на страничке Дикой Яблони
      Ну а воплощенные мною примеры вот здесь:
      Подложка в виде пергаментного свитка
      Подложка в виде обгоревшей бумаги
      Подложка в виде листика из блокнота
      Подложка в викторианском стиле
      Подложка в стиле Арт Нуво
      Подложка в кельтском стиле
      
      к оглавлению
      
      
      9. Создаем ссылки:
      
      9.1. Иногда очень хочется послать ближнего своего по интересному адресу... И дабы этот самый ближний до последнего не понял, куда же его посылают, мы создаем интригующую ссылочку:
      < a href="Наименование сайта, либо странички, куда отправляем">Нажми сюда< /a>
      
    Нажми сюда
      
      9.2.Кроме того, вместо слов можно вставить картинку и уже при нажатии на нее, мы отправимся туда, куда нас послали:
      < a href="Наименование сайта, либо странички, куда отправляем" >< img src="/img/e/elx_l/1/knizhka3.jpg" >< /a >
      
      Да, кстати, я еще и отцентровала все это добро)
      
      9.3. Также немаловажным элементом являются внутритекстовые ссылки. Для примера я взяла оглавление данного опуса:
      
      1. Изменение шрифта
      2. Изменение размера шрифта
      3. Изменение цвета шрифта
       ну и так далее...
      
      Как выглядит код:
      
      < a href="#ab1">1. Изменение шрифта < /a>
      < a href="#ab2">2. Изменение размера шрифта < /a>
      < a href="#ab3">3. Изменение цвета шрифта < /a>
      
      Естественно элемент "#ab1" должен быть уникальным для каждого случая
      
      Данные ссылки отправляют нас непосредственно туда, где прописан следующий HTML код:
      < a name="ab1">< /a> 1. Изменение шрифта (и далее по тексту абзац, повествующий нам о способах изменения шрифта)
      < a name="ab2">< /a> 2. Изменение размера шрифта (и далее по тексту абзац, повествующий нам о способах изменения размера шрифта)
      < a name="ab3">< /a> 3. Изменение цвета шрифта (и далее по тексту абзац, повествующий нам о способах изменения цвета шрифта)
      
      P.S. За помощь в грамотной реализации этого пункта благодарю VladTS
      
      к оглавлению
      
      
      10. Создаем сноски:
      
      Многие из вас, читая грамотно оформленные тексты замечали, что после незнакомого слова порой стоит циферка, нажав на которую вы переносились в самый конец текста, и эта самая циферка объясняла нам значение этого незнакомого слова.
      Это была так называемая "сноска". Сноска - это дополнительный текст, помещаемый в самом низу страницы под основным текстом и отделенный от него чертой. Сноска может содержать примечания к основному тексту, переводы иноязычного текста, библиографические ссылки и пр.
      Рассмотрим, как она обычно выглядит в тексте, а затем раскроем секрет ее создания (для примера использован кусочек романа "Киса для дочи или Зачем маме хвост?":
      
      
      - В общем так, смертнички [1], смотрим сюда. Видим вот этих бравых пятнистых ребят? Отлично! Всех запомнили? Еще лучше! Так вот - сейчас, после выдачи маркеров [2], мы пройдем за защитный круг и они начнут вас убивать. Цинично и жестоко. Ваша задача... Меня слушаем! Ваша задача - продержаться семь минут и не дать захватить им флаг. - Представительный мужчина с пузиком, одетый в черный балахон и черную пейнтбольную [3] маску, изображал Дарта Вейдера [4] и по совместительству являлся руководителем нашего клуба. Пейнтбольного клуба.
      Далее следует остальной текст порядка 1000 кило...
      ...конец.
      ___________________________
    1. ↑ Смертник. Тот, кто обречен или обрекает себя на близкую смерть.
    2. ↑ Маркер. Оружие, используемое в спортивной игре пейнтбол. Стреляет шариками, покрытыми желатиновой оболочкой, с краской.
    3. ↑ Пейнтбол. Командная игра с применением маркеров, стреляющих шариками с краской, разбивающимися при ударе о препятствие и окрашивающими его.
    4. ↑ Дарт Вейдер. Энакин Скайуокер, он же Дарт Вейдер - центральный персонаж Вселенной "Звёздных войн", главный герой киноэпопеи "Звёздные войны". После перехода на Тёмную сторону Силы принял имя Дарта Вейдера.
      
      Посмотрим, как выглядит данный HTML код:
      
      - В общем так, смертнички < sup id="ref_1">< a href="#note_1">[1]< /a>< /sup>, смотрим сюда. Видим вот этих бравых пятнистых ребят? Отлично! Всех запомнили? Еще лучше! Так вот - сейчас, после выдачи маркеров < sup id="ref_2">< a href="#note_2">[2]< /a>< /sup>, мы пройдем за защитный круг и они начнут вас убивать...
       ___________________________
      < ol>
      < li id="note_1">< a href="#ref_1">↑< /a> Смертник. Тот, кто обречен или обрекает себя на близкую смерть. < /li>
      < li id="note_2">< a href="#ref_2">↑< /a> Маркер. Оружие, используемое в спортивной игре пейнтбол. Стреляет шариками, покрытыми желатиновой оболочкой, с краской. < /li>
      < /ol>
      
      
      А теперь разберем поподробнее:
      < sup id="ref_1">< a href="#note_1">[1]< /a>< /sup>
      sup - приподнимает текст сноски;
      id - задает уникальный указатель, чтобы из поля сносок можно было вернуться в то же самое место текста;
      a href="#note_1" - задает ссылку на сноску с уникальным номером.
      Насколько вы заметили, ссылки пронумерованы от 1 до 4 и номера не повторяются. При желании и необходимости нумерация продолжается до победного ;-)
      ol - создает пронумерованный список ссылок
      li id="note_1" - задает элемент списка и уникальный указатель на него;
      a href="#ref_1" - создает ссылку, отправляющую обратно на то место, откуда перешел читатель;
      ↑ - просто стрелочка. Можете вставить любой символ по вашему желанию, нажав на который вы отправитесь обратно в то самое место текста, откуда спустились.
      
      P.S. За помощь в грамотной реализации этого пункта благодарю VladTS
      
      к оглавлению
      
      
      11. Ну и напоследок немного забавностей. Символы, которых нет на клавиатуре, но иногда очень хочется:
      
      просто копируем и вставляем в текст (на моей страничке символы максимального седьмого размера, чтобы их было видно "во всей красе")
      
      Сердечки:
      ღ ❥ ❤ ♥ ♡❣ ❢ ❦ ❧
      Крестики, снежинки, звездочки, цветочки:
      ✗ ✘ ✙ ✚ ✛ ✜ ✝ ✞ ✟ ✠ ✡ ✕ ✖ ✣ ✤ ✥ ❖ ✦ ✧ ☩ ☥ ☦ ☨ ⌖ ༒ ༓ ✱ ✲ ✳ ✴ ✵ ✶ ✷ ✸ ✹ ✺ ✻ ✼ ✽ ✾ ✿ ❀ ❁ ❂ ❃ ❊ ❄ ❅ ❆ ❇ ❈ ❉ ❊ ❋ ✩ ✪ ✫ ✬ ✭ ✮ ✯ ✰ ҈ ҉
      Весёлые мордочки:
      ☻ ☺ ソ ッ ヅ ツ ゾ シ ジ ټ ͡๏̯͡๏ ͡๏̮͡๏ ٩(̾●̮̮̃̾̃̾)۶
      Знаки зодиака:
      ♈ ♉ ♊ ♋ ♌ ♍ ♎ ♏ ♐ ♑ ♒ ♓
      Погода и природа:
      ☀ ☁ ☂ ☃ ☼ ☽ ★ ☆ ☾ ℃ ℉ ﻩﻩﻩ*๑ϟ ⁂
      ʘ ♂ ♁ ♀ ☿ ♃ ♄ ♅ ♆ ♇
      Шахматы:
      ♔ ♕ ♖ ♗ ♘ ♙ ♚ ♛ ♜ ♝ ♞ ♟
      Масти:
      ♠ ♤ ♥ ♡ ♦ ♢ ♣ ♧
      Нотные знаки:
      ♩ ♪ ♫ ♬ ♭ ♮ ♯
      Знаки:
      ●  ❍ ø ■ ▪ ▫ □ ❏ ☯ ☮ ✇ ☭ ☄ ☣ ☢ ☸ ☠ ☪ ۞ ✡ ⌘ ☤ ☬ ☫ 〄 ※ ⊕ ⊗ Ⓐ R No T ⚠ � ۩ ￥ ￡ ￦ $ ₵ ₠ ₢ ₡ ₱ ₮ ₦ ₳ ✆ ☎ ☏ ✈ ✐ ✑ ✒ ✂ ✉ ✔ ✓ ✕ ✖ ✗ ✘ ☐ ☑ ☒ □ ▣ ▤ ▥ ▦ ▧ ▨ ▩ Ç ҉ ☜♡☞
      Стрелки:
      ▲ △ ▶ ▷ ▼ ∇ ▽ ◀ ◁ ⊲ ⊳ ⌫ ⌧ ⌦ ➢ ➣ ➤ ⋞ ⋟ ⋨ ⋩ ⋪ ⋫ ⋬ ⋭ ≪ ≫ ⋖ ⋗ ↔ ↕ ← ↖ ↑ ↗ → ↘ ↓ ↙ ⇦ ⇧ ⇨ ⇩⇐ ⇑ ⇒ ⇓ ⇔ ⇕ ⇖ ⇗ ⇘ ⇙ ⇚ ⇛ ⇄ ⇅ ⇆ ⇇ ⇈ ⇉ ⇊ ↰ ↱ ↲ ↳ ↴ ↵ ↶ ↷ ➜ ➡ ➨ ☇ ⃔⃕ ↜ ↝ ↫ ↬ ↺ ↻ ➛ ➠ ➻ ➲ ￩ ￫ ➴ ➶ ➳
      
      к оглавлению
      
      
      12. Источники
      
      Данное безобразие наваялось благодаря честно стыреным работам таких людей и сайтов, как:
      
      1. Igorz. Краткая справка по Html-тегам, работающим на Самиздате
      2. Способы размещения текстов и оформления раздела на сайте "Самиздат"
      3. Как верстаться в Самиздате, или Дилетантский Html
      4. Белоглазов Артем Ирекович. Html и Самиздат
      5. Как вставить картинку в HTML страничку?
      6. Изображения в HTML
      7. Дикая Яблоня. Оригинальное оформление ваших текстов. Готовые коды
      8. Копилка интересностей
      
      
    P.S. Что бы вы ни натворили, обязательно проверьте, что получилось в результате.
    P.P.S. Умеренность и скромность украшают... Но это не про нас, однозначно!
      
    Связаться с программистом сайта.

    Новые книги авторов СИ, вышедшие из печати:
    О.Болдырева "Крадуш. Чужие души" М.Николаев "Вторжение на Землю"

    Как попасть в этoт список

    Кожевенное мастерство | Сайт "Художники" | Доска об'явлений "Книги"