Как из блокнота сделать html страницу
Перейти к содержимому

Как из блокнота сделать html страницу

  • автор:

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

Как сделать сайт html?

Такой вопрос задают пользователи, которые решили самостоятельно сделать сайт.

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

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

А все дело в том, что язык разметки гипертекста html специально разработан для того, чтобы было удобно создавать web – страницы. И не имея элементарных знаний html достаточно нелегко создать интернет страницу.

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

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

А на самом деле, потребуется всего лишь:

  • Создать web-страницу в виде файла (электронного документа) определенного формата. Если быть более точным – это должен быть файл index с расширением html или htm.
  • Страница должна находиться в интернете и к ней должен быть открыт постоянный доступ. Она должна быть размещена на специальном сервисе (хостинге).

Если говорить о сервисе, то для начала такую страницу можно разместить на бесплатном хостинге, регистрация на котором занимает не более пяти минут. В интернете таких сервисов более, чем достаточно. Можно просто набрать в поисковике запрос: «бесплатный хостинг» и из предложенного списка выбрать наиболее подходящий. После чего надо будет пройти регистрацию. Одним из таких хорошо известных хостингов является сайт «uCoz».

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

Как сделать страницы сайта без знаний html

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

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

Затем статью надо сохранить. Для этого, в меню редактора Word надо выбрать «Сохранить как». Откроется диалоговое окно, надо дать имя документу (index.html) и выбрать расширение веб страница.

Далее: нажимаем «Сохранить».

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

Данный способ создания интернет страниц имеет большой недостаток:

Word генерирует много лишнего кода html. Поэтому этот способ создания сайтов распространения не получил.

Сделать сайт html в Блокноте

Гораздо удобнее и правильнее будет сделать сайт в программе Блокнот. Это стандартная программа для Windows.

Для начала потребуется прописать структуру HTML документа, которая имеет следующий вид:

— теги, определяющие начало и конец документа;

— теги, ответственные за заголовок данной страницы;

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

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

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

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

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

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

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

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

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

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

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

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

Еще по теме: «Создание эффектной верстки: HTML — картинка слева, текст справа» — title для статьи.

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

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

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

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

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

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

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

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

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

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

Шапка сайта

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

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

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

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

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

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

А в файл style.css:

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

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

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

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

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

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

Подвал сайта

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

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

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

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

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

Получился сайт, но при клике на ссылки меню ничего не происходит. Поэтому нам нужно придумать название страниц, прописать их в 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++ и добавляем нужные ссылки соответствующему меню, что бы получилось так:

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

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

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

Создаем сайт на HTML — пошаговое руководство

Сегодня работать с HTML ничуть не сложнее, чем в 1980 году: достаточно выучить пару тегов для оформления документов. Разбираемся, как создать первую страницу, какие возможности предоставляет HTML5 и почему явление Open Source стало таким популярным.

Когда в 1980 году хакер и талантливый программист Тимоти придумал гиперссылки, чтобы легко переходить от одного документа к другому, то вряд ли мог осознать грандиозность своего изобретения. Сэр Тим Бернерс-Ли (так мы его именуем сейчас), сам того не понимая, заложил основы современного веба.

Сегодня создать простой сайт на HTML ничуть не сложнее, чем в 1980 году. Достаточно выучить пару тегов для оформления документов. Хотя технологии шагнули далеко вперед, но базовые принципы остались те же, что и тогда.

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

Все вместе эти гипертексты образуют Всемирную паутину.

Что такое HTML

HTML (HyperText Markup Language) — язык разметки гипертекста. Это формат документов, который изначально содержал:

  1. Сам текст.
  2. Теги (элементы) для разметки этого текста.

Теги — это команды для браузера. Например, тег

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

три этих слова

Если вы работаете в Windows, откройте «Блокнот». Напишите:

Первая страница

и сохраните документ в формате .html (например, doc.html). Теперь откройте его в браузере («Файл» — «Открыть»). И увидите, что покажет браузер:

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

Без шуток, многие так и делают на этом этапе.

Давайте добавим в документ ссылку:

Первая страница

Тег
переносит текст на следующую строку.

Это аналог клавиши Enter на клавиатуре или кнопки «Возврат каретки» на печатной машинке.

Откройте в браузере эту страницу и нажмите ссылку — загрузится главная страница сайта skillbox.ru, с IP-адресом 178.248.237.96. По щелчку мыши документы загрузятся из дата-центра в Москве прямо в ваш браузер. Вот что придумал хакер Тимоти!

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

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

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

Изучение на примерах

Откройте любой сайт и посмотрите исходный код. Это можно сделать прямо в браузере, использовав сочетание клавиш Ctrl+U.

Теперь вы видите, как пишут HTML-код профессионалы, которые получают за это большие деньги. Отличается от нашей первой странички, правда? Но этому тоже можно научиться за несколько месяцев. А если хотите получить полное образование со знанием CSS и JavaScript, с трудоустройством на вакансию джуниор-программиста, то придется учиться целый год.

Еще по теме: Бесплатные книги по HTML для скачивания

Элементы HTML

В своем примере мы использовали всего три тега: ,

и тег с атрибутом href для гиперссылки. В реальности словарь HTML состоит из множества тегов. Все они записаны в стандарт, который поддерживает международная организация World Wide Web Consortium (Консорциум W3C).

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

Набор технологий HTML5

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

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

Когда мы говорим об интерактивных сайтах и AJAX, то почти всегда речь идет о технологиях HTML5.

В HTML5 есть программные интерфейсы (API) для передачи видео и звука, для чатов, в том числе видеочатов через браузер, и многих других интересных интерактивных штук. HTML5 позволяет создавать браузерные игры. Даже YouTube сейчас работает через HTML5, хотя раньше обязательно требовал Flash.

Формально перейти с обычного HTML (HTML4) на HTML5 очень просто: достаточно написать в начале кода веб-страницы тег для указания типа документа.

Первая страница

Всё, теперь у нас документ по стандарту HTML5.

В HTML4 было много разных типов, а в HTML5 остался только один . Весь код, который вы написали раньше на «обычном» HTML (HTML4), будет работать и в HTML5. Однако здесь добавлено много новых технологий:

  1. Мультимедиа-контент: HTML5 audio и v >Улучшенные формы (API валидации, несколько новых атрибутов, новые значения для атрибута type тега и новый элемент ).
  2. Новые семантические элементы ( , , , , , ,

Как редактировать HTML?

Разметка HTML5 создается с помощью тех же приложений, что и разметка обычного HTML, начиная с «Блокнота» в Windows и заканчивая современными средствами разработки со встроенными шаблонами для быстрого создания документов HTML5.

Некоторые справочные ресурсы по HTML

Справочник по HTML5 на портале Mozilla Developers Network

Руководства freeCodeCamp по HTML

Справочник по элементам HTML от W3Schools

Справочник DevDocs по HTML

Как научиться писать на HTML

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

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

Копипаст чужой работы — нормальное явление в программировании, здесь это называется Open Source, очень модное и продвинутое течение.

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

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

Годовая программа обучения «Профессия веб-разработчик» идеально подходит новичкам, которые хотят с чистого листа о тке HTML, CSS-стилях и языках программирования JavaScript и PHP. В итоге вы научитесь создавать свои собственные веб-проекты и сможете претендовать на позицию джуниор-разработчика.

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

  • Живая обратная связь с преподавателями
  • Неограниченный доступ к материалам курса
  • Стажировка в компаниях-партнёрах
  • Дипломный проект от реального заказчика
  • Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы

Как создать сайт на языке html через блокнот с полного нуля?

Всем привет, дорогие друзья и гости моего блога! Ой. Я только что заметил, что Яндекс наградил меня ТИЦ 20, хотя еще вчера был 0. Я понимаю, что ТИЦ уже ничего толком не значит, но всё равно очень приятно и радостно. Ну а вообще я хотел продолжить недавно начатый цикл статей по сайтостроению. И первое, с чего я бы хотел начать — это с основ языка гипертекстовой разметки (не программирования!) HTML.

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

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

Для начала создайте обычный текстовый документ или откройте блокнот. Для открытия блокнота можете вызвать строку «Выполнить» и вписать туда notepad. Открыли? Молодцы!

Структура любого сайта

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

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

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

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

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

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, WordPress, Bootstrap HTML CSS PHP WordPress Bootstrap Автор

Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу

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

1). Создание файла «index.html» и «CSS».
2). Вставка в файл «index.html» скелет html (стандартный код).
3). Подключение «index.html»с «style.css».
4). Создание меню.
5). Вставка логотипа.
6). Создание блока для контента.
7). Создание подвала.
8). Создание остальных страниц.

Создание файла «index.html» и «CSS».
Итак, создайте себе отдельную папочку «Мой сайт». Теперь в этой папочке создайте два файла «index.html» и «style.css» .
Чтобы создать «index.html»:
на компьютере снизу в левом углу нажмите на кнопку «Пуск» .
Далее выберите «Все программы» => «Стандартные» => «Блокнот» . Далее нажмите «Файл» => «Сохранить как»:Укажите место, куда вы хотите сохранить файл, в нашем случае это папка под названием «Мой сайт».
В поле « Имя файла » напишите « index.html» , а не просто « index» ( это важно! ). Таким способом мы создаем файл с расширением « *.html » для веб-страниц. Далее нажмите на кнопку « Сохранить »: Чтобы создать «style.css»:
кнопка «Пуск» => «Все программы» => «Стандартные» => «Блокнот» : В открывшем блокноте нажмите в меню сверху «Файл» => «Сохранить как…» : Далее укажите место, куда вы хотите сохранить файл, лучше файл разместить вместе с остальными HTML файлами. В поле «Имя файла» напишите «style.css» , а не просто style ( это важно! ). Таким способом мы создаем файл с расширением « *.css ». Далее нажмите на кнопку « Сохранить »: Вот, что должно получиться у вас в папке «Мой сайт»: Вставка в файл «index.html» скелетhtml (стандартный код)
Откройте файл «index.html» через программу «Блокнот» и вставьте вот такой стандартный HTML код: Сохраните файл «index.html». Подключение«index.html» к«style.css»
Напомню вам, чтобы подключить файл со стилями « style.css » к « index.html » перед тегом ,пропишите вот такой код: Сохраните файл «index.html» .
Вот теперь можем создавать сайт.
Начнем с меню. Создание меню
Через списки HTML создадим меню и, естественно, сразу пропишем для каждого раздела меню ссылку на другую страницу: Вот полный пример: В результате ничего особенного вы не увидите: Теперь в CSS сделаем меню горизонтальным, уберем маркеры, сделаем отступы. Для этого в CSS пропишите: Теперь выровняем меню посредине Закрасим меню и добавим тень: Осталось поменять размер и цвет в названиях меню: Итак, вот весь CSS стиль для меню: Смотрим на результат: Вставка логотипа Для логотипа создайте папку « image ». В этой папке будут храниться все изображения сайта-визитки. Залейте в эту папку « image » ваш логотип, размерами примерно 200 х 200 px.
Дайте название логотипу « logo » и расширении файла « png ».
Вот так это будет выглядеть в HTML: Выровняем лого по центру и закруглить через CSS: Создание блока для контента
Теперь создадим блок для контента. Добавьте в HTML вот такой код: В CSS выровняем блок «content» по центру. Укажем ему ширину, сделаем внутри отступы, выделим блок тенью: Выровняем заголовок по центру, увеличим размер и поменяем цвет: Теперь изменим размер и цвет текста. Добавим отступ для красной строки: Вот весь CSS код для блока «content» : Создание подвала
Теперь внизу сайта создадим подвал и разместим там копирайт.
В HTML добавьте вот такой код: В CSS выровняем подвал по центру, изменим цвет текста и ссылки, поменяем размер: Вот так выглядит мой абсолютно весь CSS код файла «style.css» : Создание остальных страниц
Вот и готова первая страница. Весь HTML код файла « index.htm l»: Она же нам послужит как шаблонная страница.
После того, как вы сохранили « index.html », создайте файлы:

  • rabota.html – для страницы «Наши работы»
  • prais.html – для страницы «Прайс»
  • contakt.html – для страницы «Контакты»

И во все эти файлы вставьте такой же код, какой в файле « index.html », меняя только текст в и текст с заголовками в блоке « content ».
Смотрим результат!

А те, кто пришел сюда случайно по запросу «создать сайт визитку бесплатно», могут скачать результат, который получился в процессе сегодняшней практики:

Поздравляю всех, кто изучал мои курсы от самого начала до сегодня, с окончанием изучения основ CSS.

Основы HTML

Большинство браузеров имеют возможность изучения html-источника страниц, которые вы просматриваете. При просмотре источника вы увидите ряд тегов HTML (языка разметки гипертекста), окруженных угловыми скобками(<>), перемежаемыми с текстом.

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

Создание HTML-файла
  1. Откройте Блокнот или любой обычный текстовый редактор.
  2. В меню «Файл» выберите «Создать«.
  3. Введите следующие строки:
  Top HTML Tags   
 HTML is swell. Life is good. 

Here's the big picture


    Make me an unordered list.
  • One programmer
  • Ten SDKs
  • Great Internet Apps

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

Вот весь HTML-источник для файла, который вы создали:

Полное описание тегов, атрибутов и расширений см. в спецификации языка разметки гипертекста (HTML):

Как сделать HTML страницу: основные теги для вставки картинки, текста, ссылок, кнопок и пр.

img-HTML-stranitsa.png

Д оброго всем времени!

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

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

Кстати, редактировать HTML файлы удобно с помощью блокнота Notepad++ (он подсвечивает код, подсказывает где какие теги закрыты или нет).

�� Кстати!

Если вы хотите, чтобы вашу созданную страницу смогли открыть не только вы (со своего ПК), но и другие пользователи в сети Интернет — то для неё необходимо заказать услугу хостинга (и разместить там эту страницу. ).

Основы: с чего начать формирование своей страницы

Типовой код страницы: азы

Язык HTML строится на тегах . Тег — это спец. обозначение какого-нибудь элемента, например, у картинки он: «» , у ссылки: «» и пр. (при помощи них браузер понимает, что представлено в том или ином участке страницы).

Теги заключаются в угловые скобки ( < >), и образуют пару: открывающий и закрывающий (эту пару также называют контейнером ).

Тело всей страницы заключается в теги: . . Обычно, на любой странице также представлен ее заголовок ( . ) и содержание ( . ).

�� Приведу ниже итоговый код простейшей веб-страницы (для примера):

На скрине ниже представлено, как эта страница будет выглядеть в браузере. Думаю, принцип «что за что отвечает» — должен быть ясен. ��

img-Kak-nasha-stranitsa-budet-vyiglyadet-v-brauzere.png

Скриншот. Как наша страница будет выглядеть в браузере

�� Примечание!

Чтобы создать веб-страницу (как в примере выше) — сделайте следующее:

  • создайте текстовый документ (можно с помощью правого клика мышки на любом рабочем месте стола. );
  • поменяйте у него расширение с TXT на HTML (если ваш проводник не показывает расширений — см. это);
  • откройте файл для редактирования в блокноте (я использовал Notepad++);
  • вставьте туда вышеприведенные строки кода страницы и сохраните файл;
  • затем откройте полученный файл в браузере (в моем примере ниже — файл «page.html»). Для этого достаточно сделать клик ПКМ по этому файлу и в меню выбрать пункт «Открыт c помощью. «. ��

img-Sozdaem-tekstovyiy-fayl-vstavlyaem-tuda-kod-sohranyaem.jpg

Скриншот. Создаем текстовый файл, вставляем туда код, сохраняем

img-Kod-stranitsyi-bloknot-Notepad.png

Скриншот. Код страницы, блокнот Notepad++

��Важно!

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

Адаптивный

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

Для этого можно воспользоваться мета-тегом viewport (нижеприведенный код вставляется между тегами ):

img-Bez-tega-viewport-i-s-nim.png

Скриншот. Без тега viewport и с ним

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

Кстати, обратите внимание, что совсем не обязательно указывать ширину картинок, кнопок и пр. элементов в пикселях — допускается использовать проценты (например, max-width:100% — значит макс. ширина 100%):

Основные теги HTML

Текст (строка, список, выравнивание по центру, выделение жирным, пробел, отступ)

Наиболее популярные теги для форматирования текста (в порядке распространенности):

  • — тег для формирования абзаца. Каждый новый абзац заключен в свой тег (пример:

    Текст блока HTML с отступами (сверху — 1px, справа — 20px, снизу — 0px, слева — 30px)

    );

  • , , , , , — заголовки статьи по старшинству;
  • — перенос текста на следующую строку (закрывающий тег не нужен);

  • — горизонтальная линия, разделяет два участка страницы (закрывающий тег не нужен);

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

Код значка телефон: ☎ (☎)

Код значка звездочка: ★ (★)

Код стрелочек: влево — &larr ; (←); вверх — ↑ (↑); вправо — → (→); вниз — ↓ (↓)

Другие символы можно найти ��в спец. таблицах

�� Примеры «игры» с тегами:

Текст блока HTML с отступами (сверху — 1px, справа — 20px, снизу — 0px, слева — 30px)

Текст по центру

Текст выделен жирным

Текст курсивом

Текст по центру и курсивом

Цитата

img-Kak-vyiglyadyat-tegi-na-stranitse.png

Скриншот. Как выглядят теги на странице

Картинка, изображение, фото

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

https://ocomp.info/favicon-120×120.png » title color: #008080;»>Значок сайта » alt color: #00ccff;»>logo site «>

Обратите внимание, что:

  • в «src» — указывается прямая ссылка на изображение (�� у меня она выделена синим);
  • в «title» — указывается текст, который будет виден при наведении курсора на картинку (название картинки);
  • в «alt» — описание картинки (рекомендуется многими сервисами и браузерами к указанию. Дело в том, что картинки грузятся не так быстро, как текст, — и было бы хорошо, если бы пользователь в процессе открытия веб-странички видел не пустое место, а описание изображения. ).

img-Primer-otobrazheniya-kartinki.png

Скриншот. Пример отображения картинки

Второй пример (слегка отредактированный):

Обратите внимание на следующее:

  • в «width» — можно указать ширину изображения (причем, вместо пикселей можно использовать и проценты!);
  • в «height» — указывается высота изображения;
  • в «align» — выравнивание картинки относительно текста (можно использовать значения: top, bottom, middle, left и right // сверху, снизу, по центру, слева, справа).

img-Kartinka-vstavlena-s-vyiravnivaeim-sprava.png

Скриншот. Картинка вставлена с выравниванием справа

Чтобы картинка была в виде ссылки (т.е. при нажатии на картинку происходило открытие какой-нибудь веб-страницы) ее необходимо «заключить» в ссылку:

Обратите внимание на начало и конец кода — картинка находится «внутри» кода ссылки (и, разумеется, в «href» — нужно вставить тот адрес, который должен открываться после клика по картинке).

Ссылка (в т.ч. на телефон, почту, Skype)

Простейший код ссылки:

В «href» нужно добавить свой URL-адрес (кстати, target=»_blank» — обозначает, что ссылка должна быть открыта в новой вкладке. Если вам это не нужно — просто удалите этот участок кода).

* Кроме этого, в «href» можно вставлять не прямую ссылку, а относительный путь:

  • / — корневая директория;
  • ./ — указывает на текущую папку;
  • ../ — перейти на один уровень вверх;

�� Кстати, ссылки можно указывать не только на другие ресурсы, но и на свою почту, Skype, телефон (замените номер и никнейм в моем примере на свои):

Список

Код списка очень простой:

Обратите внимание, что:

  • в «type» можно указать: circle, square, disc (см. скрин ниже: если «disk» заменить на «square» — вместо кружков будут квадратики);
  • вместо тега — можно использовать (
    — в этом случае список будет нумерованный, т.е. вместо точек будут цифры).

img-Spisok-primer.png

Скриншот. Список — пример

Кнопки и формы

Простейший код для отображения кнопки:

Обратите внимание, что между тегами можно добавить не только текст, но и код ссылки или картинки.

img-Kak-knopka-vyiglyadit-v-brauzere.png

Скриншот. Как кнопка выглядит в браузере

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

При нажатии на кнопку «Отправить» — форма передаст введенные пользователем данные в файл «name.php» , где необходимо написать PHP-код, который обработает их. Например, чтобы посмотреть всё, что ввел пользователь (в наше форме выше) — можно использовать код »

img-Forma-kak-vyiglyadit.png

Скриншот. Форма — как выглядит

Фон

Достаточно слегка изменить тег «» — добавить к нему атрибут bgcolor=»#00FA9A» (вместо #00FA9A нужно указать свой ��код цвета).

Название, заголовок страницы

Содержание страницы, текст заметки/поста

Текст блока HTML с отступами

Цитата

Цвет фона страницы тут же изменится — в моем случае стал зеленым.

img-Fon-zalili-zelenyim-tsvetom.png

Скриншот. Фон залили зеленым цветом

Кстати, фон можно залить не только определенным цветом, но и картинкой. Достаточно также слегка изменить тег «»:

Разумеется, ссылку на фон вам нужно указать свою. ����

img-Fon-v-vide-mramornoy-kroshki-takaya-byila-vyibrana-kartinka.png

Скриншот. Фон в виде мраморной крошки (такая была выбрана картинка)

Таблица

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

Деревья

Цветы

Береза

Ромашка

Тополь

Роза

Как будет выглядеть подобная таблица в браузере — см. скрин ниже. (разумеется, таблицу можно залить нужным фоном, использовать в ней ссылки, картинки и пр. теги).

img-Tablitsa-html-kod.png

Скриншот. Таблица — html код

Шрифт (цвет, размер)

Небольшой показательный код:

Обратите внимание, что сам шрифт и его цвет можно указать свой (вот таблица цветов), размер шрифта «15» — также подбирается под свои нужды.

img-Izmenenie-razmera-shrifta-ego-tsveta.png

Скриншот. Изменение размера шрифта, его цвета

Линия

В своем примере я решил нарисовать 4-горизонтальных линии:

Где, «align» — это выравнивание (положение) линии; «width» — ширина (можно задать в пикселях или процентах); «size» — толщина линии; «color» — ее цвет.

img-Narisovano-4-linii-raznoy-dlinyi-tolshhinyi-tsveta.png

Скриншот. Нарисовано 4 линии (разной длины, толщины, цвета)

Рамки

Несколько рамочек на выбор:

Как они выглядят на страничке показано на скрине ниже (3px — толщина обводки, solid/dotted/dashed/ — тип обводки, #00B344 — код цвета, width — ширина рамочки).

img-Kak-vyiglyadyat-ramochki.png

Скриншот. Как выглядят рамочки

Кстати, рамочку можно вставить только с одной стороны (например, сверху):

Если вам нужно слева — «border-top» нужно заменить на «border-left» (справа — border-right, снизу-подчеркивание — border-bottom).

�� Кстати, также в качестве рамочки можно использовать обычную таблицу!

�� Как найти код незнакомых элементов, и вставить их к себе на страничку

Разумеется, выше приведены далеко не все теги и стили, за счет которых можно «построить» страницу. Многие, наверное, видели (и не раз) различные красивые элементы на сайтах, и не против были бы разместить их на своей странице. И сделать это не сложно, достаточно посмотреть код!

Это удобно реализовано (на мой взгляд) в Яндекс-браузере: нужно нажать ПКМ по интересуемому элементу, в появившемся меню выбрать «Исследовать элемент» — сразу после этого экран разделится на 2 части, справа — будет представлен код HTML и стили. ��

Останется только скопировать его и перенести к себе не страницу (попутно исправив на свой лад ��).

img-Issledovat-element-YAndeks-brauzer.png

Скриншот. Исследовать элемент — Яндекс-браузер

img-Kopiruem-kod-HTML.png

Скриншот. Копируем код HTML

img-Stili-CSS.png

Скриншот. Стили (CSS)

За сим откланяюсь, удачи!

Первая публикация: 1.09.2022

Как из блокнота сделать html страницу

Как создать простую веб-страницу в блокноте с помощью HTML

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

1. Откройте блокнот:
Откройте программу блокнота на вашем компьютере. В Windows это можно сделать через меню «Пуск» -> «Аксессуары» -> «Блокнот».

2. Напишите HTML код:
Введите следующий код, чтобы создать простую веб-страницу:

   Моя первая веб-страница  

Привет, мир!

Это моя первая веб-страница, созданная в блокноте.

Этот код создает базовую HTML-структуру с заголовком, абзацем и текстом на странице.

3. Сохраните файл:
Выберите «Файл» -> «Сохранить как». В поле «Тип» выберите «Все файлы», а затем добавьте «.html» к имени файла, чтобы указать его как файл HTML. Например, «mypage.html».

4. Запустите веб-страницу:
Закройте блокнот и найдите ваш файл «.html». Дважды щелкните по нему, и он откроется в вашем веб-браузере, отображая вашу созданную простую веб-страницу.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *