Сайт своими руками от А до Я
Часть 1. Первый шаг
Как создать сайт? Для начала вам потребуется знание некоторых программ, которые полезно иметь на компьютере. Прежде всего, советую завести блокнот программиста Notepad++. Этот продукт распространяется бесплатно, в интернете имеется много ссылок на его скачивание. Чтобы создать сайт, необходимо владеть программой Photoshop, ибо дизайн сайта создается именно в этой программе. Для облегчения верстки неплохо иметь у себя программу Dreamweaver. Когда станете совсем крутым, надо будет освоить 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 и увидим, что слова «на вторую страницу» получились ссылкой, они выделены синим цветом, подчеркнуты, а при наведении на них мышки курсор превращается в лапку. Кликнув на ссылку, мы переходим на вторую страницу, там тоже есть ссылка «сюда», нажав на которую, мы возвращаемся обратно. Попробуйте сами сделать еще несколько страниц и устроить при помощи ссылок навигацию между ними. Теперь вы знаете, как создать сайт из нескольких страниц.
Еще копирайтинг
|
