HTML. Введение

Партнерка на США и Канаду по недвижимости, выплаты в крипто

30% recurring commission
Выплаты в USDT
Вывод каждую неделю
Комиссия до 5 лет за каждого referral

HTML. Введение.

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

Исходный код самой веб-страницы является обычным текстовым документом, который можно написать в обычном Блокноте (Пуск/Все программы/Стандартные/Блокнот) входящем в состав любой Windows подобной операционной системы и состоит всего из двух основных компонентов:

· текст, который и надо набрать в окне браузера;

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

Этот текстовый документ сохраняют с расширеним. html или. htm (большой разницы нет) и получают готовую веб-страницу.

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

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

НЕ нашли? Не то? Что вы ищете?

Полезный совет: Удобнее пользоваться при наборе кода не «Блокнотом» а более продвинутой и к тому же бесплатной программой Notepad++. Функции программы те же, но все более наглядней и удобнее например есть подсветка кода, т. е. теги, параметры тегов и текст отображаются разными цветами, при написании тега неправильно сразу изменяется цвет.

Браузеры

Сам HTML-файл обычно размещается на сервере и для его просмотра необходима специальная программа — браузер, например IE, Mozilla Firefox, Opera. В задачу браузера входит подключение к удаленному серверу, получение кода HTML и его интерпретация согласно спецификации. Иными словами, браузер преобразует HTML-документ в веб-страницу, которую мы и наблюдаем, когда работаем по Интернету. Заметим также, что браузер вполне корректно работает и на локальном компьютере, это позволяет легко проверять работу созданных Вами HTML-документов. Для упрощения задачи мы будем работать с браузером IE, этот браузер есть у всех пользователей Windows т. к. он входит в стандартный пакет установки операционной системы.

СОЗДАНИЕ ПЕРВОЙ WEB-СТРАНИЦЫ.

Полезный совет: Существует множество визуальных редакторов облегчающих создание HTML документов, например Dream Viewer, Word, различные конструкторы сайтов и т. д. Но для начала, если Вы действительно хотите сами разбираться, рекомендуется все таки освоить написание кода. Для этого существует несколько причин. Основные:

· Если вдруг что-то случиться Вы сможете самостоятельно, а главное оперативно (и бесплатно) устранить проблему.

· При необходимости самостоятельно внести коррективы в свой сайт (добавить или удалить дополнительные разделы, страницы).

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

Не важно, чему посвящен ваш сайт футболу, автомобилям или аквариумным рыбкам, без разницы на какую он тему, механизм всегда одинаков. Открываем программу Блокнот, входящую в Windows (Пуск > Все программы > Стандартные > Блокнот) или Notepad++:

Листинг 1.

<html>

<head>

<title>Автомобили со всего мира</title>

</head>

<body>

Наш сайт посвящен автомобилям и все что с ними связано. Здесь Вы найдете много полезной и интересной информации.

</body>

</html>

Сохраняем этот файл на жестком диске (желательно завести отдельную папку, в которую вы будете складывать все файлы Вашего сайта) под именем index. html обязательно с расширением. html или htm. Когда Ваш сайт будет размещен в интернете, то при наборе в адресной строке браузера адреса сайта, например http://www. ***** (или другого доменного имени), по умолчанию всегда открывается файл index. html . Теперь как обычно два раза щелкаем левой кнопкой мыши по этому файлу и видим:

Рисунок 2.1

Вы создали свою первую HTML-страницу.

Обращаем внимание, на исходный код, слова, заключенные в угловые скобки, являются служебными словами языка HTML. Их называют тегами (tags). Теги никогда не отображаются при просмотре страницы - они служат для управления оформлением.

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

В языке HTML совершенно не имеет значения, строчными или прописными буквами записаны теги. Можно написать </HTML> или <html> — для браузера это одно и то же.

В рассмотренном примере вы видите еще один тег — <body> . Этот тег тоже парный. Все, что расположено между ним и его закрывающим тегом </body>, считается "телом" документа и отображается на экране это то что видно при открытии страницы. HTML-документы, помимо "тела", обычно содержат еще и заголовок, в котором заключена различная служебная информация. Заголовок располагается между тегами <head> и </head>. Между этими тегами пишется служебная информация необходимая для работы браузера.

Между тегами <title> и </title> пишут то, что видно в заголовке окна браузера в данном случае у нас прописано <title> Автомобили со всего мира</title>.

Но это еще не всё, для нормального отображения Вашей страницы, браузеру необходимо сообщить ещё некоторую служебную информацию. Которая прописывается между тегами <head> и </head> . То, что мы сейчас пропишем необходимо только браузеру, посетитель Вашего сайта этих строк кода не увидит. Поправьте Ваш код как в листинге 2.

Листинг 2.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. w3.org/TR/html4/loose. dtd">

<html>

<head>

<title>Автомобили со всего мира</title>

</head>

<body>

</body>

</html>

Коротко поясним что же мы добавили в код страницы. Первая строка:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. w3.org/TR/html4/loose. dtd">

Поясняет, что документ написан на языке HTML версии 4.01 наиболее стабильной на сегодняшний день (есть и другие версии HTML, они не очень сильно отличаются). Обратите внимание на следующую строку:

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

Здесь в кавычках пишутся ключевые слова, по которым Ваш сайт будет отыскиваться поисковыми машинами, такими как Yandex, Google и т. д. Естественно тут необходимо писать слова, применительно к своему сайту.

То же самое что и ключевые слова, только здесь в кавычках указывают словосочетания и предложения, описание Вашего сайта которое будет видно в поисковиках. В настоящее время теги <meta name="keywords"> и <meta name="description"> не столь актуальны как ранее, но все же рекомендуется их прописывать. Эти теги являются одиночными т. е. их не нужно закрывать.

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

ФОРМАТИРОВАНИЕ ТЕКСТА.

Для форматирования текта, необходимо открыть код в программе Блокнот и между тегами <body> </body> (после первой ранее добавленной строчки) добавляем следующий текст:

Листинг 3.1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. w3.org/TR/html4/loose. dtd">

<html>

<head>

<title>Автомобили со всего мира</title>

</head>

<body>

Нынешний год - пора обновления модельного ряда. Оно продолжится по меньшей мере до осени, когда на рынок выйдет Mercedes-Benz GLK, новый компактный SUV. Первая жертва: из прайс-листов вычеркнута - модель Sportcoupe 2000 года рождения, с весны его заменит прямой наследник - CLC.

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

Переходя от Sportcoupe к CLC, мерседесовские инженеры усовершенствовали и заменили более 1100 элементов. Из значимых изменений, которыми может похвастать CLC, отметим более «короткий» руль, значительно облегчающий управление, современную информационную систему, спутниковый навигатор с картами на DVD и на жестком диске. Внешне CLC можно узнать по новому дизайну передней части, который роднит новинку с новым С-классом. Сзади изменился дизайн крышки багажника, обновилась форма фонарей.

Из двигателей CLC предлагает четыре четырехцилиндровых (три бензиновых и дизель) мощностью от 122 до 184 л. с. и две V-образных бензиновых «шестерки» - 204 и 272 л. с. Сильнее других изменился 1,8-литровый мотор, который устанавливается на версию CLC 200 Kompressor: его мощность поднялась на 20 сил (до 184 л. с), а расход на 100 км по сравнению с предыдущей модификацией сократился почти на 1 л. Серийно все двигатели агрегатируются с шестиступенчатой «механикой», но на версиях с четырехцилиндровым двигателем можно заказать и пятидиапазонный «автомат». Семидиапазонный 7G-Tronic будет доступен с моторами V6. Оборудование салона достойно великой марки, причем все - от навигатора до систем безопасности - основано исключительно на проверенных решениях. В салонах российских дилеров автомобиль появится во втором полугодии.

</body>

</html>

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

Рисунок 3.1

В результате полностью не форматированный текст. Теперь необходимо его отформатировать. Это и называется гипертекстовой разметкой текста и для этого применяются теги форматирования.

В HTML текст принято заключать в парные теги <p> </p> Открываем Блокнот и каждый абзац всего текста заключаем в парные теги <p> </p> , т. е. каждый абзац должен выглядеть вот так:

Листинг 3. 2

<p>Нынешний год - пора обновления модельного ряда. Оно продолжится по меньшей мере до осени, когда на рынок выйдет Mercedes-Benz GLK, новый компактный SUV. Первая жертва: из прайс-листов вычеркнута - модель Sportcoupe 2000 года рождения, с весны его заменит прямой наследник - CLC. </p>

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

Рисунок 3.2.

Т. е. для создания каждого нового абзаца используется тэги <p>, а для перехода на новую строчку без создания абзаца - тэг <br> . Тэги <br> закрывать не нужно они называются одиночными.

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

<p align=left>Выравнивание текста по левому краю</p>

<p align=right>Выравнивание текста по правому краю</p>

<p align=center>Выравнивание текста по центру</p>

<p align=justify>Текст, находящийся между этими элементами выравнивается по ширине</p>

<p align=justify>Выравнивается по ширине</p>

По экспериментируйте с разными вариантами выравнивания текста и остановитесь на том который Вам больше нравится:

Форматирование заголовков.

В HTML документах для создания заголовков используют парные тэги <hn></hn>, где n – число от 1 до 6. Заключив текст между этими тэгами, вы получите заголовок определенного размера выделенного жирным цветом. Чем больше цифра – тем меньше размер букв или цифр в заголовке, т. е. самые большие буквы (или цифры) будут у <h1>Заголовок</h1>, самые маленькие у <h6>Заголовок</h6>

<h1>Заголовок</h1>

<h2>Заголовок</h2>

<h3>Заголовок</h3>

<h4>Заголовок</h4>

<h5>Заголовок</h5>

<h6>Заголовок</h6>

Выглядеть заголовки будут так:

Рисунок 4.1.

Раз уж мы решили что наша страничка посвящена автомобилям давайте придумаем заголовок, например "Обзор автомобилей 2008 года" и заключим его в парные теги <h2> </h2>.

Выравнивание заголовков осуществляется так же как абзацев через атрибут align и значение этого атрибута "center" . Кстати значения атрибутов принято заключать в кавычки. Наш заголовок в коде должен выглядеть вот так:

Обзор автомобилей 2008 года.

А страничка должна иметь вот такой вид:

Рисунок 4.2.

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

Форматирование текста

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

Жирное начертание

Насыщенностью - называют увеличение толщины линий шрифта и соответственно контраста. Обычно различают четыре вида насыщенности: светлое начертание, нормальное, полужирное и жирное. Однако с помощью HTML можно установить только нормальное и жирное начертание. Для установки текста жирного начертания применяется два парных (открывающий и закрывающий) тега: <b> </b> и <strong> </strong>. В настоящее время рекомендуется применять тег: <strong> </strong>.

<strong>Сильное выделение текста</strong>

Курсивное начертание

Курсивный шрифт представляет собой не просто наклон отдельных символов, для некоторых шрифтов это полная переделка под новый стиль, имитирующий рукописный. Курсив для текста определяют два тега: <i> </i> и <em> </em>.

<em>Курсивное начертание шрифта</em>

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

Поэтому при написании кода HTML-страницы рекомендуется применять теги: <strong> </strong> и <em> </em>.

Партнерка на США и Канаду по недвижимости, выплаты в крипто

Домашний очаг

Справочная информация

Техника

Общество

Образование и наука

Мир

Бизнес и финансы