среда, 31 июля 2013 г.

CSS: An Overview. What's CSS? #4


Ранее мы показали вам, как создается встроенный дизайн в html выглядело это так:
<p style=”color:red”>красный фон</p>
Это не самый удобный способ задание стиля для вашего сайта по причинам которые мы недавно обговаривали: вы должны прописывать один и тот же код снова и снова, и если вам надо изменить элемент стиля вы должны проделать это со всеми атрибутами всех тегов. С помощью css файла вам дается возможность проделывать эти изменения в одном месте!
Существует два способа задать css один из них мы уже рассматривали (создание отдельного файла).Второй создать код css прямо на вашей html страницы для этого надо меду тегами <head></head> поместить тег <style></style>  внутри которого разместить ваши параметры css. Пример такого создания css вы можете увидеть в редакторе.
Все понятно? Отлично! Нажимаем “Сохранить и отправить код” и продолжаем курс

CSS: An Overview. What's CSS? #3


Зачем создавать отдельную форму из функций?
Отличная работа! Взгляните на себя. Вы уже пишете css.
Существует две основные причины для создания отдельного файла форматирования (css) для вашего html.
  1. Вы можете применять одно и тоже форматирование к нескольким  html элементам не переписывая код (например: style=”color:red”) снова и снова.
  2. Вы можете применить одно и тоже форматирование, и внешний вид к разным страницам при помощи одного и того же css файла.
Взгляните на html код в index.html. В нем много тегов <span></span>! Все слова в них написаны обычным шрифтом, но мы хотим, чтобы они выглядели интереснее.
задание
подсказка
решение stylesheet.css

вторник, 30 июля 2013 г.

CSS: An Overview. What's CSS? #2


CSS (расшифровывается как Cascading Style Sheets (пер. Каскадные Таблицы Стилей)) – это язык для  описания внешнего вида и форматирования html.
Таблицы стилей - это файл, который описывает, как должен выглядеть html файл. Вот и все!
Мы называем их каскадными таблицами стилей, потому что при форматировании можно использовать больше чем один стиль. Например, вы можете указать, что все абзацы должны быть синим шрифтом, но при этом выделить один из них красным, css поможет нам и в этом! (Мы поговорим об этом в четвертом разделе.)
задание
подсказка
решение stylesheet.css

CSS: An Overview. What's CSS? #1


Взгляните на html файл index.html. Он выглядит довольно стандартно, не так ли? Вам знакомы все эти вещи: заголовки, абзацы, картинки, списки и таблицы. Посмотрите на вкладку с результатами, там тоже никаких сюрпризов. (На самом деле все это выглядит довольно уродливо) 
Мы закомментировали очень важную строку в файле index.html. Если удалить комментарий (“<!-“ сначала четвертой строки и “->” в конце строки кода), вы сможете увидеть волшебство, которое творит css. Не удаляйте тег <link> и его содержимое. 

задание
решение

понедельник, 29 июля 2013 г.

Project: Clickable Photo Page #7


Красота! Теперь у вас есть таблица с красиво оформленными интерактивными фотографиями для вашего сайта.
Тем не менее, нет никакой причины останавливаться на девяти изображениях, вы можете создать целый альбом с десятками фотографий красиво выложенных в таблице! Не стесняйтесь экспериментируйте с добавлением новых изображений ячеек и т.д.
Когда вы решите что уже готовы нажмите “Сохранить и отправить код” для того чтобы закончить курс. 

Project: Clickable Photo Page #6


Великолепно! Теперь вам необходимо обернуть каждый тег <img> в теги <a></a>. Не забудьте задать каждому тегу <a> атрибут href и в значении указать ссылку, куда вы хотите, чтобы он вел. (Воспользуйтесь советом, если вы застряли)
задание
подсказка
решение

пятница, 26 июля 2013 г.

Project: Clickable Photo Page #5


Хорошая работа! Следующий шаг: найти девять фотографий. Вы можете использовать любые ссылки на изображения. Если вы не можете придумать, то попробуйте поискать по слову “фото” вашим любимым поисковиком.
Напоминаем что тег <img> один из немногих тегов html не требующий закрывающего тега. Это значит что вместо:
<img src=”ссылка на изображение”><img>
Вы должны ввести:
<img src=” ссылка на изображение ”>
Это происходит потому что между открывающимся и закрывающимся тегом <img> по сути нет никаких данных поэтому мы можем закрыть его сразу.
задание
решение

Project: Clickable Photo Page #4


Нам надо написать заголовок для нашей таблицы, чтобы все зразу понимали, что это ваши фотографии.
Чтобы ваш заголовок выглядел красиво, не забудьте задеть ему атрибут colspan равный трем ведь вы хотите, чтобы заголовок был над всеми колонками.
задание
подсказка
решение

четверг, 25 июля 2013 г.

Project: Clickable Photo Page #3


Здорово! Теперь нам надо создать по три ячейки в каждой строке чтобы в совокупности получить девять клеток.
задание
подсказка
решение

Project: Clickable Photo Page #2


Первое что мы должны создать это строки нашей таблицы.
задание
подсказка
решение