Как сделать сайт (бесплатно)
И так, свой первый опыт в сайтостроение я приобрел, в первую очередь, в бесконечных поисках по интернету доступного для меня варианта, так как на тот момент не имел ни малейшего представления о создание сайта. Не однозначное мнение в этой области знаний, то вселяли в меня надежду (в виде всевозможных вспомогательных инструментов), то полностью разочаровывало (либо их покупка, что не приемлемо, либо просто не работоспособность).
Если вы в похожей ситуации, и напрочь не обладаете ни какими знаниями, а вам по какой либо причине нужен свой собственный сайт (бесплатно), то вам просто необходимо дочитать эту статью.
РУКОВОДСТВО
Начнём с инструмента, который вобщем то и станет вашем основным помощником в этом увлекательном процессе. Для начала один из важных моментов (не пугайтесь, это просто), предварительно скачайте и установите программу AkelPad – текстовой редактор с открытым исходным кодом.
После чего для работы с программой необходимо создать текстовой документ, открываем интерфейс правой клавишей курсора, находим строку "Создать" – "Текстовой документ" .
Этот текстовой редактор в силу исключительной простоты и большого сходства со стандартным блокнотом, является не обходимым инструментом для начинающего верстальщика.
При редактировании HTML страниц, а именно этот язык мы собираемся использовать, текстовой редактор в силу своих функциональных возможностей, значительно облегчит вашу задачу.
AkelPad – в отличие от стандартного блокнота изначально был предусмотрен как редактор веб – страниц и наряду с многочисленными инструментами имеет основную отличительную черту в виде подсветки синтаксиса.
Что касаемо языка HTML – это язык разметки гипертекста, он состоит из тегов.
ТЕГ – это символы, заключённые в угловые скобки и по своей сути является командой браузеру к отображению информации в заданном виде. Теги, как правило, за не большим исключением, двойные; один открывает, отдаёт команду , другой закрывает, отменяет её . Таким образом, помещая какую либо информацию между двумя такими тегами, вы можете задать любую команду, конечно ограничиваясь техническими возможностями. Проще некуда.
А теперь что вам нужно запомнить ЗДЕСЬ и СЕЙЧАС (не пугайтесь)
Рассмотрим несколько основных тегов (язык HTML) из которых состоит простейший ВЕБ – документ.
<html>…</html><head>…</head><title>…</title><body>…</body>Запомнили?
А теперь, давайте закрепим свои знания на не большом примере написания веб – страницы с последующим просмотром в окне браузера, чтобы вы осознали сам механизм исполнения команд. Для удобства, сверните браузер в малое просмотровое окно, а текстовой документ установите рядом, в этом случае вам будет удобнее следовать инструкциям.
Скопируйте заготовку, в виде нескольких тегов, в подготовленный текстовой документ- AkelPad.
<HTML>
<HEAD>
<TITLE> Сказка о рыбаке и рыбке </TITLE>
</HEAD>
<BODY>
Жил старик со своею старухой
У самого синего моря;
Они жили в ветхой землянке
Ровно тридцать лет и три года.
Старик ловил неводом рыбу,
Старуха пряла свою пряжу.
</BODY>
</HTML>Сделали?
Наверняка, теперь вы поняли, что означает “подсветка синтаксиса”. Вы так же не могли не заметить, что учитывать регистр в написании тегов не так важно, поскольку HTML не чувствителен к нему и браузер одинаково обрабатывает как строчный, так и заглавный символы.
Теперь для того чтобы просмотреть результат в окне вашего браузера, вам необходимо на панели свойств; кликнуть “Файл” – “Сохранить как…” (откроется новое окно).
Далее, вводим имя файла, к примеру; index.html – так всегда именуется главная страница сайта.
Тип файла; Все файлы (*.*).
Кодировка, по умолчанию должна стоять 1251 (ANSI - кириллица).
После того как вы сохранили файл в расширение .html, двойной клик курсора не замедлительно отобразит содержимое файла в окне вашего браузера.
В результате то, что находилось между тегами
<body>…..</body><title>…..</title>Если вы всё сделали верно, то результат не заставит себя ждать, и вы на собственном опыте осознаете всю простату и доснупность языка HTML.
Усложним задачу)
Перед вами лёгкий (без выкрутасов) шаблон
с основными элементами интернет страницы.
Проделайте туже операцию с этим шаблоном страницы сайта и сохраните картинку так, чтобы оба этих файла находились в одном дисковом пространстве.
А вот ТАК ДОЛЖНО ПОЛУЧИТСЯ.
Заготовку и её подробное описание, можно скачать ЗДЕСЬ !
<html>
<head>
<title>Слова детских песн и сказок</title>
</head>
<body>
<center>
<table width="800" height="600">
<tr>
<td colspan="3" width="800" height="150">
<img src="aB0jAVNJnF.jpg" width="800" height="150">
</td>
</tr>
<tr>
<td bgcolor="#42aaff" width="150" valign="top" >
<a href="index.html">ГЛАВНАЯ</a><br><br>
<a href="ssilki.html">Ссылки</a>
</td>
<td valign="top" bgcolor="#ccccff"><center>
<H1>Слова песни Голубой вагон</H1>
<p>
<pre>
Медленно минуты уплывают вдаль,
Встречи с ними ты уже не жди.
И хотя нам прошлого немного жаль,
Лучшее, конечно, впереди!
*****
Скатертью, скатертью дальний путь стелится,
И упирается прямо в небосклон.
Каждому, каждому в лучшее верится,
Катится, катится голубой вагон!
*****
</pre>
</center>
</td>
<td bgcolor="#42aaff" width="150" valign="top" >
<center><b>НОВОСТИ</b></center>
<p>Здесь могут быть новости: сайта, интернета,
развлечение и т. п.
</td>
</tr>
</table>
</center>
</body>
</html>После того как вы просмотрели файл и ознакомились с его описанием, попробуйте самостоятельно внести не большие изменения в его дизайн
Для того чтобы открыть файл для редактирования, кликните по нему правой клавишей – “Открыть с помощью” - “Блокнот”. К примеру, поменяйте размер макета сайта, он определяется из расчёта разрешения монитора, конечно не вашего. Размер сайта подгоняется под широкий круг пользователей, 800х600 – это самое маленькое разрешение, 1024х768 – это самое распространённое разрешение, 1280х1024 – менее распространённое.
Ещё существует так называемый “резиновый” сайт, его свойства достигаются путём определения ширины – width в процентах, к примеру: width=”100%”, в этом случае ваш сайт будет занимать всю площадь монитора и при изменение окна браузера, страница сайта будет оптимизироваться под его размер.
Теперь попробуйте изменить фон страницы, в атрибуте bgcolor="#..." замените параметр цвета на другой, к примеру: #99ff99 – салатовый, #ffc0cb – розовый, #987654 – бледно - коричневый. Если вас интересует подбор цвета , ЗДЕСЬ краткая рекомендация - (откроется дополнительная вкладка).
Так же попробуйте заменить картинку шапки сайта - img src="aB0jAVNJnF.jpg", всего - то надо поменять родительское имя - aB0jAVNJnF.jpg картинки, на имя выбранного вами изображения. В нашем случае желательно чтобы изображение было панорамным, в противном случае, возможны сильные искажения. Далее закройте программу редактирования и согласитесь с сохранением файла “Да”, после чего двойной клик курсора отобразит содержимое файла.
Если вы выполнили предварительные рекомендации, то заметили, что внешний облик макета сайта претерпел значительные изменения. Это говорит о том, что теперь вы в состоянии самостоятельно конструировать страницы сайта, с чем вас от души и поздравляю.
Если кто-то, скажет Вам, что этот пример ужасен, что так давно никто не пишет и что есть ошибки - код не валидный .
Да! Это правда, но представте себе если бы я ещё начал описывать тонкости правил синтаксиса и вдаваться в полемику спорных вопросов.
Не смотрите на данный урок как на некий брак и потерю собственного времени.
При нулевых знаниях это прекрасное введение в понятие что такое интернет страница.
По мере собственных требований к себе и к своим результатам вы будите всё больше и больше узновать нового из мира сайтостроения.
Ваша настольная книга - это строка поисковика, формируйте вопросы не по смыслу а по набору ключевых слов лежащих в основе смысла вопроса.
Поверьте, Я, начинал именно с этого и ни чуть не жалею что сразу начал с практики вместо зубрёжки порой уже устаревающих материалов.
Просто усердно творите и знания к вам сами прейдут.
Для дополнительных возможностей редактирования файла,
вам необходимо ознакомится с ТЕГами HTML - (откроется дополнительная вкладка).
Дата размещения: 14-11-2019, 21:08
- Раздел: Советы на все случаи жизни
