Создать сайт через блокнот html образец: Создаём простой HTML сайт с помощью блокнота

Содержание

5 бесплатных HTML-шаблонов для быстрого создания сайтов

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

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

Как использовать шаблоны

Вы можете просмотреть каждый шаблон, нажав на ссылку в заголовке. Но чтобы редактировать и использовать шаблоны самостоятельно, сначала нужно их скачать. Для этого щелкните правой кнопкой мыши заголовок каждого шаблона и выберите « Сохранить ссылку как…» . Затем выберите папку для сохранения шаблона и нажмите « Сохранить» .

Альтернативный метод — открыть шаблон в браузере, нажав на ссылку. Затем щелкните правой кнопкой мыши в любом месте страницы и выберите « Просмотр источника страницы» . Это покажет вам HTML, используемый для страницы. Затем вы можете нажать Ctrl + S, чтобы сохранить шаблон на вашем компьютере.

Теперь перейдите в папку, где вы сохранили шаблон. Щелкните правой кнопкой мыши шаблон и выберите « Открыть с помощью», затем выберите «Блокнот». Это открывает шаблон в виде текстового документа. Здесь вы можете внести любые изменения в шаблон, который вы хотите, а затем сохранить.

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

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

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

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

Изменить заголовок страницы

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

  <title> Джон Смит - Обо мне </ title> 

Теперь измените текст внутри тегов <title>, чтобы сказать, что вы хотите.

Изменить изображение

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

  <img src = "muo-logo.jpg" class = "about"> 

Теперь измените «muo-logo.jpg» на URL вашего изображения.

Изменить текст

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

Скопируйте и вставьте нужный текст между этими тегами абзаца. Там будет пробел, автоматически добавленный в конце каждого параграфа. Чтобы добавить больше абзацев, просто добавьте еще один набор тегов <p> </ p> с текстом внутри.

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

  <h2> обо мне </ h2> 

И измените текст «Обо мне» на то, что вы хотите.

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

Изменить ссылки в социальных сетях

Вам необходимо изменить ссылки и имя для каждой учетной записи в социальной сети. Для этого начните с учетной записи Twitter. Найдите эту строку:

  <img src = "twitter-logo.svg" class = "socmed">
 <br> <br>
 <b> Twitter: </ b> <a href="http://twitter.com/johnsmith" target="_blank"> @JohnSmith </a> 

Здесь есть две вещи, которые нужно изменить. Во-первых, измените ссылку http://twitter.com/johnsmith на ссылку для вашей учетной записи в Twitter. Во-вторых, измените дескриптор @JohnSmith на свой дескриптор.

Теперь сделайте то же самое с другими сайтами социальных сетей.

Если есть сайт, которым вы не пользуетесь, например, если у вас нет учетной записи Tumblr, просто удалите этот раздел шаблона:

  <img src = "tumblr-logo.png" class = "socmed">
 <br> <br>
 <b> Tumblr: </ b> <a href="https://johnsmith.tumblr.com" target="_blank"> johnsmith </a>

 <div style = "clear: both">
 <br> <br>
 </ DIV> 

Изменить заголовок и заголовок

Как и шаблон «Обо мне», вы можете изменить заголовок и заголовок, изменив текст внутри тегов <h2> </ h2> и тегов <title> </ title>.

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

Изменить адрес электронной почты

Чтобы заставить форму работать, вам нужно изменить одну строку в шаблоне:

  <form action = "mailto: [email protected]" method = "post" enctype = "text / plain"> 

Здесь вы меняете [email protected] на свой адрес электронной почты. Это будет работать с любым поставщиком электронной почты, и вы получите электронное письмо с комментариями, которые были введены в форму посетителями сайта.

Изменить текст, заголовок и заголовок

Еще раз вы можете изменить текст, который появляется на этой странице, а также. Чтобы изменить текст, просто отредактируйте то, что появляется между тегами <p> </ p>. Чтобы изменить заголовок, измените текст между тегами <h2> </ h2>. Чтобы изменить заголовок, измените текст между тегами <title> </ title>.

Создавая домашнюю страницу для своего бизнеса, вы хотите, чтобы вся ключевая информация была в одном месте. Вот для чего этот шаблон.

Изменить заголовки разделов

Чтобы изменить заголовок каждого раздела, найдите следующие строки:

  <h2> О нас </ h2>
 <h2> Наша миссия </ h2>
 <h2> Наши услуги </ h2>
 <h2> Наши клиенты </ h2> 

Теперь измените заголовок этих разделов на любой, изменив текст между тегами <h2> и </ h2>.

Изменить содержание раздела

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

  <p> Lorem Ipsum Dolor Sit Amet ... </ p> 

Теперь измените текст внутри тегов <p> и </ p>, чтобы сказать, что вы хотите.

Изменить изображение

Шаблон включает в себя место для изображения в нижней части страницы. Чтобы изменить изображение, найдите эту строку:

  <Центр>
 <img src = "muo-logo.jpg" width = "200">
 </ Центр> 

Теперь измените URL «muo-logo.jpg» на URL для изображения, которое вы хотите использовать.

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

Этот шаблон позволит вам показать ваши лучшие отзывы клиентов.

Добавление информации о клиенте

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

  <b> Имя клиента: </ b> Джон Смит
 <br>
 <br>
 <b> Бизнес для клиентов: </ b> Расходные материалы Smith 

Теперь просто замените «John Smith» на имя клиента и замените «Smith’s Supplies» на фирменное наименование клиента.

Добавление отзывов клиентов

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

  Лорем Ипсум Долор Сит Амет, Концертёр Адептисинг Элит 

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

Добавить больше отзывов

Чтобы добавить в шаблон больше отзывов, чем три, скопируйте весь блок, начиная с <p> и заканчивая </ p>. Вставьте это ниже текущих обзоров и отредактируйте, чтобы добавить больше обзоров.

Создать сайт быстро с помощью HTML-шаблонов

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

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

Создать HTML сайт бесплатно

г. Москва, пер. Подсосенский, д. 30 стр. 3 этаж , офис 1,18

Телефон: 8 800 500-21-84

Мы работаем ежедневно с 10:00 до 19:00

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

Хороший макет должен обладать такими качествами как:

  • • адаптивностью — одинаковое отображение на разных устройствах и при разных расширениях;
  • • тематичностью — дизайн ресурса должен соответсвовать тематики сайта;
  • • кроссбраузерностью — одинаковое отображение сайта в разных браузерах;
  • • простотой — у пользователей не должно возникать трудностей с прочтением статей или навигацией по сайту.

Почему стоит cоздавать свой сайт с шаблонами от А5.ru

Найти такой шаблон довольно трудно. Компания A5.ru обеспечивает вам все эти условия, а вдобавок к этому имеет дополнительные преимущества перед конкурентами:

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

  2. Недорогая цена за тарифные планы, подходящие под любые пожелания клиента. Любой желающий может заказать SEO-оптимизацию. К тому же, выбор тарифного плана “Бизнес” награждается бесплатным доменным именем.

  3. Наличие технической поддержки 24/7.

  4. В широком ассортименте предоставляются продающие, готовые шаблоны сайтов html для частных мастеров и коммерческих предприятий.

  5. Адаптивность шаблонов под мобильные версии.

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

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

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

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

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

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

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

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

<html>
<head>
<title>Моя первая страница</title>
</head>
<body>
<center><h2>Создать страницу проще, чем вы думаете</h2></center>
Многим может показаться, что создание сайтов дело сложное, даже невыполнимое. Для этого нужно много учиться, узнать, сделать. На самом деле существует около 100 тегов, которые даже не обязательно учить. Важно лишь понять, что и где применяется. Информацию можно подсмотреть в различных шпаргалках, а со временем вы начнете вспоминать теги на автомате.
<br/><br/>
<center></center>
<br/><br/>
<font>Простой код позволяет сделать текст красным</font>
<br/><br/>
<b>Написать жирным не намного сложнее</b>
<br/><br/>
Мы дошли до самого низа
<br/><br/>
Теперь вы знаете чуть больше о тегах и можете использовать их. Давайте попробуем вставить ссылочку, чтобы связать несколько страниц воедино.
<br/><br/>
<hr>
К примеру, вот ссылка на мой блог - <a href="https://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></center> <br/><br/> <font>Простой код позволяет сделать текст красным</font> <br/><br/> <b>Написать жирным не намного сложнее</b> <br/><br/> Мы дошли до самого низа <br/><br/> Теперь вы знаете чуть больше о тегах и можете использовать их. Давайте попробуем вставить ссылочку, чтобы связать несколько страниц воедино. <br/><br/> <hr> К примеру, вот ссылка на мой блог — <a href=»https://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, и CSS, однако, верстать сайты хорошо не умеет. Более полную информацию Вы можете получить, перейдя по ссылке: www.srs.myrusakov.ru/makeup

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

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

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

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

Урок 1. Первая HTML-страница или начало большого пути

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

Для создания страниц можно использовать специализированные средства, такие как phpDesignerPro, Adobe Dreamweaver или SharePoint от Microsoft, но в большинстве случаев можно обойтись более простыми средствами, такими как стандартный Блокнот Windows или его расширенная версия – «Notepad ++».

Для начала создания первой страницы, открываем блокнот (Пуск-Стандартные-Блокнот), создаем новый документ и вносим код указанный в примере 1. Для создания структуры HTML документа в коде используются теги <html>, <head>, <body>, прописанные в угловых скобках (<…>). В большинстве случаев используются парные теги, первый из которых открывает значение, а второй – закрывает (закрывающий тег содержит «/»). Необходимо запомнить простые правила, чтобы создавать валидный (правильный) код с первого раза:

  • Вся разметка страниц HTML проводится с использованием тегов.
  • Почти все теги парные (открывающий и закрывающий), за исключением небольшого количества тегов форматирования текста.
  • Все, что написано внутри пары тегов подчиняется правилам примененного тега, в том числе использование другого тега.
  • Для удобства теги лучше располагать «лесенкой», т.е. подчиненные теги прописываются с некоторым отступлением от начала управляющего тега.

Что такое валидность кода HTML и как ее проверить, будет рассказано в следующем уроке.

Пример 1. Создание первой HTML-странички

<html>

   <head>

   </head>

   <body>

          Этот документ читается как HTML

    </body>

</html>

Итак, первый документ создан. Теперь его необходимо сохранить, для чего используется команда «Сохранить как…», и при сохранении документа, ему присваивается любое имя (желательно на латинице) и вместо расширения .txt пишется .html или .htm. Это важно, поскольку файлы с расширением отличным от указанного не воспринимаются машинами как необходимый тип документа, и могут выполняться другими программами «по умолчанию».

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

Открыв двойным кликом этот документ, мы увидим в браузере нашу первую страницу с текстом «Этот документ читается как HTML». Конечно, до сайта далеко, но мы только начинаем 🙂

Вторым шагом в создании документа HTML будет формирование «шапки» и «тела». Создается это также с использованием тегов <head> и <body>, следующими непосредственно друг за другом. На практике это выглядит так:

Пример 2 – голова и тело

<html>

Этот документ читается как HTML

            <head>

            Это шапка документа, не отображаемая пользователю.

            </head>

            <body>

            Это – тело документа, которое будет виден пользователю.

            </body>

</html>

Разделение на голову и тело можно сравнить с нервной системой человека. «Всем управляет голова» — выражение верное именно для HTML страниц, ибо в Голове находятся управляющие элементы, которым подчиняются элементы, заключенные в Теле документа.

Разбираться с деятельностью «Головы», мы, пожалуй, будем немного позже. Чтобы понять правила работы, сначала «поковыряемся» в Теле.

«Сначала было слово»… Вот, со слова начнем и мы. Для отображения на страницах используется текст, и форматирование текста – основная часть создания сайта. Вся последующая работа будет вестись в теге <body>

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

Пишем любой текст между тегами <body></body>, например, «Этот текст я хочу увидеть в окне браузера, потому что это первый мой документ».

Теперь придадим тексту красоты.

Для придания свойств тексту, таких как полужирный, курсив, подчеркнутый, применяются управляющие теги <i> </i>, <u> </u> и <b> </b>. Первый тег присваивает тексту курсивное начертание, второй – подчеркивание, третий – полужирное. А также применим тег «br» для разрыва строки. Код страницы будет выглядеть так:

<html>

            <head>

            </head>

            <body>

            Этот <u>текст я хочу</u> увидеть <b>в <i>окне</i> браузера, </b> <br>потому что <i>это <b>первый</b> мой документ</i>

            </body>

</html>

Сохраняем изменения и обновляем страницу в браузере. В результате, в браузере мы увидим:

Этот текст я хочу увидеть в окне браузера,

потому что это первый мой документ

 

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

Написание кода лесенкой, не принципиально, показанный выше пример можно разместить в одну строку (сплошным текстом), и результат будет такой же

<html> <head></head><body>Этот <u>текст я хочу</u> увидеть <b>в <i>окне</i> браузера,</b> <br>потому что <i>это <b>первый</b> мой документ</i></body></html>

Но читать и редактировать такой код сложно, поэтому используется «лесенка» для лучшего восприятия и редактирования.

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

Список программ HTML-редакторов с кратким описанием их возможностей.

Notepad ++ — бесплатный редактор, заменяющий стандартный блокнот и дающие очень широкие возможности. Способен подсвечивать синтаксис многих языков программирования, в том числе и HTML, JavaScript, CSS, PHP.

phpDesigner 8 – достаточно мощная программа для верстки и программирования. Рекомендую использовать в дальнейшем. Приложение содержит готовые шаблоны страниц HTML, PHP и т.д. Вы так же можете создать свой шаблон. Способна подсвечивать синтаксис языков PHP, HTML, XHTML, CSS, JS, XML, SQL и многих других. Но еще одна важная особенность это автодополнение тегов, атрибутов, функций PHP и др. Из программы Вы можете сразу запустить проект и посмотреть результат.

Другие программы…

На выбор можете использовать и другие пакеты:

Adobe Dreamweaver – мощный пакет от Adobe, ранее приобретенный у Macromedia (той самой, которая когда-то активно внедряла Flash ролики и собственно была родоначальницей  Flash). Пакет платный.

HTML Pad – поддерживает многие языки (HTML, VB, ASP, Perl и др.)

PSPadеще одна бесплатная альтернатива блокнота, понимающая HTML, CSS

EditPlus – так же понимает большое кол-во синтаксисов, в том числе и HTML c CSS.

На этом пока все.

Html как связать страницы – Тарифы на сотовую связь

главная ||шаблоны || контакты
Здесь – контентЗдесь фотоЗдесь описание
Здесь фотоЗдесь описание
Перед вами уникальный трёх-колоночный шаблон на бизнес тематику выполненный в строгом и продуманном стиле в слиянии белого и серого цветов. В правой части страницы располагается удобное двух-колоночное главное меню. В данной теме имеется возможность размещения видео роликов и рекламы 120х600pix.
Для вас представлена трёх-колоночная тема, выполненная в слиянии чёрной и жёлтой гаммы цветов, дизайн шаблона, выполненный в спокойных и неярких цветах не раздражает глаз. В правой части блога вы увидите двух-колоночное главное меню, в теме также присутствует календарь.

ЗаголовокСодержаниеФайл
1Главнаяописание ресурсаIndex.html
2Введение в HTML
общая информация об HTML
vvedenie.html
3Цветработа с цветом в HTMLcolor.html
4Текстработа с текстом в HTMLtext.html
5Абзацработа с абзацами в HTMLindent.html
6 Гиперссылкиработа с гиперссылками в HTML
 hyperlink.html
 7Списки работа с текстом в HTML list.html
 8 Рисунки работа с текстом в HTML 
 9 Таблицы работа с текстом в HTML 
 10 Фреймы работа с текстом в HTML