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

2.7.1. Создание web-страницы в редакторе FrontPage 2003

Web-страницы или гипертекстовые документы (html-документы) - это текстовые файлы, размеченные тегами (tags) с помощью языка HTML (HyperText Markup Language). HTML не является языком программирования, он является языком разметки или средством форматирования гипертекста. Для разметки документа используются теги. Теги заключаются в угловые скобки. В основном теги являются парными, т.е. существуют открывающий и закрывающий теги.

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

Веб-страница начинается и заканчивается парными тегами и . Между этими тегами размещаются парные теги , (голова веб-страницы), между которыми размещаются парные теги для заголовка web-страницы, а также вводятся различные метатеги для ключевых слов, описания содержания страницы и т.д.

Затем следуют теги , (тело веб-страницы), между этими тегами размещается содержание или контент страницы.

Например, если в редакторе Блокнот или Notepad++ ввести текст, размеченный тегами:


Обучение в интернет


Этот сайт посвящен дистанционному обучению информатике, телекоммуникациям и электронному бизнесу


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


Рис. 1.

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

WWW-страницы могут быть:

  • статическими;
  • динамическими;
  • интерактивные.

Статические страницы - это статические файлы (набор текста, таблиц, рисунков и т.д.), которые создается с помощью языка разметки HTML и имеет расширение.html или.htm.

Динамические веб-страницы - это веб-страницы, сгенерированные или сформированные (созданные) в процессе исполнения запроса пользователя. Эти страницы пишутся на языке PHP, ASP и т.д. и имеют соответственно расширения.php, .aspx. Динамические страницы создаются так называемым движком (Content Managment System – Система Управления Контентом) или специальной программой на сервере, которая по запросам пользователей формирует веб-страницу из данных хранящихся на сервере в базе данных.

Интерактивные веб-страницы - это веб-страницы, которые включают в себя формы (созданные на языках PHP, JavaScript и VBScript и т.д.), с помощью этих форм происходит обмен данными между пользователем и сервером.

Web-страницы создаются с помощью различных html-редакторов: Microsoft FrontPage, Macromedia Dreamweaver, TinyMCE WYSIWYG Editor, FCKeditor, и т.д.

Для того чтобы научиться создавать веб-страницы и сайты, целесообразно использовать редактор на русском языке . В редакторе FrontPage существуют мастера, которые позволяют легко создавать web-сайт, и шаблоны веб-страниц, содержащие разметку (структуру) и дизайн необходимые для быстрого создания web-страниц.

Алгоритм создания веб-страниц в редакторе FrontPage 2003 детально изложен на страничке

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

Что такое HTML и CSS?

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

Эти два языка - HTML и CSS независимы друг от друга и должны таковыми и оставаться. CSS не должен быть написан внутри HTML-документа и наоборот. Как правило, HTML всегда будет представлять содержимое, а CSS всегда будет определять его оформление.

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

Основные термины HTML

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

Элементы

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

до

) и абзацев (определены как

); в список можно включить элементы ,

, , и и многие другие.

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

Теги

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

Открывающий тег отмечает начало элемента. Он состоит из символа <, затем идёт имя элемента и завершается символом >; например,

.

Закрывающий тег отмечает конец элемента. Он состоит из символа < с последующей косой чертой и именем элемента и завершается символом >; например,

.

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

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

...

Атрибуты

Атрибуты являются свойствами, применяемыми для предоставления дополнительной информации об элементе. Наиболее распространённые атрибуты включают в себя атрибут id , который идентифицирует элемент; атрибут class , который классифицирует элемент; атрибут src , который определяет источник встраиваемого содержимого; и атрибут href , который указывает ссылку на связанный ресурс.

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

Shay Howe

Демонстрация основных терминов HTML

Данный код будет отображать текст «Shay Howe» на веб-странице и при щелчке на этот текст ведёт пользователя на http://shayhowe.com. Элемент ссылки объявлен с помощью открывающего тега и закрывающего тега охватывающих текст, а также атрибута и значения адреса ссылки объявленной через href="http://shayhowe.com" в открывающем теге.

Рис. 1.01. Синтаксис HTML в виде схемы включает элемент, атрибут и тег

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

Настройка структуры документа HTML

HTML-документы представляют собой простые текстовые документы, сохранённые с расширением.html, а не.txt. Чтобы начать писать HTML вначале нужен текстовый редактор, который вам удобен в использовании. К сожалению, сюда не входит Microsoft Word или Pages, поскольку это сложные редакторы. Двумя наиболее популярными текстовыми редакторами для написания HTML и CSS являются Dreamweaver и Sublime Text. Бесплатные альтернативы также Notepad++ для Windows и TextWrangler для Mac.

Все HTML-документы содержат обязательную структуру, которая включает следующие декларации и элементы: , , и .

Объявление типа документа или находится в самом начале HTML-документа и сообщает браузерам, какая версия HTML применяется. Поскольку мы будем использовать последнюю версию HTML, наш тип документа будет просто . После этого идёт элемент означающий начало документа.

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

Всё видимое содержимое веб-страницы будет находиться в элементе . Структура типичного HTML-документа выглядит следующим образом:

Привет, мир!

Привет, мир!

Это веб-страница.

Демонстрация структуры HTML-документа

Этот код показывает документ, начиная с объявления типа документа, , затем сразу идёт элемент . Внутри идут элементы и . Элемент содержит кодировку страницы через тег и название документа через элемент . Элемент <body> включает в себя заголовок через элемент <h1> и абзац текста через <р> . Поскольку и заголовок и абзац вложены в элемент <body> , они видны на веб-странице.</p><p>Когда элемент находится внутри другого элемента, известный также как вложенный, хорошей идеей будет добавить к нему отступ, чтобы сохранить структуру документа хорошо организованной и читабельной. В предыдущем коде оба элемента <head> и <body> вложены и сдвинуты внутри элемента <html> . Структура отступов для элементов продолжается с новыми добавленными элементами внутри <head> и <body> .</p><h3>Самозакрывающиеся элементы</h3><p>В предыдущем примере элемент <meta> был единственным тегом, который не включал закрывающий тег. Не переживайте, это было сделано намеренно. Не все элементы состоят из открывающих и закрывающих тегов. Некоторые элементы просто получают содержимое или поведение через атрибуты в пределах одного тега. <meta> является одним из таких элементов. Содержимое элемента <meta> в примере присваивается с помощью атрибута charset и значения. К другим типичным самозакрывающимся элементам относятся:</p><ul><li><br> </li><li><embed> </li><li><hr> </li><li><img> </li><li><input> </li><li><li><meta> </li><li><param> </li><li><source> </li><li><wbr> </li> </ul><p>Приведённая структура, сделанная с помощью объявления типа документа <!DOCTYPE html> и элементов <html> , <head> и <body> , является довольно распространённой. Мы хотим сохранить эту структуру документа удобной, поскольку будем часто её применять при создании новых HTML-документов.</p><h3>Валидация кода</h3><p>Независимо от того, насколько аккуратно мы пишем наш код, ошибки неизбежны. К счастью, при написании HTML и CSS у нас есть валидаторы для проверки нашей работы. W3C предлагает валидаторы HTML и CSS , которые сканируют код на ошибки. Проверка нашего кода не только помогает правильно отображать его во всех браузерах, но и помогает обучению передовому опыту при написании кода.</p><h2>На практике</h2><p>В качестве веб-дизайнеров и фронтенд-разработчиков мы можем позволить себе роскошь посещать ряд замечательных конференций, посвящённых нашему ремеслу. Мы собираемся организовать собственную конференцию Styles Conference и создать для неё сайт на протяжении следующих уроков. Вот так!</p><br><img src='https://i0.wp.com/webref.ru/assets/images/learn-html-css/practice-1.png' width="100%" loading=lazy><p>Давайте переключимся немного, отойдя от HTML и взглянем на CSS. Помните, HTML определяет содержимое и структуру наших веб-страниц, в то время как CSS определяет их визуальный стиль и внешний вид.</p><h2>Основные термины CSS</h2><p>В дополнение к терминам HTML есть и несколько основных терминов CSS, с которыми вам нужно будет ознакомиться. Эти термины включают селекторы, свойства и значения. Как и с терминологией HTML, чем больше вы работаете с CSS, тем больше эти термины становятся вашей второй натурой.</p><h3>Селекторы</h3><p>При добавлении элементов на веб-страницу они могут быть оформлены с <a href="/internet/prozrachnost-fona-css-prozrachnyi-fon-ili-tekst-s-pomoshchyu-css-sposoby.html">помощью CSS</a>. Селектор определяет, на какой именно элемент или элементы в HTML нацелиться и применить к ним стили (такие как цвет, размер и положение). Селекторы могут включать в себя комбинацию различных показателей для выбора уникальных элементов, в зависимости от того, насколько конкретными мы желаем быть. Например, мы хотим выбрать каждый абзац на странице или выбрать только один конкретный абзац.</p><p>Селекторы, как правило, связаны со значением атрибута, вроде значения id или class или именем элемента, вроде <h1> или <р> .</p><p>В CSS селекторы сочетаются с фигурными скобками {}, которые охватывают стили, применяемые к выбранному элементу. Этот селектор нацелен на все элементы <span><p>P { ... } </p><h3>Свойства</h3><p>Как только элемент выбран, свойство определяет стили, которые будут к нему применены. Имена свойств идут после селектора, внутри фигурных скобок {} и непосредственно перед двоеточием. Существует множество свойств, которые мы можем использовать, такие как background , color , font-size , height и width и другие часто добавляемые свойства. В следующем коде мы определяем <a href="/monitors/cvet-shrifta-html-font-family-font-size-color-i-drugie-svoistva-css-dlya-zadaniya-parametrov-shrifta.html">свойства color</a> и font-size , применяемые ко всем элементам <span><p>P { color: ...; font-size: ...; } </p><h3>Значения</h3><p>Пока мы только выбрали элемент через селектор и определили, какой стиль через свойства мы хотели бы к нему применить. Теперь мы можем задать поведение этого свойства через значение. Значения могут быть определены как текст между двоеточием и точкой с запятой. Ниже мы выбираем все элементы <p >И устанавливаем значение свойства color как orange , а значение свойства font-size как 16 пикселей.</p><p>P { color: orange; font-size: 16px; } </p><p>Для проверки, в CSS наш набор правил начинается с селектора, затем сразу же идут фигурные скобки. В этих фигурных скобках располагаются объявления, состоящие из пар свойств и значений. Каждое объявление начинается со свойства, за которым следует двоеточие, значение свойства и, наконец, точка с запятой.</p><p>Распространённой практикой является сдвиг пары свойств и значений внутри фигурных скобок. Как и с HTML, отступы помогают держать наш код организованным и понятным.</p><p><img src='https://i1.wp.com/webref.ru/assets/images/learn-html-css/css-syntax-outline.png' height="138" width="257" loading=lazy></p><p>Рис. 1.03. Структура синтаксиса CSS включает селектор, свойства и значения</p><p>Знание нескольких основных терминов и общего синтаксиса CSS - это отличный старт, но у нас есть еще несколько пунктов для изучения, прежде чем мы прыгнем в глубину. В частности, мы должны внимательнее рассмотреть, как селекторы работают в CSS.</p><h2>Работа с селекторами</h2><p>Селекторы, как уже упоминалось ранее, указывают, какие элементы HTML будут стилизованы. Важно полностью понимать как использовать селекторы и как они действуют. Первым шагом должно стать знакомство с различными типами селекторов. Мы начнём с самых основных селекторов: селекторы типа, классы и идентификаторы.</p><h3>Селекторы типа</h3><p>Селекторы типа нацелены на элементы по их типу. Например, если мы хотим ориентироваться на все элементы <div> мы должны использовать селектор div . Следующий код показывает селектор типа для элементов <div> , а также соответствующий HTML.</p><p>Div { ... } </p><p> <div>...</div> <div>...</div> </p><h3>Классы</h3><p>Классы позволяют выбрать элемент на основе значения атрибута class . Селекторы классов немного более конкретны, чем селекторы типа, так как они выбирают определённую группу элементов, а не все элементы одного типа.</p><p>Классы позволяют применять одинаковые стили сразу к разным элементам, используя то же значение атрибута class для нескольких элементов.</p><p>В CSS классы обозначаются с точкой впереди, за которой следует значение атрибута класса. Ниже селектор класса выбирает все элементы, содержащие значение awesome атрибута class , включая элементы <div> и <span><p>Awesome { ... } </p><p> <div class="awesome">...</div> </p><h3>Идентификаторы</h3><p>Идентификаторы ещё точнее, чем классы, так как они нацелены только на один уникальный элемент за раз. Подобно тому, как селекторы классов используют значение атрибута class , идентификаторы используют значение атрибута id в качестве селектора.</p><p>Независимо от типа отображаемого элемента, значение атрибута id может быть использовано только один раз на странице. Если id присутствуют, то они должны быть зарезервированы для важных элементов.</p><p>В CSS идентификаторы обозначаются с символом решётки впереди, после чего идёт значение атрибута id . Здесь идентификатор выберет только элемент, содержащий атрибут id со значением shayhowe .</p><p> #shayhowe { ... } </p><p> <div id="shayhowe">...</div> </p><h3>Дополнительные селекторы</h3><p>Селекторы чрезвычайно мощная штука и описанные выше относятся к наиболее распространённым селекторам, которые нам попадаются. Эти селекторы только начало. Существует много продвинутых селекторов и они легко доступны. Когда освоитесь с ними, не бойтесь посмотреть и некоторые более прогрессивные.</p><p>Ладно, начинаем собирать всё вместе. Мы добавляем элементы на страницу внутри нашего HTML, затем можем выбрать эти элементы и применить к ним стили с помощью CSS. Теперь давайте соединим точки между HTML и CSS, чтобы эти два языка работали вместе.</p><h2>Подключение CSS</h2><p>Чтобы заставить наш CSS говорить с нашим HTML мы должны указать на CSS-файл из HTML. Хорошей практикой является включение всех наших стилей в одном внешнем файле, на который есть указатель внутри элемента <head> нашего HTML-документа. Использование одного внешнего CSS позволяет нам применять одни и те же стили по всему сайту и быстро вносить в него изменения.</p><h3>Другие варианты добавления CSS</h3><p>Другие варианты подключения CSS включают в себя использование внутренних и встроенных стилей. Вы можете встретить эти варианты в реальности, но они, как правило, не одобряются, так как делают обновление сайтов громоздким и неповоротливым.</p><p>Для создания нашей внешней таблицы стилей мы снова хотим использовать выбранный текстовый редактор, чтобы создать новый <a href="/printers/fail-xl-skachat-prilozhenie-microsoft-excel-eksel-formaty-tekstovyh.html">текстовый файл</a> с расширением.css. Наш CSS-файл должен быть сохранён в той же папке или подпапке, где находится и наш HTML-файл.</p><p>Внутри элемента <head> применяется элемент <link> , который определяет отношения между HTML и CSS-файлами. Поскольку мы связываем с CSS, то используем атрибут rel со значением stylesheet для указания их отношений. Кроме того, атрибут href применяется для указания местоположения или пути к CSS-файлу.</p><p>В следующем примере HTML-документа элемент <head> указывает на внешний стилевой файл.</p><p> <head> <link rel="stylesheet" href="main.css"> </head> </p><p>Чтобы CSS отображался правильно, значение пути атрибута href должно напрямую совпадать с тем, где сохранён CSS-файл. В предыдущем примере файл main.css хранится в том же месте, что и HTML-файл, известном также как корневая папка.</p><p>Если CSS-файл располагается в подпапке, то значение атрибута href должно, соответственно, соотноситься с этим путём. Например, если наш файл main.css был сохранён в подпапке с именем stylesheets, то значеним атрибута href будет stylesheets/main.css . Здесь используется косая черта (или слэш), чтобы указать перемещение в подпапку.</p><p>На <a href="/operators/nevozmozhno-vypolnit-zapros-v-dannyi-moment-apple-podvodnye-kamni-pri.html">данный момент</a> наши страницы начинают оживать, медленно, но верно. Мы пока не вникали в CSS слишком глубоко, но вы, возможно, заметили, что у некоторых элементов есть стили, которые мы не объявляли в нашем CSS. Это браузер навязывает свои собственные предпочтительные стили для этих элементов. К счастью, мы можем переписать эти стили достаточно легко, что мы и сделаем дальше с помощью сброса CSS.</p><h2>Использование сброса CSS</h2><p>Каждый браузер имеет свои собственные стили по умолчанию для различных элементов. То, как <a href="/different/kak-izmenit-domashnyuyu-i-startovuyu-stranicu-v-google-chrome-kak-izmenit.html">Google Chrome</a> отображает заголовки, абзацы, списки и так далее, может отличаться от того, как это делает <a href="/windows/protokoly-ssl-i-tls-vklyucheny-protokol-tls-v-internet-explorer-podtverzhdenie-svyazi-s-autentifikacie.html">Internet Explorer</a>. Для обеспечения совместимости с разными браузерами стал широко использоваться сброс CSS.</p><p>Сброс CSS берёт все основные элементы HTML с заданным стилем и обеспечивает единый стиль для всех браузеров. Эти сбросы обычно включают в себя удаление размеров, отступов, полей или дополнительные стили понижающие эти значения. Поскольку каскадирование CSS работает сверху вниз (скоро об этом узнаете) - наш сброс должен быть в самом верху нашего стиля. Это гарантирует, что эти стили прочитаются первыми и все <a href="/pendrive-and-hdd/chistim-kesh-pamyat-kompyutera-v-raznyh-brauzerah-dlya-chego-voobshche-nuzhen-kesh.html">разные браузеры</a> станут работать с общей точки отсчёта.</p><p>Есть куча разных сбросов CSS доступных для применения, у всех них есть свои сильные стороны. Один из самых популярных от Эрика Мейера , его сброс CSS адаптирован для включения новых элементов HTML5.</p><p>Если вы чувствуете себя немного авантюристом, есть также Normalize.css , созданный Николасом Галлахером. Normalize.css фокусируется не на использовании жёсткого сброса для всех основных элементов, но вместо этого на установлении общих стилей для этих элементов. Это требует более глубокого понимания CSS, а также знания того, что вы хотели бы получить от стилей.</p><h3>Кроссбраузерность и тестирование</h3><p>Как упоминалось ранее, разные браузеры отображают элементы по-своему. Важно признать значение кроссбраузерности и тестирования. Сайты не должны выглядеть исключительно одинаково во всех браузерах, но должны быть близки. Какие браузеры вы хотите поддерживать и в какой степени - это решение вы должны будете сделать на основе того, что лучше для вашего сайта.</p><p>Существует несколько вещей, на которые следует обращать внимание при написании CSS. Хорошей новостью является то, что это всё по силам и нужно немного терпения чтобы это освоить.</p><h2>На практике</h2><p>Вернёмся назад, где мы в последний раз остановились на нашем сайте конференции и посмотрим, как мы можем добавить немного CSS.</p><ol><li>Внутри нашей папки styles-conference давайте создадим <a href="/internet/sozdat-novuyu-papku-na-telefone-sozdanie-papki-na-android-ispolzovanie.html">новую папку</a> с именем assets. В ней мы будет хранить все ресурсы для нашего веб-сайта, такие как стили, изображения, видео и т. д. Для наших стилей пойдём дальше и добавим ещё одну папку stylesheets внутри папки assets.</li><li>Используя текстовый редактор создадим новый файл с именем main.css и сохраним его в папке stylesheets, которую мы только что создали.</li><p>Просматривая файл index.html в браузере мы можем видеть, что элементы <h1> и <p>Уже содержат стиль по умолчанию. В частности, у них задан уникальный размер шрифта и пространство вокруг них. Используя сброс Эрика Мейера мы можем смягчить эти стили, что позволит каждому из них начинать с одинаковой базы. Для этого загляните на его сайт , скопируйте код и вставьте его в верхней части нашего файла main.css.</p><p> /* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; }</p><li>Наш файл main.css начинает принимать форму, так что подключим его к файлу index.html. Откройте index.html в текстовом редакторе и добавьте элемент <link> в <head> , сразу после элемента <title> .</li><li>Поскольку мы указываем на стили через элемент <link> добавьте атрибут rel со значением stylesheet .</li><p>Мы также включим ссылку на наш файл main.css используя атрибут href . Помните, наш файл main.css сохранён в папке stylesheets, который находится внутри папки assets. Таким образом, значение атрибута href , который является путём к нашему файлу main.css, должно быть assets/stylesheets/main.css .</p><p> <head> <meta charset="utf-8"> <title>Styles Conference

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

Рис. 1.04. Наш сайт Styles Conference со сбросом CSS

Демонстрация и исходный код

Ниже вы можете просмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.

Резюме

Итак, всё хорошо! Мы сделали несколько больших шагов в этом уроке.

Подумать только, теперь вы знаете основы HTML и CSS. Поскольку мы продолжим и вы потратите больше времени на написание HTML и CSS, вам станет гораздо комфортнее работать с этими двумя языками.

Напомним, что мы рассмотрели следующее:

  • Разница между HTML и CSS.
  • Знакомство с элементами HTML, тегами и атрибутами.
  • Настройка структуры вашей первой веб-страницы.
  • Знакомство с селекторами CSS, свойствами и значениями.
  • Работа с селекторами CSS.
  • Указатель на CSS из HTML.
  • Важность CSS сброса.

Теперь давайте поближе рассмотрим HTML и познакомимся немного с семантикой.

Ресурсы и ссылки

  • Common HTML terms via Scripting Master
  • CSS Terms & Definitions via Impressive Webs
  • CSS Tools: Reset CSS via Eric Meyer

Введение

1. Основные сведения

1.1 О языке html

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

1.3 Основные положения

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

1.5 Тэги тела документа

1.6 Список базовых тэгов html

2. Дополнительные сведения

2.1 Тэги списков

2.3 Графика внутри документа

2.4 Добавление стилей в документ

2.5 Специальные тэги html

2.6 Html формы

2.7 Html фреймы

2.8 Html таблицы

2.9 Оптимизация графики для web

2.10 Основы css

3. Описание создания сайта

3.1 Подготовка

3.2 Создание главной страницы

3.3 Создание второй страницы

3.4 Создание страницы с описанием города

3.5 Страница с фотографиями

3.6 Страница с программами

3.7 Страница с благодарностями

Заключение

Список использованной литературы

Введение

Эта дипломная работа посвящена языку HTML. С помощью этого языка создаются файлы с расширением *.htmи *.html, являющиеся Web-страницами. Из них состоят сайты сети Интернет.

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

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

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

1.1 О языке HTML

Hyper Text Markup Language (HTML) является стандартным языком, предназначенным для создания гипертекстовых документов в среде WEB. HTML-документы могут просматриваться различными типами WEB-броузеров. Когда документ создан с использованием HTML, WEB-броузер может интерпретировать HTML для выделения различных элементов документа и первичной их обработки. Использование HTML позволяет форматировать документы для их представления с использованием шрифтов, линий и других графических элементов на любой системе, их просматривающей.

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

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

HTML-тэги могут быть условно разделены на две категории:

1. Тэги, определяющие, как будет отображаться WEB-броузером тело документа в целом.

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

Запомните, что основное преимущество HTML заключается в том, что ваш документ может быть просмотрен на WEB-броузерах различных типов и на различных платформах.

1.2 Создание Webсайта

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

Например, HTML редакторы, такие, как "Netscape Navigator Gold" компании Netscape, позволяют создавать документы графически с использованием технологии WYSIWYG (What You See Is What You Get). С другой стороны, большинство традиционных средств для создания документов имеют конвертеры, позволяющие преобразовывать документы к формату HTML.

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

Заголовок документа

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

Некоторые тэги, такие, как

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

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

Заголовок документа

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

И
. Более подробно о тэгах 
Будет написано ниже.
 
Когда WEB-броузер получает документ, он определяет, как документ должен быть интерпретирован. Самый первый тэг, который встречается в документе, должен быть тэгом . Данный тэг сообщает WEB-броузеру, что ваш документ написан с использованием HTML. Минимальный HTML-документ будет выглядеть так:
 
Тело документа...
 
Заголовочная часть документа . Тэг заголовочной части документа должен быть использован сразу после тэга  и более нигде в теле документа. Данный тэг представляет собой общее описание документа. Избегайте размещать какой-либо текст внутри тэга . Стартовый тэг  помещается непосредственно перед тэгом  и другими тэгами, описывающими документ, а завершающий тэг </HEAD> размещается сразу после окончания описания документа. Например:</p> <p><TITLE>Список сотрудников
 
Внимание! Технически, стартовые и завершающие тэги типа ,  и  необязательны. Но настоятельно рекомендуется их использовать, поскольку использование данных тэгов позволяет WEB-броузеру уверенно разделить заголовочную часть документа и непосредственно смысловую часть.
 
Заголовок документа . Большинство WEB-броузеров отображают содержимое тэга <TITLE> в заголовке окна, содержащего документ и в файле закладок, если он поддерживается WEB-броузером. Заголовок, ограниченный тэгами <TITLE> и , размещается внутри -тэгов, как показано выше на примере. Заголовок документа не появляется при отображении самого документа в окне.


МИНИСТЕРСТВО ОБРАЗОВАНИЯ МОСКОВСКОЙ ОБЛАСТИ


 
ГБПОУ МО «ПАВЛОВО-ПОСАДСКИЙ ТЕХНИКУМ»


 
 
ПО ВЫПОЛНЕНИЮ КУРСОВОЙ РАБОТЫ


 
По дисциплине


 
«Курсовая на тему Web-Дизайн и программы для создания web-страниц»


 
По специальности 230701


 
«Прикладная информатика в экономике» 4 курс


 
Преподаватель: Г.Е

 
Рассмотрен цикловой методической комиссией

 
Социально-экономического профиля

 
Протокол№от «»20г.

 
Предсидатель цикловой комиссии Мишина Е.Н.


 
2016-2017 уч. год

 
Введение

 
1. World Wide Web3

 
1.1. Распространение World Wide Web в Internet. 5

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

 
2.1. Язык HTML 5

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

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

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

 
3.1 HTML-редакторы8

 
3.2 Графические редакторы13

 
3.3 Технология Flesh13

 
4. Создание WEB-страниц в WORD12

 
4.1 Способы создания WEB-страниц в WORD12

 
4.2 Создание маркированных и нумерованных списков13

 
4.3 Горизонтальные линии13

 
4.4 Добавление фона13

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

 
4.6 Работа с рисунками13

 
4.7 Создание гиперссылок14

 
4.8 Вставка видеозаписи в Web-страницу14

 
Список используемой литературы16

 
1. World Wide Web
 – глобальная компьютерная сеть на сегодняшний день содержит миллионы сайтов, на которых размещена всевозможная информация. Люди получают доступ к этой информации посредством использования технологии Internet. Для навигации в WWW используются специальные программы – Web-браузеры, которые существенно облегчают путешествие по бескрайним просторам WWW. Вся информация в Web-браузере отображается в виде Web-страниц, которые являются основным элементом байтов WWW.

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

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

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

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

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

 
1.1. Распространение World Wide Web в Internet
.

 
Internet - это самая большая мировая компьютерная сеть. Теперь Internet имеет приблизительно 150 миллионов пользователей более чем в 50 странах. WWW доступен в основном через Internet; но говоря WWW и Internet мы подразумеваем не одно и то же. WWW можно отнести к внутреннему содержанию, то есть это какой-либо абстрактный мир знаний, в то время как Internet является внешней стороной глобальной сети в виде огромного количества кабелей и компьютеров.

 
Так что же такое World Wide Web, или, как говорят в просторечии, WWW, the Web, или еще более простое - 3W? WWW - это распределенная информационная система мультимедиа, основанная на гипертексте. Давайте разберем это определение по порядку.

 
Распределенная информационная система: информация сохраняется на великом множестве так называемых WWW-серверов (servers). То есть компьютеров, на которые установленное специальное программное обеспечение, которое объединенные в сеть Internet. Пользователи, которые имеют доступ к сети, получают эту информацию с помощью программ-клиентов, программ просмотра WWW-документов. При этом программа просмотра посылает по компьютерной сети запрос серверу, который сохраняет файл с необходимым документом. В ответ на запрос сервер высылает программе просмотра этот необходимый файл или сообщение об отказе, если файл по тем или иным причинам недоступен. Взаимодействие клиент-сервер происходит по определенным правилам, или, как говорят иначе, протоколам. Протокол, принятый в WWW, называется HyperText Transfer Protocol, сокращенно - HTTP.

 
Мультимедиа: информация включает в себя не только текст, но и двух- и трехмерную графику, видео и звук.

 
Гипертекст: информация в WWW представляется в виде документов, любой из которых может содержать как внутренние перекрестные ссылки, так и ссылку на другие документы, которые сохраняются на том же самом или на любом другом сервере.

 
Такие ссылки называют гиперссылками или гиперсвязями. На экране компьютера в окне программы просмотра ссылки выглядят как выделенные каким-нибудь образом (например, другим цветом и/или подчеркиванием) участка текста или графики. Выбирая гиперссылки, пользователь программы просмотра может быстро перемещаться от одной части документа к другой, или же от одного документа к другому. При необходимости программа просмотра автоматически связывается с соответствующим сервером в сети и запрашивает документ, на который сделана ссылка. Кстати, идея гипертекстового представления информации должна уже быть хорошо знакома пользователям разных версий системы Microsoft Windows. Именно по этому принципу построена в Windows система подсказок (Help), с той лишь разницей, что гипертекстовая система подсказок Windows не является распределенной.

 
Итак, Web-страница может содержать стилизованный и форматованый текст, графику и гиперсвязи с разными ресурсами Internet. Чтобы реализовать все эти возможности, был разработанный специальный язык, названная HyperText Markup Language (HTML), то есть, Язык Разметки Гипертекста. Документ, написанный на HTML, представляет собой текстовый файл, который содержит собственно текст, несущий информацию читателю, и флаги разметки. Последние представляют собой определенные последовательности символов, которые являются инструкциями для программы Просмотра; в соответствии с этими инструкциями программа располагает текст на экране, включает в него рисунки, которые сохраняются в отдельных графических файлах, и формирует гиперсвязи с другими документами или ресурсами Internet. Таким образом, файл на языке HTML приобретает вид WWW-документа только тогда, когда он интерпретируется программой просмотра. О языке HTML будет детально рассказано в следующем разделе, поскольку без знания основ этого языка невозможно создать Web-страницу для публикации в WWW.

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


 
Язык HTML


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

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

 
Язык HTML существует в нескольких вариантах и продолжает развиваться, но конструкции HTML скорее всего будут использоваться и в дальнейшем. Изучая HTML и познавая его глубже, создавая документ в начале изучения HTML и расширяя его насколько это возможно, мы имеем возможность создавать Web-страницы, которые могут быть просмотрены многими браузерами Web, как сейчас, так и в будущем. Это не исключает возможности использования других методов, например, метод расширенных возможностей, который предоставляется Netscape Navigator, Internet Explorer или некоторыми другими программами.

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

 
HTML был ратифицирован World Wide Web Consortium. Он поддерживается несколькими широко распространенными браузерами, и, возможно, станет основанием почти всего программного обеспечения, которое имеет отношение к Web.

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


 
Поскольку HTML-документы записываются в ASCII-формате, то для ее создания может использован любой текстовый редактор.

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

 
В HTML документе стартовым тегом является тег , а завершающим - .

 
Завершающий тег отличатся от стартового лишь тем, что у него перед текстом в скобках стоит символ "/" (слеш).

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

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

 
и . Пара этих тегов сообщает программе просмотра (браузеру) что между ними заключен документ в формате HTML, причем первым тегом в документе должен быть тег (в самом начале документа), а последним - (в самом конце документа).

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

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

 
Моя первая страница

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

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

 
Моя первая страница......................................

 
Теперь мы можем написать HTML-код нашей странички:

 
Моя первая страница! 

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


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

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

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

 
(англ. paragraph - абзац). Этот тег, кроме начала новой строки, вставляет одну пустую строку. Внутри скобок тега кроме его названия могут размещаться также атрибуты (англ. atributes - атрибуты). Они отделяются от названия и между собой пробелами (одним или несколькими), а пишутся в виде имя атрибута="значение". Если значение не содержит пробелов, то кавычки могут быть опущены, но так делать не рекомендуется. Тег

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

 
Теперь мы можем поместить на нашу Web-страницу некоторый текст с различным выравниванием:

 
Моя первая страница

 
Здесь будут мои личные страницы!

 
На них Вы сможете найти:- рассказ обо мне и о моих увлечениях;- мои фотографии.

 
С одной из моих страниц можно будет отправить мне электронное письмо.

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

 
Например:

 
Это текст написан в две строки.

 
В HTML-документе, кроме текста, могут содержаться горизонтальные разделительные линии. Они, как и текст, не требуют никаких внешних файлов. Тег выведет горизонтальную линию единичной толщины вдоль всей ширины страницы. Горизонтальная разделительная линия всегда приводит к разрыву строки, но пустых строк между линией и текстом не появляется. Тег может содержать несколько атрибутов. и дают контурную линию с трехмерным эффектом углубления. дает сплошную черную линию. Линия может не простираться во всю ширину страницы, а составлять лишь некоторую часть. Атрибут WIDTH задает ширину линии, в процентах от ширины всей страницы или в пикселах. Например, 50% - половина ширины страницы, 400 - ширина в 400 пикселов. Атрибут ALIGN может принимать значения, аналогичные его значениям для тега, но выравнивание по умолчанию - по центру. Атрибут SIZE задает толщину линии в пикселах от 1 до 175; по умолчанию 1, но если, (линия - контурная), то добавляется толщина, необходимая для трехмерного эффекта углубления. Линии, наряду с абзацами, позволяют выделить логические фрагменты текста. Но большое количество горизонтальных линий неприятно для посетителя вашей Веб-страницы, поэтому после каждого абзаца их ставить не следует. Они больше подходят для выделения целых разделов.


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


Какие языки нужно знать, чтобы создавать сайты?


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


  • серверная платформа;
    • 
 
  • серверное ПО;
    • 
 
  • наличие опыта в создании сайтов;
    • 
 
  • выбранная база данных.
    • 

Наиболее популярные языки



 Сайты

 
 Популярность

 (уникальные посетители в месяц)

 
 Front-end

 (Клиентский)

 
 Back-end

 (Серверный)

 
 База данных



 Google.com

 
 1,600,000,000

 
 
 C, C++, Go, Java, Python

 
 BigTable, MariaDB



 Facebook.com

 
 1,100,000,000

 
 
 Hack, PHP (HHVM), Python, C++, Java, Erlang, D, Xhp,Haskell

 
 MariaDB, MySQL,HBase Cassandra



 YouTube.com

 
 1,100,000,000

 
 
 C, C++, Python, Java, Go

 
 Vitess, BigTable, MariaDB



 Yahoo

 
 750,000,000

 
 
 PHP

 
 MySQL, PostgreSQL,VB.NET



 Amazon.com

 
 500,000,000

 
 
 Java, C++, Perl

 
 Oracle Database



 Wikipedia.org

 
 475,000,000

 
 
 PHP, Hack

 
 MySQL, MariaDB



 Twitter.com

 
 290,000,000

 
 
 C++, Java, Scala, Ruby

 
 MySQL



 Bing

 
 285,000,000

 
 
 ASP.NET

 
 Microsoft SQL Server



 eBay.com

 
 285,000,000

 
 
 Java, JavaScript, Scala

 
 Oracle Database



 MSN.com

 
 280,000,000

 
 
 ASP.NET

 
 Microsoft SQL Server



 Microsoft

 
 270,000,000

 
 
 ASP.NET

 
 Microsoft SQL Server



 Linkedin.com

 
 260,000,000

 
 
 Java, JavaScript, Scala

 
 Voldemort



 Pinterest

 
 250,000,000

 
 
 Django, Erlang

 
 MySQL, Redis



 WordPress.com

 
 240,000,000

 
 
 PHP, JavaScript (Node.js)

 
 MariaDB, MySQL


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




Python. На русском его часто называют «питон». Это высокоуровневый язык, используемый для общих задач, чаще всего — для выполнения задач сервером. Его ориентир — повышение производительности программиста и читаемости кода. При помощи языка можно выполнять резервное копирование многих парадигм программирования. Питон отлично работает на серверах Windows и Linux.


Ruby. На русском часто его называют «руби». Это динамический, рефлективный и высокоуровневый язык для ООП (объектно-ориентированного программирования). Он дает возможность реализовать многопоточность на любой ОС, отличается строгой типизацией динамического вида, и обладает рядом других опций. По характеристикам синтаксиса Руби ближе всего к аналогам Eiffel и Perl. Кроме того, отдельные детали позаимствованы из Python.


ASP. Этот язык разработан корпорацией Microsoft. С использованием этой технологии можно разрабатывать приложения для www.asp. Платформы для работы языка следующие: Internet Information Server (IIS) и Windows NT. ASP довольно сложно назвать непосредственно языком, это скорее технология для подсоединения программы к интернет-странице. Все достоинства ASP — в простом скриптовом языке и возможностях применения сторонних СОМ-элементов.




JavaScript. Принцип «яваскрипт» немного отличается от прочих языков программирования. Его главное отличие состоит в прямом подключении к HTML-файлу. Сценарий, созданный на базе JavaScript, обрабатывается интерпретатором, который встроен в браузер. Этот язык используется для большого спектра задач: создание динамических страниц (контент на них может меняться по загрузки документа);


Решение местных задач; проверка правильности заполнения форм до их отправления на сервер.


Большие возможности языка объясняются его популярностью. Так, с помощью JavaScript можно:


  • изменять содержимое страницы: дописывать или убирать текст, менять стили и теги;
    • 
 
  • реагировать на какие-то события (например, на щелчок мыши) и выполнять заданную функцию;
    • 
 
  • отображать сообщения, ставить и считывать cookies, проверять правильность введенных данных;
    • 
 
  • загружать новые данные без перезагрузки документа, и пр.
    • 

Perl. Первое время этот язык использовался для соединения программ, которые выполняли разные задачи, в единый сценарий для решения целого комплекса задач: обработки текста, администрирования и пр. Сегодня же Перл используется в основном для разработки приложений CGI. Он помогает администрировать сервера и прочие системы. Благодаря простоте и скорости написания сценария на Перле, его адаптировали ко всем популярным платформам, включая Mac и Windows. Perl имеет открытый исходный код, абсолютно бесплатный.


Нужно ли много знаний?



Базовые знания по программированию вcе приобретают на уроках информатики в школе. Работать на начальном уровне с Паскаль и Делфи приходилось фактически каждому. Но другие, более сложные языки программирования, требуют другого, более комплексного и серьезного подхода. Первое, что нужно для успешного программиста — математический, логический склад ума и желание совершенствоваться в своем деле. При этом не стоит пытаться выучить сразу все языки. Лучше хорошо освоить один, чем иметь отрывочные знания о пяти языках. Все языки имеют схожие принципы, они все строятся на логике действий, поэтому со временем, с каждым новым языком учить его все проще. Копировать или менять чужой код могут многие, но писать свой код, стать настоящим «художником» способен далеко не каждый.