Файл: Языки гипертекстовой разметки.pdf

Относительно базового размера можно указывать размер шрифта текста, который заключен в контейнере <font>…</font>. Для этого необходимо присвоить атрибуту size одно из следующих значений[2]:

— (+1…+7) — увеличение шрифта на указанное количество единиц относительно базового размера;

— (–1…–7) — уменьшение шрифта на указанное количество единиц относительно базового размера.

Также могут использоваться теги[5]:

1. <big>… </big> — выводит текст шрифтом большего размера;

2. <small>…</small> — выводит текст шрифтом меньшего размера.

Таблицы

Таблицы являются не только средством представления данных. Для языка HTML более важно их применение в качестве средства форматирования. Таблицы описываются тегами <table>…</table>[3].

Атрибуты тега <table>: border — толщина рамки таблицы в пикселях (0 — рамки нет); bordercolor — цвет рамки; bgcolor — цвет фона таблицы; width — ширина таблицы (в пикселях или в процентах от ширины контейнера); align — выравнивание таблицы внутри родительского контейнера; cols — количество столбцов; rows — количество строк в таблице.

Строки таблицы описываются тегами <tr>…</tr>, а внутри них располагаются ячейки таблицы, которые ограничиваются тегами <td>…</td>. Ячейки внутри таблицы можно объединять при помощи атрибутов тега <td> colspan и rowspan[7].

Пример:

<td>Колонка 1</td>

<td>Колонка 2</td>

<td>Колонка 3</td>

</tr>

<td colspan=3 align=center>Широкая ячейка</td>

</tr>

<td rowspan=2>Высокая<br>ячейка</td>

<td>Ячейка 11</td>

<td>Ячейка 12</td>

</tr>

<td>Ячейка 21</td>

<td>Ячейка 22</td>

</tr>

</table>

Часто при форматировании документов при помощи таблиц возникает необходимость, чтобы таблица была расположена вплотную к границам окна браузера. Для этого атрибутам тега <body>: marginwidth и marginheight для IE или topmargin и leftmargin для Netscape присваивается значение 0[7]. Обычно в теге указывают все четыре атрибута сразу, для того чтобы форматирование страницы удовлетворяло требованиям всех браузеров.

Гиперссылки

Гиперссылкой в электронном документе может быть любой элемент: текст, рисунок, внедренный объект (например, flash-ролик)[1]. Определить гиперссылку в HTML-документе можно с помощью тега <a href=”url”>…</a>, где href – атрибут, значение которого является конечной точкой перехода по этой ссылке. В общем случае этим значением является URL (Uniform Resource Locator) документа (например, http://www.icsc.edu.ru)[2]. Текст или изображение, обозначающее ссылку, записываются внутри контейнера. Например:

<a href=”http://www.icsc.edu.ru”>Сайт кафедры «ИиУС»</a>.

Атрибуту border тега <img> присвоено значение 0 для того, чтобы браузер не отображал рамку вокруг рисунка, так как по умолчанию для рисунка-ссылки толщина рамки вокруг рисунка равна одному пикселю.

Гиперссылка может указывать и на некоторый блок внутри того же документа:

Начало документа... ... ...

Конец документа

<a href=”#top”>Вверх</a>

В этом примере <a name=”top”> не имеет закрывающего тега и обозначает так называемый якорь, ссылка под названием «Вверх» приведет пользователя к тому месту документа, где он расположен, т.е. к тексту «Начало документа». Конечно, это произойдет, если документ достаточно длинный.

Очень часто исходные коды программ сопровождаются комментариями, который начинается символами [1]. Текст, заключенный в теге комментария, не отображается в браузере.

Выводы

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

Разработка сайта с использованием языка гипертекстовой разметки

Тематика – кафедра учебного заведения.

Карта сайта:

Рисунок – структура разработанного сайта

Макет страниц

На всех страницах присутствуют одинаковые элементы, которые образуют общий макет таблиц. Он состоит из трех основных блоков: footer, heder и content. Все элементы страницы завернуты в оберточный блок container, для того чтобы иметь возможность устанавливать всем элементам необходимые параметры (высоту, ширину и т.п.).

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

body {

font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;

background: #D3D3D3;

margin: 0;

padding: 0;

color: #000;

}

Для тела документа установлено что будет использоваться шрифт Verdana, Arial, Helvetica с засечками и стопроцентной высотой. Будут отсутствовать как внешние, так и внутренние отступы. Цвет шрифта – черный.

Для списков указано что у них не будет внешних и внутренних отступов:

ul, ol, dl {

padding: 0;

margin: 0;

}

Для текстов и заголовков что у них не будет верхнего внешнего отступа и появятся отступы слева и справа:

h1, h2, h3, h4, h5, h6, p {

margin-top: 0;

padding-right: 15px;

padding-left: 15px;

}

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

a img {

border: none;

}

Стили ссылок:

Для всех ссылок задан цвет и убрано подчеркивание.

a:link {

color: #7A7A7A;

text-decoration: none;

}

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

a:visited {

color: #4E5869;

text-decoration: none;

}

При наведении на ссылку изменяется цвет.

a:hover, a:active, a:focus

{ text-decoration: none;

color: #333;

}

Стили таблиц:

.table{

margin: 0 auto;

}

th, caption {

font-size: 13px;

font-weight: normal;

background: #b9c9fe;

border-top: 4px solid #aabcfe;

border-bottom: 1px solid #fff;

color: #039;

padding: 8px;

}

td {

background: #e8edff;

border-bottom: 1px solid #fff;

color: #669;

border-top: 1px solid transparent;

padding: 8px;

}

tr:hover td {background: #ccddff;

}

Стили для блока container задают ширину блока и максимальную ширину, чтобы на больших экранах сохранялись пропорции макета. Также задана минимальная ширина, чтобы макет не стал слишком узким. Задан фоновой цвет и контейнер отцентрирован с помощью margin: 0 auto.

.container {

width: 90%;

max-width: 1260px;

min-width: 780px;

background: #FFF;

margin: 0 auto;

}

Блок header. Для него прописаны следующие стили:

{background: linear-gradient(to bottom, rgba(72, 85, 108, 0.87), rgb(27, 33, 43));

} – заливка шапки выполняется в виде градиента, который идет снизу и состоит из двух цветов.

В header находится логотип, заголовок и меню сайта. Для каждого этого элемента прописаны стили:

Для логотипа указано, что отступы по краям 5 пикселей.

#Insert_logo{

margin: 5px;

}

Для заголовка указан цвет, выравнивание с правого края, шрифт Garamond, размер шрифта 50 пикселей, вес шрифта – нормальный.

#heder_H1{

color: #d3d3d3;

float: right;

font-family: Garamond, serif;

font-size: 50px;

font-weight: normal;

}

Блок bmenu содержит список с пунктами меню. Для него заданы стили: отступ внутри 0 пикселей, отступ снизу 10 пикселей, позиционирование устанавливается относительно его исходного места.

.bmenu{

padding: 0px;

margin: 0px 0 10px 0;

position: relative;

}

Для элементов списка заданы стили: размер шрифта 20 пикселей, шрифт Garamond, и блок будет вести себя как линейный элемент.

.bmenu li{

font-size: 20px;

font-family: Garamond, serif;

display: inline;

}

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

.bmenu li a{

display: inline;

text-transform: uppercase;

text-shadow: 0px 0px 2px #eeb213;

color: #eeb213;

padding: 5px 10px 0px 50px;

margin: 0px;

background: rgba(0,0,0,0.7);

letter-spacing: 1px;

-webkit-transition: all 0.2s linear;

-moz-transition: all 0.2s linear;

-o-transition: all 0.2s linear;

-ms-transition: all 0.2s linear;

transition: all 0.2s linear;

}

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

.bmenu:hover li a{

text-shadow: 0px 0px 10px #eeb213;

color: transparent;

background: rgba(0,0,0,0.2);

}

Стили при наведении на ссылку меню: задан фон и тени.

.bmenu li a:hover{

background: rgba(0,0,0,1.0);

text-shadow: 0px 0px 1px #eeb213;

}

Блок footer - это подвал сайта. Для него заданы стили: внутренние отступы по бокам в 10 пикселей, задан цвет фона.

.footer {

padding: 10px 0;

background: #6F7D94;

}

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

Стили для меню: внутренние отступы 10 пикселей, внешние отступы 5 и 10 пикселей, позиционирование исходя из местоположения. Для ссылок меню указан размер шрифта, шрифт, поведение линейного элемента, белый цвет шрифта.

.fmenu {

padding: 10px;

margin: 5px 0 10px 0;

position: relative;

}

.fmenu li{

font-size: 15px;

font-family: Garamond, serif;

display: inline;

color: white;

}

.fmenu li a{

color: white;

}

Для блока даты заданы стили: цвет, выравнивание по правому краю, отступы внешние, отступы внутри.

.data{

color:#FFF;

float:right;

margin: 5px 0 10px 0;

position: relative;

padding: 10px;

}

Результат:

Рисунок – прототип сайта

При изменении разрешения экрана главное меню начинает съезжать:

Рисунок – дефект при разработке меню сайта

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

@media screen and (max-width: 1340px) {

.bmenu li{

font-size: 30px;

display: block;

border:0px;

}

.bmenu li a{

display: block;

}

Результат:

Рисунок – корректное меню сайта

На всех страницах сайта содержание примерно одинаковое и вышеописанные стили применяются ко всем страницам.

Страницы сайта

Главная:

Рисунок – главная страница сайта

Страница студенту:

Рисунок – страница сайта для студентов

Страница сотруднику:

Рисунок – страница сайта для сотрудников

Страница обратная связь:

Рисунок – страница сайта для обратной связи

Заключение

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

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

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

Список литературы

Дронов В.А., HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов — БХВ-Петербург, 2011— 414 с.
Комолова Н.В. HTML., Самоучитель — П.: «Питер», 2011— 285 с.
Старыгин А.А., XML. Разработка Web-приложений — БХВ-Петербург, 2009
С. Холзнер, XML., Энциклопедия — П.: «Питер», 2009 — 559 с.
Э. Фримен, Э. Фримен. Изучаем HTML, XHTML и CSS = Head First HTML with CSS & XHTML. — П.: «Питер», 2010. — 656 с.
Эд Титтел, Джефф Ноубл. HTML, XHTML и CSS для чайников, 7-е издание = HTML, XHTML & CSS For Dummies, 7th Edition. — М.: «Диалектика», 2011. — 400 с.
Питер Лабберс, Брайан Олберс, Фрэнк Салим. HTML5 для профессионалов: мощные инструменты для разработки современных веб-приложений = Pro HTML5 Programming: Powerful APIs for Richer Internet Application Development. — М.: «Вильямс», 2011. — 272 с.
Стивен Шафер. HTML, XHTML и CSS. Библия пользователя, 5-е издание = HTML, XHTML, and CSS Bible, 5th Edition. — М.: «Диалектика», 2010. — 656 с.
Фримен Эрик, Фримен Элизабет. Изучаем HTML, XHTML и CSS = Head First HTML with CSS & XHTML. 1-е изд. — М.: «Питер», 2010. — 656 с.
HTML specifications // World Wide Web Consortium URL: https://www.w3.org/html/ (дата обращения: 13.07.2018).
Specification of HTML 4.0 // World Wide Web Consortium URL: https://www.w3.org/TR/REC-html40-971218/conform.html#deprecated (дата обращения: 13.07.2018).
Linked information systems // World Wide Web Consortium URL: https://www.w3.org/History/1989/proposal.html (дата обращения: 13.07.2018).
Design Issues // World Wide Web Consortium URL: https://www.w3.org/DesignIssues/ (дата обращения: 13.07.2018).
Index of Elements // World Wide Web Consortium URL: https://www.w3.org/TR/1999/REC-html401-19991224/index/elements (дата обращения: 13.07.2018).
Hypertext Markup Language (HTML) A Representation of Textual Information and MetaInformation for Retrieval and Interchange // World Wide Web Consortium URL: https://www.w3.org/MarkUp/draft-ietf-iiir-html-01.txt (дата обращения: 13.07.2018).

Смотрите также файлы

Разработка регламента выполнения процесса «Управление документооборотом.pdf

Информация в материальном мире. Теоретические аспекты изучения информации.pdf

Разработка регламента выполнения процесса «Управление документооборотом» (1 Построение бизнес-процессов «как есть»).pdf

Средства разработки клиентских программ.pdf

Возмещения морального вреда.pdf

Файл: Языки гипертекстовой разметки.pdf

Гиперссылки

Комментарии

Выводы

Заключение

Список литературы

Смотрите также файлы

Информация

Списки файлов

Дополнительно