l4 (Презентации лекций)
Описание файла
Файл "l4" внутри архива находится в папке "Презентации лекций". PDF-файл из архива "Презентации лекций", который расположен в категории "". Всё это находится в предмете "веб-дизайн. технологические аспекты" из 8 семестр, которые можно найти в файловом архиве МГУ им. Ломоносова. Не смотря на прямую связь этого архива с МГУ им. Ломоносова, его также можно найти и в других разделах. .
Просмотр PDF-файла онлайн
Текст из PDF
Веб дизайнОбзор HTML CSS PHPHTMLHTMLHyperText Markup Languageязык разметки гипертекстасистема верстки, которая определяет,как и какие элементы должнырасполагаться на веб-странице.Пример страницы html<html><head><meta http-equiv="Content-Type" content="text/html;charset=WINDOWS-1251"><title>Моя веб-страница</title></head><body><h1>Заголовок страницы</h1><p>Основной текст.</p></body></html>Теги одиночные – используютсясамостоятельно<тег атрибут1="значение" атрибут2="значение"> парные (контейнеры) – могутсодержать внутри себя другие тегиили текст<тег атрибут1="значение" атрибут2="значение">...</тег>Пример страницы html<html><head><meta http-equiv="Content-Type" content="text/html;charset=WINDOWS-1251"><title>Моя веб-страница</title></head>контейнер<body><h1>Заголовок страницы</h1><p>Основной текст.</p></body></html>Одиночный тегПарные тегиСостоят из двух частей – открывающий и закрывающий теги<тег атрибут1="значение" атрибут2="значение«>...</тег>Контейнеры можно вкладывать друг в друга, но требуетсясоблюдать порядок: верно неверноПравила применения тегов Атрибуты тегов должны бытьзаключены в кавычки"пример" или 'пример‘ Регистр не имеет значения<BR>, <Br> или <br> Неизвестные теги и атрибутыПравила применения тегов Внутри тега между его атрибутамидопустимо ставить перенос строк<p><img src="images/arena.png" alt="Вид заголовка в IE"width="400" height="101"></p><p><img src="images/arena.png"alt="Вид заголовка в браузере IE"width="400"height="101"></p> Порядок тегов Закрывающие тегиАтрибуты тегов Значения по умолчанию Атрибуты без значений<p><input type="submit" disabled></p> Порядок атрибутов Формат атрибутовТипы теговтеги верхнего уровнятеги заголовка документаблочные элементывстроенные элементыуниверсальные элементыспискитаблицыТеги верхнего уровня<html><head><html><head>...</head><body>...</body></html><body>Теги заголовка документа <title>Используется для отображениястроки текста в левом верхнем углуокна браузера <meta>Метатеги используются дляхранения информации,предназначенной для браузеров ипоисковых систем.Блочные элементы<blockquote><div><h1>,...,<h6><hr><p><pre>Встроенные элементы<a><b> <i> <strong> <em><big> <small><br><img><sub> <sup>Универсальные элементы <del> <ins>Особенность этих тегов состоит в том,что они в зависимости от контекстамогут использоваться как блочныеили встроенные элементыТеги для списков <ol> - нумерованный список <ul> - маркированный список <li> - определяет отдельныйэлемент списка <dd>, <dt>, <dl> - созданиесписка определенийТеги для таблиц <table> - контейнер для элементов,определяющих содержимоетаблицы <tr> - контейнер для созданиястроки таблицы <td> - создание одной ячейкивнутри строки <th> - создание заголовочнойячейкиТеги для фреймов <frame> - определяет свойствоотдельного фрейма <frameset> - заменяет собойэлемент <body> и формируетструктуру фреймов <iframe> - создает плавающийфреймАтрибуты тегов Цвет<body bgcolor="#fa8e47"><body bgcolor="teal" text="#ffffff"> Размер<p><img src="img/f1.jpg" alt="Картинка" width="100"height="111" hspace="4" vspace="4" border="2"></p><p><img src="img/f2.jpg" alt=“Картинка" width="100%"></p> Адрес<a href="http://www.recyclebin/index.html"> Абсолютныйадрес</a><a href=«img/pic.jpg"> Относительный адрес</a>CSSCSS - Cascading Style Sheets,каскадные таблицы стилейСтилем или CSS называется наборпараметров форматирования,который применяется к элементамдокумента, чтобы изменить ихвнешний вид.Пример CSSH1 {color: #000080;font-size: 200%;font-family: Arial, Verdana, sans-serif;text-align: center;}P{padding-left: 20px;}Базовый синтаксис CSSСелектор { свойство1: значение;свойство2: значение; }Правила применения стилей Форма записи расширеннаяtd { background: olive; }td { color: white; }td { border: 1px solid black; } компактнаяtd {background: olive;color: white;border: 1px solid black; }Правила применения стилей Имеет приоритет значение,указанное в коде нижеp { color: green; }p { color: red; } Значениядля color, который устанавливаетцвет текста, в качестве значенийнедопустимо использовать числа Комментарииwidth: 200px; /* Ширина блока */Значения стилейСтрокиЧислаПроцентыРазмеры (относительные иабсолютные единицы) Цвет (шестнадцатеричный, поназванию, RGB) АдресаСелекторы теговВ качестве селектора может выступатьлюбой тег HTML для которогоопределяются правилаформатирования, такие как: цвет,фон, размер и т.д.P { text-align: justify; /* Выравнивание по ширине */color: green; /* Зеленый цвет текста */ }КлассыКлассы применяют, когда необходимоопределить стиль дляиндивидуального элемента вебстраницы или задать разные стилидля одного тега.Тег.Имя класса {свойство1: значение;свойство2: значение; ...
}Пример использованияклассовОписаниеP { /* Обычный абзац */text-align: justify; /* Выравнивание текста по ширине */ }P.cite { /* Абзац с классом cite */color: navy; /* Синий цвет текста */margin-left: 20px; /* Отступ слева */border-left: 1px solid navy; /* Граница слева от текста */padding-left: 15px; /* Расстояние от линии до текста */ }Применение<p>Обычный абзац.</p><p class="cite«>Абзац с классом.</p>Идентификаторы#Имя ид-ра { свойство1: значение;свойство2: значение; ... } Описание#help {left: 160px; /* Положение элемента от левого края */top: 50px; /* Положение от верхнего края */width: 225px; /* Ширина блока */background: #f0f0f0; /* Цвет фона */ } Применение<div id="help"> Применение. </div>КаскадированиеСтиль браузераСтиль пользователяСтиль автораСтиль автора с добавлением!important. Стиль пользователя с добавлением!important.свойство: значение !importantСсылки Теги HTMLhttp://www.htmlbook.ru/ Цвета в HTMLhttp://ru.wikipedia.org/ Полезные советыhttp://webmascon.com/.
