Html кратко и понятно
Обновлено: 04.07.2024
HTML (Hypertext Markup Language) - это код, который используется для структурирования и отображения веб-страницы и её контента. Например, контент может быть структурирован внутри множества параграфов, маркированных списков или с использованием изображений и таблиц данных. Как видно из названия, эта статья даст вам базовое понимание HTML и его функций.
Что такое HTML на самом деле?
HTML не является языком программирования; это язык разметки, и используется, чтобы сообщать вашему браузеру, как отображать веб-страницы, которые вы посещаете. Он может быть сложным или простым, в зависимости от того, как хочет веб-дизайнер. HTML состоит из ряда элементов, которые вы используете, чтобы вкладывать или оборачивать различные части контента, чтобы заставить контент отображаться или действовать определённым образом. Ограждающие теги могут сделать слово или изображение ссылкой на что-то ещё, могут сделать слова курсивом, сделать шрифт больше или меньше и так далее. Например, возьмём следующую строку контента:
Если бы мы хотели, чтобы строка стояла сама по себе, мы могли бы указать, что это абзац, заключая его в теги абзаца:
Анатомия HTML элемента
Давайте рассмотрим элемент абзаца более подробно.
Главными частями нашего элемента являются:
- Открывающий тег (Opening tag): Состоит из имени элемента (в данном случае, "p"), заключённого в открывающие и закрывающие угловые скобки. Открывающий тег указывает, где элемент начинается или начинает действовать, в данном случае — где начинается абзац.
- Закрывающий тег (Closing tag): Это то же самое, что и открывающий тег, за исключением того, что он включает в себя косую черту перед именем элемента. Закрывающий элемент указывает, где элемент заканчивается, в данном случае — где заканчивается абзац. Отсутствие закрывающего тега является одной из наиболее распространённых ошибок начинающих и может приводить к странным результатам.
- Контент (Content): Это контент элемента, который в данном случае является просто текстом.
- Элемент(Element): Открывающий тег, закрывающий тег и контент вместе составляют элемент.
Элементы также могут иметь атрибуты, которые выглядят так:
Атрибуты содержат дополнительную информацию об элементе, которую вы не хотите показывать в фактическом контенте. В данном случае, class это имя атрибута, а editor-note это значение атрибута. Класс позволяет дать элементу идентификационное имя, которое может позже использоваться, чтобы обращаться к элементу с информацией о стиле и прочих вещах.
Атрибут всегда должен иметь:
- Пробел между ним и именем элемента (или предыдущим атрибутом, если элемент уже имеет один или несколько атрибутов).
- Имя атрибута, за которым следует знак равенства.
- Значение атрибута, заключённое с двух сторон в кавычки.
Вложенные элементы
Вы также можете располагать элементы внутри других элементов — это называется вложением. Если мы хотим заявить, что наша кошка очень раздражена, мы можем заключить слово "очень" в элемент , который указывает, что слово должно быть сильно акцентированно:
Вы, однако, должны убедиться, что ваши элементы правильно вложены: в примере выше мы открыли первым элемент
. Приведённое ниже неверно:
Элементы должны открываться и закрываться правильно, поэтому они явно располагаются внутри или снаружи друг друга. Если они перекрываются, как в примере выше, ваш веб-браузер будет пытаться сделать наилучшее предположение на основе того, что вы пытались сказать, что может привести к неожиданным результатам. Так что не стоит этого делать!
Пустые элементы
Некоторые элементы не имеют контента, и называются пустыми элементами. Возьмём элемент , который уже имеется в нашем HTML:
Он содержит два атрибута, но не имеет закрывающего тега , и никакого внутреннего контента. Это потому, что элемент изображения не оборачивает контент для влияния на него. Его целью является вставка изображения в HTML страницу в нужном месте.
Данный конспект содержит основную информацию о языке разметки HTML: что такое HTML, зачем он нужен, как используется. Также кратко описана струтктура HTML-документа, список основных тегов с описанием их назначения, перечень параметров данных тегов.
1. Что такое HTML
HTML, он же HyperText Markup Languge - язык разметки гипертекста, используется для описания структуры содержимого веб-страниц, а именно, расположения элементов друг относительно друга, их внешнего представлния, их функций. Элементами веб-страницы могут быть заголовок, боковое меню, окошко поиска, странички с контентом, встроенное видео и т.д. HTML Определяет, как они будут отображаться (шрифт, размер, используемые стили), как они будут расположены на странице, как они будут взаимодействовать (ссылки, выпадающие списки, зависимые поля). Для красивого отображения элементов в HTML и страницы в целом обычно используеттся CSS (Cascading Style Sheets) - документ описания стилей. Также в веб-страницы можно встраивать динамические элементы, например, браузерные игры, перемещаемые пользовалелем окошки, кнопки со сложным поведением и т.д. Все это становится возможным благодаря использованию скриптов, написанных на JavaScript, которые также явно указываются в HTML-документе.
Окончательный облик страницы формируется браузером после парсинга HTML-документа, описывающего эту страницу. В зависимости от браузера разные стили могут отображаться по-разному, а определенные элементы могут не поддерживатся некоторыми (обычно старыми или Explorer) браузерами. Все это надо учитывать при формировании HTML-документа.
2. Базовый синтаксис HTML
Обычно HTML-разметка страницы содержится в файле index.html .
HTML документ состоит из тегов. HTML не чувствителен к регистру в имени тегов!
Теги бывают с содержимым: Содержимое и пустыми:
. Теги можно вкладывать друг в друга:
Внутри тега можно задавать параметры или, что то же самое, атрибуты:
Каждый HTML документ начинается с тега-декларации . Таким образом браузер понимает, что он читает именно HTML. Далее идет корневой тег , в который вложены все остальные теги - . В нем находятся два тега и
Основы html для начинающих, что сейчас должен знать каждый начинающий вебмастер или блогер. Если вы хотите научиться создавать элементарные сайты, понимать сам код, знать, что за чем стоит и должно идти, без знаний основ языка хтмл этого сделать просто невозможно. На своем блоге у меня будет целая цепочка статей, которые я посвящу этой теме от А до Я, опишу каждый тег, который присутствует в документе, что он обозначает и как его правильно использовать.
Говорит браузеру, что все помещенное между этими тегами, должно отобразиться в окне вашего браузера. Вот основные теги, которые могут присутствовать абсолютно в каждом документе. Тег body служит в качестве основного тела страницы, который включает в себя все ее содержимое. Данный тег желательно открывать и в конце документа не забыть закрывать.
Заголовки страницы h1 h2 h3
Поехали дальше, мы видим тег
. Их так же используют в SEO, но это уже немного другая тема. Я обязательно выделю для этого одну статью и дам подробное описание для них, подписывайтесь на обновления блога, чтоб ничего не пропустить.
Если вы пишите основной текст с нового абзаца, вы пишите тег
в начале и закрываете его в конце
. Обозначение абзаца в html равносильно создание нового абзаца в документе MS Word. Больше ничего нового в документ я не добавлял. Но, это еще далеко не все, что должно присутствовать в html документе. Посмотрим на еще один пример, описание будет немного позже.
Основные элементы Head и Title
Как видите, ничего сложного нет. Перед вами самые основные теги, которые должны присутствовать в каждом html документа. Не забывайте закрывать каждый из них, иначе браузер не сможет воспринять полноценную картину кода. Это нужно знать и помнить всегда. Дальше вы уже начинаете вставлять текст, картинки, видео и так далее. Но это уже будет в других статьях.
Редактор Notepad++
Для работы с кодом используйте программку Notepad++. Она бесплатная, найти ее в интернете не составит труда. Очень удобная для восприятия любого кода, так же удобно показывается открывающийся тег и закрывающийся. Поддерживаем синтаксис более 40 языков программирования. Как раз то, что нужно для изучения основ html.
Notepad превышает во всех смыслах обычный блокнот. Для максимального удобства, простоты и учебы данный редактор изначально необходимо установить на компьютер. Самое основное преимущество и удобство, редактор Notepad++ показывает подсказки при написании кода, что делает вашу работу быстрее и качественней в разы.
Элемент DOCTYPE
В каждом документе так же должен быть указан вот такой элемента doctype. Для чего он нужен и что в нем должно быть. Обычно народ сильно не увлекается этими строчками, копируют себе в документы и работают спокойно. Данные элементы говорят браузеру, какая версия html используется в документе, какое описание страницы, какая используется кодировка, какие ключевые слова включены, кто автор и как называется страница.
Ставятся они обычно в самом начале. Существует несколько вариантов и все они отличаются друг от друга, я напишу один пример, который используется чаще всего. Данную заготовку можно использовать как готовый шаблон. Далее будет понятное описание каждой строчки, проблем с этим быть не должно.
! DOCTYPE html "-//w3c//dtd XHTML 1.0 Transitional//EN" "https://www.w3c.org/TR/xhtml1-transitional.dtd" >
meta name = "description" content = "полное описание данной страницы, о чем идет речь. 1-2 предложения" / >
meta name = "keywords" content = "джинсы, купить джинсы, зауженные джинсы, крутые джинсы, мужские крутые джинсы" / >
Информация для чайников
Коротко на понятном языке про основы html: Данная строчка говорит браузеру о том, что данный документ является XHTML версия 1.0, используется английский язык и вся эта каша расположена по данному адресу. Далее в теге meta указываем кодировку, которая используется. Чаще всего используется виндовс 1251.
Далее часто различные конторы по созданию шаблонов, скриптов и так далее. указывают свое название организации или просто имя фамилию и отчество. Не обязательный meta тег, но встретить его можно часто.
Description — затрагивается тема по SEO, один из трех главных тегов, который должен присутствовать абсолютно в каждом документе, данный тег указывает описание страницы. Что написано на этой странице, короткое описание, не больше двух предложений. Тег keywords, так же затрагивается тема по SEO, данный тег является обязательным. В нем пишутся ключевые слова, по которым пользователи интернета будут находить вас через поисковые системы.
В теге title идет название самого документа, его заголовок, который мы видим в браузере. Наверное самый важный тег во всем документе, который больше всего влияет на продвижение страницы. В статье по добавлению и оформлению текста html идет описание данного тега более детально.
Что необходимо запомнить с данного урока про основы html:
- Почти все теги открываются и закрываются;
- Начинается документ с тега ;
- Наличие тега ;
- Наличие тега ;
- Четкая структура html документа.
Все главные страницы всегда должны называться словом index. Так принято и так все привыкли, без разницы какое будет расширение у файла, это может быть и html и php. Называется он всегда только так.
Посмотрите видео про основы html от компании Webformyself.
Язык гипертекстовой разметки, базовые элементы и структура. Все это и многое другое я постараюсь описать на своем блоге. В первую очередь для новичков будет написана полезная информация, предоставлен пример кода и возможность скачать сам пример вместе с готовой страницей.
HTML
Учебник о языке разметки HTML
В данном учебнике мы постараемся расказать об HTML наиболее понятным и простым образом, при этом, не забывая про современные тенденции в верстке сайтов. Поэтому здесь будем рассматривать HTML5, так как на данный момент его рекомендуют и поддерживают многие браузеры, а также, официальный консорциум.
Содержание
HTML (Hyper Text Markup Language, расшифровывается как язык разметки гипертекстовых страниц) — каркас всех современных сайтов.HTML является языком разметки, но не языком программирования. Под языком разметки понимается набор символов созданный с целью передачи информации о строении текста. Это значит, что в отличии от языков программирования, язык разметки только управляет "внешним видом" текста для конечного пользователя.
Когда W3C создавали стандарт HTML, в нём не предусматривалось тегов для форматирования гипертекста - теги показывали только структуру документа, например:
Но потом разработчики браузеров начали добавлять в HTML свои теги, которые им нравились. Например:
Вскоре, количество тегов сильно разрослось.
Также нежелательно было появление в стандарте HTML 3.2 тега (он нужен для изменения цвета, шрифта и размера текста). Представьте себе, что нужно написать страницу, где все заголовки красные. И приходится помимо тегов в заголовке писать ещё тег шрифта с атрибутом цвета.
С HTML4 разделяются форматирование документа и его структура. Теперь в HTML-странице сохраняются только структура страницы (разноуровневые заголовки, абзацы, цитаты, списки), а всё, что относится к форматированию, описывается в CSS. Это удобно, поскольку позволяет быстро менять оформление всего сайта изменением только файла со стилем, и, кроме того, уменьшает длину кода, который нужно написать.
В HTML5 же, была предпринята попытка стандартизации: многие привычные теги (в том числе и выше названный ) осуждаются, все оформление рекомендуется использовать в отдельном CSS-файле, появились новые семантические теги, функции для которых будут добавлены в будущем.
О браузере также стоит сказать несколько слов. Все советуют держать у себя на компьютере набор браузеров: Firefox, Opera, Chrome, Safari и просматривать свои страницы во всех сразу. Правда, функции тегов в разных браузерах отличаются не сильно (а с введением HTML5 - различий в тегах нет). Поэтому учиться можно просматривая свои страницы в одном из них, а уже когда пишете что-то большее — посмотрите, не имеется ли слишком критических различий во всех других. Тем не менее, в современных и наиболее популярных браузерах Firefox и Chrome различия настолько незначительны и касаются в основном старых тегов.
Чтобы создать веб-страницу, нужно создать в файловой системе текстовый файл с расширением .html или .htm. Какое из них выбрать — философский вопрос. .htm — сокращение от .html, что довольно смешно, поскольку .html — это тоже сокращение. Но были времена, когда в некоторых ОС расширение файла могло содержать максимум 3 символа (например, DOS), и страницы гипертекста имели расширение .htm. Теперь можно использовать оба расширения,но лучше всего использовать именно .html
Веб-страницы состоят из гипертекста. Гипертекст отличается от обычного текста тем, что содержит гиперссылки. Они обычно обозначены синим цветом, и позволяют сделать переход в другой гипертекст, или любое другое место (якорь), указанное с помощью URL. Гипертекст состоит из тегов.
URL (Universal Resource Locator) — адрес ресурса, который мы видим в адресной строке браузера.
Тег — это всё, что находится между угловыми скобками. Например . Теги не отображаются браузером, они только задают структуру текста. Теги бывают трёх видов:
- Открывающие
- Закрывающие
- Одинарные.
Открывающие и закрывающие теги всегда существуют парами: открывающий и закрывающий . Закрывающий отличается от открывающего тем, что после угловой скобки говорит браузеру, что в нём содержится код HTML. Тег говорит, что в нём содержится заголовочная информация страницы. Эта информация на самой странице отсутствует. Тег , как уже было сказано, содержит заголовок, который обычно отображается на вкладке. содержит тело, тоесть содержимое страницы.
В HTML существует проблемы с символами сравнения. Чтобы отображать некоторые нестандартные символы, существует понятие специальных символов. Специальные символы в HTML описываются так: &код;. Например:
| Название | Код | Вид |
|---|---|---|
| Менее | < | |
| Амперсанд | & | & |
| Кавычка | " | " |
Здесь я указал только самые-самые нужные. Если вам нужно больше, надо поискать. Можно поискать где-то здесь. То есть то, что мы хотели описать в предыдущем примере, будет выглядеть так:
Одним из обязательных требований для веб-страницы является указывание кодировки. Опять же браузер сам может определить кодировку. Но лучше указывать. Способа есть два:
Оба способа одинаковы. Но второй короче.
Некоторые теги имеют свойства, которые называются атрибутами. Например, почти каждый тег имеет атрибут title. В нём прописывается текст подсказки, которая видна, когда пользователь наводит курсор на элемент тега. Пусть нам нужно написать известное сокращение: HTML. И если пользователи наводят на него курсор, они могут его расшифровать. Это делается просто:
Здесь мы видим, как правильно записывать атрибуты. Название атрибута, затем знак равенства, и значение в двойных кавычках. В стандарте HTML 4.01 нет атрибутов без значений.
Лучше писать все атрибуты и их значения маленькими буквами
Зачем? Ради будущего!
Теперь перейдём к форматированию текста. Форматирование задаёт не так внешний вид, как структуру страницы. Важнейшими тегами форматирования есть абзацы (англ. paragraph) и заголовки (англ. header)
Заголовки бывают шести уровней. Заголовки первого уровня — главные и самые большие, а заголовки шестого уровня даже меньше, чем текст абзацев. Ниже пример использования заголовков:
Эта страница отобразится так:
В этой книге речь пойдет преимущественно о хоббитах, и с ее страниц читатель узнает немало об их . и т. д.
I Долгожданная гостиная
XII Побег к броду
Я здесь пишу и пишу примеры. Не забывайте пробовать что-то сами! Или хотя бы по крайней мере посмотрите как будут выглядеть примеры страниц, которые вам даются, в вашем браузере (а если у вас несколько браузеров, то не забывайте посмотреть как выглядит страница в других!).
К сожалению, браузеры отвергают все символы переноса строки, табуляции, а также лишние пробелы. Поэтому этот стишок отображается в одну или несколько строк (в зависимости от ширины окна). Но есть выход.
Можно каждую строчку стихотворения поместить в отдельный абзац. Правда обычно между абзацами большие белые поля. Поэтому можно использовать одинарный тег
. Этот тег обозначает переход на новую строку, то есть обрыв (break) старого.
Здесь следует вставить замечание. Все теги ходят парами открывающий — закрывающий. Между ними содержатся элементы гипертекста. Но тег обрыва строки не содержит ничего. Поэтому он пару и не имеет. Но новейшие стандарты требуют, чтобы все теги закрывались. Правда учтя наличие тегов подобных
, придумали сокращённую форму записи (
). Он как бы открывается, а потом сразу закрывается. Это кажется довольно странным. Конечно можно писать и в старом формате:
. Но лучше иметь код, который отвечает новейшим стандартам.
И ещё один способ — взять весь стих в теги . Весь текст, помещённый между этими тегами, отображается точно так же, как его видно в редакторе. Правда этот тег также меняет шрифт на моноширинный. Но зато мы можем делать с текстом интересные вещи:
Это выглядит следующим образом:
`But why do you call it sad? ' And she kept on puzzling about it while the Mouse was speaking,
so that her idea of the tale was something like this: -
Ещё немного о теге изменения шрифта. Шрифт может иметь три дополнительных атрибута: жирность (bold), курсив (italic) и подчёркивание (underlined). Они меняются с помощью тегов: , и соответственно.
Правда вместо тега рекомендуют использовать тег , а вместо — . У них есть различие и — это логическое выделение, а и — физическое, то есть в первых двух случаях мы акцентируем внимание посетителя сайта на каком-то слове или предложение, ну а в последних двух просто требуется, чтобы текст был жирным или курсивным и делается это просто для красоты. Кроме того существует ещё такое свойство как зачёркивание. Оно задавалось тегом , что означало strikeout. Но опять же в современном мире слова не вычёркивают, их удаляют.
Для того чтобы обходиться без , придумали тег он помечает что текст был именно удалён как неверный и автор акцентирует пользователя на этом. Кроме тега удаления ввели тег вставки
Читайте также: