Быстро создаём страницу html — пошаговое руководство с разъяснением. Html в блокноте


Создание html страницы в блокноте: разъяснения для чайников

Приветствую вас на страницах блога Start-Luck. Сегодня мне бы хотелось показать вам, как использовать код. Писать сайты – интересное занятие, которое многим может казаться невыполнимо сложным. На самом деле простенькую страничку можно создать всего за 5 минут.

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

Как создать страничку

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

Откройте документ.

Вставьте в него вот этот код.

<html> <head> <title>Моя первая страница</title> </head> <body> <center><h2>Создать страницу проще, чем вы думаете</h2></center> Многим может показаться, что создание сайтов дело сложное, даже невыполнимое. Для этого нужно много учиться, узнать, сделать. На самом деле существует около 100 тегов, которые даже не обязательно учить. Важно лишь понять, что и где применяется. Информацию можно подсмотреть в различных шпаргалках, а со временем вы начнете вспоминать теги на автомате. <br/><br/> <center><img alt="Компьютер" src="https://pixabay.com/static/uploads/photo/2016/10/14/18/03/workplace-1740807_960_720.jpg"></center> <br/><br/> <font>Простой код позволяет сделать текст красным</font> <br/><br/> <b>Написать жирным не намного сложнее</b> <br/><br/> Мы дошли до самого низа <br/><br/> Теперь вы знаете чуть больше о тегах и можете использовать их. Давайте попробуем вставить ссылочку, чтобы связать несколько страниц воедино. <br/><br/> <hr> К примеру, вот ссылка на мой блог - <a href="http://start-luck.ru/">Start-Luck</a> - рассказывает просто о "сложном". <br/><br/> Ну вот и все. Ваша первая страница готова <br/><br/> </body> </html>

<html> <head> <title>Моя первая страница</title> </head> <body> <center><h2>Создать страницу проще, чем вы думаете</h2></center> Многим может показаться, что создание сайтов дело сложное, даже невыполнимое. Для этого нужно много учиться, узнать, сделать. На самом деле существует около 100 тегов, которые даже не обязательно учить. Важно лишь понять, что и где применяется. Информацию можно подсмотреть в различных шпаргалках, а со временем вы начнете вспоминать теги на автомате. <br/><br/> <center><img alt="Компьютер" src="https://pixabay.com/static/uploads/photo/2016/10/14/18/03/workplace-1740807_960_720.jpg"></center> <br/><br/> <font>Простой код позволяет сделать текст красным</font> <br/><br/> <b>Написать жирным не намного сложнее</b> <br/><br/> Мы дошли до самого низа <br/><br/> Теперь вы знаете чуть больше о тегах и можете использовать их. Давайте попробуем вставить ссылочку, чтобы связать несколько страниц воедино. <br/><br/> <hr> К примеру, вот ссылка на мой блог - <a href="http://start-luck.ru/">Start-Luck</a> - рассказывает просто о "сложном". <br/><br/> Ну вот и все. Ваша первая страница готова <br/><br/> </body> </html>

Теперь нажмите «Сохранить как…». Это очень важный момент.

Файл нужно назвать index.html. Окончание «.html» указывает на расширение файла. Если вы просто введете название индекс, то документ сохранится как текстовый файл и не откроется браузером.

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

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

Сейчас я более подробно расскажу о тегах, а пока давайте просто уберем из заголовка «center» и вставим строчку, в которой содержится слово «Color». Кстати, как менять цвет html я уже писал. Это очень просто, рекомендую к прочтению.

Еще раз сохраните документ, в этот раз можно просто воспользоваться сочетанием клавиш Ctrl+S, а затем обновите страницу в браузере при помощи кнопочки F5

Помните, практически любой тег должен открываться и закрываться. То есть где-то должен располагаться код со слешем. В данном случае он выглядит так: </font>.

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

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

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

Теги

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

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

Основные

Начинается и заканчивается страница с тегов <html></html>. Они показывают браузеру, что это веб-документ, созданный при помощи html.

Далее идет <head></head> или заголовок. В ней располагается самая важная информация о странице, в нашем случае – Title. Если вы еще не нашли фразу «Моя первая страница», которая присутствует в коде, обратите внимание на саму вкладку, над поисковой строчкой.

Именно теги <title></title> отвечают за начало и конец основной информации о страничке.

Далее идет основная контентная часть. Теги <body></body>. Все видимое на странице: заголовки, текст, картинки и так далее.

Тег <h2> указывает на то, что фраза является заголовком. По умолчанию, она чуть больше основного текста и выделяется жирным. Если бы мы с вами сейчас писали не только на html, но и создавали CSS-файл, с которым перекликался наш файл, то могли бы управлять размерами, шрифтом и даже цветом всех заголовков на странице, не прописывая font style, как мы это делали в примере. Хотя об этом тоже рановато.

Кстати, Title и h2 имеют свое влияние во время присваивания вашему сайту места в поисковой выдаче. Относиться к ним нужно с большим вниманием и не писать внутри лишь бы что. Они имеют отношение к сео-оптимизации. Помимо h2, существуют еще и h3, h4,h5.

В этой же строчке есть открывающийся и закрывающийся <center>. Благодаря этому элементу можно выравнивать текст по середине. Если этот тег удалить, то текст встанет по правому краю.

<br/> — один из немногих единичных тегов. То есть он работает сам по себе. Благодаря этому элементы вы перепрыгиваете с одной строки, на другую. Проще говоря, делаете отступ. Написали его один раз, значит один раз переместились вниз, два, как у меня, и отступ получился чуть больше.

Картинка

Далее идет тег img, то есть image, картинка. Квадратная скобка открывается, в нее вписывается вся основная информация о изображении, только после этого она закрывается. Надо отметить, что img – это  тег, а все остальные элементы кода, которые вписываются внутрь, это его атрибуты.

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

Можно было загрузить рисунок в папку сайта и прописать к ней путь, но я пошел простым путем. Среди бесплатных фотографий на Pixabay я нашел картинку, открыл ее в новом окне и вставил ссылку.

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

Форматирование текста

<font></font> отвечает за придание части текста какого-то особого стиля, к примеру, как в нашем случае другого цвета. style=»color:red» показывает, что цвет будет красным. Если хотите желтый, напишите yellow, зеленый – green. Можно пользоваться кодами цветов из фотошопа.

<b></b> помогает выделить текст жирным.

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

Ссылки

<a> указывает браузеру, что дальше будет ссылка. Вы хотите перенаправить читателя на другой адрес. Этот тег идет с обязательным атрибутом href=”адрес”. В кавычки вставляется путь, куда браузер должен перенести посетителя страницы. После того, как этот тег прописан, вставляется описание, слово или несколько, при нажатии на которое читателя будет переносить дальше. После того как эти условия выполнены, можно вставлять второй, закрывающийся тег </а>.

После того как основная часть страницы написана, вы закрываете тег body, так как тело закончено. И указываете на то, что прекращаете на сегодня использовать html.

Если вы хотите больше узнать о тегах html и научиться вставлять не только картинки, но и видео, создавать кнопки, различные формы, списки, параграфы, то я могу предложить вам бесплатный курс Евгения Попова «Основы html». Всего 33 урока помогут вам выйти на новый уровень.

Основы html Евгения Попова

Ещё хочу порекомендовать вам Видеокурс, который рассказывает, как верстаются сайты. Весь процесс показан на реальных примерах, что особенно хорошо. Курс предназначен как для новичков, которые ещё даже HTML не знают, так и для тех, кто уже хорошо знает и HTML, и CSS, однако, верстать сайты хорошо не умеет. Более полную информацию Вы можете получить, перейдя по ссылке: www.srs.myrusakov.ru/makeup

Помимо этого заберите Бесплатную книгу по созданию сайтов! Эта книга рассчитана на начинающих, и вот там создаётся сайт ОТ и ДО. То есть готовится дизайн, затем верстаются страницы, пишется программная часть, а после сайт размещается в Интернете. Автор тщательно всё комментирует, а в книге очень много скриншотов и иллюстраций. Причём особенностью книги является то, что создаётся не какой-то абстрактный сайт, а вполне реальный и существующий в Интернете.

Бесплатная книга по созданию сайтов

Сегодня вы сделали много, ведь первый шаг самый сложный.

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

До новых встреч и удачи!

start-luck.ru

Создание сайта html в блокноте с нуля

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

  1. Для этого понадобится готовый дизайн сайта собственного производства или скачанный из сети psd исходник. Его нужно раскроить для верстки html.
  2. Блокнот, а именно NotePad++. Его можно скачать с официально сайта.
  3. Файл index.html. Его можно создать в любой удобной папке на компьютере. Но лучше выдели отдельную папку для своего сайта и размести его там. У меня это папка c:\site\index.html
  4. Файл c:\site\style.css. Это файл стилей, зачем он нужен станет понятно позже.
  5. Папка c:\site\images. В эту папку нужно поместить все изображения нужные для будущего сайта.
  6. Купить хостинг и домен если нужно сайт выложить в интернете

Для удобства я сделал архив с изображениями и уже готовыми пустыми файлами index.html и style.css. Скачай и распакуй архив в нужную тебе папку.

Для работы сайта в сети необходим веб-сервер. Сервер при обращении к домену или папке сайта без указания конкретного файла будет искать в ней index.html или index.php если не найдет отобразит список файлов папки.

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

Теперь нужно открыть файл index и style в NotePad++

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

Скопируй код в файл index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Заголовок страницы для браузера</title> <link rel="stylesheet" href="/style.css" type="text/css" /> </head> <body> <h2>Заголовок страницы</h2> <!-- Комментарий --> <p>Абзац.</p> </body> </html>

Теперь открой его в браузере, должно получится так:

В кратце опишу что значат эти теги. Если хочешь подробнее разобраться то по googl-и как говорится информации на эту тему море.

Указываем браузеру по какому стандарту нужно отображать страницу:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Тег html говорит о том где начинается и заканчивается html документ

<html>...</html>

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

<head>...</head>

Тег body содержит разметку страницы, содержимое этого тега видят посетители сайта.

<body>...</body>

Верстка или создание сайта на html

В процессе верстки сайта будут встречаться теги и атрибуты описать которые в данной статье невозможно. Поэтому рекомендую пользоваться сайтом htmlbook.ru. Кроме того советую внимательно изучать каждый тег и стиль css, который тебе встречается.

Итак что будем верстать:

Фон и основной каркас сайта

Замени содержимое своего файла index.html на следующее:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Мой первый сайт на html</title> <link rel="stylesheet" href="/style.css" type="text/css" /> </head> <body> <!-- Основной блок сайта --> <div> </div> </body> </html>

И добавь в style.css такой код:

/*Каркас сайта*/ body {padding:0px; margin:0; background:#4c281e; font-size:14px; font-family:Arial, Sans-serif;} #basic {width:960px; min-height:950px; margin:0 auto; padding:20px 20px 20px 20px; background:#fff;} img {border:0;} a {color:#ff9c00;} a:hover {text-decoration:none;}

Обнови страницу с сайтом в браузере (F5), должно получится так:

Шапка сайта

Добавьте в тег div с идентификатором basic следующий код:

<!-- Шапка сайта --> <div> <a href="/"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a> <img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" /> </div>

Что бы получилось следующее:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Мой первый сайт на html</title> <link rel="stylesheet" href="/style.css" type="text/css" /> </head> <body> <!-- Основной блок сайта --> <div> <!-- Шапка сайта --> <div> <a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a> <img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" /> </div> </div> </body> </html>

И добавляем в файл css строки:

/*Шапка сайта*/ li.none-bg {background:none!important;} .telefon {float:right;}

Верхнее меню сайта

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

<!-- Шапка сайта --> <div> <a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a> <img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" /> </div>

Этот код:

<!-- Верхнее меню сайта --> <div> <div> <ul> <li><a href="#">О нас</a></li> <li><a href="#">Ассортимент</a></li> <li><a href="#">Отзывы</a></li> <li><a href="#">Забронировать столик</a></li> <li><a href="#">Наши клиенты</a></li> <li><a href="#">Контакты</a></li> </ul> </div> <div></div> </div>

Что бы получилось так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Мой первый сайт на html</title> <link rel="stylesheet" href="/style.css" type="text/css" /> </head> <body> <!-- Основной блок сайта --> <div> <!-- Шапка сайта --> <div> <a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a> <img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" /> </div> <!-- Верхнее меню сайта --> <div> <div> <ul> <li><a href="#">О нас</a></li> <li><a href="#">Ассортимент</a></li> <li><a href="#">Отзывы</a></li> <li><a href="#">Забронировать столик</a></li> <li><a href="#">Наши клиенты</a></li> <li><a href="#">Контакты</a></li> </ul> </div> <div></div> </div> </div> </body> </html>

А в файл style.css:

/*Верхнее меню сайта*/ #top-menu {width:960px; height:74px; } .bg-1 {width:950px; height:64px; background:#4c281e url(images/m1.png) repeat-x; padding:0 0 0 10px;} .bg-2 {width:940px; height:8px; background:#ff9c00; margin:0 auto;} .bg-1 ul {margin:0; padding:0; list-style:none;} .bg-1 ul li {float:left; background:url(images/m2.png) no-repeat right center; padding:0 2px 0 0;} .bg-1 ul li a {display:block; height:40px; padding:24px 27px 0 27px; color:#ff9c00; text-decoration:none; text-transform:uppercase;} .bg-1 ul li a:hover {color:#fff; background:#ff9c00;}

Теперь сайт имеет логотип телефон и меню при наведении на которое меняется фон:

Левое меню и контент 

Пришло время сделать левое меню и блок с контентом. Для этого копируем код и тщательно изучаем, что к чему. После блока:

<!-- Верхнее меню сайта --> <div> ...... </div>

Добавляем следующее:

<!-- Левое меню и Контент --> <div> <!-- Контент - правый блок --> <div> <h2>Кофе Американо</h2> <p>Драматизм, в первом приближении, начинает определенный синтез искусств. Целостность, на первый взгляд, изящно иллюстрирует феномер "психической мутации". Герменевтика, как бы это ни казалось парадоксальным, изящно продолжает онтогенез, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. </p> <p>Согласно теории "вчувствования", разработанной Теодором Липпсом, флегматик дает эйдос. Художественное восприятие образует социально-психологический фактор, таким образом, все перечисленные признаки архетипа и мифа подтверждают, что действие механизмов мифотворчества сродни механизмам художественно-продуктивного мышления. Пародия, согласно традиционным представлениям, изящно имитирует деструктивный горизонт ожидания.</p> <img src="/images/img1.png" alt="" title="" /> <img src="/images/img2.png" alt="" title="" /> <img src="/images/img3.png" alt="" title="" /> <p>Художественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p> <p>Диалогичность готично образует художественный ритуал. Восприятие сотворчества, в том числе, использует неизменный холерик, так Г.Корф формулирует собственную антитезу. Беллетристика иллюстрирует принцип артистизма. </p> <p>Горизонт ожидания аккумулирует фактографический эдипов комплекс, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. Игровое начало, так или иначе, выстраивает конструктивный этикет, так Г.Корф формулирует собственную антитезу.</p> <p>Удожественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p> </div> <!-- Левое меню - левый блок блок --> <div> <div> <div></div> <div> <ul> <li><a href="#">Кофе Айриш</a></li> <li><a href="#">Кофе Американо</a></li> <li><a href="#">Кофе Глясе</a></li> <li><a href="#">Кофе Диппио</a></li> <li><a href="#">Кофе Капучино</a></li> <li><a href="#">Кофе Кон Панна</a></li> <li><a href="#">Кофе Коретто</a></li> <li><a href="#">Кофе Латте</a></li> <li><a href="#">Кофе Лунго</a></li> </ul> </div> <div></div> </div> </div> </div>

Файл index.html будет выглядеть вот так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Мой первый сайт на html</title> <link rel="stylesheet" href="/style.css" type="text/css" /> </head> <body> <!-- Основной блок сайта --> <div> <!-- Шапка сайта --> <div> <a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a> <img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" /> </div> <!-- Верхнее меню сайта --> <div> <div> <ul> <li><a href="#">О нас</a></li> <li><a href="#">Ассортимент</a></li> <li><a href="#">Отзывы</a></li> <li><a href="#">Забронировать столик</a></li> <li><a href="#">Наши клиенты</a></li> <li><a href="#">Контакты</a></li> </ul> </div> <div></div> </div> <!-- Левое меню и Контент --> <div> <!-- Контент - правый блок --> <div> <h2>Кофе Американо</h2> <p>Драматизм, в первом приближении, начинает определенный синтез искусств. Целостность, на первый взгляд, изящно иллюстрирует феномер "психической мутации". Герменевтика, как бы это ни казалось парадоксальным, изящно продолжает онтогенез, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. </p> <p>Согласно теории "вчувствования", разработанной Теодором Липпсом, флегматик дает эйдос. Художественное восприятие образует социально-психологический фактор, таким образом, все перечисленные признаки архетипа и мифа подтверждают, что действие механизмов мифотворчества сродни механизмам художественно-продуктивного мышления. Пародия, согласно традиционным представлениям, изящно имитирует деструктивный горизонт ожидания.</p> <img src="/images/img1.png" alt="" title="" /> <img src="/images/img2.png" alt="" title="" /> <img src="/images/img3.png" alt="" title="" /> <p>Художественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p> <p>Диалогичность готично образует художественный ритуал. Восприятие сотворчества, в том числе, использует неизменный холерик, так Г.Корф формулирует собственную антитезу. Беллетристика иллюстрирует принцип артистизма. </p> <p>Горизонт ожидания аккумулирует фактографический эдипов комплекс, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. Игровое начало, так или иначе, выстраивает конструктивный этикет, так Г.Корф формулирует собственную антитезу.</p> <p>Удожественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p> </div> <!-- Левое меню - левый блок блок --> <div> <div> <div></div> <div> <ul> <li><a href="#">Кофе Айриш</a></li> <li><a href="#">Кофе Американо</a></li> <li><a href="#">Кофе Глясе</a></li> <li><a href="#">Кофе Диппио</a></li> <li><a href="#">Кофе Капучино</a></li> <li><a href="#">Кофе Кон Панна</a></li> <li><a href="#">Кофе Коретто</a></li> <li><a href="#">Кофе Латте</a></li> <li><a href="#">Кофе Лунго</a></li> </ul> </div> <div></div> </div> </div> </div> </div> </body> </html>

И в конец файла css копируем:

/*Левое меню и Контент*/ #content {width:960px; padding:20px 0 0 0; } .right { float:right; width:690px; padding:0 0 0 20px; text-align:justify;} .right h2 {text-transform:uppercase; color:#4c281e; font-weight:normal; margin-top:0;} .left {width:250px; float:left;} .block-nad-menu {width:240px; height:10px; background:#ff9c00;} .block-pod-menu {width:240px; margin:0 0 0 10px; height:10px; background:#4c281e;} .block-menu {width:240px; border-left:10px solid #ff9c00; background:#4c281e;} .left ul {margin:0; padding:10px 0 0 0; list-style:none;} .left ul li {background:url(images/m3.png) no-repeat bottom left;} .left ul li a {display:block; width:195px; color:#fff; text-decoration:none; padding:10px 5px 10px 40px; background: url(images/marker.png) no-repeat 10px 8px;} .left ul li a:hover {background:#ff9c00 url(images/marker.png) no-repeat 10px 8px;} li.none-bg {background:none!important;}

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

Подвал сайта

После блока:

<!-- Левое меню - левый блок блок --> <div> ... </div>

Вставляем:

<div></div> <!-- Подвал --> <div> <div></div> <div>ООО “Кофейня” 2015г.<br/> г. Москва, ул Революционная 1а</div> <div><img src="/images/stat.png" alt="" title="" /></div> <div>Создание сайтов веб-студия <a href="#">«Парампампам»</a></div> </div> <div></div>

Теперь весь файл index.html выглядит вот так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Мой первый сайт на html</title> <link rel="stylesheet" href="/style.css" type="text/css" /> </head> <body> <!-- Основной блок сайта --> <div> <!-- Шапка сайта --> <div> <a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a> <img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" /> </div> <!-- Верхнее меню сайта --> <div> <div> <ul> <li><a href="#">О нас</a></li> <li><a href="#">Ассортимент</a></li> <li><a href="#">Отзывы</a></li> <li><a href="#">Забронировать столик</a></li> <li><a href="#">Наши клиенты</a></li> <li><a href="#">Контакты</a></li> </ul> </div> <div></div> </div> <!-- Левое меню и Контент --> <div> <!-- Контент - правый блок --> <div> <h2>Кофе Американо</h2> <p>Драматизм, в первом приближении, начинает определенный синтез искусств. Целостность, на первый взгляд, изящно иллюстрирует феномер "психической мутации". Герменевтика, как бы это ни казалось парадоксальным, изящно продолжает онтогенез, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. </p> <p>Согласно теории "вчувствования", разработанной Теодором Липпсом, флегматик дает эйдос. Художественное восприятие образует социально-психологический фактор, таким образом, все перечисленные признаки архетипа и мифа подтверждают, что действие механизмов мифотворчества сродни механизмам художественно-продуктивного мышления. Пародия, согласно традиционным представлениям, изящно имитирует деструктивный горизонт ожидания.</p> <img src="/images/img1.png" alt="" title="" /> <img src="/images/img2.png" alt="" title="" /> <img src="/images/img3.png" alt="" title="" /> <p>Художественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p> <p>Диалогичность готично образует художественный ритуал. Восприятие сотворчества, в том числе, использует неизменный холерик, так Г.Корф формулирует собственную антитезу. Беллетристика иллюстрирует принцип артистизма. </p> <p>Горизонт ожидания аккумулирует фактографический эдипов комплекс, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. Игровое начало, так или иначе, выстраивает конструктивный этикет, так Г.Корф формулирует собственную антитезу.</p> <p>Удожественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p> </div> <!-- Левое меню - левый блок блок --> <div> <div> <div></div> <div> <ul> <li><a href="#">Кофе Айриш</a></li> <li><a href="#">Кофе Американо</a></li> <li><a href="#">Кофе Глясе</a></li> <li><a href="#">Кофе Диппио</a></li> <li><a href="#">Кофе Капучино</a></li> <li><a href="#">Кофе Кон Панна</a></li> <li><a href="#">Кофе Коретто</a></li> <li><a href="#">Кофе Латте</a></li> <li><a href="#">Кофе Лунго</a></li> </ul> </div> <div></div> </div> </div> </div> <div></div> <!-- Подвал --> <div> <div></div> <div>ООО “Кофейня” 2015г.<br/> г. Москва, ул Революционная 1а</div> <div><img src="/images/stat.png" alt="" title="" /></div> <div>Создание сайтов веб-студия <a href="#">«Парампампам»</a></div> </div> <div></div> </div> </body> </html>

В файл css добавляем код в самый низ:

/*Подвал*/ .myclr {clear:both; float:none; width:100%; height:1px;} #podval {border-top:10px solid #4c281e; margin-top:20px;} .yellow {width:940px; height:5px; margin:0 auto; background:#ff9c00;} .p1 {float:left; width:300px; padding:15px 0 0 0;} .p2 {float:right; width:200px; text-align:right; padding:15px 20px 0 0;} .p3 {float:right; width:30px; padding:15px 0 0 0;}

Теперь весь файл style.css выглядит следующим образом:

/*Каркас сайта*/ body {padding:0px; margin:0; background:#4c281e; font-size:14px; font-family:Arial, Sans-serif;} #basic {width:960px; min-height:500px; margin:0 auto; padding:20px 20px 20px 20px; background:#fff;} img {border:0;} a {color:#ff9c00;} a:hover {text-decoration:none;} /*Шапка сайта*/ #head-site {height:70px;} li.none-bg {background:none!important;} .telefon {float:right;} /*Верхнее меню сайта*/ #top-menu {width:960px; height:74px; } .bg-1 {width:950px; height:64px; background:#4c281e url(images/m1.png) repeat-x; padding:0 0 0 10px;} .bg-2 {width:940px; height:8px; background:#ff9c00; margin:0 auto;} .bg-1 ul {margin:0; padding:0; list-style:none;} .bg-1 ul li {float:left; background:url(images/m2.png) no-repeat right center; padding:0 2px 0 0;} .bg-1 ul li a {display:block; height:40px; padding:24px 27px 0 27px; color:#ff9c00; text-decoration:none; text-transform:uppercase;} .bg-1 ul li a:hover {color:#fff; background:#ff9c00;} /*Левое меню и Контент*/ #content {width:960px; padding:20px 0 0 0; } /*Контент - правый блок*/ .right { float:right; width:690px; padding:0 0 0 20px; text-align:justify;} .right h2 {text-transform:uppercase; color:#4c281e; font-weight:normal; margin-top:0;} /*Левое меню - левый блок*/ .left {width:250px; float:left;} .block-nad-menu {width:240px; height:10px; background:#ff9c00;} .block-pod-menu {width:240px; margin:0 0 0 10px; height:10px; background:#4c281e;} .block-menu {width:240px; border-left:10px solid #ff9c00; background:#4c281e;} .left ul {margin:0; padding:10px 0 0 0; list-style:none;} .left ul li {background:url(images/m3.png) no-repeat bottom left;} .left ul li a {display:block; width:195px; color:#fff; text-decoration:none; padding:10px 5px 10px 40px; background: url(images/marker.png) no-repeat 10px 8px;} .left ul li a:hover {background:#ff9c00 url(images/marker.png) no-repeat 10px 8px;} /*Подвал*/ .myclr {clear:both; float:none; width:100%; height:1px;} #podval {border-top:10px solid #4c281e; margin-top:20px;} .yellow {width:940px; height:5px; margin:0 auto; background:#ff9c00;} .p1 {float:left; width:300px; padding:15px 0 0 0;} .p2 {float:right; width:200px; text-align:right; padding:15px 20px 0 0;} .p3 {float:right; width:30px; padding:15px 0 0 0;}

А сам сайт вот так:

 

Другие страницы сайта и ссылки меню

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

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

  • o-nas.html - О нас
  • assortiment.html - Ассортимент
  • otzivi.html - Отзывы
  • zabronirovat-stolik.html - Забронировать столик
  • nashi-klienty.html - Наши клиенты
  • kontakty.html - Контакты

То же самое нужно сделать и с левым меню.

  • kofe-ayrish.html - Кофе Айриш
  • kofe-amerikano.html - Кофе Американо
  • kofe-glyase.html - Кофе Глясе
  • kofe-dippio.html - Кофе Диппио
  • kofe-kapuchino.html - Кофе Капучино
  • kofe-kon-panna.html - Кофе Кон Панна
  • kofe-koretto.html - Кофе Коретто
  • kofe-latte.html - Кофе Латте
  • kofe-lungo.html - Кофе Лунго

Теперь открываем index.html в NotePad++ и добавляем нужные ссылки соответствующему меню, что бы получилось так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Мой первый сайт на html</title> <link rel="stylesheet" href="/style.css" type="text/css" /> </head> <body> <!-- Основной блок сайта --> <div> <!-- Шапка сайта --> <div> <a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a> <img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" /> </div> <!-- Верхнее меню сайта --> <div> <div> <ul> <li><a href="/o-nas.html">О нас</a></li> <li><a href="/assortiment.html">Ассортимент</a></li> <li><a href="/otzivi.html">otzivi.html</a></li> <li><a href="/zabronirovat-stolik.html">Забронировать столик</a></li> <li><a href="/nashi-klienty.html">Наши клиенты</a></li> <li><a href="/kontakty.html">Контакты</a></li> </ul> </div> <div></div> </div> <!-- Левое меню и Контент --> <div> <!-- Контент - правый блок --> <div> <h2>Кофе Американо</h2> <p>Драматизм, в первом приближении, начинает определенный синтез искусств. Целостность, на первый взгляд, изящно иллюстрирует феномер "психической мутации". Герменевтика, как бы это ни казалось парадоксальным, изящно продолжает онтогенез, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. </p> <p>Согласно теории "вчувствования", разработанной Теодором Липпсом, флегматик дает эйдос. Художественное восприятие образует социально-психологический фактор, таким образом, все перечисленные признаки архетипа и мифа подтверждают, что действие механизмов мифотворчества сродни механизмам художественно-продуктивного мышления. Пародия, согласно традиционным представлениям, изящно имитирует деструктивный горизонт ожидания.</p> <img src="/images/img1.png" alt="" title="" /> <img src="/images/img2.png" alt="" title="" /> <img src="/images/img3.png" alt="" title="" /> <p>Художественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p> <p>Диалогичность готично образует художественный ритуал. Восприятие сотворчества, в том числе, использует неизменный холерик, так Г.Корф формулирует собственную антитезу. Беллетристика иллюстрирует принцип артистизма. </p> <p>Горизонт ожидания аккумулирует фактографический эдипов комплекс, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. Игровое начало, так или иначе, выстраивает конструктивный этикет, так Г.Корф формулирует собственную антитезу.</p> <p>Удожественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p> </div> <!-- Левое меню - левый блок блок --> <div> <div> <div></div> <div> <ul> <li><a href="/kofe-ayrish.html">Кофе Айриш</a></li> <li><a href="/kofe-amerikano.html">Кофе Американо</a></li> <li><a href="/kofe-glyase.html">Кофе Глясе</a></li> <li><a href="/kofe-dippio.html">Кофе Диппио</a></li> <li><a href="/kofe-kapuchino.html">Кофе Капучино</a></li> <li><a href="/kofe-kon-panna.html">Кофе Кон Панна</a></li> <li><a href="/kofe-koretto.html">Кофе Коретто</a></li> <li><a href="/kofe-latte.html">Кофе Латте</a></li> <li><a href="/kofe-lungo.html">Кофе Лунго</a></li> </ul> </div> <div></div> </div> </div> </div> <div></div> <!-- Подвал --> <div> <div></div> <div>ООО “Кофейня” 2015г.<br/> г. Москва, ул Революционная 1а</div> <div><img src="/images/stat.png" alt="" title="" /></div> <div>Создание сайтов веб-студия <a href="#">«Парампампам»</a></div> </div> <div></div> </div> </body> </html>

Теперь жми "Сохранить" потом "Файл > Сохранить как" и сохраняй для каждой ссылки файл с соответствующим именем в папке с файлами сайта. Вот что получилось у меня:

Все сайт готов. Осталось только поменять в каждой странице контент. 

У такого сайта не смотря на его простоту есть очень большой недостаток. Что бы поменять один пункт меню или элемент дизайна придется это делать это в каждом сайте. Когда страниц больше 10 начинается страшная путаница при его обслуживании. Так что создание сайта html в блокноте советую делать только для очень маленьких сайтов или одно-страничных LandingPage. А для полноценных сайтов осваивать CMS (они не так сложны как кажется).

www.opengs.ru

Создание сайта в блокноте | Простой пример создание сайта в блокноте | HTML-теги для создания веб-сайта через блокнот

Доброго времени суток. Как правило в современном мире сайты создаются либо на CMS либо в бесплатных или платных конструкторах. Но все же, в начале времен 1990-2000 годы сайты создавались преимущественно на HTML, без использования каких-либо обращений к базе данных. Различные программы, позволяющие редактировать HTML + CSS в реальном времени, например, Dreamweaver — появились только в самом конце 20-го века. Поэтому сайты создавались в блокноте и других подобных редакторов. Хоть сейчас и существует множество удобных способов сделать качественный ресурс, создание сайта при помощи блокнота позволяет выучить основы построения страницы и основы HTML в целом.

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

Создание сайта в блокнотеИ сразу же сохраним его в HTML формате:  В блокноте нажмите: Файл -> Сохранить как

Сохраняем файл в формате HTMLИ напишите название файла, к примеру, index.html

Сохраняем файл в формате HTML

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

<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Мой самый прекрасный сайт</title> </head> <body> <h2>Мой первый сайт</h2> <p>Еще совсем чуть-чуть, и я научусь делать самые лучшие сайты на свете.</p> </body> </html>

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

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

HTML-теги для создания сайта через блокнот

  • DOCTYPE — позволяет браузеру определить, что за тип документа он открыл, поскольку у HTML-документа есть множество версий.
  • html — тег, которым открывается и закрывается вся веб-страница
  • head — хед (или голова) документа. Данный тег несет в себе информацию для браузера и не отображается на web-странице. В нем содержаться по большей части информация для браузера и поисковой системы, стили CSS, которые мы пропишем чуть позже и различные скрипты.
  • meta — указывает браузеру и поисковой системе определенную информацию. В данном случае тег мета указывает браузеру о необходимости использования кодировки UTF-8 (для того, чтобы правильно отображался русский язык). В других случаях этот тег может указывать какие-либо другие данные, например, автор статьи, описание страницы, ключевые слова.
  • body — боди (или тело) документа. В этом теге содержится все то, что мы в данный момент видим на странице, можно сказать, что он включает в себя скелет или каркас веб-страницы.
  • h2 — Главный заголовок на странице, который оказывает большое влияние, например на seo
  • p — параграф — текст, который мы видим на странице

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

Пример создание сайта в блокноте

Получился у нас конечно, не самый лучший в мире веб-ресурс, но надо ведь с чего-то начинать?:)

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

Теперь давайте придадим ему «красивостей», напишем несколько стилей внутри тега <head>

body { background: #F2F2F2; max-width: 900px; margin: 0 auto; padding: 20px; } h2{ color: #4C4C4C; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #BEBEBE; } p{ font:italic; }

В итоге наш пример сайта сделанного в блокноте в коде выглядит так

<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Мой самый прекрасный сайт</title> <style> body { background: #F2F2F2; max-width: 900px; margin: 0 auto; padding: 20px; } h2{ color: #4C4C4C; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #BEBEBE; } p{ font:italic; } </style> </head> <body> <h2>Мой первый сайт</h2> <p>Еще совсем чуть-чуть, и я научусь делать самые лучшие сайты на свете.</p> </body> </html>

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

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

 

nz4.ru

Как создать сайт в блокноте HTML — пример и инструкция

1.Создайте текстовый документ.

2.По желанию переименуйте файл (у меня он будет называться first-page) и обязательно задайте ему расширение .html вместо .txt).

3.Откройте документ программой Блокнот, Notepad, Notepad++ или другом текстовом редакторе, желательно с подсветкой синтаксиса.

4.Скопируйте и вставьте в него следующий текст.

<!DOCTYPE html> <html> <head> <title>Моя первая страничка</title> </head> <body> Тело HTML-документа (отображается на экране) </body> </html>

5. Сохраните изменения в файле.

Сохраняем изменения в файле

6. Откройте first-page.html, только уже не в Блокноте, а в любом доступном вам браузере. На экране должно отобразиться примерно следующее:

Просмотр нашего документа в браузере

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

Теперь проверьте, правильно ли вы этот код поняли. Рассмотрим его.

Это тег, с которого должен начинаться любой html-документ. Он даёт понять интернет-обозревателю, с какой версией языка разметки тот имеет дело. Без этой строки браузер может начать неправильно обрабатывать код. Написав , мы идентифицировали файл как документ стандарта HTML 5, и браузер, проанализировав первую строку, будет обрабатывать остальной код в соответствии с заданным стандартом.

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

«Head» с английского — «Голова». Этот контейнер содержит теги со вспомогательной информацией для веб-браузеров и поисковых систем. Здесь можно задать файлы скриптов, таблицы стилей, ключевые слова и

<title>Моя первая страничка</title>

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

«Body» — тело. Таким образом у любого html-документа есть голова, содержащая вспомогательную информацию, и тело, внутри которого находится основной код документа. Так как наша страничка — первая, она не должна быть сложной, и поэтому тело документа содержит только текст "Тело HTML-документа (отображается на экране)"

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

и

текст (если только это не теги), так что поздравляю, простые html-странички вы создавать уже научились. Внимательный читатель мог задуматься, почему теги расположены именно так:идёт перед, но закрывающий находится перед закрывающим. Чтобы это понять, рассмотрим предложение: Сайт полезный (называется «Яндекс» (кажется так)).

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

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

Полезные ссылки:

www.seostop.ru

Как создать сайт в блокноте html: инструкция базовых знаний

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

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

Базовые знания для начинающего верстальщика

Как правило, первым делом я рекомендую новичкам открыть какую-нибудь интересную программу и попытаться самостоятельно в ней «потыркаться».

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

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

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

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

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

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

Однако, слишком уж это неудобно. Ведь в тегах очень просто запутаться. Некоторые рекомендуют Notepad++, где каждый тег подчеркивается и выделяется. Крутые профессионалы, как и мудрые новички берутся за Adobe Dreamweaver (купить можно здесь или поищите кряканую версию самостоятельно). Думаю, что даже не стоит расписывать насколько крутые и качественные ресурсы предоставляет нам компания Adobe. И что пользуются ей от мала до велика, сейчас я имею в виду профессиональный уровень.

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

Как за неделю понять все о создании сайтов «от корки до корки»

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

Это сведет вас с ума. А потому, предлагаю вам пошаговую инструкцию. Вы можете скачать бесплатные видео уроки Евгения Попова (http://1popov.ru/bonuscourse/dreamform) обо всех трех составляющих построения сайтов. Для этого вам всего-то нужно ввести свою почту и оформить подписку.

Сначала скачайте 33 урока html (http://1popov.ru/bonuscourse/htmlform/). Тут вам расскажут как работать с гиперссылками, текстом, полями форм. Вы узнаете много о непонятных пока терминах: радиокнопки, чекбоксы и многое другое.

Длительность курса – около 4,5 часов. Учтите, что теоретическая часть переплетается с практической. Вы и сами будете делать сайт вместе с профессионалом, повторять с ним на практике, иначе информация не отложится. Спрогнозировать сколько времени это отнимет – невозможно.

Далее приступаем к CSS (http://1popov.ru/bonuscourse/cssform/). Учимся работать с таблицей стилей. Здесь 44 урока. Курс также бесплатный и занимает около 7 часов, без учета выполнения практической части.

Теперь Dreamweaver (http://1popov.ru/bonuscourse/dreamform/). Еще 14 бесплатных уроков.

Понимаете, какая-то неделя, менее 20 часов просмотра видео и вы с нуля овладеете всем, что необходимо для работы. Останется только совершенствовать собственные навыки, набираться опыта и троекратно работать.

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

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

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

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

Для создания одностраничников можно использовать Adobe Muse (поищите саму программу в инете или приобретите здесь). Это очень классная и простая программа. Посмотрите на пример сайта, который я сделал за минуту.

Путем нажатия пары кнопок…

Мы получаем вот такой вариант. Хоть сейчас загружай на сервер.

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

Для создания простых проектов в самый раз! Кстати, если вас заинтересовал Muse, то могу порекомендовать курс Сергея Садовникова (Гениальный Landing Page). Даже если лендинги вас не впечатляют и не интересуют, тут вы можете найти много теоретической информации, которая научит вас делать крутые продающие сайты. Тут есть много полезного.

Выбирайте простые решения для сложных задач и не становитесь редисками. Как правило, люди, постигшие код начинают напоминать старейшин, ум которых возвышается над бренностью бытия: «Вордпресс? О боги, фи! Только низшие создания делают на нем сайты».

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

И уж тем более не старайтесь нести правду туда, где этого меньше всего ждут.

Если вам оказалась полезной эта статья – подписывайтесь на рассылку и получайте больше полезных рекомендаций. Успехов в ваших начинаниях. До новых встреч.

start-luck.ru

Создание сайта в блокноте html

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

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

Итак, приступим к созданию нашего первого сайта на html в блокноте.

1. Откройте блокнот на своем компьютере (Программы – Стандартные – Блокнот).

Создание сайта в блокноте html

2. В самом файле напишите что-то вроде «Это мой первый сайт».

sozdanie-sajta-v-bloknote-html-2

3. Теперь сохраните файл. Для этого можно создать новую папку, назвав ее, к примеру, «Мой первый сайт». Обязательно при сохранении в строке «Тип файлов» должно быть указано «Все файлы». Название файла можно придумать любое, например, index.html.

sozdanie-sajta-v-bloknote-html-3

4. Зайдите в папку, кникните по созданному сайту и вы сможете увидеть свой первый сайт в браузере. :)

Пример самого простого html сайта

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

Удалите фразу «Это мой первый сайт». Впишите в свой index.html следующий код:

<html>

<head>

<title>Главная страница моего первого сайта</title>

</head>

<body>

<p>Html определяет границы документа. Если < > открывает границы, то «/» (слеш) в том теге закрывает границы. Кстати, все, что заключено в такие скобки < > в html-документе называется тегом.</p>

<p>Тег «title» позволит написать заголовок страницы.</p>

<p>А тег «head» откроет так называемое тело документа. Именно здесь мы будем писать все то, что хотим отобразить в нашем файле.</p>

<p>Внутри тела нашего документа мы пока выучим один тег — «p». Он заключает в себя отдельные «куски» материала. В нашем случае он обозначает абзацы.</p>

</body>

</html>

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

sozdanie-sajta-v-bloknote-html-5

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

Перед тегом «html» поставьте:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>

А после «head» поставьте:

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

Теперь у нас все будет отображаться правильно.

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

pro-diz-art.ru

Язык html и основные теги. Создание web-страницы в блокноте.

Здравствуйте, уважаемые читатели блога. С этой статьи мы начнем изучать основы языка HTML.

Вам скорей всего уже известно, что основным языком Internet-а является язык гипертекстовой разметки HTML (HyperText Markup Language). В этой статье мы узнаем базовые понятия HTML и научимся создавать простейшие WEB-страницы.

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

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

Браузер — это специальная программа, предназначенная для просмотра веб-сайтов, например Internet Explorer. При помощи браузера вы бродите по сайтам, щелкая по ссылкам. Любой такой щелчок заставляет браузер сделать запрос на html-страницу web-серверу, получить ответ и отобразить страницу в своем окне. Именно при отображении страницы начинает работать язык HTML, он сообщает браузеру все о структуре и содержимом web-страницы. С помощью команд — тегов, HTML указывает браузеру, где начинаются абзацы текста, какая часть текста является заголовком и указывает куда вставлять таблицы, и даже картинки. А теги это слова в угловых скобках, например <p>, <h2>, <table>.

Язык HTML и его теги

Научись создавать профессиональные сайты на HTML5 и CSS3

Первая версия языка HTML появилась еще в 1992 году. На момент 2013 года разрабатывается спецификация новой версии HTML под номером 5. Разработкой данной спецификации занимается организация World Wide Web Consortium, или сокращенно W3C. Организация W3C занимается разработкой и других Web-стандартов. Ознакомится с этими стандартами вы можете на их сайте www.w3.org. Кстати, Многие Web-браузеры уже поддерживают некоторые возможности HTML 5.

Предлагаю начать изучение языка HTML сразу с примера. Поэтому давайте создадим нашу первую Web-страничку. Для создания WEB-страниц подойдет любой текстовый редактор. Я предлагаю для начала воспользоваться встроенным в Windows Блокнотом (Notepad) (вообще в дальнейшем для редактирования html-кода я советую использовать бесплатный текстовый редактор Notepead++). Найти его можно: «Пуск->Все программы->Стандартные->Блокнот». Давайте создадим страничку  об автомобилях. Итак, откроем Блокнот и наберем в нем текст:

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Пример Web-страницы</title></head><body><h2 align="center">Сайт об автомобилях.</h2><p>Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об <strong>автомобилях</strong>. На сайте есть описания многих импортных и отечественных автомобилей.</p></body></html>

Далее сохраним созданную web-страницу в файл с именем index.html. При этом в диалоговом окне сохранения файла необходимо задать кодировку UTF-8 и заключить имя файла в кавычки, иначе Блокнот добавит к нему расширение txt, и наш файл получит имя index.htm.txt:

Создание web-страницы в блокноте

Теперь осталось открыть созданный файл в браузере и посмотреть на результат. Для этого можно воспользоваться поставляемым в составе Windows браузером Microsoft Internet Explorer, либо любым другим установленным на вашем компьютере браузером, щелкнув два раза мышкой по файлу index.html или перетаскиванием файла на значок браузера. Открываем и видим примерно такой результат:

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

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

Что такое тег?

Научись создавать профессиональные сайты на HTML5 и CSS3

Теперь поговорим подробнее о структуре страницы. Рассмотрим фрагмент: <h2 align="center">Сайт об автомобилях</h2>. Здесь мы видим текст, который отображается на странице как заголовок, заключенный в теги <h2> и </h2>. Что же такое тег в html языке?

Тег HTML -  это обычные слова и символы, заключенные в угловые скобки, например <h2>, <p>, <body>. Так тег <h2> является открывающим тегом, тег </h2> закрывающим тегом, а текст между ними называется содержимым тега. Также тег <h2> и тег </h2> называются парными тегами. Вместе открывающий тег плюс содержимое плюс закрывающий тег образуют элемент html-документа. Бывают еще  элементы состоящие из одного открывающего тега:

html тег

Так парный тег <h2> определяет элемент заголовка первого уровня. Всего существует шесть уровней заголовков, это элементы <h2> — <h6>.

Элементы бывают блочные и строчные (текстовые). Блочные элементы осуществляют структурное форматирование страницы. Блочные элементы всегда отображаются на странице с новой строки и имеют отступ от соседних элементов. Строчные элементы осуществляют непосредственное форматирование текста или логическое форматирование. Элемент <h2> является блочным элементом.

Далее идет парный тег <p>, который создает на HTML-странице абзац. Содержимое данного тега станет текстом этого абзаца. Элемент <p> также является блочным элементом и как мы видим он начинается с новой строки и между заголовком <h2> и абзацем есть отступ.

Внутри абзаца встречается парный тег <strong>, который выводит свое содержимое полужирным шрифтом. Данный тег <strong> вложен внутрь содержимого тега <p>. Это значит, что содержимое тега <strong> будет отображаться как часть абзаца. Такие вложенные теги называются дочерними, а теги в которые вложены другие теги называются родительскими. Таким образом, тег <strong> является дочерним, а тег <p> — родительским. Такая вложенность тегов встречается в HTML сплошь и рядом.

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

Кстати, элемент <strong> является строчным элементом. И как мы видим никаких переносов строк, ни отступов при отображении этого элемента не осуществляется. И очень важно упомянуть, по правилам языка html строчные элементы не могут иметь вложенных тегов.

Вы могли заметить, что открывающий тег <h2> кроме названия содержит еще какой-то текст: align="center". Это атрибут тега, который задает его параметры. Каждый атрибут имеет имя, после которого идет знак =, и далее идет его значение взятое в кавычки:

html тег. атрибут

В наше конкретном случае, атрибут align тега <h2> задает выравнивание текста. Так значение center указывает браузеру, что содержимое тега <h2> необходимо выровнять по центру.

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

Структура WEB — страницы. Основные html теги.

Научись создавать профессиональные сайты на HTML5 и CSS3

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

Во-первых весь ваш html-код должен быть заключен в теги <html> и </html>. Они сообщают браузеру, что страница содержит html-код.

Кроме этого в коде страницы должны быть разделы заголовка и тела документа. Раздел заголовка, или его еще называют шапка, состоит из парного тега <head> и его содержимого. В этом разделе помещают сведения о параметрах страницы, не отображаемые на экране и нужные только браузеру. В нашем примере раздел заголовка такой:

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Пример Web-страницы</title></head>

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

Подводя итог вышесказанному, любая html-страница имеет следующую структуру:

<html><head>...служебная информация...</head><body>...содержимое WEB-страницы...</body></html>

Метаданные html страницы

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

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

и

<title>Пример Web-страницы</title>

Прежде всего, это тег <title>, который задает название WEB-страницы. Это название отображается в заголовке окна WEB-браузера. Кроме того содержимое тега <title> используется поисковиками для указания ссылки на данный документ в результатах поиска по ключевым словам. Поэтому старайтесь задавать интересный заголовок, содержащий ключевые слова, чтобы привлечь больше посетителей.

Следующий метатег <meta> сообщает браузеру кодировку нашего документа. В данном случае мы создали нашу web-страницу в кодировке utf-8. Информацию о кодировке мы передали браузеру с помощью атрибута content тега <meta>. Очень важно задавать кодировку, чтобы браузер корректно отображал содержимое нашей страницы. Если вы заметили, то тег <meta> не имеет закрывающего тега. Это так называемый одиночный тег, или элемент состоящий из одного открывающего тега.  Вообще с помощью тега <meta> можно задавать множество параметров важных как для браузера, так и для поисковиков.

Тип HTML документа (doctype)

Осталось рассмотреть один тег нашей первой WEB-страницы, который находится в самом начале html-кода: <!doctype html>. Данный тег задает версию языка HTML, на котором написана страница, и его версию. Он необходим, чтобы браузер понимал согласно какому стандарту отображать веб-страницу. Метатегов <doctype> существует несколько видов, и они различаются в зависимости от версии языка, на котором написан html-код. Так, наш тег <!doctype html> указывает на версию языка HTML5.

Итак, подведем итоги:

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

2. HTML — это язык, который используется для создания web-страниц. HTML — это аббревиатура HyperText Markup Language (язык гипертекстовой разметки).

3. WEB-страницы состоят из html-тегов и их содержимого. Теги состоят из символов <, > и имени внутри них. Имена тегов можно писать как прописными(большими), так и строчными(маленькими) буквами. Между символами <, >, / и именами тегов, а также внутри имен тегов не допускаются пробелы и переносы строк. Теги бывают парные и одиночные, а также теги могут быть вложенными друг в друга.

4. Открывающий тег + содержимое + закрывающий тег образуют элемент. Бывают также элементы состоящие из одного открывающего тега. В HTML есть блочные элементы и строчные. Блочные элементы всегда выводятся с новой строки и имеют отступ сверху и снизу от соседних элементов. Строчные элементы осуществляют логическое форматирование текста.

5. Открывающие HTML-теги могут содержать атрибуты, которые помещаются между именем тега и символом > и отделяются от имени тега пробелом. Если в теге несколько атрибутов, то они отделяются друг от друга пробелами. Атрибуты бывают обязательные и необязательные.

6. Любая WEB-страница должна содержать в себе две секции: секция заголовков <head> и секция тела <body>. Эти секции должны находиться внутри тега <html>. Это основные теги html, без которых не обходится ни одна html-страница.

7. Вначале HTML-кода должен идти метатег <doctype>, указывающий версию языка.

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

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

На этом у меня все!!! До встречи в следующих постах!

webcodius.ru