Лекция 13 Разработка Web-страниц средствами языка HTML

Зарегистрируйтесь, чтобы просмотреть полный документ!

Лекция № 13 Разработка Web-страниц средствами языка HTML

1. Основные понятия В 1989 году Тим Бернерс-Ли (Tim Berners-Lee ) предложил руководству Европейского института физики частиц (CERN) концепцию информационной системы, построенной на принципах гипертекста, названную World Wide Web (всемирная паутина). Гипертекст (расширенный текст) – это документ, состоящий из текста, изображений, звука и видео, содержащий гиперссылки для перехода к другим ресурсам. Для создания гипертекстовых документов был разработан специальный язык гипертекстовой разметки документов HTML (Hyper Text Markup Language). Web–страница – это наименьшая единица WWW. На ней может быть размещено все что угодно: текст, графические изображения, звук, анимация, движущиеся картинки и, главное, - гиперссылки.

Совокупность Web – страниц, объединенных какой-либо темой или принадлежностью одному владельцу, связанных общей схемой оформления и внутренними гиперссылками, называется Web-сайтом или Web-узлом. Домашняя страница Web-сайта – это стартовая страница, которая автоматически открывается при подключении к этому сайту. Программа, предназначенная для доступа к информации, размещенной в WWW, называется браузером (browser) и является средством для просмотра Web–страниц. Встречается также термин «броузер» . HTML-документ – это файл с расширением htm или html.

В документе HTML обычный текст, определяющий содержание документа, сочетается с элементами разметки – тэгами или тегами (tags). Теги отвечают за форматирование документа. Теги могут быть парными и непарными. Тег начинается с левой угловой скобки <, и заканчивается правой угловой скобкой >. Между скобками записывается имя тега и, при необходимости, дополнительные параметры – атрибуты тега. Атрибут тэга состоит из имени, знака равенства и значения, которое задается строкой символов. <имя тега атрибут1= значение Например, <html> атрибут2 = значение >

Значения атрибутов обычно заключаются в кавычки. Парный тег состоит из открывающего (стартового) тега и закрывающего, у которого перед именем отображается символ "/" (слэш). Например, </html> Закрывающий тег сигнализирует об окончании области действия тега. В языке HTML имена тегов можно писать в любом регистре, так, что тэги <HEAD>, <head> и <Head> эквивалентны. Поскольку символы < и > воспринимаются браузерами как начало и конец тегов, эти символы и некоторые др. в HTML записываются с помощью &-последовательностей (символьных примитивов). &код;

Код - это слово или числовое значение, указывающее на конкретный символ. &-последовательность отображаемый символ < < > > &amp " & " Комментарии в HTML имеют следующий синтаксис: <!-Или любой текст  любой текст , продолжение текста --> Комментарии игнорируются браузером и не влияют на представление документа на экране.

Все теги можно разделить на • структурные; • теги разметки; • гипертекстовые ссылки и закладки; • формы для организации диалога. Структурные теги описывают общие свойства документа, например, его название или используемую кодировку символов. <html>. . . </html> - теги, являющиеся признаком начала и конца документа <head>. . . </head> - эта пара тегов указывает на начало и конец заголовка документа. Помимо наименования документа сюда включается служебная информация.

<title>. . . </title> Текст, размещенный за тегом <title>, отображается в заголовке окна браузера и печатается в верхнем углу каждой страницы при выводе документа на принтер. <body>. . . </body> - эта пара тегов указывает на начало и конец тела HTML-документа; все то, что заключено между этими тэгами, определяет информацию, отображаемую в окне браузера. <frameset> …</ frameset> определяет расположение кадров страницы. Кадры – не перекрывающиеся области окна браузера, в которых возможно одновременное отображение нескольких документов.

2. Структура HTML-документ состоит из двух главных разделов – заголовка и тела. Структура простого HTML-документа: <html> <head> Заголовок документа <title> название документа </title> </head> <body> тело документа </body> </html>

Структура кадрированного HTML-документа: <html> <head> Количество и размер Заголовок документа столбцов в процентах <title> название документа </title> </head> Количество и размер строк в процентах <frameset cols=“размер столбца 1, рс2, …” rows=“ рст1, рст2, …”> <frame src=“имя файла 1” name= “ имя кадра 1 для гиперссылок”> <frame src =“имя файла 2” name = “ имя кадра для гиперссылок”> … </frameset> </html>

Атрибуты тега body: bgcolor устанавливает цвет фона документа, используя значение цвета в виде RRGGBB или английское название цвета. text устанавливает цвет текста документа, используя значение цвета в виде RRGGBB link устанавливает цвет гиперссылок vlink устанавливает цвет гиперссылок на которых вы уже побывали background – фоновое изображение Например, <BODY BGCOLOR=RED TEXT=“#256 AC 1”>

Названия цветов HTML

3. Порядок создания HTML-документа • Открыть любой текстовый редактор, например, Блокнот. • Набрать HTML-код • Сохранить текст документа, задав файлу имя и расширение htm или html. • Запустить браузер MS Internet Explorer • Отрыть файл с созданным вами документом, используя команду Файл → Открыть и кнопку Обзор. • Просмотреть получившуюся Web-страницу и при необходимости вернуться в Блокнот для редактирования документа; для этого выполнить следующие действия:

ü выполнить команду Вид → Просмотр HTML-кода; ü отредактировать документ; ü сохранить на диске командой Файл → Сохранить; ü закрыть Приложение Блокнот и в браузере нажать на кнопку Обновить. • повторять последние действия до достижения нужного результата. ! Браузеры не проверяют написания кода HTML правильность Неправильно записанный код браузером игнорируется

4. Теги разметки <h 1>. . . </h 1> <h 6>. . . </h 6> - задают уровни заголовков, причем заголовок первого уровня — самый крупный, шестого уровня - самый мелкий. <p>. . . </p> - эта пара тегов описывает абзац. Все, что заключено между <р> и </р>, воспринимается как один абзац, так как символы конца абзаца <Enter> браузером игнорируются. Теги <h > и <p> могут содержать дополнительный атрибут align=center – выравнивание текста по центру; align=left – выравнивание текста по левому краю; align=right – выравнивание текста по правому краю Например: <p align = right >

- используется, если необходимо перейти на новую строку, не прерывая абзаца. Например, <p> Уронили мишку на пол, Оторвали мишке лапу </p > <hr> - тег, который описывает горизонтальную линию Атрибуты этого тега: align– выравнивание по горизонтали; width- ширина линии в процентах/пикселях (точках); size- толщина линии в пикселях; color- цвет линии.

<marquee>. . . </marquee> позволяет представить текст в виде бегущей строки. Атрибуты: bgcolor- цвет фона; height – высота бегущей стоки; width – ширина бегущей стоки; direction – направление перемещения текста (left|right) (по умолчанию – left) Например: <marquee width=90% height=15 color= red > Всем привет!!! </marquee> <pre>. . . </pre> предварительно отформатированный текст выводится браузером на экран как есть — со всеми пробелами, символами табуляции и конца строки.

Тэги форматирования шрифта Установка стиля написания <b>. . . </b > полужирный текст; <i >. . . </i > наклонный текст (курсив); <u >. . . </u> подчеркивание; <sup>. . . </sup> - верхний индекс <sub>. . . </sub> - нижний индекс <font>. . . </font> тег для определения размера и цвета шрифта. Атрибуты: size=n – где n - абсолютный размер шрифта (значение от 1 до 7). color- атрибут цвета шрифта face гарнитура шрифта Например, <font color=blue size=5 face ="symbol" >

Списки Нумерованный список – это текст, заключенный в теги <ol>. . . </ol>. Каждый новый элемент списка нужно начинать с тега <li>. Этот тег является непарным. Например. <p> Список двоечников: <ol> <li>Иванов <li>Петров <li>Сидоров </ol> </p>

Атрибуты тега <ol>: type – вид нумерации (A, a , I, i, 1) start=n – задает начальное значение числовой нумерации. Ненумерованный список – это текст, заключенный в теги <ul>. . . </ul>. Каждый новый элемент списка начинается с тега <li>. Вид маркера можно задать при помощи атрибута тега <ul type=disc|circle|square> устанавливает маркеры вида , (установлен по умолчанию), соответственно. Вложенный список – это комбинация нумерованного и маркированного списков, вложенных друг в друга. Число уровней вложения не ограничено.

Создание таблиц Таблица начинается с тэга <table> и заканчивается тэгом </table>. Атрибуты: align - выравнивание таблицы по отношению к полям документа. border – наличие и ширина рамки в пикселях. Если атрибут не установлен, таблица показывается без рамки. bordercolor – цвет рамки cellspacing – расстояние между рамками ячеек в пикселях cellpading – расстояние между рамкой ячейки и данными в ячейке width и height – ширина и высота в пикселях или процентах от ширины экрана

<caption>. . . </caption> устанавливает заголовок таблицы (после тега <TABLE>). Атрибут: Align устанавливает размещение заголовка: align=top - заголовок помещается над таблицей align=bottom - заголовок помещается под таблицей <tr> …</tr> задает строку таблицы. Атрибуты: align – устанавливает выравнивание текста в ячейках строки. left (выравнивание влево), center (выравнивание по центру), right (выравнивание вправо). valing - вертикальное выравнивание текста в ячейках строки( top, middle, bottom).

<td> … </td> задают ячейку таблицы. Атрибуты: nowrap означает, что содержимое ячейки должно быть показано в одну строку. colspan устанавливает количество колонок, которые занимает ячейка по горизонтали. rowspan устанавливает "размах" ячейки по вертикали. align устанавливает выравнивание текста в ячейке. valign устанавливает вертикальное выравнивание текста в ячейке. width устанавливает ширину ячейки в пикселях height устанавливает высоту ячейки в пикселях Любая ячейка таблицы может содержать в себе другую таблицу.

Например: <table border=2>  <caption>  Aттестация группы ТЭ-11 </caption> <tr align=center >  <td> Фамилия </td> <td width=150> Средний балл </td> </tr>

<tr>  <td> Акаемова И. </td> <td align=center> 5 </td> </tr>

<tr>  <td> Посметухов К. </td> <td align=center> 3, 5 </td> </tr>  </table>

Этот фрагмент в браузере будет выглядеть так:

Добавление графических изображений в HTML-документы Изображение должно быть в формате GIF (файл с расширением *. gif) или JPEG (файл с расширением *. jpg или *. jpeg) Для вставки изображения используется тег <img src= имя файла> Обязательный атрибут SRC указывает адрес графического файла. Дополнительные атрибуты: align – выравнивание текста относительно изображения Height и width указывают высоту и ширину изображения в пикселях или процентах border присваивает значение ширины рамки в пикселях вокруг изображения

- hspase и vspase – пустые поля вокруг изображения в пикселях. - alt– альтернативный текст Используется для старых браузеров, которые не поддерживают изображений, а также на случай, если у браузера отключена автоматическая загрузка изображений. Например: <p> <img src= "IMG_0013. jpg" align=center alt= " Карпаты " Width=50% Height =50%> </p>

Гиперссылки в НТМL – документе. Переход от одного фрагмента текста к другому или от одной страницы к другой задается с помощью тэга: <a href=адрес перехода> ссылка(текст или изображение) </a> В качестве параметра адрес перехода может использоваться: • имя другого HTML-документа, к которому нужно перейти. Например: <a href= "index. html"> Перейти на главную </a> Eсли в адресе перехода не указан каталог, переход будет выполнен внутри текущего каталога. Если в адресе перехода не указан сервер, переход будет выполнен на текущем сервере.

• полный URL-адрес web-страницы. Например, <a href="http: //www. ns 2. ripo. unibel. by/home/pr. htm"> Практическое руководство по HTML </a> • имя анкера – некоторой опорной точки в текущем или другом документе, к которой нужно осуществить переход. Ссылки возможны не только на HTML-документы, но и на другие ресурсы.

Скачать презентацию Лекция 13 Разработка Web-страниц средствами языка HTML

лекция 13.ppt

Количество слайдов: 31