/ Учебник по 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"> Здравствуйте, это моя первая страница.Добро пожаловать! :)
Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли
посмотреть мои фотографии
, почитать обо мне, черкнуть пару строчек в мою гостевую книгу.
() |
Как видите, ничего сложного.
Как вы помните, мы можем задать различные цвета для разных блоков текста в нашем документе (). Для текстовых ссылок мы тоже можем задать разный цвет – это делается при помощи тэга и его атрибута color:
посмотреть мои фотографии
Обратите внимание, - прописывается внутри тэга , если вы пропишите иначе, то у вас не получится задать вашей ссылке цвет отличный от цвета других ссылок в документе.
Давайте теперь перейдем на следующую ступеньку и продолжим знакомства с ссылками.
От автора: все когда-то начинается. Вот и вы решили наконец освоить науку сайтостроения. Начинать в ней нужно с языка html. Первые шаги в нем очень важно делать уверенно, иначе можно споткнуться и не продолжить изучение. Как вам максимально просто и эффективно освоить язык, я рассказу сегодня.
У всех всегда что-то бывает в первый раз. Как маленькому ребенку однажды предстоит сделать свои первые шаги, так и вам, человеку, который решил заняться сайтостроением, необходимо в первый раз окунуться в этот мир. Чтобы погружение произошло максимально приятно, я рекомендую идти по максимальной простому и понятному пути.
Как начинал я и что из этого вам нужно понять
Я считаю очень полезным и необходимым рассказать вам о том, как я учил html. Прежде всего хочу сразу приободрить вас, чтобы вы не думали, что изучение html – это постройка космического шаттла. Нет, все гораздо легче. Причем для освоения этого языка вам не нужно иметь никаких базовых знаний. Вы можете быть абсолютно полным нулем в теме, не понимать даже очевидных вещей.
Итак, первый шаг к началу изучения – понять, что это просто. Html это в самом деле невероятно просто. По сути, вам нужно будет выяснить всего несколько моментов:
Как вообще происходит процесс создания сайта и зачем там нужен html
Какова структура документа, на какие части он делится
Что такое теги и атрибуты, какими они бывают и как их использовать
Ну а все остальное – это уже отшлифовка ваших знаний. Это не та технология, где вам придется 14 дней безвылазно сидеть за компьютером и учить теорию, а потом только начинать что-то понимать и приступать к практика. Первую практику, по сути, можно начать уже в первый час изучения.
Итак, как я учил этот язык? Я воспользовался услугами Яндексов и Гуглов, куда забил соответствующую информацию (что-то вроде изучения html). Попался мне сразу на глаза 1 сайт, где было 15 уроков по html в порядке усложнения. Купил я, значится, тетрадку на 48 листов, собрался с духом и начал изучение, записывая практически каждую буковку в тетрадь и по 300 раз в день используя только что изученные теги.
Дело это было невероятно интересное. Собственно, такой способ изучения имеет одну проблему:
Все-таки обучения в видеоформате немного не хватало. Идеально было бы, если бы живой человек в видео объяснял еще раз то, что написано в тексте.
Таким образом, буквально за 1 месяц я изучил язык. Не полностью, конечно. Я вам скажу, что его и не нужно изучать от и до. Например, спросите у меня сейчас, что означает тег dfn или bdi? Я полезу в справочник глянуть. Но это никак не помешает мне легко создавать сайты на html, потому что 70-80% тегов и атрибутов в нем используются крайне редко и практически не нужны в стандартных ситуациях.
Самый быстрый способ изучения html до высокого уровня – пошаговый план
Если честно, в голове я уже вижу просто идеальный план того, как можно выучить язык в совершенстве буквально за 1 месяц, даже намного меньше, если очень стараться. В свое время я потратил все-таки больше времени.
Большая проблема изучения по бесплатной информации в том, что зачастую с ее помощью не раскрываются все актуальные приемы и фишки. Соответственно, доп. Информацию нужно искать в других источниках. Но люди ленивы и часто не находят ее, поэтому их знания остаются неполными.
К счастью, вам уже не нужно ничего искать, я могу предложить вам самый быстрый способ изучения языка, который гарантирует результат. Все уроки вы сможете пройти на нашем сайте.
После прохождения первого шага вы получение понимание в целом того, как создается сайт. После прохождения следующего шага сможете легко понимать основную теорию html и даже создавать простые веб-странички, помещая на них таблицы, картинки, формы и т.д.
Следующий шаг – это полноценная практика. А именно, вы сверстаете сайт. Очень простой, потому что для первого раза именно такой и нужен. Самое главное на этом этапе – научиться применять полученные знания. Ведь без применения знания не имеют никакой ценности. Вы ведь хотите изучить html не для того, чтобы хвастаться перед друзьями? Надеюсь, не для этого. Цель – научиться использовать html как базовый язык при создании сайтов.
Следующий и последний шаг – это изучение самой актуальной информации по новым тегам и возможностям, которые принес html5, изучение новых возможностей css3. Ну а в самом курсе вы наконец-то совершите мощный прорыв в сайтостроении: сверстаете три сайта, каждый сложнее предыдущего. Ах да, даже 4, потому что там еще пару уроков идут вам бонусом.
Последним сайтом, который вы сверстаете, будет интернет-магазин. Чувствуете мощь такого обучения? Сейчас вы полный 0 (даже может не знаете, что такое тег), а уже через 1 месяц у вас будет шаблон профессионального интернет-магазина. Я даже не знаю, какой пример привести. Это все равно, что вы катались на четырехколесном велосипеде, а потом сразу пересели в BMW.
Итог
В общем, самый лучший путь изучения языка я вам подсказал. Конечно, он потребует от вас вложений. Как вложений денег, так и вложений времени и сил. Но это действительно максимально короткий путь от новичка до профессионала.
Возможно, я преувеличиваю, не хочу вас обманывать, потому что профессионалами за месяц не становятся, но пока один человек месяцами и годами странствует по сайтам, собирая бесплатную информацию, вы можете поступить более эффективно и пройти путь изучения в 15-20 раз продуктивнее.
Ступенька 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 документе (в блокноте), то, чтобы посмотреть, как это выглядит в нашем броузере, надо не забывать нажимать в броузере кнопку ОБНОВИТЬ. Если изменений не видно, то это значит, что вы где-то что-то неправильно написали, или забыли сохранить документ.
Первые страницы учебника:
Учебник по Html для чайников. Инструментарий.
Ступенька 1-ая.Порядок прежде всего, поэтому перед началом работы мы создадим на нашем компьютере отдельную папку для будущей страницы.
D:\первые шаги\
У себя на компьютере я создала такую папку на диске D, и назвала ее Первые Шаги. Вы, естественно, можете создать вашу папку, где угодно, и назвать ее, как угодно. Теперь откроем блокнот – notepad (start – programs – accessories – notepad или пуск – программы – стандартные – блокнот) и скопируем туда следующий текст:
Здравствуйте, это моя первая страница.
Добро пожаловать! :)
()
Сохраним этот документ, присвоив ему имя *.html
D:\первые шаги\index.html
Многие читатели спотыкаются на фразе: "А теперь сохраним этот документ, присвоив ему имя *.html ", они пишут письма, о том, что у них получается сохранить, только как текстовой документ *.txt, а вот как *.html - никак. Чтобы в дальнейшем избежать этого глупого недоразумения, я и пишу это примечание.
Ступенька 8-ая.
После того, как мы узнали о том, как задавать размер шрифта, настало время поговорить о том, как определить стиль шрифта. В этой главе мы узнаем, как выделить текст курсивом, подчеркнуть, перечеркнуть, сделать полужирным, как задавать моноширинный текст, как делать верхний и нижний индексы – все эти тэги, как правило, рассматриваются вместе, и мы не будем отступать от традиций.
Сначала рассмотрим курсив и полужирный текст:
Полужирный текст
Наклонный текст (курсив)
Как видите, все просто. Можете их сами понатыкать в тексте, где хочется, для пробы, а в примере я снова помучаю виртуального друга:
Здравствуйте, это моя первая страница.Добро пожаловать! :)
Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по
давней традиции тоже захотелось создать свою домашнюю страничку для
моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои
фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую
книгу. А может и просто случайный посетитель вдруг захочет познакомится
со мной, и у меня появится
еще один виртуальный друг? :)
() |
Теперь пара строк о моширинном шрифте. Что это такое за шрифт? Это шрифт с символами одинаковой фиксированной ширины, как шрифт у пишущей машинки. А тэг для него следующий:
моноширинный шрифт
В наш пример я его вводить не буду (сделайте это самостоятельно).
Также моноширинным шрифтом отображается текст заключенный в тэг
:
Текст (куча пробелов) текст текст (куча пробелов) текст текст (куча пробелов) текстУ тэга
Есть одна замечательная особенность: текст, заключенный в него, выводится с точностью до пробела так, как вы его набили в блокноте. Этот тэг вам может быть полезен, допустим, для форматирования стихотворений.К одному фрагменту текста может применяться сразу несколько тэгов:
текст
В нашем примере текст моноширинный, полужирный, и выделен курсивом (вот так-то:). Не бойтесь использовать различные комбинации тэгов, экспериментируйте, но с умом:)
Итак, у нас еще осталось несколько тэгов, которые мы должны освоить на этой ступеньке, прежде чем двинуться дальше.
Подчеркнутый текст вводится при помощи тэга :
Подчеркнутый текст
Тэги
ипредставляют текст перечеркнутым шрифтом, можете использовать какой вам угодно из них, принципиальной разницы между ними нет:
Перечеркнутый
ПеречеркнутыйТэг представляется крупным шрифтом, а малым шрифтом относительно основного текста:
Малый
Нормальный текст
БольшойТэги Sup и Sub - определяют верхний и нижний индексы. Sup - верхний, Sub - нижний. Где они могут пригодиться? Ну, например, при написании какой-нибудь формулы - H 2 O (все, что мы выносим со школьной скамьи:).
Верхний индекс sup
Нижний индекс sub/ Учебник по Html. Ступенька 8-ая.
Учебник по Html для чайников. Простейшие.
Ступенька 8-ая.После того, как мы узнали о том, как задавать размер шрифта, настало время поговорить о том, как определить стиль шрифта. В этой главе мы узнаем, как выделить текст курсивом, подчеркнуть, перечеркнуть, сделать полужирным, как задавать моноширинный текст, как делать верхний и нижний индексы - все эти тэги, как правило, рассматриваются вместе, и мы не будем отступать от традиций.
Сначала рассмотрим курсив и полужирный текст:
Полужирный текст
Наклонный текст (курсив)Как видите, все просто. Можете их сами понатыкать в тексте, где хочется, для пробы, а в примере я снова помучаю виртуального друга:
Здравствуйте, это моя первая страница.Добро пожаловать! :) Я совсем недавно
начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции
тоже захотелось создать свою домашнюю страничку для моих новых
виртуальных друзей и знакомых, чтобы они могли посмотреть мои
фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую
книгу. А может и просто случайный посетитель вдруг захочет познакомится
со мной, и у меня появится
еще один виртуальный друг? :)
() |
Теперь пара строк о моширинном шрифте. Что это такое за шрифт? Это шрифт с символами одинаковой фиксированной ширины, как шрифт у пишущей машинки. А тэг для него следующий:
моноширинный шрифт
В наш пример я его вводить не буду (сделайте это самостоятельно).
Также моноширинным шрифтом отображается текст заключенный в тэг
:
У тэга
текст (куча пробелов) текст
текст (куча пробелов) текст
текст (куча пробелов) текст
Есть одна замечательная особенность: текст, заключенный в него, выводится с точностью до пробела так, как вы его набили в блокноте. Этот тэг вам может быть полезен, допустим, для форматирования стихотворений.К одному фрагменту текста может применяться сразу несколько тэгов:
текст
В нашем примере текст моноширинный, полужирный, и выделен курсивом (вот так-то:). Не бойтесь использовать различные комбинации тэгов, экспериментируйте, но с умом:)
Итак, у нас еще осталось несколько тэгов, которые мы должны освоить на этой ступеньке, прежде чем двинуться дальше.
Подчеркнутый текст вводится при помощи тэга :
Подчеркнутый текст
Тэги
ипредставляют текст перечеркнутым шрифтом, можете использовать какой вам угодно из них, принципиальной разницы между ними нет:
Перечеркнутый
ПеречеркнутыйТэг представляется крупным шрифтом, а малым шрифтом относительно основного текста:
Малый
Нормальный текст
БольшойТэги Sup и Sub - определяют верхний и нижний индексы. Sup - верхний, Sub - нижний. Где они могут пригодиться? Ну, например, при написании какой-нибудь формулы - H 2 O (все, что мы выносим со школьной скамьи:).
Верхний индекс sup
Нижний индекс subВот, собственно, и все. Можем переходить на следующую ступеньку.