Этой статьей я открываю руководство о том, как любой человек может сделать свой WEB-сайт. Нам не понадобится никаких специальных технических средств кроме компьютера и модема. Сразу скажу, что сайт мы будем создавать сами, вручную вводя Html теги, как это делают настоящие Web-дизайнеры. ( Правда мы воспользуемся специальной программой - редактором Html, которая облегчит ввод тегов, но не более)
Что нам понадобится
В награду за наши труды, мы получим странички которые не будут расползаться в других броузерах, и при других разрешения экрана. Кроме того если вы будете создавать свои Web страницы с помощью средств автоматизированного создания сайтов, то они получаться слишком большого размера. И так сначала коротко о том, что нам понадобится. Прежде всего самое главное - идея для сайта. Не стоит создавать сайт "просто так" или, потому что "у всех есть". Иначе вы просто постараяетесь напихать туда всё, что есть на вашем жёстком диске. Нужно выбрать общую тематику сайта, и при заполнении его содержанием, придерживаться её. Если у вас пока, нет конкретной идеи, но попробовать свои силы в создании сайтов, всё-таки хочется, то можете для начала создать домашную страницу. Обычно это сайт, состоящий из единственной странички, на которой вы можете рассказать о себе, своих увлеченияи поместить туда свою фотографию. Часто на домашних страничках также бывают гостевые книги. Что это такое, надеюсь объяснять не надо.
Не стоит также для начала создавать много разделов. Ведь их всегда можно будет добавить потом.
Кроме идеи, нам естественно нужен доступ в интернет. Сразу успокою вас - от вас не потребуется, чтобы соединение было установлено постоянно. Вам нужно будет только закачивать обновления на сервер.
Теперь о програмном обеспечнии. Всё необходимое для создания простых сайтов, включено в Windows. Нам понадобиться текстовый редактор Блокнот (Пуск->Программы->Стандартные-> Блокнот), графический редактор PAINT (Пуск->Программы->Стандартные-> Paint) и Мастер издания Web(Пуск->Программы->Стандартные ->Средства интернета->Мастер издания Web).
Но работать со всеми этими программами очень не удобно, они годятся только на первых порах. Поэтому как только сможете скачайте FTP манеджер Cute FTP, любой версии. Не знаю как в старых версиях, но в комплект поставки версии 4.0 и 5.0 также входит бесплатный HTML редактор Cute Html. Найти эти программы можно на любом крупном сервере с freeware и shareware софтом. Теперь о том чем заменить неудобный Paint. В принципе подойдёт любой мощный графический редактор, умеющий работать с растровой графикой и поддерживающий как можно больше графических форматов. Я например использую Adobe Photoshop. Неплохо также иметь программу для создания Gif анимации.
Общие знания
Итак приступим. Для начала разберёмся в том как устроена WEB страница. Несмотря на, то что на них может присутствовать графика, ссылки на другие документы, таблицы и многое другое, они являются простыми текстовыми файлами с расширением *.html или *.htm. Сначала вы должны усвоить тот факт, что в самом html файле нет рисунков. Они храняться в отдельных графических файлах, а в html документе даётся лишь указание броузеру, чтобы он вставил в указанном месте картинку из этого файла. Также обстоит дело и с таблицами. С помощью специальных команд мы описываем как должна выглядеть таблица, а браузер, уже при загрузке документа "рисует" её. Точно также происходит со всем остальным содержанием страницы.
Едиственное, что и присутвует в html файле и в том, что показывает нам броузер - это текст. Он содержиться непосредственно в HTML файле. Но чтобы текст выглядел опрятно и в нём присутствовали все элементы форматирования: абзацы, отступы, пропуски, списки и т.д. нужно опять же таки вставлять в текст команды.
Давайте разберём: что это за команды? Давайте по порядку. Во-первых, когда мы создаём html файл, то имеем дело с языком разметки гипертекста, сокращённо языком HTML. Вопреки распространёному мнению, язык HTML не является языком программирования. Он лишь указывает броузеру, как должна выглядеть WEBстраница. Команды этого языка называютя тегами. Броузер воспринимет за теги, то есть за указания по разметке текста, любой текст помещённый между символами< и >.
Во-вторых, теги бываю одиночными (в этом случае тег даёт разовый эфект в том месте,где он расположен) и парными. Парные теги это когда кусок текста "зажимается" между двумя одинаковыми тегами. В парный теги состоят из открывающего тега и закрывающего тега. Закрывающий тег это тег который стоит после текста, который должен быть"зажат" Между тегами. Он ничем не отличайтся от открывающего тега только после символа < идёт символ / потом сам тег и символ >. В общих чертах это выглядит так:
< команда html > Текст </ команда html >
И последнее что мы узнаем, прежде чем создадим первую Web страницу это параметры тегов. Это очень просто. После символа < и команды html мы можем задать параметры этого тега, то есть уточнить что мы хотим сделать с текстом. Параметры задаются так:
< команда html ИМЯ ПАРАМЕТРА=ЗНАЧЕНИЕ > Текст
Если параметры в теге не указаны, то берётся значение "по умолчянию". Также если тег не одиночный, как в примере, а парный то вз акрывающем теги указывать параметры не надо.
Создаём главную страницу сайта
Ну вот мы и разделались со скучно теорией, теперь перейдём к самому интересному - созданию своего сайта. В этой статье мы для начала создадим очень простую страничку которая будет главной страницей сайта (то есть той которая открывается первой). Остальные страницы мы создадим потом, когда вы узнаете как делать ссылки. А пока мы узнаем как использовать только самые простые Html теги, поэтому страничка будет не сложной. А вот во второй статье мы её украсим и усложним.
Итак начнём. Запустите текстовый редактор Блокнотили Html редактор Cute Html. Как использовать его вы узнаете потом, а пока напишите в редакторе:
То что мы написали является обязательными тегами HTML . Их должна иметь каждая html страница. Это как бы "скелет"документа. Разбёрем, за что отвечает каждый тег.
Открыющий и закрывающий теги < HTML > размещены соответственно в начале и в конце страницы всегда. Так требует стандарт html. Между тегами <HEAD > находятся теги описывающие первоначальную информацию о Web странице. В нашем случае это теги< TITLE > < /TITLE >. Теги < HEAD > всегда расположены после тега < HTML > и встречаются в документе только один раз. Это свое образная "Голова" документа. Между тегами < TITLE > < /TITLE > помещают текст, который будет отображаться в заголовке браузера (над его меню). Поэтому наберите между ними какой-нибудть текст, например " Добро пожаловать на мой сайт":
Вот мы и подобрались к основной части - разделу < BODY >. Между этими тегами содержится все теги и текст, который будет отображаться в браузере. Также у тега < BODY > есть много параметров, которые мы рассмотрим потом. То, что я сейчас попытался объяснить можно обозначить так - у Web страницы, также как и у человека есть голова (< HEAD >) и тело (< BODY>). И в голове и в теле есть органы, но большая их часть содержится в теле.
А сейчас сохраните набранный вами текст (Лучше в специально выделенной вами для сайта папке) под именем index.html. Почему именно index.html? Потому что мы создаём главную страницу для сайта, а она всегда так называется. Если Блокнот не хочет сохранять файл с таким расширением, то вручную переименуйте файл.
Теперь откройте этот файл в браузере и вы увидите чистый лист. Лишь в самом вверху( в заголовке браузера) виден текст, который мы набрали между тегами < TITLE >.
Теперь пора улучшить нашу страничку. Вопервых зададим её фоновой цвет. Для этого в теге < BODY> есть параметр BGCOLOR . Значит чтобы задать фоновый цвет, нужно изменить наш файл так (никаких тегов удалять не нужно, надо лишь дописать параметр):
< BODY BGCOLOR="фоновой цвет" >
Здесь нужно вместо слов "фоновый цвет" подставить название цвета, который вы хотите получить. Например - Black, Yellow, Green, Red, White, Gray. Но лучше указывать цвет в HEX формате. Для этого в CuteHtml нажмите: Tools -> Color to Hex
В появившемся окне выберете цвет и нажмите OK. В текст вставиться название цвета в HEX.
Напишите любой понравившийся вам цвет и сохраните файл. Теперь откройте его и посмотрите, что получилось. Если цвет фона не изменился значит либо вы ошиблись, либо не сохранили перед этим документ.
Предположим, что у вас всё получилось. Пора добавить на страничку какой-нибудь текст. Но перед этим зададим его свойства. По умолчанию текст отображается чёрным цветом. Если вы выбрали тёмный фон, вам это не подойдет. Для задания цвета текста в теге < BODY > есть параметр TEXT. Значение указывается также как и фоновой цвет.
< BODY TEXT="фоновой цвет" BGCOLOR=" фоновой цвет" >
И опять лучше указать цвет в HEX кодировке. Например если вы хотите сделать текст оранжевого цвета,а фон серого, то нужно написать:
<BODY TEXT="FF8040" BGCOLOR=" CDCDCD">
Теперь цвет текста у нас будет оранжевым (вы можете выбрать любой другой цвет). Чтобы это проверить напишем любую бессмысленную строчку. Напомню, что текст должен находится между тегов < BODY >, которых в тексте должно быть всего два(открывающий и закрывающий). Между ними может быть сколько угодно строчек.
Сохраните файл, откройте его в браузере и вы увидите текст выбранного цвета. Вы наверняка захотите поместить на верх вашей странички какой-нибудь графический логотип. Как это сделать вы узнаете из второй части статьи, а пока поместим туда крупный заголовок. Заголовок это особым образом выделенный текст. Вот как его сделать.
Сотрите тот временный текст который вы написали(не надо стирать теги!) и вместо него напишите например название вашего сайта(К примеру " PupkinSoftware site "). Перед ним поставте тег <H1>, а после него закрывающий тег </H1>. Текст помещённый между этими тегами становится заголовком.
Опять сохраните изменения и откройте файл в броузере. Вы увидите, что текст стал крупным и выделенным. Если вы хотите, чтобы заголовок был поменьше, то цифру 1 в тегах, поменяйте на 2, 3 и так до 6. Чем больше цифра, тем меньше заголовок.
Заголовок у нас есть, но размещён он не очень красиво (Это так в нашем случае. Иногда необходимо расположение заголовка слева). Лучше разместить его в центре. Для этого перед тегом <H1> поставьте тег < center > и после тега </H1> тег </ center >. Любой текст помещённый между этими тегами, будет находится в центре экрана.
Заголовок готов. Теперь нужно добавить содержание. Для этого просто набирайте текст между тегами <BODY>.Для ихформатирования можете использовать любые расмотренные выше теги.
Имейте в виду: в броузере текст не будет переносится на следующую строку, пока будет место на экране. Если вам в каком то месте нужно перенести текст на другую строку, то просто наберите там тег <BR>. Из следующего урока вы узнаете, как создавать абзацы, что более грамотно чем использование тега <BR >. Кстати, если вам нужно пропустить большое количество строк, то просто поставьте подряд несколько тегов <BR>
Дополнительные теги
Теперь несколько полезных тегов: < I > < /I > - текст между этими тегами становится курсивом
< B > < /B > - текст между этими тегами становится жирным
< U > < /U > - текст между этими тегами становится подчёркнутым
< HR > - в этом месте появляется горизонтальная полоса. Очень полезный тег.
Итог
В итоге у вас должно получится примерно вот, что:
<HTML> <HEAD> <TITLE> Добро пожаловать на мой сайт </TITLE> </HEAD> < BODY TEXT="FF8040" BGCOLOR=" CDCDCD" > <center> <H1> PupkinSoftwarehomepage</center> </H1> <I> Извините страница в разработке </I> <HR> </BODY> </HTML>
Что будет дальше
Первая глава моего учебника подходит к концу. Хоть вы и научилсь создавать простейшие странички, на них нет много того, что есть на нормальных сайтах. К тому же я пока не объяснил, как разместить эту страничку в интернете. Из следующей статьи вы узнаете:
Как добавлять графику
Как Сoздавать ссылки
Узнаете ещё несколько тегов форматирования текста.
