Сергей Леонидович Куринный - Mozilla Введение в веб программирование

последующего использования.

9

Большинство изображений в Интернете, использованных в Google
Картинках имеют авторские права. Для снижения вероятности
нарушения авторских прав, используйте фильтр лицензии Google.
Для этого: 1) кликните на Инструменты поиска (Search tools), затем на
2) Права на использование (Usage rights):

ЧТОБЫ ВЫБРАТЬ ШРИФТ:
1. Перейдите на Google Fonts (​
http://www.google.com/fonts​) и
прокрутите список вниз, пока не найдете тот шрифт, который
вам понравится. Вы также можете использовать элементы
управления слева для дальнейшей фильтрации результатов.
2. Щёлкните по кнопке Add to collection рядом со шрифтом,
который вы хотите выбрать.
3. Щёлкните по кнопке Use на панели в нижней части страницы.
4. На следующей странице прокрутите вниз к разделам 3 и 4 и
скопируйте строки кода Google для последующего сохранения
в вашем текстовом редакторе.

10

11

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

Где веб-сайт должен располагаться на
компьютере?
Когда вы работаете на веб-сайте локально на вашем компьютере, вы
должны держать все связанные файлы в одной папке, которая
отражает файловую структуру опубликованного веб-сайта на
сервере. Эта папка может располагаться где угодно, но вы должны
положить её туда, где вы сможете легко её найти, может быть, на
вашем рабочем столе, в домашней папке или в корне вашего
жесткого диска.
1. Выберите место для хранения проектов веб-сайта. Здесь,
создайте новую папку с именем web-projects (или
аналогичной). Это то место, где будут располагаться все ваши
проекты сайтов.
2. Внутри этой первой папки, создайте другую папку для
хранения вашего первого веб-сайта. Назовите ее test-site (или
как-то более творчески).

12

Небольшое отступление о регистре и пробелах
Вы заметите, что в этой статье, мы просим вас называть папки и
файлы полностью в нижнем регистре без пробелов. Это потому что:
1. Многие компьютеры, в частности веб-серверы, чувствительны
к регистру. Так, например, если вы положили изображение на
свой веб-сайт в test-site/MyImage.jpg, а затем в другом файле
вы пытаетесь вызвать изображение как test-site/myimage.jpg,
он может не сработать.
2. Браузеры, веб-серверы и языки программирования не
обрабатывают пробелы последовательно. Например, если вы
используете пробелы в имени файла, некоторые системы
могут отнестись к имени файла как к двум именам файлов.
Некоторые серверы заменяют пробелы в вашем имени файла
на "%20" (символьный код для пробелов в URI), нарушая все
ваши ссылки. Лучше разделять слова с помощью тире и
нижнего подчеркивания: my-file.html или my_file.html.
По этим причинам, лучше всего приобрести привычку писать
названия ваших папок и файлов в нижнем регистре и без пробелов,
по крайней мере, пока вы не поймете, зачем это нужно. Так вы
столкнетесь с меньшим количеством проблем.

Какую структуру должен иметь ваш веб-сайт?
Далее давайте взглянем на то, какую структуру должен иметь наш
тестовый сайт. Наиболее распространенные вещи, которые есть в
любом сайте, создаваемом вами: индексный файл HTML, папки,
содержащие изображения, файлы стилей и файлы скриптов. Давайте
создадим их сейчас:
1. index.html​
: Этот файл обычно содержит контент домашней
страницы, то есть текст и изображения, которые люди видят,
13

когда они впервые попадают на ваш сайт. Используя ваш
текстовый редактор, создайте новый файл с именем index.html
и сохраните его прямо внутри вашей папки test-site.
2. Папка images​
: Эта папка обычно содержит все изображения,
которые вы используете на вашем сайте. Создайте папку с
именем images внутри вашей папки test-site.
3. Папка styles:​Эта папка обычно содержит CSS код,
используемый для стилизации вашего контента (например,
настройка текста и цвета фона). Создайте папку с именем
styles внутри вашей папки test-site.
4. Папка scripts:​Эта папка обычно содержит весь JavaScript код,
используемый для добавления --">