- Главная
- Информатика
- Основные HTML теги и CSS свойства
Содержание
- 2. Зайнаб Нежведиловна Каркас сайта и определения главных тегов Заголовок Тело сайта Элемент предназначен для указания типа
- 3. Вид написания свойства Зайнаб Нежведиловна селектор { свойство: значение; свойство: значение; свойство: значение; } Селектор -
- 4. Повторение изученных тегов Зайнаб Нежведиловна ,..., HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность
- 5. Повторение изученных свойств Зайнаб Нежведиловна width / height ширина / высота данного селектора. (Пример, width: 60%;
- 6. Новые теги Тег задает «шапку» сайта или раздела, в которой обычно располагается заголовок. Тег задаёт «подвал»
- 7. Зайнаб Нежведиловна Новые теги Тег предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG
- 8. Зайнаб Нежведиловна Новые свойства стилей @font-face { font-family: Bookman; //семейство (название) шрифта src: url(/fonts/Roboto.ttf); // путь
- 9. Основы разработки сайтов на системе управления 1С Битрикс Урок 2. Основные HTML теги и CSS свойства
- 11. Скачать презентацию
Зайнаб Нежведиловна
Каркас сайта и определения главных тегов
Заголовок
charset="utf-8">
Тело сайта
Элемент предназначен для указания типа текущего документа. Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису.
Тег является контейнером, который заключает в себе все содержимое веб-страницы, включая теги
и .
Тег предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными.
Элемент определяет заголовок документа. Он не является частью документа и не показывается напрямую на веб-странице. Допускается использовать только один тег на документ и размещать его в контейнере .
определяет метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем.
Элемент предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера . К такой информации относится текст, изображения, теги, скрипты JavaScript и т.д.
Зайнаб Нежведиловна
Каркас сайта и определения главных тегов
Элемент предназначен для указания типа текущего документа. Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису.
Тег является контейнером, который заключает в себе все содержимое веб-страницы, включая теги
Тег предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными.
Элемент
определяет метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем.
Элемент
Вид написания свойства
Зайнаб Нежведиловна
селектор {
свойство: значение;
свойство: значение;
свойство:
Вид написания свойства
Зайнаб Нежведиловна
селектор { свойство: значение; свойство: значение; свойство:
Селектор - это формальное описание того элемента или группы элементов, к которым применяется указанное правило стиля.
(Например, .select - class=”select”
#select - id=”select”
body - тег
Свойство - признак, составляющий отличительную особенность.
Значение - значение приписываемое данному свойству.
(Например, font-size: 15px;
background: blue;
color: white; )
Повторение изученных тегов
Зайнаб Нежведиловна
,..., HTML предлагает шесть заголовков разного уровня, которые
Повторение изученных тегов
Зайнаб Нежведиловна
,..., HTML предлагает шесть заголовков разного уровня, которые
представляет собой наиболее важный заголовок первого уровня, а тег служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги ,..., относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.
,..., относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.
Определяет текстовый абзац. Тег
является блочным элементом, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой отбивкой.
Тег является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы.
Повторение изученных свойств
Зайнаб Нежведиловна
width / height ширина / высота данного селектора.
Повторение изученных свойств
Зайнаб Нежведиловна
width / height ширина / высота данного селектора.
height: 50px; )
color цвет текста. (Пример, color: #00ff00; )
font-size размер шрифта элемента (Пример, font-size: 25px; )
background фон элемента. (Пример, background: url(image.png) no-repeat; )
background: [background-attachment || background-color || background-image || background-position || background-repeat]
border обводка элемента. (Пример, border: 5px solid #ff0000; )
border: [border-width || border-style || border-color]
margin внешний отступ (Пример, margin: 0 auto; )
padding внутренний отступ (Пример, padding: 5px 10px; )
Новые теги
Тег задает «шапку» сайта или раздела, в которой
Новые теги
Зайнаб Нежведиловна
Новые теги
Тег
предназначен для отображения на веб-странице изображений
Зайнаб Нежведиловна
Новые теги
Тег
предназначен для отображения на веб-странице изображений
Тег помечает текст как выделенный. Такой текст ничем не отличается от обычного, но его вид может быть изменен с помощью стилей. В браузере Chrome и Firefox фоновый цвет текста внутри выделяется желтым цветом.
Зайнаб Нежведиловна
Новые свойства стилей
@font-face {
font-family: Bookman; //семейство (название) шрифта
src: url(/fonts/Roboto.ttf); //
Зайнаб Нежведиловна
Новые свойства стилей
@font-face {
font-family: Bookman; //семейство (название) шрифта
src: url(/fonts/Roboto.ttf); //
}
font Универсальное свойство, которое позволяет одновременно задать несколько характеристик шрифта и текста.
display Многоцелевое свойство, которое определяет, как элемент должен быть показан в документе.
display: block | inline | inline-block | inline-table | list-item | none | table | table-caption | table-cell | table-column-group | table-column | table-footer-group | table-header-group | table-row | table-row-group
position Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.
z-index Расположение элемента над/под другими элементами. Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.
top, bottom, right, left Устанавливает положение нижнего края содержимого элемента без учета толщины рамок и отступов.
Основы разработки сайтов на системе управления 1С Битрикс
Урок 2. Основные HTML
Основы разработки сайтов на системе управления 1С Битрикс
Урок 2. Основные HTML
Зайнаб Нежведиловна
text-align Определяет горизонтальное выравнивание текста в пределах элемента.
text-transform Управляет преобразованием текста элемента в заглавные или прописные символы. Когда значение отлично от none, регистр исходного текста будет изменен. (Пример, text-transform: uppercase; )
text-shadow Добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно надписи и радиус размытия.
text-decoration Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания.
list-style Универсальное свойство, позволяющее одновременно задать стиль маркера, его положение, а также изображение, которое будет использоваться в качестве маркера.
list-style: list-style-type || list-style-position || list-style-image