HTML-код для чайников. Урок №1
15826
В этом выпуске Вы узнаете:
- Как содать html-документ
- Что такое теги
- Из каких обязательных тегов состоит любой html-документ
- Как задать цвет фона, шрифта
- Как изменять размер, цвет и тип шрифта
Итак, прежде чем приступить к обучению, создайте у себе на компьютере отдельную папку. Можете создать ее где угодно и назвать как Вам это будет угодно. Я создал у себе на компьютере папку на диске D: и назвал ее "Мои первые шаги"
Теперь Вам необходимо открыть блокнот – notepad (пуск – программы – стандартные – блокнот или кликни правой кнопкой – создать - Text document).
Дальше скопируйте в свой документ следующий текст:
<html> <head> <title>Мои первые шаги </title> </head> <body> Здравствуйте! Рад приветствовать на моей первой странице. <br> Добро пожаловать! </body> </html>
Что это такое я расскажу Вам чуть позже.
Теперь необходимо сохраним этот документ, как html-документ. Это делается очень просто. Нажимаем:
- Файл -> Сохранить как
- Дальше необходимо присвоить имя для своего документа, например: index.html (Примечание: обязательно после имени документа необходимо ставить .html, иначе Вы не создадите html-документ)
- В дальнейшем если Вы уже создали html-документ и Вам необходимо сохранить изменения, можете это делать через: Файл -> Сохранить
Теперь не закрывая блокнот откройте браузер, например Internet Explorer и в нем откройте ранее созданный документ. Как это сделать:
Файл -> Открыть -> Обзор -> Наш документ (index.html)
В открывшемся браузере Вы увидите следующее.
Примечание: На будущее, если Вы что-то изменяете в своем блокноте, не забывайте сохранять это (для быстрого сохранения используйте "Ctrl + S"), а для того чтобы увидеть изменения в браузере необходимо нажимать кнопку "Обновить" или клавишу F5.
Итак, для начала давайте разберемся, что же это такое "тег"?
Тег – это то, с помощью чего мы создаем дизайн нашего html-документа, это то благодаря чему мы располагаем картинки в нашем html-документе, там где нам это будет угодно. С помощью тегов мы задаем цвет, тип, размер нашего шрифта, цвет фона и т.п.
Тег всегда заключается в < > такие вот скобки и все, что находится между ними является тегом. Все что находится за пределами этих скобок будет распознаваться, как текст и будет отображаться в браузере.
К примеру, тег <br> - это тег, благодаря которому мы делаем перенос строки, своего рода "Enter".
Теги могут содержать внутри себя и другие теги. Очень важно не перепутать очередность их закрытия. К примеру:
Тег, который открывается первым, закрывается последним!
Запомните это! Любая другая очередность тегов будет не правильная и будет не корректно отображаться в браузере.
Как Вы уже успели заметить, тегов существует много и они все разные. Но для того чтобы любой html-документ отображался в браузере существует несколько обязательных тегов, которые всегда необходимо прописывать в своем html-документе.
Итак, из каких же обязательных тегов состоит любой html-документ?
Любой документ должен открываться тегом <html>, но если есть тег который открывает документ, то и существует тег который закрывает наш документ. Это тег </html>. Но не все теги необходимо закрывать! К примеру тег <br> не требует закрывающегося тега.
Любой html-документ состоит из следующих обязательных тегов:
- <html> - тег, который открывает документ
- </html> - тег, который закрывает документ
- <head> и </head> - это голова документа
- <body> и </body> - это тело документа
В голове документа <head></head> задается вся служебная информация, задается название страницы, которое будет отображаться в окне браузера. Это делается с помощью тегов <title> и </title>. В нашем случае в браузере будет отображаться следующее название страницы "Мои первые шаги"
Тело документа <body></body> - это то, где находится все содержимое нашего документа.
Итак, двигаемся дальше. Дальше мы научимся изменять цвет фона! Для раскраски Вам понадобится палитра цветов. Ее можно скачать здесь. Советую Вам сохранить ее себе на компьютер, она Вам еще не раз пригодится!
По умолчанию цвет фона установлен "белый". Для того чтобы изменить его используется атрибут "bgcolor" . Он задается в уже знакомом нам теге <body>. Выглядит это следующим образом:
<html> <head> <title>Мои первые шаги </title> </head> <body bgcolor="#ffffcc"> Здравствуйте! Рад приветствовать на моей первой странице. <br> Добро пожаловать! </body> </html>
Для наглядности я прописал желтый цвет, но Вы можете прописать любой другой. Обратите внимание, что значению цвета обязательно должен предшествовать значок – "#"
Тегу <body> можно присвоить еще несколько атрибутов. Для того чтобы задать цвет шрифта во всем документе используется атрибут "text".
<html> <head> <title>Мои первые шаги </title> </head> <body text="#0000ff" bgcolor="#ffffcc"> Здравствуйте! Рад приветствовать на моей первой странице. <br> Добро пожаловать! </body> </html>
Итак, в теге <body> мы одновременно можем прописывать несколько атрибутов, это касается и других тегов.
А как же окрасить отдельный участок текста?
Для этого используется тег <font>, который отвечает за шрифт. Для того, чтобы окрасить какой-либо участок текста совместно с тегом <font> используется атрибут "color". Кстати, атрибут "color", как и многие другие атрибуты может использоваться и с другими тегами. Давайте окрасим слова "Добро пожаловать!" в красный цвет.
<html> <head> <title>Мои первые шаги </title> </head> <body text="#0000ff" bgcolor="#ffffcc"> Здравствуйте! Рад приветствовать на моей первой странице. <br> <font color="#ff0000"> Добро пожаловать! </font> </body> </html>
Итак, понятно, что для окраски шрифта используется атрибут "color", а для того чтобы изменить размер шрифта существует атрибут "size"".
<font size="+4"> текст </font>
<font size="+3"> текст </font>
<font size="+2"> текст </font>
<font size="+1"> текст </font>
<font size="+0"> текст </font>
<font size="-1"> текст <font>
<font size="-2"> текст </font>
Давайте посмотрим, как это выглядит в живую. Добавим к нам в текст еще пару строк и выделим следующий фрагмент.
<html> <head> <title>Мои первые шаги </title> </head> <body text="#0000ff" bgcolor="#ffffcc"> Здравствуйте! Рад приветствовать на моей первой странице. <br> <font color="#ff0000"> Добро пожаловать! </font><br> Это мои первые шаги в изучении <font size="+2">основ веб-дизайна.</font> На этой страничке Вы можете найти всю информацию обо мне, посмотреть мои фото и оставить свои комментарии. </body> </html>
По умолчанию используется размер шрифта size="+0".
Итак, мы научились задавать цвет шрифта, размер, а как задать тип шрифта?
Для этого с тегом <font> используется еще один атрибут "face".
Основными шрифтами, которые есть на каждом компьютере, являются:
- Times;
- Times New Roman;
- Arial;
- Helvetica;
- Courier;
- Verdana;
- Tahoma;
- Cosmic Sans;
- Garamond
Давайте попробуем изменить тип шрифта и внесем следующую запись:
<html> <head> <title>Мои первые шаги </title> </head> <body text="#0000ff" bgcolor="#ffffcc"> Здравствуйте! Рад приветствовать на моей первой странице. <br> <font color="#ff0000" face="verdana"> Добро пожаловать! </font><br> Это мои первые шаги в изучении <font size="+2">основ веб-дизайна.</font> На этой страничке Вы можете найти всю информацию обо мне, посмотреть мои фото и оставить свои комментарии. </body> </html>
На этом сегодняшний выпуск я буду заканчивать.
В следующем выпуске я расскажу о параграфах и о том как можно с помощью параграфов выравнивать текст. Поговорим о заголовках и о стилях шрифта.
До скорых встреч!
-
Комментарии (0)
- Сайт
Facebook
Простая CRM
Нашли ошибку в тексте
