1.Предисловие В этой статье я постараюсь пошагово изложить, как сделать сайт. Статья рассчитана на людей, которые имеют ходьбы 2-3 месячный опыт работы с компьютером и Интернетом. Также вы должны представлять себе в общих чертах, как должен выглядеть сайт. Статья освещает начальные этапы знакомства с web строительством. В статье вы не найдете ответы на простейшие вопросы новичков, советы во избежание элементарных ошибок, но ни слова о раскрутке своего проекта. И еще один совет - не пренебрегайте моими советами, сэкономите время. А теперь непосредственно к созданию. 1.Что такое HTML и зачем он нужен? Первым делом (наверное, самым важным) вам нужно взять листок бумаги и спланировать ваш сайт. Нужно четко определится с разделами сайта, составить список планируемых материалов для сайта. Определится с расположением элементов дизайна (логотип, меню, голосование и мало ли что еще). Спланируйте внешний вид, но не сильно усердствуйте, нужен просто грубый набросок, так как многое, возможно, придется менять в процессе изучения технического процесса создания. Этот набросок очень поможет вам сориентироваться на первых порах. Основой основ в web строительстве является язык разметки web документов - HTML. Именно его изучением вам и предстоит заняться на первых порах. Этот язык состоит из "Тегов", которые определяют положение элементов (текста, картинок и всего остального) на странице и их характер (вывод рамок вокруг элементов, форматирование шрифта, например). Теперь на примере давайте разберемся, что такое "Тег". Создайте текстовый файл с расширением .txt . Теперь измените расширение на .html, после чего откройте этот файл при помощи блокнота, не меняя разрешение. Напечатайте пару слов и сохраните изменения в файле. Откройте этот файл при помощи Интернет браузера (Enternet Exproler) и вы увидите свой текст. Теперь сделаем текст жирным, при помощи "тега" <b>. При помощи блокнота сделайте с вашим текстом следующее: <b>Ваш текст</b>. Сохраните изменения в текстовом файле и обновите окно браузера. Текст стал жирным, и мы увидели как действует простейший "тег". Написав тег <b>, вы сообщили браузеру, что далее идет текст, который следует выделить жирным шрифтом, а использую парный ему тег </b> вы сообщили браузере, что далее текст не надо выделять жирным шрфтом. Теперь Попробуем вставить рисунок в нашу страничку. Скопируйте любое изображение в у же папку, где лежит ваша страничка. Давайте назовем изображение именем file.jpg и вставим при помощи блокнота на страничку следующий код: <img src="file.jpg" border=1>. Сохраните изменения, обновите окно браузера и вы увидете свое изображение на странице. Не буду останавливаться на дополнительных параметрах, которые мы указали, об этом немного ниже. Очень надеюсь, что у вас сформировалось представление о тегах, так как в большей степени именно с их помощью и будет осуществляться создание вашего сайта. Теперь идем далее... 2.Где узнать про теги, какие есть HTML редакторы Всего в HTML порядка 70 тегов, которые вам предстоит изучить и знать как свои пять пальцев. Узнать о всех тегах подробно можно из учебников. Всего в HTML порядка 70 тегов, которые вам предстоит изучить и знать как свои пять пальцев. Узнать о всех тегах подробно можно из учебников. Здесь есть все теги, которые можно рассортировать по назначению, по алфавиту и прочитать краткое описание. Не забудьте найти там два тега, которые я показывал вам в качестве примера и посмотреть, что значили параметры при выводе картинки. Этот учебник все, что вам нужно на первых порах, там вы узнаете какие есть теги, какие у них параметры и найдете еще много полезной информации для новичка. Теперь поговорим о HTML редакторах. Мы редактировали страничку при помощи блокнота и писали всю техническую информацию вручную, но это делать необязательно. Есть визуальные редакторы (можно провести аналогию с Microsoft Word), где вы также как и в Microsoft Word не видите никаких тегов и рабочих элементов, а видите только конечный результат, а в процессе создания пользуетесь кнопками, которые автоматически преобразуют выделенную информацию по вашему усмотрению. Есть редакторы, где код нужно писать вручную, как мы делали это в блокноте, есть такие, где эти два метода совмещены. Последние наиболее удобные. Самым лучшим является Macromedia Dreamweaver MX, который наиболее удобен новичкам, хотя поначалу может показаться сложным, но это не так. Теперь ознакомитесь с тегами лучше, потратьте день другой на ознакомление с учебником и редактором, беспорядочно поделайте разные элементы (ссылки, кнопки, таблицы), но не забывайте смотреть в учебнике, что вы создаете в редакторе иначе, потом вы совершенно не разберете, что там получилось, если придется сделать небольшие изменения. Дальше мы посмотрим, как посредством HTML сделать "табличную разметку" для сайта, взглянув на простой пример. 3.Примеры табличной верстки Итак, читать дальше имеет смысл, только если вы ознакомились с тегами и приблизительно себе представляете свои возможности. Одним из важнейших тегов является тег <table>, который создает таблицы. Посмотрите в учебнике пример и разберитесь с тем как делать таблицы. Вы должны четко понимать, каким образом появляются новые ячейки, как сделать определенное количество ячеек и строчек с ячейками в таблице. Зачем нам нужны эти таблицы? спросите вы. Отвечаю: большинство сайтов в Интернете имеют табличную верстку, т.е. все, что находится на сайте обрамлено в таблицы и таким образом можно легко настроить положение элементов. Чтобы не ходить вокруг да около, рассмотрим конкретный пример, и вы увидите, как при помощи таблиц можно разместить элементы дизайна и информацию на страничке. Мы рассмотрим простой шаблон для сайта в котором я четко выделю границы таблиц, и вы уведете как они устанавливают положение элементов на странице. Скачайте страницу, распакуйте архив и откройте ее при помощи Internet Exproler, потом, не закрывая это окно, откройте эту же страницу с помощью блокнота, который есть на любом компьютере. Там я комментировал каждое свое действие. Заметьте, в какой тег обрамлены комментарии, которые не видны на странице. Итак, с возвращением, вы уже изучили шаблон, прочитали все, что я вам там написал, и разобрались в таблицах и, самое главное, оценили их роль в web строительстве. Теперь, я думаю, самое время переходить к созданию шаблона для сайта. Итак, вы достаете листочек, где распланировано, что и в каком количестве будет у вас на сайте. Теперь вы должны распланировать свою страницу наподобие того, как я сделал это в страничке чуть выше, но естественно под свои нужды. Вы должны нарисовать логотип, может быть еще какие-то графические элементы и т.п. Сейчас наша цель создать всего одну страницу, которая и будет лицом сайта, его дизайном. Не торопитесь, поработайте над этой частью как следует. Теперь давайте подведем итоги: - Во-первых мы узнали, что WEB страницы создаются при помощи языка HTML
- Во-всторых рассмотрели несколько примеров: вставка картинки, жирный текст
- В-третьих узнали о HTML редакторе и учебнике, которые незаменимы новичку
- И разобрались, как при помощи таблиц можно разметить страницу
Прежде чем переходить к следующему уроку, вам нужно создать для своего сайта шаблон, но не более, всего одна страница! |
