Ресурс для поиска заказчиков и попутных перевозчиков грузов в своём городе ссылка.|Развитие компаний с помощью повышения навыков персонала на сайте http://sipoten.ru.

HTML - Уроки - Теги HTML

  • Голова документа <html>
    <head>
    <title>Название вашей страницы в строке браузера
    </title>
    </head>
    <body>
    Текст на вашей страничке...
    <br>
    Добро пожаловать на мою страничку
    </body>
    </html>

    Этот документ можно создать с помощью блокнота (или вашего html редактора), потом сохранить с расширением htm и открыть сохранённое с помощью вашего браузера. Сохранив изменения в блокноте, просто нажимайте в вашем браузере кнопку "обновить", чтобы увидеть изменения.

    <head> </head> - голова документа
    <body> </body> - тело документа



  • Глава вторая

    Изменение вида и цвета текста <font color="#CC0000"> Изменение цвета</font>
    <font color="#669966"> Изменение цвета</font>
    <font color="#330099"> Изменение цвета</font>

    Цвет кодируется последовательностью из трех пар символов. Каждая пара представляет собой шестнадцатеричное значение насыщенности заданного цвета одним из трех основных цветов (красным, зеленым и синим) в диапазоне от нуля (00) до 255 (FF).

    <b> Полужирный текст </b>
    <i> Наклонный текст (курсив) </i>
    <u> Подчеркнутый текст </u>
    <MARQUEE>
    Бегущий текст
    </MARQUEE>
    <big>Увеличенный шрифт</big>
    <small>Уменьшенный шрифт</small>
    <sub>Нижний математ. шрифт</sub>
    <s>Зачеркнутый шрифт </s>
    <acronym title="Текст подсказки">Подсказка</acronym>



  • Глава третья

    Параграфы и заголовки

    <br> - перенос строки
    Такая пара меток описывает абзац. Все, что заключено между <P> и </P>, воспринимается как один абзац. <p align="center">

    Пример выравнивания текстов с помощью параграфов по центру.


    </p>

    <p> может содержать следующие выравнивания:
    <p align="center"></p> - по центру
    <p align="justify"></p> - по ширине
    <p align="left"></p> - по левой стороне документа
    <p align="right"></p> - по правой стороне документа Заголовки Метки вида <Hi> (где i — цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня — самый крупный, шестого уровня, естественно — самый мелкий.
    Пример

    Заголовок 6-го уровня

    Заголовок 3-го уровня

    Заголовок 1-го уровня


    <font size="+3"> Еще один пример </font>
    <font size="-1"> Уменьшенный вариант </font>



  • глава четвёртая

    Создание линков (ссылок)

    Самый простой пример
    <a href="/index">главная страница сайта</a> -
    главная страница сайта Ссылка на вашу почту
    <a href="mailto:почтовый@адрес.ru">пишите письма</a>
    пишите письма Ссылка для скачивания файлов
    <A HREF="ftp://адрес/имя файла">Скачать файл</A> -
    Скачать файл Меняем цвет ссылки при наведении мыши
    <style>
    <style><!-- A:hover {color: #ff6600} - "#ff6600" - цвет ссылки при наведении
    A {text-decoration: none}--> - эта строка убирает подчёркивание ссылок
    </style>



  • глава пятая

    Таблицы

    В этой главе раcсказаны не все возможности таблицы, а только самые необходимые(на мой взгляд). Таблица начинается с метки <table> и заканчивается меткой </table>. Метка <table> может включать следующие атрибутов: align="center" align="left" align="right" - выравнивание таблицы по центру, левому и правому краю документа.
    width="50%" - ширина таблицы в процентах от ширины страницы.
    width="50" - ширина таблицы в пикселях.
    Border="2" - ширина рамки таблицы. Если не указывать этот атрибут, таблица будет без рамки.
    bgcolor="#ff9900" - цвет таблицы Каждая строка таблицы начинается с метки <tr> и заканчивается меткой </tr>. Метка <tr> может включать в себя атрибуты как и в <table>; align, width, bgcolor. Каждая ячейка таблицы начинается с метки <TD> и заканчивается меткой </TD>. Метка <TD> может включать в себя следующие атрибуты: align, width, bgcolor. Если ячейка таблицы пуста, вокруг неё не рисуется рамка. Если ячейка пуста, а рамка нужна, в ячейку можно ввести символьный объект &nbsp; (non-breaking space - не разрывающий пробел). Ячейка по-прежнему будет пустой, а рамка вокруг неё будет. Пример простой таблицы <table align="center" bgcolor="#e5e5e5" border="1" width="300">
    <tr>
    <td width="150">ячейка 1-ой строки</td>
    <td width="150">2-ая ячейка 1-ой строки</td>
    </tr>
    <tr>
    <td width="150">ячейка 2 строки
    </td>
    <td width="150">&nbsp;</td>
    </tr>
    </table> В итоге получится
    ячейка 1-ой строки 2-ая ячейка 1-ой строки
    ячейка 2 строки  
    Любопытно отметить, что любая ячейка таблицы может содержать в себе другую таблицу.



  • глава шестая

    Мета теги

    <META HTTP-EQUIV="Expires" Content="Mon, 30 Mar 2002 11:50:01 GMT"> - Мета тега для определения обновления браузера документа и замены его на новый по дате. <META HTTP-EQUIV="Refresh" CONTENT="[время]; URL=[документ]"> Если пользователь не предпримет никаких видимых действий в течение [время в секундах] после загрузки документа, содержащего такую инструкцию, автоматически будет загружен [документ]. Очень полезно когда ваша страница была перемещена на другой адрес. <META Name="autor" Content="Ваши Ф.И.О., E-Mail..."> - Для указания дополнительной информации владельца страницы. <META Name="copyright" Content="ваша фирма..."> - Для указания авторских прав. <META HTTP-EQUIV="Content-Type" Content="text/html; Charset=Windows-1251"> - Для определения написания на языке браузера. <META Name="description" Content="Описание Вашей Страницы"> - Для описания вашей страницы в поисковых мета-систем. <META HTTP-EQUIV="Pragma" Content="no-cache"> - Потрясающий мета тег не дающий никакой возможности вашему посетителю просматривать вашу страничку в автономном режиме.



  • глава седьмая

    Фреймы

    <html>
    <head>
    <title>Название сайта в строке браузера</title>
    <frameset cols="100,*">
    <frameset rows="100,*">
    <frame src="/logo">
    <frame src="/menu">
    </frameset>
    <frame src="/content">
    </frameset>
    </head>
    </html> - Этот скрипт фрейм вставляеться на главную страницу вашего сайта для последующего отображения страницы
    <html>
    <head>
    <title>Название сайта в строке браузера
    </title>
    <frameset rows="100,*">
    <frame src="/logo">
    <frameset cols="150,*">
    <frame src="/menu">
    <frame src="/content">
    </frameset>
    </frameset>
    </head>
    </html> - Еще один пример фрейма



  • глава восьмая

    Картинки

    <img src="ваш.gif"> - Простейший пример вставки изображений.
    <img src="http://адрес/картинка.gif"> - Пример вставки картинки с другого сайта.
    <img src="ваш.gif" alt="текстТЕКСТтекст">текстТЕКСТтекст - Картинка с текстом в виде подсказки.
    <img src="ваш.gif" width="50"> - Картинка по вертикали вы можете изменить параметр в width="ваш параметр в цифрах по размеру разрешения".
    <img src="ваш.gif" height="50"> - Картинка по горизонтали вы можете изменить параметр в height="ваш параметр в цифрах по размеру разрешения".
    <img src="ваш.gif" border="7"> - Картинка с рамкой, border="толщина рамки"
    <body background="ваш_фон.jpg"> - Картинка применяется как фон на вашей страничке.



  • глава девятая

    Фильтры

    <IMG SRC="ваш.jpg" STYLE=filter:alpha(Opacity=50)> - Этот фильтр делает картинку, фон прозрачным. Фильтры этого примера описание: (Opacity=ваше значение в цифрах по прозрачности обьекта).
    Пример
       <IMG SRC="ваш.jpg" STYLE=filter:blur(Add=1, Direction=1, Strength=55)> - Этот фильтр сделает картинку, фон в размытом виде. Фильтры этого примера описание:(Add=значение наложения на исходный образец от 1)(Direction=значение в радиусе пример 0-45-90 и т.д.по часовой стрелке вверх)(Strength=значение в цифрах по размытости объекта).
    Пример
       <IMG SRC="ваш.jpg" STYLE=filter:fliph()> - Горизонтально переворачивает вашу картинку или фон.
    Пример
       <IMG SRC="ваш.jpg" STYLE=filter:flipv()> - Вертикально переворачивает вашу картинку или фон.
    Пример
       <IMG SRC="ваш.jpg" STYLE=filter:gray()> - Делает картинку или фон чёрно-белым.
    Пример
       <IMG SRC="ваш.jpg" STYLE=filter:invert()> - Этот фильтр придаёт картинке, фону насыщенный оттенок и яркость объекта на противоположные.
    Пример
       <IMG SRC="ваш.jpg" STYLE=filter:xray()> - Этот фильтр делает рентгеновский снимок вашей картинке, фону.
    Пример

Copyright © 2006-09.