Ниачем: 2013

воскресенье, 1 сентября 2013 г.

CSS: An Overview. Details, Details #1

А что теперь?

У вас есть начальные навыки, пришло время погрузиться глубже.

Вы заметили, что когда мы просили вас задать в вашем css красный цвет, то мы имели ввиду цвет:красный. Возможно, вы задавались вопросом, а что если я хочу бордовый? Или цвет пожарной машины? Или же красно-оранжевый? Знает ли css все эти цвета?

Ответ на этот вопрос нет. Однако он может понимать миллионы цветов написанные в виде шестнадцатеричного значения.

Вы уже знакомы с десятеричной системой счисления. Вы понимаете, что когда вы видите число (напр. 1,432) то каждая его цифра это одно из десяти значений от 0 до 9. Потому что есть только десять возможных вариантов, мы можем сказать, что регулярный счет идет по основанию 10.

Шестнадцатеричный счет идет по основанию-16. Каждая цифра может принимать значение от 0 до 9 и буквы от a до f! Сума сойти? Вы можете проверить это:

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

вторник, 6 августа 2013 г.

CSS: An Overview. CSS Syntax #6

Проверь себя прежде чем идти дальше

Вы многому научились за пару коротки уроков. Это нас очень впечатлило! Давайте быстро пройдемся по пройденному материалу, чтобы убедиться, что вы действительно все усвоили.

задание

подсказка

решение index.html

решение stylesheet.css

CSS: An Overview. CSS Syntax #5

Цвет комментариев

Отлично! У вас действительно все получается.

В то время как надо следить за синтаксисом не стоит забывать писать комментарии. Хорошие комментарии помогут вам или тому, кто будет читать код разобраться в нем.

Как вы помните комментарии в html выглядели так:

<!—я комментарий !-->

CSS комментарии выглядят по-другому:

/* я комментарий*/

Помните: компьютер не воспринимает то что написано в комментариях но писать их является хорошим тоном.

задание

решение stylesheet.css

понедельник, 5 августа 2013 г.

CSS: An Overview. CSS Syntax #4

Важность точки с запятой

Когда вы все больше пар свойство-значение главное не забывать поставить точку с запятой в конце каждой строки.

Точка с запятой говорит css что одно свойство-значение закончилось и надо идти дальше. Без точки с запятой все придет в замешательство и ваша страница не будет выглядеть как вы бы хотели.

Кроме того не забывайте что все пары свойство-значение должны быть в фигурных скобках (“{}”)для каждого селектора.

задание

решение stylesheet.css

CSS: An Overview. CSS Syntax #3

Больше селекторов, больше свойств

Хорошая работа! Говорят чем больше практики, тем лучше, давайте же еще немного попрактикуемся. (Мы узнаем больше о селекторах в следующих курсах)

задание

подсказка

решение stylesheet.css

пятница, 2 августа 2013 г.

CSS: An Overview. CSS Syntax #2

Один селектор, множество свойств

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

font-family:Arial;

color:blue;

font-size:24;

}

Главное не забывайте в конце каждой пары ставить точку с запятой!

Пожалуйста, обратите внимание, если в вашем браузере изменен масштаб отображения страницы, то наши манипуляции с размером шрифта могут отображаться неправильно. Чтобы исправить это, нажмите Ctrl+0 или Cmd+0 чтобы вернуть значения по умолчанию.

задание

подсказка

решение stylesheet.css

CSS: An Overview. CSS Syntax #1

Синтаксис залог победы

Синтаксис css отличается от того что вы привыкли видеть в html, но не надо беспокоиться: он довольно понятен! Общий формат выглядит следующим образом:

селектор{

свойство:значение;

}

Селектор это любой элемент html такой как <p>, <img> или <table>. Вы просто пишете его без кавычек <>! Допустим если вам надо сделать текст абзаца красным вы должны в вашем css файле написать:

color:red;

}

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

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

Не забывайте заканчивать каждое значение точкой с запятой (;). Так вы даете знать css что закончили с этой парой и надо переходить дальше.

задание

подсказка

решение stylesheet.css

четверг, 1 августа 2013 г.

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

PS: самозакрывающиесятеги

Вот мы и подошли к концепции самозакрывающихся тегов.

Вы никогда не увидите <link></link> и это нормально использовать единый набор <>, в котором тег одновременно и открывается и закрывается. Вы делали это следующим образом:

< link type="text/css" rel="stylesheet" href="адрес css файла"/>

Возможно вы заметили сходство с тегом <img>:

Большинство тегов не самозакрывающиеся, но не надо забывать и про самозакрывающиеся, это поможет сохранить вам время и силы.

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

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

Свяжите его!

Есть лучший способ.

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

Это можно сделать при помощи тега <link> (вы уже могли видеть его в первом упражнении этого курса) написанного внутри тега <head></head> вашей html страницы. Тег <link> должен содержать следующие три атрибута:

атрибут type который всегда должен быть равен “text/css”
атрибут rel который всегда равен “stylesheet”
и атрибут href который должен указывать на веб-адрес где расположен ваш css файл

В редакторе справа вы можете увидеть два файла: index.html и stylesheet.css

задание

подсказка

решение index.html

среда, 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 стиль шрифта, размер шрифта и все остальные атрибуты применимые к шрифту.

задание

подсказка

решение

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

воскресенье, 1 сентября 2013 г.

вторник, 6 августа 2013 г.

понедельник, 5 августа 2013 г.

пятница, 2 августа 2013 г.

четверг, 1 августа 2013 г.

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

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

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

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

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

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

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

воскресенье, 1 сентября 2013 г.

вторник, 6 августа 2013 г.

понедельник, 5 августа 2013 г.

пятница, 2 августа 2013 г.

четверг, 1 августа 2013 г.

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

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

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

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

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

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

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