Лого SiteHere.ru

Урок 1. Что такое HTML — изучаем что такое HTML структура

Не будем вдаваться в подробности и историю что такое HTML, а сразу перейдем основным моментам. HTML — это основа построения любого сайта! При изучении темы сайтостроения необходимо начинать именно с него. Здесь нет ничего тяжелого. Освоить данную технологию сможет АБСОЛЮТНО КАЖДЫЙ!

Сразу хочу заметить, что это НЕ язык программирования, а язык разметки.

Почему выучить HTML легко?

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

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

Немного теории…

Любая страница состоит из тегов. То есть страница выглядит на самом деле не так как мы привыкли это видеть, а состоит из множества тегов, каждый из которых, играет определенную роль.

Это похоже на большую стену из кирпичиков. Если все кирпичики на ней положены аккуратно, то и вся стена выглядит красиво. Поэтому при написании структуры страницы необходимо уделять внимание каждому тегу, потому что он является "кирпичиком" для нашей будущей страницы.

Но что такое тег в HMTL?

Это элемент HTML страницы, который так или иначе влияет на отображение и разметку страницы. На словах понять это достаточно сложно, поэтому необходимо сразу все смотреть именно на практике и привыкать к коду. Посмотрите на изображение ниже:

Пример структуры HTML документа и что это такое

Это структура самой простой страницы. А вот эти повторяющиеся слов в треугольных скобках — это и есть теги. Если Вы откроете свой текстовый редактор и напишете данный код, а затем сохраните в формате HTML, то у Вас получится HTML страничка. Пока что не понятно что такое HTML? 🙂

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

  • <html> и закрывающий </html>
  • <head> и закрывающий </head>
  • <body> и закрывающий </body>

Чтобы было более наглядно, я выделил их оранжевым цветом на изображении ниже:

Обязательные HTML теги

Все, что мы будем писать между тегами <head> и </head> мы не увидим на нашей странице. Эти теги могут сообщать браузеру о кодировке, о заголовке нашей страницы, здесь могут подключить различные стили, скрипты и так далее. Все это Вы увидите в последующих уроках.

А вот все теги, которые мы будем писать между тегами <body> и </body>, в зависимости от его предназначения, будет влиять именно на структуру нашей HTML страницы.

Ну что, стало более понятно что такое HTML? 😉 Но мы не останавливаемся и движемся дальше…

Некоторые теги могут иметь закрывающий тег, а некоторые нет. Например тега <body> есть закрывающий тег </body>. Как Вы могли уже догадаться, закрываются теги с помощью наклонной черты.

Очень важно соблюдать открытие и закрытие тегов. Чтобы не было ошибок. Браузер ошибку может и не показать, а вот структура Вашей страниц будет неправильной и при дальнейшей работе со стилями (где займемся внешним видом) будут большие проблемы. Поэтому если у тега есть закрывающий тег, то он обязательно должен присутствовать в правильном месте.

Давайте на примере разберем как НЕ надо закрывать теги и в каком порядке это необходимо делать. Пример двух тегов:

Правильный HTML КОД
1
<div><p>Произвольный текст</p></div>

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

ОШИБКА В HTML КОДЕ
1
<div><p>Произвольный текст</div></p>

Так закрывать теги категорически запрещается!

Практика, чтобы понять что такое HTML…

Поближе узнать, что такое HTML, можно лишь на практике. Для этого можно использовать любой текстовый редактор. Даже блокнот. Но я рекомендую использовать Notepad++, потому что функци для работы с HTML здесь гораздо больше. Скачать его можно по ссылке Скачать Notepad++. В данном редакторе есть все возможности для создания и редактирования HTML страниц.

Начнем. После открытия программы вы увидите такое окошко:

Открываем Notepad++ - что такое HTML

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

HTML КОД
1
2
3
4
5
6
7
8
9
<html>
    <head>
        <title>Изучаю HTML - Начало</title>
    </head>
    <body>
        <h1>Основной заголовок</h1>
        <h3>Более маленький подзаголовок</h3>
    </body>
</html>

Итак, у вас должно получиться следующее:

Вставили HTML код в Notepad++

Далее необходимо сохранить данную страницу в HTML формате. Для этого нажимаем в меню "Файл", здесь жмем "Сохранить как…". Вводим имя HTML страницы. Я назвал ее index.html. Затем просто сохраняем в удобное место у себя на компьютере. После этого появится подсветка HTML тегов, потому что редактор Notepad++ поймет что это HTML документ. А с подстветкой работать гораздо приятнее.

Сохраняем HTML страницу

Сейчас можно открыть этот файл в любом браузере. И если Вы в своем браузере увидели такую вот картину:

Без кодировки

То необходимо дописать после закрывающего тега </title> вот такую строчку:

HTML КОД
1
<meta charset="utf-8">

И убедиться в том, что в текстовом редакторе выбрана кодировка UTF-8 (без BOM):

Кодировка Notepad++ UTF-8 без BOM

И тогда Вы увидите следующую страничку в своем браузере:

Правильная кодировка в Notepad++

Видео урок — что такое HTML? (практика)

Если при прочтении Вам было тяжело, то посмотрите данный видео урок:

Вывод

Замечательно, у нас получилась первая HMTL страничка. Если же что-то пошло не так, то обязательно повторите все шаги и убедитесь в том, что Вы все сделали точно также. Теперь у Вас сложилось первое впечатление о HTML и что это такое.

Это только начало, но через время вы сможете разместить сайт в интернете.

Если у вы намерены погрузится в тему сайтостроения и надолго здесь задержаться, то рекомендую изучить обучение сайтостроению от Нетологии (профессия Front-end разработчик). Это уже полноценный структурированный курс, где вы сможете в конце получить диплом. Кроме этого курса, конечно же, есть альтернативы. Онлайн-школа Skillbox проводит обучение по Front-end разработке. Переходите и внимательно смотрите на программу обучения.

18 комментариев к записи
  • Сергей

    делаю все правильно ну выходит так начало обучения технологии html

    моя первая html страница

    начало обучения технологии html

     
    • Юрий

      В редакторе поставьте кодировку UTF-8. Затем между тегами <head></head> вставить:
      <meta charset="UTF-8" />

       
      • илья

        Доброго вечера. 
        В тестировании по понимаете ? 

         

         
    • Вера

      во…во, у меня така же фигня 😕

       
  • Вера

    ура…. получилось, надо теперь разобраться чего всунули, чтоб получилось

     
  • Валентина

    у меня получилось создать мою первую страничку. 😎

     
  • Карина

    Получилось! 🙂

     
  • Аноним

    Привет из 2015 🙂 🙂 🙂 🙂

     
  • Владимир

    У меня всё получилось без всяких правок!Всё чЁтко!

     
  • Влад

    как открыть созданную index.html в браузере?

     
    • Юрий Немец

      Добрый день, Влад!
      Один из вариантов: кликнуть правой кнопкой мыши по этому файлу и нажать «Открыть с помощью», а затем выбрать браузер.

       
  • Федор

    А как выйти из HTML в читаемый текст. Спасибо.

     
    • Юрий Немец

      Федор, добрый день!
      Вы сейчас редактор в CMS (WordPress, Joomla) имеете ввиду?

       
  • irmaseo.ru

    Все очень интересно

     
  • Юхов

    Ну а что же дальше?

     
  • владимир

    ничего не получилось. открывается текст с тегами. делаю в Word

     

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *