«Введение в HTML» – первый урок учебника HTML. Здесь мы с вами поговорим об основных правилах синтаксиса языка, узнаем, что такое теги и какими они бывают. Также мы с вами разберем структуру html документов. Введение в HTML станет для вас самым первым шагом на пути к созданию собственного сайта.
Данный урок станет для вас первым шагом на пути к созданию собственного сайта и он уже наполовину пройден...
Элементы разметки HTML.
HTML, являясь языком разметки состоит из так называемых тегов (элементов разметки), которые ,в свою очередь, могут быть:
полные
неполные
символьные
Полный элемент разметки, также называемый контейнером, имеет открывающий и закрывающий теги, неполный – только открывающий, а символьные элементы разметки представляются в виде символьных кодов и вы можете видеть их в таблице ниже:
Основным назначением HTML тегов является указание области действия тех или иных правил разметки документов. Большая часть HTML тегов состоит из двух частей: открывающий тег <...> и закрывающий тег </...>.
Например:
<strong>текст</strong>
<div> ........ </div>
Также в HTML существуют теги, не требующие закрывающего элемента. Это как правило элементы вставки чего–либо или служебные элементы:
<img> – тег вставки изображения
<br> – тег вставки разрыва строки
<hr> – тег вставки горизонтальной линии
Стоит принимать во внимание, что отсутствие закрывающих тегов не будет являться критическим с точки зрения отображения документа интернет–браузерами, т.к. многие браузеры не обращают особого внимания на правильность HTML кода. Но если неправильный код может и не помешать браузерам отобразить ваш документ, то поисковым машинам это уж точно помешает, причем очень сильно.
Так что изначально учитесь писать грамотный HTML код, закрывая все теги, требующие закрытия.
Структура HTML документа.
Абсолютно любой документ, построенный на базе HTML будет состоять, по меньшей мере, из следующих контейнеров:
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
<HTML>
Внутри контейнера <HTML></HTML> расположен весь документ HTML, включая все служебные комманды и основной контент, поэтому выход за границы этого тега очень нежелателен.
Внутри контейнера <HEAD></HEAD> располагаются служебные комманды, которые не выводятся на экран, зато дают браузеру и поисковым машинам служебную информацию о документе, которая помогает правильно отобразить и индексировать его.
Внутри контейнера <BODY></BODY> расположенна вся информация, которую необходимо вывести на экран.
В какой программе удобно писать HTML.
И в заключение я хотел бы обсудить тему написания WEB документов. В принципе веб-документ является простой последовательностью символов, поэтому его можно написать абсолютно в любом редакторе текста, затем сохранив с расширением .htm (.html, .xhtml, .xml и т.д.) и вывести его на экран браузером.
Так то оно так, но удобно ли это?
Сам я, как и большинство веб-мастеров, пользуюсь редактором кода Dreamweaver. На мой взгляд, почти идеальный редактор кода: имеет отличную подсветку синтаксиса, приятный графический интерфейс и вообще множество полезного и удобного дополнительного функционала. Но не буду навязывать вам своего мнения, основная идея, которую я хотел бы до вас донести заключается в том, что существует множество профессиональных редакторов кода (как платных, так и абсолютно бесплатных), которые позволяют в разы, если не в десятки раз увеличить скорость создания качественных веб-страниц и автоматизировать рутинные процессы.
Данный урок был вводным. В нем мы бросили первый взгляд на язык разметки HTML. Думаю, что введение в html не было для вас трудным, ведь этот язык очень прост для понимания и достаточно быстро усваивается.
В следующем уроке мы обсудим основы этого языка. Поговорим о грамматике, изучим несколько новых элементов разметки и научимся делать комментарии.