ВНИМАНИЕ: Если будете копировать Html-теги непосредственно отсюда, то не забывайте удалять лишние пробелы, которые у меня стоят после "<"! Статья (да и я сама) пока в процессе, поэтому пока только так
6.1. Линии
6.2. Бегущие строки
7.1. Упорядоченные
7.2. Неупорядоченные
Экспериментируйте! | "Когда я в 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>
|
|
|
к оглавлению
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>
- морковь
- капуста
- картофель
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 кило...
...конец.
___________________________
- ↑ Смертник. Тот, кто обречен или обрекает себя на близкую смерть.
- ↑ Маркер. Оружие, используемое в спортивной игре пейнтбол. Стреляет шариками, покрытыми желатиновой оболочкой, с краской.
- ↑ Пейнтбол. Командная игра с применением маркеров, стреляющих шариками с краской, разбивающимися при ударе о препятствие и окрашивающими его.
- ↑ Дарт Вейдер. Энакин Скайуокер, он же Дарт Вейдер - центральный персонаж Вселенной "Звёздных войн", главный герой киноэпопеи "Звёздные войны". После перехода на Тёмную сторону Силы принял имя Дарта Вейдера.
Посмотрим, как выглядит данный 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. Копилка интересностей
|