Что такое хтмл

Всем привет! Рад видеть Вас на страницах блога smarticle.ru. Второй урок мы посвятим вопросу – что такое HTML и как с ним работать. В нем вы узнаете об особенностях самого популярного языка веб-программирования и наглядно поймете его главную суть.

От того как вы его усвоите вам будет легче двигаться вперед и тогда вы сможете без труда (хотя нет, потрудиться все таки придется) взяться за покорение более сложных языков создания сайтов, например того же PHP. Итак давайте приступим к делу.

Что такое Html

HTML (hypertext markup language) – в обычной жизни язык гипертекстовой разметки. Язык стандартной разметки интернет документов во Всемирной паутине. Это один из самых популярных языков создания сайтов. Он же считается самым легким в плане загрузки в браузерах.

что такое html

В нем нет никаких сложных «замутов» как у PHP, который прежде чем вывести страницу в браузере, сначала делает запрос в базу данных MySql, а потом только выводит содержимое пользователю. Долгие словесные прелюдии о том, как он создавался рассказывать не буду, потому как долго и не интересно.

Возможно вас заинтересует заметка о том, как исправить ошибку для связи с базой данных MySql

По всем этим моментам — великая Википедиа вам в помощь. Мы же хотим научиться быстро создавать сайты, ведь так? Отлично! Тогда давайте двигаться дальше и постигать все тонкости этой веб науки.

Основы языка HTML. Понятие тега

Без знания твердой базы никуда не денешься, «мат.часть» («фундамент» любого предмета) еще никто не отменял. И мы не будет отступать от традиций и правил.

Основы языка HTML составляют теги, а если быть более точным то набор тегов. Они обозначаются вот таким образом <тег>. Теги всегда парные и изображаются вот так

Каждый из них выполняет строго определенную функцию для отображения в браузерах.

Одни выводят на экран картинку, другие ссылку, третьи отвечают за абзацы, четвертые делают таблицу и так далее. Внутри них мы можем писать любой текст. Я люблю их называть контейнерами, для наглядности, так сказать. Но существуют также и одинарные, их мы изучим в следующих уроках.

И еще уясните для себя один важный момент. В данном языке действует принцип Парето, т.е как и в любой сфере жизни, деятельности, да где бы то ни было, существует правило 80/20.

О чем это говорит? Это говорит нам, что 20% (в нашем случае это html) языка делают 80% основной работы. Логика в том, что все теги учить не обязательно, поскольку многие из них просто не используются или применяются очень редко. Так что в наших уроках мы делаем упор на самых частых и важных. И с этим вы справились прекрасно!

Структура HTML документа

Структура любого html документа выглядит следующим образом

Теперь давайте подробнее распишем каждый пункт:

Что такое Doctype и его значения

Элемент doctype используется для указания типа нашей веб страницы. Это так называемое «объявление типа документа» или Document Type Declaration.

Этот тег должен всегда находиться на первом месте на каждой странице. Он — ключевой компонент web-страниц, претендующих на соответствие стандартам: без него ваш код и CSS не пройдут проверку валидатором.

Валидатор веб документов – это компьютерная программа, которая проверяет соответствие какого-либо документа, потока данных, или фрагмента кода определённому формату, проверяет синтаксическую корректность документа или файла (по данным Википедии).

Выделяют несколько значений Doctype:

  1. Strict (строгий)
  2. Transitional (переходный)
  3. Frameset (с фреймами)

Я использую второй вариант. С ним удобнее всего работать, поскольку не ограничивает разработчика. У читателя возникает путаница, так в чем их разница и какой лучше всего использовать?

Объясню в чем их разница. У transitional версии нет строгого соответствия стандартам W3C валидации (или по-русски, проверки), т.е браузер одинаково будет отображать содержимое веб документа, даже если в нем присутствуют устаревшие, не рекомендуемые и другие нестандартные вариации кода. А вот Strict версия точно придерживается всем стандартам, т.е на практике если вы где-то в коде забыли поставить соответствующий символ (например слэш /), то при проверке вам будет дано предупреждение.

Вот как выглядит веб документ, использующий strict версию:

Я же советую использовать второй вариант и не париться, так как он самый удобный. Теперь мы рассмотрим другие составляющие нашей страницы.

— это основной «контейнер» где будут располагаться все наши теги. Самый главный «родитель» веб страницы.

— или «головной» тег, в нем располагаются самые важные теги, которые объясняют браузеру, что нужно проводить на странице и какие механизмы запускать. Он определяет веб документ и его содержимое. В него часто выносят различные скрипты, которые запускают различные фишки на странице и там же находится важный «контейнер» для SEO раскрутки – тег title

— важный тег для продвижения. Именно в нем содержится ключевая фраза, которая будет характеризовать все содержимое статьи. Отнеситесь к названию заголовка предельно внимательно. Сэкономите свои нервы и бюджет.

— этот элемент отвечает за тип контента, который будет размещен на сайте и его правильную кодировку, чтобы пользователи не видели не «каракули» и «кракозябры» и знаки вопроса, а только текст. В нем также присутствуют такие атрибуты как description, отвечающий за краткое описание статьи, то что будут видеть пользователи в результатах поиска, после названия статьи, так называемый «сниппет» поисковой выдачи и keywords — ключевые слова, которые встречаются в тексте и которые помогают в продвижении. Хотя этот фактор уже не играет роли, но им пренебрегать не стоит.

Как работают сайты

А теперь давайте взглянем, как работают сайты на html и не только, чисто технически. Представим наш интернет в виде огромного количества компьютеров, объединенных между собой в сети. Каждый компьютер имеет свой уникальный ip адрес, на котором хранится большое количество страничек. Это может быть несколько сотен тысяч страниц. Крупные сайты с миллионной посещаемостью могут иметь и не один такой сервер.

У каждого такого сайта есть свое уникальное название, как например www.smarticle.ru

Так вот чтобы наш браузер нашел этот сайт, есть еще один связующий сервер, называется он DNS (Domain Name Server). Сначала этот запрос посылается ему, а уже он ищет тот компьютер в сети интернет, где находится наша страничка, и если он ее нашел, то отправляет пользователю, т.е нам с вами в браузер.

Крупные сайты, использующие PHP, сначала обращаются к базе данных, в ней ищут нужный веб-документ и затем также отправляют посетителям. Схематично это можно представить так

Упрощенная схема работы интернета

На этом урок завершен. Для любителей посмотреть, записал видеопрезентацию, чтоб еще раз все улеглось по полочкам. Ставим лайки, репосты, делимся в социальных сетях полезным материалом.

smarticle.ru

Немного теории…

Любая страница состоит из тегов. То есть страница выглядит на самом деле не так как мы привыкли это видеть, а состоит из множества тегов, каждый из которых, играет определенную роль.

Это похоже на большую стену из кирпичиков. Если все кирпичики на ней положены аккуратно, то и вся стена выглядит красиво. Поэтому при написании структуры страницы необходимо уделять внимание каждому тегу, потому что он является "кирпичиком" для нашей будущей страницы.

Но что такое тег в HMTL?

Это элемент HTML страницы, который так или иначе влияет на отображение и разметку страницы. На словах понять это достаточно сложно, поэтому необходимо сразу все смотреть именно на практике и привыкать к коду. Посмотрите на изображение ниже:

Это структура самой простой страницы. А вот эти повторяющиеся слов в треугольных скобках — это и есть теги. Если Вы откроете свой текстовый редактор и напишете данный код, а затем сохраните в формате HTML, то у Вас получится HTML страничка. Пока что не понятно что такое HTML? 🙂

Из этой структуры можно увидеть те теги, которые должны обязательно присутствовать. Это теги:

  • <html> и закрывающий </html>
  • <head> и закрывающий </head>
  • <body> и закрывающий </body>

Чтобы было более наглядно, я выделил их оранжевым цветом на изображении ниже:

Все, что мы будем писать между тегами <head> и </head> мы не увидим на нашей странице. Эти теги могут сообщать браузеру о кодировке, о заголовке нашей страницы, здесь могут подключить различные стили, скрипты и так далее. Все это Вы увидите в последующих уроках.

А вот все теги, которые мы будем писать между тегами <body> и </body>, в зависимости от его предназначения, будет влиять именно на структуру нашей HTML страницы.

Ну что, стало более понятно что такое HTML? 😉 Но мы не останавливаемся и движемся дальше…

Некоторые теги могут иметь закрывающий тег, а некоторые нет. Например тега <body> есть закрывающий тег </body>. Как Вы могли уже догадаться, закрываются теги с помощью наклонной черты.

Очень важно соблюдать открытие и закрытие тегов. Чтобы не было ошибок. Браузер ошибку может и не показать, а вот структура Вашей страниц будет неправильной и при дальнейшей работе со стилями (где займемся внешним видом) будут большие проблемы. Поэтому если у тега есть закрывающий тег, то он обязательно должен присутствовать в правильном месте.

Давайте на примере разберем как НЕ надо закрывать теги и в каком порядке это необходимо делать. Пример двух тегов:

То, что Вы видите выше — это правильный порядок написания закрывающих тегов. Но может быть такая ситуация

Так закрывать теги категорически запрещается!

Практика, чтобы понять что такое HTML…

Поближе узнать, что такое HTML, можно лишь на практике. Для этого можно использовать любой текстовый редактор. Даже блокнот. Но я рекомендую использовать Notepad++, потому что функци для работы с HTML здесь гораздо больше. Скачать его можно по ссылке Скачать Notepad++. В данном редакторе есть все возможности для создания и редактирования HTML страниц.

Начнем. После открытия программы вы увидите такое окошко:

Чтобы создать HTML страницу, необходимо ввести "тело" страницы в данное окошко. Вы можете скопировать текст ниже и просто вставить его. Но лучше введите все руками. Так Вы сможете быстрее запомните и привыкнете к тегам.

Итак, у вас должно получиться следующее:

Далее необходимо сохранить данную страницу в HTML формате. Для этого нажимаем в меню "Файл", здесь жмем "Сохранить как…". Вводим имя HTML страницы. Я назвал ее index.html. Затем просто сохраняем в удобное место у себя на компьютере. После этого появится подсветка HTML тегов, потому что редактор Notepad++ поймет что это HTML документ. А с подстветкой работать гораздо приятнее.

Сейчас можно открыть этот файл в любом браузере. И если Вы в своем браузере увидели такую вот картину:

То необходимо дописать после закрывающего тега </title> вот такую строчку:

И убедиться в том, что в текстовом редакторе выбрана кодировка UTF-8 (без BOM):

И тогда Вы увидите следующую страничку в своем браузере:

Видео урок — что такое HTML? (практика)

Если при прочтении Вам было тяжело, то посмотрите данный видео урок:

Вывод

Замечательно, у нас получилась первая HMTL страничка. Если же что-то пошло не так, то обязательно повторите все шаги и убедитесь в том, что Вы все сделали точно также. Теперь у Вас сложилось первое впечатление о HTML и что это такое.

Понравилась статья — расскажи друзьям! 🙂

www.sitehere.ru

Гипертекстовый язык разметки (HTML) — это тип компьютерного языка, используемый для создания страниц, которые могут быть размещены в Интернете или отправлены по электронной почте. Хотя для многих людей это может показаться сложным, он всё же считается относительно простым языком. Все текстовые, графические и дизайнерские элементы страницы, созданные на этом языке, «помечены» кодами, которые инструктирует веб-браузер или программы электронной почты, как отображать эти элементы.

Теги также предоставляют информацию о макете и форматировании, так что веб-страница или электронная почта будут выглядеть как можно ближе к тому, как её намеревался увидеть дизайнер. Для начинающего дизайнера веб-сайта или любого другого, кто должен знать определенный код или хочет узнать, как создать весь сайт, существует множество программных утилит, программ и веб-сайтов, которые могут помочь ему или ей написать код HTML.

Что такое HTML?

Структура

HTML-кодирование структурировано как дерево, причем каждый отдельный тег вложен в него. В большинстве случаев для каждого элемента форматирования требуется начальный тег и конечный тег, и разные теги не должны перекрываться. Это то, что подразумевается под «вложенными»; если тег 2 открывается после тега 1, то сначала следует закрыть тег 2, чтобы элемент форматирования тега 2 был полностью заключен в тег 1. Элементы — это отдельные компоненты, составляющие код, и включают открывающие и закрывающие теги и содержимое между ними. Атрибуты предоставляют дополнительную информацию об элементе и состоят из атрибута и его значения, связанных значком равенства.

Чтобы создать элемент HTML, пользователь создает тег, который запускается и заканчивается угловыми скобками и помещает его перед текстом, который необходимо отформатировать. Код — обычно одна или несколько букв, цифр, слов и/или символов — внутри угловых скобок и указывает, что такое элемент, и какие есть атрибуты, которые должны иметь контент, например его размер, шрифт или другие характеристики. Чтобы завершить форматирование, пользователь набирает первую угловую скобку, затем обратную косую черту, затем повторяет код элемента и закрывает скобку. Например, <title> <strong> Что такое HTML? </ Strong> </ title> — это код, используемый для форматирования заголовка этой статьи; тег элемента «strong» вложен в тег «title».

Типы кодов

Существует много кодов, позволяющих выполнять различное форматирование текста, включая курсив, таблицы, абзацы и гиперссылки на веб-страницы. Коды также могут указывать браузеру или электронной почте, как отображать или использовать другие элементы, такие как изображения, графику, видео и звук. Другие типы кодов без угловых скобок могут использоваться для создания знаков препинания, диакритических знаков и других символов, которые могут отображаться в тексте. Хотя все веб-браузеры и многие почтовые программы используют HTML, каждый из них может интерпретировать и отображать код немного по-другому, и разработчики часто должны учитывать эти варианты при создании веб-страницы.

Развивающийся язык

С момента разработки HTML в начале 1990-х годов британским ученым-программистом Тимом Бернерсом-Ли было много изменений и версий. Эти версии поддерживаются консорциумом World Wide Web (W3C) с 1996 года. В январе 2008 года рабочая группа, разрабатывающая эту спецификацию, опубликовала первый публичный рабочий проект HTML 5. Он всё еще находится в разработке с 2011 года, и ожидается, что этот пересмотр резко изменит разработку приложений для Интернета. Он вводит ряд новых элементов, в том числе для структуры сайта, интерактивности и поддержки аудио и видео, а также новых атрибутов.

Просмотр кода веб-страницы

Код, используемый для создания любой веб-страницы, можно увидеть, переместив браузер на страницу, а затем выбрав правильный вариант в меню браузера. В большинстве браузеров пользователь может щелкнуть по меню «Просмотр» и выбрать опцию, например «источник», «источник просмотра» или «источник страницы». Это приведет к появлению всплывающего окна, и он покажет код, который использовался для создания этой веб-страницы.

Важно отметить, что не весь контент, найденный на всех веб-страницах, написан в HTML. Расширяемый язык разметки (XML) и расширяемый язык разметки гипертекста (XHTML) — это другие типы языков разметки, используемых в веб-разработке. Кроме того, таблицы стилей, такие как каскадные таблицы стилей (CSS), используются для прикрепления стилей к документам HTML. Языки, такие как Flash® и Java®, используются для создания интерактивного контента. Для добавления определенных функций на веб-сайт могут использоваться и многие другие языки программирования.

По сравнению с HTM

Практически говоря, между HTM и HTML-расширениями мало различий, поскольку большинство из них читаются как HTML-файл. Причиной было два разных расширения, чтобы начать с того, что некоторые типы компьютеров, например те, которые работают в 16-разрядных системах DOS или Windows® 3, не могли читать четыре символьных расширения и поэтому нуждались в трехсимвольном HTM-расширении. Большинство систем, которые могут читать четыре символьных расширения, автоматически запрограммированы на распознавание HTM-файлов в виде файлов HTML, хотя пользователям компьютера иногда может понадобиться конвертер для изменения файла из HTM в формат, который распознает система.

mega-obzor.ru

Структура HTML-документа

M в аббревиатуре HTML означает «mark up» – размечать.

Текст размечается тегами, которые являют собой ключевые слова языка, заключенные в угловые скобки «<» и «>».

Чаще их употребляют парами, чтобы отметить начало и конец некоторого куска текста.

Отмечают же его для того, чтобы браузер показывал текст на экране в заданном тегами виде.

Закрывающий тег отличается от открывающего наличием косой черты «/».

Некоторые теги имеют атрибуты, которые уточняют правило отображения содержимого. Атрибуты могут указываться только в открывающем теге.

Естественно, нельзя обойтись без комментариев. Они служат для удобства разработчика, для пояснений. Комментарии не обрабатываются браузером и не отображаются, но они загружаются вместе со всем документом и влияют на время загрузки. Поэтому, добавляя комментарии, надо придерживаться «золотой середины».

Комментарии заключаются между фрагментами <!— и —> и могут занимать несколько строк.

Общий вид HTML-документа:
<!DOCTYPE html> <html> <head>  Заголовок HTML-документа (не отображается на экране) </head> <body>  Тело HTML-документа (отображается на экране)  <!-- Это комментарий  для внесения пояснений в HTML-документ --> </body> </html>

<!DOCTYPE html>

Первый тег <!DOCTYPE> – это идентификатор применяемого стандарта HTML. В приведенном примере задано соответствие последнему стандарту HTML5.

подробнее о !DOCTYPE…

Информация в заголовке <head>

Контейнер <head> содержит информацию для браузеров и поисковых систем.

подробнее об информации в контейнере <head>…

htmlweb.ru

You May Also Like

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.