Инфоурок Информатика КонспектыКонспект лекции "Основы языка HTML"

Конспект лекции "Основы языка HTML"

Скачать материал

Содержание

1. Общие сведения и терминология.. 2

1.1.         Типы браузеров. 3

2. Синтаксис HTML - языка.. 4

2.1. Основы HTML.. 4

2.2.Структура HTML – документа.. 4

2.3. Комментарий в HTML.. 5

2.4. Тег <HEAD> … </HEAD>. 5

2.5. Тег <BODY> … </BODY>. 6

3. Форматирование текста HTML - документа.. 6

3.1. Форматирование шрифта.. 6

5. &-последовательности.. 9

4. Создание списков в HTML – документе.. 9

4.1. Маркированные списки.. 9

4.2. Нумерованные списки.. 10

4.3. Списки определений. 10

4.4. Комбинированные списки.. 11

5. Создание таблиц в HTML – документе.. 12

5.1. Основные теги форматирования таблиц.. 12

6. Горизонтальные линии.. 14

7. Web - графика.. 14

7.1. Форматы графических файлов. 14

7.2. Встраивание графики в Web – страницу.. 15

8. Ссылки.. 16

9. Нестандартные элементы... 17

Справочник по HTML.. 19

 


1. Общие сведения и терминология

 

Термин HTML (HyperText Markup Language) означает "язык маркировки гипертекстов", не зависящий от типа компьютерной платформы.

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

Первую версию HTML разработал в 1989 году сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли. А в 1990 году был впервые разработан первый браузер WWW, для просмотра HTML-страниц.

 

HTML – это набор команд, интепритируемых браузером при загрузке документа и перед показом его пользователю.

 

Он не привязан ни к одной архитектуре ПК или ОС. Элементы документа на HTML могут быть созданы и просмотрены под управлением любой ОС.

 

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

 

Гипертекст породил множество специальных терминов:

 

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

Основная идея гипертекста – возможность вложения элементов.

 

Дескрипторы – это элементы, которыми определяются внешний вид и «поведение» Web-страницы.

 

Тег - начальный или конечный маркеры элемента определяют границы действия элемента и отделяют элементы друг от друга.

В тексте web-страницы теги заключаются в угловые скобки <>, а конечный тег снабжен косой чертой /.

Например: <HTML> ……</HTML>

 

Атрибут – параметр или свойство элемента; это переменная, которая имеет стандартное имя и которой может присваиваться определенный набор значений.

Значение атрибутов располагается после «=» и иногда указывается в «” ”». Атрибуты располагаются в начальном тэге и отделяются друг от друга пробелом.

Например: <FONT size=3 color=green>

 

Гиперссылка – фрагмент текста, который является указателем на другой фрагмент или объект.

Гиперссылки необходимы для перехода от одного объекта к другому.

Например: <A href=”ris.htm”>

     Ссылка

       </A>


 

Фрейм – область документа со своими полосами прокрутки; одиночное изображение в сложном графическом файле.

 

Html-файл (Html-страница) – это документ, созданный в виде гипертекста на основе языка html с расширением  *.htm или *.html.

 

Скрипт (сценарий) – программа, включающаяся в состав web-страницы для расширения ее возможностей.

 

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

 

CGI (Common Gateway Interface) – программа, работающая на сервере и позволяющая расширять возможности web-страниц.

 

WWW (World Wide Web) – всемирная паутина; распределяющая система доступа к гипертекстовым документам, существующим в Интернете.

 

Сайт – набор web-страниц, принадлежащих одному владельцу.

 

Web-страница – это документ, подготовленный в виде гипертекста и размещенный в WWW.

 

Браузер – программа для просмотра web-страниц.

Например: Internet Explorer, Netscape Navigator

 

URL (Uniform Resourse Locator) – универсальный указатель ресурса.

Например: http:// www.название домена/имя файла

 

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

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

 

1.1.  Типы браузеров

 

Mosaic – был разработан первым, но по возможностям уступает следующим.

 

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

 

Microsoft Internet Explorer – компонент операционной системы Windows, обеспечивает хорошую интеграцию с приложениями Office и имеет широкий набор функций, обеспечивающих просмотр web-страниц.

 

Firefox – быстрый, эффективный и безопасный браузер, созданный на основе браузера NetScape Navigator. При работе с большим количеством окон не занимает много памяти. Удобно реализован поиск слов на странице в виде панели, которая не загораживает содержимое страницы. В браузере имеется подобие менеджера закачек (т.е. есть возможность приостановки и продолжения загрузки). Помимо стандартных настроек есть возможность ограничить деятельность java-скриптов и запретить всплывающие окна. Также есть поддержка протокола аутентификации NTLM (проверка имени и пароля для входа) и кроме того, доступна очень подробная информация о загруженной странице: содержимое HTTP-заголовков, метаинформация страницы, список всех присутствующих форм и их полей, объектов с подробным их описанием. Есть удобный просмотр всех настроек с их значениями.

 

Mozilla Suite – это пакет, созданный на основе браузера NetScape Novigator и который состоит: из браузера; из программы IRC-клиент (предназначенной для чтения почты и новостей); и из HTML-редактора. Этот пакет с точки зрения функциональных особенностей похож на Firefox. Здесь также используется система вкладок, такой же способ поиска слов на странице (но не такой удобный). Зато в браузере присутствуют интересные дополнительные возможности: возможность использования профилей, (профиль сохраняет пользовательские настройки и содержимое закладок), менеджер паролей (Password Manager), менеджер форм (Form Manager) – который сохраняет образец форм на страницах, кроме того, отладчик языка JavaScript и модуль для отображения объектной модели документа (DOM) и используемых стилей.

 

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

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

В браузере есть встроенные клиенты для IRC, электронной почты и новостей, кроме того, имеется средство для чтения RSS-лент. Модель заметок (“Notes”) позволяет организовывать дерево текстовых заметок и вставлять текст в заметки прямо из окна просмотра страницы. Недостаток браузера в том, что он не поддерживает аутентификацию NTLM.

 

 

Редакторы html-страниц

FrontPage

Netscape Composer

Macromedia Dreamviewer

 

2. Синтаксис HTML - языка

2.1. Основы HTML

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

2.2.Структура HTML – документа

Составными частями документа являются заголовок (шапка документа) и главная часть (тело документа).

<HTML> … </HTML> - между этими тегами заключен весь html – документ.

<HEAD> … </HEAD> - между этими тегами располагается заголовочная часть html – документ. В заголовке определяются важнейшие глобальные установки: имя документа (его URL - адрес), служебную информацию (срок годности документа, автор, краткое описание документа и т.д.) и форматирование общей структуры документа.

<BODY> … </BODY> - между этими тегами располагается тело html – документ (т.е. его содержательная часть).

 

Например:

Исходный текст документа (в текстовом редакторе)

Вид Web-страницы в браузере (Internet Explorer)

<HTML>

<HEAD>

<TITLE> Первые шаги

</TITLE>

</HEAD>

<BODY>

Мой первый html – документ

</BODY>

</HTML>

 

В заголовке окна браузера будет написано:

Первые шаги

 

В рабочей области окна браузера:

Мой первый html – документ

 

Перед тем, как просмотреть созданную Web-страницу в окне Web-браузера, ее необходимо сохранить с расширением *.htm или *.html.

Для просмотра созданной Web-страницы в браузере Internet Explorer выберите команду: меню Файл \ Открыть.

HTML-код любой Web-страницы можно просмотреть и в окне любого Web-браузера. Для этого в браузере Internet Explorer выберите команду Вид \ Просмотр HTML-кода.

2.3. Комментарий в HTML

Способы:

1.      <!-- … --> - содержащийся между парами текст на появится в окне браузера, его можно увидеть в оригинале html-документа.

Пример: <!—этот текcт не виден в окне браузера -->

2.      <COMMENT> … </COMMENT>

Пример: <Comment> этот текcт не виден в окне браузера </comment>

 

2.4. Тег <HEAD> … </HEAD>

1.      <BASE> - базовый адрес (URL - адрес) данного документа, используется для ссылок. Позволяет опускать начальную часть адреса в ссылках документа.

Атрибуты <BASE>:

·         Hrefадрес ссылки

Пример: <Base href=”http://компьютер/путь”>

                <Base href=”file://D:\путь\”>

 

2.      <TITLE> … </TITLE> - определяется имя текущего html – документа. Этим именем браузер пользуется для обозначение документа в строке заголовка окна браузера.

Пример: <TITLE> Структура Web - страницы </TITLE>

 

3.      <META>  - содержит служебную информацию, которая не отражается при просмотре web- страницы. Каждый элемент Meta содержит два основных атрибута: тип данных и содержание:

·         Name=”Expirescontent=”Дата” – дата, обозначающая «срок годности документа»;

·         Name=”Reply-tocontent=”Имя@Адрес” – адрес электронной почты;

·         Name=”Authorcontent=”Имя автора” – имя автора web – страницы;

·         Name=”keywordscontent=”слово1, слово 2, слово 3, … ” – набор ключевых слов для поиска;

·         Name=”Descriptioncontent=”Содержание страницы” – краткое описание содержания web – страницы;

·         Name=”Content-Typecontent=”Описание страницы” – описание типа и характеристик web- страницы;

·         Name=”Generatorcontent=”Название HTML-редактора” – указание приложения, в котором была создана web-страница.

·         URL - адрес

Пример: <META Name=”Author” Content=”Alexei Goncharov”>

 

4.      <STYLE> … </STYLE> - описание стиля некоторых элементов Web-страницы.

Пример: <STYLE> H2 {font-family: Arbat;}

 CODE { font-family: Arbat;} </STYLE>

2.5. Тег <BODY> … </BODY>

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

Внутри элемента BODY можно использовать все элементы, предназначенные для дизайна Web – страницы. Внутри начального тега <BODY> можно расположить ряд атрибутов, обеспечивающих установки для всей страницы целиком.

·         Background=”Путь к файлу фона” – фон страницы;

·         Bgcolor=n - простое оформление фона. Цвет фона задается двуразрядными шестнадцатеричными числами (#FF00FF) или (fuchsia);

·         Text=n – цвет текста;

·         Link  - цвет не просмотренной гиперссылки;

·         Vlink – цвет просмотренной гиперссылки;

·         Alinkцвет активной гиперссылки.

Пример: <BODY Bgcolor=#FFFFFF>

 

3. Форматирование текста HTML - документа

 

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

3.1. Форматирование шрифта

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

Под физическом стилем принято понимать прямое указание браузеру на модификацию текущего шрифта. Например, все, что находится между метками <B> и </B>, будет написано жирным шрифтом. Текст между метками <I> и </I> будет написан наклонным шрифтом.  Несколько особняком стоит пара меток <TT> и </TT>. Текст, размещенный между этими метками, будет написан шрифтом, имитирующим пишущую машинку, то есть имеющим фиксированную ширину символа.

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

 

Вот самые распространенные логические стили.

1.      <P> … </P> - элемент абзаца.

·         Alignвыравнивание абзаца. Допустимые значения: left, right, center.

 

2.      <BR> - элемент принудительный разрыв строки.

·         Clearвыравнивание объектов. Допустимые значения:

left – если объект выровнен влево,

right – если объект выровнен вправо,

all – для объекта, который может быть выровнен по любому краю,

none – значение по умолчанию.

 

3.       от H1 до H6 - заголовки текста. <H1>…</H1> - заголовок верхнего уровня. <H4>…</H4> - заголовок стандартного размера. <H6>…</H6> - заголовок самого маленького уровня.

·         Alignвыравнивание заголовка. Допустимые значения: left, right, center.

4.      <PRE> … </PRE> - элемент текста заранее отформатированного.

5.      <CENTER> … </CENTER> - элемент центрирования текста.

6.      <B> … </B> - полужирный шрифт начертания.

7.      <I> … </I> - начертание курсивом.

8.      <U> … </U> - подчеркнутое начертание.

9.      <STRIKE> … </STRIKE> или <S> … </S> - зачеркнутое начертание шрифта.

10.  <BIG> … </BIG> - увеличение размера шрифта.

11.  <SMALL> … </SMALL> - уменьшение размера шрифта.

12.  <SUB> … </SUB> - элемент, создающий эффект нижнего индекса.

13.  <SUP> … </SUP> - элемент, создающий эффект верхнего индекса.

14.  <NOBR> … </NOBR> - элемент, выводит текст в одну строку.

15.  <TT> … </TT> - элемент, обозначающий текст телетайпа(ширина всех букв одинаковая).

16.  <BASEFONT> - элемент базового размера шрифта.

·         Size=n – базовый размер шрифта.

17.  <FONT> … </FONT> - элемент, определение типа, размера и цвета шрифта.

·         Size=n – абсолютный размер шрифта.

·         Size=+n/-n – размер относительно базового размера.

·         Color – цвет шрифта

·         Face – имя шрифта. Через запятую можно задать несколько имен шрифтов, использоваться будет то, чье имя браузер найдет первым.

18.  <EM> … </EM> -акцент шрифта, т.е. позволяет выразить данный фрагмент текста курсивом.

19.  <STRONG> … </STRONG> -сильный акцент шрифта, т.е. позволяет выразить данный фрагмент текста жирным шрифтом.


Пример: Форматирование текста

Стих

Однажды в студеную зимнюю пору
Сижу за решеткой в темнице сырой.
Гляжу - поднимается медленно в гору
Вскормленный в неволе орел молодой.

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

Автор неизвестен

 

Код программы: 

 


<html> 
<head> 
        <title>Пример 3</title> 
</head> 
<body> 
        <H1>Стих</H1> 
        <P>Однажды в студеную зимнюю пору <BR> 
        Сижу за решеткой в темнице сырой. <BR> 
        Гляжу - поднимается медленно в гору <BR> 
        Вскормленный в неволе орел молодой. </P> 
        <P>И шествуя важно, в спокойствии чинном, <BR> 
        Мой грустный товарищ, махая крылом, <BR> 
        В больших сапогах, в полушубке овчинном, <BR> 
        Кровавую пищу клюет под окном.</P> 
        <H2 align=left>Автор неизвестен</H2>
</body> 
</html> 

 

 

Шрифтовое выделение фрагментов текста

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

Кроме того, существует ряд логических стилей:

EM - от английского emphasis - акцент
STRONG - от английского strong emphasis - сильный акцент
CODE - для фрагментов исходных текстов
SAMP - от английского sample - образец
KBD - от английского keyboard - клавиатура
VAR - от английского variable - переменная

Код программы: <html>

<head> 
<title>Пример 5</title> 
</head> 
<body> 
<H1>Шрифтовое выделение фрагментов текста</H1> 
<P>Теперь мы знаем, что фрагменты текста можно  выделять 
<B>жирным</B> или <I>наклонным</I> шрифтом.
 Кроме того, можно  включать в текст фрагменты с фиксированной шириной символа 
<TT>(имитация пишущей машинки)</TT></P> 
<P>Кроме того, существует ряд логических стилей:</P> 
<P><EM>EM - от английского emphasis - акцент </EM><BR> 
<STRONG>STRONG - от английского strong emphasis - сильный акцент </STRONG><BR> 
<CODE>CODE - для фрагментов исходных текстов</CODE><BR> 
<SAMP>SAMP - от английского sample -  образец </SAMP><BR> 
<KBD>KBD - от английского keyboard -  клавиатура</KBD><BR> 
<VAR>VAR - от английского variable -  переменная </VAR></P> 
</body> 

</html>

 

5. &-последовательности

Поскольку символы "<" и ">" воспринимаются браузерами как начало и конец HTML-меток, возникает вопрос: а как показать эти символы на экране? В HTML это делается с помощью &-последовательностей (их еще называют символьными объектами или эскейп-последовательностями). Браузер показывает на экране символ "<", когда встречает в тексте последовательность &lt; (по первым буквам английских слов less than — меньше, чем). Знак ">" кодируется последовательностью &gt; (по первым буквам английских слов greater than — больше, чем).

Символ "&" (амперсанд) кодируется последовательностью &amp;

Двойные кавычки (") кодируются последовательностью &quot;

Помните: точка с запятой — обязательный элемент &-последовательности. Кроме того, все буквы, составляющие последовательность, должны быть в нижнем регистре (т.е., маленькие).

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

 

4. Создание списков в HTML – документе

 

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

·         нумерованные с разными схемами нумерации;

·         маркированные с разными типами маркера.

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

4.1. Маркированные списки

Является самым простым списком. Его теги:

1.   <UL>…</UL> - начало и конец маркированного списка.

2.   <LI> - определяет отдельный элемент списка. Это непарный тег.

Атрибут тегов <UL> и <LI>:

·         Type – тип маркера списка. Допустимые значения:

Type=disc – закрашенный круг (значение по умолчанию)

Type=circle или type=roundне закрашенная окружность

Type=square закрашенный квадрат.

 

Пример: Необходимо оформить текст

·   Иван;

·   Данила;

·   белая кобыла

 

Код программы: <BODY>

 


<UL> 
<LI>Иван; 
<LI>Данила; 
<LI>белая кобыла 
</UL> </BODY>

 


 

4.2. Нумерованные списки

Является самым простым списком. Его теги:

1.   <OL>…</OL> - начало и конец нумерованного списка.

2.   <LI> - определяет отдельный элемент списка. Это непарный тег.

Атрибут тегов <OL> и <LI>:

·         Start=n – задает число, с которого начинается нумерация списка

·         Type – тип маркера списка. Допустимые значения:

Type=1 – арабские цифры (значение по умолчанию)

Type=aстрочные буквы

Type=A прописные буквы

Type=I римские цифры.

 

Пример: Необходимо оформить текст

1.  Иван;

2.  Данила;

3.  белая кобыла

Код программы:

 


               <BODY>
 <OL> 
<LI>Иван; 
<LI>Данила; 
<LI>белая кобыла 
</OL>
</BODY>

 


4.3. Списки определений

Список определений несколько отличается от других видов списков. Вместо меток <LI> в списках определений используются метки <DT> (от английского definition term — определяемый термин) и <DD> (от английского definition definition — определение определения).

 
Пример: оформление списка определений

HTML

Термин HTML (HyperText Markup Language) означает 'язык маркировки гипертекстов'. Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.

HTML-документ

Текстовый файл с расширением *.html (Unix-системы могут содержать файлы с расширением *.htmll).

 

Код программы: <BODY>
<DL> 
<DT>HTML 
<DD>Термин HTML (HyperText Markup Language) означает 'язык маркировки гипертекстов'. Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли. 
<DT>HTML-документ 
<DD>Текстовый файл с расширением *.html (Unix-системы могут содержать файлы с расширением *.htmll). 
</DL>
</BODY>

4.4. Комбинированные списки

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

 

Пример: Оформите текст:

 

Графика в Web: «за» и «против»

I.     За: повышенная комфортность работы пользователя:

1.      Страницы информативнее

2.      Полезные кнопки

3.      Удобные гиперссылки

4.      Размеченные карты

II.   Против: Графика является лишним балансом:

§  Хаос в стандартах HTML

§  Увеличение времени загрузки Web-страниц

§  Неоправданная перегруженность страниц графическими элементами

 

Код программы: <BODY>

<CENTER> <B> Графика в Web: «за» и «против» </B> </CENTER>

<BR>

<OL TYPE=I>

<LI> За: повышенная комфортность работы пользователя:

<OL TYPE=a>

<LI> Страницы информативнее

<LI> Полезные кнопки

<LI> Удобные гиперссылки

<LI> Размеченные карты

</OL>

<LI> Против: Графика является лишним балансом:

<UL TYPE=square>

<LI> Хаос в стандартах HTML

<LI> Увеличение времени загрузки Web-страниц

<LI> Неоправданная перегруженность страниц графическими элементами

</UL>

</OL>

<BODY>

 

5. Создание таблиц в HTML – документе

 

Таблицы – это способ разбить текст на колонки и строки.

 

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

Правила:

Ø При создании таблицы используется принцип вложения: внутри основного элемента таблицы (TABLE) создается ряд элементов, определяющих строки (TR), а внутри этих элементов размещаются элементы для описания каждой ячейки в строке (TD, TH).

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

5.1. Основные теги форматирования таблиц

1.            <TABLE> … </TABLE> - начало и конец таблицы. Атрибуты тега <TABLE>:

·       Alignвыравнивание таблицы по горизонтали. Допустимые значения: left, right, center.

·       BgColorцвет фона таблицы, который соответствует фону всего html-документа

·       Border=nзадает ширину рамки таблицы. Значения определяют ширину рамки в пикселах. Если атрибут отсутствует или имеет нулевое значение, то рамки таблицы не отображаются, но место для нее будет отведено.

·       BorderColorопределяет цвет рамки таблицы.

·       Widthиспользуется для задания ширины таблицы. Ширина указывается в % от ширины окна браузера или в пикселах.

Примеры: а)  <table width = 50%> - указание в процентах

                 b ) <table width = 200> - указание в пикселах

 

·         Frame -  позволяет задать вид рамки. Если атрибут отсутствует рамка вокруг таблиц выводится целиком. Значения:

Void – рамка отсутствуют

Above – верхняя сторона рамки

Below – нижняя сторона рамки

Hsidesчасти рамки сверху и снизу

Vsidesчасти рами слева и справа

Lhs – левая часть рамки

Rhsправая часть рамки

Border или Boxрамка показана полностью

·          Rulesопределяет вид сетки таблицы внутри, т.е. между ячейками. Значения:

None сетка отсутствует

Groupsсетка вокруг групп ячеек

Rowsгоризонтальные линии между строками

Calsвертикальные линии между колонками

All – обычная сетка

2.            <TR>… </TR> - элемент строка таблицы. Между тегами <TR>… </TR>  располагаются теги, описывающие ячейки таблицы

·        Alignопределяет выравнивание всех элементов строки, но для каждой ячейки можно задать собственное выравнивание. Значения: left, right, center

·        BgColor – фон для каждой строки

·        Borderрамка строки

·        BorderColor – цвет рамки

·        Valignвыравнивание по вертикали. Значения:

Topвыравнивание по верхнему краю

Centerцентрирование

Bottomвыравнивание по нижнему краю

BaseLlineвыравнивание по самой верхней текстовой строке

 

Строка заканчивается там, где начинается следующая, то есть следующий элемент TR. Внутри элемента располагаются элементы TH и TD, определяющие одиночные ячейки. Различают две категории ячеек: ячейки заголовков (TH) и ячейки данных  (TD).

 

3.             <TH>…</TH> - ячейка заголовка столбца или строки. Элемент располагается внутри элемента <TR> и выводит текст выделенным шрифтом посередине.

4.             <TD> … <TD> - элемент данных таблицы.

Атрибуты: <TH> и <TD>:

·          Align

·          Valign –

·          BgColor –

·          BorderColor –

·          Colspan = n - задает ширину ячейки, выраженную в столбцах. Этот атрибут определяет, сколько табличных столбцов займет данная ячейки в пределах строки.

·          Rowspan = nвысота ячейки в строках, т.е. данный элемент определяет, сколько табличных строк займет данная ячейка.

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

 

Пример:

Заголовок таблицы

4-е строки

Строка1

2 строки

Строка2

Строка3

Еще 2 строки

Строка4

 

Код программы: <BODY>

 


<TABLE border=1>

<TR>

<TH colspan=3> Заголовок таблицы </TH>

<TR>

<TD rowspan=4 > 4-е строки

<TD colspan=1> строка 1

<TD rowspan=2> 2 строки

<TR>

<TD colspan=1> строка 2

<TR>

<TD colspan=1> строка 3

<TD rowspan=2> Еще 2 строки

<TR>

<TD colspan=1> строка 2 </TD>

</TR>

</TABLE>

</BODY>

 


 

5.            <CAPTION> … </CAPTION> – Элемент для задания заголовка таблицы. Располагается внутри <TABLE>, но выводится вне рамки таблицы

·            Alignгоризонтальное выравнивание заголовка. Значения: left, right, center.

·            Valignопределяет где появляется название таблицы (над или под таблицей). Значение: topнад таблицей, bottomпод таблицей.

 

6. Горизонтальные линии

 

Горизонтальная линия чаще всего используется в качестве разделителя между элементами HTML – страницы (абзацами, иллюстрациями и т.д.). Для задания горизонтальной линии используется не парный тег <HR>.

Атрибуты:

·            Align=nвыравнивание горизонтальной линии. Значения: left, right, center, justify – по ширине.

·            Size=n – толщина линии.

·            Width=n (или width=n%) – длина линии, задается в пикселах или процентах.

·            Color=”цветцвет линии.

·            Noshade выключение теней, подавляет иллюзию трехмерности.

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

 

Применение горизонтальных линий:

1.      Разделение текстовых фрагментов – с помощью тонких линий можно «разрыхлить» мелкий текст Web – страницы. Линия вставляется после каждого тематического раздела, визуально разделяет части текста.

2.      Для выделения заголовков, списков, ремарок.

 

7. Web - графика

 

Файл HTML и графический файл – это два совершенно самостоятельных файла.

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

 

Графика в Web – страницах используется:

1. Для пояснения содержания документа (иллюстрация);

2. Для организации значков и кнопок для пользовательской навигации;

3. Для организации размеченных карт.

 

7.1. Форматы графических файлов

Графический формат GIF

 

Для преподавателей (пояснения до *):

Самым распространенным форматом графических файлов для HTML – документов является GIF (Graphic Interchange Format). Для кодирования цвета в нем используется 8 бит, т.е. 256 различных цветов и столько же градаций серого. Наборы цветов (палитры) могут быть различными. Один GIF – файл может содержать несколько изображений, позволяющих создавать движущиеся или изменяющие образы. Само по себе 8-битовое кодирование цвета предполагает, что размер графического файла должен быть относительно небольшим. Но, кроме того, для уменьшения размера файла используется еще и сжатие изображения. Существует две разновидности GIF – файла: сжатые и обычные, в которых сжатие отсутствует. Дополнительное преимущество заключается в том, что хранение информации в файле может быть организовано таким образом, чтобы при выводе рисунка происходило чередование строк. Т.е. в начале будут выводиться строки с номерами 1, 5, 9 и т.д., затем с номерами 2, 6, 10 и так далее, до тех пор пока весь рисунок не будет отображен.другое преимущество GIF – возможность сделать часть изображения прозрачной. Прозрачным может стать только один цвет. Так, создание прозрачного фона позволяет более естественно вписать рисунок в документ и избежать появления прямоугольника, обозначающего границы изображения. *

 

Файл с расширением GIF, следует применять, если:

1.      Необходимо сделать изображение с прозрачным фоном, т.е. чтобы через фон изображения просвечивал фон самой страницы. Изображение при этом выглядит более естественно.

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

3.      Файл имеет небольшой размер (для кнопки или окна), эксперименты показали, что gif занимает меньше места, чем jpg.

 

Графический формат JPG

Для преподавателей (пояснения до *):

Вторым подходящим для Интернета графическим форматом является JPEG (JPG), названный так в честь своего разработчика – Join Photographic Experts Group. Этот формат обеспечивает 24-битовое кодирование цвета и лучше подходит для хранения таких изображений, как фотографии. Недостатком формата является возможность искажения цвета в результате сжатия данных.*

 

Файл с расширением JPG, следует применять, если:

1.      Используется 24-битовое изображение фотографического качества.

2.      Используется большое полноцветное изображение, и эксперимент показал, что размер файла меньше, чем размер gif – файла.

 

Графический формат PNG (Portable Network Graphics):

Создан с целью замены формата GIF. В отличие от своего прототипа новый формат позволяет использовать как 8-битовое, так и 24-битовое кодирование цвета. Кроме того, алгоритм создания прозрачности усовершенствован. С помощью альфа – канал прозрачность может быть задан для участков изображения, содержащих разные цвета. Для 24-битовых форматов прозрачность может быть неполной, т.е. разработчик устанавливает ее величину в процентах (от 0 до 1000).

 

7.2. Встраивание графики в Web – страницу

Для встраивания используется тег <IMG>. Этот тег указывает браузеру в каком месте и какое изображение нужно воспроизвести. Данный тег является непарным.

Атрибуты:

·            Src=”__” – указывает URL – адрес загружаемой иллюстрации Этот атрибут задается для любого рисунка.

Например: <IMG Src = “mouse.gif”>

 

Если URL адрес не содержит пути поиска файла, значит графический файл находится в том же каталоге, где HTML – документы.

 

Например: <IMG Src = “C:\PICTURE\mouse.gif”>

 

Если файл находится на вашем сервере, URL – адрес удаленного поиска:

Например: <IMG Src = “HTTP://WWW.anysite.com\mouse.gif”>

 

·            Alt=”____” – всплывающая подсказка, используется в браузере для ускорения загрузки Web – страницы может быть отключен режим графики. Текст, который задан в атрибуте Alt появляется на экране в ограниченном прямоугольнике. Если режим графики отключен, или страница грузится долго, тогда в этом случае не дожидаясь конца загрузки можно оценить содержание иллюстрации и если это например, ссылка, то перейти дальше.

Например:

<IMG Src = “searchmouse.gifAlt=”Ознакомьтесь с нашим сайтом ”>

 

·            Width=n и Height=mразмер иллюстрации. Браузер отводит рамку для картинки заданного размера, а затем загружает текст, и пока шрузится графика, можно начать читать текст.

Если

 

·            Color=”цвет” –цвет линии.

·            Noshade выключение теней, подавляет иллюзию трехмерности.

 

8. Ссылки

 

Гиперссылки являются удивительным программным средством HTML.

 

Гиперссылка – это фрагмент текста HTML- документа, с помощью которого осуществляется переход на другую Web-страницу, Internet-ресурс и т.п.

 

URL (Uniform Resource Location) –универсальный указатель информационного ресурса в Интернете.

 

Для создания гиперссылки используется тег <A>, который называется якорь (anchor).

Атрибуты:

·            Href =”URL – адрес объекта, на который необходимо сделать ссылку.

File - доступ к файлу на локальном диске

Ftpдоступ к архивам файлов по протоколу передачи файлов

Httpдоступ к WWW

Mailto отправка сообщения по электронной почте

Newдоступ к новостям USENET

Nntp - доступ к новостям USENET по протоколу NNTP

Telnetподключение по протоколу telnet

Waisподключение системе поиска WAIS.

Например:

Произвольный текст <A href=”Адрес ссылки”> текст для щелчка </a>

<A href=”Адрес ссылки”> <Img src=”Ссылка на рисунок>”</a>

<A href=”Mailto:goncharov@online.ru”>Алексей Гончаров </a>

 

·            Name=”Имя маркера раздела” – ссылка на различные участки текущего документа.

Например:

<A Name=”http://Адрес/Файл.html#метка”> </a>

Текст подсказки <A href=”#Метка”> текст для щелчка </a>

 

      


Список разделов

Надпись: Код программы:
<p><b>Список разделов</b></p> 
<ul> <li><a href="#ex1">Раздел 1</a></li> 
<li><a href="#ex2">Раздел 2</a></li> </ul> 
<p><a name="ex1"></a>Раздел 1</p> 
<ul> <p>Текст раздела 1</p> </ul> 
<p><a name="ex2"></a>Раздел 2</p> 
<ul> <p>Текст раздела 2 <br></p>

·         Раздел 1

·         Раздел 2

 

       Раздел 1

 

            Текст раздела 1

 

       Раздел 2

 

            Текст раздела 2

 

9. Нестандартные элементы

 

<BGSOUND> - элемент для создания звуковых эффектов. Помещается в область заголовка. Атрибуты:

·            Src=”файл.wav” – выбор звукового файла;

·            Loop=nчисло повторений звукового фрагмента;

·            Volume =-число – громкость звукового фрагмента.

 

<MARQUEE> … </MARQUEE> - элемент для создания бегущей строки.

Атрибуты:

·        Bgcolorфоновый цвет бегущей строки;

·        Height=n (или height=n%)– высота бегущей строки, задается в процентах или в пикселах;

·        Alignопределяет выравнивание бегущей строки. Значения: left, right, center, top, middle, bottom.

·        Direction=nнаправление движения строки. Значения: left, right.

·        Behavior=n поведение строки. Значения

Behavior=”scroll” – дойдя до края экрана, бегущая строка уходит из поля зрения, а затем появляется с противоположной стороны;

Behavior=”slide – строка появляется из-за края окна, достигает противоположного края и останавливается;

Behavior=”alternate – строка движется вправо или влево, «отражаясь» от края окна и меняя направление движения;

·        Hspace – смещение по горизонтали;

·        Vspace – высота в пикселах;

·        Loop=nколичество проходов строки по экрану;

·        Scrollamount=число – скорость движения строки;

·        Scroldelay=число – временной интервал между шагами.

 

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

Атрибуты:

·        City=Адрес – адрес источника цитирования

 


 

Таблица цветов

 

Аквамарин

 

aqua

#00FFFF

Белый

 

white

#FFFFFF

Желтый

 

yellow

#FFFF00

Зеленый

 

green

#008000

Золотистый

 

gold

#FFD700

Индиго

 

indigo

#4B0080

Каштановый

 

maroon

#800000

Красный

 

red

#FF0000

Оливковый

 

oliv

#808000

Пурпурный

 

purple

#800080

Светло-зеленый

 

lime

#00FF00

Серебристый

 

silver

#C0C0C0

Серый

 

gray

#808080

Сизый

 

teal

#008080

Синий

 

blue

#0000FF

Ультрамарин

 

navy

#000080

Фиолетовый

 

violet

#EE80EE

Фуксиновый

 

fuchsia

#FF00FF

Черный

 

black

#000000

 


Справочник по HTML

 

<comment>…</comment>

<body>…</body>

background, bgcolor,  text, link, Alink, Vlink

<p>…</p>

align = left, right, center

<br>

clear =left, right, all, none

<b>…</b>, <i>…</i>, <u>…</u>

<font>…</font>

size,  face, color

<sub>…</sub>

<sup>…</sup>

<ul>…</ul>, <li>, <ol>…</ol>

type=disc, round(circle), square; 1, a, A, I, i

start = n

<table>…</table>

align = left, right, center

bgcolor, border, bordercolor

width = n/n%

height = n/n%

<tr>…</tr>

align = left, right, center

bgcolor,  bordercolor

valign = top, center, bottom, baseline

<td>…</td>, <th>…</th>

align = left, right, center

bgcolor, bordercolor

colspan = n

rawspan =n

<caption> … </caption>

Align = left, right, center.

Valign =  top, bottom

<hr>

align, noshade, size, width, color

<img>

alt, src, height, width, color, noshade

<a>…</a>

href, name

 

 

 

Просмотрено: 0%
Просмотрено: 0%
Скачать материал
Скачать материал "Конспект лекции "Основы языка HTML""

Методические разработки к Вашему уроку:

Получите новую специальность за 3 месяца

Агроном

Получите профессию

Няня

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Скачать материал

Найдите материал к любому уроку, указав свой предмет (категорию), класс, учебник и тему:

6 625 855 материалов в базе

Скачать материал

Другие материалы

Вам будут интересны эти курсы:

Оставьте свой комментарий

Авторизуйтесь, чтобы задавать вопросы.

  • Скачать материал
    • 19.01.2020 7397
    • DOCX 235 кбайт
    • 420 скачиваний
    • Рейтинг: 3 из 5
    • Оцените материал:
  • Настоящий материал опубликован пользователем Карманова Марина Михайловна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт

    Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.

    Удалить материал
  • Автор материала

    Карманова Марина Михайловна
    Карманова Марина Михайловна
    • На сайте: 6 лет и 11 месяцев
    • Подписчики: 5
    • Всего просмотров: 396858
    • Всего материалов: 106

Ваша скидка на курсы

40%
Скидка для нового слушателя. Войдите на сайт, чтобы применить скидку к любому курсу
Курсы со скидкой

Курс профессиональной переподготовки

Секретарь-администратор

Секретарь-администратор (делопроизводитель)

500/1000 ч.

Подать заявку О курсе

Курс повышения квалификации

Особенности подготовки к сдаче ОГЭ по информатике и ИКТ в условиях реализации ФГОС ООО

36 ч. — 180 ч.

от 1700 руб. от 850 руб.
Подать заявку О курсе
  • Сейчас обучается 107 человек из 38 регионов

Курс повышения квалификации

Специфика преподавания информатики в начальных классах с учетом ФГОС НОО

72 ч. — 180 ч.

от 2200 руб. от 1100 руб.
Подать заявку О курсе
  • Сейчас обучается 40 человек из 20 регионов

Курс профессиональной переподготовки

Информатика: теория и методика преподавания с применением дистанционных технологий

Учитель информатики

300 ч. — 1200 ч.

от 7900 руб. от 3950 руб.
Подать заявку О курсе
  • Сейчас обучается 20 человек из 13 регионов

Мини-курс

Физическая культура и спорт: методика, педагогика, технологи

8 ч.

1180 руб. 590 руб.
Подать заявку О курсе

Мини-курс

Психологические аспекты развития и состояния личности

4 ч.

780 руб. 390 руб.
Подать заявку О курсе

Мини-курс

Искусство и техника: совершенствование в художественной гимнастике

4 ч.

780 руб. 390 руб.
Подать заявку О курсе