Файл: Языки гипертекстовой разметки (Технологии хранения данных).pdf
Добавлен: 28.03.2023
Просмотров: 181
Скачиваний: 2
СОДЕРЖАНИЕ
1.1 Информация. Информационные процессы
1.2 Информационное развитие общества
1.3 Технологии хранения данных
2.1 Концепция систем хранения данных
2.3 Классификация хранилищ данных
2.4 Типовые технологические решения организации хранилищ данных
3.1 Проект распределенной гипертекстовой системы
- разметку страницы и ее содержание – за них отвечает язык HTML;
- оформление страницы – оно обычно оформляется при помощи каскадных таблиц стилей CSS;
- динамику – она создается как при помощи специальных возможностей HTML, так и за счет использования языка сценариев JavaScript, так и других языков программирования.
Каждый HTML-тег является объектом в соответствии с объектной моделью документа – Docement Object Model. Вложенные теги при этом являются потомками родительского элемента. Текст, расположеный внутри тега, также является объектом. [15]
Пример объектной модели HTML-документа представлен на рисунке 21.
Рисунок 21 - Объектная модель HTML-документа
3.4 Примеры использования HTML
Язык разметки гипертекста HTML позволяет использовать в документе разные виды информации и разнообразные объекты. В сочетании с использованием стилей и небольших скриптов на языке программирования JavaScript можно создать интересные фрагменты страниц, даже если уровень владения этими инструментами – начальный.
В языке программирования HTML предусмотрено 6 уровней заголовков. Они описываются тегами
<H1>…</H1> - заголовок первого уровня
…
<H6>…</H6> - заголовок шестого уровня
Пример HTML - документа, использующего теги заголовков:
<html>
<body>
<style>
body{color:white;background-color:black;}
h1{color:red;}
h2{color:yellow;}
</style>
<h1>Это заголовок 1</h1>
<h2>Это заголовок 2</h2>
Это просто текст.
<h1>Это еще один заголовок 1</h1>
<h2>Это еще один заголовок 2</h2>
Это опять просто текст.
</body>
</html>
В контейнере <style>…</style> размещены описания стилей, отвечающие за цвет фона и цвет заголовков. Отображение документа в браузере представлено на рисунке 22.
Рисунок 22 – Заголовки в HTML-документе
Списки в HTML являются удобной формой представления данных. Язык HTML поддерживает нумерованные списки и ненумерованные (маркированные) списки.
Пример HTML – документа с использованием списков:
<html>
<head>
<title>Списки</title>
</head>
<body>Mapкированный список</body>
<ul type="square" title="Ненумерованный список">
<li>лиса
<li>волк
<li>кабан
</ul>
<br>Нумерованный список
<ol type="I" title="Нумерованный список">
<li>Иванов П.И.
<li>Маркина Е.Ю.
<li>Лебедев Н.А.
</ol>
</html>
Отображение документа со списками в браузере представлено на рисунке 23.
Рисунок 23 – Списки в HTML
Таблицы в HTML применяются таблицы как метод группировки отображения данных, а раньше активно использовали и для форматирования web-страниц.
Каждая таблица в HTML состоит из множества ячеек, которые располагаются в строках. А уже все эти строки и образуют целую таблицу. Для обозначение таблицы применяется парный тег <table> и </ table >.
Таблицы состоят из строк и ячеек. Для того чтобы создать простейшую таблицу, используются еще два тега: это парные теги <tr> и </tr> которые используются для создания строк, и парные теги, <td> и </td> отвечающие за создание ячеек.
Пример использования таблиц:
<html>
<head>
<title>
Сложная таблица
</title>
</head>
<body>
<h1 align="center" >Объединение ячеек</h1>
<table style="width: 450px; height: 250px;" border="1" align="center" bgcolor="#FFFFFF" bordercolor="#006699">
<tr>
<td colspan="2" align="center">Объединение столбцов Атрибут "<strong>colspan</strong>"</td>
<td rowspan="2">Объединение строк Атрибут "<strong>rowspan</strong>"</td>
</tr>
<tr>
<td >Маленькая ячейка</td>
<td >Еще одна<br> маленькая ячейка</td>
</tr>
</table>
</body>
</html>
Отображение документа с таблицей в браузере представлено на рисунке 24.
Рисунок 24 – Таблица сложной структуры
Внедрение в HTML-документ небольшого скрипта на языке программирования JavaScript позволяет пользователю в нижеследующем примере выбрать тот или и6ной рисунок для отображения.
<html>
<head>
<title>Изменение картинки при выборе из списка</title>
</head>
<script language="JavaScript">
pictures = new Array()
for(i=0;i<3;i++)
{
pictures[i] = new Image()
if(i==0) pictures[i].src = "1.jpg"
if(i==1) pictures[i].src = "2.jpg"
if(i==2) pictures[i].src = "3.jpg"
}
function l_image()
{
document.images[0].src = pictures[document.form1.item.selectedIndex].src
}
</SCRIPT>
</head>
<body>
<center><TABLE COLS=2 WIDTH="100%" >
<TR>
<th>
<form name=form1>
<select name=item onChange=l_image()>
<option>рисунок 1
<option>рисунок 2
<option selected>рисунок 3
</select>
</form>
</th>
</tr>
<tr>
<th ALIGN=CENTER VALIGN=CENTER>
<IMG SRC="1.jpg" NAME="tool"></th>
</TR>
</TABLE>
</center>
</body>
</html>
Отображение документа в браузере в зависимости от выбора пользователя представлено на рисунках 25 - 27.
Рисунок 25 – Выбран рисунок 1
Рисунок 26 - Выбран рисунок 2
Рисунок 27 - Выбран рисунок 3
По итогам раздела можно сделать вывод о том, что для создания простейшего сайта достаточно изучить несложный язык разметки гипертекста HTML. Для разработки профессионального сайта необходимо кроме языка HTML также уметь описывать стили (CSS), знать несколько языков описания сценариев и изучить фреймворки, реализующие отдельные полезные функции. Если разработчик сайта не является профессиональным программистом, он может использовать для формирования современного сайта готовую платформу (CMS или конструктор). Но знать как основу и понимать HTML полезно и даже обязательно.
ЗАКЛЮЧЕНИЕ
Выполнение курсовой работы посвящено изучению языков гипертекстовой разметки. Эти языки используются для создания и фиксации структуры текстовых документов. В современном мире эти языки являются базой для разработки web-страниц, составляющих основу глобальной сети Интернет.
В работе представлено понятие информации, информационных процессов, рассмотрены технологии организации хранения данных. Наибольшее внимание уделено в первой главе архитектуре распределенных хранилищ данных. Представлены обзорно облачные технологии и облачные хранилища информации.
Во второй главе курсовой работы исследованы языки разметки гипертекста – SGML, HTML, XML. Представлена эволюция языков гипертекстовой разметки, описано их назначение, показана структура документов. Особое внимание уделено изучению основ языка разметки гипертекста HTML как основному языку для разметки web-страниц. Подробно изучена стандартная структура HTML-документа, представлена классическая DOM-модель HTML-документа.
В практической части изучены отдельные теги языка HTML, например, описывающие заголовки разного уровня, таблицы, нумерованные и маркированные списки, отображение картинок. В некоторых примерах показано также использование внутренних CSS стилей и простых сценариев, разработанных на языке программирования JavaScript.
По итогам выполнения курсовой работы можно сделать вывод о доступности изучения языка HTML, о простоте его использования – простой текстовый файл можно создать в простейшем текстовом редакторе, и при правильном описании сайт будет отображен в браузере. Понимание этого языка требуется каждому современному специалисту.