Web-программирование – это частный случай программирования клиент-серверного приложения.
Существует масса различный способов программирования. Большинство экспертов в этой области говорят, что это зависит от многих критериев. Из всех языков программирования можно выделить наиболее удобные и популярные.
JavaScript. Это один из самых популярных и мощных языков программирования, используемых для разработки Web-сайтов. JavaScript является исключительно полезным, так как этот язык может помочь вам в создании коммуникации для сайта. JavaScript способен выполнять довольно много вещей, включая управление браузером, редактирование содержимого в документе.
SQL расшифровывается как «язык структурированных запросов». SQL является необходимой частью Web-разработки. Если Web-разработчик использует базы данных такие как Microsoft SQL Server, Oracle, MySQL, и т.д., то он должен знать об этом языке и уметь его использовать.
Perl – это интерпретируемый язык сценариев, компилируемый в двоичный исполняемый или платформа – совместимый байт – код. Perl является общепризнанным языком программирования в области Web-разработки. Язык представляет уникальные инструменты для разрешения различных неопределенных сбоев в системном программировании [3].
Целью работы является теоретический и практический анализ создания и оформления Web-сайта, изучение принципов построения сайтов, выучивание основных тегов.
HTML является наиболее популярным языком разметки документов. В исходном виде файл HTML содержит инструкции форматирования (теги), чередующиеся с текстом документа. Главной особенностью разметки HTML является возможность вставки ссылок на внешние документы или на внутренние разделы того же документа.
Язык программирования CSS. С английского переводится как каскадные таблицы стилей, – это язык, который используется как средство оформления Web-страниц, а именно для работы с шрифтами, цветами, полями, таблицам, картинками, расположением элементов.
Язык программирования PHP. Это язык программирования, используемый на стороне WEB-сервера для динамической генерации HTML-страниц.
Denwer. Это программная среда, предназначенная для разработки Web-приложений на базе популярного языка программирования PHP, Web-сервера Apache и базы данных MySQL на локальном сервере.
Этапы создания сайта. Шаблон – это своеобразный образец, «скелет» Web-страницы, содержащий общие для всех страниц элементы. Когда вы создаете новую страницу на основе шаблона, вам остается только вписать в нужные места уникальное содержимое этой самой страницы и сохранить ее. Впоследствии вы можете изменить шаблон.
Шаблоны сохраняются в файлах с расширением .dwt. Шаблоны – неотъемлемая часть вашего сайта, как и библиотека. В одном сайте могут применяться несколько шаблонов.
Создание главной страницы. Главная страница сайта – это его «лицо». Эта страница должна выглядеть привлекательно и нести в себе актуальную информацию.
Прежде всего рекомендуется скачать скачать Notepad++. Начало создания главной страницы заключается в создании шаблона. Сайты создаются с помощью тегов. Открывает и закрывает страницу теги < HTML> и < /HTML>, они ставятся в начале и конце страницы. Затем идут теги < HEAD> и < /HEAD>, это служебные теги, между ними пишутся команды для браузера. Например, теги < TITLE> и < /TITLE>, все, что написано межу этими тегами, будет отображаться при открытии страницы в самом верху браузера.
Между тегами < BODY> и < /BODY> помещается все содержимое страницы сайта, таблицы, тексты, картинки, в общем, все из чего состоит сайт.
Цвет страницы прописывается в теге <BODY> атрибутом bgcolor = "# CCCCFF ". В кавычках обозначается код цвета, может быть любым. Так же фоном страницы можно сделать картинку. Для этого в теге < BODY> вместо атрибута BGCOLOR, применим атрибут BACKGROUND=" images/имя картинки". Для форматирования главной страницы применяются таблицы. Таблицы оформляются тегами < TABLE> и < /TABLE>. Между ними теги < TR> и < /TR>, а между тегами TR теги < TD> и < /TD>. Между тегами < TD> и < /TD>, помещается текст, вставляются картинки и все что будет видно на странице сайта.
Теги < TR> и < /TR>, обозначают горизонтальную строку таблицы, а теги < TD> и < /TD> – вертикальную колонку или ячейку. Внутри тега <TABLE> прописываются атрибуты: BORDER, CELLPADDING, CELLSPACING. В нашем случае прописывался такой атрибут, как BORDER.
BORDER – указывает, будет ли рамка вокруг таблицы и ее размеры. Рамки можно задать любой цвет, делается это значением BORDERCOLOR="#CC6666″.
Таблице нужно указать размеры, ширину – WIDTH = "" и высоту – HEIGHT = "", а также цвет – BGCOLOR = "#". Для каждой ячейки, можно задавать свой размер и цвет.
Все эти значения прописываются внутри тега < TD>, так:
< TD width= 650 height=550 bgcolor = "#00FFCC">.
Также для удобного и обширного перемещения по сайту, создаются «подтемы» этого сайта, которые располагаются, как правило, на главной странице.
Здесь пишется текст ссылки </a>.
Чтобы задать ссылке нужный цвет, в теге <BODY> устанавливаем атрибут LINK="#FFFFFF" – цвет ссылки, атрибут VLINK = " #FFFFFF " – цвет посещенной ссылки, атрибут ALINK = " #63FFB7 ″ – цвет ссылки при наведении на нее курсора мыши. Если страница лежит в той же папке, то путь прописывается, так как в нашем коде, если же страница лежит в другой папке, например у нас папка называется «Сайт» и в ней лежит несколько страниц сайта – «форум. html», «галерея.html», «регистрация.html» и другие страницы «html», также в этой папке может находится еще одна папка, допустим, называется «курсовая», в ней тоже лежат страницы. Так мы создали только главную страницу нашего сайта, сейчас аналогичным способом мы создадим еще несколько страниц для каждой подкатегории.
Создание галереи. Фотогалерея – непременный атрибут любого сайта, рассказывающего о товарах и услугах. Стремление заказчика показать "товар лицом", продемонстрировать ассортимент и заставить посетителя обратить на него внимание неплохо реализуется в фотогалерее или фотообзоре.
Картинки вставляются с помощью тега < img > с атрибутом src. Код для вставки картинки пишется так: < img src = " images/имя картинки" > Если у папки с картинками будет другое имя, то вместо images пишем ее имя. Так же для картинок применяются размеры, width и height, в коде будет так: < img src = " images/имя картинки " width = 120 height = 130 >. сли не указывать размер картинки, то по умолчанию она будет вставлена на сайт своего реального размера.
Создание формы регистрации. При создании сайта каждый Web – программист или будущий владелец сайта ставит перед собой конкретные задачи, одна из которых – разработка формы для регистрации. Благодаря данной форме владельцам форумов, порталов, интернет – магазинов будет проще вести учет своих клиентов, а владельцы классических сайтов смогут повысить конверсию, предоставляя более широкие возможности своим зарегистрированным (а то и постоянным) клиентам. Для реализации регистрации на сайте потребуется поддержка PHP и MySQL на хостинге. Если хостинг поддерживает только HTML, то, увы, создать скрипт регистрации на PHP у вас не получится. Весь алгоритм авторизации на сайте можно поделить на несколько этапов:
Пользователь заходит на сайт, открывает форму авторизации. Если он уже зарегистрирован, то вводит пароль и логин в форме. Скрипт – обработчик проверяет полученные данные: если введенная пара логин/пароль верна, то пользователь авторизуется на сайте. Если данные не корректны, то пользователь вновь возвращается на страницу с формой авторизации. Если пользователь не зарегистрирован, то сайт предлагает ему заполнить специальную форму для создания аккаунта.
Собственно говоря, регистрация представляет собой процесс сохранения данных о пользователе в специальном «месте». В качестве места хранения логинов и паролей пользователей сайта могут быть использованы текстовые файлы с расширением .txt и .dat, XML – файл и база данных. Первые два способа уже изжили себя и считаются небезопасными методами хранения данных, так как любой человек может получить к ним доступ прямо из адресной строки браузера.
База данных на сегодня является лучшим хранилищем пользовательской информации. В БД хранятся не только пароли и логины, но и вся сопутствующая информация: электронные адреса, ФИО и контактные данные пользователя, его интересы, местоположение и т.д.
Регистрация состоит их двух частей: кода регистрации и её стиля. В коде мы прописываем все интересующие нас вопросы, для регистрации.
Открываем html файл и начинаем ввод кода. Тэг, отвечающий за создание формы – "form". Записываем тэг вместе с атрибутами "form action = “obrabotka.php” method = “post” name “forma1” ". Приступаем к созданию элементов формы. Практически все элементы делаются с помощью тэга <input>, и его атрибут “type”, который отвечает за тип данных, к примеру текста, пароля и прочего. Всегда задаем имя «name» любому из атрибутов. Прописываем:
<br> <input type = "text" name = "fio" size = 30> <br>.
<br> <input type = "text" name = "email" size = 30> <p>.
Переходим к созданию элемента формы, при котором можно делать несколько выборов. Делаются такие элементы с помощью type=«checkbox».
Прописываем код:
<br> <input type="checkbox" name="service[]" value="Комната"> Комната <br>
<input type="checkbox" name="service[]" value="Санузел"> Санузел <p>.
Далее делаем поле для примечаний или адреса пользователя. Тэг "textarea", атрибуты этого тэга “rows” и “cols”, которые отвечают за размеры этого поля:
<br>
<textarea name = "pojelanie" rows=4 cols=30> </textarea>
<p>
<input type = "submit" value = "Отправить">
<input type="reset" value="Очистить">
<br>
<input type="reset" value="Очистить"> <br>
<br>
В стиле мы указываем последовательность вопросов – ответов, указания внешнего вида страницы.
Подводя итог всему выше сказанному, хочется отметить, что HTML стал тем форматом передачи данных, который наиболее полно и качественно удовлетворяет запросы современного общества. Несомненным фактом является и то, что будущее именно за HTML.
Целью работы являлся теоретический и практический анализ создания и оформления Web – сайта, изучение принципов построения сайтов, выучивание основных тегов.
С помощью углубленного изучения данной темы и создания Web-сайта самостоятельно «вручную» данная цель была полностью выполнена.
