разработка сайта на языке html

Разработка сайта с использованием языка html

31.03.2016

Веб – сайт – это несколько страниц, которые объединены общей темой и помещаются в сети Интернет на определенном месте (хостинг) под определенным именем (домен). Для размещения сайтов крупных компаний частенько используют сервера, а небольшие сайты помещаются на виртуальных серверах для удобства пользования. Чтобы разместить сайт в сети, необходимо для начала разработать его – чаще всего с использованием языка html.

HTML – это язык с весьма простыми наборами команд, которые способны описать документ, его структурное содержание и оформление страницы. Благодаря этому языку можно выделять на странице несколько основных частей – заголовок, абзац, таблица, список и прочее. Форматирование и его вид определяется браузером в процессе чтения документа, поэтому только от браузера зависит отображение сайта на экране монитора.

Разработка сайта может осуществляться и при помощи специализированных редакторов, которые автоматически генерируют код html. При работе с таким редактором не предусматривается необходимость знания языка. Но, главный минус таких программ, это ограниченность возможностей, наличие ошибок и часто неправильное использование html – кода, не отображающееся в некоторых браузерах. Поэтому для серьезного освоения веб – программирования, Вы не сможете обойтись без изучения языка html.

ОБЩИЙ ВИД И ТЭГИ

Текстовый документ, куда вписывается html – код, всегда имеет соответствующее расширение. Такой документ содержит не только определенный текст, но и разметку документа в виде элементов языка, которые заключаются в скобки углового типа. Эти элементы носят название тэгов. Они бывают одиночного типа, открывающего и закрывающего типа – и порядок элементов в них следующий:

  • Левая угловая скобка
  • Символ необязательного типа – слэш, показывающий нам, что данный тэг является закрывающим, т.е. означает место, где заканчивается определенный элемент – например, абзац
  • Имя тэга
  • Атрибут необязательного типа – от одного до нескольких
  • Правая угловая скобка

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

Спаренный тэг и информация, что располагается между открывающим и закрывающим тэгом, является элементом html и носит название «блок». Те тэги, которые одиночные, не имеют закрывающегося тэга и так же являются элементом языка.

В структуре документа имеется перечень элементов обязательного типа:

  • В начале и конце документа располагается спаренный тэг <html>и </html>
  • Заголовок ограничивается спаренным тэгом <head>и </head>
  • тело документа ограничивается спаренным тэгом <body></body>

Заголовок так же включается в себя спаренный тэг <title></title>, который определяет название файла, описывая лаконично содержимое 5 -6 словами. Именно эти слова отображаются браузером в заголовке рабочих окон программы, а при индексировании поисковиков происходит по нему идентификация документа.

Разработка веб – сайта осуществляется при наличии любого браузера, но для контроля, необходимо иметь одновременно хотя бы пару браузеров, потому что часть элементов языка html может отображаться по-разному. Так же, Вашим главным инструментом станет текстовый редактор – самый простой вариант, это использовать обычный Блокнот, с помощью которого подготавливаются html – файлы.

НАЧАЛО РАБОТЫ

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

Начало работы с любым документом – использование стандартного перечня тэгов, которые определяют структуру Вашей страницы. Кстати, html – код допускает использование как верхнего, так и нижнего регистра символов.

ЦВЕТОВОЕ РАЗНООБРАЗИЕ

Каждая веб – страница обладает фоном и текстом собственного цвета, определяемым Вами самостоятельно. Задать цвет можно при помощи атрибутов bgcolor и text, помещающихся при открывающем тэге <body>.

Определить цвет, как значение атрибута, можно двумя способами:

  • словесно указать имя цвета на английском языке. Для языка html можно использовать 16 наименований цвета.
  • обозначить цвет цифрами с использованием 16-тиричной записи, определяющей формирование цвета при сочетании основных цветов – красный, зеленый и синий.

Естественно, что указать цвет словами более удобный и понятный вариант. Но при численном указании у Вас будет возможность выбрать именно тот оттенок, который Вам нравится, а не стандартные 16 цветов.

Не забывайте регулярно сохранять свой документ. А при внесении изменений – сохраняйте и сразу проверяйте отображение в браузере. Помните про формат и про необходимость проверки отображения в разных браузерах. Такая проверка необходима для правильного отображения информации, именно так, как Вы себе это представляете. Так же при регулярной проверке вносимых изменений, Вы имеете возможность корректировать код с использованием языка html, не допуская ошибок и не затрачивая много времени на исправления.

ГРАФИЧЕСКОЕ СОПРОВОЖДЕНИЕ

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

Важно помнить, что все картинки, которые Вы хотите вставить в свой документ, необходимо сохранить в том формате, который поддерживает браузер. Стандартными форматами для картинок в любом браузере являются GIFJPG и PNG. Файлы с таким расширением имеют минимальный размер (если сравнивать с другими используемыми форматами), что положительно сказывается на времени загрузки Вашей страницы.

Для размещения на сайте любой картинки, ее необходимо сначала переместить в папку, где хранятся все файлы и документы, связанные с ресурсом. Чтобы вставить изображение в документ, необходимо использовать тэг одиночного типа <img> и добавить к нему атрибут src. Значение этого атрибута будет соответствовать названию вставляемой картинки, либо интернет – адресу, по которому расположена данная картинка. Так же существует необязательный атрибут <border>, который включает рамку вокруг картинки в документе. При установлении значения 1, атрибут включит рамку, толщина которой будет 1 пиксел.

ДИАЛОГ С ПОСЕТИТЕЛЕМ

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

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

  • поля, чтобы вводить данные
  • поля со списками
  • списки открывающегося типа
  • несколько флажков с переключателями, позволяющие выбирать значения (используется для опросов) и прочее

После того, как заполняется форма, обработка полученной информации и передача ее осуществляется специализированной программой – обработчиком или скриптом (другое название программы).

За форму отвечает спаренный тэг <form> и </form>. Один html документ может содержаться до нескольких форм, но важно помнить, что размещение одной формы внутри другой не допускается. Однако внутри формы можно разместить текст и несколько других тэгов. Для открывающего тэга имеется атрибут обязательного типа action. В его задачу входит определение местонахождения программы – обработчика либо серверного адреса, отвечающего за обработку формы. С учетом того, что сообщение, которое напишет посетитель ресурса, отправляется через электронную почту, то в этом атрибуте обязательно указывается адрес электронной почты, куда должна приходить информация с формы.

ИСПОЛЬЗОВАНИЕ ГИПЕРТЕКСТА

Дословный перевод слова html – это «язык разметки гипертекста». Поэтому важно понимать, что это такое и как отличается.

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

Для языка html переход осуществляется при помощи размещения в документе спаренного тэга <а> и </а>, который дополнен атрибутом обязательного типа href, определяющего адрес для перехода. Этим адресом может стать, как другой файл (он обязательно должен располагаться в папке со всеми файлами), так и адрес в Сети.

ФРЕЙМЫ И ИХ НАЗНАЧЕНИЕ

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

Вы можете изменять размер фрейма при использовании мыши непосредственно на экране. У каждого фрейма указывается собственный адрес, позволяющий отображать этот элемент вне зависимости от остальных, и собственное имя, дающее возможность переключаться на него из соседних фреймов. Благодаря такому перечню свойств этих элементов html языка, в одном фрейме можно поместить то количество информации, которое, по мнению владельца,  должно постоянно быть на глазах у пользователя. К такой информации относят логотипы компаний, управляющие кнопки, список меню и другое. На основе фреймов так же создают окна для запросов. При таком использовании, один фрейм содержит сам запрос, а другой располагает результатами.

Чтобы описать фреймы в языке html применяется отдельный файл. В нем спаренные тэги <body> и </body> заменяются спаренными тэгами <frameset> и </frameset>, дополненные атрибутами обязательного типа (rows либо cols). Эти атрибуты определяют тип деления экрана – горизонтально или вертикально. Как значения для них используют высоту и ширину фреймов в числовом виде – либо, как пикселы, либо как проценты.

ВМЕСТО ЗАКЛЮЧЕНИЯ

Как можно заметить, разработка сайта на основе языка html не является чем-то очень трудным. Изучение данного языка – обязательное условие для тех, кто хочет самостоятельно заниматься созданием сайтов (для себя или на продажу). Язык html является основой или базой, на которую будут накладываться другие теоретические и практические знания. Важно только постоянно совершенствоваться, потому что развитие языка не стоит на месте, а настоящие специалисты всегда следят за этим.