Создание сайта часть1

[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]

Страница 1 из 1
1

Форум » Уроки HTML и CSS » Создание сайта » Создание сайта часть1

pegas

Дата: Среда, 01.12.2010, 16:19 | Сообщение # 1

Журналист

Зарегистрирован: 13.12.2009

Группа: Администраторы

Пользователь №: 18

Сообщений: 7

Репутация: 1058

Статус: Offline

Создание сайта.

Данный урок поможет Вам за пару дней выучить основные моменты сайто - строения.

Вы поэтапно, шаг за шагом создадите свою первую страничку в сети интернет. На основании её, Вы без особого труда сможете создавать и редактировать сайты. Внимательно изучите две странички, если что не поняли, лучше вернуться назад и разобрать заново. На всё про всё, Вы потратите 4-8 часов, но это стоит того!
Итак, для начала создай на диске отдельную директорию (папку) для будущей страницы (порядок прежде всего:).
1.D:\первые шаги\
Теперь откроем блокнот (notepad) и скопируем туда следующий текст:

Quote

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

Первое, что нам нужно усвоить, что хтмл (html) это то, то мы сейчас изучаем. Второе, что нам нужно усвоить:Html не является языком программирования , он предназначен для разметки текстовых документов (т.е. для форматирования тескста). То, как будет выглядеть ваш текст, определяют метки (tags или тэг).
Пример тэга: (перенос текста на другую строку, что-то вроде Enter:). Попробуйте между тэгами Body его понатыкать - посмотрите, что получится:)
(От SleepWalker'a лучше пишите не a . Так щитется грамотнее , но и первый вариант не будет ошибкой. Кстати обратите внимание что между стоит пробел, если не поставите тег работать НЕ будет)
Т.е. все, что находится между<и> - это тэг. Текст, не находящися между такими скобками < >- весь виден, при просмотре в броузере.
Как мы видим на нашем примере тэгов много и они разные:). Обратите внимание на картинку, она тут не просто так, она показывает нам обязательные тэги.
<html>
Этот тэг должен открывать документ. Если есть открывающий тэг, то должен быть и закрывающий:
</html>
И так всегда по умолчанию. Некоторые тэги, вроде , не требуют закрывающего тэга. Но вернемся к нашему документу и рисунку.
3.

Quote

<head> </head> - голова документа
<body> </body> - тело документа
Все тэги, расположенные между <head> </head>, это что-то вроде служебной информации (наша служба и опасна и трудна, и на первый взгляд как-будто не видна:). Например<title> - заголовок. Зачем он? Откройте IE (Internet Explore) с нашим документом и устремите свой взгляд выше всех командных строк (на заголовок окна)... Увидели?:)
Все тэги, расположенные между <body> </body> - непосредственное содержание документа. Следущие несколько ступенек будут посвящены именно этим тэгам: мы узнаем как менять цвет текста, фона, как делать текст крупнее-мельче, поговорим о картинках, таблицах и многом другом:)
4. На этой ступеньке мы будем учиться раскрашивать:) Для начала нам нужна будет палитра (все цвета интернета). Сохраните палитру у себя на диске, она вам еще не раз пригодится:)
Зачем все это? А затем, что все цвета прописываются именно таким способом.
Например белый цвет - ffffff
Но вернемся к нашей страничке. Давайте окрасим слова Добро Пожаловать в красный.
Добро пожаловать! :)
Теперь попробуйте вместо СС0000 поподставлять другие значения цветов.

Quote

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

Тэг - многофункционален. Им может задаваться не только цвет текста в конкретной части документа, но и размер шрифта, и вид шрифта (Arial), но об этом чуть позже.
Как же еще задавать цвета в документе? - вспомним об открывающем теге<body>:
<body text="#336699">
Это значит, что весь текст страницы будет синим, кроме текста, для которого мы специально прописали (если цвет в <body> не задавать, то по умолчанию он будет черным).

Quote

<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699">
Здравствуйте, это моя первая страница.
 
 Добро пожаловать! <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).

Quote

<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000">
Здравствуйте, это моя первая страница.
 
 Добро пожаловать! <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, безусловно, привлечет внимание, но надолго ли? Не уподобляйтесь такой девочке:).
Кстати о внимании, давайте переключим его на следущую главу моего повествования и шагнем на другую ступеньку.

Форум » Уроки HTML и CSS » Создание сайта » Создание сайта часть1

Страница 1 из 1
1