Ниачем: Project: Clickable Photo Page

Показаны сообщения с ярлыком Project: Clickable Photo Page. Показать все сообщения

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

Project: Clickable Photo Page #7

Нет предела!

Красота! Теперь у вас есть таблица с красиво оформленными интерактивными фотографиями для вашего сайта.

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

Когда вы решите что уже готовы нажмите “Сохранить и отправить код” для того чтобы закончить курс.

Project: Clickable Photo Page #6

Ссылки вверх!

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

задание

подсказка

решение

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

Project: Clickable Photo Page #5

Девять фотографий стоят 9000 слов

Хорошая работа! Следующий шаг: найти девять фотографий. Вы можете использовать любые ссылки на изображения. Если вы не можете придумать, то попробуйте поискать по слову “фото” вашим любимым поисковиком.

Напоминаем что тег <img> один из немногих тегов html не требующий закрывающего тега. Это значит что вместо:

Вы должны ввести:

Это происходит потому что между открывающимся и закрывающимся тегом <img> по сути нет никаких данных поэтому мы можем закрыть его сразу.

задание

решение

Project: Clickable Photo Page #4

Запомните: начинать лучше с заголовка

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

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

задание

подсказка

решение

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

Project: Clickable Photo Page #3

Ячейка за ячейкой

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

задание

подсказка

решение

Project: Clickable Photo Page #2

Строка за строкой

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

задание

подсказка

решение

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

Project: Clickable Photo Page #1

Несколько фотографий на вашем столе

Вы уже все знаете о таблицах. Но знаете ли вы, что таблицы могут пригодиться не только для формирования текста?

Вы можете использовать таблицы для создания красиво отформатированной сетки с фотографиями.

Если вы заметили, мы подключили дополнительный фал к этому проекту stylesheet.css. Вы узнаете о css в следующих уроках и проектах, но мы подумали, что вы могли бы заглянуть в него сейчас. Этот файл поможет нам форматировать html, чтобы он выглядел лучше.

Нажмите “Сохранить и отправить код”, чтобы начать свой фотопроект!

Подписаться на: Сообщения ( Atom )

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

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

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

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

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

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

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

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