Как познать HTML и создать свой первый сайт

Интернет

Многие давно хотят создать свой вебсайт, но бояться, потому что, как им кажется, множественные нюансы, блоки и теги очень сложны для восприятия. Одни решили, что в этом просто не разберутся или запутаются, другие априори объявили для себя HTML крайне сложным направлением. Но на самом деле это не так.

Нижеследующий простой гид поможет новичкам сориентироваться с тем, «что», «как», «куда» и «почему» в создании сайтов

Однажды я обучила свою сестру, далекую от компьютеров, HTML буквально за час, сказав примерно следующее: «Страницы сайтов – это просто текст и картинки, которые ты располагаешь, так, как хочешь. Чтобы их расположить так, как тебе нравится, и поработать над текстом, как в Ворде, нужно использовать несколько основных тегов. Теги, которые ты открыла, нужно обязательно закрывать». Все. Далее ей предоставила список основных тегов, показала, как их закрывать, начинать и заканчивать каждую страницу; сказала, что картинку и текст нужно всегда оформлять внутрь тегов ссылки, чтобы получить ссылку с картинки или текста; и рассказала какие дополнительные опции могут быть у <src img> и <font>. Далее моя умненькая сестренка без проблем работала более года над заполнением одного сайта-магазина в офисе. А создавать сайты при помощи редактора и готового интерфейса для пользователей на сайте-хостинге, между прочим, еще легче. Нижеследующий простой гид поможет новичкам сориентироваться с тем, «что», «как», «куда» и «почему».

Вам потребуются:
— техника/вспомогательные приспособления для выхода в Интернет (модем, внутренний или внешний / кабель / роутер), и оплаченное и настроенное соединение с Интернетом;
— желательно иметь сканнер или друга со сканнером;
— цифровой источник фотографий, которые можно подсоединить при помощи data-кабеля к компьютеру (телефон с камерой и/или фотоаппарат);
— список основных тегов – может пригодится, даже если вы решили ничего не писать руками (всегда легко найти в Интернете);
— Adobe Photoshop или любой его бесплатный/платный аналог, даже гораздо более простая программа (например, ACD) тоже пригодится – вам нужно будет где-то обрабатывать картинки и фотографии;
— По желанию, программы для загрузки через FTP – с ними загружать страницы и картинки быстрее и легче, чем через интерфейс сайта;
— Любая программа для визуального создания страниц вебсайта (без набора HTML ручками – редактор вебсайтов), лидеры в данной области – это Macromedia Dreamweaver и Microsoft FrontPage (к слову, эти комплексы так же помогут вам добавить на страницы различные эффекты движения одним нажатием кнопки, и их можно использовать для выгрузки готовых сайтов в Интернет), или нечто попроще, вроде Netscape Composer;
— Сборники клипарта, и другие источники картинок и фотографий для украшения сайта. 

1. Определитесь с тематикой сайта – от нее будет зависеть количество места, которое потребуется под сайт (и выбор хостинга соответственно), направление поиска изображений для сайта, дополнительные программы или приспособления, которые возможно потребуются. К примеру: для личного сайта-аналога-дневника стандартное количество места будет в самый раз, т. к. не предполагается чрезмерное большое количество картинок или текстов; для сайта по рукоделию или кулинарии нужно и много места, и надежный хостинг, т. к. и картинок с текстом предполагается огромное количество, и посетителей аналогично; для узкоспециализированного сайта места, наоборот, много обычно не требуется; для сайта с вашими работами в Adobe Photoshop — и место, и сама программа. Если предполагаются многочисленные видеоролики, или музыкальные файлы, естественно места вам потребуется очень много.

2. Выберите поставщика хостинга – сервис для регистрации, создания сайта и хранения его элементов. Просмотрите несколько вариантов – лучше начать с чего-то попроще, и бесплатного, вроде narod.yandex.ru (список хостингов можно посмотреть здесь: http://www.besthostings.ru/freehosting/search.php). Когда достаточно освоитесь с HTML, можно будет переходить, например, на ucoz.ru. Выбирайте хостинг по следующим признакам, как минимум:
— место, которое предоставляют под сайт (где-то намного больше, где-то намного меньше, где-то оно увеличивается со временем);
— надежность – почитайте в Интернете отзывы пользователей хостинга, говорящие о том, как часто на их сайт(ы) на данном хостинге невозможно попасть;
— удобство и понятность лично для вас интерфейса, при помощи которого вы будете создавать сайт и загружать его элементы на хостинг: например, у narod.yandex.ru все элементарно и понятно, все расписано по пунктам, они так же предоставят бесплатные шаблоны для гостевой, форума, страниц сайта – вам почти и делать ничего не придется; или у ucoz.ru, где тоже есть шаблоны (разнообразные, множество), но вот разобраться с готовыми блоками кода, что можно удалять, а что нельзя, с тем, как вызывать визуальный редактор (к слову, тоже не слишком удобный), с тем, куда что грузить, начинающим будет не в пример сложнее;
— условия отключения сайта – читайте в правилах при регистрации, т. к. где-то он будет жить «до скончания веков» даже после того, как вы его бросите, где-то, наоборот, отключат по истечении определенного срока или при нарушении неких правил;
— по тому, насколько простые, или, наоборот, сложносоставные сайты позволяют создавать готовые шаблоны от хостинга: у ucoz.ru красивые, сложные и современные, у narod.yandex.ru во всех отношениях простые.

Интерфейс narod.yandex.ru

Интерфейс ucoz.ru

3. Выбирая имя-адрес вашего будущего сайта, постарайтесь задать как можно более краткое, но осмысленное имя: пользователи не любят долго и сосредоточенно вводить адрес сайта в адресную строку, и очень не любят, когда его сложно запомнить. Оптимальный вариант – использовать аббревиатуру названия сайта. Утрировано, к примеру, по названию «Страничка пуделя Брехня, любимца Антонины Курпатовой» — получаем адрес спбак.рф или cpbak.ru (на оплаченном хостинге). Если хотите, чтобы ваш сайт без дополнительных проблем просматривали и заграничные друзья, выбирайте домен ru.

4. Выберите редактор вебсайтов. Пусть классические программы, позволяющие создавать сайты на HTML с включением кусков, например, на Java, не кажутся вам такими страшными и сложными, т. к. на первых порах из всего набора функций вам потребуется всего 5-10. Несколько простых редакторов официально доступны для бесплатного скачивания, Netscape Composer – один из них. Основное направление их функций – позволить вбивать и форматировать текст, а так же добавлять картинки, как вы привыкли это делать в Microsoft Office Word, преобразовывать автоматически ваши действия в HTML код, и демонстрировать, что получится на странице сайта после любых внесенных вами изменений. Естественно, картинки и созданные страницы до того момента, как вы их сами не загрузите на хостинг, будут храниться у вас на компьютере. В целом, знать HTML с подобными редакторами не требуется, но неплохо было бы хотя бы понимать основы и иметь перед глазами шпаргалку по тегам, т. к. не всегда редактор желает выполнять именно то действие и вносить изменение именно так, как хотите вы.

Macromedia Dreamweaver и Microsoft FrontPage

Сайт всегда можно написать самостоятельно, используя для этого стандартное приложение Windows «Блокнот» (WordPad), сохранив в нем файл с нужным именем и расширение .htm, и просматривая сразу все изменения, открыв этот же файл в браузере.

5. Создавая сайт, постарайтесь:
— облегчить сайт (не перегружать картинками, тем более не вешайте тяжелые картинки);
— оптимизировать для восприятия (не перегружать мигающими или блестящими картинками, упорядочить текст, и не перегружать текстом и ссылками со всех сторон, чтобы посетитель всегда сразу видел, что где находится, и у него не рябило в глазах);
— создать грамотное меню (его должно быть заметно сразу, пункты меню не должны сливаться или быть слишком мелкими, по названиям пунктов сразу должно быть понятно, что посетитель получит, перейдя по ним);
— упорядочить его элементы.

Пример безграмотного планирования сайта и перегруженности текстом можно посмотреть, к слову, по адресу plegion.ru, или, наоборот, достаточно адекватного, например, здесь julialeon.ru.
Первое: необходимо, чтобы сайт не грузился долго: это раздражает всех, даже тех, у кого безлимит и отличная скорость соединения с Интернетом; а так же тех, кто платит за количество скачанных байтов, — они тоже вам спасибо не скажут. Весить одна картинка не должна более 200 Кб, а лучше не более 150 Кб – чем меньше при сохранении отличного качества картинки, тем лучше! Второе: часто бывает, что на сайте просто невозможно находиться из-за того, что вам в глаза постоянно что-то мигает, что-то рябит, или подобранные цвета настолько не сочетаются друг с другом, что это просто невыносимо. Найдите в рунете цветовой круг и познайте систему близких и дополняющих цветов. Не более одной анимированной картинки на страницу (а лучше вообще их не использовать). Не более 5-6 картинок среднего размера на страницу, и не более 9-ти, если это маленькие превью картинок со ссылками на их бОльшие аналоги.

Найдите в рунете цветовой круг и познайте систему близких и дополняющих цветов

Интуитивно понятное и хорошо читабельное меню позволить посетителям не бегать по сайту в истерике, пытаясь найти что-то определенное. Три минуты подобного копания, и посетитель больше никогда к вам на сайт не придет.
Последнее не имеет отношения к внешнему виду, но поможет вам самим ориентироваться среди элементов сайта, загруженных на хостинг. Храните картинки в папке images (или задайте более конкретное имя для папки) — причем, создавая сайт в редакторе, сначала помещайте нужные картинки в папку, и только затем добавляйте их на страницы сайта – чтобы в коде грамотно прописался путь к картинке через папку нижнего уровня. Если меню вашего сайта содержит в себе пункты, каждый из которых подразумевает отдельное деление на несколько подпунктов, целесообразно было бы создавать отдельные папки для страниц-подпунктов (третьего уровня: первый – главная страница сайта, второй – страницы для пунктов меню, третий – страницы, на которые идут ссылки со страниц пунктов меню), аналогично сначала создавая папку, затем страницу в ней, и только потом задавая ссылку на новую страницу на странице более высокого уровня – чтобы в коде было прописано, что новая страница лежит именно в данной папке нижнего уровня – пропишется путь вашим редактором автоматически.

6. Прежде всего, помимо ввода и форматирования текстов, возможности задать фон сайту цветом или картинкой, добавления картинок и ссылок на страницу, научитесь пользоваться таблицами: вставлять на страницу невидимую таблицу (такую, чтобы ее границы были невидимы), выравнивать саму таблицу и текст с картинками в ней, объединять и добавлять ячейки, создавать таблицу в ячейке таблицы – они помогут вам не в пример более грамотно и эстетично распределять элементы на сайте.
Например, перед тем, как можно будет получить из показанной на картинке ниже таблицы формат сайта на скрине под картинкой, нужно сначала выровнять таблицу по центру страницы, добавить еще одну ячейку-столбец справа (если вы хотите, у сайта было три раздела по вертикали), добавить 2 строки вниз, объединить две верхние правые ячейки в одну, задать общую ширину таблицы примерно в 97% от ширины экрана (и ширину столбцов в процентном соотношении от ширины таблицы) – так таблица сама подогнет размеры сайта под разрешение экрана конкретного пользователя; а так же сменить границы таблицы на невидимые, задать вырывание текста (справа, слева, по центру) в каждой отдельной ячейке, и отступ от границ ячеек для текста, чтобы он не наслаивался на текст в других ячейках.

Как после вставки вот этой таблицы...

7. Если ваш сайт имеет некое специализированное направление, и вы хотите, чтобы он занимал неплохие позиции в поисковиках, почаще упоминайте соответствующие специализированные слова и выражения в тексте, всегда задавайте аналогичные подобным выражениям названия картинок, старайтесь, чтобы страницы с текстом были уникальны (не повторяли содержание прочих сайтов в Интернете) и включали от 1000 символов текста. К сожалению, сайты на бесплатных хостингах, имеющие доменные имена третьего уровня (всегда на бесплатных хостингах), т. е., например, cpbak.narod.ru, поисковые системы любят меньше, чем сайты с доменными именами второго уровня.

8. Загрузка сайта на хостинг. Для того чтобы главная страница сайта загружалась по имени сайта (cpbak.narod.ru), без указания ее названия (cpbak.narod.ru/main.htm), вам необходимо назвать ее index.html и/или на хостинге определенную страницу указать как главную – везде по-разному. Начните с загрузки картинок, чтобы страницы не пестрели голыми «окошками» и крестиками там, где должны быть картинки. Ряд редакторов позволяют сразу, в одно действие загрузить весь сайт с его структурой — от картинок до страниц и файлов для Ява-эффектов; другие программы (FTP-загрузки; при наличии подобной возможности у сервиса, который предоставляет вам хостинг) позволяют облегчить загрузку определенных блоков, как например, картинок; при отсутствии редакторов все делается ручками через интерфейс на хостинге.
Для загрузки через редактор или FTP-программу, сначала необходимо, открыв ее, авторизоваться на хостинге – так же прочитайте ответы на вопросы на сайте-сервисе хостинга, возможно для использования FTP нужны будут некие особые настройки. Главное помните, что необходимо полностью сохранить ту структуру сайта, которую вы придали ему у себя на компьютере: т. е. если картинки лежат в папке «images», то перед их загрузкой на хостинг необходимо создать там так же папку images и грузить картинки именно в нее; если после добавления анимированных эффектов в редакторе в папке с вашим сайтом появился новый файл, обязательно так же загрузите его на хостинг; если страницы определенного блока сайта вы решили сохранить так же в отдельной папке при создании сайта (и путь к ним прописан именно через определенную папку), то аналогично создавайте папку на хостинге и уже в нее грузите содержимое.

На самом деле отличные сайты еще 15 лет назад создавали 14-летние школьницы, так что, поверьте, вообще ничего сложного в этом нет!

Оцените статью
ЗнайКак.ру
Добавить комментарий