Файл: Разработка сайта по обмену книгами (Требования к приложению).pdf

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

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

Разметкой называется вставка в текст дополнительных служебных символов, называемых тегами (tags).

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

Структура всегда одна и та же. Если поменять что-то местами, браузер не сможет это обработать. В результате не получим то, что задумали.

Рис. 1 Структура любого html-файла.

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

Структура html-документа - основные теги:

<html>

<head>

<body>

Из этих трех тегов состоит каркас всего сайта. Все эти теги имеют закрывающийся тег со знаком “/”.

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

На рисунке 1(пункт 3) указан раздел head. В этом разделе указывается служебная информация. Например, можно указать кодировку (пункт 4) и заголовок страницы (пункт 5).

Заголовок должен быть всегда. Без него ни один поисковик не сможет определить название контента (текста) на веб-странице. А это плохо для продвижения сайта. Более того, в браузере наверху не будет указан заголовок страницы. Это неудобство для пользователя.

Структура html-документа такова, что заголовок <title> указывается только в разделе head. Если тег <title>указать в разделе body или после него, то обработчик на него не обратит внимания. Кроме этого, в разделе head указывается информация для подключения скриптов, файлов стилей, инструкции для поисковых систем или любые другие данные, которые пользователь не должен видеть, но они важны для браузера или программистов

Структура html-документа такова, что размещать содержание, которое будет видно пользователю, нужно только в разделе body (пункт 6). Название тега говорит само за себя.

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

Структура html-документа требует обязательного порядка написания элементов. Теги всегда должны по краям обрамляться скобками <>. Без этого браузер не поймет, что это тег. После открывающейся скобки всегда следует имя элемента (тега). Если допустить пробел между < и именем, то браузер посчитает это текстом.

Кроме тегов на странице пишутся и атрибуты.

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

Атрибут src во всех тегах указывает путь файла, который нужно подгружать. Атрибут alt во всех элементах указывает короткое описание. Кроме этого, в теге img, можно указать размеры, только ширину или высоту, заголовок, выравнивание, класс стиля или рамку.

При создании html-документа используем и другие основные теги приведенные в таблице 4, которые указываются в разделе body.

Тег	Назначение
<a>…</a>	Ссылки
<img>	Изображения
<p>…</p>	Абзац
<br>	Перенос текста на новую строку
<strong>…</strong>	Жирный текст
<i>…</i>	Еурсив
<s>…</s>	Перечеркнутый текст
<u>…</u>	Подчеркнутый текст
<ol></ol>,<ul></ul>	Списки
<table></table>	таблицы

Таблица 4. Основные теги, применяемые в html-документе

Рис. 2. Схема html-документа.

Из схемы видно, что документ состоит из двух основных блоков – "заголовка" и "тела документа". Заголовок определяется с помощью элемента HEAD, а тело – элементом BODY.

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

В теле документа находится все то, что отображается на странице: текст, картинки, таблицы. Соответственно, большинство HTML-экспериментов будет проводиться в пространстве между тегами <BODY> и </BODY>

HTML обладает многочисленными достоинствами:

1) Гибкость. Работу над Web-узлом можно продолжать даже вдали от компьютера, которым обычно пользуетесь. Используя HTML, не зависим от конкретной программы, которая может оказаться недоступной в данный момент.

2) Упрощение отладки. Поскольку сами написали HTML-текст, то будет проще отладить его и найти необходимые решения, если что-то не работает.

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

1.4.2 Динамический HTML

Для того, чтобы текстовый файл превратился в HTML-файл, поменять его расширение с ".txt" на ".html" недостаточно. Надо соблюсти "правило первой строки":

Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться со строки декларации версии HTML !DOCTYPE, а именно:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

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

На самом деле одной строкой дело не обходится. После объявления версии и типа документа необходимо обозначить его начало и конец. Это делается с помощью тега-контейнера <HTML>. Как приведено на рис. 1 любой базовый HTML-документ открывется тегом <HTML> и им же закрывается.

С помощью динамического HTML можно легко реализовывать на страницах сложные эффекты.

Динамический HTML — это не самостоятельная технология, а продукт трех взаимосвязанных и взаимодополняющих технологий: HTML, спецификации каскадных таблиц стилей (CSS) и сценариев. Чтобы разрешить сценариям и компонентам доступ к функциям HTML и каскадным таблицам стилей, контент документа представляется в виде объектов модели программирования, называемой моделью DOM.

API модели DOM являются основой динамического HTML и предоставляют структурированный интерфейс, который позволяет получить доступ к практически любому элементу документа и взаимодействовать с ним. Элементы HTML в документе доступны в виде отдельных объектов. Это означает, что для проверки и изменения элемента и его атрибутов можно считывать и задавать свойства и вызывать методы. Для доступа к тексту, расположенному между элементами, также можно использовать свойства и методы модели DOM.

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

1.4.3 Верстка сайта HTML приложения

Существуют верстки: табличная и блочная

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

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

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

Однако создаваемый HTML-документ состоит не из одной таблицы. Теги для создания таблиц были рассмотрены выше.

В Приложении А приведен пример табличной вёрстки:

<!DOCTYPE html>

<html>

<head>

<title>Книгообмен</title>

</head>

…

<center><b><a href="children.html">Детская литература</a></b></center>

</td>

</tr>

<tr>

Для вёрстки блока навигации создаю ячейку, занимающую 25% ширины таблицы. Внутри тегов < tr > </ tr > расположен список ссылок. На его основе делаю меню сайта.

<tr>

<td colspan=2>количество обработанных книг за период</td>

</tr>

В следующей строке настраиваю подвал (низ) сайта. Для этого использую уже знакомые теги. При помощи colspan=2 строю низ сайта, который будет занимать по горизонтали сразу две ячейки, но на блоки не делю.

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

Если табличная вёрстка подразумевает, что содержимое страницы находятся внутри тега <table>, то концепция блочной вёрстки основана на активном использовании универсальных тегов <div>, внутрь которых помещается содержимое, включая другие теги.

Блочная вёрстка лишена недостатков табличной — поисковыми системами она индексируется лучше, её код не такой развесистый, да и блоки <div>, которые называют «слоями», изначально задумывались универсальными, то есть «для всего», тогда как <table> — это таблица, которую нужно использовать для отображения табличных данных и не более того.

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

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

Каждая часть страницы помещается в свой блок <div>: верх сайта — в первый, меню — во второй, контент — в третий и т. д. Каждый блок наполняется содержимым средствами HTML, а также позиционируется и оформляется с помощью CSS-разметки.

Конечный HTML-документ представляет собой набор блоков <div> с контентом внутри.

Существует следующий принцип блочной вёрстки:

1. повсеместное использование тега <div>, который можно назвать базовым элементом блочной структуры,

2. разделения кода, согласно которому содержимое от оформления нужно отделять. Говоря проще и ближе к нашему случаю: HTML — отдельно, CSS — отдельно (желательно в разные файлы). Такой подход делает структуру понятней. Программисту не нужно открывать CSS, дизайнеру — HTML. Все смотрят свой код и не мешают друг другу.

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

Облачные сервисы (Характеристика облачных сервисов).pdf

Критерии выбора средств разработки WEB-приложений (Основные определения теории программного обеспечения ПК).pdf

Свобода передвижения и выбора места жительства (Свобода на передвижение и выбора места пребывания и жительства в системе личных прав и свобод человека и гражданина).pdf

Общая характеристика пенсий за выслугу лет (Понятие пенсий за выслугу лет).pdf

Юридическая ответственность (Юридическая ответственность, как правовая категория).pdf

Файл: Разработка сайта по обмену книгами (Требования к приложению).pdf

1.4. Разработка документа HTML.

1.4.1 Структура и навигация документа HTML.

1.4.2 Динамический HTML

1.4.3 Верстка сайта HTML приложения

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

Информация

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

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