Язык разметки HTML

давай учить htmlЗдравствуй, дорогой читатель. Настала пора рассказать про язык разметки HTML, с помощью которого созданы  абсолютно все сайты Интернета — и российского и буржуйского и даже китайского.  Но это не язык программирования, как думают некоторые, а язык разметки гипертекста.

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

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

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

 Веб-страница изнутри

<html>
<head>
<title>
Это мой сайт
</title>
</head>
<body>
Это мой текст
</body>
</html>

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

На рисунке ниже показана расшифровка этого кода:

язык разметки HTML структура

 

А вот как выглядит эта же страница в браузере Mozilla Firefox. Я показал, где отображаются текст заголовка Title и текст тела Body

язык разметки HTML структура страниц

Как создать html-страницу

Всё очень просто. Для наглядности скопируй текст с тегами, что находится выше, в любой текстовый редактор, например, блокнот и сохрани его на рабочий стол. Нажми правую кнопку и выбери «переименовать». Вместо расширения .txt, как у обычного текстового файла, укажи расширение .html или .htm.  Значок блокнота сменится на значок браузера, щёлкнув по которому, ты увидишь свою первую веб-страницу.

Если же расширение не отображается, тогда нужно сделать следующее.

Найти на компьютере: Оформление и персонализация — Параметры папок — Вид.

Параметры-папок

Показывать расширение файлов всегда полезно, чтобы злоумышленники не могли рассчитывать, что вы откроете файл с заразой типа «подарочек.jpg», который в самом деле будет «подарочек.jpg.exe». Очень легко без расширения, которое Виндоус скрывает по умолчанию, принять запускающий файл «зловреда» со скрытым расширением .EXE за обычную картинку.

Смотри видео по созданию HTML-страниц


Программы для создания HTML-страниц

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

Для интеллектуального контроля за написанием html кода вручную существует множество программ с подсветкой кода.  Среди любителей-разработчиков наиболее популярны Notepad++, PHP Designer, Dreamweaver, хороша также программа Adobe Muse!

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

язык разметки HTML и дримвейвер-создание html страниц

Зачем же тогда учиться писать код вручную? Дело всё в том, что любые визуальные редакторы, даже редактор, встроенный в Вордпресс,  генерируют иногда столько много мусорного собственного кода, что страницы весят во много раз больше написанных обычным способом, с помощью головы и рук.  Да если ещё учесть, что поисковые системы сейчас обращают внимание на чистоту кода, тогда поневоле задумаешься об изучении Html, чтобы контролировать весь процесс.

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

Что такое браузер на самом деле

Много людей считают, что браузер предназначен для поиска сайтов в интернете, что это и есть его назначение. Таким образом, в понимании пользователя ПК создаётся ошибочное мнение о назначении браузера.  В самом деле же, браузер – это программа для интерпретации html-кода, CSS-кода, JS-кода и др. Иными словами – это прикладное программное средство для отображения веб-страниц и других документов.

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

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

 Языка разметки HTML и основные теги

<html></html> говорит браузеру, что это Html-документ
<head></head>здесь находится информация для поисковых машин
<body></body>содержимое отображается в окне браузера
<title></title>название страницы
 <h1></h1><h6></h6> Заголовки: от самого большого до самого маленького
<b></b> <i></i>Жирное и наклонное выделение текста
 <a href=»URL»>текст ссылки</a> Говорит браузеру, что это ссылка с текстом «текст ссылки«
<p>Создание нового параграфа
 <p align=> выравнивание параграфа (left, right, justify или center)
 <form></form>Говорит браузеру , что нужно создать форму

Эта таблица приведена с целью показать только основные дескрипторы.

В современной версии HTML-5 вместе с новыми тегами появилось огромное количество новых возможностей, которые и не снилось разработчикам сайтов ещё 10 лет назад. К счастью, мы живём в век информации и всё можно найти в Интернете абсолютно бесплатно.

Стили в html-документе

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

CSS является стилевым дополнением к языку html и без него не существует.

Стили в Html внедряются так:

head>
  <style>
    hr { color: sienna; }
    p { margin-left: 20px; }
    body { background-image: url("images/back40.gif"); }
  </style>
</head>

Если же применяется внешний файл стилей styles.css, то он подключается к документу html так:

<link rel="stylesheet" type="text/css" href="styles.css">

Пример записи CSS-правил:

p {color: black; font: x-small}.

Говорит браузеру, что цвет абзаца <P> чёрный-black, а шрифт имеет размер x-small (мелкий)

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

.anons
{border: 2px outset green;
border-radius: 10px;
width: 360;
font-family: «Yeseva+One»;
font-size: 16px;
line-height: 1.2em;padding:10px 10px 10px 20px;
margin:10px auto 20px;
text-align:left;
background-color: #a7cece;
}

в последней строке  есть интересный фрагмент: background-color: #a7cece;

#a7cece –  это html-цвет. С помощью набора символов HEX – шестнадцатиричной системы: цифр от 0 до 9 и букв от A до F можно задать абсолютно любой цвет.  Здесь задан симпатичный аквамариновый.

К теме CSS я ещё вернусь в отдельных публикациях.

 Как можно выучить язык разметки HTML

  • В Сети полно справочников по HTML (хтмл).  Мне нравится сайт http://htmlbook.ru. Я сюда часто обращаюсь за справочным материалом. Рекомендую для экономии времени.
  • Мне нравится  книга от американских авторов. Это увлекательнейший учебник-самоучитель языка HTML/CSS с такой классной подачей материала, что будешь читать, не отрываясь. Всё рассказано просто и понятно. Её можно скачать бесплатно в сети, но лучше купить и поработать с ней  как с книгой.

язык разметки HTML/изучаем html

Самый лучший способ освоить язык разметки HTML (хтмл) – это скачать самые известные учебные курсы в рунете, к тому же  некоторые из них – совершенно бесплатные. Лучшего материала по созданию сайтов в рунете я не знаю. Заходи на сайт Попова Евгения и скачивай тонны полезнейшей учебной информации. Она пригодится всем, кто работает во фрилансе.

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

Ваш e-mail не будет опубликован.

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

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