Ниачем

пятница, 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 )

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

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

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

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

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

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

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

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

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

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