Первые шаги — Учебник (руководство) по хтмл (html). Ступенька 3-ая.
Учебник по Html для чайников. Инструментарий.
Ступенька 3-ая.
<html>
<head>
<title>Мой первый шаг</title>
</head>
<body>
Здравствуйте, это моя первая страница.
<br>
Добро пожаловать! 🙂
</body>
</html> (посмотреть)
<head> </head> — голова документа
<body> </body> — тело документа
Все тэги, расположенные между <head> </head>, это что-то вроде служебной информации (наша служба и опасна и трудна, и на первый взгляд как будто не видна:). Например <title>- заголовок. Зачем он? Откройте IE (Internet Explore) с нашим документом и устремите свой взгляд на заголовок окна… Увидели?:)
Все тэги, расположенные между <body> </body> — непосредственное содержание документа. Следующие несколько ступенек будут посвящены именно этим тэгам: мы узнаем, как менять цвет текста, фона, как делать текст крупнее-мельче, поговорим о картинках, таблицах и многом другом. Но прежде, все-таки закончим наш разговор о тэгах, в общем.
<тэг> </тэг> — не просто тэг, это контейнер — тэг, который может содержать внутри себя другие тэги (и текст).
Обратите внимание:
<тэг1><тэг2><тэг3> … </тэг3></тэг2></тэг1>
Только такая очередность закрывающих тэгов верна: тэг, который мы открыли первым — закрываем последним, второй – предпоследним и т.д.
Т.е. следующая очередность нежелательна и не верна, она может привести к ошибкам на вашей страничке:
<тэг1><тэг2><тэг3> … </тэг3></тэг1></тэг2>
Так что будьте внимательны, и пишите код своих страничек аккуратно и вдумчиво.
Первые шаги — Учебник (руководство) по хтмл (html). Ступенька 40-ая.
Учебник по Html для чайников. Фреймы.
Ступенька 40-ая.В этой главе мы поговорим о том, что становиться проблемой для каждого человека, начинающего осваивать фреймы.
Итак, обратимся к нашему примеру. Нажмите на любую из ссылок. Документ, на который введет ссылка, откроется в том же фрейме, в котором располагается документ с меню. А нам нужно, чтобы он открылся во фрейме с основным содержанием, а меню осталось в нетронутом виде. Как это сделать?
Для начала, господа, познакомьтесь с новым атрибутом тэга <frame> — name (кстати, name, мне кажется, что мы с вами уже знакомы:). Пустим name в дело:
| <html> <head> <title>Хождение по фреймам</title> </head> <frameset cols=»100,*» border=»0″> <frameset rows=»100,*»> </frameset> |
Имя фрейма может быть в дальнейшем использовано для ссылки на него из других документов (фреймов), с помощью атрибута тэга <a> target (target=»имя_фрейма»), с которым мы, кстати, тоже уже знакомы.
Введем атрибут target в документе со ссылками — menu.html.
<html> </center> </body> </html> |
Вот такой он (menu.html), в нашем случае. Теперь для каждой ссылки укажем параметр target=»window-1″, где window-1 — это имя фрейма, в котором у нас располагается документ с основным содержанием (content.html).
| <html> <head> <title>Документ с Меню</title> </head> <body background=»cherti3.gif» text=»#ffffff» link=»#ffffff» alink=»#ffffff» vlink=»#ffffff»> <center> <a href=»content.html» target=»window-1″>Главная</a> <a href=»tumki.html» target=»window-1″>Тумки</a> <a href=»bumki.html» target=»window-1″>Бумки</a> <a href=»tra-la-la.html» target=»window-1″>Траляля</a> </center> </body> </html> (посмотреть) |
Бывают ситуации, когда нам нужно, чтобы открываемый документ открылся во все окно, для этого надо параметру target задать значение _top:
<a href=»project.html» target=»_top»>Мой проект о рыбках</a>
Страница с проектом о рыбках откроется в полное окно, закрыв (уничтожив) остальные кадры (фреймы).
Учебник по Html для чайников. Простейшие.Ступенька 17-ая. Мы уже говорили о картинках и том, как картинку сделать ссылкой. Теперь мы поговорим о картах, но не игральных, к сожалению некоторых.Вы, может быть, знаете, что можно сделать так, чтобы при нажатии на разные области (части) одной и той же картинки, вы попадали на разные страницы, это называется — навигационная карта. Разговор о том, как создавать навигационные карты, растянется на несколько глав, но не пугайтесь, на самом деле это совсем не трудно. Я понимаю, что, возможно, разговор о ссылках затянулся и вам уже порядком надоел, но увы, обучение не развлечение, и если вы действительно хотите делать сайты своими руками и изучить html, то придется потерпеть 🙂 Итак, сначала теория. Навигационные карты задаются тэгом <map></map>. Тэг <map> включает себя тэг(и) <area>, которые определяют геометрические области внутри карты (в этой главе это будут прямоугольники) и ссылки, связанные с каждой областью (т.е. куда вы попадете при нажатии на какую-либо часть нашей карты).
Для начала нам нужна картинка. Возьмем такую: Картинка простая — всего лишь голубой прямоугольник (240х140 пикселов). Представьте, что прямоугольники №1 и №2, нарисованные на нем, — это изображения каких-либо кнопок, а голубое — какой-то сложный фон. Чтобы не создавать сложную таблицу (о них, о таблицах, мы поговорим немного позднее), вы решили не резать картинку на много частей и не вычленять кнопки, вы решили поступить проще — создать навигационную карту, где области №1 и №2 (прямоугольники) будут ссылками. Итак, мы уже знаем, что геометрические области и то, куда пользователь попадет при нажатии на них, определяет тэг <area>, естественно, при помощи своих атрибутов. Это атрибуты shape и coords. Атрибут shape — определяет форму области: будет ли она прямоугольником (shape=»rect»), кругом (shape=»circle») или многоугольником (shape=»poly»). Сейчас мы будем работать с прямоугольной областью, поэтому:
«Стоп! стоп!» — скажете вы, — «Какие координаты?» — Те самые, вспоминайте школу и уроки геометрии 🙂 Полагаю, что это всем должно быть ясно. Отсчет ведется от левого верхнего угла картинки, считайте его началом координат (0;0). Если мы работаем с прямоугольной областью, то нам нужны координаты верхнего-левого и нижнего-правого углов области. Порядок записи координат для атрибута coords следующий: <area shape=»rect» coords=»x1,y1,x2,y2«> В нашем примере у прямоугольника №1 координаты такие: x1=25, y1=36, x2=114, y2=98 Значит, код будет выглядеть следующим образом:
Теперь пропишем, куда будет ссылаться наша область, для этого нам понадобится уже знакомый нам атрибут href:
У тэга <map> есть атрибут name — имя карты, давайте назовем карту — karta1:
Для того, чтобы связать карту с картинкой, надо использовать атрибут usemap=»#имя_карты» для картинки:
Теперь сами пропишите <area> для прямоугольника №2 для тренировки (x1=153, y1=11, x2=219, y2=127), а затем шагайте на следующую ступеньку, где мы продолжим разговор о картах. |
Первые шаги — Учебник (руководство) по хтмл (html). Ступенька 15-ая.
Учебник по Html для чайников. Простейшие.
Ступенька 15-ая.Как я уже упоминала, ссылкой может быть и картинка. Принцип ссылки тот же, что и в случае с текстом, только в тэг <a></a> вставляется не текст, а картинка:
<a href=»prf.html»><img src=»primtocodephoto.gif»></a>
Если вы хотите сделать картинку ссылкой на ваш почтовый ящик, то принцип тот же:
<a href=»mailto:[email protected]«><img src=»primtocodephoto.gif»></a>
Итак, сделаем ссылкой картинку primtocodephoto.gif на документ с фотографиями (prf.html):
Теперь посмотрите в броузере, что у нас получилось. Картинка primtocodephoto.gif стала ссылкой. Если вы заметили (а если не заметили, то обратите внимание): вокруг картинки появилась рамочка. Эту рамочку можно оставить, если вам она нравится, а можно убрать, если вы зададите картинке атрибут border=»0″ (о нем мы уже говорили с вами).<img src=»primtocodephoto.gif» align=»left» hspace=»30″ vspace=»5″ alt=»моя фотография» border=»0″>
Как вы уже могли понять, в новую версию учебника я включаю по возможности ответы на интересные вопросы читателей. В этой главе я рассмотрю два таких вопроса, которые связаны с темой нашего урока.
Итак, вопрос первый: «Как задавать цвет рамки вокруг картинки?”
Цвет рамки вокруг картинки задается атрибутом bordercolor, например:
<img src=»picture.gif» border=»3″ bordercolor=»#CC0000″>
В нашем примере я задала цвет рамки красным, ну, и, естественно, что атрибут border (толщина рамки) не должен равняться нулю, если вы хотите видеть рамку вокруг картинки.
Но, если ваша картинка будет ссылкой, то рамка вокруг нее будет того цвета, который мы задали для ссылок в тэге body с помощью link, vlink, alink, т.е. атрибут bordercolor в этом случае уже не влияет на цвет рамки вокруг картинки.
Вопрос второй: “Используют ли профессионалы рамки?”
Когда как, все зависит от ситуации. Может быть картинка, обрамленная рамкой, придаст аккуратности вашему сайту, и его оформление только выиграет от этого. А может быть наоборот — вам эти рамки совсем не нужны, т.к. портят внешний вид вашего сайта, тогда их можно убрать. «Думайте сами, решайте сами”, использовать рамки вокруг картинок или нет 🙂
Если вы думаете, что на этом ваше мучение с изучением ссылок закончилось, то напрасно:) — у нас впереди еще несколько замечательных ступенек.
Первые шаги — Учебник (руководство) по хтмл (html). Ступенька 38-ая.
Учебник по Html для чайников. Фреймы.
Ступенька 38-ая.В этой главе мы разберемся, как расположить документы в окне следующим образом
или
В предыдущей главе я говорила, что не можем использовать атрибуты rows и cols одновременно применительно к одному тэгу <frameset>. Тогда как же расположить наши документы в окне так, как указано на рисунках? Просто, ввести в наш фрейм документ еще одного господина <frameset>, но обо всем по порядку.
Начнем с первого рисунка:
Каким образом мы будем делить окно? — На ряды. В первом ряду у нас будет располагаться logo.html, а второй ряд мы поделим на два столбца, в которых будут располагаться документы menu.html и content.html.
<html> |
Принцип построения ясен, только вот как обозначить ряд, разбитый на два столбца? Как я уже говорила, тут нам поможет господин Frameset.
| <html> <head> <title>Хождение по фреймам</title> </head> <frameset rows=»100,*»> <frame src=»logo.html»> </frameset> |
С помощью атрибута cols тэга <frameset></frameset> мы делим второй ряд на два столбца (первый шириной 150 пикселов, второй по ширине занимает все оставшееся пространство). А тэги <frame>, которые содержит <frameset></frameset>, определяют, какие документы будут показаны загружены в вертикальных фреймах во втором ряду (menu.html и content.html).
Теперь разберем вариант, изображенный на втором рисунке:
Здесь мы будем делить окно на столбцы. Второй столбец будет содержать в себе документ content.html (содержание), а первый столбец мы разобьем на два ряда, и поместим в них документы logo.html и menu.html.
| <html> <head> <title>Хождение по фреймам</title> </head> <frameset cols=»100,*»> <frameset rows=»100,*»> </frameset> |
Однако, если у вас возникли трудности с освоением фреймов, и вы считаете, что вам нужны более подробные уроки и более простое повествование, то я советую вам обратиться к учебнику по фреймам Джо Барта, который мы перевели для вас, и который вы можете найти на нашем сайте.
А мы же с теми, у кого не возникает проблем с предметом, перешагнем на следующую ступеньку, чтобы узнать, что еще можно сделать с фреймами.
Учебник по Html для чайников. Простейшие.Ступенька 20-ая.В этой главе мы продолжим разговор о ссылках. Иногда возникает такая ситуация: нам нужно сделать ссылку не на другой документ, а внутри того же документа — закладку, в народе называемую якорем (смотрите пример, понажимайте там на ссылочки). Такая навигация внутри одного и того же документа весьма удобна. Создаваться она может двумя способами. Способ первый — с помощью атрибута name (имя закладки) тэга A:
<A name=»stih4″>Стих третий</A> Затем, без стеснения, мы сделали на них ссылки: <A href=»#stih4«>Ссылка на стих третий</A> Заметьте — <A href=»#stih4«> — символ решетки (#) перед именем закладки, на которую мы ссылаемся, обязателен. Вы можете ссылаться на закладку и из других документов, тогда ссылка будет выглядеть следующим образом: <A href=»ancorpri.html#stih4«> Ссылка на стих третий из какого-то другого документа </A> или <A href=»http://www.mysite.ru/ancorpri.html#stih2«> Ссылка на стих третий из какого-то другого документа </A> (имя сайта, имя документа + имя закладки) Способ второй — есть такой атрибут — id, который назначает тэгу (элементу) уникальное имя в пределах одного документа (кроме тэгов Base, Head, Html, Meta, Script, Style, Title). Что мешает нам задать id, например, тэгу h4 (заголовкам)? Ничего.
Также хочу вас предостеречь, никогда не делайте так:
На этом наши мучения с ссылками закончены. В следующих уроках мы познакомимся с таблицами. Для этого нам придется опустить несколько тем, таких как спецсимволы, линии, списки, бегущие строки и т.д. С этими темами мы ознакомимся позже. Шагаем дальше, к таблицам. |
Учебник по Html для чайников. Фреймы.Ступенька 36-ая.Прежде, чем что-нибудь предпринимать дальше, надо решить по какому принципу мы будем размещать наши документы, и вообще, какие документы мы будем показывать посетителю одновременно. Предлагаю классический вариант — logo.html, menu.html, content.html — о котором я упоминала в предыдущей главе. Расположить мы можем это по-разному, вот для примера четыре варианта из множества возможных: При помощи фреймов мы делим броузер на несколько окон, заданного размера, в которых помещаем независимые друг от друга документы. Это нам позволит оставлять некоторую информацию видимой, в то время как другая информация прокручивается или заменяется (так, например, мы будем постоянно видеть в одном окне документ с меню, в другом – документ с нашим логотипом, а в третьем окне у нас будут при нажатии на ссылки в документе меню загружаться разные документы с текстом, картинками и прочим). Т.к. документы, которые мы размещаем во фреймах независимые, то соответственно каждый документ может содержать в себе что угодно (и текст, и картинки, и таблицы). Почему я особо оговариваю этот момент: некоторые неразумные читатели почему-то воображают, что фреймы – это альтернатива таблицам. ЭТО НЕ ВЕРНО! Итак, сначала создадим такой вариант (предварительно не забудьте создать обычные *.html документы с логотипом, меню и основным содержанием):
Тэг frame сообщает броузеру какие же документы у нас будут загружены во фреймах. В нашем случае: в первом фрейме будет загружен — logo.html (документ с логотипом), второй фрейм займет документ с непосредственным содержанием (content.html), а третий — меню. Если вы хотите, чтобы меню было во втором ряду (фрейме), то вам следует поменять его местами с content.html
Посмотрите что у нас получилось. Опаньки… Поменять-то мы их местами — поменяли, а вот теперь надо задать новые значения атрибуту rows, чтобы меню у нас снова занимало только 150 пикселов по высоте, а содержание — все остальное:
Вот теперь другое дело:) Все-таки от перемены мест слагаемых кое-что меняется… |