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

«Основы программирования HTML»

Содержание:

Введение

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

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

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

Разработка веб - сайта в наше время очень актуальная и прибыльная сфера деятельности, поэтому данную тему курсовой работы считаю приемлемой.

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

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

World Wide Web

Концепция WWW

Для начала давайте разберём что такое World Wide Web или сокращённо WWW. Официальное определение World Wide Web звучит как мировая виртуальная файловая система - "широкомасштабная гипермедиа-среда, ориентированная на предоставление универсального доступа к документам"

Информационный WWW сервер использует гипертекстовую технологию. Для записи документов в гипертексте используется специальный, но очень простой язык HTML (Hypertext Markup Language), который позволяет управлять шрифтами, отступами, вставлять цветные иллюстрации, поддерживает вывод звука и анимации. В стандарт языка также входит поддержка математических формул.

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

Веб – страница может содержать как стандартный так и форматированный текст, картинки и гиперссылки со всеми ресурсами интернет.

Итак, Web-страница может содержать стилизованный и форматований текст, графику и гиперсвязи с разными ресурсами Internet. Для реализации всех этих возможностей был создан язык HyperText Markup Language «HTML» если перевести то это будет звучать так- Язык Разметки Гипертекста.

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

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

Создание Web-страницы с помощью языка HTML

Язык HTML

За стандарт формата веб – страниц принято использовать Hyper Text Markup Language(.HTML). Этот язык разметки гипертекста, предназначен для создания форматированного текста, наполненного изображениями, анимацией, звуком, видеороликами и гипертекстовыми ссылками на другие ресурсы, размещённые как по всему глобальному интернету, так и находящиеся на этом же сервере или являющиеся составной частью этого же Веб-ресурса.

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

За время существования и развития языка HTML сменилось около 7 его версий, но больших отличий между ними нет.

Работа с HTML - это возможность изучить основы создания веб - документов в стандартизированном языке, используя расширения, только если это действительно нужно.

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

Для создания страниц в Интернете служит язык гипертекстовой разметки (HTML — HiperText Markup Language). Каждый сайт, конечно, индивидуален, однако суще­ствуют общие правила построения HTML-страниц, следовать которым нужно обязательно.

Существуют общие правила записи HTML-документов и общие понятия, исполь­зуемые при создании сайтов. Вначале рассмотрим понятия.

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

Тег помещается в угловые скобки <ТЕГ>. Иногда необходимо задать парный закрывающий тег, который пишется так: </ТЕГ>. В некоторых случаях закрывающий тег вообще не требуется, а иногда его можно пропустить. Однако для корректной обработки документа рекомендуется всегда использовать закрывающий тег. Ин­формация, заключенная между открывающимся и закрывающимся тегом, называ­ется его контейнером.

Кратко функции тегов можно описать так: открывающий тег включает форматирование, а закрывающий — выключает его.

Примером использования закрывающегося тега является тег <P>, который обозна­чает абзац: <P>Текст абзаца</P>, при этом закрывающий тег не является обя­зательным, хотя желателен. Закрывающего тега не требует тег <IMG>, который добавляет картинку на сайт.

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

В стандартном HTML-документе должны присутствовать три главных части:

A) Объявление HTML;
B) Заголовачная часть;
C) Тело документа.

A) Объявление HTML

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


<HTML>
.
.
.
</HTML>

Тег <HTML> должен использоваться с закрывающим тегом, который указывает на окончание документа.

B) Заголовочная часть.

<HEAD> и </HEAD>. Между этими тегами располагается информация о документе (название, ключевые слова для поиска, описание и т.д.). Однако наиболее важным является название документа, которое мы видим в верхней строке окна браузера и в списках "Избранное (BookMark)". Специальные программы-спайдеры поисковых систем используют название документа для построения своих баз данных. Для того чтобы дать название своему HTML-документу текст помещается между тегами <TITLE> и </TITLE>.

Тег <TITLE> задает название страницы, которое будет отображаться в строке с на­званием приложения окна браузера. Этот тег требует закрывающий тег </TITLE>. Текст, содержащийся между этими тегами, отображается в качестве заголовка страницы.

<HTML>
<HEAD>
<TITLE>Моя первая страница</TITLE>
</HEAD>
</HTML>

C) Тело документа.

Внутри блока тегов <BODY> располагается документ. Находящийся внутри этих тегов текст будет отображаться браузером. Все теги, отвечающие за форматирова­ние документа, помещают в тег <BODY>, то есть внутри него будет находиться тело документа.

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

Теперь между тегами <BODY> мы можем написать код нашей страницы:

<HTML>
<HEAD>
<TITLE>Пример Страницы</TITLE>
</HEAD>

<BODY>
Тут требуется разместить код нашей страницы!!!
</BODY>

</HTML>

Форматирование текста

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

Существует множество тегов для форматирования текста. Их можно разделить на две группы: логические и физические. Отличие этих групп друг от друга принци­пиальное.

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

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

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

Рассмотрим несколько тегов на примере.

Логические теги

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

Тег <ABBR>

Тег <ABBR> определяет текст как аббревиатуру с помощью атрибута TITLE. Мы можем задать всплывающую подсказку с расшифровкой аббревиатуры. При этом поисковые роботы индексируют именно полный вариант расшифровки, опреде­ленный атрибутом TITLE.

Пример:

<abbr title="Общество с Ограниченной Ответственностью">ООО</abbr>

Тег <CITE>

Тег <CITE> отмечает небольшую цитату или сноску, взятую из другого источника. Такой текст обычно отображается курсивом.

Пример:

<cite>Здесь указывается источник информации </cite>

Тег <CODE>

Тег <CODE> указывает на программный код, который может содержать, например, переменные, функции или небольшие куски программы. Такой текст обычно вы­водится моноширинным шрифтом.

Пример:

Зададим функцию:

<code>

func(int x, char y);

</code>

Тег <EM>

Тег <EM> выделяет важные фрагменты текста. Браузер отображает такой текст курсивом.

Пример:

<em>Текст выделен курсовом</em>

Тег <Q>

Тег <Q> обозначает текст как цитату, используется для добавления коротких цитат в текст. Обычно такой текст отображается курсивом, некоторые браузеры заклю­чают его в кавычки.

Пример:

Цитата: <q>Цитаты великих людей </q>

Физические теги

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

Тег <B>

Тег <B> Делает текст полужирным.

Пример:

<b>Полужирный текст</b>

Тег <I>

Тег <I> Выделяет текст курсовом.

Пример:

<i>Курсив</i>

Тег <TT>

Тег <TT> Задает моноширинное написание текста.

Пример:

<tt>Моноширинный текст</tt>

Тег <U>

Тег <U> Выделяет текст подчеркнутым.

Пример:

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

Тег <S>

Тег <S> Зачеркивает текст горизонтальной линией.

Пример:

<s>Зачеркнутый</s>

Тег <BIG>

Тег <BIG> отображает текст внутри тега шрифтом большего размера относительно остального текста. При вложении тегов размер шрифта будет каждый раз увеличиваться на единицу.

Пример:

Шрифт <big>большой шрифт <big>Еще больше</big></big>

Блочные теги

Теги, которые рассмотрим в этом подразделе, позволяют форматировать боль­шие блоки текста. Они определяют параметры отображения и расположения тек­ста, заключенного в них.

Атрибуты тега <FONT> задают такие параметры текста, как шрифт, размер и цвет текста внутри тега.

За шрифт отвечает атрибут FACE, его значением должно быть название шрифта.

За размер шрифта отвечает атрибут SIZE. Размер шрифта задается в относительных размерах (например, 2 или 6). По умолчанию используется размер 3

За цвет шрифта отвечает атрибут COLOR. Его значением должно быть либо ключе­вое слово, обозначающее имя цвета, либо код цвета в формате #RRGGBB.

Рассмотрим пример использование тега <FONT>:

<html>

<head>

<title>Тег FONT</title><body>

<font color="#65ff00" face=" Arial, Calibri, Corbel" size="5">

Текст ярко зеленого цвета , размер шрифта 5

</font> <br /></body>

</html>

Тег <DIV>

Тег <DIV> служит для выделения больших блоков текста для форматирования с по­мощью таблиц стилей. Это означает, что мы включаем необходимый блок текста внутрь тега <DIV> и задаете его параметры либо в атрибуте STYLE, либо подклю­чаете класс из таблицы стилей с помощью атрибута CLASS. Рассмотрим пример:

<html>

<head><title>Тег DIV</title><body>

<div style="cursor:crosshair" align="center">

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

</div>

</body>

</html>

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

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

Ввод и оформление текста

Заголовки

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

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

Заголовки создаются тегами <H1>, <H2>, <H3>, <H4>, <H5> и <H6>. По умолчанию заголовок самого верхнего уровня выделяется самым крупным шрифтом. Чем ниже уровень заголовка, тем меньше шрифт.

Для заголовка любого уровня можно задать выравнивание по горизонтали с помо­щью атрибута ALIGN.

Значения атрибута ALIGN следующие:

  • left — по левому краю;
  • right — по правому краю;
  • center — по центру;
  • justify — по ширине (для заголовков длиннее строки).

Посмотрим на примере как будет выглядеть код:

<h1 align=" left ">Заголовок 1 уровня</h1>

<h2 align="justify">Заголовок 2 уровня</h2>

<h3 align=" center ">Заголовок 3 уровня</h3>

<h4 align="right">Заголовок 4 уровня</h4>

<h5>Заголовок 5 уровня</h5>

<h6 >Заголовок 6 уровня</h6>

Списки

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

В HTML можно выделить несколько типов списков, отличных по внешнему виду:

  • маркированный;
  • нумерованный;
  • список определений.

Маркированный список

Маркированный список — это список, в котором пункты отмечаются с помощью различных символов. Такой список называется также ненумерованным, или не­упорядоченным, потому что для его элементов последовательность не важна. Этот список можно использовать для перечисления объектов.

Для создания маркированных списков HTML использует тег <UL>. Он тре­бует закрывающий тег, а элементы списка находятся внутри блока тегов <UL>. Каждый элемент начинается с тега <LI>.

У тега <UL> есть атрибут TYPE, меняющий вид маркера списка.

Значения атрибута TYPE следующие:

circle — создает маркер в виде круга, белого внутри;

square — создает маркер в виде квадрата;

disc — создает маркер в виде закрашенного черным круга.

Посмотрим на примере как будет выглядеть код, атрибут TYPE будем использовать circle:

<ul type="circle">

<li>Венера</li>

<li>Земля</li>

<li>Юпитер</li>

<li>Марс</li>

</ul>

Нумерованный список

Нумерованный список — это список, который применяется тогда, когда порядок следования его пунктов имеет большое значение, например при описании алгорит­мов и других пошаговых действий.

Для создания упорядоченных списков применяется тег <OL>, которому требуется закрывающий тег. Все пункты списка находятся внутри блока этих тегов.

Тег <OL> имеет атрибут TYPE, который задает формат символов, используемых для нумерации.

Значения атрибута TYPE следующие:

  • A — пункты нумеруются заглавными буквами латинского алфавита;
  • a — пункты нумеруются строчными буквами латинского алфавита;
  • I — пункты нумеруются заглавными римскими цифрами;
  • i — пункты нумеруются строчными римскими цифрами;
  • 1 — пункты нумеруются арабскими цифрами.

Посмотрим на примере как будет выглядеть код, атрибут TYPE будем использовать 1:

<ol type="1" start="6">

<li>Пункт </li>

<li>Пункт</li>

<li>Пункт </li>

<li>Пункт </li>

<li>Пункт </li>

</ol>

Список определений

Список определений — это особый вид списка, который применяется для формати­рования словарей и в случаях, когда необходимо пояснить значения терминов. Для организации списков определений служит тег <DL> — это тег-контейнер, внутри которого находятся определение и описание термина. Чтобы внести информацию внутри тега-контейнера <DL>, надо задать теги <DT> и <DD>.

Тег <DT> используется для того, чтобы задать определение. Никаких особенных атрибутов он не имеет.

Посмотрим на примере как будет выглядеть код:

<dl>

<dt>Заголовок 1</dt>

<dd>Подзаголовок 1</dd>

<dt>Заголовок 2</dt>

<dd>Подзаголовок 2 </dd>

</dl>

Ссылки

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

Существует два типа ссылок: внешние и внутренние. Внешние ссылки связывают страницы и помогают осуществлять навигацию. Внутренние ссылки дают возмож­ность передвигаться в рамках одной страницы.

Внешние ссылки

Внешние ссылки — это ссылки на объекты, расположенные вне текущей страницы. Это могут быть другие страницы сайта, картинки, мультимедиа-приложения и иные сайты.

Для создания ссылок в HTML служит тег <A>, который требует закрывающий тег. В блоке этих тегов располагается текст или другой объект, который будет выделять­ся как ссылка. На самом деле для того, чтобы сообщить человеку, что в каком-то месте сайта расположена ссылка, совершенно не обязательно писать адрес страни­цы. Язык HTML дает возможность «замаскировать» адрес под текст ссылки, кото­рый описывает, что увидит пользователь, перейдя по ней. Отдельно находится адрес страницы, на которую вы попадете при щелчке кнопкой мыши на ссылке.

Между тегами <A> и </A> располагается текст ссылки, а адрес документа для перехода записывается в теге <A>. Таким об­разом, пользователь сможет быстро и легко перемещаться по сайту. Ему абсолют­но все равно, где находится документ, на который указывает ссылка, он видит только текст описания.

Посмотрим на примере как будет выглядеть код:

<body>

<a href="start.html">Стартовая страница </a><br />

<a href="cartinka.jpg">Логотип </a>

</body>

Внутренние ссылки

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

Чтобы создать такую ссылку, сначала нужно определить место, к которому приво­дит ссылка. Это делается с помощью атрибута NAME тега <A>. Необходимый от­рывок текста заключается в блок тега <A>. Однако совершенно не обязательно брать внутрь этого тега текст — можно просто установить его на месте, к которому браузер должен переходить при щелчке кнопкой мыши на ссылке.

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

Посмотрим на примере как будет выглядеть код:

<a name="met2">Это метка для перехода 2</a><br />

<a href="#met1">Кликните для перехода к метке 1</a><br />

<a href="#met2">Кликните для перехода к метке 2</a><br />

<a name="met1">Это метка для перехода 1</a>

Работа с таблицами

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

Каждая таблица должна на­чинаться тегом <table> и завершаться тегом </table>:

<body>

<table>

</table>

</body>

Ячейки таблицы

Теперь приступим к созданию ячеек таблицы. Для начала нужно задать необходи­мое число строк, а затем разделить строки столбцами на ячейки. Количество пар тегов <tr> и </tr> определяет количество горизонтальных строк в таблице. Ко­личество пар тегов <td> и </td>, расположенных между тегами соответствующей строки, определяет количество ячеек (столбцов) в пределах строки:

<body>

<table>

<tr><td> </td><td> </td></tr>

<tr><td> </td><td> </td></tr>

</table>

</body>

Тег <TH> позволяет создать заголовок — специальную ячейку, которая будет вы­деляться полужирным. Для этого текст заголовка помещают внутрь тега <TH>. Например, запись <TH> Текст заголовка </TH> приведет к форматированию текста внутри тега полужирным шрифтом.

Гра­ница таблицы создается при помощи атрибута border тега <table>. Ширина границы указывается в пикселах. Если атрибут border не указан, то таблица вы­водится без видимой рамки. Атрибут bordercolor позволяет задать цвет грани­цы таблицы, указав код цвета. Добавим к уже созданной таблице границу черного цвета шириной пять пикселей. Для этого заменим строку

<table>

на

<table border="5" bordercolor="black">

Ширина таблицы задается атрибутом width тега <table>. Значение можно задавать как в абсолют­ных единицах (width="250"), так и в относитель­ных (width="80%"). Например, задав ширину в 600 пикселов, можно быть уверенным, что таб­лица поместится в окне браузера при любом раз­решении монитора. При относительном указании значения ширина задается в процентах от ширины окна браузера или от ширины ячейки другой таб­лицы, в которую вставлена эта таблица. Таким же образом задается высота таблицы при помощи атрибута height.

<table border="5" bordercolor="black" cellspacing="0" cellpadding="10" width="80%">

Программы для создания Web-страниц

HTML-редакторы

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

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

Notepad++

Notepad++ (рус. Ноутпад плюс плюс) – это бесплатный текстовый редактор для Windows, поддерживающий подсветку синтаксиса большого количества языков программирования и разметки. Базовый набор возможностей программы может быть расширен за счёт многочисленных плагинов или сторонних компонентов, таких как компиляторы и препроцессоры.

Почему именно это редактор стоит скачать? Я вкратце расскажу про его возможности и особенности. Итак, Notepad++ умеет следующее:

  • Подсвечивать несколько десятков наиболее популярных языков программирования и разметки, например, такие как: Ada, Assembler, C, C#, C++, CSS, FORTRAN, HTML, Java, JavaScript, Objective-C, Pascal, Perl, PHP, Python, Ruby, SQL, XML.
  • Для всех этих языков осуществляется подсветка синтаксиса, разбиение кода на строки и блоки, которые можно свернуть нажатием на минус и развернуть, нажав на плюс. А так же пунктиром может отображаться связь между элементами.
  • В этом редакторе очень просто осуществить смену кодировки. Например в UTF 8 без BOM в одно нажатие.
  • В одном окне программы можно открывать на редактирование сколько угодно файлов, так, как Notepad++ использует вкладки на манер тех, к которым все уже успели привыкнуть в современных браузерах.
  • С помощью этого редактора можно вести поиск (Ctrl+F) как по открытому в нем документу, так и по целому сонму текстовых файлов, лежащих в определенной папке. Возможен поиск с заменой и с использование регулярных выражений.
  • В настройках этого редактора можно включить автоматическое прописывание закрывающего Html тега, при наборе открывающего, а так же опцию автозавершения тегов.
  • Notepad++ не только ведет историю всех ваших изменений и позволяет откатиться на сколько угодно шагов назад или вернуться вперед, но и осуществляет резервное хранение копий этих документов на манер того, как это делает Микрософт Ворд.
  • Этот редактор имеет возможность управления горячими клавишами, которых в нем задано великое множество — из верхнего меню «Опции» — «Горячие клавиши». Причем, при двойном щелчке мышью по интересующей вас комбинации откроется окно для переназначений клавиш.
  • Еще этот редактор умеет подключаться к сайту по ФТП, записывать и воспроизводить макросы, осуществлять проверку орфографии на лету, проводить сравнение двух файлов в открытых рядом окнах и многое — многое другое.

Aptana Studio

Редактор Aptana Studio, разработанный студией Aptana Inc. является ведущим редактором HTML с открытым исходным кодом. Этот редактор разработана на платформе Eclipse. Не мало важно что данный редактор поддерживает самые востребованные ОС: Linux, Windows и Mac OS X.

Aptana Studio — это редактор, который предоставляет возможность работать не только с HTML, но и с CSS, JavaScript, PHP, а также практически со всеми JavaScript- библиотеками. Дополнительно можно установить модули с поддержкой языка Python и технологии Ruby on Rails. Редактор имеет встроенный отладчик PHP, документацию по всем технологиям, настраиваемую подсветку кода и многое другое. Aptana Studio содержит встроенный Web-сервер, который позволяет запускать коды на PHP без установки связки программ Apache + PHP.

Так же Aptana Studio 3 может работать с html, css кодом. Стоит написать “</” и программа сама закроет незакрытый тег. Так же подсвечивает синтаксис, я считаю это очень полезная функция именно для новичков. Программа так же работает с Ruby on Rails, Javascript, Python, и так же с поддержкой подсветки синтаксиса. Если допустить ошибку в синтаксисе кода, программа поставит красный крестик напротив номера строки, где допущена ошибка.

Еще среда разработки может запускать скрипты и запускаться в режиме отладки. По умолчанию фон программы стоит темный и сам код в красных тонах, но если вы нажмете на панели инструментов по кнопке «Themes», вы сможете подобрать там удобную для себя тему редактора и консоли. Стоит отметить, что все это совершенно бесплатно. Считаю её очень достойной для начинающего разработчика.

Выводы

В этой курсовой работе мы изучили основы и возможности языка HTML, благодаря которым можно создавать Web – страницы. Познакомились с программным обеспечением для разработки Web – страниц, узнали какие есть преимущества и возможности. Так же узнали что такое WWW ,разобрались как это работает и какое значение имеет в настоящее время.

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

Но для разработчиков и программистов Web – страниц знание HTML все так же важно и служит основой программирования и создания сайтов. Так что HTML спустя много лет остаётся востребованным и актуальным как и раньше.

Основная литература

  1. Ташков Петр Андреевич. Веб-мастеринг на 100 %: HTML, CSS, JavaScript, PHP, CMS, AJAX, раскрутка - СПб.: Питер, 2010. — 512 с.: ил. — (Серия «На 100%»).