03:00 Создание сайтов. Далее... | ||
 В предыдущей части, опубликован пример создания своего первого сайта человеком, ничего не
знающим о создании сайтов. Там приведен пример кода, который предлагается
скопировать, вставить в текстовый редактор «Блокнот», сохранить и
открыть в Интернет-браузере. Сейчас повторим этот пример. С
единственной разницей – здесь мы разберем этот код и вы поймете, как
все это делается и насколько все это просто! Итак начнем: Вот текст, который нужно скопировать, вставить в «Блокнот» и сохранить его под именем index.html в какую-нибудь временную папку*: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" *для того, чтобы
сохранить файл под этим именем, нажимаем в меню «Блокнота» пункт «Файл»
- «Сохранить как», в открывшемся окне, в графе «Тип файла», выбираем
«Все файлы», а в графе «Имя файла» прописываем index.html. Жмем
«Сохранить». После того, как файл сохранен,
заходите в папку и жмете по нему два раза мышкой. Открывается
Интернет-браузер с вашим первым сайтом! Верхняя часть кода: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" Это служебные теги, которые необходимо
прописывать в каждом html-документе. При этом, их вовсе необязательно
помнить! Достаточно скопировать их так, как они есть и сохранить в
какой-нибудь отдельный файл с помощью того же «Блокнота». Когда вам
нужно создать новый документ, вы просто копируете эти теги и вставляете в
начало вашего нового html-документа. Вот и все.
<p align="left">Поздравляю!
Это ваш первый сайт, который вы сделали своими руками!<br>Хотите
пойти дальше и cделать настоящий сайт? Тогда читайте статью дальше.
<br> Русский текст, который вы видите на сайте, заключен в теги абзаца, имеющем атрибут выравнивания по левому краю поля <p align="left">. Также мы видим тег переноса строки <br> и ссылки на страницу сайта с моей статьей, на которой был изложен этот материал: <a href="http://www.freeadvice.ru/view_article.php?id=9"> Слова «Вернуться назад» являются
ссылкой, а предваряющий их тег – адресом страницы, на которую вы
попадаете, нажав на ссылку. Завершается все закрытием тега ссылки
</a> и закрытием тега абзаца </p> _________________________________ Шаг 4. Что дальше?В этой части мы пройдем еще несколько основных тегов, а также поймем, что применительно к одному тексту (слову, фразе) может использоваться несколько тегов одновременно. Таким же образом, как мы делали текст жирным шрифтом с помощью тэга <b>, вы можете придать ему характер курсива тегом <i>. "i" - это сокращение от "italic".
<i>Текст, выделенный курсивом.</i> В Интернет-браузере будет выглядеть следующим образом: Текст, выделенный курсивом Так же можно уменьшить размер шрифта тегом small: <small>Этот текст уменьшен.</small> в браузере: Этот текст уменьшен. Использование нескольких тегов одновременно.Если вы хотите, чтобы текст был одновременно жирным курсивом, вы заключаете его сразу в два соответствующих тега. <b><i>Текст bold и italic</i></b> в браузере: Текст bold и italic Обратите внимание: тег, который идет первым, закрывается последним! Если вы поставите его при закрытии так же первым, конструкция не будет работать. Теги, не содержащие в себе текста.Как уже было сказано, есть тэги,
которые являются одновременно открывающими и закрывающими. Эти тэги
содержат команды, которые не связаны с конкретным текстом, они являются
изолированными командами. Пример - тег <br>, который создаёт
перевод строки: Пример текста,<br>который мы переносим на новую строку. И как это будет выглядеть в браузере: Пример текста, Другой такой тег - <hr> - рисует горизонтальную линию ("hr" - от англ. "horizontal rule"): <hr width="650"> (где атрибут «width» - указывает длину линии в пикселях (при построении сайтов обычно используется единица измерения длины, ширины и высоты – пиксели, а не сантиметры, но к этому легко привыкнуть)*. *Пиксель - это единица для измерения разрешения экрана. В отличие от сантиметров, пиксели являются относительными единицами, которые зависят от разрешения данного экрана. Для пользователя, у которого высокое разрешение экрана, 25 пикселей могут выглядеть как 1 сантиметр. Эти же 25 пикселей при низком разрешении экрана могут соответствовать 1.5 или даже 2 сантиметрам экрана.И как это будет выглядеть в браузере: Еще теги. Примеры тегов, требующих наличия
закрывающего тэга: <ul>, <ol> и <li>. Эти тэги
используются для вывода списков. <ul> И как это будет выглядеть в браузере:
Пример № 7: <ol> И вот что мы видим в браузере:
<html>Тело документа</html> Обратите внимание, что «тело документа» и «тело сайта» – не одно и то же. Тело документа – более широкое понятие и оно может содержать массу дополнительных параметров, которые влияют на работу сайта, но не отражаются на экране. Все последующие шаги(уроки), а также навигации по другим ресурсам "сайтостроения" найдете здесь:
Online-учебник по HTML Design› layout› editing››› «Web Direct» "ВебКаталог" рекомендует
| ||
|
|
| Всего комментариев: 0 | |
