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

10 ответов на вопрос “Как сделать сайт в html в блокноте?”

  1. Вопрос интимного характера Ответить

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


    …
    Заголовочные теги
    …


    …
    Тело страницы
    …


    2. — между этими тегами заключается весь видимый контент страницы.
    3. — внутри этих тегов должны располагаться все заголовочные теги. Этот раздел можно опустить, но я не советую это делать, поскольку это важная часть документа, особенно для поисковых систем. Более подробно про читайте в описание заголовочных тегов
    4. — между этими тегами прописывается заголовок страницы, которое отображается в самом вверху браузера. Кстати, когда Вы что-то ищите в поисковиках, то первое, что отображается, это как раз название страницы. Тег часто сокращенно называют “тайтлом”. Советую ознакомиться со статьей: как составить тег
    Теперь перейдем к тегам, которые находятся в теле html страницы (внутри и ).
    5. — эти теги выравнивают все, что находится внутри них по центру. В данном случае центром будет – центр экрана. В будущем рекомендуется отказаться от использования этих тегов.
    6. — это один из класса тегов заголовочных тегов .., обычно в него заключают название страницы. Например, у этой странице заголовочный тег “Пример создания html страницы”.
    Примечание
    эти теги имеют большой вес в ранжировании сайта, поэтому ими необходимо пользоваться аккуратно и с умом.
    При составлении html-кода нужно придерживаться простого правила: сначала должен идти заголовочный тег , а дальше могут идти уже

    ,

    и т.д. Главное, чтобы не было сначала

    , потом , потом

    и т.п. Должна быть строгая иерархия. Заголовков

    ,

    и т.п. может быть много.
    Более подробно про эти теги читайте в уроке 14 HTML теги – – заголовочные теги внутри страницы
    7.
    — это одиночный тег, который не требует закрывающего тега. Он осуществляет переход на следующую строку. В моем примере написаны два одиночных тега подряд, чтобы дважды перейти на следующую строку.
    8. — это одиночный тег, который выводит изображение.
    src — обязательный параметр, в котором указывается адрес изображения (вместо URL_ИЗОБРАЖЕНИЯ необходимо прописать адрес, где хранится Ваше изображение).
    Примечание:
    Если изображение находится в одной папке с Вашей html-страницей, то достаточно написать название изображения, иначе нужно прописывать либо абсолютный или относительный URL;
    Не забудьте указать расширение изображения. Например, .jpg, .gif, .jpeg.
    alt или title — в эти параметры можно записать описание к Вашему изображению. Когда Вы наведете мышкой на изображение, то появится это описание. Эти параметры важны для продвижения сайта, особенно в поиске по картинкам. Если изображение не удалось загрузить, то будет выведен этот текст, что также является плюсом.
    Более подробно про читайте в специальном уроке: html тег

  2. Kadora Ответить

    Привет! Это мой первый сайт.
    Скопируйте приведенный код в блокнот (Notepad) и сохраните на компьютере в формате .html. Чтобы теперь посмотреть на нашу веб-страницу, откройте сохраненный файл с помощью браузера (Правой кнопкой мыши -> Открыть с помощью).
    Большинство тегов, которые используются в нашем коде уже были рассмотрены в предыдущих статьях:
    html – корневой тег документа, является контейнером веб-страницы;
    head – в этом теге указываются основные данные, касающиеся генерации веб-страницы (заголовок, стили, скрипты, мета-теги и так далее);
    body – основной тег страницы. Представляет собой “тело” документа, внутрь которого помещаются остальные теги;
    – указывает на тип документа (Doctype);
    meta – используется для указания метаданных страницы (в нашем случае тег указывает на кодировку страницы. Подробнее о мета-тегах читайте в статье Мета-теги);
    title – задает непосредственный заголовок страницы (Тег title);
    H1 – заголовок страницы/статьи (подзаголовки задаются тегами H2-H6);
    P – тег, с помощью которого выделяются абзацы в тексте страницы;
    Как показано выше, HTML-страницы сайта имеют древовидную структуру. Одни теги могут быть вложены в другие, а те, в свою очередь, – в третьи. Это означает, что структура документа определена достаточно четко. Открывающиеся теги обязательно должны иметь закрывающую пару. Немного усложним нашу страницу:
    ООО Василий Пупкин
    Информация о нашей компании

    Кто мы?

    Мы – комманда профессионалов.

    Наши услуги

    Создание сайтов

    Мы создаем по-настоящему крутые сайты.

    Продвижение сайтов

    Ваш сайт в ТОП-3 поисковых систем через 2 дня.

    Посадка картошки

    20 соток в час.

    Контакты

  3. Nuadafyn Ответить


    Рис. 2. Это уже, по сути, веб-страничка, хоть и самая примитивная.
    Сохраняйте и опять открывайте страницу в браузере. Если вы видите фразу на фоне красного цвета – все работает. Можно начинать работу над созданием своего сайта. В css мы указали команду сделать красный цвет фоном всей нашей страницы. Теперь понимаете для чего он нужен, этот css?
    Вот так вот мы и будем создавать сайт: формировать элементы в html, потом оформлять их через css и в конце концов получим что-то, похожее на сайт.

    Структура сайта

    Пока я предлагаю вам отвлечься от кода и немного подумать. Наверняка в сети вы бывали на сотнях сайтов. Хотя внешний вид у всех их разный, общая структура часто очень похожа. Есть так называемая шапка сайта, где размещается логотип, контактная информация и т.д.
    Есть горизонтальное или вертикальное меню, в котором вынесены ссылки на самые главные страницы и разделы сайта. Также есть основная часть, где располагается контент и, возможно, еще одна боковая колонка. Обязательно присутствует низ страницы, где тоже что-то размещают.
    Нам остается только разобраться, как с помощью html можно эти элементы явно задать, а потом прописать им какой-то внешний вид. Об этой, более подробной и практической части создания поговорим в следующей статье, потому что тема слишком велика, чтобы описать ее на одной странице.
    Ну а вообще, разработке сайта в блокноте – не самый удобный способ, как я уже и говорил. В дальнейшем, если вы захотите серьезно заниматься сайтостроением, то вам в любом случае понадобится более серьезная программа вместе с уроками, которые позволят изучить нужные технологии. А в следующей статье мы продолжим создание сайта с помощью html в блокноте и сделаем нашу страничку более похожей на настоящий сайт.

  4. RUSSIANboy Ответить

    В сегодняшней статье мы рассмотрим самый простой способ создания сайта. Сразу хочу сказать, что данный способ является очень примитивным и сегодня никто не создает сайты подобным образом, потому что для этого существуют специальные программы и сервисы.
    Но, если нам необходимо создать веб страницу, то этот способ имеет право на существование.
    Для того, чтобы создать простой сайт нам понадобится программа «Блокнот», которая есть в каждом компьютере.
    Нажимаем в левом нижнем углу на кнопку «Пуск» и выбираем «Все программы». Находим «Блокнот» и открываем двойным щелчком левой кнопки мыши.
    Давайте что-нибудь напечатаем.
    Например: Ура! Я сделала свой сайт!

    Теперь нам надо эту запись сохранить. И сделаем мы это следующим образом: нажимаем «файл» —> «сохранить как».

    Называем файл «index.html»,выбираем «все файлы» и сохраняем на рабочем столе.
    После сохранения появится вот такой значок.

    Если мы откроем этот файл, то в браузере увидим веб страницу, которую мы создали.

    Чтобы отредактировать нашу запись правой кнопкой мыши щелкаем по значку и в контекстном меню выбираем «Открыть с помощью» —>«Блокнот».
    После того, как будут внесены изменения, не забываем сохранять файл. Открыв файл в браузере мы увидим изменения.
    Чтобы сайт был виден всем в интернете, надо его загрузить на хостинг.
    Таким образом, можно сделать простейший веб ресурс.
    Чтобы приукрасить сайт картинками и гиперссылками, а также добавить красок, изменить размер шрифта, добавить таблицу и т.п., придется применить язык HTML, который будет понимать браузер.
    Именно поэтому мы и сохраняли наш файл с расширением .html.

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

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

    Часто применяемые

    Теги бывают:
    парные , , т.е. открывающиеся , и закрывающиеся теги , . Закрывающийся тег – дескриптор со знаком слеша (/);
    непарные.

    Основные виды и назначение тегов

    — данный элемент указывает браузеру, как следует интерпретировать документ. Не является обязательным элементом, но рекомендуется его использовать, чтобы избежать проблем, которые могут возникнуть при отображении страницы.
    — это тег, с которого начинается и им же заканчивается любой веб документ.
    < head>< /head> — внутри данного тега располагается важная информация (метаданные, заголовок страницы, ссылки на стили оформления, а так же скрипты).
    — еще один парный тег, который располагается внутри предыдущего. Он служит для определения заголовка веб страницы, который будет отображаться в браузере.
    Тег  следует за . Именно внутри > будет содержаться вся та информация, которую пользователь увидит в браузере.
     — служит для оформления гиперссылок (). Это один из важнейших элементов языка html.

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

    , 

    , 

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

    Далее сохраняем страницу с расширением html, после чего, открыв ее в любом браузере, мы увидим следующее:

    Таким образом, создать сайт в html в блокноте достаточно просто.

    Видео: «Как сделать сайт за 15 минут»

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

  5. FAL Ответить

    Как создать сайт в блокноте
    Для начала необходимо небольшое знакоство с теорией и общими терминами. Подавляющее большинство страниц сайтов представляют собой обычные текстовые документы, которые оформлены специальным образом – языком гипертекстовой разметкой сокращенно называемой HTML. Некоторые причисляют разметку HTML к языкам программирования, но это не верно.
    HTML – это всего лишь способ стандартизации разметки документов, который однозначно интерпретируется браузерами для отображения на экранах компьютеров в удобной для пользователей форме. Основным инструментом языка HTML являются специальные структурные элементы, с помощью которых и оформляется документ. Их называют дескрипторами или тегами.
    В общем виде тег представляет собой конструкцию вида Таким образом, тег начинается знаком . Теги бывают парными как выделение текста жирным шрифтом и и непарными как перевод строки
    . В случае использования парных тегов обязательно использование как открывающегося тега , так и закрывающегося . Закрывающимся тегом является дескриптор со знаком косой черты /.
    Рассмотрим основные виды тегов и их назначение.
    Элемент . Устанавливается в самое начало страницы и служит для указания браузеру того, как интерпретировать данный документ. Является не обязательным, но очень желателен на странице для избежания возможных проблем с ее отображением.
    Тег . Является парным тегом и состоит из двух частей и . Каждая страница сайта начинается с этого тега и заканчивается им.
    Тег . Также является парным тегом и состоит из двух частей и . Внутри данного тега размещается различная важная информация о странице: ее заголовок, ссылки на используемые стили оформления, подключаемые скрипты, специальные метаданные.
    Тег . Является парным тегом, состоит из двух частей и и располагается внутри тега . Данный тег определяет заголовок страницы, с которым она будет видна в браузере.
    Тег . Является парным тегом, состоит из двух частей и и следует за тегом на странице. Именно в теге &ltbody> содержится вся информация, которая отображается на странице в браузере.
    Тег . Является одинарным. Служит для обозначения перевода строки в документе.
    Тег . Относится к парным тегам, записывается в несколько отличном от других тегов виде и служит для создания ссылок. Является важнейшим элементом всей концепции языка HTML, а также интернета в целом.
    Тег . Относится к парным тегам и состоит из двух частей и
    . С его помощью оформляется текстовый абзац.
    Теги ,

    ,

    ,

    , , . Относятся к парным тегам, так как состоят из двух тегов, например и . Данные теги служат для создания подзаголовков шести уровней и одновременно показывают важность заключенного в них текста относительно всего документа.
    Тег . Также является парным тегом, состоящим из двух частей и и устанавливает полужирное оформление шрифта.
    Всего насчитывается около ста тегов, но рассмотренных десяти уже хватит для оформления простейшей страницы сайта в блокноте. Основные теги документа , , , распределяются в строгом порядке. Внутри тега остальные дескрипторы могут находится в различных порядках в пределах стандартов языка HTML. Проще всего это понять на примере создания простой веб-страницы.
    Запустите Блокнот и в самой первое его строке установите элемент , подсказывающий браузеру как следует интерпретировать ваш документ.
    Сделайте перевод строки и добавьте парный тег . Переведите закрывающийся тег на две строки вниз.
    Добавьте парный тег в строке между тегами и переведите закрывающийся тег на две строки вниз.
    В строке между тегами и напишите парный тег в одну строку.
    Введите заголовок вашей веб-страницы между тегами и . Например, такой.
    Моя первая страница сайта
    Установите курсор в строке после закрывающегося тега и выполните перевод строки. Впишите в появившуюся пустую строку парный тег .
    Моя первая страница сайта
    Сделайте двойной перевод между внутри тегами и . В появившуюся строку впишите парный тег заголовка . Наберите внутри тега подзаголовок страницы.
    Моя первая страница сайта
    Обо мне
    После закрывающегося тега заголовка сделайте перевод строки и в новой строке установите парные теги абзаца и
    . Впишите между ними текст. Например, так.
    Моя первая страница сайта
    Обо мне
    Меня зовут Иванов Иван. Я создаю свой сайт.
    Заключите имя и фамилию в парный тег для выделения их жирным шрифтом.
    Моя первая страница сайта
    Обо мне
    Меня зовут     Иванов Иван. Я создаю свой сайт.
    После закрывающегося тега абзаца
    выполните перевод строки и впишите в новой строке парный тег

    . Впишите между тегами какой-либо текст.
    Моя первая страница сайта
    Обо мне
    Меня зовут Иванов Иван. Я создаю свой сайт.

    Мои успехи

    После закрывающегося тега подзаголовка снова сделайте перевод строки, впишите парные тег абзаца и
    и между данными тегами напишите произвольный текст.
    Моя первая страница сайта
    Обо мне
    Меня зовут Иванов Иван. Я создаю свой сайт.

    Мои успехи

    Освоен базовый синтаксис HTML и создана первая страница будущего сайта.
    В процессе обучения использованы материалы сайта kakimenno.ru
    Из перечисленных в статье тегов остались не изученными два – перевод строки
    и важнейший тег для создания ссылок . Применим их. Перед последним закрывающимся тегом впишите дескриптор
    , а между
    и
    конструкцию вида . У вас должно получится следующее.
    Моя первая страница сайта
    Обо мне
    Меня зовут Иванов Иван. Я создаю свой сайт.

    Мои успехи

    Освоен базовый синтаксис HTML и создана первая страница будущего сайта.
    В процессе обучения использованы материалы сайта kakimenno.ru
    Между кавычек в теге впишите адрес страницы, на которую вы будете ссылаться. Перед тегом можно вписать слово Ссылка, а между тегами и вписать текст, который будет отображаться на странице.
    Моя первая страница сайта
    Обо мне
    Меня зовут Иванов Иван. Я создаю свой сайт.

    Мои успехи

    Освоен базовый синтаксис HTML и создана первая страница будущего сайта.
    В процессе обучения использованы материалы сайта kakimenno.ru
    Ссылка: kakimenno.ru
    На этом создание простейшей страницы для сайта может быть завершено. В принципе, его можно было завершить еще и п.9, но если вы серьезно намерены изучать язык HTML, то дополнительная практика не будет лишней. Сохраните страницу с расширением *.html и можете открыть ее в любом браузере, чтобы просмотреть результаты своей работы. Если все сделано правильно, то вы должны увидеть примерно следующее.

  6. ZeidoPlay Ответить

    Простота – это крайняя степень изощренности.
    Леонардо да Винчи
    Обычно для создания сайтов используют специальные программы типа Macromedia Dreamweaver, или конструкторы сайтов, которые гораздо облегчают работу. Но можно обойтись без них и создать сайт в Блокноте от Windows. В этом случае понадобится знание языка html, а так же пригодятся таблицы стилей css.
    Создадим первую web-страничку. Для этого заходим в меню / Пуск /, которое находится в левом нижнем углу монитора.
    Пуск – Все программы – Стандартные – Блокнот
    В открывшемся окне прописываем основные теги html, а именно, то, что прописано ниже. В дальнейшем, при создании сайта в Блокноте, набор этих тегов можно просто копировать на новую страницу для облегчения работы.
    Разберём всё по порядку. Элементы, заключенные в угловые скобки, называются тегами они и задают внешний вид web-страницы. Браузер, считывая информацию со страниц размещенных в Интернете, отображает ее на экране монитора в том виде, в котором четко указывают ему эти самые теги. Сами теги на экране не отображаются.
    DOCTYPE – этот элемент объявляет тип html документа, он размещается самым первым и позволяет браузеру определить, какая версия html используется. Теги html, head, title – являются служебными и несут определённую иформацию о странице. Внутри тега body размещается всё то, что и отображается на странице.
    Как видите, создание сайта в Блокноте не такое уж и сложное занятие. Идем дальше…
    Как создать сайт в Блокноте
    Моя первая web-страница
    Ну вот теперь web-страничка уже не безымянная и на ней появилась первая строчка текста. Чтобы посмотреть результат необходимо сохранить набранное (Файл – Сохранить как). Присвоим получившемуся файлу имя index с расширением html. Запускаем сохранённый файл index.html и любуемся своей первой web-страничкой.
    Идём дальше, попробуем добавить некоторые css стили, а то она у нас какая-то небросская.
    Как создать сайт в Блокноте
    Моя первая web-страница
    Что получилось? Изменился фон страницы, так как мы задали цвет фона свойством background. Подобрать другой цвет можно с помощью web-палитры.
    Внесём ещё некоторые изменения, зададим стили для заголовка, изменим шрифт, зададим цвет, выровняем его по центру.
    Как создать сайт в Блокноте
    Моя первая web-страница
    Не забываем сохранять изменения в файле index.html.
    Добавим некоторый текст на web-страницу.
    Как создать сайт в Блокноте
    Моя первая web-страница
    Это мой первый сайт, который очень скоро будет самым популярным сайтом в Интернете.
    С сегодняшнего дня я супер-, мега-, web-мастер, seo-гуру и т.д. и т.п. Читайте мои советы по созданию и продвижению сайтов.
    Василий Пупкин – главный web-мастер Интернета
    А теперь при помощи css стилей, придадим web-странице более привлекательный вид.
    Как создать сайт в Блокноте
    Моя первая web-страница
    Это мой первый сайт, который очень скоро
    будет самым популярным сайтом в Интернете.
    С сегодняшнего дня я супер-, мега-, web-мастер, seo-гуру и т.д. и т.п. Читайте мои советы по созданию, оптимизации, продвижению сайтов и о том как заработать деньги в интернете.

    Буквально некоторое время назад, я вряд ли смог бы назвать себя web-мастером. Но сегодня, не имея специального образования программиста, не заканчивая какой либо компьютерный или инженерный университет, а имея свой сайт, я с гордостью могу заявить, что я web-мастер.
    Теперь, когда мне будут задавать вопрос «Чем ты занимаешься?», я с улыбкой и, не стесняясь, отвечу – «Я web-мастер, а ты?»
    Василий Пупкин
    © http://www.smartincom.ru
    Копируем код и смотрим, что получилось.
    Вот так, освоив основы html, и применяя его на практике путём различных экспериментов, можно создать html сайт и в Блокноте. Кроме текста на страницы можно добавлять изображения, audio и video файлы.
    Читаем далее:
    1. 👍 Готовый сайт на WordPress
    2. 👍 👍 👍 Простые стратегии для бинарных опционов
    3. 👍 Как купить домен для сайта
    4. 👍 Как выбрать хостинг
    5. Как загрузить сайт на хостинг
    6. Купить готовый шаблон сайта
    7. Как создать сайт на html
    8. Как заработать на спорте за один вечер $50
    А почитав статью о том, как заработать на своём сайте, можно превратить свой сайт в мощный источник дохода.
    Помогите автору, поделитесь ссылкой на эту страницу со своими друзьями в социальных сетях.
    Удачи!
    Научился сам поделись с друзьями!
    Это интересно:
    Как создать сайт быстро?
    Курсовые и рефераты на заказ?
    Заработать в интернете

  10. VideoAnswer Ответить

Добавить ответ

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