Язык программирования Html

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

История языка программирования HTML

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

Свои первые черты язык начал обретать в 1986 году. Толчком стало принятие Международной организацией по стандартизации (ISO) ISO-8879-стандарта - Standard Generalized Markup Language или, в сокращенном варианте - SGML. К нему прилагалось описание, в котором говорилось о том, что SGML предназначен для структурной разметки текста. Примечательно, что описания внешнего вида документа не предполагалось.

Исходя из этого, можно сделать вывод о том, что SGML не являлся системой для разметки текста и не располагал какого-либо списка структурных элементов языка, используемых в определенных условиях. Язык подразумевал описание синтаксиса написания главных элементов разметки тексты. Спустя некоторое время они получили, хорошо известное сегодня название - «теги».

Вполне очевидной была потребность в создании языка, который:

· Описывал какой элемент в каких случаях разумно применить

· Содержал перечень элементов, с помощью которых можно создать документ, читаемый разными программами

Несмотря на то, что язык SGML, как и его схожие приложения, не получил особого развития, он и не был окончательно забыт. В 1991 году Европейский институт физики частиц объявил о необходимости разработки механизма, позволяющего передавать гипертекстовую информацию через Глобальную сеть. Именно SGML лег в основу будущего языка - Hyper Text Markup Language (HTML).

Этапы становления

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

Разработкой HTML версии 2.0 занялся консорциум W3С. Первый результат удалось получить, спустя год насыщенной работы - в 1995 году. Практически параллельно обсуждались возможности версии 3.0. Если вторую версию нельзя назвать существенно отличающейся от первой, то третья стала безусловным прорывом.

HTML 3.0 включал интересные новинки:

· Разметку математических формул

· Теги для создания страниц

· Вставку рисунков, обтекаемых текстом

· Примечаний и т.д.

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

Результатом стало появление CSS - Cascading Style Sheets, иерархические стилевые спецификации, наделенные уникальным синтаксисом, структурой, задачами.

Существенное расширение тегов произошло с подачи Netscape Communications - корпорации, запустившей первый коммерческий браузер - Netscape Navigator. Нововведения преследовали лишь одну цель - улучшить внешний вид документа, но при этом они совершенно противоречили исконным принципам языка.

HTML версии 3.2 создали в кратчайшие сроки. Он был ориентирован на Microsoft Internet Explorer. До недавнего времени эта версия HTML была единственным стандартом языка при разработке интернет-проектов. Тем не менее, направление развивается очень активно, с помощью HTML удалось придать некую упорядоченность элементам разметки всех браузеров, но возможностей языка становилось недостаточно.

В 2004 году приняли новую версию HTML - 4.01. Он обеспечивает отличные показатели кросс-браузерности и кросс-платформенности.

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

Обоснование выбора темы для сайта курсовой работы

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

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

Ход работы язык программирование html браузерность

Описание основных тегов, которые я использовал в работе:

· <body></body>-- этот тэг отвечает за отображение содержимого на сайте. То есть всё, что вы напишите между этими тэгами будет отображаться на веб-странице

· <html></html> -- это главный тэг, благодаря которому мы начинаем работу и при этом даём понять сайт, что сейчас будем действовать на языке HTML. Совместно с xmlns--указывает пространство имен для XHTML-документов.

· <head></head> -- сюда заносится служебная информация, например название документа, описание и многие другие.

· <div></div> является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора.

· <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Адрес файла с картинкой задаётся через атрибут src. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>. Alt альтернативный текст для изображения.

Описание кода отдельных элементов:

1. Использован отдельный файл описания таблиц стилей CSS style.css, который подсоединяется с помощью тега

<link rel = "stylesheet" href = "style.css">

В самом файле style.css с помощью селекторов идентификаторов определены свойства для каждого из элементов сайта, например:

#sidebar {// левая часть сайта, отделенная от основной

width: 300px;// ширина поля

height: 500px;// высота поля

float: left;// расположение на странице (слева)

border-right: 1px solid black;// линия границы (видимая)

background: #B3C1E6;// цвет заднего фона

text-align: auto;// расположение текста в блоке

}

В HTML-файлах привязка частей сайта к идентификаторам осуществляется с помощью тега <div></div>.

2. Для отображения часов на сайте я использовал специальный код javascript, который задекларирвоан в начале каждой страницы под тегом <script></script> в виде функции:

<script type="text/javascript">

function digitalWatch() {

var date = new Date();

var hours = date.getHours();

var minutes = date.getMinutes();

var seconds = date.getSeconds();

if (hours < 10) hours = "0" + hours;

if (minutes < 10) minutes = "0" + minutes;

if (seconds < 10) seconds = "0" + seconds;

document.getElementById("digital_watch").innerHTML = hours + ":" + minutes + ":" + seconds;

setTimeout("digitalWatch()", 1000);

}

</script>

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

<body onload="digitalWatch()">

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

<p id="digital_watch" style="color: #f00; font-size: 120%; font-weight: bold; text-align: center;"></p>

3. На сайте присутствует верхнее меню, которое инициализируется кодом:

<ul id = "about">

<li><a href = "index.html">О нас</a></li>

<li><a href = "http://minenergo.gov.ru/contacts/reception/order">Контакты</a></li>

<li><a href = "http://www.hh.ru">Работа в компании</a></li>

</ul>

Тег <ul> устанавливает маркированный список. Каждый элемент списка должен начинаться с тега <li>.

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

<ul class = "menu">

…

</ul>

5. Анимация на сайте была добавлена с помощью тега <marquee>.

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

<marquee width="300" height="200" scrollamount="15" direction="up"><img src="gas.jpg"/>

</marquee>

6. Основная часть сайта - текст и изображения - были оформлены с помощью тегов <p></p> - тега абзаца и <img> - тега вставки изображений. Например:

<p>Занимаясь разработкой ресурсов природного газа -- единственного ископаемого топлива, которое полностью сгорает при использовании -- мы вносим свой вклад в удовлетворение растущего глобального спроса на энергоносители и ограничение выбросов CO2 в атмосферу. Газ снабжает энергией, обогревает наши дома, предприятия и целые промышленные отрасли.</p>

Код index.html:

<!DOCTYPE html>

<html>

<head>

<title>Природный газ</title>

<meta charset = "utf-8">

<link rel = "stylesheet" href = "style.css">

<script type="text/javascript">

function digitalWatch() {

var date = new Date();

var hours = date.getHours();

var minutes = date.getMinutes();

var seconds = date.getSeconds();

if (hours < 10) hours = "0" + hours;

if (minutes < 10) minutes = "0" + minutes;

if (seconds < 10) seconds = "0" + seconds;

document.getElementById("digital_watch").innerHTML = hours + ":" + minutes + ":" + seconds;

setTimeout("digitalWatch()", 1000);

}

</script>

</head>

<body onload="digitalWatch()">

<div id = "main">

<div id = "header">

<div id = "title">Природный газ</div>

<ul id = "about">

<li><a href = "index.html">О нас</a></li>

<li><a href = "http://minenergo.gov.ru/contacts/reception/order">Контакты</a></li>

<li><a href = "http://www.hh.ru">Работа в компании</a></li>

</ul>

</div>

<div id = "sidebar">

<h3>Меню</h3>

<ul class = "menu">

<li><a href = "index.html">Главная</a></li>

<li><a href = "menu1.html">Что такое природный газ</a></li>

<li><a href = "menu2.html">Безопасная доставка газа</a></li>

<li><a href = "menu3.html">Эффективное моторное топливо</a></li>

<li><a href = "menu4.html">Будущее энергетики</a></li>

<li><a href = "http://www.gazprom.ru/">ОАО "Газпром"</a></li>

<li><a href = "http://www.shell.com.ru/">Shell Russia</a></li>

</ul>

<p id="digital_watch" style="color: #f00; font-size: 120%; font-weight: bold; text-align: center;"></p>

<marquee width="300" height="200" scrollamount="15" direction="up"><img src="gas.jpg"/></marquee>

</div>

<div id = "content">

<h1>Природный газ</h1>

<p>Занимаясь разработкой ресурсов природного газа -- единственного ископаемого топлива, которое полностью сгорает при использовании -- мы вносим свой вклад в удовлетворение растущего глобального спроса на энергоносители и ограничение выбросов CO2 в атмосферу. Газ снабжает энергией, обогревает наши дома, предприятия и целые промышленные отрасли.</p>

<p>Он может быть отличным дополнением к возобновляемым источникам энергии, таким как, например, сила ветра или энергия Солнца. Природный газ также можно использовать в качестве топлива для судов, автомобилей, автобусов и поездов, сокращая при этом выбросы углерода в атмосферу.</p>

<p>Согласно данным Международного энергетического агентства, глобальный спрос на природный газ может вырасти более чем наполовину к 2040 году. Природный газ -- единственное ископаемое топливо, которое полностью сгорает при использовании. Компании занимаются разведкой и освоением его ресурсов -- как на суше, так и на море.</p>

</div>

<div id = "footer"><br>Разработано Наумовым Алексеем<br>Санкт-Петербург 2016</div>

</div>

</body>

</html>

Код style.css:

*{

box-sizing: border-box

}

#main{

width: 800px;

margin: 0 auto;

}

#header{

height: 100px;

background: #dab490 url(html.jpeg) no-repeat 5% center;

border-bottom: 1px solid black;

}

#about{

float: right;

list-style: none;

margin-right: 50px

}

#about a{

color: yellow;

}

#title{

font-size: 32px;

text-indent: 10%;

float: left;

margin-left: 200px;

font-family: Tahoma;

color: yellow;

padding-top: 20px;

text-shadow: 0 0 5px orange;

}

#sidebar{

width: 300px;

height: 500px;

float: left;

border-right: 1px solid black;

background: #B3C1E6;

text-align: auto;

}

#sidebar h3{

text-align: center

}

.menu{

list-style: none;

line-height: 1.4em;

font-size: 1em;

}

#content{

width: 500px;

float: left;

height: 500px;

padding: 15px;

color: brown;

background: #B3C1E6

}

#footer{

height: 75px;

clear: both;

background: #dab490;

text-align: center;

}



Заключение

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

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

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

...