Что такое HTML и для чего он предназначен - 3.7 out of 5 based on 3 votes
Прежде чем приступить к изучению , предлагаю рассмотреть, что такое html и для чего он предназначен.
HTML расшифровывается как, Hyper Text Markup Language, что можно перевести как язык гипертекстовой разметки. При помощи данного языка создаются интернет страницы.
HTML не является языком программирования. Он предназначен для разметки текстовых документов. Т. е. по большому счету с помощью его мы осуществляем форматирование текста.
И так каким же образом при помощи языка HTML мы можем редактировать текст? Дело в том, что язык ХТМЛ состоит из тэгов (tags). Каждый тэг определяет, каким образом будет выглядеть текст на вашей страничке.
Ели сказать по другому то каждый тег дает определенную команду вашему браузеру (программе, с помощью которой вы просматриваете интернет странички), браузер понимает эту команду и выводит вам на экран уже готовый текст, отформатированный определенным образом.
Поэтому сам код вы не видите, браузер на экран вашего монитора выводит уже готовый отформатированный текст и графику. Если же вы хотите увидеть сам html код и теги, с помощью которых происходит форматирование текста, который Вы сейчас читаете, то пройдите в вашем браузере Internet Explorer в пункт меню > вид и из раскрывающегося списка выберите пункт > источник. Смотрите на рисунок.
В результате откроется окно, содержащее код. Похожий на тот который вы можете наблюдать на второй картинке. Можете прокрутить и посмотреть этот код, в основном он состоит из тэгов, внутри которых в большинстве случаев имеется текст. Таким образом, не углубляясь в подробности можно сказать, что каждый тэг определяет где, как, каким шрифтом, каким цветом будет выглядеть ваш текст.
Но на самом деле ХТМЛ теги могут не только форматировать текст, с помощью них вы можете вставлять изображение на страницу, создавать таблицы, создавать ссылки и многое другое.
Каждый тег выполняет свои определенные функции и вам для того чтобы научится создавать веб страницы необходимо знать для чего предназначен тот или иной тег. Я думаю, что теперь Вы немного поняли, что такое html.
Для начала давайте рассмотрим, что представляет из себя тэг. Если сказать уж совсем просто, то теги состоят из обычных английских символов или слов, только эти буквы и слова оформлены определенным образом.
Каждый тег состоит из угловых скобок, < > внутри которых помещены определенные символы. Большинство из них состоят из открывающихся и закрывающихся.
Например тег - открывающий, а - закрывающий. Как вы видите, они отличаются наличием в закрывающем символа слеш /. Если между ними поместить любое слово, к примеру, привет то, оно будет отображаться жирным шрифтом. Все что заключено в угловые скобки, в данном случает не выводится на экран, а является своеобразной командой для браузера, что слово, которое заключено между этими тегами нужно выводить жирным шрифтом.
Тэгов естественно много и каждый из них выполняет свои определенные функции. Примерно по такому принципу работают и все остальные теги и весь ХТМЛ в целом. Когда вы запрашиваете какой – либо документ из интернета ваш браузер загружает html код интерпретирует его должным образом и выводит вам на экран уже готовый отформатированный текст, графику, таблицы и т. д.
Цель данного урока была в том чтобы дать вам представление о том что такое HTML, в следущих уроках мы начнем изучение этого языка разметки. Для того чтобы вам было проще усвоить материал рекомендую начать изучать уроки с наиболее простых, плавно переходя к более сложным, например в следующей последовательности: в начале изучить , как документе, при помощи чего задаются и производится , научиться задавать и т. д. к более сложным.
Для создания ХТМЛ страниц можно использовать специальные программы, такие как , а можно создавать страницы при помощи простого текстового редактора, который имеется в любой версии Windows.
В этой статье мы рассмотрим вопрос, что такое html, рассмотрим историю его развития. Поговорим о том, как создавать сайт и вообще сложно ли это. Итак, начнем
1. HTML код - что это такое простыми словами
HTML (англ. "hyper text markup language" - язык гипертекстовой разметки) - это специальный язык разметки, который применяется при создании сайтов в интернете.
Браузеры прекрасно понимают html и могут интерпретировать его в понятном виде. Вообще любая страница сайта - это html-код, который браузер переводит в дружественный вид для пользователя. Кстати, код любой страницы является доступным для всех. Для его просмотра щелкните правой кнопкой мыши и выберите посмотреть исходных код или нажмите на клавиатуре CTRL+U:
Язык разметки html получил широкую популярность. На данный момент - это единственный язык, с помощью которого создается разметка сайта. Я хочу подчеркнуть тот факт, что именно разметка. Так называемый "движок" создается на другом языке программирования (чаще всего php), который позволяет создавать интерактивные страницы (html этого не позволяет).
Внимательный читатель обратит внимание, что далеко не у всех страниц на конце в интернете расширение.html. К примеру есть страницы /catalog/list (вообще без расширения). Это неправильно, но браузер сможет понять что это веб-документ и корректно его отобразить.
2. Пример и структура html кода
Ниже приведен пример со структурой типичной html страницы. Обратите внимание, что html код делится на две области: заголовок и тело страницы.
<span>Название страницы </span> ... Заголовочные теги (подключение стилей, скриптов) ... ...Шапка сайта......... Основная часть сайта...... ... ...
Этот код можно редактировать в любом текстовом редакторе. Чаще всего для разработки html сайта используют notepad++ (продвинутый редактор, который выделяет теги и показывает ошибки). Но лучше использовать более продвинутые редакторы для работы с HTML-разметкой .
Разметка состоит из html тегов (иногда пишут "тэг").
3. Что такое HTML тег
HTML тег - это один из элементов верстки html , который нужен для структуры. Теги имеют открывающий знак < и закрывающий > .
Например,
Запрещено закрывать теги не по порядку их открытия. Например
Более подробно про создание html страницы читайте в статье.
На каждом сайте разный внешний вид и функционал, но с чем это связано и на каком языке прописывается страничка? Для всего этого используются каскадные таблицы стилей и язык HTML. Вы можете сами взглянуть на код данного языка, если проинспектируете объекты в браузере. Конкретно о том, что такое язык HTML мы поговорим в этой статье.
Наша статья ориентирована в основном на новичков, поэтому надеемся на понимание постоянных читателей блога!
Пост будет разбит на такие пункты:
Что такое HTML страница
Язык разметки под названием HTML используют для оформления всех элементов страницы, в том числе таблиц, изображений и текста. Вы можете ознакомиться с кодом и попытаться в него вникнуть, если используете любой современный браузер, просто нажмите правой кнопкой мышки на страничке и в меню нажмите на строчку «исходный код страницы» или «HTML код». После этого вы увидите что-то наподобие редактора, в котором много непонятных надписей и символов, именно это код языка HTML.
Каждый документ WWW имеет форматированный и красиво оформленный текст, а также гиперссылки и изображения, которые подбирает владелец сайта. Для того чтобы проводить работу с данными элементами, программисты создали язык под названием HTML (Hyper Text Markup Language), что в переводе означает – язык разметки гипертекста. Каждый браузер по-своему работает и отображает язык HTML, поэтому в разных браузерах он отображается по-разному, особенно в старых версиях Internet Explorer.
Все документы HTML схожи – это стандартный текстовый файл, который имеет теги разметки данного языка вместе с текстами, которые будут читать посетители сайта. С помощью тегов создается страничка, и именно их считывает браузер, когда загружает ее. Благодаря определению тегов и их оформлению можно расположить статью или другой материал в определенном месте страницы, добавить графические файлы и фотографии, а также гиперссылки на другие страницы сайта. Изначально HTML файл не является web документом, он им становится лишь после считывания браузером.
Разумеется, у стандартного HTML кода есть свои недочеты и минусы. Придется сильно постараться, чтобы расположить абзацы с текстом на странице, ведь для проведения разметки и всего остального нужно прописывать те или иные свойства для всего текста, причем для каждого отдельно взятого абзаца. Если на вашем сайте 50 страниц и на каждой по 10-20 абзацев – придется очень долго оформлять текст, причем каждый раз вставлять одни и те же теги. Это не только утомляет владельца сайта, но и негативно сказывается на весе страниц сайта. Именно по этой причине в дальнейшем создали каскадные таблицы стилей, их коротко называют CSS, что означает Cascading Style Sheets, благодаря ним можно быстро оформить текст. Можно назначить один тег и задать ему определенные характеристики, например, цвет текста, размер, шрифт и так далее, а потом применить к абзацам. При этом файл с таблицей стилей хранится отдельно, его можно загрузить на один сайт или сразу на несколько. Далее прописываются основные элементы страницы на HTML, и вставляется текст, а потом подключается CSS и весь текст приобретает нужное вам оформление. Также благодаря этому снижается вес страниц, что очень важно.
Использование CSS целесообразно, если на сайте очень много страниц, которые будут иметь одинаковое оформление. Вы можете задать определенное форматирование текста для всех абзацев, если пропишете несколько строчек в документе с CSS кодом. Во время создания сайта верстальщики создают основной макет на языке HTML, ориентируясь на макет, созданный в Photoshop. Но после этого сайт выглядит незаконченно, нужно создать привлекательный внешний вид, и достигается это каскадными таблицами стилей. Научиться этому несложно, если у вас много свободного времени, так как общий внешний вид у всех сайтов примерно одинаковый, вы можете иметь один макет с несколькими блоками и «подгонять» под него остальные сайты. Как правило, каскадные таблицы стилей значительно сложнее CSS, еще сложнее верстать сайт на блоках, а не на таблицах. К тому же на начальных этапах вы можете столкнуться с такой проблемой, как разное отображение сайта в браузерах. Именно для того, чтобы не терять время и зарабатывать на сайтах, созданы CMS – готовые макеты сайтов, которые могут быть бесплатными или платными и иметь определенную систему управления.
Что такое HTML5. Отличия и преимущества
Новый стандарт HTML5 помогает владельцам сайтов и снимает с них обязанность использования формата Adobe Flash, а также других программ. Благодаря данному стандарту можно изменить отображение текста на страничках и упростить введение информации во время заполнения электронных формуляров. Если поделить все новшества данного языка, то можно выделить следующие пункты:
- После захода на сайт люди смогут смотреть видео и прослушивать аудио через браузер, для этого создается отдельная кнопка для воспроизведения.
- Выкладывать новые фотографии через данный язык гораздо проще, можно даже создавать галереи изображений. Вам даже не придется скачивать дополнительное программное обеспечение.
- Можно определить местонахождение текста и отметить текстовые блоки. Также можно прекрасно отформатировать текст, чтобы он был удобен для чтения.
- Если раньше в HTML4 человек замечал ошибку после ввода данных лишь тогда, когда отправлял формуляр – сейчас браузер сразу сообщает об ошибке, если человек неправильно заполняет форму. Это очень удобно для пользователей, потому что не придется несколько раз заполнять одни и те же разделы с данными.
- Ненужно использовать программные модули, так как с помощью HTML5 можно воплотить в жизнь любые задумки относительно сайта. Только если сайт уникальный и нужно придумать что-то особенное, устанавливают дополнительные программные модули.
- Раньше люди не могли нормально просматривать сайт через планшет или смартфон, так как стандарт HTML4 не имеет совместимости с браузерами для мобильных устройств и другими операционными системами. С помощью языка HTML5 создаются страницы, которые идеально считываются со всех устройств на высокой скорости.
Если остались вопросы – пишите их в комментариях, мы с удовольствием на них ответим!
Термин HTML (Hyper Text Markup Language) означает "язык маркировки гипертекстов". Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.
Со времени создания первой версии HTML претерпел некоторые изменения. Как и многое другое в компьютерном мире, версии, или спецификации , HTML оказались пронумерованными. Известны спецификации 2.0, 3.0, 3.2, 4.0 и т.д.
Для освоения HTML по этому Руководству Вам понадобятся две вещи:
Любой браузер , т.е., программа, пригодная для просмотра HTML-файлов (Internet Explorer);
Любой редактор текстовых файлов, поддерживающий русский язык в выбранной кодировке. Если на компьютере установлен Windows , вполне подойдет Word .
Нужно использовать текстовый редактор для подготовки HTML-файлов, а браузер – как инструмент контроля за сделанным.
2. Первый html-документ
2.1 Как устроен html-документ
HTML-документ – это просто текстовый файл с расширением *.html (Unix-системы могут содержать файлы с расширением *.htmll).
Для удобства чтения введите дополнительные отступы, однако в HTML это совсем не обязательно. Более того, браузеры просто игнорируют символы конца строки и множественные пробелы в HTML-файлах.
Вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками "<" и ">". Такой фрагмент (например, ) называется меткой (по-английски – tag, читается "тэг").
Большинство HTML-меток – парные, т.е. на каждую открывающую метку вида
есть закрывающая метка вида с тем же именем, но с добавлением "/".Метки можно вводить как большими, так и маленькими буквами. Например, метки
, и будут восприняты браузером одинаково.
2.2 Обязательные метки ...
Метка должна открывать HTML-документ. Аналогично, метка должна завершать HTML-документ.
...
Эта пара меток указывает на начало и конец заголовка документа. Помимо наименования документа, в этот раздел может включаться множество служебной информации.
... Все, что находится между метками
и , толкуется браузером как название документа. Internet Explorer , например, показывает название текущего документа в заголовке окна и печатает его в левом верхнем углу каждой страницы при выводе на принтер. Рекомендуется название не длиннее 64 символов....
Эта пара меток указывает на начало и конец тела HTML-документа, каковое тело, собственно, и определяет содержание документа.
< H 1> ... H 1> - < H 6> ... H 6>
Метки вида
(где i – цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня – самый крупный, шестого уровня, естественно, – самый мелкий.Такая пара меток описывает абзац. Все, что заключено между , воспринимается как один абзац.
Метки
иМогут содержать дополнительный атрибут ALIGN (читается "элайн", от английского "выравнивать"), например:
Выравнивание заголовка
по центру
Образец абзаца с выравниванием
Начну, пожалуй, с начала..
HTML язык по своей сути не является языком программирования.. он является языком разметки гипертекстовых документов. Иными словами он отвечает за расположение в документе Ваших текстов, рисунков, таблиц.. предназначенных для жизни в сети Интернет. Заставить его посчитать, сколько будет дважды два невозможно, в нем нет логических функций, зато красиво и главное легко выложить информацию о том, что дважды два будет четыре - это запросто. Читается этот язык при помощи знакомых Вам программ, именуемых браузерами (обозревателями), которые "знают" стандартные команды html языка, и "пережевывая" их выводят на монитор компьютера документы в том виде, в котором хочет представить их веб мастер - составитель документа.
Теперь о командах - их называют дескрипторами, но чаще - тегами.
Вернемся к нашей первой страничке.. итак мы написали:
Моя первая страничка
Привет мир!!!
Так вот то что написано между <…> - называют тегами они не видны читателю, заглянувшему на Вашу страницу, зато хорошо видны браузеру, который наткнувшись на тег понимает его как сигнал к тому, что далее будет документ, который необходимо прочитать и вывести на монитор в нужном виде.. а вот тег говорит о том что документ закончился и от него, то бишь браузера, больше ничего не требуется и он может отдыхать с чистой совестью.
Так что же мы написали? и как это читает браузер?
Мысли браузера:
- начало документа.. опять работы привалило..
- смотрим словарик английского переводим "голова" …в голове моей опилки не беда!! ... здесь указывается основная служебная информация о документе.. ну и что они там от меня хотят?</b> - <i>"название" значит.. это в шапке окна нужно написать его название: </i><br><b>Моя первая страничка </b> - <i>опять чайник тренируется.. </i><br><b> - все название закончилось.. можно идти дальше..
- ага и в голове кроме названия больше никаких вздорных мыслей не держим..
- "тело" документа всё что написано ниже выставляем на всеобщее обозрение
Привет мир!!! - как мило! Достали уже!!!
- переносим текст на следующую строчку.. я даже догадываюсь что в ней будет...
Меня зовут (здесь Ваше имя), это моя первая страничка! - ну да так и есть.. ничего пооригинальнее придумать не могут..
- что всё что ли? Больше ничего не отображать?
- ну вот и конец!! Не будить, не кантовать, при пожаре выносить первым!!Вот так примерно и происходит чтение нашей странички.. Как видите браузер довольно своенравный тип, поэтому команды ему нужно подавать чёткие и ясные, иначе он разругается.. причем в слух.. а по сему запомним следующие вещи:
1) Необходимо раз и навсегда запомнить что если есть открывающий тег <…> то обязательно должен быть и закрывающий
Хотя есть и исключения как например у нас тег
- он закрытия не требует потому что говорит лишь о том, что следует писать с новой строки. Кстати попробуйте добавить еще пару тройку таких же перед строчкой "Меня зовут.." и Вы увидите, что в результате она заметно опустилась вниз.. (Ну естественно в блокноте сохраните изменения, а в браузере нажмите кнопку "обновить")2) Все документы должны иметь вот такой шаблон кода:
- начало документа
- начало головы
- закрытие головы
- начало тела
- закрытие тела
- конец документаДанные теги являются обязательными! Писать их необходимо всегда для каждой новой странички, и только в таком порядке! Не пытайтесь перевернуть всё с ног на голову..
3) О порядке:
Открывающий и закрывающий тег по типу <…> представляет собой своего рода ёмкость, ящик в который могут складываться другие теги - ящички поменьше.. следовательно, согласно логики документ должен выглядеть так:
<Тег "большой ящик">
<Тег "ящик средний">
<Тег "ящик маленький">
содержание
Если писать, например, так:
<Тег "большой ящик">
<Тег "ящик средний">
<Тег "ящик маленький">
содержание
То получится белиберда, которая в голове не укладывается, "большой" уже закрыт, а из него "торчит" "маленький", который заперт в "среднем", а "содержание" рассыпалось везде.. Такое даже человеку трудно представить, что уж там про браузер говорить.. Чётко структурируйте код Вашей странички иначе ничего работать не будет..
Ну вот мы научились писать простой текст, начало положено! в следующей главе я расскажу о том, что с ним можно сделать..
При написании сайта создайте папку в любом удобном месте на Вашем жёстком диске, называйте как угодно, лишь бы понятно было.. в эту папку сохраняете Ваши странички, присваивая им осмысленные имена.. варианты типа ааа.html, 123.html приведут к беспорядку и путанице… На данном этапе этот совет не покажется дельным, но в дальнейшем это значительно облегчит Ваш труд. Представьте к примеру хотя бы 20-30 таких файлов названия которых нужно держать в голове, чтобы связать их перекрёстными ссылками. Порядок, прежде всего!
При написании кода советую придерживаться "хорошей манере письма", то есть писать теги "лесенкой" по мере вложенности одного тега в другой. Со временем Вы поймёте что читать код написанный вот так:
Моя первая страничка
Привет мир!!!
Меня зовут Карлсон, это моя первая страничка!
Значительно легче, чем так:
Моя первая страничка
Привет мир!!!
Меня зовут Карлсон, это моя первая страничка!
И уж тем более чем вот так:
Моя первая страничка Привет мир!!!
Меня зовут Карлсон, это моя первая страничка!Хоть это и дело привычки.. всё же лучше привыкнуть писать "разборчиво".
