Adding Images Udacity English English (auto-generated)

Adding ImagesYouTube↗ IA↗(long shot)
Education 12.9K views 36 likes 0 dislikes 23 Feb 2015

Udacity 651K subscribers United States YouTube↗

Click to Play Video

Alright so, let's learn another tag. This one is the image tag. It looks like

all right so let's learn another tag this one is the image tag it looks like

this, IMG, and this is for including images. It has the following structure. The

this IMG and this is for including images it has the following structure

opening IMG tag. It has an attribute called source, SRC equals, and this equals

the opening IMG tag and has an attribute called source SRC equals and this equals

the URL. This is the URL of the image to download. Remember, we talked about

a URL this is the URL of the image to download remember we talked about how

how the web service can serve all sorts of different

the web servers can serve all sorts of

types of content? If you're going to serve an image, this

different types of content if you're

is how you would do it. You would include it

going to serve an image this is how you

in an image tag in HTML, and you reference the

would do it you would include it in an image tag in HTML and you reference the

URL. And then there's another attribute called alt. Which stands

URL and then there's another attribute called alt which stands for alternate

for alternate, and this is text that gets displayed when

and this is text that gets displayed

the image doesn't load. Its required in the sense that

when the image doesn't load it's required in the sense that HTML parses

HTML parses will complain at you if it's not there?

will complain at you if it's not there

Nothing will break, but it's really nice to include it. So

nothing will break but it's really nice

broken requests like if, if, if our browser requested a URL that

to include it so are broken requests like if if our browser requests the URL

doesn't exist, this is the text that gets displayed, and it's also

it doesn't exist this is the text that gets displayed and it's also for blind

for blind people. You know, it doesn't take much to add an

people you know it doesn't take much to

alt text that'll make somebody's life or somebody's day at least

add an alt text and it'll make somebody's life or somebody's day at

mildly easier. And one other thing I'd like to point out here,

least mildly easier and one other thing I'd like to point out here is every tag

is every tag that we've talked about so far has had a

we've talked about so far has had a

closing tag. Images don't. This is the entire tag. There's no contents

closing tag images don't this is the entire tag there's no contents to an

to an image. See? It just ends right here.

image see it just ends right here this

This is called a void tag, and a void tag

is called a void tag and a void tag is a

is a tag that has no content, and because it

tag that has no content and because it

has no content, it doesn't need a closing tag. Let's

has no content it doesn't need a closing

try this thing out in the browser and see how

tag let's try this thing out in the

it looks in real life. Okay, so here we are

browser and see how it looks in real life okay so here we are in our little

in our little HTML previewer. Let's, let's add an image.

HTML previewer let's let's add an image

Okay so, we've got our, our image tag, src equals

ok so we've got our our image tag source

udacity.com and hipmunk.png. This is our URL of an image that I've prepared

equals Udacity calm and Hipmunk that PNG this is our URL of an image that I've

for us. We've got some alt text there. Let's go ahead and click Update. And

prepared for us we've got some alt text there let's go ahead and click update

ta dah, there's our image. Now, a couple other things we can do. I

and tada there's our image now a couple other things we can do

can put some text here. There's our text. Images just appear in line with text. Yeah, so a small image just appears right in the middle of other text.

I could put some text here there's our text images just appear in line with text yeah so a small image just appears right in the middle of other text

Similar videos:

Problems with Memcachedb - Web Development
Udacity
6K views 13 likes 0 dislikes 27 May 2012100% match

More Handlers - Web Development
Udacity
9.1K views 9 likes 2 dislikes 22 Apr 2012100% match

Content Type - Web Development
Udacity
7.5K views 5 likes 1 dislikes 22 Apr 2012100% match

Web 简介
 Udacity
25.7K views 60 likes 0 dislikes 23 Feb 2015100% match

Whitespace Solution - Web Development
Udacity
15.7K views 10 likes 1 dislikes 23 Feb 2015100% match

Inline Vs Block
Udacity
17.3K views 139 likes 5 dislikes 23 Feb 2015100% match

The Method Attribute - Web Development
Udacity
9.6K views 14 likes 8 dislikes 22 Apr 2012100% match

Cache Architecture - Web Development
Udacity
7.2K views 16 likes 1 dislikes 27 May 2012100% match

Whitespace
Udacity
47.8K views 26 likes 4 dislikes 23 Feb 2015100% match

Course Outline - Web Development
Udacity
46.2K views 169 likes 0 dislikes 23 Feb 2015100% match

Web Applications - Web Development
Udacity
19.5K views 59 likes 4 dislikes 02 Jun 2014100% match

The Method Attribute - Web Development
Udacity
5.8K views 3 likes 0 dislikes 22 Apr 2012100% match

Install Google App Engine
Udacity
7.1K views 40 likes 48 dislikes 17 Apr 2012100% match

Most Common Method - Web Development
Udacity
9.7K views 5 likes 0 dislikes 23 Feb 2015100% match

Paragraph Tag - Web Development
Udacity
8.6K views 4 likes 0 dislikes 23 Feb 2015100% match

Precomputed Caching - Web Development
Udacity
12.2K views 80 likes 0 dislikes 27 May 2012100% match

Shopping List Take 1 - Web Development
Udacity
841 views 1 likes 0 dislikes 23 Feb 2015100% match

Response Headers - Web Development
Udacity
6.4K views 21 likes 4 dislikes 23 Feb 2015100% match

Bold Tag - Web Development
Udacity
53K views 29 likes 0 dislikes 23 Feb 2015100% match

Cookie Examples - Web Development
Udacity
5.4K views 29 likes 2 dislikes 23 Feb 2015100% match

Adding Images
Moodle
2.4K views 7 likes -1 dislikes 05 Oct 2020100% match

Correct URL - Web Development
Udacity
10.9K views 6 likes 1 dislikes 23 Feb 2015100% match

World Wide Web - Web Development
Udacity
37.9K views 40 likes 1 dislikes 23 Feb 2015100% match

User Agent Header - Web Development
Udacity
11.6K views 24 likes 7 dislikes 23 Feb 2015100% match

36 Adding images
Moodle
2.2K views 2 likes 0 dislikes 07 Jan 2019100% match

Missing End Tag
Udacity
43K views 15 likes 1 dislikes 23 Feb 2015100% match

Introduction - Web Development
Udacity
23.3K views 107 likes 0 dislikes 23 Feb 2015100% match

User Input - Web Development
Udacity
7.7K views 3 likes 0 dislikes 22 Apr 2012100% match

Part 2 - Web Development
Udacity
643 views 2 likes 0 dislikes 07 May 2012100% match

Valid Headers - Web Development
Udacity
7.9K views 1 likes 0 dislikes 23 Feb 2015100% match

Settings Privacy About Contact Donate