Форум поддержки пользователей ZeroParking

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Форум поддержки пользователей ZeroParking » Полезная информация » HTML Тэги | Форматирование текста | Вставка картинок и ссылок | <

HTML Тэги | Форматирование текста | Вставка картинок и ссылок | <

Страница: 1

Сообщений 1 страница 5 из 5

1

  • Автор: Lonely_wolf
  • Помощник ZeroParking
  • Lonely_wolf
  • Откуда: Сургут
  • Зарегистрирован: 2011-02-22
  • Приглашений: 0
  • Сообщений: 1798
  • Уважение: +177
  • Позитив: +148
  • Пол: Мужской
  • Провел на форуме:
    20 дней 13 часов
  • Последний визит:
    2014-01-18 13:23:53

я так думаю смысл понятен выкладывайте "может это кому нить пригодиться!))"

старайтесь не делать всё самостоятельна при помощи этого хоть спрашивайте "если вы ещё как бы новичок!" а ту только натворите что нибудь!)))

HTML Тэги. Форматирование шрифта.

Код:
<blink>мигающий текст</blink>

<b>Полужирный текст</b>

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

<u>Подчёркнутый текст</u>

<s>Зачёркнутый текст</s>

Знак сноски<sup>сверху</sup> или индекс<sub>снизу</sub> от текста

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

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

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

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

<h2>
Заголовок 2-го размера
</h2>

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

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

Black (White- белый) Red Green Blue Purple Firebrick Maroon OrangeRed MidnightBlue CornflowerBlue Cyan (Yellow-желтый) Magenta DarkGreen DarkGoldenrod Gold Orchid BlueViolet Burlywood PeachPuff

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

Оформить отступы абзацев, легко:

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

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

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

<center>отцентрированый текст</center>

<div align=right>
текст с правого краю
в две строчки с выравниванием справа
</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;">
ваш текст "прокрутка появиться после того как перестанет хватать места!" не забывайте регулировать значения
</div >

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

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

Специальные тэги

Чтобы ширина окна браузера не влияла на переносы текста:

<nobr>этот текст будет всегда в одну строку</nobr>
<br> — перенос строки.

<hr> — линия на всю ширину экрана

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

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

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

    <ol>
1 <li>Один из пунктов несортированого списка
2 <li>Другой такой пункт
    </ol>

HTML Тэги. Ссылки. Линки.

<a href="ССЫЛКА">ТЕКСТ</a>

Открыть ссылку в новом окне:
<a href="ССЫЛКА" target="_blank">ТЕКСТ</a>

Всплывающая подсказка при наведении курсора на ссылку:
<a href="ССЫЛКА" title="ЭТО ПРИ НАВЕДЕНИЕ">А ЭТО ПРОСТО ТЕКСТ</a>

Картинка-ссылка (баннер):
<a href="ССЫЛКА" title="НАДПИСЬ ПРИ НАВЕДЕНИИ"><img src=ССЫЛКА НА КАРТИНКУ!></a>

Кнопка-ссылка (форма):
<form action="ССЫЛКА" target="_blank"><input type=submit value="ЭТО ТО ШТО БУДЕТ НАПИСАНО НА КНОПКЕ"></form>

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

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

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

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

» Изображаение придвинутое влево, текст обтекает картинку справа и имеет горизонтальный отступ от неё в 6 пикселей:
<img src="http://img241.echo.cx/img241/5329/northpolesun5pw.jpg" align=left style="margin:0 1em 1em 0">текст

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

» Картинка с прокруткой
<div style="overflow: scroll; width:400px;"><img src="http://images28.fotki.com/v976/photos/4/442291/3055927/jagala-vi.jpg"></div>
(Отображаемую ширину указываем внешнему div-контейнеру в атрибуте width в пикселях. Для вертикальной прокрутки, указываем высоту height. Ширина и высота должна быть меньше чем у картинки.)

Я взял это с одного сайта и вставил сюда что тем кому надо не приходилось лазить по инету!!! а так глядишь и кто нибудь найдёт здесь то что ему надо!

Ссылка на источник!

Теги: ,,Вставка картинок и ссылок,ЖЖ тэг

Теги: HTML Тэги,Форматирование текста,Вставка картинок,Вставка ссылок,Вставка картинок и ссылок,ЖЖ тэги

+2

2

  • Автор: Deff
  • Помощник ZeroParking
  • Зарегистрирован: 2010-09-17
  • Приглашений: 0
  • Сообщений: 3019
  • Уважение: +912
  • Позитив: +117
  • Провел на форуме:
    1 месяц 4 дня
  • Последний визит:
    2014-03-14 16:00:36

HTML >

http://htmlbook.ru/html

BB
http://savepic.org/1655263.png

+1

3

  • Автор: Герда
  • Помощник ZeroParking
  • Герда
  • Откуда: Москва
  • Зарегистрирован: 2007-12-24
  • Приглашений: 0
  • Сообщений: 604
  • Уважение: +84
  • Позитив: +50
  • Пол: Женский
  • Возраст: 33 [1990-05-17]
  • Провел на форуме:
    7 дней 11 часов
  • Последний визит:
    2013-05-20 10:26:14

Основные теги языка HTML

Что такое HTML ?

HyperText Markup Language (HTML) является стандартным языком, предназначенным для создания гипертекстовых документов в среде WEB. HTML-документы могут просматриваться различными типами WEB-броузеров.
Когда документ создан с использованием HTML, WEB-броузер может интерпретировать HTML для выделения различных элементов документа и первичной их обработки.

Использование HTML позволяет форматировать документы для их представления с использованием шрифтов, линий и других графических элементов на любой системе, их просматривающей.
Большинство документов имеют стандартные элементы, такие, как заголовок, параграфы или списки. Используя тэги HTML вы можете обозначать данные элементы, обеспечивая WEB-броузеры минимальной информацией для отображения данных элементов, сохраняя вцелом общую структуру и информационную полноту документов.
Все что необходимо, чтобы прочитать HTML-документ - это WEB-броузер, который интерпретирует тэги HTML и воспроизводит на экране документ в виде, который ему придает автор.

В большинстве случаев автор документа строго определяет внешний вид документа.
В случае HTML читатель (основываясь на возможностях WEB-броузера может, в определенной степени, управлять внешним видом документа (но не его содержимым). HTML позволяет отметить, где в документе должен быть заголовок или абзац при помощи тэга HTML, а затем предоставляет WEB-броузеру интерпретировать эти тэги. Например, один WEB-броузер может распознавать тэг начала абзаца и представлять документ в нужном виде, а другой не имеет такой возможности и представляет документ в одну строку.
Пользователи некоторых WEB-броузеров имеют, также, возможность настраивать размер и вид шрифта, цвет и другие параметры, влияющие на отображение документа.

HTML-тэги могут быть условно разделены на две категории: тэги, определяющие, как будет отображаться WEB-броузером тело документа вцелом и тэги, описывающие общие свойства документа, такие как заголовок или автор документа .
Запомните, что основное преимущество HTML заключается в том, что ваш документ может быть просмотрен на WEB-броузерах различных типов и на различных платформах.

Основные теги

<html></html>  Указывает программе просмотра страниц что это HTML документ.
<head></head>  Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин.
<body></body>  Определяет видимую часть документа
Теги оглавления
<title></title>  Помещает название документа в оглавление программы просмотра страниц

____________________________________________________

Атрибуты тела документа

<body bgcolor=?>  Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB - пример: FF0000 - красный цвет.
<body text=?>  Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB - пример: 000000 - черный цвет.
<body link=?> Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB - пример: 00FF00 - зеленый цвет.
<body vlink=?> Устанавливает цвет гиперссылок на которых вы уже побывали, используя значение цвета в виде RRGGBB - пример: 333333 - серый цвет.
<body alink=?> Устанавливает цвет гиперссылок при нажатии.

____________________________________________________

Теги для форматирования текста

<pre></pre> Обрамляет предварительно отформатированный текст.
<h1></h1> Создает САМЫЙ БОЛЬШОЙ заголовок
<h6></h6> Создает самый маленький заголовок
<b></b> Создает жирный текст
<i></i> Создает наклонный текст
<tt></tt> Создает текст - имитирующий стиль печатной машинки.
<cite></cite> Используется для цитат, обычно наклонный текст.
<em></em> Используется для выделения из текста слова (наклонный или жирный текст)
<strong></strong> Используется для выделения наиболее важных частей текста (наклонный или жирный текст)
<font size=?></font> Устанавливает размер текста в пределах от 1 до 7.
<font color=?></font>  Устанавливает цвет текста, используя значение цвета в виде RRGGBB.

_____________________________________________________

Гиперссылки

<a href="URL"></a> Создает гиперссылку на другие документы или часть текущего документа.
<a href="mailto:EMAIL">
</a> Создает гиперссылку вызова почтовой программы для написания письма автору документа.
<a name="NAME"></a> Отмечает часть текста как цель для гипперссылок в документе.
<a href="#NAME"></a> Создает гиперссылку на часть текущего документа.

___________________________________________

Форматирование

<p> Создает новый параграф
<p align=?> Выравнивает параграф относительно одной из сторон документа, значения: left, right, или center
<br> Вставляет перевод строки.
<blockquote></blockquote>  Создает отступы с обеих сторон текста.
<dl></dl> Создает список определений.
<dt> Определяет каждый из терминов списка
<dd> Описывает каждое определение
<ol></ol> Создает нумерованный список
<li> Определяет каждый элемент списка и присваивает номер
<ul></ul> Создает ненумерованный список
<li>  Предваряет каждый элемент списка и добавляет кружок или квадратик.
<div align=?>  Важный тег используемый для форматирования больших блоков текста HTML документа, также используется в таблицах стилей

____________________________________________

Графические элементы

<img src="name"> Добавляет изображение в HTML документ
<img src="name" align=?> Выравнивает изображение к одной из сторон документа, принимает значения: left, right, center; bottom, top, middle
<img src="name" border=?> Устанавливает толщину рамки вокруг изображения
<hr> Добавляет в HTML документ горизонтальную линию.
<hr size=?> Устанавливает высоту(толщину) линии
<hr width=?> Устанавливает ширину линии, можно указать ширину в пикселах или процентах.
<hr noshade> Создает линию без тени.
<hr color=?> Задает линии определенный цвет. Значение RRGGBB.

____________________________________________

Таблицы

<table></table> Создает таблицу.
<tr></tr> Определяет строку в таблице.
<td></td> Определяет отдельную ячейку в таблице.
<th></th> Определяет заголовок таблицы (нормальная ячейка с отцентрованным жирным текстом)

Атрибуты таблицы

<table border=#> Задает толщину рамки таблицы.
<table cellspacing=#> Задает расстояние между ячейками таблицы.
<table cellpadding=#> Задает расстояние между содержимым ячейки и ее рамкой.
<table width=#> Устанавливает ширину таблицы в пикселах или процентах от ширины документа.
<tr align=?> или <td align=?> Устанавливает выравнивание ячеек в таблице, принимает значения: left, center, или right.
<tr valign=?> или <td valign=?> Устанавливает вертикальное выравнивание для ячеек таблицы, принимает значения : top, middle, или bottom.
<td colspan=#> Указывает кол-во столбцов которое объединено в одной ячейке. (по умолчанию=1)
<td rowspan=#> Указывает кол-во строк которое объединено в одной ячейке. (по умолчанию=1)
<td nowrap> Не позволяет программе просмотра делать перевод строки в ячейке таблицы.

___________________________________________________

Кадры

<frameset></frameset> Предваряет тег <body> в документе, содержащем кадры;
<frameset rows="value,value"> Определяет строки в таблице кадров, высота которых определена кол-вом пикселов или в процентном соотношении к высоте таблицы кадров.
<frameset cols="value,value"> Определяет столбцы в таблице кадров, ширина которых определена кол-вом пикселов или в процентном соотношении к ширине таблицы кадров.
<frame> Определяет единичный кадр или область в таблице кадров.
<noframes></noframes> Определяет, что будет показано в окне браузера если он не поддерживает кадры.

____________________________________________________

Атрибуты кадров

<frame src="URL"> Определяет какой из HTML документов будет показан в кадре.
<frame name="name"> Указывает Имя кадра или области, что позволяет выводить информацию в этот кадр или область из других кадров.
<frame marginwidth=#> Определяет величину отступов по левому и правому краям кадра; должно быть равно или больше 1.
<frame marginheight=#> Определяет величину отступов по верхнему и нижнему краям кадра; должно быть равно или больше 1.
<frame scrolling=VALUE> Указывает будет ли выводится линейка прокрутки в кадре; значение value может быть "yes," "no," или "auto". Значение по умолчанию для обычных документов - auto.
<frame noresize> Препятствует изменению размеров кадра

_____________________________________________________

Формы

Для форм, выполняющих какие-то функции должны быть запущены соответствующие CGI скрипты на сервере. HTML только создает внешний интерфейс формы.
<form></form> Создает формы
<select multiple name="NAME" size=?></select> Создает меню со скролингом. Size устанавливает кол-во пунктов меню, которое будет показано на экране, остальные будут доступны при использовании прокрутки.
<option>  Указывает каждый отдельный элемент меню
<select name="NAME"></select> Создает ниспадающее меню
<option>  Указывает каждый отдельный элемент меню
<textarea name="NAME" cols=40 rows=8></textarea> Создает окно для ввода текста. Columns указывает ширину окна; rows указывает его высоту.
<input type="checkbox" name="NAME"> Создает checkbox. За тегом следует текст.
<input type="radio" name="NAME" value="x"> Создает radio кнопку. За тегом следует текст.
<input type=text name="foo" size=20> Создает строку для ввода текста. Параметром Size указывается длина в символах.
<input type="submit" value="NAME"> Создает кнопку "Принять"
<input type="image" border=0 name="NAME" src="name.gif"> Создает кнопку "Принять" - для этого используется изображение
<input type="reset"> Создает кнопку "Отмена"

0

4

  • Автор: andaralla
  • Новичок
  • Зарегистрирован: 2012-05-22
  • Приглашений: 0
  • Сообщений: 10
  • Уважение: 0
  • Позитив: 0
  • Провел на форуме:
    1 час 49 минут
  • Последний визит:
    2012-05-24 01:41:03

клево! спасибо!

0

5

  • Автор: валерка
  • Новичок
  • Зарегистрирован: 2016-06-19
  • Приглашений: 0
  • Сообщений: 10
  • Уважение: 0
  • Позитив: 0
  • Провел на форуме:
    6 часов 1 минуту
  • Последний визит:
    2016-08-30 16:47:35

Спасибо за инфу!

0

Страница: 1

Вы здесь » Форум поддержки пользователей ZeroParking » Полезная информация » HTML Тэги | Форматирование текста | Вставка картинок и ссылок | <

Рейтинг форумов | Создать форум бесплатно