Basics template

Как создать сайт html — создание сайта в блокноте

Как создать сайт html — создание сайта в блокноте

Basics template
  • Главная
  • Услуги
    • Создание сайтов
      • Сайт-визитка
      • Лендинг пейдж
      • Бизнес сайт
      • Интернет-магазин
      • Сайт каталог
      • Индивидуальный
    • Продвижение сайтов
      • Продвижение интернет-магазина
      • Продвижение сайта услуг
      • Промокод на 3000 рублей
    • Оптимизация сайтов
    • SEO-аудит сайта
    • Доработка сайтов
    • Стоимость услуг
    • Онлайн заказ
  • Информация
    • SEO словарь
    • Обо мне + новости
    • Блог про сайты
      • Что такое SEO продвижение
      • Сервисы для анализа сайтов
      • Продвижение самостоятельно
      • Этапы разработки SEO сайта
      • HTML сайт в блокноте самому
      • SMM продвижение в соцсетях
      • Обновление и редизайн сайта
      • Релевантность страницы сайта
      • Что такое alt у изображения
      • Конверсия на сайте + формула
    • Полезные сервисы
      • Технический анализТехнический анализ
      • Анализ сайта бесплатноАнализ сайта бесплатно
      • Проверка уникальностиПроверка уникальности
      • Выгрузка сайтов ТОП-10Выгрузка сайтов ТОП-10
      • Парсинг Title и H1-H6Парсинг Title и H1-H6
      • Группировка запросовГруппировка запросов
      • Проверка позиций сайтаПроверка позиций сайта
      • SEO гайд скачать PDFSEO гайд скачать PDF
    • Оплатить + способы
    • Акции и скидки
    • Вакансии
  • Контакты

Екатеринбург

icons8 telegram   whatsapp messenger   vk

Заказать звонок

Чем отличается обычный сайт от SEO сайта?

Видео уже готово, придёт автоматически

  • Главная •
  • Как создать сайт HTML в блокноте

Как создать простой HTML сайт в блокноте

Содержание

    • 1. Создаем файл HTML с помощью редактора Блокнот или Notepad++
    • 2. Создаем структуру простейшей веб-страницы
      • 2.1. А я пока расскажу о html тегах.
    • 3. Оформляем заголовки на нашей простейшей web-странице
      • 3.1. Заголовки h1-h6
      • 3.2. Заголовок h1
      • 3.3. Содержимое h1-h6
    • 4. Создаём простую таблицу внутри нашей HTML страницы
    • 5. Делаем нумерованный и маркированный списки в HTML коде
      • 5.1. Списки бывают нумерованные и маркированные
      • 5.2. Списки в html
      • 5.3. Элемент списка - list item
      • 5.4. Задание
    • 6. Горизонтальная линия и перенос строки
    • 7. Как оформить текст жирным и курсивом
    • 8. Вставляем картинки на нашу простейшую веб-страницу
    • 9. Оформляем текст ссылкой на web-странице
    • 10. Блочные div и строчные span элементы

Создаем файл HTML с помощью редактора Блокнот или Notepad++

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

  1. Создайте на своём обычном ноутбуке на рабочем столе папку easycode (название может быть любым, но в следующих инструкциях я буду использовать это);
  2. Откройте папку easycode. Вверху откройте вкладку Вид и отметьте галочкой Расширения имён файлов. Показано на первом скриншоте;
  3. Создайте в папке easycode текстовый документ (блокнот) с именем page.html. Как должно получиться - показано на втором скриншоте.

NJoqGiAGnQga7 ttF5BCYsfwR9Uufyz oMSZ0U0wa0

Создаем структуру простейшей веб-страницы

  1. Откройте папку easycode и уберите настройку, которую сделали в прошлый раз, чтобы она вам не мешала при работе с другими файлами. Вкладка Вид - снять галочку Расширения имён файлов;
  2. Откройте файл page с помощью блокнота. Здесь и будем создавать нашу простейшую веб-страницу;
  3. В открывшейся странице пропишите следующий код - на картинке ниже. Лучше, если вы будете набирать код страницы вручную. Так нарабатывается практика;
  4. Сохраните и закройте файл page. Теперь кликните правой клавишей по файлу и выберите Открыть с помощью - далее нужно выбрать ваш браузер. Вы увидите простейшую, созданную вами, веб-страницу.

Код html, который нужно написать в блокноте:

V dnEESceSW0wuPn1jhT9

А я пока расскажу о html тегах.

<!DOCTYPE> — сообщает всему миру тип этого документа. Далее все теги, как вы видите, парные. Имеют открывающий и закрывающий тег.

<html></html> — оборачивает веб-страницу.

<head></head> — содержит важные элементы, такие как ссылки на таблицы стилей и скрипты, мета-теги. В нашем простом случае он содержит только title, т.е. заголовок страницы.

<title></title> — заголовок страницы во вкладке браузера. Если вы уже открыли наш файл page при помощи браузера, то увидели свой заголовок во вкладке.

<body></body> — тело веб-страницы с множеством других вложенных тегов. Пока мы вложили только тег p.

<p></p> — абзац paragraph. Т.е. между этими тегами размещается текст абзаца.

Оформляем заголовки на нашей простейшей web-странице

Заголовки h1-h6

Указывают на то, что содержимое этих тегов является заголовком. Заголовок h1 считается самым важным, а h6 самым менее важным.

<h1>Я самый важный заголовок</h1>

<h2>Я тоже важный, но уже не такой, как h1</h2>

<h3>Я на третьем месте по важности</h3>

и так далее до h6. Кстати, h - это первая буква от heading, что переводится, как заголовок.

Заголовок h1

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

Содержимое h1-h6

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

  1. Откройте файл page.html в папке easycode с помощью блокнота.
  2. Пропишите внутри тега body следующее: <h1>Заголовок 1</h1><h2>Заголовок 2</h2><h3>Заголовок 3</h3><h4>Заголовок 4</h4><h5>Заголовок 5</h5><h6>Заголовок 6</h6>. Сохраните и закройте файл.
  1. Теперь кликните правой клавишей по файлу page и выберите: Открыть с помощью - далее нужно выбрать ваш браузер. Вы увидите ваши 6 заголовков.

Создаём простую таблицу внутри нашей HTML страницы

Рассмотрим таблицы в html

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

4927242

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

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

Сейчас сайты верстаются не на таблицах, а на дивах (тег div). Дивы более гибкие, чем неповоротливая таблица. Однако, таблицы часто используются в наполнении. Как выглядит таблица в коде - знать обязательно.

Давайте перейдём непосредственно к тому, как выглядит таблица на html. Я буду рассматривать ПРОСТУЮ таблицу. Простая таблица состоит из следующих html тегов:

<table>
  <tbody>
   <tr>
    <td>Ячейка 1</td>
    <td>Ячейка 2</td>
    <td>Ячейка 3</td>
   </tr>
   <tr>
    <td>Ячейка 4</td>
    <td>Ячейка 5</td>
    <td>Ячейка 6</td>
   </tr>
  </tbody>
</table>

Что означают эти теги:

table (table) - таблица

tbody (table body) - тело таблицы

tr (table row) - ряд таблицы, т.е. строка таблицы

td (table data) - данные таблицы, т.е. ячейка

  1. Посмотрите и скопируйте код выше.
  2. Откройте файл page.html блокнотом
  3. Вставьте скопированный код перед закрытием тега body. Закрывающий тег body выглядит так </body>. Сохраните и закройте файл.
  4. Теперь кликните правой клавишей по файлу page и выберите: Открыть с помощью - далее нужно выбрать ваш браузер. Вы увидите свою таблицу. Странная? Ничего страшного, сейчас мы сделаем ей ширину 100% и границу, будет больше похожа на таблицу.
  5. Снова открываем html страницу блокнотом. Теперь уже ничего не копируете - пишите руками. Найдите тег <table> и добавьте в него style="width: 100%;" border="1". Получится так: <table style="width: 100%;" border="1">
  6. Снова сохраните файл и откройте его с помощью браузера. Теперь наша таблица стала похожа на таблицу!

К таблице можно применять различное оформление. Но об этом как-нибудь в другой раз. Всё таки эта серия заданий именно про простейшую веб-страницу.

Делаем нумерованный и маркированный списки в HTML коде

Сегодня рассмотрим списки. Обратите внимание, что списки используются не только для оформления наполнения. Часто меню на сайте представлено списком. Просто к такому списку (меню) применены стили, которые делают список в одну строку и без маркеров. Поэтому знать и сразу видеть в коде теги списков - обязательно.

Списки бывают нумерованные и маркированные

  • Нумерованный список, т.е. упорядоченный по-английски ordered list;
  • Маркированный, т.е. не упорядоченный по-английски unordered list.

Списки в html

  • тег нумерованного списка <ol></ol>;
  • тег маркированного списка <ul></ul>.

Элемент списка - list item

Тег элемента списка <li></li>.

Задание

  1. Откройте файл page.html блокнотом и удалите теги и содержимое заголовков и таблицы, которые писали в прошлых заданиях. Очень, кстати, полезный навык - удалять ненужные объекты из кода. Понадобится, когда вы будете уникализировать шаблон под запрос клиента.
  2. Между тегами <body></body> сейчас будем размещать списки. Напишите: <ol><li>первый</li><li>второй</li><li>третий</li></ol><ul><li>первый</li><li>второй</li><li>третий</li></ul>.
  1. Сохраните и закройте файл page.html. Теперь откройте его с помощью браузера, и вы увидите два списка - нумерованный и маркированный.

Горизонтальная линия и перенос строки

Сегодня задание лёгкое, всего 2 простых html тега.

Они одиночные и не имеют пары, как теги, которые мы изучали ранее. Ранее теги были такие - открывающий и закрывающий. Например, <body></body>. Сегодня не так:

<br/> - это перенос текста на новую строку. С английского break - разрыв.

<hr/> - это горизонтальная линия. С английского horizontal - горизонтальный.

Можете даже не делать практическое задание. Всё и так легко запомнить. Но если всё таки хотите потренироваться, то:

  1. Откройте файл page.html с помощью блокнота и сотрите списки, которые делали в прошлом уроке.
  2. Напишите внутри тегов <body></body> следующее: Это первая строка<br/>Это вторая строка<hr/>Это третья строка.
  3. Сохраните и закройте html страницу. А теперь откройте его с помощью браузера, и вы увидите результат.

Как оформить текст жирным и курсивом

Теги html сегодня следующие:

<i>тут текст превращается в курсив</i>

italic - курсив

<em>тут текст превращается в курсив</em>

emphasized - выделенный

Результат у <i> и <em> получается одинаковый - курсив, но они не совсем одинаковы. <i> - просто превращает текст в курсив, а <em> превращает в курсив и указывает браузеру, что это важный отрывок текста.

<b>тут текст превращается в жирный</b>

bold - жирный

<strong>тут текст превращается в жирный</strong>

strong - сильный

Результат у <b> и <strong> получается одинаковый - жирный текст, но они не совсем одинаковы. <b> - просто превращает текст в жирный, а <strong> превращает в жирный и указывает браузеру, что это важный отрывок текста.

  1. Откройте файл page.html блокнотом и напишите внутри <body></body>: Это обычный текст<br/><i>тут текст превращается в курсив</i><br/><em>тут текст превращается в курсив</em><br/><b>тут текст превращается в жирный</b><br/><strong>тут текст превращается в жирный</strong>.
  1. Сохраните html-страницу и откройте её снова, но с помощью браузера и вы увидите результат.

Вставляем картинки на нашу простейшую веб-страницу

Сегодня вставляем в нашу простейшую веб-страницу 2 картинки.

  1. В папке easycode создайте папку images и положите туда картинки с именами image1, image2. Картинки, скорее всего, у вас будут в формате jpg.

См. видео.

  1. В файле page.html (открыв его блокнотом) пропишите: <img src="/images/image1.jpg" alt="тукан"><img src="/images/image2.jpg" alt="орел"> alt - это альтернативный текст для картинки
  1. Сохраните html страницу и откройте её с помощью браузера.

Оформляем текст ссылкой на web-странице

Делаем ссылку.

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

<a> - anchor, т.е. якорь (ссылка).

Атрибут href - это hypertext reference, т.е. гипертекстовая ссылка.

  1. Откройте файл page блокнотом и пропишите <p><a href="/page2.html">Ссылка на вторую веб-страницу</a></p>. Сохраните и закройте.
  2. Откройте файл page2 блокнотом и пропишите <p><a href="/page.html">Ссылка на первую веб-страницу</a></p>. Сохраните и закройте.
  3. Теперь откройте любую страницу браузером и кликните по ссылке.

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

Блочные div и строчные span элементы

Это последнее задание по простым тегам HTML.

Сегодня <div> и <span>

<div> - это блочный элемент. С английского division - отдел, раздел, часть. Div редназначен для выделения фрагмента (блока) с целью изменения стиля.

<span> - это строчный элемент. С английского span - диапазон. Предназначен для выделения фрагмента (текста внутри строки) с целью изменения стиля.

  1. В файле page напишите внутри <body></body>: <div>Это большой блок</div><p>Это какой-то <span>очень важный</span> текст.</p>.
  2. Просто сохраните.

Подготовьте эти элементы div и span. Скоро начнём пробовать на них CSS.

На этом мини-курс по созданию web страницы в блокноте окончен. До встречи в следующих уроках!

Быстрый переход

На другую статью

Как создать HTML сайт в блокноте?

Теги статьи

  • html сайт
  • в блокноте
  • создать страницу
  • создаем файл
  • код
  • css
  • youtube
  • документ
  • теги
  • редактор
  • с нуля
  • пример
  • уроки
  • пошаговая инструкция
  • папка
  • шаблон

Другие материалы

В блоге

  • 10 самых распространенных типов сайтов
  • SEO анализ — лучшие сервисы и инструменты: подборка сервисов для анализа сайта и конкурентов
  • Как продвинуть сайт в поисковой системе Яндекс
  • Как создать простой HTML сайт в блокноте
  • Конверсия на сайте — что это, как считать + формула расчета
  • Конструкторы сайтов — плюсы и минусы: можно ли создать свой сайт самому с нуля
  • Мобильная версия сайта или адаптивный дизайн
  • Основные этапы создания web-сайта
  • Редизайн сайта: что это такое и зачем он нужен?
  • Релевантность страницы сайта — что это простыми словами, как определить и провести оценку
  • Что такое SEO продвижение сайта
  • Что такое SMM продвижение и СММ маркетинг, кто такой SMM менеджер
  • Что такое альт у фото — атрибут alt, теги alt и title у изображения (картинки)

logo seo sites

Создание сайтов и продвижение в поисковых системах Яндекс и Google.

Политика конфиденциальности и обработки персональных данных

icons8 whatsapp 961   icons8 vk circled 96

Продвижение

  • Продвижение
  • Оптимизация
  • Стоимость услуг
  • Аудит сайта 0₽
  • Как раскрутить сайт
  • Seo оптимизация что это

Разработка

  • Сайт под ключ
  • Сайт-визитка
  • Интернет-магазин
  • Корпоративный
  • Landing page
  • Заказать по ТЗ

Связаться

Пн-пт с 09:00 до 17:00

E-mail 5900@5900.ru

Контактные телефоны

+7 (343) 383-35-99

+7 (922) 600-59-00

Адрес: г. Екатеринбург,
ул. Заводская д. 27

Поддержка

Каталог всех услуг студии

© 2011-2023  | ИП Цибикова В. В., создание и продвижение веб-сайтов

Изображения FreePik by Ekayasa и Icons8

seobutton
-3 т.р.

А давайте я вам лучше напишу :) Укажите способ:

Заявка на бесплатную консультацию

1000 символов осталось