Основы HTML

HTML (HyperText Markup Language) означает "язык маркировки гипертекстов", а HTML-документы -это обычные текстовые файлы с включенными дополнительными функциями плюс расширение .HTM, HTML ( на Unix машинах ).

Создадим простейший HTML-документ.
Используем текстовый редактор типа HTMLpad, можно и Notepad.

1.Документ начинается с заголовка (скопируйте его в буфер и вставьте в свой редактор, с небольшими изменениями он может быть типовым кодом для заголовков всех создаваемых страниц).

<html> 
     <head>  
Charset=Windows-1251">
        <title> 
               Название документа: Web design  
          </title>
     </head> 
<META NAME="author" CONTENT="Spivak Mikhaylo Email: nospam@email.ru">
<META Name="copyright" Content="Spivak Mikhaylo">
<META Name="description" 
Content="Пособие по созданию веб сайтов">
<meta name="keywords"
content="webdesign,site,programming,java,cgi,html,frames ">
text="#000000" link="#00e900" vlink="#ff0f00" alink="#fffb00">

<body>

Здесь:

<html>-метка, открывающая документ.

Если в значке метки есть косая черта, это означает, что это закрывающая или вторая из ПАРНЫХ меток, т.е. </html>- обязательная метка, закрывающая документ

<head> ... </head> указание на начало и конец заголовка документа

<title> - метка названия страницы. То, что между этими парными метками, будет отображаться в окне состояния браузера.

<META NAME="author"... -значок или тег автора страницы с указанием или без,его мыла. Вообще теги МЕТА делают возможным поиск вашего сайта, хотя и увеличивают размер документа.

<META HTTP-EQUIV.. -указание на язык, в котором написана страница, здесь это кирилица Windows.

<META Name="copyright"... обозначение авторских прав

<META Name="description"... - описание страницы

<meta name="keywords" content... -тег ключевых слов, по которым поисковая машина найдет ваш сайт.Все, что в кавычках и есть keywords.

text="#000000" link="#00e900" vlink="#ff0f00" alink="#fffb00">

-задается цвет текста и ссылок

<body> ... </body> - начало и конец тела или собственно содержания HTML-документа.

2. Теперь- содержание вашей страницы.

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


Придадим документу белый (FFFFFF) цвет и поместим на задний план рисуночек background.gif:
<body background="../lang/background.gif" bgcolor="#FFFFFF"> Обратите внимание на количество точек в пути к рисунку, это количество переходов от каталога, в котором находится ваш документ к тому где рисунок, в нашем случае это переход с каталога http://education.kulichlki.net/comp/ на корневой и с него на http://education.kulichlki.net/lang/, где и находится рисунок background.gif.

Форматирование документа означает привязать ваш текст к "сторонам света" и придать ему различную форму, размер.

Заголовки

<H1>

Бо-ольшой заголовок

</H1> —

<H6>

Меленький заголовок

</H6> - между метками h1, h2.. h6 размещается заголовок текста, их существует 6 уровней: самый крупный первого, самый мелкий- шестого.

Текст начинается с абзаца, метка <p> переносит ваш текст:

вот сюда, между парными метками <p> и <p/> можно разместить содержание абзаца,

<p align=CENTER>Выравнять (align) его по центру </p> или

<P ALIGN=RIGHT>выравнять (align) абзац по правому краю </P>

По центру текст выравнивается также парными метками <center>: <center> вот так </center>.

Можете заметить, что в редакторе существенным является именно расположение меток, а не самого текста (за исключением скриптов), но текст можно разместить как есть метками <pre>:

<pre>как видите,
              сохранено расположение
          слов   без 
   постановки дополнительных меток <p>   <pre>

Переход на следующую строку, не прерывая абзаца непарной (между парными- заключается текст, непарная-начинает его) меткой <br>
<br> Вот так. Текст может быть выделен, увеличен, подкрашен, размер и цвет определяются меткой <font size="+2" color="#0000ff"> </font>: size +2, color -набор цифр, от 000000 и до ...
<b> Жирный шрифт (bold) </b>, <i> курсив, т.н. итальянский (italy) </i> , <tt> пишущая машинка <tt>

Cуществует еще ряд меток для выделения логического стиля документа:
<SAMP> sample: демонстрация образцов сообщений компьютера </SAMP>,
<CODE> code: напр. для написания исходников </CODE>,
<EM> emphasis: выделение </EM>
<STRONG> strong emphasis: сильное выделение </STRONG>и другие, но на мой взгляд, достаточно и выше перечисленных.

Половина пройдена. Осталось изучить организацию текста в списки и таблицы, постановку ссылок .

Содержание