×

Создать сайт или лендинг бесплатно

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

ВСЕ ОЧЕНЬ ПРОСТО

1 Войдите или зарегистрируйтесь.
2 На соответствующих страницах появятся ссылки для перехода к инструментам.
3 Ознакомьтесь с инструкцией и приступайте.

Если у вас возникнут проблемы пишите на [email protected] . Благодарим что вы с нами!

О сайте

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

FORGOT YOUR DETAILS?

CREATE ACCOUNT

0/50 ratings

Основы разработки веб-страниц

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

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

Рассмотрим основы НTМL. Узнаем, как использовать редактор визуального создания веб-страниц сайта. Коснемся больших возможностей технологии CSS и спланируем навигационную систему сайта, создадим на нем поис­к.

Рубрика Создать сайт инструкции для чайников


Сайт создать самому » Создать сайт инструкции для чайников » Основы разработки веб-страниц

Like our page

5894

Follow Us

25374

Circle Us

3841

Основы разработки веб-страниц. Эта статья призвана освежить в памяти читателей основные моменты, относящиеся к разработке веб-страниц. Это нужно сделать до того, как погружаться в изучение до­полнительных возможностей, модулей и программ. Мы затронем вопросы создания веб-страниц на НТМL, добавления текста и графики. Как форматировать текст, задавать цвет веб­ страницы. Создавать текстовые и графические ссылки для перехода между страницами.

Основные понятия HTML

В основном веб-страницы создаются с помощью языка гипертекстовой разметки (НТМL- HyperText Markup Language). НТМL- это простой язык программирования, ос­новная задача которого заключается в форматировании страницы при отображении в веб ­браузере, например в Microsoft Intemet Explorer. В данной главе представлен минимум ин­формации, который необходимо знать для создания веб-страниц и их объединения в рабо­тающий сайт. Это основа разработки веб-страниц.

Спецификацию по HTML 4.01 можно найти по адресу http://www. weblx. ru/doc/html401.

HTML состоит из элементов. Например, абзац текста или изображение - это элементы. Элементы, в свою очередь, состоят из тегов, атрибутов и содержимого (последнее не всегда обязательно). Ниже приведена более подробная информация по каждому виду элементов.

✓ Теги. Это простые дескрипторы, которые указывают веб-браузеру на расположение элементов на странице и их форматирование.

  • Открывающий тег. Начало каждого элемента в HTML обозначается открываю­щим тегом: имя элемента указывается в угловых скобках. Например, открываю­щий тег абзаца - это <Р>, а открывающий тег изображения - <IMG>.
  • Закрывающий тег. Конец элемента в HTML обозначается закрывающим тегом. Он точно такой же, как открывающий, только перед именем элемента ставится обратная косая черта. Следовательно, </Р> - закрывающий тег абзаца. У неко­торых элементов, например у IMG, закрывающих тегов нет.

✓ Атрибуты. С помощью атрибутов определяют параметры элементов. Добавляя со­ответствующие атрибуты к тегу, задают высоту и ширину изображений, как, напри­мер, в следующем фрагменте программного кода:
<IMG width="l00" height="30">
✓ Содержимое. Содержимое располагается между закрывающим и открывающим те­гами. как. например. в следующем фрагменте программного кода:
<Р>Здесь расположено содержимое этого абзаца.</Р>

Далее о наиболее часто используемых тегах и атрибутах. Изложенные выше принципы HTML помогут разобраться в вариантах выбора, которые предлагаются раз­личными программными средствами разработки веб-страниц.

Структура веб страниц

Существует две разновидности структур веб-страниц: стандартная и фреймовая. Стан­дартная веб-страница представляет собой отдельную структуру.
В отличие от стандартной, фреймовая структура подразумевает одновременное раз­мещение на экране более одной веб-страницы. Но для пользователя такой веб-сайт вос­принимается целостной структурой и совершенно не отличается от сайта стандартной структуры.

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

Основы разработки веб-страниц. Типовые элементы

Как уже отмечалось в разделе "Основные понятия НТМL", веб-страницы состоят из эле­ментов. Базовая структура типовой веб-страницы содержит три элемента: HTML, HEAD и BODY. В состав элемента-контейнера HTML входят элементы HEAD и BODY.
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</НТМL>

На самом деле технически возможно реализовать веб-страницу без исполь­зования тегов HTML, HEAD и BODY, стандарт HTML позволяет это сделать. Однако удачным решением это не назовешь. Исключив эти теги, разработчик ничего не добьется, а их использование позволяет упорядочить другие элементы страницы.

Все видимые на странице элементы расположены внутри тега BODY. Элемент HEAD содержит информацию типа заголовка страницы, который записывается между тегами <TITLE> и </TITLE>, как, например, в следующем фрагменте программного кода.
<HEAD>
<ТIТLЕ>Это заголовок страницы.</ТIТLЕ>
</HEAD>
Это название веб-страницы будет отображаться вверху, в заголовке окна браузера пользователя.

Фреймовые структуры

В отличие от стандартных сайтов с типовыми элементами сайты, содержащие фреймовую структуру, работают немного иначе. С помощью элемента FRAМESET экран разбивается на несколько областей. Каждая область называется фреймши и содержит свою веб-страницу. НТМL-код, приведенный ниже, определяет страницу с двумя фреймами.
<HTML>
<FRAМESET cols="80,*">
<FRAМE nаmе="левыйФрейм" srс="навигация.html">
<FRAМE nаmе="основнойФрейм" src="ocнoвнoй.html">
</FRAМESET>
</HTML>

Значение "80, *" атрибуга cols в предыдущем листинге означает, что ширина первого фрейма составляет 80 пикселей. Второй фрейм занимает все оставшееся место на странице. При желании можно задать какое-то числовое значение и для второго фрейма.

Еще один вариант - можно установить процентное соотношение для каждого фрейма (как в следующем фрагменте программного кода) вместо того, чтобы указывать количество пикселей.
<FRAМESET cols="20%,*">
Чтобы задать горизонтальные, а не вертикальные фреймы, в теге <FRAМESET> вместо ат­рибута cols используется атрибут rows. Все остальное работает аналогично.

Работа с текстом

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

Абзацы

Абзацы - это элементы, используемые на неб-странице для размещения текста Текст располагают между тегами <Р> и </Р>, как в следующем фрагменте программного кода.
<Р>Здесь расположено текстовое содержимое.</Р>
Наличие закрывающего тега </Р> в программном коде совершенно не обязательно. Про­сто большинство программ для создания веб-страниц добавляют его в код автоматически.
Интервал между абзацами создается веб-браузером тоже автоматически. Для принуди­тельного перевода строки используется элемент BR, как в следующем фрагменте программ­ного кода.
<Р>Это первый абэац.</Р>
<BR>
<Р>Обратите внимание на отступ перед вторым абэацем.</Р>

Чтобы сделать интервал между абзацами, используется пустое значение (без какого-либо содержимого между открывающим и закрывающим тегами) элемента Р. К сожалению, такой прием работает не для всех веб-браузеров. Стандарт по НТМL не регламентирует применение пустых значений элемента Р. Поэтому те браузеры, ко1орые строго придерживаются стандар­та, просто игнорируют такой оператор, и пустая строка не добавляется.

Для стандартного решения проблемы в Р-элемент помещают невидимое содержимое. Так как браузеры проигнорируют и обычный пробел, нужно ввести специальный код &nbsp; (так называемый неразрывный пробел) между открывающим и закрывающим тегами <Р>, как в следующем фрагменте программного кода.
<Р>Содержимое первого абзаца.</Р>
<P>&nbsp;</P>
<Р>Перед этим абзацем будет добавлена пустая строка .</Р>

При использовании неразрывного пробела не забудьте поставить символ точки с запятой ( ; ). Если этого не сделать, вместо пустой строки на экране просто будут отображаться символы &nЬsp.

Заголовки

Заголовки также являются текстовыми элементами. Текст, отформатированный с помо­щью разных заголовков, отличается размером шрифта. В НТМL используется полдюжины различных заголовков, начиная от большого Hl и заканчивая крошечным Нб.

Все остальные значения Н2, НЗ, Н4 и Н5 - промежуточные. Размер шрифта уменьшается по мере возраста­ния номера заголовка. Заголовки применяются для визуального отделения одного раздела от другого. Мень­шие заголовки соответствуют подразделам больших заголовков.

Допустим, разрабатывает­ся веб-сайт с новостями. В качестве основного заголовка используется Hl, за которым сле­дует текст между элементами Р. Для форматирования подзаголовков статей будет использоваться Н2, а для подзаголовков внутри разделов - НЗ и т.д., как в следующем фрагменте программного кода.
<Нl>Это заголовок первого уровня</Нl>
<Р>Далее можно разместить несколько абзацев текста.

В данном случае это один абзац.</Р>
<Н2>В этом примере для форматирования подзаголовка используется элемент Н2</Н2>
<Р>А эдесь можно разместить текст подраздела. Сделайте несколько абзацев с помощью элемента Р.</Р>

Шрифты как основы разработки веб-страниц

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

В и I - два наиболее часто используемых злемента форматирования шрифтов. Они по­зволяют задать жирное и курсивное начертание соответственно, как показано в следующем фрагменте программного кода.
<Р>Это обычное начертание.<В>Это - пример жирного начертания.</В>
<I>Пример курсивного начертания.</I></Р>

Атрибуг face тега <FONT> позволяет установить гарнитуру шрифта, например Aria\, Times New Roman или какую-либо другую. А с помощью атрибутов size и color можно задать соответственно размер и цвет шрифта.

Более подробно об определении цвета расска­зывается в разделе "Работа с цвеrом". Следующий фрагмент кода показывает, как с помошью тега <FONT> установить гарнитуру, размер и цвет шрифта.
<P><FONT face="Arial, Helvetica, sans-serif" size="5" соlоr="bluе">Этот текст набран шрифтом Helvetica синего цвета и размером 5 пунктов.</FОNТ>

<FONT face="Times New Roman, Times, serif" size="З" color="red"> Этот текст набран шрифтом Times New Roman красного цвета и размером З пункта.</FОNТ>

<FONT face="Courier New, Courier, mono" size="7" color="black"> Этот текст набран шрифтом Courier черного цвета и размером 7 пунктов.</FОNТ></Р>

В данном примере элемент <FONT> применялся к целому предложению, хотя его можно использовать и для более коротких структур - даже для одного символа.

Причина, по которой атрибуту face присвоено несколько значений. очень проста. Все дело в том, что в Интернете работают пользователи разных операционных систем (Windows, Маc, Unix и других).

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

Основы разработки веб-страниц - Линии

Конечно, горизонтальные линии к тексту не имеют никакого отношения, но именно в этой части книги рассказ о них мне кажется наиболее уместным. В HTML эти линии называ­ются горизонтальными разделительными линиями (horizontal rules). А элемент, который их представляет, - HR.

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

Следующий фрагмент кода определяет 50-процентную длину разделителя.

<HR width="50%">

Чтобы задать длину горизонтальной линии в 400 пикселей, нужно ввести следующий код.

<HR width="400">

Для установки толщины линии используется атрибут size, как в следующем фрагменте программного кода.
<HR size="б">
По умолчанию линия не заполнена цветом. Линия без заливки называется линией с тенью, потому что раньше, когда веб-страницы были не такими красочными, как сейчас, текст чер­ного цвета размещался на нейтральном сером фоне. А "пустые" горизонтальные линии созда­вали трехмерный эффект', или тень.

Эффект тени виден не отчетливо, в отличие от цвета фо­на. Чтобы сделать линию сплошной, нужно добавить атрибут noshade для тега <HR>, как в следующем фрагменте программного кода.
<HR noshade>
<HR>
<HR width="l00%">
<HR width="50%">
<HR width="200">

<HR width="400">
<HR size="l0">
<HR size="6" noshade>

Работа с цветом

Организация цветовой гаммы как основы разработки веб-страниц. Сегодня уже достаточно сложно найти черно-белые изображения, разве что старые теле­передачи и фильмы или профессиональные фотографии, претендующие на художественную ценность. Мир состоит из ярких красок, и посетитель сайта будет разочарован, не увидев их.

Тема цветового оформления шрифтов затрагивалась вкратце в предыдущем разделе, од­нако различные оттенки цвета могут использоваться не только для шрифтов. Несомненно, постепенно можно научиться задавать цвет для любого НТМL-элемента.

В разделе "Шрифты" рассказывалось о том, как определить цвет некоторого набора символов. Однако задать цвет можно и для всего текста, и для фона страницы, и для ссылок. Для ссылок устанавливают три разных цвета: один - для непросмотренной ссылки, другой - для активной ссылки и третий - для уже просмотренной. Все эти цветовые настройки можно выполнить с помощью элемента BODY, задав необхо­димые значения атрибутов:

✓ text - цвет текста:
✓ bgcolor - цвет фона документа;
✓ link- цвет непросмотренной ссылки;
✓ alink- цвет активной ссылки (ссылки, на которой щелкает пользователь в дан­ный момент);
✓ vlink- цвет уже просмотренной ссылки.

Задание всех перечисленных атрибутов одновременно выглядит примерно так.

<BODY text="black" bgcolor="white" link="blue" vlink="red" alink="purple">

Создание ссылок

В Интернете ссылки играют очень важную роль,они тоже основы разработки веб-страниц. Так как они связывают разные веб­ страницы. Без них существование Интернета немыслимо. Ссылки создаются с помощью эле­мента А (от англ. "anchor" - указатель).

Атрибут href (от англ. "hypertext reference" - ги­пертекстовая ссылка) данного элемэнта определяет веб-адрес файла, на который разработчик создает ссылку. Этот адрес называется URL (сокращение от англ. "uniform resource Iocator") - универсальный указатель ресурса. Так выглядит ссылка в HTML.
<a href="http: //www.dialektika.com/">coдepжимoe</"a>
При щелчке мышью по содержимому (это может быть и надпись, и графика) браузер за­гружает документ, адрес которого присвоен атрибуту href. Если ссылка текстовая, по умол­чанию она отображается шрифтом синего цвета с подчеркиванием. А если графическая - во­круг изображения создается голубая рамка.

Работа с изображениями

Рассмотрим такие основы разработки веб-страниц, как изображения. Если на веб-странице будет только текст, большинство пользователей сочтут этот сайт скучным. Довольно редко встречаются сайты без изображений. При размещении изображе­ний в Интернете обычно используются три формата файлов: GIF, JPEG (также называемый JPG) и PNG.

Где брать изображения? Их можно создавать с "чистого листа", а можно загрузить уже готовые файлы на одном из сайтов. При использовании чу­жих изображений, а так делает большинство дизайнеров, необходимо сначала ознакомиться с особыми условиями договора, предложенного на сайте.

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

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

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

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

Ни в коем случае нельзя просто взять и присвоить изображение. Это может быть чревато нежелательными последствиями. Конечно, можно загрузить любое изображение, которое отобра­жается в веб-браузере, однако кража rрафики может плохо обернуться для разработчика, например даже уголовной ответственностью.

Но в Интернете доступно много ресурсов бесплатной rрафики. Поэтому можете смело ее использовать.

Изображения

Наиболее распространенные элементы на веб-страницах, кроме теста, - uзобра:ж:енuя. Для их вставки на страницу используется тег <IMG>. Его обязательный атрибут- src. Он указывает имя графического файла, а при необходимости и путь к нему (если этот файл рас­положен не в той же папке, что и НТМL-файл).
<IMG srс="сидящие1б.jрg">

Если графика расположена в другой папке, нужно указать путь к файлу, как показано в следующем фрагменте программного кода.
<IMG src="cкyкa1б.jpg">
Если графический файл вообще размещен на другом веб-сервере, надо указать полный URL-aдpec, как в следуюшем фрагменте программного кода.
<IMG src="http://www.имя_сервера. соm/скука1б. jpg" >
В разделе "Создание ссылок" упоминалось о том, что графику можно использовать в ка­честве ссылок точно так же, как и текст. Для этого необходимо разместить тег <IMG> между открывающим и закрывающим тегами <А>. Как в следующем фрагменте программного кода.

<А href="http://www.dialektika.com/"><IMG src="cкyкalб.jpg"></A>

У тега <IMG> нет закрывающего тега. Нужно помнить об этой основе разработки веб-страниц.

Фоновые рисунки

В отличие от обычной графики фоновые рисунки создаются с помощью атрибуrа back­ground тега <BODY>, а не тега <IMG>, как в приведенном фрагменте программного кода.
<BODY background="гитapa2.jpg">
Таким образом, происходит мозаичное заполнение фона, т.е. изображение повторяется до тех пор, пока не достигнет конца экрана, как в горизонтальном. так и в вертикальном направ­лении. Благодаря таким свойствам большинство разработчиков предпочитают небольшие фоновые изображения.

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

Карты-изображения

Вопросы создания графических ссылок обсуждались в предыдуших разделах, где расска­зывалось о работе с изображениями и ссылками. Однако существует еще одна разновидность графических ссылок - карты-изображения. При создании обычных графических ссылок одной ссылке соответствует одно изображение. А при использовании карт-изображений для одного изображения можно добавить множество ссылок.

Специальные программы для составления карт-изображений позволяют нарисовать на изображении контуры, а затем назначить для каждой полученной области какой-то URL­ aдpec. Когда пользователь щелкает мышью на какой-либо области изображения, в браузере отображается соответствующий ресурс.

Можно, например, в качестве карты-изображения использовать карту мира. Если щелкнуrь на Англии или Шотландии, осуществляется переход на страницу о Великобритании. Если щелкнуть на Африке, то в браузере отображается ин­формация по данному континенту, и т.д.

Для карты-изображения подойдет любое графическое изображение (совсем не обязатель­но, чтобы ·по была географическая карта). Лишь бы был понятным смысл ассоциаций разра­ботчика. Например, для медицинского сайта отлично nодойдет изображение тела человека.

Щелкая в области живота, пользователь попадает на страницу с информацией по удалению аппендицита, а щелкая в области рта - на страницу по стоматологии. Вот какое многообразие имеют основы разработки веб-страниц.

Ну, для самых основ разработки веб-страниц информации достаточно. В следующей статье рассмотрим работу с WУSIWУG-редакторами.

TOP SQL requests:96. Generation time:2,273 sec. Memory consumption:24.01 mb