| Здравствуйте, уважаемые подписчики!Сегодня мы начинаем нашу рассылку по теме HTML.Язык HTML, или универсальный язык разметки гипертекста, используется для создания самых разных документов с гиперссылками (ссылками на другие страницы или файлы) и элементами различной графики — Web-страниц, интерфейсов программ, презентаций, электронных книг, справочных и учебных пособий. HTML не является языком программирования. С его помощью создаются статичные документы, позволяющие пользователю только просматривать их содержимое. Для создания динамических страничек используются языки Java, JavaScript, PHP и др.
Для создания HTML-страниц можно пользоваться любым текстовым редактором (например Блокнотом), но существуют и специализированные программы. Конечно удобнее пользоваться именно ими, так как в большинстве своем они обладают функцией подсветки кода, что значительно облегчает ориентацию, а так же генерируют участки кода, что позволяет сократить время создания странички.
Редакторы делятся на два типа: визуальные и невизуальные.
Визуальные HTML-редакторы позволяют создавать документы даже без знания языка HTML по типу MS Word, но генерируют очень длинный, перегружающий страницу ненужными элементами HTML-код, который потом приходится корректировать. Стоит отметить, что некоторые визуальные редакторы вполне подходят для быстрого создания HTML-документов и при этом не сильно "мусорят".
Невизуальные редакторы требуют знания HTML, но лишены недостатков визуальных редакторов. Это, как правило, небольшие программы, в большинстве бесплатные и их легко можно найти в Интернете.
Жесткого стандарта HTML пока нет. Некоторые конструкции языка отображаются в разных броузерах по-разному, поэтому советую проверять все ваши странички не только в Internet Explorer, но так же и в Opera, Mozilla и других броузерах и при разном разрешении экрана, если вы хотите что бы у всех пользователей Интернета они отображались корректно.
Теперь самое время наконец-то приступить и к самому языку HTML.
Из определения понятно, что он служит для разметки текста, то есть форматирования. Для этой цели используются различные "дескрипторы" (tags) или в просторечье "теги", которые делятся напарные (контейнерные, в большинстве случаев позволяют использовать внутри себя другие дескрипторы) и непарные. Рассмотрим сегодня вкраце из чего состоит простая html-страница.
Начнем с того, что файлы WEB-страниц имеют расширение *.html или *.htm ( но могут и *.php и др., но здесь мы их рассматривать не будем).
Не используйте в имени файла кириллицу и пробелы, а так же не давайте им очень длинные имена. Это позволит избежать возможных осложнений, связаных с тем, что не все платформы это понимают.
HTML-страница начинается с дескриптора <HTML>, который в дополнение к расширению файла указывает броузеру, что данный файл содержит html-код. Данный дескриптор является парным, соответственно в конце страницы стоит закрывающий дескриптор </HTML>.
Страница делится на две части: заголовок и тело.
Заголовок начинается с дескриптора <HEAD> и заканчивается </HEAD>. Этот дескриптор тоже парный. В заголовке содержится служебная информация для броузеров и поисковых роботов и на экран не выводится за исключением одноко дескриптора <TITLE></TITLE>. Это очень важный во всех отношениях дескриптор. В нем задается название страницы - то, что вы видите в заголовке окна броузера. Содержимое его так же просматривается поисковыми роботами и имеет для них не маловажное значение. Поэтому старайтесь писать в нем краткое ключевое содержание вашей страницы, но не более 60 символов. Внутри <TITLE></TITLE> нельзя использовать другие дескрипторы.
ПРИМЕР: <title>Это моя первая HTML-страничка</title>
Следущий "заголовочный" дескриптор - <META>. Он не парный и несет только информацию дляброузеров и поисковиков. Правильное его использование может помочь в индексации ваших страниц поисковиками, но рассматривать все его функции мы здесь не будем. Но некоторые нужно указать обязательно.
Формат его такой - <МЕТА name="имя параметра-записи" content="значение"> или
<МЕТА http-equiv="тип значения" content="значение"> (не забывайте про кавычки).
С помощью данного дискриптора можно (и нужно) подсказать броузеру кодировку, в которой создана ваша страница во избежании отображения крючечков вместо текста (наверное встречали).
К примеру: <МЕТА http-equiv=content-type content="text/html; charset=windows-1251">указывает броузеру, что страница создана в кодировке windows-1251.
Так же еще можно указать, что данная страница создана именно вами:
<МЕТА name="autor" content="Иванов(а) И.И., 123@email.ru">.
Еще два важных META-тега это:
<МЕТА name="keywords" соntent=" "> - в значении "content" прописываются ключевые слова и выражения через запятую, соответствующие теме вашей страницы,
<МЕТА name=" description" content=" "> - в значении "content" прописывается краткая аннотация вашей страницы.
Обычно создают целый список META-тегов, но мы остановимся пока на этих. Если кому то интересно узнать подробнее об их использовании просим к нам на ФОРУМ.
Теперь рассмотрим тело нашей страници. Оно начинается и заканчивается дескриптором <BODY></BODY>. Кстати писать дескрипторы можно и маленькими буквами (они регистронезависимы). В данном дескрипторе можно задать параметры вашей страницы:
Отступы от края окна броузера - leftmargin="", rightmargin="", topmargin="" и bottommargin="" (соответственно отступ слева, справа, сверху и снизу). Но данные параметры работают не во всех броузерах. В броузере Mozilla они одинаковые и определяются параметрами marginheight="" и marginwidth="". Можно задавать эти параметры совместно(слева направо от сложного к простому). Не забывайте даже о малой части
посетителей вашей страницы;Фон - bgcolor="цвет фона", и background=" URL рисунка или текстуры" . Можно использовать эти параметры по отдельности, а можно и вместе, что дает хороший эффект особенно если у посетителя медленный интернет, а размер фонового изображения достаточно большой. В таком случае, подобрав цвет фона примерно такой же, как усредненная цветовая гамма вашего фонового рисунка можно не опасаться, что страничка будет выглядеть не корректно и посетитель может сразу начать знакомиться с ее содержимым.
К примеру вы подобрали темный фоновый рисунок и не позаботились о параметре bgcolor, а шрифт сделали белым. В этом случае до загрузки фонового изображения посетитель просто ничего не увидит, так как подложка по умолчанию тоже белая;Цвет шрифта - text="цвет текста" ;Цвет гиперссылок - link="цвет непосещенных ссылок," vlink="цвета посещенных ссылок," alink="цвет активной ссылки,".Об обозначении цветов в WEB-документах будет сказано чуть ниже.
ПРИМЕР: <body link="#008000" vlink="#800000" alink="#FF0000" topmargin="5" bottommargin="10" marginheight="5" leftmargin="5" rightmargin="10" marginwidth="5" text="#FFFF00" bgcolor="#808080" background="img/bg.gif">
Между тегами <BODY> и </BODY> вы и будете писать, вставлять картинки и тому подобное для привлечения к себе внимания и увеселения пользователей Интернета.
Кратко сегодня еще о нескольких дескрипторах.
<P>(от английского "paragraph")</P> - позволяет располагать текст на странице так, как вы хотите. Создает отступ шириной в одну строку сверху и снизу. Имеет всего один параметр "ALIGN"и четыре значения этого параметра: LEFT, RIGHT, CENTER и JUSTIFY. При использовании первоготекст выравнивается по левому краю (можно не задавать, так как текст по умолчанию выравнивается по левому краю),
второго - текст выравнивается по правому краю, третьего - текст выравнивается посередине ичетвертого - текст выравнивается равномерно по всей ширине.
ПРИМЕР:
<html>
<head>
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Это моя первая HTML-страничка</title>
</head>
<body>
<p align="left"><b>Текст СЛЕВА</b></p>
<p align="right"><b>Текст СПРАВА</b></p>
<p align="center"><b>Текст ПО ЦЕНТРУ</b></p>
<p align="justify"><b>Текст выравнивается равномерно по ШИРИНЕ</b></p>
</body>
</html>
<BR> - дескриптор не является парным и служит для переноса строк. В отличие от дескриптора<P> не создает вертикального отступа.
Длинный текст броузер переносит там, где видит либо разрыв между словами либо дефис, что не всегда правильно и красиво. <BR> позволяет переносить текст там, где вы считаете нужным.
Если уж зашел разговор о переносе строк, следует упомянуть еще один дескриптор. <NOBR></NOBR> - парный дескриптор. Он запрещает броузеру перенос текста, находящегося внутри него. Старайтесь использовать его аккуратно во избежании появления горизонтальной полосы прокрутки окна броузера. Горизонтальная полоса прокрутки затрудняет посетителю вашей страницы восприятие информации.
ПРИМЕР:
<html>
<head>
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Это моя первая HTML-страничка</title>
</head>
<body>
<p>Здесь текст переносит броузер.</p>
<p>Здесь текст переношу я там, <BR>где считаю нужным.</p>
<p><nobr>А здесь текст не переносится. Дальше не видно.</nobr></p>
</body>
</html>
При создании страницы вам наверняка понадобится как то выделять отдельные участки текста. Для этой цели можно использовать следующие несколько дескрипторов:
<B></B> - полужирный текст;
<I></I> - курсивный текст;
<U></U> - подчеркнутый текст.
Можно комбинировать их, вкладывая один в другой. <B><I><U>Комбинированный текст</U></I></B>.
Существуют еще несколько подобных дескрипторов, но сейчас мы их рассматривать не будем.
И последний на сегодня дескриптор <FONT></FONT>. Он парный, влияет на вид текста, заключенного внутри него и имеет несколько параметров:
FACE - позволяет использовать конкретно указанный шрифт (Verdana, Arial и т.д.). Но не увлекайтесь, ведь данный параметр только говорит броузеру какой шрифт использовать, а на компьютере посетителя может такого шрифта не быть. В таком случае броузер возьмет шрифт, используемый по умолчанию и результат может быть нелицеприятным. В свете этого лучше указать в этом параметре не один шрифт, а несколько через запятую (какой нибуть наверняка найдется).
SIZE - позволяет указать размер шрифта в пространных единицах от 1 (самый мелкий) до 7 (самый крупный). Пользователь в своем броузере может так-же выбирать размер шрифта, по этому рекомендую указывать не абсолютное значение, а относительное. Относительное значение прибавляет или уменьшает размер шрифта от размера, установленного пользователем на указанное колличество единиц: ...-4, -3, -2, -1, +1, +2 ..., но может быть не меньше 1 и не больше 7. К примеру у пользователя в броузере по умолчанию стоит средний шрифт, что соответствует значению 3. Если вы пропишите значение параметра SIZE="+5", то у пользователя все равно не получится значения 8, а только 7.
COLOR - позволяет задать цвет шрифта. Каждый цвет в HTML-коде обозначаетсяшестнадцатеричным числом, перед которым стоит знак # (Цвет пикселя на экране монитора составляется из красной, зеленой и синей точек разной яркости. Именно яркость этих трех точек задается кодом. Первые два знака соответствуют яркости красной точки, вторые - зеленой, третьи — синей. Поэтому формат цвета в HTML часто обозначают как RRGGBB (от английских слов Red — красный, Green — зеленый и Blue — синий). Яркость каждой составляющей измеряется целым числом, которое в десятичной системе исчисления находится в пределах от 0 до 255, а в шестнадцатеричной — от 00 до FF), а так же может быть задан по имени без знака #(шестнадцать основных цветов и еще 124 дополнительных).
Все три параметра могут задаваться одновременно и разделяются пробелом!
ПРИМЕР:
<html>
<head>
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Это моя первая HTML-страничка</title>
</head>
<body>
<p><font size="1">Текст размера 1</font></p>
<p><font size="2">Текст размера 2</font></p>
<p><font face="Arial" color="#209528">Текст размера 3 по умолчанию</font></p>
<p><font size="4" face="Tahoma" color="red">Текст размера 4</font></p>
<p><font size="5" face="Times New Roman" color="#808080">Текст размера 5</font></p>
<p><font size="6">Текст размера 6</font></p>
<p><font size="7">Текст размера 7</font></p>
<p><font size="+2">Текст размера +2</font></p>
<p><font size="-2">Текст размера -2</font></p>
<p><font size="+5">Текст размера +5</font></p>
</body>
</html>
Текст размера 1 Текст размера 2 Текст размера 3 по умолчанию (шрифт Arial, цвет #209528) Текст размера 4 (шрифт Tahoma, цвет red) Текст размера 5 (шрифт Times New Roman, цвет #808080) Текст размера 6 Текст размера 7 Текст размера +2 Текст размера -2 Текст размера +5 |
Существует еще много возможностей форматирования текста. Кому будет интересно заходите наФОРУМ и задавайте вопросы. Всем обязательно ответим.
| |
