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

Введение в HTML

Введение в HTML

Итак, Что такое HTML? HyperText Markup Language— «язык разметки гипертекста». Формальный язык, описывающий структуру и оформление документа.

 

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

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

Шаблон документа HTML

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

<html>
    <head>
        (название, описание страницы и прочая мета-информация, с которой мы познакомимся позже, в процессе)
    </head>
    <body>
        (наиболе ценная для вас часть, здесь находится тело вашего документа и с этой частью мы будем дальше работать…)
    </body>
</html>

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

Прямо сейчас вы наблюдаете пример готового оформления страницы. Если вы прочли статью о Firefox, то уже его установили и сейчас листаете страницы сети именно с него. Зажмите комбинацию клавиш ctrl+U или нажмите в любом месте страницы правой кнопкой мыши, а в контекстном меню выберите пункт «Исходный код страницы».

Основы HTML

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

Для начала найдите в коде и выделите для себя (мысленно) шаблонную конструкцию, которую я привел выше. Сделали? Вскоре весь остальной цветной код вам тоже станет понятным.

Теги, атрибуты и значения

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

 

Эти конструкции называются тегами. Со многими тегами мы познакомимся в процессе обучения. Все теги помещены в скобки <>. Кроме того, теги бывают парными и одиночными. Например, тег <br/> — обрыв строки (подобно клавише Enter) – одиночный тег. Обратите внимание на прямой слэш на конце. Он обязателен для одиночных тегов при использовании стандарта XHTML Transitional 1.0 . Парный тег <h1> требует закрывающего тега </h1>. Под его влияние попадет текст, помещенный между первым и закрывающим тегами. Надеюсь этот принцип вам понятен.

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

Почти любой тег имеет атрибуты (параметры), а те, в свою очередь, имеют значения. Вот такая иерархия. К примеру одиночный тег вывода картинки <img/> без атрибутов ничего не выведет. Как минимум нужно указать источник (source) картинки. Поэтому полный тег запишется так <img src=”../images/photo.jpg” alt=”My Photo”/>, где src и alt – атрибуты, а то, что в кавычках после знака равно – их значения.

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

<p>
    <img style="display: block; margin-left: auto; margin-right: auto;" alt="Основы HTML" src="/images/articles/2013/06/html1.jpg" height="300" width="740" />
</p>
<div id="attachment_228" class="wp-caption aligncenter" style="width: 310px;">
    <p class="wp-caption-text" style="text-align: center;">Исходный код страницы в Firefox</p>
</div>

Как вы уже успели догадаться, этот код выводит картинку в данной статье (скриншот исходного кода) и подпись к картинке. Обратите внимание на вложенность. Так вот вложенность элементов (или объектов разметки), обозначенных тегами, может быть бесконечной. В данном коде одиночный тег <img/> заключен в параграф <p></p>. Ниже параграф с подписью к картинкой заключен в контейнер DIV, представленный парным тегом <div></div>. С данными тегами мы познакомимся чуть позже более подробно в статях, посвященных блочной верстке.

В примере присутствует сразу три интересных атрибута: style, id и class. Все они связаны, и с ними мы будем сталкиваться очень часто, а пока обратите внимание исключительно на конструкцию тега, атрибута и его значения.

Введение в CSS

Знакомство с CSS

Каскадные таблицы стилей – CSS (Cascading Style Sheets).Это некий формальный язык оформления страницы, написанной на HTML.

 

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

Чтобы наглядно объяснить вам назначение я приведу пример: допустим, на странице у нас есть три или больше ссылок, представленных парным тегом <a>..</a>. Все ссылки мы хотим окрасить в красный цвет. Тогда во всех встречающихся ссылках нужно дописать атрибут <a color=”#FF0000”>. Хорошо, если ссылок у вас три, а если пол ста?

На странице веб сайта в определенном месте достаточно записать строку a {color:#ff0000;} и все ссылки в тексте перекрасятся. Эффективность налицо! На самом деле все еще более гибко и эффективно, и этим вы тоже сможете пользоваться.

Вектор задан и в следующих статьях я напишу как привязать css-файл к вашей странице и мы начнем изучать верстку страницы при помощи контейнеров.

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

Защитный код

Введите код с картинки в текстовое поле