Рекламист

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

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


Вы здесь » Рекламист » Скрипты » Основные теги языка HTML


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

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

1

Что такое 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"> Создает кнопку "Отмена"

Теги: теги, HTML

0

2

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. Ширина и высота должна быть меньше чем у картинки.)

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

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

0


Вы здесь » Рекламист » Скрипты » Основные теги языка HTML


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