Полезные сервисы
Поделись с друзьями
Помощник для тех, кто хочет научиться создавать сайты.
Вам понадобятся терпение и желание.
Всего за пять уроков Вы сможете сделать сайт-визитку, а освоив следующие уроки - сделаете первый шаг к профессионализму
Как сделать сайт
Хотите научиться создавать сайты и при этом не боитесь трудностей - читайте дальше.
- Мы будем идти от простого к сложному постепенно
- Мы не будем использовать программы для создания сайтов, а сами во всем разберемся
- Мы научимся создавать сайт с нуля, с чистого листа
- Нам не нужен будет Интернет, т.к. мы все будем делать и проверять на своем персональном компьютере
Какие бывают сайты
Пребывая на просторах Интернета вы замечали их разнообразие. Это форумы, новостные, магазины, различные конструкторы, поисковики, информационные, накопители всевозможных архивов (программы, музыка, фото, видео...), почтовые, игровые, визитки и прочее.
Самый простой вариант - это сайт визитка. Именно с такого мы и начнем.
Сайт-визитка
- это небольшой сайт, как правило, состоящий из одной или нескольких веб-страниц, и содержащий основную информацию об организации, частном лице, о товарах или услугах, прайс-листы, контактные данные и прочее.Как видим даже на таком простом сайте можно разместить многое.
Сайт-визитка (далее просто сайт) может нести как статическую информацию так и динамическую (изменяющуюся). На его страницах кроме текстовой информации можно разместить графику (фото, картинки) анимацию в виде Flash-роликов, всякие другие излишества.
Набираем материалы
Перед началом работы определитесь с наличием у Вас достаточной информации, т.к. иметь сайт с одной фоткой и контактными телефонами - это конечно маловато.
Подберите тексты, фото, картинки.
Тексты первоначально набираем в любом редакторе, не применяя к нему стилей (выделение, наклон, цвет). Если сильно невтерпеж и хочется что-то увидеть уже сразу, то можно подборку отложить (будем добавлять материалы по мере их поступления).
Создаем папку
Например, my_sajt (это имя и все другие можно выбирать на свой вкус, НО в латинице, лучше коротко и лаконично).
В этой папке создадим папки images, text и foto. В них будем помещать соответственно файлы картинок (иконок), тексты и фотографии.
Создаем документ
Используем стандартный текстовый редактор
Блокнот.
Создаем новый документ и копируем в него следующий текст:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Мой первый сайт</title>
</head>
<body>
<h1>Заголовок</h1>
<!-- Это начало -->
Первая строка <br>
Вторая строка <br>
</body>
</html>
Сохраняем его в нашу папку my_sajt под именем index.htm
Теперь находим этот файл проводником или через "Пуск - Мой компьютер ..." и клацаем по нему мышкой. В результате запустится программа-браузер, которая и откроет наш html документ (браузеры: Internet Explorer, Chrome, Opera, Safari, Mozilla, Yandex...)
Если Вы все правильно сделали, то на экране получаем следующее:
Заголовок
Первая строка
Вторая строка
Это наша страничка-заготовка. Как видим пока ничего сложного.
Мы будем добавлять в нее тексты, картинки и получим настоящий сайт.
Коротко о содержимом этой странички
В первой строке прописан тип документа (HTML) и то, как браузерам воспринимать его содержимое.
В тексте нашей заготовки часто встречаются угловые скобки. Внутри них специальный текст. Это теги. Существует довольно много различных тегов. Некоторые, имеют начало <имя_тега> и конец </имя_тега> (перед именем добавлена косая /), другие имеют вид <имя_тега ...содержимое...>, а есть просто <имя_тега>. В нашем примере есть все три вида.
Тег <html>...</html> - указывает браузеру что это HTML документ.
Весь текст нашей страницы, кроме первой строки находится между началом и концом этого тега.
Тег <head>...</head> - определяет место, где помещается различная информация не отображаемая на странице. В нашем случае между началом и концом этого тега вместились еще тег meta и тег title.
<meta...содержимое...> - указывает браузеру, в какой кодировке следует подгружать страницу.
<body>...</body> - определяет видимую часть документа, т.е. все что находится между тегами body должно отобразиться на экране
<h1>...</h1> текст внутри тега будет выделен как крупный заголовок.
Тег <head>...</head> - определяет место, где помещается различная информация не отображаемая на странице. В нашем случае между началом и концом этого тега вместились еще тег meta и тег title.
<meta...содержимое...> - указывает браузеру, в какой кодировке следует подгружать страницу.
В отличие от предыдущих тегов этот не имеет конца в виде </meta>, а заканчивается закрытием угловой скобки.
В нашем случае он указывает кодировку, но может содержать и другие параметры, например имя автора.
Мы указали кодировку Window-1251, также могут быть (KOI8-R, ISO-8859-5, UTF-8, UTF-16).
Если не указывать кодировку, то на экране вместо читаемых букв будут каракули.
Я выбрал эту кодировку, но вы можете выбрать, например UTF-8, но тогда файл будет длиннее.
<body>...</body> - определяет видимую часть документа, т.е. все что находится между тегами body должно отобразиться на экране
<h1>...</h1> текст внутри тега будет выделен как крупный заголовок.
Для заголовков можно использовать теги от h1 до h6. Чем выше номер, тем мельче шрифт. Т.е. заголовок, выделенный тегом <h6> - будет самым мелким шрифтом
<!-- ... -->> - используется для внесения в текст страницы комментария, который не будет выводиться на экран.Правилами хорошего тона при программировании считается вставка комментариев там, где это в последующем поможет разобраться в содержимом.
Тег <br> - означает перейти на новую строку.Если вы будете набирать текст в Блокноте, то нажатие там кнопки Enter сделает перенос на новую строку. Однако при переносе этого текста на html страницу такой перенос потеряется. Поэтому в тексте нашей страницы, для переноса на новую строку, мы внесли тег <br>, который понимает браузер.
Начинаем тренироваться
Открываем наш index.htm в Блокноте и его же открываем в браузере. Изменим текст в Блокноте (набираем сами или копируем, например, прямо этот текст с сайта), сохраняем документ (можно не закрывать Блокнот) и тут же обновляем нашу страничку (ту которую создали) в браузере.
Смотрим как все меняется.
Добавляем большой блок текста и видим, что он сам переносится, размещается на всю ширину экрана. Там, где нужно сделать дополнительный перенос - добавляем <br>, а хотим вставить пустую строку - добавляем <br> два раза (<br><br>). Можно разделить два текста сплошной линией. Для этого вставляем <br><hr>
Подведем итоги
Созданный файл index.htm является минимальной, но полностью функциональной веб-страничкой.
Мы будем его использовать как заготовку для новых страничек.
Здесь имя файла можно было задать и другим, но имя index.htm выбрано потому, что именно так называется обычно первая страница сайта.
Вы уже знаете главные (основные) теги, без которых нельзя обойтись. В дальнейшем мы освоим еще с десяток (чтобы не перегружаться).
Этот урок закончен, можете переходить в раздел Дизайн
Мысли вслух
- Программист - это не тот, кто пишет программы, а тот, чьи программы работают
- Для программиста монитор - это реальный рабочий стол, системный блок - журнальный, а клавиатура - обеденный
- Конфеты программиста: 'Мишка на сервере'
- А знаете ли Вы, что в 1 килобайте не 1000 байт, а 1024 (2 в степени 10)
Например, раньше при переходе по гиперотсылке можно было использовать аттрибут target, где прописав target="_blank" у пользователя при нажатии на эту отсылку страница открывалась в новой закладке.
Но сейчас такое правило считается устаревшим. Почему?
Дело в том, что времена идут и пользователи стают умнее и теперь это их дело открывать страницу в новом окне или в этом же. Поэтому в строгом стандарте (strict.dtd) аттрибут target="_blank" - считается ошибкой.
Мы будет идти в ногу со временем и придерживаться строгих правил.
Для тех, кто хочет использовать и некоторые старые правила в первой строке нужно прописать так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">