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

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

  • автор:

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

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

Доброго времени суток. Как правило в современном мире сайты создаются либо на CMS либо в бесплатных или платных конструкторах. Но все же, в начале времен 1990-2000 годы сайты создавались преимущественно на HTML, без использования каких-либо обращений к базе данных. Различные программы, позволяющие редактировать HTML + CSS в реальном времени, например, Dreamweaver — появились только в самом конце 20-го века. Поэтому сайты создавались в блокноте и других подобных редакторов. Хоть сейчас и существует множество удобных способов сделать сайт, создание сайта при помощи блокнота позволяет выучить основы построения страницы и основы HTML в целом.

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

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

И сразу же сохраним его в HTML формате: В блокноте нажмите: Файл -> Сохранить как

Сохраняем файл в формате HTML

И напишите название файла, к примеру, index.html

Сохраняем файл в формате HTML

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

    Мой самый прекрасный сайт  

Мой первый сайт

Еще совсем чуть-чуть, и я научусь делать самые лучшие сайты на свете.

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

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

HTML-теги для создания сайта через блокнот

  • DOCTYPE — позволяет браузеру определить, что за тип документа он открыл, поскольку у HTML-документа есть множество версий.
  • html — тег, которым открывается и закрывается вся веб-страница
  • head — хед (или голова) документа. Данный тег несет в себе информацию для браузера и не отображается на web-странице. В нем содержаться по большей части информация для браузера и поисковой системы, стили CSS, которые мы пропишем чуть позже и различные скрипты.
  • meta — указывает браузеру и поисковой системе определенную информацию. В данном случае тег мета указывает браузеру о необходимости использования кодировки UTF-8 (для того, чтобы правильно отображался русский язык). В других случаях этот тег может указывать какие-либо другие данные, например, автор статьи, описание страницы, ключевые слова.
  • body — боди (или тело) документа. В этом теге содержится все то, что мы в данный момент видим на странице, можно сказать, что он включает в себя скелет или каркас веб-страницы.
  • h1 — Главный заголовок на странице
  • p — параграф — текст, который мы видим на странице

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

Пример создание сайта в блокноте

Получился у нас конечно, не самый лучший в мире сайт, но надо ведь с чего-то начинать?:)

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

Теперь давайте придадим ему «красивостей», напишем несколько стилей внутри тега

body < background: #F2F2F2; max-width: 900px; margin: 0 auto; padding: 20px; >h1 < color: #4C4C4C; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #BEBEBE; >p

В итоге наш пример сайта сделанного в блокноте в коде выглядит так

    Мой самый прекрасный сайт body < background: #F2F2F2; max-width: 900px; margin: 0 auto; padding: 20px; >h1 < color: #4C4C4C; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #BEBEBE; >p 

Мой первый сайт

Еще совсем чуть-чуть, и я научусь делать самые лучшие сайты на свете.

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

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

Оценка: 4,08 из 5 (голосов: 13 )
Автор: No Zombies Allowed (Михаил)

Посты по теме
  • Как сделать красивое горизонтальное меню с выпадающим спискомГоризонтальное меню для сайта на HTML+CSS
    1 Май 2016
  • Как изменить фон сайта?Как поменять фон сайта?
    29 Дек 2014
  • CSSCSS-класс ссылки и CSS-класс страницы у Joomla
    27 Дек 2014
  • Узнавай новости первым

    Ваш e-mail в безопасности

    Свежие записи
    • Вывод сайта из под фильтра АГС: личный опыт
      25 Июн 2016
    • Конверсия сайта: влияющие факторы и способы повышения
      3 Фев 2016
    • Горизонтальное меню для сайта на HTML+CSS
      1 Май 2016
    • Технологии создания сайтов
      27 Дек 2015
    • Преимущества создания веб сайта
      5 Дек 2015
    Рубрики
    • Joomla
    • WordPress
    • Заработок в Интернете
    • Монетизация сайта
    • Раскрутка сайта
    • Создание сайта

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

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

    Вас заинтересовал вопрос: “Как сделать html страницу?”, то просмотрев данную статью, вы сможете сделать html страницу самостоятельно, не прилагая больших усилий.

    HTML (HyperText Markup Language — «язык разметки гипертекста») не является языком программирования, он предназначен для разметки текстовых документов (т.е. с помощью него мы указываем браузеру где будет размещен текст, картинка, таблица и т.п. ).

    То, как будут выглядеть картинки, текст и другие элементы на вашей странице, и как они будут располагаться относительно друг друга, определяют метки (тэги).

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

    Теперь мы перейдем к практическому осуществлению нашей задачи “Как сделать html страницу?”. Для этого нам понадобится любой текстовый редактор. Я вам посоветую «Notepad++». Либо можете воспользоваться стандартным блокнотом, только будьте внимательны, когда будете сохранять файл, обязательно сохраняйте его с расширением «html». Название обязательно пропишите латинскими буквами.
    Это будет выглядеть так:
    «page.html»

    И так, открываем наш редактор, и пишем следующий код:

    Сохраняем созданный текст.
    Для просмотра созданной страницы html в любом браузере, нужно просто кликнуть на пиктограмме «page.html».

    Вставить картинку в html страницу

    Чтоб вставить картинку в html страницу, её необходимо предварительно подготовить.
    Выбираем нужное изображение, редактируем его либо в документе Word (простой вариант), либо в Photoshop.
    Сохраняем картинку в формате JPEG, в нашей папке для создания страниц html.
    Пример:
    название папки: user_page
    в этой папке:
    страница: page.html
    картинка: kartinka.jpg

    Для вставки картинки в страницу применяется тег .
    Для указания пути к картинке в теге используется параметр src=
    Вот так будет выглядеть код html, при помощи которого можно вставить картинку в страницу html:
    (при условии: страница и картинка находятся в одной папке).

    А это код страницы html с картинкой


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

    Я Вас приветствую.
    Это Начало большого пути в просторы Интернета



    Если вы выполнили все так, то в браузере будет отражен результат вашей работы.
    Оказывается, сделать html страницу совсем не сложно!

    Ниже приведены атрибуты для тега , и их предназначение:

    Без атрибутов — текст по умолчанию находится снизу картинки

    align=»right» — картинка справа, текст слева

    align=»left» — картинка слева, текст обтекает справа

    align=»bottom» — как и по умолчанию, текст внизу картинки

    align=»middle» — текст посередине картинки

    align=»top» — текст вверху картинки

    vspace — задаёт расстояние между текстом и рисунком (по вертикали). Расстояние задается в пикселях. Pixel — самая маленькая единица изображения (точка). Например, если экран Вашего монитора 800х600, это значит, что он имеет 800 на 600 пикселей (точек). В примере расстояние равно 10 пикселям (точкам).

    hspace — задаёт горизонтальное расстояние между текстом и рисунком. Расстояние задаётся в пикселях. В примере отступ текста от картинки равен 20 пикселям (точкам)

    Сайт для сайтостроителей

    alt — задаёт название (описание) картинки (действует не во всех браузерах. В Internet Explorer – работает!). Работает, если ваш посетитель наведёт мышку на картинку и подержит несколько секунд. В этом конкретном примере появится надпись «Сайт для сайтостроителей». Я рекомендую Вам задавать атрибут alt, особенно тогда, если Ваша картинка является ссылкой (кнопкой).

    width — задаёт ширину картинки в пикселях. Если же Вы не поставите этот атрибут, то картинка будет иметь реальный размер по ширине. (Рекомендую всегда задавать размеры. )

    height — задаёт высоту картинки в пикселях. Если же Вы не поставите этот атрибут, то картинка будет иметь реальный размер по высоте. (Рекомендую всегда задавать размеры. )

    border — задаёт рамку вокруг картинки. По умолчанию рамка всегда есть. Если вы хотите убрать рамку, то задайте border=0.

    — размещает саму картинку туда, куда нам необходимо. Размещение зависит от атрибута align. Есть, например:
    align=»left» — слева
    align=»center» — в центре
    align=»right» — справа

    background=»Ваш_фон.jpg»- Ваша картинка будет фоном HTML странички. В атрибуте background=»Ваш_фон.jpg» нужно прописывать путь к Вашей картинке так же, как и в размещении обычной картинки. Я рекомендую оставлять bgcolor для того случая, если не загрузится Ваша картинка.

    Сайт на HTML

    • Структура базовой web страницы HTML
    • Редактирование текста на HTML странице
    • Списки в HTML странице
    • Гиперссылки
    • Создание каркаса страницы
    • Изменить цвет ссылки HTML
    • Как сделать веб страницу html с картинкой для чайников
    • HTML таблица, заголовок таблицы, ширина ячейки

    Таблицы стилей — CSS

    • Основные понятия CSS
    • Классы и идентификаторы css
    • Стили применяемые для оформления текста
    • Оформление ссылок с использованием стиля
    • Цвета и фон в css
    • Свойства css определяющие отступы
    • Позиционирование в css
    • Свойства для управления обтеканием
    • Свойства display
    • Высота строки CSS
    • Описание тега P
    • Масштабирование фонового изображения css
    • Сложные конструкции селекторов — составные селекторы
    • Flexbox в CSS для верстки элементов
    • Как подключить шрифт на сайт в css
    • Псевдокласс nth-child

    Вебмастеру в помощь

    • Вывод сайтов из под АГС-30
    • Как заработать, не выходя из дома
    • Примерный план самостоятельного продвижения сайта
    • Подбираем ключевые слова для сайта
    • Методы оптимизации сайта Joomla.
    • On-line генераторы текстов, Генераторы текста онлайн
    • Правила для защиты сайтов Joomla
    • Защита сайтов Joomla. Продвинутый уровень.
    • Из каких файлов состоит шаблон Joomla, и какие функции они выполняют
    • Плагин защиты админки JLSecure Мой сайт
    • Выпадающее меню Joomla
    • HD-Custom CSS модуль для Joomla 2.5 & 3
    • Зачем нужно закрывать внешние ссылки от индексации
    • Расширенный менеджер модулей
    • Увеличение картинки в статье.
    • Программа Clip2Net снятие скриншотов
    • Плагин Joomla – DigiStyle
    • Модуль вывода новостей для Joomla News Show Pro GK4 3.3.7
    • Кнопка “Наверх” SmoothTop для Joomla
    • Текстовый редактор JCE
    • Плагин Sourcerer для вставки скрипта
    • Rich Snippets Vote плагин для Голосования
    • Меню для Joomla
    • Плагин для удаления дублей Shnodoubles
    • Проверка и контроль URL сайта
    • Миграция Joomla 1.5 на 2.5 при помощи jUpgrade
    • Закрыть доступ на раздел сайта Joomla

    Мои услуги

    Доработка сайта

    ДОРАБОТКА МОДЕРНИЗАЦИЯ
    УСОВЕРШЕНСТВОВАНИЕ
    ТЕХНИЧЕСКАЯ ПОДДЕРЖКА
    ОБСЛУЖИВАНИЕ САЙТОВ
    НА JOOMLA.

    kamen1

    Городской округ Геленджик

    kamen2

    Пн-Вс, с 9.00 до 20:00

    flamp vk instagram whatsapp viber telegram

    ©2011-2022 sitedelkino.ru — Вебмастеру в помощь. Все права защищены.

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

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

    Общие сведения о html

    Итак, прежде всего, пару слов о том, что же такое html. Html это язык гипертекстовой разметки веб-страниц. По сути, это набор тегов, которые показывают браузеру каким образом нужно отображать страницу. Каждый тег находится между знаков <>. Например .

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

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

    Этот текст будет выделен курсивом

    Еще пример. Тег strong выделяет текст жирным.

    Этот текст будет выделен жирным

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

    Этот текст будет будет выделен курсивом и жирным одновременно

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

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

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

    Для того, чтобы создать простенькую html страницу нам понадобиться текстовый редактор. В принципе, можно воспользоваться самым обыкновенным блокнотом, но я советую скачать и установить себе специализированный текстовый редактор с подсветкой кода notepad++. Скачать ее можно здесь. Программа абсолютно бесплатна.

    Также можно воспользоваться программой Adobe Dreamweaver. Данная программа является платной.

    Итак, мы выбрали и установили текстовый редактор. Теперь нам нужно написать следующий код:

        Заголовок  Здесь расположено основное содержимое страницы

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

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

    По умолчанию документ сохраняется с расширением txt. Щелкаем на файле правой кнопкой мыши и нажимаем «переименовать». Меняем txt на html. Первая страница Вашего сайта создана! После этого, страница сайта будет открываться уже не в блокноте, а в браузере.

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

    [the_ad_placement которые мы использовали для создания сайта

    Теги html head и body

    Пара тегов html показывает браузеру, что данный документ является html – документом. Между ними располагается все содержимое нашей странички. В том числе и пары тегов head и body.

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

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

    Мета теги и тег title

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

    Метатеги Description и Keywords это специальные теги, которые могут присутствовать на странице, а могут и не присутствовать. Тем не менее, они тоже крайне важны, так как помогают поисковым системам правильно оценить содержимое страницы, для того, чтобы найти для нее место в результатах поиска. Это еще один пример тегов, у которых нет закрывающей пары.

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

    Ну а внутри тега Keywords через запятую перечисляются ключевые слова, которые характеризуют содержимое страницы. Поговаривают, что поисковые системы уже не используют keywords. Однако, на всякий случай, его можно заполнить.

    Правильное заполнение метатега description и тега title эта важнейшая часть внутренней оптимизации сайта под поисковые запросы. Грамотное заполнение этих тегов, позволит твоему сайту появляться на первых местах в выдаче поисковых систем, и, следовательно, на сайт начнут приходить посетители.

    Где можно скачать готовый html сайт

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

    В файле CSS указывается как будут выглядеть содержимое сайта определяемое тем или иным тегом.

    Сейчас веб-дизайн немыслим без каскадных таблиц стилей. На самом деле, овладеть CSS ничуть не сложнее чем html. Подробнее я рассматриваю таблицы стилей вот в этой статье: что такое CSS.

    Что еще нужно для того, чтобы сайт появился в интернете

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

    1. Выбрать и зарегистрировать доменное имя. О том, как это правильно сделать Вы можете узнать в этой статье.
    2. Выбрать и оплатить хостинг. Хостинг – это место хранения вашего будущего сайта. Они бывают платные и бесплатные. Для начала, вполне можно выбрать и бесплатный хостинг. Тем не менее, у таких хостингов есть несколько серьезных недостатков. Поэтому я бы порекомендовал Вам не мелочиться и сразу взять платный хостинг, тем более, что сейчас хороший платный хостинг стоит копейки.
    3. Привязать домен и хостинг. Следующий шаг, это скопировать файлы Вашего будущего сайта на хостинг. Это можно сделать из своего аккаунта на хостинге после того, как Вы зарегистрировались и оплатили его. Для того, чтобы сайт был доступен по своему доменному имени, необходимо привязать домен к хостингу. О том, как это правильно сделать читайте тут.

    Заключение

    В данной статье мы рассмотрели пример создания простого одностраничного html сайта. Такие сайты часто называют «сайт-визитка». Они подходят, например, для размещения своего портфолио. Если же Вы собираетесь создать полноценный многостраничный сайт, то имеет смысл использовать CMS, т.е систему управления контентом например WordPress.

    Оформляем html-страницу и форматируем текст.

    Сначала пару слов о текстовом редакторе, которым вы пользуетесь. Конечно, вы можете это делать в блокноте, но гораздоо удобнее пользоваться Notepad++. В нем весь html подсвечивается другим цветом, что облегчает восприятие и поиск ошибок.

    А теперь вернемся к основной теме. Откройте созданную на прошлом уроке html-страницу в блокноте или в Notepad.

    Сейчас в ней написана фраза «Привет всем!», она черного цвета, располагается слева на белом фоне. А если мы хотим, чтобы она была посередине, крупным желтым шрифтом и на синем фоне? Для этого у тегов предусмотрены специальные атрибуты. Проще это объяснить на практике.

    Шаг 1. Меняем фон html-страницы и цвет текста

    Для этого добавим в наш код, в тег следующие атрибуты — bgcolor=»blue» text=»yellow». Здесь bgcolor — атрибут, отвечающий за цвет фона страницы, а blue — его значение (в нашем случае — голубой, но можете сделать и красный — red, и зеленый — green, и любой другой). Атрибут text задает цвет текста документа, его значение yellow — желтый.

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

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