Форсирование обрыва строки: элемент BR

Заголовок таблицы: <TH>...</TH>

Ячейка заголовка таблицы имеет ширину всей таблицы; текст в данной ячейке имеет атрибут BOLD и ALIGN=center.  

Подпись: <CAPTION>...</CAPTION>

Данный тэг описывает название таблицы (подпись). Тэг <CAPTION> должен присутствовать внутри <TABLE>...</TABLE>, но снаружи описания какой-либо строки или ячейки. По умолчанию <CAPTION> имеет атрибут ALIGN=top, но может быть явно установлен в ALIGN=bottom. ALIGN определяет, где - сверху или снизу таблицы - будет поставлена подпись. Подпись всегда центрирована в рамках ширины таблицы. 

Основные атрибуты таблицы

BORDER

Данный атрибут используется в тэге TABLE. Если данный атрибут присутствует, граница таблицы прорисовывается для всех ячеек и для таблицы в целом. BORDER может принимать числовое значение, определяющее ширину границы, например BORDER=3.  

ALIGN

Если атрибут ALIGN присутствует внутри тэгов < CAPTION> и </CAPTION >, то он определяет положение подписи для таблицы (сверху или снизу). По умолчанию ALIGN=top.  

Если атрибут ALIGN встречается внутри <TR>, <TH> или <TD>, он управляет положением данных в ячейках по горизонтали. Может принимать значения left (слева), right (справа) или center (по центру).

VALIGN

Данный атрибут встречается внутри тэгов <TR>, <TH> и <TD>. Он определяет вертикальное размещение данных в ячейках. Может принимать значения 

top (вверху), bottom (внизу), middle (по середине) и baseline (все ячейки строки

прижаты кверху).

COLSPAN

Указывает, какое количество ячеек будет объединено по горизонтали для указанной ячейки. По умолчанию - 1. 

ROWSPAN 

Указывает, какое количество ячеек будет объединено по вертикали для указанной ячейки. По умолчанию - 1. 

COLSPEC

Данный параметр позволяет задавать фиксированную ширину колонок либо в символах, либо в процентах, например COLSPEC="20%".  

Таблица создается с помощью тега <Table>.  

АТРИБУТЫ:

BORDER="1"> -толщина рамки

BGCOLOR="green"> -заливка цветом ячейки

BACKGROUND="web.jpg"> -заливка растровым изображением

COLSPAN="3" -объединение ячеек по горизонтали

ROWSPAN="3" - объединение ячеек по вертикали

WIDTH     – ширина ячейки

HEIGHT   - высота ячейки

"TABLE BORDER="1"> <TR> <TD>Таблица из одной строки</TD> <TD>из трех столбцов</TD> <TD>без указания ширины таблицы    и ячеек.</TD> </TR> </TABLE>
<TABLE BORDER="1"> <TR> <TD COLSPAN="3" >Привет!</TD> </TR> <TR> <TD>Вася,</TD> <TD>Петя,</TD> <TD>Маша!</TD> </TR> </TABLE>

<TABLE BORDER="1"> <TR> <TD ROWSPAN="3"> Привет!</TD> <TD>Вася,</TD> </TR> <TR><TD>Петя,</TD></TR> <TR><TD>Маша!</TD></TR> </TABLE>

<TABLE BORDER="1" BGCOLOR="green"> <TR HEIGHT=30 BGCOLOR="blue"> <TD><FONT COLOR="white"> Привет!</FONT> </TD> <TD BGCOLOR="red"></ TD> </TR> <TR> <TD BACKGROUND="web.jpg"> Таблица из двух строк</TD> <TD>и двух столбцов</TD> </TR> </TABLE>

Принцип построения таблицы

<ТАВLЕ>

      <CAPTION> название таблицы </CAPTION>   

   <TR>

                                <TH>

                                        _{Ячейка заголовка столбца}

  </TH>

            ………………..

            ………………..

                                <TH>

                                        Ячейка заголовка столбца

                   </TH>

  </TR>                <TR>

                                <TD>

                                 Ячейка данных столбца

                   </TD>

               ………………

                                <TD>

                                 Ячейка данных столбца

                   </TD>

               ……………….

                                <TD>

                                 Ячейка данных столбца

                   </TD>

     </TR>       

</ТABLE> 

Выравнивание в ячейке

По горизонтали ALIGN=

Left   - влево

Center - по центру

Right - вправо

По вертикали VALIGN=

Top - вверх

Middle - по центру

Bottom - вниз

Цветовые схемы. Шрифты.

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

Цвет на Web-странице задают либо его названием, либо числовым шести разрядным шестнадцатеричным кодом #RRGGBB (первые два разряда задают интенсивность красного цвета, вторые – зеленого и третьи – синего). 

Значение яркости цвета может меняться от минимальной 00 до максимальной FF. В таблице приведены примеры некоторых цветов: 

ДОПОЛНИТЕЛЬНАЯ СПРАВОЧНАЯ ИНФОРМАЦИЯ
ПО РАБОТЕ С ГИПЕРТЕКСТОМ

1 В конце задания – раздел ПРИЛОЖЕНИЕ

2 В папке «справки по HTML» в которой имеются руководства и справочники.

ПРАКТИЧЕСКАЯ РАБОТА HTML-2

(ЗАДАНИЯ для выполнения)

ТЕОРИЯ

Создание первого HTML-документа.

Знакомство со структурой HTML-документа.

HTML-документ заключается в теги <HTML> и </HTML>.

Между этими тегами два блока:

- блок заголовка 

 <HEAD> </HEAD> - содержит описание параметров, используемых при отображении документов, но не отображающихся в окне обозревателя. 

Например:

<TITLE> Название страницы </TITLE>.

- тело документа 

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

Практическое задание № 1:

Порядок выполнения:

1. Чтобы открыть программу «Блокнот», нужно зайти в «Пуск», затем выбрать «Все программы», далее «Стандартные», далее «Блокнот». Или правой кнопкой мыши вызвать контекстное меню

Создать Текстовый документ

1. Ввести HTML-код, задающий структуру Web-страницы: 

<HTML>

   <HEAD>

                  <TITLE> Моя первая Web- страница </TITLE>

  </HEAD>

  <BODY>  

  -------------  ---------------

  </BODY>

</HTML>

а) тело документа <BODY> </BODY> - содержит текст, предназначенный для отображения обозревателем:

Практическая работа №

Работа с текстом в HTML-документе.

Работу выполнил ……..

Выровнять текст «Практическая работа №» по центру страницы, используя тэг <Align=center>;

_{Цвет данного текста сделать красным при помощи тэга} <font color=”#FF0000 >

б) создать HTML-документ, в котором будут заданы параметры форматирования текста.

2. Набрать html-код web – страницы:

<html>

<head>

<title> Моя первая страница </title> </head>

<body>

<h1> Практическая работа №__ HTML-2 _</h1>

<h2>Работа с текстом в HTML-документе.</h2>

<h3>Работу выполнил ___________ __ </h3>

                                    ^{(фамилия имя)}

</body>

</html>

3. Сохранить документ с расширением.htm. Для этого:

-  нажать Файл ® Сохранить как…

- В поле «Имя файла» написать Первое_знакомство. htm ® Сохранить.

Запустить браузер и открыть созданный файл командой [Файл - Открыть]. Взаголовке окна браузера высвечивается название Web-страницы Моя первая страница.

Практическое задание № 2  

Задание № 2.1

Сформируйте таблицу, состоящую из двух столбцов и двух строк

 <html>

<head>

              <title>таблицы</title>

</head>

<body>

<center><font size=6>примеры таблиц</font></center>

<hr color="blue">

<h2>простая таблица</h2>

<table border=4 cellspacing=3

<tr><th bgcolor="yellow">заголовок1</th>

    <th bgcolor="yellow"> заголовок 2</th></tr>

<tr><td>ячейка1</td>

    <td> ячейка2</td></tr> <tr><td> ячейка3</td>

    <td> ячейка4</td></tr>

</table>

</body>

</html>

Задание № 2.2

 Создайте таблицу на той же странице. 

Ниже приведены коды разметки

<table border="2"

<tr>

<td bgcolor="#c0c0c0"></td>

<th bgcolor="#c0c0c0">январь</th>

<th bgcolor="#c0c0c0">февраль</th>

<th bgcolor="#c0c0c0">март</th>

</tr>

<tr>

<th bgcolor="#c0c0c0">участок1</th>

<td align="center">33</td>

<td align="center">45</td>

<td align="center">30</td>

</tr>

<tr>

<th bgcolor="#c0c0c0">участок2</th>

<td align="center">40</td>

<td align="center">29</td>

<td align="center">35</td>

</tr>

</table>

Задание № 2.4

1 Самостоятельно создайте таблицу на той же странице по образцу. 

2 Создайте фон в виде рисунка. Изображение найдите в поисковой системе - любой графический файл с расширением *.gif, или *.jpg, или *.png). Опишите его в теге <Table>, атрибут background.

Например: <Table background="fon01.gif".>,  

3 Сделайте заголовок таблицы «Таблица сложной формы с фоновым рисунком». Используйте тег <Caption>Заголовок таблицы </Caption>

Задание № 2.5

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

Горизонтальные линии: элемент HR

Описание: описывает горизонтальную линию

Начальный тег: необходим Конечный тег: запрещён Определения атрибутов : align = left|center|right – определяет горизонтальное выравнивание линии. size = number – определяет высоту линии.

width = number – определяет ширину линии. Значение может быть числовым и в процентах от ширины окна браузера.

color = color – устанавливает цвет линии. Примеры:

Практическое задание № 3

Верхний и нижний индекс

Оформить 2-ю страницу

<HTML>

<HEAD>

<TITLE>Нижние и верхние индексы</TITLE>

<BODY>

a<SUB>2</SUB>

+b<SUB>2</SUB>

=c<SUP>2</SUP>

 </BODY>

</HTML>

Практическое задание № 4

ТЕОРИЯ

Основную цветовую схему Web-страницы можно задать в тэге <BODY> с помощью атрибутов: 

Если вместо тега <body> ввести фрагмент HTML-кода: <body bgcolor=blue text=red>

То

Пример

Задание

Практическое Задание №5 (проект)

ТЕОРИЯ

Задание № 5.1

Локальный сайт будет содержать несколько страниц:

• Главную страницу -index.htm (Заголовок, содержание)

• Страницу с пояснительной запиской - 2.htm/

• Страницу с графическими изображениями (станция, сетевой график, диаграмма поездопотоков)- 3.htm

Все страницы и изображения должны размещаться в одной папке

Задание № 5.2

Задание № 5.3

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

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

< A HREF="carsk.jpg"><IMG SRC="carsk.gif" HEIGHT="75"></A>

Создание гиперссылочной навигации (кнопок, картинок или надписей)
внутри Web-страниц

Создание ссылки на объект и закладок той же страницы. Чтобы построить ссылку на область внутри текущей страницы, первым делом следует дать такой области подходящее название. С этой целью применяется дескриптор <A> с атрибутом NAME. Имя должно содержать только буквы и/или цифры.

Теперь, когда область страницы поименована, на нее можно ссылаться как обычно, с помощью дескриптора <A> и атрибута HREF. Когда пользователь выбирает подобную гиперссылку в окне браузера, на экране воспроизводится требуемая часть web-страницы.

При создании нескольких гиперссылок внутри страницы не забывайте снабжать соответствующие разделы документа уникальными именами.

Гиперссылка внутри одного файла.

Для задания гипертекстового перехода внутри документа используют два тега <A>.

- Первая команда с атрибутом href является источником перехода, а вторая с атрибутом name – приемником:

<A href=#метка> текст или рисунок </A> Задание перехода по метке (закладке) На экран выводится ссылка.

<A name=метка></A>       Метка. Сюда браузер переходит по ссылке. На экране ничего не отображается.

Метка – набор символов (латинских букв и (или) цифр).

Рисунок как гиперссылка:

<A href=имя_файла1> <IMG src=имя_файла height=число> </A>

Текст как гиперссылка:

<A href=имя_файла> текст </A>

1. Щелкните непосредственно перед началом области, на которую необходимо ссылаться (создание закладки).

2. Введите <A NAME=”?”>, заменяя? строкой, содержащей наименование раздела страницы. Имя должно состоять из букв и/или цифровых символов.

3. Наберите </A>, чтобы завершить конструкцию имени раздела страницы, служащего объектом гиперссылки.

Задание № 5.4

Создание закладок (меток) и гиперссылки, указывающей на область web- страницы созданного сайта 1. Щелкните непосредственно перед фрагментом текста или дескриптором графического изображения, которые должны выполнять функцию гиперссылки, указывающей на поименованную ранее область страницы (вставка закладок).

1 Наберите <A HREF=”?”>, заменяя? строкой имени, введенного при выполнении п.2 инструкции.

2 Введите </A> непосредственно после выбранного фрагмента текста или дескриптора изображения.

3 Щелкните на тексте гиперссылки, чтобы перейти к указанной области web-страницы.

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

Например,

 <A NAME=”top”> Оглавление</A>

<A HREF=#top>_{Вернуться к началу}</A>

СПРАВОЧНОЕ ПРИЛОЖЕНИЕ по HTML

Основные теги  

<html> </html> Указывает программе просмотра страниц, что это HTML документ.

<head> </head> Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин.

<body> </body> Определяет видимую часть документа 

Теги оглавления  

<title> </title> Помещает название документа в оглавление программы просмотра страниц

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

<body bgcolor=?> Устанавливает цвет фона документа, используя значение цвета в стандарте RGB - пример: FFFF00 - желтый цвет.

<body text=?> Устанавливает цвет текста документа, используя значение цвета в стандарте RGB - пример: 00ff00 - зеленый цвет.

<body link=?>   Устанавливает цвет гиперссылок, используя значение цвета в стандарте RGB - пример: 00FF00 - зеленый цвет.

<body vlink=?> Устанавливает цвет гиперссылок, на которых вы уже побывали, используя значение цвета в виде стандарте RGB - пример: 333333 - темно-серый цвет.

  <body alink=?> Устанавливает цвет гиперссылок при нажатии.

Теги форматирования текста

<pre> </pre> Обрамляет предварительно отформатированный текст. (как есть!) 

<h1> </h1> Создает самый большой заголовок (как отдельный абзац) 

<h6> </h6> Создает самый маленький заголовок 

<b> </b>    Создает жирный текст 

^{<i> </i>}                       Создает наклонный текст  

<tt> </tt>    Создает текст - имитирующий стиль печатной машинки.

<cite> </cite> Используется для цитат, обычно наклонный текст. 

<em> </em^>   Используется для выделения из текста слова (наклонный или жирный текст)

<font size=?> </font> Устанавливает размер текста в пределах от 1 до 7.

<font color=?> </font>    Устанавливает цвет текста, используя значение цвета в виде RRGGBB.

Гиперссылки

<a href="URL">ТЕКСТ</a> Создает гиперссылку на другие документы или часть текущего документа. Здесь URL адрес ссылки, ТЕКСТ - текст ссылки. 

<a href="URL">

< img src="imgURL" > </a> Создает гиперссылку на рисунок, находящийся по адресу imgURL.

"URL" = "links/main.htm" Адрес документа main.htm, находящегося в локальной папке links данного компьютера.

"URL" = "http://www.rambler.ru" Ссылка на ресурс, находящийся на удаленном компьютере. В адресе присутствуют: программа связи с удаленным компьютером http (H yper T ext T ransfer P rotocol, разделители :// и интернет (IP) адрес искомого ресурса (в данном случае поискового сервера Rambler).

<a href="mailto:EMAIL"> </a> Создает гиперссылку вызова почтовой программы для написания письма по указанному адресу.

<a name="NAME"> </a>   Отмечает часть текста как место перехода по гиперссылке в документе.

<a href="#NAME"> </a>   Создает гиперссылку на помеченную часть текущего документа.

Форматирование

<p>                   Создает новый параграф

<p align=?>     Выравнивает параграф относительно одной из сторон документа, значения: left, right, justify или center

<center> </center> Выравнивает строку текста по центру

<blockquote> </blockquote>    Создает отступы с обеих сторон текста.

<dl> </dl>        Создает список определений. Штанга <dt> Основной снаряд в тяжелой атлетике. Состоит из стального грифа (стержня) со втулками на концах и свободно надевающихся металлических дисков. <dd> 

<dt>              Определяет каждый из терминов списка

<dd>             Описывает каждое определение

<ol> </ol>     Создает нумерованный список

<li^>                Определяет каждый элемент списка и присваивает номер

<ul> </ul>    Создает ненумерованный список

<li>               Предваряет каждый элемент списка и добавляет кружок или квадратик.

<div align=?> Тег, используемый для форматирования больших блоков текста HTML документа. Часто используется в таблицах стилей

Таблицы

<table> </table> Создает таблицу.

<tr> </tr>           Определяет строку в таблице.

<td> </td>          Определяет отдельную ячейку в таблице.

<th> </th>          Определяет заголовок таблицы (нормальная ячейка с отцентрованным жирным текстом)

Атрибуты таблицы

<table border=#>      Задает толщину рамки таблицы. (здесь 5)

<table cellspacing=#> Задает расстояние между ячейками таблицы.

<table cellpadding=#> Задает расстояние между содержимым ячейки и ее рамкой.

<table        Устанавливает ширину таблицы в пикселях или процентах от ширины документа.

<tr align=?>       Устанавливает выравнивание ячеек в таблице, принимает значения:или <td align=?> left, center, или right. (здесь right)

<tr     Устанавливает вертикальное выравнивание для ячеек таблицы, или <td принимает значения: top, middle, или bottom. <td colspan=#>. Указывает количество столбцов которое объединено в одной ячейке. (по умолчанию=1)

<td rowspan=#> Указывает кол-во строк которое объединено в одной ячейке. (по умолчанию=1)

<td nowrap^>      Не позволяет программе просмотра делать перевод строки в ячейке таблицы.

ТЕОРИЯ

Для создания Web-страниц понадобится любой браузер – Internet Explorer или Netscape Communicator, а лучше оба, так как многие элементы HTML по-разному отображаются в разных программах просмотра и весьма желательно контролировать эту разницу. Кроме того, нужен любой текстовой редактор, например, Блокнот из Windows. Программа Блокнот нужна для подготовки HTMLфайлов, а браузер – для просмотра и контроля сделанного. С помощью этих инструментов мы создадим сайт на своем локальном компьютере, после чего поместим его на один из WWW-серверов в Интернете, сделав, таким образом, ваши Web-страницы доступными всему миру.

Что такое HTML

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

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

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

Представления текста в браузере необходимо создать файл с расширением HTML, в который будет записан этот текст, как, например обычный текстовый документ, хранящийся в txt-файле, и определенный набор слов – тегов. Каждый HTML- документ содержит три основных обязательных раздела: HTML, HEAD и BODY. Эти разделы задаются парами тегов: <HTML> и </HTML>, <HEAD> и </HEAD>, <BODY> и </BODY>.       

<HTML> </HTML>

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

<HEAD></HEAD>  

Область заголовка Web-страницы. Задачей заголовка является представление необходимой информации для программы, интерпретирующей документ. Тэги, находящиеся внутри раздела HEAD (кроме тэга <TITLE>), не отображаются на экране.

<BODY> </BODY>

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

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

Элемент TITLE

Описание: определяет заголовок страницы или название окна. Каждый документ HTML обязан содержать элемент TITLE в разделе HEAD. Авторы должны использовать элемент TITLE для идентификации содержимого документа. Поскольку пользователи часто обращаются к документам вне контекста, авторы должны предоставлять осмысленные заголовки. Заголовок не может содержать разметку (в том числе и комментарии).

Элемент BODY

Описание: тело документа. В теле документа находится содержимое документа.

Начальный тег: не обязателен

Конечный тег: не обязателен

Определения атрибутов:

background = "url" (url – это строка, задающая путь в структуре каталогов до файла) – установка фоновой картинки

text = color (значение цвета может быть или 16-ричным числом (предваряемым знаком # в следующем формате #RRGGBB, где RR – градация красного цвета, GG – зеленого, BB – синего), или одним из следующих 16 названий цвета) - устанавливает цвет текста (для визуальных браузеров).

Black (Черный) = "#000000"	Green (Зеленый) = "#008000"
Silver (Серебро)= "#C0C0C0"	Lime (Известь) = "#00FF00"
Gray (Серый) = "#808080"	Olive (Оливковый) = "#808000"
White (Белый) = "#FFFFFF"	Yellow (Желтый)= "#FFFF00"
Maroon (Темно-бордовый) = "#800000"	Navy (Темно-синий) = "#000080"
Red (Красный) = "#FF0000"	Blue (Син 123456Следующая ⇒ Поделиться: Познавательные статьи:  Психологические особенности спортивного соревнования Приготовление дезинфицирующих растворов различной концентрации Занятость населения и рынок труда Социальный статус семьи и её типология 
	Последнее изменение этой страницы: 2021-05-27; просмотров: 157; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 216.73.216.156 (0.012 с.)