Новые сообщения · Участники · Правила форума · Поиск
  • Страница 1 из 4
  • 1
  • 2
  • 3
  • 4
  • »
Форум о uCoz и Web » Веб-программирование и дизайн » HTML » Основы HTML - Коротко про самое основное
Основы HTML - Коротко про самое основное
SleepWalkerДата: Вторник, 15.01.2008, 21:42 | Сообщение # 1
Admin
Сообщений: 5493
Репутация: 487
Социальная репутация:

Статус: Offline
Основы HTML для начинающих

Данный урок поможет Вам за пару дней выучить основы HTML. Вы поэтапно, шаг за шагом создадите свою первую HTML страничку в сети интернет. На основании её, Вы без особого труда сможете создавать, а также редактировать сайты. Внимательно изучите две странички, если что непоняли, лучше вернуться назад, что бы вновь разобрать все заново. На всё про всё, Вы потратите 4-8 часов, но знание основ HTML стоит того!

Итак, для начала создайте на диске отдельную директорию (папку) для будущей HTML страницы (порядок прежде всего:).

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

Теперь откроем блокнот (notepad), копируем туда следующий текст:

Code
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body>
Здравствуйте, это моя первая страница.
<br>
Добро пожаловать!
</body>
</html>

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

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

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

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

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

Посмотрим теперь, что у нас получилось.

2.

Code
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body>
Здравствуйте, это моя первая страница.
<br>
Добро пожаловать! <img src="http://src.ucoz.ru/sm/18/smile.gif" border="0" align="absmiddle" alt="smile">
</body>
</html>

Первое, что нам нужно усвоить, что хтмл (html) это то, то мы сейчас изучаем. Второе, что нам нужно усвоить: Html не является языком программирования , он предназначен для разметки текстовых документов (т.е. для форматирования тескста). То, как будет выглядеть ваш текст, определяют метки (tags или тэг).

Пример тэга:
(перенос текста на другую строку, что-то вроде Enter:). Попробуйте между тэгами Body его понатыкать - посмотрите, что получится:)
Т.е. все, что находится между < и > - это тэг. Текст, не находящися между такими скобками < > - весь виден, при просмотре в броузере.

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

<html>

Этот тэг должен открывать документ. Если есть открывающий тэг, должен быть закрывающий:

</html>

Некоторые тэги, вроде
, нетребуют закрывающего тэга. Но вернемся к нашему документу с рисунком.

3.

Code
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body>
Здравствуйте, это моя первая страница.
<br>
Добро пожаловать! <img src="http://src.ucoz.ru/sm/18/smile.gif" border="0" align="absmiddle" alt="smile">
</body>
</html>

<head> </head> - голова документа
<body> </body> - тело документа

Все тэги, расположенные между <head> </head>, это что-то вроде служебной информации. Например <title> - заголовок. Зачем он? Откройте IE (Internet Explore) с нашим документом, после чего устремите свой взгляд выше всех командных строк (на заголовок окна)... Увидели?:)

Все тэги, расположенные между <body> </body> - непосредственное содержание документа. Следущие несколько ступенек будут посвящены именно этим тэгам: мы узнаем как менять цвет текста, фона, как делать текст крупнее-мельче, поговорим о картинках, таблицах.

4.

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

Зачем все это? А затем, что все цвета прописываются именно таким способом.

Например белый цвет - ffffff

Но вернемся к нашей страничке. Давайте окрасим слова Добро Пожаловать красным цветом.

<font color="#CC0000">Добро пожаловать! :)</font>

Теперь попробуйте вместо СС0000 поподставлять другие значения цветов.

Code
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body>
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать! <img src="http://src.ucoz.ru/sm/18/smile.gif" border="0" align="absmiddle" alt="smile"> </font>
</body>
</html>

Тэг <font></font> - многофункционален. Кроме цвета текста в конкретной части документа иэг font может менять размер шрифта, а так же его вид (Arial к прмиеру), но об этом чуть позже.

Как же еще задавать цвета? - вспомним об открывающем теге <body>:

<body text="#336699">

Это значит, что весь текст страницы будет синим, кроме текста, для которого мы специально прописали <font></font> (если цвет в <body> не задавать, то по умолчанию он будет черным).

Code
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699">
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать!</font> <img src="http://src.ucoz.ru/sm/18/smile.gif" border="0" align="absmiddle" alt="smile">
</body>
</html>

Со цветами для текста мы разобрались, теперь подумаем о фоне. Шагайте дальше:)

5.

На этой ступеньке мы узнаем, как изменять цвет фона документа, а так же поговорим немного об этике.

Цвет фона устанавливается в уже нам знакомом тэге <body>:

<body bgcolor="#000000">

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

Code
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000">
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать!</font> <img src="http://src.ucoz.ru/sm/18/smile.gif" border="0" align="absmiddle" alt="smile">
</body>
</html>

Обратите внимание: мы одновременно можем прописать в теге <body> как цвет текста, так и цвет фона (это на всякий случай, если вы еще не поняли:).

<body text="#336699 bgcolor="#000000">

С теоретической частью на данной ступеньке мы покончили, теперь присядем, чтобы немного поговорить о цветах. Нет, не тех, которые растут в лесах, полях, оранжереях, а о цветах документа.

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

Пример: Девочка в ярко-розовых джинсах, в противном салатовом топике с надписью Kiss me, безусловно, привлечет внимание, но надолго ли? Не уподобляйтесь такой девочке:).

Кстати о внимании, давайте переключим его на следующую главу моего повествования. Шагнем на другую ступеньку.

6.

Эта глава расскажет вам о параграфах. Параграфы вводятся тэгом:

</p>

С помощью параграфов мы можем центрировать текст:

<p align="center">текст</p>

С помощью параграфов мы можем выровнять текст по левому краю:

<p align="left">текст</p>

Или по правому краю документа:

<p align="right">текст</p>

Теперь добавим нашему документу пару параграфоф, что бы увидеть действие тэгов наглядно, что получится (в наш пример я подставила параграф с параметром центрирования текста (center), попробуйте другие параметры со значениями Left или Right).

Code
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000">
<p align="center">
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать!</font> <img src="http://src.ucoz.ru/sm/18/smile.gif" border="0" align="absmiddle" alt="smile"> </p>
</body>
</html>

Заметьте, что текст в документе, если не задавать параграфы, всегда выравнивается по умолчанию по левому краю. Также запомните, что к параграфу уже не нужен тэг
для переноса строки, т.к. перенос задается по умолчанию. Но что делать, если вам этот перенос никак не нужен? Есть тэг альтернативный <p align="center">:

<center>текст</center>

Code
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000">
<center>
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать!</font> <img src="http://src.ucoz.ru/sm/18/smile.gif" border="0" align="absmiddle" alt="smile"> </center>
</body>
</html>

Все было бы хорошо, можно было бы шагнуть на следущую ступеньку, если бы у тэга

не существовало бы еще четвертого, но опасного значения (атрибута):

<p align="justify">текст</p>

Это мой любимый атрибут параграфа, он выравнивает текст по обоим краям документа, из-за чего все становится милым и аккуратным. Почему же это опасный атрибут? Да не работает он в старых версиях броузеров, поэтому у тех, кто использует старые броузеры вся красота-ляпота да аккуратность сойдет на нет (т.е. текст выровняется в таком случае по левому краю документа). Тем не менее я атрибутом justify злоупотребляю:)

Code
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000">
<center>
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать!</font> <img src="http://src.ucoz.ru/sm/18/smile.gif" border="0" align="absmiddle" alt="smile"> </center>
<p align="justify">

Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может, даже просто случайный посетитель вдруг захочет познакомится со мной, посе чего у меня появться еще один виртуальный друг? smile
</p>
</body>
</html>

Я тут за вас набросала примерный текст вступления (вы придумаете, конечно, что-нибудь свое). Теперь вставьте пример в наш документ, что бы увидеть что я так люблю justify:)

Посмотрели? - Шагаем дальше.

7.

В этой главе мы научимся выделять текст при помощи заголовков, а так же узнаем еще одну функцию тэга <font></font>.

Итак, мы уже немного умеем форматировать текст, но посмотрите на наш документ. Мне кажется, что фраза "Здравствуйте, это моя первая страница" аж просится, чтобы ее выделили. Для этого можно использовать заголовки:
<H1> текст </H1>
<H2> текст </H2>
<H3>
текст </H3>
<H4>
текст </H4>
<H5>
текст </H5>
<H6>
текст </H6>

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

В пример я ввела заголовок третьего уровня <H3></H3> (мой любимый размер:). Смотрите, что получилось.

Code
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000">
<center>
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font> <img src="http://src.ucoz.ru/sm/18/smile.gif" border="0" align="absmiddle" alt="smile"> </center>
<p align="justify">
Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может, даже просто случайный посетитель вдруг захочет познакомится со мной. У меня появится еще один виртуальный друг? <img src="http://src.ucoz.ru/sm/18/smile.gif" border="0" align="absmiddle" alt="smile">
</p>
</body>
</html>

Заголовки предназначены для выделения небольшой части текста (строки, фразы), НО, если вы хотите выделить большой фрагмент текста, или только одно слово, при этом без переноса строки, то как быть? С заголовками такое не пройдет, поэтому вспомним о тэге <font></font>:
<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>

Опять пришлось пожертвовать красотой:) Итак, параметр size задает размер шрифта, но, в отличие от заголовков, текст не выделятеся жирным шрифтом (о курсиве, жирном шрифте поговорим позже) и нет принудительного переноса.

Code
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000">
<center>
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font> <img src="http://src.ucoz.ru/sm/18/smile.gif" border="0" align="absmiddle" alt="smile"> </center>
<p align="justify">
Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может, даже просто случайный посетитель вдруг захочет познакомится со мной. У меня появится <font size="+1"> еще один виртуальный друг? :)</font>
</p>
</body>
</html>

В нашем примере я выделила слова "еще один виртуальный друг?", пусть все думают, что вы горите желанием завести еще одного виртуального друга:)

Прежде, чем мы двинемся дальше, хочу предупредить, что есть такая опасная болезнь у дизайнеров, как гигантомания. Ее симптомы: непомерно большие размеры шрифта, гигантские кнопища на пол экрана, вместо маленьких, милых кнопочек, толстый (жирный) во всех случаях текст. Поэтому напоминаю: стандартный size (по умолчанию) ="+0".
топаем дальше.

8.

Теперь настала пора поговорить о том как делается курсив, подчеркнутый текст, полужирный текст, фиксированный текст:

<b> Полужирный текст </b>
<i> Наклонный текст (курсив) </i>
<u> Подчеркнутый текст </u>

Тут все просто, можете их сами понатыкать, где хочется для пробы, а в примере я снова помучаю виртуального друга:

Code
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000">
<center>
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font> <img src="http://src.ucoz.ru/sm/18/smile.gif" border="0" align="absmiddle" alt="smile"> </center>
<p align="justify">
Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может, даже случайный посетитель вдруг захочет познакомится со мной. У меня появится <b> еще один виртуальный друг? :)</b>
</p>
</body>
</html>

Теперь пара строк о фиксированом шрифте. Что это такое за шрифт? Это шрифт с символами одинаковой ширины, потому собственно его назвали фиксированным. А тэг для него следующий:

<tt> fixed - фиксированный шрифт </tt>

<pre> текст (куча пробелов) текст </pre>

Текст между <pre> и </pre> тоже фиксированный, но тут есть одна большая особенность, он не только фиксированный, еще он выводится с точностью до пробела так, как вы его набили в блокноте, сей странный тэг может быть полезен, допустим, для форматирования стихотворений, не злоупотребляйте им, т.к. он коварный и противный:)

Запомните, к одному фрагменту текста может применятся сразу несколько тэгов:

<tt><b><i> текст </tt>
</b></i>
В нашем примере текст фиксированный, полужирный, курсивный (вот так-то:), так что не бойтесь использовать различные комбинации тэгов, эксперементируйте, но с умом:)

Хочу прежде, чем мы перейдем к картинкам, также упомянуть об одном интересном атрибуте тэга <font>:

<font face="ARIAL"> текст (шрифт Arial)</font>

С помощью атрибута face в нашем примере я задала шрифт Arial. Таким образом вы можете задать какой-нибудь экзотический шрифт для своей страницы, но это немного рискованно, т.к. у вашего посетителя может не оказаться такого шрифта, поэтому все же лучше задавайте стандартные (Arial (без надсечек), Times Roman (пропорциональный), Courier (равноширинный)).

Все-все, теперь идем рисовать:)

9.

Сядем, отдохнем, поговорим о планах на будущее: как рисовать, как пользоваться графическими редакторами я вас учить не буду, я только посоветую вам Adobe Photoshop + Image Styler 1.0, т.к. я пользуюсь в основном этими двумя.

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

Также я посоветую не изощряться с анимированными картинками (они отвлекают внимание от содержания странички, а анимированная картинка не к месту смотрится как золотое колье на немытой шее - нелепо).

Теперь я с чистой совестью поведаю, как вставлять картинки в документ:

<img src="my.jpg">

Вместо my.jpg мы можем подставить имя любой картинки (me.gif, main.png). Самое главное понять, что все расположенное между кавычками - ссылка (путь к картинке). Наш пример говорит о том, что картинка лежит в том же каталоге (директории, папке), в которой лежит наш документ. Если картинка лежит в поддиректории то ссылка на неё будет выглядеть так:

<img src="/my/my.jpg">

Если картинка лежит на уровень выше, а документ находится в поддиректории, то ссылка на неё будет такой:

<img src="../my.jpg">

Если картинка лежит на другом сайте, то путь прописывается полностью:

<img src="http://www.homepage.ru/my/my.jpg">

Для вашего удобства кладите картинку в ту же директорию, что документ, тогда путаницы будет меньше:)

Если у вас нет на данный момент картинки, то сохраните эту (жми на ссылку) у себя в директории с нашей страничкой. В нашем примере я использую именно ее (запомните тэг img не требует закрывающего тэга).

Code
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000">
<center>
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font> <img src="http://src.ucoz.ru/sm/18/smile.gif" border="0" align="absmiddle" alt="smile"> </center>
<p align="justify">
<img src="primtocodephoto.gif"> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может, даже случайный посетитель вдруг захочет познакомится со мной. У меня появится <b> еще один виртуальный друг? :)</b>
</p>
</body>
</html>

Посмотрите, что у нас получилось. Не очень симпатишно, не так ли? Было бы лучше, если бы текст аккуратно располагался сбоку от картинки. Идем дальше, чтобы узнать, как это сделать.

10.

Итак, мы задались вопросом как же сделать так, чтобы текст располагался весь рядом с картинкой, а не только одна его строчка. Все очень просто. У некоторых тэгов есть параметры (атрибуты), параметр может задаваться один, а может их быть несколько. Например у тэга

- <p align="justify">. Параметр align есть у картинок тоже:

<img src="pr1.png" align="left">

Это означает, что картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа. Чтобы сделать наооборот (картинка справа, текст слева) надо прописать right:

<img src="pr1.png" align="right">

Но это не все: текст может располагаться внизу картинки (это по умолчанию) - (1), посередине - (2), вверху - (3):
(1) - <img src="pr1.png" align="bottom">
(2) - <img src="pr1.png" align="middle">
(3) - <img src="pr1.png" align="top">

Кроме параметра align существует еще несколько параметров:
(1) - <img src="pr1.png" Vspace="10">
(2) - <img src="pr1.png" Hspace="30">
(3) - <img src="pr1.png" alt="моя фотография">
(4) - <img src="pr1.png" width="100">
(5) - <img src="pr1.png" height="200">
(6) - <img src="pr1.png" border="5">

Теперь последуют обяснения по пунктам.

(1) - параметр vspace - задает расстояние между текстом и рисунком (по вертикали). Расстояние задается в пикселях (pixel - минимальная единица изображения, точка. Например разрешение экрана 800х600 - 800 на 600 точек). В нашем примере расстояние равно 10 пикселям.

(2) - параметр hspace - тоже задает расстояние между текстом и рисунком, но по горизонтали. Расстояние задается в пикселях. В нашем примере оно равно 30 пикселям (точкам).

(3) - параметр alt - краткое описание картинки. Если навести курсором мыши на рисунок, подержать его (курсор) несколько секунд, выскочит описание картинки. В нашем случае это будет фраза - "моя фотография". Если параметр alt не задавать, описания не будет. Но умные люди говорят, что описание картинкам задавать следует (особенно, если это кнопки), т.к. есть особенные люди, которые бродят по интернету с отключенной графикой. Без alt им не будет видно на что жать, т.к. картинка не отображается, а при заданном alt, можно увидеть надпись, для чего она (картинка) предназначалась.

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

(5) - параметр height - высота самой картинки (тоже в пикселях). Так же как в случае с width высоту (height) картинки можно не задавать. Правда, умные люди говорят, что размеры картинок следует задавать, для тех же особенных людей с отключенной графикой...

(6) - параметр border - рамка вокруг самой картинки (в пикселях). Можно не задавать.

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

<img src="pr1.png" align="left" HSPACE=30 VSPACE=5 alt="моя фотография">

Наша картинка будет прижата к левому краю экрана, текст будет обтекать ее справа, расстояние до текста по горизонтали - 30 пикселей, по вертикали - 5 пикселей (чтобы красиво все смотрелось), если вы наведете на картинку курсор, то выскочит надпись - "моя фотография".

Code
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000">
<center>
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font> <img src="http://src.ucoz.ru/sm/18/smile.gif" border="0" align="absmiddle" alt="smile"> </center>
<p align="justify">
<img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография"> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. <br><br> А может даже просто случайный посетитель вдруг захочет познакомится со мной. У меня появится <b> еще один виртуальный друг? <img src="http://src.ucoz.ru/sm/18/smile.gif" border="0" align="absmiddle" alt="smile"> </b><br><br> На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего:) <br><br> Если ты так тоже думаешь, то давай как-нибудь встретимcя, поболтаем, чайку попьем в кафешке?:) Кто знает, может быть мы даже в реальной жизни станем друзьями:)
</p>
</body>
</html>

Советую вам прежде, чем двинуться дальше, по подставлять другие параметры в наш пример, задавать разное значение в пикселях и так далее - это вам поможет лучше усвоить, все-таки тема большая, тяжело все с первого раза запонить:)

Вот мы узнали о том, как расположить текст относительно картинки (+ еще несколько нужных параметров), но мы не говорили как расположить саму картинку в центре экрана (справа, слева). Здесь все очень просто, картинки так же как текст можно расположить при помощи параграфов (

</p>), это наглядно представлено в нашем примере.

Да, чуть не забыла сказать о том, что картинку можно сделать фоном документа. Это безобразие прописывается в открывающем тэге боди:

<body text="#336699" bgcolor="#000000" background="ваш_фон.jpg">

Параметр Background указывет на то, где лежит фоновая картинка, в нашем примере он указывает на то, что наша фоновая картинка лежит в той же директории (папке), где лежит документ.

Но зачем оставлять параметр bgcolor, если есть background? А вдруг фоновая картинка не загрузится (представьте, такое может быть), тогда сами поймете зачем.

Если вы достаточно поигрались с параметрами картинок, то продолжим наше обучение.

Как установить кнопки социальных сетей?

Time Waits For No One
 
SleepWalkerДата: Понедельник, 28.01.2008, 20:21 | Сообщение # 2
Admin
Сообщений: 5493
Репутация: 487
Социальная репутация:

Статус: Offline
11.

Теперь пора поговорить о ссылках. Наша страничка может состоять из нескольких документов. Один из них главный (index.html или main.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, где лежит нужный нам документ.

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

Разберемся что к чему: link - цвет ссылки, alink - цвет активной ссылки (нажатой), vlink - цвет уже посещенной ссылки. В нашем примере цвета одинаковые, но они могут быть разными, также не карается законом, если цвет ссылки такой же как цвет текста документа (ссылка же выделяется чертой). Итак пропишем цвета для ссылки плюс саму ссылку в нашем документе:

Code
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999">
<center>
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font> <img src="http://src.ucoz.ru/sm/18/smile.gif" border="0" align="absmiddle" alt="smile"> </center>
<p align="justify">
<img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография"> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей, чтобы они могли <a href="prf.html">посмотреть мои фотографии</a>, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. <br><br> А может даже просто случайный посетитель вдруг захочет познакомится со мной. У меня появится <b> еще один виртуальный друг? <img src="http://src.ucoz.ru/sm/18/smile.gif" border="0" align="absmiddle" alt="smile"> </b><br><br> На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего:) <br><br> Если ты так тоже думаешь, то давай как-нибудь встретимcя, поболтаем, чайку попьем в кафешке?:) Кто знает, может быть мы в реальной жизни станем друзьями:)
</p>
</body>
</html>

Ничего хитрого. Тeперь нам следует запомнить то, что ссылка на ваш почтовый ящик прописывается так:

pochta@mail.ru - пишите письма

Запомните это раз и навсегда — не пытайтесь ее прописать по другому. Ссылка на документ, картинку или файл - одно дело, а ссылка на почтовый ящик - другое (да, но цвета всех ссылок в документе одинаковые:).

12.

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

Это мы введем в наш пример, сделав ссылкой на документ с фотографиями (prf.html) картинку pr1.png:

Code
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999">
<center>
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font> <img src="http://src.ucoz.ru/sm/18/smile.gif" border="0" align="absmiddle" alt="smile"> </center>
<p align="justify">
<a href="prf.html"><img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография"></a> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей, чтобы они могли <a href="prf.html">посмотреть мои фотографии</a>, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. <br><br> А может даже просто случайный посетитель вдруг захочет познакомится со мной. У меня появится <b> еще один виртуальный друг? <img src="http://src.ucoz.ru/sm/18/smile.gif" border="0" align="absmiddle" alt="smile"> </b><br><br> На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего:) <br><br> Если ты так тоже думаешь, то давай как-нибудь встретимcя, поболтаем, чайку попьем в кафешке?:) Кто знает, может быть мы в реальной жизни станем друзьями:)
</p>
</body>
</html>

Теперь посмотрите в Explorer, что у нас получилось. Картинка primtocodephoto.gif стала ссылкой. Если вы заметили (а если не заметили, то обратите внимание): вокруг картинки появилась рамочка. Эту рамочку можно оставить, если вам она нравится, а можно убрать, если вы зададите картинке параметр border="0"
моя фотография

Если вы думаете, что на этом ваше мучение с изучением ссылок закончилось, то это зря вы так:) - у нас впереди еще целая ступенька.

13.

Если вы уже достаточно попутешествовали по интернету, то вы должны были заметить, что ссылка может быть не только на документ с расширением *.html, но и на многие другие (*.doc, *.mp3, *.jpg, *.gif, *.txt, *.zip, *.exe) Как это делается? Да все по тому же принципу:

скачать песню

Если адрес указан таким способом:

музыкальный сайт

То это означает, что в указаном каталоге есть файл вроде index.html, который загрузится по умолчанию.

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

В этом случае большая картинка откроется в том же окне. Но как же сделать так, чтобы картинка (или любой другой файл-документ) открылась в новом окне? Дело в том, что у тэга есть параметр target:

Итак, target="_blank" - указывает на то, что документ (картинка в нашем случае), на который ведет ссылка, откроется в новом окне броузера (Explorer`а). В наш большой пример я это вводить не буду. Т.к. не хочу заводить большие картинки на сайте, к тому же вы должны уже сами все подставлять и сами эксперементировать:)

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

Дальше в статье расказуется про списки, про которые более подробно можно прочитать здесь

Источник:http://www.web-biznes.ru/

Time Waits For No One
 
HotDДата: Воскресенье, 13.07.2008, 23:34 | Сообщение # 3
Рядовой
Сообщений: 15
Репутация: 1
Социальная репутация:

Статус: Offline
Я только начал осваивать html... эта статья очень познавательная... SleepWalker, Спс! wink
 
JesseДата: Понедельник, 05.01.2009, 19:11 | Сообщение # 4
Зайчик
Сообщений: 2132
Репутация: 111
Социальная репутация:

Статус: Offline
эхххх ладно, скажу. свой путь к веб-дизайну я начал с этой статьи. SleepWalker, если писал ты - респект)))
На вопросы в ЛС все равно не отвечаю, так что, пожалуйста, не тратьте ни своего ни моего времени.
 
SleepWalkerДата: Вторник, 06.01.2009, 09:08 | Сообщение # 5
Admin
Сообщений: 5493
Репутация: 487
Социальная репутация:

Статус: Offline
не, ету не я писал. Сайт где я ее нашел уже помойму закрылся...
Time Waits For No One
 
JesseДата: Понедельник, 26.01.2009, 20:31 | Сообщение # 6
Зайчик
Сообщений: 2132
Репутация: 111
Социальная репутация:

Статус: Offline
SleepWalker, всеравно рэспект biggrin
На вопросы в ЛС все равно не отвечаю, так что, пожалуйста, не тратьте ни своего ни моего времени.
 
TonicДата: Вторник, 27.01.2009, 11:23 | Сообщение # 7
Подполковник
Сообщений: 100
Репутация: 17
Социальная репутация:

Статус: Offline
Quote (SleepWalker)
не, ету не я писал. Сайт где я ее нашел уже помойму закрылся...

не наврятли,потомучто я тоже стал не давно знакомится с этим и наткунлся на сайт где это написано,не помнб через укоз нашел,очень интересно и я стал чуток догонять что и как biggrin

не умеете учитесь,не хатите придется платить такова жизнь.

 
SleepWalkerДата: Вторник, 27.01.2009, 11:57 | Сообщение # 8
Admin
Сообщений: 5493
Репутация: 487
Социальная репутация:

Статус: Offline
вот автор - http://www.web-biznes.ru/
ето 100% автор етой статьи. а другие сайты юкоза точно так же могли эту статью взять оттуда

Time Waits For No One
 
TonicДата: Среда, 28.01.2009, 00:17 | Сообщение # 9
Подполковник
Сообщений: 100
Репутация: 17
Социальная репутация:

Статус: Offline
не спорю.Щас везде плагиатство,это не стремно,ты что-то взял с каковато сайта потом у тебя вазьмут,взаимопомощь,ну и халявная реклама)) biggrin

не умеете учитесь,не хатите придется платить такова жизнь.

 
BrakemanДата: Среда, 06.01.2010, 15:24 | Сообщение # 10
Рядовой
Сообщений: 3
Репутация: 0
Социальная репутация:

Статус: Offline
До меня 11 пункт не доходит cry cry

Добавлено (06.01.2010, 15:24)
---------------------------------------------
Уряя всё понял happy happy

 
SleepWalkerДата: Четверг, 07.01.2010, 21:56 | Сообщение # 11
Admin
Сообщений: 5493
Репутация: 487
Социальная репутация:

Статус: Offline
приятно, что тебе это помогло)
Time Waits For No One
 
MEP3ABELLДата: Вторник, 30.11.2010, 10:45 | Сообщение # 12
Рядовой
Сообщений: 8
Репутация: 0
Социальная репутация:

Статус: Offline
Нас в школе так же учили уже ничего не помню, но было интересно!
 
ЯндексДата: Вторник, 07.12.2010, 14:39 | Сообщение # 13
Подполковник
Сообщений: 138
Репутация: 6
Социальная репутация:

Статус: Offline
Quote (Tonic)
.Сейчас везде плагиатство,это не стремно,ты что-то взял с каковато сайта потом у тебя вазьмут

В этом ты прав)))

У меня на сайте уже это стоит)

Статья хорошая wink wink wink

О_о
 
funeralismaticДата: Вторник, 07.12.2010, 15:07 | Сообщение # 14
BANNHAMMER
Сообщений: 3249
Репутация: 237
Социальная репутация:

Статус: Hidden
StreloK14, ворюга! я объявлю тебя в розыск, за тобой сейчас приедут!!! biggrin
если у тебя сайт на тему игры, то каким боком там статья эта нужна??

Правила форума :: Заработок для ВСЕХ
Это моё последнее предупреждение.
 
EstennyДата: Вторник, 07.12.2010, 15:28 | Сообщение # 15
Злой Принц
Сообщений: 3005
Репутация: 120
Социальная репутация:

Статус: Offline
Какая разница? Все то - зеркало, ведь эта статья тут раньше других появилась - значит поиски не будут пробивать зеркала и пользы не будет.
 
Форум о uCoz и Web » Веб-программирование и дизайн » HTML » Основы HTML - Коротко про самое основное
  • Страница 1 из 4
  • 1
  • 2
  • 3
  • 4
  • »
Поиск: