HTML – первые шаги в изучении языка. Первые Шаги - Учебник по Html для чайников Как и где учиться

/ Учебник по Html. Ступенька 13-ая.

Учебник по Html для чайников. Простейшие.

Ступенька 13-ая.

Развлекательно-познавательный урок с любителем сосисок закончен, и мы переходим к следующему уроку, в котором мы поговорим о ссылках.

Наша страничка может состоять из нескольких документов. Один из них главный (index.html) - он открывается первым и должен обязательно лежать на вашем сайте в интернете. Остальные документы вы можете называть как угодно (photos.html, about_me.html, my_pets.html, friends.html, gh516hgd.html). Они все могут лежать в одной директории (папке), а могут в разных.

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

Для начала создадим новый документ (в нашем примере prf.html) в той же директории (папке), где находится наш главный документ index.html. Содержание документа выдумайте сами, у вас для этого уже достаточно знаний.

Пусть prf.html - документ с вашими фотографиями. Тогда мы можем без зазрения совести фразу "посмотреть мои фотографии" сделать ссылкой на prf.html:

посмотреть мои фотографии

(1) - мои фотографии
(2) - мои фотографии
(3) - мои фотографии

В случае (1) документ лежит в той же директории (папке), что и документ, в котором мы ссылаемся на prf.html, в случае (2) документ лежит в поддиректории /photos, в случае (3) мы ссылаемся на сайт http://www.homepage.ru, где лежит нужный нам документ.

Первые два примера (1) и (2) – называют относительными путями. (3) – абсолютный, т.е. указанный полностью, включая имя сайта (в нашем случае - http://www.homepage.ru/). Абсолютный путь мы используем, когда ссылаемся на чужие странички, относительный мы используем, когда ссылаемся на документы внутри нашего сайта.

Для всех ссылок в нашем документе мы можем прописать цвета: link - цвет просто ссылки, alink - цвет активной ссылки (нажатой), vlink - цвет уже посещенной ссылки.

Как и цвет для всего текста в документе, цвета ссылок мы прописываем в . В нашем примере цвета для просто ссылки, активной и посещенной - одинаковые, но они могут быть разными – это на ваше усмотрение.

Мой первый шаг

text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999">

Здравствуйте, это моя первая страница.

Добро пожаловать! :)

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

А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится еще один виртуальный друг? :)

На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего:)

Если ты так тоже думаешь, то давай как-нибудь встретимcя, поболтаем, чайку попьем в кафешке?:) Кто знает, может быть мы и в реальной жизни станем друзьями:)

()

Как видите, ничего сложного.

Как вы помните, мы можем задать различные цвета для разных блоков текста в нашем документе (). Для текстовых ссылок мы тоже можем задать разный цвет – это делается при помощи тэга и его атрибута color:

посмотреть мои фотографии

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

Давайте теперь перейдем на следующую ступеньку и продолжим знакомства с ссылками.

Учебник по HTML для чайников . Автор - Алленова Наталья

От автора:

"Я писала это руководство в расчете на людей начинающих, вспоминая, как когда-то начинала сама. Это не сухое изложение всего подряд, это попытка поработать на ассоциациях, сделать все более легко запоминающимся. Мне кое-где не удалось избежать нудных моментов, но я старалась и буду страться дополняя и исправляя все написанное время от времени. "

Простейшие.
4 - "Раскрась сам. Изменяем цвет текста".
5 - "Как изменять цвет фона страницы. Немного об этике цветов".
6 - "Параграфы и DIV. Учимся выравнивать текст".
7 - "Что такое заголовки и как задавать размер буковок".
8 - "Курсив, жирный текст, подчеркнутый и другие".
9 - "Стандартные шрифты. Как прописать свой шрифт".
10 - "Что такое путь? Как вставлять картинки".
11 - "Что можно сделать с картинкой. Картинка, как фон документа, и т.д.".
12 - "О любителе сосисок и принудительном прерывании обтекания текстом картинки".
13 - "Ссылка и как с нею бороться".
14 - "Ссылка на е-майл. Подсказка к текстовой ссылке".
15 - "Может ли картинка быть ссылкой".
16 - "Куда податься, на что ссылаться. Новое окно при нажатии на ссылку".
17 - "Карты. Как часть картинки сделать ссылкой".
18 - "Карты. Как часть картинки сделать ссылкой 2".
19 - "Карты. Как часть картинки сделать ссылкой 3".
20 - "Закладка. Как сделать ссылку внутри документа".

Таблицы.
21 - "Учимся создавать таблицы".
22 - "Учимся создавать таблицы" продолжение.
23 - "Таблицы, вертикальное выравнивание (valign)".
24 - "Таблицы, учимся растягивать ячейки (rowspan, colspan)".
24-2 - "Дополнительная глава. Ответы на домашнее задание".
25 - "Таблицы, что такое cellspacing и cellpadding. Что делать с пространством".
26 - "Вложенные таблицы и некоторые нюансы".
27 - "О рамках таблиц, и брюзжание о таблицах напоследок".
28 - "Создаем простой сайт с таблицами".

Дополнительные.
29 - "Спецсимволы, или головная боль".
30 - "О линиях. Просто и полезно".
31 - "Как убрать отступы (поля) документа, topmargin, leftmargin, marginwidth, marginheight".
32 - "О списках. Неупорядоченные списки".
33 - "Упорядоченные списки. Ремарка: что такое спецификация и консорциум".
34 - "Cпецифические тэги, бегущая строка текста".

Фреймы.
35 - "Вступление. Зачем они (фреймы) нужны."
36 - "Учимся создавать фреймы".
37 - "Учимся создавать фреймы" продолжение.
38 - "Учимся создавать фреймы" продолжение.
39 - "Убираем полосу прокрутки, избавляемся от рамок, регулируем ширину полей фрейма".
40 - "При нажатии на ссылку документ открывается в другом фрейме, в полное окно".
41 - "Последняя глава о фреймах. Что такое IFrame".

Ступенька 1-ая.

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

D:\первые шаги\

У себя на компьютере я создала такую папку на диске D, и назвала ее Первые Шаги. Вы, естественно, можете создать вашу папку, где угодно, и назвать ее, как угодно. Теперь откроем блокнот – notepad (start – programs – accessories – notepad или пуск – программы – стандартные – блокнот) и скопируем туда следующий текст:

Мой первый шаг

Здравствуйте, это моя первая страница.

Добро пожаловать! :)

()

Сохраним этот документ, присвоив ему имя *.html

D:\первые шаги\index.html

Многие читатели спотыкаются на фразе: "А теперь сохраним этот документ, присвоив ему имя *.html ", они пишут письма, о том, что у них получается сохранить, только как текстовой документ *.txt, а вот как *.html - никак. Чтобы в дальнейшем избежать этого глупого недоразумения, я и пишу это примечание.

Если вы сохраняете документ, через Файл -> Сохранить (File -> Save), то, естественно, что он сохраняется как *.txt. Надо сохранять ваш документ следующим образом:

Файл -> Сохранить Как (File -> Save as)
- Дальше вводите имя своего документа, например: index.html (а не просто index; приписочка *.html должна быть обязательно).
- Если вы уже сохранили ваш документ, как *.html, то при внесении изменений в этот документ вы можете уже сохранять их через Файл -> Сохранить (File -> Save).

Вот и все. Надеюсь, теперь у всех все будет в порядке.

Теперь откроем броузер, допустим, Internet Explorer (не закрывайте блокнот, он нам еще пригодится), и откроем в броузере наш документ.

Файл - Открыть - кнопка Обзор - Наш документ (index.html)
File – Open – Browse – index.html

Если мы чего-то изменим в нашем *.html документе (в блокноте), то, чтобы посмотреть, как это выглядит в нашем броузере, надо не забывать нажимать в броузере кнопку ОБНОВИТЬ. Если изменений не видно, то это значит, что вы где-то что-то неправильно написали, или забыли сохранить документ.