После полученных в предыдущем уроке знаний вы уже через несколько минут создадите свой первый web-сайт.

Как?

В Уроке 1 мы узнали, что необходимо для создания web-сайта: браузер и Notepad (или аналогичная программа — текстовый редактор). Поскольку вы читаете этот текст, то ваш браузер уже открыт. Вам нужно открыть лишь дополнительное окно браузера (открыть браузер ещё раз), и вы сможете читать этот учебник и одновременно видеть ваш новый web-сайт.

Также откройте Notepad (в Accessories в Programs — Start menu):

Теперь мы готовы!

Что я могу?

Начнём с чего-нибудь попроще. Как насчёт страницы, на которой написано: «Ура! Это моя первая web-страница.» Читайте дальше, и вы узнаете, как это легко сделать.

HTML прост и логичен. Браузер читает HTML так, как читаете его вы: сверху вниз и слева направо. Таким образом, HTML-документ начинается и заканчивается тем, чем должен начинаться и заканчиваться текст.

Во-первых необходимо сообщить браузеру, что вы будете «говорить» с ним на языке HTML. Это делается тэгом (тут ничего нового). Так что, прежде чем напечатать что-либо, нужно поставить тэг «» в первой строке документа Notepad.

Как вы, возможно, помните из предыдущего урока, это открывающий тэг, который должен иметь и закрывающий тэг после того, как вы закончите ввод HTML. Поэтому, чтобы не забыть, поставьте закрывающий тэг «» на пару строк ниже и вводите весь текст документа между и .

Следующее, что необходимо, это «head» (голова или «шапка»), которая содержит служебную информацию о вашем документе, и «body» (тело), содержимое самого документа. Поскольку HTML логичен, head ( и ) находятся выше body ( и ).

Ваш документ теперь должен выглядеть так:




Обратите внимание, как мы структурировали тэги по строкам (с помощью клавиши Enter) и какие сделали отступы (клавишей Tab). В принципе не важно, как вы структурируете ваш HTML-документ. Но, для облегчения чтения кода, настоятельно рекомендуем структурировать ваш HTML с помощью перевода строк и отступов, как в нашем примере.

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

Ну ладно, но как мне добавить содержимое в мой web-сайт?

Как вы уже видели ранее, в вашем HTML-документе есть две части: а head и body. В разделе head вы вносите информацию о странице, а body содержит информацию самой страницы.

Например, если вы хотите дать название документу, чтобы оно появлялось в верхней строке браузера, это нужно сделать в разделе «head». Тэг для названия — :</p> <p> Обратите внимание, что этот title не появляется на самой web-странице. Всё, что вы хотите видеть на самой странице, является содержимым/content и должно, следовательно, находиться между тэгами «body».</p> <p>Итак, мы хотим, чтобы на странице выводилось «Ура! Это моя первая страница.» Этот текст, который вы хотите показать, и, естественно, он должен располагаться в разделе body. Поэтому в разделе body напечатайте следующее:</p> <p>Ура! Это моя первая страница.</p> <p> Буква p в <p> это сокращение от «paragraph» и означает именно это — параграф текста.</p> <p>Ваш HTML-документ должен теперь иметь такой вид:</p> <p> <html></p> <p> <head></p> <p> </head></p> <p> <body></p> <p>Hurrah! This is my first page.</p> <p> </body></p> <p> </html></p> <p> Готово! Вы создали свой первый настоящий web-сайт!</p> <p>Теперь нужно сохранить его на жёсткий диск, а затем открыть в вашем браузере:<br /> •В Notepad выберите «Save as…» в меню «File».<br /> •Выберите «All Files» в боксе «Save as type». Это очень важно — иначе вы сохраните файл как обычный текстовый документ, а не как HTML-документ.<br /> •Теперь сохраните ваш документ как «page1.htm» (расширение «.htm» указывает, что это HTML-документ. «.html» даст тот же результат. Я всегда использую «.htm», но вы можете выбрать любое из этих двух расширений). Где вы сохраните документ на жёстком диске — не имеет значения, главное запомнить это место, чтобы потом легко найти файлы.</p> <p>Теперь откроем браузер:<br /> •Выберите «Open» в меню «File» (CTRL+O).<br /> •Щёлкните «Browse» в появившемся диалоге.<br /> •Теперь найдите ваш HTML-документ и щёлкните «Open».</p> <p>Теперь вы должны увидеть страницу с текстом «Ура! Это моя первая страница.» в вашем браузере. Поздравляем!</p> <p>Если вы хотите, чтобы весь мир увидел ваше творение, можете перейти в Урок 14 и вы узнаете, как выгрузить вашу страницу в Internet. Или наберитесь терпения и читайте дальше. Всё ещё только начинается.</p> </div>  <!-- You can start editing here. --> <!-- If comments are closed. --> <p class="nocomments">Комментарии закрыты.</p> </div><!--/post --> </div><!--/content --> <div id="sidebar"> <div id="left"> <li id="tag_cloud-3" class="widget widget_tag_cloud"><h2 class="sidebartitle">Облако меток</h2><div class="tagcloud"><a href='http://infoglobal.ru/wps/tag/body/' class='tag-link-47' title='1 запись' style='font-size: 8pt;'>body</a> <a href='http://infoglobal.ru/wps/tag/dreamweaver/' class='tag-link-26' title='1 запись' style='font-size: 8pt;'>dreamweaver</a> <a href='http://infoglobal.ru/wps/tag/head/' class='tag-link-46' title='1 запись' style='font-size: 8pt;'>head</a> <a href='http://infoglobal.ru/wps/tag/html-2/' class='tag-link-16' title='1 запись' style='font-size: 8pt;'>html</a> <a href='http://infoglobal.ru/wps/tag/web/' class='tag-link-43' title='1 запись' style='font-size: 8pt;'>web</a> <a href='http://infoglobal.ru/wps/tag/brouzer/' class='tag-link-20' title='1 запись' style='font-size: 8pt;'>броузер</a> <a href='http://infoglobal.ru/wps/tag/bukva/' class='tag-link-41' title='1 запись' style='font-size: 8pt;'>буква</a> <a href='http://infoglobal.ru/wps/tag/variant/' class='tag-link-29' title='1 запись' style='font-size: 8pt;'>вариант</a> <a href='http://infoglobal.ru/wps/tag/vvedenie/' class='tag-link-7' title='1 запись' style='font-size: 8pt;'>введение</a> <a href='http://infoglobal.ru/wps/tag/veb-dizajn/' class='tag-link-6' title='1 запись' style='font-size: 8pt;'>веб-дизайн</a> <a href='http://infoglobal.ru/wps/tag/vnimanie/' class='tag-link-45' title='1 запись' style='font-size: 8pt;'>внимание</a> <a href='http://infoglobal.ru/wps/tag/gipertekst/' class='tag-link-27' title='1 запись' style='font-size: 8pt;'>гипертекст</a> <a href='http://infoglobal.ru/wps/tag/detal/' class='tag-link-31' title='1 запись' style='font-size: 8pt;'>деталь</a> <a href='http://infoglobal.ru/wps/tag/dokument/' class='tag-link-42' title='1 запись' style='font-size: 8pt;'>документ</a> <a href='http://infoglobal.ru/wps/tag/zagolovok/' class='tag-link-39' title='1 запись' style='font-size: 8pt;'>заголовок</a> <a href='http://infoglobal.ru/wps/tag/zagruzka/' class='tag-link-115' title='2 записи' style='font-size: 22pt;'>загрузка</a> <a href='http://infoglobal.ru/wps/tag/zakryvayushhij/' class='tag-link-35' title='1 запись' style='font-size: 8pt;'>закрывающий</a> <a href='http://infoglobal.ru/wps/tag/izuchenie/' class='tag-link-36' title='1 запись' style='font-size: 8pt;'>изучение</a> <a href='http://infoglobal.ru/wps/tag/indeks/' class='tag-link-18' title='1 запись' style='font-size: 8pt;'>индекс</a> <a href='http://infoglobal.ru/wps/tag/kod/' class='tag-link-24' title='1 запись' style='font-size: 8pt;'>код</a> <a href='http://infoglobal.ru/wps/tag/kompyuter/' class='tag-link-32' title='1 запись' style='font-size: 8pt;'>компьютер</a> <a href='http://infoglobal.ru/wps/tag/kontrol/' class='tag-link-22' title='1 запись' style='font-size: 8pt;'>контроль</a> <a href='http://infoglobal.ru/wps/tag/metka/' class='tag-link-33' title='1 запись' style='font-size: 8pt;'>метка</a> <a href='http://infoglobal.ru/wps/tag/navyk/' class='tag-link-10' title='1 запись' style='font-size: 8pt;'>навык</a> <a href='http://infoglobal.ru/wps/tag/nizhnij/' class='tag-link-44' title='1 запись' style='font-size: 8pt;'>нижний</a> <a href='http://infoglobal.ru/wps/tag/otkryvayushhij/' class='tag-link-34' title='1 запись' style='font-size: 8pt;'>открывающий</a> <a href='http://infoglobal.ru/wps/tag/parametr/' class='tag-link-83' title='2 записи' style='font-size: 22pt;'>параметр</a> <a href='http://infoglobal.ru/wps/tag/primer/' class='tag-link-37' title='2 записи' style='font-size: 22pt;'>пример</a> <a href='http://infoglobal.ru/wps/tag/programma/' class='tag-link-19' title='1 запись' style='font-size: 8pt;'>программа</a> <a href='http://infoglobal.ru/wps/tag/programmirovanie/' class='tag-link-11' title='1 запись' style='font-size: 8pt;'>программирование</a> <a href='http://infoglobal.ru/wps/tag/prosto/' class='tag-link-25' title='1 запись' style='font-size: 8pt;'>просто</a> <a href='http://infoglobal.ru/wps/tag/rabota/' class='tag-link-13' title='1 запись' style='font-size: 8pt;'>работа</a> <a href='http://infoglobal.ru/wps/tag/registr/' class='tag-link-40' title='1 запись' style='font-size: 8pt;'>регистр</a> <a href='http://infoglobal.ru/wps/tag/redaktor/' class='tag-link-15' title='1 запись' style='font-size: 8pt;'>редактор</a> <a href='http://infoglobal.ru/wps/tag/sajt/' class='tag-link-8' title='1 запись' style='font-size: 8pt;'>сайт</a> <a href='http://infoglobal.ru/wps/tag/soobshhenie/' class='tag-link-116' title='2 записи' style='font-size: 22pt;'>сообщение</a> <a href='http://infoglobal.ru/wps/tag/standart/' class='tag-link-23' title='1 запись' style='font-size: 8pt;'>стандарт</a> <a href='http://infoglobal.ru/wps/tag/stroka/' class='tag-link-38' title='1 запись' style='font-size: 8pt;'>строка</a> <a href='http://infoglobal.ru/wps/tag/teg/' class='tag-link-17' title='1 запись' style='font-size: 8pt;'>тег</a> <a href='http://infoglobal.ru/wps/tag/tekst/' class='tag-link-30' title='1 запись' style='font-size: 8pt;'>текст</a> <a href='http://infoglobal.ru/wps/tag/urok/' class='tag-link-12' title='1 запись' style='font-size: 8pt;'>урок</a> <a href='http://infoglobal.ru/wps/tag/ucheba/' class='tag-link-14' title='1 запись' style='font-size: 8pt;'>учеба</a> <a href='http://infoglobal.ru/wps/tag/uchebnik/' class='tag-link-9' title='1 запись' style='font-size: 8pt;'>учебник</a> <a href='http://infoglobal.ru/wps/tag/funkciya/' class='tag-link-21' title='1 запись' style='font-size: 8pt;'>функция</a> <a href='http://infoglobal.ru/wps/tag/yazyk/' class='tag-link-28' title='1 запись' style='font-size: 8pt;'>язык</a></div> </li> </div> <!--/sidebar --> <br><br><br><br><br><br><br> </td></tr></table> <center> <table width=600 border=0 cellpadding=0 cellspacing=0><tr> <td width=600><center> <h2>Рейтинг и счетчики</h2><br> <noindex> <CENTER><a href="http://www.nic.ru/" target="_top"><img src="http://www.nic.ru/images/ru-center5.gif" width="75" height="36" border="0" alt="Регистрация доменов"></a> <!--Rating@Mail.ru COUNTER--><script language="JavaScript"><!-- d=document;a='';a+=';r='+escape(d.referrer) js=10//--></script><script language="JavaScript1.1"><!-- a+=';j='+navigator.javaEnabled() js=11//--></script><script language="JavaScript1.2"><!-- s=screen;a+=';s='+s.width+'*'+s.height a+=';d='+(s.colorDepth?s.colorDepth:s.pixelDepth) js=12//--></script><script language="JavaScript1.3"><!-- js=13//--></script><script language="JavaScript"><!-- d.write('<a href="http://top.mail.ru/jump?from=360336"'+ ' target=_top><img src="http://top.list.ru/counter'+ '?id=360336;t=210;js='+js+a+';rand='+Math.random()+ '" alt="Рейтинг@Mail.ru"'+' border=0 height=31 width=88></a>') if(js>11)d.write('<'+'!-- ')//--></script><noscript><a target=_top href="http://top.mail.ru/jump?from=360336"><img src="http://top.list.ru/counter?js=na;id=360336;t=210" border=0 height=31 width=88 alt="Рейтинг@Mail.ru"></a></noscript><script language="JavaScript"><!-- if(js>11)d.write('--'+'>')//--></script><!--/COUNTER--> <!-- SpyLOG f:0211 --> <script language="javascript"><!-- Mu="u4408.18.spylog.com";Md=document;Mnv=navigator;Mp=0; Md.cookie="b=b";Mc=0;if(Md.cookie)Mc=1;Mrn=Math.random(); Mn=(Mnv.appName.substring(0,2)=="Mi")?0:1;Mt=(new Date()).getTimezoneOffset(); Mz="p="+Mp+"&rn="+Mrn+"&c="+Mc+"&t="+Mt; if(self!=top){Mfr=1;}else{Mfr=0;}Msl="1.0"; //--></script><script language="javascript1.1"><!-- Mpl="";Msl="1.1";Mj = (Mnv.javaEnabled()?"Y":"N");Mz+='&j='+Mj; //--></script><script language="javascript1.2"><!-- Msl="1.2";Ms=screen;Mpx=(Mn==0)?Ms.colorDepth:Ms.pixelDepth; Mz+="&wh="+Ms.width+'x'+Ms.height+"&px="+Mpx; //--></script><script language="javascript1.3"><!-- Msl="1.3";//--></script><script language="javascript"><!-- My="";My+="<a href='http://"+Mu+"/cnt?cid=440818&f=3&p="+Mp+"&rn="+Mrn+"' target='_blank'>"; My+="<img src='http://"+Mu+"/cnt?cid=440818&"+Mz+"&sl="+Msl+"&r="+escape(Md.referrer)+"&fr="+Mfr+"&pg="+escape(window.location.href); My+="' border=0 width=88 height=31 alt='SpyLOG'>"; My+="</a>";Md.write(My);//--></script><noscript> <a href="http://u4408.18.spylog.com/cnt?cid=440818&f=3&p=0" target="_blank"> <img src="http://u4408.18.spylog.com/cnt?cid=440818&p=0" alt='SpyLOG' border='0' width=88 height=31 > </a></noscript> <!-- SpyLOG --> </noindex> <br><br> </td></tr></table> <table width=600 border=0 cellpadding=0 cellspacing=0><tr><td widh=600> <td width=600><center><br><br> Важная информация: </td></tr></table> </body> </HTML>