Урок 3. Знакомство с тегами.Прежде чем разобраться в структуре созданной нами страницы, нужно понимать, что такое теги. Теги являются основной составляющей html.
С помощью тегов мы можем добавить на нашу страницу различные объекты (текст, таблицы, картинки, ссылки). Так же с помощью тегов мы можем влиять на внешний вид этих объектов (цвет, размер). В созданной нами странице написано "Здравствуйте! Это моя первая веб-страница!", данный текст написан без использования тегов. С помощью определенных тегов, мы можем сделать так, чтобы эта надпись выводилась браузером на экран, например курсивом, либо жирным шрифтом.
Этот урок один из самых важных. Я рекомендую отнестись к нему серьезно. Если Вы прочитаете первую половину урока и что-то не поймете - не огорчайтесь, приступите к выполнению практической части, она, как правило помогает разобраться во всех вопросах.
Теги всегда пишутся в треугольных скобках. Сначала идет открывающийся тег, он состоит из треугольных скобок и названия самого тега. Внутри тега находиться какой-либо контент (текст). Далее тег нужно закрыть. Закрывающийся тег выглядит так же как открывающийся, но перед названием тега ставиться слэш.
Пример написания тега:
Бывают теги которые не нужно закрывать, для их работы нужно только открыть тег. Таких тегов очень мало, о них мы поговорим позже. Практически все теги необходимо закрывать, если не закрыть тег, который по своим правилам требует закрытия, то это будет грубейшая ошибка. Один не закрытый тег может сделать так, что вся ваша html страница будет отображаться браузером некорректно.
Часто бывает, что внутри тега, помимо текста располагаются еще другие теги. В этом случае теги закрываются в зеркальном порядке, то есть первым будет закрыт тот тег, который был открыт последним.
Пример правильного закрытия тегов:
С помощью параметров (атрибутов) тега мы можем задать нужный нам цвет или размер текста, находящегося внутри этого тега. Значение параметра пишется в кавычках.
Пример написания тега с параметром (атрибутом):
Параметров у тега может быть несколько. Например цвет и размер. В этом случае параметры указываются через пробел.
Пример написания тега с несколькими параметрами:
Нажимаем правой кнопкой мыши на созданный нами файл и выбираем "Edit with Notepad++" (открыть с помощью Notepad++).
Открыв файл мы видим уже знакомый нам html код, который мы вставляли ранее:
В этом уроке мы будем акцентировать внимание на строке с текстом "Здравствуйте! Это моя первая веб-страница!". Пока что не обращайте внимание на другие строки, это структура html страницы, ей будет уделен следующий урок.
Текст "Здравствуйте! Это моя первая веб-страница!" написан без использования тегов и параметров (атрибутов), соответственно при запуске файла через браузер, данный текст имеет стандартный размер и цвет.
Теперь сверните Notepad++ и давайте параллельно откроем наш файл в браузере. Сейчас наша страница выглядит так:
Первый тег, который мы изучим на практике - это тег <b>. Данный тег служит для того, чтобы сделать текст жирным. Тег <b> требует закрытия, по этому правильное применение будет выглядить так:
Теперь давайте вернемся в Notepad++ и добавим тег <b> в наш html код. Мы сделаем нашу надпись "Здравствуйте! Это моя первая веб-страница!" жирной. Для этого мы заключаем данный текст в тег <b>.
Теперь наш код выглядит так:
* Все html коды которые я размещаю - нельзя скопировать, это сделано специально для того, чтобы Вы прописывали все теги в ручную. Это полезно.
Итак, тег <b> успешно добавлен в код, и теперь, чтобы изменения вступили в силу, нам нужно их сохранить. Для этого нажимаем в верхнем меню кнопку "Файл", далее нажимаем "Сохранить". Так же процедуру сохранения можно делать с помощью горячих клавиш (Ctrl + S), это удобней.
Теперь заходим в браузер, в котором открыта наша страница. Мы внесли изменения в код и сохранили их, но браузер этого еще не знает. Чтобы сообщить браузеру об изменениях, нужно обновить страницу, для этого нажимаем на клавиатуре "F5".
Сейчас Вы должны увидеть результат применения тега <b>, надпись должна стать жирной, как на рисунке:
Теперь давайте удалим из нашего кода тег <b> и пропишем вместо него тег <font>. Данный тег так же необходимо закрыть. Теперь наш код выглядит так:
Сохраните изменения в notepad (нажатием Ctrl + S), зайдите в браузер, обновите страницу (нажав F5). Сейчас мы видим, что надпись отображается обычно, так же как до использования тегов. Это значит, что тег <font> ничего не поменял. Это все потому, что данный тег не работает без параметров (атрибутов). Тег <font> лишь указывает браузеру на то, что внутри него (между <font> и </font>) находится текст. Для этого тега мы можем задать параметры color (цвет) и size (размер текста).
Сейчас давайте сделаем нашу надпись зеленой. Для этого мы зададим тегу <font> параметр color (цвет) и дадим ему значение green (зеленый). Теперь наш код выглядит так:
После добавления параметра и значения в наш код html, Вы заметили, что они отличаются по цвету от всех других символов и тегов на странице. Это сделано специально для того, чтобы html код легче нам читался. Все теги обозначаются синим цветом, все атрибуты - красным, а значения атрибутов - фиолетовым.
Сейчас сохраняем изменения в Notepad++ (нажатием Ctrl + S), заходим в браузер и обновляем страницу (нажав F5). Сейчас наша надпись должна стать зеленой как на рисунке:
Теперь, чтобы закрепить материал, давайте добавим к тегу <font> еще один атрибут size. Данный параметр отвечает за размер текста. Он может иметь значение от 1 до 7, мы будем использовать значение 6, так как это мое любимое число! Мы сейчас добавляем второй параметр для тега, важно не забыть, что если параметров несколько, то между ними пробел! После добавления параметра size наш код выглядит следующим образом:
Теперь, как обычно, сохраняем изменения в файле (Ctrl + S), заходим в браузер и обновляем страницу (F5). Сейчас наш текст должен стать большим, как на рисунке:
Если все получилось, то поздравляю, Вы освоили основной принцип работы тегов и их атрибутов. Это уже большой шаг!
