• Уважаемый посетитель!!!
    Если Вы уже являетесь зарегистрированным участником проекта "миХей.ру - дискусcионный клуб",
    пожалуйста, восстановите свой пароль самостоятельно, либо свяжитесь с администратором через Телеграм.

Азы создания страниц (html для начинающих)

  • Автор темы Автор темы Alleems
  • Дата начала Дата начала

Alleems

Почетный участник
Данная тема создана для тех, кто не может найти максимально простой учебник для начинающих сайтостроителей, а делать сайт с готовым шаблоном не хочет. Здесь расписаны несколько простейших пунктов написания страниц, самые основы. Разумеется, для создания полноценного сайта этого недостаточно, но, по крайней мере, думаю, теперь вы не будете создавать темы вроде "Как сделать ссылку на страницу?" ;)

01. О тегах
Для начала уясним, что страницы пишутся на особом языке, языке html. Html предназначен для разметки текстовых документов, т.е. с его помощью размечают текст, картинки и все остальное, расположенное на странице.
Чтобы все это записать, используются специальные метки, называемые тэгами (от англ. слова “tag”). Все тэги пишутся в скобках < и >, таким образом, все, что стоит в таких скобках – тэг. Такие тэги, как <html>, <head> и <body>, являются обязательными тэгами, которые должны присутствовать в нашей странице, чтобы она корректно отображалась.

Есть два типа тэгов: требующие закрывающего и не требующие. К первым относится тот же тэг <html>, а закрывающий вариант выглядит так: </html>. Ко вторым относится такой тэг, как <br>, отвечающий за начинание новой строки.
- Все, что расположено между тэгами <head> и </head> - голова документа, там, как правило, располагается различная служебная информация.
- Между тэгами <body> и </body> расположено непосредственное содержание страницы, то есть текст, картинки и т.д.
Тэг может содержать в себе и другие тэги, но важно помнить последовательность закрывания тэгов:
<тэг1><тэг2>содержание</тэг2></тэг1>
То есть, если вы начали тэг 1 раньше тэга 2, то закрыть тэг 1 следует после того, как вы закроете тэг 2.

Посмотреть, какие еще есть тэги, можно тут: http://html.maxhost.ru (кстати, добавьте эту страницу в избранное, она вам еще пригодится).

02. Шрифт и цвет, фон
Как же изменить шрифт и его цвет? Очень просто. Следует прописать в специальном тэге <font> (обратите внимание, что этот тэг закрывающийся) нужный нам шрифт и его цвет, а если хотите – еще некоторые параметры, помогающие отобразить написанный текст разнообразнее.
Но тут нужно помнить, что далеко не все шрифты, которые есть на вашем компьютере, окажутся и на всех других машинах, а значит, не на всех других они будут отображаться так, как надо. Поэтому лучше используйте стандартные шрифты:
Times, Arial, Verdana, Tahoma, Helvetica, Courier, Cosmic Sans или Garamond. Как они выглядят, можете посмотреть, открыв Microsoft Word и выбрав нужный шрифт.

Существуют цвета, которые одинаково хорошо поддерживают все броузеры, поэтому если вам не нужно каких-то особо индивидуальных настроек цвета, воспользуйтесь теми, что показаны здесь: http://www.artlebedev.ru/tools/colors Код, состоящий из букв и/или цифр, расположенный над цветом, вы и прописываете в тэге <font>. Также существует несколько вариаций написания текста, например: жирный, подчеркнутый, курсив. Они отмечаются соответственно тэгами <b></b>, <u></u> и <i></i>. Но следует помнить, что эти тэги прописываются отдельно от тэга <font>.
Вот как это делается.
- Например, вам нужно, чтобы фраза «Я живу в России» была написана шрифтом Tahoma, была синего цвета (код 000099) и отображалась курсивом. Прописываем:
<font face=”Tahoma” color=”000099”><i>Я живу в России</i></font>
(Обратите еще раз внимание на очередность закрывания тэгов!)
Face и color, а также все другие подобные им дополнения к тэгам, носят название параметр или атрибут.
- Если же вы хотите, чтобы весь текст на всей странице был какого-то определенного цвета (по умолчанию он черный), допустим, того же синего, то прописываем в тэге <body> атрибут text, иными словами, вот это:
<body text="000099">

Когда вам нужно сделать фон страницы какого-то определенного цвета, например, белого, то прописываете следующее:
<body bgcolor=”FFFFFF”>
Только, пожалуйста, не клонируйте эти тэги <body>, вы можете прописать и текст всей страницы, и ее фон в одном тэге, используя просто пробел между атрибутами. Например:
<body text=”000099” bgcolor=”FFFFFF”>

03. Картинки
Вставлять картинки тоже очень легко. Существует тэг <img> (он не требует закрывания). Например, картинка, которую вы хотите вставить на страницу, носит название myimage.jpg (только не забудьте загрузить ее в сеть, иначе у вас ничего не получится).
Прописываем:
<img src=”myimage.jpg”>.
Готово! Ваша картинка появилась на странице.
Прямо от картинок давайте перейдем к ссылкам.

04. Ссылки
Ссылкой может быть и текст (1), и картинка (2), создается ссылка с помощью тэга <a> (он является закрывающимся).
- (1) Допустим, вам нужно сделать ссылкой на какую-то страницу на вашем сайте, носящую название «stranitsa2.html», слово “Страница 2”. Вот как это будет выглядеть:
<a href=”stranitsa2.html”>Страница 2</a>
- (2) В случае с картинкой, пишется все немного иначе. Например, следует сделать ссылкой на страницу 2 всю ту же картику myimage.jpg. Пишем:
<a href=”stranitsa2.html”><img src=”myimage.jpg”></a>
В этом случае, нажав на картинку, вы попадете на нужную страницу.

Также следует разобрать один важный момент: ссылка на е-майл. Прописывается это чуть-чуть по-другому. Если ваш е-майл – vasya@mail.ru, то прописываете следующее:
<a href=”mailto:vasya@mail.ru”>
"Mailto" в данном случае – вещь обязательная.

Помимо этого, ссылка может быть ссылкой не только на страницу, но и на картинку, какой-то другой файл (музыку или программу, которые пользователи смогут скачать с вашего сайта). Делается это так. Допустим, нужно сделать слова "Моя фотография" ссылкой на картинку с именем myimage.jpg.
<a href="myimage.jpg">Моя фотография</a> Вот и все!

Это - самые-самые основы языка html, но существует еще очень много всяких разностей, тонкостей, дополнений, о которых вы можете узнать по тем адресам, которые я давала выше. Смотрите, пробуйте, учитесь!
Удачи вам и вашему сайту! :)
 
добавлю немного

1. как и где создавать html-документы
Все содержание html-документа (вместе с тегами) пишется в любом текстовом редакторе, простейший вариант - блокнот.
Когда напишите содержание странички, проделываете стандартные операции по сохранению - "файл >> сохранить как". Далее !внимание! в списке "типы файлов" выбираете "все файлы" и пишите название документа с расширением .htm или .html
Например, если вы сохраняете страничку под именем index, то должны написать index.htm

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

2. название документов
все документы, относящиеся к одному проекту, лучше хранить в одной папке. Главный документ, который будет загружаться в браузере посетителя вашего сайта при обращении к вашему сайту, лучше сохранять под именем index.htm или index.html. Именно такое название считается стандартным и является требованием любого хостера.

3. добавление по поводу картинок
атрибут src тега <img>, описанный Lafier(ой) является таковым при условий, что графический файл находится в той же папке, что и html-документ, в котором вы его размещаете.
Если же, например, документ index.htm (в котором вы хотите разместить картинку) находится в корневой папке вашего сайта (например, mysite), а рисунок (image1.gif) - во вложенной в mysite папке pic (к примеру), то тег, описывающий размещение рисунка, будет следующий.
<img src="pic/image1.gif">

P.S. тег <html></html> является самым первым в вашем документе
<html>
<head></head>
<body></body>
</html>
 
OsTin
вот таких советов начинаещему личше не советовать.
Lafiera
Хорошее начинание. Правда, чувствуется некоторая сумбрность ;) Прикритиковать можно?
 
критикуй и исправляй если что ошибки и неточности
думаю, никто не обидится :)

А для несумбурности надо сесть и заранее все расписать, а перед этим что-то типа схемы-плана составить. Честно признаюсь, я прямо здесь сообщение и писала, без всяких подготовок. Тему почитала и решила добавить, пока помнила то, что пришло в голову при чтении
 
вот таких советов начинаещему личше не советовать.
а что? там почти половина страницы на автомате делается, сиди и поправляй себе.. ну мне по крайней мере это легче было чем с блокнотами возится.. :)
ладно.. больше соваться небуду..
 
Темка структура подачи материала, в которой мы спорили о целесообразности подачи того или иного способа объяснения.
Основная просьба как минимум здесь будет состоять в том,, чтобы людям прочитавшим эту темку, потом не пришлось переучиваться. А значит:
- придерживаться XHTML 1.0/1.1 (HTML 4.01 - последний стандарт - выпущен в 1999 году и развиваться по всей видимости больше не будет)
- сформировать понимание о таких понятиях, как содержание и представление
- не использовать устаревшие теги и фреймы
- договориться о некотором едином формате оформления тем и материалов

OsTin
Это было не замечание, а мое мнение, как участника ;) Чтож вы так остро на критику реагируете? ;)
 
хм.. я всего лишь говорил что я в HTML не разбираюсь и эта тема не в моей компитенции.. разве остро? :)
 
Trotil написал(а):
Lafiera
Хорошее начинание. Правда, чувствуется некоторая сумбрность ;) Прикритиковать можно?
Можно, конечно :)
OsTin
Правда, не стоит так негативно реагировать на критику, как говорится, век живи - век учись, и тем более, если вы не очень хорошо разбираетесь в html, как вы сами сказали. Все же здесь не ведется обсуждение, а даются советы. Относительно автоматических редакторов страниц, я солидарна с Тротилом.
 
Скажите, пожалуйста, как картинку сделать фоном? У меня ничего не получается.:mad:
 
shatoo написал(а):
А как сделать чтобы текст обтекал рисунок?
Самый простой способ - это <img src="..." align="left(right)"> Чтобы текст не прилегал плотно к рисунку, рекомендуется в теге <IMG> добавить параметр hspace и vspace, задающих расстояние до текста в пикселах.
 
MaDy
<!--
BODY {
background: #99ffff url(.jpg или .gif);
background-repeat: repeat;
background-attachment: scroll;
}
-->


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

не бейте меня только сильно:o
 
Cathy
Купить книгу про это и просто прочитать. Для начала.

Подходит такой вариант?
(боюсь, что нет)
 
:D Trotil
)))))))))))))))(y) ну хоть сайт какой-нибудь посоветуй))) где можно почитать, а то книга - совсем страшно))

ой про flesh-сайт вообще могу пока не мечтать?

короче у меня как всегда идей масса - а как все это реализовать не знаю
 
Назад
Сверху