середа, 6 листопада 2019 р.

11 клас 7 листопада

джерело 

тереотичний матеріал

Виконайте вправу

Додайте зображення до веб-сторінки bembi.html
Докладніше - сторінка 102-103 (дивись в теоретичному матеріалі)
Покрокова інструкція
  1. Знайдіть зображення, яке можна використати для тла.
  2. Вкажіть атрибут background для тегу body (ст.98).
  3. До проекту додайте файл bembi.jpg. Розмістіть це зображення на своїй сторінці, скориставшись різними варіантами розташування та вирівнювання зі ст.103
Бібліотеки зображень:
https://www.iconfinder.com/free_icons

Орієнтовний вигляд веб-сторінки


джерело http://gabdrahimov.ru/html-uchebnik-ispolzuem-css

Используем язык CSS в HTML-документе

Урок №6
Используем CSS-код на html странице
Используем CSS в HTML-документе.
В этом уроке мы будем использовать язык CSS, в нашем HTML-документе. В современном сайтостроении язык CSS стал неотъемлемой частью языка HTML, в будущем их скорее всего объединят в единую технологию, поскольку они эффективно взаимодополняют друг друга.

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

Внедряем CSS с помощью тегов <style> </style>

Один из способов внедрения CSS-кода в HTML-документ, является внедрение при помощи тегов <style> </style>, эти теги обычно размещают в голове HTML-документа (между тегами <head> </head>).
Между тегами <style> </style> помещают CSS-код. Схема обычного CSS-кода, выглядит следующим образом:
имяТега { свойство: значение; }
Основной частью языка HTML является — тег, основной частью языка CSS является — свойство (их еще называют CSS-свойства). В языке CSS существует очень много различных свойств, в будущем, каждое из них мы изучим отдельно.
Итак, что мы имеем на данный момент? На данный момент мы имеем файл index.html, который содержит следующий код:
<html>
 <head>
  <title>Страница о снежном барсе</title>
 </head>
 <body>
  <h1>Снежный барс</h1>
  <img src="irbis.jpg">
  <p>
   Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства 
   кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, 
   Казахстана, Киргизстана, Китая, Монголии, Непала, Пакистана, России, 
   Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, 
   относительно короткими лапами, небольшой головой и очень длинным хвостом. 
   Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг.
   Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными 
   пятнами.</p>
  <p>
   Охотится снежный барс, в основном, на горных козлов и баранов, также в его 
   рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности
   местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по 
   приблизительным оценкам их количество варьируется в районе около 10 тысяч 
   особей. По состоянию на 2013 год, охота на снежных барсов повсеместно
   запрещена.</p>
 </body>
</html>
Открыв в браузере файл index.html, мы получим следующую страницу. Она содержит статью о снежном барсе, статья состоит из заголовка, фотографии и двух абзацев.
Давайте изменим с помощью языка CSS, цвет и шрифт заголовка. Для этого нужно вставить в голову нашего HTML-документа, теги <style> </style> и между ними написать следующий CSS-код:
h1 {
 color: green;
 font-family: Arial; 
}
Ваш HTML-документ, теперь должен выглядеть следующим образом:
<html>
 <head>
  <title>Страница о снежном барсе</title>
  <style>
   h1 {
    color: green;
    font-family: Arial;
   }
  </style>
 </head>
 <body>
  <h1>Снежный барс</h1>
  <img src="irbis.jpg">
  <p>
   Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства 
   кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, 
   Казахстана, Кыргызстана, Китая, Монголии, Непала, Пакистана, России, 
   Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, 
   относительно короткими лапами, небольшой головой и очень длинным хвостом. 
   Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг.
   Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными 
   пятнами.</p>
  <p>
   Охотится снежный барс, в основном, на горных козлов и баранов, также в его 
   рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности
   местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по 
   приблизительным оценкам их количество варьируется в районе около 10 тысяч 
   особей. По состоянию на 2013 год, охота на снежных барсов повсеместно
   запрещена.</p>
 </body>
</html>
Открыв в браузере файл index.html, мы получим следующую страницу. Обратите внимание на то, что цвет заголовка статьи стал зелёным, а его шрифт изменился.
До внедрения CSS, заголовок выглядел так:
Черный цвет шрифта до использования CSS.
После внедрения CSS, заголовок стал выглядеть так:
Зелёный цвет шрифта после использования CSS.
В следующем уроке, мы разберём каждую строку CSS-кода.
Читать далее: Разбираем CSS-код


Учебник CSS

Учебник по языку форматирования — CSS

Введение в язык форматирования CSS. Учебник для начинающих HTML-верстальщиков.
Учебник CSS для начинающих (урок №1)
Учебник CSS для начинающих (урок №1). Прежде чем начать изучать язык CSS, вы должны обладать хотя бы минимальными знаниями о языке HTML: понимать, что такое HTML-документ, голова HTML-документа, тело HTML-документа, HTML-тег, атрибут HTML-тега, значение атрибута и т.д.
CSS — это язык форматирования, с помощью которого, тегам языка HTML (абзацам, заголовкам, фотографиям, ссылкам, кнопкам и т.д.) назначают CSS-свойства. Благодаря этим свойствам, тегам можно назначать различные параметры такие как: цвет, фон, размеры, высота, ширина, отступы, границы, положение, прозрачность и мн.др.
Форматирование — это изменение внешнего вида.
В данном учебнике по CSS, мы будем рассматривать последнюю, третью версию языка — CSS3

Содержание CSS-учебника

  1. Учебник CSS (введение, эта страница)
  2. Внедрение CSS в HTML-документ
  3. Разбираем CSS-код
  4. Основные CSS-свойства
  5. Значения CSS-свойств
  6. Способы внедрения CSS в HTML-документ
  7. Внедрение CSS с помощью тега <style>
  8. Внедрение CSS с помощью атрибута style=" "
  9. Внедрение CSS с помощью тега <link>
  10. Селекторы основы
  11. Заключение учебника CSS
Автор:
Ярлыки:

Немає коментарів:

Дописати коментар

Підписатися на: Дописати коментарі (Atom)