StepkinBlog.ru
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap
03.02.2015
21:51
14313
6
Основы HTML для начинающих – «Моя первая страничка на HTML». Урок №2
Всем привет!
В сегодняшнем уроке мы попробуем вместе создать первую страничку на HTML. Благодаря практическому уроку, вы сможете понять всю теорию, которую я упоминал в уроке №1, а также попробую все проделанное изложить по полочкам.
Итак, для работы нам понадобиться стандартный текстовый редактор «Блокнот». Кто не знает, где искать «Блокнот», пишу:
на вашем компьютере снизу в левом углу есть кнопка «Пуск», нажмите на нее.
Далее выберите «Все программы» => «Стандартные» => «Блокнот».
А теперь попробуем создать первую веб-страницу. Следуйте данным пунктам:
1). Откройте блокнот
2). Создайте папку
На вашем компьютере создайте папку под названием «Мои опыты с HTML». В эту папку вы будете сохранять все файлы, сделанные по курсу изучения основ HTML.
Теперь вспомним скелет HTML из урока №1.
Скелет HTML
3). Пропишите код
Опираясь на стандартную схему-скелет HTML, прописываем в «Блокнот» вот такой код (вы можете скопировать код и вставить в блокнот):
<html> <head> <title> Моя первая HTML-страничка на StepkinBlog.ru</title> </head> <body> Здравствуйте, это моя первая страница на StepkinBlog.ru. </body> </html>
4). Сохраните документ
Сохраните документ как «index.html».
Для этого в меню блокнота нажмите «Файл» => «Сохранить Как»:
Укажите место, куда вы хотите сохранить файл, в нашем случае это папка под названием «Мои опыты с HTML».
В поле «Имя файла» напишите index.html (а не просто index, это важно). Таким способом мы создаем файл с расширением *.html для веб-страниц. Далее нажмите на кнопку «Сохранить»:
В папке «Мои опыты с HTML» появиться файл под названием «index», нажмите на него двойным щелчком мыши или откройте этот файл через любой браузер, например, Internet Explorer. Вот такой результат вы должны увидеть на мониторе компьютера:
Теперь разберем код по косточкам 
.
<html> - открываем HTML документ.
<head> - открываем голову HTML документа.
<title> - открываем заголовок.
Моя первая HTML-страничка на StepkinBlog.ru
</title> - закрываем заголовок.
</head> - закрываем голову HTML документа.
<body> - открываем тело HTML документа.
Здравствуйте, это моя первая страница на StepkinBlog.ru.
</body> - закрываем тело HTML документа.
</html> - закрываем HTML документ.
Я думаю, вы заметили, что текст, который находится между тегами <title>здесь текст</title>, отобразился во вкладке браузера, а все, что находится между тегами <body>здесь текст</body>, отобразилось на экране монитора:
P.S. Хочу еще раз напомнить о парных тегах, которые нуждаются в закрытии, например:
<body> - открываем HTML документ
</body> - закрываем HTML документ (закрывается тег знаком «/»)
и теги-одиночки, которые не нуждаются в закрывающей паре:
<br> -перенос строки.
Я бы еще выразился так, что парные теги – это условный контейнер, внутри которого могут находиться другие теги, текст, картинки и т.д.
Для лучшего понимания моих слов, рекомендую глянуть на графическую схему, где я показал, как действуют парные теги:
Также хочу направить ваше внимание на правильность написания парных тегов:
<тэг1><тэг2><тэг3> ... </тэг3></тэг2></тэг1>
Обратите внимание, тег, который открывается первым должен закрыться последним, второй - предпоследним и т.д.
Это правильное закрытие парных тегов, а теперь давайте посмотрим, как нельзя закрывать парные теги:
<тэг1><тэг2><тэг3> ... </тэг3></тэг1></тэг2>
Обратите внимание, правильное закрытие тегов нарушено. Такое закрытие парных тегов может привести к фатальным ошибкам, то есть, страница будет отображаться неправильно. Так что, будьте внимательны, когда пишите парные теги.
Очень понятно и мотивирующие) Это, как в рисовании..сделать cвой первый набросок)))
Ответить
13 марта, 2017 at 18:40
Спасибо, Максим!
Надеюсь, Вам понравится весь курс "Основы HTML"
Ответить
Даже мне в 70 лет всё понятно.
Ответить
19 марта, 2019 at 22:02
Отлично, Анатолий! Может потом, как-то покажете, какую веб-страницу Вы сделаете, после окончании курса?
Ответить
Добрый день, недавно нарвался на ваш сайт. Это же какую огромную работу вы проделали !. Я по специальности бухгалтер практика более 13 лет, НО ! устал от этой профессии скучно, не чувствую развития. Что то после прочтения книги "ПОТОК" мне сорвало "крышу" и я увлекся веб версткой, да и вообще тянет сильно в программирование, получаю огромное удовольствие, от новых знаний. Учу уже несколько месяцев и HTML 5 CSS3 JS, за все берусь по результату нигде не преуспел )).Основная проблема учишь много теорий и в итоге не понимаешь как все это вместе соединить, в общем нужна практика. Я знаю по своей специальности после окончания института, когда пошел на работу тоже не понимал откуда ноги растут. В общем гранит очень твердая порода, ну очень, но стараюсь. Спасибо за сайт !!! Это очень информативный сайт.
Ответить
28 марта, 2019 at 11:12
Здравствуйте, Ахмед!
Спасибо за приятный комментарий. Я думаю, что Вам еще больше понравиться верстка и веб-программирование. И у Вас все получиться!
Удачи Вам!!!
Ответить