Часть 1. Первый шаг
Прошло более двух десятилетий с того дня, как Тим Бернерс-Ли создал первый в мире сайт и разместил его во Всемирной паутине. За это время интернет превратился из диковинки в повседневную реальность для миллиардов жителей Земли. Трудно представить себе современную жизнь без интернета. И сами сайты существенно изменились, они стали изысканны по дизайну, интерактивны: появились интернет-магазины, поисковые и информационные порталы и социальные сети. И хотя социальные сети предлагают всем желающим создавать на своих ресурсах личные страницы и блоги, многие мечтают иметь собственный уникальный сайт, сделанный своими руками.
Как создать сайт? Для начала вам потребуется знание некоторых программ, которые полезно иметь на компьютере. Прежде всего, советую завести блокнот программиста Notepad++. Этот продукт распространяется бесплатно, в интернете имеется много ссылок на его скачивание. Чтобы создать сайт, необходимо владеть программой Photoshop, ибо дизайн сайта создается именно в этой программе. Для облегчения верстки неплохо иметь у себя программу Dreamweaver. Когда станете совсем крутым web-мастером, надо будет освоить Adobe Flash и еще многое другое.
А пока вы не установили Notepad++ или Dreamweaver, чтобы создать сайт для начинающих, воспользуйтесь простым текстовым редактором – Блокнотом, который имеется в стандартном наборе Windows. Для создания сайта вам потребуется знать язык HTML. Освоить HTML очень легко, и мы сейчас этим займемся.
Создайте на своем компьютере в любой директории папку и назовите ее, допустим, mysite. Откройте программу Блокнот или Notepad++, выберите в меню «Файл=>Сохранить как», тип файла укажите «Все файлы», а имя файлу надо дать index.html. Очень важно расширение .html, поэтому и надо выбрать «все файлы», иначе блокнот сохранит файл с расширением txt. Сохраните пустой документ в папку mysite.
Теперь напишите в этом документе следующий код. Не стоит его слепо копировать, лучше пишите своими руками. Создавая сайт для начинающих, приучайтесь писать коды самостоятельно, вы будете их запоминать, кроме того, научитесь распознавать и устранять собственные ошибки. Итак:
<html>
<head>
<title> Создание сайта </title>
</head>
<body>
Ура! Заработало!
</body>
</html>
В качестве угловых скобок используйте на клавиатуре клавиши «меньше» и «больше». Сохраните документ, нажав сочетание клавиш Ctrl+S, и откройте его в любом браузере, сделав два щелчка мышкой по сохраненному документу. Если ошибок нет, то на экране в правом верхнем углу вы увидите слова «Ура! Заработало!», а в названии вкладки – «Создание сайта».
Часть 2. Ссылки
Продолжаем создание сайта. Разберем написанный нами HTML-код. В угловых скобках заключена команда браузеру или, как ее называют, тег. Теги бывают открывающими и закрывающими, перед закрывающим мы ставим слеш – косую палку. Бывают теги, которые не требуют закрывающего, в них слеш ставится перед второй угловой скобкой (знаком «больше»). Закрывающий тег обязательно должны иметь теги так называемого контейнерного типа. В них между открывающим и закрывающим тегом помещаются как другие теги, так и любая информация, выводимая на экран. Пример контейнерных тегов – <html></html>, <head></head>, <body></body>, <div></div>, <p></p>, <a></a> <span></span> и многие другие. По синтаксису теги можно записывать не только строчными, но и прописными буквами <HTML></HTML>, <HEAD></HEAD> и т.д., регистр значения не имеет. Однако верстальщики предпочитают в синтаксисе строчные буквы.
Как правило, сайты содержат не одну страницу. Сайт для начинающих может состоять из 4-х – 5-ти страниц, а профессиональные содержат сотни, тысячи и даже миллионы страниц – например, социальные сети. Как переходить с одной страницы на другую или, скажем, на сторонние ресурсы? Для этого, существуют ссылки. Ссылки помогают нам переходить в другой раздел или главу открытого документа, если он очень длинный и не умещается на экране. Для создания ссылки используется тег <a>.
Как создать сайт из двух страниц? Откроем блокнот и создадим документ с названием page2.html. Сохраним его в той же папке, где index.html. Сразу замечу, что главная страница сайта всегда называется index.html (или index.php, но об этом мы поговорим позже). На запрос пользователя с указанием доменного имени сервер всегда будет искать ндексную страницу.
В новом документе с названием page2.html пропишем следующий html-код:
<html>
<head>
<title>Вторая страница</title>
</head>
<body>
Это вторая страница моего сайта
нажмите <a href=»index.html»>сюда,</a> чтобы перейти на первую
</body>
</html>
А первый документ изменим следующим образом:
<html>
<head>
<title> Создание сайта </title>
</head>
<body>
Ура! Заработало!
Можно перейти <a href=»page2.html»> на вторую страницу</a>
</body>
</html>
И сохраним, нажав Ctrl+S. Обновим в браузере index.html и увидим, что слова «на вторую страницу» получились ссылкой, они выделены синим цветом, подчеркнуты, а при наведении на них мышки курсор превращается в лапку. Кликнув на ссылку, мы переходим на вторую страницу, там тоже есть ссылка «сюда», нажав на которую, мы возвращаемся обратно. Попробуйте сами сделать еще несколько страниц и устроить при помощи ссылок навигацию между ними. Теперь вы знаете, как создать сайт из нескольких страниц.