Главная | Обратная связь | Поможем написать вашу работу!
МегаЛекции

Средства языка HTML для представления текстовой информации на Web-странице




Тэг абзаца <P>

Как известно, любой текст состоит из абзацев. Для определения абзацев текста на Web-странице используется тэг < P >.

Пример:

< P >Этот текст является отдельным абзацем</ P >

В языке HTML нет тэгов для создания «красной» строки, поэтому абзацы отделяются друг от друга отступами.Чтобы перейти на новую строчку, не начиная новый абзац, используется тэг < BR >. Данный тэг не имеет закрывающего тэга и ставится в том месте текста, где требуется переход на новую строчку.

Пример:

< P >Это две строчки< BR >одного абзаца</ P >

Результат:

Это две строчки
одного абзаца

Для выравнивания абзацев используется атрибут align тэга < P >. Атрибут align может принимать следующие значения:

left ” – для выравнивания по левому краю;
right ” – для выравнивания по правому краю;
center ” – для выравнивания по центру;
justify ” – для выравнивания по ширине.

Стандартные тэги заголовков

Для выбора размера шрифта можно использовать тэги заголовков. Их всего шесть и они используются для определения заголовков различного уровня. При переходе от первого уровня к шестому постепенно уменьшается размер и толщина букв шрифта. Тэги заголовков записываются как <H1>, <H2>, …, <H6>. Каждый из тэгов имеет соответствующий закрывающийся тэг.

Пример:

< H1 >Это заголовок 1-го уровня</ H1 >
< H2 >Это заголовок 2-го уровня</ H2 >
< H3 >Это заголовок 3-го уровня</ H3 >
< H4 >Это заголовок 4-го уровня</ H4 >
< H5 >Это заголовок 5-го уровня</ H5 >
< H6 >Это заголовок 6-го уровня</ H6 >

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

Тэг определения параметров шрифта <FONT>

С помощью тэга < FONT > можно задать следующие параметры для изображения текста: гарнитуру, размер и цвет.

Тэг < FONT FACE=”гарнитура шрифта” > используется для задания гарнитуры шрифта.

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

Пример: < FONT FACE=”Arial, Sans Serif, Courier" >Любой текст</ FONT >

Тэг < FONT SIZE=”размер шрифта” > используется для установки размера текущего шрифта для отдельных фрагментов текста. Диапазон возможных значений – от 1 до 7. Тэг < FONT COLOR=”цвет” > используется для задания цвета шрифта. Правила записи аргумента атрибута COLOR будут обсуждаться далее.

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

< B > - Полужирный (Bold); < I > - Курсив (Italic); < U > - Подчеркнутый (Underline); < S > - Вычеркнутый; < TT > - Пишущая машинка (Typewriter); < BLINK > - Мерцающий (только для броузера Netscape Navigator).

Для каждого тэга начертания существует соответствующий закрывающийся тэг.

Пример HTML-кода:

<html>
<head>
<title>
Форматирование шрифта
</title>
</head>
<body>
<font face="Arial, Sans Serif, Courier">
Этот текст отображается гарнитурой Arial </font><br>
<font size="4"> Размер этого шрифта равен 4 </font><br>
<font color="#00FF00"> Текст зеленого цвета </font><br>
<B> Полужирный (Bold); </B><br>
<I> Курсив (Italic); </I><br>
<U> Подчеркнутый (Underline); </U><br>
<S> Вычеркнутый; </S><br>
<TT> Пишущая машинка (Typewriter); </TT><br>
<BLINK> Мерцающий (только для броузера Netscape Navigator). </BLINK>
</body>
</html>

Списки

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

Нумерованные списки задаются тэгом < OL >, а маркированные – тэгом < UL >. Оба эти тэга парные, т.е. контейнерные.

С помощью атрибута TYPE тэга <OL> можно задать способ индексации.

TYPE=1 – арабские цифры; TYPE=A – прописные буквы; TYPE=a – строчные буквы; TYPE=i – римские цифры.

С помощью атрибута START тэга <OL> можно задать номер, с которого начинается нумерация элементов списков. Перед элементами списка ставится тэг < LI >, чтобы индексация происходила автоматически. В этом тэге можно использовать вышеописанный атрибут TYPE.

Пример HTML-кода:

<html>
<head>
<title>
Создание списков
</title>
</head>
<body>
<P> Нумерованный список </P>
< OL >
< LI > Январь </ LI >
< LI > Февраль </ LI >
< LI > Март </ LI >
</ OL >
<P> Маркированный список </P>
< UL >
< LI > элемент 1 </ LI >
< LI > элемент 2 </ LI >
< LI > элемент 3 </ LI >
</ UL >
</body>
</html>

 

<!DOCTYPE html>

<html>

<head>

<title>Профессиональное обучение</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />

<link rel="stylesheet" type="text/css" href="styles/fonts.css"/>

<link rel="stylesheet" type="text/css" href="styles/cernel.css"/>

<link rel="stylesheet" type="text/css" href="styles/main-content.css"/>

<script type="text/javascript" src="scripts/jquery-1.11.0.min.js"></script>

<script type="text/javascript" src="scripts/main.js"></script>

<script type="text/javascript" src="scripts/jquery.slimscroll.min.js"></script>

<!--nivo-slider-->

<script type="text/javascript" src="scripts/unslider.min.js"></script>

</head>

<body>

<div class="menu-icon close"></div>

<div class="contents" style="left:-470px">

<div class="relative slimscroll">

<div class="title">Оглавление</div>

<ul class="level-1">

<li><a page="cover">Начало</a></li>

<li><a page="input">Введение</a></li>

<li>Раздел 1. Общие вопросы методики преподавания общетехнических дисциплин профессионального обучения

<ul class="level-2">

<li>1 Общедидактические принципы обучения в системе профессионального обучения

<ul class="level-3">

<li><a page="chapter1_1">1.1 Понятие принципов обучения</a></li>

<li><a page="chapter1_2">1.2 Классификация принципов</a></li>

</ul>

</li>

<li>2 Формы организации теоретического обучения

<ul class="level-3">

<li><a page="chapter2_1">2.1 Основные формы организаций теоретического обучения</a></li>

<li><a page="chapter2_2">2.2 Урок</a></li>

</ul>

<h1>Введение</h1>

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

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

<p>Подготовка педагогов профессионального обучения включает в себя изучение общеобразовательных, общепрофессиональных и профильных (специальных) дисциплин. К специальным предметам относятся общетехнические, технические и педагогические дисциплины.</p>

<!--chapter1.1-->

<div class="page" id="chapter1_1">

<header>

<div class="section">Раздел 1</div>

<div class="title">Общие вопросы методики преподавания общетехнических дисциплин профессионального обучения</div>

</header>

<h1>1 Общедидактические принципы обучения в системе профессионального обучения</h1>

<h2>1.1 Понятие принципов обучения</h2>

ЛАБОРАТОРНАЯ РАБОТА №4

<ТАБЛИЦЫ>

Структура таблицы в HTML

При формировании таблицы обязательно используются три тэга: < TABLE >, < TR > и < TD >. Открывающийся и закрывающийся тэги < TABLE > обозначают соответственно начало и конец таблицы. В составе тэга <TABLE> могут присутствовать следующие атрибуты. Атрибуты тэга <TABLE> Открывающийся и закрывающийся тэги < TR > описывают строку таблицы. Атрибуты тэга <TR> Тэги < TD >…</ TD > определяют конкретную ячейку таблицы. Атрибуты тэга <TD>

Пример.

Таблица, состоящая из двух строк и двух столбцов.

1. <table>

2. <tr>

3. <td> 1 строка, 1 ячейка </td>

4. <td> 1 строка, 2 ячейка </td>

5. </tr>

6. <tr>

7. <td> 2 строка, 1 ячейка </td>

8. <td> 2 строка, 2 ячейка </td>

9. </tr>

10. </table>

<table cellspacing="0">

<caption>Таблица 8.1 – Характеристика форм организации производственного обучения учащихся в условиях производства</caption>

<thead>

<tr>

<th>Форма организации обучения</th>

<th>Преимущества</th>

<th>Недостатки</th>

</tr>

</thead>

<tbody>

<tr>

<td>Урочная – обучение на учебно-производственном участке предприятия</td>

<td>

<ol>

<li>Тесная взаимосвязь производственного и учебного процессов</li>

<li>Мастер имеет возможность одновременно работать со всей группой учащиеся</li>

<li>Возможность создать благоприятные материально-технические и бытовые условия для нормальной организации обучения</li>

<li>Высокий уровень ответственности учащихся за результаты работы</li>

</ol>

</td>

<td>

<ol>

<li>Учащиеся оторваны от рабочего коллектива предприятия, его производственной и общественной жизни</li>

<li>Недостаточно осваиваются производственная технология, темп и ритм работы, современное технологическое оборудование</li>

<li>Пониженная возможность освоения приемов и способов труда передовиков и новаторов производства</li>

</ol>

</td>

</tr>

</tbody>

</table>

ЛАБОРАТОРНАЯ РАБОТА №5

<ГИПЕРССЫЛКИ>

Поделиться:





Воспользуйтесь поиском по сайту:



©2015 - 2024 megalektsii.ru Все авторские права принадлежат авторам лекционных материалов. Обратная связь с нами...