и означает, что можно ставить открывающий тег, а можно не ставить — браузер сам все сделает.
Третий столбец — End Tag
— наличие закрывающего тега. Напротив данного тега можно увидеть как букву «O», так и букву «F». Значение первой не изменилось. Вторая же буква — «F» — дословно с английского «запрещено» — означает, что закрывающий тег ставить запрещено, его просто не существует. Например, не существует тега , ибо нечего в нем закрывать.
Четвертый - Empty
— означает, что тег является одиночным (пустым). Все теги, напротив которых стоит буква «E» в данном столбце, стоит еще и буква «F» в предыдущем столбце. Ведь у одиночных тегов не бывает закрывающих. Примером служит все тот же тег ![]()
.
Пятый столбец — Depr.
или Deprecated
— с английского «не рекомендуемые». Если в данном столбце стоит буква «D» (которая расшифровывается точно также) значит, что данный тег не рекомендуется к использованию в HTML. Забегая немного вперед, сегодня для оформления как текста, так и внешнего вида всего сайта и HTML-документа используются каскадные таблицы стилей — CSS. Если коротко и просто, то создается один файл, в котором прописываются все параметры текста, которые можно вызвать определенными атрибутами тегов. Так вот, данная функция используется только на сайтах, потому что при рассылке новостей по почте или в RSS CSS не применим. И тут приходит на помощь эти самые теги. Большинство таких тегов, кстати, относятся к оформлению текста ( и являются примером)
Шестой столбец — DTD
— может содержать либо букву «L»
, либо «F»
. Первая — «L»
- Loose DTD
— означает, что тег, напротив которого стоит данная буква, может использоваться только в переходном типе документов ( — Transitional, про который я писал в предыдущей статье). Вторая — «F»
— Frameset DTD
— означает, что тег может использоваться только в документе, типа FRAMESET ( — Frameset). Если же буква отсутствует, то тег можно использовать во всех типах документов.
И последний, седьмой столбец - Description
— краткое описание тега, опять же на английском
Атрибуты же содержаться на той же страничке спецификации HTML 4.01, но уже во вкладке «attributes». Атрибутов намного больше, нежели тегов. И опять распишу все по пунктам.
- Первая колонка — Name
— как и в случае с тегами — название атрибута. Все на английском, но имея базовые знания можно догадаться, что делает тот или иной атрибут.
- Вторая колонка — Related Elements
— это перечень всех тегов, в которых используется какой-либо атрибут. Все теги со ссылками, поэтому сразу можно будет перейти к информации о теге.
- Третья колонка — Type
— это все возможные значения определенного атрибута. Например напротив выбранного нами атрибута size в теге Font стоит значение CDATA. Его мы рассмотрим позже, а если коротко, то это специальный набор вариантов размера (в данном случае). Ведь можно писать как пиксели, так и проценты
- Четвертая колонка — Default
— означает, обязателен ли атрибут в определенном теге. Например, в теге Img атрибут src обязателен, так как указывает на источник, из которого брать картинку.
- 6, 7, и 8 колонки означают то же самое, что и в случае с тегами.
Все вышеописанное относится только к HTML версии 4.01. Про HTML 5 мы поговорим в другой статье, затронем и XHTML. А сейчас, как я и обещал, мы создадим страничку на языке HTML, над которой и будем экспериментировать.
Создание файла в формате html — HTML-документ
Прежде всего, разберемся что такое HTML-документ
. А это, собственно, файл в формате HTML. И все интернет странички являются HTML- документами. Например, при попадании на сайт в адресной строке в конце можно увидеть после адреса «.html» или «.htm». Вот файл с таким расширением мы и создадим. Вообще, если хотите экспериментировать над сайтом, а не над страничкой, то лучше создать локальный сервер — Денвер (про который я все хочу написать).
Учитывая то, что я не рассказал даже о тегах, присутствующих на каждой страничке, то просто создадим файл с любым именем и расширением.html. Можно (и лучше всего) использовать Notepad++
, потому что в данном текстовом редакторе используется подсветка кода, что очень удобно при редактировании кода и сохранять файлы можно во множестве форматов. Также есть программы, в которых при наборе кода сразу появляется результат в обработанном виде
Итак, нам нужно просто открыть Notepad++
и сохранить файл с произвольным текстом (можно и пустой), но в формате.html. Для этого, как обычно, кликаете на надпись файл, затем "сохранить как " и ищем среди большого списка расширений «HyperText Markup Language file
(расширения файлов)». Вот, собственно, и все. Первые строки в этот файл мы добавим уже в следующей статье из рубрики «Создаем сайт с нуля»
Основные html теги — это та база, на которой строится практически любой сайт/блог. Из этой статьи Вы узнаете именно те 20% тегов, которые Вам будут необходимы всегда.
Как в любом языке, да и в здесь действует правило парето 20/80 (20% дел имеет 80% важности для достижения нужного результата), что означает — достаточно знать всего 20% кодов, чтобы уверенно достигать своих целей в сайтостроении.
HTML не является языком программирования, потому как, это — язык гипертекстовой разметки текста, что говорит само за себя, он позволяет размечать блоки на страницах для верного отображения, делать разметку текста для вебстраниц. Также с его помощью делаются ссылки с одной страницы сайта на другую. Все ссылки в интернете созданы с помощью гипертекстовой части html кода.
— это самый наипростейший язык! Если Вы решили его изучить, то важно понять с самого начала, что в этом нет ни какой сложности. С уверенностью можно сказать, что в школе детям, на уроке информатики намного сложней приходиться.
Итак приступим. Писать коды лучше в блокноте, который входит в стандартные программы операционной системы Windows или в бесплатной программе «Notepad + +».
Сначала определимся с тем, что такое тег. Тег — это ячейка самого языка html, из которого он в общем то и строится. По тегам браузеры понимают, как отобразить текст, куда вставить картинки. Теги — это и есть сами элементы разметки.
HTML теги для создания каркаса сайта
Теги бывают парные и не парные. Парные открываются и закрываются, т.е в закрывающихся присутствует обратный слеш «/».
Первое, что должно находится в любом html документе при создании страницы блога, это:
-
- — сообщают браузеру, что все, что находится между ними, это есть html код;
- — с англ. «голова», содержит название, кодировку, мета теги для поисковиков;
- НАЗВАНИЕ — мета тег, в основном для поисковиков, внутри содержит название документа, отображается вверху браузера;
- — одинарный тег указывающий браузеру кодировку языка, где windows-1251
— говорит о том, что текст данной страницы на русском языке (windows-1252 — для английского языка);
- — для ключевых слов сайта;
- — краткое содержание страницы;
- ТЕЛО ДОКУМЕНТА — с англ. «тело», содержит всю страницу сайта.
Это были стандартные теги html кода
, с которых, без изменений должны начинается все страницы сайта/блога в таком виде:
Список html тегов находящихся в теле страницы
Между тегами
будет находится само тело страницы сайта где: заголовок
— самый важный
1 уровня;- с
подзаголовок
по подзаголовок
— соответственно подзаголовки 2, 3, 4, 5 и 6 уровня; - анкор ссылки — ссылка, где » target=»_blank»» — атрибут отвечающий за открытие в новом окне, » title=»» название того, на что будет ссылка;
- и — теги для выделения жирным. «» устарели и рекомендуется использовать «»;
- — для выделения курсивом;
— одинарный тег, отвечающий за вставку изображения на странице;- — «p» от англ. «параграф», а значит делит текст на параграфы. По умолчанию выравнивается по левому краю;
— логический тег означающий конец строки и переход на следующую;- — атрибут выравнивающий текст по центру;
- — атрибут выравнивающий текст по правому краю;
- —
- color=»green» отвечает за цвет текста. В данном случае стоит зеленый. Вместо слова «green» обычно ставится код из шестнадцатеричной системы цветов, например: «#088f47»;
- face=»verdana» — атрибут указывающий шрифт в тексте;
- size=»3″ — размер шрифта;
- первое
- второе
- третье
— нумерованный список;- — маркированный список;
HTML теги для создания таблицы
Тегов внутри самой таблицы может быть много, это изменения цвета бордюра таблицы, выравнивание слов внутри таблицы и т.д., но так как статья о основных тегах , то остановимся только на тегах для создания самой таблицы.
- — тег отвечающий за создание таблицы, где «1» есть ширина бордюра таблицы, где «450» ширина таблицы, а «center» вы уже знаете;
|
— тег находящийся внутри «» и создает строку в таблице; | — создает столбец в строке, находится внутри тегов «|
». «150», как вы уже наверное догадались — ширина столбца;
Полностью html теги таблицы
выглядят примерно так:
ячейка №1 |
ячейка №2 |
ячейка №3 |
ячейка №4 |
ячейка №5 |
ячейка №6 |
Еще раз подчеркиваю, что это основные теги html кода и в него можно вносить очень много изменений. И еще стоит отметить, что сам по себе html код – это шаблон, без css, в общем-то, что-то стоящее с ним сделать будет невозможно. Только все вместе, html и css творят чудеса, но что-то простенькое, вполне можно выполнить и без глубоких знаний css, чисто на html.
Видео урок по теме — «Что такое HTML? Файл index html»:
Поделитесь пожалуйста, если понравилось:
Возможно вам будет интересно еще узнать:
Теги HTML (шпаргалка)
HTML
-документ (страничка) - документ, написанный на языке HTML. Заключается между тегами
и
.
Значения тегов разметки документа
Теги разметки - специальные команды для расположения на
экране текста, графики, видео и аудио фрагментов, а также команды, служащие для
связи с другими HTML-документами и ресурсами Интернет.
Основные теги разметки
и
. Между этими тегами
располагается информация о документе.
</b>
и <b>
. В этих тегах заключается
название странички, которое будет выведено в рамке окна программы просмотра.
и
. "Тело" документа
(текст, графика и т.д.) располагается между этими двумя тегами.
Параметры тега
:
BGCOLOR
- цвет фона (
BGCOLOR=
"#000000"
>
)
BACKGROUND
- бэкграунд
TEXT
- цвет текста
ALINK
- цвет активной ссылки
и
- теги, служащие для выделения
абзацев. Новый абзац всегда отделяется от предыдущего пустой строкой.
- тег, служащий для переноса текста на другую
строку. Может также служить для отделения графики от текста на интервал.
- тег,
служащий для логического разделения текста горизонтальной линией.
и
- Между этими тегами располагается
предварительно отформатированный текст. На экран он выводится шрифтом типа
"курьер".
Параметры выравнивания
Используются в
и
ALIGN=
LEFT
- выравнивание по левому полю
ALIGN=
RIGHT
- выравнивание по правому полю
ALIGN=
CENTER
- выравнивание по центру
Теги выравнивания
и
- выравнивание по левому полю
и
- выравнивание по правому
полю
и
- выравнивание по центру
Заголовки, служащие для выделения логических частей текста
и
- Заголовок первого уровня.
и
- Заголовок второго уровня.
и
- Заголовок третьего уровня.
и
- Заголовок четвертого уровня.
и
- Заголовок пятого уровня.
и
- Заголовок шестого уровня.
Теги для выделения текста и шрифта
и
- теги для выделения текста (слов,
букв) жирным шрифтом.
и
- теги для выделения текста (слов,
букв) курсивным шрифтом, типа Italic.
и
- текст, расположенный между двумя
этими тегами, будет подчеркнут.
и
- текст, расположенный между
двумя этими тегами, будет мигать.
SIZE=
n
>
и
- теги для изменения
размера шрифта (где n
- размер шрифта в пикселях px
).
COLOR=
"#FFFFFF
"
>
и
- теги для изменения цвета шрифта.
Теги для формирования списков
и
- теги, показывающие начало и
конец нумерованного списка
и
- теги, показывающие начало и
конец маркированного списка.
- Элемент списка
и
- теги, показывающие начало и
конец глоссария.
- Термин глоссария, располагается без отступа от
левого поля страницы.
- Описание термина, располагается с отступом от
левого поля страницы.
Теги-команды для вставки в текст объектов не текстовой
информации
SRC=
"file.gif"
>
или
SRC=
"file.jpg"
>
- команда для вставки графического изображения
SRC=
"file.wav"
>
- команда для вставки
звукового фрагмента
SRC=
"file.avi"
>
- команда для вставки
видео фрагмента
Параметры графического изображения
WIDHT
- ширина картинки в пикселях
HEIGHT
- высота картинки в пикселях
ALIGN
- выравнивание (ALIGN=
LEFT
- выравнивание по левому
полю, ALIGN=
RIGHT
- по правому полю, ALIGN=
TOP
- по верхней границе,
ALIGN=
BOTTOM
- по нижней границе, ALIGN=
MIDDLE
или CENTER
- по центру)
HSPACE
- горизонтальный отступ от графического изображения
VSPACE
- вертикальный отступ
ALT
- альтернативный текст, служит для обозначения
изображения
Команды, служащие для гиперсвязи с другими HTML-документами
и ресурсами Интернет
HREF=
"fail.htm"
>
и
или
HREF=
"http://www.ru"
>
и
-
гиперсвязи
HREF=
"mailto:nick
@mail
.ru"
>
nick
@mail
.ru
-
гиперсвязь с адресом электронной почты
Таблицы
Таблица - сетка для показа данных в строках и столбцах, а
также средство для форматирования текста
- теги для вставки таблицы в
HTML документ
Параметры тега
BGCOLOR
- цвет фона
BORDER
- ширина бордюра
WIDHT
- ширина таблицы
Теги разметки таблицы
и
- название таблицы, имеет
параметр ALIGN=
TOP
- выравнивание над таблицей и ALIGN=
BOTTOM
- под таблицей.
и
- Строчка таблицы. Может иметь
параметры BGCOLOR
- цвет фона внутри строки;
ALIGN=
LEFT
, RIGHT
, CENTER
-
выравнивание внутри строки;
VALIGN=
TOP
, BOTTOM
, MIDDLE
- вертикальное выравнивание
внутри строки таблицы.
и |
- Столбец таблицы. Может иметь параметры BGCOLOR
- цвет фона под столбцом;
ALIGN=
LEFT
, RIGHT
, CENTER
- выравнивание внутри
столбца;
COLSPAN
растягивание клетки на несколько столбцов, ROWSPAN
- растягивание клетки на
несколько строк.
и |
- Заголовок столбца. Может иметь
параметры BGCOLOR
- цвет фона под названием;
ALIGN=
LEFT
, RIGHT
, CENTER
-
выравнивание;
VALIGN=
TOP
, BOTTOM
, MIDDLE
- вертикальное выравнивание;
COLSPAN
,
ROWSPAN
- растягивание клетки на несколько столбцов или строк; WIDHT
- ширина
названия.
Рамки-фреймы
Рамки-фреймы - средство для разделения экрана на несколько
областей, в каждой из которых отображается содержимое отдельной Web-страницы
или Web-сайта.
и
теги для создания
рамки
Параметры тега
COLS
- подразделяют экран на определенное количество колонок
(вертикальных)
ROWS
- подразделяют экран на определенное количество колонок
(горизонтальных)
BORDCOLOR
- цвет рамки
BORDER
- ширина бордюра
FRAMEBORDER
- граница рамки (FRAMEBORDER=
YES
- есть граница,
FRAMEBORDER=
NO
- нет границы, FRAMESPACING=
n
- ширина границы)
Тег для описания рамки (
SRC=
"file.htm"
>
).
Параметры тега
SCROLING
- параметр для регулировки полосы прокрутки:
SCROLING=
YES
- полоса прокрутки будет всегда
SCROLING=
NO
- полосы прокрутки не будет
SCROLING=
AUTO
- полоса прокрутки появляется только в случае
необходимости
MARGINWIDHT
и MARGINHEIGHT
- параметры, которые управляют
отступом внутри рамок, служат для выравнивания графического изображения внутри
рамки
NORESIZE
- параметр, указывающий на то, что размер
рамки-фрейма никогда не будет меняться.
A link to
HREF=
"file.htm"
TARGET=
"frame2"
>
file.htm
-
Связь между фреймами
TARGET
- атрибут связи между фреймами. Имеет несколько
значений:
BLANK
загружает содержимое страницы, заданной ссылкой, в
новое пустое окно.
SELF
содержимое страницы, заданной ссылкой, в окно, которое
содержит ссылку.
PARENT
загружает содержимое страницы, заданной ссылкой, в
окно, являющееся непосредственным владельцем набора фреймов.
TOP
содержимое страницы, заданной ссылкой, в окно,
игнорируя используемые фреймы.
Обработка браузеров, не поддерживающих фреймы:
Здесь располагаются фреймы
<![CDATA[
</b>
</p><p><b><span><BODY>
</b>
</p><p>Здесь располагается текст без фреймов
</p><p><b><span><BODY>
</b>
</p><p><b><span>]]>
Бегущая строка
ТЕКСТ
- тег, создающий
бегущую строку
- Если
бегущую строку нужно направить справа налево
-
движение слева направо.
scroll
- стандартное движение от правого края к левому
slide
- надпись один раз пробегает от правого края к левому,
где и остается.
alternate
- движение от правого края страницы к левому и
обратно. Бесконечный цикл.
- Ограничение числа циклов. Значение n
оператора LOOP
указывает число
повторений цикла.
- указать
ширину участка, занимаемого бегущей строкой, где n
- ширина той части страницы,
на которой расположена бегущая строка. Значение n
указывается как в пикселях,
так и в процентах от общей ширины видимой части страницы.
-
Регулировка движения надписи по экрану. Здесь n
- число пикселей.
- В данном
случае переменная величина - время t
- измеряется в миллисекундах. Метод
задания скорости состоит в указании времени, спустя которое текст будет перерисован
на экране заново.
SIZE=
n
>
ТЕКСТ
- возможность указывать величину шрифта
текста в строке.
- окрасить
поверхность бегущей строки в какой-либо цвет, где n
можно
указать в виде шестнадцатеричного числа либо написав его название
- указывает
высоту бегущей строки
| 
