Простота - это крайняя степень изощренности.
Леонардо да Винчи

О бычно для создания сайтов используют специальные программы типа Macromedia Dreamweaver, или , которые гораздо облегчают работу. Но можно обойтись без них и создать сайт в Блокноте от Windows. В этом случае понадобится знание , а так же пригодятся .

Внесём ещё некоторые изменения, зададим стили для , выровняем его по центру.

Как создать сайт в Блокноте



body {background:#FAF0E6}


Моя первая web-страница

Не забываем сохранять изменения в файле index.html.

Как создать сайт в Блокноте



body {background:#FAF0E6}
h1 {color:FF0000; font:normal 25pt/20pt arial;}

Моя первая web-страница

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

С сегодняшнего дня я супер-, мега-, web-мастер, seo-гуру и т.д. и т.п. Читайте мои советы по созданию и продвижению сайтов.

Василий Пупкин - главный web-мастер Интернета

А теперь при помощи , придадим web-странице более привлекательный вид.

Как создать сайт в Блокноте



body {background:#FAF0E6}
h1 {color:#FF0000; font:normal 25pt/20pt arial;}
p:first-letter {color:#FF0000; margin-left:25px; font:normal 18pt italic;}
.maket {width:700px;height:850px; margin:0 auto; padding:10px; border:solid 1px #800000; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px;}
.epigraf, .autor {color:#800000; font:italic 12pt verdana; text-align:right;}
.content {color:#000000; font:normal 14pt verdana; text-align:justify; }
.footer {text-align:center; position:relative; top:25px; font:bold 14px verdana;}


Моя первая web-страница

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

С сегодняшнего дня я супер-, мега-, web-мастер, seo-гуру и т.д. и т.п. Читайте мои советы по созданию, оптимизации, продвижению сайтов и о том как заработать деньги в интернете.

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

Теперь, когда мне будут задавать вопрос «Чем ты занимаешься?», я с улыбкой и, не стесняясь, отвечу – «Я web-мастер, а ты?»

Василий Пупкин
www.smartincom.ru

Копируем код и смотрим, что получилось.

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

Перед созданием веб-страницы, вам обязательно надо создать email или электронный адрес. Я описывал варианты создания в этой статье — . А если электронный адрес у вас есть, то последуем к вариантам создания вашей личной веб-страницы. Читайте способы, которые помогут создать свою веб-страницу.

Одностраничный сайт

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

Страница в социальной сети Вконтакте

Думаю, в наше время фраза: «я создал себе страничку в Интернете» относится больше всего к социальной сети Вконтакте. VK — самая популярная социальная сеть в СНГ. Создать здесь свою страницу — дело 1 минуты. Более того, для вас открывается десятки полезных функций для деятельности в сети Интернет.
Про Вконтакте я писал много и планирую писать еще больше)) С этой социальной сетью вы сможете и .

Вконтакте также позволяет создавать удобный URL-адрес к вашей веб-странице, вместо стандартного URL-адреса при регистрации http://vk.com/id8032931. Затем вы можете поменять его на красивый — http://vk.com/vasheimya.vashafamiliya.

Страница в социальной сети Facebook

Если Вконтакте самая популярная социальная сеть в СНГ, то Facebook — социальная сеть №1 во всем мире. Фейсбук, считается, вроде как для продвинутых русскоязычных пользователей))) Но лично я думаю, что это все из-за того, то Facebook очень популярен и удобен.

Также как и в Вконтакте, вы можете присвоить себе красивый адрес своей веб-страницы. Полный мануал — как создать веб-страницу на Facebook, я описал в статье — .

Блог

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

• — быстрый, но с затратами на хостинг и отдельный домен.
• — блог-платформа от Google. Интегрирована со многими гугловскими сервисами. Очень удобно, если Вы фанат Google))
• — самая динамично развивающаяся блог-платформа. Я читал в одном из американских изданий статистику о том, что Tumblr у детей США 12-13-ти лет популярнее Фейсбука!!! Думаю, это показатель удобства и развития этой платформы.
• — здесь указаны мануалы по практически всем известным блог-платформам, включая и вышеуказанные.

Дневник

Вот все основные варианты создания вашей веб-странички, или, по-другому, веб-присутствия. Буквально 1 минута и вы уже погружаетесь в пространство всемирной паутины. Удачного веб-странининга!

Теперь пару слов о тегах, которые мы использовали, чтобы сделать эту страницу.

Описание html тегов из примера

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

Любая html страница имеет следующую структуру:

... Заголовочные теги ... ... Тело страницы ...

2. - между этими тегами заключается весь видимый контент страницы.

4. - между этими тегами прописывается заголовок страницы, которое отображается в самом вверху браузера. Кстати, когда Вы что-то ищите в поисковиках, то первое, что отображается, это как раз название страницы. Тег часто сокращенно называют "тайтлом". Советую ознакомиться со статьей: как составить тег

Теперь перейдем к тегам, которые находятся в теле html страницы (внутри и ).

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

6. - это один из класса тегов заголовочных тегов .. , обычно в него заключают название страницы. Например, у этой странице заголовочный тег "Пример создания html страницы".

Примечание

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

При составлении html-кода нужно придерживаться простого правила: сначала должен идти заголовочный тег , а дальше могут идти уже , и т.д. Главное, чтобы не было сначала , потом , потом и т.п. Должна быть строгая иерархия. Заголовков , и т.п. может быть много.

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

8. - это одиночный тег, который выводит изображение.

• src - обязательный параметр, в котором указывается адрес изображения (вместо URL_ИЗОБРАЖЕНИЯ необходимо прописать адрес, где хранится Ваше изображение).
  Примечание :
  • Если изображение находится в одной папке с Вашей html-страницей, то достаточно написать название изображения, иначе нужно прописывать либо абсолютный или относительный URL ;
  • Не забудьте указать расширение изображения. Например, .jpg , .gif , .jpeg .
• alt или title - в эти параметры можно записать описание к Вашему изображению. Когда Вы наведете мышкой на изображение, то появится это описание. Эти параметры важны для продвижения сайта , особенно в поиске по картинкам. Если изображение не удалось загрузить, то будет выведен этот текст, что также является плюсом.

9. - эти теги созданы для изменения шрифта, фона, размера и т.д. Короче говоря, все, что связано с форматированием текста можно настроить в одном теге. Это тег имеют довольно много атрибутов, о которых я расскажу в отдельном уроке.

Примечание: - аналогичный тег.

Есть также свойство CSS font , в котором можно задавать все эти параметры.

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

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

Создание веб-сайтов не так ое сложно е дело, как кажется. Узнайте, как закодировать простую страницу с помощью HTML - язык а разметки для Web.

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

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

Введение в HTML

HTML - это язык гипертекстовой разметки.

Гипертекст - это текст, который работает как ссылка.

HTML определяет структуру веб-страницы, и обеспечивает ее надлежащее отображение в браузере. Документ HTML может быть очень простым или сложным, в зависимости от поставленных задач.

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

HTML является основным языком разметки для Web. Однако он используется для создания статических веб-страниц, без интерактивности и анимации. HTML5, последняя версия HTML, немного лучше в этом смысле, особенно что касается видео или аудио.

HTML сегодня – это HTML5, новейшая версия, которая добавляет больше функций, чем предыдущие, и теперь может определять способ отображения видео, изображений и текста на экране браузера.

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

Веб и HTML

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

HTML остается фундаментальным навыком для всех веб-разработчиков и дизайнеров.

Согласно обзору W3Techs, HTML - это язык, используемый на 74,3% всех сайтов.

Как создать простую HTML-страницу

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

Кодирование HTML с помощью текстового редактора

Документ HTML - это в основном текстовый документ. Существует множество доступных редакторов текста, которые можно использовать для написания HTML. Два самых популярных: Dreamweaver и Sublime Text. Бесплатные редакторы - Notepad ++ для Windows и Text Wrangler для Mac. На самом деле сделать веб-страницу можно и в Microsoft Word, но делать это не стоит, поскольку он добавляет дополнительный и ненужный код в документы HTML.

Для примера мы будем использовать Notepad ++ в качестве редактора. Вы можете выбрать любой редактор по вашему выбору.

Создание и редактирование HTML

Создание нового документа HTML такое же, как и для любого другого типа документа. Выберите «Файл» - «Новый», чтобы открыть новый документ в Notepad ++. Внесите изменения в документ и нажмите «Сохранить».

Сохранение HTML

HTML-документ - это файл с расширением.htm или.html. Некоторые редакторы также могут предоставить опцию «Сохранить как HTML». Называть файл лучше латинскими буквами, с маленькой буквы, а пробелы заменять тире или точками.

Если вы написали код в «Блокноте» и сохранили его как текстовый документ, то перевести его в html-страничку можно с помощью программы Total Commander. Выбираем команду «Переименовать» и меняем расширение файла из.txt на.html.

Формат HTML-страницы

HTML как язык состоит из элементов, тегов и атрибутов, которые определяют содержание сайта. Элементы HTML позволяют нам добавлять таблицы, изображения, видео, аудио и т. д. на веб-страницу.

Элементы HTML

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

Теги

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

Например:

Открывающий тег:

Закрывающий тег:

Содержимое между открывающим и закрывающим тэгами является содержимым элемента.

Теги могут использоваться двумя способами:

Использование тегов в паре

Парные теги содержат открывающий и закрывающий теги. Вот как они выглядят:

Здесь какой-то текст

Существует открывающий тег () и закрывающий тег (), указывающий конец абзаца. Это означает, что все, что находится между этими двумя тегами, является абзацем.

Одиночные теги

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

Эти элементы пишутся так:

Закрытие / (косая черта) также не является обязательным. Это то же самое, что и при записи . Однако, чтобы избежать путаницы с открывающим тегом, рекомендуется добавить / (косую черту) в конце.

Атрибуты

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

Тег с атрибутом будет выглядеть так:

Тег «HTML» выше имеет атрибут «lang» со значением «en-US».

Структура документа HTML

Каждый HTML-документ имеет базовую структуру, определенную с помощью следующих элементов:

DOCTYPE или DTD: Декларация типа документа указывает версию используемого HTML. Этот тег помещается в начале документа.

HTML: Пара тегов HTML определяет начало и конец документа HTML.

Раздел HEADER < head>: этот раздел определяет общую информацию для страницы, и обычно короткий. Содержимое этого элемента не отображается на странице. Заголовок содержит тег TITLE, который определяет название документа, отображаемое в строке заголовка браузера. HEADER также может содержать метаданные, или ссылки на внешние файлы.

Раздел BODY : Этот раздел содержит основную часть страницы. Его содержимое отображается в браузере. Большая часть кода HTML-страницы находится внутри элемента body.

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

Простая страница HTML

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

Шаг 1: Первая строка добавляемого HTML-кода указывает элемент DOCTYPE как «html». Это означает, что используется последняя версия HTML.

Шаг 3: Затем мы добавляем тег заголовка с тегом Title и сведениями о наборе символов.

Hello World

Шаг 4: После этого пишется тег BODY.

Hello World

Шаг 5: Теперь пустой HTML-документ готов. Давайте начнем добавлять текст для отображения. Мы добавляем тег заголовка и тег

Они определяют заголовок первого уровня и абзац под ним.

Hello World

Hello World

Простая страница HTML

Основная HTML-страница готова, и мы можем сохранить ее в папке по нашему выбору.

Просмотр страницы HTML

Чтобы просмотреть HTML-страницу, нам нужно открыть ее в браузере. Перейдите в папку, где был сохранен документ HTML, и дважды щелкните по нему.

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

Заголовок как «Hello World»

Заголовок первого уровня как «Hello World»

Абзац с текстом «Простая страница HTML»

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

Расширенное форматирование текста

В HTML предусмотрены специальные элементы для специального форматирования текста.

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

Теги

используются для указания начала нового абзаца. Браузер обычно добавляет одну пустую строку между двумя абзацами.

Элементы форматирования используются для отображения специальных типов текста. Текст может быть отформатирован такими тегами:

Жирный –

Курсив –

Подчеркнутый –

Шрифт –

Полный список этих тегов доступен по ссылке .

Добавление ссылок

Это текст ссылки

Добавление изображений

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

Атрибут src указывает местоположение изображения.

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

Атрибут alt дает краткое описание изображения. Используется, если по какой-либо причине изображение не загружается.

Добавление заголовка

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

Расширенные понятия в HTML

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

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

Проверка HTML-кода

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

Валидация также дает рекомендации по коду, который не соответствует последнему стандарту HTML. Недействительный HTML сделает сайт непригодным для использования. Это может вызвать проблемы с загрузкой или несогласованность вывода с различными браузерами. Многие сервисы проверки бесплатны, например, validator.w3.org

Добавление дополнительных тегов

HTML-тегов и атрибутов намного больше, чем мы здесь обсуждали. Два хороших ресурса для обучения - w3schools и HTML Dog, у которых есть больше учебников и полный список тегов.

Вы также можете использовать «Просмотр исходной страницы» в браузере, чтобы изучить код хорошо продуманных веб-сайтов и увидеть новые методы.

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

Добавление CSS и JavaScript

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

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

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

Как сделать сайт html?

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

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

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

А все дело в том, что язык разметки гипертекста html специально разработан для того, чтобы было удобно создавать web – страницы. И не имея элементарных знаний html достаточно нелегко создать интернет страницу.

Но бывают ситуации, когда совсем нет времени на изучение основ html, а сайт создать, ну просто, необходимо. Возможно ли сделать сайт html самому с помощью какого – либо сервиса или программы?

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

А на самом деле, потребуется всего лишь:

• Создать web-страницу в виде файла (электронного документа) определенного формата. Если быть более точным – это должен быть файл index с расширением html или htm.
• Страница должна находиться в интернете и к ней должен быть открыт постоянный доступ. Она должна быть размещена на специальном сервисе (хостинге).

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

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

Как сделать страницы сайта без знаний html

Можно сделать такую страницу, даже с помощью текстового редактора Word, которым владеет практически каждый пользователь компьютера. Для этого пишем статью, добавляя рисунки, графику.

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

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

Данный способ создания интернет страниц имеет большой недостаток:

Word генерирует много лишнего кода html. Поэтому этот способ создания сайтов распространения не получил.

Сделать сайт html в Блокноте

Гораздо удобнее и правильнее будет сделать сайт в программе Блокнот. Это стандартная программа для Windows.

Запускаем программу.

Для начала потребуется прописать структуру HTML документа, которая имеет следующий вид:

— теги, определяющие начало и конец документа;

— теги, ответственные за заголовок данной страницы;

— теги, прописывающие название сайта;

— в этом теге прописывается код сайта.

Пример структуры документа сайта на html

В первой строчке документа прописана версия языка html.

Пропишем данный код в Блокноте и сохраним в формате.html.

Затем откроем в любом браузере и если все верно — откроется пустая страница. Затем надо будет определить дизайн сайта: место для шапки, положение меню, где будет располагаться текст.

Я выбрала такой макет: в верхней части сайта – шапка, под ней 4 кнопки, меню – слева и текст – справа.

Чтобы сделать такой сайт необходимо сделать разметку с помощью таблиц.

На языке html таблица определяется тегами

, а строка в таблице — , столбцы — .

Таблица будет иметь следующий вид:

8 и 33 — сроки открывают и закрывают таблицу;

14 и 21 — строки открывают и закрывают строку в данной таблице;

15, 16, 17, 18 строки – открывают и закрывают столбец;

22 и 25 строки — открывают и закрывают столбец. При этом атрибут colspan=”1” – количество столбцов, width=”170” и height=”317” – ширина и длина ячейки;

27 и 30 — опять открывают и закрывают столбец. В данном случае атрибут colspan=”3” — ячейка растягивается на 3 столбца. Ее размеры составляют: width=”510” и height=”317”.

Таким способом и происходит создание страницы с помощью таблиц.

Если убрать в 8-ой строке атрибут border=”1”, то таблица станет невидимой, что мы и сделаем.

Чтобы создать шаблон сайта потребуется программа Adobe Photoshop.

Открываем программу и создаем новый документ «Файл» — «Новый».

Указываем ширину, высоту, разрешение, цветовой режим, фон.

Прописываем все так, как показано здесь:

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

Для отображения линейки, включаем ее «Просмотр» — «Линейки» и прямо с линейки вытаскиваем направляющие и создаем шаблон, как на рисунке:

Для большей наглядности выбираем фон нашего сайта и закрасим его, например зеленоватым цветом. Для этого необходимо в Photoshop создать новый слой, кликнув на панели инструментов «Палитра цветов» и прописываем тот цвет, который мы выбрали. Зажмем горячие клавиши Alt + Backspace и документ окраситься в тот цвет, который мы указали. Таким способом можно выбирать любой цвет.

Продолжим делать сайт в html. Теперь надо разметить меню сайта, шапку, кнопочки и т.д.

Создадим новый слой, для чего берем инструмент «Прямоугольная область». Выделяем шапку сайта и, зажав клавиши Alt + Backspace, закрашиваем шапку. Затем нажимая Ctrl + T один раз, зажав клавишу ALT, уменьшаем шапку.

Должно получиться что-то на подобие:

Похожим образом, делаем и другие области сайта. Можно изменить цвет, сделать рамку у блоков, добавить тень, наложить градиент. Для этого выделяем слой с зажатой клавишей Ctrl и используем функции Photoshop.

Выбираем необходимую функцию, например: обводка. Указываем ее размер в пикселях и цвет.

Подобным образом создаем другие элементы на сайте.

На кнопочках прописываем названия, можно прописать и в html, а можно сразу сделать графичные кнопочки. Выбираем инструмент «Текст» и на кнопках делаем надписи. Например: Главная, Услуги, Контакты и т.п.

Добавляем картинку в шапку сайта и простым перетаскиванием картинки, размещаем ее в верхнем блоке сайта. Изменить размер картинки можно с помощью Ctrl + T.

В итоге получим готовый шаблон сайта:

Разрежем шаблон на части и сохраним все в отдельной папке в нужном формате.

Берем инструмент «раскройка» и выделим каждую область сайта.

Все сохраняем. Идем в меню, выбираем «Файл» —> «Сохранить для Web». Сохраняем в формате.jpeg или.png.

В итоге: на рабочем столе – папка с готовыми блоками будущего сайта. Перенесем эти файлы в нашу папку с сайтом.

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

Ниже приводится окончательный результат:

Я думаю, что здесь не сложно разобраться, что к чему.

10 строка – прописываем шапку сайта атрибутом background;

15, 16, 17, 18 – вставляем кнопки и прописываем ссылки;

22 строка – прописываем фон меню атрибутом background;

23 – 28 строчки – прописываем пункты меню сайта;

33 строка – текст сайта.

Оказывается, что ничего сложного в создании сайта на html нет.

В итоге мы узнали, как сделать сайт в html.

Вот и все, наш сайт готов!

Да, это, конечно, простая страница, созданная на html.

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

Попробуйте и начните с малого, и если вы научитесь создавать простые страницы, со временем вы сможете создать нечто большее. Самое главное – не бросайте обучение, тогда в скором времени вы научитесь создавать профессиональные сайты.

Рекомендую: