Уроки Phptoshop, Linux, Windows 7
20 Май 2012, 13:44:51 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
Новости:
 
  Начало   Форум   Помощь Поиск Календарь Пользователи Downloads Войти Регистрация  
Страниц: [1]   Вниз
  Печать  
Автор Тема: Знакомство с HTML - Наш первый HTML-документ  (Прочитано 3621 раз)
0 Пользователей и 2 Гостей смотрят эту тему.
John Parker
Гость
« : 22 Июнь 2010, 11:42:21 »

Как устроен HTML-документ

HTML-документ — это просто текстовый файл с расширением *.htm
(Unix-системы могут содержать файлы с расширением *.html). Вот
самый простой HTML-документ:


<html>
     <head>
          <title>
               Пример 1
          </title>
     </head>
     <body>
          <H1>
               Привет!
          </H1>
          <P>
               Это простейший пример HTML-документа.
          </P>
          <P>
               Этот *.htm-файл может быть одновременно открыт
               и в Notepad, и в Netscape. Сохранив изменения в Notepad,
               просто нажмите кнопку Reload ('перезагрузить') в Netscape,
               чтобы увидеть эти изменения реализованными в HTML-документе.
          </P>
     </body>
</html>



Если хотите, можно посмотреть этот пример прямо
сейчас.


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


<html>
<head>
<title>Пример 1</title>
</head>
<body>
<H1>Привет!</H1>
<P>Это простейший пример HTML-документа.</P>
<P>Этот *.htm-файл может быть одновременно открыт и в Notepad, и в Netscape.
Сохранив изменения в Notepad, просто нажмите кнопку Reload ('перезагрузить')
в Netscape, чтобы увидеть эти изменения реализованными в HTML-документе.</P>
</body>
</html>



Как видно из примера, вся информация о форматировании документа сосредоточена
в его фрагментах, заключенных между знаками "<" и ">".
Такой фрагмент (например, <html>) называется меткой (по-английски
— tag, читается "тэг").


Большинство HTML-меток — парные, то есть на каждую открывающую метку
вида <tag> есть закрывающая метка вида </tag>
с тем же именем, но с добавлением "/".


Метки можно вводить как большими, так и маленькими буквами. Например,
метки <body>, <BODY> и <Body>
будут восприняты браузером одинаково.


Многие метки, помимо имени, могут содержать атрибуты — элементы,
дающие дополнительную информацию о том, как браузер должен обработать текущую
метку. В нашем простейшем документе, однако, нет ни одного атрибута. Но
мы обязательно встретимся с атрибутами уже в следующем разделе.


Обязательные метки


<html> ... </html>


Метка <html> должна открывать HTML-документ. Аналогично,
метка </html> должна завершать HTML-документ.


<head> ... </head>


Эта пара меток указывает на начало и конец заголовка документа. Помимо
наименования документа (см. описание метки <title> ниже),
в этот раздел может включаться множество служебной информации, о которой
мы обязательно поговорим чуть позже.


<title> ... </title>


Все, что находится между метками <title> и
</title>, толкуется браузером как название документа.
Netscape Navigator, например, показывает название
текущего документа в заголовке окна и печатает его в левом верхнем углу
каждой страницы при выводе на принтер. Рекомендуется название не длиннее
64 символов.


<body> ... </body>


Эта пара меток указывает на начало и конец тела HTML-документа, каковое
тело, собственно, и определяет содержание документа.


<H1> ... </H1> — <H6> ... </H6>


Метки вида <Hi> (где i — цифра от 1 до 6)
описывают заголовки шести различных уровней. Заголовок первого уровня —
самый крупный, шестого уровня, естественно — самый мелкий.


<P> ... </P>



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


Метки <Hi> и <P> могут содержать
дополнительный атрибут ALIGN (читается "элайн",
от английского "выравнивать"), например:


<H1 ALIGN=CENTER>Выравнивание заголовка по центру</H1>


или


<P ALIGN=RIGHT>Образец абзаца с выравниванием по правому краю</P>


Подытожим все, что мы знаем, с помощью примера 2:


<html>
<head>
<title>Пример 2</title>
</head>
<body>
<H1 ALIGN=CENTER>Привет!</H1>
<H2>Это чуть более сложный пример HTML-документа</H2>
<P>Теперь мы знаем, что абзац можно выравнивать не только влево, </P>
<P ALIGN=CENTER>но и по центру</P> <P ALIGN=RIGHT>или по правому краю.</P>
</body>
</html>


С этого момента Вы знаете достаточно, чтобы создавать простые HTML-документы
самостоятельно от начала до конца. В следующем разделе мы поговорим, как
можно улучшить наш простой HTML-документ. Начнем с малого — с абзаца.
Записан
agrus
Гость
« Ответ #1 : 22 Июнь 2010, 14:33:38 »

Да, согласна со всем, кроме одного. Думаю все-таки выравнивание текста надо переносить в css документ. Хотя человеку, который только знакомится с html, конечно надо знать обо всех его средствах и методах.
Записан
John Parker
Гость
« Ответ #2 : 22 Июнь 2010, 15:33:09 »

Ну так это для начинающих... Про CSS дальше будет...
Записан
agrus
Гость
« Ответ #3 : 22 Июнь 2010, 16:27:42 »

Аа, CSS это мое любимое )
А в этой теме думаю можно еще рассказать о meta-тегах. Как никак, важная составляющая каждого html документа.
Записан
John Parker
Гость
« Ответ #4 : 22 Июнь 2010, 17:01:24 »

Я же говорю, всё будет в будущем... времени катострофически не хватает на размещение материала... Надеюсь сегодня завтра всё выложу.
Записан
Аном@лия
Гость
« Ответ #5 : 22 Июнь 2010, 23:43:40 »

Оооо... Милые сердцу тэги... Аааа, как давно это было!!!
Записан
Уроки Phptoshop, Linux, Windows 7
   

 Записан
Страниц: [1]   Вверх
  Печать  
 
Перейти в:  



* Счетчики
Наша Кнопка

Powered by SMF 1.1.16 | SMF © 2006-2009, Simple Machines | Sitemap
SimplePortal 2.3 © 2008-2009, SimplePortal