Создание сайта "Царства природы"

Размещено на http://www.allbest.ru/

Государственное бюджетное профессиональное образовательное учреждение «Техникум «Приморский»

Курсовая работа

На тему: Создание сайта "Царства природы"

Выполнил(а): Студент(ка) группы № 34

Бахшиев Иса Азад оглы

Проверил: Подольский Владимир Александрович



ВВЕДЕНИЕ

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

Тему «царств» надо развивать, т.к. она довольно таки спорна, ведь даже сейчас в 21 веке высоких технологий ученые не могут определится с тем сколько же именно царств в природе. Однако если эту тему будут развивать, то новые открытия не заставят себя долго ждать, а новые виды, могу стать источником новых лекарств или материалов, что так же поспособствует улучшению благосостояния и развития человечества. Эта тема будет актуальна всегда потому, что наш мир был, есть и будет. Каждый должен знать, что его окружает, почему он должен беречь это и, что будет если этого не делать.

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



1. ОСНОВНЫЕ СВЕДЕНИЯ О ЯЗЫКЕ HTML

1.1 Создание web-сайта

HTML изначально задумывался как язык, которому не нужны средства оформления, такие как цвет, размер, рамки или что-то подобное. Разработанный в Европейском институте физики частиц (CERN), HTML был игрушкой ученых, их, прежде всего, интересовала логика информации, а не её визуальное представление. Тогда ещё не существовало понятия веб-дизайна и вёрстки как таковой, все сайты по своему оформлению были практически однотипными, в стиле, называемом сейчас «академический дизайн». Пример до сих пор можно посмотреть на lib.ru.

Однако пользователи преимущественно думали иначе и, глядя на красивую картинку, отдавали предпочтение именно ей. Разработчики браузера Netscape прекрасно понимали это и вводили в HTML новые теги, улучшающие внешний вид документа. Эти теги не были стандартизированы и работали только в Netscape, что в эпоху повального засилья этого браузера, не имело значения. Доля Netscape составляла более 90% от всех существующих браузеров.

Век Netscape продолжался до тех пор, пока часть рынка браузеров не захватила Microsoft со своим браузером Internet Explorer, что в итоге принесло только головную боль разработчикам сайтов. Разные подходы Netscape и Internet Explorer к отображению сайта, противоречивая поддержка стилей и тегов, большое количество мелких ошибок привело к тому, что сайт приходилось тестировать и отлаживать долгое время.

Устаревшие версии браузеров не в полной мере поддерживали CSS (Cascading Style Sheets, каскадные таблицы стилей), поэтому код представлял собой окрошку из HTML и CSS. Это привело к тому, что для макетов стали применяться таблицы с невидимой границей, на долгое время ставшими стандартом де-факто.

Следующим этапом развития разработки сайтов стало рождение спецификации, которая была названа Cascading Style Sheets Level 2, сокращенно CSS2. Следом появилось обновление Cascading Style Sheets Level 2 Revision 1 (CSS 2.1), которое используется по сей день. Выпуск новых версий браузеров, поддерживающих, пусть и не в полной мере, эту спецификацию, серьёзно облегчил работу над сайтами. В итоге, начал происходить постепенный переход от табличной вёрстки к блочной или, как она ещё называется, вёрстке слоями, в которой расположение элементов на странице и их вид задаётся через стили.

В настоящее время уже можно заявить, что табличная вёрстка в большинстве своём является архаизмом. Тем не менее, существует ещё множество сайтов вроде yandex.ru, artlebedev.ru и других, свёрстанных именно при содействии таблиц. Такой консерватизм связан со следующими обстоятельствами. сайт верстка каскадный html

· Вёрстка слоями сложнее, чем таблицами, поскольку требует от разработчика глубоких знаний спецификации CSS.

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

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

Таким образом, вёрстка в простом понимании это процесс превращения работы дизайнера в веб-страницу, отображаемую в браузере.

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

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

Структура документа

Для того, чтобы текстовый файл превратился в HTML-файл, поменять его расширение с ".txt" на ".html" недостаточно. Надо соблюсти "правило первой строки":

Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться со строки декларации версии HTML !DOCTYPE которая обычно выглядит так: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

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

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

Как видно из примера, самый короткий html-документ состоит буквально из одной строки.

Пример самого короткого HTML-документа: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

На самом деле одной строкой дело не обходится. После объявления версии и типа документа необходимо обозначить его начало и конец. Это делается с помощью тега-контейнера <HTML>. Необходимо отметить, что любой HTML-документ открывется тегом <HTML> и им же закрывается.

Затем, между тегами <HTML> и </HTML> следует разместить заголовок и тело документа. Вот и все!

Начало положено - вы получили прекрасную заготовку. Вот как должен выглядеть ваш базовый HTML-файл перед началом работы:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<HTML>

<HEAD>

<TITLE>Заголовок документа</TITLE>

</HEAD>

<BODY>

Текст документа

</BODY>

</HTML>

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

Из схемы видно, что документ состоит из двух основных блоков - "заголовка" и "тела документа". Заголовок определяется с помощью элемента HEAD, а тело - элементом BODY.

Заголовок содержит "техническую" информацию о документе, хотя чаще всего используется только для обозначения его названия (см. элемент TITLE).

Тело документа - святая святых. Именно в нем находится все то, что отображается на странице: текст, картинки, таблицы. Соответственно, делаем вывод: большинство ваших HTML-экспериментов будет проводиться в пространстве между тегами <BODY> и </BODY>

Список базовых тегов HTML

Теги	Описание
<!Doctype>	Определяет тип документа
<a></a>	Определяет гиперссылку
<body></body>	Определяет тело документа
<ul></ul>	Создает маркированный список
<ol></ol>	Создает нумерованный список
<div></div>	Создает блочный элемент
<h1-h6>	Создает заголовок
<head></head>	Содержит информацию. о документе
<html></html>	Создает html-документ
<img></img>	Определяет изображение
<menu></menu>	Определяет список-меню
<meta>	Содержит информацию о документе
<script></script>	Определяет скрипт
<style></style>	Определяет стилевые описания
<table></table>	Определяет таблицу
<var></var>	Определяет переменную

Дополнительные теги html

Теги	Описание
<p></p>	Определяет параграф
<li></li>	Определяет элемент списка
<td></td>	Определяет столбец таблицы
<tr></tr>	Определяет строку таблицы
<span></span>	Определяют линейную секцию в документе
<b></b>	Преобразует шрифт в жирный
<strong></strong>	Преобразует шрифт в полужирный
<sup></sup>	Преобразует текст в текст в верхнем индексе
<sub></sub>	Преобразует текст в текст в нижнем индексе
<small></small>	Преобразует текст в более маленький
<i></i>	Преобразует текст в курсивный
<del></del>	Отображает зачеркнутый текст
<ins></ins>	Преобразует текст в подчеркнутый



2. ОСНОВЫ CSS

Обычный HTML позволяет задавать цвет и размер текста с помощью тегов форматирования. Если понадобится изменить параметры однотипных элементов на сайте, придется просматривать все страницы, чтобы найти и поменять теги.

Каскадные таблицы стилей (Cascading Style Sheets, CSS) позволяют хранить цвет, размеры текста и другие параметры в стилях. Стилем называется набор правил форматирования, который применяется к элементу документа, чтобы быстро изменить его внешний вид.

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

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

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

· использование различных расширений HTML;

· применение изображений вместо текста;

· использование рисунков для контроля пустого пространства, так называемые распорки;

· использование таблиц для верстки веб-страниц;

· написание программных скриптов вместо использования HTML.

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

Стили решают эти проблемы, в то же время заменяя лишь ограниченную область механизмов представления HTML.

2.1 Свойства CSS

Список базовых свойств, которые должен знать даже начинающий веб-мастер:

margin, padding, border, background, color, font-family, float

background

Сокращенный вариант записи для свойств background-color, background-image, background-repeat, background-attachment и background-position.

border

Краткий вариант записи для свойств border-widthб border-style и border-color Влияет на все четыре границы элемента.

font

Краткий вариант записи свойств font-style, font-variant, font-weight, font-size, line-height и font-family.

Управляет толщиной (насыщенностью) шрифта.

z-index

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

height

Определяет длину элемента

overflow

Вставляет полосу прокрутки

width

Определяет ширину элемента

text-align

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

padding

Сокращенный способ задать следующие параметры: padding-top, padding-right, padding-bottom и/или padding-left.

color

Определяет текст текста

margin

Сокращенный способ задать следующие параметры: padding-top, padding-right, padding-bottom и/или padding-left



3. НАЧАЛО СОЗДАНИЕ САЙТА

Независимо какой вы собираетесь делать сайт, его начальный вид, в любом случае будет выглядеть так:

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xmlns">

<head>

</head>

<body>

</body>

</html>

Оформление

При создании данного сайта я использовал фиксированную верстку, т.е. основная часть кода находится в css:

*{padding:0; margin:0;border:none; }

a{text-decoration:none; color:blue}

a.menu{text-decoration:none; color:orange}

a:hover{color:green}

border: 1px solid #000;}

hr.news{border: 4px solid #000}

ul{list-style-type:none}

nav{list-style-type:none;text-align:center}

h3{display:inline}

h1{color:green;}

h2{color:pink}

h2.news{color:#003399}

.cleared{clear:both}

p{font-size: 15px}

p:first-letter{font-size: 20px;}

p.zagalovok{font-size: 17px}

table{border:1px solid black}

input{border: 1px solid black}

input[type="button"]{

margin-top:10px; border-radius:10px; width:154px; border:1px solid green; border-bottom-color:#0c0; background-position:-100px -378px;}

#telo{width:1100px;margin:20px auto;}

#header{height:60px;background:#eee}

#menu{background:#ccc;background-color:brown}

#magistral ul li{float:left; }

#main{clear:both;height:700px; background-color: gray; padding: 5px; position:relative; }

#main .slidebar{float:left;width:200px;background:#999}

#main .content{margin-left:200px}

#footer{height:20px;background: #ffc; padding-top: 5px}

#block1{position:absolute; margin-left: 2px;}

#block2{position:absolute; margin-left: 550px; border: 1px}

#block3{position:absolute;}

#news{position:absolute; margin-left:-5px; margin-top: 300px; padding-left: 5px; padding-top: 5px; width:1095px; background-color:gray; height: 332px; }

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

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



<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" href="Settings.css" type="text/css">

После этого начинаем заполнять <body> нашими блоками:

<div id="telo">

<div id="header">

<div id="menu">

</div>

<div id="main">

<div id="block1">

</div>

<div id="block2">

</div>

<div id="news">

</div>

</div>

<div id="footer">

</div>

</div>

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

Первым делом создаём фон страницы: <body background="пейзаж.jpg">



После этого начинаем заполнять нашу «голову» <header>, делается это очень просто, вставляем изображение в блок <div> с помощью тега <img>

<div id="header"><img src="голова.jpg" width="1100px" height="60px"></div>

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

<div id="footer">

<marquee loop="1000" height="40px" scrollamount="10">Берегите природу!!</marquee>

</div>

Меню

Меню я создал с помощью тега <nav>, он является новым тегом схожим по значению с тегом <menu>. Обычный пользователь не увидит между ними большой разницы, в отличии от поисковых ботов, т.к. тег <nav> объясняет боту где на сайте находится навигация, а где просто ссылки. Вот так выглядел мой html-код

<nav>

<a class="menu" href="glavnaya.htm"><h3>Главная</h3></a> |

<a class="menu" href="carstva.htm"><h3>Царства Природы</h3></a> |

<a class="menu" href="registaciya.htm"><h3>Регистрация</h3></a>

</nav>



Добавление галереи

Галерея на моём сайте почти ничем не отличается от других за исключение одной вещи, при наведении на картинку, её размер увеличивался.

Сначала я создал блок в котором находились все мои картинки:

<div id=”block2”>

</div>

После этого я вставил картинку и настроил её так, чтобы она увеличивалась при наведении.

<img width="150" height="80" src="царства природы.jpg"

onmouseover="this.width=350;this.height=250"

onmouseout="this.width=150;this.height=80"

alt="Иллюстрация"

vspace="5" hspace="5">

То же самое я проделал с другими изображениями.



Добавление видеороликов

После того как я вставил галерею, я взялся за видео. Оно вставляется очень просто, сначала пишется тег я создал блок в котором находилось это видео, а после вставил и настроил видео с помощью тега <video>:

<div id="block3”>

<video width="400px" height="330px" controls="controls">

<source src="Россия.mp4" type="video/mp4"></video></div>

Добавление новостей

После оформления главной страницы, добавления фото и видео, я наконец приступил к добавлению новостей. Сначала я создал блок новостей <div id=”news”> заголовок который информирует о том, что начинается новостная часть:

<h2 class="news">Свежие новости из мира природы</h2>

После этого я просто начал вставлять параграфы и в конце ссылки на полную версию новости, выглядело это примерно так:

<b><p class=”zagalovol”></p>

<p>*Часть новости*…<a href=”#”></a></p>

Так же все новости были разделены между собой горизонтальной линией с помощью тега <hr>



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

Конечный вид главной страницы

Царства природы

Пункт «царства природы», по сравнению с главной страницей довольно-таки простой. Его основная часть<main> состоит всего из двух вещей, «Древо царств» и пояснений по каждому царству.

Создание Древа царств

Древо по своей структуре довольно-таки простое. Оно состоит всего из двух составляющих:

1) Самого дерева.

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

2) Облака царств.



И наконец сложив эти два рисунка мы получаем Древо царств:

Код же тут довольно-таки простой, на каждом облаке установлена ссылка на описание царства:

<div id="gribi"><a href="грибы.htm">

<img src="грибы.png" width="200px" height="60px"></a>

</div>

Все настройки для блоков уже были указаны в css:

#gribi{margin-top: -430px; margin-left: 310px; padding: 5px}

#zveri{margin-top: 0px; margin-left: 250px; padding: 5px}

#rasteniya{margin-top: 10px; margin-left: 240px; padding: 5px}

#arhei{margin-top: 0px; margin-left: 150px; padding: 5px}

#bakterii{margin-top: -400px; margin-left: 560px; padding: 5px}

#virusi{margin-top: 0px; margin-left: 610px; padding: 5px}

#protisti{margin-top: 0px; margin-left: 660px; padding: 5px}

#chromisti{margin-top: 44px; margin-left: 660px; padding: 5px}



Оформление каждого царства

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

<h2 align="center">Растения</h2>

После этого идёт краткое описание царства и его классификации. Перечисление классификация идёт с помощью тега <ul> вот так:

<li><p>Зелёные водоросли</p>

<li><p>Мохообразные</p>

<li><p>Сосудистые споровые</p>

<li><p>Семенные растения</p>

Потом начинается идёт жирная горизонтальная линия которая разделяет основное содержание и описание каждой классификации.

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

<div id=”block4”>

<p>Описание</p>

</div>

<div>

<img>

</div>

<hr>

Пример:



Создание регистрации

Регистрация начинается с тега <form> после него создаётся блок, в котором находятся все составляющие регистрации:

<form>

<div >

<h2>Форма регистрации</h2><br>

<p>Имя <input style="width:70%; height:20px; border-color: black" type="text" value=""><span></span></p><br>

<p>Фамилия <input style="width:70%; height:20px" type="text" value=""><span></span></p><br>

<p>Город <input style="width:70%; height:20px" type="text" value=""><span></span></p><br>

<p>Эл. почта <input style="width:70%; height:20px" type="email" value=""><span></span></p><br>

<p>Пароль <input style="width:70%; height:20px" type="password" value=""></p><br>

<p>Повторите <input style="width:70%; height:20px" type="password" value=""><span></span></p><br>

<p>Введите код с картинки </p>

<img src="капча.png" width="200px"; height="100px"><br><br>

<p><input style="width:30%; height:20px" type="text" value=""><span></span></p>

</div>



Заключение

В заключении хочу сказать о том, что создание сайта с помощью блочной вёрстки является наиболее оптимальным выбором среди других способов создания сайта. Так же не стоит быть консерватором и использовать только старые теги, не стоит бояться использовать новые такие как <nav>. Однако это лишь сторона программирования, не стоит забывать и про тематику сайта

До того как я начал делать этот сайт мои знания в этой области были довольно-таки скудны. Однако после этой работы я узнал много нового и действительно увлекательного.

Надеюсь моя работа вам понравится.



Список источников

1. Информатика. Грошев А.С. (Арх.ГТУ, 2010)

2. Информатика. Зрюмова А.Г., Зрюмов Е.А., Пронин С.П. (АлтГТУ, 2011)

3. Информатика. Макарова Н.В., Волков В.Б. (2011)

4. Информатика. Михеева Е.В., Титова О.И. (2007)

5. Информатика. Под общ. ред. А.Н. Данчула (2004)

6. Информатика. Соболь Б.В. и др. (2007, 3-е изд,)

7. Информатика. Степанов А.Н. (2006, 4-е изд.,)

8. Информатика. Таганов Л.С., Пимонов А.Г. (КузбГТУ; 2010, 330с.)

9. Информатика. Терехов А.В., Чернышев А.В., Чернышев В.Н. (ТГТУ; 2007)

10. Информатика и ИКТ. Цветкова М.С., Великович Л.С. (2012.)

11. Информатика и информационные технологии. Конспект лекций. Романова Ю.Д., Лесничая И.Г. (2009,)

12. Информатика и основы программирования. Меняев М.Ф. (2007)

13. Информатика и программирование. Комлева Н.В., Смирнов А.А., Хрипков Д.В. (ЕАОИ; 2008)

14. Современная информатика. Аверьянов Г.П., Дмитриева В.В. (НИЯУ МИФИ; 2011)

15. Языки программирования. Голицына О.Л., Партыка Т.Л., Попов И.И. (2008, )

Размещено на Allbest.ru