Урок 1. Что такое HTML — изучаем что такое HTML структура Не будем вдаваться в подробности и историю что такое HTML, а сразу перейдем основным моментам. HTML — это основа построения любого сайта! При изучении темы сайтостроения необходимо начинать именно с него. Здесь нет ничего тяжелого. Освоить данную технологию сможет АБСОЛЮТНО КАЖДЫЙ! Сразу хочу заметить, что это НЕ язык программирования, а язык разметки. Почему выучить HTML легко? Чтобы говорить свободно на английском языке не нужно знать все слова, которые есть в английском языке. Так и здесь, Вам лишь необходимо усвоить некоторые из основных тегов и научиться с ними работать. А дальше Вам лишь останется практиковаться и нарабатывать навык. Давайте приступим к изучению этой увлекательной, и одновременно простой, технологии. Немного теории… Любая страница состоит из тегов. То есть страница выглядит на самом деле не так как мы привыкли это видеть, а состоит из множества тегов, каждый из которых, играет определенную роль. Это похоже на большую стену из кирпичиков. Если все кирпичики на ней положены аккуратно, то и вся стена выглядит красиво. Поэтому при написании структуры страницы необходимо уделять внимание каждому тегу, потому что он является "кирпичиком" для нашей будущей страницы. Но что такое тег в HMTL? Это элемент HTML страницы, который так или иначе влияет на отображение и разметку страницы. На словах понять это достаточно сложно, поэтому необходимо сразу все смотреть именно на практике и привыкать к коду. Посмотрите на изображение ниже: Это структура самой простой страницы. А вот эти повторяющиеся слов в треугольных скобках — это и есть теги. Если Вы откроете свой текстовый редактор и напишете данный код, а затем сохраните в формате HTML, то у Вас получится HTML страничка. Пока что не понятно что такое HTML? 🙂 Из этой структуры можно увидеть те теги, которые должны обязательно присутствовать. Это теги: <html> и закрывающий </html> <head> и закрывающий </head> <body> и закрывающий </body> Чтобы было более наглядно, я выделил их оранжевым цветом на изображении ниже: Все, что мы будем писать между тегами <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 страниц. Начнем. После открытия программы вы увидите такое окошко: Чтобы создать HTML страницу, необходимо ввести "тело" страницы в данное окошко. Вы можете скопировать текст ниже и просто вставить его. Но лучше введите все руками. Так Вы сможете быстрее запомните и привыкнете к тегам. HTML КОД 1 2 <html> <head> 3 <title>Изучаю HTML - Начало</title> 4 </head> 5 <body> 6 <h1>Основной заголовок</h1> 7 <h3>Более маленький подзаголовок</h3> 8 </body> 9 </html> Итак, у вас должно получиться следующее: Далее необходимо сохранить данную страницу в HTML формате. Для этого нажимаем в меню "Файл", здесь жмем "Сохранить как…". Вводим имя HTML страницы. Я назвал ее index.html. Затем просто сохраняем в удобное место у себя на компьютере. После этого появится подсветка HTML тегов, потому что редактор Notepad++ поймет что это HTML документ. А с подстветкой работать гораздо приятнее. Сейчас можно открыть этот файл в любом браузере. И если Вы в своем браузере увидели такую вот картину: То необходимо дописать после закрывающего тега </title> вот такую строчку: HTML КОД 1 <meta charset="utf-8"> И убедиться в том, что в текстовом редакторе выбрана кодировка UTF-8 (без BOM): И тогда Вы увидите следующую страничку в своем браузере: