Html wiki



HTML — (с англ. яз. Hyper Text Markup Language — язык гипертекстовой разметки) — это язык разметки для написания интернет страниц, сайтов, созданный на заре возникновения интернета британскими учёными в 1986—1991 годах. При помощи данного языка, специальные программы (браузеры) понимают, как должна выглядеть та или иная страница.

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

Основы языка HTML

HTML тэги — это ключевые слова, вписанные в треугольные скобки, например:

Где:

  • <!DOCTYPE html> — задаёт тип документа, написанный в HTML и помогает браузерам правильно отображать содержание страницы.

  • Текст заключённый в тёги <html> и </html> содержит всё содержание страницы.
  • Текст заключённый в тёги <head> и </head> содержит основное описание страницы.
  • Текст заключённый в тёги <title> и </title> отображает название страницы.
  • Текст заключённый в тёги <body> и </body> является основным, видимым содержанием страницы.
  • Текст заключённый в тёги <h1> и </h1> будет являться заглавием страницы.
  • Текст заключённый в тёги <p> и </p> будет являться отдельным параграфом.

Такой код все браузеры выведут так, как показано на картинке справа.

Используя эту стандартную структуру, все браузеры будут отображать содержание страницы, а также задавать странице описание содержания и размечать параграфы. Все интернет страницы написанные на чистом языке HTML имеют расширения .htm или .html.

HTML тэги

Синтаксис или правила написания HTML очень просты. Как уже отмечалось, HTML тэги — это ключевые слова языка программирования, которые вписываются в треугольные скобки:

Где <tagname> — тот или иной тэг. Поэтому необходимо знать главные правила:

  • В основном все тэги идут парами, например: <p> Текст или другое содержание страницы </p>.
  • Первый тэг называется открывающим тэгом <p>, второй тэг называется закрывающим тэгом </p>.
  • Закрывающий тэг — идентичный открывающему тэгу, но имеет лишь наклонную черту — «/»

Структура HTML страницы

Учитывая вышеизложенное, ниже представлена схема страницы в HTML:

  • Внутри тэга <head> задаётся название страницы, описание, ссылки на оформление CSS и другие настройки.
  • Внутри тэга <body> отображается в браузерах всё содержимое HTML страницы (выделено белой зоной). Оформление страниц также осуществляется через специальные тэги HTML. Как это делается, читайте в другихьстатьях посвящённых данной тематике. Но более предпочтительный вариант оформления страниц осуществляется через CSS.

Версии HTML

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

История версий HTML
Год Версия HTML
1991 HTML
1995 HTML 2.0
1997 HTML 3.2
1999 HTML 4.01
2000 XHTML
2014 HTML5

Заключение

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

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

ru.wikijournal.org

Это статья из цикла «Что такое?». В ней вы узнаете, что такое html. Те, кто знаком с этим термином – можете не читать эту статью.

what-is-htmlС каждым годом число пользователей интернет увеличивается минимум 10-20 миллионов человек. Всего, по различным данным, так или иначе, интернетом пользуются более 2 миллиарда человек. Как же сделать так, чтобы пользователь из Новой Зеландии и Норильска при отображении сайта «www.domain.com» видел одну и ту же картинку? Ответ прост: необходим единый язык, понимаемый различными компьютерами. В качестве такого языка в данный момент выступает HTML.


HTML (HyperText Markup Language) — язык разметки (маркировки) гипертекста. Гипертекст своим развитием обязан интернету, хоть и создавался он совсем не для того. HTML дает возможность производить переход от одной части текста к другой, и, что замечательно, эти части могут храниться на совершенно разных компьютерах.

HTML не стоит путать с языками программирования, он создан специально для разметки вэб-страниц. Именно язык разметки дает браузеру необходимые инструкции о том, как отображать тексты и другие элементы страницы на мониторе. Важно заметить, что не только различные браузеры, но и различные их версии могут по-разному воспринимать и отображать на экране код. Следовательно, некоторые элементы корректно выглядящие в браузере Operа могут выглядеть иначе в Internet Explorer и других браузерах.

При верстке (грубо говоря, создании страниц) HTML-страниц это необходимо помнить, и просматривать их в самых популярных браузерах типа Mozilla Firefox, Internet Explorer и Operа.

Код разметки в HTML состоит из так называемых «тегов». Теги предоставляют информацию браузерам о форматировании и разметке страницы. Название тега заключается в угловые скобки «<» и «>». Некоторые тэги бывают открывающимися и закрывающимися, например, тег b, который делает текст жирным.

Они влияют на отображение содержимого, находящегося в нем. Данные, находящиеся между такими символами, называются содержимым тега. Иногда встречаются теги, являющиеся одновременно и закрывающими и открывающими, например hr — линия.


Чтобы писать на HTML надо его просто знать. Однако, учитывая огромную популярность Интернета, и огромное количество пользователей, желающих сделать свои странички, было создано множество редакторов, упрощающих работу с кодом. Один из самых простых из них – это FrontPage, входящий в пакет Microsoft Office. Это программное обеспечение (ПО) достаточно просто в обращении. И все же FrontPage имеет ряд существенных минусов: засоряет страницы (до 70% лишнего кода), снижает быстродействие, имеет ограниченные возможности дизайна.

Более продвинутые редакторы – HomeSite и DreamWeaver. Они помогут создать как сайт-визитку, так и настоящий шедевр современного искусства. К минусам этого ПО можно отнести: долгую обработку массивного кода и небольшое засорение кода лишними тегами. Требуется знание HTML в этом случае на порядок-два выше, чем при работе с FrontPage.

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

Для работы с html страницами я использую программу PHP Desigber 2008, также неплохой программой – редактором является Notepad ++.

Моя персональная рекомендация всем: учите html. Это очень простой «язык» и изучить его можно в короткие сроки. Не обязательно в точности запоминать все теги, важно хотя бы понимать их назначение. Тогда можно легко форматировать текст и изменять html страницы.
Есть сайт, который мне постоянно помогал в изучении HTML — это сайт htmlbook.ru. На сайте есть полезный раздел — . С него и можно начать изучение.


Источник: Работа в интернете.

Постовой:
Нашел в блоге Записки Жука хорошую программу для авто. постинга в социальные закладки.

blogwork.ru

Введение[править]

Однажды я увидел книжку по веб-дизайну, а поскольку я имел обыкновение читать всё что вижу, то я её прочитал. И с тех пор считал что знаю HTML. Но недавно мне сказали адрес одного хорошего сайта www.w3schools.com. Символы «w3» в названии сайта означают «три w», или «www». Что важного я там узнал? Во-первых, что мои знания несколько устаревшие. Во-вторых, то что мои теги распознаёт браузер, ещё не значит что так будет продолжаться и дальше. Поэтому я решил написать современную книгу о веб-дизайне.

Html-small.png

Постараюсь описать всё как можно доступнее, и согласно новым тенденциям. Ибо консерватизм — это не что иное, как лень учить что-то новое. Но если вы не учите новое, вы отстаёте. А отставание в современном мире недопустимо. Поэтому здесь будем рассматривать HTML5.


Как положено, стоит начать с определений. HTML (Hyper Text Markup Language) — значит язык разметки гипертекстовых страниц. Даже не считается языком программирования, но каждый программист, уважающий себя, должен его знать. Ибо без него учить JavaScript или PHP нет смысла.

Чем отличается стандарт HTML5 от предыдущих HTML? Сначала коротенькая история. Существует такая организация W3C (World Wide Web Consortium). Суть её работы хорошо выражена в их лозунге «Leading the Web to Its Full Potential…» («Приведём всемирную паутину к лидерству, раскрыв все её возможности»). Судя по тому что они уже сделали, люди разумные и свою работу знают. И когда они говорят, что в будущем браузеры не будут поддерживать старые версии HTML, то оно наверняка так и будет. А новые браузеры появляются не так уж и редко. Когда W3C создавали стандарт HTML, в нём не предусматривалось тегов для форматирования гипертекста. Теги показывали только структуру документа, например:

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

IE — давайте отсюда и дальше так будем называть Internet Explorer. А фраза выше — ложь. Только FF (Firefox) смог нормально вывести ту несчастную строку. Но всё равно лучше такими тегами не пользоваться.

Также нежелательно было появление в стандарте HTML 3.2 тега <font>


(он нужен для изменения цвета, шрифта и размера текста). Представьте себе, что нужно написать страницу, где все заголовки красные. И приходится помимо тегов в заголовке писать ещё тег шрифта с атрибутом цвета.

С четвёртой версии разделяются форматирование документа и его структура. Теперь в HTML-странице сохраняются только структура страницы (разноуровневые заголовки, абзацы, цитаты, списки), а всё, что относится к форматированию, описывается в CSS. Это удобно, поскольку позволяет быстро менять оформление всего сайта изменением только файла со стилем, и, кроме того, уменьшает длину кода, который нужно написать.

Структура страницы[править]

К работе![править]

Лучший способ научиться что-то делать — сделать это. Не получится — учиться дальше. А получится — значит вы уже научились. :-)

Для того чтобы изучить HTML, кроме чтения этого руководства, нам нужно иметь:

  1. Компьютер
  2. Браузер
  3. Текстовый редактор

Раз вы читаете этот текст, две первые вещи у вас точно есть. Текстовый редактор также есть на каждом компьютере. Важно заметить: нам нужна программа для редактирования текстовых файлов, а не документов (то есть ни в коем случае нельзя использовать текстовые препроцессоры типа Microsoft Word). Обычно стандартного «Блокнота» Windows достаточно, но есть текстовые редакторы, которые лучше приспособлены к написанию HTML-страниц. Неплохие редакторы для Windows — Notepad ++, Brackets в которых хорошо писать не только HTML, а и CSS, PHP, C++, и ещё несколько десятков других языков. У них есть такая хорошая вещь, как подсветка синтаксиса, которая позволяет выявлять ошибки прямо во время их создания. Если же у вас Linux, тогда вы точно знаете что такое хороший текстовый редактор.


О браузере также стоит сказать несколько слов. Все советуют держать у себя на компьютере набор браузеров: Internet Explorer, Firefox, Opera, Chrome, Safari и просматривать свои страницы во всех сразу. Правда, функции тегов в разных браузерах отличаются не сильно (а в идеале вообще не отличаются). Поэтому учиться можно просматривая свои страницы в одном из них, а уже когда пишете что-то большое — посмотрите, не имеется ли слишком критических различий во всех других.

Чтобы создать веб-страницу, нужно создать в файловой системе текстовый файл с расширением .html или .htm. Какое из них выбрать — философский вопрос. .htm — сокращение от .html, что довольно смешно, поскольку .html — это тоже сокращение. Но были времена, когда в некоторых ОС расширение файла могло содержать максимум 3 символа (например, DOS), и страницы гипертекста имели расширение .htm. Теперь можно использовать оба расширения.

Содержание веб-страницы[править]

Веб-страницы состоят из гипертекста. Гипертекст отличается от обычного текста тем, что содержит гиперссылки. Они обычно обозначены подчёркиванием и синим цветом, и позволяют сделать гиперпереход в другую вселенную другой гипертекст, или любое другое место (якорь), указанное с помощью URL. Гипертекст состоит из тегов.

URL (Universal Resource Locator) — адрес ресурса, который мы видим в адресной строке браузера.

Тег — это всё, что находится между угловыми скобками. Например <html>


. Теги не отображаются браузером, они только задают структуру текста. Теги бывают трёх видов: открывающие, закрывающие и одинарные. Открывающие и закрывающие теги всегда ходят парами. Закрывающий отличается от открывающего тем, что после угловой скобки < стоит знак слэш (знак дроби) «/». Пара открывающего и закрывающего тега выглядит так: <html></html>. Одинарные теги — вещь противоречивая, и я их рассмотрю позже.

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

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

Все теги, которые встречаются выше, обязательны. Они присутствуют в каждой интернет-странице. Конечно, если вы какой-то из них забудете, браузер-то разберётся, но все серьёзные люди такие вещи не забывают. Тег <html> говорит браузеру, что в нём содержится код HTML. Тег <head> говорит, что в нём содержится заголовочная информация страницы. Эта информация на самой странице отсутствует. Тег <title>, как уже было сказано, содержит заголовок, который обычно отображается на вкладке. <body> содержит тело, тоесть содержимое страницы.

Кроме тегов и текста, гипертекстовые страницы могут содержать комментарии. Комментарии выглядят так: <!-- Комментарий -->. Они позволяют писать на странице текст, который не отображается браузером. Это нужно для вставки сообщений типа <!-- Здесь не забыть дописать абзац о комментариях -->.

Ещё существует понятие специальных символов. Например, вы напишете такую страницу:

Такая страница отображается браузером неправильно (скорее всего, каждый браузер просто отобразит страницу по своему), потому что браузер не выводит теги. А <html> — тег. Такая же проблема и с символами сравнения. Поэтому, чтобы отображать некоторые нестандартные символы, существует понятие специальных символов. Специальные символы в HTML описываются так: &код;. Например:

Название Код Вид
Менее &lt; <
Более &gt; >
Амперсанд &amp; &
Кавычка &quot; »

Здесь я указал только самые-самые нужные. Если вам нужно больше, надо поискать. Можно поискать где-то здесь. То есть то, что мы хотели описать в предыдущем примере, будет выглядеть так:

Кодировка[править]

Одним из обязательных требований для веб-страницы является указывание кодировки. Опять же браузер сам может определить кодировку. Но лучше указывать. Способа есть два:

HTML4.01:

HTML5:

Оба способа одинаковы. Но второй короче.

Атрибуты[править]

Некоторые теги имеют свойства, которые называются атрибутами. Например, почти каждый тег имеет атрибут title. В нём прописывается текст подсказки, которая видна, когда пользователь наводит курсор на элемент тега. Пусть нам нужно написать известное сокращение: HTML. И если пользователи наводят на него курсор, они могут его расшифровать. Это делается просто:

Здесь мы видим, как правильно записывать атрибуты. Название атрибута, затем знак равенства, и значение в двойных кавычках. В стандарте HTML 4.01 нет атрибутов без значений.

Лучше писать все атрибуты и их значения маленькими буквами

Зачем? Ради будущего!

Теги форматирования[править]

Теперь перейдём к форматированию текста. Форматирование задаёт не так внешний вид, как структуру страницы. Важнейшими тегами форматирования есть абзацы (англ. paragraph) и заголовки (англ. header)

Заголовки[править]

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

Эта страница отобразится так:

Я здесь пишу и пишу примеры. Не забывайте пробовать что-то сами! Или хотя бы по крайней мере посмотрите как будут выглядеть примеры страниц, которые вам даются, в вашем браузере (а если у вас несколько браузеров, то не забывайте посмотреть как выглядит страница в других!).

Переносы строк[править]

К сожалению, браузеры отвергают все символы переноса строки, табуляции, а также лишние пробелы. Поэтому этот стишок отображается в одну или несколько строк (в зависимости от ширины окна). Но есть выход.

Можно каждую строчку стихотворения поместить в отдельный абзац. Правда обычно между абзацами большие белые поля. Поэтому можно использовать одинарный тег <br />. Этот тег обозначает переход на новую строку, то есть обрыв (break) старого.

Здесь следует вставить замечание. Все теги ходят парами открывающий — закрывающий. Между ними содержатся элементы гипертекста. Но тег обрыва строки не содержит ничего. Поэтому он пару и не имеет. Но новейшие стандарты требуют, чтобы все теги закрывались. Правда учтя наличие тегов подобных <br>, придумали сокращённую форму записи (<br />). Он как бы открывается, а потом сразу закрывается. Это кажется довольно странным. Конечно можно писать и в старом формате: <br>. Но лучше иметь код, который отвечает новейшим стандартам.

И ещё один способ — взять весь стих в теги <pre></pre>. Весь текст, помещённый между этими тегами, отображается точно так же, как его видно в редакторе. Правда этот тег также меняет шрифт на моноширинный. Но зато мы можем делать с текстом интересные вещи:

Это выглядит следующим образом:

Изменение шрифта[править]

Ещё немного о теге изменения шрифта. Шрифт может иметь три дополнительных атрибута: жирность (bold), курсив (italic) и подчёркивание (underlined). Они меняются с помощью тегов: <b>, <i> и <u> соответственно.

Правда вместо тега <b> рекомендуют использовать тег <strong>, а вместо <i> — <em>. У них есть различие <strong> и <em> — это логическое выделение, а <b> и <i> — физическое, то есть в первых двух случаях мы акцентируем внимание посетителя сайта на каком-то слове или предложение, ну а в последних двух просто требуется, чтобы текст был жирным или курсивным и делается это просто для красоты. Кроме того существует ещё такое свойство как зачёркивание. Оно задавалось тегом <s>, что означало strikeout. Но опять же в современном мире слова не вычёркивают, их удаляют.

Школа W3 напротив тегов <u>, <s> и <strike> пишет «deprecated». Что в переводе означает: «сильно возражать, выступать против, протестовать». Кто протестует не сказано, но скорее всего Консорциум трёх дубльве. Вместо тегов вычёркивания рекомендуют использовать тег удаления. А вместо тега подчёркивания — стили.

Удаление и замена[править]

Для того чтобы обходиться без <s>, придумали тег <del> он помечает что текст был именно удалён как неверный и автор акцентирует пользователя на этом. Кроме тега удаления ввели тег вставки <ins>. Тег вставки указывает текст, который вставили после удаления. Выглядит такая вещь примерно так:

А отобразится она так:

Причём текст в теге <ins> будет подчёркнут. (А ребята из W3schools говорили использовать CSS)

Таблица тегов форматирования[править]

Далее опишу все теги в таблице, потому что мне уже надоело здесь о них рассказывать, а вам видимо надоело читать.

Тег Пример Вид Описание
<b> Задаёт жирный текст.
<strong> Задаёт сильный акцент на тексте между тегами. Выглядит так же, как и жирный.
<i> Задаёт курсивный текст.
<em> Задаёт акцент на тексте между тегами. По виду аналогичен курсивному.
<sub> Задаёт текст в нижнем индексе.
<sup> Задаёт текст в верхнем индексе.
<ins> Задаёт текст, который вставляется после удаления. Обычно подчёркнут.
<del> Задаёт текст, который удалён (выглядит перечёркнутым).
<code> Задаёт текст, представляющий компьютерный код.
<kbd> Задаёт текст, который введён с клавиатуры.
<samp> Задаёт текст, который является примером (Sample). Почти как примеры в этом тексте.
<var> Задаёт текст, представляющий переменную. Наверное для всяких статей по программированию.
<pre> Задаёт текст, который сохраняет все символы форматирования, такие как табуляции, пробелы, и переносы строк.
<abbr> Задаёт текст аббревиатуры. В атрибуте title можно записать расшифровки.
<address> Задаёт текст адреса. Отображается курсивом.
<bdo> Очень весёлый тег. Для тех кто пишет на иврите или арабском. В атрибуте dir можно задать направления текста. «rtl» — справа налево, «ltr» — нормально.
<blockquote> Задаёт текст большой цитаты.
<q> Задаёт текст маленькой цитаты.
<cite> Задаёт текст цитаты.
<dfn> Задаёт строку, для которой будет дано определение (Definition).
big <big>текст</big> Задаёт большой текст. (устаревший для HTML5)
small <small>текст</small> Задаёт маленький текст.
u <u>текст</u> Подчёркивание текста. (устаревший для HTML4.01, но не для HTML5)
s <s>текст</s> Перечёркивание текста. (устаревший для HTML4.01, но не для HTML5)
tt <tt>текст</tt> Задаёт текст, который выглядит так, будто введён с телетайпа. (Моноширинный шрифт, тег устаревший)

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

Ссылки[править]

Как я уже говорил, основным свойством, которое отличает нормальный текст и гипертекст, является гиперссылка. Гиперссылки создаются с помощью тега <a> с атрибутом href, который принимает значение нужного нам URL. Например, нужно создать страницу, которая содержит ссылку на статью. Это может выглядеть примерно так:

Теперь на странице надпись ru.wikibooks.org станет гиперссылкой.

Обычно страницы в интернете не сидят одиноко. Они размещаются группами, которые называются узлами. Сайт — это по моему определению набор страниц и других файлов, которые имеют общую часть URL. Например, все страницы, начинающиеся на http://www.microsoft.com, принадлежат одному сайту одной маленькой компьютерной фирмы. Далее следует символ «/», и адрес продолжается.

Можно сделать у себя на компьютере маленькую модель сайта. Для этого нужно создать новый каталог, в котором будем размещать файлы. Затем в каталоге разместить файл index.htm. Если есть какая-то ссылка на ваш сайт, без указания, какой конкретно файл загружать, то будет загружен именно index.htm. Далее мы можем создать ещё одну папку внутри нашей. Пусть она называется subdir. Если в ней разместить файл index.htm, то для перехода к нему нужно будет написать: «www.ваш_сайт.com/subdir/».

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

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

Например, если вы певец и хотите поделиться своими песнями с другими, вы можете положить в папку с сайтом файл track1.mp3, а в файле index.htm написать:

Если файлы находятся в одном каталоге, то в атрибуте href достаточно написать название файла, чтобы сделать ссылку. Если же мы имеем файлы «site/1.htm» и «site/subdir/2.htm», то чтобы с первого сделать ссылку на второй, а со второго на первый, надо написать href =»subdir/2.htm» и href =»../1.htm» соответственно. Такие адреса называются относительными. Две точки означают «тот каталог что выше». Относительные адреса хороши тем, что когда мы переименовываем папку «site» или меняем хостинг их не нужно менять.

Но этим возможности тега <a> не исчерпываются. a — сокращенно от anchor — что значит якорь. С помощью тега <a> можно ставить в гипертекстовом документе якоря, или проще говоря закладки, позволяющие переходить в определённое место документа. Это особенно полезно, когда документ большой, и нужно быстро переходить в нём к нужному разделу. Для этого существует атрибут id.

Я правда не понимаю для чего делать закладки с помощью тега <a>, когда атрибут id есть в каждом тезисе. Но всеми способами получается нормально.

Чтобы долго не объяснять снова приведу пример:

Когда мы делаем гиперпереходы в пределах одной страницы, то в атрибуте href просто пишем знак («#») и название закладки (то что написано в атрибуте id). А когда делаем переход на закладку в другой странице, то сначала пишем адрес страницы, затем добавляем знак («#») и название закладки. Когда случайно делается переход на закладку, которой не существует, ничего страшного не происходит. Мы просто попадаем в начало страницы, как при обычном переходе.

Вообще-то w3cschools писали об атрибуте name, но кроме того они писали, что скоро этот атрибут будет отвергнут и заменён на id. Поэтому думаю лучше использовать более новый, и в два раза короче вариант. А чем короче страница, тем быстрее она загрузится :-)

Чаще страницы загружаются в том окне, где вы щёлкнули ссылку. Но мы можем выбрать место, где будут загружаться страницы. Для этого в теге <a> существует атрибут target. Он может принимать значения _blank, если нам нужно загружать страницу в новом окне, _self, если нам ничего менять не нужно (оно и так загружается в том окне где щёлкнули), _parent, если мы хотим забрать из окна фрейма и открыть страницу на всё окно.

Аудио[править]

bgsound[править]

Этот тег нестандартный и не входит в спецификации. Поддерживается только IE. Вместо него рекомендуется использовать тег <audio>.

Тег <bgsound> указывает на музыкальный файл, который будет проигрываться на веб-странице при её открытии. Звук, время звучания музыки и другие характеристики указываются с помощью параметров тега, а также могут управляться при помощи скриптов. Этот тег должен размещаться только в середине тега <head>.

Чтобы указать файл, который будет проигрываться, нужно написать так:

Параметры:

  • src указывает путь к музыкальному файлу.
  • loop устанавливает, сколько раз будет проигрываться музыка. По умолчанию проиграется 1 раз.
  • volume задаёт громкость звучания музыки на странице. По умолчанию — 0. Громкость — целое число от −10000 до 0. Ноль — максимальный уровень. Чем больше значение этого параметра, тем тише звучит музыка.
  • balance регулирует громкость звучания в левой и правой колонках.

audio[править]

В HTML5 добавили новый тег <audio>.

Вот как он выглядит:

Обращаем ваше внимание на непонятный тег <source />.

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

Подробно про атрибуты тега <audio>:

  • autoplay — звук начинает играть сразу после загрузки страницы.
  • controls — добавляет панель управления к аудиофайлу.
  • loop — повторяет воспроизведение звука с начала после его завершения.
  • preload — используется для загрузки файла вместе с загрузкой веб-страницы.
  • src — указывает путь к воспроизводимому файлу (только если не использовался тег <source />).

Элементы оформления[править]

Подведём черту[править]

Иногда вы что-то пишете, пишете, и вдруг чувствуете что нужно подвести черту.


Делается это просто как новая строка: <hr /> (horisontal ruler). Вообще-то в этом теге есть атрибуты, которые настраивают внешний вид, но их использование в новых стандартах нежелательно. Разрешены только общие атрибуты, такие как id, class, style и атрибуты событий, но это темы следующего раздела.

Картинки[править]

До этого момента мы прочитали очень много текста о тексте. Конечно — текст важнейшая часть любой страницы (если конечно это не страница какой-либо галереи), но сплошной текст штука довольно скучная. Иллюстрированный текст выглядит намного лучше. Для вставки в текст изображения используют тег <img>. Его атрибут src задаёт источник (source) — файл, в котором содержится картинка. Этот тег одинарный, поэтому закрывающий тег не нужен.

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

Не стоит забывать о том, что картинки очень долго загружаются при медленном доступе к интернету. И даже когда доступ в интернет достаточно быстрый, некоторые пользователи исключают загрузку картинок в целях экономии. И это замечание актуально даже в 2011 году. Поэтому не пренебрегайте атрибутом alt.

Также мы можем изменить размер картинки. Например, если мы имеем маленькое изображение, мы можем его растянуть. Правда тогда оно будет отображаться несколько размыто. Также можно изменять размеры изображения вместе с изменением размеров окна браузера. Для этого размеры указывают в процентах. Размеры задаются атрибутами width и height. Пример:

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

Карты[править]

Изображение можно разделить на области различной формы, каждая из которых может ссылаться в другое место. Для этого с помощью тега <map> задают карту. Атрибут id идентифицирует карту и используется для связи с картинкой. Чтобы картинку назначить в качестве карты, используется атрибут usemap (в котором мы должны записать id карты). Внутри тега карты содержатся теги областей, которые задаются тегами <area>. Опять же, этот тег одинарный, и хочет чтобы его правильно закрывали. Атрибут href задаёт адрес ссылки, атрибут nohref, если назначить ему значение true, исключает зону с карты. Атрибут shape задает форму области: rect — прямоугольная, circle — круг, и poly — для многоугольника.

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

Форму задают с помощью атрибута coords, который содержит четыре координаты (лево, верх, право, низ) для прямоугольника, три (координаты центра и радиус) для круга, и чётное количество для многоугольника (координаты каждой вершины). Координаты можно узнать морем способов. Можно в Paint’е посмотреть. А если форма сложная, точек много, то можно и специальную программу использовать. Это вроде X-Map. Хотя, если честно, ни этой программой, ни картами я не пользовался. Но если такое есть, то надо дать людям знать. Иначе книжка какая-то не солидная будет.

Представление информации структурировано[править]

Списки[править]

Списки в HTML бывают трёх видов: упорядоченные (ordered list) <ol>, неупорядоченные (unordered list) <ul> , и списки определений (definition list) <dl> . Элементы двух первых списков задаются тегом <li> (list item). Элементом списка может быть любой текст, картинки, абзацы, а также другие списки. Например, упорядоченный список задают так:

Выглядит это так:

  1. Раз
  2. Два
  3. Три

Список определений не является списком элементов. Это список терминов и определений терминов. Список определений начинается с тега <dl>. Каждый термин списка определений начинается с тега <dt>. Каждое определение списка начинается с тега <dd>:

Таблицы[править]

Таблицы удобно задавать с помощью HTML, так как в HTML можно делать вложенные элементы. Таблица также состоит из вложенных элементов. Таблица (<table>) состоит из строк (<tr> — table row), каждая из которых также состоит из ячеек (<td> — table data). А внутри ячейки может быть уже все что угодно. Даже еще одна таблица. Выглядит это так:

Строка 1 Столбец 1 Строка 1 Столбец 2 Строка 1 Столбец 3
Строка 2 Столбец 1 Строка 2 Столбец 2 Строка 2 Столбец 3
Строка 3 Столбец 1 Строка 3 Столбец 2 Строка 3 Столбец 3

По умолчанию таблицы отображаются без границ. То есть границы невидимы. Это иногда полезно, но иногда мы хотим, чтобы границы были видны. Для этого задают значение атрибута border. Он задаёт толщину границ таблицы. (Правда только внешних). Если его значение ноль, то границы не отображаются.

Иногда надо назвать столбцы или строки, используют ячейку заголовка. Для этого вместо тега <td> пишут <th>. Выглядит это так:

Столбец 1 Столбец 2
Строка 1 Строка 1 Столбец 1 Строка 1 Столбец 2
Строка 2 Строка 2 Столбец 1 Строка 2 Столбец 2

А пишется вот так:

Стоит заметить, что такой способ лучше чем писать содержимое ячейки в тегах <b> или <strong>. И не только потому, что так короче. А и потому, что потом можно будет применить к заголовкам таблицы отдельные стили.

Некоторые браузеры не отображают пустые ячейки (то есть не обводят их рамкой). Можете посмотреть что делает ваш, в предыдущем примере верхняя левая ячейка пуста. Чтобы обмануть браузер и заставить его отображать ячейку будто там что-то есть, мы можем положить туда невидимый символ -. Это символ несокрушимого пропуска (Non Breakable SPace). Назвали его несокрушимым оттого, что слова, разделённые таким пропуском, переносятся на следующую строку только вместе.

Ячейки таблицы можно объединять. Делается это с помощью атрибутов colspan и rowspan тега <td>. colspan указывает на сколько колонок будет данная ячейка, а rowspan — на сколько строк. Такой код:

Даёт такой результат:

Строка 1 Столбец 1 растягивается на два вправо Строка 1 Столбец 3
Строка 2 Столбец 1 Строка 2 Столбец 2 растягивается на 2 вниз Строка 2 Столбец 3
Строка 3 Столбец 1 Строка 3 Столбец 3

Кроме строк таблица может иметь заголовок. Тег <caption> предназначен для создания заголовка к таблице и может размещаться только в середине тега

, причём сразу после открывающего тега. Такой заголовок представляет собой текст, который по умолчанию отображается перед таблицей и описывает её. Также можно выделить строки таблицы в группы, с различным функциональным назначением и назначить им разные стили. Ой как мне не терпится уже дойти до стилей. Но по порядку. Можно выделить заголовочный часть <thead>, основную часть <tbody> и итог <tfoot>.

HTML5[править]

Краткая история[править]

HTML5 является эволюционным развитием HTML4.01 с сохранением обратной совместимости и добавлением новых возможностей (W3C)/(WHATWG).

Конкурирующий стандарт XHTML2.0, который так и не был окончательно принят, предполагал более значительные изменения.

Параллельно с W3C развитием HTML5 занимается и WHATWG. Причём с 2004 года WHATWG, а с 2007 W3C, у которой до этого приоритетом был стандарт XHTML2.0.

В качестве стандарта W3C HTML5 был принят 28 октября 2014 года, а W3C HTML5.1 планируется в конце 2016 года. Стандарт WHATWG HTML является живым (Living Standard), то есть изменения в него вносятся постоянно.

В документе можно посмотреть отличия различных HTML-спецификаций (между WHATWG HTML, W3C HTML5 и W3C HTML5.1).

Что нового?[править]

  • В отличие от HTML4, у которого 3 валидатора (strict, transitional, frameset), у HTML5 валидатор один: <!DOCTYPE html>.
  • HTML5 поддерживает MathML и SVG.
  • Новые теги:
    • <section>, <article>, <aside>, <header>, <footer>, <nav>, <main>, <hgroup> (уже считается устаревшим в W3C),
    • <figure>, <figcaption>, <video>, <audio>, <source>, <track>, <picture>, <canvas>, <svg>, <math>, <embed> (для вставки контента с плагином (только)),
    • <datalist>, <keygen>, <output>, <progress>, <meter>, <dialog>,
    • <data>, <time>, <mark>, <ruby>, <rt>, <rp>, <bdi>, <wbr>,
    • <details>, <summary>, <menu>, <menuitem> (нужно использовать вместо тега <command>).
  • Новые значения атрибута type для тега <input>:
    • date, datetime, datetime-local, time, month, week,
    • color, email, tel, number, range, search, url.
  • Новые атрибуты для тегов, например:
    • autocomplete, autofocus, placeholder, required, pattern (для регулярных выражений) и другие для тега <input>,
    • autocomplete, autofocus, placeholder, required и другие для <textarea>,
    • async для тега <script>,
    • srcset для тега <img>,
    • download для тегов <a> и <area>.
  • Новые глобальные атрибуты, то есть которые могут использоваться с любым из тегов, например:
    • contenteditable, spellcheck, contextmenu, hidden, draggable/dropzone.
  • Некоторые теги отмечены как устаревшие, вместо них рекомендуется использовать CSS:
    • <basefont>, <big>, <center>, <font>, <strike>, <tt>.
  • Исчезновение фреймов (<frame>, <frameset>, <noframes> (кроме <iframe>)) из-за проблем с поисковыми системами и некоторых неудобств при навигации по странице.
  • Исчезновение некоторых тегов, заменённых в обновлённой спецификации на более актуальные:
    • вместо <acronym> нужно использовать тег <abbr>,
    • вместо <applet> использовать <object>,
    • вместо <dir> использовать <ul>,
    • вместо <bgsound> — тег <audio>,
    • вместо <listing> и <xmp> — теги <pre> или <code>,
    • вместо <strike> — <del> или <s>,
    • вместо <isindex> — комбинацию тега <form> и текстового поля.
  • Не поддерживаются некоторые атрибуты у тегов, например:
    • charset и rev у тегов <link> и <a>,
    • coords, shape и name у тега <a>,
    • align у всех тегов,
    • background, bgcolor, text, topmargin, rightmargin, bottommargin, leftmargin, link, alink, vlink у тега <body>.
  • Новые API:
    • Рисование 2D-картинок в реальном времени (Canvas),
    • Контроль над проигрыванием медиафайлов,
    • Хранение данных в браузере,
    • Редактирование,
    • Drag-and-drop,
    • Работа с сетью,
    • MIME.
  • Новые элементы в DOM.

ru.wikibooks.nym.su

What is HTML5?

Question: What is HTML5?

HTML5 contains powerful capabilities for Web-based applications with more powerful interaction, video support, graphics, more styling effects, and a full set of APIs. HTML5 adapts to any device, whether desktop, mobile, tablet, or television. HTML5 is an open platform developed under royalty free licensing terms.

People use the term HTML5 in two ways:

  • to refer to a set of technologies that together form the future Open Web Platform. These technologies include HTML5 specification, CSS3, SVG, MathML, Geolocation, XmlHttpRequest, Context 2D, Web Fonts (WOFF) and others. The boundary of this set of technologies is informal and changes over time.
  • to refer to the HTML5 specification, which is, of course, also part of the Open Web Platform.

Although it would be great if people used one term to refer to the specification and another term to refer to set of specifications, in practice people use the term both ways.

Note: Throughout this FAQ, we use HTML5 to refer only to the HTML5 specification. We use Open Web Platform to refer to the larger set of technologies.

Why is HTML5 so exciting?

Question: HTML5 has been cited by many thought leaders as the future of the Web. Why is HTML5 generating this excitement?

There is huge demand for open standards that allow the creation of rich internet applications. Watching videos, finding the nearest restaurant, accessing emails while being offline are just some of the powerful new capabilities enabled by the set of specifications in development at W3C.

One aspect that interests W3C in particular is enabling people to combine different technologies. W3C works to ensure not just interoperable support in software of a single specification, but compatibility among specifications.

Even though HTML5 is still a draft, browser vendors are deploying features and generating a lot of excitement in the IT industry. This experience in turn allows W3C to revise its drafts. In this way, the final standard can transparently inform implementers where they need to pay close attention to security and privacy issues.

When can I use HTML5?

People can already use parts of the platform that interoperate, but W3C’s mission is global interoperable, to ensure that the web is available to all. Not all elements are fully implemented yet and some of them provide builtin fallback mechanisms, such as <video> or <input>. One can use HTML5 today, knowing the existing limitations and ensuring proper fallbacks.

Which Web browsers support HTML5?

Question: Which Web Browsers support HTML5?

W3C encourages implementation and testing long before a specification becomes a standard to ensure that two people can read a specification independently and write interoperable software. Early adopters provide implementers and W3C with tremendously valuable feedback because they help identify where interoperability issues exist. For a more detailed understanding of what is currently supported, please see the HTML5 Test Suite Conformance Results (a work in progress).

A number of people are tracking browser implementations (e.g., html5readiness). Note: W3C has not verified the accuracy of these reports.

When will HTML5 be done?

Question: When will HTML5 be finished? What is the status of HTML5?

HTML5 is a work in progress. We expect to be feature complete by December 2012. W3C is developing a comprehensive test suite to achieve interoperability for the full specification by 2014, the target date for Recommendation. W3C’s primary goal is to ensure that the HTML5 standard is of the highest quality and allows the creation of interoperable implementations. The timeline in the charter is based on implementation expectations and development of a test suite. The timeline is designed to help the industry plan for adoption. Ongoing active participation by browser vendors, other software developers, and the community in implementation and testing will help ensure the successful and timely roll out of the standard.

What are HTML5 Security and Privacy Issues?

Question: Do you think that the benefits of HTML5, such as its neutrality, rich graphics, no need plug-ins, outweigh the security risk it carries?

Now entering its third decade, the Web has evolved from a Web of documents into a formidable platform for networked applications that let us share information and services over the Internet. In this highly connected environment, it is important that powerful Web applications be designed with sensitivity to user privacy and security needs. The risks associated with modern Web applications are familiar to the HTML5 community.

HTML5 and related specifications are being developed in W3C’s open standards process. This process allow expert review of features along with their security and privacy implications. Rich functionality that was previously available only through proprietary plugins is now documented in an open specification for all experts to review and improve. We’re pleased to see the HTML5 specifications subject to rigorous public review, since that helps make the Web a more secure environment.

Some security issues are not confined to HTML5. W3C and IETF are working closely to specify technologies and protocol extensions to mitigate some issues (such as cross-site request forgery and cross- site scripting).

What happens to XHTML?

Question: What is the impact of HTML5 on XHTML (the XML serialization of HTML)?

The HTML5 specification defines two syntaxes, an HTML syntax and an XHTML syntax. The HTML syntax is intended to be served using the text/html media type. The XHTML syntax is intended to be served using the application/xhtml+xml media type. The Polyglot Markup: HTML-Compatible XHTML Documents specification (a work in progress) describes documents that conform to both syntaxes and can therefore be served as application/xhtml+xml or text/html.

What is the process for including features in HTML5?

Question: What is the process for including features in HTML5?

The W3C HTML Working Group manages the evolution of the HTML, following the W3C Process. The next version of HTML is HTML5. At this time, we consider HTML5 to be mostly feature complete. See also Will there be an HTML6?.

Is there support for digital rights management (DRM) in HTML5 video?

Question: Is there support for digital rights management (DRM) in HTML5 video?

HTML5 doesn’t provide direct support, nor any barrier, to using DRM in video. It currently expects this to be handled by the particular codec/implementation. There are implementations which allow for DRM in HTML5 video.

Is dealing with DRM in scope for HTML5?

Question: Is dealing with DRM in scope for HTML5?

If enough stakeholders want to standardise some aspect of handling DRM in HTML5 itself as part of the inclusion of video and audio media, then it makes sense for W3C to help standardise an approach which meets the needs of the market. However like all W3C work, relevant stakeholders need to be and show they are committed to developing it rather than expecting it to happen on its own.

Does HTML5 support adaptive/live HTTP streaming?

Question: It seems that HTML5 only supports progressive download. Has W3C considered to support any advanced media delivery mechanism in HTML5, e.g. HTTP adaptive streaming? Or has it been decided that this is rather an implementation issue (i.e. selection and implementation of advanced media delivery method are up to browser implementers/providers)? If true, then CPs and service providers may have to prepare different versions of contents and also implement multiple advanced media delivery mechanisms.

HTML5 neither supports nor precludes adaptive/live HTTP streaming system. Some Web browsers, such as Safari, provide specific extensions for handling video with adaptive/live streaming while using the HTML5 video element. W3C has been working on media fragments which might be helpful to address adaptive/live HTTP streaming. There are also drafts circulating within the IETF.

Does HTML5 provide for Royalty-Free video and audio codecs?

Question: Since no video codec and container format have been specified yet, CPs and service providers have to prepare multiple versions of same video contents for browsers supporting different codecs and container formats with HTML5. Therefore, it would be nice to specify (mandatorily) supported codec(s) and container format(s). When do you estimate this can be done? Or is it possible that this can be done at all?

The W3C HTML Working Group has not identified a Royalty-Free video codec or container format that would satisfy all parties. There are various requirements to consider, including the W3C Royalty-Free licensing commitments and various open source projects (Mozilla, Webkit). W3C is still highly interested in finding a solution in this space. At the moment, two video codecs seem to cover all major Web browsers.

Will there be an HTML6?

No work is currently happening on HTML6 but feature request that are not planned to be addressed in HTML5 are available at listed under HTML.next. We’re encouraging the group to begin discussion of requirements for future versions of HTML after May 2011.

www.w3.org

Структура 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

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

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

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

Но что такое тег в 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


You May Also Like

About the Author: admind

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

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

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