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

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. Так же мы узнали как создавать заголовки и абзацы.



задание
решение