Бизнес-блог Ивана Балашова
Бизнес-блог Ивана Балашова

Твои увлечения могут приносить тебе от 50 000 руб в месяц

Выберите рубрику блога

Инфобизнес37Сайтостроение18Партнерки53Продвижение112Сервисы14Фриланс20Моя жизнь4Новичкам125Майнинг2

Как создать HTML сайт

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

Нелегкий путь к веб-мастерству

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

Теги

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

55

Важно научиться разбираться в их предназначении. Итак, основные ярлыки:

  • Ссылка на веб-страницу (<a href="# адрес"> Страница 1 </a>);
  • Элемент блока для постройки всего интернет-сайта ( <div></div>);
  • Таблица, выступающая важнейшей системой при создании ресурса (<table> <tr> <td>);
  • Теги для наполнения страниц контентом <body> </body >;
  • Имя ресурса прописывают так: <title> Страница модного дизайнера </title>;
  • Заголовки, списки, параграфы (<h> ... </h>   <p>...</p>   <li>...</li>);
  • Тексты документов, невидимая часть веб-сайта (<head> </head>);
  • Вставка графики, картинок (<img src="адрес" width="ширина" height="высота" alt="название" >);
  • Начало кодировки – конец страницы: <html> </html>.

Стили

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

css-style

Верстка

Ознакомившись с несколькими важными тегами, переходим к осваиванию другого направления – верстки. Для этого можно воспользоваться программой Adobe_Dreamweaver_CS3_v9_RUS, скачанной из надежного источника в сети. Что она даст? Главный плюс – открытие файлов с целью редактирования.

verstka

Для изменения картинок (обрезки, ретуши, добавления текста) под цели вашего сайта можете использовать другую эффективную программу – Adobe Photoshop.

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

  • Редактировании;
  • Конструировании;
  • Просмотре проектов, созданных на языке

Но это необязательный момент.

Непосредственно создание HTML-страниц

Структура

Расскажу о том, из каких компонентов будет состоять каждая страница:

  1. Хедер. Его еще называют «шапкой». Состав: имя, логотипы, ключевики, стили, кодировки;
  2. Контент: видео, фото, текстовые материалы и т.д.;
  3. Футер: интерфейс, рекламные блоки, счетчики.

04_01

Написание

HTML-страницы могут создаваться в любых текстовых редакторах с использованием языка HTML. Создайте главную HTML-страницу, щелкнув правой клавишей мыши на пустой странице. Кликните «Создать» и выберите «Текстовый документ». Пропишите, например, <html> Первый сайт. </html>, и сохраните изменения в новой папке.

Обязательно дайте название файлу index.html (следующие страницы именуют по собственному желанию, но используют расширение _ _.html). Затем скопируйте код страницы, откройте созданный файл при помощи блокнота. Вставьте код, сохраните.

Теперь хедер и меню расположите с помощью таких тегов: <!DOCTYPE_ _>,

<head>, <html>, <title>, <meta http-equiv="Content-Type" content="text/html; charset=utf-8", <body>. После этого приступите к наполнению контентом. Созданную страницу сохраните файлом, называя ya.html. Посмотрите в удобном для вас браузере.

Основное есть. Для футера (нижней части веб-страницы) используйте тег </body>. Для окончания странички примените ярлык </html>.

Чтобы просматривать страницы, которые вы разрабатываете, зайдите в любой браузер. Теперь для просмотра сделайте двойной щелчок мышкой по файлу веб-страницы, выберите из набора опций «Открыть с помощью», например, Гугла, Яндекса, Mozilla Firefox.

Выкладывание в интернет

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

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

Нашли мою статью информативной? Расскажите о ней друзьям из социальных проектов! Также буду рад видеть вас в постоянных подписчиках блога! До новых встреч!

С уважением, Иван Балашов!

Комментарии
    Оставить комментарий
     ;-)  :|  :x  :twisted:  :smile:  :shock:  :sad:  :roll:  :razz:  :oops:  :o  :lol:  :idea:  :grin:  :evil:  :cry:  :cool:  :???:

    © 2018 ivanbalashov.ru Все права защищены

    Бизнес-Блог Ивана Балашова

    Инфобизнес для всех!