Хотите научиться веб-дизайну? Для того чтобы начать создавать веб-страницы, вам не нужно модное программное обеспечение для редактирования. Вы можете создавать веб-страницы с помощью «Блокнота», который предустановлен на вашем компьютере под управлением Windows. Язык, используемый для создания веб-страниц, называется «HTML», что расшифровывается как Hypertext Markup Language. Вы можете написать HTML с помощью «Блокнота» или любой другой программы для редактирования текста. Затем все, что вам нужно сделать, это сохранить файл как HTML-документ. HTML легко выучить, даже если у вас нет навыков программирования. В этой статье wikiHow вы узнаете, как создать простую веб-страницу с помощью «Блокнота».
Содержание
То, что вы должны знать
- HTML — это основной язык, используемый в веб-дизайне.
- Вы можете легко написать HTML с помощью «Блокнота» или любой другой программы для редактирования текста.
- Не забудьте сохранить файл как документ HTML (.html).
Создание документа
1. Откройте «Пуск 
. Нажмите на логотип Windows в левом нижнем углу экрана. Появится меню «Пуск».
. Нажмите на логотип Windows в левом нижнем углу экрана. Появится меню «Пуск».
2. Найдите «Блокнот». Введите блокнотчтобы сделать это. Вы должны увидеть список результатов поиска в верхней части меню «Пуск».
3. Щелкните Блокнот . Это синий значок блокнота в верхней части списка результатов поиска. Щелкните это приложение, чтобы открыть чистую страницу в «Блокноте».
4. Щелкните Файл . Он находится в левом верхнем углу окна «Блокнота». При нажатии на него появляется выпадающее меню.
5. Щелкните Сохранить как… . Он находится в выпадающем меню. Откроется окно «Сохранить как».
6. Щелкните раскрывающееся поле «Сохранить как тип». Эта опция находится в нижней части окна и должна содержать надпись «Текстовые документы (*.txt)». При нажатии на него появится выпадающее меню.
7. Щелкните Все файлы . Он находится в выпадающем меню. Это позволит вам сохранить файл как HTML-документ.
8. Выберите место сохранения. Щелкните по имени папки, в которой вы хотите сохранить документ, в левой части окна.
- Например, чтобы сохранить документ на рабочем столе, прокрутите страницу вверх и щелкните Desktop в левой боковой панели.
9. Введите имя и расширение файла «html». Щелкните текстовое поле «Имя файла». Затем введите любое название файла, за которым следует .htmlэто расширение файла для HTML-документа.
- Например, чтобы назвать файл своей веб-страницы «hello», введите hello.html.
10. Щелкните Сохранить . Это превратит ваш текущий документ в Блокноте в HTML-документ. Теперь вы можете приступить к созданию начальной структуры вашей веб-страницы.
- Если «Блокнот» случайно закроется или вам придется вернуться к документу позже, вы можете щелкнуть HTML-файл правой кнопкой мыши, а затем в появившемся выпадающем меню выбрать пункт «Редактировать».
Добавление структурного кода
1. Добавьте тег языка вашей веб-страницы. Первый тег, который вам нужно добавить, — это тег языка. Он сообщает веб-браузеру, что это HTML-документ и что используется язык HTML. Введите в блокнот в верхней части страницы следующее:
<!DOCTYPE html>
<html>
2. Добавьте теги «head». Раздел «head» HTML-документа содержит метаданные веб-страницы. Эта информация не отображается в браузере. Она может содержать такие сведения, как заголовок страницы, таблицы стилей (CSS), скрипты и многое другое. На данный момент просто напечатайте <head> под тегом «<html>», дважды нажмите Enter, чтобы оставить пробел. Затем введите </head>.
- Каждый элемент HTML имеет открывающий и закрывающий тег. Когда мы добавляем новый элемент, например, тег «<head>» для открытия заголовка, нам нужно добавить и закрывающий тег. Для заголовка это тег «</head>».
3. Добавьте заголовок страницы на свой сайт. Заголовок находится в разделе «head» вашего HTML-документа, поэтому его нужно ввести между открывающим тегом «<head>» и закрывающим тегом «</head>». Чтобы добавить заголовок, введите открывающий тег title, который выглядит так <title>". Затем введите текст заголовка. Сразу после этого добавьте закрывающий тег заголовка, который имеет следующий вид </title>. Например, если вы хотите озаглавить свою веб-страницу «Мой сайт», то введите следующее:
<title>Мой сайт</title>
4. Добавьте теги «body». Все, что отображается в веб-браузере, будет находиться в разделе «body» вашего HTML-документа. Открывающий и закрывающий теги body располагаются под закрывающим тегом «</head>». Добавьте открывающий и закрывающий теги body, как показано ниже:
<body>
</body>
5. Закройте HTML-тег. Последним тегом в вашем документе будет закрывающий HTML-тег, означающий конец страницы. Введите </html> в нижней части страницы под закрывающим тегом «</body>».
6. Просмотрите свой HTML-документ. На данный момент ваш документ должен выглядеть примерно так:
<!DOCTYPE html>
<html>
<head>
<title>Мой сайт</title>
</head>
<body>
</body>
</html>
7. Сохраните документ. Для этого нажмите Файл в верхней строке меню, а затем Сохранить . Также вы можете нажать Ctrl + S, чтобы сохранить документ. Обязательно сохраняйте документ часто.
Вставка элементов страницы
1. Знайте, что все элементы веб-страницы располагаются между тегами «body». Любой элемент — будь то заголовок или абзац — должен быть написан после тега «<body>» и перед тегом «</body>».
2. Добавьте основной заголовок вашего сайта. Напечатайте <h1></h1> между тегами «body», а затем впишите между тегами «<h1></h1>» то, что вы хотите видеть в качестве основного заголовка вашей веб-страницы. Например, чтобы создать страницу с заголовком «Добро пожаловать», вы должны добавить следующее:
<h1>Добро пожаловать</h1>
- Вы можете использовать теги «<h2></h2>» — «<h6></h6>» для создания более мелкого текста заголовка. «<h1>» — это самый большой текст заголовка, а «<h6>» — самый маленький.
3. Добавьте на страницу текст абзаца. Введите теги абзацев, а именно «<p></p>», а затем введите между ними то, что вы хотите использовать в качестве текста абзаца. Ваш конечный результат должен выглядеть примерно так:
<p>Это мой сайт. Голосуйте за меня на выборах президента класса!</p>
4. Принудительный разрыв абзаца. Если вы хотите добавить дополнительные пробелы между абзацами или заголовками, введите <br> после закрывающего тега строки. Например, чтобы создать разрыв строки после абзаца, нужно набрать примерно следующее:
<p>Это мой сайт. Голосуйте за меня на выборах президента класса!</p><br>
<p>Я также люблю картофель.</p>
- Вы можете добавить дополнительный тег «<br>» после первого, чтобы создать дополнительные пробелы между абзацами.
- Добавлять закрывающий тег для разрыва строки не нужно.
5. Добавьте форматирование к тексту. Вы можете применять полужирное начертание, курсив и подчеркивание (а также надстрочные и подстрочные знаки) к любому слову, предложению или блоку текста, если текст находится между тегами абзацев. Можно использовать следующие теги форматирования:
<b>Полужирный текст</b>
<i>Курсивный текст</i>
<u>Подчеркнутый текст</u>
<sup>Надстрочный текст</sup>
<sub>Подстрочный текст</sub>
6. Добавьте изображение на веб-страницу. Чтобы добавить изображение на веб-страницу, оно должно быть загружено на веб-сервер в Интернете. Вам необходимо знать веб-адрес изображения. Как только вы его узнаете, введите <img src=затем веб-адрес изображения в кавычках. Затем добавьте закрывающий текст >скобку в конце. Ниже приведен пример того, как это должно выглядеть:
<img src="https://www.mywebsite.me/images/me.jpg">
- Если изображение не находится в Интернете, а сохранено на вашем компьютере, вы можете использовать место, куда оно сохранено, вместо веб-адреса. Например, <img src="C:UsersusernamePicturesme.jpg">
7. Добавьте ссылку на свою веб-страницу. Ссылки — важнейший аспект веб-разработки. Они позволяют пользователям переходить с одной веб-страницы на другую. Чтобы добавить ссылку, вам нужно иметь веб-адрес веб-страницы, на которую вы хотите сослаться. Введите <a href= затем веб-адрес страницы, на которую вы хотите сослаться, в кавычках. Затем добавьте закрывающий текст > в конце. Сразу после этого введите текст, который должна содержать ссылка, а затем закрывающий тег, который выглядит следующим образом </a>. Ниже приведен пример того, как добавить ссылку на веб-страницу:
<a href="https://www.mywebsite.me/ipage2">Следующая страница</a>
- Вы также можете добавить ссылку на адрес электронной почтыили использовать изображение в качестве ссылки вместо текста..
8. Ознакомьтесь с внешним видом вашей веб-страницы. Хотя элементы веб-страницы могут быть разными, ваш документ должен выглядеть примерно так:
<!DOCTYPE html>
<html>
<head>
<title>Мой сайт</title>
</head>
<body>
<h1>Добро пожаловать!</h1>
<a href="https://www.mywebsite.me/ipage2">Следующая страница</a>
<img src="https://www.mywebsite.me/images/me.jpg">
<p>Это мой сайт. Надеюсь, вам здесь понравится!</p>
<p><b>Здесь есть жирный текст для выделения.</b></p>
<p><i>Курсив может быть жутким.</i></p>
</body>
</html>
Тестирование страницы
1. Сохраните документ. Для этого нажмите Файл в верхней строке меню, а затем Сохранить . Это обеспечит отображение в HTML-документе самой последней версии веб-страницы при ее открытии.
2. Щелкните HTML-документ правой кнопкой мыши. Перейдите к месту, где вы сохранили HTML-документ, и щелкните его правой кнопкой мыши. Появится выпадающее меню.
3. Выберите Открыть с помощью . Он находится в выпадающем меню. При этом откроется всплывающее меню со списком приложений, с помощью которых можно открыть файл.
4. Выберите предпочтительный веб-браузер. Все веб-браузеры могут открывать HTML-документы, поэтому во всплывающем меню выберите любой браузер, который вы хотите использовать. Ваш HTML-документ откроется в выбранном веб-браузере.
5. Просмотрите свою веб-страницу. Если форматирование выглядит хорошо, вы можете закрыть «Блокнот».
- Если вы хотите продолжить редактирование HTML-документа, вернитесь в «Блокнот» и внесите необходимые правки, не забывая часто сохранять изменения.
- Вы можете изменить цвет фона веб-страницы, установить фоновое изображениеили изменить цвет шрифта используя CSS в сочетании с HTML-документом.
Примеры HTML-документов
