Время:
Новых сообщений: Нет
Вы на форуме дней
Ваша группа: Гость
Ваш IP: 13.58.28.196
Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.
  • Страница 1 из 1
  • 1
Модератор форума: Hawk  
Уроки HTML'а. Урок # 1.
Сообщение оставлено 29.08.2010 в 13:01:21 | Сообщение #1
Уроки HTML'а. Урок # 1.


Язык HTML не сложен для изучения, но в нем есть несколько тонкостей. На самом деле HTML в основном интуитивен и его легко читать. Он близок к английскому. В любом случае, HTML учить легче чем английский...

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

  • <HTML> - Сообщает браузеру, что документ создан на HTML.

  • <HEAD> - Отмечает вводную и заголовочную части HTML-документа.

  • <BODY> - Отмечает основной текст и информацию.

    Эти тэги необходимы Web-браузеру для определения различных частей HTML-документа, они не оказывают прямого влияния на внешний вид WEB-страницы. Они необходимы для того, чтобы последующие нововведения в HTML правильно интерпритировали вашу страницу, а также для того, чтобы она выглядела одинаково в частоиспользуемых браузерах. Например, на хостинге (место, где вы расположите веб-страницу) веб-сервером, создавая список имеющихся HTML-документов (подобных вашему), запускается программа, которая использует только эти тэги. Таким образом, если на странице нет этих тэгов, она не будет включена в этот список. Список этот используется для поиска по хостингу. К примеру, если Вы расположете свою страничку на Narod.RU, то при наличии этих тэгов Ваша страница будет доступна для поиска по Narod.RU.

    <HTML> и </HTML>.

    Эти тэги сообщают браузеру, что текст между ними следует интерпритировать как HTML-текст. Поскольку документы HTML чисто текстовые, тэг <HTML> говорит о том, что файл написан на языке HTML (HyperTextMarkupLanguage - Язык гипертекстовой разметки).

    Создавая новый HTML-файл, в первую очередь необходимо ввести данную пару тэгов. Для этого наберите <HTML> в самом начале текста. Затем наберите его напарника - </HTML> - в конце. Теперь весь текст, написанный между ними, будет принят браузерам за текст HTML. Вы заметили, что во втором тэге присутствует символ "/"? Правый слэш (/) используется для обозначения закрывающихся тэгов. Большинство HTML-тэгов парные: один открывает (<HTML>), другой закрывает (</HTML>). Их действие распространяется только на тот текст, который находится между ними.

    Итак, сейчас наша страница выглядит таким образом:

    файл: index.html

    <HTML>

    </HTML>


    Открыв на браузере эту страницу, мы ничего не увидим. Пока мы не завершили работу над <HEAD> и </HEAD>.

    Теперь введем тэги <HEAD> и </HEAD>. Они должны быть между тэгами <HTML> и </HTML>. Эти тэги отмечают ту информацию в нашем документе, которая будет служить названием.

    В этих тэгах должна содержаться следующая информация:

  • <TITLE>Design LAB</TITLE> - Между этими двумя тэгами необходимо ввести заголовок Вашей странички.

  • <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251"> - Эту строчку нужно вставить, если Вы создаете свой документ на блокноте или другом простейшем текстовом редакторе.

    Посмотрим как выглядит страничка теперь:

    файл: index.html

    <HTML>

      <HEAD>

        <TITLE>Design LAB</TITLE>

        <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">

      </HEAD>

      <BODY>

      </BODY>

    </HTML>


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

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

    файл: index.html

    <HTML>

      ...

      <BODY BGCOLOR="BLACK" TEXT="WHITE" LINK="LIME" ALINK="LIME" VLINK="LIME">

      ...

      </BODY>

    </HTML>


  • BGCOLOR="BLACK" - цвет фона - черный.

  • TEXT="WHITE" - цвет текста - белый.

  • LINK="LIME" - цвет непосещенной ссылки - салатовый.

  • VLINK="LIME" - цвет посещенной ссылки - салатовый.

  • ALINK="LIME" - цвет локальной ссылки - салатовый.

    Итак, теперь мы, наконец, попробуем создать текст. К примеру, нам нужно сделать ссылку на страничку с информацией о создателе сайта.

    файл: index.html

    <HTML>

      <HEAD>

        <TITLE>Design LAB</TITLE>

        <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">

      </HEAD>

      <BODY BGCOLOR="BLACK" TEXT="WHITE" LINK="LIME" ALINK="LIME" VLINK="LIME">

        На этой страничке есть информация <a href="about.html">про меня</a>

      </BODY>

    </HTML>


    Открыв эту страничку на браузере в таком виде, мы получим примерно следующее.

    preview: index.html

    На этой страничке есть информация про меня


    При наведении курсора мыши на надпись про меня он (курсор) примет форму руки. И далее, кликнув по надписи, мы попадем на страничку about.html., где расположена информация об авторе.

    Итак, на этом уроке мы с Вами изучили тэги <HTML> и </HTML>, <HEAD> и </HEAD>, <TITLE> и </TITLE>, <BODY> и </BODY>, а также затронули тему ссылок. На следующем уроке мы продолжим разговор о ссылках.

  •  
     
       
    Сообщение оставлено 17.10.2010 в 08:48:26 | Сообщение #2
    спасибо!
     
     
       
    Сообщение оставлено 06.12.2010 в 17:55:41 | Сообщение #3
    классный урок.. запомню
     

    У гениальности есть побочные эффекты
     
       
    Сообщение оставлено 18.01.2011 в 19:00:04 | Сообщение #4
    спасибо кул урок)
     
     
       
    Сообщение оставлено 19.01.2011 в 15:16:25 | Сообщение #5
    норм
     
     
       
    Сообщение оставлено 21.01.2011 в 20:31:28 | Сообщение #6
    Большое спасибо!
     
     
       
    Сообщение оставлено 22.02.2011 в 00:23:08 | Сообщение #7
    Спасибо автору!
     
     
       
    Сообщение оставлено 04.03.2011 в 22:48:39 | Сообщение #8
    спс
     
    В каждом из нас спит гений, но с каждым днем все крепче и крепче.
     
       
    • Страница 1 из 1
    • 1
    Поиск:
     
    Графика от: Megas, GraFOS | Дизайн сверстал E.A.
    Хостинг от uCoz
    Яндекс.Метрика