Ниачем: июля 2013

среда, 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.

Вы можете применять одно и тоже форматирование к нескольким html элементам не переписывая код (например: style=”color:red”) снова и снова.
Вы можете применить одно и тоже форматирование, и внешний вид к разным страницам при помощи одного и того же css файла.

Взгляните на html код в index.html. В нем много тегов <span></span>! Все слова в них написаны обычным шрифтом, но мы хотим, чтобы они выглядели интереснее.

задание

подсказка

решение stylesheet.css

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

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

Что такое css?

CSS (расшифровывается как Cascading Style Sheets (пер. Каскадные Таблицы Стилей)) – это язык для описания внешнего вида и форматирования html.

Таблицы стилей - это файл, который описывает, как должен выглядеть html файл. Вот и все!

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

задание

подсказка

решение stylesheet.css

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

Пока не увижу не поверю

Взгляните на html файл index.html. Он выглядит довольно стандартно, не так ли? Вам знакомы все эти вещи: заголовки, абзацы, картинки, списки и таблицы. Посмотрите на вкладку с результатами, там тоже никаких сюрпризов. (На самом деле все это выглядит довольно уродливо)

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

задание

решение

<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <title>Result</title> </head> <body> <div id="header"> <div id="navbar"> <ul> <li>Home</li> <li>About Me</li> <li>Plans for World Domination</li> <li>Contact</li> </ul> </div> <h2>About Me</h2> </div> <div id="left"> <img src="http://bit.ly/Vw049i"/> <p>I am the angriest puppy in the world. This has been scientifically proven in several clinical trials.</p> </div> <div id="right"> <table> <th colspan="3">My Bros</th> <tr> <td><img src="http://bit.ly/W3UhKC"/></td> <td><img src="http://bit.ly/UIfMiC"/></td> <td><img src="http://bit.ly/Xpnc74"/></td> </tr> <tr> <td><img src="http://bit.ly/ZgRBGF"/></td> <td><img src="http://bit.ly/Xl6A3o"/></td> <td><img src="http://bit.ly/12N3dGl"/></td> </tr> <tr> <td><img id="bottom_left" src="http://bit.ly/Vw0EDW"/></td> <td><img src="http://bit.ly/XMRTlU"></td> <td><img id="bottom_right" src="http://bit.ly/134HLww"/></td> </tr> </table> </div> <div id="footer"> <div id="button"> <p>Send me an <span class="bold">e-mail</span>!</p> </div> </div> </body> </html>

понедельник, 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, чтобы он выглядел лучше.

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

HTML Basics III. Div and span #5

Резюме

Огромная работа! В дополнение к тому, что вы уже знали, вы теперь научились как:

Разделить вашу страницу при помощи тега <div> чтобы легче задавать стиль
Выбирать куски текста и меня, их свойства при помощи тега <span>

В следующих курсах мы рассмотрим, как можно взять настройки стиля и сложить их в отдельный файл. Для этого мы сожжем использовать такие теги как <div>, <span> но при этом на не придется каждый раз писать что то вроде style=”color:red”.

Мы привели пример как, <span> может брать стиль из css. Результат выполнения вы можете видеть на вкладке с результатами. Правда, здорово?

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

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

HTML Basics III. Div and span #4

Span is the man

Долго ломал голову, но так и не придумал, как правильно перевести заголовок ну, да и не в этом суть.

Отлично! У вас действительно все получилось. Но этот тег может больше давайте, рассмотрим еще один пример.

Цвет один из немногих параметров, которые можно поменять, в теге <span> вы можете также задать в атрибуте style стиль шрифта, размер шрифта и все остальные атрибуты применимые к шрифту.

задание

подсказка

решение

HTML Basics III. Div and span #3

Spantastic

В то время как <div> позволяет разделить страницу на куски и задать им индивидуальный стиль, <span> дает возможность контролировать небольшие участки страницы, такие как текст. Например, если вы хотите чтобы первое слово каждого абзаца было красным, то вы можете поместить первые слова каждого абзаца в тег <span></span> и задать им нужные характеристики при помощи css.

задание

решение

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

HTML Basics III. Div and span #2

Ссылка!

Отличная работа! Как вы могли догадаться, рациональное использование <div>ов позволит нам визуализировать наш html и создавать разные объекты, такие как боковые панели, меню и многое другое.

Также как и изображение вы можете сделать <div> кликабельным заключив его в <a></a> теги.

задание

подсказка

решение

HTML Basics III. Div and span #1

Разделяй и властвуй

Один из самых универсальных структурных тегов доступных вам это тег <div></div>. <Div> это сокращение от “division” (пер. деление), он позволяет разделить вашу страницу на контейнеры (т.е. разбить на части). Это пригодиться когда вы начнете изучать css, тогда вы сможете применять стили индивидуально для каждой части вашего сайта.

Посмотрите на вкладку с результатами. Вы должны увидеть три блока: красный, синий и зеленый. Каждый из них и есть <div> контейнер.

задание

решение

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

HTML Basics III. Better tables #5

Резюме

Мы много чего узнали.

Чему же вы научились?

Писать комментарии в html
Создавать списки (нумерованные и маркированные)
Выделять текст при помощи тегов <em> и <strong>
Изменять цвет, размер и выравнивание текста при помощи атрибута style
Создавать html таблицы

Нажмите “Сохранить и Отправить код” чтобы закончить этот курс и перейти к знакомству с двумя невероятно полезными тегами <div> и <span> !

HTML Basics III. Better tables #4

Стиль всему голова!

Ваша таблица начинает приобретать приятный вид, но все равно еще есть куда стремиться. Мы добавили немного стилей к таблице, чтобы она была более приятна на вид. Ваша задача в том чтобы добавить последний штрих!

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

Если вы хотите добавить более одного атрибута стилю, просто разделите их точкой с запятой, например:

задание

подсказка

решение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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