Техническая поддержка сервиса Quadro.Boards

Объявление

Новости сервиса

О форуме

Quadro.Support – это форум технической поддержки различных проектов и сервисов Quadro.Systems LLC, на котором грамотные технические специалисты всегда смогут помочь вам в решении проблем, или же подсказать ответы на самые сложные вопросы. Так же на форуме собрана обширная база знаний по различным аспектам наших сервисов. Не забывайте пользоваться поиском ;)

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

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



HTML для новичков

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

1

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

<HTML></HTML> -----> Обозначение HTML-документа
<HEAD></HEAD> ----> Заголовочная часть документа
<TITLE></TITLE> ----> Заголовок документа
<BODY></BODY> ----> Тело документа
<H1></H1> -----------> Заголовок абзаца первого уровня
<H2></H2> -----------> Заголовок абзаца второго уровня
<H3></H3> ---------------->Заголовок абзаца третьего уровня
<H4></H4> -------------->Заголовок абзаца четвертого уровня
<H5></H5> -------------->Заголовок абзаца пятого уровня
<H6></H6> -------> Заголовок абзаца шестого уровня
<P></P> ---------------> Абзац
<PRE></PRE> ------> Форматированный текст
<BR> -----------> Перевод строки без конца абзаца
<BLOCKQUOTE></BLOCKQUOTE> ----> Цитата

Неразрывная строка <NOBR>

Если вы не хотите, чтобы броузер автоматически переносил строку, то вы можете обозначить ее тэгами <NOBR> и </NOBR>. В этом случае броузер не будет переносить строку даже если она выходит за нраницы экрана; вместо этого броузер позволит горизонтально прокручивать окно. Например:

<NOBR> Данная строка является самой длинной строкой документа, которая не допускает какого-либо разбиения где бы то ни было </NOBR>

Если же вы хотите все же позволить разбиение данной строки на две, но в строго запланированном месте, то вставьте тэг <WBR> в это место. Например:

<NOBR> Данная строка является самой длинной строкой документа,<WBR> которая не допускает какого-либо разбиения где бы то ни было </NOBR>

Данная строка является самой длинной строкой документа,
которая не допускает какого-либо разбиения где бы то ни было

Тэг преформатирования <PRE>

Тэг преформатирования, <PRE>, позволяет представлять текст со специфическим форматированием на экране. Предварительно сформатированный текст заканчивается завершающим тэгом </PRE>. Внутри предварительно сформатированного текста разрешается использовать:

    * перевод строки
    * символы табуляции (сдвиг на 8 символов вправо)
    * непропорциональный шрифт, устанавливаемый броузером

Использование тэгов, определяющих формат абзаца, таких как <Hx> или <ADDRESS>, будет игнорироваться броузером при помещении их между тэгами <PRE> и </PRE>.

Далее идет несколько более подробный пример, собранный из предыдущих:

<HTML>
<HEAD>
<TITLE> Для Вас </TITLE>
</HEAD>
<BODY>
<H2> Тема хтмл для новичков</H2>
<H3> Составлено : 15 мая 2008 года </H3>
Данная тема специальная для тех кто знает плохо хтмл<P>
</BODY>
</HTML>

Тэг абзаца <P>

В отличии от большинства текстовых процессоров, в HTML-документе обычно игнорируются символы возврата каретки. Физический разрыв абзаца может находиться в любом месте исходного текста документа (для удобства его читаемости). Однако броузер разделяет абзацы только при наличии тэга <P>. Если вы не разделите абзацы тэгом <P>, ваш документ будет выглядеть как один большой абзац.

Дополнительные параметры тэга <P>:

<P ALIGN=left|center|right>

позволяют выравнивать абзац по левому краю, центру и правому краю соответственно.

Тело документа <BODY> и </BODY>

Тело документа должно находиться между тэгами <BODY> и </BODY>. Это та часть документа, которая отображается как текстовая и графическая (смысловая) информация вашего документа.

Комментарии html

Как любой язык, HTML позволяет вставлять в тело документа комментарии, которые сохраняются при передаче документа по сети, но не отображаются броузером. Синтаксис комментария:

<!-- Это комментарий -->

Комментарии могут встречаться в документе где угодно и в любом количестве.

Заголовочная часть документа html

Тэг заголовочной части документа должен быть использован сразу после тэга <HTML> и более нигде в теле документа. Данный тэг представляет из себя общее описание документа. Избегайте размещать какой-либо текст внутри тэга <HEAD>. Стартовый тэг <HEAD> помещается непосредственно перед тэгом <TITLE> и другими тэгами, описывающими документ, а завершающий тэг </HEAD>  размещается сразу после окончания описания документа. Например:

<HTML>
<HEAD>
<TITLE> Для Вас </TITLE>
</HEAD>
...

Основные положения

Все тэги HTML начинаются с "<" (левой угловой скобки) и заканчиваются символом ">" (правой угловой скобки). Как правило, существует стартовый тэг и завершающий тэг. Для примера приведем тэги заголовка, определяющие текст, находящийся внутри стартового и завершающего тэга и описывающий заголовок документа:

<TITLE> Заголовок документа </TITLE>

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

Некоторые тэги, такие, как <P> (тэг, определяющий абзац), не требуют завершающего тэга, но его использование придает исходному тексту документа улучшенную читаемость и структурируемость.

HTML не реагирует на регистр символов, описывающих тэг, и приведенный ранее пример может выглядеть следующим образом:

<title> Заголовок документа </title>

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-броузерах различных типов и на различных платформах.

Цитата <BLOCKQUOTE>

Данный тэг предназначен для обозначения в документе цитаты из другого источника. Текст, обозначенный тэгом <BLOCKQUOTE>, отступает от левого края документа на 8 пробелов. Например:

На открытии данной конференции глава представительства произнес: <P>
<BLOCKQUOTE>
Сегодня я сделал эту тему. <BR>
И постараюсь сделать ее хорошой.
</BLOCKQUOTE>

Отредактировано axel (15.05.2008 18:03:29)

+1

2

Думаю на ТП это будет полезным!

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

<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

3

HTML таблицы

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

Основные тэги таблицы

Таблица: <TABLE>...</TABLE>

      Это основноые тэги, описывающие таблицу. Все элементы таблицы должны находиться внутри этих двух тэгов. По умолчанию таблица не имеет обрамления и разделителей. Обрамление добавляется атрибутом BORDER.

Строка таблицы: <TR>...</TR>

      Количество строк таблицы определяется количеством встречающихся пар тэгов <TR>..</TR>. Строки могут иметь атрибуты ALIGN и VALIGN, которые описывают визуальное положение содержимого строк в таблице.

Ячейка таблицы: <TD>...</TD>

      Описывает стандартную ячейку таблицы. Ячейка таблицы может быть описана только внутри строки таблицы. Каждая ячейка должна быть пронумерована номером колонки, для которой она описывается. Если в строке отстутствует одна или несколько ячеек для некоторых колонок, то броузер отображает пустую ячейку. Расположение данных в ячейке по умолчанию определяется атрибутами ALIGN=left и VALIGN=middle. Данное расположение может быть исправлено как на уровне описания строки, так и на уровне описания ячейки.

Заголовок таблицы: <TH>...</TH>

      Ячейка заголовка таблицы имеет ширину всей таблицы; текст в данной ячейке имеет атрибут BOLD и ALIGN=center.

Подпись: <CAPTION>...</CAPTION>

      Данный тэг описывает название таблицы (подпись). Тэг <CAPTION> должен присутствовать внутри <TABLE>...</TABLE>, но снаружи описания какой-либо строки или ячейки. По умолчанию <CAPTION> имеет атрибут ALIGN=top, но может быть явно установлен в ALIGN=bottom. ALIGN определяет, где - сверху или снизу таблицы - будет поставлена подпись. Подпись всегда центрирована в рамках ширины таблицы.

Основные атрибуты таблицы

BORDER

      Данный атрибут используется в тэге TABLE. Если данный атрибут присутствует, граница таблицы прорисовывается для всех ячеек и для таблицы вцелом. BORDER может принимать числовое значение, определяющее ширину границы, например BORDER=3.

ALIGN

      Если атрибут ALIGN присутствует внутри тэгов <CAPTION> и </CAPTION>, то он определяет положение подписи для таблицы (сверху или снизу). По умолчанию ALIGN=top.
      Если атрибут ALIGN встречается внутри <TR>, <TH> или <TD>, он управляет положением данных в ячейках по горизонтали. Может принимать значения left (слева), right (справа) или center (по центру).

VALIGN

      Данный атрибут встречается внутри тэгов <TR>, <TH> и <TD>. Он определяет вертикальное размещение данных в ячейках. Может принимать значения top (вверху), bottom (внизу), middle (по середине) и baseline (все ячейки строки прижаты кверху).

NOWRAP

      Данный атрибут говорит о том, что данные в ячейке не могут логически разбиваться на несколько строк и должны быть представлены одной строкой.

COLSPAN

      Указывает, какое количество ячеек будет объединено по горизонтали для указанной ячейки. По умолчании - 1.

ROWSPAN

      Указывает, какое количество ячеек будет объединено по вертикали для указанной ячейки. По умолчании - 1.

COLSPEC

      Данный параметр позволяет задавать фиксированную ширину колонок либо в символах, либо в процентах, например COLSPEC="20%".

Пример таблицы

<TABLE BORDER=0>
<CAPTION ALIGN=bottom> Таблица №1 </CAPTION>
<TR><TD ROWSPAN=2></TD><TH COLSPAN=2>Среднее значение</TH></TR>
<TR><TH>Рост</TH><TH>Вес</TH></TR>
<TR><TD>Мужчины</TD><TD ALIGN=center>174</TD><TD ALIGN=center>78</TD></TR>
<TR><TD>Женщины</TD><TD ALIGN=center>165</TD><TD ALIGN=center>56</TD></TR>
</TABLE>

0

4

IMG
Используется для вставки изображений в HTML-документ.
Это один из самых популярных элементов, незаменимый инструмент web-дизайнера. Элемент допускает вставку изображений в форматах JPEG (в том числе progressive jpeg) и Compuserve GIF (включая прозрачные и анимированные). Червертые версии браузеров позволяют также использовать формат PNG, но до тех пор, пока они не устареют, от применения PNG лучше воздержаться.
Элемент IMG не имеет конечного тега.

Атрибуты:

SRC – обязательный атрибут. Указывает адрес (URL) файла с изображением.

HEIGHT и WIDTH – определяют ширину и высоту изображения соответственно. Если указанные значения не совпадают с реальным размером изображения, изображение масштабируется (порой с заметной потерей качества).

HSPACE и VSPACE – определяют отступ картинки (в пикселах) по горизонтали и вертикали от других объектов документа. Просто необходимо при обтекании изображения текстом.

ALIGN – обязательный атрибут. Указывает способ выравнивания изображения в документе. Может принимать следующие значения:

      left – выравнивает изображение по левому краю документа. Прилегающий текст обтекает изображение справа.
      right – выравнивает изображение по правому краю документа. Прилегающий текст обтекает изображение слева.
      top и texttop – выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки.
      middle – выравнивает базовую линию текущей текстовой строки с центром изображения.
      absmiddle – выравнивает центр текущей текстовой строки с центром изображения.
      bottom и baseline – выравнивает нижнюю кромку изображения с базовой линией текущей текстовой строки.
      absbottom – выравнивает нижнюю кромку изображения с нижней кромкой текущей текстовой строки.

NAME – определяет имя изображения, уникальное для данного документа. Вы можете указать любое имя без пробелов с использованием латинских символов и цифр. Имя необходимо, если вы планируете осуществлять доступ к изображению, например, из JavaScript-сценариев.

ALT – определяет текст, отображаемый браузером на месте изображения, если браузер не может найти файл с изображением или включен в текстовый режим. В качестве значения задается текст с описанием изображения.

BORDER – определяет ширину рамки вокруг изображения в пикселах. Рамка возникает, только если изображение является гипертекстовой ссылкой. В таких случаях значение BORDER обычно указывают равным нулю.

LOWSRC – указывает адрес (URL) файла с альтернативным изображением более низкого качества (и, соответственно, меньшего объема), чем изображение, указанное в атрибуте SRC. Браузеры Netscape, поддерживающие данный атрибут, сначала загрузят картинку из LOWSRC, a затем заменят ее картинкой из SRC.

USEMAP – применяет к изображению навигационную карту (image map), заданную элементом MAP. В качестве значения задается имя карты с предшествующей ему решеткой. Например, если имя карты – "map1", то ссылка на нее будет выглядеть как "#map1" (см. Пример 4). Обратите внимание: прописные и строчные буквы в данном атрибуте трактуются браузером как разные.

ISMAP – определяет изображение как навигационную карту (image map), обрабатываемую сервером. Имеет смысл использовать только тогда, когда изображение является гиперссылкой. После клика мышкой на изображении серверу отправляются x,y-координаты нажатия. В зависимости от полученных координат, сервер (при наличии на нем соответствующего программного обеспечения) может показать вам тот или иной документ. Данный атрибут является флагом и не требует присвоения значения.

Пример 1:
      <IMG src="/img/picture.gif" WIDTH="45" HEIGHT="53" ALT="Рысь" HSPACE="10" ALIGN="left"> Этот текст обтекает картинку справа и находится от нее на расстоянии 10 пикселов.

Пример 2. Использование изображения в качестве гиперссылки:
      <A HREF="carlson.html">
<IMG src="/img/button.jpg" WIDTH="70" HEIGHT="30" ALIGN="right" BORDER="0" ALT="Досье Карлсона">
</A>
Для просмотра досье нажмите на кнопку справа.

Пример 3. Использование ISMAP:
      <A HREF="http://www.igf.ru/bin/imagemaps/map1">
<IMG SRC="map.gif" ISMAP></A>');

Пример 4. Использование USEMAP:
      <IMG src="/img/buttons.jpg" WIDTH="170" HEIGHT="120" ALIGN="middle" BORDER="0" USEMAP="#ButtonsMap">');

0

5

SCRIPT

Вставляет скрипт в документ. Сам текст скрипта либо располагается между начальным и конечным тегами, либо определяется как URL файла, содержащего скрипт, в атрибуте SRC.

Атрибуты:

LANGUAGE – определяет язык, на котором написан скрипт, например, JavaScript.

SRC – определяет URL скрипта.

Пример 1:
      <SCRIPT LANGUAGE="JavaScript" SRC="http://www.igf.ru/js/script.js">
</SCRIPT>

В целях совместимости со старыми браузерами, содержимое элемента SCRIPT следует заключать между <!-- и -->, т.е. оформлять его как html-комментарий:

Пример 2:
      <SCRIPT LANGUAGE="JavaScript">
<!--
window.location="http://www.art-russia.com";
// -->
</SCRIPT>

0

6

Существует вероятность перехода на html 5? Хотелось бы в ногу со временем идти.  :blush:

0

7

Нечто иное
А каким образом вы видите этот переход? Вам никто не мешает использовать все преимущества HTML5 уже сейчас, добавляя код в html-верх/низ/объявление.
Если вы про то, чтобы сделать стандартную нередактируемую вёрстку форума в HTML5 (с использованием тегов наподобие article и т.д.) - едва ли это случиться, т.к. большая часть написанных скриптов (не говоря уже о свёрстанных дизайнов) перестанут работать и потребуют много времени для их изменения (вместо того, чтобы писать новые), да и смысла в подобном нет.

0



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