×

Вокруг мира про сссртурцияПоследние новостиКрымтунисСтрашное и мистическоефакты и мирОбщество, мирПетербург и окрестностиВыборгТайны истории
Интересно Мистика и Гаданияуроки по html,css,js,phpАнекдоты
Исскуство и поэзия Стихи Серебренного векаСтихи Золотого векаБасниЯпонские стихи и прозаМифы и Легенды древнего мираПритчи
Разные эпохи Тайны историиДревняя АзияСказки народов мирапро сссрСредневековье
Разное ОригамиСтрашное и мистическоеКомедия "Дино и его друзья"КонвертерыРаскраски
общество и мир Общество, мирАфоризмы и цитатыПсихологияфакты и мирПоследние новости

-----------

Вашему сайту нужна помощь? Политика конфидициальности Разместить рекламу

Делаем простой сайт своими руками. Урок 1.


html, css, php, js, java script, урок, уроки, своими руками, сайт, сделать сайт, как сделать сайт, пример сайта, простой сайт, написать сайт, бесплатно, стоит ли делать сайт, как сделать сайт,


Пара слов от автора.
Итак, пришло время отсортировать статьи на портале и воссаздать когда-то забытый раздел портала о html,css,php,js - проще говоря раздел о создании сайта.


В этой статье я вам расскажу как сделать свой сайт самостоятельно и совершенно бесплатно!
Для создания своего сайта не нужны никакие заурядные способности в программировании, лично из своего опыта, я могу сказать, что написал ЭТОТ портал, где вы находитесь, при помощи базовых знаний языков программирования и потратил на это очень мало времени.


Итак, давайте приступим! Для начала сядьте поудобнее, налейте себе чай и запустите обычную программу 'Блокнот' (Notepad) на компьютере, есле вы пишете на смартфоне, то запустите любой текстовой редактор.

Для начала давайте я ознакомлю вас с тем, с чем мы будем иметь дело. Для создания сайта мы будем использовать html, он является крайне простым и популярным, поэтому для начала это очень подойдёт.

Но для создания более хорошего и красивого сайта, помимо html нужно использовать стилевой css, он отвечает за внешний вид сайта, а в середине я подведу вас к использованию php - это язык программирования, который используют 70%-80% интернет-сайтов т.к. он крайне удобен, но об этом позже.... Всё готово, давайте начнём создавать сайт!




Для написания вашего сайта вам понадобится только программа БЛОКНОТ (Лучше всего использовать Notepad++ т.к. там есть подсветка систмных фраз, команд и прочей мудрости искуственного интелекта)

Итак, налевайте чай и приступайте к работе над сайтом.

Шаг 1.Для начала нам нужно создать папку, где будет размещатся ваш сайт - Создайте папку с названием 'site'(где угодно),

Делаем простой сайт своими руками. Урок 1.

Шаг 2.Создайте в ней "новый текстовой документ" (Нажмите правой кнопкой мыши и из открывшегося мини-меню выберете Создать-новый текстовой документ) и в открывшемся блокноте (текстовом документе) напишите или скопируйте и вставьте следующий код:


<html>
<head>
</head>
<body>
</body>
</html>


Делаем простой сайт своими руками. Урок 1.

Этот код и есть структура вашего сайта (страницы сайта), теперь сохраните этот код и переименуйте весь файл в 'index.html'

P.S. Обязательно измените расширение файла на '.html' - именно это расширение будет говорить компьютеру, что файл нужно открывать в браузере.



Давайте расшифруем, что значит этот когд:


<> - в такие скобки надо обязательно ВСЕГДА прописывать ТЕГИ, они дают понять роботу, что это команды с помощью которого создается скелет или фундамент вашего сайта (они форматируют ваш текст как Microsoft Word, иными словами), а не простой текст. Теги, скобочки, команды - можете по-разному их называть, смысл не меняется, но если вы их не пропишите, то не будет и сайта, а будет огромный неразличаемый текст.

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

head - в этот тег обычно вставляются скрипты, иконки, стили для сайта

body - место, где вы будите размещать весь основной текст вашего сайта, другими словами - контент будь то просто текс, картинки или видео

/ - эта палочка обозначает закрывающий тег.



Итак, вот мы и написали структуру сайта, теперь давайте её заполним, добавив туде заголовки и текст:


<html>
<head>
<title>Это мой сайт</title>
</head>
<body>
Привет мир! Поиграю в игры и почитаю статьи на RecsGames.RU
</body>
</html>



И так, теперь мы получили нашу первую веб страничку (вообщем-то это уже можно назвать САЙТОМ, но совсем простеньким):


Делаем простой сайт своими руками. Урок 1.


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

Теперь, когда вы ознакомлены с созданием простой странички, я вас научу делать красивые странички. Как например ЭТОТ портал, где вы сейчас находитесь
Делаем простой сайт своими руками. Урок 1.
Итак пишите следущее:


<html>
<head>
<title>Это мой сайт</title>
</head>
<body>
Привет мир! Почитаю статьи на RecsGames.RU
А какие новости есть на портале?
<img src='http://recsgames.ru/newimg/gta3.jpg' title='это картинка' alt='номер 1'>
</body>
</html>



В этом коде мы вставили картинку в нашу страничку, картинку вы можете вставить таким же образом свою. Для большего удобства создайте новую папку , в нашей папке, и назовите новую папку 'images' (в эту папку вы можете кидать картинки, которые будете использовать на вашем сайте и в статьях), теперь скачайте картинку и киньте её в эту папку.

Делаем простой сайт своими руками. Урок 1.

Итак, теперь давайте я объясню что и зачем:

img - тег, говорящий браузеру о том, что это именно картинка

src - тег пути (тут надо указать свой путь к картике)

alt - обычно этот тег ничем не премичателен, особенно в современных браузерах, он нужен для того чтобы если картинка непокажется или незагрузится, что маловероятно, показать информацию о картинке (что это за картинка), часто его не прописывают. НО! при SEO-оптимизации сайта (раскрутки) его обязательно нужно писать т.к. в него можно заключить ключевые слова, но об этом позже :-)

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



Итак, давайте теперь попробуем сделать страничку ещё красивее, выделив цветом и курсивом текст.
Для этого напишите следущий код, а я объясню что к чему :-)


<html>
<head>
<title>Это мой сайт</title>
</head>
<body>
<h2><center> Mой сайт!</center></h2>
<center><img src='http://recsgames.ru/newimg/gta3.jpg' title='это картинка' alt='номер 1'></center><br>
<center><h3>Привет! Я автор этого сайта!</h3> </center>
<hr>
<br> <center><i><b><font color='red' Здесь ты можешь прочесть информацию обо мне или мой блог.<br><br>Представь, что тут много картинок или игр :-)</font></b></i> </center>
<br><br><br><br><br><br><br><br><br><br><br><br><hr><br> <center>Это мой копирайт :-))))
</center>
</body>
</html>



Итак, если вы запустите эту страничку в браузере, то увидите примерно следущее:

Делаем простой сайт своими руками. Урок 1.


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


center - тег, который нужно добавлять тогда, когда вы хотите расположить текст или картинку посередине страницы.

h2 - тег, созданый для того, чтобы менять размер букв и заголовков, он имеет значения от 1 до 6, но тут не так всё просто. Размер идёт от большего к малому т.е. 1 - очень большой текст, а 6 - очень маленький текст. (он нам понадобиться при раскрутке сайта)

br - тег переноса текста ил картинки на новую строку (я его использую очень часто потому что, он заменяет клавишу Enter :-) ) без этого тега переход на новую строку не состоиться т.к. браузер не понимает клавишу Enter, а вместо неё будет просто пробел.

hr- горизонтальная разделительная палочка, лично я её использую просто для красоты

color - изменяет цвет текста (цвет можете менять на свой, просто поменяйте red на что-то другое, например white или green )

b (или strong) - делает текст жирный

i (или em) - курсивный текст




Ну и напоследок, для большей красоты давайте добавим фон для сайта:) Для этого между тегами head вставите такую строчку


<style>
body{
background-image: url(http://recsgames.ru/filez/15.jpg);
}</style>



Делаем простой сайт своими руками. Урок 1.


В целом мы написали сайт на чистом html, но сайт нвыглядет квадратным и скучным. Для его оживления можно использовать css, но про css я напишу вам в следующей статье т.к. это можно отнести в отдельную тему СТИЛИЗАЦИИ сайта.



Комментарии

Комментариев пока нет. Оставь тут свой комментарий или анекдот!


Комментарии к посту






Америку много раз открывали до Колумба, но никому об этом не рассказывали.

Оскар Уайльд


Norway
Тончайшие волоски, покрывающие хвост крысы используются в офтальмологии при операциях на глазах.

[ Интересные факты о мире ]






Как вставить данные в базу данных (таблицу)?
Как поставить шрифт для своего сайта?
турция Выборг Последние новости про ссср Страшное и мистическое Общество, мир факты и мир тунис Тайны истории Петербург и окрестности Крым






×

Рассказы из категории: Создание сайта (html,css,php,js)