• 10.12.2016, 03:58:05 *
  • Добро пожаловать, Гость
Пожалуйста, войдите или зарегистрируйтесь.

Расширенный поиск  

Новости:

В связи с просьбой представителя Opera Software к нашей команде, мы вынуждены запретить обсуждение и наличие неофициальных сборок на нашей конференции.
Сборка в данном виде нарушает новое лицензионное соглашение Opera Software, и команда AC Team не будет нести ответственность за эти нарушения.

Тема, посвящённая OperaAC_Unofficial закрыта, также и другие темы касающиеся данной сборки будут закрываться без предупреждения.

collapse
* Голосование
  • Нравится ли Вам Opera AC?
  • Dot Конечно, она просто супер!
  • 1585 (77%)
  • Dot В целом да, но много лишнего..
  • 365 (17%)
  • Dot Для ознакомительных целей
  • 62 (3%)
  • Dot Нет
  • 23 (1%)
  • Dot А что это такое?
  • 20 (0%)
  • Проголосовало пользователей: 2009
  • Смотреть тему

Реклама:

Автор Тема: Работа с тэгами (а иначе зачем нужна эта ветка?)  (Прочитано 5173 раз)

0 Пользователей и 1 Гость просматривают эту тему.

GrocKHeLL

  • Пользователь
  • **
  • Репутация: 1
  • Оффлайн Оффлайн
  • Сообщений: 18
  • Версия OAC: 3.6.6
Зашел я как то раз на эту ветку форума и ужаснулся: такое многообещающее название, а внутри пусто. Вот и решил я тут выложить кое то интересное по HTML-тэгам. Пока только выкладываю возможные тэги языка HTML. Если есть кому что дополнить и написать - буду только рад. При поступлении новой информации буду стараться добавлять ее в первый пост.

 Итак, поехали:

HTML Тэги. Форматирование шрифта.
<b Полужирный текст /b>
<i Выделение текста курсивом /i>
<u Подчёркнутый текст /u>
<s Зачёркнутый текст /s>
Маленький шрифт
Большой шрифт

Знак сноскисверху или индексснизу от текста

<acronym title="Всплывающая подсказка">Текст со всплывающей подсказкой

<font style="font-size:16pt;">Шрифт размером 16 пикселей</font>


Предопределённые размеры шрифта (могут быть от 1-го до 7-го):

<font size="3">рифт 3-го размера</font>

<font size="+1">Шрифт на 1 размер больше обычного</font>


Заголовок 2-го размера

[/h2]

<font style="font-family:Comic Sans Ms;">Шрифт Comic Sans Ms</font>
<font style="font-family:Monotype Corsiva;">Шрифт Monotype Corsiva</font>

<font style="font-family:Tahoma; font-size:15pt;">Tahoma, 15 пикселей</font>      

<font color="#0000ff">Синий текст</font>

Цифра 0000ff означает синий цвет в RGB палитре.
Также можно пользоваться стандартными словесными обозначениями цветов вот так:

<font color="red">Красный текст</font>

У фона тоже можно менять цвет, вот так:

<div style="background-color:#eeeeff;">голубой фон</div>

<div style="background-color:lightgray; color:#0000ff;">синий текст, серый фон</div>

Обратите внимание на синтаксис. Аттрибут style использует синтаксис CSS.


Вот некоторые предопределённые цвета:

    Black White Red Green Blue Purple Firebrick Maroon OrangeRed MidnightBlue CornflowerBlue Cyan Yellow Magenta DarkGreen DarkGoldenrod Gold Orchid BlueViolet Burlywood PeachPuff

В шестнадцатиричном коде указывающем интенсивность красного, зелёного и синего (RRGGBB):

    #000000 #FFFFFF #FF0000 #00FF00 #0000FF #FF00FF #FF4444 #FF9999 #FFCCCC #9999FF #FF99FF #DDDDDD #FFE4C4 #CCCC99 #FF8DC #FA8072 #990000 #FF3030 #000080 #000066 #0000CD #AFEEEE #006400 #66FF00 #00B800 #DAA520 #FFCC33 #FFA500 #C71585 #8B008B #CC33FF


HTML Тэги. Форматирование параграфов.
Оформить отступы абзацев, легко:

   

    Процитированый в отдельном блоке текст
    у которого будет
    небольшой отступ слева.
   



<p style="text-indent: 40px">
<div style="float:right; margin:8px; padding:6px; border:1px solid #bbbbbb; width:400px;">
Я врезаный, обтекающий другим текстом, текст с правого краю с выравниванием слева, с серой рамкой и отступом от рамки снаружи в 8 пикселей
</div>
1. Этот блок вставлен в текст слева перед (!) словом «Привет!»
2. Если блок внутри lj-raw, то переносы строк нужно указывать тэгом

Привет! В этом абзаце первое предложение будет с красной строки, т.е. с отступом. Прямо как в книгопечати. Правда, в интернете это редкая практика. Абзацы должны разделяться просто пустым промежутком.



<div style="width:300px;">Опачки! Этот абзац будет написан с фиксированой шириной в 300 пикселей. Узенько так типа. А если добавить style="width:300px; float:right;" тогда он ещё и будет висеть справа. Смотрите пример чуть ниже.</div>

Преформатированый текст
    сохраняет отступы слева и   между  словами
             и устанавливает те что вы укажите пробелами.
             NB! тэг не делает переноса строки автоматом!



отцентрированый текст


<div align=right>[div align=right]
текст с правого краю
в две строчки с выравниванием справа
[/div]</div>

<div style="float:right;">
текст с правого краю
в две строчки с выравниванием слева
</div><br clear=all>


<marquee>бегущая влево строка</marquee>
<marquee direction="right">бегущая вправо строка</marquee>
<marquee behavior="alternate">бегущая от края к краю строка</marquee>
<marquee direction="up" scrollamount="1" scrolldelay="0" height="32"> скролящийся вверх
текст с полезной
информацией
или ещё какой-то ерундой </marquee>

<marquee direction="down" scrollamount="1" scrolldelay="0" height="32"> или ещё какой-то ерундой
информацией
текст с полезной
скролящийся вниз </marquee>


» Как вместо ката сделать вертикальную перемотку большого текста?

<div style="overflow:auto; height:80px; width:500px; padding:8px; border:1px solid #ccc;">
Лорем ипсум долор сит амет, консектетур адиписицинг элит, сед до эиусмод темпор инцидидунт ут лаборе эт долоре магна аликуа. Ут эним ад миним вениам, кьюс ноструд эксерцитатьён ульламко лаборис ниси ут аликуип экс эа коммодо консекуат. Дьюс ауте ируре долор ин репрехендерит ин волуптате велит эссе киллум долоре эу фугиат нулла париатур. эксцептеур синт оккаекат купидатат [info]alex_inside нон пройдент, сунт ин кульпа куй оффициа десерунт моллит аним ид эст лаборум.
</div >

Если надо HTML-код вставить, показать кому-то, то то же самое можно сделать

<textarea cols="80" rows="5">
Текст без html, шириной в 80 символов и высотой в 5 строк. Даже скроллить можно, круто, да!? А html не работает. Но лучше используйте div из предыдущего примера, если нужна просто прокрутка...
</textarea>


Специальные тэги HTML теги
Чтобы ширина окна браузера не влияла на переносы текста:
<nobr>этот текст будет всегда в одну строку</nobr>

<blink>мигающий текст</blink> — не используйте этот тэг :)

Чтобы между двумя словами не&nbsp;было переноса, можно поставить между ними неразрывный&nbsp;пробел.

<br
— перенос строки.

<hr
— линия на всю ширину экрана, вот такая:


HTML Тэги. Форматирование списков.

  • Один из пунктов несортированого списка
  • Другой такой пункт

    Добавляем тэг ol по краям и список становится сортированым автоматически:

    1. Один из пунктов несортированого списка
    2. Другой такой пункт


  • HTML Спец. Символы.
    Код   Символ     Для набора на клавиатуре нажмите*
    &laquo;      «   ALT+0171
    &raquo;      »       ALT+0187
    &mdash;  —   ALT+0151
    &copy;     ©   ALT+0169
    &reg;     ®   ALT+0174
    trade;     ™   ALT+0153
    38;#0047    ;   /   
    &lt;     <   
    &gt;    >   
    nbsp;       ALT+0160 — неразрывный пробел**
       

    * - Зажмите кнопку ALT; наберите код; отпустите ALT. Работает в винде.
    ** - Вставьте вподряд несколько таких пробелов чтобы они не сливались в один:
    &nbsp; &nbsp; &nbsp; — теперь слева отступ в семь пробелов!

    Кстати, чтобы HTML код был как обычный текст, перед тем как писать, откройте Windows Notepad,
    вставьте ваш HTML-код, выберите автозамену (Ctrl+H) и замените все < на &lt; (и по желанию все > на &gt;) Получится  &lt;b&gt;полужирный&lt;/b&gt;  или  &lt;b>полужирный&lt;/b>  вместо  полужирный

    А чтобы ссылка на какую-то страницу не была активной, например http://alex-inside.ru , нужно писать http:/&#38;#0047;alex-inside.ru

    HTML Тэги. Ссылки. Линки.
    Линк на сайт куда можно залить фотки!

    Открыть ссылку в новом окне:
    Линк на сайт куда можно залить фотки!

    Всплывающая подсказка при наведении курсора на ссылку:
    Залить фотки

    Картинка-ссылка (баннер):


    Кнопка-ссылка (форма):

    <form action="http://alex-inside.ru/" target="_blank"<input type=submit value="Зайти на alex-inside.ru"></form>

    (Аттрибут target="_blank" — открывает ссылку в новом окне. Если это не нужно, удалите этот атрибут.)

    HTML Тэги. Картинки.

    http://img241.echo.cx/img241/5329/northpolesun5pw.jpg" height="500px" — ограничение по высоте

    » Изображение со всплывающим текстом при наведении на него курсора:
    <img src="http://img241.echo.cx/img241/5329/northpolesun5pw.jpg" title="Этот текст появится при навелении курсора на картинку!" alt="А этот при её отсутсвии" border="0" />

    » Изображаение придвинутое влево, текст обтекает картинку справа и имеет горизонтальный отступ от неё в 6 пикселей:
    текст

    <div style="background: url(http://images18.fotki.com/v331/photos/4/442291/3055927/copyright-vi.gif) no-repeat top left;">
    Пишем текст поверх картинки.
    Старайтесь это никогда не использовать,
    потому что данный способ часто затрудняет
    читаемость текста, в зависимости от картинки.
    </div>


    » Картинка с прокруткой (скроллящаяся):


    <div style="overflow: scroll; width:400px;"></div>
    (Отображаемую ширину указываем внешнему div-контейнеру в атрибуте width в пикселях. Для вертикальной прокрутки, указываем высоту height. Ширина и высота должна быть меньше чем у картинки.)

    Послесловие Частые ошибки при написании тэгов:
    Не ставьте пробел после открывающей угольной скобки «<».
    Атрибуты тэгов должны разделяться пробелом.
    Ставьте пробел после закрывающей кавычки в атрибутах:
    Кавычки в атрибутах ставить не обязательно, но если вы их и поставили, то уж постарайтесь закройте.
    « Последнее редактирование: 24.06.2009, 14:32:18 от GrocKHeLL »
    Записан
     




    Реклама:

    Счетчик

    Страница сгенерирована за 0.1 секунд. Запросов: 36.