Пользовательского поиска

22.10.2008

Основа создания сайта - язык разметки HTML (начало)

Хотя интернет у меня не работал, я не сидел без дела, и вот, что я узнал. Делюсь тем, что понял, и так как понял.

Сайты в интернете создаются при помощи языка разметки текста HTML. То есть в тексте, в обычном тексте, его (текста) участки помечаются специальными пометками (Тэгами).

 Делается это очень просто: участок текста заключается в тэги, так же как в скобки (скобка открывается-скобка закрывается).

 Тэги это метки указывающие браузеру (Опера, Мозила, Интернет Эксплорер, Макстон, Гугл Хром и т.д.) каким образом отображать текст на экране монитора, то есть жирный текст, или курсивом отображать, или подчеркнутый текст, цвет текста, размер текста и т.д.

 Тэг открывается-тэг закрывается, а между тэгами текст, который они (тэги) указывают браузеру как отображать (жирный, курсив, размер и т.д.). 

Тэг-это слово (например: body). Браузер узнает, что это тэг, а не слово, потому что тэг заключен в угловые скобки: <Tag>(это открывающий тэг), а закрывающий отличается тем, что пишется так </Tag>

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

Дальше будет совсем просто. Я буду показывать, как я сделал простую страничку. Если научится делать одну страничку, то сделать сайт будет просто, так как сайт состоит из нескольких страничек, которых может быть очень много, или всего одна-две.

 Страничку можно создать в HTML-редакторе. Это будет удобнее тем, что редактор будет подсвечивать тэги разными цветами, будет предлагать стандартные тэги, будет проверять правильность написания так же, как Ворд проверяет правописание. Но проще, чтобы ничего не искать, открыть программу Блокнот, которая есть буквально у всех.

Итак, открываем Пуск-Программы-Стандартные-Блокнот.

Далее, в Блокноте набираем тэги:

<html> </html> - между этими тэгами находиться все. Они пишутся в начале всего и в конце всего. То есть открывающий тэг <html> показывает, что начинается документ, размеченный тэгами-метками HTML (HTML – язык гипертекстовой разметки). Тэг </html> - закрывающий, показывает, что документ HTML окончен.

<body> </body> - между этими тэгами пишется сам текст, который отображается на экране.

<head> </head> - между этими тэгами пишется служебная информация, то есть кодировка текста, ключевые слова (по этим словам мы ищем сайты в Гугле), автор сайта, название сайта, которое пишется в самом верху окна браузера (выше меню) и т.д.

Наберите в блокноте следующее (количество пробелов значения не имеет, т.к.браузер их игнорирует):


<html>


<head>

</head>


<body>

</body>


</html>


Внимательно посмотрите, что вы написали, все ли понятно? Если все понятно, то продолжим. Напишите между тэгами body текст: Привет Мир!

То есть вы написали так:

<html>


<head>

</head>


<body>

Привет Мир!

</body>


</html>

Написали? Хорошо. Теперь нужно сохранить все написанное в формате html и просмотреть, что получилось при помощи браузера.

Нажимаем в Блокноте в меню пункт Файл-Сохранить как-имя файла набираем Index.html

Имя файла может быть любым, а расширение должно быть *html (index его назвали просто потому, что первая страничка сайта так должна называться).

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

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

1 коммент.:

A.K. комментирует...

Прочитал Вашу статью. Интересно. Хороший доступный язык. Понятный мне начинающему.
Хотелось бы Вас попросить.
Я открыл блог в blogger.com но не знаю как вставить свое фото. Также хотелось бы вставить поиск Google.
Не могли бы Вы написать статью или урок на этот пример? Хочется не только теории но и конкретной практики. А.К.