Слышали про 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-файл.

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

Для тех, кто любит видео:

Первый способ, который мы рассмотрим по созданию файла HTML - это способ создания файла в простом текстовом редакторе.

Способ 1. Создаем файл html в программе «Блокнот».

Откройте любой текстовый редактор, например, редактор «Блокнот», который входит в состав операционной системы Windows. Найти эту программу можно через главное меню Пуск -> Все программы ->Стандартные -> Блокнот.

И сохраняем текстовый файл с расширением *.txt.

Теперь нужно поменять расширение этого файла с *.txt на *.html.

Если у Вас не отображается расширение файлов, вот заметка:

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

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

Аналогично html-файл создается с помощью программы Notepad++.

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

Одной из таких программ является универсальный редактор кода Dreamweaver (я писал об этой программе ).

Способ 2. Создание файла HTML в универсальном редакторе кода Dreamweaver.

После того, как программа загрузиться появляется следующее окно приветствия:

Все, что нужно сделать, это выбрать в этом окне, в разделе «Создать», файл HTML.

После этого файл будет успешно создан. Причем, обратите внимание, что программой был автоматически добавлен некоторый код.

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

Теперь, для того, чтобы этот файл появился на жестком диске, его нужно сохранить. Делается это через меню «Файл – Сохранить как…»

Обратите внимание, чтобы при сохранении вы случайно не убрали расширение html, которое присваивается файлу.

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

Домашнее задание

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

HTML документ - это обычный текстовой файл c расширением.html , который содержит HTML-код. HTML документ иначе ещё называют HTML файлом .

Чтобы из обычного текстового файла (с расширением.txt) сделать HTML документ, нужно с.txt на.html .

Открыть файл, сохраненный с расширением.html , для просмотра в браузере можно двумя способами:

1. Кликнуть по нему два раза левой кнопкой мыши, в этом случае HTML документ откроется в том браузере, который выбран по умолчанию.
2. Кликнуть по нему ПКМ → навести курсор на открыть с помощью... → выбрать нужный браузер.

При получении HTML документа браузер будет отображать его в виде веб-страницы (веб-страница - это то, что отображается в окне браузера). Рассмотрим это на примере. Создадим HTML-документ и расположим в нём следующий HTML-код:

Мой первый заголовок

Мой первый абзац

Теперь откроем HTML файл браузером. В окне браузера мы не увидим отображения самого HTML-кода, потому что он будут интерпретирован для отображения содержимого страницы в нужном виде. Результат данного кода в окне браузера:

Чтобы отредактировать код HTML документа, нажимаем на него ПКМ → наводим курсор на открыть с помощью... → и выбираем нужный редактор, если в списке нет нужного редактора, жмём Выбрать программу... и выбираем нужный редактор. Некоторые редакторы (для примера возьмем notepad++ ) можно выбрать прямо в контекстном меню, нажав по документу ПКМ и выбрав сверху Edit with Notepad++ (редактировать с помощью notepad++).

Смена расширения файла

Windows:

1. В открытом редакторе (или в обычном текстовом документе) нажимаем файл → выбираем сохранить как → внизу в текстовом поле имя файла: напишем к примеру так: mypage.html → жмём сохранить. Всё, HTML документ создан.
2. Кликаем правой кнопкой мыши (ПКМ ) на текстовом файле → выбираем переименовать и меняем расширение с.txt на.html . Чтобы воспользоваться данным способом, нам надо сделать так, чтобы по умолчанию у всех файлов были доступны их расширения, делается это следующим образом: открываем Панель управления → выбираем Параметры папок (в Windows 10 данный пункт называется Параметры проводника) → вкладка Вид → прокручиваем в самый низ и убираем галочку на Скрывать расширения для зарегистрированных типов файлов.

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

Итак начнем создавать сайт.
1. Создайте у себя на жестком диске (лучше локальный диск D или E) папку и назовите ее “moisait”, в этой папке создайте еще одну папку –“images” – названия вводим без кавычек. Еще я посоветовал бы создать себе папку отдельно для книг и статей, ссылок, не всегда запомнишь, то, что читал, иногда приходится искать снова. Сама папка moisait не будет потом помещена в интернет, будет перенесено только содержимое вашей папки – собственно ваш сайт и в сети интернет он будет выглядеть так же как и на компьютере.
2. Выделю отдельным пунктом – названия всех папок, всех файлов, всех картинок должны быть напечатаны английскими буквами, привыкайте.
3. В папку moisait помещаем нашу первую страничку, с именем index и расширением htm – для статичных сайтов это нормально. Итак если вы знаете как, то поместите в папку файл index.htm . Я обращаю ваше внимание, что разширения обычно не видно и даже если вы дадите первой страничке своего сайта имя index.htm расширение может быть совсем другим. Я советую включить расширения. Для этого нажимаем на значке «Мой компьютер» и в открывшемся окне папки жмем «Сервис/Свойства папки»

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

4. Теперь, переходим в папку moisait кликаем правой кнопкой мыши и выбираем в появившемся окне «Создать/ Текстовый документ». Затем появившийся текстовый документ «Текстовый документ.txt» переименовываем в index.htm спрашиваю переименовать или нет? Нажимайте «Да». Значок фала поменяется, наведите на него указатель мыши и нажмите правую кнопку, в появившемся окне выберите « Открыть с помощью — Internet Explorer».
5. Нажимаем правой кнопкой мыши на рабочем поле (белое поле) и выбираем пункт «Просмотр HTML – кода». (В опере Ctrl+F3)

6. Скопируйте текст приведенный ниже в ваш файл

charset=windows-1251″>

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

7. В скопированном тексте вам предстоит теперь произвести небольшие дополнения.
— Между тегами (тайтл) поместите название вашего сайта – например: , на других страницах заголовки будут меняться – они тдолжны соответствовать содержанию – например зимние пейзажи, река и т.д.

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

Это строка с кодировкой в которой будет текст, сейчас стоит нужная кодировка, поэтому ничего не меняем, если только вы не хотите поставить другую кодировку, например UTF-8 и тогда ваша строка будет выглядеть так

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

— — описание – можно поместить первый абзац из вашего текста на странице.

Старайтесь, чтобы кавычек лишних не было, добавляйте в ключевые слова и описание текст без кавычек

8. Между тегами

Пишем «Привет мир!» и обновляем страничку. Можно нажать на кнопку браузера или на клавиатуре — F5.

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

Кто ничего не делает тот не ошибается – с ошибками прошу обращаться сюда.

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

С его помощью мы можем не только просматривать содержимое сайтов, но и создавать «web»-страницы.

Сам язык был создан английским ученым по имени Тим Бернерс-Ли. Его разработка велась в Женеве в здании Европейского Центра, занимающегося ядерными исследованиями, примерно в 1986 – 1991 годах. Первоначально HTML должен был стать языком, позволяющим обмениваться технической и научной документацией среди простых людей (то есть, не являющихся какими-либо специалистами в области верстки дизайнов). Однако позже, именно он стал основой для «жизни» интернета.

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

Как открыть файл html. Инструкция.

Способ №1. С помощью текстового редактора.

Если вам необходимо внести какие-нибудь изменения в файл подобного формата, то необходимо открывать его с помощью текстового редактора. Это можно сделать с помощью стандартной программы «Блокнот». Но лучше всего использовать программу «Notepad++». Она позволяет быстро находить необходимый «кусок» кода, подсвечивает синтаксис, интуитивно понятна и так далее.

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

2. Теперь нажмите на нужный файл правой кнопкой мыши, наведите курсор на параметр «Открыть с помощью» и выберите «Notepad++». (Если программа будет находиться в основном меню, как показано на , то нажимать на пункт «Открыть с помощью» не обязательно).

3. Перед вами откроется окно с «кодом», который вы можете теперь редактировать.

Способ №2. С помощью веб-браузера.

Если вы хотите просто просмотреть файл, который скачали/создали, то . При этом он может быть любым, будь то Опера, Мозилла или же Хром.

Нажмите на свой файл два раза левой кнопкой мышки. Если ничего не произошло, то нажмите на него правой кнопкой вашей мышки и выберите параметр «Открыть с помощью». Затем во всплывшем меню выберите необходимый (наиболее часто используемый вами) браузер.

Такими нехитрыми способами вы сможете, как редактировать, так и открывать свои html файлы.