Май 14, 2020 Запись была обновлена
Урок 1. Что такое HTML — изучаем что такое HTML структура
Не будем вдаваться в подробности и историю что такое HTML, а сразу перейдем основным моментам. HTML — это основа построения любого сайта! При изучении темы сайтостроения необходимо начинать именно с него. Здесь нет ничего тяжелого. Освоить данную технологию сможет АБСОЛЮТНО КАЖДЫЙ!
Сразу хочу заметить, что это НЕ язык программирования, а язык разметки.
Почему выучить HTML легко?
Чтобы говорить свободно на английском языке не нужно знать все слова, которые есть в английском языке. Так и здесь, Вам лишь необходимо усвоить некоторые из основных тегов и научиться с ними работать. А дальше Вам лишь останется практиковаться и нарабатывать навык.
Давайте приступим к изучению этой увлекательной, и одновременно простой, технологии.
Немного теории…
Любая страница состоит из тегов. То есть страница выглядит на самом деле не так как мы привыкли это видеть, а состоит из множества тегов, каждый из которых, играет определенную роль.
Это похоже на большую стену из кирпичиков. Если все кирпичики на ней положены аккуратно, то и вся стена выглядит красиво. Поэтому при написании структуры страницы необходимо уделять внимание каждому тегу, потому что он является "кирпичиком" для нашей будущей страницы.
Но что такое тег в HMTL?
Это элемент HTML страницы, который так или иначе влияет на отображение и разметку страницы. На словах понять это достаточно сложно, поэтому необходимо сразу все смотреть именно на практике и привыкать к коду. Посмотрите на изображение ниже:
Это структура самой простой страницы. А вот эти повторяющиеся слов в треугольных скобках — это и есть теги. Если Вы откроете свой текстовый редактор и напишете данный код, а затем сохраните в формате HTML, то у Вас получится HTML страничка. Пока что не понятно что такое HTML? 🙂
Из этой структуры можно увидеть те теги, которые должны обязательно присутствовать. Это теги:
Чтобы было более наглядно, я выделил их оранжевым цветом на изображении ниже:
Все, что мы будем писать между тегами <head> и </head> мы не увидим на нашей странице. Эти теги могут сообщать браузеру о кодировке, о заголовке нашей страницы, здесь могут подключить различные стили, скрипты и так далее. Все это Вы увидите в последующих уроках.
А вот все теги, которые мы будем писать между тегами <body> и </body>, в зависимости от его предназначения, будет влиять именно на структуру нашей HTML страницы.
Ну что, стало более понятно что такое HTML? 😉 Но мы не останавливаемся и движемся дальше…
Некоторые теги могут иметь закрывающий тег, а некоторые нет. Например тега <body> есть закрывающий тег </body>. Как Вы могли уже догадаться, закрываются теги с помощью наклонной черты.
Очень важно соблюдать открытие и закрытие тегов. Чтобы не было ошибок. Браузер ошибку может и не показать, а вот структура Вашей страниц будет неправильной и при дальнейшей работе со стилями (где займемся внешним видом) будут большие проблемы. Поэтому если у тега есть закрывающий тег, то он обязательно должен присутствовать в правильном месте.
Давайте на примере разберем как НЕ надо закрывать теги и в каком порядке это необходимо делать. Пример двух тегов:
1 | <div><p>Произвольный текст</p></div> |
То, что Вы видите выше — это правильный порядок написания закрывающих тегов. Но может быть такая ситуация
1 | <div><p>Произвольный текст</div></p> |
Так закрывать теги категорически запрещается!
Практика, чтобы понять что такое HTML…
Поближе узнать, что такое HTML, можно лишь на практике. Для этого можно использовать любой текстовый редактор. Даже блокнот. Но я рекомендую использовать Notepad++, потому что функци для работы с HTML здесь гораздо больше. Скачать его можно по ссылке Скачать Notepad++. В данном редакторе есть все возможности для создания и редактирования 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 формате. Для этого нажимаем в меню "Файл", здесь жмем "Сохранить как…". Вводим имя HTML страницы. Я назвал ее index.html. Затем просто сохраняем в удобное место у себя на компьютере. После этого появится подсветка HTML тегов, потому что редактор Notepad++ поймет что это HTML документ. А с подстветкой работать гораздо приятнее.
Сейчас можно открыть этот файл в любом браузере. И если Вы в своем браузере увидели такую вот картину:
То необходимо дописать после закрывающего тега </title> вот такую строчку:
1 | <meta charset="utf-8"> |
И убедиться в том, что в текстовом редакторе выбрана кодировка UTF-8 (без BOM):
И тогда Вы увидите следующую страничку в своем браузере:
Видео урок — что такое HTML? (практика)
Если при прочтении Вам было тяжело, то посмотрите данный видео урок:
Вывод
Замечательно, у нас получилась первая HMTL страничка. Если же что-то пошло не так, то обязательно повторите все шаги и убедитесь в том, что Вы все сделали точно также. Теперь у Вас сложилось первое впечатление о HTML и что это такое.
Это только начало, но через время вы сможете разместить сайт в интернете.
Если у вы намерены погрузится в тему сайтостроения и надолго здесь задержаться, то рекомендую изучить обучение сайтостроению от Нетологии (профессия Front-end разработчик). Это уже полноценный структурированный курс, где вы сможете в конце получить диплом. Кроме этого курса, конечно же, есть альтернативы. Онлайн-школа Skillbox проводит обучение по Front-end разработке. Переходите и внимательно смотрите на программу обучения.
Еще материалы по этой теме
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
делаю все правильно ну выходит так начало обучения технологии html
моя первая html страница
начало обучения технологии html
В редакторе поставьте кодировку UTF-8. Затем между тегами <head></head> вставить:
<meta charset="UTF-8" />
Доброго вечера.
В тестировании по понимаете ?
во…во, у меня така же фигня 😕
ура…. получилось, надо теперь разобраться чего всунули, чтоб получилось
у меня получилось создать мою первую страничку. 😎
Получилось! 🙂
Привет из 2015 🙂 🙂 🙂 🙂
привет из 2020 )
У меня всё получилось без всяких правок!Всё чЁтко!
как открыть созданную index.html в браузере?
Добрый день, Влад!
Один из вариантов: кликнуть правой кнопкой мыши по этому файлу и нажать «Открыть с помощью», а затем выбрать браузер.
А как выйти из HTML в читаемый текст. Спасибо.
Федор, добрый день!
Вы сейчас редактор в CMS (WordPress, Joomla) имеете ввиду?
Все очень интересно
Ну а что же дальше?
А дальше урок 2 — параграфы и заголовки.
ничего не получилось. открывается текст с тегами. делаю в Word