Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

Главная » Основы HTML » Основы HTML для начинающих – «Моя первая страничка на HTML». Урок №2

03.02.2015


21:51


4697


2


Основы HTML для начинающих – «Моя первая страничка на HTML» . Урок №2

Основы HTML для начинающих – «Моя первая страничка на HTML». Урок №2

Всем привет!
В сегодняшнем уроке мы попробуем вместе создать первую страничку на HTML. Благодаря практическому уроку, вы сможете понять всю теорию, которую я упоминал в уроке №1, а также попробую все проделанное изложить по полочкам.
Итак, для работы нам понадобиться стандартный текстовый редактор «Блокнот». Кто не знает, где искать «Блокнот», пишу:
на вашем компьютере снизу в левом углу есть кнопка «Пуск», нажмите на нее.
Далее выберите «Все программы» => «Стандартные» => «Блокнот».

Основы HTML для начинающих

А теперь попробуем создать первую веб-страницу. Следуйте данным пунктам:

1). Откройте блокнот

2). Создайте папку
На вашем компьютере создайте папку под названием «Мои опыты с HTML». В эту папку вы будете сохранять все файлы, сделанные по курсу изучения основ HTML.

Основы HTML для начинающих

Теперь вспомним скелет HTML из урока №1.

Скелет HTML

Скелет HTML

3). Пропишите код

Опираясь на стандартную схему-скелет HTML, прописываем в «Блокнот» вот такой код (вы можете скопировать код и вставить в блокнот):

<html>
<head>
<title> Моя первая HTML-страничка на StepkinBlog.ru</title>
</head>
<body>
Здравствуйте, это моя первая страница на StepkinBlog.ru.
</body>
</html>

[Посмотреть результат]

4). Сохраните документ

Сохраните документ как «index.html».
Для этого в меню блокнота нажмите «Файл» => «Сохранить Как»:

Основы HTML для начинающих

Укажите место, куда вы хотите сохранить файл, в нашем случае это папка под названием «Мои опыты с HTML».
В поле «Имя файла» напишите index.html (а не просто index, это важно). Таким способом мы создаем файл с расширением *.html для веб-страниц. Далее нажмите на кнопку «Сохранить»:

Основы HTML для начинающих

В папке «Мои опыты с HTML» появиться файл под названием «index», нажмите на него двойным щелчком мыши или откройте этот файл через любой браузер, например, Internet Explorer. Вот такой результат вы должны увидеть на мониторе компьютера:

Основы HTML для начинающих

Теперь разберем код по косточкам :roll:.

<html> - открываем HTML документ.
<head> - открываем голову HTML документа.
<title>  - открываем заголовок.
Моя первая HTML-страничка на StepkinBlog.ru
</title> - закрываем заголовок.
</head> - закрываем голову HTML документа.
<body> - открываем тело HTML документа.
Здравствуйте, это моя первая страница на StepkinBlog.ru.
</body> - закрываем тело HTML документа.
</html> - закрываем HTML документ.

Я думаю, вы заметили, что текст, который находится между тегами <title>здесь текст</title>, отобразился во вкладке браузера, а все, что находится между тегами <body>здесь текст</body>, отобразилось на экране монитора:

Основы HTML для начинающих – «Моя первая страничка на HTML»

P.S. Хочу еще раз напомнить о парных тегах, которые нуждаются в закрытии, например:

<body> - открываем HTML документ
</body> - закрываем HTML документ (закрывается тег знаком «/»)

и теги-одиночки, которые не нуждаются в закрывающей паре:

<br> -перенос строки.

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

Основы HTML для начинающих – «Моя первая страничка на HTML»

Также хочу направить ваше внимание на правильность написания парных тегов:

<тэг1><тэг2><тэг3> ... </тэг3></тэг2></тэг1>

Обратите внимание, тег, который открывается первым должен закрыться последним, второй - предпоследним и т.д.
Это правильное закрытие парных тегов, а теперь давайте посмотрим, как нельзя закрывать парные теги:

<тэг1><тэг2><тэг3> ... </тэг3></тэг1></тэг2>

Обратите внимание, правильное закрытие тегов нарушено. Такое закрытие парных тегов может привести к фатальным ошибкам, то есть, страница будет отображаться неправильно. Так что, будьте внимательны, когда пишите парные теги.



Случайные записи:

  1. Плавающие блоки в CSS. Основы CSS для начинающих. Урок №15
  2. Сворачивание (аккордеон). Основы bootstrap 3 для начинающих. Урок №22
  3. Создание дополнительных классов. Основы bootstrap 3 для начинающих. Урок №23
  4. Вкладки. Основы bootstrap 3 для начинающих. Урок №21
  5. Функции (function). Основы PHP с нуля. Урок №16

Последние записи рубрики:

  1. Бесплатный курс по основам HTML
  2. Шпаргалка по HTML на русском языке
  3. Создание простого мини сайта. Практика по пройдённому материалу
  4. Тесты HTML онлайн. Основы HTML для начинающих
  5. Как прописать мета теги. Основы HTML для начинающих. Урок №21

2 ответа(ов) на статью: “Основы HTML для начинающих – «Моя первая страничка на HTML». Урок №2”

  1. Макс says:

    Очень понятно и мотивирующие) Это, как в рисовании..сделать cвой первый набросок))) :smile:

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Спасибо, Максим!
    Надеюсь, Вам понравится весь курс "Основы HTML"

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 245