Популярные услуги

Все письменные КМ под ключ за 7 суток! (КМ-1 + КМ-2 + КМ-3 + КМ-4 + КМ-5)
Все 4 контрольные точки за 7 суток
Оба семинара по программированию под ключ! КМ-2. Разработка циклических алгоритмов + КМ-3. Функции и многофайловые программы в Си
КМ-3. Основы J⁣a⁣v⁣a⁣S⁣c⁣r⁣i⁣p⁣t - обработка событий, проверка ввода данных в форму
Сделаю ваше задание: Лабораторная работа на Pascal / Lazarus
Повышение уникальности твоей работе
Одно любое задание в mYsql
Все письменные КМ под ключ за 3 суток! (КМ-6 + КМ-7 + КМ-8 + КМ-9 + КМ-10)
Любой реферат по информатике
КМ-6. Передача параметров между сценариями (скриптами) PHP. Отправка данных на сервер с помощью форм. - Выполню за вас.

Концепция HTML

2021-03-09СтудИзба

4 Концепция HTML

4.1 Структура HTML страницы

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

Так, структура и содержание документа описываются средствами HTML. Стиль документа описывается средствами языка CSS, а поведение – средствами скриптов, фрагментов кода (например JavaScript). Использование CSS позволяет облегчить сопровождение документа, сделав его менее громоздким и более структурированным.

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

   <имя_элемента> отображаемое содержимое </имя_элемента>

Пара из открывающего и закрывающего тега называется контейнером.

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

   <имя_элемента имя_атрибута = "значение атрибута">

Рекомендуемые материалы

У некоторых атрибутов значение отсутствует.

Корневым элементом любого HTML-документа является контйнер HTML, в котором размещается всё содержимое документа. Оно включает две обязательные частей: Head (заголовк) и Body (тело), следующих в указанном порядке.

   <HTML>

      <Head>

      </Head>

      <Body>

      </Body> </HTML>

Элементы HTML делятся на три группы: заголовочные, блоковые и текстовые. Заголовочные располагаются в разделе заголовка, блоковые описывают структуру документа и содержат текст или другие блоковые либо текстовые элементы. Текстовые элементы содержат непосредственно текст документа и другие текстовые элементы. Текстовые элементы не могут содержать блоковые элементы.

4.2 Раздел заголовка

Из элементов, которые могут употребляться в разделе заголовка документа, рассмотрим теги Base, BaseFont, Meta и Title.

Base. Указывает базовый URL, относительно которого будут разрешаться все относительные URL, встречающиеся в этом документе. URL указывается атрибутом Href (hyper reference – гиперссылка), а имя целевого фрейма, в который будут загружаться соответствующие документы, – атрибутом Target (необязательный атрибут).

   <HTML>

      <Head>

      <Base Href = "http://msdn.microsoft.com/library/index.html">

   </Head>

   <Body>

      <A Href = "../others/toc.html">Click me</A>

   </Body> </HTML>

Basefont. Указывает параметры отображения текста в случае, если они не заданы явно. Имеет следующие атрибуты: Size (размер) обязательный атрибут, Color (цвет), Face (гарнитура).

   <BaseFont color = "black" Font = "Arial, Tahoma, Verdana" Size = "4">

Meta. Предназначен для внедрения в документ информации о нем самом (метаинформации), которая может быть использована службами поиска документов в Internet.

   <Meta http-equiv = "Content-Type" Content = "text/html; CharSet = Windows-1251">

Этот элемент указывает, что тип документа – text/html, а его содержимое представлено в кодировке windows-1251, принятой в русскоязычных версиях ОС Windows. В результате документ после загрузки будет отображен правильно даже в нерусифицированных браузерах (если, конечно, в системе установлены соответствующие шрифты).

Title. Указывает строку, выводимую в заголовке окна браузера.

   <Title>An introduction to HTML</Title>

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

   <link Rel="stylesheet" Type="text/css" Href="acad.css">

4.3 Раздел тела документа

Тело оформляется элементом Body, который является контейнером. Для него определены следующие необязательные атрибуты: ALink (цвет гиперссылок при выборе их пользователем), BgColor (фоновый цвет), BackGround (фоновый рисунок), Text (цвет текста по умолчанию), TopMargin (верхнее поле документа в пикселях), BottomMargin (нижнее поле документа в пикселях), LeftMargin (левое поле документа в пикселях), RightMargin (правое поле документа в пикселях), link (цвет ссылок, не посещенных пользователем), Vlink (цвет ссылок, посещенных пользователем), Scroll (значение "yes" или "no" указывает отображать полосы прокрутки или нет).

   <Body Alink = "#FF0000" BgColor = "#FFFFFF" Link = "#0000FF" Text = "#000000" Vlink = "#800080">

4.4 Управление отображением текста

В HTML предусмотрено 6 встроенных стилей для текстовых заголовков, они оформляются элементами H1, H2, ..., H6 (сокр. от heading – заголовок, по аналогии с уровнями заголовков Word). Заголовки верхнего уровня по умолчанию форматируются более крупным шрифтом. Заголовок является контейнером.

Абзацы оформляются элементом P (сокр. от paragraph). По умолчанию абзацы выравниваются влево, для выравнивания по обоим краям можно использовать значение "justify". Закрывающий тег – необязательный, абзац завершается, когда внутри него встречается первый блоковый элемент.

   <H1 Align = "Center">Введение в HTML</H1>

   <P Align = "Justify">HTML (Hypertext Markup Language)

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

К элементам логического стиля относятся такие, как address (оформление контактной информации), cite (оформление цитат), code (оформление фрагмента кода, вставленного в текст абзаца) и др.

К элементам физического стиля относятся: Font (определяет параметры шрифта: цвет, гарнитуру и размер, и др.), B (полужирный), I (курсив), U (подчеркнутый), s (перечеркнутый), Sub (нижний индекс), Sup (верхний индекс).

   <P>Текст можно выделять <I>курсивом</I>, <B>полужирным</B></P>

   <P>Вот формула полной энергии тела: E = mc<Sup>2</Sup>.</P>

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

Необходимо отметить, что в тексте нельзя употреблять некоторые символы, которые используются для оформления элементов HTML. Например, символы < и >. Их следует заменять соответствующими esc-последовательностями. Также esc-последовательностями обозначаются символы copyright и registered trade mark, специальные символы некоторых европейских алфавитов и др.

4.5 Таблицы

Таблица – наиболее важный элемент, который используется не столько для представления табличной информации, сколько для управления размещением фрагментов документа на экране. Таблица оформляется контейнером Table и содержит группы строк трёх видов: заголовка (THead), тела (TBody) и подвала (TFoot). Первая и последняя – необязательны, тело – обязательно. Строки оформляются элементом Tr и содержат ячейки двух видов: заголовка (Th), и ячейки данных (Td). Например, таблица с заголовком, подвалом и подписью имеет следующий вид:

Описание: 123

   <Table Align = "Center" Border=1>

      <Caption>Сведения о продажах на 08.11.2006</caption>

      <THead>

         <Tr>

            <Th>Наименование продукции</Th>

            <Th>Количество</Th>

            <Th>Стоимость</Th>

         </Tr>

      </THead>

      <TBody>

         <Tr>

            <Td>Процессор Intel Pentium IV 1500</Td>

            <Td>1,000</Td>

            <Td>80,000.00</Td>

         </Tr>

         <Tr>

            <Td>Процессор AMD Athlon 1400</Td>

            <Td>1,300</Td>

            <Td>84,500.00</Td>

         </Tr>

      <TFoot>

         <Tr>

            <Th>Итого</Th>

            <Th></Th>

            <Th>164,500.00</Th>

         </Tr>

      </TFoot>

      </TBody>

   </Table>

Для контейнера Table определены следующие необязательные атрибуты: Align (позволяет управлять горизонтальным выравниванием – "Left", "Center", "Right"), Border (толщина внешней границы таблицы в пикселях), CellSpacing (промежуток между ячейками, заполняемое цветом фона), CellPadding (отступы от всех четырех границ содержимого ячеек от границ ячеек), Height и Width (высота и ширина таблицы, размеры можно в пискелях и в процентах от высоты и ширины окна), BgColor (цвет фона), BackGround (картинка фона таблицы), BorderColor (цвет границы таблицы).

Теги THead, TBody, TFoot и Tr имеют следующие необязательные атрибуты: Align (выравнивание по горизонтали всех ячеек всех строк группы), Valign (выравниванием по вертикали – "Top", "Middle", "Bottom", "BaseLine") и др.

4.6 Гиперссылки

Существует три основных типа гиперссылок: внутренние, внешние и относительные.

Внутренние ссылки (internal links) – это ссылки на объекты в пределах одного документа. С их помощью пользователь может перемещаться по одной и той же Web-странице между ее разделами.

Внешние (external links), или удаленные (distant links) ссылки – это ссылки на другие Web-серверы.

Относительные (relative links), или локальные (local links), ссылки – это ссылки на другие Web-страницы (или службы Internet), расположенные на одном сервере со страницей, содержащей ссылки.

В каждой ссылке содержится URL (Uniform Resource Locator), или унифицированный локатор ресурсов, являющийся адресом Web-страницы, который отображается в адресном поле. Гиперссылка оформляется контейнером A с атрибутами Href (адрес гиперссылки), Target (имя окна или фрейма, в который будет загружен ресурс). Внутри контейнера можно указать объект (текст или картинку), по которому необходимо щелкнуть мышью для перехода по ссылке.

   <A Href = "http://www.microsoft.com" target = "article> Домашняя страница Microsoft </A>

4.7 Списки стилей

Каскадные таблицы стилей (CSS) были реализованы в 1997 году. В качестве применяемой HTML-разметки они стали доступны с версии Internet Explorer 4.0. Стили основаны на разметке, существующей в языке HTML и не являются заменой HTML. Назначение списка стилей – определить оформление того или иного элемента или набора элементов.

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

Внешний список стилей представляет собой простой текстовый файл, в котором записаны определения стилей для HTML-тегов или классов. Как правило, для обозначения, что данный файл является списком стилей, используется расширение .css (для стилей CSS1) либо .jss (для стилей JSS – JavaScript style sheet, не часто поддерживается браузерами).

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

   { font-size: 28px}

С появлением таблиц стилей в языке появилось три новых контейнера: Style, Link, Span. Контейнер Style (<Style Type="...">......</Style>) служит для определения таблицы описания стилей, и применяется внутри контейнера Head:

   <HTML>

      <Head>

      <Style>

       St1{ }

       St2{ }

      </Style> </Head>

   <Body>

    <St1>Sample text 1.</St1><Br>

    <St2>Sample text 2.</St2>

   </Body> </HTML>

Контейнер Link в контексте описателей стилей применяется для определения внешнего файла с описаниями стилей для данного документа. Ниже представлен пример включения внешнего файл в документ.

Внешний файл имеет название StyleSheet.CSS и включает следующее описание стилей:

   P {color:blue; font-size: 12px;}

   H1 {color:black; font-size: 12px; Font-Style: Arial;

   Text-Align: Center;}

Для применения этого описателя стилей, в заголовок документа необходимо включить тег <Link>:

   <HTML>

   <Head>

    <Link Rel=StyleSheet Type="text/css" Hr ef=css.htm>

   </Head>

   <Body>

    <P> Sample text 1.</P>

    <H1> Sample text 2.</H1>

   </Body> </HTML>

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

   <HTML>

   <head>

      <Style Type="text/css">

       H1 {Color:navy; Text-transform: UpperCase; font-size: 18px;

       Font-Weight: Bold; }

       P {Color:navy; font-size: 12px; Text-

       Align: Justify}

      </Style> </Head>

   <Body>

    <Center> <H1>Информационные Ресурсы Internet</h1> </Center>

    <P><Span>О</Span>Сети Internet исполнилось 25 лет.</P>

   </Body> </HTML>

В данном примере, контейнер Span применен сразу после тега начала параграфа <P>, что позволяет выделить первую букву в отображаемом абзаце. Можно также определить класс стилей и использовать его при помощи атрибута Class:

   <Style Type="text/css">

    H3.Class1 {font-size: 12px; Color= Blue}

   </Style>

.....

   <H3 Class="class1">This is a blue text</H3>

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

   <Style Type="text/css">

    all.class1 {font-size: 12px; Color= Blue}

   </Style>

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

   <Style Type="text/css">

    all.class1 {font-size: 12px; Color= Blue}

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

    #C1 {Font-Size: 20}

   </Style>

....

   <H3 Class="class1">This is a blue text</H3>

   <H3 Class="class1" Id="C1">This is a blue text</H3>

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

Свежие статьи
Популярно сейчас
Зачем заказывать выполнение своего задания, если оно уже было выполнено много много раз? Его можно просто купить или даже скачать бесплатно на СтудИзбе. Найдите нужный учебный материал у нас!
Ответы на популярные вопросы
Да! Наши авторы собирают и выкладывают те работы, которые сдаются в Вашем учебном заведении ежегодно и уже проверены преподавателями.
Да! У нас любой человек может выложить любую учебную работу и зарабатывать на её продажах! Но каждый учебный материал публикуется только после тщательной проверки администрацией.
Вернём деньги! А если быть более точными, то автору даётся немного времени на исправление, а если не исправит или выйдет время, то вернём деньги в полном объёме!
Да! На равне с готовыми студенческими работами у нас продаются услуги. Цены на услуги видны сразу, то есть Вам нужно только указать параметры и сразу можно оплачивать.
Отзывы студентов
Ставлю 10/10
Все нравится, очень удобный сайт, помогает в учебе. Кроме этого, можно заработать самому, выставляя готовые учебные материалы на продажу здесь. Рейтинги и отзывы на преподавателей очень помогают сориентироваться в начале нового семестра. Спасибо за такую функцию. Ставлю максимальную оценку.
Лучшая платформа для успешной сдачи сессии
Познакомился со СтудИзбой благодаря своему другу, очень нравится интерфейс, количество доступных файлов, цена, в общем, все прекрасно. Даже сам продаю какие-то свои работы.
Студизба ван лав ❤
Очень офигенный сайт для студентов. Много полезных учебных материалов. Пользуюсь студизбой с октября 2021 года. Серьёзных нареканий нет. Хотелось бы, что бы ввели подписочную модель и сделали материалы дешевле 300 рублей в рамках подписки бесплатными.
Отличный сайт
Лично меня всё устраивает - и покупка, и продажа; и цены, и возможность предпросмотра куска файла, и обилие бесплатных файлов (в подборках по авторам, читай, ВУЗам и факультетам). Есть определённые баги, но всё решаемо, да и администраторы реагируют в течение суток.
Маленький отзыв о большом помощнике!
Студизба спасает в те моменты, когда сроки горят, а работ накопилось достаточно. Довольно удобный сайт с простой навигацией и огромным количеством материалов.
Студ. Изба как крупнейший сборник работ для студентов
Тут дофига бывает всего полезного. Печально, что бывают предметы по которым даже одного бесплатного решения нет, но это скорее вопрос к студентам. В остальном всё здорово.
Спасательный островок
Если уже не успеваешь разобраться или застрял на каком-то задание поможет тебе быстро и недорого решить твою проблему.
Всё и так отлично
Всё очень удобно. Особенно круто, что есть система бонусов и можно выводить остатки денег. Очень много качественных бесплатных файлов.
Отзыв о системе "Студизба"
Отличная платформа для распространения работ, востребованных студентами. Хорошо налаженная и качественная работа сайта, огромная база заданий и аудитория.
Отличный помощник
Отличный сайт с кучей полезных файлов, позволяющий найти много методичек / учебников / отзывов о вузах и преподователях.
Отлично помогает студентам в любой момент для решения трудных и незамедлительных задач
Хотелось бы больше конкретной информации о преподавателях. А так в принципе хороший сайт, всегда им пользуюсь и ни разу не было желания прекратить. Хороший сайт для помощи студентам, удобный и приятный интерфейс. Из недостатков можно выделить только отсутствия небольшого количества файлов.
Спасибо за шикарный сайт
Великолепный сайт на котором студент за не большие деньги может найти помощь с дз, проектами курсовыми, лабораторными, а также узнать отзывы на преподавателей и бесплатно скачать пособия.
Популярные преподаватели
Нашёл ошибку?
Или хочешь предложить что-то улучшить на этой странице? Напиши об этом и получи бонус!
Бонус рассчитывается индивидуально в каждом случае и может быть в виде баллов или бесплатной услуги от студизбы.
Предложить исправление
Добавляйте материалы
и зарабатывайте!
Продажи идут автоматически
5076
Авторов
на СтудИзбе
455
Средний доход
с одного платного файла
Обучение Подробнее