Учебник html основы разработки Web страниц Адаптированный вариант учебника, распространяемого бесплатно в сети Интернет
Оглавление
Глава 1 3
Глава 2 4
Глава 3 4
Глава 4 6
Глава 5 8
Глава 6 11
Глава 7 13
Глава 8 15
Глава 9 19
Глава 10 22
Глава 11 24
Глава 12 25
Глава 13 27
Глава 14 28
Глава 15 29
Глава 16 31
Глава 17 34
Глава 18 36
Глава 19 38
Глава 20 41
Глава 21 44
Глава 22 46
Глава 23 48
Глава 24 50
Глава 25 52
Глава 26 54
Глава 27 56
Глава 28 58
Глава 29 59
Глава 30 60
Глава 31 62
Глава 32 65
Глава 33 67
Глава 1
Итак, для начала создайте на диске отдельную директорию (папку) для будущей страницы:
\\первые шаги\
Теперь откроем программу для создания текстовых документов. В качестве такой программы лучше использовать бесплатно распространяемый текстовый редактор Notepad ++. Он поддерживает нотации различных языком программирования, разметки и языков создания сценариев. После открытия программы нужно выбрать нотацию HTML с помощью команды меню:
Синтаксис > HTML (Language > HTML). Далее скопируем туда следующий текст: <html> <head> <title>Мой первый шаг </title> </head> <body> Здравствуйте, это моя первая страница. <br> Добро пожаловать! :) </body></html>
А теперь сохраним этот документ, присвоив ему имя *.html
\\первые шаги\index.html
Чтобы посмотреть результат работы нужно в программе Notepad++ выполнить команду меню Запуск и выбрать один из браузеров:
Launch in Firefox (запуск в браузере Firefox)
Launch in IE (запуск в браузере Internet Explorer)
Можно пользуясь проводником Windows загрузить Internet Explorer и открыть файл, используя меню программы:
Файл > Открыть > кнопка Обзор > Наш документ (index.html).
Если
мы чего-то изменили в нашем html документе
(в блокноте), то, чтобы посмотреть, как
это выглядит в Internet Explorer нужно нажать
кнопку ОБНОВИТЬ
(тоже самое касается других броузеров:).
Если изменений не видно, то это значит,
что вы где-то что-то неправильно написали,
или забыли сохранить документ.
Глава 2
На этой ступеньке мы будем учиться раскрашивать. Для начала нам нужна будет палитра (все цвета интернета - не забудьте прочитать там инструкцию, а затем продолжим обучение). Сохраните палитру у себя на диске, она вам еще не раз пригодится. Зачем все это? А затем, что все цвета прописываются именно таким способом.
Например белый цвет – ffffff.
Но вернемся к нашей страничке. Давайте окрасим слова Добро Пожаловать в красный:
<font color="#CC0000">Добро пожаловать!:)</font>
Теперь попробуйте вместо СС0000 подставить другие значения цветов.
<html>
<head>
<title>Мой первый шаг </title></head>
<body>
Здравствуйте, это моя первая страница.<br>
<font color="#CC0000">Добро пожаловать!:) </font></body></html>
Тэг <font></font> - многофункционален. Им может задаваться не только цвет текста в конкретной части документа, но и размер шрифта, и вид шрифта (Arial), но об этом чуть позже. Как же еще задавать цвета в документе? - вспомним об открывающем теге <body>: <body text="#336699"> Это значит, что весь текст страницы будет синим, кроме текста, для которого мы специально прописали <font></font> (если цвет в <body> не задавать, то по умолчанию он будет черным).
<html>
<head><title>Мой первый шаг </title>
</head>
<body text="#336699">
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать!</font> :)
</body>
</html>
Со цветами для текста мы разобрались, теперь подумаем о фоне.