Веб-разработка 101: Часть 2, создание своей первой веб-страницы


01.12.2011

В первой части вы освоили, что такое WebMatrix, видели, как ее установить и как запустить. В этой главе вы будете использовать эти знания для создания своего первого веб-сайта, и укрепите знания, создав первую веб-страницу.

Создаем свой сайт.

Выберите опцию Создать сайт из шаблона. Перед вами отобразится диалоговое окно, см. ниже. Обратите внимание, что вы видете множество различных шаблонов, поскольку WebMatrix все время расширяется. Далее необходимо выбрать Пустой шаблон сайта и дать ему название «Movies».

Веб-разработка 101: Часть 2, создание своей первой веб-страницы

Когда вы нажмете OK, WebMatrix создаст новый пустой веб-сайт. Далее он будет загружен в редакторе WebMatrix, как показано здесь:

Web Development 101: Part 2, Create your first Web Page

Прежде, чем вы продолжите чтение, необходимо понять информацию, которая отобразилась перед вами. WebMatrix – это больше чем просто инструмент редактирования кода. Она интегрирует веб-сервер под названием IIS Express. Веб-сервер – это специальная часть программного обеспечения, которая принимает запросы на данные по Интернету, и отвечает, поставляя данные веб-браузеру.

Когда вы открываете свой браузер и вписываете в URL что-то подобное - http://www.microsoft.com, вы вызываете веб-сервер Microsoft, и он отвечает, отправляя код, HTML, JavaScript, CSS, изображения и другое. Ваш браузер после этого собирает все данные в единую страницу.

Веб-разработка 101: Часть 2, создание своей первой веб-страницы

Наличие сервера, встроенного в WebMatrix, делает разработку своего сайта более легкой, похожей на разработку веб-сервера в Интернете. Если вы посмотрите на имя сайта на форме, изображенной ниже (в нашем случае это «Movies»), то увидите, что название сервера в адресе сайта http://localhost:8946 означает, что узел к серверу локален, то есть разрабатываемая машина является вашей.

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

Создание первой веб-страницы

Вы заметили, что WebMatrix позволяет перемещаться между различными рабочими пространствами, нажимая кнопки слева. В настоящее время кнопка Site нажата, и отображает такие детали о вашем сайте, как URL сайта, и другие инструменты, которые вы можете использовать, например, можно мониторить запросы к сайту. Вы изучите каждое из этих рабочих пространств, поскольку читаете данную статью, но для начала, выберите рабочее пространство Files, нажав соответствующую кнопку.

Веб-разработка 101: Часть 2, создание своей первой веб-страницы

WebMatrix откроет рабочее пространство Files, и так как у вас еще нет файлов на сайте, пространство будет пустым. Однако, есть хорошая дружественная кнопка, которая позволяет вам добавлять файл к своему сайту, или можно использовать кнопку New на панели инструментов, для создания нового файла.

Web Development 101: Part 2, Create your first Web Page

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

Web Development 101: Part 2, Create your first Web Page

Выберите тип файла HTML, назовите его default.html и нажмите ОК. Теперь WebMatrix создаст простой файл HTML и откроет его для Вас.

Веб-разработка 101: Часть 2, создание своей первой веб-страницы

HTML (Язык разметки гипертекста), файл – это просто ряд инструкций, которые говорят браузеру как отрисовать страницу. Обычно он состоит из Заголовка, который непосредственно включает инструкции о странице, и Тела, которое является содержанием страницы. Контент создается с помощью тегов, которые открываются именем тега в угловых скобках, как < body > и заканчиваются именем с наклонной чертой, также в угловых скобках, такой как </body>. Поэтому контент между этими тегами будет обработан браузером как тело страницы. Вы можете узнать больше о HTML и его тегах в w3cschools.com. http://w3schools.com/html/default.asp.

Отредактируйте свою страницу так, чтобы она была похожа на подобный код:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title>My Favorite Movies</title>

</head>

<body>

<h1>A list of my Favorite Movies</h1>

<ol>

<li>It's a wonderful life</li>

<li>Lord of the Rings</li>

<li>The Fourth World</li>

<li>The Lion King</li>

</ol>

</body>

</html>

Вы вводите некоторый текст в тег <title>, так же как помещаете некоторый код между тегами < body >. Этот код будет использовать < h1> для Заголовка 1 текста стиля, < ol >, чтобы сообщить браузеру, что вы обрабатываете список и некоторые элементы < li >, чтобы сообщить браузеру, что вы представляете некоторые элементы списка.

На панели инструментов WebMatrix вы увидите кнопку ‘Run’.

Веб-разработка 101: Часть 2, создание своей первой веб-страницы

Выберите её, WebMatrix запустит браузер и откроет веб-сайт, работающий на вашем локальном сервере.

Веб-разработка 101: Часть 2, создание своей первой веб-страницы

Здесь есть много вариантов. Позвольте детализировать их.

Веб Сервер

Видете строку поиска на браузере? Она не открывает файл с вашего жесткого диска, но запускает веб-сервер и указывает браузеру на сервер, запрашивая обслуживание файла default.html.

Web Development 101: Part 2, Create your first Web Page

Помотрите вниз на системный трей своего ПК, и вы увидите, что небольшой значок указывает на то, что веб-сервер IIS Express работает.

Web Development 101: Part 2, Create your first Web Page

Щелкните правой кнопкой мыши по нему, и вы увидите, что он запустит Фильмы на вашем сайте.

Веб-разработка 101: Часть 2, создание своей первой веб-страницы

Заголовок страницы

Теперь обратите внимание на вкладку браузера для данной страницы. Она должна содержать текст ‘My Favorite Movies’. Для сравнения вот тот же самый сайт, работающий в Internet Explorer, Chrome, Safari, FireFox и Opera. Заметьте, что текст - это то, что вы ввели в теге < title > и в теге < head > страницы, и тем самым, вы сообщили браузеру, что это есть название страницы. Различные браузеры обрабатывают название страницы по-разному.

Internet Explorer:

Веб-разработка 101: Часть 2, создание своей первой веб-страницы

Chrome:

Веб-разработка 101: Часть 2, создание своей первой веб-страницы

Safari:

Web Development 101: Part 2, Create your first Web Page

Firefox:

Web Development 101: Part 2, Create your first Web Page

Opera:

Веб-разработка 101: Часть 2, создание своей первой веб-страницы

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

Примечание: Запуск вашего сайта в различных браузерах

Действительно хорошим аспектом WebMatrix, кроме предоставления веб-сервера, который работает на вашей машине, является возможность быстро запустить любой из установленных браузеров. Вы можете видеть это, щелкая по стрелке вниз у основания кнопки Run в ленте инструментов WebMatrix.

Web Development 101: Part 2, Create your first Web Page

В списке отобразятся только установленные браузеры.

Тело страницы

В своем коде вы использовали тег < h1> рядом с фразой ‘A list of my Favorite Movies’. Это было командой браузеру использовать стиль ‘Заголовок 1’, и отображалось большим полужирным шрифтом.

WebMatrix - Веб-разработка 101: Часть 2, создание своей первой веб-страницы

Наконец, вы выписали список своих любимых фильмов, используя < ol > (для ‘Ordered List’’) и < li > теги (для ‘List Item’), и браузер отображал их. Обратите внимание, что вы не помещали маркеры в список,а браузер так или иначе отображал их, потому что это стиль по умолчанию, который браузер будет использовать, чтобы представить элементы < li >. В третьей части этого учебного руководства вы узнаете, как изменить этот стиль, чтобы заставить элементы списка отображаться так, как вы хотите.

Подведем итог

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

В следующей части этой статьи вы узнаете о таблицах стилей и каскадных таблицах стилей, и о том, как можно использовать их, чтобы сделать вашу страницу красивой! 


memory icon on Emmar Hoades

Веб-разработка 101: Часть 2, создание своей первой веб-страницы

<p style="text-align: justify; "><a href="/information/veb_razrabotka_101_chast_1_nachinaem_rabotat_s_webmatrix/" title="Веб-разработка 101: Часть 1, начинаем работать с WebMatrix" >В первой части</a> вы освоили, что такое WebMatrix, видели, как ее установить и как запустить. В этой главе вы будете использовать эти знания для создания своего первого веб-сайта, и укрепите знания, создав первую веб-страницу.</p> <p>Создаем свой сайт. </p> <p style="text-align: justify; ">Выберите опцию <b>Создать сайт из шаблона</b>. Перед вами отобразится диалоговое окно, см. ниже. Обратите внимание, что вы видете множество различных шаблонов, поскольку WebMatrix все время расширяется. Далее необходимо выбрать Пустой шаблон сайта и дать ему название «Movies».</p> <p><img src="/upload/medialibrary/140/1400e2f3edd7ffac66c1c384725e4c37.PNG" title="Веб-разработка 101: Часть 2, создание своей первой веб-страницы" hspace="5" vspace="5" border="0" alt="Веб-разработка 101: Часть 2, создание своей первой веб-страницы" width="500" height="349" /></p> <p>Когда вы нажмете OK, WebMatrix создаст новый пустой веб-сайт. Далее он будет загружен в редакторе WebMatrix, как показано здесь:</p> <p><img src="/upload/medialibrary/5af/5afcbaec6ed42d14c7a24121975586fa.PNG" title="Web Development 101: Part 2, Create your first Web Page" hspace="5" vspace="5" border="0" alt="Web Development 101: Part 2, Create your first Web Page" width="500" height="367" /></p> <p style="text-align: justify; ">Прежде, чем вы продолжите чтение, необходимо понять информацию, которая отобразилась перед вами. WebMatrix – это больше чем просто инструмент редактирования кода. Она интегрирует веб-сервер под названием IIS Express. Веб-сервер – это специальная часть программного обеспечения, которая принимает запросы на данные по Интернету, и отвечает, поставляя данные веб-браузеру.</p> <p style="text-align: justify; ">Когда вы открываете свой браузер и вписываете в URL что-то подобное - http://www.microsoft.com, вы вызываете веб-сервер Microsoft, и он отвечает, отправляя код, HTML, JavaScript, CSS, изображения и другое. Ваш браузер после этого собирает все данные в единую страницу.</p> <p><img src="/upload/medialibrary/9b5/9b5f4876b346a5d3a21480dd1750008c.PNG" title="Веб-разработка 101: Часть 2, создание своей первой веб-страницы" hspace="5" vspace="5" border="0" alt="Веб-разработка 101: Часть 2, создание своей первой веб-страницы" width="446" height="173" /></p> <p style="text-align: justify; ">Наличие сервера, встроенного в WebMatrix, делает разработку своего сайта более легкой, похожей на разработку веб-сервера в Интернете. Если вы посмотрите на имя сайта на форме, изображенной ниже (в нашем случае это «Movies»), то увидите, что название сервера в адресе сайта <a href="http://localhost:8946/">http://localhost:8946</a> означает, что узел к серверу локален, то есть разрабатываемая машина является вашей.</p> <p style="text-align: justify; ">С этой страницы WebMatrix вы можете запустить веб-сервер и свой сайт. Но если сделать это сейчас, то выйдет ошибка, потому что вы еще не создали контент для сайта. Сделаем это в следующем пункте.</p> <h2>Создание первой веб-страницы</h2> <p style="text-align: justify; ">Вы заметили, что WebMatrix позволяет перемещаться между различными рабочими пространствами, нажимая кнопки слева. В настоящее время кнопка Site нажата, и отображает такие детали о вашем сайте, как URL сайта, и другие инструменты, которые вы можете использовать, например, можно мониторить запросы к сайту. Вы изучите каждое из этих рабочих пространств, поскольку читаете данную статью, но для начала, выберите рабочее пространство Files, нажав соответствующую кнопку.</p> <p><img src="/upload/medialibrary/416/416a5d9c817a9b611531c923f82353b0.PNG" title="Веб-разработка 101: Часть 2, создание своей первой веб-страницы" hspace="5" vspace="5" border="0" alt="Веб-разработка 101: Часть 2, создание своей первой веб-страницы" width="250" height="204" /></p> <p style="text-align: justify; ">WebMatrix откроет рабочее пространство Files, и так как у вас еще нет файлов на сайте, пространство будет пустым. Однако, есть хорошая дружественная кнопка, которая позволяет вам добавлять файл к своему сайту, или можно использовать кнопку New на панели инструментов, для создания нового файла.</p> <p><img src="/upload/medialibrary/f80/f8010995bf42489d008dfe4e9bcdffa1.PNG" title="Web Development 101: Part 2, Create your first Web Page" hspace="5" vspace="5" border="0" alt="Web Development 101: Part 2, Create your first Web Page" width="500" height="367" /></p> <p style="text-align: justify; ">Когда вы выберете любую из них, вы увидите диалоговое окно для выбора типа файла, которое выдает вам множество вариантов для большого количества различных типов файлов, которые обычно используются в сети.</p> <p><img src="/upload/medialibrary/144/1444142d7f828f1403e8cea5486e1ca8.PNG" title="Web Development 101: Part 2, Create your first Web Page" hspace="5" vspace="5" border="0" alt="Web Development 101: Part 2, Create your first Web Page" width="500" height="349" /></p> <p style="text-align: justify; ">Выберите тип файла HTML, назовите его default.html и нажмите ОК. Теперь WebMatrix создаст простой файл HTML и откроет его для Вас.</p> <p><img src="/upload/medialibrary/bbd/bbd8b440d242543be7790d485450bd83.PNG" title="Веб-разработка 101: Часть 2, создание своей первой веб-страницы" hspace="5" vspace="5" border="0" alt="Веб-разработка 101: Часть 2, создание своей первой веб-страницы" width="327" height="328" /></p> <p style="text-align: justify; ">HTML (Язык разметки гипертекста), файл – это просто ряд инструкций, которые говорят браузеру как отрисовать страницу. Обычно он состоит из Заголовка, который непосредственно включает инструкции о странице, и Тела, которое является содержанием страницы. Контент создается с помощью тегов, которые открываются именем тега в угловых скобках, как &lt; body &gt; и заканчиваются именем с наклонной чертой, также в угловых скобках, такой как &lt;/body&gt;. Поэтому контент между этими тегами будет обработан браузером как тело страницы. Вы можете узнать больше о HTML и его тегах в w3cschools.com. http://w3schools.com/html/default.asp.</p> <p style="text-align: justify; ">Отредактируйте свою страницу так, чтобы она была похожа на подобный код:</p> <p style="text-align: justify; "><span class="Apple-style-span" style="background-color: rgb(225, 225, 225); ">&lt;!DOCTYPE html&gt; </span></p> <p style="text-align: justify; "><span class="Apple-style-span" style="background-color: rgb(225, 225, 225); ">&lt;html lang=&quot;en&quot;&gt; </span></p> <p style="text-align: justify; "><span class="Apple-style-span" style="background-color: rgb(225, 225, 225); ">&lt;head&gt; </span></p> <p style="text-align: justify; "><span class="Apple-style-span" style="background-color: rgb(225, 225, 225); "> &lt;meta charset=&quot;utf-8&quot; /&gt; </span></p> <p style="text-align: justify; "><span class="Apple-style-span" style="background-color: rgb(225, 225, 225); "> &lt;title&gt;My Favorite Movies&lt;/title&gt; </span></p> <p style="text-align: justify; "><span class="Apple-style-span" style="background-color: rgb(225, 225, 225); ">&lt;/head&gt; </span></p> <p style="text-align: justify; "><span class="Apple-style-span" style="background-color: rgb(225, 225, 225); ">&lt;body&gt; </span></p> <p style="text-align: justify; "><span class="Apple-style-span" style="background-color: rgb(225, 225, 225); "> &lt;h1&gt;A list of my Favorite Movies&lt;/h1&gt; </span></p> <p style="text-align: justify; "><span class="Apple-style-span" style="background-color: rgb(225, 225, 225); "> &lt;ol&gt; </span></p> <p style="text-align: justify; "><span class="Apple-style-span" style="background-color: rgb(225, 225, 225); "> &lt;li&gt;It's a wonderful life&lt;/li&gt; </span></p> <p style="text-align: justify; "><span class="Apple-style-span" style="background-color: rgb(225, 225, 225); "> &lt;li&gt;Lord of the Rings&lt;/li&gt; </span></p> <p style="text-align: justify; "><span class="Apple-style-span" style="background-color: rgb(225, 225, 225); "> &lt;li&gt;The Fourth World&lt;/li&gt; </span></p> <p style="text-align: justify; "><span class="Apple-style-span" style="background-color: rgb(225, 225, 225); "> &lt;li&gt;The Lion King&lt;/li&gt; </span></p> <p style="text-align: justify; "><span class="Apple-style-span" style="background-color: rgb(225, 225, 225); "> &lt;/ol&gt;</span></p> <p style="text-align: justify; "><span class="Apple-style-span" style="background-color: rgb(225, 225, 225); ">&lt;/body&gt;</span></p> <p style="text-align: justify; "><span class="Apple-style-span" style="background-color: rgb(225, 225, 225); ">&lt;/html&gt;</span></p> <p style="text-align: justify; ">Вы вводите некоторый текст в тег &lt;title&gt;, так же как помещаете некоторый код между тегами &lt; body &gt;. Этот код будет использовать &lt; h1&gt; для Заголовка 1 текста стиля, &lt; ol &gt;, чтобы сообщить браузеру, что вы обрабатываете список и некоторые элементы &lt; li &gt;, чтобы сообщить браузеру, что вы представляете некоторые элементы списка.</p> <p>На панели инструментов WebMatrix вы увидите кнопку ‘Run’.</p> <p><img src="/upload/medialibrary/b59/b593437a335f53be91a4011edeb9f5dd.PNG" title="Веб-разработка 101: Часть 2, создание своей первой веб-страницы" hspace="5" vspace="5" border="0" alt="Веб-разработка 101: Часть 2, создание своей первой веб-страницы" width="453" height="181" /></p> <p style="text-align: justify; ">Выберите её, WebMatrix запустит браузер и откроет веб-сайт, работающий на вашем локальном сервере.</p> <p><img src="/upload/medialibrary/457/4578785c6a0a410ca8746f68d0ce63c5.PNG" title="Веб-разработка 101: Часть 2, создание своей первой веб-страницы" hspace="5" vspace="5" border="0" alt="Веб-разработка 101: Часть 2, создание своей первой веб-страницы" width="500" height="244" /></p> <p>Здесь есть много вариантов. Позвольте детализировать их.</p> <h3>Веб Сервер </h3> <p style="text-align: justify; ">Видете строку поиска на браузере? Она не открывает файл с вашего жесткого диска, но запускает веб-сервер и указывает браузеру на сервер, запрашивая обслуживание файла default.html.</p> <p><img src="/upload/medialibrary/16a/16ae5387923f23be46379fca59fab561.PNG" title="Web Development 101: Part 2, Create your first Web Page" hspace="5" vspace="5" border="0" alt="Web Development 101: Part 2, Create your first Web Page" width="442" height="42" /></p> <p style="text-align: justify; ">Помотрите вниз на системный трей своего ПК, и вы увидите, что небольшой значок указывает на то, что веб-сервер IIS Express работает.</p> <p><img src="/upload/medialibrary/e37/e37e30d920abab73c9df60bf7bcb24d0.PNG" title="Web Development 101: Part 2, Create your first Web Page" hspace="5" vspace="5" border="0" alt="Web Development 101: Part 2, Create your first Web Page" width="231" height="56" /></p> <p>Щелкните правой кнопкой мыши по нему, и вы увидите, что он запустит Фильмы на вашем сайте.</p> <p><img src="/upload/medialibrary/630/6307b792ab24c4a8e8533f2deb5a9d10.PNG" title="Веб-разработка 101: Часть 2, создание своей первой веб-страницы" hspace="5" vspace="5" border="0" alt="Веб-разработка 101: Часть 2, создание своей первой веб-страницы" width="500" height="275" /></p> <h3>Заголовок страницы </h3> <p style="text-align: justify; ">Теперь обратите внимание на вкладку браузера для данной страницы. Она должна содержать текст ‘My Favorite Movies’. Для сравнения вот тот же самый сайт, работающий в Internet Explorer, Chrome, Safari, FireFox и Opera. Заметьте, что текст - это то, что вы ввели в теге &lt; title &gt; и в теге &lt; head &gt; страницы, и тем самым, вы сообщили браузеру, что это есть название страницы. Различные браузеры обрабатывают название страницы по-разному.</p> <p>Internet Explorer:</p> <p><img src="/upload/medialibrary/630/6307b792ab24c4a8e8533f2deb5a9d10.PNG" title="Веб-разработка 101: Часть 2, создание своей первой веб-страницы" hspace="5" vspace="5" border="0" alt="Веб-разработка 101: Часть 2, создание своей первой веб-страницы" width="500" height="275" /></p> <p>Chrome:</p> <p><img src="/upload/medialibrary/c47/c4747f07f20e78a179e992ffaf47e51b.PNG" title="Веб-разработка 101: Часть 2, создание своей первой веб-страницы" hspace="5" vspace="5" border="0" alt="Веб-разработка 101: Часть 2, создание своей первой веб-страницы" width="500" height="353" /></p> <p>Safari:</p> <p><img src="/upload/medialibrary/c0e/c0e916e5d5338c4bfe9188201fa91ec2.PNG" title="Web Development 101: Part 2, Create your first Web Page" hspace="5" vspace="5" border="0" alt="Web Development 101: Part 2, Create your first Web Page" width="500" height="323" /></p> <p>Firefox:</p> <p><img src="/upload/medialibrary/211/2115e127fbbbf789e4e221724cf98f69.PNG" title="Web Development 101: Part 2, Create your first Web Page" hspace="5" vspace="5" border="0" alt="Web Development 101: Part 2, Create your first Web Page" width="500" height="333" /></p> <p>Opera:</p> <p><img src="/upload/medialibrary/a42/a4287d72081ff135a4840b5566440f8e.PNG" title="Веб-разработка 101: Часть 2, создание своей первой веб-страницы" hspace="5" vspace="5" border="0" alt="Веб-разработка 101: Часть 2, создание своей первой веб-страницы" width="500" height="360" /></p> <p style="text-align: justify; ">Веб-разработчику важно помнить, что различные браузеры могут обрабатывать одинаковые вещи различными способами. Хорошо будет протестировать вашу страницу в различных браузерах, чтобы проверить, что страница ведет себя как и ожидалось.</p> <p><b>Примечание: Запуск вашего сайта в различных браузерах </b></p> <p style="text-align: justify; ">Действительно хорошим аспектом WebMatrix, кроме предоставления веб-сервера, который работает на вашей машине, является возможность быстро запустить любой из установленных браузеров. Вы можете видеть это, щелкая по стрелке вниз у основания кнопки Run в ленте инструментов WebMatrix.</p> <p><img src="/upload/medialibrary/511/51100f9289f7ad6c098e227e5227eddc.png" title="Web Development 101: Part 2, Create your first Web Page" hspace="5" vspace="5" border="0" alt="Web Development 101: Part 2, Create your first Web Page" width="238" height="247" /></p> <p>В списке отобразятся только установленные браузеры.</p> <h3>Тело страницы </h3> <p style="text-align: justify; ">В своем коде вы использовали тег &lt; h1&gt; рядом с фразой ‘A list of my Favorite Movies’. Это было командой браузеру использовать стиль ‘Заголовок 1’, и отображалось большим полужирным шрифтом.</p> <p><img src="/upload/medialibrary/661/66152c5c4656dfa180b1dd90eea8a018.PNG" title="WebMatrix - Веб-разработка 101: Часть 2, создание своей первой веб-страницы" hspace="5" vspace="5" border="0" alt="WebMatrix - Веб-разработка 101: Часть 2, создание своей первой веб-страницы" width="500" height="283" /></p> <p style="text-align: justify; ">Наконец, вы выписали список своих любимых фильмов, используя &lt; ol &gt; (для ‘Ordered List’’) и &lt; li &gt; теги (для ‘List Item’), и браузер отображал их. Обратите внимание, что вы не помещали маркеры в список,а браузер так или иначе отображал их, потому что это стиль по умолчанию, который браузер будет использовать, чтобы представить элементы &lt; li &gt;. В третьей части этого учебного руководства вы узнаете, как изменить этот стиль, чтобы заставить элементы списка отображаться так, как вы хотите.</p> <h2>Подведем итог </h2> <p style="text-align: justify; ">В этой части учебного руководства вы использовали WebMatrix, чтобы создать простую веб-страницу, и увидели, как эта веб-страница была отображена в качестве части веб-сайта, используя веб-сервер. Вы создали свою первую страницу HTML и записали некоторую разметку HTML, чтобы сообщить браузеру, как отображать эту страницу. Вы видели, что можете добавлять некоторую разметку к заголовку, чтобы отображать данные о странице, и к телу, чтобы определить содержание страницы. Вы запускали страницу и видели, как она работает в нескольких различных браузерах. В следующем учебном руководстве вы увидите, как разработать страницу и заставить ее выглядеть более симпатичной!</p> <p style="text-align: justify; ">В следующей части этой статьи вы узнаете о таблицах стилей и каскадных таблицах стилей, и о том, как можно использовать их, чтобы сделать вашу страницу красивой! </p>

Возврат к списку

Яндекс.Метрика