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

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

Introduction to HTML. Project: Build Your Own Webpage #6

Сошлись

Замечательно! Вот только есть одна проблема: страница как дом без дверей. На ней нет никакого способа войти или выйти! Мы исправим это, добавив пару ссылок.
После того как вы добавите ссылки можете считать что вы закончили. Получите удовольствие от созданной вами страницы.
Если страница все еще выглядит непривлекательно, не стоит волноваться. Скоро мы научим вас CSS с помощью которого можно сделать вашу страницу более привлекательно.

задание

подсказка

решение

Introduction to HTML. Project: Build Your Own Webpage #5

Картинка стоит тысячи слов
Отличная работа! Все же ваша страница пока еще выглядит серой. Давайте добавим одно или два изображения чтобы украсить ее.
Помните, чтобы вставить изображение из Интернета, вы должны щелкнуть правой кнопкой мыши по нему и выбрать "Скопировать адрес(url) изображения" Затем использовать этот URL-адрес в теге <img>.

задание

подсказка

решение

четверг, 27 июня 2013 г.

Introduction to HTML. Project: Build Your Own Webpage #4

Расскажите немного о себе
Уже можно понять, что это ваша страница, но многое еще неизвестно. Вы можете использовать один два абзаца, чтобы рассказать вашим читателям про ваши интересы, чем вы занимаетесь по жизни, насколько вам интересно изучать HTML и так далее.

задание

подсказка

решение

Introduction to HTML. Project: Build Your Own Webpage #3

Начнем с заголовка
Тут идет какой то непонятный текст отсылающий нас к статье в википедии про Защиту Чубакки. Точнее текст то понятный, непонятно как его понимать "Запомните: Если это рифмуется, то это правда! ".
Давайте используем заголовок <h1> на вашей странице чтобы дать понять что эта страница о вас.

задание

решение

среда, 26 июня 2013 г.

Introduction to HTML. Project: Build Your Own Webpage #2

Каждый дом нуждается в фундаменте.
HTML страница похожа на дом: ей тоже нужен определенный каркас для того чтобы все заработало. Как и дому, html-странице необходим фундамент. В нашем случае фундамент состоит из тегов <!DOCTYPE>, <html>, <head>, и <body>.

задание

подсказка

решение

Introduction to HTML. Project: Build Your Own Webpage #1

Что вы будете делать.

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

Посмотрите на файл index.html и на закладку результатов, где мы для примера сделали нашу собственную веб-страницу.

Нажмите сохранить и отправить код, чтобы продолжить обучение.

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

HTML Basics. Adding images to your site #5

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

HTML Basics. Adding images to your site #4

Изображения и ссылки

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

задание

подсказка

решение

HTML Basics. Adding images to your site #3

Кликните по изображению

Отличная работа! Теперь вы знаете, как добавить изображение на ваш сайт. Но что если вы хотите чтобы клик по картинке вас перевел куда-нибудь?

Тег <a> используется для создания гиперссылок (или просто ссылок) на веб-страницах. Именно в этот тег помещаются, слова или изображения, нажимая которые вы попадаете на новую страницу.

Также как <img> тег <a> имеет атрибут, который указывает, куда надо перейти. Только вместо src в <a> используется href вот как это выглядит:

<a href="http://www.codecademy.com">Научитесь программированию!</a>

src означает «источник». Он указывает <img> адрес где находиться изображение!

herf расшифровывается как "hypertext reference"(гипертекстовые ссылки). Помните когда мы говорили про гипертекст (т.е. ссылка) что это текст на который мы можем нажать как на

кнопку? А href как раз задает путь, куда ведет ссылка! Текст написанный после href не виден на странице, а видно на ней только то, что вы написали между тегами <a> и </a>.

задание

подсказка

решение

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

HTML Basics. Adding images to your site #2

Добавление изображений

Вы можете добавлять изображения, на страницы своего сайта сделав его еще более фантастичным. Для этого нужно использовать тег <img> Этот тег немного отличается от других. Вместо того чтобы поместить ваше содержимое между тегами вы указываете тегу место откуда он получает картинку при помощи src Он также отличается тем, что он самостоятельно закрывается, т.е. не требует отдельного закрывающего тега. Обратите внимание на / закрывающею его <img src="url" />.

Посмотрите как выглядит тег в редакторе, он добавляет изображение резиновой утки на страницу!(Вы можете посмотреть результат, нажав кнопку просмотр.)

Видите веб-адрес (URL - Uniform Resource Locator(универсальный адрес ресурса)) после src= ? Вот этот http://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg". Он говорит тегу <img> откуда ему брать изображение.
Каждое изображение в интернете имеет свой URL – адрес изображения. Достаточно щелкнуть правой кнопкой мыши на изображении и выбрать «Копировать адрес изображения». Затем вставить полученный URL в кавычках после src= в вашем теге <img> .

задание

решение

HTML Basics. Adding images to your site #1

Давайте сделаем передышку в середине пути

Вы проделали великолепную работу! Вот краткий перечень того, что мы узнали:
1. HTML используется чтобы придать структуру сайту.
2. Мы открываем html файл через браузер, а он обрабатывает (показывает нам) файл.
3. У html файлов иметься <head> и <body> (как и у вас!).
4. В <head> мы используем тег <title> для указания названия страницы.
5. Так же мы узнали как создавать заголовки и абзацы.

задание

решение

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

HTML Basics. Body elements #3

Используем все заголовки.

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

задание

ответ

HTML Basics. Body elements #2

Подробнее о заголовках!

HTML позволяет нам создавать заголовки разного размера. Заголовки бывают шести размеров, где <h1> босс, а <h6> слабак!

<h1> - Генеральный директор

<h2> - Вице-президент Fancy Towne

<h3> - Директор некого направления

<h4> - Руководитель среднего звена

<h5> - Младший помощник

<h6> - Тот, кто разносит кофе

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

задание

ответ

четверг, 20 июня 2013 г.

HTML Basics. Body elements #1

Абзацы и заголовки.

Мы определенно делаем успехи! Мы узнали, как и когда мы используем html. Также мы узнали как:
a. Установить теги в html - файле
b. Создать заголовок (в <head>)
c. Создать абзац (в <body> с помощью тега <p>).
Следующим шагом будет добавление заголовков для наших абзацев при помощи тегов заголовков. Давайте начнем с тега <h1> который обозначает что то важное.(Всем известно что самый важный шрифт является самым большим!)

задание

подсказка

ответ

HTML Basics. Introduction to HTML #5

Части тела

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

Мы узнали о закрывающихся и отрывающихся тегах. Также узнали, что все, что помещено между ними называется элементом.

элемент = <открытый тег> + содержимое + <закрытый тег>

Обратите внимание, что у нас есть как теги заголовка, так и теги тела. Фактически на странице отображается только то, что идет внутри тега <body> Так же надо иметь ввиду что тег <body> идет внутри тега <html> а не внутри тега <head>, например:

<html>
    <head></head>
    <body></body>
</html>

задание

подсказка

решение

среда, 19 июня 2013 г.

HTML Basics. Introduction to HTML #4

Создаем head(голову).

Весь наш HTML документ сосредоточен между открывающимся <html> и закрывающимся </html> тегом.

Внутри которого есть два основных тега: голова <head> и тело<body>. Рассмотрим тег head.
a. Он состоит из открывающегося и закрывающегося тега.
б. В нем содержится важная информация о веб-странице, например заголовок.
в. Заголовок это надпись, которую мы можем увидеть на вкладке (например, название страницы "Introduction to HTML").

задание

подсказка

решение

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

HTML Basics. Introduction to HTML #3

Базовый термины.

Чтобы лучше понять HTML, мы должны научиться говорить на HTML. Вы уже могли заметить что мы часто используем <>.

Слова внутри <> называются тегами.
Теги почти всегда идут в парах: открывающийся и закрывающийся тег.
Пример открывающего тега: <html>.
Пример закрывающего тега: </html>.

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

<первый тег><последний тег>Текст!</последний тег></первый тег>

Последнее упражнение научило нас как настроить HTML файл. Все что мы будем делать дальше будет внутри тегов <html> и </html>.
Повторение-мать ученья! Еще раз:

Задание

Подсказка

Ответ

HTML Basics. Introduction to HTML #2

HTML и CSS

HTML расшифровывается как HyperText Markup Language (гипертекстовый язык разметки). Гипертекстовые означает "текст ссылки". Каждый раз, когда вы нажимаете на слово, которое откроет для вас новый Интернет-сайт, вы нажимаете на гипертекст!

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

Что делает веб-страницы, красивее Это CSS - Cascading Style Sheets(каскадные таблицы стилей). Представьте что это, как кожа и макияж, которые покрывают кости HTML. Мы будем изучать HTML, а о CSS в узнаем в последующих курсах.

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

a. Всегда пишите <!DOCTYPE html> в первой строке. Это скажет браузеру, на каком языке ему читать (в данном случае, HTML).

б. Всегда пишите <html> на следующей строке. Это начало HTML-документа.

c. Всегда пишите </html> на последней строке. Это означет конец HTML-документа.

Задание

Подсказка

Решение

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

HTML Basics. Introduction to HTML. #1

Введение в HTML

Зачем изучать HTML?

Каждая веб-страница на которую ты смотришь написана на языке называющимся html. Ты можешь считать, что html это скелет, который дает основу каждой странице. В этом курсе мы будем использовать html для добавления параграфов, глав, изображений и связей на веб-странице.

В редакторе справа есть закладка называемая test.html. Это файл, в котором мы будем печать наш html код. Видите код в скобках <>? Это html! Как и любой другой язык, он имеет свой собственный специальный синтаксис (правила общения).

Когда мы нажимаем Save&Submit (сохранить и отправить), на вкладке с результатами вы сможете увидеть, как это выглядит в интернет браузере(например. Chrome, Firefox, Internet Explorer). Работа браузера преобразовывать код test.html в привычную для нас веб-страницу. Он знает как выглядит страница следуя синтаксису html.

Задание

Подсказка

Web Fundamentals

Основы Web

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

Чему вы научитесь

Как создать веб-сайты
HTML и CSS
Стиль и дизайн

В этом курсе вас ожидает 6 лекций с практическими заданиями:

Введение в HTML: Эти уроки познакомит Вас с основами HTML, языком который используется для создания веб-сайтов.
HTML Структура: Использование списков: В этом курсе мы рассмотрим более развернуто структуру HTML и начнем настройку страницы.
HTML Структура: Table, Div, и Span: В этой главе мы будем использовать таблицы, элементы div и диапазоны, чтобы научиться более широкому диапазону изменения содержания и стиля наших веб-страниц.
Введение в CSS: CSS-это то, что придает блеск вашей веб-странице: это тоже самое что кожа, на костях HTML. В этой главе мы начнем изучать стили для нашего веб-сайта.
CSS Классы и Идентификаторы: В этой главе мы поговорим о том, как группировать CSS-селекторы в классы, или указать единый селектор по идентификатору.
CSS элемент позиционирования: Здесь мы рассмотрим, как управлять тем, где и как ваши HTML элементы отображаются на странице.

Codecademy.com по русски

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

Плюсы обучения на codecademy на лицо вам не надо ставить кучу программ настраивать что то на своем компьютере, чтобы начать обучение вам нужен браузер (по моим наблюдениям лучше всего пользоваться хромом) и подключение к интернету. Но не смотря на все плюсы у него есть небольшой недостаток ресурс на английском языке. Я решил это исправить и помочь людям плохо знакомым с английским языком переведя для них уроки и задания. Так как не всегда есть свободное время то сказать о частоте выходов переводов ничего не могу, но постараюсь делать их как можно чаще. В целом перевод будет выглядеть следующим образом:

Перевод урока с codecademy

Задание

Подсказка с codecademy.com

Мои коментарии если будут

Решение

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

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

четверг, 27 июня 2013 г.

среда, 26 июня 2013 г.

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

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

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

четверг, 20 июня 2013 г.

среда, 19 июня 2013 г.

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

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

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

четверг, 27 июня 2013 г.

среда, 26 июня 2013 г.

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

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

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

четверг, 20 июня 2013 г.

среда, 19 июня 2013 г.

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

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