Преподаватель который помогает студентам и школьникам в учёбе.

Разработка сайта «Я помогаю детям» .

Содержание:

Введение.

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

Реализация данной цели требует содержательного и методического решения следующих задач:

изучить историю и теорию Web-дизайна

разработать концептуальную модель учебника

изучить Web-технологию и языки HTML и Java-Script и их возможности в Web-дизайне

выявить эффективность программно-аппаратных средств в Web-дизайне

составить методическое руководство по разработке и использованию

учебника.провести апробацию разработанной технологии в реальном творческом проекте.

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

1. Основной инструментарий.

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

D:\первые шаги\

У себя на компьютере я создала такую папку на диске D, и назвала ее Первые Шаги. Вы, естественно, можете создать вашу папку, где угодно, и назвать ее, как угодно. Теперь откроем блокнот – notepad (start – programs – accessories – notepad или пуск – программы – стандартные – блокнот) и скопируем туда следующий текст:

<html>
<head>
<title>Благотворительный фонд</title>
</head>
<body>
Здравствуйте,вас приветствует сервис для помощи,многодетным сесьям,малоимущим.
<br>
Добро пожаловать! :)
</body>
</html>
Сохраним этот документ, присвоив ему имя *.html

D:\первые шаги\index.html

Если вы сохраняете документ, через Файл -> Сохранить (File -> Save), то, естественно, что он сохраняется как *.txt. Надо сохранять ваш документ следующим образом:

- Файл -> Сохранить Как (File -> Save as)
- Дальше вводите имя своего документа, например: index.html (а не просто index; приписочка *.html должна быть обязательно).
- Если вы уже сохранили ваш документ, как *.html, то при внесении изменений в этот документ вы можете уже сохранять их через Файл -> Сохранить (File -> Save).

Вот и все. Надеюсь, теперь у всех все будет в порядке.

Теперь откроем броузер, допустим, Internet Explorer (не закрывайте блокнот, он нам еще пригодится), и откроем в броузере наш документ.

Файл - Открыть - кнопка Обзор - Наш документ (index.html)
File – Open – Browse – index.html

Если мы чего-то изменим в нашем *.html документе (в блокноте), то, чтобы посмотреть, как это выглядит в нашем броузере, надо не забывать нажимать в броузере кнопку ОБНОВИТЬ. Если изменений не видно, то это значит, что вы где-то что-то неправильно написали, или забыли сохранить документ.

Посмотрим теперь, что у нас получилось, и разберемся, как оно так получилось :)

2.Что такое тэги?

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

Пример тэга: <br> (перенос текста на другую строку). Попробуйте вставить еще несколько тэгов <br> в нашем документе перед «добро пожаловать!». Сохраните. Посмотрите в вашем броузере, что получилось.

Итак, все, что находится между < и > - это тэг. Текст, не находящийся между такими скобками < > - весь виден при просмотре в броузере.

Как мы видим на нашем примере: тэгов много, и они разные :). Обратите внимание на картинку, она тут не просто так, она показывает нам обязательные тэги. Обязательные теги, это такие теги, которые вы всегда должны прописывать для каждой своей страницы, даже не смотря на бури, ураганы и другие стихийные бедствия.

<html>

Этот тэг должен открывать документ. Если есть открывающий тэг, то должен быть и закрывающий:

</html>

Некоторые тэги, вроде <br>, не требуют закрывающего тэга.

Итак, вернемся, к нашему документу и рисунку.

3. Обязательные тэги

<head></head>-голова документа
<body> </body> - тело документа

Все тэги, расположенные между <head> </head>, это что-то вроде служебной информации Например <title>- заголовок. Зачем он? Откройте IE (Internet Explore) с нашим документом и устремите свой взгляд на заголовок окна... Увидели?:)

Все тэги, расположенные между <body> </body> - непосредственное содержание документа. Следующие несколько ступенек будут посвящены именно этим тэгам: мы узнаем, как менять цвет текста, фона, как делать текст крупнее-мельче, поговорим о картинках, таблицах и многом другом. Но прежде, все-таки закончим наш разговор о тэгах, в общем.

<тэг> </тэг> - не просто тэг, это контейнер - тэг, который может содержать внутри себя другие тэги (и текст).

Обратите внимание:

<тэг1><тэг2><тэг3> ... </тэг3></тэг2></тэг1>

Только такая очередность закрывающих тэгов верна: тэг, который мы открыли первым - закрываем последним, второй – предпоследним и т.д.

Т.е. следующая очередность нежелательна и не верна, она может привести к ошибкам на вашей страничке:

<тэг1><тэг2><тэг3> ... </тэг3></тэг1></тэг2>

Так что будьте внимательны, и пишите код своих страничек аккуратно и вдумчиво.

4. Цвет текста

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

Файл – Сохранить как (File – Save as)

Зачем все это? А затем, что все обозначения цвета в Html прописываются именно таким способом. Например, белый цвет – ffffff. Но вернемся к нашей страничке. Давайте окрасим слова Добро Пожаловать в красный.

<font color="#CC0000"> Добро пожаловать! :) </font>

Color – параметр (атрибут) для тэга font, он отвечает, в данном случае, за цвет заключенного в контейнер текста. Атрибут color, как и другие атрибуты, не принадлежит только одному тэгу, он может быть присвоен и некоторым другим тэгам.

Попробуйте вместо СС0000 подставить другие значения цветов для атрибута color. Обратите внимание, что значению цвета обязательно должен предшествовать значок «решетка» - #.

Тэг <font></font> - многофункционален. Им может задаваться не только цвет текста в конкретной части документа, но и размер шрифта, и вид шрифта (Arial), но об этом чуть позже.

Как же еще задавать цвета в документе? - вспомним об открывающем тэге <body>:

Это значит, что весь текст страницы будет синим, кроме текста, для которого мы специально прописали <font></font>. Если цвет текста в <body> не задавать, то по умолчанию он будет черным.

С цветами для текста мы разобрались, теперь подумаем о фоне.

5. Цвет фона

На этой ступеньке мы узнаем, как изменять цвет фона документа, и поговорим немного об этике.

Цвет фона устанавливается в уже знакомом нам тэге <body>:

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

Обратите внимание: мы одновременно можем прописать в тэге <body> и цвет текста в документе, и цвет фона (это на всякий случай, если вы еще не поняли – одному тэгу может быть присвоено несколько атрибутов :).

6. Выравнивание текста

В этой главе мы поговорим о параграфах. Параграфы вводятся тэгом:

<p></p>

С помощью параграфов мы можем центрировать текст:

<p align="center">текст</p>

С помощью параграфов мы можем выровнять текст по левому краю:

<p align="left">текст</p>

По правому краю документа:

<p align="right">текст</p>

По обоим краям документа:

<p align="justify">текст</p>

Теперь введем параграфы в наш документ и посмотрим наглядно, что получится (в наш пример я подставил параграф с атрибутом центрирования текста (align="center"), попробуйте подставить в параграф атрибут align с другими значениями: Left, Right, Justify).

Кстати, правильно говорить не выравнивание, а выключка: выключка по левому краю, правому, центру, по обоим краям. Если вы позже будете углубляться в область дизайна, то вам наверняка этот термин встретится. Между прочим, HTML не имеет к дизайну ни малейшего отношения.

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

<p></p>

Пустые элементы <p> без какого-либо содержания (других тэгов или текста) могут игнорироваться браузерами. Не забывайте это. Заметьте, что текст в документе, если не задавать параграфы, всегда выравнивается по умолчанию по левому краю. Также запомните, что после закрывающего тега </p> автоматически происходит перенос строки. Но что делать, если вам этот перенос никак не нужен? Есть тэг альтернативный <p align="center">:

<center> текст </center>

Конечно, тэг <center> хорош, но остался нам он еще с прошлых версий HTML (да, их было несколько, все в этом мире развивается, HTML не исключение). Пока что этот тэг никто не отменял, и его можно использовать, но это не слишком желательно.

Как же лучше поступить? Лучше использовать тэг <div></div>, одно из назначений которого выравнивание содержимого вашего документа. Все четыре значения атрибута align можно употреблять с <div>:

<div align="center"> текст </div>

<div align="left"> текст </div>

<div align="right"> текст </div>

<div align="justify"> текст </div>

Я тут набросал примерный текст вступления, вы придумаете, конечно, что-нибудь свое. Но прежде мы завершим наш разговор о <div> и <p>. Параграф не может содержать в себе другие параграфы, и также тэг <div></div>. Т.е. следующие конструкции будут не верны, и вводить их в документ нельзя даже под страхом смерти:

<p align="right">
<p>текст</p>
<p>текст</p>
<p>текст</p>
</p>

<p align="right">
<div>текст</div>
<p>текст</p>
<div>текст</div>
</p>

Однако <div> может содержать в себе параграфы: с помощью него мы можем сгруппировать их, допустим, по правому краю.

<div align="right">
<p>текст первого абзаца</p>
<p>текст второго абзаца</p>
<p>текст третьего абзаца</p>
</div>

Конечно, <p> и <div> не несут в себе исключительно функцию выравнивания элементов. Но поскольку я хотел в этой главе освоить с вами только выравнивание, то к другим возможностям использования <div> и <p> мы вернемся гораздо позже.

В этой главе мы научимся выделять текст при помощи заголовков и узнаем еще одну функцию тэга <font></font>.

Начнем с заголовков. Существуют шесть уровней заголовков:

<H1> текст </H1>

<H2> текст </H2>

<H3> текст </H3>

<H4> текст </H4>

<H5> текст </H5>

<H6> текст </H6>

Итак, h1 – самый важный, h6 – наименее важный. Вводя заголовки в текст, вы позволяете вашему посетителю более легко ориентироваться на странице. Заголовками вы определяете структуру внутри текста.

Давайте теперь введем заголовок в наш документ.

В пример я ввел заголовок третьего уровня <h3></h3> . Смотрите, что получилось. Как мы видим, визуально заголовки отображаются не только более крупным шрифтом, но к тому же и полужирным. Также после закрывающего </hx> происходит автоматически перенос на другую строку.

Заголовки предназначены для выделения небольшой части текста (строки, фразы). Но, если вы хотите выделить большой фрагмент текста, то заголовки для этого использовать нельзя. Для этого предназначен атрибут size тэга <font></font>, который устанавливает желаемый размер шрифта:

<font size="+4"> текст </font>

<font size="+3"> текст </font>

<font size="+2"> текст </font>

<font size="+1"> текст </font>

<font size="+0"> текст </font>

<font size="-1"> текст </font>

<font size="-2"> текст </font>

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

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

<font size="+1"> малообеспеченным семьям, детям с тяжелыми заболеваниями или находящихся на попечении у государства.</font>

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

Сначала рассмотрим курсив и полужирный текст:

<b>Полужирный текст</b>
<i> Наклонный текст (курсив) </i>

Как видите, все просто. Можете их сами понатыкать в тексте, где хочется, для пробы, а в примере я снова выделю, малообеспеченным семьям, детям с тяжелыми заболеваниями или находящихся на попечении у государства.

Теперь пара строк о моширинном шрифте. Что это такое за шрифт? Это шрифт с символами одинаковой фиксированной ширины, как шрифт у пишущей машинки. А тэг для него следующий:

<tt> моноширинный шрифт </tt>

В наш пример я его вводить не буду (сделайте это самостоятельно).

Также моноширинным шрифтом отображается текст заключенный в тэг <pre></pre>:

<pre>

текст (куча пробелов) текст

</pre>

У тэга <pre> есть одна замечательная особенность: текст, заключенный в него, выводится с точностью до пробела так, как вы его набили в блокноте. Этот тэг вам может быть полезен, допустим, для форматирования стихотворений.

К одному фрагменту текста может применяться сразу несколько тэгов:

<tt><b><i> текст </i></b></tt>

В нашем примере текст моноширинный, полужирный, и выделен курсивом (вот так-то:). Не бойтесь использовать различные комбинации тэгов, экспериментируйте, но с умом:)

Итак, у нас еще осталось несколько тэгов, которые мы должны освоить на этой ступеньке, прежде чем двинуться дальше.

Подчеркнутый текст вводится при помощи тэга <u>:

<u> Подчеркнутый текст </u>

Тэги <strike> и <s> представляют текст перечеркнутым шрифтом, можете использовать какой вам угодно из них, принципиальной разницы между ними нет:

<strike> Перечеркнутый </strike>
<s> Перечеркнутый </s>

Тэг <big> представляется крупным шрифтом, а <small> малым шрифтом относительно основного текста:

<small> Малый </small>
Нормальный текст
<big> Большой </big>

Тэги Sup и Sub - определяют верхний и нижний индексы. Sup - верхний, Sub - нижний. Где они могут пригодиться? Ну, например, при написании какой-нибудь формулы - H2O (все, что мы выносим со школьной скамьи:).

Верхний индекс <sup> sup </sup>
Нижний индекс <sub> sub </sub>

Вот, собственно, и все. Можем переходить на следующую ступеньку.

7. Стиль текста

Мы уже с вами ознакомились с атрибутами size и color для тэга <font>. В этой главе, мы завершим наше знакомство с тэгом <font>, изучив атрибут face. С помощью face мы можем задать тип шрифта.

Попробуйте ввести следующую конструкцию в наш документ для части текста, чтобы задать шрифт Arial:

<font face="arial"> текст (шрифт Arial)</font>

Какие же типы шрифтов являются стандартными, и по идее должны находиться на компьютере каждого пользователя - это:

Times;

Times New Roman;

Arial;

Helvetica;

Courier;

Verdana;

Tahoma;

Cosmic Sans;

Garamond

Вы можете безбоязненно использовать любой из них.

В атрибуте face можно указать сразу несколько типов шрифтов:

<font face="arial, verdana, courier"> текст (шрифт Arial) </font>

В этом случае если у посетителя не окажется на компьютере шрифта Arial, то текст будет отображен шрифтом Verdana. Если и Verdana нет на компьютере вашего посетителя, то текст будет отображен шрифтом Courier. Т.е. в атрибуте face мы можем задать список разделенных запятыми названий шрифтов, которые броузер вашего посетителя должен попытаться найти у него на компьютере и отобразить в порядке приоритета.

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

Вывод: пользуйтесь стандартным набором шрифтов, их более чем достаточно. Тем более, что красота вашей страницы зависит не от типа шрифта, а от качества оформления (дизайна).

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

8. Что такое путь? Как вставлять картинки

Теперь я поведаю вам, как вставлять картинки в документ:

Если картинка лежит на уровень выше, а документ находится в поддиректории, то ссылка на неё будет такой:

Если картинка лежит на другом сайте, то путь прописывается полностью:

Для вашего удобства кладите картинку в ту же папку, что и документ, тогда путаницы будет меньше:) Также я хочу обратить ваше внимание на то, что MY.jpg, my.JPG, my.jpg и MY.JPG – это разные имена файлов. Никогда не забывайте, что регистр нужно учитывать.

(кстати, запомните, тэг img не требует закрывающего тэга).

<html>

<head>

<title>Благотворительный фонд </title>

</head>

<H3>Здравствуйте,вас приветствует сервис для помощи,многодетным сесьям,малоимущим.<H3>

<br>

<font color="#CC0000"> Добро пожаловать! :) </font> :) </div>

<img src="/C:\Users\anton\Desktop\Гузь.Е.В/primtocodephoto.gif">Помощь слабозащищенным слоям населения,<font size="+1"> <b> малообеспеченным семьям, детям с тяжелыми заболеваниями или находящихся на попечении у государства.</b></font>

</p>

</body>

</html>

Наша страничка может состоять из нескольких документов. Один из них главный (index.html) - он открывается первым и должен обязательно лежать на вашем сайте в интернете. Остальные документы вы можете называть как угодно (photos.html, about_me.html, my_pets.html, friends.html, gh516hgd.html). Они все могут лежать в одной директории (папке), а могут в разных.

9. Ссылки

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

Ссылкой на эти другие документы (части нашей странички) может быть текст (фраза, слово), а может быть и картинка. На этой ступеньке мы рассмотрим только текстовую ссылку.

Для начала создадим новый документ (в нашем примере prf.html) в той же директории (папке), где находится наш главный документ index.html. Содержание документа выдумайте сами, у вас для этого уже достаточно знаний.

Пусть prf.html - документ с вашими фотографиями. Тогда мы можем без зазрения совести фразу "посмотреть мои фотографии" сделать ссылкой на prf.html:

<a href="/prf.html">посмотреть наши фотографии</a>

Тэг <a></a> делает ссылкой заключенную в него картинку или фразу (текст). Принципы прописывания пути мы уже знаем:

(1) - <a href="/prf.html">наши фотографии</a>
(2) - <a href="/photos/prf.html"> наши фотографии</a>
(3) - <a href="http://www.homepage.ru/prf.html"> наши фотографии</a>

В случае (1) документ лежит в той же директории (папке), что и документ, в котором мы ссылаемся на prf.html, в случае (2) документ лежит в поддиректории /photos, в случае (3) мы ссылаемся на сайт http://cms-themes.ru/, где лежит нужный нам документ.

Первые два примера (1) и (2) – называют относительными путями. (3) – абсолютный, т.е. указанный полностью, включая имя сайта (в нашем случае - http://www.cms-themes.ru/). Абсолютный путь мы используем, когда ссылаемся на чужие странички, относительный мы используем, когда ссылаемся на документы внутри нашего сайта.

Для всех ссылок в нашем документе мы можем прописать цвета: link - цвет просто ссылки, alink - цвет активной ссылки (нажатой), vlink - цвет уже посещенной ссылки.

Как и цвет для всего текста в документе, цвета ссылок мы прописываем в <body>. В нашем примере цвета для просто ссылки, активной и посещенной - одинаковые, но они могут быть разными – это на ваше усмотрение.

Заключение.

В данной курсовой работе рассмотрены актуальные вопросы разработки и

создания современного Web-сайта. При этом мною были решены следующие

частные задачи:

ознакомление с современными Интернет-технологиями и использовать

их в своей разработке;

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

и создания Web-сайтов;

ознакомление с методами и способами представления на Web-

страницах различных видов информации (текстов и изображений);

ознакомление с основными правилами и рекомендациями по разработке

и созданию Web-сайтов;

определение структуры Web-страниц;

предоставление пошаговой стратегии разработки Web-сайта.

В результате проведенных работ на базе выбранных технологий был создан

современный Web-сайт.