4. CSS: Шрифт, фон, инструменты разработчика.

Размер: px
Начинать показ со страницы:

Download "4. CSS: Шрифт, фон, инструменты разработчика."

Транскрипт

1 4. CSS: Шрифт, фон, инструменты разработчика. ГАЛИНА МОРОЗОВА TVLKEK

2 3-й пособ подключения CSS Ещё один способ подключения CSS к документу в отдельном.css-файле. Создаём файл style.css В HTML-документе пишем: <link rel="stylesheet" href="style.css" />

3 Комментарии в HTML и CSS Комментарии пишутся в документ, если: 1. Нужно добавить пояснение к коду 2. Нужно временно заблокировать действие какого-то кода Комментарии не отображаются браузером на страничке, их видно только в коде.

4 Комментарии в HTML и CSS В HTML: <!-- <p>этот параграф закомментирован</p> --> В CSS: многострочный комментарий /*.. */ td /*background-color: red; border: 3px solid #0000ff;*/ однострочный комментарий // td //background-color: red; border: 3px solid #0000ff;

5 Размер шрифта Размер шрифта указывается в следующих форматах: xx-small, x-small, small, medium, large, x-large, xx-large em (высота шрифта элемента), ex (высота символа х), пункты (pt), пикселы (px), проценты (%) Мы будем чаще всего использовать px, rem и em

6 Размер шрифта px размер шрифта в пикселях rem размер шрифта относительно корневого элемента. Если у нас для элемента html указан размер шрифта 14px, то в блоке с размером 1.5rem шрифт будет крупнее в полтора раза. В блоке, где указан размер 0.5rem шрифт будет в 2 раза мельче, чем в html. em работает так же, как rem, только размер задаётся относительно родительского элемента, а не относительно html. //.header является родительским элементом для.menu <div class= header > <div class= menu ></div> </div>

7 Толщина и стиль шрифта.content font-weight: bold; font-style: italic; text-decoration: underline; text-align: center; //left, right, center vertical-align: middle; //top, bottom, middle

8 Семейство шрифтов html, body font-family: Arial, Helvetica, sans-serif; Для отображения браузер берёт шрифты которые установлены на компьютере клиента в том порядке, как они записаны. Если на компьютере нет шрифта Arial, то браузер проверяет, есть ли шрифт Helvetica и т.д.

9 Свой собственный шрифт Можно использовать необычный шрифт, которого скорее всего нет у клиента на компьютере. Его надо скачать в папку с сайтом, и указать имя и путь к нему font-family: myfirstfont; src: url(sansation_light.ttf); div font-family: myfirstfont;

10 Более подробно о шрифтах

11 Фон background-color цвет фона background-image изображение фон background-repeat повторение фона background-attachment будет ли фон прокручиваться background-position позиция фона background-color: #acf566; background-image: url('../img/logo.png'); background-repeat: repeat-x; //repeat-y, no-repeat background-attachment: fixed; //scroll background-position: center top;

12 Несколько картинок-фонов #example1 background-image: url(img_flwr.gif), url(paper.gif); background-position: right bottom, left top; background-repeat: no-repeat, repeat; = #example1 background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;

13 Градиент как фон #grad background: linear-gradient(to bottom right, red, yellow); #grad background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); #grad background: radial-gradient(circle, red, yellow, green);

14 Более подробно про фон и градиент

15 Инструменты разработчика В браузере (рассмотрим на примере Chrome и Firefox) есть встроенные инструменты разработчика. Они позволяют исследовать html-элементы и их стили, а также моделировать изменения в стилях прямо в браузере. Это экономит время. Чтобы включить инструменты разработчика, нажмите в браузере F12 Далее нажмите правой кнопкой мыши на какой-нибудь элемент на странице, и выберите «Исследовать элемент» или «Посмотреть код». На панели инструментов разработчика вы увидите html-код этого элемента и его css-стили. Здесь же можно налету поменять стили и посмотреть изменения.

16 Инструменты разработчика


Лекция Работа со стилями CSS

Лекция Работа со стилями CSS Министерство образования Республики Беларусь Учреждение образования Гомельский государственный университет им. Ф. Скорины Физический факультет «Информационные системы и сети» Лекция Работа со стилями CSS

Подробнее

ИСПОЛЬЗОВАНИЕ КАСКАДНЫХ ТАБЛИЦЕЙ СТИЛЕЙ ВАРИАНТЫ РЕАЛИЗАЦИИ КАСКАДНЫХ ТАБЛИЦ СТИЛЕЙ

ИСПОЛЬЗОВАНИЕ КАСКАДНЫХ ТАБЛИЦЕЙ СТИЛЕЙ ВАРИАНТЫ РЕАЛИЗАЦИИ КАСКАДНЫХ ТАБЛИЦ СТИЛЕЙ 1 ИСПОЛЬЗОВАНИЕ КАСКАДНЫХ ТАБЛИЦЕЙ СТИЛЕЙ ВАРИАНТЫ РЕАЛИЗАЦИИ КАСКАДНЫХ ТАБЛИЦ СТИЛЕЙ Использование внутренних стилей

Подробнее

HTML. язык гипертекстовой разметки

HTML. язык гипертекстовой разметки HTML язык гипертекстовой разметки Обзор HTML CSS Активные html-страницы Инструментальные системы верстки CSS CSS - Cascading Style Sheets, каскадные таблицы стилей Стилем или CSS называется набор параметров

Подробнее

Урок 3 CSS. Cascading Style Sheets, каскадные таблицы стилей

Урок 3 CSS. Cascading Style Sheets, каскадные таблицы стилей Урок 3 CSS Cascading Style Sheets, каскадные таблицы стилей CSS Стилем или CSS называется набор параметров форматирования, который применяется к элементам документа, чтобы изменить их внешний вид. Стили

Подробнее

Каскадные таблицы стилей(css)

Каскадные таблицы стилей(css) Каскадные таблицы стилей(css) Что же такое стиль? Селектор { Правило 1; Правило 2; p { color:red; font-size:60px; Виды стилей 1)Внедренные в страницу HTML5

Подробнее

Практика 9. CSS-свойства: размеры, цвета, шрифты, текст. Размеры Размеры в CSS можно задавать в различных единицах измерения:

Практика 9. CSS-свойства: размеры, цвета, шрифты, текст. Размеры Размеры в CSS можно задавать в различных единицах измерения: Практика 9. CSS-свойства: размеры, цвета, шрифты, текст Размеры Размеры в CSS можно задавать в различных единицах измерения: Гораздо реже используется указание размеров в миллиметрах (mm), сантиметрах

Подробнее

Описание практической работы 4 ОФОРМЛЕНИЕ САЙТА «ИННОВАЦИОННЫЕ ТЕХНОЛОГИИ, ТОВАРЫ И УСЛУГИ» С ПОМОЩЬЮ КАСКАДНЫХ СТИЛЕЙ (CSS)

Описание практической работы 4 ОФОРМЛЕНИЕ САЙТА «ИННОВАЦИОННЫЕ ТЕХНОЛОГИИ, ТОВАРЫ И УСЛУГИ» С ПОМОЩЬЮ КАСКАДНЫХ СТИЛЕЙ (CSS) Описание практической работы 4 ОФОРМЛЕНИЕ САЙТА «ИННОВАЦИОННЫЕ ТЕХНОЛОГИИ, ТОВАРЫ И УСЛУГИ» С ПОМОЩЬЮ КАСКАДНЫХ СТИЛЕЙ (CSS) Время выполнения 4 часа. Цель работы: изучить принципы создания и использования

Подробнее

Знакомство с каскадными таблицами стилей Окулова Виктория Викторовна Учитель информатики

Знакомство с каскадными таблицами стилей Окулова Виктория Викторовна Учитель информатики Знакомство с каскадными таблицами стилей Окулова Виктория Викторовна Учитель информатики 1 Знакомство с каскадными таблицами стилей Оглавление Занятие 1. Основа CSS - селекторы... 3 Занятие 2. Оформление

Подробнее

Лекция 9. План лекции 1.Таблицы в HTML; 2. Каскадные таблицы стилей.css. 9.1.Таблицы в HTML. TABLE таблица. <table> строки таблицы </table>

Лекция 9. План лекции 1.Таблицы в HTML; 2. Каскадные таблицы стилей.css. 9.1.Таблицы в HTML. TABLE таблица. <table> строки таблицы </table> Лекция 9. Таблицы HTML. Стилевое оформление WEB-страниц. CSS Знать 1. Теги по созданию таблиц в HTML; 2. Понятие каскадных таблиц CSS; 3. Понятие селектора, типы селекторов; 4. Основные приемы оформления

Подробнее

Лекция 8. Использование CSS

Лекция 8. Использование CSS Донецкий национальный технический университет Факультет компьютерных наук и технологий Кафедра компьютерной инженерии Лекция 8. Использование CSS Иваница Сергей Васильевич, ассистент кафедры компьютерной

Подробнее

Урок 5. Оформляем веб-страницу с помощью стилевых таблиц

Урок 5. Оформляем веб-страницу с помощью стилевых таблиц Мария Мержанова Урок 5. Оформляем веб-страницу с помощью стилевых таблиц От редакции Серия статей Уроки веб-мастерства, опубликованная в прошлом году, вызвала большой интерес у читателей. В своих письмах

Подробнее

Глава 2. Каскадные таблицы стилей

Глава 2. Каскадные таблицы стилей Глава 2. Каскадные таблицы стилей Рассмотренные в первой главе возможности языка гипертекста HTML позволяют задавать цвет и размер текста с помощью тегов форматирования. Однако, если потребуется быстро

Подробнее

Знакомство с CSS. Общий синтаксис. Першин Александр Александрович

Знакомство с CSS. Общий синтаксис. Першин Александр Александрович Знакомство с CSS Общий синтаксис Першин Александр Александрович Синтаксис CSS CSS-правило: селектор { свойство: значение; свойство: значение; свойство: значение; } 2 Селекторы p {...} /* по тегу */.title

Подробнее

Основы CSS. Оглавление. Что такое CSS. Синтаксис СSS. Оформление CSS. Комментарии в CSS. Способы объявления сss. Inline стили. Cтили в разделе head

Основы CSS. Оглавление. Что такое CSS. Синтаксис СSS. Оформление CSS. Комментарии в CSS. Способы объявления сss. Inline стили. Cтили в разделе head Основы CSS Что такое CSS. Синтаксис CSS. Способы объявления CSS. Селекторы (id, class, tag). Селекторы атрибутов. Основные свойства стилей. Вложенность. Наследование и группирование свойств. Проверка подключения

Подробнее

Каскадные таблицы стилей

Каскадные таблицы стилей Каскадные таблицы стилей Каскадные таблицы стилей (Cascading Style Sheets, CSS) Каскадные таблицы стилей набор правил, описывающих способы представления (отображение и расположение) элемента (или группы

Подробнее

Практическое занятие 10. CSS-свойства: поля, заполнение,

Практическое занятие 10. CSS-свойства: поля, заполнение, границы Практическое занятие 10. CSS-свойства: поля, заполнение, В CSS каждый элемент располагается в блоке, которому можно задать значения полей (margin), заполнения (padding) и границы (border). Поле

Подробнее

Виды стилей. стиль браузера. стиль автора. стиль пользователя

Виды стилей. стиль браузера. стиль автора. стиль пользователя CSS CSS Стили или CSS CSS (англ. Cascading Style Sheets каскадные таблицы стилей) формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Виды стилей стиль браузера

Подробнее

Web технологии 3. Каскадные таблицы стилей для XML Cascading Stylesheets for XML (XML CSS)

Web технологии 3. Каскадные таблицы стилей для XML Cascading Stylesheets for XML (XML CSS) Web технологии 3 Каскадные таблицы стилей для XML Cascading Stylesheets for XML (XML CSS) Введение XML описание данных Задача представления данных пользователю Применение стилей оформления к конечному

Подробнее

Введение в CSS. Глава Возможности CSS

Введение в CSS. Глава Возможности CSS Глава 10 Введение в CSS Следующие две главы посвящены замечательному и широко используемому средству HTML, значительно облегчающему реализацию единого стилевого оформления при разработке больших веб-сайтов,

Подробнее

Каскадные таблицы стилей

Каскадные таблицы стилей Каскадные таблицы стилей Каскадные таблицы стилей (или CSS Cascading Style Sheets) можно встроить в документ тремя способами: Используя тег с указанием URL внешней таблицы стилей.

Подробнее

Создание сайтов HTML

Создание сайтов HTML Создание сайтов HTML HTML Разработку web-сайта можно осуществлять двумя способами: с помощью специального web-редактора; непосредственно написанием программы на языке HTML. HTML (HyperText Markup Language)

Подробнее

Основы CSS и HTML. Блочная верстка.

Основы CSS и HTML. Блочная верстка. Основы CSS и HTML. Блочная верстка. Позиционирование (выравнивание) блочных элементов в CSS Как вы вероятно уже знаете верстать сайт можно, используя таблицы, в этом случае страница разбивается на ячейки.

Подробнее

Урок 11. "Вдохновение" Тема: Применение стилей в редакторе WordPress. Тренинговый Центр Анфисы Бреус

Урок 11. Вдохновение Тема: Применение стилей в редакторе WordPress. Тренинговый Центр Анфисы Бреус Тренинговый Центр Анфисы Бреус "Вдохновение" Пошаговые инструкции по управлению и ведению блога на WordPress Урок 11 Тема: Применение стилей в редакторе WordPress Вопросы: Что такое стили? 3 типа таблиц

Подробнее

Что такое HTML? Шпаргалка для начинающих Web Разработчиков

Что такое HTML? Шпаргалка для начинающих Web Разработчиков Что такое HTML? Шпаргалка для начинающих Web Разработчиков Геннадий Караченцев www.weblaboratory.in.ua Из чего состоит инертен страница? Страница HTML CSS JavaScript Что все это значит? HTML Файл Структура

Подробнее

Каскадные таблицы стилей

Каскадные таблицы стилей Лабораторная работа 2 Каскадные таблицы стилей Ход выполнения лабораторной работы должен быть отражен в отчете. Отчет должен содержать титульный лист, номера задания, коды программ, картинку с результатом

Подробнее

Лекция 3. Каскадные таблицы стилей

Лекция 3. Каскадные таблицы стилей Лекция 3. Каскадные таблицы стилей CSS (англ. Cascading Style Sheets - каскадные таблицы стилей) - технология описания внешнего вида документа, оформленного языком разметки. Преимущественно используется

Подробнее

Создание сайта средствами HTML. пособие для 8 класса

Создание сайта средствами HTML. пособие для 8 класса Создание сайта средствами HTML пособие для 8 класса HTML: структура web-страницы Теоретический материал HTML язык структурирования текста Структурирование осуществляется с помощью специальных команд -

Подробнее

Web/WAP технологии и программирование

Web/WAP технологии и программирование Нижегородский государственный университет им.н.и.лобачевского Факультет Вычислительной математики и кибернетики Лаборатория: Математические и программные технологии для современных компьютерных систем

Подробнее

Справочник по CSS Экранные значения рх пиксели элемент экрана, размер которого зависит от установок монитора и видеокарты.

Справочник по CSS Экранные значения рх пиксели элемент экрана, размер которого зависит от установок монитора и видеокарты. Справочник по CSS Единицы измерения 1.1. Типографские значения pt пункты (72 пункта на дюйм) рс пики (1 пика равна 12 пунктам) 1.2. Экранные значения рх пиксели элемент экрана, размер которого зависит

Подробнее

2. Создайте css-файл и подключите его к html-документу так:

2. Создайте css-файл и подключите его к html-документу так: Лабораторная работа CSS Свойства блочных объектов. Введение в каскадные таблицы стилей. Цель: Изучить возможности CSS по работе с блочными объектами; Изучить основные свойства блоков; Практическая часть

Подробнее

Глава 3. Значения параметров

Глава 3. Значения параметров Глава 3. параметров Общие положения...2 некоторых параметров...2 Основные параметры...3 align...3 bgcolor...3 border...3 cellpadding...4 cellspacing...4 class...4 cleartotals...4 colspan...5 disabled...5

Подробнее

Содержание. Часть I. HTML 15. Введение 13

Содержание. Часть I. HTML 15. Введение 13 Содержание Введение 13 Часть I. HTML 15 Глава 1. Основы HTML 17 Введение в основы HTML 17 История развития языка HTML 18 Как работает Web 20 Принципы взаимодействия браузера и Web-сервера 20 Понятие URL

Подробнее

Основные понятия CSS

Основные понятия CSS CSS. Каскадные таблицы стилей: основные свойства Основные понятия CSS CSS (англ. Cascading Style Sheets каскадные таблицы стилей) язык описания внешнего вида документа, написанного с использованием языка

Подробнее

Лекция 7. Основы CSS

Лекция 7. Основы CSS Донецкий национальный технический университет Факультет компьютерных наук и технологий Кафедра компьютерной инженерии Лекция 7. Основы CSS Иваница Сергей Васильевич, ассистент кафедры компьютерной инженерии

Подробнее

Лабораторная работа 9. Основные свойства CSS.

Лабораторная работа 9. Основные свойства CSS. Лабораторная работа 9. Основные свойства CSS. Тема: Освежить знания по каскадным таблицам стилей. CSS технология описания внешнего вида документа, написанного языком разметки. CSS используется создателями

Подробнее

Создание мероприятий (много параметров как общих, так и частных);

Создание мероприятий (много параметров как общих, так и частных); Описание com_seminar Компонент joomla com_seminar предназначен для создания мероприятий бронирования мест на них. Гибкость и в то же время легкость в управлении позволяют настраивать его под себя. Основные

Подробнее

HTML. Создание таблиц.

HTML. Создание таблиц. Тема: Цель: Время: Задание: Практическая работа 43. HTML. Создание таблиц. Познакомиться с языком HTML, получить навыки работы с обязательными тегами, научиться создавать и форматировать документ. 80 мин.

Подробнее

Создание сайтов HTML

Создание сайтов HTML Создание сайтов HTML Начало В 1989 году Тим Бернерс-Ли разработал технологию гипертекстовых документов World Wide Web. Гипертекст это текст, в котором содержатся ссылки на другие документы. Основные понятия

Подробнее

< LINK REL=STYLESHEET TYPE="text/css" HREF="URL">

< LINK REL=STYLESHEET TYPE=text/css HREF=URL> Общие сведения CSS [Cascading Style Sheets - каскадные таблицы стилей] - это язык, содержащий набор свойств для описания внешнего вида любых HTML документов. Основным понятием CSS является стиль - набор

Подробнее

JavaFX 8 - Часть 4: Стилизация с помощью CSS

JavaFX 8 - Часть 4: Стилизация с помощью CSS JavaFX 8 - Часть 4: Стилизация с помощью CSS Часть 4: Содержание Стилизация с помощью каскадных таблиц стилей (CSS) Добавление иконки приложения Стилизация с помощью CSS В JavaFX с помощью каскадных таблиц

Подробнее

План лекции 2 Таблицы стилей, основные понятия

План лекции 2 Таблицы стилей, основные понятия План лекции 2 Таблицы стилей, основные понятия 1. Определение CSS. Цели создания CSS, область применения, способы подключения стилей. 2. Версии CSS. 3. Основные понятия CSS. a. Операторы, директивы и правила,

Подробнее

8. ФОНД ОЦЕНОЧНЫХ СРЕДСТВ ДЛЯ ПРОВЕДЕНИЯ ПРОМЕЖУТОЧНОЙ АТТЕСТАЦИИ ОБУЧАЮЩИХСЯ ПО ДИСЦИПЛИНЕ

8. ФОНД ОЦЕНОЧНЫХ СРЕДСТВ ДЛЯ ПРОВЕДЕНИЯ ПРОМЕЖУТОЧНОЙ АТТЕСТАЦИИ ОБУЧАЮЩИХСЯ ПО ДИСЦИПЛИНЕ 8. ФОНД ОЦЕНОЧНЫХ СРЕДСТВ ДЛЯ ПРОВЕДЕНИЯ ПРОМЕЖУТОЧНОЙ АТТЕСТАЦИИ ОБУЧАЮЩИХСЯ ПО ДИСЦИПЛИНЕ Общие сведения 1. Кафедра Искусств, сервиса и туризма 2. Направление подготовки 54.03.01 «Дизайн», профиль «Графический

Подробнее

ФОРМИРОВАНИЕ ФОНА ...

ФОРМИРОВАНИЕ ФОНА ... ФОРМИРОВАНИЕ ФОНА... background-color background-image background-repeat background-attachment background-position background background-position-x background-position-y background-clip background-origin

Подробнее

<HTML> <HEAD> <TITLE>

<HTML> <HEAD> <TITLE> Лабораторная работа 1. Создание простейшего HTML-документа. Форматирование шрифта и абзаца Цель работы: Научиться создавать простейший гипертекстовый документ средствами текстового редактора Блокнот. Научиться

Подробнее

ФОНД ОЦЕНОЧНЫХ СРЕДСТВ ДЛЯ ПРОВЕДЕНИЯ ПРОМЕЖУТОЧНОЙ АТТЕСТАЦИИ ОБУЧАЮЩИХСЯ ПО ДИСЦИПЛИНЕ

ФОНД ОЦЕНОЧНЫХ СРЕДСТВ ДЛЯ ПРОВЕДЕНИЯ ПРОМЕЖУТОЧНОЙ АТТЕСТАЦИИ ОБУЧАЮЩИХСЯ ПО ДИСЦИПЛИНЕ ФОНД ОЦЕНОЧНЫХ СРЕДСТВ ДЛЯ ПРОВЕДЕНИЯ ПРОМЕЖУТОЧНОЙ АТТЕСТАЦИИ ОБУЧАЮЩИХСЯ ПО ДИСЦИПЛИНЕ Общие сведения 1. Кафедра Искусств, сервиса и туризма 2. Направление подготовки 38.03.05 Бизнес-информатика 3. Дисциплина

Подробнее

Практические работы по CSS (черновой вариант) Урок 1. Параметры CSS для фона

Практические работы по CSS (черновой вариант) Урок 1. Параметры CSS для фона Практические работы по CSS (черновой вариант) Урок 1. Параметры CSS для фона Задание 1. Создайте нижеследующий документ HTML. Посмотрите как он выглядит в браузере.

Подробнее

Атрибуты тэгов. Заголовок первого уровня. Атрибут align для выравнивания текста: Атрибут тэга type маркированного списка UL:

Атрибуты тэгов. Заголовок первого уровня. Атрибут align для выравнивания текста: Атрибут тэга type маркированного списка UL: Атрибуты тэгов Атрибуты вписывают внутрь открывающего тэга. В одной команде можно использовать одновременно несколько атрибутов. Разделителем внутри тэга служит пробел. Атрибуты можно набирать как большими,

Подробнее

Вопросы по прошлому разделу

Вопросы по прошлому разделу 4 раздел: сетки План вебинара 1. Вопросы по прошлому разделу. 2. Теория: блочная модель документа. 3. Теория: приёмы построения сеток. 4. Практика: размечаем типовые сетки. 5. Практика: размечаем главную.

Подробнее

ИНТЕГРАЦИЯ ИНТЕРСПИДИИ и САЙТА КЛИЕНТА

ИНТЕГРАЦИЯ ИНТЕРСПИДИИ и САЙТА КЛИЕНТА «ПЕРФОРМИЯ СНГ» г. Москва, Ленинский проспект, 32 Выпуск от 10.02.2009 В шляпные папки Отв. подключение к Интерспидии ИНТЕГРАЦИЯ ИНТЕРСПИДИИ и САЙТА КЛИЕНТА В ситуации, когда у клиента Интерспидии (далее

Подробнее

font-family: arial; font-size: 1.2em;

font-family: arial; font-size: 1.2em; Глава 9. CSS-селекторы Дмитрий Храмов 13.04.2016 Содержание Элементы div и span.................................... 1 CSS-селекторы........................................ 2 Классы............................................

Подробнее

Лабораторная работа 4. Таблицы стилей. Формирование структуры сайта

Лабораторная работа 4. Таблицы стилей. Формирование структуры сайта Лабораторная работа 4 Таблицы стилей. Формирование структуры сайта Цель работы 1. Изучить вопросы создания и использования стилей. 2. Разработать и реализовать структуру сайта для каталога с отчетами по

Подробнее

1. Фонд оценочных средств для проведения промежуточной аттестации обучающихся по дисциплине: Общие сведения

1. Фонд оценочных средств для проведения промежуточной аттестации обучающихся по дисциплине: Общие сведения 1. Фонд оценочных средств для проведения промежуточной аттестации обучающихся по дисциплине: Общие сведения 1. Кафедра Искусств и дизайна 050100.62 «Педагогическое образование», 2. Направление подготовки

Подробнее

Веб дизайн. Технологические аспекты.

Веб дизайн. Технологические аспекты. Веб дизайн. Технологические аспекты. Баева Наталия Валерьевна nbaeva@gmail.com www.recyclebin.ru Этапы разработки и создания web-сайта Постановка задачи Разработка и утверждение дизайна Программирование

Подробнее

Базовые принципы технологии CSS

Базовые принципы технологии CSS МИНИСТЕРСТВО НАУКИ И ВЫСШЕГО ОБРАЗОВАНИЯ РОССИЙСКОЙ ФЕДЕРАЦИИ ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ «ТЮМЕНСКИЙ ИНДУСТРИАЛЬНЫЙ УНИВЕРСИТЕТ» ТОБОЛЬСКИЙ ИНДУСТРИАЛЬНЫЙ

Подробнее

CSS (продолжение), вставка изображений, списков.

CSS (продолжение), вставка изображений, списков. 1 CSS (продолжение), вставка изображений, списков. 1.1. Стили цвета и фона 1.2. Модель представления документа в виде блоков 1.3 Модуль Image 1.4. Модуль List 1. 5. Модули Hypertext и Base 1.1. Стили цвета

Подробнее

Блочные и строковые элементы

Блочные и строковые элементы Блочные и строковые элементы План Элементы и свойства блоков В описании элементов разметки языка HTML существует понятие строкового (in-line) элемента разметки и блочного (block) элемента

Подробнее

Тема 3. Работа с текстом Adobe Dreamweaver

Тема 3. Работа с текстом Adobe Dreamweaver 1 Тема 3. Работа с текстом Adobe Dreamweaver Основная задача Web-дизайнера ввести, отредактировать и отформатировать текст Web-страницы. Инструментальные средства Dreamweaver существенно упрощают обработку

Подробнее

Современные технологии в веб программировании

Современные технологии в веб программировании Современные технологии в веб программировании Ильюшин Евгений Альбинович Московскии Государственныи Университет им. М.В.Ломоносова Факультет Вычислительнои Математики и Кибернетики Лаборатория ОИТ john.ilyushin@gmail.com

Подробнее

HTML & CSS. Циклы. HTML. CSS. Циклы. Ваша первая интерактивная веб-страница. Личный сайт. Центральная часть. Подготовка и вставка картинки.

HTML & CSS. Циклы. HTML. CSS. Циклы. Ваша первая интерактивная веб-страница. Личный сайт. Центральная часть. Подготовка и вставка картинки. HTML & CSS. Циклы. HTML. CSS. Циклы. Ваша первая интерактивная веб-страница Личный сайт Центральная часть Подготовка и вставка картинки Заголовок Информация о себе Ссылки Верхняя часть Нижняя часть

Подробнее

Урок 1. Курс: «HTML5+CSS» Тема. Знакомство с WEB технологиями, этапы развития. План

Урок 1. Курс: «HTML5+CSS» Тема. Знакомство с WEB технологиями, этапы развития. План Урок 1 Курс: «HTML5+CSS» Тема. Знакомство с WEB технологиями, этапы развития План 1.Знакомство с web-технологиями и стандартами... 1 2.Особенности HTML5... 2 3.Программы для создания сайтов... 2 4.Первая

Подробнее

Гипертекстовые документы создаются на базе языка HTML (HyperText Markup Language). Ссылки, списки, заголовки, картинки и формы называются элементами

Гипертекстовые документы создаются на базе языка HTML (HyperText Markup Language). Ссылки, списки, заголовки, картинки и формы называются элементами Гипертекстовые документы создаются на базе языка HTML (HyperText Markup Language). Ссылки, списки, заголовки, картинки и формы называются элементами языка HTML. Основными достоинствами HTML-документов

Подробнее

Ставропольский государственный аграрный университет Кафедра информационных систем и технологий

Ставропольский государственный аграрный университет Кафедра информационных систем и технологий Ставропольский государственный аграрный университет Кафедра информационных систем и технологий ЗАДАНИЕ И МЕТОДИЧЕСКИЕ УКАЗАНИЯ НА ПРАКТИЧЕСКОЕ ЗАНЯТИЕ по учебной дисциплине «Архитектура информационных

Подробнее

Лекция - Основы блочной верстки

Лекция - Основы блочной верстки Министерство образования Республики Беларусь Учреждение образования Гомельский государственный университет им. Ф. Скорины Физический факультет «Компьютерные сети и Web-дизайн» Лекция - Основы блочной верстки

Подробнее

Оглавление. Глава 1. HTML Введение От издательства... 13

Оглавление. Глава 1. HTML Введение От издательства... 13 Оглавление Введение... 12 От издательства... 13 Глава 1. HTML... 14 Подготавливаем шаблон... 15 Расширение HTML-документа... 15 Имя HTML-документа... 16 Версии HTML... 16 Выбираем DOCTYPE... 17 Подготавливаем

Подробнее

Òîíêàÿ íàñòðîéêà òåì WordPress

Òîíêàÿ íàñòðîéêà òåì WordPress Ãëàâà 13 Òîíêàÿ íàñòðîéêà òåì WordPress В этой главе... Совершенствуем стиль с помощью каскадных таблиц стилей Изменение цвета фона Заголовок, созданный лично вами Изменение шрифта, цвета и размера Поиск

Подробнее

Синтаксис языка HTML

Синтаксис языка HTML Введение в HTML Содержание История языка HTML Синтаксис языка HTML Структура документа HTML Цветовая разметка документа. Способы задания цветовых параметров Разметка текста. Физическое форматирование текста.

Подробнее

Лекция Каскадные таблицы стилей (CSS)

Лекция Каскадные таблицы стилей (CSS) Министерство образования Республики Беларусь Учреждение образования Гомельский государственный университет им. Ф. Скорины Физический факультет «Информационные системы и сети» Лекция Каскадные таблицы стилей

Подробнее

Конструктор дизайнов.

Конструктор дизайнов. Конструктор дизайнов. Внимание! Переходы между шагами Конструктора осуществляются: Вперед с помощью кнопки Далее, внизу страницы, или с помощью стрелок-меню Шагов. Назад с помощью стрелок-меню (рис.2).

Подробнее

Форматирование текста и размещение графики

Форматирование текста и размещение графики Форматирование текста и размещение графики Создание Web-сайта «Компьютер» 1. Открыть окно текстового редактора Блокнот. Вид Web-страницы задается тэгами, которые заключаются в угловые скобки. Тэги могут

Подробнее

Формирование блочной модели

Формирование блочной модели Формирование блочной модели Основные теги для верстки (div и span). Отступы элементов (margin и padding). Обтекаемые элементы. Позиционирование блоков. Оглавление Свойство display Значения свойства display

Подробнее

Лабораторная работа 1

Лабораторная работа 1 Лабораторная работа 1 Задание 1 Получите образец этого файла у преподавателя и измените стили: Стиль для абзаца: размер шрифта 16 пунктов, цвет - #ffcc00. Стиль для заголовков h1: фоновый цвет - #369,

Подробнее

WEB-КОНСТРУИРОВАНИЕ /?.. (^_^ /?.. ФОРМАТИРОВАНИЕ ТЕКСТА = * (^L^)

WEB-КОНСТРУИРОВАНИЕ /?.. (^_^ /?.. ФОРМАТИРОВАНИЕ ТЕКСТА = * (^L^) =/ : ) } /?.. =* :) :) хd < < (^_^ ) /?.. = * =D (^L^) } Проверка домашнего задания Определиться с: 1. Типом сайта 2. Тематикой сайта 3. Компонентами сайта Теги форматирования Верхний индекс текст

Подробнее

Вёрстка писем: основные ошибки и как их избежать

Вёрстка писем: основные ошибки и как их избежать Весенняя серия вебинаров о емейл-маркетинге Вёрстка писем: основные ошибки и как их избежать Антон Чирков Ведущий HTML-специалист Emailmatrix Содержание - оформление общего макета письма - оформление текста

Подробнее

Часть I. Курс молодого бойца

Часть I. Курс молодого бойца Часть I Курс молодого бойца Глава 1 Управление блоком Установка размеров основе любого элемента разметки (HTML-тега) лежит понятие блока прямоугольной области, выделяемой под элемент разметки. Возможно,

Подробнее

Практическая работа 2

Практическая работа 2 Практическая работа 2 Тема: Вёрстка веб страниц Автор: Караваев С. В. I. Цель работы Научиться использовать средства HTML и CSS для вёрстки веб страниц без использования WYSIWYG редактора. II. Количество

Подробнее

Информатика и ИКТ Лекция 12

Информатика и ИКТ Лекция 12 Информатика и ИКТ Лекция 12 ГБОУ СПО "УМТК" Кондаратцева Т.П. 1 курс Методы создания и сопровождения сайта Основы языка гипертекстовой разметки HTML Интернет - это сложная электронная информационная структура,

Подробнее

<html> <head> <title>название документа</title>

<html> <head> <title>название документа</title> Основы языка гипертекстовой разметки HTML Web-документ (иначе html-документ) является обычным текстовым файлом, к имени которого добавлено расширение.htm или.html. Такой документ открывается в обозревателе

Подробнее

Глава 1. ОСНОВЫ ВЕБ-КОНСТРУИРОВАНИЯ

Глава 1. ОСНОВЫ ВЕБ-КОНСТРУИРОВАНИЯ 3. Основы языка разметки HTML 3.1. Создание HTML-документа в редакторе Блокнот Веб-страница представляет собой текстовый документ, в котором расставлены команды языка HTML. Они интерпретируются браузером.

Подробнее

Вставка графических объектов на Web-страницу

Вставка графических объектов на Web-страницу Вставка графических объектов на Web-страницу Автор: Москаленко Т.А., преподаватель математики/информатики высшей категории. Цели: Образовательная: сформировать понятие о способах вставки графических объектов

Подробнее

Таблица основных тегов HTML для новичков

Таблица основных тегов HTML для новичков 1 Таблица основных тегов HTML для новичков 2 Основные теги Указывает программе просмотра страниц что это HTML документ. Определяет место, где помещается различная информация

Подробнее

Методическое руководство по курсу «WEB-дизайн»

Методическое руководство по курсу «WEB-дизайн» HTML Как создать веб-страницу? Способ 1 (использование программы Блокнот в Windows) 1. Запускаем программу «Блокнот» (Пуск / Все программы / Стандартные / Блокнот) 2. В верхнем меню окна выбираем Файл

Подробнее

Что такое HTML? HTML

Что такое HTML? HTML HTML - это просто План вебинара 1. Знакомство 2. Что такое HTML? 3. Базовая HTML-разметка. 4. Инструменты для работы с HTML. 5. Синтаксис HTML. 6. Строение HTML тегов. 7. Знакомство с CSS. 8. Подключение

Подробнее

Глава 4. Создание веб-сайтов. Практические работы. Практическая работа 26.

Глава 4. Создание веб-сайтов. Практические работы. Практическая работа 26. Глава 4. Создание веб-сайтов При сохранении отредактированных файлов к имени файла дописываем через дефис свою фамилию, например, отредактировали файл dogs.htm, Файл-Сохранить как имя сохраняемого файла

Подробнее

Каскадные таблицы стилей CSS. Cascading Style Sheets

Каскадные таблицы стилей CSS. Cascading Style Sheets Каскадные таблицы стилей CSS Cascading Style Sheets Назначение CSS Позволяют разделить оформление htmlдокумента и его содержание Разделение оформления и содержания значительно облегчает разработку крупных

Подробнее

Стилевое оформление рамки с закругленными углами

Стилевое оформление рамки с закругленными углами Урок 17 Стилевое оформление рамки с закругленными углами В этом уроке вы научитесь с помощью четырех изображений углов создавать растяжимую рамку с закругленными углами. Подготовка HTML-кода HTML-код этого

Подробнее

Современный станок верстальщика

Современный станок верстальщика Современный станок верстальщика Николай Птущук Евгений Батовский Я.Субботник, Киев, 5 мая 2012 года 2 3 4 5 Наш современный станок 6 Наш современный станок Аналитика пользователей 6 Наш современный станок

Подробнее

План лекции 2 Таблицы стилей, основные понятия

План лекции 2 Таблицы стилей, основные понятия План лекции 2 Таблицы стилей, основные понятия 1. Определение CSS. Цели создания CSS, область применения, способы подключения стилей. 2. Версии CSS. 3. Основные понятия CSS. a. Операторы, директивы и правила,

Подробнее

Лабораторная работа 9 Оформление элементов с помощью CSS. Выпадающие меню с помощью CSS

Лабораторная работа 9 Оформление элементов с помощью CSS. Выпадающие меню с помощью CSS Лабораторная работа 9 Оформление элементов с помощью CSS Выпадающие меню с помощью CSS Создать выпадающие меню с помощью CSS? Запросто. Для этого не требуется множество яваскриптов. Главное здесь грамотно

Подробнее

Оглавление. 1. Цель работы. 2. Основные теоретические сведения

Оглавление. 1. Цель работы. 2. Основные теоретические сведения Оглавление Введение...1 1. Цель работы...1 2. Основные теоретические сведения...1 Структура HTML-документа...1 Элемент BODY...2 Начертание текста...2 Маркированные списки...3 Нумерованные списки...3 Форматирование

Подробнее

Содержание. Предисловие Глава 1. Основные понятия... 17

Содержание. Предисловие Глава 1. Основные понятия... 17 Содержание Предисловие... 13 Условные обозначения, принятые в книге 13 Использование примеров кода 13 От издательства 14 Глава 1. Основные понятия... 17 Стилевое оформление HTML- и XHTML-документов 17

Подробнее

Основы HTML и CSS. Лабораторная работа 9.

Основы HTML и CSS. Лабораторная работа 9. Лабораторная работа 9. Основы HTML и CSS Цель работы. Получение студентами навыков работы с языком гипертекстовой разметки HTML (HTML5) и каскадными таблицами стилей CSS (CSS3). Задание: 1) Изучить основные

Подробнее

Всплывающая подсказка с помощью html и css. html = hypertext markup language css = cascade style sheet

Всплывающая подсказка с помощью html и css. html = hypertext markup language css = cascade style sheet Всплывающая подсказка с помощью html и css html = hypertext markup language css = cascade style sheet ВНИМАНИЕ! Дальше будут «объяснялки» и инструкции. Страницы с инструкциями и объяснялками будут помечены

Подробнее

Лекция 3 Блочная верстка: блочные и строчные элементы, позиционирование

Лекция 3 Блочная верстка: блочные и строчные элементы, позиционирование Лекция 3 Блочная верстка: блочные и строчные элементы, позиционирование 1. Структура объемлющего прямоугольника: отступы, рамки, поля. 2. Свойство display: блочные, строчные и иные типы элементов. 3. Схемы

Подробнее

Рабочая программа курса внеурочной деятельности «Я шагаю в интернет» 7 класс

Рабочая программа курса внеурочной деятельности «Я шагаю в интернет» 7 класс Муниципальное бюджетное общеобразовательное учреждение «Общеобразовательная школа 14» (МБОУ ОШ 14) 184511, Мурманская обл., г. Мончегорск, ул. Комсомольская, д. 24, тел./факс 8(81536) 72405 ОКПО 36697324,

Подробнее

«Создание WEBстраниц. помощью HTML»

«Создание WEBстраниц. помощью HTML» «Создание WEBстраниц с помощью HTML» Работа выполнена Хисматуллиным Ильнуром Рахимзяновичем, учителем информатики Нижнекуюкской средней общеобразовательной школы Атнинского муниципального района Республики

Подробнее

Лабораторная работа 11 «Простейшие тэги HTML»

Лабораторная работа 11 «Простейшие тэги HTML» Лабораторная работа 11 «Простейшие тэги HTML» Задание 1. Создание простейших файлов HTML Чтобы создать свой файл HTML, сделайте следующее: 1. Создайте папку HTML, в которой мы будем сохранять созданные

Подробнее

Лекция 3 Таблицы и фреймы

Лекция 3 Таблицы и фреймы Лекция 3 Таблицы и фреймы Лектор Ст. преподаватель Купо А.Н. Лекция 3 Таблицы и фреймы Для создания таблиц в языке HTML используются следующие элементы: TABLE - создаёт таблицу. CAPTION - задаёт заголовок

Подробнее

Лабораторная работа 4. Что такое CSS?

Лабораторная работа 4. Что такое CSS? Лабораторная работа 4 Теория Задание Требования к отчету Что такое CSS? CSS (Cascading Style Sheets) - Каскадные таблицы стилей - это свод стилевых описаний, тех или иных HTML тегов (далее элементов HTML),

Подробнее

ПРИМЕНЕНИЕ ПРЕПРОЦЕССОРА LESS

ПРИМЕНЕНИЕ ПРЕПРОЦЕССОРА LESS МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ Федеральное государственное автономное образовательное учреждение высшего образования «НАЦИОНАЛЬНЫЙ ИССЛЕДОВАТЕЛЬСКИЙ ТОМСКИЙ ПОЛИТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ»

Подробнее