Все разделы сайта DANILIDI.RU
Как создаются web-страницы
Как сделать страницу сайта
Поговорим о том, как создаются Web-странички. Для этого используется особый язык HTML (HyperText Markup Language — язык гипертекстовой разметки).
Этот язык определяет набор специальных команд, называемых тегами и используемых для задания форматирования или назначения тех или иных элементов Web-страницы.
Особые теги используются для размещения на веб-страницах графических изображений, аудио- и видеоклипов и прочих так называемых внедренных объектов. Кажется, я вас напугал.
Но, несмотря на кажущуюся сложность, Web- страницы не представляют собой ничего сложного.
Это обычные текстовые файлы, созданные в стандартном Блокноте или аналогичном простейшем текстовом редакторе.
И содержат они текст, тот самый текст, который вы хотите поместить на страницы, только размеченный особым образом... Да что тут говорить! Лучше все показать на примере.
Это простейшая вэб-страничка, сделанная для примера в Блокноте. Чтобы увидеть эту страничку воочию, откройте Блокнот, наберите приведенный ниже код и сохраните в файле с именем 1.1.htm.
После этого откройте полученный файл в Web-обозревателе, для чего достаточно дважды щелкнуть по нему мышью.
Теперь давайте рассмотрим сам HTML-код нашей первой странички.
<НTML>
<HEAD>
<ТIТLЕ>Это моя первая страница</ТIТLЕ>
</HEAD>
<BODY>
<Н1>Пример моей первой страницы</Н1>
<Р>Это простейшая Web-страничка, созданная в стандартном
<1>Блокноте</1>
и отображенная в <I>Microsoft Internet Explorer</I>.</P>
</BODY>
</HTML>
<Н1>Пример моей первой страницы</Н1>
<Р> Это простейшая Web-страничка, созданная в стандартном <1>Блокноте</1>
и отображенная в <I>Microsoft Internet Explorer</I>.</P>
Вы видите какие-то слова, заключенные в угловые скобки < и >.
Это и есть теги HTML. Они задают форматирование текста. Скажем, строка <1>Блокноте</1> будет выведена курсивом, т. к. теги <i> и </i> задают курсивное начертание текста.
Причем, тег <i> помечает начало курсивного фрагмента (открывающий тег), а тег </i> — конец (закрывающий тег). А собственно фрагмент, заключенный между открывающим и закрывающим тегами, называется содержимым тега.
Это были теги физического форматирования текста, т. е. просто задающие, как текст должен выглядеть в окне Web-обозревателя.
Теперь рассмотрим теги логического форматирования, которые позволяют разбить текст на отдельные логические блоки.
В нашем небольшом фрагменте это теги <р> и <HI> (и соответствующие им закрывающие теги </Р> И </HI>). Они задают соответственно обычный текстовый параграф и заголовок первого уровня; при этом Web-обозреватель будет знать, что <н1>пример Web-страницы</н1> — это заголовок, и отобразит его соответствующим образом.
Как и в предыдущем случае, открывающий тег помечает начало логического блока текста, а закрывающий — конец.
Здесь мы говорили о так называемых парных тегах, когда открывающему тегу соответствует закрывающий. HTML определяет также набор одинарных тегов.
Один из них — это тег вставки графического изображения <IMG>. <IMG SRC="picture.gif"> Здесь мы видим, что само графическое изображение хранится в отдельном файле picture.gif
То есть, изображение — это один из внедренных элементов Web-страницы. Тег <IMG> содержит в себе параметр SRC, задающий имя файла изображения (такие параметры называются атрибутами тега) .
=============
Web-обозреватель, встретив в HTML-коде страницы тег <IMG>, загружает файл, чье имя задано атрибутом SRC, И отображает его.
Осталось рассмотреть совсем немного тегов, используемых для служебных целей и не отображаемых web-обозревателем. Они так и называются — невидимые теги.
Парный тег <BODY>. . .</BODY> используется для выделения тела Web- страницы, т. е. той ее части, которая будет отображаться в окне Web- обозревателя.
Кроме тела, Web-страница также должна содержать задаваемый парным тегом <HEAD>. . .</HEAD> заголовок, где помещается служебная информация. Этот заголовок не выводится браузером, а используется для внутренних нужд.
Не путайте заголовок Web-страницы и обычный текстовый заголовок, задаваемый тегом <HI>!) Среди этой служебной информации может быть название страницы, показываемое в заголовке окна Web-обозревателя; оно задается парным тегом <TITLE>. . .</TITLE>. Давайте рассмотрим заголовок нашей страницы.
<HEAD>
<TITLE>Моя первая страница</TITLE>
</HEAD>
Собственно, заголовок содержит только название нашей страницы, помеченное тегом <TITLE>. . .</TITLE>.
Но в подавляющем большинстве случаев заголовок содержит множество других данных, необходимых как вэб-обозревателю, так и другим программам, обеспечивающим функционирование Интернета и WWW.
Мы пока не будем их рассматривать. Взгляните еще раз на HTML-код нашей страницы. Заметьте, что одни теги вложены в другие. Так, тег <i> вложен в тег <р>, тег <р> — в тег <BODY>, а тег <BODY> — в тег <HTML>.
Такая вложенность или иерархия тегов в HTML встречается на каждом шагу. Давайте представим ее в виде схемы.
<HTML>
<HEAD>
<TITLE>
<BODY>
<H1>
<P>
<I>
Здесь убраны мешающие нам закрывающие теги и их содержимое. Величина отступа показывает уровень вложенности того или иного тега. Так, тег <BODY> имеет первый уровень вложенности, а тег <HI> — второй.
Теги предыдущих уровней вложенности называются родительскими тегами или родителями, а теги последующих уровней — дочерними тегами или потомками. Например, для тега <HEAD> родительским тегом будет <нтмl>, а дочерним — <TITLE>. Для тега <BODY> родителем будет тег <HTML>, а потомками — теги <Н1>, <Р> И <I>.
Весь HTML-код Web-страницы вложен внутрь парного тега <HTML>. . .</HTML>. Этот тег находится на самом высшем, нулевом, уровне вложенности и не имеет родителя.
Наверное, я уже перегрузил вас информацией, и вам может показаться, что HTML — это что-то запредельно сложное. На самом деле, все это очень просто, и вы можете легко создавать простейшие Web-странички вручную.
И в подтверждение этого давайте немного изменим код нашей страницы. Например, выделим название фирмы Microsoft жирным шрифтом. Тег, задающий "жирность", — <в>.. .</в>.
Заметьте, как мы вложили один тег в другой (эти теги выделены). Теперь слово "Microsoft" будет набрано и жирным шрифтом, и курсивно. Только обратите внимание на порядок вложенности тегов и не нарушайте его.
Если же вы случайно допустите ошибку и поместите теги так: <Р>Это простейшая Web-страничка, созданная в стандартном <1>Блокноте</1>
и отображенная в <BXI>Microsoft</B> Internet Explorer</I>.</P>
Тогда web-обозреватель может и не отобразить ваше творение. Запомните простое правило: закрывающие теги должны повторяться в порядке, обратном порядку соответствующих им открывающих тегов.
Сохраните полученный файл и откройте его в любом Web-обозревателе. Как видите, ничего особо сложного в языке HTML нет. Единственная сложность — это запомнить все его теги, но это вопрос времени и опыта.
Для того чтобы различные программы Web-обозревателей правильно отображали одну и ту же Web-страницу, язык HTML должен быть стандартизирован.
Наряду с тегами HTML, стандартизированными WWWC (стандартные тэги), Web-обозреватели поддерживают множество нестандартных тегов.
Эти теги были введены разработчиками той или иной программы вэб-обозревателя, чтобы получить преимущество перед конкурентами.
Они надеялись, что эти фирменные расширения впоследствии войдут в стандарт HTML, но этим надеждам так и не суждено было сбыться.
Однако теги остались, и они все так же поддерживаются. Мы опишем эти теги наряду со стандартными, но предупреждаем вас, что они поддерживаются не всеми программами.
=========================
Версия 4.01 станет последней версией языка HTML. В дальнейшем он будет постепенно заменен своим потомком — языком XHTML (extensible HyperText Markup Language — расширяемый язык гипертекстовой разметки).
Этот язык основан на популярном языке описания данных XML (extensible Markup Language — расширяемый язык разметки).
Вообщем, говорить на эту тему можно бесконечно, для короткого урока, я думаю достаточно. Всевозможных обучающих материалов (платных и бесплатных) по созданию веб-страниц и сайтов в сети можно найти ОЧЕНЬ много!
Если разбегаются глаза и сами затрудняетесь с выбором - можете написать мне.
Поделитесь с друзьями или поставьте закладку на эту страницу,
если планируете зайти на нее позже ... (Как создаются вэб-страницы
Язык HTML | Сделать страницу сайта )
blog comments powered by Disqus
Обучение в видеоформате - создание сайтов и заработок на них
Но создать свой сайт мало ... надо сделать, чтобы он был посещаемым
Что еще интересного о сайтостроении:
1. Зачем человеку или фирме нужен свой сайт?
2. Минусы и Плюсы при заказе сайта - изготовление сайтов
3. Как сделать свой сайт - этапы создания сайта
4. Как создаются веб-страницы
6. Что такое CMS? Зачем нужны движки сайтов?
7. Какую CMS выбрать - коммерческую или бесплатную?
8. Бесплатный движок сайта (CMS) - Joomla!
9. Правильный выбор цветовой гаммы для сайта
10. Психологическое воздействие цветов.
11. Какой текст удобнее читать на мониторе?
12. Построение цветовой гаммы - модели цветоделения
13. Советы по подбору цветовой гаммы для сайта
14. Почему Вашему бизнесу необходимо иметь сайт
15. Сайт должен быть красивым и удобным - это залог успеха!
16. Сайтостроительство - создание и разработка сайтов
17. Создание уникального и неповторимого сайта
18. Зачем делать личный официальный сайт
19. Получить востребованную интересную профессию -
oбучение созданию сайтов - с этой работы Вас никто не уволит!20. Как правильно составить
техническое задание на разработку и создание сайта21. Magento - лучший бесплатный движок CMS для сайта интернет-магазина
22. Cоздание сайтов с платным доступом | система платного доступа сайта
Если у Вас уже есть сайт, но прибыль и посещаемость его оставляет
желать лучшего ... необходимо узнать причину данной проблемы
