Учимся создавать файлы и поговорим немного о тегах

Как создать html файл? Какая обязательно должна быть структура html файла? И немного о тегах.
Учимся создавать файлы

Публикация в группе: Хочу сделать сам! (PHP, MySQL, PostgreSQL, HTML, CSS, JavaScript)

Категории группы: Учимся верстать

Здравствуйте, сегодня мы будем учиться создавать html файлы.

HTML (Hyper Text Mark Langyage) — язык разметки гипертекста. Через язык разметки мы формулируем наш вид странички в самом браузере. HTML состоит из рядов тегов. У самих тегов есть свои атрибуты.

Давайте создадим папку, где будем экспериментировать и учиться. Я, например, создам папку “html”. После мы открываем программу notepad++. В этой программе мы сразу нажимаем на файл -> сохранить как.

Скриншот как сохранять файлы

После выбираем нашу папку и называем файл “index.html”.

Скриншот Как назвать файл

Так проще всего создать html файл.

Исторически сложилось, что index файл по умолчанию и считается главным. Он может быть “index.html”, или “index.php”. Про язык программирования PHP мы сегодня не будем говорить, просто возьмите это на заметку.

И давайте договоримся, что все файлы для нашего сайта будем называть именно латинскими маленькими буквами. Это убережёт от многих проблем. Например: на сервере с ОС GNU/Linux название файлов чувствительны к регистру. На хостинге файл index.html и INDEX.html будут два разных файла.

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

Первое, что надо сделать после создания нашего файла написать вот такой код:

<!DOCTYPE html>
<html lang="ru-RU">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Мой первый файл!</title>
    <meta name="description" content="Описание странички.">
    <meta name="keywords" content="Ключевые слова, ставятся через запятую, вот так">
</head>
<body>


</body>
</html>

Обратите внимания <!DOCTYPE>, <html>, <head>, <meta>, <title>, <body> — всё теги. А что внутри тега, т.е. между <>, это атрибуты тега (например: name=“description” атрибут name со значением description). Как мы видим, некоторые теги закрываются (<body></body>), а некоторым не требуется закрытие (<meta>).

Разберём код

DOCTYPE обязательно должен быть первой строкой. Доктайп обязательно нужен. Он нужен для того, чтобы браузеру сказать под каким стандартом свёрстана наша страничка. В данный момент популярен стандарт html5. Это мы и указали на нашей новой страничке. Другие стандарты рассматривать не будем, т.к. они уже не актуальны.

Вторая строчка у нас идёт тег html с атрибутом lang, со значением ru-RU. Атрибут lang у тега html многие не прописывают. Это мы указываем на каком языке наша страничка. В основном это нужно поисковику, что бы он мог правильно определить на каком языке наша страница.

Потом идёт тег <head> и внутри этого тега прописываются все <meta> теги и <title> тег.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Это настройка для браузера в какой кодировке написан наша страничка. Если файл будет в одной кодировки, а текст в другой, то текст будет в нечитаемом виде. В данный момент популярна кодировка utf-8. Запоминаем, что и файл должен быть в этой кодировке. Это можно проверить в notepad++ в пункте меню “Кодировки”, и посмотреть где стоит точка.

Скриншот Как проверить кодировку

Если точка стоит на другой кодировке, то мы нажимаем на преобразовать utf-8.

Обратите внимание, обязательно нажимаем на “преобразовать utf-8”. Так мы безопасно переведём наш файл в utf-8 и не испортим наш текст.

Ещё один нюанс – нам нужен именно utf-8, но не utf-8 с BOM. В старых версиях notepad++, чтобы сохранить файл без BOM, надо было указать на кодировку “UTF8- without BOM”.

Дело в том, что BOM, если говорить про PHP, почему-то в браузере появляется непонятный символ и потом долго думаешь, а почему страничка не правильно отображается. Поэтому возьмём за правило, что сохраняем файлы в utf-8 без BOM.

<title>Мой первый файл!</title>

Это заголовок странички. Отображается во вкладке нашего браузера и на этот тег смотрит поисковик. Поэтому желательно про этот тег не забывать.

Скриншот Заголовок нашей странички

Так же важны для поисковика теги с атрибутами “name” и со значениями “description”, “keywords”.

  • Description — здесь мы кратко описываем нашу страничку.
  • Keywords — здесь мы через запятую пишем ключевые слова странички.

После закрытия тега </head> открывается тег <body>. Вот тут идёт весь контент странички.

И сейчас будем туда писать текст и смотреть, что отображается на нашем браузере. Что бы посмотреть файл index.html в нашем браузере, мы просто наш файл переносим в браузер.

Показываем как перенети HTML файл в браузер

Как видим, на данный момент наша страничка пустая.

Краткий курс по тегам. Для того, чтобы с чего-то начать

Теги <h1>, <h2>, <h3>, <h4>, <h5>, <h6> – это заголовки. Главный заголовок, это <h1>. На эти заголовки обращают внимания поисковики.

Тег <p> – это текстовый абзац. У него есть хороший атрибут “align”. С помощью этого атрибута можно выровнять текст. По умолчанию стоит значение “left”.

  • left — Выравнивание текста по левому краю.
  • center — Выравнивание текста по центру.
  • right — Выравнивание текста по правому краю.
  • justify — Выровнять по ширине.

Тег <strong> или <b> добавить жирность текста.

Тег <i> добавить курсив текста.

Тег <br> перевод на новую строку.

Тег <a> ссылка. Адрес указывается через атрибут “href”. А через атрибут “target” указываем значение, если надо открывать ссылку в новом окне “_blank”.

Простой пример с этими тегами:

<!DOCTYPE html>
<html lang="ru-RU">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Мой первый файл!</title>
	<meta name="description" content="Описание странички.">
	<meta name="keywords" content="Ключевые слова, ставятся через запятую, вот так">
</head>
<body>
    <h1>Мой первый файл</h1>
    <p>Мой первый текст в теги абзац.</p>
    <p align="center">Хочу что бы этот текст отображался по середине.</p>
    <p><strong>Добавляем тексту жирность</strong><br><i>добавляем тексту курсив</i><br><strong><i>добавляем тексту жирность и курсив</i></strong></p>
    <p>Много текста<br> и тут мы решили его перевести на новую строку</p>
    <p><a href="https://irinauspeshnaya.ru/">Женский клуб Ирины Успешной открыть в этом окне</a><br><a href="https://irinauspeshnaya.ru/" target="_blank">Женский клуб Ирины Успешной открыть в новом окне</a></p>
</body>
</html>

В браузере это будет, выгладит в таком виде.

Скриншот Пример странички

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

5

Автор публикации

не в сети 1 месяц

Леонид Никитин

1 610
Программист из Казахстана. Отзывчивый и целеустремлённый человек. В общении - приятная личность.
flagКазахстан. Город: Караганда
Комментарии: 64Публикации: 5Регистрация: 26-08-2019
Женский клуб Ирины Успешной
Комментарии: 24
  1. Ирина Успешная

    Отлично, старт взят! С утра попробую что-нибудь воссоздать :smile: Надеюсь, что получится.

    60
    1. Леонид Никитин (автор)

      Спасибо за комментарий :oops:

      10
  2. Никита Демидов

    Как интересно. Тоже хочу освоить языки программирования.

    40
    1. Леонид Никитин (автор)

      Спасибо за комментарий и добро пожаловать к нам ;-)

      40
  3. Oksana

    Интересно то как. Надо попрактиковаться. Вот я начну писать свой первый сайт :smile: Спасибо за подробный, и вполне понятный урок!

    60
    1. Сергей Бобков

      Оксана, потом мне в чате скинь то, как у тебя получилось. Ок? Я тоже попробую заложить начало :!:

      40
      1. Екатерина Любимова

        Заинтриговали, надо вечерком заняться этим – начать писать код, вернее положить первый кирпичик фундамента моего будущего сайта :smile: Аж руки чешутся в предвкушении :grin:

        40
    2. Леонид Никитин (автор)

      В следующей статье планирую дать не большое задание ;)
      Мне такую идею дала Ирина. Я обдумал и действительно, не хватает заданий, для укрепление изученного материала.

      30
      1. Никита Демидов

        Вы и нас таким образом замотивируете на реальные действия. ;-) Идея реально крутая. Как на уроках :grin:

        20
  4. Iraida

    Отлично, переходим к практической части :smile: ;-)

    20
  5. Yuliya

    Хмммм, немного страшновато, но интересно. Как моя мама говорит: “Глаза боятся, а руки делают”.

    20
    1. Леонид Никитин (автор)

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

      10
  6. Виктория Зимина

    Это надо днём, с ещё не забитой головой, будет попрактиковаться. Сейчас уже всё, не сконцентрироваться :roll:

    20
    1. Леонид Никитин (автор)

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

      10
  7. Svetlana

    Это только на выходных, чтобы мозг был расслаблен от рутины забот.

    20
    1. Леонид Никитин (автор)

      Как говорил выше в следующей статье будут задания. Постараюсь в субботу вечером опубликовать, что бы могли воскресенье попробовать свои силы.

      10
      1. Сергей Бобков

        Вот и воскресение подходит к концу, а в группе тишина, полнейшая :sad: Ну да ладно, тогда уже до следующих выходных, так как начинается рабочая неделя.

        20
        1. Леонид Никитин (автор)

          Да, снова сорвал сроки. На выходных к сожалению немного приболел :(
          Приношу свои извинения.

          10
  8. Виктория Зимина

    С чем связано затишье??? У вас пропал интерес? Что-то мои ожидания затянулись…

    20
    1. Леонид Никитин (автор)

      Интерес не пропал. Связанно с нехваткой времени.

      10
    2. Ирина Успешная

      Виктория, рвётесь в бой? ;-) И это правильно!

      10
  9. Svetlana

    Покидаю группу, потому что нет желания находиться в состоянии ожидания. Уж извиняйте за откровенность.

    20
    1. Ирина Успешная

      Может не стоит делать поспешных выводов?

      10
    2. Леонид Никитин (автор)

      Всё нормально. Это Вы меня извините, что не оправдал ожидания. К сожалению писать хорошо и много не получается.

      0
Добавить комментарии
Войти с помощью: 
Учимся создавать файлы и поговорим немного о тегах
Udachnyiy-brak
Удачный брак и счастливая семья
Авторизация
*
*
Войти с помощью: 
Регистрация
*
*
*
Вы должны согласиться
Войти с помощью: 
Генерация пароля
Написать письмо

Я подтверждаю, что ознакомлен и согласен с Политикой конфиденциальности этого сайта и даю Согласие на обработку персональных данных

Задать вопрос

Я подтверждаю, что ознакомлен и согласен с Политикой конфиденциальности этого сайта и даю Согласие на обработку персональных данных

Обратный звонок
Закажите звонок (бесплатный)

Я подтверждаю, что ознакомлен и согласен с Политикой конфиденциальности этого сайта и даю Согласие на обработку персональных данных