HTML - что это за расширение? HTML для начинающих: коды, файлы и редакторы. Как создать HTML-файл? Что такое HTML-код страницы

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

Что такое HTML?

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

Отметим, что HTML является именно языком разметки, а не языком программирования. В данном языке нет никаких логических функций и произвести какие-либо математические расчеты на нем невозможно. Страницы HTML имеют расширение .html или .htm и обрабатываются браузерами — IE, Mozilla Firefox, Google Chrome, Yandex Chrome, Opera и др.

Теперь давайте разберемся как же браузер понимает, что и каким образом отображать на веб-странице? Это очень просто. Язык разметки гипертекста HTML имеет встроенные команды, их называют тегами. Именно по ним браузер и ориентируются.

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

Любой HTML документ (веб-станица) должен иметь определенную структуру. Это позволит избежать возможных проблем при открытии страниц в браузерах. В качестве примера давайте рассмотрим страницу, которая содержит следующих HTML код:

...

Разберем по порядку, что входит в данную структуру:

1. Первое, что идет в документе HTML — указание версии (первая строка). Для корректной работы следует указывать данную строку при верстке веб-страницы.

3. Затем идет область для верхней части сайта (шапки). Для этого служит тег . В шапке мы указываем название нашей страницы, помещая заголовок страницы между тегами . Далее указывается кодировка HTML документа (пятая строка). Это делается для правильно отображения кириллицы. Закрываем область шапки тегом .

4. Мета-тег «description» — краткое содержание страницы, предназначен для поисковых систем. Данный тег является важным для поисковой оптимизации и его необходимо заполнять.

5. Мета-тег «keywords» — ключевые слова, которые могут встречаться на странице. Данный тег также предназначен для поисковиков. В настоящее время этот тег редко используется.

6. Тело страницы открывается тегом и закрывается, соответственно, тегом . В теле веб-страницы размещается, как правило, основной контент — текст, видео, аудио и другая информация.

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

Слышали про html? Или, может быть, слышали об html страницах в Интернете? На самом деле, все просто. HTML – это, упрощенно говоря, один из языков программирования, и не самый сложный из них.

HTML – сокращение от HyperText Markup Language, что переводится как язык гипертекстовой разметки.
Содержание:

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

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

По сути, html – это изнанка страниц многих сайтов. Часто их красивое оформление создается с помощью языка разметки html. Иначе это еще называют создание страниц с помощью html верстки.

Сайты могут создаваться и на других языках программирования, например, на языке php.

Ученый из Британии Тим Бернерс Ли разработал язык html в 1986-1991 годах в Швейцарии. По сути html позволяет создавать простые, но при этом красивые документы. Уже позже в html были добавлены мультимедийные возможности (видео и т.п.) и поддержка работы с гипертекстом (для создания гиперссылок).

Для работы с html были созданы всем известные программы-браузеры, они же , такие как:

• Mozilla Firefox (Мозилла Фаерфокс),
• Internet Explorer (Интернет Эксплорер),
• Google Chrome (Гугл Хром),
• Opera (Опера),
• Яндекс (Yandex) браузер,
• Safari (Сафари) и
• другие.

Первоначально основная функция браузера состояла как раз в интерпретации кода HTML и выводе визуального результата на экран монитора пользователя.

Что такое html страница?

Документы, файлы, страницы, созданные на языке html, имеют расширение вида.html или.htm. Например, html-страница (или html-файл, или html-документ) может иметь название вида:

• тест.html,
• html,
• html или
• название.html.

Строго говоря, тест.html – это имя файла (или имя страницы), где

• тест – имя файла, а
• .html – расширение имени файла (или расширение имени страницы), которое обычно просто называют «расширение».

Сейчас более распространенным вариантом вместо слова «расширение» стало слово «формат». Поэтому выражение «формат html» означает, что файл (или страница) написан на языке html и имя такого файла имеет расширение html. Значит,

файл c именем тест.html имеет формат html.

Операционная система Windows по умолчанию скрывает расширения файлов (то есть, форматы файлов). Программисты сделали это «не со зла», а для того, чтобы уберечь пользователя от бездумного изменения расширений файлов. Можно сделать так, чтобы по умолчанию расширения файлов были открыты. В Windows 7 для этого:

• кликаем по кнопке Пуск,
• открываем Панель управления,
• находим Параметры папок,
• открываем вкладку Вид, прокручиваем в самый низ и
• убираем галочку напротив опции «Скрывать расширения для зарегистрированных типов файлов»,
• жмем «ОК».

Рис. 1. Открываем все расширения файлов

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

В Интернете также встречаются сайты-одностранички, состоящие всего из одной html страницы. Например, это может быть

• интернет-визитка человека или фирмы, либо
• страница, продающая через Интернет какой-либо товар или услугу.

Язык HTML постоянно развивается и на сегодняшний день существует несколько его версий, начиная от HTML 2.0 от 22 сентября 1995 года и заканчивая последней версией языка HTML 5 от 28 октября 2014 года. В сентябре 2016 года планируется выпуск HTML 5.1.

Что такое HTML теги?

HTML – это язык разметки документов с помощью тегов. Теги заключаются в треугольные скобки “< >”. Теги могут быть парными и непарными.

• Например, тег “b”, заключенный в треугольные скобки, делает текст жирным

текст, выделенный жирным

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

• А тег “i” делает текст курсивным.

текст, выделенный курсивом

В результате получим: текст, выделенный курсивом

• Есть еще тег для перевода строки “br”.
• С помощью тега “a href” выделяют гиперссылку.
• Тег для заголовка документа – . Это тег, открывающий документ. Он является парным в том смысле, что для него обязательно нужен закрывающий тег со слешем .
• После заголовка идет основная часть, которая находится между открывающим тегом и закрывающим тегом . Этот тег так же, как тег head, является парным: его нужно открыть и не забыть закрыть.

В парных тегах закрывающий тег со слешем необходим по той причине, что он отменяет (точнее, корректно завершает) действие открывающего тега.

Тегов HTML существует много, в Интернете можно без труда найти учебники HTML.

Как создать html файл

Создать самостоятельно html страницу (или html файл) на своем компьютере и запустить свое творение в браузере очень просто.

1) Открываем Блокнот (простой текстовый редактор, который входит в состав Windows). Его можно найти на своем компьютере, введя в строку Поиск запрос: Блокнот.

2) Копируем и вставляем в Блокнот следующий текст:

Привет! Это моя первая HTML страница.

Вторая строка, ура!

3) Важный момент, без которого html файл не будет работать: в Блокноте сохраняем файл строго(!) в формате html, как показано на скриншоте. Файл можно для простоты сохранить на Рабочем столе на своем компьютере.

Рис. 2. Обращаем внимание на Тип файла и сохраняем файл в формате html

1 на рис. 2 – Кликаем «Рабочий стол», чтобы там сохранить html файл.
2 на рис. 3 – Открываем выпадающее меню напротив «Тип файла».
3 – В этом меню выбираем «Все файлы».
4 – вводим любое имя (у меня 001) и после точки обязательно(!) вводим html.
5 на рис. 2 – жмем «Сохранить».

4) На Рабочем столе находим файл 001.html:

Рис. 3. Html файл на Рабочем столе

У меня браузером по умолчанию является Google Chrome, поэтому значок у файла имеет вид значка этого браузера. Если будет другой браузер по умолчанию, то у файла 001.html будет другой значок.

Кликаем по файлу (рис. 3) 2 раза мышкой и в итоге видим в браузере свою первую страницу на html:

Рис. 4. Проверка, как выглядит html страница в браузере

Таким образом, у нас получилась локальная страница html в том смысле, что она доступна только с вашего, локального компьютера. Чтобы страница была доступна другим, надо ее загрузить в Интернет. Точнее, разместить , который доступен всегда: 24/7/365 (24 часа в сутки, 7 дней в неделю, весь год). Тогда такую страницу сможет увидеть каждый пользователь Интернета.

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

Приветствую вас на своем блоге о веб-технологиях. Сегодня я хотел бы написать статью для тех, кто является новичками в сфере сайтостроения. В частности, о языке html . Что это такое и для чего оно нужно? Я попытаюсь объяснить вам максимально подробно.
Содержание статьи

Официальное определение

Я считаю, что лучше Википедии сформулировать определение не смогу, поэтому:
Цитата

HTML (от англ. HyperText Markup Language - «язык гипертекстовой разметки») - стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML).

А теперь я попытаюсь вам это издалека объяснить. Все в нашей жизни из чего-то состоит. Дом из строительных материалов, воздух – из таких элементов, как азот, кислород, углекислый газ и другие. А у нас, значится, веб-страницы (например, сейчас вы находитесь на такой странице). И они тоже из чего-то должны состоять, не так ли? Так вот, это что-то и является языком html. Правда, не он один формирует страницу, но об этом уже далее по ходу статьи.

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

Итак, html – это специальный язык, с помощью которого создаются веб-странички, из которых собственно состоит весь интернет. Он является строительным материалом для страниц. На английском аббревиатуре расшифровывается так: HyperText Markup Language .

Почему гипертекст? Все просто, он отличается от обычного текста тем, что по ходу чтения информации в интернете вы можете спокойно нажать на другие ссылки и перейти на другие страницы, а при обычном чтении книги или текстового документа вы так сделать не можете.

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

Например, в футболе есть боковые и лицевые линии, штрафная и вратарская зоны, центральный круг, угловые флажки и т.д. Так вот, html отвечает за разметку веб-странички, за ее структуру. Это можно сравнить со скелетом человека или каркасом здания.

Html формат – что это такое и чем его открыть

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

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

Статический файл также можно легко открыть в любом веб-обозревателе, но если он содержит расширение php, то только на виртуальном или локальном сервере.

Из чего состоит html

Синтаксисом, как правило, называют правила написания кода на различных языках. Html полностью состоит из тегов и их атрибутов, а также непосредственного содержимого. Таким образом, изучение языка заключается в изучении роли основных тегов и атрибутов.

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

Как пишутся теги

Тег пишется так: его имя заключается в угловые скобки, а зависимости от ситуации ему дописываются атрибуты и содержимое. Примеры:

Содержимое тега

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

Например, тег img отвечает за вставку картинки на веб-страницу. Согласитесь, в изображение не нужно вписывать дополнительно никакую информацию, все необходимое задается в атрибутах. В нашем случае атрибут src задает путь к изображению.

Ну а первый пример – это парный тег p . Он отвечает за вывод абзаца (paragraph ). Тут мы видим закрывающую часть, она показывает, что в этом месте абзац нужно закончить. Также есть содержимое, что логично. Не может же абзац быть пустым, без текста? Весь нужный текст записывается между открывающей и закрывающей частями.

Вот таким вот образом работают в html все теги. Конечно, все я описывать не буду, ведь их несколько десятков (самых основных). Например, за вывод крупного заголовка отвечает тег h1 , за создание таблицы – table , нумерованного списка – ol . ().

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

Атрибуты тегов

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

<тег имя атрибута="значение атрибута">

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

В первой строчке кода мы с помощью тега a создали ссылку и для нее прописали такие атрибуты: href – путь, по которому нужно перейти, target – специальная команда, которая определяет, нужно ли открывать ссылку в новом окне, а значение _blank как раз это и делает. Как видите, атрибуты записываются через пробел, а их значения в двойных кавычках.

Второй пример: атрибутом charset определяем кодировку страницы как utf-8 .

Третий: записываем абзацу атрибут class = "two" , который привязывает к нему стилевой класс с указанным именем (имя может быть произвольным) и теперь в каскадных таблицах стилей (css) мы можем обратиться к этому элементу и оформить его.

Итог

Целью этой статьи было донести до вас, что собой представляет html, для какой цели он нужен и из каких элементов он состоит. На самом деле это одна из самых простых веб-технологий, с которой можно разобраться буквально за пару недель. Как изучить этот язык я написал в , советую вам почитать, если интересно. На этом я буду заканчивать, а вам рекомендую не бояться начинать изучение, если вы сомневаетесь.

А зачем это мне?

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

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

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

Что такое Html

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

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

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

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

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

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

<тег>.

< тег> < / тег> .

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

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

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

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

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

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

< ! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" > < html > < head > < meta http - equiv = "Content-Type" content = "text/html; charset=utf-8" > < title > Документбезназвания< / title > < / head > < body > < / body > < / html >

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

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

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

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

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

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

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

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

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

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

< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < html xmlns = "http://www.w3.org/1999/xhtml" > < head > < title > Строгоесоответствиестандартамязыка< / title > < meta http - equiv = "Content-Type" content = "text/html; charset=utf-8" / > < / head > < body > < p > . . . < / p > < / body > < / html >

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

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

Термин HTML (Hyper Text Markup Language) означает "язык маркировки гипертекстов". Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.

Со времени создания первой версии HTML претерпел некоторые изменения. Как и многое другое в компьютерном мире, версии, или спецификации , HTML оказались пронумерованными. Известны спецификации 2.0, 3.0, 3.2, 4.0 и т.д.

Для освоения HTML по этому Руководству Вам понадобятся две вещи:

Любой браузер , т.е., программа, пригодная для просмотра HTML-файлов (Internet Explorer);

Любой редактор текстовых файлов, поддерживающий русский язык в выбранной кодировке. Если на компьютере установлен Windows , вполне подойдет Word .

Нужно использовать текстовый редактор для подготовки HTML-файлов, а браузер – как инструмент контроля за сделанным.

1. 2. Первый html-документ

   2. 2.1 Как устроен html-документ

   HTML-документ – это просто текстовый файл с расширением *.html (Unix-системы могут содержать файлы с расширением *.htmll).

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

   Вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками "<" и ">". Такой фрагмент (например, ) называется меткой (по-английски – tag, читается "тэг").

   Большинство HTML-меток – парные, т.е. на каждую открывающую метку вида есть закрывающая метка вида с тем же именем, но с добавлением "/".

   Метки можно вводить как большими, так и маленькими буквами. Например, метки , и будут восприняты браузером одинаково.

   1. 2.2 Обязательные метки ...

   Метка должна открывать HTML-документ. Аналогично, метка должна завершать HTML-документ.

   ...

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

   Все, что находится между метками , толкуется браузером как название документа. Internet Explorer , например, показывает название текущего документа в заголовке окна и печатает его в левом верхнем углу каждой страницы при выводе на принтер. Рекомендуется название не длиннее 64 символов.

   ...

   Эта пара меток указывает на начало и конец тела HTML-документа, каковое тело, собственно, и определяет содержание документа.

   < H 1> ... H 1> - < H 6> ... H 6>

   Метки вида (где i – цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня – самый крупный, шестого уровня, естественно, – самый мелкий.

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

   Метки и

   Могут содержать дополнительный атрибут ALIGN (читается "элайн", от английского "выравнивать"), например:

   Выравнивание заголовка

   по центру

   Образец абзаца с выравниванием