PURPOSEThe purpose of this assignme

PURPOSE
The purpose of this assignment is to learn how to add pictures and videos to an HTML page.
ACTIVITIES
Perform each of the following activities. If you have questions, issues, or doubts, please ask for help. Do not just guess.
1) Unzip the file C05_P01_Baseline.zip
a. The C05_Baseline folder contains a file named C05_screenshot.jpg. This is a screenshot of what today’s completed exercise should look like. Use this screenshot as a guide while completing this exercise.
2) Create a new file in Adobe Brackets, name it index.html, and save it in your C05_Baseline folder
3) Write the basic HTML structure:
a. Declare an HTML5 doctype
b. Give the document a head and body section
c. Give the page the following title: Exercise 06: Pictures and Videos
d. Also, do not forget to specify the character encoding as UTF-8!
4) In the body section write an image tag with the following attributes:
a. Source: http://icarnegie.com/wp/wp-content/themes/icarnegie/_/img/logo-icarnegie.svg
b. Alternate text: iCarnegie Global Learning
5) Hmm, there is no image. The tag does not appear to be working. That is because the image is actually white, and we cannot see it against the white background of the page.
a. One way we can solve this problem is by assigning a dark image to our body tag. We can do this by writing our very first CSS style.
i. Give the body tag the following inline CSS style. We call this an inline style because it is written within a line of HTML code.
1.
b. Okay, that looks a little better, but there is still a problem. The background is only dark in the top left-hand corner of the screen and we still cannot see the whole image. Let’s see if you can solve this problem on your own. Good luck!
i. By the way, did you notice that we have linked to two different image sources? The first image source is located on icarnegie.com and the second source is in a folder named “images” that is located in your C05_Baseline folder. What are the advantages and disadvantages of these two types of image sources?
c. Move on to step 6 once you have solved the background image problem.
6) Let’s add another image with the following attributes:
a. Source: images/icarnegie_ceo_mexico.jpg
b. Alternate text: iCarnegie Global Learning CEO visits Mexico
c. Title: iCarnegie Global Learning CEO visits Mexico
7) The alternate text and title attributes have the same information. Why is this? What is the difference between these two tags?
8) The image is very large. We want it to be only 560 pixels wide. Give the tag an attribute that will proportionally resize the image so it is only 560 pixels wide. Important: do not squish or stretch the image!
9) Now let’s embed two YouTube videos with the following attributes:
a. Video one:
i. The first video and its embed can be found at the link below:
1. http://www.youtube.com/watch?feature=player_embedded&v=xdv9tNVyxWw
ii. Make the video 560 x 315 pixels
iii. Do not show suggested videos at the end
iv. Enable privacy enhanced-mode
v. Have the video play automatically when the page loads
b. Video two:
i. The second video and its embed can be found at the link below:
1. http://www.youtube.com/watch?feature=player_embedded&v=xdv9tNVyxWw
ii. Make the video 560 x 315 pixels
iii. Do not show suggested videos at the end
iv. Enable privacy enhanced-mode
v. Do not autoplay the video
vi. Note, the embed code that YouTube provides does not include either “http:” or “https:” in the source attribute. This is fine unless you try to preview the webpage offline or without Brackets’ Live Preview, in which case the video will notwork. I suggest that you manually insert “https:” in source attribute. Watch this short video for more information: http://youtu.be/qI_v27gBpeM
10) Finally, do not forget to add the and
tags between each of the pictures and videos
11) Save your work to a zip file and upload it to the LMS

Results (Russian) 1:

Цель
этого назначения предназначен для того, чтобы узнать как добавить фотографии и видео в HTML-страницу.
ДЕЯТЕЛЬНОСТЬ
выполнять каждое из следующих действий. Если у вас есть вопросы, вопросы или сомнения, обратитесь за помощью. Сделать не просто догадаться.
1) Распакуйте файл C05_P01_Baseline.zip
a. В папке C05_Baseline содержится файл с именем C05_screenshot.jpg. Это скриншот из выполненных упражнений то, что сегодня должна выглядеть. Используйте этот скриншот в качестве руководства при выполнении этого упражнения.
2) создайте новый файл в Adobe скобки, имя index.html и сохраните его в папке C05_Baseline
3) написать базовую структуру HTML:
а. объявить тип документа HTML5
б. дают документ голова и тело секции
c. Укажите страницы следующее название: осуществлять 06: Фотографии и видео
d. Кроме того, не забудьте указать кодировку символов UTF-8!
4) в организме раздел писать тег изображения со следующими атрибутами:
а. Источник: http://icarnegie.com/wp/wp-content/themes/icarnegie/_/img/logo-icarnegie.svg
б. альтернативный текст: iCarnegie глобального изучения
5) Хм, нет никаких изображений. Тег, как представляется, не будет работать. Это потому, что изображение на самом деле белый, и мы не можем видеть его на белом фоне страницы.
a. Один из способов, мы можем решить эту проблему — путем присвоения темное изображение нашей тега body. Мы можем сделать это, написав наш самый первый CSS стиль.
i. дать тега body следующие встроенного стиля CSS. Мы называем это встроенный стиль, потому что он написан в строке HTML кода.
1.
б. хорошо, что выглядит немного лучше, но все еще есть проблемы. Фон только темные в левом верхнем углу экрана, и мы еще не можем увидеть изображение целиком. Давайте посмотрим, если вы можете решить эту проблему самостоятельно. Удачи!
i. Кстати вы заметили, что мы связаны с двух разных изображений источников? Первый источник изображения расположен на icarnegie.com и второй источник находится в папке с именем «образов», которая находится в папке C05_Baseline. Каковы преимущества и недостатки этих двух типов источников изображения?
c. переходите к шагу 6 после того, как вы решили проблему изображения фона.
6) добавим еще один образ со следующими атрибутами:
а. Источник: Images/icarnegie_ceo_mexico.jpg
b. альтернативный текст: iCarnegie глобальное обучение Генеральный директор посещает Мексику
c. Название: iCarnegie глобальное обучение Генеральный директор посещает Мексику
7) альтернативный текст и названия атрибутов имеют ту же информацию. Почему это? Какова разница между этими двумя тегами?
8) изображение является очень большой. Мы хотим быть только 560 пикселей в ширину. Дайте тег атрибут, который будет пропорционально изменить размер изображения, так что это только 560 пикселей в ширину. Важно: не хлюпать или растягивать изображение!
9) теперь давайте вставлять два YouTube видео со следующими атрибутами:
а видео один:
i. Первое видео и его вставлять можно найти на соединении ниже:
1. http://www.YouTube.com/Watch?Feature=player_embedded &v = xdv9tNVyxWw
ii. Сделать видео 560 x 315 пикселей
iii. Не показывать предлагаемые видео в конце
iv. Включение усиленной конфиденциальности-режим
v. Есть воспроизведение видео автоматически при загрузке страницы
б видео 2:
i. Второе видео и его вставлять можно найти на соединении ниже:
1. http://www.YouTube.com/Watch?Feature=player_embedded &v = xdv9tNVyxWw
ii. Сделать видео 560 x 315 пикселей
iii. Не показывать предлагаемые видео в конце
iv. Включение усиленной конфиденциальности-режим
v. Делать не Автозапуск видео
vi. Обратите внимание, что YouTube предоставляет код для встраивания не включают либо «http: "или" https: "в атрибуте source. Это хорошо если попытке просмотра веб-страницы в автономном режиме или без скобок Live Preview, в этом случае видео будет встраиваются. Я предлагаю что вы вручную вставить "https:«в исходный атрибут. Посмотрите этот короткий видеоролик, для получения дополнительной информации: http://youtu.be/qI_v27gBpeM
10) наконец, не забудьте добавить и
тегов между каждой фотографии и видео
11) Сохраните zip-файл и загрузить его в СУО

Results (Russian) 2:

ЦЕЛЬ
Цель этого задания, чтобы узнать, как добавить фотографии и видео на HTML-странице.
ДЕЯТЕЛЬНОСТЬ
Выполните каждый из следующих видов деятельности. Если у вас есть вопросы, проблемы, или сомнения, пожалуйста, обратитесь за помощью. Не только догадываться.
1) Распакуйте файл C05_P01_Baseline.zip
. Папка C05_Baseline содержит файл с именем C05_screenshot.jpg. Это скриншот того, что сегодняшняя завершена работа должна выглядеть. . Используйте этот скриншот в качестве руководства при заполнении этого упражнения
2) Создайте новый файл в Adobe Кронштейны, назовите его index.html, и сохранить его в папке C05_Baseline
3) Напиши основную структуру HTML:
. Объявите HTML5 DOCTYPE
б. Дайте документу головы и тела раздел
с. Дайте странице следующий заголовок: Упражнение 06: Фотографии и видео
D. ! Кроме того, не забудьте указать кодировку как UTF-8
4) В разделе тела написать тег изображения со следующими атрибутами:
. Источник: http://icarnegie.com/wp/wp-content/themes/icarnegie/_/img/logo-icarnegie.svg
б. Альтернативный текст: iCarnegie глобального изучения
5) Хм, нет изображения. Тег, кажется, не работает. Это потому, что изображение на самом деле белый, и мы не можем видеть это на белом фоне страницы.
. Один из способов решения этой проблемы является путем присвоения темное изображение в наш тега тела. Мы можем сделать это, написав наш самый первый стиль CSS.
I. Дайте тело тега следующий встроенный CSS стиль. Мы называем это встроенный стиль, потому что это написано в строке HTML кода.
1.
б. Хорошо, что выглядит немного лучше, но есть еще проблема. Фон только темно в верхнем левом углу экрана, и мы все еще ​​не можем видеть все изображение. Давайте посмотрим, если вы можете решить эту проблему самостоятельно. Удачи!
я. Кстати, вы заметили, что мы связаны с двух различных источников изображения? Первый источник образа, расположенного на icarnegie.com и второй источник находится в папке с именем "Изображения", что находится в папке C05_Baseline. Каковы преимущества и недостатки этих двух типов источников изображения?
в. . Переходите к шагу 6, как только вы решили проблему фоновое изображение
6) Давайте добавим еще одно изображение со следующими атрибутами:
. Источник: изображения / icarnegie_ceo_mexico.jpg
б. Альтернативный текст: iCarnegie глобального изучения генеральный директор посещает Мексика
гр. Название: iCarnegie глобального изучения генеральный директор посещает Мексика
7) альтернативный текст и название атрибуты имеют ту же информацию. Почему это происходит? В чем разница между этими двумя тегами?
8) Изображение очень большой. Мы хотим, чтобы это было только 560 пикселей в ширину. Дайте шильдик атрибут, который будет пропорционально изменить размер изображения, так что это только 560 пикселей в ширину. Важно: не хлюпать или растянуть изображение
9) Теперь давайте вставлять два видео на YouTube со следующими атрибутами:
. Видео один:
я. Первое видео и его код вставки можно найти по ссылке ниже:
1. http://www.youtube.com/watch?feature=player_embedded&v=xdv9tNVyxWw
II. Сделать видео 560 х 315 пикселей
III. Не показаны рекомендуемые видео в конце
IV. Включить Privacy Enhanced режима
ст. Имейте воспроизведения видео автоматически при загрузке страницы
б. Видео два:
я. Второе видео и его код вставки можно найти по ссылке ниже:
1. http://www.youtube.com/watch?feature=player_embedded&v=xdv9tNVyxWw
II. Сделать видео 560 х 315 пикселей
III. Не показаны рекомендуемые видео в конце
IV. Включить Privacy Enhanced режима
ст. Не автозапуска видео
VI. Примечание, код, что YouTube предоставляет не включают в себя ни "HTTP:" или "HTTPS:" в атрибуте источника. Это нормально, если вы попробуете для предварительного просмотра веб-страницы в автономном режиме или без скобок "Live Preview, в этом случае видео будет notwork. Я полагаю, что вы вручную вставить "HTTPS:" в атрибуте источника. Смотреть это короткое видео для получения дополнительной информации: http://youtu.be/qI_v27gBpeM
10) Наконец, не забудьте добавитьи
метки между каждой из фотографий и видео
11) Сохраните вашу работу в почтовый файл и загрузить его в LMS

Results (Russian) 3:

Целью
цель это назначение и узнайте, как для добавления снимков и видеоклипов на HTML-страницы.
ДЕЯТЕЛЬНОСТИ
выполните следующие действия. Если у вас есть вопросы, проблемы или сомнения, пожалуйста, попросите о помощи. Не только угадать.
1) Разархивируйте файл C05_P01_BASELINE.zip
a. C05_BASELINE папка содержит файл с именем C05_SCREENSHOT.jpg.Это снимок экрана что сегодня завершены мероприятия должно выглядеть. Используйте этот снимок в качестве руководства при выполнении этого упражнения.
2) создать новый файл в формате Adobe кронштейны, index.html, и сохранить его в C05_BASELINE папку
3) записи основных HTML структура:
a. Объявить HTML5 doctype
b. Этот документ в головы и тела раздел
c. Дать на странице следующий заголовок: упражнение 06:Снимки и видеоклипы
d. Кроме того, не забудьте указать кодировку символов как UTF-8 !
4) в разделе запись в тег изображения с следующие атрибуты:
a. Источник: http://icarnegie.com/wp/wp-content/themes/icarnegie/_/img/logo-icarnegie.svg
b. Альтернативный текст: iCarnegie Global Learning
5) HMM, нет изображения. Тег не работает.Это происходит потому, что изображение фактически белый, и мы не можем его против белый фон страницы.
a. Одним из способов решения этой проблемы является назначение темное изображение в наши тела тега. Мы можем сделать это в письменной форме наш самый первый CSS style.
i. Предоставить органу tag следующие inline CSS style. Мы называем этот линейный стиль потому, что она написана в строке код HTML.
1.
b. Нормально, что выглядит немного лучше, но еще есть проблемы. Фон только темные в верхнем левом углу экрана, и мы все еще не можем см. всего изображения. Давайте посмотрим, если вы можете решить эту проблему самостоятельно. Удачи!
i. Кстати, вы заметили, что мы связаны с двух разных источников?Первый источник изображения находится на icarnegie.com и второй источник находится в папке с именем "изображения", что находится в вашем C05_BASELINE папки. Каковы преимущества и недостатки этих двух типов изображения источников?
c. Переходите к шагу 6 после того, как вы решили фонового изображения проблемы.
6) давайте добавить еще одного изображения с следующие атрибуты:
a. Источник:Images/icarnegie_ceo_mexico.jpg
b. Альтернативный текст: iCarnegie глобального изучения генеральный директор поездки Мексика
c. Название: iCarnegie глобального изучения генеральный директор поездки Мексика
7) альтернативный текст и название атрибутов той же информации. Почему это происходит? В чем разница между этими двумя теги?
8) изображение очень большое. Мы хотим, чтобы она была только 560 пикселей в ширину.Дать тег атрибут, будут пропорционально изменять размер изображения, чтобы только 560 пикселей в ширину. Важно: не squish или растянуть изображение!
9) Теперь давайте внедрять два видео с YouTube с следующие атрибуты:
a. Видео один:
i. Первое видео и ее встроить можно найти по ссылке ниже:
1. http://www.youtube.com/watch?feature=player_embedded&v=xdv9tNVyxWw
ii.Видео - 560 x 315 пикселей
iii. Не показывать предлагает видео в конце
iv. Enable privacy enhanced-режим
v. Есть воспроизведение видео автоматически, когда страница загрузится
b. Видео два:
i. Второй видео и ее встроить можно найти по ссылке ниже:
1. http://www.youtube.com/watch?feature=player_embedded&v=xdv9tNVyxWw
ii. Видео - 560 x 315 пикселей
iii.Не показывать предлагает видео в конце
iv. Enable privacy enhanced-режим
v. Не воспроизводить видео
vi. Обратите внимание, что вставить код, на YouTube предоставляет не включает в себя ни "http:" или "https:" в атрибут источника. Это хорошо если вы попробуйте для предварительного просмотра веб-страницы в сети или без кронштейнов" предварительный просмотр в реальном времени, и в этом случае видео будет произведенное компанией. Я считаю, что можно вручную включить "https:" В источник атрибута. Посмотрите это короткое видео для получения более подробной информации: http://youtu.be/qI_v27gBpeM
10) наконец, не забудьте добавить и
теги между каждой из снимков и видеоклипов
11) сохранить работу в zip-файл и отправить его в LMS