Основы HTML. Что такое HTML? Понятие тега
Не будем вдаваться в подробности и историю что такое HTML, а сразу перейдем основным моментам. HTML — это основа построения любого сайта! При изучении темы сайтостроения необходимо начинать именно с него. Здесь нет ничего тяжелого. Освоить данную технологию сможет АБСОЛЮТНО КАЖДЫЙ!
Сразу хочу заметить, что это НЕ язык программирования, а язык разметки.
Почему выучить HTML легко?
Чтобы говорить свободно на английском языке не нужно знать все слова, которые есть в английском языке. Так и здесь, Вам лишь необходимо усвоить некоторые из основных тегов и научиться с ними работать. А дальше Вам лишь останется практиковаться и нарабатывать навык.
Давайте приступим к изучению этой увлекательной, и одновременно простой, технологии.
Немного теории…
Любая страница состоит из тегов. То есть страница выглядит на самом деле не так как мы привыкли это видеть, а состоит из множества тегов, каждый из которых, играет определенную роль.
Это похоже на большую стену из кирпичиков. Если все кирпичики на ней положены аккуратно, то и вся стена выглядит красиво. Поэтому при написании структуры страницы необходимо уделять внимание каждому тегу, потому что он является "кирпичиком" для нашей будущей страницы.
Но что такое тег в HMTL?
Это элемент HTML страницы, который так или иначе влияет на отображение и разметку страницы. На словах понять это достаточно сложно, поэтому необходимо сразу все смотреть именно на практике и привыкать к коду. Посмотрите на изображение ниже:
Это структура самой простой страницы. А вот эти повторяющиеся слов в треугольных скобках — это и есть теги. Если Вы откроете свой текстовый редактор и напишете данный код, а затем сохраните в формате HTML, то у Вас получится HTML страничка. Пока что не понятно что такое HTML? 🙂
Из этой структуры можно увидеть те теги, которые должны обязательно присутствовать. Это теги:
- и закрывающий
- и закрывающий
- и закрывающий
Чтобы было более наглядно, я выделил их оранжевым цветом на изображении ниже:
Все, что мы будем писать между тегами
и мы не увидим на нашей странице. Эти теги могут сообщать браузеру о кодировке, о заголовке нашей страницы, здесь могут подключить различные стили, скрипты и так далее. Все это Вы увидите в последующих уроках.А вот все теги, которые мы будем писать между тегами
и , в зависимости от его предназначения, будет влиять именно на структуру нашей HTML страницы.Ну что, стало более понятно что такое HTML? 😉 Но мы не останавливаемся и движемся дальше…
Некоторые теги могут иметь закрывающий тег, а некоторые нет. Например тега
есть закрывающий тег . Как Вы могли уже догадаться, закрываются теги с помощью наклонной черты.Очень важно соблюдать открытие и закрытие тегов. Чтобы не было ошибок. Браузер ошибку может и не показать, а вот структура Вашей страниц будет неправильной и при дальнейшей работе со стилями (где займемся внешним видом) будут большие проблемы. Поэтому если у тега есть закрывающий тег, то он обязательно должен присутствовать в правильном месте.
Давайте на примере разберем как НЕ надо закрывать теги и в каком порядке это необходимо делать. Пример двух тегов:
Правильный HTML КОД
То, что Вы видите выше — это правильный порядок написания закрывающих тегов . Но может быть такая ситуация
ОШИБКА В HTML КОДЕ
Так закрывать теги категорически запрещается !
Практика, чтобы понять что такое HTML…
Поближе узнать, что такое HTML, можно лишь на практике. Для этого можно использовать любой текстовый редактор. Даже блокнот. Но я рекомендую использовать Notepad++, потому что функци для работы с HTML здесь гораздо больше. Скачать его можно по ссылке Скачать Notepad++ . В данном редакторе есть все возможности для создания и редактирования HTML страниц.
Начнем. После открытия программы вы увидите такое окошко:
Чтобы создать HTML страницу, необходимо ввести "тело" страницы в данное окошко. Вы можете скопировать текст ниже и просто вставить его. Но лучше введите все руками. Так Вы сможете быстрее запомните и привыкнете к тегам.
Итак, у вас должно получиться следующее:
Далее необходимо сохранить данную страницу в HTML формате. Для этого нажимаем в меню "Файл", здесь жмем "Сохранить как…". Вводим имя HTML страницы. Я назвал ее index.html. Затем просто сохраняем в удобное место у себя на компьютере. После этого появится подсветка HTML тегов, потому что редактор Notepad++ поймет что это HTML документ. А с подстветкой работать гораздо приятнее.
За появление HTML современный мир должен благодарить одного ученого Европейского совета по ядерным исследованиям (Conseil Européen pour la Recherche Nucléaire, CERN). Зовут этого ученого Тимоти Джон Бернерс-Ли. Первая версия HTML создавалась для целей форматирования научных документов. Именно структурного форматирования без элементов описания цветовых схем, параметров шрифта и т.п. Таким образом, изначально HTML позволял выделять в тексте заголовки, абзацы, списки и им подобные структурные элементы. Результат обработки или “воспроизведения” HTML не должен был зависеть от технических особенностей аппаратных средств его визуализации, поскольку не содержал в себе параметров этой визуализации. Со временем такая особенность языка разметки гипертекста была частично утрачена.
Итак, появление первых версий HTML относят к 1986 году, а в 1991 году HTML был существенно доработан и стал использоваться именно для передачи гипертекста по просторам всемирной паутины. Говорят, что всемирно известная аббревиатура HTML, расшифровывающаяся как Hyper Text Markup Language (язык разметки гипертекста) появилась как раз в начале 90-х годов прошлого века. А теперь небольшой экскурс в родословную языков разметки. Первая версия языка разметки гипертекста HTML была создана на основе стандарта обобщенного языка разметки SGML (Standard Generalized Markup Language), который в некотором роде можно считать прообразом расширяемого языка разметки данных (eXtensible Markup Language). Стандарт XML в наше время приобрел огромную популярность благодаря большому количеству своих расширений, используемых в компьютерных технологиях. Чтобы совсем запутать читателя сразу добавлю, что впоследствии на основе XML был разработан язык разметки гипертекста XHTML (Extensible Hypertext Markup Language), повторяющий по своей сути HTML. В результате мы имеем аббревиатуры SGML, HTML, XML и XHTML, и необходимо понять, кто из них кто. На самом деле все просто: SGML это не что иное, как набор правил, на основе которых можно строить любые языки разметки. HTML и есть один из этих языков - приложение SGML. Другими словами, SGML определяет то, как должны выглядеть элементы разметки, а HTML - какие именно должны быть элементы и как они должны интерпретироваться браузерами. XHTML, в свою очередь, является приложением XML, а сам XML ни что иное, как упрощенный вариант SGML. , не смотря на то, что очень внешне похожи, имеют существенные скрытые отличия, которые, по большей части, заключаются в принципе их обработки.
Теперь вернемся к истории развития HTML. Итак, до 1994 года HTML по-прежнему использовался только для структурной разметки данных, хотя в его составе уже появились теги для выделения текста жирным или курсивом. В том же 1994 году создается организация W3C (World Wide Web Consortium) – Консорциум всемирной паутины, которую возглавляет, что вполне логично, тот самый Тим Бернерс-Ли, и в 1995 году в свет выходит рекомендация HTML 2.0. Создатели HTML уже тогда понимали, что со временем их детище из языка статичной разметки текста эволюционирует в основной инструмент создания динамических интернет ресурсов. Главным дополнением HTML 2.0 стало появление в составе языка форм с наборами пользовательских элементов управления, которые должны были использоваться для ввода пользователем параметров HTTP запросов.
После выхода второй версии сразу же началась работа над следующим поколением HTML. В 1997 году выходит рекомендация HTML 3.2, которая дополнила язык разметки таблицами, фреймами, изображениями и некоторыми другими важными тегами. Но самым главным достижением 3-й версии является то, что ее авторы вновь вернулись к проблеме визуализации разметки в браузере, вспомнили про то, что HTML должен размечать лишь структуру документа и не должен содержать непосредственно в себе параметры графических стилей отображения элементов в браузере. Результатом их работ над HTML 3.2 стало появление самостоятельного языка CSS (Cascading Style Sheets) – каскадных таблиц стилей, код которого можно теперь подключать к коду разметки HTML и тем самым настраивать внешний вид страницы.
К выходу 4-й версии HTML в 1997 году сотрудники W3C избавили свое детище от тех ненужных элементов, которые с появлением CSS стали устаревшими и компрометировали идею отделения разметки структуры от параметризации представления. Но из-за таких мелочей никто не стал бы городить новую версию. Основное достижение рекомендаций HTML 4.0 – появление объектной модели страницы (Document Object Model, DOM), элементами которой теперь можно было манипулировать посредствам скриптовых языков программирования, исполняемых браузерами. Самым популярным таким языком программирования является JavaScript. HTML плюс DOM плюс JavaScript равно Dynamic HTML или просто DHTML, который ознаменовал прорыв в веб-дизайне. Теперь элементы загруженной интернет страницы могли изменять свой внешний вид в ответ на действия пользователя, а также добавлять новые и удалять имеющиеся элементы. В 24.12.1999 году выходит последняя редакция 4-й версии языка разметки гипертекста – HTML 4.01.
Версия HTML5 до сих пор еще не получила статус официальных рекомендаций W3C, но уже сейчас понятно, что авторы HTML продолжают работать в направлении разработки требований к поддержке объектной модели документа и интерпретации JavaScript. Хотя HTML5 и получит ряд новых тегов, но большая часть рекомендаций все же касается поведения браузера в контексте работы DHTML: появится встроенная поддержка функций перетаскивания элементов (drag-and-drop), возможность рисовать на виртуальном полотне (canvas), управлять просмотром истории, обмениваться сообщениями между страницами, сохранять контекст исполнения и многое другое. Есть надежда, что с выходом новых рекомендаций HTML проблемы отсутствия кроссбраузерности, когда один и тот же JavaScript код исполняется под управлением разных браузеров по-разному, будут постепенно исчезать. Ведь тенденция определять требования к работе с объектной моделью и JavaScript будет сохраняться, а разработчики браузеров будут обязаны (если хотят, чтобы их программными продуктами пользовались) следовать этим требованиям.
Выход HTML5 запланирован на 2014 году. Возможно, к тому времени W3C разработает отдельные рекомендации, касающиеся только программирования на JavaScript, а HTML со временем снова станет исключительно языком разметки структуры документа. Не смотря на то, что сегодня еще только 2012 год, многие уже сейчас поддерживаются наиболее популярными браузерами. Многое, что приходилось веб-дизайнерам раньше делать самостоятельно (тот же drag-and-drop), с выходом HTML5 будет поддерживаться на уровне браузера, и такой ход развития событий не может не радовать. Остается надеяться, что тенденция сохранится.
Начну, пожалуй, с начала..
HTML язык по своей сути не является языком программирования.. он является языком разметки гипертекстовых документов. Иными словами он отвечает за расположение в документе Ваших текстов, рисунков, таблиц.. предназначенных для жизни в сети Интернет. Заставить его посчитать, сколько будет дважды два невозможно, в нем нет логических функций, зато красиво и главное легко выложить информацию о том, что дважды два будет четыре - это запросто. Читается этот язык при помощи знакомых Вам программ, именуемых браузерами (обозревателями), которые "знают" стандартные команды html языка, и "пережевывая" их выводят на монитор компьютера документы в том виде, в котором хочет представить их веб мастер - составитель документа.
Теперь о командах - их называют дескрипторами, но чаще - тегами.
Вернемся к нашей первой страничке.. итак мы написали:
Привет мир!!!
Так вот то что написано между <…> - называют тегами они не видны читателю, заглянувшему на Вашу страницу, зато хорошо видны браузеру, который наткнувшись на тег понимает его как сигнал к тому, что далее будет документ, который необходимо прочитать и вывести на монитор в нужном виде.. а вот тег говорит о том что документ закончился и от него, то бишь браузера, больше ничего не требуется и он может отдыхать с чистой совестью.
Так что же мы написали? и как это читает браузер?
Мысли браузера:
- начало документа.. опять работы привалило..- смотрим словарик английского переводим "голова" …в голове моей опилки не беда!! ... здесь указывается основная служебная информация о документе.. ну и что они там от меня хотят?
- ага и в голове кроме названия больше никаких вздорных мыслей не держим..
- "тело" документа всё что написано ниже выставляем на всеобщее обозрение
Привет мир!!! - как мило! Достали уже!!!
- переносим текст на следующую строчку.. я даже догадываюсь что в ней будет...
Меня зовут (здесь Ваше имя), это моя первая страничка! - ну да так и есть.. ничего пооригинальнее придумать не могут..
- что всё что ли? Больше ничего не отображать?
- ну вот и конец!! Не будить, не кантовать, при пожаре выносить первым!!
Вот так примерно и происходит чтение нашей странички.. Как видите браузер довольно своенравный тип, поэтому команды ему нужно подавать чёткие и ясные, иначе он разругается.. причем в слух.. а по сему запомним следующие вещи:
1) Необходимо раз и навсегда запомнить что если есть открывающий тег <…> то обязательно должен быть и закрывающий
Хотя есть и исключения как например у нас тег
- он закрытия не требует потому что говорит лишь о том, что следует писать с новой строки. Кстати попробуйте добавить еще пару тройку таких же перед строчкой "Меня зовут.." и Вы увидите, что в результате она заметно опустилась вниз.. (Ну естественно в блокноте сохраните изменения, а в браузере нажмите кнопку "обновить")
2) Все документы должны иметь вот такой шаблон кода:
- начало документа- начало головы
- закрытие головы
- начало тела
- закрытие тела
- конец документа
Данные теги являются обязательными! Писать их необходимо всегда для каждой новой странички, и только в таком порядке! Не пытайтесь перевернуть всё с ног на голову..
3) О порядке:
Открывающий и закрывающий тег по типу <…> представляет собой своего рода ёмкость, ящик в который могут складываться другие теги - ящички поменьше.. следовательно, согласно логики документ должен выглядеть так:
<Тег "большой ящик"><Тег "ящик средний">
<Тег "ящик маленький">
содержание
Если писать, например, так:
<Тег "большой ящик">
<Тег "ящик средний">
<Тег "ящик маленький">
содержание
То получится белиберда, которая в голове не укладывается, "большой" уже закрыт, а из него "торчит" "маленький", который заперт в "среднем", а "содержание" рассыпалось везде.. Такое даже человеку трудно представить, что уж там про браузер говорить.. Чётко структурируйте код Вашей странички иначе ничего работать не будет..
Ну вот мы научились писать простой текст, начало положено! в следующей главе я расскажу о том, что с ним можно сделать..
При написании сайта создайте папку в любом удобном месте на Вашем жёстком диске, называйте как угодно, лишь бы понятно было.. в эту папку сохраняете Ваши странички, присваивая им осмысленные имена.. варианты типа ааа.html, 123.html приведут к беспорядку и путанице… На данном этапе этот совет не покажется дельным, но в дальнейшем это значительно облегчит Ваш труд. Представьте к примеру хотя бы 20-30 таких файлов названия которых нужно держать в голове, чтобы связать их перекрёстными ссылками. Порядок, прежде всего!
При написании кода советую придерживаться "хорошей манере письма", то есть писать теги "лесенкой" по мере вложенности одного тега в другой. Со временем Вы поймёте что читать код написанный вот так:
Привет мир!!!
Меня зовут Карлсон, это моя первая страничка!
Значительно легче, чем так:
Привет мир!!!
Меня зовут Карлсон, это моя первая страничка!
И уж тем более чем вот так:
Меня зовут Карлсон, это моя первая страничка!
Хоть это и дело привычки.. всё же лучше привыкнуть писать "разборчиво".
И переводится, как «язык разметки гипертекста». Гипертекст – это специальный метод навигации по интернет-страницам, реализованный в виде гипертекстовых ссылок. Нажимая по этим ссылкам, вы можете с легкость перемещаться по структуре сайта. Переходы при этом происходят не линейно, т.е. у вас всегда есть возможность переходить на любую страницу сайта, ссылка на которую видна в данный момент.
Под разметкой понимаются некоторые правила и свойства, которыми наделены элементы страницы. Они реализованы в виде так называемых тегов. Например, чтобы указать, что определенный текст на странице должен располагаться по ее центру, его можно пометить с помощью тега center. Увидеть HTML-код конкретной страницы можно через его контекстное меню. Например, для доступа к этому коду в браузере Firefox необходимо нажать правой кнопкой в пределах страницы и выбрать пункт «Исходный код страницы».
Как работает HTML-код?
HTML-код представляет собой набор коротких тегов, с содержащимися в них элементами страницы. Весь этот код хранится в файле с расширением.html или.htm. При открытии такого файла в браузере код интерпретируется им, а в окне программы выдается страница в готовом виде. Зная язык разметки HTML, создать собственную страницу может практически любой человек.Какие бывают теги?
Теги представляют собой отдельные конструкции внутри HTML-кода. Это обычный текст заключенный внутрь угловых скобок «». Теги вы можете увидеть в HTML-коде практически любой страницы. Сами по себе теги на страницах не отображаются, на них выводится конкретный элемент, который закодирован с помощью тегов. Например, если на странице присутствует картинка, значит ее HTML код содержит в себе тег img.Ограничения HTML
Несмотря на то что HTML код позволяет построить довольно качественную гипертекстовую страницу, он имеет свои ограничения. Страницы, содержащие исключительно такой код являются статичными, т.е. в них отсутствует динамика, специальные эффекты и другие возможности. Но они могут быть привнесены с помощью других языков, например Java Script. Подавляющее большинство современных сайтов создаются с использованием дополнительных языков, которые делают их более живыми и интерактивными.Здравствуйте друзья. Этой статьей я хочу начать серию уроков и материалов посвященных языку программирования языку разметки гипертекста HTML.
Данный цикл статей будет пополняться по 1-му уроку каждую неделю. В них я буду подробно описывать конкретные технические моменты касающиеся самого языка и его взаимодействия с другими технологиями т.к. в нашем большем и могучем вебе все существует и работает в комплексе. Ну что-же, давайте же начнем первый урок?
Итак, начнем как положено с определения дабы внести ясность того с чем предстоит работать и что изучать.
Что же такое HTML?
HTML ("HyperText Markup Language" ) - это язык разметки гипертекста. Хорошо, определение классное, но что же это за разметка, и какого такого гипертекста? Ну давайте по порядку. Прежде всего в данном случае мы размечаем текст, который соответсвенно мы сначала печатаем, неважно где главное,что этот текст иметься у нас на компьютере. Что подразумевает собой разметка текста? Ну тут просто, это банальное его форматирование, как например тут:
Хммм... почему я с краю? Зачем меня туда засунули, А?
Ооо какой я ваажный, только немного жирный.
Не жизнь а одна черная полоса
- И так далее.
Это как раз и есть пример той самой разметки, с этим разобрались. А что же такого гипертекстового в нем в этом тексте и HTML? Ну начать нужно, наверное, с истории самого языка:
Далеко-далеко в 1986 годах...
Думали я пойду все это рассказывать? Хе-е... я лучше в конце поделюсь с вами ссылкой на материал, чтобы при желании вы могли более подробно ознакомиться с его историей. Статья не резиновая, а краткость сестра таланта... да-да.
Почему же его называют язык гипертекстовый? Потому что позволяет связывать в единую сеть множество документов в сети интернет посредством гиперссылок. Думаю объяснять вам, что такое гиперссылки я не буду, вы же как-то перешли на мой блог нажав на подобную надпись .
Продолжим...
Что такое теги в HTML
Тэги-это метки в коде страницы, которые используются для указания браузеру, как он должен показывать ваш web-сайт.
Все тэги имеют одинаковый формат: они начинаются знаком «<» и заканчиваются знаком ">".
Как правило, все теги имеют 2 формата написания — открывающий тег : и закрывающий : . Различие в том, что в закрывающем имеется слэш «/».
Всё содержимое, помещённое между открывающим и закрывающим тэгами, является содержимым тэга.
В HTML также имеются тэги, которые являются и открывающими, и закрывающими. Эти тэги не содержат в себе текст, а являются метками, например, перенос строки выглядит так:
.
Итак, кратко мы осветили, что же такое HTML. Так как же вам начать изучать его? Для этого необходимо изучать и писать
HTML — это тэги, и ничего кроме тэгов. Для изучения HTML нужно изучить различные тэги и пробовать создавать с помощью них веб страницы.
В дальнейшем мои статьи на данную тему помогут вам в этом. Ох чуть не забыл... вот обещанная история .
сайт Права на контент защищены.Статьи по теме
