Упорядочивание папок
Прежде чем разместить сайт в Сети, нужно разложить веб-страницы, рисунки и другие ресурсы в различные папки. Тогда будет проще управлять сайтами.
Например, вот как можно структурировать страницу гостевой: (с.88-89).
После того как структура гостевой видоизменилась, нужно проверить и исправить относительные пути ссылок. Для этого нужно проследить путь от основной страницы к целевому файлу. Это может означать, что необходимо опуститься вниз или подняться вверх на папку или две, но в любом случае нужно получить относительный путь к файлу, который затем следует указать на месте URL-адреса.
Когда нужно выяснить относительный путь для ссылок, следует начать со страницы, на которой расположена нужная ссылка, а затем определить путь, проходя через все папки, пока не найдете файл.
Формирование ссылок на вложенные папки:
Наша задача – исправить ссылку напитки на странице lounge.html. Вот как элемент <a> выглядит сейчас:
<a href=”elixir.html”> Напитки </a>
Когда мы реорганизовали гостевую, мы оставили файл lounge.html в папке lounge и поместили файл elixir.html в папку beverages, которая находится в папке lounge.
Чтобы попасть от файла lounge.html к файлу elixir.html, мы должны войти в папку beverages.
Beverages/ elixir.html (выделяем каждую часть пути, используя символ «/»)
Поэтому в атрибуте href мы напишем такой относительный путь:
<a href=”beverages/elixir.html”>Напитки </a>
Задание: прописать относительный путь от файла lounge.html к файлу directions.html и дополните элемент <a>: <a href=”_____________________” Указатели </a>
Формирование ссылок на родительскую папку:
Создание ссылки от файла directions.html к файлу lounge.html. Теперь нужно исправить ссылку Назад в гостевую. Вот как сейчас выглядит элемент <a> в файле directions.html:
<a href=”lounge.html”> Назад в гостевую </a> (Сейчас эта ссылка правильно не сработает, так как браузер будет искать файл lounge.html в той же папке, где находится и файл-источник directions.html, т.е. в папке аbout.
Теперь нужно прорисовать путь снизу вверх, а не сверху вниз.
Чтобы попасть от файла directions.html к файлу lounge.html, мы должны подняться на одну папку вверх, в папку lounge, где мы найдем файл lounge.html.
Для того чтобы попасть на один уровень вверх, нужно указать «..». Выделяем каждую часть пути с помощью «/», а в конце пишем имя целевого файла:
../lounge.html
<a href=”../lounge.html”> Назад в гостевую </a> (Теперь, выбирая данную ссылку, браузер будет искать файл lounge.html в папке уровнем выше, в родительской папке).
Символы «..» можно использовать для каждой родительской папки, в которую вы хотите войти. Каждый раз, используя символы «..», вы поднимаетесь на одну папку вверх. Итак, если вы хотите подняться на две папки, введите «../..». В этом случае необходимо отделять каждую часть пути с помощью символа «/». Поднявшись на необходимый уровень укажите в конце имя файла. Например, чтобы сослаться на файл fruit.html, который находится двумя уровнями выше, нужно написать ../../fruit.html. Папка, подразумеваемая под символами «../..», называется «родитель родительской папки».
Веб-конструирование
Конструирование веб-страниц – это их проектирование. Для этого нужно создать сначала приблизительную схему или план вашего сайта или веб-страницы. Затем, используя строительные блоки HTML (<h1>, <h2>, <h3>, <p> и др.), создайте примерный план или проект HTML-страницы. После этого преобразуйте ваш план в HTML-код.
Представьте, что вы хотели бы поместить заметки о своем путешествии на веб-страницу, чтобы ваши друзья смогли их увидеть. (с.108)
Используя черновик Тони, представьте эту же информацию, как она бы выглядела на веб-странице. Нарисуйте эскиз для этой страницы, используя крупные структурные элементы: заголовки, абзацы, изображения и т.п. Теперь осталось написать соответствующий HTML-код, чтобы сформировать страницу и внести в неё текст из дневника Тони.
Кроме этого в дневнике Тони есть цитата, для её отображения можно использовать элемент <q> (с.116). Цитата окружается с двух сторон открывающим тегом <q> и закрывающим тегом </q>. При этом вокруг высказывания убираются двойные кавычки. Это означает, что увидев элемент <q>, браузер определит, что часть этого текста – реальная цитата.
И вот теперь, когда браузер знает, что это цитата, он может отобразить ее наилучшим способом. Некоторые браузеры отобразят двойные кавычки вокруг текста, некоторые не отобразят, а в отдельных случаях могут использоваться и другие методы. Этот элемент полезен, например, и в работе поисковых механизмов, просматривающих Сеть и выбирающих страницы с цитатами. Структура и значение в ваших страницах – очень важные вещи.
Одна из главных причин применения элемента <q> - это возможность стилизовать цитаты, чтобы они выглядели так, как вам больше нравится.
Существует еще один элемент для отображения цитат - <blockquote>. Элемент <q> предназначен для коротких содержательных цитат, являющихся частью текущего абзаца, а <blockquote> применяется для длинных цитат, использующих большие отрывки из книг или стихотворений целиком, которые нужно отобразить отдельно.