Загрузить PDF
Загрузить PDF
Вас интересует веб-дизайн? Чтобы попробовать свои силы в создании веб-страниц, необязательно пользоваться сложными программами. Веб-страницу можно создать в Блокноте, предустановленном на компьютерах с Windows. В качестве языка программирования будет использован HTML — HyperText Markup Language (язык гипертекстовой разметки). Вы можете написать HTML-код страницы в Блокноте или любом другом текстовом редакторе, а затем просто сохранить файл как HTML-документ. Этот язык легко изучить, даже если у вас нет навыков программирования. Итак, в нашей статье мы расскажем, как создать простую веб-страницу с помощью Блокнота.
Шаги
-
Откройте меню «Пуск» . Нажмите на логотип Windows в нижнем левом углу экрана. На экране появится меню «Пуск».
-
Найдите Блокнот. Введите блокнот в меню «Пуск». Вверху меню появятся результаты поиска.
-
Щелкните по Блокнот . Это голубой значок в виде блокнота верхней части результатов поиска. Откроется Блокнот.
-
Откройте меню Файл . Оно находится в верхнем левом углу окна Блокнота.
-
Нажмите Сохранить как... . Эта опция находится в открывшемся меню «Файл». Откроется окно «Сохранить как».
-
Откройте выпадающее меню «Тип файла». Оно находится в нижней части окна; в нем отобразится опция «Текстовые документы (*.txt)». Нажмите на нее, чтобы появилось выпадающее меню.
-
Щелкните по Все файлы . Эта опция находится в выпадающем меню. Теперь файл можно сохранить как HTML-документ.
-
Выберите папку для сохранения. Для этого нажмите на нужную папку на левой панели окна.
- Например, чтобы сохранить документ на рабочем столе, прокрутите вверх и нажмите «Рабочий стол» на левой панели.
-
Введите имя файла и расширение «html». Нажмите на текстовое поле «Имя файла», введите имя файла, а затем введите .html .
- Например, чтобы назвать файл веб-страницы «hello», введите hello.html .
-
Нажмите Сохранить . Текстовый документ будет сохранен как документ HTML. Теперь можно перейти к созданию структуры веб-страницы.
- Если Блокнот неожиданно закрылся или вы хотите вернуться к документу позже, щелкните правой кнопкой мыши по HTML-файлу и в меню выберите «Изменить».
Реклама
-
Добавьте языковой тег. Первый тег, который нужно добавить в Блокнот, указывает всему документу, что будет использоваться язык HTML. В Блокноте введите следующее:
<!DOCTYPE html> < html >
-
Добавьте теги «head». Этот раздел HTML-документа содержит метаданные веб-страницы. В веб-браузере они не отображаются. Здесь может содержаться такая информация, как имя страницы, таблицы стилей (CSS) , скрипты и так далее. Сейчас просто введите <head> после тега <html>, дважды нажмите ↵ Enter , чтобы вставить пустые строки, а затем введите </head> .
- Каждый HTML-элемент должен находиться между двумя тегами. Когда мы добавляем новый элемент, например тег «<head>», открывающий соответствующий раздел, нам нужно добавить и закрывающий тег. В данном случае это «</head>».
-
Введите имя страницы. Оно должно находиться внутри раздела «head», так что его нужно ввести между открывающим тегом «<head>» и закрывающим «</head>». Чтобы добавить имя, наберите открывающий тег <title> , затем введите текст (собствнно имя) и сразу за ним добавьте закрывающий тег </title> . Например, если именем вашей страницы будет «Мой сайт», введите следующее:
< title > Мой сайт </ title >
-
Добавьте теги «body». Все, что будет отображаться на вашей странице в веб-браузере, должно находиться между этими тегами. Под тегом </title> введите:
< body > </ body >
-
Закройте тег языка HTML. Последним тегом документа будет закрывающий тег «html», чтобы обозначить конец страницы. Введите </html> под тегом </body>, чтобы закрыть тег HTML.
-
Просмотрите HTML-документ. На данном этапе документ должен выглядеть следующим образом:
<!DOCTYPE html> < html > < head > < title > Мой сайт </ title > </ head > < body > </ body > </ html >
-
Сохраните документ. Для этого нажмите «Файл» и затем «Сохранить» на панели меню. В качестве альтернативы для сохранения документа можно нажать Ctrl + S . Не забывайте чаще сохранять его в процессе работы.Реклама
-
Запомните, что все элементы веб-страницы должны находиться между тегами «body». Любой элемент — будь то заголовок или абзац — нужно вводить после тега <body> и перед тегом </body>.
-
Добавьте основной заголовок сайта. Введите <h1></h1> между тегами «body», а затем введите заголовок внутри тегов <h1></h1>. Например, чтобы создать страницу с заголовком «Добро пожаловать», введите следующее:
< h1 > Добро пожаловать </ h1 >
- Используйте теги от <h2></h2> до <h6></h6>, чтобы создать заголовки меньшего размера.
-
Добавьте текст на страницу. Введите теги абзаца <p></p>, а затем введите текст внутри этих тегов. Результат должен выглядеть примерно так:
< p > Это мой сайт. Голосуйте за меня на выборах! </ p >
-
Вставьте разрыв абзаца. Чтобы добавить пустые строки между абзацами или заголовками, введите <br> после закрывающего тега строки. Например, чтобы создать разрыв строки после абзаца, введите следующее:
< p > Это мой сайт. Голосуйте за меня на выборах! </ p >< br > < p > А еще я люблю картошку </ p >
- После первого тега <br> можно ввести такой же тег, чтобы добавить еще один разрыв строки, то есть между двумя абзацами будут две пустые строки.
- Для разрыва абзаца закрывающий тег не нужен.
-
Отформатируйте текст. Полужирным, наклонным или подчеркнутым, а также надстрочным и подстрочным можно сделать слово, предложение или блок текста, если они находится между тегами абзаца. Для форматирования используйте следующие теги:
< b > Полужирный текст </ b > < i > Наклонный текст </ i > < u > Подчеркнутый текст </ u > < sub > Подстрочный текст </ sub > < sup > Надстрочный текст </ sup >
-
Добавьте на страницу изображение. Чтобы изображение можно было добавить на веб-страницу, оно должно быть загружено на сервер в интернете, и вам нужно знать веб-адрес этого изображения. Наберите <img src= , затем адрес изображения в кавычках. В конце добавьте закрывающий значок > . Вот пример, как это должно выглядеть:
< img src = "https://www.mywebsite.me/images/me.jpg" >
- Если изображение хранится не в интернете, а на вашем компьютере, вместо веб-адреса можете использовать путь к его местоположению. Например: <img src="C:\Users\username\Pictures\me.jpg">
-
Добавьте на страницу ссылку. Ссылки — важнейший аспект веб-разработки. Они позволяют пользователям переходить с одной страницы на другую. Чтобы добавить ссылку, вам нужно знать адрес веб-страницы, на которую она будет вести. Наберите <a href= , затем веб-адрес нужной страницы в кавычках. В конце добавьте закрывающий значок > . Затем сразу за ним наберите текст ссылки и закрывающий тег </a> . Вот пример того, как добавить на веб-страницу ссылку:
< a href = "https://www.mywebsite.me/ipage2" > Вторая страница </ a >
- Вы также можете добавить ссылку на адрес электронной почты или использовать вместо текста ссылки изображение.
-
Просмотрите внешний вид веб-страницы. Хотя элементы веб-страницы могут различаться, документ должен выглядеть примерно так:
<!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 >
Реклама
-
Сохраните документ. Для этого нажмите Ctrl + S . Теперь, когда вы откроете документ HTML, отобразится последняя версия вашей веб-страницы.
-
Щелкните правой кнопкой мыши по HTML-документу. Откроется меню.
-
Выберите Открыть с помощью . Эта опция находится в меню. Откроется новое меню.
-
Выберите веб-браузер. HTML-документ можно открыть в любом браузере, поэтому в меню выберите предпочитаемый веб-браузер. HTML-документ откроется в окне веб-браузера.
-
Просмотрите веб-страницу. Если все нормально, закройте Блокнот.
- Если вы хотите продолжить редактировать HTML-документ, вернитесь в Блокнот и внесите необходимые изменения, не забывая регулярно сохранять их.
- Вы можете задать цвет фона страницы , добавить фоновое изображение или изменить цвет шрифта в своем HTML-документе с помощью CSS.
Реклама
Реклама