WEB и WordPress новости, темы, плагины. Здесь мы делимся советами и лучшими решениями для сайтов.

Создание веб-сайта с использованием HTML

58

ПОДОЖДИТЕ! Вы ищете быстрое, но мощное средство для создания веб-сайта с использованием HTML? Действительно, вы пришли в нужное место. Потому что у меня есть для тебя лучшее решение.

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

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

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

Создание веб-сайта с использованием HTML

На общем веб-сайте 4 раздела.

  • Меню навигации
  • Слайд-шоу / заголовок
  • Основной контент / боковая панель
  • Нижний колонтитул

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

Раздел слайд-шоу или заголовка будет содержать слайд-шоу или заголовок страницы.

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

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

Давайте теперь начнем с ручного метода.

1. Ручной метод создания веб-сайта с использованием HTML

Шаг 1. Создайте Doctype

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

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Marin Constructions</title> </head> <body> </body> </html>

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

Точно так же нам нужно создать другие необходимые страницы, такие как:

about-us.html: – Этот файл содержит информацию о вас как о компании или как о физическом лице.

services.html: – Этот файл содержит информацию об услуге, которую вы предлагаете своим клиентам.

projects.html: – Этот файл содержит подробную информацию о проектах, которые вы завершили до настоящего времени и которые вы хотите показать своим клиентам.

contact.html: – Этот файл содержит подробную информацию о вашей контактной информации, которая будет отображаться на вашей веб-странице.

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

Шаг 2. Создайте меню для страницы index.html.

<div id="main"> <!--navigation menu --> <nav id="menu" class="navbar-default navbar"> <div id="menu_inner_in"> <div id="navigationmenu"> <div class="menu_logo"> <a href="#" target="_self"> <img src="images/menulogo.png" alt="How to Create a Website Using HTML" /> </a> </div> <div class="menu-center collapse navbar-collapse"> <ul class="menu_items nav navbar-nav navbar-right"> <li class="menu_items_parent dropdown active"> <a href="home.html" class="menu_items_parent_link_active"> <span class="menuchildicon"></span>Home</a> </li> <!-- main menu list closing --> <li class="menu_items_parent dropdown"> <a href="about-us.html" class="menu_items_parent_link"> <span class="menuchildicon"></span>About Us</a></li> <!-- main menu list closing --> <li class="menu_items_parent dropdown"> <a href="services.html" class="menu_items_parent_link"> <span class="menuchildicon"></span>Services</a></li> <!-- main menu list closing --> <li class="menu_items_parent dropdown"> <a href="projects.html" class="menu_items_parent_link"> <span class="menuchildicon"></span>Projects</a></li> <!-- main menu list closing --> <li class="menu_items_parent dropdown"> <a href="contact.html" class="menu_items_parent_link"> <span class="menuchildicon"></span>Contact</a></li> <!-- main menu list closing --> </ul> </div> </div> </div> </nav>

Шаг 3. Создайте заголовок веб-страницы.

<header id="header"> <div id="header_inner"> <div class="header-position"> <p>Welcome to</p> <h2>Marin Construction Company</h2> <p>A LEADING COMPANY THAT CONSTRUCTS FOR THE FUTURE</p> </div> </div> </header>

Шаг 4. Создайте контент для веб-страницы

<div class="page-content container"> <div class="content-section">     <div class="ttr_index_html_row1 row"> <div class="section-heading"> <h1>RECENT CONSTRUCTING PROJECTS</h1></div> <div class="column-row"> <div class="section-column"> <div class="html_content"> <div class="img-content"> <img style="max-height:533px;max-width:800px;" src="images/0.jpg"></div> <div class="column-content"><h4>RENOVATING IDEAS</h4> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p></div> </div> </div> <div class="section-column"> <div class="html_content"> <div class="img-content"> <img style="max-height:533px;max-width:800px;" src="images/1.jpg"></div> <div class="column-content"> <h4>CONSTRUCTING BUILDING</h4> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p></div> </div> </div> <div class="section-column"> <div class="html_content"> <div class="img-content"> <img style="max-height:533px;max-width:800px;" src="images/2.jpg"></div> <div class="column-content"> <h4>TEAMWORK</h4> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p></div> </div> </div> </div> </div></div></div>

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

Шаг 5. Создайте нижний колонтитул для веб-страницы

<footer id="footer"> <div class="footer_html_row0 row"> <div class="container"> <div class="footer-column"> <div class="footer-img"> <img style="max-height:50px;max-width:175px;" src="images/18.png"></div> <div class="footer-content"> <p>Lorem Ipsum is simply dummy text of the Ipsum and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> </div> </div> <div class="footer-column"> <div class="footer-content"> <h4>GET IN TOUCH</h4><p>789, Square Park, Dummy Text, New York City</p> <p>Call us: +12 - 365 - 7890 - 456</p><p>Email us: [email protected]</p></div> </div> <div class="footer-column"> <div class="footer-content"><h4>BUSINESS HOURS</h4><p>Monday to Friday: 9 am to 7 pm</p> <p>Saturday: 9 am to 2 pm</p><p>Sunday: Closed</p> <p>Customer Support Hours 24 / 7 Everyday</p></div> </div> </div> </div> </footer> </div><!--- page wrapper id close here ---> </body> </html>

Примечание для запоминания

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

Теперь, после HTML-файла, мы создадим таблицу стилей, назовем ее style.css и сохраним в новой папке с именем css. И этот файл style.css поможет нам стилизовать нашу веб-страницу.

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

<link href="css/style.css" rel="stylesheet" type="text/css">

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

Шаг 6. Примените код CSS для стилизации вашей веб-страницы

html { margin: 0; padding: 0; } body { margin:0; padding:0; font-family: 'Source Sans Pro', sans-serif; } #menu { padding: 30px 0; } #menu ul { padding: 0; margin: 0; } #menu_inner_in { max-width: 1200px; margin: auto; position: relative; } .menu_logo { position: absolute; left: 0; top: 0; } .menu-center.collapse.navbar-collapse { text-align: right; padding: 10px 0; } #menu ul li { list-style: none; display: inline-block; } #menu ul li a { padding: 5px; margin: 5px; color: #333; text-decoration: none; text-transform: uppercase; font-size: 15px; } #header { min-height: 600px; background: url("../images/header-img.jpg"); background-size:cover; background-position: center; position: relative; } .header-position { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; height: 200px; color: #fff; text-align: center; } .header-position h2 { font-size: 52px; text-transform: uppercase; margin: 0; } .container { max-width: 1200px; margin: auto; } .ttr_index_html_row1.row { padding: 80px 0; text-align: center; } .section-heading { padding-bottom: 40px; } .section-column { display: inline-block; width: calc(100% / 3 - 33px); padding: 15px; } .section-column img { width: 100%; } #footer { background: #111; } .footer_html_row0.row { padding: 80px 0; } .footer-column { width: calc(100% / 3 - 25px); display: inline-block; padding: 10px; color: #FFF; vertical-align: top; }

Шаг 7. Папка и файловая структура

Сохраняйте свои файлы и папки, вот так наша структура файлов и папок будет выглядеть…

Создание веб-сайта с использованием HTML

2. Создайте веб-сайт с помощью HTML с TemplateToaster (автоматический метод)

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

Шаг 1. Выбор CMS

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

Создание веб-сайта с использованием HTML

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

Создание веб-сайта с использованием HTML

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

Создание веб-сайта с использованием HTML

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

Создание веб-сайта с использованием HTML

Шаг 2. Выберите макет

Перейдите в КОНТЕЙНЕР Создание веб-сайта с использованием HTMLLayout Создание веб-сайта с использованием HTMLFluid. Есть еще один вариант для выбора макета, т.е. фиксированный. Вы можете выбирать соответственно. Я выберу Fluid.

Создание веб-сайта с использованием HTML

Шаг 3. Дизайн меню

Создать меню действительно просто. Вы можете выбрать, где вы хотите разместить свое меню, то есть над заголовком, под заголовком, внутри заголовка или вообще без меню. Меню Создание веб-сайта с использованием HTMLРасположение меню Создание веб-сайта с использованием HTMLнад заголовком

Создание веб-сайта с использованием HTML

Вы также можете настроить ширину меню. Перейдите на вкладку меню и выберите параметр ширины, а затем выберите размер, который вы хотите установить для своего меню. Создание веб-сайта с использованием HTMLШирина МЕНЮ Создание веб-сайта с использованием HTMLПолная ширина.

Создание веб-сайта с использованием HTML

Он также позволяет вам выбрать цвет фона для вашего меню. Вы даже можете выбрать изображение для фона меню. Я выбираю цвет здесь. МЕНЮ Создание веб-сайта с использованием HTMLФон Создание веб-сайта с использованием HTMLБольше Цвет

Создание веб-сайта с использованием HTML

Из предложенных опций очень легко выбрать высоту вашего меню. Он полностью регулируется. Перейти в МЕНЮ Создание веб-сайта с использованием HTMLВысота Создание веб-сайта с использованием HTMLПодробнее

Создание веб-сайта с использованием HTML

Выбор подходящего логотипа для веб-сайта действительно важен. А из богатой изображениями галереи вы можете легко выбрать тот, который подходит для вашего сайта. А если вы хотите применить свой собственный логотип, перейдите в опцию «Обзор» и выберите один из вариантов. MENU Создание веб-сайта с использованием HTMLLogo Создание веб-сайта с использованием HTMLПросмотр

Создание веб-сайта с использованием HTML

Существуют различные другие варианты стиля вашего меню. Установите типографику для меню. МЕНЮ Создание веб-сайта с использованием HTMLТипографика

Создание веб-сайта с использованием HTML

Шаг 4. Дизайн заголовка

Перейдите на вкладку Заголовок и выберите подходящую ширину для заголовка. ЖАТКА Создание веб-сайта с использованием HTMLШирина Создание веб-сайта с использованием HTMLПолная ширина

Создание веб-сайта с использованием HTML

Отрегулируйте высоту жатки в соответствии с вашими требованиями. От заданных вариантов до нестандартной высоты, выберите любую. ЖАТКА Создание веб-сайта с использованием HTMLВысота Создание веб-сайта с использованием HTMLПодробнее

Создание веб-сайта с использованием HTML

Сделайте заголовок более живым, разместив фоновое изображение заголовка. ЗАГОЛОВОК Создание веб-сайта с использованием HTMLФон Создание веб-сайта с использованием HTMLБольше изображений

Создание веб-сайта с использованием HTML

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

Создание веб-сайта с использованием HTML

Шаг 5. Добавление содержимого

Пришло время добавить контент на ваш сайт. Вы можете выбрать, сколько столбцов вы хотите для своего веб-сайта из представленных вариантов. Один столбец, два столбца, три столбца или четыре столбца. СОДЕРЖАНИЕ Создание веб-сайта с использованием HTMLСтолбцы Создание веб-сайта с использованием HTML3

Создание веб-сайта с использованием HTML

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

Создание веб-сайта с использованием HTML

Вот так это будет выглядеть.

Создание веб-сайта с использованием HTML

На страницу можно добавить несколько строк и столбцов. Как я сделал со своим. КОНТЕНТ Создание веб-сайта с использованием HTML+ (щелкните значок плюса и добавьте столько строк и столбцов, сколько хотите).

Создание веб-сайта с использованием HTML

Шаг 6. Дизайн нижнего колонтитула

Вы можете легко создать мощный нижний колонтитул с TemplateToaster. На самом деле это довольно просто. Перейдите на вкладку «Нижний колонтитул» и отрегулируйте ширину нижнего колонтитула в соответствии с вашим дизайном. FOOTER Создание веб-сайта с использованием HTMLШирина Создание веб-сайта с использованием HTMLПолная ширина

Создание веб-сайта с использованием HTML

Вы можете добавить цвет фона или изображение в нижний колонтитул. Просто перейдите на фон вкладки нижнего колонтитула и выберите цвет. А если вы хотите добавить какой-нибудь собственный цвет, нажмите на опцию «Больше цветов». FOOTER Создание веб-сайта с использованием HTMLBackground Создание веб-сайта с использованием HTMLMore Color

Создание веб-сайта с использованием HTML

Установите высоту нижнего колонтитула. Вы можете установить любую высоту нижнего колонтитула. FOOTER Создание веб-сайта с использованием HTMLВысота

Создание веб-сайта с использованием HTML

Установите отступы для элементов нижнего колонтитула и придайте им вид по вашему выбору. FOOTER Создание веб-сайта с использованием HTMLPadding Создание веб-сайта с использованием HTMLRight / Left / Bottom / Top / More

Создание веб-сайта с использованием HTML

Чтобы добавить контент в нижний колонтитул, вам нужно дважды щелкнуть контент, чтобы отредактировать его. РЕДАКТОР Создание веб-сайта с использованием HTMLВыберите обязательную опцию. Взгляните на скриншот ниже:

Создание веб-сайта с использованием HTML

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

Создание веб-сайта с использованием HTML

Шаг 7. Добавьте страницы

Это облегчает вам добавление страниц в ваше меню. Как и здесь, изначально у нас было три страницы, т.е. Главная, О нас и Контакты. Но я добавил сюда еще две страницы, то есть «Услуги» и «Проекты». Вы можете сделать это, просто щелкнув значок ⍄, и вы увидите список страниц, которые уже есть в вашем меню. После нажатия на ⊕ (значок плюса) вверху появится диалоговое окно, в котором вы должны выбрать имя, заголовок, имя файла и добавить метаописание соответствующей страницы, которую вы хотите добавить в свое меню. И нажмите кнопку «Сохранить», чтобы наконец добавить его. Взгляните на скриншот ниже.

Создание веб-сайта с использованием HTML

Шаг 8. Экспорт HTML-кода

Чтобы экспортировать ваш HTML, перейдите в FILE Создание веб-сайта с использованием HTMLExport

Создание веб-сайта с использованием HTML

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

Создание веб-сайта с использованием HTML

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

Создание веб-сайта с использованием HTML

Я просматриваю индексную страницу здесь.

Создание веб-сайта с использованием HTML

Вот и все! Ваш красивый HTML-сайт готов.

Какой метод вы используете для создания веб-сайта с использованием html?

Создание веб-сайта с использованием HTML довольно интересно независимо от того, какой метод вы выберете. Не так ли? У ручного метода есть свои плюсы и минусы (плохо только с точки зрения времени и усилий). Принимая во внимание, что TemplateToaster, мощное программное обеспечение для создания HTML- сайтов, само по себе представляет собой полный пакет. И это дает наилучшие результаты, как и обещает. Итак, зачем бороться, если у вас может быть красивый веб-сайт, работающий в кратчайшие сроки, без какого-либо программирования. Ознакомьтесь с нашими бесплатными шаблонами HTML.

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

Источник записи: https://blog.templatetoaster.com

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