Разработка веб-сайта о путешествиях

<divalign="center"><imgsrc="image/image003.gif"></div>

<divalign="center">Рисунок 2. Способы определения расстояния по карте</div><br>

</p>

<divalign="center">

<fontsize="4"><aname="glava3"><i><b>

Изображение местных предметов на топографических картах.

</b></i></a></font>

</div>

<p>

Все местные предметы изображаются на картах условными знаками. Все условные знаки местных предметов делятся на масштабные (контурные), внемасштабные и пояснительные.<br>

<b>Масштабными условными знаками</b> изображаются такие местные предметы, размеры которых выражаются в масштабе карты.

...

<b>Изображение рельефа на картах.</b> На топографических картах рельеф изображается горизонталями.

<divalign="center"><imgsrc="image/image005.gif"></div>

<divalign="center">Рисунок 3. План сечения горы</div><br>

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

Замкнутые кривые линии, соединяющие точки с одинаковой высотой, называются <i>горизонталями</i>.<br>

...

</p>

<divalign="center">

<fontsize="4"><aname="glava4"><i><b>

Географические и прямоугольные координаты.

</b></i></a></font>

</div>

<p>

<b>Географические координаты.</b> Земля имеет форму сфероида, т. е. сплюснутого шара. Так как земной сфероид весьма мало отличается от шара, то обычно этот сфероид называют земным шаром.<br>

...

Линия пересечения этой плоскости с земной поверхностью называется <u><i>географическим</i></u> (или <u><i>истинным</i></u>) <u><i>меридианом</i></u>.

Меридианов можно провести сколько угодно, и все они пересекутся в полюсах.<br>

Плоскость, перпендикулярная земной оси и проходящая через центр земного шара, называется <u><i>плоскостью экватора</i></u>, а линия пересечения этой плоскости с земной поверхностью - <i>экватором</i>.<br>

Если мысленно пересечь земной шар плоскостями, параллельными экватору, то на поверхности Земли получаются круги, которые называются <u><i>параллелями</i></u>.<br>

Нанесенные на глобусы и карты параллели и меридианы составляют <u><i>градусную сетку</i></u>. Градусная сетка дает возможность определить положение любой точки на земной поверхности (рис. 4).<br>

<divalign="center"><imgsrc="image/image007.gif"></div>

<divalign="center">Рисунок 4. Градусная сетка земной поверхности</div><br>

За начальный меридиан при составлении карт в метрических мерах принят Гринвичский меридиан, проходящий через Гринвичскую обсерваторию (вблизи Лондона).<br>

Положение любой точки на земной поверхности, например точки А, может быть определено следующим образом: определяется угол &#945; между плоскостью экватора и отвесной линией из точки А (отвесной линией называется линия, по которой падают тела, не имеющие опоры).<br>

Этот угол &#945; называется <u><i>географической широтой</i></u> точки А (рис. 5).

<divalign="center"><imgsrc="image/image009.gif"></div>

<divalign="center">Рисунок 5. Географическая широта</div><br>

Широты отсчитываются по дуге меридиана от экватора к северу и к югу от 0 до 90°. В Северном полушарии широты положительны, в Южном - отрицательны.<br>

Угол &#955; заключенный между плоскостями начального меридиана и меридиана, проходящего через точку А, называется <u><i>географической долготой</i></u> точки А (рис. 6).<br>

<divalign="center"><imgsrc="image/image011.gif"></div>

<divalign="center">Рисунок 6. Географическая долгота</div><br>

Долготы отсчитываются по дуге экватора или параллели в обе стороны от начального меридиана от 0 до 180°, на восток - со знаком «плюс», на запад - со знаком «минус».<br>

Географическая широта и долгота точки называются ее <i>географическими координатами</i>.

Чтобы полностью определить положение точки над земной поверхностью, необходимо знать еще третью ее координату - <i>высоту</i>, отсчитываемую от уровня моря.<br>

<b>Прямоугольные координаты.</b> В топографии наиболее широкое распространение получили так называемые прямоугольные координаты. Возьмем на плоскости две взаимно перпендикулярные линии - <i>0Х</i> и <i>0Y</i>. Эти линии называются <i>осями координат</i>, а точка их пересечения 0 - <i>началом координат</i>.<br>

...

</p>

<divalign="center">

<fontsize="4"><aname="glava5"><i><b>

Километровая сетка и пользование ею.

</b></i></a></font>

</div>

<p>

Каждый лист карты занимает небольшую часть зоны, а поэтому начало координат на карту не попадает. Для того чтобы можно было пользоваться координатами, на картах масштаба 1 : 10000, 1 : 25 000 и 1 : 50 000 нанесены координатные сетки, т. е. квадраты со стороной 1 км (их также называют километровыми сетками). На картах масштаба 1 : 100000 наносятся квадраты со стороной 2 км.<br>

...

Требуется определить по карте координаты тригонометрического пункта на высоте 141,5 (рис. 7).<br>

<divalign="center"><imgsrc="image/image013.gif"></div>

<divalign="center">Рисунок 7. Определение прямоугольных координат</div><br>

...

</p>

</div>

<body>

<html>

7. Страница: «Об авторе»

Рис. 7

<! DOCTYPEHTMLPUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN"

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

<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="ru"lang="ru">

<head>

<title>Обавторе</title>

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

<linkrel="stylesheet"type="text/css"href="css/style.autor.css">

</head>

<bodyclass="autor1">

<tablecellspacing="0"class="table">

<tbody>

<trclass="celler">

<td><p><ahref="index.html">БлогАнтона:)</a></p></td>

</tr>

<tr>

<tdclass="celler3">

<iframesrc="autor_bio.html"class="friman3">

</iframe>

</td>

<tr>

<tdclass="friman2">

<em>Блог&copy 2014</em><br>

<em><ahref="autor.html"target="info">АнтонПочиновский</a></em>

</td>

</tr>

</tbody>

</table>

<pclass="wwf"><ahref=http://www.wwf.ru/_adv_gate/244target="_blank"><imgsrc="http://www.wwf.ru/php/banner.php?id=244&w=120&h=240"alt="WWF Russia"></a></p>

</body>

</html>

КодCSS:

body.autor1 {

background-color:#696969;

background-image:url(image/autor_ground.jpg);

background-repeat:no-repeat;

background-attachment:fixed;

min-width:600px;

font-family:Lombardina Initial One;

font-size:25;

}

body.autor2{

background-color:Palegoldenrod;

opacity:0.9;

font-family:Lombardina Initial One;

font-size:25;

}

.wwf{

margin-left:91%;

margin-top:0px;

position:fixed;

}

img.wwf{

width:120px;

height:240px;

}

.table{

border:dashed1pxblack;

width:90%;

height:98%;

padding-right:4px;

opacity:0.9;

border-radius:6px;

-webkit-box-shadow:0005px#0a719d,3px1px5px5px#003399;

position:fixed;

}

.celler{

border:dashed;

width:20%;

height:5%;

}

p.celler2{

text-align:center;

font-weight:bold;

}

img.friman{

height:240px;

width:160px;

border-radius:6px;

text-align:justify;

padding:5px;

margin:10px;

}

.friman2{

text-align:center;

font-size:13px;

}

.friman3{

height:100%;

width:100%;

}

.celler3{

height:93%;

opacity:1;

}

.diver{

position:fixed;

}

.diver_text{

margin-left:200px;

max-width:70%;

}

div.kontact{

margin-left:85%;

margin-top:-50px;

position:fixed;

}

Кодфрейма:

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

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

<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="ru"lang="ru">

<head>

<title>Обавторе</title>

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

<linkrel="stylesheet"type="text/css"href="css/style.autor.css">

</head>

<bodyclass="autor2">

<div><pclass="celler2">Добро пожаловать в мой авторский блог посвящённый всему-понемногу:)</p></div>

<divclass="diver"><imgsrc="css/image/autor.jpg"class="friman"></div>

<divclass="diver_text"><p>Добрый день (или вечер;))! Меня зовут Антон. Мне 21 год и я проживаю в городе Набережные Челны

республики Татарстан в нашей необъятной стране. </p>

<p>Решил созданный данный блок для сбора интересующей меня информации. Я думаю, так удобнее, потому что не нужно возиться с целой

"оравой" закладок.</p>

<p>Это первая версия сайта. Думаю, со временем я его доработаю.</p></div>

<divclass="kontact">Контактные данные:<br>

<ahref=http://vk.com/anton_pochinovskijtarget="_blank">ВКонтакте</a>

<ahref="https://www.facebook.com/profile.php?id=100008367900773"target="_blank">Facebook</a>

</div>

</body>

</html>

Заключение

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

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

Список используемых тегов и их характеристика

· <html> - является контейнером, который заключает в себе все содержимое веб-страницы, включая теги <head> и <body>.

· <head> - предназначен для хранения других элементов, цель которых -- помочь браузеру в работе с данными.

· <body> - предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера.

· <title> - определяетзаголовокдокумента.

· <meta> - определяет метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем.

· <link> - устанавливает связь с внешним документом вроде файла со стилями или со шрифтами.

· <table> - служит контейнером для элементов, определяющих содержимое таблицы.

· <tbody> - предназначен для хранения одной или нескольких строк таблицы.

· <tr> - служит контейнером для создания строки таблицы.

· <td> - предназначен для создания одной ячейки таблицы.

· <iframe> - создает плавающий фрейм, который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые документы.

· <frameset> - определяет структуру фреймов на веб-странице.

· <frame> - определяет свойства отдельного фрейма, на которые делится окно браузера.

· <p> - определяет текстовый абзац.

· <em> - предназначен для акцентирования текста.

· <div> - является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого.

· <a> - является одним из важных элементов HTML и предназначен для создания ссылок.

· <img> - предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG.

· <ul> - устанавливает маркированный список.

· <ol> - устанавливает нумерованный список.

· <li> - определяет отдельный элемент списка.

· <font> - представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура.

· <i> - устанавливает курсивное начертание шрифта.

· <b> - устанавливает жирное начертание шрифта.

· <u> - добавляет подчеркивание к тексту.

· <br> - устанавливает перевод строки в том месте, где этот тег находится.

Литература

1. http://www.htmlbook.ru -- помощник в разработке сайтов.

2. Николай Прохоренок «HTML, JavaScript, PHP и MySQL. Джентельменский набор Web-мастера. 3-е издание», 2010г.

3. http://www.xiper.net/ - информационный сайт о языках программирования сайтов HTML и CSS.

4. http://dreamhelg.ru/ - информационный сайт о дизайне сайтов.

5. Билл Скотт, Тереза Нейл «Проектирование веб-интерфейсов», 2010г.

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

...