Сайт в блокноте: учим с нуля

Home / Статьи / Сайт в блокноте: учим с нуля

Как создать собственный сайт с помощью блокнота

В эпоху интернета иметь собственный сайт почти также естественно, как и страницу в социальной сети. Создавать его совсем не сложно, для этого даже не нужны специальные программы  — достаточно будет обычного блокнота, который есть в любой версии «Windows». С помощью специальных символов можно изменять внешний вид страницы, добавлять текст, изображения – в общем, разработать собственный дизайн. Научиться этому в Донецке можно на наших компьютерных курсах. Возможно, это будет вашим первым шагом к жизненным переменам, ведь разработчик сайтов – очень перспективная профессия в наше время.

Давайте попробуем создать сайт в блокноте?

Итак, шаг 1: находим в стандартных программах «блокнот». Для того, чтобы создать интернет-страницу, вам потребуется прописать в открывшемся окне теги.

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

Исходные теги: (можете скопировать их в блокнот – это основа, с которой начинается любая работа)

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

Сохраните шаблон – он пригодится, если вы захотите создавать новые страницы – не придется прописывать основные элементы заново.

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

DOCTYPE

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

<!DOCTYPE html >
TITLE

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

<!DOCTYPE html >
<html>
<head>
<title>Привет, земляне!</title>
BODY

Все, что вы хотите разместить на своей страничке, поместите в этот тег. Обратите внимание:  <body> обрамляет ваш текст, находясь над и под ним.

<!DOCTYPE html>
<html>
<head>
<title> Привет, земляне!</title>
</head>
<body>
Поздравляем всех с наступающим 2017 годом!!!
</body>

Итак, самое время взглянуть на процесс под другим углом. Сохраняем файл, меняя его имя на index.html. Вы только что изменили расширение, и теперь вместо блокнота на вашем экране появится значок интернет-страницы. Давайте посмотрим, что получается? Да, пока это обычная белая страница с текстом. Её внешний вид далек от идеала. Поэтому следующий наш шаг – добавление красок.
Нам понадобится новый тег – <style>.  Прописываем его под первым <body>:

<!DOCTYPE html >
<html>
<head>
<title>Привет, земляне!</title>
</head>
<body>
<style>
body {background: #CCFFCC;}
h1 {color:FF0000; font:normal 25pt/20pt arial;}
</style>

Обратите внимание, что каждое действие мы начинаем с новой строки, а закрывающие теги (те, что находятся под информацией) имеют вот такой слеш  / перед своим названием: </style>.

Нажимаем кнопку «сохранить», и, если вы все сделали правильно, фон вашего «сайта» изменит цвет.

По-моему, текст на нашей странице немного мелковат. Значит, нужно внести изменения:

<!DOCTYPE html >
<html>
<head>
<title>Привет, земляне!</title>
</head>
<body>
<style>
body {background: #CCFFCC;}
h1 {color:FF0000; font:normal 25pt/20pt arial;}
</style>

h1 – это заголовок. Мы указали цвет, размер букв и шрифт. Осталось применить это к конкретной фразе:

<!DOCTYPE html >
<html>
<head>
<title>Привет,  земляне!</title>
</head>
<body>
<style>
body {background: #CCFFCC;}
h1 {color:FF0000; font:normal 25pt/20pt arial;}
</style>
<center><h1>Поздравляем всех с наступающим 2017 годом!!! </h1><center>
</body>
</html>

Сохраняемся и обновляем страничку в браузере. Уже лучше, не правда ли? Теперь пора добавить какую-нибудь  информацию.

<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Привет, земляне! </title>
</head>
<body>
<style>
body {background:#FAF0E6}
h1 {color:FF0000; font:normal 25pt/20pt arial;}
</style>
<center><h1>Моя первая web-страница</h1><center>
<p>Здравствуй, Дедушка Мороз,</p>
<p>Борода из ваты! </p>
<p>Подари на Новый Год </p>
<p>BMW – X пятый!</p>

Сохраняем наш файл, обновляем страничку в браузере и любуемся результатом.

Конечно,  мы использовали далеко не все возможные коды. Хотите уметь больше? Приходите на наши уроки в Донецке, и мы раскроем вам много интересных секретов!

Остались вопросы?

Имя

Телефон или Email

Ваше сообщение

Яндекс.Метрика