Вторник, 13.11.2018, 03:56
Главная » Создание сайта и веб-дизайн

Как создать свой сайт

Как создать сайтКак создать свой сайт? Такой вопрос непременно возникает у многих людей, кто приходит однажды в Интернет.

Когда впервые окунаешься в мир сайтов и блогов, то вначале кажется, что это очень сложно - создать сайт своими руками. Лично со мной так и было: для меня создание сайта казалось великой тайной, доступной лишь избранным.

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

Сразу скажу: есть несколько путей создания своего сайта.

Первый путь - самостоятельно разработать дизайн своего будущего сайта и затем снова таки самостоятельно сверстать его, пользуясь языком html и таблицами стилей (что это за звери такие, вы скоро узнаете).

Второй путь - использовать для своего сайта готовую систему управления сайтом. Причем бесплатную. Таких систем разработано на сегодняшний день немало. Самой популярной из них на сегодняшний день является WordPress.

Третий путь создания сайта - воспользоваться услугами профессионалов, которые за ваши деньги создадут любой шедевр современного веб-дизайна.

Здесь же я поведу речь о том, как самому создать свой сайт с помощью языка разметки html и таблиц стилей css.

Чтобы создать свой сайт, понадобится немного терпения, чтобы освоить основы языка html, таблицы стилей css. Понадобятся некоторые программы, с помощью которых можно будет верстать сайт, работать с графикой, загружать файлы сайта на сервер (выгружать в интернет). Вот, в общем-то и все, что нужно на начальном этапе для создания своего сайта.

Скажу больше: для создания своего первого сайта можно обойтись даже без знаний css. Лично я создавал свой первый сайт, обладая лишь начальными знаниями языка html. Но если вы - человек творческий, вы никогда не остановитесь на начальном этапе и захотите углубить свои познания в области сайтостроения и веб-дизайна.

Если же Вы освоите азы и почувствуете, что создание сайта - это ваше новое хобби или ваша новая профессия, то всегда можно найти учебники и платные курсы, с помощью которых можно научиться создавать сайты на профессиональном уровне.

Да, чуть не забыл. Возможно, что вам будет неинтересно самому ковыряться в кодах, что-то придумывать, то вы всегда можете воспользоваться платными услугами профессионалов, которые за ваши деньги помогут вам создать свой сайт. И еще один вариант: если вы все же освоите азы сайтостроения, но по какой-то причине не сможете самостоятельно создать красивый сайт, то всегда можете воспользоваться шаблонами сайтов - как платными, так и бесплатными. Создать сайт с помощью шаблона намного легче и быстрее, чем пытаться разработать свой дизайн.

Что ж, общая картина вырисовалась? А теперь по каждому вопросу, изложенному выше, можете на моем сайте найти расширенные ответы: что, как и зачем.

А пока продолжим. И, чтобы попробовать что-то сотворить своими руками прямо сейчас, предлагаю изучить (и попутно проделать все на практике)
Как создать сайт в блокноте html

Создайте в удобном для вас месте жесткого диска новую папку, пусть она будет называться WWW. В этой папке создайте текстовый документ. Откройте этот документ с помощью "блокнота" и запишите в него следующее:

<html>
<head>
<title>Моя первая страница</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
Так отображается текст на моей первой странице
</body>
</html>

Далее обращаемся в блокноте в меню Файл - Сохранить как - и сохраняем в папку WWW наш файл как index.html. Открываем папку WWW и открываем файл index.html в браузере, которым вы привыкли пользоваться.

В открывшемся окне браузера вы можете полюбоваться своим первым творением. Как видите, все очень просто.

Теперь давайте разберемся, что и зачем мы писали и познакомимся с таким понятием как теги html.

Теги языка html

Теги - это команды языка HTML, их принято заключать между знаками < и > (между угловыми скобками).

Обратите внимание, что есть парные и непарные теги html. В этом есть логика.

Смотрите:

<html> - этот тег сообщает, что начинается документ на языке HTML
</html> - конец кода HTML.

Аналогично:

<head> </head> - парный тег html, так называемый хедер: всё находящееся между тегами - невидимая часть документа, здесь содержится служебная информация для поисковиков и для браузера.

<title> </title> - этот тег содержит название данной страницы, которое отображается в верхней полосе браузера.

Далее тег html посложнее. Обратите внимание, этот тег непарный:

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

В нем содержится информация о содержимом дальнейшего кода страницы, а именно:

- страница для передачи по протоколу гипертекста http, содержит формат text/html,

- написана в кодировке windows-1251 т.е. windows-кириллица.

Зона, обозначаемая парным тегом <body> </body> - тело страницы, т.е. отображающаяся в браузере часть html кода.

Всё, что мы напишем и изобразим в этой зоне, увидит посетитель нашей страницы.

Итак, сейчас мы рассмотрели обязательные теги html, которые крайне нежелательно игнорировать. Плохое заполнение этих тегов в глазах индексирующих страницу роботов выглядит не лучше, чем безграмотная и небрежно написанная записка.

ПОМНИТЕ!

Оценивая вашу страницу, поисковик оценивает всё её содержимое. По хитрому алгоритму он подсчитывает её минусы и сравнивает с похожими по тематике страницами, что в последствии влияет на рейтинг вашего сайта (или отдельной его страницы).

Вышеописанный минус не самый страшный при отсутствии других, о которых поговорим позже, обсуждая SEO-оптимизацию по поисковому запросу. Но всё же... Нам не нужны лишние минусы!

Теперь можете поэкспериментировать со своей первой страницей, созданной собственноручно, чтобы прочувствовать, как это - создавать сайт с помощью блокнота.

Для этого снова откройте (если вы уже закрыли) созданную вами страницу своего сайта html в блокноте и измените ее содержимое. Например, так

<title>Автор страницы (ваше ФИО)</title>

После внесения изменений обязательно сохраните документ. Проще всего это сделать нажатием на клавиши Ctrl+S. Согласитесь, так быстрее и удобнее: С - копировать V - вставить S - сохранить (с одновременным нажатием и кнопки Ctrl).

Теперь можете проверить изменения. Нажмите на кнопочку в меню браузера ВИД -> ОБНОВИТЬ или же (что гораздо быстрее и практичнее) просто нажмите на кнопку F5. И посмотрите, что изменилось в служебной строке браузера.

Далее проделайте в блокноте такую же операцию и с основным содержимым вашей страницы.

Внесите в тело документа (тег <body></body>) изменения, добавив туда свой текст. Пусть это будет текст о Вас: представьтесь посетителям страницы, расскажите о Ваших планах, желаниях, ну и о впечатлении от нашего первого занятия. Или же просто скопируйте из какого-либо текстового документа фрагмент текста и вставьте на свою страничку.

Снова сохраните изменения в файле и обновите страничку в браузере (кнопка F5). Как видите, все у вас получается. Нравится вам такое занятие - самостоятельно создавать сайт в блокноте? Тогда продолжим, ведь это только начало.
Форматирование текста в html с помощью тегов

Давайте продолжим создание сайта html в блокноте. Посмотрите ещё раз на наше творение. Вы заметили, что на странице отсутствуют абзацы и, вообще, хотелось бы как-то покрасивее оформить текст, отформатировать его.

Вы ведь до сего момента не знали, что форматирование текста в html без применения специальных тегов будет полностью игнорироваться браузерами. Зато теперь знаете. И разных там вопросов, мол, зачем учиться форматированию текстов, больше возникать не будет. Именно с этого начинаeтся большинство учебников HTML, внося в мысли обучаемого тоску, отбивая напрочь всякое желание двигаться дальше.

А знаете ли Вы, что для истинного вебмастера отформатировать вручную текст html - это как Вам... вкусно поесть? Вы уже готовы разделить со мной это удовольствие?

Начнем, пожалуй, и... приятного аппетита!

Снова возвращаемся к своей первой странице html сайта, создаваемого с помощью блокнота. И внесем в нее некоторые изменения.

Начнем форматирование текста с самого "вкусного" тега html - <h1> </h1>. Назначение его - заголовок.

У него есть разновидности от <h2> </h2> до <h6> </h6>. Самый крупный заголовок <h1>, соответственно, самый мелкий <h6>.

Под открывающим тегом <body> размещаем запись

<h1>Персональная страница Иванова Петра Сидоровича</h1>

Сохраните файл и откройте его в браузере.

Ну и как? Нравится вам тег <h1>, как нравится он поисковым роботам? Скажу по секрету, что особенно ценится этот деликатес, если он подается вместе с тегом <title>, когда в содержимом обоих есть одинаковые слова, т.е. совпадения.

Иными словами, название страницы и тема, которая рассматривается на этой странице, озаглавлена фразой с близким смысловым содержанием.

А что будет, если мы сойдем с ума и всю страницу выполним в одних тегах <h1>? Думаю, что робот поморщится, плюнет и уйдет, запомнив наш URL, как антисанитарное место обитания спам-страниц. А также не рекомендуется допускать полного совпадения содержимого <title> и <H1>.

Посмотрите, как получилось у вас на странице. Это правильная пропорция.

А далее у нас на повестке дня тег <p></p>!

Как в итальянской кухне невозможно представить себе обед без макарон, так и создать сайт или страницу HTML без тега, определяющего абзац, невозможно. Грустно, если его вообще нет на странице, потому что весь текст сливается в одну серую трудно читаемую массу.

Итак, продолжаем учиться создавать сайт в блокноте html. Заключите в тег <p> </p> абзацы на своей странице или же разбейте с помощью этого тега на абзацы ту запись, которую вы делали (копировали).

Это будет выглядеть примерно так:

<p>Создание сайта самостоятельно с помощью блокнота - очень интересное занятие.</p>
<p>А все же быстрее и удобнее это делать с помощью специальных программ. </p>

STOP! Чуть не забыл сказать, что очень неплохо будет, если в содержимом тега <p> будут встречаться слова, которые уже содержались в ранее рассмотренных нами тегах. Сие для наших "гурманистых" роботов будет означать, что смысловое содержание текста соответствует изначально заявленной нами тематике. В противном случае поисковики могут подумать, что мы решили создать сайт для обмана и принять нас за мошенников или горе-кулинаров.

По умолчанию весь текст в наших тегах будет изображаться с левого края страницы. А что, если мы хотим разместить текст в центре или даже по правому краю?

Посмотрим на дополнения к известным нам тегам, позволяющим форматировать html документ.

Ряд команд для выравнивания:

<h1 align="left">Выровнять заголовок по левому краю</h1>
<h2 align="right"> Выровнять заголовок по правому краю</h2>
<h3 align="center">Выровнять заголовок по центру</h3>
<h4 align="justify">Выровнять заголовок равномерно</h4>

<p align="left">Выровнять абзац по левому краю</p>
<p align="right">Выровнять абзац по правому краю</p>
<p align="center">Выровнять абзац по центру</p>
<p align="justify">Выровнять абзац равномерно</p>

Для придания правильной формы мы используем внутри текста один маленький, но очень гордый непарный тег <br> - переход на следующую строку.

<h1 align="center"> Выровнять заголовок<br> по центру </p>

<p align="right">Выровнять абзац <br> по правому краю</p>

А не приукрасить ли нам свой текст? Изменить шрифт, выделить ключевые фразы пожирнее, или с наклоном, не подчеркнуть ли самое важное? Роботам до этого дела мало, хотя и не всем, но не только же для них мы стараемся!

<strong>жирный</strong>
<em>наклонный</em>
<u>подчеркнутый</u>
<strong><em><u>
жирный, наклонный, подчеркнутый - одновременно.
</u></em></strong>

Обратили внимание, что теги html закрываются в обратной последовательности?

Да, так всегда и закрывают.

А теперь как изменить шрифт html, он же font.

Вставьте на свою страницу этот код:

<font size="7" >Р</font>
<font size="6" >А</font>
<font size="5" >З</font>
<font size="4" >М</font>
<font size="3" >Е</font>
<font size="2" >Р</font>
<font size="1" >Ш</font>
<font size="2" >Р</font>
<font size="3" >И</font>
<font size="4" >Ф</font>
<font size="5" >Т</font>
<font size="6" >О</font>
<font size="7" >В</font>

Обратили внимание, что браузеру совершенно безразлично, что в исходнике мы расположили всё в столбик?

Браузеру не только это безразлично. Он ещё имеет наглость игнорировать лишние пробелы и только &nbsp; (пробел) заставит его нас слушаться.

Посмотрите, как будут выглядеть следующие две записи:

<p align="center">
<font color="red">
Здесь игнорируются пробелы!
</font>
</p>

<p align="center">
<font color="blue">
А здесь
&nbsp; &nbsp;
не игнорируются
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
пробелы!
</font>
</p>

Ваш зоркий глаз уже обратил внимание на то, как мы управляем цветом шрифта? Похвально!

Давайте поговорим о цветах в другой статье, а сейчас у нас по плану... десерт!

Ну какой же пир без десерта? А какая веб-страница без ссылок? Не об этом ли лакомстве мы все так мечтали?
Как создать ссылку на страницу или на сайт

Держите тег <a> </a> и не расставайтесь с ним больше никогда!

Вот как просто создать ссылку на сайт или на внешнюю страницу:

<a href="http://tsvetochky.info/">Выращивание садовых цветов</a>

Чтобы посетитель, попав на Вашу главную страницу, смог посетить и остальные страницы Вашего сайта, необходимо разместить на ней, как и на всех остальных, внутренние ссылки на страницы своего сайта. Так выглядит ссылка на внутренние страницы нашего сайта:

<a href="index.html">Персональная страница Петрова Сидора Ивановича</a>

<a href="02.html">Петров Сидор Иванович: школьные годы </a>

Вот так, простенько и со вкусом мы можем создать и вставить наши ссылки на страницы сайта в известные нам теги:

<p align="center">
<a href="02.html">
Петров Сидор Иванович: школьные годы
</a>
</p>

Единственное пожелание: доставьте удовольствие роботам - по возможности не используйте в ссылках случайный, ничего не говорящий о тематике, текст. Обратите внимание на мои примеры и заметьте, что текст ссылки содержит слова, которые содержатся на странице, на которую будет выполнен переход с нашей ссылки.

И последнее на сегодня.

Хотите, чтобы посетитель мог написать Вам письмо прямо с сайта? Тогда можете воспользоваться следующим тегом:

<a href="mailto:petrov@ya.ru">petov@ya.ru </a>
или так:
<a href="mailto:petrov@ya.ru">Написать мне письмо</a>

На всякий случай уточню, что вместо указанного здесь e-mail надо вставить Ваш, а вместо черного содержимого тега можно писать всё, что угодно.

В результате клика по такой ссылке у пользователя на компьютере автоматически запускается почтовый клиент, настроенный по умолчанию.

Чтобы не перегружать информацией данную страницу, продолжим изучение вопроса, как создать сайт, в следующей статье Создаем сайт сами

Понравилась запись? Поделитесь с друзьями!

Категория: Создание сайта и веб-дизайн | Просмотров: 173 | Добавил: kompass4 | Теги: создать сайт, сайтостроение | Рейтинг: 0.0/0
Поиск
Статистика