Тема: Создание сайта на HTML  (Прочитано 4882 раз)

0 Пользователей и 1 Гость просматривают эту тему.

Оффлайн Tyr0I{

  • Учитель
  • ****
  • Сообщений: 1045
  • Поблагодарили: 4 раз(а)
  • Уважение: +1/-0
  • Пол: Мужской
    • Просмотр профиля
Создание сайта на HTML
« : 21 Октябрь 2014, 06:21:20 »

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

Здравствуйте, меня зовут Михаил Русаков!

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

Я склонен полагать, что у Вас имеется большое желание научиться создавать свои собственные сайты. Разумеется, крайне глупо пытаться познать эту науку с изучения какого-нибудь PHP. Гораздо разумнее начать с чего-нибудь попроще, а именно с HTML (HyperText Markup Language - язык гипертекстовой разметки) - базового языка, на котором и построен любой, даже самый сложный сайт. Без этого языка не было бы ни одного сайта, более того, HTML - простейший язык, который может освоить даже школьник (яркий пример - Ваш покорный слуга, начавший осваивать HTML ещё в школе, причём весьма успешно).

Ладно, хватит болтовни - пора приступать к созданию нашего с Вами первого сайта, и этот процесс будет называться: "Создание сайта на HTML".

Первое, что нужно решить: где создавать сайт? Разумеется, можно и в обычном блокноте. Но это несерьёзно (мы так в школе писали), поэтому давайте лучше будем использовать что-нибудь "потяжелее". Я остановил свой выбор на редакторе "Notepad++" - замечательная программа, которая позволяет писать код на огромном количестве языков, в том плане, что это будет весьма и весьма удобно. Не буду сильно её хвалить, потому что для написания кода для серьёзных языков (Java, C++ и т. д.) она не подходит - много лишних проблем возникнет. Но для таких языков, как HTML, CSS, JavaScript и даже PHP - очень хороший выбор.

Скачать Notepad++ можно, пройдя по этой ссылке: http://notepad-plus.sourceforge.net/ru/site.htm

Устанавливаем и запускаем редактор. Сразу сохраняем страницу под именем index.html. Теперь пишем (пожалуйста, напишите, а не скопируйте!) в окне редактора:

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

Написали? Сохранили? Поздравляю Вас, Вы только что создали самую простую (но очень важную!!!) HTML-страницу!

Теперь можно нашу страницу открыть в браузере. Так и поступим.

Что-нибудь видите? Я уверен, что нет. И это неудивительно, ведь это самая элементарная страница. Вы можете посмотреть исходник страницы. Для этого в меню "Вид" выберите пункт меню "Просмотр HTML кода", "Исходный код страницы" или что-то в этом духе, в зависимости от Вашего браузера. Также можно просто нажать CTRL-U (в большинстве браузеров откроется исходный код страницы), и Вы увидите Ваш код.

А теперь давайте обсудим, что мы здесь написали.

<html>, <head>, <body> - это открывающие теги. Иногда их ещё называют дескрипторы, но я привык называть их тегами, поэтому далее так и буду писать.

</html>, </head>, </body> - это закрывающие теги.

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

Одиночные теги - это теги, которые не требуют наличие закрывающего тега.

Теперь что касается назначения данных тегов.

Тег <html> означает начало HTML-документа.

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

Тег </head> означает конец заголовка HTML-документа.

Тег <body> означает начало самого документа. То есть всё (текст, картинки, ссылки и т. д.), что Вы видите на страницах в Интернете - всё расположено в теге <body>.

Тег </body> означает конец содержимого документа.

Тег </html> означает конец HTML-страницы.

Теперь давайте немного добавим в нашу страницу кода, уж, больно она примитивная у нас пока. Внутри тега <head> добавьте такой код:

<title>Наша страница</title>
<meta http-equiv="Content-type" content="text/html; charset=windows-1251">

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

Тег </title> сообщает, что здесь заголовок заканчивается.

Что касается тега <meta>, то здесь сначала я должен сообщить об атрибутах тегов. У тегов могут быть различные атрибуты, определяющие, например, вид их содержимого. Атрибуты ставятся внутри открывающего тега и имеют следующий вид:

Название = "значение".

Тег <meta> у нас определяет тип содержимого документа. Атрибут http-equiv и его значение Content-type определяет, что сейчас будет описан тип документа. Атрибут content и его значение text/html; charset = windows-1251 сообщают браузеру, что данный документ является HTML-документом (text/html), и кодировка этого документа кириллица (windows-1251). Это был пример мета-тегов. Я думаю, что пока с ними хватит.

Теперь займёмся содержимым документа. Надеюсь, что Вы уже поняли, что раз содержимое страницы - значит, будем писать что-то внутри тега <body>. Давайте напишем следующий код внутри тега <body>:

<h1>Заголовок 1-го уровня</h1>
<h2>Заголовок 2-го уровня</h2>
<h3>Заголовок 3-го уровня</h3>
<h4>Заголовок 4-го уровня</h4>
<h5>Заголовок 5-го уровня</h5>
<h6>Заголовок 6-го уровня</h6>

Теги <h1>, <h2>, <h3>, <h4>, <h5>, <h6> - выводят текст в браузере. Причём этот текст является заголовком, более того, чем больше цифра (от 1-го до 6-ти), тем менее крупным шрифтом будет выведен соответствующий текст. Таким образом, код Вашей страницы имеет вид:

<html>
<head>
  <title>Наша страница</title>
  <meta http-equiv="Content-type" content="text/html; charset=windows-1251">
</head>
<body>
  <h1>Заголовок 1-го уровня</h1>
  <h2>Заголовок 2-го уровня</h2>
  <h3>Заголовок 3-го уровня</h3>
  <h4>Заголовок 4-го уровня</h4>
  <h5>Заголовок 5-го уровня</h5>
  <h6>Заголовок 6-го уровня</h6>
</body>
</html>

Сохраните страницу и посмотрите на неё в браузере.

Также можно добавить немного атрибутов и в тег <body>. Давайте добавим атрибут text со значением green (зелёный). И атрибут bgcolor со значением yellow (жёлтый).

Таким образом, тег <body> выглядит так:

<body text = "green" bgcolor = "yellow">
  <h1>Заголовок 1-го уровня</h1>
  <h2>Заголовок 2-го уровня</h2>
  <h3>Заголовок 3-го уровня</h3>
  <h4>Заголовок 4-го уровня</h4>
  <h5>Заголовок 5-го уровня</h5>
  <h6>Заголовок 6-го уровня</h6>
</body>
</html>

Сохраните страницу и посмотрите на неё в браузере. Как видите, фон страницы стал жёлтым, а текст стал зелёным.

Думаю, что на сегодня хватит для Вас материала. Очень полезно будет потренироваться в выводе разного текста, разными цветами.

Увидимся в следующей статье!

С уважением, Михаил Русаков.

Офф.сайт http://myrusakov.ru/
« Последнее редактирование: 21 Октябрь 2014, 09:19:32 от Tyr0I{ »
Хорошие люди принесут вам счастье, плохие наградят вас опытом, худшие - дадут вам урок, а лучшие - подарят воспоминания. Цените каждого!
 


Оффлайн moto

  • Выше солнца
  • *****
  • Сообщений: 16987
  • Поблагодарили: 140 раз(а)
  • Уважение: +126/-0
    • Просмотр профиля
Создание сайта на HTML
« Ответ #1 : 21 Октябрь 2014, 08:37:32 »
По самому созданию, сейчас уже никто не создаёт сайты на голом HTML, даже если хочешь сделать, есть готовые cms, например Zebrum


« Последнее редактирование: 21 Октябрь 2014, 11:45:46 от Tyr0I{ »
https://irongamers.ru - сообщество любителей компьютерных игр
 


Оффлайн Tyr0I{

  • Учитель
  • ****
  • Сообщений: 1045
  • Поблагодарили: 4 раз(а)
  • Уважение: +1/-0
  • Пол: Мужской
    • Просмотр профиля
Создание сайта на HTML
« Ответ #2 : 21 Октябрь 2014, 09:09:34 »
Цитировать (выделенное)
По самому созданию, сейчас уже никто не создаёт сайты на голом HTML, даже если хочешь сделать, есть готовые cms, например Zebrum

Всё равно как никак надо понимать азы создания HTML т.к. лишним  не будет.

Упс случайно отредактировал))
Хорошие люди принесут вам счастье, плохие наградят вас опытом, худшие - дадут вам урок, а лучшие - подарят воспоминания. Цените каждого!
 

Оффлайн alisa_)

  • Новичок
  • *
  • Сообщений: 14
  • Уважение: +0/-0
    • Просмотр профиля
Создание сайта на HTML
« Ответ #3 : 15 Ноябрь 2014, 14:47:05 »
Сms-системы не могут удовлетворить всех потребностей разработчика. Знание html поможет поправить стандартный код под себя.
 

Оффлайн Y2K

  • Новичок
  • *
  • Сообщений: 32
  • Уважение: +0/-0
    • Просмотр профиля
Создание сайта на HTML
« Ответ #4 : 21 Ноябрь 2014, 10:05:10 »
Прежде всего, использование CMS - позорный шаг для программиста :) Все проекты должны иметь основу, написанную самим программистом, код которой, естественно, не разглашается.
А комментарий "сейчас уже никто не создаёт сайты на голом HTML" совсем не по теме. Никто не говорит в первом посте о создании сайта на голом HTML, знания этого языка разметки просто полезны, и это нельзя не знать;

Сам первый пост понравился, напомнил мне, как много лет назад я в таком же порядке по какой-то книжке изучал разработки веб-страниц, сидя в библиотеке, выписывая всякие нужности в тетрадь. Эх.. было время:)
 


Оффлайн yuoanswami

  • Новичок
  • *
  • Сообщений: 19
  • Уважение: +0/-0
    • Просмотр профиля
Создание сайта на HTML
« Ответ #5 : 22 Ноябрь 2014, 22:58:24 »
Вы мыслите устаревшими стереотипами. Сейчас сайты - это не примитив в виде нескольких страничек с текстом и парой картинок. В большинстве, это серьёзные системы, написать которые с нуля может не то, что не каждый программист, а не каждая группа программеров это осилит даже за один-два года. Поэтому, использование CMS - это никакой не позор, это нынче  необходимость в большинстве случаев. Если, конечно, проект серьёзный, а не детский сайтик.
 

Оффлайн moto

  • Выше солнца
  • *****
  • Сообщений: 16987
  • Поблагодарили: 140 раз(а)
  • Уважение: +126/-0
    • Просмотр профиля
Создание сайта на HTML
« Ответ #6 : 23 Ноябрь 2014, 00:49:42 »
Никто не говорит в первом посте о создании сайта на голом HTML, знания этого языка разметки просто полезны, и это нельзя не знать
скажите это людям, которые не парятся по этому поводу и делают себе сайт на вордпрессе в визуальном редакторе или простым перетаскивание блоков. Таких большинство.

Если уж изучать то сразу и css, для изменения дизайна он полезнее будет. Но никто не говорит, что не надо не знать структуру построения страницы, но это на уровне, да знаю, но все равно делаю визуально, как мне удобно.
https://irongamers.ru - сообщество любителей компьютерных игр
 

Оффлайн moto

  • Выше солнца
  • *****
  • Сообщений: 16987
  • Поблагодарили: 140 раз(а)
  • Уважение: +126/-0
    • Просмотр профиля
Создание сайта на HTML
« Ответ #7 : 23 Ноябрь 2014, 12:52:31 »
это что-то на уровне "занятий в колледже"
Что именно?)
https://irongamers.ru - сообщество любителей компьютерных игр
 

Оффлайн fenix

  • Новичок
  • *
  • Сообщений: 6
  • Уважение: +0/-0
    • Просмотр профиля
Создание сайта на HTML
« Ответ #8 : 10 Декабрь 2014, 09:34:55 »
На голом HTML далеко не уедешь. Даже в связке с CSS. Не вижу ничего позорного в использовании CMS. Напротив, сегодня - это необходимость. Желательно также хоть немного владеть PHP, чтобы уметь ручками подправить, что нужно, в модулях, что-то написать самому и т.п.
 

Оффлайн meyx

  • Новичок
  • *
  • Сообщений: 72
  • Уважение: +0/-0
    • Просмотр профиля
Создание сайта на HTML
« Ответ #9 : 10 Декабрь 2014, 17:32:08 »
В чем еще можно писать, кроме Notepad++ и просто Блокнота. Ведь наверняка, еще есть программы?
 


Оффлайн moto

  • Выше солнца
  • *****
  • Сообщений: 16987
  • Поблагодарили: 140 раз(а)
  • Уважение: +126/-0
    • Просмотр профиля
Создание сайта на HTML
« Ответ #10 : 10 Декабрь 2014, 17:36:10 »
Есть конечно, только есть ли в них смысл? Нотепад++ лучшее решение
https://irongamers.ru - сообщество любителей компьютерных игр
 

Оффлайн meyx

  • Новичок
  • *
  • Сообщений: 72
  • Уважение: +0/-0
    • Просмотр профиля
Создание сайта на HTML
« Ответ #11 : 14 Декабрь 2014, 14:20:38 »
Кто-нибудь может подсказать, можно ли в Sublime Text2 фон сменить с черного на белый хотя бы?
 

Оффлайн Серега

  • Новичок
  • *
  • Сообщений: 79
  • Уважение: +0/-0
    • Просмотр профиля
Создание сайта на HTML
« Ответ #12 : 21 Декабрь 2014, 01:05:23 »
Ну, блин, точилово... Вы еще подеритесь. Просто существуют различные подходы к созданию сайта. Начиная от простейших и заканчивая сложнейшими. На выбор. Если ваша задача может быть решена просто зачем прикладывать усилия?
 

Оффлайн zaharchuk

  • Новичок
  • *
  • Сообщений: 29
  • Уважение: +0/-0
  • Пол: Мужской
  • http://wmz-mail.at.ua
    • Просмотр профиля
Создание сайта на HTML
« Ответ #13 : 13 Январь 2015, 21:16:13 »
Полазил на сайте у этого преподавателя. Достаточно хорошие статьи нашел, особенно по CSS. На своем сайте тоже начинаю ветку о CSS. Возможно почерпну идеи для будующих статей.:yes

Оффлайн meyx

  • Новичок
  • *
  • Сообщений: 72
  • Уважение: +0/-0
    • Просмотр профиля
Создание сайта на HTML
« Ответ #14 : 14 Январь 2015, 23:19:40 »
Хватит ли знаний по HTML, CSS  для работы верстальщика? Почитав всю ветку, у меня мысль, что все эти базовые знания никто не использует, вручную теги никто не вбивает уже?
 

 


Поиск

 
SimplePortal 2.3.6 © 2008-2014, SimplePortal