Главная страницаОбратная связьКарта сайта

Как создавать страницы, как выучить язык HTML

Создание веб-страниц, или уроки HTML

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

Допустим, что некий пользователь по имени Сергей Сергеев хочет рассказать миру о себе — кто он такой, что любит и т. д., т. е. создать свою «домашнюю страничку в Интернете». С чего ему начать? Как приступить к созданию веб-страницы?



Рис. 9.40 Программа-браузер Amaya

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

Итак, даже если вы напишете простой текст, он уже может быть отображён программой просмотра веб-страниц. Например, вы, используя программу «блокнот» (Notepad), написали так:

Домашняя страница Сергея Сергеева.

Сергей Сергеев— писатель юморист, автор 20 рассказов.

В жизни большой любитель собак и компьютерных игр.

и сохранили этот файл с расширением .html

Пользователь увидит эту страничку такой, как изображено на рис. 9.41. Это уже что-то, хотя и не слишком привлекательно: во-первых, исчезло форматирование текста (абзацы), во-вторых, как-то скучно смотрится. Кроме того, есть такие строгие браузеры, которые вообще не отобразят этот текст, если не увидят в нём подтверждение того, что он написан на языке HTML. Расширение .html такой браузер может посчитать недостаточным подтверждением этого. Поэтому придётся написать несколько дополнительных строк:

<HTML>

<BODY>

Домашняя страница Сергея Сергеева.

Сергей Сергеев— писатель-юморист, автор 20 рассказов.

В жизни большой любитель собак и компьютерных игр.

</BODY>

</HTML>



Рис. 9.41 Отображение простого текста в браузере
Слова, заключённые в угловые скобки, являются служебными словами языка HTML. Их принято называть тэгами (tags). Тэги никогда не отображаются при просмотре страницы — они служат для управления оформлением.

Тэг <HTML>, который вы видите в первой строке, означает, что наш текст действительно написан на HTML. Большинство тэгов языка HTML обязательно требует присутствия «пары» — закрывающего тэга. В нашем примере в первой строке стоит тэг <HTML>, а в последней — закрывающий тэг </HTML>. Всё, что расположено между ними, будет считаться HTML-документом.

В языке HTML совершенно не имеет значения, строчными или прописными буквами написаны тэги. Поэтому можно написать <HTML> или <html>, для браузера это будет одно и то же. А вот в новейшей версии этого языка, которая называется XHTML, все тэги необходимо писать только строчными буквами.

В рассмотренном примере вы видите ещё один тэг — <BODY>. Всё, что расположено между ним и его закрывающей парой (</BODY>), будет считаться телом документа и отобразится на экране. HTML-документы, помимо тела, обычно содержат ещё и заголовок, в котором располагается различная служебная информация. Заголовок располагается между тэгами <HEAD> и </HEAD>. Например, следующий код:

<HTML> <HEAD>

<Т1ТЬЕ>Домашняя страница Сергея Сергеева.</TITLE> </HEAD> <BODY>

Домашняя страница Сергея Сергеева.

Сергей Сергеев— писатель-юморист,   автор 20 рассказов. В жизни большой любитель собак и компьютерных игр. </BODY> </HTML>

будет отображён в браузере, как показано на рис. 9.42. Обратите внимание, что в заголовке окна браузера также появились слова «Домашняя страница Сергея Сергеева». Это произошло потому, что в секции <HEAD> мы поместили этот текст между тэгами <TITLE> и </ТПЪЕ>.

Теперь вспомним о том, что при отображении в браузере наш текст потерял форматирование. Это произошло потому, что браузер игнорирует перевод строки. Однако если вы хотите видеть свой текст с таким же разбиением на строки, какое вы сделали в «Блокноте», нужно заключить его между тэгами <PRE> и </PRE>:

<HTML> <HEAD>

<Т1ТЬЕ>Домашняя страница Сергея Сергеева.</TITLE> </HEAD> <BODY> <PRE>

Домашняя страница Сергея Сергеева.

Сергей Сергеев— писатель-юморист,   автор 20 рассказов. В жизни большой любитель собак и компьютерных игр. </PRE> </BODY> </HTML>

Результат показан на рис. 9.43. Уже лучше, не правда ли? Однако есть два момента, из-за которых мы не советовали бы вам без крайней необходимости употреблять тэг <PRE>.

Во-первых, как вы видите на рисунке, текст теперь отобразился так называемым моноширинным шрифтом, — похожим на пишущую машинку. Большинство браузеров отображают текст между <PRE> и </PRE> именно так.

Во-вторых (и это главное), в том, что браузер игнорирует разбиение на строки, есть свой смысл. Например, написанная вами строка может не поместиться на экран, и тогда, если нет тэга <PRE>, браузер автоматически перенесёт часть её на следующую строку, и пользователю будет удобно читать весь текст. Тэг <PRE> не позволяет этого сделать, и если строка «вылезет» за пределы экрана, то, чтобы прочитать её, придётся воспользоваться горизонтальной полосой прокрутки, что неудобно и обычно раздражает. Другими словами, если вы используете тэг <PRE>, вам придётся самим заботиться о длине строк, а это затруднительно, поскольку вы заранее не знаете, какой размер окна браузера будет у пользователя. Без тэга <PRE> браузер будет заботиться об этом сам.

По этой причине для форматирования текста создано множество специальных тэгов. Рассмотрим самый простой из них — тэг <BR>. В том месте, где стоит этот тэг, будет осуществлён перевод строки, даже если в исходном тексте вы продолжаете текст на этой же строке, это уже не имеет значения. Тэг <BR> не имеет закрывающей «пары», он употребляется сам по себе. Вот как сохранить наше форматирование текста без использования тэга <PRE>:

<HTML> <HEAD>

<TITLE>Домашняя страница Сергея Сергеева.</TITLE> </HEAD> <BODY>

Домашняя страница Сергея Сергеева. <BRxBR> Сергей Сергеев— писатель-юморист,   автор 20 рассказов.<BR>

В жизни большой любитель собак и компьютерных игр. </BODY> </HTML>

Результат вы можете видеть на рис. 9.44. Как видите, форматирование текста сохранено, шрифт не превратился в моноширинный, а, кроме того, если пользователь почему-либо будет просматривать страничку в очень узком окне, он всё равно увидит весь текст.



Рис. 9.44 Пример простейшей странички с форматированием текста с помощью
И, наконец, ещё одна деталь: иногда браузеры или другие программы обработки требуют, чтобы в начале HTML-документа обязательно стоял служебный тэг <!DOCTYPE>, в атрибутах которого должна быть указана версия языка и некоторая другая информация. Так что в корректном виде наша страничка будет выглядеть вот так:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML  4.0 Transitional //EN»> <HTML> <HEAD>

<Т1^Е>Домашняя страница Сергея Сергеева. </TITLE> </HEAD> <BODY>

Домашняя страница Сергея Сергеева.<BR><BR> Сергей Сергеев— писатель-юморист,   автор 20 рассказов.<BR>

В жизни большой любитель собак и компьютерных игр. </BODY> </HTML>

Вообще говоря, писать текст веб-странички в программе «Блокнот», конечно, можно, однако это довольно трудоёмкий процесс. Удобнее создавать веб-странички с помощью специальных программ, например:

■ TextPad — бесплатная программа, очень похожая на «блокнот», од­
нако умеющая подсвечивать синтаксис языка HTML, т. е. выделять
тэги и другие элементы языка своим цветом;

ш Arachnofilia — бесплатная программа, позволяющая не только подсвечивать синтаксис HTML, но и просматривать результаты написанного в соседнем окне, причём делать это можно практически одновременно с процессом написания кода HTML; кроме того, она позволяет автоматизировать ввод некоторых тэгов;

ш Macromedia Homesite (рис. 9.45) — мощная коммерческая программа, позволяющая автоматизировать ввод элементов HTML, Javascript и CSS (CSS — язык стилевой разметки, использующийся для указания внешнего вида веб-страниц), просматривать результаты ввода, проверять ошибки, вносить изменения в структурное дерево тэгов, пользоваться многими другими удобными инструментами;

ш Macromedia DreamWeaver — ещё один достаточно мощный веб-редактор от компании Macromedia;

■ Adobe GoLive — программа, сочетающая в себе возможности ав­
томатизированного ввода тэгов и визуальной редакции в режиме
WYSIWYG (Что вы видите, то вы и получаете). Итак, представим себе, что ваша веб-страничка уже готова, и вы с умилением любуетесь ею на экране своего компьютера. Но как сделать, чтобы и другие посетители Интернета могли ею полюбоваться?

Для этого существует несколько способов. В принципе, можно это сделать, даже никуда эту страничку не копируя. Это имеет смысл только в том случае, если ваш компьютер постоянно подключён к сети Интернет (например, с использованием выделенной линии). А если ваш компьютер имеет постоянное подключение к Интернету, то, скорее всего, у него уже есть и собственный IP-адрес. Таким образом, для того чтобы позволить всем созерцать вашу страничку, вам останется только установить специальную программу, называемую веб-сервером, например, Apache, и разместить вашу страничку в папке, доступной для чтения по сети. Впрочем, это уже отдельная тема.



Рис. 9.45 Программа Homesite
Но гораздо проще разместить веб-страничку на каком-нибудь другом компьютере, специально для этого настроенном. Это может быть, например, сервер вашего Интернет-провайдера (как правило, любой провайдер предоставляет такую услугу) или один из так называемых бесплатных Интернет-серверов. На бесплатном Интернет-сервере вы можете бесплатно получить некоторое количество дискового пространства для вашей веб-странички. Таких серверов в Интернете множество. Вот только некоторые из них: сообщество Geocities (www.yahoo.com), ХООМ (xoom.com/home), российский сервер «Халява» (www.halyava. ru), сервер www.chat.ru и многие другие.

Получив место на сервере, можно загрузить туда все файлы вашей странички. Для этого удобнее всего воспользоваться так называемым FTP-соединением. О передаче файлов по протоколу FTP мы ещё поговорим.

Хорошо, а как же будет «называться» страничка? Как другие пользователи Интернета смогут её найти? Вы уже знаете, что любой компьютер в сети Интернет имеет свой уникальный числовой IP-адрес. В принципе, посетители вашей странички могут обращаться по этому адресу, набирая его числовое значение в адресной строке браузера. Однако более удобно указывать адрес доменным именем, которое вы уже неоднократно встречали в этой книге в интернет-адресах.

Доменное имя строится в соответствии со строгими правилами и состоит из нескольких слов, разделенных точками. Самое правое слово называется идентификатором домена верхнего уровня. В большинстве случаев это двухбуквенный код страны, которой принадлежит данный ресурс. Например, для России таким идентификатором является .ru,. ua — для Украины, .de — для Германии, .fr — для Франции и т. д. Кроме того, идентификатором домена верхнего уровня может являться трёхбуквенный код, означающий «направленность» ресурса. Например, .com — коммерческая организация, .gov — правительственная, .mil — военная и т. д.

Второе справа слово в доменном имени называется доменом второго уровня. Домены второго уровня выдаются (обычно за деньги) владельцами доменов первого (верхнего) уровня. В любом случае, иметь собственный домен второго уровня считается достаточно престижным.

Владельцы доменов второго уровня, в свою очередь, могут распоряжаться доменами третьего уровня и т. д., но дальнейшее «развёртывание» имён в большинстве случаев имеет только декоративный смысл. Например, многие начинают имя своего сайта с сочетания «www», чтобы подчеркнуть, что их ресурс относится к World Wide Web.

Поясним сказанное на примере. Предположим, что пользователь Сергей Сергеев зарегистрировался у гипотетического провайдера Black Line (такого на самом деле нет), выбрав себе регистрационное имя sergesergeev. У провайдера есть собственный сервер и сайт с адресом, к примеру, www.blackline.ru (на самом деле такого нет, точнее, может, и есть, но это может быть ресурс вовсе на другую тему). На этом сервере провайдер размещает веб-странички своих пользователей. После того, как Сергей Сергеев разместит свою веб-страничку на сервере провайдера, она будет иметь примерно такой адрес: www.blackline. ru/~sergesergeev, или просто www.blackline.ru/sergesergeev. Некоторые провайдеры позволяют использовать регистрационное имя в качестве домена третьего уровня: www.sergesergeev.blackline.ru.

Если же Сергей Сергеев решил разместить свою страничку на бесплатном сервере, предположим, в сообществе Geocities, то там ему выдадут какое-нибудь длинное имя, например: www.geocities. com/SilicoriVaIIey/6285 (кстати, сообщество Geocities и его каталог SiliconValley — реальные названия, и вполне возможно, что и страничка с номером 6285 в нём реально существует). На первый взгляд, это не очень удобно. Однако здесь самое время вспомнить о том, что как и в случае с почтовым ящиком, если вы разместите свою страничку у провайдера, а затем решите его сменить, то вы потеряете к ней доступ. А если ваша веб-страничка расположена на Geocities или подобном сервере, то вы от провайдера не зависите.

Но как же тогда получить для странички короткое, запоминающее имя? Для этого существуют многочисленные службы переадресации, например, come.to, www.da.ru, attend .to. Например, если Сергей Сергеев разместил на своей страничке информацию о своей фирме «Филин», он может бесплатно зарегистрировать такие имена, как filin.da.ru (или www.filin.da.ru), come.to/filin и пр. При этом пользователь, набравший эти адреса, будет автоматически переадресовываться на веб-страничку, размещённую где угодно — на сервере провайдера, на сервере Geocities или ещё где-нибудь.

Ну, а если вы хотите приобрести для себя домен второго уровня, например www.filin.ru, то вам придётся обратиться в соответствующую организацию. Так, распределением имён в домене.ru занимается организация NIC (www.nic.ru). За регистрацию придётся заплатить деньги, однако в итоге вы будете иметь легко запоминающийся адрес веб-странички. Кстати, многие пользователи, игнорируя услуги поисковых машин, часто пытаются найти веб-странички, набирая наугад адреса типа www.имя_кoмпaнии.ru, так что, имея такое имя, вы получаете большие шансы быть посещёнными.

Обсудить статью на форуме


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

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


Copyright © 2008 - 2017 Дискета.info