От практики к теории. HTML

Итак, вы решили заниматься веб-разработками. Не буду объяснять наскольно круто быть веб-программистом - на эту тему было уже много статей, зачем лишний раз замусоривать просторы интернета дубликатами. Спросите у яндекса ;)

В этой статье мы рассмотрим основу основ технической части веб-дизайна - HTML, рассчитана она на начинающих и на тех кто хочет кому-то кратко и доступно объяснить что такое html. Здесь я кратко опишу общие принципы и синтаксис языка разметки гипертекста(html). Итак, начнем.

Как же это делается?

Есть 2 способа написания html-страниц:

  • Визуальные редакторы вроде FrontPage, которые берут всю черновую работу на себя, давая нам самозабвенно заниматься дизайном страниц.
  • Sourse-editor`ы, где мы имеем дело непосредственно с html-кодом.

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

  • Что мы имеем на выходе? Неаккуратный громоздкий код, который ко всему прочему не совсем корректно или совсем не корректно отображается во всех браузерах кроме InternetExplorer`a(Ослика от компании Мелкософт). Конечно, если вы настоящий профи работы с FrontPage, и уже знаете HTML и CSS, то может что-нибудь стоящее у вас и получится, но лично я считаю что изучение самого этого редактора и его багов - лишняя трата времени.
  • Мы в итоге не имеем знаний о принципах построения веб-страниц, таблицах стилях, форматировании текста чистым кодом и это не дает нам развиваться в этом направлении!

На самом деле язык html очень прост и знать его необходимо каждому веб-дизайнеру и вебмастеру(это, если вы не в курсе, как правило разные люди). Потому и рассмотрим его основы в этой статье.

Внимание! Этот материал - не справочник по языку, а ознакомительная статья, дающая возможность разобраться в языке начинающим и сразу приступить к практике!

Основы языка

Тех кто считает что html - сложно для понимания я смею заверить что это только иллюзия. Все элементарно просто и логически понятно. Язык состоит из тегов, которые сообщают браузеру определенную информацию и их параметров. Все теги строго определены языком, и подробно описаны в мануалах и учебниках, поэтому мы рассмотрим только самые основные и повсеместно применяющиеся. Важно знать что теги в первую очередь разделяются на открывающие элементы и закрывающие. А теперь запомните раз и навсегда: теги могут включаться один в другой, но они не должны пересекаться! Правильная запись выглядит так:

<Имя_тега1> - открывающий элемент тега1
Содержимое на которое обрабатывается в соответствии с тегом1
<Имя_тега2> - открывающий элемент тега2
Содержимое на которое обрабатывается в соответствии с ними обоими
</Имя_тега2> - закрывающий закрывающий элемент тега2
Содержимое на которое обрабатывается в соответствии с тегом2
</Имя_тега1> - закрывающий закрывающий элемент тега1
 

Для некоторых тегов закрывающие теги не обязательны. Имя тега может быть записано в любом реестре, это не имеет значения, т.е <HTML> и <html> и даже <hTmL> абсолютно идентичны.

Основа страницы приведена ниже(комментарии в языке html начинаются с "<!--" И заканчиваются "-->" и не отображаются в браузере):

 <HTML><!-- Показывает браузеру что данный документ - HTML-страница -->
  <HEAD><!-- "Шапка" страницы(не отображается в браузере) -->
   <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"><!-- Кодировка документа. Об этом ниже. -->
   <TITLE><!-- Заголовок страницы -->
Текст заголовка
   </TITLE><!-- Окончание заголовка -->
Здесь также могут размещаться многие другие теги заголовков которые мы в этой статье рассматривать не будем, оставив это вам на самостоятельное изучение.
  </HEAD><!-- Окончание "шапки" страницы -->
  <BODY><!-- Тело документа. Без комментариев. -->
Здесь содержится основная часть HTML-страницы, а именно ее контент, который представляет собой текст маркированный тегами форматирования, конструирования и вставки элементов.
  </BODY><!-- Окончание тела документа -->
 </HTML><!-- Закрывающая часть тега HTML -->
Разжевываем:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
Кодировка - набор символов, согласно которому система воспринимает текст. Кодировок много, но на первых порах достаточно знать что если вы используете операционную систему windows и в тексте есть русские буквы, то кодировка будет windows-1251, а если пишете из-под Unix-подобной системы, например Linux, то кодировка по умолчанию будет koi8-r

<TITLE>Заголовок</TITLE>
Заголовок страницы отображается в верхней части окна браузера рядом с его называнием, и оформляется как обычный текст в одну строчку.

<BODY></BODY>

Для начала рассмотрим параметры самого тега <BODY>, так как они весьма интересны и полезны. С помощью них можно задать цвет текста, фона и ссылок, шрифт, границу вокруг содержимого страницы, фоновый рисунок, отступы...

<body text="#000000"<!-- Цвет текста - черный(#000000 или black) -->
link="#0000ff"<!-- Цвет ссылки - синий(#0000ff или blue) -->
alink="#ff0000"<!-- Цвет активной ссылки - красный(#ff0000 или red) -->
vlink="#800080"<!-- Цвет посещенной ссылки - пурпурный(#800080 или purple) -->
bgcolor="#c0c0c0"<!-- Цветфона - серебристый(#c0c0c0 или silver) -->
background="image.gif"<!-- Фоновый рисунок с относительным адресом(относительно текущей открытой страницы) image.gif можно также использовать и абсолютный адрес(http://sampe.ru/images/image.gif) -->
leftmargin="15"<!-- Отступ слева - 15пикселей -->
topmargin="15"<!-- Отступ сверху - 15пикселей -->
rightmargin="15"<!-- Отступ справа - 15пикселей -->
bottommargin="15"><!-- Отступ снизу - 15пикселей и закрывающая скобка тега BODY -->
 

Но так никто не пишет, хотя это и работает. Обычно код одного тега записывают в строчку:

<body text="#000000" link="#0000ff" alink="#ff0000" vlink="#800080" bgcolor="#c0c0c0" background="image.gif" leftmargin="15" topmargin="15" rightmargin="15" bottommargin="15">

Кто-то скажет что параметры тега <BODY> использовать нецелесообразно, что гораздо лучше и удобнее применить CSS(Cascade Style Sheets)... Согласен, я и сам активно пользуюсь CSS, но эта статья об основах HTML, а CSS пока оставляю вам на самостоятельное изучение, яндекс и гугль по этому поводу знают очень много!

Тело документа может представлять собой просто текст, текст различного форматирования, может включать картинки, таблицы, звуки, видео, и другие html(и не только) страницы. Как это осуществляется? Очень просто. Начнем с форматирования текста:

Во-первых вам следует уяснить что обычный текст, не содержащий в себе тегов html отображается без переносов строки(т.е. сплошным текстом) и без повторяющихся пробелов(лишние пробелы ставятся с помощью повторяющегося спецсимвола "&nbsp;"). Для переноса строки существует специальный тег <BR>, который не нуждается в закрывающем элементе. Также строки переносят:
 

  • Тег параграфа - <P>. Его действие заключается в обозначении текста как отдельного параграфа - отступ сверху и снизу. Закрывающий элемент "</P>" необязателен, т.к. вставка следующего тега <P> автоматически закрывает предыдущий.
    Для параграфа нам на данный момент полезен и интересен будет параметр align(выравнивание). Принимает значения: "left"(по левому краю), "right"(по правому краю), "center"(по центру), "justify"(выравнивание по ширине). Пимер: <p align="center">.
  • Тег заголовка <H#>, где # - число от 1 до 6, т.е порядок заголовка(<H1>Самый большой и толстый заголовок</H1>,...переходные варианты...<H1>Заголовок который даже меньше обычного текста, но выделен жирным шрифтом.</H1>). Закрывающий тег нужен чтобы не сделать заголовком весь текст после открывающего тега.
  • Если текст поставить между тегов <PRE></PRE>, то текст будет отображен с переносами строки которые вы сделаете, но тут есть один подводный камень - текст не будет автоматически переноситься по строкам, т.е. если вы поставите теги <PRE></PRE> и при этом впишите в них без переносов строки текст скажем страницы на три то он и будет отображаться одной строкой, а хорошего в этом мало. Вывод: осторожнее пользуйтесь этим тегом, гораздо проще порой в редакторе автоматически заменить все переносы строки на <br>.

Изменение начертания текста. Опять таки, затронем самое простое и востребованное
 

<B> Жирный текст </B>
<I> Курсив </I>
<U> Подчеркнутый </U>
<STRIKE> Перечеркнутый </STRIKE>
<SUP> Верхний индекс </SUP>
<SUB> Нижний индекс </SUB>

<Font> - тег для изменения шрифта, имеет такие параметры как "size"(размер), "color"(цвет), "face"(имя шрифта, можно указать несколько значений, текст будет отображен тем шрифтом который будет найден у пользователя на компьютере. Проверка производится слева направо.)

<font size="1"> Пример 1 </font>
<font size="2"> Пример 2 </font>
<font size="3" face="Georgia, Tahoma"> Пример 3 </font>
<font size="4" face="Arial" color="red"> Пример 4 </font>
<font size="5" color="lime"> Пример 5 </font>
<font size="6"> Пример 6 </font>

 

Элементы конструирования и вставки

Таблица - очень важный элемент при создании страницы. Именно с помощью таблиц обычно стоят навигационные меню, или текст в несколько столбцов на странице. Все дело в том что ячейка может быть неограниченных размеров и включать в себя дополнительные таблицы. Итак рассмотрим синтаксис построения таблиц. Структура таблицы определяется открывающим тегом <table>, объявлением строки <tr>, объявлением ячейки <td>(или ячейки-заголовка <th>) и вписыванием в нее содержимого, закрытием ячейки </td>(или </th> для ячейки-заголовка), открытием, заполнением и закрытием следующей ячейки, если в таблице нужно получить несколько столбцов. (Количество ячеек в одной строке не ограничено, но желательно чтобы во всех строках было одинаковое количество ячеек, либо же ячейки были растянуты на одинаковое пространство занимаемое в итоге, потому как в противном случае таблица будет смотреться неаккуратно), закрытием строки </tr>, открытием, заполнением и закрытием новой строки(если таблица должна содержать несколько строк) аналогичным образом (Количество строк таблицы так же не ограничено) и наконец закрытием нашей многострадальной таблицы </table>.
Важно отметить что тег <table> может включать в себя такие параметры как height(высота таблицы), width(ширина таблицы), border(ширина границы, может быть 0, тогда ганица будет прозрачной), cellpadding(отступ от ячейки), cellspacing(расстояние между ячейками), bgcolor(цвет фона), background(фоновый рисунок), bordercolor(цвет границы), align(выравнивание таблицы на странице).

Строка 1 ячейка 1 Строка 1 ячейка 2
Строка 2 ячейка 1 Строка 2 ячейка 2
<table height=100px width=250px border=1 cellpadding=5 cellspacing=5 bordercolor=#00ff00 bgcolor=red align=center>
<tr>
<td>Строка 1 ячейка 1</td>
<td>Строка 1 ячейка 2</td>
</tr>
<tr>
<td>Строка 2 ячейка 1</td>
<td>Строка 2 ячейка 2</td>
</tr>
</table>
Следующие атрибуты могут применятся для строк и ячеек.
ALIGN=LEFT Устанавливает горизонтальное выравнивание текста в ячейках строки. Может принимать значение LEFT (выравнивание влево), CENTER (выравнивание по центру) и RIGHT (вправо).
VALIGN=CENTER Устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: TOP (выравнивание по верхнему краю), CENTER (выравнивание по центру - это значение принимается по умолчанию), BOTTOM (по нижнему краю).
BGCOLOR="#FFFFFF" Устанавливает цвет фона строки или ячейки.
BACKGROUND="image.gif" Заполняет фон строки или ячейки изображением.
Следующие атрибуты могут применятся только для ячеек.
WIDTH="n" Определяет ширину ячейки в n пикселях.
HEIGHT="n" Определяет высоту ячейки в n пикселях.
COLSPAN="n" Растягивание ячейки по горизонтали. Например, <TD COLSPAN="2"> означает, что ячейка будет растянута на 2 колонки.
ROWSPAN="n" Растягивание ячейки по строке. Например, <TD ROWSPAN="2" означает, что ячейка будет растянута на две строки таблицы.
NOWRAP Присутствие этого аттрибута показывает, что текст должен размещаться в одну строку
BACKGROUND="image.gif" Заполняет фон ячейки изображением.


 

Вставка изображения.
Осуществляется с помощью следующей конструкции:

<img src="адрес_рисунка" alt="Подсказка если у пользователя отключены картинки" height="Высота" width="Ширина" border="Граница" align="Выравнивание">

Все эти параметры вам уже знакомы по предыдущим описаниям поэтому не будем на них останавливаться. Остальные параметры вы также можете посмотреть в мануалах, коих в интернете обитает великое множество.

 

Гиперссылки.

 


Обычная гиперссылка создается следующей конструкцией:
<a href="Адрес">Объект являющийся ссылкой</a>

 
Причем все что заключено между тегами(а там можно включить практически что угодно) является ссылкой, т.е. в данном случае при клике на объект, будь то текст или картинка(вставляется стандартный, описанный ниже), ведет к переходу на страницу или файл объявленный параметром href!

Ссылка на email
 

<a href="mailto:ваш@email ?subject=Тема сообщения &Body=Текст письма предложенный по умолчанию &cc=послать_копию@email"> Объект ссылки </a>

Причем тема, текст и копия - необязательные параметры, которые можно полностью исключить урезав ссылку до:
<a href="mailto:ваш@email"> Объект ссылки </a>


 

Подводим итоги.

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

Источник: Bolzamo



Опубликовал admin
22 Май, Вторник 2007г.



Программирование для чайников.