21.02.2017   5120

Создаём свою первую HTML-страницу

Как создать HTML-страницу

Всем привет, друзья! Рад представить вам новый бесплатный курс по HTML. Если Вы ещё не знаете, для чего нужно изучать HTML, читайте тут.

А в этом вводном уроке мы с вами создадим свою первую HTML-страничку. Поехали.

При вёрстке веб-страниц используются язык разметки HTML и язык стилей CSS. В этом курсе мы поговорим в основном о первом, однако затронем и второй.

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

Для удобного создания страничек Вам потребуется редактор с подсветкой кода. Я рекомендую Вам на начальном этапе использовать программу Notepad++. Скачать можно тут. Если кто-то не знает, что такое подсветка кода, то проще всего это понять, взглянув на следующие картинки:

код html-странички в стандартном "блокноте":

тот же самый код в редакторе Notepad++:

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

Итак, выбрали редактор. Давайте теперь создадим нашу первую страничку.
Создайте папку site, а внутри неё файл index.html.
Теперь давайте откроем его в нашем редакторе Notepad++, и зададим кодировку файла в UTF-8:

Всегда используйте именно кодировку UTF-8 для своих страничек. Чуть подробнее о кодировке я расскажу в следующих уроках.

Теперь давайте запишем следующий код в этот файл:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Заголовок новости - Название сайта</title>
    </head>
    <body>
    <h1>Заголовок новости</h1>
        Текст новости
    </body>
</html>

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

Поздравляю, Вы только что создали свою первую страничку!

О том, как это работает я поведаю в следующих уроках. Не забудьте подписаться в социальных сетях, чтобы не пропустить новые уроки. И обязательно сделайте домашнее задание к этому первому уроку. Вообще, делайте его во всех уроках, где оно указано. Только практика даст реальный результат. А я желаю Вам удачи в прохождении этого курса, если будут вопросы - задавайте в комментариях, не стесняйтесь - здесь все новички. И лично я положительно отношусь к людям, которые чего-то не поняли и не боятся спросить. Отвечу всем с радостью. До встречи в следующих уроках!

Домашнее задание
Для просмотра домашки нужно войти на сайт.
Или получить доступ прямо сейчас:


Нажимая эту кнопку
Вы принимаете политику конфиденциальности

Следующий урок

Комментарии

 shevchenko 2017-05-26 11:15:57
0

Огромное спасибо за интересную статью, у меня получилось! Это так просто, как оказалось.

Ответить
 ignateva7 2017-05-26 11:44:51
0

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

Ответить
  •  cr3at0r 2017-05-26 17:19:23
    0

    Если что-то не будет получаться, или будут замечания - напишите, пожалуйста. Будем делать ещё лучше. Спасибо за отзыв!

    Ответить
 en 2017-05-26 12:03:15
0

Время есть - теперь буду разбираться. Такие курсы обычно платные, а вы предлагаете обучение бесплатно. Спасибо за курс, надеюсь что с вашей помощью у меня всё получится!

Ответить
  •  cr3at0r 2017-05-26 17:15:22
    0

    Пожалуйста! Если будут вопросы - спрашивайте, с радостью помогу.

    Ответить
 adianon 2017-05-26 12:35:44
+1

Простые и сжатые шаги обучения HTML - лучше всего, меня заинтересовал Notepad++, он есть в среде Линукс и если нет, есть ли аналоги?

Ответить
 albert.s 2017-05-27 10:10:39
0

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

Ответить
Чтобы написать комментарий нужно войти на сайт.
Или получить доступ прямо сейчас:


Нажимая эту кнопку
Вы принимаете политику конфиденциальности