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

Основы программирования на языке HTML (Основные сведения о языке программирования)

Содержание:

Введение

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

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

- Раскрыть основные сведения о языке;

- Рассмотреть процесс создания сайта;

- Создать веб-сайт на основе разработанного алгоритма.

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

1. Основные сведения о языке программирования

1.1 О языке html

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

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

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

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

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

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

Большинство средств для создания документов имеют конвертеры, позволяющие преобразовывать документы к формату HTML.

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

Все тэги HTML начинаются с символа "<" и заканчиваются символом ">". Существует стартовый тэг и завершающий тэг. Например: <TITLE>Заголовок</TITLE> или <title>Заголовок</title>.

Завершающий тэг выглядит как и стартовый, только перед текстом внутри угловых скобок устанавливается слэш. Тэг <TITLE> сообщает веб-браузеру об использовании заголовка, а тэг </TITLE> - о его завершении.

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

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

1.4 Структура веб-страницы

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

Заголовочная часть <HEAD> должен быть использован сразу после тэга <HTML>. Он представляет собой общее описание документа. Стартовый тэг <HEAD> помещается перед тэгом <TITLE> и другими тэгами, описывающими документ, а завершающий тэг </HEAD> размещается после окончания описания документа. Например:

<HTML>

<HEAD>

<TITLE>Заголовок</TITLE>

</HEAD>

Заголовок документа <TITLE> отображают содержимое тэга <TITLE> в заголовке окна, содержащего документ и в файле закладок, если он поддерживается WEB-браузером. Заголовок, ограниченный тэгами <TITLE> и </TITLE>, размещается внутри тэга <HEAD> и не появляется при отображении самого документа в окне. После заголовочной части идет тело документа <BODY>. Это та часть веб сайта, которая отображает все его внутреннее содержимое.

1.5 Тэги тела веб-страницы

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

Уровни заголовков <H1>...<H6>. Текст структурно делится на просто текст, заголовки различных уровней. Первый уровень заголовков самый большой, обозначается цифрой 1, а следующий - 2, и т.д. Синтаксис заголовка уровня 1 следующий:

<H1> Заголовок первого уровня </H1>

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

Дополнительные параметры тэга <P>:

<P ALIGN=left|center|right>, позволяют выравнивать абзац по левому краю, центру и правому краю соответственно.

Центрирование элементов веб-страницы осуществляется тэгом <CENTER>. Все элементы между тэгами <CENTER> и </CENTER> будут находиться в центре окна.

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

Использование тэгов, определяющих формат абзаца, таких как <H1>..<H6> или <ADDRESS>, будет игнорироваться браузером при помещении их между тэгами <PRE> и </PRE>.

Разрыв строки <BR> указывает браузеру о разрыве строки. <BR CLEAR=left|right|all>

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

Тэг неразрывная строка <NOBR>..</NOBR> нужен для того, чтобы браузер не переносил автоматически строку, даже если она выходит за границы экрана. Браузер позволит горизонтально прокручивать окно, однако тэг <WBR> позволит разбить строку на две, но в строго запланированном месте

Тэг цитата <BLOCKQUOTE>..</BLOCKQUOTE> предназначен для обозначения в документе цитаты. Текст, обозначенный тэгом <BLOCKQUOTE>, отступает от левого края документа на 8 пробелов.

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

2.1 Гипертекстовые ссылки

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

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

mailto: активизирует почтовую сессию;

telnet: обращение к службе telnet;

news: вызов службы новостей.

#ANCHOR ссылка на точку внутри HTML-документа. Точка, на которые ссылается #anchor, указываются с помощи тэга NAME. Ссылки на точки внутри документа можно создать на различных участках. Они позволяют быстро переходить от раздела к разделу внутри документа, не используя прокрутку экрана. Тэг <A HREF="URL">открывает описание ссылки, а тэг </A> - закрывает его.

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

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

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

Обязательный параметр URL указывает на расположение рисунка, который должен храниться в графическом формате, поддерживаемом браузером(GIF и JPG)

Данный необязательный элемент задает текст, который будет отображен браузером, не поддерживающим отображение графики или с отключенной подкачкой изображений. Обычно, это короткое описание изображения, которое пользователь мог бы или сможет увидеть на экране. Если данный параметр отсутствует, то на месте рисунка большинство браузеров выводит пиктограмму (иконку), активизировав которую, пользователь может увидеть изображение. Тэг ALT рекомендуется, если ваши пользователи используют браузер, не поддерживающий графический режим, например Lynx.=n1:

Данный необязательный параметр используется для указания высоты рисунка в пикселях. Если данный параметр не указан, то используется оригинальная высота рисунка. Это параметр позволяет сжимать или растягивать изображения по вертикали, что позволяет более четко определять внешний вид документа. Однако, некоторые браузеры не поддерживают данный параметр. С другой стороны, экранное разрешение у вашего клиента может отличаться от вашего, поэтому будьте внимательны при задании абсолютной величины графического объекта.=n2:

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

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

Приведем пример использования данного тэга:

С версии HTML 2.0 у тэга <IMG> появились дополнительные параметры:

Новые параметры::

Данный параметр позволяет автору определить ширину рамки вокруг рисунка.:

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

То же самое, что и VSPACE, но только по горизонтали.

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

Описание фонового рисунка включается в тэг BODY и выглядит следующим образом:

<BODY BACKGROUND="picture.gif">.

Задание стандартных цветов. Многие HTML-авторы любят использовать заранее предопределенные цвета фона документа, обычного текста и ссылок. Чтобы задать эти цвета, необходимо включить в тэг <BODY> дополнительные параметры:

<BODY BGCOLOR="#XXXXXX" TEXT="#XXXXXX" LINK="#XXXXXX"> каждый из параметров определяет цвет того или иного элемента. Опишем эти параметры::

Цвет фона документа:

Цвет простого текста документа:

Цвет ссылки. Цвет задается шестизначным числом в шестнадцатеричном формате по схеме RGB (Red, Green, Blue). Цвет #000000 соответствует черному, а цвет #FFFFFF - белому. Например: <BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#9690CC">

Данная строка определяет белый цвет фона документа, черный текст и серебристые ссылки.

Горизонтальная линия. Используя тэг <HR>, вы можете разделить текст горизонтальной чертой.

Формат тэга:

Параметры тэга::

Толщина линии в пикселях.:

Ширина линии в пикселях или процентах от ширины окна броузера.: Расположение на экране (слева | по центру | справа).: По умолчанию линия представлена в 3D виде с тенью. NOSHADE позволяет представить линию просто однотонной темной полоской.

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

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

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

Таблица №1: Основные стили текста

Стиль	Элемент или тэг	Результат
Bold	<B> Этот текст жирный </B>	Этот текст жирный
Italic	<I> Этот текст наклонный </I>	Этот текст наклонный
Mono spaced	<TT> Этот текст с непроп. шрифтом </TT>	Этот текст с непроп. шрифтом

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

<b>Жирный</b> - <i>наклонный <b>наклонный жирный</b></i>

Однако не стоит забывать, что добавление большого количества стилей и их комбинаций приводит к плохой читабельности.

Дополнительные стили:

· big - большой

· small - маленький

· sub - подстрочный

· sup – надстрочный текст

Таблица №2: Дополнительные стили текста

Стиль	Элемент или тэг	Результат
Big	Этот текст <BIG> большой </BIG>	Этот текст большой
Small	Этот текст <SMALL> маленький </SMALL>	Этот текст маленький
Sub	Этот текст <SUB> подстрочник </SUB>	Этот текст подстрочник
Sup	Этот текст <SUP> надстрочник </SUP>	Этот текст надстрочник

Размер шрифта <FONT SIZE>. Вы можете изменять размер шрифта при помощи тэга: <FONT SIZE=+|- n>

Шрифт может иметь размер от 1 до 7. Можно указать как прямо, так и смещение относительно базового значения размера шрифта. Базовое значение можно изменить при помощи тэга: <BASEFONT SIZE=n>

Изменение цвета шрифта <FONT SIZE>. Вы можете изменить цвет шрифта при помощи тэга: <FONT COLOR="#RGB>

Цвет указывается в RGB-формате посредством указания размерности каждой компоненты цвета в шестнадцатеричном формате. Например, белый цвет обозначается "000000", черный - "FFFFFF", синий - "0000FF" и т.п.

<FONT COLOR="#FF0000"> Красный </FONT> <FONT COLOR="#00FF00"> Зеленый </FONT> <FONT COLOR="#0000FF"> Синий.

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

Web использует два типа растровых файлов: в форматах JPEG(хорошо масштабируется в браузере, но плохо передает ровные плоскости цвета, в компрессии уступает GIF-формату.) и GIF ( хорошо передает цветовые и тоновые раскаты, размытые границы)

Подбирайте минимальное количество цветов вручную (для качественной передачи антиалиасного одноцветного изображения на одноцветном фоне достаточно 5-8 цветов, двух-трехцветного изображения - 15-25 цветов) Если исходное изображение Grayscale, перед индексацией переведите его в RGB-гамму.

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

Перед индексированием необходимо выделить наиболее важные элементы изображения. Цвета внутри выделенной области индексируются корректнее остальных.

3. Алгоритм практической работы

3.1 Подготовка

Для создания сайта я использовал две программы:

Notepad++ для написания кода самого сайта

Google Chrome — браузер, в котором можно ознакомиться с результатом написанного сайта.

3.2 Создание сайта «Унисверситет Университет»

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

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

В верху слева установлен логотип университета с ссылкой на официальный сайт «http://synergy.ru». По центру расположилась информация об университете. А в самом низу, контактные данные и режим работы приемной комиссии..

Заключение

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

Мне конечно далеко до профессионала, но я бы хотел чтоб знания, полученные в результате данной работы пригодились бы мне и в будущем. Я буду и дальше изучать программирование на языке HTML, CSS, PHP, Java и совершенствоваться как веб-разработчик.

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

Алленова Наталья - Самоучитель по html.
Мальчук Е. - HTML и CSS. Самоучитель.
Брайан Хоган - HTML5 and CSS3: Develop with Tomorrow's Standards Today
Влад Мержевич HTML и CSS на примерах
веб-сайт https://www.w3.org/
веб-сайт http://htmlbook.ru/

Приложение

.<!DOCTYPE html>
<HTML>
<HEAD>
<meta charser="UTF-8">
<title>Университет Университет </Title>
</HEAD>
<body>
<center>
<table>
<tr>
<td>
</a>
</td>
<td>
<h2>
Московский финансово-промышленный университет «Университет»
</h2>
</td>
</tr>
<tr>
<td colspan="2" valign="middle">
<center>
<H1>ОБ УНИВЕРСИТЕТЕ</h1>
</center>
<p>
Мы объединили многолетние академические традиции и
современные образовательные технологии
<p>
Почти 30 лет мы готовим профессионалов,
обладающих набором практических знаний и
навыков как для запуска и развития собственного бизнеса,
так и для работы на управленческих должностях в крупных компаниях.
<p>
<b>Наша цель — сделать качественное образование доступным каждому.</b>
</td>
</tr>
</table>
<table style="width: 100%; position: absolute; bottom: 0px; text-align: center; ">
<tr>
<td width="50%" style="text-align: right;">
Приемная комиссия:
<br>Пн-Пт: 09.00-20.00
<br>Сб-Вс: 10.00-17.00
</td>
<td width="50%" style="text-align: left;">
<a href="tel:84958001001"><b>+7 (495) 800 10 01</b></a>
<br>
<a href="tel:88001000011"><b>+7 (800) 100 00 11</b></a>
</td>
</table>
</center>
</body>
</html>