Страница 1 из 3 123 ПоследняяПоследняя
Показано с 1 по 15 из 32

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

  1. #1
    Группа удаления
    Регистрация
    02.06.2005
    Сообщений
    781
    Спасибо
    я - 14; мне - 1

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

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

    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, но существует еще очень много всяких разностей, тонкостей, дополнений, о которых вы можете узнать по тем адресам, которые я давала выше. Смотрите, пробуйте, учитесь!
    Удачи вам и вашему сайту!

  2. #2
    Питерский миХеевец Аватар для elek
    Регистрация
    08.12.2005
    Адрес
    Санкт-Петербург
    Сообщений
    699
    Спасибо
    я - 0; мне - 1
    добавлю немного

    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>
    Самое главное - то, чего не увидишь глазами... (с) "Маленький принц"


  3. #3
    Группа удаления Аватар для OsTin
    Регистрация
    02.12.2005
    Сообщений
    378
    Спасибо
    я - 0; мне - 0
    а еще легче начинающему- взять "Microsoft FrontPage"
    "наши фурри -креативные до дури"(с)
    не нарушайте и ненарушимы будете..

    хорошо, когда человек делает деньги. плохо, когда деньги делают человека..

  4. #4
    Администратор, Консультант по математике
      За вклад в развитие форума 2006, Лучший знаток физики 2007, Самый активный автор месяца. Август 2007, Лучший консультант 2007, Лучший супермодератор 2007, Народный модератор раздела "Наука и Образование" 2008, Лучший супермодератор 2008, Лучший консультант 2008
    Аватар для Trotil
    Регистрация
    15.12.2005
    Адрес
    град Москва
    Сообщений
    5,890
    Записей в блоге
    26
    Спасибо
    я - 57; мне - 380
    OsTin
    вот таких советов начинаещему личше не советовать.
    Lafiera
    Хорошее начинание. Правда, чувствуется некоторая сумбрность Прикритиковать можно?
    Ленивый дурак - это полбеды; деятельный дурак - это для всех головная боль, но нет ничего хуже, чем дурак с инициативой, да ещё и при должности.

  5. #5
    Питерский миХеевец Аватар для elek
    Регистрация
    08.12.2005
    Адрес
    Санкт-Петербург
    Сообщений
    699
    Спасибо
    я - 0; мне - 1
    критикуй и исправляй если что ошибки и неточности
    думаю, никто не обидится

    А для несумбурности надо сесть и заранее все расписать, а перед этим что-то типа схемы-плана составить. Честно признаюсь, я прямо здесь сообщение и писала, без всяких подготовок. Тему почитала и решила добавить, пока помнила то, что пришло в голову при чтении
    Самое главное - то, чего не увидишь глазами... (с) "Маленький принц"


  6. #6
    Группа удаления Аватар для OsTin
    Регистрация
    02.12.2005
    Сообщений
    378
    Спасибо
    я - 0; мне - 0
    вот таких советов начинаещему личше не советовать.
    а что? там почти половина страницы на автомате делается, сиди и поправляй себе.. ну мне по крайней мере это легче было чем с блокнотами возится..
    ладно.. больше соваться небуду..
    "наши фурри -креативные до дури"(с)
    не нарушайте и ненарушимы будете..

    хорошо, когда человек делает деньги. плохо, когда деньги делают человека..

  7. #7
    Администратор, Консультант по математике
      За вклад в развитие форума 2006, Лучший знаток физики 2007, Самый активный автор месяца. Август 2007, Лучший консультант 2007, Лучший супермодератор 2007, Народный модератор раздела "Наука и Образование" 2008, Лучший супермодератор 2008, Лучший консультант 2008
    Аватар для Trotil
    Регистрация
    15.12.2005
    Адрес
    град Москва
    Сообщений
    5,890
    Записей в блоге
    26
    Спасибо
    я - 57; мне - 380
    Темка структура подачи материала, в которой мы спорили о целесообразности подачи того или иного способа объяснения.
    Основная просьба как минимум здесь будет состоять в том,, чтобы людям прочитавшим эту темку, потом не пришлось переучиваться. А значит:
    - придерживаться XHTML 1.0/1.1 (HTML 4.01 - последний стандарт - выпущен в 1999 году и развиваться по всей видимости больше не будет)
    - сформировать понимание о таких понятиях, как содержание и представление
    - не использовать устаревшие теги и фреймы
    - договориться о некотором едином формате оформления тем и материалов

    OsTin
    Это было не замечание, а мое мнение, как участника Чтож вы так остро на критику реагируете?
    Ленивый дурак - это полбеды; деятельный дурак - это для всех головная боль, но нет ничего хуже, чем дурак с инициативой, да ещё и при должности.

  8. #8
    Группа удаления Аватар для OsTin
    Регистрация
    02.12.2005
    Сообщений
    378
    Спасибо
    я - 0; мне - 0
    хм.. я всего лишь говорил что я в HTML не разбираюсь и эта тема не в моей компитенции.. разве остро?
    "наши фурри -креативные до дури"(с)
    не нарушайте и ненарушимы будете..

    хорошо, когда человек делает деньги. плохо, когда деньги делают человека..

  9. #9
    Группа удаления
    Регистрация
    02.06.2005
    Сообщений
    781
    Спасибо
    я - 14; мне - 1
    Цитата Сообщение от Trotil
    Lafiera
    Хорошее начинание. Правда, чувствуется некоторая сумбрность Прикритиковать можно?
    Можно, конечно
    OsTin
    Правда, не стоит так негативно реагировать на критику, как говорится, век живи - век учись, и тем более, если вы не очень хорошо разбираетесь в html, как вы сами сказали. Все же здесь не ведется обсуждение, а даются советы. Относительно автоматических редакторов страниц, я солидарна с Тротилом.

  10. #10
    Администратор, Консультант по математике
      За вклад в развитие форума 2006, Лучший знаток физики 2007, Самый активный автор месяца. Август 2007, Лучший консультант 2007, Лучший супермодератор 2007, Народный модератор раздела "Наука и Образование" 2008, Лучший супермодератор 2008, Лучший консультант 2008
    Аватар для Trotil
    Регистрация
    15.12.2005
    Адрес
    град Москва
    Сообщений
    5,890
    Записей в блоге
    26
    Спасибо
    я - 57; мне - 380
    Аматэрасу
    Твоя спецификация устаревшая - новее Спецификация HTML 4.01
    Также два справочника по тегам:
    http://htmlbook.ru/
    http://www.chebot.ru/
    Ленивый дурак - это полбеды; деятельный дурак - это для всех головная боль, но нет ничего хуже, чем дурак с инициативой, да ещё и при должности.

  11. #11
    Группа удаления Аватар для MaDy
    Регистрация
    06.01.2006
    Сообщений
    95
    Спасибо
    я - 0; мне - 0
    Скажите, пожалуйста, как картинку сделать фоном? У меня ничего не получается.
    Хороший человек не тот, кто делает много добра, а тот, кто не делает зла...

  12. #12
    Администратор, Консультант по математике
      За вклад в развитие форума 2006, Лучший знаток физики 2007, Самый активный автор месяца. Август 2007, Лучший консультант 2007, Лучший супермодератор 2007, Народный модератор раздела "Наука и Образование" 2008, Лучший супермодератор 2008, Лучший консультант 2008
    Аватар для Trotil
    Регистрация
    15.12.2005
    Адрес
    град Москва
    Сообщений
    5,890
    Записей в блоге
    26
    Спасибо
    я - 57; мне - 380
    MaDy
    <body background="URL">...</body>
    Ленивый дурак - это полбеды; деятельный дурак - это для всех головная боль, но нет ничего хуже, чем дурак с инициативой, да ещё и при должности.

  13. #13
    Группа удаления Аватар для MaDy
    Регистрация
    06.01.2006
    Сообщений
    95
    Спасибо
    я - 0; мне - 0
    Цитата Сообщение от Trotil Посмотреть сообщение
    MaDy
    <body background="URL">...</body>
    Всё равно ничего не выходит. Может подробнее опишите?
    Хороший человек не тот, кто делает много добра, а тот, кто не делает зла...

  14. #14
    Старожил Аватар для shatoo
    Регистрация
    12.08.2005
    Адрес
    КИЕВ
    Сообщений
    160
    Спасибо
    я - 28; мне - 19
    А как сделать чтобы текст обтекал рисунок?

  15. #15
    Администратор, Консультант по математике
      За вклад в развитие форума 2006, Лучший знаток физики 2007, Самый активный автор месяца. Август 2007, Лучший консультант 2007, Лучший супермодератор 2007, Народный модератор раздела "Наука и Образование" 2008, Лучший супермодератор 2008, Лучший консультант 2008
    Аватар для Trotil
    Регистрация
    15.12.2005
    Адрес
    град Москва
    Сообщений
    5,890
    Записей в блоге
    26
    Спасибо
    я - 57; мне - 380
    Цитата Сообщение от shatoo
    А как сделать чтобы текст обтекал рисунок?
    Самый простой способ - это <img src="..." align="left(right)"> Чтобы текст не прилегал плотно к рисунку, рекомендуется в теге <IMG> добавить параметр hspace и vspace, задающих расстояние до текста в пикселах.
    Ленивый дурак - это полбеды; деятельный дурак - это для всех головная боль, но нет ничего хуже, чем дурак с инициативой, да ещё и при должности.

Страница 1 из 3 123 ПоследняяПоследняя

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения
  •