Код для создания сайта html в блокноте: Создаём простой HTML сайт с помощью блокнота

Содержание

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

fЧтобы создать файл html совсем не обязательно покупать или скачивать из интернета для этого какие-либо приложения или программы. В любом компьютере есть уже готовая бесплатная программа «Блокнот», которая идет в комплекте с операционной cистемой windows.

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

Как создать html документ в блокноте

Находим программу на своем компьютере:

идем в главное меню «Пуск»: Все программы ->Стандартные -> Блокнот.

Наполняем документ содержимым, после чего в главном меню выбираем «Файл»—> Сохранить как…

Чтобы сохранить файл с расширением html, надо поменять *.txt на *.html, как здесь:

Таким образом, наш файл html создан.

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

Среди таких: Notepad++ и Dreamweaver. Первая является бесплатной и можно ее скачать на официальном сайте. Вторая – платная.

Преимущества программы Dreamweaver

После запуска программы надо будет выбрать: Создать HTML.

Файл будет создан автоматически с уже готовым обязательным кодом.

Сохраняем файл через выпадающее меню в программе.

Аналогичным образом можно создавать документы в других программах.

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

А теперь поговорим о том, как должен выглядеть html файл, чтобы его мог правильно интерпретировать браузер.

Вообще, что такое html?

Это язык гипертекстовой разметки и его основные структурные элементы – теги. Благодаря им браузер «понимает», что должно отображаться на веб странице.

Для начала создадим структуру документа, прописав основные теги:

Фото: создадим структуру документа

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

Этим документом мы создадим стили: цвета, отступы, т.е. приукрасим нашу веб страницу.

Подобным образом создаем документ с расширением .CSS.

Открываем блокнот, создаем таблицу стилей, сохраняем файл:

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

Можно также добавить текст. Например: дать заголовок странице, прописав его между тегами: <title>Страница обо мне</title> и <body>Приветствую Вас!</body>.

После того, как мы сохраним все и откроем файл в браузере, мы увидим следующее:

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

Чтобы сайт стал виден в интернете, надо файлы .html и .css разместить на надежном хостинге.

Что-то я отвлеклась. Продолжим создавать нашу веб страничку.

Но, прежде я кратенько объясню значение прописанных тегов.

<html> — данный тег является парным и служит контейнером для всех остальных. В нем заключена вся web-страница.

В самом начале <!DOCTYPE html> мы указали браузеру тип документа:

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

А теперь нам надо спланировать структуру сайта, т.е. подумать, какие блоки нам понадобятся.

Если мы посмотрим на другие ресурсы, то видим, что в большинстве своем они имеют: шапку, горизонтальные и вертикальные меню, боковые колонки, подвал (футер).

Создаем структуру шаблона

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

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

Создаем общий контейнер, где в теге <body></body> прописываем структуру вместо «Приветствую, Вас!»:

В html блоки создаются парным тегом <div></div>, каждому из которых можно добавлять индикатор id, чтобы потом оформить внешний вид в css.

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

Оформление блоков

Начинаем оформление с самого большого контейнера.

Добавляем в созданный ранее файл .css следующий код:

Теперь расшифруем эту запись.

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

Далее обратимся к блоку с индентификатором main, после чего в фигурных скобках перечислим правила, которые будут применены к данному элементу:

ширина контейнера будет составлять 810 px,
margin: 0 auto – установит блок по центру, что позволит нашему сайту красиво отобразиться по центру,
следующее свойство border добавит сплошную рамку со всех сторон. В данном случае она будет черной.

Теперь настроим внешний вид основных блоков нашей страницы.

Для этого пропишем следующий код:

Вначале зададим стили для шапки: ее высота = 100 px и она отделена в нижней части рамкой от остальных блоков.

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

Из кода видно, что сайдбар и блок с контентом имеют одинаковую высоту.

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

Блок подвала (footer) – небольшой высоты и окружен рамкой.

Также здесь мы добавили еще одно правило: clear со значением both. Это свойство необходимо для того, чтобы два предыдущих блока не наезжали на подвал.

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

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

Если теперь обновить страницу в браузере, то мы увидим следующее:

Приукрашиваем сайт

На следующем этапе добавим сайту цветов. Для начала зададим фон.

Сделать это можно, добавив следующий код:

#main{

background: #b3c1e6

}

Получим вот такой результат:

Работа с шапкой

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

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

Код примет следующий вид:

#header{

background: #9091da url(kartinka.jpeg) no-repeat 5% center

}

kartinka.jpeg – это наш логотип, далее следует команда, что логотип не должен повторяться и разместиться она должна по центру сверху и снизу, сместившись от начала блока на 5% по горизонтали.

Теперь убираем надпись «Здесь будет шапка» и пишем красивый заголовок.

Надо будет его красиво оформить, задав нужные стили:

#title{

font-size: 32px;

float: left;

margin-left: 200px;

font-family: tahoma;

color: yellow;

padding-top: 20px;

text-shadow: 0 0 5px orange;

}

Мы задали следующие свойства:

размер и семейство шрифта;
отступ слева;
прижали заголовок к левому краю;
выбрали цвет шрифта;
верхний внутренний отступ;
тень текста.

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

Оформление меню в сайдбаре

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

<ul class = "menu">

<li><a href = "#">Пункт меню1</a></li>

<li><a href = "#">Пункт меню2</a></li>

<li><a href = "#">Пункт меню3</a></li>

<li><a href = "#">Пункт меню4</a></li>

<li><a href = "#">Пункт меню5</a></li>

<li><a href = "#">Пункт меню6</a></li>

</ul>

Зададим стили:

.menu{

list-style: none;

}

Можно перед меню добавить красиво оформленный заголовок.

Как оформить блок контента

Добавим статью и наш блок готов.

Не забываем прописывать теги заголовков:

<h2>Заголовок статьи</h2>

<h3>Подзаголовок статьи</h3>

<p>Выделяем абзацы</p>

Заголовки можно оформить цветом.

Как оформить подвал

Я не имею привычки что-то пихать в подвал. Обычно в футере размещают сведения об авторских правах. В данном случае и мы сделаем также.

Мы просто выровняем подвал по центру:

#footer{

text-align: center

}

Вот и все, мы создали html файл в блокноте.

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

Видео: «Как сделать простейший сайт без знаний html»

Как создать или написать HTML-код в Блокноте Windows

окна

0 1.345 3 минут на чтение

Создание простого текста без особых сложностей помогло тем, кто мало или совсем не знает запись в текстовых программах. С другой стороны, есть пользователи системы Windows, которые предпочитают писать документы в Microsoft Word или WordPad. Это необходимо для создания или записи HTML-кода с помощью блокнота.

Но есть особенно полезная программа для создания текстовых файлов, и это Блокнот или Блокнот. используется для создания базовых текстов . Может ты не знаешь где открыть блокнот в windows и используйте его для написания HTML-кода, как мы объясняем здесь.

Что такое блокнот и в чем его особенности?

L ‘ Блокнот или редактор Блокнота — это простой текст, созданный в OneNote, который имеет базовые, но очень полезные функции для создавать базовые тексты . Среди задач, которые мы можем выполнять с этим ноутбуком, можно выделить следующие, зная его функции, вы сможете им пользоваться:

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

Для чего можно использовать блокнот или блокнот

Ранее мы объясняли, что вы можете сделать, а здесь мы объясняем, что вы можете делать с тампоном, в частности, в текст для записи .

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

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

Как настроить Блокнот Windows для создания HTML.

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

Перейдите в проводник, создайте папку с именем HTML-apr2 на диске C и откройте ее.
После создания папки откройте Блокнот, нажмите «Файл-Сохранить» и дайте ему имя.
Закройте файл и откройте его снова, затем перейдите в меню и выберите «Редактировать с помощью блокнота».

Вы напишете следующий базовый HTML-код для запуска и сохранения файла: Это тест страницы перехода HTML 3 Добро пожаловать на learnprogram. com .
Дважды щелкните созданный документ, и документ откроется, где вы увидите полученный результат в браузере.
Вы можете также использовать Chrome, Firefox, Edge для просмотра исходного кода HTML из Интернета , простым и практичным способом.

Редактируйте и расширяйте свой HTML-код в Блокноте Windows

Чтобы отредактируйте свой блокнот для HTML-кода мы предлагаем вам внимательно выполнить следующие шаги, чтобы ничего не пропустить.

Откройте программу NotePad на своем ПК.
После открытия перейдите на вкладку «Формат» и нажмите на опцию «Кодировать UTF-8 без спецификации» .
Затем во вкладке «Язык» откройте «H» и выберите HTML.
Выполнив предыдущие шаги, вы можете приступить к созданию документов веб-страницы с помощью HTML-кода.

Возможность быстрого автозаполнения HTML-кода в блокноте

Этот вариант вам позволит работа быстро и легко с вашими кодами HTML и завершит вашу работу по редактированию.

Сначала откройте Блокнот на вашем ПК.
Затем перейдите в «Настроить-предпочтения».
Появится новое окно, в котором будет выполняться поиск опции «Автозаполнение».

В каждой записи, которую вы делаете в Блокноте, вам необходимо активировать «Активировать автоматическое завершение» для нужных вам функций и слов.
Наконец, он активирует опцию «Дорожки для параметров функции».

Ты даже можешь заменить блокнот Windows 10 другим текстовым редактором если вы хотите создать коды HTML.

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

report this ad

Подобные предметы

Как создать веб-сайт с помощью HTML-кодов в Блокноте — что такое Mark Down

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

HTML — это язык разметки, используемый для создания гипертекстовых документов. Чтобы создать веб-страницу, вы должны использовать HTML — язык программирования, содержащий код и программы. Сегодня мы покажем вам, как использовать редактор Блокнота для создания HTML-документа. Узнайте больше о тегах HTML и создайте больше веб-страниц HTML в этом курсе.

Просматривайте исходный код только с помощью команды Ctrl U на клавиатуре вашего компьютера. Во всплывающем меню нажмите Просмотреть источник в контекстном меню пустой страницы.

Можем ли мы ввести Html в блокноте?

Кредит: meanoin. blogspot.com

Блокнот можно найти, введя Блокнот в строку поиска Windows. HTML можно добавить в Блокнот, набрав HTML в Блокноте. Файл в разделе Сохранить как. htm: Unflocked Кодировка: UTF-8

Кроме того, вы можете выбрать команду «Текст» в меню «Вставка», а затем ввести текст, который вы хотите отобразить в верхней части документа. После того, как вы закончите редактирование документа, вы можете сохранить или закрыть его, выбрав меню «Файл». Это текстовый редактор, оптимизированный для языков программирования, что делает его идеальным для работы с такими языками, как C, пакетная обработка и HTML. Файлы HTML можно изменить, отредактировав их с помощью Блокнота. Тем не менее, вы должны использовать Блокнот, потому что это очень простой текстовый редактор, который быстро и легко редактирует ваши HTML-документы . В Блокноте вы найдете те же функции, что и в других программах: Открыть, Сохранить, Сохранить как и Закрыть. Меню «Вставка» можно использовать для выбора команды «Текст», чтобы строка текста отображалась, например, в верхней части документа, а затем введите текст, который вы хотите отобразить.

Как создать веб-сайт с помощью HTML-кода

Кредит: Pinterest

Чтобы создать веб-сайт с использованием HTML-кода , вам потребуется создать текстовый документ с помощью текстового редактора, такого как Блокнот или TextEdit. После того, как вы создали документ, вам нужно будет сохранить его как файл .html. Для этого вам нужно будет выбрать «Все файлы» в раскрывающемся меню «Тип файла», а затем ввести расширение .html после имени вашего файла. После того, как вы сохранили файл, вы можете открыть его в веб-браузере для просмотра своего веб-сайта.

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

Предположим, вам нужны инструкции по созданию веб-сайта с помощью Блокнота:
1. Откройте Блокнот на своем компьютере.
2. Введите следующий код:

Мой первый абзац.

3. Сохраните файл как index.html в новой папке.
4. Откройте файл index.html в веб-браузере, чтобы просмотреть новый веб-сайт.

В этом уроке с помощью Блокнота мы создадим полностью функциональный веб-сайт. Мы можем создать целевую страницу с помощью Bootstrap, популярного CSS-фреймворка. Мы будем использовать веб-хостинг SiteGround для размещения нашего веб-сайта. Если вы не знакомы с HTML, это отличное место для начала. Третий шаг — загрузить и установить FTP-клиент FileZilla для загрузки файлов на новый веб-сайт. Чтобы войти на FTP, вы должны сначала ввести данные для входа на FTP в клиентскую зону хостинга. Для просмотра Источник HTML страницы, щелкните правой кнопкой мыши и выберите Просмотреть источник или выберите Ctrl U ( U на Mac). Следующим шагом будет добавление большего количества контента в HTML-файл и улучшение CSS.

Как вставить изображение в HTML с помощью Блокнота?

HTML-страницы можно легко изменить, включив в них изображения из Complete HTML /CSS Course 2022. Если вы хотите вставить изображение в HTML-страницу, вы должны включить теги *img. Этот тег не является закрывающим, поскольку содержит только атрибуты. Убедитесь, что для тега *img* установлено значение *body>…

Можно ли сохранять изображения в блокноте?

Вы можете сделать картинку в блокноте, выполнив следующие действия. В отличие от Блокнота, мы можем включить изображение в наш HTML-документ; однако Блокнот также включает изображение. Нам нужно использовать атрибут src тега IMG и тег изображения в Блокноте, чтобы добавлять/удалять фотографии.

Простой HTML-код

Кредит: henryegloff.com

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

HTML (язык гипертекстовой разметки) — это язык, используемый для создания веб-страниц. язык разметки — это язык, описывающий структуру веб-страницы. HTML состоит из ряда элементов, которые вы используете для включения или переноса различных частей контента. Элементы также могут включать следующие характеристики: Некоторые элементы не содержат содержимого, что называется пустым элементом. Элемент >img> не оборачивает содержимое; скорее, он встраивает изображение в положение зрителя. В качестве альтернативы вы используете описательный текст, чтобы описать изображение тем, кто его не видит. Элемент заголовка позволяет вам указать, какие разделы вашего контента должны быть помечены как заголовки или подзаголовки.

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

Копирование и вставка HTML-кода веб-сайта

Параметр «Источник страницы» находится в разделе «Инструменты». Чтобы получить доступ к коду страницы, нажмите кнопку «Новая вкладка», которая откроет новую вкладку, содержащую код страницы, выделение определенной области или щелчок правой кнопкой мыши, чтобы выбрать все, если вы хотите все это. Нажав Ctrl C или Command C на клавиатуре, вы можете создать текстовый файл или файл документа.

Как создать веб-сайт с помощью HTML, CSS, копирования/вставки кода и перетаскивания. В эпоху тысячелетия широко признано, что веб-сайты являются одним из самых мощных инструментов распространения информации. Как вы увидите в следующих разделах, эта статья проведет вас через шаги, необходимые для создания простая веб-страница , которая в конечном итоге станет вашим веб-сайтом. Выбрав Блокнот для Windows, TextWrangler для Mac или Sublime Text, вы можете начать редактирование текста. Написание кода в Microsoft Word и Pages неприемлемо, поскольку они представляют собой текстовые редакторы с расширенным форматированием. Когда вы откроете файл в браузере, вы ничего не увидите, потому что мы только создаем раздел страницы. То же самое и с веб-сайтами: они представляют собой не что иное, как ряд, казалось бы, бессмысленных ссылок.

В отличие от приведенного выше текста синего цвета, это содержимое, которое не является кодом и может быть изменено в зависимости от ваших предпочтений. Мы будем более эффективными, используя такие свойства, как ширина, высота, поля, отступы, положение и отображение. Создайте документ style.css и сохраните эти коды CSS как текст. В результате вы должны настроить макет так, чтобы все разделы были установлены на 100% высоты области просмотра, что означает, что размер экрана полностью заполнен. На шаге 7 мы завершим нашу веб-страницу некоторыми последними штрихами. Может быть полезно прочитать статью на Jimdo, в которой рассказывается, как выбрать лучший фон для вашего сайта. Если вы хотите добавить больше кодов, прежде чем вводить выбранные изображения, сделайте это так же, как на шаге 6.

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

Примеры HTML-страниц с исходным кодом

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

HTML-код

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

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

Веб-страница Html

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

HTML, как следует из названия, является языком гипертекстовой разметки. Этот язык использует как разметку, так и гипертекст. HTML-документ можно создать в любом текстовом редакторе, включая Блокнот. Мы можем использовать эти теги, чтобы сделать HTML-страницу более привлекательной.0004 с этими тегами. Этот тег HTML определяет упорядоченный список с помощью тега HTML и/или OOL. Порядок списка может быть числовым или алфавитным. Первое слово каждого пункта начинается с буквы *.

Атрибут type может использоваться для определения типа порядка требуемого нам упорядоченного списка. Обычно тег изображения используется для соединения двух веб-страниц. Вот как мы создаем простую веб-страницу для GeeksforGeeks.com с использованием Java. Несколько вещей, если они не включены, могут вызвать проблемы или неэффективное программирование на Java. Код Java обычно более устойчив к изменениям, чем код C.

Создание страницы в HTML

Тег Html можно использовать для создания HTML-страницы. В теге html требуются как атрибут title, так и атрибут content: для атрибута title должно быть задано имя файла, а для атрибута content должна быть задана пустая строка.
В дополнение к тегу HTML можно указать еще два атрибута: lang, указывающий язык документа, и type, указывающий его тип.

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

Crambler поддерживается своими читателями. Если вы покупаете по ссылке на нашем сайте, мы можем получить комиссию. Узнать больше

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

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

Однако некоторые теги, которые вы используете с HTML, являются самозакрывающимися тегами , что означает, что вам не нужен закрывающий тег в паре с открывающим тегом. Скорее, вы можете просто поставить косую черту прямо перед закрывающей угловой скобкой открывающего тега, чтобы закрыть его. Например, тег разрыва строки является самозакрывающимся тегом и выглядит следующим образом: . Обратите внимание, что это один тег с косой чертой прямо перед закрывающей угловой скобкой. Мне не нужно было писать . Кроме того, делать это в любом случае было бы неправильно.

На самом деле, прямо сейчас я использую HTML, чтобы написать этот пост. Обратите внимание, как этот абзац текста начинался на две строки ниже абзаца над ним? Это потому, что я использовал два разрыва строки после абзаца выше, чтобы этот абзац начинался двумя строками ниже, например: . По сути, это то же самое, что дважды нажать кнопку «Enter» на клавиатуре. Или я мог бы просто начать новый абзац, используя тег

, что означает «абзац».

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

После загрузки откройте его и начните новую страницу, выбрав «Файл» → «Создать», если новой страницы еще нет. В самой первой строке напишите следующее:

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

Далее давайте напишем наши теги HTML, как показано выше.

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

Теперь перейдите в «Файл» → «Сохранить как…». Когда появится диалоговое окно для сохранения файла, щелкните раскрывающийся список «Сохранить как тип:» прямо под тем местом, где вы указываете имя файла. В этом раскрывающемся списке вы заметите, что есть множество параметров файла, в которых вы можете сохранить его. Выберите «Файл языка разметки гипертекста (*.html; *.htm, *.shtml, *.shtm, *.xhtml)». Затем дайте вашему файлу любое имя, которое вы хотите, но убедитесь, что имя файла заканчивается на .html . Так, например, вы хотите назвать свой файл веб-страницей . В поле «Имя файла:» введите webpage.html . Как только вы нажмете «Сохранить», если вы используете Notepad ++, вы заметите, что ваши HTML-теги стали окрашены. Наличие тегов с цветовой кодировкой — еще одна прелесть Notepad++, которая поможет улучшить читаемость кода.

**Примечание. Если вы используете базовый Блокнот, у вас не будет раскрывающегося списка со всеми этими параметрами. В этом случае просто выберите «Все файлы» в раскрывающемся списке «Тип файла:», а затем назовите файл 9.0125 что угодно.html . После того, как вы сохраните его с расширением .html , он будет распознан как веб-страница при открытии.

Для следующей части просто скопируйте то, что я написал ниже для кода вашей веб-страницы, и я объясню это позже.

 

<голова>
    Моя первая веб-страница!

<тело>
     Заголовок моей первой веб-страницы 
    Это мой первый абзац! Весь ваш контент размещается между тегами body.

Вот для чего предназначены различные разделы, которые были добавлены:

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

— Теги «head» действуют как контейнер для всех ваших элементов заголовка. Они идут в верхней части вашей веб-страницы так же, как голова на вашем теле. Заголовок всегда содержит теги «заголовок», а также может включать другую информацию, такую как ссылки на стили (CSS), сценарии (Javascript), метаинформацию и другие вещи.
— Теги title должны быть внутри тегов head. Все, что вы поместите между этими двумя тегами, отображается на вкладке вашего браузера.
— Все, что находится между тегами body, определяет тело документа. Эти теги идут под тегами «head». Тело вашего документа может содержать все виды содержимого, включая текст, изображения, таблицы, гиперссылки, списки и многое другое. Это основная область, которую все видят, когда посещают веб-страницу.
. Теги h2 придают вашей веб-странице большой заголовок. «h» означает «заголовок», а «1» просто указывает на размер заголовка. Заголовок «h2» самый большой, «h3» немного меньше, «h4» еще меньше, вплоть до «h6». Примечание. Его не следует путать с тегом заголовка, новым для HTML 5.
— теги «p» просто обозначают «абзац». Каждый раз, когда вы хотите начать новый абзац, вы можете использовать тег «p», а затем вы всегда должны закрывать тег абзаца, когда ваш абзац сделан для хорошей практики.

Вы также заметите, что теги title, h2 и p имеют отступ. Это сделано только для удобства чтения. Любой код, который вы пишете, должен иметь соответствующий отступ, чтобы помочь человеку, который смотрит на код, легче его читать.

После того, как вы напечатаете весь этот код, обязательно сохраните файл. Затем, если вы находитесь в Notepad ++, перейдите в «Выполнить» → «Запустить в Firefox» (или в любом другом браузере, который вы хотите выбрать).

Штирлиц — Сеть печатных салонов в Перми