Поперечные профили набережных и береговой полосы: На городских территориях берегоукрепление проектируют с учетом технических и экономических требований, но особое значение придают эстетическим...
История создания датчика движения: Первый прибор для обнаружения движения был изобретен немецким физиком Генрихом Герцем...
Топ:
Проблема типологии научных революций: Глобальные научные революции и типы научной рациональности...
Когда производится ограждение поезда, остановившегося на перегоне: Во всех случаях немедленно должно быть ограждено место препятствия для движения поездов на смежном пути двухпутного...
Характеристика АТП и сварочно-жестяницкого участка: Транспорт в настоящее время является одной из важнейших отраслей народного хозяйства...
Интересное:
Наиболее распространенные виды рака: Раковая опухоль — это самостоятельное новообразование, которое может возникнуть и от повышенного давления...
Мероприятия для защиты от морозного пучения грунтов: Инженерная защита от морозного (криогенного) пучения грунтов необходима для легких малоэтажных зданий и других сооружений...
Лечение прогрессирующих форм рака: Одним из наиболее важных достижений экспериментальной химиотерапии опухолей, начатой в 60-х и реализованной в 70-х годах, является...
Дисциплины:
 2019-12-19 |
 297 |
из
5.00
|
Заказать работу |
|
|
|
|
Послание № 2
Атрибуты HTML тегов
Теги могут иметь атрибуты. Атрибут — это дополнительное свойство тега. Некоторые теги есть смысл использовать только с атрибутами. Наиболее яркий пример — тег <img>, обозначающий изображение. Для него обязательно нужно указывать атрибут src, который задаёт адрес картинки, без этого атрибута браузер просто не сможет загрузить её.
Названия и значения атрибутов не чувствительны к регистру, но, тем не менее, рекомендуется набирать их в нижнем регистре. Значение атрибута заключается в кавычки "". Порядок расположения атрибутов в любом теге не имеет значения и на результат отображения элемента не влияет.
Когда для тега не добавлен какой-либо допустимый атрибут, браузер будет подставлять значение, заданное по умолчанию.
Картинки в HTML
Использование графики делает веб-страницы визуально привлекательнее. Изображения помогают лучше передать суть и содержание веб-документа.
Изображения добавляются на веб-страницы с помощью тега <img>. Элемент <img> представляет изображение и его резервный контент, который добавляется с помощью атрибута alt. Так как элемент <img> является строчным, то рекомендуется располагать его внутри блочного элемента, например, <div> или <figure>.
Тег <img> имеет обязательный атрибут src, значением которого является абсолютный или относительный путь к изображению.
Размеры изображения
Без задания размеров изображения рисунок отображается на странице в реальном размере. Отредактировать размеры изображения можно с помощью атрибутов width и heigh или стилей CSS. Если будет задан только один из атрибутов, то второй будет вычисляться автоматически для сохранения пропорций рисунка.
|
|
Форматы графических файлов
Ниже приведены самые часто используемые форматы изображений с кратким описанием.
Формат JPEG (Joint Photographic Experts Group). Изображения JPEG идеальны для фотографий, они могут содержать миллионы различных цветов. Сжимают изображения лучше GIF, но текст и большие площади со сплошным цветом могут покрыться пятнами.
Формат GIF (Graphics Interchange Format). Идеален для сжатия изображений, в которых есть области со сплошным цветом, например, логотипов. GIF-файлы позволяют установить один из цветов прозрачным, благодаря чему фон веб-страницы может проявляться через часть изображения. Также GIF-файлы могут включать в себя простую анимацию. GIF-изображения содержат всего лишь 256 оттенков, из-за чего изображения выглядят пятнистыми и нереалистичного цвета, как плакаты.
Формат PNG (Portable Network Graphics). Включает в себя лучшие черты GIF- и JPEG-форматов. Содержит 256 цветов и дает возможность сделать один из цветов прозрачным, при этом сжимает изображения в меньший размер, чем GIF-файл.
Формат SVG (Scalable Vector Graphics). SVG-рисунок состоит из набора геометрических фигур, описанных в формате XML: линия, эллипс, многоугольник и т.п. Поддерживается как статичная, так и анимированная графика. Набор функций включает в себя различные преобразования, альфа-маски, эффекты фильтров, возможность использования шаблонов. Изображения в формате SVG могут изменяться в размере без снижения качества.
Ссылки Якоря
Якорем называется закладка с уникальным именем на определенном месте веб-страницы, предназначенная для создания перехода к ней по ссылке.
Якоря удобно применять в документах большого объема, чтобы можно было быстро переходить к нужному разделу.
Для создания якоря следует вначале сделать закладку в соответствующем месте, присвоив элементу уникальный идентификатор id.
В качестве значения href для перехода к этому якорю используется указанный id с символом решетки (#) впереди.
| <ul> <li><a href="#one">Lorem.</a></li> <li><a href="#two">Rem?</a></li> </ul> <div> <p id='one'> Далеко-далеко за словесными горами в стране гласных и согласных.</p> <p id='two'> Буквенных родного вершину, дал которой текста инициал агентство, решила!</p> </div> |
|
|
HTML Атрибуты
Для изменения размеров изображения средствами HTML. Допускается использовать значения в пикселах или процентах. Если установлены проценты, то размеры изображения вычисляются относительно родительского элемента — контейнера. Добавление только одного атрибута width или height сохраняет пропорции и отношение сторон изображения
Таблицы
|
|
HTML-таблицы упорядочивают информацию и выводят её на экран с помощью строк и столбцов.
Ячейки таблиц могут содержать любые HTML-элементы, такие как заголовки, списки, текст, изображения, элементы форм, а также другие таблицы.
Важно!
Таблицы больше не используются для вёрстки веб-страниц и компоновки отдельных элементов, потому что такой приём не обеспечивает гибкость структуры и адаптивность сайта, существенно увеличивая HTML-разметку.
Создаем таблицу
Таблица создаётся при помощи парного тега <table> </table>. Данный тег является контейнером для элементов таблицы и все элементы должны находиться внутри него. Например, с помощью данной разметки можно создать таблицу, состоящую из двух столбцов и двух строк:
<table>
<tr><td>ячейка 1</td><td> ячейка 2</td></tr>
<tr><td>ячейка 3</td><td> ячейка 4</td></tr>
</table>
Так! Стоп! Стоп! Стоп!!! Я немного разогнался и не объяснил, что к чему, поэтому сейчас пойдем подробнее))) Если с созданием общего контейнера таблицы при помощи тега <table> … </table> все просто, то теперь давайте разберем строки.
Создаем ячейку тела таблицы
Элемент <td> создаёт ячейки таблицы, внутрь которых помещаются данные таблицы. Парные теги <td></td>, расположенные в одном ряду, внутри тегов <tr> … </tr>, определяют количество ячеек в строке таблицы.
Количество пар ячеек <td> должно быть равно количеству пар ячеек <th>.
<table>
<tr><th>ячейка заголовка 1</th><th>ячейка заголовка 2</th></tr>
<tr><td>ячейка тела таблицы 1</td><td>ячейка тела таблицы 2</td></tr>
<tr><td>ячейка тела таблицы 3</td><td>ячейка тела таблицы 4</td></tr>
</table>
Добавляем рамку
Как вы думаете, чего не хватает в таблице из примера выше? Правильно — рамок. Рамки отсутствуют, потому что браузер использует стандартный атрибут border со значением 0. Давайте исправим это и изменим атрибут border с 0 на 1.
|
|
<table border="1">
<tr><th>ячейка 1</th><th>ячейка 2</th></tr>
<tr><td>ячейка 3</td><td>ячейка 4</td></tr>
<tr><td>ячейка 5</td><td>ячейка 6</td></tr>
</table>
Убираем отступы
Мы задали рамки таблицы с помощью атрибута, но они не так хороши, как хотелось бы. По умолчанию браузер рисует рамки таблицы и рамки отдельных ячеек раздельно, это отлично видно на примере.
Чтобы избавиться от таких двойных рамок, используется атрибут cellspacing равный 0. Вот так:
<table border="1" cellspacing="0">
<tr><th>ячейка 1</th><th>ячейка 2</th></tr>
<tr><td>ячейка 3</td><td>ячейка 4</td></tr>
<tr><td>ячейка 5</td><td>ячейка 6</td></tr>
</table>
Добавляем подпись к таблице
Элемент <caption> создает подпись таблицы. Добавляется он непосредственно после тега <table>, вне строки или ячейки.
<table>
<caption>Перечень продуктов</caption>
<tr>
<th>№</th><th>Наименование товара</th>
</tr>
<tr>
<td>1</td><td>Томаты свежие</td
</tr>
<tr>
<td>2</td><td>Огурцы свежие</td>
</tr>
</table>
Table атрибуты
Селекторы в CSS
Следом за тегом мы видим h 1 — это так называемый селектор.
Когда вы задаёте стили тега с помощью атрибута style, браузер сразу же понимает, к какому именно тегу применить эти стили (потому что стили находятся внутри тега). Но когда стили подключаются через тег <style>, браузер ищет стилизуемые теги с помощью «селекторов».
Селектор — непонятное слово, правда? Но, мы упростим его и будем называть — проводник, потому что он берет CSS стили и проводит их до тега, на который мы указываем. В данном случае это тег <h1>. У каждого проводника (селектора), есть свое уникальное имя.
Язык селекторов очень мощный и гибкий. Простейший тип селекторов — селекторы по имени тега: p, h1 и так далее. Когда браузер видит такой селектор, он применяет стили и правила ко всем подходящим тегам. Например, ко всем текстовым абзацам или ко всем заголовкам первого уровня.
|
|
В общем случае написание CSS-правил выглядит так:
селектор {
свойство1: значение;
свойство2: значение;
...
}
Разобравшись с проводниками (селекторами) по имени тега, давайте подумаем, а удобно использовать только такой вид селекторов или нет.
В большинстве случаев это не удобно, потому что ограничивает нас в выборе тегов, которые мы хотим сделать стильными.
Вот представьте, что нам нужно оформить только один абзац или один заголовок из десятка подобных абзацев или заголовков.
На помощь к нам приходят классы и идентификаторы.
Классы в CSS
Класс — это всего лишь один из атрибутов HTML-тегов, например:
<p class="help">...</p>
В CSS можно задавать стили для элементов с определённым классом. Для этого используется селектор по классу, который пишется так: .имя-класса, например:
.help { color: green; } — выберет все теги у которых есть атрибут class со значением "help".
Классы гибкие, их можно создавать много и называть любыми понятными именами.
Идентификаторы в CSS
Идентификатор — это еще один из атрибутов HTML-тегов, например:
<p id="name">...</p>
В CSS также можно задавать стили для элементов с определённым идентификатором. Для этого используется селектор по id, который пишется так: #имя-идентификатора, например:
#name { color: red; } — выберет все теги с идентификатором равным "name"
Различия id и class
Так стоп, а в чем же разница между id и class, ведь с виду они выполняют одинаковую работу?
Верно, работу они выполняют одинаковую, а вот функционал у них разный. Id служит для объявления одного уникального и неповторимого элемента на WEB странице (такой элемент только один), а вот class в свою очередь может примется ко многим элементам. Например, можно сделать много одинаковых блоков зеленого цвета.
Важно!
Имя класса или идентификатора может содержать в себе латинские символы, цифры, символы дефиса “-” и подчеркивания “_” и начинаться оно должно с латинского символа.
Свойства и значения CSS
Итак, язык CSS состоит из селекторов и свойств. Селекторы указывают на то, к каким элементам применять стили, а свойства — на то, как именно отображать выбранные элементы.
Существует огромное количество CSS-свойств, которые влияют практически на все аспекты отображения элементов. Их можно разбить на следующие группы:
· оформление текста;
· работа с размерами и отступами;
· позиционирование элементов;
· декоративные: цвета, фон, тени;
· другие.
Причём каждому свойству соответствует определённый набор значений. Некоторые значения задаются с помощью текстовых констант, например: red, bold, другие с помощью цифровых значений: 12px, 120% и так далее.
Мощь стилей заключается в том, что вы можете быстро и гибко менять внешний вид нужных элементов, особенно когда используете классы. Например, чтобы изменить цвет блоков с зеленого цвета на синий, нужно изменить всего лишь одну строчку в CSS:
.block{ background-color: blue; }
И все теги с классом.block изменят свой цвет. Теперь представьте, как долго делать то же самое через инлайновые стили (атрибут тега style=””), когда таких блоков сотни.
CSS свойства
Описание
Устанавливает ширину блочных элементов.
Ширина не включает толщину границ вокруг элемента, значение отступов и полей.
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), проценты (%) и др. При использовании процентной записи ширина элемента вычисляется в зависимости от ширины родительского элемента. Если родитель явно не указан, то в его качестве выступает окно браузера.
Устанавливает высоту блочных или заменяемых элементов (к ним, например, относится тег <img>).
Высота не включает толщину границ вокруг элемента, значение отступов и полей.
Если содержимое блока превышает указанную высоту, то высота элемента останется неизменной, а содержимое будет отображаться поверх него. Из-за этой особенности может получиться наложение содержимого элементов друг на друга, когда элементы в коде HTML идут последовательно.
Определяет цвет текста элемента.
Определяет цвет фона элемента.
CSS селекторы
Селектор тега h2 - стили CSS будут применятся ко всем тегам <h2> … </h2> в HTML документе
Селектор идентификатора - стили CSS будут применятся только к элементу с идентификатором id=”logo”
Селектор класса - стили CSS будут применятся ко всем элементам с классом class=”container”
Различия между id и class
id
Объявляется: <div id="logo"> …</div>
Применяется только к одному элементу на WEB
странице.
Послание № 2
Атрибуты HTML тегов
Теги могут иметь атрибуты. Атрибут — это дополнительное свойство тега. Некоторые теги есть смысл использовать только с атрибутами. Наиболее яркий пример — тег <img>, обозначающий изображение. Для него обязательно нужно указывать атрибут src, который задаёт адрес картинки, без этого атрибута браузер просто не сможет загрузить её.
Названия и значения атрибутов не чувствительны к регистру, но, тем не менее, рекомендуется набирать их в нижнем регистре. Значение атрибута заключается в кавычки "". Порядок расположения атрибутов в любом теге не имеет значения и на результат отображения элемента не влияет.
Когда для тега не добавлен какой-либо допустимый атрибут, браузер будет подставлять значение, заданное по умолчанию.
Картинки в HTML
Использование графики делает веб-страницы визуально привлекательнее. Изображения помогают лучше передать суть и содержание веб-документа.
Изображения добавляются на веб-страницы с помощью тега <img>. Элемент <img> представляет изображение и его резервный контент, который добавляется с помощью атрибута alt. Так как элемент <img> является строчным, то рекомендуется располагать его внутри блочного элемента, например, <div> или <figure>.
Тег <img> имеет обязательный атрибут src, значением которого является абсолютный или относительный путь к изображению.
Размеры изображения
Без задания размеров изображения рисунок отображается на странице в реальном размере. Отредактировать размеры изображения можно с помощью атрибутов width и heigh или стилей CSS. Если будет задан только один из атрибутов, то второй будет вычисляться автоматически для сохранения пропорций рисунка.
Форматы графических файлов
Ниже приведены самые часто используемые форматы изображений с кратким описанием.
Формат JPEG (Joint Photographic Experts Group). Изображения JPEG идеальны для фотографий, они могут содержать миллионы различных цветов. Сжимают изображения лучше GIF, но текст и большие площади со сплошным цветом могут покрыться пятнами.
Формат GIF (Graphics Interchange Format). Идеален для сжатия изображений, в которых есть области со сплошным цветом, например, логотипов. GIF-файлы позволяют установить один из цветов прозрачным, благодаря чему фон веб-страницы может проявляться через часть изображения. Также GIF-файлы могут включать в себя простую анимацию. GIF-изображения содержат всего лишь 256 оттенков, из-за чего изображения выглядят пятнистыми и нереалистичного цвета, как плакаты.
Формат PNG (Portable Network Graphics). Включает в себя лучшие черты GIF- и JPEG-форматов. Содержит 256 цветов и дает возможность сделать один из цветов прозрачным, при этом сжимает изображения в меньший размер, чем GIF-файл.
Формат SVG (Scalable Vector Graphics). SVG-рисунок состоит из набора геометрических фигур, описанных в формате XML: линия, эллипс, многоугольник и т.п. Поддерживается как статичная, так и анимированная графика. Набор функций включает в себя различные преобразования, альфа-маски, эффекты фильтров, возможность использования шаблонов. Изображения в формате SVG могут изменяться в размере без снижения качества.
Ссылки Якоря
Якорем называется закладка с уникальным именем на определенном месте веб-страницы, предназначенная для создания перехода к ней по ссылке.
Якоря удобно применять в документах большого объема, чтобы можно было быстро переходить к нужному разделу.
Для создания якоря следует вначале сделать закладку в соответствующем месте, присвоив элементу уникальный идентификатор id.
В качестве значения href для перехода к этому якорю используется указанный id с символом решетки (#) впереди.
| <ul> <li><a href="#one">Lorem.</a></li> <li><a href="#two">Rem?</a></li> </ul> <div> <p id='one'> Далеко-далеко за словесными горами в стране гласных и согласных.</p> <p id='two'> Буквенных родного вершину, дал которой текста инициал агентство, решила!</p> </div> |
HTML Атрибуты
Для изменения размеров изображения средствами HTML. Допускается использовать значения в пикселах или процентах. Если установлены проценты, то размеры изображения вычисляются относительно родительского элемента — контейнера. Добавление только одного атрибута width или height сохраняет пропорции и отношение сторон изображения
Таблицы
HTML-таблицы упорядочивают информацию и выводят её на экран с помощью строк и столбцов.
Ячейки таблиц могут содержать любые HTML-элементы, такие как заголовки, списки, текст, изображения, элементы форм, а также другие таблицы.
Важно!
Таблицы больше не используются для вёрстки веб-страниц и компоновки отдельных элементов, потому что такой приём не обеспечивает гибкость структуры и адаптивность сайта, существенно увеличивая HTML-разметку.
Создаем таблицу
Таблица создаётся при помощи парного тега <table> </table>. Данный тег является контейнером для элементов таблицы и все элементы должны находиться внутри него. Например, с помощью данной разметки можно создать таблицу, состоящую из двух столбцов и двух строк:
<table>
<tr><td>ячейка 1</td><td> ячейка 2</td></tr>
<tr><td>ячейка 3</td><td> ячейка 4</td></tr>
</table>
Так! Стоп! Стоп! Стоп!!! Я немного разогнался и не объяснил, что к чему, поэтому сейчас пойдем подробнее))) Если с созданием общего контейнера таблицы при помощи тега <table> … </table> все просто, то теперь давайте разберем строки.
Создаем строки (ряды) таблицы
Строки или ряды таблицы создаются с помощью тега <tr>. Количество горизонтальных строк таблицы определяется количеством парных тегов <tr></tr>.
<table>
<tr> … </tr>
<tr> … </tr>
<tr> … </tr>
</table>
|
|
|
Особенности сооружения опор в сложных условиях: Сооружение ВЛ в районах с суровыми климатическими и тяжелыми геологическими условиями...
Биохимия спиртового брожения: Основу технологии получения пива составляет спиртовое брожение, - при котором сахар превращается...
Наброски и зарисовки растений, плодов, цветов: Освоить конструктивное построение структуры дерева через зарисовки отдельных деревьев, группы деревьев...
Двойное оплодотворение у цветковых растений: Оплодотворение - это процесс слияния мужской и женской половых клеток с образованием зиготы...
© cyberpedia.su 2017-2024 - Не является автором материалов. Исключительное право сохранено за автором текста.
Если вы не хотите, чтобы данный материал был у нас на сайте, перейдите по ссылке: Нарушение авторских прав. Мы поможем в написании вашей работы!