Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь КАТЕГОРИИ: АрхеологияБиология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия Экология ТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Логическое форматирование контента (содержимого).
Замечание: все символы переноса строк исходного документа, хранящегося на сервере, при показе браузером клиента игнорируются. Логическое форматирование – разбиение текста на осмысленные логические фрагменты. Для выделения заголовков в HTML существуют 6 заголовков <h1> …. </h1> и до 6. В разных браузерах отображение заголовков разное, чем выше уровень заголовка, тем крупнее и жирнее текст в заголовке. Align – выравнивание (center, right, left(по умолчанию)). Пример <H1 align = center> …. </H1>. Абзац – определяется тэгом <P> … </P>. Атрибуты – выравнивание align. Принудительный разрыв строки: <BR>. Пример:<P> текст<BR> текст</P>. Несколько таких тэгов подряд перенесут только на 1 строку! Запрет разрыва <NOBR>текст …. </NOBR>. Вставка горизонтальных линий (подчеркивание) <HR>. Физическое форматирование. Физическое форматирование - Управление начертанием символов. Все тэги парные, могут вкладываться друг в друга. <B> … </B> - жирный текст. <I>… </I> - курсив. <u> … </u> - подчеркнутый <del>… </del> - зачеркнутый <big>…</big> - на уровень выше (текст) <small>…</small> - уменьшенный на 1 пункт <sub> … </sub> - нижний индекс <sup>…</sup> - верхний индекс <font>…</font> - предполагает обязательное наличие атрибутов: · Face = «Arial, Curior, …» если у клиента нет заданного шрифта, то откроется со стандартным. · Size = 1 …. 7 – 3 стандартный размер. · Color = … - цвет который будет применять в данном блоке. Формирование списков. 3 вида списков (до начала и и в конце вставляются пустые строки): · Маркированный. Комбинация тэгов: <ul> <li> строка</li> <li> строка </li> … </ul> · Нумерованный. Атрибуты: type – вид цифры (римские или арабские); start – начальный номер списка (по умолчанию с 1); reversed – обратная нумерация. Для нумерованного списка имеется возможность вставки атрибута в строку value – конкретное значение элемента (явное указание номера строки списка). Пример: <li value=5> … </li> <ol> <li> строка</li> <li> строка </li> … </ol> · Список определений. <dl> <dt> название <dd> значение <dt>… … </dl>
Создание карт на странице. Карта – какое-то изображение внедренное браузером, на котором имеются активные области и щелчок по этой области осуществляет переход на странице.
<img> само изображение <map> наложение карты на изображение <area> выделение активной области Пример: <img src=”my.jpg” Usemap=”#mn1” - имя карты > <map name=”mn1”> <area shape=”rect” coord=”0,0,5,10” href=”адрес (URL)”> </map>
Лекция №3 «Создание таблиц HTML». Таблица – ключевой элемент в веб-программировании. Тэги написания таблиц прямым назначением имеют представление табулирования данных, часто используются дизайнерами для разметки страниц. Шаги создания таблиц в HTML: · дается описание таблицы, · логическая структуризация · формирование строки · разбиение строки на ячейки · повторение с 3 шага, пока не построена таблица полностью Ключевые тэги для построения таблицы: · <TABLE> … </TABLE> - объявление, атрибут: border 0 – нет линий (1,2,3 – толщина линии). · <CAPTION> … </CAPTION> - заголовок таблицы · <TR>…</TR> - объявление строки · <TH>…</TH> - ячейки шапки (заголовочные ячейки) · <TD>…</TD> - выделение обычных ячеек · Тэги TD и TH допускают использовать 2 атрибута: <colspan> - слияние ячеек (строка), <rowspan> - слияние по строкам (столбец). <TD colspan = 2> … </TD>
Пример простейшей таблицы: <TABLE border =2> <CAPTION> Личности</CAPTION> <TR> <TH>Фамилия</TH> <TH>Имя</TH> </TR> <TR> <TD>Петров</TD> <TD>Вася</TD> </TR></TABLE> Начиная с пятой версии языка HTML стало возможно выделять шапку, тело и подвалы таблиц. Для того чтобы в случае прокрутки таблицы шапка и подвал таблицы оставались на месте, а содержимое прокручивалось. 3 дополнительных тэга объявления таблиц: <THEAD>…</THEAD> - заголовок <TBODY>…</TBODY> - тело, то что будет прокручиваться <TFOOT>…</TFOOT> - подвал Эти тэги должны объявляться в таблице до начала разбиения на строки. <table > <caption> … </caption> <thead> <TR> <TH> …</TH></TR> </thead> <tfoot> … </tfoot> <tbody> <TR><TD> … </TD></TR> </tbody></table>
«Блоки или блочные элементы» Блок – прямоугольная область с произвольным содержимым. Padding – расстояние от содержимого до рамки в блоке. Margin – отступ от содержимого страницы до рамки в блоке.
Положением блока на странице можно управлять с точностью до пикселя. Блок объявляется тэгом: <DIV> … </DIV>, атрибут style – стиль. «Вставка объектов в документ». Под объектом понимается любой файл, с которым язык не может работать, как правило это внешние файлы, которые нужно добавить на страничку. Для вставки используется тэг: <OBJECT атрибуты > замещающий текст </OBJECT>, сам объект описывается в атрибутах тэга. Атрибуты: · Height, width – размер, который занимает объект на странице. · Data – имя ресурса. · Type - тип данных. Пример, добавление флэш-ролика: <object Width = 300 Height = 300 Data = “my.swf”> Не показывает!</object> Видео-ролики вставляются специальным (отдельным) тэгом: <video атрибуты> замещающий текст </video>. Атрибуты: · Height, width · Autoplay – по кнопке, или автоматический запуск видео · Controls – · Loop – цикличное проигрывание (бесконечно, однократно) · Src - источник, откуда будет браться файл · Muted – будет ли автоматически сопровождаться звуком, либо надо нажать кнопку
Лекция №4 «Стили в HYML». Для описания стиля веб-страницы создан специальный язык CSS (каскадные таблицы стилей). Стили позволяют более гибко и эффективно управлять положением и поведением элемента веб-страницы. Синтаксис языка: · Селектор (имя стиля) – соответствует имени тэга, которому будет применяться · {имя – свойства: “значения”; имя – свойства: “значения”; …} Пример: body {background – color: “black”;} Допускается группирование свойств: P,H1 {background – color: “red”} 3 понятия: класс, псевдокласс и псевдоэлементы. Класс – вариант оформления элемента. Класс отделяется от имени стиля точкой. Пример: H1.red {text – color: “red”} H1.green {text – color: “green”} Можно создать глобальный класс, при этом имя тэга не указываем, название начинается с точки. Пример:.red {…} в коде <p class = red> Псевдокласс – определяет вид элемента в зависимости от действия пользователя. В отличие от классов, псевдоклассы прописаны в стандарте (их нельзя создавать, но можно использовать). Имена псевдоклассов: · Active: создается для активного элемента · Focus: для элементов в фокусе · Hover: для элементов которые под указателем мыши · Link: для не посещенных ссылок · Visited: для посещенных ссылок · First-child:для первого потомка Пример: H1:hover {…} Псевдоэлемент – позволяют управлять частью какого-то элемента на веб-страницы. Псевдоэлементы описываются как псевдоэлементы: · First-letter: оформление первого элемента строки · First-line: оформление для первой строки · Before: вставка специального объекта перед элементом · After: вставка специального объекта после элемента Пример: P:after {content: url (img.img)}
«Оформление фона». Эти свойства присущи всем элементам для которого существует понятие фон. Background-position: задает местоположение базовой точки (фонового изображения) через:. “Top left”, “top right”, … “x y”, “x% y%” Background –attachment: это свойство может принимать одно из двух значений (зафиксировано, либо прокручиваться вместе с основным текстом). “fixed”, “scroll” Background – color: создается цвет, который желаете. “transparent” - прозрачный Background – image: размещение картинки Background – repeat: способ заполнения всю площадь объекта картинкой. “repeat”заполнить, “no-repeat” не заполнить, “repeat x(y)” заполнить по осям. «Свойства оформления текста». Color: задание цвета
Letter-spacing: расстояние пробела между буквами, принимает 2 значения: “normal”-нормальный пробел, “length” длинный пробел. Vertical-align: вертикальное выравнивание текста. Text-align: горизонтальное выравнивание текста. Text-ident: красная строка. Direction: направление текста (горизонтальное (обычное) либо вертикальное). Word-spasing: расстояние между словами. Line-height: межстрочное расстояние (поставить нормальное, либо указать в пикселях). «Свойства работы со шрифтом». Font-size: задание размера шрифта. Font-weight: ширина символов. Font-variant: символы либо заглавными либо строчными. (big, small, normal) Font-stile: стиль текста. Font-family: начертание текста (тип шрифта: Times New Roman, Arial и т.д.)
Лекция №5 В настоящее время верстка страниц жестко реализуется через блочные элементы. <div> </div>
|
|||||||
Последнее изменение этой страницы: 2016-08-06; просмотров: 199; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 34.207.178.236 (0.032 с.) |