|
НHTML (Hyper Text Marker Language) - это обычный, текстового вида файл, в котором то, что мы обычно видим на страничках, оформляется невидимым для просмотра из броузера кодом. Вот этот-то невидимый код и есть язык разметки HTML.
Читайте реальные отзывы про Wix и узнайте, стоит ли
связыватся с этим конструктором.
HTML - это не язык программирования, - он служит лишь для разметки странички, придания определенного вида тому или иному элементу, будь то таблица, текст или картинки.
Осуществляется это путем присвоения каждому элементу своих параметров, которые распознает браузер.
|
Браузер [browser] - программа для просмотра выложенных в Сеть страничек. Является интерпретатором (т.е. "обработчиком команд") HTML.
Браузеров существует больше тридцати видов, но детального рассмотрения заслуживают только три - это доминирующий, но глючный Микрософтный
IE [Internet Explorer], в наши дни это 6-8 (и уже 9) его версии. IE используют до 42,5% общей массы пользователей Интернета. Microsoft Internet Explorer, по данным аналитического сайта Statcounter, занимает первое место в мире по популярности ( 42,5%), за ним идет Firefox ( 28%) и Chrome ( 22,1%).
Мозилла [Mozilla Firefox]. Мозилла в наши дни - быстро совершенствующийся браузер, разработанный группой энтузиастов. Обладает кучей преимуществ перед любыми "примочками" к IE, любыми "альтернативными" браузерами. Хотя, в силу консервативности большинства пользователей, этот браузер и не получил (пока что!) широкой распространенности, но уже сейчас он по своим характеристикам превосходит все распространяемые на данный момент.
Опера - [Opera] - вечно глючный альтернативный браузер, полностью соответствующий стандартам HTML, но почему-то очень странно эти стандарты понимающий. Тем не менее, пользуется популярностью у довольно значительного процента пользователей, примерно 7-12% от общей массы. Браузер можно использовать бесплатно, но Вам будут навязывать их рекламу, или же придется выложить определенную сумму.
|
Параметры эти могут быть заданы как для одного, так и для группы или типа элементов. Тип элементов может быть таким: таблицы, ячейки, ссылки, текст и т.п. То есть что-то, что можно назвать одним термином. Отдельные свойства можно присваивать и выбранным элементам персонально.
Параметры отображения элементов задаются при помощи тегов, в которых и задается желаемый вид того или иного элемента нашей странички. Важно понимать, что документ HTML имеет определенные границы. Эти границы состоят из трех наборов контейнерных тегов. [tags] - это стандартизированная система обозначений и параметров, распознаваемых броузерами и придающих HTML тот вид, который мы наблюдаем на страничках в Сети. Теги бывают "контейнерными", т.е. состоящими из двух частей, начала, т.е. отметки, откуда применять указанные в теге параметры, и закрывающей части, т.е. обозначения, докуда заданные параметры действуют. Бывают теги и не требующие закрывающей части. Это, к примеру, теги переноса <br> или тег разделительной черты - <hr>.
Сами тэги на экране не отображаются, они только указывают программе-браузеру как отображать элементы, заключенные между ними.
Тег всегда имеет такой вид: <ТЕГ>. Контейнером называется пара тегов HTML в форме: <ТЕГ></ТЕГ>. Элемент <ТЕГ>служит для включения, а </ТЕГ> для выключения (завершения) того же объекта. Заданные в теге параметры действуют только между его началом и концом, то есть, только внутри тега. Весь документ заключен между тегами <HTML> и </HTML>. Первая часть этого документа содержится в контейнере <HEAD> и </HEAD>, в который в свою очередь помещен контейнер <TITLE> и </TITLE>. И наконец, тело этой страницы находится в контейнере <BODY> и </BODY>
|
<HTML>
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
|
<HEAD>
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
|
<TITLE>
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
</TITLE>
|
</HEAD> |
</HTML>
|
Система понятна? А вот эти "отступы" от левого края тоже не случайны - они автоматически выставляются программами, формирующими код HTML для упрощения его восприятия. Достаточно понимать, что чем дальше от левого края отстоит тег, тем "глубже" он лежит, тем большее количество "старших" тегов может на него действовать. Например, в некоторых случаях параметры ранее заданного тега могут распространяться и на тег, размещенный в нем, то есть на содержимое вложенных тегов.
Также следует заметить, что некоторые параметры вложенных тегов могут воздействовать и на вышестоящие, "старшие" теги. Например, это типично для таблиц, вложенных одна в другую.
Если у внутренней таблицы размер задан 100 пикселов (пиксел [pixel] - единица измерения, равная 1 точке экрана. Самая маленькая единица измерения и самая часто используемая), то у внешней не может быть размера меньше 100 пикселов + толщина рамки. Таким образом вложенная таблица как бы "распирает" ту, в которую она вложена. При этом, даже если у нее не задан размер, а количество текста в ней значительно, она будет распирать "старшую" таблицу на такой размер, который необходим для отображения соответствующего количества строк текста. Это называется "обратная связь".
Простейший документ HTML, то есть web-страничка, состоящая из трех контейнеров тег, будет выглядеть вот так:
|
<html>
<head>
<title>Простейший документ HTML (Интернет страничка) </title>
</head>
<body>
Здесь будет размещен текст, изображения и т.д.- весь контент Вашей странички
</body>
</html>
|
Браузеру не важно положение тега - все отступы и "сдвиги" нужны только для упрощения понимания и ориентирования в коде. Конечно, количество пробелов внутри кода увеличивает размер HTML-странички, поэтому злоупотреблять ими не стоит. Но от того, что вы выделите какие-либо теги определенным образом, хуже не станет. Все пробелы больше одного браузеры просто "не замечают". То есть, сколько ни ставьте вы пробелов в тексте, браузер отобразит все равно с одним пробелом:
|
в коде написано: браузер покажет:
текст текст текст текст |
Впрочем, если "очень нужно ", то пробелов можно наставить сколько угодно. Делается это размещением в коде символа - неразрывного пробела. Этим же кодом можно пользоваться и для создания так называемой "красной строки". Дело в том, что красная строка есть только в русскоязычном написании, в английском такого понятия нет и, естественно, это не предусмотрено в кодах HTML. А вообще то, особо усердствовать с применением такого кода явно не стоит, что бы страничка смотрелась чище и не была захдамлена и что бы она быстрее загружалась.
Есть еще один тег не нуждающийся в закрытии - это тег HR, тег вообще-то уже устаревший и редко используется, так как придуманы куда более приятные способы его замены, но возможно кое когда он может и пригодиться.
Итак, тег <hr> (выглядит вот так) :
Как видите, это элемент "отчеркивания", - простая черта от края и до края тега, внутри которого она применяется. Но ее можно и ограничить, например, указав в теге размер:
<hr align="center" width="50%">
Код содержит команды: выравнять по центру, размер сделать в 50% доступной ширины.
Результат будет вот такой:
А сейчас рассмотрим общее устройство HTML.
Если мы возьмем блокнот и откроем им любой файл .htm, внутри мы увидим примерно следующее:
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Заголовок - то, что будет видно в названии окна броузера</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link href="путь до файла .css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
|
Это и есть более или менее стандартное начало для любого приличного файла .htm .html и т.п.
А теперь рассмотрим назначение обязательных тегов:
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
| Обозначает тип документа и формат. Облегчает распознавание другими программами этого файла. Указывает в начале версию стандарта HTML и язык документа, содержит в конце полный вариант URI . А так как тег указывает на правильное расположение документа, браузер знает, где этот документ надо найти в сети, и следовательно выведет вашу страницу в том стандарте, который вы упомянули в DOCTYPE. |
| <html> |
|
Обозначает начало HTML. Благодаря этому браузер убеждается, что открывает именно html, а не картинку или друглй обычный файл.
|
| <head> |
|
Обозначает начало " головы" (Head по-английски "голова")
|
<title>
Заголовок
</title> |
|
Здесь пишется название страницы (то, что будет отображено в самой верхней полоске окна браузера - там, где "свернуть, распахнуть и закрыть" (полка, квадрат и крестик)
|
| <meta http-equiv="Содержимое-Тип" content="text/html; charset=windows-1251"> |
тут указываются служебные фичи, вам это понимать не обязательно, за исключением последнего - "windows-1251" - это есть указание, в какой кодировке отображать пагу. Рекомендую ставить кодировку 1251 (т.е., кирилицу) тогда текст будет вполне читаемым, а не абракадаброй. Это не трогать и не менятьь, просто запомнить и все!
|
| </head> |
|
конец "головы" и одновременно начало "тела" странички.
|
| <body> |
|
начало странички, ее "тело" |
| <=== Наполнение страницы===> |
|
можно вписать, что угодно. Собственно, это все то, что вы хотите показывать посетителю. |
| </body> |
|
конец "тела" |
| </html> |
|
Закрытие страницы. Этот тег всегда в самом низу и всегда самый последний. После него уже ничего не пишут... |
И это, пожалуй, все, что касается структуры HTML. Теперь же пора переходить к непосредственному ознакомлению с работой по созданию страницы HTML. И первый естественный вопрос - а что для этого нужно?
Так вот, если идти стандартным путем более или менеее опытного web-дизайнера, то для нормальной работы нужны как минимум вот эти программы:
Editpad.exe - заменитель блокнота (один из лучших аналогов)
DiscoCommander
TotalCommander
Far
Но в процессе работы может понадобиться еще около полусотни разных программ, да и сам процесс с их использованием не самый простой.
Так что же делать начинающему сайтостроителю?
Есть отличный вариант - это Dreamweaver MX 2004 rus! С помощью этой программы создано более 50% всех сайтов сети Интернет!!! На взгляд многих web-дизайнеров, эта программа самая лучшая и самая простая для быстрого и удобного создания полноценных проектов любого уровня и калибра. Это полноценный комбайн по созданию сайтов, который может делать практически все, выдавая сразу же результат работы не только в кодах, но и визуально или и то и другое одновременно! Думаю, что начинать работу надо именно с Dreamweaver MX.
Скриншот программы, ее краткое описание и ссылка для закачки здесь>>> .
После загрузки архива программы, распаковывания и ее установки, можно начинать работу по созданию сайта, используя самый простой вариант , паралельно изучая Dreamweaver MX более подробно (на сколько хватит сил), тем более если сайт нужен срочно. Или пробуем вначале все изучить, а лишь затем начинать работу. Мне кажется, что лучше всего осваивать программу паралельно, в процессе работы с ней.
И так, начинаем создавать сайт из готовых шаблонов и блоков с помощью все той же Dreamweaver MX.
Переход здесь >>>
Дополнительные подсказки начинающему web-дизайнеру можно посмотреть в этом месте>>>
|
